/* Dadventures — retro surf / beer-label field manual */
:root{
  --paper:#FBF4E6; --paper-2:#F3E7CF; --ink:#1E2433; --ink-2:#4A5163; --line:#E2D3B4;
  --navy:#1B2A4A; --navy-2:#24385F; --sun:#F2A81D; --sunset:#E9572B; --sunset-d:#C8431B;
  --sea:#2E9C9A; --sea-l:#BFE5DF; --thong:#D9343F; --leaf:#5C9A3B; --white:#FFFDF8;
  --r:18px; --r-sm:10px; --shadow:0 2px 0 var(--ink), 0 10px 30px rgba(30,36,51,.12);
  --head:"Bricolage Grotesque", system-ui, sans-serif; --body:"DM Sans", system-ui, sans-serif; --pen:"Permanent Marker", cursive;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--body);overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--head);line-height:1.02;margin:0 0 .4em;letter-spacing:-.02em}
h1{font-size:clamp(2.6rem,7vw,5.6rem);font-weight:800}
h2{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:800}
h3{font-size:1.35rem;font-weight:700}
p{margin:0 0 1em}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.pen{font-family:var(--pen);font-weight:400;letter-spacing:0;color:var(--sunset)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:700 .78rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;background:var(--ink);color:var(--paper);padding:7px 12px;border-radius:99px;margin-bottom:16px}
.eyebrow.sun{background:var(--sun);color:var(--ink)}
.sec{padding:clamp(60px,9vw,110px) 0}
.sec-tight{padding:40px 0}
.lead{font-size:1.15rem;color:var(--ink-2);max-width:640px}
.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;z-index:99;background:#fff;padding:8px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font:700 1rem/1 var(--body);padding:15px 22px;border-radius:99px;border:2px solid var(--ink);text-decoration:none;cursor:pointer;transition:transform .15s, box-shadow .15s;background:var(--white);color:var(--ink);box-shadow:0 3px 0 var(--ink)}
.btn:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--ink)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.btn svg{width:20px;height:20px}
.btn-main{background:var(--sunset);color:#fff}
.btn-sun{background:var(--sun)}
.btn-navy{background:var(--navy);color:var(--paper)}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* header */
.top{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:2px solid var(--ink)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:70px;gap:16px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 1.45rem/1 var(--head);letter-spacing:-.03em}
.logo-mark{width:44px;height:44px;flex:none}
.logo small{display:block;font:700 .62rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--sunset);margin-top:3px}
.nav{display:flex;gap:4px;align-items:center}
.nav a{text-decoration:none;font-weight:700;font-size:.95rem;padding:9px 14px;border-radius:99px}
.nav a:hover{background:var(--paper-2)}
.nav a[aria-current]{background:var(--ink);color:var(--paper)}
.nav .shop-link{background:var(--sun);border:2px solid var(--ink)}
.burger{display:none;width:46px;height:46px;border:2px solid var(--ink);border-radius:12px;background:var(--white);cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:var(--ink);margin:4px auto;transition:.2s}
@media(max-width:900px){
  .burger{display:block}
  .nav{position:fixed;inset:70px 0 auto 0;flex-direction:column;align-items:stretch;background:var(--paper);border-bottom:2px solid var(--ink);padding:14px 20px 22px;transform:translateY(-130%);transition:transform .25s;z-index:-1}
  .nav a{font-size:1.2rem;padding:14px 16px}
  body.nav-open .nav{transform:none}
  body.nav-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  body.nav-open .burger span:nth-child(2){opacity:0}
  body.nav-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
}

/* ticker */
.ticker{background:var(--navy);color:var(--sun);font:700 .85rem/1 var(--body);letter-spacing:.06em;text-transform:uppercase;overflow:hidden;white-space:nowrap;border-bottom:2px solid var(--ink)}
.ticker div{display:inline-block;padding:10px 0;animation:tick 60s linear infinite}
.ticker span{margin:0 26px}
.ticker span::before{content:"✺";margin-right:26px;color:var(--sunset)}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker div{animation:none}}

/* hero */
.hero{position:relative;padding:clamp(40px,6vw,80px) 0 clamp(60px,8vw,100px);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hero h1 em{font-style:normal;color:var(--sunset);display:inline-block;transform:rotate(-2deg)}
.hero .lead{margin-bottom:28px}
.host-tag{display:flex;align-items:center;gap:14px;margin-top:30px}
.host-tag .face{width:64px;height:64px;flex:none}
.host-tag b{display:block;font-family:var(--head);font-size:1.1rem}
.host-tag span{color:var(--ink-2);font-size:.92rem}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr}}

