/* ==========================================================================
   BC Groundwater Wire — theme stylesheet (Build 2, October 2026)
   One system in two modes. The tokens are the ones on the design canvas
   "The Wire: Design" (token sheet). Light is the canonical version; dark
   follows the reader's device, the masthead switch, or the Colour mode setting.
   ========================================================================== */

:root {
  --page: #F3F6F6; --card: #FFFFFF; --wash: #EAF0F0; --line: #D8E1E1; --line2: #C3CFD0;
  --ink: #152125; --text: #263439; --muted: #4F6267; --faint: #73858A;
  --teal: #264B54; --teal-hover: #1C3B43; --teal-soft: #DFE9EB; --link: #264B54;
  --sky: #6B9DB5; --sage: #577C77;
  --coral: #CE5B50; --coral-deep: #B94A40;
  --ochre: #8F6519; --ochre-rule: #D8B45B; --ochre-wash: #FBF4DF;
  --btn-bg: #264B54; --btn-fg: #FFFFFF;
  --who-on: #264B54; --who-on-fg: #FFFFFF; --who-off: #E4EBEB; --who-off-fg: #55686C;
  --plate: #264B54; --plate-fg: #FFFFFF; --plate-muted: #C6D6DA; --plate-line: #3C6470;
  --plate-btn-bg: #FFFFFF; --plate-btn-fg: #264B54; --plate-input: #FFFFFF; --plate-input-fg: #152125;
  --g-inforce: #264B54; --g-outline: #264B54; --g-published: #5E93AB; --g-active: #577C77; --g-super: #8A9A9E;
  --photo: #C9D6D8; --photo-fg: #3E555B; --focus: #2F5DA8;
  --coral-btn-bg: #B94A40; --coral-btn-fg: #FFFFFF; --coral-btn-hover: #A33F36;
  --sage-wash: #EDF3F1; --sage-line: #CFDEDA;
  --serif: var(--gh-font-heading, 'Newsreader', Georgia, 'Times New Roman', serif);
  --sans: var(--gh-font-body, 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif);
  color-scheme: light;
}
[data-theme="dark"] {
  --page: #0F1B1F; --card: #16252A; --wash: #1B2C31; --line: #283B41; --line2: #35494F;
  --ink: #F1F5F5; --text: #D7E1E3; --muted: #A6B7BB; --faint: #7F9499;
  --teal: #9BD1E0; --teal-hover: #B9E0EB; --teal-soft: #1E3238; --link: #9BD1E0;
  --sky: #6B9DB5; --sage: #7FA39E;
  --coral: #D9776C; --coral-deep: #F2A197;
  --ochre: #D4B06A; --ochre-rule: #8A7238; --ochre-wash: #241F14;
  --btn-bg: #9BD1E0; --btn-fg: #0F1B1F;
  --who-on: #9BD1E0; --who-on-fg: #0F1B1F; --who-off: #223338; --who-off-fg: #93A6AA;
  --plate: #183942; --plate-fg: #F1F5F5; --plate-muted: #B4CAD0; --plate-line: #2C555F;
  --plate-btn-bg: #9BD1E0; --plate-btn-fg: #0F1B1F; --plate-input: #0F1B1F; --plate-input-fg: #F1F5F5;
  --g-inforce: #9BD1E0; --g-outline: #9BD1E0; --g-published: #6B9DB5; --g-active: #7FA39E; --g-super: #7F9499;
  --photo: #223338; --photo-fg: #A6B7BB; --focus: #9BD1E0;
  --coral-btn-bg: #D9776C; --coral-btn-fg: #0F1B1F; --coral-btn-hover: #E58A80;
  --sage-wash: #162927; --sage-line: #27403C;
  color-scheme: dark;
}

/* ---------- Ghost's own sign-up and sign-in window (Portal) ----------
   Ghost draws the window in a frame the theme cannot style inside, and gives it no colour setting.
   The frame itself is the theme's to colour, so the page behind the white card is Deep Teal
   (the owner, October 4, 2026: "#264B54"). Ghost lays a 10 to 20 per cent shade over whatever is
   behind the card, so the base here is a step lighter and the result centres on #264B54.
   color-scheme: light keeps the frame see-through on the dark site; without it the browser paints
   the frame white. If Ghost ever renames the frame, this rule simply stops applying. */
#ghost-portal-root iframe[title="portal-popup"] { background: #2D5863 !important; color-scheme: light; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.5; }
a { color: var(--link); }
a:hover { color: var(--teal-hover); }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
input::placeholder { color: var(--faint); }
[hidden] { display: none !important; }
.nw { white-space: nowrap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.serif { font-family: var(--serif); }
.tnum { font-variant-numeric: tabular-nums; }
.wrap { max-width: 1240px; width: 100%; margin: 0 auto; padding: 0 32px; }
.article { max-width: 760px; width: 100%; margin: 0 auto; padding: 36px 32px 56px; }
@media (max-width: 720px) { .wrap { padding: 0 20px; } .article { padding: 24px 20px 40px; } }

/* ---------- type ---------- */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; color: var(--ink); margin: 0; letter-spacing: -0.01em; line-height: 1.15; }
.t-xl { font-size: 46px; line-height: 1.08; letter-spacing: -0.015em; }
.t-l { font-size: 28px; }
.t-m { font-size: 22px; line-height: 1.22; letter-spacing: -0.005em; }
.t-s { font-size: 20px; line-height: 1.22; }
.lede { font-family: var(--serif); font-size: 25px; line-height: 1.35; color: var(--ink); text-wrap: pretty; }
.meta { font-size: 13px; color: var(--muted); }
.meta b, .meta strong { font-weight: 600; color: var(--teal); }
.muted { color: var(--muted); }
@media (max-width: 720px) { .t-xl { font-size: 34px; } .t-l { font-size: 24px; } .lede { font-size: 21px; } }

