/* Cloudy Tuesdays (cloudytuesdays.com): a quiet studio page under a living, overcast sky.
   System fonts only, nothing from other origins, no inline styles (the CSP allows 'self' only).
   Follows the system theme; site.js adds a toggle that sets data-theme on <html>, a time-of-day tint for the sky
   (data-sky on <html>: dawn | day | dusk | night), scroll reveals (.js .reveal -> .in) and a slight cloud parallax.
   All motion is off under prefers-reduced-motion. */

/* --- Tokens ---------------------------------------------------------------------------------------- */

:root {
  color-scheme: light;
  --bg: #eef0f2;
  --bg-2: #e4e8ec;
  --surface: #f9fafb;
  --ink: #0b0d12;
  --ink-soft: #2b313a;
  --muted: #545c68;
  --hairline: rgba(12, 16, 24, 0.1);
  --shadow: 0 1px 2px rgba(12, 16, 24, 0.04), 0 24px 48px -30px rgba(30, 44, 66, 0.35);
  --focus: #1f6fb2;
  --accent: #4f6276;
  --btn-bg: #0b0d12;
  --btn-ink: #ffffff;
  --live: #2f7a52;

  /* The sky. Brand mark: #6F8295 -> #A9B6C2, cloud #FBFAF7. Light: an overcast afternoon. */
  --sky-1: #7187a0;
  --sky-2: #a2b2c3;
  --sky-3: #d6dce2;
  --glow: rgba(255, 246, 228, 0.9);
  --glow-x: 72%;
  --glow-y: 26%;
  --cloud-a: 0.8;
  --cloud-b: 0.78;
  --mark-1: #7d90a5;
  --mark-2: #b4c0cc;
  --mark-veil: rgba(238, 240, 242, 0);
  --grain: 0.11;
  --hero-ink: #0b0d12;
  --hero-soft: #1f2630;
  --glass: rgba(251, 250, 247, 0.55);
  --glass-line: rgba(255, 255, 255, 0.6);

  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif;
  --serif: ui-serif, "New York", "Iowan Old Style", "Charter", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --gutter: max(1rem, env(safe-area-inset-left), env(safe-area-inset-right));
  --max: 72rem;
  --r: 1.5rem;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
}

@media (min-width: 40rem) {
  :root { --gutter: clamp(1.5rem, 4vw, 2.75rem); }
}

/* Time of day (light theme): the same overcast, lit differently. Set by site.js from the visitor's clock. */
:root[data-sky="dawn"] {
  --sky-1: #8796ab;
  --sky-2: #b9bfcb;
  --sky-3: #ead9cf;
  --glow: rgba(255, 214, 186, 0.8);
  --glow-x: 18%;
  --glow-y: 62%;
}
:root[data-sky="dusk"], :root[data-sky="night"] {
  --sky-1: #6f7a96;
  --sky-2: #a9a6ba;
  --sky-3: #e2d2cd;
  --glow: rgba(255, 196, 168, 0.75);
  --glow-x: 84%;
  --glow-y: 64%;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #07090c;
    --bg-2: #0d1116;
    --surface: #10141a;
    --ink: #f1f3f6;
    --ink-soft: #c6ccd4;
    --muted: #949daa;
    --hairline: rgba(255, 255, 255, 0.09);
    --shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.85);
    --focus: #8cc4f5;
    --accent: #a9b6c2;
    --btn-bg: #f1f3f6;
    --btn-ink: #07090c;
    --live: #7fe0a8;
    --sky-1: #070a0f;
    --sky-2: #121a24;
    --sky-3: #1d2733;
    --glow: rgba(176, 196, 222, 0.28);
    --glow-x: 74%;
    --glow-y: 24%;
    --cloud-a: 0.2;
    --cloud-b: 0.28;
    --mark-1: #3a4a5c;
    --mark-2: #5d7086;
    --mark-veil: rgba(7, 9, 12, 0.55);
    --grain: 0.09;
    --hero-ink: #f4f6f8;
    --hero-soft: #c9d0d8;
    --glass: rgba(16, 20, 26, 0.5);
    --glass-line: rgba(255, 255, 255, 0.12);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #07090c;
  --bg-2: #0d1116;
  --surface: #10141a;
  --ink: #f1f3f6;
  --ink-soft: #c6ccd4;
  --muted: #949daa;
  --hairline: rgba(255, 255, 255, 0.09);
  --shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.85);
  --focus: #8cc4f5;
  --accent: #a9b6c2;
  --btn-bg: #f1f3f6;
  --btn-ink: #07090c;
  --live: #7fe0a8;
  --sky-1: #070a0f;
  --sky-2: #121a24;
  --sky-3: #1d2733;
  --glow: rgba(176, 196, 222, 0.28);
  --glow-x: 74%;
  --glow-y: 24%;
  --cloud-a: 0.2;
  --cloud-b: 0.28;
  --mark-1: #3a4a5c;
  --mark-2: #5d7086;
  --mark-veil: rgba(7, 9, 12, 0.55);
  --grain: 0.09;
  --hero-ink: #f4f6f8;
  --hero-soft: #c9d0d8;
  --glass: rgba(16, 20, 26, 0.5);
  --glass-line: rgba(255, 255, 255, 0.12);
}

