:root{
  --night:#0c1110; --pine:#16201d; --moss:#2a3632;
  --fog:#a9b3ad; --birch:#e9e6de; --ember:#d9823f;
  --display:"Instrument Serif", Georgia, "Times New Roman", serif;
  --body:"Karla", "Helvetica Neue", Arial, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--night)}
body{margin:0;background:var(--night);color:var(--birch);font:17px/1.65 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--ember)}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px}

.wrap{max-width:1120px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
.label{font:500 12px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fog)}
.label b{color:var(--ember);font-weight:500}
h1,h2{font-family:var(--display);font-weight:400;text-wrap:balance;margin:0}
h2{font-size:clamp(34px,5vw,52px);line-height:1.05}
p{margin:0;max-width:62ch}

/* Hero */
.hero{position:relative;min-height:min(88vh,820px);display:flex;align-items:flex-end;overflow:hidden}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%;animation:drift 30s ease-out both}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,17,16,.55) 0%,rgba(12,17,16,0) 30%,rgba(12,17,16,.2) 55%,var(--night) 100%)}
.hero .wrap{position:relative;z-index:1;width:100%;padding-block:48px 56px;display:grid;gap:18px}
.hero h1{font-size:clamp(84px,17vw,210px);line-height:.82;letter-spacing:-.02em}
.hero h1 i{color:var(--ember);font-style:italic}
.hero .tag{font-size:clamp(18px,2.2vw,22px);color:var(--birch);max-width:40ch}
.topbar{position:absolute;top:0;left:0;right:0;z-index:2;padding-top:env(safe-area-inset-top,0px)}
.topbar .wrap{display:flex;justify-content:space-between;gap:16px;padding-block:20px;flex-wrap:wrap}
.rec{display:inline-flex;align-items:center;gap:8px}
.rec::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ember);animation:blink 1.6s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}
@keyframes drift{from{transform:scale(1.08)}to{transform:scale(1)}}

section{padding-block:clamp(64px,10vw,120px)}
.intro .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(24px,5vw,72px);align-items:start}
.intro .lede{font-family:var(--display);font-size:clamp(26px,3.2vw,36px);line-height:1.25;max-width:none}
.intro .copy{display:grid;gap:18px;color:var(--fog)}
.intro .copy strong{color:var(--birch);font-weight:500}

/* Location */
.location{background:var(--pine)}
.head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.head p{color:var(--fog);max-width:44ch}
.gallery{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.gallery figure{margin:0;position:relative;overflow:hidden;background:var(--moss)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease,filter .8s ease;filter:brightness(.92)}
.gallery figure:hover img{transform:scale(1.04);filter:brightness(1.05)}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 14px 12px;background:linear-gradient(transparent,rgba(12,17,16,.85));display:flex;justify-content:space-between;gap:8px;font:500 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--birch)}
.gallery figcaption span:last-child{color:var(--fog)}
.w3{grid-column:span 3;aspect-ratio:4/3}
.w2{grid-column:span 2;aspect-ratio:4/5}
.w4{grid-column:span 4;aspect-ratio:16/10}
.tall{grid-column:span 2;aspect-ratio:auto}
.w6{grid-column:span 6;aspect-ratio:21/9}

/* Status */
.status .wrap{display:grid;gap:40px}
.board{border-top:1px solid var(--moss)}
.row{display:grid;grid-template-columns:140px minmax(0,1fr) auto;gap:8px 24px;align-items:baseline;padding-block:22px;border-bottom:1px solid var(--moss)}
.row h3{margin:0;font:500 20px/1.3 var(--body)}
.row p{color:var(--fog);font-size:16px}
.pill{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:7px 10px;border:1px solid currentColor;border-radius:2px;white-space:nowrap}
.pill.done{color:#8fb89a}
.pill.open{color:var(--ember)}
.pill.wip{color:var(--fog)}

/* Chip in */
.chip{background:var(--pine)}
.chip .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:center}
.chip .copy{display:grid;gap:22px}
.chip .copy p{color:var(--fog)}
.chip ul{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--moss)}
.chip li{display:flex;justify-content:space-between;gap:16px;padding-block:14px;border-bottom:1px solid var(--moss)}
.chip li span:last-child{font:500 12px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fog)}
.chip figure{margin:0;aspect-ratio:4/5;overflow:hidden}
.chip figure img{width:100%;height:100%;object-fit:cover}

footer{padding-block:48px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--moss);padding-top:28px}

@media (max-width:760px){
  .intro .wrap,.chip .wrap{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .w3,.w2,.w4,.tall{grid-column:span 1;aspect-ratio:4/5}
  .w6,.gallery .wide-m{grid-column:span 2;aspect-ratio:16/10}
  .row{grid-template-columns:1fr auto}
  .row p{grid-column:1/-1}
  .chip figure{aspect-ratio:16/10}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}