/* ============================================================
   SHARD — public site

   Light-first. The bone palette is the base; midnight is the
   override. Preference still wins over both.

   Layout is an editorial breakout grid: a text measure down the
   middle, with named lines either side so a section can step out
   wide or run full-bleed. Sections vary deliberately — the page
   should not read as one long column.

   Type is the brand's own, self-hosted — no external requests.
   Display: Lexend. Body: DM Sans. Identifiers: DM Mono.
   ============================================================ */
@font-face{font-family:Lexend;font-weight:600;font-display:swap;src:url(type/Lexend-SemiBold.ttf) format("truetype")}
@font-face{font-family:Lexend;font-weight:700;font-display:swap;src:url(type/Lexend-Bold.ttf) format("truetype")}
@font-face{font-family:"DM Sans";font-weight:400;font-display:swap;src:url(type/DMSans-Regular.ttf) format("truetype")}
@font-face{font-family:"DM Sans";font-weight:500;font-display:swap;src:url(type/DMSans-Medium.ttf) format("truetype")}
@font-face{font-family:"DM Mono";font-weight:500;font-display:swap;src:url(type/DMMono-Medium.ttf) format("truetype")}

/* ---------- palette: light is the base ---------- */
:root{
  --ink:#17202e; --dim:#4e5666; --faint:#5f6878;
  --bg:#faf6ee; --plate:#f2ece0; --card:#fffefb; --well:#f2ece0;
  --line:#ddd5c4; --rule:#c9bfa8;
  --gold:#c8901a; --gold-ink:#7a5500; --on-accent:#17202e;
  --st-open:#8a5a00; --st-over:#9a3c12; --st-closed:#3f5a4c;
  --measure:38rem; --gut:min(3rem,5vw); --mark-body:#e6ddc9;
}
html[data-theme="midnight"]{
  --mark-body:#101a2e;
  --ink:#eceae4; --dim:#8d99ad; --faint:#828fa1;
  --bg:#070b14; --plate:#0a1020; --card:#0e1527; --well:#0b1222;
  --gold:#f0c164; --gold-ink:#f0c164; --on-accent:#070b14;
  --st-open:#f0b429; --st-over:#ef8354; --st-closed:#89a596;
}
html[data-theme="midnight"]{--rule:#2b3654}
html[data-accent="teal"]{--gold:#2aa79b;--gold-ink:#0c5f57}
html[data-accent="blue"]{--gold:#5a93e0;--gold-ink:#1a4f8f}
html[data-theme="midnight"][data-accent="teal"]{--gold:#5fd3c6;--gold-ink:#5fd3c6}
html[data-theme="midnight"][data-accent="blue"]{--gold:#8ab8ff;--gold-ink:#8ab8ff}
html[data-contrast="high"]{--dim:var(--ink);--faint:var(--ink);--line:var(--gold-ink);--rule:var(--gold-ink)}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"DM Sans",ui-sans-serif,system-ui,sans-serif;font-size:1.0625rem;line-height:1.65;
  -webkit-font-smoothing:antialiased}
a{color:var(--gold-ink)}
a:focus-visible,button:focus-visible{outline:2.5px solid var(--gold-ink);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--gold);color:var(--on-accent);padding:.7rem 1.1rem;border-radius:.3rem}

h1,h2,h3{font-family:Lexend,ui-sans-serif,system-ui,sans-serif;margin:0;overflow-wrap:anywhere}
h1{font-weight:700;font-size:min(clamp(2.5rem,5vw,4.1rem),12vw);line-height:1.03;letter-spacing:-.035em}
h2{font-weight:600;font-size:min(clamp(1.65rem,2.6vw,2.15rem),8vw);line-height:1.16;letter-spacing:-.025em}
h3{font-weight:600;font-size:1.06rem;letter-spacing:-.012em}
p{margin:0 0 1.15rem}
.lede{font-size:1.22rem;line-height:1.55;color:var(--dim)}
.sm{font-size:.95rem;color:var(--dim)}
.mono{font-family:"DM Mono",ui-monospace,Menlo,monospace;font-weight:500}
.kick{font-family:"DM Mono",ui-monospace,Menlo,monospace;font-weight:500;font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 1rem}

/* ---------- the plate ---------- */
.wrap{min-height:100vh}
@media(min-width:64rem){
  .wrap{display:grid;grid-template-columns:clamp(20rem,30vw,25rem) 1fr}
  .plate{position:fixed;inset-block:0;inline-size:clamp(20rem,30vw,25rem);
    display:flex;flex-direction:column;justify-content:space-between;overflow:auto}
  .col{grid-column:2}
}
.plate{background:var(--plate);border-inline-end:1px solid var(--line);
  padding:min(2.4rem,7vw) min(2.2rem,6vw)}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink)}
.brand svg{width:1.7rem;height:1.7rem;flex:none;color:var(--gold)}
.brand b{font-family:Lexend;font-weight:600;font-size:1.3rem;letter-spacing:-.02em}
.plate .tag{font-size:.94rem;color:var(--dim);margin:.55rem 0 0}

.stage{position:relative;flex:1;min-height:13rem;display:grid;place-items:center;margin:2rem 0}
.stage3d{width:min(18rem,72%);aspect-ratio:1;opacity:0;transition:opacity 1.4s ease}
.stage3d.ready{opacity:.9}
.markfall{position:absolute;width:min(12rem,55%);opacity:.55}
.stage3d.ready ~ .markfall{opacity:0;transition:opacity .9s ease}
html[data-decoration="hidden"] .stage3d,html[data-motion="reduced"] .stage3d{display:none}

.plate nav{display:flex;flex-wrap:wrap;gap:.2rem 1.3rem;margin:0 0 1.3rem}
.plate nav a{text-decoration:none;color:var(--dim);font-size:.98rem;padding:.2rem 0}
.plate nav a[aria-current=page]{color:var(--gold-ink);font-weight:500}
.plate nav a:hover{color:var(--ink)}
.a11y-open{font:inherit;font-size:.9rem;cursor:pointer;border-radius:.35rem;padding:.5rem .85rem;
  background:var(--card);color:var(--ink);border:1px solid var(--rule);display:inline-flex;align-items:center;gap:.5rem}
.a11y-open:hover{border-color:var(--gold-ink)}
.a11y-open svg{width:1rem;height:1rem;flex:none;color:var(--gold-ink)}
.plate .legal{font-size:.84rem;color:var(--faint);line-height:1.55;margin:1.3rem 0 0}

/* ---------- editorial breakout grid ---------- */
:root{--grid:
  [full-start] minmax(var(--gut),1fr)
  [wide-start] minmax(0,6vw)
  [text-start] minmax(0,var(--measure))
  [text-end] minmax(0,6vw)
  [wide-end] minmax(var(--gut),1fr)
  [full-end];}
.col{display:grid;grid-template-columns:var(--grid);
  padding-block:min(clamp(2.2rem,7vw,4.5rem),14vw) min(clamp(3rem,8vw,6rem),18vw);align-content:start}
.col>section{grid-column:full;display:grid;grid-template-columns:var(--grid);
  padding-block:min(clamp(2.6rem,6vw,4.4rem),13vw)}
.col>section>*{grid-column:text;min-width:0}
.col>section>.wide{grid-column:wide}
.col>section>.full{grid-column:full}
.col>.foot{grid-column:text}
/* a section can carry its own ground, edge to edge */
section.well{background:var(--well);border-block:1px solid var(--line)}
section.tight{padding-block:min(clamp(1.6rem,4vw,2.4rem),8vw)}
.col>section>*+*{margin-block-start:1.15rem}
.col>section>h2+*,.col>section>.kick+*{margin-block-start:1.1rem}
p:last-child{margin-bottom:0}

/* ---------- hero ---------- */
.hero{padding-block:min(clamp(2.6rem,7vw,5rem),15vw) min(clamp(2.4rem,6vw,4rem),12vw)!important}
.hero h1{max-width:18ch}
.hero .lede{max-width:34ch;font-size:1.3rem;color:var(--ink)}
.hero .rule{block-size:1px;background:var(--rule);border:0;margin-block:clamp(1.6rem,4vw,2.4rem) 0}

/* ---------- the product index: the two products, side by side ---------- */
.products{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:.7rem;overflow:hidden}
@media(min-width:52rem){.products{grid-template-columns:1fr 1fr}}
.product{background:var(--card);padding:min(2rem,6vw);display:flex;flex-direction:column;min-width:0}
.product .pn{display:flex;align-items:baseline;gap:min(.7rem,2.5vw);flex-wrap:wrap;margin-bottom:.15rem;min-width:0}
.product .pn h3{font-size:min(clamp(1.4rem,2.4vw,1.85rem),8vw);font-weight:700;letter-spacing:-.028em;line-height:1.1}
.product .what{font-family:"DM Mono",ui-monospace,Menlo,monospace;font-weight:500;font-size:.82rem;
  color:var(--gold-ink);letter-spacing:.02em;margin:0 0 .85rem}
.product p{font-size:.97rem;color:var(--dim);margin:0 0 1.1rem}
.product .more{margin-top:auto;font-size:.93rem;font-weight:500;text-decoration:none;
  border-block-start:1px solid var(--line);padding-block-start:.85rem}
.product .more:hover{text-decoration:underline}

/* ---------- section head for a named product ---------- */
.phead{display:flex;align-items:baseline;gap:min(.8rem,2.5vw);flex-wrap:wrap;min-width:0}
.phead h2{font-size:min(clamp(1.9rem,3.2vw,2.6rem),9vw);font-weight:700;letter-spacing:-.03em}

/* the opening artefact */
.finding{background:var(--card);border:1px solid var(--line);border-radius:.6rem;
  padding:min(1.7rem,5.5vw);box-shadow:0 1px 2px rgba(23,32,46,.05)}
html[data-theme="midnight"] .finding{box-shadow:none}
.finding .top{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:baseline;margin-bottom:.85rem}
.finding .id{font-family:"DM Mono",ui-monospace,Menlo,monospace;font-weight:500;font-size:.94rem;color:var(--dim)}
.finding .state{font-size:.86rem;font-weight:500;color:var(--st-over)}
.finding h3{font-size:min(1.28rem,7vw);line-height:1.3;font-weight:600;margin:0 0 1.2rem}
.finding dl{display:grid;gap:.9rem 1.6rem;grid-template-columns:repeat(auto-fit,minmax(min(8rem,100%),1fr));
  border-top:1px solid var(--line);padding-top:1.05rem;margin:0}
.finding dt{font-size:.78rem;color:var(--faint);margin-bottom:.22rem}
.finding dd{margin:0;font-size:.93rem;overflow-wrap:anywhere}

/* the claim */
.claim{font-family:Lexend;font-weight:700;font-size:min(clamp(1.75rem,3vw,2.6rem),9vw);
  line-height:1.14;letter-spacing:-.03em;max-width:26ch}
.claim em{font-style:normal;color:var(--gold-ink)}

/* steps */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:.6rem;overflow:hidden}
@media(min-width:40rem){.steps{grid-template-columns:1fr 1fr}}
@media(min-width:68rem){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{background:var(--card);padding:min(1.35rem,4.5vw);min-width:0}
.steps .k{display:block;font-family:"DM Mono",ui-monospace,Menlo,monospace;font-weight:500;
  font-size:.76rem;color:var(--gold-ink);margin-bottom:.5rem}
.steps .t{display:block;font-family:Lexend;font-weight:600;font-size:1.03rem;margin-bottom:.28rem}
.steps .d{display:block;font-size:.9rem;color:var(--dim);line-height:1.5}

/* register */
.reg{border:1px solid var(--line);border-radius:.6rem;overflow:hidden;background:var(--card)}
.reg .hd{padding:.75rem min(1rem,3.5vw);border-bottom:1px solid var(--line);font-size:.86rem;color:var(--dim)}
.reg .hd b{font-family:Lexend;font-weight:600;color:var(--ink);font-size:.95rem}
.reg .r{display:grid;grid-template-columns:auto 1fr auto;gap:.45rem 1rem;align-items:center;
  padding:.85rem min(1rem,3.5vw);border-bottom:1px solid var(--line);min-width:0}
.reg .r:last-child{border-bottom:0}
@media(max-width:34rem){.reg .r{grid-template-columns:1fr}}
.reg .i{font-family:"DM Mono",ui-monospace,Menlo,monospace;font-weight:500;font-size:.82rem;color:var(--faint)}
.reg .x{font-size:.94rem;min-width:0;overflow-wrap:anywhere}
.reg .s{font-size:.78rem;font-weight:500;justify-self:start;white-space:normal}
.s.open{color:var(--st-open)} .s.over{color:var(--st-over)} .s.done{color:var(--st-closed)}
.cap{font-size:.86rem;color:var(--faint)}

/* lists */
.pts{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.pts li{display:flex;gap:min(.8rem,3vw);font-size:1rem;min-width:0;overflow-wrap:anywhere}
.pts li::before{content:"";inline-size:.42rem;block-size:.42rem;margin-block-start:.62rem;flex:none;
  background:var(--gold);border-radius:50%}
.rows{list-style:none;margin:0;padding:0;border-block-start:1px solid var(--line)}
.rows li{display:flex;gap:min(1.2rem,4vw);flex-wrap:wrap;padding:.85rem 0;border-block-end:1px solid var(--line)}
.rows .a{font-family:Lexend;font-weight:600;font-size:.98rem;min-inline-size:min(7rem,100%)}
.rows .b{color:var(--dim);font-size:.95rem;flex:1;min-inline-size:min(11rem,100%)}

/* closing call */
.call{background:var(--card);border:1px solid var(--gold-ink);border-radius:.7rem;padding:min(2.2rem,6.5vw)}
.cta{display:inline-block;background:var(--gold);color:var(--on-accent);text-decoration:none;
  font-family:Lexend;font-weight:600;border-radius:.4rem;padding:min(.8rem,3vw) min(1.5rem,4.5vw);max-width:100%;overflow-wrap:anywhere}
.tagpill{font-family:"DM Sans";font-size:.76rem;font-weight:500;color:var(--dim);
  border:1px solid var(--rule);border-radius:99px;padding:.2rem min(.6rem,2vw);white-space:nowrap;
  font-size:min(.76rem,3.2vw);max-width:100%}

.foot{margin-block-start:clamp(2.5rem,6vw,4rem);padding-block-start:1.6rem;
  border-top:1px solid var(--line);font-size:.9rem;color:var(--faint)}
.foot .sign{color:var(--gold-ink)}

/* prefs dialog */
dialog.a11y{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:.7rem;padding:0;
  max-width:52rem;width:calc(100% - 2rem);box-shadow:0 24px 70px rgba(23,32,46,.28)}
dialog.a11y::backdrop{background:rgba(23,32,46,.5)}
html[data-theme="midnight"] dialog.a11y::backdrop{background:rgba(0,0,0,.66)}
dialog.a11y .dh{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;
  padding:1.4rem 1.6rem 1rem;border-bottom:1px solid var(--line)}
dialog.a11y h2{font-size:1.15rem}
dialog.a11y .db{padding:1.3rem 1.6rem 1.6rem;max-height:70vh;overflow:auto}
.close,.reset{font:inherit;font-size:.88rem;cursor:pointer;background:var(--card);color:var(--ink);
  border:1px solid var(--rule);border-radius:.35rem;padding:.35rem .8rem}
.prefs{display:grid;gap:.5rem 2rem;grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr))}
.prefs fieldset{border:0;padding:0;margin:0 0 .9rem}
.prefs legend{font-size:.8rem;color:var(--faint);padding:0 0 .4rem}
.prefs .row{display:flex;flex-wrap:wrap;gap:.35rem}
.prefs button{font:inherit;font-size:.88rem;cursor:pointer;border-radius:.3rem;padding:.35rem .78rem;
  background:var(--card);color:var(--ink);border:1px solid var(--rule)}
