/* ==========================================================================
   HAPI — Design System / Base
   Tokens, reset, typography, texture, primitives
   ========================================================================== */

:root{
  /* Surface */
  --ivory:        #FAF8F3;
  --ivory-deep:   #F4EFE4;
  --ivory-warm:   #F7F1E4;
  --paper:        #FFFDF9;

  /* Ink */
  --ink:          #16110A;
  --ink-soft:     #2B2118;
  --muted:        #6E6355;
  --muted-2:      #8B8071;
  --hairline:     rgba(22,17,10,.09);
  --hairline-2:   rgba(22,17,10,.055);

  /* Honey */
  --honey:        #E39A12;
  --honey-lit:    #F5B940;
  --honey-deep:   #B9720A;
  --amber:        #D2811A;
  --glow:         rgba(232,163,32,.35);

  /* Dark stage */
  --stage:        #0C0906;
  --stage-2:      #14100A;
  --stage-line:   rgba(255,236,201,.10);
  --stage-ink:    #F6EFE2;
  --stage-muted:  #A29683;

  /* Type */
  --sans: "Inter Tight","Inter",-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Helvetica,Arial,sans-serif;
  --mono: "SF Mono",ui-monospace,"JetBrains Mono","Roboto Mono",Menlo,monospace;

  /* Rhythm */
  --gut: clamp(20px, 4.2vw, 40px);
  --maxw: 1240px;
  --sect: clamp(96px, 13vw, 200px);

  /* Motion */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-io:   cubic-bezier(.65,0,.35,1);

  /* Elevation */
  --e1: 0 1px 2px rgba(22,17,10,.04), 0 2px 8px rgba(22,17,10,.03);
  --e2: 0 2px 6px rgba(22,17,10,.05), 0 12px 32px rgba(22,17,10,.06);
  --e3: 0 4px 12px rgba(22,17,10,.06), 0 24px 60px rgba(22,17,10,.09);
  --e4: 0 30px 90px rgba(44,29,10,.18), 0 8px 26px rgba(44,29,10,.10);
}

*,*::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(--ivory);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  font-feature-settings:"cv02","cv03","cv04","ss01";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

img,svg,canvas{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }

::selection{ background:rgba(227,154,18,.24); color:var(--ink); }

/* ---------- Film grain + paper tooth (global, non-interactive) ---------- */
.grain{
  position:fixed; inset:-120%;
  pointer-events:none; z-index:9000;
  opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
  animation:grainshift 7s steps(6) infinite;
  will-change:transform;
}
@keyframes grainshift{
  0%{transform:translate(0,0)} 16%{transform:translate(-3%,2%)} 33%{transform:translate(2%,-3%)}
  50%{transform:translate(-2%,-2%)} 66%{transform:translate(3%,1%)} 83%{transform:translate(-1%,3%)} 100%{transform:translate(0,0)}
}
@media (prefers-reduced-motion: reduce){ .grain{ animation:none; } }

/* ---------- Layout primitives ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.wrap-wide{ max-width:1440px; }
.wrap-tight{ max-width:920px; }
.section{ position:relative; padding-block:var(--sect); }
.center{ text-align:center; }

/* ---------- Typography scale ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--honey-deep);
}
.eyebrow::before{
  content:""; width:18px; height:1px; background:currentColor; opacity:.5;
}
.eyebrow.is-plain::before{ display:none; }

h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.03em; line-height:1.02; }

.display{
  font-size:clamp(44px, 8.2vw, 108px);
  font-weight:600;
  letter-spacing:-.045em;
  line-height:.95;
}
.h2{
  font-size:clamp(32px, 5.2vw, 64px);
  letter-spacing:-.038em;
  line-height:1.02;
}
.h3{
  font-size:clamp(24px, 3vw, 38px);
  letter-spacing:-.03em;
  line-height:1.08;
}
.h4{ font-size:clamp(18px,2vw,22px); letter-spacing:-.02em; }

.lede{
  font-size:clamp(16.5px, 1.55vw, 20px);
  line-height:1.62;
  color:var(--muted);
  font-weight:400;
  letter-spacing:-.011em;
  max-width:56ch;
}
.small{ font-size:13.5px; color:var(--muted-2); letter-spacing:-.005em; }

.grad-ink{
  background:linear-gradient(176deg,#1B1409 8%, #4A3618 62%, var(--honey-deep) 130%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.gold-word{
  background:linear-gradient(100deg,#C87F09,#F2B53F 45%,#B9720A);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  height:52px; padding:0 26px; border-radius:100px;
  font-size:15px; font-weight:550; letter-spacing:-.012em;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  will-change:transform;
  isolation:isolate; overflow:hidden;
}
.btn > *{ position:relative; z-index:2; }
.btn-sm{ height:40px; padding:0 18px; font-size:14px; }
.btn-lg{ height:62px; padding:0 36px; font-size:17px; }

.btn-primary{
  background:linear-gradient(180deg,#F0AC28,#D5850C);
  color:#2A1B05;
  box-shadow:0 1px 0 rgba(255,255,255,.42) inset, 0 -1px 0 rgba(120,70,0,.28) inset,
             0 10px 26px rgba(197,124,8,.30), 0 2px 6px rgba(120,70,0,.18);
}
.btn-primary::after{ /* sheen */
  content:""; position:absolute; inset:0; z-index:1; border-radius:inherit;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 46%,transparent 62%);
  transform:translateX(-120%); transition:transform .9s var(--ease-out);
}
.btn-primary:hover::after{ transform:translateX(120%); }
.btn-primary:hover{ box-shadow:0 1px 0 rgba(255,255,255,.45) inset, 0 14px 36px rgba(197,124,8,.40), 0 3px 8px rgba(120,70,0,.2); }

