/* ==========================================================================
   page-light.css — brings the sub-pages onto THE DOCKET palette used by the
   home page (04/09/2026). Was steel grey; now warm docket stock, carbon-blue
   labels and a warmer near-black ink. This is a STYLE change only: every
   component keeps its original shape, radius, shadow and size — Adam,
   04/09: "Don't change the original grammar. It's a style change."

   Loaded AFTER each page's own <style> block, so it wins on the cascade
   without any of them being rewritten. Almost all of the work is done by
   redefining the custom properties: the pages already draw everything through
   var(--text), var(--panel) and friends, so changing the tokens repaints them.
   The rules further down only exist for the handful of places where a colour
   was hardcoded to #fff or a white-on-dark rgba.

   Rhythm follows the home page: dark nav, light page, dark footer. The nav
   here is dark at ALL times, not just when scrolled - on the home page it
   opens over a dark hero, but these pages start light, and a transparent nav
   would put a white logo on the paper stock.
   ========================================================================== */

:root {
  --paper:      #f4f1ea;   /* the stock */
  --paper-2:    #eae5da;   /* the carbon copy underneath */
  --rule:       #d8d1c2;   /* printed hairline */
  --rule-2:     #bfb6a3;   /* heavier printed rule */
  --carbon:     #2f4a7a;   /* the blue the form is printed in — 7.4:1 */
  --accent-ink: #b8390c;   /* orange dark enough to be text on paper — 5.6:1 */

  --bg:         var(--paper);
  --bg-2:       var(--paper-2);
  --panel:      #fdfcf9;
  --panel-2:    #fdfcf9;
  --line:       var(--rule);
  --line-2:     var(--rule-2);
  --text:       #141210;
  --ink-2:      #5a5245;
  --muted:      #5f5749;   /* 5.8:1 on the sheet */
  --muted-2:    #6b6355;
  --tint:       var(--paper-2);
  --field:      #fdfcf9;
  --orange:     #ff5a1f;
  --orange-2:   #ff8a4c;
  --orange-ink: var(--accent-ink);
  --sheet:      #fdfcf9;   /* the top sheet */
}

/* ---- page ground: warm stock with a drawn tooth, not a tech grid ------- */
body { background: var(--bg); color: var(--text); }
body::before {
  background:
    radial-gradient(58vw 52vw at 84% -6%, rgba(255,90,31,0.045), transparent 62%),
    var(--bg);
}
body::after {
  opacity: .5;
  background-image:
    repeating-linear-gradient(0deg,  rgba(20,18,16,.022) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(20,18,16,.014) 0 1px, transparent 1px 4px);
  background-size: auto;
  -webkit-mask-image: none; mask-image: none;
}

/* ---- the dark token set, for the regions that stay dark ----------------- */
nav, .bar, footer, .mobile-menu, .end-cta .inner {
  --panel:      rgba(255,255,255,0.035);
  --panel-2:    rgba(255,255,255,0.06);
  --line:       rgba(255,255,255,0.10);
  --line-2:     rgba(255,255,255,0.18);
  --text:       #eef1f6;
  --ink-2:      #c8cedb;
  --muted:      #8b94a6;
  --muted-2:    #7a8395;
  --tint:       rgba(255,255,255,0.03);
  --field:      rgba(255,255,255,0.04);
  --orange-ink: #ff5a1f;
  color: var(--text);
}