.prefs button[aria-pressed=true]{background:var(--gold);color:var(--on-accent);border-color:var(--gold);font-weight:500}

html[data-motion="reduced"] *{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* At XXL a single long word can exceed the column. */
p,.lede,.sm,li,dd,dt,span,.cap,.claim{overflow-wrap:anywhere}

/* ============================================================
   Hero art, plate middle, engine cards and the small flourishes.
   Every decorative element sits behind the decoration/motion axes.
   ============================================================ */

/* ---------- hero: the mark leads the page, not the rail ---------- */
.heroGrid{display:grid;gap:min(3rem,7vw);align-items:center}
@media(min-width:58rem){
  .heroGrid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .heroText{grid-column:1;grid-row:1}
  .heroArt{grid-column:2;grid-row:1}
}
.heroArt{position:relative;display:grid;place-items:center;min-block-size:min(20rem,58vw);
  margin-block-end:min(1rem,3vw)}
.heroArt .stage3d{width:min(24rem,86%);aspect-ratio:1;opacity:0;transition:opacity 1.4s ease}
.heroArt .stage3d.ready{opacity:.95}
.heroArt .markfall{position:absolute;width:min(15rem,62%);opacity:.6;color:var(--gold)}
.heroArt .stage3d.ready ~ .markfall{opacity:0;transition:opacity .9s ease}
html[data-decoration="hidden"] .stage3d,html[data-motion="reduced"] .stage3d{display:none}
/* a faint facet field behind the hero, purely atmospheric */
.hero{position:relative;overflow:hidden}
.hero .field{position:absolute;inset-block-start:-12%;inset-inline-end:-18%;
  inline-size:min(46rem,85vw);color:var(--gold);opacity:.11;pointer-events:none;z-index:0}
html[data-decoration="hidden"] .hero .field{display:none}
.hero>*{position:relative;z-index:1}

/* ---------- plate middle ---------- */
.plateMid{color:var(--dim)}
.facetrule{display:block;inline-size:100%;block-size:.75rem;color:var(--gold);opacity:.7;margin-block-end:1.4rem}
html[data-decoration="hidden"] .facetrule{display:none}
.psmall{font-size:.88rem;line-height:1.55;color:var(--faint);margin:0}

/* ---------- a kicker carries a small facet ---------- */
.kick{display:flex;align-items:center;gap:.55rem}
.kick::before{content:"";inline-size:.46rem;block-size:.46rem;flex:none;
  background:var(--gold);transform:rotate(45deg)}
html[data-decoration="hidden"] .kick::before{display:none}

/* ---------- engine cards: bring-your-own-model ---------- */
.engines{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:.7rem;overflow:hidden}
@media(min-width:52rem){.engines{grid-template-columns:1fr 1fr}}
.engine{background:var(--card);padding:min(2rem,6vw);min-width:0}
.engine .glyph{inline-size:2.6rem;max-inline-size:12vw;block-size:auto;color:var(--gold);margin-block-end:.9rem;display:block}
.engine h3{font-size:min(1.15rem,5.5vw);margin-block-end:.5rem}
.engine p{font-size:.96rem;color:var(--dim);margin:0 0 .8rem}
.engine .cap{margin:0}
.engine .badge{display:inline-block;font-family:"DM Mono",ui-monospace,Menlo,monospace;font-weight:500;
  font-size:min(.74rem,3vw);letter-spacing:.06em;text-transform:uppercase;color:var(--gold-ink);
  border:1px solid var(--rule);border-radius:99px;padding:.18rem min(.6rem,2vw);margin-block-end:.9rem}

/* ---------- product cards get a facet watermark ---------- */
.product{position:relative;overflow:hidden}
.product .wm{position:absolute;inset-block-start:-1.5rem;inset-inline-end:-1.5rem;
  inline-size:min(9rem,30%);color:var(--gold);opacity:.09;pointer-events:none}
html[data-decoration="hidden"] .product .wm{display:none}
.product>*{position:relative}

/* ---------- register status dots ---------- */
.reg .s{display:inline-flex;align-items:center;gap:.45rem}
.reg .s::before{content:"";inline-size:.45rem;block-size:.45rem;border-radius:50%;flex:none;background:currentColor}

/* ---------- step numerals with more presence ---------- */
.steps .k{font-size:.95rem;opacity:.85}
.steps li{position:relative}
.steps li::after{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;
  inline-size:100%;block-size:2px;background:var(--gold);opacity:.32}
html[data-decoration="hidden"] .steps li::after{display:none}

/* ---------- a facet rule can close a section ---------- */
.seamrule{display:block;inline-size:100%;block-size:.7rem;color:var(--gold);opacity:.6}
html[data-decoration="hidden"] .seamrule{display:none}

/* ---------- the closing call gets a corner facet ---------- */
.call{position:relative;overflow:hidden}
.call .wm{position:absolute;inset-block-end:-2.5rem;inset-inline-end:-2rem;
  inline-size:min(12rem,34%);color:var(--gold);opacity:.12;pointer-events:none}
html[data-decoration="hidden"] .call .wm{display:none}
.call>*{position:relative}

/* hero text: the grid narrowed the measure, so the display size and the
   internal rhythm have to be set here rather than inherited from .col */
@media(min-width:58rem){.heroGrid{grid-template-columns:minmax(0,1.28fr) minmax(0,.72fr)}}
.hero .heroText>*+*{margin-block-start:min(1.35rem,4vw)}
.hero h1{font-size:min(clamp(2.3rem,3.9vw,3.5rem),11vw);max-width:none}
.hero .lede{max-width:40ch}
.heroArt{min-block-size:min(17rem,52vw)}

/* inner-page heads share the hero's facet field but not its two-column art */
.pagehead .field{inset-block-start:-30%;inset-inline-end:-22%;inline-size:min(38rem,78vw);opacity:.1}
.pagehead h1{font-size:min(clamp(2.3rem,4.2vw,3.5rem),11vw)}
.pagehead>*+*{margin-block-start:min(1.35rem,4vw)}

/* the plate only gets space-between at desktop; stacked, its blocks need rhythm */
@media(max-width:63.99rem){
  .plate>*+*{margin-block-start:min(1.6rem,5vw)}
  .plateMid .facetrule{margin-block-end:1.1rem}
}

/* A flex list item turns every inline child into its own flex item, so a
   bullet written as "<b>Label.</b> description" split into two columns.
   Float the marker out of flow instead and let the content stay inline. */
.pts li{display:block;position:relative;padding-inline-start:min(1.4rem,5vw);gap:0}
.pts li::before{position:absolute;inset-inline-start:0;inset-block-start:.62rem;margin-block-start:0}

/* ============================================================
   Product marks.

   Brand Guidelines v1.0 §5: "never recolour the mark at all".
   The a11y accent axis retints --gold, so the mark must NOT read
   from it, or choosing Teal would silently rebrand the company.
   --mark is gold on both grounds and is deliberately outside the
   accent axis. Light-ground value is the brand's own light mark
   colour (#D99518, as shipped in shard-mark-light-bg-v1.svg).
   ============================================================ */
:root{--mark:#D99518}
html[data-theme="midnight"]{--mark:#FCC14D}
html[data-contrast="high"]{--mark:var(--gold-ink)}

.brand svg{color:var(--mark)}
.pmark,.hmark{color:var(--mark);flex:none;display:block;block-size:auto}
.pmark{inline-size:1.9rem;max-inline-size:9vw;margin-block-end:.9rem}
.hmark{inline-size:1.6rem;max-inline-size:7vw;align-self:center}
.phead{align-items:center}

/* ============================================================
   Wide screens were giving 341px of dead gutter each side at 1920
   (45% of the content column, 60% on text-only sections). Two moves:
   widen the breakout tracks so wide/full elements claim the space,
   and lift the section kicker out into the left margin as a
   side-head, so the margin carries something instead of nothing.
   ============================================================ */
@media(min-width:100rem){
  :root{--grid:
    [full-start] minmax(var(--gut),.7fr)
    [wide-start] minmax(0,10vw)
    [text-start] minmax(0,var(--measure))
    [text-end] minmax(0,10vw)
    [wide-end] minmax(var(--gut),1fr)
    [full-end];}
  /* kicker as a right-ranged side-head, level with the heading it introduces */
  /* must stop at wide-start: a .wide heading spans wide-start..wide-end on the
     same row, and full-start/text-start overlapped it. */
  .col>section>.kick:first-child{grid-row:1;grid-column:full-start/wide-start;
    justify-self:end;justify-content:flex-end;text-align:right;
    padding-inline-end:min(2.4rem,3vw);margin-block-start:.35rem;
    max-inline-size:100%;overflow-wrap:anywhere}
  .col>section>.kick:first-child+*{grid-row:1;grid-column:text}
  .col>section>.kick:first-child+.wide{grid-column:wide}
  .col>section>.kick:first-child+.full{grid-column:full}
  .hero{padding-block-start:min(clamp(2.6rem,7vw,5rem),15vw)}
}

/* Very wide: let the measure grow a little and the breakouts grow a lot.
   38rem in a 1520px column is what reads as emptiness. The a11y measure
   axis still offers "narrow" for anyone who wants the tighter line. */
@media(min-width:110rem){
  :root{--measure:46rem;--grid:
    [full-start] minmax(var(--gut),.55fr)
    [wide-start] minmax(0,13.5vw)
    [text-start] minmax(0,var(--measure))
    [text-end] minmax(0,13.5vw)
    [wide-end] minmax(var(--gut),1fr)
    [full-end];}
}
html[data-measure="narrow"]{--measure:30rem}

/* As a right-ranged side-head the kicker's facet belongs beside the text,
   not stranded at the far edge of the track. */
@media(min-width:100rem){
  .col>section>.kick:first-child{flex-direction:row-reverse}
}

/* ============================================================
   Sidebar compression. The plate was clamp(20rem,30vw,25rem)
   — 320-400px of mostly air. Narrower rail, tighter insets,
   smaller type in the subordinate blocks. The content column
   gains everything the rail gives up.
   ============================================================ */
@media(min-width:64rem){
  .wrap{grid-template-columns:clamp(13.5rem,16vw,16rem) 1fr}
  .plate{inline-size:clamp(13.5rem,16vw,16rem)}
}
.plate{padding:min(1.7rem,5vw) min(1.5rem,4.5vw)}
.brand svg{width:1.45rem;height:1.45rem}
.brand b{font-size:1.18rem}
.plate .tag{font-size:.86rem;margin-block-start:.45rem}
.plate nav{gap:.1rem .9rem;margin-block-end:1rem}
.plate nav a{font-size:.92rem}
.a11y-open{font-size:.84rem;padding:.42rem .7rem;gap:.4rem}
.plate .legal{font-size:.78rem;margin-block-start:1rem}
.plateMid .psmall{font-size:.82rem}
.plateMid .kick{font-size:.72rem;letter-spacing:.1em}
.facetrule{margin-block-end:1rem}
/* the rail is narrow now — the mark and wordmark must not be forced apart */
.brand{gap:.55rem;min-inline-size:0}
.brand b{overflow-wrap:anywhere}

/* Compressing the rail gave the content column ~170px, which fell straight
   into the gutters because the breakout tracks were still sized for the old
   narrow column. Widen them in step, so wide/full elements take the gain.
   The side-head stays gated at 100rem, where the left track can hold it. */
@media(min-width:64rem){
  :root{--grid:
    [full-start] minmax(var(--gut),.8fr)
    [wide-start] minmax(0,9vw)
    [text-start] minmax(0,var(--measure))
    [text-end] minmax(0,9vw)
    [wide-end] minmax(var(--gut),1fr)
    [full-end];}
}
@media(min-width:86rem){
  :root{--measure:41rem;--grid:
    [full-start] minmax(var(--gut),.7fr)
    [wide-start] minmax(0,11vw)
    [text-start] minmax(0,var(--measure))
    [text-end] minmax(0,11vw)
    [wide-end] minmax(var(--gut),1fr)
    [full-end];}
}

/* ============================================================
   Rail, rebuilt: identity at the top, nav directly under it,
   subordinate blocks at the foot. Three logo configurations
   selectable with html[data-rail]; the default is "b".
   ============================================================ */
.plate{display:flex;flex-direction:column;justify-content:space-between;gap:1.6rem}
.ptop{display:flex;flex-direction:column}
.pbot{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}

.brand{display:flex;flex-direction:column;align-items:flex-start;gap:.55rem;
  text-decoration:none;color:var(--ink);min-inline-size:0}
.brand .bmark{inline-size:3.6rem;max-inline-size:34vw;block-size:auto;color:var(--mark);flex:none}
.brand b{font-family:Lexend;font-weight:700;font-size:1.6rem;letter-spacing:-.03em;line-height:1}
.plate .tag{font-size:.84rem;color:var(--dim);margin:.5rem 0 0;line-height:1.45}

/* nav: a vertical list, each row an icon and its label */
.plate nav{display:flex;flex-direction:column;gap:.1rem;margin:1.6rem 0 0}
.plate nav a{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--dim);
  font-size:.94rem;padding:.42rem .5rem;border-radius:.35rem;margin-inline-start:-.5rem}
.plate nav a .nico{inline-size:1.05rem;max-inline-size:5vw;block-size:auto;flex:none;opacity:.85}
.plate nav a:hover{color:var(--ink);background:var(--card)}
.plate nav a[aria-current=page]{color:var(--gold-ink);font-weight:500;background:var(--card)}
.plate nav a[aria-current=page] .nico{opacity:1;color:var(--mark)}

/* --- config A: compact stack --- */
html[data-rail="a"] .brand .bmark{inline-size:2.6rem}
html[data-rail="a"] .brand b{font-size:1.35rem}
/* --- config B: large stack (default) --- */
html[data-rail="b"] .brand .bmark{inline-size:4.6rem}
html[data-rail="b"] .brand b{font-size:1.85rem}
/* --- config C: oversized mark as a graphic --- */
html[data-rail="c"] .brand{gap:.75rem}
html[data-rail="c"] .brand .bmark{inline-size:6.4rem;margin-inline-start:-.35rem}
html[data-rail="c"] .brand b{font-size:1.7rem}
html[data-rail="c"] .plate .tag{font-size:.88rem}

/* ============================================================
   Product colours. "Shard" always stays ink; the product word
   carries the colour. Chosen to sit clear of the score palette
   (red/orange/amber/green/teal) so a product name can never be
   misread as a score, and clear of brand gold.

   Audit  indigo  #1F4E9C bone (6.79:1) · #8FB6F0 night (8.76:1)
   Books  plum    #7A2E6E bone (7.31:1) · #E098D4 night (8.32:1)

   Colour never carries meaning alone here — the product name is
   the text itself, so WCAG 1.4.1 is satisfied by construction.
   ============================================================ */
:root{--audit:#1F4E9C;--books:#7A2E6E}
html[data-theme="midnight"]{--audit:#8FB6F0;--books:#E098D4}
.p-audit{color:var(--audit)}
.p-books{color:var(--books)}
.product .what.w-audit,.phead .what.w-audit{color:var(--audit)}
.product .what.w-books,.phead .what.w-books{color:var(--books)}
.pmark.m-audit{color:var(--audit)}
.pmark.m-books{color:var(--books)}

/* ---------- rail: centre the identity in its column ---------- */
.ptop{align-items:center}
.brand{align-items:center;text-align:center}
.plate .tag{text-align:center}
.plate nav{align-self:stretch}

/* ============================================================
   Hero ground. Flat bone read as empty where flat night did not,
   so the band now carries a warm vertical wash plus a bloom
   behind the mark, and a second bloom that drifts very slowly.
   A solid background-color sits under the gradients so contrast
   still resolves against a real colour.
   ============================================================ */
:root{--hero-a:#fdfbf6;--hero-b:#f3ecdd;--bloom:rgba(217,149,24,.20);--bloom2:rgba(31,78,156,.09)}
html[data-theme="midnight"]{--hero-a:#0b1322;--hero-b:#04070e;--bloom:rgba(240,193,100,.15);--bloom2:rgba(143,182,240,.10)}
.hero{background-color:var(--bg);
  background-image:
    radial-gradient(115% 80% at 76% 16%, var(--bloom) 0%, transparent 62%),
    linear-gradient(176deg, var(--hero-a) 0%, var(--hero-b) 100%);}
.hero::after{content:"";position:absolute;inset:-25%;z-index:0;pointer-events:none;
  background:radial-gradient(42% 42% at 28% 72%, var(--bloom2) 0%, transparent 70%);
  animation:bloomdrift 34s ease-in-out infinite alternate}
@keyframes bloomdrift{from{transform:translate3d(-5%,-4%,0) scale(1)}
                      to{transform:translate3d(6%,5%,0) scale(1.12)}}
html[data-decoration="hidden"] .hero::after{display:none}
html[data-decoration="hidden"] .hero{background-image:none}
/* the inner-page heads get the same wash, without the drift */
.pagehead{background-color:var(--bg);
  background-image:radial-gradient(100% 70% at 82% 10%, var(--bloom) 0%, transparent 60%),
                   linear-gradient(176deg, var(--hero-a) 0%, var(--hero-b) 100%)}
html[data-decoration="hidden"] .pagehead{background-image:none}

/* ---------- a clarifying note, set apart from the argument ---------- */
.note{border-inline-start:3px solid var(--audit);background:var(--card);
  border-radius:0 .5rem .5rem 0;padding:min(1.4rem,5vw) min(1.6rem,5vw)}
.note p{margin:0;font-size:.98rem}
.note b{color:var(--ink)}

/* ---------- audience cards ---------- */
.aud{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:.7rem;overflow:hidden}
@media(min-width:46rem){.aud{grid-template-columns:1fr 1fr}}
.a1{background:var(--card);padding:min(1.8rem,5.5vw);min-width:0}
.a1 h3{font-size:min(1.12rem,5.5vw);margin:.15rem 0 .55rem}
.a1 p{font-size:.96rem;color:var(--dim);margin:0 0 .75rem}
.a1 .cap{margin:0;color:var(--faint);border-block-start:1px solid var(--line);padding-block-start:.7rem}
.a1 .badge{display:inline-block;font-family:"DM Mono",ui-monospace,Menlo,monospace;font-weight:500;
  font-size:min(.72rem,3vw);letter-spacing:.06em;text-transform:uppercase;color:var(--audit);
  border:1px solid var(--rule);border-radius:99px;padding:.18rem min(.6rem,2vw);margin-block-end:.6rem}

/* The column's top padding left a flat strip above the hero, so the wash
   began part-way down. The hero carries its own padding; let it start at 0. */
.col{padding-block-start:0}
/* On cream a blue second bloom reads as a grey smudge — warm it to match. */
:root{--bloom2:rgba(200,144,26,.09)}
.hmark.m-audit{color:var(--audit)}
.hmark.m-books{color:var(--books)}

/* ============================================================
   Mark v2 — the prism cut. Product hues live IN the mark now,
   so the mark is no longer tinted per product: one mark
   everywhere, and the coloured product word does the telling
   apart. Stops are driven by CSS custom properties so a single
   inline mark serves both themes at full fidelity.
   ============================================================ */
:root{
  --mk-gold-0:#FCC14D; --mk-gold-1:#A56A00;
  --mk-audit-0:#1F4E9C; --mk-audit-1:#12356B;
  --mk-books-0:#7A2E6E; --mk-books-1:#4E1C45;
  --mk-stroke:#D99518;
}
html[data-theme="midnight"]{
  --mk-gold-0:#FFD98A; --mk-gold-1:#B87A0A;
  --mk-audit-0:#8FB6F0; --mk-audit-1:#3F6FB8;
  --mk-books-0:#E098D4; --mk-books-1:#A25794;
  --mk-stroke:#FCC14D;
}
.mk-gold-0{stop-color:var(--mk-gold-0)}  .mk-gold-1{stop-color:var(--mk-gold-1)}
.mk-audit-0{stop-color:var(--mk-audit-0)} .mk-audit-1{stop-color:var(--mk-audit-1)}
.mk-books-0{stop-color:var(--mk-books-0)} .mk-books-1{stop-color:var(--mk-books-1)}
.mk-s{stroke:var(--mk-stroke);fill:none}
.mk-n{fill:var(--mk-stroke)}
/* the mark carries its own colour; nothing may retint it */
.brand svg,.pmark,.hmark{color:inherit}
.pmark.m-audit,.pmark.m-books,.hmark.m-audit,.hmark.m-books{color:inherit}
.brand .bmark{inline-size:4.6rem}
/* the hero fallback mark carries its own colour now — no opacity ghosting */
.heroArt .markfall{opacity:.85}

/* ============================================================
   Kintsugi hero. Eight pieces of the v2 prism mark break apart
   and come back together. The seams are gold and only exist
   when the pieces meet — fragments are facets, by design.
   Everything sits behind the motion and decoration axes.
   ============================================================ */
.heroArt{position:relative;display:grid;place-items:center;min-block-size:min(19rem,54vw)}
.heroArt svg{overflow:visible}
.kf{stroke:var(--mk-stroke);stroke-width:1.3;stroke-linejoin:round}
.kf-gold{fill:var(--mk-gold-0)}
.kf-audit{fill:var(--mk-audit-0)}
.kf-books{fill:var(--mk-books-0)}
.kf-seam{stroke:var(--mk-stroke);stroke-width:1.7;stroke-linecap:round;fill:none}
.kf-outline{stroke:var(--mk-stroke);stroke-width:2.4;stroke-linejoin:round;fill:none}
.kf-node{fill:var(--mk-stroke)}
.kf-static{inline-size:min(16rem,52vw);color:var(--mk-stroke)}
html[data-decoration="hidden"] .heroArt{display:none}

/* ---------- drawn locator map: no tiles, no external request ---------- */
.map{inline-size:100%;max-inline-size:34rem;block-size:auto;margin:1.4rem 0 .9rem;display:block}
.map-land{fill:var(--well);stroke:var(--rule);stroke-width:2;stroke-linejoin:round}
html[data-theme="midnight"] .map-land{fill:#0d1526;stroke:#2b3654}
.map-halo{fill:var(--mk-gold-0);opacity:.18}
.map-mark{fill:var(--mk-stroke)}
.map-dot{fill:var(--card)}
.map-label{fill:var(--ink);font-family:"DM Sans",system-ui,sans-serif;font-size:19px;font-weight:500}
html[data-decoration="hidden"] .map-halo{display:none}

/* ---------- measurements table ---------- */
.mtable{inline-size:100%;border-collapse:collapse;margin:1.2rem 0 .6rem;font-size:.92rem}
.mtable caption{text-align:start;font-size:.86rem;color:var(--faint);padding-block-end:.6rem}
.mtable th,.mtable td{text-align:start;padding:.55rem .7rem;border-block-end:1px solid var(--line);
  vertical-align:top}
.mtable thead th{font-family:Lexend;font-weight:600;font-size:.86rem;color:var(--ink);
  border-block-end:1.5px solid var(--rule)}
.mtable td.n{font-family:"DM Mono",ui-monospace,monospace;font-weight:500}
.pass{color:var(--st-closed);font-weight:500}
.mnote{font-size:.9rem;color:var(--dim)}

/* A four-column data table cannot fit 320px. Rather than claim the table
   exception in SC 1.4.10, stack it: each row becomes a labelled block, so
   the page still reflows to a single column with nothing cut off. */
@media(max-width:46rem){
  .mtable thead,.mtable thead tr{position:absolute;inline-size:1px;block-size:1px;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .mtable tr{display:block;border-block-end:1px solid var(--line);padding-block:.55rem}
  .mtable td,.mtable tfoot th{display:flex;justify-content:space-between;gap:min(1rem,4vw);
    border:0;padding:.22rem 0;text-align:start}
  .mtable td::before,.mtable tfoot th::before{content:attr(data-l);color:var(--faint);
    font-size:.86rem;font-family:"DM Sans",sans-serif;font-weight:400;flex:none}
  .mtable td:first-child{font-family:Lexend;font-weight:600;padding-block-end:.4rem}
  .mtable caption{padding-block-end:.5rem}
}