/* ============================================================================
   The Albania Atlas — "Stone & Ionian"

   The identity comes from the country rather than from a UI kit: warm limestone
   paper, deep slate ink, Ionian teal, olive and terracotta roof-tile. Rules are
   hairlines, not boxes. Photography and the printed-plate illustrations do the
   decorative work; the chrome stays quiet.
   ========================================================================== */
@import url('/static/fonts/fonts.css');

:root{
  --paper:#FBF8F2;  --paper-2:#F4EEE2;  --surface:#FFFFFF; --surface-2:#F7F2E8;
  --ink:#19212B;    --ink-2:#4A5661;    --ink-3:#7C8791;
  --rule:#E3DACA;   --rule-2:#EFE9DC;   --rule-3:#F5F0E5;
  --teal:#0E6E77;   --teal-deep:#0A4E56; --teal-tint:#E1EFEF; --teal-ink:#0A5A62;
  --olive:#6B7838;  --olive-tint:#EDEFDF;
  --terra:#B0543A;  --terra-tint:#F7E9E2;
  --flag:#9E1E27;
  --shadow:0 1px 2px rgba(25,33,43,.05), 0 8px 24px -12px rgba(25,33,43,.14);
  --shadow-lg:0 2px 6px rgba(25,33,43,.07), 0 22px 50px -20px rgba(25,33,43,.24);
  --maxw:1240px; --rad:3px;
  --serif:'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  color-scheme:light;
}
[data-theme="dark"]{
  --paper:#111820;  --paper-2:#0C1219;  --surface:#18212B; --surface-2:#1D2833;
  --ink:#ECE6DA;    --ink-2:#AFB9C1;    --ink-3:#7C8892;
  --rule:#2A3542;   --rule-2:#222D39;   --rule-3:#1C2631;
  --teal:#43B6B8;   --teal-deep:#7FD3D0; --teal-tint:#152A2C; --teal-ink:#6BC9C8;
  --olive:#A6B65E;  --olive-tint:#1E2417;
  --terra:#E08D66;  --terra-tint:#2B1B14;
  --flag:#D5545C;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lg:0 2px 8px rgba(0,0,0,.45), 0 24px 56px -20px rgba(0,0,0,.7);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip; -webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 16.5px/1.62 var(--sans);
  font-feature-settings:"ss01","cv05";
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img,svg,video{max-width:100%; height:auto; display:block}
a{color:var(--teal-ink); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
button,input,select,textarea{font:inherit; color:inherit}
hr{border:0; border-top:1px solid var(--rule); margin:2.4rem 0}
:focus-visible{outline:2px solid var(--teal); outline-offset:2px; border-radius:2px}
::selection{background:var(--teal); color:#fff}

/* ------------------------------------------------------------ typography */
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; line-height:1.14;
  letter-spacing:-.012em; margin:0 0 .5em; color:var(--ink);
  font-variation-settings:"opsz" 40,"SOFT" 20}
h1{font-size:clamp(2.1rem,4.4vw,3.5rem); font-variation-settings:"opsz" 96,"SOFT" 30}
h2{font-size:clamp(1.5rem,2.5vw,2.1rem)}
h3{font-size:1.24rem; letter-spacing:-.006em}
h4{font-size:1.02rem; font-family:var(--sans); font-weight:650; letter-spacing:.005em}
p{margin:0 0 1.05em}
.lede{font-size:1.16rem; line-height:1.55; color:var(--ink-2); max-width:60ch}
.dek{font-family:var(--serif); font-size:1.28rem; line-height:1.45; color:var(--ink-2);
  font-variation-settings:"opsz" 30,"SOFT" 40; max-width:62ch}
.eyebrow{font:650 .705rem/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal-ink); margin:0 0 .85rem}
.eyebrow.olive{color:var(--olive)} .eyebrow.terra{color:var(--terra)}
.fineprint{font-size:.795rem; line-height:1.5; color:var(--ink-3)}
.muted{color:var(--ink-3)}
.nowrap{white-space:nowrap}

/* ---------------------------------------------------------------- layout */
.page{max-width:var(--maxw); margin:0 auto; padding:0 22px 80px}
.wide{max-width:1420px}
.band{padding:52px 0 4px; border-top:1px solid var(--rule-2); margin-top:48px}
.band:first-of-type{border-top:0; margin-top:0}
.band-head{display:flex; align-items:flex-end; gap:1.2rem; flex-wrap:wrap;
  margin-bottom:1.6rem}
.band-head h2{margin:0; flex:1 1 auto; min-width:0}
.band-head .more{font:600 .84rem/1 var(--sans); white-space:nowrap; padding-bottom:.35rem}
.grid{display:grid; gap:22px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g6{grid-template-columns:repeat(6,minmax(0,1fr))}
.split{display:grid; grid-template-columns:minmax(0,1fr) 336px; gap:44px; align-items:start}
.stack{display:flex; flex-direction:column; gap:14px}
.row{display:flex; gap:12px; align-items:center; flex-wrap:wrap}

/* --------------------------------------------------------------- topbar */
.topbar{position:sticky; top:0; z-index:60; background:color-mix(in srgb,var(--paper) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--rule);
  display:flex; align-items:center; gap:14px; padding:9px 22px; min-height:60px}
.brandmark{display:flex; align-items:center; gap:9px; flex:0 0 auto; min-width:auto}
.brandmark:hover{text-decoration:none}
.brandmark svg{flex:0 0 auto}
.wordmark{font-family:var(--serif); font-weight:600; font-size:1.16rem; letter-spacing:-.018em;
  color:var(--ink); line-height:1.05; font-variation-settings:"opsz" 60,"SOFT" 30}
.wordmark em{font-style:normal; color:var(--teal-ink)}
.wordmark .sub{display:block; font:500 .615rem/1 var(--sans); letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-3); margin-top:3px}
.mainnav{display:flex; align-items:center; gap:2px; margin-inline-start:8px; flex:1 1 auto;
  min-width:0}
.mainnav > a,.ddbtn{font:600 .875rem/1 var(--sans); color:var(--ink-2); padding:9px 10px;
  border-radius:var(--rad); white-space:nowrap}
.mainnav > a:hover,.ddbtn:hover{color:var(--ink); background:var(--surface-2); text-decoration:none}
.dd{position:relative}
.ddmenu{position:absolute; top:calc(100% + 7px); inset-inline-start:0; min-width:230px;
  background:var(--surface); border:1px solid var(--rule); border-radius:5px;
  box-shadow:var(--shadow-lg); padding:7px; display:none; z-index:70}
.ddmenu.open{display:block}
.ddmenu a{display:block; padding:8px 11px; font:500 .875rem/1.3 var(--sans);
  color:var(--ink-2); border-radius:3px}
.ddmenu a:hover{background:var(--teal-tint); color:var(--teal-ink); text-decoration:none}
.ddmenu .sep{height:1px; background:var(--rule-2); margin:6px 8px}
.searchwrap{position:relative; flex:0 1 250px; min-width:120px}
#searchBox{width:100%; padding:8px 12px 8px 32px; border:1px solid var(--rule);
  border-radius:20px; background:var(--surface); font-size:.875rem; transition:flex .2s}
