/* =========================================================================
   Chase Group Consulting · Brand Guide v2.0, aubergine
   Every color resolves through the tokens in §1. No literal hexes below.
   ========================================================================= */

:root{
  color-scheme: light;

  /* Core */
  --ground:  #ECE6E3;
  --surface: #F6F0EE;
  --ink:     #221D20;
  --accent:  #5B3A57;
  --deep:    #3A2537;
  --mark:    #9A5750;

  /* Ink at opacity */
  --ink-60: rgba(34,29,32,.74);
  --line:   rgba(34,29,32,.13);
  --line-2: rgba(34,29,32,.16);
  --line-3: rgba(34,29,32,.21);
  --line-4: rgba(34,29,32,.29);

  /* Type on deep bands */
  --on-deep-85: rgba(246,240,238,.89);
  --on-deep-60: rgba(246,240,238,.72);
  --on-deep-40: rgba(246,240,238,.45);
  --on-deep-10: rgba(246,240,238,.1);

  /* Tints */
  --accent-08: rgba(91,58,87,.08);
  --accent-16: rgba(91,58,87,.16);
  --mark-45:   rgba(154,87,80,.45);
  --mark-06:   rgba(154,87,80,.06);  /* warm section wash */
  --accent-05: rgba(91,58,87,.05);   /* cool section wash */
  --mark-30:   rgba(154,87,80,.3);

  /* Type */
  --font-display: Literata, Georgia, serif;
  --font-body:    Newsreader, Georgia, serif;
  --font-label:   Archivo, sans-serif;

  /* Space */
  --container: 760px;   /* the measure, so running copy fills its column */
  --page-pad: clamp(20px,4vw,40px);
  --section-gap: 84px;
  --section-gap-lg: 92px;
  --band-pad: 80px;

  --ease: cubic-bezier(.22,1,.36,1);
  --tipx: 50%;          /* popover arrow offset, set at runtime */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:18px;font-weight:400;line-height:1.70;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:var(--accent-16);color:var(--ink)}
a{color:inherit}
:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
h1,h2,h3,h4{
  margin:0;font-family:var(--font-display);font-weight:500;
  /* pin optical size low so large headings keep the sturdy text cut
     instead of the spindly display cut */
  font-optical-sizing:none;
  font-variation-settings:"opsz" 26;
  text-wrap:balance;
}
p{margin:0;text-wrap:pretty}
img{display:block;max-width:100%}
em{font-style:italic}
b,strong{font-weight:600}

/* ---------- type roles, §2.1 ---------- */
h1{font-weight:500;font-size:clamp(34px,5vw,56px);line-height:1.04;letter-spacing:-.025em;max-width:30ch}
h1.hero{font-size:clamp(36px,5.6vw,62px);line-height:1.03}
h2{font-weight:500;font-size:clamp(25px,3vw,33px);line-height:1.20;letter-spacing:-.02em;max-width:40ch}
h3{font-size:clamp(21px,2vw,24px);font-weight:600;line-height:1.24;letter-spacing:-.015em}
.lede{
  font-family:var(--font-body);font-weight:400;font-size:clamp(18px,2vw,21px);
  line-height:1.60;max-width:60ch;text-wrap:pretty;
}
.body{max-width:66ch}
.body p + p{margin-top:1.05em}
.eyebrow{
  font-family:var(--font-label);font-size:10px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-60);
}
.slabel{
  font-family:var(--font-label);font-size:9px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-60);
}
.meta{font-family:var(--font-label);font-size:13px;font-weight:400;line-height:1.7;letter-spacing:.06em;color:var(--ink-60)}

/* ---------- layout ---------- */
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--page-pad)}
.stack{display:flex;flex-direction:column}
.sec{margin-top:var(--section-gap)}
/* NB: .sec is the section class. Never use it as a modifier on a component;
   `class="btn sec"` inherited this 84px margin and broke button alignment. */
.sec > .eyebrow{display:block;margin-bottom:14px}
.sec > h2{margin-bottom:28px}
.autofit{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:40px 56px;
}
.autofit.tight{gap:24px}

