/* =========================================================
   Mad Craft Studio — madcraftstudio.com
   Brand: origami / precise container, chaotic contents
   ========================================================= */

:root{
  /* --- Studio brand (sampled from logo assets) --- */
  --orange:      #FF4A11;
  --orange-deep: #D8360A;
  --orange-soft: #FFE9E0;
  --orange-tint: #FFF2EC;

  --cream:       #FFF9F4;
  --cream-deep:  #F7EDE5;
  --ink:         #0E0C0B;
  --ink-soft:    #1A1614;
  --ink-60:      rgba(14,12,11,.62);
  --ink-40:      rgba(14,12,11,.40);
  --ink-12:      rgba(14,12,11,.12);
  --paper:       #FFFFFF;

  /* --- Game UI accent set (used ONLY inside gameplay mocks) --- */
  --g-ink:    #0B2E1E;
  --g-mint:   #D5EFE1;
  --g-mint-2: #C3E7D4;
  --g-green:  #5FEF89;
  --g-purple: #B14EE8;
  --g-pink:   #FF6FA5;
  --g-yellow: #FFD84D;
  --g-blue:   #7FD8F5;

  --shell: 1240px;
  --pad: clamp(20px, 5vw, 56px);

  --ff-display: "Archivo", "Arial Black", system-ui, sans-serif;
  --ff-body: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;

  --ease: cubic-bezier(.22,1,.36,1);
}

/* ---------------- Reset / base ---------------- */
*,*::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(--cream);
  color:var(--ink);
  font-family:var(--ff-body);
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ margin:0; font-family:var(--ff-display); font-weight:800; line-height:.94; letter-spacing:-.03em; }
p{ margin:0 0 1em; }
ul,ol,dl{ margin:0; padding:0; list-style:none; }
button,input{ font:inherit; 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;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--cream); padding:12px 18px; border-radius:0 0 10px 0;
}
.skip-link:focus{ left:0; }

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

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad); }
.muted{ color:var(--ink-60); }

/* ---------------- Reveal on scroll ---------------- */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:calc(var(--d,0) * 90ms);
}
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .35s var(--ease), box-shadow .35s var(--ease), backdrop-filter .35s;
}
.nav.is-stuck{
  background:rgba(255,249,244,.86);
  backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 1px 0 var(--ink-12);
}
.nav__inner{
  display:flex; align-items:center; gap:24px;
  min-height:74px;
}
.nav__links{
  margin-left:auto; display:flex; gap:clamp(14px,2.2vw,34px);
  font-size:.86rem; font-weight:500; letter-spacing:.01em;
}
.nav__links a{ text-decoration:none; position:relative; padding:6px 0; color:var(--ink-60); transition:color .25s; }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:2px; height:2px; width:100%;
  background:var(--orange); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ transform:scaleX(1); }
@media (max-width:820px){ .nav__links{ display:none; } .nav .btn--sm{ margin-left:auto; } }

/* Lockup */
.lockup{
  display:inline-flex; align-items:center; gap:11px;
  text-decoration:none; color:var(--ink);
}
.lockup__mark{
  width:38px; height:38px; flex:none;
  display:grid; place-items:center;
  background:var(--orange); border-radius:10px; color:#fff;
  transition:transform .5s var(--ease);
}
.lockup__mark svg{ width:78%; height:78%; }
.lockup:hover .lockup__mark{ transform:rotate(-9deg) scale(1.06); }
.lockup__type{
  font-family:var(--ff-display); font-weight:800; font-size:.72rem;
  line-height:1.05; letter-spacing:.1em; text-transform:uppercase;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  --bg:var(--ink); --fg:var(--cream);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 26px; border:0; border-radius:999px; cursor:pointer;
  background:var(--bg); color:var(--fg);
  font-family:var(--ff-display); font-weight:800; font-size:.82rem;
  letter-spacing:.09em; text-transform:uppercase; text-decoration:none;
  white-space:nowrap; overflow:hidden; isolation:isolate;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--orange);
  transform:translateY(101%); transition:transform .4s var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -12px rgba(14,12,11,.5); }
