/* Brand layer, ported from prototype/src/_head.html */

  /* ============================================================
     BRAND LAYER: everything Tailwind utilities can't express.
     Tokens mirror tailwind.config.js. Derive the ramp from the logo:
       python3 ~/Documents/WebDesigner/tools/contrast.py ramp "#HEX"
     ============================================================ */
  :root{
    /* brand/brand.html v1.0 — ramps derived from the logo; site green #004225 = green-700 */
    --green-500:#006039; --green-600:#004F2E; --green-700:#004225; --green-800:#012D18; --green-900:#001F0F;
    --gold-300:#E3CA94; --gold-500:#CBA13B; --gold-600:#AD8516; --gold-700:#8C6903;
    --ink:#101815; --ink-soft:#4E5A54; --paper:#FFFFFF; --ivory:#FBF8F1;
    --line:#E6E2D6; --line-strong:#D6D0BE;
    --nav-safe:92px;
    --ease-out:cubic-bezier(.22,1,.36,1);
    --ease-in-out:cubic-bezier(.65,0,.35,1);
  }
  @media (max-width:768px){ :root{ --nav-safe:80px } }

  /* ONE anchor offset for the whole page. Don't add scroll-mt-* to sections. */
  html{ scroll-padding-top:var(--nav-safe); -webkit-text-size-adjust:100% }
  html.lenis, html.lenis body{ scroll-behavior:auto !important }
  main > section{ scroll-margin-top:0 !important }
  body{ background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased }

  /* Display: Cormorant Garamond, sentence case (brand v1.1: the global corporate register). Cinzel stays in the logo only.
     Cormorant runs small on the x-height: set it large and never below 600 weight on screen. */
  .display{ font-family:'Cormorant Garamond',Georgia,serif; font-weight:600; letter-spacing:-.005em; line-height:1.08 }
  h1.display{ line-height:1.04 }
  .display em{ font-style:italic; font-weight:600 }
  h1.display, h2.display{ text-wrap:balance }
  /* the brand's one expressive device: a thin gold rule, echoing the logo's tagline rules */
  .gold-rule{ display:inline-block; width:44px; height:2px; background:var(--gold-500); vertical-align:middle }
  .eyebrow{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase }
  /* gold text: gold-500 ONLY on green-700 or darker (4.82:1); on light use gold-700 (5.08:1) */
  .on-dark .eyebrow{ color:var(--gold-500) }  .eyebrow{ color:var(--gold-700) }

  .btn-primary{ background:var(--green-700); color:#fff; transition:background-color .2s var(--ease-out) }
  .btn-primary:hover{ background:var(--green-800) }
  .btn-gold{ background:var(--gold-500); color:var(--green-900); transition:background-color .2s var(--ease-out) }   /* green-900 on gold-500: see brand guide */
  .btn-gold:hover{ background:var(--gold-400,#D6B56C) }

  /* focus: one ring everywhere, never removed */
  :focus-visible{ outline:2px solid var(--green-700); outline-offset:2px; border-radius:3px }
  .on-dark :focus-visible{ outline-color:var(--gold-500) }
  :focus:not(:focus-visible){ outline:none }
  .skip-link{ position:fixed; top:12px; left:12px; z-index:200; padding:12px 18px; border-radius:3px;
    background:var(--green-700); color:#fff; font-weight:600; transform:translateY(-160%); transition:transform .18s var(--ease-out) }
  .skip-link:focus-visible{ transform:none }

  /* scroll reveal: opacity/transform only; .js-gated, failsafe in _foot */
  .js .reveal{ opacity:0; transform:translateY(12px);
    transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay:var(--d,0ms) }
  .js .reveal.in{ opacity:1; transform:none }

  /* marquee (paused on hover/focus/offscreen; toggle in _foot) */
  .marquee{ display:flex; overflow:hidden; gap:var(--gap,56px);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent) }
  .marquee__track{ display:flex; gap:var(--gap,56px); padding-right:var(--gap,56px); flex:none; min-width:100%;
    align-items:center; animation:marquee var(--speed,48s) linear infinite; animation-play-state:var(--play,running) }
  .marquee:hover .marquee__track, .marquee:focus-within .marquee__track, .marquee.is-paused .marquee__track{ animation-play-state:paused }
  @keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(-100%)} }

  #nav.over-hero .navpill{ background:rgba(11,14,13,.55); border-color:rgba(255,255,255,.14) }
  #nav.over-hero .navpill a, #nav.over-hero .navpill button{ color:#fff }
  #nav.over-hero .navpill .text-ink{ color:#fff }
  #nav.over-hero .navpill a:not(.nav-home):hover{ background:rgba(255,255,255,.12) }  /* the logo is not a menu item */
  #nav.nav-hidden{ transform:translateY(-120%) }

  #progress{ position:fixed; inset:0 auto auto 0; height:2px; width:100%; transform-origin:0 50%; transform:scaleX(0);
    background:var(--gold-500); z-index:60 }

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important }
    .js .reveal{ opacity:1; transform:none; filter:none }
  }