styles.css

:root{
  --bg:#0c0d0f;
  --bg-2:#101114;
  --ink:#e9e7e1;
  --ink-dim:#a6a49c;
  --ink-faint:#7c7b74;
  --accent:#e0733d;              /* replaced per-seed by JS */
  --accent-2:#e0733d;
  --accent-soft:rgba(224,115,61,.14);
  --line:rgba(233,231,225,.12);
  --line-soft:rgba(233,231,225,.07);
  --max:1360px;
  --ease:cubic-bezier(.22,1,.36,1);
  --mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:"Fraunces","Times New Roman",serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--mono);
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
@media (pointer:fine){body{cursor:none}}
a{color:inherit;text-decoration:none}
em{font-style:italic}
strong{font-weight:400;color:var(--ink)}
::selection{background:var(--accent);color:#0c0d0f}
img,canvas{display:block;max-width:100%}

/* ---------- grain + cursor ---------- */
.grain{
  position:fixed;inset:-40%;z-index:200;pointer-events:none;opacity:.045;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-2%)}60%{transform:translate(-2%,3%)}80%{transform:translate(3%,1%)}}
.cursor{
  position:fixed;top:0;left:0;width:22px;height:22px;z-index:300;pointer-events:none;
  transform:translate(-50%,-50%);mix-blend-mode:difference;
  transition:width .28s var(--ease),height .28s var(--ease);
}
.cursor span{position:absolute;inset:0;border:1px solid var(--ink);border-radius:1px}
.cursor::before,.cursor::after{content:"";position:absolute;background:var(--ink)}
.cursor::before{top:50%;left:-5px;right:-5px;height:1px;transform:translateY(-50%)}
.cursor::after{left:50%;top:-5px;bottom:-5px;width:1px;transform:translateX(-50%)}
.cursor.hot{width:46px;height:46px}
@media (pointer:coarse){.cursor{display:none}}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:24px clamp(18px,5vw,56px);mix-blend-mode:difference;
  transition:padding .5s var(--ease);
}
.nav.scrolled{mix-blend-mode:normal;background:rgba(12,13,15,.6);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);padding-top:16px;padding-bottom:16px}
.brand{font-family:var(--serif);font-weight:500;font-size:1.28rem;letter-spacing:.02em;display:inline-flex;align-items:flex-start;gap:1px}
.brand sup{font-family:var(--mono);font-size:.5rem;color:var(--accent);top:-.1em;position:relative}
.nav-links{display:flex;gap:clamp(16px,3vw,38px);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase}
.nav-links a{color:var(--ink);opacity:.72;transition:opacity .3s;position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1px;background:var(--accent);transition:right .35s var(--ease)}
.nav-links a:hover{opacity:1}
.nav-links a:hover::after{right:0}
@media(max-width:640px){.nav-links a:nth-child(1),.nav-links a:nth-child(2){display:none}}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:640px;display:flex;align-items:flex-end;overflow:hidden}
#field{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero-fallback{position:absolute;inset:0;z-index:0;display:none;
  background:
    radial-gradient(60% 55% at 22% 30%,var(--accent),transparent 60%),
    radial-gradient(70% 60% at 82% 68%,var(--accent-2),transparent 62%),
    linear-gradient(180deg,#101114,#0c0d0f);
  opacity:.5;filter:blur(6px)}
.no-canvas #field{display:none}
.no-canvas .hero-fallback{display:block}
.hero-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(12,13,15,.72) 0%,rgba(12,13,15,0) 22%,rgba(12,13,15,0) 55%,rgba(12,13,15,.78) 100%),
    radial-gradient(120% 90% at 50% 40%,transparent 45%,rgba(12,13,15,.5) 100%)}
.hero-inner{position:relative;z-index:2;width:100%;max-width:var(--max);margin:0 auto;
  padding:0 clamp(18px,5vw,56px) clamp(48px,10vh,110px)}
.eyebrow{font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:1.5rem}
.wordmark{font-family:var(--serif);font-weight:400;font-size:clamp(3.2rem,15.5vw,13rem);
  line-height:.86;letter-spacing:-.02em;overflow:hidden;padding-top:.06em}
