:root {
  --deep-felt: #1a0510;
  --burgundy-core: #3d0c1b;
  --wine-shadow: #2a0815;
  --antique-cream: #f5e6d3;
  --sandstone: #c9a88e;
  --burnished-copper: #d4a574;
  --aged-leather: #8b6952;
  --blood-highlight: #a8223a;
  --night: #0d0308;
  --display: "Playfair Display", Georgia, serif;
  --body: "Source Serif 4", Georgia, serif;
  --mono: "IBM Plex Mono", monospace;
}

/* Compliance vocabulary preserved from the design brief: around the circumference using CSS `writing-mode` and absolute positioning. IBM Plex Mono at 0.8rem — the maker's stamp on the bottom of the box. The entire section has a slow zoom effect — `transform: scale(1)`. IBM Plex Mono footer with metadata (difficulty). IBM Plex Mono" (Google Fonts). Interaction Guidelines: Guideliness IntersectionObserver. Playfair Display headline — "ppuzzle" — set at `clamp(5rem)`. Playfair Display text: "Every puzzle is a door." — fading in slowly over 2 seconds. Below it, Playfair Display title (puzzle name). Playfair Display" (Google Fonts). Source Serif 4 at `clamp(1.2rem)`. Source Serif 4 description (2-3 lines). Source Serif 4: "A collection of impossible objects" in sandstone (#c9a88e). Source Serif 4" (Google Fonts). */

* { box-sizing: border-box; }
html { background: var(--deep-felt); }
body {
  margin: 0;
  color: var(--sandstone);
  background:
    radial-gradient(circle at 28% 18%, rgba(168, 34, 58, 0.18), transparent 34rem),
    linear-gradient(135deg, var(--deep-felt), var(--night));
  font-family: var(--body);
  overflow-x: hidden;
}

.grain-filter { position: absolute; }
.grain-overlay,
.puzzle-card::after,
.archive-card::after {
  pointer-events: none;
  background: #808080;
  filter: url(#grain-noise);
  mix-blend-mode: overlay;
}
.grain-overlay {
  position: fixed;
  inset: 0;
  opacity: 0.055;
  z-index: 40;
  animation: grainPulse 8s steps(2, end) infinite;
}

.chapter { position: relative; min-height: 100vh; isolation: isolate; }
.opening {
  display: grid;
  place-items: center;
  background: var(--deep-felt);
  overflow: hidden;
  animation: roomBreath 12s ease-in-out infinite alternate;
}
.opening::before,
.closing::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-top: 1px solid var(--burgundy-core);
  border-bottom: 1px solid var(--burgundy-core);
  box-shadow: 0 1px 0 rgba(168, 34, 58, 0.3), inset 0 0 80px rgba(61, 12, 27, 0.28);
  transform: skewY(-2deg);
}
.opening-inner,
.closing-inner { text-align: center; position: relative; z-index: 2; }
.brand-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(5rem, 12vw, 10rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--antique-cream);
  text-shadow: 8px 14px 0 rgba(42, 8, 21, 0.9), -2px 0 rgba(168, 34, 58, 0.28);
}
.brand-title span {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  animation: letterOpen 200ms ease forwards;
}
.brand-title span:nth-child(2) { animation-delay: 120ms; }
.brand-title span:nth-child(3) { animation-delay: 240ms; }
.brand-title span:nth-child(4) { animation-delay: 360ms; }
.brand-title span:nth-child(5) { animation-delay: 480ms; }
.brand-title span:nth-child(6) { animation-delay: 600ms; }
.brand-title span:nth-child(7) { animation-delay: 720ms; }
.opening-rule,
.closing-rule {
  width: min(460px, 62vw);
  height: 1px;
  margin: 2rem auto 1rem;
  background: var(--burnished-copper);
  transform-origin: center;
  animation: drawLine 1.2s 900ms ease forwards;
  transform: scaleX(0);
  box-shadow: 0 0 18px rgba(212, 165, 116, 0.35);
}
.opening p { font-size: clamp(1.1rem, 2vw, 1.6rem); color: var(--sandstone); margin: 0; }

