/* ───────────────────────────────────────────────────────────────────────
   CHAOS MARKETING ACADEMY — House Spec
   Ink on warm paper. One spark of ember gold. Montserrat + Spectral.
   The book come to life: silhouette figures, the dancing star, ledger-grid.
   ─────────────────────────────────────────────────────────────────────── */

:root{
  --paper:#FAF7F0;        /* warm paper-white */
  --panel:#F1EFE8;        /* faint warm panel  */
  --ink:#1A1A1A;          /* ink black         */
  --ink-soft:#2C2A27;
  --gray:#6B6862;         /* warm neutral gray */
  --gray-2:#928E86;
  --hair:#D8D4C8;         /* hairline rules    */
  --grid:rgba(107,104,98,.42);   /* ledger-grid     */
  --accent:#B07A1E;       /* ember gold (overridden by accent.js) */
  --accent-soft:rgba(176,122,30,.14);

  --serif:'Spectral',Georgia,'Times New Roman',serif;
  --sans:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --col:680px;            /* reading column */
  --pad:clamp(20px,5vw,80px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:19px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-variant-ligatures:common-ligatures;
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

img{max-width:100%;display:block;}
a{color:inherit;}
::selection{ background:var(--accent-soft); }

/* ── Type ─────────────────────────────────────────────────────────────── */
h1,h2,h3,h4,.u-sans{font-family:var(--sans);}
h1,h2,h3,h4{ color:var(--ink); font-weight:600; letter-spacing:-.015em; line-height:1.05; margin:0; text-wrap:balance; }
.display{ font-weight:700; font-size:clamp(40px,7vw,84px); letter-spacing:-.03em; line-height:.98; }
.h2{ font-size:clamp(28px,4vw,46px); letter-spacing:-.02em; }
.h3{ font-size:clamp(19px,2.2vw,23px); font-weight:600; letter-spacing:-.01em; }
.lead{ font-family:var(--serif); font-size:clamp(20px,2.4vw,26px); line-height:1.45; color:var(--ink-soft); }
.serif{font-family:var(--serif);}
p{ margin:0 0 1em; }
.measure{ max-width:var(--col); }

.eyebrow{
  font-family:var(--sans); font-weight:600; font-size:13px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gray);
  display:inline-flex; align-items:center; gap:.6em; margin:0;
}
.eyebrow .ic-star{ width:15px; height:15px; color:var(--accent); }

.brandline{ font-family:var(--sans); font-weight:700; letter-spacing:-.01em; }

/* ── Layout ───────────────────────────────────────────────────────────── */
.wrap{ max-width:1180px; margin:0 auto; padding-inline:var(--pad); }
.section{ padding-block:clamp(64px,10vw,120px); position:relative; }
.section--panel{ background:var(--panel); }
.air{ height:clamp(40px,8vw,90px); }
.hr{ border:0; border-top:1px solid var(--hair); margin:0; }

/* ── Ledger-grid texture ──────────────────────────────────────────────── */
.ledger{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:repeating-linear-gradient(to bottom,
     transparent 0, transparent 37px, var(--grid) 37px, var(--grid) 38.2px);
  -webkit-mask:repeating-linear-gradient(to right,#000 0 13px, transparent 13px 22px);
          mask:repeating-linear-gradient(to right,#000 0 13px, transparent 13px 22px);
  opacity:.9;
}
.ledger--fade{ -webkit-mask:
     repeating-linear-gradient(to right,#000 0 13px, transparent 13px 22px),
     linear-gradient(to bottom,#000,transparent);
   -webkit-mask-composite:source-in; mask-composite:intersect; }
.section>.wrap{ position:relative; z-index:1; }

/* ── Star icon ────────────────────────────────────────────────────────── */
.ic-star{ display:inline-block; color:var(--accent); }
.ic-star use{ fill:currentColor; }
.ic-ink{ color:var(--ink); }

/* premium seal */
.seal{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--sans); font-weight:600; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
}
.seal .ic-star{ width:18px; height:18px; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn{
  --bg:var(--ink); --fg:var(--paper);
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--sans); font-weight:600; font-size:15px; letter-spacing:.01em;
  background:var(--bg); color:var(--fg); border:1.5px solid var(--ink);
  padding:15px 26px; min-height:52px; border-radius:0; cursor:pointer;
  text-decoration:none; position:relative; transition:transform .25s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.btn .spark{ width:0; height:2px; background:var(--accent); transition:width .3s var(--ease); }
.btn:hover{ transform:translateY(-2px); }
.btn:hover .spark{ width:18px; }
.btn:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }
.btn--ghost{ --bg:transparent; --fg:var(--ink); }
.btn--ghost:hover{ background:var(--ink); --fg:var(--paper); }
.btn--sm{ padding:11px 18px; min-height:44px; font-size:14px; }
.btn--lg{ padding:18px 34px; min-height:60px; font-size:16px; }

/* link with gold underline */
.link{ color:var(--ink); text-decoration:none; font-family:var(--sans); font-weight:600;
  font-size:14px; letter-spacing:.02em; display:inline-flex; align-items:center; gap:.45em;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-size:0% 2px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .3s var(--ease); padding-bottom:2px;
}
.link:hover{ background-size:100% 2px; }
.link .arr{ transition:transform .3s var(--ease); }
.link:hover .arr{ transform:translateX(4px); }

/* ── Site nav ─────────────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:40; background:rgba(250,247,240,.86);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hair);
}
.nav__in{ max-width:1180px; margin:0 auto; padding:14px var(--pad);
  display:flex; align-items:center; gap:24px; }
.brand{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); }
.brand .ic-star{ width:26px; height:26px; color:var(--ink); }
.brand b{ font-family:var(--sans); font-weight:700; font-size:15px; letter-spacing:.02em; }
.brand small{ display:block; font-family:var(--sans); font-weight:500; font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gray); margin-top:1px; }
.nav__links{ margin-left:auto; display:flex; align-items:center; gap:26px; }
.nav__links a:not(.btn){ font-family:var(--sans); font-weight:600; font-size:14px;
  text-decoration:none; color:var(--ink); opacity:.78; transition:opacity .2s; }
.nav__links a:not(.btn):hover{ opacity:1; }
@media (max-width:720px){
  .nav__links a:not(.btn){ display:none; }
}

/* ── Cards ────────────────────────────────────────────────────────────── */
.card{
  background:var(--paper); border:1px solid var(--hair); padding:0;
  display:flex; flex-direction:column; position:relative;
  transition:transform .3s var(--ease), border-color .3s;
}
.card__art{ aspect-ratio:4/3; background:var(--panel); border-bottom:1px solid var(--hair);
  display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; }
.card__body{ padding:24px 24px 26px; display:flex; flex-direction:column; gap:8px; flex:1; }
.card__body .h3{ margin-top:2px; }
.card__desc{ font-family:var(--serif); color:var(--gray); font-size:17px; line-height:1.5; flex:1; }
.card__foot{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; }
a.card{ text-decoration:none; color:inherit; }
a.card:hover{ transform:translateY(-4px); border-color:var(--ink); }

.tag{ font-family:var(--sans); font-weight:600; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gray); }
.tag--free{ color:var(--ink); }
.price{ font-family:var(--sans); font-weight:700; font-size:18px; color:var(--ink); }

/* ── Forms ────────────────────────────────────────────────────────────── */
.field{ position:relative; display:flex; align-items:center; gap:10px;
  border-bottom:1.5px solid var(--ink); }
.field input{ flex:1; font-family:var(--sans); font-size:16px; color:var(--ink);
  background:transparent; border:0; outline:none; padding:12px 2px; min-height:44px; }
.field input::placeholder{ color:var(--gray-2); }
.field::after{ content:""; position:absolute; left:0; bottom:-1.5px; height:2px; width:0;
  background:var(--accent); transition:width .3s var(--ease); }
.field:focus-within::after{ width:100%; }
.field .btn{ flex:none; }

/* ── Integration slot ─────────────────────────────────────────────────── */
.slot{
  border:1.5px dashed var(--gray-2); background:var(--panel);
  padding:28px; display:flex; flex-direction:column; gap:6px; align-items:flex-start;
  font-family:var(--sans);
}
.slot__label{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gray); }

/* ── Quote block ──────────────────────────────────────────────────────── */
.quote{ font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(24px,3.4vw,40px); line-height:1.3; color:var(--ink); letter-spacing:-.01em; }
.quote__by{ display:flex; align-items:center; gap:12px; margin-top:22px;
  font-family:var(--sans); font-weight:600; font-size:14px; letter-spacing:.02em; color:var(--gray); font-style:normal; }
.quote__by .ic-star{ width:20px; height:20px; color:var(--accent); flex:none; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.foot{ background:var(--ink); color:var(--paper); padding-block:clamp(54px,8vw,90px); }
.foot a{ color:var(--paper); }
.foot .brand b,.foot .brand small{ color:var(--paper); }
.foot .brand .ic-star{ color:var(--paper); }
.foot__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
.foot__col h4{ color:var(--paper); font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; opacity:.6; margin-bottom:16px; }
.foot__col a{ display:block; text-decoration:none; font-family:var(--sans); font-size:15px;
  opacity:.85; padding:5px 0; transition:opacity .2s; }
.foot__col a:hover{ opacity:1; }
.foot .field{ border-color:rgba(250,247,240,.5); }
.foot .field input{ color:var(--paper); }
.foot .field input::placeholder{ color:rgba(250,247,240,.5); }
.foot__bottom{ margin-top:48px; padding-top:24px; border-top:1px solid rgba(250,247,240,.16);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-family:var(--sans); font-size:13px; opacity:.6; }
@media (max-width:760px){ .foot__grid{ grid-template-columns:1fr; gap:30px; } }

/* ── Utility ──────────────────────────────────────────────────────────── */
.stack{ display:flex; flex-direction:column; }
.row{ display:flex; }
.center{ align-items:center; }
.between{ justify-content:space-between; }
.wrapf{ flex-wrap:wrap; }
.gap-s{ gap:12px; } .gap-m{ gap:20px; } .gap-l{ gap:32px; }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid2{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
@media (max-width:860px){ .grid3{ grid-template-columns:1fr; } .grid2{ grid-template-columns:1fr; } }
.muted{ color:var(--gray); }
.tnum{ font-variant-numeric:tabular-nums; }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }