/* ============================================================================

   Boutique Homes · UI/UX Audit
   One stylesheet for two templates (landing + module), ordered
   tokens -> base -> chrome -> landing -> panel -> module -> dialogs -> queries.

   Visual system: "Field Notes", built on Boutique's own surface.

   Every value below was sampled from boutique-homes.com rather than invented,
   so the audit sits inside the client's system instead of next to it. Four
   decisions carry the identity, and each is a departure from the template this
   file grew out of:

     1. Structure is square, controls are not. Hairlines, panels, frames and
        captures all meet at right angles, because Boutique's own pages do.
        Anything clickable carries --r-btn (10px) or --r-ctl (8px), which is
        what separates this system from the second audit of the same site: that
        one squared its buttons too, and the result reads as a wireframe rather
        than a finished document. The circle stays reserved for two things that
        are genuinely round, the capture marker and the auditor's photo.

     2. There is no monospace. Boutique has no mono anywhere in its stack. Its
        metadata voice is Inter, uppercase, tracked out to 0.13em, which is how
        it sets "VIEW COLLECTION", "TRAVEL" and its own copyright line. The
        label style uses the same sans as the body, with tabular figures, so

     3. The primary action is a white fill with a near-black label, not an
        accent fill. This is Boutique's own SEARCH and REGISTER treatment. It
        is also the accessible choice: white on the brand coral measures
        3.50:1, which fails 1.4.3 for body text, while ink on white measures
        18.86:1. The coral stays a text and hairline accent, where it measures
        5.27:1 and passes.

     4. The ground is flat. The previous system lit the masthead with two
        radial gradients. Boutique's pages are matte from top to bottom, so the
        gradients are gone and hairlines do all the separating.

   The audit reports problems only. There is no strength severity: it was
   removed from the data and from every code path.

   Colour: every text/background pair below is at or above WCAG 1.4.3 AA
   (4.5:1 body, 3:1 large), measured against the flat ground rather than a lit
   one, because there is no longer anything lighting it. Ratios are recorded
   beside each token so a future edit knows why the value is what it is.
   Re-check before changing one.
   ========================================================================= */

/* `hidden` means hidden, everywhere.
 *
 * The browser's [hidden] rule is a user-agent style, so ANY author rule that
 * sets display beats it. Every element the JS hides here is also a flex or grid
 * container, so `el.hidden = true` did nothing on its own.
 */

/* --- 1. Tokens ----------------------------------------------------------- */

/* --- 2. Base ------------------------------------------------------------- */
/* Flat ground, no light source.
   Boutique's pages are matte from top to bottom. The previous system lit the
   masthead with two radial gradients; carrying those over would have put a
   glow on a brand that does not use one, and it is the tell that most reliably
   makes a dark page look machine made. Hairlines separate the planes instead. */
body{
  background:var(--ink);
  color:var(--tx);
  font-family:var(--font-ui);
  font-size:16px;
  line-height:1.62;
  /* Boutique sets its body at 0.33px on 14px, a touch under 0.024em. Carried
     over because it is a large part of why their pages read as considered
     rather than default. */
  letter-spacing:0.015em;
}

/* The metadata voice. Uppercase and tracked out is how Boutique labels things.
   Tabular figures are the reason this voice can be Inter rather than a
   monospace and still keep finding IDs, severity counts and the ledger aligned
   in a column. Scoped to the places that actually carry numbers: proportional
   figures are the better choice in running prose, so body copy is left alone. */
.ledger,.find-num,.mark,.mod-code,.tag,.sev-table,.count-pill{
  font-variant-numeric:tabular-nums;
}
body.is-locked{overflow:hidden;}
img{max-width:100%;height:auto;display:block;}
a{color:var(--acc-tx);}


/* The landing page reads as three sections stacked in a tall viewport: the
   brand row, the hero copy, and the ledger. Flex space-between spreads them
   out so the brand row and ledger drift toward the top and bottom of the
   viewport as it grows, while the hero copy holds the visual middle, without
   the outer two ever reaching the true edge, which the padding below (large
   screens only) guards against. On narrow screens there is rarely enough
   spare height for this to matter, so no extra inset is added there. */
#main{min-height:calc(100dvh - var(--nav-h));display:flex;flex-direction:column;justify-content:space-between;}
@media (min-width:861px){
  #main{padding-block:clamp(24px,5vh,64px);}
}
.skip-link{
  position:absolute;left:16px;top:-60px;z-index:300;
  background:var(--acc);color:var(--on-acc);font-weight:600;font-size:14px;border-radius:var(--r-ctl);
  padding:10px 16px;text-decoration:none;transition:top var(--ease);
}
.skip-link:focus{top:16px;}

/* --- 3. Top bar ---------------------------------------------------------- */
@supports not (backdrop-filter:blur(1px)){.topbar{background:var(--ink-2);}}
.brand{display:flex;align-items:center;gap:12px;min-width:0;color:var(--tx);text-decoration:none;}
/* Square, like everything else Boutique draws. See the note in the token
   block: the circle is reserved for the capture marker and the auditor photo. */
.brand-mark,.brand-mark-slot{width:28px;height:28px;border-radius:0;object-fit:contain;flex-shrink:0;display:inline-block;}
.brand-label{
  font-family:var(--font-ui);font-size:11px;letter-spacing:0.13em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.brand-label b{color:var(--tx);font-weight:500;}
.brand-label i{font-style:normal;color:var(--tx-3);}
.modules-btn{
  display:inline-flex;align-items:center;gap:10px;flex-shrink:0;
  min-height:40px;padding:0 14px;border-radius:var(--r-ctl);
  background:transparent;border:1px solid var(--line);
  font-family:var(--font-ui);font-size:11px;letter-spacing:0.13em;text-transform:uppercase;
  color:var(--tx);cursor:pointer;transition:border-color var(--ease),background var(--ease);
}
.modules-btn:hover{border-color:var(--acc-line);background:var(--acc-soft);}
.modules-btn i{display:block;width:14px;height:1px;background:currentColor;position:relative;flex-shrink:0;}
.modules-btn i::before,.modules-btn i::after{
  content:"";position:absolute;left:0;width:14px;height:1px;background:currentColor;
}
.modules-btn i::before{top:-4px;}
.modules-btn i::after{top:4px;}
.modules-btn .n{color:var(--acc-tx);}

/* --- 4. Severity and reference tags -------------------------------------- */
.tag{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-ui);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--tx-2);
}
.tag::before{content:"";width:14px;height:2px;background:currentColor;flex-shrink:0;}
.tag.high{color:var(--high);}
.tag.moderate{color:var(--moderate);}
.tag.minor{color:var(--minor);}
.tag.device{color:var(--tx-3);}
.tag.device::before{display:none;}
.tag.ref{color:var(--acc-tx);}
.tag.ref::before{display:none;}

