/* Still Dad: landing page.
   Kept things. Headings and the small things a father keeps (a fortnight on a slip, a
   reminder, her words, crossed-out drafts, a letter) are set in Courier Prime, on paper drawn
   in CSS around real screens from the app. Reading text is the system sans. No build. */

@font-face {
  font-family: "Courier Prime";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/courier-prime-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Courier Prime";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/courier-prime-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Courier Prime";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/courier-prime-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light dark;

  --page: #eef2ed;
  --raised: #f9fbf8;
  --sunk: #e1e8e0;
  --rule: #c6cfc5;
  --outline: #9cb5a3;
  --ink: #1c2620;
  --ink-2: #39463d;
  --ink-3: #4a584e;
  --accent: #2f6945;
  --focus: #2f6945;

  --green: #2f6945;
  --on-green: #f5f7f3;
  --on-green-2: #d5e5da;
  --mint: #88c99c;
  --sun: #f2b25c;
  --sun-deep: #9a5a0e;

  /* Slips and keepsakes */
  --slip: #fcfbf7;
  --slip-ink: #232a24;
  --slip-ink-2: #505a52;
  --slip-rule: #d6dbd3;
  --with: #2f6945;
  --away: #7d887f;
  --tape: rgb(235 214 160 / 0.72);

  /* The light the three days happen in */
  --dusk: #33422f;
  --night: #0e1712;
  --morning: #2c4a45;
  --field-ink: #eef2ee;
  --field-ink-2: #c4cfc6;
  --field-away: rgb(238 242 238 / 0.5);

  /* Friday afternoon, at the school gate */
  --day: #a6d6b3;
  --day-ink: #12301f;
  --day-ink-2: #234a33;
  --day-sun: #9a5a0e;
  --day-bird: #2f6945;

  --bezel: #0c0f0d;
  --shade: 20 40 28;

  --type: "Courier Prime", "Courier New", Courier, monospace;
  --sans: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --step-h2: clamp(1.875rem, 1.35rem + 2.2vw, 3.25rem);
  --step-display: clamp(1.625rem, 1rem + 3.2vw, 3.75rem);
  --step-h3: clamp(1.75rem, 1.3rem + 1.7vw, 2.75rem);
  --step-quote: clamp(1.375rem, 1.05rem + 1.4vw, 2.25rem);
  --step-lede: clamp(1.125rem, 1.03rem + 0.4vw, 1.375rem);

  --gutter: clamp(20px, 5vw, 72px);
  --measure: 1136px;
  --wrap: min(100% - 2 * var(--gutter), var(--measure));
  --inset: 10px;
  --panel-radius: clamp(22px, 2.4vw, 34px);
  --section: clamp(80px, 9vw, 136px);

  /* Torn edges, as clip-paths for a sheet */
  --tear-r: polygon(0 0, calc(100% - 2px) 0, 100% 7%, calc(100% - 3px) 15%, 100% 24%, calc(100% - 2px) 32%, 100% 41%, calc(100% - 4px) 50%, calc(100% - 1px) 58%, calc(100% - 3px) 67%, 100% 75%, calc(100% - 2px) 84%, 100% 92%, calc(100% - 3px) 100%, 0 100%);
  --tear-ends: polygon(2px 0, calc(100% - 2px) 0, 100% 18%, calc(100% - 4px) 37%, calc(100% - 1px) 58%, calc(100% - 3px) 79%, 100% 100%, 3px 100%, 0 82%, 4px 63%, 1px 41%, 3px 20%);
  --tear-top: polygon(0 3px, 7% 0, 15% 4px, 23% 1px, 32% 5px, 40% 1px, 49% 3px, 57% 0, 66% 4px, 75% 1px, 83% 5px, 92% 1px, 100% 3px, 100% 100%, 0 100%);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --z-sticky: 10;
  --z-nav: 20;
  --z-skip: 30;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #0d120f;
    --raised: #172019;
    --sunk: #1c261f;
    --rule: #2e3a31;
    --outline: #415c4a;
    --ink: #eef2ee;
    --ink-2: #c3ccc5;
    --ink-3: #9aa69e;
    --accent: #88c99c;
    --focus: #88c99c;
    --green: #1f4430;
    --sun-deep: #8a500c;
    --slip: #e4e6df;
    --slip-ink: #1f2621;
    --slip-ink-2: #4a544c;
    --away: #6f7a71;
    --day: #24563a;
    --day-ink: #eef2ee;
    --day-ink-2: #cfe3d5;
    --day-sun: var(--sun);
    --day-bird: var(--mint);
    --bezel: #000;
    --shade: 0 0 0;
  }
}

/* Base */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--type);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p, figure, blockquote { margin: 0; }
p { text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }

a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

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

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: var(--z-skip);
  padding: 0.8rem 1.1rem;
  border-radius: 12px;
  background: var(--ink);
  color: var(--page);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-180%);
}
.skip:focus { transform: none; }