/* ---------- header, §4.1 ---------- */
.topbar{
  position:sticky;top:0;z-index:80;
  background:color-mix(in srgb,var(--surface) 93%,transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar-in{
  max-width:var(--container);margin:0 auto;padding:14px var(--page-pad);
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.lockup{display:flex;align-items:center;gap:11px;text-decoration:none}
.lockup .wm{display:flex;flex-direction:column;line-height:1}
.lockup .wm .n{font-family:var(--font-display);font-weight:400;font-size:19px;letter-spacing:-.01em;color:var(--ink)}
.lockup .wm .c{font-family:var(--font-label);font-weight:500;font-size:8px;letter-spacing:.30em;text-transform:uppercase;color:var(--ink-60);margin-top:4px}
.navgroup{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.nav{display:flex;gap:26px;flex-wrap:wrap}
.nav a{
  font-family:var(--font-label);font-size:11px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;text-decoration:none;color:var(--ink-60);
  padding-bottom:3px;border-bottom:1px solid transparent;
  transition:color 150ms var(--ease),border-color 150ms var(--ease);
}
.nav a:hover{color:var(--ink);border-bottom-color:var(--accent)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}

/* The menu button. Hidden above 700px, where the nav is a row. min-width keeps
   the bar from shifting when the label swaps between Menu and Close. */
.menu-toggle{
  display:none;
  font-family:var(--font-label);font-size:11px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-60);
  background:none;border:0;padding:10px 0;min-width:52px;text-align:right;
  cursor:pointer;
}
.menu-toggle:hover{color:var(--ink)}

/* ---------- buttons, §4.2 ---------- */
.btn{
  /* Deliberately not flex or grid. A fixed box with the label centered by
     line-height cannot be resized or shifted by any parent layout, and
     vertical-align:top removes the baseline offset between inline siblings.
     Both buttons are therefore always the same size and always level. */
  display:inline-block;box-sizing:border-box;vertical-align:top;
  width:260px;height:48px;line-height:46px;padding:0;
  text-align:center;white-space:nowrap;overflow:hidden;
  font-family:var(--font-label);font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;
  border-radius:999px;
  background:var(--accent);color:var(--surface);border:1px solid var(--accent);
  transition:background 150ms var(--ease),border-color 150ms var(--ease);cursor:pointer;
}

.btn:hover{background:var(--deep);border-color:var(--deep)}
.btn.ghost{background:transparent;color:var(--accent);border-color:var(--accent)}
.btn.ghost:hover{background:var(--accent-08);color:var(--accent);border-color:var(--accent)}
.btn.sm{width:auto;height:38px;line-height:36px;padding:0 20px;font-size:10px}
.actions{
  /* Stacked, not side by side. Equal-width buttons in a single column are
     always level and always the same size, with no horizontal layout to
     resolve. Wendy's call after side-by-side kept staggering. */
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
}
.actions > .btn{align-self:flex-start;flex:0 0 auto}

/* ---------- opener + hairline meta strip, §8 ---------- */
.opener{padding:clamp(48px,8vw,84px) 0 0}
.opener .eyebrow{display:block;margin-bottom:18px}
.opener h1{margin-bottom:22px}
.metastrip{
  margin-top:44px;
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  display:grid;grid-template-columns:1fr;
}
.metastrip > div{padding:18px 0}
.metastrip > div + div{border-top:1px solid var(--line-2)}
@media (min-width:800px){
  .metastrip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .metastrip > div{padding:18px 24px 18px 0}
  .metastrip > div + div{border-top:none;border-left:1px solid var(--line-2);padding-left:24px}
}
.metastrip .slabel{display:block;margin-bottom:6px}
.metastrip .v{font-family:var(--font-body);font-weight:400;font-size:16px;line-height:1.55}

/* ---------- divider list, §3.3 ---------- */
.dlist{display:flex;flex-direction:column}
.dlist > .row{border-top:1px solid var(--line-2);padding:22px 0}
.dlist > .row:last-child{border-bottom:1px solid var(--line-2)}
.row-split{
  display:grid;gap:14px 40px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  align-items:start;
}
.row-lead{display:flex;flex-direction:column;gap:8px}
.row p{max-width:66ch}
.quoterow{text-wrap:pretty;font-family:var(--font-body);font-weight:400;font-style:italic;font-size:clamp(18px,2vw,21px);line-height:1.5;max-width:52ch}

/* parallel phases bracket */
.parallel{border-left:1px solid var(--accent);padding-left:22px;margin:0}
.parallel > .plab{
  font-family:var(--font-label);font-size:9px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);padding-top:22px;
}
.parallel > .row:first-of-type{border-top:none;padding-top:10px}
.parallel > .row:last-child{border-bottom:none}

/* ---------- card, §4.3 ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:0;
  padding:30px;display:flex;flex-direction:column;gap:12px;
}
.card .slabel{color:var(--ink-60)}
.card h3{margin:0}
.card p{font-size:16.5px;line-height:1.62}

/* ---------- feature band, §4.6 ---------- */
.band{
  background:var(--deep);
  padding:var(--band-pad) 0;
  margin-top:var(--section-gap-lg);
}
.band-in{max-width:var(--container);margin:0 auto;padding:0 var(--page-pad)}
.band .stmt{
  font-family:var(--font-display);font-weight:500;color:var(--surface);
  font-optical-sizing:none;font-variation-settings:"opsz" 26;
  font-size:clamp(28px,3.8vw,42px);line-height:1.16;letter-spacing:-.025em;max-width:24ch;
  text-wrap:pretty;
}
.band .attr{
  font-family:var(--font-label);font-size:10px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--on-deep-60);margin-top:26px;
}

/* ---------- figures + diagrams, §6 ---------- */
figure{margin:0}
.fig{background:var(--surface);border:1px solid var(--line);padding:clamp(20px,3vw,34px)}
.fig .slabel{display:block;margin-bottom:22px}
.figscroll{overflow-x:auto}
.figscroll svg{display:block;width:100%;height:auto}
.svg-chain{min-width:660px}
.svg-layers{min-width:680px}
figcaption{
  font-family:var(--font-body);font-weight:400;font-size:16px;line-height:1.6;
  color:var(--ink-60);margin-top:24px;max-width:62ch;
}
figcaption b{color:var(--ink);font-weight:500}

.rings{display:grid;gap:40px 56px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));align-items:center}
.rings svg{width:100%;max-width:300px;height:auto}

