/* ============================================================================
   Nepal Disaster Update Live — stylesheet for the standalone article pages.

   The dashboard at / keeps its own inline stylesheet. This file covers the
   crawlable pages generated by src/build.mjs, and deliberately reuses the same
   design tokens (colour, type, spacing) so the two halves of the site read as
   one publication.
   ========================================================================= */

:root{
  --bg:#f9f9f7; --surface:#fcfcfb; --surface-2:#f1f0eb;
  --text:#0b0b0b; --text-muted:#52514e; --text-faint:#898781;
  --border:#e1e0d9; --border-strong:#c3c2b7;
  --critical:#d03b3b; --crimson:#DC143C; --navy:#003893;
  --alert:#b5271f;
  --shadow: 0 1px 2px rgba(11,11,11,0.05), 0 4px 16px rgba(11,11,11,0.04);
  --font-display:'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body:'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}
:root[data-theme="dark"]{
  --bg:#0d0d0d; --surface:#1a1a19; --surface-2:#161615;
  --text:#ffffff; --text-muted:#c3c2b7; --text-faint:#898781;
  --border:#2c2c2a; --border-strong:#383835;
  --critical:#e0685f;
  --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.4);
}

*{box-sizing:border-box;}
html{background:var(--bg); -webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; display:block;}
a{color:var(--text); text-decoration-color:var(--border-strong); text-underline-offset:2px;}
a:hover{text-decoration-color:var(--critical); color:var(--critical);}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--text); outline-offset:2px; border-radius:2px;}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.skip-link{position:absolute; left:8px; top:-48px; background:var(--text); color:var(--bg); padding:10px 16px; border-radius:6px; z-index:100;}
.skip-link:focus{top:8px;}

h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; text-wrap:balance; margin:0;}
h1{font-size:clamp(2rem, 1.4rem + 2.4vw, 3rem); line-height:1.08; letter-spacing:-0.015em;}
h2{font-size:clamp(1.45rem, 1.2rem + 1.1vw, 1.95rem); line-height:1.2; margin:2.2em 0 .5em;}
h3{font-size:1.16rem; line-height:1.32; margin:1.9em 0 .4em;}
h4{font-family:var(--font-body); font-size:0.95rem; font-weight:600; margin:1.5em 0 .3em;}
p{margin:0 0 1.05em;}
ul,ol{margin:0 0 1.2em; padding-left:1.3em;}
li{margin:0 0 .45em;}
strong{font-weight:600;}
.lede{color:var(--text-muted); font-size:1.14rem; line-height:1.55;}
.eyebrow{font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-faint); font-weight:500; margin:0 0 .5em;}
.small{font-size:0.86rem; color:var(--text-muted);}
.faint{font-size:0.8rem; color:var(--text-faint);}
.faint a, .small a{color:var(--text-muted); text-decoration-color:var(--border-strong);}
.faint a:hover, .small a:hover{color:var(--critical);}
.num{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}

/* ---- shell -------------------------------------------------------------- */
.shell{max-width:820px; margin:0 auto; padding:0 20px;}
.shell-wide{max-width:1120px; margin:0 auto; padding:0 20px;}

/* ---- masthead ----------------------------------------------------------- */
.sitehead{border-bottom:1px solid var(--border); background:var(--surface); position:sticky; top:0; z-index:60;}
.sitehead-inner{max-width:1120px; margin:0 auto; padding:0 20px; height:60px; display:flex; align-items:center; gap:16px;}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--text); flex-shrink:0;}
.brand:hover{color:var(--text);}
.brand-mark{display:grid; place-items:center; width:40px; height:40px; flex-shrink:0; border-radius:12px; border:1px solid var(--border);
  background:linear-gradient(158deg, var(--surface), var(--surface-2));}