/* Buttons and links */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 1.5rem;
  border-radius: 999px;
  font: 600 1.02rem/1.2 var(--sans);
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s, transform 0.2s var(--ease-out);
}
.btn:active { transform: scale(0.98); }
.btn-light { background: var(--on-green); color: #1f4430; }
.btn-light:hover { background: #fff; }
.btn-green { background: #2f6945; color: #f4f4f4; }
.btn-green:hover { background: #285c3c; }
.btn-small { min-height: 44px; padding: 0 1.15rem; font-size: 0.95rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
.link-arrow::after {
  content: "→";
  content: "→" / "";
  transition: transform 0.25s var(--ease-out);
}
.link-arrow:hover::after { transform: translateX(4px); }

/* Nav */

.nav {
  position: fixed;
  inset: calc(var(--inset) + 10px) 0 auto;
  z-index: var(--z-nav);
  display: flex;
  justify-content: center;
  padding-inline: calc(var(--inset) + 10px);
  pointer-events: none;
}

.nav-pill {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: min(100%, var(--measure) + 44px);
  height: 60px;
  padding: 0 8px 0 22px;
  border-radius: 999px;
  background: var(--raised);
  box-shadow:
    0 0 0 1px rgb(var(--shade) / 0.07),
    0 12px 32px -16px rgb(var(--shade) / 0.4);
  pointer-events: auto;
}

.brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}
.brand-mark { width: 44px; height: 18px; color: var(--accent); }
.brand-word { width: 87px; height: 18px; }

.nav-links {
  display: flex;
  gap: 2px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 0.97rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
.nav-links a:hover { background: var(--sunk); color: var(--ink); }
.nav-pill .btn { margin-left: auto; }
.nav-links + .btn { margin-left: 0; }

@media (max-width: 800px) {
  .nav-links { display: none; }
  .nav-links + .btn { margin-left: auto; }
}

@media (max-width: 380px) {
  .nav-pill { gap: 0.5rem; padding-left: 16px; }
  .brand { gap: 8px; }
  .brand-mark { width: 38px; height: 16px; }
  .brand-word { width: 77px; height: 16px; }
  .nav-pill .btn { padding: 0 0.95rem; font-size: 0.9rem; }
}

/* Paper. Each slip or keepsake is a sheet drawn behind its text: torn where it was torn,
   taped where it was taped, with a shadow that follows the tear. */

.slip, .keep {
  position: relative;
  isolation: isolate;
  color: var(--slip-ink);
  font-family: var(--type);
  rotate: var(--tilt, 0deg);
  filter:
    drop-shadow(0 1px 1px rgb(var(--shade) / 0.22))
    drop-shadow(0 10px 14px rgb(var(--shade) / 0.18));
}
.slip::before, .keep::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 2px;
  background: var(--sheet, var(--slip));
  clip-path: var(--tear, none);
}

/* Tape, with serrated ends. The fortnight is long enough to need two pieces. */
.taped::after,
.fortnight .fortnight-days::after {
  content: "";
  position: absolute;
  top: -11px;
  left: calc(50% - 39px);
  width: 78px;
  height: 22px;
  background: var(--tape);
  clip-path: polygon(2px 0, calc(100% - 1px) 0, 100% 20%, calc(100% - 3px) 40%, 100% 60%, calc(100% - 2px) 80%, 100% 100%, 1px 100%, 3px 80%, 0 60%, 3px 40%, 0 20%);
  rotate: -4deg;
}

/* Ruled lines sit on the text itself, so they always meet the writing. */
:is(.keep-card blockquote, .keep-drafts, .quote blockquote) {
  --lh: 1.5em;
  line-height: var(--lh);
  background: linear-gradient(transparent calc(var(--lh) - 1px), var(--slip-rule) 0) 0 0 / 100% var(--lh) content-box;
}

.slip-label {
  color: var(--slip-ink-2);
  font-size: 0.8em;
  font-weight: 700;
  line-height: 1.2;
}

/* Line art. One pen: the hill and the kite, the school gate, the door. */

:is(.hero-art, .pickup-art, .close-art) svg { display: block; width: 100%; height: 100%; }
:is(.hero-art, .pickup-art, .close-art) path { stroke-width: 2; }
:is(.hero-art, .pickup-art, .close-art) .ink { stroke: var(--art-ink); }
:is(.hero-art, .pickup-art, .close-art) .accent { stroke: var(--art-accent); }
:is(.hero-art, .pickup-art, .close-art) .bird { stroke: var(--art-bird); }

/* Hero. Copy on the left; on the right the phone stands on the ground line with two slips
   beside it. The hill, the two of them and the kite are drawn up to the phone, and the
   ground carries on past it to the edge. */

.hero {
  --phone: max(180px, min(clamp(220px, 26vw, 340px), (100svh - 2 * var(--inset) - 200px) * 0.46));
  --phone-col: calc(var(--phone) * 1.5);
  --art-h: clamp(150px, 23svh, 220px);
  --tuck: 24px;
  --accent: var(--on-green);
  --focus: var(--on-green);
  --art-ink: var(--on-green);
  --art-accent: var(--sun);
  --art-bird: var(--mint);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: min(calc(100svh - 2 * var(--inset)), 64rem);
  margin: var(--inset);
  overflow: clip;
  border-radius: var(--panel-radius) var(--panel-radius) 0 0;
  background: var(--green);
  color: var(--on-green);
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  flex: 1 0 auto;
  grid-template-columns: minmax(0, 1fr) var(--phone-col);
  column-gap: clamp(48px, 7vw, 104px);
  align-items: end;
  width: var(--wrap);
  margin-inline: auto;
  padding-block: clamp(104px, 15svh, 152px) 0;
}

.hero-copy {
  container-type: inline-size;
  align-self: center;
  padding-bottom: calc(var(--art-h) * 0.58);
}

.hero h1 {
  font-size: clamp(2rem, 1.2rem + 4vw, 4.25rem);
  font-size: clamp(2rem, min(11cqi, 8.5svh), 4.25rem);
  line-height: 1.04;
}
.hero h1 .soft { display: block; color: var(--mint); }

.hero-lede {
  max-width: 30em;
  margin-top: clamp(20px, 2.4vw, 28px);
  color: var(--on-green-2);
  font-size: var(--step-lede);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: clamp(24px, 3vw, 36px);
}

.fine {
  margin-top: 1rem;
  color: var(--on-green-2);
  font-size: 0.94rem;
}

.hero-phone { position: relative; justify-self: center; width: var(--phone); }
.hero .bezel { width: var(--phone); margin-left: auto; }

.hero-phone .slip {
  position: absolute;
  z-index: 1;
  font-size: clamp(12px, var(--phone) * 0.045, 15px);
}

.slip-strip {
  --tear: var(--tear-ends);
  --tilt: -5deg;
  top: -5%;
  right: calc(var(--phone) * -0.4);
  width: calc(var(--phone) * 0.9);
  padding: 0.75em 1em 0.85em;
}
.strip-days {
  display: grid;
  grid-template-columns: repeat(15, minmax(0, 1fr));
  gap: 0.2em;
  margin: 0.5em 0 0;
  padding: 0;
  color: var(--slip-ink-2);
  font-size: 0.72em;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  list-style: none;
}
.strip-days li { display: grid; gap: 0.35em; }
.strip-days li::after {
  content: "";
  height: 1.6em;
  border: 1.5px solid var(--away);
  border-radius: 3px;
}
.strip-days .with::after { border-color: var(--with); background: var(--with); }
.strip-days .today { color: var(--slip-ink); }
.strip-days .today::after { outline: 1.5px solid var(--sun-deep); outline-offset: 1.5px; }

/* A reminder torn off a pad: perforations down the left, a torn right edge. */
.slip-next {
  --tear: var(--tear-r);
  --tilt: 4deg;
  --sheet: radial-gradient(circle at 3px 5px, var(--slip-rule) 1.4px, transparent 1.9px) 0.5em 0 / 6px 10px repeat-y, var(--slip);
  /* Always clear of the kite, whose top is 0.83 of the drawing's height above the ground. */
  bottom: calc(var(--art-h) * 0.85 + 28px);
  left: calc(var(--phone) * -0.5);
  width: max(calc(var(--phone) * 0.54), 11em);
  padding: 1em 1.1em 1.1em 1.5em;
}
.slip-todo {
  display: flex;
  gap: 0.55em;
  margin-top: 0.55em;
  font-size: 1.08em;
  line-height: 1.35;
}
.slip-todo::before {
  content: "";
  flex: none;
  width: 1em;
  height: 1em;
  margin-top: 0.12em;
  border: 1.5px solid var(--slip-ink-2);
  border-radius: 50%;
}

.hero-art {
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc((100% + var(--wrap)) / 2 - (var(--phone-col) + var(--phone)) / 2 + var(--tuck));
  height: var(--art-h);
  pointer-events: none;
  /* The drawing's ground (y 170 of 185) lands on the line the phone stands on. */
  translate: 0 calc(100% * 15 / 185);
}
.hero-art svg { position: absolute; inset: 0; overflow: visible; }
.hero-art svg path { stroke-width: 2.4; }

@media (min-width: 1000px) { .hero-art svg path { stroke-width: 1.9; } }
@media (min-width: 1600px) { .hero-art svg path { stroke-width: 1.55; } }

/* Narrower, the copy comes first and the phone stands at the right, the slips and the
   drawing in the space to its left. */
@media (max-width: 860px) {
  .hero { --phone: min(44vw, 250px); }
  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    padding-top: clamp(104px, 15svh, 128px);
  }
  .hero-copy { padding-bottom: 0; }
  .hero-phone { width: 100%; margin-top: clamp(48px, 9vw, 72px); }
  .slip-strip {
    top: -2%;
    right: calc(var(--phone) * 0.3);
    width: min(15.5rem, 100% - var(--phone) * 0.3);
  }
  .slip-next {
    top: 32%;
    bottom: auto;
    right: calc(var(--phone) * 0.96);
    left: auto;
    width: min(10rem, 100% - var(--phone) * 0.96);
  }
  /* Anchored to the phone, so when the height cap narrows it the kite stays near the phone. */
  .hero-art {
    right: calc(var(--gutter) + var(--phone) - var(--tuck));
    left: auto;
    width: calc(100% - var(--gutter) - var(--phone) + var(--tuck));
    height: auto;
    max-height: 170px;
    aspect-ratio: 310 / 185;
  }
}

@media (max-width: 640px) {
  .hero-art .lead { display: none; }
  .hero-art svg path { stroke-width: 2.6; }
}

/* The smallest phones: the reminder reaches into the margin so "blueberries" stays on it. */
@media (max-width: 359px) {
  .slip-next { width: calc(100% - var(--phone) * 0.96 + 12px); }
  .slip-todo { font-size: 1em; }
}

/* Story: one made-up fortnight and three of its days, each with the screen it uses. The
   days sit in a row of cards that scrolls sideways, each card in the light of its hour. On
   wide screens script.js stands them in a column on one panel whose light changes as you
   read, and gathers the screens into one phone that stays beside them. */

.story { padding-top: var(--section); }

.story-head {
  display: grid;
  gap: 1rem;
  width: var(--wrap);
  margin-inline: auto;
}
.story-head h2 { font-size: var(--step-h2); line-height: 1.08; }
.story-head > p:not(.note) { max-width: 34em; color: var(--ink-2); font-size: var(--step-lede); }
.note { color: var(--ink-3); font-size: 0.94rem; }

.fortnight {
  --tear: var(--tear-ends);
  --tilt: -0.6deg;
  margin-block: clamp(28px, 3.6vw, 48px) clamp(6px, 1vw, 14px);
  padding: clamp(24px, 2.8vw, 34px) clamp(16px, 2.6vw, 36px) clamp(18px, 2vw, 26px);
}
.fortnight.taped::after { left: calc(9% - 39px); rotate: -5deg; }
.fortnight .fortnight-days::after { left: calc(91% - 39px); rotate: 4deg; }

.fortnight-days {
  --cell: clamp(26px, 3.6vw, 44px);
  display: grid;
  grid-template-columns: repeat(15, minmax(0, 1fr));
  gap: clamp(3px, 0.7vw, 10px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.fortnight-days li {
  display: grid;
  gap: 8px;
  justify-items: center;
  color: var(--slip-ink-2);
  font: 700 0.8rem/1 var(--type);
}
.fortnight-days li::after,
.fortnight-key span::before {
  content: "";
  border: 1.5px solid var(--away);
  border-radius: clamp(4px, 0.6vw, 8px);
}
.fortnight-days li::after { width: 100%; height: var(--cell); }
.fortnight-days .with::after,
.fortnight-key .key-with::before { border-color: var(--with); background-color: var(--with); }

.fortnight-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 1.1rem;
  color: var(--slip-ink-2);
  font-size: 0.94rem;
}
.fortnight-key span { display: inline-flex; align-items: center; gap: 0.55rem; }
.fortnight-key span::before { width: 14px; height: 14px; border-radius: 4px; }

[data-time="dusk"] { --field: var(--dusk); }
[data-time="night"] { --field: var(--night); }
[data-time="morning"] { --field: var(--morning); }

.days { margin-top: clamp(36px, 5vw, 64px); }

/* The row runs edge to edge, but its first card lines up with the text above. */
.scenes {
  --edge: max(var(--gutter), (100% - var(--measure)) / 2);
  --gap: clamp(14px, 2vw, 24px);
  display: grid;
  grid-auto-columns: min(100% - 2.5rem, 21rem);
  grid-auto-flow: column;
  gap: var(--gap);
  margin: 0;
  padding: 0 var(--edge) 32px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: var(--edge);
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--rule) transparent;
  scrollbar-width: thin;
  list-style: none;
}
.scenes:focus-visible { outline-offset: -2px; }

/* Wider, the next card still shows at the edge, so the row reads as one to scroll. */
@media (min-width: 640px) {
  .scenes { grid-auto-columns: min((100% - 2 * var(--gap)) / 2.35, 21rem); }
}

/* Each card is lit like its hour. Its keepsake lies across the bottom of the phone. */
.scene {
  --focus: var(--field-ink);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8.5rem;
  grid-template-areas: "copy copy" "keep shot";
  align-items: center;
  padding: clamp(22px, 3vw, 30px) clamp(20px, 2.6vw, 28px) 0;
  overflow: clip;
  border-radius: 24px;
  background: var(--field);
  color: var(--field-ink);
  scroll-snap-align: start;
}
.scene-copy { grid-area: copy; }
.scene h3 {
  color: var(--sun);
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.5rem);
  line-height: 1.12;
  transition: color 0.4s var(--ease-out);
}
.place { margin-top: 0.4rem; color: var(--field-ink-2); font-size: 0.97rem; }
.scene-text { max-width: 30em; margin-top: 1rem; line-height: 1.55; }

.shot {
  grid-area: shot;
  align-self: end;
  max-height: 15rem;
  margin-top: 28px;
  overflow: visible clip;
}
.scene .keep {
  grid-area: keep;
  z-index: 1;
  margin: 28px -2.5rem 28px 0;
  font-size: 0.78rem;
}

/* Her words, on an index card. */
.keep-card { --tilt: -3deg; padding: 0.9em 1em 0.8em; }
.keep-card blockquote {
  margin-inline: -1em;
  padding-inline: 1em;
  border-top: 1px solid var(--sun-deep);
  font-size: 1.06em;
}
.keep-card figcaption { margin-top: 0.55em; color: var(--slip-ink-2); font-size: 0.86em; }

/* Three starts to a reply, on a pad, each struck through. */
.keep.keep-drafts {
  --tear: var(--tear-top);
  --tilt: 2.5deg;
  --lh: 1.8em;
  padding: 1em 1em 0.8em;
  color: var(--slip-ink-2);
}
.keep-drafts s {
  background: linear-gradient(177deg, transparent calc(50% - 0.75px), var(--slip-ink) 0 calc(50% + 0.75px), transparent 0);
  text-decoration: none;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* A letter, folded once, kept for later. */
.keep-letter {
  --tilt: -2deg;
  --sheet:
    linear-gradient(transparent calc(50% - 1px), rgb(var(--shade) / 0.12) 0 50%, rgb(255 255 255 / 0.7) 0 calc(50% + 1px), transparent 0),
    linear-gradient(rgb(var(--shade) / 0.04), transparent 50%),
    var(--slip);
  padding: 1em 1.05em 0.9em;
  font-style: italic;
  line-height: 1.45;
}
.keep-letter .sign { margin-top: 0.5em; text-align: right; }

@media (prefers-color-scheme: dark) {
  .scene { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); }
}

/* The staged story: one panel, lit by whichever day is crossing the middle of the window,
   scenes on the left and one phone held in view on the right. The scenes' own screens stay
   in the page for screen readers, out of sight. */

.stage { display: none; }

.days.is-staged {
  --phone: min(300px, calc((100svh - 230px) * 0.47));
  --focus: var(--field-ink);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 96px);
  margin-inline: var(--inset);
  padding-inline: calc(max(var(--gutter), (100% - var(--measure)) / 2) - var(--inset));
  border-radius: var(--panel-radius);
  background: var(--field, var(--dusk));
  color: var(--field-ink);
  transition: background-color 0.9s var(--ease-out);
}

/* Scenes are at least 60svh, so 25svh either side lets the first and last reach the middle
   of the window while the phone is still held. */
.days.is-staged .scenes {
  display: block;
  margin: 0;
  padding: 25svh 0;
  overflow: visible;
  scroll-snap-type: none;
}
.days.is-staged .scene {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "copy" "keep";
  align-content: center;
  min-height: 60svh;
  padding: 32px 0;
  overflow: visible;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.days.is-staged .scene h3 {
  color: var(--field-ink-2);
  font-size: var(--step-h3);
  line-height: 1.08;
}
.days.is-staged .scene.is-on h3 { color: var(--sun); }
.days.is-staged .scene-text { font-size: var(--step-lede); }
.days.is-staged .scene .keep {
  justify-self: end;
  width: min(19rem, 72%);
  margin: clamp(28px, 3vw, 44px) clamp(-40px, -2vw, -16px) 0 0;
  font-size: clamp(0.88rem, 0.75rem + 0.3vw, 1.02rem);
}
.days.is-staged .shot {
  position: absolute;
  grid-area: auto;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.days.is-staged .stage {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 22px;
  align-self: start;
  height: 100svh;
  padding-top: 72px;
}
.stage .fortnight-days { --cell: 18px; width: var(--phone); gap: 3px; }
.stage .fortnight-days li {
  gap: 6px;
  color: var(--field-ink-2);
  font-size: 0.68rem;
  transition: color 0.4s var(--ease-out);
}
.stage .fortnight-days li::after { border-color: var(--field-away); border-radius: 5px; }
.stage .fortnight-days .with::after { border-color: var(--mint); background-color: var(--mint); }
.stage .fortnight-days li.is-on { color: var(--field-ink); }
.stage .fortnight-days li.is-on::after { outline: 1.5px solid var(--sun); outline-offset: 2px; }
.stage .bezel { width: var(--phone); }
.stage-screens { display: grid; }
.stage-screens img { grid-area: 1 / 1; opacity: 0; transition: opacity 0.45s var(--ease-out); }
.stage-screens img.is-on { opacity: 1; }

@media (prefers-color-scheme: dark) {
  .days.is-staged { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); }
}

/* The phone frame */

.bezel {
  padding: 3.2%;
  border-radius: 15.8% / 7.4%;
  background: var(--bezel);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.1),
    0 34px 60px -34px rgb(var(--shade) / 0.55),
    0 14px 28px -18px rgb(var(--shade) / 0.35);
}
.bezel img { width: 100%; border-radius: 13.5% / 6.2%; background: var(--sunk); }

/* The pickup: the end of the fortnight, in daylight, with the pen. */

.pickup {
  --accent: var(--day-ink);
  --focus: var(--day-ink);
  --art-ink: var(--day-ink);
  --art-accent: var(--day-sun);
  --art-bird: var(--day-bird);
  margin: clamp(24px, 4vw, 56px) var(--inset) 0;
  padding-top: clamp(56px, 7vw, 104px);
  overflow: clip;
  border-radius: var(--panel-radius);
  background: var(--day);
  color: var(--day-ink);
}
.days.is-staged + .pickup { margin-top: var(--inset); }

.pickup-copy { width: var(--wrap); margin-inline: auto; }
.pickup h3 { color: var(--day-sun); font-size: var(--step-h3); line-height: 1.08; }
.pickup .place { color: var(--day-ink-2); }
.pickup-line {
  max-width: 16em;
  margin-top: clamp(20px, 2.6vw, 36px);
  font: 700 var(--step-display) / 1.08 var(--type);
  letter-spacing: -0.02em;
  text-wrap: balance;
  hanging-punctuation: first;
}
.pickup .scene-text {
  margin-top: clamp(16px, 2vw, 24px);
  color: var(--day-ink-2);
  font-size: var(--step-lede);
}

.pickup-art {
  width: 100%;
  margin-top: clamp(8px, 2vw, 24px);
  aspect-ratio: 940 / 172;
}
.pickup-art svg path { stroke-width: 1.8; }

@media (max-width: 900px) {
  .pickup-art { aspect-ratio: 680 / 172; }
}

@media (max-width: 640px) {
  .pickup-line { hanging-punctuation: none; }
  .pickup-art { aspect-ratio: 2 / 1; }
  .pickup-art svg path { stroke-width: 2.6; }
}

/* Guides. The categories are labels; one line from a guide is pinned up on a ruled card. */

.guides {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(48px, 6vw, 104px);
  align-items: center;
  width: var(--wrap);
  margin-inline: auto;
  padding-block: var(--section) clamp(40px, 5vw, 72px);
}

.guides-intro h2 { font-size: var(--step-h2); line-height: 1.08; }
.guides-intro > p { margin-top: 1rem; color: var(--ink-2); font-size: var(--step-lede); }

.cats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 8px;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}
.cats li {
  padding: 0.4rem 0.8rem;
  border-radius: 2px;
  background: var(--slip);
  color: var(--slip-ink);
  font: 400 0.94rem/1.3 var(--type);
  box-shadow:
    0 1px 1px rgb(var(--shade) / 0.18),
    0 6px 10px -6px rgb(var(--shade) / 0.3);
  rotate: -1deg;
}
.cats li:nth-child(even) { rotate: 0.8deg; }
.cats li:nth-child(3n) { rotate: -0.3deg; }

