:root {
  --palazzo: #F5E7CB;
  --burgundy: #631B2E;
  --rose: #B86A73;
  --oxblood: #3A0D18;
  --alabaster: #FFF7E8;
  --brass: #C89B3C;
  --graphite: #211A17;
  --display: "Fredoka", "Arial Rounded MT Bold", system-ui, sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --condensed: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
}

/* DESIGN FONT TRACE: IBM Plex Sans Condensed** Condensedd for margin notes */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--palazzo); }
body { margin: 0; min-height: 100vh; overflow-x: hidden; color: var(--graphite); font-family: var(--condensed); background: var(--palazzo); }

body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .72;
  background:
    radial-gradient(circle at 18% 14%, rgba(255,247,232,.9) 0 11%, transparent 29%),
    radial-gradient(circle at 82% 18%, rgba(184,106,115,.18), transparent 28%),
    radial-gradient(circle at 48% 86%, rgba(99,27,46,.12), transparent 30%),
    linear-gradient(115deg, var(--alabaster), var(--palazzo) 44%, #ead2ae 100%);
}

body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: .42; mix-blend-mode: multiply;
  background-image:
    radial-gradient(ellipse at 7% 20%, transparent 0 25%, rgba(99,27,46,.25) 26% 26.7%, transparent 28%),
    radial-gradient(ellipse at 77% 34%, transparent 0 20%, rgba(184,106,115,.24) 21% 21.6%, transparent 23%),
    linear-gradient(72deg, transparent 0 34%, rgba(184,106,115,.22) 34.2%, transparent 35%),
    repeating-linear-gradient(92deg, transparent 0 82px, rgba(33,26,23,.05) 83px 84px);
}

@keyframes grainDrift { 0%,100% { background-position: 0 0, 0 0; } 50% { background-position: 38px -22px, -24px 18px; } }
@keyframes brassPulse { 0%,100% { filter: drop-shadow(0 0 0 rgba(200,155,60,0)); } 50% { filter: drop-shadow(0 0 14px rgba(200,155,60,.75)); } }
@keyframes sealSet { 0% { transform: scale(1.22) rotate(-17deg); } 70% { transform: scale(.96) rotate(2deg); } 100% { transform: scale(1) rotate(0); } }

.atelier { position: relative; z-index: 2; }
.atelier::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .19; background-image: radial-gradient(circle, rgba(33,26,23,.36) 0 1px, transparent 1.5px), radial-gradient(circle, rgba(255,247,232,.8) 0 1px, transparent 1.4px); background-size: 47px 53px, 61px 58px; animation: grainDrift 18s ease-in-out infinite; }

.route-map { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; overflow: visible; }
.route { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.graphite { stroke: rgba(33,26,23,.24); stroke-width: 3; stroke-dasharray: 8 18; }
.burgundy { stroke: var(--burgundy); stroke-width: 8; stroke-dasharray: var(--route-length, 1); stroke-dashoffset: var(--route-offset, 1); }
.brass { stroke: var(--brass); stroke-width: 2; stroke-dasharray: 22 34; stroke-dashoffset: var(--brass-offset, 1); opacity: .9; animation: brassPulse 5s ease-in-out infinite; }

.plate { position: relative; min-height: 112vh; padding: clamp(3rem, 7vw, 7rem); display: grid; grid-template-columns: repeat(14, 1fr); column-gap: clamp(.6rem, 1.1vw, 1.2rem); align-items: center; }
.sticky-slab { position: sticky; top: 6vh; }
.marble-field, .editorial-copy, .diagram-sheet, .inlay-text, .velvet-panel, .seal-slab {
  border: 1px solid rgba(99,27,46,.22); box-shadow: 1.2vw 1.5vw 0 rgba(58,13,24,.14), inset 0 0 42px rgba(255,247,232,.72); overflow: hidden;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,247,232,.92), transparent 26%),
    radial-gradient(ellipse at 78% 72%, rgba(184,106,115,.15), transparent 34%),
    linear-gradient(126deg, rgba(255,247,232,.9), rgba(245,231,203,.86));
}
.marble-field::before, .editorial-copy::before, .diagram-sheet::before, .inlay-text::before, .velvet-panel::before, .seal-slab::before { content: ""; position: absolute; inset: 0; opacity: .48; pointer-events: none; background: linear-gradient(111deg, transparent 0 28%, rgba(184,106,115,.33) 28.2%, transparent 29.4% 62%, rgba(99,27,46,.24) 62.3%, transparent 63.5%), radial-gradient(ellipse at 30% 80%, transparent 0 35%, rgba(184,106,115,.24) 35.6%, transparent 37%); }