.brand-mark svg{width:21px; height:26px;}
.brand-text{display:flex; flex-direction:column; gap:3px; line-height:1;}
.brand-name{font-family:var(--font-display); font-weight:600; font-size:1.08rem; letter-spacing:-0.02em;}
.brand-live{display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:0.57rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--critical); font-weight:500;}
.brand-live i{width:6px; height:6px; border-radius:50%; background:var(--critical); animation:pulse 2s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
@media (prefers-reduced-motion: reduce){ .brand-live i{animation:none;} }

.headnav{margin-left:auto; display:flex; gap:2px; align-items:center; overflow-x:auto; scrollbar-width:none;}
.headnav::-webkit-scrollbar{display:none;}
.headnav a{font-size:0.85rem; font-weight:500; color:var(--text-muted); text-decoration:none; padding:7px 11px; border-radius:9px; white-space:nowrap;}
.headnav a:hover{background:var(--surface-2); color:var(--text);}
.headnav a[aria-current="page"]{background:var(--surface-2); color:var(--text); font-weight:600;}
.headnav a.is-home{color:var(--critical);}
@media (max-width:780px){
  .brand-name{font-size:.98rem;}
  .headnav{gap:0; margin-left:auto;}
  .headnav a{padding:7px 8px; font-size:.8rem;}
}

/* ---- breadcrumbs -------------------------------------------------------- */
.crumbs{font-size:0.8rem; color:var(--text-faint); padding:18px 0 0; margin:0;}
.crumbs ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; align-items:center;}
.crumbs li{margin:0; display:flex; gap:6px; align-items:center;}
.crumbs li+li::before{content:"›"; color:var(--border-strong);}
.crumbs a{color:var(--text-muted); text-decoration:none;}
.crumbs a:hover{text-decoration:underline; color:var(--critical);}
.crumbs [aria-current]{color:var(--text-faint);}

/* ---- article head ------------------------------------------------------- */
.pagehead{padding:26px 0 8px;}
.pagehead h1{margin-bottom:.35em;}
.status-row{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 16px;}
.pill{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:0.68rem; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--border); background:var(--surface-2); color:var(--text-muted); border-radius:999px; padding:4px 10px;}
.pill-live{border-color:color-mix(in srgb, var(--critical) 45%, var(--border)); color:var(--critical);}
.pill-live i{width:6px; height:6px; border-radius:50%; background:var(--critical); animation:pulse 2s ease-in-out infinite;}
.pill-archive{border-color:var(--border-strong); color:var(--text-faint);}
a.pill{text-decoration:none; border-color:var(--border-strong); color:var(--text-muted);}
a.pill:hover{border-color:var(--critical); color:var(--critical);}
.byline{font-size:0.82rem; color:var(--text-faint); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:11px 0; margin:0 0 26px;
  display:flex; flex-wrap:wrap; gap:6px 16px;}
.byline b{color:var(--text-muted); font-weight:600;}

/* ---- callouts ----------------------------------------------------------- */
.callout{border:1px solid var(--border); background:var(--surface); border-radius:14px; padding:16px 18px; margin:0 0 22px; box-shadow:var(--shadow);}
.callout p:last-child{margin-bottom:0;}
.callout-alert{border-color:color-mix(in srgb, var(--critical) 42%, var(--border)); background:color-mix(in srgb, var(--critical) 7%, var(--surface));}
.callout-title{font-family:var(--font-body); font-weight:700; font-size:0.95rem; margin:0 0 .4em; display:flex; align-items:center; gap:8px;}
.callout-alert .callout-title{color:var(--critical);}

.dialrow{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px;}
.dial{display:inline-flex; flex-direction:column; gap:1px; text-decoration:none; border:1px solid var(--border); background:var(--surface);
  border-radius:12px; padding:9px 15px; min-width:92px; box-shadow:var(--shadow);}
.dial b{font-family:var(--font-mono); font-size:1.15rem; letter-spacing:-.02em; color:var(--critical);}
.dial span{font-size:0.74rem; color:var(--text-muted);}
.dial:hover{border-color:var(--critical); color:var(--text);}