.quote {
  --tilt: -1.2deg;
  --pad: clamp(24px, 3.4vw, 48px);
  padding: clamp(36px, 4.4vw, 56px) var(--pad) clamp(24px, 3vw, 36px);
}
.quote blockquote {
  margin-inline: calc(var(--pad) * -1);
  padding-inline: var(--pad);
  border-top: 1px solid var(--sun-deep);
  font-size: var(--step-quote);
  font-weight: 700;
  letter-spacing: -0.01em;
  hanging-punctuation: first;
}
.quote figcaption { margin-top: 1.1rem; color: var(--slip-ink-2); font-size: 0.97rem; }
.quote cite { color: var(--slip-ink); }

@media (max-width: 860px) {
  .guides { grid-template-columns: 1fr; }
  .quote { --tilt: -0.8deg; }
}

/* Two labels to a line on a phone. */
@media (max-width: 640px) {
  .cats { gap: 9px 7px; }
  .cats li { padding: 0.35rem 0.6rem; font-size: 0.84rem; }
}

/* Questions */

.faq {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(28px, 5vw, 88px);
  width: var(--wrap);
  margin-inline: auto;
  padding-block: clamp(48px, 6vw, 96px) var(--section);
}
.faq h2 { font-size: var(--step-h2); line-height: 1.08; }

