/* Registrul — cel-mai-lung-nume-localitate-romania. Archival instrument, not app. */
@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/fraunces-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF;
}
@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/fraunces-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+1E00-1EFF;
}
@font-face {
  font-family: "Source Serif 4"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("fonts/source-serif-4-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF;
}
@font-face {
  font-family: "Source Serif 4"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("fonts/source-serif-4-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+1E00-1EFF;
}
@font-face {
  font-family: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/source-serif-4-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF;
}
@font-face {
  font-family: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/source-serif-4-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+1E00-1EFF;
}

:root {
  --paper: #f4eee1;
  --paper-2: #ece4d2;
  --ink: #1c1712;
  --ink-soft: #4a4238;
  --muted: #6f6455;
  --line: #d3c8b2;
  --accent: #a93226;
  --accent-ink: #7c241b;
  --cell: #faf7ee;
  --focus: #0f5fd0;
  --serif-d: "Fraunces", "Iowan Old Style", Palatino, Georgia, serif;
  --serif-b: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --bar-h: 3.4rem;
  --radius: 3px;
}
[data-theme="dark"] {
  --paper: #171310;
  --paper-2: #211b16;
  --ink: #ece4d3;
  --ink-soft: #cfc4b0;
  --muted: #9a8f7c;
  --line: #3a332a;
  --accent: #d0604f;
  --accent-ink: #e08a7c;
  --cell: #201a15;
  --focus: #7db3ff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--serif-b); font-size: 1.075rem; line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
main { display: block; max-width: 72rem; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem) 4rem; }
section { scroll-margin-top: calc(var(--bar-h) + 1rem); }
h1, h2, h3 { font-family: var(--serif-d); font-weight: 560; line-height: 1.08; letter-spacing: -0.015em; text-wrap: balance; }
a { color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; background: var(--ink); color: var(--paper); padding: 0.6rem 1rem; z-index: 60; border-radius: var(--radius); transition: top 0.15s; }
.skip:focus { top: 0.6rem; }
.js-only { display: none !important; }
html.js .controls.js-only { display: flex !important; }
html.js .search.js-only { display: block !important; }

/* ---------- topbar (house pattern) ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50; height: var(--bar-h);
  display: flex; align-items: center; gap: 1rem;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
  max-width: 72rem; margin: 0 auto;
}
.topbar .home { font-family: var(--mono); font-size: 0.8rem; color: var(--ink); text-decoration: none; white-space: nowrap; }
.topnav { display: flex; gap: 1.1rem; overflow-x: auto; scrollbar-width: none; }
.topnav::-webkit-scrollbar { display: none; }
.topnav a { color: var(--ink-soft); text-decoration: none; font-size: 0.92rem; white-space: nowrap; }
.topnav a[aria-current="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.topbar .spacer { flex: 1; }
.topbar .chip { font-size: 0.85rem; color: var(--ink-soft); text-decoration: none; border: 1px solid var(--line); border-radius: 99px; padding: 0.2rem 0.7rem; white-space: nowrap; }
.icon-btn { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--ink); cursor: pointer; display: grid; place-items: center; padding: 0; }
.icon-btn svg { display: block; }
.icon-btn svg[hidden] { display: none; }

/* ---------- hero ---------- */
.hero { padding: clamp(2rem, 6vw, 4.5rem) 0 1.5rem; }
.kicker { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 1rem; }
.kicker::before { content: ""; display: inline-block; width: 2rem; height: 0.6rem; margin-right: 0.6rem; background: var(--accent); vertical-align: baseline; }
.hero h1 { font-size: clamp(2rem, 5.2vw, 3.4rem); max-width: 20ch; margin: 0 0 2rem; }
.answer { border-top: 3px double var(--ink); border-bottom: 1px solid var(--line); padding: 1.6rem 0 1.4rem; margin-bottom: 1.4rem; }
.count { font-family: var(--serif-d); font-size: clamp(1.4rem, 3vw, 2rem); margin: 1.2rem 0 0.2rem; }
.count strong { font-size: 1.9em; color: var(--accent); font-weight: 650; letter-spacing: -0.02em; }
.place { margin: 0; color: var(--ink-soft); font-size: 1rem; }
.deck { font-size: clamp(1.1rem, 2.4vw, 1.3rem); max-width: 56ch; color: var(--ink-soft); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.4rem; }
.btn { display: inline-block; background: var(--ink); color: var(--paper); text-decoration: none; font-family: var(--serif-d); font-size: 1rem; padding: 0.7rem 1.4rem; border-radius: var(--radius); border: 1px solid var(--ink); }
.btn.ghost { background: none; color: var(--ink); }
[data-theme="dark"] .btn:not(.ghost) { background: var(--ink); color: var(--paper); }

/* ---------- letter strips ---------- */
.strip { display: flex; flex-wrap: wrap; gap: 4px; }
.strip .word { display: inline-flex; gap: 4px; }
.strip .word:not(:last-child) { margin-right: 12px; }
.winner { font-family: var(--serif-d); font-weight: 560; font-size: clamp(1.5rem, 4.4vw, 2.3rem); letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
.nospace { font-family: var(--serif-b); font-size: 0.55em; color: var(--muted); white-space: nowrap; }
.ch { display: inline-flex; flex-direction: column; align-items: center; min-width: 2.5rem; padding: 0.35rem 0.3rem 0.25rem; background: var(--cell); border: 1px solid var(--line); border-radius: var(--radius); transition: background 0.3s, border-color 0.3s; }
.ch b { font-family: var(--serif-d); font-weight: 600; font-size: 1.5rem; line-height: 1.1; }
.ch i { font-family: var(--mono); font-style: normal; font-size: 0.62rem; color: var(--muted); }
.ch.lit { background: var(--accent); border-color: var(--accent); }
.ch.lit b { color: #fff8f0; }
.ch.lit i { color: #f3d9d4; }
[data-theme="dark"] .ch.lit b { color: #1c0f0c; }
[data-theme="dark"] .ch.lit i { color: #4a1f18; }

.hero .ch { min-width: clamp(2.2rem, 4.6vw, 3.1rem); }
.hero .ch b { font-size: clamp(1.4rem, 3.4vw, 2.1rem); }
.specimen .ch { min-width: 2rem; }
.specimen .ch b { font-size: 1.15rem; }

/* ---------- share ---------- */
.share { border: 1px solid var(--line); border-radius: var(--radius); background: var(--cell); padding: 1rem 1.2rem; margin: 1.5rem 0 0; }
.share-kicker { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); margin: 0 0 0.7rem; }
.share-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.share-btn { min-height: 3rem; display: inline-flex; align-items: center; padding: 0.55rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); font-size: 0.92rem; font-family: var(--serif-b); text-decoration: none; cursor: pointer; }
.share-note { min-height: 1.4em; font-size: 0.9rem; color: var(--muted); margin: 0.5rem 0 0; }
.share-note:empty { display: none; }

/* ---------- sections ---------- */
section[aria-labelledby] { padding-top: 3rem; }
.eyebrow { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--accent-ink); margin: 0 0 0.6rem; }
section h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); margin: 0 0 1rem; max-width: 26ch; }
.lead { font-size: 1.12rem; max-width: 62ch; color: var(--ink-soft); }
section > p { max-width: 68ch; }
.specimen { border-top: 1px solid var(--line); margin-top: 1.8rem; padding-top: 1.2rem; max-width: 72ch; }
.spec-label { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); margin: 0 0 0.9rem; }
.specimen p:last-child { color: var(--ink-soft); max-width: 64ch; }
.charnums { display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; font-size: 1.25rem; }
.charnums strong { font-family: var(--mono); color: var(--accent); font-size: 1.3em; }

/* measuring-tape dividers */
#reguli, #clasament, #metoda { position: relative; }
#reguli::before, #clasament::before, #metoda::before {
  content: ""; display: block; height: 0.7rem; margin-bottom: 1.6rem;
  background: repeating-linear-gradient(to right, var(--muted) 0 1px, transparent 1px 0.7rem);
  opacity: 0.55;
}

