@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-v26-latin-regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-v26-latin-500.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-v26-latin-italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-v26-latin-500italic.ttf") format("truetype");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-v12-latin-regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-v12-latin-500.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-v12-latin-600.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-v12-latin-700.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Spline Sans Mono";
  src: url("../fonts/spline-sans-mono-v13-latin-regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Spline Sans Mono";
  src: url("../fonts/spline-sans-mono-v13-latin-500.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  --ink: #1C1A17;
  --ink-soft: #6B655C;
  --ink-faint: #A8A095;
  --paper: #F6F4EF;
  --surface: #FCFBF8;
  --raised: #FFFFFF;
  --linen: #DDD3C4;
  --hairline: rgba(28, 26, 23, 0.14);
}
:root[data-theme="dark"] {
  --ink: #F6F4EF;
  --ink-soft: #C9C2B4;
  --ink-faint: #948C7E;
  --paper: #1C1914;
  --surface: #23201A;
  --raised: #2A2620;
  --linen: #1C1914;
  --hairline: rgba(246, 244, 239, 0.14);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #F6F4EF;
    --ink-soft: #C9C2B4;
    --ink-faint: #948C7E;
    --paper: #1C1914;
    --surface: #23201A;
    --raised: #2A2620;
    --linen: #1C1914;
    --hairline: rgba(246, 244, 239, 0.14);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Hanken Grotesk", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px;
}
.wrap.narrow { max-width: 720px; }

header { padding: 40px 0 0; }

/* ---- Screenshot cards: real device captures, kept as their own
   light-mode photograph regardless of page theme ---- */
.shot {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  box-shadow: 0 24px 48px -28px rgba(28, 26, 23, 0.35);
  background: var(--surface);
}
.shot img { display: block; width: 100%; height: auto; }

.wordmark {
  font-family: "Newsreader", serif;
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  color: var(--ink);
  text-decoration: none;
}

/* Hover-only feedback, gated so touch devices (which fire :hover on tap)
   never get stuck in an altered state until the next tap elsewhere. */
@media (hover: hover) and (pointer: fine) {
  .wordmark { transition: opacity 200ms ease; }
  .wordmark:hover { opacity: 0.7; }
  .shot {
    transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .shot:hover { transform: scale(1.015); }
  .cta:hover { border-color: var(--ink-faint); }
}

.hero {
  padding: 64px 0 48px;
  border-bottom: 1px solid var(--hairline);
  display: grid;
  gap: 40px;
  align-items: center;
}
.hero-text { max-width: 46ch; }
.hero-shot {
  max-width: 280px;
  margin: 0 auto;
}

/* ---- Motion: one authored focal moment (the hero look assembling
   into place, top to bottom: the app's own core beat of an outfit
   resolving), plus quiet supporting states. Nothing here gates
   content visibility: every element's non-animated state is already
   the correct, fully-visible final position. ---- */
@media (prefers-reduced-motion: no-preference) {
  .hero-text {
    animation: heroTextIn 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .hero-shot {
    animation: heroShotIn 800ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
  }
  .hero-shot img {
    animation: heroShotReveal 900ms cubic-bezier(0.16, 1, 0.3, 1) 220ms both;
  }
}
@keyframes heroTextIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heroShotIn {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes heroShotReveal {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0% 0); }
}

/* Reduced motion: fewer and gentler, not zero. Keep an opacity fade
   (aids comprehension of what's appearing) but drop all movement,
   scale, and the clip-path reveal. */
@media (prefers-reduced-motion: reduce) {
  .hero-text, .hero-shot {
    animation: heroFadeOnly 300ms ease both;
  }
  .hero-shot img { animation: none; }
}
@keyframes heroFadeOnly {
  from { opacity: 0; }
  to { opacity: 1; }
}

.kicker {
  font-family: "Spline Sans Mono", monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 20px;
}
h1 {
  font-family: "Newsreader", serif;
  font-weight: 500;
  font-size: clamp(32px, 6vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 24px;
}
.lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 0 0 32px;
}
.cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Spline Sans Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 12px 22px;
  transition: transform 120ms cubic-bezier(0.16, 1, 0.3, 1), border-color 200ms ease;
}
.cta:active { transform: scale(0.97); }

.section-intro {
  font-family: "Newsreader", serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(18px, 2.6vw, 22px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 64px auto 0;
  padding: 0 24px;
  text-align: center;
  text-wrap: balance;
}

.features {
  padding: 40px 0 56px;
  border-bottom: 1px solid var(--hairline);
  column-count: 1;
  column-gap: 40px;
}
.feature {
  break-inside: avoid;
  margin-bottom: 56px;
}
.feature .shot { margin-bottom: 20px; }
.feature .kicker { margin-bottom: 10px; }
.feature h2 {
  font-family: "Newsreader", serif;
  font-weight: 500;
  font-size: 24px;
  margin: 0 0 10px;
  line-height: 1.25;
}
.feature p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  max-width: 52ch;
}

/* ---- Scroll reveal: staggered, via IntersectionObserver + CSS
   transitions (not keyframes, so a fast scroll that re-triggers layout
   doesn't restart anything mid-flight). The .js class is only added
   when IntersectionObserver exists, added synchronously before first
   paint, so there is no flash of hidden content and no risk of content
   shipping permanently invisible if JS fails or is blocked. An earlier
   attempt used CSS animation-timeline: view() for this and it
   reproducibly hung the page on scroll in testing; this is the mature,
   universally-supported replacement. ---- */
.js .feature, .js .feature--spotlight {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 550ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 550ms cubic-bezier(0.16, 1, 0.3, 1);
}
.js .feature.is-visible, .js .feature--spotlight.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .js .feature, .js .feature--spotlight {
    transform: none;
    transition: opacity 300ms ease;
  }
}

