/* The AI Psych Brief — the whole stylesheet. No build step, no framework.
   2026-11-03 redesign after Andrew's archive mockup: a printed periodical.
   Paper ground, Libre Caslon for display, Newsreader for reading, Libre
   Franklin for the small labels, double rules on the masthead and footer, and
   one oxblood accent used only for numbers, hovers and the active filter.
   The email (src/render.js) uses the same tokens so the two read as one thing. */

:root {
  color-scheme: light;
  --paper: #fffefc;
  --paper-2: #f5f3ee;
  --ink: #0b0b0b;
  --ink-2: #2b2926;
  --ink-3: #5c5853;
  --rule: #d6d3cd;
  --rule-strong: #0b0b0b;
  --accent: #9b1c1c;
  --display: "Libre Caslon Text", "Iowan Old Style", Georgia, serif;
  --text: "Newsreader", "Iowan Old Style", Georgia, serif;
  --label: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
}

/* Light only (2026-11-04, Andrew: black text on a whiter page). The old dark
   theme followed the system setting and read as grey-on-brown. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.125rem;
  line-height: 1.55;
  font-optical-sizing: auto;
}
::selection { background: #e9d5a8; color: #161412; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 32px; }

/* --- masthead ------------------------------------------------------------ */

.masthead { padding-top: 22px; }
.meta-bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-family: var(--label);
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-bottom: 14px;
}
.meta-bar nav { display: flex; gap: 28px; align-items: baseline; }
.meta-bar a { text-decoration: none; font-weight: 500; color: var(--ink); }
.meta-bar a:hover { color: var(--accent); }
.meta-bar a[aria-current] { border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
.meta-bar .subscribe { border: 1px solid var(--ink); padding: 7px 14px; transition: background .2s, color .2s; }
.meta-bar .subscribe:hover { background: var(--ink); color: var(--paper); }
.wordmark-rule { border-top: 3px double var(--rule-strong); }
.wordmark {
  text-align: center;
  padding: 22px 0 20px;
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.2rem, 5.6vw, 3.9rem);
  letter-spacing: -.01em;
  line-height: 1;
}
.wordmark a { text-decoration: none; }
.wordmark a:hover { color: inherit; }
.wordmark em { font-style: italic; }
.wordmark-rule-b { border-top: 1px solid var(--rule-strong); }

/* --- page frame ---------------------------------------------------------- */

/* Prose pages (preferences, feedback, an issue) keep a reading measure inside
   the wide frame; body.wide (archive, landing, admin) uses the full 1040px. */
main.wrap > .measure, body:not(.wide) main.wrap > * { max-width: 720px; }
main.wrap { padding-bottom: 72px; }

footer.site {
  border-top: 3px double var(--rule-strong);
  padding: 24px 0 48px;
  font-family: var(--label);
  font-size: .75rem;
  line-height: 1.6;
  color: var(--ink-3);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* --- type ---------------------------------------------------------------- */

.page-head { padding: 64px 0 40px; display: grid; gap: 20px; max-width: 760px; }
h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3rem, 7vw, 5rem);
  line-height: 1;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}
h1.long { font-size: clamp(2.4rem, 5.6vw, 4rem); line-height: 1.04; }
h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: 1.15;
  margin: 48px 0 16px;
}
h3 { font-family: var(--display); font-weight: 400; }
p { text-wrap: pretty; }

.standfirst, .lede {
  font-family: var(--text);
  font-style: italic;
  font-size: 1.3125rem;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
  max-width: 62ch;
}
/* Ledes on the small utility pages sit under an h1 that is not in a .page-head. */
main.wrap > h1:first-child { padding-top: 64px; margin-bottom: 20px; }
main.wrap > h1 + .lede, main.wrap > h1 + .flash + .lede { margin-bottom: 32px; }

.fine { font-family: var(--label); font-size: .8125rem; color: var(--ink-3); line-height: 1.6; margin: 0; }
.backlink { margin-top: 48px; font-family: var(--label); font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; }
.backlink a { text-decoration: none; }

.flash {
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule);
  padding: 10px 0;
  font-family: var(--label);
  font-size: .875rem;
  color: var(--ink);
  margin: 0 0 18px;
}
.flash.error { color: var(--accent); border-top-color: var(--accent); }