/* ---------- explorer ---------- */
.controls { display: flex; flex-wrap: wrap; gap: 0.8rem 1.6rem; align-items: end; margin: 1.4rem 0; }
.ctl { display: flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--cell); }
.ctl[role="group"]::before { content: attr(aria-label); position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ctl button { appearance: none; border: 0; background: none; color: var(--ink-soft); font-family: var(--serif-b); font-size: 0.95rem; padding: 0.6rem 1rem; cursor: pointer; min-height: 2.9rem; }
.ctl button + button { border-left: 1px solid var(--line); }
.ctl button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
label.ctl.sel { align-items: center; gap: 0.5rem; padding: 0 0.4rem 0 0.8rem; font-size: 0.9rem; color: var(--muted); }
label.ctl.sel select { font: inherit; color: var(--ink); background: none; border: 0; padding: 0.6rem 0.2rem; min-height: 2.9rem; max-width: 12rem; }
.search { margin: 0 0 1.4rem; max-width: 40rem; }
.search label { display: block; font-family: var(--mono); font-size: 0.8rem; color: var(--muted); margin-bottom: 0.4rem; }
.search input { width: 100%; font-family: var(--serif-d); font-size: 1.25rem; color: var(--ink); background: var(--cell); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.7rem 1rem; }
.search .hint { font-size: 0.85rem; color: var(--muted); margin: 0.35rem 0 0; }
#qres { margin-top: 0.6rem; }
#qres ol { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--cell); }
#qres li button { width: 100%; display: flex; gap: 0.8rem; align-items: baseline; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 0.6rem 0.9rem; cursor: pointer; color: var(--ink); font-size: 1rem; }
#qres li:last-child button { border-bottom: 0; }
#qres .qr { margin-left: auto; font-family: var(--mono); font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.qdetail { border: 1px solid var(--line); border-radius: var(--radius); background: var(--cell); padding: 0.9rem 1.1rem; margin-top: 0.6rem; }
.qdetail strong { font-family: var(--serif-d); font-size: 1.3rem; display: block; }
.qdetail span { color: var(--ink-soft); }

/* distribution */
.dist { display: flex; align-items: flex-end; gap: 3px; height: 7.5rem; overflow-x: auto; padding: 0.5rem 0.2rem 0; border-bottom: 2px solid var(--ink); }
.bar { flex: 1 0 1.4rem; min-width: 1.1rem; max-width: 2.6rem; height: max(6%, calc(var(--h) * 1%)); min-height: 6px; background: var(--ink-soft); opacity: 0.82; border: 0; border-radius: 2px 2px 0 0; position: relative; padding: 0; }
button.bar { cursor: pointer; }
button.bar:hover, button.bar.active { background: var(--accent); opacity: 1; }
.bar.empty { background: none; border: 1px dashed var(--line); border-bottom: 0; opacity: 1; }
.bar span { position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 0.62rem; color: var(--muted); }
.distcap { font-size: 0.9rem; color: var(--muted); margin: 1.6rem 0 1rem; }

/* rank lists */
.ranks { list-style: none; margin: 0 0 1.5rem; padding: 0; border-top: 2px solid var(--ink); }
.ranks li { display: flex; align-items: baseline; gap: 0.9rem; padding: 0.5rem 0.2rem; border-bottom: 1px solid var(--line); }
.rk { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); min-width: 2.6rem; text-align: right; }
.nm { font-family: var(--serif-d); font-weight: 560; font-size: 1.08rem; }
.mt { margin-left: auto; font-size: 0.85rem; color: var(--muted); text-align: right; }
.vl { font-family: var(--mono); font-size: 0.85rem; color: var(--accent-ink); white-space: nowrap; min-width: 7.5rem; text-align: right; }
.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5rem; }
.twocol h4 { font-family: var(--mono); font-weight: 400; font-size: 0.8rem; letter-spacing: 0.05em; color: var(--muted); margin: 1.2rem 0 0.4rem; }
.modepane h3 { font-size: 1.15rem; margin: 1.6rem 0 0; }
.short-note { color: var(--ink-soft); max-width: 64ch; }
.listmeta { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); margin: 0 0 0.4rem; }

