/* mokcove.com. Every color, radius, space and font is one of the app's tokens (tokens.css, written by
   scripts/site-sync.py); this file mixes them, never names a color of its own. Two grounds by the app's hour
   (html[data-ground], set before the first paint): the hero, the arc's night, the band and the closer are the cove at
   night whatever the hour; the Answer Bank and the footer wear the ground. Sections part by space, never a line.
   Grid stacking for every layered block (one cell, the layers in it), the hover query for hover, a visible focus. */
/* The app's Nunito files carry a flipped OS/2 descender (typo descender +572, win descent 64964, USE_TYPO_METRICS on),
   so an engine that reads OS/2 (Chromium on Linux and Android) sets the text below its own line box and clips it inside
   an input. These faces are the same files with the hhea metrics written out (1999 and 572 of 2048), the metrics Apple
   already uses, so nothing moves on an iPhone. Declared after fonts/nunito.css, so these are the faces in use. */
@font-face { font-family: Nunito; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/Nunito-Bold.ttf") format("truetype"); ascent-override: 97.61%; descent-override: 27.93%; line-gap-override: 0%; }
@font-face { font-family: Nunito; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/Nunito-ExtraBold.ttf") format("truetype"); ascent-override: 97.61%; descent-override: 27.93%; line-gap-override: 0%; }
@font-face { font-family: Nunito; font-style: normal; font-weight: 900; font-display: swap; src: url("fonts/Nunito-Black.ttf") format("truetype"); ascent-override: 97.61%; descent-override: 27.93%; line-gap-override: 0%; }

:root {
  --gutter: max(var(--s2), env(safe-area-inset-left), env(safe-area-inset-right));
  --measure: 72rem;
  --night: var(--dd-field);
  --on-night: var(--dd-deck-hi);
  --on-night-soft: color-mix(in oklab, var(--dd-deck-hi) 78%, var(--dd-field));
  --pill: 999px;
  --edge: max(var(--gutter), (100vw - var(--measure)) / 2);   /* the page's left edge: the gutter, or the measure's own */
  --shade: color-mix(in srgb, var(--dd-shade) 55%, transparent);
}
html[data-ground="night"] { --ground: var(--dd-field); --ground-ink: var(--dd-deck-hi); --ground-soft: var(--on-night-soft); --tile: color-mix(in srgb, var(--dd-deck) 10%, transparent); --link: var(--dd-kelp-glow); color-scheme: dark; }
html[data-ground="paper"] { --ground: var(--paper); --ground-ink: var(--ink); --ground-soft: var(--muted); --tile: var(--card); --link: color-mix(in oklab, var(--kid-gel-4), var(--ink) 40%); color-scheme: light; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; background: var(--night); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.45;
  color: var(--ground-ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
}
img, canvas, video { display: block; max-inline-size: 100%; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--lantern); outline-offset: 3px; }
.sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; inset-block-start: var(--s1); inset-inline-start: var(--s1); z-index: 9; padding: var(--s1) var(--s2); border-radius: var(--pill); background: var(--paper); color: var(--ink); translate: 0 -200%; }
.skip:focus-visible { translate: 0 0; }
.eyebrow { font-weight: 900; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; opacity: .8; margin-block-end: var(--s1); }

/* the action: the dock's glass in a stadium, one warm light on it (the lantern's glow) */
.action {
  display: inline-grid;
  place-items: center;
  min-block-size: var(--tap-kid);
  padding: 0 var(--s3);
  border: 0;
  border-radius: var(--pill);
  font: inherit;
  font-weight: 900;
  font-size: 1.05rem;
  text-decoration: none;
  color: var(--ink);
  background: linear-gradient(to bottom, var(--frost-hi), var(--dd-deck));
  box-shadow: var(--lantern-low);
  cursor: pointer;
  transition: box-shadow var(--t-quick) var(--ease), translate var(--t-quick) var(--ease);
}
.action:active { translate: 0 1px; }
@media (hover: hover) and (pointer: fine) { .action:hover { box-shadow: var(--lantern-glow); } }
.action[hidden] { display: none; }

/* ---------- the hero: the world full-bleed, the copy lower left ---------- */
.hero {
  position: relative;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  block-size: 100svh;
  min-block-size: 22rem;
  background: var(--dd-sky-top);
  color: var(--on-night);
  overflow: clip;
}
.hero > * { grid-area: 1 / 1; min-inline-size: 0; }
.hero__world { inline-size: 100%; block-size: 100%; touch-action: pan-y; }
.hero__video { display: none; inline-size: 100%; block-size: 100%; object-fit: cover; }
.hero--video .hero__video { display: block; }
.hero--video .hero__world, .hero--video .hero__grip { display: none; }
.hero__grain, .arc__grain { pointer-events: none; opacity: var(--grain); mix-blend-mode: overlay; background-image: var(--grain-img); }
/* a soft fall of the night under the copy, so the words read on the sand */
.hero::after {
  content: "";
  grid-area: 1 / 1;
  pointer-events: none;
  background: linear-gradient(to top, color-mix(in srgb, var(--dd-field) 78%, transparent), transparent 46%);
}
.hero__grip {
  position: absolute;
  inset: 0 auto auto 0;
  z-index: 2;
  translate: var(--gx, -200px) var(--gy, -200px);
  inline-size: var(--gw, 0);
  block-size: var(--gh, 0);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  touch-action: none;
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}
.hero__grip:active { cursor: grabbing; }
.hero__copy {
  position: relative;
  z-index: 1;
  align-self: end;
  justify-self: start;
  display: grid;
  justify-items: start;
  gap: var(--s1);
  inline-size: min(100%, 34rem);
  padding: var(--s3) var(--gutter) max(var(--s4), env(safe-area-inset-bottom)) var(--edge);
  pointer-events: none;
}
.hero__copy > * { pointer-events: auto; }
.wordmark { font-weight: 900; font-size: clamp(2.6rem, 1.6rem + 6vw, 5rem); line-height: 1; letter-spacing: -.02em; }
.hero__line { font-size: clamp(1.2rem, 1rem + 1.2vw, 1.6rem); font-weight: 800; line-height: 1.2; text-wrap: balance; }
.hero__facts { color: var(--on-night-soft); }
.hero__copy .action { margin-block-start: var(--s2); }
/* a phone on its side: the world keeps its height, the copy tightens */
@media (max-height: 30rem) and (orientation: landscape) {
  .hero__copy { gap: calc(var(--s1) / 2); padding-block: var(--s2); }
  .wordmark { font-size: 2.2rem; }
  .hero__line { font-size: 1.1rem; }
  .hero__facts { font-size: 1rem; }
  .hero__copy .action { margin-block-start: var(--s1); min-block-size: var(--tap); }
}

/* ---------- the arc: the day in the cove, the ground tinting as the page scrolls ---------- */
.arc { display: grid; grid-template-columns: minmax(0, 1fr); color: var(--on-night); background: var(--night); }
.arc > * { grid-area: 1 / 1; min-inline-size: 0; }
.arc__sky { position: sticky; inset-block-start: 0; block-size: 100svh; display: grid; overflow: clip; }
.arc__sky > * { grid-area: 1 / 1; }
.arc__layer { display: grid; opacity: 0; }
.arc__layer > * { grid-area: 1 / 1; }
.arc__layer--dusk { opacity: 1; background: linear-gradient(to bottom, var(--sky-deep), var(--sky-steel) 55%, var(--sky-dusk)); }
.arc__layer--night, .arc__layer--moon { background: linear-gradient(to bottom, var(--dd-sky-top), var(--dd-sky-mid) 55%, var(--dd-sky-low)); }
.arc__stars { inline-size: 100%; block-size: 100%; object-fit: cover; }
.arc__moon { justify-self: end; align-self: start; inline-size: clamp(7rem, 4rem + 14vw, 13rem); block-size: auto; margin: 12svh 8vw 0 0; }
.arc__layer--dawn { background: linear-gradient(to bottom, var(--sky-top), var(--sky-deep) 60%, var(--sky-dusk)); }
.arc__layer--paper { background: var(--fibre), var(--door-day); background-size: 400px 400px, auto; }
.arc__steps { position: relative; z-index: 1; }
.arc__step {
  display: grid;
  align-content: center;
  gap: var(--s1);
  min-block-size: 90svh;
  inline-size: min(100% - 2 * var(--gutter), var(--measure));
  margin-inline: auto;
  padding-block: var(--s5);
}
.arc__step:first-child { min-block-size: 70svh; }
.arc__step > * { max-inline-size: 30ch; }
.arc__h { font-weight: 900; font-size: clamp(2rem, 1.4rem + 3.6vw, 3.6rem); line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; }
.arc__big { font-weight: 800; font-size: clamp(1.5rem, 1.1rem + 2vw, 2.4rem); line-height: 1.2; text-wrap: balance; }
.arc__step[data-sky="paper"] { color: var(--ink); }

/* ---------- the chapters: five rooms, each on its own room's ground; a depth seam between them, never a line ---------- */
.rooms { background: var(--night); color: var(--on-night); }
.room {
  --a: var(--sky-deep); --b: var(--sky-dusk);
  background: linear-gradient(to bottom, var(--a), var(--b));
  box-shadow: inset 0 var(--s4) var(--s4) calc(-1 * var(--s3)) var(--shade);   /* the depth seam: the room above casts on this one */
  padding-block: var(--s5);
}
.room--goo { --a: var(--sky-deep); --b: var(--sky-dusk); box-shadow: none; }
.room--maker { --a: var(--night-top); --b: var(--night-dusk); }
.room--midway { --a: var(--dd-sky-top); --b: var(--dd-sky-low); }
.room--pier { --a: var(--dd-sky-mid); --b: var(--dd-sea-near); }
.room--wall { --a: var(--wall-board-hi); --b: var(--wall-board); }
.room__in {
  display: grid;
  gap: var(--s3);
  align-items: center;
  justify-items: center;
  inline-size: min(100% - 2 * var(--gutter), var(--measure));
  margin-inline: auto;
}
.room__still {
  inline-size: min(100%, 19rem);
  block-size: auto;
  aspect-ratio: 26 / 50;
  object-fit: cover;
  border-radius: var(--r-card);
  background: var(--b);
  box-shadow: 0 var(--s3) var(--s4) calc(-1 * var(--s1)) var(--shade);
}
.room__copy { display: grid; gap: var(--s1); text-align: center; max-inline-size: 26rem; }
.room__name { font-weight: 900; font-size: clamp(1.8rem, 1.3rem + 2.4vw, 2.8rem); line-height: 1.05; letter-spacing: -.01em; }
.room__verbs { font-weight: 800; font-size: clamp(1.15rem, 1rem + .8vw, 1.45rem); line-height: 1.3; color: var(--on-night-soft); text-wrap: balance; }
@media (min-width: 48rem) {
  .room__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); justify-items: start; gap: var(--s5); }
  .room__still { justify-self: end; }
  .room__copy { text-align: start; }
  .room:nth-child(odd of .room) .room__still { order: 2; justify-self: start; }
  .room:nth-child(odd of .room) .room__copy { justify-self: end; }
}

