/* Fillbrook web prototype: the home page as a newspaper front page.
   One stylesheet for the whole site. The pages carry no style="" attributes, <style> blocks or scripts,
   so a Content-Security-Policy of default-src 'none'; style-src 'self'; img-src 'self'; font-src 'self' covers it.
   Colours are the tokens in design/DESIGN-KIT.md (Paper theme). Five are mixed from those tokens; they are written
   out as hex (so browsers without color-mix() draw them right) and say what they were mixed from.
   Text is sized in rem, so the browser's own text-size setting applies. Display type (the wordmark, the headline)
   is sized to its column so it can never push the layout sideways. */

/* ---------------------------------------------------------------- fonts (self-hosted, SIL OFL) */

@font-face {
  font-family: "Literata";
  src: url("fonts/literata-latin-opsz-normal.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/atkinson-hyperlegible-next-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/atkinson-hyperlegible-next-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("fonts/atkinson-hyperlegible-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------- tokens */

:root {
  --page: #F6F1E7;
  --surface: #FFFDF8;
  --ink: #1B1A17;
  --frame: #1E1C19;
  --block: #23211D;
  --gridline: #766F64;
  --pen: #15346F;      /* pen navy: the reference's button blue */
  --accent: #1D4E89;   /* brook: hover and focus */
  --starter: #E8DFCC;  /* starter-word wash on the printable grid */
  --muted: #595349;
  --brick: #9E3B2B;
  /* mixed from tokens (sRGB), written out */
  --hair: #C5C0B5;     /* gridline 38% on page: hairline rules */
  --keyline: #ACA69B;  /* gridline 58% on page: card borders, ear boxes */
  --tag: #E0C4B8;      /* brick 25% on page: the APP ONLY wash (ink text on it, 10:1) */
  --gridgap: #524D45;  /* gridline 60% with ink 40%: the thumbnail grids' lines */
  --panel: #D5D9D9;    /* brook 15% on page: the greyed-blue phone panel */

  --serif: "Literata", Georgia, "Times New Roman", serif;
  --sans: "Atkinson Hyperlegible Next", "Segoe UI", Arial, sans-serif;
  --mono: "Atkinson Hyperlegible Mono", Consolas, monospace;
  color-scheme: light;
}

/* ---------------------------------------------------------------- base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.4;
  font-optical-sizing: auto;
  font-kerning: normal;
}

h1, h2, h3, p, ul, ol {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--pen);
}
a:hover {
  color: var(--accent);
}

a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 2;
  padding: 10px 16px;
  background: var(--pen);
  color: var(--surface);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus {
  top: 12px;
  color: var(--surface);
}

.wrap {
  width: min(100% - 32px, 1468px);
  margin-inline: auto;
}

.nw {
  white-space: nowrap;
}
/* lines the reference breaks on purpose; they are lines only on wide screens (see 1340px and up) */
.il,
.pb {
  display: inline;
}
.hl {
  display: block; /* the desk headline: one sentence per line at every width */
}

/* Spaced capitals. This Literata subset has no small-caps feature, so labels are capitals at 12-13px. Their capital
   height matches the DESIGN-KIT's 15-16px small caps (small-cap letters are about 0.7 of a capital). */
.eyebrow,
.ear,
.tagline,
.nav-list a,
.dateline,
.card-time,
.tag,
.ruled li,
.cal-month,
.wl-h {
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- buttons and links */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 18px;
  border: 1px solid var(--pen);
  border-radius: 2px;
  background: var(--pen);
  color: var(--surface);
  font-family: var(--serif);
  font-weight: 380;
  font-variation-settings: "opsz" 36;
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
  line-height: 1.25;
  text-decoration: none;
}
.btn:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
}
.btn-line {
  background: transparent;
  color: var(--pen);
}
.btn-line:hover {
  background: var(--surface);
  border-color: var(--ink);
  color: var(--ink);
}

.arr {
  flex: none;
  width: 15px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.btn-lg {
  min-height: 50px;
  padding: 12px 22px;
  font-size: 1.125rem;
  gap: 14px;
}
.btn-sm {
  min-height: 31px;
  padding: 4px 16px;
  font-size: 1rem;
  gap: 10px;
}

.more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 2px 5px 0;
  border-bottom: 1.5px solid var(--pen);
  font-weight: 650;
  font-size: 1rem;
  line-height: 1.25;
  text-decoration: none;
}
.more:hover {
  border-bottom-color: var(--accent);
}

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

.mast {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 24px;
  padding: 10px 0 0;
}

.mast-side {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.mast-l {
  justify-self: start;
}
.mast-r {
  justify-self: end;
}

.ear {
  flex: none;
  font-size: 0.75rem;
  line-height: 1.3;
  letter-spacing: 0.05em;
  padding: 9px 6px 9px 10px;
  border: 1px solid var(--keyline);
}
.ear span {
  display: block;
}
.ear-l {
  width: 76px;
  border-right: 0;
}
.ear-r {
  width: 92px;
  padding: 11px 10px 11px 14px;
  line-height: 1.6;
}

.art-cat {
  width: 308px;
  margin-left: 2px;
}
.art-mug {
  width: 168px;
  margin-left: 4px;
}

.mast-title {
  text-align: center;
}

.wordmark {
  font-size: min(6.75rem, 7.03vw);
  line-height: 0.86;
  overflow-wrap: anywhere; /* only under a reader's own wide letter spacing on a very narrow screen */
  font-weight: 900;
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.07em;
  margin-right: -0.07em;
}
.wordmark a {
  display: inline-block; /* so the focus ring wraps the word, not a line box above the page */
  color: var(--ink);
  text-decoration: none;
}
.wordmark a:hover {
  color: var(--ink);
}

.tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.2;
  white-space: nowrap;
}
.tagline::before,
.tagline::after {
  content: "";
  flex: none;
  width: 58px;
  border-top: 1.5px solid var(--ink);
}
.tagline::after {
  margin-left: -0.2em; /* the tracking after the last letter */
}

/* navigation row: hairline above, heavy rule below */
.nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  margin-top: 8px;
  border-top: 1px solid var(--hair);
  border-bottom: 3px solid var(--ink);
  min-height: 46px;
}
.nav-list {
  grid-column: 2;
  align-self: start;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 42px;
  list-style: none;
  padding: 0;
}
.nav-list a {
  display: block;
  padding: 10px 1px 2px;
  border-bottom: 3px solid transparent;
  color: var(--ink);
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  text-decoration: none;
}
.nav-list a:hover {
  color: var(--pen);
  border-bottom-color: var(--hair);
}
.nav-list a[aria-current="page"] {
  color: var(--pen);
  border-bottom-color: var(--pen);
}
.btn-nav {
  grid-column: 3;
  justify-self: end;
  margin: 3px 0;
  min-height: 39px;
  padding: 7px 20px;
  font-size: 1rem;
  gap: 16px;
  white-space: nowrap;
}

