/* ==========================================================================
   SUBPAGE — DOSSIER
   Layers on top of broadcast-landing.css. Load BOTH, this one second.
   --------------------------------------------------------------------------
   WHY THIS FILE EXISTS. The landing page is a pitch scroller: a viewport hero,
   84px set-piece rhythm, section eyebrows that mark movements in a story, and
   the CTA repeated three times. That is right for someone who arrived to be
   convinced. It is wrong for someone who arrived from a search with a question,
   and the first subpage built by copying it inherited all of it (founder,
   2026-08-28: "I don't like how this just matches the landing page").

   The BRAND still matches, and should. Same tokens, same Libre Franklin, same
   nav, same footer, same buttons, all inherited from broadcast-landing.css and
   deliberately not redefined here. What changes is the FORMAT: a subpage is a
   document Hinru produced, not a pitch.

   EVERY RULE BELOW IS PORTED, NOT INVENTED (Rule 21). The grammar is the app's
   own artifact surface, read from shipped code rather than from the pattern doc,
   which is stale on this exact point: surface-patterns-vocabulary.md §3 still
   specifies a Georgia/Crimson Pro serif body, and serif was retired by OD-754.
   The app is all Libre Franklin. Sources, in components/artifacts/:
     - ArtifactDocument.tsx:179  the type stamp, mono 8.5px/700/uppercase/.07em
     - ArtifactDocument.tsx:201  the meta line, mono 10px/uppercase/.06em, dim,
                                 items divided by a border-coloured character
     - ArtifactDocument.tsx:220  the Kept stamp, border at 50% + tint at 10%,
                                 which is where "outlined, not filled" is real
     - ArtifactDocument.tsx:279  section head, border-b + pb-4
     - ArtifactDocument.tsx:313  the document card, rounded + border + bg-card
     - ArtifactDocument.tsx:340  the foot, border-t + mono chips + signature
   BRAND-RULES.md: outlined not filled, one solid primary action per surface.

   NO GLOWING DOTS, AND TICKS ONLY WHERE THEY MEAN SOMETHING. The first cut of
   this file had no marks at all, on the grounds that OD-1247 calls for narrow
   faceted ticks with no glow while the landing's .sig is a glowing circle used
   decoratively throughout, and a subpage template is the wrong place to settle
   a brand conflict that size. It said that if the question were reopened, this
   file would gain marks ON PURPOSE rather than by inheritance. That is what
   happened (founder, 2026-08-28, "can we bring some of our colours in here?").
   So: .tick, faceted and glowless per OD-1247, and it appears on exactly two
   rows, both of which are ABOUT the thing the colour means. Six room hues where
   the page claims six staff, gold where the page claims a kept record. Nowhere
   decorative. The landing's glowing .sig is still not used here.

   COLOUR POLICY FOR SUBPAGES, since this is where it now lives:
   - --paper is the document ink. Structure is paper (masthead, titles, section
     headings, table row labels); content stays --body and --ink. Reserved for
     non-app surfaces by broadcast-reskin-change-map.md, which is exactly what a
     marketing page is, and unused anywhere until now.
   - Room hues are LOCKED to wayfinding (BRAND-RULES). They may appear when the
     surface genuinely refers to the rooms, never to warm a page up.
   - Gold stamps the kept record and nothing else.
   ========================================================================== */

/* ---------- top nav links ------------------------------------------------ */
/* Subpages carry wayfinding across the top; the LANDING deliberately does not.
   A reader on a subpage is browsing, and browsing is what a nav is for. A reader
   on the landing is being pitched, and OD-1427 already cut a smaller version of
   this from that page: the hero's "Watch it happen" cue was removed for being a
   skip link past Proof, which OD-1256 makes the acquisition lead. Nav links to
   subpages would be a bigger skip link than the one that was cut.
   Sits between the lockup and the ghost CTA in the existing .nav flex row, so it
   inherits the landing's nav chrome and adds no new furniture. The current page
   is marked with aria-current, which is the accessible signal AND the styling
   hook, rather than a class that only paints. */
.navlinks{ display:flex; align-items:center; gap:22px; }
.navlink{ font-size:13px; font-weight:600; color:var(--dim); text-decoration:none;
  white-space:nowrap; border-bottom:1px solid transparent; padding-bottom:2px;
  transition:color .18s ease, border-color .18s ease; }
.navlink:hover{ color:var(--body); }
.navlink[aria-current="page"]{ color:var(--ink);
  border-bottom-color:color-mix(in srgb,var(--id) 55%,var(--line)); }