/* Guidance to act on ("go look in spam") under the lede on signup pages. */
.notice {
  background: var(--paper-2);
  border-left: 3px solid var(--accent);
  padding: 16px 20px;
  font-size: 1.0625rem;
  line-height: 1.55;
  margin: 0 0 24px;
}
.notice .btn { margin: 6px 0 2px; }
.notice small { color: var(--ink-3); font-size: .9rem; display: inline-block; }

/* --- buttons & forms ----------------------------------------------------- */

.btn {
  font-family: var(--label);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 13px 24px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  transition: background .2s, color .2s;
}
.btn:hover { background: transparent; color: var(--ink); }
.btn.ghost { background: transparent; color: var(--ink-2); border-color: var(--rule); }
.btn.ghost:hover { color: var(--accent); border-color: var(--accent); }
.btn.ghost.quiet:hover { color: var(--ink); border-color: var(--ink); }
.btn.tiny { font-size: .6875rem; padding: 7px 12px; }

.signup, .prefs { display: grid; gap: 18px; max-width: 560px; }
.field { display: grid; gap: 6px; }
.field > span {
  font-family: var(--label);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.field > span em { font-style: normal; font-weight: 400; color: var(--ink-3); letter-spacing: .06em; margin-left: .4em; }
.field input, .field textarea {
  font-family: var(--text);
  font-size: 1.125rem; /* 16px or more keeps iOS Safari from zooming on focus */
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  width: 100%;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); font-style: italic; }
.field textarea { min-height: 160px; resize: vertical; line-height: 1.5; }
.field input:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .row { grid-template-columns: 1fr; } }

.check { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: 1rem; }
.check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--accent); }
.check em { display: block; font-style: normal; font-size: .9rem; color: var(--ink-3); margin-top: 4px; }

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }

form.danger { margin-top: 32px; }

/* --- the two-column band: label left, matter right ---------------------- */
/* Used by the archive months and every section of the landing page. */

.band { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 0 40px; padding-top: 44px; }
.band > h2 {
  font-family: var(--label);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0;
  padding-top: 30px;
  position: sticky;
  top: 20px;
  align-self: start;
  line-height: 1.5;
}
.band > h2 span { display: block; font-weight: 400; color: var(--ink-3); letter-spacing: .06em; margin-top: 4px; }
.band > .matter { border-top: 1px solid var(--rule-strong); padding-top: 26px; }

/* --- archive ------------------------------------------------------------- */

.controls {
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  padding: 12px 0;
  font-family: var(--label);
  font-size: .8125rem;
  color: var(--ink-2);
}
.controls strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.filters { display: flex; flex-wrap: wrap; gap: 4px 22px; list-style: none; margin: 0; padding: 0; }
.filters button {
  font: inherit;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .6875rem;
  font-weight: 500;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 4px 0;
  cursor: pointer;
  color: var(--ink-2);
}
.filters button:hover { color: var(--ink); }
.filters button[aria-pressed="true"] { color: var(--accent); border-bottom-color: var(--accent); }

.month[hidden] { display: none; }
.entries { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-strong); }
.entry {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 0 28px;
  padding: 28px 0 30px;
  border-bottom: 1px solid var(--rule);
}
.entry[hidden] { display: none; }
.stamp {
  font-family: var(--label);
  font-size: .75rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.5;
  padding-top: .5rem;
}
.stamp b { display: block; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.entry h3 {
  font-size: clamp(1.3rem, 2.3vw, 1.6875rem);
  line-height: 1.22;
  letter-spacing: -.005em;
  margin: 0 0 16px;
  text-wrap: balance;
}
.entry h3 a, .toc h3 a {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .35s cubic-bezier(.2, .7, .2, 1);
}
.entry h3 a:hover, .toc h3 a:hover { background-size: 100% 1px; color: inherit; }
.entry dl, .toc dl, .defs { margin: 0; }
.drow { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 16px; font-size: 1.0625rem; line-height: 1.5; }
.drow + .drow { margin-top: 10px; }
.drow dt {
  font-family: var(--label);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: .42rem;
}
.drow dd { margin: 0; max-width: 64ch; text-wrap: pretty; }
.drow.also dd { color: var(--ink-2); }
.drow.pearl dd { font-style: italic; font-size: 1.125rem; color: var(--ink); }
.tag {
  font-family: var(--label);
  font-style: normal;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-left: .6em;
  white-space: nowrap;
}
.tag::before { content: "— "; }

.empty { padding: 48px 0; font-style: italic; color: var(--ink-3); }
.load { display: flex; justify-content: center; gap: 16px; padding: 56px 0 24px; }
.load a {
  font-family: var(--label);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--ink);
  padding: 12px 22px;
}
.load a:hover { background: var(--ink); color: var(--paper); }

