/* Minde Journal. The app's design system, carried to the web:
   black is the room, Minde is the light, dots are the material, and some pages hold still. */

:root {
  --bg: #000;
  --surface: #0d0d0f;
  --raised: #161618;
  --hairline: rgba(255, 255, 255, 0.07);
  --hairline-strong: rgba(255, 255, 255, 0.12);
  --highlight: rgba(255, 255, 255, 0.045);
  --ink: #ededed;
  --on-ink: #000;
  --muted: #8a8a8f;
  --dim: #4a4a50;
  --dot-off: #26262a;
  --ember: #ff5a36;
  --glow: #ff9660;
  --amber: #ffb36b;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  /* one app point on this screen: every size in the example is a multiple of it */
  --u: clamp(0.8px, min(0.162vh, 0.236vw), 1.6px);
  --gutter: clamp(20px, 5vw, 64px);
  --vh: 100vh;
  --lvh: 100vh;
  --h: 1vh;
}
@supports (height: 100svh) {
  :root { --u: clamp(0.8px, min(0.162svh, 0.236vw), 1.6px); --vh: 100svh; --h: 1svh; }
}
@media (prefers-contrast: more) {
  :root { --hairline: rgba(255, 255, 255, 0.38); --hairline-strong: rgba(255, 255, 255, 0.5); --ink: #fff; --muted: #a8a8ae; --dim: #808086; --dot-off: #3a3a40; --ember: #ff6a47; --amber: #ffc285; }
}

* { box-sizing: border-box; }
html { font-size: 106.25%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
/* On an iPhone the page follows the system's text size, up to its largest ordinary step (23px). The accessibility
   sizes above that would grow only the body text (most sizes here are fixed, to match the app's screens) and leave
   paragraphs towering over their headings; Safari's own page zoom still enlarges everything. */
@supports (font: -apple-system-body) and (-webkit-touch-callout: none) {
  html { font: -apple-system-body; }
  :root { --body: min(1rem, 23px); }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--body, 1rem);
  line-height: 1.53;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
/* .kbfocus: focus put back by the page after one of its own reloads, where the keyboard had put it there (show.js) */
:focus-visible, .kbfocus { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.label, .micro {
  font-family: var(--mono);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--muted);
}
.label { font-size: 12px; line-height: 16px; letter-spacing: 1px; }
.micro { font-size: 11px; line-height: 14px; letter-spacing: 0.9px; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left)); }
.wrap--narrow { max-width: 760px; }

/* hidden by its own height, so it stays hidden however large the text is */
.skip { position: fixed; left: max(12px, env(safe-area-inset-left)); top: 0; transform: translateY(calc(-100% - 12px)); z-index: 50; background: var(--ink); color: var(--on-ink); padding: 10px 16px; border-radius: 999px; text-decoration: none; font-weight: 500; }
.skip:focus { top: max(12px, env(safe-area-inset-top)); transform: none; }

/* ---------- the header: still, from first paint ---------- */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  height: 60px; padding: 0 var(--gutter);
  padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right));
  background: linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
  pointer-events: none;
}
.top > * { pointer-events: auto; }
/* Where the page scrolls under the header, the header gets a backing, so words passing beneath don't read through
   its own. show.js sets .top-solid. Over the show, the rest and the close it stays clear: nothing is laid out
   under it there, and the light shows through. */
.top::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, 0.86); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--hairline); opacity: 0; transition: opacity 0.24s var(--ease-soft); pointer-events: none; }
html.top-solid .top::before { opacity: 1; }
.wordmark { font-size: 17px; font-weight: 500; letter-spacing: -0.2px; text-decoration: none; padding: 12px 0; }
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid transparent;
  background: rgba(22, 22, 24, 0.88); box-shadow: inset 0 0 0 1px var(--hairline-strong);
  font-size: 15px; line-height: 21px; font-weight: 500; color: var(--ink); text-decoration: none; cursor: pointer;
  transition: transform 0.3s var(--ease-out);
}
.pill:active { transform: scale(0.97); }
.pill--plain { background: none; cursor: default; font-family: var(--mono); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink); }
.pill--plain:active { transform: none; }
.pill--ink { background: var(--ink); color: var(--on-ink); box-shadow: none; min-height: 52px; padding: 0 28px; font-size: 17px; }
.textlink { text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: rgba(255, 255, 255, 0.35); padding: 12px 4px; }
.textlink:hover { text-decoration-color: var(--ink); }

