/* ============================================================
   36TH CHAMBER — BRAND SYSTEM v4.0 · COMPONENT LAYER
   Loaded AFTER each page's own <style> block.

   The type roles (label / eyebrow / numeral / body / display) are
   applied directly inside each page's stylesheet, so they are not
   repeated here. This file holds only what the page CSS has no
   equivalent for: the crest, the endline, the surface registers,
   and the component states the system specifies.
   ============================================================ */

/* ------------------------------------------------------------
   1. BUTTONS
   Square, hairline, mono caps. There is one job: BOOK.
   Primary is a Flame ground with INK type — Chalk on Flame is
   3.60:1 and is the rule most likely to get broken.
   ------------------------------------------------------------ */
.btn-primary,.btn-ghost,.btn-gold,.nav-book,.drawer-book{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:11px;
  letter-spacing:0.20em;
  text-transform:uppercase;
  border-radius:0;
}

.btn-primary{
  padding:16px 30px;
  background:var(--c-flame);color:var(--c-ink);
  border:1px solid var(--c-flame);
  transition:background var(--dur),border-color var(--dur),color var(--dur);
}
.btn-primary:hover,.btn-primary:focus-visible{
  background:var(--c-gold);border-color:var(--c-gold);color:var(--c-ink);
}
/* the old build wiped the button with a cream sweep — retired */
.btn-primary::after{display:none}

.btn-ghost{
  padding:16px 24px;
  background:transparent;color:var(--fg-muted);
  border:1px solid var(--line);
  transition:border-color var(--dur),color var(--dur),background var(--dur);
}
.btn-ghost:hover,.btn-ghost:focus-visible{
  border-color:var(--fg);color:var(--fg);background:var(--bg-raised);
}

.btn-gold{
  padding:16px 30px;
  background:transparent;color:var(--c-gold);border:1px solid var(--c-gold);
}
.btn-gold:hover{background:var(--c-gold);color:var(--c-ink)}

.nav-book,.drawer-book{background:var(--c-flame);color:var(--c-ink)}
.nav-book:hover{background:var(--c-gold);color:var(--c-ink)}

/* ------------------------------------------------------------
   2. THE TICKER — a Flame ground, so the type on it is Ink.
   ------------------------------------------------------------ */
.ticker-wrap{background:var(--c-flame)}
.ticker-wrap::before{background:linear-gradient(90deg,var(--c-flame),transparent)}
.ticker-wrap::after{background:linear-gradient(270deg,var(--c-flame),transparent)}
.t-item{color:var(--c-ink);font-weight:700}
.t-sep{color:rgba(10,7,5,.45)}

/* ------------------------------------------------------------
   3. THE CREST
   Masked, so it takes its colour from the surface it sits on:
   Chalk on Ink, Ink on Paper. Clear space is 0.42 × its own
   width and nothing enters it. Minimum 16px on screen. Rotation
   on its own axis is the only permitted motion; drop-shadow is
   listed misuse.
   ------------------------------------------------------------ */
.nav-logo .crest-mark{--crest-size:21px;color:var(--c-ink);transition:color var(--dur)}
nav.scrolled .nav-logo .crest-mark,
nav:not([data-surface="light"]) .nav-logo .crest-mark{color:var(--c-chalk)}
.f-logo .crest-mark,.crest-mark.f-logo-img{
  --crest-size:34px;color:var(--c-chalk);margin-bottom:16px;
}
/* the old raster logo and the "36" box fallback are both retired */
.nav-logo-img,img.f-logo-img,.nav-logo-fallback{display:none}

/* The endline. Locks to the crest, rarely changes. */
.f-endline{
  font-family:var(--font-text);
  font-weight:300;
  font-size:15px;
  line-height:1.35;
  letter-spacing:-0.01em;
  color:var(--fg);
  margin:2px 0 12px;
}

/* ------------------------------------------------------------
   4. SURFACES
   The nav at rest, the hero, the method section and the gallery
   are the quiet, printed register — Paper. Everything else is Ink.
   On Paper, Flame drops to Flame-deep for anything at text size:
   Flame on Paper is 3.65:1 and fails AA for small text. Display
   sizes clear AA as large text, so they keep full Flame.
   ------------------------------------------------------------ */
[data-surface="light"] .btn-ghost{color:#6B635C;border-color:rgba(10,7,5,.15)}
[data-surface="light"] .btn-ghost:hover{color:var(--c-ink);border-color:var(--c-ink)}

.hero-headline em,.method-headline em,.mfst-statement em,
.gallery-hdr em,.hero-headline i{color:var(--c-flame)}

[data-surface="light"] .hero-eyebrow,
[data-surface="light"] .method-eyebrow,
[data-surface="light"] .ig-label{color:var(--c-flame-deep)}

/* Nav: Paper at rest, Ink once the page moves under it. */
nav[data-surface="light"].scrolled{
  --bg:var(--c-ink);--fg:var(--c-chalk);
  --ink:var(--c-ink);--paper:var(--c-ink);--cream:var(--c-chalk);
  --wire:#241F1C;--wire2:#3A3532;
  --muted:var(--c-ash);--dim:var(--c-ash);
  --red:var(--c-flame);--line:rgba(237,239,240,.14);
}

/* ------------------------------------------------------------
   5. SHAPE + ELEVATION — both are zero, and both are tokens.
   Depth comes from Wash against Ink and from one hairline.
   ------------------------------------------------------------ */
#cursor-ring,#tc-cursor-ring,#tc-cursor-dot{border-radius:0}
.vignette{display:none}          /* a black multiply is off-palette */

/* ------------------------------------------------------------
   6. GHOST NUMERALS
   The oversized section numerals are decoration, not content.
   They are held below text contrast on purpose — the system's
   ghost treatment — so they must stay out of the a11y tree.
   ------------------------------------------------------------ */
.hdr-num,.svc-num,.cat-num,.nc-step-num,.member-idx,.member-photo-num{
  user-select:none;
}