/* Blackout poetry workshop slides.
   Two looks: newsprint with marker bars (the default), and .dusk, the Paddock
   hills at sunset, for the moments when people are making or sharing.
   Each slide is a 16:9 stage. Sizes inside it use --u, which is 1% of the
   slide's width, so everything scales with the screen. On a phone the slides
   stack into one scrolling page and --u becomes a fixed size. */

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: #0b0b0b; color: #111; font-family: Newsreader, Georgia, serif; overflow: hidden; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 0.06em; text-underline-offset: 0.18em; }
img { display: block; max-width: 100%; }

:root { --paper: #f3efe4; --ink: #0b0b0b; --white: #fffdf6; --type: "Special Elite", "Courier New", monospace; --sans: Lato, system-ui, sans-serif; }

.deck { position: fixed; inset: 0; }
/* Four text sizes, used on every slide: large for a line that stands alone, body, dense for
   slides that carry a lot, and note for sources. */
.slide { --u: 1cqw; --large: calc(3 * var(--u)); --body: calc(2.3 * var(--u)); --dense: calc(1.7 * var(--u)); --note: calc(1.25 * var(--u)); position: absolute; inset: 0; margin: auto; width: min(100vw, 177.78vh); aspect-ratio: 16 / 9; container-type: inline-size;
  display: none; overflow: hidden; background: var(--paper); }
.slide.active { display: block; }
.slide::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.018) 0 1px, transparent 1px 3px); }
.in { position: relative; height: 100%; padding: calc(4.2 * var(--u)) calc(6 * var(--u)) calc(4.6 * var(--u)); font-size: var(--body); line-height: 1.4;
  display: flex; flex-direction: column; }

/* Headings: the first words sit under a marker bar */
h2 { font: 600 calc(4.6 * var(--u))/1.05 Newsreader, Georgia, serif; letter-spacing: -0.015em; margin-bottom: calc(2.4 * var(--u)); }
.bar { display: inline-block; background: var(--ink); color: var(--paper); padding: 0.08em 0.2em 0.02em; margin-left: -0.2em; }
h3 { font: 400 calc(1.75 * var(--u))/1.25 var(--type); letter-spacing: 0.02em; margin-bottom: calc(1 * var(--u)); }
.kicker { font: calc(1.4 * var(--u))/1.2 var(--type); letter-spacing: 0.16em; text-transform: uppercase; }
.aside { margin-top: auto; padding-top: calc(2 * var(--u)); font-size: var(--dense); font-style: italic; }
.src { font: var(--note)/1.3 var(--sans); margin-top: calc(0.8 * var(--u)); }
.lead { font-size: var(--body); margin-bottom: calc(1.6 * var(--u)); }

.cols { display: grid; gap: calc(4 * var(--u)); flex: 1; min-height: 0; }
.cols.two { grid-template-columns: 1fr 1fr; }
.cols.two-one { grid-template-columns: 1.7fr 1fr; }
.cols.three { grid-template-columns: repeat(3, 1fr); gap: calc(2.4 * var(--u)); }

/* The address and QR code, wherever they appear */
.find { display: flex; align-items: center; gap: calc(1.6 * var(--u)); }
.find img { width: calc(11 * var(--u)); height: calc(11 * var(--u)); border: calc(0.14 * var(--u)) solid var(--ink); }
.find p { font: 700 calc(2.1 * var(--u))/1.2 var(--sans); }
.find span { display: block; font: 400 calc(1.25 * var(--u))/1.6 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; }
.find a { text-decoration: none; }
.find.stack { flex-direction: column; align-items: flex-start; justify-content: center; }
.find.stack img { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }

/* 1. Title */
.title .in { display: grid; grid-template-columns: 54fr 46fr; padding: 0; }
.title .page { padding: calc(6 * var(--u)) calc(3 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u)); font: calc(2.18 * var(--u))/2.05 var(--type); align-self: center; }
.w { position: relative; white-space: nowrap; }
/* Every word starts on the same white strip, so the poem cannot be picked out. A click on the
   text (or the B key) sets it going: each bar draws across its word, a little after the one before. */
.poem { cursor: pointer; }
.w { background: var(--white); box-shadow: 0 0 0 0.16em var(--white); }
.w.x::after { content: ""; position: absolute; left: -0.28em; right: -0.28em; top: -0.2em; bottom: -0.16em; background: var(--ink);
  transform-origin: left center; transform: scaleX(0); }
