/* ===========================================================
   Narrative Mastermind Invite
   Dark, video first. Vanilla CSS on purpose: this page gets
   rebuilt inside GHL and plain tokens translate without a build step.
   =========================================================== */

:root{
  --void:   #0B0A09;
  --night:  #131211;
  --line:   rgba(240,236,228,.13);
  --line-2: rgba(240,236,228,.28);
  --bone:   #F0ECE4;
  --ash:    #A49B8E;
  --ember:  #E8523C;
  --cream:  #F2EEE6;

  --shell: 1200px;
  --gut: 32px;

  --step--1: clamp(0.84rem, 0.81rem + 0.14vw, 0.92rem);
  --step-0:  clamp(1.0rem, 0.97rem + 0.2vw, 1.12rem);
  --step-1:  clamp(1.18rem, 1.1rem + 0.38vw, 1.38rem);
  --step-2:  clamp(1.55rem, 1.35rem + 0.95vw, 2.15rem);
  --step-3:  clamp(2.0rem, 1.62rem + 1.75vw, 3.1rem);
  --step-4:  clamp(2.5rem, 1.75rem + 3.4vw, 4.7rem);

  --band-y: clamp(72px, 8vw, 124px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--void); }

body{
  margin:0;
  -webkit-tap-highlight-color:rgba(232,82,60,.18);
  overflow-wrap:break-word;
  background:var(--void);
  color:var(--ash);
  font-family:"Archivo", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size:var(--step-0);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,iframe,video{ max-width:100%; }
ul{ margin:0; padding:0; list-style:none; }
blockquote{ margin:0; }

a{ color:var(--bone); text-decoration:none; border-bottom:1px solid rgba(232,82,60,.55); transition:color .2s ease, border-color .2s ease; }
a:hover{ color:var(--ember); border-bottom-color:var(--ember); }
:focus-visible{ outline:2px solid var(--ember); outline-offset:3px; }

/* ---------- grain ---------- */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.055; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.shell{ width:100%; max-width:var(--shell); margin:0 auto; padding-inline:var(--gut); }

/* ---------- type ---------- */
.display{
  font-family:"Instrument Serif", Georgia, serif;
  font-weight:400;
  font-size:var(--step-4);
  line-height:1.0;
  letter-spacing:-.012em;
  color:var(--bone);
  margin:0;
  max-width:18ch;
  text-wrap:balance;
}
.h2{
  font-family:"Instrument Serif", Georgia, serif;
  font-weight:400;
  font-size:var(--step-3);
  line-height:1.08;
  letter-spacing:-.008em;
  color:var(--bone);
  margin:0 0 32px;
  max-width:20ch;
  text-wrap:balance;
}
.h4{
  font-family:"Instrument Serif", Georgia, serif;
  font-weight:400;
  font-size:var(--step-1);
  line-height:1.22;
  color:var(--bone);
  margin:0 0 12px;
}
p{ margin:0 0 1.05em; max-width:62ch; }
p:last-child{ margin-bottom:0; }
.emph{ color:var(--bone); font-weight:500; }

/* ---------- hero ---------- */
.hero{ padding-top:clamp(48px,6vw,88px); padding-bottom:var(--band-y); }
.kicker{
  margin:0 0 18px;
  font-size:var(--step--1);
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ember);
}
.watch-cue{
  margin:clamp(32px,4vw,52px) 0 14px;
  font-size:var(--step--1);
  letter-spacing:.02em;
  color:var(--ash);
}
.hero .video-frame{ margin-top:clamp(30px,4vw,50px); }
.hero .deck{
  margin:30px 0 0;
  font-size:var(--step-1);
  line-height:1.48;
  color:var(--ash);
  max-width:60ch;
}
.hero .btn{ margin-top:30px; }
.footnote{
  margin-top:clamp(40px,5vw,64px);
  padding-top:24px;
  border-top:1px solid var(--line);
  font-size:var(--step--1);
  color:var(--ash);
  max-width:60ch;
}