/* --- Base ------------------------------------------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-wrap: break-word;
}
@supports (overflow: clip) { body { overflow-x: clip; } }

h1, h2, h3 { margin: 0; font-family: var(--display); color: var(--ink); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote, dl, dd { margin: 0; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 0.4rem; }

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

.skip {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 20;
  padding: 0.6rem 1rem;
  border-radius: 0.75rem;
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { top: 0.75rem; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.kicker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--muted);
  font: 500 0.78rem/1.3 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.kicker::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  flex: none;
  background: currentColor;
  opacity: 0.6;
}

/* --- Header ---------------------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  margin-bottom: -3.75rem; /* floats over the hero sky */
  background: color-mix(in srgb, var(--bg) 0%, transparent);
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.scrolled .site-header {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  backdrop-filter: saturate(1.4) blur(16px);
  border-bottom-color: var(--hairline);
}

.bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.75rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-right: auto;
  color: var(--hero-ink);
  font: 650 1.05rem/1 var(--display);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark svg { width: 1.7rem; height: 1.7rem; flex: none; }
/* The wordmark: "Cloudy" in the display sans, "Tuesdays" in the italic serif, as in the hero. The serif stack falls
   back to Iowan Old Style, Charter, Georgia or the platform serif italic where New York is missing. */
.wordmark em, .lockup em { font-size: 1.06em; letter-spacing: -0.01em; }
.scrolled .wordmark { color: var(--ink); }

.bar nav ul { display: flex; gap: 0.15rem; }
.bar nav a {
  display: block;
  padding: 0.5rem 0.7rem;
  border-radius: 999px;
  color: var(--hero-soft);
  font-size: 0.95rem;
  text-decoration: none;
}
.scrolled .bar nav a { color: var(--ink-soft); }
.bar nav a:hover { color: var(--ink); background: var(--hairline); }

.theme-toggle {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: var(--glass);
  color: var(--ink-soft);
  cursor: pointer;
}
.theme-toggle[hidden] { display: none; }
.theme-toggle svg { width: 1.2rem; height: 1.2rem; }
.theme-toggle:hover { color: var(--ink); }
.i-sun { display: none; }
.is-light .i-moon { display: none; }
.is-light .i-sun { display: block; }

@media (max-width: 26rem) {
  .bar { gap: 0.4rem; }
  .bar nav a { padding-inline: 0.5rem; }
  .wordmark span { font-size: 0.98rem; }
}
@media (max-width: 24.5rem) {
  .nav-optional { display: none; }
}