/* ---- nav: dark at all times -------------------------------------------- */
nav, .bar {
  background: rgba(5,5,7,0.92);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
          backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
nav.scrolled { background: rgba(5,5,7,0.94); border-bottom-color: rgba(255,255,255,0.14); }
.menu-toggle { color: #eef1f6; }
.bar .brand { color: #fff; }
.bar .back { color: #8b94a6; }
.bar .back:hover { color: #fff; }

/* ---- article head sits on the stock, in dark ink ------------------------
   The kicker is the one label that changes colour: carbon blue, the same
   field-label blue the home page uses on its paper bands. ---------------- */
.article-head h1, .idx-hero h1 { color: var(--text); }
.a-sub, .idx-hero p.lead { color: var(--ink-2); }
.a-meta, .crumbs { color: var(--muted); }
.a-kicker { color: var(--carbon); }
.a-kicker::before { background: var(--carbon); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--text); }

/* ---- the body becomes a printed sheet lying on the stock ---------------- */
.article-body {
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 44px 46px 40px;
  margin-top: 34px;
  box-shadow: 0 26px 60px -38px rgba(10,12,17,0.34);
}
@media (max-width: 780px) {
  .article-body {
    padding: 30px 24px 28px;
    border-radius: 16px;
    margin-left: 16px;
    margin-right: 16px;
  }
}

/* The sheet spans the full 720px column, so the sections below it need their
   own 28px gutter removed or their cards sit inset from the sheet's edge. */
.end-cta, .faq, .related { padding-left: 0; padding-right: 0; }
@media (max-width: 780px) {
  .end-cta, .faq, .related { padding-left: 16px; padding-right: 16px; }
}
.article-body p,
.article-body li          { color: var(--ink-2); }
.article-body h2,
.article-body h3          { color: var(--text); }
.article-body strong      { color: var(--text); }
.article-body a           { color: var(--orange-ink); border-bottom-color: rgba(156,47,8,0.30); }
.article-body a:hover     { color: var(--orange); border-bottom-color: var(--orange); }
.article-body blockquote  { background: var(--tint); border-left-color: var(--orange); }
.article-body blockquote p{ color: var(--text); }
.article-body hr          { border-top-color: var(--line); }
.article-body ol li::before {
  background: rgba(255,90,31,0.12);
  border-color: rgba(255,90,31,0.45);
  color: var(--orange-ink);
}

/* ---- FAQ and related: paper cards on the stock -------------------------- */
.faq-item {
  background: var(--sheet);
  border-color: var(--line);
  box-shadow: 0 14px 34px -30px rgba(10,12,17,0.4);
}
.faq-item summary { color: var(--text); }
.faq-item .ans    { color: var(--ink-2); }

.related a {
  background: var(--sheet);
  border-color: var(--line);
  box-shadow: 0 14px 34px -30px rgba(10,12,17,0.4);
}
.related a:hover  { border-color: rgba(255,90,31,0.45); background: var(--sheet); }
.related a .t     { color: var(--text); }
.related a .r     { color: var(--orange-ink); }

/* ---- articles index cards ---------------------------------------------- */
.art-card {
  background: var(--sheet);
  border-color: var(--line);
  box-shadow: 0 18px 44px -34px rgba(10,12,17,0.38);
}
.art-card:hover     { background: var(--sheet); border-color: rgba(255,90,31,0.45); }
.art-card h2        { color: var(--text); }
.art-card p         { color: var(--ink-2); }
.art-card .meta     { color: var(--muted); }
.art-card .meta .tag{ color: var(--orange-ink); }   /* cyan is unreadable on white */
.art-card .read     { color: var(--orange-ink); }

/* ---- buttons: the ghost was white-on-dark ------------------------------- */
.btn-ghost {
  background: var(--sheet);
  color: var(--text);
  border-color: var(--line-2);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
.btn-ghost:hover { background: var(--tint); border-color: var(--orange); }
nav .btn-ghost, .end-cta .btn-ghost {
  background: rgba(255,255,255,0.06);
  color: #eef1f6;
  border-color: rgba(255,255,255,0.18);
}
nav .btn-ghost:hover, .end-cta .btn-ghost:hover { background: rgba(255,255,255,0.12); }

/* ---- closing CTA keeps the original dark treatment ---------------------- */
.end-cta .inner {
  background: linear-gradient(180deg, rgba(255,90,31,0.12), rgba(255,255,255,0.035) 55%), #050507;
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 30px 70px -40px rgba(10,12,17,0.55);
}
.end-cta h3 { color: #eef1f6; }
.end-cta p  { color: #8b94a6; }

/* ---- footer stays dark, and needs its own ground on a light page -------- */
footer {
  background: #050507;
  border-top: none;
  position: relative;
}
footer .foot-bot { border-top-color: rgba(255,255,255,0.10); }

/* ---- legal pages (privacy, terms): paper sheet, dark bar and footer -----
   Scoped by the .sheet class, NOT by `body > .wrap` - the articles index
   also has a .wrap as a direct child of body, and it was picking up the
   sheet as a slab behind the card grid. */
.sheet {
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: 20px;
  margin-top: 40px;
  margin-bottom: 40px;
  padding: 46px 44px 60px;
  box-shadow: 0 26px 60px -38px rgba(10,12,17,0.34);
}
/* 880px, not 780: the legal wrap is a wider 820px column, so it reaches the
   screen edge sooner than the article sheet does. */
@media (max-width: 880px) {
  .sheet { padding: 32px 22px 40px; border-radius: 16px; margin-left: 14px; margin-right: 14px; }
}
.sheet p,
.sheet li     { color: var(--ink-2); }
.sheet h2     { color: var(--text); }
.sheet a      { color: var(--orange-ink); }
.sheet .updated { color: var(--muted); }
.sheet .note  { background: var(--tint); border-color: var(--line); color: var(--muted); }
/* ---- case-study fact strip and pipeline: colour only, shapes unchanged -- */
.fact, .stage   { background: var(--sheet); border-color: var(--line); }
.fact .k, .stage .s { color: var(--carbon); }
.fact .v        { color: var(--text); }
.stage .d       { color: var(--ink-2); }

/* ---- focus stays visible on the lighter ground -------------------------- */
.article-body a:focus-visible, .art-card:focus-visible, .related a:focus-visible,
.faq-item summary:focus-visible, .sheet a:focus-visible, .crumbs a:focus-visible {
  outline: 2px solid var(--accent-ink); outline-offset: 3px;
}

footer .foot        { color: #8b94a6; }
footer .foot a      { color: #8b94a6; }
footer .foot a:hover{ color: #fff; }

/* ==========================================================================
   Reading size (03/09/2026). Adam: "the fonts way too big and you have to
   scroll down". The article pages were set at 17.5px/1.75 with a 150px head
   and 32px section titles, so the first screen was a heading and one
   paragraph. Brought down to a normal reading size and tightened the head so
   the article starts above the fold. Lives here, once, rather than in each
   page's inline stylesheet - one fact, one home.
   ========================================================================== */
.article-head            { padding-top: 104px; }
.article-head .crumbs    { margin-bottom: 14px; }
.article-head .a-kicker  { margin-bottom: 12px; font-size: 11.5px; }
.article-head h1         { font-size: clamp(26px, 3.4vw, 36px); line-height: 1.12; }
.article-head .a-meta    { margin-top: 14px; font-size: 13px; }

.article-body            { margin-top: 22px; padding: 34px 40px 30px; }
.article-body p          { font-size: 15.5px; line-height: 1.65; margin: 15px 0; }
.article-body li         { font-size: 15.5px; line-height: 1.6; margin: 8px 0; }
.article-body ul,
.article-body ol         { margin: 14px 0; }
.article-body h2         { font-size: clamp(20px, 2.4vw, 24px); margin: 36px 0 6px; }
.article-body h3         { font-size: 17px; margin: 24px 0 4px; }
.article-body blockquote { margin: 18px 0; padding: 14px 18px; }
.article-body hr         { margin: 32px 0; }
@media (max-width: 780px) {
  .article-head          { padding-top: 92px; }
  .article-body          { padding: 24px 20px 22px; }
}

/* Case-study fact strip and pipeline follow the same size. */
.facts                   { margin-top: 22px; }
.fact .v                 { font-size: 14px; }
.stage .d                { font-size: 13px; }

.end-cta .inner          { padding: 28px 28px; }
.end-cta h3              { font-size: 21px; }
.end-cta p               { font-size: 15px; }
.faq                     { margin-top: 44px; }
.faq h2                  { font-size: clamp(20px, 2.4vw, 24px); margin-bottom: 18px; }
.faq-item summary        { padding: 15px 18px; font-size: 15.5px; }
.faq-item .ans           { font-size: 15px; padding: 0 18px 15px; }
.related                 { margin-top: 44px; }
.related h2              { font-size: 19px; }
.related a .t            { font-size: 15px; }

/* Insights index: the hero was a 72px headline with 168px above it. */
.idx-hero                { padding-top: 110px; padding-bottom: 22px; }
.idx-hero h1             { font-size: clamp(30px, 4.2vw, 46px); }
.idx-hero p.lead         { font-size: 16px; margin-top: 14px; }
.art-grid                { padding-top: 26px; }
.art-card h2             { font-size: 18px; }