/* ---------- line breaks: no single word left alone on a last line (owner's rule, October 4, 2026) ----------
   Headings and short text are balanced (lines of even length); running text avoids a one-word last line. */
h1, h2, h3, h4, .lede, .sub, .sp-line, .sofar .next, .by-d, .door .q, .door .l, .doors-note,
.card p, .qrow p, .plate p, .plate li, .ft-about p, .ft-line, .page-head .desc, .pn .t, .su-left .p, .su-left .sub,
.cl-card .t, .etm p, .start-links a, .status-key, .meta { text-wrap: balance; }
p, li, dd, blockquote, figcaption { text-wrap: pretty; }
.post-body p, .post-body li { text-wrap: pretty; }

/* ---------- buttons, chips, links ---------- */
.btn { transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 20px; border-radius: 6px; font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; border: 1px solid transparent; cursor: pointer; }
.btn-sm { height: 40px; padding: 0 16px; font-size: 14px; }
.btn-lg { height: 48px; }
.btn-primary { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.btn-primary:hover { filter: brightness(1.08); color: var(--btn-fg); }
.btn-outline { background: transparent; color: var(--teal); border-color: var(--teal); }
.btn-outline:hover { background: var(--teal-soft); color: var(--teal); }
.btn-coral { background: var(--coral-btn-bg); color: var(--coral-btn-fg); border-color: var(--coral-btn-bg); }
.btn-coral:hover { background: var(--coral-btn-hover); border-color: var(--coral-btn-hover); color: var(--coral-btn-fg); }
.btn-plate { background: var(--plate-btn-bg); color: var(--plate-btn-fg); border-color: var(--plate-btn-bg); }
.btn-plate-outline { background: transparent; color: var(--plate-fg); border-color: var(--plate-line); }
.btn-plate-outline:hover { background: rgba(255,255,255,0.06); color: var(--plate-fg); }
.btn-block { width: 100%; }
.tlink { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--link); text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.tlink svg { flex-shrink: 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line2); background: var(--card); color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; }
.chip { transition: border-color 0.15s ease; }
.chip:hover { border-color: var(--teal); color: var(--ink); }
.chip.is-on { background: var(--teal); border-color: var(--teal); color: var(--btn-fg); font-weight: 600; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); cursor: pointer; }
.icon-btn:hover { background: var(--wash); color: var(--ink); }
.icon-btn svg { display: block; }
.theme-toggle .ico-sun { display: none; }
.theme-toggle[data-mode="dark"] .ico-sun { display: block; }
.theme-toggle[data-mode="dark"] .ico-moon { display: none; }

