/* ============================================================
   TUCSON COLD PLUNGE — Design System
   Desert Modern: warm sand + glacial blue + terracotta
   ============================================================ */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Hanken+Grotesk:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=Schibsted+Grotesk:wght@400..800&display=swap');

/* ---------- Theme tokens ---------- */
:root{
  /* DEFAULT: Desert Modern */
  --sand:        #F3EBDD;
  --sand-2:      #ECE0CC;
  --paper:       #FBF6EE;
  --ink:         #221C14;
  --ink-soft:    #5A4F40;
  --line:        #E0D2BC;
  --cold:        #15506B;   /* glacial deep */
  --cold-bright: #3E9CC0;   /* icy highlight */
  --cold-tint:   #DCEAEF;
  --clay:        #C05E36;   /* terracotta */
  --clay-soft:   #E7C3AE;
  --dark:        #16120C;   /* deep section bg */
  --dark-ink:    #F3EBDD;

  /* fonts */
  --f-display: 'Bricolage Grotesque', sans-serif;
  --f-body:    'Hanken Grotesk', sans-serif;
  --display-weight: 800;
  --display-spacing: -0.02em;

  /* scale */
  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 64px);
  --radius: 18px;
  --radius-lg: 28px;
  --shadow-sm: 0 2px 10px rgba(34,28,20,.06);
  --shadow:    0 18px 50px -18px rgba(34,28,20,.30);
  --shadow-lg: 0 40px 90px -30px rgba(34,28,20,.42);
}

/* THEME: Icy Clinical */
[data-theme="icy"]{
  --sand:#EAF1F5; --sand-2:#DCE8EF; --paper:#F6FAFC; --ink:#0E2230; --ink-soft:#4A6678;
  --line:#CFE0E9; --cold:#0E6E97; --cold-bright:#34B3DE; --cold-tint:#D5ECF5;
  --clay:#1F7FA6; --clay-soft:#Bfe1ee; --dark:#0A1A24; --dark-ink:#EAF1F5;
}
/* THEME: Calm Spa */
[data-theme="spa"]{
  --sand:#EFEBE2; --sand-2:#E3DCCD; --paper:#F8F5EE; --ink:#2A2A22; --ink-soft:#5E5C4F;
  --line:#DCD5C5; --cold:#5B756A; --cold-bright:#8FA89A; --cold-tint:#E0E7DF;
  --clay:#B08158; --clay-soft:#E2CDB4; --dark:#23241C; --dark-ink:#EFEBE2;
}
/* THEME: Midnight (dark) */
[data-theme="midnight"]{
  --sand:#13202B; --sand-2:#0E1922; --paper:#172733; --ink:#EAF3F7; --ink-soft:#9DB4C0;
  --line:#274050; --cold:#46AFD6; --cold-bright:#7FD1ED; --cold-tint:#1B3340;
  --clay:#E08254; --clay-soft:#3a2d24; --dark:#0A141B; --dark-ink:#EAF3F7;
  --shadow:0 18px 50px -18px rgba(0,0,0,.6); --shadow-lg:0 40px 90px -30px rgba(0,0,0,.7);
}

/* font set: Editorial */
[data-fonts="editorial"]{ --f-display:'Instrument Serif', serif; --display-weight:400; --display-spacing:0; }
/* font set: Clean */
[data-fonts="clean"]{ --f-display:'Schibsted Grotesk', sans-serif; --display-weight:800; --display-spacing:-0.025em; }

/* ---------- Reset / base ---------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--f-body);
  background:var(--sand);
  color:var(--ink);
  line-height:1.6;
  font-size:18px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .5s ease, color .5s ease;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
section{ position:relative; }

h1,h2,h3,h4{ font-family:var(--f-display); font-weight:var(--display-weight); letter-spacing:var(--display-spacing); line-height:1.02; text-wrap:balance; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.eyebrow{
  font-family:var(--f-body); font-weight:700; font-size:13px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--clay); display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--clay); display:inline-block; }
.eyebrow.center{ justify-content:center; }
.lead{ font-size:clamp(18px,1.6vw,21px); color:var(--ink-soft); max-width:60ch; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--f-body); font-weight:700; font-size:16px; letter-spacing:.01em;
  padding:16px 28px; border-radius:100px; transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s, color .25s;
  white-space:nowrap;
}
.btn svg{ width:18px; height:18px; }
.btn-primary{ background:var(--cold); color:#fff; box-shadow:0 10px 24px -10px var(--cold); }
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 18px 34px -12px var(--cold); }
.btn-clay{ background:var(--clay); color:#fff; box-shadow:0 10px 24px -10px var(--clay); }
.btn-clay:hover{ transform:translateY(-3px); box-shadow:0 18px 34px -12px var(--clay); }
.btn-ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--line); }
.btn-ghost:hover{ border-color:var(--ink); transform:translateY(-3px); }
.btn-light{ background:var(--paper); color:var(--ink); }
.btn-light:hover{ transform:translateY(-3px); box-shadow:var(--shadow-sm); }
.btn-lg{ padding:19px 34px; font-size:17px; }

/* ---------- Reveal animation ----------
   Base state is VISIBLE so content always shows even if JS fails, in print,
   or under reduced-motion. The hidden start-state is layered on ONLY once JS
   adds .js-anim, and a hard failsafe (.reveal-done) forces the finished state. */
.reveal{ opacity:1; transform:none; }
html.js-anim .reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
html.js-anim .reveal.in{ opacity:1; transform:none; }
html.js-anim .reveal[data-d="1"]{ transition-delay:.08s; }
html.js-anim .reveal[data-d="2"]{ transition-delay:.16s; }
html.js-anim .reveal[data-d="3"]{ transition-delay:.24s; }
html.js-anim .reveal[data-d="4"]{ transition-delay:.32s; }
html.reveal-done .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
@media (prefers-reduced-motion: reduce){ html.js-anim .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }