/* Aligning SI: shared styles (fonts, palettes, base, menu line). */

/* Fonts: Anybody, SIL Open Font License (see /fonts/OFL.txt). Self-hosted subsets. */
@font-face{font-family:"Anybody";src:url("/fonts/anybody-wordmark.woff2") format("woff2");font-weight:430;font-stretch:150%;font-display:swap}
@font-face{font-family:"Anybody Var";src:url("/fonts/anybody-latin-var.woff2") format("woff2");font-weight:100 900;font-stretch:50% 150%;font-display:swap}

/* Palettes: each has a light and a dark variant that follows the device setting. Change data-palette on <html> to switch. */
:root[data-palette="graphite"]{--bg:#f2f2f1;--ink:#0d0d0d;--web:96,96,96}
:root[data-palette="lichen"]{--bg:#eef0e6;--ink:#13160c;--web:92,106,30}
:root[data-palette="sodium"]{--bg:#efeeeb;--ink:#15120d;--web:170,98,14}
:root[data-palette="verdigris"]{--bg:#e8efec;--ink:#0b1a16;--web:28,108,90}
:root[data-palette="concrete"]{--bg:#dfe2de;--ink:#111814;--web:38,82,64}
:root[data-palette="cinnabar"]{--bg:#efeeea;--ink:#141414;--web:186,52,32}
@media (prefers-color-scheme:dark){
  :root[data-palette="graphite"]:not([data-scheme="light"]){--bg:#0b0b0b;--ink:#ededed;--web:172,172,172}
  :root[data-palette="lichen"]:not([data-scheme="light"]){--bg:#0e100a;--ink:#ecebdc;--web:184,196,106}
  :root[data-palette="sodium"]:not([data-scheme="light"]){--bg:#0c0906;--ink:#f2eadb;--web:236,160,62}
  :root[data-palette="verdigris"]:not([data-scheme="light"]){--bg:#061210;--ink:#e2eee8;--web:94,178,156}
  :root[data-palette="concrete"]:not([data-scheme="light"]){--bg:#131715;--ink:#e3e7e3;--web:122,168,146}
  :root[data-palette="cinnabar"]:not([data-scheme="light"]){--bg:#0f0c0b;--ink:#efeae8;--web:224,94,70}
}
:root[data-palette="graphite"][data-scheme="dark"]{--bg:#0b0b0b;--ink:#ededed;--web:172,172,172}
:root[data-palette="lichen"][data-scheme="dark"]{--bg:#0e100a;--ink:#ecebdc;--web:184,196,106}
:root[data-palette="sodium"][data-scheme="dark"]{--bg:#0c0906;--ink:#f2eadb;--web:236,160,62}
:root[data-palette="verdigris"][data-scheme="dark"]{--bg:#061210;--ink:#e2eee8;--web:94,178,156}
:root[data-palette="concrete"][data-scheme="dark"]{--bg:#131715;--ink:#e3e7e3;--web:122,168,146}
:root[data-palette="cinnabar"][data-scheme="dark"]{--bg:#0f0c0b;--ink:#efeae8;--web:224,94,70}

/* Base */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;transition:background-color .5s ease,color .5s ease}
:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Dip colour for page transitions: black on dark pages (tiny luminance change), the page colour on light pages (no flash). */
:root{--dip:var(--bg)}
@media (prefers-color-scheme:dark){:root:not([data-scheme="light"]){--dip:#000}}
:root[data-scheme="dark"]{--dip:#000}

/* Static grain over everything, as in the BO3 front end (no animation). */
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Menu line: one BO3-timed menu item between two fading hairlines.
   Idle: light label. Selected: 50 ms snap to full-height square brackets on both sides, lit label. */
.menu{display:flex;align-items:center;justify-content:center;gap:clamp(14px,1.8vw,24px)}
.menu .rule{height:1px;width:clamp(36px,8vw,112px);background:linear-gradient(to right,transparent,color-mix(in srgb,var(--ink) 40%,transparent))}
.menu .rule.r{transform:scaleX(-1)}
.mi{position:relative;display:inline-flex;align-items:center;height:clamp(28px,3.4vh,34px);padding:0 1.05em 0 1em;isolation:isolate;
  font:500 12px/1 "Anybody Var",ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial,sans-serif;font-stretch:80%;
  letter-spacing:.36em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  color:color-mix(in srgb,var(--ink) 74%,transparent);cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;
  transition:color 50ms linear}
.mi .tx{position:relative;z-index:2;margin-right:-.36em}
.mi .bar{position:absolute;inset:0;z-index:1;border:1px solid var(--ink);opacity:0;transition:opacity 50ms linear;
  -webkit-mask:linear-gradient(90deg,#000 0 7px,transparent 7px calc(100% - 7px),#000 calc(100% - 7px));
  mask:linear-gradient(90deg,#000 0 7px,transparent 7px calc(100% - 7px),#000 calc(100% - 7px))}
.mi:hover,.mi:focus-visible{color:var(--ink)}
.mi:hover .bar,.mi:focus-visible .bar{opacity:1}

/* Flicker-in (BO3 'Bounce' approximation; dips never below .6) */
@keyframes flick{0%{opacity:0}36%{opacity:1}50%{opacity:.6}73%{opacity:1}88%{opacity:.8}100%{opacity:1}}
.menu.intro .rule,.menu.intro .tx{opacity:0}
.menu.intro .rule{animation:flick .3s linear forwards;animation-delay:calc(var(--t0,0ms) + 300ms)}
.menu.intro .tx{animation:flick .3s linear forwards;animation-delay:calc(var(--t0,0ms) + 120ms)}
/* 'Press start' breathing on the label until first interaction (stops by itself after two cycles) */
@keyframes breathe{0%{opacity:1}40%{opacity:.45}48%{opacity:.45}88%{opacity:1}100%{opacity:1}}
.mi.breathe .tx{animation:breathe 2.5s ease-in-out 2}
.menu.intro .mi.breathe .tx{animation:flick .3s linear forwards,breathe 2.5s ease-in-out 2;animation-delay:calc(var(--t0,0ms) + 120ms),calc(var(--t0,0ms) + 900ms)}

/* Title flicker-in (BO3 timing) and glitch strips (3 pops only) */
@keyframes title-in{0%{opacity:0}4.5%{opacity:.11}8.8%{opacity:.22}13.4%{opacity:.33}17.7%{opacity:.44}20.6%{opacity:.51}34.5%{opacity:.23}74.4%{opacity:.7}80.4%{opacity:.77}86%{opacity:.84}90.8%{opacity:.89}100%{opacity:1}}
.gl{position:absolute;inset:0;pointer-events:none;visibility:hidden;z-index:3}
.gl.on{visibility:visible}
.gl-s{position:absolute;left:0;top:0;width:100%;color:rgb(var(--web));opacity:.8}
.gl-s:nth-child(2n){color:var(--ink);opacity:.55}

/* Page transitions: old content slides left and fades, dip to --dip, new content slides in from the right */
.dip{position:fixed;inset:0;z-index:50;pointer-events:none;background:var(--dip);opacity:0}
body.leaving .dip{animation:dip-in 90ms linear forwards}
body.leaving .slide{animation:slide-out 129ms cubic-bezier(0,0,.2,1) forwards}
@keyframes dip-in{to{opacity:1}}
@keyframes slide-out{to{transform:translateX(-40vw);opacity:0}}
html.arrive .dip{opacity:1;animation:dip-out 120ms linear 60ms forwards}
html.arrive .slide{animation:slide-in 200ms cubic-bezier(0,0,.2,1) 40ms both}
@keyframes dip-out{to{opacity:0}}
@keyframes slide-in{from{transform:translateX(40vw);opacity:0}to{transform:none;opacity:1}}

@media (prefers-reduced-motion:reduce){
  body{transition:none}
  .mi,.mi .bar{transition:none}
  .menu.intro .rule,.menu.intro .tx,.mi.breathe .tx{animation:none;opacity:1}
  .gl{display:none}
  body.leaving .slide{animation:none}
  body.leaving .dip{animation:dip-in 150ms linear forwards}
  html.arrive .slide{animation:none}
  html.arrive .dip{animation:dip-out 150ms linear forwards}
}