/* --- 5. Landing masthead ------------------------------------------------- */
/* The brand row now lives in its own flex section (.mast-row) ahead of the
   hero copy, so the two can be pulled apart on tall viewports instead of
   sitting fused together. */
.mast-row{padding-top:clamp(20px,3vw,28px);}
.masthead{padding:clamp(20px,3vw,28px) 0 clamp(34px,4.4vw,54px);}
.masthead-top{
  display:flex;align-items:center;gap:clamp(14px,2vw,22px);flex-wrap:wrap;
}
.masthead-top .rule{flex:1;height:1px;background:var(--line);min-width:24px;}
.mast-logo{display:flex;align-items:center;gap:10px;}
.mast-logo img{width:30px;height:30px;border-radius:0;object-fit:contain;}
.mast-logo span{font-family:var(--font-ui);font-size:11px;letter-spacing:0.13em;text-transform:uppercase;}
.mast-madison{width:clamp(112px,12vw,150px);height:auto;}

.masthead h1{
  margin:0;font-family:var(--font-display);font-weight:400;
  font-size:clamp(42px,7.4vw,86px);line-height:0.98;letter-spacing:-0.015em;max-width:24ch;
}
.masthead h1 em{font-style:italic;color:var(--acc-tx);}
.mast-sub{line-height:var(--lh-prose);font-family:var(--font-display);
  margin:clamp(18px,2.4vw,26px) 0 0;max-width:60ch;
  font-size:clamp(15px,1.5vw,17px);color:var(--tx-2);
}
.mast-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,34px);}
/* Rounded, per the Studio direction. The label stays mono and uppercase, the
   roundness is the only thing borrowed; a rounded button with a soft sans
   label is the generic pairing this system is trying to avoid. */


/* Ledger: the audit's own numbers, stated plainly rather than illustrated.
   The rule above it sits on the full-width wrapper rather than the
   inner .shell, so it spans edge to edge the same way the masthead's
   divider used to, instead of stopping at the content column's padding. */
.ledger-wrap{border-top:1px solid var(--line);}
.ledger{display:grid;grid-template-columns:repeat(auto-fit,minmax(124px,1fr));}
.ledger div{
  padding:22px 14px 26px;border-right:1px solid var(--line-soft);text-align:center;
  font-family:var(--font-ui);font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--tx-3);
}
.ledger div:last-child{border-right:0;}
.ledger b{font-variation-settings:'opsz' var(--opsz-display);
  display:block;font-family:var(--font-display);font-weight:400;font-size:clamp(30px,3.6vw,44px);
  line-height:1;letter-spacing:0;color:var(--tx);margin-bottom:8px;
}
.ledger .high b{color:var(--high);}
.ledger .moderate b{color:var(--moderate);}
.ledger .minor b{color:var(--minor);}

/* Contact sheet: real captures, hairline framed, captioned. No tilt, no glow. */
.sheet{padding:clamp(30px,4.2vw,52px) 0 clamp(46px,7vw,80px);}
.sheet-head{
  display:flex;justify-content:space-between;gap:20px;padding-bottom:18px;color:var(--tx-3);
  font-family:var(--font-ui);font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;
}
.sheet-head h2{margin:0;font:inherit;letter-spacing:inherit;}
.sheet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px);}
.sheet-item{min-width:0;margin:0;}
.sheet-item .frame{border:1px solid var(--line);background:var(--panel);overflow:hidden;}
.sheet-item img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center;}
.sheet-item figcaption{
  padding-top:10px;font-family:var(--font-ui);font-size:10px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--tx-3);
}

/* --- 6. Module browser panel --------------------------------------------- */
.panel-overlay{position:fixed;inset:0;z-index:200;display:none;background:var(--ink);overflow:hidden;}
.panel-overlay.open{display:flex;flex-direction:column;}
.panel-fixed{
  position:relative;flex-shrink:0;border-bottom:1px solid var(--line);background:var(--ink-2);
  padding:clamp(18px,2.6vw,26px) var(--pad) 0;
}
.panel-bar{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  max-width:var(--shell);margin:0 auto;padding-right:52px;
}
.panel-bar h2{
  margin:0;font-family:var(--font-display);font-weight:400;
  font-size:clamp(26px,3.4vw,38px);line-height:1;letter-spacing:-0.01em;
}
.panel-bar .count{
  font-family:var(--font-ui);font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--tx-3);
}
.panel-close{
  position:absolute;top:16px;right:var(--pad);z-index:2;
  width:40px;height:40px;border-radius:var(--r-ctl);
  border:1px solid var(--line);background:var(--ink-2);
  color:var(--tx);font-size:20px;line-height:1;cursor:pointer;transition:border-color var(--ease);
}
.panel-close:hover{border-color:var(--acc);}
.panel-tabs{
  display:flex;gap:clamp(14px,2.4vw,30px);max-width:var(--shell);margin:0 auto;
  padding-top:clamp(16px,2.2vw,24px);overflow-x:auto;scrollbar-width:none;
}
.panel-tabs::-webkit-scrollbar{display:none;}
.panel-tab{
  flex-shrink:0;display:flex;align-items:center;gap:8px;
  background:0;border:0;border-bottom:3px solid transparent;padding:0 0 12px;
  cursor:pointer;color:var(--tx-3);white-space:nowrap;
  font-family:var(--font-ui);font-size:11px;letter-spacing:0.13em;text-transform:uppercase;
  transition:color var(--ease),border-color var(--ease);
}
.panel-tab:hover{color:var(--tx-2);}
/* 3px rather than 1px so the active tab is legible as active at a glance,
   not just a slightly brighter label. */
