/* ==========================================================================
   SVEF — design tokens  ·  THRESHOLD

   Every colour, size, weight and duration in the site resolves to a value
   defined here. No component file may hardcode a hex value or a raw pixel
   font size; changing the brand means changing this file only.

   The direction: the site is an arrival — a sequence of rooms, each more
   private than the last. It commits to a single dark world. There is no
   light mode: the design IS the darkness, so every surface paints its own
   ground rather than inheriting one.
   ========================================================================== */

:root {

  /* ---------------------------------------------------------------- colour
     One accent, used sparingly. Champagne is dusty rather than yellow —
     bright gold on black reads as a casino, not a club.

     Contrast is stated where it is not obvious. Measured against
     --obsidian; the slate surfaces sit close enough that a value passing
     on one passes on the other. */

  --obsidian:  #0A0B0D;   /* the ground — deepest surface, page background */
  --slate:     #131519;   /* alternating band, hover fill */
  --slate-2:   #1A1D22;   /* raised panel, form field */
  --slate-3:   #22262C;   /* pressed / active fill */

  /* Hairlines carry almost all of the structure in this design, so they
     are defined as translucent bone rather than as flat greys: they then
     read correctly over obsidian, over slate and over a photograph. */
  --hair:       rgba(232, 229, 222, 0.13);
  --hair-soft:  rgba(232, 229, 222, 0.07);
  --hair-strong:rgba(232, 229, 222, 0.22);

  --bone:      #E8E5DE;   /* headings and primary text   15.6:1 */
  --smoke:     #B0B7BE;   /* body copy                    9.7:1 */
  --smoke-2:   #9DA4AC;   /* small meta, captions         7.8:1 */
  --smoke-3:   #7F868E;   /* disabled only — not for text you must read */

  --champagne-hi:  #DCCBB0;   /* the mark's highlight only 12.1:1 */
  --champagne:     #C9B393;   /* the accent                9.7:1 */
  --champagne-dim: #AD9A76;   /* small caps labels, rules  7.2:1 */
  --champagne-lo:  #6E6248;   /* inert rules on dark, non-text only */
  --champagne-sh:  #9C8968;   /* the mark's shadow, non-text only */

  /* Status colours are functional and sit outside the accent system. Each
     is paired with a ground dark enough to keep the text above 7:1. */
  --success:    #6FCFA6;
  --success-bg: #10241D;
  --danger:     #E88C86;
  --danger-bg:  #2A1614;
  --warning:    #E0BE7A;
  --warning-bg: #241D10;

  /* Focus is champagne on a dark halo so it survives every surface in the
     site, including sitting over a photograph in the hero. */
  --focus-ring:       0 0 0 2px var(--obsidian), 0 0 0 4px var(--champagne);
  --focus-ring-light: 0 0 0 2px var(--bone),     0 0 0 4px var(--champagne);

  /* ------------------------------------------------------------ typography
     Two families, three roles. Montserrat is the display face: set at 200
     and tracked tight, it is the only weight in either family with enough
     air to carry a headline at this size. Poppins handles everything
     structural — nav, labels, buttons, body — set in wide caps where it
     labels and normally where it reads; its round, open counters stay
     legible at the 13px the eyebrows and buttons run at, which is where
     Montserrat's tighter aperture starts to close up on a dark ground.

     Cormorant Garamond and Jost are gone, and with them the italic. Three
     things depended on it — the accent clause in the headline, the em in
     every section title, and the six core values — and a geometric sans
     has no italic worth setting at display size. All three are now carried
     by champagne plus a half-step of weight (--fw-accent) instead. That
     reads as emphasis rather than as a second voice: a real loss, and the
     cleanest answer available in a sans.

     The one italic left is the pull quote, which runs at body-ish size
     where Montserrat's italic still holds. See .quote-text.

     Weights are stated per role rather than per face, because 200 in a
     geometric sans and 300 in the old serif are the same optical colour
     and one token cannot mean both:

       --fw-display  the headline face, and nothing else
       --fw-accent   the champagne clause that used to be the italic
       --fw-light    body face, light — rosters and check lists
       --fw-regular  body copy
       --fw-ui       small uppercase chrome that must hold on dark
       --fw-medium   uppercase labels, buttons, eyebrows */

  --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fw-display:  200;
  --fw-accent:   300;
  --fw-light:    300;
  --fw-regular:  300;
  --fw-ui:       400;
  --fw-medium:   500;
  --fw-semibold: 500;   /* Poppins at 600 is heavier than this design wants */
  --fw-bold:     500;

  /* Fluid between a 360px and a 1440px viewport, so type shrinks smoothly
     on phones instead of stepping at breakpoints. */
  /* Montserrat's x-height is far larger than Cormorant's, so the same px
     value reads about a tenth bigger. The display sizes are pulled back to
     match the optical size the serif was setting, not its stated one. */
  --fs-hero:    clamp(2.50rem, 1.50rem + 4.45vw, 5.75rem);  /* home headline */
  --fs-page:    clamp(1.85rem, 1.30rem + 2.45vw, 3.25rem);  /* page hero title */
  --fs-section: clamp(1.60rem, 1.15rem + 2.00vw, 2.70rem);  /* section heading */
  --fs-h3:      clamp(1.15rem, 1.03rem + 0.55vw, 1.45rem);  /* card heading */
  --fs-h4:      1.0625rem;
  --fs-lead:    clamp(1.00rem, 0.95rem + 0.25vw, 1.1875rem);
  --fs-body:    1rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.875rem;
  /* The floor. Uppercase and tracked, this is legible; it is also the
     smallest anything in the site is allowed to be, and it is used for
     labels only — never for a sentence someone has to read. */
  --fs-xxs:     0.8125rem;   /* eyebrows, nav, button text */

  --lh-tight:   1.06;
  --lh-snug:    1.3;
  --lh-normal:  1.55;
  --lh-relaxed: 1.8;   /* body paragraphs — dark type needs more air */

  /* Uppercase set wide enough to read as deliberate, but no wider: past
     about .22em, small caps stop being legible and start being texture. */
  --ls-hero:  -0.018em;   /* the sans needs pulling in; the serif did not */
  --ls-tight: -0.01em;
  --ls-normal: 0;
  --ls-wide:   0.15em;
  --ls-wider:  0.20em;
  --ls-widest: 0.42em;   /* the wordmark only */

  /* --------------------------------------------------------------- layout */

  --container-max: 1440px;
  --container-narrow: 68ch;   /* article body — a comfortable measure */
  --gutter: clamp(1.5rem, 6vw, 6rem);

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Vertical rhythm for a <section>, applied top AND bottom. This design
     is far more generous than the one it replaces: space is the main way
     a page like this signals that it is not in a hurry. */
  --section-y: clamp(4rem, 2rem + 8vw, 9rem);

  /* ------------------------------------------------------ shape & elevation
     Nothing in this design is rounded and nothing is raised. Depth is
     carried by hairlines and by the darkness of a surface, never by a
     shadow — a drop shadow on obsidian is invisible anyway, and a rounded
     corner would undo the architecture the whole identity is built on. */

  --radius-xs:     0;
  --radius-sm:     0;
  --radius-md:     0;
  --radius-pill:   0;
  --radius-circle: 50%;   /* status dots only */

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-gold: none;

  /* --------------------------------------------------------------- motion
     One easing family. --ease-curtain is a deep exponential-out: most of
     the distance is covered at once, then it settles for a long time.
     That long settle is what separates motion that feels considered from
     motion that feels eager — the same reason a heavy door closes slowly
     on its damper rather than springing shut. Every curtain, draw, lift
     and reveal in the site uses it. */

  --dur-fast:   200ms;
  --dur-base:   520ms;
  --dur-slow:   900ms;
  --dur-reveal: 1100ms;
  --dur-mask:   1500ms;
  --dur-draw:   1400ms;

  /* The slideshow runs on its own clock. A 7s hold is long enough that
     the reader finishes the headline before anything changes behind it,
     and the 1.4s dissolve is slow enough to read as a cross-fade rather
     than a cut. */
  --dur-dissolve: 1400ms;
  --dur-hold:     7000ms;

  --ease-out:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0.05, 0.36, 1);
  --ease-glide:   cubic-bezier(0.40, 0.00, 0.20, 1);
  --ease-curtain: cubic-bezier(0.16, 1, 0.30, 1);

  /* ---------------------------------------------------------------- layers */

  --z-base:    1;
  --z-sticky:  100;
  --z-header:  200;
  --z-drawer:  300;
  --z-overlay: 400;
  --z-toast:   500;
  --z-grain:   600;   /* the film grain sits above everything, inert */

  /* Measured, not guessed: these are what .site-header actually resolves to
     at a 16px root once its padding clamp is at full width. They feed the
     top padding of everything that sits under the fixed header, so being
     under is the failure — content ends up beneath it. Both were already a
     little short of the real height before the lockup grew a strapline;
     they are now taken from the rendered box. */
  --header-h:        112px;   /* resting height */
  --header-h-shrunk:  92px;   /* after scrolling past the hero */
}

/* Motion is a courtesy, not a requirement. When the visitor has asked
   their operating system for less of it, remove it wholesale rather than
   merely shortening it — including the scroll-reveal transforms, which
   would otherwise leave content stranded off-screen if the observer never
   fires. The slideshow needs stating outright: its slides are stacked and
   positioned, and a stack whose opacity was merely reset would show all
   five photographs at once. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur-base: 0.01ms;
    --dur-slow: 0.01ms;
    --dur-reveal: 0.01ms;
    --dur-mask: 0.01ms;
    --dur-draw: 0.01ms;
    --dur-dissolve: 0.01ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal],
  [data-reveal].is-in {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
    transform: none !important;
    clip-path: none !important;
    animation: none !important;
  }

  .hero-stage-slide {
    animation: none !important;
    transition: none !important;
  }
  .hero-stage-slide:not(.is-current) { opacity: 0 !important; }
  .hero-stage-slide.is-current { opacity: 1 !important; }
}