/* ---------- the band: the calm law on the moving ground (the Puff's own night halo, through the house gradient) ---------- */
.band { display: grid; overflow: clip; color: var(--on-night); background: var(--dd-sky-top); }
.band > * { grid-area: 1 / 1; min-inline-size: 0; }
.band__ground {
  background:
    radial-gradient(60% 80% at 15% 20%, color-mix(in srgb, var(--halo-4) 55%, transparent), transparent 70%),
    radial-gradient(55% 70% at 85% 30%, color-mix(in srgb, var(--halo-1) 45%, transparent), transparent 70%),
    radial-gradient(70% 70% at 70% 95%, color-mix(in srgb, var(--halo-3) 45%, transparent), transparent 70%),
    radial-gradient(50% 60% at 25% 90%, color-mix(in srgb, var(--halo-2) 35%, transparent), transparent 70%),
    linear-gradient(160deg, var(--dd-sky-top), var(--dd-sky-low));
  background-size: 160% 160%;
  background-position: 0% 0%;
}
@media (prefers-reduced-motion: no-preference) {
  /* the ground drifts while the band is in view, two slow passes, then holds (no animation runs for ever) */
  .band.is-in .band__ground { animation: band-drift 24s var(--ease) 2 alternate both; }
}
@keyframes band-drift { to { background-position: 100% 100%; } }
.band:not(.is-on) .band__ground { animation-play-state: paused; }
.band__in { position: relative; inline-size: min(100% - 2 * var(--gutter), var(--measure)); margin-inline: auto; padding-block: var(--s5) calc(var(--s5) * 1.25); }
.band__laws { display: grid; gap: var(--s3); }
.band__laws li { font-weight: 900; font-size: clamp(1.8rem, 1.2rem + 3.4vw, 3.6rem); line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; text-shadow: 0 2px var(--s3) var(--shade); }

