/* ─────────────────────────────────────────────────────────────────────────
   The Duke of AI — projects pages

   Loaded alongside css/folio.css, which already supplies the nav, the
   footer, the editorial header and the page scaffolding. Only the pieces
   unique to the projects live here.
   ───────────────────────────────────────────────────────────────────────── */

/* ---------- buttons ----------
   The pill styles live in the homepage's inline CSS, which these pages don't
   load. Copied verbatim so a "View project" button matches every other button
   on the site. If the homepage pills change, change these too. */
  .pill{
    display:inline-flex; align-items:center; gap:.5em;
    font-family:var(--text); font-size:17px; font-weight:400; letter-spacing:-.01em;
    border-radius:980px; padding:11px 22px;
    cursor:pointer; border:1px solid transparent;
    transition:background var(--dur-base) ease, color var(--dur-base) ease, border-color var(--dur-base) ease, transform var(--dur-base) ease;
  }
  /* The ink is a token with the old hex as its fallback, so this page is
     unchanged - nothing here declares --pill-ink. The vault does, because
     its --gold flips with the theme and a fixed near-black fails on the
     light one. See the note beside --pill-ink in css/vault.css. */
  .pill-fill{ background:var(--gold); color:var(--pill-ink,#0a0a0b); }
  .pill-fill:hover{ background:var(--gold-hi); }
  .pill-outline{ background:transparent; border-color:var(--gold); color:var(--gold); }
  .pill-outline:hover{ background:var(--gold-soft); }
  .pill-sm{ font-size:14px; padding:7px 15px; }
/* ---------- the index grid ---------- */
.projects-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(clamp(200px,22vw,250px),1fr));
  gap:clamp(16px,2vw,22px);
}

.p-card{
  position:relative;
  height:100%;
  display:flex; flex-direction:column;
  background:var(--canvas);
  border:1px solid var(--hairline);
  border-radius:8px;
  overflow:hidden;
  transition:transform var(--dur-slow) ease, border-color var(--dur-slow) ease;
}
.p-card:hover{ transform:translateY(-3px); border-color:var(--gold); }

/* Slots that are not projects yet. They hold their place in the grid without
   pretending to be finished: dimmed, no lift on hover, and the control is a
   span rather than a link, so nothing here can be clicked or tabbed into. */
.p-card--soon{ opacity:.52; }
.p-card--soon:hover{ transform:none; border-color:var(--hairline); }
.p-card--soon .p-thumb{ filter:grayscale(1); }
.p-go--soon{
  cursor:default; pointer-events:none;
  /* Back on 24 Sep 2026, with the outline buttons it was written for. It was
     dropped on the 23rd because grey writing on a solid gold ground reads as a
     mistake - which was true of a FILLED pill and is not true of this one. On
     an outline pill the grey sits on the card's own ground and simply steps
     the control back, which is what it is for.

     It is not the only signal and never was: .p-card--soon dims the whole card
     to .52 and greys the picture, and pointer-events:none above means there is
     nothing to click or tab into. This is the part that says so in the
     control itself. */
  color:var(--muted); border-color:var(--hairline);
}
@media (prefers-reduced-motion:reduce){ .p-card{ transition:none } }

/* the picture */
.p-thumb{ aspect-ratio:1/1; background:var(--surface); }
.p-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* projects without a picture yet keep the site's placeholder language */
.p-thumb.ph{ display:grid; place-items:center; }
.p-thumb.ph img{ width:38%; height:auto; object-fit:contain; opacity:.14; }

/* name and button below it */
.p-body{
  flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px; padding:18px 16px 22px;
  text-align:center;
}
.p-card h2{
  font-family:var(--display); font-weight:600;
  font-size:clamp(14px,1.2vw,16px); line-height:1.3;
  letter-spacing:.02em; text-transform:uppercase;
  color:var(--paper);
  text-wrap:balance;
  /* Reserve two lines whatever the name's length, and centre a short one
     inside that. Without this the cards are all the same height but their
     names are not, so a two-line name squeezed its button up against it
     while a one-line name sat with twice the breathing room. */
  min-height:2.6em;
  display:flex; align-items:center; justify-content:center;
}
/* The button used to be pinned to the foot of the card. That kept a row's
   buttons level, but it meant the gap above the button was whatever space
   happened to be left — 34px under a one-line name, 14px under a two-line
   one. The name and button are now a centred block with a fixed gap, so the
   spacing reads the same on every card at every width. */

