/* Marmalade JAMS — 2026 site
   Single committed visual world: night ground, paper evidence.
   Brand orange #F0701A taken from the corrected logo. */

:root{
  color-scheme: dark;

  --ink:      #0E0D0C;
  --ink-2:    #171512;
  --ink-3:    #211D19;
  --paper:    #F6F2EA;
  --paper-2:  #E7E0D3;

  --orange:   #F0701A;
  --orange-lift: #FF8A3D;
  --orange-deep: #C3540E;

  --text:     #EEE8DF;
  --muted:    #A79E92;      /* warm grey, biased toward the accent */
  --muted-2:  #7C736A;
  --line:     rgba(246,242,234,.13);
  --line-2:   rgba(246,242,234,.28);

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gut: clamp(18px, 5vw, 64px);
  --maxw: 1240px;
  --read: 62ch;
}

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:800;
  font-stretch:118%;
  line-height:.98;
  letter-spacing:-.018em;
  text-wrap:balance;
  margin:0;
}

p{ margin:0; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.read{ max-width:var(--read); }

:focus-visible{ outline:3px solid var(--orange-lift); outline-offset:3px; border-radius:2px; }

/* ---------- mono eyebrow ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--orange-lift);
  margin:0 0 18px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.eyebrow::before{
  content:""; width:26px; height:2px; background:var(--orange); flex:none;
}
.eyebrow--plain::before{ display:none; }

/* ---------- header ---------- */
.site-head{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:60;
  background:rgba(14,13,12,.9);
  backdrop-filter:saturate(1.3) blur(12px);
  border-bottom:1px solid var(--line);
}
.site-head__in{
  display:flex; align-items:center; gap:22px;
  min-height:70px;
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto; }
.brand img{ width:40px; height:40px; }
.brand b{
  font-family:var(--display); font-weight:800; font-stretch:118%;
  font-size:16px; letter-spacing:.005em; line-height:1;
}
.brand small{
  display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--muted-2); margin-top:4px;
}
.nav{ display:flex; align-items:center; gap:28px; }
.nav a{
  text-decoration:none; font-size:14.5px; font-weight:500; color:var(--text);
  padding:6px 0; border-bottom:2px solid transparent;
}
.nav a:hover{ border-bottom-color:var(--orange); }
.nav a[aria-current="page"]{ border-bottom-color:var(--orange); color:#fff; }
.nav a.ext::after{ content:"↗"; font-size:11px; margin-left:4px; color:var(--muted); }

.navtoggle{
  display:none; background:none; border:1px solid var(--line-2); color:var(--text);
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  padding:9px 13px; border-radius:2px; cursor:pointer;
}

@media (max-width:880px){
  .navtoggle{ display:block; }
  .nav{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--ink-2); border-bottom:1px solid var(--line);
    padding:8px var(--gut) 20px;
  }
  .nav a{ padding:14px 0; border-bottom:1px solid var(--line); }
  .nav a:hover{ border-bottom-color:var(--line); color:var(--orange-lift); }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--display); font-weight:700; font-stretch:112%;
  font-size:15px; letter-spacing:.005em;
  text-decoration:none; padding:15px 26px; border-radius:2px;
  border:2px solid var(--orange); background:var(--orange); color:#140B04;
  transition:transform .12s ease, background .16s ease;
}
.btn:hover{ background:var(--orange-lift); border-color:var(--orange-lift); transform:translateY(-1px); }
.btn--ghost{ background:transparent; color:var(--text); border-color:var(--line-2); }
.btn--ghost:hover{ background:transparent; border-color:var(--orange); color:var(--orange-lift); }
.btnrow{ display:flex; flex-wrap:wrap; gap:14px; }

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.hero__bg{
  position:absolute; inset:0;
  background:url("assets/img/flyer-wall-dark.jpg") center/cover no-repeat;
  opacity:.34; filter:saturate(.7);
}
.hero__veil{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 95% at 12% 8%, rgba(240,112,26,.30), transparent 58%),
    linear-gradient(180deg, rgba(14,13,12,.62) 0%, rgba(14,13,12,.90) 62%, var(--ink) 100%);
}
.hero__in{ position:relative; padding-block:clamp(56px, 11vw, 116px) clamp(40px, 7vw, 76px); }
.hero h1{
  font-size:clamp(40px, 8.4vw, 108px);
  font-weight:900; font-stretch:125%;
  letter-spacing:-.03em; line-height:.93;
  max-width:16ch;
  margin-bottom:26px;
}
.hero h1 em{ font-style:normal; color:var(--orange-lift); }
.hero__sub{ font-size:clamp(17px,2.1vw,21px); color:var(--text); max-width:56ch; margin-bottom:34px; }

