:root { --rh:#ccff00; --ink:#090b09; --forest:#17351e; --paper:#f3f1e7; --gold:#d9ad48; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-height:100vh; color:var(--paper); background:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.masthead { position:relative; min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:72px 24px 120px; overflow:hidden; background:radial-gradient(circle at 50% 40%,#ecff9c 0,var(--rh) 43%,#9dd200 100%); color:var(--ink); text-align:center; }
.masthead::before { content:"K"; position:absolute; left:-7vw; top:7%; font-size:min(55vw,44rem); line-height:.7; font-weight:1000; color:transparent; -webkit-text-stroke:2px rgba(9,11,9,.1); }
.eyebrow,.section-kicker { margin:0 0 14px; font-size:.78rem; font-weight:900; letter-spacing:.22em; text-transform:uppercase; }
.masthead h1 { position:relative; z-index:2; margin:0; font-size:clamp(5.4rem,17vw,14rem); line-height:.65; font-weight:1000; letter-spacing:-.09em; }
.masthead h1 span { display:inline-block; transform:translateX(.18em); color:var(--forest); }
.intro { position:relative; z-index:3; margin:clamp(34px,5vw,56px) 0 22px; font-size:clamp(1.05rem,2vw,1.5rem); font-weight:800; }
.social-links { position:relative; z-index:4; display:flex; flex-wrap:wrap; justify-content:center; gap:9px; }
.social-link { display:inline-flex; align-items:center; min-height:42px; padding:10px 17px; border:2px solid var(--ink); border-radius:999px; background:var(--ink); color:var(--rh); font-size:.72rem; font-weight:950; letter-spacing:.08em; text-decoration:none; text-transform:uppercase; }
.social-link.ghost { background:transparent; color:var(--ink); }
.hero-birds { position:absolute; inset:auto 0 0; display:flex; justify-content:space-between; align-items:flex-end; pointer-events:none; }
.hero-birds img { width:min(30vw,420px); max-height:54vh; object-fit:contain; filter:drop-shadow(0 18px 10px rgba(0,0,0,.18)); transform:translateY(7%); }
.hero-birds img:first-child { transform:translate(-10%,7%) rotate(-6deg); }
.hero-birds img:last-child { transform:translate(10%,7%) rotate(6deg); }
.campaign-banner { margin:0; background:#090b09; }
.campaign-banner img { display:block; width:100%; height:auto; aspect-ratio:3/1; object-fit:cover; }
.story { display:grid; grid-template-columns:.55fr 1.45fr 1fr; gap:clamp(28px,5vw,74px); align-items:start; padding:clamp(70px,10vw,140px) clamp(24px,7vw,110px); background:var(--forest); }
.story h2 { margin:0; font-family:Georgia,serif; font-size:clamp(3rem,7vw,7rem); line-height:.86; letter-spacing:-.06em; color:var(--rh); }
.story-mark { margin:12px 0 0; font:1000 clamp(6rem,12vw,13rem)/.8 Georgia,serif; color:transparent; -webkit-text-stroke:2px rgba(204,255,0,.55); }
.story-lead { margin:32px 0 0; max-width:38ch; font-size:clamp(1.05rem,1.7vw,1.35rem); line-height:1.5; font-weight:750; }
.story-copy { padding-top:4px; }
.story-copy p { margin:0 0 20px; max-width:43ch; font-size:1.02rem; line-height:1.68; }
.story-copy strong { color:var(--rh); }
.wall { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; padding:8px 8px 112px; }
.tile { position:relative; min-height:300px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; border:0; padding:0; background:linear-gradient(145deg,#1a241c,#0d110e); color:var(--paper); cursor:pointer; text-align:left; isolation:isolate; }
.tile:nth-child(6n+2),.tile:nth-child(6n+5) { background:linear-gradient(145deg,#24390e,#10150b); }
.tile::before { content:""; position:absolute; inset:0; z-index:2; border:1px solid rgba(204,255,0,.18); pointer-events:none; }
.tile img { position:absolute; inset:8px 8px 54px; width:calc(100% - 16px); height:calc(100% - 62px); object-fit:contain; transition:transform 220ms ease; filter:drop-shadow(0 14px 12px rgba(0,0,0,.4)); }
.tile:hover img,.tile:focus-visible img { transform:scale(1.06) translateY(-2%); }
.tile:focus-visible { outline:3px solid var(--rh); outline-offset:-3px; }
.label { position:relative; z-index:3; display:flex; justify-content:space-between; align-items:center; min-height:54px; gap:10px; padding:10px 13px; background:rgba(5,8,6,.88); backdrop-filter:blur(8px); }
.label strong { font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; }
.label span { color:var(--rh); font:800 .68rem/1 monospace; }
.bottom-bar { position:fixed; left:0; right:0; bottom:0; z-index:20; display:flex; align-items:baseline; justify-content:center; gap:14px; padding:10px 18px 12px; border-top:2px solid var(--ink); background:var(--rh); color:var(--ink); text-align:center; text-transform:uppercase; box-shadow:0 -12px 40px rgba(0,0,0,.34); }
.bottom-bar strong { font-size:clamp(2rem,5vw,4.8rem); line-height:.88; font-weight:1000; }
.bottom-bar span { font-size:clamp(.85rem,2vw,1.8rem); font-weight:950; }
#copy-status { position:absolute; right:18px; font-size:.68rem; font-weight:900; }
dialog { width:min(92vw,850px); max-height:90vh; border:2px solid var(--rh); padding:0; overflow:hidden; background:#101611; color:var(--paper); box-shadow:0 30px 100px #000; }
dialog::backdrop { background:rgba(0,0,0,.86); backdrop-filter:blur(8px); }
dialog>img { display:block; width:100%; height:min(70vh,720px); object-fit:contain; background:radial-gradient(circle,#263821,#090b09 70%); }
.close { position:absolute; top:12px; right:12px; z-index:2; width:42px; height:42px; border:0; border-radius:50%; background:var(--rh); font-size:2rem; cursor:pointer; }
.viewer-copy { display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; padding:16px; }
.viewer-copy h2 { margin:0; font-family:Georgia,serif; }
.viewer-copy span { color:var(--rh); font-family:monospace; }
#copy-image { border:1px solid var(--rh); padding:10px 13px; background:transparent; color:var(--rh); font-weight:850; cursor:pointer; }
@media (max-width:960px) { .wall{grid-template-columns:repeat(3,1fr)} .story{grid-template-columns:1fr} .hero-birds img{width:38vw;opacity:.76} }
@media (max-width:620px) { .masthead{padding-bottom:105px}.masthead h1{font-size:24vw}.hero-birds img{width:45vw}.wall{grid-template-columns:repeat(2,1fr);gap:5px;padding:5px 5px 96px}.tile{min-height:245px}.story{padding:70px 24px}.bottom-bar{flex-direction:column;align-items:center;gap:2px;padding:7px 8px 9px}.viewer-copy{grid-template-columns:auto 1fr}.viewer-copy button{grid-column:1/-1}#copy-status{display:none} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.tile img{transition:none} }