/* dateline: a thin second rule under the heavy one, then a hairline */
.dateline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: 16px;
  margin-top: 3px;
  padding: 6px 0 5px;
  border-top: 1px solid var(--gridline);
  border-bottom: 1px solid var(--hair);
  font-size: 0.78125rem;
  letter-spacing: 0.1em;
  font-variant-numeric: lining-nums;
}
.dl-no {
  text-align: center;
}
.dl-motto {
  text-align: right;
}

/* ---------------------------------------------------------------- front: lead, cards, desk */

.front {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 776px minmax(0, 0.66fr);
  grid-template-areas: "lead cards desk";
  column-gap: 25px;
  align-items: start;
  padding: 11px 0 15px;
  border-bottom: 2px solid var(--ink);
}

.lead {
  grid-area: lead;
  padding: 0 0 0 3px;
  container-type: inline-size;
}
.lead h1 {
  /* sized to the column: "edition." is the widest line, 3.62 times the type size */
  font-size: min(7rem, 27.2cqi);
  line-height: 0.95; /* the reference's line spacing; the letters can't grow, the column sets their width */
  font-weight: 900;
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.07em;
  margin: -6px 0 12px -3px;
  overflow-wrap: anywhere; /* only if a reader's own letter spacing makes a word wider than the column */
}
.stop {
  color: var(--pen);
}
.intro {
  max-width: 17.5em;
  margin-bottom: 18px;
  font-size: 1.21875rem;
  line-height: 1.25;
}

.cards {
  grid-area: cards;
  display: grid;
  grid-template-columns: minmax(0, 250fr) minmax(0, 250fr) minmax(0, 264fr);
  gap: 0 6px;
  list-style: none;
  padding: 0;
}
/* each card is five rows of one shared grid (head, grid, blurb, time, button), so the rows line up across the cards */
.card {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  row-gap: 0;
  justify-items: center;
  align-items: start;
  padding: 16px 4px 12px;
  border: 1px solid var(--keyline);
  text-align: center;
}
/* the title on the left, the tag and size on the right; if the two don't fit side by side (a long name, or a large
   text setting) the size moves to its own line rather than running into the title */
.card-head {
  justify-self: stretch;
  align-self: stretch;
  min-height: 47px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2px 8px;
  margin: 0 10px 10px;
  text-align: left;
}
.card-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  align-self: stretch;
  gap: 2px;
  margin-left: auto;
}
.card-title {
  min-width: 0;
  overflow-wrap: break-word;
  font-size: 1.5625rem;
  line-height: 1;
  font-weight: 800;
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.05em;
  text-wrap: balance; /* a long name wraps inside its column rather than running into the size */
}
.card-no {
  display: block;
  margin-bottom: 2px;
  font-size: 1rem;
  font-weight: 700;
  font-variation-settings: normal;
  letter-spacing: 0;
}
.card-size {
  margin-top: auto;
  font-size: 0.9375rem;
  font-variant-numeric: lining-nums;
  white-space: nowrap;
  padding-bottom: 1px;
}
.tag {
  align-self: flex-end;
  margin-top: 0;
  padding: 4px 7px 3px;
  border-radius: 2px;
  background: var(--tag);
  color: var(--ink);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  line-height: 1.3;
  font-weight: 450;
  white-space: nowrap;
}
.card-blurb {
  max-width: 14em;
  margin: 10px 0 4px;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.card:last-child .card-blurb {
  max-width: 100%;
}
.card-time {
  align-self: end;
  margin: 0 0 6px;
  font-size: 0.78125rem;
  letter-spacing: 0.06em;
}

/* the grids: a CSS grid of cells on 1px lines, inside a fine frame. No letters on the cards. */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--n), var(--cell));
  grid-auto-rows: var(--cell);
  gap: 1px;
  width: max-content;
  border: 1.5px solid var(--frame);
  background: var(--gridgap);
}
.grid > span {
  background: var(--surface);
}
.grid > .b {
  background: var(--block);
}
.g11 { --n: 11; --cell: 16px; }
.g13 { --n: 13; --cell: 14px; }
.g15 { --n: 15; --cell: 12px; } /* the real Magazine is square: 12px keeps it level with the others */
.g17 { --n: 17; --cell: 11px; }
.g19 { --n: 19; --cell: 10px; }
.g21 { --n: 21; --cell: 9px; }