#searchBox:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-tint)}
.searchwrap::before{content:"⌕"; position:absolute; inset-inline-start:11px; top:50%;
  transform:translateY(-52%); color:var(--ink-3); font-size:1.05rem; pointer-events:none}
.searchresults{position:absolute; top:calc(100% + 6px); inset-inline:0; background:var(--surface);
  border:1px solid var(--rule); border-radius:5px; box-shadow:var(--shadow-lg);
  max-height:65vh; overflow:auto; display:none; z-index:80}
.searchresults.open{display:block}
.sr{display:flex; gap:10px; align-items:center; padding:9px 12px; border-bottom:1px solid var(--rule-3)}
.sr:last-child{border-bottom:0}
.sr:hover,.sr.sel{background:var(--teal-tint); text-decoration:none}
.sr img{width:38px; height:28px; object-fit:cover; border-radius:2px; flex:0 0 auto}
.sr b{display:block; font:600 .875rem/1.25 var(--sans); color:var(--ink)}
.sr span{font:500 .72rem/1 var(--sans); color:var(--ink-3); letter-spacing:.03em}
.iconbtn{background:none; border:1px solid transparent; cursor:pointer; color:var(--ink-2);
  padding:7px 9px; border-radius:var(--rad); font-size:1rem; line-height:1; flex:0 0 auto}
