:root {
  /* Design typography tokens: Playfair Display** for the primary wordmark; IBM Plex Sans** for body text. Interactions should feel like solving with typography: hovering a title completes its underline. Playfair Display elegance with IBM Plex Sans Swiss rigor. */
  --gallery-chalk: #F1EEE6;
  --ink-graphite: #20232A;
  --dust-olive: #8A8F76;
  --muted-clay: #B98F72;
  --blueprint-blue: #526A86;
  --pencil-lavender: #A89CB8;
  --signal-green: #B8C7A0;
  --columns: 12;
  --gutter: clamp(12px, 1.4vw, 22px);
  --margin: clamp(24px, 5vw, 76px);
  --plate-gap: clamp(16px, 2.2vw, 32px);
  --serif: "Playfair Display", "Playfair", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", Inter, system-ui, sans-serif;
  --note: "Instrument Serif", Georgia, serif;
  --font-token-sans-star: "Sans**";
  --font-token-display-star: "Display**";
  --progress: 0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink-graphite);
  background:
    radial-gradient(circle at 82% 7%, rgba(168, 156, 184, .18), transparent 28rem),
    radial-gradient(circle at 8% 44%, rgba(184, 199, 160, .16), transparent 24rem),
    linear-gradient(180deg, #F1EEE6 0%, #ebe6da 54%, #F1EEE6 100%);
  font-family: var(--sans);
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(32, 35, 42, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32, 35, 42, .055) 1px, transparent 1px),
    radial-gradient(rgba(32, 35, 42, .12) .55px, transparent .65px);
  background-size: calc((100vw - var(--margin) * 2) / 12) 72px, calc((100vw - var(--margin) * 2) / 12) 72px, 8px 8px;
  background-position: var(--margin) 0, var(--margin) 0, 0 0;
  mix-blend-mode: multiply;
  opacity: .62;
}

.paper-field { position: fixed; inset: 0; pointer-events: none; z-index: 1; }
.crop { position: absolute; width: 28px; height: 28px; opacity: .42; }
.crop::before, .crop::after { content: ""; position: absolute; background: var(--ink-graphite); }
.crop::before { width: 28px; height: 1px; top: 0; left: 0; }.crop::after { width: 1px; height: 28px; top: 0; left: 0; }
.crop-a { left: var(--margin); top: 32px; }.crop-b { right: var(--margin); top: 32px; transform: rotate(90deg); }.crop-c { left: var(--margin); bottom: 32px; transform: rotate(-90deg); }
.drift-shard { position: absolute; border: 1px solid rgba(32,35,42,.36); background: rgba(168,156,184,.2); transform: rotate(var(--r)); animation: driftShard 9s ease-in-out infinite; }
.shard-a { --r: -8deg; width: 72px; height: 52px; right: 10vw; top: 17vh; clip-path: polygon(0 0, 80% 0, 100% 45%, 70% 100%, 0 88%); }
.shard-b { --r: 13deg; width: 58px; height: 84px; left: 7vw; top: 62vh; background: rgba(184,199,160,.26); clip-path: polygon(20% 0, 100% 8%, 82% 100%, 0 82%); animation-delay: -4s; }
.shard-c { --r: 6deg; width: 86px; height: 42px; right: 16vw; bottom: 12vh; background: rgba(185,143,114,.2); border-radius: 28px 6px 6px 28px; animation-delay: -7s; }

.wall-index {
  position: fixed;
  z-index: 20;
  left: clamp(10px, 2vw, 28px);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 12px;
}
.index-link { color: rgba(32,35,42,.44); text-decoration: none; writing-mode: vertical-rl; transform: rotate(180deg); font: 600 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; transition: color .35s ease, transform .35s ease; }
.index-link span { color: var(--muted-clay); margin-block-end: 8px; }
.index-link.active, .index-link:hover { color: var(--ink-graphite); transform: rotate(180deg) translateX(4px); }

