/* CTO 001, Mamuto AB: the drop's own world. Paper, plum and rust; engraved line and contour.
   The house appears only as the corner box and the footer. Italic is for the drop's title (and
   the house motto in the footer), nowhere else. */
:root {
  --paper: #EDE4D3;
  --paper-hi: #F4EEE2;
  --card: #FBF8F1;
  --ink: #3E1428;
  --line: #4A1830;
  --rust: #B4592A;
  --deep: #2A0C1A;
  --muted: #76585F;
  --rule: #D6C8B0;
  --vermilion: #E2432A;
  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --num: "Imbue", "Didot", "Bodoni 72", serif;
  --gutter: clamp(16px, 3.2vw, 48px);
  --top: clamp(16px, 2.4vw, 32px);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --box: 52px;
}
* { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.5; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
::selection { background: var(--ink); color: var(--paper); }
a { color: inherit; }
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; }
:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; border-radius: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: var(--gutter); top: -60px; z-index: 50; background: var(--ink); color: var(--paper); padding: 10px 14px; text-decoration: none; }
.skip:focus { top: calc(var(--box) + var(--top) + 10px); }

/* ---------- the corner box: the house's disc and the issue number, in this drop's plum ---------- */
.cbox {
  position: fixed; z-index: 40; top: var(--top); left: var(--gutter);
  width: var(--box); height: var(--box); display: grid; justify-items: center; align-content: center; gap: 5px;
  background: var(--ink); color: var(--paper); text-decoration: none;
  transition: transform .5s var(--ease);
}
.cbox svg { width: 53%; height: auto; fill: currentColor; display: block; }
.cbox b { font: 500 11px/1 "Fragment Mono", ui-monospace, monospace; letter-spacing: .06em; }   /* the mono, as the house box that lifted off: same disc/number proportions as brand/r5-issue's .cv-box */
.cbox:hover { transform: translateY(-2px); }
.notify-link {
  position: fixed; z-index: 40; top: calc(var(--top) + 8px); right: calc(var(--gutter) - 12px);
  font-size: 15px; font-weight: 500; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
  padding: 7px 12px; border-radius: 999px; transition: opacity .4s ease, background-color .4s ease;
}
.notify-link { text-shadow: 0 0 6px var(--paper), 0 0 12px var(--paper); }
/* once the descent has scrolled away, a band of this page's paper sits under the corner box and the
   link, so headings pass beneath them cleanly instead of colliding. Never over the descent itself. */
.topfade { position: fixed; z-index: 39; left: 0; right: 0; top: 0; height: calc(var(--top) + var(--box) + 22px); pointer-events: none;
  background: linear-gradient(var(--paper) 0, var(--paper) calc(100% - 26px), color-mix(in srgb, var(--paper) 0%, transparent) 100%);
  opacity: 0; transition: opacity .35s ease; }
.past-scene .topfade { opacity: 1; }
.notify-link.away { opacity: 0; pointer-events: none; }

/* masked lines: they rise out of their own line box, a tenth of a second apart */
.ln { display: block; overflow: hidden; padding: 0 .06em .16em; margin: 0 -.06em -.16em; }
.ln > span { display: inline-block; transform: translate3d(0, 140%, 0); transition: transform 1s var(--ease); }
.ln:nth-child(2) > span { transition-delay: .09s; }
.ln:nth-child(3) > span { transition-delay: .18s; }
.ln:nth-child(4) > span { transition-delay: .27s; }
.farm-credit .ln > span, .opening .by .ln > span { transition-delay: .3s; }
.in .ln > span { transform: none; }

/* ---------- the descent: one pinned scene ---------- */
/* lvh throughout (not vh): vh tracks whichever viewport iOS's address bar leaves at the moment, so a
   mixed unit here would resize the whole pinned scene under the reader's thumb as the bar shows or
   hides mid-scroll. lvh stays fixed at the large viewport, so the scene's height never moves. */
.scene { position: relative; height: calc(100lvh + 420lvh); }
.pin { position: sticky; top: 0; height: 100lvh; overflow: hidden; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.poster { display: none; }
.no-gl .poster { display: block; position: absolute; inset: 0; }
.no-gl .poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
.no-gl .poster img.on { opacity: 1; }
.stage { position: absolute; left: 0; right: 0; top: 0; height: 100svh; pointer-events: none; }
.stage a, .stage button { pointer-events: auto; }
.veil { position: absolute; inset: 0; background: var(--paper); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.veil.on { opacity: 1; transition: none; }
body.on-ground .pin { cursor: crosshair; }

.opening { position: absolute; left: var(--gutter); bottom: calc(var(--top) + 118px); max-width: 60vw; }
.opening::before { content: ""; position: absolute; z-index: -1; left: -40vw; right: -12vw; top: -18vh; bottom: -30vh;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--paper) 78%, transparent), transparent); pointer-events: none; }
.title { font-family: var(--serif); font-style: italic; font-weight: 330; font-variation-settings: "opsz" 72; font-size: clamp(40px, min(8.6vw, 15.5vh), 156px); line-height: .92; letter-spacing: -.028em; color: var(--ink); }
.title .ln { display: inline-block; vertical-align: top; padding-top: .18em; margin-top: -.18em; }   /* room in the mask for the italic caps' tops (the B), without moving the line */
.opening .by { font-family: var(--serif); font-weight: 400; font-variation-settings: "opsz" 24; font-size: clamp(19px, 1.6vw, 26px); margin-top: 18px; }

.caption { position: absolute; left: var(--gutter); top: calc(var(--top) + var(--box) + 34px); font-family: var(--serif); font-weight: 380; font-variation-settings: "opsz" 36;
  font-size: clamp(22px, 2.1vw, 34px); line-height: 1.16; letter-spacing: -.01em; max-width: 21em; text-wrap: balance; }
