/* ============================================================
   What The Fungi · brand site
   Palette + type sampled from Q's own labels, posters and emblem.
   ============================================================ */

:root{
  --ink:#06050b;
  --ink2:#0a0813;
  --card:#0c0a14;
  --card2:#100d1a;
  --line:rgba(255,255,255,.09);
  --line2:rgba(255,255,255,.16);

  --wtf:#b06ce0;          /* brush logotype purple */
  --wtf-d:#8a4cb0;
  --voodoo:#5cc8ef;       /* icy blue, from the graffiti lockup */
  --gamma:#cfe83f;        /* acid, from the emblem */
  --fire:#f97316;         /* the orange label variant */

  --txt:#f3f0f8;
  --dim:#9990ab;
  --dim2:#6f6883;

  --wrap:1200px;
  --disp:'Anton',Impact,'Arial Narrow',sans-serif;
  --lab:'Oswald',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--ink);
  color:var(--txt);
  font:400 17px/1.65 var(--body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* faint film grain over the whole page, like the textured black on his cards */
body::after{
  content:"";position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.defs{position:absolute;width:0;height:0;overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:32px;padding-right:32px}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--wtf);color:#fff;padding:12px 18px;font:600 14px var(--lab)}
.skip:focus{left:12px;top:12px}

:focus-visible{outline:2px solid var(--wtf);outline-offset:3px;border-radius:4px}

/* drifting spores */
#spores{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.55}

/* ---------- shared type ---------- */
.eyebrow{
  margin:0 0 18px;font:400 12px/1 var(--lab);letter-spacing:.42em;text-transform:uppercase;
  color:var(--wtf);
}
.sec-title{
  margin:0 0 22px;font:400 clamp(46px,7.4vw,92px)/.92 var(--disp);
  text-transform:uppercase;letter-spacing:.005em;filter:url(#rough);
}
.sec-lede{margin:0;max-width:62ch;color:var(--dim);font-size:18px}
.sec-head{margin-bottom:56px}
/* his monogram, sized to carry the section header */
.breeder-head{display:grid;grid-template-columns:auto 1fr;gap:clamp(26px,5vw,68px);align-items:center}
/* NB: background-clip:text only paints inside the padding box, so the box has to
   be tall enough for the Q's tail or the descender vanishes. Keep the padding. */
.q-mark{
  margin:0;font:400 clamp(140px,17vw,236px)/1 var(--disp);
  padding:.04em .06em .12em;
  background:linear-gradient(162deg,#fff 6%,#e6cff9 44%,var(--wtf) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 46px rgba(176,108,224,.42));
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 30px;border-radius:999px;text-decoration:none;
  font:500 13px/1 var(--lab);letter-spacing:.2em;text-transform:uppercase;
  background:var(--wtf);color:#fff;border:1px solid var(--wtf);
  transition:background .2s,transform .2s,box-shadow .2s;
}
.btn:hover{background:#c17ff0;transform:translateY(-2px);box-shadow:0 12px 34px -12px var(--wtf)}
.btn-ghost{background:transparent;color:var(--txt);border-color:var(--line2)}
.btn-ghost:hover{background:rgba(176,108,224,.12);border-color:var(--wtf);box-shadow:none}
.btn-sm{padding:11px 20px;font-size:11.5px}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.09s}.d2{transition-delay:.18s}.d3{transition-delay:.27s}.d4{transition-delay:.36s}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ============ NAV ============ */
.nav{
  position:sticky;top:0;z-index:40;
  background:rgba(6,5,11,.72);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s;
}
.nav.stuck{border-bottom-color:var(--line);background:rgba(6,5,11,.92)}
.nav-in{display:flex;align-items:center;gap:26px;height:74px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.brand-mark{width:40px;height:40px;flex:none}
.brand-word{width:132px;height:auto}
.links{display:flex;gap:30px}
.links a{
  text-decoration:none;font:400 12.5px/1 var(--lab);letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);transition:color .2s;position:relative;padding:6px 0;
}
.links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--wtf);transition:right .28s}
.links a:hover{color:var(--txt)}
.links a:hover::after{right:0}

.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:10px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--txt);transition:transform .25s,opacity .25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobmenu{display:none;flex-direction:column;border-top:1px solid var(--line);background:rgba(6,5,11,.97)}
.mobmenu a{padding:17px 32px;text-decoration:none;font:400 14px var(--lab);letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid var(--line)}

/* ============ HERO ============ */
/* the hero paints its own dark ground in BOTH themes — relying on the body
   showing through makes it flash pale during the light/dark cross-fade */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:60px 0 80px;background:#06050b}