.museum-grid { position: relative; z-index: 2; }
.wall {
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: center;
  padding: clamp(72px, 8vw, 118px) var(--margin);
  position: relative;
  isolation: isolate;
}
.wall::after { content: attr(data-wall) " / PPUZZL.win"; position: absolute; right: var(--margin); top: 28px; color: rgba(32,35,42,.42); font: 700 10px var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.wall-number { position: absolute; left: calc(var(--margin) + 2px); top: clamp(72px, 9vw, 118px); color: var(--muted-clay); font: 700 clamp(3rem, 10vw, 10rem) var(--sans); line-height: .75; opacity: .2; }
.poster-kicker, .small-note, .coordinate-label, .plate-no, .plate-state, .archive-tile span { font: 700 11px var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.poster-kicker { grid-column: 3 / 10; align-self: end; color: var(--blueprint-blue); }
.wordmark { grid-column: 3 / 12; margin: 0; font-family: var(--serif); font-size: clamp(4rem, 13.5vw, 14.5rem); line-height: .78; letter-spacing: -.075em; font-weight: 800; color: var(--ink-graphite); }
em { font-style: italic; color: var(--dust-olive); }
.hero-underline { grid-column: 7 / 12; width: 100%; height: 72px; margin-top: -5vh; }
.underline-path path { fill: none; stroke: var(--muted-clay); stroke-width: 4; stroke-linecap: round; stroke-dasharray: var(--dash, 1000); stroke-dashoffset: var(--dash, 1000); transition: stroke-dashoffset 1.25s cubic-bezier(.55,.05,.2,1), filter .4s ease; }
.in-view .underline-path path, .underline-path.drawn path, [data-underline]:hover + .underline-path path { stroke-dashoffset: 0; animation: lineWobble .9s ease 1.15s both; }
.poster-copy { grid-column: 3 / 7; max-width: 43ch; margin: 0; font-size: clamp(1rem, 1.55vw, 1.35rem); line-height: 1.6; color: rgba(32,35,42,.78); }
.closing { grid-column: 7 / 11; text-align: left; }
.coordinate-label { position: absolute; color: rgba(82,106,134,.68); }.label-left { left: var(--margin); bottom: 15vh; writing-mode: vertical-rl; }.label-right { right: var(--margin); bottom: 18vh; }

.registration-mark { width: 44px; height: 44px; border: 0; background: transparent; position: absolute; cursor: pointer; }
.registration-mark::before, .registration-mark::after { content: ""; position: absolute; background: var(--ink-graphite); left: 50%; top: 50%; transform: translate(-50%, -50%); transition: background .3s ease, transform .3s ease; }
.registration-mark::before { width: 38px; height: 1px; }.registration-mark::after { width: 1px; height: 38px; }
.registration-mark:hover::before, .registration-mark:hover::after { background: var(--signal-green); transform: translate(-50%, -50%) rotate(45deg); }
.hero-mark { right: 26vw; top: 24vh; }.final-mark { left: 18vw; bottom: 20vh; }

.misfit { position: absolute; width: clamp(170px, 18vw, 260px); height: clamp(150px, 16vw, 230px); right: 9vw; bottom: 16vh; transform: rotate(-7deg); transition: transform .75s cubic-bezier(.2,1.4,.25,1); }
.misfit span, .misfit i, .misfit b { position: absolute; border: 2px solid var(--ink-graphite); background: var(--gallery-chalk); box-shadow: 12px 12px 0 rgba(138,143,118,.28); }
.misfit span { inset: 12% 16% 20% 8%; border-radius: 10px; }.misfit i { width: 26%; height: 26%; border-radius: 50%; right: 3%; top: 35%; background: var(--signal-green); }.misfit b { width: 38%; height: 28%; left: 28%; bottom: 2%; background: var(--pencil-lavender); }
.misfit.solved { transform: rotate(0deg) translateX(calc(-1 * var(--gutter))); }

.wall-header { grid-column: 3 / 10; align-self: end; }
.small-note { margin: 0 0 16px; color: var(--blueprint-blue); }
h2 { font-family: var(--serif); font-size: clamp(3.3rem, 8.2vw, 9.2rem); line-height: .88; letter-spacing: -.055em; margin: 0; font-weight: 700; }
.section-underline { width: min(100%, 560px); height: 54px; margin-top: 8px; }
.plate-grid { grid-column: 2 / 12; display: grid; gap: var(--plate-gap); }
.four-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); align-self: start; }
.plate {
  min-height: 430px;
  border: 1px solid rgba(32,35,42,.62);
  background: rgba(241,238,230,.82);
  padding: 18px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 0 rgba(138,143,118,.11);
  transition: transform .55s cubic-bezier(.2,1.15,.25,1), background .35s ease;
}
.plate::before { content: ""; position: absolute; inset: 12px; border: 1px dashed rgba(82,106,134,.36); pointer-events: none; }
.plate:hover, .plate.fit { transform: translateY(-10px) rotate(var(--tilt, -1deg)); background: rgba(184,199,160,.22); }
.plate-no { color: var(--muted-clay); }.plate-state { float: right; color: var(--dust-olive); }
.plate.fit .plate-state::before, .solve-tile.fit .plate-state::before { content: "fit"; }
.plate.fit .plate-state, .solve-tile.fit .plate-state { font-size: 0; }.plate.fit .plate-state::before, .solve-tile.fit .plate-state::before { font-size: 11px; color: var(--signal-green); }
h3 { font: 700 clamp(2.1rem, 3.6vw, 4rem) var(--serif); margin: 68px 0 14px; letter-spacing: -.04em; }
.plate p, .archive-tile p { line-height: 1.45; color: rgba(32,35,42,.72); }
.machine { position: absolute; left: 20px; right: 20px; bottom: 24px; height: 138px; border-top: 1px solid var(--blueprint-blue); }
.machine i, .machine b, .machine em { position: absolute; display: block; border: 2px solid var(--blueprint-blue); background: rgba(82,106,134,.08); transition: transform .6s ease, border-radius .6s ease; }
.machine-hinge i { width: 86px; height: 86px; border-radius: 50%; left: 4%; top: 18px; }.machine-hinge b { width: 110px; height: 22px; left: 34%; top: 48px; transform: rotate(-18deg); background: var(--muted-clay); }.machine-hinge em { width: 18px; height: 96px; right: 10%; top: 8px; }
.plate:hover .machine-hinge b { transform: rotate(0deg); }
.machine-socket i { width: 120px; height: 88px; border-radius: 60px 60px 12px 12px; left: 8%; top: 32px; }.machine-socket b { width: 54px; height: 54px; border-radius: 50%; right: 20%; top: 8px; background: var(--pencil-lavender); }.machine-socket em { width: 54px; height: 54px; right: 20%; top: 72px; border-style: dashed; }
.plate:hover .machine-socket b { transform: translateY(64px); }
.machine-orbit i { width: 132px; height: 132px; border-radius: 50%; left: 8%; top: 0; border-left-color: transparent; }.machine-orbit b { width: 44px; height: 44px; border-radius: 50%; left: 56%; top: 40px; background: var(--signal-green); }.machine-orbit em { width: 12px; height: 100px; left: 41%; top: 18px; transform: rotate(42deg); }
.plate:hover .machine-orbit b { transform: translate(-54px, -16px); }
.machine-latch i { width: 136px; height: 26px; left: 12%; top: 54px; background: var(--dust-olive); }.machine-latch b { width: 48px; height: 76px; right: 18%; top: 28px; }.machine-latch em { width: 38px; height: 38px; right: 7%; top: 47px; border-radius: 8px; background: var(--muted-clay); }
.plate:hover .machine-latch em { transform: translateX(-44px) rotate(90deg); }

