@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; src: url('/fonts/bricolage-200-800-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; src: url('/fonts/bricolage-200-800-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 300 700; font-display: swap; src: url('/fonts/source-serif-italic-300-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 300 700; font-display: swap; src: url('/fonts/source-serif-italic-300-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/fonts/source-serif-300-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/fonts/source-serif-300-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/plex-mono-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/plex-mono-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/plex-mono-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/plex-mono-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/plex-mono-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/plex-mono-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* inotok.com
   The site has two surfaces. Light is the reading room: warm bone paper, a serif text face, a wide
   measure. Dark is the instrument: the board, the ticker, the market tables, the tool outputs, set in
   mono on graphite. Everything else is the rhythm between them.
   Fonts are self-hosted (see _src/fonts.py). No external requests anywhere. */

*, *::before, *::after { box-sizing: border-box; }

:root {
  /* surfaces */
  --board: #101114;
  --board-2: #191B21;
  --board-3: #23262E;
  --paper: #F2EFE8;
  --bone: #FBFAF7;
  --ink: #15171C;
  --ink-2: #4A4F5A;
  --line: #DDD8CC;

  /* accents */
  --amber: #F5A524;
  --amber-deep: #C77C0B;
  --cyan: #3EC3DF;
  --cyan-deep: #1B8CA6;
  --violet: #B487F5;
  --up: #128A62;
  --down: #C2372F;

  /* roles, swapped inside dark blocks */
  --bg: var(--paper);
  --surface: var(--bone);
  --tx: var(--ink);
  --tx-dim: var(--ink-2);
  --rule: var(--line);
  --accent: var(--amber-deep);
  --pos: var(--up);
  --neg: var(--down);
  --shadow: 0 1px 2px rgba(21,23,28,.05), 0 12px 28px -18px rgba(21,23,28,.35);

  /* type */
  --display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --r: 14px;
  --r-s: 9px;
  --wrap: 1200px;
}

.dark, .sec--dark, .board, .rail, .ftr, .tool__out, .phero__in, .ahero__in, .gate {
  --bg: var(--board);
  --surface: var(--board-2);
  --tx: #F4F2ED;
  --tx-dim: #9AA0AC;
  --rule: #2C3038;
  --accent: var(--amber);
  --pos: #2FBF8F;
  --neg: #E4574F;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 20px 40px -24px rgba(0,0,0,.8);
  color: var(--tx);
}

html { scroll-behavior: smooth; scroll-padding-top: 92px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--serif); font-size: 1.0625rem; line-height: 1.62;
  font-variant-numeric: oldstyle-nums; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; }
img { height: auto; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
.sr, .hp { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--board); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 var(--r-s) 0; }
.skip:focus { left: 0; }
:focus-visible { outline: 2.5px solid var(--cyan-deep); outline-offset: 3px; border-radius: 3px; }
.dark :focus-visible, .sec--dark :focus-visible, .ftr :focus-visible, .board :focus-visible { outline-color: var(--amber); }

/* ---------- typography ---------- */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 640; line-height: 1.06; letter-spacing: -.022em; margin: 0 0 .5em; font-variant-numeric: lining-nums; font-stretch: 92%; }
h1 { font-size: clamp(2.1rem, 1.35rem + 3.2vw, 3.9rem); }
h2 { font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.5rem); }
h3 { font-size: clamp(1.12rem, 1rem + .5vw, 1.36rem); line-height: 1.2; }
p { margin: 0 0 1.05em; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.02em; }
.kicker { font-family: var(--mono); font-size: .715rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 .8rem; font-weight: 500; }
.kicker a { text-decoration: none; }
.kicker a:hover { text-decoration: underline; }
.lede { font-size: clamp(1.12rem, 1.02rem + .45vw, 1.35rem); line-height: 1.5; color: var(--tx); margin: 0 0 1.2rem; max-width: 62ch; }
.lede--art { font-family: var(--display); font-weight: 480; font-stretch: 96%; letter-spacing: -.012em; }
.dim { color: var(--tx-dim); }
.is-up { color: var(--pos); }
.is-down { color: var(--neg); }

