/* 1puni subpage foundation, selected moonlit direction (2026-09-30).
   Kept independent of homepage composition. Assets are served by each owner. */
@font-face{font-family:Bricolage;src:url(./bricolage-grotesque.ttf) format("truetype");font-weight:200 800;font-display:swap}
:root{--ink:#171918;--paper:#f8f8ed;--yellow:#d8c7aa;--blue:#a9bbb7;--orange:#b96144;--rust:#a64730;--quiet:#655f56}
body{font-family:Bricolage,Arial,sans-serif;background:var(--paper);color:var(--ink);font-size:18px;line-height:1.55}
button,input,textarea,summary{font-family:inherit}
h1,h2,h3{font-family:Bricolage,Arial,sans-serif;text-wrap:balance;font-weight:800;letter-spacing:-.045em}
h1{line-height:.98}h2{line-height:1.04}p{text-wrap:pretty}
a{text-underline-offset:.2em}
::selection{background:#d8c7aa;color:#000}
:focus-visible{outline:3px solid var(--rust);outline-offset:5px}
.eyebrow,.header-note,.section-top{font-family:Bricolage,Arial,sans-serif;letter-spacing:.025em;font-weight:550}
body>header{background:#000;color:var(--paper);border:0;padding:24px 6%;gap:24px}
body>header .wordmark img{mix-blend-mode:screen;filter:grayscale(1) invert(1)}
body>header :focus-visible{outline-color:var(--yellow)}
body>footer{background:#000;color:var(--paper);border:0;padding:48px 6%;gap:30px}
body>footer .wordmark img{mix-blend-mode:screen;filter:grayscale(1) invert(1)}
body>footer :focus-visible{outline-color:var(--yellow)}
/* A night opening, then a sheet of readable work on the same desk. */
.pilot-opening,.cartography-page .intro{position:relative;background:#000 url(./dust-far.svg) center/cover;color:var(--paper);border:0;padding:70px 6% 100px;isolation:isolate}
.pilot-opening:before,.cartography-page .intro:before{content:"";position:absolute;z-index:-1;right:7%;top:65px;width:clamp(100px,20vw,280px);aspect-ratio:1;background:url(./moon-illustrated.svg) center/contain no-repeat;opacity:.38}
.pilot-opening h1{font-size:clamp(58px,9vw,130px);max-width:900px}
.pilot-opening p{max-width:660px}
.pilot-opening .eyebrow,.cartography-page .intro .eyebrow{color:var(--yellow)}
.pilot-opening a:focus-visible{outline-color:var(--yellow)}
.pilot-copy{max-width:1000px;padding:20px 6% 70px}
.pilot-copy section{padding:64px 0;border-color:#17191830}
.pilot-copy h2{font-size:clamp(34px,4.5vw,62px)}
.signal-path{border:1px solid #17191840;background:var(--blue);box-shadow:9px 12px 0 var(--yellow);transform:rotate(-1deg);margin:38px 5px 38px 0}
.pilot-boundary{border-left:3px solid var(--rust);background:#d8c7aa55}
.cartography-page header span,.cartography-page .places{font-family:inherit;letter-spacing:.01em}
.cartography-page .places a{border-width:1px;color:var(--ink)}
.cartography-page .places a[aria-current=page]{background:var(--yellow);color:#000}
.cartography-page .intro h1{font-size:clamp(46px,8.6vw,122px);line-height:.98;max-width:1100px}
.cartography-page .intro .lede{max-width:780px}
.cartography-page .sources{background:#000}
.cartography-page .chapter-card h2{font-weight:750}
.cartography-page .hud button{box-shadow:2px 3px 0 #17191850}
.cartography-page .stage-help,.cartography-page .stage-status{font-family:inherit}
/* Inbox is a reading surface; the brand lives in type, margins and its masthead. */
body.inbox main{max-width:940px;padding:75px 6% 100px;margin:auto}
body.inbox h1{font-size:clamp(46px,7vw,86px)}
body.inbox h2{font-size:clamp(28px,3.6vw,42px)}
body.inbox main p{max-width:70ch}
body.inbox main section{border-color:#17191830;padding-top:30px;margin-top:35px}
body.inbox .eyebrow{color:var(--rust)}
@media(max-width:700px){body>header{flex-wrap:wrap;padding:18px 6%;gap:18px}body>header .header-note{display:none}.pilot-opening,.cartography-page .intro{padding:40px 6% 60px}.pilot-opening:before,.cartography-page .intro:before{right:5%;top:30px;opacity:.2}.pilot-copy section{padding:42px 0}.signal-path{transform:none}body.inbox main{padding:45px 6% 65px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
/* Field-guide controls keep ink text when the surrounding opening turns dark. */
.cartography-page .intro-actions a{color:var(--ink);border-color:var(--yellow)}
.cartography-page .guide-intro h1{font-family:Bricolage,Arial,sans-serif;font-size:clamp(32px,6.1vw,88px);font-weight:800}
.cartography-page .guide-heading h2{font-family:Bricolage,Arial,sans-serif}
.cartography-page .intro-coordinate{border-color:#d8c7aa55;font-family:inherit}
.cartography-page .intro :focus-visible{outline-color:var(--yellow)}