.desk {
  grid-area: desk;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  padding: 0 0 0 16px;
  border-left: 1px solid var(--hair);
}
.eyebrow {
  margin-bottom: 9px;
  font-size: 0.78125rem;
  letter-spacing: 0.1em;
}
.desk .eyebrow {
  margin-top: 1px;
}
.desk-h {
  font-size: 1.9375rem;
  line-height: 1;
  font-weight: 800;
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.05em;
}
.desk-h::after {
  content: "";
  display: block;
  width: 44px;
  margin: 14px 0 13px;
  border-top: 2px solid var(--ink);
}
.desk-para {
  max-width: min(13.6em, 100% - 20px); /* the pen's cap keeps the column's last 20px */
  font-size: 1rem;
  line-height: 1.32;
  position: relative;
  z-index: 1;
}
.art-pen {
  align-self: flex-end;
  width: 172px;
  margin: -40px -4px 0 0; /* the cap sits beside the paragraph's last lines, as in the reference */
}
.desk-sig {
  align-self: flex-end;
  margin-top: auto;
  padding-top: 6px;
  font-size: 1rem;
}

/* ---------------------------------------------------------------- lower: four columns between hairlines */

.lower {
  display: grid;
  grid-template-columns: 488fr 446fr 253fr 281fr;
  padding: 4px 0 0;
}
.col {
  min-width: 0;
  padding: 8px 24px 14px;
  border-left: 1px solid var(--hair);
}
.col-print {
  padding-left: 4px;
  padding-right: 18px;
  border-left: 0;
}
.col-diary {
  padding-inline: 18px 10px;
}
.sec-h {
  font-size: 1.9375rem;
  line-height: 1.05;
  font-weight: 800;
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.05em;
  margin-bottom: 4px;
}
.cal-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 8px;
  margin: 10px 0 5px;
}
.cal-row .tag {
  align-self: center;
  letter-spacing: 0.06em;
}
.sec-p {
  text-wrap: pretty;
  max-width: 28em;
  font-size: 1rem;
  line-height: 1.3;
}
.sec-p-print {
  max-width: 21.6em;
}
.sec-p-sm {
  line-height: 1.25;
}

.ruled {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--hair);
}
.ruled li {
  padding: 5px 0 4px;
  border-bottom: 1px solid var(--hair);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  line-height: 1.35;
}
.side .more {
  margin-top: 16px;
  margin-right: -16px; /* the link may use the column's gutter rather than wrap */
}

.print-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 164px;
  align-items: end;
  gap: 6px;
  margin-top: 4px;
}
.art-print {
  width: calc(100% + 22px);
  max-width: 340px;
  margin-left: -22px;
}

.issue-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 156px;
  align-items: stretch;
  gap: 2px;
  margin-top: 6px;
}
.issue-body .side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.issue-body .ruled {
  align-self: stretch;
  margin-top: auto;
}
.art-cover {
  align-self: end;
  width: calc(100% + 8px);
  max-width: 270px;
  margin-left: -8px;
}
.art-stamp {
  width: 88px;
  margin: 0 0 8px -30px;
}

.col-diary .sec-h {
  font-size: 1.75rem;
}
.cal-month {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.cal {
  display: grid;
  grid-template-columns: repeat(7, 29px);
  grid-auto-rows: 20px;
  align-items: center;
  justify-items: center;
  width: max-content;
}
.wd {
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: lining-nums;
}
.dot {
  width: 11px;
  height: 11px;
  border: 1.5px solid var(--pen);
  border-radius: 50%;
}
.dot-on {
  background: var(--pen);
}
.dot-blank {
  border: 0;
}
.diary-cal::after {
  content: "";
  display: block;
  width: 22px;
  margin: 10px 0 0 2px;
  border-top: 1.5px solid var(--keyline);
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, auto); /* each as wide as its words; they shrink to wrap only when they must */
  justify-content: start;
  margin: 12px 0 10px;
}
.stat {
  padding: 2px 12px 6px 0;
}
.stat + .stat {
  padding-right: 0;
  padding-left: 12px;
  border-left: 1px solid var(--keyline);
}
.stat-label {
  display: block;
  font-size: 1rem;
}
.stat-num {
  display: block;
  margin-top: 2px;
  font-weight: 600;
  font-size: 1.1875rem;
  font-variant-numeric: lining-nums;
}
.stat-num::after {
  content: "";
  display: block;
  width: 20px;
  margin-top: 8px;
  border-top: 1.5px solid var(--ink);
}