.label { margin: 0 0 1.2rem; font: 700 clamp(.78rem, 1vw, 1rem)/1 var(--condensed); letter-spacing: .18em; color: var(--brass); text-transform: uppercase; }
h1, h2 { margin: 0; font-family: var(--display); color: var(--burgundy); letter-spacing: -.045em; line-height: .82; }
h2 { font-size: clamp(4rem, 9.5vw, 10rem); }
blockquote { margin: 2rem 0 0; font: 900 italic clamp(2.2rem, 4.4vw, 5rem)/.9 var(--serif); color: var(--oxblood); }

.hero-plate { min-height: 132vh; padding-top: 4vh; align-items: start; }
.hero-slab { grid-column: 1 / -1; height: 86vh; padding: clamp(1.2rem, 3vw, 3rem); }
.wordmark { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: .02em; margin-top: 4vh; font-size: clamp(5.5rem, 16.4vw, 19rem); color: var(--burgundy); text-shadow: .8vw 1vw 0 rgba(58,13,24,.08); transform: translateY(var(--word-lift, 0)); }
.wordmark span { display: inline-block; padding: 0 .01em; clip-path: polygon(0 0, 92% 0, 100% 54%, 91% 100%, 0 100%); background: linear-gradient(132deg, var(--burgundy), var(--oxblood)); color: transparent; -webkit-background-clip: text; background-clip: text; }
.wordmark span:nth-child(3) { transform: translateY(var(--zz-step, 0)) skewY(-3deg); }
.wordmark small { display: block; width: 100%; margin-left: .04em; font-size: .32em; letter-spacing: -.02em; color: var(--oxblood); }
.word-cut { position: absolute; left: 3vw; right: 3vw; top: 23vh; width: 94%; height: 36vh; z-index: 3; overflow: visible; }
.word-cut path { fill: none; stroke: var(--rose); stroke-width: 11; stroke-linecap: round; stroke-dasharray: var(--word-length, 1); stroke-dashoffset: var(--word-offset, 1); }
.word-cut circle { fill: var(--brass); opacity: var(--node-opacity, .2); }
.twin-columns { position: absolute; left: 8%; bottom: 16%; display: flex; gap: 1.1rem; opacity: .55; }
.twin-columns i { width: clamp(2.2rem, 4vw, 4rem); height: 23vh; border-radius: 999px 999px 7px 7px; background: linear-gradient(90deg, rgba(255,247,232,.82), rgba(184,106,115,.33), rgba(255,247,232,.74)); border: 2px solid rgba(99,27,46,.18); }
.hero-note { position: absolute; right: 6%; bottom: 12%; max-width: 18em; color: var(--graphite); }
.caption, .proof-note { font: 600 clamp(.95rem, 1.3vw, 1.2rem)/1.1 var(--condensed); letter-spacing: .08em; text-transform: uppercase; color: var(--rose); }
.hero-caption { position: absolute; left: 28%; bottom: 8%; }

