.hero { min-height: 100svh; position: relative; overflow: hidden; display: grid; place-items: center; isolation: isolate; background: radial-gradient(circle at 50% 48%, #3b3212 0, #15140f 23%, #090a0a 58%); }
.hero::after { content:""; position:absolute; inset:0; background: radial-gradient(circle,transparent 15%,rgba(0,0,0,.35) 55%,#080909 90%); pointer-events:none; z-index:4; }
.hero-orbit { position: relative; z-index: 2; width: min(72vw, 920px); aspect-ratio: 1.55; }
.hero-core { position: absolute; left:50%; top:46%; translate:-50% -50%; width:min(35vw,410px); aspect-ratio:.78; border-radius: 46% 46% 12% 12%; overflow:hidden; filter: contrast(1.08) saturate(.75) drop-shadow(0 25px 65px #000); z-index:3; }
.hero-core img { width:100%; height:100%; object-fit:cover; object-position:center 32%; }
.hero-core::after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 60px 30px #090a0a; background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.65)); }
.orb { position:absolute; left:50%; top:48%; translate:-50% -50%; width:48%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,#ffdf42 0,#795f00 24%,transparent 68%); filter:blur(3px); box-shadow:0 0 120px rgba(255,213,39,.32); }
.orbit-line { left:50%; top:48%; translate:-50% -50%; width:49%; aspect-ratio:1; }
.orbit-line:nth-child(2) { width:38%; transform:rotateX(66deg); }
.float-card { position:absolute; width:clamp(100px,13vw,190px); aspect-ratio:1.6; overflow:hidden; border:1px solid rgba(255,255,255,.18); filter:grayscale(1) contrast(1.1); opacity:.72; }
.float-card img { width:100%; height:100%; object-fit:cover; }
.float-card.c1 { left:0; top:25%; transform:perspective(700px) rotateY(25deg); }
.float-card.c2 { right:0; top:17%; transform:perspective(700px) rotateY(-25deg); }
.float-card.c3 { left:8%; bottom:8%; }
.float-card.c4 { right:6%; bottom:10%; }
.hero-title { position:absolute; z-index:6; left:50%; bottom:9vh; translate:-50% 0; font-size:clamp(5rem,10vw,12rem); text-align:center; white-space:nowrap; text-shadow:0 8px 40px #000; }
.hero-title span { display:block; font-size:.58em; margin-top:-.1em; }
.hero-mark { position:absolute; z-index:5; left:36%; bottom:10%; width:28%; height:7px; background:var(--acid); rotate:-17deg; border-radius:50%; box-shadow:0 0 24px var(--acid); }
.scroll-cue { position:absolute; z-index:7; bottom:2rem; left:50%; translate:-50%; width:2.7rem; aspect-ratio:1; border:1px solid rgba(255,255,255,.35); border-radius:50%; display:grid; place-items:center; }
.mission { background:#101111; }
.mission h2 { font-size:clamp(3.8rem,7vw,8rem); max-width:14ch; }
.mission-copy { align-self:end; max-width:33rem; }
.section-title--compact { font-size:var(--step-2); }
.section-stack { margin-top:3rem; }
.not-found { min-height:100svh; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-block:1px solid var(--line); }
.stat { background:var(--ink); padding:3rem var(--gutter); min-height:16rem; display:flex; flex-direction:column; justify-content:space-between; }
.stat strong { font-family:var(--display); font-size:clamp(3.5rem,6vw,7rem); font-weight:400; line-height:.8; }
.work { background:var(--paper); color:var(--ink); padding-block:clamp(4rem,7vw,7.5rem); }
.work-heading { display:grid; grid-template-columns:minmax(13rem,.48fr) 1.52fr; gap:clamp(2rem,6vw,8rem); align-items:end; padding-top:1rem; border-top:1px solid rgba(11,12,12,.38); }
.work-intro { display:flex; min-height:12rem; flex-direction:column; justify-content:space-between; }
.work-intro>p:last-child { max-width:28ch; margin:0; color:#62635f; font-size:var(--step-0); line-height:1.35; }
.work-heading h2 { margin:0; font-size:clamp(4rem,8.3vw,9.7rem); line-height:.79; text-align:right; }
.work-heading h2 span { color:#777873; }
.systems-grid { display:grid; grid-template-columns:minmax(0,1.18fr) minmax(20rem,.82fr); grid-template-rows:repeat(2,minmax(17rem,1fr)); gap:.75rem; margin-top:clamp(2rem,4vw,4.5rem); }
.system-card { --card-x:50%; --card-y:50%; isolation:isolate; position:relative; min-height:17rem; overflow:hidden; color:#fff; background:#171817; }
.system-card--featured { grid-row:1/3; min-height:35rem; }
.system-card::before { position:absolute; z-index:2; inset:0; background:radial-gradient(circle at var(--card-x) var(--card-y),rgba(255,213,39,.34),transparent 28%); opacity:0; content:""; transition:opacity .35s ease; pointer-events:none; }
.system-card::after { position:absolute; z-index:1; inset:0; background:linear-gradient(180deg,rgba(5,6,6,.08) 12%,rgba(5,6,6,.34) 46%,rgba(5,6,6,.94) 100%); content:""; }
.system-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.45) contrast(1.08) brightness(.7); transform:scale(1.015); transition:transform 1s var(--ease),filter .55s ease; }
.system-card--featured img { object-position:42% center; }
.system-card:nth-child(2) img { object-position:center 31%; }
.system-card:nth-child(3) img { object-position:center 38%; }
.system-number { position:absolute; z-index:3; top:1.2rem; left:1.25rem; padding:.48rem .68rem; border:1px solid rgba(255,255,255,.45); border-radius:100vw; background:rgba(11,12,12,.32); backdrop-filter:blur(12px); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; transition:background var(--fast),color var(--fast),border-color var(--fast); }
.system-copy { position:absolute; z-index:3; inset:auto 1.25rem 1.25rem; }
.system-copy>p { margin:0 0 .55rem; color:var(--acid); font-size:.76rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.system-copy h3 { max-width:11ch; margin:0; font-family:var(--display); font-size:clamp(2.25rem,3.8vw,5rem); font-weight:400; line-height:.87; text-transform:uppercase; }
.system-card:not(.system-card--featured) .system-copy h3 { font-size:clamp(2rem,2.7vw,3.45rem); }
.system-copy>div { display:flex; justify-content:space-between; gap:1rem; align-items:end; margin-top:1rem; padding-top:.8rem; border-top:1px solid rgba(255,255,255,.35); font-size:.8rem; }
.system-copy strong { flex:none; font-weight:600; }
.system-card:hover::before { opacity:1; }
.system-card:hover img { transform:scale(1.06); filter:saturate(.9) contrast(1.04) brightness(.84); }
.system-card:hover .system-number { border-color:var(--acid); background:var(--acid); color:var(--ink); }
.photo-strip { display:grid; grid-template-columns:1.25fr .75fr 1fr; min-height:75vh; }
.photo-strip figure { margin:0; min-height:35rem; position:relative; overflow:hidden; }
.photo-strip img { width:100%; height:100%; object-fit:cover; filter:saturate(.78) contrast(1.05); transition:transform 1.2s var(--ease),filter .4s; }
.photo-strip figure:hover img { transform:scale(1.05); filter:saturate(1); }
.photo-strip figcaption { position:absolute; left:1rem; bottom:1rem; font-size:.72rem; text-transform:uppercase; background:#111; color:#fff; padding:.45rem .65rem; }
.page-hero { min-height:72svh; display:flex; flex-direction:column; justify-content:flex-end; padding:10rem var(--gutter) 3rem; position:relative; overflow:hidden; background:radial-gradient(circle at 74% 28%,rgba(255,213,39,.24),transparent 30%),#0b0c0c; }
.page-hero h1 { font-size:var(--step-3); max-width:8ch; z-index:1; }
.page-hero .kicker { max-width:38rem; margin-left:auto; z-index:1; }
.page-index { position:absolute; right:var(--gutter); top:7rem; font-family:var(--display); font-size:8rem; color:rgba(255,255,255,.08); }
.timeline { list-style:none; padding:0; margin:3rem 0 0; }
.timeline li { display:grid; grid-template-columns:minmax(9rem,.35fr) 1fr; gap:2rem; border-top:1px solid var(--line); padding:2rem 0 4rem; }
.timeline h2 { margin:0; font-size:var(--step-1); line-height:1.1; }
.tag-list { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.5rem; }
.publication { display:grid; grid-template-columns:4rem 1fr auto; align-items:start; gap:1rem; padding:1.4rem 0; border-top:1px solid var(--line); }
.publication h2 { margin:0; font-size:1.15rem; max-width:62ch; }
.publication time { color:var(--acid); font-family:var(--display); font-size:1.5rem; }
.skills-accordion { margin-top:3rem; border-top:1px solid var(--line); }
.skill-row { border-bottom:1px solid var(--line); }
.skill-row button { width:100%; border:0; background:none; text-align:left; padding:1.4rem 0; display:grid; grid-template-columns:3rem 1fr auto; align-items:center; cursor:pointer; }
.skill-row button strong { font-family:var(--display); font-size:clamp(2rem,4vw,4.8rem); font-weight:400; line-height:.9; }
.skill-row button span:last-child { font-size:1.7rem; transition:transform var(--fast); }
.skill-row.is-open button span:last-child { transform:rotate(45deg); }
.skill-detail { display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--ease); }
.skill-detail > div { overflow:hidden; }
.skill-detail p { max-width:58rem; margin:0; padding:0 3rem 0; color:var(--muted); }
.skill-row.is-open .skill-detail { grid-template-rows:1fr; }
.skill-row.is-open .skill-detail p { padding-bottom:1.8rem; }
.talk-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.talk-card { position:relative; min-height:65vh; overflow:hidden; background:#181919; }
.talk-card img { width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.talk-card:hover img { transform:scale(1.04); }
.talk-card div { position:absolute; inset:auto 0 0; padding:5rem 1.5rem 1.5rem; background:linear-gradient(transparent,rgba(0,0,0,.9)); }
.talk-card h2 { margin:0; font-family:var(--display); font-size:clamp(2.5rem,5vw,5.5rem); line-height:.9; }
.contact-grid { min-height:100svh; display:grid; grid-template-columns:1fr 1fr; }
.contact-image { position:relative; overflow:hidden; }
.contact-image img { width:100%; height:100%; object-fit:cover; }
.contact-copy { padding:9rem var(--gutter) 4rem; display:flex; flex-direction:column; justify-content:space-between; background:var(--acid); color:#111; }
.contact-copy h1 { font-size:clamp(5rem,9vw,10rem); }
.contact-links a { display:block; border-top:1px solid #111; padding:1rem 0; font-size:clamp(1.2rem,2vw,2rem); }
@media (max-width:900px) { .stats{grid-template-columns:repeat(2,1fr)} .photo-strip{grid-template-columns:1fr 1fr}.photo-strip figure:first-child{grid-column:1/-1}.hero-orbit{width:100vw}.hero-core{width:min(56vw,390px)}.work-heading{grid-template-columns:1fr}.work-intro{min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:2rem}.work-heading h2{text-align:left}.systems-grid{grid-template-columns:1fr 1fr;grid-template-rows:minmax(30rem,1.2fr) minmax(22rem,1fr)}.system-card--featured{grid-column:1/-1;grid-row:auto;min-height:30rem}.talk-grid{grid-template-columns:1fr}.contact-grid{grid-template-columns:1fr}.contact-image{height:65svh} }
@media (max-width:600px) { .hero-title{font-size:19.5vw;bottom:13vh;width:100%;white-space:normal}.hero-title span{font-size:.43em;white-space:nowrap}.hero-mark{left:15%;width:70%;bottom:15%}.float-card{opacity:.46}.hero-core{top:43%;height:48vh;width:52vw}.stats{grid-template-columns:1fr}.stat{min-height:12rem}.work{padding-block:4rem}.work-intro{display:block}.work-intro>p:last-child{margin-top:1.5rem}.work-heading h2{font-size:clamp(3.7rem,18vw,6.2rem)}.systems-grid{display:grid;grid-template-columns:1fr;grid-template-rows:auto;gap:.6rem;margin-top:2rem}.system-card,.system-card--featured{grid-column:auto;min-height:26rem}.system-card:not(.system-card--featured){min-height:22rem}.system-copy>div span{max-width:19ch}.photo-strip{display:block}.photo-strip figure{min-height:70vh}.timeline li{grid-template-columns:1fr;gap:.7rem}.publication{grid-template-columns:2rem 1fr}.publication time{grid-column:2}.page-hero{min-height:80svh}.page-hero .kicker{margin-left:0} }
