:root {
  --paper: #f4f1e9;
  --ink: #172033;
  --muted: #697180;
  --rule: rgba(23, 32, 51, .17);
  --signal: #d9f06a;
  --coral: #ed6b4d;
  --blue: #315bdc;
  --serif: "Fraunces", Georgia, serif;
  --sans: "DM Sans", sans-serif;
  --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
.grain { position: fixed; inset: 0; z-index: 10; pointer-events: none; opacity: .12; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E"); }
.progress { position: fixed; left: 0; top: 0; z-index: 30; width: 0; height: 4px; background: var(--coral); }
.shell { display: grid; grid-template-columns: 86px minmax(0, 1fr); width: min(1440px, 100%); margin: auto; }
.rail { position: sticky; top: 0; display: flex; flex-direction: column; align-items: center; height: 100vh; padding: 28px 0; border-right: 1px solid var(--rule); }
.monogram { display: grid; place-items: center; width: 42px; height: 42px; background: var(--ink); color: var(--paper); font: 500 .8rem var(--mono); }
.rail-line { width: 1px; height: 22vh; margin: 30px 0 18px; background: var(--ink); opacity: .35; }
.rail-label { writing-mode: vertical-rl; transform: rotate(180deg); font: 500 .68rem var(--mono); letter-spacing: .15em; }
.rail-links { display: flex; flex-direction: column; gap: 14px; margin-top: auto; font: 500 .72rem var(--mono); }
.rail-links a:hover, .topbar a:hover, .closing-links a:hover { color: var(--coral); }
main { min-width: 0; padding: 0 clamp(24px, 5vw, 76px); }
.topbar { display: flex; align-items: center; justify-content: space-between; height: 98px; border-bottom: 1px solid var(--rule); font: 500 .73rem var(--mono); }
.topbar a { transition: color .2s ease; }
.topbar b { color: var(--coral); font-size: 1rem; }
.status { color: var(--muted); }
.status i { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #82b541; box-shadow: 0 0 0 4px rgba(130,181,65,.13); }
.hero { display: grid; grid-template-columns: 1fr 1.1fr; min-height: 680px; align-items: center; padding: 100px 0 90px; }
.hero-kicker, .section-index, .case-copy small, .section-note, .hero-meta, .timeline-row > span { font: 500 .72rem var(--mono); letter-spacing: .04em; }
.hero-kicker { align-self: start; color: var(--coral); }
.hero-kicker span, .section-index { margin-right: 14px; color: var(--muted); }
h1 { grid-column: 2; margin: 0 0 40px -8vw; font: 500 clamp(5rem, 13vw, 12rem)/.77 var(--sans); letter-spacing: -.11em; }
h1 em { color: var(--blue); font-family: var(--serif); font-style: normal; font-weight: 500; letter-spacing: -.12em; }
.dot { color: var(--coral); }
.hero-bottom { grid-column: 2; display: flex; gap: 45px; align-items: end; margin-left: -8vw; }
.lede { max-width: 410px; margin: 0; font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.22; letter-spacing: -.03em; }
.hero-meta { display: flex; flex-direction: column; gap: 8px; color: var(--muted); line-height: 1.3; }
.signal-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.signal-strip div { display: flex; flex-direction: column; gap: 8px; min-height: 130px; padding: 24px 18px 22px 0; border-right: 1px solid var(--rule); }
.signal-strip div:not(:first-child) { padding-left: 22px; }
.signal-strip div:last-child { border-right: 0; }
.signal-strip strong { font: 500 2.4rem var(--serif); letter-spacing: -.07em; }
.signal-strip span { color: var(--muted); font: 500 .7rem var(--mono); text-transform: uppercase; }
.section { padding: 150px 0 60px; }
.intro, .section-head { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; }
.intro h2, .closing h2 { max-width: 720px; margin: 0 0 24px; font: 500 clamp(2.7rem, 5.5vw, 5.8rem)/.94 var(--serif); letter-spacing: -.075em; }
.body-copy { max-width: 530px; color: var(--muted); font-size: 1.06rem; line-height: 1.6; }
.role-list { display: flex; flex-wrap: wrap; gap: 9px; max-width: 680px; margin-top: 28px; }
.role-list span { padding: 9px 11px; border: 1px solid var(--rule); color: var(--muted); font: 500 .7rem var(--mono); }
.role-list .role-primary { border-color: var(--ink); color: var(--ink); background: var(--signal); }
.link-row { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 32px; }
.underlink { display: inline-flex; gap: 20px; padding-bottom: 8px; border-bottom: 1px solid var(--ink); font: 500 .78rem var(--mono); transition: gap .2s ease, color .2s ease; }
.underlink:hover { gap: 28px; color: var(--coral); }
.section-head { margin-bottom: 46px; }
.section-note { color: var(--muted); line-height: 1.5; }
.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.case { display: block; border: 1px solid var(--rule); background: rgba(255,255,255,.26); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; }
.case:hover { transform: translateY(-8px); box-shadow: 0 24px 50px rgba(23,32,51,.11); }
.case-wide { grid-column: span 2; display: grid; grid-template-columns: 1.1fr .9fr; }
.case-art { position: relative; display: flex; min-height: 250px; align-items: flex-start; justify-content: space-between; overflow: hidden; padding: 24px; font: 500 .69rem var(--mono); letter-spacing: .04em; }
.case-art span { position: relative; z-index: 1; }
.art-watch { color: #d9f06a; background: #1b2737; }
.art-watch i { position: absolute; right: 12%; width: 70%; height: 1px; background: rgba(217,240,106,.55); transform: rotate(-22deg); }
.art-watch i:nth-of-type(1) { top: 45%; }.art-watch i:nth-of-type(2) { top: 58%; width: 48%; }.art-watch i:nth-of-type(3) { top: 70%; width: 80%; }
.art-med { color: var(--paper); background: var(--blue); }
.orbit { width: 175px; height: 175px; margin: 22px 15% 0 0; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; box-shadow: 0 0 0 18px rgba(255,255,255,.08), 0 0 0 38px rgba(255,255,255,.06); }
.art-guard { background: var(--signal); }.art-guard strong { position: absolute; right: 18px; bottom: -14px; font: 500 8rem var(--serif); letter-spacing: -.12em; }.art-guard sup { font-size: 2rem; }
.art-code { color: #f3b490; background: #302843; }.art-code code { align-self: center; margin-right: 14%; font: 500 1.1rem/1.7 var(--mono); }
.case-copy { padding: 26px; }.case-copy small { color: var(--muted); }.case-copy h3 { margin: 24px 0 10px; font: 500 clamp(1.8rem, 3vw, 3rem) var(--serif); letter-spacing: -.06em; }.case-copy p { max-width: 410px; margin: 0 0 22px; color: var(--muted); line-height: 1.5; }.case-copy b { font: 500 .72rem var(--mono); }.case-copy b::first-letter { color: var(--coral); }
.all-work { margin-top: 38px; }
.timeline { border-top: 1px solid var(--ink); }.timeline-row { display: grid; grid-template-columns: 1fr 1.3fr 1fr 1.5fr; gap: 20px; padding: 28px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }.timeline-row > span, .timeline-row p, .timeline-row div { color: var(--muted); }.timeline-row h3, .timeline-row p { margin: 0; }.timeline-row h3 { font: 500 1.35rem var(--serif); }.timeline-row p { font-size: .95rem; }.timeline-row div { font-size: .86rem; line-height: 1.4; }
.closing { padding-bottom: 80px; }.closing h2 { margin-top: 42px; max-width: 800px; }.contact-email { display: inline-flex; gap: 28px; margin-top: 24px; border-bottom: 2px solid var(--ink); font: 500 clamp(1.3rem, 2.6vw, 2.4rem) var(--serif); }.contact-email span { color: var(--coral); transition: transform .2s ease; }.contact-email:hover span { transform: translate(6px, -6px); }.closing-links { display: flex; gap: 24px; margin-top: 56px; color: var(--muted); font: 500 .75rem var(--mono); }.closing-links a:hover { color: var(--coral); }
footer { display: flex; justify-content: space-between; gap: 20px; padding: 24px 0 36px; border-top: 1px solid var(--rule); color: var(--muted); font: 500 .7rem var(--mono); }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }.reveal.visible { opacity: 1; transform: translateY(0); }
@media (max-width: 800px) { .shell { display: block; }.rail { position: static; flex-direction: row; height: auto; justify-content: space-between; padding: 18px 24px; border-right: 0; border-bottom: 1px solid var(--rule); }.rail-line, .rail-label { display: none; }.rail-links { flex-direction: row; margin: 0; }.topbar { height: 74px; }.hero { display: block; min-height: auto; padding: 100px 0 76px; }.hero-kicker { margin-bottom: 46px; } h1 { margin: 0 0 42px; font-size: clamp(4.6rem, 18vw, 9rem); }.hero-bottom { display: block; margin: 0; }.hero-meta { flex-direction: row; flex-wrap: wrap; margin-top: 30px; }.signal-strip { grid-template-columns: repeat(2, 1fr); }.signal-strip div:nth-child(2) { border-right: 0; }.signal-strip div:nth-child(3), .signal-strip div:nth-child(4) { border-top: 1px solid var(--rule); }.intro, .section-head { grid-template-columns: 1fr; gap: 24px; }.section { padding-top: 100px; }.work-grid, .case-wide { grid-template-columns: 1fr; }.case-wide { grid-column: span 1; }.timeline-row { grid-template-columns: 1fr 1fr; }.timeline-row div { grid-column: span 2; }.section-note { display: none; } }
@media (max-width: 520px) { main { padding: 0 20px; }.topbar { font-size: .65rem; }.status { max-width: 190px; line-height: 1.4; }.hero { padding-top: 78px; }.signal-strip strong { font-size: 2rem; }.section { padding-top: 82px; }.case-art { min-height: 210px; }.timeline-row { grid-template-columns: 1fr; gap: 10px; }.timeline-row div { grid-column: auto; }.closing-links { flex-wrap: wrap; gap: 16px; } footer { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }