/* Hello, sunshine — the Hum theme from Hallmark (usehallmark.com), toned for a grown-up birthday.
   Cut paper made by hand: cream paper with grain, sheets torn along their edges, card-stock buttons
   that press down, Chillax throughout in blue-black ink. Pear is the action, blue the links, coral
   one loud moment. Light comes from the top left, so shadows fall down and right. */

:root {
  --bg: oklch(97% 0.012 95);          /* the paper */
  --surface: oklch(94.5% 0.018 95);   /* paper, a shade deeper */
  --surface-2: oklch(91% 0.022 95);
  --ink: oklch(20% 0.014 255);
  --ink-2: oklch(29% 0.014 255);
  --muted: oklch(47% 0.014 255);
  --rule: oklch(87% 0.016 95);
  --paper: oklch(98.8% 0.007 95);     /* card */
  --paper-ink: var(--ink);
  --edge: oklch(83% 0.04 88);         /* the solid edge under card stock */
  --accent: oklch(87% 0.175 96);      /* pear */
  --accent-deep: oklch(72% 0.16 92);
  --accent-ink: var(--ink);
  --blue: oklch(50% 0.17 250);
  --coral: oklch(70% 0.2 22);
  --coral-deep: oklch(52% 0.17 25);
  --kraft: oklch(63% 0.085 62);
  --sand: oklch(77% 0.1 76);
  --sugar: oklch(89% 0.035 236);      /* blue sugar paper */
  --shade: oklch(20% 0.014 255 / 0.06);

  --font-display: "Chillax", ui-rounded, ui-sans-serif, system-ui, sans-serif;
  --font-text: var(--font-display);

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-sub: clamp(1.625rem, 1.2rem + 1.2vw, 2.25rem);
  --step-head: clamp(2.25rem, 1.3rem + 3.6vw, 4.75rem);
  --step-display: clamp(3.25rem, 1.2rem + 5.6vw, 7.25rem);

  --margin: clamp(1.25rem, 2.2vw, 2rem);
  --gutter: clamp(1rem, 2vw, 2rem);
  --section: clamp(7.5rem, 13vw, 13rem);
  --pill: 999px;
  --stock: 16px;   /* card-stock controls */
  --round: 14px;   /* fields and list rows */
  --card: 24px;    /* cards and sheets: no square corner anywhere */
  --bar: 72px;

  --shadow-card: 0 1px 2px oklch(20% 0.014 255 / 0.06), 0 12px 28px -14px oklch(20% 0.014 255 / 0.22);
  --shadow-sheet: 0 0 0 0.6px oklch(20% 0.014 255 / 0.18), 1.5px 2.5px 1.5px oklch(20% 0.014 255 / 0.08), 6px 14px 16px -4px oklch(20% 0.014 255 / 0.16);

  /* the paper itself is generated, never a picture: a fine grain and long pale fibres */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .26 0 0 0 0 .18 .9 0 0 0 -.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='turbulence' baseFrequency='.004 .07' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 .97 .3 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");

  /* torn edges (seeded, tiling every 640px): the bottom, the top, and the left of a sheet */
  --tear-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 18' preserveAspectRatio='none'%3E%3Cpath d='M0 0H640V5L640 5L632 7L624 4L616 5L608 7L600 7L592 11L584 9L576 13L568 13L560 11L552 11L544 11L536 11L528 9L520 11L512 9L504 11L496 9L488 8L480 8L472 9L464 9L456 10L448 8L440 11L432 8L424 10L416 10L408 9L400 9L392 9L384 9L376 10L368 9L360 11L352 13L344 12L336 11L328 11L320 10L312 13L304 10L296 10L288 10L280 9L272 8L264 6L256 9L248 8L240 7L232 9L224 6L216 7L208 6L200 6L192 7L184 9L176 7L168 7L160 9L152 9L144 9L136 9L128 10L120 12L112 11L104 11L96 14L88 15L80 13L72 14L64 11L56 12L48 11L40 9L32 7L24 8L16 6L8 6L0 5Z'/%3E%3C/svg%3E");
  --tear-t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 18' preserveAspectRatio='none'%3E%3Cpath d='M0 18H640V13L640 13L632 11L624 14L616 13L608 11L600 11L592 7L584 9L576 5L568 5L560 7L552 7L544 7L536 7L528 9L520 7L512 9L504 7L496 9L488 10L480 10L472 9L464 9L456 8L448 10L440 7L432 10L424 8L416 8L408 9L400 9L392 9L384 9L376 8L368 9L360 7L352 5L344 6L336 7L328 7L320 8L312 5L304 8L296 8L288 8L280 9L272 10L264 12L256 9L248 10L240 11L232 9L224 12L216 11L208 12L200 12L192 11L184 9L176 11L168 11L160 9L152 9L144 9L136 9L128 8L120 6L112 7L104 7L96 4L88 3L80 5L72 4L64 7L56 6L48 7L40 9L32 11L24 10L16 12L8 12L0 13Z'/%3E%3C/svg%3E");
  --tear-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 640' preserveAspectRatio='none'%3E%3Cpath d='M18 0V640H13L13 640L11 632L14 624L13 616L11 608L11 600L7 592L9 584L5 576L5 568L7 560L7 552L7 544L7 536L9 528L7 520L9 512L7 504L9 496L10 488L10 480L9 472L9 464L8 456L10 448L7 440L10 432L8 424L8 416L9 408L9 400L9 392L9 384L8 376L9 368L7 360L5 352L6 344L7 336L7 328L8 320L5 312L8 304L8 296L8 288L9 280L10 272L12 264L9 256L10 248L11 240L9 232L12 224L11 216L12 208L12 200L11 192L9 184L11 176L11 168L9 160L9 152L9 144L9 136L8 128L6 120L7 112L7 104L4 96L3 88L5 80L4 72L7 64L6 56L7 48L9 40L11 32L10 24L12 16L12 8L13 0Z'/%3E%3C/svg%3E");
  --torn-bottom: linear-gradient(#000 0 0) top / 100% calc(100% - 17px) no-repeat, var(--tear-b) bottom / 640px 18px repeat-x;
  --torn-both: var(--tear-t) top / 640px 18px repeat-x, linear-gradient(#000 0 0) center / 100% calc(100% - 34px) no-repeat, var(--tear-b) bottom / 640px 18px repeat-x;
  --torn-left: var(--tear-l) left / 18px 640px repeat-y, linear-gradient(#000 0 0) right / calc(100% - 17px) 100% no-repeat;
  /* a ticket: round punches out of both sides */
  --punched: radial-gradient(circle 20px at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 20px at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1); /* Hum's spring, on the primary button only */
  --t-press: 100ms; /* feedback lands on the press itself */
  --t-hover: 180ms;
  --t-ui: 240ms;
  --spring: linear(0, 0.136, 0.367, 0.573, 0.726, 0.83, 0.897, 0.938, 0.964, 0.979, 0.988, 0.993, 0.996, 0.998, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--fibre), var(--grain), var(--bg); color: var(--ink); font-family: var(--font-text); font-size: var(--step-body); font-weight: 500; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, figure, ul, ol, dl, dd, fieldset { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; background: var(--surface); }
svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
/* no 300ms wait for a double-tap that never comes; the :active states are the highlight */
a, button, label, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
strong, b { font-weight: 600; }
:target { scroll-margin-top: 2rem; }
::selection { background: oklch(87% 0.175 96 / 0.7); color: var(--ink); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em; text-wrap: balance; }
.display { font-size: var(--step-display); line-height: 1.02; }
.head { font-size: var(--step-head); line-height: 1.04; }
.small { font-size: var(--step-small); line-height: 1.45; }
.muted { color: var(--muted); }
p { max-width: 62ch; text-wrap: pretty; }

.wrap { padding-inline: var(--margin); }

/* ---------- controls: card stock with a solid edge underneath; pressing pushes it flat ---------- */
.button { --lift: 5px; display: inline-flex; align-items: center; justify-content: center; min-height: 3.375rem; padding: 0 1.6rem; margin-bottom: 5px; background: var(--grain), var(--accent); color: var(--accent-ink); border-radius: var(--stock); text-decoration: none; font-weight: 600; white-space: nowrap; box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.45), 0 var(--lift) 0 0 var(--accent-deep), 2px calc(var(--lift) + 4px) 10px -3px oklch(20% 0.014 255 / 0.3); transition: translate var(--t-press) var(--ease-pop), box-shadow var(--t-press) var(--ease-pop); }
.chip { --lift: 4px; min-height: 2.75rem; padding: 0 1rem; margin-bottom: 4px; background: var(--grain), var(--paper); border-radius: var(--stock); font-weight: 600; box-shadow: inset 0 0 0 1px var(--rule), 0 var(--lift) 0 0 var(--edge); transition: translate var(--t-press) var(--ease-out), box-shadow var(--t-press) var(--ease-out); }
.link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; transition: text-decoration-color var(--t-hover) ease; }
.link-plain { color: var(--blue); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; transition: color var(--t-hover) ease; }
.text-button { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; font-size: var(--step-small); transition: opacity var(--t-hover) ease; }
.text-button:active { translate: 0 1px; }
.field { width: 100%; min-height: 3.25rem; padding: 0.6rem 0.9rem; background: var(--paper); border: 1px solid var(--muted); border-radius: var(--round); font-size: max(1rem, var(--step-body)); }
@media (hover: hover) and (pointer: fine) {
  .link:hover { text-decoration-color: currentColor; }
  .button:hover { --lift: 7px; translate: 0 -2px; }
  .chip:hover { --lift: 6px; translate: 0 -2px; }
  .text-button:hover { opacity: 0.7; }
  .link-plain:hover { color: var(--ink); }
}
.button:active { --lift: 1px; translate: 0 4px; }
.chip:active { --lift: 1px; translate: 0 3px; }

/* ---------- the strip: a torn band of pear across the top of a card ---------- */
.stripe { flex: none; width: 100%; height: 34px; background: var(--grain), var(--accent); -webkit-mask: var(--torn-bottom); mask: var(--torn-bottom); }
.stripe i { display: none; }
.stripe-thin { height: 22px; background: var(--grain), var(--kraft); }

/* ---------- pages: a torn paper band on top, a card-stock tray at the thumb on phones ---------- */
.tabbar { position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; height: var(--bar); padding-inline: var(--margin); }
/* the band and, a little lower, its shadow, both torn along the bottom */
.tabbar::before, .tabbar::after { content: ""; position: absolute; inset: 0 0 -16px; pointer-events: none; -webkit-mask: var(--torn-bottom); mask: var(--torn-bottom); }
.tabbar::before { z-index: -1; background: var(--fibre), var(--grain), var(--bg); }
.tabbar::after { z-index: -2; translate: 0 2px; background: oklch(20% 0.014 255 / 0.14); }
.tabbar-home .tab-brand { display: none; }
@media (max-width: 56em) { .tab-brand { visibility: hidden; } } /* on tablets it would run into the centred tabs */
.tab-brand { grid-column: 1; justify-self: start; font-family: var(--font-display); font-weight: 600; font-size: var(--step-lead); letter-spacing: -0.03em; line-height: 1; text-decoration: none; white-space: nowrap; }
.tabbar ul { grid-column: 2; display: flex; gap: 4px; list-style: none; margin: 0; padding: 5px; border-radius: 19px; background: var(--surface-2); box-shadow: inset 0 1px 2px oklch(20% 0.014 255 / 0.14); }
.tabbar ul a { display: flex; align-items: center; justify-content: center; min-height: 2.5rem; min-width: 4.5rem; padding: 0 1.1rem; border-radius: 14px; font-weight: 600; text-decoration: none; color: var(--ink-2); transition: color var(--t-hover) ease, background-color var(--t-hover) ease, translate var(--t-press) ease-out; }
.tabbar ul a:active { translate: 0 1px; }
/* the current page is the chosen pill: ink with paper type; between pages it glides to the new tab */
.tabbar ul a[aria-current="page"] { background: var(--ink); color: var(--paper); box-shadow: 0 3px 0 0 oklch(10% 0.01 255); view-transition-name: tab-current; }
@media (hover: hover) and (pointer: fine) { .tabbar ul a:not([aria-current="page"]):hover { color: var(--ink); background: var(--shade); } }
@media (prefers-contrast: more) { .tabbar ul { box-shadow: inset 0 0 0 1px var(--ink); } }
.gallery.page-first, .cat.page-first { padding-top: clamp(2.5rem, 6vw, 5rem); }
.journal.page-first { margin-top: 0; }
.footer-small { padding-bottom: 32px; }
.footer-small .stripe-thin { margin-bottom: 24px; }
.footer-small .imprint { color: var(--muted); }
@media (max-width: 47.99em) {
  :root { --bar: 0px; }
  body:not(.is-locked), .is-returning body { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .tabbar { position: fixed; top: auto; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: block; height: auto; padding: 0; }
  .tabbar::before, .tabbar::after { display: none; }
  .tab-brand { display: none; }
  .tabbar ul { width: 100%; gap: 0; padding: 6px; border-radius: 22px; background: var(--grain), var(--paper); box-shadow: inset 0 0 0 1px var(--rule), 0 1px 2px oklch(20% 0.014 255 / 0.08), 0 14px 30px -10px oklch(20% 0.014 255 / 0.35); }
  .tabbar li { flex: 1; }
  .tabbar ul a { min-height: 52px; min-width: 0; padding: 0; font-size: 1rem; border-radius: 16px; }
  .hero { padding-top: 12px; }
}

/* ---------- sign-in gate: the same card, on its own ---------- */
.gate { display: none; }
:root:not(.is-returning) .is-locked > :is(header, main, footer, nav) { display: none; }
:root:not(.is-returning) .is-locked .gate { display: grid; place-items: center; min-height: 100svh; padding: 12px; }
.gate-card { width: min(100%, 36rem); overflow: hidden; border-radius: var(--card); background: var(--grain), var(--paper); color: var(--paper-ink); text-align: center; box-shadow: var(--shadow-card); }
.gate-body { display: flex; flex-direction: column; align-items: center; padding: 48px clamp(1.25rem, 5vw, 3.5rem) 56px; }
.gate h2 { max-width: 9ch; }
.gate-line { max-width: 30ch; margin-top: 28px; font-size: var(--step-lead); line-height: 1.35; }
.gate .button { margin-top: 32px; }
.imprint [data-signout] { margin-right: 12px; }

/* ---------- hero: the card beside the photograph, torn along its inner edge ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 24px 16px 16px; min-height: calc(100svh - var(--bar)); }
.hero-card { display: flex; flex-direction: column; align-items: center; overflow: hidden; border-radius: var(--card); background: var(--grain), var(--paper); color: var(--paper-ink); text-align: center; min-height: calc(100svh - var(--bar) - 40px); box-shadow: var(--shadow-card); }
.hero-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 48px clamp(1.25rem, 4vw, 3.5rem); }
.wordmark { font-family: var(--font-display); font-weight: 600; font-size: var(--step-lead); line-height: 1; letter-spacing: -0.02em; margin-bottom: 24px; color: var(--muted); }
.hero h1 { max-width: 9ch; }
.hero-line { max-width: 30ch; margin-top: 32px; font-size: var(--step-lead); line-height: 1.35; }
.hero .button { margin-top: 32px; }
.contents { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; width: 100%; background: var(--grain), var(--ink); color: var(--paper); text-align: left; }
.contents a { display: flex; flex-direction: column; gap: 6px; min-height: 7.5rem; padding: 20px clamp(1rem, 2vw, 1.75rem) 24px; text-decoration: none; transition: background-color var(--t-hover) ease; }
.contents a + a { border-left: 2px dashed oklch(98.8% 0.007 95 / 0.25); }
.contents a:active { background-color: var(--ink-2); }
.contents strong { font-family: var(--font-display); font-weight: 600; font-size: var(--step-sub); line-height: 1; letter-spacing: -0.03em; }
.contents span { font-size: var(--step-small); line-height: 1.4; color: oklch(86% 0.012 95); }
@media (hover: hover) and (pointer: fine) { .contents a:hover { background-color: var(--ink-2); } }
.hero-photo { position: relative; overflow: hidden; background: var(--surface); min-height: 48svh; border-radius: 0 var(--card) var(--card) 0; -webkit-mask: var(--torn-left); mask: var(--torn-left); }
.hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1600ms ease; }
.hero-photo img.is-on { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hero-photo img { animation: drift 24s var(--ease-soft) infinite alternate; }
  /* like an instant print: milky and pale, then the colour comes up */
  .hero-photo img.is-on { animation: develop 1.8s cubic-bezier(0.33, 0, 0.2, 1) both, drift 24s var(--ease-soft) infinite alternate; }
  .hero-photo::after { content: ""; position: absolute; inset: 0; background: #ece6da; opacity: 0; pointer-events: none; }
  .hero-photo.is-developing::after { animation: haze 1.5s cubic-bezier(0.33, 0, 0.2, 1) both; }
}
@keyframes develop {
  0% { filter: sepia(0.5) saturate(0.1) brightness(1.55) contrast(0.55); }
  45% { filter: sepia(0.35) saturate(0.45) brightness(1.2) contrast(0.8); }
  100% { filter: none; }
}
@keyframes haze { from { opacity: 0.92; } to { opacity: 0; } }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.08) translate(-1%, -1%); } }