/* ---------- image frame, §4.7 ---------- */
.frame{
  background:var(--surface);border:1px solid var(--line);border-radius:0;
  position:relative;overflow:hidden;
}
.frame.r167{aspect-ratio:16/7}
.frame.r166{aspect-ratio:16/6}
.frame.r45{aspect-ratio:4/5}
.frame.r32{aspect-ratio:3/2}
.frame img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(1.03)}
.frame .ph{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;text-align:center;padding:24px;
}
.frame .ph .t{font-family:var(--font-label);font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-60);max-width:34ch;line-height:1.9}
.frame .ph .r{font-family:var(--font-label);font-size:9px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-60);opacity:.7}

/* ---------- pending, §8.1 ---------- */
.pending{
  border:1px solid var(--mark-45);border-radius:0;
  padding:26px;display:flex;flex-direction:column;gap:14px;
}
.pending .flag{
  font-family:var(--font-label);font-size:9px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mark);
}
.pending .draft{font-style:italic;font-size:17px;line-height:1.6}
.pending .req{
  border-top:1px solid var(--mark-30);padding-top:14px;
  font-family:var(--font-label);font-size:12px;line-height:1.7;letter-spacing:.03em;color:var(--ink-60);
}
.pending .req b{color:var(--ink);font-weight:600}
:root[data-pending="off"] .pending{display:none}

/* ---------- form, §4.5 ---------- */
form.f{display:flex;flex-direction:column;gap:16px;max-width:34rem}
form.f .field{display:flex;flex-direction:column;gap:7px}
form.f label{font-family:var(--font-label);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-60)}
form.f input,form.f textarea{
  background:var(--ground);border:1px solid var(--line-3);border-radius:3px;
  padding:12px 14px;font-family:var(--font-body);font-weight:400;font-size:16px;color:var(--ink);
  transition:border-color 150ms var(--ease);
}
form.f input::placeholder,form.f textarea::placeholder{color:var(--ink-60)}
form.f input:focus-visible,form.f textarea:focus-visible{border-color:var(--accent);outline:none}
form.f textarea{resize:vertical;min-height:110px;line-height:1.6}
.sent{font-family:var(--font-label);font-size:12px;letter-spacing:.06em;color:var(--accent)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);margin-top:var(--section-gap);padding:56px 0 40px}
.foot{display:grid;gap:40px 56px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.foot h4{font-family:var(--font-label);font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-60);margin-bottom:16px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.foot ul a{font-family:var(--font-label);font-size:12px;letter-spacing:.06em;color:var(--ink-60);text-decoration:none;transition:color 150ms var(--ease)}
.foot ul a:hover{color:var(--ink)}
.footbar{
  margin-top:48px;padding-top:22px;border-top:1px solid var(--line-2);
  display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center;
}
.footbar p{font-family:var(--font-label);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-60)}

.endmark{display:flex;justify-content:center;padding-top:40px;color:var(--mark)}
.endmark svg{width:16px;height:13px}

/* ---------- copy fills its column; figures break out wider ----------
   At 1160px the content area was 1080px while running copy capped at 66ch
   (about 607px), leaving 473px of empty page beside every paragraph. The
   container is now the measure. Photographs run edge to edge and diagrams
   step out past the text, so the page still reads wide.                    */
body{ font-size:20px; line-height:1.65; overflow-x:clip }

h1,h2,h3{ max-width:none }
.lede{ max-width:none; font-size:clamp(20px,2vw,23px) }
.body,.row p,.story,.row-lead h3,figcaption,.metastrip .v{ max-width:none }
.band .stmt{ max-width:30ch }

/* header and footer keep the wide frame */
.topbar-in{ max-width:1100px }
footer .wrap{ max-width:1100px }

/* copy runs across, never in side-by-side columns */
.row-split{ grid-template-columns:1fr; gap:10px }
.row-lead{ gap:4px }
.gaps{ grid-template-columns:1fr }
.wendy{ grid-template-columns:1fr; gap:32px }
.wendy > .frame{ max-width:400px; width:100% }