.velvet-sidebar { grid-column: 1 / 3; min-height: 78vh; padding: 2rem 1rem; background: var(--burgundy); color: var(--alabaster); display: flex; flex-direction: column; justify-content: space-between; box-shadow: .8vw 1vw 0 rgba(58,13,24,.16); }
.velvet-sidebar span { writing-mode: vertical-rl; font: 700 1.1rem var(--condensed); letter-spacing: .3em; text-transform: uppercase; }
.velvet-sidebar b { font: 700 clamp(5rem, 10vw, 9rem)/.8 var(--display); color: var(--brass); }
.editorial-copy { position: relative; grid-column: 4 / 11; padding: clamp(2rem, 4vw, 4rem); transform: rotate(-1.4deg); }
.stone-chip { position: absolute; grid-column: 11 / 15; right: 8vw; top: 28vh; width: clamp(11rem, 21vw, 24rem); height: clamp(11rem, 21vw, 24rem); display: grid; place-items: center; clip-path: polygon(0 0, 70% 0, 70% 22%, 100% 22%, 100% 72%, 71% 72%, 71% 100%, 0 100%); background: linear-gradient(135deg, var(--alabaster), #e8caa6); box-shadow: 1vw 1.2vw 0 rgba(58,13,24,.16); transform: translateY(var(--chip-y, 0)) rotate(8deg); }
.stone-chip span { font: 700 10rem/.7 var(--display); color: var(--burgundy); }
.note-a { position: absolute; right: 6vw; bottom: 13vh; max-width: 22rem; }
.ornament { position: absolute; left: 4vw; bottom: 8vh; width: 18vw; height: 18vw; border: 5px double rgba(200,155,60,.75); border-radius: 50%; opacity: .45; }
.ornament::before { content: ""; position: absolute; inset: 18%; border: 2px solid var(--rose); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

.cutline-spread { align-items: start; }
.diagram-sheet { position: relative; grid-column: 2 / 10; min-height: 78vh; padding: clamp(2rem, 4vw, 4rem); transform: rotate(1.2deg); }
.puzzle-diagram { width: min(100%, 760px); margin-top: 2rem; overflow: visible; }
.socket { fill: rgba(255,247,232,.45); stroke: var(--graphite); stroke-width: 4; stroke-dasharray: 14 10; }
.moving-piece { fill: rgba(99,27,46,.9); stroke: var(--brass); stroke-width: 3; transform-origin: center; transform: translate(var(--piece-x, -34px), var(--piece-y, 24px)) rotate(var(--piece-r, -8deg)); transition: transform .2s linear; }
.diagram-cut { fill: none; stroke: var(--rose); stroke-width: 8; stroke-linecap: round; stroke-dasharray: var(--diagram-length, 1); stroke-dashoffset: var(--diagram-offset, 1); }
.annotation-column { grid-column: 11 / 15; padding-top: 12vh; }
.annotation-column p { color: var(--oxblood); }
.annotation-column span { display: block; margin-top: 2rem; padding: 1rem; border: 1px solid var(--brass); font: 700 1rem var(--condensed); letter-spacing: .13em; color: var(--burgundy); text-transform: uppercase; background: rgba(255,247,232,.54); }
.brass-ruler { position: absolute; right: 5vw; bottom: 11vh; width: 46vw; height: 3.3rem; border: 2px solid var(--brass); transform: rotate(-7deg); background: repeating-linear-gradient(90deg, var(--brass) 0 2px, transparent 2px 20px), rgba(255,247,232,.38); box-shadow: .7vw .9vw 0 rgba(58,13,24,.12); }

.inlay-text { position: relative; grid-column: 8 / 14; padding: clamp(2rem, 4vw, 4rem); z-index: 2; }
.inlay-board { grid-column: 1 / 8; display: grid; grid-template-columns: repeat(3, minmax(90px, 1fr)); gap: clamp(.8rem, 1.6vw, 1.6rem); transform: rotate(-2deg); }
.inlay-piece { min-height: clamp(8rem, 16vw, 16rem); display: grid; place-items: center; font: 700 clamp(5rem, 12vw, 12rem)/.8 var(--display); color: var(--alabaster); background: linear-gradient(135deg, var(--burgundy), var(--oxblood)); box-shadow: .8vw 1vw 0 rgba(58,13,24,.15), inset 0 0 0 2px rgba(200,155,60,.34); clip-path: polygon(8% 0, 78% 0, 78% 20%, 100% 20%, 100% 82%, 75% 82%, 75% 100%, 8% 100%, 8% 74%, 0 74%, 0 24%, 8% 24%); transform: translateY(var(--inlay-y, 30px)); opacity: var(--inlay-opacity, .62); }
.p2, .p5 { background: linear-gradient(135deg, var(--rose), var(--burgundy)); }
.p4, .p5 { transform: translateY(var(--inlay-y, 30px)) skewY(-5deg); }
.note-b { position: absolute; left: 8vw; bottom: 8vh; max-width: 26rem; color: var(--burgundy); }

.assembly-spread { min-height: 118vh; }
.velvet-panel { position: relative; grid-column: 2 / 9; padding: clamp(2rem, 4vw, 4rem); background: linear-gradient(135deg, var(--burgundy), var(--oxblood)); color: var(--alabaster); box-shadow: 1.2vw 1.5vw 0 rgba(33,26,23,.18); }
.velvet-panel h2, .velvet-panel p { color: var(--alabaster); }
.registration-grid { grid-column: 10 / 15; min-height: 68vh; display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; transform: rotate(2deg); }
.registration-grid i { background: rgba(255,247,232,.62); border: 1px solid rgba(99,27,46,.24); position: relative; box-shadow: .5vw .7vw 0 rgba(58,13,24,.12); }
.registration-grid i::before, .registration-grid i::after { content: ""; position: absolute; background: var(--brass); left: 50%; top: 50%; transform: translate(-50%, -50%); }
.registration-grid i::before { width: 52%; height: 2px; } .registration-grid i::after { width: 2px; height: 52%; }
.pull-quote { position: absolute; right: 8vw; bottom: 10vh; max-width: 9em; font: 700 clamp(3rem, 6vw, 7rem)/.82 var(--display); color: var(--burgundy); transform: rotate(-5deg); }

.seal-spread { min-height: 112vh; place-items: center; }
.seal-slab { position: relative; grid-column: 3 / 13; min-height: 82vh; padding: clamp(2rem, 5vw, 5rem); text-align: center; display: grid; justify-items: center; align-content: center; }
.maker-seal { width: clamp(13rem, 24vw, 25rem); height: clamp(13rem, 24vw, 25rem); margin: 2rem 0; border: 7px double var(--burgundy); border-radius: 50%; display: grid; place-items: center; color: var(--burgundy); background: radial-gradient(circle, rgba(255,247,232,.9), rgba(200,155,60,.2)); box-shadow: 0 0 0 1.2rem rgba(184,106,115,.12), .9vw 1.1vw 0 rgba(58,13,24,.13); transform: scale(var(--seal-scale, .86)) rotate(var(--seal-rot, -14deg)); opacity: var(--seal-opacity, .45); }
.maker-seal.locked { animation: sealSet .7s cubic-bezier(.2,.7,.1,1) both; }
.maker-seal span { font: 700 clamp(5rem, 12vw, 12rem)/.7 var(--display); }
.maker-seal small { position: absolute; bottom: 18%; font: 700 .95rem var(--condensed); letter-spacing: .22em; text-transform: uppercase; }
.seal-slab p { max-width: 23em; }
.library-label { display: inline-block; margin-top: 1rem; padding: .95rem 1.4rem; border: 2px solid var(--brass); background: rgba(255,247,232,.54); color: var(--oxblood); text-decoration: none; font: 700 1rem var(--condensed); letter-spacing: .16em; text-transform: uppercase; }

@media (max-width: 820px) {
  .plate { display: block; padding: 2rem 1rem; min-height: 110vh; }
  .sticky-slab { position: relative; top: auto; }
  .hero-slab, .editorial-copy, .diagram-sheet, .inlay-text, .velvet-panel, .seal-slab { width: 100%; min-height: auto; padding: 1.4rem; }
  .wordmark { font-size: 25vw; }
  .word-cut { top: 18vh; }
  .hero-note { position: relative; right: auto; bottom: auto; margin-top: 2rem; }
  .velvet-sidebar { min-height: 8rem; margin-bottom: 1rem; }
  .velvet-sidebar span { writing-mode: horizontal-tb; }
  .stone-chip, .note-a, .note-b, .brass-ruler, .pull-quote { position: relative; inset: auto; margin: 1.5rem 0; }
  .inlay-board { grid-template-columns: repeat(2, 1fr); margin-bottom: 1rem; }
  .annotation-column { padding-top: 1rem; }
  .registration-grid { min-height: 36vh; margin-top: 1rem; }
}