/* ============================================================
   Mindnull

   Palette and springs lifted from the app's own system
   (lib/app/theme.dart): paper or ink, warm greys between, no
   third colour. One typeface — the system sans. Difference is
   carried by weight, size and tracking.

   The page has three registers, and they are meant to feel
   different from one another as you go down:

     1  a pinned opening sequence
     2  four full bands, one per shipped app, alternating
     3  a quiet list for what is not out yet, then the colophon
   ============================================================ */

:root {
  --bg:        #FBFAF8;
  --surface:   #F5F3EF;
  --border:    #E8E4DD;
  --rule:      #E2DCD3;

  --ink:       #201D1A;
  --on-ink:    #FBFAF8;
  --text-2:    #6E6862;
  --text-3:    #A8A199;

  --shadow:    rgba(33, 28, 22, 0.10);
  --shadow-lg: rgba(33, 28, 22, 0.20);

  --plate-lit: #FFFFFF;
  --plate-mid: #F6F6F5;
  --plate-sh:  #EAEAE8;

  --hair: 1px;
  --pad: clamp(1.25rem, 5vw, 3.5rem);
  --max: 74rem;

  /* spring(response .55, damping .78) — the app's "solidify" */
  --sol: linear(0.0000, 0.0660, 0.2126, 0.3848, 0.5499, 0.6916, 0.8039, 0.8871, 0.9449, 0.9822, 1.0043, 1.0155, 1.0196, 1.0195, 1.0171, 1.0137, 1.0103, 1.0073, 1.0048, 1.0029, 1.0015, 1.0006, 1.0001, 0.9998, 0.9996, 0.9996, 0.9996, 0.9997, 0.9998);
  --t-sol: 880ms;
  --ease: cubic-bezier(0.22, 0.61, 0.28, 1);
  --t-q: 200ms;

  --f: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
       "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg:        #0D0C0B;
  --surface:   #171513;
  --border:    #2C2823;
  --rule:      #302B26;

  --ink:       #EDEAE4;
  --on-ink:    #17130F;
  --text-2:    #9C958C;
  --text-3:    #6E6862;

  --shadow:    rgba(0, 0, 0, 0.5);
  --shadow-lg: rgba(0, 0, 0, 0.78);

  --plate-lit: #2E2D2B;
  --plate-mid: #262523;
  --plate-sh:  #1C1B19;

  color-scheme: dark;
}

/* ───────────────────────────────────────────────────── base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: background 340ms var(--ease), color 340ms var(--ease);
}

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

::selection { background: var(--ink); color: var(--on-ink); }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

/* ───────────────────────────────────────────────── progress */

.progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 80; pointer-events: none;
}
.progress span {
  display: block; height: 100%;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

/* ───────────────────────────────────────────────────── bar */

.bar {
  position: sticky; top: 0; z-index: 60;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
.bar::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--bg) 92%, transparent),
    color-mix(in srgb, var(--bg) 60%, transparent) 60%, transparent);
}
.bar-in {
  display: flex; align-items: center; gap: clamp(0.75rem, 3vw, 2rem);
  height: 54px;
}
.mark { font-size: 1rem; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; }

/* Section tabs. The underline is drawn on a pseudo-element rather than
   with text-decoration so it can grow from the middle out. */
.tabs { display: flex; align-items: center; gap: clamp(0.75rem, 2.4vw, 1.5rem); margin-right: auto; }

.tabs a {
  position: relative;
  font-size: 0.8125rem; font-weight: 500;
  letter-spacing: -0.008em;
  color: var(--text-2); white-space: nowrap;
  padding: 0.25rem 0;
  transition: color var(--t-q) var(--ease);
}
.tabs a::after {
  content: ""; position: absolute;
  left: 50%; right: 50%; bottom: 0; height: 1.5px;
  background: var(--ink); border-radius: 2px;
  transition: left 320ms var(--sol), right 320ms var(--sol);
}
.tabs a:hover { color: var(--ink); }
.tabs a:hover::after, .tabs a[aria-current="true"]::after { left: 0; right: 0; }
.tabs a[aria-current="true"] { color: var(--ink); }

.tools { display: flex; align-items: center; gap: 0.5rem; }

/* Language. A segmented pair, not a dropdown — with two options a menu
   is a click to find out there was nothing to decide. */
