/* =====================================================================
   ILO STUDIOS brand layer (Brand Guidelines v01, Sep 2025 — Figma HANDBOOK)
   Loaded AFTER site.css / sub.css. Colours, type, gradients, grain only;
   layout stays in site.css. Remove this file's <link> to roll back.
   Web fallback fonts per guide: Instrument Serif (titles) + Be Vietnam Pro (body).
   ===================================================================== */
:root{
  /* base */
  --ember:#0E0400;        /* EMBER NIGHT — dominant */
  --mist:#F5F5F5;         /* STEAM MIST — paired */
  /* warm spectrum · sauna & breathwork */
  --cedar:#652001;        /* BURNT CEDAR */
  --pulse:#BF0707;        /* DEEP PULSE */
  --glow:#B63801;         /* SAUNA GLOW */
  --amber:#FFA427;        /* AMBER HEAT */
  /* cool spectrum · ice bath */
  --haze:#9BA0A8;         /* FROZEN HAZE */
  /* raised ember surfaces (cards / panels) */
  --ember-2:#1A0B05;
  --ember-3:#26130A;

  /* corporate gradients (guide p.17) */
  --g-dusk:linear-gradient(90deg,var(--amber) 0%,var(--glow) 35%,var(--cedar) 68%,var(--ember) 100%);
  --g-heat:linear-gradient(100deg,var(--amber) 0%,var(--glow) 62%,var(--pulse) 100%);
  --g-sun:linear-gradient(90deg,var(--amber) 0%,#F59345 50%,#EE7A66 100%);
  --g-ice:linear-gradient(90deg,var(--haze) 0%,#6E717A 55%,var(--ember) 100%);

  /* remap site.css tokens */
  --ink:var(--ember);
  --fg:var(--mist);
  --panel:var(--ember-2);
  --cream:var(--mist);
  --cream-90:rgba(245,245,245,.94);
  --mono:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Instrument Serif","Times New Roman",serif;
}

body{background:var(--ember);font-weight:400}

/* grain & texture — subtle analog noise over everything */
body::after{content:"";position:fixed;inset:-50%;z-index:200;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- Type: H1/H2 = serif, Title Case, tight leading ---------- */
.hero h1,.intro h2,.offer h2,.h-sec,.classes h2,.cgroup__name,.notif h2,
.phero h1,.split h2,.prose h2,.cta h2,.ptitle h2,.xhead h2,
.card__price,.pcard .price,.temp b{
  font-family:var(--serif);font-weight:400;text-transform:none;letter-spacing:0}
/* Instrument Serif is already tight by design — the guide's −2…−4% is for VC Garamond Condensed.
   H1 gets a hair of negative tracking, H2 and prices sit at 0 (guide: H2 = 0 to +2%). */
.hero h1,.phero h1{letter-spacing:-.01em}
.card__price small,.pcard .price small{font-family:var(--mono);font-size:13px;line-height:18px;font-weight:400;
  letter-spacing:.08em;text-transform:uppercase;opacity:.7;margin-left:14px;vertical-align:middle;white-space:nowrap}
.hero h1{font-size:88px;line-height:.9}
.intro h2,.offer h2{font-size:96px;line-height:.88}
.h-sec{font-size:56px;line-height:1}
.classes h2{font-size:72px;line-height:.95}
.cgroup__name{font-size:40px;line-height:1.05}
.card__price{font-size:80px;line-height:1}
.notif h2{font-size:32px;line-height:1.05}
.phero h1{font-size:88px;line-height:.92}
.split h2,.prose h2,.ptitle h2,.xhead h2{font-size:52px;line-height:1}
.cta h2{font-size:72px;line-height:.95}
.pcard .price,.temp b{font-size:64px;line-height:1}
/* body copy: Be Vietnam Pro Regular, 130% leading, -2% tracking */
.sub,.intro__r p,.prac__det p,.card dd,.acc__body,.classes__intro,.prose p{font-weight:400;letter-spacing:-.02em;line-height:1.3}
.scard__d p,.guide__over p,.tslide__q p,.card__fine,.news__l,.news__info,.wa__log{letter-spacing:-.01em}
/* small caps labels stay sans, a touch of tracking */
.hdr__nav a,.btn,.card__lbl,.card dt,.offer__k,.news__links,.acc__meta,.guide__role{letter-spacing:.04em}

@media (max-width:1023px){
  .intro h2,.offer h2{font-size:72px}
  .hero h1,.phero h1{font-size:68px}
  .classes h2,.cta h2{font-size:56px}
}
@media (max-width:767px){
  .hero h1,.phero h1{font-size:52px;line-height:.95}
  .intro h2,.offer h2{font-size:56px;line-height:.92}
  .h-sec{font-size:42px}
  .classes h2,.cta h2{font-size:44px}
  .cgroup__name{font-size:32px}
  .card__price{font-size:60px}
  .split h2,.prose h2,.ptitle h2,.xhead h2{font-size:40px}
  .pcard .price,.temp b{font-size:52px}
  .notif h2{font-size:22px;line-height:1.1}
}

/* ---------- Buttons: Steam Mist on Ember, Amber Heat on hover ---------- */
.btn,.btn--solid,.classes .btn{background:var(--mist);color:var(--ember);border-color:var(--mist);font-weight:500}
.btn:hover,.classes .btn:hover{background:var(--amber);border-color:var(--amber);color:var(--ember)}
.pcard--feature .btn{background:var(--ember);color:var(--mist);border-color:var(--ember)}
.pcard--feature .btn:hover{background:var(--glow);border-color:var(--glow);color:var(--mist)}

/* ---------- Surfaces ---------- */
.mmenu{background:linear-gradient(var(--ember),rgba(14,4,0,.96))}
.hero::before{background:rgba(14,4,0,.18)}
.card,.temp,.vs__col,.pcard{background:var(--ember-2)}
.vs__col--us,.pcard--feature{background:var(--mist);color:var(--ember)}
.tslide{background-color:var(--ember-2)}
.arrow:hover{color:var(--ember)}
.msg--me,.chip--wa{color:var(--ember)}
.wa__panel{background:#140701}
.msg--bot{background:var(--ember-3)}
.sess__spots,.tag{color:var(--amber)}
.tag--full{color:var(--fg-60)}

/* guided classes panel: ember with a warm dusk glow at the foot */
.classes{background:
  radial-gradient(120% 60% at 85% 115%,rgba(182,56,1,.55) 0%,rgba(101,32,1,.35) 35%,rgba(14,4,0,0) 70%),
  var(--ember-2)}

/* intro-pack popup: Steam Mist card, ember text */
.notif__box{color:var(--ember)}

/* newsletter / footer band: the "dusk" corporate gradient, vertical */
.news{background:linear-gradient(180deg,var(--ember) 0%,var(--cedar) 55%,var(--glow) 85%,#D9631A 100%)}
.news__form input{border-color:rgba(245,245,245,.55)}
.news__form input::placeholder{color:rgba(245,245,245,.75)}
.news__info{color:rgba(245,245,245,.8)}

/* section rules / hairlines warm up slightly */
:root{--line:rgba(245,245,245,.3)}

/* ice-bath page uses the cool spectrum (guide: Frozen Haze = ice) */
.subpage--ice-baths-barcelona .news{background:linear-gradient(180deg,var(--ember) 0%,#2A2C31 50%,#6E717A 85%,var(--haze) 100%)}
.subpage--ice-baths-barcelona .sess__spots,.subpage--ice-baths-barcelona .tag{color:var(--haze)}

/* checkout panel: Steam Mist chrome, ember ink (Momence iframe stays white) */
.co__panel{background:var(--mist);color:var(--ember)}
.co__opts button{color:var(--ember)}
.co__opts button[aria-checked="true"]{border-color:var(--ember);background:#fff;box-shadow:inset 0 0 0 1px var(--ember)}
.co__opts i{color:var(--glow)}

/* logo (symbol + wordmark) — sizing for the combined asset */
.hdr__logo img{height:44px}
.mbar a img{height:32px;width:auto}