@charset "UTF-8";

:root {
  --ink: #1d1c17;
  --ink-soft: #2a2922;
  --paper: #d9d0bc;
  --paper-bright: #eee7d6;
  --paper-deep: #c6baa1;
  --accent: #c65332;
  --moss: #60705a;
  --blue: #31596a;
  --line-dark: rgba(29, 28, 23, 0.28);
  --line-light: rgba(238, 231, 214, 0.25);
  --font-display: "Iowan Old Style", "Palatino Linotype", Baskerville, Georgia, serif;
  --font-sans: "Avenir Next", Avenir, "Helvetica Neue", sans-serif;
  --font-mono: "Courier New", Courier, monospace;
  --page-gutter: clamp(1.15rem, 3.4vw, 4rem);
  --site-header-height: 5.1rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}
body.no-scroll, body.is-loading { overflow: hidden; }
button, input, textarea, select { font: inherit; }
img { display: block; max-width: 100%; }
a { color: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--accent); color: var(--paper-bright); }

.skip-link {
  position: fixed; top: .7rem; left: .7rem; z-index: 2000;
  padding: .7rem 1rem; background: var(--paper-bright); color: var(--ink);
  transform: translateY(-150%); transition: transform 180ms ease;
}
.skip-link:focus { transform: translateY(0); }

