:root{
  --paper:#f4edde;
  --paper-deep:#ece2cd;
  --ink:#1b1815;
  --ink-soft:#4a4238;
  --red:#a32b1c;
  --red-soft:#c9705f;
  --rule:#c6b99f;
  --rule-faint:#ded2b8;
  --measure:33rem;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Vollkorn,"Iowan Old Style",Georgia,serif;
  font-size:19px;
  line-height:1.62;
  overflow-x:hidden;
}
img,svg{max-width:100%}
a{color:var(--red);text-underline-offset:.18em;text-decoration-thickness:.05em}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

.wrap{max-width:64rem;margin:0 auto;padding:0 1.4rem}
.col{max-width:var(--measure)}

/* ---- bara de sus ---- */
.top{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  max-width:64rem;margin:0 auto;padding:.9rem 1.4rem;
  font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;
}
.top a{text-decoration:none;color:var(--ink-soft)}
.top a:hover{color:var(--red)}
.top .lang a.active{color:var(--red);font-weight:600}

/* ---- masthead ---- */
.masthead{padding:1rem 0 2.6rem}
.masthead .rules{border-top:2px solid var(--ink);border-bottom:1px solid var(--ink);height:5px;margin-bottom:1.6rem}
.eyebrow{
  margin:0 0 1rem;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);
}
.eyebrow b{color:var(--red);font-weight:600}
h1{
  font-size:clamp(2.5rem,8.2vw,4.6rem);line-height:1.03;margin:0 0 1.1rem;
  font-weight:600;letter-spacing:-.012em;max-width:18ch;
}
h1 em{font-style:normal;color:var(--red)}
.lede{font-size:clamp(1.06rem,2.7vw,1.24rem);margin:0 0 1.4rem;max-width:38rem;color:var(--ink-soft)}
.lede b{color:var(--ink);font-weight:600}
.scrollcue{font-size:.9rem;letter-spacing:.04em;text-decoration:none;border-bottom:1px solid var(--rule)}

/* ---- sectiuni ---- */
section{padding:2.6rem 0}
.marker{
  font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--red);
  margin:0 0 .6rem;border-top:1px solid var(--rule);padding-top:.55rem;
}
h2{font-size:clamp(1.5rem,4.4vw,2.05rem);line-height:1.18;font-weight:600;margin:0 0 .9rem;max-width:26ch}
h1,h2,.lede{text-wrap:balance}
h3{font-size:1.06rem;font-weight:600;margin:1.8rem 0 .4rem}
p{margin:0 0 1.05rem}
.dropcap::first-letter{
  float:left;font-size:3.5rem;line-height:.82;padding:.08em .09em 0 0;color:var(--red);font-weight:600;
}
.note{font-size:.94rem;color:var(--ink-soft)}

/* ---- instrument ---- */
.tool{
  background:var(--paper-deep);
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
  padding:1.6rem 0 1.9rem;margin:1.8rem 0 0;
}
.tool .wrap{max-width:64rem}
.toolhead{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:baseline;margin-bottom:1.1rem}
.toolhead h3{margin:0;font-size:1rem;letter-spacing:.13em;text-transform:uppercase;font-weight:600}
.toolhead p{margin:0;font-size:.92rem;color:var(--ink-soft)}

.controls{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;margin-bottom:1.1rem}
.controls label{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
input[type="number"]{
  font:inherit;font-size:1.15rem;font-weight:600;width:5.6rem;padding:.28rem .45rem;
  background:var(--paper);color:var(--ink);border:1px solid var(--ink);border-radius:0;
  font-variant-numeric:lining-nums tabular-nums;
}
.chip,.mine .years{font-variant-numeric:lining-nums tabular-nums}
.step{
  font:inherit;font-size:1.1rem;line-height:1;padding:.35rem .7rem;cursor:pointer;
  background:var(--paper);color:var(--ink);border:1px solid var(--ink);
}
.step:hover{background:var(--ink);color:var(--paper)}
input[type="range"]{flex:1 1 14rem;min-width:10rem;accent-color:var(--red);height:1.6rem}

.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.3rem}
.chip{
  font:inherit;font-size:.86rem;padding:.22rem .6rem;cursor:pointer;
  background:transparent;color:var(--ink-soft);border:1px solid var(--rule);
}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}

.readout{
  font-size:1.12rem;margin:0 0 1.2rem;max-width:46rem;
}
.readout b{font-weight:600}
.readout .w{color:var(--ink)}
.readout .e{color:var(--red)}

svg text{font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1}
figure{margin:0}
figcaption{font-size:.86rem;color:var(--ink-soft);margin-top:.7rem;max-width:44rem}

/* ---- banda anilor ---- */
.band{margin-top:.4rem}
.bandhint{font-size:.86rem;color:var(--ink-soft);margin:.6rem 0 0}

/* ---- tabel cifre ---- */
.tally{width:100%;border-collapse:collapse;margin:1.2rem 0 .4rem;font-variant-numeric:lining-nums tabular-nums}
.tally th,.tally td{text-align:right;padding:.42rem .5rem;border-bottom:1px solid var(--rule-faint)}
.tally th:first-child,.tally td:first-child{text-align:left}
.tally thead th{
  font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
  border-bottom:1px solid var(--ink);font-weight:600;
}
.tally tbody tr:last-child td{border-bottom:1px solid var(--ink)}
.tally .rare td{color:var(--red)}

/* ---- anii tai ---- */
.mine{border:1px solid var(--rule);padding:1.1rem 1.2rem;margin-top:1.6rem;background:var(--paper)}
.mine p{margin:.5rem 0 0;font-size:1rem}
.mine .years{font-variant-numeric:tabular-nums;color:var(--ink-soft);font-size:.94rem;line-height:1.7}

/* ---- citat / istoric ---- */
.pull{
  border-left:3px solid var(--red);padding:.2rem 0 .2rem 1.1rem;margin:1.6rem 0;
  font-size:1.1rem;max-width:34rem;
}

/* ---- surse ---- */
.sources{font-size:.92rem;color:var(--ink-soft)}
.sources ol{padding-left:1.2rem;margin:.6rem 0 0}
.sources li{margin-bottom:.5rem}

footer{
  border-top:2px solid var(--ink);
  font-size:.9rem;color:var(--ink-soft);
}
footer.wrap{margin-top:4.5rem;padding-block:1.6rem 3rem}
footer a{color:var(--ink-soft)}
.totop{
  position:fixed;right:max(.85rem,env(safe-area-inset-right));bottom:max(.85rem,env(safe-area-inset-bottom));
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--paper);color:var(--ink);border:1px solid var(--ink);
  padding:.45rem .7rem;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:8;
}
.totop.on{opacity:1;pointer-events:auto}
.totop:hover{background:var(--ink);color:var(--paper)}
.no-js .totop{position:static;opacity:1;pointer-events:auto}


@media (max-width:640px){
  body{font-size:18px}
  .tool{padding:1.2rem 0 1.5rem}
  input[type="range"]{flex-basis:100%}
  .dropcap::first-letter{font-size:3rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}