.btn:hover::before{ transform:translateY(0); }
.btn:active{ transform:translateY(0); }
.btn--sm{ padding:11px 20px; font-size:.72rem; }
.btn--primary{ --bg:var(--orange); --fg:#fff; }
.btn--primary::before{ background:var(--ink); }
.btn--ink{ --bg:var(--ink); --fg:var(--cream); }
.btn--ink::before{ background:#fff; }
.btn--ink:hover{ color:var(--ink); }

.btn__spinner{
  display:none; width:15px; height:15px; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent;
  animation:spin .7s linear infinite;
}
.is-sending .btn__spinner{ display:block; }
.is-sending .btn{ pointer-events:none; opacity:.72; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; overflow:hidden;
  padding:clamp(110px,14vh,150px) 0 0;
  background:
    radial-gradient(120% 90% at 82% 6%, var(--orange-tint) 0%, transparent 58%),
    var(--cream);
}
.hero__facets{ position:absolute; inset:0; pointer-events:none; }
.facet{
  position:absolute; display:block; background:var(--orange);
  will-change:transform;
}
.facet--1{
  width:46vw; height:46vw; right:-13vw; top:-14vw; opacity:.09;
  clip-path:polygon(50% 0%, 100% 38%, 78% 100%, 12% 82%);
}
.facet--2{
  width:28vw; height:28vw; left:-9vw; top:34vh; opacity:.06;
  clip-path:polygon(0% 22%, 74% 0%, 100% 72%, 26% 100%);
}
.facet--3{
  width:15vw; height:15vw; right:8vw; bottom:16vh; opacity:.12;
  clip-path:polygon(50% 0%, 100% 62%, 22% 100%);
}
.facet--4{
  width:9vw; height:9vw; left:36vw; top:12vh; opacity:.10;
  clip-path:polygon(0 0, 100% 30%, 62% 100%);
}

.hero__grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(28px,4.4vw,66px);
  align-items:center;
  padding-bottom:clamp(50px,7vh,84px);
}
/* Grid/flex children default to min-width:auto, which lets long words push
   tracks past the viewport. Opt every child out. */
.hero__grid > *, .about > *, .loop > *, .notify__inner > *,
.studio > *, .titles > *, .mutations > *, .footer__inner > *{ min-width:0; }
h1,h2,h3,h4,p,li,dd{ overflow-wrap:break-word; }
@media (max-width:960px){
  .hero__grid{ grid-template-columns:1fr; gap:44px; }
}

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-60); margin:0 0 20px;
  border:1px solid var(--ink-12); border-radius:999px; padding:7px 15px;
  background:rgba(255,255,255,.6);
}
.eyebrow__dot{
  width:7px; height:7px; border-radius:50%; background:var(--orange); flex:none;
  box-shadow:0 0 0 0 rgba(255,74,17,.6); animation:ping 2.4s infinite;
}
.eyebrow--light{ color:rgba(255,255,255,.8); border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.08); }
.eyebrow--light .eyebrow__dot{ background:#fff; box-shadow:0 0 0 0 rgba(255,255,255,.6); }
@keyframes ping{ 70%{ box-shadow:0 0 0 11px rgba(255,74,17,0);} 100%{ box-shadow:0 0 0 0 rgba(255,74,17,0);} }

.hero__title{
  font-size:clamp(2.35rem,5.6vw,4.55rem);
  font-variation-settings:"wdth" 104, "wght" 820;
  letter-spacing:-.035em; line-height:.95;
  margin:0 0 22px; text-wrap:balance;
}
/* Underline is painted per line-fragment so the phrase can wrap freely —
   nowrap here would push the grid track wider than a phone viewport. */
.hero__title em{
  font-style:normal; color:var(--orange);
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  background:linear-gradient(to top, rgba(255,74,17,.3) 0 .07em, transparent .07em) no-repeat;
  padding-bottom:.04em;
}
.hero__sub{
  font-size:clamp(1rem,1.22vw,1.12rem); color:var(--ink-60);
  max-width:52ch; margin:0 0 30px;
}
.hero__sub strong{ color:var(--ink); font-weight:700; }

.hero__facts{
  display:flex; flex-wrap:wrap; gap:0; margin-top:36px;
  border-top:1px solid var(--ink-12);
}
.hero__facts li{
  flex:1 1 96px; padding:16px 16px 4px 0;
}
.hero__facts b{
  display:block; font-family:var(--ff-display); font-weight:800;
  font-size:1.32rem; letter-spacing:-.02em; line-height:1;
}
.hero__facts span{ font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-40); }
/* Four flex items don't fit one phone row — go 2×2 rather than 3+1. */
@media (max-width:560px){
  .hero__facts{ display:grid; grid-template-columns:1fr 1fr; }
  .hero__facts li{ padding:13px 12px 11px 0; border-bottom:1px solid var(--ink-12); }
  .hero__facts li:nth-last-child(-n+2){ border-bottom:0; padding-bottom:0; }
}