.caption .rust { color: var(--rust); }
/* the captions sit on the drawing, so a little of this paper lifts the lines away behind the words */
.caption::before, .farm-text::before { content: ""; position: absolute; z-index: -1; inset: -34px -60px -40px -40vw; pointer-events: none;
  background: radial-gradient(farthest-side at 30% 50%, color-mix(in srgb, var(--paper) 88%, transparent) 55%, transparent); }
.caption, .farm-text { isolation: isolate; }
/* main.js only sets visibility inline once its first scroll-position tick runs (after fonts and the
   CDN scripts are ready); on a cold load that can lag behind first paint, so without this default
   both captions and the farm heading show at once, stacked on the opening title. Hidden until then. */
.caption, .farm-text { visibility: hidden; }

.farm-text { position: absolute; left: var(--gutter); top: calc(var(--top) + var(--box) + 30px); max-width: min(46vw, 640px); }
.farm-line { font-family: var(--serif); font-weight: 360; font-variation-settings: "opsz" 60; font-size: clamp(36px, 4vw, 66px); line-height: 1.0; letter-spacing: -.022em; text-wrap: balance; }
.farm-credit { margin-top: 14px; font-size: 15px; color: var(--muted); }

.alt-big { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; opacity: 0; visibility: hidden; color: var(--ink); }
.alt-big .n { font-family: var(--num); font-weight: 200; font-variation-settings: "opsz" 100; font-size: clamp(104px, 17vw, 300px); line-height: .9; letter-spacing: -.01em; }
.alt-big .n i { font-style: normal; display: inline-block; width: .37em; text-align: center; }
.alt-big .n i.c { width: .16em; }
.alt-big .u { font-size: 15px; font-weight: 500; margin-left: .4em; vertical-align: 1.2em; }
.alt-big .sub { display: block; margin-top: 14px; font-size: 14px; color: var(--muted); opacity: 0; transition: opacity .6s ease; }
.alt-big.locked .sub { opacity: 1; }

.hud { position: absolute; left: var(--gutter); bottom: var(--top); display: grid; gap: 2px; font-size: 13px; line-height: 1.35; transition: opacity .4s ease;
  text-shadow: 0 0 6px var(--paper), 0 0 14px var(--paper); }
.hud .k { color: var(--muted); }
.hud .v { font-weight: 500; font-size: 24px; line-height: 1.15; letter-spacing: -.01em; }
.hud .v small { font-size: 13px; font-weight: 500; margin-left: 5px; }
.hud .sub { color: var(--muted); min-height: 1.35em; }
.hud.reading .v { color: var(--rust); }
.hud.bare .v { display: none; }
/* the scroll cue mirrors the altimeter: the farm, its height in rust, and how far down it is from here */
.hint { position: absolute; right: var(--gutter); bottom: var(--top); display: grid; gap: 2px; justify-items: end; text-align: right; font-size: 13px; line-height: 1.35; transition: opacity .35s ease;
  text-shadow: 0 0 6px var(--paper), 0 0 14px var(--paper); }
.hint .k { color: var(--muted); }
.hint .v { font-weight: 500; font-size: 24px; line-height: 1.15; letter-spacing: -.01em; color: var(--rust); }
.hint .v small { font-size: 13px; font-weight: 500; margin-left: 5px; }
.hint .sub { color: var(--ink); min-height: 1.35em; }
/* the plain invitation: after 4 s on the opening without a scroll, one word and an arrow at the foot
   of the screen, between the two readings. The first scroll takes it away for good (main.js). */
.scroll-cue { position: absolute; left: 50%; bottom: var(--top); transform: translateX(-50%); display: grid; justify-items: center; gap: 7px;
  font-size: 16px; font-weight: 500; line-height: 1; letter-spacing: .01em; color: var(--ink);
  text-shadow: 0 0 6px var(--paper), 0 0 14px var(--paper);
  opacity: 0; visibility: hidden; transition: opacity 1s ease, visibility 0s 1s; }
.scroll-cue.in { opacity: 1; visibility: visible; transition: opacity 1s ease; }
.scroll-cue.gone { opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s .35s; }
.scroll-cue svg { width: 11px; height: 24px; fill: none; stroke: var(--rust); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
  animation: drift 2.4s ease-in-out infinite; }
@keyframes drift { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }

/* ---------- sections on paper ---------- */
.eyebrow { font-size: 15px; font-weight: 500; display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.dialing { font-weight: 500; font-size: 13px; color: var(--rust); display: inline-flex; align-items: center; gap: 7px; }
.dialing::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.honest { max-width: 44em; font-size: 14px; line-height: 1.55; color: var(--muted); }
h2 { font-family: var(--serif); font-weight: 360; font-variation-settings: "opsz" 60; letter-spacing: -.02em; text-wrap: balance; }

/* the family */
.family { position: relative; padding: clamp(80px, 14vh, 160px) var(--gutter) clamp(90px, 14vh, 170px); }
.name { position: relative; max-width: 1200px; margin: 0 auto; }
.parts { display: grid; gap: clamp(4px, .8vw, 12px); }
.part { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: clamp(18px, 3vw, 48px);
  font-family: var(--serif); font-weight: 340; font-variation-settings: "opsz" 72; font-size: clamp(46px, 7.4vw, 124px); line-height: 1; letter-spacing: -.025em; }
.part .w { white-space: nowrap; }
.part b { font-weight: inherit; color: var(--ink); }
.part .rest { color: color-mix(in srgb, var(--ink) 30%, transparent); transition: color 1.2s ease; }
.name.built .part .rest { color: color-mix(in srgb, var(--ink) 16%, transparent); }
.part .gloss { grid-column: 2; font-family: var(--sans); font-size: clamp(14px, 1.2vw, 17px); letter-spacing: 0; color: var(--muted); }
.whole { font-family: var(--serif); font-weight: 340; font-variation-settings: "opsz" 72; font-size: clamp(46px, 7.4vw, 124px); line-height: 1; letter-spacing: -.025em;
  margin-top: clamp(26px, 4vw, 56px); padding-top: clamp(18px, 2.4vw, 30px); border-top: 1px solid var(--rule); }
.whole span { display: inline-block; }
.name.pre .whole span { opacity: 0; }
.fly { position: fixed; z-index: 30; margin: 0; pointer-events: none; font-family: var(--serif); font-weight: 340; font-variation-settings: "opsz" 72; letter-spacing: -.025em; line-height: 1; color: var(--ink); will-change: transform; }

.facts { position: relative; max-width: 1200px; margin: clamp(56px, 9vw, 120px) auto 0; display: grid; grid-template-columns: 1fr minmax(0, 760px) 1fr; column-gap: 32px; align-items: start; }
.facts dl { grid-column: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 30px 44px; }
.facts dl > div { border-top: 1px solid var(--rule); padding-top: 12px; }
.facts dt { font-size: 14px; font-weight: 500; color: var(--muted); margin-bottom: 6px; }
.facts dd { font-family: var(--serif); font-weight: 400; font-variation-settings: "opsz" 20; font-size: 19px; line-height: 1.42; }
/* the facts as a table, the way a good tea shop prints them: label, value, a hairline */
.facts .sheet { grid-row: 1; display: grid; grid-template-columns: max-content 1fr; gap: 0; border-top: 1px solid var(--ink); }
.facts .sheet > div { display: contents; }
.facts .sheet dt, .facts .sheet dd { margin: 0; padding: 10px 0 9px; border-bottom: 1px solid var(--rule); }
.facts .sheet dt { padding-right: 32px; }
.facts .sheet dd { font-family: var(--sans); font-size: 16px; line-height: 1.35; }
.facts .notes { grid-row: 2; margin-top: 44px; }
.spec { grid-row: 1 / span 2; transition: transform .8s var(--ease); }
.spec-split { grid-column: 1; width: min(180px, 100%); justify-self: end; margin-top: 30px; transform: rotate(-8deg); }
.scrub-note { display: none; }
.spec-bean { grid-column: 3; width: min(120px, 100%); margin-top: 220px; transform: rotate(14deg); }
.spec:hover { transform: rotate(0deg) scale(1.05); }

/* why this one */
.why { padding: clamp(80px, 12vh, 150px) var(--gutter); border-top: 1px solid var(--rule); max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(20px, 5vw, 90px); align-items: start; }
.why h2 { font-size: clamp(42px, 5.4vw, 92px); line-height: .98; }
.why-words { display: grid; gap: 18px; max-width: 34em; font-family: var(--serif); font-weight: 400; font-variation-settings: "opsz" 20; font-size: 20px; line-height: 1.5; }
.why-words .recipe-line { margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--rule); font-family: var(--sans); font-size: 15px; color: var(--muted); }

/* the roaster: spare on the surface, the rest one tap away */
.roaster { max-width: 1440px; margin: 0 auto; padding: clamp(70px, 11vh, 130px) var(--gutter) clamp(80px, 12vh, 140px); border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 28px clamp(28px, 5vw, 80px); align-items: start; }
.roaster h2 { font-size: clamp(38px, 4.2vw, 70px); line-height: 1.02; margin-top: 16px; }
.r-by { margin-top: 14px; font-size: 15px; color: var(--muted); }
.r-body { display: grid; gap: 18px; }
.r-facts { display: grid; gap: 22px; }
.r-facts > p, .r-more li { border-top: 1px solid var(--rule); padding-top: 12px; }
.r-facts p { margin: 0; font-family: var(--serif); font-weight: 400; font-variation-settings: "opsz" 20; font-size: 19px; line-height: 1.42; }
.r-more-btn { justify-self: start; appearance: none; background: none; border: 0; padding: 10px 0; cursor: pointer; display: inline-flex; gap: 10px; align-items: center; font-size: 15px; font-weight: 500; }
.r-more-btn i { position: relative; width: 17px; height: 17px; border: 1px solid currentColor; border-radius: 50%; }
.r-more-btn i::before, .r-more-btn i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 1px; background: currentColor; transform: translate(-50%, -50%); transition: transform .4s var(--ease); }
.r-more-btn i::after { transform: translate(-50%, -50%) rotate(90deg); }
.r-more-btn[aria-expanded="true"] i::after { transform: translate(-50%, -50%) rotate(0deg); }
.r-more-btn span { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.r-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.r-more > div { overflow: hidden; }
.r-more.open { grid-template-rows: 1fr; }
.r-more ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 14px; }
.r-more li { font-size: 16px; line-height: 1.5; }


/* ---------- the recipe: one sheet at the end of the page, the shot printed on it ---------- */
.recipe { --pad: clamp(22px, 5vw, 72px); --mono: "Fragment Mono", "Fragment Mono Fallback", ui-monospace, monospace;
  position: relative; isolation: isolate; scroll-margin-top: calc(var(--top) + var(--box) + 12px); max-width: 1180px; margin: clamp(80px, 12vh, 150px) auto; padding: var(--pad);
  background: var(--card); border: 1px solid var(--rule); border-radius: 4px; box-shadow: 0 1px 2px rgb(42 12 26 / .06), 0 18px 40px -24px rgb(42 12 26 / .22); }
/* the paper's own fibre, over everything on the sheet, so the ink sits in it rather than on it */
.recipe::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: url(img/grain.png) 0 0 / 300px; mix-blend-mode: multiply; opacity: .075; }
.recipe h3 { font-family: var(--serif); font-weight: 360; font-variation-settings: "opsz" 60; letter-spacing: -.02em; font-size: clamp(32px, 3.2vw, 50px); line-height: 1; text-wrap: balance; }
.recipe a, .recipe-line a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--rust); }
/* the fold in the sheet */
.fold { height: 0; margin: clamp(44px, 7vh, 76px) calc(-1 * var(--pad)); border-top: 1px dashed var(--rule); }