/* ---- number grid -------------------------------------------------------- */
.numgrid{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:10px; margin:0 0 8px;}
.statbox{border:1px solid var(--border); background:var(--surface); border-radius:14px; padding:14px 15px; box-shadow:var(--shadow);}
.statbox .n{display:block; font-family:var(--font-mono); font-size:1.85rem; line-height:1.1; letter-spacing:-.03em; font-variant-numeric:tabular-nums;}
.statbox .n.sm{font-size:1.3rem;}
.statbox .n.crit{color:var(--critical);}
.statbox .l{display:block; font-size:0.8rem; color:var(--text-muted); margin-top:3px;}
.statbox .src{display:block; font-size:0.7rem; color:var(--text-faint); margin-top:7px; font-family:var(--font-mono);}

/* ---- tables ------------------------------------------------------------- */
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 10px; border:1px solid var(--border); border-radius:14px; background:var(--surface);}
table{border-collapse:collapse; width:100%; font-size:0.92rem; min-width:420px;}
caption{caption-side:top; text-align:left; font-size:0.82rem; color:var(--text-faint); padding:12px 15px 0;}
th,td{text-align:left; padding:10px 15px; border-bottom:1px solid var(--border); vertical-align:top;}
thead th{font-family:var(--font-mono); font-size:0.7rem; letter-spacing:.07em; text-transform:uppercase; color:var(--text-faint); font-weight:500; background:var(--surface-2);}
tbody tr:last-child td{border-bottom:0;}
td.n, th.n{font-family:var(--font-mono); font-variant-numeric:tabular-nums; white-space:nowrap;}

/* ---- cards / link lists ------------------------------------------------- */
.cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:12px; margin:0 0 22px;}
.card{border:1px solid var(--border); background:var(--surface); border-radius:14px; padding:16px 17px; box-shadow:var(--shadow);}
.card h3{margin:0 0 .35em; font-size:1.05rem;}
.card p:last-child{margin-bottom:0; font-size:0.92rem; color:var(--text-muted);}

a.card{text-decoration:none; display:block; transition:border-color .15s, transform .15s;}
a.card:hover{border-color:var(--border-strong); color:var(--text); transform:translateY(-1px);}
a.card .go{display:inline-block; margin-top:.6em; font-size:0.8rem; font-weight:600; color:var(--critical);}

.linklist{list-style:none; padding:0; margin:0 0 22px; display:grid; gap:2px;}
.linklist li{margin:0;}
.linklist a{display:flex; justify-content:space-between; gap:12px; align-items:baseline; text-decoration:none; padding:11px 14px; border:1px solid var(--border); border-radius:11px; background:var(--surface);}
.linklist a:hover{border-color:var(--border-strong); color:var(--text); background:var(--surface-2);}
.linklist b{font-weight:600; font-size:0.96rem;}
.linklist span{font-size:0.8rem; color:var(--text-faint); text-align:right;}

.sourcelinks{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px;}
.sourcelinks a{font-size:0.84rem; text-decoration:none; border:1px solid var(--border); background:var(--surface); border-radius:10px; padding:7px 12px; color:var(--text-muted);}
.sourcelinks a:hover{border-color:var(--border-strong); color:var(--text);}

/* ---- timeline ----------------------------------------------------------- */
.timeline{margin:0 0 22px; border-left:2px solid var(--border); padding-left:18px;}
.tl-item{position:relative; margin:0 0 20px;}
.tl-item::before{content:""; position:absolute; left:-25px; top:7px; width:10px; height:10px; border-radius:50%; background:var(--critical); border:2px solid var(--bg);}
.tl-time{font-family:var(--font-mono); font-size:0.74rem; letter-spacing:.05em; text-transform:uppercase; color:var(--critical); margin-bottom:2px;}
.tl-item p{margin:0; font-size:0.96rem;}