/* the whole card is the target; the pill just shows where to aim */
.p-card a.p-go::after{ content:""; position:absolute; inset:0; border-radius:8px; }
.p-card a.p-go:focus-visible{ outline:none; }
.p-card:focus-within{ border-color:var(--gold); }
.p-card:focus-within .p-go{ outline:2px solid var(--gold); outline-offset:3px; }

/* ---------- an individual project page ---------- */
.project-head{ text-align:left; }
.project-head .emblem{ width:clamp(52px,6vw,72px); margin-bottom:clamp(20px,3vw,28px); opacity:.9; }

.project-body{ margin-top:clamp(34px,5vw,54px); }

/* ---------- banded sections on a project page ----------
   The alternating black/grey banding lives in the homepage's inline CSS,
   which these pages don't load. Same trap as the pill styles. */
.section.alt{ background:var(--surface); }

/* A quiet gold numeral so each band announces itself without extra words.
   Scoped under .prose because `.prose p` sets the body colour and would
   otherwise out-specify this rule, leaving the numerals grey. */
.prose .sec-num{
  font-family:var(--text); font-size:11px; font-weight:600;
  letter-spacing:.22em; color:var(--gold);
  margin-bottom:14px;
}

/* the opening band carries the title */
.project-hero h1{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2.2rem,1.2rem + 3vw,3.2rem); line-height:1.08;
  letter-spacing:-.014em; color:var(--paper);
}
.project-hero .emblem{ width:clamp(52px,6vw,72px); margin-bottom:clamp(18px,2.5vw,26px); opacity:.9; }
.project-hero .prose{ margin-top:clamp(26px,4vw,38px); }

/* ---------- a written-up project page ---------- */
.prose{ max-width:68ch; }
.prose > * + *{ margin-top:1.15em; }
.prose h2{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.55rem,1.15rem + 1.3vw,2.1rem); line-height:1.14;
  letter-spacing:-.012em; color:var(--paper);
}
/* each band opens with its heading, so no leading gap is needed */
.prose > h2:first-of-type{ margin-top:0; }
.prose h3{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.02rem,.95rem + .35vw,1.15rem);
  color:var(--paper); margin-top:2em;
}
.prose p, .prose li{
  font-family:var(--display); font-weight:300;
  font-size:clamp(1rem,.94rem + .3vw,1.12rem); line-height:1.68;
  color:var(--secondary); text-wrap:pretty;
}
.prose strong{ color:var(--paper); font-weight:500; }
.prose ul{ list-style:none; }
.prose li{ position:relative; padding-left:1.15em; }
.prose li + li{ margin-top:.5em; }
.prose li::before{ content:"—"; position:absolute; left:0; color:var(--gold); }

/* a line the page leans on */
.prose blockquote{
  border-left:2px solid var(--gold);
  padding:2px 0 2px 20px; margin-left:0;
}
.prose blockquote p{
  font-size:clamp(1.08rem,1rem + .45vw,1.3rem);
  color:var(--paper); font-style:italic;
}

/* The standing statement about clinical care — the most important sentence on
   the page, so it is washed in gold rather than boxed in grey.

   It used to fill with --surface, which is the same value as the alt band it
   sits on, so the fill did nothing and only a hairline separated it. A gold
   wash reads on either band, which also means it survives the section moving
   and the banding flipping. */
.prose .standing{
  background:var(--gold-soft);
  border:1px solid var(--gold-line);
  border-radius:8px;
  padding:clamp(24px,3.2vw,34px);
  /* A clear line of space before it. The prose's own rhythm gives every block
     1.15em; this one gets roughly a blank line on top of that, so the
     statement arrives as a separate thing rather than the next paragraph. */
  margin-top:3.2em;
}
/* No size change — the wash is doing the work, and type a step larger would
   say the same thing twice. */
.prose .standing p{ color:var(--paper); margin:0; }

/* ---------- the two diagrams ---------- */
.diagram{ margin-top:1.8em; display:grid; gap:10px; }
.layer{
  border:1px solid var(--hairline); border-radius:8px;
  background:var(--surface); padding:16px 18px;
}
.layer .l-name{
  font-family:var(--text); font-size:11px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
}
.layer .l-what{
  font-family:var(--display); font-weight:300; line-height:1.5;
  font-size:clamp(.95rem,.9rem + .25vw,1.05rem);
  color:var(--secondary); margin-top:6px;
}