.lang {
  display: flex; align-items: center;
  padding: 2px;
  border: var(--hair) solid var(--rule);
  border-radius: 999px;
}
.lang button {
  border: 0; background: transparent; cursor: pointer;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  font: inherit; font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-3);
  transition: color var(--t-q) var(--ease), background var(--t-q) var(--ease);
}
.lang button:hover { color: var(--ink); }
.lang button[aria-current="true"] { background: var(--ink); color: var(--on-ink); }

.cut {
  width: 32px; height: 32px; display: grid; place-items: center;
  padding: 0; margin-right: -4px; border: 0; background: transparent;
  color: var(--text-2); cursor: pointer; border-radius: 50%;
  transition: transform var(--t-q) var(--ease), color var(--t-q) var(--ease);
}
.cut:active { transform: scale(0.86); }
.cut:hover { color: var(--ink); }
.cut svg { width: 17px; height: 17px; }
.cut .moon { display: none; }
:root[data-theme="dark"] .cut .sun { display: none; }
:root[data-theme="dark"] .cut .moon { display: block; }

/* ═══════════════════════════════════════════ 1 · opening */

.stage { position: relative; height: 215svh; margin-top: -54px; }

.pin {
  position: sticky; top: 0; height: 100svh;
  display: grid; place-items: center;
  overflow: hidden; isolation: isolate;
}

.pin::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(120% 90% at 50% 44%, transparent 36%,
    color-mix(in srgb, var(--ink) 5%, transparent) 100%);
}

.deck { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.deck img {
  position: absolute; top: 50%; left: 50%;
  width: var(--card, 168px);
  aspect-ratio: 1;
  margin: calc(var(--card, 168px) / -2);
  border-radius: 23%;
  object-fit: cover;
  opacity: 0;                       /* seeded on the first frame */
  will-change: transform, opacity, filter;
  box-shadow: 0 34px 80px -34px var(--shadow-lg);
}

.copy { position: relative; z-index: 2; will-change: transform, opacity; }

h1 {
  margin: 0;
  font-size: clamp(2.35rem, 7.2vw, 4.6rem);
  font-weight: 600; line-height: 1.04; letter-spacing: -0.037em;
  max-width: 17ch; text-wrap: balance;
}

.ln { display: block; overflow: hidden; padding-bottom: 0.05em; }
.ln > i {
  display: block; font-style: normal;
  transform: translateY(102%);
  transition: transform var(--t-sol) var(--sol);
  transition-delay: calc(var(--i, 0) * 58ms);
}
.ready .ln > i { transform: none; }

.lede {
  font-size: 1.0625rem; line-height: 1.55; color: var(--text-2);
  max-width: 40ch; margin: clamp(1.5rem, 4vw, 2.25rem) 0 0;
  opacity: 0; transform: translateY(14px);
  transition: opacity 620ms var(--ease) 380ms, transform var(--t-sol) var(--sol) 380ms;
}
.ready .lede { opacity: 1; transform: none; }

/* ── the cue ──
   Not an arrow that could mean anything. It states the instruction and
   fills as the instruction is followed, so the sequence announces both
   that it exists and how far through it you are. */

.cue {
  position: absolute; left: 50%;
  bottom: max(1.75rem, env(safe-area-inset-bottom));
  translate: -50% 0;
  display: flex; align-items: center; gap: 0.625rem;
  opacity: 0;
  transition: opacity 700ms var(--ease) 780ms;
}
.ready .cue { opacity: 1; }

.cue-track {
  position: relative;
  width: 2px; height: 34px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--ink) 14%, transparent);
  overflow: hidden;
}
.cue-track i {
  position: absolute; inset: 0;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: 50% 0;
  will-change: transform;
}

