:root {
  --wall: #231c16;
  --wall-deep: #140f0c;
  --cream: #efe4cf;
  --mute: #b7a890;
  --gold: #c4a15a;
  --gold-deep: #6d5224;
  --display: "Fraunces", "Times New Roman", serif;
  --sans: "Outfit", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--wall-deep); }

body {
  margin: 0;
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  background:
    radial-gradient(900px 420px at 70% 0%, rgba(196, 161, 90, 0.09), transparent 55%),
    var(--wall);
}

img { max-width: 100%; display: block; }
a { color: var(--gold); }

.top {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  padding: 1rem 1.4rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  mix-blend-mode: difference;
}

.top a { color: inherit; text-decoration: none; }

.room {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.4fr);
  gap: 3rem;
  align-items: center;
  padding: 6rem 4vw 4rem;
}

.wall-text { max-width: 34rem; }

.said {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  font-weight: 300;
  line-height: 1.25;
  color: var(--cream);
  margin: 0 0 1.4rem;
}

.wall-text p { color: var(--mute); }

.work-title {
  font-family: var(--display);
  font-size: 1.7rem;
  color: var(--cream);
  margin: 1.8rem 0 0.2rem;
}

.meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}

.controls { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.4rem 0 0.6rem; }

button {
  font-family: var(--sans);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  padding: 0.75rem 1.1rem;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: #1a140c;
  cursor: pointer;
}

button[hidden] { display: none !important; }

#skip, #replay {
  background: transparent;
  color: var(--cream);
}

.phase {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  min-height: 1.2em;
}

.hang { margin: 0; position: relative; }

.picture-light {
  position: absolute;
  left: 10%;
  right: 10%;
  top: -4.5rem;
  height: 5rem;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 220, 150, 0.22), transparent 70%);
  pointer-events: none;
}

.frame {
  background:
    linear-gradient(145deg, #e6c878 0%, #8a6428 28%, #f0d48a 48%, #5a4018 72%, #c9a44e 100%);
  padding: 18px;
  box-shadow:
    0 40px 80px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(255, 230, 170, 0.35);
}

.mat {
  background: #120e0a;
  padding: 10px;
}

#paint {
  width: 100%;
  height: auto;
  display: block;
  background: #e7d7b6;
}

.hang figcaption {
  margin-top: 0.9rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--mute);
}

.hanging {
  background: var(--wall-deep);
  padding: 5rem 0 3rem;
}

.wrap {
  width: min(1080px, calc(100% - 2.4rem));
  margin-inline: auto;
}

.chapter {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

.hanging h2 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2rem, 5vw, 3.6rem);
  margin: 0.3rem 0 0.8rem;
}

.lede { max-width: 38rem; color: var(--mute); }

.work {
  width: min(1080px, calc(100% - 2.4rem));
  margin: 3.4rem auto;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 2.2rem;
  align-items: center;
}

.work.flip { grid-template-columns: 0.8fr 1.2fr; }
.work.flip figure { order: 2; }

.work figure {
  margin: 0;
  background: #0e0b08;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  padding: 10px;
  background:
    linear-gradient(145deg, #d7b56a, #6a4c1e 40%, #e8c97a 60%, #4a3514);
}

.work img { width: 100%; height: auto; display: block; background: #111; }

.work h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 2rem;
  margin: 0 0 0.3rem;
}

.work p { color: var(--mute); }

.colophon {
  padding: 3rem 0 4rem;
  border-top: 1px solid rgba(196, 161, 90, 0.18);
  color: var(--mute);
  font-size: 0.95rem;
}

@media (max-width: 880px) {
  .room,
  .work,
  .work.flip { grid-template-columns: 1fr; }
  .work.flip figure { order: 0; }
  .room { padding-top: 5rem; }
}