.panel-tab[aria-selected="true"]{color:var(--tx);border-bottom-color:var(--acc);}
.tab-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 5px;border-radius:50%;
  background:var(--acc-soft);color:var(--acc-tx);font-size:10px;
}
.panel-tab[aria-selected="true"] .tab-count{background:var(--acc);color:var(--on-acc);}
/* One step lighter than the fixed header above it (--ink-3 over --ink-2),
   so scrolling reads as moving into a distinct surface rather than a
   continuation of the same flat ground the title and tabs sit on. Left
   short of --panel, which the tiles' own frames use, so the tiles still
   read as objects sitting on this surface rather than blending into it. */
.panel-scroll{flex:1;background:var(--ink-3);overflow-y:auto;overscroll-behavior:contain;}
.panel-scroll-inner{
  max-width:var(--shell);margin:0 auto;
  padding:clamp(24px,3.4vw,40px) var(--pad) clamp(48px,7vw,88px);
}

.mod-grid{
  list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(248px,1fr));
  gap:clamp(22px,2.4vw,34px);
}
.mod-cell{min-width:0;}
.mod-cell[hidden]{display:none;}
/* The title sits under the frame. It used to overlay the capture, where a
   light screenshot left it unreadable on roughly half the tiles. */
.mod-tile{display:block;text-decoration:none;color:inherit;}
.mod-tile .frame{border:1px solid var(--line);background:var(--panel);overflow:hidden;border-radius:var(--r-btn);}
.mod-tile img{
  width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center;
  transition:opacity var(--ease);
}
.mod-tile:hover .frame{border-color:var(--acc);}
.mod-tile:hover img{opacity:0.86;}
.tile-body{padding-top:12px;display:flex;flex-direction:column;gap:7px;}
.tile-body h3{font-family:var(--font-display);margin:0;font-size:15px;font-weight:500;line-height:1.35;letter-spacing:-0.005em;}
.tile-meta{
  display:flex;flex-wrap:wrap;gap:4px 12px;min-height:16px;
  font-family:var(--font-ui);font-size:10px;letter-spacing:0.11em;text-transform:uppercase;color:var(--tx-3);
}
.tile-meta .high{color:var(--high);}
.tile-meta .moderate{color:var(--moderate);}
.tile-meta .minor{color:var(--minor);}
.mod-tile.disabled{
  border:1px dashed var(--line);background:var(--ink-2);padding:26px 20px;min-height:186px;
  display:flex;align-items:center;justify-content:center;text-align:center;border-radius:var(--r-btn);
}
.pending-body{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--tx-3);}
.pending-icon{display:block;width:22px;height:22px;}
.pending-icon svg{width:100%;height:100%;}
.pending-body p{line-height:var(--lh-prose);font-family:var(--font-display);margin:0;font-size:15px;color:var(--tx-2);}
.pending-label{font-family:var(--font-ui);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;}

/* --- 7. Module page ------------------------------------------------------ */
.mod-page{padding-bottom:clamp(46px,6.5vw,78px);}
.mod-bar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:18px 0;border-bottom:1px solid var(--line);
  font-family:var(--font-ui);font-size:11px;letter-spacing:0.13em;text-transform:uppercase;color:var(--tx-3);
}
.mod-bar .crumb{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap;}
.mod-bar .crumb b{color:var(--acc-tx);font-weight:400;}
.mod-bar .crumb em{font-style:normal;color:var(--tx);}

.mod-head{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,64px);
  align-items:end;padding:clamp(32px,4.4vw,58px) 0 clamp(20px,2.6vw,30px);
  border-bottom:1px solid var(--line);
}
.mod-head h1{
  margin:0;font-family:var(--font-display);font-weight:400;
  font-size:clamp(38px,5.6vw,68px);line-height:0.99;letter-spacing:-0.015em;
}
.mod-head .lede{line-height:var(--lh-prose);font-family:var(--font-display);margin:16px 0 0;max-width:60ch;color:var(--tx-2);font-size:15.5px;}
.tally{display:flex;}
.tally div{
  padding:0 clamp(14px,1.6vw,22px);border-left:1px solid var(--line);text-align:right;
  font-family:var(--font-ui);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--tx-3);
}
.tally div:first-child{border-left:0;padding-left:0;}
.tally div:last-child{padding-right:0;}
.tally b{font-variation-settings:'opsz' var(--opsz-display);
  display:block;font-family:var(--font-display);font-weight:400;font-size:clamp(26px,3.2vw,38px);
  line-height:1;letter-spacing:0;margin-bottom:6px;
}
.tally .high b{color:var(--high);}
.tally .moderate b{color:var(--moderate);}
.tally .minor b{color:var(--minor);}



.shot-frame[hidden]{display:none;}
.shot-stack{display:grid;gap:clamp(16px,2vw,24px);}
/* Portrait phone captures render at phone width rather than stretched to the
   column, and the evidence column narrows to suit them. A 1170 x 2532 capture
   filling a 900px column reads as a blurred wall of interface rather than as a
   phone screen, and leaves the findings rail cramped for no gain. */
.mod-page--mobile .mod-body{grid-template-columns:minmax(0,0.62fr) minmax(340px,1fr);}
.mod-page--mobile .shot-media{max-width:392px;}
.mod-page--mobile .shot-stack{
  grid-template-columns:repeat(auto-fit,minmax(240px,392px));justify-content:start;
}

/* Solid severity fill rather than a dark disc with a coloured rim.
 *
 * The rim version was legible on a dark capture and nearly invisible on a light
 * one, which is most of them. A filled marker reads at a glance and carries the
 * severity at the same time.
 *
 * The numeral is dark, not white: white on these three is 1.8 to 2.3:1, while
 * the ink is 8.7 to 11.1:1. The dark ring is what separates the marker from a
 * pale screenshot, where the fill alone is only 1.8:1 against white. */
/* Placement only. Every visual property of a marker - size, fill, numeral,
   pulse - lives in assets/css/markers.css, which the editor loads too, so the
   two cannot drift. .pin-btn carries .marker in the markup. */