.btn-ghost{
  background:rgba(255,255,255,.55);
  border-color:var(--hairline);
  color:var(--ink);
  backdrop-filter:blur(12px) saturate(140%); -webkit-backdrop-filter:blur(12px) saturate(140%);
  box-shadow:var(--e1);
}
.btn-ghost:hover{ background:#fff; border-color:rgba(22,17,10,.16); box-shadow:var(--e2); }

.btn-dark{ background:var(--ink); color:#FBF6EC; }
.btn-dark:hover{ background:#291E12; }

.btn-onstage{
  background:rgba(255,255,255,.06); color:var(--stage-ink);
  border-color:var(--stage-line);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.btn-onstage:hover{ background:rgba(255,255,255,.12); }

.btn:focus-visible{ outline:2px solid var(--honey); outline-offset:3px; }

/* ---------- Hairline dividers ---------- */
.rule{ height:1px; background:var(--hairline-2); border:0; margin:0; }
.rule-fade{
  height:1px; border:0; margin:0;
  background:linear-gradient(90deg,transparent,var(--hairline),transparent);
}

/* ---------- Glass card ---------- */
.glass{
  background:linear-gradient(150deg, rgba(255,255,255,.86), rgba(255,255,255,.58));
  border:1px solid rgba(255,255,255,.75);
  box-shadow:var(--e2), 0 1px 0 rgba(255,255,255,.9) inset;
  backdrop-filter:blur(22px) saturate(150%); -webkit-backdrop-filter:blur(22px) saturate(150%);
  border-radius:22px;
}

/* ---------- Scroll reveal ---------- */
[data-rise]{
  opacity:0;
  transform:translate3d(0,26px,0);
  transition:opacity 1.05s var(--ease-out), transform 1.05s var(--ease-out);
  transition-delay:var(--d,0ms);
  will-change:opacity,transform;
}
[data-rise].in{ opacity:1; transform:none; }

[data-blur-in]{
  opacity:0; filter:blur(14px); transform:scale(.985) translate3d(0,18px,0);
  transition:opacity 1.2s var(--ease-out), filter 1.2s var(--ease-out), transform 1.2s var(--ease-out);
  transition-delay:var(--d,0ms);
}
[data-blur-in].in{ opacity:1; filter:blur(0); transform:none; }

/* word-by-word headline
   NOTE: a transformed child cannot inherit a parent's background-clip:text,
   so split headlines carry the gradient on each word instead. */
.line{ display:block; overflow:hidden; padding-bottom:.12em; margin-bottom:-.12em; }
.word{
  display:inline-block;
  transform:translate3d(0,105%,0) rotate(2.2deg);
  transition:transform 1.15s var(--ease-out);
  transition-delay:var(--d,0ms);
  will-change:transform;
}
.grad-ink .word{
  background:linear-gradient(172deg,#1B1409 0%, #402F14 62%, #6A4A17 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.in .word, .word.in{ transform:none; }

@media (prefers-reduced-motion: reduce){
  [data-rise],[data-blur-in],.word{ opacity:1 !important; filter:none !important; transform:none !important; transition:none !important; }
}

/* ---------- Material-symbols-ish inline icon sizing ---------- */
.ico{ width:22px; height:22px; flex:none; stroke-width:1.6; }
.ico-lg{ width:26px; height:26px; }