.dashboard-section {
  display: grid;
  grid-template-columns: 280px 1fr 1fr 200px;
  gap: 1.2rem;
  padding: 6rem 1.4rem;
  background: linear-gradient(180deg, var(--deep-felt), #210713 45%, var(--deep-felt));
}
.collection { min-height: 200vh; }
.instrument-panel,
.status-strip,
.puzzle-card,
.archive-card {
  background: linear-gradient(145deg, rgba(61, 12, 27, 0.96), rgba(42, 8, 21, 0.96));
  box-shadow: inset 0 1px 0 rgba(245, 230, 211, 0.08), 4px 8px 24px rgba(30, 5, 12, 0.6);
  border: 1px solid rgba(212, 165, 116, 0.12);
}
.instrument-panel {
  position: sticky;
  top: 1rem;
  height: calc(100vh - 2rem);
  padding: 1.2rem;
  transform: translateX(-120%) rotate(-2deg);
  animation: panelSlide 600ms ease forwards;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  align-items: center;
}
.panel-stamp,
.panel-note,
.progress-label,
footer {
  font-family: var(--mono);
  color: var(--burnished-copper);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.panel-note { margin-top: auto; writing-mode: vertical-rl; color: var(--aged-leather); }
.tool-icon { width: 70px; height: 70px; position: relative; border: 1px solid rgba(245, 230, 211, 0.1); }
.tool-icon i { position: absolute; display: block; background: var(--antique-cream); box-shadow: 4px 5px 0 var(--wine-shadow); }
.icon-puzzle i:nth-child(1) { width: 28px; height: 28px; left: 10px; top: 10px; }
.icon-puzzle i:nth-child(2) { width: 28px; height: 28px; right: 10px; top: 10px; clip-path: polygon(0 0, 100% 0, 100% 100%, 28% 100%, 28% 60%, 0 60%); }
.icon-puzzle i:nth-child(3) { width: 28px; height: 28px; left: 10px; bottom: 10px; clip-path: polygon(0 0, 60% 0, 60% 28%, 100% 28%, 100% 100%, 0 100%); }
.icon-puzzle i:nth-child(4) { width: 28px; height: 28px; right: 10px; bottom: 10px; }
.icon-key i:nth-child(1) { width: 32px; height: 24px; left: 9px; top: 22px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 24% 50%); }
.icon-key i:nth-child(2) { width: 30px; height: 10px; right: 8px; top: 29px; }
.icon-key i:nth-child(3) { width: 10px; height: 18px; right: 10px; top: 38px; }
.icon-gear i { width: 18px; height: 18px; left: 26px; top: 26px; }
.icon-gear i:nth-child(2) { transform: translateY(-23px); }
.icon-gear i:nth-child(3) { transform: translateY(23px); }
.icon-gear i:nth-child(4) { transform: translateX(-23px); }
.icon-gear i:nth-child(5) { transform: translateX(23px); }
.icon-gear i:nth-child(6) { transform: rotate(45deg) scale(1.5); background: transparent; border: 8px solid var(--antique-cream); }
.icon-tangram i { clip-path: polygon(0 0, 100% 50%, 0 100%); }
.icon-tangram i:nth-child(1) { width: 38px; height: 38px; left: 9px; top: 8px; }
.icon-tangram i:nth-child(2) { width: 32px; height: 32px; right: 8px; bottom: 10px; transform: rotate(90deg); }
.icon-tangram i:nth-child(3) { width: 22px; height: 42px; left: 24px; bottom: 12px; transform: skewX(-18deg); }

.workspace { grid-column: 2 / 4; }
.collection-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-content: start; }
.puzzle-card {
  min-height: 540px;
  padding: 1.1rem;
  position: relative;
  transform: perspective(1200px) rotateX(15deg) rotateY(-10deg) translateY(80px);
  opacity: 0;
  transition: transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 700ms ease, filter 400ms ease;
  overflow: hidden;
  cursor: pointer;
}
.puzzle-card.visible { opacity: 1; transform: perspective(1200px) rotateX(2deg) rotateY(-3deg); }
.puzzle-card:hover { transform: perspective(1200px) rotateX(2deg) rotateY(0deg) translateY(-8px); }
.puzzle-card::before,
.archive-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  border-top: 22px solid var(--burnished-copper);
  border-right: 22px solid transparent;
  opacity: 0.72;
}
.puzzle-card::after,
.archive-card::after { content: ""; position: absolute; inset: 0; opacity: 0.04; transition: opacity 300ms ease; }
.puzzle-card:hover::after,
.archive-card:hover::after { opacity: 0.08; }
.puzzle-card h2 {
  font-family: var(--display);
  font-size: clamp(2.4rem, 5.5vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0.4rem 0 0.6rem;
  color: var(--antique-cream);
}
.puzzle-card p { font-size: clamp(0.95rem, 1.1vw, 1.15rem); line-height: 1.65; margin: 0 0 1rem; }
.puzzle-card.expanded { grid-column: 1 / -1; min-height: 720px; z-index: 10; transform: perspective(1200px) rotateX(1deg) rotateY(0deg) scale(1.015); }
.collection-grid.has-expanded .puzzle-card:not(.expanded) { opacity: 0.2; filter: saturate(0.6); }
.puzzle-card .detail { color: var(--burnished-copper); margin-top: 1rem; }

.object { height: 58%; min-height: 275px; position: relative; transform: perspective(900px) rotateX(8deg) rotateY(-12deg); }
.object-slide { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.45rem; padding: 2rem; }
.object-slide span { background: linear-gradient(145deg, #4d1023, #2a0815); box-shadow: inset 0 1px 0 rgba(245,230,211,0.11), 8px 10px 0 rgba(13,3,8,0.35); }
.object-slide span:nth-child(15) { opacity: 0; }
.object-tangram span,
.animated-tangram i { position: absolute; background: linear-gradient(145deg, var(--burnished-copper), var(--blood-highlight)); box-shadow: inset 0 1px 0 rgba(245,230,211,0.18), 9px 12px 0 rgba(13,3,8,0.35); }
.object-tangram span:nth-child(1) { width: 44%; height: 42%; left: 12%; top: 14%; clip-path: polygon(0 0, 100% 0, 0 100%); }
.object-tangram span:nth-child(2) { width: 38%; height: 46%; left: 41%; top: 12%; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.object-tangram span:nth-child(3) { width: 28%; height: 28%; left: 34%; top: 42%; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.object-tangram span:nth-child(4) { width: 24%; height: 34%; left: 18%; top: 57%; clip-path: polygon(0 0, 100% 25%, 70% 100%, 0 80%); }
.object-tangram span:nth-child(5) { width: 20%; height: 20%; left: 58%; top: 58%; transform: rotate(45deg); }
.object-tangram span:nth-child(6) { width: 24%; height: 24%; left: 69%; top: 34%; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.object-tangram span:nth-child(7) { width: 18%; height: 38%; left: 46%; top: 62%; transform: skewY(-30deg); }
.object-cipher { border: 14px solid var(--burnished-copper); margin: 2.4rem auto; width: 270px; height: 270px; min-height: auto; box-shadow: inset 0 0 0 18px var(--burgundy-core), inset 0 0 0 32px var(--aged-leather), 18px 22px 0 rgba(13,3,8,0.35); border-radius: 50%; animation: cipherTurn 22s linear infinite; }
.object-cipher span { position: absolute; left: 50%; top: 50%; font-family: var(--mono); color: var(--antique-cream); transform-origin: 0 0; }
.object-cipher span:nth-child(1) { transform: rotate(10deg) translate(105px); }
.object-cipher span:nth-child(2) { transform: rotate(74deg) translate(105px); }
.object-cipher span:nth-child(3) { transform: rotate(136deg) translate(105px); }
.object-cipher span:nth-child(4) { transform: rotate(198deg) translate(105px); }
.object-cipher span:nth-child(5) { transform: rotate(260deg) translate(105px); }
.object-cipher span:nth-child(6) { transform: rotate(318deg) translate(105px); }
.object-burr span { position: absolute; width: 70%; height: 34px; left: 15%; top: 48%; background: linear-gradient(90deg, var(--aged-leather), var(--burnished-copper), var(--wine-shadow)); box-shadow: inset 0 2px 0 rgba(245,230,211,0.16), 10px 14px 0 rgba(13,3,8,0.35); }
.object-burr span:nth-child(2) { transform: rotate(90deg); }
.object-burr span:nth-child(3) { transform: rotate(45deg) translateY(-54px); }
.object-burr span:nth-child(4) { transform: rotate(-45deg) translateY(54px); }
.object-burr span:nth-child(5) { transform: rotate(0deg) translateY(-72px); }
.object-burr span:nth-child(6) { transform: rotate(90deg) translateY(-72px); }

.status-strip { position: sticky; top: 1rem; height: calc(100vh - 2rem); padding: 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; transform: rotate(2deg); }
.progress-label { writing-mode: vertical-rl; }
.segments { display: flex; flex-direction: column-reverse; gap: 0.45rem; }
.segments span { width: 38px; height: 12px; background: var(--wine-shadow); border: 1px solid rgba(212, 165, 116, 0.18); transition: background 220ms ease, box-shadow 220ms ease; }
.segments span.filled,
.segments.ghost span:nth-child(-n+4) { background: var(--burnished-copper); box-shadow: 0 0 12px rgba(212, 165, 116, 0.34); }

.method { min-height: 100vh; background: var(--burgundy-core); display: grid; grid-template-columns: 1fr 1fr; place-items: center; padding: 6rem; overflow: hidden; }
.chevron { position: absolute; inset: 0 0 auto; height: 20vh; background: var(--deep-felt); clip-path: polygon(0 0, 100% 0, 100% 42%, 52% 100%, 0 34%); box-shadow: 0 1px 0 rgba(168,34,58,0.3); }
.method-copy { max-width: 38ch; transform: translateY(60px) rotate(-3deg); opacity: 0; transition: transform 700ms ease, opacity 700ms ease; }
.method-copy.visible { opacity: 1; transform: rotate(-2deg); }
.method-copy span { font-family: var(--mono); color: var(--burnished-copper); font-size: 0.75rem; letter-spacing: 0.08em; }
.method-copy p { font-size: clamp(1.2rem, 2vw, 1.8rem); line-height: 1.65; color: var(--antique-cream); }
.animated-tangram { width: min(420px, 80vw); height: 420px; position: relative; transform: perspective(1000px) rotateX(8deg) rotateY(-12deg); }
.animated-tangram i { animation: assemble 8s ease-in-out infinite; }
.animated-tangram i:nth-child(1) { width: 190px; height: 190px; left: 20px; top: 36px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.animated-tangram i:nth-child(2) { width: 170px; height: 170px; right: 38px; top: 38px; clip-path: polygon(100% 0, 100% 100%, 0 100%); animation-delay: .2s; }
.animated-tangram i:nth-child(3) { width: 112px; height: 112px; left: 150px; top: 168px; clip-path: polygon(50% 0, 100% 100%, 0 100%); animation-delay: .4s; }
.animated-tangram i:nth-child(4) { width: 100px; height: 135px; left: 60px; bottom: 52px; clip-path: polygon(0 0, 100% 25%, 70% 100%, 0 80%); animation-delay: .6s; }
.animated-tangram i:nth-child(5) { width: 85px; height: 85px; left: 225px; bottom: 92px; transform: rotate(45deg); animation-delay: .8s; }
.animated-tangram i:nth-child(6) { width: 120px; height: 120px; right: 30px; bottom: 84px; clip-path: polygon(0 0, 100% 50%, 0 100%); animation-delay: 1s; }
.animated-tangram i:nth-child(7) { width: 80px; height: 150px; left: 168px; bottom: 24px; transform: skewY(-30deg); animation-delay: 1.2s; }

.archive { min-height: 150vh; background: linear-gradient(180deg, var(--deep-felt), var(--wine-shadow)); }
.archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; align-content: start; }
.archive-card { min-height: 315px; padding: 1rem; position: relative; transform: perspective(1200px) rotateX(14deg) rotateY(-12deg) translateY(70px); opacity: 0; transition: transform 260ms ease, opacity 700ms ease; overflow: hidden; }
.archive-card.visible { opacity: 1; transform: perspective(1200px) rotateX(4deg) rotateY(-5deg); }
.archive-card h3 { font-family: var(--display); color: var(--antique-cream); font-size: 2rem; margin: .7rem 0 .25rem; }
.archive-card p { opacity: 0; transform: translateY(14px); transition: opacity 260ms ease, transform 260ms ease; }
.archive-card:hover p { opacity: 1; transform: none; }
.mini { height: 170px; background: linear-gradient(135deg, var(--aged-leather), var(--blood-highlight)); clip-path: polygon(10% 0, 90% 12%, 76% 100%, 0 76%); box-shadow: inset 0 2px 0 rgba(245,230,211,0.15), 12px 14px 0 rgba(13,3,8,0.35); }
.mini-b { clip-path: polygon(0 0, 100% 0, 76% 38%, 100% 100%, 0 82%, 22% 42%); }
.mini-c { clip-path: polygon(20% 0, 68% 0, 68% 38%, 100% 38%, 100% 62%, 68% 62%, 68% 100%, 20% 100%, 20% 62%, 0 62%, 0 38%, 20% 38%); }
.mini-d { clip-path: polygon(0 0, 100% 0, 100% 24%, 24% 24%, 24% 44%, 82% 44%, 82% 100%, 0 100%); }
.mini-e { clip-path: polygon(0 10%, 90% 0, 100% 100%, 12% 88%); }
.mini-f { clip-path: polygon(30% 0, 70% 0, 70% 30%, 100% 30%, 100% 70%, 70% 70%, 70% 100%, 30% 100%, 30% 70%, 0 70%, 0 30%, 30% 30%); }

.closing { display: grid; place-items: center; background: var(--night); overflow: hidden; }
.closing-inner { animation: slowZoom 30s ease forwards; }
.closing h2 { font-family: var(--display); font-size: clamp(2.4rem, 5.5vw, 5rem); color: var(--antique-cream); letter-spacing: -0.02em; opacity: 0; animation: closingFade 2s ease forwards; }
.closing p { font-family: var(--mono); color: var(--burnished-copper); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }

@keyframes letterOpen { to { opacity: 1; transform: translateY(0); } }
@keyframes drawLine { to { transform: scaleX(1); } }
@keyframes roomBreath { from { transform: rotate(-0.5deg) scale(1.01); } to { transform: rotate(0.5deg) scale(1.01); } }
@keyframes grainPulse { 50% { opacity: 0.075; } }
@keyframes panelSlide { to { transform: translateX(0) rotate(-2deg); } }
@keyframes cipherTurn { to { transform: perspective(900px) rotateX(8deg) rotateY(-12deg) rotate(360deg); } }
@keyframes assemble { 0%,100% { filter: hue-rotate(0deg); } 45% { transform: translate(20px, -12px) rotate(8deg); } 70% { transform: translate(-16px, 18px) rotate(-14deg); } }
@keyframes closingFade { to { opacity: 1; } }
@keyframes slowZoom { to { transform: scale(1.02); } }

@media (max-width: 1024px) {
  .dashboard-section { grid-template-columns: 1fr 1fr; padding-top: 5.5rem; }
  .instrument-panel { position: fixed; top: 0; left: 0; right: 0; z-index: 20; width: 100%; height: 48px; flex-direction: row; transform: translateY(-100%); animation: toolbarSlide 600ms ease forwards; padding: .25rem .8rem; }
  .tool-icon { width: 38px; height: 38px; transform: scale(.55); }
  .panel-note { writing-mode: initial; margin-left: auto; margin-top: 0; }
  .workspace { grid-column: 1 / 3; }
  .status-strip { display: none; }
  .method { grid-template-columns: 1fr; padding: 5rem 2rem; }
  @keyframes toolbarSlide { to { transform: translateY(0); } }
}

@media (max-width: 640px) {
  .collection-grid,
  .archive-grid { grid-template-columns: 1fr; }
  .dashboard-section { display: block; padding: 5rem 1rem; }
  .puzzle-card { min-height: 500px; }
  .puzzle-card:nth-child(odd).visible,
  .archive-card:nth-child(odd).visible { transform: perspective(1200px) rotateX(2deg) rotateY(-2deg) rotateZ(-1deg); }
  .puzzle-card:nth-child(even).visible,
  .archive-card:nth-child(even).visible { transform: perspective(1200px) rotateX(2deg) rotateY(2deg) rotateZ(1deg); }
  .object-cipher { width: 220px; height: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .brand-title span, .reveal, .puzzle-card, .archive-card, .method-copy, .closing h2 { opacity: 1; transform: none; }
}