/* 28px is the right visual weight against a capture, but it is also the whole
   hit area, and this audit cites Apple's Human Interface Guidelines, which asks
   for 44pt. A client is entitled to hold the deliverable to the standards the
   deliverable applies to them. This extends the touch target without changing
   anything visible. */
.pin-btn::after{
  content:"";position:absolute;top:50%;left:50%;
  width:44px;height:44px;transform:translate(-50%,-50%);
}

.pin-btn:hover,.pin-btn:focus-visible{transform:translate(-50%,-50%) scale(1.18);}
.pin-btn.is-active{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--acc);}
.pin-btn[disabled]{cursor:default;opacity:0.5;}


.mod-nav{display:flex;justify-content:space-between;gap:16px;padding-top:clamp(22px,3vw,32px);}
.mod-nav a{
  display:flex;flex-direction:column;gap:6px;text-decoration:none;max-width:46%;
  font-family:var(--font-ui);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--tx-3);
}
.mod-nav a:last-child{text-align:right;align-items:flex-end;}
.mod-nav a b{
  font-family:var(--font-ui);font-size:15px;font-weight:500;letter-spacing:-0.005em;
  text-transform:none;color:var(--tx);line-height:1.35;
}
.mod-nav a:hover b{color:var(--acc-tx);}

.mod-error{padding:clamp(56px,9vw,110px) 0;max-width:56ch;}
.mod-error h1{
  margin:0 0 14px;font-family:var(--font-display);font-weight:400;
  font-size:clamp(32px,4.4vw,52px);line-height:1.02;
}
.mod-error p{line-height:var(--lh-prose);font-family:var(--font-display);margin:0 0 26px;color:var(--tx-2);}

/* --- 8. Dialogs ---------------------------------------------------------- */
.dialog-overlay{
  position:fixed;inset:0;z-index:220;display:none;
  align-items:stretch;justify-content:center;
  padding:clamp(10px,1.8vh,28px) clamp(10px,2vw,28px);
  background:var(--scrim-dialog);overscroll-behavior:contain;
}
.dialog-overlay.open{display:flex;}

.finding-tags{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;}

.fw-note{padding:22px 0;border-bottom:1px solid var(--line-soft);}
.fw-note:first-child{padding-top:0;}
.fw-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:0 0 4px;}
.fw-source{
  font-family:var(--font-ui);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--acc-tx);
}
.fw-wcag .fw-source{color:var(--fw-wcag);}
.fw-laws .fw-source{color:var(--fw-laws);}
.fw-heuristics .fw-source{color:var(--fw-heuristics);}
.fw-platform .fw-source{color:var(--fw-platform);}
.fw-concept{font-size:16px;font-weight:500;letter-spacing:-0.005em;color:var(--tx);}
/* Plain-language line, so a reader who has never met the framework still knows
   what is being claimed before they read the evidence. */
.fw-gloss{line-height:var(--lh-prose);font-family:var(--font-display);margin:0 0 12px;font-size:13.5px;color:var(--tx-3);}
.fw-text{line-height:var(--lh-prose);font-family:var(--font-display);margin:0;color:var(--tx-2);font-size:15px;}

.impact{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);}
.impact-label,.rec-label{
  margin:0 0 8px;font-family:var(--font-ui);font-size:10px;letter-spacing:0.13em;
  text-transform:uppercase;color:var(--tx-3);
}
.impact p{line-height:var(--lh-prose);font-family:var(--font-display);margin:0;color:var(--tx);font-size:15.5px;}
.finding-note{line-height:var(--lh-prose);font-family:var(--font-display);margin:18px 0 0;color:var(--tx-3);font-size:14px;}

.rec{margin-top:26px;display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));}
.rec-block{border-left:2px solid var(--acc);padding-left:18px;}
.rec-block ul{line-height:var(--lh-prose);font-family:var(--font-display);margin:0;padding-left:18px;color:var(--tx-2);font-size:15px;}
.rec-block li+li{margin-top:8px;}
.rec-block p.single{line-height:var(--lh-prose);font-family:var(--font-display);margin:0;color:var(--tx-2);font-size:15px;}

/* Executive summary */
/* Structure now comes from the shared .finding-dialog / .exec-dialog rules
   above. Only the type styles specific to this dialog live here. */
.exec-dialog{max-width:none;}
.exec-eyebrow{
  margin:0 0 12px;font-family:var(--font-ui);font-size:10px;letter-spacing:0.13em;
  text-transform:uppercase;color:var(--acc-tx);
}
.exec-head h2{
  margin:0;font-family:var(--font-display);font-weight:400;
  font-size:clamp(28px,3.6vw,44px);line-height:1.04;letter-spacing:-0.01em;
}
.exec-scope{
  margin:12px 0 0;font-family:var(--font-ui);font-size:10px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--tx-3);
}
.exec-grid{display:grid;gap:clamp(26px,3.4vw,52px);grid-template-columns:minmax(0,1.35fr) minmax(258px,1fr);}
.exec-block+.exec-block{margin-top:32px;}
.exec-block h3{
  margin:0 0 14px;font-family:var(--font-ui);font-size:10px;font-weight:400;
  letter-spacing:0.13em;text-transform:uppercase;color:var(--tx-3);
}
.exec-block p{line-height:var(--lh-prose);font-family:var(--font-display);margin:0 0 12px;color:var(--tx-2);font-size:15.5px;}
.exec-block ul{margin:0;padding:0;list-style:none;}
.exec-block li{line-height:var(--lh-prose);font-family:var(--font-display);padding:14px 0;border-top:1px solid var(--line-soft);color:var(--tx-2);font-size:15px;}
.exec-block li:first-child{border-top:0;padding-top:0;}
.exec-block li b{color:var(--tx);font-weight:500;}
.exec-head .auditor-card{display:flex;align-items:center;gap:22px;}
/* One person or several, listed in credit order. Wraps rather than shrinking a
   fixed row, so a third name does not squeeze the first two. */
