/* Front Matter — the newspaper front page.
 *
 * Every value comes from docs/design-language.md. No hex values:
 * colours come from theme-quiet-editorial.css only.
 *
 * THE FRAME. This is a list page, not a post page, so it does not carry
 * the post frame. The content is one 934px measure, centred, and the
 * control rail is fixed to the window's right edge rather than taking a
 * track. The reading column of a POST is untouched by any of this.
 */

* { box-sizing: border-box; }

html { background: var(--wc-paper); }

body {
  margin: 0;
  background: var(--wc-paper);
  color: var(--wc-ink);
  font-family: var(--wc-serif);
  font-size: 18px;
  transition: background var(--wc-dur-base) var(--qe-ease),
              color var(--wc-dur-base) var(--qe-ease);
}

.mono { font-family: var(--wc-mono); }
.quiet { color: var(--wc-faint) !important; }

/* ── header bar — locked ────────────────────────────────────── */

/* The header's inset resolves to the same edge as the frame below it.
   A fixed inset would give the page two different left edges. */
.topbar {
  --frame: 934px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 21px max(32px, calc((100% - var(--frame)) / 2));
  border-bottom: 1px solid var(--wc-line);
}

/* The bar's LAYOUT only. Its type, its colours and its travelling rule
   are locked and live in navbar.css, which loads before this file.
   
   navbar.css sets `.nav { gap: 26px }` and stops there, because on a
   post page `post.css` supplies the flex box underneath it. A list page
   never loads post.css, so without these three lines the links stack
   into one another with the gap doing nothing — which is exactly how it
   first rendered. The division is deliberate: layout here, type there,
   and neither file repeats the other. */
.nav {
  display: flex;
  align-items: center;
}

.nav a {
  color: inherit;
  text-decoration: none;
}

/* The wordmark, the nav links and the travelling rule are NOT here.
   They are locked by docs/design-docs/navbar.md and live in
   service/public/navbar.css, which every page on the site loads. The
   prototype carried its own copy because it had no service behind it.
   Two copies of a locked rule is how a lock drifts.

   navbar.css loads BEFORE this file, so the .topbar padding above wins.
   That is deliberate: navbar.css sets a fixed 48px inset, and its own
   comment says that value is post.css's. A list page needs the inset to
   resolve to the frame's edge instead, which is criterion 2 of the
   Daemon lock — one left edge and one right edge for the whole page. */

/* ── the frame ──────────────────────────────────────────────── */

.frame { width: 934px; margin: 0 auto; padding: 32px 0 40px; }

/* ── the masthead ───────────────────────────────────────────── */

.masthead { padding: 10px 0 0; }
.mast { display: block; width: 100%; height: auto; }

/* TWO-LINE LETTERING. Three passes over the same word:
     p1  a heavy ink stroke WITH fill — a fattened solid letter
     p2  a paper stroke cutting ONE channel along the contour
     p3  the plain glyph, restoring the ink centre
   The eye reads two ink lines with one paper line between them.

   Three passes, not four. A fourth pass cuts a second channel, and the
   letter then reads as four lines rather than two — which is one more
   than the reference has.

   The weight is 400, not 700. At 700 the stem is so fat that the
   channel never reaches its centre and the letter stays a solid mass
   with a hairline on it. The intuition is backwards: a lighter face
   gives a stronger doubling. */
.mast text {
  font-family: var(--wc-mono);
  font-size: 150px;
  font-weight: 400;
  letter-spacing: 20px;
  text-anchor: middle;
}
.mast .letters { stroke-linejoin: round; }

/* The masthead carries the publication's own colour. It is the one
   place on the site that does — a nameplate is allowed a signature, and
   nothing else uses this token. */
.mast .p1 { fill: var(--qe-mast); stroke: var(--qe-mast); stroke-width: 32px; }
.mast .p2 { fill: none;           stroke: var(--wc-paper); stroke-width: 16px; }
.mast .p3 { fill: var(--qe-mast); }

/* The stop takes the same three passes, scaled down. At the word's own
   widths it stops reading as punctuation and starts reading as a
   target. */
.mast .s1 { fill: var(--qe-mast); stroke: var(--qe-mast); stroke-width: 22px; }
.mast .s2 { fill: none;           stroke: var(--wc-paper); stroke-width: 11px; }
.mast .s3 { fill: var(--qe-mast); }

/* One character at a time. The rect is clipped to the word's own box,
   which is measured once in articles.js so it never drifts when the
   webfont lands or the name changes. */