.iconbtn:hover{background:var(--surface-2); color:var(--ink)}
.savebtn{position:relative}
.favbadge{position:absolute; top:0; inset-inline-end:0; background:var(--terra); color:#fff;
  font:700 .62rem/1 var(--sans); padding:2px 4px; border-radius:8px; min-width:15px; text-align:center}
.burger{display:none}

/* -------------------------------------------------------------- offcanvas */
.offcanvas{position:fixed; top:0; bottom:0; width:min(330px,86vw); background:var(--surface);
  z-index:95; padding:18px; overflow-y:auto; transform:translateX(-105%);
  transition:transform .22s ease; border-inline-end:1px solid var(--rule)}
.offcanvas.right{inset-inline-end:0; inset-inline-start:auto; transform:translateX(105%);
  border-inline:1px solid var(--rule) none}
.offcanvas.left{inset-inline-start:0}
.offcanvas.open{transform:none}
.oc-head{display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid var(--rule); padding-bottom:10px; margin-bottom:12px}
.oc-head b{font-family:var(--serif); font-size:1.1rem}
.oc-close{background:none; border:0; font-size:1.5rem; cursor:pointer; color:var(--ink-3); line-height:1}
.offcanvas a{display:block; padding:9px 4px; font:500 .93rem/1.3 var(--sans); color:var(--ink-2);
  border-bottom:1px solid var(--rule-3)}
.offcanvas details summary{font:650 .78rem/1 var(--sans); letter-spacing:.1em;
  text-transform:uppercase; color:var(--teal-ink); padding:14px 4px 8px; cursor:pointer}
.oc-backdrop{position:fixed; inset:0; background:rgba(12,18,24,.42); z-index:90; display:none}
.oc-backdrop.open{display:block}
.oc-row{display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:12px 4px; border-bottom:1px solid var(--rule-3); font-size:.9rem}
.oc-note{font-size:.82rem; color:var(--ink-3); line-height:1.5; padding:10px 4px}
select.lang-sel{padding:7px 9px; border:1px solid var(--rule); border-radius:3px;
  background:var(--surface); font-size:.85rem; max-width:170px}

/* ------------------------------------------------------------------ hero */
.hero{position:relative; margin:0 -22px 12px; overflow:hidden; isolation:isolate}
.hero-img{width:100%; height:clamp(360px,52vh,560px); object-fit:cover; object-position:center 58%}
.hero::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,16,22,.50) 0%, rgba(10,16,22,.18) 34%,
    rgba(10,16,22,.30) 64%, rgba(10,16,22,.78) 100%)}
.hero-body{position:absolute; inset-inline:0; bottom:0; z-index:2; padding:34px 22px 30px}
.hero-inner{max-width:var(--maxw); margin:0 auto}
.hero h1{color:#fff; margin:0 0 .38em; text-shadow:0 2px 26px rgba(0,0,0,.5);
  max-width:19ch}
.hero .dek{color:rgba(255,255,255,.93); font-size:clamp(1.02rem,1.7vw,1.32rem);
  text-shadow:0 1px 16px rgba(0,0,0,.6); max-width:56ch; margin:0}
.hero .eyebrow{color:#EFE1C9}
.hero-credit{position:absolute; bottom:6px; inset-inline-end:12px; z-index:3;
  font:500 .66rem/1.3 var(--sans); color:rgba(255,255,255,.72); text-align:end;
  max-width:52ch}
.hero-credit a{color:rgba(255,255,255,.86); text-decoration:underline}
.hero-cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:1.3rem}