/* ---------- the example's pieces ---------- */
.stage { position: relative; }
.lightbox, .scrim { display: none; }
.slot { position: relative; flex: none; aspect-ratio: 1; }
.slot--hero { width: min(calc(236 * var(--u)), calc(35 * var(--h))); }
.slot--talk { width: calc(228 * var(--u)); }
.slot--home { width: calc(168 * var(--u)); }
.slot--ask { width: calc(120 * var(--u)); }
.orbimg { position: absolute; left: 50%; top: 50%; width: 114%; max-width: none; height: auto; transform: translate(-50%, -50%); pointer-events: none; user-select: none; }
.orbimg--dim { opacity: 0.5; }
.orbimg--light { width: 100%; }

.echo { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ember); margin-right: 9px; vertical-align: 1px; }
.ai { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; margin-left: 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--hairline-strong); font: inherit; font-size: 11px; letter-spacing: 0.9px; vertical-align: 1px; }
.statelabel { min-height: 18px; }
.statelabel span { display: inline-block; white-space: nowrap; }
.beat--year .statelabel span { white-space: normal; }          /* the one long label: it wraps before it runs into the example beside it */

.beat { padding: 72px max(var(--gutter), env(safe-area-inset-right)) 72px max(var(--gutter), env(safe-area-inset-left)); max-width: 760px; margin: 0 auto; }
.beat--hero { padding-top: 96px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.beat--hero .slot { margin: 28px 0 32px; }
.beat--hero .orbimg { opacity: 1; }
h1 {
  font-size: clamp(44px, min(11.4vw, calc(12 * var(--h))), 108px);
  line-height: 0.98; font-weight: 300; letter-spacing: -0.045em; text-wrap: balance;
}
.lede { max-width: 31em; margin-top: 24px; color: var(--muted); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; text-wrap: balance; }
.cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 20px; margin-top: 28px; }
.facts { margin-top: 20px; color: var(--muted); font-size: 13px; line-height: 18px; }
.more { display: inline-block; margin-top: 18px; padding: 10px 6px; color: var(--muted); font-size: 13px; line-height: 18px; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, 0.2); }
.more:hover { color: var(--ink); }

.cap { max-width: 30em; }
.cap h2 { margin-top: 14px; font-size: clamp(30px, min(4.3vw, calc(6.6 * var(--h))), 58px); line-height: 1.06; font-weight: 400; letter-spacing: -0.035em; text-wrap: balance; }
.cap__text > p:not(.sr) { margin-top: 16px; color: var(--muted); max-width: 27em; text-wrap: pretty; }

