/* Concept 04 — "The catalog". A dark gallery: every pair hangs in one long list on a black wall,
   each under its own spotlight with a wall label beside it. No scroll tricks; picking a pair opens
   it as a spread, big, with its story and a loupe for looking closer. */

:root {
  --wall: #0e0d0c;
  --ink: #ece4d4;
  --graphite: #b9af9e;
  --muted: #7a7166;
  --rule: rgba(236, 228, 212, 0.13);
  --accent: #e8742a;

  --hand: "Caveat", cursive;
  --mono: "DM Mono", ui-monospace, monospace;
  --display: "Shrikhand", Georgia, serif;

  /* a faint light speckle, so the black reads as a painted wall rather than a screen */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.9 0 0 0 0 0.82 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

body {
  margin: 0;
  color: var(--ink);
  background: var(--wall);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* the spotlights spill a little past the edges on narrow screens */
}
html:has(.spread[open]) { overflow: hidden; }
::selection { background: var(--accent); color: var(--wall); }

/* one fixed wall behind everything, so scrolling never repaints the texture */
.paper, .sp-paper {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    var(--grain),
    radial-gradient(ellipse at 50% 30%, #181614 0%, var(--wall) 70%);
}

.kicker {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

button { font: inherit; color: inherit; }

/* ───────── HUD ───────── */
.hud {
  position: absolute;
  top: 32px;
  left: 40px;
  right: 40px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.hud-group { display: flex; align-items: center; gap: 30px; flex: 1; }
.hud nav { justify-content: flex-end; }
.hud-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  text-decoration: none;
}
.hud-link::after, .sp-close::after {
  content: "";
  position: absolute;
  left: -4px; right: -4px; bottom: -6px;
  height: 7px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5 C 30 1, 60 8, 98 3' fill='none' stroke='%23e8742a' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.35s cubic-bezier(.6, 0, .3, 1);
}
.hud-link:hover::after, .hud-link:focus-visible::after, .hud-link.is-active::after,
.sp-close:hover::after, .sp-close:focus-visible::after { clip-path: inset(0 0 0 0); }
.hud-link:focus-visible, .sp-close:focus-visible { outline: none; }
.sq { width: 8px; height: 8px; background: var(--ink); display: inline-block; border-radius: 1px; rotate: 8deg; }

.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
}
.logo-a {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 22px;
  line-height: 0.6;
  color: var(--accent);
  rotate: -7deg;
  translate: -38px 2px;
}
.logo-b { font-family: var(--display); font-size: 25px; line-height: 1; }

/* ───────── intro ───────── */
.intro { padding: 190px 6vw 70px; }
.intro-title {
  margin: 10px 0 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(64px, 10vw, 150px);
  line-height: 0.95;
}
.intro-sub {
  max-width: 32ch;
  margin: 18px 0 0;
  font-family: var(--hand);
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.15;
  color: var(--graphite);
}

/* ───────── the list: one pair per row, hung on the wall ───────── */
.list {
  margin: 0;
  padding: 0 6vw;
  list-style: none;
}
.list li + li { border-top: 1px solid var(--rule); }

.row {
  --h: clamp(260px, 30vw, 470px);
  display: grid;
  grid-template-columns: 70px minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: 0 4vw;
  width: 100%;
  padding: 56px 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: zoom-in;
  transition: opacity 0.45s ease;
}
/* point at one pair and the rest of the wall dims, like the lights going down */
.list:has(.row:hover) .row:not(:hover) { opacity: 0.38; }
.row:focus-visible { outline: none; }
.row:focus-visible .row-title { text-decoration: underline dashed var(--muted) 1.5px; text-underline-offset: 8px; }

.row-no {
  align-self: start;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.row-art {
  position: relative;
  display: grid;
  place-items: center;
  height: var(--h);
}
/* the spotlight: a warm pool on the wall behind the pair, brighter when you point at it */
.row-art::before {
  content: "";
  position: absolute;
  inset: -12% -6%;
  background: radial-gradient(ellipse 46% 50% at 50% 46%, rgba(255, 226, 180, 0.13), rgba(255, 226, 180, 0.04) 55%, transparent 72%);
  opacity: 0.7;
  transition: opacity 0.45s ease;
}
.row:hover .row-art::before, .row:focus-visible .row-art::before { opacity: 1; }
.row-art img {
  position: relative;
  max-width: 100%;
  max-height: var(--h);
  transition: translate 0.45s cubic-bezier(.2, .8, .3, 1);
}
.row:hover .row-art img, .row:focus-visible .row-art img { translate: 0 -8px; }

/* the wall label */
.row-label {
  display: flex;
  flex-direction: column;
  max-width: 440px;
}
.row-title {
  font-family: var(--display);
  font-size: clamp(30px, 3.2vw, 52px);
  line-height: 1.02;
}
.row-meta {
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.row-story {
  margin-top: 20px;
  font-size: clamp(13.5px, 0.85vw, 15.5px);
  line-height: 1.7;
  color: var(--graphite);
}
.row-palette { display: flex; gap: 6px; margin-top: 20px; }
.row-palette i, .sp-palette span {
  width: 14px; height: 14px;
  background: var(--c);
  border-radius: 52% 48% 40% 60% / 60% 40% 60% 40%;
}
.row-view {
  position: relative;
  align-self: flex-start;
  margin-top: 26px;
  font-family: var(--hand);
  font-weight: 700;
  font-size: 25px;
  color: var(--ink);
}
.row-view::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--c);
  transform-origin: left;
  scale: 0 1;
  transition: scale 0.4s cubic-bezier(.6, 0, .3, 1);
}
.row:hover .row-view::after, .row:focus-visible .row-view::after { scale: 1 1; }

/* ───────── outro ───────── */
.outro {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 6vw;
  border-top: 1px solid var(--rule);
  text-align: center;
}
.outro-title {
  margin: 12px 0 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(54px, 8vw, 120px);
  line-height: 1;
}
.outro-sub { max-width: 30ch; margin: 14px 0 30px; font-family: var(--hand); font-size: 28px; line-height: 1.15; color: var(--graphite); }
.cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: var(--ink);
  color: var(--wall);
  border-radius: 6px;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cta span { transition: translate 0.25s; }
.cta:hover span { translate: 4px 0; }

/* ───────── the open spread ───────── */
.spread {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  overflow: hidden;
}
.spread[open] { display: grid; grid-template-columns: 58fr 42fr; }
.spread::backdrop { background: transparent; }

.sp-close {
  position: absolute;
  top: 34px;
  left: 40px;
  z-index: 3;
  padding: 0;
  border: 0;
  background: none;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
}

.sp-art {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 0;
  margin: 0;
  padding: 96px 24px 40px 48px;
}
.sp-art::before { /* the same spotlight, larger */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 40% 46% at 52% 50%, rgba(255, 226, 180, 0.12), rgba(255, 226, 180, 0.035) 60%, transparent 78%);
  pointer-events: none;
}
.sp-frame {
  position: relative;
  max-width: 100%;
  cursor: none;
  touch-action: pan-y;
}
.sp-frame img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 180px);
  user-select: none;
}
.sp-hint { position: relative; font-family: var(--hand); font-size: 22px; color: var(--muted); transition: opacity 0.3s; }
.sp-images { display: flex; gap: 10px; max-width: 100%; flex-shrink: 0; overflow-x: auto; padding: 5px; position: relative; }
.sp-images[hidden] { display: none; }
.sp-images button { flex: 0 0 60px; padding: 4px; border: 1px solid var(--muted); background: var(--wall); cursor: pointer; }
.sp-images button[aria-pressed="true"] { border-color: var(--accent); }
.sp-images img { width: 50px; height: 60px; object-fit: contain; display: block; }
.sp-art:has(.sp-images:not([hidden])) .sp-frame img { max-height: calc(100vh - 285px); }
.sp-story { white-space: pre-line; }
.sp-frame.is-looking + .sp-hint { opacity: 0; }