/* ---- checklist ---------------------------------------------------------- */
.checklist{display:grid; gap:8px; margin:0 0 22px; counter-reset:step;}
.check-row{display:flex; gap:12px; align-items:flex-start; border:1px solid var(--border); background:var(--surface); border-radius:12px; padding:12px 14px;}
.check-row .mark{font-family:var(--font-mono); font-size:0.72rem; color:var(--critical); border:1px solid var(--border); border-radius:7px; padding:2px 7px; flex-shrink:0; margin-top:2px;}
.check-row p{margin:0; font-size:0.94rem;}

/* ---- FAQ ---------------------------------------------------------------- */
.faq{margin:0 0 22px; border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--surface);}
.faq details{border-bottom:1px solid var(--border);}
.faq details:last-child{border-bottom:0;}
.faq summary{cursor:pointer; padding:14px 16px; font-weight:600; font-size:0.98rem; list-style:none; display:flex; justify-content:space-between; gap:12px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; color:var(--text-faint); font-family:var(--font-mono);}
.faq details[open] summary::after{content:"−";}
.faq .faq-body{padding:0 16px 15px; font-size:0.95rem; color:var(--text-muted);}
.faq .faq-body p:last-child{margin-bottom:0;}

/* ---- map ---------------------------------------------------------------- */
#route-map{height:min(60vh, 460px); width:100%; border:1px solid var(--border); border-radius:14px; background:var(--surface-2); overflow:hidden;}
.map-note{font-size:0.76rem; color:var(--text-faint); margin:8px 0 22px;}

/* ---- live feed on the updates page -------------------------------------- */
.feedlist{display:grid; gap:10px; margin:0 0 12px;}
.feeditem{border:1px solid var(--border); background:var(--surface); border-radius:13px; padding:13px 15px;}
.feeditem a{font-weight:600; font-size:0.98rem; text-decoration:none;}
.feeditem a:hover{text-decoration:underline;}
.feeditem .meta{display:flex; flex-wrap:wrap; gap:5px 12px; font-size:0.74rem; color:var(--text-faint); font-family:var(--font-mono); margin-top:5px;}
.feed-state{font-size:0.88rem; color:var(--text-muted); border:1px dashed var(--border-strong); border-radius:12px; padding:14px 16px; margin:0 0 12px;}

/* ---- update article list ------------------------------------------------ */
.postlist{list-style:none; padding:0; margin:0 0 26px; display:grid; gap:12px;}
.postlist li{margin:0;}
.postcard{display:block; text-decoration:none; border:1px solid var(--border); background:var(--surface); border-radius:14px; padding:16px 18px; box-shadow:var(--shadow);}
.postcard:hover{border-color:var(--border-strong); color:var(--text); }
.postcard time{display:block; font-family:var(--font-mono); font-size:0.71rem; letter-spacing:.05em; text-transform:uppercase; color:var(--critical); margin-bottom:5px;}
.postcard h2{margin:0 0 .3em; font-size:1.12rem; font-family:var(--font-display); font-weight:600;}
.postcard p{margin:0; font-size:0.92rem; color:var(--text-muted);}

/* ---- prev/next + related ------------------------------------------------ */
.related{border-top:1px solid var(--border); margin-top:44px; padding-top:22px;}
.related h2{margin-top:0; font-size:1.15rem;}

/* ---- footer ------------------------------------------------------------- */
footer{border-top:1px solid var(--border); margin-top:56px; padding:26px 0 40px; background:var(--surface-2);}
footer p{font-size:0.84rem; color:var(--text-muted); margin:0 0 .7em; max-width:70ch;}
footer .footnav{display:flex; flex-wrap:wrap; gap:6px 16px; margin:0 0 16px; padding:0; list-style:none;}
footer .footnav a{font-size:0.86rem; color:var(--text-muted); text-decoration:none;}
footer .footnav a:hover{color:var(--critical); text-decoration:underline;}

/* ---- misc --------------------------------------------------------------- */
.updated-line{font-size:0.8rem; line-height:1.5; color:var(--text-faint); margin:0 0 22px; max-width:70ch;}
hr{border:0; border-top:1px solid var(--border); margin:36px 0;}
.measure{max-width:68ch;}