.col-app {
  padding: 6px 0 10px 12px;
}
.panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 12px 14px 12px;
  background: var(--panel);
}
.app-h span {
  display: block;
}
.app-h {
  color: var(--pen);
  font-size: 1.5625rem;
  line-height: 0.98;
  font-weight: 800;
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.05em;
  margin-bottom: 8px;
}
.app-p {
  font-size: 1rem;
  line-height: 1.25;
}
.app-art {
  display: grid;
  grid-template-columns: 186px minmax(0, 1fr);
  align-items: end;
  margin-top: 12px;
}
.art-phones {
  grid-column: 1;
  grid-row: 1;
  width: 186px;
}
.art-note {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  width: 78px;
  margin: 0 -8px 0 -4px;
}
/* "Coming soon to Google Play": a boxed notice in the house type. Not a store badge, and not a button. */
.store {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  justify-self: start;
  display: inline-flex;
  flex-direction: column;
  margin-top: -30px;
  padding: 5px 12px 6px 11px;
  border: 1px solid var(--ink);
  background: var(--surface);
  color: var(--ink);
  line-height: 1.15;
}
.store-k {
  font-size: 0.875rem;
}
.store-n {
  font-size: 1.25rem;
  font-weight: 700;
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.02em;
}
.store-ios {
  margin-top: 8px;
  font-size: 1rem;
  color: var(--muted);
}

/* ---------------------------------------------------------------- footer */

.foot {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 8px 40px;
  margin-top: 14px;
  padding: 18px 0 36px;
  border-top: 2px solid var(--ink);
}
.foot-h {
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 4px;
}
.foot-about p {
  max-width: 44em;
  font-size: 1.0625rem;
}
.foot-links {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  gap: 8px 28px;
  list-style: none;
  padding: 28px 0 0;
  font-size: 1rem;
}
.foot-small {
  grid-column: 1 / -1;
  padding-top: 10px;
  border-top: 1px solid var(--hair);
  color: var(--muted);
  font-size: 1rem;
}

/* ---------------------------------------------------------------- the "coming to the web" page */

.stub {
  padding-bottom: 8px;
}
.stub-lead {
  padding: 24px 0 26px;
  border-bottom: 2px solid var(--ink);
}
.stub-h {
  font-size: clamp(44px, 6.4vw, 84px);
  line-height: 0.95;
  font-weight: 900;
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.05em;
  margin-bottom: 16px;
}
.stub-lead .intro {
  max-width: 34em;
}
.printable {
  padding: 18px 0 24px;
  border-bottom: 1px solid var(--hair);
}
.pq-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 24px;
  margin-bottom: 14px;
}
.pq-meta {
  font-family: var(--sans);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.pq-body {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 24px 40px;
  align-items: start;
}
.print-grid {
  border-width: 2.5px;
  background: var(--gridline);
}
.print-grid.g11 { --cell: 36px; }
.print-grid.g13 { --cell: 30px; }
.print-grid > span {
  display: grid;
  place-items: center;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1;
}
.print-grid > .s {
  background: var(--starter);
  color: var(--ink);
}
.wordlist {
  columns: 2 9em;
  column-gap: 32px;
}
.wl-note {
  column-span: all;
  margin-bottom: 12px;
  font-size: 1rem;
}
.wl-group {
  break-inside: avoid;
  margin-bottom: 14px;
}
.wl-h {
  margin-bottom: 4px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--hair);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.wl {
  list-style: none;
  padding: 0;
  font-family: var(--mono);
  font-size: 1rem;
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.wl s {
  color: var(--muted);
}
.stub-notes {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding-top: 6px;
}
.stub-notes .col:first-child {
  padding-left: 0;
  border-left: 0;
}
.sec-h-sm {
  font-size: 1.5rem;
  margin-bottom: 6px;
}

/* ================================================================ web v1: the working site (docs/web-v1-plan.md) */
/* Everything below up to the next ==== banner styles what the server renders on the new pages: the paper pages
   (/today/, /paper/), the older-paper and holdout pages, the 404, the home's date-free mounts, and the no-art mode.
   player.css styles only what the player renders (.pz.is-live, #diary.is-live, .pz-sheet), using the tokens above. */

/* An author display rule must never undo the hidden attribute the player toggles. */
[hidden] {
  display: none !important;
}

/* ---------------------------------------------------------------- the home's mounts (front.js fills them) */

/* front.js replaces this wrapper's children with the dated lead and cards; display: contents keeps them in .front's
   grid areas as if the wrapper weren't there. */
#front-today {
  display: contents;
}
/* without JavaScript (or before /api/front answers) there are no cards: the lead and the desk share the row */
.front:not(:has(.cards)) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.5fr);
  grid-template-areas: "lead desk";
}
.week-home {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 24px;
  padding: 10px 0 9px;
  border-bottom: 1px solid var(--hair);
}
.week-home .week-h {
  font-size: 1.25rem;
  margin: 0;
}
.week-home .week-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  margin: 0;
  border: 0;
}
.week-home .week-list li {
  border: 0;
}
.week-home .week-list a {
  padding: 4px 0;
}
.week-note {
  font-size: 1rem;
}
.side > .tag {
  align-self: flex-start;
  width: fit-content;
  margin-bottom: 8px;
}

/* ---------------------------------------------------------------- the paper pages */

.paper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  padding-bottom: 10px;
}
.paper > .paper-lead,
.paper > .paper-grids,
.paper > .handoff,
.paper > .open-app {
  grid-column: 1 / -1;
}

.paper-lead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 48px;
  padding: 22px 0 22px;
  border-bottom: 2px solid var(--ink);
}
.paper-lead h1 {
  flex: none;
  max-width: 100%;
  font-size: clamp(44px, 6.4vw, 84px);
  line-height: 0.95;
  font-weight: 900;
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.05em;
  overflow-wrap: anywhere;
}
.paper-lead .intro {
  flex: 1 1 22em;
  max-width: 34em;
  margin-bottom: 4px;
}
.bookmark {
  flex: 1 1 100%;
  color: var(--muted);
  font-size: 1rem;
}