/* ---------- layout ---------- */
.wrap { width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2.4rem, 760px); margin-inline: auto; }
.sec { padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0; position: relative; }
.sec--top { padding-top: clamp(1.6rem, 1rem + 2vw, 2.6rem); }
.sec--alt { background: var(--bone); }
.sec--dark { background: var(--board); }
.sec--dark .sec__head h2, .sec--dark h3 { color: #F4F2ED; }
.sec__head { margin-bottom: clamp(1.6rem, 1rem + 2vw, 2.6rem); max-width: 74ch; }
.sec__foot { margin: 2rem 0 0; }
.grid { display: grid; gap: clamp(1.8rem, 1rem + 3vw, 3.4rem); }
.grid--2 { grid-template-columns: 1fr; }
.grid--side { grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .grid--2 { grid-template-columns: 1fr 1fr; }
  .grid--side { grid-template-columns: minmax(0, 1fr) 320px; }
}

.btn {
  display: inline-flex; align-items: center; gap: .5rem; text-decoration: none;
  font-family: var(--display); font-weight: 620; font-size: .95rem; font-stretch: 94%;
  padding: .72rem 1.25rem; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.btn svg { width: 1.05em; height: 1.05em; }
.btn--primary { background: var(--ink); color: var(--bone); }
.btn--primary:hover { background: var(--amber-deep); transform: translateY(-2px); }
.btn--ghost { border-color: var(--rule); color: var(--tx); background: transparent; }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.sec--dark .btn--primary, .ftr .btn--primary { background: var(--amber); color: #15171C; }
.sec--dark .btn--primary:hover, .ftr .btn--primary:hover { background: #FFC65C; }

/* ---------- ticker rail ---------- */
.rail { background: var(--board); color: #F4F2ED; overflow: hidden; position: relative; display: flex; align-items: center; border-bottom: 1px solid #2C3038; }
.rail__track { display: flex; gap: 2.2rem; padding: .42rem 0; white-space: nowrap; animation: rail 96s linear infinite; will-change: transform; }
.rail:hover .rail__track { animation-play-state: paused; }
@keyframes rail { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tick { display: inline-flex; align-items: baseline; gap: .42rem; font-size: .76rem; }
.tick__sym { color: var(--amber); letter-spacing: .06em; }
.tick b { font-weight: 500; color: #F4F2ED; }
.tick__ch { color: #9AA0AC; }
.rail .is-up { color: #2FBF8F; }
.rail .is-down { color: #E4574F; }
.rail__all { flex: none; padding: .42rem 1rem; font-size: .72rem; text-decoration: none; color: #9AA0AC; background: linear-gradient(90deg, rgba(16,17,20,0), var(--board) 22%); display: inline-flex; align-items: center; gap: .35rem; position: relative; z-index: 2; }
.rail__all:hover { color: var(--amber); }
.rail__all svg { width: 1em; height: 1em; }
@media (max-width: 700px) { .rail__all { display: none; } }

/* ---------- header ---------- */
.hdr { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .25s ease, background .25s ease; }
.hdr.is-stuck { border-bottom-color: var(--line); background: color-mix(in srgb, var(--paper) 96%, transparent); }
.hdr__in { display: flex; align-items: center; gap: 1.4rem; padding: .7rem 0; width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto; }
.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 1.32rem; letter-spacing: -.03em; font-stretch: 88%; flex: none; }
.brand__mark { width: 1.5em; height: 1.5em; color: currentColor; }
.brand__mark svg { width: 100%; height: 100%; }
.brand__name i { font-style: normal; color: var(--amber-deep); }
.ftr .brand__name i, .brand--ftr .brand__name i { color: var(--amber); }
.nav { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.nav > a {
  text-decoration: none; font-family: var(--display); font-weight: 560; font-size: .92rem; font-stretch: 94%;
  padding: .48rem .68rem; border-radius: 999px; position: relative; white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.nav > a:hover { background: rgba(21,23,28,.06); }
.nav > a[aria-current="page"] { color: var(--amber-deep); }
.nav__accent { border: 1.5px solid var(--line); }
.nav__accent:hover { border-color: var(--amber-deep); }
.nav__dot { display: inline-block; width: .42rem; height: .42rem; border-radius: 50%; background: var(--up); margin-left: .34rem; vertical-align: middle; animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.nav__langs { display: inline-flex; gap: .15rem; margin-left: .4rem; padding-left: .6rem; border-left: 1px solid var(--line); }
.nav > .nav__langs .nav__lang {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-decoration: none;
  padding: .38rem .5rem; border-radius: 999px; color: var(--ink-2); transition: color .18s ease, background .18s ease;
}
.nav > .nav__langs .nav__lang:hover { color: var(--amber-deep); background: rgba(21,23,28,.06); }
.burger { display: none; background: none; border: 0; padding: .5rem; cursor: pointer; }
.burger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; margin: 4px 0; transition: transform .25s ease, opacity .2s ease; }

@media (max-width: 940px) {
  .burger { display: block; margin-left: auto; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(84vw, 360px); background: var(--bone);
    flex-direction: column; align-items: stretch; gap: .1rem; padding: 5.5rem 1.4rem 2rem;
    transform: translateX(105%); visibility: hidden; box-shadow: var(--shadow); overflow-y: auto;
    transition: transform .3s cubic-bezier(.4,0,.2,1), visibility 0s linear .3s;
  }
  .nav.is-open { transform: none; visibility: visible; transition: transform .3s cubic-bezier(.4,0,.2,1), visibility 0s; }
  .nav > a { font-size: 1.18rem; padding: .7rem .8rem; border-radius: var(--r-s); }
  .nav__accent { border: 0; border-top: 1px solid var(--line); border-radius: 0; margin-top: .4rem; padding-top: .9rem; }
  .nav__langs { margin: .8rem 0 0; padding: .8rem 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .nav > .nav__langs .nav__lang { font-size: .9rem; padding: .5rem .8rem; }
  body.nav-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  body.nav-open .burger span:nth-child(2) { opacity: 0; }
  body.nav-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* ---------- home hero and the board ---------- */
.hero { padding: clamp(2.4rem, 1.4rem + 4vw, 4.6rem) 0 clamp(2.6rem, 1.6rem + 4vw, 4.6rem); background:
  radial-gradient(80% 120% at 12% 0%, rgba(245,165,36,.13), transparent 58%),
  radial-gradient(70% 100% at 95% 15%, rgba(62,195,223,.12), transparent 60%), var(--paper); }
.hero__in { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.4rem); align-items: center; }
@media (min-width: 1000px) { .hero__in { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.hero__title { margin-bottom: .55rem; font-weight: 700; font-stretch: 86%; letter-spacing: -.038em; }
.hero__tail { color: var(--amber-deep); font-weight: 380; font-stretch: 100%; letter-spacing: -.02em; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }

.board { background: var(--board); border-radius: var(--r); padding: 1.15rem 1.15rem 1rem; box-shadow: 0 30px 60px -30px rgba(21,23,28,.55), inset 0 1px 0 rgba(255,255,255,.07); }
.board__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: .7rem; border-bottom: 1px solid #2C3038; }
.board__k { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--amber); margin: 0; }
.board__state { font-size: .68rem; color: #9AA0AC; margin: 0; display: inline-flex; align-items: center; gap: .4rem; }
.board__state::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: #9AA0AC; }
.board__state.is-live::before { background: #2FBF8F; animation: pulse 2.6s ease-in-out infinite; }
.board__rows { display: grid; }
.board__row {
  display: grid; grid-template-columns: 3.6rem minmax(0, 1fr) auto auto; align-items: center; gap: .55rem;
  padding: .62rem .1rem; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background .18s ease;
}
.board__row:last-child { border-bottom: 0; }
.board__row:hover { background: rgba(255,255,255,.045); }
.board__sym { font-size: .78rem; color: var(--amber); font-weight: 500; letter-spacing: .03em; }
.board__name { font-size: .84rem; color: #9AA0AC; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board__flaps { display: inline-flex; gap: 1px; font-size: .98rem; font-weight: 500; color: #F4F2ED; }
.board__ch { font-size: .76rem; min-width: 4.6rem; text-align: right; }
.flap {
  display: inline-block; min-width: .62em; text-align: center; padding: .13em .04em;
  background: linear-gradient(#2A2E37 0 49.5%, #1E2229 50.5% 100%);
  border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.flap.is-sep { background: none; box-shadow: none; min-width: .34em; }
.flap.is-flip { animation: flip .34s cubic-bezier(.45,0,.25,1); }
@keyframes flip {
  0% { transform: rotateX(0deg); }
  49% { transform: rotateX(-88deg); filter: brightness(.5); }
  51% { transform: rotateX(88deg); filter: brightness(.5); }
  100% { transform: rotateX(0deg); }
}
.board__note { margin: .85rem 0 0; font-size: .74rem; line-height: 1.45; color: #7C8290; }

/* ---------- page heroes ---------- */
.phero { position: relative; min-height: clamp(300px, 34vw, 460px); display: flex; align-items: flex-end; padding: clamp(2.4rem, 1.5rem + 4vw, 4.5rem) 0 clamp(1.8rem, 1rem + 3vw, 3rem); background: var(--board); overflow: hidden; }
.phero--short { min-height: clamp(220px, 24vw, 320px); }
.phero__media { position: absolute; inset: 0; }
.phero__media img, .phero__video { width: 100%; height: 100%; object-fit: cover; }
.phero__video { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.phero__video.is-on { opacity: 1; }
.phero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,17,20,.5) 0%, rgba(16,17,20,.62) 45%, rgba(16,17,20,.92) 100%); }
.phero__in { position: relative; color: #F4F2ED; }
.phero__in h1 { color: #fff; max-width: 20ch; }
.phero__in .lede { color: rgba(244,242,237,.86); }
.phero__in .kicker { color: var(--amber); }
.phero__meta { font-size: .76rem; color: rgba(244,242,237,.6); margin: 0; }

.ahero { position: relative; min-height: clamp(320px, 40vw, 540px); display: flex; align-items: flex-end; padding: clamp(3rem, 2rem + 4vw, 5rem) 0 clamp(1.8rem, 1rem + 3vw, 3rem); background: var(--board); overflow: hidden; }
.ahero__media { position: absolute; inset: 0; }
.ahero__media img { width: 100%; height: 100%; object-fit: cover; }
.ahero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,17,20,.35) 0%, rgba(16,17,20,.55) 40%, rgba(16,17,20,.93) 100%); }
.ahero__in { position: relative; color: #F4F2ED; }
.ahero__in h1 { color: #fff; max-width: 18ch; }
.ahero__in .kicker { color: var(--amber); }
.ahero__meta { font-size: .76rem; color: rgba(244,242,237,.66); margin: .4rem 0 0; }

/* ---------- breadcrumbs ---------- */
.crumbs { margin: 0 0 1.6rem; font-family: var(--mono); font-size: .72rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; color: var(--tx-dim); }
.crumbs li + li::before { content: "/"; margin-right: .35rem; opacity: .45; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }

/* ---------- cards ---------- */
.cards { display: grid; gap: clamp(1.1rem, .6rem + 1.6vw, 1.8rem); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.cards--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card { display: flex; flex-direction: column; text-decoration: none; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 45%, var(--rule)); }
.card__img { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--board-2); overflow: hidden; }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.6,.2,1); }
.card:hover .card__img img { transform: scale(1.045); }
.card__dept { position: absolute; left: .7rem; top: .7rem; background: rgba(16,17,20,.82); color: var(--amber); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; padding: .28rem .6rem; border-radius: 999px; backdrop-filter: blur(6px); }
.card__body { display: flex; flex-direction: column; gap: .3rem; padding: 1.05rem 1.1rem 1.2rem; flex: 1; }
.card__kicker { margin: 0 0 .1rem; }
.card__body h3 { margin: 0 0 .25rem; }
.card__body p { margin: 0; font-size: .935rem; color: var(--tx-dim); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card__meta { margin-top: auto; padding-top: .7rem; font-size: .7rem; color: var(--tx-dim); }
.card--wide .card__img { aspect-ratio: 16 / 10; }
.card--wide .card__body h3 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem); }
.card--wide .card__body p { -webkit-line-clamp: 4; line-clamp: 4; font-size: 1rem; }
.lead-grid { display: grid; gap: clamp(1.1rem, .6rem + 1.6vw, 1.8rem); }
.lead-grid__side { display: grid; gap: clamp(1.1rem, .6rem + 1.6vw, 1.8rem); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
@media (min-width: 1000px) { .lead-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); } .lead-grid__side { grid-template-columns: 1fr; } }

/* department cards */
.depts { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.dcard { display: flex; flex-direction: column; gap: .8rem; padding: 1.3rem 1.2rem; text-decoration: none; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease; }
.dcard:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow); }
.dcard__ico { width: 2.2rem; height: 2.2rem; color: var(--accent); }
.dcard__ico svg { width: 100%; height: 100%; }
.dcard__body h3 { margin: 0 0 .2rem; }
.dcard__body > p { margin: 0 0 .8rem; font-size: .88rem; color: var(--tx-dim); }
.dcard__lead { display: block; font-family: var(--display); font-weight: 520; font-size: .95rem; line-height: 1.3; border-top: 1px solid var(--rule); padding-top: .75rem; }
.dcard__n { display: block; margin-top: .5rem; font-size: .68rem; color: var(--tx-dim); letter-spacing: .1em; text-transform: uppercase; }

/* ---------- live chips ---------- */
.live { border: 1px solid var(--rule); border-radius: var(--r); padding: .95rem 1rem 1rem; background: var(--surface); margin: 0 0 1.4rem; }
.live__k { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 .7rem; }
.live__row { display: flex; flex-wrap: wrap; gap: .45rem; }
.live__note { margin: .8rem 0 0; font-size: .7rem; color: var(--tx-dim); line-height: 1.45; }
.chip { display: inline-flex; align-items: baseline; gap: .4rem; text-decoration: none; background: var(--bg); border: 1px solid var(--rule); border-radius: 999px; padding: .34rem .7rem; font-size: .78rem; transition: border-color .18s ease, transform .18s ease; }
.chip:hover { border-color: var(--accent); transform: translateY(-1px); }
.chip__sym { font-size: .68rem; color: var(--accent); letter-spacing: .05em; }
.chip__name { color: var(--tx-dim); font-size: .76rem; }
.chip__val { font-weight: 500; }
.chip__ch { font-size: .7rem; }
.sec--dark .live, .sec--dark .chip { background: var(--board-2); }
.sec--dark .chip { background: var(--board); }

/* ---------- tables ---------- */
.tblwrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); }
.tbl { width: 100%; border-collapse: collapse; font-size: .885rem; min-width: 560px; }
.tbl th, .tbl td { padding: .68rem .8rem; text-align: left; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.tbl thead th { font-family: var(--mono); font-size: .66rem; letter-spacing: .11em; text-transform: uppercase; color: var(--tx-dim); font-weight: 500; white-space: nowrap; background: var(--bg); position: sticky; top: 0; z-index: 1; }
.tbl--sort thead th[data-sort] { cursor: pointer; user-select: none; }
.tbl--sort thead th[data-sort]:hover { color: var(--accent); }
.tbl--sort thead th.is-sorted::after { content: "▾"; margin-left: .3rem; color: var(--accent); }
.tbl--sort thead th.is-sorted.is-asc::after { content: "▴"; }
.tbl tbody tr:last-child th, .tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background .16s ease; }
.tbl tbody tr:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.tbl .num { text-align: right; white-space: nowrap; }
.tbl tbody th { font-weight: 400; }
.tbl__name { display: flex; align-items: baseline; gap: .45rem; }
.tbl__name b { font-family: var(--display); font-weight: 600; font-size: .95rem; }
.tbl__name .mono { font-size: .68rem; }
.tbl__tag { display: block; font-size: .7rem; color: var(--tx-dim); margin-top: .1rem; }
.spark { width: 84px; height: 26px; color: var(--pos); display: block; }
.spark.is-down { color: var(--neg); }
.spark--metal { width: 100%; height: 36px; margin-top: .6rem; }
tr.is-flash { animation: flash 1.1s ease-out; }
@keyframes flash { from { background: color-mix(in srgb, var(--accent) 22%, transparent); } to { background: transparent; } }
@media (max-width: 860px) { .hide-m { display: none; } }
@media (max-width: 620px) { .hide-s { display: none; } .tbl { min-width: 380px; } }

/* market page blocks */
.mkt-top { display: grid; gap: 1.6rem; align-items: center; margin-bottom: 1.6rem; }
@media (min-width: 820px) { .mkt-top { grid-template-columns: minmax(0, 1fr) 230px; } }
.stats { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; background: var(--rule); }
.stats li { background: var(--surface); padding: .9rem 1rem; display: flex; flex-direction: column; gap: .15rem; }
.stats__k { font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tx-dim); }
.stats b { font-size: 1.14rem; font-weight: 500; }
.stats i { font-style: normal; font-size: .74rem; }
.fng { text-align: center; color: var(--tx); }
.fng svg { width: 100%; max-width: 220px; margin-inline: auto; }
.fng__v { font-size: 2rem; font-weight: 600; margin: -.4rem 0 0; }
.fng__l { margin: 0; font-family: var(--display); font-weight: 600; font-size: .95rem; color: var(--accent); }
.metals { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.metal { border: 1px solid var(--rule); border-radius: var(--r); padding: 1.1rem 1.2rem 1.2rem; background: var(--surface); }
.metal__k { font-size: .66rem; letter-spacing: .16em; color: var(--accent); margin: 0 0 .3rem; }
.metal h3 { margin: 0 0 .5rem; }
.metal__val { font-size: 1.6rem; font-weight: 600; margin: 0; }
.metal__unit { font-size: .72rem; color: var(--tx-dim); margin: 0 0 .4rem; }
.metal__g { font-size: .8rem; margin: 0 0 .2rem; }
.metal__ch { font-size: .8rem; margin: 0; }
.curpick { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.curpick > span { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tx-dim); margin-right: .3rem; }
.curpick button { background: var(--surface); border: 1px solid var(--rule); border-radius: 999px; padding: .3rem .8rem; font-size: .76rem; cursor: pointer; transition: all .16s ease; }
.curpick button:hover { border-color: var(--accent); }
.curpick button.is-on { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.datanote { font-size: .72rem; color: var(--tx-dim); line-height: 1.55; margin-top: 2rem; max-width: 74ch; }
.pulse { display: grid; gap: 1.6rem; }
@media (min-width: 980px) { .pulse { grid-template-columns: minmax(0, 1fr) 250px; align-items: start; } }
.pulse__side { display: grid; gap: 1.4rem; }
.pulse__side .stats { grid-template-columns: 1fr; }

/* ---------- prose ---------- */
.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(1.34rem, 1.1rem + 1vw, 1.75rem); margin: 2.2em 0 .55em; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 1.1em; }
.prose b, .prose strong { font-weight: 650; }
.prose a { color: var(--ink); text-decoration-color: color-mix(in srgb, var(--amber-deep) 65%, transparent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose a:hover { color: var(--amber-deep); }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.prose li { margin-bottom: .45em; }
.gterm { text-decoration: none; border-bottom: 1px dotted var(--amber-deep); color: inherit; }
.gterm:hover { color: var(--amber-deep); border-bottom-style: solid; }

.side { display: grid; gap: 1.3rem; align-content: start; }
.side__block { border-top: 2px solid var(--ink); padding-top: .85rem; }
.side__block h3 { font-size: .78rem; font-family: var(--mono); font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--tx-dim); margin: 0 0 .6rem; }
.linklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.linklist li { border-bottom: 1px solid var(--rule); }
.linklist li:last-child { border-bottom: 0; }
.linklist a { display: block; padding: .55rem 0; text-decoration: none; font-family: var(--display); font-weight: 520; font-size: .93rem; line-height: 1.3; transition: color .16s ease, padding-left .16s ease; }
.linklist a:hover { color: var(--accent); padding-left: .3rem; }
.linklist--wide a { display: flex; justify-content: space-between; gap: 1.2rem; align-items: baseline; }
.linklist--wide span { font-family: var(--serif); font-size: .84rem; color: var(--tx-dim); font-weight: 400; text-align: right; }

.facts { list-style: none; margin: 0 0 .4rem; padding: 0; border-top: 2px solid var(--ink); }
.facts li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.facts__k { font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: var(--tx-dim); flex: none; max-width: 45%; }
.facts__v { font-family: var(--display); font-weight: 560; font-size: .92rem; text-align: right; }

.tip { border-left: 3px solid var(--amber); background: color-mix(in srgb, var(--amber) 9%, var(--surface)); border-radius: 0 var(--r-s) var(--r-s) 0; padding: 1.05rem 1.2rem; margin: 2rem 0; max-width: 68ch; }
.tip p:last-child { margin: 0; font-size: .97rem; }
.faq { max-width: 68ch; margin: 2.4rem 0 0; }
.faq h2 { font-size: 1.3rem; margin-bottom: .9rem; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; padding: .85rem 0; font-family: var(--display); font-weight: 580; font-size: 1rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--accent); flex: none; transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 1rem; color: var(--tx-dim); font-size: .96rem; }

.share { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: 2.4rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--rule); }
.share .kicker { margin: 0 .4rem 0 0; }
.share a, .share button { font-family: var(--mono); font-size: .74rem; text-decoration: none; padding: .34rem .75rem; border: 1px solid var(--rule); border-radius: 999px; background: transparent; cursor: pointer; transition: all .16s ease; }
.share a:hover, .share button:hover { border-color: var(--accent); color: var(--accent); }
.terms { margin: 1.4rem 0 0; }
.terms .kicker { margin-bottom: .55rem; }
.terms ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.terms a { display: inline-block; font-size: .76rem; padding: .26rem .65rem; border: 1px solid var(--rule); border-radius: 999px; text-decoration: none; transition: all .16s ease; }
.terms a:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- explainers ---------- */
.exps { display: grid; gap: .1rem; }
.exps--3 { gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ecard { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem .2rem; text-decoration: none; border-bottom: 1px solid var(--rule); transition: padding-left .2s ease, border-color .2s ease; }
.ecard:hover { padding-left: .5rem; border-color: var(--accent); }
.ecard__n { font-size: .76rem; color: var(--accent); flex: none; padding-top: .18rem; }
.ecard__body h3 { margin: 0 0 .2rem; }
.ecard__body p { margin: 0; font-size: .88rem; color: var(--tx-dim); line-height: 1.5; }
.ecard__go { margin-left: auto; flex: none; width: 1.2rem; color: var(--tx-dim); transition: transform .2s ease, color .2s ease; }
.ecard__go svg { width: 100%; }
.ecard:hover .ecard__go { transform: translateX(4px); color: var(--accent); }
.exps--3 .ecard { border: 1px solid var(--rule); border-radius: var(--r); padding: 1.1rem 1.1rem 1.2rem; flex-direction: column; gap: .5rem; background: var(--surface); }
.exps--3 .ecard:hover { padding-left: 1.1rem; transform: translateY(-3px); }
.exps--3 .ecard__go { margin-left: 0; }
.exp__head { max-width: 66ch; margin-bottom: 1.6rem; }
.exp__n { display: inline-block; font-size: .72rem; letter-spacing: .12em; color: var(--tx-dim); border: 1px solid var(--rule); border-radius: 999px; padding: .22rem .7rem; margin-bottom: 1rem; }
.nextbox { display: flex; align-items: center; gap: 1rem; padding: 1.2rem 1.3rem; border: 1px solid var(--rule); border-radius: var(--r); text-decoration: none; background: var(--surface); margin-bottom: 2.4rem; transition: border-color .2s ease, transform .2s ease; }
.nextbox:hover { border-color: var(--accent); transform: translateY(-3px); }
.nextbox .kicker { margin: 0 0 .15rem; }
.nextbox b { font-family: var(--display); font-size: 1.1rem; font-weight: 620; }
.nextbox__go { margin-left: auto; width: 1.5rem; color: var(--accent); flex: none; }
.nextbox__go svg { width: 100%; }

/* ---------- tools ---------- */
.tools { display: grid; gap: 1.05rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.tools--3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.tcard { display: flex; flex-direction: column; gap: .75rem; padding: 1.25rem 1.2rem 1.1rem; text-decoration: none; border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease; }
.tcard:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow); }
.tcard__ico { width: 2rem; height: 2rem; color: var(--accent); }
.tcard__ico svg { width: 100%; height: 100%; }
.tcard__body .kicker { margin: 0 0 .25rem; }
.tcard__body h3 { margin: 0 0 .3rem; }
.tcard__body p { margin: 0; font-size: .88rem; color: var(--tx-dim); line-height: 1.5; }
.tcard__go { margin-top: auto; padding-top: .6rem; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: .35rem; }
.tcard__go svg { width: 1em; height: 1em; transition: transform .2s ease; }
.tcard:hover .tcard__go svg { transform: translateX(4px); }

.tool { background: var(--board); border-radius: var(--r); padding: clamp(1.1rem, .6rem + 1.6vw, 1.8rem); color: #F4F2ED; box-shadow: 0 30px 60px -34px rgba(21,23,28,.5); }
.tool__grid { display: grid; gap: 1.6rem; }
@media (min-width: 900px) { .tool__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.tool__controls { display: grid; gap: 1.05rem; align-content: start; }
.tool__field { display: grid; gap: .35rem; }
.tool__label { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #9AA0AC; }
.tool__row { display: flex; align-items: center; gap: .8rem; }
.tool__row input[type=range] { flex: 1; accent-color: var(--amber); min-width: 0; }
.tool__row output { font-family: var(--mono); font-size: .88rem; min-width: 5.4rem; text-align: right; color: var(--amber); font-variant-numeric: tabular-nums; }
.tool input[type=number], .tool input[type=text], .tool input[type=time], .tool select {
  background: var(--board-3); border: 1px solid #353A44; border-radius: var(--r-s); padding: .5rem .65rem; color: #F4F2ED; font-family: var(--mono); font-size: .88rem; width: 100%;
}
.tool__opts { display: flex; flex-wrap: wrap; gap: .35rem; }
.tool__opt { background: var(--board-3); border: 1px solid #353A44; border-radius: 999px; padding: .34rem .78rem; font-size: .78rem; cursor: pointer; transition: all .16s ease; }
.tool__opt:hover { border-color: var(--amber); }
.tool__opt.is-on { background: var(--amber); border-color: var(--amber); color: #15171C; font-weight: 600; }
.tool__checks { display: grid; gap: .4rem; }
.tool__check { display: flex; align-items: flex-start; gap: .5rem; font-size: .86rem; cursor: pointer; }
.tool__check input { accent-color: var(--amber); margin-top: .25rem; }
.tool__check .hint { color: #7C8290; font-style: normal; font-size: .78rem; }
.tool__out { background: var(--board-2); border-radius: var(--r-s); padding: 1.15rem 1.2rem; }
.tool__headline { margin-bottom: 1rem; }
.tool__big { font-family: var(--mono); font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); font-weight: 600; color: var(--amber); line-height: 1.05; }
.tool__big small { display: block; font-family: var(--display); font-size: .74rem; font-weight: 500; letter-spacing: .11em; text-transform: uppercase; color: #9AA0AC; margin-top: .3rem; }
.tool__sub { margin: .5rem 0 0; font-size: .88rem; color: #9AA0AC; }
.tool__list { list-style: none; margin: 0 0 1rem; padding: 0; }
.tool__list li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid rgba(255,255,255,.07); font-size: .875rem; align-items: baseline; }
.tool__list li:last-child { border-bottom: 0; }
.tool__list .k { color: #9AA0AC; }
.tool__list .v { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.tool__list .n { flex-basis: 100%; font-size: .76rem; color: #7C8290; }
.tool__bars { display: grid; gap: .5rem; margin-bottom: 1rem; }
.tool__bar { display: grid; grid-template-columns: minmax(5.5rem, auto) 1fr auto; gap: .7rem; align-items: center; font-size: .82rem; }
.tool__bar .track { height: .5rem; background: rgba(255,255,255,.09); border-radius: 999px; overflow: hidden; }
.tool__bar .fill { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--amber)); border-radius: 999px; transition: width .4s cubic-bezier(.3,.7,.3,1); }
.tool__bar.is-warn .fill { background: linear-gradient(90deg, #E4574F, #F5A524); }
.tool__bar .val { font-family: var(--mono); font-size: .8rem; text-align: right; min-width: 4.4rem; }
.tool__chart { width: 100%; height: auto; margin-bottom: 1rem; display: block; }
.tool__warn { font-size: .82rem; color: #E4574F; margin: .6rem 0 0; }
.tool__good { color: #2FBF8F; }
.tool__group { margin-bottom: 1.1rem; }
.tool__group h4 { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #9AA0AC; font-weight: 500; margin: 0 0 .5rem; }
.tool__actions { display: flex; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; }
.tool__actions button { background: transparent; border: 1px solid #353A44; border-radius: 999px; padding: .34rem .85rem; font-family: var(--mono); font-size: .74rem; cursor: pointer; transition: all .16s ease; }
.tool__actions button:hover { border-color: var(--amber); color: var(--amber); }
.tool__note { font-size: .76rem; color: #7C8290; margin: .8rem 0 0; line-height: 1.5; }
.tool__split { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin-bottom: 1rem; }
.tool__cell { background: rgba(255,255,255,.04); border-radius: var(--r-s); padding: .7rem .8rem; }
.tool__cell span { display: block; font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: #7C8290; margin-bottom: .2rem; }
.tool__cell b { font-family: var(--mono); font-size: 1.05rem; font-weight: 500; }

.checklist { border-top: 2px solid var(--ink); padding-top: .9rem; margin-bottom: 1.6rem; }
.checklist h3 { font-family: var(--mono); font-size: .78rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--tx-dim); margin: 0 0 .7rem; }
.checklist ul, .ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.checklist li { display: flex; gap: .6rem; align-items: flex-start; font-size: .93rem; line-height: 1.5; }
.checklist li svg { width: 1.05rem; height: 1.05rem; flex: none; color: var(--up); margin-top: .22rem; }
.ticks li { position: relative; padding-left: 1.1rem; font-size: .9rem; color: var(--tx-dim); line-height: 1.5; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .6em; width: .42rem; height: .42rem; border-radius: 50%; background: var(--accent); }

/* ---------- quiz ---------- */
.quiz { background: var(--board); border-radius: var(--r); padding: clamp(1.3rem, .8rem + 2vw, 2.4rem); color: #F4F2ED; min-height: 320px; }
.quiz__bar { height: 3px; background: rgba(255,255,255,.1); border-radius: 999px; margin-bottom: 1.6rem; overflow: hidden; }
.quiz__bar i { display: block; height: 100%; background: var(--amber); transition: width .35s ease; }
.quiz__n { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: #7C8290; margin: 0 0 .6rem; }
.quiz__q { font-family: var(--display); font-size: clamp(1.25rem, 1rem + 1.3vw, 1.8rem); font-weight: 640; letter-spacing: -.02em; margin: 0 0 1.4rem; max-width: 30ch; }
.quiz__as { display: grid; gap: .55rem; }
.quiz__a { text-align: left; background: var(--board-2); border: 1px solid #2C3038; border-radius: var(--r-s); padding: .85rem 1rem; cursor: pointer; font-size: .95rem; line-height: 1.45; transition: all .18s ease; }
.quiz__a:hover { border-color: var(--amber); transform: translateX(4px); }
.quiz__res { display: grid; gap: 1.4rem; }
@media (min-width: 760px) { .quiz__res { grid-template-columns: 200px minmax(0, 1fr); align-items: start; } }
.quiz__res img { border-radius: var(--r-s); width: 100%; }
.quiz__res h3 { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.1rem); margin: 0 0 .3rem; color: var(--c, var(--amber)); }
.quiz__claim { font-family: var(--mono); font-size: .8rem; letter-spacing: .06em; color: #9AA0AC; margin: 0 0 1rem; }
.qcards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.qcard { text-decoration: none; border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; background: var(--surface); transition: transform .22s ease, border-color .22s ease; display: block; }
.qcard:hover { transform: translateY(-4px); border-color: var(--c); }
.qcard__img { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--board-2); }
.qcard__img img { width: 100%; height: 100%; object-fit: cover; }
.qcard__body { display: block; padding: .9rem 1rem 1.1rem; }
.qcard__body h3 { margin: 0 0 .2rem; color: var(--c); }
.qcard__body p { margin: 0; font-size: .84rem; color: var(--tx-dim); }
.qtype { display: grid; gap: clamp(1.4rem, 1rem + 2vw, 2.6rem); }
@media (min-width: 860px) { .qtype { grid-template-columns: 320px minmax(0, 1fr); align-items: start; } }
.qtype__img img { border-radius: var(--r); }
.qtype__body h1 { color: var(--c); }
.qtype__claim { font-family: var(--mono); font-size: .86rem; letter-spacing: .05em; color: var(--tx-dim); margin: 0 0 1.2rem; }
.qtype__advice { border-left: 3px solid var(--c); padding-left: 1rem; font-size: .97rem; }

/* ---------- timeline ---------- */
.tlfilter { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: 2.2rem; }
.tlfilter .kicker { margin: 0 .5rem 0 0; }
.chip[data-track], .chip[data-filter] { background: var(--surface); border: 1px solid var(--rule); border-radius: 999px; padding: .32rem .8rem; font-size: .78rem; cursor: pointer; font-family: var(--display); font-weight: 520; transition: all .16s ease; }
.chip[data-track]:hover { border-color: var(--c, var(--accent)); }
.chip[data-track].is-on { background: var(--c, var(--ink)); border-color: var(--c, var(--ink)); color: #15171C; }
.chip[data-track="all"].is-on { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.tl { list-style: none; margin: 0; padding: 0; position: relative; }
.tl::before { content: ""; position: absolute; left: 4.6rem; top: 0; bottom: 0; width: 1px; background: var(--rule); }
.tl__year { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: 1.4rem; padding-bottom: 1.6rem; }
.tl__year[hidden] { display: none; }
.tl__y { font-size: 1.05rem; font-weight: 600; color: var(--accent); padding-top: .9rem; position: relative; }
.tl__y::after { content: ""; position: absolute; right: -1.1rem; top: 1.25rem; width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--bg); }
.tl__items { display: grid; gap: .9rem; padding-left: .9rem; }
.tl__item { border: 1px solid var(--rule); border-left: 3px solid var(--c); border-radius: var(--r-s); padding: .9rem 1.1rem 1rem; background: var(--surface); }
.tl__item[hidden] { display: none; }
.tl__track { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c); margin: 0 0 .3rem; }
.tl__item h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
.tl__item p { margin: 0; font-size: .91rem; color: var(--tx-dim); line-height: 1.55; }
@media (max-width: 640px) {
  .tl::before { left: 3.3rem; }
  .tl__year { grid-template-columns: 3.3rem minmax(0, 1fr); gap: .9rem; }
  .tl__y { font-size: .9rem; }
  .tl__y::after { right: -.75rem; }
  .tl__items { padding-left: .5rem; }
}
.tlmini { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.tlmini li { padding: .9rem 1rem; border-top: 2px solid var(--amber); background: rgba(255,255,255,.03); }
.tlmini span { display: block; font-size: .82rem; color: var(--amber); margin-bottom: .25rem; }
.tlmini b { font-family: var(--display); font-weight: 560; font-size: .95rem; line-height: 1.25; display: block; }

/* ---------- glossary ---------- */
.gsearch { position: relative; max-width: 420px; margin-bottom: 1.2rem; }
.gsearch input { width: 100%; padding: .7rem 1rem .7rem 2.6rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); font-family: var(--mono); font-size: .88rem; }
.gsearch__ico { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); width: 1.05rem; color: var(--tx-dim); }
.gsearch__ico svg { width: 100%; }
.gletters { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: 2rem; }
.gletters a { font-family: var(--mono); font-size: .8rem; text-decoration: none; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border: 1px solid var(--rule); border-radius: 50%; transition: all .16s ease; }
.gletters a:hover { border-color: var(--accent); color: var(--accent); }
.gsec { margin-bottom: 2.2rem; }
.gsec[hidden] { display: none; }
.gsec__l { font-size: 1.6rem; color: var(--accent); margin: 0 0 .6rem; border-bottom: 2px solid var(--ink); padding-bottom: .3rem; }
.gsec dl { margin: 0; }
.gitem { padding: .85rem 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 110px; }
.gitem[hidden] { display: none; }
.gitem:target { background: color-mix(in srgb, var(--amber) 13%, transparent); border-radius: var(--r-s); padding-inline: .8rem; }
.gitem dt { font-family: var(--display); font-weight: 640; font-size: 1.05rem; margin-bottom: .2rem; }
.gitem dd { margin: 0; font-size: .94rem; color: var(--tx-dim); line-height: 1.55; }
.gitem__links { display: inline; font-family: var(--mono); font-size: .74rem; }
.gitem__links a { color: var(--accent); text-decoration: none; }
.gitem__links a:hover { text-decoration: underline; }
.gempty { text-align: center; padding: 2rem 0; color: var(--tx-dim); }
.gmini { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.gmini a { display: block; padding: .85rem 1rem; text-decoration: none; border-top: 1px solid var(--rule); height: 100%; transition: background .16s ease; }
.gmini a:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.gmini b { display: block; font-family: var(--display); font-weight: 620; margin-bottom: .15rem; }
.gmini span { font-size: .84rem; color: var(--tx-dim); line-height: 1.45; }

/* ---------- poll ---------- */
.poll { border: 1px solid var(--rule); border-radius: var(--r); padding: 1.3rem 1.3rem 1.4rem; background: var(--surface); margin-top: 1.6rem; }
.poll h3 { margin: 0 0 1rem; }
.poll__opts { display: grid; gap: .45rem; }
.poll__opts button { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--bg); border: 1px solid var(--rule); border-radius: var(--r-s); padding: .62rem .85rem; cursor: pointer; font-size: .9rem; overflow: hidden; transition: border-color .16s ease; }
.poll__opts button:hover { border-color: var(--accent); }
.poll__opts button span, .poll__opts button b { position: relative; z-index: 1; }
.poll__opts button i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--v); background: color-mix(in srgb, var(--amber) 26%, transparent); transition: width .6s cubic-bezier(.3,.7,.3,1); z-index: 0; }
.poll__opts b { font-size: .82rem; color: var(--tx-dim); }
.poll__msg { margin: .8rem 0 0; font-size: .82rem; color: var(--accent); min-height: 1.2em; }

/* ---------- forms ---------- */
.form { max-width: 640px; margin: 1.6rem 0 2rem; }
.form__grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .form__grid { grid-template-columns: 1fr 1fr; } .form__row--full { grid-column: 1 / -1; } }
.form__row { display: grid; gap: .35rem; }
.form__row label { font-family: var(--mono); font-size: .7rem; letter-spacing: .11em; text-transform: uppercase; color: var(--tx-dim); }
.form input, .form select, .form textarea { padding: .68rem .8rem; border: 1px solid var(--rule); border-radius: var(--r-s); background: var(--bone); font-family: var(--serif); font-size: .98rem; width: 100%; }
.form textarea { resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--accent); }
.form__row--actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.2rem; }
.form__msg { margin: 0; font-size: .88rem; color: var(--up); }
.form__msg.is-err { color: var(--down); }
.form__note { font-size: .8rem; color: var(--tx-dim); margin-top: 1rem; }

/* ---------- footer ---------- */
.ftr { background: var(--board); color: #F4F2ED; padding-top: clamp(2.6rem, 1.6rem + 4vw, 4.5rem); margin-top: 0; }
.ftr__news { padding-bottom: clamp(2.4rem, 1.5rem + 3vw, 3.6rem); }
.news { display: grid; gap: 1.6rem; border: 1px solid #2C3038; border-radius: var(--r); padding: clamp(1.3rem, .8rem + 2vw, 2.2rem); background: linear-gradient(135deg, rgba(245,165,36,.1), rgba(62,195,223,.06)); }
@media (min-width: 860px) { .news { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); align-items: center; } }
.news h2 { margin: 0 0 .5rem; color: #fff; }
.news__text p { margin: 0; font-size: .95rem; color: #9AA0AC; }
.news__form { display: grid; gap: .6rem; }
.news__form input { padding: .75rem .9rem; border-radius: 999px; border: 1px solid #353A44; background: var(--board); color: #F4F2ED; font-family: var(--mono); font-size: .88rem; }
.news__form input:focus { border-color: var(--amber); }
.news__form .form__msg { margin: 0; font-size: .82rem; }
.ftr__grid { display: grid; gap: 2rem; padding-bottom: 2.4rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.ftr__brand { grid-column: span 2; max-width: 34ch; }
@media (max-width: 620px) { .ftr__brand { grid-column: span 1; } }
.ftr__brand p { font-size: .88rem; color: #9AA0AC; line-height: 1.6; margin: .9rem 0 0; }
.ftr__contact a { color: #F4F2ED; }
.ftr h3 { font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--amber); margin: 0 0 .9rem; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .42rem; }
.ftr__cols { grid-template-columns: 1fr 1fr; gap: .42rem 1rem; }
.ftr li a { text-decoration: none; font-size: .88rem; color: #C9CCD3; transition: color .16s ease; }
.ftr li a:hover { color: var(--amber); }
.ftr__note { font-size: .76rem; color: #7C8290; margin: 1rem 0 0; line-height: 1.55; }
.ftr__bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.4rem 0 1.6rem; border-top: 1px solid #2C3038; margin-top: 1.6rem; flex-wrap: wrap; }
.ftr__bottom p { margin: 0; font-size: .78rem; color: #7C8290; }
.totop { width: 2.2rem; height: 2.2rem; border: 1px solid #2C3038; border-radius: 50%; display: grid; place-items: center; color: #9AA0AC; transition: all .18s ease; flex: none; }
.totop:hover { border-color: var(--amber); color: var(--amber); }
.totop svg { width: 1.05rem; height: 1.05rem; }

/* ---------- reveal ---------- */
.reveal-armed .rv { opacity: 0; transform: translateY(14px); transition: opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1); transition-delay: calc(min(var(--i, 0), 5) * 55ms); }
.reveal-armed .rv.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .rail__track { animation: none; }
}

@media print {
  .rail, .hdr, .ftr, .share, .tool, .quiz { display: none !important; }
  body { background: #fff; color: #000; }
}


.ftr__netz{margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid currentColor;border-color:color-mix(in srgb,currentColor 18%,transparent)}
.ftr__netz-h{margin:0 0 .9rem;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;opacity:.75;font-weight:600}
.ftr__netz-list{list-style:none;margin:0;padding:0;display:grid;gap:.55rem 1.4rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.ftr__netz-list li{margin:0;padding:0}
.ftr__netz-list li::before{content:none}
.ftr__netz-list a{display:flex;flex-direction:column;gap:.1rem;text-decoration:none;line-height:1.3;padding:.15rem 0}
.ftr__netz-list a:hover b,.ftr__netz-list a:focus-visible b{text-decoration:underline}
.ftr__netz-list b{font-weight:600;font-size:.95rem}
.ftr__netz-list span{font-size:.78rem;opacity:.65}
.ftr__netz-dach{margin:1.2rem 0 0;font-size:.8rem;opacity:.7;max-width:62ch}
.ftr__netz-dach a{text-decoration:underline;text-underline-offset:2px}
@media (max-width:640px){.ftr__netz-list{gap:.5rem 1rem}}