/* the holding state, until each project is written up */
.project-holding{
  border:1px solid var(--hairline);
  border-radius:8px;
  padding:clamp(34px,6vw,64px) clamp(22px,4vw,40px);
  text-align:center;
  background:var(--surface);
}
.project-holding p{
  font-family:var(--display); font-weight:300;
  font-size:clamp(1.05rem,.92rem + .5vw,1.28rem);
  color:var(--secondary);
  max-width:40ch; margin:0 auto;
  text-wrap:balance;
}

@media (max-width:560px){
  .projects-grid{ grid-template-columns:repeat(2,1fr); }
}

/* One column on the smallest phones, 23 Sep 2026.

   MEASURED, not chosen: the widest card label is "View project" at 79px, the
   pill adds 30px of padding and the card body 32px, so a card has to be 143px
   for the label to stay on one line - and two columns only reach that at a
   viewport of 350px. Below it the button wrapped into a tall two-line lozenge.
   It always did; filling the buttons with gold is what made it visible, an
   outline hid the shape.

   The break is at 369 rather than 349 on purpose. A 360px Android clears the
   threshold by five pixels, and five pixels is inside the range that font
   rendering moves between devices - the 79px above was measured in one
   browser. 375px and up keeps two columns, with 13px to spare.

   Shrinking the type was the other option and is worse: it buys a few pixels,
   fails again the day a label gets longer, and makes the smallest screen the
   one with the smallest text. Dropping a column gives a 272px card at 320px,
   which also unpicks the three-line titles that width was producing. */
@media (max-width:369px){
  .projects-grid{ grid-template-columns:1fr; }
}

/* ---------- a document shown inside a project page ----------
   The cover sits in the prose as a figure and opens the document over the
   page. The trigger is a real link to the first page, so it still works with
   JavaScript off — js/doc.js only changes where the document opens. */
.doc-fig{ margin-top:1.8em; }
.doc-open{
  display:block; width:min(300px,62%);
  border:1px solid var(--hairline); border-radius:6px; overflow:hidden;
  background:var(--surface);
  transition:transform var(--dur-slow) ease, border-color var(--dur-slow) ease;
}
.doc-open img{ width:100%; height:auto; display:block; }
.doc-open:hover{ transform:translateY(-3px); border-color:var(--gold); }
.doc-open:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.doc-fig figcaption{
  font-family:var(--text); font-size:13px; line-height:1.5;
  color:var(--muted); margin-top:12px; max-width:46ch;
}
.doc-fig figcaption b{
  display:block; font-weight:600; color:var(--gold);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  margin-bottom:5px;
}

/* ---------- the viewer ---------- */
body.doc-lock{ overflow:hidden; }
.doc-ov{
  position:fixed; inset:0; z-index:200;
  background:rgba(6,6,7,.975);
  display:flex; flex-direction:column;
  padding:clamp(10px,2vw,20px);
}
.doc-ov[hidden]{ display:none; }

.doc-bar{
  flex:none; display:flex; align-items:center; gap:16px;
  padding-bottom:clamp(10px,1.6vw,16px);
}
.doc-title{
  font-family:var(--display); font-weight:500; color:var(--paper);
  font-size:clamp(.95rem,.9rem + .3vw,1.08rem);
}
.doc-count{
  font-family:var(--text); font-size:12px; letter-spacing:.14em;
  color:var(--muted); margin-left:auto; white-space:nowrap;
}
.doc-full{
  font-family:var(--text); font-size:13px; color:var(--muted);
  text-decoration:none; white-space:nowrap;
  transition:color var(--dur-base) ease;
}
.doc-full:hover{ color:var(--gold); }
.doc-count{ margin-left:auto; }

.doc-close{
  font-family:var(--text); font-size:13px; color:var(--gold);
  background:transparent; border:1px solid var(--gold); border-radius:980px;
  padding:6px 16px; cursor:pointer;
  transition:background var(--dur-base) ease;
}
.doc-close:hover{ background:var(--gold-soft); }

/* The page itself.
   max-height:100% is not enough here: the stage is a flex child whose height
   is indefinite, so the percentage had nothing to resolve against and a tall
   A4 page overflowed — its foot cut off and the arrows sitting on top of it.
   Pinning the image to the stage's box and letting object-fit do the work
   contains it whatever shape the window is. */
.doc-stage{ flex:1; min-height:0; position:relative; }
.doc-page{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:contain;
}

/* On a narrow screen a whole A4 page scaled to fit the height is too small to
   read, so below this width the page runs full-bleed and the reader scrolls
   down it instead. */
