/* Scarebears?! - rebuilt static site
   Hand-written. Geometry lives in _layout.css (generated by tools/genlayout.py). */

/* ---------- fonts (self-hosted, rescued from Wix) ---------- */
@font-face{font-family:"SB Heading";
  src:url("../assets/fonts/font-heading-wf692715a3.woff2") format("woff2"),
      url("../assets/fonts/font-heading-wf692715a3.woff") format("woff");
  font-weight:400 700;font-display:swap}
@font-face{font-family:"SB Body";
  src:url("../assets/fonts/font-body-wfcbe9e9dd.woff2") format("woff2"),
      url("../assets/fonts/font-body-wfcbe9e9dd.woff") format("woff");
  font-weight:400 700;font-display:swap}
@font-face{font-family:"SB Fine";
  src:url("../assets/fonts/font-poppins-extralight.woff2") format("woff2");
  font-weight:200 400;font-display:swap}

/* ---------- tokens ---------- */
:root{
  --navy:#0b1321;
  --ink:#000;
  --paper:#fff;
  --card:rgba(255,255,255,.89);
  --shell:1280px;
  /* the white-on-art treatment used throughout the Wix original */
  --emboss:1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 4px 4px 2px #000;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"SB Body",Questrial,Avenir,"Helvetica Neue",Arial,sans-serif;
  overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- stage system ----------
   Each stage keeps the original artboard's aspect ratio and positions its
   children as percentages, so the whole composition scales as one unit.
   cqw type units are relative to the stage, so text scales with it too. */
.stage{position:relative;width:100%;max-width:var(--shell);margin-inline:auto;
  container-type:inline-size}
.stage.bleed{max-width:none}
.stage>*{position:absolute;margin:0}
/* Only images wrapped in <picture> stretch to fill their positioned wrapper.
   A bare <img> (an inline SVG shape) keeps the size the generated layout
   gives it - a plain ".stage img" rule would out-specify those classes. */
.stage picture>img{width:100%;height:100%;object-fit:contain}
.stage>img{object-fit:contain}
.stage .cover,.stage .cover>img{object-fit:cover}

.emboss{color:#fff;text-shadow:var(--emboss)}

/* ---------- header ---------- */
.site-header{max-width:var(--shell);margin-inline:auto;height:57px;
  display:flex;align-items:center;justify-content:flex-end;padding-inline:16px}
.site-header a{font-family:"SB Heading",Poppins,Arial,sans-serif;
  font-size:30px;letter-spacing:-1.5px;text-decoration:none}
.site-header a:hover{opacity:.7}

/* ---------- mint ticker ---------- */
.ticker{overflow:hidden;background:var(--navy);padding:6px 0}
.ticker-track{display:flex;width:max-content;gap:3rem;
  animation:ticker 22s linear infinite}
.ticker-track a{font-family:"SB Heading",Poppins,Arial,sans-serif;
  font-size:clamp(20px,2.25vw,32.38px);letter-spacing:.03em;color:#fff;
  text-decoration:none;white-space:nowrap}
.ticker-track a:hover{text-decoration:underline}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none}
  .ticker{display:flex;justify-content:center}
}

/* ---------- section shells ---------- */
.sec{position:relative}
.sec-hero{background:var(--paper)}
.stage-hero{background:image-set(url("../assets/webp/UNNAMED_woods_bg.webp") type("image/webp"), url("../assets/UNNAMED_woods_bg.jpg") type("image/jpeg")) center/cover no-repeat}
.hero-copy,.about-copy,.traits-copy1,.traits-copy2,.collab-c1,.collab-c2,
.team-copy,.circ-trs-t,.circ-air-t,.circ-dao-t,.txt-more,.txt-dao,.txt-air,.txt-trs{
  font-family:"SB Body",Questrial,Arial,sans-serif;line-height:1.1;margin:0}
.hero-copy{letter-spacing:-.02em;text-align:left}
.hero-cta,.hero-wordmark,.hero-logo,.hero-art{display:block}

