/* Magpie's page. One idea, five colour fields, and the bookmark shape holding them together.
   Z-order from DIRECTION.md: furniture 1, collectibles 2, peek bird 3, sign-up 4, flying bird 40,
   carried thing 41, notch 60, cursor effects 70. Sections never make a stacking context. */

@font-face {
  font-family: Nunito;
  src: url("../assets/fonts/Nunito.woff2") format("woff2"), url("../assets/fonts/Nunito.ttf") format("truetype");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

/* The handwriting. Served from here, not Google, so the page asks nothing of anyone else.
   One variable file covers both weights; latin-ext only loads if a note needs it. */
@font-face {
  font-family: Caveat;
  src: url("../assets/fonts/Caveat-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  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: Caveat;
  src: url("../assets/fonts/Caveat-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Until Nunito arrives, this stands in at the same measure, so no line breaks differently, nothing
   wraps and nothing jumps when it swaps. */
@font-face {
  font-family: "Nunito Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Arial");
  font-weight: 200 1000;
  size-adjust: 96.6%;
  ascent-override: 104.7%;
  descent-override: 36.5%;
  line-gap-override: 0%;
}

:root {
  --font-sans: Nunito, "Nunito Fallback", ui-rounded, system-ui, sans-serif;
  /* The app icon's own field. */
  --icon-leaf-top: #5eb27a;
  --icon-leaf-bottom: #2c774a;

  --gutter: max(clamp(16px, 3vw, 72px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --edge-v: clamp(52px, 11vw, 300px);
  --bar-h: clamp(60px, 5.4vw, 88px);

  /* Colour fields. Each section is one of these, full bleed. */
  --field-grave: color-mix(in srgb, var(--art-shadow) 55%, var(--art-x-low));
  --field-sky: color-mix(in srgb, var(--sticky-sky) 34%, var(--art-trail-blue));
  --on-sky-bar: color-mix(in srgb, var(--paper) 46%, transparent);
  --field-board: var(--paper-sand);
  --dot-board: var(--dot-sand);
  --on-grave: var(--art-paper-hi);
  --on-sky: var(--magpie);
  --on-leaf-field: var(--art-paper-hi);
  --ledge-tile: 8px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --field-grave: var(--edge);
    /* Evening's own warm dark, with only a trace of the far wing's blue in it. Never grey. */
    --field-sky: color-mix(in srgb, var(--paper) 95%, var(--magpie-blue));
    --on-sky: var(--art-paper-hi);
    --on-sky-bar: color-mix(in srgb, var(--paper-deep) 70%, transparent);
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
  background: var(--paper);
  scroll-padding-top: 24px;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.4;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }

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

:focus-visible {
  outline: 3px solid var(--leaf);
  outline-offset: 3px;
  border-radius: 8px;
}
.grave :focus-visible, .foot :focus-visible { outline-color: var(--art-butter-mid); }
/* On the sky and the leaf, gold and leaf both fade into the field. Near-black holds on both. */
.sky :focus-visible, .finale :focus-visible { outline-color: var(--art-x-low); }
@media (prefers-color-scheme: dark) { .sky :focus-visible { outline-color: var(--art-butter-mid); } }

.skip {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 80;
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  background: var(--card);
  box-shadow: var(--shadow-press);
  color: var(--ink);
  font-weight: 800;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

.nowrap { position: relative; white-space: nowrap; }

/* ---------------------------------------------------------------- Type */

.display {
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.92;
  font-kerning: normal;
  font-variant-ligatures: none;
}
/* At this tracking the f's hook runs into the dot of the i. */
.kern-f { letter-spacing: 0.012em; }

.lede {
  font-size: clamp(19px, 1.85vw, 34px);
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}

.note {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(25px, 2.5vw, 44px);
  line-height: 1;
  color: var(--ink-muted);
}

/* The exact places the bird can stand on a line of giant type. They sit on the letters' tops,
   in ems, so they hold at every size. Positions are the letters' measured tops. */
.word { position: relative; display: inline-block; white-space: nowrap; }
.perch {
  position: absolute;
  left: var(--x, 0);
  top: var(--t, 0);
  width: var(--w, 1em);
  height: 1px;
  pointer-events: none;
}

/* ---------------------------------------------------------------- The bar */

.bar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 4;
  height: var(--bar-h);
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  pointer-events: none;
}
.bar > * { pointer-events: auto; }

.bar__mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 900;
  font-size: clamp(20px, 1.6vw, 26px);
  letter-spacing: -0.03em;
  text-decoration: none;
}
.bar__mark svg { width: auto; height: clamp(26px, 2.2vw, 32px); }
.bar__mark { min-height: 44px; }

/* ---------------------------------------------------------------- Fields */

.page { position: relative; }

.field { position: relative; }

/* The hairline the bird gets where it crosses a headline. Only where the letters are darker than it. */
.hero { --bird-halo: var(--paper); }
.sky { --bird-halo: var(--field-sky); }
.boardland { --bird-halo: var(--field-board, var(--paper-deep)); }

/* A section's top edge, cut from the bookmark: the V of its notch. */
.edge {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
  display: block;
  pointer-events: none;
}
.edge--v, .edge--leaf, .edge--deep {
  top: calc(var(--edge-v) * -1 + 1px);
  height: var(--edge-v);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* The sheet: paper with a ledge. signup.css dresses the form itself. */
.sheet { width: 100%; }
.sheet__note { margin-top: 10px; font-size: 14px; color: var(--ink-muted); }

/* What you last picked up, resting in the dome while the bird is out. */
.hero__keep {
  position: absolute;
  z-index: 2;
  left: 14%;
  right: 14%;
  top: 5%;
  height: 43.5%;
  pointer-events: none;
}
.hoard-window-piece {
  position: absolute;
  bottom: -12%;
  transform-origin: 50% 100%;
}
/* While the bird is out and nothing has been picked up, the empty window says what it's for. */
.hero__keep::before {
  content: "your things go here";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10%;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(22px, 2.3vw, 42px);
  line-height: 1;
  text-align: center;
  color: var(--on-leaf-field);
  opacity: 0;
  transition: opacity 120ms var(--ease-out);
}
html.has-bird:not([data-bird-state="peeking"]) .hero__keep:empty::before { opacity: .92; transition: opacity 240ms var(--ease-out) 300ms; }

/* A bookmark as a window, in the icon's leaf. */
.window { overflow: visible; }
.window__face { fill: url(#icon-leaf); }
.window__ledge { fill: var(--art-leaf-low); }

/* Where the icon bird comes up. bird.js draws in here. */
.peek {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

/* ---------------------------------------------------------------- Things you can pick up */

.thing {
  position: relative;
  display: block;
  color: var(--ink);
  font-family: var(--font-sans);
  text-align: left;
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: 0 4px 0 var(--edge), 0 12px 26px color-mix(in srgb, var(--art-shadow) 16%, transparent);
  transition: translate 140ms var(--ease-out);
  z-index: 2;
}
@media (hover: hover) and (pointer: fine) {
  .thing:hover { translate: 0 -3px; }
}

.thing small { display: block; color: var(--ink-muted); font-size: 0.8em; font-weight: 600; }
.thing b { font-weight: 800; }

.thing--post { padding: 0.95em 1.05em 1.1em; font-size: clamp(15px, 1.2vw, 30px); line-height: 1.28; }
.thing--post p { font-weight: 600; margin-top: 0.55em; color: var(--ink); }
.thing__who { display: flex; align-items: center; gap: 0.6em; line-height: 1.15; }
.thing__face {
  flex: none;
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  background: var(--sticky-sky-edge);
}
.thing__face--leaf { background: var(--art-leaf-mid); }
.thing__face--clay { background: var(--art-thumb-hi); }
.thing__face--sky { background: var(--art-trail-blue); }
.thing__face--butter { background: var(--art-butter-mid); }

.thing--video { padding: 0.55em 0.55em 0.8em; font-size: clamp(14px, 1.1vw, 28px); line-height: 1.2; }
.thing--video b { display: block; padding: 0.55em 0.35em 0.1em; text-wrap: balance; }
.thing--video small { padding: 0 0.35em; }
.thing__thumb {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  border-radius: calc(var(--radius-lg) - 8px);
  background: linear-gradient(150deg, var(--art-thumb-hi), var(--art-thumb-mid) 55%, var(--art-thumb-low));
}
.thing__thumb--leaf { background: linear-gradient(150deg, var(--art-leaf-hi), var(--art-leaf-mid) 55%, var(--art-leaf-low)); }
.thing__play {
  width: 2.6em;
  height: 2.6em;
  border-radius: 50%;
  background: var(--art-paper-hi);
  position: relative;
}
.thing__play::after {
  content: "";
  position: absolute;
  left: 38%;
  top: 28%;
  border-style: solid;
  border-width: 0.58em 0 0.58em 0.92em;
  border-color: transparent transparent transparent var(--art-thumb-mid);
}
.thing__thumb--leaf .thing__play::after { border-left-color: var(--art-leaf-low); }

.thing--sticky {
  padding: 1em 1em 1.3em;
  font-size: clamp(16px, 1.3vw, 32px);
  font-weight: 800;
  line-height: 1.18;
  color: var(--sticky-ink);
  background: var(--sticky-butter);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 0 var(--sticky-butter-edge), 0 12px 24px color-mix(in srgb, var(--art-shadow) 14%, transparent);
}

/* ---------------------------------------------------------------- 1. Hero */

.hero {
  --title: clamp(62px, min(14.7vw, 25.5svh), 420px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, min(39vw, 72svh), 1000px);
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(16px, 3vw, 64px);
  min-height: calc(100svh + var(--edge-v) * 0.62);
  padding: calc(var(--bar-h) + 4px) var(--gutter) calc(var(--edge-v) * 0.72);
  background-color: var(--paper);
  background-image: radial-gradient(circle, var(--dot) 1.7px, transparent 1.9px);
  background-size: 26px 26px;
  background-position: 50% 0;
}

.hero__title {
  grid-column: 1 / -1;
  grid-row: 1;
  position: relative;
  z-index: 2;
  font-size: var(--title);
  color: var(--magpie);
  pointer-events: none;
}
.hero__title button { pointer-events: auto; }
.hero__title .word--keep { margin-left: -0.035em; }
.hero__title .word--you { margin-left: -0.02em; }

@media (prefers-color-scheme: dark) {
  .hero__title { color: var(--ink); }
}

/* The headline's full stop is a real one, with a gold coin lying on top of it. Take the coin
   and the sentence still ends. */
.stop { position: relative; display: inline-block; }
.stop__coin, .stop__coin.hoard-trinket {
  --size: calc(var(--title) * 0.36);
  position: absolute;
  left: 58%;
  bottom: calc(var(--title) * 0.062);
  width: var(--size);
  height: var(--size);
  translate: -50% 0;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  rotate: -8deg;
}
.stop__coin img { width: 100%; height: auto; }
.stop__coin .hoard-trinket__shadow { display: none; }

.hero__lede {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  z-index: 2;
  max-width: 32ch;
  margin-top: clamp(16px, 1.8vw, 36px);
}

.hero__stage {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: start;
  position: relative;
  aspect-ratio: 380 / 492;
  margin-top: calc(var(--title) * 0.86);
}
.hero__window { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.peek--hero { left: 14%; right: 14%; top: 5%; height: 43.5%; }
/* A touch wider than the bookmark, so the form fits on one line and the whole of it, button
   included, sits above the fold. The bookmark's V shows below it. */
.hero__stage .sheet {
  position: absolute;
  left: -3%;
  right: -3%;
  width: auto;
  top: 47%;
}
[data-signup].sheet .su-field { flex-basis: 220px; }
.hero__stage [data-signup] { --su-type: clamp(16px, 1.3vw, 22px); }

/* The table: what's lying on the paper. */
.hero__table {
  grid-column: 1;
  grid-row: 3;
  position: relative;
  min-height: clamp(300px, 26vw, 620px);
  margin-top: clamp(14px, 1.6vw, 32px);
}
.table__post { position: absolute; left: 9%; top: 4%; width: 37%; min-width: 220px; rotate: -3deg; }
.table__video { position: absolute; left: 47%; top: 13%; width: 29%; min-width: 180px; rotate: 2.5deg; }
.table__sticky { position: absolute; left: 74%; top: 0; width: 25%; min-width: 136px; rotate: -3.5deg; }
.trinket { appearance: none; background: none; border: 0; padding: 0; font: inherit; }
.trinket img { width: 100%; height: auto; }
.trinket.table__button, .table__button.hoard-trinket { --size: clamp(70px, 7.4vw, 148px); --r: 12deg; position: absolute; left: 30%; top: 60%; width: var(--size); height: var(--size); rotate: var(--r); }
.trinket.table__marble, .table__marble.hoard-trinket { --size: clamp(64px, 6.4vw, 128px); position: absolute; left: 66%; top: 68%; width: var(--size); height: var(--size); }
.table__note {
  position: absolute;
  left: 72%;
  top: -26%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  rotate: -3deg;
  white-space: nowrap;
  pointer-events: none;
}
.table__note svg {
  flex: none;
  width: clamp(40px, 3.4vw, 64px);
  height: auto;
  margin-left: 12%;
  transform: rotate(-62deg);
}

@media (max-width: 959px) {
  .hero__stage .sheet { left: 7%; right: 7%; }
  .hero {
    --title: clamp(62px, 18.9vw, 180px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    min-height: 0;
  }
  .hero__title, .hero__lede, .hero__stage, .hero__table { grid-column: 1; grid-row: auto; }
  .hero__lede { max-width: 36ch; }
  .hero__stage {
    justify-self: center;
    width: min(100%, 560px);
    margin: clamp(20px, 5vw, 44px) 0 0;
    align-self: auto;
  }
  .hero__table { margin-top: clamp(32px, 6vw, 60px); min-height: clamp(380px, 62vw, 520px); }
  .table__post { left: 0; width: min(70%, 340px); }
  .table__video { left: auto; right: 0; top: 34%; width: min(56%, 280px); }
  .table__sticky { left: 2%; top: 62%; width: min(42%, 200px); }
  .trinket.table__button, .table__button.hoard-trinket { left: 7%; top: 41%; }
  .trinket.table__marble, .table__marble.hoard-trinket { left: 82%; top: 4%; }
  .table__note { left: 0; right: auto; top: 94%; align-items: flex-start; }
  .table__note svg { display: none; }
}

/* A phone: two lines of headline and a smaller arch, so the button is on the first screen. */
@media (max-width: 639px) {
  .hero { --title: 18.6vw; padding-top: calc(var(--bar-h) - 6px); }
  .hero__lede { margin-top: 10px; font-size: 17px; }
  .hero__stage { width: 76%; margin: 0 auto; margin-top: 10px; }
  .hero__stage .sheet { left: -16%; right: -16%; top: 40%; }
  .peek--hero, .hero__keep { left: 19%; right: 19%; top: 3%; height: 37%; }
  .hero__stage [data-signup] { --su-pad: 14px; --su-height: 52px; --su-ledge: 5px; }
  .hero__stage .su-label { margin-bottom: 4px; }
  .hero__stage .su-row { gap: 8px; }
  .hero__table { margin-top: 56px; }
}

/* The headline's coin is a real target on a finger, however small it looks. */
.stop__coin::after { content: ""; position: absolute; inset: -8px; }

/* ---------------------------------------------------------------- 2. The graveyard */

/* A dark field, and everything you ever saved covering it from edge to edge. The wall's columns drift
   at slightly different speeds as you scroll, on the compositor. One enormous headline stays pinned
   over them, and "go in" hands over to "don't come out" just by scrolling. */
.grave {
  --bird-halo: var(--field-grave);
  position: relative;
  height: clamp(2500px, 330svh, 4600px);
  background: var(--field-grave);
  color: var(--on-grave);
}
.grave .edge { background: var(--field-grave); }

.grave__wall {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  gap: clamp(10px, 1vw, 18px);
  padding-inline: clamp(10px, 1vw, 18px);
  overflow: clip;
}
/* The top and bottom of the wall go off into the dark. */
.grave__wall::before, .grave__wall::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  height: clamp(120px, 26svh, 300px);
  pointer-events: none;
}
.grave__wall::before { top: 0; background: linear-gradient(var(--field-grave) 10%, transparent); }
.grave__wall::after { bottom: 0; background: linear-gradient(transparent, var(--field-grave) 86%); }

.grave__list { column-count: 4; column-gap: 14px; }
.grave__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.8vw, 14px);
  margin-top: calc(var(--n) * -37px - 60px);
}
.grave__col:nth-child(n + 5) { display: none; }
@media (min-width: 1900px) { .grave__col:nth-child(n + 5) { display: flex; } }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .grave__col {
      animation: grave-drift linear both;
      animation-timeline: view();
      animation-range: cover;
    }
    .grave__col:nth-child(4n + 1) { --drift: -3.5%; }
    .grave__col:nth-child(4n + 2) { --drift: 4.5%; }
    .grave__col:nth-child(4n + 3) { --drift: -6%; }
    .grave__col:nth-child(4n + 4) { --drift: 2.5%; }
    @keyframes grave-drift {
      from { transform: translate3d(0, calc(var(--drift, 0%) * -1), 0); }
      to { transform: translate3d(0, var(--drift, 0%), 0); }
    }
  }
}

.grave__title {
  --size: clamp(60px, min(14.7vw, 25.5svh), 420px);
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-rows: 1fr 1fr;
  padding-inline: var(--gutter);
  font-size: var(--size);
  pointer-events: none;
}
.grave__hold { display: block; position: relative; }
.grave__hold--in { padding-top: 24svh; }
.grave__line {
  position: sticky;
  top: calc(50svh - 0.92em);
  display: block;
}
.grave__line .word { display: inline-block; }

.row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: clamp(70px, 5.8vw, 92px);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--row-bg);
  color: var(--row-ink);
  font-size: clamp(14px, 1.08vw, 18px);
  line-height: 1.22;
  --row-bg: color-mix(in srgb, var(--art-paper-hi) 7%, var(--field-grave));
  --row-ink: color-mix(in srgb, var(--art-paper-hi) 42%, var(--field-grave));
  --row-dim: color-mix(in srgb, var(--art-paper-hi) 15%, var(--field-grave));
}
.row__face { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--row-dim); }
.row__text { flex: 1 1 auto; min-width: 0; }
.row__text b { display: block; font-weight: 700; }
.row__text small { display: block; font-size: 0.82em; opacity: 0.74; font-weight: 600; }
.row__flag {
  flex: none;
  width: 14px;
  height: 20px;
  background: var(--row-dim);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
}

/* The few worth keeping, in front of the wall and the headline. They scroll with the page, so
   they're easy to catch. Grey and lifeless until they glow: only with JS, so the page reads without. */
.grave__lit {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
/* They keep to a lane of their own, down the right of the pinned words, so the sentence can always
   be read. The first one holds its place in the wall for a while, so a quick scroll still sees the bird
   take it. It never holds the page: the scroll is yours. */
.row--rescue {
  --card-w: clamp(230px, 21vw, 400px);
  position: absolute;
  left: calc(100% - var(--gutter) - var(--card-w) - var(--nudge, 0vw));
  top: var(--top);
  width: var(--card-w);
  rotate: var(--tilt, 0deg);
  pointer-events: auto;
}
.row--first { height: 24%; pointer-events: none; }
.row__hold { position: sticky; top: 26svh; pointer-events: auto; }
.row--rescue .thing {
  font-size: clamp(15px, 1.2vw, 20px);
  transition: opacity 320ms var(--ease-out), scale 320ms var(--ease-out);
  box-shadow: 0 5px 0 var(--art-butter-edge-hi), 0 0 0 2.5px var(--art-butter-mid), 0 0 54px color-mix(in srgb, var(--art-butter-mid) 42%, transparent);
}
.js .row--rescue:not(.is-lit) .thing:not(:focus-visible) { opacity: 0; scale: 0.96; pointer-events: none; }

.row__note {
  position: absolute;
  left: 4px;
  bottom: calc(100% + 8px);
  color: var(--art-butter-mid);
  white-space: nowrap;
  rotate: -3deg;
  opacity: 0;
  transition: opacity 240ms var(--ease-out);
  pointer-events: none;
}
.row--rescue.is-lit:not(.is-taken) .row__note { opacity: 1; }
.no-js .row__note { display: none; }

.trinket.grave__ring, .grave__ring.hoard-trinket {
  --size: clamp(70px, 7vw, 132px);
  --r: -10deg;
  position: absolute;
  right: 9%;
  bottom: 5.5%;
  width: var(--size);
  height: var(--size);
  rotate: var(--r);
  z-index: 3; /* It lies on the wall. It has to be reachable there. */
}

/* No room for a lane here: the words fill the width. So the two sentences are held in two stretches
   of the wall, with open wall between and after them, and the cards only ever come through there. */
@media (max-width: 959px) {
  .grave { height: clamp(2000px, 300svh, 3200px); }
  .grave__col:nth-child(n + 3) { display: none; }
  .grave__title { --size: clamp(60px, 18.6vw, 150px); display: block; }
  .grave__hold { position: absolute; left: var(--gutter); right: var(--gutter); height: 19%; }
  .grave__hold--in { top: 4%; padding-top: 0; }
  .grave__hold--out { top: 54%; }
  .row { min-height: 66px; padding: 10px; gap: 8px; font-size: 13px; }
  .row__face { width: 26px; height: 26px; }
  .row__flag { display: none; }
  .row--rescue { --card-w: min(66vw, 320px); }
  .row--rescue:nth-child(1) { top: 24.5%; left: calc(100% - var(--gutter) - var(--card-w)); height: 13%; }
  .row--rescue:nth-child(2) { top: 40%; left: var(--gutter); }
  .row--rescue:nth-child(3) { top: 74.5%; left: calc(100% - var(--gutter) - var(--card-w)); }
  .row--rescue:nth-child(4) { top: 85%; left: var(--gutter); }
  .row__hold { top: 22svh; }
  .row__note { display: none; }
}

/* ---------------------------------------------------------------- 3. The notch */

/* The whole section is a Mac's screen. Its top edge is the menu bar, and an enormous notch hangs from
   the middle of it, with one eye in it. The words run wide under it. And lying on the desktop, one
   enormous post, the thing it clearly wants. */
.sky {
  --bar: 38px;
  --notch-room: clamp(112px, min(11vw, 19svh), 300px);
  display: grid;
  grid-template-columns: minmax(0, 0.56fr) minmax(0, 1fr);
  column-gap: clamp(20px, 3vw, 80px);
  align-items: start;
  background: var(--field-sky);
  color: var(--on-sky);
  padding: var(--notch-room) var(--gutter) calc(var(--edge-v) * 1.02);
}

.trinket.sky__bottlecap, .sky__bottlecap.hoard-trinket {
  --size: clamp(70px, 7.2vw, 140px);
  --r: 8deg;
  position: absolute;
  left: calc(var(--gutter) + 13vw);
  bottom: calc(var(--edge-v) * 1.08);
  width: var(--size);
  height: var(--size);
  rotate: var(--r);
  z-index: 3;
}

.sky__head { display: contents; }
.sky__title {
  position: relative;
  z-index: 2;
  grid-column: 1 / -1;
  font-size: clamp(56px, min(11.9vw, 20.5svh), 360px);
}
.reveal-line { display: inline-block; }
.sky__title .reveal-line { display: block; }
.sky__lede {
  position: relative;
  z-index: 2;
  grid-column: 1;
  max-width: 24ch;
  margin-top: clamp(20px, 3vw, 60px);
}

/* demos.js builds inside this. It makes no stacking context, so the flying bird at 40 can pass
   between the notch at 60 and what's under it. */
.demo {
  position: relative;
  width: 100%;
  margin-inline: auto;
}
.demo--notch { z-index: auto; grid-column: 2; margin-top: clamp(18px, 2.2vw, 44px); }

/* Shown until demos.js takes over, and for good if it can't. */
.fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  text-align: center;
  padding: 24px;
  font-size: clamp(18px, 1.7vw, 26px);
  font-weight: 700;
}
.fallback img { width: clamp(160px, 18vw, 280px); height: auto; }
.fallback p { max-width: 26ch; }
.demos-ready .fallback { display: none; }

@media (max-width: 859px) {
  .sky { grid-template-columns: minmax(0, 1fr); padding-top: clamp(96px, 28vw, 180px); }
  .sky__title { font-size: clamp(54px, 15.6vw, 130px); }
  .sky__lede { grid-column: 1; max-width: 34ch; }
  .demo--notch { grid-column: 1; margin-top: 26px; }
  /* In the open to the right of "or just", clear of the post and its buttons. */
  .trinket.sky__bottlecap, .sky__bottlecap.hoard-trinket {
    left: auto;
    right: 7%;
    bottom: auto;
    top: calc(clamp(96px, 28vw, 180px) + clamp(54px, 15.6vw, 130px) * 0.82);
  }
}

/* ---------------------------------------------------------------- 4. Your board */

.boardland {
  background-color: var(--field-board);
  background-image: radial-gradient(circle, var(--dot-board) 1.7px, transparent 1.9px);
  background-size: 26px 26px;
  background-position: 50% 0;
  padding: clamp(12px, 2vw, 40px) var(--gutter) calc(var(--edge-v) * 1.25 + clamp(24px, 4vw, 96px));
}
.boardland .edge { background: var(--field-board); }

.boardland__head {
  position: relative;
  z-index: 2;
  margin-bottom: clamp(36px, 5vw, 96px);
}
.boardland__title { font-size: clamp(54px, 11.6vw, 340px); color: var(--magpie); }
.boardland__title .reveal-line { display: block; }
.boardland__title .reveal-line + .reveal-line { margin-left: 0.62em; }
@media (prefers-color-scheme: dark) { .boardland__title { color: var(--ink); } }

.boardland__lede {
  max-width: 30ch;
  margin: clamp(16px, 2vw, 40px) 0 0 auto;
}

.trinket.boardland__ticket, .boardland__ticket.hoard-trinket {
  --size: clamp(76px, 8vw, 152px);
  --r: -12deg;
  position: absolute;
  left: clamp(4px, 1.5vw, 32px);
  bottom: -6%;
  width: var(--size);
  height: var(--size);
  rotate: var(--r);
}

@media (max-width: 719px) {
  .boardland__head { margin-bottom: 84px; }
  .trinket.boardland__ticket, .boardland__ticket.hoard-trinket { left: 0; right: auto; bottom: -74px; top: auto; }
}

.boardland__pad {
  position: relative;
  max-width: 1560px;
  margin-inline: auto;
}
.demo--board { min-height: clamp(440px, 46vw, 760px); }
.trinket.boardland__pin, .boardland__pin.hoard-trinket {
  --size: clamp(72px, 7.2vw, 136px);
  --r: -6deg;
  position: absolute;
  z-index: 5;
  right: clamp(14px, 3vw, 64px);
  top: calc(var(--size) * -0.8);
  width: var(--size);
  height: var(--size);
  rotate: var(--r);
}

/* The six spot tiles. */
.tiles {
  position: relative;
  z-index: 2;
  max-width: 2240px;
  margin: clamp(90px, 10vw, 220px) auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 40px);
  perspective: 1400px;
}
.tile { position: relative; transform-style: preserve-3d; }
.tile:nth-child(3n + 2) { margin-top: clamp(24px, 4vw, 96px); margin-bottom: calc(clamp(24px, 4vw, 96px) * -1); }
.tile__face {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(14px, 2vw, 44px);
  border-radius: clamp(24px, 2.6vw, 48px);
  background: var(--tile);
  box-shadow: 0 var(--ledge-tile) 0 var(--tile-edge);
  color: var(--tile-ink, var(--sticky-ink));
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 220ms var(--ease-out);
  transform-style: preserve-3d;
}
.tile__face img, .tile__art {
  display: block;
  width: min(100%, 680px);
  height: auto;
  /* The objects break out of the top of their tiles: they're things, not pictures in boxes. */
  margin: calc(clamp(14px, 2vw, 44px) * -1 - 6.5%) auto auto;
  overflow: visible;
  transform: translateZ(26px);
  pointer-events: none;
}
.tile__face p {
  margin-top: clamp(8px, 1vw, 20px);
  font-size: clamp(24px, 2.75vw, 56px);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1;
  text-wrap: balance;
}
.tile--peach { --tile: var(--sticky-peach); --tile-edge: var(--sticky-peach-edge); }
.tile--sky { --tile: var(--sticky-sky); --tile-edge: var(--sticky-sky-edge); }
.tile--butter { --tile: var(--sticky-butter); --tile-edge: var(--sticky-butter-edge); }
.tile--mint { --tile: var(--sticky-mint); --tile-edge: var(--sticky-mint-edge); }
.tile--blush { --tile: var(--art-x-mid); --tile-edge: var(--art-x-low); --tile-ink: var(--art-paper-hi); }
.tile--leaf { --tile: var(--art-paper-hi); --tile-edge: var(--art-paper-edge-hi); }

.tile:active .tile__face {
  box-shadow: 0 2px 0 var(--tile-edge);
  translate: 0 calc(var(--ledge-tile) - 2px);
  transition: transform 220ms var(--ease-out), translate 80ms var(--ease-out), box-shadow 80ms var(--ease-out);
}
.tile__face { transition: transform 220ms var(--ease-out), translate 120ms var(--ease-out), box-shadow 120ms var(--ease-out); }

.trinket.tile__key, .tile__key.hoard-trinket {
  --size: clamp(68px, 6.6vw, 124px);
  --r: 18deg;
  position: absolute;
  right: 7%;
  top: calc(var(--size) * -0.56);
  width: var(--size);
  height: var(--size);
  rotate: var(--r);
  z-index: 3;
}

@media (min-width: 2300px) {
  .tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tile:nth-child(even) { margin-top: 80px; margin-bottom: -80px; }
  .tile:nth-child(3n + 2):nth-child(odd) { margin-top: 0; margin-bottom: 0; }
  .tile__face p { font-size: clamp(36px, 1.9vw, 52px); }
}

/* On a phone the band is a real band: swipe through it. */
@media (max-width: 719px) {
  .tiles {
    display: flex;
    gap: 14px;
    margin-inline: calc(var(--gutter) * -1);
    padding: 40px var(--gutter) 22px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    perspective: none;
  }
  .tiles::-webkit-scrollbar { display: none; }
  .tile, .tile:nth-child(3n + 2) { flex: none; width: 76vw; margin: 0; scroll-snap-align: start; }
  .tile__face { padding: 18px; }
  .tile__face img, .tile__art { width: 100%; }
  .tile__face p { font-size: 30px; }
}

/* Questions. Quiet after the tiles: big title, then reading-size answers in a loose grid. */
.faq {
  position: relative;
  z-index: 2;
  max-width: 1560px;
  margin: clamp(120px, 13vw, 300px) auto 0;
}
.faq__title { font-size: clamp(52px, 8vw, 220px); color: var(--magpie); }
@media (prefers-color-scheme: dark) { .faq__title { color: var(--ink); } }
.faq__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
  gap: clamp(32px, 3.4vw, 72px) clamp(28px, 4vw, 96px);
  margin-top: clamp(36px, 4.4vw, 96px);
}
.faq__item h3 {
  font-size: clamp(22px, 1.75vw, 34px);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-wrap: balance;
}
.faq__item p {
  margin-top: 0.55em;
  max-width: 40ch;
  font-size: clamp(17px, 1.2vw, 23px);
  font-weight: 600;
  line-height: 1.45;
  text-wrap: pretty;
}
.faq__item a { color: var(--leaf-ink); font-weight: 800; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .faq__item a:hover { color: var(--ink); } }
#signup-finale { scroll-margin-block: 20vh; }