/* ---------- video ---------- */
.video-frame{
  position:relative;
  aspect-ratio:16/9;
  background:var(--night);
  border:1px solid var(--line-2);
  border-radius:4px;
  overflow:hidden;
}
.video-frame iframe,
.video-frame .vsl{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
  background:var(--night);
}
.vsl{ object-fit:cover; }

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  background:var(--ember);
  color:#120A08;
  border:1px solid var(--ember);
  border-radius:4px;
  padding:16px 30px;
  font-size:var(--step-0);
  font-weight:600;
  letter-spacing:.004em;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s cubic-bezier(.25,.46,.45,.94);
}
.btn:hover{ background:var(--bone); border-color:var(--bone); color:var(--void); transform:translateY(-1px); }

/* ---------- bands ---------- */
.band{ padding-block:var(--band-y); border-top:1px solid var(--line); }

/* ---------- who this is for ---------- */
.forwho-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:clamp(28px,4vw,72px); align-items:start; }
.forwho-grid .h2{ margin-bottom:0; }
.for-list li{
  padding:18px 0;
  border-top:1px solid var(--line);
  font-size:var(--step-1);
  line-height:1.4;
  color:var(--bone);
}
.for-list li:first-child{ border-top:1px solid var(--line-2); }
.for-list li:last-child{ border-bottom:1px solid var(--line); }

/* ---------- days ---------- */
.days-title{ margin-bottom:clamp(36px,4vw,56px); }
.day{
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  gap:clamp(28px,4vw,72px);
  padding-block:clamp(36px,4vw,56px);
  border-top:1px solid var(--line-2);
}
.day-side{ position:sticky; top:32px; align-self:start; }
.day-name{
  font-family:"Instrument Serif", Georgia, serif;
  font-weight:400;
  font-size:var(--step-2);
  line-height:1.05;
  color:var(--bone);
  margin:0;
}
.day-tag{ margin:6px 0 0; font-size:var(--step-0); color:var(--ember); }
.day-out-label{ margin:30px 0 10px; font-size:var(--step--1); color:var(--ash); }
.day-out li{
  font-size:var(--step--1);
  color:var(--bone);
  padding:9px 0;
  border-top:1px solid var(--line);
}
.day-body p{ max-width:66ch; }

/* ---------- what changes for you ---------- */
.change{
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  gap:clamp(24px,4vw,72px);
  padding-block:clamp(30px,3.4vw,46px);
  border-top:1px solid var(--line);
}
.change:first-of-type{ border-top:1px solid var(--line-2); }
.change-head .h4{ margin:0; }
.change-body p{ max-width:64ch; }
.change-body blockquote{
  margin-top:22px;
  break-inside:avoid;
  padding:2px 0 2px 22px;
  border-left:2px solid var(--ember);
}
.change-body blockquote p{
  font-family:"Instrument Serif", Georgia, serif;
  font-size:var(--step-1);
  line-height:1.38;
  color:var(--bone);
  max-width:52ch;
  margin:0;
}
.change-body cite{
  display:block;
  margin-top:12px;
  font-family:"Archivo", sans-serif;
  font-style:normal;
  font-size:var(--step--1);
  color:var(--ash);
}
.proof-block{ margin-top:clamp(48px,6vw,80px); padding-top:34px; border-top:1px solid var(--line-2); }
.proof-title{ margin-bottom:22px; }
.proof-video{ max-width:960px; }

/* ---------- what you keep ---------- */
.keep-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); border-top:1px solid var(--line-2); }
.keep-item{ padding:32px clamp(20px,3vw,48px) 32px 0; border-bottom:1px solid var(--line); }
.keep-item:nth-child(even){ padding-left:clamp(20px,3vw,48px); padding-right:0; border-left:1px solid var(--line); }
.keep-item p{ font-size:var(--step--1); max-width:50ch; }