@media (max-width:720px){
  .doc-stage{ position:static; overflow:auto; -webkit-overflow-scrolling:touch; }
  .doc-page{ position:static; width:100%; height:auto; object-fit:initial; display:block; }
}

.doc-nav{
  flex:none; display:flex; justify-content:center; gap:12px;
  padding-top:clamp(10px,1.6vw,16px);
}
.doc-nav[hidden]{ display:none; }
.doc-nav button{
  width:46px; height:46px; border-radius:50%;
  background:transparent; border:1px solid var(--hairline);
  color:var(--paper); font-size:22px; line-height:1; cursor:pointer;
  transition:border-color var(--dur-base) ease, color var(--dur-base) ease, opacity var(--dur-base) ease;
}
.doc-nav button:hover:not(:disabled){ border-color:var(--gold); color:var(--gold); }
.doc-nav button:disabled{ opacity:.3; cursor:default; }
.doc-ov button:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* ---------- a section that runs prose beside a document ----------
   Section 03 puts The Nine Questions alongside the text rather than under it.
   The heading spans the full width and the document sits in a second row
   beside the body copy, so it lines up with the first paragraph without any
   hand-tuned offset — an offset would only hold at one window width. */
.split{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  grid-template-areas:
    "head head"
    "body doc";
  column-gap:clamp(30px,5vw,76px);
  row-gap:clamp(18px,2vw,24px);
  align-items:start;
}
.split-head{ grid-area:head; }
.split-body{ grid-area:body; }
.doc-aside{  grid-area:doc; }
.split .prose{ max-width:none; }
.split-head > h2{ margin-top:0; }

.doc-aside{ margin-top:0; }
.doc-aside .doc-open{ width:100%; }

/* Below this the two columns would both be too narrow to read, so the
   document drops under the prose and returns to its own modest width. */
@media (max-width:820px){
  .split{
    grid-template-columns:1fr;
    grid-template-areas:"head" "body" "doc";
    row-gap:clamp(20px,4vw,30px);
  }
  .split .prose{ max-width:68ch; }
  .doc-aside .doc-open{ width:min(300px,62%); }
}

/* ---------- the reporting system diagram ----------
   Four tiers, each reading left to right: the documents that go in, an
   operator, and the documents that come out. Inputs are drawn small and
   outputs large so the compression is legible before a word is read.

   The inputs are a grid rather than a wrapping row, with the column count set
   per tier, because the rows carry meaning — the clinical reports sit on one
   line and the energy-balance reports on the next. Let them wrap freely and
   that grouping is lost. */
.rs{
  margin-top:clamp(26px,4vw,40px);
  display:grid; gap:clamp(14px,2vw,22px);
  --doc-in:clamp(48px,5.6vw,72px);
  --doc-out:clamp(84px,10vw,132px);
}

.rs-tier{
  background:var(--canvas);
  border:1px solid var(--hairline);
  border-radius:10px;
  padding:clamp(18px,2.6vw,30px) clamp(16px,2.4vw,28px);
}
.section:not(.alt) .rs-tier{ background:var(--surface); }

.rs-name{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.15rem,1rem + .6vw,1.5rem);
  letter-spacing:-.01em; color:var(--gold);
}
.rs-note{
  font-family:var(--text); font-size:13px; line-height:1.5;
  color:var(--muted); margin-top:5px;
}

/* the flow itself */
.rs-flow{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(12px,1.8vw,24px);
  margin-top:clamp(16px,2.2vw,24px);
}
.rs-in{
  display:grid;
  grid-template-columns:repeat(var(--cols,7), var(--doc-in));
  gap:clamp(5px,.7vw,9px);
}
.rs-out{ display:flex; flex-wrap:wrap; gap:clamp(7px,1vw,13px); }

/* a document: A4 proportions whether it holds a picture or a placeholder */
.rs-doc{
  aspect-ratio:1 / 1.414;
  border:1px solid var(--hairline); border-radius:4px;
  background:var(--surface);
  overflow:hidden; display:block;
}
.section:not(.alt) .rs-doc{ background:var(--canvas); }
.rs-doc img{ width:100%; height:100%; object-fit:cover; display:block; }
.rs-in  .rs-doc{ width:var(--doc-in); }
.rs-out .rs-doc{ width:var(--doc-out); }

