@import url("https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500&display=swap");
@font-face {
  font-family: "Inter";
  src: url("fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root { --ink:#111; --paper:#f3f1ed; --mute:#6a6a6a; --cream:#f4f1ec; }
* { box-sizing:border-box; margin:0; padding:0; }
html, body { min-height:100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, Helvetica, Arial, sans-serif;
  font-feature-settings: "ss01","cv11";
}
a { color:inherit; text-decoration:none; }
a:hover { opacity:0.45; }

.hero {
  position:relative;
  min-height:100vh;
  background:#0b0b0b url("img/03.jpg") center center / cover no-repeat;
  color: var(--cream);
}
.overlay {
  position:absolute; top:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:baseline;
  padding:28px 32px;
}
.name { font-size:18px; font-weight:500; letter-spacing:0.06em; }
nav {
  display:flex; gap:28px;
  font-size:11px; font-weight:500;
  letter-spacing:0.22em; text-transform:uppercase;
}
.tag {
  position:absolute; left:32px; bottom:28px;
  font-size:13px; font-weight:400; letter-spacing:0.16em;
}

.bar {
  display:flex; justify-content:space-between; align-items:baseline;
  padding:28px 32px;
}
.page { padding:8px 32px 96px; }
.kicker {
  font-size:11px; font-weight:500;
  letter-spacing:0.22em; text-transform:uppercase;
  margin-bottom:40px;
}
.rooms {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:32px 24px;
  max-width:1080px;
}
@media (max-width:800px){ .rooms{ grid-template-columns:repeat(2,1fr);} }
.room h2 {
  font-size:10px; font-weight:500;
  letter-spacing:0.18em; text-transform:uppercase;
  border-top:1px solid var(--ink);
  padding-top:12px; margin-bottom:16px;
}
.room ol { list-style:none; font-size:15px; line-height:1.75; }
.room ol a { display:inline-block; }

.work-page { max-width:1080px; }
.door { margin:0 0 88px; }
.door-visual {
  display:block;
  margin:0 0 14px;
}
.door-visual img {
  display:block;
  width:100%;
  max-height:78vh;
  object-fit:contain;
  object-position:left center;
  background:transparent;
}
.door h2 {
  font-size:11px; font-weight:500;
  letter-spacing:0.22em; text-transform:uppercase;
  margin-bottom:8px;
}
.door ol {
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
  font-size:14px;
}

.stack { max-width:920px; }
.index-row {
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  font-size:14px;
  margin:0 0 48px;
}
.plate-num {
  font-size:14px;
  letter-spacing:0.18em;
  color:var(--mute);
}
figure { margin:0 0 72px; }
figure img {
  display:block; width:100%; height:auto;
  background:transparent;
}
figcaption {
  margin-top:12px;
  font-size:11px; letter-spacing:0.2em; font-weight:500;
}
.missing {
  height:auto;
  min-height:0;
  display:inline-flex;
  align-items:center;
  border-top:none;
  color:var(--mute);
  font-size:14px;
  letter-spacing:0.08em;
  padding:4px 16px 4px 0;
}
.wall { max-width:34em; }
.wall p { font-size:17px; line-height:1.55; margin-bottom:1.15em; }
.wall .fr { color:var(--mute); }
.req p { font-size:17px; line-height:1.55; max-width:28em; margin-bottom:1.1em; }
.note {
  margin-top:40px;
  font-size:11px; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--mute);
}
.still-wrap {
  min-height:calc(100vh - 88px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:12px 32px 48px;
}
.still-wrap a.advance { display:block; line-height:0; }
.still-wrap a.advance:hover { opacity:1; }
.still-wrap img,
.still-wrap video {
  max-width:min(920px,100%);
  max-height:82vh;
  width:auto;
  height:auto;
  background:#111;
  display:block;
}
figure video { display:block; width:100%; height:auto; background:#111; }
.still-meta {
  width:min(920px,100%);
  margin-top:16px;
  display:flex; justify-content:space-between;
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
}

@media (max-width:720px) {
  .overlay,
  .bar {
    flex-wrap:wrap;
    gap:16px 24px;
    padding:20px 18px 12px;
  }
  .name { font-size:16px; }
  nav {
    width:100%;
    justify-content:flex-start;
    gap:22px;
    font-size:12px;
    letter-spacing:0.16em;
  }
  nav a { padding:6px 0; }
  .tag {
    left:18px; right:18px; bottom:20px;
    font-size:12px;
    letter-spacing:0.1em;
  }
  .hero { min-height:100dvh; }
  .page { padding:8px 18px 72px; }
  .work-page { max-width:none; }
  .door { margin:0 0 56px; }
  .door-visual img {
    max-height:none;
    width:100%;
    object-fit:contain;
  }
  .still-wrap { padding:8px 18px 40px; }
  .still-wrap img,
  .still-wrap video {
    max-width:100%;
    max-height:none;
    width:100%;
    height:auto;
  }
  .still-meta { width:100%; gap:12px; }
  .wall p,
  .req p { font-size:16px; }
}