/* Khabri: the news, explained simply, as a story.
   Indigo ink on cool white paper, like an inland letter. Two rules run through every page:
   - the marigold mark means "you are here": the nameplate, the section showing, the page of a story showing;
   - a solid line is something that has happened, a dashed line something that has not (an empty place on the
     front page, a prediction).
   The interface speaks in a sans (Anek, drawn for Latin, Devanagari and Bengali alike); the stories are set in a serif. */

:root {
  color-scheme: light dark;

  /* Day edition / Night edition. light-dark() follows the OS; [data-theme] on <html> is the manual override. */
  --paper:   light-dark(#F4F6FB, #11132B);
  --paper-2: light-dark(#E5EAF5, #1C1F42);   /* tinted blocks: notes, the waiting panel */
  --field:   light-dark(#FFFFFF, #0B0D20);   /* inside a text box */
  --ink:     light-dark(#14174A, #E7EAF8);
  --muted:   light-dark(#4B5175, #A6ABCB);
  --rule:    light-dark(#B7C0DA, #3C4177);
  --mark:    light-dark(#FFC531, #FFC531);   /* marigold: you are here */
  --on-mark: light-dark(#14174A, #14174A);
  --accent:  light-dark(#2A39C7, #FFCB52);   /* links and section names */
  --focus:   light-dark(#2A39C7, #FFCB52);
  --alarm:   light-dark(#B3261E, #FF9C8F);   /* real problems: the funds banner, form errors */
  --ok:      light-dark(#1F6B4E, #7FCBA5);   /* a finished step */

  --font-ui:   "Anek Latin", "Anek Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: "Anek Latin", "Anek Head Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-text: "Source Serif 4", "Source Serif Fallback", Charter, "Iowan Old Style", Georgia, serif;
  --head-weight: 700;
  --head-tracking: -.012em;
  --head-leading: 1.06;

  /* fluid scale, 390px to 1440px */
  --step--1: clamp(0.8125rem, 0.78rem + 0.15vw, 0.9375rem);
  --step-0:  clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  --step-3:  clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);
  --step-4:  clamp(2.25rem, 1.55rem + 3vw, 4.25rem);
  --leading: 1.6;

  --space-3xs: .25rem; --space-2xs: .5rem; --space-xs: .75rem; --space-s: 1rem;
  --space-m: 1.5rem; --space-l: 2.25rem; --space-xl: 3.5rem; --space-2xl: 5rem;
  --gutter: clamp(1rem, .6rem + 1.6vw, 2.5rem);
  --page: 76rem;
  --measure: 40rem;

  --line: 2px solid var(--ink);
  --hairline: 1px solid var(--rule);
  --not-yet: 1.5px dashed var(--rule);
  --radius: 6px;                               /* things you press or type in; nothing else is rounded */
  --focus-ring: 2px solid var(--focus);
  --focus-offset: 3px;
  --ease: cubic-bezier(.2, 0, 0, 1);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* ---- the scripts the two Latin faces don't cover. The Latin face stays first, so numbers and names look the same. */
:lang(hi) { --font-text: "Source Serif 4", "Noto Serif Devanagari", "Kohinoor Devanagari", "Devanagari Sangam MN", Mangal, serif; --leading: 1.9;
  --font-head: "Anek Latin", "Anek Devanagari", "Kohinoor Devanagari", "Noto Sans Devanagari", Mangal, sans-serif; --head-leading: 1.3; --head-tracking: 0; }
:lang(bn) { --font-text: "Source Serif 4", "Noto Serif Bengali", "Kohinoor Bangla", "Bangla Sangam MN", Vrinda, serif; --leading: 1.9;
  --font-head: "Anek Latin", "Anek Bangla", "Kohinoor Bangla", "Noto Sans Bengali", Vrinda, sans-serif; --head-leading: 1.3; --head-tracking: 0; }
:lang(ar) { --font-text: "Source Serif 4", "Noto Naskh Arabic", "Geeza Pro", "Traditional Arabic", "Segoe UI", serif; --leading: 2;
  --font-head: "Anek Latin", "Noto Naskh Arabic", "Geeza Pro", "Traditional Arabic", "Segoe UI", serif; --head-leading: 1.6; --head-tracking: 0; }
:lang(ur) { --font-text: "Source Serif 4", "Noto Nastaliq Urdu", "Jameel Noori Nastaliq", "Noto Naskh Arabic", "Geeza Pro", serif; --leading: 2.45;
  --font-head: "Anek Latin", "Noto Nastaliq Urdu", "Jameel Noori Nastaliq", "Noto Naskh Arabic", "Geeza Pro", serif; --head-leading: 1.9; --head-tracking: 0; --head-weight: 400; }
:lang(ja) { --font-text: "Source Serif 4", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif CJK JP", "Noto Serif JP", "MS PMincho", serif; --leading: 1.95;
  --font-head: "Anek Latin", "Hiragino Sans", "Yu Gothic", YuGothic, "Noto Sans CJK JP", "Noto Sans JP", Meiryo, sans-serif; --head-leading: 1.3; --head-tracking: 0; }
/* Interface labels written in other scripts (the language names) use the device's own fonts.
   Otherwise an English page would download the Devanagari, Bengali and Arabic faces just to print a language list. */
.also-in [lang], select option[lang] { font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans", sans-serif; }
:lang(ja) em, :lang(ur) em, :lang(ar) em, :lang(hi) em, :lang(bn) em { font-style: normal; text-emphasis: dot; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--space-m); scrollbar-gutter: stable; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-ui); font-size: var(--step-0); line-height: 1.45;
  min-height: 100vh; display: flex; flex-direction: column;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
main { flex: 1 0 auto; }
img, svg { max-width: 100%; }
h1, h2, h3, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--accent); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover, a:focus-visible { text-decoration-thickness: 2px; }
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
::selection { background: var(--mark); color: var(--on-mark); }
.sr, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--gutter); top: var(--space-2xs); z-index: 10; background: var(--ink); color: var(--paper); padding: var(--space-2xs) var(--space-s); }
[hidden] { display: none !important; }
.muted { color: var(--muted); }

/* headlines: narrow and heavy, in the sans of whichever script the story is in */
.item-title, .story-head h1, .page-title, .slider-strip a, .tab-name {
  font-family: var(--font-head); font-weight: var(--head-weight); font-stretch: 85%; letter-spacing: var(--head-tracking); line-height: var(--head-leading);
}
/* the words of a story: the serif */
.item-summary, .dek, .narrative { font-family: var(--font-text); font-variant-numeric: oldstyle-nums; }
:lang(ja), :lang(ar), :lang(ur), :lang(hi), :lang(bn) { font-variant-numeric: normal; }

/* ---------------------------------------------------------------- the funds banner (a real problem, so it may be loud) */
.banner { background: var(--paper-2); color: var(--ink); border-block: 2px solid var(--alarm); padding: var(--space-xs) var(--gutter); font-size: var(--step--1); text-align: center; }

/* ---------------------------------------------------------------- masthead: the nameplate on the left, the reader's controls on the right */
.masthead { max-width: var(--page); width: 100%; margin-inline: auto; padding: var(--space-s) var(--gutter); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-m); }
.wordmark { display: inline-flex; align-items: center; gap: .45em; color: var(--ink); text-decoration: none; font-weight: 800; font-size: clamp(1.5rem, 1.3rem + .9vw, 2.125rem); line-height: 1; letter-spacing: .02em; }
.wordmark .hi { background: var(--mark); color: var(--on-mark); padding: .3em .42em .2em; letter-spacing: 0; font-family: "Khabri Mark", "Kohinoor Devanagari", "Noto Sans Devanagari", system-ui, sans-serif; }
.wordmark:hover .en, .wordmark:focus-visible .en { color: var(--accent); }
.strap { color: var(--muted); font-size: var(--step--1); }
.corner { margin-inline-start: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-3xs) var(--space-m); font-size: var(--step--1); }
.today { color: var(--muted); }
.controls, .staff { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3xs) var(--space-s); }
.controls form, .staff form { margin: 0; }
.controls .theme-toggle, .staff a, .staff button { color: var(--ink); font: inherit; font-weight: 500; background: none; border: 0; padding: 0; cursor: pointer; text-decoration-line: none; display: inline-flex; align-items: center; gap: .45em; min-height: 2.25rem; }
.controls .theme-toggle:hover, .staff a:hover, .staff button:hover { text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: .25em; }
.staff a { font-weight: 700; }
.ico { flex: none; inline-size: 1.25em; block-size: 1.25em; }
/* the icon shows the edition a tap would switch to: a moon by day, a sun by night (the OS setting, unless [data-theme] says otherwise) */
.theme-toggle .ico-sun { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .ico-moon { display: none; } :root:not([data-theme="light"]) .theme-toggle .ico-sun { display: block; } }
:root[data-theme="dark"] .theme-toggle .ico-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .ico-sun { display: block; }
.read-in { position: relative; display: flex; align-items: center; gap: .5em; }
.read-in label { display: inline-flex; align-items: center; gap: .45em; color: var(--muted); }
.read-in select { width: auto; padding-block: .25em; }
.lbl { white-space: nowrap; }
@media (max-width: 62rem) { .strap { display: none; } }
@media (max-width: 48rem) { .today { display: none; } }
@media (max-width: 40rem) {
  /* a phone: each control is a 44px icon. The words go to screen readers only; the <select> is stretched, invisible, over the globe. */
  .masthead { padding-block: var(--space-2xs); }
  .corner { gap: 0 var(--space-s); }
  .controls { flex-wrap: nowrap; gap: 0; margin-inline-end: -.5rem; }
  .lbl { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .controls .theme-toggle, .read-in { inline-size: 2.75rem; block-size: 2.75rem; justify-content: center; }
  .read-in label { color: var(--ink); }
  .read-in select { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; color: transparent; background: transparent; padding: 0; border: 0; cursor: pointer; } /* invisible but live: no opacity, which the contrast test forbids */
  .read-in:has(select:focus-visible) { outline: var(--focus-ring); outline-offset: -2px; }
  .read-in:has(select:focus-visible) select { outline: none; }
  .read-in noscript .btn { position: absolute; inset-block-start: 100%; inset-inline-end: 0; }
  .ico { inline-size: 1.4rem; block-size: 1.4rem; }
  .staff { flex-basis: 100%; justify-content: flex-end; order: 2; }
}
@media (pointer: coarse) { .staff a, .staff button, .back a, .more a, .block-title a, .kicker a, .item-pages a, .controls .theme-toggle { min-height: 2.75rem; } }

/* ---------------------------------------------------------------- page frames */
.frame { max-width: var(--page); width: 100%; margin-inline: auto; padding: var(--space-xs) var(--gutter) var(--space-xl); }
/* every page hangs from the nameplate's left edge */
.listing { max-width: 44rem; }
.listing.wide { max-width: none; }
.narrow { max-width: 26rem; padding-top: var(--space-m); }
.page-title { font-size: var(--step-4); margin-bottom: var(--space-s); text-wrap: balance; }
.narrow .page-title, #composer .page-title { font-size: var(--step-3); }
.lede { color: var(--muted); max-width: 40rem; margin-bottom: var(--space-m); }
.empty { padding: var(--space-l) 0; color: var(--muted); }

/* ---------------------------------------------------------------- the front page: a slider, one page per section
   The section names are the front page's headline: big, in a row, the one showing under the marigold mark.
   The pages sit side by side in a scroll-snap track, so a swipe moves between them with no script at all. The script adds
   the arrows, keeps the current name marked, and fits the track's height to the page showing. */
.slider-bar { display: flex; align-items: center; gap: var(--space-3xs); border-bottom: var(--line); }
.slider-strip { position: relative; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.slider-strip::-webkit-scrollbar { display: none; }
.slider-strip ul { display: flex; gap: 0 var(--space-3xs); width: max-content; }
.slider-strip a { display: inline-flex; align-items: center; gap: .3em; min-block-size: 3rem; padding: .3em .5em .2em; font-size: clamp(1.375rem, 1.2rem + .55vw, 1.625rem); color: var(--muted); text-decoration: none; white-space: nowrap; }
.slider-strip a[data-has] { color: var(--ink); }
.slider-strip a:hover { text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.slider-strip a[aria-current] { background: var(--mark); color: var(--on-mark); }
.slider-strip .count { align-self: flex-start; margin-top: .35em; font-family: var(--font-ui); font-size: var(--step--1); font-weight: 600; font-stretch: 100%; letter-spacing: 0; line-height: 1; }
.slider-btn { flex: none; display: inline-grid; place-items: center; inline-size: 2.5rem; block-size: 2.75rem; background: none; border: 0; border-radius: var(--radius); padding: 0; cursor: pointer; color: var(--ink); font-size: var(--step-1); }
.slider-btn:hover:not(:disabled), .slider-btn:focus-visible { background: var(--paper-2); }
.slider-btn:disabled { color: var(--rule); cursor: default; }
@media (max-width: 40rem) { .slider-btn { display: none; } } /* a phone swipes, and the names take the whole row */
.slides {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 100%; align-items: start;
  overflow-x: auto; overflow-y: clip; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  block-size: var(--slide-h, auto);
}
.slides::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: no-preference) { .slides { scroll-behavior: smooth; } }
.slides:focus-visible { outline-offset: 0; }
/* scroll-margin: a link to #sec-… moves the track sideways but leaves the page at its top, the masthead in view */
.slide { scroll-snap-align: start; scroll-snap-stop: always; scroll-margin-top: 100vh; min-width: 0; padding-inline: 2px; padding-bottom: 2px; }

/* under the names: which section this is (a link to all of it) and how much is in it */
.slide-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-xs); padding-block: var(--space-xs) var(--space-s); font-size: var(--step--1); color: var(--muted); }
.block-title { font: inherit; font-weight: 700; }
.block-title a, .kicker a { color: var(--accent); text-decoration-line: none; display: inline-flex; align-items: center; min-height: 2rem; }
.block-title a:hover, .block-title a:focus-visible, .kicker a:hover, .kicker a:focus-visible { text-decoration-line: underline; }

/* eleven places. On a wide screen: the lead and two beside it, then two rows of four. In between: the lead, then pairs.
   On a phone: one story a row, and the empty places two to a row so they do not make the page long. */
.slide .items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: var(--space-m) var(--space-s); }
.slide .items > .item, .slide .items > :first-child { grid-column: 1 / -1; }
@media (min-width: 40rem) {
  .slide .items { gap: var(--space-l) var(--space-m); }
  .slide .items > .item { grid-column: auto; }
  .slide .items > :first-child { grid-column: 1 / -1; }
}
@media (min-width: 62rem) {
  .slide .items { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .slide .items > .item, .slide .items > .slot { grid-column: span 3; }
  .slide .items > :first-child { grid-column: span 7; grid-row: span 2; }
  .slide .items > :nth-child(2), .slide .items > :nth-child(3) { grid-column: span 5; }
}
/* a place with no story yet: an empty box, about as tall as a summary */
.slot { min-block-size: 4.75rem; border: var(--not-yet); }

/* one story in a list. The headline's link is stretched over the whole item, so the item is the tap target. */
.item { position: relative; border-top: var(--line); padding-top: var(--space-xs); }
.item-title { font-size: var(--step-1); text-wrap: balance; }
.item-title a { color: var(--ink); text-decoration-line: none; }
.item-title a::after { content: ""; position: absolute; inset: 0; }
.item:hover .item-title a { text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
.item-title a:focus-visible { outline: none; text-decoration-line: underline; }
.item:has(.item-title a:focus-visible) { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.item-summary { margin-top: var(--space-2xs); font-size: .9em; line-height: 1.5; text-wrap: pretty; }
.item-summary:lang(hi), .item-summary:lang(bn), .item-summary:lang(ja) { line-height: 1.75; }
.item-summary:lang(ar) { line-height: 1.9; }
.item-summary:lang(ur) { line-height: 2.3; }
.item-meta { margin-top: var(--space-2xs); display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-s); font-size: var(--step--1); color: var(--muted); }
/* the lead story of a section also opens straight on its other two pages */
.item-pages { position: relative; z-index: 1; display: flex; gap: var(--space-s); }
.item-pages a { display: inline-flex; align-items: center; min-height: 1.75rem; font-weight: 600; }
.item-pages a[data-page="future"], .onward a[data-onward="future"] .tab-name { text-decoration-line: underline; text-decoration-style: dashed; text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
.slide .items > .item:first-child .item-title { font-size: var(--step-4); line-height: calc(var(--head-leading) - .04); }
.slide .items > .item:first-child .item-summary { margin-top: var(--space-xs); font-size: var(--step-1); line-height: 1.4; max-width: 36em; }
.slide .items > .item:first-child .item-summary:lang(hi), .slide .items > .item:first-child .item-summary:lang(bn), .slide .items > .item:first-child .item-summary:lang(ja) { line-height: 1.7; }
.slide .items > .item:first-child .item-summary:lang(ar) { line-height: 1.9; }
.slide .items > .item:first-child .item-summary:lang(ur) { line-height: 2.3; }

.more { margin-top: var(--space-m); font-size: var(--step--1); font-weight: 600; }
.more a { display: inline-flex; align-items: center; min-height: 2rem; }
/* at the foot of a section's page: on to the next one, or back */
.slide-nav { display: flex; justify-content: space-between; gap: var(--space-s); margin-top: var(--space-l); padding-top: var(--space-2xs); border-top: var(--hairline); font-weight: 600; }
.slide-nav a { display: inline-flex; align-items: center; gap: .4em; min-height: 2.75rem; color: var(--ink); text-decoration-line: none; }
.slide-nav a:hover, .slide-nav a:focus-visible { text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: .25em; }
.slide-nav .next { margin-inline-start: auto; }

/* a section's own page: every story in it */
.listing.wide .items { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-l) var(--space-l); margin-top: var(--space-m); }
@media (min-width: 52rem) { .listing.wide .items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.listing.wide .item-title { font-size: var(--step-2); }
.pager { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-s); border-top: var(--hairline); padding-top: var(--space-s); margin-top: var(--space-l); font-size: var(--step--1); font-weight: 600; }

/* ---------------------------------------------------------------- back */
.back { font-size: var(--step--1); font-weight: 600; margin-bottom: var(--space-s); }
.arrow { margin-inline-end: .4em; }
.back a { color: var(--muted); text-decoration-line: none; display: inline-flex; align-items: center; min-height: 2rem; }
.back a:hover, .back a:focus-visible { color: var(--ink); text-decoration-line: underline; }
.back.end { margin-top: var(--space-xl); margin-bottom: 0; }

/* ---------------------------------------------------------------- the article
   The headline runs the width of the page. Under it, the three pages of the story share one switch, which stays at the top
   of the window while the reader scrolls. On a wide screen the notes about the story sit beside the text; on a phone, after it. */
.kicker { font-weight: 700; margin-bottom: var(--space-3xs); }
.story-head h1 { font-size: var(--step-4); line-height: calc(var(--head-leading) - .04); text-wrap: balance; max-width: 22em; }
/* Nastaliq and Naskh are tall and wide: the same size as the Latin headline would fill the screen */
.story-head h1:lang(ur), .story-head h1:lang(ar) { font-size: var(--step-3); max-width: none; }
.slide .items > .item:first-child .item-title:lang(ur), .slide .items > .item:first-child .item-title:lang(ar) { font-size: var(--step-2); }
.dek { margin-top: var(--space-s); font-size: var(--step-1); line-height: 1.42; text-wrap: pretty; max-width: var(--measure); }
.dek:lang(hi), .dek:lang(bn), .dek:lang(ja) { line-height: 1.7; }
.dek:lang(ar) { line-height: 1.9; }
.dek:lang(ur) { line-height: 2.3; }
.dateline { margin-top: var(--space-s); font-size: var(--step--1); color: var(--muted); }
.notices { margin-top: var(--space-m); max-width: var(--measure); }
.notice { border-inline-start: 4px solid var(--mark); padding: var(--space-xs) var(--space-s); font-size: var(--step--1); background: var(--paper-2); }
.notice + .notice { margin-top: var(--space-2xs); }
.notice .btn { margin-block: var(--space-2xs); }
.story-body { margin-top: var(--space-l); display: grid; grid-template-columns: minmax(0, var(--measure)); gap: var(--space-l) var(--space-xl); }
@media (min-width: 64rem) {
  .story-body { grid-template-columns: minmax(0, var(--measure)) minmax(0, 18rem); justify-content: space-between; }
  .story-foot { align-self: start; position: sticky; top: var(--space-m); }
}
.story-text { min-width: 0; scroll-margin-top: 0; }

/* the three pages of a story: History, Prediction, News. Links; with the script they switch in place. */
.tabs { position: sticky; top: 0; z-index: 3; background: var(--paper); border-bottom: var(--line); }
.tabs ul { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.tabs a { display: flex; flex-direction: column; justify-content: center; gap: .1em; block-size: 100%; min-block-size: 3.25rem; padding: .45em .6em .35em; color: var(--ink); text-decoration: none; }
.tab-name { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.75rem); }
.tab-hint { font-size: var(--step--1); line-height: 1.2; color: var(--muted); }
.tabs a:hover .tab-name { text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.tabs a[aria-current] { background: var(--mark); color: var(--on-mark); }
.tabs a[aria-current] .tab-hint { color: var(--on-mark); }
.tabs a:focus-visible { outline-offset: -2px; }
.panel[hidden] { display: none; }
.panel-note { margin-top: var(--space-m); display: flex; flex-wrap: wrap; gap: 0 .8em; font-size: var(--step--1); color: var(--muted); }
.panel-note .muted { white-space: nowrap; }
/* a prediction has not happened: it says so in a box of its own, with the dashed line */
.panel[data-panel="future"] .panel-note { color: var(--ink); background: var(--paper-2); border-inline-start: 3px dashed var(--accent); padding: var(--space-xs) var(--space-s); }
.narrative { margin-top: var(--space-s); line-height: var(--leading); }
.narrative p { margin-block: 1em; text-wrap: pretty; hanging-punctuation: first; }
.narrative > p:first-child { font-size: var(--step-1); }
.narrative hr.scene { border: 0; margin: var(--space-l) 0; text-align: center; color: var(--muted); }
.narrative hr.scene::before { content: "\2042"; }
.narrative strong { font-weight: 700; }
/* at the end of a page, the other two */
.onward { margin-top: var(--space-xl); }
.onward-title { font-size: var(--step--1); font-weight: 600; color: var(--muted); margin-bottom: var(--space-2xs); }
.onward ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-s); }
.onward a { display: flex; flex-direction: column; gap: .15em; block-size: 100%; padding: var(--space-xs) 0 var(--space-2xs); border-top: var(--line); color: var(--ink); text-decoration: none; }
.onward a[data-onward="future"] { border-top-style: dashed; }
.onward a:hover .tab-name { text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.onward a[data-onward="future"]:hover .tab-name { text-decoration-style: solid; }

.story-foot { display: grid; gap: var(--space-m); font-size: var(--step--1); color: var(--muted); }
.story-foot > * { border-top: var(--hairline); padding-top: var(--space-xs); }
.disclosure strong { color: var(--ink); font-weight: 700; }
.also-in h2 { font-size: inherit; font-weight: 700; color: var(--ink); margin-bottom: var(--space-3xs); }
.also-in ul { display: flex; flex-wrap: wrap; gap: .1em var(--space-s); font-size: var(--step-0); }
.also-in a { display: inline-block; padding-block: .2em; }
.also-in [aria-current] { display: inline-block; margin-block: .1em; padding: .1em .35em; background: var(--mark); color: var(--on-mark); }
.translate { margin-top: var(--space-s); }
.translate label { display: block; margin-bottom: var(--space-3xs); }
.translate .row { display: flex; gap: var(--space-2xs); max-width: 22rem; }
.translate select { flex: 1; min-width: 0; }
.takedown { color: var(--ink); }

/* ---------------------------------------------------------------- form controls */
input, select, textarea, button { font: inherit; color: inherit; }
input[type="search"], input[type="text"], input[type="password"], input:not([type]), select, textarea {
  width: 100%; background-color: var(--field); border: 1px solid var(--muted); border-radius: var(--radius); padding: .5em .7em; line-height: 1.35;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: var(--focus-ring); outline-offset: 1px; border-color: var(--focus); }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 1.05em) 55%, calc(100% - .75em) 55%; background-size: .3em .3em; background-repeat: no-repeat; padding-inline-end: 2em; cursor: pointer; }
select option { background: var(--paper); color: var(--ink); }
.btn, button.btn, a.btn {
  display: inline-block; cursor: pointer; text-decoration: none; text-align: center;
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink); border-radius: var(--radius);
  padding: .5em 1.15em; font-weight: 700; line-height: 1.35;
}
.btn:hover:not(:disabled), .btn:focus-visible { background: var(--accent); border-color: var(--accent); text-decoration: none; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.quiet { background: transparent; color: var(--ink); border-color: var(--muted); }
.btn.quiet:hover:not(:disabled), .btn.quiet:focus-visible { border-color: var(--ink); background: var(--paper-2); color: var(--ink); }
.btn.danger { background: transparent; color: var(--alarm); border-color: var(--alarm); }
.btn.danger:hover:not(:disabled), .btn.danger:focus-visible { background: var(--alarm); border-color: var(--alarm); color: var(--paper); }
.stack { display: grid; gap: var(--space-s); }
.stack label { display: grid; gap: var(--space-3xs); font-weight: 600; }
.stack label input { font-weight: 400; }
form.inline { display: inline; }
.hint { font-size: var(--step--1); color: var(--muted); margin-top: var(--space-2xs); }
.ok { color: var(--ok); }
.error { color: var(--alarm); font-weight: 600; }

/* ---------------------------------------------------------------- the editor's desk */
#composer #topic { font-size: var(--step-1); padding: .55em .7em; }
.pending-panel { background: var(--paper-2); padding: var(--space-m); }
.pending-panel h2 { font-size: var(--step-1); font-weight: 700; }
.stages { display: grid; gap: var(--space-2xs); margin: var(--space-s) 0; counter-reset: stage; }
.stages li { display: flex; gap: var(--space-xs); align-items: baseline; color: var(--muted); counter-increment: stage; }
.stages li[data-state="done"] { color: var(--ink); }
.stages li[data-state="now"] { color: var(--ink); font-weight: 700; }
.stages li::before { content: counter(stage); flex: none; display: inline-grid; place-items: center; inline-size: 1.6em; block-size: 1.6em; font-size: var(--step--1); font-weight: 700; border: var(--not-yet); border-color: var(--muted); }
.stages li[data-state="done"]::before { content: "\2713"; color: var(--ok); border: 1.5px solid var(--ok); }
.stages li[data-state="now"]::before { background: var(--mark); color: var(--on-mark); border: 1.5px solid var(--mark); }
progress { width: 100%; height: .6rem; accent-color: var(--accent); }
.section-title { font-size: var(--step-1); font-weight: 700; margin: var(--space-xl) 0 var(--space-xs); padding-top: var(--space-xs); border-top: var(--line); }
.recent li { padding: .5em 0; border-bottom: var(--hairline); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-s); }
.recent a { color: var(--ink); font-weight: 600; }
.recent .muted { font-size: var(--step--1); }
h2:focus { outline: none; }

/* ---------------------------------------------------------------- footer */
footer.site { flex: none; border-top: var(--hairline); margin-top: var(--space-l); padding: var(--space-m) var(--gutter) var(--space-l); color: var(--muted); font-size: var(--step--1); }
footer.site .in { max-width: calc(var(--page) - 2 * var(--gutter)); margin-inline: auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs) var(--space-l); }
footer.site p { max-width: 44rem; }
footer.site a { color: var(--muted); }

/* ---------------------------------------------------------------- motion: cross-document View Transitions, CSS only */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: 220ms; animation-timing-function: var(--ease); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 120ms; }
.story-head h1 { view-transition-name: head; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .item:has(.item-title a:focus-visible) { outline-color: Highlight; }
  .slider-strip a[aria-current], .tabs a[aria-current], .also-in [aria-current] { outline: 2px solid Highlight; outline-offset: -2px; }
  progress { forced-color-adjust: auto; }
}
@media print {
  .masthead .corner, .back, .tabs, .onward, .also-in, .takedown, footer.site { display: none; }
  body { background: #fff; color: #000; }
}