/* photographs run edge to edge */
@media (min-width:900px){
  .sec > .frame{
    width:100vw; max-width:100vw;
    margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
    border-left:none; border-right:none;
  }
}
/* diagrams need more room than running copy, so they step out a little */
@media (min-width:1060px){
  .sec > .fig, .sec > figure.fig{ margin-left:-120px; margin-right:-120px }
}

/* ---------- the three gaps: a comparison, not a list ----------
   Two columns here are informational, not decorative. They encode the shift
   from the failure to the good state, so the reader compares rather than
   reads. Color is structural: --mark rules the broken state, --accent the
   working one. This is the one place columns are correct.               */
.gapcard{border-top:1px solid var(--line-2);padding:28px 0}
.gapcard:last-of-type{border-bottom:1px solid var(--line-2)}
.gaphead{display:flex;align-items:center;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.gapnum{
  width:30px;height:30px;flex:0 0 auto;border:1px solid var(--mark);border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--font-label);font-size:10px;font-weight:600;letter-spacing:.06em;
  color:var(--mark);font-variant-numeric:tabular-nums;
}
.gaphead h3{margin:0}
.gapstates{display:grid;gap:18px}
@media (min-width:720px){ .gapstates{grid-template-columns:1fr 1fr;gap:32px} }
.state{padding-left:16px;border-left:2px solid var(--line-3)}
.state.now{border-left-color:var(--mark)}
.state.good{border-left-color:var(--accent)}
.state .slabel{display:block;margin-bottom:9px}
.state p{font-size:17px;line-height:1.55;max-width:40ch}
.measures{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.measures span{
  font-family:var(--font-label);font-size:9px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-60);
  border:1px solid var(--line-3);border-radius:3px;padding:6px 10px;
}

/* ---------- instruments: a spec, not a paragraph ---------- */
.instr{border-top:1px solid var(--line-2);padding:30px 0;display:grid;gap:16px}
.instr:last-of-type{border-bottom:1px solid var(--line-2)}
@media (min-width:760px){ .instr{grid-template-columns:70px minmax(0,1fr);gap:30px} }
.instrnum{
  font-family:var(--font-display);font-weight:500;font-size:36px;line-height:.9;
  color:var(--accent);font-optical-sizing:none;font-variation-settings:"opsz" 26;
  font-variant-numeric:tabular-nums;
}
.instr .slabel{display:block;margin-bottom:7px}
.instr h3{margin:0 0 10px}
.instr .def{font-size:18px;line-height:1.55;margin-bottom:20px;max-width:52ch}
.spec{display:grid;gap:12px 30px}
@media (min-width:620px){ .spec{grid-template-columns:1fr 1fr} }
.spec > div{border-top:1px solid var(--line);padding-top:10px}
.spec .slabel{margin-bottom:6px}
.spec .v{font-size:15.5px;line-height:1.5;display:block}

/* ---------- section grounds ----------
   The page was an unbroken sheet of greige. These give it rhythm and warmth
   without a second accent: plaster for a step up, a rose wash for the one
   section that carries her face. Full-bleed via a pseudo-element, which is
   safe because body sets overflow-x: clip.                                */
.sec.ground{position:relative;z-index:0;padding:56px 0;margin-top:var(--section-gap)}
.sec.ground::before{
  content:"";position:absolute;top:0;bottom:0;
  left:calc(50% - 50vw);width:100vw;z-index:-1;
  background:var(--surface);
}
.sec.ground.warm::before{ background:var(--mark-06) }
.sec.ground.cool::before{ background:var(--accent-05) }

/* ---------- the portrait, rounded ----------
   A circle is a deliberate exception to the squared-corner rule. It is the
   one soft shape on the site, it belongs to the one human moment, and the
   tight crop removes most of the office behind her.                        */
.frame.round{
  border:none;background:none;border-radius:50%;overflow:hidden;
  width:280px;max-width:100%;aspect-ratio:1;
}
.frame.round img{width:100%;height:100%;object-fit:cover}

/* ---------- horizontal action row ----------
   Stacking was a workaround for the .sec class collision. That is fixed, so
   buttons sit side by side again where there is room.                      */
.actions.row{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px}

/* ---------- Wendy: words left, face right ---------- */
.meet{display:grid;gap:28px;align-items:start}
@media (min-width:720px){ .meet{grid-template-columns:minmax(0,1fr) 260px;gap:44px} }
.meet .frame.round{width:260px;justify-self:end}
@media (max-width:719px){ .meet .frame.round{justify-self:start} }

