:root{color-scheme:light;--paper:#f9f7ef;--ink:#222d27;--forest:#315b48;--soft:#515e54;--line:#c6cbbd;--sans:"Work Sans","Helvetica Neue",Arial,sans-serif;--serif:Georgia,"P052","Palatino Linotype",serif;--mono:"IBM Plex Mono","Liberation Mono",Consolas,monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:1.2rem}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 var(--sans)}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
button,summary{cursor:pointer}
button{border:0}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #a14a2c;outline-offset:4px}
.wrap{width:min(1280px,calc(100% - clamp(40px,9vw,148px)));margin-inline:auto}
.skip{position:absolute;left:-9999px;top:8px;z-index:20;background:white;padding:12px}
.skip:focus{left:12px}
.masthead{min-height:83px;display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid #9aa99b}
.brand{display:inline-flex;align-items:center;gap:10px;font:700 34px/.95 var(--serif);letter-spacing:-1.65px}
.brand img,.work-item>img,.town,.marquee{image-rendering:pixelated}
nav{display:flex;align-items:center;white-space:nowrap;gap:clamp(14px,2.9vw,42px);font-size:.9rem;font-weight:600}
nav>a:not(.nav-hello):hover,.footer>a:last-child:hover{text-decoration:underline;text-underline-offset:4px}
.nav-hello{display:flex;align-items:center;gap:17px;border:1px solid #97a99a;border-radius:5px;padding:8px 14px}
.nav-hello:hover{background:#e9ede2}
.hero{display:grid;grid-template-columns:minmax(0,.83fr) minmax(0,1.17fr);gap:clamp(28px,5vw,80px);align-items:center;padding-block:clamp(52px,5.8vw,92px) clamp(55px,5.8vw,86px)}
.kicker,.arcade-label,.sound,.play,.board-heading,.node-name,.win-label{font-family:var(--mono);text-transform:uppercase}
.kicker{display:flex;gap:10px;align-items:center;color:var(--forest);font-size:clamp(.65rem,.8vw,.75rem);letter-spacing:.095em;font-weight:700;line-height:1.5;margin:0 0 20px}
.short-rule{width:24px;height:2px;background:#6d8572;flex:none}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:var(--serif);font-weight:400}
h1{font-size:clamp(68px,7.65vw,115px);line-height:.91;letter-spacing:-.073em}
h1 em{color:var(--forest);font-weight:400}
.intro-title { container-type: inline-size; }
.title-line {
  display: block;
  min-height: 1.1em;
  font: 400 clamp(2rem, 15.5cqi, 5.2rem)/1.04 var(--serif);
  letter-spacing: -.06em;
}
.intro-title em::before { content: none; }
.title-tail { font-size: .78em; white-space: pre; color: var(--soft); }
.intro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.intro-actions .text-link { margin-top: 0; }
@media screen and (prefers-reduced-motion: no-preference) {
  .title-line.typing::after, .title-line.typed::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: .72em;
    margin-left: .05em;
    vertical-align: -.02em;
    background: var(--forest);
  }
  .title-line.typed::after { animation: blink-title-caret 550ms step-end 2 forwards; }
}
@keyframes blink-title-caret {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}
.intro-copy{max-width:38ch;margin:24px 0;color:#445248;font-size:clamp(16px,1.25vw,18.5px);line-height:1.57}
.btn,.text-link{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;font-size:.9rem;font-weight:650}
.btn{padding:12px 17px;border-radius:4px}
.dark{background:var(--forest);color:#fffdf0}
.dark:hover{background:#244c3c}
.btn span,.text-link span,.nav-hello span{font-size:1.14em}
.cabinet{position:relative;min-width:0;background:#263431;border:1px solid #192823;border-radius:10px;box-shadow:inset 0 2px 0 #5c685d,0 4px 0 #14251e,0 11px 0 -6px #c6caba,0 16px 24px -20px #183022;padding:0 12px;color:#f5f0df}
.cabinet-top{display:flex;justify-content:space-between;align-items:center;height:38px;padding:2px 6px 0}
.arcade-label,.sound{font-size:.665rem;font-weight:600;letter-spacing:.13em}
.arcade-label{display:flex;align-items:center;gap:9px}
.arcade-label i{height:7px;width:7px;border-radius:50%;background:#a2e6a5;box-shadow:0 0 6px #7ec48a}
.sound{background:transparent;color:#d3dace;letter-spacing:.055em;padding:6px}
.sound:hover{color:white}
.screen{isolation:isolate;overflow:hidden;position:relative;aspect-ratio:416/224;border-radius:3px;box-shadow:0 0 0 2px #142422;background:#152532}
.town{display:block;width:100%;height:100%;object-fit:cover}
.marquee{position:absolute;left:6.5%;top:10%;width:44%;height:auto;filter:drop-shadow(2px 3px 0 #162736)}
.scanlines{position:absolute;z-index:3;inset:0;pointer-events:none;opacity:.12;background:repeating-linear-gradient(0deg,#132532 0 1px,transparent 1px 4px)}
.cabinet-controls{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:17px 6px 2px}
.game-description{min-width:0}
.game-description h2{font:650 1.04rem/1.35 var(--sans);letter-spacing:-.015em}
.game-description p{font-size:.84rem;line-height:1.45;color:#d1d7ca;max-width:36ch;margin:3px 0 0}
.play{flex:none;background:#ffd49d;color:#30332c;font-weight:700;font-size:.72rem;letter-spacing:.055em;border-radius:4px;box-shadow:0 3px 0 #a8805c;padding:12px 13px;display:inline-flex;align-items:center;gap:8px}
.play:hover{background:#ffe4ba}
.play:active{transform:translateY(2px);box-shadow:0 1px 0 #a8805c}
.cabinet-foot{display:flex;align-items:center;justify-content:space-between;height:16px;margin:0 2px 2px}
.vents{width:28px;height:3px;background:repeating-linear-gradient(90deg,#172824 0 4px,transparent 4px 7px)}
.screw{width:24px;height:24px;display:grid;place-items:center;position:relative;align-self:end;background:transparent}
.screw:before{content:"";border-radius:50%;width:7px;height:7px;background:linear-gradient(135deg,#68786d 42%,#182921 42% 56%,#68786d 56%)}
.screw:hover:before{transform:rotate(60deg)}
.noscript{font-size:.85rem;padding:8px}
.board{position:absolute;inset:0;background:#112a32}
.board canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
.board-heading,.node-name,.win-label{position:absolute;white-space:nowrap;font-weight:700;color:#d6ecd5}
.board-heading{top:6%;left:5%;font-size:clamp(.65rem,1vw,.84rem);letter-spacing:.13em}
.node-name{transform:translateX(-50%);font-size:clamp(.54rem,.76vw,.68rem);letter-spacing:.06em}
.origin{left:10%;top:79%}.destination{left:89%;top:79%}.board-name{left:49%;top:22%}
.turn{position:absolute;transform:translate(-50%,-50%);width:max(43px,12%);aspect-ratio:1;border:1px solid #77968c;background:transparent;border-radius:6px}
.turn:hover,.turn:focus-visible{background:#c4ffc21c;border-color:#b8e7bb;outline-color:#ffd59c}
.turn:disabled{pointer-events:none}
#traveling-notice{position:absolute;z-index:2;width:3.1%;aspect-ratio:4/3;transform:translate(-50%,-50%);pointer-events:none;border:1px solid #664d3a;background:linear-gradient(#916c49,#916c49) 30% 35%/60% 15% no-repeat,linear-gradient(#916c49,#916c49) 21% 68%/38% 15% no-repeat,#ffdaa0;box-shadow:0 0 7px #ffdb9599}
.board.received .destination{color:#ffdaa0}
.board.received .destination::after{content:" ✓"}
.won{position:absolute;inset:0;background:linear-gradient(#112735b0,transparent 63%)}
.win-label{top:11%;left:6%;font-size:.69rem;letter-spacing:.14em;color:#baedc2}
.won strong{position:absolute;top:19%;left:6%;font:italic clamp(26px,3.2vw,50px)/1 var(--serif);letter-spacing:-.04em;color:#fff1cf}
.walker{position:absolute;bottom:17%;left:77%;width:7px;height:6px;background:#e9bf93;box-shadow:-1px -3px #503e45;image-rendering:pixelated;animation:fetch-peaches 4s ease-in-out forwards}
.walker:before,.walker:after{content:"";position:absolute;top:6px;left:-1px;width:9px;height:7px;background:#89c9ae}
.walker:after{top:13px;left:0;width:7px;height:4px;background:linear-gradient(90deg,#302a3a 40%,transparent 40% 60%,#302a3a 60%)}
.walker i{position:absolute;top:8px;left:-6px;width:6px;height:4px;background:#fbb67c;animation:pick-up 4s both}
@keyframes fetch-peaches{0%,100%{left:77%}48%,57%{left:17%}}
@keyframes pick-up{0%,50%{opacity:0}51%,100%{opacity:1}}
.work{border-top:1px solid var(--line);padding:clamp(36px,3.4vw,52px) 0 clamp(58px,5vw,80px)}
.work .kicker,.contact .kicker,.letter-grid .kicker{margin-bottom:12px}
.work h2,.letter-grid h2,.contact h2{font-size:clamp(38px,4.1vw,62px);line-height:1.08;letter-spacing:-.055em}
.work-grid{margin-top:28px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid var(--line)}
.work-item{padding:22px clamp(17px,2.3vw,34px) 22px 0}
.work-item+.work-item{border-left:1px solid var(--line);padding-left:clamp(17px,2.3vw,34px)}
.work-item:last-child{padding-right:0}
.work-item>img{display:block;margin-bottom:8px}
.work-item h3,.private-note h3{font-size:clamp(26px,2.15vw,34px);line-height:1.2;letter-spacing:-.04em}
.work-item>p,.work-item details p,.letter-copy p,.contact-copy>p:not(.kicker){font-size:1rem;line-height:1.65;color:var(--soft)}
.work-item>p{margin-top:9px}
details{margin-top:18px}
summary{display:inline-flex;align-items:center;gap:10px;color:var(--forest);font-size:.86rem;font-weight:700;list-style:none}
summary::-webkit-details-marker{display:none}
summary span:after{content:"+"}details[open] summary span:after{content:"−"}
details p{padding-top:8px}
.letter-section{background:#e8ecdf;border-block:1px solid #c7d1bf}
.letter-grid,.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(34px,8vw,130px);padding-block:clamp(42px,5.5vw,82px)}
.letter-quote{font:italic clamp(22px,2.3vw,34px)/1.26 var(--serif);color:var(--forest);max-width:30ch;margin-top:14px}
.letter-copy p+p,.contact-copy>p+p{margin-top:12px}
.text-link{color:var(--forest);border-bottom:1px solid #8a9e89;padding-bottom:2px;margin-top:18px;gap:12px}
.contact-copy>p:not(.kicker){margin-top:16px;max-width:39ch}
.contact-methods{margin:26px 0 0;max-width:370px}
.contact-methods div{display:flex;gap:20px;justify-content:space-between;border-top:1px solid var(--line);padding:10px 0;font-size:.9rem}
.contact-methods dt{font-weight:650}.contact-methods dd{margin:0;color:var(--soft)}
.private-note{padding:clamp(20px,2.8vw,35px);border:1px solid var(--line);border-radius:5px;background:#f1f2e9}
.private-note>p{font-size:.85rem;color:var(--soft);margin:5px 0 16px}
form label{display:block;font-weight:650;font-size:.9rem;margin:12px 0 6px}
form input,form textarea{width:100%;border:1px solid #a4b19e;background:#fffdf6;border-radius:3px;padding:9px 10px;font-size:1rem}
form textarea{resize:vertical;min-height:75px}
form button{margin-top:13px}
.footer{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:22px 0 28px;border-top:1px solid var(--line)}
.footer .brand{font-size:23px}.footer>span,.footer>a:last-child{color:var(--soft);font-size:.8rem}
dialog{max-width:min(460px,calc(100% - 36px));max-height:85vh;overflow:auto;color:var(--ink);background:var(--paper);border:1px solid var(--forest);border-radius:7px;padding:30px;box-shadow:0 12px 45px #17251e36}
dialog::backdrop{background:#17251e85}dialog h2{font-size:2rem;line-height:1.12;letter-spacing:-.04em}dialog p{margin:14px 0;white-space:pre-wrap;overflow-wrap:anywhere}dialog .btn{margin-top:8px}
@media(min-width:1500px){.hero{grid-template-columns:.8fr 1.2fr}}
@media(max-width:920px) and (min-width:741px){.hero{gap:24px;grid-template-columns:.83fr 1.17fr}.cabinet-controls{gap:12px;align-items:start}.play{padding:9px 10px}.game-description p{font-size:.8rem}.intro-copy{font-size:16px}}
@media(max-width:740px){.wrap{width:calc(100% - 40px)}.masthead{min-height:69px}.brand{font-size:29px}.brand img{width:25px;height:23px}nav{gap:14px;font-size:.8rem}.nav-hello{gap:6px;padding:7px 9px}.hero{grid-template-columns:1fr;gap:28px;padding:38px 0 42px}.intro .kicker{margin-bottom:15px}h1{font-size:clamp(68px,12vw,88px)}h1 br{display:none}h1 em:before{content:" "}.intro-copy{max-width:46ch;margin:16px 0 18px}.cabinet{max-width:610px;width:100%;margin:auto}.work-grid{grid-template-columns:1fr;margin-top:22px}.work-item,.work-item+.work-item,.work-item:last-child{position:relative;border-left:0;padding:22px 0 22px 75px}.work-item+.work-item{border-top:1px solid var(--line)}.work-item>img{position:absolute;top:22px;left:0;width:57px;height:38px}.work-item>p{margin-top:6px}.work-item details{margin-top:9px}.letter-grid,.contact{grid-template-columns:1fr;gap:25px}.contact-methods{max-width:unset}.node-name{font-size:clamp(.54rem,1.9vw,.7rem)}}
@media(max-width:440px){.masthead a[href="declaration.html"]{display:none}.wrap{width:calc(100% - 32px)}.brand{gap:7px;font-size:26px}.brand img{width:21px;height:20px}nav{gap:10px;font-size:.75rem}.nav-hello{padding:6px}.cabinet{padding:0 8px}.cabinet-top{height:32px}.cabinet-controls{padding:12px 4px 2px;gap:8px}.play{padding:10px 9px;gap:5px;font-size:.62rem}.game-description p{font-size:.79rem}.game-description h2{font-size:.97rem}.hero{padding-top:30px}.work-item,.work-item+.work-item,.work-item:last-child{padding-left:60px}.work-item>img{width:47px;height:32px}.kicker{font-size:.6rem}.footer{gap:10px}.footer>span{order:3;flex-basis:100%}}
@media(max-width:355px){.masthead{flex-wrap:wrap;row-gap:6px;padding:12px 0}.masthead nav{gap:14px}.brand{font-size:24px}.hero h1{font-size:59px}.work-item,.work-item+.work-item,.work-item:last-child{padding-left:0}.work-item>img{position:static}.sound,.arcade-label{font-size:.59rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0s!important;scroll-behavior:auto!important;transition-duration:0s!important}.walker i{animation:none}}