/* ═══ DIRECTION B — SHARED LAYER ═══════════════════════════════════════════
   Everything the subpages have in common with the homepage: tokens, header,
   footer, titling, burns, and the mobile menu. Page-specific work (the hero
   plate, work cards, the contact panel) stays on the homepage.
   Loaded AFTER /system.css so it can answer the September !important rules.
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --b-ground:#090B0E; --b-lift:#101319; --b-type:#F4F1EA; --b-body:#C8C1B3;
  --b-meta:#B3AB9E; --b-acc:#FF8C42; --b-stain:#A33A12;
  --b-rule:rgba(244,241,234,0.14); --b-fx:0.62;
}
html, body { background: var(--b-ground); }
body { color: var(--b-body); }
.band { background: var(--b-lift); }

/* ---- titling: accent at rest, lift on rollover ---- */
.eyebrow, .label, .card-cat, [class*="-label"], [class*="-cat"] { color: var(--b-acc) !important; }
h1, h2, h3, .display, [class*="-headline"], [class*="-heading"], [class*="-title"] {
  color: var(--b-acc) !important;
  transition: color .4s ease, text-shadow .4s ease;
}
h1 em, h2 em, h3 em, [class*="-headline"] em { color: var(--b-type) !important; }
h1:hover, h2:hover, h3:hover, [class*="-headline"]:hover, [class*="-heading"]:hover {
  color: #FFB07A !important;
  text-shadow: 0 0 28px color-mix(in srgb, var(--b-acc) 44%, transparent),
               0 0 62px color-mix(in srgb, var(--b-acc) 22%, transparent);
}
p, li, dd, blockquote { color: var(--b-body); }
strong, b { color: var(--b-type); }
a { color: var(--b-acc); }

/* ---- header: glass over the page, links grey, Ask Auteur the exception ---- */
nav { background: transparent; border-bottom: 1px solid transparent;
      transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease; }
nav.is-stuck { background: color-mix(in srgb, var(--b-ground) 72%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--b-rule); }
nav .nav-links > li > a, nav .nav-lang, nav .nav-lang a {
  color: var(--b-body) !important; transition: color .25s ease; }