/* ---------- the two-minute check ---------- */
.dx{display:flex;flex-direction:column;margin-top:8px}
.dxq{border-top:1px solid var(--line-2);padding:18px 0;display:grid;gap:12px}
.dxq:last-of-type{border-bottom:1px solid var(--line-2)}
@media (min-width:720px){ .dxq{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:28px} }
.dxq > p{font-size:17px;line-height:1.5;margin:0;max-width:46ch}
.dxopts{display:flex;gap:6px;flex-wrap:wrap}
.dxopts label{cursor:pointer;position:relative;display:inline-flex}
.dxopts input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.dxopts span{
  font-family:var(--font-label);font-size:9.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-60);
  border:1px solid var(--line-3);border-radius:999px;padding:9px 14px;
  transition:background 150ms var(--ease),border-color 150ms var(--ease),color 150ms var(--ease);
  white-space:nowrap;
}
.dxopts input:checked ~ span{background:var(--accent);border-color:var(--accent);color:var(--surface)}
.dxopts input:focus-visible ~ span{outline:1px solid var(--accent);outline-offset:3px}
.dxfoot{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:24px}
.dxnote{font-family:var(--font-label);font-size:12px;line-height:1.6;color:var(--ink-60)}
.dxresult{margin-top:28px;border:1px solid var(--accent);padding:30px}
.dxresult .slabel{color:var(--accent);display:block;margin-bottom:10px}
.dxresult h3{margin:0 0 16px}
.dxresult .rstates{display:grid;gap:16px;margin-bottom:18px}
@media (min-width:640px){ .dxresult .rstates{grid-template-columns:1fr 1fr;gap:28px} }

/* ---------- the chain is explorable ----------
   Each gap is a focusable group. Hovering or focusing it lifts the matching
   card below, and the card lifts the marker in return, so the diagram and the
   argument are visibly the same thing. Color comes from the stylesheet, not
   from presentation attributes, so these states can be restyled.          */
.chain-gap{cursor:pointer}
.chain-gap .hit{fill:transparent}
.chain-gap .drop{stroke:var(--line-3);stroke-width:1;transition:stroke 150ms var(--ease)}
.chain-gap .ring{fill:none;stroke:var(--mark);stroke-width:1.3;transition:fill 150ms var(--ease),stroke-width 150ms var(--ease)}
.chain-gap .gnum{fill:var(--mark);transition:fill 150ms var(--ease)}
.chain-gap .glabel{fill:var(--ink-60);transition:fill 150ms var(--ease)}
.chain-gap:hover .ring,.chain-gap:focus-visible .ring,.chain-gap.on .ring{fill:var(--mark);stroke-width:1.6}
.chain-gap:hover .gnum,.chain-gap:focus-visible .gnum,.chain-gap.on .gnum{fill:var(--surface)}
.chain-gap:hover .glabel,.chain-gap:focus-visible .glabel,.chain-gap.on .glabel{fill:var(--ink)}
.chain-gap:hover .drop,.chain-gap:focus-visible .drop,.chain-gap.on .drop{stroke:var(--mark)}
.chain-gap:focus{outline:none}
.chain-gap:focus-visible .hit{fill:var(--accent-08);stroke:var(--accent);stroke-width:1}

.gapcard{transition:background 200ms var(--ease)}
.gapcard.on{background:var(--accent-08)}
.gapcard .gaphead{cursor:default}
.gapcard[data-gap]{cursor:pointer}

/* ---------- the check now shows all three scores ---------- */
.bars{display:flex;flex-direction:column;gap:10px;margin:20px 0 4px}
.bar{display:grid;grid-template-columns:150px minmax(0,1fr) 34px;gap:12px;align-items:center}
.bar .bl{font-family:var(--font-label);font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60)}
.bar .bt{height:8px;background:var(--line);border-radius:999px;overflow:hidden}
.bar .bf{height:100%;background:var(--line-4);border-radius:999px;transition:width 500ms var(--ease)}
.bar.win .bf{background:var(--accent)}
.bar.win .bl{color:var(--ink)}
.bar .bv{font-family:var(--font-label);font-size:11px;font-weight:600;color:var(--ink-60);font-variant-numeric:tabular-nums;text-align:right}

/* ---------- phases open on demand ---------- */
details.ph{border-top:1px solid var(--line-2)}
details.ph:last-of-type{border-bottom:1px solid var(--line-2)}
details.ph > summary{
  list-style:none;cursor:pointer;padding:22px 0;display:grid;gap:16px;align-items:baseline;
}
details.ph > summary::-webkit-details-marker{display:none}
@media (min-width:760px){ details.ph > summary{grid-template-columns:70px minmax(0,1fr) 20px;gap:30px} }
details.ph .n{
  font-family:var(--font-display);font-weight:500;font-size:36px;line-height:.9;color:var(--accent);
  font-optical-sizing:none;font-variation-settings:"opsz" 26;font-variant-numeric:tabular-nums;
}
details.ph h3{margin:0}
details.ph .chev{
  font-family:var(--font-label);font-size:15px;color:var(--ink-60);justify-self:end;
  transition:transform 200ms var(--ease);
}
details.ph[open] .chev{transform:rotate(90deg)}
details.ph .pbody{padding:0 0 24px}
@media (min-width:760px){ details.ph .pbody{padding-left:100px} }
details.ph .pbody p{font-size:17.5px;line-height:1.6;margin:0;max-width:56ch}
details.ph summary:focus-visible{outline:1px solid var(--accent);outline-offset:3px}

