﻿/* LWPhoto Atlas — "Field Journal of Light"
   A photographer's notebook crossed with vintage park posters and a camera viewfinder. */
@font-face{font-family:"Fraunces";src:url(/assets/fonts/fraunces-latin.woff2) format("woff2");font-weight:500 700;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-latin.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Caveat";src:url(/assets/fonts/caveat-latin.woff2) format("woff2");font-weight:500 700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/assets/fonts/mono-latin.woff2) format("woff2");font-weight:400 600;font-display:swap}

:root{
  --bg:#f4eee2;--paper:#fbf7ef;--surface:#fffdf8;--surface-2:#efe7d7;--surface-3:#e5dac4;
  --ink:#1b1a24;--ink-2:#3d3a45;--muted:#776f66;--line:#ddd2bd;
  --accent:#c4561f;--accent-2:#e39a2f;--accent-ink:#9a3d10;--accent-soft:#f8e3cb;
  --dusk:#2c3e78;--dusk-soft:#e1e6f2;--sage:#3c6e52;--sage-soft:#e0ecdf;--rose:#b23f43;--rose-soft:#f6e0dc;
  --note:#fff6d8;--tape:rgba(214,196,150,.55);
  --radius:18px;--radius-sm:12px;
  --shadow:0 1px 1px rgba(60,40,10,.05),0 6px 18px rgba(60,40,10,.07);
  --shadow-lg:0 2px 4px rgba(60,40,10,.08),0 22px 50px rgba(60,40,10,.16);
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Fraunces",ui-serif,Georgia,"Times New Roman",serif;
  --hand:"Caveat","Segoe Print","Bradley Hand",cursive;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --wrap:1200px;--gutter:clamp(16px,4vw,32px);
  --topo:url(/assets/img/topo-light.svg);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .15 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0b0e18;--paper:#111522;--surface:#141a29;--surface-2:#1a2133;--surface-3:#232b40;
  --ink:#eee7d8;--ink-2:#cfc6b4;--muted:#99a0b3;--line:#283049;
  --accent:#f08b4a;--accent-2:#f2b356;--accent-ink:#f7b98c;--accent-soft:#3a2416;
  --dusk:#a9bdf0;--dusk-soft:#1a2440;--sage:#86c9a2;--sage-soft:#15281f;--rose:#f08f86;--rose-soft:#34191b;
  --note:#2b2717;--tape:rgba(160,150,110,.35);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 22px rgba(0,0,0,.3);--shadow-lg:0 2px 6px rgba(0,0,0,.4),0 24px 60px rgba(0,0,0,.5);
  --topo:url(/assets/img/topo-dark.svg);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 .85 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0b0e18;--paper:#111522;--surface:#141a29;--surface-2:#1a2133;--surface-3:#232b40;
  --ink:#eee7d8;--ink-2:#cfc6b4;--muted:#99a0b3;--line:#283049;
  --accent:#f08b4a;--accent-2:#f2b356;--accent-ink:#f7b98c;--accent-soft:#3a2416;
  --dusk:#a9bdf0;--dusk-soft:#1a2440;--sage:#86c9a2;--sage-soft:#15281f;--rose:#f08f86;--rose-soft:#34191b;
  --note:#2b2717;--tape:rgba(160,150,110,.35);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 22px rgba(0,0,0,.3);--shadow-lg:0 2px 6px rgba(0,0,0,.4),0 24px 60px rgba(0,0,0,.5);
  --topo:url(/assets/img/topo-dark.svg);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 .85 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme:dark;
}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--grain),var(--bg);color:var(--ink);font:16px/1.68 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,canvas{max-width:100%;height:auto}
img{display:block}
a{color:var(--accent-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent)}
a:hover{color:var(--accent);text-decoration-color:var(--accent)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:620;line-height:1.12;letter-spacing:-.015em;margin:0 0 .5em;color:var(--ink);font-variation-settings:"opsz" 96}
h1{font-size:clamp(2.1rem,5vw,3.6rem)}
h2{font-size:clamp(1.5rem,2.7vw,2.05rem);margin-top:2.3em}
h3{font-size:1.2rem;margin-top:1.6em}
p{margin:0 0 1em}
ul,ol{padding-left:1.25em}
li{margin:.3em 0}
code,kbd{font-family:var(--mono);font-size:.88em;background:var(--surface-2);padding:1px 6px;border-radius:6px}
.muted{color:var(--muted)}.small{font-size:.875rem}
.mono{font-family:var(--mono);letter-spacing:-.01em}
.hand{font-family:var(--hand);font-weight:600}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--surface);padding:8px 12px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.icon{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.17em;flex:none}