/* --- landing ------------------------------------------------------------- */

/* "This morning's issue": the real contents of the latest issue, set like a
   journal's contents page. Filled from /api/latest; links to the archive
   without script. */
.toc .drow { grid-template-columns: 168px minmax(0, 1fr); }
.toc .drow + .drow { margin-top: 0; }
.toc .drow { padding: 16px 0 18px; border-bottom: 1px solid var(--rule); }
.toc .drow:first-child { padding-top: 0; }
.toc .drow dd { font-family: var(--display); font-size: 1.25rem; line-height: 1.3; }
.toc .read { margin: 22px 0 0; font-family: var(--label); font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; }
.toc .read a { text-decoration: none; border-bottom: 1px solid currentColor; }

.defs .drow { grid-template-columns: 220px minmax(0, 1fr); }
.defs .drow + .drow { margin-top: 18px; }
.defs .drow dt { font-family: var(--display); font-size: 1.1875rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink); padding-top: 0; line-height: 1.35; }
.defs .drow dd { color: var(--ink-2); }

.matter p { margin: 0 0 14px; max-width: 64ch; }
.matter p:last-child { margin-bottom: 0; }

.page-head > * { min-width: 0; }
.quick { display: flex; gap: 0; width: 100%; max-width: 560px; margin-top: 8px; }
.quick .btn { flex: none; padding-left: 18px; padding-right: 18px; }
.quick input {
  flex: 1;
  min-width: 0;
  font-family: var(--text);
  font-size: 1.125rem;
  padding: 12px 14px;
  border: 1px solid var(--ink);
  border-right: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
}
.quick input::placeholder { color: var(--ink-3); font-style: italic; }
.quick input:focus-visible { outline: none; box-shadow: inset 0 -2px 0 var(--accent); }
.quick + .fine { margin-top: 10px; }

/* --- a rendered issue ---------------------------------------------------- */

/* The issue page reuses the email's section HTML, whose colors are inline.
   These selectors re-map those literal values onto the page tokens. */
@supports (color: black) {
  .issue-page [style*="color:#161412"] { color: var(--ink) !important; }
  .issue-page [style*="color:#4a453f"] { color: var(--ink-2) !important; }
  .issue-page [style*="color:#6f6962"] { color: var(--ink-3) !important; }
  .issue-page [style*="color:#9b1c1c"] { color: var(--accent) !important; }
  .issue-page [style*="background:#f3efe5"] { background: var(--paper-2) !important; }
  .issue-page [style*="border-top:1px solid #161412"] { border-top-color: var(--rule-strong) !important; }
  .issue-page [style*="border-left:2px solid #9b1c1c"] { border-left-color: var(--accent) !important; }
}

/* --- admin --------------------------------------------------------------- */

.admin-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 48px; }
.admin-head h1 { margin: 0; font-size: clamp(2.4rem, 5vw, 3.4rem); }

.fb-list { display: grid; gap: 0; margin-top: 16px; border-top: 1px solid var(--rule-strong); }
.fb { border-bottom: 1px solid var(--rule); padding: 18px 0; }
.fb header { margin-bottom: 8px; font-family: var(--label); font-size: .875rem; }
.fb header .sub { display: block; margin-top: 3px; }
.fb p { margin: 0; white-space: pre-wrap; }

