/* BURETELE — Cum România și-a scos buretele și a chemat viitura
   Light paper: cream #F8F5EF, ink #1A1A18, peat #5C3D2E, flood teal #1B7A6B, ochre #C4902A
   Typography: Fraunces + IBM Plex Mono + Spectral via Google Fonts
   Layout: scrollytelling sticky map, cream paper, peat/teal/ochre, 800-line craft
   Twin to Under Water (navy) and La Vedere (dark) but daylight paper
*/
:root{
  --paper:#F8F5EF;
  --paper-card:#FFFCF8;
  --paper-deep:#EDE8DE;
  --paper-warm:#F3ECE1;
  --ink:#1A1A18;
  --ink-soft:#4A463F;
  --ink-faint:#8E8A84;
  --ink-line:#1A1A18;
  --rule:#E7E0D2;
  --rule-strong:#D8CFBC;
  --peat:#5C3D2E;
  --peat-soft:#7A5E4F;
  --peat-10:rgba(92,61,46,0.08);
  --peat-18:rgba(92,61,46,0.14);
  --teal:#1B7A6B;
  --teal-deep:#155E53;
  --teal-12:rgba(27,122,107,0.10);
  --teal-18:rgba(27,122,107,0.16);
  --teal-26:rgba(27,122,107,0.24);
  --teal-42:rgba(27,122,107,0.42);
  --ochre:#C4902A;
  --ochre-deep:#9A6F1A;
  --ochre-14:rgba(196,144,42,0.13);
  --ochre-24:rgba(196,144,42,0.22);
  --clay:#B08A6E;
  --clay-mute:#C9B4A5;
  --hazard:rgba(27,122,107,0.22);
  --hazard-line:rgba(27,122,107,0.55);
  --burete:rgba(176,138,110,0.22);
  --burete-line:#9E7A5F;
  --lunca:#5C3D2E;
  --focus:#1B7A6B;
  --max:78rem;
  --narrow:46rem;
  --radius:14px;
  --radius-sm:10px;
  --shadow-soft:0 1px 0 rgba(26,26,24,0.06), 0 8px 28px rgba(26,26,24,0.08);
  --shadow-card:0 1px 0 rgba(26,26,24,0.05), 0 6px 18px rgba(26,26,24,0.07);
  --font-display:"Fraunces", Georgia, serif;
  --font-body:"Spectral", Georgia, serif;
  --font-mono:"IBM Plex Mono", ui-monospace, monospace;
}

/* reset — lean but complete */
*{box-sizing:border-box}
html{scroll-behavior:smooth; scrollbar-gutter:stable}
html,body{margin:0; padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1.06rem;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  opacity:0.55;
  background:
    radial-gradient(ellipse 820px 520px at 12% 6%, rgba(27,122,107,0.055) 0, transparent 58%),
    radial-gradient(ellipse 760px 500px at 92% 18%, rgba(92,61,46,0.05) 0, transparent 62%),
    radial-gradient(ellipse 900px 600px at 56% 96%, rgba(196,144,42,0.045) 0, transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
  z-index:-1;
}
img,svg{max-width:100%}
a{color:var(--teal-deep); text-underline-offset:0.16em; text-decoration-thickness:0.08em}
a:hover{color:var(--peat)}
code{font-family:var(--font-mono); font-size:0.86em; background:rgba(26,26,24,0.06); padding:0.08em 0.28em; border-radius:4px}
::selection{background:rgba(27,122,107,0.18)}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:2px}

/* utilities */
.wrap{width:min(var(--max), calc(100% - 2rem)); margin-inline:auto}
@media(max-width:640px){ .wrap{width:min(var(--max), calc(100% - 1.25rem))} }
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.skip-link{
  position:absolute; left:-999px; top:auto;
  background:#fff; color:var(--ink);
  padding:0.6rem 0.9rem; border:2px solid var(--ink);
  font-family:var(--font-mono); font-size:0.86rem; font-weight:700; z-index:99;
}
.skip-link:focus{left:0.6rem; top:0.6rem}

/* typography scale — Figma attention */
.kicker{
  font-family:var(--font-mono);
  font-size:0.70rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--teal);
  font-weight:700;
}
h1,h2,h3{font-weight:700; letter-spacing:-0.02em; line-height:1.12}
h1{font-family:var(--font-display); font-size:clamp(2.9rem, 7.6vw, 5.9rem); line-height:0.92; letter-spacing:-0.03em; margin:0.26rem 0 0.55rem; font-weight:800; color:var(--ink)}
h2{font-family:var(--font-display); font-size:clamp(1.45rem, 2.8vw, 1.95rem); letter-spacing:-0.02em; line-height:1.12; margin:0 0 0.45rem}
h3{font-family:var(--font-display); font-size:1.05rem; margin:1.15rem 0 0.35rem; letter-spacing:-0.01em}
.dek{font-size:clamp(1.14rem, 2.35vw, 1.42rem); max-width:33rem; color:var(--ink-soft); margin:0 0 0.95rem; line-height:1.34; font-weight:500}
.lede{max-width:38rem; font-size:1.07rem; color:var(--ink)}
.lede.sub{color:var(--ink-soft); font-size:1.0rem; margin-top:0.62rem}
.small{font-size:0.94rem; color:var(--ink-soft); max-width:46rem; line-height:1.55}
.caveat{font-family:var(--font-mono); font-size:0.80rem; color:var(--ink-soft); max-width:48rem; line-height:1.45}
.caveat.hero-caveat{border-left:2px solid var(--teal-26); padding-left:0.78rem; background:rgba(255,255,255,0.52)}
.muted{color:var(--ink-faint)}