.interlude-copy { grid-column: 2 / 7; align-self: center; }
.interlude-copy p:not(.small-note) { font: italic clamp(1.35rem, 2.1vw, 2rem) var(--note); line-height: 1.25; color: var(--dust-olive); }
.line-lab { grid-column: 7 / 12; min-height: 560px; position: relative; border-left: 1px solid rgba(32,35,42,.28); padding-left: clamp(22px, 3vw, 46px); }
.phrase { display: block; width: fit-content; margin: 26px 0; border: 0; background: transparent; color: var(--ink-graphite); font: italic clamp(1.7rem, 3.2vw, 3.6rem) var(--note); cursor: pointer; position: relative; }
.phrase::after { content: ""; position: absolute; left: 0; bottom: .05em; width: 100%; height: 2px; background: var(--muted-clay); transform: scaleX(0); transform-origin: left; transition: transform .5s ease; }
.phrase.active::after, .phrase:hover::after { transform: scaleX(1); }
.route-line { width: 100%; height: 230px; margin-top: 8px; }
.snap-board { position: absolute; right: 6%; bottom: 2%; width: 300px; height: 230px; border: 1px dashed rgba(82,106,134,.45); background: rgba(241,238,230,.45); }
.snap-piece { position: absolute; border: 1px solid var(--ink-graphite); transition: transform .75s cubic-bezier(.2,1.35,.25,1), background .55s ease; }
.pz-a { width: 86px; height: 86px; left: 30px; top: 32px; background: var(--signal-green); border-radius: 8px 40px 8px 8px; }.pz-b { width: 96px; height: 56px; right: 34px; top: 48px; background: var(--pencil-lavender); transform: rotate(9deg); }.pz-c { width: 72px; height: 108px; left: 86px; bottom: 24px; background: var(--muted-clay); clip-path: polygon(0 0,100% 16%,78% 100%,0 86%); }.pz-d { width: 62px; height: 62px; right: 62px; bottom: 36px; background: var(--gallery-chalk); border-radius: 50%; }
.snap-board[data-board="follow"] .pz-b { transform: translateX(-62px) rotate(0deg); background: var(--signal-green); }.snap-board[data-board="quiet"] .pz-a { transform: translate(42px, 44px); }.snap-board[data-board="quiet"] .pz-c { transform: translateX(62px) rotate(-8deg); }