/* ---------- price ---------- */
.price{ background:var(--night); }
.price-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:clamp(28px,4vw,72px); align-items:start; }
.price-figure{
  font-family:"Instrument Serif", Georgia, serif;
  font-size:clamp(3.6rem, 8vw, 6.4rem);
  line-height:.9;
  letter-spacing:-.02em;
  color:var(--bone);
  margin:0;
}
.price-label{ margin-top:18px; font-size:var(--step-0); color:var(--ash); max-width:24ch; }
.price-body .btn{ margin-top:30px; }

/* ---------- after / logistics strip ---------- */
.fit-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(24px,3vw,64px); }
.fit-col{ padding-top:24px; border-top:1px solid var(--line-2); }
.fit-col p{ font-size:var(--step--1); max-width:44ch; }

/* ---------- close ---------- */
.close{ background:var(--cream); color:#2A251E; padding-block:clamp(88px,10vw,150px); }
.close-display{
  font-family:"Instrument Serif", Georgia, serif;
  font-weight:400;
  font-size:var(--step-4);
  line-height:1.02;
  letter-spacing:-.012em;
  color:#141210;
  margin:0;
  max-width:17ch;
  text-wrap:balance;
}
.close-line{ margin-top:26px; font-size:var(--step-1); color:#5B5348; max-width:42ch; }
.close-fine{ margin-top:16px; font-size:var(--step--1); color:#6E6659; }
/* text links inside the close section only. .btn keeps its own colors. */
.close a:not(.btn){ color:#141210; border-bottom-color:rgba(169,59,42,.5); }
.btn-dark{
  margin-top:36px;
  background:var(--void);
  border-color:var(--void);
  color:var(--cream);
}
.btn-dark:hover{ background:var(--ember); border-color:var(--ember); color:#120A08; }
.sign{ margin-top:clamp(56px,7vw,92px); padding-top:26px; border-top:1px solid rgba(20,18,16,.18); }
.sign-name{ font-family:"Instrument Serif", Georgia, serif; font-size:var(--step-1); color:#141210; margin:0; }
.sign-role{ margin:6px 0 0; font-size:var(--step--1); color:#6E6659; }
.sign-off{ margin:18px 0 0; font-family:"Instrument Serif", Georgia, serif; font-size:var(--step-1); color:#141210; }

/* ---------- footer ---------- */
.foot{ background:var(--void); padding-block:32px; }
.foot-inner{ display:flex; flex-wrap:wrap; gap:16px 34px; align-items:center; justify-content:space-between; }
.wordmark{ font-family:"Instrument Serif", Georgia, serif; font-size:1.16rem; color:var(--bone); }
.foot-nav a{ font-size:var(--step--1); color:var(--ash); border-bottom-color:rgba(240,236,228,.2); }
.foot-nav a:hover{ color:var(--bone); border-bottom-color:var(--bone); }
.foot-legal{ font-size:var(--step--1); color:var(--ash); }

/* ---------- reveal ---------- */
.rv{ opacity:0; transform:translateY(14px); transition:opacity .65s ease, transform .65s cubic-bezier(.22,.61,.36,1); }
.rv.in{ opacity:1; transform:none; }

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .forwho-grid,.price-grid{ grid-template-columns:1fr; }
  .day,.change{ grid-template-columns:1fr; gap:20px; }
  .day-side{ position:static; }
  .fit-grid{ grid-template-columns:1fr; gap:26px; }
}

@media (max-width:720px){
  :root{ --gut:20px; --band-y:64px; }
  body{ line-height:1.58; }
  .keep-grid{ grid-template-columns:1fr; }
  .keep-item,.keep-item:nth-child(even){ padding-left:0; padding-right:0; border-left:0; }
  .h2,.display,.close-display{ max-width:none; }
  .btn{ display:block; text-align:center; padding:18px 24px; }
  .for-list li{ font-size:var(--step-0); padding:16px 0; }
  .change-body blockquote{ padding-left:16px; }
  .change-body blockquote p{ font-size:var(--step-0); }
  .price-figure{ font-size:clamp(3rem,15vw,4rem); }
  .foot-inner{ flex-direction:column; align-items:flex-start; gap:12px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .rv{ opacity:1; transform:none; transition:none; }
  .btn:hover{ transform:none; }
}