:root {
  --black: #0a0908;
  --paper: #f2ede4;
  --serif: "Playfair Display", "Didot", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --pad: clamp(20px, 4vw, 48px);
  --ease: cubic-bezier(.2, .7, .1, 1);
}

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

html {
  background: var(--black);
  color: var(--paper);
  -webkit-text-size-adjust: 100%;
}

body {
  font: 400 15px/1.5 var(--mono);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.mono {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Top bar: fixed once JS can keep its ink in step with the plate beneath. */
.bar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  padding: 24px var(--pad);
  color: var(--bar, var(--paper));
  transition: color .4s var(--ease);
  pointer-events: none;
}
.js .bar { position: fixed; }
.bar::before {
  content: "";
  position: absolute;
  inset: 0 0 -24px;
  z-index: -1;
  background: linear-gradient(rgba(17, 16, 14, .94) 55%, rgba(17, 16, 14, 0));
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.bar.is-past::before { opacity: 1; }
.bar a {
  pointer-events: auto;
  text-decoration: none;
  transition: opacity .3s var(--ease);
}
.bar a:hover { opacity: .6; }

/* The deck: each screen is sticky, so the next print slides over the last. */
.intro,
.plate {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--g);
  color: var(--t);
}
.plate { box-shadow: 0 -32px 64px rgba(0, 0, 0, .24); }
.plate.is-under { visibility: hidden; }

.intro {
  --g: var(--black);
  --t: var(--paper);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 28px;
  padding: 96px var(--pad) 160px;
  text-align: center;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.intro-globe {
  --d: min(84vh, 96vw);
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--d);
  height: var(--d);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 2.4s var(--ease);
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.intro-globe.is-ready { opacity: 1; }
.intro-globe.is-grab { cursor: grab; }
.intro-globe.is-pin { cursor: pointer; }
.intro-globe.is-dragging { cursor: grabbing; }

.globe-label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: grid;
  gap: 4px;
  text-align: left;
  white-space: nowrap;
  text-shadow: 0 0 16px var(--black), 0 0 4px var(--black);
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events: none;
}
.globe-label.is-left { text-align: right; }
.globe-label.is-on { opacity: 1; }
.globe-city { font: 400 22px/1.1 var(--serif); }
.globe-meta { font-size: 10px; opacity: .64; }
.intro-foot {
  position: absolute;
  inset: auto var(--pad) 40px;
  display: grid;
  gap: 14px;
}
.spectrum {
  display: flex;
  height: 14px;
  padding: 0;
  list-style: none;
}
.spectrum li {
  flex: 1;
  background: var(--g);
}

.plate-no,
.plate-geo,
.plate-place,
.plate-open {
  position: absolute;
  z-index: 2;
}
.plate-no { top: 80px; left: var(--pad); }
.plate-geo {
  top: 80px;
  right: var(--pad);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0 20px;
  max-width: 50vw;
  text-align: right;
}
.plate-place { bottom: 32px; left: var(--pad); }
.plate-open { bottom: 32px; right: var(--pad); text-decoration: none; }
.plate-open:hover { text-decoration: underline; text-underline-offset: 5px; }

.plate-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.plate-name,
.plate-print { grid-area: 1 / 1; }

.plate-name {
  font: 800 min(26vw, calc(128vw / var(--n)))/.8 var(--serif);
  letter-spacing: -.01em;
  text-transform: uppercase;
  white-space: nowrap;
  color: color-mix(in oklab, var(--i) 72%, var(--g));
}

.plate-print {
  position: relative;
  display: block;
  width: min(52vw, calc((100svh - 216px) * .8));
  box-shadow:
    0 2px 4px rgba(0, 0, 0, .12),
    0 24px 48px -12px rgba(0, 0, 0, .32),
    0 64px 120px -32px rgba(0, 0, 0, .4);
}
.plate-print img {
  display: block;
  width: 100%;
  height: auto;
}

/* Portrait screens: the name rises above the print, its lower part still tucked behind it. */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .plate-stage {
    place-content: center;
    padding: 112px var(--pad) 72px;
  }
  .plate-name {
    grid-area: 1 / 1;
    margin-bottom: -.18em;
    font-size: min(24vw, calc(118vw / var(--n)));
  }
  .plate-print {
    grid-area: 2 / 1;
    width: min(80vw, calc((100svh - 300px) * .8));
    justify-self: center;
  }
}