/* the shot */
.pull-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; }
.pull-spec { font-family: var(--mono); font-size: 13px; color: var(--muted); font-feature-settings: "tnum" 1; }
.pull-spec i { font-style: normal; margin: 0 .7em; color: var(--rust); }
.pull-plot { margin-top: clamp(26px, 4vh, 40px); }
.pull-box { position: relative; height: clamp(250px, 38vh, 360px); touch-action: pan-y; cursor: col-resize; }
.pull-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* under the plot, on one line: what the stage is doing on the left, the clock on the right, both on the mono baseline */
.pull-under { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 20px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 12.5px; font-feature-settings: "tnum" 1; }
.pull-stage { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.ps-n { color: var(--rust); white-space: nowrap; }
.ps-name { font-family: var(--serif); font-variation-settings: "opsz" 24; font-size: 21px; line-height: 1.1; text-wrap: balance; }
.pull-read { display: flex; gap: 1.2em; white-space: nowrap; color: var(--muted); }
.pull-read .pr-t { color: var(--ink); min-width: 6ch; }
.pull-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; }
.pull-key { display: flex; gap: 6px 20px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.pull-key span { display: inline-flex; align-items: center; gap: 8px; }
.pull-key i { display: inline-block; width: 20px; height: 0; border-top: 2.3px solid var(--ink); }
.pull-key .k-w i { height: 7px; border-top: 1px solid var(--rust); background: rgb(180 89 42 / .11); }
.pull-again { appearance: none; border: 0; background: none; padding: 10px 0 10px 12px; min-height: 40px; font: inherit; font-family: var(--mono); font-size: 12px; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--rust); text-underline-offset: 3px; cursor: pointer; }
.tips { list-style: none; padding: 0; margin: clamp(30px, 5vh, 46px) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 40px); }
.tips li { padding-top: 12px; border-top: 1px solid var(--ink); font-size: 16px; line-height: 1.42; text-wrap: pretty; }
.tips .tip-file { border-top-color: var(--rust); }

.clock-ctl button, .notify button {
  appearance: none; border: 1px solid var(--ink); background: transparent; border-radius: 999px; padding: 11px 18px; min-height: 44px;
  font-size: 15px; font-weight: 500; cursor: pointer; transition: background .3s ease, color .3s ease;
}
.clock-ctl button:hover, .notify button:hover, .clock-ctl button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* ---------- the Switch ---------- */
.switch { position: relative;
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "head frames" "steps frames" "clock frames"; column-gap: clamp(28px, 5vw, 80px); align-items: start; }
.sw-head { grid-area: head; }
.sw-ratio { display: flex; align-items: baseline; gap: 0 8px; margin-top: 20px; }
.sw-ratio .big { font-family: var(--num); font-weight: 220; font-variation-settings: "opsz" 100; font-size: clamp(64px, 6vw, 100px); line-height: .9; }
.sw-ratio small { font-size: 14px; font-weight: 500; margin-right: 6px; }
.sw-ratio .arr { color: var(--rust); font-size: 28px; margin: 0 8px 0 2px; }
.sw-frames { grid-area: frames; position: sticky; top: 90px; align-self: start; max-width: 420px; justify-self: end; width: 100%; }
.frames { display: grid; }
.frame { grid-area: 1 / 1; width: 100%; mix-blend-mode: multiply; opacity: 0; transition: opacity .7s ease; }
.frame.on { opacity: 1; }
.steps { grid-area: steps; list-style: none; padding: 0; margin-top: 30px; display: grid; }
.steps li { display: grid; grid-template-columns: 3.6em 1fr; gap: 14px; padding: 10px 0; border-top: 1px solid var(--rule); font-size: 17px; line-height: 1.4; color: var(--muted); transition: color .4s ease; }
.steps li time { font-family: var(--mono); font-size: 13.5px; line-height: 1.75; font-feature-settings: "tnum" 1; }
.steps li.on { color: var(--ink); }
.steps li.on time { color: var(--rust); }
.clock { grid-area: clock; margin-top: 26px; }
.clock .time { font-family: var(--num); font-weight: 200; font-variation-settings: "opsz" 100; font-size: clamp(64px, 6vw, 96px); line-height: .9; }
.clock .time i { font-style: normal; display: inline-block; width: .38em; text-align: center; }
.clock .time i.c { width: .17em; }
.track { position: relative; height: 44px; margin-top: 6px; touch-action: pan-y; }
.track::before { content: ""; position: absolute; left: 0; right: 0; top: 21px; height: 1px; background: var(--rule); }
.track .fill { position: absolute; left: 0; top: 20px; height: 3px; width: 0; background: var(--ink); }
.track .mark { position: absolute; left: calc(var(--at) * 100%); top: 30px; transform: translateX(-50%); font-family: var(--mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.track .mark.m-done { transform: translateX(-100%); }
.track .mark i { position: absolute; left: 50%; top: -14px; width: 1px; height: 11px; background: currentColor; }
.track .mark.m-done i { left: 100%; }
.track .mark.m-open { color: var(--rust); }
.track input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; touch-action: pan-y; }
.clock-ctl { display: flex; gap: 10px; margin-top: 14px; }
.rc-card { margin-top: clamp(36px, 6vh, 60px); padding-top: 14px; border-top: 1px solid var(--rule); font-size: 15px; color: var(--muted); }

/* ---------- the bag ---------- */
.bag { position: relative; padding: clamp(80px, 12vh, 150px) var(--gutter); border-top: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 90px); align-items: center; max-width: 1440px; margin: 0 auto; }
.bag-words h2 { font-size: clamp(40px, 4.6vw, 80px); line-height: 1; }
.bag-words p { margin-top: 22px; font-size: 18px; line-height: 1.5; max-width: 30em; }
.bag-stage { position: relative; justify-self: center; width: min(100%, 520px); }
.bag-art { position: relative; aspect-ratio: 870 / 1099; container-type: inline-size; }
.bag-body, .bag-img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the paper under the bag (the box is the bag's body in bag.webp): a soft shadow while it's still in the air,
   a tight one once it's down. Each is a box-shadow round an empty core that stays hidden under the bag,
   so it's painted once and only its transform and opacity move. */
.bag-shade { position: absolute; left: 16.7%; top: 6.9%; width: 79%; height: 86.1%; }
.bag-shade::before, .bag-shade::after { content: ""; position: absolute; }
.bag-shade::before { inset: 10cqw; box-shadow: 0 0 14cqw 9cqw rgb(42 12 26 / .28); opacity: 0; }
.bag-shade::after { inset: 3.4cqw; box-shadow: -.6cqw .9cqw 2.4cqw 2.6cqw rgb(42 12 26 / .16); }
/* the disc sits still where we put it, at its real size: 2 in across on a bag face about 5 in wide
   (the face is 79% of bag.webp's width, so 0.4 of that). Clear of their name, under the end of COFFEE with
   a little paper between; at that size it can't fit the cream alone, so it laps the top of their label. */
.bag-sticker { position: absolute; left: 79.5%; top: 39.4%; width: 31.6%; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(-7deg);
  padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; }
.bag-sticker img { width: 100%; height: 100%; }
.bag-sticker::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; pointer-events: none; box-shadow: 0 1px 1.5px rgb(42 12 26 / .34); }
.bag-sticker:focus-visible { outline: 2px solid var(--rust); outline-offset: 4px; }
/* played once as the bag comes into view (page.js); without that, this is simply the finished state.
   Their bag arrives whole and settles, with our disc already on it: the bag and the disc are one body
   and land as one. It's set down like something heavy: most of the way in the first third, then a long,
   slow last few millimetres, never past its mark and never back. */