/* Opening field note */
.site-loader {
  --loader-angle: 0deg;
  position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center;
  overflow: hidden; color: var(--paper-bright); cursor: progress; isolation: isolate;
}
.site-loader__veil {
  position: absolute; right: 0; left: 0; z-index: 0; height: calc(50% + 1px);
  background-color: #1d1c17;
  background-image: linear-gradient(rgba(238,231,214,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(238,231,214,.05) 1px, transparent 1px);
  background-size: 28px 28px;
  transition: transform 900ms cubic-bezier(.76,0,.24,1); will-change: transform;
}
.site-loader__veil--top { top: 0; border-bottom: 1px solid rgba(198,83,50,.5); }
.site-loader__veil--bottom { bottom: 0; border-top: 1px solid rgba(198,83,50,.5); }
.site-loader__stage {
  position: relative; z-index: 1; display: grid; width: min(82vw, 35rem); justify-items: center;
  transition: opacity 250ms ease, transform 500ms var(--ease-out), visibility 0s linear 300ms;
}
.site-loader__lens {
  position: relative; display: grid; width: clamp(9rem, 17vw, 13rem); aspect-ratio: 1;
  place-items: center; border: 1px solid rgba(238,231,214,.55); border-radius: 50%;
  box-shadow: 0 0 0 1rem rgba(238,231,214,.025), 0 0 0 1.08rem rgba(238,231,214,.13);
  transition: opacity 600ms ease, transform 1100ms var(--ease-out);
}
.site-loader__lens::before {
  position: absolute; inset: -.38rem; border-radius: 50%;
  background: conic-gradient(var(--accent) var(--loader-angle), rgba(238,231,214,.12) 0deg);
  content: ""; -webkit-mask: radial-gradient(transparent 72%, #000 73% 76%, transparent 77%); mask: radial-gradient(transparent 72%, #000 73% 76%, transparent 77%);
}
.site-loader__lens::after {
  width: 45%; height: 22%; border-radius: 55% 45% 50% 50%; background: var(--paper-bright); content: "";
  box-shadow: 0 0 2rem rgba(238,231,214,.18); animation: loader-fish 2.2s ease-in-out infinite alternate;
}
.site-loader__aperture { position: absolute; left: 18%; width: 25%; height: 30%; border: 1px solid var(--accent); border-radius: 50%; }
.site-loader__focus { position: absolute; right: 16%; width: 8%; aspect-ratio: 1; border-radius: 50%; background: var(--ink); box-shadow: 1.05rem -.2rem 0 -.12rem var(--paper-bright); }
.site-loader__copy { display: flex; width: 100%; align-items: baseline; justify-content: space-between; margin-top: 2.2rem; padding-bottom: .55rem; border-bottom: 1px solid rgba(238,231,214,.28); text-transform: uppercase; }
.site-loader__copy p { margin: 0; }
.site-loader__copy p:first-child { font: 700 .58rem/1 var(--font-mono); letter-spacing: .16em; }
.site-loader__copy p:last-child { color: var(--accent); font: italic clamp(2rem,4vw,3.2rem)/.8 var(--font-display); }
.site-loader__copy p:last-child span:last-child { margin-left: .08em; font-size: .38em; font-style: normal; vertical-align: top; }
.site-loader__meter { width: 100%; height: 2px; overflow: hidden; background: rgba(238,231,214,.08); }
.site-loader__meter span { display: block; width: 100%; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.site-loader__credit { margin: .85rem 0 0; color: rgba(238,231,214,.48); font: 700 .5rem/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.site-loader__sound { margin-top: 1.2rem; padding: .5rem .8rem; border: 1px solid rgba(238,231,214,.25); border-radius: 99px; background: transparent; color: inherit; font: 700 .52rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.site-loader__sound-dot { display: inline-block; width: .4rem; height: .4rem; margin-right: .5rem; border-radius: 50%; background: var(--accent); }
.site-loader.is-complete { pointer-events: none; }
.site-loader.is-complete .site-loader__veil--top { transform: translateY(-101%); transition-delay: 150ms; }
.site-loader.is-complete .site-loader__veil--bottom { transform: translateY(101%); transition-delay: 150ms; }
.site-loader.is-complete .site-loader__stage { opacity: 0; visibility: hidden; transform: scale(.85); }
.site-loader.is-complete .site-loader__lens { opacity: 0; transform: scale(3) rotate(12deg); }

/* Navigation */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 40; display: flex; min-height: var(--site-header-height);
  align-items: center; justify-content: space-between; gap: 2rem; padding: .9rem var(--page-gutter);
  color: var(--ink); mix-blend-mode: multiply; pointer-events: none;
}
.gallery-page .site-header { color: #fff; mix-blend-mode: difference; }
.site-header a, .site-header button { pointer-events: auto; }
.site-brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; }
.site-brand__mark {
  display: grid; width: 2.05rem; aspect-ratio: 1; place-items: center; border: 1px solid currentColor; border-radius: 50%;
  font: italic 1.15rem/1 var(--font-display); transform: rotate(-8deg);
}
.site-brand__name,
.site-brand__mark + span { font: 800 .68rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.site-brand__note { padding-left: .75rem; border-left: 1px solid currentColor; opacity: .65; font: 400 .54rem/1.25 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.site-nav { display: flex; align-items: center; gap: clamp(.8rem,2vw,2rem); }
.site-nav a, .sound-toggle { border: 0; background: none; color: inherit; font: 700 .57rem/1 var(--font-mono); letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.site-nav a { position: relative; padding: .45rem 0; }
.site-nav a::after { position: absolute; right: 0; bottom: .1rem; left: 0; height: 1px; background: currentColor; content: ""; transform: scaleX(0); transform-origin: right; transition: transform 280ms var(--ease-out); }
.site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.site-nav sup { color: var(--accent); font-size: .7em; }
.sound-toggle { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; }
.sound-toggle__bars { display: inline-flex; height: .7rem; align-items: center; gap: 2px; }
.sound-toggle__bars span { width: 1px; height: 35%; background: currentColor; }
.sound-toggle[aria-pressed="true"] .sound-toggle__bars span { animation: sound-pulse .9s ease-in-out infinite alternate; }
.sound-toggle[aria-pressed="true"] .sound-toggle__bars span:nth-child(2) { animation-delay: -.5s; }
.sound-toggle[aria-pressed="true"] .sound-toggle__bars span:nth-child(3) { animation-delay: -.25s; }

.eyebrow { margin: 0; font: 700 .58rem/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.eyebrow span { display: inline-block; width: 1.8rem; height: 1px; margin-right: .65rem; background: currentColor; vertical-align: .2em; }
.field-link { display: inline-flex; align-items: center; gap: .7rem; padding: 0 0 .35rem; border-bottom: 1px solid currentColor; font: 700 .59rem/1 var(--font-mono); letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.field-link span { color: var(--accent); transition: transform 250ms var(--ease-out); }
.field-link:hover span { transform: translateY(.25rem); }

/* Hero — an atlas page with a living specimen */
.home-hero {
  --hero-x: 0; --hero-y: 0;
  position: relative; min-height: max(720px,100svh); overflow: hidden; isolation: isolate;
  background: var(--paper); color: var(--ink);
  background-image: radial-gradient(circle at 71% 48%, rgba(82,104,86,.16), transparent 26rem), linear-gradient(108deg, transparent 0 66%, rgba(255,255,255,.16) 66% 66.2%, transparent 66.2%);
}
.home-hero::before { position: absolute; inset: 0; z-index: -1; opacity: .28; content: ""; background-image: repeating-linear-gradient(0deg, rgba(29,28,23,.035) 0 1px, transparent 1px 4px); mix-blend-mode: multiply; pointer-events: none; }
.hero-grid { position: absolute; inset: 0; opacity: .32; background-image: linear-gradient(rgba(29,28,23,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(29,28,23,.12) 1px, transparent 1px); background-size: 4.5vw 4.5vw; -webkit-mask-image: linear-gradient(90deg,#000,transparent 78%); mask-image: linear-gradient(90deg,#000,transparent 78%); }
.hero-ledger { position: absolute; top: calc(var(--site-header-height) + 1rem); left: var(--page-gutter); right: var(--page-gutter); display: grid; grid-template-columns: 1fr 1fr 1fr; font: 400 .5rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.hero-ledger span:nth-child(2) { text-align: center; }
.hero-ledger span:last-child { text-align: right; }
.hero-copy { position: absolute; left: var(--page-gutter); top: 50%; z-index: 4; width: min(58vw,58rem); transform: translateY(-47%); }
.hero-copy .eyebrow { margin-bottom: clamp(1.2rem,3vh,2.2rem); }
.hero-copy h1 { margin: 0; font: 400 clamp(4.5rem,9.5vw,10.5rem)/.72 var(--font-display); letter-spacing: -.073em; }
.hero-copy h1 em { position: relative; color: var(--accent); font-weight: 400; }
.hero-copy h1 em::after { position: absolute; right: .05em; bottom: -.08em; left: .05em; height: .12em; border: 2px solid var(--accent); border-color: var(--accent) transparent transparent; border-radius: 50%; content: ""; transform: rotate(-2deg); }
.hero-copy__foot { display: grid; grid-template-columns: minmax(15rem,24rem) auto; align-items: end; gap: 2rem; margin-top: clamp(2rem,5vh,4.2rem); }
.hero-copy__foot p { margin: 0; font: 400 clamp(.95rem,1.3vw,1.2rem)/1.5 var(--font-display); }

.world-orbit { position: absolute; top: 50%; right: clamp(2rem,7vw,8rem); z-index: 3; width: clamp(22rem,36vw,38rem); aspect-ratio: 1; transform: translate(calc(var(--hero-x) * -9px), calc(-50% + var(--hero-y) * -9px)); transition: transform 180ms ease-out; }
.world-orbit__ring { position: absolute; inset: 1%; border: 1px solid rgba(29,28,23,.35); border-radius: 50%; }
.world-orbit__ring--one::before, .world-orbit__ring--two::before { position: absolute; width: .55rem; aspect-ratio: 1; border-radius: 50%; background: var(--accent); content: ""; }
.world-orbit__ring--one { animation: slow-turn 24s linear infinite; }
.world-orbit__ring--one::before { top: 10%; left: 18%; }
.world-orbit__ring--two { inset: 12%; border-style: dashed; opacity: .65; animation: slow-turn 17s linear infinite reverse; }
.world-orbit__ring--two::before { right: 8%; bottom: 23%; width: .35rem; background: var(--blue); }
.world-orbit__frame, .world-orbit__portal { position: absolute; margin: 0; overflow: hidden; border: 0; padding: 0; background: #7e7a6e; box-shadow: 0 1.4rem 3rem rgba(29,28,23,.17); }
.world-orbit__frame img, .world-orbit__portal > img { width: 100%; height: 100%; object-fit: cover; }
.world-orbit__frame--back { top: 9%; right: 5%; width: 36%; height: 31%; transform: rotate(8deg) translate(calc(var(--hero-x) * 12px),calc(var(--hero-y) * 10px)); filter: saturate(.7); }
.world-orbit__frame--middle { bottom: 9%; left: 2%; width: 39%; height: 34%; transform: rotate(-7deg) translate(calc(var(--hero-x) * -11px),calc(var(--hero-y) * -10px)); filter: saturate(.78); }
.world-orbit__portal { top: 19%; left: 22%; width: 60%; aspect-ratio: 1; border: .55rem solid var(--paper-bright); border-radius: 46% 54% 58% 42% / 55% 43% 57% 45%; cursor: pointer; transform: translate(calc(var(--hero-x) * 20px),calc(var(--hero-y) * 16px)) rotate(-2deg); transition: border-radius 700ms var(--ease-out), transform 500ms var(--ease-out); }
.world-orbit__portal:hover { border-radius: 55% 45% 44% 56% / 41% 58% 42% 59%; transform: translate(calc(var(--hero-x) * 20px),calc(var(--hero-y) * 16px)) rotate(1deg) scale(1.025); }
.world-orbit__portal img { filter: saturate(.83) contrast(1.05); transition: transform 900ms var(--ease-out), filter 500ms ease; }
.world-orbit__portal:hover img { filter: saturate(1); transform: scale(1.045); }
.world-orbit__glass { position: absolute; inset: 0; background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.32), transparent 22%), linear-gradient(145deg, transparent 55%, rgba(32,54,46,.23)); pointer-events: none; }
.world-orbit__stamp { position: absolute; right: 8%; bottom: 7%; display: grid; width: 3.8rem; aspect-ratio: 1; place-items: center; border: 1px solid var(--paper-bright); border-radius: 50%; background: rgba(29,28,23,.68); color: #fff; transform: rotate(9deg); }
.world-orbit__stamp b { font: italic 1.35rem/.7 var(--font-display); }
.world-orbit__stamp i { margin-top: -1rem; font: 400 .42rem/1 var(--font-mono); text-transform: uppercase; }
.world-orbit__caption { position: absolute; right: 2%; bottom: 0; margin: 0; text-align: right; }
.world-orbit__caption span { display: block; font: italic 1.25rem/1 var(--font-display); }
.world-orbit__caption small { font: 400 .46rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.hero-specimen { position: absolute; bottom: 2rem; left: var(--page-gutter); display: flex; align-items: center; gap: .75rem; font: 400 .48rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.hero-specimen__line { width: 3rem; height: 1px; background: var(--ink); }
.hero-margin-note { position: absolute; right: var(--page-gutter); bottom: 1.6rem; margin: 0; text-align: right; font: italic .86rem/1.35 var(--font-display); transform: rotate(-3deg); }

/* Manifesto */
.manifesto { position: relative; display: grid; grid-template-columns: .25fr 1fr; gap: 2rem; padding: clamp(7rem,13vw,14rem) var(--page-gutter); overflow: hidden; background: var(--ink); color: var(--paper-bright); }
.manifesto::after { position: absolute; right: -6vw; bottom: -16vw; width: 38vw; aspect-ratio: 1; border: 1px solid rgba(238,231,214,.16); border-radius: 50%; box-shadow: 0 0 0 5vw rgba(238,231,214,.025), 0 0 0 10vw rgba(238,231,214,.018); content: ""; }
.manifesto__index { margin: .8rem 0 0; color: rgba(238,231,214,.56); font: 400 .53rem/1 var(--font-mono); letter-spacing: .12em; }
.manifesto h2 { position: relative; z-index: 1; max-width: 70rem; margin: 0; font: 400 clamp(3.8rem,7.8vw,8rem)/.92 var(--font-display); letter-spacing: -.055em; }
.manifesto h2 em { color: #db805d; font-weight: 400; }
.manifesto__notes { grid-column: 2; display: grid; grid-template-columns: minmax(14rem,28rem) 1fr; gap: 3rem; align-items: end; margin-top: 3rem; }
.manifesto__notes > p:first-child { margin: 0; color: rgba(238,231,214,.72); font: 400 1rem/1.55 var(--font-display); }
.hand-note { margin: 0; color: #db805d; font: italic 1rem/1 var(--font-display); transform: rotate(-3deg); }

/* The eight worlds */
.world-index { background-color: var(--paper-bright); background-image: linear-gradient(rgba(29,28,23,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(29,28,23,.055) 1px, transparent 1px); background-size: 42px 42px; }
.world-index__header { display: grid; grid-template-columns: minmax(0,1fr) minmax(14rem,26rem); align-items: end; gap: 3rem; padding: clamp(6rem,10vw,10rem) var(--page-gutter) clamp(3rem,6vw,6rem); border-bottom: 1px solid var(--line-dark); }
.world-index__header h2 { margin: 1.1rem 0 0; font: 400 clamp(3.8rem,8vw,8.5rem)/.85 var(--font-display); letter-spacing: -.065em; }
.world-index__header > p { margin: 0; font: italic 1.05rem/1.45 var(--font-display); }
.world-list { padding: 0 var(--page-gutter) clamp(8rem,12vw,13rem); }
.world-entry { --rx: 0deg; --ry: 0deg; position: relative; display: grid; min-height: min(88svh,58rem); grid-template-columns: minmax(0,1.08fr) minmax(18rem,.72fr); gap: clamp(2rem,7vw,8rem); align-items: center; padding: clamp(5rem,9vw,9rem) 0; border-bottom: 1px solid var(--line-dark); }
.world-entry:nth-child(even) { grid-template-columns: minmax(18rem,.72fr) minmax(0,1.08fr); }
.world-entry:nth-child(even) .world-entry__scene { grid-column: 2; grid-row: 1; }
.world-entry:nth-child(even) .world-entry__copy { grid-column: 1; grid-row: 1; }
.world-entry__register { position: absolute; top: 1.25rem; right: 0; left: 0; display: flex; justify-content: space-between; color: rgba(29,28,23,.5); font: 400 .49rem/1 var(--font-mono); letter-spacing: .12em; }
.world-entry__scene { --px: 50%; --py: 50%; position: relative; display: block; width: 100%; aspect-ratio: 1.16; perspective: 1200px; text-decoration: none; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 700ms var(--ease-out); }
.world-entry__scene::before { position: absolute; inset: 6% 7% 7% 6%; z-index: -1; border-radius: 48% 52% 44% 56% / 55% 43% 57% 45%; background: var(--world-tint); content: ""; opacity: .72; transform: translateZ(-40px) rotate(-5deg); }
.world-entry__scene::after { position: absolute; inset: 0; z-index: 5; background: radial-gradient(circle 7rem at var(--px) var(--py), rgba(255,255,255,.15), transparent 70%); content: ""; pointer-events: none; }
.world-entry__orbit { position: absolute; inset: 3%; z-index: -2; border: 1px dashed color-mix(in srgb, var(--world-accent) 55%, transparent); border-radius: 50%; transform: translateZ(-70px) rotate(8deg); }
.world-entry__orbit::before { position: absolute; top: 9%; left: 13%; width: .65rem; aspect-ratio: 1; border-radius: 50%; background: var(--world-accent); content: ""; }
.world-entry__photo { position: absolute; margin: 0; overflow: hidden; background: var(--world-tint); box-shadow: 0 1.8rem 3.5rem rgba(44,39,29,.18); }
.world-entry__photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.04); transition: transform 1.2s var(--ease-out), filter 600ms ease; }
.world-entry__photo--main { inset: 9% 13% 7% 7%; border: .5rem solid var(--world-paper); border-radius: 47% 53% 42% 58% / 55% 42% 58% 45%; transform: translateZ(35px) rotate(-2.5deg); }
.world-entry:nth-child(3n+2) .world-entry__photo--main { border-radius: 2% 48% 3% 42% / 3% 35% 6% 44%; transform: translateZ(35px) rotate(2deg); }
.world-entry:nth-child(3n) .world-entry__photo--main { border-radius: 48% 3% 44% 4% / 5% 46% 3% 40%; transform: translateZ(35px) rotate(-1deg); }
.world-entry__photo--small { top: 0; right: 0; z-index: 3; width: 28%; aspect-ratio: .86; border: .34rem solid var(--world-paper); transform: translateZ(82px) rotate(6deg); }
.world-entry__photo--tiny { bottom: 2%; left: 0; z-index: 3; width: 24%; aspect-ratio: 1.15; border: .3rem solid var(--world-paper); transform: translateZ(95px) rotate(-8deg); }
.world-entry__scene:hover .world-entry__photo img { filter: saturate(1); transform: scale(1.04); }
.world-entry__pin { position: absolute; top: 7%; right: 23%; z-index: 6; width: 1.1rem; aspect-ratio: 1; border-radius: 50%; background: var(--world-accent); box-shadow: 0 .3rem .4rem rgba(29,28,23,.25), inset .15rem .15rem rgba(255,255,255,.28); transform: translateZ(110px); }
.world-entry__enter { position: absolute; right: 3%; bottom: 12%; z-index: 7; display: inline-flex; align-items: center; gap: .7rem; padding: .75rem .9rem; border: 1px solid var(--ink); background: var(--world-paper); color: var(--ink); font: 700 .52rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; transform: translateZ(115px) rotate(-2deg); transition: background 250ms ease, color 250ms ease; }
.world-entry__enter b { color: var(--world-accent); font-size: 1rem; }
.world-entry__scene:hover .world-entry__enter { background: var(--ink); color: var(--paper-bright); }
.world-entry__copy { position: relative; z-index: 8; }
.world-entry__kicker { margin: 0 0 1.2rem; color: var(--world-accent); font: 700 .57rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.world-entry__copy h3 { margin: 0; font: 400 clamp(3.1rem,6vw,7rem)/.84 var(--font-display); letter-spacing: -.06em; }
.world-entry__copy h3 a { text-decoration: none; }
.world-entry__copy h3 a:hover { color: var(--world-accent); }
.world-entry__description { display: grid; grid-template-columns: minmax(12rem,27rem) auto; gap: 2rem; margin-top: clamp(2rem,4vw,3.5rem); padding-top: 1rem; border-top: 1px solid var(--line-dark); }
.world-entry__description p { margin: 0; font: 400 1rem/1.52 var(--font-display); }
.world-entry__description span { font: 400 .48rem/1.55 var(--font-mono); letter-spacing: .08em; text-align: right; text-transform: uppercase; }

.traveller { --traveller-color: var(--accent); --swim-y: 0px; --swim-r: 0deg; position: fixed; right: clamp(.6rem,1.6vw,1.5rem); top: 50%; z-index: 25; width: 4.8rem; height: 3rem; opacity: 0; pointer-events: none; transform: translateY(calc(-50% + var(--swim-y))) rotate(var(--swim-r)); transition: opacity 500ms ease, transform 120ms linear; mix-blend-mode: multiply; }
.traveller.is-visible { opacity: 1; }
.traveller__fish { position: absolute; top: .55rem; left: .85rem; width: 2rem; height: 1.05rem; border: 1.5px solid var(--traveller-color); border-radius: 55% 45% 48% 52%; transform: rotate(-4deg); }
.traveller__fish::before { position: absolute; right: -.72rem; top: .08rem; width: .8rem; height: .8rem; border: 1.5px solid var(--traveller-color); content: ""; transform: rotate(45deg); clip-path: polygon(0 0,100% 0,100% 100%); }
.traveller__fish::after { position: absolute; left: .35rem; top: .27rem; width: .16rem; aspect-ratio: 1; border-radius: 50%; background: var(--traveller-color); content: ""; }
.traveller__fish i { position: absolute; left: .65rem; bottom: -.36rem; width: .85rem; height: .45rem; border-top: 1.5px solid var(--traveller-color); border-radius: 50%; }
.traveller__bubble { position: absolute; border: 1px solid var(--traveller-color); border-radius: 50%; animation: bubble-rise 2.6s ease-in-out infinite; }
.traveller__bubble--one { top: .1rem; left: .25rem; width: .28rem; aspect-ratio: 1; }
.traveller__bubble--two { top: -.35rem; left: -.15rem; width: .18rem; aspect-ratio: 1; animation-delay: -.9s; }
.traveller__label { position: absolute; right: 0; bottom: -.5rem; font: 400 .38rem/1 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; writing-mode: vertical-rl; }
.traveller.is-reversed .traveller__fish { transform: scaleX(-1) rotate(-4deg); }

/* Archive threshold */
.archive-intro { position: relative; display: grid; min-height: 78svh; place-items: center; padding: 8rem var(--page-gutter); overflow: hidden; background: #9e4b36; color: var(--paper-bright); text-align: center; }
.archive-intro::before { position: absolute; width: min(68vw,52rem); aspect-ratio: 1; border: 1px solid rgba(238,231,214,.25); border-radius: 50%; box-shadow: 0 0 0 7vw rgba(238,231,214,.035), 0 0 0 14vw rgba(238,231,214,.02); content: ""; animation: breathe 6s ease-in-out infinite alternate; }
.archive-intro__mark { position: absolute; top: 2rem; font-size: 2rem; }
.archive-intro > p { position: absolute; top: 5rem; margin: 0; font: 700 .52rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.archive-intro h2 { position: relative; z-index: 1; margin: 0; font: 400 clamp(4.4rem,10vw,11rem)/.78 var(--font-display); letter-spacing: -.065em; }
.archive-intro h2 em { color: #edc98f; font-weight: 400; }
.archive-intro .field-link { position: absolute; bottom: 4rem; z-index: 2; }

/* Contact sheet */
.all-work { padding-bottom: clamp(7rem,12vw,12rem); background-color: var(--ink); background-image: repeating-linear-gradient(0deg, rgba(238,231,214,.025) 0 1px, transparent 1px 4px); color: var(--paper-bright); }
.archive-heading { display: grid; grid-template-columns: .28fr 1fr .38fr; align-items: end; gap: 2rem; padding: clamp(7rem,11vw,11rem) var(--page-gutter) clamp(3rem,5vw,5rem); border-bottom: 1px solid var(--line-light); }
.archive-heading__folio { margin: 0; color: rgba(238,231,214,.5); font: 400 .5rem/1.4 var(--font-mono); letter-spacing: .12em; }
.archive-heading h2 { margin: 0; font: 400 clamp(4rem,8vw,8.5rem)/.8 var(--font-display); letter-spacing: -.065em; }
.archive-heading > p:last-child { margin: 0; font: italic 1rem/1.45 var(--font-display); }
.project-filters { position: sticky; top: 0; z-index: 30; display: flex; overflow-x: auto; padding: 0 var(--page-gutter); border-bottom: 1px solid var(--line-light); background: rgba(29,28,23,.91); scrollbar-width: none; backdrop-filter: blur(16px); }
.project-filters::-webkit-scrollbar { display: none; }
.filter-button { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .45rem; padding: 1.25rem 1rem; border: 0; border-right: 1px solid var(--line-light); background: transparent; color: rgba(238,231,214,.65); cursor: pointer; font: 700 .52rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.filter-button:first-child { border-left: 1px solid var(--line-light); }
.filter-button span { color: rgba(238,231,214,.34); font-size: .42rem; }
.filter-button:hover, .filter-button:focus-visible, .filter-button[aria-pressed="true"] { background: var(--paper-bright); color: var(--ink); }
.filter-button[aria-pressed="true"] span { color: var(--accent); }
.all-series { padding: clamp(4rem,7vw,7rem) var(--page-gutter) 0; content-visibility: auto; contain-intrinsic-size: 1200px; }
.all-series__header { display: grid; grid-template-columns: minmax(2rem,.12fr) minmax(0,1fr) auto; align-items: end; gap: 1.5rem; margin-bottom: 2rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line-light); }
.all-series__header > span, .all-series__header a { font: 700 .53rem/1 var(--font-mono); letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.all-series__header > span { color: var(--accent); }
.all-series__header h3 { margin: 0; font: 400 clamp(2.7rem,5.2vw,5.8rem)/.85 var(--font-display); letter-spacing: -.055em; }
.all-series__header a { padding-bottom: .3rem; border-bottom: 1px solid var(--accent); }
.photo-columns { column-count: 3; column-gap: clamp(.7rem,1.4vw,1.4rem); }
.photo-frame { position: relative; display: block; width: 100%; margin: 0 0 clamp(.7rem,1.4vw,1.4rem); padding: 0; overflow: hidden; break-inside: avoid; border: 0; background: var(--ink-soft); cursor: zoom-in; }
.photo-frame::after { position: absolute; inset: 0; border: 1px solid rgba(238,231,214,.06); content: ""; pointer-events: none; }
.photo-frame img { width: 100%; height: auto; filter: saturate(.82); transition: transform 850ms var(--ease-out), filter 450ms ease; }
.photo-frame:hover img, .photo-frame:focus-visible img { filter: saturate(1); transform: scale(1.025); }

/* Footer and shared utility */
.site-footer { display: grid; grid-template-columns: 1fr .7fr auto; align-items: center; gap: 2rem; padding: clamp(3rem,5vw,5rem) var(--page-gutter); border-top: 1px solid var(--line-dark); background: var(--paper); font: 700 .54rem/1.45 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.site-footer > div { display: flex; align-items: center; gap: 1rem; }
.site-footer p { margin: 0; }
.site-footer small { opacity: .5; font: inherit; }
.site-footer__email { letter-spacing: .02em; text-decoration-thickness: 1px; text-transform: none; text-underline-offset: .24em; }
.site-footer__seal { display: grid; width: 2.8rem; aspect-ratio: 1; place-items: center; border: 1px solid var(--ink); border-radius: 50%; color: var(--accent); font: italic 1.6rem/1 var(--font-display); transform: rotate(-8deg); }
.site-footer__note { font: italic .83rem/1.4 var(--font-display); letter-spacing: 0; text-transform: none; }
.site-footer > a { text-decoration: none; }
.direction-arrow { display: inline-block; }
.direction-arrow--down::after { content: "↓"; }
.direction-arrow--up-right::after { content: "↗"; }
.direction-arrow--left::after { content: "←"; }
.direction-arrow--right::after { content: "→"; }
.reveal { opacity: 0; transform: translateY(2.5rem); transition: opacity 850ms ease, transform 1000ms var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Viewer */
.lightbox { position: fixed; inset: 0; z-index: 100; display: grid; grid-template-columns: minmax(3.2rem,7vw) minmax(0,1fr) minmax(3.2rem,7vw); align-items: center; background: rgba(20,19,16,.97); color: #fff; opacity: 0; visibility: hidden; transition: opacity 450ms ease, visibility 450ms; }
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__figure { display: grid; width: 84vw; height: 90vh; grid-template-rows: minmax(0,1fr) auto; justify-self: center; margin: 0; opacity: 0; transform: scale(.975); transition: opacity 600ms var(--ease-out), transform 650ms var(--ease-out); }
.lightbox.is-open .lightbox__figure { opacity: 1; transform: scale(1); }
.lightbox__figure img { width: 100%; height: 100%; object-fit: contain; transition: opacity 180ms ease, transform 300ms ease; }
.lightbox__figure.is-changing img { opacity: .2; transform: scale(.99); }
.lightbox__figure figcaption { display: flex; justify-content: space-between; padding-top: .8rem; font: 400 .53rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.lightbox button { border: 0; background: transparent; color: #fff; cursor: pointer; font: 700 .58rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.lightbox__close { position: absolute; top: 1.5rem; right: 1.5rem; z-index: 2; }
.lightbox__nav { height: 100%; font-size: 1.35rem !important; }

/* Page change */
.site-transition-curtain { position: fixed; inset: 0; z-index: 400; display: flex; overflow: hidden; pointer-events: none; visibility: hidden; }
.site-transition-curtain__panel { width: 20%; height: 100%; flex: 0 0 20%; border-right: 1px solid rgba(238,231,214,.12); background: var(--ink); transform: translateY(105%); transition: transform 720ms cubic-bezier(.76,0,.24,1); }
body.is-leaving, body.is-entering { overflow: hidden; pointer-events: none; }
body.is-leaving .site-transition-curtain, body.is-entering .site-transition-curtain { visibility: visible; }
body.is-leaving .site-transition-curtain__panel { transform: translateY(0); }
body.is-entering .site-transition-curtain__panel { transform: translateY(-105%); transition-duration: 860ms; }
body.is-leaving .site-transition-curtain__panel:nth-child(2), body.is-entering .site-transition-curtain__panel:nth-child(2) { transition-delay: 25ms; }
body.is-leaving .site-transition-curtain__panel:nth-child(3), body.is-entering .site-transition-curtain__panel:nth-child(3) { transition-delay: 50ms; }
body.is-leaving .site-transition-curtain__panel:nth-child(4), body.is-entering .site-transition-curtain__panel:nth-child(4) { transition-delay: 75ms; }
body.is-leaving .site-transition-curtain__panel:nth-child(5), body.is-entering .site-transition-curtain__panel:nth-child(5) { transition-delay: 100ms; }
body.is-transition-resetting .site-transition-curtain__panel { transform: translateY(105%); transition: none; }

@keyframes loader-fish { to { transform: translateX(.8rem) rotate(4deg); } }
@keyframes sound-pulse { from { height: 25%; } to { height: 100%; } }
@keyframes slow-turn { to { transform: rotate(360deg); } }
@keyframes bubble-rise { 0%,100% { opacity: .2; transform: translate(0,.5rem); } 50% { opacity: 1; transform: translate(-.25rem,-.5rem); } }
@keyframes breathe { to { transform: scale(1.06); } }

@media (max-width: 1050px) {
  .hero-copy { width: 64vw; }
  .world-orbit { right: -5rem; width: clamp(22rem,44vw,32rem); opacity: .88; }
  .hero-margin-note { display: none; }
  .world-entry, .world-entry:nth-child(even) { grid-template-columns: minmax(0,1fr) minmax(16rem,.65fr); gap: 3rem; }
  .world-entry:nth-child(even) .world-entry__scene { grid-column: 2; }
  .world-entry:nth-child(even) .world-entry__copy { grid-column: 1; }
  .world-entry__description { grid-template-columns: 1fr; }
  .world-entry__description span { text-align: left; }
}

@media (max-width: 760px) {
  :root { --site-header-height: 4.4rem; }
  .site-header { align-items: flex-start; }
  .site-brand__note, .site-nav a:nth-child(2), .sound-toggle [data-sound-label] { display: none; }
  .site-nav { gap: 1rem; padding-top: .55rem; }
  .home-hero { min-height: 860px; }
  .hero-ledger { grid-template-columns: 1fr 1fr; top: 5.2rem; }
  .hero-ledger span:nth-child(2) { text-align: right; }
  .hero-ledger span:last-child { display: none; }
  .hero-copy { top: 18%; width: calc(100% - var(--page-gutter)*2); transform: none; }
  .hero-copy h1 { font-size: clamp(4.1rem,18vw,7rem); line-height: .78; }
  .hero-copy__foot { grid-template-columns: 1fr; gap: 1.3rem; margin-top: 2rem; }
  .hero-copy__foot p { max-width: 20rem; }
  .world-orbit { top: auto; right: 50%; bottom: 5.2rem; width: min(92vw,28rem); transform: translateX(50%); }
  .hero-specimen { bottom: 1.2rem; }
  .manifesto { grid-template-columns: 1fr; padding-top: 8rem; padding-bottom: 8rem; }
  .manifesto__notes { grid-column: 1; grid-template-columns: 1fr; }
  .world-index__header { grid-template-columns: 1fr; }
  .world-entry, .world-entry:nth-child(even) { min-height: 0; grid-template-columns: 1fr; gap: 2.5rem; padding: 6rem 0; }
  .world-entry:nth-child(even) .world-entry__scene, .world-entry:nth-child(even) .world-entry__copy { grid-column: 1; }
  .world-entry:nth-child(even) .world-entry__scene { grid-row: 1; }
  .world-entry:nth-child(even) .world-entry__copy { grid-row: 2; }
  .world-entry__scene { aspect-ratio: 1; }
  .world-entry__copy h3 { font-size: clamp(3.7rem,15vw,6rem); }
  .traveller { display: none; }
  .archive-intro { min-height: 680px; }
  .archive-heading { grid-template-columns: 1fr; }
  .archive-heading h2 { font-size: clamp(4rem,18vw,7rem); }
  .photo-columns { column-count: 2; }
  .all-series__header { grid-template-columns: 2rem 1fr; }
  .all-series__header a { grid-column: 2; justify-self: start; }
  .site-footer { grid-template-columns: 1fr; }
  .site-footer__note { display: none; }
}

@media (max-width: 480px) {
  .home-hero { min-height: 800px; }
  .world-orbit { bottom: 4.5rem; width: 23rem; }
  .world-entry__photo--small { width: 31%; }
  .world-entry__photo--tiny { width: 27%; }
  .photo-columns { column-count: 1; }
  .lightbox { grid-template-columns: 2.8rem minmax(0,1fr) 2.8rem; }
  .lightbox__figure { width: calc(100vw - 5.6rem); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .world-entry__scene { transform: none !important; }
}

/* --------------------------------------------------------------------------
   Second edition: a clearer photographic tabletop
   -------------------------------------------------------------------------- */

html { scroll-padding-top: calc(var(--site-header-height) + 1rem); }
#worlds, #all-work, #photographs { scroll-margin-top: calc(var(--site-header-height) + 1rem); }
.nav-short { display: none; }

.site-header {
  min-height: var(--site-header-height);
  border-bottom: 1px solid rgba(29, 28, 23, .16);
  background: rgba(225, 217, 198, .82);
  box-shadow: 0 .35rem 1.4rem rgba(29, 28, 23, .07);
  color: var(--ink);
  mix-blend-mode: normal;
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
  backdrop-filter: blur(18px) saturate(1.12);
}

.gallery-page .site-header {
  border-color: rgba(238, 231, 214, .15);
  background: rgba(24, 23, 19, .78);
  box-shadow: 0 .35rem 1.4rem rgba(0, 0, 0, .16);
  color: var(--paper-bright);
  mix-blend-mode: normal;
}

.site-nav a,
.sound-toggle { white-space: nowrap; }

.home-hero {
  min-height: 100svh;
  padding: calc(var(--site-header-height) + clamp(2.4rem, 5vh, 4.5rem)) var(--page-gutter) clamp(4.5rem, 7vh, 6rem);
  background:
    radial-gradient(circle at 76% 43%, rgba(79, 102, 83, .13), transparent 28rem),
    linear-gradient(115deg, transparent 0 66%, rgba(255,255,255,.22) 66% 66.15%, transparent 66.15%),
    var(--paper);
}

.home-hero::after {
  position: absolute;
  inset: var(--site-header-height) 0 0;
  z-index: -1;
  background: linear-gradient(90deg, transparent 49.94%, rgba(29,28,23,.08) 50%, transparent 50.06%);
  content: "";
  pointer-events: none;
}

.hero-grid {
  inset: var(--site-header-height) 0 0;
  background-size: clamp(3.4rem, 4.4vw, 5.2rem) clamp(3.4rem, 4.4vw, 5.2rem);
  opacity: .23;
}

.hero-shell {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: calc(100svh - var(--site-header-height) - clamp(6.9rem, 12vh, 10.5rem));
  grid-template-columns: minmax(18rem, .58fr) minmax(34rem, 1.42fr);
  grid-template-rows: auto 1fr;
  align-items: start;
  gap: clamp(2rem, 5vw, 7rem);
}

.hero-copy {
  position: relative;
  top: auto;
  left: auto;
  width: auto;
  grid-area: 1 / 1;
  padding-top: clamp(1rem, 5vh, 4rem);
  transform: none;
}

.hero-copy .eyebrow { margin-bottom: clamp(1.3rem, 2.5vh, 2.2rem); }
.hero-copy h1 { max-width: 7ch; font-size: clamp(2.8rem, 4.6vw, 5.6rem); line-height: .82; }
.hero-copy__intro {
  max-width: 31rem;
  margin: clamp(2rem, 4vh, 3.4rem) 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--accent);
  font: 400 clamp(1rem, 1.35vw, 1.24rem)/1.5 var(--font-display);
}

.hero-routes {
  display: grid;
  grid-area: 2 / 1;
  grid-template-columns: 1fr;
  align-self: end;
  gap: .7rem;
  margin-top: clamp(2.2rem, 7vh, 6rem);
}

.hero-route {
  position: relative;
  display: grid;
  min-height: 8.2rem;
  grid-template-columns: 2.7rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .9rem;
  overflow: hidden;
  padding: 1rem;
  border: 1px solid rgba(29, 28, 23, .34);
  background: rgba(238, 231, 214, .48);
  text-decoration: none;
  transition: color 280ms ease, background 280ms ease, transform 450ms var(--ease-out), box-shadow 450ms var(--ease-out);
}

.hero-route::before {
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--accent);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 450ms var(--ease-out);
}

.hero-route:hover,
.hero-route:focus-visible {
  background: var(--paper-bright);
  box-shadow: 0 1rem 2rem rgba(29, 28, 23, .09);
  transform: translateY(-3px);
}
.hero-route:hover::before,
.hero-route:focus-visible::before { transform: scaleX(1); }
.hero-route > span:nth-child(2) { display: grid; min-width: 0; gap: .28rem; }
.hero-route small { color: var(--accent); font: 700 .44rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.hero-route strong { font: 700 clamp(.72rem, .9vw, .9rem)/1.15 var(--font-sans); }
.hero-route em { color: rgba(29,28,23,.58); font: italic .67rem/1.25 var(--font-display); }
.hero-route > b { color: var(--accent); font: 400 1rem/1 var(--font-mono); transition: transform 250ms ease; }
.hero-route:hover > b { transform: translateY(.25rem); }

.hero-route__icon { position: relative; display: block; width: 2.25rem; height: 2.25rem; }
.hero-route__icon i { position: absolute; display: block; border: 1px solid currentColor; }
.hero-route__icon--stack i { inset: .2rem .25rem .5rem; background: var(--paper-bright); transform-origin: bottom center; }
.hero-route__icon--stack i:nth-child(1) { transform: rotate(-8deg) translate(-.18rem, .1rem); }
.hero-route__icon--stack i:nth-child(2) { transform: rotate(6deg) translate(.18rem, .05rem); }
.hero-route__icon--stack i:nth-child(3) { background: var(--world-tint, #9fbaa6); transform: rotate(-1deg); }
.hero-route__icon--grid { display: grid; grid-template-columns: 1fr 1fr; gap: .18rem; padding: .18rem; }
.hero-route__icon--grid i { position: static; background: var(--ink); }
.hero-route__icon--grid i:nth-child(2), .hero-route__icon--grid i:nth-child(3) { background: var(--accent); }

.hero-collage {
  --collage-accent: #2d5870;
  position: relative;
  width: min(100%, 47rem);
  height: min(72svh, 46rem);
  min-height: 38rem;
  grid-area: 1 / 2 / 3 / 3;
  justify-self: center;
  isolation: isolate;
  transform: translate(calc(var(--hero-x) * -6px), calc(var(--hero-y) * -5px));
  transition: transform 180ms ease-out;
}

.hero-collage::before {
  position: absolute;
  inset: 8% 3% 12% 7%;
  z-index: -2;
  border: 1px solid rgba(29,28,23,.22);
  border-radius: 50%;
  box-shadow: 0 0 0 3rem rgba(238,231,214,.16), 0 0 0 3.05rem rgba(29,28,23,.06);
  content: "";
  transform: rotate(-7deg);
}

.hero-collage::after {
  position: absolute;
  inset: 17% 13% 22% 14%;
  z-index: -1;
  border: 1px dashed color-mix(in srgb, var(--collage-accent) 48%, transparent);
  border-radius: 50%;
  content: "";
  transform: rotate(9deg);
  transition: border-color 400ms ease;
}

.polaroid-deck {
  --deck-drag: 0px;
  position: absolute;
  inset: 3% 0 14%;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.polaroid-deck.is-dragging { cursor: grabbing; }

.polaroid {
  position: absolute;
  top: 49%;
  left: 50%;
  display: block;
  width: min(55%, 23rem);
  aspect-ratio: .79;
  padding: .72rem .72rem 5.15rem;
  background: #f3eddf;
  box-shadow: 0 1.65rem 3.7rem rgba(42, 37, 27, .2), 0 .2rem .5rem rgba(42, 37, 27, .13);
  color: var(--ink);
  text-decoration: none;
  transform-origin: center;
  transition: transform 780ms var(--ease-out), opacity 430ms ease, filter 430ms ease, box-shadow 430ms ease;
  will-change: transform;
}

.polaroid::after {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(29,28,23,.12);
  content: "";
  pointer-events: none;
}

.polaroid__image { display: block; width: 100%; height: 100%; overflow: hidden; background: var(--ink-soft); }
.polaroid__image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.87) contrast(1.02); pointer-events: none; transition: filter 450ms ease, transform 900ms var(--ease-out); }
.polaroid__caption { position: absolute; right: .85rem; bottom: .7rem; left: .85rem; display: grid; grid-template-columns: 1.7rem minmax(0,1fr); align-items: end; column-gap: .65rem; }
.polaroid__caption > span { grid-row: 1 / span 2; color: var(--collage-accent); font: 400 1.15rem/1 var(--font-display); }
.polaroid__caption strong { overflow: hidden; font: italic clamp(.9rem,1.2vw,1.2rem)/1 var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.polaroid__caption small { margin-top: .24rem; overflow: hidden; font: 400 .4rem/1 var(--font-mono); letter-spacing: .06em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }

.polaroid[data-slot="0"] { opacity: 1; filter: none; transform: translate(calc(-50% + var(--deck-drag)), -50%) rotate(-2.5deg) scale(1); }
.polaroid[data-slot="1"] { opacity: .94; filter: saturate(.78); transform: translate(-13%, -51%) rotate(9deg) scale(.82); }
.polaroid[data-slot="2"] { opacity: .76; filter: saturate(.65); transform: translate(17%, -45%) rotate(15deg) scale(.7); }
.polaroid[data-slot="-1"] { opacity: .93; filter: saturate(.78); transform: translate(-88%, -47%) rotate(-11deg) scale(.81); }
.polaroid[data-slot="-2"] { opacity: .7; filter: saturate(.64); transform: translate(-114%, -38%) rotate(-17deg) scale(.68); }
.polaroid:not([data-slot="0"]):not([data-slot="1"]):not([data-slot="2"]):not([data-slot="-1"]):not([data-slot="-2"]) { opacity: 0; pointer-events: none; transform: translate(-50%, -42%) scale(.6); }
.polaroid[data-slot="0"]:hover { box-shadow: 0 2rem 4.4rem rgba(42,37,27,.25); transform: translate(calc(-50% + var(--deck-drag)), -51.5%) rotate(-1deg) scale(1.018); }
.polaroid[data-slot="0"]:hover img { filter: saturate(1); transform: scale(1.025); }
.polaroid-deck.is-dragging .polaroid { transition-duration: 80ms; pointer-events: none; }

.hero-collage__controls {
  position: absolute;
  right: 4%;
  bottom: 3%;
  left: 7%;
  z-index: 30;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-top: .75rem;
  border-top: 1px solid rgba(29,28,23,.32);
}
.hero-collage__controls p { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: .7rem; margin: 0; }
.hero-collage__controls p span { color: var(--collage-accent); font: 700 .46rem/1 var(--font-mono); letter-spacing: .08em; }
.hero-collage__controls p strong { font: italic 1.05rem/1 var(--font-display); }
.hero-collage__controls button { display: inline-flex; align-items: center; gap: .65rem; padding: .55rem .7rem; border: 1px solid rgba(29,28,23,.35); background: rgba(238,231,214,.78); color: var(--ink); cursor: pointer; font: 700 .45rem/1 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; transition: background 220ms ease, color 220ms ease; }
.hero-collage__controls button:hover, .hero-collage__controls button:focus-visible { background: var(--ink); color: var(--paper-bright); }
.hero-collage__controls button span { color: var(--collage-accent); font-size: 1rem; }
.hero-collage__note { position: absolute; z-index: 28; margin: 0; color: rgba(29,28,23,.58); font: italic .77rem/1.3 var(--font-display); }
.hero-collage__note--top { top: 0; right: 1%; text-align: right; transform: rotate(4deg); }
.hero-collage__note--bottom {
  bottom: 11%;
  left: -9.5rem;
  width: 8.5rem;
  text-align: right;
  transform: rotate(-4deg);
}
.hero-collage__tape { position: absolute; z-index: 29; width: 5.4rem; height: 1.35rem; background: rgba(197, 167, 107, .33); box-shadow: inset 0 0 0 1px rgba(120,93,52,.08); pointer-events: none; }
.hero-collage__tape--one { top: 12%; left: 31%; transform: rotate(-14deg); }
.hero-collage__tape--two { right: 17%; bottom: 29%; transform: rotate(12deg); }

.hero-folio {
  position: absolute;
  right: var(--page-gutter);
  bottom: 1.25rem;
  left: var(--page-gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  font: 400 .46rem/1 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hero-folio span:nth-child(2) { text-align: center; }
.hero-folio span:last-child { text-align: right; }

.world-index__header {
  padding-top: clamp(7rem, 11vw, 11rem);
  background: rgba(238,231,214,.58);
}
.world-index__header h2 { font-size: clamp(4.2rem, 8.7vw, 9.2rem); }
.world-entry__enter { font-size: .5rem; }
.world-entry__enter::first-letter { text-transform: uppercase; }

.archive-heading {
  padding-top: clamp(8rem, 12vw, 12rem);
  grid-template-columns: .3fr 1fr .38fr;
}
.archive-heading h2 { max-width: 12ch; font-size: clamp(4rem, 7.7vw, 8rem); line-height: .82; }

.project-filters {
  top: var(--site-header-height);
  z-index: 35;
  box-shadow: 0 .8rem 1.8rem rgba(0,0,0,.14);
}

@media (max-width: 1180px) {
  .site-brand__note { display: none; }
  .hero-shell { grid-template-columns: minmax(17rem, .58fr) minmax(28rem, 1.42fr); gap: 1.5rem; }
  .hero-copy h1 { font-size: clamp(2.7rem, 5vw, 4.5rem); }
  .hero-routes { grid-template-columns: 1fr; max-width: 31rem; }
  .hero-route { min-height: 6.4rem; }
  .hero-collage { height: min(70svh, 42rem); }
  .hero-collage__note--bottom { display: none; }
}

@media (max-width: 880px) {
  :root { --site-header-height: 4.65rem; }
  .site-header { align-items: center; gap: .75rem; padding-block: .7rem; }
  .site-brand__mark { width: 1.85rem; }
  .site-nav { gap: .85rem; }
  .site-nav a, .sound-toggle { font-size: .49rem; }
  .site-nav sup { display: none; }
  .nav-long { display: none; }
  .nav-short { display: inline; }
  .home-page .site-nav a:nth-child(2) { display: inline-block; }
  .home-hero { min-height: auto; padding-top: calc(var(--site-header-height) + 3rem); padding-bottom: 5rem; }
  .home-hero::after { display: none; }
  .hero-shell { min-height: 0; grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 1rem; }
  .hero-copy { width: min(100%, 42rem); }
  .hero-copy { grid-area: 1 / 1; padding-top: 0; }
  .hero-copy h1 { font-size: clamp(2.8rem, 9vw, 4.5rem); }
  .hero-copy__intro { max-width: 29rem; }
  .hero-routes { grid-area: 3 / 1; max-width: none; grid-template-columns: 1fr 1fr; margin-top: 1.5rem; }
  .hero-route { min-height: 7.2rem; }
  .hero-collage { width: min(100%, 43rem); height: 42rem; min-height: 0; grid-area: 2 / 1; margin-top: -1.5rem; }
  .hero-folio { position: relative; right: auto; bottom: auto; left: auto; margin-top: 2.5rem; }
  .archive-heading { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  :root { --site-header-height: 4.25rem; }
  .site-header { padding-inline: .85rem; }
  .site-brand { gap: .45rem; }
  .site-brand__mark { width: 1.75rem; }
  .site-brand__name, .site-brand__mark + span { font-size: .57rem; }
  .site-nav { gap: .62rem; }
  .site-nav a, .sound-toggle { font-size: .43rem; letter-spacing: .06em; }
  .sound-toggle { width: 1.15rem; overflow: hidden; }
  .sound-toggle [data-sound-label] { display: none; }
  .home-hero { padding: calc(var(--site-header-height) + 2.3rem) 1rem 3rem; }
  .hero-copy .eyebrow { font-size: .49rem; }
  .hero-copy h1 { font-size: clamp(2.65rem, 12vw, 4rem); line-height: .8; }
  .hero-copy__intro { margin-top: 1.7rem; font-size: 1.02rem; }
  .hero-routes { grid-template-columns: 1fr; gap: .55rem; margin-top: .7rem; }
  .hero-route { min-height: 6.25rem; grid-template-columns: 2.4rem 1fr auto; padding: .85rem; }
  .hero-route em { white-space: normal; }
  .hero-collage { height: 31rem; margin-top: -1.4rem; }
  .hero-collage::before { inset: 12% -4% 17% 1%; }
  .hero-collage::after { inset: 20% 6% 27%; }
  .polaroid-deck { inset: 1% -3% 17%; }
  .polaroid { width: min(62%, 14.8rem); padding: .48rem .48rem 4rem; }
  .polaroid__caption { right: .6rem; bottom: .52rem; left: .6rem; grid-template-columns: 1.35rem minmax(0,1fr); column-gap: .35rem; }
  .polaroid__caption > span { font-size: .92rem; }
  .polaroid__caption strong { font-size: .82rem; }
  .polaroid__caption small { font-size: .34rem; }
  .polaroid[data-slot="0"] { transform: translate(calc(-50% + var(--deck-drag)), -50%) rotate(-2deg); }
  .polaroid[data-slot="1"] { transform: translate(-18%, -49%) rotate(9deg) scale(.77); }
  .polaroid[data-slot="2"] { transform: translate(4%, -42%) rotate(14deg) scale(.62); }
  .polaroid[data-slot="-1"] { transform: translate(-83%, -46%) rotate(-10deg) scale(.76); }
  .polaroid[data-slot="-2"] { transform: translate(-104%, -35%) rotate(-15deg) scale(.61); }
  .polaroid[data-slot="0"]:hover { transform: translate(calc(-50% + var(--deck-drag)), -50%) rotate(-2deg); }
  .hero-collage__controls { right: 0; bottom: 1%; left: 0; align-items: center; }
  .hero-collage__controls p { grid-template-columns: 1fr; gap: .2rem; }
  .hero-collage__controls button { font-size: .4rem; }
  .hero-collage__note--top { top: -.5rem; }
  .hero-collage__note--bottom, .hero-collage__tape--two { display: none; }
  .hero-folio { grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; }
  .hero-folio span:nth-child(2) { text-align: right; }
  .hero-folio span:last-child { display: none; }
  .world-index__header { gap: 1.6rem; padding: 6.2rem 1rem 3rem; }
  .world-index__header h2 { max-width: 9ch; font-size: clamp(3.6rem, 15vw, 5.2rem); }
  .world-index__header > p { font-size: .92rem; }
  .archive-heading { padding: 6.5rem 1rem 3.2rem; }
  .archive-heading h2 { font-size: clamp(3.8rem, 17vw, 5.6rem); }
  .project-filters { padding-inline: 0; }
  .filter-button { padding: 1rem .8rem; }
}