.faq-list details { border-top: 1px solid var(--rule); }
.faq-list details:last-child { border-bottom: 1px solid var(--rule); }

.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 64px;
  padding-block: 1.1rem;
  cursor: pointer;
  font: 600 clamp(1.06rem, 1rem + 0.3vw, 1.25rem) / 1.35 var(--sans);
  list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background:
    linear-gradient(var(--accent) 0 0) center / 100% 1.5px no-repeat,
    linear-gradient(var(--accent) 0 0) center / 1.5px 100% no-repeat;
  transition: transform 0.35s var(--ease-out);
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list summary:focus-visible { outline-offset: 4px; }
.faq-list details p { max-width: 38em; padding-bottom: 1.6rem; color: var(--ink-2); }

@media (max-width: 860px) {
  .faq { grid-template-columns: 1fr; }
}

/* Close */

.close {
  --accent: var(--on-green);
  --focus: var(--on-green);
  --art-ink: var(--on-green);
  --art-accent: var(--sun);
  margin: var(--inset);
  padding-top: clamp(64px, 8vw, 120px);
  overflow: clip;
  border-radius: var(--panel-radius) var(--panel-radius) 0 0;
  background: var(--green);
  color: var(--on-green);
  text-align: center;
}
.close-copy { width: var(--wrap); margin-inline: auto; }
.close h2 { font-size: var(--step-display); line-height: 1.06; }
.close p { max-width: 30em; margin: 1.1rem auto 0; color: var(--on-green-2); font-size: var(--step-lede); }
.close .actions { justify-content: center; }