/* ---- Spotlight: the one differentiated feature (breaks the grid's
   uniform rhythm on purpose; the anchor claim gets anchor weight).
   Lives outside .features (a multi-column container) since column-span
   does not reliably span a CSS multicol layout, so a full-width block
   ahead of it is the robust way to get the same effect. ---- */
.feature--spotlight {
  display: grid;
  gap: 28px;
  align-items: center;
  margin: 8px 0 64px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 24px;
}
.feature--spotlight .shot { margin-bottom: 0; box-shadow: none; }
.feature--spotlight h2 { font-size: 28px; }
.feature--spotlight p { max-width: 60ch; }
@media (min-width: 760px) {
  .feature--spotlight {
    grid-template-columns: 1.1fr 1fr;
    padding: 40px;
  }
}

/* ---- Legal / prose pages (Privacy, Imprint) ---- */
.prose { padding: 48px 0 24px; }
.prose h1 { font-size: clamp(28px, 5vw, 38px); }
.prose h2 {
  font-family: "Newsreader", serif;
  font-weight: 500;
  font-size: 21px;
  margin: 40px 0 12px;
}
.prose p, .prose li {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 62ch;
}
.prose p { margin: 0 0 16px; }
.prose ul { margin: 0 0 16px; padding-left: 22px; }
.prose a { color: var(--ink); }
.prose .updated {
  font-family: "Spline Sans Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 40px;
}
.prose .placeholder {
  background: rgba(160, 61, 46, 0.1);
  border: 1px dashed rgba(160, 61, 46, 0.45);
  border-radius: 4px;
  padding: 0 4px;
  color: var(--ink);
  font-style: normal;
}
.back-link {
  display: inline-block;
  margin-bottom: 32px;
  font-family: "Spline Sans Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .back-link { transition: color 200ms ease; }
  .back-link:hover { color: var(--ink-soft); }
}

footer {
  padding: 40px 0 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
footer .wordmark { font-size: 18px; }
.footer-note {
  font-family: "Spline Sans Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.footer-links {
  display: flex;
  gap: 18px;
  font-family: "Spline Sans Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.footer-links a {
  color: var(--ink-faint);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .footer-links a { transition: color 200ms ease; }
  .footer-links a:hover { color: var(--ink-soft); }
}

@media (min-width: 640px) {
  .features { column-count: 2; }
  .feature p { max-width: none; }
}
@media (min-width: 760px) {
  .hero { grid-template-columns: 1.3fr 1fr; }
  .hero-shot { max-width: 100%; margin: 0; }
}