@media (max-width: 47.99em) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 12px 12px 16px; }
  .hero-photo { order: -1; height: 42svh; min-height: 0; border-radius: var(--card) var(--card) 0 0; -webkit-mask: var(--torn-bottom); mask: var(--torn-bottom); }
  .hero-card { min-height: 0; margin-top: -36px; position: relative; margin-inline: 12px; }
  .contents { grid-template-columns: 1fr; }
  .contents a { min-height: 0; padding: 18px 20px; }
  .contents a + a { border-left: 0; border-top: 2px dashed oklch(98.8% 0.007 95 / 0.25); }
  .stripe { height: 28px; }
  .stripe-thin { height: 20px; }
  .hero-body { padding: 36px 20px 32px; }
  .wordmark { margin-bottom: 18px; }
  .hero-line { margin-top: 24px; }
}

/* ---------- gallery: polaroids ---------- */
.gallery { padding-top: var(--section); }
.gallery-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; margin-bottom: 56px; }
.gallery-head :is(h1, h2) { grid-column: 1 / 8; }
.gallery-note { grid-column: 9 / 13; }
.polaroids { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 28px; }
.polaroid { --tilt: 0deg; padding: 12px 12px 0; border-radius: 6px; background: var(--grain), var(--pc-bg); color: var(--pc-ink); box-shadow: var(--shadow-sheet); transform: rotate(var(--tilt)); transition: transform 420ms var(--ease-out); }
.polaroid:nth-child(4n+1) { --tilt: -2deg; }
.polaroid:nth-child(4n+2) { --tilt: 1.5deg; }
.polaroid:nth-child(4n+3) { --tilt: -1deg; }
.polaroid:nth-child(4n+4) { --tilt: 2.2deg; }
.polaroid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; }
.polaroid figcaption { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 96px; padding: 12px 2px 14px; }
.pc-caption { font-family: var(--font-display); font-weight: 600; font-size: var(--step-lead); line-height: 1.05; letter-spacing: -0.02em; }
.pc-meta { display: flex; justify-content: space-between; gap: 12px; font-size: var(--step-small); font-variant-numeric: tabular-nums; }
.pc-a { --pc-bg: var(--paper); --pc-ink: var(--ink); }
.pc-b { --pc-bg: var(--accent); --pc-ink: var(--ink); }
.pc-c { --pc-bg: var(--sugar); --pc-ink: var(--ink); }
.pc-d { --pc-bg: var(--sand); --pc-ink: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .polaroid:hover { transform: rotate(0deg) translateY(-8px) scale(1.03); }
}
@media (max-width: 47.99em) {
  .gallery-head { display: block; margin-bottom: 36px; }
  .gallery-note { margin-top: 16px; }
  .polaroids { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .polaroid { padding: 8px 8px 0; }
  .polaroid figcaption { min-height: 72px; padding: 8px 0 10px; }
  .pc-place { display: none; }
}

/* ---------- our story: a desk calendar from the first year, special days filled in ---------- */
.calendar { padding-top: var(--section); }
.calendar-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; margin-bottom: 56px; }
.calendar-head h2 { grid-column: 1 / 8; }
.calendar-note { grid-column: 9 / 13; color: var(--muted); }
/* the year tabs sit on top of the sheet like a calendar's index tabs */
.cal-years { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.cal-years::-webkit-scrollbar { display: none; }
.cal-year { flex: 1 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 8rem; padding: 14px 18px 12px; border-radius: 16px 16px 0 0; background: var(--surface-2); color: var(--ink); text-align: left; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.cal-year strong { font-family: var(--font-display); font-weight: 600; font-size: var(--step-sub); line-height: 1; letter-spacing: -0.03em; }
.cal-year span { font-size: var(--step-small); color: var(--muted); }
.cal-year[aria-selected="true"] { background: var(--grain), var(--paper); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .cal-year:not([aria-selected="true"]):hover { background: var(--edge); } }
.cal-sheet { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); padding: clamp(1.25rem, 3vw, 2.5rem); border-radius: 0 0 var(--card) var(--card); background: var(--grain), var(--paper); color: var(--paper-ink); box-shadow: var(--shadow-card); }
.cal-months { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px clamp(1rem, 2vw, 2rem); }
.cal-month { opacity: 0.5; transition: opacity 300ms ease; }
.cal-month.has-days { opacity: 1; }
.cal-month-name { font-family: var(--font-display); font-weight: 600; font-size: var(--step-lead); letter-spacing: -0.02em; line-height: 1; margin-bottom: 10px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 2px; text-align: center; font-size: var(--step-small); font-variant-numeric: tabular-nums; }
.cal-wd { color: var(--muted); font-weight: 600; padding-bottom: 4px; }
.cal-day { display: grid; place-items: center; aspect-ratio: 1; line-height: 1; }
.cal-day.is-today { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cal-day.is-marked { position: relative; z-index: 1; border-radius: 50%; background: var(--ink); color: var(--paper); font-weight: 600; transform: scale(1.15); transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), background-color 200ms ease, color 200ms ease; }
.cal-day.is-marked:active { transform: scale(1.05); }
@media (hover: hover) and (pointer: fine) { .cal-day.is-marked:hover { transform: scale(1.4); background: var(--coral); color: var(--ink); } }
.cal-days-title { font-size: var(--step-lead); line-height: 1.1; }
.cal-list { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; list-style: none; padding: 0; }
.cal-list button { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 12px 14px; border-radius: var(--round); text-align: left; background: var(--shade); transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.cal-list button:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .cal-list button:hover { background: oklch(20% 0.014 255 / 0.12); } }
.cal-list strong { font-weight: 600; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .cal.is-turning .cal-month { animation: page-in 600ms cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(var(--m) * 30ms); }
  .cal.is-turning .cal-day.is-marked { animation: mark-in 500ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(300ms + var(--k) * 80ms); }
}
@keyframes page-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes mark-in { from { transform: scale(0); } to { transform: scale(1.15); } }
@media (max-width: 63.99em) { .cal-months { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 47.99em) {
  .calendar-head { display: block; margin-bottom: 40px; }
  .calendar-note { margin-top: 16px; }
  .cal-sheet { grid-template-columns: 1fr; padding: 16px; }
  .cal-months { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .cal-years { gap: 4px; }
  .cal-year { flex: 1 1 0; min-width: 0; padding: 10px 8px 8px; }
  .cal-year strong { font-size: var(--step-lead); }
}

/* the popup for one day: a print that develops, then the words */
.day { width: min(92vw, 34rem); max-height: 92svh; padding: 0; border: 0; background: transparent; color: var(--paper-ink); overflow: visible; }
/* dim to focus: the page stays faintly visible behind */
.day::backdrop { background: oklch(20% 0.014 255 / 0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity 240ms ease; }
.day.is-closing::backdrop { opacity: 0; }
@media (prefers-reduced-transparency: reduce) { .day::backdrop { background: oklch(20% 0.014 255 / 0.85); backdrop-filter: none; -webkit-backdrop-filter: none; } }
.day-card { position: relative; max-height: 92svh; overflow-y: auto; padding: 14px 14px 24px; background: var(--grain), var(--paper); border-radius: var(--card); box-shadow: var(--shadow-card); }
.day-photo { border-radius: 14px; }
.day-close { --lift: 3px; position: absolute; z-index: 1; top: 24px; right: 24px; min-height: 2.5rem; padding: 0 14px; border-radius: 12px; background: var(--grain), var(--paper); color: var(--paper-ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--rule), 0 var(--lift) 0 0 var(--edge); transition: translate var(--t-press) ease-out, box-shadow var(--t-press) ease-out; }
.day-close:active { --lift: 1px; translate: 0 2px; }
/* most of the photos are tall phone shots: show them taller, keeping faces (the upper middle) in frame */
.day-photo { width: 100%; aspect-ratio: 4 / 5; max-height: 58svh; object-fit: cover; object-position: 50% 35%; }
.day-photo[hidden] { display: none; }
.day-date { margin: 20px 10px 0; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.day-title { margin: 6px 10px 0; font-size: var(--step-sub); line-height: 1.04; letter-spacing: -0.03em; padding-right: 4.5rem; }
.day-photo:not([hidden]) ~ .day-title { padding-right: 0; }
.day-text:empty { display: none; }
.day-text { margin: 12px 10px 0; font-size: var(--step-lead); line-height: 1.35; max-width: 32ch; }
.day-nav { display: flex; justify-content: space-between; gap: 16px; margin: 24px 10px 0; }
.day-nav .text-button:disabled { opacity: 0.3; cursor: default; }
@media (prefers-reduced-motion: no-preference) {
  .day[open] .day-card { animation: day-in 500ms var(--spring); }
  .day.is-turning .day-photo { animation: develop 1.6s cubic-bezier(0.33, 0, 0.2, 1) both; }
  .day.is-turning :is(.day-date, .day-title, .day-text) { animation: page-in 600ms cubic-bezier(0.16, 1, 0.3, 1) both 150ms; }
}
@keyframes day-in { from { opacity: 0; transform: scale(0.2); } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .day[open] .day-card { animation: fade-in 200ms ease; } }
@keyframes fade-in { from { opacity: 0; } }

/* ---------- journal: a torn band of blue sugar paper, the notebook on it ---------- */
.journal { margin-top: var(--section); background: var(--grain), var(--sugar); color: var(--ink); padding-block: 140px 120px; -webkit-mask: var(--torn-both); mask: var(--torn-both); }
.journal-intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
.journal-intro :is(h1, h2) { grid-column: 1 / 8; }
.journal-note { grid-column: 9 / 13; }
.facts { display: flex; justify-content: space-between; gap: 32px; margin-top: 96px; }
.facts div { min-width: 0; }
.facts dt { font-family: var(--font-display); font-weight: 600; font-size: var(--step-sub); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.facts dd { margin-top: 8px; font-size: var(--step-small); }
/* the spiral: holes down the edge that show the blue band through */
.notebook { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); margin-top: 96px; border-radius: var(--card); background: var(--grain), var(--paper); color: var(--paper-ink); border-left: 10px dotted var(--sugar); box-shadow: var(--shadow-card); }
.notebook-page { grid-column: 1 / 9; padding: clamp(1.5rem, 3vw, 3rem); }
.notebook-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.notebook-date { font-size: var(--step-sub); line-height: 1; letter-spacing: -0.03em; }
.moods { border: 0; padding: 0; margin-top: 28px; }
.moods legend { padding: 0; font-weight: 600; margin-bottom: 12px; }
.mood-row { display: flex; flex-wrap: wrap; gap: 8px; }
.mood-row input { position: absolute; opacity: 0; pointer-events: none; }
.mood-row label { --lift: 4px; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; margin-bottom: 4px; border-radius: var(--stock); background: var(--grain), var(--paper); font-weight: 600; box-shadow: inset 0 0 0 1px var(--rule), 0 var(--lift) 0 0 var(--edge); cursor: pointer; transition: background-color var(--t-hover) ease, color var(--t-hover) ease, translate var(--t-press) var(--ease-out), box-shadow var(--t-press) var(--ease-out); }
.mood-row label:active { --lift: 1px; translate: 0 3px; }
/* the chosen one: ink with paper type */
.mood-row input:checked + label { background: var(--ink); color: var(--paper); box-shadow: 0 var(--lift) 0 0 oklch(10% 0.01 255); }
.mood-row input:focus-visible + label { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .mood-row label:hover { background: var(--grain), var(--surface); } .mood-row input:checked + label:hover { background: var(--ink-2); } }
.j-text { display: block; width: 100%; min-height: 360px; margin-top: 28px; padding: 20px; border-radius: var(--round); background: var(--surface); border: 1px solid var(--rule); resize: vertical; font-size: var(--step-body); line-height: 1.75; }
.j-text::placeholder { color: var(--muted); }
.j-status { margin-top: 12px; }
.notebook-past { grid-column: 9 / 13; padding: clamp(1.5rem, 3vw, 3rem) clamp(1.5rem, 3vw, 3rem) clamp(1.5rem, 3vw, 3rem) 0; }
.past-title { font-size: var(--step-lead); line-height: 1.1; }
.past-list { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; max-height: 520px; overflow-y: auto; }
.past-list button { display: block; width: 100%; text-align: left; padding: 12px 14px; border-radius: var(--round); background: var(--shade); transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.past-list button:active { transform: scale(0.98); }
.past-list button[aria-current="true"] { background: var(--ink); color: var(--paper); }
@media (hover: hover) and (pointer: fine) { .past-list button:not([aria-current="true"]):hover { background: oklch(20% 0.014 255 / 0.12); } }
.past-list strong { display: block; font-weight: 600; }
.past-list span { display: block; font-size: var(--step-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.past-empty { font-size: var(--step-body); }
@media (max-width: 47.99em) {
  .journal { padding-block: 96px 80px; }
  .journal-intro { display: block; }
  .journal-note { margin-top: 16px; }
  .facts { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 16px; margin-top: 56px; }
  .notebook { display: block; margin-top: 56px; border-left-width: 8px; }
  .notebook-past { padding: 0 1.5rem 1.5rem; }
  .j-text { min-height: 280px; }
}

/* ---------- CAT: the ledger and the admit card ---------- */
.cat { padding-top: var(--section); }
.ledger { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
.ledger-title { grid-column: 1 / 7; }
.figures { grid-column: 7 / 13; display: flex; flex-direction: column; gap: 20px; }
.fig { display: grid; grid-template-columns: 1fr 0.62fr 1.1fr; align-items: baseline; }
.fig-whole, .fig-dec { font-family: var(--font-display); font-weight: 600; font-size: var(--step-display); line-height: 1; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.03em; }
.fig-whole { text-align: right; }
.fig-dec { text-align: left; }
.fig-cap { font-size: var(--step-body); line-height: 1.35; padding-left: 24px; }
/* a ticket: round punches out of both sides; the wrapper casts the shadow the mask would cut off */
.ticket { filter: drop-shadow(0 0.6px 0.6px oklch(20% 0.014 255 / 0.25)) drop-shadow(4px 12px 12px oklch(20% 0.014 255 / 0.13)); }
.cat .ticket { margin-top: 120px; }
.admit { overflow: hidden; border-radius: var(--card); background: var(--grain), var(--paper); color: var(--paper-ink); -webkit-mask: var(--punched); mask: var(--punched); }
.admit-row { display: grid; grid-template-columns: 1fr 1fr 1.4fr; }
.admit-cell { padding: clamp(1.5rem, 3vw, 2.75rem); }
.admit-cell + .admit-cell { border-left: 2px dashed var(--rule); }
.cell-title { font-size: var(--step-lead); line-height: 1.1; margin-bottom: 20px; }
.countdown { margin-top: 20px; font-family: var(--font-display); font-weight: 600; font-size: var(--step-sub); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.muted-ink { margin-top: 14px; color: var(--muted); }
.study-today { font-family: var(--font-display); font-weight: 600; font-size: var(--step-sub); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.study-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 8px; margin-top: 24px; }
.study-buttons .text-button { margin-left: 8px; }
.mock-form label span { display: block; font-size: var(--step-small); font-weight: 600; margin-bottom: 4px; }
.mock-scores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.mock-form .button { margin-top: 18px; }
.mock-table-wrap { padding: 0 clamp(1.5rem, 3vw, 2.75rem) 8px; overflow-x: auto; }
.mock-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mock-table th, .mock-table td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.mock-table th { font-size: var(--step-small); font-weight: 600; }
.topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); padding: clamp(1.5rem, 3vw, 2.75rem); background: var(--grain), var(--surface); }
.topic-group h3 { font-size: var(--step-lead); line-height: 1.1; }
.topic-group p { font-size: var(--step-small); margin-top: 4px; }
.topic-group ul { list-style: none; padding: 0; margin-top: 16px; display: flex; flex-direction: column; gap: 4px; }
.topic-group label { display: flex; align-items: center; gap: 12px; min-height: 2.5rem; cursor: pointer; }
.topic-group input { width: 20px; height: 20px; accent-color: var(--ink); flex: none; }
.topic-group input:checked + span { text-decoration: line-through; text-decoration-thickness: 0.08em; }
@media (max-width: 63.99em) {
  .admit-row { grid-template-columns: 1fr 1fr; }
  .mock-form { grid-column: 1 / -1; border-left: 0 !important; border-top: 2px dashed var(--rule); }
}
@media (max-width: 47.99em) {
  .ledger { display: block; }
  .ledger-title { margin-bottom: 40px; }
  .fig { grid-template-columns: 52% 1fr; row-gap: 4px; }
  .fig-cap { grid-column: 1 / -1; padding-left: 0; }
  .ticket { filter: none; }
  .cat .ticket { margin-top: 72px; }
  .admit { -webkit-mask: none; mask: none; box-shadow: var(--shadow-card); }
  .admit-row { display: block; }
  .admit-cell + .admit-cell { border-left: 0; border-top: 2px dashed var(--rule); }
  .mock-scores { grid-template-columns: 1fr 1fr; }
  .topics { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- words: stacking sheets of pear, card and ink ---------- */
.words { margin-top: var(--section); }
.words-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 48px; }
.words-date { font-size: var(--step-lead); line-height: 1.2; text-align: right; }
.sheet { position: sticky; top: calc(var(--k) * 72px); min-height: 86svh; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 72px 1fr; column-gap: var(--gutter); padding-inline: var(--margin); border-radius: var(--card) var(--card) 0 0; background: var(--grain), var(--sh-bg); color: var(--sh-ink); box-shadow: 0 -1px 0 oklch(20% 0.014 255 / 0.08), 0 -10px 24px -14px oklch(20% 0.014 255 / 0.3); }
.sheet:nth-child(1) { --sh-bg: var(--accent); --sh-ink: var(--ink); --sh-fill: var(--ink); --sh-fill-ink: var(--paper); }
.sheet:nth-child(2) { --sh-bg: var(--paper); --sh-ink: var(--ink); --sh-fill: var(--accent); --sh-fill-ink: var(--ink); }
.sheet:nth-child(3) { --sh-bg: var(--ink); --sh-ink: var(--paper); --sh-fill: var(--paper); --sh-fill-ink: var(--ink); }
.sheet-name { grid-column: 1 / -1; align-self: center; font-size: var(--step-sub); line-height: 1; letter-spacing: -0.03em; }
.sheet-text { grid-column: 1 / 7; align-self: end; padding-bottom: clamp(2rem, 5vw, 4.5rem); }
.sheet-pos { font-style: italic; }
.sheet-meaning { margin-top: 12px; font-size: var(--step-lead); line-height: 1.3; max-width: 30ch; }
.sheet-example { margin-top: 20px; max-width: 40ch; }
.try { margin-top: 28px; max-width: 40ch; }
.try label { display: block; font-size: var(--step-small); font-weight: 600; margin-bottom: 6px; }
.sheet:nth-child(3) .try .field { background: oklch(100% 0 0 / 0.08); border-color: oklch(100% 0 0 / 0.35); }
.sheet:nth-child(3) .text-button, .sheet:nth-child(3) .link-plain { color: var(--sugar); }
.sheet-name, .sheet-text, .sheet-fill { transition: opacity 240ms ease; }
.sheet-name.is-covered, .sheet-text.is-covered, .sheet-fill.is-covered { opacity: 0; visibility: hidden; }
.sheet-fill { grid-column: 7 / 13; grid-row: 2; margin-right: calc(var(--margin) * -1); display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--grain), var(--sh-fill); color: var(--sh-fill-ink); }
.sheet-big { font-family: var(--font-display); font-weight: 600; line-height: 0.95; letter-spacing: -0.04em; font-size: var(--step-display); padding: 0 24px; text-align: center; overflow-wrap: anywhere; }
@media (max-width: 47.99em) {
  .words-head { display: block; }
  .words-date { text-align: left; margin-top: 12px; }
  .sheet { top: calc(var(--k) * 52px); grid-template-rows: 52px auto auto; min-height: 70svh; }
  .sheet-fill { grid-column: 1 / -1; grid-row: 2; margin-inline: calc(var(--margin) * -1); aspect-ratio: 4 / 3; }
  .sheet-text { grid-column: 1 / -1; grid-row: 3; padding: 24px 0 32px; }
}

/* ---------- footer: the back of the postcard ---------- */
.footer { margin-top: var(--section); padding-bottom: 64px; }
.footer .stripe-thin { margin-bottom: 96px; }
.postcard { position: relative; margin-inline: auto; width: min(100%, 83.333%); margin-top: 40px; border-radius: 0 0 var(--card) var(--card); background: var(--paper); color: var(--paper-ink); box-shadow: 0 12px 28px -14px oklch(20% 0.014 255 / 0.22); }
.scallops { position: absolute; left: 0; right: 0; bottom: 100%; width: 100%; height: 40px; fill: var(--paper); }
.postcard-body { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); padding: clamp(2rem, 4vw, 4rem); min-height: 380px; }
.postcard-title { font-size: var(--step-sub); line-height: 1; letter-spacing: -0.03em; margin-bottom: 20px; }
.postcard-from { margin-top: 20px; font-family: var(--font-display); font-weight: 600; font-size: var(--step-lead); }
.postcard-address { display: flex; flex-direction: column; align-items: flex-start; }
.stamp { align-self: flex-end; width: 88px; aspect-ratio: 3 / 4; object-fit: cover; outline: 6px solid var(--paper); outline-offset: -6px; padding: 6px; background: var(--accent); box-shadow: var(--shadow-sheet); transform: rotate(3deg); transition: transform 420ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .stamp:hover { transform: rotate(0deg) scale(1.06); } }
.address { margin-top: auto; padding-top: 32px; display: flex; flex-direction: column; gap: 12px; }
.imprint { text-align: center; max-width: none; padding: 0 1.5rem 24px; font-size: var(--step-small); color: var(--muted); }
@media (max-width: 47.99em) {
  .footer .stripe-thin { margin-bottom: 72px; }
  .postcard { width: 100%; }
  .scallops { height: 28px; }
  .postcard-body { grid-template-columns: 1fr; padding: 28px 20px; }
  .postcard-address { position: static; }
  .stamp { position: absolute; top: 20px; right: 20px; width: 64px; }
  .postcard-message { padding-right: 80px; }
  .address { padding-top: 0; }
}

/* ---------- entrances (content stays visible without JavaScript) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-rise] { opacity: 0; transform: translateY(14px); animation: rise 500ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 50ms + 40ms); }
  .js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 450ms var(--ease-out), transform 550ms var(--ease-out); transition-delay: calc(var(--i, 0) * 50ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js .polaroid[data-reveal] { transform: translateY(28px) rotate(var(--tilt)); }
  .js .polaroid[data-reveal].is-in { transform: rotate(var(--tilt)); transition: opacity 450ms var(--ease-out), transform 420ms var(--ease-out); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .js .polaroid[data-reveal].is-in:hover { transform: rotate(0deg) translateY(-8px) scale(1.03); }
}
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- headlines that rise from behind their baseline (js/motion.js) ---------- */
.sw { display: inline-block; white-space: nowrap; }
.sc { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .split-ready .sw { overflow: clip; padding-bottom: 0.12em; margin-bottom: -0.12em; }
  .split-ready .sc { transform: translateY(115%); transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--d) * var(--step)); }
  .split-ready.is-up .sc { transform: none; }
}

/* ---------- page to page: the last page dips back, the next one settles in (kept short so pages feel instant) ---------- */
@view-transition { navigation: auto; }
.tabbar { view-transition-name: tabbar; }
@media (prefers-reduced-motion: no-preference) {
  /* critically damped spring (damping 1, response 0.35s): no overshoot, settles softly */
  ::view-transition-group(tab-current) { animation-duration: 500ms; animation-timing-function: var(--spring); }
  ::view-transition-old(root) { animation: vt-recede 220ms ease-in both; }
  ::view-transition-new(root) { animation: vt-rise 380ms var(--spring) both; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@keyframes vt-recede { to { transform: scale(0.98); opacity: 0; } }
@keyframes vt-rise { from { transform: translateY(16px); opacity: 0; } }

/* ---------- celebrations: paper scraps and a short note (js/motion.js) ---------- */
.scrap { position: fixed; z-index: 30; pointer-events: none; border-radius: 2px; }
.cheer { position: fixed; z-index: 31; left: 50%; bottom: calc(24px + var(--cheer-lift, 0px)); max-width: min(90vw, 28rem); padding: 14px 20px; background: var(--grain), var(--paper); color: var(--paper-ink); font-family: var(--font-display); font-weight: 600; font-size: var(--step-lead); letter-spacing: -0.02em; line-height: 1.15; text-align: center; border-radius: 18px; box-shadow: var(--shadow-card), inset 0 0 0 1px var(--rule); opacity: 0; transform: translate(-50%, 16px) scale(0.92); filter: blur(8px); pointer-events: none; transition: opacity 240ms ease, transform 500ms var(--spring), filter 300ms ease; }
/* it materialises (sharpens and grows) rather than just fading in */
.cheer.is-on { opacity: 1; transform: translate(-50%, 0); filter: none; }
@media (prefers-reduced-motion: reduce) { .cheer, .cheer.is-on { transform: translate(-50%, 0); filter: none; transition: opacity 200ms ease; } }
@media (max-width: 47.99em) { .cheer { --cheer-lift: calc(80px + env(safe-area-inset-bottom)); } }

/* ---------- weighted smooth scrolling (Lenis, laptops only) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }

/* ---------- birthday: the card, the 25 on a pear field, the bracelet ---------- */
.bday-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 24px 16px 16px; min-height: calc(100svh - var(--bar)); }
.bday-card { display: flex; flex-direction: column; align-items: center; overflow: hidden; border-radius: var(--card); background: var(--grain), var(--paper); color: var(--paper-ink); text-align: center; box-shadow: var(--shadow-card); }
.bday-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px clamp(1.25rem, 4vw, 3.5rem); }
.bday-title { max-width: none; }
.bday-body .hero-line { margin-top: 28px; }
/* the cake on the card: cut-paper tiers with dripping icing and five lit candles; tap to blow them out (js/app.js) */
.bday-cake { display: flex; flex-direction: column; align-items: center; width: 15rem; margin-top: 36px; transition: translate var(--t-press) ease-out; }
.bday-cake:active { translate: 0 2px; }
.bc-candles { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 20px; height: 54px; margin-bottom: -1px; }
.bc-candles i { position: relative; width: 8px; height: 30px; border-radius: 2px; background: var(--sugar); }
.bc-candles i:nth-child(2n) { background: var(--coral); }
.bc-candles i:nth-child(3) { background: var(--sand); }
.bc-candles i::after { content: ""; position: absolute; bottom: 33px; left: 50%; width: 11px; height: 17px; margin-left: -5.5px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #f3c35b; box-shadow: 0 0 12px 3px oklch(85% 0.15 85 / 0.45); transform-origin: 50% 90%; }
.bc-candles i::before { content: ""; position: absolute; bottom: 30px; left: 50%; width: 2px; height: 5px; margin-left: -1px; background: var(--ink); }
.bc-tier { position: relative; display: block; border-radius: 12px 12px 0 0; }
/* icing along the top of each tier, with drips hanging below it */
.bc-tier::after { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 9px; background: radial-gradient(circle at 50% 0, var(--paper) 5px, transparent 5.5px) 3px 0 / 15px 9px repeat-x; }
.bc-top { width: 64%; height: 52px; background: linear-gradient(var(--paper) 0 0) top / 100% 14px no-repeat, var(--grain), var(--sand); }
.bc-bottom { width: 100%; height: 72px; background: linear-gradient(var(--paper) 0 0) top / 100% 14px no-repeat, var(--grain), var(--accent); }
.bc-plate { display: block; width: 118%; height: 12px; border-radius: var(--pill); background: var(--grain), var(--paper); box-shadow: var(--shadow-sheet); }
.bc-hint { margin-top: 16px; font-size: var(--step-small); font-weight: 600; color: var(--muted); white-space: nowrap; }
.bc-tier, .bc-candles i { box-shadow: 0 0 0 0.6px oklch(20% 0.014 255 / 0.12); }
@media (hover: hover) and (pointer: fine) {
  .bday-cake { transition: translate 300ms var(--ease-out); }
  .bday-cake:hover { translate: 0 -4px; }
  .bday-cake:hover .bc-hint { color: var(--blue); }
}
@media (prefers-reduced-motion: no-preference) {
  .bc-candles i::after { animation: flicker 0.7s ease-in-out infinite alternate; }
  .bc-candles i:nth-child(2n)::after { animation-duration: 0.55s; animation-delay: -0.2s; }
  .bc-candles i:nth-child(3n)::after { animation-duration: 0.8s; animation-delay: -0.4s; }
}
@keyframes flicker { 0% { transform: scale(1, 1) rotate(-2deg); } 50% { transform: scale(0.9, 1.12) rotate(2deg); } 100% { transform: scale(1.05, 0.94) rotate(-1deg); } }
/* blown out: the flames go one after another, left to right */
.bc-candles i::after { transition: opacity 200ms ease, scale 260ms var(--ease-out); }
.bday-cake.is-out .bc-candles i::after { opacity: 0; scale: 0.2; animation: none; box-shadow: none; }
.bday-cake.is-out .bc-candles i:nth-child(2)::after { transition-delay: 70ms; }
.bday-cake.is-out .bc-candles i:nth-child(3)::after { transition-delay: 140ms; }
.bday-cake.is-out .bc-candles i:nth-child(4)::after { transition-delay: 210ms; }
.bday-cake.is-out .bc-candles i:nth-child(5)::after { transition-delay: 280ms; }
.bday-side { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 12px; padding: clamp(1rem, 3vw, 2.5rem); overflow: hidden; border-radius: var(--card); background: var(--grain), var(--accent); color: var(--ink); box-shadow: var(--shadow-card); }
.bday-25 { display: grid; place-items: center; }
.bday-25 span { font-family: var(--font-display); font-weight: 600; font-size: clamp(9rem, 19vw, 22rem); line-height: 0.8; letter-spacing: -0.06em; }
/* a photo-booth strip: three frames that develop one after another */
.booth { display: flex; flex-direction: column; gap: 10px; width: min(100%, 15rem); justify-self: center; padding: 10px 10px 34px; border-radius: 4px; background: var(--grain), var(--paper); box-shadow: var(--shadow-sheet); transform: rotate(3deg); }
.booth img { width: 100%; aspect-ratio: 1; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  .booth img { animation: develop 1.8s cubic-bezier(0.33, 0, 0.2, 1) both; animation-delay: calc(0.2s + var(--i) * 0.45s); }
}
.bracelet { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 28px; list-style: none; padding: 0; }
.bead { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; background: var(--ink); color: var(--paper); box-shadow: inset 0 -2px 0 oklch(0% 0 0 / 0.18); }
.bead:nth-child(4n+2) { background: var(--accent); color: var(--ink); }
.bead:nth-child(4n+3) { background: var(--coral); color: var(--ink); }
.bead:nth-child(4n+4) { background: var(--sugar); color: var(--ink); }
.bead-gap { width: 0.75rem; background: none !important; box-shadow: none; }
@media (prefers-reduced-motion: no-preference) {
  .bday-25 span { animation: rise25 800ms cubic-bezier(0.16, 1, 0.3, 1) both 0.1s; }
  .js .bead { animation: bead-on 450ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(250ms + var(--i) * 30ms); }
}
@keyframes rise25 { from { transform: translateY(40%) scale(0.92); opacity: 0; } }
@keyframes bead-on { from { transform: translateY(-18px) rotate(-30deg); opacity: 0; } }
@media (max-width: 47.99em) {
  .bday-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 12px 12px 16px; }
  .bday-side { order: -1; min-height: 40svh; padding: 16px 16px 52px; }
  .bday-25 span { font-size: 34vw; }
  .booth { width: 100%; gap: 6px; padding: 6px 6px 20px; }
  .bday-card { margin: -36px 12px 0; position: relative; }
  .bday-body { padding: 36px 20px 32px; }
}

/* ---------- birthday: the stack of folded notes ---------- */
.notes { padding-top: var(--section); }
.notes-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; margin-bottom: 56px; }
.notes-head h2 { grid-column: 1 / 8; }
.notes-line { grid-column: 9 / 13; }
.notes-stage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: stretch; }
.note-stack { grid-column: 1 / 6; position: relative; min-height: 360px; display: grid; place-items: center; color: var(--paper-ink); }
.note-sheet { position: absolute; inset: 8% 6%; border-radius: 6px; background: var(--grain), var(--paper); box-shadow: var(--shadow-sheet); transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1), opacity 300ms ease; }
.note-sheet:nth-child(1) { background: var(--grain), var(--kraft); transform: rotate(-5deg); }
.note-sheet:nth-child(2) { background: var(--grain), var(--sand); transform: rotate(3.5deg); }
.note-sheet:nth-child(3) { transform: rotate(-1deg); }
.note-top { display: grid; place-items: center; padding: 16px; }
.note-stack-label { font-family: var(--font-display); font-weight: 600; font-size: var(--step-sub); line-height: 1; letter-spacing: -0.03em; }
.note-stack:active .note-sheet:nth-child(3) { transform: rotate(-1deg) scale(0.97); }
.note-stack.is-empty { cursor: default; }
.note-stack.is-empty .note-sheet { opacity: 0.35; }
@media (hover: hover) and (pointer: fine) {
  .note-stack:not(.is-empty):hover .note-sheet:nth-child(3) { transform: rotate(0deg) translateY(-10px); }
  .note-stack:not(.is-empty):hover .note-sheet:nth-child(1) { transform: rotate(-8deg); }
  .note-stack:not(.is-empty):hover .note-sheet:nth-child(2) { transform: rotate(6deg); }
}
/* the open note: the words on the left, its photo as a big polaroid on the right */
.note-open { grid-column: 6 / 13; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(11rem, 22vw, 19rem); grid-template-rows: 1fr auto; column-gap: clamp(1.5rem, 3vw, 3rem); row-gap: 20px; min-height: 360px; padding: clamp(1.75rem, 4vw, 3.5rem); border-radius: var(--card); background: var(--grain), var(--paper); color: var(--paper-ink); box-shadow: var(--shadow-card); perspective: 900px; }
.note-text { grid-column: 1; grid-row: 1; align-self: end; font-size: var(--step-lead); line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; max-width: 26ch; transform-origin: top center; }
/* a small photo clipped to the corner of each note */
.note-photo { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 35%; padding: 10px 10px 34px; border-radius: 3px; background: var(--paper); box-shadow: var(--shadow-sheet); transform: rotate(4deg); }
@media (prefers-reduced-motion: no-preference) { .note-open.is-unfolding .note-photo { animation: develop 1.6s cubic-bezier(0.33, 0, 0.2, 1) both; } }
.note-count { grid-column: 1; grid-row: 2; font-size: var(--step-small); color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .note-open.is-unfolding .note-text { animation: unfold 800ms cubic-bezier(0.16, 1, 0.3, 1) both; }
}
@keyframes unfold { from { transform: rotateX(-90deg); opacity: 0; } 60% { opacity: 1; } }
.notes-reset { display: block; margin-top: 28px; font-size: var(--step-body); }
.notes-all { margin-top: 32px; }
.notes-all summary { cursor: pointer; font-weight: 600; color: var(--blue); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; width: max-content; max-width: 100%; }
.notes-list { margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px var(--gutter); list-style: none; padding: 0; }
.notes-list li { padding: 14px 16px; border-radius: var(--round); background: var(--grain), var(--paper); box-shadow: inset 0 0 0 1px var(--rule); }
@media (max-width: 47.99em) {
  .notes-head { display: block; margin-bottom: 36px; }
  .notes-line { margin-top: 16px; }
  .notes-stage { display: flex; flex-direction: column; gap: 16px; }
  .note-stack { min-height: 240px; }
  .note-open { min-height: 240px; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .note-photo { grid-column: 1; grid-row: 1; justify-self: center; width: min(100%, 18rem); }
  .note-text { grid-row: 2; }
  .note-count { grid-row: 3; }
  .notes-list { grid-template-columns: 1fr; }
}

/* ---------- birthday: the glow (a serum dropper, a drop per step) on torn sugar paper ---------- */
.glow { margin-top: var(--section); background: var(--grain), var(--sugar); color: var(--ink); padding-block: 120px; -webkit-mask: var(--torn-both); mask: var(--torn-both); }
.glow-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
.glow-text { grid-column: 1 / 6; }
.glow-line { margin-top: 28px; }
.routine { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 8px; height: 100%; margin: 0; padding: 16px; list-style: none; }
.routine li { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border-radius: var(--stock); background: oklch(98.8% 0.007 95 / 0.55); font-weight: 600; transition: background-color 300ms ease, color 300ms ease; }
.routine li.is-lit { background: var(--ink); color: var(--paper); }
@media (prefers-reduced-motion: no-preference) { .routine li.is-lit { animation: pop 420ms cubic-bezier(0.22, 1, 0.36, 1); } }
@keyframes pop { 40% { transform: scale(1.12); } }
.glow-done { margin-top: 24px; min-height: 1.4em; font-family: var(--font-display); font-weight: 600; font-size: var(--step-sub); letter-spacing: -0.03em; line-height: 1.05; }
.glow-stage { grid-column: 7 / 13; position: relative; height: 520px; overflow: hidden; border-radius: var(--card); background: var(--grain), var(--paper); box-shadow: var(--shadow-card); --fall: 138px; }
.glow-stage::after { content: ""; position: absolute; inset: 0; background: #fff8ea; opacity: 0; pointer-events: none; }
.glow-stage.is-glowing::after { animation: glowpulse 1100ms ease-out; }
@keyframes glowpulse { 30% { opacity: 0.6; } }
.dropper { position: absolute; top: 16px; left: 50%; width: 80px; height: 220px; transform: translateX(-50%); }
.dropper svg { width: 100%; height: 100%; }
.dropper-bulb { fill: var(--coral); transform-origin: 40px 70px; transform-box: view-box; }
.dropper-collar { fill: var(--kraft); }
.dropper-glass { fill: oklch(20% 0.014 255 / 0.1); }
.dropper-serum { fill: #d4a056; }
.dropper.is-squeezed .dropper-bulb { animation: squeeze 360ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes squeeze { 40% { transform: scaleY(0.8) scaleX(1.08); } }
.droplet { position: absolute; top: 222px; left: 50%; width: 16px; height: 22px; margin-left: -8px; background: #d4a056; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; animation: drip 1000ms both; z-index: 1; }
@keyframes drip {
  0% { transform: translateY(-6px) scale(0.2); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  38% { transform: translateY(0) scale(1); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  100% { transform: translateY(var(--fall)) scale(0.9, 1.15); }
}
.pool { position: absolute; left: 0; right: 0; bottom: 0; height: 140px; background: var(--grain), var(--sand); }
.ripple { position: absolute; top: -6px; left: 50%; width: 48px; height: 14px; margin-left: -24px; border-radius: 50%; border: 3px solid #d4a056; animation: ripple 1000ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes ripple { from { transform: scale(0.3); opacity: 1; } to { transform: scale(5); opacity: 0; } }
@media (max-width: 47.99em) {
  .glow { padding-block: 96px 80px; }
  .glow-grid { display: flex; flex-direction: column; gap: 40px; align-items: stretch; }
  .glow-stage { height: 500px; --fall: 118px; }
}

/* ---------- birthday: the voucher ---------- */
.gift { padding-top: var(--section); }
.gift h2 { margin-bottom: 48px; }
.voucher { position: relative; display: grid; grid-template-columns: 2fr 1fr; overflow: hidden; border-radius: var(--card); background: var(--grain), var(--paper); color: var(--paper-ink); -webkit-mask: var(--punched); mask: var(--punched); }
.voucher-main { padding: clamp(2rem, 5vw, 4.5rem); }
.voucher-title { font-size: var(--step-head); line-height: 1.02; letter-spacing: -0.03em; }
.voucher-detail { margin-top: 24px; font-size: var(--step-lead); line-height: 1.35; max-width: 30ch; }
.voucher-from { margin-top: 28px; font-family: var(--font-display); font-weight: 600; font-size: var(--step-lead); }
.voucher-stub { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; padding: clamp(2rem, 4vw, 3.5rem); border-left: 2px dashed var(--edge); background: var(--grain), var(--surface); }
.voucher-status { font-size: var(--step-small); }
/* the one loud moment: a coral stamp */
.voucher-stamp { position: absolute; top: 50%; left: 38%; padding: 10px 22px; border-radius: 12px; background: var(--grain), var(--coral); color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: var(--step-sub); letter-spacing: -0.02em; transform: translate(-50%, -50%) rotate(-12deg); opacity: 0.94; pointer-events: none; box-shadow: var(--shadow-sheet); }
@media (prefers-reduced-motion: no-preference) {
  .voucher-stamp.is-stamping { animation: stamp 420ms cubic-bezier(0.55, 0, 1, 0.45) both; }
}
@keyframes stamp { from { transform: translate(-50%, -50%) rotate(-26deg) scale(2.4); opacity: 0; } }
@media (max-width: 47.99em) {
  .voucher { grid-template-columns: 1fr; -webkit-mask: none; mask: none; box-shadow: var(--shadow-card); }
  .voucher-stub { border-left: 0; border-top: 2px dashed var(--edge); }
  .voucher-stamp { left: 50%; top: 38%; }
}

/* the scratch card under the voucher: the gift card code from Firestore, under a coating she rubs off */
.scratch-box { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 56px; text-align: center; }
.scratch-intro { font-size: var(--step-lead); line-height: 1.3; color: var(--muted); max-width: 30ch; }
.scratch { position: relative; width: min(100%, 30rem); aspect-ratio: 3 / 2; overflow: hidden; border-radius: 16px; background: var(--grain), var(--paper); color: var(--paper-ink); box-shadow: var(--shadow-card); }
.scratch-under { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; }
.scratch-line { font-size: var(--step-lead); line-height: 1.3; font-weight: 600; max-width: 26ch; }
.scratch-code { font-size: var(--step-small); }
.scratch-code strong { display: block; margin-top: 4px; font-family: var(--font-display); font-size: var(--step-sub); letter-spacing: 0.02em; overflow-wrap: anywhere; user-select: all; }
.scratch-cover { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; transition: opacity 600ms ease; }
.scratch-cover.is-gone { opacity: 0; pointer-events: none; }
.scratch-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 20px; }

/* ---------- birthday: the mixtape (js/tape.js) ---------- */
.tape { padding-top: var(--section); }
.tape-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; margin-bottom: 56px; }
.tape-head h2 { grid-column: 1 / 8; }
.tape-line { grid-column: 9 / 13; }
.tape-stage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.tape-player { position: sticky; top: calc(var(--bar) + 24px); display: flex; flex-direction: column; gap: 20px; }
/* the cassette: a pear shell, a paper label, and two reels behind the window that turn while it plays */
.cassette { position: relative; aspect-ratio: 1.6; padding: 5.5% 5.5% 0; border-radius: 18px; background: var(--grain), var(--accent); color: var(--paper-ink); box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.4), 0 5px 0 0 var(--accent-deep), var(--shadow-card); perspective: 900px; }
.cassette-label { display: flex; flex-direction: column; justify-content: space-between; height: 66%; padding: 4% 5%; border-radius: 10px; background: var(--grain), var(--paper); }
.cassette-title { font-family: var(--font-display); font-weight: 600; font-size: var(--step-sub); line-height: 1; letter-spacing: -0.03em; }
.cassette-side { align-self: flex-end; font-weight: 600; font-size: var(--step-small); }
.cassette-window { position: absolute; left: 24%; right: 24%; top: 33%; height: 24%; display: flex; align-items: center; justify-content: space-between; padding: 0 5%; border-radius: var(--pill); background: var(--ink); }
.reel { height: 74%; aspect-ratio: 1; border-radius: 50%; border: 5px dotted var(--paper); }
.cassette-foot { position: absolute; left: 18%; right: 18%; bottom: 0; height: 14%; background: var(--grain), var(--kraft); clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%); }
@media (prefers-reduced-motion: no-preference) { .tape.is-playing .reel { animation: reel 2.4s linear infinite; } }
@keyframes reel { to { transform: rotate(360deg); } }
.tape-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tape-controls .button { min-width: 9.5rem; }
.tape-now { min-height: 1.5em; color: var(--muted); font-weight: 600; }
.deck { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-card); }
.deck iframe { display: block; width: 100%; height: 100%; }
/* the liner notes: every song, with a line from him; the playing one gets a pear highlighter */
.jcard { display: flex; flex-direction: column; gap: 40px; }
.jcard-title { font-size: var(--step-lead); line-height: 1.1; margin-bottom: 12px; }
.jcard-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.jcard-list button { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 12px; width: 100%; padding: 10px 12px; border-radius: var(--round); text-align: left; transition: background-color var(--t-hover) ease, transform var(--t-press) ease-out; }
.jcard-list button:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .jcard-list button:hover { background: var(--shade); } }
.jcard-list button[aria-current="true"] { background: oklch(87% 0.175 96 / 0.55); }
.jcard-num { font-variant-numeric: tabular-nums; color: var(--muted); padding-top: 0.15em; }
.jcard-text strong { display: block; font-weight: 600; }
.jcard-text span { display: block; font-size: var(--step-small); color: var(--muted); }
.jcard-list button[aria-current="true"] :is(.jcard-num, .jcard-text span) { color: var(--ink-2); }
@media (max-width: 47.99em) {
  .tape-head { display: block; margin-bottom: 36px; }
  .tape-line { margin-top: 16px; }
  .tape-stage { grid-template-columns: 1fr; }
  .tape-player { position: static; }
}

/* ---------- chai weather on the Today page ---------- */
.weather { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 64px; padding: 16px 20px; border-radius: 16px; background: oklch(98.8% 0.007 95 / 0.6); }
.weather-line { font-weight: 600; max-width: 60ch; }
.weather-actions { display: flex; gap: 20px; }
.city-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; flex-basis: 100%; }
.city-form .field { width: min(100%, 18rem); }
.rain { position: fixed; inset: 0; z-index: 20; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 900ms ease; }
.rain.is-on { opacity: 1; }
.rain i { position: absolute; top: -90px; width: 2px; height: 70px; background: oklch(58% 0.08 245 / 0.45); border-radius: 1px; animation: rainfall linear infinite; }
@keyframes rainfall { from { transform: translate(0, 0) rotate(10deg); } to { transform: translate(-40px, calc(100vh + 180px)) rotate(10deg); } }