.hero-glow{
  position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);
  width:min(1150px,150vw);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(176,108,224,.20),rgba(92,200,239,.09) 42%,transparent 66%);
  filter:blur(30px);
}
/* his emblem sits behind as a colour wash, blurred so it never fights the logotype */
.hero-emblem{
  position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  width:min(660px,104vw);opacity:.16;pointer-events:none;
  filter:saturate(1.5) blur(7px);
  animation:drift 26s ease-in-out infinite;
}
@keyframes drift{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-52%) scale(1.045)}}
@media(prefers-reduced-motion:reduce){.hero-emblem{animation:none}}
.hero-in{position:relative;z-index:2;text-align:center}
.hero-word{margin:0 0 26px}
.hero-word img{width:min(600px,94%);height:auto;margin:0 auto;filter:drop-shadow(0 22px 60px rgba(6,5,11,.95)) drop-shadow(0 0 30px rgba(176,108,224,.35))}
.hero-sub{margin:0 auto 34px;max-width:56ch;font-size:18px;color:var(--dim)}
.hero-sub strong{color:var(--txt);font-weight:600}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:52px}

.stats{
  list-style:none;margin:0 auto;padding:24px 0 0;max-width:820px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;border-top:1px solid var(--line);
}
.stats li{display:flex;flex-direction:column;gap:7px;align-items:center}
.stats b{font:400 40px/1 var(--disp);color:var(--txt)}
.stats span{font:300 10.5px/1.3 var(--lab);letter-spacing:.24em;text-transform:uppercase;color:var(--dim2);text-align:center}

.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);width:1px;height:52px;background:linear-gradient(var(--line2),transparent);overflow:hidden}
.scroll-hint span{position:absolute;top:0;left:-1px;width:3px;height:16px;background:var(--wtf);animation:fall 2.4s ease-in-out infinite}
@keyframes fall{0%{top:-16px;opacity:0}30%{opacity:1}100%{top:52px;opacity:0}}
@media(prefers-reduced-motion:reduce){.scroll-hint{display:none}}

/* ============ SIGNATURE ============ */
.sig{position:relative;z-index:2;padding:120px 0 130px;background:linear-gradient(180deg,transparent,var(--ink2) 16%,var(--ink2) 84%,transparent)}

.strain{padding:52px 0 78px}
.strain-in{display:grid;grid-template-columns:1fr .82fr;gap:clamp(28px,5vw,76px);align-items:center}
.strain.alt .strain-in{direction:rtl}
.strain.alt .strain-in>*{direction:ltr}

.strain-shot{margin:0;position:relative}
.strain-shot::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:92%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--acc) 26%,transparent),transparent 68%);
  filter:blur(26px);
}
.strain-shot img{position:relative;width:100%;height:auto}

