/* ─────────────────────────────────────────────────────────────────────
   KHAO story page — single-article reader
   Matches the editorial palette of the index/archive mockups.
   ───────────────────────────────────────────────────────────────────── */
:root{
  --bg:#ffffff; --fg:#0a0a0a; --fg-weak:#333; --muted:#5c5c5c;
  --line:#e5e5e5; --line-strong:#111; --hover:#f4f4f4;
  --brand-red:#d1271c; --acc-green:#0f8a3c; --acc-amber:#c98a1a;
  --serif:"Iowan Old Style","Palatino Linotype","Georgia",ui-serif,serif;
  --sans: ui-sans-serif,-apple-system,"SF Pro Text","Inter","Helvetica Neue",Arial,sans-serif;
  --mono: ui-monospace,"SF Mono","JetBrains Mono","Menlo",monospace;
  --max:780px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);
  font-family:var(--sans); font-size:16px; line-height:1.55;}
a{color:var(--fg); text-decoration:underline; text-underline-offset:2px}
a:hover{color:var(--brand-red)}

/* ── Masthead (topbar + datebar) — mirrors index.html exactly ──── */
.site-top{
  position:sticky; top:0; z-index:30; background:var(--bg);
  transform:translateY(0);
  transition:transform .28s cubic-bezier(.2,.7,.2,1);
  will-change:transform;
}
.site-top.is-hidden{ transform:translateY(calc(-1 * var(--header-h, 66px))); }

.topbar{
  border-bottom:1px solid var(--line-strong); background:var(--bg);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; max-width:1240px; margin:0 auto; gap:24px;
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit}
.brand-mark{
  width:28px; height:28px;
  background:url('assets/khao-logo.svg') center/contain no-repeat;
  display:inline-block; flex:none;
  image-rendering:pixelated;
  image-rendering:-moz-crisp-edges;
  image-rendering:crisp-edges;
}
.brand-word{
  font-family:var(--serif); font-weight:700; font-size:26px;
  letter-spacing:.02em; line-height:1;
}
.brand small{
  font-family:var(--mono); font-weight:400; font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; margin-left:10px;
  color:var(--muted); vertical-align:middle;
}
.topnav{
  display:flex; gap:22px; font-size:13px; letter-spacing:.04em;
  text-transform:uppercase;
}
.topnav a{
  padding:6px 0; border-bottom:2px solid transparent;
  text-decoration:none; color:inherit;
}
.topnav a.active, .topnav a:hover{ border-bottom-color:var(--fg); }

.datebar{ background:var(--bg); border-bottom:1px solid var(--line); }
.datebar-inner{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:10px 24px; max-width:1240px; margin:0 auto;
}
/* Section index — replaces the old price ticker. Mono caps, letter-spaced,
   separated by thin vertical rules. On story / topics pages each chip
   points back to index.html#latest where the category sections live. */
.cat-index{
  display:flex; align-items:center; gap:0;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--fg-weak);
}
.cat-index a{
  position:relative;
  color:var(--fg-weak); text-decoration:none;
  padding:4px 12px; border-bottom:1px solid transparent;
  background-clip:padding-box;
  transition:color .15s ease, background-color .15s ease, border-color .15s ease;
}
.cat-index a + a{ border-left:1px solid var(--line) }
.cat-index a:hover{ color:var(--fg); border-bottom-color:var(--fg) }
.cat-index a.active{
  color:var(--bg); background:var(--fg);
  border-left-color:var(--fg);
  border-bottom-color:transparent;
}
.cat-index a.active::after{
  content:""; position:absolute; left:0; top:calc(100% + 3px); height:2px;
  width:var(--progress,0%); background:var(--fg);
  transition:width .12s linear;
}
@media (max-width:640px){
  .cat-index{ font-size:10px; letter-spacing:.12em }
  .cat-index a{ padding:2px 8px }
}

main.story{
  max-width:var(--max); margin:0 auto;
  padding:36px clamp(16px,4vw,32px) 48px;
}
main.story .back{
  display:inline-block; font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
  text-decoration:none; margin-bottom:24px;
}
main.story .back:hover{color:var(--fg)}