/* ---------- Hero art panel (precise container / chaotic contents) ---------- */
.hero__art{ position:relative; }
.panel{
  position:relative; aspect-ratio:1/1.02;
  /* HUD pieces are sized in cqw so the composition holds at any panel width */
  container-type:inline-size;
  background:linear-gradient(165deg, var(--g-mint) 0%, var(--g-mint-2) 100%);
  border:3px solid var(--g-ink);
  border-radius:22px;
  /* origami cut on two opposing corners */
  clip-path:polygon(0 6%, 6% 0, 100% 0, 100% 94%, 94% 100%, 0 100%);
  box-shadow:14px 16px 0 rgba(14,12,11,.09);
  overflow:hidden;
}
.panel__scanlines{
  position:absolute; inset:0; opacity:.35;
  background:repeating-linear-gradient(90deg, rgba(11,46,30,.05) 0 1px, transparent 1px 44px);
}
.panel__caption{
  margin:14px 0 0; text-align:right;
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-40);
}

/* Patient */
.patient{
  position:absolute; left:50%; top:45%; transform:translate(-50%,-50%);
  width:50%; animation:bob 3.6s ease-in-out infinite;
}
@keyframes bob{ 50%{ transform:translate(-50%,-56%); } }
.patient__body{ width:100%; height:auto; overflow:visible; }
.patient__reticle{
  position:absolute; left:50%; top:37%; transform:translate(-50%,-50%);
  width:58%; aspect-ratio:1; border:3px solid var(--g-green); border-radius:50%;
  animation:reticle 2.6s ease-in-out infinite;
}
.patient__reticle span{
  position:absolute; background:var(--g-green); border-radius:2px;
}
.patient__reticle span:nth-child(1){ width:3px; height:14px; left:calc(50% - 1.5px); top:-8px; }
.patient__reticle span:nth-child(2){ width:3px; height:14px; left:calc(50% - 1.5px); bottom:-8px; }
.patient__reticle span:nth-child(3){ height:3px; width:14px; top:calc(50% - 1.5px); left:-8px; }
.patient__reticle span:nth-child(4){ height:3px; width:14px; top:calc(50% - 1.5px); right:-8px; }
@keyframes reticle{ 50%{ transform:translate(-50%,-50%) scale(1.07) rotate(45deg); } }