.index {
  position: relative;
  z-index: 1;
  padding: 128px var(--pad) 120px;
  overflow-x: clip;
  background:
    radial-gradient(120% 40% at 50% 0%, rgba(255, 234, 204, .035), transparent 70%),
    linear-gradient(#121110, #0d0c0b 55%, var(--black));
}
.index-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 56px;
}
.index h2 {
  font: 400 clamp(56px, 9vw, 128px)/.85 var(--serif);
  letter-spacing: -.02em;
}
.sorts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sorts button {
  padding: 11px 16px;
  border: 1px solid rgba(242, 237, 228, .28);
  border-radius: 999px;
  background: none;
  color: var(--paper);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.sorts button:hover { border-color: var(--paper); }
.sorts button[aria-pressed="true"] {
  background: var(--paper);
  color: var(--black);
  border-color: var(--paper);
}

/* The index is a hang: framed and glazed prints, each lit by a framing projector. */
.index-grid {
  --frame: 7px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 112px 80px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px 0 0;
  list-style: none;
}

.tile {
  position: relative;
  display: block;
  text-decoration: none;
}
/* Satin black moulding; the last shadow is the projector's spill on the wall. */
.tile-frame {
  position: relative;
  display: block;
  border: var(--frame) solid transparent;
  background:
    linear-gradient(var(--g), var(--g)) padding-box,
    linear-gradient(150deg, #34302b, #121110 32%, #0b0a09 68%, #1d1b18) border-box;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, .7),
    0 22px 32px -14px rgba(0, 0, 0, .85),
    0 48px 80px -30px rgba(0, 0, 0, .7),
    0 0 120px 44px rgba(255, 238, 214, .075);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
/* Projector light on the print: an even field, softly darker toward the foot. */
.tile-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(rgba(255, 244, 228, .05), transparent 30%, transparent 62%, rgba(6, 5, 4, .16));
  pointer-events: none;
}

/* The glass: one reflection fixed to the screen, so frames slide under it on scroll.
   atlas.js sets --sx/--sy (grid on screen) and --fx/--fy (frame within grid). */
.tile-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    repeating-linear-gradient(118deg,
      transparent 0,
      rgba(255, 255, 255, .04) 70px,
      rgba(255, 255, 255, .15) 120px,
      rgba(255, 255, 255, .04) 170px,
      transparent 240px,
      transparent 330px),
    linear-gradient(118deg, rgba(255, 255, 255, .1), transparent 32%);
  background-size: 100vw 100vh, 100% 100%;
  background-position:
    calc(-1 * (var(--sx, 0px) + var(--fx, 0px))) calc(-1 * (var(--sy, 0px) + var(--fy, 0px))),
    0 0;
  box-shadow:
    inset 0 0 0 1px rgba(196, 164, 104, .5),
    inset 0 3px 7px rgba(0, 0, 0, .38);
  pointer-events: none;
}
.tile img {
  display: block;
  width: 100%;
  height: auto;
}
.tile:hover .tile-frame {
  transform: translateY(-4px);
  box-shadow:
    0 1px 1px rgba(0, 0, 0, .7),
    0 30px 40px -16px rgba(0, 0, 0, .85),
    0 64px 96px -32px rgba(0, 0, 0, .7),
    0 0 120px 44px rgba(255, 238, 214, .095);
}

.tile-label {
  display: block;
  margin-top: 32px;
  text-align: center;
}
.tile-city {
  display: block;
  font: 400 17px/1.25 var(--serif);
  letter-spacing: .01em;
  color: var(--paper);
}
.tile-meta {
  display: block;
  margin-top: 10px;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .26em;
  opacity: .5;
}

/* The footer closes on the same 77 grounds the intro opens with. */
.foot {
  position: relative;
  display: grid;
  justify-items: center;
  padding: 152px var(--pad) 48px;
  overflow: hidden;
  text-align: center;
}
.foot > :not(.foot-globe, .foot-spectrum) { position: relative; }
.foot-globe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(760px, 130vw);
  height: min(760px, 130vw);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 2.4s var(--ease);
  pointer-events: none;
}
.foot-globe.is-ready { opacity: 1; }
.foot-spectrum {
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
}
.foot-line {
  font: 400 clamp(32px, 5vw, 56px)/1.1 var(--serif);
  letter-spacing: -.015em;
}
.foot-mail {
  margin-top: 40px;
  font: 400 clamp(20px, 2.6vw, 28px)/1.2 var(--serif);
  letter-spacing: -.01em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
  text-decoration-color: rgba(242, 237, 228, .28);
  opacity: .88;
  transition: opacity .3s var(--ease), text-decoration-color .3s var(--ease);
}
.foot-mail:hover { opacity: 1; text-decoration-color: currentColor; }
.foot-meta {
  display: flex;
  gap: 16px;
  margin-top: 128px;
}
.foot-meta span { opacity: .4; }
.foot-home {
  color: #d1bb77;
  text-decoration: none;
  transition: color .25s var(--ease);
}
.foot-home:hover { color: #e0cf9a; }

@media (max-width: 480px) {
  .index-grid {
    --frame: 4px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 64px 24px;
  }
  .tile-label { margin-top: 20px; }
  .tile-city { font-size: 16px; line-height: 1.15; }
  .tile-meta { margin-top: 4px; font-size: 9px; letter-spacing: .12em; }
  .plate-geo { flex-direction: column; align-items: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  .intro, .plate { position: relative; }
  .plate { box-shadow: none; }
  .bar, .tile-frame, .sorts button { transition: none; }
  .tile:hover .tile-frame { transform: none; }
}