/* ============ fonts ============ */
@font-face { font-family: 'Schibsted Grotesk'; src: url('/assets/fonts/sg-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Schibsted Grotesk'; src: url('/assets/fonts/sg-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Schibsted Grotesk'; src: url('/assets/fonts/sg-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Schibsted Grotesk'; src: url('/assets/fonts/sg-900.woff2') format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'Fragment Mono'; src: url('/assets/fonts/fm-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
/* Cyrillic fallback — fetched only when Cyrillic glyphs are on the page */
@font-face { font-family: 'Golos Text'; src: url('/assets/fonts/gt-400-cyr.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0400-04FF; }

/* ============ tokens ============ */
:root {
  --paper: #F2EFE8;
  --ink: #1C1A16;
  --ink-soft: #5C574C;
  --note: #6B6357;
  --hairline: #DCD8CC;
  --purple: #8077F6;
  --blue: #77B9F6;
  --yellow: #F9BF29;
  --sans: 'Schibsted Grotesk', 'Golos Text', system-ui, sans-serif;
  --mono: 'Fragment Mono', 'Golos Text', ui-monospace, monospace;
  --pad: clamp(20px, 5vw, 72px);
  --measure: 62ch;
  --site-max: 1680px;
}

/* ============ base ============ */
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
::selection { background: var(--purple); color: var(--paper); }
:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }
.mono { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; }
.muted { color: var(--note); }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: .5em 1em; z-index: 10; }
.skip:focus { left: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ============ topbar ============ */
.topbar { display: flex; justify-content: space-between; gap: 1em; padding: 22px var(--pad); border-bottom: 1px solid var(--hairline); }
.topbar span:first-child { white-space: nowrap; align-self: start; }

/* ============ hero ============ */
.hero {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px);
  align-items: center; padding: clamp(48px, 9vh, 120px) var(--pad);
  background-image:
    repeating-linear-gradient(0deg, transparent 0 13px, rgba(28, 26, 22, .045) 13px 14px),
    repeating-linear-gradient(90deg, transparent 0 13px, rgba(28, 26, 22, .045) 13px 14px);
}
h1 { font-weight: 900; font-size: clamp(2.6rem, 7vw, 5.4rem); line-height: .98; letter-spacing: -.025em; max-width: 12ch; }
.caret { display: inline-block; width: .45em; height: .1em; background: var(--ink); margin-left: .08em; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.sub { color: var(--ink-soft); max-width: 44ch; margin-top: 1.4em; font-size: clamp(1rem, 1.4vw, 1.15rem); }
.meta { color: var(--note); margin-top: 1.6em; }
.hero-fig { display: flex; flex-direction: column; gap: 10px; min-width: 0; max-width: 500px; justify-self: center; }
.hero-fig svg { width: 100%; height: auto; }
.hero-fig figcaption { letter-spacing: .08em; }
#hero-particles rect { transition: transform 1.6s cubic-bezier(.22, .9, .3, 1), opacity .5s ease; }
/* animation states applied by JS */
.anim #hero-mark { opacity: 0; }
.settle #hero-mark { opacity: 1; transition: opacity .7s ease; }
.settle #hero-particles { opacity: 0; transition: opacity .6s ease .1s; }

/* ============ plates ============ */
.plate { padding: clamp(48px, 8vh, 96px) var(--pad); border-top: 1px solid var(--hairline); }
.plate-label { color: var(--note); font-weight: 400; font-size: .72rem; }
.plate-intro { margin: 1.2em 0 2em; max-width: var(--measure); color: var(--ink-soft); font-size: 1.1rem; }

/* color hooks for stitch accents */
.c-purple { --x-color: var(--purple); }
.c-blue { --x-color: var(--blue); }
.c-yellow { --x-color: var(--yellow); }

/* cases */
.cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.case { position: relative; border: 1px solid var(--hairline); background: #FAF8F3; padding: 26px 24px 22px; }
.case .x { position: absolute; top: 10px; right: 10px; width: 11px; height: 11px; color: var(--x-color); }
.case h3 { font-weight: 700; font-size: 1.05rem; line-height: 1.3; letter-spacing: -.01em; }
.case p { margin-top: .7em; color: var(--ink-soft); font-size: .95rem; }

/* ledger (deeper systems) */
.ledger .row { display: grid; grid-template-columns: minmax(180px, 3fr) 7fr; gap: 1em 3em; padding: 1.1em 0; border-bottom: 1px solid var(--hairline); position: relative; }
.ledger .row:last-child { border-bottom: none; }
.ledger dt { font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; }
.ledger dd { color: var(--ink-soft); max-width: 58ch; }
.ledger .row::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: repeating-linear-gradient(90deg, var(--x-color) 0 7px, transparent 7px 12px);
  transform: scaleX(0); transform-origin: left; transition: transform .55s steps(14); }
.ledger .row:hover::after { transform: scaleX(1); }

/* products */
.products { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; }
.product { border: 1px solid var(--hairline); padding: 22px 22px 20px; }
.product .no { color: var(--note); font-weight: 400; }
.product p:last-child { margin-top: .8em; color: var(--ink-soft); font-size: .95rem; }

/* founder quote (figure > blockquote + figcaption) */
.founder { max-width: 36em; }
.founder p { font-weight: 500; font-size: clamp(1.25rem, 2.4vw, 1.7rem); line-height: 1.42; letter-spacing: -.012em; }
.founder p + p { margin-top: 1.1em; }
.founder strong { font-weight: 900; }
.founder figcaption { margin-top: 2em; }

/* provenance */
.prov { font-size: clamp(1.1rem, 1.8vw, 1.35rem); max-width: var(--measure); }
.stitch-3c { padding-bottom: 4px; background:
    repeating-linear-gradient(90deg, transparent 0 7px, var(--paper) 7px 10px),
    linear-gradient(90deg, var(--purple) 0 33.4%, var(--blue) 33.4% 66.7%, var(--yellow) 66.7% 100%);
  background-position: 0 100%, 0 100%; background-size: 100% 3px, 100% 3px; background-repeat: no-repeat; }
.facts { margin-top: 1.6em; color: var(--note); }

/* contact */
.contact .email { font-weight: 900; font-size: clamp(1.8rem, 4.5vw, 3.2rem); letter-spacing: -.02em; text-decoration: none; border-bottom: 3px solid var(--ink); }
.contact .email:hover { border-bottom-color: var(--purple); }
.contact p + p { margin-top: 1.4em; }
.contact .li { text-decoration: none; border-bottom: 1px solid var(--note); }
.contact .li:hover { border-bottom-color: var(--ink); color: var(--ink); }

/* footer seal */
.seal { background: var(--ink); color: var(--hairline); display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: 26px var(--pad); }
.seal-mark { width: 22px; height: auto; flex: none; }

/* ============ reveals & streaming ============ */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
.stream .tok { visibility: hidden; }
.stream .tok.on { visibility: visible; }

/* no-JS: everything visible (JS adds .js to <html> before enabling hidden states) */
html:not(.js) .reveal { opacity: 1; transform: none; }

/* ============ responsive ============ */
/* Ultra-wide: keep sections full-bleed (hairlines + seal span the viewport)
   while centering content to --site-max via inline padding. */
.topbar, .hero, .plate, .seal { padding-inline: max(var(--pad), calc((100% - var(--site-max)) / 2)); }

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; }
  .hero-fig { max-width: 340px; justify-self: center; }
  .ledger .row { grid-template-columns: 1fr; gap: .4em; }
  .seal { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* killing transitions is safe: the .reveal override below forces final visible state */
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .caret { display: none; }
}