/* The finished state is the BASE state. An animation must never be the
   only thing that makes content visible — a tab opened in the
   background runs no animations, and the masthead would simply not be
   there. The reveal plays from zero over the top of a word that is
   already present. */
#mastrect { width: var(--mast-w, 760px); animation: masttype 420ms steps(6) 240ms both; }
@keyframes masttype { from { width: 0; } to { width: var(--mast-w, 760px); } }

/* The stop waits out the typing, blinks six times, then rests SOLID.
   Two things this has to get right. Its base state is visible, so a tab
   that runs no animations still shows it. And the blink's last keyframe
   is the lit one, so six blinks cannot leave the page holding a stop
   that is switched off. */
.mast .stop { opacity: 1; animation: mastblink 1060ms steps(1) 900ms 6 both; }
@keyframes mastblink { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } }

/* the two solid lines */
.rules {
  height: 4px;
  border-top: 1px solid var(--wc-ink);
  border-bottom: 1px solid var(--wc-ink);
  margin-top: 10px;
}

/* ── the lead ───────────────────────────────────────────────── */

.lead { display: grid; grid-template-columns: 614px 294px; gap: 26px; padding: 28px 0 0; }

.decks { border-right: 1px solid var(--wc-line); padding-right: 26px; }

.story { display: block; text-decoration: none; color: inherit; cursor: pointer; }
.story .hl,
.story .hl2 { transition: color var(--wc-dur-fast) var(--qe-ease); }
.story:hover .hl,
.story:hover .hl2 { color: var(--wc-accent); }

.kicker {
  font-family: var(--wc-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--wc-accent);
}
.kicker.quiet { color: var(--wc-faint) !important; }

.hl { font-size: 38px; line-height: 1.1; font-weight: 400; margin-top: 9px; color: var(--wc-ink); }
.hl2 { font-size: 24px; line-height: 1.15; font-weight: 400; margin-top: 6px; color: var(--wc-ink); }

.stand { font-size: 17px; font-style: italic; line-height: 1.5; color: var(--wc-muted); margin-top: 10px; }
.stand.sm { font-size: 15px; margin-top: 7px; }

.excerpt { font-size: 16px; line-height: 1.68; color: var(--wc-body); margin: 13px 0 0; }
.excerpt .on { color: var(--wc-accent); }

.meta { font-size: 12px; color: var(--wc-faint); margin-top: 9px; font-variant-numeric: tabular-nums; }

.second {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--wc-ink);
}
.second .ruled { border-left: 1px solid var(--wc-line); padding-left: 24px; }

/* the record, not the judgement */
.colhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--wc-ink);
}
.sec {
  font-family: var(--wc-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wc-accent);
}
.by { font-family: var(--wc-mono); font-size: 10px; color: var(--wc-faint); }

.lrow {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  padding: 14px 0;
  border-bottom: 1px solid var(--wc-line);
}
.lrow.last { border-bottom: 0; }
.lmeta { font-family: var(--wc-mono); font-size: 11px; color: var(--wc-faint); }
.lt {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.28;
  margin-top: 4px;
  transition: color var(--wc-dur-fast) var(--qe-ease);
}
.lrow:hover .lt { color: var(--wc-accent); }
.lv { font-family: var(--wc-mono); font-size: 11px; color: var(--wc-accent); margin-top: 4px; }

/* ── the section bands ──────────────────────────────────────── */

/* A band, not a line of text. Three things separate it from the cards:
   a double rule above, a panel ground under it, and 30px type where a
   card uses 19px. */
.band {
  display: flex;
  align-items: baseline;
  gap: 16px;
  background: var(--wc-panel);
  border-top: 3px double var(--wc-ink);
  padding: 15px 18px;
  margin-top: 34px;
}
.bname { font-size: 30px; font-weight: 400; line-height: 1.05; color: var(--wc-ink); }
.bn { font-family: var(--wc-mono); font-size: 11px; color: var(--wc-faint); }

/* One exit per section. Three rows is the whole front-page allowance,
   and past three the reader opens the section as its own page. */
.open {
  margin-left: auto;
  font-family: var(--wc-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wc-accent);
  border: 1px solid var(--wc-line-strong);
  border-radius: 4px;
  padding: 6px 12px;
  background: var(--wc-paper);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--wc-dur-fast) var(--qe-ease);
}
.open:hover { border-color: var(--wc-accent); }

.sbody { padding: 20px 18px 24px; }
.sbody.last { border-bottom: 3px double var(--wc-ink); }

