/* Life Dump landing page.
   Full-bleed colour bands, one idea per screen. Scenes that animate with the scroll are exactly one
   screen tall and hold still while they play; everything else plays once when it comes into view. */

:root {
  --red: #FF4A1C;
  --yellow: #FFD60A;
  --blue: #2340FF;
  --pink: #FF7AB6;
  --mint: #5CF2A6;
  --lilac: #B9A6FF;
  --sky: #8AA0FF;
  --ink: #0D0B0A;
  --white: #FFFFFF;
  --paper: #FBF8F2;
  --cap: 120px; /* the largest headline */
  --tape: rgba(232, 214, 168, .95);
  --stamp: #FF8A1F;
  --dim: #B3A38F;

  --display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --hand: "Caveat", "Comic Sans MS", cursive;

  --gutter-l: max(20px, 4.4vw, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, 4.4vw, env(safe-area-inset-right, 0px));
  --nav-h: 60px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, p, ol { margin: 0; }
ol { padding: 0; list-style: none; }
a { color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 6px; }

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

.display {
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "opsz" 96;
  /* every headline fills its column: --n is the length of its longest hand-set line */
  font-size: clamp(30px, min(100cqi / (var(--n, 12) * .58), 12svh), var(--cap));
  line-height: .92;
  letter-spacing: -.045em;
  text-wrap: balance;
}
/* lines that only desktop has room for */
@media (max-width: 899px) { .desk-only { display: none; } }
.lede {
  font-size: clamp(17px, 1.46vw, 21px);
  line-height: 1.45;
  max-width: 34ch;
  font-variation-settings: "opsz" 14;
}
.lede-dim { color: #D9CCB8; }
.kick, .label {
  font: 800 12px/1.25 var(--mono);
  letter-spacing: .16em;
}
.kick-yellow { color: var(--yellow); }
.eyebrow { font: 700 12px/1 var(--mono); letter-spacing: .14em; opacity: .7; }
.eyebrow-yellow { color: var(--yellow); opacity: 1; }
.hand { font-family: var(--hand); font-weight: 700; }
.muted { color: #6B5A48; font-weight: 500; }

/* ---------- layout ---------- */

section { position: relative; }
.inner {
  width: 100%;
  max-width: calc(1120px + var(--gutter-l) + var(--gutter-r));
  margin: 0 auto;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
}
.split { display: grid; gap: clamp(28px, 4vw, 72px); align-items: center; }
.copy { display: flex; flex-direction: column; gap: 20px; min-width: 0; container-type: inline-size; }
/* one grid: copy and picture share the width, and the sides alternate section to section */
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split.flip > .copy { order: 2; }
}

/* A scene is one screen tall wherever the screen can hold it; below that it is a normal band and its animation
   plays once, when it is in view, instead of with the scroll. main.js decides once per load, from the smallest the
   screen gets (100svh), and marks the page `pin-a` (the diary and the widget fit) and `pin-b` (the drop and the fits
   fit too). Deciding once matters on a phone: Safari's toolbar changes the height as you scroll, and a live media
   query flipping under a pinned scene resets it. */
.scene { overflow: hidden; padding-block: 72px; }
.pin-a .scene-a, .pin-b .scene-b {
  height: 100vh;
  height: 100svh;
  padding-block: calc(var(--nav-h) + 16px) 24px;
  display: flex;
  align-items: center;
}
/* The browser holds the scene the moment it gets there: one turned sticky by the script a frame late (as Arc's scroll
   runs ahead) scrolled past and snapped back. */
.track { height: calc(100vh * (1 + var(--len))); height: calc(100svh * (1 + var(--len))); }
.track > .scene { position: sticky; top: 0; }
/* the colour is the track's, not the sticky scene's: Safari tints its bar from a sticky element's background and keeps it */
.track.painted > .scene { background: none; }

/* ---------- buttons ---------- */

/* A sticker you press: an ink outline and a hard ink shadow, like the app's stickers; it sinks into its shadow when
   pressed. */
.btn {
  --lift: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 26px;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  box-shadow: var(--lift) var(--lift) 0 var(--ink);
  font: 800 14px/1 var(--mono);
  letter-spacing: .06em;
  color: var(--ink);
  text-decoration: none;
  align-self: flex-start;
  transition: transform .12s ease-out, box-shadow .12s ease-out;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: calc(var(--lift) + 1px) calc(var(--lift) + 1px) 0 var(--ink); }
.btn:active { transform: translate(var(--lift), var(--lift)); box-shadow: 0 0 0 var(--ink); }
.btn-red { background: var(--red); }
.btn-ink { background: var(--yellow); } /* on the red end, the sticker is yellow */

/* ---------- nav ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid rgba(13, 11, 10, .08);
  transform: translateY(-105%);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.nav.on { transform: none; }
@media (hover: none) { .nav { background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.nav-in {
  max-width: 1180px;
  margin: 0 auto;
  height: var(--nav-h);
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-name { font: 800 20px/1 var(--display); letter-spacing: -.03em; }
.nav-get {
  font: 800 12px/1 var(--mono);
  letter-spacing: .06em;
  text-decoration: none;
  padding: 0 16px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  background: var(--red);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .12s ease-out, box-shadow .12s ease-out;
}
.nav-get:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }

/* ---------- photos: the app's disposable look ---------- */

.ph { position: relative; overflow: hidden; background: #E8E2D6; aspect-ratio: 1; }
.ph > svg, .ph > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.ph::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/png;base64,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");
}
.leak::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(circle at 88% 12%, rgba(255, 150, 70, .45), transparent 42%);
}
.stamp {
  position: absolute;
  right: 6%;
  bottom: 6%;
  z-index: 2;
  font: 700 clamp(7px, 1.1vw, 11px)/1 var(--mono);
  color: var(--stamp);
  text-shadow: 0 0 4px rgba(255, 120, 30, .9);
  letter-spacing: .04em;
}
.pol { background: var(--paper); padding: 5% 5% 17%; box-shadow: 0 1px 1px rgba(0, 0, 0, .06), 0 14px 28px -8px rgba(0, 0, 0, .3); }
.devwash { position: absolute; inset: 0; z-index: 3; background: #FFF4DE; opacity: .82; pointer-events: none; transition: opacity 1.8s cubic-bezier(.2, .7, .2, 1); }
.dev.in .devwash { opacity: 0; }
.sticker { position: absolute; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .3)); }
.sticker > svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* ---------- 1. hero ---------- */