/* ---------- masthead ---------- */
.hd { background: var(--card); border-bottom: 1px solid var(--line); }
.hd-top { display: flex; justify-content: space-between; align-items: center; padding: 10px 0 0; font-size: 13px; color: var(--muted); gap: 12px; }
.hd-top > span:last-child { white-space: nowrap; }
.hd-top a { color: var(--muted); text-decoration: none; }
.hd-mast { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 0 16px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand .mark { flex-shrink: 0; }
.brand .mark .b { fill: var(--teal); }
.brand .mark .b-hi { fill: var(--coral); }
.brand .wordmark { font-family: var(--serif); font-weight: 600; font-size: 30px; letter-spacing: -0.012em; color: var(--ink); white-space: nowrap; line-height: 1; }
.brand img { max-height: 40px; width: auto; }
.brand { min-width: 0; }
.brand .wordmark { min-width: 0; overflow-x: clip; }
.hd-tools { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.hd-nav { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; border-top: 1px solid var(--line); padding: 2px 0 0; }
.hd-nav a { font-size: 15px; font-weight: 500; color: var(--text); text-decoration: none; padding: 12px 0 10px; border-bottom: 2px solid transparent; }
.hd-nav a:hover { color: var(--ink); }
.hd-nav a.is-on { color: var(--ink); font-weight: 600; border-bottom-color: var(--sky); }
.hd-menu-btn { display: none; }
@media (max-width: 860px) {
  .hd-mast { padding: 8px 0 12px; gap: 12px; }
  .brand { gap: 8px; }
  .brand .wordmark { font-size: 21px; }
  .hd-tools { gap: 0; }
  .hd-tools .icon-btn { width: 40px; }
  .hd-menu-btn { display: inline-flex; }
  .hd-nav { display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 4px 0 8px; }
  .hd-nav.is-open { display: flex; }
  .hd-nav a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .hd-nav a.is-on { border-bottom-color: var(--line); }
  .hd .btn-subscribe { display: none; }
  /* the menu's glyph, not its 40px button, meets the page edge */
  .hd-tools { margin-right: -9px; }
}
/* Wider than a phone, the row still folds into the Menu button whenever it would not fit on one
   line: wire.js measures the row and sets .nav-fold on the masthead. The menu is the owner's to
   lengthen in Ghost, and no width may leave its last item alone on a second row. */
.hd.nav-fold .hd-menu-btn { display: inline-flex; }
.hd.nav-fold .hd-nav { display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 4px 0 8px; }
.hd.nav-fold .hd-nav.is-open { display: flex; }
.hd.nav-fold .hd-nav a { padding: 12px 0; border-bottom: 1px solid var(--line); }
.hd.nav-fold .hd-nav a.is-on { border-bottom-color: var(--line); }
/* Phones. The wordmark scales with the screen so it and the three buttons always fit on one row
   (tested at 390, 375, 360 and 320px). The colour switch stays at every width: dark is the
   default, so a reader who wants light must always be able to reach it. */
@media (max-width: 420px) {
  .hd-mast { gap: 10px; }
  .brand .wordmark { font-size: clamp(16px, calc(9.7vw - 19.5px), 21px); }
  .brand .mark { width: 22px; height: 22px; }
  .hd-top { font-size: 12px; }
}
@media (max-width: 370px) {
  .brand { gap: 6px; }
  .brand .mark { width: 20px; height: 20px; }
  .brand .wordmark { font-size: clamp(16px, calc(9.7vw - 18px), 18px); }
  .hd-tools .icon-btn { width: 36px; }
  .hd-tools { margin-right: -7px; }
}
/* 320px (small phones, and larger ones set to zoomed text): the name keeps its size and the mark steps aside */
@media (max-width: 340px) {
  .brand .mark { display: none; }
  .hd-tools .icon-btn { width: 34px; }
  .hd-tools { margin-right: -6px; }
}

/* ---------- sections and grids ---------- */
.main { display: flex; flex-direction: column; gap: 56px; padding-top: 32px; padding-bottom: 56px; }
@media (max-width: 720px) { .main { gap: 40px; padding-top: 24px; padding-bottom: 40px; } }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding-top: 16px; border-top: 1px solid var(--line2); }
.sec-head .sub { margin: 4px 0 0; font-size: 14px; color: var(--muted); line-height: 1.4; }
.sec-head .with-chip { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.lead-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.lead-row.one { grid-template-columns: 1fr; }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lead-row { grid-template-columns: minmax(0, 1fr); } }
.lead-row > *, .grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; }
.lead-row .plate .rule { margin-top: auto; }
@media (max-width: 720px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ---------- the plate (briefing card, gate, subscribe panel) ---------- */
.plate { background: var(--plate); color: var(--plate-fg); border-radius: 12px; padding: 36px 40px 34px; display: flex; flex-direction: column; gap: 18px; }
.plate h1, .plate h2, .plate h3 { color: var(--plate-fg); }
.plate .pm { color: var(--plate-muted); }
.plate a { color: var(--plate-fg); }
.plate ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; max-width: 64ch; }
.plate .rule { border-top: 1px solid var(--plate-line); padding-top: 18px; margin-top: 4px; display: flex; gap: 12px; align-items: center; }
.plate-form { display: flex; gap: 8px; flex: 1; min-width: 0; }
.plate-form input[type="email"] { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border: 1px solid var(--plate-line); border-radius: 6px; background: var(--plate-input); color: var(--plate-input-fg); font-size: 15px; }
.plate-count { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 14px; color: var(--plate-muted); }
.plate-count .sep { color: var(--plate-line); }
@media (max-width: 720px) { .plate { padding: 24px 20px 22px; } .plate .rule { flex-direction: column; align-items: stretch; } .plate-form, .plate-form .form-fields { flex-direction: column; } .plate-form input[type="email"] { width: 100%; flex: 0 0 46px; } }
/* (2.0.19) On a phone the form stacks, and "flex: 1" then measured the field's height from nothing: the email
   field on the front page's briefing card stood 22px tall (found on the live site, October 6, 2026). */

/* members forms: Ghost adds .loading / .success / .error to the form */
form[data-members-form] .form-msg { display: none; font-size: 14px; margin-top: 8px; }
form[data-members-form].success .form-msg-success, form[data-members-form].error .form-msg-error { display: block; }
form[data-members-form].success .form-fields { display: none; }
form[data-members-form].loading button { opacity: 0.6; }

/* ---------- Easy to Miss ---------- */
.etm { background: var(--ochre-wash); border: 1px solid var(--ochre-rule); border-radius: 12px; padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 14px; }
.etm .sub { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.etm article { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--ochre-rule); }
.etm .said { font-size: 13px; font-weight: 600; color: var(--ochre); }

/* ---------- the first reader's card (beside the plate when there is no Easy to Miss) ---------- */
.start-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 14px; }
.start-card .sub { margin: 6px 0 0; font-size: 14px; color: var(--muted); line-height: 1.5; }
.start-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.start-links li { border-top: 1px solid var(--line); }
.start-links a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 11px 0; font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none; }
.start-links a:hover { color: var(--teal); }
.start-links a svg { flex-shrink: 0; color: var(--teal); }

/* ---------- status glyph + who bar ---------- */
.status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); font-size: 13px; }
.status svg { display: block; flex-shrink: 0; }
.sline { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; line-height: 1.3; }
.sline .sep { color: var(--line2); }
.sline .d { color: var(--muted); font-variant-numeric: tabular-nums; }
.who { display: flex; gap: 2px; container-type: inline-size; }
/* Cells are equal where there is room; where there isn't, a cell is never narrower than its word
   plus 5px a side, so "Business" (the longest label; no label may be longer) is never tight. */
.who span { flex: 1 1 0; min-width: max-content; padding: 0 5px; white-space: nowrap; text-align: center; font-size: 11px; font-weight: 600; line-height: 20px; border-radius: 3px; background: var(--who-off); color: var(--who-off-fg); }
/* The five words need 242px at full size and 202px one size down. A bar narrower than that steps
   down a size; it never spills out of its card. (The media rule is for browsers without container
   queries.) */
