/* Ilia Reutov — portfolio · Swiss Bold design system
 *
 * Spec: docs/superpowers/specs/2026-07-07-swiss-bold-redesign-design.md
 *
 * JS contract (script.js):
 *   [data-reveal]      — hidden via .reveal-pending ONLY by JS (no-JS = visible),
 *                        shown once with .reveal-in when entering the viewport.
 *   [data-count="N"]   — numeric prefix of the element text is counted 0 -> N;
 *                        non-numeric metrics carry no attribute and are untouched.
 * Decorative numbering comes from CSS (data-num attributes), so text content
 * stays identical to the pre-redesign pages.
 */

:root {
  --paper: #f7f6f2;
  --ink: #0a0a0a;
  --gray: #525252;
  --faint: #6b6a66; /* 5:1 on --paper — keeps small labels WCAG AA */
  --accent: #2419ff;
  --accent-soft: #7c7ff2;
  --border: 1.5px solid var(--ink);
  --max: 1080px;
  --pad: 24px;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #eceae4;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: var(--paper); }

.frame {
  max-width: var(--max);
  margin: 0 auto;
  background: var(--paper);
  border-left: var(--border);
  border-right: var(--border);
  min-height: 100vh;
}

.mono {
  font-family: var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

a { color: inherit; text-decoration: none; }

a:focus-visible, button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

/* ---------- Nav ---------- */

.nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--pad);
  background: rgba(247, 246, 242, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: var(--border);
}
.nav .brand { font-weight: 850; font-size: 15px; letter-spacing: 0.02em; text-transform: uppercase; }
.nav .links { display: flex; gap: 22px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.nav .links a { min-height: 44px; display: inline-flex; align-items: center; }
.nav .links a:hover { color: var(--accent); }

/* ---------- Hero ---------- */

.hero { padding: 64px var(--pad) 44px; }

.hero .kicker {
  font-size: 11px; font-weight: 600; color: var(--accent);
  margin-bottom: 22px;
}
.hero .kicker::before { content: "01 — "; }

.hero h1 {
  font-size: clamp(30px, 5vw, 54px);
  font-weight: 870;
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  max-width: 20ch;
}
.hero h1 .w {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding-bottom: 0.08em; margin-bottom: -0.08em;
}
.hero h1 .w i {
  display: inline-block; font-style: normal;
  animation: word-up 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(0.02s + var(--i, 0) * 0.04s);
}
.hero h1 .dot { color: var(--accent); }

.hero .tagline {
  margin-top: 26px; font-size: 16px; line-height: 1.6;
  color: var(--gray); max-width: 56ch;
  animation: fade-up 0.45s ease 0.2s both;
}
.hero .meta {
  margin-top: 14px; font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint);
  animation: fade-up 0.45s ease 0.28s both;
}

@keyframes word-up { from { transform: translateY(110%); } to { transform: translateY(0); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- CTA strip ---------- */

.cta {
  display: flex; border-top: var(--border);
  animation: fade-up 0.45s ease 0.36s both;
}
.cta a {
  flex: 1; padding: 16px var(--pad); min-height: 44px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  border-right: var(--border);
  transition: background 0.2s, color 0.2s;
}
.cta a:last-child { border-right: none; }
.cta a:hover { background: var(--ink); color: var(--paper); }
.cta a.primary { background: var(--accent); color: var(--paper); }
.cta a.primary:hover { background: var(--ink); }

/* ---------- Marquee ---------- */

.marquee {
  border-top: var(--border); border-bottom: var(--border);
  overflow: hidden; white-space: nowrap; padding: 10px 0;
  font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
}
.marquee .track {
  display: inline-block;
  animation: marquee 22s linear infinite;
}
.marquee:hover .track { animation-play-state: paused; }
.marquee .sep { color: var(--accent); padding: 0 18px; }

@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Section headers ---------- */

section { padding: 48px var(--pad) 0; }
/* Anchor targets must clear the ~73px sticky nav */
section, footer { scroll-margin-top: 84px; }
.sec-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 24px; gap: 16px; flex-wrap: wrap;
}
.sec-head h2 {
  font-size: 24px; font-weight: 850; letter-spacing: -0.02em; text-transform: uppercase;
}
.sec-head .num { font-size: 11px; font-weight: 600; color: var(--accent); }
.sec-head .num::before { content: attr(data-num) " — "; }

/* ---------- Case rows (homepage) ---------- */

.case-row {
  display: grid;
  grid-template-columns: 44px 1fr 200px 40px;
  gap: 20px;
  padding: 24px var(--pad);
  border-top: var(--border);
  transition: background 0.22s, color 0.22s;
}
.case-row:last-of-type { border-bottom: var(--border); }
.case-row .idx { font-size: 12px; font-weight: 700; color: var(--accent); }
.case-row .kicker {
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 8px;
}
.case-row h3 {
  font-size: 19px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15;
  margin-bottom: 8px;
}
.case-row p { font-size: 13px; line-height: 1.55; color: var(--gray); max-width: 52ch; }
.case-row .metrics { font-size: 11px; }
.case-row .metrics strong {
  display: block; font-size: 15px; font-weight: 850; color: var(--accent);
  letter-spacing: -0.01em;
}
.case-row .metrics span { display: block; color: var(--faint); margin-bottom: 8px; }
.case-row .arr { font-size: 20px; font-weight: 800; align-self: center; transition: transform 0.22s; }

.case-row:hover { background: var(--ink); color: var(--paper); }
.case-row:hover p { color: #c9c9c9; }
.case-row:hover .kicker, .case-row:hover .metrics span { color: #9c9b97; }
.case-row:hover .idx, .case-row:hover .metrics strong { color: var(--accent-soft); }
.case-row:hover .arr { color: var(--accent-soft); transform: translateX(4px); }

/* ---------- About ---------- */

.about-grid {
  display: grid; grid-template-columns: 200px 1fr; gap: 24px;
  padding: 24px var(--pad); border-top: var(--border);
}
.about-grid .label { font-size: 11px; font-weight: 600; color: var(--accent); }
.about-grid p { font-size: 14px; line-height: 1.65; color: #3a3a3a; max-width: 62ch; }
.about-grid p + p { margin-top: 12px; }
.about-grid a { color: var(--accent); font-weight: 600; }
.about-grid a:hover { text-decoration: underline; }

/* ---------- Projects ---------- */

.proj-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: var(--border); }
.proj-grid > div { padding: 22px var(--pad); }
.proj-grid > div:nth-child(odd):not(:last-child) { border-right: var(--border); }
.proj-grid > div:nth-child(n+3) { border-top: var(--border); }
.proj-grid h3 { font-size: 15px; font-weight: 800; text-transform: uppercase; margin-bottom: 6px; }
.proj-grid h3 a:hover { color: var(--accent); }
.proj-grid p { font-size: 13px; line-height: 1.55; color: var(--gray); }
.proj-grid p a { color: var(--accent); font-weight: 600; }
.proj-grid p a:hover { text-decoration: underline; }

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

footer { border-top: var(--border); margin-top: 48px; }
footer .mail {
  display: block; padding: 36px var(--pad);
  font-size: clamp(20px, 3.5vw, 36px); font-weight: 870;
  letter-spacing: -0.02em; text-transform: uppercase;
  transition: background 0.2s, color 0.2s;
}
footer .mail::after { content: " ↗"; }
footer .mail:hover { background: var(--accent); color: var(--paper); }
footer .row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex-wrap: wrap;
  padding: 8px var(--pad); border-top: var(--border);
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
footer .row a { margin-right: 18px; min-height: 44px; display: inline-flex; align-items: center; }
footer .row a:hover { color: var(--accent); }
footer .copy { color: var(--faint); }

/* ---------- Case pages ---------- */

.case-head { padding: 56px var(--pad) 36px; }
.case-head .kicker {
  font-size: 11px; font-weight: 600; color: var(--accent);
  margin-bottom: 18px;
  animation: fade-up 0.45s ease both;
}
.case-head h1 {
  font-size: clamp(26px, 4vw, 42px); font-weight: 870; line-height: 1.02;
  letter-spacing: -0.03em; text-transform: uppercase; max-width: 24ch;
  animation: fade-up 0.45s ease 0.08s both;
}
.case-head .sub {
  margin-top: 18px; font-size: 15px; line-height: 1.6; color: var(--gray); max-width: 58ch;
  animation: fade-up 0.45s ease 0.16s both;
}

.facts {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: var(--border);
  animation: fade-up 0.45s ease 0.24s both;
}
.facts > div { padding: 16px 20px; border-right: var(--border); border-bottom: var(--border); }
.facts > div:nth-child(4n), .facts > div:last-child { border-right: none; }
.facts strong {
  display: block; font-size: 16px; font-weight: 850; color: var(--accent);
  letter-spacing: -0.01em; margin-bottom: 3px;
}
.facts span {
  font-size: 10.5px; font-weight: 600; color: var(--faint);
  text-transform: uppercase; letter-spacing: 0.06em;
}

.case-sec {
  display: grid; grid-template-columns: 200px 1fr; gap: 24px;
  border-top: var(--border); padding: 22px var(--pad);
}
.case-sec:first-of-type { border-top: none; }
.case-sec h2 {
  font-family: var(--mono);
  font-size: 11px; font-weight: 600; color: var(--accent);
  letter-spacing: 0.12em; text-transform: uppercase;
  line-height: 1.6;
}
.case-sec h2::before { content: attr(data-num) " — "; }
.case-sec .txt { max-width: 66ch; }
.case-sec p { font-size: 14px; line-height: 1.65; color: #3a3a3a; }
.case-sec p + p, .case-sec ul + p, .case-sec p + ul { margin-top: 10px; }
.case-sec ul { margin-left: 18px; font-size: 14px; line-height: 1.65; color: #3a3a3a; }
.case-sec li { margin-bottom: 6px; }
.case-sec li::marker { color: var(--accent); font-weight: 800; }
.case-sec a { color: var(--accent); font-weight: 600; }
.case-sec a:hover { text-decoration: underline; }

.callout {
  border-left: 3px solid var(--accent);
  padding: 12px 16px; margin: 14px 0;
  font-size: 13.5px; line-height: 1.55; font-weight: 600;
}

figure { border: var(--border); margin: 14px 0; padding: 18px; }
figure svg { width: 100%; height: auto; display: block; }
figcaption {
  font-size: 11.5px; color: var(--faint); border-top: var(--border);
  padding-top: 10px; margin-top: 14px;
}

.case-nav { display: flex; border-top: var(--border); }
.case-nav a {
  flex: 1; padding: 20px var(--pad); min-height: 44px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  transition: background 0.2s, color 0.2s;
}
.case-nav a + a { border-left: var(--border); text-align: right; }
.case-nav a:hover { background: var(--ink); color: var(--paper); }

/* ---------- Scroll reveal (JS-driven; no-JS keeps content visible) ---------- */

.reveal-pending { opacity: 0; transform: translateY(16px); }
.reveal-in {
  opacity: 1; transform: none;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .facts { grid-template-columns: repeat(2, 1fr); }
  .facts > div { border-right: var(--border); }
  .facts > div:nth-child(2n), .facts > div:last-child { border-right: none; }
  .case-row { grid-template-columns: 32px 1fr 40px; }
  .case-row .metrics {
    grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 12px;
  }
  .case-row .metrics span { margin-bottom: 0; }
  .case-row .arr { grid-column: 3; grid-row: 1; }
  .about-grid, .case-sec { grid-template-columns: 1fr; gap: 10px; }
  .proj-grid { grid-template-columns: 1fr; }
  .proj-grid > div:nth-child(odd) { border-right: none; }
  .proj-grid > div:nth-child(n+2) { border-top: var(--border); }
}

@media (max-width: 640px) {
  .hero { padding: 44px var(--pad) 36px; }
  .nav { padding: 12px 16px; }
  .nav .brand { font-size: 13px; }
  .nav .links { gap: 12px; font-size: 10px; }
  .facts { grid-template-columns: 1fr; }
  .facts > div { border-right: none; }
  .cta { flex-direction: column; }
  .cta a { border-right: none; border-bottom: var(--border); }
  .cta a:last-child { border-bottom: none; }
  .case-nav { flex-direction: column; }
  .case-nav a + a { border-left: none; border-top: var(--border); }
  footer .mail { font-size: clamp(15px, 4.5vw, 20px); }
}

/* ---------- Reduced motion: kill everything, content is static ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal-pending { opacity: 1; transform: none; }
}

/* Print: reveal everything the scroll observer never got to */
@media print {
  .reveal-pending { opacity: 1; transform: none; }
}