@import url('https://fonts.googleapis.com/css2?family=DM+Mono&family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;700;900&display=swap');

:root { --black:#080808; --cream:#fffef0; --green:#32bf61; --pink:#f4a4c9; --line:rgba(8,8,8,.16); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--black); background:var(--cream); font-family:Manrope,"Noto Sans SC",sans-serif; }
a { color:inherit; }
.skip-link { position:fixed; left:12px; top:-60px; z-index:10; background:#fff; padding:10px; transition:.2s; }
.skip-link:focus { top:12px; }
.hero { --glow-x:50%; --glow-y:50%; position:relative; isolation:isolate; min-height:100svh; padding:28px clamp(20px,4vw,64px) 32px; display:flex; flex-direction:column; overflow:hidden; background:#fff5ec; }
.hero:before { content:""; position:absolute; z-index:0; inset:0; background:radial-gradient(circle at var(--glow-x) var(--glow-y), var(--pink), #ffe9e6 43%, var(--cream) 90%); }
.hero > * { position:relative; z-index:1; }
.hero__top,.hero__footer,.section-heading { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; }
.hero__nav-link,.hero__contact,.intro,.section-heading>p, footer { font:11px/1.2 "DM Mono",monospace; letter-spacing:.07em; text-transform:uppercase; }
.hero__nav { display:flex; gap:24px; }
.hero__nav-link,.hero__contact { text-decoration:none; color:var(--black); border-bottom:1px solid transparent; padding-bottom:4px; }
.hero__nav-link:hover,.hero__contact:hover { border-bottom-color:var(--black); }
.hero h1 { margin:clamp(68px,12vh,144px) 0 clamp(48px,4.0vh,46px); font-size:clamp(64px,10vw,140px); line-height:.83; letter-spacing:-.09em; font-weight:800; }
.hero h1 span { display:inline-block; margin-left:.18em; }
.hero__landscape { position:relative; width:calc(100% + clamp(40px,8vw,128px)); margin-left:calc(-1 * clamp(20px,4vw,64px)); height:55.46svh; }
.grass-grid { width:100%; display:grid; line-height:0; }
.grass-cell { background:url("images/grass.svg") center/100% 100%; }
.grass-cell--flip { transform:scaleX(-1); }
.grass-cell--mole { background:transparent; }
.hero__mole { display:block; width:100%; height:100%; cursor:pointer; }
.hero__footer { margin-top:auto; padding-top:30px; font-size:14px; line-height:1.2; }
.hero__footer p { margin:0; }
.scroll-cue { display:flex; gap:12px; align-items:center; font:11px "DM Mono",monospace; text-decoration:none; }
.scroll-cue span { font-size:22px; animation:bob 1.4s infinite alternate; }
.intro { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px clamp(20px,4vw,64px); display:flex; justify-content:space-between; gap:24px; }
.intro p { margin:0; }
.work { padding:clamp(65px,10vw,150px) clamp(20px,8vw,128px); background:#fff; }
.work--vi { background:var(--cream); }
.section-heading { margin-bottom:42px; align-items:baseline; }
.section-heading p { margin:0; }
.section-heading__note { opacity:.6; text-align:right; }
h2 { margin:0; font-size:clamp(54px,10vw,150px); letter-spacing:-.09em; line-height:.85; }
.project-placeholder { position:relative; min-height:min(55vw,650px); overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#202028; color:#fff; text-decoration:none; }
.project-placeholder:hover { color:#fff; }
.project-placeholder:before,.project-placeholder:after { content:""; position:absolute; border:1px solid rgba(255,255,255,.5); border-radius:50%; }
.project-placeholder:before { width:70%; aspect-ratio:1; }
.project-placeholder:after { width:42%; aspect-ratio:1; }
.project-placeholder p { position:relative; z-index:1; margin:0; text-align:center; font-size:clamp(38px,7vw,104px); line-height:.84; font-weight:800; letter-spacing:-.1em; }
.project-placeholder span { position:absolute; bottom:22px; right:24px; font:11px "DM Mono",monospace; letter-spacing:.07em; }
.placeholder-orbit { position:absolute; width:40%; aspect-ratio:1; background:var(--pink); border-radius:50%; mix-blend-mode:screen; filter:blur(4px); animation:orbit 8s linear infinite; }
.vi-card { min-height:min(51vw,620px); padding:clamp(28px,5vw,72px); display:flex; justify-content:space-between; align-items:stretch; gap:30px; color:#f8f5e8; text-decoration:none; background:#293a30; transition:transform .35s ease, box-shadow .35s ease; }
.vi-card:hover { transform:translateY(-8px); box-shadow:12px 14px 0 var(--green); }
.vi-card__mark { font-size:clamp(86px,17vw,260px); font-weight:800; line-height:.56; letter-spacing:-.23em; color:#eabb46; }
.vi-card__mark span { display:inline-block; margin-left:.55em; color:#e56c4c; }
.vi-card__copy { align-self:flex-end; text-align:right; }
.vi-card__copy p,.vi-card__copy span { font:11px "DM Mono",monospace; letter-spacing:.07em; }
.vi-card__copy h3 { margin:14px 0 36px; font-size:clamp(26px,4.2vw,60px); letter-spacing:-.07em; line-height:1.05; }
.vi-card__copy b { font-size:20px; margin-left:8px; }
footer { padding:22px clamp(20px,4vw,64px); display:flex; justify-content:space-between; background:var(--black); color:#fff; }
footer p { margin:0; } footer a { text-decoration:none; }
@keyframes bob { to { transform:translateY(6px); } }
@keyframes orbit { to { transform:rotate(360deg) translateX(24%) rotate(-360deg); } }
@media (max-width:600px) { .hero { min-height:720px; } .hero h1 span { display:block; margin:7px 0 0; } .intro { flex-direction:column; } .vi-card { min-height:500px; flex-direction:column; } .vi-card__copy { text-align:left; } .section-heading { flex-wrap:wrap; } .section-heading__note { width:100%; text-align:left; } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { animation-duration:.001ms!important; scroll-behavior:auto!important; } }