/* ---------- leverage rings respond to their legend ---------- */
.rings svg circle{transition:stroke-width 180ms var(--ease),opacity 180ms var(--ease)}
.rings .row{cursor:default;transition:background 180ms var(--ease)}
.rings .row.on{background:var(--accent-08)}

/* ---------- the chain explains itself on The Work ----------
   The gap detail lives on Home as cards. On The Work there are no cards, so
   the same content appears as a popover anchored under the marker. It sits in
   .fig rather than .figscroll, because overflow-x:auto computes overflow-y to
   auto as well and would clip it.                                          */
.chainfig{position:relative}
.gaptip{
  position:absolute;z-index:5;width:min(430px,calc(100% - 32px));
  background:var(--surface);border:1px solid var(--accent);
  padding:20px 22px;
  box-shadow:none;
}
.gaptip::before{
  content:"";position:absolute;top:-7px;left:var(--tipx,50%);margin-left:-7px;
  width:12px;height:12px;background:var(--surface);
  border-left:1px solid var(--accent);border-top:1px solid var(--accent);
  transform:rotate(45deg);
}
.gaptip .tiphead{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.gaptip .tipnum{
  width:26px;height:26px;flex:0 0 auto;border:1px solid var(--mark);border-radius:50%;
  display:grid;place-items:center;font-family:var(--font-label);font-size:9.5px;font-weight:600;
  color:var(--mark);font-variant-numeric:tabular-nums;
}
.gaptip h4{font-family:var(--font-display);font-weight:500;font-size:19px;line-height:1.2;margin:0;
  font-optical-sizing:none;font-variation-settings:"opsz" 26}
.gaptip .tipstate{padding-left:13px;border-left:2px solid var(--line-3);margin-bottom:13px}
.gaptip .tipstate.now{border-left-color:var(--mark)}
.gaptip .tipstate.good{border-left-color:var(--accent)}
.gaptip .tipstate .slabel{display:block;margin-bottom:6px}
.gaptip .tipstate p{font-size:15.5px;line-height:1.5;margin:0}
.gaptip .measures{margin-top:14px}
.gaptip .measures span{font-size:8.5px;padding:5px 9px}
.chainhint{
  font-family:var(--font-label);font-size:10px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-60);margin-top:14px;display:block;
}
@media (max-width:719px){
  .gaptip{position:static;width:auto;margin-top:16px}
  .gaptip::before{display:none}
}

/* ---------- Start: the three conditions answer back ----------
   These were a list of gates. As a self-check they do the same qualifying
   work while handing the reader the judgment instead of withholding it.  */
.cond{display:flex;flex-direction:column}
.cond label{
  border-top:1px solid var(--line-2);padding:18px 0;display:grid;
  grid-template-columns:22px minmax(0,1fr);gap:14px;align-items:start;cursor:pointer;
}
.cond label:last-of-type{border-bottom:1px solid var(--line-2)}
.cond input{position:absolute;opacity:0;width:0;height:0}
.cond .box{
  width:22px;height:22px;border:1px solid var(--line-4);border-radius:3px;
  display:grid;place-items:center;transition:background 150ms var(--ease),border-color 150ms var(--ease);
  margin-top:2px;
}
.cond .box::after{
  content:"";width:9px;height:5px;border-left:2px solid var(--surface);border-bottom:2px solid var(--surface);
  transform:rotate(-45deg) scale(0);transition:transform 150ms var(--ease);margin-top:-2px;
}
.cond input:checked ~ .box{background:var(--accent);border-color:var(--accent)}
.cond input:checked ~ .box::after{transform:rotate(-45deg) scale(1)}
.cond input:focus-visible ~ .box{outline:1px solid var(--accent);outline-offset:3px}
.cond .ct{font-size:17.5px;line-height:1.5}
.condout{
  margin-top:22px;border-left:2px solid var(--accent);padding:4px 0 4px 18px;
  font-size:17.5px;line-height:1.55;
}
.condout .slabel{display:block;margin-bottom:7px;color:var(--accent)}

