@font-face { font-family: "Garamond"; src: url("fonts/EBGaramond.woff2?v=e8dfdddf65") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Garamond"; src: url("fonts/EBGaramond-Italic.woff2?v=e8dfdddf65") format("woff2"); font-weight: 400 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("fonts/PlexMono.woff2?v=e8dfdddf65") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --bg: #f3eee3;
  --surface: #fbf8f1;
  --ink: #1a1a16;
  --muted: #45423a;
  --line: #d3cbb9;
  --accent: #5e4610;
  --death: #8f271b;
  --ctrl: #1b5270;
  --dot: rgba(26, 26, 22, 0.42);
  --dot-sig: rgba(26, 26, 22, 0.42);
  --btn-bg: #1a1a16;
  --btn-ink: #fbf8f1;
  --focus: #8f271b;
  --scene: #0c0f0c;
  --glass: rgba(14, 17, 14, 0.82);
  --glass-ink: #f1ebdd;
  --glass-muted: #d6cebd;
  --serif: "Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
  --mono: "Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --bar: 3.1rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111411; --surface: #191d19; --ink: #efe9dc; --muted: #cfc7b5; --line: #3a403a;
    --accent: #dcbb72; --death: #ee9281; --ctrl: #9cc6de; --dot: rgba(239, 233, 220, 0.45); --dot-sig: rgba(239, 233, 220, 0.45);
    --btn-bg: #efe9dc; --btn-ink: #111411; --focus: #ee9281; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111411; --surface: #191d19; --ink: #efe9dc; --muted: #cfc7b5; --line: #3a403a;
  --accent: #dcbb72; --death: #ee9281; --ctrl: #9cc6de; --dot: rgba(239, 233, 220, 0.45); --dot-sig: rgba(239, 233, 220, 0.45);
  --btn-bg: #efe9dc; --btn-ink: #111411; --focus: #ee9281; color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--serif); font-size: 1.24rem; line-height: 1.55; font-kerning: normal; font-variant-numeric: oldstyle-nums proportional-nums; }
a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
img { max-width: 100%; height: auto; }
i, em { font-style: italic; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; z-index: 50; background: var(--btn-bg); color: var(--btn-ink); padding: 0.5rem 0.8rem; }
.skip:focus { left: 0.5rem; top: 0.5rem; }
html:not(.js) .js-only { display: none !important; }
[hidden] { display: none !important; }

/* Top bar */
.topbar { position: sticky; top: 0; z-index: 30; height: var(--bar); display: flex; align-items: center; gap: 0.9rem; padding: 0 1rem; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 0.78rem; white-space: nowrap; }
.topbar .home { text-decoration: none; letter-spacing: 0.02em; }
.topnav { display: flex; gap: 0.9rem; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.topnav::-webkit-scrollbar { display: none; }
.topnav a { text-decoration: none; color: var(--muted); padding: 0.3rem 0; }
.topnav a[aria-current="true"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); }
.spacer { flex: 1; }
.chip { text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 0.25rem 0.65rem; min-height: 2rem; display: inline-flex; align-items: center; }
.icon-btn { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); display: inline-grid; place-items: center; cursor: pointer; padding: 0; flex: none; }
.icon-btn svg { display: block; }
.icon-btn svg[hidden] { display: none; }

/* Reading rail */
.rail { display: none; }
@media (min-width: 76rem) {
  .rail { display: flex; position: fixed; right: 1.4rem; top: 50%; transform: translateY(-50%); z-index: 20; flex-direction: column; gap: 0.7rem; }
  .rail a { display: flex; align-items: center; justify-content: flex-end; gap: 0.55rem; text-decoration: none; min-height: 1.1rem; }
  .rail i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); opacity: 0.55; transition: transform 0.2s, background 0.2s; }
  .rail span { font-family: var(--mono); font-size: 0.72rem; color: var(--ink); background: var(--surface); padding: 0.1rem 0.4rem; border-radius: 3px; opacity: 0; transition: opacity 0.15s; pointer-events: none; }
  .rail a:hover span, .rail a:focus-visible span { opacity: 1; }
  .rail a[aria-current="true"] i { background: var(--accent); opacity: 1; transform: scale(1.45); }
  html.dark-scene .rail i { background: #d6cebd; }
  html.dark-scene .rail a[aria-current="true"] i { background: #dcbb72; }
}

section { scroll-margin-top: var(--bar); }
.block { max-width: 40rem; margin: 0 auto; padding: 4.5rem 1.1rem 1rem; }
.block h2 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.7rem); line-height: 1.08; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 1.2rem; text-wrap: balance; }
.block h3 { font-size: 1.45rem; font-weight: 500; margin: 2.4rem 0 0.6rem; }
.block p { margin: 0 0 1.05rem; }
.lead { font-size: 1.38rem; line-height: 1.5; }
.turn { font-style: italic; font-size: 1.36rem; margin-top: 2.2rem !important; color: var(--ink); }
.fine { font-size: 1rem; color: var(--muted); line-height: 1.5; }
.hint { font-size: 1rem; color: var(--muted); min-height: 1.5em; }
.kicker, .step-label, .f-k { font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.8rem; }

