:root{
  --night:#101726;
  --night-2:#182134;
  --ink:#F3F0E9;
  --ink-dim:#A7AFC0;
  --ochre:#E3A63C;
  --line:rgba(243,240,233,.14);
  --measure:34rem;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--night);
  color:var(--ink);
  font-family:"Newsreader",Georgia,serif;
  font-weight:300;
  font-size:clamp(1.06rem,.98rem + .5vw,1.22rem);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

.wrap{width:100%;max-width:64rem;margin:0 auto;padding:0 1.5rem;}

/* ---------- hero ---------- */
.hero{
  padding:clamp(3rem,9vw,6.5rem) 0 clamp(2rem,5vw,3.5rem);
  border-bottom:1px solid var(--line);
}
.eyebrow{
  font-family:"IBM Plex Mono",monospace;
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ochre);
  margin:0 0 1.75rem;
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(2rem,5vw,3.5rem);
  align-items:end;
}
@media (min-width:52rem){
  .hero-grid{grid-template-columns:1.35fr .85fr;}
}

h1{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-weight:700;
  font-size:clamp(3.2rem,12vw,7rem);
  line-height:.88;
  letter-spacing:-.03em;
  margin:0;
}
h1 span{display:block;}
.lifespan{
  font-family:"IBM Plex Mono",monospace;
  font-size:.95rem;
  letter-spacing:.06em;
  color:var(--ink-dim);
  margin:1.4rem 0 0;
}
.lede{
  margin:1.6rem 0 0;
  max-width:26rem;
  font-size:1.12em;
  color:var(--ink);
}

/* ---------- portrait ---------- */
figure{margin:0;}
.portrait{
  aspect-ratio:4/5;
  width:100%;
  background:var(--night-2);
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:1.5rem;
  overflow:hidden;
}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:55% 38%;display:block;}

.tall{
  margin:0 auto;
  max-width:24rem;
}
.tall .frame{
  aspect-ratio:3/4;
  width:100%;
  background:var(--night-2);
  border:1px solid var(--line);
  overflow:hidden;
}
.tall img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block;}
.tall figcaption{text-align:center;}

.wide{
  margin:clamp(2rem,5vw,3rem) 0 0;
}
.wide .frame{
  aspect-ratio:16/9;
  width:100%;
  background:var(--night-2);
  border:1px solid var(--line);
  overflow:hidden;
}
.wide img{width:100%;height:100%;object-fit:cover;object-position:62% 45%;display:block;}
.portrait .slot{
  font-family:"IBM Plex Mono",monospace;
  font-size:.72rem;
  line-height:1.7;
  letter-spacing:.04em;
  color:var(--ink-dim);
}
figcaption{
  font-family:"IBM Plex Mono",monospace;
  font-size:.7rem;
  letter-spacing:.05em;
  color:var(--ink-dim);
  margin-top:.75rem;
}

/* ---------- body text ---------- */
main{padding:clamp(2.5rem,7vw,4.5rem) 0 0;}
.prose{max-width:var(--measure);}
.prose p{margin:0 0 1.5em;}
.prose p:last-child{margin-bottom:0;}

.block{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:.75rem 2.5rem;
  padding:clamp(2rem,5vw,3rem) 0;
  border-bottom:1px solid var(--line);
}
@media (min-width:52rem){
  .block{grid-template-columns:8rem minmax(0,1fr);}
}
.marker{
  font-family:"IBM Plex Mono",monospace;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ochre);
  padding-top:.6em;
}

/* ---------- drive gallery ---------- */
.gallery[hidden]{display:none;}
.gallery-intro{margin:0 0 1.5rem;color:var(--ink-dim);}
.grid{columns:2;column-gap:.75rem;}
@media (min-width:40rem){ .grid{columns:3;column-gap:1rem;} }
.grid figure{break-inside:avoid;margin:0 0 .75rem;}
.grid button{
  all:unset;display:block;width:100%;cursor:zoom-in;
  background:var(--night-2);border:1px solid var(--line);
}
.grid button:focus-visible{outline:2px solid var(--ochre);outline-offset:3px;}
.grid img{display:block;width:100%;height:auto;opacity:0;transition:opacity .6s ease;}
.grid img.loaded{opacity:1;}
.grid figcaption{margin-top:.4rem;}
.grid button.is-video{position:relative;}
.grid button.no-thumb{aspect-ratio:16/9;}
.play{
  position:absolute;top:50%;left:50%;
  width:3.25rem;height:3.25rem;margin:-1.625rem 0 0 -1.625rem;
  border-radius:50%;
  background:rgba(16,23,38,.72);
  border:1px solid rgba(243,240,233,.5);
  transition:background .2s ease;
}
.play::after{
  content:"";position:absolute;top:50%;left:54%;
  transform:translate(-50%,-50%);
  border-style:solid;border-width:.6rem 0 .6rem 1rem;
  border-color:transparent transparent transparent var(--ink);
}
.grid button.is-video:hover .play{background:var(--ochre);}

.viewer{
  border:0;padding:0;margin:auto;background:transparent;
  max-width:100vw;max-height:100dvh;
}
.viewer::backdrop{background:rgba(8,12,20,.94);}
.viewer img{display:block;max-width:94vw;max-height:88dvh;width:auto;height:auto;margin:0 auto;}
.viewer iframe{display:block;max-width:94vw;border:0;margin:0 auto;background:#000;}
.viewer p{
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.05em;
  color:var(--ink-dim);text-align:center;margin:.75rem 1rem 0;
}
.viewer button{
  position:fixed;top:.75rem;right:.75rem;
  font:500 .75rem "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);background:var(--night-2);border:1px solid var(--line);
  padding:.6rem .9rem;cursor:pointer;
}

/* ---------- closing ---------- */
.closing{
  padding:clamp(3rem,8vw,5.5rem) 0;
  text-align:center;
}
.closing p{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-weight:500;
  font-size:clamp(1.4rem,4.5vw,2.1rem);
  line-height:1.3;
  letter-spacing:-.015em;
  max-width:30rem;
  margin:0 auto;
  text-wrap:balance;
}

footer{
  border-top:1px solid var(--line);
  padding:2.5rem 0 4rem;
  font-family:"IBM Plex Mono",monospace;
  font-size:.74rem;
  line-height:1.9;
  letter-spacing:.03em;
  color:var(--ink-dim);
}
footer p{margin:0 0 1rem;max-width:34rem;}
footer a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ochre);}
footer a:hover{color:var(--ochre);}
a:focus-visible,:focus-visible{outline:2px solid var(--ochre);outline-offset:3px;}

/* ---------- motion ---------- */
.rise{opacity:0;transform:translateY(14px);animation:rise .9s cubic-bezier(.2,.7,.3,1) forwards;}
.rise:nth-child(2){animation-delay:.1s;}
.d1{animation-delay:.08s;} .d2{animation-delay:.16s;} .d3{animation-delay:.24s;}
@keyframes rise{to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
  .rise{animation:none;opacity:1;transform:none;}
}

/* ---------- nav bar ---------- */
.topnav{
  position:sticky;top:0;z-index:10;
  background:rgba(16,23,38,.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.topnav .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.topnav a{
  display:block;
  padding:.95rem 0;
  font-family:"IBM Plex Mono",monospace;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-dim);
  text-decoration:none;
  transition:color .2s ease;
}
.topnav .topnav-home{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-weight:700;
  font-size:1rem;
  letter-spacing:-.01em;
  text-transform:none;
  color:var(--ink);
}
.topnav a:hover,.topnav a[aria-current="page"]{color:var(--ochre);}
.topnav a[aria-current="page"]:not(.topnav-home){box-shadow:inset 0 -2px 0 var(--ochre);}