/* The Lived Experiment: signup page, direction F (The Foundation).
   Oliver's brand document carried into a living letter: his paper, sand and black,
   hairline running heads, a sloped Bookman for headlines, the photographs as the only colour. */

@font-face { font-family: 'Bonum Web'; src: url(/assets/fonts/bonum-web-regular.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bonum Web'; src: url(/assets/fonts/bonum-web-bold.woff2) format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bonum Sloped'; src: url(/assets/fonts/bonum-sloped-regular.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bonum Sloped'; src: url(/assets/fonts/bonum-sloped-bold.woff2) format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --paper: #f0efec;
  --raised: #f7f6f3;
  --cover: #121212;
  --frame: #2c2b29;
  --ink: #141414;
  --ink-2: #5c5954;
  --rule: #8e8b86;
  --field: #6f6c67;
  --on-cover: #edebe6;
  --on-cover-2: #a8a49d;
  --pad: 64px;
  --text: 'Bonum Web', 'Bookman Old Style', 'URW Bookman', Georgia, serif;
  --display: 'Bonum Sloped', 'Bonum Web', 'Bookman Old Style', Georgia, serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-variant-numeric: lining-nums;
  caret-color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--ink); color: var(--paper); }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink-2); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
img { max-width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* The running head, like the band at the top of every page of the foundation. The hero is one full screen; a single hairline hands over to Writing. */
.head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  padding: 16px var(--pad) 14px; padding-inline: max(var(--pad), calc((100% - 1680px) / 2 + var(--pad)));
  font-size: 13px; line-height: 18px; color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.head { border-bottom: 1px solid var(--rule); }

.grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px;
  width: 100%; max-width: 1680px; margin: 0 auto;
}