main.story .kicker{
  font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--brand-red);
  margin:0 0 8px;
}
main.story h1{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(28px,4vw,42px); line-height:1.15;
  margin:0 0 16px; letter-spacing:-.01em;
}
main.story .byline{
  font-family:var(--mono); font-size:12px; color:var(--muted);
  margin:0 0 24px; padding-bottom:16px; border-bottom:1px solid var(--line);
}
main.story .byline span{margin:0 6px}
main.story .byline .score{color:var(--acc-green); font-weight:600}

main.story .lede{
  font-family:var(--serif); font-size:20px; line-height:1.5;
  color:var(--fg); margin:24px 0;
}

/* Story image — no src, alt only. We render the alt text in a tinted box
   so humans can still see the description; AI readers just read the attribute. */
.story-image{
  display:block; width:100%; max-width:100%; margin:28px 0;
  min-height:160px;
  background:#fafafa;
  border:1px solid var(--line); border-left:3px solid var(--fg);
  padding:16px 20px;
  font-family:var(--serif); font-size:15px; color:var(--fg-weak);
  line-height:1.5;
  /* Paint the alt text before/after hides the broken-image icon in Chrome/Safari */
  text-indent:0;
}
/* Hide the broken-image icon that Chrome/Safari sometimes draws on <img> with no src */
.story-image::before{content:""; display:block;}

.facts{
  margin:24px 0; padding:16px 20px; background:#f8f8f8;
  border-left:3px solid var(--line-strong);
}
.facts h3{
  margin:0 0 8px; font-family:var(--mono); font-size:11px;
  letter-spacing:.2em; text-transform:uppercase;
}
.facts ul{margin:0; padding-left:18px}
.facts li{margin:4px 0; font-family:var(--serif); font-size:15px}

.paywall-note{
  margin:24px 0; padding:12px 16px; background:#fff;
  border:1px solid #000; font-size:14px; color:#000;
}

.cta{margin:32px 0; text-align:center}
.read-original{
  display:inline-block; padding:14px 28px;
  background:var(--fg); color:#fff !important; text-decoration:none;
  font-family:var(--mono); font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; font-weight:600;
  border:2px solid var(--fg);
}
.read-original:hover{background:var(--brand-red); border-color:var(--brand-red)}

.tags{margin:32px 0 0; padding-top:16px; border-top:1px solid var(--line)}
.tags .tag{
  display:inline-block; margin:0 6px 6px 0; padding:4px 10px;
  background:#f4f4f4; font-family:var(--mono); font-size:11px;
  color:var(--fg-weak);
}
.tags a.tag-link{
  /* Tag chips that link to /entity/<slug>.html — visually distinct from
     plain spans so readers know they're navigable. Subtle: slightly
     darker text + cursor change + hover state. No underline (the chip
     shape carries the affordance). */
  text-decoration:none;
  color:var(--fg);
  background:#ececec;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.tags a.tag-link:hover{
  background:var(--fg);
  color:var(--bg);
  text-decoration:none;
}