/* the placeholder state, until each cover is supplied */
.rs-doc.ph{
  display:grid; align-content:center; gap:3px;
  padding:8px 7px; text-align:center;
  border-style:dashed;
}
.rs-doc.ph .d-name{
  font-family:var(--text); font-weight:600; line-height:1.25;
  font-size:clamp(6.5px,.6vw,8.5px); letter-spacing:.01em;
  color:var(--secondary);
}
.rs-doc.ph .d-ref{
  font-family:var(--text); font-size:clamp(6px,.52vw,7.5px);
  color:var(--faint);
}
.rs-out .rs-doc.ph .d-name{ font-size:clamp(9px,.85vw,12px); }
.rs-out .rs-doc.ph .d-ref{  font-size:clamp(8px,.7vw,10px); }

/* the report card is the one document that isn't navy in the originals */
.rs-doc.accent{ border-color:rgba(158,58,58,.85); }

/* operators, drawn rather than typed so they match the weight either side */
.rs-op{
  flex:none; position:relative;
  width:clamp(18px,2.2vw,30px); height:clamp(18px,2.2vw,30px);
}
.rs-op::before, .rs-op::after{
  content:""; position:absolute; left:0; right:0;
  height:clamp(3px,.32vw,5px); border-radius:2px;
  background:var(--secondary);
}
.rs-op.eq::before{ top:24%; }
.rs-op.eq::after{  bottom:24%; }
.rs-op.plus::before,
.rs-op.plus::after{ top:50%; transform:translateY(-50%); }
.rs-op.plus::after{ transform:translateY(-50%) rotate(90deg); }

/* an item that needs naming above it, like the phone screenshots */
.rs-item{ display:grid; gap:7px; justify-items:center; }
.rs-item .rs-cap{
  font-family:var(--text); font-size:clamp(9px,.8vw,11px);
  color:var(--muted); text-align:center;
}
.rs-doc.phone{ aspect-ratio:9 / 18.5; width:clamp(58px,7vw,96px); }

/* Below this the fixed column count stops fitting, so the inputs pack into
   whatever rows they can and the flow stacks instead of running across. */
@media (max-width:680px){
  .rs{ --doc-in:clamp(44px,13vw,62px); --doc-out:clamp(78px,26vw,116px); }
  .rs-flow{ flex-direction:column; align-items:flex-start; }
  /* width:100% matters more than it looks. A column flex with flex-start
     shrink-wraps its children, which leaves auto-fill without a definite
     width to divide — it resolved to a single column and stacked all seven
     records down the page. */
  .rs-in{
    width:100%;
    grid-template-columns:repeat(auto-fill, var(--doc-in));
  }
  .rs-out{ width:100%; }
  .rs-op{ margin-left:calc(var(--doc-in) / 2 - 9px); }
}

/* ---------- the hero, with a picture beside it ----------
   The portrait sits alongside the whole opening block — emblem, title and
   text — rather than beside the text alone, so the section reads as one
   introduction rather than a heading with an illustration bolted on. */
.hero-split{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(28px,5vw,68px);
  align-items:center;
}
.hero-split .prose{ max-width:none; }

/* A square cut-out reads smaller than an upright one at the same column
   width - it is simply shorter. The Diabetes Coach portrait is 0.851 and
   renders 515px tall; a square renders 438px in the same column, and the
   figure loses presence against a tall block of text. Squares get a more
   generous column so the two pages carry the same visual weight.

   Guarded to wide screens on purpose. Without the guard this rule's two
   classes out-specify the single-column mobile override below, and the hero
   stays in two columns at 375px with the portrait crushed to 112px. That is
   the same specificity trap that caught .book-price and the section
   numerals - a modifier class beating a media query it was never meant to
   touch. */
@media (min-width:821px){
  .hero-split.square-figure{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); }
}

.hero-figure{
  border-radius:10px; overflow:hidden;
  border:1px solid var(--hairline);
}
.hero-figure img{ width:100%; height:auto; display:block; }

/* A cut-out subject has no edges of its own, so a frame around it would draw
   a box around empty space. It stands directly on the canvas instead. */
.hero-figure.cutout{
  border:0; border-radius:0; overflow:visible;
  background:none;
}
/* The figure runs to the bottom of its source, so without this the coat ends
   in a hard horizontal cut with nothing to explain it — a framed picture can
   crop, a floating one can't. The last stretch fades to nothing instead.
   Browsers without mask support just show the hard edge, which is where we
   started, so there is nothing to fall back to. */