/* numbered spots on the painting, matching the "look closer" list */
.sp-rings span {
  position: absolute;
  width: clamp(54px, 5vw, 86px);
  height: clamp(54px, 5vw, 86px);
  translate: -50% -50%;
  pointer-events: none;
}
.sp-rings svg { width: 100%; height: 100%; overflow: visible; }
.sp-rings path {
  fill: none;
  stroke: #fff8ea;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.7));
  transition: stroke-dashoffset 0.5s cubic-bezier(.6, 0, .3, 1);
}
.sp-rings b {
  position: absolute;
  right: -6%;
  top: -16%;
  font: 700 clamp(22px, 1.8vw, 30px) / 1 var(--hand);
  color: #fff8ea;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
  opacity: 0;
  transition: opacity 0.3s;
}
.sp-rings span.is-on path { stroke-dashoffset: 0; }
.sp-rings span.is-on b { opacity: 1; }
.sp-frame.is-looking .sp-rings { opacity: 0; }

/* the loupe — a circle of the same painting, magnified */
.loupe {
  --d: clamp(160px, 15vw, 240px);
  position: absolute;
  left: 0;
  top: 0;
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  background-color: var(--wall);
  background-repeat: no-repeat;
  box-shadow: 0 0 0 3px var(--wall), 0 0 0 4.5px var(--graphite), 0 14px 34px -6px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  opacity: 0;
  scale: 0.6;
  transition: opacity 0.2s, scale 0.25s cubic-bezier(.2, .8, .3, 1);
  will-change: transform;
}
.sp-frame.is-looking .loupe { opacity: 1; scale: 1; }