.close-art {
  width: 100%;
  margin-top: clamp(36px, 6vw, 72px);
  aspect-ratio: 1090 / 134;
}
.close-art svg path { stroke-width: 1.8; }

@media (max-width: 640px) {
  .close-art { aspect-ratio: 3 / 1; }
  .close-art svg path { stroke-width: 2.6; }
}

/* Footer. The wordmark runs the full width as a hairline outline, drawn in the same pen. */

.footer {
  width: var(--wrap);
  margin-inline: auto;
  padding-block: clamp(48px, 6vw, 88px) clamp(20px, 2.4vw, 32px);
}

.foot-top {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 48px clamp(32px, 5vw, 88px);
}
.foot-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px clamp(24px, 3vw, 48px);
}

.foot-label {
  margin-bottom: 0.45rem;
  color: var(--ink-3);
  font: 500 0.94rem/1.3 var(--sans);
  letter-spacing: normal;
}

.foot-links ul, .foot-legal { margin: 0; padding: 0; list-style: none; }
.foot-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-size: clamp(1.125rem, 1.06rem + 0.25vw, 1.25rem);
  font-weight: 600;
  text-decoration: none;
}
.foot-links a:hover { text-decoration: underline; }

.support .support-line {
  padding-top: 0.5rem;
  color: var(--ink);
  font-size: clamp(1.125rem, 1.06rem + 0.25vw, 1.25rem);
  font-weight: 600;
  line-height: 1.35;
}
.support p + p { margin-top: 0.75rem; color: var(--ink-2); }