/* Below 640 the row wraps rather than hiding the links. Dropping them on a phone
   would remove the wayfinding exactly where a small screen needs it most, and
   dropping the CTA instead would cost the conversion. Both stay; the links take
   a second row. */
@media(max-width:760px){ .nav .lk-ed, .nav .lk-pipe{ display:none; } .navlinks{ gap:16px; } }
@media(max-width:640px){
  .nav{ flex-wrap:wrap; row-gap:13px; }
  .navlinks{ order:3; width:100%; gap:20px; }
}

/* ---------- head band --------------------------------------------------- */
/* Replaces .hero. Left-aligned, no viewport height, no display type. The mark
   and label read as a masthead, the way the artifact header carries the club. */
.dsr-head{ max-width:var(--maxw); margin:0 auto; padding:46px 32px 0; }
.dsr-band{ display:flex; align-items:center; gap:10px; padding-bottom:15px; border-bottom:1px solid var(--line); }
.dsr-mark{ display:block; width:21px; height:21px; }
.dsr-club{ font-size:13px; font-weight:700; color:var(--ink); letter-spacing:.01em; }
.dsr-club span{ color:var(--dim); font-weight:600; }

/* The document-kind stamp. Outlined + 10% tint, never a fill. The tint is a
   solid color-mix against the page ground, not a low-alpha fill: cobalt at low
   alpha over this background goes muddy and reads as a different hue. */
.dsr-type{ margin-left:auto; font-family:"SF Mono","SFMono-Regular",Menlo,Monaco,Consolas,monospace;
  font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  color:var(--id-soft); border:1px solid color-mix(in srgb,var(--id) 50%,var(--line));
  background:color-mix(in srgb,var(--id) 10%,var(--bg)); border-radius:7px; padding:5px 9px; white-space:nowrap; }

.dsr-title{ font-family:"Libre Franklin",sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size:clamp(28px,4vw,40px); line-height:1.06; color:var(--ink); max-width:22ch;
  margin:26px 0 0; text-wrap:balance; }
.dsr-stand{ font-size:17px; line-height:1.6; color:var(--body); max-width:58ch; margin-top:16px; text-wrap:pretty; }

/* Meta line. Mono, dim, divided by a border-coloured middot. Middot not em dash:
   BRAND-RULES bans em dashes in copy and names the middot as a replacement. */
.dsr-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:22px;
  font-family:"SF Mono","SFMono-Regular",Menlo,Monaco,Consolas,monospace;
  font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--dim); }
.dsr-meta i{ color:var(--line2); font-style:normal; }

/* ---------- body -------------------------------------------------------- */
/* 52px rhythm against the landing's 84px. A document breathes, it does not
   stage. The h2 rule is the artifact's section head: border-b, pb-4. */
.dsr-body{ max-width:var(--maxw); margin:0 auto; padding:0 32px 8px; }
.dsr-sec{ padding-top:52px; }
/* The rule spans the SECTION, not the heading. Ported faithfully from
   ArtifactDocument.tsx:279, where border-b + pb-4 sit on the section-head
   container rather than on the text: a rule that stops at the end of the words
   reads as an underline, and two headings of different lengths then draw two
   different-length rules, which reads as an accident. */
.dsr-sechead{ padding-bottom:15px; border-bottom:1px solid var(--line); margin-bottom:22px; }
.dsr-sechead > h2{ font-family:"Libre Franklin",sans-serif; font-weight:800; letter-spacing:-.015em;
  font-size:clamp(20px,2.4vw,26px); line-height:1.15; color:var(--ink); max-width:28ch;
  margin:0; text-wrap:balance; }
.dsr-p{ font-size:16px; line-height:1.7; color:var(--body); max-width:68ch; margin:0; }
.dsr-p + .dsr-p{ margin-top:18px; }
.dsr-note{ font-size:13px; line-height:1.6; color:var(--dim); max-width:68ch; margin-top:16px; }

/* Speaker attribution. Colour here is IDENTITY, not emphasis, which is why it
   does not trip the BRAND-RULES ban on contrast-coloured emphasis words. Same
   grammar as .pane-name on the landing: --id-soft is us, ink is the other side. */
.dsr-say{ font-size:16px; line-height:1.7; color:var(--body); max-width:66ch; margin:0; }
.dsr-say + .dsr-say{ margin-top:18px; }
.dsr-say b{ font-weight:700; }
.dsr-say-cold b{ color:var(--ink); }
.dsr-say-warm b{ color:var(--id-soft); }

/* ---------- sub-heading inside a section --------------------------------- */
/* The session walk has two movements (the match week, the window) under one
   section head. Mono + caps so it reads as a label rather than a second heading,
   which keeps the document outline honest: these are not h3s competing with the
   section's h2. */