.bag-art.pre { opacity: 0; }
/* the fade is on the whole group, so the shadows never show through a half-faded bag */
.bag-art.play { animation: bag-arrive .22s ease-out backwards; }
.bag-art.play .bag-body { animation: bag-land .9s cubic-bezier(.16, .84, .2, 1) backwards; }
/* the soft shadow closes in under the bag and fades as it lands; the tight one only comes as it touches */
.bag-art.play .bag-shade::before { animation: bag-shade-far .9s cubic-bezier(.16, .84, .2, 1) backwards, bag-shade-fade .9s cubic-bezier(.45, 0, .55, 1) backwards; }
.bag-art.play .bag-shade::after { animation: bag-shade-near .9s cubic-bezier(.3, 0, .2, 1) backwards; }
@keyframes bag-arrive { from { opacity: 0; } }
@keyframes bag-land { from { transform: translate3d(.8%, -2.6%, 0) scale(1.025); } }
@keyframes bag-shade-far { from { transform: translate3d(-4%, 4.5%, 0) scale(1.05); } }
@keyframes bag-shade-fade { from { opacity: 1; } }
@keyframes bag-shade-near {
  from, 22% { opacity: 0; transform: scale(1.03); }
  to { opacity: 1; transform: none; }
}
.sticker-note { margin-top: 18px; font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 30em; opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .6s var(--ease); }
.sticker-note.on { opacity: 1; transform: none; }