/* ---------------------------------------------------------------- 5. Finale */

/* Literally the app icon's field. The bird is enormous and cropped by the left of the screen, its
   eye the size of a dinner plate, its beak pointing at the form it's about to take from. Near-black
   type: on this green it's the only colour that reads, in both themes. */
.finale {
  position: relative;
  /* A little taller than the screen, so the footer's V only comes up once you've taken all this in. */
  min-height: max(calc(100svh + var(--edge-v) * 0.9), clamp(680px, 60vw, 1400px));
  padding: clamp(10px, 2vw, 44px) var(--gutter) calc(var(--edge-v) * 0.72);
  background: linear-gradient(180deg, var(--icon-leaf-top), var(--icon-leaf-bottom));
  color: var(--art-x-low);
  display: flex;
  flex-direction: column;
  --finale-ink: #121015;
}
.finale .edge { background: var(--icon-leaf-top); }

.finale__copy {
  position: relative;
  z-index: 4;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-self: flex-end;
  width: min(46%, 1200px);
  gap: clamp(16px, 2vw, 44px);
  pointer-events: none;
}
.finale__copy > * { pointer-events: auto; }
.finale__title {
  font-size: clamp(60px, min(10.6vw, 17svh), 340px);
  pointer-events: none;
  color: var(--finale-ink);
}
.finale__title .reveal-line { display: block; }
.finale__title .nowrap { display: block; }