.hero-figure.cutout img{
  -webkit-mask-image:linear-gradient(to bottom, #000 82%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 82%, transparent 100%);
}

@media (max-width:820px){
  .hero-split{ grid-template-columns:1fr; gap:clamp(24px,5vw,34px); }
  .hero-split .prose{ max-width:68ch; }
  /* the picture leads on a narrow screen, where a wide one would push the
     text a whole screen down */
  .hero-figure{ order:-1; max-width:min(320px,72%); }
}

/* A framed picture in the split's right-hand column. Unlike .doc-fig this is
   a photograph rather than a document, so it carries no caption block and
   fills its column. */
.split-figure{
  grid-area:doc;
  align-self:stretch;   /* so the picture has room to travel — see below */
}
/* The frame sits on the image rather than the figure because the figure is
   stretched to the full height of the row. Where the text runs long — the
   four parts in section 02 leave nearly 400px of empty column — the picture
   follows the reader down instead of stranding at the top. Where the text is
   short there's nothing to travel and it simply sits still. */
.split-figure img{
  position:sticky; top:calc(var(--nav-h) + 22px);
  width:100%; height:auto; display:block;
  border:1px solid var(--hairline); border-radius:10px;
}
@media (max-width:820px){
  .split-figure{ max-width:min(420px,100%); }
  .split-figure img{ position:static; }
}

/* A section whose picture has not been made yet. Deliberately the same markup
   as .split, so adding the figure later is one element and no re-write: the
   grid drops to a single column and the body takes a reading measure rather
   than stretching across the width the picture would have occupied. */
.split--nofigure{
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:
    "head"
    "body";
}
.split--nofigure .split-body{ max-width:74ch; }

/* A button closing a run of prose. The paragraph wrapper keeps it in the flow
   of .prose's own spacing rather than needing a margin of its own. */
.prose-cta{ margin-top:1.6em; }
.prose-cta a{ text-decoration:none; }


/* The document viewer's trigger, as a line of text rather than a cover. Same
   behaviour, none of the card styling — js/doc.js binds every .doc-open, so a
   document already shown elsewhere on the page can be reopened from a
   sentence. */
.doc-open.doc-inline{
  display:inline; width:auto;
  border:0; border-radius:0; background:none; overflow:visible;
  color:var(--gold);
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--gold-soft);
  transition:text-decoration-color var(--dur-base) ease;
}
.doc-open.doc-inline:hover{ transform:none; text-decoration-color:var(--gold); }
.prose-link{ margin-top:1.6em; }

/* Where the text opens by pointing at the picture, the picture has to come
   first once the columns stack — otherwise "none of these" refers forward to
   something the reader hasn't reached yet. */
@media (max-width:820px){
  /* order has no effect here — .split places its children by named grid
     areas, and an area assignment beats it. The areas themselves reorder. */
  .split.figure-first{
    grid-template-areas:
      "head"
      "doc"
      "body";
  }
}

/* A document tile in the reporting diagram that opens. It takes js/doc.js's
   behaviour from .doc-open but not its card styling — .doc-open is sized for a
   figure in a text column, and these tiles carry their own width. a.rs-doc is
   one point more specific, so the tile's sizing wins. */
a.rs-doc{
  display:block;
  width:var(--doc-out);
  border-radius:4px;
  transition:transform var(--dur-slow) ease, border-color var(--dur-slow) ease;
}
.rs-in a.rs-doc{ width:var(--doc-in); }
a.rs-doc:hover{ transform:translateY(-3px); border-color:var(--gold); }
a.rs-doc:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* ===== Child Trauma Cover =================================================
   A comparison table of ten insurance products, and one card per product
   below 760px. The site's dark ground wins over the report's paper palette -
   the brief says so itself - so the semantic hues are re-cut to carry on
   near-black rather than lifted from the print document.

   Added as variables rather than written into the rules, per CLAUDE.md. They
   are the only colours on this page that are not already site tokens, and
   they exist because the data needs three states the site has no equivalent
   for: cover that survives the parent's death, cover that ends, and a term
   that is conditional or unverified.
   ------------------------------------------------------------------------ */
:root{
  --cc-good:#6fbf87;
  --cc-bad:#e0736c;
  --cc-flag:#d8a657;
  --cc-good-soft:rgba(111,191,135,.13);
  --cc-bad-soft:rgba(224,115,108,.13);
  --cc-flag-soft:rgba(216,166,87,.13);
}