/* ── a series row ───────────────────────────────────────────── */

.srow {
  display: grid;
  grid-template-columns: 214px 1fr;
  gap: 24px;
  padding: 18px 0;
  border-top: 1px solid var(--wc-line);
}
.srow:first-child { border-top: 0; padding-top: 4px; }

.sname { font-size: 20px; font-weight: 500; line-height: 1.2; }
.sdesc { font-size: 14px; font-style: italic; line-height: 1.5; color: var(--wc-muted); margin-top: 5px; }
.sn { font-family: var(--wc-mono); font-size: 11px; color: var(--wc-accent); margin-top: 9px; }

/* The cards divide the width, so a row never ends ragged. When a series
   has fewer parts the cards get wider, and the extra width carries a
   line of prose the narrow ones have no room for — so it buys the
   reader something instead of just holding air. */
.cards { display: grid; gap: 18px; }
.cards.two   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards.four  { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  border-top: 1px solid var(--wc-line-strong);
  padding-top: 10px;
}
.part {
  font-family: var(--wc-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wc-accent);
}
.ct {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  margin-top: 4px;
  transition: color var(--wc-dur-fast) var(--qe-ease);
}
.card:hover .ct { color: var(--wc-accent); }
.cwhy { font-size: 13.5px; font-style: italic; line-height: 1.45; color: var(--wc-muted); margin-top: 5px; }
.cm { font-size: 12px; color: var(--wc-faint); margin-top: 6px; }

.card.soon { border-top-style: dashed; border-top-color: var(--wc-line); cursor: default; }
.card.soon .part, .card.soon .ct { color: var(--wc-faint); }

/* ── start here, and the latest three ───────────────────────── */

.path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }

.step { display: flex; gap: 13px; text-decoration: none; color: inherit; cursor: pointer; }
.num { font-family: var(--wc-mono); font-size: 24px; color: var(--wc-line-strong); line-height: 1; }
.pt {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.25;
  transition: color var(--wc-dur-fast) var(--qe-ease);
}
.step:hover .pt { color: var(--wc-accent); }
.pwhy { font-size: 14px; font-style: italic; line-height: 1.5; color: var(--wc-muted); margin-top: 5px; }

.revised {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--wc-line);
}
.rlab {
  font-family: var(--wc-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wc-accent);
  white-space: nowrap;
}
.rlist { font-size: 14px; color: var(--wc-muted); line-height: 1.6; }
.rlist .v { font-family: var(--wc-mono); font-size: 11px; color: var(--wc-accent); }

/* ── control rail ───────────────────────────────────────────── */

/* Fixed to the window's right edge rather than taking a grid track, so
   the content measure sits dead centre on any screen. */
.ctlrail {
  position: fixed;
  right: 24px;
  top: 108px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  z-index: 30;
}

.ctl {
  position: relative;
  width: 32px;
  height: 32px;
  border: 1px solid var(--wc-line-strong);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--wc-muted);
  background: var(--wc-paper);
  transition: color var(--wc-dur-fast) var(--qe-ease),
              border-color var(--wc-dur-fast) var(--qe-ease),
              background var(--wc-dur-fast) var(--qe-ease);
}
.ctl:hover { color: var(--wc-accent); }
.ctl.on { border-color: var(--wc-accent); color: var(--wc-accent); background: var(--wc-panel); }

.ctl::after {
  content: attr(data-tip);
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 11px;
  font-family: var(--wc-serif);
  background: var(--qe-tip-bg);
  color: var(--qe-tip-ink);
  padding: 4px 8px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--wc-dur-fast) var(--qe-ease);
}
.ctl:hover::after { opacity: 1; }

.ctlsep { width: 20px; height: 1px; background: var(--wc-line); margin: 2px 0; }

/* The search palette and the prototype's own note are NOT here.
 *
 * The palette was withdrawn on 2026-09-02: search is a surface now, not
 * an overlay (daemon-section-pages.md, D-1). Its rules styled markup the
 * service never renders.
 *
 * The note said "This is the design prototype, not the site." It is the
 * site now.
 */

/* ── reduced motion ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  #mastrect { width: var(--mast-w, 760px); animation: none; }
  .mast .stop { opacity: 1; animation: none; }
  .mast .stop { opacity: 1; }
}


/* ── the fold — a narrow screen (design language, "A list page on a
   narrow screen"; daemon-pages-build D-10) ───────────────────────────

   Settled 2026-09-06 by the owner. The page reflows; it does not become
   a second design. No control changes, no item leaves, no order
   changes.

   The front page is one measure, so below it the measure is simply the
   screen less the padding. `width: 934px` becomes a max, not a fact. */