/* ---------- drop merch ---------- */
.merch { padding: clamp(80px, 12vh, 150px) 0; border-top: 1px solid var(--rule); }
.merch-head { padding: 0 var(--gutter); max-width: 1440px; margin: 0 auto; display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.merch-head h2 { font-size: clamp(40px, 4.6vw, 80px); line-height: 1; }
.merch-head p { font-size: 17px; color: var(--muted); text-wrap: pretty; }
.merch-list { list-style: none; margin: 44px auto 0; padding: 0 var(--gutter); max-width: 1440px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 24px; }
.merch-list .pic { position: relative; aspect-ratio: 4 / 5; background: var(--paper); overflow: hidden; }
/* each piece's backdrop is colour-matched to this paper in the file itself; the photo's own grain then
   fades out at its edges, so no piece sits in a visible box */
.merch-list .ph {
  display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(transparent, #000 7%, #000 93%, transparent);
  mask-composite: intersect;
}
.merch-list > li { display: flex; flex-direction: column; }
.merch-list > li:hover .ph { transform: scale(1.03); }
/* closer: the photo doubles where it was tapped (page.js sets the origin), and a tap steps back */
.merch-list .pic { cursor: zoom-in; }
.merch-list .pic .ph { transition: transform 1.2s var(--ease), opacity .18s ease; }
.merch-list .pic.zoomed { cursor: zoom-out; }
.merch-list > li .pic.zoomed .ph { transform: scale(2.2); transition: transform .5s var(--ease), opacity .18s ease; -webkit-mask-image: none; mask-image: none; }
.merch-list h3 { margin-top: 14px; font-family: var(--serif); font-weight: 420; font-variation-settings: "opsz" 30; font-size: 23px; line-height: 1.15; }

/* each piece turns round */
.merch-list .turn {
  position: absolute; left: 12px; bottom: 12px; z-index: 1; font: 500 13px/1 var(--sans); color: var(--ink);
  background: var(--card); border: 1px solid var(--rule); border-radius: 99px; padding: 8px 13px; cursor: pointer;
}
/* made of: the close-up sits over the photo and takes the whole frame (the cloth is the picture now), and under the
   name, small swatches to choose from and the one plain fact. A tap on the picture steps to the next. */
.merch-list .cu { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .5s ease, transform .9s cubic-bezier(.16, 1, .3, 1); pointer-events: none; }
.merch-list .cu.on { opacity: 1; transform: none; }
.merch-list li.open .pic { cursor: pointer; }
.merch-list li.open .ph { opacity: 0; transition: transform 1.2s var(--ease), opacity .45s ease; }
.merch-list li.open .turn { opacity: 0; pointer-events: none; }
.merch-list .turn { transition: opacity .3s ease; }
.merch-list .mo-open {
  align-self: flex-start; margin-top: 8px; display: inline-flex; align-items: center; gap: 8px; padding: 4px 0;
  font: 500 14px/1.5 var(--sans); color: var(--ink); background: none; border: 0; border-bottom: 1px solid var(--rule); cursor: pointer;
}
.merch-list .mo-open:hover { border-bottom-color: currentColor; }
.merch-list .mo-open i { position: relative; width: 10px; height: 10px; transition: transform .4s var(--ease); }
.merch-list .mo-open i::before, .merch-list .mo-open i::after { content: ""; position: absolute; left: 0; top: 4.5px; width: 10px; height: 1.4px; background: currentColor; }
.merch-list .mo-open i::after { transform: rotate(90deg); }
.merch-list .mo-open[aria-expanded="true"] i { transform: rotate(45deg); }
.merch-list .mo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.16, 1, .3, 1); }
.merch-list li.open .mo { grid-template-rows: 1fr; }
/* shut, it's out of reach as well as out of sight, once it has finished closing */
.merch-list .mo > div { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s .5s; }
.merch-list li.open .mo > div { visibility: visible; transition: none; }
.merch-list .sw { display: flex; gap: 8px; padding: 14px 3px 0; }
.merch-list .sw button { width: 44px; height: 44px; padding: 0; border: 0; background: none; border-radius: 3px; overflow: hidden; cursor: pointer; opacity: .55; transition: opacity .3s, box-shadow .3s; -webkit-tap-highlight-color: transparent; }
.merch-list .sw button:hover { opacity: .85; }
.merch-list .sw button[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 1.5px var(--paper), 0 0 0 3px var(--ink); }
.merch-list .sw button:focus-visible { outline: none; box-shadow: 0 0 0 1.5px var(--paper), 0 0 0 3px var(--ink); }
.merch-list .sw img { display: block; width: 100%; height: 100%; object-fit: cover; }
.merch-list .fact { margin: 0; padding-top: 10px; min-height: 2.7em; font-size: 15.5px; line-height: 1.35; }
.merch-list .fact span { display: inline-block; transition: opacity .25s ease; }