.vh{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* The controls on this page ship with the `hidden` attribute and are revealed
   by child-cover.js, so that a filter which cannot filter is never shown. That
   only works if `hidden` actually hides: the browser's own [hidden]{display:
   none} is a UA rule, and ANY author rule setting display beats it. Three of
   these elements set their own display - .cc-filters is flex, .cc-toggle is
   grid, .cc-cards is block below 760px - so without this line every one of
   them would have ignored the attribute and shown anyway. */
.cc-filters[hidden], .cc-toggle[hidden], .cc-cards[hidden],
.cc-card[hidden], .cc-row[hidden], .cc-detailrow[hidden],
.cc-tablewrap[hidden], .cc-carddetail[hidden]{ display:none !important; }

.cc-sub{ color:var(--secondary); font-size:17px; margin:2px 0 18px; }
.cc-standfirst{ max-width:62ch; }
.cc-verified{
  display:inline-block; margin-top:20px; padding:7px 14px;
  border:1px solid var(--gold-line); border-radius:999px;
  background:var(--gold-soft); color:var(--gold-hi);
  font-size:13px; letter-spacing:.04em; text-transform:uppercase;
}
.cc-verified time{ font-variant-numeric:tabular-nums; }

.cc-findings{ display:grid; gap:28px; grid-template-columns:repeat(3,1fr); }
.cc-findings h2{ font-size:18px; color:var(--paper); margin:0 0 8px; }
.cc-findings p{ color:var(--muted); font-size:15px; line-height:1.65; margin:0; }
.cc-findings strong{ color:var(--paper); font-weight:500; }

.cc-h2{ font-size:24px; color:var(--paper); margin:0 0 10px; }
.cc-intro{ color:var(--muted); max-width:70ch; margin:0 0 22px; font-size:15px; }

.cc-filters{
  display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end;
  padding:16px; border:1px solid var(--hairline); border-radius:10px;
  background:var(--surface); margin-bottom:14px;
}
.cc-filter{ display:flex; flex-direction:column; gap:5px; }
.cc-filter label{
  font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted);
}
.cc-filter select{
  background:var(--canvas); color:var(--paper); font:inherit; font-size:14px;
  border:1px solid var(--hairline); border-radius:7px; padding:8px 10px; min-width:170px;
}
.cc-filter select:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.cc-filter--sort{ margin-left:auto; }

.cc-count{ color:var(--paper); font-size:14px; margin:0 0 2px; }
.cc-sorted{ color:var(--muted); font-size:13px; margin:0 0 16px; }
.cc-empty{
  color:var(--secondary); font-size:15px; max-width:62ch;
  border-left:2px solid var(--gold-line); padding-left:14px;
}

.cc-tablewrap{ border:1px solid var(--hairline); border-radius:10px; overflow:hidden; }
.cc-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.cc-table thead th{
  background:var(--surface); color:var(--secondary); text-align:left;
  font-weight:500; font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  padding:12px 12px; border-bottom:1px solid var(--hairline); vertical-align:bottom;
}
.cc-table thead th button{
  background:none; border:0; color:inherit; font:inherit; letter-spacing:inherit;
  text-transform:inherit; padding:0; cursor:pointer; display:inline-flex; gap:5px;
}
.cc-table thead th button:hover{ color:var(--gold); }
.cc-table thead th button:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.cc-table thead th[aria-sort="ascending"] button::after{ content:"\2191"; color:var(--gold); }
.cc-table thead th[aria-sort="descending"] button::after{ content:"\2193"; color:var(--gold); }
.cc-table tbody td, .cc-table tbody th{
  padding:12px; border-top:1px solid var(--hairline); vertical-align:top;
  color:var(--muted); font-weight:400; text-align:left;
}
.cc-num{ text-align:right !important; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cc-table thead th.cc-num button{ justify-content:flex-end; width:100%; }

.cc-toggle{
  background:none; border:0; padding:0; font:inherit; color:var(--paper);
  text-align:left; cursor:pointer; display:grid; gap:1px;
}
.cc-toggle:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.cc-insurer{ font-weight:600; color:var(--paper); }
.cc-productname{ color:var(--muted); font-size:12.5px; }
.cc-caret{
  position:absolute; margin-left:-13px; margin-top:4px; width:0; height:0;
  border-left:5px solid var(--gold); border-top:4px solid transparent;
  border-bottom:4px solid transparent; transition:transform var(--dur-fast) ease;
}
.cc-toggle[aria-expanded="true"] .cc-caret{ transform:rotate(90deg); }
.cc-product{ position:relative; padding-left:26px !important; min-width:150px; }
.cc-closed{
  display:inline-block; margin-top:4px; font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--cc-flag);
}
.cc-note{ display:block; margin-top:5px; font-size:12.5px; color:var(--muted); }