.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: 56px;
  overflow: hidden;
  background-color: #FFFBEE; /* a warm notebook page, not screen white */
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(35, 64, 255, .17) 31px 32px);
  background-position: 0 14px;
}
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--gutter-l) - 9px);
  width: 2px;
  background: rgba(255, 74, 28, .5);
}
/* On a phone the journal page shrinks to the room left under the copy (main.js sizes it), so it builds itself on the
   first screen; the hero runs past the bottom of the screen so Safari's bar sits over the paper, not the blue after it. */
@media (max-width: 899px) {
  .hero { padding-block: 32px 20px; align-items: flex-start; min-height: calc(100lvh + 96px); }
  .hero .split { gap: 24px; }
}
.hero-hand { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.05; color: var(--blue); transform: rotate(-2deg); transform-origin: left; }
.hero-stage {
  position: relative;
  container-type: inline-size; /* the page's words scale with the page */
  width: min(100%, 600px, 74svh / 1.05);
  aspect-ratio: 1 / 1.05; /* nearly square: the polaroids are short, their photos filling them */
  justify-self: center;
}
.page {
  position: absolute;
  inset: 4% 2%;
  background: var(--paper);
  border-radius: 6px;
  padding: 7% 7%;
  transform: rotate(-1.5deg);
  box-shadow: 0 2px 2px rgba(0, 0, 0, .05), 0 30px 50px -20px rgba(0, 0, 0, .35);
}
.page-date { display: flex; justify-content: space-between; font: 800 clamp(8px, 3.3cqi, 12px)/1 var(--mono); letter-spacing: .08em; }
.page-note { margin-top: 5%; font: 500 clamp(9px, 4cqi, 15px)/1.5 var(--mono); min-height: 4.5em; }
.page-note u { text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.caret { display: inline-block; width: .5em; height: 1.05em; vertical-align: -.16em; background: var(--red); margin-left: 2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.fly { position: absolute; left: var(--l); top: var(--t); width: 23%; z-index: 3; transform: rotate(var(--r)); }
/* a polaroid's border is 5% of its own width (17% under the photo); padding percentages go by the page, 23% of it */
.fly.pol { padding: 1.15% 1.15% 3.9%; }
.tape {
  position: absolute;
  left: var(--l);
  top: var(--t);
  z-index: 4;
  background: var(--tape);
  font: 800 clamp(8px, 3cqi, 11px)/1 var(--mono);
  padding: 5px 9px;
  letter-spacing: .04em;
  white-space: nowrap;
}
.hero-sticker { width: 18%; aspect-ratio: 1; left: 84%; top: 33%; z-index: 5; transform: rotate(12deg); } /* over the page's edge, clear of the tape */

/* ---------- 2. year ---------- */

.year { background: var(--blue); color: var(--white); }
.count-row { display: flex; align-items: baseline; gap: 14px; }
.count-label { font: 700 13px/1 var(--mono); letter-spacing: .06em; }
.count {
  font: 800 clamp(64px, min(12vw, 15svh), 180px)/.8 var(--display);
  letter-spacing: -.06em;
  color: var(--yellow);
  font-variant-numeric: tabular-nums;
}
.book {
  position: relative;
  width: min(100%, 540px, 34svh * 1.5);
  aspect-ratio: 1.5;
  perspective: 1800px;
  justify-self: center;
}
@media (min-width: 900px) { .book { width: min(100%, 700px, 64svh * 1.5); } }
.spread { position: absolute; inset: 0; display: flex; border-radius: 8px; box-shadow: 0 30px 50px -16px rgba(0, 0, 40, .55); }
.lp, .rp, .leaf > div {
  background-color: var(--paper);
  background-image: repeating-linear-gradient(to bottom, transparent 0 19px, rgba(35, 64, 255, .14) 19px 20px);
  color: var(--ink);
}
.lp, .rp { flex: 1; padding: 6%; display: flex; flex-direction: column; gap: 6%; }
.lp { border-radius: 8px 0 0 8px; align-items: center; justify-content: center; text-align: center; gap: 2%; }
.rp { border-radius: 0 8px 8px 0; }
.book-you { font-size: clamp(34px, 5vw, 56px); line-height: 1; }
.leaf { position: absolute; left: 50%; top: 0; width: 50%; height: 100%; transform-origin: left center; transform-style: preserve-3d; will-change: transform; }
.leaf > div {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  padding: 6%;
  display: flex;
  flex-direction: column;
  gap: 6%;
  border-radius: 0 8px 8px 0;
  box-shadow: inset 10px 0 16px -12px rgba(0, 0, 0, .4);
}
.leaf > .back { transform: rotateY(180deg); border-radius: 8px 0 0 8px; box-shadow: inset -10px 0 16px -12px rgba(0, 0, 0, .4); }
.leaf-d { font: 800 clamp(8px, 1vw, 11px)/1 var(--mono); letter-spacing: .08em; }
.leaf-pp { display: grid; grid-template-columns: 1fr 1fr; gap: 6%; }
.leaf-w { font: 700 clamp(13px, 1.7vw, 19px)/1 var(--hand); }

/* ---------- 3. memories ---------- */

.mem { background: var(--yellow); padding-block: clamp(80px, 11vw, 140px); }
.mem-grid { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mem-grid .label { margin-top: 10px; }
.people { display: flex; justify-content: space-between; gap: 6px; }
.who { display: flex; flex-direction: column; align-items: center; gap: 8px; font: 800 11px/1 var(--mono); }
.av { width: clamp(52px, 11vw, 80px); border-radius: 50%; border: 3px solid var(--white); box-shadow: 0 6px 14px -4px rgba(0, 0, 0, .3); }
.av-wrap { position: relative; }
.ring { position: absolute; left: -16%; top: -16%; width: 132%; height: 132%; overflow: visible; pointer-events: none; }
.ring ellipse { fill: none; stroke: var(--red); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.places { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 2vw, 18px); }
.place { padding: 5% 5% 4%; transform: rotate(var(--r)); }
.place span { display: block; padding-top: 4px; font: 700 clamp(17px, 2.2vw, 22px)/1 var(--hand); }
.things { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px, 1.4vw, 12px); }
.tile { position: relative; aspect-ratio: 1; border-radius: 14px; padding: 10px; font: 800 12px/1.3 var(--mono); overflow: hidden; }
.tile .ph { position: absolute; right: 8%; bottom: -12%; width: 56%; border: 3px solid var(--paper); transform: rotate(8deg); }
.t-red { background: var(--red); }
.t-lilac { background: var(--lilac); }
.t-ink { background: var(--ink); color: var(--white); }
.t-mint { background: var(--mint); }

/* the dashed thread from leo to tonight's drop, in two halves that meet at the seam */
.thread { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; overflow: visible; }
.thread-path { fill: none; stroke: var(--red); stroke-width: 3.5; stroke-linecap: round; }

/* ---------- 4. drops ---------- */

.drops { background: var(--ink); color: #F3EAD8; }
.steps { display: flex; flex-direction: column; gap: clamp(18px, 3.4svh, 34px); min-width: 0; }
.step { display: flex; align-items: center; }
.num { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--yellow); color: var(--ink); display: grid; place-items: center; font: 800 14px/1 var(--mono); }
.step-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.step-say { display: block; font: 700 24px/1 var(--hand); color: var(--yellow); }
.notif {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 13px 14px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font: 500 14px/1.3 var(--display);
  max-width: 360px;
}
.notif i { width: 38px; height: 38px; flex: none; border-radius: 9px; background: var(--red); }
.notif small { display: block; font: 800 10px/1 var(--mono); letter-spacing: .08em; color: var(--dim); margin-bottom: 5px; }
.env-row, .day-row { flex-direction: row; align-items: center; gap: 18px; }
/* the photo rises about a third of the envelope's width out of it: leave that room above */
.env-row { --envw: clamp(150px, min(30vw, 22svh), 230px); margin-top: calc(var(--envw) * .36); }
.sealed .env-row { margin-top: 8px; }
.env { position: relative; width: var(--envw); aspect-ratio: 1.55; flex: none; perspective: 900px; }
.env-back { position: absolute; inset: 0; background: #E2A800; border-radius: 6px; }
.env-photo { position: absolute; left: 24%; width: 52%; bottom: 12%; z-index: 1; }
.env-front { position: absolute; inset: 0; z-index: 2; background: var(--yellow); border-radius: 6px; clip-path: polygon(0 30%, 50% 64%, 100% 30%, 100% 100%, 0 100%); }
.env-flap { position: absolute; left: 0; right: 0; top: 0; height: 64%; z-index: 3; background: #F5C400; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top center; }
.env-seal { position: absolute; left: 50%; top: 52%; width: 42px; height: 42px; margin: -21px 0 0 -21px; z-index: 4; border-radius: 50%; background: #B3261E; color: #FFF4E4; display: grid; place-items: center; font: 800 18px/1 var(--display); }
.env-time { display: block; margin-top: 6px; font: 800 11px/1.3 var(--mono); letter-spacing: .1em; color: var(--dim); font-variant-numeric: tabular-nums; }
.day-pol { position: relative; width: clamp(96px, min(18vw, 15svh), 150px); flex: none; transform: rotate(-3deg); }
.wash { position: absolute; inset: 5% 5% 17%; background: #FFF6E2; opacity: .88; pointer-events: none; z-index: 3; }
.day-line { display: block; margin-top: 6px; font: 500 13px/1.45 var(--mono); color: var(--dim); }
.short .drops .lede { display: none; }
@media (min-width: 900px) {
  .env-row { --envw: clamp(180px, min(20vw, 26svh), 300px); }
  .notif { max-width: 440px; font-size: 16px; padding: 16px 18px; }
  .step-say { font-size: 30px; }
  .day-pol { width: clamp(120px, min(13vw, 19svh), 190px); }
  .day-line { font-size: 14px; }
}

/* ---------- 5. widget ---------- */

.widget { background: var(--white); }
.widget-h { line-height: .96; font-size: clamp(20px, min(100cqi / (var(--n) * .58), 12svh), var(--cap)); }
.rot { display: inline-grid; vertical-align: top; perspective: 600px; }
.rot > span { grid-area: 1 / 1; white-space: nowrap; color: var(--red); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.phone-wrap { display: flex; justify-content: center; perspective: 1400px; }
.phone {
  --ph: min(52svh, 600px);
  position: relative;
  height: var(--ph);
  aspect-ratio: 9 / 19;
  border-radius: calc(var(--ph) * .085);
  border: calc(var(--ph) * .012) solid #111;
  box-shadow: 0 0 0 2px #8A8A8E, 0 2px 4px rgba(0, 0, 0, .2), 0 60px 90px -40px rgba(0, 0, 0, .55);
  background: var(--blue);
  overflow: hidden;
  padding: calc(var(--ph) * .03) calc(var(--ph) * .03);
  transform: rotateY(-6deg) rotateX(3deg);
  font-size: calc(var(--ph) / 50);
}
@media (min-width: 900px) { .phone { --ph: min(76svh, 640px); } }
.wall { position: absolute; border-radius: 50%; }
.w1 { right: -30%; top: -10%; width: 90%; aspect-ratio: 1; background: #3A55FF; }
.w2 { left: -40%; bottom: 10%; width: 90%; aspect-ratio: 1; background: #1A30CC; }
.island { position: absolute; left: 50%; top: 2.2%; width: 30%; height: 4.2%; transform: translateX(-50%); background: #000; border-radius: 999px; z-index: 3; }
.status { position: relative; display: flex; justify-content: space-between; align-items: center; color: #fff; font: 800 1.2em/1 var(--mono); padding: .5em 1.2em 0; }
.status-r { display: flex; align-items: flex-end; gap: 2px; }
.status-r i { width: 3px; background: #fff; border-radius: 1px; }
.status-r i:nth-child(1) { height: 4px; } .status-r i:nth-child(2) { height: 6px; } .status-r i:nth-child(3) { height: 8px; } .status-r i:nth-child(4) { height: 10px; }
.status-r b { margin-left: 5px; width: 20px; height: 10px; border: 1.5px solid rgba(255, 255, 255, .85); border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--blue), inset 0 0 0 10px #fff; }
.icons { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6em; margin-top: 2.4em; }
.icons i, .dock i { aspect-ratio: 1; border-radius: 24%; }
.wslot { position: relative; margin: 2em 0 .6em; aspect-ratio: 1 / .92; perspective: 900px; }
.wface { position: absolute; inset: 0; border-radius: 2.3em; background: var(--paper); overflow: hidden; box-shadow: 0 1.2em 2.4em rgba(0, 0, 30, .35); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.wface .ph { position: absolute; left: 5%; right: 5%; top: 5%; bottom: 20%; aspect-ratio: auto; border-radius: 1.2em; }
.wmeta { position: absolute; left: 7%; right: 7%; bottom: 5.5%; display: flex; justify-content: space-between; align-items: baseline; font: 700 1.6em/1 var(--display); letter-spacing: -.01em; }
.wmeta span { font-weight: 500; font-size: .7em; color: #6B5A48; }
.wname { position: relative; text-align: center; color: #fff; font: 500 1em/1 var(--display); }
.dock { position: absolute; left: 4%; right: 4%; bottom: 3%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6em; padding: 1.2em; border-radius: 2.8em; background: rgba(255, 255, 255, .22); }
.icons i, .dock i { background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }

/* ---------- 6. fits ---------- */

.fits { background: var(--pink); }
.fits-inner { gap: clamp(18px, 3.5svh, 44px); }
.fits-copy { gap: 12px; }
.fitstage { position: relative; display: grid; gap: 14px; justify-items: center; }
.froll-wrap { width: min(100%, 28svh * 1.3, 460px); }
.froll-say { display: block; font-size: 24px; line-height: 1; margin-bottom: 6px; }
.froll { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; background: var(--ink); padding: 5px; border-radius: 14px; }
.froll .ph { border-radius: 2px; }
.cell { border-radius: 2px; outline: 1.5px dashed rgba(255, 255, 255, .28); outline-offset: -5px; }
.ffit { z-index: 3; }
.ffit::before { content: ""; position: absolute; inset: 0; z-index: 4; border: 3px solid var(--red); opacity: 0; transition: opacity .3s; }
.ffit.mark::before { opacity: 1; }
.arrow { width: 28px; height: 28px; transform: rotate(90deg); fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.fbox { width: min(100%, 24svh * 1.5, 440px); background: var(--lilac); border-radius: 20px; padding: 14px; }
.fbox-h { display: flex; align-items: baseline; justify-content: space-between; }
.fbox-h b { font: 800 22px/1 var(--display); letter-spacing: -.02em; }
.fbox-h small { font: 700 13px/1 var(--mono); font-variant-numeric: tabular-nums; }
.slots { margin-top: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.slot { aspect-ratio: 1; border: 2px dashed rgba(13, 11, 10, .3); border-radius: 6px; }
@media (min-width: 900px) {
  /* the roll and the box sit side by side, so this picture gets the wider column */
  .fits .split.flip { grid-template-columns: 3fr 2fr; }
  .fitstage { grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
  .froll-wrap { width: min(100%, 46svh * 1.33); }
  .fbox { width: min(100%, 38svh * 1.5); }
  .arrow { transform: none; }
}

/* ---------- 7. close ---------- */

/* The end is a whole screen of red, and while it's on screen the page's own background is red too: Safari paints the
   space past the bottom of the page (and the bar over it) in that colour, and keeps it after you scroll back up. */
.close { position: relative; background: var(--red); text-align: center; overflow: hidden; padding-block: clamp(96px, 14vw, 170px) calc(32px + env(safe-area-inset-bottom, 0px)); min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
html.at-end, html.at-end body { background: var(--red); }
.close-inner { margin-block: auto; display: flex; flex-direction: column; align-items: center; gap: 28px; container-type: inline-size; }
.close-h { max-width: none; }
.close .btn { align-self: center; }
/* the end is a sticker bomb, like the app's paywall: cut-outs and photo stickers round the edges, the middle clear */
.bomb { position: absolute; inset: 0 0 190px; pointer-events: none; } /* the footer keeps its own band below */
.bomb .sticker { width: calc(min(100vw, 100svh) * var(--w) * var(--s, 1)); max-width: 190px; aspect-ratio: 1; }
.pstick { background: #fff; padding: calc(min(100vw, 100svh) * var(--w) * var(--s, 1) * .07); } /* the border goes by the sticker, not the section */
.pstick .ph { width: 100%; height: 100%; }
@media (min-width: 900px) { .bomb .sticker { --s: .55; } } /* a wide screen's headline runs wide: smaller stickers keep to the edges */
.pstick-round, .pstick-round .ph { border-radius: 50%; }
.pstick-square, .pstick-square .ph { border-radius: 14%; }
.close-inner, .foot { position: relative; z-index: 2; }
.close-s1 { width: clamp(80px, 11vw, 140px); aspect-ratio: 1; left: 8%; top: 40px; transform: rotate(-12deg); }
.close-s2 { width: clamp(90px, 12vw, 150px); aspect-ratio: 1; right: 7%; top: 70px; transform: rotate(14deg); }
.foot { padding-top: clamp(72px, 10vw, 120px); display: flex; flex-direction: column; align-items: center; gap: 28px; font: 500 13px/1 var(--mono); }
.prodmark { height: clamp(52px, 7vw, 80px); width: auto; } /* the studio's mark, as on its other apps' sites */
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .caret { animation: none; }
  .nav, .btn, .devwash { transition: none; }
}

/* A big monitor: everything grows with it rather than sitting in a 1120 px column with white all round. */
@media (min-width: 1600px) and (min-height: 820px) {
  :root { --cap: 172px; }
  .inner { max-width: calc(1560px + var(--gutter-l) + var(--gutter-r)); }
  .split { gap: 96px; }
  .copy { gap: 28px; }
  .lede { font-size: 26px; }
  .hero-hand { font-size: 52px; }
  .btn { --lift: 7px; min-height: 70px; padding: 0 36px; font-size: 17px; border-width: 3px; border-radius: 18px; }
  .hero-stage { width: min(100%, 860px, 74svh / 1.05); }
  .book { width: min(100%, 980px, 64svh * 1.5); }
  .phone { --ph: min(76svh, 860px); }
  .bomb .sticker { --s: .7; max-width: 240px; }
  .nav-in { max-width: 1640px; }
  .page-date { font-size: 2.2cqi; } .page-note { font-size: 2.6cqi; } .tape { font-size: 1.9cqi; }
}