.related{
  max-width:var(--max); margin:0 auto; padding:24px clamp(16px,4vw,32px);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.related h3{
  margin:0 0 12px; font-family:var(--mono); font-size:11px;
  letter-spacing:.2em; text-transform:uppercase;
}
.related ol{margin:0; padding-left:20px}
.related li{
  margin:8px 0; font-family:var(--serif); font-size:16px; line-height:1.35;
}
.related li a{text-decoration:none}
.related li a:hover{text-decoration:underline}
.related .src{
  display:block; margin-top:2px; font-family:var(--mono); font-size:10px;
  letter-spacing:.18em; color:var(--muted); text-transform:uppercase;
}

/* ── Site footer — exact match to index.html ────────────────────── */
/* Note: story content uses --max:780px but the footer matches the
   site-wide column width (1240px) so it looks identical on every page. */
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
footer{border-top:1px solid var(--line-strong);margin-top:72px;padding:40px 0 60px}
footer .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
footer h5{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;margin:0 0 12px;
}
footer p{color:var(--muted);font-size:14px;margin:0}
footer ul{list-style:none;padding:0;margin:0}
footer li{padding:4px 0;font-size:14px}
footer a{color:inherit;text-decoration:none}
footer a:hover{text-decoration:underline;text-underline-offset:3px}
footer .foot-contact{
  display:inline-block;margin-top:12px;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg);
  border-bottom:1px solid var(--fg);padding-bottom:1px;
  text-decoration:none;
}
footer .foot-contact:hover{text-decoration:none;opacity:.7}
footer .colophon{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
  display:flex;justify-content:space-between;margin-top:32px;
  padding-top:20px;border-top:1px solid var(--line);
}
/* footer colophon — KHAO logo mark, scaled down for the colophon row */
.colophon-logo{
  width:20px;height:20px;
  vertical-align:middle;margin-right:8px;
  display:inline-block;flex:none;
}
@media(max-width:900px){footer .foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){footer .foot-grid{grid-template-columns:1fr};footer .colophon{flex-direction:column;gap:8px;text-align:left;align-items:flex-start}}

/* ── Full-text section + per-day index ──────────────────────────── */
.full-text{margin:32px 0 8px}
.full-text .section-head, .day-index .section-head{
  margin:0 0 12px; font-family:var(--mono); font-size:11px;
  letter-spacing:.2em; text-transform:uppercase;
  padding-bottom:8px; border-bottom:1px solid var(--line-strong);
}
.full-text p{
  font-family:var(--serif); font-size:17px; line-height:1.65;
  margin:0 0 16px; color:var(--fg);
}

/* ── KHAO story summary (replaces raw full-text) ─────────────────── */
.story-summary{margin:32px 0 8px}
.story-summary .section-head{
  margin:0 0 12px; font-family:var(--mono); font-size:11px;
  letter-spacing:.2em; text-transform:uppercase;
  padding-bottom:8px; border-bottom:1px solid var(--line-strong);
}
.story-summary p{
  font-family:var(--serif); font-size:17px; line-height:1.65;
  margin:0 0 20px; color:var(--fg);
}