/* Buttons */
.btn { font-family: var(--serif); font-size: 1.15rem; background: var(--btn-bg); color: var(--btn-ink); border: 0; border-radius: 999px; padding: 0.7rem 1.5rem; min-height: 2.9rem; cursor: pointer; }
.btn:disabled { opacity: 0.38; cursor: not-allowed; }
.btn.quiet-btn { background: transparent; color: var(--ink); border: 1px solid var(--line); font-size: 1rem; padding: 0.45rem 1.1rem; min-height: 2.6rem; }
.quiet { color: var(--muted); font-size: 1.05rem; margin-left: 1rem; display: inline-block; padding: 0.6rem 0; }
.actions { margin-top: 1.4rem !important; display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; }

/* The exercise */
.exercise { min-height: auto; display: grid; align-items: start; align-content: start; padding: clamp(1.8rem, 9svh, 7rem) 1.1rem 3rem; max-width: 40rem; margin: 0 auto; }
.ex-intro h1 { font-size: clamp(2.5rem, 1.6rem + 4.4vw, 4.6rem); line-height: 1.02; font-weight: 500; letter-spacing: -0.015em; margin: 0 0 1.3rem; text-wrap: balance; }
.deck { font-size: 1.4rem; line-height: 1.45; margin: 0 0 1.2rem; }
.ex-panel { position: fixed; inset: 0; z-index: 60; background: var(--bg); overflow-y: auto; overscroll-behavior: contain; }
.ex-panel-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 1rem; background: var(--bg); border-bottom: 1px solid var(--line); }
.ex-panel-bar .step-label { margin: 0; }
.ex-panel-body { max-width: 40rem; margin: 0 auto; padding: 1.4rem 1.1rem 3rem; }
html.panel-open, html.panel-open body { overflow: hidden; }
.ex-step { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 1.6rem 1.3rem 1.3rem; box-shadow: 0 1px 0 var(--line); }
.stmt { border: 0; padding: 0; margin: 0 0 1.4rem; }
.stmt legend { font-weight: 600; line-height: 1.4; margin-bottom: 0.6rem; padding: 0; }
.choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choices button { font: inherit; font-size: 1.05rem; min-height: 2.75rem; padding: 0.4rem 1rem; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; }
.choices button[aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-ink); border-color: var(--btn-bg); }
.ws-how { font-weight: 700; font-size: 1.15rem; line-height: 1.45; margin: 0 0 0.4rem; }
.ws-how-ex { font-size: 1rem; color: var(--muted); margin: 0 0 1rem; }
.ws-hint { font-weight: 700; color: var(--accent); min-height: 1.5em; text-align: center; margin: 0.8rem 0 0; }
.step-intro { margin: 0 0 1.3rem; }
.q { display: block; font-weight: 600; margin: 1.2rem 0 0.5rem; line-height: 1.4; }
textarea, input[type="text"] { width: 100%; font: inherit; font-size: 1.15rem; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 0.6rem 0.7rem; }
textarea { resize: vertical; min-height: 6.5rem; }
textarea:focus, input[type="text"]:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.money { display: flex; align-items: center; gap: 0.5rem; max-width: 12rem; font-size: 1.5rem; }
.money input { font-size: 1.5rem; font-family: var(--mono); letter-spacing: 0.05em; }
.err { color: var(--death); font-size: 1rem; min-height: 1.4em; margin: 0.3rem 0 0; }
.att { border: 0; padding: 0; margin: 1.2rem 0 0; }
.att legend { padding: 0; }
.att label { display: flex; align-items: center; gap: 0.65rem; padding: 0.35rem 0; min-height: 2.6rem; cursor: pointer; }
.att input { width: 1.2rem; height: 1.2rem; accent-color: var(--ink); flex: none; }
.dossier { font-family: var(--mono); font-size: 0.9rem; line-height: 1.6; background: var(--bg); border: 1px dashed var(--line); padding: 1rem 1.1rem 0.3rem; border-radius: 4px; }
.dossier p { margin: 0 0 0.8rem; }