.sp-text {
  min-height: 0;
  overflow-y: auto;
  padding: 110px 6vw 48px 2vw;
  overscroll-behavior: contain;
}
.sp-text > * { max-width: clamp(440px, 30vw, 560px); }
.sp-no {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.sp-title {
  margin: 10px 0 18px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(36px, 3.6vw, 58px);
  line-height: 1.02;
}
.sp-story { margin: 0; font-size: clamp(14.5px, 0.85vw, 17px); line-height: 1.7; color: var(--graphite); }
.sp-palette { display: flex; gap: 6px; margin-top: 20px; }

.sp-look {
  margin: 38px 0 6px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.sp-details { margin: 0; padding: 0; list-style: none; }
.sp-details button {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 0 8px;
  width: 100%;
  padding: 12px 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.sp-details .d-k { grid-row: span 2; font: 700 26px / 1 var(--hand); color: var(--muted); }
.sp-details .d-note {
  position: relative;
  justify-self: start;
  font: 700 26px / 1.05 var(--hand);
}
.sp-details .d-note::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform-origin: left;
  scale: 0 1;
  transition: scale 0.4s cubic-bezier(.6, 0, .3, 1);
}
.sp-details .d-text { margin-top: 4px; font-size: 13px; line-height: 1.6; color: var(--graphite); }
.sp-details button:hover .d-note::after, .sp-details button:focus-visible .d-note::after,
.sp-details button.is-on .d-note::after { scale: 1 1; }
.sp-details button.is-on .d-k { color: var(--accent); }
.sp-details button:focus-visible { outline: none; }

.sp-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.sp-pager button {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
#spNext { text-align: right; align-items: flex-end; }
.pg-dir { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.pg-title { font: 700 24px / 1 var(--hand); }
.sp-pager button:hover .pg-dir, .sp-pager button:focus-visible .pg-dir { color: var(--accent); }

/* ───────── page transitions (View Transitions API; browsers without it just swap) ───────── */
::view-transition-group(pair) { animation-duration: 0.5s; animation-timing-function: cubic-bezier(.3, .7, .2, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.3s; }

/* ───────── small screens ───────── */
@media (max-width: 820px) {
  .hud { top: 18px; left: 16px; right: 16px; }
  .hud nav .hud-link:not(.is-active) { display: none; }
  .logo-b { font-size: 19px; }
  .logo-a { font-size: 18px; translate: -28px 2px; }

  .intro { padding: 120px 18px 30px; }
  .list { padding: 0 18px; }
  .row {
    --h: 66vw;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 36px 0 40px;
  }
  .list:has(.row:hover) .row:not(:hover) { opacity: 1; } /* touch "hover" sticks, which would dim the wrong rows */
  .row-art::before { inset: -10% -18px; }
  .row-no { margin-bottom: 18px; }
  .row-label { margin-top: 26px; }
  .row-story { display: none; }

  .spread[open] { display: block; overflow-y: auto; overscroll-behavior: contain; }
  .sp-close { top: 20px; left: 16px; }
  .sp-art { height: 62vh; padding: 60px 16px 12px; }
  .sp-frame { cursor: default; }
  .sp-frame img { max-height: calc(62vh - 110px); }
  .sp-art:has(.sp-images:not([hidden])) { height: auto; min-height: 62vh; }
  .sp-art:has(.sp-images:not([hidden])) .sp-frame img { max-height: calc(62vh - 160px); }
  .sp-hint { font-size: 19px; }
  .sp-text { overflow: visible; padding: 8px 20px 40px; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .row, .row-art::before, .row-art img, .loupe { transition: none; }
}