/* ============================================================================
   FOREVER STILL STUDIO — BRAND TOKENS
   Single source of truth for the Studio palette and type system.
   Approved 2026-08-29. Every page links this file; page <style> blocks may
   only add page-specific values, never redefine a brand colour.

   The brand is BALANCED, not dark-only: cinematic Carbon grounds carry the
   atmosphere, warm Ivory bands carry the reading. See DESIGN.md for the rules
   that govern when each one is used.

   Client brands keep their own colours and typography. Nothing in this file
   may be applied to portfolio screenshots, client identities, photographs, or
   embedded third-party interfaces.
   ========================================================================== */

/* ---------- Self-hosted type (generated by fetch-fonts.js) ---------- */
@font-face{font-family:'Prata';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/prata-400.woff2') format('woff2');}
@font-face{font-family:'Albert Sans';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/albertsans-variable.woff2') format('woff2');}
@font-face{font-family:'Albert Sans';font-style:italic;font-weight:100 900;font-display:swap;src:url('../fonts/albertsans-italic-variable.woff2') format('woff2');}
@font-face{font-family:'Monsieur La Doulaise';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/monsieur-400.woff2') format('woff2');}

:root{
  /* ══ APPROVED CORE PALETTE ══════════════════════════════════════════
     These eight are the brand. Nothing else is. */
  --color-carbon:      #141210;  /* dark ground, atmospheric foundation   */
  --color-ivory:       #F4EDE0;  /* light ground, editorial surface       */
  --color-cream:       #F1E9DA;  /* primary text on dark                  */
  --color-gold:        #C8A96A;  /* restrained connective accent          */
  --color-gold-muted:  #A8894A;  /* quieter labels, borders               */
  --color-blush:       #D4A5A5;  /* human warmth, used sparingly          */
  --color-brick:       #91503F;  /* storytelling emphasis only            */
  --color-brown:       #4A423A;  /* body copy on light                    */

  /* ══ DOCUMENTED EXTENSIONS ══════════════════════════════════════════
     Not part of the approved eight. Each exists for a reason the approved
     palette cannot serve on its own, and each is justified here. */

  /* Antique Gold on Warm Ivory is 1.93:1 — it fails WCAG for text by a wide
     margin. Gold Deep is the same hue darkened until it passes (5.00:1), and
     is the ONLY gold permitted for text on a light band. Bright gold stays
     legal on light bands as a hairline, rule, or fill — just never as type. */
  --color-gold-deep:   #7A6228;

  /* The deepest step, for the atmosphere behind the hero only. Never a
     surface, never text. Pure black is still forbidden. */
  --color-carbon-deep: #0E0D0C;

  /* Muted ink for captions and meta rows on light bands. Darkened from the
     previous #7D7264, which measured 4.04:1 on Ivory and failed AA body
     text; this passes at 5.04:1 with no perceptible change in character. */
  --color-ink-muted:   #6E6355;

  /* ══ SEMANTIC ROLES ═════════════════════════════════════════════════
     Prefer these over raw colours in new work. */
  --surface-dark:       var(--color-carbon);
  --surface-light:      var(--color-ivory);

  --text-on-dark:       var(--color-cream);
  --text-on-light:      var(--color-brown);
  --text-heading-dark:  var(--color-ivory);
  --text-heading-light: var(--color-carbon);

  --accent-primary:     var(--color-gold);
  --accent-muted:       var(--color-gold-muted);
  --accent-human:       var(--color-blush);
  --accent-story:       var(--color-brick);

  /* ══ WORKING ALIASES ════════════════════════════════════════════════
     What the page CSS actually reads. Kept because the site's component
     rules already speak this vocabulary — and because routing them through
     the roles above is what lets a band flip from dark to light by changing
     one class instead of rewriting its rules. */
  --ink-black: var(--color-carbon-deep);

  --bg:        var(--surface-dark);
  --bg-soft:   #191614;   /* tonal steps above the ground — separation      */
  --bg-warm:   #1E1A16;   /* without borders. Same hue family as Carbon.    */
  --bg-raise:  #211C17;

  --paper:      var(--surface-light);
  --paper-warm: #EBE0CD;  /* one step down from Ivory, for stacked panels   */
  --paper-line: #D8CBB2;  /* hairline on light ground                       */

  --gold:      var(--accent-primary);
  --gold-dim:  var(--accent-muted);
  --gold-deep: var(--color-gold-deep);
  --gold-soft: rgba(200,169,106,.14);
  --blush:     var(--accent-human);
  --brick:     var(--accent-story);
  --cream:     var(--color-cream);

  --text:       var(--text-on-dark);
  --text-soft:  #E3D9C7;
  --text-muted: #A99E8D;

  --ink:        var(--text-heading-light);
  --ink-soft:   var(--text-on-light);
  --ink-muted:  var(--color-ink-muted);

  --rule:      rgba(200,169,106,.26);
  --rule-soft: rgba(200,169,106,.14);

  /* ══ TYPE ═══════════════════════════════════════════════════════════
     Prata is sculptural and ceremonial — display only, and it ships a
     SINGLE weight (400) with NO italic. Albert Sans does all the work:
     paragraphs, navigation, buttons, labels, forms, captions, UI. Monsieur
     La Doulaise is a handwritten gesture and nothing else — never a
     paragraph, never navigation, never a button, never an instruction. */
  --font-display: "Prata", Georgia, "Times New Roman", serif;
  --font-sans:    "Albert Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, Helvetica, Arial, sans-serif;
  --font-script:  "Monsieur La Doulaise", "Prata", cursive;

  /* Prata sets wider and heavier on the body than the face it replaced, so
     the display ramp is tracked in slightly to hold the old optical size. */
  --display-tracking: -.014em;

  /* ══ GEOMETRY & MOTION ══════════════════════════════════════════════ */
  --max-w: 1180px;
  --gutter: clamp(22px,5vw,64px);
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.33,0,.2,1);

  /* ══ ATMOSPHERE (dark grounds only) ═════════════════════════════════ */
  --atmo-a: #161311;
  --atmo-b: var(--color-carbon-deep);
  --glow-gold: rgba(200,169,106,.16);
  --glow-rose: rgba(212,165,165,.10);
  --sheen: #E9D3A3;
  --grain-op: .5;
}

/* ============================================================================
   FUNCTIONAL STATE COLOURS
   Documented separately from the brand palette on purpose. These say
   pass / fail / focus — a meaning the eight brand colours cannot carry
   honestly — so they are allowed to exist, but they are not brand accents
   and must never be used decoratively. Every value below is measured.
   ========================================================================== */
:root{
  --state-focus:          var(--accent-primary);   /* 8.31:1 on Carbon      */
  --state-focus-on-light: var(--color-gold-deep);  /* 5.00:1 on Ivory       */

  --state-success:          #6FBF8F;  /* 8.48:1 on Carbon                   */
  --state-success-on-light: #35704F;  /* 5.04:1 on Ivory                    */

  --state-warning:          var(--accent-primary);   /* gold is the warn step */
  --state-warning-on-light: var(--color-gold-deep);

  --state-error:          #D4705C;  /* 5.58:1 on Carbon — brick is too dark */
  --state-error-on-light: var(--accent-story);  /* 5.27:1 on Ivory          */

  --state-disabled:          #6B6357;  /* on Carbon, non-text UI            */
  --state-disabled-on-light: #9A9184;
}

/* A visible focus ring is not optional. Keyboard focus must never be removed
   by a colour pass; it is re-asserted here so no page can lose it. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--state-focus);
  outline-offset:3px;
}
.band--light :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline-color:var(--state-focus-on-light);
}
:where(button,input,select,textarea)[disabled],
:where(button,input,select,textarea)[aria-disabled="true"]{
  color:var(--state-disabled);
  cursor:not-allowed;
}

/* ============================================================================
   THE TIME-OF-DAY RULE
   Only the near-black background family shifts with the clock. Accents stay
   fixed. The room changes light; the objects in it do not. Light bands do not
   shift at all — an editorial page should read the same at 3am as at noon.
   ========================================================================== */
html[data-time="morning"]  {--atmo-a:#241C17;--atmo-b:#161210;--glow-gold:rgba(200,169,106,.14);--glow-rose:rgba(212,165,165,.20);--sheen:#F0DCB4;--grain-op:.42;--bg:#17130F;--bg-soft:#1E1814;--bg-warm:#251D16;--bg-raise:#2A2119}
html[data-time="afternoon"]{--atmo-a:#231A12;--atmo-b:#140F0A;--glow-gold:rgba(200,169,106,.24);--glow-rose:rgba(201,180,143,.12);--sheen:#F2D9A1;--grain-op:.46;--bg:#141210;--bg-soft:#1A1613;--bg-warm:#201A15;--bg-raise:#231C17}
html[data-time="evening"]  {--atmo-a:#1D1512;--atmo-b:#110D0B;--glow-gold:rgba(200,169,106,.20);--glow-rose:rgba(212,165,165,.16);--sheen:#E7C894;--grain-op:.52;--bg:#15100A;--bg-soft:#1C150C;--bg-warm:#231A10;--bg-raise:#271D13}
html[data-time="night"]    {--atmo-a:#131110;--atmo-b:#0A0908;--glow-gold:rgba(200,169,106,.15);--glow-rose:rgba(212,165,165,.08);--sheen:#DCC188;--grain-op:.58;--bg:#0F0E11;--bg-soft:#141318;--bg-warm:#19181E;--bg-raise:#1D1B22}

/* ============================================================================
   SURFACE CONTEXTS — the dark/light rhythm
   A band declares which ground it sits on. Everything inside reads its ramp
   from the working aliases, so moving a section between atmosphere and
   openness is a class change, not a rewrite of that section's rules.

   .band--light is the editorial surface: service explanations, process
   content, case studies, long-form reading — anywhere the page needs
   breathing room. Carbon keeps the immersive introductions, the dramatic
   transitions and the closing call to action.
   ========================================================================== */
.band--light{
  background:var(--surface-light);
  color:var(--text-on-light);
  position:relative;
  z-index:2;              /* sit above the fixed grain and hero atmosphere */

  /* Grounds */
  --bg:        var(--surface-light);
  --bg-soft:   #EFE7D8;   /* tonal steps DOWN from Ivory, not up            */
  --bg-warm:   #EBE2D0;
  --bg-raise:  #E6DCC7;
  --ink-black: #E0D5BE;

  /* The reading ramp, inverted. Warm Brown carries paragraphs at 8.46:1. */
  --text:       var(--text-on-light);
  --text-soft:  #5A5147;
  --text-muted: var(--color-ink-muted);

  /* Gold TEXT must darken here or it disappears (1.93:1 → 5.00:1). Bright
     gold survives in this band only as a rule, hairline, or fill — which is
     exactly the "restrained visual thread" role it is supposed to play. */
  --gold:      var(--color-gold-deep);
  /* Muted Gold is 2.84:1 on Ivory and fails even the large-text threshold, so
     the quieter gold darkens here too. On paper, "quieter" is carried by size
     and weight, not by a lighter gold. */
  --gold-dim:  var(--color-gold-deep);
  /* Hairlines need more weight on paper than on Carbon: a rule that reads as
     a fine line against a dark ground disappears into a light one. */
  --gold-soft: rgba(122,98,40,.10);
  --rule:      rgba(122,98,40,.34);
  --rule-soft: rgba(122,98,40,.24);

  /* Inverted button ink */
  --ink:      var(--text-heading-light);
  --ink-soft: var(--text-on-light);
  --paper:    var(--surface-light);
}

/* .band--dark re-asserts the dark ramp. Its job is nested inversion: a Carbon
   island inside a light band (a stamp, a callout, a dark CTA) needs bright
   gold back, not the darkened gold the light context substitutes. */
.band--dark{
  background:var(--surface-dark);
  color:var(--text-on-dark);

  --bg:        var(--surface-dark);
  --bg-soft:   #191614;
  --bg-warm:   #1E1A16;
  --bg-raise:  #211C17;

  --text:       var(--text-on-dark);
  --text-soft:  #E3D9C7;
  --text-muted: #A99E8D;

  --gold:      var(--accent-primary);
  --gold-dim:  var(--accent-muted);
  --gold-soft: rgba(200,169,106,.14);
  --rule:      rgba(200,169,106,.26);
  --rule-soft: rgba(200,169,106,.14);
}
.band--dark h1,.band--dark h2,
.band--dark h3,.band--dark h4{color:var(--text-heading-dark)}

/* Headings on a light band are Carbon, not brown — the ink ramp has two
   steps and the heading takes the deeper one. */
.band--light h1,
.band--light h2,
.band--light h3,
.band--light h4{color:var(--text-heading-light)}

/* Dusty Blush is 1.7:1 on Ivory — invisible, not subtle. On a light band the
   human accent is carried by Brick Rose instead, which is the storytelling
   emphasis the palette reserves for exactly this. Blush stays legal here as a
   fill or a rule, never as text. */
.band--light .script,
.band--light em,
.band--light .i{color:var(--accent-story)}

/* Bands are full-bleed in background and constrained in content, so a tonal
   change reads as a band across the whole viewport. */
.band--light + .band--light{border-top:1px solid var(--rule-soft)}

/* Paper grain. The page-wide film grain is a fixed overlay tuned for the dark
   ground; a light band sits above it and would otherwise read as flat plastic
   next to the textured Carbon sections. This is the same multiply texture the
   founder panel has always used, applied to every light band, so "handcrafted"
   survives the move into the light half of the system. */
.band--light::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  opacity:.30;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.28'/%3E%3C/svg%3E");
}
.band--light > .container,
.band--light > *{position:relative;z-index:1}

/* ============================================================================
   THE SERIF HAS NO ITALIC
   Prata ships one weight and no italic cut. A browser asked for italic Prata
   will SHEAR the roman, which on a high-contrast serif looks like a mistake.
   font-synthesis:none forbids that outright — nothing on this site renders a
   faked slant or a faked bold ever again.

   Emphasis inside display type is therefore carried by COLOUR, not slope:
   Antique Gold on Carbon, Brick Rose on Ivory. That is the storytelling role
   Brick Rose is reserved for, so the constraint and the brand agree.

   Albert Sans has true italics. Emphasis in body copy still slants normally.
   ========================================================================== */
html{font-synthesis:none}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:var(--display-tracking);
}
h1 em,h2 em,h3 em,h4 em,
h1 .i,h2 .i,h3 .i,h4 .i,
h1 .em,h2 .em,h3 .em,h4 .em,
h1 .num,h2 .num,h3 .num,
h1 .step-n,h2 .step-n,h3 .step-n{
  font-style:normal;
  color:var(--accent-primary);
}
.band--light h1 em,.band--light h2 em,
.band--light h3 em,.band--light h4 em{color:var(--accent-story)}

/* Monsieur La Doulaise is an accent and stays one. It carries a phrase, a
   signature, a margin note — never a paragraph, navigation, a button, a form
   label, or an instruction the reader has to follow. */
.script{
  font-family:var(--font-script);
  font-weight:400;
  line-height:.9;
  color:var(--accent-human);
}