.scr { position: relative; width: min(100%, calc(390 * var(--u))); margin: 40px auto 0; display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
.scr .slot { align-self: center; }
.scr .micro { font-size: calc(11 * var(--u)); line-height: calc(14 * var(--u)); letter-spacing: calc(0.9 * var(--u)); }

.spoken { font-size: calc(25 * var(--u)); line-height: calc(32 * var(--u)); letter-spacing: calc(-0.25 * var(--u)); }
.answer { font-size: calc(22 * var(--u)); line-height: calc(30 * var(--u)); letter-spacing: calc(-0.2 * var(--u)); }
.w { display: inline-block; white-space: pre; }
.thinking { text-align: center; color: var(--muted); font-size: calc(15 * var(--u)); line-height: calc(21 * var(--u)); }
.notice { display: flex; align-items: center; gap: calc(7 * var(--u)); color: var(--muted); font-size: calc(13 * var(--u)); line-height: calc(18 * var(--u)); }
.info { flex: none; width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: 50%; box-shadow: inset 0 0 0 1px var(--muted); position: relative; }
.info::before { content: ""; position: absolute; left: 50%; top: 27%; width: 1px; height: 12%; background: var(--muted); }
.info::after { content: ""; position: absolute; left: 50%; top: 46%; width: 1px; height: 30%; background: var(--muted); }
.note { color: var(--muted); font-size: 13px; line-height: 18px; text-align: center; margin-top: 24px; }

.chips { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); }
.chip {
  display: inline-flex; align-items: center; gap: calc(7 * var(--u));
  height: calc(30 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: calc(15 * var(--u));
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
  font-family: var(--mono); font-weight: 500; text-transform: uppercase; color: var(--ink);
  font-size: calc(11 * var(--u)); letter-spacing: calc(0.9 * var(--u));
}
.chip__dot, .row__dot { flex: none; width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: var(--ink); }
.edit { display: flex; align-items: center; gap: calc(8 * var(--u)); color: var(--muted); font-size: calc(15 * var(--u)); line-height: calc(21 * var(--u)); }
.pencil { width: calc(11 * var(--u)); height: calc(11 * var(--u)); border-bottom: 1px solid var(--muted); border-left: 1px solid var(--muted); transform: skew(-12deg); opacity: 0.8; }
.acts { display: flex; gap: calc(10 * var(--u)); margin-top: calc(6 * var(--u)); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; flex: 1; height: calc(52 * var(--u)); border: 0; border-radius: calc(26 * var(--u)); cursor: pointer;
  font-size: calc(17 * var(--u)); font-weight: 500; letter-spacing: calc(-0.2 * var(--u));
  transition: transform 0.3s var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn--ink { flex: 1.5; background: var(--ink); color: var(--on-ink); }
.btn--glass { background: linear-gradient(rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px var(--hairline-strong); color: var(--ink); }

.hint { display: grid; justify-items: center; color: var(--muted); font-size: calc(15 * var(--u)); line-height: calc(21 * var(--u)); }
.hint span { grid-area: 1 / 1; white-space: nowrap; }
.hint .echo, .says .echo { width: calc(7 * var(--u)); height: calc(7 * var(--u)); }
.rowhead { font-size: calc(17 * var(--u)); line-height: calc(22 * var(--u)); font-weight: 500; letter-spacing: calc(-0.2 * var(--u)); margin-top: calc(4 * var(--u)); }
.rows { display: flex; flex-direction: column; }
.row { display: flex; align-items: flex-start; gap: calc(12 * var(--u)); padding: calc(13 * var(--u)) 0; border-top: 1px solid var(--hairline); }
.row__dot { margin-top: calc(4 * var(--u)); }
.row__body { flex: 1; min-width: 0; }
.row__title { margin-top: calc(3 * var(--u)); font-size: calc(17 * var(--u)); line-height: calc(22 * var(--u)); font-weight: 500; letter-spacing: calc(-0.2 * var(--u)); }
.row__text { margin-top: calc(2 * var(--u)); color: var(--muted); font-size: calc(15 * var(--u)); line-height: calc(21 * var(--u)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.thumb { flex: none; position: relative; width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: calc(10 * var(--u)); overflow: hidden; }
.thumb::after, .photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(0, 0, 0, 0.55) 1px, transparent 1.3px) 0 0 / 5px 5px; }
.thumb--lake { background: linear-gradient(#a9b3bf 0 44%, #46505b 44% 60%, #20252b 60%); }
.thumb--bay { background: linear-gradient(#57608a, #a98fa6 55%, #d9a98a 72%, #39384a 72%); }
.thumb--pasta { background: radial-gradient(circle at 50% 55%, #e9d18a, #a98a3e 60%, #4a3c1c); }
.thumb--garden { background: radial-gradient(circle at 40% 45%, #9fb873, #4d6a3a 60%, #24331c); }

.asked__q { margin-top: calc(6 * var(--u)); color: var(--muted); font-size: calc(17 * var(--u)); line-height: calc(26 * var(--u)); }
.from { margin-top: calc(4 * var(--u)); }
.rows--src .row__text { -webkit-line-clamp: 1; }
.rows--src .row { padding: calc(10 * var(--u)) 0; }
.support span { color: var(--muted); font-size: calc(13 * var(--u)); line-height: calc(18 * var(--u)); }
html.cine .support span { cursor: pointer; }
.cite { transition: color 0.12s linear; }

.year__title { margin-top: calc(6 * var(--u)); font-size: calc(22 * var(--u)); line-height: calc(30 * var(--u)); letter-spacing: calc(-0.2 * var(--u)); }
.year__num { margin-top: calc(10 * var(--u)); color: var(--muted); font-size: calc(13 * var(--u)); }
.year__num b { color: var(--ink); font-size: calc(56 * var(--u)); line-height: 1; font-weight: 300; letter-spacing: calc(-2 * var(--u)); font-variant-numeric: tabular-nums; margin-right: calc(6 * var(--u)); }
.year__sub { margin-top: calc(4 * var(--u)); color: var(--muted); font-size: calc(13 * var(--u)); line-height: calc(18 * var(--u)); }
.year__label { margin-top: calc(8 * var(--u)); }
.year__grid { position: relative; width: 100%; aspect-ratio: 33 / 12.4; }
.year__grid i { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); }
/* on the moving page the canvas draws the year's dots; these stay for paper */
@media screen { html.cine .year__grid i { display: none; } }
.year__grid b { position: absolute; left: 0; transform: translateY(-50%); font: 500 calc(9 * var(--u)) / 1 var(--mono); color: var(--muted); }
.year__note { color: var(--muted); font-size: calc(13 * var(--u)); line-height: calc(18 * var(--u)); }

/* ---------- the still page: Reduce Motion, Pause motion, no WebGL, no JavaScript ---------- */
.beat + .beat { border-top: 1px solid var(--hairline); }
.beat--title .thinking, .beat--ask .thinking, .beat--ask [data-g="labAsking"], .beat--ask [data-g="labThinking2"], .beat--title [data-g="labThinking"], .hint [data-k="hint1"] { display: none; }
html.static { scroll-behavior: auto; }
html.static .scr--talk { isolation: isolate; }
html.static .scr--talk::before {
  content: ""; position: absolute; inset: -24px -12px; z-index: -1;
  background: radial-gradient(circle, rgba(237, 237, 237, 0.42) 0.8px, transparent 1.3px) 50% 0 / 13px 13px;
  -webkit-mask: radial-gradient(circle at 50% calc(114 * var(--u) + 24px), transparent calc(70 * var(--u)), #000 calc(86 * var(--u)), transparent 72%);
  mask: radial-gradient(circle at 50% calc(114 * var(--u) + 24px), transparent calc(70 * var(--u)), #000 calc(86 * var(--u)), transparent 72%);
}
html.static [data-k="mark"], html.static [data-k="src1d"] { background: var(--ember); box-shadow: 0 0 10px 2px rgba(255, 150, 96, 0.9); }

/* ---------- the moving page ---------- */
/* The stage is as tall as the screen can ever be (on an iPhone, with Safari's bars away), so the light always
   reaches the bottom edge. What you read is laid out in the smaller height that is always visible. */
html.cine .show { height: calc((var(--screens, 8.6) - 1) * var(--vh) + var(--lvh)); }
html.cine .stage { position: sticky; top: 0; height: var(--lvh); overflow: hidden; overflow: clip; }
html.cine .lightbox { display: block; position: absolute; inset: 0; z-index: 0; }
html.cine .lightbox canvas { display: block; width: 100%; height: 100%; }
html.cine .scrim { display: block; position: absolute; z-index: 1; pointer-events: none; opacity: 0; }
html.cine .scrim--top { inset: 0 0 auto 0; height: calc(170 * var(--u)); background: linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0)); }
html.cine .scrim--text { inset: 50% 0 0 0; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.66)); }
html.cine .scrim--side { inset: 0 auto 0 0; width: 56%; background: linear-gradient(90deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.22) 50%, rgba(0, 0, 0, 0)); }
html.cine .cap__text { position: relative; }
html.cine .cap__text::before { content: ""; position: absolute; inset: -34% -26% -30% -40%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.6) 58%, rgba(0, 0, 0, 0)); }
html.cine .beat + .beat { border-top: 0; }
html.cine .beat {
  position: absolute; inset: 0 0 auto 0; height: var(--vh); z-index: 2; max-width: none; margin: 0;
  padding: 76px var(--gutter) 28px;
  padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right));
  pointer-events: none;
}
html.cine .beat a, html.cine .beat button, html.cine .beat [data-act] { pointer-events: auto; }
html.cine .beat--hero.off a { pointer-events: none; }
html.cine .beat--hero { justify-content: center; padding-bottom: 36px; }
html.cine .beat--hero .slot { margin: calc(3 * var(--h)) 0 calc(3.4 * var(--h)); }
html.cine .orbimg { transition: opacity 0.24s var(--ease-soft); }
html.cine .beat--hero .orbimg { opacity: 0.6; }
html.cine.lit .orbimg { opacity: 0; transition: none; }
html.cine:not(.ready) .beat:not(.beat--hero) { visibility: hidden; }
html.cine .beat:not(.beat--hero) [data-g], html.cine .scrim { opacity: 0; visibility: hidden; }
/* the words that explain each beat stay readable to a screen reader, whichever beat is showing */
html.cine .beat:not(.beat--hero) .cap [data-g] { visibility: visible; }
html.cine .beat--title .thinking, html.cine .beat--ask .thinking, html.cine .beat--ask [data-g="labAsking"], html.cine .beat--ask [data-g="labThinking2"], html.cine .beat--title [data-g="labThinking"], html.cine .hint [data-k="hint1"] { display: block; }
html.cine .statelabel { display: grid; }
html.cine .statelabel span { grid-area: 1 / 1; justify-self: start; }
html.cine .beat:not(.beat--hero) { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); row-gap: calc(10 * var(--u)); }
html.cine .scr { margin: 0 auto; height: 100%; justify-content: center; }
/* the talk beat's note is a row of its own below the example, so the words above never run into it */
html.cine .beat.beat--talk { grid-template-rows: auto minmax(0, 1fr) auto; }
html.cine .note { margin: 0 0 calc(max(14px, env(safe-area-inset-bottom)) - 28px); }
html.cine .scr--title { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: calc(14 * var(--u)); }
html.cine .scr--title .slot { justify-self: center; }
html.cine .scr--title .thinking, html.cine .scr--title .answer { grid-row: 3; grid-column: 1; }
html.cine .scr--title .answer { min-height: calc(60 * var(--u)); }
html.cine .scr--ask .thinking { position: absolute; left: 0; right: 0; top: 56%; }
html.cine .cap h2 { font-size: clamp(26px, min(4.3vw, calc(5.4 * var(--h))), 58px); }
html.cine .rowwrap { height: 0; overflow: hidden; }
html.cine .reveal { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.98); }
html.cine .reveal.in { opacity: 1; transform: none; transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); transition-delay: calc(var(--i, 0) * 40ms); }

