/*
  loveink.app, in the app's own world: Cut Paper (DESIGN.md). A dark dyed board with fog
  and grain, kraft paper laid on it, glass for anything that operates, one red for the
  act, the torn paper heart as the mark. Nothing is lit: every shadow falls straight down.

  Everything is same-origin. The four faces are subsets of the app's own files
  (assets/fonts), and every raster under assets/img is copied from the app's assets/.
  A new third-party request is a privacy-policy edit (docs/site.md).

  Tokens mirror tailwind.config.js; change them there first.
*/

@font-face { font-family: "Fraunces"; src: url("assets/fonts/Fraunces-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("assets/fonts/Fraunces-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("assets/fonts/IBMPlexMono-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("assets/fonts/Caveat-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --desk-deep: #0C0A08;
  --desk: #17130F;
  --desk-haze: #2C2118;
  --paper: #EFD9C2;
  --paper-edge: rgba(60,45,30,.14);
  --paper-side: #D2B89B;
  --paper-rule: rgba(42,38,32,.14);
  --ink-on-paper: #2A2620;
  --ink-on-paper-2: #7F7467;
  --chrome: #EFE7DA;
  --chrome-2: #B7ABA0;
  --chrome-3: #7E7469;
  --glass: rgba(255,255,255,.09);
  --glass-2: rgba(255,255,255,.05);
  --glass-rim: rgba(255,255,255,.14);
  --sep: rgba(255,255,255,.12);
  --red: #C3352B;
  --mark-halo: rgba(0,0,0,.5);

  --kraft: var(--paper) url("assets/img/kraft.webp") 0 0 / 418px 418px;
  --print-rest: 0 0 0 .5px var(--paper-edge), 0 1.5px 0 var(--paper-side), 0 3.5px 6px -2px rgba(13,8,3,.55), 0 18px 40px -10px rgba(15,10,5,.45);
  --print-lift: 0 0 0 .5px var(--paper-edge), 0 1.5px 0 var(--paper-side), 0 4px 10px -2px rgba(13,8,3,.55), 0 26px 56px -12px rgba(15,10,5,.5);
  --glass-float: 0 1px 2px rgba(0,0,0,.25), 0 12px 28px -12px rgba(0,0,0,.65);

  --serif: "Fraunces", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --hand: "Caveat", cursive;

  --pad: clamp(16px, 4vw, 40px);
  --measure: 34rem;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--chrome-3) var(--desk-deep);
  background: var(--desk);
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--desk);
  color: var(--chrome);
  font: 400 1.0625rem/1.55 var(--serif);
  font-feature-settings: "kern";
  caret-color: var(--chrome);
  isolation: isolate;
}

/* The board: five blooms of dye nobody can point at, then the grain, thickest in the
   middle and thinning to a little under half at the edges (DeskGround.tsx). Fixed to the
   window, so a long page is one board and not a stretched one. Dark blooms first in the
   list: the first background paints on top. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}
body::before {
  z-index: -2;
  background:
    radial-gradient(circle 85vw at 106% -8%, rgba(10,8,6,.44), rgba(10,8,6,.36) 30%, rgba(10,8,6,.19) 60%, rgba(10,8,6,.07) 83%, rgba(10,8,6,0)),
    radial-gradient(circle 125vw at 50% 114%, rgba(10,8,6,.55), rgba(10,8,6,.45) 30%, rgba(10,8,6,.24) 60%, rgba(10,8,6,.08) 83%, rgba(10,8,6,0)),
    radial-gradient(circle 100vw at 6% 86%, rgba(96,98,124,.10), rgba(96,98,124,.082) 30%, rgba(96,98,124,.044) 60%, rgba(96,98,124,.015) 83%, rgba(96,98,124,0)),
    radial-gradient(circle 95vw at 88% 58%, rgba(122,100,78,.119), rgba(122,100,78,.098) 30%, rgba(122,100,78,.052) 60%, rgba(122,100,78,.018) 83%, rgba(122,100,78,0)),
    radial-gradient(circle 115vw at 24% 16%, rgba(122,100,78,.17), rgba(122,100,78,.139) 30%, rgba(122,100,78,.075) 60%, rgba(122,100,78,.026) 83%, rgba(122,100,78,0)),
    var(--desk);
}
body::after {
  z-index: -1;
  background: url("assets/img/grain.png") 0 0 / 256px 256px repeat;
  -webkit-mask-image: radial-gradient(ellipse farthest-side at 50% 50%, rgba(0,0,0,.13), rgba(0,0,0,.1232) 20%, rgba(0,0,0,.1061) 40%, rgba(0,0,0,.0859) 60%, rgba(0,0,0,.0691) 80%, rgba(0,0,0,.0583));
          mask-image: radial-gradient(ellipse farthest-side at 50% 50%, rgba(0,0,0,.13), rgba(0,0,0,.1232) 20%, rgba(0,0,0,.1061) 40%, rgba(0,0,0,.0859) 60%, rgba(0,0,0,.0691) 80%, rgba(0,0,0,.0583));
}

::selection { background: var(--paper); color: var(--ink-on-paper); }

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: var(--chrome-3); }
a:hover { text-decoration-color: currentColor; }
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
figure { margin: 0; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--chrome); outline-offset: 3px; border-radius: 6px; }

.container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--pad); }

/* The mark register: bare facts only — a time, a date, a distance, a code. */
.mark {
  font: 500 .75rem/1.3 var(--mono);
  letter-spacing: .11em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--chrome-2);
}
.muted { color: var(--chrome-2); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip-link {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  z-index: 10;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--kraft);
  color: var(--ink-on-paper);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

/* ---------------------------------------------------------------- header, footer */

.site-header { padding-block: 22px 8px; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.012em;
  text-decoration: none;
}
.brand-mark {
  width: 28px;
  height: 28px;
  background: url("assets/img/heart.webp") center / contain no-repeat;
  filter: drop-shadow(0 2px 3px rgba(13,8,3,.5));
}

.nav-links { display: flex; gap: clamp(16px, 3vw, 32px); font-size: .9375rem; }
.nav-links a { color: var(--chrome-2); text-decoration: none; padding-block: 10px; position: relative; }
.nav-links a:hover { color: var(--chrome); }
.nav-links a[aria-current="page"] { color: var(--chrome); }
.nav-links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--red);
}

.site-footer { border-top: 1px solid var(--sep); margin-top: 24px; }
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
  padding-block: 28px 40px;
  font-size: .875rem;
  color: var(--chrome-3);
}
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer-links a { color: var(--chrome-2); text-decoration: none; }
.footer-links a:hover { color: var(--chrome); }

/* ---------------------------------------------------------------- the key */

.cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 0 28px 0 22px;
  border-radius: 999px;
  background: var(--kraft);
  color: var(--ink-on-paper);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -.012em;
  text-decoration: none;
  box-shadow: var(--print-rest);
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1);
}
.cta:hover { transform: translateY(-2px); box-shadow: var(--print-lift); }
.cta:active { transform: translateY(0); box-shadow: var(--print-rest); transition-duration: .1s; }
.cta-apple { width: 22px; height: 22px; fill: currentColor; margin-top: -3px; }

/* ---------------------------------------------------------------- 21:38 */

.hero { padding-block: clamp(28px, 5vw, 72px) clamp(64px, 9vw, 128px); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .78fr);
  grid-template-areas: "copy send land";
  align-items: start;
  gap: clamp(32px, 4vw, 64px);
}
.hero-copy { grid-area: copy; align-self: center; display: flex; flex-direction: column; align-items: flex-start; }
.beat-send { grid-area: send; }
.beat-land { grid-area: land; }

.hero h1 {
  font-size: clamp(2.75rem, 1.2rem + 4.1vw, 5rem);
  line-height: 1;
  letter-spacing: -.028em;
  max-width: 9ch;
}
.lede {
  margin-top: 24px;
  max-width: 24ch;
  font-size: clamp(1.1875rem, 1rem + .5vw, 1.375rem);
  line-height: 1.45;
  color: var(--chrome-2);
}
.hero-copy .cta { margin-top: 36px; }
.hero-facts { margin-top: 18px; }

.beat { display: flex; flex-direction: column; align-items: center; gap: 16px; min-width: 0; }
.beat-mark { align-self: stretch; text-align: center; }
.beat-mark time { color: var(--chrome); }

/* The recipient capsule, from Home's top row. */
.recipient {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 18px 0 6px;
  border-radius: 999px;
  background: linear-gradient(var(--glass), var(--glass-2));
  box-shadow: inset 0 0 0 1px var(--glass-rim), var(--glass-float);
  -webkit-backdrop-filter: blur(24px);
          backdrop-filter: blur(24px);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.012em;
}
.recipient-initial {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--desk);
  box-shadow: 0 0 0 2px var(--red);
  font-size: .8125rem;
  letter-spacing: 0;
}