.poem.go .w.x::after { transform: none; animation: strike 1.1s cubic-bezier(0.6, 0, 0.3, 1) both; animation-delay: calc(var(--i) * 130ms + 300ms); }
@keyframes strike { from { transform: scaleX(0); } }
.title .side { margin: calc(6 * var(--u)) 0; padding: 0 calc(5 * var(--u)) 0 calc(3 * var(--u)); border-left: calc(0.14 * var(--u)) solid var(--ink);
  display: flex; flex-direction: column; justify-content: center; }
h1 { margin-top: calc(1.4 * var(--u)); font: 600 calc(7.4 * var(--u))/0.95 Newsreader, Georgia, serif; letter-spacing: -0.02em; }
h1 span { display: block; }
h1 .bar { display: inline-block; padding: 0.06em 0.16em 0; margin-left: -0.16em; }
.who { margin: calc(2 * var(--u)) 0 calc(2.6 * var(--u)); font-size: calc(1.9 * var(--u)); }

/* 3. Definitions */
.quotes { display: grid; gap: calc(3 * var(--u)); align-content: start; }
blockquote { padding-left: calc(1.6 * var(--u)); border-left: calc(0.5 * var(--u)) solid var(--ink); }
blockquote p { font-size: var(--large); line-height: 1.25; }
blockquote:nth-child(2) p { font: calc(4.2 * var(--u))/1.2 var(--type); }
blockquote footer { font: var(--note)/1.4 var(--sans); margin-top: calc(0.4 * var(--u)); }
.poemcard img { width: 100%; }
.poemcard figcaption { font: italic var(--dense)/1.35 Newsreader, Georgia, serif; margin-top: calc(1 * var(--u)); }

/* 4. Timeline */
.timeline { margin-top: calc(2 * var(--u)); display: grid; grid-template-columns: repeat(7, 1fr); gap: calc(1.5 * var(--u)); border-top: calc(0.5 * var(--u)) solid var(--ink); }
.timeline li { padding-top: calc(1.4 * var(--u)); position: relative; }
.timeline li::before { content: ""; position: absolute; top: calc(-0.5 * var(--u)); left: 0; width: calc(0.5 * var(--u)); height: calc(1.6 * var(--u)); background: var(--ink); }
.timeline b { display: block; font: calc(2.5 * var(--u))/1 var(--type); margin-bottom: calc(0.8 * var(--u)); }
.timeline img { width: 100%; margin-bottom: calc(1 * var(--u)); }
.timeline span { display: block; font-size: calc(1.55 * var(--u)); line-height: 1.28; }
.timeline strong { display: block; font: 700 calc(1.5 * var(--u))/1.3 var(--sans); margin-bottom: 0.15em; }

/* 5. Same marks, different acts: censorship on the left, blackout poetry on the right */
.versus { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(5 * var(--u)); }
.versus h3 { font: 600 calc(3.6 * var(--u))/1.1 Newsreader, Georgia, serif; letter-spacing: -0.01em; margin: 0; }
.versus .by { font: calc(1.9 * var(--u))/1.3 var(--type); margin: calc(0.6 * var(--u)) 0 calc(1.6 * var(--u)); }
.versus img { width: 100%; }
.versus .can-be { font: var(--dense)/1.3 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: calc(1.2 * var(--u)); }
.versus .and-more { font: var(--dense)/1.3 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; margin-top: calc(1.6 * var(--u)); }
.versus ul { display: grid; gap: calc(1.5 * var(--u)); }
.versus li { font-size: var(--large); line-height: 1.2; padding-left: calc(2.2 * var(--u)); border-left: calc(0.5 * var(--u)) solid var(--ink); }
.side-a { padding-right: calc(5 * var(--u)); border-right: calc(0.14 * var(--u)) solid var(--ink); }