/* the hero arrives on its own, before any script has run */
@keyframes enter { from { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.98); } }
html.cine .beat--hero > [data-g] { animation: enter 0.6s var(--ease-out) backwards; }
html.cine .beat--hero > [data-g]:nth-of-type(1) { animation-delay: 0.3s; }
html.cine .beat--hero > h1 { animation-delay: 0.34s; }
html.cine .beat--hero > .lede { animation-delay: 0.38s; }
html.cine .beat--hero > .cta { animation-delay: 0.42s; }
html.cine .beat--hero > .facts { animation-delay: 0.46s; }
html.cine .beat--hero > .more { animation-delay: 0.5s; }

/* narrow or tall screens, the default: the words above, the example below */
html.cine .scrim--side { display: none; }
html.cine .cap h2 { margin-top: 8px; }
html.cine .cap__text > p:not(.sr) { margin-top: 8px; font-size: 15px; line-height: 21px; }
@media (min-width: 700px) {
  html.cine .cap__text > p:not(.sr) { font-size: 17px; line-height: 26px; }
}
/* Heights that change the layout are classes (h620, h600), set from the height that is always visible
   (boot.js, and measure() in show.js). A media query's height changes on an iPhone as Safari's bars slide
   away, and the layout must not change with it. */
/* a short screen: the sentence under the headline is set smaller, never dropped (:where keeps the rules below able to override it) */
html.cine:where(.h600) .cap__text > p:not(.sr) { margin-top: 6px; font-size: 13px; line-height: 18px; }
@media (max-width: 979px) {
  /* a short phone: fewer lines in the example, so what is left stays readable */
  html.cine.h600 .scr .row__text, html.cine.h600 [data-g="row2"] { display: none; }
}
/* wide screens, and a phone on its side: the words on the left, the example on the right */
@media (min-width: 980px) and (min-aspect-ratio: 5/4), (min-width: 620px) and (max-height: 520px) and (min-aspect-ratio: 16/10) {
  html.cine .scrim--side { display: block; }
  html.cine .beat:not(.beat--hero) {
    grid-template-columns: minmax(0, 1fr) calc(390 * var(--u)); grid-template-rows: minmax(0, 1fr);
    column-gap: clamp(32px, 6vw, 110px); align-items: center;
    padding-left: max(var(--gutter), env(safe-area-inset-left), calc((100vw - 1320px) / 2)); padding-right: max(var(--gutter), env(safe-area-inset-right), calc((100vw - 1320px) / 2));
  }
  html.cine .cap { align-self: center; }
  html.cine .cap h2 { margin-top: 14px; }
  html.cine .cap__text > p:not(.sr) { margin-top: 16px; font-size: var(--body, 1rem); line-height: 1.53; }
  html.cine .note { position: absolute; left: 0; right: 0; bottom: max(14px, env(safe-area-inset-bottom)); margin: 0; text-align: left; padding: 0 var(--gutter) 0 max(var(--gutter), env(safe-area-inset-left), calc((100vw - 1320px) / 2)); }
  html.cine .scrim--text { inset: 50% 0 0 38%; }
}
@media (max-height: 520px) {
  html.cine .beat { padding-top: 58px; padding-bottom: 12px; }
  html.cine .beat--hero .slot { width: calc(30 * var(--h)); margin: calc(1.5 * var(--h)) 0; }
  html.cine .lede { margin-top: 8px; font-size: 15px; line-height: 21px; max-width: 40em; }
  html.cine .cta { margin-top: 8px; }
  html.cine .cap__text > p:not(.sr) { font-size: 15px; line-height: 21px; margin-top: 8px; }
  /* the rest and the close, on a phone held on its side: a smaller light and tighter lines, so they fit with Safari's bar showing */
  html.cine .rest__in, html.cine .close__in { padding-top: 58px; padding-bottom: 12px; }
  html.cine .rest .slot, html.cine .close .slot { width: calc(24 * var(--h)); }
  html.cine .rest h2, html.cine .close h2 { margin-top: 10px; font-size: clamp(26px, 5.2vw, 40px); }
  html.cine .rest p, html.cine .close p { margin-top: 8px; font-size: 15px; line-height: 21px; max-width: 40em; }
  html.cine .close p a.pill { margin-top: 4px; }
  /* no room for the note here: out of sight, but still read out by a screen reader (so its row goes too) */
  html.cine .beat.beat--talk { grid-template-rows: auto minmax(0, 1fr); }
  html.cine .note { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* a phone on its side has room for the note after all: it sits under the words, beside the example */
@media (min-width: 620px) and (max-height: 520px) and (min-aspect-ratio: 16/10) {
  html.cine .beat.beat--talk { grid-template-rows: minmax(0, 1fr); }
  html.cine .note { width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; padding: 0 var(--gutter) 0 max(var(--gutter), env(safe-area-inset-left), calc((100vw - 1320px) / 2)); }
}
@media (max-width: 560px) {
  html.cine .beat--hero { padding-top: 64px; padding-bottom: 16px; }
  html.cine .beat--hero .slot { width: min(calc(236 * var(--u)), calc(26 * var(--h))); margin: calc(2.2 * var(--h)) 0 calc(2.4 * var(--h)); }
  html.cine .lede { margin-top: 14px; font-size: 16px; line-height: 23px; }
  html.cine .cta { margin-top: 16px; gap: 2px 20px; }
  html.cine .cta .pill--plain { min-height: 36px; box-shadow: none; padding: 0; background: none; }
  html.cine .facts { margin-top: 8px; }
  html.cine .more { margin-top: 4px; }
}
html.cine.h620 .facts { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html.cine.h620 .more { display: none; }

/* ---------- what comes back ---------- */
.gives { padding: clamp(96px, 16vh, 180px) 0 clamp(72px, 12vh, 140px); }
.gives h2, .still h2, .rest h2, .close h2 { font-size: clamp(32px, 5.2vw, 64px); line-height: 1.04; font-weight: 400; letter-spacing: -0.035em; text-wrap: balance; }
.gives h2 { margin-top: 14px; max-width: 14em; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(36px, 6vh, 64px); }
@media (max-width: 1020px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 660px) { .tiles { grid-template-columns: minmax(0, 1fr); } }
.tile {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 27px;
  box-shadow: inset 0 1px 0 var(--highlight); padding: 22px 22px 24px;
}
.tile__ui { order: -1; flex: 1; min-height: 212px; padding-bottom: 22px; margin-bottom: 20px; border-bottom: 1px solid var(--hairline); }
.tile h3 { font-size: 17px; line-height: 22px; font-weight: 500; letter-spacing: -0.2px; }
.tile > p { margin-top: 6px; color: var(--muted); font-size: 15px; line-height: 21px; }
.tag { margin-left: 6px; padding: 2px 7px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--hairline-strong); font: 500 11px/14px var(--mono); letter-spacing: 0.9px; text-transform: uppercase; color: var(--muted); vertical-align: 2px; }
.mini { display: flex; justify-content: space-between; gap: 14px; }
.mini__title { margin-top: 10px; font-size: 17px; line-height: 22px; font-weight: 500; letter-spacing: -0.2px; }
.mini__title--lg { font-size: 22px; line-height: 28px; font-weight: 400; letter-spacing: -0.4px; }
.mini__foot { margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 18px; }
.says { margin-top: 18px; display: flex; align-items: center; }
.says .echo { width: 7px; height: 7px; }
.mini__says { margin-top: 8px; font-size: 17px; line-height: 24px; letter-spacing: -0.2px; }
.mini__letter { margin-top: 14px; color: var(--muted); font-size: 15px; line-height: 23px; }
.photo { flex: none; position: relative; width: 84px; height: 84px; border-radius: 14px; overflow: hidden; }
.photo--swim { background: linear-gradient(#b9c4cf 0 40%, #5b7388 40% 62%, #c9b48f 62%); }
.bignum { margin-top: 10px; color: var(--muted); font-size: 13px; }
.bignum b { color: var(--ink); font-size: 56px; line-height: 56px; font-weight: 300; letter-spacing: -2px; margin-right: 6px; }
.person { display: flex; align-items: center; gap: 14px; }
.person .mini__title { margin-top: 0; }
.avatar { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--raised); box-shadow: inset 0 0 0 1px var(--hairline-strong); font-style: normal; font-size: 22px; font-weight: 500; }
.field { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border-radius: 22px; background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04)); box-shadow: inset 0 0 0 1px var(--hairline-strong); color: var(--muted); font-size: 15px; white-space: nowrap; overflow: hidden; }
.glass { flex: none; width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--muted); position: relative; }
.glass::after { content: ""; position: absolute; left: 9px; top: 9px; width: 5px; height: 1.5px; background: var(--muted); transform: rotate(45deg); transform-origin: 0 50%; }
.statusnote { margin-top: 16px; color: var(--muted); font-size: 15px; line-height: 21px; }
.row--mini { --u: 1px; margin-top: 14px; padding-bottom: 0; }
.five { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.five span, .private { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 4px; border-radius: 14px; color: var(--muted); font-size: 12px; line-height: 16px; }
.ic { display: block; width: 20px; height: 20px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px currentColor; opacity: 0.9; }
.ic--place { border-radius: 50% 50% 50% 0; transform: rotate(-45deg) scale(0.86); }
.ic--mood { border-radius: 50%; }
.ic--scan { border-radius: 3px; box-shadow: inset 0 0 0 1.5px currentColor, inset 0 -7px 0 -5.5px currentColor; }
.ic--lock { height: 14px; margin-top: 6px; border-radius: 4px; position: relative; }
.ic--lock::before { content: ""; position: absolute; left: 4px; right: 4px; top: -7px; height: 8px; border: 1.5px solid currentColor; border-bottom: 0; border-radius: 6px 6px 0 0; }
.private { flex-direction: row; justify-content: center; width: 100%; min-height: 48px; margin-top: 10px; border: 1px solid transparent; background: none; box-shadow: inset 0 0 0 1px var(--hairline-strong); font-size: 15px; color: var(--ink); cursor: pointer; transition: background-color 0.24s var(--ease-soft), color 0.24s var(--ease-soft), transform 0.3s var(--ease-out); }
.private .ic--lock { margin-top: 5px; }
.private:active { transform: scale(0.97); }
.private[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.private__note { margin-top: 14px; font-size: 15px; line-height: 21px; }
.aside { margin-top: 40px; max-width: 44em; color: var(--muted); font-size: 15px; line-height: 23px; }

/* ---------- the light rests, and the close ---------- */
.rest, .close { text-align: center; }
.rest__in, .close__in { display: flex; flex-direction: column; align-items: center; padding: clamp(72px, 12vh, 140px) max(var(--gutter), env(safe-area-inset-right)) clamp(72px, 12vh, 140px) max(var(--gutter), env(safe-area-inset-left)); }
.rest h2, .close h2 { margin-top: 36px; }
.rest p, .close p { margin-top: 18px; max-width: 30em; color: var(--muted); text-wrap: balance; }
.close p a.pill { margin-top: 14px; }
html.cine .rest { height: calc(0.9 * var(--vh) + var(--lvh)); }
html.cine .close { height: calc(0.35 * var(--vh) + var(--lvh)); }
html.cine .rest__in, html.cine .close__in { position: absolute; inset: 0 0 auto 0; height: var(--vh); z-index: 2; justify-content: center; }
html.cine .rest [data-g], html.cine .close [data-g] { opacity: 0; }
/* On a short screen the close's light gives way, so it never starts under the header (the close has more words
   than the rest, and a button). :where keeps this below the rule for a phone held on its side. */
html.cine :where(.close) .slot { width: max(72px, min(calc(236 * var(--u)), calc(35 * var(--h)), calc(var(--vh) - 450px))); }

/* ---------- pages that hold still ---------- */
.still { padding: clamp(80px, 13vh, 150px) 0; border-top: 1px solid var(--hairline); }
.still h2 { margin-top: 14px; }
.still p { margin-top: 20px; color: var(--muted); max-width: 36em; }
.still .lead { margin-top: 0; color: var(--ink); font-size: clamp(20px, 2.4vw, 26px); line-height: 1.35; letter-spacing: -0.2px; }
.still .lead + h2 { margin-top: 40px; }
.still--contrast { --ink: #fff; --muted: #a8a8ae; --hairline: rgba(255, 255, 255, 0.38); color: var(--ink); }
.groups { margin-top: 48px; display: grid; gap: 12px; }
.group { background: var(--surface); border: 1px solid var(--hairline); border-radius: 27px; box-shadow: inset 0 1px 0 var(--highlight); padding: 24px 24px 10px; }
.group li { padding: 14px 0; border-top: 1px solid var(--hairline); color: var(--ink); }
.group h3 { margin-bottom: 14px; }
.fine { font-size: 13px; line-height: 20px; }
.still .fine { margin-top: 28px; }
.plans { margin-top: 48px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 660px) { .plans { grid-template-columns: minmax(0, 1fr); } }
.plan { background: var(--surface); border: 1px solid var(--hairline); border-radius: 27px; box-shadow: inset 0 1px 0 var(--highlight); padding: 24px; }
.plan h3 { font-size: 22px; line-height: 28px; font-weight: 500; letter-spacing: -0.4px; }
.still .plan__sub { margin-top: 4px; font-size: 15px; line-height: 21px; }
.plan ul { margin-top: 18px; }
.plan li { padding: 12px 0; border-top: 1px solid var(--hairline); font-size: 15px; line-height: 21px; }
.faq { margin-top: 40px; border-bottom: 1px solid var(--hairline); }
.faq details { border-top: 1px solid var(--hairline); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 8px 0; cursor: pointer; list-style: none; font-size: 17px; font-weight: 500; letter-spacing: -0.2px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-right: 4px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: translateY(-3px) rotate(45deg); }
.faq details[open] summary::after { transform: translateY(2px) rotate(225deg); }
.faq details p { margin: 0 0 22px; }

/* ---------- the foot ---------- */
.foot { border-top: 1px solid var(--hairline); padding: 40px 0 max(40px, env(safe-area-inset-bottom)); color: var(--muted); font-size: 15px; line-height: 21px; }
.foot__in { display: grid; gap: 8px; }
.foot__name { color: var(--ink); font-weight: 500; }
.foot a { text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, 0.3); }
.foot__fine { margin-top: 14px; font-size: 13px; line-height: 20px; max-width: 46em; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
}

/* ---------- the page that isn't there ---------- */
.lost { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; text-align: center; }
.lost__orb { width: min(240px, 56vw); height: auto; opacity: 0.5; }
.lost__title { font-size: clamp(32px, 6vw, 56px); line-height: 1.05; font-weight: 400; letter-spacing: -0.035em; }
.lost__text { color: var(--muted); }

/* an element marked hidden stays hidden, whatever its display */
[hidden] { display: none !important; }

@supports (height: 100lvh) {
  :root { --lvh: 100lvh; }
}

/* high-contrast themes drop shadows, so the Private switch shows its state with its border */
@media (forced-colors: active) {
  .private[aria-pressed="true"] { border-width: 3px; }
}

/* on paper: the still page, whichever one was on screen */
@media print {
  .top, .skip, .lightbox, .scrim, .note { display: none !important; }
  html.cine .show, html.cine .rest, html.cine .close { height: auto !important; }
  html.cine .stage { position: static; height: auto; overflow: visible; }
  html.cine .beat, html.cine .rest__in, html.cine .close__in { position: static; height: auto; display: block; }
  html.cine .beat--hero, html.cine .rest__in, html.cine .close__in { display: flex; }
  html.cine .beat { padding: 24px var(--gutter); }
  html.cine .facts { position: static !important; width: auto !important; height: auto !important; overflow: visible !important; white-space: normal !important; margin-top: 12px !important; }
  html.cine .more { display: none !important; }
  html.cine .scr { height: auto; margin-top: 16px; }
  html.cine .orbimg { opacity: 1 !important; }
  html.cine .beat--hero { opacity: 1 !important; visibility: visible !important; }
  html.cine [data-g], html.cine [data-k], html.cine .w, html.cine .reveal { opacity: 1 !important; visibility: visible !important; transform: none !important; filter: none !important; clip-path: none !important; animation: none !important; }
  html.cine .rowwrap { height: auto !important; overflow: visible !important; }
  html.cine .beat--title .thinking, html.cine .beat--ask .thinking, html.cine [data-g="labAsking"], html.cine [data-g="labThinking"], html.cine [data-g="labThinking2"], html.cine .hint [data-k="hint1"] { display: none !important; }
  .tile, .group, .plan { break-inside: avoid; }
  /* the answers print too, whether or not the question was opened (show.js also opens them, for browsers without this) */
  .faq summary::after { display: none; }
  .faq details::details-content { content-visibility: visible !important; display: block !important; height: auto !important; }
}