.paper-grids {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  grid-template-areas:
    "quick card"
    "standard card";
  column-gap: 32px;
  border-bottom: 1px solid var(--hair);
}
#pz-quick {
  grid-area: quick;
}
#pz-standard {
  grid-area: standard;
}
.paper-grids > .app-card {
  grid-area: card;
}
.pz {
  min-width: 0;
  padding: 18px 0 26px;
}
.pz + .pz {
  border-top: 1px solid var(--hair);
}
.pz-h {
  font-size: 1.9375rem;
  line-height: 1.05;
  font-weight: 800;
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.05em;
}
.pz-meta {
  margin: 4px 0 16px;
  font-family: var(--sans);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.pz-no {
  display: none; /* printed only: a sheet should say which paper it came from */
}
.pz-static {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 24px 40px;
  align-items: start;
}
.pz-gone .pz-static {
  grid-template-columns: max-content minmax(0, 22em);
  align-items: end;
}
.pz-gone-line {
  font-size: 1.0625rem;
}

/* the third grid: app only, its silhouette and the hand-off to the app */
.app-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 18px 0 24px 24px;
  border-left: 1px solid var(--hair);
}
.app-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}
.app-card .pz-meta {
  margin: 0;
}
.app-card-p {
  max-width: 18em;
  font-size: 1rem;
  line-height: 1.3;
}

/* hand-offs: a band in the phone panel's tint, shown by the player at its moment (or always, on the older page) */
.handoff {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  margin: 18px 0 0;
  padding: 16px 20px;
  background: var(--panel);
}
.handoff p {
  flex: 1 1 24em;
  max-width: 40em;
  font-size: 1.125rem;
  line-height: 1.35;
}
.handoff .btn {
  flex: none;
}
.open-app {
  margin-top: 14px;
}
.open-app a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
}

/* the lower band: the diary, this week's papers and the desk, between hairlines */
.paper > .col-diary,
.paper > .week,
.paper > .desk-paper {
  align-self: stretch;
  margin-top: 22px;
  padding: 14px 24px 18px;
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--hair);
}
.paper > .col-diary {
  padding-left: 0;
  border-left: 0;
}
.desk-paper {
  grid-area: auto;
}
.desk-paper .desk-para {
  max-width: 22em;
}
.week-h {
  font-size: 1.5rem;
  line-height: 1.05;
  font-weight: 800;
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.05em;
  margin-bottom: 8px;
}
.week-list {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--hair);
}
.week-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--hair);
}
.week-list a {
  display: inline-block;
  padding: 7px 0 6px;
  font-size: 1rem;
  font-variant-numeric: lining-nums;
}
.week-list a[aria-current="page"] {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}
.week-state {
  font-size: 0.875rem;
  color: var(--muted);
}

/* ---------------------------------------------------------------- the holdout page and the 404 */

