:root {
  --bg:#050606;
  --panel:#080a0a;
  --amber:#f5a91b;
  --amber-hot:#ffc247;
  --text:#aeb5bb;
  --muted:#646a6d;
  --line:rgba(245,169,27,.34);
  --line-soft:rgba(245,169,27,.12);
  --max:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#000}
body{margin:0;background:var(--bg);color:var(--text);font-family:"DM Mono",monospace;min-height:100vh}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(245,169,27,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(245,169,27,.04) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 90%,transparent);opacity:.65}
.noise{position:fixed;inset:0;pointer-events:none;opacity:.26;z-index:20;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.018) 4px)}
.noise:after{content:"";position:absolute;left:0;right:0;height:18vh;top:-22vh;background:linear-gradient(to bottom,transparent,rgba(245,169,27,.025),rgba(245,169,27,.12),rgba(245,169,27,.025),transparent);animation:ambient-scan 13s linear infinite}
a{color:inherit;text-decoration:none}
.page-shell{width:min(calc(100% - 28px),var(--max));margin:14px auto;border-left:1px solid var(--line);border-right:1px solid var(--line);position:relative}
.site-header{min-height:108px;padding:18px 26px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(3,4,4,.88);position:relative}
.site-header:after,.site-header:before{content:"";position:absolute;width:38px;height:1px;background:var(--amber);bottom:-1px}
.site-header:before{left:0}.site-header:after{right:0}
.brand{display:flex;align-items:center;gap:22px}
.monogram{width:72px;height:72px;border:1px solid var(--amber);display:grid;place-items:center;color:var(--amber);font:400 37px/1 "Space Grotesk",sans-serif;position:relative;overflow:hidden;box-shadow:inset 0 0 24px rgba(245,169,27,.055),0 0 18px rgba(245,169,27,.04)}
.monogram:before,.monogram:after{content:"";position:absolute;background:var(--amber);opacity:.7}
.monogram:before{width:18px;height:1px;right:5px;top:5px}.monogram:after{height:18px;width:1px;left:5px;bottom:5px}
.m-stroke{transform:translateX(-5px);letter-spacing:-.16em}.j-stroke{position:absolute;transform:translate(12px,8px);font-size:.9em;opacity:.9}
.brand-copy strong{display:block;color:var(--amber);font-size:17px;letter-spacing:.24em;text-transform:uppercase;font-weight:500}
.brand-copy small{display:block;margin-top:8px;color:#858c91;font-size:10px;line-height:1.65;letter-spacing:.18em;text-transform:uppercase}
.header-actions{display:flex;align-items:center;gap:12px}
.header-actions a{width:44px;height:44px;border:1px solid var(--line);display:grid;place-items:center;color:var(--amber);transition:.2s ease}
.header-actions svg{width:21px;height:21px;fill:currentColor}
.header-actions a:hover,.header-actions a:focus-visible{border-color:var(--amber);background:rgba(245,169,27,.08);box-shadow:0 0 22px rgba(245,169,27,.08);outline:none}

section{padding:38px 44px}
.section-code{display:flex;justify-content:space-between;gap:20px;color:var(--amber);font-size:11px;letter-spacing:.17em}
.hero{min-height:650px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;right:30px;top:110px;bottom:48px;width:1px;background:linear-gradient(transparent,var(--amber),transparent);opacity:.35}
.hero-copy{margin-top:64px;max-width:820px}
h1{margin:0;font:500 clamp(46px,7.3vw,84px)/.99 "Space Grotesk",sans-serif;letter-spacing:-.045em;text-transform:uppercase}
.statement-premise{display:block;color:#e3e8ea}.statement-imperative{display:block;color:var(--amber-hot)}.cursor{display:block;color:var(--amber-hot);animation:blink 1.05s steps(1,end) infinite}
.lead{max-width:650px;margin:36px 0 0;font-size:16px;line-height:1.75;color:#c0c5c8}
.principles{margin:24px 0 0;color:#8d9499;font-size:13px;line-height:1.7}
.micro-rule{width:58px;height:2px;background:var(--amber);margin-top:34px;box-shadow:0 0 10px rgba(245,169,27,.35)}
.tagline{font-size:10px;color:#5f6568;letter-spacing:.18em;margin-top:22px}
.projects{padding-top:28px;padding-bottom:58px}
.project-list{margin-top:28px;display:grid;gap:12px}
.project{min-height:112px;border:1px solid var(--line);display:grid;grid-template-columns:72px 1fr 48px;align-items:center;padding:16px 22px;position:relative;background:linear-gradient(90deg,rgba(245,169,27,.025),transparent 34%);transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease}
.project:before{content:"";position:absolute;left:-1px;top:17px;bottom:17px;width:2px;background:var(--amber);transform:scaleY(.35);transition:transform .18s ease}
.project:hover,.project:focus-visible{transform:translateX(4px);border-color:rgba(245,169,27,.8);background:linear-gradient(90deg,rgba(245,169,27,.075),transparent 50%);box-shadow:0 0 28px rgba(245,169,27,.045);outline:none}
.project:hover:before,.project:focus-visible:before{transform:scaleY(1)}
.project-number{color:var(--amber);font-size:15px}
.project-copy{border-left:1px solid var(--line);padding-left:28px}
.project-copy strong{display:block;color:var(--amber-hot);font:500 24px "Space Grotesk",sans-serif;text-transform:uppercase;letter-spacing:.04em}
.project-copy small{display:block;margin-top:10px;color:#7e858a;font-size:10px;letter-spacing:.13em;text-transform:uppercase}
.arrow{justify-self:end;color:var(--amber);font-size:31px;transition:transform .18s ease}
.project:hover .arrow{transform:translateX(5px)}
footer{border-top:1px solid var(--line);padding:32px 44px 40px;display:grid;grid-template-columns:1fr 1.6fr;gap:28px;align-items:end;position:relative}
.footer-status{font-size:9px;letter-spacing:.16em;color:#777e82;display:flex;align-items:center;gap:8px}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 9px var(--amber);animation:pulse 2.4s ease-in-out infinite}
blockquote{margin:0;color:#7c8387;font-size:11px;line-height:1.6;letter-spacing:.08em;text-transform:uppercase}
cite{font-style:normal;color:var(--amber)}
.copyright{grid-column:1/-1;color:#44494b;font-size:8px;letter-spacing:.15em;margin-top:12px}
.reveal{opacity:0;transform:translateY(8px);transition:opacity .65s ease,transform .65s ease}
.reveal.visible{opacity:1;transform:none}
@keyframes blink{50%{opacity:0}}
@keyframes ambient-scan{0%{transform:translateY(0)}100%{transform:translateY(145vh)}}
@keyframes pulse{50%{opacity:.4;box-shadow:0 0 3px var(--amber)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.cursor,.status-dot,.noise:after{animation:none}.reveal{opacity:1;transform:none;transition:none}.project{transition:none}}
@media(max-width:650px){
  .page-shell{width:calc(100% - 18px);margin:9px auto}
  .site-header{min-height:91px;padding:13px 15px}
  .brand{gap:13px}
  .monogram{width:57px;height:57px;font-size:30px}
  .brand-copy strong{font-size:12px;letter-spacing:.19em}
  .brand-copy small{font-size:7px;margin-top:5px;line-height:1.55}
  .header-actions{gap:6px}
  .header-actions a{width:34px;height:34px;font-size:14px}
  section{padding-left:21px;padding-right:21px}
  .section-code{font-size:8px;letter-spacing:.13em}
  .hero{min-height:0;padding-top:28px;padding-bottom:33px}
  .hero-copy{margin-top:34px}
  h1{font-size:clamp(40px,12.8vw,61px);line-height:1.02}
  .statement-premise{display:block;font-size:clamp(17px,4.5vw,20px);line-height:1.12;letter-spacing:-.035em;white-space:nowrap}
  .statement-imperative{display:block;margin-top:13px;font-size:clamp(30px,8vw,34px);line-height:1.01}
  .cursor{font-size:.72em;line-height:.65;margin-top:10px}
  .lead{font-size:13px;line-height:1.7;margin-top:20px}
  .principles{font-size:10px}
  .projects{padding-top:25px}
  .project{min-height:96px;grid-template-columns:42px 1fr 30px;padding:12px 12px}
  .project-number{font-size:12px}
  .project-copy{padding-left:15px}
  .project-copy strong{font-size:17px}
  .project-copy small{font-size:7.5px;line-height:1.55;letter-spacing:.09em}
  .arrow{font-size:24px}
  footer{padding:27px 21px 31px;grid-template-columns:1fr}
  blockquote{font-size:9px}
}
@media(max-width:390px){
  .brand-copy small{display:none}
  .monogram{width:52px;height:52px}
  .project-copy strong{font-size:15px}
}