@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@600;700;900&family=Share+Tech+Mono&display=swap');
:root{--bg:#080800;--paper:#0f0f00;--paper-deep:#141400;--ink:#f5f5e8;--muted:#8a8a70;--line:rgba(255,214,0,.18);--line-soft:rgba(255,214,0,.055);--accent:#ffd600;--accent-soft:rgba(255,214,0,.1);--grid:40px;--sans:Barlow,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;--mono:"Share Tech Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}.skip-link{position:fixed;left:12px;top:-60px;z-index:10;background:var(--ink);color:var(--bg);padding:10px}.skip-link:focus{top:12px}.site-header{height:80px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:0 clamp(22px,4vw,64px);background:rgba(8,8,0,.92);position:sticky;top:0;z-index:5;backdrop-filter:blur(10px)}.brand{display:flex;align-items:center;gap:10px;font:900 21px var(--display);letter-spacing:.02em;text-transform:uppercase}.brand b{color:var(--accent)}footer .brand,footer span:first-child{letter-spacing:.12em}.brand img{border-radius:4px}.site-header nav{display:flex;align-items:center;gap:6px}.site-header nav a{padding:10px 14px;font-size:13px;color:var(--muted)}.site-header nav a[aria-current]{color:var(--ink)}.site-header .studio-link{background:var(--accent);color:#000;border-radius:2px;font:700 13px var(--display);letter-spacing:.12em;text-transform:uppercase}.site-header .studio-link:hover{background:#fff06a}.studio-link span,.primary-action span,.closing a span{margin-left:18px}.hero{min-height:720px;display:grid;grid-template-columns:minmax(0,1fr) minmax(520px,1.15fr);border-bottom:1px solid var(--line)}
/* Each panel draws its own lattice from its own left edge, so a column border always lands on
   a grid line instead of cutting one square at whatever width the flex split happened to give
   it. One shared background on .hero used to leave the divider floating between lines. */
.hero-copy,.record{background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);background-size:var(--grid) var(--grid);background-position:0 0}
.hero-copy{display:flex;flex-direction:column;justify-content:space-between;padding:80px clamp(28px,5vw,80px);border-right:1px solid var(--line)}.kicker{display:flex;align-items:center;gap:12px;font:10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}.kicker span{width:38px;height:1px;background:var(--accent)}h1,h2,h3,p{margin-top:0}h1{margin:50px 0 35px;font-family:var(--display);font-size:clamp(68px,9vw,140px);line-height:.84;letter-spacing:-.015em;font-weight:900;text-transform:uppercase}.lede{max-width:680px;font-size:20px;line-height:1.6;color:var(--muted)}.hero-actions{display:flex;align-items:center;gap:22px}.primary-action{display:inline-flex;align-items:center;justify-content:space-between;min-width:220px;padding:15px 20px;border-radius:2px;background:var(--accent);color:#000;font:700 15px var(--display);letter-spacing:.12em;text-transform:uppercase}.primary-action:hover{background:#fff06a}.hero-actions p{margin:0;font:10px/1.6 var(--mono);color:var(--muted)}.record{display:flex;flex-direction:column;background-color:rgba(15,15,0,.72)}.record-head{display:flex;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line);font:10px var(--mono);letter-spacing:.09em;color:var(--muted)}.record-head b{color:var(--accent)}.cad-figure{position:relative;display:grid;place-items:center;flex:1;min-height:340px;border-bottom:1px solid var(--line);overflow:hidden;background:var(--paper)}.cad-figure img{width:100%;height:100%;min-height:340px;object-fit:cover;object-position:center}.cad-figure:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,214,0,.10);pointer-events:none}.cad-figure small{position:absolute;bottom:18px;z-index:1;font:9px var(--mono);color:var(--ink);background:rgba(8,8,0,.86);padding:5px 7px}.cad-figure small:first-of-type{left:22px}.cad-figure small:last-of-type{right:22px}.record dl{margin:0}.record dl div{display:grid;grid-template-columns:90px 1fr;padding:17px 22px;border-bottom:1px solid var(--line)}.record dl div:last-child{border:0}.record dt{font:9px var(--mono);color:var(--muted)}.record dd{margin:0;display:flex;justify-content:space-between;gap:20px;font-size:12px}.record dd b{font-weight:600}.record dd span{font:9px var(--mono);color:var(--muted)}.method{display:grid;grid-template-columns:1.15fr repeat(3,1fr);border-bottom:1px solid var(--line)}.method>*{min-height:330px;padding:58px 38px;border-right:1px solid var(--line)}.method>*:last-child{border:0}.method header{padding-left:clamp(28px,5vw,64px)}.method header p,.source>div>p,.closing p{font:10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}.method h2,.source h2,.closing h2{font-family:var(--display);font-size:46px;line-height:.98;letter-spacing:-.01em;font-weight:900;text-transform:uppercase}.method article span{font:9px var(--mono);color:var(--muted)}.method article h3{margin-top:76px;font-size:19px}.method article p{font-size:13px;line-height:1.8;color:var(--muted)}/* This section used to be a near-black slab. The site is one beige system now, so it reads as
   a deeper sheet of the same paper rather than a different theme dropped into the middle. */
.source{display:grid;grid-template-columns:1fr 1.15fr;gap:80px;padding:100px clamp(28px,5vw,72px);background:var(--paper-deep);color:var(--ink);border-bottom:1px solid var(--line)}.source h2{font-size:64px;max-width:560px}.source-copy>p{max-width:650px;line-height:1.8;color:var(--muted)}.source pre{margin:38px 0 0;padding:28px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:12px/1.8 var(--mono);overflow:auto}.source pre em{color:var(--accent);font-style:normal}.closing{display:flex;justify-content:space-between;align-items:end;gap:30px;padding:70px clamp(28px,5vw,72px);border-bottom:1px solid var(--line)}.closing h2{margin:14px 0 0}.closing a{display:flex;min-width:210px;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid var(--ink);font-size:13px;font-weight:700}footer{display:flex;gap:28px;align-items:start;padding:28px clamp(28px,5vw,72px);font:9px/1.6 var(--mono);color:var(--muted)}footer p{max-width:720px;margin:0 auto 0 0}
@media(max-width:900px){.hero{grid-template-columns:1fr}.hero-copy{min-height:650px;border-right:0;border-bottom:1px solid var(--line)}.record{min-height:620px}.method{grid-template-columns:1fr 1fr}.method>*{border-bottom:1px solid var(--line)}.source{grid-template-columns:1fr;gap:35px}.site-header{padding-inline:18px}.site-header nav a:first-child{display:none}}
@media(max-width:560px){.hero-copy{padding:48px 24px}.hero-actions{align-items:flex-start;flex-direction:column}.record dd{flex-direction:column;gap:5px}.method{grid-template-columns:1fr}.method>*{min-height:260px;border-right:0}.method article h3{margin-top:40px}.source{padding:70px 24px}.source h2{font-size:48px}.closing{align-items:flex-start;flex-direction:column;padding:56px 24px}.closing a{width:100%}footer{flex-wrap:wrap}.brand span{display:none}}

/* ── Entry sequence ────────────────────────────────────────────────────────────────────────
   A short technical-drawing intro: the sheet rules itself in, the title rises out of its mask,
   a counter fills, and the visitor chooses when to continue. The curtain is six columns that
   wipe upward in sequence, so the homepage is already behind them when they leave. */
html.intro-armed,html.intro-armed body{overflow:hidden}
#intro{position:fixed;inset:0;z-index:60;display:grid;place-items:center;pointer-events:auto}
#intro[hidden]{display:none}
.intro-cols{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr)}
.intro-cols span{background:var(--bg);border-right:1px solid var(--line-soft);transform:translateY(0);transition:transform .82s cubic-bezier(.76,0,.24,1)}
.intro-cols span:last-child{border-right:0}
#intro.leaving .intro-cols span{transform:translateY(-101%)}
.intro-inner{position:relative;z-index:1;width:min(1100px,88vw);display:grid;gap:38px;transition:opacity .34s ease,transform .34s ease}
#intro.leaving .intro-inner{opacity:0;transform:translateY(-14px)}
.intro-meta{display:flex;justify-content:space-between;gap:20px;font:700 10px var(--mono);letter-spacing:.18em;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:14px}
.intro-title{font-family:var(--display);font-size:clamp(56px,11vw,150px);line-height:.86;letter-spacing:-.015em;font-weight:900;text-transform:uppercase;margin:0}
.mask{display:block;overflow:hidden}
.mask>span{display:block;transform:translateY(106%);animation:rise .95s cubic-bezier(.22,1,.36,1) forwards;animation-delay:var(--d,0s)}
@keyframes rise{to{transform:translateY(0)}}
.intro-rule{height:1px;background:var(--line);position:relative;overflow:hidden}
.intro-rule i{position:absolute;inset:0 auto 0 0;width:0;background:var(--accent);transition:width .12s linear}
.intro-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.intro-count{font:500 clamp(34px,5vw,58px)/1 var(--mono);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.intro-count b{font-weight:500}
.intro-count i{font-style:normal;font-size:.34em;color:var(--muted);margin-left:8px;letter-spacing:.14em}
#enter{appearance:none;display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-width:230px;padding:15px 20px;border:0;border-radius:2px;background:var(--accent);color:#000;font:700 15px var(--display);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .45s ease,transform .45s ease,background .16s}
#enter.ready{opacity:1;transform:none;pointer-events:auto}
#enter:hover{background:#fff06a}
.intro-skip{position:absolute;right:0;bottom:-34px;background:none;border:0;padding:6px 0;color:var(--muted);font:700 10px var(--mono);letter-spacing:.16em;cursor:pointer}
.intro-skip:hover{color:var(--ink)}

/* ── Scroll reveals ─────────────────────────────────────────────────────────────────────── */
[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .78s cubic-bezier(.22,1,.36,1) var(--d,0s),transform .78s cubic-bezier(.22,1,.36,1) var(--d,0s)}
[data-reveal].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .mask>span{transform:none;animation:none}
  .intro-cols span,.intro-inner,#enter,[data-reveal]{transition:none}
  [data-reveal]{opacity:1;transform:none}
}
@media(max-width:560px){.intro-foot{flex-direction:column;align-items:stretch;gap:18px}#enter{width:100%}.intro-skip{bottom:-30px}}