/* The Tumblr example: a tall screenshot cut into three, read left to right */
.strip { flex: 1; min-height: 0; display: flex; gap: calc(2.4 * var(--u)); align-items: flex-start; }
.strip figure { flex: none; width: calc(22.5 * var(--u)); }
.strip figure:nth-of-type(3) { width: calc(17.2 * var(--u)); }
/* The one line the reblog kept, set large beside it */
.left-over { flex: 1; min-width: 0; align-self: center; font: calc(3.4 * var(--u))/1.25 var(--type); }
.left-over span { display: block; font: var(--dense)/1.3 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: calc(1.2 * var(--u)); }
/* The two halves of the post share a width, so their type matches; the reblog is narrower so that it fits the height. */
.strip img { width: 100%; border: calc(0.14 * var(--u)) solid var(--ink); }
.strip figcaption { font: var(--note)/1.3 var(--type); margin-top: calc(0.6 * var(--u)); }

/* Clara's examples: separate poems, each on its own card, set at slightly different heights and angles */
.gallery { flex: 1; min-height: 0; display: grid; gap: calc(5 * var(--u)); align-items: center; justify-items: center; padding: 0 calc(3 * var(--u)); }
/* Three poems, three bays: a rule between each pair, and room around every card */
.gallery.three-up { grid-template-columns: repeat(3, 1fr); gap: 0; padding: 0;
  background: linear-gradient(var(--ink), var(--ink)) 33.33% 50% / calc(0.14 * var(--u)) 86% no-repeat,
              linear-gradient(var(--ink), var(--ink)) 66.67% 50% / calc(0.14 * var(--u)) 86% no-repeat; }
.three-up figure { width: 72%; }
.three-up figcaption, .one-up figcaption { font-size: calc(1.9 * var(--u)); padding-top: calc(0.9 * var(--u)); }
.gallery figure { background: var(--white); padding: calc(1 * var(--u)) calc(1 * var(--u)) calc(0.6 * var(--u)); box-shadow: 0 calc(0.4 * var(--u)) calc(1.4 * var(--u)) rgba(0, 0, 0, 0.28); }
.three-up figure:nth-child(1) { transform: rotate(-2.5deg) translateY(calc(-1.5 * var(--u))); }
.three-up figure:nth-child(2) { transform: rotate(1.5deg) translateY(calc(2 * var(--u))); }
.three-up figure:nth-child(3) { transform: rotate(-1deg) translateY(calc(-0.5 * var(--u))); }
.one-up figure { width: 60%; transform: rotate(-0.8deg); }
.gallery img { width: 100%; }
.gallery figcaption { font: var(--note)/1 var(--type); text-align: center; padding-top: calc(0.7 * var(--u)); }

/* 7. Demo, 8. Tips, 11. Closing, 12. Resources */
.steps { counter-reset: n; display: grid; gap: calc(1 * var(--u)); margin-bottom: calc(2.6 * var(--u)); }
.steps li { counter-increment: n; position: relative; padding-left: 2.4em; font-size: var(--large); line-height: 1.5; }
.steps li::before { content: counter(n); position: absolute; left: 0; top: 0.1em; width: 1.7em; text-align: center; background: var(--ink); color: var(--paper); font: calc(1.9 * var(--u))/1.7 var(--type); }
.button { display: inline-block; background: var(--ink); color: var(--paper); text-decoration: none; font: 700 calc(1.8 * var(--u))/1 var(--sans); padding: calc(1.3 * var(--u)) calc(2.2 * var(--u)); }
.button:hover, .button:focus-visible { outline: calc(0.3 * var(--u)) solid var(--ink); outline-offset: calc(0.3 * var(--u)); }
.tips { display: grid; gap: calc(1.15 * var(--u)); }
.tips li { padding-left: calc(2.8 * var(--u)); position: relative; font-size: calc(2.6 * var(--u)); line-height: 1.22; }
.tips li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: calc(1.3 * var(--u)); height: calc(0.7 * var(--u)); background: var(--ink); }
.tips .big { justify-self: start; margin-top: calc(0.8 * var(--u)); padding: calc(1.3 * var(--u)) calc(2 * var(--u)) calc(1 * var(--u)); background: var(--ink); color: var(--paper); font: var(--large)/1.25 var(--type); }
.tips .big::before { display: none; }
/* A closing line on a black bar, as wide as its words */
.black-bar { align-self: flex-start; margin-top: calc(3.4 * var(--u)); padding: calc(1.3 * var(--u)) calc(2 * var(--u)) calc(1 * var(--u)); background: var(--ink); color: var(--paper); font: var(--large)/1.25 var(--type); }
.tips .big b { font-weight: 400; }
.questions { display: grid; gap: calc(3 * var(--u)); margin-top: calc(1 * var(--u)); }
.questions li { font-size: var(--large); line-height: 1.22; padding-left: calc(2 * var(--u)); border-left: calc(0.5 * var(--u)) solid var(--ink); }
/* Resources in three headed groups */
.groups { display: grid; grid-template-columns: 0.85fr 1fr 1.15fr; gap: calc(3.5 * var(--u)); }
.groups h3 { font: calc(1.7 * var(--u))/1.2 var(--type); letter-spacing: 0.02em; padding-bottom: calc(0.7 * var(--u)); margin-bottom: calc(1.4 * var(--u)); border-bottom: calc(0.4 * var(--u)) solid var(--ink); }
.links { display: grid; gap: calc(1.2 * var(--u)); align-content: start; }
.links a { display: block; font: 700 calc(1.75 * var(--u))/1.22 var(--sans); }
.links span { display: block; font-size: calc(1.55 * var(--u)); line-height: 1.3; }
/* 13. Source texts: a long list in date order, so three columns of dense text, each entry led by its year */
.sources { columns: 3; column-gap: calc(3 * var(--u)); font-size: calc(1.5 * var(--u)); line-height: 1.28; }
.sources li { break-inside: avoid; padding-bottom: calc(0.7 * var(--u)); }
.sources b { font: 400 1em/1.3 var(--type); margin-right: 0.6em; }
#sources h2 { font-size: calc(3.5 * var(--u)); }  /* a long title, kept to one line */

/* The dusk look */
.dusk { color: #fbf3e2; background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 300' preserveAspectRatio='none'%3E%3Cpath d='M0 90 Q260 10 520 70 T1040 45 T1600 80 V300 H0Z' fill='%235a4a6e'/%3E%3Cpath d='M0 160 Q300 80 640 140 T1240 115 T1600 150 V300 H0Z' fill='%233b3a5c'/%3E%3Cpath d='M0 235 Q380 165 800 220 T1600 205 V300 H0Z' fill='%23262847'/%3E%3C/svg%3E") bottom / 100% 34% no-repeat,
  radial-gradient(circle at 74% 72%, #ffe2a6 0 4%, rgba(255, 214, 150, 0.5) 7%, transparent 20%),
  linear-gradient(#2b2d55 0%, #6d5a86 34%, #d98f7a 62%, #f3c98f 80%); }
.dusk::before { display: none; }
.dusk .in { font-family: var(--sans); }
.dusk .kicker { font: 700 calc(1.3 * var(--u))/1.2 var(--sans); letter-spacing: 0.2em; color: #ecc88c; }
.dusk h2 { font: 500 calc(4.8 * var(--u))/1.1 "Playfair Display", Georgia, serif; letter-spacing: 0; margin: calc(1 * var(--u)) 0 calc(2 * var(--u)); text-wrap: balance; text-shadow: 0 0.04em 0.4em rgba(31, 35, 64, 0.5); }
.dusk h3 { font: 700 calc(2.2 * var(--u))/1.2 "Playfair Display", Georgia, serif; color: #ecc88c; }
.dusk .src { color: #f3ead8; }
.centre .in { text-align: center; align-items: center; }
.cloud, .board { flex: 1; min-height: 0; width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: calc(1 * var(--u)) calc(2 * var(--u)); }
.cloud-empty { font-size: var(--body); background: rgba(31, 35, 64, 0.55); padding: calc(1.2 * var(--u)) calc(2.2 * var(--u)); border-radius: calc(1.2 * var(--u)); }

/* 9. Making time */
.timer-cols { grid-template-columns: 1.25fr 1fr; align-items: center; gap: calc(3.5 * var(--u)); }
.clock { font: 700 calc(19 * var(--u))/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; text-shadow: 0 0.03em 0.25em rgba(31, 35, 64, 0.55); }
.clock.soon { color: #ffe2a6; }
.clock-note { font-size: var(--body); min-height: 1.5em; margin-bottom: calc(1.8 * var(--u)); }
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: calc(1 * var(--u)); }
.adjust { margin-top: calc(1.2 * var(--u)); }
.adjust button { min-width: calc(6 * var(--u)); padding-left: 0; padding-right: 0; }
.adjust span { font-size: calc(1.5 * var(--u)); }
.controls button { font: 700 calc(1.6 * var(--u))/1 var(--sans); color: #fbf3e2; background: rgba(31, 35, 64, 0.6); border: calc(0.14 * var(--u)) solid #ecc88c; border-radius: 99px; padding: calc(1.1 * var(--u)) calc(2 * var(--u)); cursor: pointer; }
.controls .primary { background: #ecc88c; color: #1f2340; min-width: calc(13 * var(--u)); }
.controls button:disabled { opacity: 0.4; cursor: default; }
.controls button:focus-visible { outline: calc(0.3 * var(--u)) solid #fff; outline-offset: calc(0.3 * var(--u)); }
.beside { display: grid; gap: calc(1.2 * var(--u)); min-width: 0; }
.tool p { min-width: 0; }
.tool a { text-decoration: none; }
.late, .music, .tool { background: rgba(22, 27, 48, 0.82); border: calc(0.1 * var(--u)) solid rgba(226, 184, 119, 0.45); border-radius: calc(1.2 * var(--u)); padding: calc(1.2 * var(--u)) calc(1.8 * var(--u)); }
.late ol { counter-reset: n; margin: calc(0.4 * var(--u)) 0 calc(0.9 * var(--u)); }
.late li { counter-increment: n; font-size: calc(1.6 * var(--u)); line-height: 1.35; padding-left: 1.5em; position: relative; }
.late li::before { content: counter(n) "."; position: absolute; left: 0; color: #ecc88c; font-weight: 700; }
/* Two QR codes side by side, each with its label and address underneath */
.tool { display: grid; grid-template-columns: 1fr 1fr; gap: calc(1.6 * var(--u)); font-size: calc(1.25 * var(--u)); line-height: 1.3; text-align: center; }
.tool > div { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.tool img { width: calc(11 * var(--u)); height: calc(11 * var(--u)); border-radius: calc(0.4 * var(--u)); background: #fff; margin-bottom: calc(0.8 * var(--u)); }
.tool b { display: block; color: #ecc88c; font: 700 calc(1.8 * var(--u))/1.25 "Playfair Display", Georgia, serif; margin-bottom: 0.15em; }
.music { justify-self: start; color: #ecc88c; font: 700 calc(1.6 * var(--u))/1 var(--sans); text-underline-offset: 0.2em; padding: calc(1 * var(--u)) calc(1.8 * var(--u)); border-radius: 99px; }
.music:hover, .music:focus-visible { border-color: #ecc88c; outline: none; }

/* Host view: the clock and timekeeping strip. Shown with ?host in the address, or the H key. */
.host { position: fixed; left: 0; bottom: 0; z-index: 6; display: flex; align-items: center; gap: 14px; padding: 7px 12px; font: 14px/1.2 var(--sans); color: #fff; background: rgba(11, 11, 11, 0.86); border-top-right-radius: 8px; font-variant-numeric: tabular-nums; }
.host[hidden] { display: none; }
.host b { font-size: 17px; }
.host .late-by { color: #ffb4a2; font-weight: 700; }
.host .early-by { color: #b9e4c0; font-weight: 700; }
.host button { font: inherit; font-size: 12.5px; color: inherit; background: none; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 6px; padding: 4px 8px; cursor: pointer; }
.host button:hover, .host button:focus-visible { border-color: #fff; outline: none; }

/* Speaker notes live in each slide and show only in the speaker window (?speaker, or Shift+N). */
.notes, .speaker-pane { display: none; }
.speaker body { background: #17171b; }
.speaker .slide { inset: 14px auto auto 14px; margin: 0; width: 54vw; }
.speaker .speaker-pane { display: block; position: fixed; top: 14px; right: 16px; bottom: 52px; left: calc(54vw + 36px); overflow: auto; color: #f3efe4; font: 18px/1.42 var(--sans); }
.speaker-pane h3 { font: 700 15px/1.3 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: #ecc88c; margin: 0 0 10px; }
.speaker-pane ul { list-style: disc; padding-left: 1.1em; }
.speaker-pane li { margin-bottom: 0.6em; }
.speaker-pane b { color: #ecc88c; }
#unlock { display: grid; gap: 10px; max-width: 22em; }
#unlock input { font: inherit; padding: 8px 10px; border: 1px solid #ecc88c; border-radius: 6px; background: #fff; color: #111; }
#unlock button { font: 700 16px/1 var(--sans); justify-self: start; padding: 10px 18px; border: 0; border-radius: 99px; background: #ecc88c; color: #1f2340; cursor: pointer; }
#unlock input:focus-visible, #unlock button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.speaker #spNext { position: fixed; left: 14px; top: calc(54vw * 0.5625 + 26px); width: 54vw; color: #b9b6ae; font: 16px/1.3 var(--sans); }
.speaker .nav { mix-blend-mode: normal; opacity: 1; }
.speaker #speakerBtn { display: none; }
#speakerBtn { font-size: 12.5px; }

/* Moving between slides */
.nav { position: fixed; right: 10px; bottom: 8px; z-index: 5; display: flex; align-items: center; gap: 4px; font: 13px/1 var(--sans); color: #fff; mix-blend-mode: difference; opacity: 0.55; }
.nav:hover, .nav:focus-within { opacity: 1; }
.nav button { font: inherit; font-size: 17px; color: inherit; background: none; border: 1px solid transparent; border-radius: 6px; padding: 5px 8px; cursor: pointer; }
.nav button:hover, .nav button:focus-visible { border-color: currentColor; outline: none; }
.nav #count { min-width: 4.2em; text-align: center; font-variant-numeric: tabular-nums; }

/* Phones and narrow windows: one scrolling page */
@media (max-width: 600px) {
  body { overflow: auto; background: var(--paper); }
  .deck { position: static; }
  .slide { --u: 7.6px; --large: 22px; --body: 17px; --dense: 16px; --note: 13.5px; position: static; display: block; width: 100%; aspect-ratio: auto; container-type: normal; border-bottom: 3px solid var(--ink); }
  .in { height: auto; padding: 34px 20px 38px; font-size: 17px; }
  h2 { font-size: 30px; margin-bottom: 20px; }
  .cols, .cols.two, .cols.two-one, .cols.three, .timer-cols, .title .in { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .sources { columns: 1; }
  .sources li { padding-bottom: 10px; }
  .title .page { padding: 30px 20px 6px; font-size: 15px; }
  .title .side { margin: 0; padding: 20px 20px 34px; border-left: 0; }
  h1 { font-size: 52px; }
  .timeline { grid-template-columns: 1fr; border-top: 0; border-left: 4px solid var(--ink); gap: 14px; }
  .timeline li { padding: 0 0 0 16px; }
  .timeline li::before { top: 8px; left: -4px; width: 12px; height: 4px; }
  .timeline img { width: 46%; margin: 6px 0; }
  .timeline strong { font-size: 16px; }
  .timeline b { font-size: 22px; margin-bottom: 3px; }
  .timeline span, .card, .links span, .poemcard figcaption, .aside { font-size: 16px; }
  blockquote p, .tips li, .steps li, .late li, .clock-note, .cloud-empty { font-size: 17px; }
  blockquote:nth-child(2) p, .questions li, .tips .big { font-size: 22px; }
  blockquote footer, .src { font-size: 13.5px; }
  .music { font-size: 14px; }
  .tool { grid-template-columns: minmax(0, 1fr); font-size: 15px; }
  .gallery, .gallery.three-up { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 0; background: none; }
  .gallery figure:nth-child(n) { transform: none; width: 100%; }
  .groups { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .groups h3 { font-size: 18px; }
  .versus { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .side-a { padding: 0 0 26px; border-right: 0; border-bottom: 2px solid var(--ink); }
  .versus h3 { font-size: 26px; }
  .strip { flex-direction: column; gap: 18px; }
  .strip figure, .strip figure:nth-of-type(3) { width: 100%; }
  .left-over { font-size: 24px; }
  .gallery .wide { grid-column: span 2; }
  .dusk { background-size: 100% 22%, auto, auto; }
  .dusk h2 { font-size: 30px; }
  .clock { font-size: 24vw; }
  .cloud, .board { min-height: 120px; }
  .aside { margin-top: 22px; }
  .nav { display: none; }
}

@media (prefers-reduced-motion: reduce) { .poem.go .w.x::after { animation: none; transform: none; } }