.archive-head { grid-column: 2 / 8; }
.archive-grid { grid-column: 2 / 12; display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--plate-gap); align-self: start; }
.archive-tile { min-height: 250px; border: 1px solid rgba(32,35,42,.38); background: rgba(241,238,230,.68); padding: 16px; position: relative; overflow: hidden; transform: translateY(var(--stagger, 0)); transition: transform .55s ease, background .35s ease; }
.archive-tile:nth-child(1) { grid-column: span 2; --stagger: 36px; }.archive-tile:nth-child(2) { grid-column: span 2; --stagger: -8px; }.archive-tile:nth-child(3) { grid-column: span 2; --stagger: 56px; }.archive-tile:nth-child(4) { grid-column: span 2; --stagger: 10px; }.archive-tile.wide { grid-column: 2 / 8; min-height: 150px; --stagger: 0; background: rgba(168,156,184,.17); }
.archive-tile:hover { transform: translateY(calc(var(--stagger,0) - 12px)); background: rgba(184,199,160,.2); }
.tile-shape { position: absolute; width: 140px; height: 120px; left: 50%; top: 46%; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); border: 1px solid var(--ink-graphite); background: rgba(185,143,114,.28); transition: transform .6s ease, background .4s ease; }
.tile-shape.a { border-radius: 50% 12px 12px 50%; }.tile-shape.b { --rot: 12deg; clip-path: polygon(0 12%, 72% 0, 100% 50%, 72% 100%, 0 88%); background: rgba(168,156,184,.28); }.tile-shape.c { --rot: -8deg; background: rgba(138,143,118,.28); }.tile-shape.d { border-radius: 8px 8px 60px 8px; background: rgba(82,106,134,.18); }
.solve-tile:hover .tile-shape.b, .solve-tile.fit .tile-shape.b { transform: translate(-50%, -50%) rotate(0deg) translateX(-18px); background: var(--signal-green); }
.archive-tile p { position: absolute; bottom: 14px; left: 16px; right: 16px; margin: 0; }.curator { font: italic clamp(1.7rem, 2.6vw, 2.7rem) var(--note); color: var(--dust-olive); }