/* Syringe */
.syringe{
  position:absolute; right:5%; bottom:8%;
  display:flex; align-items:center; width:42%;
}
.syringe__plunger{ width:5px; height:26px; background:var(--g-ink); border-radius:3px; }
.syringe__plunger::after{
  content:""; display:block; width:20px; height:5px; background:var(--g-ink);
  border-radius:3px; transform:translate(-2px,10px);
}
.syringe__barrel{
  flex:1; height:9cqw; min-height:20px; max-height:34px; margin-left:2px;
  background:#F2FBF6; border:3px solid var(--g-ink); border-radius:5px;
  overflow:hidden; position:relative;
}
.syringe__barrel::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg, transparent 0 21%, rgba(11,46,30,.22) 21% calc(21% + 2px));
}
.syringe__fill{
  display:block; height:100%; width:88%;
  background:linear-gradient(180deg, var(--g-purple), #9333D6);
}
.syringe__fill--anim{ animation:inject 3.4s var(--ease) infinite; }
@keyframes inject{
  0%,10%{ width:92%; } 55%,72%{ width:6%; } 90%,100%{ width:92%; }
}
.syringe__needle{
  width:12%; height:6px; background:var(--g-ink); border-radius:0 2px 2px 0;
}
.syringe--sm{ position:static; width:100%; }
.syringe--sm .syringe__barrel{ height:26px; max-height:none; }

/* Toast */
.toast{
  position:absolute; left:5%; top:6%;
  display:inline-flex; align-items:center; gap:2.8cqw;
  background:#fff; border:3px solid var(--g-ink); border-radius:12px;
  padding:2.4cqw 4cqw; box-shadow:4px 5px 0 var(--g-ink);
  animation:toastIn 5s var(--ease) infinite;
}
.toast__chip{
  width:5.5cqw; height:5.5cqw; min-width:14px; min-height:14px;
  border-radius:1.8cqw; background:var(--g-pink); border:2px solid var(--g-ink); flex:none;
}
.toast__text{
  font-family:var(--ff-display); font-weight:800;
  font-size:clamp(9px, 3.5cqw, 12px);
  letter-spacing:.05em; color:var(--g-ink); white-space:nowrap;
}
@keyframes toastIn{
  0%{ opacity:0; transform:translateY(-14px) rotate(-4deg); }
  8%,60%{ opacity:1; transform:translateY(0) rotate(-3deg); }
  70%,100%{ opacity:0; transform:translateY(-10px) rotate(-4deg); }
}
/* Inside the narrow loop card the headline wraps rather than being clipped. */
.toast--static{
  position:static; animation:none; transform:rotate(-2.5deg);
  max-width:100%; align-items:flex-start; box-shadow:3px 4px 0 var(--g-ink);
}
.toast--static .toast__text{
  white-space:normal; font-size:clamp(9px, 6cqw, 13px); line-height:1.15;
}
.toast--static .toast__chip{ margin-top:1px; }

/* Mutation tray */
.tray{
  position:absolute; left:5%; bottom:6%;
  background:#fff; border:3px solid var(--g-ink); border-radius:12px;
  padding:2.6cqw 3cqw;
}
.tray__label{
  display:block; font-size:clamp(7px, 2.2cqw, 9px);
  letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
  color:rgba(11,46,30,.6); margin-bottom:2cqw;
}
.tray__slots{ display:flex; gap:1.7cqw; }
.tray__slots i{
  width:5.6cqw; height:5.6cqw; min-width:14px; min-height:14px;
  border-radius:1.8cqw;
  border:2px dashed rgba(11,46,30,.3);
}
.tray__slots i.filled{ border:2px solid var(--g-ink); border-style:solid; }
.tray__slots i.c1{ background:var(--g-purple); }
.tray__slots i.c2{ background:var(--g-blue); }
.tray__slots i.c3{ background:var(--g-yellow); }

@media (max-width:960px){
  .panel{ max-width:440px; margin-inline:auto; }
  .panel__caption{ text-align:center; }
}

/* ---------- Marquee ---------- */
.hero__marquee{
  border-top:1px solid var(--ink-12); border-bottom:1px solid var(--ink-12);
  overflow:hidden; padding:15px 0; background:rgba(255,255,255,.4);
}
.marquee__track{
  display:flex; align-items:center; gap:26px; width:max-content;
  animation:marquee 34s linear infinite;
}
.marquee__track span{
  font-family:var(--ff-display); font-weight:800; font-size:clamp(1.1rem,2.3vw,1.7rem);
  letter-spacing:-.02em; text-transform:uppercase; color:var(--ink);
  opacity:.86; white-space:nowrap;
}
.marquee__track .dot{
  width:9px; height:9px; background:var(--orange); flex:none; opacity:1;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
@keyframes marquee{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){
  .marquee__track{ animation:none; }
  .patient,.patient__reticle,.toast,.syringe__fill--anim{ animation:none; }
}

/* =========================================================
   SECTIONS
   ========================================================= */
.section{ position:relative; padding:clamp(72px,10vw,132px) 0; }
.section--cream-deep{ background:var(--cream-deep); }
.section--ink{ background:var(--ink); color:var(--cream); }
.section--ink .muted{ color:rgba(255,249,244,.58); }

/* Origami fold on top edge of a section */
.fold-top{ clip-path:polygon(0 0, 52% 3.2vw, 100% 0, 100% 100%, 0 100%); margin-top:-1px; }

.sec-head{ margin-bottom:clamp(38px,5vw,64px); max-width:900px; }
.sec-num{
  display:inline-block; font-size:.68rem; letter-spacing:.22em; font-weight:600;
  color:var(--orange); margin-bottom:14px;
}
.sec-title{
  font-size:clamp(2.1rem,5.2vw,4rem);
  font-variation-settings:"wdth" 100, "wght" 820;
  letter-spacing:-.035em;
}
.sec-title em{ font-style:normal; color:var(--orange); }
.sec-kicker{ margin-top:16px; color:var(--ink-60); font-size:1.02rem; max-width:46ch; }
.section--ink .sec-kicker{ color:rgba(255,249,244,.58); }

/* ---------- About ---------- */
.about{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(28px,4.5vw,72px); align-items:start; }
@media (max-width:860px){ .about{ grid-template-columns:1fr; } }
.about__lead p:first-child{
  font-family:var(--ff-display); font-weight:500; font-variation-settings:"wght" 520;
  font-size:clamp(1.15rem,2.05vw,1.6rem); line-height:1.32; letter-spacing:-.02em;
  margin-bottom:22px;
}
.about__lead b{ color:var(--orange); font-weight:800; }

.specs{ border-top:1px solid rgba(255,249,244,.16); }
.specs > div{
  display:flex; justify-content:space-between; gap:20px; align-items:baseline;
  padding:14px 0; border-bottom:1px solid rgba(255,249,244,.16);
}
.specs dt{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,249,244,.5); }
.specs dd{ margin:0; font-weight:500; text-align:right; }
.pulse{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--orange); margin-right:8px; vertical-align:middle;
  animation:ping 2.4s infinite;
}