/* ---------- the offer ---------- */
.offer { padding: clamp(90px, 14vh, 170px) var(--gutter) clamp(80px, 12vh, 140px); border-top: 1px solid var(--rule); max-width: 1440px; margin: 0 auto; }
.offer h2 { font-size: clamp(42px, 6vw, 104px); line-height: .98; max-width: 11em; }
.notify { margin-top: 38px; max-width: 560px; }
.notify label { display: block; font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.notify .field { display: flex; gap: 10px; }
.notify input { flex: 1; min-width: 0; min-height: 50px; padding: 12px 16px; font: inherit; font-size: 17px; color: var(--ink); background: var(--paper-hi); border: 1px solid var(--rule); border-radius: 999px; }
.notify input:focus { outline: 2px solid var(--rust); outline-offset: 2px; }
.notify input[aria-invalid="true"] { border-color: var(--rust); }
.notify button { background: var(--ink); color: var(--paper); min-height: 50px; padding: 12px 24px; }
.notify button:hover { background: var(--deep); }
.notify .fine { margin-top: 10px; font-size: 14px; color: var(--muted); }
.notify.done .field { display: none; }
.box { margin-top: clamp(64px, 10vh, 110px); }
.box h3 { font-family: var(--serif); font-weight: 400; font-variation-settings: "opsz" 30; font-size: 26px; }
/* the five things, named like the merch above: each sits on the same floor, its name under it. One row wide, each at its
   own width with the same room between; narrower, the two big ones over the three small ones, so the comic takes no row of its own */
.box-list { --pic: clamp(170px, 17vw, 240px); list-style: none; padding: 0; margin-top: 30px; display: grid; grid-template-columns: repeat(5, auto); justify-content: space-between; gap: 40px 24px; align-items: end; }
.box-list li { display: grid; gap: 14px; justify-items: start; }
.box-list li > span, .bx-go > span { font-family: var(--serif); font-weight: 420; font-variation-settings: "opsz" 30; font-size: 23px; line-height: 1.15; }
.bx-pic { height: var(--pic); display: flex; align-items: flex-end; }
.bx-pic img { display: block; width: auto; }
.bx-bag img { height: 100%; filter: drop-shadow(0 12px 18px rgba(42, 12, 26, .18)); }
.bx-sticker img { height: 58%; }
/* the card, front over back, both faces as printed */
.bx-card .bx-pic { position: relative; aspect-ratio: 1.08; }
.bx-card img { position: absolute; bottom: 0; height: 94%; box-shadow: 0 1px 2px rgba(42, 12, 26, .16), 0 16px 26px -14px rgba(42, 12, 26, .38); }
.cd-b { right: 0; transform: rotate(4deg); }
.cd-f { left: 0; transform: rotate(-3deg); }
/* the print: the issue's own art on a loose 8x10 sheet, unframed; the art's ground is the sheet's paper. Its box is as wide
   as the sheet: Safari sizes the box from the art's own 512 px before it gets the sheet's width from its height, which
   opened a gap after the print in the row */
.bx-print .bx-pic { width: calc(var(--pic) * .94 * 4 / 5); }
.bx-print .sheet { height: 94%; aspect-ratio: 4 / 5; padding-top: 8%; display: flex; justify-content: center; align-items: flex-start; background: #EFE7D6; transform: rotate(2deg);
  box-shadow: 0 1px 2px rgba(42, 12, 26, .16), 0 16px 26px -14px rgba(42, 12, 26, .38); }
.bx-print .sheet img { width: 84%; height: auto; }
/* the comic: the closed issue below in miniature, its page block and hinge at a third of the size. Scrolling on carries the
   book itself up here and back down to its place (twenty.js); this one shows when the book can't come up */
.bx-go { display: grid; gap: 14px; justify-items: start; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.bx-comic .bx-pic { --tilt: -2deg; transform: rotate(var(--tilt)); }
.bx-book { position: relative; height: 94%; aspect-ratio: 2 / 3; background: var(--paper-hi); border-radius: 1px;
  box-shadow: 0 .4px .4px rgba(42, 12, 26, .22), 0 4.7px 7.3px -4px rgba(42, 12, 26, .42), 0 13px 23px -9px rgba(42, 12, 26, .5); }
.bx-book img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bx-book::before { content: ""; position: absolute; inset: .7px -1.7px -1.3px .7px; z-index: -1; border-radius: 0 1px 1px 0; background: #EFE7D8;
  box-shadow: inset -.4px 0 0 #DCCFB8, inset -1px 0 0 #F4EEE2, inset -1.3px 0 0 #DCCFB8, 0 .4px 0 #D3C5AC; }
.bx-book::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 7%; pointer-events: none;
  background: linear-gradient(to right, rgba(42, 12, 26, .28), rgba(42, 12, 26, .06) 28%, rgba(255, 250, 240, .22) 46%, rgba(42, 12, 26, .1) 62%, transparent); }
.bx-comic.lent .bx-book { visibility: hidden; }
@media (hover: hover) { .bx-go .bx-pic { transition: transform .5s var(--ease); } .bx-go:hover .bx-pic { transform: rotate(var(--tilt)) translateY(-3px); } }
.bx-go:focus-visible { outline: none; }
.bx-go:focus-visible .bx-book { outline: 2px solid var(--rust); outline-offset: 4px; }
@media (max-width: 1100px) {
  .box-list { grid-template-columns: repeat(6, 1fr); }
  .box-list li { grid-column: span 2; }
  .box-list .bx-bag, .box-list .bx-card { grid-column: span 3; }
}

/* ---------- the house footer ---------- */
.house { border-top: 1px solid var(--rule); padding: 44px var(--gutter) calc(40px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: auto 1fr; gap: 10px 40px; align-items: baseline; max-width: 1440px; margin: 0 auto; }
.house-mark svg { height: 13px; width: auto; display: block; }
.house-mark .wm-l { fill: var(--ink); }
.house-mark .wm-1 { fill: var(--vermilion); }
/* the house's one gesture here: the carried 1 comes up out of the O, once, as the footer arrives */
.house.wait .wm-1 { transform: translate(117px, 1150px); opacity: 0; }
.house.carried .wm-1 { transform: none; opacity: 1; transition: transform 1.1s cubic-bezier(.3, 0, .1, 1) .2s, opacity .25s ease .2s; }
.house .motto { font-family: var(--serif); font-style: italic; font-weight: 380; font-size: 19px; }
.house .next { grid-column: 1; font-size: 14px; color: var(--muted); }
/* every source on the page, in one quiet line above the credits */
.house .sources { grid-column: 2; font-size: 12.5px; line-height: 1.5; color: var(--muted); max-width: 70em; }
.house .sources a { text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.house .credits { grid-column: 2; font-size: 12.5px; line-height: 1.5; color: var(--muted); max-width: 70em; }
/* the way on to the rest of the house, and how to reach us, as every house page's footer has them */
.house-row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 40px; margin-top: 24px; padding-top: 10px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--muted); }
.house-row nav { display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 15px; font-weight: 500; color: var(--ink); }
.house-row a { padding: 11px 0; text-decoration: none; }
.house-row a:hover, .house-row a:focus-visible { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ---------- intro (skipped under reduced motion) ---------- */
/* Nothing above the paper (the opening title included) shows until main.js has swapped .intro for
   .ready/.settled, which it only does once fonts are in and the descent is measured. Without this,
   a slow cold load paints the opening's pieces as JS reaches them instead of all together: the byline
   alone, the title still masked out, captions and the farm heading loose (see .caption/.farm-text
   below) — a half-built screen instead of paper, then the opening arriving as designed. */
.intro .cbox, .intro .notify-link, .intro .hud, .intro .hint, .intro .opening { opacity: 0; }
.intro .opening { visibility: hidden; }
.ready .cbox, .ready .notify-link { animation: fade 1.2s .9s ease backwards; }
.from-house .intro .cbox, .from-house .ready .cbox { opacity: 1; animation: none; }
.ready .hud, .ready .hint { animation: fade 1.2s 1.5s ease backwards; }
/* Failsafe: if main.js or a CDN script (gsap, three, lenis) never arrives, .intro never gets removed.
   Reveal everything after a few seconds rather than leave the page blank. This animation only exists
   on elements still matching .intro — the instant JS removes that class in the ordinary case, the
   selector stops matching and the animation is gone with it, so it never fights JS's own control. */
@keyframes intro-failsafe { to { opacity: 1; visibility: visible; } }
.intro .cbox, .intro .notify-link, .intro .hud, .intro .hint, .intro .opening { animation: intro-failsafe 0s 3s forwards; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- phones: a different page, not a smaller one ---------- */
@media (max-width: 760px) {
  :root { --box: 44px; }
  .cbox { gap: 4px; }
  .cbox b { font-size: 9.5px; }
  .notify-link { top: calc(var(--top) + 5px); font-size: 15px; }
  .scene { height: calc(100lvh + 360lvh); }
  .opening { left: var(--gutter); right: var(--gutter); bottom: calc(var(--top) + 96px); max-width: none; }
  .title { font-size: clamp(50px, 15.4vw, 72px); line-height: .95; }
  .title .ln { display: block; }
  .opening .by { font-size: 19px; margin-top: 12px; }
  .caption { top: calc(var(--top) + var(--box) + 22px); right: var(--gutter); font-size: 22px; }
  .farm-text { top: calc(var(--top) + var(--box) + 20px); right: var(--gutter); max-width: none; }
  .farm-line { font-size: 34px; }
  .farm-credit { font-size: 14px; max-width: 22em; }
  .hud .v { font-size: 21px; }
  .hud { font-size: 12.5px; }
  /* A phone has no scrollbar and no wheel, so the cue says it in words, in well before the 2 s a
     first-time visitor gives a screen. It goes with the title as the descent starts (main.js), never on a tap. */
  .hint { font-size: 12.5px; }
  .hint .v { font-size: 21px; }
  .ready .hint { animation: fade .6s .5s ease backwards; }

  .part { grid-template-columns: 1fr; font-size: clamp(44px, 13.6vw, 64px); }
  .part .gloss { grid-column: 1; grid-row: 2; margin-top: 4px; margin-bottom: 10px; }
  .whole { font-size: clamp(44px, 13.6vw, 64px); }
  .facts { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .facts dl { grid-column: 1 / -1; grid-row: 3; grid-template-columns: 1fr; gap: 22px; margin-top: 30px; }
  .facts .sheet { grid-row: 1; margin: 0 0 34px; }
  .facts .notes { grid-row: 3; margin-top: 30px; }
  .facts .sheet dd { font-size: 15.5px; }
  .spec { grid-row: 2; }
  .spec-split { grid-column: 1; width: 120px; justify-self: end; margin: 0 10px 0 0; }
  .spec-bean { grid-column: 2; width: 74px; justify-self: start; margin: 40px 0 0 10px; }
  .facts dd { font-size: 18px; }

  .roaster { grid-template-columns: 1fr; }
  .recipe { margin: clamp(56px, 9vh, 90px) 10px; padding: 26px 20px 24px; }
  .recipe h3 { font-size: 32px; }
  .pull-head { display: block; }
  .pull-spec { margin-top: 10px; font-size: 12px; }
  .pull-box { height: clamp(210px, 32svh, 270px); cursor: default; }
  .pull-under { flex-direction: column; align-items: stretch; gap: 6px; font-size: 11.5px; }
  .ps-name { font-size: 19px; }
  .pull-key { gap: 4px 14px; font-size: 11.5px; }
  .tips { grid-template-columns: 1fr; gap: 14px; }
  .tips li { font-size: 16px; }

  .switch { grid-template-columns: 1fr; grid-template-areas: "head" "frames" "steps" "clock"; }
  .sw-frames { margin-top: 18px; position: relative; top: auto; justify-self: center; max-width: 300px; }
  .sw-ratio .big { font-size: 64px; }
  .steps { margin-top: 10px; }
  .steps li { font-size: 16px; }
  .clock .time { font-size: 72px; }
  .clock-ctl button { flex: 1; }

  .bag { grid-template-columns: 1fr; }
  .bag-stage { width: min(84vw, 420px); }
  .bag-words p { font-size: 17px; }

  .merch-head { display: block; }
  .merch-head p { margin-top: 12px; }
  .merch-list { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; padding-bottom: 8px; }
  .merch-list::-webkit-scrollbar { display: none; }
  .merch-list > li { flex: 0 0 82%; scroll-snap-align: start; }

  .offer h2 { font-size: 44px; }
  .why { grid-template-columns: 1fr; }
  .why h2 { font-size: 44px; }
  .why-words { font-size: 18px; }
  .notify .field { flex-direction: column; }
  .notify button { width: 100%; }
  /* one thing at a time, the way the merch above swipes: a strip edge to edge, each piece centred on its own floor with
     its name under it and its neighbours just showing. The comic rises out of it from wherever it sits (twenty.js) */
  .box-list { --pic: 190px; --slide: 64vw; display: flex; gap: 14px; margin-inline: calc(-1 * var(--gutter)); padding: 0 calc((100vw - var(--slide)) / 2) 8px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .box-list::-webkit-scrollbar { display: none; }
  .box-list li { flex: 0 0 var(--slide); scroll-snap-align: center; justify-items: center; }
  .box-list .bx-go { justify-items: center; }
  /* Safari sizes the print's picture box to the whole slide (the sheet's width comes from its height), which left the sheet
     53 px left of its name; centred in its box, every piece sits over its name */
  .box-list .bx-pic { justify-content: center; }
  .box-list li > span, .bx-go > span { font-size: 20px; }

  .house { grid-template-columns: 1fr; gap: 12px; }
  .house .sources, .house .credits { grid-column: 1; }
}

/* the smallest phones: the box's pieces a touch smaller, so the card still fits its slide */
@media (max-width: 359px) {
  .box-list { --pic: 168px; }
  .box-list li > span, .bx-go > span { font-size: 18px; }
}

/* short screens (a phone on its side): everything in the descent sits lower and smaller */
@media (max-height: 520px) and (min-width: 761px) {
  .opening { bottom: calc(var(--top) + 76px); }
  .opening .by { margin-top: 10px; font-size: 17px; }
  .caption, .farm-text { top: calc(var(--top) + 6px); left: calc(var(--gutter) + var(--box) + 24px); }
  .farm-line { font-size: 30px; }
  .hud .v { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .dialing::before { animation: none; }
  .ln > span, .spec, .frame, .r-more, .sticker-note, .part .rest, .merch-list .ph, .merch-list .cu, .merch-list .mo, .merch-list .mo > div, .merch-list .fact span { transition: none !important; }
  .ln > span { transform: none; }
  .ready .cbox, .ready .notify-link, .ready .hud, .ready .hint { animation: none; }
  .scroll-cue, .scroll-cue.in, .scroll-cue.gone { transition: none; }
  .scroll-cue svg { animation: none; }
}