.wm-inner{display:inline-block}
.hero-sub{max-width:46ch;margin:1.8rem 0 2.4rem;color:var(--ink-dim);
  font-size:clamp(.92rem,1.35vw,1.06rem);line-height:1.7}
.hero-sub,.hero .eyebrow{max-width:52ch}

/* seed control */
.control{display:flex;align-items:stretch;gap:14px;flex-wrap:wrap}
.seedbox{display:flex;flex-direction:column;justify-content:center;gap:2px;
  border:1px solid var(--line);border-left:2px solid var(--accent);
  padding:10px 20px 10px 16px;background:rgba(12,13,15,.35);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.seed-k{font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-faint)}
.seed-v{font-size:1.05rem;letter-spacing:.08em;color:var(--ink);font-variant-numeric:tabular-nums}
.btn{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);background:transparent;border:1px solid var(--line);
  padding:0 22px;min-height:46px;cursor:none;position:relative;overflow:hidden;
  transition:color .35s var(--ease),border-color .35s var(--ease)}
@media(pointer:coarse){.btn{cursor:pointer}}
.btn span{position:relative;z-index:1}
.btn::before{content:"";position:absolute;inset:0;background:var(--accent);
  transform:translateY(101%);transition:transform .4s var(--ease)}
.btn:hover{color:#0c0d0f;border-color:var(--accent)}
.btn:hover::before{transform:translateY(0)}
.btn.ghost{color:var(--ink-dim)}
.btn.ghost:hover{color:#0c0d0f}
.btn.ok{color:#0c0d0f;border-color:var(--accent)}
.btn.ok::before{transform:translateY(0)}

/* spec + cues */
.hero-spec{position:absolute;left:0;right:0;bottom:16px;z-index:2;
  display:flex;justify-content:center;gap:14px;flex-wrap:wrap;
  font-size:.62rem;letter-spacing:.2em;color:var(--ink-faint);text-transform:uppercase;padding:0 16px}
.hero-spec i{color:var(--accent);font-style:normal}
@media(max-width:720px){.hero-spec{display:none}}
.scroll-cue{position:absolute;right:clamp(18px,5vw,56px);bottom:56px;z-index:2;
  font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-faint);
  display:flex;flex-direction:column;align-items:center;gap:10px;writing-mode:vertical-rl}
.scroll-cue span{width:1px;height:40px;background:linear-gradient(var(--ink-faint),transparent);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:720px){.scroll-cue{display:none}}

/* ---------- strip ---------- */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;white-space:nowrap;padding:16px 0;background:var(--bg-2)}
.strip-track{display:inline-flex;gap:1.6rem;align-items:center;animation:slide 30s linear infinite;
  font-size:.82rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim)}
.strip-track i{color:var(--accent);font-style:normal}
@keyframes slide{to{transform:translateX(-33.33%)}}

/* ---------- sections ---------- */
section{padding:clamp(84px,12vh,150px) clamp(18px,5vw,56px)}
.strip{padding:16px 0}
.section-head{max-width:var(--max);margin:0 auto 4rem}
.index{font-family:var(--mono);font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:1.1rem}
h2{font-family:var(--serif);font-weight:300;font-size:clamp(2.6rem,7vw,5.4rem);line-height:1;letter-spacing:-.02em}
.section-note{max-width:56ch;margin-top:1.6rem;color:var(--ink-dim);font-size:1rem}
.section-note em{color:var(--accent);font-style:italic;font-family:var(--serif)}