.wall-win { text-align: center; }
.wall-win .small-note { grid-column: 3 / 11; align-self: end; }
.final-title { grid-column: 3 / 11; }
.final-underline { grid-column: 4 / 10; width: 100%; height: 66px; }
.monogram { grid-column: 4 / 10; height: clamp(260px, 36vw, 450px); position: relative; margin-top: 24px; border: 1px solid rgba(32,35,42,.3); background: rgba(241,238,230,.54); }
.mono-piece { position: absolute; border: 2px solid var(--ink-graphite); transition: transform 1s cubic-bezier(.2,1.35,.25,1), left 1s ease, top 1s ease, background .6s ease; }
.mp-p { width: 22%; height: 54%; left: 7%; top: 22%; border-radius: 10px 46% 10px 10px; background: rgba(184,199,160,.46); transform: rotate(-8deg); }.mp-p2 { width: 18%; height: 38%; left: 29%; top: 30%; border-radius: 48% 10px 10px 48%; background: rgba(185,143,114,.34); transform: rotate(12deg); }.mp-z { width: 26%; height: 34%; left: 48%; top: 18%; clip-path: polygon(0 0,100% 0,72% 30%,100% 100%,0 100%,28% 68%); background: rgba(168,156,184,.45); transform: rotate(-14deg); }.mp-l { width: 16%; height: 52%; left: 69%; top: 35%; border-top: 0; border-right: 0; background: rgba(82,106,134,.15); transform: rotate(8deg); }.mp-notch { width: 10%; height: 12%; right: 8%; top: 18%; border-radius: 0 50% 50% 0; background: var(--signal-green); transform: rotate(24deg); }
.monogram[data-assembled="true"] .mp-p { transform: rotate(0deg); left: 18%; top: 22%; }.monogram[data-assembled="true"] .mp-p2 { transform: rotate(0deg); left: 35%; top: 31%; }.monogram[data-assembled="true"] .mp-z { transform: rotate(0deg); left: 47%; top: 29%; }.monogram[data-assembled="true"] .mp-l { transform: rotate(0deg); left: 66%; top: 25%; }.monogram[data-assembled="true"] .mp-notch { transform: rotate(0deg); right: 12%; top: 35%; }

@keyframes driftShard { 50% { transform: translateY(-18px) translateX(12px) rotate(calc(var(--r) + 3deg)); } }
@keyframes lineWobble { 50% { filter: url(#none); transform: translateY(1px); } 75% { transform: translateY(-1px); } }

@media (max-width: 980px) {
  .wall-index { display: none; }
  .wall { grid-template-columns: repeat(6, minmax(0,1fr)); padding-left: clamp(22px, 5vw, 44px); padding-right: clamp(22px, 5vw, 44px); }
  .poster-kicker, .wordmark, .hero-underline, .poster-copy, .wall-header, .plate-grid, .interlude-copy, .line-lab, .archive-head, .archive-grid, .wall-win .small-note, .final-title, .final-underline, .monogram, .closing { grid-column: 1 / -1; }
  .four-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .archive-grid { grid-template-columns: repeat(2, 1fr); }.archive-tile, .archive-tile:nth-child(n), .archive-tile.wide { grid-column: auto; --stagger: 0; }
  .misfit { opacity: .34; right: 4vw; }
}

@media (max-width: 620px) {
  .four-grid, .archive-grid { grid-template-columns: 1fr; }
  .plate { min-height: 360px; }
  .snap-board { position: relative; right: auto; bottom: auto; width: 100%; margin-top: 28px; }
  .line-lab { min-height: auto; padding-bottom: 24px; }
  .coordinate-label, .hero-mark { display: none; }
}