/* Direction G: Blueprint. Warm paper, ink, one blueprint blue. The only light direction. */
:root {
  --bg: #f3f1ec;
  --paper-2: #eae7df;
  --fg: #16181d;
  --muted: #5d5f66;
  --line: rgba(22, 24, 29, 0.14);
  --accent: #2f5bea;
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body: 'Geist', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --pad: clamp(18px, 4vw, 48px);
}
::selection { color: #fff; }

.nav { background: linear-gradient(to bottom, rgba(243, 241, 236, 0.92), rgba(243, 241, 236, 0)); }
.nav__brand { font-family: var(--font-body); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; text-transform: none; }
.nav__links a { font-family: var(--font-body); font-size: 14px; letter-spacing: 0; text-transform: none; }
.nav__cta { min-height: 38px; padding: 0 16px; border-radius: 999px; background: var(--fg); color: var(--bg); font-weight: 500; opacity: 1 !important; }
.nav__toggle { font-family: var(--font-body); letter-spacing: 0; text-transform: none; font-size: 14px; }

.kicker { font: 500 11px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.serif { font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 5vw, 76px); line-height: 1; letter-spacing: -0.01em; }
.mono { color: var(--muted); }

/* ---------- Hero ---------- */
.hero { position: relative; height: 300vh; }
.hero__sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  background:
    linear-gradient(rgba(47, 91, 234, 0.07) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(47, 91, 234, 0.07) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(rgba(47, 91, 234, 0.12) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(90deg, rgba(47, 91, 234, 0.12) 1px, transparent 1px) 0 0 / 120px 120px,
    var(--bg);
}
.hero__sticky::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 40%, var(--bg) 100%); }
.hero__word { position: absolute; z-index: 1; font-family: var(--font-display); font-size: clamp(84px, 15vw, 250px); line-height: 0.85; letter-spacing: -0.02em; }
.hero__word--1 { left: var(--pad); top: 13vh; color: var(--accent); opacity: calc(1 - var(--p, 0) * 0.65); }
.hero__word--2 { right: var(--pad); bottom: 9vh; font-style: italic; opacity: calc(0.25 + var(--p, 0) * 0.75); }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; opacity: 0; transition: opacity 1.2s; }
.hero__canvas.is-ready { opacity: 1; }
.hero__fallback { display: none; position: absolute; left: 50%; top: 50%; width: min(60vw, 420px); transform: translate(-50%, -50%); z-index: 2; }
.no-3d .hero__fallback { display: block; }
.leaders { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; }
.leaders line { stroke: var(--fg); stroke-width: 1; opacity: 0; }
.tag { position: absolute; left: 0; top: 0; z-index: 4; display: flex; gap: 8px; align-items: center; padding: 7px 11px; background: #fff; border: 1px solid var(--fg); font: 500 11px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; opacity: 0; }
.tag b { color: var(--accent); font-weight: 500; }
.hero__lede { position: absolute; left: var(--pad); bottom: 30px; z-index: 4; max-width: 330px; font-size: 15px; color: var(--muted); }
.hero__meta { position: absolute; right: var(--pad); top: 84px; z-index: 4; }
.print-readout { color: var(--accent); }
@media (max-width: 760px) {
  .hero { height: 240vh; }
  .hero__word--1 { top: 12vh; }
  .hero__word--2 { bottom: 22vh; }
  .hero__lede { right: var(--pad); max-width: none; bottom: 76px; font-size: 14px; }
  .hero__meta { display: none; }
}
.reduced .hero, .no-3d .hero { height: 100vh; height: 100svh; }
.reduced .hero__word--1, .no-3d .hero__word--1 { opacity: 1; }
.reduced .hero__word--2, .no-3d .hero__word--2 { opacity: 1; }

/* ---------- Work: horizontal strip ---------- */
.work__pin { height: 100vh; height: 100svh; display: flex; align-items: center; padding: 0 var(--pad); overflow: hidden; border-top: 1px solid var(--line); }
.work__row { display: flex; align-items: center; gap: clamp(32px, 4vw, 64px); will-change: transform; }
.work__intro { flex: 0 0 clamp(260px, 28vw, 400px); display: flex; flex-direction: column; gap: 20px; }
.work__intro p { color: var(--muted); max-width: 34ch; }
.work__track { display: flex; gap: 20px; }
.card { flex: 0 0 clamp(260px, 24vw, 360px); display: flex; flex-direction: column; gap: 10px; }
.card__art { aspect-ratio: 4 / 5; border: 1px solid var(--line); margin-bottom: 8px; background-color: #fbfaf7; }
.card__art--1 { background-image: repeating-linear-gradient(90deg, transparent 0 9%, rgba(47, 91, 234, .14) 9% 31%, transparent 31% 34%), repeating-linear-gradient(0deg, transparent 0 6%, rgba(22, 24, 29, .06) 6% 27%, transparent 27% 31%); }
.card__art--2 { background-image: linear-gradient(90deg, #e3e0d8 50%, transparent 50%), linear-gradient(90deg, transparent calc(50% - 1px), var(--accent) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)), radial-gradient(ellipse at 75% 70%, #d9b48c, #efe6d8 70%); }
.card__art--3 { background-image: linear-gradient(transparent 10%, var(--fg) 10% 11%, transparent 11%), linear-gradient(170deg, transparent 18%, #cbb59b 18% 70%, transparent 70%), linear-gradient(transparent 76%, rgba(22, 24, 29, .5) 76% 77.5%, transparent 77.5% 81%, rgba(22, 24, 29, .2) 81% 82%, transparent 82%); }
.card__art--4 { background-image: radial-gradient(circle at 50% 50%, transparent 24%, var(--accent) 24.4%, transparent 25%), radial-gradient(circle at 50% 50%, transparent 36%, rgba(22, 24, 29, .3) 36.3%, transparent 37%), linear-gradient(rgba(47, 91, 234, .08) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(90deg, rgba(47, 91, 234, .08) 1px, transparent 1px) 0 0 / 16px 16px; }
.card__no { font: 500 11px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.card h3 { font-family: var(--font-display); font-weight: 400; font-size: 32px; line-height: 1; }
.card p { color: var(--muted); font-size: 15px; }
@media (max-width: 760px) {
  .work__pin { height: auto; display: block; padding: 96px 0; }
  .work__row { flex-direction: column; align-items: stretch; }
  .work__intro { flex: none; padding: 0 var(--pad); }
  .work__track { overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--pad) 8px; scrollbar-width: none; }
  .card { flex-basis: 78vw; scroll-snap-align: start; }
}
.reduced .work__pin { height: auto; display: block; padding: 96px var(--pad); }
.reduced .work__row { flex-direction: column; align-items: stretch; }
.reduced .work__track { overflow-x: auto; }

/* ---------- Spec ---------- */
.spec { padding: clamp(100px, 13vw, 180px) var(--pad); border-top: 1px solid var(--line);
  background: linear-gradient(rgba(47, 91, 234, 0.06) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(47, 91, 234, 0.06) 1px, transparent 1px) 0 0 / 24px 24px, var(--paper-2); }
.spec__head { display: flex; flex-direction: column; gap: 18px; max-width: 760px; margin-bottom: clamp(48px, 6vw, 80px); }
.spec__head p { color: var(--muted); font-size: 18px; max-width: 52ch; }
.spec__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sheet { display: flex; flex-direction: column; gap: 14px; padding: 26px; min-height: 240px; background: rgba(255, 255, 255, 0.62); border: 1px solid rgba(22, 24, 29, 0.1); border-radius: 14px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 20px 40px -28px rgba(22, 24, 29, 0.35); }
.sheet h3 { margin-top: auto; font-family: var(--font-display); font-weight: 400; font-size: 34px; line-height: 1; }
.sheet p { color: var(--muted); }
@media (max-width: 860px) { .spec__grid { grid-template-columns: 1fr; } .sheet { min-height: 0; } }

/* ---------- Contact + footer ---------- */
.contact { padding: clamp(110px, 15vw, 220px) var(--pad); text-align: center; border-top: 1px solid var(--line); }
.contact__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(60px, 11vw, 190px); line-height: 0.9; }
.contact__title em { color: var(--accent); }
.contact__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 32px; margin-top: 44px; }
.btn { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 28px; border-radius: 999px; background: var(--fg); color: var(--bg); text-decoration: none; font-weight: 500; }
.btn .todo { color: #9fb6ff; }
.btn:hover { background: var(--accent); }
.link { text-decoration: none; padding: 12px 0; border-bottom: 1px solid var(--fg); }
.footer { padding: 40px var(--pad) 84px; border-top: 1px solid var(--fg); }
.footer__word { font-family: var(--font-display); font-size: clamp(64px, 14.5vw, 250px); line-height: 0.9; letter-spacing: -0.02em; }
.footer__row { display: flex; justify-content: space-between; gap: 16px; margin-top: 20px; color: var(--muted); font-size: 14px; }