nav .nav-links > li > a:hover, nav .nav-links > li > a:focus-visible,
nav .nav-lang a:hover { color: var(--b-acc) !important; }
nav .nav-lang .current { color: var(--b-type) !important; }
nav .nav-lang .sep { color: var(--b-meta) !important; }
nav .nav-ask .nav-ask-label { color: var(--b-acc) !important; }
nav .nav-ask:hover .nav-ask-label { color: #FFB07A !important; }
nav .nav-logo { margin-left: -22px; }
nav .nav-wordmark { opacity: .82; transition: opacity .3s ease; }
nav .nav-logo:hover .nav-wordmark { opacity: 1; }
nav .nav-toggle span { background: var(--b-type); }

/* the agent orb: concentric rings and a pulse (see the homepage note) */
nav .nav-ask-orb {
  position: relative; width: 20px; height: 20px; border-radius: 50%;
  background: none !important; box-shadow: none !important;
  background-image: radial-gradient(circle at 50% 50%,
    #FF8C42 0 2.6px, transparent 2.6px 4.6px,
    rgba(255,140,66,.55) 4.6px 5.5px, transparent 5.5px 7.6px,
    rgba(255,140,66,.28) 7.6px 8.4px, transparent 8.4px) !important; }
nav .nav-ask-orb::before, nav .nav-ask-orb::after {
  content:""; position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(255,140,66,.6) !important; box-shadow:none !important;
  background:none !important; opacity:0;
  animation: ask-ping 3s cubic-bezier(.22,.72,.16,1) infinite; }
nav .nav-ask-orb::after { animation-delay: 1.5s; }
@keyframes ask-ping {
  0% { transform: scale(.42); opacity:0; } 12% { opacity:.75; }
  100% { transform: scale(2.1); opacity:0; } }

/* ---- mobile menu: a surface you read, not a bar you look past ---- */
nav:has(.nav-toggle[aria-expanded="true"]) {
  isolation: isolate; background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important; }
nav:has(.nav-toggle[aria-expanded="true"])::after {
  content:""; position:fixed; top:0; left:0; width:100vw; height:100dvh;
  background: color-mix(in srgb, var(--b-ground) 97%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(125%);
  backdrop-filter: blur(20px) saturate(125%);
  z-index:-1; pointer-events:none; }
nav:has(.nav-toggle[aria-expanded="true"]) .nav-links > li > a { color: var(--b-type) !important; }
nav:has(.nav-toggle[aria-expanded="true"]) .nav-lang .current { color: var(--b-acc) !important; }

/* ---- footer ---- */
footer { background: var(--b-ground); color: var(--b-meta);
  border-top: 1px solid var(--b-rule); padding-top: 3.25rem; padding-bottom: 3.25rem; }
footer a { color: var(--b-body); }
footer a:hover { color: var(--b-acc); }

/* ---- burns: background-image on the section, alternating sides ----
   No position/overflow/isolation is added to any section - that is what broke
   the homepage twice. Profile is the measured one: 0.60 at the frame corner,
   0.26 across the near third, a long tail, which holds 4.5:1 for every colour
   in the system once captions sit at #B3AB9E. */
section:nth-of-type(odd) {
  background-image: radial-gradient(185% 150% at 100% 0%,
    rgba(255,140,66,.60) 0%, rgba(255,140,66,.38) 6%, rgba(255,140,66,.26) 14%,
    rgba(255,140,66,.17) 28%, rgba(255,140,66,.10) 46%, rgba(255,140,66,.05) 68%, transparent 100%); }
section:nth-of-type(even) {
  background-image: radial-gradient(185% 150% at 0% 100%,
    rgba(255,140,66,.60) 0%, rgba(255,140,66,.38) 6%, rgba(255,140,66,.26) 14%,
    rgba(255,140,66,.17) 28%, rgba(255,140,66,.10) 46%, rgba(255,140,66,.05) 68%, transparent 100%); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---- heading colour, answered at weight ----
   Subpages carry their own `h1,h2,h3 { color: ... !important }` in an inline
   <style>, which sits after this linked file and wins at equal specificity.
   Raised to html body h1 (0,0,3) so the page reads the same as the homepage:
   titles in the accent, the em inside them in the display colour. */
html body h1, html body h2, html body h3, html body .display,
html body .band h1, html body .band h2, html body .band h3 {
  color: var(--b-acc) !important;
}
html body h1 em, html body h2 em, html body h3 em,
html body .band h1 em, html body .band h2 em, html body .band h3 em {
  color: var(--b-type) !important;
}


/* ---- PLATES REMOVED ----
   A plated headline was a white slab behind the type - correct on a light
   page, a hole punched in a dark one. The plate goes; the headline keeps the
   accent like every other title and the emphasis inside it stays in the
   display colour, so the line reads the same way as the rest of the site. */
html body .plated, html body .band .plated, html body .plated.set {
  background: none !important;
  background-image: none !important;
  color: var(--b-acc) !important;
  -webkit-text-fill-color: currentColor;
  padding-left: 0 !important; padding-right: 0 !important;
  box-shadow: none !important;
}
html body .plated em, html body .band .plated em { color: var(--b-type) !important; }

/* ---- BUTTONS ----
   .btn was filling with the warm grey body colour, which read as a pale slab
   on the dark ground - the "formatting lost" look. It becomes a ghost button
   in the accent: the hue carries the affordance, the fill arrives on hover.
   Accent on the ground is 8.52:1, and the hover state is near-black on the
   accent at 8.15:1 - both clear of the floor. */
html body .btn, html body a.btn, html body .btn-quiet {
  background: transparent !important;
  color: var(--b-acc) !important;
  border: 1px solid var(--b-acc) !important;
  border-radius: 1px;
  transition: background .22s ease, color .22s ease, border-color .22s ease;
}
html body .btn:hover, html body a.btn:hover, html body .btn-quiet:hover {
  background: var(--b-acc) !important;
  color: #1A0F06 !important;
  border-color: var(--b-acc) !important;
}

/* ---- CLOSING CTA: ALIGNED LEFT WITH THE REST OF THE PAGE ----
   .faq-cta (and The Brief's .close) were centred while every other section on
   the site is left-aligned. The giveaway was the eyebrow: its decorative dash
   sits at the ELEMENT's left edge while the text centres inside it, so the rule
   and the label drifted apart with nothing to line up against.
   Left-aligned, the dash, eyebrow, headline, lede and buttons all share one
   edge - the same edge every section above them uses. */
html body .faq-cta, html body section.close, html body .cta-close {
  text-align: left !important;
}
html body .faq-cta > *, html body section.close > *,
html body .faq-cta .lede, html body .faq-cta .actions,
html body section.close .lede, html body section.close .actions {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
html body .faq-cta .actions, html body section.close .actions {
  justify-content: flex-start !important;
}

/* ---- THE BRIEF'S MARGIN QUOTES ----
   The four .arg-quote lines are the argument's voice running down the rail,
   and they were carrying the same warm grey as the body copy beside them, so
   they read as more body rather than as a separate register. They take the
   accent, like the homepage pull quote. 22.7px italic at 8.04:1 on the band -
   clear of both floors. */
html body .arg-quote { color: var(--b-acc) !important; }