/* ---------- the Answer Bank: six questions on the ground ---------- */
.answers { background: var(--ground); color: var(--ground-ink); }
.answers__in { inline-size: min(100% - 2 * var(--gutter), var(--measure)); margin-inline: auto; padding-block: var(--s5); }
.answers__h { font-weight: 900; font-size: clamp(2rem, 1.4rem + 3vw, 3.2rem); line-height: 1.05; letter-spacing: -.02em; margin-block-end: var(--s4); }
.answers__grid { display: grid; gap: var(--s2); }
@media (min-width: 48rem) { .answers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .answers__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.qa { display: grid; align-content: start; gap: var(--s1); padding: var(--s3); border-radius: var(--r-card); background: var(--tile); }
.qa dt { font-weight: 900; font-size: 1.25rem; line-height: 1.2; }
.qa dd { color: var(--ground-soft); }
.qa a { color: var(--link); font-weight: 800; text-underline-offset: .2em; }
@media (hover: hover) and (pointer: fine) { .qa a:hover { color: var(--ground-ink); } }

/* ---------- the closer: the hero's world at bedtime, the Puff asleep ---------- */
.closer {
  position: relative;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  block-size: 100svh;
  min-block-size: 22rem;
  background: var(--dd-sky-top);
  color: var(--on-night);
  overflow: clip;
}
.closer > * { grid-area: 1 / 1; min-inline-size: 0; }
.closer__poster { inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0; }
.closer--poster .closer__poster { opacity: 1; }
.closer__world { inline-size: 100%; block-size: 100%; }
.closer--poster .closer__world { display: none; }
.closer::after { content: ""; grid-area: 1 / 1; pointer-events: none; background: linear-gradient(to top, color-mix(in srgb, var(--dd-field) 82%, transparent), transparent 55%); }
.closer__copy { position: relative; z-index: 1; align-self: end; justify-self: start; display: grid; gap: var(--s2); inline-size: min(100%, 36rem); padding: var(--s3) var(--gutter) max(var(--s4), env(safe-area-inset-bottom)) var(--edge); }
.closer__h { font-weight: 900; font-size: clamp(1.8rem, 1.3rem + 2.6vw, 3rem); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.ships { display: grid; gap: var(--s1); }
.ships__label { font-weight: 800; color: var(--on-night-soft); }
.ships__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1); }
.ships__input {
  min-inline-size: 0;
  block-size: var(--tap-kid);
  padding: 0 var(--s3);
  border: 0;
  border-radius: var(--pill);
  font: inherit;
  line-height: normal;
  color: var(--on-night);
  background: var(--home-glass);
}
.ships__input::placeholder { color: var(--on-night-soft); opacity: .8; }
.ships__status { min-block-size: 1.45em; color: var(--on-night-soft); }
.ships__status a { color: var(--dd-kelp-glow); }
.ships[data-sent] .ships__row { display: none; }
@media (max-height: 30rem) and (orientation: landscape) {
  .closer__copy { gap: var(--s1); padding-block: var(--s2); }
  .closer__h { font-size: 1.5rem; }
  .ships__input { block-size: var(--tap); }
  .ships__go { min-block-size: var(--tap); }
}

