:root {
  --paper: #f4f1ea;
  --paper-deep: #e6e0d3;
  --paper-bright: #faf8f2;
  --ink: #1a1a1a;
  --graphite: #52504b;
  --faint: #aaa395;
  --blue: #2857a6;
  --blue-dark: #193a76;
  --red-pencil: #9a3f32;
  --display: 'Gloock', serif;
  --text: 'Spectral', serif;
  --mono: 'Space Mono', monospace;
  --page: min(1240px, calc(100vw - 56px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 18px;
  line-height: 1.55;
  overflow-x: hidden;
}
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; }
::selection { color: var(--paper-bright); background: var(--blue); }

.paper-grain {
  position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: .16; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.23'/%3E%3C/svg%3E");
}
.skip-link { position:absolute; z-index:99; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; background:var(--blue); color:white; }
.skip-link:focus,.skip-link:focus-visible { position:fixed; top:8px; left:8px; width:auto; height:auto; margin:0; padding:10px 16px; overflow:visible; clip-path:none; white-space:normal; transform:none; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.site-header { position: absolute; top: 0; left: 0; width: 100%; z-index: 10; }
.desk-nav { width: var(--page); margin: 0 auto; min-height: 82px; display: flex; align-items: center; border-bottom: 1px solid var(--ink); }
.desk-mark { width: 48px; height: 48px; display: grid; place-items: center; text-decoration: none; border: 1px solid var(--ink); font: 700 12px var(--mono); position: relative; }
.desk-mark i { position: absolute; inset: 5px; border: 1px solid var(--ink); transform: rotate(45deg); }
.desk-mark span { z-index: 1; background: var(--paper); padding: 2px; }
.nav-links { display: flex; margin-left: 38px; gap: 32px; }
.nav-links a, .issue-tab { font: 700 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; text-decoration: none; }
.nav-links a { position: relative; padding: 17px 0; }
.nav-links a::after { content:""; position:absolute; height:1px; left:0; right:100%; bottom:10px; background:var(--blue); transition:right .25s; }
.nav-links a:hover::after { right: 0; }
.issue-tab { margin-left: auto; align-self: stretch; min-width: 132px; display: flex; gap: 5px; align-items: center; justify-content: center; border-left: 1px solid var(--ink); border-right: 1px solid var(--ink); color: var(--paper); background: var(--ink); }
.issue-tab span { color: #c8c3b7; }

.hero { min-height: 970px; padding: 122px max(28px, calc((100vw - 1240px)/2)) 70px; position: relative; overflow: hidden; }
.hero-rule { height: 9px; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); }
.hero-kicker { font: 700 10px var(--mono); text-align: center; text-transform: uppercase; letter-spacing: .14em; padding: 11px; border-bottom: 1px solid var(--ink); }
.masthead-wrap { min-height: 440px; position: relative; display: grid; place-items: center; border-bottom: 1px solid var(--ink); }
.masthead { margin: 22px 0 0; text-align: center; font: 400 clamp(86px, 11.6vw, 174px)/.73 var(--display); letter-spacing: -.068em; }
.masthead em { color: var(--blue); font-style: normal; margin-left: .62em; position: relative; }
.edition, .price { position: absolute; top: 24px; margin: 0; font: 700 10px var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.edition { left: 0; }
.price { right: 0; }
.pencil-stroke { position: absolute; width: min(58vw, 740px); height: 130px; left: 50%; top: 48%; transform: translate(-50%,-50%) rotate(-5deg); overflow: visible; pointer-events: none; }
.pencil-stroke path { fill: none; stroke: var(--blue); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw-line 1.4s 1s cubic-bezier(.25,.8,.25,1) forwards; }
.pencil-stroke path + path { stroke-width: 1; animation-delay: 1.35s; }
.hero-deck { display: grid; grid-template-columns: 1.25fr .75fr; min-height: 145px; border-bottom: 1px solid var(--ink); }
.standfirst { font: 500 clamp(22px,2.2vw,31px)/1.2 var(--text); max-width: 720px; margin: 0; padding: 24px 50px 24px 0; }
.standfirst span { font: 700 11px var(--mono); color: var(--blue); text-transform: uppercase; letter-spacing: .08em; vertical-align: .35em; margin-right: 8px; }
.hero-deck blockquote { margin: 0; padding: 25px 0 20px 34px; border-left: 1px solid var(--ink); font-style: italic; font-size: 16px; }
.hero-deck cite { display: block; margin-top: 8px; font: 700 9px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.desk-scene { height: 180px; margin-top: 24px; background: #ddd6c8; position: relative; transform: rotate(-.45deg); box-shadow: 0 18px 50px #332d241c, inset 0 0 70px #6c62531f; overflow: hidden; }
.blue-pencil { position: absolute; z-index: 2; width: 420px; height: 25px; right: -35px; top: 40px; background: var(--blue); transform: rotate(-14deg); box-shadow: 0 7px 10px #0002; color: white; font: 400 8px/25px var(--mono); letter-spacing: .18em; text-align: center; }
.blue-pencil::before { content:""; position:absolute; left:-35px; border-top:12.5px solid transparent; border-bottom:12.5px solid transparent; border-right:35px solid #c7b99d; }
.coffee-ring { position:absolute; width:130px; height:130px; border:5px double #805e3b3d; border-radius:50%; left:45%; top:34px; transform:scaleY(.7); box-shadow: inset 0 0 0 8px #8e65431a; }
.proof-slip { position:absolute; width:310px; min-height:125px; background:var(--paper-bright); top:25px; left:8%; padding:20px 24px; transform:rotate(2deg); box-shadow:0 9px 22px #2c251d24; }
.proof-label { font:700 9px var(--mono); color:var(--red-pencil); }
.proof-slip p { margin:10px 0; font-size:16px; }
.proof-slip ins { color:var(--blue); text-decoration-style:wavy; }
.proof-marks { position:absolute; right:15px; bottom:8px; color:var(--red-pencil); letter-spacing:7px; transform:rotate(-7deg); }
.margin-note { position:absolute; right:33%; top:40px; color:var(--blue); font:700 18px/1.2 var(--text); font-style:italic; transform:rotate(-8deg); }
.scroll-cue { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); font:700 9px var(--mono); text-transform:uppercase; letter-spacing:.13em; text-decoration:none; display:flex; align-items:center; gap:12px; }
.scroll-cue i { width:45px; height:1px; background:var(--ink); position:relative; }
.scroll-cue i::after { content:""; position:absolute; right:0; top:-3px; width:6px; height:6px; border-right:1px solid; border-bottom:1px solid; transform:rotate(-45deg); }

.reveal { opacity:0; transform:translateY(12px); animation: paper-in .75s cubic-bezier(.2,.75,.25,1) forwards; }
.hero-kicker { animation-delay:.1s }.masthead-wrap .reveal:nth-child(1){animation-delay:.2s}.masthead{animation-delay:.28s}.price{animation-delay:.36s}.hero-deck{animation-delay:.52s}.desk-scene{animation-delay:.65s}
@keyframes paper-in { to { opacity:1; transform:translateY(0); } }
@keyframes draw-line { to { stroke-dashoffset:0; } }

.puzzle-section { background: var(--paper-bright); padding: 108px max(28px, calc((100vw - 1240px)/2)) 120px; box-shadow: inset 0 16px 40px #4a402f12; }
.section-heading { display:grid; grid-template-columns:1fr 380px; gap:50px; align-items:end; border-top:3px solid var(--ink); padding-top:18px; margin-bottom:48px; }
.folio { margin:0 0 18px; font:700 10px var(--mono); text-transform:uppercase; letter-spacing:.13em; color:var(--blue); }
.section-heading h2, .masterclass h2, .creed h2, .pseudonyms h2, .symmetry h2 { margin:0; font:400 clamp(49px,6vw,86px)/.92 var(--display); letter-spacing:-.045em; }
.intro-copy { margin:0; font-size:18px; line-height:1.4; }
.puzzle-workspace { display:grid; grid-template-columns:minmax(480px, 1fr) minmax(410px,.9fr); gap:clamp(40px,6vw,88px); align-items:start; }
.grid-shell { position:relative; max-width:600px; }
.crossword { display:grid; grid-template-columns:repeat(7,1fr); border:3px solid var(--ink); background:var(--ink); gap:2px; aspect-ratio:1; box-shadow:10px 12px 0 var(--paper-deep); }
.cell { position:relative; background:var(--paper-bright); min-width:0; display:grid; place-items:center; }
.cell.block { background:var(--ink); }
.cell input { width:100%; height:100%; border:0; padding:10% 0 0; background:transparent; color:var(--ink); text-align:center; text-transform:uppercase; font:700 clamp(25px,3.6vw,50px)/1 var(--mono); caret-color:transparent; cursor:pointer; border-radius:0; }
.cell input:focus { outline:0; }
.cell.active { background:#d7e2f5; }
.cell.cross-active { background:#e9e6dd; }
.cell.wrong::after { content:""; width:38%; height:2px; background:var(--red-pencil); position:absolute; bottom:15%; transform:rotate(-14deg); }
.cell.revealed input { color:var(--blue); }
.cell-number { position:absolute; z-index:2; left:5px; top:3px; font:700 clamp(7px,.8vw,10px) var(--mono); pointer-events:none; }
.grid-meta { max-width:600px; display:flex; justify-content:space-between; padding:17px 0; border-bottom:1px solid var(--ink); font:700 9px var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.puzzle-actions { max-width:600px; display:grid; grid-template-columns:1fr 1fr auto; margin-top:20px; gap:8px; }
.puzzle-actions button, .build-step, .rotate-control, .alias-slip button { min-height:46px; border:1px solid var(--ink); background:transparent; color:var(--ink); cursor:pointer; font:700 9px var(--mono); letter-spacing:.05em; text-transform:uppercase; transition:background .2s,color .2s,transform .2s; }
.puzzle-actions button:hover, .puzzle-actions button:focus-visible { color:var(--paper-bright); background:var(--blue); border-color:var(--blue); }
.puzzle-actions button:last-child { border-color:var(--faint); color:var(--graphite); padding:0 17px; }
.action-status { max-width:600px; min-height:27px; margin:13px 0 0; font-size:14px; font-style:italic; color:var(--graphite); }
.clue-sheet { border-top:3px solid var(--ink); }
.clue-sheet-head { display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--ink); font:700 10px var(--mono); text-transform:uppercase; letter-spacing:.1em; }
.clue-group h3 { font:400 30px var(--display); margin:26px 0 6px; }
.clue { border-bottom:1px solid #aaa395; }
.clue button.clue-line { width:100%; min-height:60px; padding:12px 5px; border:0; background:transparent; color:var(--ink); text-align:left; display:grid; grid-template-columns:32px 1fr auto; gap:8px; align-items:start; cursor:pointer; font:500 18px/1.35 var(--text); }
.clue-number { font:700 12px/1.9 var(--mono); }
.enumeration { font:700 12px/2 var(--mono); color:var(--graphite); }
.clue.active .clue-line { color:var(--blue-dark); }
.clue.active .clue-number::after { content:"→"; margin-left:5px; color:var(--blue); }
.how-button { display:block; min-height:44px; margin:-5px 0 4px 40px; border:0; background:none; padding:8px 0; color:var(--blue); cursor:pointer; font:700 9px var(--mono); text-transform:uppercase; letter-spacing:.08em; }
.how-button::before { content:"+ "; }
.clue.open .how-button::before { content:"− "; }
.clue-anatomy { display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; }
.clue-anatomy > div { overflow:hidden; }
.clue.open .clue-anatomy { grid-template-rows:1fr; }
.anatomy-inner { margin:0 0 14px 40px; padding:12px 14px; border-left:3px solid var(--blue); background:#e7ecf3; font-size:14px; line-height:1.4; }
.definition { text-decoration:underline 2px var(--blue); text-underline-offset:3px; }
.fodder { background:#f0d978; padding:0 3px; }
.container { border-left:1px solid var(--blue); border-right:1px solid var(--blue); padding:0 4px; position:relative; }
.anatomy-label { display:block; font:700 8px var(--mono); letter-spacing:.1em; color:var(--blue-dark); margin-bottom:6px; }
.active-note { margin-top:28px; padding:20px 24px 18px; background:var(--ink); color:var(--paper); min-height:110px; position:relative; }
.active-note::before { content:""; position:absolute; width:20px; height:20px; top:-10px; left:34px; background:var(--ink); transform:rotate(45deg); }
.active-note-label { font:700 8px var(--mono); color:#a9bde3; letter-spacing:.12em; text-transform:uppercase; }
.active-note p { margin:7px 0 0; font-size:16px; line-height:1.4; }
.penny { position:absolute; width:72px; height:72px; right:-24px; top:-25px; border-radius:50%; display:grid; place-items:center; opacity:0; background:radial-gradient(circle at 35% 32%,#eee4c4,#a99259 48%,#5b5136 80%); border:3px double #5e5335; box-shadow:3px 5px 13px #0004; transform:translateY(-170px) rotateY(0); z-index:3; }
.penny span { font:700 20px var(--display); color:#655b3c; border:1px solid #6f6342; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; }
.penny.drop { animation:coin-drop 1.2s cubic-bezier(.18,.68,.32,1.2) forwards; }
.solved-stamp { position:absolute; z-index:4; left:50%; top:50%; opacity:0; transform:translate(-50%,-50%) rotate(-11deg) scale(1.8); padding:12px 18px; border:5px double var(--blue); color:var(--blue); background:#f4f1ead9; text-align:center; font:700 clamp(20px,3vw,36px)/.9 var(--mono); letter-spacing:.08em; pointer-events:none; }
.solved-stamp.show { animation:stamp-in .5s .8s cubic-bezier(.15,.9,.2,1.4) forwards; }
@keyframes coin-drop { 0%{opacity:0;transform:translateY(-170px) rotateY(0)} 35%{opacity:1} 75%{transform:translateY(0) rotateY(600deg)} 88%{transform:translateY(-16px) rotateY(670deg)} 100%{opacity:1;transform:translateY(0) rotateY(720deg)} }
@keyframes stamp-in { to{opacity:1;transform:translate(-50%,-50%) rotate(-11deg) scale(1)} }

.drop-section { min-height:680px; background:var(--ink); color:var(--paper); display:grid; grid-template-columns:.35fr 1fr 1fr; align-items:center; padding:90px max(28px,calc((100vw - 1240px)/2)); position:relative; overflow:hidden; }
.drop-number { align-self:start; padding-top:20px; font:400 160px/.8 var(--display); color:#2b2b2b; }
.folio-light { color:#86a2d3; }
.drop-copy { z-index:1; }
.drop-copy h2 { margin:0; font:400 clamp(54px,6.5vw,94px)/.92 var(--display); letter-spacing:-.05em; }
.drop-copy h2 em { color:#7fa1dc; }
.drop-copy > p:last-child { max-width:560px; color:#ccc8bf; font-size:20px; margin-top:30px; }
.drop-diagram { height:430px; position:relative; }
.drop-diagram svg { width:100%; height:100%; }
.drop-diagram path { fill:none; stroke:#526070; stroke-width:1.5; stroke-dasharray:4 7; }
.thought { position:absolute; border:1px solid #65625d; padding:9px 12px; font:700 10px var(--mono); letter-spacing:.06em; background:var(--ink); }
.thought-a{top:40px;left:20%}.thought-b{top:160px;right:5%}.thought-c{bottom:48px;left:9%;color:#91acd9;border-color:var(--blue)}
.drop-coin { position:absolute; left:48%; top:44%; width:76px; height:76px; border:2px solid #7f7350; color:#b3a67e; border-radius:50%; display:grid; place-items:center; font:400 34px var(--display); box-shadow:inset 0 0 0 7px var(--ink),inset 0 0 0 8px #70674d; }

.masterclass { padding:120px max(28px,calc((100vw - 1240px)/2)); }
.masterclass-head { display:grid; grid-template-columns:1fr .5fr; column-gap:50px; border-top:3px solid var(--ink); padding-top:20px; }
.masterclass-head .folio { grid-column:1/-1; }
.masterclass-head p:last-child { align-self:end; margin:0; font-size:19px; max-width:360px; }
.workbench { margin-top:65px; display:grid; grid-template-columns:210px 1fr 250px; min-height:430px; border:1px solid var(--ink); box-shadow:13px 14px 0 var(--paper-deep); }
.workbench-controls { display:flex; flex-direction:column; border-right:1px solid var(--ink); }
.build-step { flex:1; min-height:74px; border:0; border-bottom:1px solid var(--ink); text-align:left; padding:0 18px; }
.build-step:last-child { border-bottom:0; }
.build-step span { display:inline-grid; place-items:center; width:26px; height:26px; border:1px solid; margin-right:9px; border-radius:50%; }
.build-step.active { background:var(--blue); color:white; }
.build-stage { padding:35px clamp(30px,5vw,70px); display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; }
.stage-counter { position:absolute; top:22px; right:25px; font:700 9px var(--mono); letter-spacing:.09em; }
.clue-blueprint { min-height:140px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:15px; font:400 clamp(36px,5vw,70px)/1 var(--display); text-align:center; }
.blueprint-piece { display:inline-block; position:relative; padding:8px 12px; animation:piece-in .45s cubic-bezier(.2,.8,.25,1) both; }
.blueprint-piece.answer { color:var(--blue); border:2px solid var(--blue); letter-spacing:.14em; font-family:var(--mono); font-weight:700; }
.blueprint-piece.definition { text-decoration-thickness:3px; }
.blueprint-piece.fodder { font-style:italic; }
.blueprint-piece.indicator { font-size:.45em; font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em; }
.blueprint-plus { color:var(--faint); font-family:var(--mono); }
.stage-explainer { max-width:550px; margin:20px auto 0; text-align:center; font-size:17px; color:var(--graphite); }
@keyframes piece-in { from{opacity:0;transform:translateY(12px) rotate(-2deg)} }
.editor-margin { border-left:1px solid var(--ink); padding:25px 22px; background:#ece7dc; }
.editor-margin p { margin:0 0 22px; color:var(--blue); font:700 9px var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.editor-margin span { display:block; font-size:16px; font-style:italic; transform:rotate(-1.5deg); }

.creed { display:grid; grid-template-columns:.72fr 1.28fr; background:#ded8cc; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); }
.creed-lead { padding:110px max(36px,calc((100vw - 1240px)/2)) 110px max(28px,calc((100vw - 1240px)/2)); border-right:1px solid var(--ink); }
.creed-lead > p:not(.folio) { max-width:470px; font-size:19px; }
.blue-oath { margin-top:42px; color:var(--blue); font:italic 25px var(--text); border-bottom:2px solid var(--blue); width:max-content; max-width:100%; transform:rotate(-2deg); }
.rules-ledger { list-style:none; padding:0; margin:0; }
.rules-ledger li { min-height:150px; display:grid; grid-template-columns:62px 1fr 130px; align-items:center; gap:20px; padding:25px max(28px,calc((100vw - 1240px)/2)) 25px 38px; border-bottom:1px solid var(--ink); }
.rules-ledger li:last-child { border-bottom:0; }
.rules-ledger li > span { font:700 13px var(--mono); color:var(--blue); }
.rules-ledger h3 { font:400 27px var(--display); margin:0 0 5px; }
.rules-ledger p { margin:0; font-size:15px; line-height:1.4; }
.rules-ledger b { font:700 8px var(--mono); letter-spacing:.07em; text-align:right; }

.pseudonyms { padding:120px max(28px,calc((100vw - 1240px)/2)); background:var(--blue-dark); color:var(--paper); display:grid; grid-template-columns:1.1fr .9fr .9fr; gap:18px; }
.pseudonym-title-block { grid-column:1/3; padding:15px 8vw 70px 0; }
.pseudonym-title-block > p:last-child { max-width:560px; color:#d2d9e4; }
.name-card { min-height:270px; padding:30px; border:1px solid #7891ba; display:flex; flex-direction:column; justify-content:space-between; transition:background .25s, transform .25s; }
.name-card:hover { background:#24498b; transform:translateY(-5px); }
.name-card-large { grid-row:2/4; min-height:558px; background:var(--paper); color:var(--ink); border-color:var(--paper); }
.monogram { width:66px; height:66px; border:1px solid currentColor; border-radius:50%; display:grid; place-items:center; font:400 24px var(--display); }
.name-card span { font:700 8px var(--mono); letter-spacing:.08em; text-transform:uppercase; opacity:.75; }
.name-card h3 { font:400 38px var(--display); margin:8px 0 12px; }
.name-card p { margin:0; font-size:16px; line-height:1.45; }
.barley-ledger { position:relative; margin:28px 0; padding:21px 0 30px; border-top:1px solid var(--faint); border-bottom:1px solid var(--faint); display:grid; gap:5px; }
.barley-ledger span { color:var(--blue); margin-bottom:7px; }
.barley-ledger b { font:700 8px var(--mono); letter-spacing:.07em; }
.barley-ledger i { position:absolute; right:4px; bottom:-17px; color:var(--blue); font:italic 25px var(--text); transform:rotate(-7deg); }
.alias-slip { background:#d8d0c0; color:var(--ink); padding:35px; display:flex; flex-direction:column; align-items:center; justify-content:center; transform:rotate(1.1deg); box-shadow:0 12px 35px #07152b55; }
.alias-slip > span { font:700 9px var(--mono); text-transform:uppercase; letter-spacing:.1em; }
.alias-slip strong { margin:18px 0; color:var(--blue); font:700 30px var(--mono); letter-spacing:.11em; }
.alias-slip button { width:100%; padding:0 12px; }
.alias-slip button:hover { background:var(--ink); color:var(--paper); }

.symmetry { padding:120px max(28px,calc((100vw - 1240px)/2)); display:grid; grid-template-columns:.8fr 1fr 150px; gap:60px; align-items:center; position:relative; }
.symmetry-copy h2 { font-size:clamp(48px,5.2vw,75px); }
.symmetry-copy > p:not(.folio) { max-width:520px; }
.rotate-control { margin-top:28px; width:230px; display:flex; align-items:center; justify-content:space-between; padding:0 15px; background:var(--ink); color:var(--paper); }
.rotate-control:hover { background:var(--blue); border-color:var(--blue); }
.rotate-control i { font-style:normal; color:#9db3da; }
.symmetry-board { aspect-ratio:1; background:#ded8cc; padding:9%; position:relative; box-shadow:12px 13px 0 var(--ink); transition:transform .8s cubic-bezier(.3,.8,.2,1); }
.symmetry-board.rotated { transform:rotate(180deg); }
.mini-grid { width:100%; height:100%; display:grid; grid-template-columns:repeat(7,1fr); gap:2px; background:var(--ink); border:2px solid var(--ink); }
.mini-cell { background:var(--paper); }
.mini-cell.block { background:var(--ink); }
.axis { position:absolute; background:var(--blue); opacity:.65; pointer-events:none; }
.axis-h { height:1px; left:3%; right:3%; top:50%; }
.axis-v { width:1px; top:3%; bottom:3%; left:50%; }
.plan-label { position:absolute; font:700 8px var(--mono); letter-spacing:.1em; color:var(--blue); }
.label-a { top:4%; right:8%; }.label-b { bottom:3%; left:7%; }
.symmetry-aside { border-left:1px solid var(--ink); padding-left:20px; }
.symmetry-aside span { display:block; font:400 82px/.8 var(--display); color:var(--blue); }
.symmetry-aside p { font-size:14px; line-height:1.3; }

.site-footer { background:var(--ink); color:var(--paper); padding:46px max(28px,calc((100vw - 1240px)/2)); display:grid; grid-template-columns:1fr auto; align-items:end; gap:14px 40px; }
.footer-mark { grid-column:1/-1; padding-bottom:25px; border-bottom:1px solid #555; font:400 28px var(--display); }
.footer-mark span { color:var(--blue); }
.site-footer p { margin:0; font-size:14px; color:#bdb9b0; }
.site-footer nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:25px; }
.site-footer a { min-height:44px; display:inline-flex; align-items:center; font:700 9px var(--mono); text-transform:uppercase; letter-spacing:.06em; text-decoration-thickness:1px; text-underline-offset:4px; }

@media (max-width: 950px) {
  :root { --page:calc(100vw - 40px); }
  .hero { min-height:860px; padding-left:20px; padding-right:20px; }
  .masthead { font-size:clamp(78px,14vw,120px); }
  .puzzle-workspace { grid-template-columns:minmax(360px, .9fr) 1fr; gap:32px; }
  .cell input { font-size:clamp(24px,5vw,39px); }
  .drop-section { grid-template-columns:0 1.15fr .85fr; }
  .drop-number { opacity:0; }
  .workbench { grid-template-columns:160px 1fr; }
  .masterclass { padding-bottom:82px; }
  .editor-margin { grid-column:1/-1; border-left:0; border-top:1px solid var(--ink); min-height:100px; }
  .creed { grid-template-columns:1fr; }
  .creed-lead { border-right:0; border-bottom:1px solid var(--ink); padding-top:82px; padding-bottom:82px; }
  .rules-ledger li { padding-right:28px; }
  .pseudonyms { grid-template-columns:1fr 1fr; }
  .pseudonyms { padding-bottom:82px; }
  .pseudonym-title-block { grid-column:1/-1; }
  .name-card-large { grid-row:span 2; }
  .symmetry { grid-template-columns:.8fr 1fr; gap:38px; }
  .symmetry-aside { grid-column:1/-1; border-left:0; border-top:3px double var(--ink); padding:18px 22px; display:flex; gap:20px; align-items:center; background:var(--paper-deep); }
}

@media (max-width: 700px) {
  :root { --page:calc(100vw - 28px); }
  body { font-size:16px; }
  .desk-nav { min-height:112px; flex-wrap:wrap; align-content:start; }
  .desk-mark { width:44px;height:44px; }
  .nav-links { order:3; width:100%; margin:0; gap:0; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--ink); }
  .nav-links a { min-height:44px; padding:0 5px; display:grid; place-items:center; text-align:center; font-size:7px; }
  .nav-links a::after { display:none; }
  .issue-tab { min-width:125px; height:68px; }
  .hero { min-height:850px; padding:140px 14px 58px; }
  .hero-rule { height:7px; }
  .hero-kicker { font-size:8px; line-height:1.4; padding:9px 6px; }
  .masthead-wrap { min-height:310px; }
  .masthead { font-size:clamp(63px,23vw,94px); line-height:.8; margin-top:25px; }
  .masthead em { margin-left:.17em; }
  .edition,.price { font-size:7px; top:15px; }
  .pencil-stroke { width:92vw; top:54%; }
  .hero-deck { grid-template-columns:1fr; }
  .standfirst { padding:20px 0; font-size:21px; }
  .hero-deck blockquote { border-left:0; border-top:1px solid var(--ink); padding:17px 5px; }
  .desk-scene { height:150px; margin-top:16px; }
  .proof-slip { width:230px; min-height:105px; left:4%; top:20px; padding:14px 16px; }
  .proof-slip p { font-size:13px; }
  .blue-pencil { width:260px; right:-80px; top:35px; }
  .coffee-ring,.margin-note { display:none; }
  .scroll-cue { bottom:12px; }

  .puzzle-section,.masterclass,.symmetry { padding:75px 14px 82px; }
  .section-heading { grid-template-columns:1fr; gap:18px; margin-bottom:32px; }
  .section-heading h2,.masterclass h2,.creed h2,.pseudonyms h2,.symmetry h2 { font-size:48px; }
  .puzzle-workspace { display:block; }
  .grid-shell,.grid-meta,.puzzle-actions,.action-status { max-width:none; }
  .crossword { box-shadow:6px 7px 0 var(--paper-deep); gap:1px; }
  .cell input { font-size:clamp(22px,8.5vw,34px); }
  .cell-number { left:3px;top:2px;font-size:7px; }
  .puzzle-actions { grid-template-columns:1fr 1fr; }
  .puzzle-actions button { min-height:50px; }
  .puzzle-actions button:last-child { grid-column:1/-1; width:46%; justify-self:end; min-height:44px; }
  .clue-sheet { margin-top:45px; }
  .clue button.clue-line { font-size:17px; grid-template-columns:30px 1fr auto; }
  .active-note { margin-top:24px; }
  .penny { right:-4px; }

  .drop-section { min-height:730px; display:block; padding:80px 14px; }
  .drop-copy h2 { font-size:58px; }
  .drop-copy > p:last-child { font-size:18px; }
  .drop-diagram { height:280px; margin-top:30px; }
  .thought-a{left:2%;}.thought-b{right:0}.thought-c{bottom:10px;left:0}.drop-coin{width:62px;height:62px}

  .masterclass { padding-bottom:62px; }
  .masterclass-head { grid-template-columns:1fr; }
  .masterclass-head p:last-child { margin-top:22px; }
  .workbench { margin-top:38px; grid-template-columns:1fr; box-shadow:7px 8px 0 var(--paper-deep); }
  .workbench-controls { flex-direction:row; border-right:0; border-bottom:1px solid var(--ink); overflow-x:auto; }
  .build-step { min-width:110px; min-height:64px; padding:0 9px; text-align:center; }
  .build-step span { display:none; }
  .build-stage { min-height:330px; padding:50px 20px 30px; }
  .clue-blueprint { font-size:37px; gap:8px; }
  .blueprint-piece { padding:6px; }
  .editor-margin { grid-column:auto; }

  .creed { display:block; }
  .creed-lead { padding:68px 14px; }
  .rules-ledger li { min-height:180px; grid-template-columns:40px 1fr; padding:24px 14px; gap:10px; }
  .rules-ledger li b { grid-column:2; text-align:left; color:var(--blue-dark); }
  .blue-oath { font-size:21px; }

  .pseudonyms { padding:72px 14px; display:block; }
  .pseudonym-title-block { padding:0 0 40px; }
  .name-card,.name-card-large,.alias-slip { min-height:280px; margin-bottom:14px; }
  .name-card-large { min-height:370px; }
  .symmetry { display:block; }
  .symmetry-board { margin-top:45px; box-shadow:7px 8px 0 var(--ink); }
  .symmetry-aside { margin-top:45px; }

  .site-footer { display:block; padding:42px 14px; }
  .site-footer p { margin:22px 0 12px; }
  .site-footer nav { display:block; }
  .site-footer a { width:100%; border-top:1px solid #444; }
}

@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; }
  .pencil-stroke path { stroke-dashoffset:0; }
}

/* Guide */
.guide-body { background:var(--paper); }
.guide-main { width:var(--page); margin:0 auto; padding:130px 0 72px; }
.guide-hero { border-top:9px double var(--ink); border-bottom:1px solid var(--ink); padding:20px 0 50px; position:relative; }
.guide-hero h1 { margin:20px 0 10px; font:400 clamp(74px,11vw,150px)/.79 var(--display); letter-spacing:-.06em; }
.guide-hero h1 em { color:var(--blue); font-style:normal; }
.guide-hero .deck { max-width:680px; margin-left:auto; font-size:24px; line-height:1.25; }
.guide-folio { position:absolute; right:0; top:20px; font:700 9px var(--mono); letter-spacing:.1em; }
.guide-layout { display:grid; grid-template-columns:220px minmax(0,720px) 1fr; gap:48px; padding-top:65px; }
.guide-toc { position:sticky; top:25px; align-self:start; border-top:2px solid var(--ink); }
.guide-toc a { min-height:44px; display:flex; align-items:center; border-bottom:1px solid var(--faint); font:700 9px var(--mono); text-decoration:none; text-transform:uppercase; }
.guide-article section { margin-bottom:66px; scroll-margin-top:20px; }
.guide-article h2 { margin:0 0 16px; font:400 43px/1 var(--display); letter-spacing:-.03em; }
.guide-article h3 { margin:28px 0 7px; font:400 24px var(--display); }
.guide-article p { margin:0 0 17px; }
.guide-article code { font:700 12px var(--mono); color:var(--blue-dark); background:#e2ddd2; padding:2px 5px; }
.token-strip { display:grid; grid-template-columns:repeat(4,1fr); margin:30px 0; border:1px solid var(--ink); }
.token { min-height:105px; padding:12px; display:flex; flex-direction:column; justify-content:space-between; font:700 8px var(--mono); }
.token:nth-child(1){background:#f4f1ea}.token:nth-child(2){background:#1a1a1a;color:#f4f1ea}.token:nth-child(3){background:#52504b;color:white}.token:nth-child(4){background:#2857a6;color:white}
.guide-aside { border-left:1px solid var(--ink); padding-left:25px; }
.guide-aside blockquote { margin:0; color:var(--blue); font:italic 24px/1.25 var(--text); transform:rotate(-2deg); }
.guide-aside .mini-proof { margin-top:70px; background:#ded8cc; padding:24px; box-shadow:7px 8px 0 var(--ink); font:700 10px/1.7 var(--mono); }
.prompt-card { background:var(--ink); color:var(--paper); padding:28px 30px; border-left:7px solid var(--blue); font-size:16px; }
.prompt-card p { margin:0; }
@media(max-width:900px){.guide-layout{grid-template-columns:170px 1fr}.guide-aside{display:none}.guide-hero .deck{margin-left:0}.guide-main{padding-top:105px}}
@media(max-width:700px){.guide-main{width:calc(100vw - 28px);padding:142px 0 54px}.guide-hero h1{font-size:68px}.guide-hero .deck{font-size:20px}.guide-folio{display:none}.guide-layout{display:block;padding-top:38px}.guide-toc{position:static;margin-bottom:46px}.guide-article h2{font-size:38px}.token-strip{grid-template-columns:1fr 1fr}.site-header.guide-header .issue-tab span{display:none}}

/* Pass 2 — external critique */
html { scroll-padding-top: 24px; }
body {
  background:
    radial-gradient(circle at 16% 8%, #fffdf7 0, transparent 31%),
    radial-gradient(circle at 88% 34%, #ded8cb66 0, transparent 29%),
    var(--paper);
  text-rendering: optimizeLegibility;
}
h1,h2,h3 { text-wrap: balance; }
p { text-wrap: pretty; }
button,a { touch-action: manipulation; }
.nav-links a:hover,.issue-tab:hover,.site-footer a:hover { color:var(--blue); }
.issue-tab:hover { color:#fff; background:var(--blue-dark); }

.masthead-wrap { place-items:stretch; isolation:isolate; }
.masthead {
  align-self:center;
  width:100%;
  padding-left:6.5%;
  text-align:left;
  line-height:.68;
  text-wrap:nowrap;
}
.masthead em { display:block; margin-left:44%; width:max-content; }
.hero-index { position:absolute; left:0; bottom:25px; display:grid; gap:5px; font:700 8px/1.55 var(--mono); letter-spacing:.11em; }
.hero-index span { color:var(--blue); text-transform:uppercase; }
.hero-index b { font-weight:400; }
.hero-blue-note { position:absolute; right:5%; top:54%; margin:0; color:var(--blue); font:italic 19px/1.05 var(--text); transform:rotate(-7deg); }
.pencil-stroke { top:53%; width:min(63vw,790px); }
.hero-deck { grid-template-columns:1.48fr .52fr; }
.standfirst { font-weight:400; letter-spacing:-.012em; }
.desk-scene { height:220px; background:linear-gradient(104deg,#cfc7b8 0,#e7e1d5 46%,#cbc1af 100%); }
.desk-scene::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,#00000010 1px,transparent 1px); background-size:33px 100%; mix-blend-mode:multiply; opacity:.28; }
.blue-pencil { top:47px; height:29px; line-height:29px; }
.blue-pencil::before { border-top-width:14.5px; border-bottom-width:14.5px; }
.type-strip { position:absolute; left:34%; bottom:18px; z-index:1; width:52%; padding:10px 16px; border-top:1px solid #777066; border-bottom:1px solid #777066; background:#eee9dfba; font:500 12px var(--mono); transform:rotate(-1deg); }
.type-strip span { color:var(--blue); font-weight:700; margin-right:12px; }
.type-strip b { margin-left:15px; letter-spacing:.12em; }
.type-strip i { float:right; color:var(--red-pencil); font-family:var(--text); font-size:13px; }

.puzzle-section { position:relative; background:linear-gradient(100deg,#fcfaf4 0,#f7f3e9 68%,#ebe5d8 100%); }
.puzzle-section::before { content:""; position:absolute; left:max(14px,calc((100vw - 1320px)/2)); top:108px; bottom:120px; width:2px; background:var(--blue); opacity:.48; }
.section-heading { grid-template-columns:1fr 410px; margin-bottom:56px; }
.section-heading h2 { max-width:780px; }
.grid-shell { max-width:620px; }
.crossword { box-shadow:12px 14px 0 #cfc7b9; }
.cell { transition:background-color .16s ease; }
.cell.active { background:#c5d6f2; box-shadow:inset 0 0 0 3px var(--blue); }
.cell.cross-active { background:#e4e8e8; }
.grid-meta { max-width:620px; display:grid; grid-template-columns:repeat(4,auto); gap:12px; }
.grid-meta span:last-child { color:var(--blue-dark); text-align:right; font-variant-numeric:tabular-nums; }
.ink-progress { max-width:620px; height:4px; background:#d8d1c4; overflow:hidden; }
.ink-progress span { display:block; width:100%; height:100%; background:var(--blue); transform:scaleX(0); transform-origin:left center; transition:transform .28s cubic-bezier(.2,.8,.25,1); }
.parse-key { display:flex; gap:18px; align-items:center; min-height:43px; border-bottom:1px solid var(--faint); color:var(--graphite); font:700 8px var(--mono); text-transform:uppercase; letter-spacing:.06em; }
.parse-key span { position:relative; }
.key-definition { text-decoration:underline 2px var(--blue); text-underline-offset:3px; }
.key-fodder { background:#f0d978; padding:2px 4px; }
.key-container { padding:1px 7px; border-left:2px solid var(--blue); border-right:2px solid var(--blue); }
.clue button.clue-line { transition:color .18s ease,background-color .18s ease,padding-left .18s ease; }
.clue button.clue-line:hover { background:#ece7dc; padding-left:11px; }
.clue.active { box-shadow:inset 3px 0 0 var(--blue); }
.how-button { width:auto; transition:color .18s ease,letter-spacing .18s ease; }
.how-button:hover { color:var(--ink); letter-spacing:.13em; }
.anatomy-inner { position:relative; padding:15px 18px; background:linear-gradient(90deg,#dfe7f2,#eef1f2); box-shadow:inset 0 -1px #bac7d6; }
.container { border:0; padding:0 8px; }
.container::before,.container::after { content:""; position:absolute; top:-2px; bottom:-2px; width:5px; border-top:1px solid var(--blue); border-bottom:1px solid var(--blue); }
.container::before { left:0; border-left:2px solid var(--blue); }
.container::after { right:0; border-right:2px solid var(--blue); }
.drop-flash { position:absolute; inset:-7%; z-index:2; opacity:0; pointer-events:none; border-radius:50%; }
.drop-flash i { position:absolute; left:50%; top:50%; width:48%; height:1px; background:linear-gradient(90deg,var(--blue),transparent); transform-origin:left; }
.drop-flash i:nth-child(2){transform:rotate(90deg)}.drop-flash i:nth-child(3){transform:rotate(180deg)}.drop-flash i:nth-child(4){transform:rotate(270deg)}
.drop-flash.burst { animation:drop-flash .9s .45s cubic-bezier(.15,.8,.2,1) both; }
@keyframes drop-flash { 0%{opacity:0;transform:scale(.45)} 35%{opacity:.85} 100%{opacity:0;transform:scale(1.18)} }
.solved-stamp { box-shadow:0 0 0 12px #f4f1eab8,8px 10px 0 #193a7633; }

.drop-section::before { content:""; position:absolute; width:min(56vw,760px); aspect-ratio:1; right:-12%; top:50%; transform:translateY(-50%); border-radius:50%; background:repeating-radial-gradient(circle,transparent 0 42px,#8193a21c 43px 44px); }
.drop-copy h2 { position:relative; }
.drop-copy h2::after { content:"PEN + NY"; position:absolute; left:7%; bottom:-28px; color:#8aa5d4; font:700 9px var(--mono); letter-spacing:.14em; transform:rotate(-4deg); }
.thought { box-shadow:5px 6px 0 #000; }

.masterclass { background:linear-gradient(180deg,#f4f1ea,#ede8dc); }
.workbench { position:relative; background:#f8f5ed; }
.workbench::before { content:"LIVE PROOF"; position:absolute; z-index:2; top:-13px; right:28px; padding:4px 9px; color:white; background:var(--red-pencil); font:700 8px var(--mono); letter-spacing:.1em; transform:rotate(2deg); }
.build-stage { background:radial-gradient(circle at 50% 46%,#fffdf8,#f0ece2); }
.stage-ledger { position:absolute; left:24px; bottom:18px; right:24px; padding-top:8px; border-top:1px solid #aaa395; color:var(--blue-dark); text-align:center; font:700 8px var(--mono); letter-spacing:.09em; }
.build-step:hover:not(.active) { background:#e1ddd4; }

.creed-lead { position:relative; overflow:hidden; }
.creed-lead::after { content:"X"; position:absolute; right:-20px; bottom:-90px; color:#1a1a1a0a; font:400 310px/.8 var(--display); transform:rotate(-8deg); }
.rules-ledger { counter-reset:creed; }
.rules-ledger li { position:relative; transition:background-color .2s ease; }
.rules-ledger li:hover { background:#e8e3d8; }
.rules-ledger li::before { content:"FAIR"; position:absolute; right:18px; top:14px; color:#2857a61f; font:700 34px var(--mono); transform:rotate(-6deg); }
.rules-ledger li:nth-child(even)::before { content:"EXACT"; transform:rotate(4deg); }
.rules-ledger h3 { letter-spacing:-.025em; }

.pseudonyms { position:relative; background:linear-gradient(128deg,#142f60 0,#1e478a 58%,#17386e 100%); }
.pseudonyms::before { content:"PRIVATE FILE · SETTERS 1968—2026"; position:absolute; right:4.5%; top:55px; color:#9ab0d6; font:700 8px var(--mono); letter-spacing:.14em; }
.name-card { position:relative; background:#173b75; box-shadow:0 12px 30px #06142d36; }
.name-card::after { content:"ARCHIVE COPY"; position:absolute; right:15px; top:15px; color:#a8bbdc; font:700 7px var(--mono); letter-spacing:.11em; }
.name-card-large { background:linear-gradient(112deg,#faf8f2,#e7e0d2); transform:rotate(-1.2deg); box-shadow:15px 18px 0 #0c2857; }
.name-card-large:hover { transform:rotate(-1.2deg) translateY(-5px); background:#faf8f2; }
.alias-slip { transform:rotate(2.2deg) translate(-8px,-8px); }

.symmetry { background:linear-gradient(90deg,#faf8f2,#ede7db); }
.symmetry-board { overflow:hidden; transform:none !important; }
.mini-grid { transition:transform .8s cubic-bezier(.2,.75,.2,1); transform-origin:center; }
.symmetry-board.rotated .mini-grid { transform:rotate(180deg); }
.rotation-status { margin:10px 0 0; max-width:330px; color:var(--blue-dark); font:700 8px/1.5 var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.rotate-control[aria-pressed="true"] { background:var(--blue); border-color:var(--blue); }

.site-footer a { transition:color .18s ease,transform .18s ease; }
.site-footer a:hover { transform:translateY(-2px); }

.plate-visible > * { animation:plate-enter .72s cubic-bezier(.2,.78,.2,1) both; }
.plate-visible > *:nth-child(2) { animation-delay:.07s; }
.plate-visible > *:nth-child(3) { animation-delay:.14s; }
@keyframes plate-enter { from{opacity:0;transform:translateY(24px)} }

/* Field notes become a working proof, not a text appendix. */
.guide-main { padding-bottom:88px; }
.guide-hero { min-height:480px; padding-right:2%; background:linear-gradient(117deg,transparent 0 63%,#e5dfd262 63% 64%,transparent 64%); }
.guide-hero::after { content:"PROOF\A READ\A CORRECT\A REPEAT"; white-space:pre; position:absolute; right:3%; bottom:42px; color:var(--blue); font:700 8px/2.1 var(--mono); letter-spacing:.14em; border-left:1px solid var(--blue); padding-left:18px; }
.guide-hero h1 { max-width:830px; }
.guide-hero .deck { max-width:660px; margin-right:17%; }
.guide-layout { grid-template-columns:190px minmax(0,740px) 1fr; gap:54px; }
.guide-article { counter-reset:guide-section; }
.guide-article > section { position:relative; padding:0 0 66px; margin-bottom:66px; border-bottom:3px double var(--ink); }
.guide-article > section:last-child { border-bottom:0; }
.guide-article > section::before { counter-increment:guide-section; content:"0" counter(guide-section); position:absolute; left:-52px; top:4px; color:var(--blue); font:700 10px var(--mono); }
.guide-article h2 { font-size:48px; }
.guide-article h3 { font-size:26px; letter-spacing:-.02em; }
.guide-article p { max-width:68ch; line-height:1.62; }
.guide-schematic { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:center; gap:9px; margin:32px 0 0; padding:18px; color:var(--paper); background:var(--ink); box-shadow:8px 9px 0 var(--paper-deep); font:700 9px var(--mono); text-transform:uppercase; letter-spacing:.06em; }
.guide-schematic span { display:grid; gap:5px; }
.guide-schematic b { color:#88a8df; }
.guide-schematic i { color:#88a8df; font-style:normal; }
.token-strip { transform:rotate(-.35deg); box-shadow:8px 9px 0 var(--paper-deep); }
.token { min-height:122px; }
.prompt-card { position:relative; box-shadow:10px 11px 0 #ded8cc; }
.prompt-card::before { content:"PROMPT PROOF"; position:absolute; right:18px; top:-11px; padding:3px 7px; background:var(--blue); color:white; font:700 7px var(--mono); letter-spacing:.1em; }
.guide-aside { position:relative; }
.guide-aside::after { content:"✓\A✓\A?"; white-space:pre; position:absolute; right:8px; top:230px; color:var(--red-pencil); font:italic 28px/1.6 var(--text); transform:rotate(-8deg); }

@media (max-width:950px) {
  .masthead { padding-left:3%; }
  .masthead em { margin-left:39%; }
  .hero-index { bottom:18px; }
  .section-heading { grid-template-columns:1fr 340px; }
  .grid-meta { grid-template-columns:repeat(2,1fr); }
  .grid-meta span:nth-child(even) { text-align:right; }
  .pseudonyms::before { top:35px; }
  .guide-hero { min-height:390px; }
  .guide-hero::after { display:none; }
  .guide-hero .deck { margin-right:0; }
  .guide-layout { grid-template-columns:160px 1fr; gap:48px; }
  .guide-article > section::before { display:none; }
}

@media (max-width:700px) {
  .nav-links a { font-size:8px; letter-spacing:.015em; }
  .hero { min-height:920px; }
  .masthead { min-width:0; max-width:100%; padding-left:1%; font-size:18vw; line-height:.82; letter-spacing:-.075em; }
  .masthead em { margin-left:24%; }
  .hero-index { display:none; }
  .hero-blue-note { right:4%; top:70%; font-size:15px; }
  .pencil-stroke { top:57%; }
  .hero-deck { display:block; }
  .desk-scene { height:178px; }
  .blue-pencil { right:-10px; }
  .type-strip { left:8%; bottom:12px; width:77%; padding:8px 10px; font-size:8px; }
  .type-strip i { display:none; }
  .puzzle-section::before { top:75px; bottom:82px; left:4px; }
  .section-heading { grid-template-columns:1fr; }
  .grid-meta { grid-template-columns:1fr 1fr; gap:8px; line-height:1.4; }
  .grid-meta span:nth-child(even) { text-align:right; }
  .parse-key { flex-wrap:wrap; gap:9px 14px; padding:8px 0; }
  .anatomy-inner { margin-left:30px; }
  .drop-flash { inset:0; }
  .drop-section::before { width:130vw; right:-62%; }
  .stage-ledger { font-size:7px; letter-spacing:.03em; }
  .workbench-controls { overflow:hidden; }
  .build-step { min-width:0; width:25%; padding:0 3px; font-size:7px; }
  .name-card,.name-card-large,.name-card-large:hover { transform:none; }
  .alias-slip { transform:rotate(1deg); }
  .pseudonyms::before { display:none; }
  .symmetry-board { overflow:visible; }
  .guide-hero { min-height:360px; background:none; }
  .guide-hero h1 { font-size:64px; }
  .guide-hero .deck { font-size:19px; }
  .guide-article > section { padding-bottom:42px; margin-bottom:48px; }
  .guide-article h2 { font-size:40px; }
  .guide-schematic { grid-template-columns:1fr 1fr; gap:12px; }
  .guide-schematic i { display:none; }
  .token { min-height:112px; }
}

/* Pass 3 — art direction: tactile proofing and the playable penny drop. */
html {
  scrollbar-color: var(--blue) var(--paper-deep);
  scrollbar-width: thin;
}
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--paper-deep); border-left: 1px solid #c8c1b4; }
::-webkit-scrollbar-thumb { background: var(--blue); border: 3px solid var(--paper-deep); }
::-webkit-scrollbar-thumb:hover { background: var(--blue-dark); }
body {
  font-optical-sizing: auto;
  font-kerning: normal;
  font-synthesis: none;
  font-variant-numeric: oldstyle-nums proportional-nums;
}
h1,h2,h3,.footer-mark { font-optical-sizing:auto; font-kerning:normal; }
.folio,.edition,.price,.grid-meta,.clue-number,.enumeration,.stage-counter,.stage-ledger,.issue-tab,.footer-mark + p,.site-footer a {
  font-variant-numeric: tabular-nums lining-nums;
}
a { text-decoration-skip-ink:auto; text-underline-offset:.16em; }
.visually-hidden { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
.drop-section :focus-visible,.pseudonyms :focus-visible,.site-footer :focus-visible { outline-color:#f7f4ed; }
.puzzle-actions button:hover,.build-step:hover,.rotate-control:hover,.alias-slip button:hover { transform:translateY(-2px); }
.puzzle-actions button:active,.build-step:active,.rotate-control:active,.alias-slip button:active { transform:translateY(1px); }
.build-step.active:hover { background:var(--blue-dark); }
.rotate-control:hover,.alias-slip button:hover { color:var(--paper); background:var(--blue-dark); border-color:var(--blue-dark); }
.guide-toc a,.nav-links a,.issue-tab { transition:color .22s cubic-bezier(.2,.8,.2,1),background-color .22s cubic-bezier(.2,.8,.2,1); }
.guide-toc a:hover,.guide-toc a:focus-visible { color:var(--blue); padding-left:7px; }

.drop-section {
  background:
    radial-gradient(circle at 78% 48%,#223047 0,transparent 27%),
    linear-gradient(108deg,#111 0,#1a1a1a 56%,#14181e 100%);
  box-shadow:inset 0 1px #ffffff12,inset 0 -1px #000;
}
.drop-section::after {
  content:"PROOF OF INSIGHT · 1A";
  position:absolute;
  left:max(28px,calc((100vw - 1240px)/2));
  bottom:28px;
  color:#6f7680;
  font:700 8px var(--mono);
  letter-spacing:.16em;
}
.drop-diagram { isolation:isolate; }
.drop-diagram::before {
  content:"PRESS THE COPPER";
  position:absolute;
  right:2%;
  top:5px;
  color:#7f9bc9;
  font:700 8px var(--mono);
  letter-spacing:.14em;
}
.drop-diagram svg { position:relative; z-index:-1; }
.drop-diagram path { stroke-dasharray:.012 .017; stroke-dashoffset:0; }
.thought { min-width:104px; transition:border-color .35s ease,color .35s ease,transform .55s cubic-bezier(.2,.8,.2,1),opacity .4s ease; }
.thought span { position:relative; display:block; }
.thought i { display:block; height:0; margin-top:2px; color:#bd7065; font:italic 12px var(--text); opacity:0; transform:translateY(-3px); transition:opacity .25s ease,transform .25s ease; }
.thought-a span::after,.thought-b span::after {
  content:"";
  position:absolute;
  left:-3px;
  top:52%;
  width:0;
  height:2px;
  background:var(--red-pencil);
  transform:rotate(-7deg);
  transition:width .42s cubic-bezier(.2,.8,.2,1);
}
.thought-c { top:62%; bottom:auto; left:5%; }
.drop-coin {
  appearance:none;
  z-index:4;
  padding:0;
  cursor:pointer;
  background:radial-gradient(circle at 34% 28%,#e6d8a9 0,#9d8c5a 43%,#4c442e 80%);
  transform-style:preserve-3d;
  transition:filter .2s ease,box-shadow .2s ease,transform .28s cubic-bezier(.2,.8,.2,1);
}
.drop-coin::before,.drop-coin::after { content:""; position:absolute; border-radius:50%; pointer-events:none; }
.drop-coin::before { inset:12px; border:1px solid #4b432f; box-shadow:inset 0 0 0 2px #b7a87d; }
.drop-coin::after { inset:5px; border:1px dashed #302b20; opacity:.55; }
.coin-face { position:relative; z-index:1; font:400 34px var(--display); text-shadow:0 1px #e9dcaf; }
.coin-prompt {
  position:absolute;
  top:calc(100% + 10px);
  left:50%;
  width:120px;
  color:#a9bde3;
  transform:translateX(-50%);
  font:700 8px/1.3 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.drop-coin:hover { filter:brightness(1.16); box-shadow:inset 0 0 0 7px var(--ink),inset 0 0 0 8px #70674d,0 0 0 6px #2857a633,0 14px 24px #0009; transform:translateY(-4px) rotate(-5deg); }
.drop-coin:focus-visible { outline-offset:7px; }
.drop-result {
  position:absolute;
  z-index:3;
  left:3%;
  right:auto;
  bottom:16px;
  align-items:baseline;
  justify-content:flex-start;
  gap:9px;
  color:#9ab2dc;
  font:700 11px var(--mono);
  letter-spacing:.1em;
  opacity:0;
  transform:translateY(22px);
}
.drop-result strong { color:var(--paper); font:400 clamp(48px,5.5vw,78px)/.8 var(--display); letter-spacing:-.05em; text-shadow:5px 6px 0 var(--blue-dark); }
.drop-result i { color:#6f7680; font-style:normal; }
.of-course { position:absolute; right:1%; bottom:26%; margin:0; color:#8daadd; font:italic 19px var(--text); opacity:0; transform:rotate(-7deg) translateY(8px); }
.drop-diagram.has-dropped path { animation:apparatus-trace .9s cubic-bezier(.25,.8,.2,1) both; }
.drop-diagram.has-dropped .drop-coin { animation:apparatus-coin 1.28s .12s cubic-bezier(.18,.72,.22,1) both; }
.drop-diagram.has-dropped .thought-a span::after { width:calc(100% + 6px); transition-delay:.18s; }
.drop-diagram.has-dropped .thought-b span::after { width:calc(100% + 6px); transition-delay:.46s; }
.drop-diagram.has-dropped .thought-a i { opacity:1; transform:none; transition-delay:.35s; }
.drop-diagram.has-dropped .thought-b i { opacity:1; transform:none; transition-delay:.62s; }
.drop-diagram.has-dropped .thought-c { border-color:#8dace0; color:#d9e3f3; transform:translateY(-5px); }
.drop-diagram.has-dropped .thought-c i { opacity:1; transform:none; transition-delay:.86s; color:#9bb6e2; }
.drop-diagram.has-dropped .drop-result { animation:apparatus-answer .62s 1.2s cubic-bezier(.13,.9,.2,1.08) both; }
.drop-diagram.has-dropped .of-course { animation:apparatus-note .45s 1.62s ease-out both; }
@keyframes apparatus-trace { from{stroke-dashoffset:1;opacity:.2} to{stroke-dashoffset:0;opacity:1} }
@keyframes apparatus-coin { 0%{transform:none} 38%{transform:translate(18px,-42px) rotateY(270deg) rotate(8deg)} 78%{transform:translate(110px,58px) rotateY(690deg) rotate(0)} 88%{transform:translate(110px,45px) rotateY(720deg)} 100%{transform:translate(110px,58px) rotateY(720deg)} }
@keyframes apparatus-answer { from{opacity:0;transform:translateY(22px) scale(.94)} to{opacity:1;transform:none} }
@keyframes apparatus-note { to{opacity:1;transform:rotate(-7deg) translateY(0)} }

.puzzle-section::after,.masterclass::after,.symmetry::after {
  content:"";
  position:absolute;
  pointer-events:none;
  inset:0;
  opacity:.12;
  background:repeating-linear-gradient(0deg,transparent 0 31px,#6f675b 32px,transparent 33px);
  mix-blend-mode:multiply;
}
.puzzle-section > *,.masterclass > *,.symmetry > * { position:relative; z-index:1; }
.masterclass,.symmetry { position:relative; }

@media (max-width:950px) {
  .drop-result { left:3%; }
  .drop-result strong { font-size:55px; }
}
@media (max-width:700px) {
  .drop-section { min-height:790px; padding-bottom:92px; }
  .drop-section::after { left:14px; bottom:20px; }
  .drop-diagram { height:330px; margin-top:24px; }
  .drop-diagram::before { right:0; }
  .thought { min-width:92px; padding:8px 9px; font-size:8px; }
  .thought-a { top:38px; left:2%; }
  .thought-b { top:125px; right:0; }
  .thought-c { top:62%; left:0; bottom:auto; }
  .drop-coin { left:43%; top:40%; }
  .drop-result { left:2%; bottom:12px; gap:5px; font-size:8px; }
  .drop-result strong { font-size:44px; text-shadow:3px 4px 0 var(--blue-dark); }
  .of-course { left:48%; right:auto; bottom:36%; font-size:16px; }
  .puzzle-section::after,.masterclass::after,.symmetry::after { opacity:.08; }
}

@media (prefers-reduced-motion: reduce) {
  .drop-diagram.has-dropped .drop-coin { transform:translate(110px,58px); }
  .drop-diagram.has-dropped .drop-result,.drop-diagram.has-dropped .of-course { opacity:1; transform:none; }
  .drop-diagram.has-dropped path { stroke-dashoffset:0; }
}