.day-index{
  max-width:var(--max); margin:0 auto;
  padding:24px clamp(16px,4vw,32px);
  border-top:1px solid var(--line);
}
.day-index ol{
  list-style:none; padding:0; margin:0; counter-reset:idx;
  display:grid; grid-template-columns:1fr 1fr; gap:6px 24px;
}
@media (max-width:720px){ .day-index ol{grid-template-columns:1fr} }
.day-index li{
  counter-increment:idx;
  padding:6px 0; border-bottom:1px dotted var(--line);
  display:grid; grid-template-columns:34px 1fr; gap:8px;
  font-family:var(--serif); font-size:14px; line-height:1.35;
}
.day-index li::before{
  content:counter(idx, decimal-leading-zero);
  font-family:var(--mono); font-size:11px; color:var(--muted);
}
.day-index li a{text-decoration:none; color:var(--fg)}
.day-index li a:hover{text-decoration:underline}
.day-index li.current{background:#fff8e6}
.day-index li.current a{color:var(--brand-red); font-weight:600}
.day-index li .src{
  display:inline; margin-left:8px; font-family:var(--mono);
  font-size:10px; letter-spacing:.14em; color:var(--muted);
  text-transform:uppercase;
}

@media (max-width:560px){
  main.story h1{font-size:26px}
  main.story .lede{font-size:17px}
  .topbar-inner{padding:12px 16px}
  .topnav{display:none}
  .datebar-inner{font-size:10px; flex-wrap:wrap; gap:6px; padding:10px 16px}
}

/* ── Topics page ────────────────────────────────────────────────── */
.topics-page .tags{ display:flex; flex-wrap:wrap; gap:6px 8px; margin:16px 0 28px; padding:0; border:0; }
.topics-page .tag-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; background:#f4f4f4; border:1px solid var(--line);
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  color:var(--fg-weak); text-decoration:none;
}
.topics-page .tag-chip:hover{ background:#fff8e6; color:var(--fg); }
.topics-page .tag-chip .tag-count{
  font-size:10px; background:var(--fg); color:#fff; padding:2px 6px;
  border-radius:2px; letter-spacing:.04em;
}
.topics-page .topic{ margin:36px 0; }
.topics-page .topic .section-head{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--serif); font-size:22px; letter-spacing:-.01em;
  text-transform:none; color:var(--fg); margin:0 0 12px;
  padding-bottom:8px; border-bottom:1px solid var(--line-strong);
}
.topics-page .topic .topic-count{
  font-family:var(--mono); font-size:11px; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.topics-page .topic-list{ list-style:none; padding:0; margin:0; }
.topics-page .topic-list li{
  padding:10px 0; border-bottom:1px dotted var(--line);
  font-family:var(--serif); font-size:16px; line-height:1.35;
}
.topics-page .topic-list a{ text-decoration:none; color:var(--fg); }
.topics-page .topic-list a:hover{ text-decoration:underline; }
.topics-page .topic-list .src{
  display:block; margin-top:3px; font-family:var(--mono);
  font-size:11px; letter-spacing:.14em; color:var(--muted);
  text-transform:uppercase;
}

/* ── In-body structure: headings, lists, TOC ─────────────────────────────── */
.story .full-text h2.body-head{
  font-family:var(--serif);
  font-size:24px; line-height:1.25; font-weight:700;
  margin:32px 0 10px; letter-spacing:-0.01em;
  color:var(--fg);
  scroll-margin-top:88px;
}
.story .full-text h3.body-subhead{
  font-family:var(--serif);
  font-size:19px; line-height:1.3; font-weight:700;
  margin:24px 0 8px; color:var(--fg);
  scroll-margin-top:88px;
}
.story .full-text ul.body-list{
  margin:12px 0 16px 0; padding-left:22px;
  font-family:var(--serif); font-size:17px; line-height:1.6;
}
.story .full-text ul.body-list li{ margin:4px 0; }
.story .full-text p{
  margin:0 0 14px 0;
  font-family:var(--serif); font-size:17px; line-height:1.65;
  color:var(--fg);
}

/* In-article "In this article" TOC */
.story .story-toc{
  margin:20px 0 28px; padding:14px 18px;
  border:1px solid var(--rule);
  background:#fafaf7;
}
.story .story-toc .section-head{
  margin:0 0 8px; font-family:var(--mono);
  font-size:11px; letter-spacing:.16em; color:var(--muted);
  text-transform:uppercase; font-weight:600;
}
.story .story-toc ol{
  margin:0; padding-left:18px;
  font-family:var(--serif); font-size:15px; line-height:1.5;
}
.story .story-toc ol li{ margin:2px 0; }
.story .story-toc ol li.toc-h3{ padding-left:14px; font-size:14px; color:var(--muted); }
.story .story-toc a{ color:var(--fg); text-decoration:none; }
.story .story-toc a:hover{ text-decoration:underline; }

/* Key facts section (rendered above full-text now) */
.story .facts{
  margin:20px 0 24px; padding:16px 20px;
  background:#fffceb; border-left:3px solid var(--accent, #c19a3b);
}
.story .facts h3{
  margin:0 0 8px; font-family:var(--mono);
  font-size:11px; letter-spacing:.16em; color:var(--muted);
  text-transform:uppercase; font-weight:600;
}
.story .facts ul{
  margin:0; padding-left:20px;
  font-family:var(--serif); font-size:16px; line-height:1.5;
}
.story .facts ul li{ margin:3px 0; }

/* ── Verification badge ──────────────────────────────────────────── */
.story .verify-badge{
  display:inline-flex; align-items:center; gap:6px;
  margin:4px 0 16px;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; font-weight:600;
  padding:4px 10px; border-radius:3px;
  cursor:default;
}
/* Verified — solid brand-red: highest confidence, deserves prominence */
.story .verify-verified{
  background:var(--brand-red); color:#fff;
  border:1px solid var(--brand-red);
}
/* Developing — solid black: confirmed but still being watched */
.story .verify-developing{
  background:var(--fg); color:var(--bg);
  border:1px solid var(--fg);
}
/* Single source — outlined only: low signal, no fill */
.story .verify-single-source{
  background:transparent; color:var(--muted);
  border:1px solid var(--line-strong);
}

/* ── UPDATE banner ──────────────────────────────────────────────── */
.story .update-banner{
  margin:0 0 16px;
  padding:10px 16px;
  background:var(--hover); color:var(--fg);
  border-left:3px solid var(--fg);
  font-family:var(--sans); font-size:14px; line-height:1.5;
}
.story .update-banner-label{
  font-family:var(--mono); font-size:10px; letter-spacing:.15em;
  font-weight:700; text-transform:uppercase;
  background:var(--brand-red); color:#fff;
  padding:2px 6px; border-radius:2px; margin-right:8px;
  vertical-align:1px;
}

/* ── Citation block ─────────────────────────────────────────────── */
.story .citation-block{
  margin:40px 0 0;
  padding:20px 24px;
  border-top:1px solid var(--line-strong);
  background:#fafafa;
}
.story .citation-heading{
  margin:0 0 12px;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); font-weight:600;
}
/* ── "Reported by" block ────────────────────────────────────────────
   Structure:
     <div.citation-outlets>
       <span.citation-label>Reported by</span>
       <div.citation-chiprow>
         <span.cite-chip>
           <a.cite-source[.cite-first]>Outlet</a>
           <time.cite-when>
             <span.cw-date>Apr 21</span>
             <span.cw-dot>·</span>
             <span.cw-time>18:30 UTC</span>
           </time>
         </span>
         ...more chips...
       </div>
     </div>

   Design notes:
   • Label sits on its own line above the chip row, styled as a quiet
     uppercase mono caption — matches the section heading rhythm.
   • Each chip is a two-row flex column: button on top, timestamp below.
   • Timestamp reads as ONE fact on ONE line ("Apr 21 · 18:30 UTC"),
     not two stacked words running into each other. The middle-dot
     visually joins date + time.
   • No middle-dot separator between chips — generous gap does the
     separation. The old single-dot-only-after-primary was inconsistent.
   • Chip width is natural (no clamping games); if the timestamp is
     wider than the button, the chip itself widens. Cleaner rhythm.
*/
.story .citation-outlets{
  margin:0 0 12px;
  color:var(--fg);
}
.story .citation-label{
  display:block;
  margin:0 0 8px;
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}
.story .citation-chiprow{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:12px 18px;
}
/* The chip is a 2-row inline-flex column. align-items:stretch makes
   both the button AND the timestamp row fill the chip's cross-axis
   width, which equals the width of the wider child (max-content of
   max(button, timestamp)). Net effect:
     • short name ("Wired")  → button grows to timestamp width
     • long name ("Ars Technica") → button stays natural, timestamp
       stretches to button width (timestamp text centers inside)
   So the chip button's minimum width is always the timestamp width,
   and long names cause no layout break. */