/* page banner (smaller hero for interior pages) */
.banner{position:relative; margin:0 -22px 34px; overflow:hidden; isolation:isolate}
.banner img{width:100%; height:clamp(180px,26vh,290px); object-fit:cover}
.banner::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(10,16,22,.30),rgba(10,16,22,.72))}
.banner-body{position:absolute; inset-inline:0; bottom:0; z-index:2; padding:26px 22px 22px}
.banner-inner{max-width:var(--maxw); margin:0 auto}
.banner h1{color:#fff; margin:0; text-shadow:0 2px 22px rgba(0,0,0,.5)}
.banner .dek{color:rgba(255,255,255,.92); margin:.5rem 0 0; font-size:1.06rem;
  text-shadow:0 1px 14px rgba(0,0,0,.55)}
.banner .eyebrow{color:#EFE1C9}

/* --------------------------------------------------------------- buttons */
.btn{display:inline-flex; align-items:center; gap:.5em; padding:11px 18px;
  border:1px solid var(--teal); background:var(--teal); color:#fff; border-radius:2px;
  font:650 .875rem/1 var(--sans); cursor:pointer; white-space:nowrap}
.btn:hover{background:var(--teal-deep); border-color:var(--teal-deep); text-decoration:none;
  color:#fff}
.btn.ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.55)}
.btn.ghost:hover{background:rgba(255,255,255,.14); color:#fff}
.btn.quiet{background:transparent; color:var(--teal-ink); border-color:var(--rule)}
.btn.quiet:hover{background:var(--teal-tint); border-color:var(--teal)}
.btn.sm{padding:7px 13px; font-size:.8rem}

/* ----------------------------------------------------------------- chips */
.chip{display:inline-flex; align-items:center; gap:.4em; font:600 .69rem/1 var(--sans);
  letter-spacing:.07em; text-transform:uppercase; color:var(--teal-ink);
  border:1px solid var(--rule); padding:4px 8px; border-radius:2px; background:var(--surface)}
.chip.solid{background:var(--teal-tint); border-color:transparent}
.chip.olive{color:var(--olive); background:var(--olive-tint)}
.chip.terra{color:var(--terra); background:var(--terra-tint)}
.chip.plain{color:var(--ink-3); text-transform:none; letter-spacing:.01em; font-weight:500}
.chiprow{display:flex; gap:7px; flex-wrap:wrap; align-items:center}
.pillnav{display:flex; gap:8px; overflow-x:auto; padding-bottom:6px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  mask-image:linear-gradient(90deg,#000 92%,transparent)}
.pillnav::-webkit-scrollbar{display:none}
.pillnav a{flex:0 0 auto; padding:8px 14px; border:1px solid var(--rule); border-radius:20px;
  font:600 .82rem/1 var(--sans); color:var(--ink-2); background:var(--surface)}
.pillnav a.on,.pillnav a:hover{background:var(--teal); border-color:var(--teal); color:#fff;
  text-decoration:none}

/* ----------------------------------------------------------------- cards */
.card{position:relative; display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--rule-2); border-radius:var(--rad); overflow:hidden;
  transition:border-color .16s, transform .16s, box-shadow .16s; min-width:0}
.card:hover{border-color:var(--rule); transform:translateY(-2px); box-shadow:var(--shadow)}
.card .thumb{position:relative; aspect-ratio:3/2; background:var(--surface-2); overflow:hidden}
.card .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.card:hover .thumb img{transform:scale(1.035)}
.card .body{padding:14px 15px 16px; display:flex; flex-direction:column; gap:.4rem; flex:1 1 auto}
.card h3{margin:0; font-size:1.08rem; line-height:1.22}
.card h3 a{color:var(--ink)}
.card h3 a:hover{color:var(--teal-ink); text-decoration:none}
.card p{margin:0; font-size:.875rem; line-height:1.48; color:var(--ink-2)}
.card .meta{margin-top:auto; padding-top:.5rem; font:500 .72rem/1 var(--sans); color:var(--ink-3);
  display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.card .kindtag{position:absolute; top:9px; inset-inline-start:9px; z-index:2;
  background:rgba(12,20,26,.72); color:#fff; font:600 .64rem/1 var(--sans);
  letter-spacing:.08em; text-transform:uppercase; padding:4px 7px; border-radius:2px;
  backdrop-filter:blur(4px)}
.card.tall .thumb{aspect-ratio:4/5}
.card.wide .thumb{aspect-ratio:16/9}

/* lead spotlight */
.spotlight{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:0;
  border:1px solid var(--rule-2); border-radius:var(--rad); overflow:hidden;
  background:var(--surface)}
.spotlight .pic{position:relative; min-height:320px; background:var(--surface-2)}
.spotlight .pic img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.spotlight .txt{padding:32px 34px; display:flex; flex-direction:column; justify-content:center;
  gap:.7rem}
.spotlight h2{margin:0; font-size:clamp(1.5rem,2.4vw,2.05rem)}
.spotlight h2 a{color:var(--ink)}

/* editorial row (thumb + text) */
.erow{display:grid; grid-template-columns:112px minmax(0,1fr); gap:15px; align-items:start;
  padding:15px 0; border-bottom:1px solid var(--rule-3)}
.erow:last-child{border-bottom:0}
.erow .pic{aspect-ratio:4/3; overflow:hidden; border-radius:2px; background:var(--surface-2)}
.erow .pic img{width:100%; height:100%; object-fit:cover}
.erow h3{margin:0 0 .25rem; font-size:1rem; line-height:1.25}
.erow h3 a{color:var(--ink)}
.erow p{margin:0; font-size:.85rem; color:var(--ink-2); line-height:1.45}
.erow .meta{margin-top:.35rem; font:500 .715rem/1 var(--sans); color:var(--ink-3)}

/* numbered category block */
.numblock{display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:start;
  padding:18px 0; border-top:1px solid var(--rule-2)}
.numblock .n{font-family:var(--serif); font-size:2rem; line-height:1; color:var(--rule);
  font-variation-settings:"opsz" 90; font-weight:600}

/* ------------------------------------------------------------------ star */
.star{background:none; border:0; cursor:pointer; color:var(--ink-3); font-size:1.05rem;
  line-height:1; padding:3px 5px; border-radius:3px}
.star:hover{color:var(--terra)}
.star.on{color:var(--terra)}
.card .star{position:absolute; top:7px; inset-inline-end:7px; z-index:3; color:#fff;
  background:rgba(12,20,26,.5); backdrop-filter:blur(4px)}
.card .star.on{color:#FFC98A}

/* ------------------------------------------------------------------- map */
.mapwrap{position:relative; background:var(--surface-2); border:1px solid var(--rule-2);
  border-radius:var(--rad); padding:12px; overflow:hidden}
.mapwrap svg{width:100%; height:auto; display:block; max-height:74vh}
.mapwrap .county{fill:var(--surface); stroke:var(--rule); stroke-width:1.4;
  transition:fill .14s; cursor:pointer}
.mapwrap .county:hover{fill:var(--teal-tint)}
.mapwrap a:hover .county,.mapwrap a:focus .county{fill:var(--teal); }
.mapwrap a:hover .clabel,.mapwrap a:focus .clabel{fill:#fff}
.mapwrap .clabel{font:650 12.5px/1 var(--sans); fill:var(--ink-2); text-anchor:middle;
  pointer-events:none; letter-spacing:.01em}
.mapwrap .pin{fill:var(--terra); stroke:var(--surface); stroke-width:1.2}
.mapwrap .pin-lg{fill:var(--flag); stroke:#fff; stroke-width:2}
.mapwrap .plabel{font:600 10.5px/1 var(--sans); fill:var(--ink-2); pointer-events:none}
.mapnote{font-size:.735rem; color:var(--ink-3); margin-top:8px; text-align:end}

/* locator (small, on entity pages) */
.locator{background:var(--surface-2); border:1px solid var(--rule-2); border-radius:var(--rad);
  padding:10px}
.locator svg{width:100%; height:auto; max-height:280px; display:block; margin:0 auto}
.locator .outline{fill:var(--surface); stroke:var(--rule); stroke-width:2}
.locator .dot{fill:var(--flag); stroke:var(--surface); stroke-width:2.5}
.locator .halo{fill:none; stroke:var(--flag); stroke-width:1.5; opacity:.45}

/* ---------------------------------------------------------------- figure */
figure{margin:2rem 0}
figure img{width:100%; border-radius:var(--rad); background:var(--surface-2)}
figcaption{font:400 .8rem/1.5 var(--sans); color:var(--ink-3); margin-top:.55rem;
  padding-inline-start:11px; border-inline-start:2px solid var(--rule)}
figcaption b{color:var(--ink-2); font-weight:600}
figcaption .credit{display:block; margin-top:.2rem; font-size:.735rem}
figcaption a{color:var(--ink-3); text-decoration:underline; text-underline-offset:2px}
.mediakind{display:inline-block; font:600 .64rem/1 var(--sans); letter-spacing:.08em;
  text-transform:uppercase; color:var(--olive); background:var(--olive-tint);
  padding:3px 6px; border-radius:2px; margin-inline-end:.5em; vertical-align:1px}

/* --------------------------------------------------------------- article */
.article{max-width:none}
.article > h2{margin:2.6rem 0 .7rem; font-size:1.72rem; padding-top:1.4rem;
  border-top:1px solid var(--rule-2)}
.article > h2:first-child{border-top:0; padding-top:0; margin-top:0}
.article p{max-width:70ch; font-size:1.045rem; line-height:1.72; color:var(--ink)}
.article ul,.article ol{max-width:70ch; padding-inline-start:1.15em; margin:0 0 1.15em}
.article li{margin-bottom:.5em; line-height:1.62}
.article li::marker{color:var(--teal)}
.deepmark{font:600 .68rem/1 var(--sans); letter-spacing:.1em; text-transform:uppercase;
  color:var(--olive); display:inline-block; margin-inline-start:.7em; vertical-align:.32em}

.simple{background:var(--teal-tint); border-inline-start:3px solid var(--teal);
  padding:18px 22px; margin:0 0 2rem; border-radius:0 var(--rad) var(--rad) 0}
.simple h4{margin:0 0 .45rem; color:var(--teal-ink); font-size:.76rem; letter-spacing:.11em;
  text-transform:uppercase}
.simple p{margin:0; font-size:1.02rem; line-height:1.62; color:var(--ink); max-width:66ch}
.simple + .article > h2:first-child{border-top:0; padding-top:0}

.callout{border-inline-start:3px solid var(--terra); background:var(--terra-tint);
  padding:15px 20px; margin:1.8rem 0; border-radius:0 var(--rad) var(--rad) 0}
.callout p{margin:0; font-size:.92rem; line-height:1.6; color:var(--ink-2); max-width:70ch}
.callout p + p{margin-top:.6em}

/* ------------------------------------------------------------------ rail */
.rail{position:sticky; top:76px; display:flex; flex-direction:column; gap:26px; min-width:0}
.railbox h4{font:650 .715rem/1 var(--sans); letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 .8rem; padding-bottom:.55rem; border-bottom:1px solid var(--rule)}

/* facts list — hairline rules, never boxes */
.facts{margin:0; font-size:.885rem}
.facts div{display:grid; grid-template-columns:minmax(0,auto) minmax(0,1.25fr); gap:12px;
  padding:8px 0; border-bottom:1px solid var(--rule-3); align-items:baseline}
.facts div:last-child{border-bottom:0}
.facts dt{color:var(--ink-3); font-weight:500}
.facts dd{margin:0; color:var(--ink); font-weight:550; text-align:end; overflow-wrap:anywhere}
.facts .src{display:block; font:400 .68rem/1.35 var(--sans); color:var(--ink-3); font-weight:400;
  margin-top:2px}

/* linklist */
.linklist a{display:flex; gap:9px; align-items:baseline; padding:7px 0;
  border-bottom:1px solid var(--rule-3); font-size:.9rem; color:var(--ink-2)}
.linklist a:last-child{border-bottom:0}
.linklist a:hover{color:var(--teal-ink); text-decoration:none}
.linklist .k{font:600 .655rem/1 var(--sans); letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-3); flex:0 0 auto; min-width:62px}

/* ---------------------------------------------------------------- tables */
.tbl{width:100%; border-collapse:collapse; font-size:.885rem; font-variant-numeric:tabular-nums}
.tbl th{text-align:end; font:650 .705rem/1.3 var(--sans); letter-spacing:.075em;
  text-transform:uppercase; color:var(--ink-3); padding:9px 10px;
  border-bottom:1px solid var(--rule); white-space:nowrap}
.tbl td{text-align:end; padding:9px 10px; border-bottom:1px solid var(--rule-3);
  color:var(--ink)}
.tbl th.name,.tbl td.name{text-align:start}
.tbl tbody tr:hover td{background:var(--surface-2)}
.tbl .up{color:var(--olive); font-weight:600}
.tbl .down{color:var(--terra); font-weight:600}
.tblwrap{overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch;
  background:linear-gradient(90deg,var(--paper) 30%,transparent),
             linear-gradient(90deg,transparent,var(--paper) 70%) 100% 0,
             radial-gradient(farthest-side at 0 50%,rgba(25,33,43,.13),transparent),
             radial-gradient(farthest-side at 100% 50%,rgba(25,33,43,.13),transparent) 100% 0;
  background-repeat:no-repeat; background-size:36px 100%,36px 100%,14px 100%,14px 100%;
  background-attachment:local,local,scroll,scroll}
.tblnote{font-size:.775rem; color:var(--ink-3); margin-top:.7rem; line-height:1.55}

/* climate strip */
.climate td.mon{font-weight:600; color:var(--ink-2)}
.climate .bar{display:block; height:5px; border-radius:3px; background:var(--rule-2);
  position:relative; margin-top:4px; min-width:34px}
.climate .bar i{position:absolute; inset-block:0; inset-inline-start:0; border-radius:3px;
  background:var(--teal); display:block}
.climate .warm i{background:var(--terra)}
.climate .rain i{background:var(--teal)}

/* ------------------------------------------------------------------ data */
.statrow{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:0;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); margin:1.6rem 0}
.stat{padding:16px 18px 15px; border-inline-end:1px solid var(--rule-3)}
.stat:last-child{border-inline-end:0}
.stat .k{font:600 .69rem/1.2 var(--sans); letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); display:block; margin-bottom:.4rem}
.stat .v{font-family:var(--serif); font-size:1.62rem; line-height:1.1; font-weight:600;
  font-variation-settings:"opsz" 60; color:var(--ink); display:block;
  font-variant-numeric:tabular-nums}
.stat .n{font-size:.72rem; color:var(--ink-3); display:block; margin-top:.35rem; line-height:1.4}
.spark{display:block; margin-top:.5rem; overflow:visible}
.spark polyline{fill:none; stroke:var(--teal); stroke-width:1.7; stroke-linejoin:round;
  stroke-linecap:round}
.spark circle{fill:var(--teal)}
.chart{width:100%; height:auto; display:block}
.chart rect{fill:var(--teal)}
.chart rect.neg{fill:var(--terra)}
.chart .axis{stroke:var(--rule); stroke-width:1}
.chart .lab{font:500 9.5px/1 var(--sans); fill:var(--ink-3); text-anchor:middle}

/* ------------------------------------------------------------- news cards */
.newscard{display:flex; flex-direction:column; gap:.45rem; padding:16px 0;
  border-bottom:1px solid var(--rule-3)}
.newscard .pub{font:650 .69rem/1 var(--sans); letter-spacing:.08em; text-transform:uppercase;
  color:var(--teal-ink)}
.newscard h3{margin:0; font-size:1.04rem; line-height:1.3}
.newscard h3 a{color:var(--ink)}
.newscard p{margin:0; font-size:.86rem; color:var(--ink-2); line-height:1.5}
.newscard .when{font-size:.735rem; color:var(--ink-3)}
.outlink::after{content:" ↗"; font-size:.85em; color:var(--ink-3)}

/* ------------------------------------------------------------------ misc */
.crumbs{font:500 .78rem/1.5 var(--sans); color:var(--ink-3); padding:16px 0 4px;
  display:flex; gap:7px; flex-wrap:wrap; align-items:center}
.crumbs a{color:var(--ink-3)}
.crumbs a:hover{color:var(--teal-ink)}
.crumbs .sep{opacity:.5}
.toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:0 0 1.4rem;
  padding-bottom:1rem; border-bottom:1px solid var(--rule-2)}
.toolbar select,.toolbar input{padding:8px 11px; border:1px solid var(--rule); border-radius:3px;
  background:var(--surface); font-size:.875rem}
.empty{padding:44px 10px; text-align:center; color:var(--ink-3)}
.tag-strip{display:flex; gap:6px; flex-wrap:wrap; margin-top:.6rem}
.tag-strip a{font:500 .74rem/1 var(--sans); color:var(--ink-3); border:1px solid var(--rule-2);
  padding:4px 8px; border-radius:2px}
.tag-strip a:hover{border-color:var(--teal); color:var(--teal-ink); text-decoration:none}
.ask-input{width:100%; padding:15px 17px; border:1px solid var(--rule); border-radius:3px;
  background:var(--surface); font-size:1.02rem}
.ask-input:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-tint)}
.answer{border-inline-start:3px solid var(--teal); padding:18px 22px; background:var(--surface);
  margin-top:1.4rem; border-radius:0 var(--rad) var(--rad) 0}
.answer p{max-width:72ch; line-height:1.66}
.pre{font:500 .8rem/1.55 var(--mono); background:var(--surface-2); border:1px solid var(--rule-2);
  padding:14px 16px; border-radius:3px; overflow-x:auto; white-space:pre-wrap;
  overflow-wrap:anywhere; color:var(--ink-2)}
.copybtn{float:inline-end; font:600 .72rem/1 var(--sans); background:var(--surface);
  border:1px solid var(--rule); padding:5px 9px; border-radius:2px; cursor:pointer;
  color:var(--teal-ink)}

/* guided/expert */
[data-view="expert"] .guided-only{display:none}
.viewnote{font-size:.8rem; color:var(--ink-3)}

/* ---------------------------------------------------------------- footer */
.footer{border-top:1px solid var(--rule); background:var(--paper-2); margin-top:70px;
  padding:44px 22px 30px}
.footer-in{max-width:var(--maxw); margin:0 auto}
.fcols{display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); gap:30px;
  margin-bottom:34px}