/* ============ header */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:saturate(1.5) blur(14px);-webkit-backdrop-filter:saturate(1.5) blur(14px);border-bottom:1px dashed color-mix(in srgb,var(--ink) 18%,transparent)}
.nav{display:flex;align-items:center;gap:18px;height:66px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--serif);font-weight:650;font-size:1.2rem;letter-spacing:-.01em;white-space:nowrap}
.brand img{width:34px;height:34px;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.brand:hover img{transform:rotate(60deg)}
.brand b{color:var(--accent);font-weight:650}
.brand small{display:block;font:500 .62rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.nav-links{display:flex;gap:2px;margin:0 0 0 auto;list-style:none;padding:0}
.nav-links a{position:relative;display:block;padding:8px 11px;color:var(--ink-2);text-decoration:none;font-weight:550;font-size:.93rem;white-space:nowrap}
.nav-links a::after{content:"";position:absolute;left:11px;right:11px;bottom:3px;height:6px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 6' preserveAspectRatio='none'%3E%3Cpath d='M1 4c8-3 14 2 22-1s14-2 22 0 10-1 14-2' fill='none' stroke='%23c4561f' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;opacity:0;transform:scaleX(.4);transition:.25s}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{opacity:1;transform:none}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-actions{display:flex;gap:6px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;transition:.2s}
.icon-btn:hover{border-color:var(--accent);transform:rotate(-8deg)}
.menu-btn{display:none}
@media (max-width:1120px){
  .nav-links{display:none;position:absolute;left:0;right:0;top:66px;flex-direction:column;background:var(--paper);border-bottom:1px solid var(--line);padding:10px var(--gutter) 18px;box-shadow:var(--shadow)}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 6px;font-size:1.02rem}
  .nav-links a::after{left:6px;right:auto;width:80px}
  .menu-btn{display:inline-flex}
  .nav-actions{margin-left:auto}
}

/* ============ search */
.search-panel{position:fixed;inset:0;z-index:80;background:rgba(10,10,20,.55);backdrop-filter:blur(5px);display:none;align-items:flex-start;justify-content:center;padding:10vh 16px 16px}
.search-panel.open{display:flex}
.search-box{width:min(720px,100%);background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden;border:1px solid var(--line)}
.search-box input{width:100%;border:0;padding:20px 22px;font:500 1.15rem var(--sans);background:transparent;color:var(--ink);outline:none;border-bottom:1px dashed var(--line)}
.search-results{max-height:60vh;overflow:auto;list-style:none;margin:0;padding:8px}
.search-results a{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;border-radius:10px;text-decoration:none;color:var(--ink)}
.search-results a:hover,.search-results a.active{background:var(--surface-2)}
.search-results .kind{color:var(--muted);font:500 .74rem var(--mono);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.search-hint{padding:12px 22px;color:var(--muted);font:.78rem var(--mono)}

/* ============ poster skies (sky gradient + sun + silhouette scene) */
.poster{position:relative;overflow:hidden;background:var(--pg);isolation:isolate}
.poster::before{content:"";position:absolute;left:var(--sx,62%);top:var(--sy,30%);width:var(--ss,22%);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--sun) 0 34%,color-mix(in srgb,var(--sun) 35%,transparent) 50%,transparent 70%);transform:translate(-50%,-50%);z-index:0}
.poster .scene{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;min-height:62%;object-fit:cover;object-position:bottom;z-index:1}
.poster::after{content:"";position:absolute;inset:0;background:var(--grain);z-index:2;pointer-events:none;mix-blend-mode:overlay}
.p-dawn{--pg:linear-gradient(180deg,#4f5596 0%,#9d78a6 38%,#eba59e 70%,#fcd8ae 100%);--sun:#fff2d6}
.p-day{--pg:linear-gradient(180deg,#2f6eb2 0%,#69a8dc 45%,#bfe0ef 80%,#e9f4f4 100%);--sun:#fffbe6}
.p-golden{--pg:linear-gradient(180deg,#3b356f 0%,#9a4e72 34%,#e8794d 66%,#ffcf7a 100%);--sun:#fff0b8}
.p-dusk{--pg:linear-gradient(180deg,#121a43 0%,#3d3b7a 38%,#a25a7e 70%,#f39a6a 100%);--sun:#ffd7a0}
.p-night{--pg:radial-gradient(1.3px 1.3px at 12% 20%,#fff 50%,transparent),radial-gradient(1px 1px at 28% 8%,#fffc 50%,transparent),radial-gradient(1.6px 1.6px at 44% 26%,#fff 50%,transparent),radial-gradient(1px 1px at 58% 14%,#fffa 50%,transparent),radial-gradient(1.2px 1.2px at 72% 30%,#fff 50%,transparent),radial-gradient(1px 1px at 86% 10%,#fffb 50%,transparent),radial-gradient(1px 1px at 92% 34%,#fff9 50%,transparent),radial-gradient(1px 1px at 36% 40%,#fff8 50%,transparent),radial-gradient(1px 1px at 6% 44%,#fff8 50%,transparent),linear-gradient(180deg,#04071a 0%,#101a45 55%,#2d3170 100%);--sun:#f3ecd7}
.p-night::before{width:calc(var(--ss,22%) * .55)}

/* ============ home hero (live sky) */
.home-hero{position:relative;overflow:hidden;color:#fff;min-height:min(84vh,760px);display:flex;align-items:flex-end;background:linear-gradient(180deg,var(--h1,#0b1430) 0%,var(--h2,#5a3e72) 52%,var(--h3,#f2a65a) 100%);transition:background 1s}
.home-hero .stars{position:absolute;inset:0;opacity:var(--stars,.6);background-image:radial-gradient(1.2px 1.2px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 22% 8%,#fffd,transparent),radial-gradient(1.5px 1.5px at 38% 22%,#fff,transparent),radial-gradient(1px 1px at 52% 12%,#fffc,transparent),radial-gradient(1.3px 1.3px at 67% 26%,#fff,transparent),radial-gradient(1px 1px at 78% 9%,#fffd,transparent),radial-gradient(1.4px 1.4px at 90% 20%,#fff,transparent),radial-gradient(1px 1px at 6% 35%,#fffa,transparent),radial-gradient(1px 1px at 45% 38%,#fff9,transparent),radial-gradient(1px 1px at 85% 40%,#fff9,transparent),radial-gradient(1px 1px at 30% 32%,#fffb,transparent),radial-gradient(1px 1px at 61% 6%,#fffb,transparent)}
.home-hero .topo{position:absolute;inset:0;background:url(/assets/img/topo-dark.svg) center/700px;opacity:.12;mix-blend-mode:screen}
.home-hero .sunball{position:absolute;left:var(--sunx,62%);top:var(--suny,60%);width:150px;height:150px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#fff6d6 0 22%,rgba(255,214,140,.55) 40%,rgba(255,170,90,0) 70%);opacity:var(--sunop,1);transition:all 1s}
.home-hero .ridges{position:absolute;left:0;right:0;bottom:0;height:46%}
.home-hero .wrap{position:relative;z-index:2;padding-bottom:clamp(40px,8vh,84px);padding-top:120px;width:100%}
.home-hero h1{color:#fff;font-size:clamp(2.4rem,6.4vw,4.8rem);max-width:14ch;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.home-hero h1 em{font-style:italic;color:#ffd79a}
.home-hero p.lead{font-size:clamp(1.05rem,1.8vw,1.28rem);max-width:56ch;color:#f6ede4;margin-bottom:24px}
.live-sky{display:inline-flex;align-items:center;gap:10px;font:500 .78rem var(--mono);letter-spacing:.04em;color:#fff;background:rgba(10,12,30,.35);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:6px 14px 6px 10px;margin-bottom:18px;backdrop-filter:blur(6px)}
.live-sky i{width:9px;height:9px;border-radius:50%;background:#7cf0a8;box-shadow:0 0 0 0 #7cf0a8;animation:pulse 2s infinite}
.hero-search{display:flex;gap:8px;max-width:640px;background:rgba(255,253,248,.97);border-radius:999px;padding:6px;box-shadow:0 20px 50px rgba(0,0,0,.28)}
.hero-search input{flex:1;border:0;background:transparent;padding:12px 18px;font:500 1.05rem var(--sans);color:#1b1a24;outline:none;min-width:0}
.hero-search button{border:0;border-radius:999px;background:#1b1a24;color:#fff;padding:0 24px;font:600 .98rem var(--sans);cursor:pointer}
.hero-search button:hover{background:#c4561f}
.hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.hero-chips a{color:#fff;text-decoration:none;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);padding:7px 14px;border-radius:999px;font-size:.92rem;backdrop-filter:blur(6px)}
.hero-chips a:hover{background:rgba(255,255,255,.26)}

/* ============ page hero */
.page-hero{position:relative;color:#fff;overflow:hidden;min-height:clamp(320px,46vh,460px);display:flex;align-items:flex-end}
.page-hero.has-img{background:#111}
.page-hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-hero.poster .scene{min-height:70%}
.page-hero::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(8,8,18,0) 30%,rgba(8,8,18,.55) 100%);pointer-events:none}
.page-hero.has-img::after{background:linear-gradient(180deg,rgba(8,8,18,.12) 0%,rgba(8,8,18,.2) 40%,rgba(8,8,18,.8) 100%)}
.page-hero .topo{position:absolute;inset:0;background:url(/assets/img/topo-dark.svg) center/640px;opacity:.1;z-index:1;mix-blend-mode:screen}
.page-hero .wrap{position:relative;z-index:3;padding-top:clamp(70px,12vh,130px);padding-bottom:34px;width:100%}
.page-hero h1{color:#fff;max-width:22ch;text-shadow:0 2px 24px rgba(0,0,0,.4)}
.page-hero .sub{font-size:1.06rem;color:#f2ebe2;max-width:70ch;margin-bottom:14px}
.page-hero .exif{display:inline-flex;flex-wrap:wrap;gap:4px 14px;font:500 .74rem/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#f3e7d7;opacity:.9;margin-bottom:12px}
.page-hero .credit{position:absolute;right:10px;bottom:8px;z-index:4;font-size:.7rem;color:#ddd;opacity:.85;max-width:60%;text-align:right}
.page-hero .credit a{color:#fff}
.vf{position:relative;display:inline-block;padding:10px 16px 6px 0}
.vf::before,.vf::after{content:"";position:absolute;width:22px;height:22px;border:2px solid rgba(255,255,255,.75)}
.vf::before{left:-14px;top:0;border-right:0;border-bottom:0}
.vf::after{right:-6px;bottom:-4px;border-left:0;border-top:0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font:500 .78rem var(--mono);letter-spacing:.02em;background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line);text-decoration:none}
.page-hero .chip{background:rgba(10,10,25,.35);color:#fff;border-color:rgba(255,255,255,.28);backdrop-filter:blur(6px)}
.crumbs{display:flex;flex-wrap:wrap;gap:4px 8px;list-style:none;padding:0;margin:0 0 14px;font:500 .74rem var(--mono);letter-spacing:.05em;text-transform:uppercase}
.crumbs li{margin:0;display:flex;align-items:center;gap:8px}
.crumbs li+li::before{content:"/";opacity:.6}
.crumbs a{color:inherit;text-decoration:none;opacity:.9}
.crumbs a:hover{opacity:1;text-decoration:underline}
.page-hero .crumbs{color:#f1e8dc}

/* ============ layout */
main{display:block}
.section{padding:clamp(40px,6vw,84px) 0;position:relative}
.section.alt{background:var(--paper);border-top:1px dashed var(--line);border-bottom:1px dashed var(--line)}
.section.topo-bg{background:var(--paper)}
.section.topo-bg::before{content:"";position:absolute;inset:0;background:var(--topo) center/760px;opacity:.32;pointer-events:none}
.section>.wrap{position:relative}
.layout{display:grid;grid-template-columns:minmax(0,1fr);gap:44px;padding-top:36px;padding-bottom:64px}
@media (min-width:1060px){.layout{grid-template-columns:minmax(0,1fr) 310px}}
.content>:first-child{margin-top:0}
.content h2{scroll-margin-top:90px;position:relative;padding-bottom:.35em}
.content h2::after{content:"";display:block;width:120px;height:9px;margin-top:.35em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 9'%3E%3Cpath d='M2 6c12-5 22 3 34-1s18-4 30-1 20 2 30-1 14-2 22 0' fill='none' stroke='%23c4561f' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat}
.content h2 .num{font:600 .8rem var(--mono);color:var(--accent);letter-spacing:.1em;display:block;margin-bottom:6px}
.lead{font-size:1.16rem;color:var(--ink-2)}
.prose{max-width:74ch}
.prose h2{font-size:1.6rem}
.prose blockquote{margin:1.2em 0;padding:4px 0 4px 18px;border-left:3px solid var(--accent-2);font-family:var(--serif);font-size:1.15rem;color:var(--ink-2)}
.prose table{width:100%}
.aside{display:flex;flex-direction:column;gap:20px}
@media (min-width:1060px){.aside .sticky{position:sticky;top:88px;display:flex;flex-direction:column;gap:20px;max-height:calc(100vh - 104px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-bottom:4px}.aside .sticky>*{flex-shrink:0}}
.box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)}
.box h3,.box h4{margin-top:0;font:600 .78rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.toc ol{list-style:none;padding:0;margin:0;font-size:.93rem;counter-reset:t}
.toc li{counter-increment:t}
.toc a{display:flex;gap:10px;padding:6px 4px;color:var(--ink-2);text-decoration:none;border-bottom:1px dashed var(--line)}
.toc a::before{content:counter(t,decimal-leading-zero);font:500 .74rem/1.9 var(--mono);color:var(--accent)}
.toc a:hover{color:var(--ink)}
.facts{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:.9rem}
.facts dt{color:var(--muted);font:500 .74rem/1.9 var(--mono);text-transform:uppercase;letter-spacing:.05em}
.facts dd{margin:0;font-weight:550;text-align:right}

/* ============ viewfinder stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:20px 0 10px}
.stat{position:relative;background:var(--surface);border-radius:4px;padding:16px 16px 14px;
  background-image:linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink));
  background-size:14px 2px,2px 14px,14px 2px,2px 14px,14px 2px,2px 14px,14px 2px,2px 14px;
  background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%;background-repeat:no-repeat;background-color:var(--surface)}
.stat .label{display:flex;align-items:center;gap:6px;font:500 .7rem var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.stat .value{font:600 1.42rem/1.2 var(--serif);margin-top:6px}
.stat .note{font:.78rem var(--mono);color:var(--muted);margin-top:3px}

/* ============ cards: prints & posters */
.grid{display:grid;gap:22px 18px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.grid.sm{grid-template-columns:repeat(auto-fill,minmax(205px,1fr))}
.grid.lg{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.card{position:relative;display:flex;flex-direction:column;background:var(--surface);border-radius:6px;padding:9px 9px 0;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.grid .card:nth-child(3n+1){transform:rotate(-.5deg)}.grid .card:nth-child(3n+2){transform:rotate(.35deg)}.grid .card:nth-child(4n){transform:rotate(-.2deg)}
.card:hover{transform:rotate(0) translateY(-4px)!important;box-shadow:var(--shadow-lg);color:var(--ink)}
.card .thumb{position:relative;aspect-ratio:16/11;border-radius:3px;overflow:hidden;background:var(--surface-2)}
.card .thumb>img:not(.scene){width:100%;height:100%;object-fit:cover;transition:transform .6s}
.card:hover .thumb>img:not(.scene){transform:scale(1.04)}
.card .tag{position:absolute;left:8px;top:8px;z-index:3;background:rgba(253,248,238,.92);color:#2a2530;font:600 .64rem var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:3px}
.card .body{padding:12px 6px 14px;display:flex;flex-direction:column;gap:3px;flex:1}
.card .title{font:600 1.04rem/1.3 var(--serif)}
.card .meta{font:500 .72rem/1.5 var(--mono);color:var(--muted);letter-spacing:.02em}
.card .desc{font-size:.9rem;color:var(--ink-2)}
.tile-link{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);text-decoration:none;font-weight:560;transition:.2s}
.tile-link:hover{border-color:var(--accent);color:var(--ink);transform:translateX(3px)}
.tile-link .n{color:var(--muted);font:500 .8rem var(--mono)}
.tile-link img.flag{width:26px;height:auto;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.tile-link .lbl{display:flex;align-items:center;gap:10px}
.cols{columns:3 220px;column-gap:28px}
.cols li{break-inside:avoid}
.link-list{list-style:none;padding:0;margin:0}
.link-list li{margin:0;border-bottom:1px dashed var(--line)}
.link-list a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 2px;color:var(--ink);text-decoration:none}
.link-list a:hover{color:var(--accent-ink)}
.link-list .n{color:var(--muted);font:500 .78rem var(--mono);white-space:nowrap}
.link-list .lbl{display:flex;align-items:center;gap:10px}

/* city flags & emblems */
.flag{display:inline-block;width:30px;height:auto;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.14),0 2px 4px rgba(0,0,0,.12);flex:none;background:#fff}
.emblem{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;flex:none;font:700 .62rem var(--mono);letter-spacing:.02em;color:#fff;background:conic-gradient(from var(--ea,0deg),var(--e1,#2c3e78),var(--e2,#c4561f),var(--e1,#2c3e78));box-shadow:inset 0 0 0 2px rgba(255,255,255,.55),0 2px 5px rgba(0,0,0,.18)}
.hero-flag{display:inline-flex;align-items:center;gap:12px;margin-bottom:10px}
.hero-flag .flag{width:64px;border-radius:4px;box-shadow:0 4px 18px rgba(0,0,0,.35),0 0 0 2px rgba(255,255,255,.6)}
.hero-flag .emblem{width:56px;height:56px;font-size:.95rem}
.city-card .thumb .flagbig{position:absolute;right:10px;bottom:10px;z-index:3;width:54px;border-radius:3px;box-shadow:0 4px 12px rgba(0,0,0,.35),0 0 0 2px #fff}
.city-card .thumb .emblem{position:absolute;right:10px;bottom:10px;z-index:3;width:46px;height:46px;font-size:.8rem}

/* ============ tables */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);margin:16px 0 8px;-webkit-overflow-scrolling:touch;box-shadow:var(--shadow)}
table.data{width:100%;border-collapse:collapse;font-size:.92rem;font-variant-numeric:tabular-nums}
table.data th,table.data td{padding:9px 13px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
table.data th{background:var(--paper);font:600 .68rem var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);position:sticky;top:0}
table.data td{font-family:var(--sans)}
table.data tr:last-child td{border-bottom:0}
table.data tbody tr:nth-child(even){background:color-mix(in srgb,var(--surface-2) 40%,transparent)}
table.data tbody tr:hover{background:color-mix(in srgb,var(--accent-soft) 55%,transparent)}
table.data td.num,table.data th.num{text-align:right;font-family:var(--mono);font-size:.86rem}
table.data tr.hl{background:var(--accent-soft)!important;box-shadow:inset 3px 0 0 var(--accent)}
table.data td.wrap{white-space:normal;min-width:220px}
.caption{font:.8rem/1.5 var(--mono);color:var(--muted);margin:8px 2px 0}

/* ============ charts */
.bars{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;align-items:end;height:160px;padding:10px 4px 0;margin:12px 0 0;background:repeating-linear-gradient(0deg,transparent 0 39px,color-mix(in srgb,var(--line) 70%,transparent) 39px 40px)}
.bars .b{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px}
.bars .b i{display:block;width:100%;max-width:34px;border-radius:8px 8px 2px 2px;background:linear-gradient(180deg,var(--accent-2),var(--accent));height:calc(var(--v)*1%);min-height:3px}
.bars.cool .b i{background:linear-gradient(180deg,#8fa9e6,var(--dusk))}
.bars.green .b i{background:linear-gradient(180deg,#9fd0a8,var(--sage))}
.bars .b em{font:500 .62rem var(--mono);color:var(--ink-2)}
.bars-axis{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;font:500 .66rem var(--mono);color:var(--muted);text-align:center;padding:6px 4px 0;text-transform:uppercase}
.heat{border-collapse:separate;border-spacing:3px;font-size:.82rem;width:100%}
.heat th{font:600 .64rem var(--mono);color:var(--muted);text-align:center}
.heat th.row{text-align:left;font:500 .86rem var(--sans);color:var(--ink);white-space:nowrap;max-width:230px;overflow:hidden;text-overflow:ellipsis}
.heat th.row a{color:inherit;text-decoration:none}
.heat th.row a:hover{color:var(--accent-ink)}
.heat td{height:24px;min-width:22px;border-radius:6px;background:color-mix(in srgb,var(--hc,var(--accent)) calc(var(--v)*1%),var(--surface-2))}
.heat.flowers{--hc:#c2477e}.heat.birds{--hc:#2f6fb0}.heat.butterflies{--hc:#d08a1c}.heat.mammals{--hc:#6c7a3a}
.legend{display:flex;align-items:center;gap:8px;font:.74rem var(--mono);color:var(--muted);margin-top:6px}
.legend i{display:inline-block;width:90px;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--surface-2),var(--accent))}
.sunpath{display:block;width:100%;max-width:440px;margin:10px auto}
.sunpath .dome{fill:url(#domeg)}
.sunpath .ring{fill:none;stroke:var(--line)}
.sunpath .axis{stroke:var(--line);stroke-dasharray:3 4}
.sunpath text{font:600 11px var(--mono);fill:var(--muted)}
.sunpath .arc-s{fill:none;stroke:#e8a33d;stroke-width:3.2;stroke-linecap:round}
.sunpath .arc-e{fill:none;stroke:#c4561f;stroke-width:2.2;stroke-dasharray:6 5}
.sunpath .arc-w{fill:none;stroke:#3d6db3;stroke-width:3.2;stroke-linecap:round}
.sunpath .face{fill:var(--accent);opacity:.16}
.sunpath .dot-rise{fill:#e8a33d}.sunpath .dot-set{fill:#b23f43}
.sun-legend{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;font:.74rem var(--mono);color:var(--muted)}
.sun-legend span::before{content:"";display:inline-block;width:18px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle;background:var(--c)}

/* light timeline */
.lightline{margin:16px 0 6px}
.lightline .band{position:relative;height:34px;border-radius:999px;background:linear-gradient(90deg,#0b1026,#18204a);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),var(--shadow);overflow:hidden}
.lightline .now{position:absolute;top:-5px;bottom:-5px;width:3px;border-radius:2px;background:var(--ink);box-shadow:0 0 0 3px var(--bg)}
.lightline .now::after{content:attr(data-t);position:absolute;top:-22px;left:50%;transform:translateX(-50%);font:600 .66rem var(--mono);color:var(--ink);white-space:nowrap}
.lightline .ticks{display:flex;justify-content:space-between;font:500 .64rem var(--mono);color:var(--muted);padding:6px 6px 0}
.lightline .keys{display:flex;flex-wrap:wrap;gap:6px 14px;font:500 .72rem var(--mono);color:var(--ink-2);margin-top:8px}
.lightline .keys span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px;background:var(--c)}

/* ============ field notes, callouts, faq, widgets */
.fieldnote{position:relative;background:var(--note);border-radius:3px;padding:24px 22px 18px;margin:28px 6px 22px;box-shadow:0 1px 1px rgba(0,0,0,.05),0 12px 26px rgba(70,50,10,.12);transform:rotate(-.6deg);background-image:repeating-linear-gradient(180deg,transparent 0 27px,color-mix(in srgb,var(--dusk) 14%,transparent) 27px 28px)}
.fieldnote::before{content:"";position:absolute;top:-12px;left:50%;width:110px;height:26px;transform:translateX(-50%) rotate(2deg);background:var(--tape);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.fieldnote h3{margin:0 0 6px;font:700 1.7rem/1 var(--hand);color:var(--accent-ink);letter-spacing:0}
.fieldnote ul{margin:0;padding-left:1.1em}
.fieldnote li{font-family:var(--hand);font-size:1.32rem;line-height:1.25;color:var(--ink)}
.fieldnote p{font-family:var(--hand);font-size:1.3rem;line-height:1.25;margin:0}
.callout{border:1px solid var(--line);border-left:4px solid var(--accent);background:var(--surface);border-radius:var(--radius-sm);padding:14px 18px;margin:18px 0;box-shadow:var(--shadow)}
.callout.info{border-left-color:var(--dusk);background:var(--dusk-soft)}
.callout.ok{border-left-color:var(--sage);background:var(--sage-soft)}
.callout.warn{border-left-color:var(--rose);background:var(--rose-soft)}
.callout p:last-child{margin-bottom:0}
.faq details{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);padding:0 18px;margin:10px 0;transition:.2s}
.faq details[open]{box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.faq summary{cursor:pointer;padding:15px 0;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:600 1.4rem/1 var(--mono);color:var(--accent);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details>div{padding:0 0 15px;color:var(--ink-2)}
.widget{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow);overflow:hidden}
.widget::before{content:"";position:absolute;inset:0;background:var(--topo) right -120px top -160px/520px no-repeat;opacity:.35;pointer-events:none}
.widget>*{position:relative}
.widget-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.widget-head h3{margin:0;font:600 1.08rem var(--serif)}
.live{display:inline-flex;align-items:center;gap:6px;font:600 .66rem var(--mono);color:var(--sage);text-transform:uppercase;letter-spacing:.12em}
.live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sage);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--sage) 60%,transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.times{display:grid;grid-template-columns:repeat(auto-fit,minmax(122px,1fr));gap:10px;margin:0}
.times div{background:var(--paper);border-radius:10px;padding:10px 12px;border:1px solid var(--line)}
.times dt{font:500 .64rem var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.times dd{margin:3px 0 0;font:600 1.06rem var(--serif)}
.times .gold{background:linear-gradient(135deg,#fde4bd,#f7c68d);border-color:#efc28b}
.times .blue{background:linear-gradient(135deg,#d8e3fa,#b8cbf1);border-color:#b8c8ee}
.times .gold dd,.times .blue dd,.times .gold dt,.times .blue dt{color:#24202c}
.date-in{border:1px solid var(--line);border-radius:8px;padding:4px 8px;background:var(--paper);color:var(--ink);font:500 .82rem var(--mono)}
.forecast{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
.forecast .f{flex:none;width:64px;text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:8px 4px;font:.72rem var(--mono)}
.forecast .f b{display:block;font:600 1rem var(--serif)}
.map-box{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--topo) center/420px,var(--paper);min-height:220px;display:flex;align-items:center;justify-content:center}
.map-box .map{position:absolute;inset:0}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 17px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:600 .92rem var(--sans);text-decoration:none;cursor:pointer;transition:.2s}
.btn:hover{border-color:var(--accent);color:var(--ink);transform:translateY(-1px)}
.btn.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn.primary:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:8px}
.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:4px;font:600 .68rem var(--mono);letter-spacing:.04em;background:var(--surface-2);color:var(--ink-2)}
.bortle{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;border-radius:50%;font:700 .8rem var(--mono);color:#fff;background:var(--b,#333);box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}
.b1{--b:#0b0f2a}.b2{--b:#1b2257}.b3{--b:#2c3d85}.b4{--b:#2f6d6b}.b5{--b:#6f8a2a}.b6{--b:#b58b1a}.b7{--b:#c7671d}.b8{--b:#c43d2c}.b9{--b:#9c1d4a}
.bortle-scale{display:grid;grid-template-columns:repeat(9,1fr);gap:3px;margin:10px 0 0}
.bortle-scale span{height:10px;border-radius:3px}
.bortle-scale span.on{outline:2px solid var(--ink);outline-offset:2px}
.quote{border-left:3px solid var(--accent-2);padding:4px 0 4px 18px;color:var(--ink-2);margin:16px 0;font-family:var(--serif);font-size:1.04rem}
.quote .src{display:block;font:.72rem/1.5 var(--mono);color:var(--muted);margin-top:8px}
.attrib{font:.74rem var(--mono);color:var(--muted)}
.pill-nav{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 18px}
.pill-nav a{padding:6px 13px;border-radius:999px;border:1px solid var(--line);text-decoration:none;color:var(--ink-2);font:500 .8rem var(--mono);background:var(--surface)}
.pill-nav a:hover,.pill-nav a.on{border-color:var(--accent);color:var(--ink);background:var(--accent-soft)}
.ad-slot{margin:30px 0;min-height:120px;display:flex;flex-direction:column;align-items:stretch;justify-content:center}
.ad-slot:has(ins[data-ad-status="unfilled"]){display:none}
.guides-box h3{display:flex;align-items:center;gap:8px}.guides-box h3 svg{width:16px;height:16px;color:var(--accent)}
a.autolink{text-decoration-style:dotted;text-underline-offset:3px}
.ad-slot::before{content:"Advertisement";font:500 .62rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:6px}
.related-reading{margin:34px 0 10px;padding:20px;border:1px dashed var(--line);border-radius:var(--radius);background:var(--paper)}
.related-reading h3{margin:0 0 10px;font:600 .74rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.related-reading ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.related-reading a{display:flex;gap:10px;align-items:flex-start;text-decoration:none;color:var(--ink);font-weight:560}
.related-reading a::before{content:"→";color:var(--accent);font-family:var(--mono)}
.related-reading a:hover{color:var(--accent-ink)}

/* ============ species */
.species-head{display:grid;grid-template-columns:1fr;gap:24px;align-items:start}
@media (min-width:760px){.species-head{grid-template-columns:290px 1fr}}
.species-photo{background:var(--surface);padding:10px 10px 0;border-radius:4px;box-shadow:var(--shadow-lg);transform:rotate(-1.2deg)}
.species-photo img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:2px}
.species-photo figcaption{font:.68rem/1.4 var(--mono);color:var(--muted);padding:10px 2px 12px}
.species-photo .poster{aspect-ratio:1/1;border-radius:2px}
.sci{font-style:italic;color:var(--muted);font-family:var(--serif)}

/* ============ tools */
.tool{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:clamp(16px,3vw,30px);margin:12px 0 30px;overflow:hidden}
.tool::before{content:"";position:absolute;inset:0;background:var(--topo) right -200px top -200px/700px no-repeat;opacity:.25;pointer-events:none}
.tool>*{position:relative}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.field label{display:block;font:600 .66rem var(--mono);color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.09em}
.field input,.field select{width:100%;padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:500 .98rem var(--mono)}
.field input:focus,.field select:focus{outline:2px solid var(--accent);border-color:transparent}
.field input[type=range]{padding:0;accent-color:var(--accent);background:none;border:0}
.results{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-top:22px}
.result{background:#13151f;color:#e9f3d9;border-radius:10px;padding:14px 16px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.result .k{font:600 .62rem var(--mono);text-transform:uppercase;letter-spacing:.1em;color:#8b93a8}
.result .v{font:600 1.5rem/1.2 var(--mono);margin-top:6px;color:#f8d48a}
.result.big{background:linear-gradient(135deg,#1c1830,#3a1f22)}
.result.big .v{color:#ffb47a}
.dof-bar{position:relative;height:46px;border-radius:10px;background:repeating-linear-gradient(90deg,var(--surface-2) 0 10%,var(--paper) 10% 20%);margin:20px 0 6px;overflow:hidden;border:1px solid var(--line)}
.dof-bar .zone{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--sage) 45%,transparent);border-left:2px solid var(--sage);border-right:2px solid var(--sage)}
.dof-bar .subj{position:absolute;top:6px;bottom:6px;width:3px;background:var(--accent);border-radius:2px}
.kaleido{display:grid;gap:22px;grid-template-columns:1fr}
@media (min-width:900px){.kaleido{grid-template-columns:330px minmax(0,1fr)}}
.kaleido canvas{width:100%;aspect-ratio:1/1;border-radius:50%;background:repeating-conic-gradient(var(--surface-2) 0 25%,var(--surface) 0 50%) 50%/24px 24px;box-shadow:0 0 0 10px var(--paper),0 0 0 11px var(--line),var(--shadow-lg)}
.drop{border:2px dashed var(--line);border-radius:var(--radius);padding:22px;text-align:center;cursor:pointer;background:var(--paper)}
.drop.over{border-color:var(--accent);background:var(--accent-soft)}
.seg-btns{display:flex;flex-wrap:wrap;gap:6px}
.seg-btns button{padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:600 .82rem var(--mono);cursor:pointer}
.seg-btns button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.moon-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:16px}
.mg-h{font:600 .64rem var(--mono);color:var(--muted);text-align:center;text-transform:uppercase}
.mg-d{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:6px 2px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px;font:.76rem var(--mono)}
.mg-d svg{width:min(40px,8vw);height:auto}
.mg-d small{color:var(--muted);font-size:.66rem}
.month-cal{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.month-cal a{display:block;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);text-decoration:none;color:var(--ink);transition:.2s}
.month-cal a:hover{border-color:var(--accent);transform:translateY(-2px)}
.month-cal b{display:block;font-family:var(--serif);font-size:1.05rem}
.month-cal span{font:.74rem var(--mono);color:var(--muted)}

/* ============ home blocks */
.feature-row{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.feature{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:8px;transition:transform .25s,box-shadow .25s;overflow:hidden}
.feature::after{content:"";position:absolute;right:-60px;bottom:-60px;width:180px;height:180px;background:var(--topo) center/300px;opacity:.5;border-radius:50%;pointer-events:none}
.feature:hover{transform:translateY(-3px) rotate(-.3deg);box-shadow:var(--shadow-lg);color:var(--ink)}
.feature .ic{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent-ink)}
.feature .ic .icon{width:24px;height:24px}
.feature h3{margin:6px 0 0;font-size:1.18rem}
.feature p{margin:0;color:var(--ink-2);font-size:.95rem}
.feature .go{font:600 .72rem var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin-top:auto;padding-top:6px}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.section-head h2{margin:0}
.eyebrow{font:600 .72rem var(--mono);text-transform:uppercase;letter-spacing:.16em;color:var(--accent)}
.hand-note{font:600 1.5rem/1.1 var(--hand);color:var(--accent-ink);transform:rotate(-3deg);display:inline-block}
.states-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.steps{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));counter-reset:s}
.step{position:relative;padding:26px 22px 22px;background:var(--surface);border-radius:var(--radius);border:1px solid var(--line);counter-increment:s}
.step::before{content:"0" counter(s);position:absolute;top:-16px;left:18px;font:700 2.2rem/1 var(--hand);color:var(--accent);background:var(--bg);padding:0 8px}
.step h3{margin:4px 0 6px;font-size:1.12rem}
.step p{margin:0;color:var(--ink-2);font-size:.95rem}
.tonight{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.tonight .t{background:#10142a;color:#eef0fb;border-radius:14px;padding:16px 18px;position:relative;overflow:hidden}
.tonight .t::after{content:"";position:absolute;inset:0;background:radial-gradient(1px 1px at 20% 30%,#fff8,transparent),radial-gradient(1px 1px at 70% 20%,#fff8,transparent),radial-gradient(1px 1px at 40% 70%,#fff6,transparent);pointer-events:none}
.tonight .k{font:600 .62rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#98a2c8}
.tonight .v{font:600 1.3rem/1.2 var(--serif);margin-top:6px}
.tonight .s{font:.74rem var(--mono);color:#b9c0dd;margin-top:4px}
.today-hero{display:grid;gap:22px;grid-template-columns:1fr;align-items:center}
@media (min-width:900px){.today-hero{grid-template-columns:1.1fr .9fr}}

/* ============ footer */
.site-footer{position:relative;background:#0c0f1c;color:#c9c4b8;margin-top:90px;padding:72px 0 30px;font-size:.92rem}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:-58px;height:60px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V38l90-22 70 16 120-30 90 26 80-14 130 30 90-22 120 18 100-26 130 24 90-12 110 20 90-16 110 16v34Z' fill='%230c0f1c'/%3E%3C/svg%3E") no-repeat bottom/100% 100%}
.site-footer::after{content:"";position:absolute;inset:0;background:url(/assets/img/topo-dark.svg) center/700px;opacity:.07;pointer-events:none}
.site-footer .wrap{position:relative;z-index:1}
.site-footer a{color:#e9e4da;text-decoration:none}
.site-footer a:hover{color:#f2b356}
.foot-grid{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.foot-grid h4{color:#fff;font:600 .7rem var(--mono);text-transform:uppercase;letter-spacing:.14em;margin-bottom:12px}
.foot-grid ul{list-style:none;padding:0;margin:0}
.foot-grid li{margin:7px 0}
.foot-bottom{border-top:1px dashed #2a3148;margin-top:40px;padding-top:20px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;color:#8d96a3;font:.76rem var(--mono)}
.foot-brand{display:flex;align-items:center;gap:10px;color:#fff;font-family:var(--serif);font-size:1.25rem;margin-bottom:10px}
.foot-brand img{width:32px;height:32px}
.motto{font:600 1.7rem/1 var(--hand);color:#f2b356;transform:rotate(-2deg);display:inline-block;margin:6px 0 10px}

@media (max-width:640px){
  body{font-size:15.5px}
  .page-hero .wrap{padding-top:64px}
  table.data th,table.data td{padding:8px 9px}
  .bars{height:124px;gap:3px}
  .stat .value{font-size:1.22rem}
  .grid .card{transform:none!important}
  .fieldnote{margin-left:0;margin-right:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{.site-header,.site-footer,.aside,.ad-slot,.widget{display:none}.page-hero{color:#000;background:none!important;min-height:0}.page-hero::after,.page-hero .scene{display:none}.page-hero h1{color:#000}}