/* ticket status strip — used once, on purpose */
.ticket{
  position:relative; margin-top:44px;
  background:var(--ink-2); border:1px solid var(--line-2);
  display:grid; grid-template-columns:auto 1fr; align-items:stretch;
}
.ticket__stub{
  background:var(--orange); color:#140B04;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:600;
  display:flex; align-items:center; justify-content:center; padding:0 18px;
  writing-mode:vertical-rl; transform:rotate(180deg);
  border-right:2px dashed rgba(20,11,4,.35);
}
.ticket__body{ padding:22px 26px; display:grid; gap:14px; }
.ticket__row{ display:flex; gap:14px; align-items:baseline; flex-wrap:wrap; }
.ticket__k{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted-2); min-width:118px;
}
.ticket__v{ font-size:15.5px; color:var(--text); }
.ticket__v b{ color:var(--orange-lift); font-weight:600; }
@media (max-width:620px){
  .ticket{ grid-template-columns:1fr; }
  .ticket__stub{ writing-mode:horizontal-tb; transform:none; padding:10px 16px; border-right:0; border-bottom:2px dashed rgba(20,11,4,.35); }
  .ticket__k{ min-width:0; display:block; }
}

/* ---------- sections ---------- */
.sec{ padding-block:clamp(56px, 9vw, 108px); border-bottom:1px solid var(--line); }
.sec--paper{ background:var(--paper); color:var(--ink); }
.sec--paper .eyebrow{ color:var(--orange-deep); }
.sec--paper .eyebrow::before{ background:var(--orange-deep); }
.sec--tight{ padding-block:clamp(40px,6vw,70px); }
.sec h2{ font-size:clamp(28px,4.6vw,54px); max-width:20ch; }
.sec__lead{ font-size:clamp(17px,1.9vw,20px); color:var(--muted); margin-top:20px; max-width:var(--read); }
.sec--paper .sec__lead{ color:#4A423A; }

.headrow{ display:grid; gap:24px; margin-bottom:46px; }
@media (min-width:900px){
  .headrow{ grid-template-columns:1.05fr .95fr; align-items:end; }
  .headrow .sec__lead{ margin-top:0; }
}

/* ---------- evidence cards (paper on night) ---------- */
.evidence{ display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.ev{
  background:var(--paper); color:var(--ink);
  padding:14px 14px 0; display:flex; flex-direction:column;
  box-shadow:0 18px 40px -22px rgba(0,0,0,.9);
}
.ev__img{
  aspect-ratio:4/5; display:grid; place-items:center; overflow:hidden;
  background:var(--paper-2);
}
.ev__img img{ max-width:100%; max-height:100%; width:auto; object-fit:contain; }
.ev--wide .ev__img{ aspect-ratio:16/9; }
.ev__cap{ margin-top:auto; }
.ev__cap{
  font-family:var(--mono); font-size:11px; line-height:1.55; color:#5A5048;
  padding:14px 2px 16px; border-top:1px solid rgba(14,13,12,.14); margin-top:14px;
}
.ev__cap b{ display:block; color:var(--ink); font-weight:600; letter-spacing:.04em; text-transform:uppercase; font-size:10.5px; margin-bottom:5px; }


/* ---------- feature band (one artefact, read closely) ---------- */
.feature{ display:grid; gap:34px; align-items:center; }
@media (min-width:920px){ .feature{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:58px; } }
.feature__obj{
  background:var(--paper); padding:14px;
  box-shadow:0 34px 70px -30px rgba(0,0,0,.95);
  transform:rotate(-1.4deg); max-width:460px; justify-self:center;
}
.feature__obj img{ width:100%; }
.feature h3{ font-size:clamp(24px,3.4vw,40px); }
.feature__p{ color:var(--muted); margin-top:18px; font-size:17px; }
.evidence--pair{ max-width:760px; }
@media (prefers-reduced-motion:reduce){ .feature__obj{ transform:none; } }

/* ---------- run sheet (real sequence, so numbered) ---------- */
.run{ display:grid; gap:0; border-top:1px solid var(--line); }
.sec--paper .run{ border-top-color:rgba(14,13,12,.16); }
.run__row{
  display:grid; gap:8px 28px; padding-block:26px;
  border-bottom:1px solid var(--line);
  grid-template-columns:auto 1fr;
}
.sec--paper .run__row{ border-bottom-color:rgba(14,13,12,.16); }
@media (min-width:860px){ .run__row{ grid-template-columns:84px 262px 1fr; align-items:baseline; } }
.run__n{
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--orange-deep);
  font-weight:600;
}
.sec:not(.sec--paper) .run__n{ color:var(--orange-lift); }
.run__t{ font-family:var(--display); font-weight:800; font-stretch:112%; font-size:20px; line-height:1.15; letter-spacing:-.01em; }
.run__d{ color:var(--muted); font-size:16px; }
.sec--paper .run__d{ color:#4A423A; }


/* ---------- pull quote band (used once, for Kye) ---------- */
.pull{ margin:0; max-width:28ch; }
.pull p{
  font-family:var(--display); font-weight:700; font-stretch:112%;
  font-size:clamp(25px,4vw,46px); line-height:1.16; letter-spacing:-.02em;
  color:#fff; text-wrap:balance;
}
.pull p + p{ margin-top:26px; color:var(--orange-lift); }
.pull__by{ margin-top:34px; max-width:52ch; color:var(--muted); font-size:16px; }
.pull__by b{ display:block; color:var(--text); font-weight:600; font-size:17px; margin-bottom:4px; }
.pull__src{ font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted-2); margin-top:16px; }
@media (min-width:980px){
  .pullgrid{ display:grid; grid-template-columns:1.25fr .75fr; gap:64px; align-items:end; }
  .pull{ max-width:none; }
}

/* ---------- doors ---------- */
.doors{ display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(262px,1fr)); }
.door{
  display:flex; flex-direction:column; gap:14px;
  padding:30px 28px 28px; text-decoration:none;
  background:var(--ink-2); border:1px solid var(--line);
  border-top:3px solid var(--orange);
  transition:background .18s ease, transform .18s ease;
}
.door:hover{ background:var(--ink-3); transform:translateY(-3px); }
.door h3{ font-size:25px; }
.door p{ color:var(--muted); font-size:15.5px; }
.door__go{
  margin-top:auto; padding-top:8px;
  font-family:var(--mono); font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--orange-lift);
}