/* method + sources */
#metoda p, #surse ul { max-width: 68ch; }
.sources { list-style: none; padding: 0; }
.sources li { padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.sources li:first-child { border-top: 2px solid var(--ink); }
.site-footer { border-top: 3px double var(--ink); margin-top: 3rem; padding: 1.2rem 0 0; color: var(--muted); font-size: 0.95rem; }
.top-link { position: fixed; right: 1rem; bottom: 1rem; background: var(--ink); color: var(--paper); text-decoration: none; font-size: 0.85rem; padding: 0.6rem 0.9rem; border-radius: var(--radius); opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 40; }
.top-link.show { opacity: 1; pointer-events: auto; }

@media (max-width: 56rem) { .twocol { grid-template-columns: 1fr; } }
@media (max-width: 30rem) {
  body { font-size: 1rem; }
  .topbar { gap: 0.5rem; padding-inline: 0.7rem; }
  .topbar .home { font-size: 0.68rem; }
  .topnav { gap: 0.65rem; }
  .topnav a { font-size: 0.82rem; }
  .topbar .chip { font-size: 0.76rem; padding: 0.12rem 0.45rem; }
  .mt { display: none; }
  .vl { min-width: 0; }
  .ch { min-width: 1.9rem; }
  .ch b { font-size: 1.05rem; }
  .hero .ch { min-width: 1.85rem; }
  .hero .ch b { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Generated height buckets for distribution bars (CSP forbids inline styles). */
.bh0{--h:0}
.bh1{--h:1}
.bh2{--h:2}
.bh3{--h:3}
.bh4{--h:4}
.bh5{--h:5}
.bh6{--h:6}
.bh7{--h:7}
.bh8{--h:8}
.bh9{--h:9}
.bh10{--h:10}
.bh11{--h:11}
.bh12{--h:12}
.bh13{--h:13}
.bh14{--h:14}
.bh15{--h:15}
.bh16{--h:16}
.bh17{--h:17}
.bh18{--h:18}
.bh19{--h:19}
.bh20{--h:20}
.bh21{--h:21}
.bh22{--h:22}
.bh23{--h:23}
.bh24{--h:24}
.bh25{--h:25}
.bh26{--h:26}
.bh27{--h:27}
.bh28{--h:28}
.bh29{--h:29}
.bh30{--h:30}
.bh31{--h:31}
.bh32{--h:32}
.bh33{--h:33}
.bh34{--h:34}
.bh35{--h:35}
.bh36{--h:36}
.bh37{--h:37}
.bh38{--h:38}
.bh39{--h:39}
.bh40{--h:40}
.bh41{--h:41}
.bh42{--h:42}
.bh43{--h:43}
.bh44{--h:44}
.bh45{--h:45}
.bh46{--h:46}
.bh47{--h:47}
.bh48{--h:48}
.bh49{--h:49}
.bh50{--h:50}
.bh51{--h:51}
.bh52{--h:52}
.bh53{--h:53}
.bh54{--h:54}
.bh55{--h:55}
.bh56{--h:56}
.bh57{--h:57}
.bh58{--h:58}
.bh59{--h:59}
.bh60{--h:60}
.bh61{--h:61}
.bh62{--h:62}
.bh63{--h:63}
.bh64{--h:64}
.bh65{--h:65}
.bh66{--h:66}
.bh67{--h:67}
.bh68{--h:68}
.bh69{--h:69}
.bh70{--h:70}
.bh71{--h:71}
.bh72{--h:72}
.bh73{--h:73}
.bh74{--h:74}
.bh75{--h:75}
.bh76{--h:76}
.bh77{--h:77}
.bh78{--h:78}
.bh79{--h:79}
.bh80{--h:80}
.bh81{--h:81}
.bh82{--h:82}
.bh83{--h:83}
.bh84{--h:84}
.bh85{--h:85}
.bh86{--h:86}
.bh87{--h:87}
.bh88{--h:88}
.bh89{--h:89}
.bh90{--h:90}
.bh91{--h:91}
.bh92{--h:92}
.bh93{--h:93}
.bh94{--h:94}
.bh95{--h:95}
.bh96{--h:96}
.bh97{--h:97}
.bh98{--h:98}
.bh99{--h:99}
.bh100{--h:100}