.stats { display: flex; flex-wrap: wrap; gap: 0; margin: 28px 0 24px; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule); }
.stat-box { flex: 1 1 116px; padding: 14px 16px 14px 0; }
.stat-box b { display: block; font-family: var(--display); font-weight: 400; font-size: 2rem; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat-box span { font-family: var(--label); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.stat-box.warn b { color: var(--accent); }

/* Seven columns will not fit a phone; scroll the table, never the page. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: 1px solid var(--rule-strong); }
table.admin { width: 100%; border-collapse: collapse; font-size: 1rem; min-width: 720px; }
table.admin th {
  text-align: left;
  font-family: var(--label);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
table.admin td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.admin td.em { font-weight: 600; word-break: break-all; min-width: 190px; }
table.admin td.num { white-space: nowrap; color: var(--ink-3); font-variant-numeric: tabular-nums; }
table.admin td.act { text-align: right; }
.sub { display: block; font-family: var(--label); font-size: .75rem; color: var(--ink-3); font-weight: 400; }

.badge {
  display: inline-block;
  font-family: var(--label);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-3);
}
.badge.ok { color: var(--ink); }
.badge.warn { color: #8a6d1f; }
.badge.bad { color: var(--accent); }

/* --- narrow screens ------------------------------------------------------ */

@media (max-width: 820px) {
  .wrap { padding: 0 20px; }
  .band { grid-template-columns: 1fr; gap: 0; }
  .band > h2 { position: static; padding: 0 0 12px; }
  .band > h2 span { display: inline; margin-left: 10px; }
  .entry { grid-template-columns: 1fr; gap: 6px; }
  .stamp { padding-top: 0; display: flex; gap: 12px; }
  .drow, .toc .drow, .defs .drow { grid-template-columns: 1fr; gap: 2px; }
  .drow dt { padding-top: 0; }
  .page-head { padding: 44px 0 32px; }
  .meta-bar .when { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* --- reading comfort on the web issue page (2026-11-04) ------------------ */
/* The email's 17px body is right in a mail client; on a desktop page at this
   measure it reads small. Scale up body copy and set a drop cap on the lead. */
@media (min-width: 640px) {
  .issue-page p[style*="font-size:17px"],
  .issue-page td[style*="font-size:17px"] { font-size: 19px !important; line-height: 1.62 !important; }
}
.issue-page .lead::first-letter {
  font-family: var(--display);
  float: left;
  font-size: 3.6em;
  line-height: .82;
  padding: .08em .1em 0 0;
  color: var(--accent);
}

/* --- AI warning box (2026-11-04) ---------------------------------------- */
/* The same tinted oxblood box as the top of every email. Andrew wants it kept
   visibly a warning, so it is a filled box, not another italic line. */
:root { --warn-bg: #f8ebe6; --warn-ink: #7a1616; --warn-edge: #9b1c1c; }
.ai-note {
  background: var(--warn-bg);
  border: 1px solid var(--warn-edge);
  color: var(--warn-ink);
  font-family: var(--label);
  font-size: .875rem;
  line-height: 1.55;
  padding: 11px 16px;
  margin: 0;
}
.ai-note strong { color: var(--warn-edge); font-weight: 600; }
.issue-page .ai-note { max-width: 62ch; }

/* --- front page (2026-11-04): the homepage set as a broadsheet ----------- */

body.front .wordmark { font-size: clamp(2.6rem, 8.4vw, 5.6rem); padding: 26px 0 8px; }
.motto {
  text-align: center;
  font-family: var(--text);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--ink-2);
  margin: 0 0 18px;
}
.dateline {
  border-top: 1px solid var(--rule-strong);
  border-bottom: 3px double var(--rule-strong);
  display: flex;
  justify-content: space-between;
  gap: 8px 20px;
  flex-wrap: wrap;
  padding: 8px 0;
  font-family: var(--label);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
}
.front .ai-note { margin: 18px 0 0; text-align: center; }

.kicker {
  font-family: var(--label);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 8px;
}
.story h2, .story h3 { margin: 0 0 10px; text-wrap: balance; }
.story h2 a, .story h3 a { text-decoration: none; }
.story .cite { font-family: var(--label); font-size: .75rem; color: var(--ink-3); margin: 0 0 14px; letter-spacing: .02em; }
.story p.body { margin: 0 0 12px; font-size: 1.0625rem; line-height: 1.55; hyphens: auto; }
.story .jump { font-family: var(--label); font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.story .jump a { text-decoration: none; border-bottom: 1px solid currentColor; }

.fp { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0; margin-top: 28px; }
.fp-lead { padding-right: 32px; border-right: 1px solid var(--rule); }
.fp-lead h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); line-height: 1.06; letter-spacing: -.015em; }
.fp-lead .cols { columns: 2 16rem; column-gap: 28px; column-rule: 1px solid var(--rule); }
.fp-lead .cols p.body:first-child::first-letter {
  float: left; font-family: var(--display); font-size: 3.6em; line-height: .82;
  padding: 6px 8px 0 0; color: var(--ink);
}
.pull {
  break-inside: avoid;
  border-top: 2px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  margin: 6px 0 14px;
  padding: 12px 0;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.35;
}
.pull small { display: block; font-family: var(--label); font-style: normal; font-size: .625rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.fp-side { padding-left: 28px; display: grid; align-content: start; }
.fp-side .story + .story { border-top: 1px solid var(--rule-strong); margin-top: 20px; padding-top: 18px; }
.fp-side h3 { font-size: 1.45rem; line-height: 1.15; }

.fp-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 3px double var(--rule-strong);
  margin-top: 36px;
  padding-top: 20px;
}
.fp-row > * { padding: 0 24px; }
.fp-row > * + * { border-left: 1px solid var(--rule); }
.fp-row > :first-child { padding-left: 0; }
.fp-row > :last-child { padding-right: 0; }
.fp-row h3 { font-size: 1.3rem; line-height: 1.2; }
.briefs { list-style: none; margin: 0; padding: 0; }
.briefs li { font-size: 1rem; line-height: 1.5; padding: 0 0 10px; margin: 0 0 10px; border-bottom: 1px solid var(--rule); }
.briefs li:last-child { border-bottom: 0; }

.box { border: 1px solid var(--rule-strong); outline: 1px solid var(--rule-strong); outline-offset: 3px; padding: 18px 18px 16px; }
.box h3 { font-size: 1.5rem; margin: 0 0 6px; }
.box p { margin: 0 0 12px; font-size: 1rem; line-height: 1.5; }
.box .quick { flex-direction: column; gap: 8px; max-width: none; }
.box .quick input { border-right: 1px solid var(--rule-strong); }

.fp-loading { color: var(--ink-3); font-style: italic; }

.inside {
  border-top: 3px double var(--rule-strong);
  margin-top: 40px;
  padding-top: 16px;
}
.inside > h2 { font-family: var(--label); font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-align: center; margin: 0 0 18px; }
.inside dl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; }
.inside dl > div { padding: 0 16px; }
.inside dl > div + div { border-left: 1px solid var(--rule); }
.inside dl > div:first-child { padding-left: 0; }
.inside dl > div:last-child { padding-right: 0; }
.inside dt { font-family: var(--display); font-size: 1.15rem; margin-bottom: 6px; }
.inside dd { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--ink-2); }

.colophon { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border-top: 1px solid var(--rule-strong); margin-top: 40px; padding-top: 20px; }
.colophon > * { padding: 0 28px; }
.colophon > :first-child { padding-left: 0; border-right: 1px solid var(--rule); }
.colophon > :last-child { padding-right: 0; }
.colophon h2 { font-size: 1.6rem; margin: 0 0 12px; }
.colophon p { font-size: 1.0625rem; margin: 0 0 12px; }

@media (max-width: 900px) {
  .fp { grid-template-columns: 1fr; }
  .fp-lead { padding-right: 0; border-right: 0; }
  .fp-side { padding-left: 0; border-top: 1px solid var(--rule-strong); margin-top: 24px; padding-top: 18px; }
  .fp-row { grid-template-columns: 1fr 1fr; }
  .fp-row > .box { grid-column: 1 / -1; border-left: 1px solid var(--rule-strong); padding: 18px; margin-top: 24px; }
  .fp-row > :nth-child(2) { padding-right: 0; }
  .inside dl { grid-template-columns: 1fr 1fr; gap: 18px 0; }
  .inside dl > div { padding: 0 16px 0 0; border-left: 0 !important; }
}
@media (max-width: 600px) {
  .dateline { justify-content: center; text-align: center; }
  .dateline .opt { display: none; }
  .fp-lead h2 { font-size: 1.8rem; }
  .meta-bar > span:first-child { display: none; }
  .fp-row, .colophon { grid-template-columns: 1fr; }
  .fp-row > *, .colophon > * { padding: 0 !important; border-left: 0 !important; border-right: 0 !important; }
  .fp-row > * + *, .colophon > * + * { border-top: 1px solid var(--rule-strong) !important; margin-top: 22px; padding-top: 18px !important; }
  .fp-row > .box { padding: 18px !important; border: 1px solid var(--rule-strong) !important; }
  .inside dl { grid-template-columns: 1fr; }
}