/* Page one: the cover of the letter. */
.s1 { min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
.s1-main { align-content: center; padding: clamp(28px, 5vh, 56px) var(--pad) clamp(24px, 4vh, 44px); }
.s1-main > * { min-width: 0; }
.mast {
  grid-column: 1 / span 9; grid-row: 1; align-self: end; margin: 0;
  font-family: var(--display); font-weight: 400; -webkit-text-stroke: .0095em currentColor;
  font-size: clamp(50px, 6.4vw, 96px); line-height: 1; letter-spacing: -.015em; text-wrap: balance;
}
.lede { grid-column: 1 / -1; grid-row: 2; margin: 14px 0 0; max-width: 34em; color: var(--ink-2); font-size: 20px; line-height: 1.5; text-wrap: pretty; }
.lede .l2 { display: block; font-family: var(--display); color: var(--ink); -webkit-text-stroke: .008em currentColor; } /* the reply, in the name's own voice */
@media (min-width: 1261px) {
  /* The second sentence picks up on the next line exactly where the first one ends. */
  .lede { display: grid; grid-template-columns: fit-content(50%) minmax(0, 1fr); max-width: none; } /* both may wrap if text is enlarged */
  .lede .l1 { grid-column: 1; grid-row: 1; }
  .lede .l2 { grid-column: 2; grid-row: 2; }
}

/* Five equal frames across the page, one for each step of the method. On phones they stack into one frame beside the method. */
.flow { display: contents; }
.strip {
  --sh: min(clamp(150px, 27vh, 300px), calc((100vw - 2 * var(--pad)) / 5 * 1.25));
  grid-column: 1 / -1; grid-row: 3; display: flex; gap: 1px;
  margin: clamp(24px, 4.4vh, 44px) 0 0; padding: 0; list-style: none;
  background: var(--rule); border: 1px solid var(--rule);
}
.strip li { flex: 1 1 0; min-width: 0; overflow: hidden; background: var(--paper); }
.strip figure { margin: 0; }
.strip img { display: block; width: 100%; height: var(--sh); object-fit: cover; background: #2a2724; }
.strip figcaption {
  padding: 7px 10px 8px; font-size: 12px; line-height: 16px; letter-spacing: .02em; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums;
}

/* The method, ending at the reader. */
.method { grid-column: 1 / -1; grid-row: 4; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; row-gap: clamp(22px, 3.4vh, 34px); margin: clamp(24px, 4.4vh, 44px) 0 0; padding: 0; list-style: none; }
.st { display: flex; align-items: flex-start; flex: none; }
.st-text { flex: none; display: flex; flex-direction: column; gap: 6px; }
.st-num { font-size: 12px; line-height: 16px; color: var(--ink-2); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.st-word { font-size: 20px; line-height: 24px; white-space: nowrap; }
.arrow {
  position: relative; flex: none; width: clamp(28px, 2.6vw, 44px); height: 1px; margin: 34px 16px 0;
  background: var(--rule); transition: background-color .45s cubic-bezier(.16, 1, .3, 1);
}
.arrow::after {
  content: ""; position: absolute; right: -1px; top: -4px; width: 8px; height: 8px;
  border-top: 1px solid var(--rule); border-right: 1px solid var(--rule); transform: rotate(45deg);
  transition: border-color .45s cubic-bezier(.16, 1, .3, 1);
}
.st:nth-child(2) .arrow { transition-delay: 90ms; } .st:nth-child(2) .arrow::after { transition-delay: 90ms; }
.st:nth-child(3) .arrow { transition-delay: 180ms; } .st:nth-child(3) .arrow::after { transition-delay: 180ms; }
.st:nth-child(4) .arrow { transition-delay: 270ms; } .st:nth-child(4) .arrow::after { transition-delay: 270ms; }
.you-arrow, .you-arrow::after { transition-delay: 360ms; }
/* Focusing the field closes the line towards you; sending runs it again. */
.method:has(input:focus) .arrow, html[data-signup-state="sending"] .method .arrow { background: var(--ink); }
.method:has(input:focus) .arrow::after, html[data-signup-state="sending"] .method .arrow::after { border-color: var(--ink); }

/* "You" is the last step: its arrow points at the field. The 52px field is centred on the words' line (16px number + 6px gap + half a 24px line = 34px). */
.you { flex: none; padding-top: 8px; }
.you-line { display: grid; grid-template-columns: auto auto auto; justify-content: start; align-items: center; }
.you-line > :nth-child(n+4) { grid-column: 3; } /* messages and "Not sure yet?" sit under the field */
.you .msg:empty { min-height: 0; margin: 0; }
.taste { margin: 8px 0 0; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.taste a { color: var(--ink); }
.you-label { display: block; margin: 0; font-family: var(--display); font-size: 20px; line-height: 24px; }
.you-line .arrow { margin: 0 16px; }
.you .row { width: 400px; }
.row { display: flex; gap: 8px; }
.field {
  flex: 1 1 auto; min-width: 0; height: 52px; padding: 0 16px;
  background: var(--raised); border: 1px solid var(--field); border-radius: 0;
  color: var(--ink); font: 400 17px/24px var(--text); outline: none; -webkit-appearance: none; appearance: none;
}
.field::placeholder { color: #6f6b66; }
.field:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.field[aria-invalid="true"] { border: 2px solid var(--ink); padding: 0 15px; }
.btn {
  flex: none; height: 52px; padding: 0 24px; border: 0; border-radius: 0;
  background: var(--ink); color: var(--paper); font: 400 17px/24px var(--text); letter-spacing: .01em;
  cursor: pointer; transition: background-color .25s cubic-bezier(.2, .7, .2, 1); -webkit-appearance: none; appearance: none;
}
.btn:hover { background: #38352f; }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.btn:disabled { cursor: progress; background: #38352f; }
.msg { margin: 10px 0 0; min-height: 19px; font-size: 14px; line-height: 19px; color: var(--ink); }
.nojs { display: none; scroll-margin-top: 45vh; }
.nojs:target { display: block; }
.signup-ready .nojs { display: none !important; }

/* Pages two and three. */
.page { border-top: 1px solid var(--rule); }
.page-body { padding: clamp(56px, 9vw, 120px) var(--pad); row-gap: 0; }
.h2 {
  margin: 0; font-family: var(--display); font-weight: 400; -webkit-text-stroke: .0095em currentColor;
  font-size: clamp(34px, 3.6vw, 52px); line-height: 1.06; letter-spacing: -.01em;
}
.work-h { grid-column: 1 / span 4; }
.work-note { margin: 14px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); max-width: 22em; }
.work { grid-column: 6 / span 7; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.work li { border-bottom: 1px solid var(--rule); }
.work a { display: grid; grid-template-columns: 96px 1fr auto; gap: 24px; align-items: baseline; padding: 18px 0; text-decoration: none; }
.work a:hover .t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.work .k { font-size: 12px; line-height: 16px; letter-spacing: .04em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.work .t { font-size: 22px; line-height: 1.35; }
.work .d { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* What you get: the four parts of every letter, on the same grid as Writing. */
.get-spec { margin: 22px 0 0; font-size: 13px; line-height: 18px; letter-spacing: .02em; }
.get { grid-column: 6 / span 7; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.get li { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 24px; row-gap: 4px; padding: 18px 0 20px; border-bottom: 1px solid var(--rule); }
.get .k { grid-row: span 2; padding-top: 7px; font-size: 12px; line-height: 16px; letter-spacing: .04em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.get .t { font-size: 22px; line-height: 1.35; }
.get .d { font-size: 15px; line-height: 1.5; color: var(--ink-2); max-width: 34em; }

/* The black covers, front and back of the foundation. */
.cover { position: relative; background: var(--cover); color: var(--on-cover); }
.cover ::selection { background: var(--on-cover); color: var(--cover); }
.frame { position: absolute; inset: 24px; border: 1px solid var(--frame); pointer-events: none; }
.cover-in { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; padding: clamp(96px, 14vw, 168px) var(--pad) 72px; }
.mast-2 {
  margin: 0; font-family: var(--display); font-weight: 400; -webkit-text-stroke: .009em currentColor;
  font-size: clamp(44px, 5.4vw, 80px); line-height: 1.02; letter-spacing: -.015em; text-wrap: balance;
}
.sub { margin: 0; color: var(--on-cover-2); font-size: 18px; line-height: 1.5; }
.cover form { width: min(460px, 100%); }
.cover .field { background: #1c1b1a; border-color: #8c877f; color: var(--on-cover); }
.cover .field::placeholder { color: #97928a; }
.cover .field:focus-visible, .cover .btn:focus-visible, .cover a:focus-visible { outline-color: var(--on-cover); }
.cover .btn { background: var(--on-cover); color: var(--cover); }
.cover .btn:hover { background: #cfccc5; }
.cover .msg { color: var(--on-cover); }
.cover a { color: var(--on-cover); }
.colophon { margin-top: 64px; color: var(--on-cover-2); font-size: 12px; line-height: 16px; letter-spacing: .03em; }
.closed { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 0; margin: 4px 0 0; padding: 0; list-style: none; color: var(--on-cover); font-size: 15px; line-height: 22px; }
.closed li { display: flex; align-items: center; }
.closed .ca { display: inline-block; position: relative; width: 26px; height: 1px; margin: 0 10px; background: var(--on-cover-2); }
.closed .ca::after { content: ""; position: absolute; right: -1px; top: -3px; width: 6px; height: 6px; border-top: 1px solid var(--on-cover-2); border-right: 1px solid var(--on-cover-2); transform: rotate(45deg); }
.closed .cy { font-family: var(--display); font-weight: 700; }
.cover-head { position: relative; margin: 24px 24px 0; padding: 14px 24px 12px; color: var(--on-cover-2); border-bottom: 1px solid var(--frame); }

/* After subscribing the letter turns to its back cover. */
.done { display: none; min-height: 100vh; min-height: 100svh; flex-direction: column; }
.done .cover-in { flex: 1 1 auto; justify-content: center; padding-top: 96px; }
.done .already { display: none; }
html[data-signup-state="subscribed"] main > section:not(.done),
html[data-signup-state="existing"] main > section:not(.done) { display: none; }
html[data-signup-state="subscribed"] .done,
html[data-signup-state="existing"] .done,
.done.always { display: flex; }
html[data-signup-state="existing"] .done .fresh { display: none; }
html[data-signup-state="existing"] .done .already { display: block; }
.done:has(#already:target) .fresh { display: none; }
.done:has(#already:target) .already { display: block; }
.rise { animation: rise .7s cubic-bezier(.16, 1, .3, 1) both; }
.rise:nth-child(2) { animation-delay: 60ms; } .rise:nth-child(3) { animation-delay: 120ms; } .rise:nth-child(4) { animation-delay: 180ms; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* The arrival, the page's one authored moment, kept minimal. The name settles; everything you read, the form included,
   is there from the first frame; then the method's arrows draw to the field one step at a time while each stage's
   photograph develops (desktop) or rotates into the frame (phones). boot.js holds the first frame until the fonts are
   in (html.intro, then html.intro-go); a key press or focusing the field finishes it at once. */
@keyframes arrive { from { opacity: 0; transform: translateY(var(--rise, 8px)); filter: blur(var(--blur, 6px)); } to { opacity: 1; transform: none; filter: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes print { from { opacity: .42; filter: brightness(1.55) contrast(.55) saturate(0); } to { opacity: 1; filter: none; } }
@keyframes draw { from { transform: scaleX(0); } to { transform: none; } }
@keyframes return-draw { 0% { clip-path: inset(0 0 100% 99%); } 40% { clip-path: inset(0 0 0 99%); } 100% { clip-path: inset(0); } }
@keyframes drop { from { transform: scaleY(0); } to { transform: none; } }
@keyframes chev { from { opacity: 0; } to { opacity: 1; } }
@keyframes spine {
  0% { transform: scaleY(0); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  25% { transform: scaleY(.25); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  50% { transform: scaleY(.5); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  75% { transform: scaleY(.75); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  100% { transform: scaleY(1); }
}
@keyframes node { from { background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); } to { background: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } }
@keyframes develop { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes settle { from { transform: scale(1.08); } to { transform: none; } }
.intro .mast { --rise: 12px; --blur: 6px; animation: arrive 1100ms cubic-bezier(.16, 1, .3, 1) both; }
@media (min-width: 761px) {
  /* One step every 800ms from 600ms. Each arrow and its stage's photograph start together, last as long and share one
     easing, so the line and the prints move as one; the arrowhead lands as the line finishes. */
  .intro .strip img { animation: print 800ms cubic-bezier(.4, 0, .2, 1) both; }
  .intro .method .arrow { transform-origin: left center; animation: draw 800ms cubic-bezier(.4, 0, .2, 1) both; }
  .intro .method .arrow::after { animation: chev 150ms both; }
  .intro .strip li:nth-child(1) img, .intro .st:nth-child(1) .arrow { animation-delay: 600ms; } .intro .st:nth-child(1) .arrow::after { animation-delay: 1250ms; }
  .intro .strip li:nth-child(2) img, .intro .st:nth-child(2) .arrow { animation-delay: 1400ms; } .intro .st:nth-child(2) .arrow::after { animation-delay: 2050ms; }
  .intro .strip li:nth-child(3) img, .intro .st:nth-child(3) .arrow { animation-delay: 2200ms; } .intro .st:nth-child(3) .arrow::after { animation-delay: 2850ms; }
  .intro .strip li:nth-child(4) img, .intro .st:nth-child(4) .arrow { animation-delay: 3000ms; } .intro .st:nth-child(4) .arrow::after { animation-delay: 3650ms; }
  .intro .strip li:nth-child(5) img, .intro .you-line .arrow { animation-delay: 3800ms; } .intro .you-line .arrow::after { animation-delay: 4450ms; }
}
.intro .s1 *, .intro .s1 *::before, .intro .s1 *::after { animation-play-state: paused; }
.intro.intro-go .s1 *, .intro.intro-go .s1 *::before, .intro.intro-go .s1 *::after { animation-play-state: running; }
.intro-skip .s1 *, .intro-skip .s1 *::before, .intro-skip .s1 *::after,
.s1:has(input:focus) *, .s1:has(input:focus) *::before, .s1:has(input:focus) *::after { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .rise { animation: none; }
  .s1 *, .s1 *::before, .s1 *::after { animation: none !important; }
  *, *::before, *::after { transition: none !important; }
}

@media (max-width: 1380px) {
  .st-word { font-size: 18px; line-height: 22px; }
  .arrow { margin: 32px 12px 0; }
  .you-line .arrow { margin: 0 12px; }
  .you-label { font-size: 18px; line-height: 22px; }
  .you .row { width: 370px; }
}
@media (min-width: 761px) and (max-width: 1260px) {
  /* The line wraps like a carriage return: Extraction's arrow runs to the row's end, turns down, comes back
     along the gap and drops onto "You", so the method still reads as one line into the field. */
  .method { --you-cx: 16px; display: grid; grid-template-columns: repeat(4, auto); justify-content: normal; row-gap: 44px; width: max-content; max-width: 100%; margin-inline: auto; position: relative; }
  .st .arrow { flex: 1 1 auto; }
  .st:nth-child(4) .arrow { margin-right: 0; }
  .st:nth-child(4) .arrow::after { display: none; }
  .method::before { content: ""; position: absolute; top: 32px; right: 0; left: var(--you-cx); height: 34px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); transition: border-color .45s cubic-bezier(.16, 1, .3, 1) 360ms; }
  .you { grid-column: 1 / -1; display: flex; justify-content: flex-start; padding-top: 0; }
  .you-label { position: relative; }
  .you-label::before { content: ""; position: absolute; left: calc(var(--you-cx) - .5px); top: -37px; width: 1px; height: 34px; background: var(--rule); transition: background-color .45s cubic-bezier(.16, 1, .3, 1) 450ms; }
  .you-label::after { content: ""; position: absolute; left: calc(var(--you-cx) - 4px); top: -11px; width: 7px; height: 7px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); transform: rotate(45deg); transition: border-color .45s cubic-bezier(.16, 1, .3, 1) 450ms; }
  .you-line .arrow, .you-line .arrow::after { transition-delay: 540ms; }
  .method:has(input:focus)::before, html[data-signup-state="sending"] .method::before { border-color: var(--ink); }
  .method:has(input:focus) .you-label::before, html[data-signup-state="sending"] .you-label::before { background: var(--ink); }
  .method:has(input:focus) .you-label::after, html[data-signup-state="sending"] .you-label::after { border-color: var(--ink); }
  /* The arrival draws the return after Extraction's arrow, then the drop onto "You", then its arrow into the field. */
  .intro .method::before { animation: return-draw 600ms cubic-bezier(.4, 0, .2, 1) 3800ms both; }
  .intro .you-label::before { transform-origin: top; animation: drop 300ms cubic-bezier(.4, 0, .2, 1) 4400ms both; }
  .intro .you-label::after { animation: chev 150ms 4600ms both; }
  .intro .strip li:nth-child(5) img, .intro .you-line .arrow { animation-delay: 4700ms; } .intro .you-line .arrow::after { animation-delay: 5350ms; }
}
@media (min-width: 761px) and (max-width: 1200px) {
  .mast { grid-column: 1 / -1; }
  .strip figcaption { white-space: normal; }
}
@media (min-width: 761px) and (max-width: 1024px) {
  .st-word { font-size: 17px; line-height: 22px; }
  .arrow { margin: 32px 10px 0; }
  .you-line .arrow { margin: 0 10px; }
  .work-h, .work, .get { grid-column: 1 / -1; }
  .work, .get { margin-top: 32px; }
  }
@media (max-width: 760px) {
  :root { --pad: 20px; }
  .head .r { display: none; }
  .s1 { min-height: 0; }
  .s1-main { display: flex; flex-direction: column; padding: 28px var(--pad) 32px; }
  .mast { order: 1; font-size: clamp(44px, 13vw, 56px); line-height: 1; }
  .lede { order: 2; margin-top: 18px; font-size: 18px; }
  /* The method runs down a spine into the email field; each step's photograph develops in the frame beside it as the line arrives. */
  .flow { order: 3; display: block; position: relative; margin-top: 30px; --row: 40px; --spine: 16px; --fw: min(38vw, 156px); --T: 800ms; --t0: 600ms; }
  .strip { position: absolute; top: 0; right: 0; width: var(--fw); height: calc(var(--row) * 5); display: block; margin: 0; overflow: hidden; background: var(--paper); }
  .strip li { position: absolute; inset: 0; background: transparent; }
  .strip figure { display: flex; flex-direction: column; height: 100%; }
  .strip img { flex: 1 1 auto; height: 0; min-height: 0; }
  .strip figcaption { position: relative; background: var(--paper); }
  .method { display: block; position: relative; margin: 0; }
  .method::before, .method::after { content: ""; position: absolute; left: calc(var(--spine) - .5px); top: calc(var(--row) / 2); width: 1px; height: calc(var(--row) * 4); background: var(--rule); }
  .method::after { background: var(--ink); transform-origin: top; }
  .st { position: relative; display: flex; align-items: center; height: var(--row); max-width: calc(100% - var(--fw) - 12px); padding-left: calc(var(--spine) + 18px); }
  .st-text { flex-direction: row; align-items: baseline; gap: 10px; }
  .st-num { display: inline-block; width: 18px; font-size: 11px; line-height: 16px; }
  .st-word { font-size: 19px; line-height: 24px; }
  .st .arrow { display: none; }
  .st::before, .you-label::before { content: ""; position: absolute; z-index: 1; left: calc(var(--spine) - 3.5px); top: calc(50% - 3.5px); width: 7px; height: 7px; background: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
  .you { display: block; padding-top: 0; }
  .you-line { display: block; }
  .you-label { position: relative; display: flex; align-items: center; height: var(--row); margin: 0; padding-left: calc(var(--spine) + 46px); font-size: 20px; line-height: 24px; }
  .you-line .arrow { display: block; width: 1px; height: calc(var(--row) / 2 + 26px); margin: calc(var(--row) / -2) 0 8px calc(var(--spine) - .5px); background: var(--ink); transform-origin: top; }
  .you-line .arrow::after { left: -3.5px; right: auto; top: auto; bottom: 0; border-color: var(--ink); transform: rotate(135deg); }
  .you .row { width: auto; }
  /* Larger text that no longer fits beside the frame (page.js sets .is-tight), or no script to check: the frame moves above a plain list. */
  :is(html:not(.boot) .flow, .flow.is-tight) .strip { position: relative; width: 100%; height: auto; aspect-ratio: 3 / 2; margin-bottom: 20px; }
  :is(html:not(.boot) .flow, .flow.is-tight) .st { max-width: none; height: auto; min-height: var(--row); }
  :is(html:not(.boot) .flow, .flow.is-tight) .you-label { height: auto; min-height: var(--row); }
  :is(html:not(.boot) .flow, .flow.is-tight) .method::before, :is(html:not(.boot) .flow, .flow.is-tight) .method::after { display: none; }
  /* The sequence, only when boot.js has run: the first stage and its photograph are there from the start; then, one step
     every --T from --t0, each photograph wipes into the frame while the spine travels to its stage, with the same length
     and easing, so the photograph lands as the line arrives. Then the arrow drops into the field. */
  .intro .strip li:nth-child(n+2) img { animation: develop var(--T) cubic-bezier(.4, 0, .2, 1) both, settle var(--T) cubic-bezier(.4, 0, .2, 1) both; }
  .intro .strip li:nth-child(n+2) figcaption { animation: fade 1ms linear both; } /* captions swap cleanly; a crossfade overlaps the words */
  .intro .method::after { animation: spine calc(var(--T) * 4) var(--t0) both; }
  .intro .st:nth-child(n+2)::before, .intro .you-label::before { animation: node 200ms both; }
  .intro .you-line .arrow { animation: drop var(--T) cubic-bezier(.4, 0, .2, 1) both; }
  .intro .you-line .arrow::after { animation: chev 150ms both; }
  .intro .strip li:nth-child(2) img { animation-delay: var(--t0); } .intro .strip li:nth-child(2) figcaption, .intro .st:nth-child(2)::before { animation-delay: calc(var(--t0) + var(--T) - 120ms); }
  .intro .strip li:nth-child(3) img { animation-delay: calc(var(--t0) + var(--T)); } .intro .strip li:nth-child(3) figcaption, .intro .st:nth-child(3)::before { animation-delay: calc(var(--t0) + var(--T) * 2 - 120ms); }
  .intro .strip li:nth-child(4) img { animation-delay: calc(var(--t0) + var(--T) * 2); } .intro .strip li:nth-child(4) figcaption, .intro .st:nth-child(4)::before { animation-delay: calc(var(--t0) + var(--T) * 3 - 120ms); }
  .intro .strip li:nth-child(5) img { animation-delay: calc(var(--t0) + var(--T) * 3); } .intro .strip li:nth-child(5) figcaption, .intro .you-label::before { animation-delay: calc(var(--t0) + var(--T) * 4 - 120ms); }
  .intro .you-line .arrow { animation-delay: calc(var(--t0) + var(--T) * 4); }
  .intro .you-line .arrow::after { animation-delay: calc(var(--t0) + var(--T) * 5 - 150ms); }
  .taste { margin-top: 14px; }
  .row { flex-direction: column; }
  .btn { width: 100%; }
  .page-body { display: flex; flex-direction: column; gap: 28px; padding: 48px var(--pad) 56px; }
          .work a { grid-template-columns: 1fr; gap: 4px; }
  .work .k { order: 2; }
  .get li { grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; padding: 16px 0 18px; }
  .get .k { padding-top: 5px; }
  .get .t { font-size: 19px; }
  .work .t { font-size: 19px; }
  .frame { inset: 12px; }
  .cover-head { margin: 12px 12px 0; padding: 12px 16px 10px; flex-wrap: wrap; row-gap: 2px; }
  .cover-head .r { display: inline; }
  .cover-in { padding: 80px var(--pad) 56px; }
  .closed { font-size: 13px; }
  .closed .ca { width: 16px; margin: 0 7px; }
}
@media (max-width: 350px) {
  .st-num { display: none; }
  .you-label { padding-left: calc(var(--spine) + 18px); }
}