/* about */
.stage-about{background:image-set(url("../assets/webp/site.webp") type("image/webp"), url("../assets/site.jpg") type("image/jpeg")) center/cover no-repeat;
  background-color:#000;overflow:visible}
.about-card{background:var(--paper);border-radius:5.5cqw}
.about-copy{text-align:center;letter-spacing:-.02em;line-height:1.2}

/* roadmap */
.stage-road{background:image-set(url("../assets/webp/Roadmap_v04_JPG.webp") type("image/webp"), url("../assets/Roadmap_v04_JPG.jpg") type("image/jpeg")) center/cover no-repeat}
.road-title,.lbl-mint,.lbl-more,.lbl-dao,.lbl-air,.lbl-trs{
  font-family:"SB Heading",Poppins,Arial,sans-serif;font-weight:700;
  letter-spacing:-.05em;text-align:center;display:grid;place-items:center;margin:0}
.txt-more,.txt-dao,.txt-air,.txt-trs{font-family:"SB Heading",Poppins,Arial,sans-serif;
  font-weight:700;letter-spacing:-.05em;text-align:center;line-height:1.1}
.circ-trs-t,.circ-air-t,.circ-dao-t{text-align:center;letter-spacing:-.05em;line-height:1}

/* traits + collab cards */
.stage-traits,.collab-cardbg{background:var(--navy) image-set(url("../assets/webp/ForestWide3_grdnt.webp") type("image/webp"), url("../assets/ForestWide3_grdnt.png") type("image/png"))
  center/cover no-repeat;border-radius:20px}
.stage-traits{overflow:hidden}
/* the collab stage is the whole section, so the teddy bear can hang outside
   the rounded card exactly as it does on the original */
.stage-collab{background:var(--paper)}
.traits-card1,.traits-card2,.collab-card{background:var(--card);border-radius:30px}
.traits-copy1,.traits-copy2{text-align:center;letter-spacing:-.02em;line-height:1.1}
.collab-c1,.collab-c2{text-align:left;letter-spacing:-.05em;line-height:1.1}
.collab-mail{display:grid;place-items:center;text-decoration:none;
  background:image-set(url("../assets/webp/UNNAMED_6f1fe91e.webp") type("image/webp"), url("../assets/UNNAMED_6f1fe91e.png") type("image/png")) center/contain no-repeat}
.collab-mail-t{font-family:"SB Heading",Poppins,Arial,sans-serif;letter-spacing:-.05em}
.collab-x{font-family:"SB Body",Questrial,Arial,sans-serif;letter-spacing:-.05em;
  text-decoration:none;line-height:1}
.collab-x:hover,.collab-mail:hover{opacity:.85}

/* team */
.stage-team{background:image-set(url("../assets/webp/SB_ForestWide1.webp") type("image/webp"), url("../assets/SB_ForestWide1.png") type("image/png")) center/cover no-repeat}
.team-copy{text-align:center;letter-spacing:-.02em;line-height:1.1}
.team-n1,.team-n2{display:grid;place-items:center;text-decoration:none}
.team-n1{background:image-set(url("../assets/webp/UNNAMED_8e70f490.webp") type("image/webp"), url("../assets/UNNAMED_8e70f490.png") type("image/png")) center/95% auto no-repeat}
.team-n2{background:image-set(url("../assets/webp/UNNAMED_c44535a1.webp") type("image/webp"), url("../assets/UNNAMED_c44535a1.png") type("image/png")) center/95% auto no-repeat}
.team-n1-t,.team-n2-t{font-family:"SB Heading",Poppins,Arial,sans-serif;letter-spacing:-.05em}
.team-p1,.team-p2{border-radius:8px;overflow:hidden}

/* ---------- footer ---------- */
.site-footer{max-width:var(--shell);margin-inline:auto;padding:12px 16px 40px;
  display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.site-footer .mark{width:138px;height:auto}
.socials{display:flex;gap:16px}
.socials img{width:35px;height:35px;object-fit:contain}
.socials a:hover{opacity:.7}
.colophon{font-family:"SB Fine",Poppins,Arial,sans-serif;font-size:10px;
  line-height:1.45;margin:0;max-width:24ch}
.colophon a{text-decoration:none}
.colophon a:hover{text-decoration:underline}

/* ---------- responsive ----------
   Below 900px the stages stop being artboards and become ordinary stacked
   flow, which is the point of rebuilding responsive rather than porting the
   Wix desktop/mobile split. */
@media (max-width:900px){
  .stage{aspect-ratio:auto!important;max-width:none;padding:28px 18px;
    display:flex;flex-direction:column;align-items:center;gap:18px}
  .stage>*{position:static!important;left:auto!important;top:auto!important;
    width:100%!important;height:auto!important;max-width:420px}
  .stage img{height:auto}
  .stage-about,.stage-road,.stage-team,.stage-traits,.stage-collab{
    background-size:cover;background-position:center}
  .stage-road{background-color:#2b1d12}
  .stage-traits,.collab-cardbg{border-radius:0}

  /* type: cqw would collapse with the artboard, so pin readable sizes */
  .hero-copy{font-size:19px;text-align:center}
  .about-copy,.traits-copy1,.traits-copy2,.collab-c1,.collab-c2{font-size:17px;text-align:center}
  .team-copy{font-size:16px}
  .road-title{font-size:28px}
  .lbl-mint,.lbl-more,.lbl-dao,.lbl-air,.lbl-trs{font-size:22px}
  .txt-more,.txt-dao,.txt-air,.txt-trs{font-size:14px}
  .circ-trs-t,.circ-air-t,.circ-dao-t{font-size:15px}
  .team-n1-t,.team-n2-t{font-size:20px}
  .collab-mail-t{font-size:18px}
  .collab-x{font-size:20px;text-align:center}

  .about-card,.traits-card1,.traits-card2,.collab-card{padding:20px;border-radius:24px}
  .team-n1,.team-n2{min-height:64px;background-size:contain}
  .collab-mail{min-height:64px}
  /* the six-bear row reads better as a grid on a phone */
  .bear-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:420px}
  .bear-row>*{width:100%!important;max-width:none}
  .site-header{justify-content:center}
  .site-footer{align-items:center;text-align:center}
  .colophon{max-width:none}
}
@media (max-width:900px) and (prefers-reduced-motion:no-preference){
  .stage-road{background-attachment:scroll}
}

/* ---------- bear row ----------
   Wrapper spans the about stage exactly, so the generated percentages still
   resolve against the same box; on phones it collapses to a 2-up grid. */
.bear-row{position:absolute;inset:0}
.bear-row>*{position:absolute;margin:0}
.bear-row img{width:100%;height:100%;object-fit:contain}
@media (max-width:900px){
  .bear-row{position:static;inset:auto;padding:0}
  .bear-row>*{position:static!important}
}

/* ---------- hero blob + ticker mark ---------- */
/* the blob sits behind the wooden signs, in front of the forest plate */
.hero-blob{z-index:0;pointer-events:none}
.hero-copy{z-index:2}
.hero-wordmark,.hero-cta{z-index:3}
.about-card,.traits-card1,.traits-card2,.collab-card{z-index:0}
.about-copy,.traits-copy1,.traits-copy2,.collab-c1,.collab-c2{z-index:1}
.tick-mark{width:33px;height:33px;flex:0 0 33px;align-self:center}
.ticker-track{align-items:center;gap:1.4rem}

/* ---------- <picture> wrappers ----------
   tools/optimize.py moves the positioning class onto <picture>, so the inner
   <img> must fill it and inherit the fit. */
picture{display:block}
picture>img{width:100%;height:100%;display:block}
.stage picture>img{object-fit:contain}
.stage picture.cover>img,.stage .cover>img{object-fit:cover}

/* ---------- corrections found by rendering against the live site ---------- */
/* Wix masks the two portraits with an inline SVG that is simply a circle. */
.team-p1,.team-p2{border-radius:50%;overflow:hidden}
.team-p1>img,.team-p2>img{object-fit:cover}
/* the white blob sits behind the bio copy - without it the black text lands on
   dark forest and is unreadable */
.team-blob{z-index:0;pointer-events:none}
.team-copy{z-index:1}
/* section heading plates paint over their cards/blobs, not under them */
.team-head,.traits-head,.collab-head,.road-title,.road-plank{z-index:2}

/* ---------- mobile corrections ---------- */
@media (max-width:900px){
  /* the decorative blobs only make sense behind absolutely-placed copy; in
     stacked flow they become giant empty shapes */
  .hero-blob,.team-blob{display:none!important}
  /* ...so the copy that sat on them needs its own readable plate */
  .hero-copy,.team-copy,.circ-trs-t,.circ-air-t,.circ-dao-t,
  .txt-more,.txt-dao,.txt-air,.txt-trs{
    background:var(--paper);border-radius:22px;padding:16px 18px;
    max-width:420px;text-align:center}
  .road-title,.lbl-mint,.lbl-more,.lbl-dao,.lbl-air,.lbl-trs{
    background:none;padding:0}
  /* wooden signs shouldn't stretch to full width on a phone */
  .sign-mint,.sign-more,.sign-dao,.sign-air,.sign-trs,.road-plank{max-width:280px}
  .circ-trs,.circ-air,.circ-dao{max-width:240px}
  .team-p1,.team-p2{max-width:260px}
  .collab-cardbg{display:none}
  .stage-collab{background:var(--navy)}
}