/* ============================================================
   36TH CHAMBER — BRAND SYSTEM v4.0 "THE CREST"
   Single stylesheet: type stack + tokens + legacy bridge.
   Loaded on every page BEFORE that page's own <style> block.

   ⚠ LICENSING — the .woff2 files in /assets/fonts name themselves
   "ABC Diatype Trial" / "ABC Diatype Mono Trial" internally. Trial
   licences from Dinamo do not cover production or web use. Buy the
   two desktop seats + the webfont band, then drop the licensed
   files into /assets/fonts under these exact filenames. Nothing
   else in this file changes.
   ============================================================ */

/* ------------------------------------------------------------
   TYPE — two families, one foundry. A third font is a system
   failure, not a creative decision.
   ------------------------------------------------------------ */

/* Display — ABC Whyte Inktrap. Headlines only; inktraps are a
   liability under ~24px. */
@font-face{font-family:'ABC Whyte Inktrap';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ABCWhyteInktrap-Medium.woff2) format('woff2')}
@font-face{font-family:'ABC Whyte Inktrap';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/ABCWhyteInktrap-Bold.woff2) format('woff2')}
@font-face{font-family:'ABC Whyte Inktrap';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/ABCWhyteInktrap-Black.woff2) format('woff2')}
@font-face{font-family:'ABC Whyte Inktrap';font-style:normal;font-weight:900;font-display:swap;src:url(/assets/fonts/ABCWhyteInktrap-Heavy.woff2) format('woff2')}

/* Text — ABC Diatype. Everything read in sentences. Never below 300. */
@font-face{font-family:'ABC Diatype';font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/ABCDiatype-Light.woff2) format('woff2')}
@font-face{font-family:'ABC Diatype';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ABCDiatype-Regular.woff2) format('woff2')}
@font-face{font-family:'ABC Diatype';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ABCDiatype-Medium.woff2) format('woff2')}
@font-face{font-family:'ABC Diatype';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/ABCDiatype-Bold.woff2) format('woff2')}

/* Technical — ABC Diatype Mono. Prices, times, labels, wayfinding.
   Never long copy. */
