/*
  02n teaser for 02n.ai (the full site in site/ stays unpublished).
  Brand kit: Ink/Paper, app tile in head and foot, stair motif white on dark,
  Inter and Geist Mono self-hosted, one motion moment (the stair draws once).
*/

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/geist-mono-latin.woff2") format("woff2");
  font-weight: 500 600;
  font-display: swap;
}

:root {
  --ink: #0a0a0a;
  --paper: #ffffff;
  --d-muted: #a1a1aa;   /* 7.9:1 on ink */
  --d-line: #27272a;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, p, ul, figure, address { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: 1048px; margin: 0 auto; padding: 0 24px; }

/* App tile (brand kit, logo/ui): white tile, ink 02n on dark */
.tile { display: block; color: var(--paper); --tile-ink: var(--ink); }

/* Fixed head: the tile stays in reach while scrolling (imprint, privacy) */
.head { position: sticky; top: 0; z-index: 10; padding: 24px 0; background: var(--ink); }
.head a { display: inline-flex; }

/* Teaser */
.teaser { flex: 1; display: flex; align-items: center; padding: 48px 0 96px; }
.stair { margin: 0 0 48px; max-width: 760px; }
.stair svg { display: block; width: 100%; height: auto; overflow: visible; }
.stair .narrow { display: none; }
.stair .curve, .stair .tail { fill: none; stroke: var(--paper); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.stair .tail { stroke-dasharray: 2 9; }
.stair .marks circle { fill: var(--ink); stroke: var(--paper); stroke-width: 3; }
.stair text { font-family: var(--mono); font-weight: 500; font-variant-numeric: slashed-zero; font-feature-settings: "zero" 1; fill: var(--d-muted); }
.stair text.end { fill: var(--paper); }

/* The one motion moment: the stair draws itself once on load */
.js .stair .curve { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .stair .tail, .js .stair .marks { opacity: 0; }
.js .stair.drawn .curve { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.4, 0, .2, 1); }
.js .stair.drawn .tail, .js .stair.drawn .marks { opacity: 1; transition: opacity .4s 1.4s; }
@media (prefers-reduced-motion: reduce) {
  .js .stair .curve { stroke-dashoffset: 0; }
  .js .stair .tail, .js .stair .marks { opacity: 1; }
}

.claim { font-size: 1.75rem; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
.contact { margin-top: 16px; color: var(--d-muted); }
.mail { font-family: var(--mono); font-weight: 500; font-variant-numeric: slashed-zero; font-feature-settings: "zero" 1; color: var(--paper); transition: color .15s; }
.mail:hover { color: var(--d-muted); }

/* Footer */
.foot { padding: 32px 0 40px; font-size: .8125rem; color: var(--d-muted); }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.foot-row p { flex: 1 1 320px; }
.foot-links { display: flex; gap: 24px; }
.foot-links a { text-decoration: none; transition: color .15s; }
.foot-links a:hover, .foot-links a[aria-current] { color: var(--paper); }

/* Legal pages */
.legal { flex: 1; padding: 48px 0 96px; }
.legal .text { max-width: 680px; }
.legal h1 { font-size: 1.75rem; line-height: 1.25; font-weight: 600; margin-bottom: 32px; }
.legal h2 { font-size: 1.0625rem; font-weight: 600; margin: 40px 0 8px; }
.legal p, .legal address, .legal li { color: var(--d-muted); font-style: normal; }
.legal p + p, .legal p + ul, .legal ul + p, .legal address + p { margin-top: 12px; }
.legal ul li { padding-left: 16px; position: relative; }
.legal ul li::before { content: "–"; position: absolute; left: 0; }
.legal strong { color: var(--paper); font-weight: 600; }
.legal .updated { margin-top: 48px; font-size: .8125rem; }

@media (max-width: 720px) {
  .wrap { padding: 0 20px; }
  .head { padding: 20px 0; }
  .teaser { align-items: flex-start; padding: 40px 0 64px; }
  .stair { margin-bottom: 40px; }
  .stair .wide { display: none; }
  .stair .narrow { display: block; }
  .claim { font-size: 1.5rem; }
  .legal { padding: 32px 0 64px; }
  .legal h1 { font-size: 1.5rem; }
}