.story .cite-chip{
  display:inline-flex;
  flex-direction:column;
  align-items:stretch;
  gap:5px;
  line-height:1;
}
.story .cite-source{
  display:block;
  font-family:var(--mono); font-size:12px; font-weight:600;
  letter-spacing:.02em;
  padding:3px 9px; border-radius:3px;
  background:var(--fg); color:var(--bg);
  text-decoration:none;
  text-align:center;
  white-space:nowrap;
  transition:opacity .15s ease;
}
.story .cite-source:hover{ opacity:.82; }
.story .cite-source.cite-first{
  background:var(--brand-red);
}
.story .cite-when{
  display:flex; align-items:baseline; justify-content:center;
  font-family:var(--mono); font-size:10.5px;
  color:var(--muted-2);
  letter-spacing:.02em; line-height:1.2;
  white-space:nowrap;
  padding:0 2px;
}
.story .cite-when .cw-dot{
  padding:0 5px;
  color:var(--line);
}
.story .citation-apa{
  margin:0; font-size:13px; font-family:var(--mono); color:var(--muted);
  word-break:break-word; line-height:1.6;
}
.story .citation-disclaimer{
  margin:0 0 14px;
  padding:6px 0 6px 10px;
  border-left:2px solid var(--line);
  font-size:10.5px; font-style:italic;
  color:var(--muted);
  line-height:1.55;
}