.auditor-list{display:flex;flex-wrap:wrap;gap:22px clamp(26px,3.4vw,52px);margin-top:20px;}
.auditor-list.is-many .auditor-photo{width:76px;height:76px;}
.auditor-list.is-many .auditor-name{font-size:16.5px;}
.auditor-photo{width:112px;height:112px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.auditor-info{min-width:0;}
.auditor-name{margin:0;font-size:19px;font-weight:500;color:var(--tx);}
/* Matches the typographic voice of the "Prepared by" line it replaced: mono,
   tracked, uppercase, the same quiet grey. */
.auditor-title{
  margin:5px 0 0;font-family:var(--font-ui);font-size:10px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--tx-3);
}
.auditor-link{
  display:inline-block;margin-top:10px;font-family:var(--font-ui);font-size:11px;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--acc-tx);text-decoration:none;
}
.auditor-link:hover{text-decoration:underline;}

/* Methodology and framework: each reference is a real link out to its source,
   so the citation is checkable rather than asserted. */
.method-list{display:flex;flex-wrap:wrap;gap:10px;}
.method-link{
  display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
  padding:8px 13px;border-radius:var(--r-ctl);
  font-family:var(--font-ui);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--tx-2);text-decoration:none;transition:border-color var(--ease),background var(--ease);
}
.method-link:hover{border-color:var(--acc-line);background:var(--acc-soft);color:var(--tx);}
.method-link i{font-style:normal;color:var(--tx-3);}
.sev-table{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 16px;align-items:center;}
.sev-count{font-variation-settings:'opsz' var(--opsz-display);font-family:var(--font-display);font-weight:400;font-size:34px;line-height:1;text-align:right;}
.sev-count.high{color:var(--high);}
.sev-count.moderate{color:var(--moderate);}
.sev-count.minor{color:var(--minor);}
.sev-label{color:var(--tx-3);font-size:13.5px;line-height:1.45;}
.sev-label b{display:block;color:var(--tx);font-size:15px;font-weight:500;}
.focus-list{display:flex;flex-wrap:wrap;gap:8px;}
.focus-chip{
  border:1px solid var(--line);padding:6px 11px;
  font-family:var(--font-ui);font-size:10px;letter-spacing:0.11em;text-transform:uppercase;color:var(--tx-2);
}

/* --- 9. Breakpoints ------------------------------------------------------ */
@media (max-width:1120px){
  .exec-grid{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:860px){
  .mod-head{grid-template-columns:minmax(0,1fr);align-items:start;gap:26px;}
  .tally{justify-content:flex-start;flex-wrap:wrap;gap:14px 0;}
  .sheet-grid{grid-template-columns:1fr;}
  .sheet-item:nth-child(n+3){display:none;}
  .ledger{grid-template-columns:repeat(2,1fr);}
  .ledger div{border-bottom:1px solid var(--line-soft);}
  .ledger div:nth-child(2n){border-right:0;}
  /* Five stats in a two-up grid leaves one cell orphaned on its own row. It
     spans both columns instead of sitting half-width with an empty cell
     beside it, and drops the divider since nothing follows it. */
  .ledger div:last-child{grid-column:1 / -1;border-right:0;border-bottom:0;}
}
@media (max-width:640px){
  body{font-size:15.5px;}
  .brand-label i{display:none;}
  .modules-btn .label{display:none;}
  .modules-btn{padding:0 12px;}
  /* Stacked buttons that each hug their own label read as mismatched once
     they are full-width rows rather than a side-by-side pair. Matching
     widths reads as one deliberate pair of actions instead of two
     differently-sized accidents. */
  .mast-cta{flex-direction:column;align-items:stretch;}
  .mast-cta .btn{width:100%;justify-content:center;}
  .mod-bar{flex-direction:column;align-items:flex-start;gap:8px;}
  .mod-page--mobile .shot-media{max-width:100%;}
  .rec{grid-template-columns:minmax(0,1fr);gap:18px;}
  .mod-nav{flex-direction:column;gap:20px;}
  .mod-nav a,.mod-nav a:last-child{max-width:100%;align-items:flex-start;text-align:left;}
  .panel-bar{flex-direction:column;align-items:flex-start;gap:6px;}
}
@media (max-width:360px){
  .ledger{grid-template-columns:1fr;}
  .ledger div{border-right:0;border-bottom:1px solid var(--line-soft);padding-bottom:18px;}
  .ledger div:last-child{border-bottom:0;}
}

/* --- 12. Conversion diagnosis -------------------------------------------
   The one part of the site that is an argument rather than a catalogue, so it
   is the one part allowed a reading measure rather than a grid. Everything
   else here follows the same rules as the rest of the document: flat ground,
   hairline rules, square corners, tracked uppercase for metadata.

   The step rail is the only ornament. It exists because the argument is
   sequential and the reader needs to feel their position in it, which is the
   one thing a list of sections cannot convey on its own. */

.cvWrap{padding-bottom:clamp(64px,10vh,120px);}

.cvHead{padding:clamp(48px,9vh,104px) 0 clamp(32px,5vh,56px);border-bottom:1px solid var(--line);}
.cvKicker{
  margin:0 0 18px;font-family:var(--font-ui);font-size:11px;letter-spacing:0.13em;
  text-transform:uppercase;color:var(--acc-tx);
}
.cvTitle{
  margin:0 0 24px;font-family:var(--font-display);font-weight:400;
  font-size:clamp(38px,6.4vw,76px);line-height:1.02;letter-spacing:-0.015em;
}
.cvStand{line-height:var(--lh-prose);font-family:var(--font-display);margin:0;max-width:62ch;color:var(--tx-2);font-size:clamp(16px,1.5vw,18px);}

.cvThesis{padding:clamp(56px,8vh,104px) 0;border-bottom:1px solid var(--line);}
.cvThesis-text{
  margin:22px 0 0;max-width:58ch;
  font-family:var(--font-display);font-size:clamp(20px,2.4vw,28px);line-height:1.44;
}

.cvLabel{
  margin:0 0 6px;font-family:var(--font-ui);font-size:10px;letter-spacing:0.13em;
  text-transform:uppercase;color:var(--tx-3);font-weight:500;
}

.cvSecTitle{
  margin:0 0 16px;font-family:var(--font-display);font-weight:400;
  font-size:clamp(28px,3.6vw,42px);line-height:1.1;
}
.cvSecNote{margin:0 0 clamp(40px,6vh,72px);max-width:58ch;color:var(--tx-2);line-height:1.7;}
.cvSteps,.cvPriorities{padding:clamp(64px,9vh,116px) 0;}
.cvPriorities{border-top:1px solid var(--line);}

/* Each step is a two column figure: a numbered rail, then the argument. The
   rail collapses at the breakpoint rather than wrapping, because a number
   above a paragraph reads as a heading and stops reading as a sequence. */
.cvStep{display:grid;grid-template-columns:56px minmax(0,1fr);gap:0 32px;}
.cvStep + .cvStep{margin-top:clamp(28px,4vh,48px);}
.cvStep-rail{display:flex;flex-direction:column;align-items:center;}
.cvStep-n{
  width:40px;height:40px;flex-shrink:0;display:grid;place-items:center;
  border:1px solid var(--acc-line);color:var(--acc-tx);
  font-family:var(--font-ui);font-size:13px;font-weight:600;
  font-variant-numeric:tabular-nums;
}
.cvStep-line{flex:1;width:1px;background:var(--line);margin:10px 0 0;}
.cvStep-body{padding-bottom:clamp(36px,5vh,56px);min-width:0;}

.cvStep-surface{
  margin:0 0 4px;font-family:var(--font-ui);font-size:10px;letter-spacing:0.13em;
  text-transform:uppercase;color:var(--tx-3);
}
.cvStep-title{
  margin:0 0 20px;font-family:var(--font-display);font-weight:400;
  font-size:clamp(24px,3vw,34px);line-height:1.12;
}

/* Asks / gives, side by side, because the imbalance between the two is the
   whole point of the section and it only lands when they are adjacent. */
.cvStep-trade{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px;
  padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line-soft);
}
.cvTrade-text{line-height:var(--lh-prose);font-family:var(--font-display);margin:0;font-size:15px;}
.cvStep-trade > div:last-child .cvTrade-text{color:var(--acc-tx);}