.fcol b{display:block; font:650 .705rem/1 var(--sans); letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:.9rem}
.fcol a{display:block; padding:4px 0; font-size:.875rem; color:var(--ink-2)}
.fcol a:hover{color:var(--teal-ink)}
.fsub{display:flex; gap:9px; flex-wrap:wrap; align-items:center;
  padding:20px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.fsub input{flex:1 1 240px; padding:10px 13px; border:1px solid var(--rule); border-radius:3px;
  background:var(--surface); font-size:.875rem}
.flegal{padding-top:24px; font-size:.775rem; line-height:1.62; color:var(--ink-3);
  max-width:106ch}
.flegal p{margin:0 0 .85em}
.flegal a{color:var(--ink-2); text-decoration:underline; text-underline-offset:2px}
.fbottom{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding-top:16px; border-top:1px solid var(--rule-2); font-size:.775rem; color:var(--ink-3)}

/* ------------------------------------------------------------- lightbox */
.lb{position:fixed; inset:0; background:rgba(10,14,19,.94); z-index:120; display:none;
  align-items:center; justify-content:center; padding:26px; flex-direction:column; gap:14px}
.lb.open{display:flex}
.lb img{max-width:100%; max-height:78vh; object-fit:contain; border-radius:2px}
.lb .cap{color:rgba(255,255,255,.78); font-size:.8rem; max-width:74ch; text-align:center;
  line-height:1.5}
.lb .cap a{color:rgba(255,255,255,.9)}
.lb .x{position:absolute; top:16px; inset-inline-end:20px; background:none; border:0;
  color:#fff; font-size:2rem; cursor:pointer; line-height:1}

/* ------------------------------------------------------------ responsive */
@media (max-width:1080px){
  .split{grid-template-columns:minmax(0,1fr); gap:34px}
  .rail{position:static}
  .g4{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g6{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:950px){
  .mainnav{display:none}
  .burger{display:inline-flex}
  .searchwrap{flex:1 1 auto}
  .spotlight{grid-template-columns:minmax(0,1fr)}
  .spotlight .pic{min-height:230px; aspect-ratio:16/9}
  .spotlight .txt{padding:24px 22px}
}
@media (max-width:760px){
  body{font-size:16px}
  .page{padding:0 16px 60px}
  .hero,.banner{margin-inline:-16px}
  .hero-body,.banner-body{padding:22px 16px 20px}
  .g3,.g4,.g6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g2{grid-template-columns:minmax(0,1fr)}
  .grid{gap:16px}
  .band{padding-top:38px; margin-top:34px}
  .statrow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{border-bottom:1px solid var(--rule-3)}
  .erow{grid-template-columns:88px minmax(0,1fr); gap:12px}
  input,select,textarea{font-size:16px}
  .footer{padding:34px 16px 24px}
  .article p{font-size:1.02rem}
}
@media (max-width:520px){
  .g3,.g4,.g6{grid-template-columns:minmax(0,1fr)}
  .hero-img{height:clamp(300px,48vh,420px)}
  .wordmark .sub{display:none}
  .facts div{grid-template-columns:minmax(0,1fr); gap:2px}
  .facts dd{text-align:start}
}
@media print{
  .topbar,.footer,.offcanvas,.oc-backdrop,.hero-cta,.star,.pillnav{display:none!important}
  body{background:#fff; color:#000}
  a{color:#000}
}