/* Word search */
.ws { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; max-width: 26rem; margin: 0 auto; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.ws button { aspect-ratio: 1; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-family: var(--mono); font-size: clamp(0.85rem, 3.4vw, 1.05rem); border-radius: 3px; padding: 0; cursor: pointer; min-width: 0; }
.ws button.sel { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.ws button.found { background: color-mix(in srgb, var(--accent) 22%, var(--bg)); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.ws-words { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; font-family: var(--mono); font-size: 0.85rem; justify-content: center; }
.ws-words li.done { text-decoration: line-through; color: var(--muted); }

/* Reveal */
.you-were { border-left: 3px solid var(--death); padding: 0.4rem 0 0.4rem 1.2rem; margin: 0 0 3rem; }
.you-were.c { border-left-color: var(--ctrl); }
.your-bail { font-family: var(--mono); font-size: 1rem; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2rem 0 1.6rem; }
.duo-item { border-top: 2px solid var(--line); padding-top: 0.7rem; }
.duo-item.death { border-top-color: var(--death); }
.duo .big { display: block; font-size: clamp(2.6rem, 1.8rem + 4vw, 4.2rem); line-height: 1; font-variant-numeric: lining-nums; }
.duo-item.death .big { color: var(--death); }
.duo .lbl { display: block; font-size: 1rem; color: var(--muted); margin-top: 0.4rem; }
.duo figcaption { grid-column: 1 / -1; font-size: 0.95rem; color: var(--muted); }
.tally { margin: 2.6rem 0 1rem; padding-top: 0.2rem; }
.tally-fig { margin: 1rem 0; }
.tally-fig svg { width: 100%; height: auto; display: block; overflow: visible; }
.tally-fig figcaption { font-size: 1.05rem; margin-top: 0.6rem; }
svg text { font-family: var(--mono); font-size: 11px; fill: var(--muted); }
.tl-axis { stroke: var(--line); }
.tl-m { fill: var(--death); }
.tl-c { fill: var(--ctrl); }
.tl-med { stroke: var(--ink); stroke-width: 2; }
.tl-you { fill: none; stroke: var(--ink); stroke-width: 2; }
.tl-lbl { fill: var(--ink); font-size: 12px; }

/* Painting scene: dark in both themes */
.scene { position: relative; }
.scene-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.scene-steps { position: relative; margin-top: -100svh; z-index: 2; }
.step { min-height: 100svh; display: flex; align-items: center; justify-content: flex-start; padding: 0 1rem; pointer-events: none; }
.step:first-child { min-height: 100svh; }
.step .card { pointer-events: auto; max-width: 27rem; margin-left: max(1rem, 6vw); background: var(--glass); color: var(--glass-ink); padding: 1.3rem 1.4rem 0.4rem; border-radius: 6px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: 1.16rem; }
.step .card h2 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.5rem); line-height: 1.08; font-weight: 500; margin: 0 0 0.9rem; }
.step .card p { margin: 0 0 1rem; }
#pictura { background: var(--scene); color: var(--glass-ink); }
#pictura .scene-steps { padding-bottom: 30vh; }
.painting { position: absolute; inset: 0; display: grid; place-items: center; }
.painting img { width: min(96vw, 128svh); max-width: none; height: auto; transform-origin: 0 0; will-change: transform; position: absolute; left: 0; top: 0; }
.credit { position: relative; z-index: 3; font-size: 0.9rem; color: var(--glass-muted); max-width: 40rem; margin: 0 auto; padding: 0 1.1rem 2.5rem; }

/* Theory figure */
.theory { margin: 2rem 0; }
.theory svg { width: 100%; max-width: 30rem; height: auto; display: block; margin: 0 auto; }
.t-core { fill: var(--surface); stroke: var(--death); stroke-width: 1.5; }
.t-core-l { font-family: var(--serif); font-size: 21px; fill: var(--ink); }
.t-shield { fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round; }
.t-shield.b { stroke: var(--ctrl); }
.t-lbl { font-family: var(--serif); font-size: 25px; fill: var(--ink); }
.t-lbl.a { fill: var(--accent); }
.t-lbl.b { fill: var(--ctrl); }
.t-sub { font-family: var(--serif); font-size: 18px; fill: var(--muted); font-style: italic; }
.theory figcaption { font-size: 1rem; color: var(--muted); margin-top: 0.6rem; }
.predictions { padding-left: 1.3rem; }
.predictions li { margin: 0 0 1rem; padding-left: 0.3rem; }

/* Wall of findings */
.wall { display: grid; grid-template-columns: 1fr; gap: 0; margin: 1.6rem 0 2rem; border-top: 1px solid var(--line); }
.finding { border-bottom: 1px solid var(--line); padding: 1rem 0 0.2rem; }
.finding p:last-child { font-size: 1.08rem; }
@media (min-width: 48rem) {
  #studii { max-width: 64rem; }
  #studii > h2, #studii > p { max-width: 40rem; }
  .wall { grid-template-columns: repeat(3, 1fr); column-gap: 2rem; }
}

/* Chart scene */
.chart-scene { background: var(--bg); }
.chart { position: absolute; inset: calc(var(--bar) + 0.5rem) 0 0 0; margin: 0; display: flex; align-items: center; justify-content: center; padding: 0 1rem; }
.chart svg { width: 100%; height: 100%; max-height: 100%; display: block; overflow: visible; }
.chart-scene .step .card { background: color-mix(in srgb, var(--surface) 94%, transparent); color: var(--ink); border: 1px solid var(--line); }
.f-dot { fill: var(--dot); }
.f-sig { fill: var(--ink); opacity: 0.62; }
.f-ns { fill: var(--ink); opacity: 0.2; }
.f-zero { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 4; }
.f-axis { stroke: var(--line); }
.f-funnel { fill: none; stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 5 5; }
.f-thr { fill: none; stroke: var(--death); stroke-width: 1.2; }
.f-gap { fill: var(--death); opacity: 0.1; }
.f-est line { stroke-width: 3; }
.f-est .re { stroke: var(--ink); }
.f-est .sel { stroke: var(--accent); }
.f-est .pet { stroke: var(--muted); }
.f-est .ml4 { stroke: var(--ctrl); }
.f-lab { fill: var(--ctrl); }
.f-lab-ci { stroke: var(--ctrl); stroke-width: 2; }
.f-orig { fill: var(--death); }
.f-orig-ci { stroke: var(--death); stroke-width: 2; }
.f-lbl { fill: var(--ink); font-size: 12px; }
.f-lbl.dim { fill: var(--muted); }
.chart g { transition: opacity 0.6s ease; }
@media (prefers-reduced-motion: reduce) { .chart g { transition: none; } }

@media (min-width: 60rem) {
  .chart { padding: 0 3rem 0 34rem; }
  .chart-scene .step .card { margin-left: 3rem; }
}
@media (max-width: 59.99rem) {
  .chart { inset: calc(var(--bar) + 0.3rem) 0 auto 0; height: 58svh; }
  .chart-scene .step { align-items: flex-end; padding-bottom: 5svh; }
  .chart-scene .step .card { margin: 0 auto; max-width: 34rem; font-size: 1.05rem; }
  .step .card { margin: 0 auto; }
  #pictura .step { align-items: flex-end; padding-bottom: 6svh; }
}

.ending .last { font-size: 1.5rem; line-height: 1.4; font-style: italic; margin-top: 2rem; }
.sources { font-size: 1.02rem; }
.sources .method { color: var(--ink); }
.srcs { padding-left: 1.1rem; font-size: 0.95rem; line-height: 1.45; }
.srcs li { margin: 0 0 0.6rem; overflow-wrap: anywhere; }
.stamp { color: var(--muted); font-size: 0.95rem; }
.foot { max-width: 40rem; margin: 3rem auto 0; padding: 1.5rem 1.1rem 3rem; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }
body.nf main { padding-top: 6rem; }


@media (max-width: 30rem) {
  body { font-size: 1.14rem; }
  .lead { font-size: 1.24rem; }
  .deck { font-size: 1.24rem; }
  .ex-step { padding: 1.2rem 0.95rem 1rem; }
  .quiet { margin-left: 0.2rem; }
}
@media (max-height: 740px) {
  .ex-intro h1 { font-size: clamp(2.2rem, 1.4rem + 4vw, 3.6rem); }
}
@media print { .topbar, .rail, .scene-sticky, .tally, .exercise .actions { display: none !important; } .scene-steps { margin-top: 0; } .step { min-height: 0; } }

.try { margin: 2.2rem 0 0; padding: 1.1rem 1.2rem 0.4rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.try-h { font-weight: 700; margin: 0 0 0.4rem !important; }
.try p { font-size: 1.05rem; }