/* radar */
.radar{position:relative;aspect-ratio:1;border-radius:50%;border:3px solid var(--ink);background:var(--navy);overflow:hidden;box-shadow:0 6px 0 var(--ink);max-width:520px;margin:0 auto;width:100%}
.radar .rmap{position:absolute;inset:0;filter:grayscale(1) contrast(1.1) brightness(.7) sepia(1) hue-rotate(130deg) saturate(1.6);opacity:.55}
.radar .rmap .leaflet-control-container{display:none}
.radar::before{content:"";position:absolute;inset:0;z-index:2;background:repeating-radial-gradient(circle at 50% 50%,transparent 0 59px,rgba(191,229,223,.35) 60px 61px),linear-gradient(transparent 49.8%,rgba(191,229,223,.35) 50%,transparent 50.2%),linear-gradient(90deg,transparent 49.8%,rgba(191,229,223,.35) 50%,transparent 50.2%);pointer-events:none}
.radar .sweep{position:absolute;inset:0;z-index:3;background:conic-gradient(from 0deg,rgba(242,168,29,.55),rgba(242,168,29,0) 70deg,transparent 360deg);animation:sweep 4s linear infinite;border-radius:50%;pointer-events:none}
@keyframes sweep{to{transform:rotate(360deg)}}
.radar .blip{position:absolute;z-index:4;width:12px;height:12px;margin:-6px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 0 rgba(242,168,29,.8);animation:blip 2.4s ease-out infinite}
.radar .blip.b-brew{background:var(--sun)}.radar .blip.b-play{background:var(--sea-l)}.radar .blip.b-beach{background:#fff}
@keyframes blip{0%{box-shadow:0 0 0 0 rgba(242,168,29,.7)}100%{box-shadow:0 0 0 18px rgba(242,168,29,0)}}
.radar-label{position:absolute;z-index:5;left:50%;bottom:9%;transform:translateX(-50%);background:var(--ink);color:var(--sun);font:700 .74rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;padding:8px 12px;border-radius:99px;white-space:nowrap}
.radar-wrap{position:relative}
.sticker{position:absolute;z-index:6;font:400 1.05rem/1.15 var(--pen);background:var(--sun);border:2px solid var(--ink);padding:10px 14px;border-radius:12px;transform:rotate(6deg);box-shadow:0 3px 0 var(--ink);max-width:190px}
.sticker.s1{right:-6px;top:4%}
.sticker.s2{left:-6px;bottom:20%;transform:rotate(-5deg);background:var(--white)}
@media(max-width:600px){.sticker{font-size:.9rem;max-width:150px}}

/* cards */
.grid{display:grid;gap:22px}
.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.g3,.g2,.g4{grid-template-columns:1fr}}
.card{background:var(--white);border:2px solid var(--ink);border-radius:var(--r);padding:26px;box-shadow:var(--shadow);position:relative}
.card h3{margin-bottom:.35em}
.card p:last-child{margin-bottom:0}
a.card{text-decoration:none;display:block;transition:transform .15s}
a.card:hover{transform:translateY(-4px) rotate(-.4deg)}
.card .ico{width:58px;height:58px;border-radius:16px;border:2px solid var(--ink);display:grid;place-items:center;margin-bottom:18px;background:var(--sun)}
.card .ico svg{width:30px;height:30px}
.card .more{display:inline-flex;gap:6px;align-items:center;font-weight:700;color:var(--sunset);margin-top:8px}
.card .more svg{width:18px}
.c-sea .ico{background:var(--sea-l)}.c-sunset .ico{background:var(--sunset);color:#fff}.c-navy .ico{background:var(--navy);color:var(--sun)}.c-leaf .ico{background:#CFE6B8}

.sec-dark{background:var(--navy);color:var(--paper);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.sec-dark .lead{color:#C9D2E6}
.sec-dark .card{color:var(--ink)}
.sec-sun{background:var(--sun);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.sec-sun .lead{color:var(--ink)}
.head{max-width:760px;margin-bottom:44px}
.head.center{margin-left:auto;margin-right:auto;text-align:center}

/* dice */
.dice{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;background:var(--white);border:2px solid var(--ink);border-radius:28px;padding:clamp(22px,4vw,44px);box-shadow:0 6px 0 var(--ink);color:var(--ink)}
.die{width:120px;height:120px;border:3px solid var(--ink);border-radius:26px;background:var(--sunset);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:16px;cursor:pointer;box-shadow:0 5px 0 var(--ink);transition:transform .15s}
.die i{width:18px;height:18px;border-radius:50%;background:#fff;place-self:center;visibility:hidden}
.die.rolling{animation:roll .6s cubic-bezier(.3,.7,.4,1.4)}
@keyframes roll{0%{transform:rotate(0) scale(1)}50%{transform:rotate(200deg) scale(.85)}100%{transform:rotate(360deg) scale(1)}}
.mission small{font:700 .75rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--sunset)}
.mission h3{font-size:clamp(1.5rem,3vw,2.2rem);margin:.3em 0}
.mission p{color:var(--ink-2)}
.mission .rule{font:400 1.15rem/1.3 var(--pen);color:var(--navy)}
@media(max-width:700px){.dice{grid-template-columns:1fr;text-align:center}.die{margin:0 auto}.mission .btns{justify-content:center}}

/* page hero */
.phero{padding:clamp(50px,7vw,90px) 0 30px}
.phero .lead{font-size:1.2rem}

/* map page */
.mapapp{display:grid;grid-template-columns:380px 1fr;height:calc(100vh - 70px);height:calc(100dvh - 70px);border-top:0}
.mapside{border-right:2px solid var(--ink);display:flex;flex-direction:column;min-height:0;background:var(--paper)}
.mapside-top{padding:20px 20px 14px;border-bottom:2px solid var(--ink)}
.mapside-top h1{font-size:2rem;margin:0 0 4px}
.mapside-top p{font-size:.92rem;color:var(--ink-2);margin:0 0 12px}
.search{width:100%;font:500 1rem var(--body);padding:12px 16px;border:2px solid var(--ink);border-radius:99px;background:var(--white)}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.chip{font:700 .82rem/1 var(--body);padding:8px 11px;border:2px solid var(--ink);border-radius:99px;background:var(--white);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.chip .dot{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--ink)}
.chip[aria-pressed=false]{opacity:.45;background:transparent}
.grail{margin-top:12px;background:var(--navy);color:var(--paper);border:2px solid var(--ink);border-radius:14px;padding:12px 14px}
.grail label{display:flex;align-items:center;gap:10px;font-weight:700;cursor:pointer}
.grail input[type=checkbox]{width:20px;height:20px;accent-color:var(--sun)}
.grail .gr{display:none;margin-top:10px;font-size:.88rem}
.grail.on .gr{display:block}
.grail input[type=range]{width:100%;accent-color:var(--sun)}
.list{overflow:auto;flex:1;padding:6px 0}
.item{display:grid;grid-template-columns:38px 1fr;gap:12px;padding:12px 20px;border-bottom:1px dashed var(--line);cursor:pointer;background:none;border-left:0;border-right:0;border-top:0;width:100%;text-align:left;font:inherit;color:inherit}
.item:hover,.item.on{background:var(--paper-2)}
.item .pin{width:34px;height:34px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center}
.item .pin svg{width:18px;height:18px}
.item b{display:block;font-family:var(--head);font-size:1.05rem;line-height:1.2}
.item span{font-size:.84rem;color:var(--ink-2)}
.count{font-size:.85rem;color:var(--ink-2);padding:10px 20px 4px}
#map{height:100%;width:100%;background:var(--sea-l)}
.mpin{width:36px;height:36px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:2px solid var(--ink);display:grid;place-items:center;box-shadow:0 3px 0 rgba(30,36,51,.5)}
.mpin svg{width:18px;height:18px;transform:rotate(45deg)}
.mpin.grail-hit{box-shadow:0 0 0 4px var(--sun),0 3px 0 rgba(30,36,51,.5)}
.leaflet-popup-content-wrapper{border:2px solid var(--ink);border-radius:16px!important;box-shadow:0 4px 0 var(--ink)!important;background:var(--white)}
.leaflet-popup-content{margin:16px 18px!important;font:15px/1.5 var(--body)!important;min-width:230px}
.pop small{font:700 .7rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase}
.pop h3{font-size:1.3rem;margin:6px 0 4px}
.pop .fact{color:var(--ink-2);margin:0 0 8px}
.pop .take{font:400 1rem/1.3 var(--pen);color:var(--sunset);margin:0 0 10px}
.pop .near{font-size:.86rem;background:var(--paper-2);border-radius:10px;padding:8px 10px;margin-bottom:10px}
.pop a.go{font-weight:700;color:var(--navy)}
.mapside-toggle{display:none}
@media(max-width:900px){
  .mapapp{grid-template-columns:1fr;grid-template-rows:auto 1fr;height:auto}
  .mapside{border-right:0;border-bottom:2px solid var(--ink)}
  .mapside .list{max-height:42vh}
  #map{height:62vh}
  .mapapp .mapmain{order:-1}
}

/* satchel */
.satchel{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start}
@media(max-width:900px){.satchel{grid-template-columns:1fr}}
.pack-stage{position:sticky;top:90px;background:var(--sea-l);border:2px solid var(--ink);border-radius:28px;box-shadow:0 6px 0 var(--ink);padding:20px;aspect-ratio:1/1.05}
@media(max-width:900px){.pack-stage{position:relative;top:0}}
.pack-stage svg{width:100%;height:100%}
.hot{cursor:pointer}
.hot circle{transition:r .15s}
.hot:hover circle.hb,.hot.on circle.hb{r:20}
.hot.on circle.hb{fill:var(--sunset)}
.hot text{font:800 15px var(--head);pointer-events:none}
.slot-list{display:flex;flex-direction:column;gap:12px}
.slot{background:var(--white);border:2px solid var(--ink);border-radius:16px;overflow:hidden;transition:box-shadow .15s}
.slot.on{box-shadow:0 4px 0 var(--ink)}
.slot button{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:40px 1fr 24px;gap:12px;align-items:center;padding:14px 16px;cursor:pointer}
.slot button:focus-visible{outline:3px solid var(--sunset)}
.slot .n{width:36px;height:36px;border-radius:50%;border:2px solid var(--ink);background:var(--sun);display:grid;place-items:center;font:800 1rem var(--head)}
.slot.on .n{background:var(--sunset);color:#fff}
.slot b{font-family:var(--head);font-size:1.12rem;line-height:1.2}
.slot em{display:block;font-style:normal;font-size:.85rem;color:var(--ink-2)}
.slot .chev{transition:transform .2s}
.slot.on .chev{transform:rotate(180deg)}
.slot .body{display:none;padding:0 18px 18px 68px}
.slot.on .body{display:block}
.slot .body p{margin-bottom:.6em}
.slot .why{font:400 1.05rem/1.3 var(--pen);color:var(--sunset)}
.slot .src{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sea);border:1.5px dashed var(--sea);display:inline-block;padding:4px 8px;border-radius:8px}
@media(max-width:600px){.slot .body{padding-left:18px}}
.buybox{background:var(--navy);color:var(--paper);border:2px solid var(--ink);border-radius:24px;padding:28px;box-shadow:0 6px 0 var(--ink)}
.buybox h3{font-size:1.8rem}
.buybox .price{font:800 2.4rem/1 var(--head);color:var(--sun);margin:4px 0 10px}
.buybox form{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.buybox input{flex:1;min-width:200px;font:500 1rem var(--body);padding:14px 16px;border-radius:99px;border:2px solid var(--ink)}
.buybox .ok{display:none;font-weight:700;color:var(--sun);margin-top:10px}
.buybox.done .ok{display:block}.buybox.done form{display:none}

/* guide */
.guide{display:grid;gap:22px}
.tip{background:var(--white);border:2px solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.tip summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:22px 26px}
.tip summary::-webkit-details-marker{display:none}
.tip .num{font:800 2.6rem/1 var(--head);color:var(--sunset);min-width:56px}
.tip h3{margin:0;font-size:1.4rem}
.tip summary span{display:block;color:var(--ink-2);font-size:.95rem;margin-top:4px}
.tip .tog{width:38px;height:38px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;font:800 1.4rem/1 var(--head);transition:transform .2s;background:var(--sun)}
.tip[open] .tog{transform:rotate(45deg)}
.tip .in{padding:0 26px 26px 100px}
.tip ol,.tip ul{padding-left:1.2em;margin:0 0 1em}
.tip li{margin-bottom:.5em}
.tip .note{font:400 1.1rem/1.35 var(--pen);color:var(--navy);background:var(--paper-2);border-radius:12px;padding:12px 16px}
@media(max-width:600px){.tip .in{padding:0 20px 22px}.tip summary{padding:18px 20px;gap:12px}.tip .num{font-size:2rem;min-width:40px}}

/* gear */
.vs{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1000px){.vs{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.vs{grid-template-columns:1fr}}
.vs .card{display:flex;flex-direction:column}
.meter{display:flex;gap:4px;margin:2px 0 8px}
.meter i{width:100%;height:9px;border-radius:5px;border:1.5px solid var(--ink);background:var(--white)}
.meter i.f{background:var(--sunset)}
.mlabel{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.good,.bad{font-size:.92rem;margin:.3em 0}
.good b{color:var(--leaf)}.bad b{color:var(--thong)}
.callout{background:var(--sea-l);border:2px solid var(--ink);border-radius:var(--r);padding:22px 26px;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.callout svg{width:36px;height:36px}

/* host */
.hostgrid{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:center}
@media(max-width:900px){.hostgrid{grid-template-columns:1fr}}
.polaroid{background:#fff;border:2px solid var(--ink);padding:16px 16px 60px;transform:rotate(-3deg);box-shadow:0 8px 0 var(--ink);position:relative;max-width:420px;margin:0 auto}
.polaroid .ph{aspect-ratio:1;background:var(--sun);border:2px solid var(--ink);display:grid;place-items:center}
.polaroid .cap{position:absolute;left:0;right:0;bottom:16px;text-align:center;font:400 1.25rem var(--pen)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0}
.stat{border:2px solid var(--ink);border-radius:14px;padding:14px;background:var(--white);text-align:center}
.stat b{display:block;font:800 1.9rem/1 var(--head);color:var(--sunset)}
.stat span{font-size:.8rem;color:var(--ink-2)}
@media(max-width:500px){.stats{grid-template-columns:1fr}}

/* footer */
.foot{background:var(--ink);color:#C9CEDA;padding:60px 0 30px}
.foot .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.foot h4{color:var(--sun);font-size:1rem;letter-spacing:.1em;text-transform:uppercase;font-family:var(--body)}
.foot a{text-decoration:none;display:block;padding:4px 0;color:#E8EBF2}
.foot a:hover{color:var(--sun)}
.foot .logo{color:var(--paper);margin-bottom:14px}
.foot .fine{grid-column:1/-1;border-top:1px solid #3A4152;padding-top:20px;font-size:.84rem;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
@media(max-width:800px){.foot .wrap{grid-template-columns:1fr}}

.rv{opacity:0;transform:translateY(24px);transition:opacity .6s,transform .6s}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.radar .sweep,.radar .blip{animation:none}}
.hot:focus{outline:none}.hot:focus-visible circle.hb{stroke:var(--sunset);stroke-width:4}
/* G-POD */
.fires{display:flex;gap:6px;align-items:center;margin:10px 0}
.fires button{font-size:1.6rem;line-height:1;background:none;border:0;cursor:pointer;filter:grayscale(1);opacity:.35;padding:4px}
.fires button.on{filter:none;opacity:1}
.fires .clr{font:700 .8rem var(--body);filter:none;opacity:.6;margin-left:8px;text-decoration:underline}
.gp .st{display:block;margin-top:6px;color:var(--sea);font-weight:700}
.gpod-tag{display:inline-block;background:var(--sun);border:1.5px solid var(--ink);border-radius:99px;padding:2px 8px;font-size:.75rem;font-weight:700;margin-left:4px;white-space:nowrap}
.pop .gpod{background:var(--sun);border:2px solid var(--ink);border-radius:10px;padding:8px 10px;margin-bottom:10px;font-size:.9rem}
.pop .gpod q{font-family:var(--pen);display:block;margin-top:2px}
.chip.gp-chip{background:var(--sun)}
/* Day-Maker */
.dm-form{display:grid;gap:22px}
.dm-presets{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.dm-presets .mlabel,.dm-naps .mlabel{width:100%}
.dm-presets .chip[aria-pressed=true]{background:var(--sun)}
.dm-presets .chip[aria-pressed=false]{opacity:1;background:var(--white)}
.dm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.dm-grid{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.dm-grid{grid-template-columns:1fr}}
.dm-form label{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:.9rem}
.dm-form input[type=time],.dm-form select{font:500 1rem var(--body);padding:11px 14px;border:2px solid var(--ink);border-radius:12px;background:var(--white);color:var(--ink);width:100%}
.dm-form .dm-check{flex-direction:row;align-items:center;grid-column:span 2}
.dm-check input{width:20px;height:20px;accent-color:var(--sunset)}
@media(max-width:500px){.dm-form .dm-check{grid-column:auto}}
.dm-naps{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.naprow{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.naprow label{flex-direction:row;align-items:center}
.naprow input{width:auto!important}
.naprow .x{width:36px;height:36px;border-radius:50%;border:2px solid var(--ink);background:var(--white);font-size:1.3rem;cursor:pointer;line-height:1}
.dm-form .btn{justify-self:start}
.dm-out{margin-top:40px;scroll-margin-top:90px}
.dm-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.dm-head h2{margin:0}
.dm-list{list-style:none;margin:0;padding:0;position:relative}
.dm-list::before{content:"";position:absolute;left:94px;top:10px;bottom:10px;border-left:3px dotted var(--ink-2);opacity:.4}
.dm-row{display:grid;grid-template-columns:80px 30px 1fr auto;gap:16px;align-items:center;padding:8px 0;position:relative}
.dm-row time{font:800 1rem var(--head);text-align:right}
.dm-row .dot{width:14px;height:14px;border-radius:50%;background:var(--paper);border:3px solid var(--ink-2);justify-self:center}
.dm-row .pin{width:34px;height:34px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;justify-self:center;margin:0 -2px}
.dm-row .pin svg{width:18px;height:18px}
.dm-drive{color:var(--ink-2);font-size:.9rem}.dm-drive b{font-weight:500}.dm-drive time{font-weight:600;color:var(--ink-2)}
.dm-place>div:nth-child(3){background:var(--white);border:2px solid var(--ink);border-radius:16px;padding:14px 18px;box-shadow:0 3px 0 var(--ink)}
.dm-place small{display:block;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sunset)}
.dm-place b{font-family:var(--head);font-size:1.25rem;line-height:1.2}
.dm-place p{margin:4px 0 0;font:400 1rem/1.3 var(--pen);color:var(--navy)}
.dm-place.locked>div:nth-child(3){background:var(--paper-2);border-style:dashed}
.dm-napbrew>div:nth-child(3){background:var(--navy);color:var(--paper)}
.dm-napbrew small{color:var(--sun)}.dm-napbrew p{color:var(--sun)}
.dm-nap b,.dm-home b{font-family:var(--head);font-size:1.05rem}
.dm-nap>div{background:var(--sea-l);border:2px dashed var(--ink);border-radius:14px;padding:10px 16px}
.dm-act{display:flex;flex-direction:column;gap:6px}
.dm-act button,.dm-act a{width:40px;height:40px;border-radius:12px;border:2px solid var(--ink);background:var(--white);display:grid;place-items:center;font-size:1.1rem;cursor:pointer;text-decoration:none}
.dm-act [aria-pressed=true]{background:var(--sun)}
.dm-fine{font-size:.85rem;color:var(--ink-2);margin-top:20px}
@media(max-width:640px){
  .dm-list::before{left:62px}
  .dm-row{grid-template-columns:52px 22px 1fr;gap:10px}
  .dm-row time{font-size:.85rem}
  .dm-act{grid-column:3;flex-direction:row}
  .dm-place b{font-size:1.1rem}
}
/* Satchel builder */
.slot-h{font-size:1.3rem;margin:0 0 12px;display:flex;align-items:baseline;gap:10px}
.slot-h small{font:700 .75rem var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.slot.is-add .n{background:var(--white)}
.slot.added .n{background:var(--sea);color:#fff}
.slot.added{box-shadow:0 4px 0 var(--sea);border-color:var(--sea)}
.addbox{display:inline-flex;align-items:center;gap:8px;font-weight:700;background:var(--sun);border:2px solid var(--ink);border-radius:99px;padding:8px 14px;cursor:pointer;margin:0 10px 8px 0}
.addbox input{width:18px;height:18px;accent-color:var(--sea)}
.hot.addon circle.hb{fill:#FFFDF8}
.hot.added circle.hb{fill:var(--sea)}
.hot.added text{fill:#fff}
.pack-key{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;font-size:.85rem;font-weight:700;margin-top:-6px}
.pack-key span{display:flex;align-items:center;gap:6px}
.pack-key i{width:16px;height:16px;border-radius:50%;border:2px solid var(--ink)}
.k-base{background:var(--sun)}.k-add{background:#FFFDF8}.k-on{background:var(--sea)}
.build{margin:6px 0 4px;padding-left:1.2em}
.build li{margin:2px 0}
.pack-stage{aspect-ratio:auto}
.sizes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.sizes label{cursor:pointer}
.sizes input{position:absolute;opacity:0}
.sizes span{display:block;border:2px solid #3A4152;border-radius:14px;padding:12px 14px;font-size:.85rem;color:#C9D2E6;height:100%}
.sizes b{display:block;font:800 1.15rem var(--head);color:var(--paper)}
.sizes input:checked+span{border-color:var(--sun);background:rgba(242,168,29,.12)}
.sizes input:focus-visible+span{outline:3px solid var(--sun)}
@media(max-width:420px){.sizes{grid-template-columns:1fr}}
.size-note{color:#C9D2E6;margin:8px 0}.size-note b{color:var(--sun)}
/* MapLibre */
.mk{cursor:pointer}
.mk .mpin{transition:transform .15s}
.mk:hover .mpin{transform:rotate(-45deg) scale(1.12)}
.maplibregl-popup-content{border:2px solid var(--ink);border-radius:16px;box-shadow:0 4px 0 var(--ink);background:var(--white);padding:16px 18px;font:15px/1.5 var(--body)}
.maplibregl-popup-close-button{font-size:22px;right:6px;top:4px}
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip{border-top-color:var(--ink)}
.maplibregl-popup-anchor-top .maplibregl-popup-tip{border-bottom-color:var(--ink)}
.pop{min-width:230px}
.chip.d3-chip{background:var(--white)}
.chip.d3-chip[aria-pressed=false]{opacity:1}
.chip.d3-chip[aria-pressed=true]{background:var(--navy);color:var(--sun)}
.radar .rmap{filter:none;opacity:.9}
/* home why3 */
.why3 h2{font-size:clamp(1.5rem,2.4vw,2rem)}
.why3 p{color:var(--ink-2)}
.why3 a{color:var(--sunset);font-weight:700}
/* header cart */
.top-r{display:flex;align-items:center;gap:10px}
.cart-btn{position:relative;width:46px;height:46px;border:2px solid var(--ink);border-radius:12px;background:var(--white);cursor:pointer;display:grid;place-items:center}
.cart-btn svg{width:24px;height:24px}
.cart-btn b{position:absolute;top:-8px;right:-8px;min-width:22px;height:22px;border-radius:11px;background:var(--sunset);color:#fff;font:800 .75rem/22px var(--body);border:2px solid var(--ink);display:none;padding:0 4px}
.cart-btn.has b{display:block}
.cart{position:fixed;inset:0;z-index:80;background:rgba(30,36,51,.45);display:flex;justify-content:flex-end}
.cart[hidden]{display:none}
.cart-in{width:min(420px,100%);height:100%;background:var(--paper);border-left:2px solid var(--ink);display:flex;flex-direction:column;animation:slidein .25s ease-out}
@keyframes slidein{from{transform:translateX(100%)}}
.cart-top{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:2px solid var(--ink)}
.cart-top h3{margin:0;font-size:1.5rem}
.cart .x{width:40px;height:40px;border-radius:50%;border:2px solid var(--ink);background:var(--white);font-size:1.4rem;cursor:pointer}
[data-cart-lines]{flex:1;overflow:auto;padding:6px 20px}
.cl{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:14px 0;border-bottom:1px dashed var(--line)}
.cl b{font-family:var(--head);display:block;line-height:1.2}
.cl small{display:block;color:var(--ink-2);font-size:.82rem;margin-top:4px}
.cl-q{display:flex;align-items:center;gap:6px}
.cl-q button{width:28px;height:28px;border-radius:50%;border:2px solid var(--ink);background:var(--white);cursor:pointer;font-weight:800}
.cl-p{font-weight:700;min-width:54px;text-align:right}
.cart-empty{color:var(--ink-2);padding:20px 0}
.cart-foot{border-top:2px solid var(--ink);padding:16px 20px 22px;background:var(--white)}
.cart-total{display:flex;justify-content:space-between;font:800 1.3rem var(--head);margin-bottom:12px}
.cart-foot form{display:flex;gap:8px;flex-wrap:wrap}
.cart-foot input{flex:1;min-width:160px;font:500 1rem var(--body);padding:13px 16px;border-radius:99px;border:2px solid var(--ink)}
.co-note{font-size:.85rem;color:var(--ink-2);margin:10px 0 0}
body.cart-open{overflow:hidden}
/* products */
.prod{display:flex;flex-direction:column}
.prod p{flex:1;color:var(--ink-2)}
.prod-art{height:120px;border:2px solid var(--ink);border-radius:14px;background:var(--sea-l);display:grid;place-items:center;margin-bottom:16px}
.prod-art svg{width:56px;height:56px}
.prod-art.c2{background:var(--paper-2)}
.prod-buy{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pprice{font:800 1.2rem var(--head);margin-right:auto}
.prod-buy select{font:600 .95rem var(--body);padding:10px 12px;border:2px solid var(--ink);border-radius:12px;background:var(--white)}
.prod-buy .btn{padding:11px 18px}
/* advice */
.ajump{margin-top:16px}
.ajump .chip{text-decoration:none;opacity:1}
.advice{display:grid;gap:30px}
.asec{background:var(--white);border:2px solid var(--ink);border-radius:24px;padding:clamp(20px,3vw,34px);box-shadow:var(--shadow);scroll-margin-top:90px}
.asec-head{display:flex;gap:18px;align-items:flex-start;margin-bottom:20px}
.asec-head .ico{width:58px;height:58px;flex:none;border-radius:16px;border:2px solid var(--ink);display:grid;place-items:center;background:var(--sun)}
.asec-head .ico svg{width:30px;height:30px}
.asec-head h2{font-size:clamp(1.6rem,3vw,2.3rem);margin:2px 0 4px}
.asec-head p{color:var(--ink-2);margin:0}
.atips{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.atip{background:var(--paper);border:1.5px solid var(--line);border-radius:14px;padding:16px 18px}
.atip h4{font-size:1.1rem;margin-bottom:6px}
.atip p{margin:0;font-size:.95rem}
.asec .note{font:400 1.15rem/1.35 var(--pen);color:var(--navy);background:var(--paper-2);border-radius:12px;padding:12px 16px;margin:18px 0 0}
.atip mark{background:var(--sun);padding:0 2px}
/* Dad Forecast */
.forecast-sec{padding:0 0 20px}
.forecast{display:grid;grid-template-columns:1.2fr repeat(3,1fr) 1.6fr;gap:0;background:var(--navy);color:var(--paper);border:2px solid var(--ink);border-radius:24px;box-shadow:0 6px 0 var(--ink);overflow:hidden;min-height:130px}
.forecast:not(.ready)::before{content:"Checking the sky\2026";grid-column:1/-1;align-self:center;text-align:center;color:#C9D2E6}
.forecast>div{padding:20px 22px;border-right:1px solid #33456D}
.forecast>div:last-child{border-right:0}
.forecast small{display:block;font:700 .7rem/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--sun);margin-bottom:6px}
.forecast b{display:block;font:800 1.7rem/1.1 var(--head)}
.forecast span{display:block;font-size:.84rem;color:#C9D2E6;margin-top:4px}
.fc-now{display:flex;gap:14px;align-items:center}
.fc-ico{font-size:2.6rem;line-height:1}
.fc-now b{font-size:1.3rem}
.fc-verdict{background:var(--navy-2)}
.fc-verdict b{font-size:1.3rem;color:var(--sun)}
.fc-verdict .btn{margin-top:12px;padding:10px 16px;font-size:.9rem}
@media(max-width:1000px){.forecast{grid-template-columns:1fr 1fr}.forecast>div{border-right:0;border-bottom:1px solid #33456D}.fc-now,.fc-verdict{grid-column:1/-1}}
.dm-map{height:420px;border:2px solid var(--ink);border-radius:24px;overflow:hidden;margin-top:24px;box-shadow:0 6px 0 var(--ink)}
.dm-stop{width:32px;height:32px;border-radius:50%;background:var(--sunset);color:#fff;border:2.5px solid var(--ink);display:grid;place-items:center;font:800 .95rem var(--head);box-shadow:0 2px 0 var(--ink)}
.dm-stop.home{background:var(--ink);color:var(--sun);font-size:1.1rem}
.dm-stop.nap{background:var(--navy);color:var(--sun)}
.dm-road{margin:24px 0 0;font-size:1rem}.dm-road b{font-family:var(--head)}
.item .far{font-style:normal;font-weight:700;color:var(--sunset)}
/* Rollouts */
.rollouts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:600px){.rollouts{grid-template-columns:1fr}}
.ro{all:unset;box-sizing:border-box;cursor:pointer;background:var(--white);border:2px solid var(--ink);border-radius:16px;padding:14px 16px;box-shadow:0 3px 0 var(--ink);transition:transform .12s}
.ro:hover{transform:translateY(-2px)}
.ro:focus-visible{outline:3px solid var(--sunset)}
.ro small{display:block;font:700 .7rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--sunset)}
.ro b{display:block;font:800 1.3rem/1.2 var(--head);margin:6px 0 4px}
.ro span{display:block;font-size:.88rem;color:var(--ink-2);line-height:1.4}
.ro[aria-pressed=true]{background:var(--sun);box-shadow:0 4px 0 var(--ink)}
.ro[aria-pressed=true] small{color:var(--ink)}
.ro[aria-pressed=true] span{color:var(--ink)}
.ro-extras{margin-top:14px;background:var(--sea-l);border:2px dashed var(--ink);border-radius:14px;padding:12px 14px;font-size:.92rem}
.ro-extras span{display:inline-block;background:var(--white);border:1.5px solid var(--ink);border-radius:99px;padding:3px 10px;margin:6px 6px 0 0;font-size:.82rem}
/* ===== Loadout HUD ===== */
.hud{--hud:#0D1424;--hud2:#132039;--line:rgba(120,190,255,.18);--cy:#5FD3FF;--hud-t:#DCE6F5;--hud-m:#8FA3C2;
  --common:#AEB8CC;--rare:#3FB6E8;--epic:#A970F0;--legendary:#F2A81D;
  background:radial-gradient(ellipse at 50% 30%,#1b2b4d 0,#0D1424 60%);color:var(--hud-t);padding:18px 0 26px;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);font-family:"Chakra Petch",var(--body)}
.hud-in{max-width:1320px;margin:0 auto;padding:0 20px}
.hud-top{display:flex;justify-content:space-between;gap:16px;font-weight:600;letter-spacing:.08em;font-size:.9rem;color:var(--hud-m);border-bottom:1px solid var(--line);padding-bottom:10px}
.hud-id{color:var(--cy)}
.hud-classes{display:flex;gap:6px;margin:16px 0 12px;flex-wrap:wrap}
.hc{all:unset;cursor:pointer;padding:10px 18px 9px;border:1px solid var(--line);background:rgba(255,255,255,.03);font:700 1.05rem/1.1 "Chakra Petch";text-transform:uppercase;letter-spacing:.06em;color:var(--hud-m);clip-path:polygon(0 0,100% 0,100% 70%,calc(100% - 12px) 100%,0 100%)}
.hc small{display:block;font-size:.65rem;letter-spacing:.14em;color:#5d7192;margin-bottom:3px}
.hc:hover{color:var(--hud-t);border-color:var(--cy)}
.hc.on{background:linear-gradient(180deg,rgba(95,211,255,.22),rgba(95,211,255,.06));color:#fff;border-color:var(--cy);box-shadow:inset 0 -3px 0 var(--cy)}
.hc.on small{color:var(--cy)}
.hc:focus-visible{outline:2px solid var(--sun)}
.hud-main{display:grid;grid-template-columns:1fr 360px;gap:16px}
.hud-stage{position:relative;height:min(62vh,560px);min-height:400px;border:1px solid var(--line);
  background:linear-gradient(rgba(95,211,255,.06) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,rgba(95,211,255,.06) 1px,transparent 1px) 0 0/28px 28px,radial-gradient(ellipse at 50% 55%,rgba(63,120,190,.35),rgba(13,20,36,.2) 70%);overflow:hidden}
.hud-stage::before,.hud-stage::after{content:"";position:absolute;width:22px;height:22px;border:2px solid var(--cy);pointer-events:none;z-index:2}
.hud-stage::before{left:8px;top:8px;border-right:0;border-bottom:0}.hud-stage::after{right:8px;bottom:8px;border-left:0;border-top:0}
.hud-stage canvas{width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}
.hud-stage canvas:active{cursor:grabbing}
.hud-tabs{position:absolute;left:16px;top:14px;z-index:3;display:flex;gap:18px}
.hud-tabs button{all:unset;cursor:pointer;font:700 .95rem "Chakra Petch";letter-spacing:.1em;text-transform:uppercase;color:var(--hud-m);padding-bottom:4px}
.hud-tabs button.on{color:#fff;border-bottom:2px solid var(--cy)}
.hud-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.hud-lines polyline{fill:none;stroke:var(--hud-m);stroke-width:1.2}
.hud-lines circle{fill:var(--sun)}
.hud-labels{position:absolute;inset:0;pointer-events:none;z-index:3}
.co{position:absolute;transform:translateY(-50%);display:flex;align-items:center;gap:8px;white-space:nowrap;font:700 .92rem "Chakra Petch";text-transform:uppercase;letter-spacing:.04em;color:var(--sun);text-shadow:0 1px 3px rgba(0,0,0,.6)}
.co.l{transform:translate(-100%,-50%);flex-direction:row-reverse}
.co i{font-style:normal;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--hud-m);display:grid;place-items:center;font-size:.75rem;color:var(--hud-t);background:rgba(13,20,36,.7)}
.hud-packed{position:absolute;right:16px;top:14px;z-index:3;font:700 .85rem "Chakra Petch";color:var(--sun);letter-spacing:.06em;text-transform:uppercase}
.hud-hint{position:absolute;left:0;right:0;bottom:10px;text-align:center;font-size:.78rem;color:var(--hud-m);letter-spacing:.08em;text-transform:uppercase;z-index:3;pointer-events:none}
.hud-detail{border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));padding:20px;display:flex;flex-direction:column}
.hd-top small{font:700 .72rem "Chakra Petch";letter-spacing:.14em;text-transform:uppercase}
.hd-top h3{font:700 1.6rem/1.1 "Chakra Petch";text-transform:uppercase;color:#fff;margin:6px 0 14px}
small.r-common{color:var(--common)}small.r-rare{color:var(--rare)}small.r-epic{color:var(--epic)}small.r-legendary{color:var(--legendary)}
.hd-stats{display:grid;gap:9px;margin-bottom:14px}
.hs{display:grid;grid-template-columns:112px 1fr 26px 50px;gap:8px;align-items:center;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--hud-m)}
.hs .bar{position:relative;height:6px;background:rgba(255,255,255,.08)}
.hs .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--hud-t)}
.hs .bar i.dl.up{background:#3CE07A}.hs .bar i.dl.dn{background:#FF5468}
.hs b{color:#fff;text-align:right;font-weight:700}
.hs em{font-style:normal;font-weight:700;font-size:.78rem}.hs em.up{color:#3CE07A}.hs em.dn{color:#FF5468}
.hud-detail p{font-family:var(--body);font-size:.92rem;color:var(--hud-t);margin:0 0 10px;line-height:1.5}
.hud-detail p.q{font:400 1.05rem/1.3 var(--pen);color:var(--sun)}
.hd-btn{all:unset;cursor:pointer;margin-top:auto;text-align:center;padding:14px;font:700 1.05rem "Chakra Petch";letter-spacing:.12em;text-transform:uppercase;background:var(--cy);color:#0D1424;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.hd-btn:hover{filter:brightness(1.1)}
.hd-btn.on{background:transparent;color:var(--cy);box-shadow:inset 0 0 0 2px var(--cy)}
.hud-cards{display:flex;gap:10px;overflow-x:auto;padding:14px 2px 6px;scrollbar-width:thin}
.card-i{all:unset;box-sizing:border-box;cursor:pointer;position:relative;flex:0 0 150px;height:132px;padding:12px;border:1px solid var(--line);border-bottom:4px solid var(--common);background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));display:flex;flex-direction:column;transition:transform .12s}
.card-i:hover{transform:translateY(-3px)}
.card-i.r-rare{border-bottom-color:var(--rare);background:linear-gradient(160deg,rgba(63,182,232,.22),rgba(63,182,232,.04))}
.card-i.r-epic{border-bottom-color:var(--epic);background:linear-gradient(160deg,rgba(169,112,240,.25),rgba(169,112,240,.04))}
.card-i.r-legendary{border-bottom-color:var(--legendary);background:linear-gradient(160deg,rgba(242,168,29,.28),rgba(242,168,29,.05))}
.card-i.sel{outline:2px solid #fff;outline-offset:-2px}
.card-i:focus-visible{outline:2px solid var(--sun)}
.card-i em{position:absolute;top:0;right:0;font:700 .62rem "Chakra Petch";letter-spacing:.1em;text-transform:uppercase;background:#3CE07A;color:#0D1424;padding:3px 6px}
.ci-ico{flex:1;display:grid;place-items:center;color:var(--hud-t)}
.ci-ico svg{width:40px;height:40px}
.card-i b{font:700 .82rem/1.15 "Chakra Petch";text-transform:uppercase;color:#fff}
.card-i small{font:600 .62rem "Chakra Petch";letter-spacing:.12em;text-transform:uppercase;color:var(--hud-m);margin-top:2px}
.hud-perks{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px;font-size:.78rem}
.hud-l{font:700 .72rem "Chakra Petch";letter-spacing:.14em;text-transform:uppercase;color:var(--hud-m);margin-right:4px}
.perk{border:1px solid var(--line);padding:5px 9px;color:var(--hud-m)}
.perk b{color:var(--cy);margin-right:6px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.hud-bottom{display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:center;margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.hud-power{display:flex;gap:22px;flex-wrap:wrap}
.hud-power div{display:flex;flex-direction:column}
.hud-power span{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--hud-m)}
.hud-power b{font:700 1.6rem/1 "Chakra Petch";color:#fff}
.hud-total{text-align:right}
.hud-total small{display:block;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--hud-m)}
.hud-total b{font:700 1.8rem "Chakra Petch";color:var(--sun)}
.hud-buy{all:unset;cursor:pointer;padding:16px 26px;background:linear-gradient(180deg,#5BE58A,#2FBF63);color:#0D1424;font:700 1.1rem "Chakra Petch";letter-spacing:.1em;text-transform:uppercase;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.hud-buy:hover{filter:brightness(1.08)}
.hud-buy:focus-visible,.hd-btn:focus-visible{outline:2px solid #fff}
.hud-keys{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--hud-m)}
.ka{font-style:normal;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid #3CE07A;color:#3CE07A;font-size:.75rem;margin-right:6px}
.hud-keys button{all:unset;cursor:pointer;border:1px solid var(--line);padding:5px 10px;color:var(--hud-m)}
@media(max-width:980px){
  .hud-main{grid-template-columns:1fr}
  .hud-stage{height:58vh;min-height:340px}
  .hud-bottom{grid-template-columns:1fr;text-align:left}
  .hud-total{text-align:left}
  .hud-buy{text-align:center}
  .hud-top span:not(.hud-id){display:none}
  .co{font-size:.72rem}.co i{width:20px;height:20px}
}
.bugout{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.bugout .prod-buy{margin-top:18px;max-width:360px}
.bugout-art{background:var(--paper-2);border:2px solid var(--ink);border-radius:24px;padding:24px;box-shadow:0 6px 0 var(--ink)}
@media(max-width:800px){.bugout{grid-template-columns:1fr}}
.co.dot{transform:translate(-50%,-50%)}
.co.dot i{background:var(--sun);color:#0D1424;border-color:#0D1424}
@media(max-width:600px){
  .hud-stage{height:auto;min-height:0;display:flex;flex-direction:column}
  .hud-tabs{position:static;padding:12px 14px 0;gap:14px}
  .hud-stage canvas{height:52vh;min-height:300px}
  .hud-packed{top:auto;bottom:60px;right:12px}
  .hud-perks{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px}
  .perk{flex:none}
  .hud-classes{display:grid;grid-template-columns:1fr 1fr}
  .hc{font-size:.9rem;padding:9px 12px 8px}
  .hud-hint{font-size:.68rem}
}
/* loadout: shop clarity */
.hud-run{color:var(--sun);font-weight:700;letter-spacing:.06em}
.hud-steps{list-style:none;display:flex;gap:10px;flex-wrap:wrap;padding:0;margin:14px 0 0}
.hud-steps li{display:flex;align-items:center;gap:10px;font:700 1rem "Chakra Petch";text-transform:uppercase;letter-spacing:.06em;color:#fff;padding:8px 14px 8px 8px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.hud-steps b{width:28px;height:28px;display:grid;place-items:center;background:var(--sun);color:#0D1424;border-radius:50%}
.hud-steps small{font:500 .78rem var(--body);text-transform:none;letter-spacing:0;color:var(--hud-m)}
.hc-p{display:block;font:600 .78rem "Chakra Petch";letter-spacing:.04em;color:var(--sun);margin-top:4px;text-transform:none}
.hd-price{font:700 1.6rem "Chakra Petch";color:var(--sun);margin:-6px 0 12px}
.hd-btn{margin:6px 0 18px}
.hd-stats{margin:0;opacity:.85}
.hd-stats .hud-l{display:block;margin-bottom:4px}
.ci-p{font:700 .85rem "Chakra Petch";color:var(--sun);margin-top:2px}
.ci-add{position:absolute;top:0;right:0;font:700 .66rem "Chakra Petch";letter-spacing:.08em;text-transform:uppercase;background:var(--cy);color:#0D1424;padding:4px 7px}
.card-i.eq .ci-add{background:#3CE07A}
.card-i{height:150px}
.hud-bottom{grid-template-columns:1fr auto auto;align-items:end}
.hud-order ul{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:2px 18px;font-size:.88rem}
.hud-order li{display:flex;gap:8px;align-items:center;padding:4px 0;border-bottom:1px dashed var(--line);color:var(--hud-t)}
.hud-order li span{flex:1}
.hud-order li b{color:var(--sun);font-family:"Chakra Petch"}
.hud-order li button{all:unset;cursor:pointer;color:#FF5468;font-size:1.1rem;padding:0 4px}
.hud-keys span{text-transform:none;letter-spacing:0;font-family:var(--body)}
.hud-ready{margin:14px 0 0;padding:12px 16px;border:1px solid rgba(60,224,122,.5);background:rgba(60,224,122,.08);color:var(--hud-t);font-size:.95rem}
.hud-ready b{color:#3CE07A;font-family:"Chakra Petch";letter-spacing:.04em;text-transform:uppercase;margin-right:6px}
.hd-pack{list-style:none;padding:0;margin:0 0 12px;display:flex;flex-wrap:wrap;gap:6px}
.hd-pack li{border:1px solid rgba(60,224,122,.5);color:#3CE07A;padding:3px 9px;font-size:.82rem}
.hud-order li.pk span{color:#3CE07A}
.hud-order li small{color:var(--hud-m);font-size:.78rem}
/* ===== Blueprint shop ===== */
.bp{--bp:#1F5FBF;--bp-ink:#13305E;--bp-l:#E4EEFB;--bp-m:#C9DBF4;
  background:#fff linear-gradient(var(--bp-l) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,var(--bp-l) 1px,transparent 1px) 0 0/24px 24px;
  background-color:#fff;color:var(--bp-ink);padding:clamp(48px,7vw,90px) 0}
.bp h1,.bp h2,.bp h3,.bp h4{color:var(--bp-ink)}
.bp-hero{border-bottom:1.5px solid var(--bp-m)}
.bp-hero-in{display:grid;grid-template-columns:.85fr 1.25fr;gap:40px;align-items:center}
@media(max-width:900px){.bp-hero-in{grid-template-columns:1fr}}
.bp-tag{display:inline-block;font:700 .78rem "Chakra Petch",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--bp);border:1.5px solid var(--bp);padding:5px 10px;margin-bottom:16px;background:#fff}
.bp-hero h1{font-size:clamp(2.6rem,6vw,4.6rem)}
.bp-hero .lead{color:#3E5476}
.bp-what{background:#fff;border:1.5px solid var(--bp);border-left-width:6px;padding:16px 18px;margin:22px 0 26px;font-size:1.02rem}
.bp-what b:first-child{display:block;font:700 1rem "Chakra Petch",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--bp);margin-bottom:4px}
.bp-bag{width:100%;height:auto;background:#fff;border:1.5px solid var(--bp-m)}
.bp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 .95rem "Chakra Petch",sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:13px 20px;border:1.5px solid var(--bp,#1F5FBF);color:var(--bp,#1F5FBF);background:#fff;cursor:pointer;text-decoration:none;transition:background .15s,color .15s}
.bp-btn:hover,.bp-btn.solid{background:var(--bp,#1F5FBF);color:#fff}
.bp-btn:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.bp-head{margin-bottom:26px}.bp-head h2{margin:0}.bp-head p{color:#3E5476;margin:6px 0 0}
.bp-rolls{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1100px){.bp-rolls{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.bp-rolls{grid-template-columns:1fr}}
.bp-roll{background:#fff;border:1.5px solid var(--bp-m);padding:22px;display:flex;flex-direction:column;position:relative;transition:border-color .15s,box-shadow .15s}
.bp-roll::before,.bp-roll::after{content:"";position:absolute;width:12px;height:12px;border:2px solid var(--bp)}
.bp-roll::before{left:-2px;top:-2px;border-right:0;border-bottom:0}.bp-roll::after{right:-2px;bottom:-2px;border-left:0;border-top:0}
.bp-roll.on{border-color:var(--bp);box-shadow:0 0 0 3px var(--bp-m)}
.bp-roll header small{font:700 .72rem "Chakra Petch",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--bp)}
.bp-roll h3{font-size:1.6rem;margin:4px 0 6px}
.bp-price{font:700 1.4rem "Chakra Petch",sans-serif;color:var(--bp)}
.bp-roll p{font-size:.92rem;color:#3E5476;margin:12px 0}
.bp-roll h4{font:700 .74rem "Chakra Petch",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--bp);margin:10px 0 6px}
.bp-roll ul{margin:0;padding:0;list-style:none;font-size:.9rem}
.bp-roll li{padding:3px 0 3px 20px;position:relative;border-bottom:1px dashed var(--bp-l)}
.bp-pack li::before{content:"✓";position:absolute;left:0;color:#2E9C5A;font-weight:700}
.bp-kit li::before{content:"+";position:absolute;left:2px;color:var(--bp);font-weight:700}
.bp-roll .bp-btn{margin-top:auto;width:100%}
.bp-roll ul+.bp-btn,.bp-roll .bp-kit{margin-bottom:18px}
.bp-roll.on .bp-btn{background:var(--bp);color:#fff}
.bp-xs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.bp-x{display:grid;grid-template-columns:44px 1fr auto auto;gap:12px;align-items:center;background:#fff;border:1.5px solid var(--bp-m);padding:12px 14px}
.bp-x.on{border-color:var(--bp);box-shadow:0 0 0 3px var(--bp-m)}
.bp-x.inc{opacity:.55}
.bp-ico{width:44px;height:44px;border:1.5px solid var(--bp);display:grid;place-items:center;color:var(--bp)}
.bp-ico svg{width:24px;height:24px}
.bp-x h4{font-size:1rem;margin:0}
.bp-x p{margin:2px 0 0;font-size:.8rem;color:#5E7393}
.bp-xp{font:700 .9rem "Chakra Petch",sans-serif;color:var(--bp);white-space:nowrap}
.bp-add{font:700 .8rem "Chakra Petch",sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:9px 12px;border:1.5px solid var(--bp);background:#fff;color:var(--bp);cursor:pointer;white-space:nowrap}
.bp-x.on .bp-add{background:var(--bp);color:#fff}
.bp-add:disabled{cursor:default;border-style:dashed}
@media(max-width:420px){.bp-x{grid-template-columns:40px 1fr auto}.bp-xp{grid-column:2}.bp-add{grid-column:3;grid-row:1/3}}
.bp-bar{position:sticky;bottom:0;z-index:40;background:#fff;border-top:2px solid #1F5FBF;box-shadow:0 -8px 24px rgba(19,48,94,.12)}
.bp-bar[hidden]{display:none}
.bp-bar .wrap{display:flex;align-items:center;gap:16px;padding-top:12px;padding-bottom:12px}
.bp-sum{flex:1;color:#13305E;font-size:.95rem;line-height:1.35}
.bp-sum b{font-family:"Chakra Petch",sans-serif;letter-spacing:.04em;text-transform:uppercase}
.bp-sum span{display:block;font:700 1.3rem "Chakra Petch",sans-serif;color:#1F5FBF}
.bp-legend{display:none}
@media(max-width:700px){
  .bp-lab{display:none}
  .bp-legend{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;margin:10px 0 0;padding-left:1.4em;font:700 .74rem "Chakra Petch",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#1F5FBF}
}
/* ===== Shop back on brand (overrides the blueprint look, same structure) ===== */
.bp{--bp:var(--sunset);--bp-ink:var(--ink);--bp-l:transparent;--bp-m:var(--ink);background:var(--paper);color:var(--ink)}
.bp-hero{border-bottom:0;padding-bottom:20px}
.bp-hero-in{grid-template-columns:1fr}
.bp-hero-in>div:first-child{max-width:760px}
.bp-hero h1{font-size:clamp(2.8rem,7vw,5.4rem)}
.bp-hero .lead{color:var(--ink-2)}
.bp-tag{font:700 .78rem/1 var(--body);letter-spacing:.14em;background:var(--ink);color:var(--paper);border:0;border-radius:99px;padding:7px 12px}
.bp-what{background:var(--white);border:2px solid var(--ink);border-left:8px solid var(--sun);border-radius:var(--r);box-shadow:var(--shadow)}
.bp-what b:first-child{font:800 1.1rem var(--head);letter-spacing:0;text-transform:none;color:var(--sunset)}
.bp-bag{background:var(--white);border:2px solid var(--ink);border-radius:28px;box-shadow:0 6px 0 var(--ink);padding:10px;margin-top:10px}
.bp-btn{font:700 1rem/1 var(--body);letter-spacing:0;text-transform:none;border:2px solid var(--ink);border-radius:99px;color:var(--ink);background:var(--white);box-shadow:0 3px 0 var(--ink);padding:15px 22px}
.bp-btn:hover{background:var(--sun);color:var(--ink);transform:translateY(-2px)}
.bp-btn.solid,.bp-roll.on .bp-btn{background:var(--sunset);color:#fff}
.bp-roll{border:2px solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow);background:var(--white)}
.bp-roll::before,.bp-roll::after{display:none}
.bp-roll.on{box-shadow:0 0 0 4px var(--sun),var(--shadow)}
.bp-roll header small{font:700 .72rem var(--body);letter-spacing:.12em;color:var(--sunset)}
.bp-roll h3{font-family:var(--head);font-size:1.7rem}
.bp-price{font:800 1.4rem var(--head);color:var(--sunset)}
.bp-roll p{color:var(--ink-2)}
.bp-roll h4{font:700 .74rem var(--body);letter-spacing:.12em;color:var(--sea)}
.bp-roll li{border-bottom:1px dashed var(--line)}
.bp-pack li::before{color:var(--leaf)}.bp-kit li::before{color:var(--sunset)}
.bp-head h2{font-size:clamp(2rem,4.4vw,3.2rem)}
.bp-head p{color:var(--ink-2)}
.bp-x{border:2px solid var(--ink);border-radius:16px;background:var(--white);box-shadow:0 3px 0 var(--ink)}
.bp-x.on{box-shadow:0 0 0 4px var(--sun),0 3px 0 var(--ink)}
.bp-ico{border:2px solid var(--ink);border-radius:12px;background:var(--sun);color:var(--ink)}
.bp-xp{font:800 1rem var(--head);color:var(--sunset)}
.bp-add{font:700 .85rem var(--body);letter-spacing:0;text-transform:none;border:2px solid var(--ink);border-radius:99px;color:var(--ink);padding:9px 14px;background:var(--white)}
.bp-x.on .bp-add{background:var(--sea);color:#fff}
.bp-bar{background:var(--paper);border-top:2px solid var(--ink);box-shadow:0 -6px 20px rgba(30,36,51,.12)}
.bp-sum{color:var(--ink)}.bp-sum b{font-family:var(--head);text-transform:none;letter-spacing:0}
.bp-sum span{font:800 1.4rem var(--head);color:var(--sunset)}
.bp-legend{color:var(--ink);font-family:var(--body);text-transform:none;letter-spacing:0;font-size:.85rem}
.bp-pack li.no1{background:var(--sun);border:2px solid var(--ink);border-radius:10px;padding:8px 10px 8px 30px;margin-bottom:6px;font-weight:700;transform:rotate(-1deg)}
.bp-pack li.no1::before{content:"🍺";left:8px;top:8px}
.bp-pack li.no1 em{display:block;font:400 .82rem var(--pen);font-style:normal;color:var(--sunset)}
/* closed / open views */
.views{background:var(--white);border:2px solid var(--ink);border-radius:28px;box-shadow:0 6px 0 var(--ink);padding:18px;margin-top:10px}
.views-tog{display:flex;gap:6px;justify-content:center;margin-bottom:6px}
.views-tog button{font:700 1rem var(--body);padding:11px 22px;border:2px solid var(--ink);border-radius:99px;background:var(--white);cursor:pointer}
.views-tog button[aria-selected=true]{background:var(--ink);color:var(--sun)}
.bag-svg{width:100%;height:auto;display:block}
.pockets{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:8px}
@media(max-width:1000px){.pockets{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.pockets{grid-template-columns:1fr}}
.pocket{background:var(--paper);border:2px solid var(--ink);border-radius:18px;padding:12px}
.pocket svg{width:100%;height:auto;display:block}
.pocket h3{font-size:1.15rem;margin:8px 0 6px}
.pocket ul{margin:0;padding-left:1.1em;font-size:.88rem;color:var(--ink-2)}
.pocket li{margin-bottom:4px}
/* animated bag scene */
.views-tog button[aria-pressed=true]{background:var(--ink);color:var(--sun)}
.scene{width:100%;height:auto;display:block;overflow:visible}
.scene .bag{transform-box:view-box;transform-origin:0 0;transform:translate(150px,60px);transition:transform .8s cubic-bezier(.2,.8,.2,1);cursor:pointer}
.views.open .scene .bag{transform:translate(303px,162px) scale(.66);cursor:default}
.scene .calls{transition:opacity .3s}
.views.open .scene .calls{opacity:0;pointer-events:none}
.scene .ln{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .6s ease .55s}
.views.open .scene .ln{stroke-dashoffset:0}
.scene .ln-dot{fill:var(--sun);stroke:var(--ink);stroke-width:2;opacity:0;transition:opacity .3s .5s}
.views.open .scene .ln-dot{opacity:1}
.scene .cmp{transform-box:view-box;transform-origin:0 0;transform:translate(450px,300px) scale(.08);opacity:0;pointer-events:none;
  transition:transform .75s cubic-bezier(.3,1.3,.5,1) calc(var(--n) * 90ms + .1s),opacity .3s calc(var(--n) * 90ms + .1s);cursor:pointer}
.views.open .scene .cmp{transform:translate(var(--x),var(--y));opacity:1;pointer-events:auto}
.scene .cmp-bg{fill:var(--white);stroke:var(--ink);stroke-width:2.5;transition:fill .2s,stroke .2s}
.scene .cmp:hover .cmp-bg,.scene .cmp:focus .cmp-bg{fill:#FFF6DF}
.scene .cmp.on .cmp-bg{fill:#FFF0C9;stroke:var(--sunset);stroke-width:4}
.scene .cmp:focus{outline:none}
.scene .it{transform-box:fill-box;transform-origin:center;opacity:0;transform:translateY(-30px) scale(.6);transition:opacity .3s,transform .45s cubic-bezier(.3,1.5,.5,1)}
.views.open .scene .it{opacity:1;transform:none;transition-delay:calc(.75s + var(--n) * 90ms + var(--d) * 140ms)}
.scene-hint{text-align:center;color:var(--ink-2);margin:8px 0 0;font-size:.95rem}
.cmp-detail{background:var(--paper);border:2px solid var(--ink);border-left:8px solid var(--sun);border-radius:14px;padding:14px 18px;margin-top:12px}
.cmp-detail h3{margin:0 0 6px;font-size:1.2rem}
.cmp-detail ul{margin:0;padding-left:1.1em;color:var(--ink-2)}
.m-only{display:none}
@media(max-width:700px){
  .views.open .scene{display:none}
  .views.open .m-only{display:grid}
  .views.open .cmp-details{display:none}
}
@media (prefers-reduced-motion:reduce){.scene .bag,.scene .cmp,.scene .it,.scene .ln{transition:none}}
/* bag options page */
.opt-sec{border-top:2px dashed var(--line)}
.opt-sec .views,.opt-b,.opt-c,.opt-d,.opt-e{background:var(--white);border:2px solid var(--ink);border-radius:28px;box-shadow:0 6px 0 var(--ink);padding:18px}
.views.open .scene .bag{transform:translate(303px,162px) scale(.66)}
.opt-sec [data-opt="a"].open .scene .bag{transform:translate(303px,162px) scale(.66)}
.opt-sec [data-opt="a"].open .scene .cmp{transform:translate(var(--x),var(--y));opacity:1;pointer-events:auto}
.opt-sec [data-opt="a"].open .scene .calls{opacity:0}
.opt-sec [data-opt="a"].open .scene .ln{stroke-dashoffset:0}
.opt-sec [data-opt="a"].open .scene .ln-dot{opacity:1}
.opt-sec [data-opt="a"].open .scene .it{opacity:1;transform:none;transition-delay:calc(.75s + var(--n) * 90ms + var(--d) * 140ms)}
.fan-svg{width:100%;height:auto;display:block}
.fan{transform-box:view-box;transform-origin:600px 600px;transition:transform .9s cubic-bezier(.3,1.2,.5,1)}
.fan .fan-in,.fan .fan-lab{opacity:0;transition:opacity .4s}
.fan-closed{transition:opacity .3s}
.opt-b.open .f-main{transform:translateX(-300px)}
.opt-b.open .f-mid{transform:translateX(-40px) rotate(10deg);transition-delay:.12s}
.opt-b.open .f-front{transform:translateX(190px) rotate(22deg);transition-delay:.24s}
.opt-b.open .fan-in,.opt-b.open .fan-lab{opacity:1;transition-delay:.7s}
.opt-b.open .fan-closed{opacity:0}
.cut{width:100%;height:auto;display:block;max-height:560px}
.cut .zone{fill:#6B7444;cursor:pointer;transition:fill .2s}
.cut [data-zone="mid"]{fill:#565D36}.cut [data-zone="lo"],.cut [data-zone="up"]{fill:#7E8852}
.cut [data-zone="sleeve"]{fill:#565D36;opacity:.85}.cut [data-zone="molle"]{fill:#1E2433}
.cut .zone.hl{fill:#F2A81D;animation:zpulse 1.2s ease-in-out infinite}
@keyframes zpulse{50%{fill:#FFD36B}}
.cut .layer{transition:transform .35s}
.cut .layer.pull{transform:translateX(26px)}
.cut .cut-items{pointer-events:none}
.opt-c{display:grid;grid-template-columns:.8fr 1.2fr;gap:24px;align-items:center}
.tour-hint{text-align:center;color:var(--ink-2);font-size:.85rem;margin:4px 0 0}
.tour-n{font:700 .8rem var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--sunset)}
.tour-step h3{font-size:1.8rem;margin:4px 0 8px}
.tour-art{width:100%;max-width:380px;height:auto;display:block}
.tour-step ul{color:var(--ink-2)}
.opt-d{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}
.chip.find{opacity:1;background:var(--white)}
.chip.find.on{background:var(--sun)}
.find-out{font-size:1.2rem;margin-top:16px;min-height:1.6em}
.opt-e{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.cut-key{display:grid;gap:8px;padding-left:1.3em}
.cut-key li{padding:8px 10px;border-radius:12px;cursor:pointer}
.cut-key li b{display:block;font-family:var(--head)}
.cut-key li.on{background:var(--sun)}
@media(max-width:860px){.opt-c,.opt-d,.opt-e{grid-template-columns:1fr}}
/* bigger "Kitted out with" + item info cards */
.bp-roll h4.kit-h{font:800 1.15rem var(--head);letter-spacing:0;text-transform:none;color:var(--ink);margin-top:18px}
.bp-kit li{font-size:1.02rem;font-weight:600;padding:8px 0 8px 24px}
.bp-kit li::before{font-size:1.1rem;top:6px}
.bp-roll li[data-tip]{cursor:help;text-decoration:underline dotted rgba(30,36,51,.35);text-underline-offset:3px}
.bp-roll li[data-tip]:hover,.bp-roll li[data-tip]:focus{background:#FFF3D6;outline:none;border-radius:6px}
.tipcard{position:absolute;z-index:90;width:min(320px,calc(100vw - 32px));background:var(--white);border:2px solid var(--ink);border-radius:16px;box-shadow:0 4px 0 var(--ink),0 14px 30px rgba(30,36,51,.18);padding:14px 16px;font-size:.92rem;pointer-events:none}
.tipcard h5{font:800 1.1rem var(--head);margin:0 0 6px}
.tipcard p{margin:0 0 8px;color:var(--ink-2)}
.tipcard .why{font:400 1rem/1.3 var(--pen);color:var(--sunset)}
.tipcard .val{display:flex;justify-content:space-between;border-top:1px dashed var(--line);padding-top:8px;font-weight:700}
.tipcard .val b{font-family:var(--head);color:var(--sunset)}
.bp-roll li[data-tip],.bp-roll li{display:flex;gap:10px;align-items:flex-start}
.bp-roll li .lt{flex:1}
.bp-roll li .lp{font:700 .9rem var(--head);color:var(--sunset);white-space:nowrap}
.bp-roll li.no1 .lp{color:var(--ink)}
.bp-total{display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid var(--ink);margin:8px 0 14px;padding-top:10px}
.bp-total span{font:800 1rem var(--head)}
.bp-total b{font:800 1.6rem var(--head);color:var(--sunset)}
.sample-note{display:inline-block;background:var(--sun);border:2px solid var(--ink);border-radius:99px;padding:4px 12px;font-size:.85rem;font-weight:700;color:var(--ink)!important}
.tip-pic{background:var(--paper-2);border:2px solid var(--ink);border-radius:12px;margin:-2px 0 10px;padding:6px;display:grid;place-items:center}
.tip-pic svg{width:110px;height:88px}
.dm-from-in{display:flex;gap:6px}
.dm-from-in input{flex:1;font:500 1rem var(--body);padding:11px 14px;border:2px solid var(--ink);border-radius:12px;background:var(--white);min-width:0}
.dm-loc{width:46px;border:2px solid var(--ink);border-radius:12px;background:var(--sun);cursor:pointer;font-size:1.1rem}
.dm-from small{font-weight:500;color:var(--ink-2);font-size:.78rem;min-height:1em}
.mpin .dt{position:absolute;right:-6px;top:-6px;transform:rotate(45deg);width:16px;height:16px;border-radius:50%;background:#2E9C5A;color:#fff;font:800 10px/16px var(--body);text-align:center;font-style:normal;border:1.5px solid var(--ink)}
.mpin{position:relative}
.dt-tag{font:700 .68rem var(--body);font-style:normal;background:#2E9C5A;color:#fff;border-radius:99px;padding:2px 6px;margin-left:4px;vertical-align:middle}
.hrs{display:inline-block;margin-top:6px;font:700 .72rem var(--body);background:var(--paper-2);border-radius:99px;padding:2px 8px;color:var(--ink-2)}.hrs.ok{background:#D6F0DE;color:#2E7D4F}
.map-busy{position:absolute;top:14px;left:50%;transform:translate(-50%,-8px);z-index:5;background:var(--ink);color:var(--sun);font:700 .85rem var(--body);padding:8px 14px;border-radius:99px;opacity:0;transition:opacity .15s,transform .15s;pointer-events:none}
.map-busy.on{opacity:1;transform:translate(-50%,0)}
#map{position:relative}
/* as-you-type search */
.mapside-top{position:relative}
.sugg{position:absolute;left:20px;right:20px;z-index:30;margin-top:6px;background:var(--white);border:2px solid var(--ink);border-radius:16px;box-shadow:0 4px 0 var(--ink),0 14px 30px rgba(30,36,51,.18);max-height:60vh;overflow:auto;padding:6px}
.sugg[hidden]{display:none}
.sg{all:unset;box-sizing:border-box;display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:center;width:100%;padding:8px 10px;border-radius:10px;cursor:pointer}
.sg:hover,.sg.on{background:var(--paper-2)}
.sg-ico{width:30px;height:30px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:50%;background:var(--sun);font-size:.9rem}
.sg-ico svg{width:16px;height:16px}
.sg b{display:block;font-family:var(--head);font-size:.98rem;line-height:1.2}
.sg small{display:block;color:var(--ink-2);font-size:.8rem}
.sg-none{margin:8px 10px;color:var(--ink-2)}
.gr-desc{font-size:.86rem;color:#C9D2E6;margin:8px 0 0;line-height:1.4}
.map-note{position:absolute;left:14px;right:60px;bottom:40px;z-index:6;background:var(--white);border:2px solid var(--ink);border-radius:14px;box-shadow:0 3px 0 var(--ink);padding:10px 36px 10px 14px;font-size:.9rem;max-width:460px}
.map-note[hidden]{display:none}
.map-note button{position:absolute;right:8px;top:6px;border:0;background:none;font-size:1.3rem;cursor:pointer}
.grail .gr-desc{color:#E8EEF8 !important;opacity:1}
.focus-mk{width:18px;height:18px;border-radius:50%;background:var(--sunset);border:3px solid #fff;box-shadow:0 0 0 2px var(--ink),0 0 0 8px rgba(233,87,43,.25)}
.dm-from{position:relative}
.dm-sugg{left:0;right:0;top:100%}
.dog-tag{font-style:normal;font:700 .7rem var(--body);background:#D6F0DE;color:#2E7D4F;border-radius:99px;padding:2px 7px;margin-left:4px;white-space:nowrap}
.dog-tag.m{background:var(--paper-2);color:var(--ink-2)}
.chip.dog-chip[aria-pressed=true]{background:#2E9C5A;color:#fff}
.dm-dog{align-self:end}
/* ===== 3D Satchel shop ===== */
.s3-shop{padding:24px 0 40px;background:var(--paper)}
.s3-grid{display:grid;grid-template-columns:1.25fr .9fr;gap:24px;align-items:stretch}
@media(max-width:960px){.s3-grid{grid-template-columns:1fr}}
.s3-stage{position:relative;height:min(78vh,720px);min-height:420px;background:#FFFDF8;border:2px solid var(--ink);border-radius:28px;box-shadow:0 6px 0 var(--ink);overflow:hidden}
.s3-stage canvas{display:block;width:100%!important;height:100%!important;touch-action:pan-y;cursor:grab}
.s3-load{position:absolute;inset:0;display:grid;place-items:center;font-weight:700;color:var(--ink-2)}
.s3-hint{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-size:.8rem;color:var(--ink-2);pointer-events:none}
.s3d-tag{position:absolute;left:0;top:0;pointer-events:none;background:var(--white);border:2px solid var(--ink);border-radius:12px;padding:6px 10px;font-size:.8rem;line-height:1.3;max-width:200px;opacity:0;transition:opacity .25s;box-shadow:0 2px 0 var(--ink);z-index:2}
.s3d-tag b{display:block;font:800 .9rem var(--head)}
.s3d-tag.mini{padding:4px 9px;max-width:none;white-space:nowrap}.s3d-tag.mini span{display:none}
.s3-panel{background:var(--white);border:2px solid var(--ink);border-radius:28px;box-shadow:0 6px 0 var(--ink);padding:24px;display:flex;flex-direction:column;gap:14px}
.s3-panel h1{font-size:clamp(2rem,3.4vw,2.8rem);margin:0}
.s3-sub{color:var(--ink-2);margin:0}
.s3-open{align-self:flex-start;background:var(--sunset)!important;color:#fff!important}
.s3-open.on{background:var(--ink)!important;color:var(--sun)!important}
.s3-comps{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.s3-comp{all:unset;box-sizing:border-box;cursor:pointer;border:2px solid var(--ink);border-radius:14px;padding:10px 12px;background:var(--paper)}
.s3-comp b{display:block;font:800 1rem var(--head)}
.s3-comp span{display:block;font-size:.8rem;color:var(--ink-2);line-height:1.35;margin-top:2px}
.s3-comp:hover{background:#FFF3D6}
.s3-comp.on{background:var(--sun)}
.s3-comp:focus-visible{outline:3px solid var(--sunset)}
.s3-step p{margin:8px 0;color:var(--ink-2);font-size:.92rem}
.s3-rolls{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.s3-roll{all:unset;box-sizing:border-box;cursor:pointer;border:2px solid var(--ink);border-radius:99px;padding:9px 14px;display:flex;justify-content:space-between;gap:8px;align-items:center;background:var(--white)}
.s3-roll b{font:800 .95rem var(--head)}
.s3-roll small{font:700 .85rem var(--head);color:var(--sunset)}
.s3-roll.on{background:var(--ink);color:var(--paper)}.s3-roll.on small{color:var(--sun)}
.s3-roll:focus-visible{outline:3px solid var(--sunset)}
.s3-more{font-weight:700;color:var(--sunset);font-size:.9rem;display:inline-block;margin-top:8px}
.s3-total{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-top:2px solid var(--ink);padding-top:12px;margin-top:auto}
.s3-total[hidden]{display:none}
.s3-total span{flex:1}
.s3-price{font:800 1.5rem var(--head);color:var(--sunset)}
@media(max-width:500px){.s3-comps,.s3-rolls{grid-template-columns:1fr}}
/* Dog mode: headline switch */
.dogcard{all:unset;box-sizing:border-box;display:grid;grid-template-columns:44px 1fr 52px;gap:12px;align-items:center;width:100%;margin-top:12px;padding:12px 14px;border:2px solid var(--ink);border-radius:16px;background:#E6F4EA;box-shadow:0 3px 0 var(--ink);cursor:pointer;transition:background .2s,transform .1s}
.dogcard:hover{transform:translateY(-1px)}
.dogcard:focus-visible,.dogcard:focus-within{outline:3px solid var(--sunset);outline-offset:2px}
.dc-ico{font-size:1.9rem;line-height:1;text-align:center}
.dc-txt b{display:block;font:800 1.15rem var(--head);color:var(--ink)}
.dc-txt small{display:block;font-size:.8rem;color:var(--ink-2);line-height:1.35;margin-top:2px}
.dc-sw{width:52px;height:30px;border-radius:99px;border:2px solid var(--ink);background:var(--white);position:relative;transition:background .2s}
.dc-sw i{position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:var(--ink);transition:transform .2s}
.dogcard[aria-pressed=true],.dogcard:has(.dc-in:checked){background:#2E9C5A}
.dogcard[aria-pressed=true] .dc-txt b,.dogcard[aria-pressed=true] .dc-txt small,.dogcard:has(.dc-in:checked) .dc-txt b,.dogcard:has(.dc-in:checked) .dc-txt small{color:#fff}
.dogcard[aria-pressed=true] .dc-sw,.dogcard:has(.dc-in:checked) .dc-sw{background:var(--sun)}
.dogcard[aria-pressed=true] .dc-sw i,.dogcard:has(.dc-in:checked) .dc-sw i{transform:translateX(22px)}
.dc-in{position:absolute;opacity:0;width:1px;height:1px}
.dm-dogcard{margin:0 0 4px}
.mapmain{position:relative}
.dog-fab{position:absolute;left:14px;top:14px;z-index:4;display:flex;align-items:center;gap:8px;font:800 1rem var(--head);padding:10px 16px 10px 12px;border:2px solid var(--ink);border-radius:99px;background:var(--white);box-shadow:0 3px 0 var(--ink);cursor:pointer;font-size:1.3rem}
.dog-fab span{font-size:.95rem}
.dog-fab[aria-pressed=true]{background:#2E9C5A;color:#fff}
.dog-fab[aria-pressed=true] span::after{content:" on"}
.dm-form .dogcard{display:grid;flex-direction:row;grid-template-columns:44px 1fr 52px;align-items:center;gap:12px}
/* 3D bag sits on the page like the home hero: no box, bleeds to the edge */
.s3-shop{padding:0 0 30px;overflow:hidden}
.s3-shop .wrap.s3-grid{max-width:1400px;grid-template-columns:1.5fr .85fr;align-items:center}
.s3-stage{border:0;box-shadow:none;border-radius:0;background:transparent;height:min(82vh,820px);min-height:420px;overflow:hidden}
.s3-stage canvas{background:transparent}
.s3-hint{bottom:18px;font-weight:600}
@media(max-width:960px){.s3-stage{height:62vh;min-height:360px}}
.jack{width:1.6em;height:1.2em;display:inline-block;vertical-align:-0.25em}
.dc-ico .jack{width:44px;height:34px}
.dog-fab .jack{width:30px;height:24px}
.dog-tag .jack{width:1.5em;height:1.1em;vertical-align:-0.3em}
.jackline .jack{width:1.8em;height:1.35em}
.phone-modal{position:fixed;inset:0;z-index:95;background:rgba(30,36,51,.5);display:grid;place-items:center;padding:16px}
.phone-modal[hidden]{display:none}
.pm-card{position:relative;background:var(--paper);border:2px solid var(--ink);border-radius:24px;box-shadow:0 6px 0 var(--ink);padding:24px;max-width:440px;width:100%;text-align:center}
.pm-card h3{font-size:1.6rem;margin:0 0 6px}
.pm-stops{font-size:.88rem;color:var(--ink-2)}
.pm-qr{display:grid;place-items:center;background:#FFFDF8;border:2px solid var(--ink);border-radius:16px;padding:14px;margin:10px auto;width:max-content}
.pm-hint{font-size:.85rem;color:var(--ink-2)}
.pm-card .btns{justify-content:center;margin-top:12px}
.pm-x{position:absolute;right:12px;top:10px;width:36px;height:36px;border-radius:50%;border:2px solid var(--ink);background:var(--white);font-size:1.3rem;cursor:pointer}
.dc-ico .jack{width:52px;height:38px}
.dog-fab .jack{width:34px;height:25px}

@media(max-width:960px){.s3-shop .wrap.s3-grid{grid-template-columns:1fr}.s3-stage{height:60vh;min-height:340px;width:100%}}
.s3-colours{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.s3-colours .mlabel{margin-right:4px}
.sw{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 6px;border:2px solid var(--ink);border-radius:99px;font:700 .9rem var(--body);background:var(--white)}
.sw i{width:22px;height:22px;border-radius:50%;border:2px solid var(--ink)}
.sw[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.sw:focus-visible{outline:3px solid var(--sunset)}
/* community signup */
.subbox{background:var(--white);border:2px solid var(--ink);border-radius:24px;box-shadow:0 6px 0 var(--ink);padding:22px;position:relative}
.subbox h3{font-size:1.5rem;margin:0 0 6px}
.subbox p{color:var(--ink-2);margin:0 0 12px}
.subbox form{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.subbox input[type=email],.subbox input:not([type]),.subbox input[name=suburb],.subbox input[name=place],.subbox input[name=note]{flex:1 1 200px;font:500 1rem var(--body);padding:13px 16px;border:2px solid var(--ink);border-radius:99px;background:var(--paper);min-width:0}
.subbox .hp{position:absolute;left:-9999px;width:1px;height:1px}
.sb-dog{display:flex;align-items:center;gap:6px;font-weight:700;font-size:.9rem;flex:1 1 100%}
.sb-dog input{width:18px;height:18px;accent-color:#2E9C5A}
.sb-dog .jack{width:30px;height:22px}
.sb-msg{color:var(--thong)!important;font-weight:700;min-height:0;margin:6px 0 0!important}
.sb-fine{font-size:.78rem;margin:10px 0 0!important}
.sb-done{display:none;font-size:1.05rem}
.sb-done b{font-family:var(--head);font-size:1.3rem;display:block;margin-bottom:4px}
.subbox.done .sb-in{display:none}.subbox.done .sb-done{display:block}
.subbox.mini{padding:16px;box-shadow:0 3px 0 var(--ink)}
.subbox.mini h3{font-size:1.1rem}.subbox.mini p{font-size:.88rem}
.subbox.mini .sb-dog{display:none}
.comm-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
@media(max-width:860px){.comm-grid{grid-template-columns:1fr}}
.foot-sub{grid-column:1/-1}
.foot-sub .subbox{background:#272E40;border-color:#3A4152;box-shadow:none;color:#E8EBF2}
.foot-sub .subbox h3{color:var(--sun)}.foot-sub .subbox p{color:#C9CEDA}
.map-sub{padding:12px 16px 16px;border-top:1px dashed var(--line)}
.dm-sub{margin-top:28px}
/* Day-Maker: where are you starting from */
.dm-where{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;background:var(--sea-l);border:2px solid var(--ink);border-radius:20px;padding:16px 18px;box-shadow:0 3px 0 var(--ink)}
.dm-where.guess{background:#FFF3D6}
.dm-where.set{background:#E6F4EA}
.dw-step{width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--sun);display:grid;place-items:center;font:800 1.2rem var(--head)}
.dw-body h3{margin:0 0 8px;font-size:1.3rem}
.dm-where .dm-from{display:block}
.dm-where .dm-from-in input{width:100%;font:600 1.05rem var(--body);padding:13px 16px;border:2px solid var(--ink);border-radius:99px;background:var(--white)}
.dm-where small{display:block;margin-top:6px;font-size:.85rem;color:var(--ink-2)}
.dw-gps{white-space:nowrap}
@media(max-width:700px){.dm-where{grid-template-columns:auto 1fr}.dw-gps{grid-column:1/-1}}
.map-sub{flex:none;padding:16px 20px 24px}
.map-sub .subbox.mini{box-shadow:none;border-width:2px}

/* map sidebar: controls stay fixed, the list (with the email box at its end) gets the room */
.mapscroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.mapscroll .list{overflow:visible;flex:none}
.mapscroll .count{position:sticky;top:0;z-index:3;background:var(--paper);border-bottom:1px dashed var(--line);padding:8px 20px}
@media(min-width:901px){
  .mapside-top{padding:14px 16px 12px}
  .mapside-top h1{font-size:1.6rem;margin:0}
  .mapside-top > p{font-size:.82rem;margin:2px 0 8px;line-height:1.35}
  .mapside-top .search{padding:10px 14px;font-size:.95rem}
  .mapside-top .chips{gap:5px;margin-top:8px}
  .mapside-top .chip{font-size:.74rem;padding:5px 8px}
  .mapside-top .chip .dot{width:9px;height:9px}
  .mapside-top .dogcard{margin-top:8px;padding:7px 10px;grid-template-columns:34px 1fr 44px;gap:8px;box-shadow:0 2px 0 var(--ink)}
  .mapside-top .dogcard .dc-ico .jack{width:34px;height:25px}
  .mapside-top .dogcard .dc-txt b{font-size:.95rem}
  .mapside-top .dogcard .dc-txt small{display:none}
  .mapside-top .dogcard .dc-sw{width:44px;height:26px}.mapside-top .dogcard .dc-sw i{width:16px;height:16px}
  .mapside-top .dogcard[aria-pressed=true] .dc-sw i{transform:translateX(18px)}
  .mapside-top .grail{margin-top:8px;padding:8px 12px}
  .mapside-top .gr-desc{font-size:.76rem;margin-top:4px}
}
@media(min-width:901px){
  .mapapp{grid-template-columns:420px 1fr}
  .mapside-top .chips + .chips{display:inline-flex;margin-top:5px}
  .mapside-top .chip.d3-chip{font-size:.74rem;padding:5px 9px}
  .mapside-top .grail{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:7px 12px}
  .mapside-top .grail label{font-size:.92rem}
  .mapside-top .grail .gr-desc{margin:0;font-size:.74rem;flex:1 1 160px}
  .mapside-top .grail .gr{flex:1 1 100%;margin-top:4px}
  .mapscroll .item{padding:8px 16px;grid-template-columns:32px 1fr;gap:10px}
  .mapscroll .item .pin{width:30px;height:30px}
  .mapscroll .item b{font-size:.98rem}
  .mapscroll .count{font-size:.8rem;padding:6px 16px}
}
/* your-area bar */
.locbar{position:relative;display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:16px;background:var(--white);border:2px solid var(--ink);border-radius:99px;padding:7px 8px 7px 14px;box-shadow:0 3px 0 var(--ink);font-size:.95rem;max-width:100%}
.locbar.guess{background:#FFF3D6}
.locbar b{font-family:var(--head)}
.locbar small{color:var(--ink-2)}
.lb-change{border:2px solid var(--ink);border-radius:99px;background:var(--sun);font:700 .85rem var(--body);padding:5px 12px;cursor:pointer;margin-left:4px}
.lb-edit{display:none;align-items:center;gap:6px;flex-wrap:wrap}
.locbar.editing{border-radius:20px}
.locbar.editing .lb-show{display:none}.locbar.editing .lb-edit{display:flex}
.lb-edit input{font:600 1rem var(--body);padding:9px 14px;border:2px solid var(--ink);border-radius:99px;min-width:200px;flex:1}
.lb-gps{padding:9px 14px;font-size:.88rem}
.lb-x{width:34px;height:34px;border-radius:50%;border:2px solid var(--ink);background:var(--white);font-size:1.2rem;cursor:pointer}
.lb-list{left:0;right:0;top:calc(100% + 6px);position:absolute}
/* forecast band: flexible (4 or 5 boxes), top-aligned, bigger icon */
.forecast{display:flex!important;align-items:stretch}
.forecast>div{flex:1 1 0;min-width:0}
.forecast>.fc-now{flex:1.25 1 0;flex-direction:column;align-items:flex-start;gap:6px}
.forecast>.fc-verdict{flex:1.7 1 0}
.fc-ico{font-size:2.4rem;line-height:1;order:-1}
.fc-now b{font-size:1.5rem}
.fc-verdict .btn{white-space:nowrap}
@media(max-width:1000px){.forecast{flex-wrap:wrap}.forecast>div{flex:1 1 40%}.forecast>.fc-now,.forecast>.fc-verdict{flex:1 1 100%}}
/* cartoon arrow pointing at the location bar (only while it's a guess) */
.locwrap{position:relative;display:inline-block;max-width:100%}
.lb-arrow{display:none;position:absolute;left:100%;top:-58px;width:230px;pointer-events:none;z-index:4}
.locwrap.needs .lb-arrow{display:block;animation:lbBob 1.6s ease-in-out infinite}
.lb-arrow svg{width:150px;height:90px;display:block;margin-left:-38px}
.lb-say{display:block;font:400 1.35rem/1.1 var(--pen);color:var(--sunset);transform:rotate(-4deg);white-space:nowrap;margin-left:10px}
@keyframes lbBob{0%,100%{transform:translate(0,0)}50%{transform:translate(-6px,4px)}}
.locwrap.needs .locbar{animation:lbGlow 1.6s ease-in-out infinite}
@keyframes lbGlow{0%,100%{box-shadow:0 3px 0 var(--ink)}50%{box-shadow:0 3px 0 var(--ink),0 0 0 6px rgba(233,87,43,.25)}}
@media(max-width:700px){.lb-arrow{left:auto;right:-6px;top:-74px;width:200px}.lb-arrow svg{width:110px;height:66px;margin-left:30px}.lb-say{font-size:1.1rem}}
@media (prefers-reduced-motion:reduce){.locwrap.needs .lb-arrow,.locwrap.needs .locbar{animation:none}}
.locwrap{display:block;width:max-content;max-width:100%;margin-bottom:6px}
.lb-arrow{top:-70px;width:300px}
.lb-arrow svg{width:190px;height:114px;margin-left:-46px}
.lb-say{font-size:1.6rem}
@media(max-width:700px){
  .locwrap.needs{padding-top:96px;width:100%}
  .locwrap.needs .lb-arrow{left:auto;right:0;top:0;width:auto}
  .lb-arrow svg{width:120px;height:72px;margin:0 0 0 auto;transform:scaleX(-1) rotate(10deg)}
  .lb-say{font-size:1.25rem;margin:0;text-align:right}
}
.foot .brainfart{font-family:var(--pen);font-size:1.05rem;color:var(--sun)}
.foot .brainfart a{display:inline;padding:0;color:var(--sun);text-decoration:underline}
.foot .brainfart a:hover{color:#fff}