:root{
  --ink:#0c0c0c;
  --paper:#f4f2ee;
  --line:rgba(244,242,238,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
  overflow:hidden;
}

/* chrome */
.chrome{
  position:fixed; inset:0 0 auto 0; z-index:30;
  display:flex; align-items:flex-start; justify-content:flex-end;
  padding:22px 26px;
  pointer-events:none;
}
.chrome > *{pointer-events:auto}
.wordmark{
  font-family:'Fraunces',serif; font-weight:600; font-size:15px; letter-spacing:.02em;
  background:rgba(12,12,12,.45); border:1px solid var(--line); color:var(--paper); cursor:pointer;
  padding:8px 14px; border-radius:100px; backdrop-filter:blur(6px);
  text-decoration:none; display:inline-block;
}
.wordmark:hover{background:rgba(12,12,12,.7)}
.chrome-right{display:flex; align-items:center; gap:18px}
.counter{font-size:11px; letter-spacing:.08em; font-variant-numeric:tabular-nums; color:#fff; mix-blend-mode:difference}
.chrome-link{
  background:rgba(12,12,12,.45); border:1px solid var(--line); color:var(--paper);
  font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 12px; border-radius:100px; cursor:pointer;
  text-decoration:none; display:inline-block; backdrop-filter:blur(6px);
}
.chrome-link:hover{background:rgba(12,12,12,.7)}

/* stage */
#stage{position:relative; height:100vh; width:100vw}
.diptych{display:flex; height:100%; width:100%}
.slot{margin:0; position:relative; flex:1 1 50%; height:100%; overflow:hidden; background:#161616}
.slot img{
  width:100%; height:100%; object-fit:cover; display:block;
  opacity:0; transition:opacity .5s ease;
}
.slot img.loaded{opacity:1}
.slot figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:24px;
  font-size:11.5px; line-height:1.5; letter-spacing:.02em; white-space:pre-line;
  color:#fff; mix-blend-mode:difference;
}
#slot-right figcaption{text-align:right}

.zone{position:absolute; top:0; bottom:0; width:22%; background:none; border:0; cursor:pointer; z-index:10}
.zone-prev{left:0}
.zone-next{right:0}

/* bottom transport, minimal, shown on hover/focus or always on touch */
.transport{
  position:fixed; left:0; right:0; bottom:18px; z-index:30;
  display:flex; justify-content:center; gap:10px;
  opacity:0; transition:opacity .2s ease; pointer-events:none;
}
#stage:hover ~ .transport, .transport:focus-within{opacity:1; pointer-events:auto}
.transport button{
  background:rgba(12,12,12,.55); border:1px solid var(--line); color:var(--paper);
  font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  padding:9px 16px; border-radius:100px; cursor:pointer; backdrop-filter:blur(6px);
}
.transport button:hover{background:rgba(12,12,12,.8)}

@media (hover:none){
  .transport{opacity:1; pointer-events:auto}
}

/* mobile stack */
@media (max-width:760px){
  .diptych{flex-direction:column}
  .slot{flex-basis:50%}
  .zone{width:100%; height:50%; top:auto}
  .zone-prev{top:0; bottom:auto; left:0; right:0}
  .zone-next{bottom:0; top:auto; left:0; right:0}
}

/* overlays */
.overlay{
  position:fixed; inset:0; z-index:50; background:var(--ink); color:var(--paper);
  overflow-y:auto; padding:26px;
}
.overlay-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:22px}
.overlay-head h2{font-family:'Fraunces',serif; font-weight:600; font-size:26px; margin:0}
.overlay-close{
  background:none; border:1px solid var(--line); color:var(--paper);
  font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  padding:7px 14px; border-radius:100px; cursor:pointer;
}
.overlay-about{max-width:640px}
.about-lede{font-family:'Fraunces',serif; font-style:italic; font-size:32px; line-height:1.2; margin:0 0 26px; white-space:pre-line}
.about-text{font-size:15px; line-height:1.7; opacity:.9; white-space:pre-line; margin:0 0 16px}
.about-note{opacity:.55; font-size:13px; white-space:pre-line; margin:0}

/* archive / index page — full-bleed thumbnail grid, minimal chrome */
body.archive-body{overflow-y:auto; height:auto; min-height:100%}
.archive-bar{
  position:fixed; top:0; left:0; right:0; z-index:30;
  display:flex; align-items:center; justify-content:flex-end;
  padding:16px 20px; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.5), transparent);
}
.archive-bar > *{pointer-events:auto}
.archive-pager{display:flex; align-items:center; gap:10px}
.archive-pager button{
  background:rgba(12,12,12,.5); border:1px solid var(--line); color:var(--paper);
  font-size:13px; width:30px; height:30px; border-radius:100px; cursor:pointer;
  backdrop-filter:blur(6px); line-height:1;
}
.archive-pager button:disabled{opacity:.25; cursor:default}
.archive-pager span{font-size:11px; opacity:.7; font-variant-numeric:tabular-nums; min-width:44px; text-align:center}
.archive-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.archive-tile{
  position:relative; display:block; aspect-ratio:210/297; overflow:hidden; background:#111;
}
.archive-tile img{
  width:100%; height:100%; object-fit:cover; object-position:center; display:block;
  opacity:0; transition:opacity .3s ease, filter .2s ease;
}
.archive-tile img.loaded{opacity:1}
.archive-tile:hover img{filter:brightness(1.12)}