/* ==========================================================================
   Syntropise · The Cabinet · Philosophy: who needs it?
   An essay you can handle, set at a crash site on an unknown planet.
   Ink and coral on paper, a touch out of register. Everything is wn-.
   ========================================================================== */

.wn-hero,.wn-sec{--sheet:#fbf9f4;--typed:'Courier Prime',ui-monospace,Menlo,monospace}
.wn-sec{overflow-x:clip}
.wn-sec+.wn-sec{padding-top:clamp(40px,5vw,80px)}

/* ---------- shared bits ---------- */
html:not(.js) .wn-js{display:none!important}
.wn-head{max-width:860px;margin-bottom:clamp(26px,3.4vw,48px)}
.wn-head .h2{margin-top:0}
.wn-no{margin:0 0 8px;font-family:var(--display);font-weight:300;font-size:clamp(1.3rem,1.8vw,1.6rem);line-height:1;color:var(--coral-ink);letter-spacing:.02em}
.wn-instr{margin-top:14px;max-width:46ch;font-size:1rem;line-height:1.45;color:var(--ink-2)}
.wn-beat{font-size:clamp(1.22rem,1.75vw,1.56rem);line-height:1.38;letter-spacing:-.01em;max-width:34ch;font-weight:420;text-wrap:pretty}
.wn-beat em{font-family:var(--serif);font-style:italic;font-weight:460}
.wn-no+.wn-beat{margin-top:clamp(12px,1.4vw,20px)}
.wn-beat+.wn-beat{margin-top:clamp(10px,1.2vw,16px)}
.wn-strong{margin-top:clamp(22px,2.6vw,36px);font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,2.7vw,2.45rem);line-height:1.05;letter-spacing:-.012em;max-width:22ch;text-wrap:balance}
.wn-strong+.wn-beat{margin-top:clamp(14px,1.6vw,22px)}
.wn-aside{margin-top:14px;font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,1.6vw,1.4rem);color:var(--ink-2);max-width:40ch}
.wn-aside q{quotes:"\201C" "\201D";color:var(--coral-ink)}
.wn-ln{stroke:#141311;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.wn-ln2{stroke:#141311;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wn-defs{position:absolute;width:0;height:0;overflow:hidden}

/* entrances */
html.js .wn-rv{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
html.js .wn-rv.wn-in{opacity:1;transform:none}

/* a rivet, for anything bolted to the ship */
.wn-rivet{position:absolute;width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff 0 18%,var(--paper-3) 22% 60%,var(--ink-3) 100%);box-shadow:0 0 0 1.5px var(--ink)}
.wn-rivet.r1{left:12px;top:12px}.wn-rivet.r2{right:12px;top:12px}.wn-rivet.r3{left:12px;bottom:12px}.wn-rivet.r4{right:12px;bottom:12px}

/* ==== OPENING: THE CRASH ================================================ */
.wn-hero{min-height:min(var(--vh,100svh),920px);display:grid;align-items:center;padding:calc(var(--nav-h) + 26px) 0 30px;overflow-x:clip}
.wn-hero-in{width:100%;max-width:1320px;margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:minmax(0,.95fr) minmax(300px,1.05fr);gap:clamp(18px,3vw,56px);align-items:center}
.wn-title{margin:22px 0 24px;font-size:clamp(3.1rem,7vw,6.6rem);line-height:.92;letter-spacing:-.022em;max-width:none;text-wrap:balance}
.wn-tl{display:block;white-space:nowrap}
.wn-dek{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2vw,1.8rem);line-height:1.24;letter-spacing:-.01em;color:var(--ink-2);max-width:26ch}
.wn-hero-go{margin-top:30px}
.wn-hero-art{position:relative}
.wn-ship{position:relative;display:block;width:100%;border-radius:6px;-webkit-tap-highlight-color:transparent;cursor:pointer}
.wn-ship svg{width:100%;height:auto;overflow:visible;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(to bottom,#000 78%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(to bottom,#000 78%,transparent 100%);mask-composite:intersect}
.wn-ship:focus-visible{outline:2px dashed var(--ink);outline-offset:6px}
.wn-stars{fill:#141311}
.wn-ground{fill:#fbf9f4}
.wn-lip{fill:#fbf9f4;stroke:#141311;stroke-width:3;stroke-linejoin:round}
.wn-steps ellipse{fill:#141311;opacity:.75}
.wn-steps ellipse:nth-child(even){opacity:.55}
.wn-body{fill:#fbf9f4}
.wn-fin{fill:#fbf9f4}
.wn-port{fill:#141311;transition:fill .2s}
.wn-glint{fill:none;stroke:#fbf9f4;stroke-width:2.4;stroke-linecap:round;opacity:.85}
.wn-led{fill:#fbf9f4;stroke:#141311;stroke-width:1.8}
.wn-spark{fill:none;stroke:#f58c8a;stroke-width:4;stroke-linecap:round;opacity:0}
.wn-crack{stroke-width:1.6}
.wn-puff{fill:url(#dots);stroke:#141311;stroke-width:2.2;transform-box:fill-box;transform-origin:center}
.wn-moon,.wn-moon2,.wn-planet{transform-box:fill-box;transform-origin:center}
html.js .wn-puff{animation:wnPuff 5.6s ease-out infinite}
.wn-puff:nth-child(1){animation-delay:-.2s}.wn-puff:nth-child(2){animation-delay:-1.6s}.wn-puff:nth-child(3){animation-delay:-3s}.wn-puff:nth-child(4){animation-delay:-4.4s}
@keyframes wnPuff{0%{transform:translate(0,0) scale(.3);opacity:0}10%{opacity:1}70%{opacity:.9}100%{transform:translate(-34px,-170px) scale(1.7);opacity:0}}
.wn-puff:nth-child(2){transform:translate(-8px,-40px) scale(1.1)}.wn-puff:nth-child(3){transform:translate(-18px,-90px) scale(1.35)}.wn-puff:nth-child(4){transform:translate(-28px,-140px) scale(1.6);opacity:.6}
html.js .wn-moon2{animation:wnBob 9s ease-in-out infinite}
@keyframes wnBob{50%{transform:translate(-6px,4px)}}
.wn-plant{transform-box:fill-box;transform-origin:50% 100%}
html.js .wn-p1{animation:wnSway 6s ease-in-out infinite}
html.js .wn-p2{animation:wnSway 7.4s ease-in-out -2s infinite}
@keyframes wnSway{50%{transform:rotate(3deg)}}
/* systems coming back on */
.wn-wob{transform-box:view-box;transform-origin:0 0}
.wn-ship.wn-sputter .wn-wob{animation:wnJudder .7s steps(1) 1}
@keyframes wnJudder{0%{transform:rotate(1.2deg)}15%{transform:rotate(-1deg)}30%{transform:rotate(.8deg)}45%{transform:rotate(-.5deg)}60%{transform:rotate(.3deg)}80%,100%{transform:none}}
.wn-ship.wn-sputter .wn-spark{animation:wnSpark .7s steps(1) 1}
@keyframes wnSpark{0%,40%,70%{opacity:1}20%,55%,100%{opacity:0}}
.wn-ship.wn-sputter .wn-port{animation:wnFlick .7s steps(1) 1}
@keyframes wnFlick{0%,30%,60%{fill:#f9b7b2}15%,45%{fill:#141311}100%{fill:#f9b7b2}}
.wn-ship.wn-live .wn-port{fill:#f9b7b2}
.wn-ship.wn-live .wn-led{animation:wnLed 1.6s steps(1) infinite}
.wn-ship.wn-live .wn-led:nth-of-type(2){animation-delay:.4s}
.wn-ship.wn-live .wn-led:nth-of-type(3){animation-delay:.8s}
@keyframes wnLed{0%{fill:#f58c8a}50%{fill:#fbf9f4}}
.wn-bubble{position:absolute;left:66%;top:56%;transform:translate(-50%,-100%) scale(.6);opacity:0;padding:10px 16px 11px;background:var(--sheet);border:2.5px solid var(--ink);border-radius:18px;box-shadow:4px 4px 0 var(--coral-2);font-family:var(--display);font-weight:700;font-size:clamp(1rem,1.6vw,1.3rem);line-height:1.05;white-space:nowrap;pointer-events:none;transition:opacity .25s,transform .45s var(--spring)}
.wn-bubble::after{content:"";position:absolute;left:14%;bottom:-13px;width:18px;height:18px;background:var(--sheet);border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:skewX(-24deg) rotate(45deg) scaleY(.7)}
.wn-bubble.wn-on{opacity:1;transform:translate(-50%,-112%) scale(1)}
.wn-ship-hint{margin-top:6px;text-align:center;font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
html:not(.js) .wn-ship-hint{display:none}

/* ==== I. LANDING ======================================================== */
.wn-landing .wn-beat{max-width:36ch}

/* ==== II. THE CONSOLE =================================================== */
.wn-qs{display:flex;flex-wrap:wrap;gap:.1em .4em;max-width:16ch;font-size:clamp(2.3rem,5vw,4.6rem);line-height:.98}
.wn-qs span:nth-child(2){color:var(--coral-ink)}
.wn-console{position:relative;max-width:1080px;padding:clamp(44px,5vw,64px) clamp(16px,3vw,44px) clamp(26px,3vw,40px);background:#2a2724;background-image:var(--grain);border:3px solid var(--ink);border-radius:14px;box-shadow:8px 8px 0 var(--coral-2),inset 0 0 0 6px rgba(245,242,236,.06);color:var(--paper)}
.wn-console-label{position:absolute;left:clamp(30px,4vw,56px);right:clamp(30px,4vw,56px);top:16px;display:flex;justify-content:space-between;font-family:var(--typed);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,242,236,.55)}
.wn-console-label span:last-child{color:var(--coral)}
.wn-dials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2.6vw,36px)}
.wn-dial-u{display:grid;justify-items:center;gap:12px;text-align:center}
.wn-dial{position:relative;display:grid;justify-items:center;gap:10px;width:100%;padding:6px 4px 4px;border-radius:12px;-webkit-tap-highlight-color:transparent}
.wn-dial svg{width:min(100%,230px);height:auto;overflow:visible;transition:transform .4s var(--spring)}
.wn-dial-q{order:2;font-family:var(--display);font-weight:700;font-size:clamp(1rem,1.7vw,1.4rem);line-height:1.05;letter-spacing:-.01em;color:var(--paper);text-wrap:balance}
.wn-dial:focus-visible{outline:2px solid var(--coral);outline-offset:4px}
@media (hover:hover) and (pointer:fine){.wn-dial:hover svg{transform:rotate(-2deg) scale(1.02)}}
.wn-dial-n{font-family:var(--display);font-weight:700;font-size:20px;fill:#141311}
.wn-glass{fill:none;stroke:#141311;stroke-width:1.4;stroke-linecap:round;opacity:.55}
.wn-needle{--r:-118deg;transform-box:view-box;transform-origin:100px 100px;transform:rotate(var(--r))}
.wn-needle path{stroke:#141311;stroke-width:5;stroke-linecap:round}
.wn-needle circle{fill:#f58c8a;stroke:#141311;stroke-width:3}
html.js .wn-dial[aria-pressed="false"] .wn-needle{animation:wnTwitch 2.4s ease-in-out infinite}
.wn-dial-u:nth-child(2) .wn-needle{animation-delay:-.8s!important}.wn-dial-u:nth-child(3) .wn-needle{animation-delay:-1.6s!important}
@keyframes wnTwitch{0%,100%{transform:rotate(-118deg)}46%{transform:rotate(-118deg)}50%{transform:rotate(-104deg)}54%{transform:rotate(-114deg)}58%{transform:rotate(-109deg)}64%{transform:rotate(-118deg)}}
.wn-dial[aria-pressed="true"] .wn-needle{animation:none;transition:transform 1.1s cubic-bezier(.3,1.7,.45,1)}
.wn-read{display:grid;gap:2px;min-height:3.4em;padding:8px 14px;border:2px solid rgba(245,242,236,.25);border-radius:6px;background:#141311;font-family:var(--typed);line-height:1.2;color:var(--coral);width:min(100%,250px)}
.wn-read b{font-weight:700;font-size:clamp(.9rem,1.3vw,1.05rem);letter-spacing:.14em;text-transform:uppercase}
.wn-read span{font-size:.86rem;color:rgba(245,242,236,.78)}
html.js .wn-dial-u .wn-read{opacity:.18;filter:blur(2px);transition:opacity .6s .3s,filter .6s .3s}
html.js .wn-dial-u.wn-lit .wn-read{opacity:1;filter:none}
html.js .wn-dial-u.wn-lit .wn-read b{animation:wnType .7s steps(12) .35s both}
@keyframes wnType{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.wn-after{margin-top:clamp(36px,4.4vw,64px)}
.wn-plaque{position:relative;margin:clamp(24px,3vw,40px) 0 0;max-width:900px;padding:clamp(34px,4.4vw,60px) clamp(28px,4.4vw,64px) clamp(26px,3vw,40px);background:var(--sheet);background-image:var(--grain);border:3px solid var(--ink);border-radius:8px;box-shadow:8px 8px 0 var(--coral-2);transform:rotate(-.6deg)}
html.js .wn-plaque.wn-rv:not(.wn-in){transform:translateY(18px) rotate(-2deg)}
.wn-plaque blockquote{margin:0}
.wn-plaque p{font-family:var(--display);font-weight:700;font-size:clamp(1.8rem,3.8vw,3.3rem);line-height:1.02;letter-spacing:-.016em;text-wrap:balance}
.wn-plaque figcaption{margin-top:18px;font-family:var(--typed);font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}

/* ==== III. THE SURVIVAL PACK ============================================ */
.wn-pack-sec>.wrap>.wn-beat{max-width:36ch}
.wn-pack-in{display:grid;grid-template-columns:minmax(200px,.42fr) minmax(0,1fr);gap:clamp(26px,4.6vw,80px);align-items:start;margin-top:clamp(36px,4.4vw,64px)}
.wn-pack-art{position:sticky;top:calc(var(--nav-h) + 30px)}
.wn-pack-art svg{width:100%;max-width:300px;height:auto;overflow:visible}
.wn-pack-cap{margin-top:10px;font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--ink-2);max-width:22ch}
.wn-pack-copy .h2{margin-top:clamp(30px,3.6vw,48px)}
.wn-tags-w{position:relative;margin-top:clamp(20px,2.4vw,30px)}
.wn-tags{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.wn-tags li{position:relative;padding-top:22px}
.wn-tags li::before{content:"";position:absolute;left:50%;top:0;width:2px;height:26px;background:var(--ink);transform:rotate(var(--sr,6deg));transform-origin:top}
.wn-tags li:nth-child(2n)::before{--sr:-8deg}
.wn-tag{position:relative;display:grid;align-content:start;gap:10px;width:100%;min-height:150px;padding:34px 14px 14px;background:var(--sheet);background-image:var(--grain);border:2px solid var(--ink);border-radius:4px 4px 8px 8px;clip-path:polygon(18% 0,82% 0,100% 13%,100% 100%,0 100%,0 13%);box-shadow:inset 0 -6px 0 rgba(245,140,138,.0);text-align:center;transition:transform .45s var(--spring),background .3s;-webkit-tap-highlight-color:transparent}
.wn-tags li:nth-child(1) .wn-tag{transform:rotate(-2deg)}.wn-tags li:nth-child(2) .wn-tag{transform:rotate(1.4deg)}.wn-tags li:nth-child(3) .wn-tag{transform:rotate(-.8deg)}
.wn-tags li:nth-child(4) .wn-tag{transform:rotate(1.8deg)}.wn-tags li:nth-child(5) .wn-tag{transform:rotate(-1.4deg)}.wn-tags li:nth-child(6) .wn-tag{transform:rotate(.9deg)}
.wn-tag::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(to bottom right,transparent calc(50% - 1px),var(--ink) calc(50% - 1px),var(--ink) calc(50% + 1px),transparent calc(50% + 1px)) 0 0/18% 13% no-repeat,
  linear-gradient(to bottom left,transparent calc(50% - 1px),var(--ink) calc(50% - 1px),var(--ink) calc(50% + 1px),transparent calc(50% + 1px)) 100% 0/18% 13% no-repeat}
.wn-tag-hole{position:absolute;left:50%;top:7px;width:13px;height:13px;margin-left:-6.5px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 2px var(--ink),0 0 0 3px var(--coral-l),0 0 0 4.5px var(--ink)}
.wn-tag-t{font-family:var(--display);font-weight:700;font-size:clamp(1rem,1.45vw,1.24rem);line-height:1.05;letter-spacing:-.01em;text-wrap:balance}
.wn-stampd{justify-self:center;margin-top:4px;padding:4px 9px 3px;border:2.5px solid var(--coral-ink);border-radius:4px;font-family:var(--typed);font-weight:700;font-size:.74rem;line-height:1.1;letter-spacing:.08em;text-transform:uppercase;color:var(--coral-ink);transform:rotate(-7deg);opacity:0}
.wn-stampd:empty{display:none}
.wn-tag.wn-stamped .wn-stampd{opacity:.92;animation:wnStamp .45s cubic-bezier(.2,.9,.25,1.25)}
@keyframes wnStamp{0%{transform:rotate(-7deg) scale(1.8);opacity:0}60%{transform:rotate(-7deg) scale(.94);opacity:1}100%{transform:rotate(-7deg) scale(1)}}
@media (hover:hover) and (pointer:fine){.wn-tag:hover{transform:rotate(0) translateY(-3px)!important}}
.wn-tag[aria-expanded="true"]{background:var(--ink);color:var(--paper)}
.wn-tag[aria-expanded="true"] .wn-stampd{border-color:var(--coral);color:var(--coral)}
.wn-tag[aria-expanded="true"]::before{background:none}
.wn-tag:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--coral-2)}
.wn-tag.wn-clash{animation:wnClash .5s ease-in-out 2}
.wn-tag.wn-clash{background:var(--coral-l)}
@keyframes wnClash{25%{translate:-3px 0}75%{translate:3px 0}}
.wn-spark-l{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.wn-spark-c{fill:none;stroke:#f58c8a;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.wn-spark-i{fill:none;stroke:#141311;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.wn-spark-l.wn-on path{opacity:1;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:wnZap .45s ease-out forwards}
@keyframes wnZap{to{stroke-dashoffset:0}}
.wn-sort{margin-top:22px;padding:18px clamp(14px,2vw,22px);background:var(--paper-2);background-image:var(--grain);border:2px solid var(--ink);border-radius:6px;box-shadow:4px 4px 0 var(--ink)}
.wn-sort[hidden]{display:none}
.wn-sort-q{font-family:var(--display);font-weight:700;font-size:clamp(1.1rem,1.6vw,1.35rem);line-height:1.1}
.wn-sort-q span{color:var(--coral-ink)}
.wn-sort-bs{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.wn-src{min-height:44px;padding:8px 16px;border:2px dashed var(--coral-ink);border-radius:5px;background:var(--sheet);font-family:var(--typed);font-weight:700;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;color:var(--coral-ink);transform:rotate(-1.5deg);transition:transform .2s var(--spring),background .2s}
.wn-src:nth-child(even){transform:rotate(1.2deg)}
.wn-src:hover{background:var(--coral-l);transform:rotate(0) scale(1.04)}
.wn-src[aria-pressed="true"]{border-style:solid;background:var(--coral-l)}
.wn-tally{margin-top:14px;min-height:1.4em;font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--ink-2)}
.wn-shake-w{margin-top:16px}
.wn-junk{margin-top:clamp(40px,5vw,72px)}
.wn-junk .wn-beat{max-width:38ch}

/* ==== IV. TWO SETTLEMENTS =============================================== */
.wn-base-copy .wn-beat{max-width:38ch}
.wn-base{position:relative;margin:clamp(30px,3.6vw,52px) 0 clamp(30px,3.6vw,52px);max-width:1180px}
.wn-switch{display:inline-flex;flex-wrap:wrap;gap:0;padding:5px;margin-bottom:clamp(14px,2vw,24px);background:var(--sheet);border:2.5px solid var(--ink);border-radius:99px;box-shadow:4px 4px 0 var(--coral-2)}
.wn-switch button{min-height:44px;padding:8px clamp(12px,1.6vw,20px);border-radius:99px;font-family:var(--display);font-weight:700;font-size:clamp(.92rem,1.25vw,1.08rem);letter-spacing:-.005em;transition:background .3s,color .3s}
.wn-switch button[aria-checked="true"]{background:var(--ink);color:var(--paper)}
.wn-switch button:focus-visible{outline:2px solid var(--coral-2);outline-offset:2px}
.wn-base-art{position:relative;border:2.5px solid var(--ink);border-radius:8px;background:var(--sheet);background-image:var(--grain);overflow:hidden;box-shadow:6px 6px 0 var(--ink)}
.wn-base-art svg{width:100%;height:auto}
.wn-v{opacity:0;transition:opacity .5s var(--ease),transform .6s var(--spring);transform:translateY(10px)}
.wn-base[data-v="self"] .wn-v-self,.wn-base[data-v="coop"] .wn-v-coop,.wn-base[data-v="both"] .wn-v-both{opacity:1;transform:none}
html:not(.js) .wn-v-coop,html:not(.js) .wn-v-both{display:none}
.wn-svt{font-family:var(--typed);font-weight:700;font-size:11px;letter-spacing:.12em;fill:#141311}
.wn-svn{font-family:var(--display);font-weight:700;font-size:18px;fill:#141311}
.wn-svl{font-family:var(--display);font-weight:700;font-size:20px;fill:#a13f39}
.wn-bar{stroke:#f58c8a;stroke-width:9;stroke-linecap:round}
.wn-folk{fill:#fbf9f4;stroke:#141311;stroke-width:2.6;stroke-linecap:round}
.wn-rec{animation:wnRec 1.4s steps(1) infinite}
@keyframes wnRec{50%{opacity:0}}
.wn-steam{animation:wnSteam 2.4s ease-in-out infinite}
@keyframes wnSteam{50%{transform:translateY(-4px);opacity:.4}}

/* ==== V. THE DIG ======================================================== */
.wn-dig-sec>.wrap>.wn-beat{max-width:38ch}
.wn-dig{margin:clamp(30px,3.6vw,52px) 0;max-width:1180px}
.wn-dig-art{position:relative;border:2.5px solid var(--ink);border-radius:8px;overflow:hidden;background:var(--sheet);box-shadow:6px 6px 0 var(--coral-2)}
.wn-dig-art svg{width:100%;height:auto}
.wn-crt{font-family:var(--display);font-weight:700;font-size:20px;fill:#141311}
.wn-crt-b{fill:#a13f39;font-size:22px}
.wn-root{fill:none;stroke:#a13f39;stroke-width:2.4;stroke-dasharray:4 6;opacity:0;transition:opacity .8s .3s}
.wn-dig[data-d="3"] .wn-root,html:not(.js) .wn-root{opacity:1}
.wn-stratum{transition:transform .8s var(--ease),opacity .7s var(--ease)}
.wn-dig[data-d="1"] .s1,.wn-dig[data-d="2"] .s1,.wn-dig[data-d="3"] .s1,
.wn-dig[data-d="2"] .s2,.wn-dig[data-d="3"] .s2,.wn-dig[data-d="3"] .s3{opacity:.13;transform:translateY(-10px)}
html:not(.js) .wn-stratum{display:none}
.wn-shovel{transform-box:view-box}
.wn-dig.wn-digging .wn-shovel{animation:wnShovel .5s ease-in-out}
@keyframes wnShovel{50%{transform:translate(450px,150px) rotate(-8deg)}}
.wn-shovel{transform:translate(450px,132px) rotate(18deg)}
.wn-arm{transform-box:fill-box;transform-origin:0 100%;animation:wnGesture 1.8s ease-in-out infinite}
.wn-arm2{transform-box:fill-box;transform-origin:100% 100%;animation:wnGesture2 2.1s ease-in-out infinite}
@keyframes wnGesture{50%{transform:rotate(-14deg)}}
@keyframes wnGesture2{50%{transform:rotate(16deg)}}
.wn-say{position:absolute;padding:6px 12px 7px;background:var(--sheet);border:2px solid var(--ink);border-radius:14px;box-shadow:3px 3px 0 var(--coral-2);font-family:var(--display);font-weight:700;font-size:clamp(.66rem,1.25vw,1.02rem);line-height:1.05;white-space:nowrap;animation:wnSay 4.8s ease-in-out infinite}
.wn-say-a{left:4%;top:3%}.wn-say-b{left:30%;top:9%;animation-delay:-1.2s}
.wn-say-c{right:30%;top:3%;animation-delay:-2.4s}.wn-say-d{right:3%;top:9%;animation-delay:-3.6s}
@keyframes wnSay{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-4px) rotate(1deg)}}
.wn-dig-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:16px}
.wn-dig-say{font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--ink-2)}
.wn-three-w{margin-top:clamp(40px,5vw,72px)}
.wn-three-w .wn-beat{max-width:38ch}
.wn-three{list-style:none;margin:clamp(18px,2vw,28px) 0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.wn-three li{display:grid;gap:2px;padding:12px 18px 12px;background:#141311;border-radius:6px;box-shadow:4px 4px 0 var(--coral-2);font-family:var(--typed);color:var(--coral);transform:rotate(-1deg)}
.wn-three li:nth-child(2){transform:rotate(1deg)}
.wn-three b{font-size:.98rem;letter-spacing:.14em;text-transform:uppercase}
.wn-three span{font-size:.84rem;color:rgba(245,242,236,.8)}

/* ==== VI. PART COMPANY: TWO COMPASSES =================================== */
.wn-part-copy .wn-beat{max-width:38ch}
.wn-compasses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,4vw,64px);max-width:900px;margin:clamp(34px,4.4vw,64px) 0}
.wn-cmp{margin:0;display:grid;justify-items:center;gap:12px;text-align:center}
.wn-cmp-art svg{width:min(100%,280px);height:auto;overflow:visible}
.wn-sign{font-family:var(--typed);font-weight:700;font-size:15px;letter-spacing:.12em;fill:#141311}
.wn-rose{font-family:var(--display);font-weight:700;font-size:15px;fill:#141311}
.wn-case,.wn-ndl{transform-box:view-box;transform-origin:130px 196px}
.wn-case{transition:transform 1.1s cubic-bezier(.3,1.25,.4,1)}
.wn-ndl{transform:rotate(var(--n,0deg))}
.wn-ndl.wn-swing{transition:transform 1.5s cubic-bezier(.25,1.8,.4,1)}
html.js .wn-ndl-open{animation:wnDrift 7s ease-in-out infinite}
html.js .wn-ndl-open.wn-held{animation:none}
@keyframes wnDrift{0%,100%{transform:rotate(calc(var(--n,0deg) - 8deg))}50%{transform:rotate(calc(var(--n,0deg) + 10deg))}}
.wn-cmp figcaption{display:grid;justify-items:center;gap:10px}
.wn-cmp-h{font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,2vw,1.7rem);line-height:1}
.wn-cmp-say{min-height:2.6em;max-width:24ch;font-family:var(--serif);font-style:italic;font-size:1.05rem;line-height:1.25;color:var(--ink-2)}
html:not(.js) .wn-cmp .pill{display:none}
.wn-perhaps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,26px);max-width:900px;margin-top:clamp(22px,2.6vw,36px)}
.wn-perhaps p{position:relative;padding:44px clamp(16px,2vw,24px) 20px;background:var(--sheet);background-image:var(--grain);border:2px solid var(--ink);border-radius:6px;font-size:clamp(1.12rem,1.5vw,1.34rem);line-height:1.3;font-weight:420}
.wn-perhaps p:first-child{box-shadow:5px 5px 0 var(--ink);transform:rotate(-.8deg)}
.wn-perhaps p:last-child{box-shadow:5px 5px 0 var(--coral-2);transform:rotate(.7deg)}
.wn-pk{position:absolute;left:14px;top:12px;font-family:var(--typed);font-weight:700;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--coral-ink)}

/* ==== VII. SAID AND DONE ================================================ */
.wn-said-copy .wn-beat{max-width:38ch}
.wn-said-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(26px,4.4vw,80px);align-items:start;margin-top:clamp(30px,3.6vw,52px)}
.wn-speech{position:sticky;top:calc(var(--nav-h) + 40px);padding:clamp(26px,3.4vw,44px) clamp(24px,3vw,40px);background:var(--sheet);background-image:var(--grain);border:3px solid var(--ink);border-radius:30px;box-shadow:7px 7px 0 var(--coral-2)}
.wn-speech::after{content:"";position:absolute;left:22%;bottom:-24px;width:34px;height:34px;background:var(--sheet);border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:skewX(-28deg) rotate(45deg) scaleY(.7)}
.wn-speech p{font-family:var(--display);font-weight:700;font-size:clamp(2rem,4vw,3.4rem);line-height:.98;letter-spacing:-.016em}
.wn-qline{font-family:var(--serif);font-style:italic}
.wn-try{margin-top:clamp(20px,2.4vw,32px);padding:clamp(18px,2.4vw,28px);background:var(--paper-2);background-image:var(--grain);border:2px solid var(--ink);border-radius:8px;box-shadow:5px 5px 0 var(--ink)}
.wn-try-q{font-family:var(--display);font-weight:700;font-size:clamp(1.15rem,1.7vw,1.42rem);line-height:1.12;max-width:30ch}
.wn-try-bs{display:grid;gap:10px;margin-top:16px}
.wn-act{display:flex;align-items:center;gap:12px;min-height:50px;padding:10px 16px;border:2px solid var(--ink);border-radius:8px;background:var(--sheet);font-weight:560;text-align:left;transition:transform .15s var(--ease),box-shadow .15s,background .3s,color .3s;box-shadow:3px 3px 0 var(--coral-2)}
.wn-act::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;border:2px solid var(--ink);background:var(--paper);transition:background .3s}
.wn-act:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--coral-2)}
.wn-act[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.wn-act[aria-pressed="true"]::before{background:var(--coral-2);border-color:var(--paper)}
.wn-try-out p{display:none;margin-top:16px;padding-left:16px;border-left:4px solid var(--coral-2);font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,1.6vw,1.36rem);line-height:1.3;max-width:40ch}
.wn-try-out p.wn-on{display:block;animation:wnUp .5s var(--ease)}
@keyframes wnUp{from{opacity:0;transform:translateY(8px)}}
.wn-said-big{max-width:24ch;margin-top:clamp(40px,5vw,72px)!important;font-size:clamp(1.9rem,3.6vw,3.2rem)}
.wn-said-big+.wn-said-copy{margin-top:clamp(18px,2vw,28px)}

/* ==== VIII. THE RABBIT HOLES ============================================ */
.wn-holes-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);gap:clamp(26px,4.4vw,80px);align-items:start}
.wn-trail{margin:0;position:sticky;top:calc(var(--nav-h) + 24px)}
.wn-trail .wn-instr{margin:0 0 10px}
.wn-trail-art{position:relative;aspect-ratio:400/640;max-height:calc(var(--vh,100svh) - var(--nav-h) - 110px);margin:0 auto;border:2.5px solid var(--ink);border-radius:8px;background:var(--sheet);background-image:var(--grain);box-shadow:6px 6px 0 var(--coral-2)}
.wn-trail-art svg{position:absolute;inset:0;width:100%;height:100%}
.wn-path-ghost{fill:none;stroke:#141311;stroke-width:1.4;stroke-dasharray:1 7;stroke-linecap:round;opacity:.3}
.wn-path{fill:none;stroke-width:4.2;stroke-linecap:round;stroke-dasharray:2 10;opacity:0}
.wn-path-h{stroke:#141311}.wn-path-w{stroke:#a13f39}
html:not(.js) .wn-path{opacity:1}
.wn-walker{opacity:0}
.wn-rabbit{opacity:0;transform-box:fill-box;transform-origin:50% 100%;transform:translateY(16px) scaleY(.4);transition:opacity .3s,transform .5s var(--spring)}
.wn-trail[data-done~="h"] .wn-rab-h,.wn-trail[data-done~="w"] .wn-rab-w{opacity:1;transform:none}
.wn-who{position:absolute;display:grid;gap:2px;padding:8px 12px 9px;transform:translate(-50%,-100%);background:var(--sheet);border:2px solid var(--ink);border-radius:8px;box-shadow:3px 3px 0 var(--ink);text-align:center;white-space:nowrap;transition:transform .2s var(--spring),background .3s,color .3s;-webkit-tap-highlight-color:transparent}
.wn-who-h{left:24%;top:8.5%}.wn-who-w{left:75%;top:8.5%}
.wn-who-n{font-family:var(--display);font-weight:700;font-size:clamp(.95rem,1.4vw,1.15rem);line-height:1}
.wn-who-s{font-size:.72rem;letter-spacing:.04em;color:var(--ink-2)}
.wn-who:hover{transform:translate(-50%,-104%)}
.wn-who[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.wn-who[aria-pressed="true"] .wn-who-s{color:rgba(245,242,236,.75)}
.wn-who-w{box-shadow:3px 3px 0 var(--coral-2)}
html:not(.js) .wn-who{pointer-events:none}
.wn-mark{position:absolute;padding:2px 7px;background:var(--paper);border:1.5px solid var(--ink);border-radius:3px;font-family:var(--typed);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;opacity:0;transform:translate(-50%,-50%) scale(.8);transition:opacity .3s,transform .4s var(--spring)}
.wn-mark-1{left:38%;top:32.8%}.wn-mark-2{left:22%;top:59%}.wn-mark-3{left:84%;top:76%}
.wn-trail[data-run="h"] .wn-mark.wn-on,.wn-trail[data-done~="h"] .wn-mark{opacity:1;transform:translate(-50%,-50%)}
.wn-end{position:absolute;width:44%;padding:8px 10px;background:var(--sheet);border:2px solid var(--ink);border-radius:6px;font-family:var(--serif);font-style:italic;font-size:clamp(.82rem,1.15vw,.98rem);line-height:1.15;text-align:center;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s var(--spring)}
.wn-end-h{right:3%;bottom:2%;box-shadow:3px 3px 0 var(--ink)}.wn-end-w{left:3%;bottom:2%;box-shadow:3px 3px 0 var(--coral-2)}
.wn-trail[data-done~="h"] .wn-end-h,.wn-trail[data-done~="w"] .wn-end-w,html:not(.js) .wn-end{opacity:1;transform:none}
.wn-holes-after{margin-top:clamp(40px,5vw,72px)}
.wn-holes-after .wn-beat{max-width:38ch}

/* ==== IX. THE FOLDED MAP ================================================ */
.wn-open-copy .wn-beat{max-width:38ch}
.wn-map{margin:clamp(34px,4.4vw,64px) 0;max-width:1080px}
.wn-map-stage{perspective:1800px;padding:clamp(6px,1vw,14px)}
.wn-map-sheet{perspective:1800px;position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto;transition:transform 1s var(--ease)}
.wn-mp{position:relative;aspect-ratio:1;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.5,0,.2,1),opacity .4s}
.wn-mp svg{display:block;width:100%;height:100%}
.wn-mp-c{grid-column:2;grid-row:1;z-index:2;background:#fbf9f4;border:2.5px solid var(--ink);border-left-width:1px;border-right-width:1px}
.wn-mp-l{grid-column:1;grid-row:1;z-index:3;transform-origin:100% 50%}
.wn-mp-r{grid-column:3;grid-row:1;z-index:1;transform-origin:0 50%}
.wn-mp-d{grid-column:1/-1;grid-row:2;aspect-ratio:3/1;z-index:0;transform-origin:50% 0}
.wn-mp-f,.wn-mp-b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:2.5px solid var(--ink)}
.wn-mp-l .wn-mp-f{border-right-width:1px}.wn-mp-r .wn-mp-f{border-left-width:1px}.wn-mp-d .wn-mp-f{border-top-width:1px}
.wn-mp-b{transform:rotateY(180deg);background:var(--paper-2);background-image:repeating-linear-gradient(45deg,transparent 0 9px,rgba(20,19,17,.07) 9px 10px)}
.wn-mp-d .wn-mp-b{transform:rotateX(180deg)}
.wn-mp-l .wn-mp-b{display:grid;place-items:center;align-content:center;gap:6px;padding:12px;background:var(--grain-c),var(--coral-2);text-align:center}
.wn-mp-l .wn-mp-b::before{content:"Sheet 1";font-family:var(--typed);font-weight:700;font-size:clamp(.6rem,1.1vw,.82rem);letter-spacing:.2em;text-transform:uppercase}
.wn-mp-l .wn-mp-b::after{content:"The crash site and surrounding country";font-family:var(--display);font-weight:700;font-size:clamp(.82rem,1.9vw,1.5rem);line-height:1;letter-spacing:-.01em;max-width:9ch}
html.js .wn-map[data-s="0"] .wn-mp-l{transform:rotateY(180deg)}
html.js .wn-map:is([data-s="0"],[data-s="1"]) .wn-mp-r{transform:rotateY(-180deg)}
html.js .wn-map:is([data-s="0"],[data-s="1"],[data-s="2"]) .wn-mp-d{transform:rotateX(-96deg);opacity:0}
html.js .wn-map:is([data-s="0"],[data-s="1"],[data-s="2"]) .wn-map-sheet{transform:translateY(16.6%)}
html.js .wn-map[data-s="3"] .wn-mp-d{transition:transform 1.2s cubic-bezier(.5,0,.2,1),opacity .2s}
.wn-mt{font-family:var(--display);font-weight:700;font-size:22px;fill:#a13f39}
.wn-mt-s{font-family:var(--typed);font-weight:700;font-size:13px;letter-spacing:.16em;fill:#141311}
.wn-map-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 18px;margin-top:clamp(14px,2vw,22px)}
.wn-map-say{font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--ink-2)}

/* ==== X. CLOSE ========================================================== */
.wn-close .wn-beat{max-width:38ch}
.wn-verdict{margin:clamp(34px,4.4vw,64px) 0 clamp(34px,4.4vw,60px);display:grid;gap:.06em;font-family:var(--display);font-weight:700;font-size:clamp(3rem,9vw,8.6rem);line-height:.9;letter-spacing:-.03em}
.wn-v1{position:relative;color:var(--ink-2);justify-self:start}
.wn-v1::after{content:"Optional";position:absolute;right:-.2em;top:-.1em;padding:.08em .24em .04em;border:.05em solid var(--coral-ink);border-radius:.08em;font-family:var(--typed);font-size:.18em;letter-spacing:.14em;text-transform:uppercase;color:var(--coral-ink);transform:translateX(100%) rotate(-9deg);opacity:.9}
.wn-v2{justify-self:start}
html.js .wn-verdict.wn-rv:not(.wn-in) .wn-v1::after{opacity:0;transform:translateX(100%) rotate(-9deg) scale(1.8)}
html.js .wn-verdict .wn-v1::after{transition:opacity .25s .7s,transform .4s cubic-bezier(.2,.9,.25,1.25) .7s}
.wn-close-copy .wn-beat{max-width:38ch}
.wn-last-w{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(18px,4vw,60px);align-items:center;margin-top:clamp(44px,5.4vw,80px)}
.wn-last{font-family:var(--display);font-weight:700;font-size:clamp(2.3rem,5.4vw,5rem);line-height:.96;letter-spacing:-.02em;max-width:15ch;text-wrap:balance}
.wn-lastpack svg{width:clamp(130px,16vw,220px);height:auto;overflow:visible}
.wn-flap{transform-box:view-box;transform-origin:110px 64px;transition:transform 1.1s cubic-bezier(.3,1.4,.45,1) .5s}
.wn-glow{opacity:0;transition:opacity .9s .9s}
.wn-lastpack.wn-in .wn-flap,html:not(.js) .wn-flap{transform:rotate(-14deg) translate(-26px,-46px)}
.wn-lastpack.wn-in .wn-glow,html:not(.js) .wn-glow{opacity:1}
.wn-exits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,28px);max-width:1000px;margin-top:clamp(44px,5.4vw,80px)}
.wn-exit{display:grid;gap:8px;align-content:start;padding:clamp(22px,2.8vw,34px);background:var(--sheet);background-image:var(--grain);border:2.5px solid var(--ink);border-radius:8px;box-shadow:6px 6px 0 var(--coral-2);color:var(--ink);text-decoration:none;transition:transform .35s var(--spring),box-shadow .35s}
.wn-exit:hover{transform:translate(-2px,-3px);box-shadow:8px 9px 0 var(--coral-2)}
.wn-exit-ink{background:var(--ink);color:var(--paper)}
.wn-exit-k{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--coral-ink)}
.wn-exit-ink .wn-exit-k{color:var(--coral)}
.wn-exit-h{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1;letter-spacing:-.012em;text-wrap:balance}
.wn-exit-d{color:var(--ink-2);max-width:38ch}
.wn-exit-ink .wn-exit-d{color:rgba(245,242,236,.78)}
.wn-exit-go{margin-top:8px;font-weight:620}
.wn-free{margin-top:clamp(28px,3.4vw,46px)}
.wn-free-a{font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,2.4vw,2.1rem);line-height:1.1;color:inherit;text-decoration:none;background:linear-gradient(transparent 62%,rgba(245,140,138,.7) 62%,rgba(245,140,138,.7) 94%,transparent 94%);padding:0 .06em}
.wn-free-a:hover{background:linear-gradient(transparent 0,rgba(245,140,138,.7) 0,rgba(245,140,138,.7) 94%,transparent 94%)}

/* ==== SMALLER SCREENS ================================================== */
@media (max-width:980px){
  .wn-hero-in{grid-template-columns:1fr}
  .wn-hero{min-height:0}
  .wn-hero-art{max-width:620px;width:100%;justify-self:center}
  .wn-pack-in{grid-template-columns:1fr}
  .wn-pack-art{position:relative;top:auto;display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center}
  .wn-said-in{grid-template-columns:1fr}
  .wn-speech{position:relative;top:auto;max-width:460px}
  .wn-holes-in{grid-template-columns:1fr}
  .wn-trail{position:relative;top:auto;max-width:440px;width:100%;justify-self:center}
  .wn-trail-art{max-height:none}
}
@media (max-width:700px){
  .wn-dials{grid-template-columns:1fr;gap:26px}
  .wn-dial-u{justify-items:stretch;text-align:left;gap:10px}
  .wn-dial{grid-template-columns:118px 1fr;align-items:center;justify-items:start;gap:16px}
  .wn-dial svg{width:118px}
  .wn-dial-q{font-size:1.3rem}
  .wn-read{width:100%}
  .wn-tags{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wn-tag{min-height:128px}
  .wn-compasses{grid-template-columns:1fr;max-width:340px;margin-inline:auto}
  .wn-perhaps{grid-template-columns:1fr}
  .wn-exits{grid-template-columns:1fr}
  .wn-last-w{grid-template-columns:1fr}
  .wn-switch{display:grid;grid-template-columns:1fr;border-radius:16px;width:100%}
  .wn-switch button{border-radius:11px;text-align:left}
  .wn-say{font-size:.62rem;padding:4px 7px;border-radius:9px;border-width:1.5px}
  .wn-say-a{left:2%;top:2%}.wn-say-b{left:2%;top:16%}.wn-say-c{left:33%;right:auto;top:16%}.wn-say-d{right:2%;top:2%}
  .wn-svl{font-size:28px}.wn-svn{font-size:22px}
  .wn-crt{font-size:24px}.wn-crt-b{font-size:26px}
  .wn-v1::after{font-size:.2em}
}

/* ==== REDUCED MOTION =================================================== */
@media (prefers-reduced-motion:reduce){
  html.js .wn-rv{opacity:1;transform:none;transition:none}
  .wn-puff,.wn-moon2,.wn-plant,.wn-rec,.wn-steam,.wn-arm,.wn-arm2,.wn-say,.wn-ndl-open,.wn-ship.wn-live .wn-led{animation:none!important}
  .wn-dial .wn-needle,.wn-case,.wn-ndl,.wn-mp,.wn-map-sheet,.wn-stratum,.wn-v,.wn-flap,.wn-glow,.wn-bubble{transition:none!important}
  .wn-tag,.wn-stampd,.wn-tag.wn-clash{animation:none!important}
}

/* ==== PRINT ============================================================ */
@media print{
  html.js .wn-rv{opacity:1;transform:none}
  .wn-js,.wn-ship-hint,.wn-bubble{display:none!important}
  .wn-stratum,.wn-v-coop,.wn-v-both{display:none}
  .wn-mp{transform:none!important;opacity:1!important}
  .wn-map-sheet{transform:none!important}
}