/* Measurements. A description list rather than a table: there are only two
   columns and a table would import a border model this document does not use. */
.eviList{
  margin:0;padding:16px 0;display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:0;border-bottom:1px solid var(--line-soft);
}
.eviList dt{
  padding:7px 16px 7px 0;color:var(--tx-2);font-size:13.5px;
  border-top:1px solid var(--line-soft);
}
.eviList dd{
  margin:0;padding:7px 0;text-align:right;font-size:13.5px;font-weight:500;
  font-variant-numeric:tabular-nums;border-top:1px solid var(--line-soft);
}
.eviList dt:first-of-type,.eviList dd:first-of-type{border-top:0;}

.cvLeak,.cvBench{padding:18px 0;border-bottom:1px solid var(--line-soft);}
.cvLeak p:last-child,.cvBench p:last-child{margin:0;max-width:68ch;}
.cvLeak p:last-child{color:var(--tx);}
.cvBench p:last-child{color:var(--tx-2);}

.cvFindings{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0 0;}
.cvFindings .cvLabel{margin:0 4px 0 0;}
.fcode{
  font-family:var(--font-ui);font-size:10.5px;letter-spacing:0.08em;
  font-variant-numeric:tabular-nums;
  padding:3px 8px;border:1px solid var(--line);color:var(--tx-2);white-space:nowrap;
}

/* Priorities. Ordered, and the order is the argument, so the rank is set at
   display size rather than as a list marker. */
.cvPriList{list-style:none;margin:0;padding:0;}
.cvPri{
  display:grid;grid-template-columns:56px minmax(0,1fr);gap:0 32px;min-width:0;
  padding:32px 0;border-top:1px solid var(--line);
}
.cvPri:last-child{border-bottom:1px solid var(--line);}
.cvPri-rank{font-variation-settings:'opsz' var(--opsz-display);
  font-family:var(--font-display);font-size:34px;line-height:1;color:var(--tx-3);
  font-variant-numeric:tabular-nums;
}
.cvPri-title{font-family:var(--font-display);margin:0 0 8px;font-size:19px;font-weight:600;line-height:1.3;}
.cvPri-why{line-height:var(--lh-prose);font-family:var(--font-display);margin:0;max-width:62ch;color:var(--tx-2);font-size:15px;}

/* Journey stages, roadmap and validation.
   These three sections were adopted from a second audit of the same site,
   which framed its findings as a customer journey and closed with a phased
   plan. The framing earns its place; the presentation does not follow it.
   That deliverable summarised each stage with a star rating, which is a
   judgement the reader has to take on trust. Here a stage is summarised by
   the number of findings recorded in it, which is a number the reader can go
   and check against the module pages. Same structure, our evidence rule. */

.cvJourney,.cvRoadmap,.cvValidation{padding:clamp(64px,9vh,116px) 0;border-top:1px solid var(--line);}

.cvStageList{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  border-top:1px solid var(--line);border-left:1px solid var(--line);
}
.cvStage{
  min-width:0;padding:30px 26px 32px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
}
.cvStage-n{
  margin:0 0 10px;font-family:var(--font-ui);font-size:10.5px;letter-spacing:0.13em;
  text-transform:uppercase;color:var(--tx-3);font-variant-numeric:tabular-nums;
}
.cvStage-name{margin:0 0 10px;font-family:var(--font-display);font-size:24px;font-weight:400;line-height:1.1;}
.cvStage-q{margin:0 0 16px;color:var(--tx-2);font-size:14px;line-height:1.55;}

/* Three figures on one row. Tabular numerals keep the columns aligned across
   four cards that hold different digit counts. */
.cvStage-count{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0 0 16px;
  padding:12px 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
}
.cvStage-count dt{
  font-family:var(--font-ui);font-size:9.5px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--tx-3);grid-row:1;
}
.cvStage-count dd{
  margin:4px 0 0;grid-row:2;font-family:var(--font-display);font-size:22px;line-height:1;
  font-variant-numeric:tabular-nums;
}
.cvStage-count dd.is-high{color:var(--high);}
.cvStage-verdict{margin:0 0 12px;color:var(--tx-2);font-size:14px;line-height:1.6;}

.cvCross{
  margin:20px 0 0;padding:16px 18px;border:1px solid var(--line);background:var(--ink-3);
  color:var(--tx-2);font-size:14px;line-height:1.6;
}
.cvCross .cvLabel{display:block;margin-bottom:6px;}

