styles.css

:root{--ink:#eee9df;--muted:#958f84;--paper:#11110f;--panel:#191916;--line:#34332d;--amber:#e9a657;--x:50%;--y:35%;--dx:0;--dy:0;color-scheme:dark;font-family:Arial,Helvetica,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);overflow-x:hidden;background-image:radial-gradient(circle at 20% 0%,#272117 0,transparent 28rem)}body::after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.14;z-index:10;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E")}a{color:inherit}.filter-bank{position:absolute;width:0;height:0}.site-header{height:76px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(22px,5vw,72px);position:relative;z-index:3}.brand{text-decoration:none;font:700 12px/1 monospace;letter-spacing:.18em}.brand-dot{width:8px;height:8px;background:var(--amber);border-radius:50%;display:inline-block;margin-right:10px;box-shadow:0 0 18px var(--amber)}nav{display:flex;gap:34px}nav a,.motion-toggle{font:11px monospace;text-transform:uppercase;text-decoration:none;color:var(--muted)}nav a:hover{color:var(--ink)}.motion-toggle{border:1px solid var(--line);padding:9px 12px;background:transparent;cursor:pointer}.hero{min-height:calc(100vh - 76px);display:grid;grid-template-columns:1.2fr .8fr;align-items:center;padding:8vw clamp(22px,7vw,110px);position:relative;isolation:isolate;--light:radial-gradient(circle 300px at var(--x) var(--y),rgba(241,177,94,.18),transparent 72%)}.hero::before{content:"";position:absolute;inset:0;background:var(--light);z-index:-1}.eyebrow{font:11px/1.4 monospace;letter-spacing:.17em;color:var(--amber);text-transform:uppercase}.hero h1,.intro h2,.exhibit h2,.filter-section h2{font:500 clamp(3.5rem,8vw,8.7rem)/.84 Georgia,serif;letter-spacing:-.065em;margin:.28em 0}.hero h1 em{font-weight:400;color:var(--amber)}.lede{font:18px/1.6 Georgia,serif;color:#b6b0a5;max-width:570px}.start-link{display:inline-flex;gap:42px;margin-top:34px;text-decoration:none;border-bottom:1px solid #706b61;padding:0 0 12px;font:12px monospace;letter-spacing:.12em;text-transform:uppercase}.hero-orb{width:min(33vw,430px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;justify-self:end;background:radial-gradient(circle at var(--x) var(--y),#ffe3ae 0 2%,#b76c28 8%,#39291b 28%,#111 72%);box-shadow:calc(var(--dx)*-18px) calc(var(--dy)*-18px) 50px #000,0 0 100px rgba(225,145,59,.12);filter:url(#hero-relief);transition:transform .15s ease-out;transform:perspective(900px) rotateX(calc(var(--dy)*-5deg)) rotateY(calc(var(--dx)*7deg))}.hero-orb span{font:700 clamp(2rem,5vw,5rem) monospace;letter-spacing:-.12em;color:#3a2c1e}.hero-readout{position:absolute;right:5vw;bottom:35px;display:flex;gap:22px;color:#615d55;font:10px monospace}.hero-readout b{color:#afa89d}.intro{padding:150px max(22px,8vw);border-top:1px solid var(--line);display:grid;grid-template-columns:.3fr 1.4fr .8fr;gap:40px;align-items:end}.intro h2{font-size:clamp(3rem,6.3vw,7rem);margin:0}.intro>p:last-child,.exhibit-copy>p,.filter-heading>p{color:var(--muted);font:16px/1.7 Georgia,serif;max-width:460px}.section-number{font:11px monospace;color:#6c675f;align-self:start}.exhibit{border-top:1px solid var(--line);padding:120px max(22px,7vw);display:grid;grid-template-columns:minmax(280px,.72fr) minmax(420px,1.28fr);gap:7vw;align-items:center}.exhibit.reverse{grid-template-columns:minmax(420px,1.28fr) minmax(280px,.72fr)}.reverse .exhibit-copy{order:2}.exhibit h2{font-size:clamp(3rem,5vw,6rem)}.specimen{height:min(60vw,650px);position:relative;display:grid;place-items:center;border:1px solid var(--line);overflow:hidden}.specimen-label{position:absolute;left:20px;bottom:12px;color:#7f796f;font:9px monospace;letter-spacing:.1em}.rough-specimen{background:#171411}.rough-surface{width:68%;aspect-ratio:1;border-radius:48%;background:#8f633e;display:grid;place-items:center;filter:url(#rough-surface);box-shadow:0 40px 80px #000}.rough-surface span{font:700 clamp(2rem,5vw,5rem)/.83 Arial;text-align:center;color:#c2915c;letter-spacing:-.08em}.control-row{margin:35px 0}.control-row label{display:flex;justify-content:space-between;font:11px monospace;color:var(--muted);text-transform:uppercase}.control-row input{width:100%;accent-color:var(--amber);margin-top:16px}.details-toggle{width:100%;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:none;color:var(--ink);padding:18px 0;text-align:left;display:flex;justify-content:space-between;cursor:pointer;font:11px monospace;text-transform:uppercase}.details{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s}.details code{overflow:hidden;color:#9e978c;font:12px/1.8 monospace}.details.open{grid-template-rows:1fr;padding-top:16px}.gradient-specimen{background:#171d1d}.gradient-plate{width:78%;height:65%;display:grid;place-items:center;background:radial-gradient(circle 20px at var(--x) var(--y),#fff9db,transparent 100%),radial-gradient(circle 240px at var(--x) var(--y),rgba(113,227,220,.6),transparent 70%),repeating-linear-gradient(100deg,#253333 0 1px,#101616 1px 4px);background-blend-mode:screen,soft-light,normal;box-shadow:0 35px 80px #050707}.gradient-plate span{font:700 clamp(2rem,5vw,5rem)/.82 Arial;text-align:center;color:#768d88;mix-blend-mode:screen}.shadow-gallery{min-height:760px;border-top:1px solid var(--line);padding:110px max(22px,7vw);position:relative;overflow:hidden;background:radial-gradient(circle 200px at var(--x) var(--y),rgba(255,208,145,.25),transparent 75%)}.shadow-gallery .exhibit-copy{position:relative;z-index:2;max-width:420px}.shadow-word{font:900 clamp(7rem,25vw,25rem)/1 Arial;letter-spacing:-.1em;position:absolute;right:3vw;bottom:40px;color:#c18447;text-shadow:calc(var(--dx)*-5px) calc(var(--dy)*-5px) 2px rgba(0,0,0,.35),calc(var(--dx)*-22px) calc(var(--dy)*-22px) 13px rgba(0,0,0,.36),calc(var(--dx)*-55px) calc(var(--dy)*-55px) 36px rgba(0,0,0,.24)}.metal-specimen{background:#080909}.metal-card{width:72%;aspect-ratio:1.58;border-radius:18px;padding:28px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;color:#111;background:radial-gradient(circle 22px at var(--x) var(--y),#fff,transparent 100%),conic-gradient(from 120deg at var(--x) var(--y),#34383a,#e5e4df,#4c5050,#b5b4ae,#262a2b),repeating-linear-gradient(90deg,transparent 0 2px,rgba(0,0,0,.1) 2px 3px);background-blend-mode:screen,normal,overlay;box-shadow:0 30px 90px #000}.metal-card::after{content:"";position:absolute;inset:1px;border-radius:17px;border:1px solid rgba(255,255,255,.5);mix-blend-mode:overlay}.metal-card strong,.metal-card small{font-family:monospace;letter-spacing:.15em}.metal-card small{font-size:9px;margin-top:8px}.metal-mark{position:absolute;top:25px;right:28px;font:900 30px Arial;letter-spacing:-.1em}.glass-specimen{background:#432a4c}.glass-grid{position:absolute;inset:-30px;background:linear-gradient(90deg,transparent 48%,rgba(255,255,255,.16) 49% 51%,transparent 52%),linear-gradient(transparent 48%,rgba(255,255,255,.16) 49% 51%,transparent 52%);background-size:70px 70px;transform:translate(calc(var(--dx)*-15px),calc(var(--dy)*-15px)) rotate(-8deg)}.glass-lens{width:62%;aspect-ratio:1;border-radius:50%;display:grid;place-content:center;text-align:center;z-index:2;backdrop-filter:blur(15px) saturate(1.7);background:linear-gradient(135deg,rgba(255,255,255,.25),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.42);box-shadow:inset 12px 12px 30px rgba(255,255,255,.13),inset -15px -20px 30px rgba(26,5,37,.45),20px 35px 60px rgba(18,3,24,.35);transform:translate(calc(var(--dx)*20px),calc(var(--dy)*20px))}.glass-lens span{font:800 clamp(2rem,4vw,4.5rem) Arial;letter-spacing:-.08em;text-shadow:3px 0 #6ff,-3px 0 #f69}.glass-lens small{font:9px monospace;letter-spacing:.3em;margin-top:8px}.filter-section{border-top:1px solid var(--line);padding:120px max(22px,7vw)}.filter-heading{display:grid;grid-template-columns:1fr .5fr;gap:50px;align-items:end}.filter-section h2{font-size:clamp(3.5rem,7vw,8rem)}.haze-wrap{height:560px;margin-top:60px;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle,#4c270e,#130c08 70%)}.haze-card{font:900 clamp(7rem,20vw,18rem)/.65 Arial;letter-spacing:-.12em;color:#ef943d;display:flex;flex-direction:column;filter:url(#heat-haze);text-shadow:0 0 50px #da6b24}.paused *,.paused *::before,.paused *::after{animation-play-state:paused!important;transition:none!important}footer{border-top:1px solid var(--line);padding:38px max(22px,5vw);display:flex;justify-content:space-between;color:#7c766d;font:10px monospace}footer a{text-decoration:none}@media(max-width:850px){nav{display:none}.hero{grid-template-columns:1fr;padding-top:100px}.hero-orb{position:absolute;right:-20%;top:12%;width:75vw;z-index:-1;opacity:.75}.intro,.exhibit,.exhibit.reverse,.filter-heading{grid-template-columns:1fr}.intro{padding-block:90px}.exhibit{padding-block:80px}.reverse .exhibit-copy{order:0}.specimen{height:110vw;max-height:600px}.shadow-gallery{min-height:650px}.shadow-word{bottom:80px}.filter-heading{gap:10px}footer{gap:20px;flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}}