.foot-end { margin-top: clamp(40px, 6vw, 88px); }
.foot-word svg { display: block; width: 100%; height: auto; }
.foot-word path { stroke: var(--outline); stroke-width: 0.1; }

.foot-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 2rem;
  margin-top: clamp(16px, 2vw, 28px);
  color: var(--ink-3);
  font-size: 0.94rem;
}
.foot-legal { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.foot-legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-2);
  text-decoration: none;
}
.foot-legal a:hover, .foot-legal a[aria-current] { color: var(--ink); text-decoration: underline; }

/* Stroke widths are in the wordmark's own units, so they step up as it narrows. */
@media (max-width: 1100px) { .foot-word path { stroke-width: 0.12; } }
@media (max-width: 860px) {
  .foot-top { grid-template-columns: 1fr; }
  .foot-word path { stroke-width: 0.15; }
}
@media (max-width: 600px) { .foot-word path { stroke-width: 0.2; } }
@media (max-width: 520px) { .foot-links { grid-template-columns: auto minmax(0, 1fr); } }
@media (max-width: 420px) { .foot-word path { stroke-width: 0.26; } }
@media (max-width: 359px) { .foot-links { grid-template-columns: 1fr; gap: 32px; } }

/* Help, terms and privacy */

.legal {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 40px clamp(28px, 5vw, 88px);
  align-items: start;
  width: var(--wrap);
  margin-inline: auto;
  padding-block: clamp(128px, 15vw, 200px) clamp(24px, 4vw, 56px);
}

