/* Rest Kindly
   One sheet of night paper, read by the clock: the page runs from 9:30 pm to
   7:00 am, and each hour holds a piece of the app you can touch.
   Colours, material and motion are the app's own (NightSapphire, BreathPaper). */

:root {
  color-scheme: dark;

  /* Night paper */
  --paper-top:  #0C1E45;
  --paper-mid:  #081736;
  --paper-low:  #050F28;
  --paper-edge: #030A1C;

  /* Solid surfaces */
  --card:     #0B1A3B;
  --card-lit: #163060;
  --knob:     #0D1F4A;

  /* Soft paper shapes */
  --pearl: #D8DFE9;
  --sky:   #93B6D8;
  --deep:  #2A3F63;
  --ink:   #0A1424;

  /* Light and text */
  --lamp:       #7EB6E8;
  --lamp-soft:  #A9D0F2;
  --lit-detail: #A9C3E4;
  --text: #F4F8FC;
  --mist: #A2B6CC;
  --dim:  #6F86A6;
  --line: rgba(216, 223, 233, .10);

  /* Type: rounded is the night voice, sans carries the facts, serif is for stories */
  --round: ui-rounded, "SF Pro Rounded", "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", system-ui, sans-serif;
  --sans:  -apple-system, BlinkMacSystemFont, "SF Pro Text", "Hanken Grotesk", "Segoe UI", sans-serif;
  --serif: ui-serif, "New York", "Newsreader", Georgia, serif;

  --gutter: clamp(20px, 5vw, 72px);
  --max: 1240px;

  --soft:   cubic-bezier(.2, .7, .2, 1);
  --spring: cubic-bezier(.3, 1.9, .5, 1);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  --puff-dark:  rgba(10, 20, 36, .45);
  --puff-light: rgba(255, 255, 255, .14);
}

* { box-sizing: border-box; }

html {
  background: var(--paper-low);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--text);
  font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
p, h1, h2, figure, blockquote { margin: 0; }
button { font: inherit; color: inherit; }
i { font-style: normal; }

::selection { background: var(--lamp-soft); color: var(--ink); }

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

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--pearl);
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}
.skip:focus { left: 12px; top: 12px; }

/* Night paper ----------------------------------------------------------- */

.paper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(farthest-corner at 50% 45%, transparent 36%, rgba(1, 4, 16, .5) 100%),
    radial-gradient(ellipse 110% 92% at 50% 16%, var(--paper-top) 0%, var(--paper-mid) 42%, var(--paper-low) 74%, var(--paper-edge) 100%);
}
.paper__grain,
.paper__depth { position: absolute; inset: 0; }
.paper__grain {
  background: var(--grain) 0 0 / 240px 240px;
  mix-blend-mode: overlay;
  opacity: .26;
}
/* Extra dusk while a breath is let go */
.paper__depth {
  background: #000;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
}
.paper__depth.is-deep { opacity: .34; }

/* Masthead -------------------------------------------------------------- */

.top {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: calc(env(safe-area-inset-top, 0px) + clamp(16px, 2.4vw, 26px)) var(--gutter) 34px;
  background: linear-gradient(180deg, rgba(5, 15, 40, .86), rgba(5, 15, 40, 0));
  pointer-events: none;
}
.top > * { pointer-events: auto; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  font: 500 17px/1 var(--round);
  letter-spacing: .005em;
}
.brand img { border-radius: 7px; }

.clock {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 400 15px/1 var(--round);
  font-variant-numeric: tabular-nums;
  letter-spacing: .03em;
  color: var(--mist);
}
.clock i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pearl);
  box-shadow: inset -1px -2px 2px var(--puff-dark);
}

/* Shared type ----------------------------------------------------------- */

h1, h2 {
  font-family: var(--round);
  font-weight: 300;
  text-wrap: balance;
}

em { font-style: normal; color: var(--lamp-soft); }

.stamp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 500 15px/1 var(--round);
  font-variant-numeric: tabular-nums;
  letter-spacing: .05em;
  color: var(--lamp-soft);
}
.stamp::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pearl);
}