.dsr-sub{ font-family:"SF Mono","SFMono-Regular",Menlo,Monaco,Consolas,monospace;
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.09em;
  color:var(--dim); margin:38px 0 14px; }
.dsr-sec > .dsr-sub:first-of-type{ margin-top:26px; }

/* ---------- comparison table -------------------------------------------- */
/* The doc-panel data surface: outlined card, hairline row rules, last row bare. */
.cmp{ width:100%; border-collapse:separate; border-spacing:0; margin-top:4px;
  border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.cmp th, .cmp td{ text-align:left; padding:18px 20px; border-bottom:1px solid var(--line);
  vertical-align:top; font-size:15px; line-height:1.5; }
.cmp thead th{ background:var(--bg2); font-family:"SF Mono","SFMono-Regular",Menlo,Monaco,Consolas,monospace;
  font-weight:700; letter-spacing:.07em; font-size:9.5px; text-transform:uppercase; color:var(--dim);
  padding-top:13px; padding-bottom:13px; }
.cmp thead th.you{ color:var(--id-soft); }
.cmp tbody th{ font-weight:700; color:var(--ink); background:var(--bg2); width:32%; }
.cmp td{ color:var(--body); }
.cmp td.you{ color:var(--ink); }
.cmp tr:last-child th, .cmp tr:last-child td{ border-bottom:none; }
@media(max-width:640px){
  .cmp th, .cmp td{ padding:13px 12px; font-size:13.5px; }
  .cmp tbody th{ width:40%; }
}

/* ---------- channel marks ------------------------------------------------ */
/* THE SITE'S CIRCLE, not a bespoke mark. An earlier cut of this file used narrow
   vertical ticks, reading OD-1247's "narrow faceted ticks with no glow" as
   covering channel markers. That was an over-application: OD-1247 keeps circles
   valid where they are functional, and the landing has marked channels with the
   glowing .sig dot since it shipped. Inventing a second marker for the same job
   on a sibling page made the site less consistent, not more considered. Founder,
   looking at the rendered page: "we don't use hatch marks, we use the circles."
   So this reuses .sig from broadcast-landing.css unchanged and only sizes it for
   a table cell. Do not re-invent a mark here. */
.ticks{ display:inline-flex; align-items:center; gap:7px; margin-right:11px; vertical-align:-1px; }
.ticks .sig{ width:8px; height:8px; }

/* ---------- close + related --------------------------------------------- */
/* ONE solid action per surface, and it lives here, at the end. The nav keeps a
   ghost. The landing's pattern of a solid CTA in the hero, again mid-page and
   again at the close is pitch furniture and does not come across. */
.dsr-cta{ margin-top:66px; border-top:1px solid var(--line); padding-top:36px;
  display:flex; align-items:center; gap:18px 26px; flex-wrap:wrap; }
.dsr-cta-t{ font-family:"Libre Franklin",sans-serif; font-weight:800; letter-spacing:-.015em;
  font-size:clamp(19px,2.2vw,24px); line-height:1.2; color:var(--ink); margin:0; max-width:24ch; }
.dsr-cta .free{ margin-top:10px; }

/* The related strip is STRUCTURAL, not decorative. A subpage that ships with no
   inbound link is invisible to a reader and close to invisible to a crawler,
   which is exactly what happened to the first one: it was committed reachable
   only by typing the URL. Every subpage carries this, so the next one cannot
   ship orphaned by forgetting. */
.dsr-rel{ margin-top:56px; border-top:1px solid var(--line); padding-top:26px; }
.dsr-rel-h{ font-family:"SF Mono","SFMono-Regular",Menlo,Monaco,Consolas,monospace;
  font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--dim); margin:0 0 15px; }
.dsr-links{ display:flex; flex-wrap:wrap; gap:10px; }
.dsr-link{ display:inline-flex; align-items:center; border:1px solid var(--line2); border-radius:9px;
  padding:11px 15px; text-decoration:none; color:var(--body); font-size:14px; font-weight:600;
  transition:border-color .18s ease, color .18s ease; }
.dsr-link:hover{ border-color:var(--dim); color:var(--ink); }

/* ---------- responsive -------------------------------------------------- */
@media(max-width:640px){
  .dsr-head{ padding:32px 20px 0; }
  .dsr-body{ padding:0 20px 8px; }
  .dsr-sec{ padding-top:42px; }
  .dsr-band{ flex-wrap:wrap; gap:8px; }
  .dsr-type{ margin-left:0; }
}