/* ============================================================================
   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;
  /* Faint text is small text: captions, bylines, timestamps. #898781 sat at
     3.4:1 on the page and 3.15:1 on a grey surface, under the 4.5:1 small
     text needs. #6b6a65 clears it on every surface (5.1, 4.75, 5.3). The
     dark palette keeps its own value, which already passes. */
  --text-faint:#6b6a65;
  --border:#e1e0d9; --border-strong:#c3c2b7;
  /* Red is also a text colour (the Front page link, the live pill), so it
     has to carry small type on the grey surface: #c23333 is 4.8:1 there. */
  --critical:#c23333; --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', 'Newsreader Fallback', Georgia, 'Times New Roman', serif;
  --font-body:'Public Sans', 'Public Sans Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}
/* The web fonts arrive after the first paint. Until they do, the text is set
   in Georgia and Arial, which run narrower or wider than Newsreader and Public
   Sans, so the headline took a different number of lines before and after the
   swap and the whole page jumped by one line of the h1 (a layout shift of
   0.19 on the front page). These fallback faces are the local fonts scaled so
   a line of text is the same length in either, which keeps the line breaks,
   and therefore the layout, where they are. The ratios were measured in the
   browser against the real fonts; Georgia's bold is far wider than
   Newsreader's, so the two weights need their own figure. */
@font-face{font-family:'Newsreader Fallback'; src:local('Georgia'); font-weight:400 500; size-adjust:98%; ascent-override:74%; descent-override:26%; line-gap-override:0%;}
@font-face{font-family:'Newsreader Fallback'; src:local('Georgia Bold'), local('Georgia-Bold'); font-weight:600 800; size-adjust:90%; ascent-override:74%; descent-override:26%; line-gap-override:0%;}
/* Newsreader's bold figures are wide where its bold letters are narrow, so
   a headline made of figures gets a fallback of its own (the front page). */
@font-face{font-family:'Newsreader Figures Fallback'; src:local('Georgia Bold'), local('Georgia-Bold'); font-weight:600 800; size-adjust:98.6%; ascent-override:74%; descent-override:26%; line-gap-override:0%;}
@font-face{font-family:'Public Sans Fallback'; src:local('Arial'), local('Helvetica'); font-weight:400; size-adjust:103.8%; ascent-override:95%; descent-override:23%; line-gap-override:0%;}
@font-face{font-family:'Public Sans Fallback'; src:local('Arial'), local('Helvetica'); font-weight:500; size-adjust:105.1%; ascent-override:95%; descent-override:23%; line-gap-override:0%;}
@font-face{font-family:'Public Sans Fallback'; src:local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'); font-weight:600; size-adjust:97.3%; ascent-override:95%; descent-override:23%; line-gap-override:0%;}
@font-face{font-family:'Public Sans Fallback'; src:local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'); font-weight:700 800; size-adjust:98.6%; ascent-override:95%; descent-override:23%; line-gap-override:0%;}
/* The dark palette is defined twice on purpose.

   [data-theme="dark"] is the reader's explicit choice, carried over from the
   dashboard's theme switch by the inline script in src/template.mjs.

   The media query is the default for everybody who has never touched that
   switch, which is nearly everyone arriving from a search result. Without it
   these pages stayed white on a phone in dark mode while the dashboard went
   dark, so the two halves of the site did not look like one publication. It is
   skipped when the reader has explicitly asked for light. */
: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);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --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, .pill-live i{animation:none;} a.card{transition: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;}
  /* The row scrolls sideways here and nothing said so: the last link was cut
     off mid-word at the edge. A fade over the last few points is the hint. */
  .headnav{padding-right:18px; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);}
}

/* ---- 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;}
.seg{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:3px;}
.seg button{font:inherit; font-size:.8rem; padding:8px 6px; border:0; border-radius:7px; background:transparent; color:var(--text-muted); cursor:pointer;}
.seg button:hover{color:var(--text);}
.seg button:focus-visible{outline:2px solid var(--critical); outline-offset:2px;}
.seg button[aria-pressed="true"]{background:var(--surface); color:var(--text); font-weight:600; box-shadow:var(--shadow);}
.location-seg{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:560px){.location-seg{grid-template-columns:repeat(2,minmax(0,1fr));}}
.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;}
/* IBM Plex Mono has no Devanagari, so on the Nepali pages the figures fell
   through to a thin system face. Noto Sans Devanagari (loaded on those pages
   only) draws them at the weight of the English figures, with the Nepali
   forms of 5 and 8 under lang="ne". The comma stays Plex Mono's, as in 1,458.
   The small source line under each figure takes the same face. */
