/* A community's member dashboard, both modes. Light is the first community's own colours, read off its site on
   6 Oct 2026: plum #3D0B62, purple #7631AD, pink #EF5AA8, cream #FFFAF7.
   Look (WO-273, 7 Oct): an editorial page, not a stack of cards. Instrument Serif for headings and figures,
   Instrument Sans for everything else, both self hosted under /fonts (SIL OFL, licences beside the files).
   Sections are separated by one hairline and space, never by a box, except Announcements, which lead the page as
   one tinted panel of cards (9 Oct). Body text is 16px. One accent (--purple)
   carries every action: solid primary buttons and text links. Pink is only the focus ring and the soft launch dot.
   The button gradient the settings still write (--btn-grad) is not drawn anywhere.
   Desktop first (1280 and 1440 are the main views): a 1200px grid, main two thirds, a sticky right rail.
   Below 900px one column. */
/* The colour tokens below are the defaults. A community's own come from its settings file ("theme"), written to
   theme.css by the build and loaded after this file (lib/site.mjs themeCss). Dark is calm: a near black ground,
   pink as the accent, and dark text on a pink button. */
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-latin-wght.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/fonts/instrument-serif-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  --bg: #FFFAF7;
  --surface: #FFFFFF;
  --tint: #F6EBF8;
  --feature: #F6EBF8;
  --line: #EAD9EE;
  --ink: #3D0B62;
  --ink-2: #694F72;
  --purple: #7631AD;
  --pink: #EF5AA8;
  --link: #7631AD;
  --thumb: #3D0B62;
  --on-btn: #FFFFFF;
  --on-pink: #3D0B62; /* the New tag: plum on #EF5AA8 reads 4.54 to 1, white would read 3.14 */
  --plaque: transparent;
  /* The same padding in both themes, so the wordmark sits still when the theme flips (Chris, 8 Oct: the wording
     seemed to move). Only dark draws the plaque behind it. */
  --plaque-pad: 5px 10px;
  --err: #A3243B;
  --font-display: "Instrument Serif", Georgia, serif;
  --font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  /* the type scale, phone first, raised at 900px */
  --t-body: 16px;
  --t-meta: 14px;
  --t-h1: 36px;
  --t-h2: 27px;
  --t-fig: 48px;
  --t-quote: 21px;
  --radius: 6px;
  --gap-sec: 40px;
  /* "only" tells a browser that darkens pages on its own (Samsung Internet's dark mode for websites, Chrome's auto
     dark) that this page already chose its colours, so it leaves the logo plaque and the buttons alone. Without it
     Chris's phone, 8 Oct, drew the plaque dark and the logo vanished. */
  color-scheme: only light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15121A; --surface: #1E1A24; --tint: #26212D; --feature: #2A1F33; --line: #332C3B;
    --ink: #F3EEF6; --ink-2: #B9AFC2; --purple: #F07AB8; --pink: #F07AB8; --link: #F07AB8; --thumb: #26212D;
    --on-btn: #15121A; --on-pink: #15121A; --plaque: #F2E3F7; --plaque-pad: 5px 10px; --err: #FF9BA8;
    color-scheme: only dark;
  }
}
:root[data-theme="dark"] {
  --bg: #15121A; --surface: #1E1A24; --tint: #26212D; --feature: #2A1F33; --line: #332C3B;
  --ink: #F3EEF6; --ink-2: #B9AFC2; --purple: #F07AB8; --pink: #F07AB8; --link: #F07AB8; --thumb: #26212D;
  --on-btn: #15121A; --on-pink: #15121A; --plaque: #F2E3F7; --plaque-pad: 5px 10px; --err: #FF9BA8;
  color-scheme: only dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: var(--t-body); line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
button, input { font: inherit; color: inherit; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
[hidden] { display: none !important; }
.boot { padding: 40px 16px; text-align: center; color: var(--ink-2); }
h1, h2, h3 { font-weight: 400; }

/* page frame */
.app { max-width: 1200px; margin: 0 auto; padding: 16px 16px 40px; display: grid; gap: 24px; align-content: start; }
.app.narrow { max-width: 520px; }

/* top bar */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.logo { display: inline-flex; align-items: center; background: var(--plaque); padding: var(--plaque-pad); border-radius: var(--radius); line-height: 0; }
.logo img { height: 34px; width: auto; display: block; }
.logo .name { font-family: var(--font-display); font-size: 24px; line-height: 1.2; color: var(--ink); }
.tools { display: flex; align-items: center; gap: 16px; }
.ex { font-size: var(--t-meta); color: var(--ink-2); white-space: nowrap; }
.textbtn { background: transparent; border: 0; padding: 6px 0; font-size: 15px; font-weight: 500; color: var(--ink-2); cursor: pointer; min-height: 36px; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; }
.textbtn:hover { color: var(--ink); text-decoration-color: currentColor; }

/* greeting and banner */
.hello h1 { font-family: var(--font-display); font-size: var(--t-h1); line-height: 1.1; margin: 8px 0 0; letter-spacing: -0.01em; }
.notice { font-size: 15px; color: var(--ink-2); margin: 0; padding-left: 12px; border-left: 2px solid var(--purple); }
.soft { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; padding: 12px 0 0; border-top: 1px solid var(--line); }
.soft .say { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.soft b { font-size: var(--t-body); font-weight: 600; }
.soft p { margin: 0; font-size: 15px; color: var(--ink-2); }
.soft .act { font-weight: 600; font-size: 15px; white-space: nowrap; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--pink); margin-right: 8px; vertical-align: 2px; }

/* Announcements lead the home across the top (the launch call, 9 Oct: prominent, "in their face", 3 to 5 at a
   time): the page's one tinted, rounded panel, each announcement a card on it, every word shown. */
.box.news { border-top: 0; background: var(--feature); border-radius: 16px; padding: 18px 16px 20px; }
.cards { display: grid; gap: 12px; }
.ann { display: grid; gap: 6px; align-content: start; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.ann > * { max-width: 760px; }
.ann b { font-family: var(--font-display); font-size: 24px; font-weight: 400; line-height: 1.2; overflow-wrap: break-word; }
.ann .body { white-space: pre-line; overflow-wrap: anywhere; }
.ann .pin { justify-self: start; margin: 0; }

/* buttons: one solid accent, a square-ish corner, no gradient */
.pillbtn { display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; border-radius: var(--radius); padding: 9px 18px; min-height: 42px; border: 1px solid var(--purple); cursor: pointer; text-decoration: none; background: var(--purple); color: var(--on-btn); justify-self: start; }
.pillbtn:hover { filter: brightness(1.08); }
.pillbtn.ghost { background: transparent; color: var(--ink); border-color: var(--ink-2); }
.pillbtn.ghost:hover { filter: none; border-color: var(--ink); }

/* the two columns: one flow on a phone, main and rail from 900px */
.layout { display: flex; flex-direction: column; gap: var(--gap-sec); }
.main, .rail { display: contents; }
@media (max-width: 899px) {
  #next { order: -1; }
  #upcoming { order: 1; }
  #member { order: 2; }
}

/* sections: a hairline above, space around, no box */
.box { border-top: 1px solid var(--line); padding-top: 18px; display: grid; gap: 14px; min-width: 0; align-content: start; }
.stack { display: grid; gap: 12px; min-width: 0; }
.sechead { display: flex; align-items: baseline; gap: 12px; }
.sechead h2 { font-family: var(--font-display); font-size: var(--t-h2); line-height: 1.15; margin: 0; letter-spacing: -0.005em; flex: 1 1 auto; min-width: 0; }
.sechead a { font-size: var(--t-meta); font-weight: 600; color: var(--link); text-decoration: none; white-space: nowrap; }
.sechead a:hover, .post a:hover, .li a:hover, .more:hover { text-decoration: underline; }
.empty { margin: 0; font-size: 15px; color: var(--ink-2); }
.err { margin: 0; font-size: 15px; color: var(--err); }
.meta { font-size: var(--t-meta); color: var(--ink-2); line-height: 1.5; }
.more { font-size: var(--t-meta); font-weight: 600; color: var(--link); text-decoration: none; justify-self: start; }
/* Standalone links reach a 24px tap target (WCAG 2.5.8). Each is a flex or grid item, so the padding counts. */
.sechead a, .more, .soft .act, .foot a { padding-block: 3px; }
.li .meta a { padding-block: 4px; } /* a call's join link sits inline, so its padding widens the tap area only */

.card { display: grid; gap: 4px; min-width: 0; padding-bottom: 14px; }
.card b { font-size: 18px; font-weight: 600; line-height: 1.35; }
.card .body { font-size: var(--t-body); color: var(--ink); }
.list { display: grid; border-top: 1px solid var(--line); }
.sechead + .list { border-top: 0; }
.li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.li:first-child { padding-top: 2px; }
.li:last-child { border-bottom: 0; padding-bottom: 0; }
.li b { font-size: var(--t-body); font-weight: 600; overflow-wrap: break-word; }
.li .meta, .li .more { grid-column: 1 / -1; }
.li .r { font-size: var(--t-meta); color: var(--ink-2); white-space: nowrap; }

/* next up: the date set as type, not a tile */
.next { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: start; }
.date { text-align: center; padding: 2px 14px 2px 0; border-right: 1px solid var(--line); display: grid; }
.date small { font-size: var(--t-meta); font-weight: 600; color: var(--link); }
.date strong { font-family: var(--font-display); font-size: 40px; font-weight: 400; line-height: 1; }
.next .what { display: grid; gap: 4px; min-width: 0; }
.next b { font-size: 17px; font-weight: 600; line-height: 1.35; }
.next .pillbtn { margin-top: 8px; }

/* rows: sideways on a phone, a grid from 900px */
.row { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(200px, 74%, 280px); justify-content: start; gap: 20px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.row > * { scroll-snap-align: start; }
.row::-webkit-scrollbar { height: 6px; }
.row::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.hook { display: grid; gap: 8px; align-content: start; min-width: 0; border-left: 1px solid var(--line); padding: 2px 0 2px 16px; }
.hook img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); display: block; background: var(--tint); }
.hook q { font-family: var(--font-display); font-size: var(--t-quote); line-height: 1.25; quotes: "\201C" "\201D"; overflow-wrap: break-word; }

/* previous videos */
.group { display: grid; gap: 10px; }
.group h3 { font-family: var(--font-body); font-size: var(--t-body); font-weight: 600; color: var(--ink); margin: 6px 0 0; }
.vid { display: grid; gap: 6px; align-content: start; min-width: 0; }
.thumb { aspect-ratio: 16 / 10; width: 100%; border-radius: var(--radius); background: var(--thumb); position: relative; display: grid; place-items: center; border: 0; cursor: pointer; padding: 0; text-decoration: none; }
.thumb.play::after { content: ""; width: 0; height: 0; border-left: 16px solid #FFFFFF; border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 4px; }
.thumb .host { position: absolute; left: 10px; bottom: 8px; font-size: 13px; font-weight: 600; color: #FFFFFF; background: rgba(20, 4, 30, 0.6); border-radius: 4px; padding: 1px 7px; }
.thumb.out { background: var(--tint); }
.thumb.out span.go { font-size: 15px; font-weight: 600; color: var(--ink); }
.vid b { font-size: var(--t-body); font-weight: 600; line-height: 1.35; overflow-wrap: break-word; }
.player { display: grid; gap: 10px; }
.player .frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000000; }
.player iframe, .player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player .bar2 { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.player .bar2 b { font-size: var(--t-body); font-weight: 600; min-width: 0; }

/* spaces: two columns of plain entries */
.spaces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.space { display: grid; gap: 3px; align-content: start; text-decoration: none; color: var(--ink); min-width: 0; padding: 2px 0; }
.space b { font-size: var(--t-body); font-weight: 600; }
a.space:hover b { text-decoration: underline; text-underline-offset: 3px; }
.space .go { font-size: var(--t-meta); font-weight: 600; color: var(--link); margin-top: 4px; }
@media (max-width: 559px) { .spaces { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

/* chat */
.posts { display: grid; }
.post { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.post:first-child { padding-top: 2px; }
.post:last-child { border-bottom: 0; padding-bottom: 0; }
.post a:not(.more) { color: var(--ink); font-weight: 600; font-size: var(--t-body); text-decoration: none; overflow-wrap: break-word; }
.post .body { font-size: 15px; color: var(--ink); }
/* A long content idea opens on its first lines with "Show the whole post" (Chris, 9 Oct, option 2). */
.folded { display: grid; gap: 0; }
.folded .meta[hidden] { display: none; }
.showall { justify-self: start; background: none; border: 0; padding: 10px 0; min-height: 44px; font: 600 var(--t-meta) var(--font-body); color: var(--link); cursor: pointer; text-align: left; }
.showall:hover { text-decoration: underline; }
/* A post shows whole with its own line breaks (Chris, 9 Oct). */
.post .body, .li .meta, .hook .meta { white-space: pre-line; overflow-wrap: anywhere; }
/* A chat post's photo or GIF (8 Oct): small, its own shape, never wider than the column. */
.post .shot { display: block; width: auto; height: auto; max-width: min(100%, 280px); max-height: 200px; border-radius: var(--radius); background: var(--tint); margin: 4px 0; }
.tag { font-weight: 600; color: var(--link); margin-right: 8px; }
/* What a reply answers, on one line above it, the way Discord shows it (9 Oct). */
.replyto { display: block; font-size: var(--t-meta); color: var(--ink-2); border-left: 2px solid var(--line); border-radius: 0;
  padding-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.replyto b { color: var(--ink); font-weight: 600; }
/* New since the last visit on this device (9 Oct). Plum on Sparkle Pink in light, near black on the lifted pink in dark. */
.newtag { display: inline-block; margin-left: 8px; padding: 0 7px; border-radius: 999px; background: var(--pink); color: var(--on-pink);
  font-size: 12px; font-weight: 600; line-height: 1.6; vertical-align: 1px; }

/* rail */
.side b { font-size: 17px; font-weight: 600; }
.side p { margin: 0; font-size: 15px; color: var(--ink-2); }
.side .links { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.side .links a:not(.pillbtn) { font-weight: 600; text-decoration: none; font-size: 15px; }

/* with-servoflows only: her numbers, Film today, Sell next, the connect card, a pinned post */
.pair { display: flex; flex-direction: column; gap: var(--gap-sec); min-width: 0; }
.fig { display: grid; gap: 2px; }
.fig strong { font-family: var(--font-display); font-size: var(--t-fig); font-weight: 400; line-height: 1.05; letter-spacing: -0.01em; }
.num { font-variant-numeric: tabular-nums; }
.ranges { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 15px; color: var(--ink-2); padding-bottom: 4px; }
.ranges b { color: var(--ink); font-weight: 600; }
.li a { color: var(--ink); font-weight: 600; font-size: var(--t-body); text-decoration: none; overflow-wrap: break-word; }
.li .meta a { color: var(--link); font-size: inherit; }
.li .r.late { color: var(--err); font-weight: 600; }
.box .lead { margin: 0; font-size: 15px; }
.pin { font-size: var(--t-meta); font-weight: 600; color: var(--link); margin-right: 8px; }
.hook .pin { justify-self: start; margin: 0; }
.hook .kicker { font-size: var(--t-meta); font-weight: 600; letter-spacing: 0.04em; color: var(--ink-2); }

.foot { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 16px; font-size: var(--t-meta); color: var(--ink-2); }
.foot .textbtn { font-size: var(--t-meta); }

/* sign in */
/* One panel on the page's ground, the community's colours, its accent along the top (Chris, 8 Oct: look better). */
.door { display: grid; gap: 18px; margin-top: 6vh; padding: 32px 28px 28px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--purple); border-radius: 14px; }
.door h1 { font-family: var(--font-display); font-size: 40px; line-height: 1.1; letter-spacing: -0.01em; margin: 0; }
.door .form input::placeholder { color: var(--ink-2); opacity: 0.6; }
.door p { margin: 0; color: var(--ink-2); }
/* An email address in a heading or a line has no spaces, so a long one breaks anywhere instead of widening the page. */
.door h1, .door p { overflow-wrap: anywhere; }
.form { display: grid; gap: 10px; }
.form label { font-size: 15px; font-weight: 600; }
.form input { width: 100%; font-size: 17px; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--ink-2); background: var(--surface); color: var(--ink); min-height: 50px; }
.form input.code { letter-spacing: 0.35em; font-size: 24px; font-variant-numeric: tabular-nums; }
.form .pillbtn { min-height: 50px; justify-self: stretch; font-size: 16px; }
.form .pillbtn[disabled] { opacity: 0.6; cursor: progress; }
.msg { min-height: 1.5em; margin: 0; font-size: 15px; color: var(--err); }
.alt { display: flex; flex-wrap: wrap; gap: 10px 20px; font-size: 15px; }
.alt button { background: none; border: 0; padding: 0; color: var(--link); font-weight: 600; cursor: pointer; min-height: 36px; }

/* with-servoflows only: the agency card in the rail, and the community admin's settings page (WO-274) */
.pillbtn.yes[aria-pressed="true"] { background: var(--purple); color: var(--on-btn); border-color: var(--purple); }
.pillbtn.small { min-height: 34px; padding: 5px 12px; font-size: 14px; }
.msg.done { color: var(--ink-2); }
.app.admin { max-width: 1000px; }
.adminhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; }
.adminhead h1 { margin: 0; }
.tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--line); }
.tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 0 10px; margin-bottom: -1px; font-size: 16px; font-weight: 600; color: var(--ink-2); cursor: pointer; min-height: 44px; }
.tab.on { color: var(--ink); border-bottom-color: var(--purple); }
.panel { display: grid; gap: var(--gap-sec); }
.panel .group h3, .panel > .box > h3 { font-family: var(--font-body); font-size: var(--t-body); font-weight: 600; margin: 8px 0 0; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-size: 14px; font-weight: 600; }
.field input, .field select { width: 100%; font-size: 16px; padding: 9px 12px; border-radius: var(--radius); border: 1px solid var(--ink-2); background: var(--surface); color: var(--ink); min-height: 44px; }
.panel .box > .field { max-width: 420px; }
.panel .box > .pillbtn { justify-self: start; }
.arows { display: grid; }
.arow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: end; }
.arow:first-child { padding-top: 0; }
.arow .msg { grid-column: 1 / -1; min-height: 0; }
.arow .msg:empty { display: none; }
.check { display: flex; align-items: center; gap: 10px; font-size: 16px; min-height: 44px; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--purple); }
.order { list-style: none; margin: 0; padding: 0; counter-reset: o; border-top: 1px solid var(--line); max-width: 520px; }
.order li { counter-increment: o; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.order li > span:first-child::before { content: counter(o) "."; display: inline-block; width: 28px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.moves { display: flex; gap: 16px; }
.textbtn[disabled] { opacity: 0.35; cursor: default; text-decoration: none; }
.textbtn.warn { color: var(--err); }
.li .pillbtn.small, .li .acts { justify-self: end; align-self: start; }
.li .msg { grid-column: 1 / -1; min-height: 0; }
.li .msg:empty { display: none; }
.li.hid b, .li.paused b { color: var(--ink-2); }
.acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 16px; align-items: baseline; }
.acts .ask { font-size: 15px; color: var(--ink); }
.panel > .box:first-child { border-top: 0; padding-top: 0; }
.panel .msg:empty { display: none; }
.arow.four { border-bottom: 0; padding-bottom: 0; }
@media (pointer: fine) { .acts .textbtn { min-height: 0; padding: 0; } }
@media (max-width: 599px) {
  .li.person { grid-template-columns: minmax(0, 1fr); }
  .li.person .acts { justify-self: start; justify-content: flex-start; order: 3; }
  .li.person .msg { order: 4; }
}

/* desktop */
@media (min-width: 900px) {
  .arow { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; }
  /* The section rows read as a table: their labels show once, above the first row, and stay for screen readers. */
  .arows .arow + .arow .field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .arows .arow + .arow { padding-top: 10px; }
  .arow.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  :root { --t-h1: 48px; --t-h2: 30px; --t-fig: 60px; --t-quote: 23px; --gap-sec: 56px; }
  .app { padding: 28px 40px 56px; gap: 32px; }
  .bar { padding-bottom: 20px; }
  .logo img { height: 42px; }
  .hello h1 { margin-top: 16px; }
  .layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 72px; align-items: start; }
  .main, .rail { display: grid; gap: var(--gap-sec); align-content: start; min-width: 0; }
  /* app.js lowers the sticky top when the rail is taller than the window, so its last card stays reachable. */
  .rail { position: sticky; top: 20px; gap: 48px; }
  .pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
  /* Three across. One fills the row, two and four go two across, and with five the first takes two places. */
  .box.news { padding: 26px 28px 28px; gap: 18px; }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .cards:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
  .cards:has(> :nth-child(2):last-child), .cards:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards:has(> :nth-child(5):last-child) > :first-child { grid-column: span 2; }
  .row { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 28px 24px; overflow: visible; padding-bottom: 0; }
  #videos .row { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .door { padding-top: 40px; }
}

@media (pointer: coarse) {
  .pillbtn { min-height: 44px; }
  .textbtn { min-height: 44px; }
  /* A finger gets 44px on every standalone link (Chris, 8 Oct: they measured 25 to 31px at 375). The section and
     footer links and "Read the rest" grow to 44. A post's headline keeps its line and takes the extra height as
     padding pulled back by margin, so the list does not grow by 19px a post. */
  .sechead a, .more, .soft .act, .foot a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
  .post a:not(.more) { padding-block: 10px; margin-block: -6px -4px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
/* Touch targets, last in the file so they win over each component's own size (Chris, 9 Oct, the mobile pass:
   the door's links read 18 to 36px, a call's join link 26px). A link inside a row or a sentence takes the height
   as padding, which an inline box or a pulled back margin keeps out of the layout. */
@media (pointer: coarse) {
  .alt button { min-height: 44px; }
  .li > a { padding-block: 10px; margin-block: -10px; }
  .li .meta a, .door .meta a { padding-block: 13px; }
}