/* ── "Compiled by KHAO Editorial" attribution (Task 114 AEO) ────── */
.story .compiled-by{
  font-family:var(--mono); font-size:11px; letter-spacing:.04em;
  color:var(--muted); margin:-6px 0 10px;
}
.story .compiled-by a{
  color:var(--fg); text-decoration:none;
  border-bottom:1px solid var(--line);
}
.story .compiled-by a:hover{border-bottom-color:var(--fg)}
.story .compiled-by strong{color:var(--fg); font-weight:700}
.story .compiled-by .compiled-hint{display:block; margin-top:2px; font-size:10px}

/* ── UPDATE badge on homepage cards ─────────────────────────────── */
/* (rendered in build.py render_card — lives here for story context,
   the identical block is in site.css for the homepage) */


/* ── Full coverage rail ─────────────────────────────────────────────
   Sits directly below the "Reported by" citation block. Lists every
   additional outlet that covered this story (discovered via Google
   News, body-fetched by coverage_fetcher). Each card: outlet name,
   publish timestamp, optional "partial" badge (paywall truncated),
   one-sentence excerpt, link out to the publisher.

   Purpose:
     1. Raise verification signal beyond our 50 ingested feeds.
     2. Make KHAO the canonical cross-publisher index so any agent
        or human visitor sees the full coverage map in one place.

   Structure:
     <aside.full-coverage>
       <h2.fc-heading>Full coverage</h2>
       <p.fc-intro>…context…</p>
       <div.fc-grid>
         <article.fc-card>
           <header.fc-head>
             <a.fc-outlet>Reuters</a>
             <time.fc-time>Apr 24 · 14:22 UTC</time>
             <span.fc-partial>partial</span>
           </header>
           <p.fc-excerpt>First sentence of the article body…</p>
         </article>
         …more cards…
       </div>
     </aside>
-------------------------------------------------------------------*/
.story .full-coverage{
  margin:24px 0 0;
  padding:20px 24px;
  border-top:1px solid var(--line);
  background:#fafafa;
}
.story .fc-heading{
  margin:0 0 6px;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); font-weight:600;
}
.story .fc-intro{
  margin:0 0 16px;
  font-size:13px; color:var(--muted); line-height:1.55;
  max-width:720px;
}
.story .fc-intro strong{color:var(--fg); font-weight:600}

.story .fc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:12px;
}
.story .fc-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:3px;
  padding:12px 14px;
  display:flex; flex-direction:column; gap:6px;
  transition:border-color .12s ease, background .12s ease;
}
.story .fc-card:hover{
  border-color:var(--line-strong, #bbb);
  background:#fff;
}
.story .fc-head{
  display:flex; align-items:baseline; gap:10px;
  flex-wrap:wrap;
}
.story .fc-outlet{
  color:var(--fg); text-decoration:none; font-weight:600;
  font-size:13.5px; line-height:1.3;
  border-bottom:1px dotted var(--line-strong, #bbb);
}
.story .fc-outlet:hover{
  border-bottom-style:solid;
  border-bottom-color:var(--fg);
}
.story .fc-time{
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.04em; color:var(--muted);
  white-space:nowrap;
}
.story .fc-partial{
  display:inline-block;
  font-family:var(--mono); font-size:9.5px;
  font-weight:700; letter-spacing:.08em;
  text-transform:uppercase;
  padding:2px 7px; border-radius:8px;
  background:#fcefe0; color:#9a4a00;
}
.story .fc-excerpt{
  margin:0;
  font-size:12.5px; line-height:1.5; color:var(--fg);
}
.story .fc-excerpt.fc-no-body{color:var(--muted); font-style:italic}

@media(max-width:640px){
  .story .full-coverage{padding:16px 18px}
  .story .fc-grid{grid-template-columns:1fr}
}