
/* Layout: atlas plate (map) left, study panel right; stacks on phones. Hypsometric tints are the palette. */
:root{
  --paper:#edf0ec; --panel:#f8f9f6; --ink:#1c2826; --muted:#5a6866; --rule:#d3d9d4;
  --sea:#bcd6e2; --land-other:#e1e3dc; --base:#e6e1cc;
  --campie:#b7d69a; --podis:#eadb98; --deal:#d8b277; --munte:#a77850; --delta:#9ccfc2; --g-a:#8a5a33; --g-b:#c39468; --rl:72%; --park:#2e7d4f; --res:#7a4fb3;
  --water:#2c6eae; --halo:#f8f9f6; --accent:#b0204f; --accent-soft:#f6dbe4;
  --good:#1f7a4a; --bad:#b3261e;
  --f-display:"Literata",Georgia,serif; --f-body:"Barlow",system-ui,sans-serif; --f-label:"Barlow Condensed","Arial Narrow",sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#121817; --panel:#19201f; --ink:#e3ebe7; --muted:#97a6a2; --rule:#2c3634;
  --sea:#1c3442; --land-other:#222928; --base:#2d3029;
  --campie:#4d6b3b; --podis:#77693a; --deal:#7e5d35; --munte:#6c4a2d; --delta:#2c6a60; --g-a:#5a3a20; --g-b:#94673f; --rl:34%; --park:#5fc48a; --res:#b99be8;
  --water:#6db0ea; --halo:#121817; --accent:#ff6f9c; --accent-soft:#40202b; --good:#5fd08f; --bad:#ff7b72; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#121817; --panel:#19201f; --ink:#e3ebe7; --muted:#97a6a2; --rule:#2c3634;
  --sea:#1c3442; --land-other:#222928; --base:#2d3029;
  --campie:#4d6b3b; --podis:#77693a; --deal:#7e5d35; --munte:#6c4a2d; --delta:#2c6a60; --g-a:#5a3a20; --g-b:#94673f; --rl:34%; --park:#5fc48a; --res:#b99be8;
  --water:#6db0ea; --halo:#121817; --accent:#ff6f9c; --accent-soft:#40202b; --good:#5fd08f; --bad:#ff7b72; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.45;margin:0}
.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:18px 28px;max-width:1500px;margin:0 auto}
header{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:8px 12px;margin-bottom:14px}
h1{font-family:var(--f-display);font-weight:600;font-size:clamp(22px,3vw,30px);margin:0;letter-spacing:-.01em;text-wrap:balance}
h1 em{font-style:italic;font-weight:400;color:var(--muted)}
.mode{margin-left:auto}
.themebtn{width:40px;height:40px;border-radius:999px;border:1px solid var(--rule);background:var(--panel);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;flex:0 0 auto}
.themebtn:hover{border-color:var(--ink)}
.themebtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.themebtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mode{display:inline-flex;border:1px solid var(--rule);border-radius:999px;padding:3px;background:var(--panel)}
.mode button{font:600 13px/1 var(--f-label);letter-spacing:.06em;text-transform:uppercase;border:0;background:none;color:var(--muted);padding:8px 14px;border-radius:999px;cursor:pointer}
.mode button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:18px;align-items:start}
@media (max-width:900px){.grid{grid-template-columns:minmax(0,1fr)}}
.plate{position:relative;background:var(--sea);border:1px solid var(--rule);border-radius:6px;overflow:hidden;min-width:0}
.plate svg{display:block;width:100%;height:auto;touch-action:pan-y;cursor:grab;user-select:none}
.plate svg.dragging{cursor:grabbing}
.plate svg.zoomed{touch-action:none}
.plate svg.finding{cursor:crosshair}
.zoom{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:4px}
.zoom button{width:34px;height:34px;border-radius:6px;border:1px solid var(--rule);background:var(--panel);color:var(--ink);font:600 18px/1 var(--f-body);cursor:pointer}
.legend{position:absolute;left:10px;bottom:10px;display:flex;flex-wrap:wrap;gap:4px 10px;background:color-mix(in srgb,var(--panel) 88%,transparent);border:1px solid var(--rule);border-radius:6px;padding:7px 10px;font:500 12px/1.2 var(--f-label);letter-spacing:.03em;max-width:calc(100% - 64px)}
.legend span{display:inline-flex;align-items:center;gap:5px}
.legend i{width:12px;height:12px;border-radius:2px;display:inline-block;border:1px solid rgba(0,0,0,.12)}
.legend .ln{height:3px;border:0;border-radius:2px;background:var(--water)}
.tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--paper);font:600 13px/1.2 var(--f-label);letter-spacing:.02em;padding:5px 8px;border-radius:4px;white-space:nowrap;transform:translate(-50%,-130%)}
.panel{background:var(--panel);border:1px solid var(--rule);border-radius:6px;min-width:0;display:flex;flex-direction:column;max-height:calc(100vh - 110px)}
@media (max-width:900px){.panel{max-height:none}}
.secs{display:flex;gap:6px;padding:10px 10px 4px;flex-wrap:wrap}
.secs button{font:600 13px/1 var(--f-label);letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--rule);background:none;color:var(--muted);padding:8px 12px;border-radius:999px;cursor:pointer}
.secs button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.secs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tabs{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--rule);padding:6px 6px 0;scrollbar-width:thin}
.tabs button{flex:0 0 auto;font:600 14px/1 var(--f-label);letter-spacing:.04em;text-transform:uppercase;border:0;background:none;color:var(--muted);padding:10px 10px 11px;border-bottom:3px solid transparent;cursor:pointer;display:flex;align-items:center;gap:6px}
.tabs button i{width:9px;height:9px;border-radius:2px;display:inline-block}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.tabs button:focus-visible,.mode button:focus-visible,.item:focus-visible,.opt:focus-visible,.zoom button:focus-visible,.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.body{overflow:auto;padding:14px 16px 18px;min-height:0}
.intro{color:var(--muted);font-size:14px;margin:0 0 12px}
.card{border:1px solid var(--accent);background:var(--accent-soft);border-radius:6px;padding:12px 14px;margin-bottom:14px}
.card .eyebrow{font:600 11px/1 var(--f-label);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.card h2{font-family:var(--f-display);font-weight:600;font-size:21px;margin:0 0 4px;line-height:1.2}
.card .num{font:600 15px/1.2 var(--f-label);letter-spacing:.03em;color:var(--accent);margin-bottom:6px}
.card ul{margin:6px 0 0;padding-left:18px}
.card li{margin:3px 0}
.grp{font:700 12px/1 var(--f-label);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:16px 0 6px;padding-bottom:5px;border-bottom:1px solid var(--rule)}
.grp:first-of-type{margin-top:4px}
.item{display:flex;justify-content:space-between;align-items:baseline;gap:10px;width:100%;text-align:left;border:0;background:none;color:var(--ink);font:500 15px/1.3 var(--f-body);padding:6px 6px;border-radius:4px;cursor:pointer}
.item:hover{background:color-mix(in srgb,var(--accent-soft) 60%,transparent)}
.item[aria-current="true"]{background:var(--accent-soft);color:var(--accent);font-weight:600}
.item.gitem{font-weight:600}
.item.gitem::before{content:'';width:10px;height:10px;border-radius:2px;background:var(--gsw,var(--g-a));flex:0 0 auto;align-self:center;margin-right:-4px}
.hgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.hbtn{display:flex;align-items:center;gap:8px;text-align:left;border:1px solid var(--rule);background:var(--paper);color:var(--ink);font:500 14px/1.25 var(--f-body);padding:9px 10px;border-radius:6px;cursor:pointer;min-height:44px}
.hbtn:hover{border-color:var(--ink)}
.hbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hbtn i{width:10px;height:10px;border-radius:2px;flex:0 0 auto}
.item small{font:500 13px/1 var(--f-label);letter-spacing:.03em;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.stat{display:flex;gap:14px;flex-wrap:wrap;font:500 13px/1.3 var(--f-label);letter-spacing:.03em;color:var(--muted);margin:0 0 12px}
.stat b{color:var(--ink);font-weight:700}
.quiz h2{font-family:var(--f-display);font-weight:600;font-size:20px;margin:0 0 4px}
.quiz p{margin:0 0 12px;color:var(--muted);font-size:14px}
.opts{display:grid;gap:6px}
.opt{text-align:left;border:1px solid var(--rule);background:var(--paper);color:var(--ink);font:500 15px/1.3 var(--f-body);padding:10px 12px;border-radius:6px;cursor:pointer}
.opt:hover:not(:disabled){border-color:var(--ink)}
.opt.ok{border-color:var(--good);color:var(--good);font-weight:600}
.opt.no{border-color:var(--bad);color:var(--bad);text-decoration:line-through}
.opt:disabled{cursor:default}
.fb{margin-top:12px;font-size:14px}
.btn{margin-top:12px;font:600 14px/1 var(--f-label);letter-spacing:.06em;text-transform:uppercase;border:0;background:var(--ink);color:var(--paper);padding:11px 16px;border-radius:6px;cursor:pointer}
.scope{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.scope label{font:500 13px/1 var(--f-label);letter-spacing:.03em;display:inline-flex;gap:5px;align-items:center;color:var(--muted)}
.foot{color:var(--muted);font-size:12px;margin-top:12px}
/* map */
.u{stroke:none;transition:opacity .25s}
.u.campie{fill:var(--campie)}.u.lunca{fill:color-mix(in srgb,var(--campie) 60%,var(--delta))}.u.podis{fill:var(--podis)}.u.deal{fill:var(--deal)}.u.munte{fill:var(--munte)}.u.delta{fill:var(--delta)}
svg.dimrel .u{opacity:.32}
svg.dimrel .u.on{opacity:1}
svg.soft .u{opacity:.6}
.u.sel{stroke:var(--accent);stroke-width:2.5;opacity:1!important}
.nb{fill:var(--land-other);stroke:var(--rule);stroke-width:.8}
.ro-base{fill:var(--base)}
.ro-line{fill:none;stroke:var(--ink);stroke-width:1.3;stroke-linejoin:round}
.rv{fill:none;stroke:var(--water);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.rv.big{stroke-width:2.2}
.rv-hit{fill:none;stroke:transparent;stroke-width:12;cursor:pointer}
svg.riv .rv{stroke-width:2;opacity:1}
svg.riv .rv.big{stroke-width:3}
.rv.sel{stroke:var(--accent)!important;stroke-width:3.6!important;opacity:1}
.lk{fill:var(--water);stroke:none}
#zones .zn{display:none}
svg.t-clima .zn.cl,svg.t-vegetatie .zn.vg{display:inline}
.zn{stroke:var(--halo);stroke-width:.8;cursor:pointer}
.zn.sel{stroke:var(--accent);stroke-width:3}
#corr{display:none}
svg.t-depresiuni #corr{display:inline}
.kr{fill:none;stroke:var(--ink);stroke-opacity:.22;stroke-width:11;stroke-linecap:round;stroke-linejoin:round;cursor:pointer}
.kr.sel{stroke:var(--accent);stroke-opacity:.75}
.mk-type{fill:var(--accent);stroke:var(--halo);stroke-width:1.3}
.pt.sel .mk-type{fill:var(--ink)}
#winds{display:none}
svg.t-clima #winds{display:inline}
.wd{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#arw)}
.wd.sel{stroke:var(--accent);marker-end:url(#arw-s);stroke-width:4}
.wd-hit{fill:none;stroke:transparent;stroke-width:16;cursor:pointer}
#arw path{fill:var(--ink)} #arw-s path{fill:var(--accent)}
.mk-park{fill:var(--park);stroke:var(--halo);stroke-width:1.3}
.mk-res{fill:var(--res);stroke:var(--halo);stroke-width:1.3}
.mk-rec{fill:var(--accent);stroke:var(--halo);stroke-width:1.2}
.pt.sel .mk-park,.pt.sel .mk-res{fill:var(--accent)}
.pt.sel .mk-rec{fill:var(--ink)}
.clickmark{stroke:var(--ink);stroke-width:2.5;pointer-events:none}
.item i.sw{width:12px;height:12px;border-radius:2px;display:inline-block;margin-right:8px;vertical-align:-1px;border:1px solid var(--rule)}
.qtype{display:inline-flex;border:1px solid var(--rule);border-radius:999px;padding:3px;margin-bottom:12px}
.qtype button{font:600 12px/1 var(--f-label);letter-spacing:.05em;text-transform:uppercase;border:0;background:none;color:var(--muted);padding:7px 11px;border-radius:999px;cursor:pointer}
.qtype button[aria-pressed="true"]{background:var(--accent);color:var(--panel)}
.weak{font-size:13px;color:var(--muted);margin-top:14px;border-top:1px solid var(--rule);padding-top:10px}
.linkbtn{border:0;background:none;color:var(--accent);font:600 13px/1 var(--f-label);letter-spacing:.04em;cursor:pointer;padding:4px 0;text-decoration:underline}
#groups .gp{display:none}
svg.t-munti #groups .gp.mg,svg.t-dealuri #groups .gp.kd,svg.t-dealuri #groups .gp.kp,svg.t-campii #groups .gp.kc{display:inline}
.gp.sub{stroke-width:1.5}
.gp.kc.sa{fill:var(--campie)}.gp.kc.sb{fill:color-mix(in srgb,var(--campie) 78%,var(--podis))}.gp.kc.sc{fill:color-mix(in srgb,var(--campie) 80%,var(--munte))}
.gp.kp.sa{fill:var(--podis)}.gp.kp.sb{fill:color-mix(in srgb,var(--podis) 75%,var(--deal))}.gp.kp.sc{fill:color-mix(in srgb,var(--podis) 80%,var(--campie))}
.gp.kd.sa{fill:var(--deal)}.gp.kd.sb{fill:color-mix(in srgb,var(--deal) 75%,var(--munte))}.gp.kd.sc{fill:color-mix(in srgb,var(--deal) 80%,var(--podis))}
.gp{stroke:var(--halo);stroke-width:2;cursor:pointer;opacity:.95}
.gp.ga{fill:var(--g-a)}.gp.gb{fill:var(--g-b)}
.gp.sel{stroke:var(--accent);stroke-width:3}
svg.t-munti .u.munte{opacity:1}
#counties,#regions{display:none}
svg.s-admin #counties{display:inline}
svg.t-regiuni #regions{display:inline}
.cty{fill:transparent;stroke:var(--ink);stroke-width:.7;stroke-opacity:.55}
svg.t-judete .cty{cursor:pointer}
svg.t-judete .cty:hover{fill:color-mix(in srgb,var(--accent) 12%,transparent)}
svg:not(.t-judete) .cty{pointer-events:none}
.cty.sel{fill:color-mix(in srgb,var(--accent) 35%,transparent);stroke:var(--accent);stroke-width:2;stroke-opacity:1}
.rg{stroke:var(--ink);stroke-width:1.6;fill-opacity:.55;cursor:pointer}
.rg.sel{stroke:var(--accent);stroke-width:3;fill-opacity:.8}
svg.s-admin .u{opacity:.45}
.mk-gorge{fill:var(--water);stroke:var(--halo);stroke-width:1.2}
.mk-pass{fill:var(--halo);stroke:var(--ink);stroke-width:1.6}
.mk-city{fill:var(--panel);stroke:var(--ink);stroke-width:1.6}
.mk-capital{fill:var(--ink);stroke:var(--halo);stroke-width:1.5}
.pt.sel .mk-gorge,.pt.sel .mk-city,.pt.sel .mk-capital{fill:var(--accent)}
.pt.sel .mk-pass{stroke:var(--accent);fill:var(--accent)}
.lbl.minor{font-size:9.5px;font-weight:500}
svg:not(.zoomed) .lbl.minor{display:none}
.lbl.minor2{font-size:10px;font-style:italic}
.lbl.sublbl{font-size:10.5px;font-weight:700;letter-spacing:.02em}
.lbl.grp{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.lbl.cap{font-size:13px;font-weight:700}
.lk.sel{fill:var(--accent)}
.u,.lk{cursor:pointer}
.pt circle,.pt path{cursor:pointer}
.mk-dot{fill:var(--ink);stroke:var(--halo);stroke-width:1.5}
.mk-peak{fill:var(--ink);stroke:var(--halo);stroke-width:1.2}
.mk-dep{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-dasharray:3 2}
.mk-lake{fill:var(--water);stroke:var(--halo);stroke-width:1.5}
.pt.sel .mk-dot,.pt.sel .mk-peak,.pt.sel .mk-lake{fill:var(--accent)}
.pt.sel .mk-dep{stroke:var(--accent);stroke-width:2.4}
.lbl{font-family:var(--f-label);font-weight:600;font-size:11px;fill:var(--ink);paint-order:stroke;stroke:var(--halo);stroke-width:3px;stroke-linejoin:round;pointer-events:none;letter-spacing:.02em}
.lbl.h2o{font-family:var(--f-display);font-style:italic;font-weight:500;fill:var(--water)}
.lbl.big{font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;opacity:.8}
.lbl.sel{fill:var(--accent);font-size:13px}
.lbl.nbl{font-size:12px;letter-spacing:.18em;text-transform:uppercase;fill:var(--muted);font-weight:500;stroke-width:0}
.lbl.sea{font-family:var(--f-display);font-style:italic;font-size:15px;fill:var(--water);stroke-width:0;letter-spacing:.08em}
svg.quizzing .lbl.dyn{display:none}
.ring{fill:none;stroke:var(--accent);stroke-width:2.5;pointer-events:none}
@keyframes pulse{0%{r:6;opacity:1}100%{r:24;opacity:0}}
.ring.anim{animation:pulse 1.4s ease-out infinite}
@media (prefers-reduced-motion:reduce){.ring.anim{animation:none}.u{transition:none}}

.ttl{display:flex;flex-direction:column;gap:2px;min-width:0}
.brand{display:inline-flex;align-items:center;gap:9px;font:700 15px/1 var(--f-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.brand img{border-radius:7px;display:block}
.brand:hover{text-decoration:underline}
#ph1{font-family:var(--f-display);font-weight:600;font-size:clamp(20px,2.6vw,28px);margin:0;letter-spacing:-.01em;text-wrap:balance;line-height:1.2}
.seo{max-width:780px;margin:34px auto 0;padding-top:24px;border-top:1px solid var(--rule)}
.seo .lead{font-size:17px;line-height:1.55;margin:0 0 8px}
.seo h2{font-family:var(--f-display);font-weight:600;font-size:21px;margin:26px 0 8px;text-wrap:balance}
.seo h3{font:700 15px/1.3 var(--f-body);margin:18px 0 4px}
.seo p{margin:0 0 10px;line-height:1.6}
.facts{padding-left:20px;margin:0}
.facts li{margin:6px 0;line-height:1.55}
.facts .n{color:var(--muted);font-variant-numeric:tabular-nums}
.seo a{color:var(--accent)}
.topics{margin-top:34px;padding-top:6px;border-top:1px solid var(--rule)}
.topics ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px 18px}
.topics a{text-decoration:none;color:var(--ink);font-weight:500}
.topics a:hover{color:var(--accent);text-decoration:underline}
.topics a[aria-current]{color:var(--accent);font-weight:600}
.cards{list-style:none;padding:0;margin:12px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.cards a{display:block;border:1px solid var(--rule);border-radius:6px;padding:12px 14px;text-decoration:none;color:var(--ink);background:var(--panel);height:100%}
.cards a:hover{border-color:var(--accent)}
.cards strong{display:block;font-family:var(--f-display);font-size:16px;margin-bottom:4px}
.cards span{font-size:14px;color:var(--muted)}
.sitefoot{max-width:780px;margin:30px auto 0;padding-top:14px;border-top:1px solid var(--rule);font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 16px}
.sitefoot a{color:var(--muted)}
.ad{max-width:780px;margin:28px auto 0;min-height:110px;text-align:center}
.adlbl{display:block;font:600 11px/1 var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.ad:has(ins[data-ad-status="unfilled"]){display:none}
.sitefoot .disc{flex-basis:100%;margin:0 0 6px;line-height:1.5}