/* ---------- Loop ---------- */
.loop{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px); }
@media (max-width:900px){ .loop{ grid-template-columns:1fr; } }
.loop__step{
  position:relative; background:var(--paper);
  border:1px solid var(--ink-12); border-radius:20px;
  padding:clamp(24px,2.6vw,34px);
  display:flex; flex-direction:column;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 26px 100%, 0 calc(100% - 26px));
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.loop__step:hover{ transform:translateY(-6px); box-shadow:0 22px 44px -26px rgba(14,12,11,.45); }
.loop__num{
  font-family:var(--ff-display); font-weight:800; font-size:.72rem;
  letter-spacing:.18em; color:var(--orange); display:block; margin-bottom:14px;
}
.loop__step h3{ font-size:clamp(1.5rem,2.5vw,2rem); margin-bottom:12px; }
.loop__step p{ color:var(--ink-60); font-size:.94rem; margin-bottom:26px; }
.loop__art{ margin-top:auto; height:118px; border-radius:12px; position:relative;
  container-type:inline-size;
  background:linear-gradient(165deg,var(--g-mint),var(--g-mint-2));
  border:2px solid var(--g-ink); overflow:hidden;
  display:flex; align-items:center; justify-content:center; padding:14px;
}
/* chase */
.loop__art--chase::after{
  content:""; position:absolute; left:0; right:0; bottom:26px; height:2px;
  background:repeating-linear-gradient(90deg, rgba(11,46,30,.24) 0 8px, transparent 8px 16px);
}
.runner{
  position:absolute; bottom:28px; width:26px; height:26px; border-radius:50%;
  background:var(--g-purple); border:3px solid var(--g-ink);
  animation:run 3.2s linear infinite;
}
.runner::after{
  content:""; position:absolute; left:4px; top:22px; width:14px; height:15px;
  background:var(--g-purple); border:3px solid var(--g-ink); border-radius:0 0 5px 5px;
}
.runner--2{ background:var(--g-pink); animation-delay:.55s; }
.runner--2::after{ background:var(--g-pink); }
@keyframes run{ from{ left:-16%; } to{ left:108%; } }
/* grab */
.loop__art--grab{ flex-direction:column; gap:12px; align-items:stretch; justify-content:center; }
.meter{ display:flex; align-items:center; gap:9px; }
.meter__label{
  font-size:.54rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--g-ink); font-weight:600; flex:none;
}
.meter__bar{ flex:1; height:13px; background:#0F3A26; border:2px solid var(--g-ink); border-radius:999px; overflow:hidden; }
.meter__bar i{ display:block; height:100%; width:70%; background:var(--g-green); animation:struggle 3.4s var(--ease) infinite; }
@keyframes struggle{ 0%,10%{ width:76%; background:var(--g-green);} 55%{ width:22%; background:#FF5A4E;} 72%{ width:12%; background:#FF5A4E;} 90%,100%{ width:76%; background:var(--g-green);} }
/* chaos */
.loop__art--chaos{ background:linear-gradient(165deg,#E7F7EE,var(--g-mint-2)); }
@media (prefers-reduced-motion:reduce){
  .runner,.meter__bar i{ animation:none; }
}

/* ---------- Mutations ---------- */
.mutations{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(14px,1.6vw,20px); }
.mut{
  background:var(--paper); border:1px solid var(--ink-12); border-radius:18px;
  padding:26px 24px 24px; position:relative; overflow:hidden;
  transition:transform .4s var(--ease), border-color .4s;
}
.mut::before{
  content:""; position:absolute; right:-30px; top:-30px; width:100px; height:100px;
  background:var(--mc,var(--orange)); opacity:.14;
  clip-path:polygon(50% 0,100% 60%,18% 100%);
  transition:transform .5s var(--ease);
}
.mut:hover{ transform:translateY(-5px); border-color:var(--mc,var(--orange)); }
.mut:hover::before{ transform:rotate(-18deg) scale(1.12); }
.mut__icon{
  display:grid; place-items:center; width:44px; height:44px; border-radius:12px;
  background:var(--mc,var(--orange)); margin-bottom:18px; position:relative;
  border:2px solid var(--ink);
}
.mut__icon svg{
  width:24px; height:24px; fill:none; stroke:var(--ink);
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.mut h3{ font-size:1.22rem; margin-bottom:8px; }
.mut p{ margin:0; font-size:.9rem; color:var(--ink-60); }
.mut--more{ background:transparent; border-style:dashed; }
.mut--more .mut__icon{ background:transparent; border-style:dashed; }

/* =========================================================
   NOTIFY
   ========================================================= */
.notify{
  position:relative; overflow:hidden; color:#fff;
  background:var(--orange);
  padding:clamp(78px,10vw,132px) 0 clamp(64px,8vw,110px);
}
.notify__facets{ position:absolute; inset:0; pointer-events:none; }
.facet--n1{
  width:38vw; height:38vw; right:-8vw; bottom:-14vw; background:#fff; opacity:.09;
  clip-path:polygon(50% 0,100% 46%,66% 100%,4% 72%);
}
.facet--n2{
  width:22vw; height:22vw; left:-6vw; top:-6vw; background:#fff; opacity:.07;
  clip-path:polygon(0 0,100% 34%,44% 100%);
}
.notify__inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,4vw,64px); align-items:center;
}
@media (max-width:900px){ .notify__inner{ grid-template-columns:1fr; } }
.notify__title{
  font-size:clamp(2.1rem,5vw,3.9rem);
  font-variation-settings:"wdth" 102, "wght" 830;
  letter-spacing:-.035em; margin-bottom:18px;
}
.notify__title em{ font-style:normal; color:var(--ink); }
.notify__sub{ color:rgba(255,255,255,.9); max-width:44ch; font-size:1.02rem; margin:0; }

/* =========================================================
   SIGNUP FORM
   ========================================================= */
.signup{ max-width:530px; }
.signup__row{
  display:flex; gap:8px; align-items:stretch;
  background:var(--paper); border:2px solid var(--ink); border-radius:999px; padding:6px;
  transition:box-shadow .3s var(--ease);
}
.signup__row:focus-within{ box-shadow:0 0 0 4px rgba(255,74,17,.24); }
.signup__input{
  flex:1; min-width:0; border:0; background:transparent; padding:0 8px 0 18px;
  font-size:.98rem; outline:none;
}
.signup__input::placeholder{ color:var(--ink-40); }
.signup__note{
  margin:12px 2px 0; font-size:.78rem; color:var(--ink-40); line-height:1.5;
}
.signup__status{
  margin:10px 2px 0; font-size:.85rem; font-weight:500; min-height:1.2em;
}
.signup__status.is-ok{ color:#0E7A3C; }
.signup__status.is-err{ color:#C42B12; }

.signup--big .signup__row{ border-color:var(--ink); padding:7px; }
.signup--big .signup__note{ color:rgba(255,255,255,.82); }
.signup--big .signup__status.is-ok{ color:#0B2E1E; }
.signup--big .signup__status.is-err{ color:#3B0A02; }
.signup--big .signup__input{ font-size:1.02rem; }

@media (max-width:520px){
  .signup__row{ flex-direction:column; border-radius:20px; padding:10px; }
  .signup__input{ padding:10px 12px; }
  .btn{ width:100%; }
}

/* =========================================================
   STUDIO
   ========================================================= */
.studio{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(28px,5vw,72px);
  align-items:center; margin-bottom:clamp(52px,7vw,90px);
}
@media (max-width:760px){ .studio{ grid-template-columns:1fr; } }
.studio__mark{
  width:clamp(130px,17vw,208px); color:var(--orange);
  filter:drop-shadow(0 14px 30px rgba(255,74,17,.28));
}
.bird{ width:100%; height:auto; animation:float 7s ease-in-out infinite; }
@keyframes float{ 50%{ transform:translateY(-13px) rotate(-3deg); } }
@media (prefers-reduced-motion:reduce){ .bird{ animation:none; } }

.studio__big{
  font-family:var(--ff-display); font-weight:600; font-variation-settings:"wght" 620;
  font-size:clamp(1.3rem,2.6vw,2.05rem); line-height:1.24; letter-spacing:-.025em;
  margin-bottom:20px;
}

.titles__head{
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  font-family:var(--ff-body); font-weight:600; color:rgba(255,249,244,.5);
  padding-bottom:14px; border-bottom:1px solid rgba(255,249,244,.16); margin-bottom:22px;
}
.titles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.title-card{
  border:1px solid rgba(255,249,244,.18); border-radius:18px; padding:26px 24px;
  display:flex; flex-direction:column; gap:10px;
  transition:transform .4s var(--ease), background .4s, border-color .4s;
}
.title-card:hover{ transform:translateY(-5px); background:rgba(255,249,244,.05); border-color:rgba(255,249,244,.32); }
.title-card__tag{
  align-self:flex-start; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px; border:1px solid currentColor; color:var(--orange);
}
.title-card--tba .title-card__tag{ color:rgba(255,249,244,.45); }
.title-card h4{ font-size:1.5rem; letter-spacing:-.025em; }
.title-card p{ margin:0; color:rgba(255,249,244,.58); font-size:.92rem; }
.title-card__link{
  margin-top:8px; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:600; text-decoration:none; color:var(--orange);
}
.title-card__link span{ display:inline-block; transition:transform .3s var(--ease); }
.title-card__link:hover span{ transform:translateX(5px); }
.title-card__link.is-muted{ color:rgba(255,249,244,.35); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background:var(--ink); color:var(--cream); padding:0 0 44px; }
.footer__inner{
  display:grid; grid-template-columns:auto 1fr auto; gap:26px; align-items:center;
  padding-top:36px; border-top:1px solid rgba(255,249,244,.14);
}
@media (max-width:820px){
  .footer__inner{ grid-template-columns:1fr; text-align:center; justify-items:center; }
}
.lockup--footer{ color:var(--cream); }
.footer__links{ display:flex; flex-direction:column; align-items:center; gap:7px; }
.footer__soon{ margin:0; font-size:.76rem; color:rgba(255,249,244,.34); }
.footer__social{ display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:center; }
.footer__social a{
  font-size:.84rem; color:rgba(255,249,244,.6); text-decoration:none; transition:color .25s;
}
.footer__social a:hover{ color:var(--orange); }
.footer__legal{ margin:0; font-size:.76rem; color:rgba(255,249,244,.38); white-space:nowrap; }

/* =========================================================
   404
   ========================================================= */
.oops{
  position:relative; overflow:hidden;
  min-height:100svh; display:grid; align-items:center;
  background:radial-gradient(110% 80% at 78% 10%, var(--orange-tint) 0%, transparent 60%), var(--cream);
}
.oops__facets{ position:absolute; inset:0; pointer-events:none; }
.oops__inner{ position:relative; z-index:1; padding-block:clamp(60px,10vh,110px); }
.oops__inner .lockup{ display:flex; width:max-content; margin-bottom:34px; }
.oops__title{
  font-size:clamp(2.2rem,6vw,4.4rem);
  font-variation-settings:"wdth" 104, "wght" 820;
  letter-spacing:-.035em; margin:0 0 18px; max-width:16ch;
}
.oops__title em{ font-style:normal; color:var(--orange); }
.oops__sub{ color:var(--ink-60); max-width:44ch; margin:0 0 32px; font-size:1.02rem; }