/* =================================================================
   SHELL — Theme (Dark/Light), Sidebar, Logo, Fog, Cursor chooser
   Layered on top of core/sections/components. Felchner 2026
   ================================================================= */

/* =========================================================
   THEME PALETTES
   Light: warm orange · turquoise · anthracite · pink · cream · lavender
   Dark:  dark blue · red · yellow-ochre · beige · dark green · black
   ========================================================= */
html[data-theme="light"]{
  --pink:#E0699A; --lavender:#B7A4E0;
}
html[data-theme="light"] body{ }

html[data-theme="dark"]{
  --pergament:#100D06;          /* bg-base — game-DS, dunkler & wärmer */
  --pergament-2:#1A1610;        /* bg-surface-1 — cards, panels, header */
  --pergament-3:#221E14;        /* bg-surface-2 — raised cards / forms / modals */
  --nav-bg:#100D06;             /* sidebar, nav, footer, menus */
  --silver:#2E2818;             /* border-default (dark) */
  --lime:#E3A94A;               /* (legacy token) → Amber (Thesis, dunkel) */
  --lime-d:#F0D9A6;
  --amber:#E3A94A;             /* PRIMARY — Amber (Thesis), auf Dunkel angehoben */
  --amber-l:#F0D9A6;           /* pale Amber — Betonungstext auf Dunkel */
  --amber-d:#E3A94A;
  --amber-hi:#F0D9A6;
  --schiefer:#8FB0D9;           /* Slate Blue hell — historische Fakten */
  --schiefer-l:#A9C6EA;
  --gold:#E3A94A;               /* Amber (secondary fill family) */
  --gold-l:#F0D9A6;
  --gold-ink:#F0D9A6;           /* amber text on dark */
  --blau:#8FB0D9;              /* SECONDARY — Slate Blue (links, interactive) */
  --blau-d:#A9C6EA;            /* link hover */
  --blau-l:#1D2C46;            /* Slate Blue dunkel — info bg */
  --ink:#F0E8D5;               /* Pergament hell — main text, headings */
  --ink-soft:#C8B89A;          /* Pergament mittel — secondary text */
  --feldrot:#DE8168;           /* Feldrot — warmes Rot (auf dunkel angehoben) */
  --feldrot-ink:#E89B84;       /* readable for text on dark */
  --terra:#8FB0D9;             /* → Slate */
  --terra-ink:#A9C6EA;
  --history:#DE8168;           /* historischer Akzent */
  --history-ink:#E89B84;
  --cyan:#8FB0D9;              /* → Slate */
  --cyan-l:#1D2C46;
  --violet:#8FB0D9;            /* → Slate */
  --ok:#5FB884;                /* success */
  --warn:#E89B84;              /* warning / error */
  --link:#8FB0D9;              /* Slate Blue — links, interactive */
  --heading:#F0E8D5;           /* Überschriften — Pergament hell */
  --hover:#EDD9A3;             /* hover — helles Amber */
  --ink-panel:#1C1812;         /* always-dark panel surface — Oberfläche */
  --on-ink:#F0E8D5;            /* light text on those panels */
  --war-bg:#0E0B05; --war-bg-2:#080603; --war-text:#F0E8D5;
  --pink:#DE8168; --lavender:#8FB0D9;
  --line:rgba(240,232,213,.14); --line-2:rgba(240,232,213,.06);
  --epoch-bg:var(--pergament); --epoch-text:var(--ink);
}
html[data-theme="dark"] body::after{mix-blend-mode:screen;opacity:.028;}
html[data-theme="dark"] ::selection{background:var(--amber);color:#1a1206;}
/* dark-mode legibility tweaks for fixed light surfaces */
html[data-theme="dark"] .nav.solid{background:rgba(15,23,42,.86);}
html[data-theme="dark"] .sth-scrim{background:linear-gradient(180deg,rgba(6,9,16,.4),rgba(6,9,16,.86));}
html[data-theme="dark"] .pergament,html[data-theme="dark"] .sec.tint{background:var(--pergament-2);}
html[data-theme="dark"] .card,html[data-theme="dark"] .qcard,html[data-theme="dark"] .fact,html[data-theme="dark"] .rcard,html[data-theme="dark"] .pstat,html[data-theme="dark"] .game-rate-bar{background:var(--pergament-2);}
html[data-theme="dark"] .scene-media .arch::after{background:var(--pergament);}
html[data-theme="dark"] img.dim-dark{filter:grayscale(1) sepia(.3) contrast(1.02) brightness(.9);}
/* GUARANTEE: body + canvas actually darken in dark mode (highest priority, no var indirection) */
html[data-theme="dark"]{background-color:#100D06!important;}
html[data-theme="dark"] body{background-color:#100D06!important;color:var(--ink);}
html[data-theme="dark"] body.epoch-war{background-color:#100D06!important;color:var(--ink);}
html[data-theme="light"] body{background-color:#F5EDD8;color:var(--ink);}

/* ===== DARK MODE READABILITY — lift every muted/secondary text color ===== */
html[data-theme="dark"]{
  --ink:#F0E8D5; --ink-soft:#C8B89A; --line:rgba(240,232,213,.12); --line-2:rgba(240,232,213,.06);
  --pergament-2:#1A1610; --pergament-3:#221E14; --blau-l:#142030;
}
html[data-theme="dark"] .caption,html[data-theme="dark"] .source,html[data-theme="dark"] .docref,
html[data-theme="dark"] .st-now,html[data-theme="dark"] .lede,html[data-theme="dark"] .sb-sub,
html[data-theme="dark"] .fact p,html[data-theme="dark"] .gcap p,html[data-theme="dark"] .count,
html[data-theme="dark"] .tl-place,html[data-theme="dark"] .map-place,html[data-theme="dark"] .chat-disc,
html[data-theme="dark"] .mnote,html[data-theme="dark"] .field-label,html[data-theme="dark"] .pers-opt,
html[data-theme="dark"] .body-l,html[data-theme="dark"] .tx,html[data-theme="dark"] .step .tx,
html[data-theme="dark"] p,html[data-theme="dark"] .compare .mem q,html[data-theme="dark"] .qexpl{color:var(--ink);}
html[data-theme="dark"] .caption,html[data-theme="dark"] .source,html[data-theme="dark"] .docref,
html[data-theme="dark"] .st-now,html[data-theme="dark"] .count{opacity:.82;}
html[data-theme="dark"] .sb-item{color:#C3BBA8;}
html[data-theme="dark"] .sb-ctl,html[data-theme="dark"] .sb-item .sb-sub{color:#D9D9D9;}
html[data-theme="dark"] .fbtn{color:#C3BBA8;border-color:rgba(255,255,255,.2);}
html[data-theme="dark"] .search-box input{color:var(--ink);}
html[data-theme="dark"] .search-box input::placeholder{color:#8A8A8A;}
html[data-theme="dark"] .gitem,html[data-theme="dark"] .group-card,html[data-theme="dark"] .tilt{background:var(--pergament-2);}
html[data-theme="dark"] .archive-tools{background:rgba(15,23,42,.9);}
html[data-theme="dark"] .src-badge,html[data-theme="dark"] .tilt .body .src{color:#7ad0a0;border-color:#7ad0a0;}

/* =========================================================
   CHAPTERS FOLLOW DARK/LIGHT THEME (readable in both modes)
   Neutralises the old forced "epoch" colours that broke contrast.
   ========================================================= */
body.epoch-war{--epoch-bg:var(--pergament);--epoch-text:var(--ink);}
body.epoch-war .lede,body.epoch-war .caption,body.epoch-war .compare-note,
body.epoch-war .step .tx,body.epoch-war .mission-q,body.epoch-war .fact p,
body.epoch-war .group-card p,body.epoch-war .scene-body .body-l{color:var(--ink);}
body.epoch-war .caption,body.epoch-war .fact .docref,body.epoch-war .fact p{opacity:.85;}
body.epoch-war .kicker,body.epoch-war .step .syr,body.epoch-war .chap-hd .range,
body.epoch-war .fact .fl,body.epoch-war .prov{color:var(--amber);}
body.epoch-war .kicker.b{color:var(--blau);}
body.epoch-war .divider,body.epoch-war .rail-fill{background:var(--amber);}
body.epoch-war .rail-track{background:rgba(127,127,127,.22);}
body.epoch-war .tl-axis{background:currentColor;opacity:.2;}
body.epoch-war .fact{background:var(--pergament);border-color:var(--line);border-left-color:var(--amber);}
body.epoch-war .fact.ns{border-left-color:var(--feldrot);}
body.epoch-war .fact.ns .fl{color:var(--feldrot);}
body.epoch-war .prov-banner{background:rgba(212,137,10,.1);border-color:rgba(212,137,10,.4);color:var(--ink-soft);}
body.epoch-war .prov-banner b{color:var(--ink);}
body.epoch-war .group-card{background:var(--pergament);border-color:var(--line);}
/* dark theme: chapter surfaces */
html[data-theme="dark"] body.epoch-war .fact,
html[data-theme="dark"] body.epoch-war .group-card,
html[data-theme="dark"] .fact,html[data-theme="dark"] .group-card{background:var(--pergament-2);border-color:var(--line);}
html[data-theme="dark"] body.epoch-war .prov-banner{background:rgba(216,163,60,.12);border-color:rgba(216,163,60,.38);color:var(--ink-soft);}
/* chapter scene quotes + author cites readable in both modes */
html[data-theme="dark"] .auth-q,html[data-theme="dark"] .scene-body h3,html[data-theme="dark"] .scene-body .body-l{color:var(--ink);}
html[data-theme="dark"] .src-badge{color:#6fd39b;border-color:#6fd39b;background:rgba(111,211,155,.1);}
/* Vergleichsfenster (compare) — striking in dark */
html[data-theme="dark"] .compare .mem{background:linear-gradient(155deg,color-mix(in oklab,var(--amber) 18%,var(--pergament-2)) 0%,var(--pergament-2) 72%);}
html[data-theme="dark"] .compare .mem q{color:var(--ink);}
html[data-theme="dark"] .compare .doc{background:linear-gradient(155deg,var(--blau) 0%,var(--terra) 130%);color:#fbfbff;}
/* decision panel / quiz / reflection cards in dark */
html[data-theme="dark"] .dopt{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14);color:var(--ink);}
html[data-theme="dark"] .qopt{background:var(--pergament-2);border-color:var(--line);color:var(--ink);}
html[data-theme="dark"] .kq{color:var(--ink);}
html[data-theme="dark"] .chat-panel,html[data-theme="dark"] .msg.j{background:var(--pergament-2);color:var(--ink);}
html[data-theme="dark"] .chat-foot input,html[data-theme="dark"] .chat-sugg button{background:var(--pergament);color:var(--ink);border-color:var(--line);}

/* smooth theme cross-fade */
html,body,.nav,.sidebar,.card,.qcard,.fact,.rcard,.pstat,.sec,.drawer,.modal .mpanel{
  transition:background-color .5s ease, color .5s ease, border-color .5s ease;
}

/* =========================================================
   ANIMATED LOGO — head + thought-bubble dissolving to letters
   ========================================================= */
.logo-mark{position:relative;width:40px;height:40px;flex:0 0 auto;color:var(--ink);}
.logo-mark svg{width:100%;height:100%;overflow:visible;display:block;}
.logo-mark .lm-cloud{fill:none;stroke:currentColor;stroke-width:5.5;stroke-linejoin:round;stroke-linecap:round;}
.logo-mark .lm-cloud-fill{fill:var(--pergament-2);}
.sidebar .logo-mark .lm-cloud-fill{fill:var(--pergament-2);}
.nav:not(.solid) .logo-mark .lm-cloud-fill{fill:transparent;}
.logo-mark .lm-head{fill:none;stroke:currentColor;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;}
.logo-mark .lm-eye{fill:currentColor;stroke:none;}
.logo-mark .lm-dot{fill:none;stroke:currentColor;stroke-width:4;}
.logo-mark .lm-img{width:100%;height:100%;object-fit:contain;display:block;}
/* LOGO fully visible in dark mode — the line-art sits on a soft light chip so the dark strokes never disappear */
html[data-theme="dark"] .logo-mark{background:#F3ECDA;border-radius:10px;padding:4px;box-shadow:0 2px 10px -4px rgba(0,0,0,.5);}
html[data-theme="dark"] .logo-mark .lm-img{filter:none;}
html[data-theme="dark"] .nav-light:not(.solid) .logo-mark{background:#F3ECDA;}
.logo-mark .lm-letters{transform-box:fill-box;transform-origin:center;animation:lmFloat 5s ease-in-out infinite;}
@keyframes lmFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
.brand:hover .logo-mark .lm-letters,.sidebar-logo:hover .logo-mark .lm-letters{animation-duration:2.4s;}
@media(prefers-reduced-motion:reduce){.logo-mark .lm-letters{animation:none}}
/* context colours */
.sidebar .logo-mark{color:var(--ink);}
.nav .logo-mark{color:var(--ink);}
.nav-light:not(.solid) .logo-mark{color:#fff;}

.sidebar-logo{display:flex;align-items:center;gap:13px;padding:18px 14px 16px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;cursor:pointer;transition:background .2s;}
.sidebar-logo:hover{background:var(--pergament-3);}

/* ---------------- TIMELINE (vertical, always readable) ---------------- */
.tl2{position:relative;max-width:760px;margin:0 auto;padding:10px 16px;}
.tl2::before{content:"";position:absolute;left:126px;top:0;bottom:0;width:2px;background:var(--line);}
.tl2-row{position:relative;display:grid;grid-template-columns:78px 24px 1fr;align-items:start;gap:0 20px;
  padding:14px 0;opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease);}
.tl2-row.on{opacity:1;transform:none;}
.tl2-yr{font-family:var(--f-display);font-weight:900;font-size:24px;line-height:1.1;text-align:right;padding-top:2px;}
.tl2-row.p .tl2-yr{color:var(--amber);}
.tl2-row.h .tl2-yr{color:var(--schiefer);}
html[data-theme="dark"] .tl2-row.h .tl2-yr{color:#7fb8c8;}
.tl2-node{position:relative;display:flex;justify-content:center;padding-top:6px;}
.tl2-dot{width:16px;height:16px;border-radius:50%;border:3px solid var(--pergament);z-index:2;transition:transform .25s var(--ease);}
.tl2-row.p .tl2-dot{background:var(--amber);}
.tl2-row.h .tl2-dot{background:var(--schiefer);}
html[data-theme="dark"] .tl2-dot{border-color:#100D06;}
.tl2-card{background:var(--pergament-2);border:1px solid var(--line);border-radius:14px;padding:14px 18px;
  transition:transform .25s var(--ease),box-shadow .25s,border-color .25s;}
.tl2-row.p .tl2-card{border-left:4px solid var(--amber);}
.tl2-row.h .tl2-card{border-left:4px solid var(--schiefer);}
html[data-theme="dark"] .tl2-card{background:#1C1812;}
.tl2-card:hover{transform:translateX(4px);box-shadow:0 20px 40px -30px rgba(20,15,8,.5);}
.tl2-row:hover .tl2-dot{transform:scale(1.25);}
.tl2-tag{display:inline-block;font-family:var(--f-mono);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px;}
.tl2-row.p .tl2-tag{color:var(--amber);}
.tl2-row.h .tl2-tag{color:var(--schiefer);}
html[data-theme="dark"] .tl2-row.h .tl2-tag{color:#7fb8c8;}
.tl2-card b{display:block;font-family:var(--f-head);font-weight:700;font-size:17px;color:var(--ink);margin-bottom:4px;}
.tl2-card .tl2-d{font-size:14px;line-height:1.55;color:var(--ink-soft);}
html[data-theme="dark"] .tl2-card .tl2-d{color:#c2b9a7;}
@media(max-width:560px){
  .tl2::before{left:95px;}
  .tl2-row{grid-template-columns:54px 22px 1fr;gap:0 14px;}
  .tl2-yr{font-size:19px;}
}
@media(prefers-reduced-motion:reduce){.tl2-row{opacity:1;transform:none;}}

/* scroll-driven fill on the timeline spine + active row */
.tl2{--tlfill:0%;}
.tl2::after{content:"";position:absolute;left:126px;top:0;width:2px;height:var(--tlfill);
  background:linear-gradient(var(--amber),var(--blau));box-shadow:0 0 12px rgba(224,123,46,.5);transition:height .12s linear;z-index:1;}
@media(max-width:560px){.tl2::after{left:95px;}}
.tl2-row.act .tl2-dot{transform:scale(1.5);box-shadow:0 0 0 6px rgba(224,123,46,.18);}
.tl2-row.act .tl2-card{border-color:var(--amber);transform:translateX(6px);box-shadow:0 24px 44px -30px rgba(20,15,8,.55);}
.tl2-row .tl2-card{cursor:default;}
.sidebar-logo .logo-mark{width:66px;height:66px;}
.sidebar-logo .wm{display:flex;flex-direction:column;line-height:1;white-space:nowrap;overflow:hidden;}
.sidebar-logo .wm .l1{font-family:var(--f-ui);font-weight:800;font-size:13px;letter-spacing:.14em;color:var(--ink);}
.sidebar-logo .wm .l2{font-family:var(--f-ui);font-weight:700;font-size:10.5px;letter-spacing:.16em;color:var(--amber);margin-top:3px;}
.nav .logo-mark{width:52px;height:52px;}

/* =========================================================
   SIDEBAR
   ========================================================= */
:root{--sbw:84px; --sbw-x:264px;}
.sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--sbw);z-index:108;background:var(--pergament-2);
  border-right:1px solid var(--line);display:flex;flex-direction:column;
  transition:width .34s var(--ease);overflow:hidden;box-shadow:2px 0 30px -24px rgba(0,0,0,.6);}
.sidebar.x{width:var(--sbw-x);}
.sidebar .wm,.sidebar .sb-label,.sidebar .sb-prof .pmeta,.sidebar .fl-label,.sidebar .fl-state,.sidebar .sb-collapse .fl-label{transition:opacity .2s;}
@media(min-width:861px){
  .sidebar:not(.x) .wm,
  .sidebar:not(.x) .sb-label,
  .sidebar:not(.x) .sb-prof .pmeta,
  .sidebar:not(.x) .fl-label,
  .sidebar:not(.x) .fl-state,
  .sidebar:not(.x) .tagx,
  .sidebar:not(.x) .sb-item .sb-sub{opacity:0;visibility:hidden;}
}

/* profile area at top */
.sb-prof{display:flex;align-items:center;gap:12px;padding:16px;cursor:pointer;border-bottom:1px solid var(--line);transition:background .25s;}
.sb-prof:hover{background:var(--pergament-3);}
.sb-prof .pav{width:42px;height:42px;border-radius:50%;flex:0 0 auto;overflow:hidden;border:2px solid var(--amber);background:var(--pergament-3);display:grid;place-items:center;}
.sb-prof .pav img,.sb-prof .pav svg{width:100%;height:100%;object-fit:cover;}
.sb-prof .pmeta{display:flex;flex-direction:column;line-height:1.15;min-width:0;}
.sb-prof .pmeta .pn{font-family:var(--f-head);font-weight:700;font-size:15px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;}
.sb-prof .pmeta .pl{font-family:var(--f-ui);font-size:11px;color:var(--amber);font-weight:700;letter-spacing:.04em;}

/* nav list */
.sb-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:10px 0;scrollbar-width:thin;}
.sb-nav::-webkit-scrollbar{width:0;}
.sb-item{display:flex;align-items:center;gap:14px;padding:11px 16px;width:100%;text-align:left;color:var(--ink-soft);
  font-family:var(--f-ui);font-weight:600;font-size:14px;position:relative;transition:color .2s,background .2s;white-space:nowrap;}
.sb-item:hover{color:var(--ink);background:var(--pergament-3);}
.sb-item.active{color:var(--blau);}
.sb-item.active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;background:var(--blau);border-radius:0 3px 3px 0;}
.sb-item .ic{width:24px;height:24px;flex:0 0 auto;display:grid;place-items:center;}
.sb-item .ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.sb-item.disabled{opacity:.4;pointer-events:none;}
.sb-item .tagx{margin-left:auto;font-family:var(--f-ui);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:var(--pergament-3);color:var(--ink-soft);padding:2px 6px;border-radius:20px;}
.sb-item .tagx.go{background:var(--amber);color:#fff;}
.sb-group-label{font-family:var(--f-ui);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);padding:14px 16px 6px;opacity:.7;white-space:nowrap;}
.sidebar:not(.x) .sb-group-label{visibility:hidden;height:10px;padding:6px 0;}
.sb-sub{padding-left:30px;}

/* footer controls */
.sb-foot{border-top:1px solid var(--line);padding:10px;display:flex;flex-direction:column;gap:6px;}
.sb-ctl{display:flex;align-items:center;gap:12px;padding:9px 8px;border-radius:8px;width:100%;color:var(--ink-soft);
  font-family:var(--f-ui);font-weight:600;font-size:13px;transition:.2s;white-space:nowrap;}
.sb-ctl:hover{background:var(--pergament-3);color:var(--ink);}
.sb-ctl .ic{width:24px;flex:0 0 auto;display:grid;place-items:center;font-size:17px;}
.sb-ctl .fl-state{margin-left:auto;font-size:11px;color:var(--amber);font-weight:700;}
.sb-collapse{display:flex;align-items:center;justify-content:center;gap:10px;padding:10px;border-top:1px solid var(--line);color:var(--ink-soft);transition:.2s;}
.sb-collapse:hover{color:var(--ink);background:var(--pergament-3);}
.sb-collapse .chev{transition:transform .34s var(--ease);font-size:16px;}
.sidebar.x .sb-collapse .chev{transform:rotate(180deg);}

/* layout offset for permanent rail */
@media(min-width:861px){
  body{padding-left:var(--sbw);}
  .nav{left:var(--sbw);}
  .gxintro{left:0!important;width:100%!important;}  /* intro covers full screen incl. rail */
  .sidebar.x{box-shadow:8px 0 50px -20px rgba(0,0,0,.45);}
  .sb-scrim{position:fixed;inset:0;left:var(--sbw);background:rgba(8,8,12,.32);z-index:69;opacity:0;visibility:hidden;transition:.34s;}
  .sb-scrim.on{opacity:1;visibility:visible;}
}
/* mobile: off-canvas */
@media(max-width:860px){
  .sidebar{transform:translateX(-100%);width:var(--sbw-x);transition:transform .34s var(--ease);}
  .sidebar.open{transform:none;}
  .sidebar .wm,.sidebar .sb-label,.sidebar .sb-prof .pmeta,.sidebar .sb-foot .fl-label{opacity:1;}
  .sb-collapse{display:none;}
  .sb-scrim{position:fixed;inset:0;background:rgba(8,8,12,.5);z-index:69;opacity:0;visibility:hidden;transition:.3s;}
  .sb-scrim.on{opacity:1;visibility:visible;}
}

/* =========================================================
   TOP BAR adjustments — hide inline text nav, keep utilities
   ========================================================= */
.nav-links .link,.nav-links .has-sub{display:none!important;}
@media(min-width:861px){
  .nav .brand{display:none;}      /* the sidebar carries the logo — avoid a duplicate */
  .nav{justify-content:flex-end;}
}
/* nav-links group sits right; the util cluster (theme+cursor) is a PERSISTENT
   top-right control group that never collapses into the mobile drawer. */
.nav-links{margin-left:auto;}
.nav .util{display:flex;align-items:center;gap:8px;margin-left:16px;flex:0 0 auto;}
.util-btn{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:var(--ink);font-size:21px;
  background:var(--pergament-2);border:2px solid var(--line);box-shadow:0 4px 14px -8px rgba(20,15,8,.4);
  transition:transform .25s var(--ease,cubic-bezier(.16,1,.3,1)),background .25s,border-color .25s,color .25s,box-shadow .25s;position:relative;}
.util-btn svg{width:23px;height:23px;}
.util-btn:hover{background:var(--amber);color:#3a2600;border-color:var(--amber);transform:translateY(-2px);box-shadow:0 10px 22px -10px var(--amber);}
.util-btn:active{transform:scale(.94);}
/* on the transparent (hero) nav: glassy but clearly visible */
.nav-light:not(.solid) .util-btn{color:#fff;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.nav-light:not(.solid) .util-btn:hover{background:var(--amber);color:#3a2600;border-color:var(--amber);}
html[data-theme="dark"] .util-btn{color:var(--ink);background:var(--pergament-3);border-color:rgba(240,232,213,.22);}
html[data-theme="dark"] .nav-light:not(.solid) .util-btn{color:#F0E8D5;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.45);}
html[data-theme="dark"] .util-btn:hover{background:var(--amber);color:#241a0e;border-color:var(--amber);}
.sb-toggle-m{display:none;}
@media(max-width:880px){
  /* keep theme+cursor visible & on the same row as the burger (not in the drawer) */
  .nav .util{margin-left:auto;margin-right:8px;}
}
@media(max-width:860px){
  .sb-toggle-m{display:grid;place-items:center;width:42px;height:42px;border-radius:10px;}
  body{padding-left:0;}
  .nav{left:0;}
}

/* =========================================================
   FOG over homepage title
   ========================================================= */
.fogwrap{position:relative;display:inline-block;}
.fog{position:absolute;inset:-12% -8%;z-index:4;pointer-events:none;overflow:hidden;border-radius:40%;}
.fog b{position:absolute;border-radius:50%;background:radial-gradient(circle at 40% 40%, rgba(232,224,205,.95), rgba(232,224,205,.5) 45%, transparent 72%);
  filter:blur(8px);mix-blend-mode:screen;animation:fogdrift linear infinite;}
html[data-theme="dark"] .fog b{background:radial-gradient(circle at 40% 40%, rgba(150,165,190,.55), rgba(120,135,160,.3) 45%, transparent 72%);}
.fogwrap.clear .fog{opacity:0;transition:opacity 2.4s ease;}
.fogwrap.clear .fog b{animation-play-state:running;}
@keyframes fogdrift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(14px,-8px) scale(1.12)}100%{transform:translate(0,0) scale(1)}}

/* =========================================================
   CURSOR CHOOSER
   ========================================================= */
/* round = existing follower (#cursor). For others, hide follower + real cursor */
html[data-uc="finger"] *{cursor:pointer!important;}
html[data-uc="arrow"] *{cursor:default!important;}
html[data-uc="pointer"] *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M5 3l16 7-6 2-2 6z' fill='%23E07B2E' stroke='white' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 5 3, auto !important;}
html[data-uc="finger"] #cursor,html[data-uc="arrow"] #cursor,html[data-uc="pointer"] #cursor{display:none!important;}
html[data-uc="finger"] body,html[data-uc="arrow"] body,html[data-uc="pointer"] body{cursor:auto;}

/* cursor/theme menus (popovers) */
.popmenu{position:fixed;z-index:140;background:var(--pergament);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.5);padding:10px;min-width:210px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.22s var(--ease);}
.popmenu.on{opacity:1;visibility:visible;transform:none;}
.popmenu .pm-t{font-family:var(--f-ui);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);padding:6px 8px 8px;}
.popmenu button.pm-opt{display:flex;align-items:center;gap:11px;width:100%;padding:10px 10px;border-radius:9px;color:var(--ink);
  font-family:var(--f-ui);font-weight:600;font-size:14px;transition:.18s;text-align:left;}
.popmenu button.pm-opt:hover{background:var(--pergament-2);}
.popmenu button.pm-opt.sel{background:var(--blau-l);color:var(--blau-d);}
html[data-theme="dark"] .popmenu button.pm-opt.sel{color:var(--amber-l);}
.popmenu .pm-opt .k{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:var(--pergament-3);font-size:15px;flex:0 0 auto;}
.popmenu .pm-opt .sw{width:26px;height:26px;border-radius:7px;flex:0 0 auto;border:1px solid var(--line);}
.theme-swatches{display:flex;gap:4px;}
.theme-swatches i{width:13px;height:13px;border-radius:3px;display:block;}

/* =========================================================
   PROFILE — gender pills + personalization (login + setup)
   ========================================================= */
.gender-row{display:flex;gap:10px;margin-top:14px;}
.gender-pill{flex:1;padding:12px 10px;border:1.5px solid var(--line);border-radius:12px;font-family:var(--f-ui);font-weight:700;
  font-size:14px;color:var(--ink-soft);transition:.2s;display:flex;flex-direction:column;align-items:center;gap:4px;}
.gender-pill .gi{font-size:18px;}
.gender-pill:hover{border-color:var(--blau);color:var(--ink);}
.gender-pill.sel{border-color:var(--blau);background:var(--blau-l);color:var(--blau-d);}
html[data-theme="dark"] .gender-pill.sel{color:var(--amber-l);}
.field-label{font-family:var(--f-ui);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin:18px 0 6px;}
.pers-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px;}
.pers-opt{padding:10px;border:1.5px solid var(--line);border-radius:10px;font-family:var(--f-ui);font-weight:600;font-size:13px;color:var(--ink-soft);transition:.2s;text-align:center;}
.pers-opt:hover{border-color:var(--blau);color:var(--ink);}
.pers-opt.sel{border-color:var(--amber);background:rgba(224,123,46,.1);color:var(--ink);}

@media(prefers-reduced-motion:reduce){.fog b{animation:none}}

/* =========================================================
   v7 POLISH — micro-interactions, tactile states, focus,
   liquid easing. Tuned for a 16–18 classroom audience:
   modern + responsive, never flashy or undignified.
   ========================================================= */
:root{--ease-spring:cubic-bezier(.34,1.56,.64,1);--ease-out:cubic-bezier(.16,1,.3,1);}

/* tactile press + smooth hover on every interactive surface */
.era,.rcard,.qopt,.dopt,.gtab,.btn,.profile-chip,.sb-item,.chip-i,.opt-pill,
.q-opt,.audio,.chat-sugg button,.gender-pill,.pers-opt,.reflect-card,.tl-ev{
  transition:transform .22s var(--ease-out),box-shadow .28s var(--ease-out),
    background-color .25s ease,border-color .25s ease,color .2s ease;
}
.btn:active,.gtab:active,.qopt:active,.dopt:active,.profile-chip:active,
.chip-i:active,.opt-pill:active,.audio:active,.chat-sugg button:active,
.gender-pill:active,.pers-opt:active,.reflect-card:active{transform:scale(.97);}
.era:active{transform:scale(.99);}

/* keyboard focus rings — accessibility for classroom devices */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
[tabindex]:focus-visible,.sb-item:focus-visible,.era:focus-visible{
  outline:3px solid var(--amber);outline-offset:3px;border-radius:6px;}
html[data-theme="dark"] a:focus-visible,html[data-theme="dark"] button:focus-visible{outline-color:var(--amber-l);}

/* era tiles: smoother lift + image zoom already present — refine shadow */
.era:hover{transform:translateY(-6px);box-shadow:0 36px 60px -34px rgba(20,15,8,.55);}

/* audio play button — pulse ring while playing (kinetic, subtle) */
.audio.playing .pb{position:relative;}
.audio.playing .pb::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:2px solid currentColor;opacity:.5;animation:pbpulse 1.4s var(--ease-out) infinite;}
@keyframes pbpulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.5);opacity:0}}

/* scroll-parallax targets (JS sets --py) — liquid motion on archive photos */
.scene-media .arch img,.sv-frame img{will-change:transform;transform:translateY(var(--py,0));}

/* nicer text selection — feels intentional */
::selection{background:var(--amber);color:#1a1206;}

/* section reveal: add a touch of horizontal drift for rhythm */
.rv{transition:opacity .85s var(--ease-out),transform .95s var(--ease-out);}

/* progress bar at very top gets a soft glow */
.topbar i{box-shadow:0 0 10px -1px var(--amber);}

@media(prefers-reduced-motion:reduce){
  .scene-media .arch img,.sv-frame img{transform:none!important;}
  .audio.playing .pb::after{animation:none;}
  .era,.rcard,.qopt,.dopt,.btn{transition:none;}
}

/* =================================================================
   v8 DESIGN ELEVATION — editorial typography, palette contrast,
   strategic whitespace, modern Gen-Z polish. Loads last → wins.
   ================================================================= */

/* — refined type rhythm — */
.display,.d-xl,.d-lg,.d-md{letter-spacing:-.035em;line-height:.94;}
.d-xl{font-size:clamp(56px,11vw,148px);}
.kicker{font-size:12px;letter-spacing:.26em;display:inline-flex;align-items:center;gap:10px;}
.kicker::before{content:"";width:22px;height:2px;background:currentColor;border-radius:2px;display:inline-block;}
.rv.on .kicker::before{animation:kgrow .7s var(--ease-out) .15s both;}
@keyframes kgrow{from{width:0}to{width:22px}}
@media(prefers-reduced-motion:reduce){.rv.on .kicker::before{animation:none;width:22px;}}
.lede{font-style:normal;line-height:1.55;color:var(--ink-soft);font-weight:400;}
.body-l{line-height:1.78;}
p{text-wrap:pretty;}
h1,h2,h3,.display{text-wrap:balance;}

/* — strategic whitespace — */
.sec{padding-block:clamp(72px,11vh,150px);}
.wrap-n{max-width:880px;}

/* — color: gradient ink on big display headers (light+dark aware) — */
.d-xl,.d-lg,.d-md,.display,.chap-hd h2{
  background:linear-gradient(170deg,var(--ink) 28%,var(--schiefer) 72%,var(--blau));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
html[data-theme="dark"] .d-xl,html[data-theme="dark"] .d-lg,html[data-theme="dark"] .d-md,
html[data-theme="dark"] .display,html[data-theme="dark"] .chap-hd h2{
  background:linear-gradient(170deg,#fff 22%,#cfe0ee 62%,var(--amber-l));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
body.epoch-war .d-xl,body.epoch-war .d-lg,body.epoch-war .d-md,
body.epoch-war .display,body.epoch-war .chap-hd h2{background:linear-gradient(170deg,#fff 28%,#a9c8e6 78%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
/* keep hero wordmark on its photo as solid (gradient-on-photo would vanish) */
.hero-big,.hero-big .accent{-webkit-text-fill-color:initial;background:none;}

/* — accent chips/kickers pop more in dark — */
html[data-theme="dark"] .kicker{color:var(--amber-l);}
html[data-theme="dark"] .kicker.b{color:#7fb8c8;}

/* — buttons: modern pill with sheen — */
.btn{border-radius:40px;letter-spacing:.02em;position:relative;overflow:hidden;}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .6s var(--ease-out);}
.btn:hover::after{transform:translateX(120%);}

/* — cards & panels: softer radius, layered depth — */
.fact,.qcard,.group-card,.rcard,.compare,.tilt,.gitem,.q-card{border-radius:16px;}
.fact{border-left-width:5px;}

/* — section divider flourish — */
.divider{height:3px;border-radius:3px;background:linear-gradient(90deg,var(--amber),var(--blau));}

/* — links get an animated underline — */
.body-l a,.tx a{background-image:linear-gradient(currentColor,currentColor);background-size:0% 2px;
  background-position:0 100%;background-repeat:no-repeat;transition:background-size .35s var(--ease-out);padding-bottom:1px;}
.body-l a:hover,.tx a:hover{background-size:100% 2px;}

/* — scroll-snap rhythm on tall chapter scenes for a guided feel — */
@media(min-width:881px) and (prefers-reduced-motion:no-preference){
  .step{scroll-margin-top:120px;}
}

/* — first-letter editorial drop on intro lede (subtle) — */
.intro .body-l:first-of-type::first-letter{font-family:var(--f-display);font-weight:800;font-size:1.15em;color:var(--amber);}

/* — sidebar active item: accent bar + tint — */
.sb-item.active{background:linear-gradient(90deg,var(--blau-l),transparent);}
html[data-theme="dark"] .sb-item.active{background:linear-gradient(90deg,rgba(27,124,140,.22),transparent);}

/* — kinetic quote: gradient sweep — */
.kq.on{background:linear-gradient(100deg,currentColor 40%,var(--amber) 60%,currentColor 80%);
  -webkit-background-clip:text;background-clip:text;background-size:200% 100%;animation:kqsweep 3.2s var(--ease-out) .3s both;}
@keyframes kqsweep{from{background-position:120% 0}to{background-position:0 0}}
@media(prefers-reduced-motion:reduce){.kq.on{animation:none;background:none;-webkit-text-fill-color:currentColor;}}