/* --- The sky (hero, 404) --------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: clamp(36rem, 94svh, 58rem);
  padding-top: 3.75rem;
  overflow: hidden;
  color: var(--hero-ink);
}

.sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 42%, var(--sky-3) 78%, var(--bg) 100%);
  transition: background 1.2s ease;
}
.sky-glow {
  position: absolute;
  left: calc(var(--glow-x) - 35vmax);
  top: calc(var(--glow-y) - 35vmax);
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow), transparent 72%);
  translate: calc(var(--mx, 0) * -1.5rem) calc(var(--my, 0) * -1rem);
}
/* Cloud strips (greyscale, made seamless by tools/make_clouds.mjs) tile horizontally; each layer is three tiles wide and drifts left by exactly one tile per loop. */
.sky-layer {
  position: absolute;
  left: 0;
  width: calc(3 * var(--tile));
  background-repeat: repeat-x;
  background-size: var(--tile) 100%;
  mix-blend-mode: screen; /* greyscale cloud maps: black is clear sky, white is cloud */
  translate: calc(var(--mx, 0) * var(--depth)) 0;
  will-change: transform;
}
.sky-layer.far {
  --depth: -1.25rem;
  --tile: 103.85rem; /* 30rem tall at the image's 1800:520 */
  top: -2%;
  height: 30rem;
  background-image: url("clouds-far.b5c8010da2.webp");
  opacity: var(--cloud-a);
}
.sky-layer.near {
  --depth: -3rem;
  --tile: 123.75rem; /* 36rem tall at 2200:640 */
  top: 34%;
  height: 36rem;
  background-image: url("clouds-near.f993199f7e.webp");
  opacity: var(--cloud-b);
}
.sky-grain, .contact-sky .sky-grain {
  position: absolute;
  inset: 0;
  background: url("grain.c0ee5a56db.svg");
  opacity: var(--grain);
  mix-blend-mode: overlay;
}
/* the bottom of the sky settles into the page */
.sky::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 30%;
  background: linear-gradient(180deg, transparent, var(--bg));
}

@media (prefers-reduced-motion: no-preference) {
  .sky-layer { animation: drift linear infinite; }
  .sky-layer.far { animation-duration: 260s; }
  .sky-layer.near { animation-duration: 150s; animation-delay: -40s; }
  .sky-glow { animation: breathe 14s ease-in-out infinite alternate; }
}
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--tile))); } }
@keyframes breathe { from { opacity: 0.8; scale: 0.94; } to { opacity: 1; scale: 1.06; } }

.hero-inner {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 1.4rem;
  padding-block: clamp(3rem, 9vh, 6rem) 2rem;
}
.hero .kicker { color: var(--hero-soft); }

.hero h1 {
  max-width: 13ch;
  color: inherit;
  font-size: clamp(3.1rem, 10.5vw, 8.25rem);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.055em;
}
.hero h1 em { font-weight: 400; letter-spacing: -0.035em; margin-left: 0.08em; padding-right: 0.04em; }

.lede {
  max-width: 32rem;
  color: var(--hero-soft);
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  line-height: 1.5;
}

.cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.4rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.75rem 1.4rem;
  border-radius: 999px;
  font: 600 1rem/1 var(--text);
  text-decoration: none;
  transition: transform 0.25s var(--ease), background-color 0.25s ease, box-shadow 0.25s ease;
}
.btn.primary { background: var(--btn-bg); color: var(--btn-ink); box-shadow: 0 12px 30px -14px rgba(10, 14, 20, 0.6); }
.btn.ghost {
  border: 1px solid var(--glass-line);
  background: var(--glass);
  color: var(--hero-ink);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.btn:hover { transform: translateY(-2px); }

.hero-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-bottom: clamp(1.5rem, 4vh, 2.5rem);
}
/* "Out now" shelf: one glass pill with each released app's icon and name (rendered by build.py). */
.status {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.9rem;
  max-width: 100%;
  padding: 0.4rem 0.5rem 0.4rem 0.95rem;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--ink-soft);
  font-size: 0.93rem;
  line-height: 1.35;
}
.status-label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink-soft);
  font: 500 0.74rem/1.3 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.shelf { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.shelf a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0.3rem 0.85rem 0.3rem 0.3rem;
  border-radius: 999px;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.shelf a:hover { background: var(--hairline); }
.shelf img, .shelf .app-glyph {
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  border-radius: 0.45rem;
  box-shadow: 0 0 0 1px var(--hairline), 0 4px 10px -4px rgba(0, 0, 0, 0.35);
}
.dot {
  position: relative;
  width: 0.55rem;
  height: 0.55rem;
  flex: none;
  border-radius: 50%;
  background: var(--live);
}
.dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  opacity: 0.35;
  transform: scale(2.2);
}
.clock {
  color: var(--muted);
  font: 500 0.78rem/1.3 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: no-preference) {
  .dot::after { animation: ping 2.4s var(--ease) infinite; }
  .rise { animation: rise 1.1s var(--ease) both; }
  .r2 { animation-delay: 0.08s; }
  .r3 { animation-delay: 0.18s; }
  .r4 { animation-delay: 0.26s; }
  .r5 { animation-delay: 0.4s; }
}
@keyframes ping { 0% { transform: scale(1); opacity: 0.5; } 80%, 100% { transform: scale(2.8); opacity: 0; } }
@keyframes rise { from { opacity: 0; translate: 0 1.5rem; filter: blur(6px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }

/* --- Sections -------------------------------------------------------------------------------------- */

.section { padding-block: clamp(3rem, 7.5vw, 5.75rem); }

.section-head { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }

.section-title {
  font-size: clamp(2.4rem, 6.5vw, 4.75rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.05em;
}

.prose { max-width: 40rem; color: var(--ink-soft); font-size: 1.12rem; line-height: 1.65; }

/* Scroll reveals (site.js marks <html class="js"> and adds .in when an element scrolls into view). */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    translate: 0 2rem;
    transition: opacity 0.9s var(--ease), translate 0.9s var(--ease);
  }
  .js .reveal.in { opacity: 1; translate: 0 0; }
  .js .principles .reveal:nth-child(2) { transition-delay: 0.08s; }
  .js .principles .reveal:nth-child(3) { transition-delay: 0.16s; }
}

/* --- Apps (rendered by build.py from content/apps.json, released apps only) ----------------------- */

.apps-section { padding-top: clamp(2rem, 5vw, 4rem); }
.apps { display: grid; gap: 1.25rem; }
@media (min-width: 46rem) {
  .apps { grid-template-columns: repeat(2, 1fr); }
}
.apps .showcase { grid-column: 1 / -1; }

.app h3 { font-size: 1.6rem; letter-spacing: -0.03em; color: inherit; }
.app-id { display: flex; align-items: center; gap: 1rem; }
.app-icon {
  width: 4.5rem;
  height: 4.5rem;
  flex: none;
  border-radius: 1.1rem;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 14px 30px -12px rgba(0, 0, 0, 0.55);
}
.app-glyph { background: linear-gradient(180deg, #6f8295, #a9b6c2); }
.platform { color: var(--muted); font-size: 0.92rem; }
.tagline { font: 700 clamp(2rem, 4.6vw, 3.5rem)/1 var(--display); letter-spacing: -0.045em; text-wrap: balance; }
.summary { max-width: 30rem; color: var(--ink-soft); font-size: 1.1rem; }
.features { display: grid; gap: 0.55rem; }
.features li {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  color: var(--ink-soft);
}
.features li::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  flex: none;
  translate: 0 -0.1rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}
.get { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-top: 0.4rem; }
.price { color: var(--muted); font-size: 0.92rem; }

/* App Store button, drawn to Apple's badge proportions (black, hairline border). */
.store {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 3.2rem;
  padding: 0.5rem 1.15rem 0.5rem 0.95rem;
  border: 1px solid #a6a6a6;
  border-radius: 0.8rem;
  background: #000;
  color: #fff;
  font: 600 1.3rem/1 var(--display);
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: transform 0.25s var(--ease);
}
.store svg { width: 1.7rem; height: 1.7rem; translate: 0 -0.08rem; }
.store > span:not(.visually-hidden) { display: grid; gap: 0.15rem; }
.store small { font: 500 0.68rem/1 var(--text); letter-spacing: 0.01em; }
.store:hover { transform: translateY(-2px); }

.app-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: max-content;
  color: var(--ink-soft);
  font: 500 0.9rem/1.3 var(--mono);
  text-decoration: none;
}
.app-link svg { width: 1rem; height: 1rem; }
.app-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.25em; }