@font-face{font-family:'ABC Diatype Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ABCDiatypeMono-Regular.woff2) format('woff2')}
@font-face{font-family:'ABC Diatype Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ABCDiatypeMono-Medium.woff2) format('woff2')}
@font-face{font-family:'ABC Diatype Mono';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/ABCDiatypeMono-Bold.woff2) format('woff2')}

/* ============================================================
   TOKENS
   ============================================================ */
:root{

  /* --- 1. COLOUR PRIMITIVES — eight colours, nothing else.
     Retired and not returning: oxide, bone, the warm-neutral
     system, and pure white. Chalk replaces white. --- */
  --c-ink:        #0A0705;   /* The ground. 60%+ of any surface. */
  --c-wash:       #161311;   /* Cards, panels, depth against Ink. */
  --c-edge:       #241F1C;   /* Raised edge / divider on Ink. */
  --c-chalk:      #EDEFF0;   /* Crest + primary type. 17.4:1 on Ink. */
  --c-ash:        #8A8580;   /* Muted mono labels. 5.5:1 on Ink. */
  --c-flame:      #E2431A;   /* The accent. 4.8:1 on Ink. */
  --c-gold:       #F2A22C;   /* Secondary heat. Sparing. 9.6:1 on Ink. */
  --c-jade:       #16301F;   /* Reserved: trade material only. */

  --c-paper:      #F2F0EC;   /* Light ground. */
  --c-paper-card: #E8E4DE;   /* Cards on Paper. */
  --c-flame-deep: #BB3716;   /* Flame for small text on light. 5.42:1 */

  /* --- 1b. SEMANTIC (DARK / DEFAULT). Ink is home. --- */
  --bg:            var(--c-ink);
  --bg-raised:     var(--c-wash);
  --bg-edge:       var(--c-edge);
  --bg-inverse:    var(--c-chalk);

  --fg:            var(--c-chalk);
  --fg-body:       #BDB6B0;
  --fg-body-quiet: #B0A9A3;
  --fg-muted:      var(--c-ash);
  --fg-accent:     var(--c-flame);
  --fg-accent-2:   var(--c-gold);

  --line:        rgba(237,239,240,.14);
  --line-faint:  rgba(237,239,240,.07);
  --line-strong: rgba(237,239,240,.28);
  --line-accent: rgba(226,67,26,.60);

  /* --- 1c. ON-FLAME — the one contrast trap.
     Chalk on Flame is 3.60:1 and FAILS. On a Flame ground,
     type is INK — 4.83:1. --- */
  --on-flame:       var(--c-ink);
  --on-flame-body:  rgba(10,7,5,.82);
  --on-flame-muted: rgba(10,7,5,.72);
  --on-flame-line:  rgba(10,7,5,.28);

  /* --- 2. TYPE FAMILIES --- */
  --font-display: 'ABC Whyte Inktrap','ABC Diatype','Helvetica Neue',Arial,sans-serif;
  --font-text:    'ABC Diatype','Helvetica Neue',Arial,sans-serif;
  --font-mono:    'ABC Diatype Mono','JetBrains Mono',ui-monospace,SFMono-Regular,monospace;

  --w-light:300; --w-regular:400; --w-medium:500;
  --w-bold:700;  --w-black:800;   --w-super:900;

  /* Mono tracking band: 0.20em – 0.34em. Never outside it.
     Display type is never letterspaced; its tracking is negative. */
  --ls-mono-min: 0.20em;
  --ls-mono-max: 0.34em;

  /* --- 3. SHAPE. There is no border-radius anywhere in this
     system. Square is the rule, not an oversight. --- */
  --radius: 0;
  --hairline: 1px;
  --shadow: none;

  /* --- 4. MOTION. The crest rotates on its own axis.
     Nothing else. --- */
  --dur-fast:120ms; --dur:250ms; --dur-slow:600ms;
  --crest-spin:12s;

  /* ==========================================================
     LEGACY BRIDGE
     The page stylesheets were written against the v3 warm-neutral
     names. Rather than rename 700 declarations, the old names are
     re-pointed at v4 tokens. Nothing below introduces a colour
     that isn't in the palette above.
     ========================================================== */
  --ink:   var(--c-ink);
  --paper: var(--c-ink);
  --warm:  var(--c-wash);
  --warm2: var(--c-edge);
  --wire:  #241F1C;
  --wire2: #3A3532;
  --cream: var(--c-chalk);
  --muted: var(--c-ash);
  --dim:   var(--c-ash);
  --red:   var(--c-flame);
  --red-b: #B8320F;
  --gold:  var(--c-gold);
}

/* ============================================================
   LIGHT SURFACE — the printed / quiet register.
   The room, the price list, the aftercare card.
   ============================================================ */
[data-surface="light"]{
  --bg:            var(--c-paper);
  --bg-raised:     var(--c-paper-card);
  --bg-edge:       #DCD7D0;
  --bg-inverse:    var(--c-ink);

  --fg:            var(--c-ink);
  --fg-body:       #453D38;
  --fg-body-quiet: #453D38;
  --fg-muted:      #6B635C;
  --fg-accent:     var(--c-flame-deep);   /* AA-safe on Paper */

  --line:          rgba(10,7,5,.15);
  --line-faint:    rgba(10,7,5,.07);
  --line-strong:   rgba(10,7,5,.28);
  --line-accent:   rgba(187,55,22,.60);

  /* legacy bridge, light register */
  --ink:   var(--c-paper);
  --paper: var(--c-paper);
  --warm:  var(--c-paper-card);
  --warm2: #DCD7D0;
  --wire:  #D8D5D0;
  --wire2: #C6C1BA;
  --cream: var(--c-ink);
  --muted: #6B635C;
  --dim:   #6B635C;
  --red:   var(--c-flame-deep);
  --red-b: #9E2E12;
}

/* ============================================================
   FLAME SURFACE — the one loud ground.
   Type on it is INK, never Chalk. One panel per page.
   ============================================================ */
[data-surface="flame"]{
  --bg:            var(--c-flame);
  --bg-raised:     rgba(10,7,5,.08);
  --bg-inverse:    var(--c-ink);

  --fg:            var(--c-ink);
  --fg-body:       var(--on-flame-body);
  --fg-body-quiet: var(--on-flame-body);
  --fg-muted:      var(--on-flame-muted);
  --fg-accent:     var(--c-ink);

  --line:          var(--on-flame-line);
  --line-faint:    rgba(10,7,5,.13);
  --line-strong:   rgba(10,7,5,.45);
  --line-accent:   rgba(10,7,5,.45);

  /* legacy bridge, flame register */
  --ink:   var(--c-flame);
  --paper: var(--c-flame);
  --warm:  rgba(10,7,5,.08);
  --warm2: rgba(10,7,5,.14);
  --wire:  rgba(10,7,5,.28);
  --wire2: rgba(10,7,5,.45);
  --cream: var(--c-ink);
  --muted: rgba(10,7,5,.72);
  --dim:   rgba(10,7,5,.72);
  --red:   var(--c-ink);
  --red-b: var(--c-ink);
  --gold:  var(--c-ink);
}

/* ============================================================
   GLOBAL RULES THE SYSTEM ENFORCES
   These override anything a page stylesheet tries to do.
   ============================================================ */

/* Square is the rule. Bladed terminals on the crest, notched
   joints in the display face — a rounded corner contradicts both. */
*,*::before,*::after{border-radius:0}

/* Elevation is zero. Depth comes from Wash against Ink and from
   one hairline — never from a shadow. */
::selection{background:var(--c-flame);color:var(--c-ink)}

/* Focus ring is Gold, everywhere, always. */
:focus-visible{outline:2px solid var(--c-gold);outline-offset:3px}

/* There is no italic cut in either family. Faux-italic is misuse —
   which includes the browser's own default on <address> and <cite>. */
em,i,cite,address,var,dfn{font-style:normal}

/* --- The crest ------------------------------------------------
   Clear space = 0.42 × the mark's own width. Nothing enters it.
   Minimum 16px on screen. Rotation on its own axis is the only
   permitted motion; drop-shadow is listed misuse. -------------- */
.crest{display:block;width:var(--crest-size,44px);height:auto;
  aspect-ratio:1176.3/1836.4;filter:none}

/* Masked, so the mark takes its colour from the surface it sits on:
   Chalk on Ink, Ink on Paper. */
.crest-mark{
  display:block;
  width:var(--crest-size,30px);
  aspect-ratio:1176.3/1836.4;
  background:currentColor;
  -webkit-mask:url(/assets/brand/crest.svg) no-repeat center/contain;
  mask:url(/assets/brand/crest.svg) no-repeat center/contain;
  flex-shrink:0;
  filter:none;
}
.crest--spin{animation:crest-spin var(--crest-spin) linear infinite}
@keyframes crest-spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  :root{--dur-fast:0ms;--dur:0ms;--dur-slow:0ms;--crest-spin:0s}
}