@media (max-width: 340px) { .who span { font-size: 10px; padding: 0 3px; } }
@container (max-width: 246px) { .who span { font-size: 10px; padding: 0 3px; } }
@container (max-width: 205px) { .who span { font-size: 9.5px; padding: 0 2px; letter-spacing: -0.01em; } }
.who span.is-on { background: var(--who-on); color: var(--who-on-fg); }
.who-lg span { font-size: 12px; line-height: 24px; }
@container (max-width: 254px) { .who-lg span { font-size: 11px; padding: 0 3px; } }
.cl-meta .area + .area::before, .cl-meta .region::before { content: " · "; color: var(--faint); }
.status-key { display: flex; flex-wrap: wrap; gap: 14px 22px; padding-top: 10px; font-size: 13px; color: var(--muted); }
.status-key .status { color: var(--muted); font-weight: 400; }

/* ---------- changelog entry rows, question rows, cards ---------- */
.entry { display: flex; flex-direction: column; gap: 10px; padding: 18px 0 20px; border-top: 1px solid var(--line); }
.entry h3 a, .qrow h3 a, .card h3 a { color: inherit; text-decoration: none; }
.entry h3 a, .qrow h3 a, .card h3 a { transition: color 0.15s ease; }
.entry h3 a:hover, .qrow h3 a:hover, .card h3 a:hover { color: var(--teal); }
.entry .foot { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); }
.qrow { display: flex; flex-direction: column; gap: 8px; padding: 18px 0 20px; border-top: 1px solid var(--line); }
.qrow p { margin: 0; font-size: 15px; line-height: 1.5; }
.qrow .foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 2px; }
.qrow .foot .who { width: 272px; }
@media (max-width: 720px) { .qrow .foot { flex-direction: column; align-items: stretch; gap: 8px; } .qrow .foot .who { width: auto; } }
.card { display: flex; flex-direction: column; gap: 12px; padding: 20px 20px 18px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; transition: border-color 0.15s ease; }
.card:hover { border-color: var(--line2); }
.card .top { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--muted); }
.card .top b { font-weight: 600; color: var(--teal); }
.card p { margin: 0; font-size: 15px; line-height: 1.5; }
.card .who { margin-top: auto; padding-top: 4px; }
.rows { display: flex; flex-direction: column; margin-top: 8px; }