/* ---------- alumni ---------- */
.alum{ display:grid; gap:34px; }
@media (min-width:880px){ .alum{ grid-template-columns:1fr 1fr; gap:48px; } }
.alum__q{
  font-family:var(--display); font-weight:700; font-stretch:108%;
  font-size:clamp(20px,2.5vw,27px); line-height:1.26; letter-spacing:-.015em;
  margin:0 0 20px;
}
.sec:not(.sec--paper) .alum__q{ color:#fff; }
.alum__by{ font-size:15px; color:var(--muted); border-left:2px solid var(--orange); padding-left:16px; }
.sec--paper .alum__by{ color:#4A423A; }
.alum__by b{ display:block; color:var(--text); font-weight:600; font-size:16px; }
.sec--paper .alum__by b{ color:var(--ink); }

/* ---------- notes / honesty block ---------- */
.note{
  border:1px solid var(--line-2); border-left:3px solid var(--orange);
  padding:26px 28px; background:var(--ink-2); display:grid; gap:14px;
}
.sec--paper .note{ background:#EFE9DD; border-color:rgba(14,13,12,.18); border-left-color:var(--orange-deep); }
.note h3{ font-size:21px; }

.facts{ display:grid; gap:0; margin-top:34px; }
.fact{ display:grid; gap:4px 24px; padding-block:16px; border-bottom:1px solid var(--line); }
.sec--paper .fact{ border-bottom-color:rgba(14,13,12,.16); }
@media (min-width:720px){ .fact{ grid-template-columns:210px 1fr; align-items:baseline; } }
.fact dt{ font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted-2); }
.fact dd{ margin:0; font-size:16.5px; }

/* ---------- checklist ---------- */
.checks{ list-style:none; padding:0; margin:0; display:grid; gap:16px; }
/* NB: position the tick absolutely rather than as a grid/flex item. A grid <li>
   wraps each bare text node in its own anonymous item, which pushed the text after
   a <b> label onto a second row in Chrome. */
.checks li{ position:relative; padding-left:30px; font-size:16.5px; line-height:1.62; }
.checks li::before{
  content:"✓"; position:absolute; left:0; top:0;
  color:var(--orange-lift); font-weight:700; font-family:var(--display); line-height:1.62;
}
.checks li b{ color:#fff; font-weight:600; }
.sec--paper .checks li::before{ color:var(--orange-deep); }
.sec--paper .checks li b{ color:var(--ink); }


/* ---------- download block ---------- */
.dl{
  display:grid; gap:7px; text-decoration:none; max-width:var(--read);
  border:1px solid var(--line-2); border-left:3px solid var(--orange);
  padding:24px 26px; background:var(--ink-2);
  transition:background .18s ease, transform .18s ease;
}
.dl:hover{ background:var(--ink-3); transform:translateY(-2px); }
.dl b{ font-family:var(--display); font-weight:800; font-stretch:112%; font-size:21px; letter-spacing:-.012em; }
.dl span{ color:var(--muted); font-size:15.5px; }
.dl em{
  font-style:normal; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--orange-lift); margin-top:6px;
}
.sec--paper .dl{ background:#EFE9DD; border-color:rgba(14,13,12,.18); border-left-color:var(--orange-deep); }
.sec--paper .dl:hover{ background:#E9E2D4; }
.sec--paper .dl span{ color:#4A423A; }
.sec--paper .dl em{ color:var(--orange-deep); }


/* ---------- legal pages ---------- */
.legal{ max-width:70ch; }
.legal h2{
  font-size:clamp(20px,2.6vw,27px); margin:44px 0 14px;
  padding-top:22px; border-top:1px solid rgba(14,13,12,.16);
  max-width:none; text-wrap:pretty;
}
.legal h2:first-of-type{ margin-top:0; border-top:0; padding-top:0; }
.legal h3{ font-size:18px; margin:26px 0 10px; max-width:none; text-wrap:pretty; }
.legal p{ margin:0 0 14px; color:#3C352E; font-size:16.5px; }
.legal ul{ margin:0 0 18px; padding-left:22px; color:#3C352E; font-size:16.5px; }
.legal li{ margin-bottom:7px; }
.legal a{ color:var(--orange-deep); font-weight:600; }
.legal dl{ margin:0 0 18px; display:grid; gap:10px; }
.legal dt{ font-weight:600; color:var(--ink); }
.legal dd{ margin:0 0 6px; color:#3C352E; }
.legal__meta{
  font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:#6B6158; margin-bottom:34px;
}
.legal__box{
  background:#EFE9DD; border-left:3px solid var(--orange-deep);
  padding:22px 24px; margin:0 0 26px;
}
.legal__box p:last-child{ margin-bottom:0; }

/* ---------- form ---------- */
/* The GoHighLevel form renders its own card on a white page background. We can't
   style inside a cross-origin iframe, so the iframe is capped at the card's own
   width — the white has nowhere left to show. Set the form background to
   transparent (or #171512) in GoHighLevel's styler and this becomes belt and braces. */
.formwrap{ background:none; border:0; padding:0; }
.ghl-frame{
  display:block; width:100%; max-width:720px; margin-inline:auto;
  border:none; border-radius:3px; color-scheme:dark;
  /* The form's own document is transparent, so an un-painted iframe falls back to
     white. Painting it here is what removes the white band. */
  background:var(--ink-2);
  min-height:600px;      /* measured: the form is 589px tall at this width */
}
@media (max-width:620px){ .ghl-frame{ min-height:780px; } }
.formwrap__alt{ max-width:720px; margin-inline:auto; }
.formwrap__alt{
  margin-top:20px; padding-top:18px; border-top:1px solid var(--line);
  font-size:15px; color:var(--muted);
}
.formwrap__alt a{ color:var(--orange-lift); font-weight:600; }

.ghl-slot{
  border:1px dashed var(--line-2); padding:28px; text-align:center;
  font-family:var(--mono); font-size:12px; line-height:1.9; color:var(--muted);
  letter-spacing:.04em;
}
.ghl-slot b{ display:block; color:var(--orange-lift); letter-spacing:.14em; text-transform:uppercase; margin-bottom:10px; font-size:11px; }

/* ---------- footer ---------- */
.site-foot{ background:var(--ink-2); padding-block:56px 40px; }
.foot__grid{ display:grid; gap:34px; }
@media (min-width:820px){ .foot__grid{ grid-template-columns:1.4fr 1fr 1fr; gap:48px; } }
.foot h4{ font-family:var(--mono); font-weight:600; font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted-2); margin:0 0 16px; }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.foot a{ text-decoration:none; font-size:15px; color:var(--text); }
.foot a:hover{ color:var(--orange-lift); }
.foot__blurb{ color:var(--muted); font-size:15px; max-width:40ch; margin-top:16px; }
.foot__base{
  margin-top:44px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2);
}

/* ---------- page header (inner pages) ---------- */
.phead{ position:relative; border-bottom:1px solid var(--line); overflow:hidden; }
.phead__bg{
  position:absolute; inset:0;
  background:url("assets/img/flyer-wall-dark.jpg") center 30%/cover no-repeat;
  opacity:.2;
}
.phead__veil{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,13,12,.7), var(--ink) 92%); }
.phead__in{ position:relative; padding-block:clamp(46px,7vw,84px) clamp(34px,5vw,58px); }
.phead h1{ font-size:clamp(34px,6.4vw,74px); font-weight:900; font-stretch:122%; letter-spacing:-.026em; max-width:17ch; }
.phead p{ margin-top:22px; font-size:clamp(17px,1.9vw,20px); color:var(--muted); max-width:58ch; }

.prose{ display:grid; gap:22px; max-width:var(--read); }
.prose h3{ font-size:24px; margin-top:14px; }
.prose p{ font-size:17px; }
.sec--paper .prose p{ color:#3C352E; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .door:hover,.btn:hover{ transform:none; }
}