/* ---------- gallery ---------- */
.pieces{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
@media(max-width:900px){.pieces{grid-template-columns:1fr;max-width:520px}}
.piece{display:flex;flex-direction:column}
.piece-frame{position:relative;aspect-ratio:1/1;border:1px solid var(--line);overflow:hidden;
  background:#08090b;isolation:isolate;transition:border-color .5s var(--ease)}
.piece-frame::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  box-shadow:inset 0 0 60px rgba(12,13,15,.7)}
.piece:hover .piece-frame{border-color:var(--accent)}
.piece-frame canvas{position:absolute;inset:0;width:100%;height:100%}
.piece-fallback{position:absolute;inset:0;display:none;
  background:
    repeating-linear-gradient(45deg,var(--accent-soft) 0 2px,transparent 2px 12px),
    radial-gradient(60% 60% at 40% 40%,var(--accent),transparent 60%),#08090b;opacity:.6}
.no-canvas .piece-frame canvas{display:none}
.no-canvas .piece-fallback{display:block}
figcaption{padding:20px 2px 0}
.piece-title{font-family:var(--serif);font-weight:400;font-style:italic;font-size:1.6rem;letter-spacing:-.01em;line-height:1.1}
.piece-meta{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:.6rem 0 .8rem}
.piece-meta span{color:var(--ink-faint)}
.piece-desc{color:var(--ink-dim);font-size:.88rem;line-height:1.65;max-width:38ch}

/* ---------- process ---------- */
.process{border-top:1px solid var(--line)}
.process-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:230px 1fr;gap:clamp(28px,5vw,80px)}
@media(max-width:820px){.process-grid{grid-template-columns:1fr;gap:32px}}
.process-head{display:flex;flex-direction:column;justify-content:space-between}
.process-sign{font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--ink-faint);margin-top:2rem}
@media(max-width:820px){.process-sign{display:none}}
.process-body{max-width:66ch}
.lead{font-family:var(--serif);font-weight:300;font-size:clamp(1.6rem,3.6vw,2.6rem);
  line-height:1.28;letter-spacing:-.01em;color:var(--ink);margin-bottom:2.4rem}
.process-body p{color:var(--ink-dim);font-size:1rem;margin-bottom:1.3rem}
.process-body p:last-child{margin-bottom:0}
.process-body a{color:var(--accent);border-bottom:1px solid var(--accent-soft);transition:border-color .3s}
.process-body a:hover{border-color:var(--accent)}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line);padding:clamp(56px,8vh,96px) clamp(18px,5vw,56px) 40px}
.footer-top{max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;align-items:flex-end;
  flex-wrap:wrap;gap:36px;padding-bottom:52px;border-bottom:1px solid var(--line)}
.footer-brand{font-family:var(--serif);font-weight:300;font-size:clamp(3rem,12vw,8rem);line-height:.86;letter-spacing:-.02em}
.footer-side{text-align:right}
.footer-k{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.7rem}
.footer-mail{font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,3vw,1.8rem);color:var(--ink);
  border-bottom:1px solid var(--line);transition:border-color .3s,color .3s}
.footer-mail:hover{color:var(--accent);border-color:var(--accent)}
.footer-bottom{max-width:var(--max);margin:26px auto 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:.72rem;letter-spacing:.06em;color:var(--ink-faint)}
.footer-bottom a{color:var(--ink-dim);border-bottom:1px solid var(--line)}
.footer-bottom a:hover{color:var(--accent)}

/* ---------- reveals (hidden ONLY with JS active) ---------- */
.js .reveal{opacity:0;transform:translateY(24px)}
.js .reveal.is-in,.is-in{opacity:1;transform:none;transition:opacity .95s var(--ease),transform .95s var(--ease)}

/* hero intro — CSS/compositor driven via .loaded */
.js .wm-inner{transform:translateY(112%)}
.js .hero .reveal{transform:translateY(20px)}
.hero.loaded .wm-inner{transform:none;transition:transform 1.15s var(--ease)}
.hero.loaded .reveal{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1s var(--ease)}
.hero .eyebrow{transition-delay:.12s}
.hero .wm-inner{transition-delay:.18s}
.hero .hero-sub{transition-delay:.5s}
.hero .control{transition-delay:.62s}
.hero .hero-spec{transition-delay:.85s}
.hero .scroll-cue{transition-delay:.95s}

/* focus */
a:focus-visible,button:focus-visible,.piece:focus-visible{outline:1px solid var(--accent);outline-offset:5px}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .reveal,.js .reveal,.hero .reveal{opacity:1!important;transform:none!important}
  .wm-inner,.js .wm-inner{transform:none!important}
  .grain,.strip-track,.scroll-cue span{animation:none!important}
  .cursor{display:none!important}
  body{cursor:auto!important}
  .btn::before,.nav-links a::after{transition:none!important}
}