/* the spore-sample card, straight off his labels */
.card{
  position:relative;background:var(--card);
  border:1px solid color-mix(in srgb,var(--acc) 48%,transparent);
  border-radius:26px;padding:34px 32px 30px;text-align:center;
  box-shadow:0 30px 90px -40px color-mix(in srgb,var(--acc) 55%,transparent),inset 0 1px 0 rgba(255,255,255,.045);
}
.card::before{
  content:"";position:absolute;inset:0;border-radius:26px;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23c)' opacity='.055'/%3E%3C/svg%3E");
}
.card>*{position:relative}
.card-top{margin-bottom:26px}
.card-word{width:min(230px,62%);margin:0 auto}
.card-kind{
  margin:0 0 20px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font:300 11.5px/1 var(--lab);letter-spacing:.34em;text-transform:uppercase;color:var(--dim);
}
.brush{display:block;width:78%;height:9px;margin:0 auto;fill:var(--acc);opacity:.9}
.brush.flip{transform:scaleX(-1)}
.card-name{
  margin:8px 0 6px;font:400 clamp(44px,6.2vw,76px)/.9 var(--disp);
  text-transform:uppercase;letter-spacing:.01em;filter:url(#rough);
  background:linear-gradient(180deg,#fff,#cfc9d8);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.card-gen{margin:18px 0 26px;font:500 clamp(16px,2.1vw,22px)/1.3 var(--lab);letter-spacing:.09em;text-transform:uppercase;color:var(--acc)}
.card-gen i{color:var(--txt);font-style:normal;padding:0 4px}

.triad{list-style:none;margin:0 0 26px;padding:22px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr)}
.triad li{display:flex;flex-direction:column;align-items:center;gap:11px;padding:0 6px}
.triad li+li{border-left:1px solid var(--line)}
.triad svg{width:32px;height:32px;color:var(--acc)}
.triad span{font:300 10px/1.45 var(--lab);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.pill{
  display:inline-block;margin:0;padding:10px 26px;border:1px solid color-mix(in srgb,var(--acc) 55%,transparent);
  border-radius:999px;font:400 10.5px/1 var(--lab);letter-spacing:.28em;text-transform:uppercase;color:var(--acc);
}

.strain-note{max-width:620px;margin:38px auto 0;text-align:center;color:var(--dim);font-size:18px}
.strain-note p{margin:0}

/* ---------- impact ---------- */
.impact{position:relative;margin-top:40px;padding:40px 40px 56px;border:1px solid var(--line);border-radius:30px;background:linear-gradient(180deg,rgba(176,108,224,.07),transparent 60%);text-align:center;overflow:hidden}
.impact-chars{display:block;width:300px;max-width:70%;margin:0 auto 30px;opacity:.85;pointer-events:none}
.impact-title{margin:0 0 48px;font:400 clamp(28px,4vw,50px)/1.06 var(--disp);text-transform:uppercase;filter:url(#rough-lite)}
.impact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden;text-align:left}
.imp{background:var(--card);padding:32px 28px}
.imp-tag{margin:0 0 8px;font:300 10.5px/1 var(--lab);letter-spacing:.26em;text-transform:uppercase;color:var(--dim2)}
.imp-name{margin:0 0 16px;font:400 clamp(28px,3.4vw,40px)/1 var(--disp);text-transform:uppercase;color:var(--voodoo)}
.imp.fire .imp-name{color:var(--fire)}
.imp:last-child .imp-name{color:var(--gamma)}
.imp-copy{margin:0;font-size:15.5px;color:var(--dim);line-height:1.6}

/* ============ PORTFOLIO ============ */
.port{position:relative;z-index:2;padding:110px 0 120px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:42px}
.chip{
  padding:11px 20px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--dim);
  font:400 11.5px/1 var(--lab);letter-spacing:.18em;text-transform:uppercase;cursor:pointer;
  transition:border-color .2s,color .2s,background .2s;
}
.chip:hover{color:var(--txt);border-color:var(--line2)}
.chip[aria-selected="true"]{background:var(--wtf);border-color:var(--wtf);color:#fff}
.chip b{font-weight:400;opacity:.55;margin-left:7px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:20px}
.gcard{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .25s,transform .25s,box-shadow .25s;
  animation:pop .45s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes pop{from{opacity:0;transform:scale(.965) translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.gcard{animation:none}}
.gcard:hover{border-color:color-mix(in srgb,var(--wtf) 55%,transparent);transform:translateY(-4px);box-shadow:0 22px 50px -28px rgba(176,108,224,.7)}
.gc-img{position:relative;aspect-ratio:1;background:#080610;overflow:hidden}
.gc-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.gcard:hover .gc-img img{transform:scale(1.06)}
.gc-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(6,5,11,.92))}
.gc-kind{
  position:absolute;left:12px;top:12px;z-index:2;padding:6px 11px;border-radius:999px;
  background:rgba(6,5,11,.78);border:1px solid var(--line2);backdrop-filter:blur(6px);
  font:300 9px/1 var(--lab);letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
}
.gc-body{padding:16px 18px 20px;flex:1;display:flex;flex-direction:column}
.gc-name{margin:0 0 7px;font:400 clamp(19px,2.4vw,25px)/1.02 var(--disp);text-transform:uppercase}
.gc-lin{margin:0;font:300 11.5px/1.45 var(--lab);letter-spacing:.1em;text-transform:uppercase;color:var(--wtf)}
.gc-lin i{font-style:normal;color:var(--txt);opacity:.75;padding:0 1px}
.gc-lin.none{color:var(--dim2)}
.gc-note{margin:11px 0 0;font-size:13px;color:var(--dim2);line-height:1.5}
.gc-out{position:absolute;right:12px;top:12px;z-index:2;padding:6px 11px;border-radius:999px;background:rgba(6,5,11,.8);border:1px solid var(--line2);font:300 9px/1 var(--lab);letter-spacing:.16em;text-transform:uppercase;color:var(--dim2)}

.port-foot{margin:44px 0 0;text-align:center;font:300 12px/1 var(--lab);letter-spacing:.22em;text-transform:uppercase;color:var(--dim2)}

/* ============ BREEDER ============ */
.breeder{position:relative;z-index:2;padding:110px 0 120px;background:linear-gradient(180deg,transparent,var(--ink2) 14%,var(--ink2) 86%,transparent)}
.ventures{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:96px}
.venture{
  background:var(--card);border:1px solid var(--line);border-radius:22px;padding:30px 28px 28px;
  display:flex;flex-direction:column;transition:border-color .25s,transform .25s;
}
.venture:hover{border-color:color-mix(in srgb,var(--wtf) 50%,transparent);transform:translateY(-3px)}
.venture-art{height:76px;width:auto;max-width:100%;object-fit:contain;object-position:left center;margin-bottom:24px}
.vart-chars{opacity:.95}
.v-role{margin:0 0 8px;font:300 10.5px/1 var(--lab);letter-spacing:.26em;text-transform:uppercase;color:var(--dim2)}
.v-name{margin:0 0 14px;font:400 clamp(26px,3vw,34px)/1 var(--disp);text-transform:uppercase}
.v-copy{margin:0 0 22px;flex:1;font-size:15.5px;color:var(--dim);line-height:1.62}
.v-link{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font:400 11.5px/1 var(--lab);letter-spacing:.18em;text-transform:uppercase;color:var(--wtf);
  border-top:1px solid var(--line);padding-top:18px;
}
.v-link:hover{color:#c98ff2}
.v-muted{color:var(--dim2);cursor:default}
.v-muted:hover{color:var(--dim2)}
.v-dc{width:17px;height:17px}

.art-band{display:grid;grid-template-columns:.82fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
.art-poster{margin:0}
.art-poster img{width:100%;border-radius:18px;border:1px solid var(--line);box-shadow:0 40px 90px -50px rgba(176,108,224,.9)}
.art-title{margin:0 0 20px;font:400 clamp(32px,4.4vw,56px)/1 var(--disp);text-transform:uppercase;filter:url(#rough-lite)}
.art-copy p{color:var(--dim);font-size:17px}
.art-chars{width:min(400px,100%);margin-top:30px;opacity:.9}

/* ============ FIND ============ */
.find{position:relative;z-index:2;padding:110px 0 120px}
.stores{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:20px}
.store{
  text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:22px;
  padding:32px 30px;display:flex;flex-direction:column;transition:border-color .25s,transform .25s,background .25s;
}
.store:hover{border-color:color-mix(in srgb,var(--wtf) 55%,transparent);transform:translateY(-3px);background:var(--card2)}
.store.lead{background:linear-gradient(160deg,rgba(176,108,224,.13),var(--card) 58%);border-color:color-mix(in srgb,var(--wtf) 34%,transparent)}
.s-tag{margin:0 0 12px;font:300 10.5px/1 var(--lab);letter-spacing:.26em;text-transform:uppercase;color:var(--dim2)}
.s-name{margin:0 0 14px;font:400 clamp(30px,3.6vw,44px)/1 var(--disp);text-transform:uppercase}
.s-copy{margin:0 0 26px;flex:1;color:var(--dim);font-size:15.5px}
.s-go{margin:0;padding-top:18px;border-top:1px solid var(--line);font:400 11.5px/1 var(--lab);letter-spacing:.14em;text-transform:uppercase;color:var(--wtf);display:flex;align-items:center;gap:8px}

/* ============ FOOTER ============ */
.foot{position:relative;z-index:2;border-top:1px solid var(--line);background:var(--ink2);padding:70px 0 0}
.foot-in{display:grid;grid-template-columns:1fr 1.5fr auto;gap:48px;align-items:start;padding-bottom:54px}
.foot-brand img:first-child{margin-bottom:16px}
.foot-word{width:190px;margin-bottom:14px}
.foot-line{margin:0;font:300 10.5px/1 var(--lab);letter-spacing:.28em;text-transform:uppercase;color:var(--dim2)}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.foot-cols h4{margin:0 0 16px;font:400 11px/1 var(--lab);letter-spacing:.24em;text-transform:uppercase;color:var(--txt)}
.foot-cols a{display:block;margin-bottom:11px;text-decoration:none;color:var(--dim);font-size:14.5px;transition:color .2s}
.foot-cols a:hover{color:var(--wtf)}
.soc{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;color:var(--dim);transition:color .2s,border-color .2s}
.soc:hover{color:var(--wtf);border-color:var(--wtf)}
.soc svg{width:20px;height:20px}
.foot-legal{border-top:1px solid var(--line);padding-top:28px;padding-bottom:40px}
.foot-legal p{margin:0 0 10px;font-size:13px;color:var(--dim2);line-height:1.65;max-width:88ch}
.foot-legal strong{color:var(--dim)}
.foot-small{font-size:12px}

/* ============ RESPONSIVE ============ */
@media(max-width:960px){
  .links,.btn-sm{display:none}
  .burger{display:flex}
  .mobmenu[data-open]{display:flex}
  .strain-in{grid-template-columns:1fr;gap:30px}
  .strain.alt .strain-in{direction:ltr}
  .strain-shot{max-width:460px;margin:0 auto}
  .impact-grid,.ventures,.stores{grid-template-columns:1fr}
  .breeder-head{grid-template-columns:1fr;gap:6px}
  .impact-grid{border-radius:16px}
  .art-band{grid-template-columns:1fr}
  .art-poster{max-width:420px;margin:0 auto}
  .foot-in{grid-template-columns:1fr;gap:40px}
}
@media(max-width:700px){
  body{font-size:16px}
  .wrap{padding-left:22px;padding-right:22px}
  .eyebrow{font-size:10.5px;letter-spacing:.26em}
  .hero{padding:60px 0 90px;min-height:auto}
  .hero-cta{margin-bottom:48px}
  .stats{grid-template-columns:repeat(2,1fr);gap:26px 12px}
  .sig,.port,.breeder,.find{padding:78px 0 84px}
  .sec-head{margin-bottom:40px}
  .card{padding:28px 20px 26px;border-radius:22px}
  .triad svg{width:26px;height:26px}
  .triad span{font-size:9px;letter-spacing:.14em}
  .impact{padding:48px 22px 40px}
  .impact-chars{width:220px}
  .impact-title{margin-top:74px}
  .imp{padding:26px 22px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
  .gc-body{padding:13px 14px 16px}
  .foot-cols{grid-template-columns:1fr 1fr;gap:24px}
}
@media(max-width:400px){
  .grid{grid-template-columns:1fr 1fr;gap:12px}
  .triad li{padding:0 2px}
}

/* ============================================================
   V2 — the site coming alive. Additive: nothing above is replaced.
   ============================================================ */

/* ---------- nav: scroll progress + active section ---------- */
.prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent;overflow:hidden}
.prog i{display:block;height:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--voodoo),var(--wtf) 55%,var(--gamma));}
.links a.here{color:var(--txt)}
.links a.here::after{right:0}

/* ---------- living mycelium behind the hero ---------- */
.myc{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;
  opacity:0;transition:opacity 1.6s ease;mix-blend-mode:screen}
.myc.live{opacity:.9}
.myc.done{animation:breathe 9s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.62}50%{opacity:.95}}
@media(prefers-reduced-motion:reduce){.myc{display:none}}
.hero-glow,.hero-emblem{z-index:1}

/* ---------- portfolio bar: chips + live search ---------- */
.port-bar{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin-bottom:18px}
.port-bar .chips{margin-bottom:0;flex:1 1 auto}
.srch{position:relative;display:flex;align-items:center;flex:0 0 auto;min-width:260px}
.srch svg{position:absolute;left:15px;width:16px;height:16px;color:var(--dim2);pointer-events:none}
.srch input{
  width:100%;padding:12px 38px 12px 42px;border-radius:999px;
  background:var(--card);border:1px solid var(--line);color:var(--txt);
  font:400 13.5px var(--body);outline:none;transition:border-color .2s,background .2s;
}
.srch input::placeholder{color:var(--dim2)}
.srch input:focus{border-color:color-mix(in srgb,var(--wtf) 60%,transparent);background:var(--card2)}
.srch input::-webkit-search-cancel-button{display:none}
.srch-x{position:absolute;right:10px;width:24px;height:24px;border:0;border-radius:50%;
  background:rgba(255,255,255,.08);color:var(--txt);font-size:16px;line-height:1;cursor:pointer}
.srch-x:hover{background:var(--wtf)}
.port-count{margin:0 0 26px;font:300 11px/1 var(--lab);letter-spacing:.22em;text-transform:uppercase;color:var(--dim2)}
.port-empty{margin:40px 0 0;text-align:center;color:var(--dim);font-size:16px}
.port-empty button{background:none;border:0;color:var(--wtf);font:inherit;cursor:pointer;text-decoration:underline}

/* ---------- grid cards: per-group accent, pointer glow, open affordance ---------- */
.gcard{cursor:pointer;--mx:50%;--my:50%}
.gcard::after{
  content:"";position:absolute;inset:0;border-radius:16px;pointer-events:none;opacity:0;
  transition:opacity .3s;
  background:radial-gradient(240px circle at var(--mx) var(--my),
    color-mix(in srgb,var(--acc,#b06ce0) 22%,transparent),transparent 70%);
}
.gcard:hover::after,.gcard:focus-visible::after{opacity:1}
.gcard:hover,.gcard:focus-visible{border-color:color-mix(in srgb,var(--acc,#b06ce0) 62%,transparent);
  box-shadow:0 22px 50px -28px color-mix(in srgb,var(--acc,#b06ce0) 80%,transparent)}
.gc-kind{color:color-mix(in srgb,var(--acc,#b06ce0) 88%,#fff);
  border-color:color-mix(in srgb,var(--acc,#b06ce0) 45%,transparent)}
.gc-lin{color:var(--acc,#b06ce0)}
.gc-open{
  position:absolute;left:50%;bottom:14px;transform:translate(-50%,10px);z-index:2;
  padding:8px 16px;border-radius:999px;white-space:nowrap;
  background:color-mix(in srgb,var(--acc,#b06ce0) 88%,#000);color:#0a0812;
  font:500 9.5px/1 var(--lab);letter-spacing:.2em;text-transform:uppercase;
  opacity:0;transition:opacity .25s,transform .25s;
}
.gcard:hover .gc-open,.gcard:focus-visible .gc-open{opacity:1;transform:translate(-50%,0)}
@media(hover:none){.gc-open{opacity:1;transform:translate(-50%,0)}}
.venture,.store,.imp,.keycard{position:relative;--mx:50%;--my:50%}
.venture::after,.store::after,.imp::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(320px circle at var(--mx) var(--my),rgba(176,108,224,.13),transparent 68%);
}
.venture:hover::after,.store:hover::after,.imp:hover::after{opacity:1}
.strain .card.clickable{cursor:pointer}
.strain .card.clickable:hover{box-shadow:0 34px 100px -38px color-mix(in srgb,var(--acc) 75%,transparent)}

/* ---------- the card lightbox ---------- */
.lb{
  position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px;
  background:rgba(4,3,8,.86);backdrop-filter:blur(16px);
  opacity:0;transition:opacity .22s;--acc:#b06ce0;
}
/* CRITICAL: author rules beat the UA stylesheet, so `display:grid` above was
   overriding `[hidden]{display:none}` and leaving an invisible full-screen
   overlay on z-index 80 that swallowed every click on the page. Keep both of
   these — the second one stops the 220ms close fade from eating a click too. */
.lb[hidden]{display:none}
.lb:not(.on){pointer-events:none}
.lb.on{opacity:1;pointer-events:auto}
.lb-in{
  display:grid;grid-template-columns:1fr .9fr;gap:clamp(20px,4vw,60px);
  align-items:center;width:min(1080px,100%);max-height:92vh;
}
.lb-in.swap{animation:lbin .42s cubic-bezier(.2,.7,.3,1) both}
@keyframes lbin{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
.lb-shot{margin:0;position:relative}
.lb-shot::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:88%;aspect-ratio:1;border-radius:50%;filter:blur(30px);
  background:radial-gradient(circle,color-mix(in srgb,var(--acc) 34%,transparent),transparent 68%)}
.lb-shot img{position:relative;width:100%;max-height:80vh;object-fit:contain;border-radius:14px}
.lb-card{max-height:88vh;overflow:auto;scrollbar-width:none}
.lb-card::-webkit-scrollbar{display:none}
.card-gen.dim{color:var(--dim)}
.lb-x,.lb-nav{
  position:absolute;z-index:2;display:grid;place-items:center;cursor:pointer;
  background:rgba(12,10,20,.8);border:1px solid var(--line2);color:var(--txt);
  border-radius:50%;transition:background .2s,border-color .2s,transform .2s;
}
.lb-x{top:20px;right:22px;width:46px;height:46px;font-size:26px;line-height:1}
.lb-nav{top:50%;margin-top:-26px;width:52px;height:52px;font-size:30px;line-height:1;padding-bottom:4px}
.lb-prev{left:18px}
.lb-next{right:18px}
.lb-x:hover,.lb-nav:hover{background:var(--acc);border-color:var(--acc);color:#0a0812;transform:scale(1.06)}

/* ---------- the breeding program ---------- */
.lin{position:relative;z-index:2;padding:110px 0 120px}
.keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:52px}
.keycard{
  text-align:left;cursor:pointer;background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:22px 22px 20px;color:inherit;font:inherit;
  display:flex;flex-direction:column;gap:4px;transition:border-color .25s,transform .25s;
}
.keycard:hover{border-color:color-mix(in srgb,var(--wtf) 55%,transparent);transform:translateY(-3px)}
.keycard b{font:400 44px/1 var(--disp);color:var(--wtf)}
.k-n{font:400 17px/1.15 var(--lab);letter-spacing:.04em;text-transform:uppercase;color:var(--txt)}
.k-s{font:300 10px/1 var(--lab);letter-spacing:.2em;text-transform:uppercase;color:var(--dim2)}

.linmap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
  gap:clamp(34px,13vw,190px);align-items:start}
.lin-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.lin-svg path{fill:none;stroke-width:1.1;opacity:.3;transition:opacity .25s,stroke-width .25s}
.linmap.focused .lin-svg path{opacity:.07}
.linmap.focused .lin-svg path.lit{opacity:.95;stroke-width:2.1}
.lin-col{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px}
.lin-head{margin:0 0 14px;font:300 10px/1 var(--lab);letter-spacing:.26em;text-transform:uppercase;color:var(--dim2)}
.lin-kid .lin-head{text-align:right}
.node{
  display:flex;align-items:center;gap:8px;width:100%;cursor:pointer;text-align:left;
  background:var(--card);border:1px solid var(--line);border-radius:11px;
  padding:9px 12px;color:var(--dim);font:400 12.5px/1.25 var(--lab);letter-spacing:.05em;
  text-transform:uppercase;transition:border-color .22s,color .22s,background .22s,transform .22s;
}
.node:hover{transform:translateX(2px)}
.linmap.focused .node{opacity:.32}
.linmap.focused .node.lit{opacity:1;color:var(--txt);border-color:color-mix(in srgb,var(--wtf) 55%,transparent)}
.node-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.node.key{color:var(--txt);border-color:color-mix(in srgb,var(--wtf) 30%,transparent)}
.node-c{flex:none;min-width:22px;padding:2px 6px;border-radius:999px;text-align:center;
  background:var(--wtf);color:#fff;font-size:10.5px}
.node-own{flex:none;padding:2px 6px;border-radius:5px;border:1px solid var(--line2);
  font-size:8.5px;letter-spacing:.14em;color:var(--dim2)}
.lin-kid .node{flex-direction:column;align-items:flex-start;gap:3px;padding:11px 14px;
  border-left:2px solid var(--acc,var(--wtf))}
.lin-kid .node .node-n{color:var(--txt);font-size:14px;width:100%}
.node-l{font:300 9.5px/1.3 var(--lab);letter-spacing:.12em;color:var(--dim2);text-transform:uppercase}
.node.sig{background:linear-gradient(120deg,color-mix(in srgb,var(--acc) 16%,var(--card)),var(--card) 70%)}
.node.sig .node-n{color:var(--acc)}
.lin-foot{margin:44px auto 0;max-width:70ch;text-align:center;color:var(--dim);font-size:15.5px;line-height:1.6}
.lin-foot b{color:var(--txt);font-weight:500}

@media(max-width:820px){
  .lb-in{grid-template-columns:1fr;max-height:88vh;overflow:auto;gap:14px;padding-bottom:76px}
  .lb-shot{max-width:300px;margin:0 auto}
  .lb-shot img{max-height:34vh}
  .lb-card{max-height:none;overflow:visible}
  .lb-nav{width:42px;height:42px;font-size:24px;margin-top:0;top:auto;bottom:18px}
  .lb-prev{left:22%}
  .lb-next{right:22%}
  .lb-x{top:12px;right:14px;width:40px;height:40px}
  .linmap{gap:clamp(26px,7vw,60px)}
  .node{font-size:11px;padding:8px 10px;gap:6px}
  .lin-kid .node .node-n{font-size:12.5px}
  .node-l{font-size:8.5px}
}
@media(max-width:700px){
  .lin{padding:78px 0 84px}
  .port-bar{flex-direction:column;align-items:stretch;gap:14px}
  .srch{min-width:0}
  .keys{grid-template-columns:1fr 1fr;gap:12px}
  .linmap{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:24px}
  .node{font-size:10px;padding:7px 8px;gap:4px;border-radius:9px}
  .lin-kid .node{padding:9px 10px}
  .lin-kid .node .node-n{font-size:11.5px}
  .node-l{font-size:7.8px;letter-spacing:.08em}
  .node-c{min-width:18px;padding:1px 5px;font-size:9.5px}
  .node-own{padding:1px 4px;font-size:7.5px}
  .lin-head{font-size:9px;letter-spacing:.18em}
  .gc-kind,.gc-out{font-size:8px;padding:5px 8px;letter-spacing:.12em}
  .keycard{padding:16px 15px 14px}
  .keycard b{font-size:34px}
  .k-n{font-size:14px}
}

/* ============================================================
   LIGHT MODE — opt-in via the nav toggle.
   The page turns to paper; the hero, the nav, the footer and EVERY card
   stay dark. Only the page-level tokens flip: --card/--card2 are left at
   their dark values, and each dark island re-declares the dark text and
   border tokens locally so its contents keep reading correctly.
   ============================================================ */

.thm{
  display:grid;place-items:center;width:40px;height:40px;flex:none;cursor:pointer;
  background:transparent;border:1px solid var(--line2);border-radius:50%;color:var(--dim);
  transition:color .2s,border-color .2s,background .2s;
}
.thm:hover{color:var(--txt);border-color:var(--wtf);background:rgba(176,108,224,.12)}
.t-i{width:18px;height:18px;grid-area:1/1;transition:opacity .25s,transform .35s}
.t-sun{opacity:0;transform:rotate(-90deg) scale(.6)}
.t-moon{opacity:1;transform:none}
:root[data-theme="light"] .t-sun{opacity:1;transform:none}
:root[data-theme="light"] .t-moon{opacity:0;transform:rotate(90deg) scale(.6)}

/* smooth the switch without leaving transitions on everything forever */
.thm-anim,.thm-anim *{transition:background-color .4s ease,color .4s ease,border-color .4s ease,box-shadow .4s ease !important}

:root[data-theme="light"]{
  --ink:#f4f0fa;          /* paper */
  --ink2:#ece5f6;
  --txt:#191125;
  --dim:#574d6d;
  --dim2:#7d7295;
  --line:rgba(25,17,37,.13);
  --line2:rgba(25,17,37,.24);
  --wtf-lit:#7434a8;      /* the brand purple, darkened enough to read on paper */
  color-scheme:light;
}

/* the paper gets a soft lavender wash rather than flat white */
:root[data-theme="light"] body{
  background:
    radial-gradient(900px 620px at 82% 18%,rgba(176,108,224,.11),transparent 62%),
    radial-gradient(760px 560px at 12% 74%,rgba(92,200,239,.10),transparent 60%),
    var(--ink);
  background-attachment:fixed;
}
:root[data-theme="light"] body::after{opacity:.028}
:root[data-theme="light"] #spores{display:none}   /* pale specks read as dust on paper */

/* ---- the dark islands ---- */
:root[data-theme="light"] .nav,
:root[data-theme="light"] .mobmenu,
:root[data-theme="light"] .hero,
:root[data-theme="light"] .gcard,
:root[data-theme="light"] .card,
:root[data-theme="light"] .venture,
:root[data-theme="light"] .store,
:root[data-theme="light"] .imp,
:root[data-theme="light"] .keycard,
:root[data-theme="light"] .node,
:root[data-theme="light"] .srch input,
:root[data-theme="light"] .foot,
:root[data-theme="light"] .lb{
  --txt:#f3f0f8;
  --dim:#9990ab;
  --dim2:#6f6883;
  --line:rgba(255,255,255,.09);
  --line2:rgba(255,255,255,.16);
  color:var(--txt);
}
:root[data-theme="light"] .hero{background:#06050b}
:root[data-theme="light"] .foot{background:#0a0813;border-top-color:transparent}
:root[data-theme="light"] .srch input{background:#0c0a14}
:root[data-theme="light"] .srch input::placeholder{color:#6f6883}

/* dark cards on paper finally get to cast a shadow */
:root[data-theme="light"] .gcard{box-shadow:0 16px 36px -22px rgba(38,18,68,.55)}
:root[data-theme="light"] .gcard:hover{box-shadow:0 26px 56px -26px color-mix(in srgb,var(--acc,#b06ce0) 60%,rgba(38,18,68,.6))}
:root[data-theme="light"] .venture,
:root[data-theme="light"] .store,
:root[data-theme="light"] .keycard{box-shadow:0 20px 46px -26px rgba(38,18,68,.5)}
:root[data-theme="light"] .node{box-shadow:0 8px 20px -14px rgba(38,18,68,.5)}
:root[data-theme="light"] .impact-grid{box-shadow:0 24px 60px -34px rgba(38,18,68,.5)}
:root[data-theme="light"] .strain .card{box-shadow:0 34px 90px -44px rgba(38,18,68,.7),
  0 0 60px -30px color-mix(in srgb,var(--acc) 70%,transparent)}
:root[data-theme="light"] .art-poster img{box-shadow:0 34px 80px -44px rgba(38,18,68,.65)}

/* the hero is a full-bleed dark banner; give the seam a soft landing */
:root[data-theme="light"] .hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:90px;pointer-events:none;z-index:3;
  background:linear-gradient(180deg,transparent,rgba(244,240,250,.16));
}

/* ---- type that lives on the paper ---- */
:root[data-theme="light"] .eyebrow{color:var(--wtf-lit)}
:root[data-theme="light"] .hero .eyebrow{color:var(--wtf)}
:root[data-theme="light"] .q-mark{
  background:linear-gradient(162deg,#241634 4%,#6a35a0 46%,#a35fd8 100%);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 12px 30px rgba(116,52,168,.28));
}
:root[data-theme="light"] .chip:hover{background:rgba(116,52,168,.07)}
:root[data-theme="light"] .port-empty button{color:var(--wtf-lit)}
:root[data-theme="light"] .v-link{color:var(--wtf-lit)}
:root[data-theme="light"] .s-go{color:var(--wtf-lit)}
:root[data-theme="light"] .lin-svg path{opacity:.42}
:root[data-theme="light"] .linmap.focused .lin-svg path{opacity:.10}
:root[data-theme="light"] .linmap.focused .lin-svg path.lit{opacity:1}
:root[data-theme="light"] .btn-ghost:hover{background:rgba(116,52,168,.10);border-color:var(--wtf-lit)}
:root[data-theme="light"] .hero .btn-ghost:hover{background:rgba(176,108,224,.12);border-color:var(--wtf)}
:root[data-theme="light"] .impact{background:linear-gradient(180deg,rgba(176,108,224,.10),transparent 62%)}
:root[data-theme="light"] .foot-legal p{color:#6f6883}
:root[data-theme="light"] .foot-legal strong{color:#9990ab}
/* the nav is translucent by design over the dark hero; on paper that reads as
   washed-out grey, so it goes near-solid in light mode */
:root[data-theme="light"] .nav{background:rgba(6,5,11,.95)}
:root[data-theme="light"] .nav.stuck{background:rgba(6,5,11,.98);border-bottom-color:rgba(255,255,255,.10)}
:root[data-theme="light"] .mobmenu{background:rgba(6,5,11,.99)}

/* The specimen photos are feathered to transparent over their own BLACK
   backdrop, so on paper the fade reads as a dark halo. Mount them on a dark
   plate in light mode: the feather lands on black again, as designed. */
:root[data-theme="light"] .strain-shot{
  background:radial-gradient(circle at 50% 42%,#120d1e,#06050b 72%);
  border-radius:28px;padding:14px;
  box-shadow:0 30px 70px -38px rgba(38,18,68,.6),inset 0 1px 0 rgba(255,255,255,.05);
}
:root[data-theme="light"] .strain-shot img{border-radius:18px}

/* ---- theme toggle: state + feedback ----
   The hero stays dark in both themes, so nothing above the fold changes when
   you switch. The button has to show its own state, and the toast has to
   confirm the switch happened. */
.thm{width:44px;height:44px}
.thm[aria-pressed="true"]{
  background:var(--wtf);border-color:var(--wtf);color:#fff;
  box-shadow:0 0 0 4px rgba(176,108,224,.16);
}
.thm[aria-pressed="true"]:hover{background:#c17ff0;border-color:#c17ff0}
.thm:active{transform:scale(.93)}

.toast{
  position:fixed;top:88px;right:18px;z-index:70;pointer-events:none;max-width:calc(100vw - 36px);
  padding:12px 20px;border-radius:999px;
  background:rgba(12,10,20,.95);border:1px solid rgba(255,255,255,.18);color:#f3f0f8;
  font:400 11px/1 var(--lab);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
  box-shadow:0 16px 40px -18px rgba(0,0,0,.85);backdrop-filter:blur(10px);
  opacity:0;transform:translateY(-10px);transition:opacity .26s ease,transform .26s ease;
}
.toast.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.toast{transition:none}}
@media(max-width:700px){
  .toast{top:82px;right:14px;left:14px;text-align:center;font-size:10.5px;letter-spacing:.16em}
  .nav-in{gap:14px}
}