.legal-head h1 { font-size: var(--step-h2); line-height: 1.08; }
.legal-date { margin-top: 1rem; color: var(--ink-3); font-size: 0.97rem; }

.legal-toc { margin-top: clamp(32px, 4vw, 48px); }
.legal-toc summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: fit-content;
  min-height: 36px;
  color: var(--ink-3);
  font: 500 0.94rem/1.3 var(--sans);
  cursor: pointer;
  list-style: none;
}
.legal-toc summary::-webkit-details-marker { display: none; }
.legal-toc summary::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.35s var(--ease-out);
}
.legal-toc details[open] summary::after { transform: translateY(2px) rotate(225deg); }
.legal-toc summary:hover { color: var(--ink); }
.legal-toc ol { margin: 0; padding: 0; list-style: none; }
.legal-toc a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--ink-2);
  font-size: 0.97rem;
  text-decoration: none;
}
.legal-toc a:hover { color: var(--ink); text-decoration: underline; }

.legal-body { max-width: 42rem; }
.legal-lede { color: var(--ink); font-size: var(--step-lede); line-height: 1.5; }
.legal-body h2 {
  margin-top: clamp(44px, 5vw, 64px);
  font-size: clamp(1.25rem, 1.12rem + 0.5vw, 1.5rem);
  line-height: 1.25;
}
.legal-body h2 + * { margin-top: 0.75rem; }
.legal-body :is(p, li) { color: var(--ink-2); }
.legal-body :is(p, ul) + :is(p, ul) { margin-top: 1rem; }
.legal-body ul { margin-bottom: 0; padding-left: 1.25rem; }
.legal-body li + li { margin-top: 0.6rem; }
.legal-body li::marker { color: var(--accent); }
.legal-body strong { color: var(--ink); font-weight: 600; }

