/* WunderWilds landing. Same bones as wundergoo.com (slime-lab/prelaunch/home.css) and boldvibeslabs.com:
   one evening, a painting on top, copy below it, night-navy tokens, the Bold Vibes badge and skyline at the bottom.
   Brand accents here are canopy green, bayou teal and a Houston-sunset ember. */
:root{--night:#06172a;--night2:#0c2038;--line:#1f3450;--ink:#f3ead6;--muted:#aeb4c8;
  --wild:#58e08f;--wild-dark:#2f9d5f;--bayou:#2fb8c9;--ember:#ff9a3c;--gold:#f2b23a;--grape:#a35cff}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--ink);font:16px/1.65 'Segoe UI',system-ui,-apple-system,Arial,sans-serif}
a{color:inherit;text-underline-offset:5px}a:focus-visible{outline:3px solid var(--wild);outline-offset:6px}
img{max-width:100%;height:auto}
h1,h2,h3{font-family:Georgia,'Times New Roman',serif;font-weight:700;margin-top:0;text-wrap:balance}
p{margin-top:0}
.wrap{max-width:1180px;margin:auto;padding:0 32px}
.eyebrow{text-transform:uppercase;letter-spacing:2.2px;font-size:11px;font-weight:700;color:var(--wild)}
.skip{position:fixed;top:-80px;background:var(--wild);color:#000;padding:10px;z-index:5}.skip:focus{top:5px}
/* Layout v4 (2026-10-28): paintings run edge to edge and fade into the night instead of sitting in boxes.
   Sections are bands with their own tint, not cards. Spacing is tight on phones. */
.hero{position:relative;background:var(--night)}
.hero picture,.hero img{display:block;width:100%}
.hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:24%;background:linear-gradient(180deg,transparent,var(--night));pointer-events:none}
.plate{position:absolute;right:32px;bottom:calc(56px + 4%);z-index:1;margin:0;font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:13px;letter-spacing:.3px;color:#d9cfb8;text-shadow:0 1px 8px #000c}
.intro{position:relative;z-index:1;margin-top:-56px;padding:0 0 44px}
.intro .inner{max-width:700px}
.mark{display:block;width:min(380px,74%);height:auto;margin:0 0 18px -4px;filter:drop-shadow(0 4px 18px #000a)}
h1{font-size:clamp(36px,4.6vw,58px);line-height:1.04;letter-spacing:-.4px;margin:0 0 16px}
.lede{font-size:clamp(16px,1.4vw,18px);max-width:640px;color:var(--muted);line-height:1.65;margin-bottom:0}
.status{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,92px));gap:12px}
.status li,.status li>a{display:flex;flex-direction:column;align-items:center;text-align:center;font-size:11.5px;line-height:1.3;color:var(--muted);text-decoration:none}
.status .badge-ic{width:52px;height:52px;border-radius:50%;margin-bottom:7px;box-shadow:0 4px 14px #0007}
.status b{color:var(--ink);font-size:13px;font-weight:600}.status a b{color:var(--wild)}
/* bands */
.band{position:relative;padding:0 0 84px}
.band.dusk{background:linear-gradient(180deg,var(--night) 0,#1b1631 22%,#1b1631 78%,var(--night) 100%)}
.band.canopy{background:radial-gradient(120% 70% at 50% 100%,#0f2f2a 0,transparent 70%)}
.band.night{padding-bottom:72px}
.section-head{max-width:640px;margin-bottom:34px}.section-head.small{margin:44px 0 22px}
h2{font-size:clamp(30px,4vw,46px);line-height:1.1;letter-spacing:-.5px;margin-bottom:14px}
.section-head>p:last-child{color:var(--muted);max-width:540px;font-size:17px;margin-bottom:0}
/* full-bleed paintings: edge to edge, top and bottom melt into the band */
.bleed{position:relative;margin:0 auto 34px;max-width:1680px}
.bleed>img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 80%,transparent 100%)}
/* features: three columns, no boxes */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.feature img{display:block;width:100%;max-width:240px;margin:0 0 10px -10px;filter:drop-shadow(0 10px 24px #0008)}
.feature h3{font-size:22px;margin:0 0 6px}
.feature p{font-size:15px;color:var(--muted);line-height:1.65;margin-bottom:0}
.soon{display:inline-block;margin-top:12px;font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;font-weight:700;color:var(--ember);border:1px solid #ff9a3c55;border-radius:999px;padding:4px 10px}
/* the show */
.keyart{margin-bottom:26px}
.show-title{position:absolute;left:5%;top:9%;width:min(44%,600px)}.show-title img{display:block;width:100%;filter:drop-shadow(0 4px 18px #0009)}
.show-copy{display:grid;grid-template-columns:1fr 1.7fr;gap:44px;align-items:start}.show-copy p{color:var(--muted)}.show-copy h2{margin:4px 0 0}
.kicker{font-family:Georgia,serif;font-style:italic;color:var(--wild);font-size:19px;margin:0}
/* shorts */
.shorts-head{display:grid;grid-template-columns:minmax(220px,400px) 1fr;gap:40px;align-items:center;margin-bottom:28px}.shorts-head p{color:var(--muted);margin:0}
.shorts-logo{display:block;width:100%;height:auto}
.phones{display:grid;grid-template-columns:repeat(3,minmax(0,250px));gap:22px;justify-content:center}
.phone{display:block;width:100%;height:auto;border-radius:26px;border:5px solid #0b1b2c;box-shadow:0 0 0 1px #2f9d5f44,0 18px 40px #0008}
/* the first six: silhouettes standing on a lit patch of ground, no slots */
.creatures{display:grid;grid-template-columns:repeat(6,1fr);gap:10px 18px;align-items:end}
.creature{text-align:center;color:var(--muted);font-size:13px;line-height:1.35}
.creature .slot{position:relative;z-index:0;aspect-ratio:3/4;display:grid;place-items:end center;margin-bottom:8px}
.creature .slot::after{content:'';position:absolute;left:10%;right:10%;bottom:0;height:12%;border-radius:50%;background:radial-gradient(closest-side,#58e08f44,transparent);z-index:-1}
.creature .slot img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 0 14px #58e08f40)}
.creature .slot span{align-self:center;font-family:Georgia,serif;font-style:italic;color:#6f7c98;font-size:12px;border:1px dashed var(--line);border-radius:50%;width:78%;aspect-ratio:1;display:grid;place-items:center}
.creature b{display:block;color:var(--ink);font-weight:600}
/* story */
.story{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.story-art{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 20px 50px #0009}
.story p{font-size:16px;color:var(--muted)}
.text-link{font-weight:700;color:var(--wild);text-decoration:none;border-bottom:2px solid #58e08f55}.text-link:hover{border-color:var(--wild)}
/* nothing for sale: text sits on the dark left half of the night painting */
.afterglow{margin-bottom:0}
.afterglow-text{position:absolute;left:max(32px,calc((100% - 1180px)/2 + 32px));top:50%;transform:translateY(-50%);max-width:420px}
.afterglow-text h2{margin-bottom:10px}.afterglow-text p{color:#c9cede;margin:0 0 18px;text-shadow:0 1px 10px #000}
.btn{display:inline-block;padding:13px 24px;font-family:Georgia,serif;font-size:19px;color:#101820;background:var(--wild);text-decoration:none;border:2px solid var(--wild);border-radius:6px}.btn:hover{background:transparent;color:var(--wild)}
.tbd{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px 28px}
.tbd li{display:grid;grid-template-columns:40px 1fr;column-gap:12px;align-items:start;color:var(--muted);font-size:14px;line-height:1.45}
.tbd .badge-ic{grid-row:1/3;width:40px;height:40px;border-radius:50%}
.tbd li b{color:var(--ink);font-weight:600}
.fine{font-size:12px;color:#8a93ad;margin:30px 0 0;max-width:880px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
footer{border-top:1px solid var(--line);padding:56px 0 44px;color:var(--muted);text-align:center;background:linear-gradient(180deg,transparent,#ff9a3c10 30%,#2fb8c918)}
footer nav{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;font-size:14px;font-weight:600;margin-bottom:34px}footer nav a{text-decoration:none;color:var(--muted)}footer nav a:hover{color:var(--ink)}
footer .studio{display:inline-block}footer .badge{width:128px;height:129px;border-radius:50%;box-shadow:0 8px 36px #0006;display:block}
footer .made{margin:18px 0 0;font-size:14.5px;color:var(--ink)}footer .made a{text-decoration:none;color:var(--ink);border-bottom:1px solid #f3ead666}
footer .story-line{margin:6px auto 0;font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:13.5px;color:#8a93ad;max-width:520px}
footer .skyline{display:block;width:min(100%,880px);height:auto;margin:22px auto 0;opacity:.7;filter:drop-shadow(0 0 18px #ff9a3c59)}
footer .legal{margin:22px auto 0;font-size:12px;color:#8a93ad;max-width:560px}footer .legal+.legal{margin-top:6px}
@media(max-width:820px){
.wrap{padding:0 20px}
.plate{right:20px;bottom:52px;font-size:12px}
.intro{margin-top:-40px}.mark{width:min(260px,70%);margin-bottom:12px}h1{font-size:clamp(32px,8.6vw,42px)}.lede{font-size:15.5px}
.status{grid-template-columns:repeat(5,1fr);gap:6px;margin-top:22px}.status .badge-ic{width:46px;height:46px}.status li,.status li>a{font-size:10.5px}.status b{font-size:12px}
.band{padding:0 0 48px}.band.night{padding-bottom:40px}.intro{padding-bottom:30px}
.section-head{margin-bottom:22px}.section-head.small{margin:30px 0 16px}.section-head>p:last-child{font-size:15.5px}
.bleed{margin-bottom:20px}
.features{grid-template-columns:1fr;gap:0}
.feature{display:grid;grid-template-columns:112px 1fr;column-gap:16px;align-items:center;padding:16px 0;border-top:1px solid var(--line)}
.feature:last-child{border-bottom:1px solid var(--line)}
.feature img{grid-row:1/4;max-width:none;width:112px;margin:0}
.feature h3{font-size:19px;margin:0 0 4px}.feature p{font-size:14px;line-height:1.55}.soon{margin-top:8px;justify-self:start}
.keyart{margin-bottom:16px}.show-title{width:56%;top:7%}
.show-copy{grid-template-columns:1fr;gap:4px}
.shorts-head{grid-template-columns:1fr;gap:12px;margin-bottom:18px}.shorts-logo{max-width:300px;margin:0 auto}
.phones{grid-template-columns:repeat(3,1fr);gap:10px}.phone{border-width:3px;border-radius:14px}
.creatures{grid-template-columns:repeat(3,1fr);gap:18px 12px}.creature{font-size:12px}
.story{grid-template-columns:1fr;gap:18px}.story-art{border-radius:14px}
.afterglow-text{position:static;transform:none;padding:0 20px;margin-top:-10px;max-width:none}
.tbd{grid-template-columns:1fr 1fr;gap:16px 14px}.tbd li{grid-template-columns:32px 1fr;column-gap:10px;font-size:13px}.tbd .badge-ic{width:32px;height:32px}
footer{padding:40px 0 34px}}
@media(max-width:360px){.feature{grid-template-columns:88px 1fr}.feature img{width:88px}.tbd{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* legal pages */
.doc{padding:56px 0 70px}.doc .wrap{max-width:760px}.doc h1{font-size:clamp(32px,4vw,46px)}.doc h2{font-size:22px;margin:34px 0 10px}.doc p,.doc li{color:var(--muted);font-size:16px;line-height:1.7}.doc a{color:var(--wild)}.doc .back{font-size:14px;margin:0 0 26px}.doc .effective{font-size:13px;color:#5f6b86}
footer nav.legal-nav{margin-top:8px;font-size:13px}


/* dividers (2026-10-29): purpose-built strips from art/codex/dividers */
/* leaf fringe across the top of the wide paintings, flat edge on top */
.canopy-top::before{content:'';position:absolute;z-index:1;left:0;right:0;top:0;height:min(10vw,168px);background:url(assets/dividers/canopy_fringe.png) repeat-x center top/auto 100%;pointer-events:none}
/* the show band is the Ram's mountain: ridge on top, rocky snow edge below */
.band.dusk{background:#1b1631;margin:min(7.5vw,126px) 0 calc(min(5.85vw,98px) + 20px);padding-bottom:56px}
.band.dusk::before,.band.dusk::after{content:'';position:absolute;left:0;right:0;pointer-events:none;background-repeat:repeat-x;background-position:center;background-size:auto 100%}
.band.dusk::before{bottom:calc(100% - 1px);height:min(7.5vw,126px);background-image:url(assets/dividers/ridge_top.png)}
.band.dusk::after{top:calc(100% - 1px);height:min(5.85vw,98px);background-image:url(assets/dividers/ridge_bottom.png)}
/* the six stand on one continuous strip of moss: each slot shows its slice of the same strip */
.creatures{column-gap:0}
.creature .slot{background:url(assets/dividers/ground_moss.png) no-repeat;background-size:600% auto;background-position-y:100%}
.creature .slot::after{display:none}
.creature .slot img{object-position:center bottom;padding-bottom:20%;box-sizing:border-box}
.creature:nth-child(6n+1) .slot{background-position-x:0%}.creature:nth-child(6n+2) .slot{background-position-x:20%}.creature:nth-child(6n+3) .slot{background-position-x:40%}
.creature:nth-child(6n+4) .slot{background-position-x:60%}.creature:nth-child(6n+5) .slot{background-position-x:80%}.creature:nth-child(6n) .slot{background-position-x:100%}
/* a single vine between text sections */
.rule{display:block;width:min(100%,560px);height:auto;margin:0 auto 40px}
@media(max-width:820px){
.canopy-top::before{height:14vw}
.band.dusk{padding-bottom:36px;margin:13vw 0 calc(9vw + 12px)}.band.dusk::before{height:13vw}.band.dusk::after{height:9vw}
.creature .slot{background-size:450% auto}.creature .slot img{padding-bottom:12%}
.creature:nth-child(3n+1) .slot{background-position-x:0%}.creature:nth-child(3n+2) .slot{background-position-x:28.57%}.creature:nth-child(3n) .slot{background-position-x:57.14%}
.rule{width:min(86%,420px);margin-bottom:26px}}