@font-face{font-family:Pixel;src:url('fonts/press-start-2p.ttf') format('truetype');font-display:swap}
@font-face{font-family:WorkshopMono;src:url('fonts/space-mono.ttf') format('truetype');font-display:swap}
:root{--background:#241d13;--ink:#f1dfa9;--gold:#efc439;--brown:#49311d;--muted:#c3b08a;--border:#705333;--pixel:Pixel,'Courier New',monospace;--mono:WorkshopMono,'Courier New',monospace;color-scheme:dark}
*{box-sizing:border-box}html{background:#18140e;scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--background);font:16px/1.7 var(--mono)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #fff0a7;outline-offset:6px}a{color:inherit}::selection{background:var(--gold);color:var(--background)}.icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter;flex-shrink:0}.icon-definitions{position:absolute;width:0;height:0;overflow:hidden}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.skip-link{position:absolute;left:20px;top:-80px;z-index:20;padding:12px;background:var(--gold);color:#241d13}.skip-link:focus{top:15px}
.workshop{min-height:100svh;border-top:5px solid var(--gold);background-image:radial-gradient(#a8875220 .6px,transparent .6px);background-size:5px 5px}.site-header{min-height:105px;max-width:1440px;margin:auto;padding:22px 64px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #69533266;gap:24px}.wordmark{color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:14px;font:13px/1.65 var(--pixel)}.wordmark>.icon{width:42px;height:42px;color:var(--gold);stroke-width:2.5}.logo-dot{color:var(--gold)}.header-note{font-size:12px;letter-spacing:1.5px;display:flex;align-items:center;gap:11px;color:#c7b78e}.status-dot{display:inline-block;width:6px;height:6px;flex-shrink:0;background:var(--gold);box-shadow:0 0 10px #efc43955}.utility-controls{display:flex;gap:9px}.utility-button{border:1px solid #74603e;border-radius:0;background:#2d2418;color:#cbbb97;min-height:39px;padding:8px 12px;font-size:12px;gap:9px;display:flex;align-items:center;justify-content:center}.utility-button .icon{width:16px;height:16px}.utility-button:hover,.utility-button[aria-pressed=true]:hover{background:#49351f;color:#ffde70}.cursor-toggle{border-color:transparent;color:#b5a17b}.site-content{max-width:1440px;margin:auto;padding:0 64px}
.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:451px;gap:20px;padding:44px 0 33px}.hero-copy{position:relative;z-index:1;padding:18px 0 28px}.eyebrow{display:flex;gap:13px;align-items:center;font-size:12px;letter-spacing:1.8px;color:#ccb98a;margin:0 0 26px}.eyebrow>span{color:#f1c039;font-size:19px}h1{font:400 clamp(24px,2.9vw,40px)/1.6 var(--pixel);letter-spacing:-1.3px;color:#f2d68b;margin:0 0 24px;text-shadow:4px 4px 0 #100d08}h1>span{color:#ecc035}.intro{font-size:16px;line-height:1.85;max-width:435px;color:#c8b891;margin:0 0 28px}.construction-stamp{display:inline-flex;align-items:center;gap:10px;color:#e1be63;background:#3c301a;border:1px solid #826426;padding:10px 12px;font-size:12px;transform:rotate(-1.5deg);box-shadow:3px 3px 0 #17130d}.construction-stamp .icon{width:18px;height:18px}.blinking-dot{font-size:18px;line-height:1;animation:blink 1.4s steps(1) infinite}.hero-art{min-width:0;position:relative;align-self:stretch;display:flex;align-items:center;margin:0}.hero-art img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;image-rendering:pixelated;box-shadow:0 0 0 3px #695032,6px 6px #15120d;outline:1px solid #ad7f3644;outline-offset:6px}.hero-art figcaption{position:absolute;bottom:0;left:0;font-size:12px;letter-spacing:.35px;display:flex;align-items:center;gap:9px;color:#bfaa7b;background:#241d13dc;padding:7px 0}
.navigation-section{padding-bottom:23px;scroll-margin-top:20px}.section-line{display:flex;align-items:center;gap:24px;padding:13px 0 25px}.section-line h2{font:400 12px/1.7 var(--pixel);margin:0;color:#e9d49b}.section-rule{height:1px;background:#6f58375c;flex:1}.section-index{color:#b6a37b;font-size:12px;letter-spacing:.7px}.boards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.destination-board{display:flex;position:relative;align-items:flex-start;justify-content:flex-start;flex-direction:column;min-height:187px;padding:24px 22px 22px;border:3px solid #81582f;background:repeating-linear-gradient(0deg,transparent 0 32px,#1f150b1c 32px 34px),#4a301c;box-shadow:inset 0 3px #a4763a70,inset 0 -5px #2c1f15,5px 6px 0 #110f0b;color:#f4d894;transition:transform .15s steps(3),background-color .15s,border-color .15s;text-decoration:none}.destination-board:nth-child(2){background-color:#543a21}.destination-board:nth-child(3){background-color:#483322}.destination-board:nth-child(4){background-color:#584026}.destination-board:hover,.destination-board:focus-visible{transform:translateY(-5px);background-color:#704c24;border-color:#ddb250;color:#ffe8ab}.fastener{position:absolute;width:5px;height:5px;background:#c59b50;border-bottom:2px solid #322217;box-shadow:1px 0 #322217;top:8px}.top-left{left:8px}.top-right{right:8px}.board-topline{display:flex;align-items:center;width:100%;justify-content:space-between;margin-bottom:18px}.board-topline .icon{width:28px;height:28px;color:#e5b753}.board-topline>span{font-size:12px;color:#cfac78}.board-title{font:400 clamp(12px,1.05vw,14px)/1.5 var(--pixel);text-shadow:2px 2px #21170e}.board-description{font-size:14px;color:#dac49c;line-height:1.65;margin-top:9px;padding-right:8px}.board-arrow{position:absolute;right:11px;bottom:12px;width:14px;height:14px;color:#c5a86c}.instruction{display:flex;align-items:center;gap:18px;margin-top:25px;padding:16px 0;color:#c3b28e}.instruction-tag{padding:4px 6px;border:1px solid #796641;color:#d2ba7e;font-size:12px;letter-spacing:.7px;flex-shrink:0}.instruction p{font-size:14px;margin:0;line-height:1.7}.instruction strong{color:#e4c772;font-weight:400}.instruction-end{margin-left:auto;font-size:12px;color:#baaa87}.touch-instruction{display:none}.site-footer{border-top:1px solid #69533266;padding:22px 0 26px;display:flex;justify-content:space-between;gap:15px;color:#bca982;font-size:12px;line-height:1.6}.footer-star{color:#e3ba42;margin-left:9px}.hazard-edge{height:9px;background:repeating-linear-gradient(-45deg,#ab832f 0 9px,#2f2516 9px 18px);opacity:.8}
.destination-content{display:none;padding:32px;border:2px solid var(--border);margin:0 0 35px;background:#2e2316;scroll-margin:20px}.destination-content:target{display:block}.destination-content h2,dialog h2{font:400 20px/1.8 var(--pixel);color:var(--gold);margin:20px 0}.destination-content p,dialog p{font-size:16px;color:#dbc9a2;line-height:1.9}.panel-label,dialog .panel-label{font-size:12px;color:#c4a774;letter-spacing:1px}.sample-list{margin:26px 0}.sample-list article{display:flex;align-items:center;gap:17px;padding:20px 0;border-top:1px solid #6c5136}.sample-number{color:#e5b648;font-family:var(--pixel);font-size:15px}.sample-list h3{font-size:16px;margin:0;font-weight:400;color:#f3deb2}.sample-list p{font-size:14px;margin:4px 0 0}.sample-tag{margin-left:auto;flex-shrink:0;border:1px solid #796137;padding:3px 6px;font-size:12px;color:#dfbd6c}.notebook{background:#dcc28a;color:#3b2b19;padding:20px 25px;margin:25px 0;box-shadow:5px 5px #17120b}.notebook p{color:#3b2b19;border-bottom:1px solid #977d4b66;padding:10px 0;margin:0}.notebook p>span{font-size:12px;margin-right:9px}.notebook .pencil-note{font-size:14px;border:0;opacity:.8}.about-note{color:#edc460;padding:18px 0;border-block:1px dashed #795d34;margin:27px 0}.fallback-back{display:inline-block;margin-top:12px;color:#e4bd64}
dialog{color:var(--ink);background:#2e2316;border:3px solid #b48c45;padding:34px;width:min(670px,calc(100% - 36px));max-height:85svh;overflow:auto;box-shadow:8px 8px 0 #141009;margin:auto}dialog::backdrop{background:#110e08d9}dialog .fallback-back{display:none}.dialog-close{position:absolute;right:10px;top:8px;color:#f0d397;background:transparent;border:1px solid #866438;font:26px/1 var(--mono);width:34px;height:34px}.back-button{padding:12px 15px;border:2px solid #a78243;color:#f3d38c;background:#4b351d;font-size:14px;box-shadow:3px 3px #18120d}.back-button:hover,.dialog-close:hover{background:#765229}.nail-cursor,.strike-effect{display:none}
.dialog-open{overflow:hidden}.nail-cursor{position:fixed;left:0;top:0;width:0;height:0;z-index:100;pointer-events:none;will-change:transform}.nail-visible .nail-cursor{display:block}.nail-visible,.nail-visible .destination-board{cursor:none}.nail-shape{position:absolute;display:block;left:0;top:0;width:0;height:0;transform:rotate(-24deg);filter:drop-shadow(2px 2px 0 #100c08)}.nail-shape::before{content:'';position:absolute;left:-7px;top:-32px;width:14px;height:5px;background:#f4e9c7;border-top:2px solid #fff6da;box-shadow:0 2px #827a65}.nail-shape::after{content:'';position:absolute;left:-2px;top:-25px;width:4px;height:25px;background:linear-gradient(to right,#f4e9c7 0 50%,#aaa58f 50%);clip-path:polygon(0 0,100% 0,100% 80%,50% 100%,0 80%)}.on-board .nail-shape{transform:rotate(0)}.on-board::after{content:'CLICK TO HAMMER';position:absolute;left:17px;top:12px;white-space:nowrap;padding:5px 7px;background:#17120de8;border:1px solid #a9833b;color:#f6cf68;font:12px/1.4 var(--mono);box-shadow:2px 2px #0d0a06}.strike-effect{position:fixed;width:0;height:0;z-index:110;pointer-events:none}.strike-effect.is-striking{display:block}.impact-nail{transform:rotate(0)}.hammer{position:absolute;max-width:none;width:160px;height:154px;left:-10px;top:-233px;transform-origin:132px 143px;image-rendering:pixelated;filter:drop-shadow(4px 4px 0 #0e0b0855)}.is-striking .hammer{animation:hammer-swing 700ms linear both}.is-striking .impact-nail{animation:nail-drive 700ms linear both}.spark{position:absolute;left:-2px;top:-12px;width:5px;height:5px;background:#f6d16b;opacity:0;--dx:0px;--dy:0px}.s1{--dx:-34px;--dy:-36px}.s2{--dx:27px;--dy:-32px;width:4px;height:4px}.s3{--dx:-40px;--dy:3px;background:#c49643}.s4{--dx:37px;--dy:7px}.s5{--dx:-4px;--dy:-50px;width:3px;height:7px}.is-striking .spark{animation:impact-sparks 700ms steps(5,end) both}.impact-word{position:absolute;left:-34px;top:22px;font:13px/1.5 var(--pixel);color:#ffe194;text-shadow:2px 2px #352311;white-space:nowrap;opacity:0}.is-striking .impact-word{animation:whack-word 700ms steps(3,end) both}.destination-board.is-striking{transition:none;transform:none}.destination-board.is-hit{animation:board-hit 260ms steps(3,end);border-color:#f0c252;background-color:#815928}
@keyframes hammer-swing{0%{transform:rotate(28deg);opacity:0}10%{transform:rotate(28deg);opacity:1}35%{transform:rotate(38deg)}55%{transform:rotate(-65deg)}63%{transform:rotate(-74deg)}77%{transform:rotate(-39deg);opacity:1}100%{transform:rotate(-20deg);opacity:0}}
.is-striking .impact-nail::after{transform-origin:top;animation:shaft-drive 700ms linear both}
@keyframes shaft-drive{0%,55%{transform:scaleY(1)}64%,100%{transform:scaleY(0)}}
@keyframes nail-drive{0%,55%{transform:translateY(0);opacity:1}64%,89%{transform:translateY(24px);opacity:1}100%{transform:translateY(24px);opacity:0}}
@keyframes impact-sparks{0%,55%{opacity:0;transform:translate(0,0)}56%{opacity:1}85%{opacity:1;transform:translate(var(--dx),var(--dy))}100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) + 9px))}}
@keyframes whack-word{0%,55%{opacity:0;transform:translateY(8px) rotate(-6deg)}59%,85%{opacity:1;transform:translateY(0) rotate(-6deg)}100%{opacity:0;transform:translateY(-9px) rotate(-6deg)}}
@keyframes board-hit{0%{transform:translateY(0)}25%{transform:translateY(4px)}60%{transform:translateY(1px)}100%{transform:translateY(0)}}
@keyframes blink{50%{opacity:0}}
@media(min-width:1500px){.hero{min-height:510px}.site-header{min-height:120px}}
@media(max-width:1150px){.site-header{padding-inline:36px}.site-content{padding-inline:36px}.boards{gap:13px}.destination-board{padding:24px 16px 20px}.instruction-end{display:none}.hero{min-height:430px}.hero-art figcaption{font-size:12px;bottom:5px}.header-note{font-size:12px;letter-spacing:.5px}}
@media(max-width:950px){.header-note{display:none}.hero-art figcaption{font-size:12px;position:static;margin-top:15px}.hero-art{display:flex;flex-direction:column;justify-content:center;align-self:center}.hero-art img{width:100%}.board-description{font-size:14px}.board-title{font-size:12px}.hero{gap:24px}.construction-stamp{font-size:12px;padding:9px;gap:7px}}
@media(max-width:800px){.site-header{min-height:90px;padding:19px 24px}.site-content{padding-inline:24px}.hero{grid-template-columns:1fr;padding-top:30px;gap:30px}.hero-copy{padding-bottom:0}h1{font-size:clamp(23px,4.9vw,38px)}.intro{max-width:520px}.hero-art{width:100%;max-width:580px;margin:auto}.hero-art img{aspect-ratio:1.8;object-position:center 57%}.hero-art figcaption{align-self:flex-start;margin-top:12px}.boards{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.destination-board{min-height:180px;padding:24px 20px}.board-title{font-size:14px}.section-index{display:none}.site-footer{flex-wrap:wrap}.section-line{gap:16px}.section-line h2{font-size:12px}.sample-list article{flex-wrap:wrap}.sample-tag{margin-left:32px}.cursor-toggle{display:none}}
@media(max-width:440px){.site-header,.site-content{padding-inline:20px}.wordmark{font-size:11px;gap:9px}.wordmark>.icon{width:33px}.utility-button{padding:8px}.eyebrow{font-size:12px;letter-spacing:.4px;gap:8px}.section-line h2{max-width:255px;line-height:1.8}.board-title{font-size:11px}.destination-board{padding:25px 13px 20px}.instruction{gap:10px;align-items:flex-start;flex-direction:column}.hero-art figcaption{font-size:12px;letter-spacing:0}.construction-stamp{font-size:11px}.sample-list article{gap:12px}dialog{padding:30px 20px}dialog h2{font-size:16px}.panel-label{max-width:90%}.notebook{padding:12px 15px}}
@media(max-width:380px){.boards{grid-template-columns:1fr}.destination-board{min-height:165px;padding:23px}.board-title{font-size:14px}.hero-art figcaption{font-size:12px;flex-wrap:wrap}.construction-stamp{flex-wrap:wrap;font-size:12px}.eyebrow{letter-spacing:0}.site-header{gap:12px}}
@media(pointer:coarse){.pointer-instruction{display:none}.touch-instruction{display:inline}.cursor-toggle{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}