.card {
  display: grid;
  align-content: start;
  gap: 1rem;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border: 1px solid var(--hairline);
  border-radius: calc(var(--r) + 0.25rem);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.card .tagline { font-size: clamp(1.6rem, 3vw, 2.1rem); }

/* Showcase: a dark stage in the app's own colours, in both themes. Palette per app: .showcase--<id>. */
.showcase {
  --sc-bg: #0d0f17;
  --sc-a: rgba(111, 130, 149, 0.55);
  --sc-b: rgba(169, 182, 194, 0.35);
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 2.5rem;
  overflow: hidden;
  padding: clamp(1.75rem, 5vw, 4rem);
  border-radius: calc(var(--r) + 0.75rem);
  background:
    radial-gradient(60% 70% at 88% 10%, var(--sc-a), transparent 70%),
    radial-gradient(55% 60% at 8% 100%, var(--sc-b), transparent 70%),
    var(--sc-bg);
  color: #f5f6f8;
  box-shadow: 0 40px 80px -40px rgba(10, 12, 30, 0.6);
  --ink: #f5f6f8;
  --ink-soft: rgba(245, 246, 248, 0.82);
  --muted: rgba(245, 246, 248, 0.62);
  --focus: #8cc4f5;
}
.showcase::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("grain.c0ee5a56db.svg");
  opacity: 0.12;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.showcase--slate {
  --sc-bg: #0c0c1a;
  --sc-a: rgba(92, 70, 220, 0.62);
  --sc-b: rgba(240, 112, 88, 0.42);
}
.showcase--groundwork {
  --sc-bg: #121316;
  --sc-a: rgba(184, 35, 107, 0.5);
  --sc-b: rgba(31, 95, 168, 0.45);
}
.showcase-copy { display: grid; align-content: center; justify-items: start; gap: 1.2rem; }

.stage {
  position: relative;
  min-height: 30rem;
  margin-inline: auto;
  width: min(100%, 30rem);
}
.device { position: absolute; }
.device img { width: 100%; height: auto; }
.phone {
  width: 54%;
  padding: 2.4%;
  border-radius: 13% / 6.4%;
  background: linear-gradient(145deg, #3a3d46, #121318 40%, #2a2c33);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 40px 70px -24px rgba(0, 0, 0, 0.75),
    0 10px 24px -10px rgba(0, 0, 0, 0.5);
}
.phone img { border-radius: 10.5% / 5.2%; }
.phone.front { left: 36%; top: 0; z-index: 2; }
.phone.back { left: 2%; top: 9%; z-index: 1; rotate: -7deg; filter: brightness(0.82) saturate(0.9); }
.watch {
  left: 6%;
  bottom: 0;
  z-index: 3;
  width: 30%;
  padding: 3.2%;
  border-radius: 26%;
  background: linear-gradient(145deg, #4a4d56, #15161b 45%, #2c2e35);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 30px 50px -18px rgba(0, 0, 0, 0.8);
}
.watch img { border-radius: 20%; }
.watch::after { /* digital crown */
  content: "";
  position: absolute;
  right: -4.5%;
  top: 24%;
  width: 5%;
  height: 18%;
  border-radius: 0 0.3rem 0.3rem 0;
  background: linear-gradient(90deg, #2b2d33, #5b5f69);
}

@media (min-width: 60rem) {
  .showcase { grid-template-columns: 1fr 1.05fr; align-items: center; min-height: 40rem; }
  .stage { min-height: 36rem; width: 100%; max-width: 34rem; margin-right: -1rem; }
  /* every other panel mirrors, so a page of apps reads as a rhythm, not a list */
  .apps .showcase:nth-child(even) { grid-template-columns: 1.05fr 1fr; }
  .apps .showcase:nth-child(even) .stage { order: -1; margin-right: 0; margin-left: -1rem; }
}
/* A two-phone stage (no watch) sits a little lower so the pair stays centred. */
.stage:not(:has(.watch)) .phone.front { top: 4%; }
.stage:not(:has(.watch)) .phone.back { top: 12%; }
@media (max-width: 30rem) {
  .stage { min-height: 0; aspect-ratio: 1 / 1.08; }
}

@media (prefers-reduced-motion: no-preference) {
  .js .showcase .device { transition: translate 1.4s var(--ease), opacity 1.2s var(--ease); }
  .js .showcase:not(.in) .phone.front { translate: 0 3rem; }
  .js .showcase:not(.in) .phone.back { translate: 2rem 4rem; opacity: 0; }
  .js .showcase:not(.in) .watch { translate: 0 2rem; opacity: 0; }
  .js .showcase .phone.back { transition-delay: 0.12s; }
  .js .showcase .watch { transition-delay: 0.3s; }
}

.next {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
  padding: 1.25rem 1.5rem;
  border: 1px dashed color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: calc(var(--r) + 0.25rem);
  color: var(--muted);
}
.next strong { color: var(--ink); font-weight: 600; }
.next-mark {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: 0.9rem;
  background: linear-gradient(180deg, #6f8295, #a9b6c2);
}
.next-mark svg { width: 70%; fill: #fbfaf7; }
@media (prefers-reduced-motion: no-preference) {
  .next-mark svg { animation: bob 6s ease-in-out infinite alternate; }
}
@keyframes bob { from { translate: -6% 0; } to { translate: 6% 0; } }

/* --- Principles ------------------------------------------------------------------------------------ */

.principles { display: grid; border-top: 1px solid var(--hairline); }
.principles li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1.25rem;
  align-items: baseline;
  padding-block: clamp(1.5rem, 3.5vw, 2.5rem);
  border-bottom: 1px solid var(--hairline);
}
.principles .num {
  grid-row: span 2;
  color: var(--muted);
  font: 500 0.85rem/1 var(--mono);
  letter-spacing: 0.1em;
}
.principles h3 {
  font: 400 italic clamp(2.6rem, 7.5vw, 5.5rem)/1 var(--serif);
  letter-spacing: -0.035em;
}
.principles p { max-width: 30rem; color: var(--ink-soft); font-size: 1.08rem; }

@media (min-width: 52rem) {
  .principles li { grid-template-columns: 4rem 1fr minmax(16rem, 26rem); align-items: center; }
  .principles .num { grid-row: auto; }
}

/* --- Studio ---------------------------------------------------------------------------------------- */

.studio {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(4rem, 11vw, 9rem);
  background: linear-gradient(180deg, var(--bg), var(--bg-2) 30%, var(--bg-2) 70%, var(--bg));
}
/* Cloud layers blend (screen) only with the background inside their own stacking context, so each sky box
   repeats its parent's background. */
.studio-sky, .contact-sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: inherit; }
.studio-sky .sky-layer.far { top: 10%; opacity: calc(var(--cloud-a) * 0.4); }
.studio-inner { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
.quote p {
  max-width: 22ch;
  font: 400 clamp(2.1rem, 5.6vw, 4.6rem)/1.08 var(--serif);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.quote p::before { content: "“"; }
.quote p::after { content: "”"; }
.studio-grid { display: grid; gap: 2rem; }
@media (min-width: 52rem) {
  .studio-grid { grid-template-columns: 1.2fr 1fr; gap: 4rem; align-items: start; }
}
.facts { display: grid; border-top: 1px solid var(--hairline); }
.facts div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--hairline);
}
.facts dt { color: var(--muted); font: 500 0.78rem/1.6 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.facts dd { color: var(--ink); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.facts a { text-underline-offset: 0.2em; text-decoration-color: var(--hairline); }
.facts a:hover { text-decoration-color: currentColor; }

/* --- Privacy --------------------------------------------------------------------------------------- */

.promises { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2rem; }
.promises li {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.1rem 0.7rem 0.85rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
  font-weight: 600;
}
.promises svg { width: 1.2rem; height: 1.2rem; color: var(--live); }

/* --- Contact --------------------------------------------------------------------------------------- */

.contact {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: start;
  gap: 1.1rem;
  overflow: hidden;
  padding: clamp(2rem, 7vw, 5.5rem);
  border-radius: calc(var(--r) + 0.75rem);
  background: linear-gradient(170deg, #4f6276, #6f8295 55%, #a9b6c2);
  color: #fbfaf7;
}
.contact-sky .sky-layer.near { top: 20%; opacity: 0.55; }
.contact .kicker { color: rgba(251, 250, 247, 0.8); }
.contact h2 {
  color: inherit;
  font-size: clamp(3rem, 11vw, 8rem);
  line-height: 0.92;
  letter-spacing: -0.055em;
}
.contact p { max-width: 32rem; color: rgba(251, 250, 247, 0.9); font-size: 1.15rem; }
.email {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  margin-top: 0.75rem;
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  background: #fbfaf7;
  color: #0b0d12;
  font: 650 clamp(1rem, 3.6vw, 1.3rem)/1.2 var(--display);
  text-decoration: none;
  overflow-wrap: anywhere;
  box-shadow: 0 18px 40px -18px rgba(20, 30, 45, 0.6);
  transition: transform 0.25s var(--ease);
}
.email svg { width: 1.1rem; height: 1.1rem; flex: none; }
.email:hover { transform: translateY(-2px); background: #fff; }
.contact :focus-visible { outline-color: #fbfaf7; }

:root[data-theme="dark"] .contact { background: linear-gradient(170deg, #121a24, #253241 60%, #3d4d5e); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .contact { background: linear-gradient(170deg, #121a24, #253241 60%, #3d4d5e); }
}

/* --- Footer ---------------------------------------------------------------------------------------- */

.site-footer { padding-top: clamp(1rem, 4vw, 3rem); overflow: hidden; }
.bigmark {
  padding-bottom: 0.16em;
  font: 700 clamp(2.6rem, 12.4vw, 10.5rem)/1.05 var(--display);
  letter-spacing: -0.065em;
  white-space: nowrap;
  color: transparent;
  background:
    linear-gradient(var(--mark-veil), var(--mark-veil)),
    url("clouds-far.b5c8010da2.webp") 0 40% / 900px 260px repeat-x,
    linear-gradient(180deg, var(--mark-1), var(--mark-2));
  background-blend-mode: normal, screen, normal;
  -webkit-background-clip: text;
  background-clip: text;
  user-select: none;
}
@media (prefers-reduced-motion: no-preference) {
  .js .bigmark.in { animation: drift-text 90s linear infinite; }
}
@keyframes drift-text { to { background-position: 0 0, -900px 40%, 0 0; } }
.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-block: 1.75rem calc(1.75rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 0.92rem;
}
.foot-id { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; margin: 0; }
.lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ink);
  font: 650 1rem/1 var(--display);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.lockup svg { width: 1.45rem; height: 1.45rem; flex: none; }
.bigmark em { font-weight: 400; letter-spacing: -0.035em; padding-right: 0.08em; }
.foot ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.foot a { color: var(--ink-soft); text-underline-offset: 0.2em; }
.foot a:hover { color: var(--ink); }

/* --- 404 ------------------------------------------------------------------------------------------- */

.lost { min-height: clamp(32rem, 86svh, 50rem); grid-template-rows: 1fr; }

/* --- Preferences ----------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .store, .email, .sky { transition: none; }
  .btn:hover, .store:hover, .email:hover { transform: none; }
}

@media (forced-colors: active) {
  .dot, .app-glyph, .next-mark { forced-color-adjust: none; }
  .contact, .showcase, .card, .status { border: 1px solid CanvasText; }
  .bigmark { color: CanvasText; background: none; }
}