:root {
  --ink: #191714;
  --ink-soft: #28241e;
  --oak: #4a3826;
  --oak-dark: #2b2118;
  --lead: #7d8087;
  --lead-light: #adb0b3;
  --kraft: #c9aa78;
  --paper: #e5d6b7;
  --paper-light: #f0e6d0;
  --red: #a62d24;
  --brass: #c39b52;
  --display: 'Young Serif', Georgia, serif;
  --body: 'Zilla Slab', Georgia, serif;
  --mono: 'Space Mono', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; color: var(--paper); background: var(--ink); font-family: var(--body); font-size: 18px; line-height: 1.5; overflow-x: hidden; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
::selection { background: var(--red); color: var(--paper-light); }
:focus-visible { outline: 3px solid #f0bd61; outline-offset: 4px; }

.skip-link { position: fixed; z-index: 999; top: 10px; left: 10px; padding: 12px 16px; color: var(--ink); background: var(--paper-light); transform: translateY(-160%); font: 700 12px/1 var(--mono); text-transform: uppercase; }
.skip-link:focus { transform: none; }
.shop-grain { position: fixed; z-index: 40; inset: 0; pointer-events: none; opacity: .09; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }

.shop-header { position: absolute; z-index: 30; top: 0; left: 0; right: 0; min-height: 94px; display: grid; grid-template-columns: 220px 1fr auto; align-items: center; gap: 30px; padding: 20px clamp(24px, 4.4vw, 72px); border-bottom: 1px solid rgba(195,155,82,.35); }
.maker-mark { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.mark-tcr { position: relative; display: flex; justify-content: space-between; width: 55px; padding: 4px 5px; border: 1px solid var(--brass); color: var(--brass); font: 400 16px/1 var(--display); }
.mark-tcr span { color: var(--red); }
.mark-copy { color: #d8c6a5; font: 700 8px/1.45 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.shop-header nav { display: flex; justify-content: center; gap: clamp(20px, 4vw, 60px); }
.shop-header nav a { padding: 12px 0; color: #c7b899; font: 700 10px/1 var(--mono); letter-spacing: .14em; text-decoration: none; text-transform: uppercase; border-bottom: 1px solid transparent; }
.shop-header nav a:hover { color: var(--paper-light); border-color: var(--red); }
.open-sign { display: flex; align-items: center; gap: 9px; color: var(--lead-light); font: 700 9px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.open-sign span { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(166,45,36,.16); }

.hero { position: relative; isolation: isolate; min-height: 900px; height: 100vh; max-height: 1080px; padding: 160px clamp(24px, 6.8vw, 110px) 70px; overflow: hidden; background: radial-gradient(circle at 74% 48%, rgba(126,95,50,.19), transparent 27%), linear-gradient(106deg, #1b1814 0 55%, #241d16 55% 100%); }
.hero::before { content: ''; position: absolute; z-index: -1; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 51px, rgba(255,255,255,.012) 52px), linear-gradient(180deg, transparent 70%, rgba(0,0,0,.35)); }
.hero-kicker { position: absolute; top: 145px; left: 8%; color: var(--brass); font: 700 10px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; }
.hero-title { position: relative; z-index: 2; width: min(900px, 76vw); margin: 70px 0 0; color: var(--paper-light); font-family: var(--display); font-weight: 400; line-height: .78; letter-spacing: -.055em; }
.hero-title span { display: block; }
.hero-title .the { margin-left: 4px; color: var(--red); font: italic 400 clamp(42px, 5vw, 74px)/1 var(--body); letter-spacing: -.03em; transform: rotate(-5deg); transform-origin: left; }
.hero-title .composing { font-size: clamp(92px, 13.2vw, 210px); }
.hero-title .room { margin-left: 23%; color: var(--kraft); font-size: clamp(105px, 15vw, 235px); }
.hero-deck { position: absolute; z-index: 3; left: 10%; bottom: 122px; max-width: 390px; margin: 0; color: #c9bea9; font-size: 21px; font-style: italic; line-height: 1.2; }
.hero-deck::before { content: ''; display: block; width: 82px; height: 3px; margin-bottom: 18px; background: var(--red); }
.hero-case { position: absolute; z-index: 1; top: 19%; right: -3%; width: clamp(390px, 35vw, 540px); padding: 18px; border: 9px solid #3b2b1d; background: #5b422b; box-shadow: -28px 38px 60px rgba(0,0,0,.46), inset 0 0 0 2px #765839, inset 0 0 28px rgba(0,0,0,.8); transform: rotate(4deg); }
.case-handle { margin: -34px auto 14px; width: 190px; padding: 7px; border: 1px solid #9c793f; background: #302519; color: #c59c55; text-align: center; font: 700 8px/1 var(--mono); letter-spacing: .1em; }
.mini-cells { display: grid; grid-template-columns: repeat(8, 1fr); grid-auto-rows: 78px; gap: 6px; }
.mini-cells span { display: grid; place-items: center; border: 3px solid #36271b; color: #aca9a1; background: radial-gradient(circle at 45% 40%, #72767d, #4a4b4e 70%); box-shadow: inset 4px 5px 10px rgba(0,0,0,.8); font: 400 34px/1 var(--display); text-shadow: -1px -1px #111; transform: scaleX(-1); }
.mini-cells .wide { grid-column: span 2; }
.mini-cells .tall { grid-row: span 2; }
.hero-ledger { position: absolute; top: 52%; right: 6%; z-index: 4; display: grid; width: 140px; padding: 15px; color: var(--ink); background: #d6bd8b; box-shadow: 8px 8px 0 rgba(0,0,0,.25); transform: rotate(-7deg); }
.hero-ledger span { font: 700 9px/1 var(--mono); text-transform: uppercase; }
.hero-ledger strong { margin: 5px 0 16px; font: 400 23px/1 var(--display); }
.hero-ledger small { padding-top: 8px; border-top: 1px solid rgba(25,23,20,.4); font: 400 7px/1.5 var(--mono); text-transform: uppercase; }
.hero-rule { position: absolute; z-index: 3; right: 34%; top: 22%; bottom: 10%; width: 3px; background: linear-gradient(#5f4524, #e0b963 45%, #6e4e24); box-shadow: 1px 0 0 #21170d; transform: rotate(8deg); }
.down-ticket { position: absolute; right: 5%; bottom: 34px; z-index: 5; display: flex; align-items: center; gap: 18px; color: #b9a98b; font: 700 10px/1 var(--mono); letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
.down-ticket span { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--brass); color: var(--brass); }

.case-section { position: relative; padding: 110px clamp(20px, 4.4vw, 72px) 130px; color: var(--ink); background: var(--kraft); background-image: linear-gradient(90deg, rgba(84,58,31,.08) 1px, transparent 1px), linear-gradient(rgba(84,58,31,.06) 1px, transparent 1px); background-size: 33px 33px; }
.case-section::before { content: ''; position: absolute; inset: 0 0 auto; height: 12px; background: repeating-linear-gradient(90deg, var(--brass) 0 44px, #664a26 44px 46px); }
.section-head { position: relative; display: grid; grid-template-columns: 220px 1fr 90px; gap: 30px; align-items: end; padding-bottom: 24px; border-bottom: 4px double rgba(31,25,18,.65); }
.section-head p, .eyebrow { margin: 0; font: 700 9px/1.4 var(--mono); letter-spacing: .15em; text-transform: uppercase; }
.section-head h2 { margin: 0; font: 400 clamp(52px, 7vw, 102px)/.9 var(--display); letter-spacing: -.045em; }
.section-folio { text-align: right; font: 700 10px/1 var(--mono); }
.case-intro { display: grid; grid-template-columns: minmax(0, 2fr) minmax(250px, 1fr); gap: 9vw; margin: 36px 0 66px 18%; }
.case-intro p { max-width: 760px; margin: 0; font-size: clamp(20px, 2vw, 28px); line-height: 1.25; }
.case-intro em { color: #6e251e; }
.case-intro .case-note { padding-left: 22px; border-left: 2px solid var(--red); font: 400 14px/1.5 var(--mono); }
.composing-bench { position: relative; display: grid; grid-template-columns: minmax(520px, 1.25fr) minmax(360px, .75fr); gap: 32px; padding: 38px; background: linear-gradient(100deg, #34261a, #4a3623 60%, #2d2118); box-shadow: 0 22px 46px rgba(49,29,12,.35), inset 0 1px #7e5f3c; }
.jobcase-wrap { position: relative; grid-row: span 2; padding: 14px; border: 10px solid #67492c; background: #3c2a1b; box-shadow: inset 0 0 0 2px #1f160f, 12px 18px 30px rgba(0,0,0,.3); }
.case-plaque { display: flex; justify-content: space-between; align-items: center; margin: -34px 20% 14px; padding: 8px 12px; color: #d8b773; background: #2b2118; border: 1px solid #c09a56; font: 700 7px/1 var(--mono); letter-spacing: .08em; }
.case-plaque strong { font-size: 8px; }
.jobcase { display: grid; grid-template-rows: auto auto; gap: 8px; }
.case-half { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); grid-auto-flow: dense; gap: 4px; }
.case-half.uppercase { padding-bottom: 8px; border-bottom: 4px solid #25190f; }
.case-cell { position: relative; min-width: 0; height: 54px; padding: 0; border: 2px solid #271a10; color: #d5d3cb; background: radial-gradient(circle at 45% 34%, #73767a, #4e5053 63%, #343538); box-shadow: inset 3px 4px 7px rgba(0,0,0,.7), 0 1px #7d5e3a; cursor: pointer; transition: filter .15s, transform .15s; }
.case-cell span { display: block; font: 400 clamp(15px, 1.4vw, 23px)/1 var(--display); text-shadow: -1px -1px #151515; transform: scaleX(-1); }
.case-cell small { position: absolute; right: 3px; bottom: 2px; color: rgba(255,255,255,.35); font: 400 5px/1 var(--mono); }
.case-cell.wide { grid-column: span 2; }
.case-cell.xwide { grid-column: span 3; }
.case-cell.narrow { max-width: 45px; }
.case-cell:hover { z-index: 1; filter: brightness(1.25); transform: translateY(-2px); }
.case-cell:active { transform: translateY(2px); }
.case-cell.picked { animation: picked .32s ease; }
@keyframes picked { 50% { transform: translateY(-9px) rotate(-2deg); filter: brightness(1.5); } }
.case-lip { display: flex; align-items: center; gap: 12px; height: 28px; padding: 0 12px; color: #b69359; border: 1px solid #8d6a3e; border-top: 0; font: 700 6px/1 var(--mono); letter-spacing: .12em; }
.case-lip i { flex: 1; height: 2px; background: #a67e46; }
.galley { display: flex; min-width: 0; flex-direction: column; justify-content: center; }
.galley-label { display: flex; justify-content: space-between; margin-bottom: 10px; color: #bba983; font: 700 8px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.stick { min-height: 100px; padding: 16px 14px 10px; overflow: hidden; border: 6px solid #575a60; border-top-color: #95999e; border-bottom-color: #33353a; background: #1d1e20; box-shadow: inset 0 8px 16px #060606, 0 8px 16px rgba(0,0,0,.35); }
.type-line { display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; min-height: 59px; overflow: hidden; }
.metal-sort, .metal-space { flex: 0 0 auto; width: 25px; height: 58px; display: grid; place-items: center; margin-left: -1px; border: 1px solid #303134; color: #2b2c2f; background: linear-gradient(90deg, #6d7076, #aaaeb2 42%, #62656a); box-shadow: inset 1px 1px rgba(255,255,255,.3), 1px 0 #141518; font: 400 25px/1 var(--display); text-shadow: 0 1px #b9bcc0; transform: scaleX(-1); animation: dropSort .25s var(--drop) both; }
.metal-space { width: 14px; height: 42px; align-self: end; background: linear-gradient(90deg, #4b4d51, #86898d, #4b4d51); transform: none; }
@keyframes dropSort { from { opacity: 0; translate: 0 -20px; } }
.empty-stick { margin: auto; color: #77797d; font: 700 10px/1 var(--mono); letter-spacing: .15em; text-transform: uppercase; }
.bench-controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.utility-button, .proof-button { min-height: 46px; border: 1px solid #776749; color: #cabda4; background: #2a241d; font: 700 8px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; cursor: pointer; }
.utility-button:hover { color: white; background: #3c3227; }
.proof-button { position: relative; grid-column: 1 / -1; min-height: 62px; overflow: hidden; color: var(--paper-light); border-color: #cf4c41; background: var(--red); font-size: 11px; letter-spacing: .14em; box-shadow: 0 5px 0 #5f1b16; }
.proof-button i { position: absolute; right: 18px; top: 50%; width: 34px; height: 4px; background: #e3cba0; transform: rotate(-35deg); transform-origin: right; transition: transform .25s; }
.proof-button i::after { content: ''; position: absolute; right: -5px; top: -5px; width: 14px; height: 14px; border-radius: 50%; background: #d5b77c; }
.proof-button:hover i { transform: rotate(-10deg); }
.proof-button:active { translate: 0 4px; box-shadow: 0 1px 0 #5f1b16; }
.bench-whisper { min-height: 38px; margin: 16px 0 0; color: #a89b83; font-size: 13px; font-style: italic; }
.platen-stage { position: relative; min-height: 310px; overflow: hidden; border: 1px solid #282119; background: radial-gradient(circle at 45% 40%, #4b4031, #201a15 70%); }
.press-frame { position: absolute; inset: 0; }
.press-head { position: absolute; z-index: 2; top: 8px; left: 10%; right: 10%; padding: 11px; border: 5px solid #151719; color: #bca56f; background: linear-gradient(#45484b, #252729); box-shadow: inset 0 0 0 2px #606367, 0 8px 15px rgba(0,0,0,.5); text-align: center; font: 700 9px/1 var(--mono); letter-spacing: .14em; }
.press-bolt { position: absolute; z-index: 4; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #c2c4c6, #3e4144 70%); box-shadow: 0 2px 3px #000; }
.bolt-one { top: 18px; left: 13%; }.bolt-two { top: 18px; right: 13%; }
.platen { position: absolute; z-index: 3; left: 9%; right: 15%; top: 62px; height: 130px; border: 10px solid #33363a; background: #777a7e; box-shadow: inset 0 0 0 3px #a7a9aa, 0 18px 20px #000; transform-origin: top; transform: perspective(500px) rotateX(-55deg); }
.press-lever { position: absolute; z-index: 5; right: 9%; top: 55px; width: 8px; height: 190px; border-radius: 4px; background: linear-gradient(90deg,#5f492c,#d0a968,#654a27); transform: rotate(-14deg); transform-origin: bottom; }
.press-lever::after { content: ''; position: absolute; top: -11px; left: -8px; width: 24px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d5b16e, #5d4222); }
.proof-sheet { position: absolute; z-index: 2; inset: 72px 24px 16px; display: flex; flex-direction: column; justify-content: center; padding: 28px; color: var(--ink); background: #e8dabd; box-shadow: 0 10px 20px rgba(0,0,0,.4); transform: translateY(78%); transition: transform .7s cubic-bezier(.16,.8,.28,1); }
.proof-pin { position: absolute; top: 10px; right: -7px; padding: 4px 9px; color: var(--paper-light); background: var(--red); font: 700 7px/1 var(--mono); letter-spacing: .1em; transform: rotate(5deg); }
.proof-shop, .proof-meta { margin: 0; font: 700 6px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.printed-line { display: flex; align-items: baseline; min-height: 72px; margin: 13px 0 9px; overflow-wrap: anywhere; color: #171411; font: 400 clamp(22px, 2.4vw, 37px)/1 var(--display); letter-spacing: -.025em; text-shadow: .5px .7px 0 rgba(255,255,255,.5), -.5px -.7px 0 rgba(59,31,15,.22); }
.printed-line span { display: inline-block; transform: scaleX(var(--squash)); }
.printed-line .ink-space { width: .34em; flex: 0 0 .34em; }
.printed-line .worn { opacity: .72; filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='w'%3E%3CfeTurbulence baseFrequency='.08' numOctaves='2' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='1.6'/%3E%3C/filter%3E%3C/svg%3E%23w"); }
.platen-stage.printing .press-lever { animation: pullLever 1s ease-in-out; }
.platen-stage.printing .platen { animation: closePlaten 1s ease-in-out; }
.platen-stage.printed .proof-sheet { transform: translateY(0) rotate(-1deg); }
@keyframes pullLever { 50% { transform: rotate(31deg); } }
@keyframes closePlaten { 50% { transform: perspective(500px) rotateX(0); } }

.lesson-section { display: grid; grid-template-columns: .85fr 1.15fr; min-height: 760px; color: var(--paper); background: linear-gradient(90deg, #7f2520 0 39%, #2b2520 39%); }
.lesson-copy { align-self: center; padding: 100px 9vw 100px 7vw; }
.lesson-copy .eyebrow { color: #efc8a5; }
.lesson-copy h2 { margin: 24px 0 38px; font: 400 clamp(60px, 7vw, 110px)/.83 var(--display); letter-spacing: -.055em; }
.lesson-copy h2 em { color: #d3b272; font-family: var(--body); font-weight: 400; }
.lesson-copy > p:not(.eyebrow) { max-width: 530px; color: #e1d2ba; font-size: 18px; }
.lesson-copy q { color: white; }
.pq-lesson { display: grid; align-content: center; padding: 100px 8vw 100px 5vw; }
.sort-stage { display: grid; grid-template-columns: 210px 130px 1fr; align-items: center; gap: 20px; }
.large-sort { position: relative; width: 210px; height: 290px; border: 0; color: #292b2e; background: linear-gradient(90deg,#46484c,#a6a9ac 32%,#676a6e 67%,#35373a); box-shadow: inset 4px 0 5px rgba(255,255,255,.2), 18px 23px 32px rgba(0,0,0,.4); cursor: pointer; transition: transform .6s cubic-bezier(.2,.8,.2,1); transform-style: preserve-3d; }
.large-sort:hover { transform: rotateY(12deg) translateY(-5px); }
.large-sort.turned { transform: rotateY(180deg); }
.sort-face { display: block; font: 400 180px/1 var(--display); text-shadow: 1px 1px #c9cbcd; transform: scaleX(-1); }
.sort-side { position: absolute; right: 15px; bottom: 12px; padding-top: 5px; border-top: 3px groove #333; font: 700 7px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.large-sort.turned .sort-face { transform: scaleX(1); }
.mirror-arrow { color: var(--brass); font: 700 8px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.paper-pq { display: grid; place-items: center; min-height: 310px; padding: 25px; color: var(--ink); background: #e2d1ad; box-shadow: 0 18px 26px rgba(0,0,0,.34); transform: rotate(2deg); }
.paper-pq span { font: 400 190px/.7 var(--display); text-shadow: 1px 2px rgba(255,255,255,.7), -1px -1px rgba(73,37,13,.17); }
.paper-pq small { align-self: end; font: 700 7px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.pq-lesson > p { max-width: 650px; margin: 50px 0 0; color: #beb19e; font-size: 16px; }

.measure-section { padding: 120px clamp(24px, 7vw, 112px); color: var(--ink); background: #d9c7a3; }
.point-ruler { display: grid; grid-template-columns: repeat(17, 1fr); align-items: end; height: 54px; margin: 50px 0 55px; border-bottom: 2px solid var(--ink); font: 700 8px/1 var(--mono); }
.point-ruler span { align-self: end; padding-bottom: 8px; border-left: 2px solid var(--ink); }
.point-ruler i { height: 13px; border-left: 1px solid var(--ink); }
.point-ruler i:nth-of-type(4n) { height: 25px; }
.specimen-bench { display: grid; grid-template-columns: 280px 1fr; gap: 8vw; align-items: center; }
.size-control label { display: block; padding-bottom: 14px; border-bottom: 1px solid var(--ink); font: 700 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.size-control output { color: var(--red); font-size: 24px; }
.size-control input { width: 100%; height: 44px; accent-color: var(--red); cursor: pointer; }
.size-control p { font-size: 15px; line-height: 1.45; }
.specimen { --specimen-size: 36px; position: relative; min-width: 0; padding: 55px 5vw 40px; border: 1px solid #8f7c58; background: #eadcbc; box-shadow: 13px 15px 0 rgba(74,56,38,.14); overflow: hidden; }
.specimen::before { content: 'SPECIMEN № 36'; position: absolute; top: 15px; left: 20px; font: 700 7px/1 var(--mono); letter-spacing: .1em; }
.specimen-title { display: block; font: 400 var(--specimen-size)/.95 var(--display); transition: font-size .15s; }
.specimen-line { display: block; margin: 18px 0 30px; font-size: 16px; line-height: 1.3; }
.specimen small { display: block; padding-top: 10px; border-top: 1px solid rgba(25,23,20,.4); font: 700 7px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.size-ledger { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 70px; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.size-ledger > span { display: grid; grid-template-columns: 1fr auto; min-height: 150px; padding: 22px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.size-ledger b { align-self: center; font-family: var(--display); font-weight: 400; }
.size-ledger i { font: 700 8px/1 var(--mono); font-style: normal; }
.size-ledger small { grid-column: 1/-1; align-self: end; font: 700 7px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }

.tickets-section { position: relative; padding: 130px 5vw 160px; overflow: hidden; color: #ddd0ba; background-color: #45321f; background-image: linear-gradient(90deg, rgba(255,255,255,.025) 50%, transparent 50%), linear-gradient(rgba(0,0,0,.08) 50%, transparent 50%); background-size: 11px 100%, 100% 7px; }
.tickets-section::after { content: ''; position: absolute; left: 3%; right: 3%; bottom: 65px; height: 18px; background: linear-gradient(#322217,#6a4b2e,#2b1d13); box-shadow: 0 10px 20px #1b120c; }
.ticket-heading { display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: end; gap: 30px; margin-bottom: 80px; }
.ticket-heading .eyebrow { color: #c5a66b; }
.ticket-heading h2 { margin: 0; color: var(--paper-light); font: 400 clamp(65px, 9vw, 135px)/.8 var(--display); letter-spacing: -.06em; }
.ticket-heading > p:last-child { margin: 0; max-width: 250px; color: #c5b79e; font-size: 15px; }
.ticket-wall { display: grid; grid-template-columns: repeat(12, 1fr); align-items: start; gap: 16px; min-height: 600px; padding: 40px 2vw 0; border-top: 3px solid #24170f; }
.job-ticket { --angle: -2deg; position: relative; grid-column: span 3; min-height: 370px; margin-top: 0; padding: 35px 28px 25px; color: #211b14; background: #d7bd8b; box-shadow: 7px 14px 18px rgba(21,12,5,.4); transform: rotate(var(--angle)); transition: transform .25s, box-shadow .25s; transition-delay: var(--ticket-delay); }
.job-ticket:nth-child(2) { --angle: 3deg; margin-top: 105px; background: #abb2af; }
.job-ticket:nth-child(3) { --angle: -1deg; margin-top: 24px; background: #ceb182; }
.job-ticket:nth-child(4) { --angle: 2deg; margin-top: 135px; background: #e5d9be; }
.job-ticket:nth-child(5) { --angle: -4deg; grid-column: 5 / span 3; margin-top: -60px; background: #c9a574; }
.job-ticket:hover { z-index: 4; transform: rotate(0) translateY(-12px); box-shadow: 12px 23px 30px rgba(21,12,5,.55); }
.ticket-pin { position: absolute; top: -11px; left: 50%; width: 19px; height: 19px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ddbd75,#654724 72%); box-shadow: 1px 4px 5px rgba(0,0,0,.5); }
.ticket-no { padding-bottom: 8px; border-bottom: 2px solid currentColor; text-align: right; font: 700 8px/1 var(--mono); }
.job-ticket > p { margin: 22px 0 3px; font: 700 8px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.job-ticket h3 { min-height: 80px; margin: 0 0 25px; font: 400 34px/.95 var(--display); }
.job-ticket dl { margin: 0; border-top: 1px solid rgba(33,27,20,.6); }
.job-ticket dl div { display: grid; grid-template-columns: 70px 1fr; padding: 7px 0; border-bottom: 1px solid rgba(33,27,20,.35); font-size: 12px; }
.job-ticket dt { font: 700 7px/1.5 var(--mono); text-transform: uppercase; }
.job-ticket dd { margin: 0; }
.job-ticket footer { margin-top: 20px; color: #7b241f; font: 700 8px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.ticket-red { border-top: 10px solid var(--red); }.ticket-blue { border-top: 10px solid #5a6a6f; }.ticket-kraft { border-top: 10px solid #26221d; }.ticket-white { border-top: 10px solid #b18c4a; }.ticket-torn { border-top: 10px solid #80241f; }

.shop-floor { position: relative; isolation: isolate; display: grid; grid-template-columns: 1.15fr .85fr; gap: 8vw; padding: 125px 8vw; overflow: hidden; color: #d9cdb8; background: #22201d; }
.shop-floor::after { content: '&'; position: absolute; z-index: -1; right: -3vw; bottom: -11vw; color: rgba(201,170,120,.035); font: 400 47vw/.7 var(--display); transform: rotate(-8deg); }
.floor-rule { position: absolute; top: 0; left: 7vw; width: 3px; height: 100px; background: var(--brass); }
.floor-heading h2 { margin: 25px 0 0; color: var(--paper-light); font: 400 clamp(51px, 6vw, 90px)/.94 var(--display); letter-spacing: -.045em; }
.floor-heading h2 em { color: var(--red); font-style: normal; }
.shop-notes { border-top: 1px solid #676056; }
.shop-notes article { display: grid; grid-template-columns: 35px 150px 1fr; gap: 16px; padding: 24px 0; border-bottom: 1px solid #676056; }
.shop-notes span { color: var(--brass); font: 700 8px/1.5 var(--mono); }
.shop-notes h3 { margin: 0; color: var(--paper-light); font: 400 22px/1 var(--display); }
.shop-notes p { margin: 0; color: #b5aa98; font-size: 14px; line-height: 1.35; }
.foreman-note { grid-column: 1 / -1; max-width: 930px; margin: 62px auto 0; color: var(--kraft); text-align: center; font: 400 clamp(32px, 5vw, 70px)/1.05 var(--display); }
.foreman-note cite { display: block; margin-top: 24px; color: #938979; font: 700 8px/1 var(--mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; }

.site-footer { min-height: 220px; display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 30px; padding: 45px 6vw; color: #9f9584; background: #151412; border-top: 1px solid #49443b; font: 700 8px/1.4 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.footer-slug { display: flex; align-items: center; gap: 10px; color: var(--brass); }
.footer-slug span { font: 400 26px/1 var(--display); }.footer-slug i { width: 1px; height: 30px; background: #66593f; }.footer-slug b { font-size: 7px; }
.site-footer nav { display: flex; gap: 28px; }
.site-footer a { padding: 15px 0; text-decoration: none; border-bottom: 1px solid transparent; }
.site-footer a:hover { color: var(--paper-light); border-color: var(--red); }

.reveal { opacity: 1; transform: none; transition: opacity .75s ease, transform .75s cubic-bezier(.16,.8,.28,1); }
.hero .reveal { opacity: 0; transform: translateY(24px); }
.reveal.visible { opacity: 1; transform: none; }
.hero-title .composing { transition-delay: .08s; }.hero-title .room { transition-delay: .16s; }.hero-deck { transition-delay: .28s; }.hero-case { transition-delay: .2s; }.hero-ledger { transition-delay: .35s; }

@media (max-width: 1100px) {
  .shop-header { grid-template-columns: 190px 1fr auto; }
  .shop-header nav { gap: 18px; }
  .hero { min-height: 850px; }
  .hero-title { width: 90vw; }
  .hero-title .composing { font-size: clamp(86px, 15vw, 160px); }
  .hero-case { opacity: .7; right: -18%; }
  .composing-bench { grid-template-columns: 1fr; }
  .jobcase-wrap { grid-row: auto; }
  .galley { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
  .galley-label, .stick { grid-column: 1; }
  .bench-controls, .bench-whisper { grid-column: 2; }
  .bench-controls { grid-row: 2; margin-top: 0; }
  .platen-stage { min-height: 360px; }
  .lesson-section { grid-template-columns: 1fr; background: linear-gradient(180deg, #7f2520 0 44%, #2b2520 44%); }
  .lesson-copy { padding-bottom: 150px; }
  .pq-lesson { padding-top: 130px; }
  .ticket-wall { grid-template-columns: repeat(6,1fr); }
  .job-ticket { grid-column: span 2; }
  .job-ticket:nth-child(4) { grid-column: 2 / span 2; }
  .job-ticket:nth-child(5) { grid-column: 4 / span 2; }
  .shop-floor { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body { font-size: 17px; }
  .shop-header { min-height: 82px; grid-template-columns: 1fr auto; padding: 13px 20px; }
  .shop-header nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; overflow-x: auto; gap: 23px; margin: -5px -20px -13px; padding: 0 20px; border-top: 1px solid rgba(195,155,82,.2); scrollbar-width: none; }
  .shop-header nav a { min-height: 44px; display: flex; align-items: center; white-space: nowrap; }
  .open-sign { justify-self: end; font-size: 7px; }
  .hero { min-height: 790px; height: 100svh; max-height: 900px; padding: 150px 20px 40px; background: radial-gradient(circle at 70% 60%, rgba(126,95,50,.16), transparent 30%), #1b1814; }
  .hero-kicker { top: 132px; left: 20px; font-size: 7px; letter-spacing: .13em; }
  .hero-title { width: auto; margin-top: 78px; }
  .hero-title .the { margin-left: 3px; font-size: 42px; }
  .hero-title .composing { font-size: clamp(61px, 18.5vw, 72px); letter-spacing: -.06em; }
  .hero-title .room { margin: 9px 0 0 15%; font-size: clamp(88px, 26vw, 105px); }
  .hero-case { top: auto; right: -38%; bottom: 108px; width: 390px; opacity: .26; transform: rotate(7deg) scale(.78); transform-origin: bottom right; }
  .hero-ledger { top: auto; right: 24px; bottom: 155px; width: 118px; }
  .hero-rule { display: none; }
  .hero-deck { left: 20px; bottom: 105px; z-index: 7; max-width: 245px; font-size: 17px; text-shadow: 0 2px 8px #17130f; }
  .down-ticket { right: 18px; bottom: 25px; font-size: 7px; }
  .section-head { grid-template-columns: 1fr auto; gap: 12px; }
  .section-head p { grid-column: 1 / -1; }
  .section-head h2 { font-size: 53px; }
  .case-section { padding: 85px 12px 90px; }
  .case-intro { grid-template-columns: 1fr; gap: 24px; margin: 28px 8px 45px; }
  .case-intro p { font-size: 20px; }
  .composing-bench { gap: 22px; padding: 17px 10px 25px; margin: 0 -4px; }
  .jobcase-wrap { padding: 7px; border-width: 6px; }
  .case-plaque { margin: -26px 8% 10px; padding: 6px; }
  .case-half { grid-template-columns: repeat(13, minmax(0,1fr)); gap: 2px; }
  .case-cell { height: 46px; border-width: 1px; }
  .case-cell span { font-size: 12px; }
  .case-cell small { display: none; }
  .case-cell.narrow { max-width: none; }
  .galley { display: flex; }
  .galley-label, .stick, .bench-controls, .bench-whisper { grid-column: auto; }
  .stick { min-height: 93px; padding-left: 7px; padding-right: 7px; }
  .metal-sort { width: 17px; font-size: 17px; }
  .metal-space { width: 9px; }
  .bench-controls { grid-template-columns: 1fr 1fr; }
  .utility-button { min-height: 48px; }
  .utility-button:nth-child(3) { grid-column: 1/-1; }
  .platen-stage { min-height: 330px; }
  .proof-sheet { left: 14px; right: 14px; padding: 20px; }
  .printed-line { font-size: 25px; }
  .lesson-copy { padding: 80px 22px 120px; }
  .lesson-copy h2 { font-size: 67px; }
  .pq-lesson { padding: 100px 18px 80px; }
  .sort-stage { grid-template-columns: 110px 50px 1fr; gap: 10px; }
  .large-sort { width: 110px; height: 170px; }
  .sort-face { font-size: 100px; }
  .mirror-arrow { font-size: 6px; }
  .paper-pq { min-height: 190px; padding: 12px; }
  .paper-pq span { font-size: 110px; }
  .pq-lesson > p { margin-top: 35px; }
  .measure-section { padding: 85px 18px; }
  .point-ruler { margin: 35px 0; }
  .specimen-bench { grid-template-columns: 1fr; gap: 35px; }
  .specimen { padding: 50px 23px 32px; }
  .specimen-title { line-height: 1; overflow-wrap: anywhere; }
  .size-ledger { grid-template-columns: 1fr 1fr; }
  .size-ledger > span { min-height: 125px; }
  .ticket-heading { grid-template-columns: 1fr; margin-bottom: 55px; }
  .ticket-heading h2 { font-size: 64px; white-space: nowrap; }
  .tickets-section { padding: 95px 16px 125px; }
  .ticket-wall { display: flex; min-height: 0; gap: 0; flex-direction: column; padding: 22px 12px; }
  .job-ticket, .job-ticket:nth-child(n) { width: min(330px, 92%); min-height: 340px; margin: -12px 0 0; }
  .job-ticket:nth-child(even) { align-self: flex-end; }
  .job-ticket:nth-child(5) { align-self: center; }
  .shop-floor { padding: 105px 22px; }
  .floor-heading h2 { font-size: 51px; }
  .shop-notes article { grid-template-columns: 30px 1fr; }
  .shop-notes p { grid-column: 2; }
  .foreman-note { margin-top: 52px; font-size: 38px; }
  .site-footer { grid-template-columns: 1fr; gap: 20px; padding: 45px 22px; }
  .site-footer nav { flex-direction: column; gap: 0; }
  .site-footer nav a { min-height: 44px; display: flex; align-items: center; }
}

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

/* Pass 2 — make the physical transformation read before the decoration. */
.press-start { position: fixed; z-index: 1000; inset: 0; display: flex; align-items: center; justify-content: center; gap: 18px; color: var(--brass); background: #151310; pointer-events: none; animation: liftForme 1.15s .18s cubic-bezier(.76,0,.24,1) both; }
.press-start span { font: 400 clamp(54px,9vw,120px)/1 var(--display); letter-spacing: -.06em; }
.press-start i { width: clamp(45px,9vw,130px); height: 2px; background: var(--red); box-shadow: 0 8px 0 rgba(195,155,82,.45); }
.press-start b { font: 700 9px/1.4 var(--mono); letter-spacing: .18em; }
@keyframes liftForme { 0%,42% { opacity: 1; clip-path: inset(0); } 99% { opacity: 1; clip-path: inset(0 0 100%); } 100% { visibility: hidden; opacity: 0; clip-path: inset(0 0 100%); } }

.bench-sequence { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4,1fr); max-width: 960px; margin: 0 auto -1px; padding: 0; list-style: none; border: 1px solid rgba(25,23,20,.75); background: rgba(229,214,183,.48); }
.bench-sequence li { min-height: 62px; display: grid; grid-template-columns: 38px 1fr; align-items: center; padding: 10px 15px; border-right: 1px solid rgba(25,23,20,.5); }
.bench-sequence li:last-child { color: var(--paper-light); border-right: 0; background: var(--red); }
.bench-sequence b { font: 700 8px/1 var(--mono); }
.bench-sequence span { font: 600 12px/1.1 var(--mono); letter-spacing: .02em; text-transform: uppercase; }

.composing-bench { grid-template-columns: minmax(480px,1.05fr) minmax(420px,.95fr); border: 1px solid #80603d; box-shadow: 0 30px 60px rgba(49,29,12,.42), inset 0 1px #987551; }
.jobcase-wrap, .galley, .platen-stage { transition: transform .7s cubic-bezier(.16,.8,.28,1), filter .7s, opacity .7s, box-shadow .7s; }
.case-cell:focus-visible { z-index: 5; filter: brightness(1.3); outline-color: #f0bd61; outline-offset: 1px; }
.stick { position: relative; }
.type-line { --sort-width: 25px; }
.metal-sort { width: var(--sort-width); }
.metal-space { width: calc(var(--sort-width) * .58); }
.stick-direction { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-top: 8px; color: #8f856f; font: 700 7px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.stick-direction i { height: 1px; background: linear-gradient(90deg,#6d604b,var(--brass)); }
.stick-direction b { color: #d3b878; font-weight: 700; }
.platen-stage { min-height: 370px; border: 1px solid #6d5537; box-shadow: inset 0 0 45px rgba(0,0,0,.45); }
.proof-sheet { inset: 78px 28px 18px; background-color: #e8dabd; background-image: linear-gradient(92deg,transparent 0 74%,rgba(92,61,29,.035) 75% 76%,transparent 77%), repeating-linear-gradient(0deg,rgba(90,55,20,.025) 0 1px,transparent 1px 4px); }
.proof-register { position: absolute; left: 13px; top: 10px; color: rgba(25,23,20,.5); font: 400 18px/1 var(--mono); }
.printed-line { min-height: 90px; font-size: clamp(25px,2.7vw,42px); }
.composing-bench.is-printing .jobcase-wrap, .composing-bench.is-printing .galley { filter: brightness(.58); }
.composing-bench.proof-revealed .jobcase-wrap { opacity: .62; filter: sepia(.18) brightness(.72); transform: translateX(-10px); }
.composing-bench.proof-revealed .galley { opacity: .72; transform: translateY(8px); }
.composing-bench.proof-revealed .platen-stage { z-index: 8; transform: translate(-18px,-8px) scale(1.07); box-shadow: 0 30px 70px rgba(20,8,2,.58), 0 0 0 2px var(--red), inset 0 0 45px rgba(0,0,0,.35); }
.composing-bench.proof-revealed .proof-sheet { box-shadow: 0 16px 30px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,255,255,.35); }

.lesson-section { position: relative; overflow: hidden; background: linear-gradient(90deg,#8e2923 0 39%,#29241f 39%); }
.lesson-section::after { content: 'WRONG CASE'; position: absolute; right: -32px; top: 32px; color: rgba(201,170,120,.055); font: 700 clamp(56px,10vw,150px)/1 var(--mono); letter-spacing: -.08em; transform: rotate(90deg); transform-origin: right top; }
.large-sort, .paper-pq { z-index: 1; }
.mirror-arrow { position: relative; color: #d0aa5c; }
.mirror-arrow::after { content: ''; display: block; width: 100%; height: 2px; margin-top: 10px; background: linear-gradient(90deg,var(--brass),transparent); }
.pq-lesson > p { padding-left: 18px; border-left: 2px solid var(--brass); }

.point-ruler { --point-ratio: .4; position: relative; }
.point-ruler::after { content: attr(data-current); position: absolute; left: calc(var(--point-ratio) * 100%); bottom: -20px; width: 2px; height: 72px; color: var(--red); background: var(--red); box-shadow: 0 0 0 4px rgba(166,45,36,.12); transform: translateX(-1px); font: 700 8px/1 var(--mono); }
.specimen { transition: box-shadow .25s, transform .25s; }
.specimen:focus-within, .specimen-bench:has(input:active) .specimen { transform: translateY(-3px) rotate(-.25deg); box-shadow: 18px 22px 0 rgba(74,56,38,.16); }

.ticket-wall::before { content: 'COPY  ·  GALLEY  ·  PROOF  ·  PRESS'; position: absolute; left: 7vw; right: 7vw; margin-top: -33px; color: rgba(221,208,186,.38); font: 700 7px/1 var(--mono); letter-spacing: .28em; }
.ticket-rush { grid-column: 9 / span 3; margin-top: -38px; background: #c88568; border-top: 10px solid #f0e6d0; }
.ticket-rush::after { content: 'RUSH'; position: absolute; right: 18px; top: 84px; padding: 5px 8px; color: var(--red); border: 2px solid var(--red); font: 700 9px/1 var(--mono); transform: rotate(-9deg); }
.job-ticket h3 { letter-spacing: -.025em; }
.job-ticket footer, .ticket-no, .job-ticket > p { font-size: 9px; }

.foreman-note { justify-self: end; max-width: 830px; margin: 70px 2vw 0 0; padding: 5px 0 5px 34px; border-left: 4px solid var(--red); text-align: left; }
.site-footer { font-size: 9px; }

@media (max-width:1100px) {
  .composing-bench { grid-template-columns: 1fr; }
  .ticket-rush { grid-column: 3 / span 2; margin-top: -35px; }
  .composing-bench.proof-revealed .platen-stage { transform: translateY(-6px) scale(1.025); }
}

@media (max-width:760px) {
  .press-start { flex-wrap: wrap; align-content: center; padding: 30px; }
  .press-start b { flex-basis: 100%; text-align: center; }
  .hero { min-height: 820px; }
  .hero-title { margin-top: 68px; }
  .hero-title .the { font-size: 38px; }
  .hero-title .composing { font-size: clamp(60px,18vw,70px); }
  .hero-title .room { margin-left: 10%; }
  .hero-case { right: -44%; bottom: 114px; opacity: .34; }
  .hero-ledger { right: 18px; bottom: 164px; transform: rotate(-4deg); }
  .hero-deck { max-width: 220px; bottom: 112px; }
  .bench-sequence { grid-template-columns: 1fr 1fr; margin: 0 4px -1px; }
  .bench-sequence li { min-height: 54px; border-bottom: 1px solid rgba(25,23,20,.45); }
  .bench-sequence li:nth-child(2) { border-right: 0; }
  .bench-sequence span { font-size: 9px; }
  .composing-bench { padding-top: 24px; }
  .case-cell { min-height: 46px; }
  .stick-direction { font-size: 6px; }
  .platen-stage { min-height: 360px; }
  .composing-bench.proof-revealed .jobcase-wrap, .composing-bench.proof-revealed .galley { opacity: 1; filter: none; transform: none; }
  .composing-bench.proof-revealed .platen-stage { transform: none; box-shadow: 0 18px 40px rgba(20,8,2,.5),0 0 0 2px var(--red); }
  .lesson-section::after { display: none; }
  .mirror-arrow { font-size: 7px; }
  .pq-lesson > p { padding-left: 13px; }
  .point-ruler::after { height: 60px; }
  .ticket-wall::before { left: 12px; right: auto; }
  .job-ticket, .job-ticket:nth-child(n) { margin-top: -26px; }
  .ticket-rush { align-self: flex-end; }
  .foreman-note { justify-self: stretch; margin-right: 0; padding-left: 18px; font-size: 37px; }
  .site-footer { min-height: 0; gap: 12px; padding-top: 38px; padding-bottom: 32px; }
  .site-footer nav { display: grid; grid-template-columns: 1fr; }
  .site-footer nav a { padding: 8px 0; }
}

@media (prefers-reduced-motion:reduce) {
  .press-start { display: none; }
  .composing-bench.proof-revealed .platen-stage, .composing-bench.proof-revealed .jobcase-wrap, .composing-bench.proof-revealed .galley { transform: none; }
}

/* Pass 3 — the foreman's sign-off and final typographic polish. */
html { scrollbar-color: var(--brass) var(--ink); scrollbar-width: thin; }
html::-webkit-scrollbar { width: 11px; }
html::-webkit-scrollbar-track { background: #171410; box-shadow: inset 1px 0 rgba(195,155,82,.18); }
html::-webkit-scrollbar-thumb { border: 3px solid #171410; border-radius: 20px; background: linear-gradient(var(--brass), #755831); }
html::-webkit-scrollbar-thumb:hover { background: var(--red); }
body { font-kerning: normal; font-optical-sizing: auto; text-rendering: optimizeLegibility; }
p, li, dd { text-wrap: pretty; }
h1, h2, h3, blockquote { text-wrap: balance; }
.open-sign, .section-folio, .galley-label, .proof-meta, .ticket-no, .job-ticket dd, .size-ledger i, .site-footer { font-variant-numeric: tabular-nums; }

.shop-header nav a, .down-ticket, .utility-button, .proof-button, .large-sort, .site-footer a { transition-timing-function: cubic-bezier(.16,.8,.28,1); }
.maker-mark:hover .mark-tcr, .maker-mark:focus-visible .mark-tcr { color: var(--paper-light); box-shadow: inset 0 -3px var(--red), 0 0 0 1px rgba(195,155,82,.22); }
.maker-mark:hover .mark-copy { color: var(--paper-light); }
.down-ticket:hover { color: var(--paper-light); transform: translateY(-3px); }
.down-ticket:hover span { color: var(--ink); background: var(--brass); box-shadow: 0 7px 0 #5e4525; }
.utility-button { transition: color .18s, background .18s, border-color .18s, transform .18s, box-shadow .18s; }
.utility-button:hover { border-color: var(--brass); box-shadow: inset 0 -3px rgba(195,155,82,.22); transform: translateY(-1px); }
.utility-button:active { transform: translateY(2px); }
.proof-button { transition: background .2s, color .2s, transform .2s, box-shadow .2s; }
.proof-button:hover { background: #bd382d; }
.proof-button:focus-visible, .utility-button:focus-visible, .large-sort:focus-visible { outline-color: #f3c773; }
.site-footer a { transition: color .18s, border-color .18s, transform .18s; }
.site-footer a:hover { transform: translateY(-2px); }

.measure-section {
  background-color: #d9c7a3;
  background-image:
    radial-gradient(ellipse at 83% 11%, rgba(112,76,33,.14), transparent 31%),
    radial-gradient(ellipse at 12% 86%, rgba(255,245,219,.24), transparent 34%),
    repeating-linear-gradient(90deg, rgba(74,56,38,.025) 0 1px, transparent 1px 38px);
  box-shadow: inset 0 22px 45px rgba(77,52,24,.09), inset 0 -22px 45px rgba(77,52,24,.08);
}
.specimen { background-image: repeating-linear-gradient(2deg, transparent 0 5px, rgba(90,55,20,.024) 5px 6px); }
.specimen-title { letter-spacing: -.025em; }
.specimen-line { max-width: 72ch; }
.size-ledger b { letter-spacing: -.035em; }

.approval-impression {
  position: absolute;
  z-index: 1;
  right: 18px;
  bottom: 16px;
  width: 86px;
  height: 86px;
  display: grid;
  place-content: center;
  border: 3px double var(--red);
  border-radius: 50%;
  color: var(--red);
  opacity: 0;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(var(--stamp-turn, -5deg)) scale(1.5);
  filter: saturate(.8);
}
.approval-impression::before, .approval-impression::after { content: ''; position: absolute; left: 7px; right: 7px; height: 1px; background: currentColor; opacity: .72; }
.approval-impression::before { top: 23px; }.approval-impression::after { bottom: 23px; }
.approval-impression span { font: 700 7px/1.15 var(--mono); letter-spacing: .03em; }
.approval-impression b { margin-top: 5px; font: 400 20px/1 var(--display); }
.proof-shop, .printed-line, .proof-meta { position: relative; z-index: 2; }
.proof-meta { max-width: calc(100% - 105px); }

.approval-stamp {
  position: absolute;
  z-index: 8;
  right: 8px;
  bottom: 4px;
  width: 132px;
  min-height: 118px;
  padding: 8px 7px 5px;
  border: 0;
  color: #e0ca9e;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transform: translateY(42px) rotate(-3deg);
  transition: opacity .3s .42s, transform .55s .38s cubic-bezier(.16,.8,.28,1);
}
.platen-stage.printed .approval-stamp:not(:disabled) { opacity: 1; pointer-events: auto; transform: translateY(0) rotate(-3deg); }
.stamp-grip { position: relative; display: block; width: 76px; height: 45px; margin: 0 auto 19px; border: 1px solid #8b6740; border-radius: 52% 52% 22% 22%; background: radial-gradient(circle at 45% 22%, #876341, #49321f 67%, #271b13); box-shadow: inset 0 2px rgba(255,255,255,.13), 0 10px 12px rgba(0,0,0,.45); transition: transform .18s cubic-bezier(.16,.8,.28,1), filter .18s; }
.stamp-grip::before { content: ''; position: absolute; left: 29px; top: 40px; width: 18px; height: 21px; border: 1px solid #795836; background: linear-gradient(90deg,#352419,#795534,#352419); }
.stamp-grip::after { content: ''; position: absolute; left: 10px; top: 58px; width: 56px; height: 9px; border-radius: 3px 3px 1px 1px; background: #2b1b16; box-shadow: 0 3px 0 #8f2b24, 0 6px 8px rgba(0,0,0,.45); }
.stamp-grip i { position: absolute; left: 18px; right: 18px; top: 17px; height: 1px; background: rgba(211,177,112,.45); }
.stamp-label { display: grid; place-items: center; min-height: 44px; border-top: 1px solid rgba(195,155,82,.45); font: 700 7px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.approval-stamp:hover .stamp-grip { filter: brightness(1.15); transform: translateY(-5px); }
.approval-stamp:active .stamp-grip { transform: translateY(7px) scale(.97); }
.approval-stamp:focus-visible { outline-offset: -2px; }
.platen-stage.stamping .approval-stamp { opacity: 1; animation: stampStrike .62s cubic-bezier(.7,0,.22,1) both; }
.platen-stage.stamping .proof-sheet { animation: paperBite .62s cubic-bezier(.7,0,.22,1); }
.platen-stage.approved .approval-impression { opacity: .84; transform: rotate(var(--stamp-turn, -5deg)) scale(1); transition: opacity .12s, transform .18s cubic-bezier(.18,.9,.3,1.35); }
.platen-stage.approved .approval-stamp { opacity: 0; pointer-events: none; transform: translateY(-25px) rotate(5deg); transition-delay: 0s; }
@keyframes stampStrike { 0% { transform: translateY(0) rotate(-3deg); } 48%,62% { transform: translateY(33px) rotate(-1deg) scale(.98); } 100% { transform: translateY(-24px) rotate(5deg); opacity: 0; } }
@keyframes paperBite { 52%,66% { transform: translateY(1px) rotate(-1.15deg) scale(.995); } }

@media (max-width:760px) {
  .approval-stamp { right: 4px; bottom: 1px; width: 116px; transform: translateY(38px) rotate(-3deg) scale(.9); transform-origin: bottom right; }
  .platen-stage.printed .approval-stamp:not(:disabled) { transform: translateY(0) rotate(-3deg) scale(.9); }
  .approval-impression { right: 12px; bottom: 13px; width: 76px; height: 76px; }
  .proof-meta { max-width: calc(100% - 82px); }
  .maker-mark, .down-ticket, .site-footer a { min-height: 44px; }
}

@media (prefers-reduced-motion:reduce) {
  .platen-stage.stamping .approval-stamp, .platen-stage.stamping .proof-sheet { animation: none !important; }
  .platen-stage.approved .approval-impression { transition: none; }
}