/* ---------- disclosure rows without a numeral ---------- */
details.dr{border-top:1px solid var(--line-2)}
details.dr:last-of-type{border-bottom:1px solid var(--line-2)}
details.dr > summary{list-style:none;cursor:pointer;padding:20px 0;display:grid;gap:14px;align-items:start}
details.dr > summary::-webkit-details-marker{display:none}
@media (min-width:720px){ details.dr > summary{grid-template-columns:44px minmax(0,1fr) 20px;gap:22px;align-items:baseline} }
details.dr .dn{
  font-family:var(--font-label);font-size:10px;font-weight:600;letter-spacing:.06em;
  color:var(--accent);font-variant-numeric:tabular-nums;
  border:1px solid var(--accent);border-radius:50%;width:30px;height:30px;
  display:grid;place-items:center;
}
details.dr h3{margin:0}
details.dr .chev{font-family:var(--font-label);font-size:15px;color:var(--ink-60);justify-self:end;transition:transform 200ms var(--ease)}
details.dr[open] .chev{transform:rotate(90deg)}
details.dr .drb{padding:0 0 22px}
@media (min-width:720px){ details.dr .drb{padding-left:66px} }
details.dr .drb p{font-size:17px;line-height:1.6;margin:0;max-width:56ch}
details.dr summary:focus-visible{outline:1px solid var(--accent);outline-offset:3px}

/* ---------- the layer stack explains its layers ---------- */
.layerfig{position:relative}
.layerfig .lrow{cursor:pointer;transition:opacity 160ms var(--ease)}
.layerfig.dim .lrow:not(.on){opacity:.35}
.layerfig .lrow.on{stroke-width:2.2}

/* ---------- the full diagnostic ---------- */
.dxgroup{
  font-family:var(--font-label);font-size:9.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin:30px 0 4px;padding-top:22px;
  border-top:1px solid var(--line-3);
}
.dxfull .dxq:first-of-type{border-top:none}
.dxgroup:first-child{margin-top:0;padding-top:0;border-top:none}
.tfblock{margin-top:26px;padding-top:22px;border-top:1px solid var(--line-2)}
.tfblock .slabel{display:block;margin-bottom:9px;color:var(--accent)}
.tfblock p{font-size:17px;line-height:1.55;margin:0}
.tfsum{font-family:var(--font-label);font-size:13px;letter-spacing:.04em;color:var(--ink-60)}
.tfbig{
  font-family:var(--font-display);font-weight:500;font-size:clamp(30px,4.4vw,44px);
  line-height:1.05;letter-spacing:-.02em;margin:10px 0 12px !important;
  font-optical-sizing:none;font-variation-settings:"opsz" 26;
}
.tfcaveat{font-family:var(--font-label);font-size:12.5px;line-height:1.7;color:var(--ink-60)}


/* =========================================================================
   Single-page overrides
   ========================================================================= */

/* ---- the column-with-a-void fix ----
   A 1160px container gave 1080px of content, while running copy was capped
   at 66ch (about 607px). That left 473px of empty page beside every
   paragraph. Narrowing the container to the measure and lifting the type to
   20px means the copy fills its column edge to edge, and the photographs
   break out past it so the page still reads wide.                          */
:root{ --container:760px }
body{ font-size:20px; line-height:1.65; overflow-x:clip }

h1,h2,h3{ max-width:none }
.lede{ max-width:none; font-size:clamp(20px,2vw,23px) }
.body,.row p,.story,.row-lead h3,figcaption,.metastrip .v{ max-width:none }
.band .stmt{ max-width:30ch }

/* header and footer stay wide; only running copy is constrained */
.topbar-in{ max-width:1100px }
footer .wrap{ max-width:1100px }

/* photographs run edge to edge */
@media (min-width:900px){
  .sec > .frame{
    width:100vw; max-width:100vw;
    margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
    border-left:none; border-right:none;
  }
}

/* ---------- header lockup: her existing wordmark, recolored to the tokens ---------- */
.brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.brand img{height:38px;width:auto}
.foot img.mark{height:46px;width:auto}

/* ---------- compact mobile header ----------
   Stacked, the header cost 179px and pushed the first words of copy to
   y=227, which is 27% of an iPhone's first screen. On small viewports the
   logo and the button share one row and the anchor nav is dropped: this is
   one short page, so three jump links buy less than the space they cost. */
@media (max-width:700px){
  .topbar-in{padding:10px var(--page-pad);flex-wrap:nowrap;gap:12px}
  .brand img{height:32px}
  .menu-toggle{display:inline-block}
  .navgroup{gap:14px}
  /* The nav becomes a panel under the bar. Same markup, same links —
     .topbar is sticky, so it is already the containing block. */
  .nav{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;
    padding:2px var(--page-pad) 10px;
    background:var(--surface);
    border-bottom:1px solid var(--line-2);
  }
  .topbar.open .nav{display:flex}
  .nav a{
    font-size:12px;padding:14px 0;          /* 44px tap target */
    border-bottom:1px solid var(--line);
    border-top:0;
  }
  .nav a:last-child{border-bottom:0}
  .nav a:hover{border-bottom-color:var(--line)}
  .btn.sm{height:34px;line-height:32px;padding:0 15px;font-size:9.5px;letter-spacing:.08em}
}