:lang(ne) .statbox .n, :lang(ne) .statbox .src{font-family:'IBM Plex Mono', 'Noto Sans Devanagari', ui-monospace, 'SF Mono', Menlo, monospace;}
.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;}
/* A two-column table fits a phone as it is; the floor above made it scroll
   sideways and cut the numbers column off at the edge. */
table.narrow{min-width:0;}
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;}
/* A figure in a cell ("~5,000 m", "28.4402, 85.4432", "Rs 10 million") broke
   after its comma or before its unit when the column was narrow. */
td .num{white-space:nowrap;}
/* A wide table marked "stack" (the flood-path points on the map page): on a
   phone or a small tablet each row is a block, number on the left, place on
   top, coordinates and elevation side by side, then the text at full width.
   Up to 860 px, and from 1100 px until the article column beside the rail
   reaches its full 776 px, five columns left the text a strip 180-400 px
   wide. The header row stays for screen readers; the two figure cells carry
   their own label. Wider, as a table, the two figure columns give up a little
   right padding so the text column keeps its width now the figures no longer
   wrap. */
table.stack td:nth-child(3), table.stack td:nth-child(4){padding-right:8px;}
@media screen and (max-width:860px), screen and (min-width:1100px) and (max-width:1179px){
  table.stack{min-width:0;}
  table.stack thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
  table.stack tbody{display:block;}
  table.stack tr{display:grid; grid-template-columns:auto auto 1fr; column-gap:14px; row-gap:6px; padding:13px 15px; border-bottom:1px solid var(--border);}
  table.stack tbody tr:last-child{border-bottom:0;}
  table.stack td{display:block; padding:0; border:0;}
  table.stack td:nth-child(1){grid-row:1 / span 3; color:var(--text-faint);}
  table.stack td:nth-child(2), table.stack td:nth-child(5){grid-column:2 / 4;}
  table.stack td:nth-child(3){grid-column:2;}
  table.stack td:nth-child(4){grid-column:3; white-space:nowrap;}
  table.stack td:nth-child(3)::before, table.stack td:nth-child(4)::before{
    display:block; font-family:var(--font-mono); font-size:0.66rem; letter-spacing:.07em; text-transform:uppercase; color:var(--text-faint);
    content:attr(data-label); content:attr(data-label) / "";
  }
}

/* ---- 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;}
/* Leaflet's default link blue is 3.2:1 on its translucent attribution strip. */
.leaflet-container .leaflet-control-attribution a{color:#005f87;}
/* The focus ring on a zoom button sat straight on the satellite picture, dark
   on dark terrain in light mode. A band of page colour under it (filling the
   2 px gap) makes it read on any picture in either mode. */
.leaflet-bar a:focus-visible{box-shadow:0 0 0 2px var(--bg);}
/* Leaflet's zoom buttons are 30 px square on a touch screen. The drawn
   buttons stay; each tappable area is 44 px square: 7 px either side, 14 px
   above the top button and 14 px below the bottom one. The two touch, so the
   line between them is not widened. The map clips anything outside it, so the
   control sits 2 px lower (12 px margin) to leave room for the 14 px above. */
@media (pointer:coarse){
  .leaflet-touch .leaflet-top .leaflet-control-zoom{margin-top:12px;}
  .leaflet-bar a{position:relative;}
  .leaflet-bar a::before{content:""; position:absolute; inset:-14px -7px;}
  .leaflet-bar a + a::before{top:0;}
  .leaflet-bar a:not(:last-child)::before{bottom:0;}
}

/* ---- 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;}
/* On a rail page the related block is lifted out of the article column and
   runs the full width of the page, so the foot of the page is not a band of
   cards on the left with an empty quarter on the right. */
.page-related{margin-top:4px;}
@media (min-width:1100px){
  .page-layout > .page-related{grid-column:1 / -1;}
  /* A briefing is a few paragraphs beside a rail three screens tall. Lifted
     to the full width, its "More updates" waited for the rail to end and left
     a blank half-page under the words. On those pages the cards stay in the
     article column and the rail runs down beside both. */
  .page-layout.is-brief > .page-related{grid-column:1;}
  .page-layout.is-brief > .rail{grid-column:2; grid-row:1 / span 2;}
}

/* ---- footer ------------------------------------------------------------- */
footer{border-top:1px solid var(--border); margin-top:56px; padding:32px 0 40px; background:var(--surface-2);}
/* The footer sat in the narrow 820px shell under pages that were 1180 wide,
   so it read as a second, thinner column pushed to the middle. It now takes
   the same width as the widest page content. */
footer .shell{max-width:1180px;}
footer p{font-size:0.84rem; color:var(--text-muted); margin:0 0 .7em; max-width:74ch;}
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;}