.masthead-min .mast {
  padding-bottom: 12px;
  border-bottom: 3px solid var(--ink);
}
.holdout,
.notfound {
  padding-bottom: 18px;
}
.ho-dl {
  flex: 1 1 100%;
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-variant-numeric: lining-nums;
}
.sils {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 24px 36px;
  padding: 24px 0 8px;
}
.sil-fig {
  margin: 0;
}
.sil-fig figcaption {
  margin-top: 8px;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ho-text {
  padding: 12px 0 0;
}
.ho-text p {
  max-width: 36em;
  margin-bottom: 10px;
  font-size: 1.125rem;
}
.nf-links {
  list-style: none;
  max-width: 28em;
  margin: 18px 0 8px;
  padding: 0;
  border-top: 1px solid var(--hair);
}
.nf-links li {
  border-bottom: 1px solid var(--hair);
}
.nf-links a {
  display: inline-block;
  padding: 10px 0;
  font-size: 1.0625rem;
}

/* ---------------------------------------------------------------- no art: the typographic site (ART=off, go-live) */
/* The eight art slots render nothing (build.mjs, ART=off by default). Rules, type, the real grids and the ruled lists
   carry the page instead: the masthead's ears are a matching pair of boxed labels, Printables and the Issue lead with
   their heading and a full-width ruled list, the lower band's four columns share the width evenly, and the phone panel
   ends in a typographic notice. Everything here is scoped to .no-art, so ART=on puts the art layout back untouched. */

.no-art .ear {
  width: 96px;
  padding: 10px 10px 10px 13px;
  border: 1px solid var(--keyline);
}
.no-art .ear-l {
  line-height: 1.3;
}
.no-art .ear-r {
  line-height: 1.6;
}
.no-art .desk-para {
  max-width: 24em;
}
/* the signature follows the paragraph (the pen used to stand between them), rather than leaving a gap for it */
.no-art .desk-sig {
  margin-top: 14px;
}
.no-art .print-body,
.no-art .issue-body {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 14px;
}
.no-art .print-body .side,
.no-art .issue-body .side {
  max-width: 26rem;
}
.no-art .side .more {
  margin-right: 0;
}
/* the panel is as tall as its words (no phones to fill it): the heading, its three lines, then the notice */
.no-art .panel {
  height: auto;
  padding-bottom: 16px;
}
.no-art .app-art {
  display: block;
  margin-top: 22px;
}
/* "Coming soon to Google Play" in type: a heavy rule over a spaced-capital line and the store's name, a hairline under
   it. No box, no fill and no arrow, so it can't be taken for a store badge or a button. */
.no-art .store {
  display: flex;
  justify-self: stretch; /* the base rule's "start" would shrink it to its words in block layout too */
  margin: 0;
  padding: 9px 0 12px;
  border: 0;
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: transparent;
  line-height: 1;
}
.no-art .store-k {
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.no-art .store-n {
  margin-top: 8px;
  font-size: clamp(2rem, 2.6vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.045em;
}
.no-art .store-ios {
  margin-top: 10px;
}
/* wide screens: with no art to make room for, the four lower columns share the width evenly */
@media (min-width: 1340px) {
  .no-art .lower {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .no-art .col-print {
    padding-right: 24px;
  }
  .no-art .col-diary {
    padding-inline: 24px 16px;
  }
}

/* ================================================================ wide desktop: the reference's line breaks */

@media (min-width: 1340px) {
  .il {
    display: block;
  }
  .intro {
    max-width: none;
  }
}
@media (min-width: 1500px) {
  .pb {
    display: block;
  }
}

/* ================================================================ narrow desktop: 1340-1499px */

@media (max-width: 1499px) {
  .front {
    grid-template-columns: minmax(0, 1fr) 724px minmax(0, 0.66fr);
  }
  .g11 { --cell: 15px; }
  .g13 { --cell: 13px; }
  .g15 { --cell: 12px; }
  .g17 { --cell: 11px; }
  .g19 { --cell: 9px; }
  .intro {
    font-size: 1.125rem;
  }
  .card-head {
    margin-inline: 8px;
  }
}

/* ================================================================ tablet: 768-1339px */

@media (max-width: 1339px) {
  .mast {
    column-gap: 14px;
  }
  .art-cat {
    width: clamp(120px, 18vw, 308px);
  }
  .art-mug {
    width: clamp(76px, 10vw, 168px);
  }
  .wordmark {
    font-size: clamp(60px, 7.6vw, 100px);
  }
  .nav {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
  }
  .nav-list {
    grid-column: 1;
    justify-content: flex-start;
    column-gap: clamp(18px, 2.4vw, 40px);
  }
  .btn-nav {
    grid-column: 2;
  }
  .front {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
    grid-template-areas:
      "lead desk"
      "cards cards";
    row-gap: 22px;
  }
  .lead h1 {
    font-size: min(7.375rem, 28cqi);
  }
  .intro {
    max-width: 22em;
  }
  .desk {
    align-self: start;
  }
  .desk-para {
    max-width: min(22em, 100% - 40px);
  }
  .art-pen {
    width: 150px;
    margin-top: -24px;
  }
  .card {
    padding-inline: 14px;
  }

  .lower {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .col-print,
  .col-diary {
    padding-left: 4px;
    border-left: 0;
  }
  .col-diary,
  .col-app {
    border-top: 1px solid var(--hair);
    margin-top: 10px;
    padding-top: 18px;
  }
  .col-diary {
    padding-right: 24px;
  }
  .col-app {
    padding-left: 24px;
    padding-bottom: 0;
  }
  /* the calendar and the figures side by side, or one over the other when a large text setting needs the room */
  .diary-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
    column-gap: 32px;
    align-items: end;
  }
  .stats {
    margin-bottom: 0;
  }
  .panel {
    height: auto;
  }
  .app-art {
    max-width: 330px;
  }

  .foot {
    grid-template-columns: 1fr;
  }
  .foot-links {
    padding-top: 0;
  }

  .stub-notes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stub-notes .col {
    padding: 14px 24px 14px 0;
    border-left: 0;
    border-bottom: 1px solid var(--hair);
  }
  .stub-notes .col:nth-child(2n) {
    padding-left: 24px;
    border-left: 1px solid var(--hair);
  }
}

/* 768-1023: the cards are narrower, so the grids step down a size */
@media (max-width: 1023px) {
  .tagline {
    font-size: 0.8125rem;
    letter-spacing: 0.18em;
  }
  .tagline::before,
  .tagline::after {
    width: 32px;
  }
  .nav-list {
    column-gap: 16px;
  }
  .nav-list a {
    font-size: 0.84375rem;
  }
  .btn-nav {
    padding-inline: 16px;
    gap: 12px;
  }
  .g11 { --cell: 15px; }
  .g13 { --cell: 13px; }
  .g15 { --cell: 12px; }
  .g17 { --cell: 10px; }
  .g19 { --cell: 9px; }
  .print-grid.g11 { --cell: 30px; }
  .print-body {
    grid-template-columns: 1fr;
  }
  .art-print {
    width: min(356px, 100%);
    margin-left: 0;
  }
  /* the cover over the stamp and the list, as on phones */
  .issue-body {
    grid-template-columns: 1fr;
  }
  .art-cover {
    width: min(300px, 100%);
    margin: 0;
  }
  .issue-body .side {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    column-gap: 12px;
  }
  .issue-body .side > :not(.art-stamp) {
    grid-column: 1;
  }
  .art-stamp {
    grid-column: 2;
    grid-row: 1 / span 3;
    margin: 0;
    width: 80px;
  }
  .side .more {
    justify-self: start;
    margin-right: 0;
  }
  .diary-body {
    grid-template-columns: 1fr;
  }
  .pq-body {
    grid-template-columns: 1fr;
  }
}

/* ================================================================ phone: up to 767px */

@media (max-width: 767px) {
  .mast {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    padding-top: 14px;
  }
  .ear {
    display: none;
  }
  .art-cat {
    width: clamp(96px, 24vw, 160px);
  }
  .art-mug {
    width: clamp(64px, 15vw, 100px);
  }
  .wordmark {
    font-size: clamp(54px, 13.4vw, 92px);
  }
  .tagline {
    margin-top: 8px;
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    gap: 8px;
  }
  .tagline::before,
  .tagline::after {
    width: 18px;
  }

  .nav {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 6px 0 12px;
  }
  .nav-list {
    grid-column: 1;
    justify-content: center;
    gap: 0 22px;
  }
  /* the store is not live yet, so this is a quiet outline button, not the first navy slab on the page */
  .btn-nav {
    grid-column: 1;
    justify-self: center;
    margin-top: 8px;
    background: transparent;
    color: var(--pen);
  }
  .btn-nav:hover {
    background: var(--surface);
    border-color: var(--ink);
    color: var(--ink);
  }

  .dateline {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 2px;
    padding: 7px 0;
    text-align: center;
  }
  .dl-motto {
    text-align: center;
  }

  .front {
    grid-template-columns: 1fr;
    grid-template-areas:
      "lead"
      "cards"
      "desk";
    row-gap: 24px;
    padding-top: 16px;
  }
  .lead h1 {
    font-size: min(5.25rem, 26cqi);
    margin-bottom: 16px;
  }
  .intro {
    max-width: 24em;
    font-size: 1.15625rem;
  }

  /* each puzzle becomes a ruled row: grid on the left, the words on the right, the button under them */
  .cards {
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--ink);
  }
  .card {
    display: grid;
    grid-row: auto;
    grid-template-rows: none;
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-areas:
      "grid head"
      "grid blurb"
      "grid time"
      "grid btn";
    column-gap: 16px;
    align-items: start;
    justify-items: start;
    padding: 16px 0;
    border: 0;
    border-bottom: 1px solid var(--hair);
    text-align: left;
  }
  .card-head {
    grid-area: head;
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
    margin: 0;
  }
  .card-meta {
    align-items: flex-start;
    margin-left: 0;
    gap: 4px;
  }
  .card .tag {
    align-self: flex-start;
    margin-top: 6px;
  }
  .card-grid {
    grid-area: grid;
  }
  .card-blurb {
    grid-area: blurb;
    max-width: none;
    margin: 8px 0 6px;
  }
  .card:last-child .card-blurb {
    max-width: none;
  }
  .card-time {
    grid-area: time;
    align-self: start;
    margin: 0;
  }
  .card .btn {
    grid-area: btn;
    margin-top: 12px;
  }
  .card-title {
    font-size: 1.5625rem;
  }
  .g11 { --cell: 10px; }
  .g13 { --cell: 8px; }
  .g15 { --cell: 7px; }
  .g17 { --cell: 6px; }
  .g19 { --cell: 5px; }
  .print-grid.g11 { --cell: clamp(24px, 7.2vw, 34px); }
  .print-grid.g13 { --cell: clamp(20px, 6vw, 30px); }
  .print-grid > span {
    font-size: 1.125rem;
  }

  .desk {
    padding: 16px 0 0;
    border-left: 0;
    border-top: 1px solid var(--ink);
  }
  .desk-h {
    font-size: 2.125rem;
  }
  .art-pen {
    width: 130px;
    margin-top: -16px;
  }

  .lower {
    grid-template-columns: 1fr;
  }
  .col,
  .col-print,
  .col-diary,
  .col-app {
    margin-top: 0;
    padding: 18px 0;
    border-left: 0;
    border-top: 1px solid var(--hair);
  }
  .col-print {
    border-top: 0;
  }
  .print-body,
  .issue-body {
    grid-template-columns: 1fr;
  }
  .art-print,
  .art-cover {
    width: min(320px, 100%);
    margin: 0 auto;
  }
  .ruled li {
    font-size: 0.8125rem;
    padding: 10px 0 8px;
  }
  .cal {
    grid-template-columns: repeat(7, 34px);
    grid-auto-rows: 26px;
  }
  .dot {
    width: 15px;
    height: 15px;
  }
  .panel {
    padding: 16px;
  }
  .app-art {
    max-width: 300px;
  }

  .stub-notes {
    grid-template-columns: 1fr;
  }
  .stub-notes .col,
  .stub-notes .col:nth-child(2n) {
    padding: 14px 0;
    border-left: 0;
    border-top: 0;
  }
}

/* the masthead's ears and mug leave; the cat stays as a small vignette over the wordmark */
@media (max-width: 599px) {
  .mast {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 4px;
  }
  .mast-r {
    display: none;
  }
  .mast-l {
    justify-self: center;
  }
  .art-cat {
    width: 140px;
    margin: 0;
  }
  .tagline {
    white-space: normal;
  }
}

/* Below about 450px the five nav links no longer fit on one row, and they used to break 4 + 1, leaving "About" on a
   row of its own. A measure of 17rem (one row needs about 26rem, the first three about 14.5rem) breaks them 3 + 2. */
@media (max-width: 459px) {
  .nav-list {
    max-width: 17rem;
  }
}

/* ================================================================ touch: every control at least 48px tall */

@media (pointer: coarse), (max-width: 767px) {
  .btn,
  .btn-sm,
  .btn-nav {
    min-height: 48px;
  }
  .nav-list a {
    min-height: 48px;
    display: flex;
    align-items: flex-end;
  }
  .more {
    min-height: 48px;
    align-items: flex-end;
  }
  .foot-links a {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
  }
}

/* ================================================================ print */
/* Today's Quick fits one sheet of A4 or Letter. Grid lines and black squares are drawn with borders, which print even
   with the browser's "background graphics" switched off. */

@page {
  margin: 12mm;
}

@media print {
  body {
    background: #fff;
    font-size: 11pt;
  }
  .skip,
  .nav,
  .mast-side,
  .dl-motto,
  .stub-lead,
  .stub-notes,
  .foot,
  .btn,
  .more,
  .art,
  .tag,
  .col-app {
    display: none;
  }
  .wrap {
    width: auto;
  }
  .mast {
    grid-template-columns: 1fr;
    padding-top: 0;
  }
  .wordmark {
    font-size: 40pt;
  }
  .tagline {
    margin-top: 6pt;
    font-size: 9pt;
  }
  .dateline {
    grid-template-columns: 1fr auto;
  }
  .grid,
  .grid > span {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .grid {
    gap: 0;
    background: none;
    border: 1.5pt solid #000;
  }
  .grid > span {
    border: 0.5pt solid #555;
    background: #fff;
  }
  .grid > .b {
    border: calc(var(--cell) / 2) solid #000;
    background: #000;
  }
  .printable {
    border: 0;
    padding-top: 10pt;
    break-inside: avoid;
  }
  .print-grid {
    border-width: 2pt;
  }
  .print-grid.g11 { --cell: 30px; }
  .print-grid.g13 { --cell: 26px; }
  .pq-body {
    grid-template-columns: max-content 1fr;
    gap: 16pt 24pt;
  }
  .wordlist {
    columns: 3 8em;
    column-gap: 14pt;
  }
  .wl,
  .wl-note {
    font-size: 10pt;
    line-height: 1.3;
  }
  .wl-group {
    margin-bottom: 8pt;
  }
  .lower,
  .front {
    border-color: #000;
  }
  /* filled diary dots are drawn with a border so they print without background graphics */
  .dot-on {
    border-width: 8px;
  }
  h1,
  h2 {
    break-after: avoid;
  }
  .card,
  .desk-h,
  .diary-body,
  .printable {
    break-inside: avoid;
  }
}

/* ================================================================ forced colours (Windows contrast themes) */

@media (forced-colors: active) {
  .grid {
    background: CanvasText;
    border-color: CanvasText;
  }
  .grid > span {
    background: Canvas;
  }
  .grid > .b,
  .dot-on {
    background: CanvasText;
    forced-color-adjust: none;
  }
  .dot {
    border-color: CanvasText;
  }
  .btn,
  .store,
  .tag,
  .panel {
    border: 1px solid CanvasText;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto;
  }
}

/* ================================================================ web v1: the new pages at each width */

@media (max-width: 1339px) {
  .front:not(:has(.cards)) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
    grid-template-areas: "lead desk";
  }
  .paper-grids {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "quick"
      "standard"
      "card";
  }
  .paper-grids > .app-card {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: start;
    gap: 10px 28px;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--hair);
  }
  .app-card > .grid {
    grid-column: 1;
    grid-row: 1 / span 4;
  }
  .app-card > :not(.grid) {
    grid-column: 2;
  }
  .app-card > .btn {
    justify-self: start;
  }
  .paper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .paper > .desk-paper {
    grid-column: 1 / -1;
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 1023px) {
  .pz-static,
  .pz-gone .pz-static {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .front:not(:has(.cards)) {
    grid-template-columns: 1fr;
    grid-template-areas:
      "lead"
      "desk";
  }
  .paper {
    grid-template-columns: minmax(0, 1fr);
  }
  .paper > .col-diary,
  .paper > .week,
  .paper > .desk-paper {
    grid-column: 1 / -1;
    margin-top: 0;
    padding: 18px 0;
    border-left: 0;
    border-top: 1px solid var(--hair);
  }
  .paper > .col-diary {
    margin-top: 18px;
    border-top: 1px solid var(--ink);
  }
  .paper-lead {
    padding-top: 16px;
  }
  .paper-grids > .app-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .app-card > .grid,
  .app-card > :not(.grid) {
    grid-column: 1;
    grid-row: auto;
  }
  .handoff {
    padding: 16px;
  }
  .sils {
    gap: 20px;
  }
}

@media (pointer: coarse), (max-width: 767px) {
  .week-list a,
  .open-app a,
  .nf-links a {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
  }
}

@media print {
  .paper-lead,
  .handoff,
  .open-app,
  .paper > .col-diary,
  .paper > .week,
  .desk-paper,
  .paper-grids > .app-card,
  .pz-play,
  .week-home,
  .sils + .ho-text {
    display: none;
  }
  .paper {
    display: block;
  }
  .paper-grids {
    display: block;
    border: 0;
  }
  .pz {
    padding: 8pt 0 0;
    break-inside: avoid;
  }
  .pz + .pz {
    break-before: page;
    border: 0;
  }
  .pz-no {
    display: inline;
  }
  .pz-static {
    grid-template-columns: max-content 1fr;
    gap: 16pt 24pt;
  }
}

/* without JavaScript the home's lead keeps the reference's narrow column, so its headline breaks as it does there */
.front:not(:has(.cards)) .lead {
  max-width: 400px;
}

/* the older-paper page has no desk: its lower band is the diary and the week */
.paper.older {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 767px) {
  .paper.older {
    grid-template-columns: minmax(0, 1fr);
  }
}