/* The roadmap is three columns because the phases are parallel tracks a reader
   compares, not a sequence they walk. That is the opposite of the step rail
   above, and deliberately so. */
.cvPhaseGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0;
  border-top:1px solid var(--line);border-left:1px solid var(--line);}
.cvPhase{min-width:0;padding:30px 26px 34px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);}
.cvPhase-head{margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line-soft);}
.cvPhase-n{
  margin:0 0 8px;font-family:var(--font-ui);font-size:10px;letter-spacing:0.13em;
  text-transform:uppercase;color:var(--acc-tx);
}
.cvPhase-name{margin:0 0 6px;font-family:var(--font-display);font-size:22px;font-weight:400;line-height:1.1;}
.cvPhase-horizon{margin:0;font-size:13px;color:var(--tx-3);}
.cvPhase-list{list-style:none;margin:0;padding:0;}
.cvTask + .cvTask{margin-top:24px;padding-top:24px;border-top:1px solid var(--line-soft);}
.cvTask-title{margin:0 0 6px;font-size:15px;font-weight:600;line-height:1.35;}
.cvTask-note{margin:0 0 8px;color:var(--tx-2);font-size:13.5px;line-height:1.55;}

.cvVal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0;
  border-top:1px solid var(--line);border-left:1px solid var(--line);}
.cvVal-col{min-width:0;padding:30px 26px 34px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);}
.cvVal-title{margin:0 0 14px;font-family:var(--font-display);font-size:20px;font-weight:400;line-height:1.15;}
.cvVal-list{margin:0;padding:0 0 0 18px;color:var(--tx-2);}
.cvVal-list li{margin:0 0 10px;font-size:14px;line-height:1.6;}
.cvVal-list li:last-child{margin-bottom:0;}

.cvErr{padding:80px 0;color:var(--tx-2);}

/* The landing page entry point. Sits with the two existing buttons but reads
   as a third, different kind of destination, so it takes the accent hairline
   rather than a third button weight. */
.mast-cta .btn.diagnosis{border-color:var(--acc-line);color:var(--acc-tx);}
.mast-cta .btn.diagnosis:hover{background:var(--acc-soft);border-color:var(--acc-tx);}

@media (max-width:860px){
  .cvStep,.cvPri{grid-template-columns:40px minmax(0,1fr);gap:0 16px;}
  .cvStep-n{width:32px;height:32px;font-size:12px;}
  .cvPri-rank{font-size:26px;}
  .cvStep-trade{grid-template-columns:minmax(0,1fr);gap:16px;}
  .eviList{grid-template-columns:minmax(0,1fr) auto;}
  .cvStageList,.cvPhaseGrid,.cvVal-grid{grid-template-columns:minmax(0,1fr);}
  .cvStage-name{font-size:21px;}
  .cvStage-count dd{font-size:20px;}
}

/* --- 13. Landing: journey strip and scope ---------------------------------
   Both bands were added after reviewing a second audit of the same site, whose
   first screen argued its case before offering navigation while ours offered
   navigation and hid the case behind a dialog. The structure is worth taking.
   The presentation is not: that deliverable is a light cream page with square
   controls, and this one stays flat, near black and rounded on anything
   clickable, because those are Boutique's own values sampled from their site.

   The stage bar is the only new ornament. It exists because four numbers in a
   row read as a table, and the point of the band is that one stage is far
   worse than the others, which a table makes the reader work out. */

.jWrap{padding:clamp(56px,8vh,104px) 0;border-top:1px solid var(--line);}
.jTitle{margin:0 0 32px;font-family:var(--font-display);font-weight:400;font-size:clamp(21px,2.6vw,28px);line-height:1.15;}

.jGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-btn);overflow:hidden;}
.jStage{
  display:flex;flex-direction:column;min-width:0;gap:11px;padding:26px 24px 28px;
  background:var(--ink);color:var(--tx);text-decoration:none;
  transition:background var(--ease);
}
.jStage:hover,.jStage:focus-visible{background:var(--ink-3);}
.jStage-n{
  font-family:var(--font-ui);font-size:10px;letter-spacing:0.13em;color:var(--tx-3);
  font-variant-numeric:tabular-nums;
}
.jStage-name{font-family:var(--font-display);font-size:20px;line-height:1;}
.jStage-count{font-family:var(--font-ui);font-size:12.5px;color:var(--tx-2);font-variant-numeric:tabular-nums;}
.jStage-count b{color:var(--tx);font-weight:600;}

.scope-wrap{padding:0 0 clamp(36px,5vh,60px);}
.scope{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0;margin:0;
  border-top:1px solid var(--line);}
.scope > div{padding:18px 20px 0 0;}
.scope dt{
  font-family:var(--font-ui);font-size:10px;letter-spacing:0.13em;text-transform:uppercase;
  color:var(--tx-3);margin-bottom:6px;
}
.scope dd{margin:0;font-size:13.5px;line-height:1.6;color:var(--tx-2);max-width:38ch;}

@media (max-width:860px){
  .jGrid{grid-template-columns:minmax(0,1fr);}
  .scope{grid-template-columns:minmax(0,1fr);}
}

/* --- 14. Section nav, summary and benchmark -------------------------------
   All three arrived with the same change: the diagnosis stopped being its own
   page and became the body of the landing page. That is her structure, argue
   first and offer navigation second, and it needs three things ours did not
   have: a way to move around a long page, the method visible rather than
   behind a dialog, and a benchmark that cites something.

   The strip sits under the top bar rather than inside it. Inside, it competed
   with the brand and the findings count at every width below about 1100px and
   lost, which is how a section nav becomes a hamburger nobody opens. */