/* The letter: the composing square, 1:1, on the widget's own 30pt corner. */
.letter {
  position: relative;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 1;
  border-radius: 8.5%;
  background: var(--kraft);
  box-shadow: var(--print-rest);
}
.letter img,
.w-letter img,
.thumb-live img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.ink { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
#ink { touch-action: none; cursor: crosshair; }

.tray {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 60px;
  padding-inline: 10px;
  border-radius: 999px;
  background: linear-gradient(var(--glass), var(--glass-2));
  box-shadow: inset 0 0 0 1px var(--glass-rim), var(--glass-float);
  -webkit-backdrop-filter: blur(24px);
          backdrop-filter: blur(24px);
}
.swatch, .tray-key {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color .2s ease;
}
.swatch::before {
  content: "";
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
.swatch:hover { background: var(--glass); }
/* A tool in hand is a lit pill, never red (The Red Rule). */
.swatch.is-on { background: var(--chrome); }
.tray-sep { width: 1px; height: 28px; margin-inline: 6px; background: var(--sep); }
.tray-key svg { width: 22px; height: 22px; fill: none; stroke: var(--chrome); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tray-key:hover { background: var(--glass); }
.tray-key:disabled { cursor: default; background: transparent; }
.tray-key:disabled svg { stroke: var(--chrome-3); }

.beat-note { font-size: .9375rem; color: var(--chrome-2); text-align: center; }

/* Anna's phone. Everything inside is sized in the screen's own width (cqw), so the
   home screen scales as one picture. */
.phone {
  width: 100%;
  max-width: 330px;
  aspect-ratio: 402 / 874;
  padding: 3%;
  border-radius: 15% / 7%;
  background: #0A0908;
  box-shadow: inset 0 0 0 1.5px #2B2723, 0 2px 3px rgba(0,0,0,.4), 0 40px 70px -24px rgba(0,0,0,.8);
}
.phone-screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 12.5% / 5.9%;
  container-type: inline-size;
  background:
    url("assets/img/grain.png") 0 0 / 128px 128px repeat,
    linear-gradient(170deg, #3A2B1F, var(--desk-haze) 40%, #1A140F);
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
}
.status {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 14cqw;
  padding: 1cqw 8cqw 0 11cqw;
  font-size: 4.3cqw;
  font-weight: 600;
  letter-spacing: -.01em;
}
.island { position: absolute; top: 3.4cqw; left: 50%; width: 31cqw; height: 9cqw; margin-left: -15.5cqw; border-radius: 5cqw; background: #000; }
.status-icons { display: flex; align-items: center; gap: 1.6cqw; }
.status-icons svg { height: 3cqw; width: auto; fill: currentColor; }
.status-icons svg:last-child { height: 3.3cqw; }

.hs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.6cqw 6.4cqw;
  padding: 4cqw 7cqw 0;
}
.hs-large { grid-column: 1 / -1; }
.hs-label { display: block; margin-top: 1.6cqw; font-size: 3cqw; font-weight: 500; text-align: center; color: rgba(255,255,255,.92); }
.w-letter, .w-together, .w-distance { box-shadow: 0 6px 16px -4px rgba(5,3,0,.55); }
.w-letter { position: relative; aspect-ratio: 1; border-radius: 8.9%; background: var(--kraft); }
.w-distance { width: 100%; height: auto; aspect-ratio: 1; border-radius: 12.9%; }

.dock {
  position: absolute;
  inset-inline: 3.6cqw;
  bottom: 3.6cqw;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 22cqw;
  border-radius: 9cqw;
  background: rgba(255,255,255,.11);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}
.dock-app, .dock-icon { width: 15.6cqw; height: 15.6cqw; border-radius: 22.5%; }
.dock-app { display: grid; place-items: center; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.dock-app svg { width: 8cqw; height: 8cqw; fill: none; stroke: rgba(255,255,255,.92); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- the time-together square */

.w-together, .together {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: 11% 14% 19%;
  border-radius: 12.9%;
  background: var(--paper) url("assets/img/together-frame.webp") center / cover;
  color: var(--ink-on-paper);
  font-family: var(--serif);
  text-align: center;
  container-type: inline-size;
}
.w-together-stack, .together-stack { display: flex; flex-direction: column; font-size: 14cqw; line-height: 1.08; font-weight: 600; letter-spacing: -.02em; }
.w-together-since, .together-since {
  margin-top: 5cqw;
  font: 500 5.4cqw/1.2 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-on-paper-2);
}

/* ---------------------------------------------------------------- the distance square */

.arc-number { font: 600 32px var(--serif); letter-spacing: -.02em; fill: var(--ink-on-paper); }
.arc-caption { font: 400 18px var(--serif); letter-spacing: .02em; fill: var(--ink-on-paper); }

/* ---------------------------------------------------------------- the rest of the evening */

.evening { position: relative; }

.hour-grid {
  position: relative;
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 27rem) minmax(0, 1fr);
  grid-template-areas: "rail copy objects";
  column-gap: clamp(28px, 4vw, 72px);
  padding-block: clamp(56px, 8vw, 120px);
}
/* The column of times: one hairline down the whole evening, a knot where each hour sits. */
.hour-grid::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: calc(var(--pad) + 6.5rem + clamp(28px, 4vw, 72px) / 2);
  width: 1px;
  background: var(--sep);
}
.rail {
  grid-area: rail;
  position: sticky;
  top: 32px;
  align-self: start;
  padding-top: .55rem;
  font-size: .9375rem;
  color: var(--chrome);
  text-align: end;
}
.rail::after {
  content: "";
  position: absolute;
  top: calc(.55rem + .5em);
  inset-inline-end: calc(-1 * clamp(28px, 4vw, 72px) / 2 - 4px);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--desk);
  box-shadow: inset 0 0 0 1.5px var(--chrome-2);
}

.hour-copy { grid-area: copy; align-self: start; }
.hour h2, .closing h2 {
  font-size: clamp(2rem, 1.3rem + 2vw, 3.25rem);
  line-height: 1.04;
  letter-spacing: -.024em;
}
.hour-copy p { margin-top: 20px; max-width: var(--measure); font-size: 1.125rem; line-height: 1.6; color: var(--chrome-2); }
.hour-copy p + p { margin-top: 14px; }
.hour-copy .small { font-size: .9375rem; line-height: 1.55; }

.hour-objects { grid-area: objects; display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.object { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.object figcaption { font-size: .875rem; color: var(--chrome-2); }

/* 22:04 — the note */
.hour-objects--note { align-items: flex-start; }
.hour-objects--note .object { width: 100%; max-width: 560px; }
.hour-objects--note .object:last-child { max-width: 400px; align-self: flex-end; }

.note-card, .note-widget {
  position: relative;
  width: 100%;
  container-type: inline-size;
  color: var(--ink-on-paper);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.12;
}
.note-card { aspect-ratio: 2 / 1; border-radius: 6.45% / 12.9%; background: var(--paper) url("assets/img/note-windows.webp") center / cover; }
.note-line { position: absolute; inset-inline: 14%; font-size: 6.6cqw; }
.note-theirs { bottom: 54%; }
.note-mine { top: 61%; text-align: end; font-weight: 400; }
.note-mine::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: .95em;
  margin-inline-start: 3px;
  vertical-align: -.12em;
  background: var(--ink-on-paper);
  animation: caret 1.1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

.note-widget { aspect-ratio: 1092 / 512; border-radius: 6.1% / 12.9%; background: var(--paper) url("assets/img/note-window.webp") center / cover; box-shadow: 0 6px 16px -4px rgba(5,3,0,.55); }
.note-widget-line { position: absolute; inset: 8% 6% 36% 14%; display: flex; align-items: flex-end; font-size: 8.4cqw; }

/* 07:10 — the two squares, one gap apart, as they stand on the letters screen */
.hour-objects--pair { flex-direction: row; gap: 16px; align-items: flex-start; }
.hour-objects--pair .object { flex: 1 1 0; max-width: 320px; }
.square { width: 100%; aspect-ratio: 1; }
svg.square { height: auto; border-radius: 12.9%; }

/* September — the box */
.hour-objects--box { gap: 16px; max-width: 600px; }
.wall { position: relative; }
.wall-legend { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; color: var(--chrome-2); }
.wall-legend::after { content: ""; flex: 1; height: 1px; background: var(--sep); }
.wall-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.slot {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  background: linear-gradient(var(--glass), var(--glass-2));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
.slot-date {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 500 .6875rem/1 var(--mono);
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: var(--chrome-3);
}
.slot-letter { background: none; box-shadow: none; }
.slot-letter .slot-date { color: var(--chrome); text-shadow: 0 0 3px var(--mark-halo), 0 0 8px var(--mark-halo); }
.thumb { position: absolute; inset: 0; overflow: hidden; border-radius: 12px; box-shadow: 0 0 0 .5px var(--paper-edge), 0 1px 0 var(--paper-side), 0 3px 6px -2px rgba(13,8,3,.5); }
.thumb-kraft { background: var(--paper) url("assets/img/kraft.webp") 0 0 / 110px 110px; }
.thumb-photo { background: #1a1510 var(--src) var(--pos, 50% 50%) / var(--zoom, 100%) no-repeat; }
.thumb svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.thumb svg path, .thumb svg circle { fill: none; stroke: currentColor; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.thumb svg circle.dot { fill: currentColor; stroke: none; }
.thumb svg text { fill: currentColor; font: 400 22px var(--hand); text-anchor: middle; }
.thumb svg text.hand-sm { font-size: 16px; }
.thumb svg text.hand-lg { font-size: 36px; }
.i-red { color: #F2503F; }
.i-cream { color: #F6F0E4; }
.i-charcoal { color: #2A2620; }
.i-amber { color: #D9A441; }
.i-sage { color: #6E8B5A; }
.i-steel { color: #3D6E8E; }

/* The streak: a kraft card die-cut round, twine across it, seven pennants. */
.streak {
  padding: 22px 22px 14px;
  border-radius: 22px;
  background: var(--kraft);
  box-shadow: var(--print-rest);
  color: var(--ink-on-paper);
  overflow: hidden;
}
.streak-count { font-size: 1.25rem; font-weight: 600; letter-spacing: -.014em; line-height: 1; }
.streak-n { margin-inline-end: 3px; font-size: 2.75rem; letter-spacing: -.03em; }
.bunting { position: relative; margin-top: 20px; height: 92px; }
.twine {
  position: absolute;
  top: 5px;
  inset-inline: -22px;
  height: 5px;
  background: url("assets/img/twine.png") 0 0 / auto 5px repeat-x;
  filter: drop-shadow(0 1px 1px rgba(13,8,3,.22));
}
.pennants { position: relative; display: flex; justify-content: center; gap: 9.5px; margin: 0; padding: 0; list-style: none; }
.pennant {
  position: relative;
  width: 34px;
  height: 59px;
  background: url("assets/img/pennant.webp") 0 0 / 100% 100% no-repeat;
  filter: drop-shadow(0 1px 1.5px rgba(13,8,3,.30)) drop-shadow(0 5px 8px rgba(13,8,3,.16));
  transform-origin: 50% 4px;
  animation: sway var(--d, 3s) ease-in-out var(--p, 0s) infinite alternate;
}
@keyframes sway { from { transform: rotate(calc(-1 * var(--r, 1.4deg))); } to { transform: rotate(var(--r, 1.4deg)); } }
.p-date { position: absolute; top: 12px; inset-inline: 0; text-align: center; font-size: .75rem; line-height: 1; color: var(--ink-on-paper-2); }
.has-heart::after {
  content: "";
  position: absolute;
  top: 26px;
  left: 50%;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  background: url("assets/img/heart.webp") center / contain no-repeat;
  filter: drop-shadow(0 1px 1.5px rgba(13,8,3,.35));
}
.p-day { position: absolute; top: 66px; inset-inline: 0; text-align: center; font: 500 .5rem/1 var(--mono); letter-spacing: .1em; color: var(--ink-on-paper-2); }
.is-today .p-date, .is-today .p-day { color: var(--ink-on-paper); }

/* ---------------------------------------------------------------- close */

.closing { padding-block: clamp(72px, 10vw, 140px) clamp(64px, 8vw, 110px); }
.closing-inner { display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.closing-icon { width: 104px; height: 104px; border-radius: 23%; box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 20px 40px -14px rgba(0,0,0,.8); }
.closing h2 { max-width: 12ch; }
.closing .mark { margin-top: -10px; }

/* ---------------------------------------------------------------- legal & support */

.legal-main { max-width: 860px; padding-block: clamp(28px, 5vw, 64px) clamp(56px, 8vw, 104px); }
.legal-title { margin-bottom: clamp(24px, 4vw, 40px); padding-inline: 4px; }
.legal-title h1 { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); line-height: 1.04; letter-spacing: -.024em; }
.legal-title p { margin-top: 12px; font-size: 1.0625rem; color: var(--chrome-2); }

/* The document is one sheet of kraft on the board. */
.legal-content {
  padding: clamp(24px, 6vw, 64px);
  border-radius: 3px;
  background: var(--kraft);
  box-shadow: var(--print-rest);
  color: var(--ink-on-paper);
  font-size: 1.0625rem;
  line-height: 1.65;
}
.legal-content ::selection { background: var(--ink-on-paper); color: var(--paper); }
.legal-content > section + section { margin-top: 40px; }
.legal-content h2 { margin-bottom: 14px; font-size: clamp(1.375rem, 1.2rem + .6vw, 1.625rem); line-height: 1.2; letter-spacing: -.014em; }
.legal-content h3 { margin: 26px 0 8px; font-size: 1.125rem; line-height: 1.3; letter-spacing: -.01em; }
.legal-content p, .legal-content ul, .legal-content ol { max-width: 68ch; }
.legal-content p + p { margin-top: 14px; }
.legal-content ul, .legal-content ol { margin: 12px 0 14px; padding-inline-start: 1.3em; }
.legal-content li + li { margin-top: 6px; }
.legal-content li::marker { color: var(--ink-on-paper-2); }
.legal-content strong { font-weight: 600; }
.legal-content a { text-decoration-color: var(--ink-on-paper-2); }
.legal-content a:hover { text-decoration-color: var(--ink-on-paper); }
.legal-content :focus-visible { outline-color: var(--ink-on-paper); }
.legal-content .muted { color: var(--ink-on-paper-2); }
.legal-note { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--paper-rule); color: var(--ink-on-paper-2); font-size: .9375rem; }

.support-contact { padding-bottom: 32px; border-bottom: 1px solid var(--paper-rule); }
.support-contact .muted { font-size: .9375rem; }
.support-email {
  display: inline-block;
  margin: 4px 0 14px;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -.024em;
  line-height: 1.1;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.support-email:hover { text-decoration: underline; text-decoration-thickness: 2px; }

/* ---------------------------------------------------------------- narrower */

@media (max-width: 1099px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    grid-template-areas: "copy copy" "send land";
    align-items: start;
  }
  .hero h1 { max-width: 12ch; }
  .lede { max-width: 32ch; }
  .hour-grid {
    grid-template-columns: 5rem minmax(0, 1fr);
    grid-template-areas: "rail copy" "rail objects";
    row-gap: 40px;
  }
  .hour-grid::before { inset-inline-start: calc(var(--pad) + 5rem + clamp(28px, 4vw, 72px) / 2); }
}

@media (max-width: 719px) {
  .site-header { padding-top: 16px; }
  .nav-links { gap: 16px; font-size: .875rem; }
  .brand { font-size: 1.125rem; }
  .brand-mark { width: 24px; height: 24px; }

  .hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "send" "land"; gap: 48px; }
  .hero-copy .cta { margin-top: 28px; }
  .letter { max-width: 420px; }
  .tray { padding-inline: 6px; }
  .swatch, .tray-key { width: 40px; height: 40px; }
  .swatch::before { width: 26px; height: 26px; }
  .phone { max-width: 300px; }

  /* The column of times stays a column: a narrow rail beside each hour's words, its
     hairline running the height of them, the knot level with the heading. */
  .hour-grid { grid-template-columns: 3.25rem minmax(0, 1fr); grid-template-areas: "rail copy" "objects objects"; column-gap: 12px; row-gap: 0; }
  .hour-copy p { font-size: 1.0625rem; line-height: 1.55; }
  .hour-grid::before { display: none; }
  .rail { position: relative; top: auto; align-self: stretch; padding-inline-end: 8px; font-size: .6875rem; letter-spacing: .06em; white-space: nowrap; text-align: start; border-inline-end: 1px solid var(--sep); }
  .rail::after { inset-inline-end: -5px; }
  .hour-objects { margin-top: 36px; }
  .hour-objects--note .object:last-child { max-width: 340px; }
  .wall-grid { gap: 4px; }
  .slot, .thumb { border-radius: 8px; }
  .streak { padding-inline: 16px; }
  .pennants { gap: 6px; }
}

@media (max-width: 380px) {
  .nav-links a[href="terms-of-service.html"] { display: none; }
  .pennant { width: 30px; height: 52px; }
  .has-heart::after { top: 23px; width: 16px; height: 16px; margin-left: -8px; }
  .p-day { top: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pennant, .note-mine::after { animation: none; }
  .cta { transition: none; }
}