.sheet--finale { width: 100%; }
/* The one big pressable thing on the page: a field, and under it a button the width of the card. */
[data-signup].sheet--finale {
  --su-height: clamp(62px, 5vw, 104px);
  --su-ledge: 9px;
  --su-type: clamp(24px, 2.2vw, 42px);
}
.sheet--finale .su-row { flex-direction: column; align-items: stretch; gap: 6px; }
[data-signup].sheet--finale .su-field { flex: 0 0 auto; width: 100%; }
.sheet--finale button[type="submit"] { flex: none; width: 100%; font-weight: 900; }

.peek--finale {
  inset: 0;
  overflow: clip;
}
.edge--deep { z-index: 3; }

@media (max-width: 859px) {
  .finale { min-height: clamp(780px, 100svh, 1100px); }
  .finale__copy { width: 100%; align-self: stretch; gap: clamp(220px, 62vw, 460px); justify-content: flex-start; }
  .finale__title { font-size: clamp(64px, 19vw, 150px); }
  /* Here the bird comes up over the form, between it and the headline. See main.js. */
}

/* ---------------------------------------------------------------- Footer: the nest */

/* Tall enough to fill the screen at the very end, so the finale's bird has gone and this one can
   settle. A place to arrive at. */
.foot {
  position: relative;
  /* Keeps .foot__inner's pull-up its own. Without this the margin collapses through and drags the
     whole footer over the finale, which puts a second peak across the bird. */
  display: flow-root;
  background: var(--art-leaf-deep);
  color: var(--art-paper-hi);
  text-align: center;
}
.foot .edge { background: var(--art-leaf-deep); }
/* What's in the nest stays in the footer: the bird settling can never make the page any longer. */
.foot__inner {
  position: relative;
  /* Over the finale's bird and the solid peak (both 3), so the leaves carry on up under the roof line. */
  z-index: 3;
  overflow: clip;
  /* It reaches up into the footer's peak and takes that shape, so the leaves run under the roof line
     and never stop on a straight cut where the peak meets the rest of the footer. */
  margin-top: calc(var(--edge-v) * -1 + 1px);
  background: var(--art-leaf-deep);
  clip-path: polygon(50% 0, 100% var(--edge-v), 100% 100%, 0 100%, 0 var(--edge-v));
  min-height: calc(100svh + var(--edge-v) - 1px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: calc(clamp(0px, 2vw, 40px) + var(--edge-v)) var(--gutter) clamp(36px, 4vw, 72px);
}

.nest {
  position: relative;
  z-index: 2;
  --nest-w: min(1300px, 92vw, max(620px, 92svh));
  width: var(--nest-w);
  aspect-ratio: 720 / 420;
  margin: auto 0 clamp(30px, 5.4vw, 84px);
}
/* The light. Sun from the upper left, as on every object in the scene, opens up the canopy behind the
   nest; the vignette closes in over everything else, so the eye goes to the nest. Both are centred on
   the nest and far bigger than the footer, which clips them, so they hold at any screen size. */
.nest::before, .nest::after {
  content: "";
  position: absolute;
  inset: -300vh -300vw;
  pointer-events: none;
  --reach-x: max(calc(var(--nest-w) * 1.08), 62vw);
  --reach-y: max(calc(var(--nest-w) * .72), 58svh);
}
.nest::before {
  z-index: -2;
  background: radial-gradient(
    ellipse calc(var(--reach-x) * .78) calc(var(--reach-y) * .86) at calc(50% - var(--nest-w) * .1) calc(50% - var(--nest-w) * .14),
    rgba(118, 196, 134, .46) 0%,
    rgba(88, 170, 112, .27) 38%,
    rgba(58, 140, 88, .1) 70%,
    rgba(58, 140, 88, 0) 100%
  );
}
.nest::after {
  z-index: 7;
  background:
    radial-gradient(
      ellipse calc(var(--reach-x) * .66) calc(var(--reach-y) * .78) at calc(50% - var(--nest-w) * .3) calc(50% - var(--nest-w) * .34),
      rgba(255, 240, 200, .1) 0%,
      rgba(255, 240, 200, 0) 100%
    ),
    radial-gradient(
      ellipse var(--reach-x) var(--reach-y) at 50% calc(50% - var(--nest-w) * .03),
      rgba(5, 26, 14, 0) 46%,
      rgba(5, 26, 14, .26) 68%,
      rgba(5, 26, 14, .56) 88%,
      rgba(5, 26, 14, .7) 100%
    );
}
.nest__back, .nest__front { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* From the back: the nest, the bird, your hoard around it, the front rim. */
/* Your hoard lies behind the bird: its beak and its eye are never covered. */
.nest__hoard { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.nest__front { z-index: 5; }
/* The tree around it. Three times the nest's width and anchored to it, so the wood stays under the
   nest at any size; .foot__inner clips what runs off. Back: behind everything. Mid: in the rim, above
   your hoard and under the bird. Front: over the wood, clear of the bird. */
.nest__scene {
  position: absolute;
  left: -100%;
  top: calc(-1100 / 420 * 100%);
  width: 300%;
  max-width: none;
  height: auto;
  aspect-ratio: 2160 / 1560;
  pointer-events: none;
}
.nest__scene--back { z-index: -1; }
.nest__scene--mid { z-index: 0; }
.nest__scene--front { z-index: 6; }

.foot__line, .foot__privacy, .foot__links, .foot__maker { position: relative; z-index: 3; }
.foot__line {
  font-size: clamp(20px, 2vw, 32px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.foot__privacy {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 600;
  color: color-mix(in srgb, var(--art-paper-hi) 74%, var(--art-leaf-deep));
}

.foot__links {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 4px;
}
.foot__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  color: var(--art-paper-hi);
  font-size: 16px;
  font-weight: 800;
  text-underline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .foot__links a:hover { color: var(--art-butter-mid); }
}
.foot__maker {
  font-size: 13px;
  font-weight: 600;
  color: color-mix(in srgb, var(--art-paper-hi) 74%, var(--art-leaf-deep));
}

/* Made by Gooder: the studio's own logo, small and quiet in the corner of the night, with its red dot
   kept, since the dot is how Gooder is known. */
.gooder {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: 6px;
  padding: 0 6px;
  color: color-mix(in srgb, var(--art-paper-hi) 74%, var(--art-leaf-deep));
  text-decoration: none;
  transition: color 160ms var(--ease-out);
}
.gooder__by {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.gooder__logo {
  display: block;
  width: auto;
  height: 22px;
  overflow: visible;
}
.gooder__dot { fill: #f0421c; }
@media (hover: hover) and (pointer: fine) {
  .gooder:hover { color: var(--art-paper-hi); }
}

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

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .js .reveal-line {
      animation: slide-from-left linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 34%;
    }
    .js .reveal-line + .reveal-line { animation-name: slide-from-right; }

    .js .tile {
      animation: tile-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
    @keyframes slide-from-left { from { transform: translateX(-7vw); } to { transform: none; } }
    @keyframes slide-from-right { from { transform: translateX(7vw); } to { transform: none; } }
    @keyframes tile-rise { from { transform: translateY(46px); } to { transform: none; } }
  }
}

@media (max-width: 719px) {
  .js .tile { animation: none !important; }
}

/* Reduced motion: nothing tilts or slides. */
@media (prefers-reduced-motion: reduce) {
  .thing, .tile__face { transition: none; }
  .tile__face { transform: none; }
}

/* Without JS the form isn't built out by signup.js. It still reads as a form. */
.no-js [data-signup] form, .no-js [data-signup] .su-row { display: grid; gap: 10px; }
.no-js [data-signup] label { font-weight: 800; font-size: 15px; }
.no-js [data-signup] input[type="email"] {
  min-height: 52px;
  padding: 0 18px;
  border: 2px solid var(--edge);
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
.no-js [data-signup] button {
  min-height: 56px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--leaf);
  color: var(--on-leaf);
  font: inherit;
  font-weight: 800;
}
.no-js .su-trap { position: absolute; left: -9999px; }

/* ---------------------------------------------------------------- Touch */

/* Anything you pick up is a control, so a finger gets it at once, and a long press doesn't select its
   words or offer to save its picture. */
a, button, [role="button"], .thing, .trinket { touch-action: manipulation; }
.thing, .trinket, .thing img, .trinket img {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
@media (pointer: coarse) {
  .thing:active { translate: 0 2px; transition-duration: 80ms; }
  .trinket img { transition: transform 120ms var(--ease-out); }
  .trinket:active img { transform: scale(.94); transition-duration: 80ms; }
}

/* A phone: the nest in the middle of the tree, not sunk to the bottom under a screen of leaves. */
@media (max-width: 719px) {
  .nest { --nest-w: 104vw; margin-block: auto; }
  .foot__inner { padding-bottom: calc(clamp(36px, 4vw, 72px) + env(safe-area-inset-bottom, 0px)); }
}

/* A phone on its side: short enough that the headline has to give way to the form. */
@media (max-width: 959px) and (max-height: 500px) {
  .hero { --title: min(18.9vw, 25svh); }
  .hero__stage { width: min(62%, 420px); margin-inline: auto; }
  .finale__title { font-size: min(19vw, 26svh); }
}