/* ===========================================================================
   Two-column pages.

   A briefing page was a single 820px column with a third of a laptop screen
   empty on either side of it. Where a page passes a rail, the shell widens
   and the empty right becomes a standing column: the toll, the newest lines,
   who the sources are, and how to get help. Below 1100px it stacks under the
   article and the page is what it always was.
   ======================================================================== */
.shell.has-rail{max-width:1180px;}
.page-layout{display:block;}
@media (min-width:1100px){
  .page-layout{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:44px; align-items:start;}
}
.rail{display:flex; flex-direction:column; gap:16px; padding:26px 0 40px; min-width:0;}
@media (max-width:1099px){
  .rail{border-top:1px solid var(--border); margin-top:10px;}
}
.rail-card{flex:0 0 auto; border:1px solid var(--border); border-radius:14px; background:var(--surface); overflow:hidden; box-shadow:var(--shadow);}
@media (min-width:1100px){
  .rail-card.is-pinned{position:sticky; top:16px; z-index:2; box-shadow:var(--shadow);}
}
.rail-head{
  display:flex; align-items:center; gap:8px; min-height:42px; margin:0;
  padding:10px 14px; border-bottom:1px solid var(--border); background:var(--surface-2);
  font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--text-faint); font-weight:500;
}
.rail-head .rail-tick{width:14px; height:2px; background:var(--critical); flex-shrink:0;}
.rail-head .rail-dot{width:7px; height:7px; border-radius:50%; background:var(--critical); flex-shrink:0;}
.rail-head .rail-when{margin-left:auto; padding-left:8px; font-size:0.61rem; letter-spacing:0.04em; text-transform:none; text-align:right;}
.rail-body{padding:12px 14px;}
.rail-body > :last-child{margin-bottom:0;}
.rail-fig{display:flex; align-items:baseline; gap:11px; padding:12px 14px; border-bottom:1px solid var(--border);}
.rail-fig:last-of-type{border-bottom:0;}
.rail-fig .rf-n{font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:1.55rem; font-weight:600; line-height:1; letter-spacing:-0.04em;}
.rail-fig .rf-n.critical{color:var(--critical);}
.rail-fig .rf-l{font-size:0.84rem; color:var(--text-muted); line-height:1.3;}
.rail-note{padding:9px 14px; border-top:1px solid var(--border); font-size:0.74rem; color:var(--text-faint); line-height:1.45; margin:0;}
.rail-list{list-style:none; margin:0; padding:0;}
.rail-list li{margin:0; padding:11px 14px; border-bottom:1px solid var(--border);}
.rail-list li:last-child{border-bottom:0;}
.rail-list time{display:block; font-family:var(--font-mono); font-size:0.66rem; font-weight:700; color:var(--critical); letter-spacing:0.04em;}
.rail-list a{display:block; margin-top:4px; font-size:0.88rem; font-weight:600; line-height:1.36; color:var(--text); text-decoration:none;}
.rail-list a:hover{text-decoration:underline; text-underline-offset:2px;}
.rail-src{list-style:none; margin:0; padding:0;}
.rail-src li{margin:0; display:flex; align-items:center; gap:8px; padding:8px 14px; border-bottom:1px solid var(--border); font-size:0.85rem; color:var(--text-muted);}
.rail-src li:last-child{border-bottom:0;}
.rail-src .vtick{width:14px; height:14px; flex-shrink:0; color:#1d9bf0;}
.rail-src b{color:var(--text); font-weight:600;}
.rail-src .rs-kind{margin-left:auto; font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-faint);}
.rail-lede{margin:0 0 10px; font-size:0.85rem; color:var(--text-muted); line-height:1.5;}
.rail-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 12px; border-radius:10px; font-size:0.88rem; font-weight:600;
  text-decoration:none; border:1px solid var(--border); color:var(--text); background:var(--bg);
}
.rail-btn:hover{border-color:var(--border-strong);}
.rail-btn.is-alert{background:var(--alert, #b5271f); border-color:var(--alert, #b5271f); color:#fff;}
.rail-btn + .rail-btn{margin-top:8px;}

/* ===========================================================================
   Panels and separators, matching the dashboard.
   ======================================================================== */
.panel{border:1px solid var(--border); border-radius:14px; background:var(--surface); overflow:hidden; margin:22px 0;}
.panel-head{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding:12px 16px; border-bottom:1px solid var(--border); background:var(--surface-2);}
.panel-head h2, .panel-head h3{font-family:var(--font-display); font-size:1.02rem; margin:0;}
.panel-head .panel-sub{font-size:0.8rem; color:var(--text-faint); margin:0;}
.panel-body{padding:16px;}
.panel-body > :first-child{margin-top:0;}
.panel-body > :last-child{margin-bottom:0;}

/* A source badge on a world headline, so a reader can see at a glance that
   the line came from a UN alerting body rather than an aggregator. */
.src-badge{display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--text-faint);}
.src-badge .vtick{width:12px; height:12px; color:#1d9bf0;}

/* The embed snippet on /about/ is one long line of markup. Wrapped, it can be
   read and copied on a phone; unwrapped it pushed the whole page sideways. */
pre{white-space:pre-wrap; word-break:break-all; overflow-x:auto; margin:0 0 16px; padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:var(--surface-2); font-family:var(--font-mono); font-size:0.8rem; line-height:1.55;}
pre code{font-family:inherit; font-size:inherit;}

/* The live pill's dot is declared after the reduced-motion rule above and
   won at equal specificity, so it kept pulsing for readers who asked it not
   to. Restated here, after every animated rule, so it is the one that holds. */
@media (prefers-reduced-motion: reduce){
  .brand-live i, .pill-live i, .rail-head .rail-dot{animation:none !important;}
  a.card, .dial, .headnav a{transition:none;}
}

/* ===========================================================================
   Print.

   People print the emergency numbers and the missing-persons steps to keep
   by the phone or hand to a relative without data. Black on white, no site
   chrome, every link followed by its address so the sheet still works on
   paper. The dashboard carries its own stylesheet and is not covered here.
   ======================================================================== */
@media print{
  /* Same specificity as the dark-scheme rule above, so paper is white
     whatever the reader's screen theme is. */
  :root, :root[data-theme="dark"], :root:not([data-theme="light"]){
    --bg:#fff; --surface:#fff; --surface-2:#fff;
    --text:#000; --text-muted:#000; --text-faint:#333;
    --border:#888; --border-strong:#444; --critical:#000; --shadow:none;
  }
  html, body{background:#fff !important; color:#000 !important;}
  body{font-size:11pt; line-height:1.4;}
  .skip-link, .sitehead, .crumbs, .rail, .page-related, .related, .status-row,
  .byline, footer nav, .sourcelinks a::before, .map-note, #route-map, iframe, video{display:none !important;}
  .shell, .shell.has-rail, footer .shell{max-width:none; padding:0;}
  .page-layout{display:block;}
  h1{font-size:20pt; margin-top:0;}
  h2{font-size:14pt; break-after:avoid;}
  h3{font-size:12pt; break-after:avoid;}
  p, li{orphans:3; widows:3;}
  a{color:#000; text-decoration:underline;}
  /* The address after every link, except the ones whose text already is the
     address: phone numbers, e-mail, and the bare hostnames on the relief page. */
  a[href^="http"]:not(.num)::after{content:" (" attr(href) ")"; font-size:9pt; font-weight:400; word-break:break-all;}
  a[href^="/"]::after{content:" (nepaldisasterupdatelive.nxtimaginelabs.com" attr(href) ")"; font-size:9pt; font-weight:400; word-break:break-all;}
  .dial::after, .linklist a::after, a.card::after{content:none;}
  .callout, .callout-alert, .dial, .check-row, .statbox, .table-scroll, .faq, .card, .linklist a{
    background:#fff !important; border:1px solid #000; border-radius:4px; box-shadow:none; break-inside:avoid;
  }
  .dialrow{gap:6px;}
  .dial b{color:#000;}
  .callout-alert .callout-title, .check-row .mark, .statbox .n.crit{color:#000;}
  table{min-width:0; font-size:10pt;}
  th, td{border-bottom:1px solid #888; padding:5px 8px;}
  thead th{background:#fff; color:#000;}
  tr{break-inside:avoid;}
  /* Closed answers stay closed on paper; the open one prints as it is. */
  .faq summary::after{content:none;}
  img{max-width:60mm; height:auto;}
  footer{border-top:1px solid #000; margin-top:24pt; padding:10pt 0 0; background:#fff;}
  footer p{color:#000; font-size:9pt;}
}