@media (max-width: 998px) {
  .topbar { --frame: 100%; }
  .frame { width: 100%; max-width: 934px; padding-left: 32px; padding-right: 32px; }

  /* The lead stops being two columns answering to different
     authorities, and becomes the same two blocks stacked in the same
     order: what the editor chose, then what the record says. The rule
     that divided them turns from a right edge into a bottom one, so the
     division is still drawn. */
  .lead { grid-template-columns: 1fr; }
  .decks {
    border-right: 0;
    padding-right: 0;
    border-bottom: 1px solid var(--wc-line);
    padding-bottom: 22px;
  }

  /* A series row is its description beside its parts. Narrow, the
     description sits above them, in the same order. */
  .srow { grid-template-columns: 1fr; }
}

/* The bar, on a screen too narrow to hold it in one row.
 *
 * The navbar lock fixes what the bar HOLDS and how it reads: the name
 * left, four links right, in order, nothing nesting, and one travelling
 * rule. It says nothing about a 375px screen, because the frame question
 * was open when it was written and the owner settled it only for these
 * pages (daemon-pages-build, D-10).
 *
 * So the bar reflows and does not redesign. Same wordmark, same four
 * links, same order, same rule. They stop sharing a row and take one
 * each. Nothing is hidden behind a control, because a menu a reader has
 * to discover is a different design, not the same one narrower.
 *
 * This lives in articles.css, which the post page never loads, so the
 * post frame is untouched exactly as D-10 requires.
 */
@media (max-width: 720px) {
  .topbar {
    flex-wrap: wrap;
    gap: 12px 0;
  }
  .wordmark,
  .nav { flex: 0 0 100%; }
  /* 26px between four links needs 323px, and a 375px screen has 311px
     after its padding. 18px fits, and wrap catches anything narrower
     still rather than pushing the page sideways. */
  .nav { gap: 18px; flex-wrap: wrap; }
}

/* A band is a name, a count, and one exit. Narrow, the exit takes its
   own line rather than pushing the count off the page. The band keeps
   its double rule and its panel, so it still reads as a band. */
@media (max-width: 620px) {
  .band { flex-wrap: wrap; gap: 8px 14px; }
  .band .open { flex: 0 0 100%; }
}

@media (max-width: 660px) {
  /* Cards divide a row so no row ends ragged. Below this width there is
     nothing left to divide, so each part takes the whole measure — and
     the row is still not ragged, because there is one card in it. */
  .cards.two,
  .cards.three,
  .cards.four { grid-template-columns: 1fr; }

  /* The two second stories sit side by side with a rule between them.
     Stacked, that rule becomes a top edge on the lower one. */
  .second { grid-template-columns: 1fr; }
  .second .ruled { border-left: 0; padding-left: 0; border-top: 1px solid var(--wc-line); padding-top: 18px; }
}

/* ── what the service added, which the prototype had no need for ──
 *
 * The prototype was hand-edited markup over invented content, so it
 * never met an empty section or an unchosen lead. A real store does,
 * from its first day.
 */

/* The lead, with nothing chosen.
 *
 * "With no lead chosen the page falls back to the newest piece and says
 * so: the kicker reads NEWEST, and the headline sets smaller"
 * (articles-index.md, criterion 8). Smaller is the whole signal: the
 * page still leads with something, and stops short of claiming an
 * editor chose it. */
.hl.fallback { font-size: 30px; }

/* A section with nothing in it keeps its band and says what is missing
   in one quiet italic line (design language, "The empty page"). It does
   not stand there holding a dash. */
.nothing {
  font-family: var(--wc-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--wc-muted);
  margin: 0;
}

.latestcol .nothing { margin-top: 14px; }

/* "Revised lately" names pieces, so each one is a way to reach them.
   The prototype set them in italics and left them inert. */
.revised .rlist a { color: inherit; text-decoration: none; }
.revised .rlist a:hover { color: var(--wc-accent); }
.revised .rlist a:focus-visible { outline: 2px solid var(--wc-accent); outline-offset: 3px; }

/* The control rail's two controls take the keyboard, because a control
   that only answers a mouse is not a control for everybody. */
.ctl:focus-visible { outline: 2px solid var(--wc-accent); outline-offset: 3px; }