.cc-chip{
  display:inline-block; padding:3px 9px; border-radius:999px;
  font-size:11.5px; letter-spacing:.03em; white-space:nowrap; border:1px solid;
}
.cc-chip--good{ color:var(--cc-good); background:var(--cc-good-soft); border-color:var(--cc-good); }
.cc-chip--bad{ color:var(--cc-bad); background:var(--cc-bad-soft); border-color:var(--cc-bad); }
.cc-chip--flag{ color:var(--cc-flag); background:var(--cc-flag-soft); border-color:var(--cc-flag); }

.cc-detailrow td{ background:var(--surface); }
.cc-dl{ display:grid; grid-template-columns:auto 1fr; gap:6px 18px; margin:0 0 12px; }
.cc-dl dt{ color:var(--secondary); font-size:12px; letter-spacing:.05em; text-transform:uppercase; }
.cc-dl dd{ margin:0; color:var(--muted); font-size:13.5px; }
.cc-source{ margin:0; font-size:12.5px; color:var(--faint); line-height:1.6; }
.cc-source-label{
  color:var(--secondary); text-transform:uppercase; letter-spacing:.06em;
  font-size:11px; margin-right:6px;
}

.cc-conf{
  display:inline-block; margin-left:6px; padding:2px 8px; border-radius:999px;
  font-size:11px; letter-spacing:.04em; border:1px solid;
}
.cc-conf--confirmed{ color:var(--cc-good); border-color:var(--cc-good); }
.cc-conf--inferred{ color:var(--cc-flag); border-color:var(--cc-flag); }
.cc-conf--verify{ color:var(--cc-flag); border-color:var(--cc-flag); }
.cc-conf--unknown{ color:var(--muted); border-color:var(--hairline); }

.cc-key{ margin-top:30px; padding:20px; border:1px solid var(--hairline); border-radius:10px; }
.cc-key h3{ font-size:14px; color:var(--paper); margin:0 0 14px; }
.cc-key dl{ display:grid; grid-template-columns:auto 1fr; gap:9px 16px; margin:0; }
.cc-key dt{ margin:0; }
.cc-key dd{ margin:0; color:var(--muted); font-size:13.5px; }

.cc-cards{ display:none; list-style:none; padding:0; margin:0; }
.cc-card{
  border:1px solid var(--hairline); border-radius:10px; padding:16px;
  background:var(--surface); margin-bottom:12px;
}
.cc-card-head{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.cc-card-head h3{ font-size:16px; color:var(--paper); margin:0 0 10px; display:grid; gap:2px; }
.cc-card-head h3 span{ font-size:12.5px; color:var(--muted); font-weight:400; }
.cc-card-chip{ margin:0 0 12px; }
.cc-toggle--card{
  margin-top:12px; color:var(--gold); font-size:13px;
  border-bottom:1px solid var(--gold-line); padding-bottom:2px;
}
.cc-carddetail{ margin-top:14px; padding-top:14px; border-top:1px solid var(--hairline); }

.cc-method{ max-width:70ch; }
.cc-disclaimer{
  border-left:2px solid var(--gold-line); padding-left:14px;
  color:var(--secondary); font-size:14px;
}
/* The download sits under the cover, inside the figure, so it stays with the
   document when the split collapses to one column. Not in .prose, so it needs
   its own spacing rather than inheriting a paragraph's. */
.cc-download{ margin:16px 0 0; }

.cc-backlink{ margin-top:24px; }
.cc-backlink a{ color:var(--gold); font-size:14px; }

@media (max-width:1100px){
  .cc-findings{ grid-template-columns:1fr; gap:22px; }
}
@media (max-width:760px){
  /* Nine columns do not become a drag-sideways table on a phone. They become
     ten cards, carrying the same fields and not a reduced subset. */
  .cc-tablewrap{ display:none; }
  .cc-cards{ display:block; }
  .cc-filters{ gap:12px; }
  .cc-filter{ flex:1 1 100%; }
  .cc-filter select{ width:100%; }
  .cc-filter--sort{ margin-left:0; }
  .cc-dl{ grid-template-columns:1fr; gap:2px 0; }
  .cc-dl dd{ margin-bottom:9px; }
  .cc-key dl{ grid-template-columns:1fr; }
  .cc-key dd{ margin-bottom:8px; }
}