.secnav{
  position:sticky;top:var(--nav-h);z-index:90;
  background:var(--scrim-bar);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
@supports not (backdrop-filter:blur(1px)){.secnav{background:var(--ink-2);}}
.secnav-list{
  display:flex;gap:2px;list-style:none;margin:0;padding:0;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.secnav-list::-webkit-scrollbar{display:none;}
.secnav-link{
  display:block;padding:11px 12px;white-space:nowrap;text-decoration:none;
  font-family:var(--font-ui);font-size:10.5px;letter-spacing:0.13em;text-transform:uppercase;
  color:var(--tx-3);border-bottom:2px solid transparent;transition:color var(--ease),border-color var(--ease);
}
.secnav-link:hover{color:var(--tx);}
.secnav-link[aria-current]{color:var(--tx);border-bottom-color:var(--acc-tx);}

/* Anchor targets have to clear both bars, or the heading you jumped to sits
   underneath them. */
[id="diagnosis"],[id="journey"],[id="path"],[id="priorities"],
[id="roadmap"],[id="validation"],[id="benchmark"],[id="method"]{
  scroll-margin-top:calc(var(--nav-h) + 52px);
}

/* Embedded diagnosis. On its own page the argument opened with a masthead; as
   part of the landing page it opens directly, so the first section loses the
   top rule that used to separate it from that masthead. */
.cvWrap.is-embedded{padding-bottom:0;}
.cvWrap.is-embedded .cvThesis{border-top:1px solid var(--line);padding-top:clamp(56px,8vh,104px);}

.sumWrap{padding:clamp(40px,6vh,72px) 0;border-top:1px solid var(--line);}
.sumHead{display:flex;align-items:flex-start;justify-content:space-between;gap:28px;flex-wrap:wrap;margin-bottom:clamp(22px,3vh,34px);}

/* Benchmark. A table, because five sites against five measures is a table, and
   writing it as prose would be the same evasion this audit criticises. It
   scrolls sideways on narrow screens rather than reflowing into cards: a card
   per site breaks the column comparison, which is the only reason to read it. */
.cvBench-sec{padding:clamp(64px,9vh,116px) 0;border-top:1px solid var(--line);}
.bmScroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-btn);}
.bmTable{border-collapse:collapse;width:100%;min-width:860px;font-size:13.5px;}
.bmTable th,.bmTable td{
  text-align:left;vertical-align:top;padding:18px 22px;
  border-bottom:1px solid var(--line-soft);border-right:1px solid var(--line-soft);
}
.bmTable tr > *:last-child{border-right:0;}
.bmTable tbody tr:last-child > *{border-bottom:0;}
.bmTable thead th{
  font-family:var(--font-ui);font-size:9.5px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--tx-3);font-weight:500;background:var(--ink-2);white-space:nowrap;
}
.bmTable tbody th{background:var(--ink-3);white-space:nowrap;}
.bmTable td{color:var(--tx-2);line-height:1.5;min-width:170px;}
/* Our own row is the one the reader is measuring everything against, so it is
   marked rather than left to be found. */
.bmTable tr.is-self th,.bmTable tr.is-self td{background:var(--acc-soft);color:var(--tx);}
.bmSite{display:block;font-weight:600;}
.bmUrl{display:block;margin-top:3px;font-family:var(--font-ui);font-size:10px;letter-spacing:0.06em;color:var(--tx-3);}

.bmNotes{margin-top:32px;display:grid;gap:18px;}
.bmNote{margin:0;font-size:13.5px;line-height:1.6;color:var(--tx-2);}
.bmNote .cvLabel{display:block;margin-bottom:3px;}
.bmReadings{margin:clamp(26px,4vh,40px) 0 0;padding:0;list-style:none;counter-reset:bmr;}
.bmReadings li{counter-increment:bmr;padding:26px 0;border-top:1px solid var(--line);}
.bmReading-title{margin:0 0 7px;font-family:var(--font-display);font-size:17px;font-weight:600;line-height:1.3;}
.bmReading-title::before{
  content:counter(bmr,decimal-leading-zero) "  ";
  font-family:var(--font-ui);font-size:11px;letter-spacing:0.12em;color:var(--tx-3);
}
.bmReading-text{margin:0;max-width:64ch;color:var(--tx-2);font-size:14.5px;line-height:1.7;}
.bmNotMeasured{
  margin:32px 0 0;padding:22px 24px;border:1px solid var(--line);background:var(--ink-3);
  color:var(--tx-2);font-size:13.5px;line-height:1.6;border-radius:var(--r-btn);
}
.bmNotMeasured .cvLabel{display:block;margin-bottom:5px;}

@media (max-width:860px){
  .sumHead{flex-direction:column;gap:16px;}
}


/* Monogram stand-in for an auditor with no photograph yet. Same footprint as
   the image so the two cards stay on one baseline. */
.auditor-photo.is-monogram{
  display:flex;align-items:center;justify-content:center;
  background:var(--ink-3);border:1px solid var(--line);color:var(--tx-2);
  font-family:var(--font-ui);font-size:26px;letter-spacing:0.06em;font-weight:500;
}

/* Finding references.
   These were chips reading PRM-01: an index the auditor could read and nobody
   else. They now carry the finding's own title and link to it, so the list
   stacks rather than sitting in a row, and the code is gone from the page
   entirely. .fcode without .is-linked is the pre-upgrade and failure state. */
/* Finding references.
   Compact by design. These briefly carried each finding's full title, which
   read well in isolation and badly in place: four citations under every step
   became a paragraph competing with the argument they were supporting. The
   code is the visible label and the click target; the area and the title are
   in the accessible name and the tooltip, and one click opens the finding. */
.cvFindings{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.cvFindings .cvLabel{margin:0 6px 0 0;}
.fcode{
  display:inline-block;
  font-family:var(--font-ui);font-size:10.5px;letter-spacing:0.08em;
  font-variant-numeric:tabular-nums;
  padding:3px 8px;border:1px solid var(--line);color:var(--tx-2);white-space:nowrap;
  border-radius:var(--r-ctl);
}
a.fcode.is-linked{
  text-decoration:none;cursor:pointer;
  transition:border-color var(--ease),color var(--ease),background var(--ease);
}
a.fcode.is-linked:hover,a.fcode.is-linked:focus-visible{
  color:var(--tx);background:var(--fill-soft);
}
a.fcode.is-linked.sev-high:hover{border-color:var(--high);}
a.fcode.is-linked.sev-moderate:hover{border-color:var(--moderate);}
a.fcode.is-linked.sev-minor:hover{border-color:var(--minor);}