/* ---------- From the Field ---------- */
.field { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; margin-top: 18px; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.field .photo { border-radius: 6px; overflow: hidden; background: var(--photo); min-height: 260px; }
.field .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.field .body { display: flex; flex-direction: column; gap: 12px; padding: 12px 12px 8px 0; }
.field .body .who { margin-top: auto; max-width: 320px; }
@media (max-width: 860px) { .field { grid-template-columns: 1fr; } .field .body { padding: 4px 4px 8px; } }

/* ---------- follow chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* ---------- Licensing band ---------- */
.band-lic { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 24px; align-items: center; padding: 30px 36px; background: var(--card); border: 2px solid var(--coral); border-radius: 12px; }
.band-lic p { margin: 8px 0 0; font-size: 15px; line-height: 1.5; max-width: 70ch; }
.band-lic .fig { font-weight: 600; color: var(--coral-deep); }
.band-lic .acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
@media (max-width: 720px) { .band-lic { padding: 24px 20px; } .band-lic .acts { justify-content: flex-start; } }

/* ---------- doors ---------- */
.doors { margin-top: 18px; }
.door-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.door-cards.one { grid-template-columns: 1fr; }
.door { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 16px; background: var(--sage-wash); border: 1px solid var(--sage-line); border-radius: 8px; text-decoration: none; color: var(--ink); }
.door { transition: border-color 0.15s ease; }
.door:hover { border-color: var(--sage); color: var(--ink); }
.door.door-sub .to { color: var(--coral-deep); }
.door .q { font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1.2; color: var(--ink); text-wrap: pretty; }
.door .l { font-size: 14px; line-height: 1.45; color: var(--text); }
.door .to { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 600; color: var(--teal); }
/* The licence door: the Coral frame on the plain card surface, as the Licensing band has it. It had a
   Coral-tinted fill, which in dark mode came out as a second brown beside The Wire So Far. The brown
   is the Wire's one warm surface and holds information only (the owner, October 4 and October 7, 2026:
   "I like the proposed much better"). Coral frames; it never fills. */
.door.door-coral { background: var(--card); border: 2px solid var(--coral); }
.door.door-coral .to { color: var(--coral-deep); }
.door-btns { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 0; }
.door-btns .btn-outline { border-color: var(--sage); color: var(--teal); }
.door-btns .btn-outline:hover { background: var(--sage-wash); }
.door-cards + .door-btns { padding-top: 14px; }
.doors-note { margin: 0; padding-top: 14px; font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 80ch; }
.doors.small .door .q { font-size: 19px; }
/* On a post, Where to Go Next waits until at least two of its doors have addresses (the owner's
   ruling, October 4, 2026): one button under a line about partners looks thin. Section pages keep
   the block with one door. */
.wtgn.small:not(:has(.door-cards)):has(.door-btns > a:only-child) { display: none; }
.wtgn.small:has(.door-cards):not(:has(.door-btns > a)) { display: none; }
@media (max-width: 720px) { .door-cards { grid-template-columns: 1fr; } .door-cards .door-sub { order: -1; } }

/* ---------- footer ---------- */
.ft { background: var(--card); border-top: 1px solid var(--line); }
.ft-in { padding: 40px 0 44px; display: flex; flex-direction: column; gap: 28px; }
.ft-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 28px 88px; align-items: start; }
.ft-links { display: flex; flex-direction: column; gap: 6px; }
/* seven sections or more run in two columns, so the footer never grows a long tail */
.ft-secs:has(> :nth-child(7)) { display: grid; grid-auto-flow: column; grid-template-rows: repeat(6, auto); column-gap: 40px; }
.ft-col { display: flex; flex-direction: column; gap: 6px; }
.ft-col .h { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
/* the footer's link colours are for its links, not for a button in the footer: a button keeps its own
   words (the Subscribe button's words were taking the link colour, and the link's hover colour) */
.ft-col a:not(.btn) { font-size: 14px; color: var(--text); text-decoration: none; line-height: 1.5; }
.ft-col a:not(.btn):hover { color: var(--teal); }
.ft-col .soon { font-size: 14px; color: var(--faint); line-height: 1.5; }
.ft-about p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); max-width: 34ch; }
.ft-line { margin: 0; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.55; color: var(--muted); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
@media (max-width: 860px) { .ft-grid { gap: 28px 48px; } }
@media (max-width: 720px) { .ft-in { padding: 28px 0 32px; } .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .ft-about { grid-column: 1 / -1; } .ft-secs:has(> :nth-child(7)) { display: flex; } }

/* ---------- posts ---------- */
.crumb { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a.on { color: var(--teal); font-weight: 600; }
.post-top { margin-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.post-title { margin-top: 12px; font-size: 42px; line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; }
.post-lede { margin: 22px 0 0; }
.post-who { margin-top: 18px; max-width: 420px; }
.post-body { margin-top: 28px; font-size: 18px; line-height: 1.6; color: var(--text); }
.post-body > * + * { margin-top: 16px; }
.post-body h2 { font-size: 26px; margin-top: 36px; }
.post-body h3 { font-size: 22px; margin-top: 28px; }
.post-body p { margin: 16px 0 0; }
.post-body b, .post-body strong { color: var(--ink); }
.post-body ul, .post-body ol { padding-left: 22px; }
.post-body li + li { margin-top: 6px; }
.post-body blockquote { margin: 24px 0 0; padding: 0 0 0 20px; border-left: 3px solid var(--line2); color: var(--muted); font-family: var(--serif); font-size: 21px; line-height: 1.4; }
.post-body figure { margin: 28px 0 0; }
.post-body figcaption { font-size: 13px; color: var(--muted); text-align: center; margin-top: 8px; }
.post-body hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0 0; }
.post-body .kg-image, .post-body img { border-radius: 6px; }
.post-body .kg-width-wide { margin-left: -80px; margin-right: -80px; }
.post-body .kg-width-full { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.post-body .kg-width-full img { border-radius: 0; }
.post-body .kg-gallery-container { display: flex; flex-direction: column; gap: 8px; }
.post-body .kg-gallery-row { display: flex; gap: 8px; }
.post-body .kg-gallery-image { flex: 1; }
.post-body .kg-gallery-image img { width: 100%; height: 100%; object-fit: cover; }
.post-body .kg-callout-card { display: flex; gap: 12px; padding: 20px 22px; border-radius: 12px; background: var(--teal-soft); }
.post-body .kg-callout-card .kg-callout-text { font-size: 17px; }
.post-body .kg-callout-card-yellow { background: var(--ochre-wash); }
.post-body .kg-callout-card-red { background: var(--card); border: 2px solid var(--coral); }   /* Ghost's red callout: the same rule, a Coral frame and no tinted fill */
.post-body .kg-callout-card-grey, .post-body .kg-callout-card-white { background: var(--wash); }
.post-body .kg-callout-card-accent { background: var(--plate); color: var(--plate-fg); }
.post-body .kg-button-card { margin-top: 24px; }
.post-body .kg-btn { display: inline-flex; align-items: center; height: 46px; padding: 0 20px; border-radius: 6px; background: var(--btn-bg); color: var(--btn-fg); font-weight: 600; font-size: 15px; text-decoration: none; }
.post-body .kg-bookmark-card a { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; text-decoration: none; color: inherit; }
.post-body .kg-bookmark-content { padding: 16px; }
.post-body .kg-bookmark-title { font-weight: 600; color: var(--ink); }
.post-body .kg-bookmark-description { font-size: 14px; color: var(--muted); margin-top: 4px; }
.post-body .kg-bookmark-thumbnail img { height: 100%; object-fit: cover; }
.post-body .kg-embed-card iframe { max-width: 100%; }
.post-body .kg-toggle-card, .post-body .kg-product-card { border: 1px solid var(--line); border-radius: 8px; padding: 16px; }
.post-body .kg-file-card a { display: flex; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; }
.post-body table { width: 100%; border-collapse: collapse; font-size: 15px; }
.post-body th, .post-body td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.post-body th { font-weight: 600; color: var(--teal); font-size: 14px; }
.post-body .wire-note, .note { margin-top: 32px; display: flex; flex-direction: column; gap: 10px; padding: 24px 26px; background: var(--teal-soft); border-radius: 12px; }
.post-body .wire-note .nt, .note .nt { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.15; color: var(--ink); }
.post-body .wire-note p, .note p { margin: 0; font-size: 17px; line-height: 1.6; }
.post-body .wire-labelled { margin-top: 28px; }
.post-body .wire-labelled .lh { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.15; color: var(--ink); margin-bottom: 10px; }
.post-body .wire-labelled p { margin: 0; font-size: 17px; }
.post-body .wire-checked { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.post-body .wire-checked b { color: var(--text); }

/* ---------- the Dispatch ----------
   Something urgent, the day it happens. One mark carries the urgency: the Coral dot, the same dot
   as the announcement bar's, with a Coral rule over the headline. Coral here is never a button.
   Everything under the headline is the Wire's own furniture: the labelled sections, The Note, the
   source cards of a changelog entry, one door. */
.dsp-kind { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.dsp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); flex-shrink: 0; }
.dsp-flag { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.dsp-flag time .sep { margin: 0 3px; color: var(--faint); }
.dsp-flag .rt { margin-left: auto; }
.dsp-head { margin-top: 18px; padding-top: 14px; border-top: 2px solid var(--coral); }
.dsp-head .post-title { margin-top: 14px; }
.card .top .dsp-kind { font-weight: 600; }
.qrow .dsp-flag { font-size: 13px; }
.post-body .dsp-facts { margin-top: 32px; border-bottom: 1px solid var(--line); }
.post-body .dsp-facts .cl-labelled { margin-top: 0; }
.post-body .dsp-facts + .wire-checked { margin-top: 14px; padding-top: 0; border-top: 0; }   /* one hairline between them, not two */
/* The one door: a Button card in the body whose address is one of the Wire's doors becomes that
   door's card (wire.js). In the email, and without script, it stays the button she typed. */
.post-body .dsp-door { margin-top: 18px; }
.post-body .dsp-door .door .q { font-size: 21px; }
.post-body .dsp-door .door .l { font-size: 14px; line-height: 1.45; }
/* the band on the front page while a Dispatch is fresh: a ruled row under the Dispatch's own Coral
   rule, not a plate (the plate appears once on a page, and on the front page it is the briefing card) */
.dsp-band { display: flex; align-items: center; gap: 16px; margin-bottom: -28px; padding: 14px 0 15px; border-top: 2px solid var(--coral); border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.dsp-band:hover { color: var(--ink); }
.dsp-band:hover .t { color: var(--teal); }
.dsp-band-k { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; font-size: 14px; }
.dsp-band .d { color: var(--muted); }
.dsp-band .t { flex: 1; min-width: 0; font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.25; text-wrap: balance; transition: color 0.15s ease; }
.dsp-band .go { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; font-size: 14px; font-weight: 600; white-space: nowrap; color: var(--link); }
@media (max-width: 720px) {
  .dsp-band { flex-wrap: wrap; gap: 6px 12px; margin-bottom: -16px; }
  .dsp-band .t { order: 3; flex-basis: 100%; font-size: 19px; }
  .dsp-band .go { order: 2; margin-left: auto; }
}
@media (max-width: 560px) { .dsp-flag .rt { display: none; } }
@media (max-width: 960px) { .post-body .kg-width-wide { margin-left: 0; margin-right: 0; } }
@media (max-width: 720px) { .post-title { font-size: 32px; } .post-body { font-size: 17px; } }

.wtgn { margin-top: 40px; display: flex; flex-direction: column; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line2); }
.wtgn .sub { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.more-sec { margin-top: 40px; display: flex; flex-direction: column; padding-top: 18px; border-top: 1px solid var(--line2); }
.more-sec .sec-head { border-top: 0; padding-top: 0; }
/* The More row at the foot of a post sits inside the 760px reading column: two cards across there,
   never three. Three left each card 221px wide, its title on three or four lines and the who bar at
   9.5px (found on the live site, October 6, 2026). Phones keep one column (the rule at 720px). */
@media (min-width: 721px) { .article .more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pn { margin-top: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; border-top: 1px solid var(--line); padding-top: 16px; }
.pn a { display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
.pn a.next { align-items: flex-end; text-align: right; }
.pn .k { font-size: 13px; color: var(--muted); }
.pn .t { font-family: var(--serif); font-weight: 500; font-size: 18px; line-height: 1.3; color: var(--ink); }
/* ---------- the ask pair: a plate that asks, and the warm card beside it ----------
   The same pair as the front page's lead row (the briefing plate and Easy to Miss), at the foot of
   every post, section page and changelog entry. Teal is where the Wire asks, and the Coral button
   sits on it; the brown card carries information and never a button. */
.ask-pair { margin-top: 36px; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.ask-pair > * { min-width: 0; }
.ask-pair .plate { padding: 28px 30px 26px; gap: 14px; }
.ask-pair .sp-eyebrow { font-size: 13px; font-weight: 600; color: var(--plate-muted); }
.ask-pair .sp-h { font-size: 27px; line-height: 1.12; letter-spacing: -0.01em; }
.ask-pair .sp-line { margin: 0; font-size: 15px; line-height: 1.55; color: var(--plate-muted); }
.ask-pair form { display: flex; flex-direction: column; margin-top: 4px; }
.ask-pair .form-fields { display: flex; flex-wrap: wrap; gap: 8px; }
.ask-pair input[type="email"] { flex: 1 1 150px; min-width: 0; height: 48px; padding: 0 14px; border: 1px solid var(--plate-line); border-radius: 6px; background: var(--plate-input); color: var(--plate-input-fg); font-size: 16px; }
.ask-pair .form-fields .btn { flex: 0 0 auto; }
.ask-pair .byline { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 10px; }
.ask-pair .follow-change .sp-line { max-width: 44ch; }
.ask-pair .byline img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ask-pair .byline .by-t { display: flex; flex-direction: column; gap: 1px; font-size: 13.5px; line-height: 1.4; color: var(--plate-muted); }
.ask-pair .byline b { font-size: 14px; font-weight: 600; color: var(--plate-fg); }
@media (max-width: 720px) { .ask-pair { grid-template-columns: minmax(0, 1fr); gap: 14px; } .ask-pair .plate { padding: 24px 20px 22px; } }
@media (max-width: 480px) { .ask-pair .form-fields .btn { flex: 1 1 100%; } }

/* The Wire So Far: the warm card, built like Easy to Miss */
.sofar { background: var(--ochre-wash); border: 1px solid var(--ochre-rule); border-radius: 12px; padding: 22px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
.sofar-h { font-size: 22px; line-height: 1.15; }
.sofar ul { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--ochre-rule); display: flex; flex-direction: column; gap: 12px; }
/* The count's column grows with the count. It was a fixed 1.6em, room for one digit: the tenth
   changelog entry ran "10" into its label (found on the test copy, October 6, 2026). Where the
   browser can, the list is one grid, so the two labels line up whatever the two counts are. */
.sofar li { display: grid; grid-template-columns: minmax(1.6em, auto) minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 14px; line-height: 1.45; color: var(--text); text-wrap: balance; }
@supports (grid-template-columns: subgrid) {
  .sofar ul { display: grid; grid-template-columns: minmax(22.4px, auto) minmax(0, 1fr); gap: 12px 10px; }
  .sofar li { grid-column: 1 / -1; grid-template-columns: subgrid; }
}
.sofar li b { font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1; color: var(--ink); }
.sofar .next { margin: 0; padding-top: 14px; border-top: 1px solid var(--ochre-rule); display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.sofar .next b { font-size: 15px; font-weight: 600; color: var(--ink); }
.sofar .tlink { margin-top: auto; padding-top: 2px; }

/* the gate (Ghost renders partials/content-cta.hbs after the public preview) */
.gate { margin-top: 36px; display: flex; flex-direction: column; gap: 18px; padding: 30px 32px 28px; }
.gate h2 { font-size: 28px; line-height: 1.12; }
.gate ul.inside { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gate ul.inside li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; }
.gate ul.inside li::before { content: ""; flex-shrink: 0; margin-top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--plate-muted); }
.gate form { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 6px; }
.gate form input[type="email"] { flex: 1; min-width: 240px; height: 48px; padding: 0 14px; border: 1px solid var(--plate-line); border-radius: 6px; background: var(--plate-input); color: var(--plate-input-fg); font-size: 16px; }
.gate .small { margin: 0; font-size: 13.5px; color: var(--plate-muted); }
.gate .small a { font-weight: 600; }

/* ---------- changelog ---------- */
.facts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 24px 0 0; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.facts > div { padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.facts > div + div { border-left: 1px solid var(--line); }
.facts dt { font-size: 12.5px; font-weight: 600; color: var(--teal); }
.facts dd { margin: 0; font-size: 15px; color: var(--ink); }
@media (max-width: 720px) { .facts { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } .facts > div + div { border-left: 0; } .facts > div { border-top: 1px solid var(--line); } .facts > div:first-child, .facts > div:nth-child(2) { border-top: 0; } .facts > div:nth-child(2n) { border-left: 1px solid var(--line); } }
.cl-rows { margin-top: 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; align-items: start; }
.cl-rows .year { grid-column: 1 / -1; font-family: var(--serif); font-weight: 500; font-size: 22px; color: var(--ink); padding: 28px 0 6px; }
@media (max-width: 860px) { .cl-rows { grid-template-columns: 1fr; } }
.cl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-filters { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.cl-frow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cl-frow .lab { font-size: 13px; font-weight: 600; color: var(--muted); min-width: 52px; }
.cl-labelled { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.55; }
.cl-labelled .k { font-size: 14px; font-weight: 600; color: var(--teal); }
.cl-labelled .v > p { margin: 0; }
.cl-labelled .v > p + p { margin-top: 8px; }
.cl-card { display: flex; justify-content: space-between; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 6px; padding: 12px 16px; text-decoration: none; color: var(--ink); }
.cl-card .t { font-weight: 600; font-size: 15px; display: block; }
.cl-card .d { font-size: 13px; color: var(--muted); display: block; margin-top: 2px; }
.cl-card svg { flex-shrink: 0; }   /* the arrow keeps its size when a long title needs the room */
/* A Source line with several links: one card for each, and the "checked" date once, under them. */
.cl-cards { display: flex; flex-direction: column; gap: 8px; }
.cl-labelled .v > p.cl-note { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
/* On a phone the label sits above its value. Side by side, the 120px label column left a source
   card about 215px wide, its title on three lines (found on the live site, October 6, 2026). */
@media (max-width: 560px) { .cl-labelled { grid-template-columns: minmax(0, 1fr); gap: 6px; } }
.cl-related { padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--wash); }
.cl-stands { margin-top: 34px; display: flex; flex-direction: column; gap: 14px; }
.cl-stands ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); gap: 14px; }
.cl-stands li { display: flex; flex-direction: column; gap: 6px; border-top: 3px solid var(--teal); padding-top: 10px; font-size: 14.5px; line-height: 1.4; }
.cl-stands li .d { font-size: 13px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.cl-stands li.is-next { border-top-style: dashed; border-top-color: var(--sage); }
.cl-stands li.is-key { border-top-color: var(--coral); }
.cl-stands li.is-key .d { color: var(--coral-deep); }
.affects { margin-top: 36px; border: 1px solid var(--line); border-radius: 12px; padding: 26px 28px; background: var(--card); display: flex; flex-direction: column; gap: 16px; }
.affects .top { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px; }
.affects .top .n { font-size: 13px; color: var(--muted); }
.affects .picks { display: flex; flex-wrap: wrap; gap: 8px; }
.affects .picks button { min-height: 44px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line2); background: var(--card); color: var(--ink); font-size: 15px; font-weight: 500; cursor: pointer; }
.affects .picks button[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: var(--btn-fg); font-weight: 600; }
.affects .ans { background: var(--wash); border-radius: 8px; padding: 20px 22px; display: none; flex-direction: column; align-items: flex-start; gap: 10px; }
.affects .ans.is-on { display: flex; }
.affects .ans .v { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.2; color: var(--ink); }
.affects .ans p { margin: 0; font-size: 16px; line-height: 1.6; }

/* ---------- section pages, lists ---------- */
.page-head { padding: 36px 0 8px; display: flex; flex-direction: column; gap: 10px; }
.page-head .count { font-size: 14px; color: var(--muted); }
.page-head p.desc { margin: 0; font-size: 17px; line-height: 1.5; max-width: 70ch; }
.list-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
@media (max-width: 960px) { .list-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .list-grid { grid-template-columns: 1fr; } }
.pagination { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 28px 0 0; font-size: 14px; color: var(--muted); }
.pagination a { text-decoration: none; font-weight: 600; }
.empty { padding: 40px 0; color: var(--muted); font-size: 16px; }

/* ---------- static pages ---------- */
.page-body { margin-top: 20px; }
.page-title { font-size: 42px; line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; }
/* the browser gives a figure 40px of side margin by default; the theme's reset did not cover it */
.feature { margin: 28px 0 0; border-radius: 8px; overflow: hidden; }
.feature img { display: block; width: 100%; }
.feature figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; }

/* ---------- sign-up page ---------- */
.su { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: calc(100vh - 160px); }
.su-left { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 48px 56px 48px 0; }
.su-left h1 { font-size: 50px; line-height: 1.06; letter-spacing: -0.015em; text-wrap: balance; }
.su-left .sub { margin: 0; font-size: 20px; line-height: 1.4; font-weight: 500; color: var(--ink); }
.su-left .p { margin: 0; font-size: 16.5px; line-height: 1.55; max-width: 56ch; }
.su-form { display: flex; flex-direction: column; gap: 12px; max-width: 560px; }
.su-form .row { display: flex; align-items: flex-end; gap: 10px; }
.su-form .fld { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.su-form label { font-size: 13px; font-weight: 600; color: var(--teal); }
.su-form input[type="email"] { height: 48px; padding: 0 14px; border: 1px solid var(--line2); border-radius: 6px; background: var(--card); color: var(--ink); font-size: 16px; }
.su-form .two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.su-form select { height: 46px; padding: 0 10px; border: 1px solid var(--line2); border-radius: 6px; background: var(--card); color: var(--ink); font-size: 15px; }
.su-form .fine { margin: 0; font-size: 13px; color: var(--muted); }
.pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; background: var(--plate); color: var(--plate-fg); border-radius: 999px; padding: 6px 18px 6px 6px; font-size: 14px; }
.pill img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.pill .ph { width: 40px; height: 40px; border-radius: 50%; background: var(--plate-line); display: inline-block; }
.pill b { font-weight: 600; }
.pill .by-t { text-wrap: balance; }
.pill .by-d::before { content: " · "; }
@media (max-width: 640px) { .pill { border-radius: 14px; padding: 10px 16px 10px 10px; } .pill .by-t { display: flex; flex-direction: column; gap: 1px; line-height: 1.4; } .pill .by-d::before { content: ""; } }
.su-wall { position: relative; overflow: hidden; background: var(--wash); min-height: 560px; }
.su-col { position: absolute; top: 0; width: calc(50% - 20px); display: flex; flex-direction: column; padding-top: 20px; }
.su-col-a { left: 24px; }
.su-col-b { right: 0; }
.su-col-a { animation: wire-wall-up 80s linear infinite; }
.su-col-b { animation: wire-wall-down 95s linear infinite; }
.su-wall.is-paused .su-col { animation-play-state: paused; }
@keyframes wire-wall-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes wire-wall-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .su-col { animation: none; } *, *::before, *::after { transition-duration: 0s !important; } }
.su-card { margin-bottom: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 8px; }
.su-card .t { font-family: var(--serif); font-weight: 500; font-size: 18px; line-height: 1.25; color: var(--ink); }
.su-card .m { font-size: 12.5px; color: var(--muted); }
.su-card .who span { line-height: 18px; }
@media (max-width: 1239px) { .su-col-b { display: none; } .su-col-a { width: auto; right: 24px; } }
.su-wall::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(to bottom, transparent, var(--wash) 68%); pointer-events: none; }
.su-pause { position: absolute; right: 24px; bottom: 24px; z-index: 1; }
@media (max-width: 960px) { .su { grid-template-columns: 1fr; min-height: 0; } .su-left { padding: 32px 0 24px; } .su-wall { display: none; } .su-left h1 { font-size: 36px; } }
@media (max-width: 480px) { .su-form .two { grid-template-columns: 1fr; } .su-form .row { flex-direction: column; align-items: stretch; } .su-form .row .btn { width: 100%; } }

/* ---------- questions page ---------- */
.ask-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 6px; }
.ask-row span { font-size: 14px; color: var(--muted); }

/* ---------- misc ---------- */
.error-page { padding: 80px 0; text-align: left; }
.error-page h1 { font-size: 42px; }
.error-page p { font-size: 17px; max-width: 60ch; }
.theme-note { font-size: 12px; color: var(--faint); }
.photo-ph { border-radius: 6px; background: var(--photo); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--photo-fg); text-align: center; padding: 12px; }