/* Only the contents list sticks, so it fits any laptop screen whatever the title's length. */
@media (min-width: 861px) and (min-height: 680px) {
  .legal-head { align-self: stretch; }
  .legal-toc { position: sticky; top: 112px; }
}

@media (max-width: 860px) {
  .legal { grid-template-columns: 1fr; }
  .legal-toc details { border-block: 1px solid var(--rule); }
  .legal-toc summary {
    justify-content: space-between;
    width: auto;
    min-height: 56px;
    color: var(--ink);
    font-size: 1rem;
  }
  .legal-toc summary::after { margin-right: 4px; }
  .legal-toc ol { padding-bottom: 0.75rem; }
}
@media (pointer: coarse) { .legal-toc a { min-height: 44px; } }

/* Motion. Everything above is complete without it. */

@keyframes draw { from { stroke-dashoffset: 1.001; } to { stroke-dashoffset: 0; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } }
@keyframes lift { from { transform: translateY(36px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes settle { from { opacity: 0; translate: 0 -12px; rotate: calc(var(--tilt) * 2.5); } }
@keyframes fill { from { border-color: var(--away); background-color: transparent; } }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .nav-pill { animation: fade-in 0.8s var(--ease-out) both; }

  .hero-copy > * { animation: rise-in 1.1s var(--ease-expo) both; }
  .hero-copy > :nth-child(2) { animation-delay: 0.12s; }
  .hero-copy > :nth-child(3) { animation-delay: 0.2s; }
  .hero-copy > :nth-child(4) { animation-delay: 0.28s; }
  .hero h1 .soft { animation: fade-in 1.2s var(--ease-out) 0.45s both; }

  /* The phone comes up without fading, so its screen is painted at once. Then the slips are
     dropped beside it and the pen draws the hill. */
  .hero .bezel { animation: lift 1.3s var(--ease-expo) 0.1s both; }
  .hero-phone .slip { animation: settle 1s var(--ease-expo) 0.75s both; }
  .hero-phone .slip-next { animation-delay: 1s; }

  .hero-art svg path {
    stroke-dasharray: 1 2;
    animation: draw var(--dur) linear calc(var(--delay) + 0.3s) both;
  }

  /* A keepsake settles when its day comes round. */
  .days.is-staged .keep { transition: rotate 0.9s var(--ease-expo), translate 0.9s var(--ease-expo); }
  .days.is-staged .scene:not(.is-on) .keep { rotate: calc(var(--tilt) * -1.4); translate: 0 6px; }

  @supports (animation-timeline: view()) {
    /* The fortnight fills in as it comes up the page: three days with you, then a long gap,
       then the next one. */
    .fortnight { view-timeline: --fortnight block; }
    .fortnight .fortnight-days li:nth-child(2) { --n: 1; }
    .fortnight .fortnight-days li:nth-child(3) { --n: 2; }
    .fortnight .fortnight-days .with::after {
      animation: fill linear both;
      animation-timeline: --fortnight;
      animation-range: cover calc(14% + var(--n, 0) * 5%) cover calc(24% + var(--n, 0) * 5%);
    }
    .fortnight .fortnight-days .with:last-child::after { animation-range: cover 50% cover 58%; }

    .pickup { view-timeline: --pickup block; }
    .pickup-art svg path {
      stroke-dasharray: 1 2;
      animation: draw linear both;
      animation-timeline: --pickup;
      animation-range: entry 30% cover 56%;
    }
    .pickup-art svg path:is(.accent, .bird) { animation-range: cover 46% cover 64%; }

    .close { view-timeline: --close block; }
    .close-art svg path {
      stroke-dasharray: 1 2;
      animation: draw linear both;
      animation-timeline: --close;
      animation-range: entry 35% cover 62%;
    }
    .close-art svg path.accent { animation-range: cover 48% cover 72%; }

    /* The subject runs to just above the page's end, so the last letter always finishes. */
    .foot-end { view-timeline: --foot-end block; }
    .foot-word path {
      stroke-dasharray: 1 2;
      animation: draw linear both;
      animation-timeline: --foot-end;
      animation-range: entry calc(var(--i) * 4%) entry calc(72% + var(--i) * 4%);
    }
  }

  @supports (interpolate-size: allow-keywords) and selector(::details-content) {
    :root { interpolate-size: allow-keywords; }
    .faq-list details::details-content {
      height: 0;
      overflow: clip;
      transition: height 0.4s var(--ease-out), content-visibility 0.4s allow-discrete;
    }
    .faq-list details[open]::details-content { height: auto; }
  }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 640px) {
  .hero-art svg path { animation-delay: calc(var(--delay-m) + 0.3s); }
}

@media (prefers-reduced-motion: reduce) {
  .days, .stage-screens img, .stage .fortnight-days li, .scene h3 { transition: none; }
}