.cue-label {
  font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.01em; color: var(--text-2);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════ 2 · app bands */

.band {
  position: relative;
  padding: clamp(4.5rem, 13vh, 8rem) 0;
  border-top: var(--hair) solid var(--rule);
  overflow: hidden;
}

/* The index number, set enormous and almost invisible. It is the only
   thing on the page that is decoration, and it earns its place by
   telling you where in a run of four you are without a word. */
.band::before {
  content: attr(data-n);
  position: absolute;
  top: 50%; right: -0.08em;
  translate: 0 -50%;
  font-size: clamp(13rem, 30vw, 26rem);
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 0.75;
  color: var(--ink);
  opacity: 0.032;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.band.alt::before { right: auto; left: -0.08em; }

.band-in {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
  position: relative;
}

.band-art { display: flex; }

.shot {
  width: clamp(112px, 30vw, 268px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 23%;
  object-fit: cover;
  will-change: transform;
  box-shadow:
    0 0 0 var(--hair) color-mix(in srgb, var(--ink) 11%, transparent),
    0 40px 80px -40px var(--shadow-lg),
    0 6px 18px -10px var(--shadow);
}

.kicker {
  display: flex; align-items: center; gap: 0.625rem;
  margin: 0 0 0.75rem;
  font-size: 0.8125rem; font-weight: 500;
  color: var(--text-3);
}
.kicker span {
  font-variant-numeric: tabular-nums;
  padding: 0.1rem 0.4rem;
  border: var(--hair) solid var(--rule);
  border-radius: 5px;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
}

.band-txt h2 {
  margin: 0;
  font-size: clamp(2rem, 5.4vw, 3.25rem);
  font-weight: 600; line-height: 1.05; letter-spacing: -0.036em;
}

.claim {
  margin: clamp(0.75rem, 2vw, 1.125rem) 0 0;
  font-size: clamp(1.0625rem, 2.1vw, 1.4375rem);
  font-weight: 500; line-height: 1.3; letter-spacing: -0.024em;
  max-width: 22ch; text-wrap: balance;
}

.band-txt .body {
  margin: 0.875rem 0 0;
  font-size: 1rem; line-height: 1.58;
  color: var(--text-2); max-width: 46ch; text-wrap: pretty;
}

.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
  padding: 0.6875rem 1.125rem 0.6875rem 1.25rem;
  border-radius: 999px;
  background: var(--ink); color: var(--on-ink);
  font-size: 0.9375rem; font-weight: 550; letter-spacing: -0.014em;
  transition: transform 260ms var(--sol), box-shadow 260ms var(--ease);
  box-shadow: 0 8px 20px -12px var(--shadow-lg);
}
.btn svg { width: 15px; height: 15px; transition: transform 320ms var(--sol); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -14px var(--shadow-lg); }
.btn:hover svg { transform: translate(2px, -2px); }
.btn:active { transform: scale(0.97); }

/* ═══════════════════════════════════════════ 3 · quiet list */

.idx { padding: clamp(3rem, 8vh, 5rem) 0 0; }

.rubric {
  display: flex; align-items: center; gap: 0.625rem;
  margin: 0 0 0.25rem;
  font-size: 0.8125rem; font-weight: 500; color: var(--text-3);
}
.rubric em { font-style: normal; font-variant-numeric: tabular-nums; opacity: 0.7; }

/* ═══════════════════════════════════════════ legal / support pages

   A different animal from the home page and meant to look it: one
   column, a comfortable measure, no sequence. Someone here is reading,
   not being shown around. */

.doc { padding: clamp(3rem, 9vh, 5.5rem) 0 clamp(3rem, 8vh, 5rem); max-width: 46rem; }

.doc .back {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.875rem; color: var(--text-2);
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
  transition: color var(--t-q) var(--ease);
}
.doc .back:hover { color: var(--ink); }
.doc .back svg { width: 13px; height: 13px; }

.doc h1 {
  font-size: clamp(1.875rem, 4.6vw, 2.75rem);
  font-weight: 600; letter-spacing: -0.032em; line-height: 1.08;
  margin: 0; max-width: none;
}

.doc .stamp {
  margin: 0.75rem 0 clamp(2rem, 5vw, 2.75rem);
  font-size: 0.8125rem; color: var(--text-3);
}

.doc h2 {
  font-size: clamp(1.125rem, 2.2vw, 1.375rem);
  font-weight: 600; letter-spacing: -0.024em;
  margin: clamp(2rem, 5vw, 2.75rem) 0 0.625rem;
}

.doc p, .doc li {
  font-size: 1rem; line-height: 1.65; color: var(--text-2);
  text-wrap: pretty;
}
.doc p { margin: 0 0 0.875rem; }
.doc ul { margin: 0 0 1rem; padding-left: 1.15rem; }
.doc li { margin-bottom: 0.4rem; }
.doc strong { color: var(--ink); font-weight: 600; }
.doc a:not(.back) {
  color: var(--ink);
  box-shadow: inset 0 -1px 0 0 var(--rule);
  transition: box-shadow var(--t-q) var(--ease);
}
.doc a:not(.back):hover { box-shadow: inset 0 -1px 0 0 var(--ink); }

.doc .note {
  margin: 1.25rem 0;
  padding: 1rem 1.125rem;
  border: var(--hair) solid var(--rule);
  border-radius: 14px;
  background: var(--surface);
}
.doc .note p:last-child { margin-bottom: 0; }

.list { border-bottom: var(--hair) solid var(--rule); }

.row {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-areas: "ic t" "ic d";
  align-items: center;
  column-gap: 0.875rem;
  padding: 0.9375rem 0;
  border-top: var(--hair) solid var(--rule);
}

.ic {
  grid-area: ic; width: 52px; height: 52px;
  border-radius: 12px; object-fit: cover; background: var(--surface);
  opacity: 0.72;
  box-shadow: 0 0 0 var(--hair) color-mix(in srgb, var(--ink) 13%, transparent);
}

.t { grid-area: t; font-size: 1.0625rem; font-weight: 590; letter-spacing: -0.022em; color: var(--text-2); line-height: 1.3; }
.d {
  grid-area: d; font-size: 0.875rem; line-height: 1.4;
  color: var(--text-3); letter-spacing: -0.006em;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.g { display: none; }

/* ───────────────────────────────────────────────────── studio */

.cols { margin-top: 1rem; }
.cols p {
  font-size: 1rem; line-height: 1.6; color: var(--text-2);
  margin: 0 0 1rem; max-width: 62ch; text-wrap: pretty;
}

/* ───────────────────────────────────────────────────── footer */

footer {
  margin-top: clamp(3rem, 8vh, 5rem);
  border-top: var(--hair) solid var(--rule);
  padding-top: clamp(2rem, 5vw, 3rem);
}

.foot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.75rem, 5vw, 3rem) clamp(1.5rem, 5vw, 3rem);
}

.foot-brand { grid-column: 1 / -1; }
.foot-brand .mark { display: block; margin-bottom: 0.375rem; }
.foot-brand p { margin: 0; font-size: 0.875rem; color: var(--text-3); }

.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }

.foot-col h3 {
  margin: 0 0 0.25rem;
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-3);
}

.foot-col a {
  font-size: 0.9375rem; color: var(--text-2);
  transition: color var(--t-q) var(--ease);
}
.foot-col a:hover { color: var(--ink); }

.foot-col .mail {
  font-size: 0.9375rem; font-weight: 500;
  letter-spacing: -0.012em;
  overflow-wrap: anywhere;
}

.foot-bar {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding: 1.125rem 0 clamp(2rem, 6vw, 2.75rem);
  border-top: var(--hair) solid var(--rule);
}
.foot-bar small { font-size: 0.8125rem; color: var(--text-3); }

/* ───────────────────────────────────────────────────── reveal */

.up {
  opacity: 0; transform: translateY(16px);
  transition: opacity 560ms var(--ease), transform var(--t-sol) var(--sol);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.up.in { opacity: 1; transform: none; }

::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(root) { z-index: 0; }
::view-transition-new(root) { z-index: 1; }

/* ═════════════════════════════════════════ DESKTOP */

@media (min-width: 860px) {
  body { font-size: 16px; }

  .stage { height: 240vh; }

  .band-in {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 6vw, 5.5rem);
  }
  .band.alt .band-art { order: 2; justify-content: flex-end; }
  .band.alt .band-txt { order: 1; }

  .row {
    grid-template-columns: 44px minmax(8rem, 13ch) minmax(0, 1fr) 7rem;
    grid-template-areas: "ic t d g";
    column-gap: clamp(1rem, 2.4vw, 2rem);
    padding: 1.25rem 0;
  }
  .ic { width: 44px; height: 44px; border-radius: 10.5px; }
  .t { font-size: 1.125rem; }
  .d { font-size: 0.9375rem; -webkit-line-clamp: 2; }
  .g { grid-area: g; display: block; font-size: 0.8125rem; color: var(--text-3); }

  .rubric { font-size: 0.875rem; margin-bottom: 0.5rem; }
  .lede { font-size: 1.125rem; }

  .foot-grid {
    grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr));
    gap: clamp(2rem, 5vw, 4rem);
  }
  .foot-brand { grid-column: auto; }
}

/* ───────────────────────────────────────────────────── quiet */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
  .ln > i, .up, .lede, .cue { opacity: 1; transform: none; }
  .stage { height: auto; margin-top: 0; }
  .pin { position: static; height: auto; padding: 5rem 0 4rem; }
  .deck, .cue, .progress { display: none; }
  .shot { transform: none !important; }
}