/* ---------- the footer ---------- */
.foot { background: var(--ground); color: var(--ground-soft); }
.foot__in { display: grid; gap: var(--s2); inline-size: min(100% - 2 * var(--gutter), var(--measure)); margin-inline: auto; padding-block: var(--s5) max(var(--s4), env(safe-area-inset-bottom)); }
.foot__by { color: var(--ground-ink); font-weight: 900; }
.foot__links { display: flex; flex-wrap: wrap; gap: 0 var(--s3); }
.foot__links a { display: inline-flex; align-items: center; min-block-size: var(--tap); font-weight: 800; text-decoration: none; color: var(--ground-ink); }
@media (hover: hover) and (pointer: fine) { .foot__links a:hover { color: var(--link); text-decoration: underline; text-underline-offset: .2em; } }
.foot__fine { font-size: .9rem; }

/* ---------- the 404: the night, one way home ---------- */
.lost { display: grid; place-content: center; justify-items: start; gap: var(--s3); min-block-size: 100svh; padding: var(--s4) var(--gutter); background: var(--night); color: var(--on-night); }

/* ---------- the plain pages: privacy and support, words on the ground ---------- */
.doc { min-block-size: 100svh; display: grid; grid-template-rows: auto 1fr auto; background: var(--ground); color: var(--ground-ink); }
.doc__top, .doc__in { inline-size: min(100% - 2 * var(--gutter), var(--measure)); margin-inline: auto; }
.doc__top { padding-block: var(--s3) 0; }
.doc__home { display: inline-flex; align-items: center; min-block-size: var(--tap); font-weight: 900; font-size: 1.4rem; letter-spacing: -.01em; text-decoration: none; }
.doc__in { display: grid; gap: var(--s4); padding-block: var(--s4) var(--s5); }
.doc__in > * { max-inline-size: 38rem; }
.doc__h { font-weight: 900; font-size: clamp(2.2rem, 1.5rem + 3.4vw, 3.6rem); line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; }
.doc__lede { font-weight: 800; font-size: clamp(1.2rem, 1rem + 1vw, 1.5rem); line-height: 1.3; text-wrap: balance; }
.doc__date { color: var(--ground-soft); margin-block-start: var(--s1); }
.doc__part { display: grid; gap: var(--s1); }
.doc__part h2 { font-weight: 900; font-size: 1.35rem; line-height: 1.2; }
.doc__part p { color: var(--ground-soft); }
.doc a:not(.doc__home) { color: var(--link); font-weight: 800; text-underline-offset: .2em; }
@media (hover: hover) and (pointer: fine) { .doc a:not(.doc__home):hover { color: var(--ground-ink); } }