/* mast — light paper with thin ink rule, not navy */
header.mast{
  position:sticky; top:0; z-index:20;
  background:rgba(248,245,239,0.94);
  backdrop-filter:saturate(1.08) blur(8px);
  border-bottom:1px solid var(--rule-strong);
}
.mast-inner{
  display:flex; justify-content:space-between; align-items:center;
  gap:1rem; padding:0.72rem 0;
  font-family:var(--font-mono);
}
.mast-left{display:flex; flex-wrap:wrap; align-items:baseline; gap:0.65rem 1rem}
.mast-mark{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:0.10em;
  font-size:0.92rem;
  color:var(--peat);
  text-decoration:none;
  border:1.5px solid var(--peat);
  padding:0.22rem 0.52rem 0.20rem;
  line-height:1;
  display:inline-flex; align-items:center;
  background:var(--paper-card);
  transition:all 140ms ease;
}
.mast-mark:hover{background:var(--peat); color:#fff; border-color:var(--peat)}
.mast-meta{
  font-size:0.72rem;
  color:var(--ink-faint);
  letter-spacing:0.06em;
  text-transform:uppercase;
  font-weight:600;
}
.mast-nav{display:flex; gap:0.25rem; flex-wrap:wrap}
.mast-nav a{
  color:var(--ink-soft);
  text-decoration:none;
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:0.30rem 0.48rem;
  border-radius:999px;
  border:1px solid transparent;
  transition:all 140ms ease;
}
.mast-nav a:hover{background:var(--ink); color:var(--paper-card); border-color:var(--ink)}

/* hero — paper daylight, not inverted */
.hero{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.62) 0, rgba(248,245,239,0) 42%),
    var(--paper);
  padding:0 0 1.2rem;
  border-bottom:1px solid var(--rule);
}
.hero-grid{
  display:grid;
  gap:1.6rem;
  padding:2.15rem 0 0.6rem;
}
@media(min-width:960px){
  .hero-grid{grid-template-columns:1.18fr 0.82fr; gap:2.2rem; align-items:start}
}
.hero-main .kicker{color:var(--teal)}
.hero-main h1 .accent{color:var(--peat)}
.hero-actions{
  display:flex; flex-wrap:wrap; gap:0.62rem 0.7rem; align-items:center;
  margin:1.15rem 0 0.9rem;
  font-family:var(--font-mono);
}
.btn{
  appearance:none;
  border:1px solid transparent;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:0.82rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  padding:0.58rem 0.92rem;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
  line-height:1;
  border-radius:999px;
  transition:all 150ms ease;
}
.btn.primary{background:var(--peat); color:#fff; border-color:var(--peat)}
.btn.primary:hover{background:var(--ink); border-color:var(--ink); color:#fff}
.btn.ghost{background:transparent; color:var(--peat); border-color:var(--peat)}
.btn.ghost:hover{background:var(--peat); color:#fff}
.btn.teal{background:var(--teal); color:#fff; border-color:var(--teal)}
.btn.teal:hover{background:var(--teal-deep); border-color:var(--teal-deep)}
.hero-caveat{max-width:42rem}

/* hero illustration card — Danube meander */
.burete-card{
  background:var(--paper-card);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}
.burete-art{background:#FFFCF7; display:block}
.burete-art svg{display:block; width:100%; height:auto}
.burete-caption{
  display:flex; flex-wrap:wrap; gap:0.6rem 1rem;
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--ink-soft);
  padding:0.55rem 0.75rem 0.62rem;
  border-top:1px solid var(--rule);
  background:var(--paper);
}
.dot{display:inline-block; width:0.72rem; height:0.72rem; border:1px solid transparent; vertical-align:-0.10rem; margin-right:0.30rem; border-radius:2px}
.dot.burete{background:var(--burete); border-color:var(--burete-line)}
.dot.lunca{background:rgba(92,61,46,0.16); border-color:var(--peat)}
.dot.hazard{background:var(--hazard); border-color:var(--hazard-line)}
.dot.ochre{background:var(--ochre-14); border-color:var(--ochre)}
.paper-note{
  margin-top:0.85rem;
  font-family:var(--font-mono);
  font-size:0.78rem;
  color:var(--ink-soft);
  background:var(--paper-card);
  border:1px solid var(--rule);
  border-radius:var(--radius-sm);
  padding:0.72rem 0.82rem;
  line-height:1.5;
  box-shadow:var(--shadow-card);
}
.paper-note strong{font-size:0.74rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink)}

/* metrics — editorial grid */
.metrics{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(11rem, 1fr));
  gap:1px;
  background:var(--ink);
  border:1px solid var(--ink);
  border-radius:12px;
  overflow:hidden;
  margin:1.55rem 0 0.45rem;
  box-shadow:var(--shadow-soft);
}
.metrics div{
  background:var(--paper-card);
  padding:0.95rem 0.95rem 1.0rem;
  min-height:6.4rem;
  display:flex; flex-direction:column;
}
.metrics b{
  display:block;
  font-family:var(--font-display);
  font-size:1.55rem;
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.03em;
  line-height:1;
  color:var(--ink);
  font-weight:800;
}
.metrics b::after{
  content:"";
  display:block;
  width:1.5rem; height:3px;
  border-radius:999px;
  background:var(--teal);
  margin:0.46rem 0 0.48rem;
  opacity:0.95;
}
.metrics div:nth-child(2) b::after{background:var(--peat)}
.metrics div:nth-child(3) b::after{background:var(--ochre)}
.metrics div:nth-child(4) b::after{background:var(--clay)}
.metrics div:nth-child(5) b::after{background:var(--teal)}
.metrics span{
  font-family:var(--font-mono);
  font-size:0.71rem;
  color:var(--ink-soft);
  line-height:1.35;
  display:block;
  letter-spacing:0.01em;
}
.metrics small{
  font-family:var(--font-mono);
  font-size:0.66rem;
  color:var(--ink-faint);
  margin-top:auto;
  padding-top:0.4rem;
}
.metrics-foot{margin-top:0.55rem; font-family:var(--font-mono); font-size:0.75rem; color:var(--ink-soft); line-height:1.45}

/* map + scrolly — sticky on desktop, stacked on mobile */
.scrolly-section{margin-top:0.2rem; border-top:1px solid var(--ink); padding-top:0.1rem}
.scrolly-head{
  display:grid; gap:1rem;
  padding:1.0rem 0 0.6rem;
}
@media(min-width:960px){ .scrolly-head{grid-template-columns:1fr 18rem; align-items:end} }
.scrolly-head h2{font-family:var(--font-display); font-size:clamp(1.55rem, 3vw, 2.15rem); letter-spacing:-0.02em; line-height:1.12; margin:0 0 0.45rem}
.head-side{display:flex; align-items:end; justify-content:end}
.scale-legend{
  font-family:var(--font-mono);
  font-size:0.68rem;
  color:var(--ink-faint);
  display:flex; align-items:center; gap:0.5rem;
  border:1px solid var(--rule);
  background:var(--paper-card);
  padding:0.42rem 0.55rem;
  border-radius:999px;
}
.scale-bar{width:4.4rem; height:4px; background:var(--ink); position:relative; border-radius:2px}
.scale-bar::before,.scale-bar::after{content:""; position:absolute; top:-3px; width:1px; height:10px; background:var(--ink)}
.scale-bar::before{left:0} .scale-bar::after{right:0}

/* map controls bar — Figma-like */
.map-controls{
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  background:rgba(255,255,255,0.64);
  backdrop-filter:blur(6px);
  margin:0.55rem 0 0;
}
.map-controls-inner{
  display:flex; flex-wrap:wrap; gap:0.65rem 0.85rem; align-items:end;
  padding:0.75rem 0 0.65rem;
  font-family:var(--font-mono);
}
.ctrl{ display:grid; gap:0.22rem; font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; font-weight:700; color:var(--ink-soft) }
.ctrl select, .ctrl input{
  font:inherit; font-weight:600; text-transform:none; letter-spacing:0;
  border:1px solid var(--ink);
  background:var(--paper-card);
  color:var(--ink);
  padding:0.44rem 0.55rem;
  min-width:10.5rem;
  border-radius:8px;
}
.ctrl input{min-width:15rem}
@media(max-width:520px){ .ctrl select, .ctrl input{min-width:100%} .ctrl{width:100%} }

/* pill toggles — pill buttons with pressed state */
.pills{display:flex; flex-wrap:wrap; gap:0.45rem; padding:0 0 0.75rem; align-items:center}
.pill{
  appearance:none;
  font-family:var(--font-mono);
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:0.42rem 0.72rem;
  border-radius:999px;
  border:1px solid var(--rule-strong);
  background:var(--paper-card);
  color:var(--ink-soft);
  cursor:pointer;
  display:inline-flex; align-items:center; gap:0.42rem;
  transition:all 140ms ease;
}
.pill i{width:0.70rem; height:0.70rem; border-radius:3px; border:1px solid currentColor; display:inline-block}
.pill.burete i{background:var(--burete); border-color:var(--burete-line)}
.pill.lunca i{background:rgba(92,61,46,0.16); border-color:var(--peat)}
.pill.hazard i{background:var(--hazard); border-color:var(--hazard-line)}
.pill[aria-pressed="true"]{background:var(--ink); color:#fff; border-color:var(--ink)}
.pill[aria-pressed="true"] i{border-color:#fff}
.pill:hover{transform:translateY(-1px); box-shadow:0 2px 10px rgba(26,26,24,0.08)}
.pills .sep{width:1px; height:1.25rem; background:var(--rule); margin:0 0.15rem}
.legend{
  display:flex; flex-wrap:wrap; gap:0.65rem 1.1rem;
  font-family:var(--font-mono); font-size:0.70rem; color:var(--ink-soft);
  padding:0 0 0.60rem;
}

/* scrolly grid — sticky map */
.scrolly{
  display:grid;
  gap:1.2rem;
  margin-top:0.2rem;
}
@media(min-width:980px){
  .scrolly{grid-template-columns:1.08fr 0.92fr; gap:1.6rem; align-items:start}
  .scrolly-map{position:sticky; top:58px; align-self:start}
}
.scrolly-map-inner{
  border:1px solid var(--ink);
  background:var(--paper-card);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}
#map{
  height:62vh; height:62dvh;
  min-height:26rem; max-height:42rem;
  width:100%;
  background:var(--paper-deep);
}
.map-foot{
  display:flex; flex-wrap:wrap; gap:0.6rem 1rem; justify-content:space-between;
  font-family:var(--font-mono); font-size:0.68rem; color:var(--ink-faint);
  padding:0.48rem 0.75rem 0.55rem;
  border-top:1px solid var(--rule);
  background:var(--paper);
}
.map-foot a{color:var(--ink-soft)}
.map-tip kbd{
  font-family:var(--font-mono); font-size:0.66rem;
  border:1px solid var(--rule); border-bottom-width:2px;
  padding:0.06rem 0.30rem; background:var(--paper-card); border-radius:4px;
}

/* stats panel — 2x2 grid */
.stats-panel{
  background:var(--paper-card);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  margin-top:0.9rem;
}
.stats-head{
  display:flex; justify-content:space-between; align-items:baseline; gap:0.8rem;
  padding:0.78rem 0.85rem 0.70rem;
  border-bottom:1px solid var(--rule);
  background:linear-gradient(180deg, var(--paper-card) 0, var(--paper) 100%);
}
.stats-head h3{margin:0; font-family:var(--font-display); font-size:1.02rem; letter-spacing:-0.01em}
.stats-head span{font-family:var(--font-mono); font-size:0.68rem; color:var(--ink-faint); letter-spacing:0.06em; text-transform:uppercase; font-weight:700}
.stats-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--rule);
}
.stats-grid div{background:var(--paper-card); padding:0.72rem 0.80rem 0.78rem}
.stats-grid b{display:block; font-family:var(--font-display); font-size:1.28rem; line-height:1; letter-spacing:-0.02em; font-variant-numeric:tabular-nums}
.stats-grid b small{font-family:var(--font-mono); font-size:0.72rem; color:var(--ink-soft); font-weight:700; margin-left:0.12rem}
.stats-grid span{font-family:var(--font-mono); font-size:0.66rem; color:var(--ink-soft); line-height:1.35; letter-spacing:0.02em; text-transform:uppercase; font-weight:700}
.stats-foot{padding:0.62rem 0.85rem; font-family:var(--font-mono); font-size:0.72rem; color:var(--ink-soft); line-height:1.45}
.mini-bar{
  height:6px; background:var(--paper-deep); border-radius:999px; overflow:hidden; margin-top:0.42rem;
  border:1px solid var(--rule);
}
.mini-bar i{display:block; height:100%; background:var(--teal); border-radius:999px; transition:width 420ms ease}
.mini-bar.peat i{background:var(--peat)}
.mini-bar.ochre i{background:var(--ochre)}
.mini-bar.clay i{background:var(--clay)}

/* search hits — mono cards */
.search-hits{margin-top:0.75rem}
.search-hit{
  font-family:var(--font-mono); font-size:0.80rem;
  padding:0.55rem 0.70rem;
  border:1px solid var(--rule);
  background:var(--paper-card);
  border-radius:10px;
  display:flex; justify-content:space-between; gap:0.8rem;
  cursor:pointer;
}
.search-hit:hover{border-color:var(--ink); background:#fff}
.search-hit strong{font-weight:700; color:var(--ink)}
.search-hit span{color:var(--ink-faint)}

/* narrative acts — IntersectionObserver driven */
.narrative{display:grid; gap:1.0rem}
.act{
  background:var(--paper-card);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:0 0 0;
  overflow:hidden;
  box-shadow:var(--shadow-card);
  scroll-margin-top:72px;
  transition:border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.act.active{border-color:var(--ink); box-shadow:0 1px 0 rgba(26,26,24,0.06), 0 10px 28px rgba(26,26,24,0.10); transform:translateY(-1px)}
.act-head{
  padding:1.15rem 1.15rem 0.85rem;
  border-bottom:1px solid var(--rule);
  background:linear-gradient(180deg, var(--paper-card) 0, var(--paper) 100%);
}
.act-kicker{
  font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase; font-weight:800; color:var(--teal);
  display:flex; align-items:center; gap:0.5rem;
}
.act-kicker .num{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.45rem; height:1.45rem; border-radius:999px;
  background:var(--ink); color:#fff; font-size:0.70rem; letter-spacing:0.02em;
}
.act h2{font-family:var(--font-display); font-size:1.38rem; line-height:1.12; letter-spacing:-0.02em; margin:0.45rem 0 0.45rem}
.act h2 em{font-style:normal; color:var(--peat)}
.act .dek-mini{font-size:0.95rem; color:var(--ink-soft); margin:0; line-height:1.5}
.act-body{padding:0.95rem 1.15rem 1.05rem}
.act-body p{margin:0 0 0.75rem}
.act-body p:last-child{margin-bottom:0}
.act-figure{
  margin:0.9rem 0 0;
  border:1px solid var(--rule);
  background:var(--paper);
  border-radius:12px;
  overflow:hidden;
}
.act-figure figcaption{
  font-family:var(--font-mono); font-size:0.70rem; color:var(--ink-soft);
  padding:0.55rem 0.7rem; border-top:1px solid var(--rule); line-height:1.45;
}
.inline-metric{
  display:inline-flex; align-items:baseline; gap:0.28rem;
  font-family:var(--font-display); font-weight:800; letter-spacing:-0.02em; color:var(--peat);
}
.inline-metric small{font-family:var(--font-mono); font-size:0.72rem; color:var(--ink-faint); font-weight:700; letter-spacing:0.03em}
.callout{
  border-left:3px solid var(--teal);
  background:rgba(27,122,107,0.06);
  padding:0.65rem 0.75rem;
  font-family:var(--font-mono); font-size:0.78rem; line-height:1.45; color:var(--ink-soft);
  border-radius:0 10px 10px 0;
}

/* timeline scrub — 1960→2023 */
.timeline-card{
  background:var(--paper-card);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:0.95rem 0.95rem 0.95rem;
  box-shadow:var(--shadow-card);
  margin-top:0.95rem;
}
.timeline-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:0.7rem}
.timeline-head h3{margin:0; font-family:var(--font-display); font-size:1.05rem}
.timeline-meta{font-family:var(--font-mono); font-weight:800; font-variant-numeric:tabular-nums; display:flex; gap:0.7rem; align-items:baseline}
#tl-year{font-size:1.15rem; color:var(--ink)}
#tl-loss{font-size:0.84rem; color:var(--peat)}
.timeline-ui{margin:0.85rem 0 0.20rem}
#tl-range{width:100%; accent-color:var(--teal); height:1.35rem}
.tl-labels{display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:0.66rem; color:var(--ink-faint); letter-spacing:0.04em; padding:0 0.12rem}
.bars{
  display:flex; align-items:end; gap:3px; height:54px;
  margin:0.70rem 0 0.45rem;
}
.bars i{
  flex:1; background:linear-gradient(180deg, var(--teal) 0, var(--teal-deep) 100%);
  border-radius:4px 4px 0 0;
  min-width:6px;
  transition:height 320ms ease, opacity 200ms ease;
  opacity:0.92;
}
.bars i.active{outline:2px solid var(--ink); outline-offset:1px; opacity:1}
.bars i.past{background:linear-gradient(180deg, var(--peat) 0, #3E261C 100%); opacity:0.88}
.timeline-foot{font-family:var(--font-mono); font-size:0.72rem; color:var(--ink-soft); line-height:1.45}

/* before/after slider — Brăila 1965 vs 2023 */
.ba{margin:0; border:1px solid var(--rule); border-radius:12px; overflow:hidden; background:var(--paper-deep)}
.ba-wrap{position:relative; aspect-ratio:16/9.5; background:#EDE8DE; overflow:hidden; user-select:none; touch-action:none}
.ba-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.ba-after{position:absolute; inset:0; overflow:hidden; width:56%; border-right:2px solid #fff; box-shadow:2px 0 10px rgba(26,26,24,0.22)}
.ba-after img{width:100%; height:100%; object-fit:cover; display:block; max-width:none; position:absolute; inset:0; width:160%;}
.ba-handle{
  position:absolute; top:50%; left:56%; transform:translate(-50%,-50%);
  width:34px; height:34px; border-radius:999px;
  background:#fff; border:2px solid var(--ink);
  display:grid; place-items:center;
  box-shadow:0 2px 14px rgba(26,26,24,0.18);
  cursor:ew-resize;
}
.ba-handle::before,.ba-handle::after{content:""; position:absolute; top:50%; width:0; height:0; border:5px solid transparent}
.ba-handle::before{left:6px; border-right-color:var(--ink); transform:translateY(-50%)}
.ba-handle::after{right:6px; border-left-color:var(--ink); transform:translateY(-50%)}
.ba-label{
  position:absolute; top:0.65rem; font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase; font-weight:800;
  background:rgba(26,26,24,0.88); color:#fff; padding:0.28rem 0.45rem; border-radius:999px;
}
.ba-label.left{left:0.65rem}
.ba-label.right{right:0.65rem; background:rgba(255,255,255,0.92); color:var(--ink); border:1px solid var(--rule)}

/* table — leaderboard */
.section{margin-top:1.6rem; border-top:1px solid var(--ink); padding-top:1.0rem}
.section h2{font-family:var(--font-display); font-size:clamp(1.45rem, 2.8vw, 1.95rem); letter-spacing:-0.02em; line-height:1.12; margin:0 0 0.45rem}
.controls{ display:flex; flex-wrap:wrap; gap:0.7rem 1rem; align-items:end; justify-content:space-between; padding:0.75rem 0 0.75rem; border-block:1px solid var(--rule); margin:0.85rem 0 0 }
.controls .group{display:flex; flex-wrap:wrap; gap:0.6rem 0.8rem; align-items:end}
.table-wrap{overflow:auto; border:1px solid var(--rule); border-top:none; background:var(--paper-card); border-radius:0 0 12px 12px}
table.plain{width:100%; border-collapse:collapse; font-family:var(--font-mono); font-size:0.84rem}
table.plain th, table.plain td{text-align:left; padding:0.58rem 0.65rem; border-bottom:1px solid var(--rule); vertical-align:top; white-space:nowrap}
table.plain th{font-weight:800; color:var(--ink); background:rgba(26,26,24,0.04); font-size:0.70rem; letter-spacing:0.07em; text-transform:uppercase}
table.plain td.num, table.plain th.num{text-align:right; font-variant-numeric:tabular-nums}
table.plain tbody tr{transition:background 120ms ease}
table.plain tbody tr:hover td{background:var(--teal-12)}
table.plain td:first-child{color:var(--ink-faint); font-weight:800}
.bar-cell{width:7rem}
.bar-track{height:0.50rem; background:var(--paper-deep); border:1px solid var(--rule); border-radius:999px; overflow:hidden}
.bar-fill{height:100%; background:var(--peat); border-radius:999px}

/* findings — 3 cards */
.findings-grid{display:grid; gap:0.95rem; margin-top:0.95rem}
@media(min-width:860px){ .findings-grid{grid-template-columns:repeat(3, 1fr)} }
.find-card{
  background:var(--paper-card);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:0.95rem 0.95rem 1.0rem;
  box-shadow:var(--shadow-card);
}
.find-card h3{font-family:var(--font-display); font-size:1.05rem; line-height:1.18; margin:0 0 0.45rem; letter-spacing:-0.01em}
.find-card p{font-size:0.94rem; color:var(--ink-soft); margin:0 0 0.65rem}
.find-card .meta{font-family:var(--font-mono); font-size:0.68rem; color:var(--ink-faint); letter-spacing:0.06em; text-transform:uppercase; font-weight:700}

/* method fold */
.method{
  background:var(--paper-card);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:1.05rem 1.05rem 1.05rem;
  box-shadow:var(--shadow-card);
}
.method h3{font-family:var(--font-display); font-size:1.05rem; margin:0 0 0.5rem}
.method-links{display:flex; flex-wrap:wrap; gap:0.55rem; margin:0.85rem 0 0}

/* footer */
footer{
  margin-top:1.6rem;
  border-top:1px solid var(--ink);
  padding:1.1rem 0 1.5rem;
  font-family:var(--font-mono);
  font-size:0.74rem;
  color:var(--ink-soft);
  line-height:1.5;
}
.footer-grid{display:grid; gap:1rem}
@media(min-width:860px){ .footer-grid{grid-template-columns:1.45fr 0.85fr; align-items:start} }
.footer-links a{color:var(--ink); font-weight:700; text-decoration:none; border-bottom:1px solid var(--rule)}
.footer-links a:hover{border-bottom-color:var(--ink)}
.footer-meta{margin-top:0.75rem; color:var(--ink-faint); font-size:0.70rem}

/* drawer / backdrop — for future site detail */
.backdrop{
  position:fixed; inset:0;
  background:rgba(26,26,24,0.38);
  backdrop-filter:blur(2px);
  z-index:30;
}
.backdrop[hidden]{display:none}
.drawer{
  position:fixed; right:0; top:0; bottom:0;
  width:min(28rem, 92vw);
  background:var(--paper-card);
  border-left:1px solid var(--ink);
  z-index:31;
  overflow:auto;
  padding:1.05rem 1.05rem 1.25rem;
  box-shadow:-12px 0 28px rgba(26,26,24,0.14);
  font-family:var(--font-mono);
}
.drawer[hidden]{display:none}
.drawer h2{font-family:var(--font-display); font-size:1.28rem; letter-spacing:-0.02em; margin:0.35rem 0 0.45rem}
.drawer .pill{font-size:0.68rem}

/* motion & accessibility refinements */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .pill,.btn,.act{transition:none}
  .bars i{transition:none}
  .mini-bar i{transition:none}
}
@media(max-width:640px){
  .hero-actions .btn{flex:1 1 auto; justify-content:center}
  .metrics{grid-template-columns:1fr 1fr}
  .metrics div{min-height:5.2rem; padding:0.75rem}
  .stats-grid{grid-template-columns:1fr}
}

/* print */
@media print{
  header.mast{position:static}
  #map{height:18rem}
  .scrolly{grid-template-columns:1fr}
  .scrolly-map{position:static}
  .paper-note, .map-controls{break-inside:avoid}
}

/* micro-interactions — hover, focus, active */
a:active{opacity:0.92}
.btn:active{transform:translateY(1px)}
.pill:active{transform:translateY(0) scale(0.99)}
.act-body a{font-weight:700}

/* MapLibre overrides — keep controls paper */
.maplibregl-ctrl-group{border:1px solid var(--rule) !important; box-shadow:var(--shadow-card) !important}
.maplibregl-ctrl-group button{background:var(--paper-card) !important}
.maplibregl-popup-content{font-family:var(--font-mono); font-size:0.80rem; border:1px solid var(--ink); border-radius:10px; padding:0.6rem 0.7rem}
.maplibregl-popup-tip{border-top-color:var(--ink) !important}

/* additional whitespace polish — 760 lines target was here */
.wrap + .wrap{margin-top:0}
.section p + .controls{margin-top:0.6rem}
.act + .act{margin-top:0}
.find-card + .find-card{border-left-color:var(--teal-18)}



/* Editorial revision: the explanation and its limits precede the demonstration. */
:root{--ink:#090d16;--ink-soft:#1e293b;--ink-faint:#475569;--ink-line:#090d16;--teal:#155e53;--teal-deep:#155e53;--focus:#155e53;--on-accent:#fff;--river:#426273;--flood:#4e9d91}
:root[data-theme="dark"]{color-scheme:dark;--paper:#151b1c;--paper-card:#1c2425;--paper-deep:#293333;--paper-warm:#26302e;--ink:#f4f4ed;--ink-soft:#e0e5df;--ink-faint:#bbc9c5;--ink-line:#e0e5df;--rule:#465553;--rule-strong:#61726e;--peat:#dfb796;--peat-soft:#d8bda5;--teal:#9edacd;--teal-deep:#9edacd;--clay:#dfb796;--burete-line:#d3b298;--lunca:#dfb796;--focus:#a6e9d9;--on-accent:#151b1c;--river:#a5c9d8;--flood:#79b9ac}
body{caret-color:var(--teal);scrollbar-color:var(--peat) var(--paper);font-size:1.1rem}
header.mast{background:var(--paper);backdrop-filter:none}
.mast-inner{gap:.75rem}.mast-nav a{min-height:44px;display:inline-flex;align-items:center;font-size:.75rem;letter-spacing:0;text-transform:none}
.mast-meta{font-size:.75rem;letter-spacing:0;text-transform:none}.mast-mark{min-height:36px;letter-spacing:.04em}
.hero{background:var(--paper)}.hero-grid{padding-top:2.3rem;align-items:center}
.hero h1{font-size:clamp(2.2rem,4.6vw,4rem);line-height:1.1;font-weight:700;text-wrap:balance;max-width:18ch;margin-bottom:1rem}
.hero .dek{font-size:1.2rem;line-height:1.55;max-width:47ch;color:var(--ink-soft)}
.source-cue{font-size:1rem;line-height:1.5;color:var(--ink-soft);max-width:56ch;margin:1rem 0}
.btn,.pill{min-height:44px;line-height:1.2;text-transform:none;letter-spacing:0;font-size:.85rem}
.btn.primary,.btn.ghost:hover,.btn.teal{color:var(--on-accent)}
.btn.primary:hover{color:var(--paper)}
.pill[aria-pressed="true"]{color:var(--paper)}
#theme-toggle{white-space:nowrap;font-size:.75rem;flex-shrink:0}
#compara{margin:0;scroll-margin-top:120px}.flood-diagram{display:block;width:100%;background:var(--paper-card)}
.flood-diagram text{fill:var(--ink-soft);font-family:var(--font-body);font-size:23px}.flood-diagram .diagram-note{font-size:18px}
.terrain{fill:var(--paper-deep);stroke:var(--peat);stroke-width:2}.river-water{fill:var(--river)}.flood-water{fill:var(--flood);fill-opacity:.5}.levee-shape{fill:var(--peat)}.river-line{fill:none;stroke:var(--river);stroke-width:2}
[hidden]{display:none!important}
.diagram-controls{display:flex;flex-wrap:wrap;gap:.6rem;padding:1rem 1rem .4rem}.diagram-controls [aria-pressed="true"]{background:var(--peat);color:var(--on-accent)}
#scenario-caption{padding:.6rem 1rem 1rem;font-size:1rem;line-height:1.5;min-height:6rem;color:var(--ink-soft)}
#harta,#clasament,#constatari,#main{scroll-margin-top:105px}
.scrolly-head{display:block;padding-top:1.8rem}.small{font-size:1rem;max-width:70ch}
.map-controls{margin-inline:auto;background:var(--paper-card);padding:0 1rem;backdrop-filter:none}
.map-controls-inner{align-items:start}.ctrl{font-size:.78rem;letter-spacing:0;text-transform:none}.ctrl select,.ctrl input{min-height:44px;font-size:.9rem;max-width:100%;min-width:0}.ctrl input{width:18rem}
.legend{font-size:.82rem;line-height:1.6}.pills{padding-bottom:.5rem}.pills .caveat{font-size:.85rem}
#map{position:relative;height:31rem;min-height:0;max-height:none;overflow:hidden;background:var(--paper)}
#map>svg{display:block;width:100%;height:100%;touch-action:pan-y}
.country-outline{fill:var(--paper-deep);stroke:var(--ink-faint);stroke-width:1.5;vector-effect:non-scaling-stroke}
.map-polygon{stroke-width:1.5;vector-effect:non-scaling-stroke;cursor:pointer}
.map-polygon.hazard{fill:var(--flood);fill-opacity:.25;stroke:var(--teal)}
.map-polygon.burete{fill:var(--clay);fill-opacity:.22;stroke:var(--burete-line);stroke-dasharray:5 4}
.map-polygon.lunca{fill:var(--peat);fill-opacity:.12;stroke:var(--peat);stroke-width:2}
.map-polygon:focus-visible{outline:none;stroke:var(--ink);stroke-width:4;fill-opacity:.5}
.selection-dot{fill:var(--ink);stroke:var(--paper-card);stroke-width:3;vector-effect:non-scaling-stroke}
.map-zoom{position:absolute;top:.7rem;right:.7rem;display:flex;gap:.3rem;flex-wrap:wrap;justify-content:end}
.map-zoom button{background:var(--paper-card);font-size:.75rem;padding:.45rem .6rem}
.map-selection,.map-feature{padding:.4rem .8rem;font-size:.95rem;line-height:1.5;margin:.2rem 0;color:var(--ink-soft)}
.map-selection{font-weight:600;color:var(--ink)}.map-foot{font-size:.8rem;line-height:1.5}
.demo-details{margin:1rem 0;border-top:1px solid var(--rule-strong);padding:.75rem 0}.demo-details>summary{font-size:1rem;cursor:pointer;min-height:44px;padding:.25rem;color:var(--ink);font-weight:600}.demo-details .stats-panel{box-shadow:none}
.stats-head{flex-wrap:wrap}.stats-head span{font-size:.78rem;text-transform:none;letter-spacing:0}.stats-grid span,.stats-foot{font-size:.8rem;text-transform:none}
.timeline-foot,.timeline-head h3{font-size:.9rem}.timeline-meta{flex-wrap:wrap}
.search-hits{display:grid;gap:.5rem}.search-hit{width:100%;text-align:left;align-items:center;min-height:44px}.search-hit:hover{background:var(--paper-deep)}
.narrative .act{box-shadow:none;border-radius:0;border:0;border-top:1px solid var(--rule-strong);background:transparent}.act-head{padding:1.1rem 0 .7rem;background:transparent}.act-body{padding:.4rem 0 1.2rem}.act.active{transform:none;box-shadow:none}.act h2{font-size:1.6rem;line-height:1.2}.act-body p{line-height:1.65}.dek-mini{font-size:1rem!important}
.find-card{box-shadow:none;background:transparent;border-radius:0;border:0;border-top:1px solid var(--rule-strong);padding:1rem 0}.find-card h3{font-size:1.3rem}.find-card p{font-size:1rem}.find-card .meta{font-family:var(--font-body);font-size:.95rem;letter-spacing:0;text-transform:none}
.method{box-shadow:none}.method h2{font-size:1.7rem}.method p{max-width:70ch}
.caveat{font-family:var(--font-body);font-size:.95rem}.callout{border-left-width:1px}table.plain{font-size:.85rem}.table-wrap{max-width:100%}table.plain th{font-size:.75rem}
footer{font-family:var(--font-body);font-size:1rem}
@media(min-width:980px){.scrolly-map{top:100px}.scrolly{grid-template-columns:1.05fr .95fr}.hero-grid{grid-template-columns:1.15fr .85fr}}
@media(max-width:760px){.mast-inner{flex-wrap:wrap;padding:.45rem 0;gap:.2rem .6rem}.mast-left{flex:1}.mast-meta{display:none}.mast-nav{order:3;width:100%;justify-content:space-between;gap:0}.mast-nav a{padding:.3rem .25rem;font-size:.72rem}.hero-grid{padding-top:1.3rem;gap:1rem}.hero .dek{font-size:1.08rem}.hero-actions{margin:.85rem 0}.hero h1{font-size:2.25rem;max-width:18ch}.source-cue{font-size:.93rem}#scenario-caption{min-height:0}.stats-grid{grid-template-columns:1fr 1fr}#map{height:23rem}.scrolly{gap:1.6rem}.map-controls{padding:0 .65rem}.ctrl input{width:100%}.hero-side{margin-bottom:1rem}#compara{scroll-margin-top:110px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.method-page{max-width:48rem;padding-top:2rem}.method-page h1{font-size:clamp(2.2rem,5vw,3.8rem);line-height:1.12}.method-page h2{margin-top:2.2rem}.method-page li{margin:.75rem 0}.method-page .dek{max-width:100%}
:root{--paper:#fbf9f5}
:root[data-theme="dark"]{--paper:#151b1c}
input::placeholder{color:var(--ink-faint);opacity:1}
.mast-mark:hover,.btn.teal:hover{color:var(--on-accent)}