.fact {
  max-width: 34ch;
  font-size: clamp(17px, 1.3vw, 19px);
  color: var(--mist);
}

.hint {
  font: 400 15px/1.3 var(--round);
  letter-spacing: .02em;
  color: var(--mist);
  text-align: center;
}
.hint--left { text-align: left; }

.label {
  font: 500 12px/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
}

/* Reveal: gated on .js so the page is whole if the script never runs */
.js .rise {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s var(--soft), transform .9s var(--soft);
}
.js .rise.is-in { opacity: 1; transform: none; }

/* Hero ------------------------------------------------------------------ */

.hero {
  padding-block: clamp(104px, 14vh, 150px) clamp(56px, 8vw, 100px);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: center;
  gap: 40px clamp(24px, 5vw, 80px);
  min-height: min(74svh, 700px);
}

.hero__copy {
  display: grid;
  justify-items: start;
  gap: clamp(22px, 2.6vw, 34px);
}

.hero h1 {
  font-size: clamp(46px, 7.7vw, 114px);
  line-height: 1.02;
  letter-spacing: -.028em;
}

/* Titles arrive a word at a time, each coming into focus */
.words span {
  display: inline-block;
  animation: word .7s var(--soft) both;
  animation-delay: calc(.95s + var(--i) * .1s);
}
@keyframes word {
  from { opacity: 0; transform: translateY(12px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

.lede {
  max-width: 26ch;
  font: 400 clamp(19px, 1.7vw, 24px)/1.4 var(--round);
  color: var(--mist);
  animation: settle 1s var(--soft) 1.5s both;
}

.soon {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px 13px 17px;
  border-radius: 999px;
  background: var(--card);
  font: 400 15px/1 var(--round);
  letter-spacing: .02em;
  color: var(--text);
  animation: settle 1s var(--soft) 1.65s both;
}
/* Six breaths a minute */
.soon i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lamp);
  animation: idle 10s ease-in-out infinite;
}
@keyframes idle {
  0%, 100% { opacity: .45; transform: scale(.8); }
  40%      { opacity: 1;   transform: scale(1.25); }
}
@keyframes settle {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* The pearl disc: drops onto the paper, lands with a squash, and breathes
   with you while you hold it. */

.hero__breath {
  display: grid;
  justify-items: center;
  gap: clamp(34px, 4vw, 52px);
}

.disc {
  --d: clamp(150px, 24vw, 300px);
  position: relative;
  width: var(--d);
  height: var(--d);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.disc:focus-visible { outline-offset: 14px; border-radius: 50%; }

.disc__shadow {
  position: absolute;
  left: 50%;
  bottom: calc(var(--d) * -.075);
  width: calc(var(--d) * 1.15);
  height: calc(var(--d) * .16);
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
  animation: ground .5s ease-out .3s both;
}
.disc__lift,
.disc__swell,
.disc__body {
  position: absolute;
  inset: 0;
  transform-origin: 50% 100%;
}
.disc__lift  { animation: fall .44s cubic-bezier(.5, 0, .9, .6) .25s both; }
.disc__swell { transition: transform 4s cubic-bezier(.45, .05, .55, .95); }
.disc.is-in  .disc__swell { transform: scale(1.3); }
.disc.is-out .disc__swell { transition-duration: 6s; }

.disc__body {
  display: grid;
  place-items: center;
  border-radius: 50.9% 49.1% 49.3% 50.7% / 49.2% 50.8% 49.2% 50.8%;
  background: var(--grain) 0 0 / 240px 240px, var(--pearl);
  background-blend-mode: soft-light;
  box-shadow:
    inset calc(var(--d) * -.035) calc(var(--d) * -.045) calc(var(--d) * .07) var(--puff-dark),
    inset calc(var(--d) * .035) calc(var(--d) * .045) calc(var(--d) * .07) var(--puff-light);
  animation: land .62s linear .69s both;
}
.disc__count {
  font: 300 calc(var(--d) * .3)/1 var(--round);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  opacity: .82;
}

@keyframes fall {
  from { transform: translateY(calc(var(--d) * -2.2)); opacity: 0; }
  20%  { opacity: 1; }
  to   { transform: none; opacity: 1; }
}
@keyframes land {
  0%   { transform: none; }
  16%  { transform: scale(1.17, .83); }
  44%  { transform: scale(.95, 1.05); }
  70%  { transform: scale(1.03, .97); }
  100% { transform: none; }
}
@keyframes ground {
  from { opacity: 0; transform: translateX(-50%) scaleX(.4); }
  to   { opacity: 1; transform: translateX(-50%); }
}

/* The hours ------------------------------------------------------------- */

.hour {
  position: relative;
  padding-block: clamp(84px, 12vw, 160px);
}

.hour__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: 48px clamp(32px, 6vw, 96px);
}

.hour__head {
  display: grid;
  justify-items: start;
  gap: 18px;
}
.hour--split .hour__head { position: sticky; top: 116px; }

.hour h2 {
  font-size: clamp(36px, 4.8vw, 64px);
  line-height: 1.04;
  letter-spacing: -.022em;
}

.hour__demo { display: grid; justify-items: start; min-width: 0; }

/* Timetable -------------------------------------------------------------- */

.timetable {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 36px clamp(28px, 4vw, 56px);
  width: 100%;
}

.dial {
  position: relative;
  flex: none;
  width: min(360px, 100%);
  aspect-ratio: 1;
}
.dial svg { width: 100%; height: 100%; overflow: visible; }
.dial__track { fill: none; stroke: rgba(255, 255, 255, .06); stroke-width: 34; }
.dial__night { fill: none; stroke: url(#nightArc); stroke-width: 26; stroke-linecap: round; }
.dial__ticks line { stroke: rgba(255, 255, 255, .16); stroke-width: 1.2; stroke-linecap: round; }
.dial__ticks .major { stroke: rgba(255, 255, 255, .42); stroke-width: 2; }
.dial__mark {
  font: 600 10px var(--round);
  letter-spacing: .04em;
  fill: var(--mist);
  fill-opacity: .7;
  text-anchor: middle;
}

.knob { cursor: grab; touch-action: none; outline: none; }
.knob:active { cursor: grabbing; }
.knob__hit   { fill: transparent; }
.knob__face  { fill: var(--knob); stroke: rgba(216, 223, 233, .62); stroke-width: 1.5; transition: stroke .2s ease, stroke-width .2s ease; }
.knob__glyph { fill: var(--pearl); }
.knob__rays  { fill: none; stroke: var(--pearl); stroke-width: 1.6; stroke-linecap: round; }
.knob:hover .knob__face,
.knob.is-held .knob__face { stroke: var(--lamp-soft); }
.knob:focus-visible .knob__face { stroke: var(--lamp-soft); stroke-width: 3; }

.dial__read {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 7px;
  padding-top: 4px;
  pointer-events: none;
}
.dial__hours {
  font: 300 31px/1 var(--round);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.dial__span {
  font: 400 12.5px/1 var(--round);
  font-variant-numeric: tabular-nums;
  color: var(--mist);
}

.timetable__side {
  flex: 1 1 240px;
  display: grid;
  gap: 16px;
  min-width: 0;
}

.plan {
  list-style: none;
  margin: 0;
  padding: 0;
}
.plan li {
  display: grid;
  grid-template-columns: 5.4em minmax(0, 1fr);
  align-items: baseline;
  gap: 14px;
  padding-block: 13px;
  border-top: 1px solid var(--line);
}
.plan time {
  font: 400 15px/1.3 var(--round);
  font-variant-numeric: tabular-nums;
  color: var(--lamp-soft);
}
.plan span { font-size: 16px; line-height: 1.35; }

/* Sounds: the catalogue as river stones, sized by what's in it ---------- */

.pebbles {
  --u: clamp(.56px, calc((100vw - 2 * var(--gutter) - 200px) / 961), .94px);
  list-style: none;
  margin: clamp(52px, 7vw, 92px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 36px clamp(14px, 2.2vw, 30px);
}

.pebble {
  display: grid;
  justify-items: center;
  gap: 18px;
}
/* Where the stone touches the paper */
.pebble::before {
  content: "";
  grid-area: 1 / 1;
  align-self: end;
  width: 108%;
  height: calc(var(--s) * var(--u) * .13);
  transform: translateY(46%);
  background: radial-gradient(closest-side, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
}
.pebble b {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  width: calc(var(--s) * var(--u));
  height: calc(var(--s) * var(--u) * .84);
  border-radius: 47% 53% 51% 49% / 57% 60% 40% 43%;
  background: var(--grain) 0 0 / 240px 240px, var(--stone);
  background-blend-mode: soft-light;
  box-shadow:
    inset calc(var(--s) * var(--u) * -.035) calc(var(--s) * var(--u) * -.045) calc(var(--s) * var(--u) * .075) var(--puff-dark),
    inset calc(var(--s) * var(--u) * .035) calc(var(--s) * var(--u) * .045) calc(var(--s) * var(--u) * .075) var(--puff-light);
  font: 300 calc(var(--s) * var(--u) * .27)/1 var(--round);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: var(--ink);
  transform-origin: 50% 100%;
  transition: transform .5s var(--spring);
}
.pebble:nth-child(2n) b { border-radius: 52% 48% 49% 51% / 60% 56% 44% 40%; }
.pebble:nth-child(3n) b { border-radius: 49% 51% 53% 47% / 55% 61% 39% 45%; }
.pebble:hover b  { transform: scale(1.035, .965); }
.pebble:active b { transform: scale(1.09, .9); transition: transform .1s ease-out; }
.pebble span { font-size: 15px; line-height: 1; color: var(--mist); }

.pebble--pearl { --stone: var(--pearl); }
.pebble--sky   { --stone: var(--sky); }
.pebble--deep  { --stone: var(--deep); }
.pebble--deep b { color: var(--pearl); }

.js .pebbles:not(.is-in) .pebble { opacity: 0; }
.pebbles.is-in .pebble b { animation: plop .8s linear both; animation-delay: calc(var(--i) * 90ms); }
.pebbles.is-in .pebble::before,
.pebbles.is-in .pebble span { animation: settle .6s ease-out both; animation-delay: calc(var(--i) * 90ms + 260ms); }
@keyframes plop {
  0%   { opacity: 0; transform: translateY(-46px) scale(.92); }
  34%  { opacity: 1; transform: translateY(0) scale(1.12, .84); }
  58%  { transform: scale(.96, 1.05); }
  80%  { transform: scale(1.02, .98); }
  100% { opacity: 1; transform: none; }
}

/* Answers: solid, never glass. They dent when pressed, spring back, and fill
   with light from where you touched. */

.answer {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 17px 20px;
  border: 0;
  border-radius: 18px;
  background: var(--card);
  color: var(--mist);
  font: 400 17px/1.2 var(--round);
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(169, 208, 242, .07);
  -webkit-tap-highlight-color: transparent;
  transition: transform .34s var(--spring), color .45s ease;
}
.answer::before,
.answer::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.answer::before {
  background: var(--card-lit);
  clip-path: circle(0% at var(--x, 50%) var(--y, 50%));
  transition: clip-path .6s var(--soft);
}
.answer::after {
  box-shadow: inset 0 0 0 1px rgba(126, 182, 232, .5), inset 0 0 26px rgba(126, 182, 232, .14);
  opacity: 0;
  transition: opacity .5s ease;
}
.answer > span { position: relative; }
.answer:active { transform: scale(.965); transition: transform .1s ease-out, color .45s ease; }
.answer.is-on { color: var(--text); }
.answer.is-on::before { clip-path: circle(160% at var(--x, 50%) var(--y, 50%)); }
.answer.is-on::after  { opacity: 1; }
.answer__d {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  color: var(--dim);
  transition: color .45s ease;
}
.answer.is-on .answer__d { color: var(--lit-detail); }

/* Breathing --------------------------------------------------------------- */

.methods {
  display: grid;
  gap: 8px;
  width: min(360px, 100%);
  margin-top: 14px;
}
.also { max-width: 36ch; font-size: 15px; color: var(--dim); }

#breathing .hour__demo { justify-items: center; }

.pacer {
  display: grid;
  justify-items: center;
  gap: 6px;
  width: min(420px, 100%);
}
.pacer__count {
  min-height: 46px;
  font: 300 46px/1 var(--round);
  font-variant-numeric: tabular-nums;
}
.pacer__stage {
  position: relative;
  width: 280px;
  height: 276px;
}
.pacer__word { font: 400 22px/1.2 var(--round); }

.shape {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  opacity: 0;
  transform: scale(.9);
  transition: opacity .45s ease, transform .6s cubic-bezier(.3, 1.5, .5, 1);
}
.pacer[data-method="soft"]  .shape--soft,
.pacer[data-method="lunar"] .shape--lunar,
.pacer[data-method="box"]   .shape--box { opacity: 1; transform: none; }

.contact {
  position: absolute;
  left: 50%;
  top: calc(50% + 108px);
  width: 196px;
  height: 22px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(10, 20, 36, .6), rgba(10, 20, 36, 0));
}

/* Soft still: a vessel of water */
.vessel {
  --level: .62;
  --wob: 0;
  --slosh: .3;
  position: relative;
  width: 208px;
  height: 208px;
  overflow: hidden;
  border-radius: 50.8% 49.2% 49.4% 50.6% / 49.3% 50.7% 49.3% 50.7%;
  background: rgba(42, 63, 99, .55);
  transform-origin: 50% 69%;
  transform: scale(
    calc((1 + .045 * var(--level)) * (1 + .03 * var(--wob))),
    calc((1 + .045 * var(--level)) * (1 - .03 * var(--wob))));
}
.vessel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1.5px rgba(216, 223, 233, .5),
    inset -7px -9px 14px rgba(10, 20, 36, .4),
    inset 7px 9px 14px rgba(255, 255, 255, .1);
}
.vessel__water {
  position: absolute;
  inset: 0;
  background: var(--sky);
  transform: translateY(calc((.923 - .827 * var(--level)) * 100%));
}
.vessel__water::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - 1px);
  height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104 10' preserveAspectRatio='none'%3E%3Cpath d='M0 5Q13 0 26 5T52 5T78 5T104 5V10H0Z' fill='%2393B6D8'/%3E%3C/svg%3E") 0 0 / 104px 10px repeat-x;
  transform-origin: 50% 100%;
  transform: scaleY(var(--slosh));
  animation: drift 5s linear infinite;
}
@keyframes drift { to { background-position-x: -104px; } }

/* Lunar calm: the moon's phases. The dark side is the page behind it. */
.moon {
  --cut: 151px;
  --wob: 0;
  --level: .62;
  width: 200px;
  height: 200px;
  border-radius: 49.2% 50.8% 50.6% 49.4% / 50.7% 49.3% 50.7% 49.3%;
  background: var(--grain) 0 0 / 240px 240px, var(--pearl);
  background-blend-mode: soft-light;
  box-shadow: inset -8px -10px 16px var(--puff-dark), inset 8px 10px 16px var(--puff-light);
  -webkit-mask-image: radial-gradient(circle at calc(50% + var(--cut)) 50%, transparent 0 104px, #000 110px);
          mask-image: radial-gradient(circle at calc(50% + var(--cut)) 50%, transparent 0 104px, #000 110px);
  transform: scale(
    calc((1 + .035 * var(--level)) * (1 + .035 * var(--wob))),
    calc((1 + .035 * var(--level)) * (1 - .035 * var(--wob))));
}

/* Box breathing: four soft tiles, one turns over for each side */
.shape--box {
  grid-template-columns: repeat(2, 92px);
  gap: 8px;
}
.tile {
  --lit: 0;
  --flip: 1;
  --sq: 0;
  position: relative;
  width: 92px;
  height: 92px;
  border-radius: 26px;
  background: rgba(147, 182, 216, .24);
  box-shadow:
    inset 4px 6px 10px rgba(255, 255, 255, .18),
    inset -4px -6px 10px rgba(10, 20, 36, .16),
    inset 0 0 0 1.5px rgba(216, 223, 233, .22);
  transform: scale(calc(max(.03, var(--flip)) * (1 + .09 * var(--sq))), calc(1 - .09 * var(--sq)));
}
.tile b {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--pearl);
  box-shadow: inset -5px -7px 10px var(--puff-dark), inset 5px 7px 10px var(--puff-light);
  opacity: var(--lit);
}

/* Rooms ------------------------------------------------------------------ */

.rooms {
  display: grid;
  gap: 18px;
  width: min(560px, 100%);
}
.rooms__q {
  font: 400 clamp(25px, 2.6vw, 31px)/1.15 var(--round);
  letter-spacing: -.012em;
}
.answers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.echo {
  min-height: 1.5em;
  padding-top: 6px;
  font: 400 18px/1.4 var(--round);
  color: var(--mist);
}
.echo.is-new { animation: settle .5s ease-out both; }

.doors {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.doors li {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 18px 18px 20px;
  border-radius: 18px;
  background: var(--card);
}
.doors.is-new li { animation: door .6s var(--soft) both; animation-delay: calc(var(--i, 0) * 80ms + 120ms); }
.doors b    { font: 400 19px/1.2 var(--round); }
.doors span { font-size: 14px; line-height: 1.45; color: var(--mist); }
@keyframes door {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* Sleep tracking ---------------------------------------------------------- */

.cover {
  display: grid;
  gap: 20px;
  width: min(640px, 100%);
}
.cover canvas { width: 100%; height: auto; aspect-ratio: 640 / 260; }
.cover figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  font-size: 14px;
  color: var(--mist);
}
.key { display: inline-flex; align-items: center; gap: 10px; }
.key::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.key--snore::before { background: var(--pearl); opacity: .6; }
.key--sound::before { background: var(--lamp); }

/* Moony: no avatar. The night itself listens and answers. ---------------- */

.hour--sky {
  display: grid;
  min-height: clamp(580px, 94vh, 840px);
  padding-block: 0;
}
.sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 90%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 16%, #000 90%, transparent);
}
.sky__inner {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: space-between;
  gap: 72px;
  padding-block: clamp(84px, 12vw, 160px);
}

.presence {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px clamp(16px, 2.6vw, 34px);
  width: min(780px, 100%);
}
.presence__b {
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 16px 0 6px;
  border: 0;
  border-top: 1.5px solid rgba(216, 223, 233, .14);
  background: none;
  color: var(--dim);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .6s ease, border-color .6s ease;
}
.presence__b b    { font: 400 22px/1.2 var(--round); }
.presence__b span { font-size: 15px; line-height: 1.4; }
.presence__b:hover { color: var(--mist); }
.presence__b.is-on { color: var(--text); border-top-color: var(--lamp-soft); }
.presence__b.is-on span { color: var(--mist); }

/* Calming words ----------------------------------------------------------- */

.story {
  display: grid;
  gap: 26px;
  width: min(580px, 100%);
}
.story__said {
  display: grid;
  gap: 10px;
  font: 400 18px/1.4 var(--round);
  color: var(--mist);
}
.story__read {
  font: 400 clamp(25px, 2.8vw, 35px)/1.34 var(--serif);
  letter-spacing: -.006em;
  text-wrap: pretty;
}
.story__read.is-reading .w { color: rgba(162, 182, 204, .34); transition: color .6s ease; }
.story__read.is-reading .w.is-read { color: var(--text); }
.story__read.is-reading .w.is-now  { color: var(--lamp-soft); transition-duration: .15s; }

/* Morning ----------------------------------------------------------------- */

.dawn {
  padding-block: clamp(90px, 13vw, 170px) clamp(64px, 9vw, 120px);
}
.dawn__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: 52px clamp(32px, 6vw, 96px);
}

/* The window from the app icon, cut into the paper */
.arch {
  position: relative;
  justify-self: center;
  overflow: hidden;
  width: min(290px, 62vw);
  aspect-ratio: 488 / 855;
  border-radius: 50% 50% 0 0 / 28.54% 28.54% 0 0;
  background: linear-gradient(180deg,
    #5A61AD 0%, #6A6EB6 34%, #8780BF 58%, #A48FC8 70.5%, #D9A7D6 73.4%,
    #8E86C2 74.2%, #6E72B6 80%, #535BA4 90%, #424C93 100%);
}
.arch::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grain) 0 0 / 240px 240px;
  mix-blend-mode: soft-light;
  opacity: .5;
  box-shadow: inset 8px 12px 28px rgba(3, 10, 28, .4);
}
.arch__moon {
  position: absolute;
  left: 50%;
  top: 34.7%;
  width: 53%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 44% 40%, #F2EDF6 0%, #E3DCEE 55%, #D6CEE6 100%);
}
.arch__path {
  position: absolute;
  left: 30%;
  right: 30%;
  top: 75.4%;
  bottom: 5%;
  background: repeating-linear-gradient(180deg, rgba(240, 232, 246, .34) 0 2px, transparent 2px 9px);
  -webkit-mask-image: radial-gradient(ellipse 50% 62% at 50% 22%, #000, transparent);
          mask-image: radial-gradient(ellipse 50% 62% at 50% 22%, #000, transparent);
}

.dawn__copy {
  display: grid;
  justify-items: start;
  gap: 22px;
}
.dawn h2 {
  max-width: 12ch;
  font-size: clamp(38px, 5.6vw, 76px);
  line-height: 1.03;
  letter-spacing: -.026em;
}
.dawn .fact { max-width: 30ch; }
.dawn .fact a {
  color: var(--lamp-soft);
  text-decoration-color: rgba(169, 208, 242, .35);
  text-underline-offset: 5px;
  transition: text-decoration-color .3s ease;
}
.dawn .fact a:hover { text-decoration-color: var(--lamp-soft); }
.fine {
  max-width: 44ch;
  padding-top: 18px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--dim);
}

/* Foot -------------------------------------------------------------------- */

.foot { padding-block: 26px calc(env(safe-area-inset-bottom, 0px) + 38px); }
.foot__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  font: 400 13.5px/1.4 var(--round);
  color: var(--dim);
}

/* Narrower screens -------------------------------------------------------- */

@media (max-width: 1000px) {
  .hour__grid,
  .dawn__grid { grid-template-columns: minmax(0, 1fr); }
  .hour--split .hour__head { position: static; }
  #breathing .hour__grid { gap: 18px; }
  #breathing .hour__head,
  #breathing .hour__demo { display: contents; }
  #breathing .pacer    { order: 1; justify-items: start; margin-block: 22px 10px; }
  #breathing .methods  { order: 2; margin-top: 0; }
  #breathing .also     { order: 3; }
  .pacer__stage { margin-left: -24px; }
  .arch { justify-self: start; width: min(220px, 52vw); }
}

@media (max-width: 760px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 44px; }
  .hero__breath { order: -1; justify-items: start; gap: 30px; }
  .hero__breath .hint { text-align: left; }
  .disc { --d: 132px; }
  .pebbles { gap: 30px 14px; }
  .presence { grid-template-columns: minmax(0, 1fr); }
  .doors { grid-template-columns: minmax(0, 1fr); }
  .doors li { padding: 16px 18px 17px; gap: 5px; }
  .presence__b { padding-bottom: 12px; }
}

@media (max-width: 420px) {
  .pacer__stage { transform: scale(.9); transform-origin: 0 50%; }
  .answer { padding: 16px 16px; }
  .plan li { grid-template-columns: 4.9em minmax(0, 1fr); gap: 10px; }
}

/* Reduced motion ----------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .js .rise { opacity: 1; transform: none; }
  .js .pebbles:not(.is-in) .pebble { opacity: 1; }
}