/* ============================================================
   WAFROZO — Premium Afro Wellness Experience
   Design system: dark warm ground · vibrant brand accents
   Type: Archivo (display) + Hanken Grotesk (body)
   ============================================================ */

:root{
  /* warm dark ground */
  --ink:        #16110c;
  --ink-1:      #1c1610;
  --ink-2:      #241c14;
  --ink-3:      #2e251b;
  --hair:       rgba(244,239,230,.12);
  --hair-soft:  rgba(244,239,230,.07);

  /* warm light */
  --cream:      #f5efe4;
  --cream-2:    #e9e0d1;
  --dim:        rgba(245,239,228,.64);
  --faint:      rgba(245,239,228,.40);

  /* brand accents — full palette */
  --orange:     #f18e21;
  --orange-2:   #fca44c;
  --gold:       #e3c140;
  --lime:       #dce349;
  --lime-2:     #c6e74e;
  --lime-3:     #bed577;
  --sage:       #95c3a6;
  --sky:        #3aa2d3;
  --sky-2:      #47acdf;
  --sky-3:      #2f8df5;
  --blue:       #3f77ec;
  --teal:       #0e82a6;
  --pale-teal:  #d3e7e4;

  --accent:     var(--orange);   /* hero default */
  --accent-2:   var(--lime);

  /* type */
  --display: 'Archivo', system-ui, sans-serif;
  --body:    'Hanken Grotesk', system-ui, sans-serif;

  /* rhythm */
  --maxw: 1320px;
  --gutter: clamp(20px, 5vw, 80px);
  --section-y: clamp(80px, 11vw, 180px);

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

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

body{
  font-family:var(--body);
  background:var(--ink);
  color:var(--cream);
  line-height:1.55;
  font-size:18px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--accent); color:var(--ink); }

/* ---------- layout helpers ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-y); position:relative; }

/* ---------- type scale ---------- */
.display{
  font-family:var(--display);
  font-weight:800;
  line-height:.92;
  letter-spacing:-.02em;
  text-transform:uppercase;
  text-wrap:balance;
}
.h-xl{ font-size:clamp(48px, 9.5vw, 150px); }
.h-lg{ font-size:clamp(40px, 6vw, 92px); }
.h-md{ font-size:clamp(30px, 4vw, 56px); }
.h-sm{ font-size:clamp(24px, 2.6vw, 38px); }

.lede{ font-size:clamp(19px,1.7vw,24px); line-height:1.5; color:var(--cream-2); font-weight:400; }
.body-lg{ font-size:clamp(17px,1.3vw,20px); color:var(--dim); }

.eyebrow{
  font-family:var(--display);
  text-transform:uppercase;
  letter-spacing:.34em;
  font-weight:700;
  font-size:13px;
  color:var(--accent);
  display:inline-flex; align-items:center; gap:14px;
}
.eyebrow::before{
  content:""; width:34px; height:2px; background:var(--accent); display:inline-block;
}
.eyebrow.no-rule::before{ display:none; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; font-size:14px;
  padding:18px 30px; border-radius:999px;
  cursor:pointer; border:none; transition:transform .4s var(--ease), background .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease);
  white-space:nowrap;
}
.btn .arw{ transition:transform .4s var(--ease); }
.btn:hover .arw{ transform:translateX(5px); }
.btn-primary{ background:var(--accent); color:var(--ink); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 44px -16px var(--accent); }
.btn-ghost{ background:transparent; color:var(--cream); border:1.5px solid var(--hair); }
.btn-ghost:hover{ border-color:var(--cream); background:rgba(245,239,228,.06); }

/* ---------- image slots / art-direction notes ---------- */
image-slot{
  --slot-bg:#1d1710;
  display:block; width:100%; height:100%;
  background:
     repeating-linear-gradient(135deg, rgba(241,142,33,.05) 0 14px, transparent 14px 28px),
     var(--slot-bg);
  border:1px solid var(--hair);
  color:var(--faint);
  font-family:var(--body);
}
.media{ position:relative; overflow:hidden; }
.media .note{
  position:absolute; left:16px; bottom:16px; z-index:3;
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:11px; letter-spacing:.04em; line-height:1.45;
  color:var(--cream); background:rgba(22,17,12,.74);
  backdrop-filter:blur(8px);
  border:1px solid var(--hair); border-left:2px solid var(--accent);
  padding:9px 12px; max-width:min(360px,82%);
  border-radius:3px;
  transition:opacity .4s var(--ease);
}
.media .note b{ color:var(--accent); font-weight:600; letter-spacing:.12em; text-transform:uppercase; display:block; font-size:10px; margin-bottom:3px; }
body.hide-notes .media .note{ opacity:0; pointer-events:none; }

/* reveal animation */
[data-reveal]{ opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal-d="1"]{ transition-delay:.1s; }
[data-reveal-d="2"]{ transition-delay:.2s; }
[data-reveal-d="3"]{ transition-delay:.3s; }
[data-reveal-d="4"]{ transition-delay:.4s; }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; }
}