/* ---------- solution group headers ---------- */
.grouphead{
  display:flex;align-items:baseline;gap:14px;
  padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid var(--line-3);
}
.grouphead .mk{width:8px;height:8px;border-radius:50%;flex:0 0 auto;transform:translateY(-2px);background:var(--accent)}
.grouphead.b .mk{opacity:.45}
.grouphead .t{font-family:var(--font-label);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-60)}
.grouphead .n{margin-left:auto;font-family:var(--font-label);font-size:10px;font-weight:600;letter-spacing:.16em;color:var(--ink-60);font-variant-numeric:tabular-nums}

/* ---------- copy runs across, never in columns ---------- */
.row-split{grid-template-columns:1fr;gap:8px}
.row-lead{gap:4px}

/* ---------- Meet Wendy: stacks now that the column is narrower ---------- */
.wendy{display:grid;gap:32px;grid-template-columns:1fr;align-items:start}
.wendy > .frame{max-width:400px;width:100%}
.namebar{display:flex;flex-direction:column;gap:10px;margin-bottom:26px}
.namebar .nm{
  font-family:var(--font-display);font-weight:500;font-size:clamp(28px,3.4vw,38px);
  line-height:1.08;letter-spacing:-.018em;
  font-optical-sizing:none;font-variation-settings:"opsz" 26;
}
.namebar .role{font-family:var(--font-label);font-size:12px;font-weight:400;line-height:1.9;letter-spacing:.06em;color:var(--ink-60)}
.story{display:flex;flex-direction:column;gap:1.05em}

/* =========================================================================
   §12 · Writing — the blog index, and the article pages.
   Everything here leans on the tokens and the type scale above. The only
   new idea is .prose: one measure, headings that sit closer to the text
   they introduce than to the paragraph before them.
   ========================================================================= */

/* Back-link. Doubles as the breadcrumb, and is the only nav a phone gets
   once .nav is hidden below 700px — so it is never display:none. */
.crumb{
  display:inline-block;margin-bottom:26px;
  font-family:var(--font-label);font-size:10px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
  color:var(--ink-60);
  border-bottom:1px solid transparent;padding-bottom:3px;
  transition:color 150ms var(--ease),border-color 150ms var(--ease);
}
.crumb:hover{color:var(--ink);border-bottom-color:var(--accent)}

.arthead{margin-bottom:42px}
.arthead h1{
  font-size:clamp(30px,4.4vw,44px);line-height:1.1;letter-spacing:-.02em;
  max-width:22ch;margin-bottom:20px;
}
.prose{max-width:66ch}
.prose p{margin:0 0 1.05em}
.prose p:last-child{margin-bottom:0}
.prose h2{
  font-size:clamp(21px,2.2vw,26px);line-height:1.22;letter-spacing:-.015em;
  margin:2em 0 .65em;max-width:32ch;
}
.prose h3{font-size:clamp(18px,1.7vw,20px);margin:1.6em 0 .5em}
.prose ul{margin:0 0 1.05em;padding-left:1.15em}
.prose li{margin-bottom:.5em}
.prose li:last-child{margin-bottom:0}
.prose strong{font-weight:600}
.prose em{font-style:italic}
.prose > :first-child{margin-top:0}

/* Related reading. A cluster of posts links sideways to its siblings, not
   back up to the index — that is where the internal linking earns its keep. */
.related{margin-top:var(--section-gap);border-top:1px solid var(--line-3);padding-top:26px}
.related .slabel{display:block;margin-bottom:18px}
.related ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.related a{
  font-family:var(--font-display);font-size:19px;line-height:1.25;letter-spacing:-.01em;
  text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--line-3);padding-bottom:3px;
  transition:border-color 150ms var(--ease);
}
.related a:hover{border-bottom-color:var(--accent)}

.endcta{margin-top:52px;padding-top:30px;border-top:1px solid var(--line)}
.endcta p{max-width:52ch;margin:0 0 22px}

/* The index. Rows, not cards: one rule between entries, nothing boxed. */
.postlist{display:flex;flex-direction:column;margin-top:8px}
.postlist article{border-top:1px solid var(--line-2);padding:24px 0 26px}
.postlist article:last-child{border-bottom:1px solid var(--line-2)}
/* Section h1 sets its own gap: the global rule zeroes heading margins, and
   .sec only spaces h2. Scoped to a direct child so .arthead h1 is untouched. */
.sec > h1{margin-bottom:20px}

.postlist h2{
  font-size:clamp(21px,2.2vw,26px);line-height:1.2;letter-spacing:-.015em;
  margin:0 0 10px;max-width:44ch;
}
.postlist h2 a{text-decoration:none;color:var(--ink);border-bottom:1px solid transparent;
  transition:border-color 150ms var(--ease)}
.postlist h2 a:hover{border-bottom-color:var(--accent)}
.postlist p{margin:0;max-width:62ch;color:var(--ink-60)}