@font-face{font-family:'Archivo Fallback';src:local('Helvetica Neue'),local('Arial'),local('Liberation Sans');size-adjust:101.04%;ascent-override:88%;descent-override:21%;line-gap-override:.33%}@font-face{font-family:'Newsreader Fallback';src:local('Georgia');size-adjust:104.43%;ascent-override:74%;descent-override:27%;line-gap-override:-1%}@font-face{font-family:'IBM Plex Mono Fallback';src:local('Consolas'),local('Menlo'),local('DejaVu Sans Mono');size-adjust:109.13%;ascent-override:103%;descent-override:28%;line-gap-override:-1%}@font-face{font-family:'Archivo';font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url('../assets/fonts/archivo-normal-variable.woff2') format('woff2')}@font-face{font-family:'Newsreader';font-style:normal;font-display:swap;font-weight:200 800;src:url('../assets/fonts/newsreader-normal-variable.woff2') format('woff2')}@font-face{font-family:'Newsreader';font-style:italic;font-display:swap;font-weight:200 800;src:url('../assets/fonts/newsreader-italic-variable.woff2') format('woff2')}@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:400;src:url('../assets/fonts/ibm-plex-mono-400-normal.woff2') format('woff2')}@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:500;src:url('../assets/fonts/ibm-plex-mono-500-normal.woff2') format('woff2')}

:root{

  /* ========================================================
     TIER 1: PRIMITIVE COLOR PALETTE (Upscale Gold B Spectrum)
     ======================================================== */
  --color-pine-950:    #051D0E;  /* Deepest obsidian pine base */
  --color-pine-900:    #0A3419;  /* Deep evergreen panel ground */
  --color-pine-800:    #072814;  /* Dark forest inset */
  --color-pine-700:    #1B4728;  /* Muted pine border */
  --color-pine-600:    #496D55;  /* Soft pine ink */

  --color-gold-400:    #F2EAD6;  /* Luminous highlight glow */
  --color-gold-500:    #E2BF7D;  /* Sovereign burnished gold accent */
  --color-gold-600:    #8F7E4F;  /* Deep antique gold */

  --color-cream-100:   #F4ECE3;  /* Archival cream paper */
  --color-cream-200:   #F3EADF;  /* Warm ivory text */
  --color-sage-300:    #A2B6A6;  /* Muted sage telemetry text */
  --color-rule-light:  #D4DDD6;  /* Hairline rule on paper */
  --color-alert-red:   #FF6347;  /* Discrepancy warning red */

  /* ========================================================
     TIER 2: SEMANTIC DESIGN TOKENS
     ======================================================== */
  --surface-canvas:      var(--color-pine-950);
  --surface-panel:       var(--color-pine-900);
  --surface-inset:       var(--color-pine-800);
  --surface-paper:       var(--color-cream-100);

  --text-primary:        var(--color-cream-200);
  --text-secondary:      var(--color-sage-300);
  --text-paper-primary:  var(--color-pine-900);
  --text-paper-muted:    var(--color-pine-600);

  --brand-gold:          var(--color-gold-500);
  --brand-gold-glow:     var(--color-gold-400);
  --border-subtle:       var(--color-pine-700);
  --border-paper:        var(--color-rule-light);
  --status-discrepancy:  var(--color-alert-red);

  /* Backward-compatible aliases for legacy Heorot names */
  --hall:      var(--surface-canvas);
  --wine:      var(--surface-panel);
  --timber:    var(--surface-inset);
  --paper:     var(--surface-paper);
  --bone:      var(--text-primary);
  --ash:       var(--text-secondary);
  --accent:    var(--brand-gold);
  --glow:      var(--brand-gold-glow);
  --claret:    var(--color-gold-600);
  --alert:     var(--status-discrepancy);
  --ink:       var(--text-paper-primary);
  --ink-soft:  var(--text-paper-muted);
  --rule:      var(--border-paper);
  --rule2:     var(--border-subtle);
  --sp-wine:   var(--surface-panel);

  --f-display:"Archivo","Archivo Fallback","Helvetica Neue",Arial,sans-serif;

  --f-serif:"Newsreader","Newsreader Fallback","Iowan Old Style",Georgia,serif;

  --f-mono:"IBM Plex Mono","IBM Plex Mono Fallback",ui-monospace,Menlo,Consolas,monospace;

  --gutter:clamp(16px,4vw,56px);

  --ease:cubic-bezier(.2,.7,0,1);

  --grain-o:.055;


  color-scheme:light;

}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

html,body{max-width:100vw}body{overflow-x:clip}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-serif);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

a{color:inherit;text-decoration:none}

button{font:inherit;color:inherit}

:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

::selection{background:var(--accent);color:var(--hall)}

.skip{position:absolute;left:12px;top:-80px;z-index:100;background:var(--accent);color:var(--hall);padding:10px 14px;font-family:var(--f-mono);font-size:12px}

.skip:focus{top:12px}

code{font-family:var(--f-mono)}

/* ------------------------------------------------------------------
   The founder's floor (authoritative over the demo's paper base):
   wine ground, bone text, dark scheme, gold focus.
   ------------------------------------------------------------------ */
html{background:var(--wine);color-scheme:dark}
body{background:var(--wine);color:var(--bone)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}