/* OpScale concept, second pass: the wall. Page colour is sampled from the clip. */

@font-face {
  font-family: "Familjen Grotesk";
  src: url("../fonts/familjen-grotesk.woff2") format("woff2");
  font-weight: 400 700; font-display: swap;
}
@font-face {
  font-family: "Onest";
  src: url("../fonts/onest.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
}
@font-face {
  font-family: "Gochi Hand";
  src: url("../fonts/gochi-hand.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}

:root {
  --wall:       #183a2a;   /* sampled from the encoded clip */
  --wall-deep:  #0f2a1f;
  --cream:      #f7f1dc;
  --cream-b:    #ebe2c4;
  --cream-soft: #d5dcc6;
  --yellow:     #f3d354;
  --yellow-hi:  #f8df7a;
  --coral:      #f29a86;
  --ink:        #14261c;

  --sc-canvas:     var(--wall);
  --sc-surface:    var(--wall-deep);
  --sc-ink:        var(--cream);
  --sc-ink-soft:   var(--cream-soft);
  --sc-accent:     var(--yellow);
  --sc-accent-ink: var(--ink);
  --sc-font-display: "Familjen Grotesk", system-ui, sans-serif;
  --sc-font-text:    "Onest", system-ui, sans-serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --section: clamp(5rem, 11vw, 10rem);

  /* hero type: sized to the screen, in both directions */
  --maxw: clamp(100rem, 62vw, 140rem);
  --edge: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  --mega: min(6.4vw, 11vh, calc((var(--maxw) - 2 * var(--gutter)) / 14));
  --mega-lines: 4;
  --head-top: clamp(5.25rem, 12vh, 7.5rem);
}

html { scrollbar-gutter: stable; font-synthesis-weight: none; }
body { font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); line-height: 1.55; }
h1, h2, h3, p { margin: 0; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }

.display {
  font-family: var(--sc-font-display);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.display--xl { font-size: clamp(2.6rem, 1.2rem + 5.6vw, 6.25rem); line-height: 0.94; letter-spacing: -0.045em; max-width: 13ch; }
.mega {
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: var(--mega);
  line-height: 0.9;
  letter-spacing: -0.05em;
}
.lede { font-size: clamp(1.125rem, 1.02rem + 0.5vw, 1.4375rem); line-height: 1.42; max-width: 33rem; color: var(--cream); }
.hand { font-family: "Gochi Hand", cursive; font-weight: 400; line-height: 1.02; }

/* reveals: further and firmer than the engine default */
/* hidden only when script is running (the js class is set in the head), so the page reads without it */
.js [data-sc-in], .js [data-sc-stagger] > * {
  transform: translate3d(0, 44px, 0);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.5rem; padding: 0.8rem 1.7rem;
  background: var(--yellow); color: var(--ink);
  font-weight: 700; font-size: 1.125rem; text-decoration: none;
  border: 0; border-radius: 6px; font-family: inherit; cursor: pointer;
  transition: background-color 450ms var(--ease), transform 450ms var(--ease);
}
.btn:hover { background: var(--yellow-hi); transform: translateY(-3px); transition-duration: 150ms; }
.btn:active { transform: scale(0.97); transition-duration: 100ms; }
.btn--ink { background: var(--ink); color: var(--cream); }
.btn--ink:hover { background: #244634; }
.textlink { color: var(--cream); font-weight: 600; text-underline-offset: 0.25em; transition: color 300ms; }
.textlink:hover { color: var(--yellow); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }

/* -------------------------------------------------------------------- bar */
.bar {
  position: absolute; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.5rem var(--edge);
  animation: fade 900ms var(--ease) 100ms both;
}
.mark { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--cream); text-decoration: none;
  font-family: var(--sc-font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; }
.bar__nav { display: flex; gap: 2rem; }
.bar__nav a { color: var(--cream); text-decoration: none; font-weight: 600; font-size: 1rem; transition: color 300ms; }
.bar__nav a:hover { color: var(--yellow); }
.bar__actions, .menu { display: none; }

/* ------------------------------------------------------------------- hero */
.hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 58% 70% at 10% 62%, var(--wall) 0%, color-mix(in oklab, var(--wall) 90%, transparent) 50%, transparent 100%); }
.hero__seam {
  position: absolute; inset: auto 0 0 0; height: 30%; z-index: 2; pointer-events: none;
  /* eased stops: on the bare wall a straight ramp shows its top edge as a band */
  background: linear-gradient(to bottom, transparent, color-mix(in oklab, var(--wall) 10%, transparent) 30%, color-mix(in oklab, var(--wall) 38%, transparent) 60%, var(--wall));
}

.hero__head { top: var(--head-top); left: var(--edge); right: var(--edge); max-width: none; z-index: 20; }
.mega .line { white-space: nowrap; display: block; overflow: clip; padding-block: 0.08em; margin-block: -0.08em; }
.mega .line > span { display: block; animation: rise 1100ms var(--ease) both; animation-delay: calc(var(--l) * 110ms + 150ms); }

.hero__sub {
  top: calc(var(--head-top) + var(--mega) * 0.9 * var(--mega-lines) + clamp(2rem, 5vh, 3.5rem));
  left: var(--edge); z-index: 30; max-width: min(34rem, 43vw);
  animation: fade-up 1000ms var(--ease) 650ms backwards;
}
.hero__sub > * + * { margin-top: 1.5rem; }
.hint { font-family: "Gochi Hand", cursive; font-weight: 400; font-size: 1.6rem; line-height: 1.1; color: var(--yellow); rotate: -1.5deg; transform-origin: 0 50%; }

.hero__after { top: 50%; translate: 0 -50%; left: var(--edge); max-width: none; z-index: 20; }
.mega--after { font-size: min(7.6vw, 15vh, calc(var(--mega) * 0.8)); line-height: 0.92; white-space: nowrap; }
.hero__after > * + * { margin-top: 1.75rem; }

/* the notes in front of the type, heaped over the keeper (site.js places them, GD1) */
.pile { position: absolute; inset: 0; z-index: 25; pointer-events: none; }
.pnote {
  --t: clamp(0, calc((var(--sc-p, 0) - var(--s)) / 0.2), 1);
  position: absolute;
  width: clamp(7rem, 12.2vw, max(12rem, var(--mega) * 1.15)); aspect-ratio: 1;
  transform:
    translate3d(0, calc(var(--t) * var(--t) * 135vh), 0)
    rotate(calc(var(--r) + var(--t) * 38deg));
  will-change: transform;
}
.pnote__paper {
  width: 100%; height: 100%;
  display: flex; align-items: center;
  padding: 11%;
  color: var(--ink);
  border-radius: 2px 2px 3px 2px;
  background-image: linear-gradient(168deg, rgb(255 255 255 / 0.28) 0%, rgb(255 255 255 / 0) 42%, rgb(40 30 0 / 0.1) 100%);
  box-shadow: 0 1px 1px rgb(6 22 14 / 0.25), 0 16px 22px -10px rgb(6 22 14 / 0.7);
}
.pnote__paper .hand { font-size: clamp(1.1rem, 1.6vw, max(1.7rem, var(--mega) * 0.19)); }
.pnote.pnote--off { display: none; }  /* not needed for the pile at this size (site.js) */
/* site.js places the pile and the keeper once the fonts are in, so nothing jumps */
.js .sc-stage:not(.is-placed) :is(.pile, .keeper) { visibility: hidden; }
.note--yellow { background-color: var(--yellow); }
.note--white  { background-color: var(--cream); }
.note--coral  { background-color: var(--coral); }

/* the wall: a bare still, and the rendered notes on it (site.js lays them out) */
.hero__wall { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.field { position: absolute; inset: 0; z-index: 3; pointer-events: none; transition: opacity 600ms var(--ease); }
.js .field { opacity: 0; }
.field.is-on { opacity: 1; }
.fnote {
  --t: clamp(0, calc((var(--sc-p, 0) - var(--s)) / 0.2), 1);
  position: absolute; aspect-ratio: 1;
  border-radius: 1px 1px 2px 1px;
  /* t squared: every note takes the same 0.2 of progress, accelerating like a drop */
  transform:
    translate3d(calc(var(--t) * var(--dx) * 1px), calc(var(--t) * var(--t) * 130vh), 0)
    rotate(calc(var(--r) + var(--t) * var(--spin)));
  box-shadow: 0 1px 1px rgb(6 22 14 / 0.35), 0 3px 5px -2px rgb(6 22 14 / 0.5);
  background-size: 100% 100%;
  will-change: transform;
  contain: layout paint;
}
/* a faint scribble so from a distance it reads as handwriting; three hands.
   Sheen and scribble are ONE image: two background layers made Chrome repaint
   every note on every frame of the fall (measured), one layer does not. */
.fnote--a { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0.4' y1='0' x2='0.6' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.22'/%3E%3Cstop offset='.45' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23281e00' stop-opacity='.1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='100' height='100' fill='url(%23g)'/%3E%3Cg fill='none' stroke='%23241f14' stroke-opacity='.3' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M18 34c6-4 9 3 15-1s8 2 14-2 9 3 15 0 7 1 12-1'/%3E%3Cpath d='M17 51c5-3 10 2 16-1s9 3 15-1 8 2 13 0'/%3E%3Cpath d='M18 68c6-2 8 2 14-1s7 2 11 0'/%3E%3C/g%3E%3C/svg%3E"); }
.fnote--b { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0.4' y1='0' x2='0.6' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.22'/%3E%3Cstop offset='.45' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23281e00' stop-opacity='.1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='100' height='100' fill='url(%23g)'/%3E%3Cg fill='none' stroke='%23241f14' stroke-opacity='.3' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M20 40c5-3 8 2 13-1s9 2 14-1 10 3 16 0'/%3E%3Cpath d='M19 58c6-3 9 3 15 0s8 1 13-1'/%3E%3C/g%3E%3C/svg%3E"); }
.fnote--c { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0.4' y1='0' x2='0.6' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.22'/%3E%3Cstop offset='.45' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23281e00' stop-opacity='.1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='100' height='100' fill='url(%23g)'/%3E%3Cg fill='none' stroke='%23241f14' stroke-opacity='.3' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M22 30c4-2 7 2 11 0s6 1 9-1'/%3E%3Cpath d='M18 47c6-4 9 2 15-1s8 3 14-1 9 2 15 0'/%3E%3Cpath d='M18 63c5-2 9 3 14 0s9 2 15-1 6 1 10 0'/%3E%3C/g%3E%3C/svg%3E"); }
/* sampled from the photographed pile, lifted a little out of its shade */
.fy1 { background-color: #ebcb5e; }
.fy2 { background-color: #f0d983; }
.fy3 { background-color: #e2bb4b; }
.fc1 { background-color: #efe5c6; }
.fc2 { background-color: #e7d9b2; }
.fo1 { background-color: #f29a86; }
.fo2 { background-color: #f29a86; }

/* the note that stays: under the pile (GD1b), never falls; site.js places it */
.keeper {
  --kw: clamp(8.5rem, 10.5vw, max(12rem, var(--mega) * 1.15));
  position: absolute; z-index: 24;
  width: var(--kw); aspect-ratio: 1;
  rotate: 6deg;
}
.keeper__paper {
  width: 100%; height: 100%;
  display: flex; align-items: center;
  padding: 12%;
  color: var(--ink);
  background-color: #ebcb5e;
  border-radius: 2px 2px 3px 2px;
  background-image: linear-gradient(168deg, rgb(255 255 255 / 0.28) 0%, rgb(255 255 255 / 0) 42%, rgb(40 30 0 / 0.1) 100%);
  box-shadow: 0 1px 1px rgb(6 22 14 / 0.3), 0 12px 18px -9px rgb(6 22 14 / 0.65);
}
.keeper .hand { font-size: calc(var(--kw) * 0.175); }

@keyframes rise    { from { transform: translateY(112%); } }
@keyframes fade    { from { opacity: 0; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(26px); } }
@keyframes slap    { from { opacity: 0; transform: translateY(-46px) scale(1.28); } }
@keyframes arrive  { from { opacity: 0; transform: translateY(10px); } }

/* selected text must show on the yellow and paper blocks too */
.start__lead ::selection, .letter ::selection { background: var(--ink); color: var(--yellow); }
.start__rest ::selection, .paper ::selection { background: var(--ink); color: var(--cream); }

/* ------------------------------------------------------------------ start */
.start__lead { background: var(--yellow); color: var(--ink); padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(3rem, 6vw, 5.5rem); }
.start__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.start__figure { container-type: inline-size; }
.start__title { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; max-width: 22ch; }
.figure {
  font-family: var(--sc-font-display); font-weight: 700;
  font-size: min(39cqw, 24rem); line-height: 0.82; letter-spacing: -0.065em;
  margin-top: clamp(1rem, 3vw, 2.5rem); margin-left: -0.04em;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.figure__note { margin-top: clamp(1rem, 2vw, 1.75rem); font-weight: 700; font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); }
.start__tag { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); }
.start__detail > p:not(.hand) { max-width: 48ch; }
.start__detail h3, .block h3 { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.25rem); line-height: 1.08; letter-spacing: -0.03em; margin-top: 0.35rem; }
.start__detail p + p, .block p + p { margin-top: 0.9rem; }
.start__detail h3 + p { margin-top: 1.25rem; }
.start__detail .btn { margin-top: 1.75rem; }
.start__detail .start__ask { margin-top: 1rem; font-size: 1rem; }

.start__rest { display: grid; grid-template-columns: 1fr 1fr; }
.block { background: var(--cream); color: var(--ink); padding: clamp(2.5rem, 5vw, 5rem) var(--gutter);
  padding-left: var(--edge); display: flex; flex-direction: column; }
.block--b { background: var(--cream-b); padding-left: var(--gutter); padding-right: var(--edge); }
.figure--md { font-size: clamp(3.4rem, 7.4vw, 7rem); line-height: 0.9; letter-spacing: -0.055em; margin-block: clamp(1.25rem, 2.5vw, 2rem); margin-left: 0; }
.figure--md small { font-family: var(--sc-font-text); font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); font-weight: 600; letter-spacing: 0; }
.block > p:not(.figure):not(.hand) { max-width: 30rem; }
.block .block__foot { margin-top: auto; padding-top: 1.75rem; font-weight: 700; }
.block--wide { grid-column: 1 / -1; padding-right: var(--edge); border-bottom: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); }
.block--wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gutter); grid-auto-flow: row dense; align-content: start; }
.block--wide > .block__head { grid-column: 1; grid-row: 1 / span 2; }
.block--wide > p:not(.figure):not(.hand) { grid-column: 2; max-width: 34rem; }
.block--wide > p:not(.figure):not(.hand):first-of-type { margin-top: 3.4rem; }

/* ----------------------------------------------------------------- chores */
.aside { margin-top: 1.5rem; color: var(--cream-soft); max-width: 40rem; }
.chores { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.chore {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(1.25rem, 5vw, 5rem); align-items: center;
  padding-block: clamp(1.75rem, 3.4vw, 3rem);
  border-top: 2px solid rgb(247 241 220 / 0.22);
}
.chore:last-child { border-bottom: 2px solid rgb(247 241 220 / 0.22); }
.chore .hand { font-size: clamp(2.1rem, 1.3rem + 3.2vw, 4.25rem); color: var(--yellow); rotate: -1.2deg; transform-origin: 0 50%; }
.chore:nth-child(even) .hand { color: var(--coral); rotate: 0.8deg; }
.chore > p:last-child { font-size: clamp(1.125rem, 1.02rem + 0.5vw, 1.4375rem); line-height: 1.42; color: var(--cream); max-width: 36rem; }
/* the chore is crossed out once its row is in the upper half of the screen
   (site.js), so it can be read first; the entrance (data-sc-in) is separate */
.chore .hand span {
  background: linear-gradient(var(--cream), var(--cream)) no-repeat 0 60% / 0% 2px;
  transition: background-size 900ms var(--ease) 400ms;
}
.chore.is-done .hand span { background-size: 100% 2px; }

/* ---------------------------------------------------------------- control */
.paper { background: var(--cream); color: var(--ink); }
.control { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.control .display { max-width: 9ch; }
.control__intro { margin-top: 1.75rem; font-size: clamp(1.125rem, 1.02rem + 0.5vw, 1.4375rem); line-height: 1.42; max-width: 26rem; }
/* focus rings: yellow on the wall, ink on the yellow, cream and coral surfaces (the ring is drawn on the surface, offset 3px) */
.start__lead :focus-visible, .letter :focus-visible, .paper :focus-visible, .block :focus-visible,
.note--yellow :focus-visible, .note--white :focus-visible, .note--coral :focus-visible, .keeper :focus-visible { outline-color: var(--ink); }
.close :focus-visible { outline-width: 3px; }
main[tabindex="-1"]:focus { outline: none; }
.dial__note { margin-top: 1.5rem; max-width: 38rem; }
.dial__note + .dial__note { padding-top: 1.5rem; border-top: 2px solid rgb(20 38 28 / 0.25); }

/* -------------------------------------------------------------------- who */
.who { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.who .display { max-width: 8ch; }
.note { color: var(--ink); border-radius: 2px; }
.letter {
  padding: clamp(1.75rem, 3.6vw, 3.25rem); rotate: 1.4deg;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
  background-image: linear-gradient(168deg, rgb(255 255 255 / 0.28) 0%, rgb(255 255 255 / 0) 42%, rgb(40 30 0 / 0.1) 100%);
  box-shadow: 0 1px 1px rgb(6 22 14 / 0.25), 0 30px 40px -18px rgb(6 22 14 / 0.7);
}
.letter p + p { margin-top: 1rem; }
.letter .letter__sign { font-size: clamp(2.25rem, 1.5rem + 2vw, 3rem); margin-top: 1.5rem; }
.letter a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.who__story p + p { margin-top: 0.75em; }
@media (min-width: 861px) { .who .lede, .who .who__story, .who .letter { grid-column: 2; } }

/* -------------------------------------------------------------------- faq */
.faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.faq .display { max-width: 9ch; }
.faq details { border-top: 2px solid rgb(247 241 220 / 0.28); }
.faq details:last-child { border-bottom: 2px solid rgb(247 241 220 / 0.28); }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding-block: 1.5rem;
  font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem); line-height: 1.15; letter-spacing: -0.02em;
  transition: color 300ms;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 2rem; font-weight: 400; color: var(--yellow); transition: rotate 400ms var(--ease); }
.faq details[open] summary::after { rotate: 45deg; }
.faq summary:hover { color: var(--yellow); }
.faq details p { padding-bottom: 1.5rem; max-width: 38rem; color: var(--cream); }

/* ------------------------------------------------------------------ close */
.close { position: relative; isolation: isolate; min-height: 100svh; display: flex; align-items: center; overflow: clip; padding-block: clamp(3rem, 8vh, 6rem); }
.close__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.close::before { content: ""; position: absolute; inset: 0 0 auto 0; height: min(22%, 8rem); background: linear-gradient(to bottom, var(--wall), transparent); }
.close__inner { width: 100%; padding-inline: var(--edge); }
.mega--close { font-size: min(11.4vw, 24vh, calc(var(--mega) * 1.15)); }
.close__inner > * + * { margin-top: 1.75rem; }
.close__inner .actions { margin-top: 2.25rem; }
.close__inner .lede a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }

.foot { background: var(--wall-deep); color: var(--cream-soft); font-size: 1rem; }
.foot__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; padding-block: 1.75rem; }
.foot__inner span { overflow-wrap: anywhere; }
.email { color: inherit; text-decoration: none; display: inline-block; line-height: 0; border-bottom: 0.06em solid currentColor; vertical-align: -0.18em; -webkit-user-drag: none; user-select: text; -webkit-user-select: text; }
.email__svg { display: block; height: 1.303em; width: auto; margin-bottom: -0.183em; }
.email__select { fill: transparent; direction: ltr; font-family: "Onest", sans-serif; font-weight: 400; font-kerning: none; font-variant-ligatures: none; letter-spacing: 0; white-space: pre; }
.email__select::selection { fill: var(--sc-accent-ink); background: var(--sc-accent); }

/* ------------------------------------------------------------ small screens */
@media (max-width: 860px) {
  .start__detail .btn { width: 100%; }
  :root { --mega: 8.8vw; --mega-lines: 4; --head-top: 4.75rem; }
  .bar__nav { display: none; }
  .hero__scrim { background: linear-gradient(to bottom, var(--wall) 0%, color-mix(in oklab, var(--wall) 94%, transparent) 60%, transparent 78%); }
  .hero__sub { right: var(--gutter); max-width: none; }
  .hero__sub > * + * { margin-top: 1.1rem; }
  .hero__after { top: 4.75rem; translate: none; right: var(--gutter); }
  .mega--after { font-size: 13vw; }
  .pnote { width: var(--pw, 6.6rem); }
  .pnote__paper .hand { font-size: min(1.15rem, calc(var(--pw, 6.6rem) * 0.174)); }
  .keeper { --kw: 6.6rem; }
  .start__grid { grid-template-columns: 1fr; align-items: start; }
  .figure { font-size: 39cqw; }
  .block, .block--b { padding-inline: var(--gutter); }
  .start__rest { grid-template-columns: 1fr; }
  .block--wide { display: flex; }
  .figure--md { font-size: 17vw; }
  .chore { grid-template-columns: 1fr; gap: 1rem; }
  .control, .who, .faq { grid-template-columns: 1fr; }
  .control .display, .who .display, .faq .display { max-width: 12ch; }
  .mega--close { font-size: 15.4vw; }
}

/* phone bar: logo, Book and a menu button. Fixed unless the screen is short and landscape. */
@media (max-width: 860px) {
  .js .bar__actions { display: flex; align-items: center; gap: 0.5rem; }
  .bar__book { min-height: 44px; padding: 0 1.1rem; font-size: 0.9375rem; line-height: 1; }
  .bar__book:hover { transform: none; }
  .bar__burger { width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--cream); cursor: pointer; }
  .bar__burger-icon, .bar__burger-icon::before, .bar__burger-icon::after { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 250ms var(--ease), background-color 250ms; }
  .bar__burger-icon { position: relative; }
  .bar__burger-icon::before, .bar__burger-icon::after { content: ""; position: absolute; left: 0; }
  .bar__burger-icon::before { top: -7px; }
  .bar__burger-icon::after { top: 7px; }
  .bar__burger[aria-expanded="true"] .bar__burger-icon { background: transparent; }
  .bar__burger[aria-expanded="true"] .bar__burger-icon::before { transform: translateY(7px) rotate(45deg); }
  .bar__burger[aria-expanded="true"] .bar__burger-icon::after { transform: translateY(-7px) rotate(-45deg); }

  .js .menu {
    display: flex; flex-direction: column; align-items: stretch; gap: 0.25rem;
    position: fixed; inset: 0; z-index: 55; overflow-y: auto;
    padding: calc(60px + env(safe-area-inset-top) + 1rem) var(--gutter) 2rem;
    background: var(--wall-deep);
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity 250ms var(--ease), transform 250ms var(--ease), visibility 0s 250ms;
  }
  .menu.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .menu a { display: flex; align-items: center; min-height: 56px; color: var(--cream); text-decoration: none;
    font-family: var(--sc-font-display); font-weight: 700; font-size: 1.75rem; letter-spacing: -0.02em;
    border-bottom: 1px solid rgb(247 241 220 / 0.12); }
  .menu__book { width: 100%; margin-top: 1.5rem; }
  html.menu-open { overflow: hidden; }
  .bar.is-open { background: var(--wall-deep); }

  /* no script: no menu button, the links sit in a plain row under the logo */
  html:not(.js) .bar { flex-wrap: wrap; row-gap: 0.25rem; }
  html:not(.js) .bar__nav { display: flex; flex-basis: 100%; flex-wrap: wrap; gap: 0 1.25rem; }
}
@media (max-width: 860px) and (orientation: portrait), (max-width: 860px) and (min-height: 42.01rem) {
  html.js { scroll-padding-top: 72px; }
  .js .bar, .js .bar.bar--page {
    position: fixed; inset: 0 0 auto 0; height: calc(60px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) var(--gutter) 0;
    border-bottom: 1px solid transparent; transition: background-color 250ms;
  }
  .bar.is-stuck { background: rgb(15 42 31 / 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom-color: rgb(247 241 220 / 0.12); }
  @supports not (backdrop-filter: blur(1px)) { .bar.is-stuck { background: var(--wall-deep); } }
  .js .bar--page + .menu + *, .js .bar--page + main { margin-top: calc(60px + env(safe-area-inset-top)); }
}
@media (max-width: 340px) { .bar .mark span { display: none; } }
/* the narrowest phones (280px): the Book buttons stay on one line (G4) */
@media (max-width: 300px) { .btn { padding-inline: 1rem; font-size: 1.0625rem; } }
/* short phones: a little less type in the pinned hero, so the pile still fits under the hint (GD1g, E3) */
@media (max-width: 860px) and (max-height: 780px) {
  .js .hero:not(.hero--flow) .hero__sub .lede { font-size: 1rem; line-height: 1.4; }
  .js .hero:not(.hero--flow) .hero__sub > * + * { margin-top: 0.9rem; }
  .js .hero:not(.hero--flow) .hint { font-size: 1.35rem; }
}
@media (max-width: 860px) and (max-height: 680px) {
  .js .hero:not(.hero--flow) .hero__sub { top: calc(var(--head-top) + var(--mega) * 0.9 * var(--mega-lines) + 1.25rem); }
  .js .hero:not(.hero--flow) .hero__sub > * + * { margin-top: 0.75rem; }
  .js .hero:not(.hero--flow) .hint { font-size: 1.25rem; }
  .pnote { width: var(--pw, 5.5rem); }
  .pnote__paper .hand { font-size: min(1.15rem, calc(var(--pw, 5.5rem) * 0.174)); }
  .keeper { --kw: 5.5rem; }
}
/* no room for the hint and the pile under the copy (site.js): the pile wins */
.hero--nohint .hint { display: none; }

/* Short screens: site.js adds hero--flow and the hero is an ordinary section.
   With no script the same layout applies (html:not(.js)), so nothing is pinned or hidden. */
:is(.hero--flow, html:not(.js) .hero) { height: auto !important; background: var(--wall); --mega: min(6.4vw, 3.25rem); }
:is(.hero--flow, html:not(.js) .hero) [data-sc-stage] { position: relative; height: auto; overflow: visible; padding: calc(60px + 1.5rem) var(--edge) 2.5rem; }
:is(.hero--flow, html:not(.js) .hero) :is(picture, .hero__wall, .hero__scrim, .hero__seam, .pile, .field, .hint, .keeper, .sc-stage__poster) { display: none; }
:is(.hero--flow, html:not(.js) .hero) :is(.hero__head, .hero__sub, .hero__after) { position: static; translate: none; max-width: none; opacity: 1 !important; transform: none !important; }
:is(.hero--flow, html:not(.js) .hero) .mega .line { white-space: normal; }
:is(.hero--flow, html:not(.js) .hero) .hero__after { margin-top: 2.5rem; }
:is(.hero--flow, html:not(.js) .hero) .mega--after { font-size: min(6vw, 2.5rem); white-space: normal; }
:is(.hero--flow, html:not(.js) .hero) .hero__sub { margin-top: 1.5rem; }
@media (max-width: 860px) { :is(.hero--flow, html:not(.js) .hero) { --mega: min(8.8vw, 3.25rem); } }
@media (min-width: 600px) {
  :is(.hero--flow, html:not(.js) .hero) { --flow-gap: 3rem; }
  :is(.hero--flow, html:not(.js) .hero) [data-sc-stage] { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.5rem var(--flow-gap); align-items: start; }
  :is(.hero--flow, html:not(.js) .hero) .hero__sub { margin-top: 0; }
  /* the same two columns again, so the keeper lands in the stack's column (F2b) */
  :is(.hero--flow, html:not(.js) .hero) .hero__after { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: var(--flow-gap); align-items: start; }
  :is(.hero--flow, html:not(.js) .hero) .hero__after > :not(.flowkeep) { grid-column: 1; }
  :is(.hero--flow, html:not(.js) .hero) .flowkeep { grid-column: 2; grid-row: 1 / -1; margin-top: 0; }
}
@media (min-width: 600px) and (max-width: 860px) {
  :is(.hero--flow, html:not(.js) .hero) { --flow-gap: 2rem; }
  :is(.hero--flow, html:not(.js) .hero) [data-sc-stage] { padding-top: calc(60px + 1rem); }
  :is(.hero--flow, html:not(.js) .hero) .lede { font-size: 1rem; line-height: 1.4; }
  :is(.hero--flow, html:not(.js) .hero) .btn { padding-inline: 1rem; white-space: nowrap; }
}
/* F2, only in the flow layout: a still stack that hides the keeper, and the keeper alone
   beside "What stays..." in the same spot of a box the same size (F2a, F2b) */
.flowbox { display: none; }
:is(.hero--flow, html:not(.js) .hero) .flowbox { display: block; position: relative; width: min(100%, 18rem); aspect-ratio: 18 / 16; }
:is(.hero--flow, html:not(.js) .hero) .flownotes { margin-top: 1.5rem; }
.flownote { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 34.44%; aspect-ratio: 1;
  display: flex; align-items: center; padding: 0.7rem; color: var(--ink); rotate: var(--r); border-radius: 2px 2px 3px 2px;
  background-image: linear-gradient(168deg, rgb(255 255 255 / 0.28) 0%, rgb(255 255 255 / 0) 42%, rgb(40 30 0 / 0.1) 100%);
  box-shadow: 0 1px 1px rgb(6 22 14 / 0.25), 0 12px 16px -9px rgb(6 22 14 / 0.7); }
.flownote--keeper { --x: 22.7; --y: 24.4; --r: 6deg; background-color: #ebcb5e; }
.flownote .hand { font-size: 0.95rem; line-height: 1.15; }
@media (min-width: 600px) {
  :is(.hero--flow, html:not(.js) .hero) .hero__head { grid-column: 1; grid-row: 1 / span 2; }
  :is(.hero--flow, html:not(.js) .hero) .hero__sub { grid-column: 2; grid-row: 1; }
  :is(.hero--flow, html:not(.js) .hero) .flownotes { grid-column: 2; grid-row: 2; margin-top: 0; }
}
@media (max-height: 42rem) { .close { min-height: 0; } }


@media (max-width: 360px) {
  .figure--md { white-space: normal; }
  .figure--md small { white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .pnote { transform: rotate(var(--r)); opacity: calc(1 - var(--t)); }
  .fnote { transform: rotate(var(--r)); opacity: calc(1 - var(--t)); }
}

/* skip link */
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: 0.7rem 1.1rem; background: var(--yellow); color: var(--ink); font-weight: 700; border-radius: 6px; }
.skip-link:focus { top: 1rem; }

/* ------------------------------------------------- plain pages (about, privacy, calculator, 404) */
.bar--page { position: relative; }
/* plain pages get the wall's light: brighter to the right, like the photographed wall behind the hero */
body:has(.bar--page) { background: radial-gradient(ellipse 70% 90% at 100% 35%, #46684d 0%, #31553a 40%, transparent 80%), linear-gradient(90deg, #1b3a2c 0%, #20412f 55%, #2a4d36 100%) fixed; }
.page { max-width: 68ch; margin-inline: auto; padding: clamp(2rem, 6vw, 4rem) var(--gutter) var(--section); font-family: var(--sc-font-text); color: var(--cream); line-height: 1.65; }
.page > * + *, .page .container > * + *, .page .article-container > * + * { margin-top: 1.25rem; }
.page h1, .page h2, .page h3 { font-family: var(--sc-font-display); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; color: var(--cream); text-wrap: balance; }
.page h1 { font-size: clamp(2.4rem, 1.4rem + 4vw, 4.25rem); }
.page h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem); margin-top: 2.5rem; }
.page h3 { font-size: 1.3rem; margin-top: 2rem; }
.page a:not(.btn) { color: var(--yellow); text-underline-offset: 0.2em; overflow-wrap: anywhere; }
.page a:not(.btn):hover { color: var(--yellow-hi); }
.page ul, .page ol { padding-left: 1.4rem; }
.page li + li { margin-top: 0.4rem; }
.page table { border-collapse: collapse; width: 100%; }
.page th, .page td { border: 1px solid rgba(247, 241, 220, 0.2); padding: 0.5rem 0.75rem; text-align: left; }
.page .kicker, .page__kicker, .page .last-updated, .page .location { font-family: "Gochi Hand", cursive; font-size: 1.5rem; font-weight: 400; color: var(--yellow); }
.page .container { max-width: none; padding: 0; }
.page .section { padding-block: 1.5rem; }
.page--center { text-align: center; }
.page__actions { display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; align-items: center; justify-content: center; }
.page:has(.calc-layout) { max-width: 72rem; }
/* first-meeting: facts as three notes, numbered step cards, the change terms on a note */
.page .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.25rem; margin-top: 2.5rem; }
.page .facts div, .page .change { color: var(--ink); border-radius: 2px 2px 3px 2px; background-image: linear-gradient(168deg, rgb(255 255 255 / 0.28) 0%, rgb(255 255 255 / 0) 42%, rgb(40 30 0 / 0.1) 100%); box-shadow: 0 1px 1px rgb(6 22 14 / 0.25), 0 24px 30px -14px rgb(6 22 14 / 0.6); }
.page .facts div { padding: 1.2rem 1.3rem 1.4rem; }
.page .facts div:nth-child(1) { background-color: var(--yellow); rotate: -1.2deg; }
.page .facts div:nth-child(2) { background-color: var(--cream-b); rotate: 0.8deg; }
.page .facts div:nth-child(3) { background-color: var(--coral); rotate: -0.6deg; }
.page .facts dt { font-size: 1.75rem; line-height: 1.1; }
.page .facts dd { margin: 0.35rem 0 0; line-height: 1.5; }
.page .steps { list-style: none; padding: 0; counter-reset: step; display: grid; gap: 1rem; }
.page .steps > li { counter-increment: step; position: relative; margin: 0; padding: 1.25rem 1.25rem 1.25rem 4.25rem; background: var(--wall-deep); border-radius: 0.75rem; }
.page .steps > li::before { content: counter(step); position: absolute; left: 1.25rem; top: 1.2rem; width: 2rem; height: 2rem; display: grid; place-items: center; border: 2px solid var(--yellow); border-radius: 50%; color: var(--yellow); font-family: var(--sc-font-display); font-weight: 700; line-height: 1; text-box: trim-both cap alphabetic; }
.page .steps h3 { margin: 0; font-size: 1.3rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }
.page .steps h3 span { font-family: var(--sc-font-text); font-size: 0.85rem; font-weight: 500; letter-spacing: 0; color: var(--yellow); }
.page .tasks { list-style: none; padding: 0; margin-top: 0.6rem; }
.page .tasks li { display: grid; grid-template-columns: 4.75rem 1fr; gap: 0.75rem; margin: 0; padding-block: 0.45rem; color: var(--cream-soft); }
.page .tasks li + li { margin-top: 0; border-top: 1px solid rgb(247 241 220 / 0.1); }
.page .tasks .who { font-family: "Gochi Hand", cursive; font-size: 1.15rem; line-height: 1.4; color: var(--coral); }
.page .change { margin-top: 3rem; padding: 1.4rem 1.5rem 1.6rem; background-color: var(--cream-b); rotate: 0.5deg; }
.page .change h2 { margin: 0; color: var(--ink); font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem); }
.page .change p { margin-top: 0.6rem; }
@media (max-width: 400px) { .page .steps > li { padding-left: 3.75rem; } .page .steps > li::before { left: 1rem; } .page .steps .tasks { margin-left: -2.75rem; } .page .tasks li { grid-template-columns: 1fr; gap: 0; } }
.page:has(.calc-layout) .container > p { max-width: 68ch; }
@media print { .bar, .foot, .skip-link { display: none; } }

/* tap targets on touch: bigger hit areas, same look */
@media (pointer: coarse) {
  .mark { min-height: 44px; padding-inline: 0.25rem; }
  .foot a:not(.email) { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 0.25rem; }
  .foot__inner { gap: 0 1.5rem; padding-block: 0.75rem; }
  .textlink, .letter a { display: inline-flex; align-items: center; min-height: 44px; }
  .email, .close__inner .lede a { position: relative; }
  .email::after, .close__inner .lede a::after { content: ""; position: absolute; inset: -13px -6px; }
  .email__svg { position: relative; z-index: 1; }
  .page p, .page li { line-height: 1.75; }
  .page li + li { margin-top: 0.6rem; }
}

/* control, variant A: three notes on the wall */
@media (min-width: 861px) {
  .control > div:first-child { grid-column: 1; grid-row: 1; }
  .dial { grid-column: 2; grid-row: 1; max-width: 46ch; align-self: end; }
  .dial__note:first-child { margin-top: 0; }
  .board { grid-column: 1 / -1; grid-row: 2; }
}
.board { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 1rem; align-items: center; width: fit-content; max-width: 100%; padding-top: 1rem; }
.notes { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 20rem)); gap: clamp(1.5rem, 3vw, 2.75rem); align-items: start; padding: 1.25rem 0 2rem; }
.snote {
  min-height: 14.5rem; padding: 1.6rem 1.6rem 1.75rem; color: var(--ink);
  border-radius: 2px 2px 3px 2px;
  background-image: linear-gradient(168deg, rgb(255 255 255 / 0.28) 0%, rgb(255 255 255 / 0) 42%, rgb(40 30 0 / 0.1) 100%);
  box-shadow: 0 1px 1px rgb(6 22 14 / 0.25), 0 24px 30px -14px rgb(6 22 14 / 0.6);
}
.snote.note--white { background-color: var(--cream-b); }
.snote:nth-child(1) { rotate: -1.8deg; translate: 0 0.35rem; }
.snote:nth-child(2) { rotate: 1.3deg; }
.snote:nth-child(3) { rotate: -1.1deg; translate: 0 0.75rem; }
.snote h3 { font-size: clamp(2rem, 1.6rem + 1.2vw, 2.75rem); font-weight: 400; letter-spacing: 0; }
.snote p:not(.hand) { margin-top: 0.6rem; font-size: 1.0625rem; line-height: 1.45; }
.board__from, .board__to { font-size: 1.5rem; white-space: nowrap; }
.board__from { rotate: -1.5deg; }
.board__to { rotate: 1deg; }
.board__line { position: relative; height: 2px; background: var(--ink); rotate: -0.35deg; }
.board__arrow { position: absolute; right: -4px; top: 50%; translate: 0 -50%; max-width: none; color: var(--ink); }
@media (max-width: 860px) {
  .board { grid-template-columns: 1.25rem minmax(0, 1fr); column-gap: 1rem; row-gap: 1rem; align-items: start; }
  .notes { grid-column: 2; grid-row: 2; grid-template-columns: minmax(0, 22rem); padding: 0.5rem 0 0.25rem; }
  .snote { min-height: 0; }
  .snote:nth-child(1), .snote:nth-child(3) { translate: none; }
  .board__from { grid-column: 2; grid-row: 1; }
  .board__to { grid-column: 2; grid-row: 3; }
  .board__line { grid-column: 1; grid-row: 1 / 4; align-self: stretch; height: auto; width: 2px; justify-self: center; margin-block: 0.9rem 0.75rem; rotate: 0.5deg; }
  .board__arrow { right: auto; top: auto; left: 50%; bottom: -4px; translate: -50% 0; rotate: 90deg; }
}