/* Fonts are self-hosted, not pulled from Google. Three reasons: the wordmark
   is the single biggest thing on the page and a font swap on it looks broken;
   it removes a third-party request from page load, which keeps the consent
   question about the form embed and nothing else; and it is the only way the
   build can actually be screenshotted and checked. 104KB for the six files. */
@font-face{font-family:'Anton';src:url('/assets/fonts/anton-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('/assets/fonts/archivo-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('/assets/fonts/archivo-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('/assets/fonts/archivo-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('/assets/fonts/archivo-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('/assets/fonts/archivo-latin-800-normal.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}

:root{
  --ink:#16130F; --red:#E01F29; --red-d:#B0121A;
  --grey:#6E6A66; --line:#E7E3DE; --soft:#F7F5F2; --paper:#FFFFFF;
  --pad:clamp(60px,7.5vw,96px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 17px/1.65 'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}

/* ---------- layout ---------- */
.w{max-width:1140px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px;margin-left:auto;margin-right:auto}
/* A section intro that has full-width content under it stays flush with the
   container's left edge. .narrow centres, which leaves the heading indented
   and the cards below it flush, and the mismatch reads as a mistake. */
.intro{max-width:720px}
section{padding:var(--pad) 0}
.center{text-align:center}
.soft{background:var(--soft)}
.band-ink{background:var(--ink);color:#fff}
.band-ink .lead,.band-ink p{color:#D9D5D0}
.band-ink h2,.band-ink h3{color:#fff}

/* ---------- type ---------- */
h1,h2,h3{margin:0;letter-spacing:-.02em;line-height:1.05;font-weight:800}
h2{font-size:clamp(30px,4vw,48px)}
h3{font-size:clamp(20px,2.2vw,26px);letter-spacing:-.01em}
p{margin:0 0 18px}
.lead{font-size:clamp(17px,1.35vw,19.5px);line-height:1.7;color:#33302C;text-wrap:pretty}
.band-ink .lead{color:#D9D5D0}
.eyebrow{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red);
}
.band-ink .eyebrow{color:#FF6069}
.grey .eyebrow{color:var(--grey)}
.pull{
  font-size:clamp(21px,2.5vw,30px);font-weight:700;line-height:1.25;
  letter-spacing:-.02em;text-wrap:balance;margin:0 0 18px;
}
.note{font-size:14.5px;color:var(--grey);line-height:1.7}
.band-ink .note{color:#8E8983}

/* the wordmark. Anton, skewed to echo the poster's compressed italic. */
.wordmark{
  font-family:'Anton',Impact,sans-serif;font-weight:400;
  font-size:clamp(56px,11.5vw,132px);line-height:.86;
  letter-spacing:-.005em;text-transform:uppercase;
  transform:skewX(-7deg);transform-origin:left bottom;
  margin:0 0 4px;
}
.tagline{
  color:var(--red);font-weight:800;text-transform:uppercase;
  font-size:clamp(15px,1.9vw,23px);letter-spacing:.04em;margin:14px 0 0;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;padding:17px 30px;border:2px solid var(--ink);
  background:none;color:var(--ink);text-decoration:none;border-radius:2px;
  font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;
  transition:background .15s,color .15s,border-color .15s;cursor:pointer;
}
.btn:hover{background:var(--ink);color:#fff}
/* Buttons are INK, not red. Andy, 6 Sep 2026, and he was right.
   In this film's world red IS the drink: the spill, the shattered glass, the
   thing being broken. So a red button asks people to click the problem, while
   the line directly above it says Everything to gain. Red stays where it means
   something: the artwork, the eyebrows, the tagline, the play button.
   Checked against the field first. The Social Dilemma's primary CTA is white on
   near black, Kiss the Ground the same, The Game Changers barely styles its
   buttons at all. Not one of them puts a brand colour in a button, because the
   imagery has to carry the feeling and a loud button competes with it. */
.btn-primary{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-primary:hover{background:#000;border-color:#000;color:#fff}
.btn-big{padding:20px 40px;font-size:16.5px}
.band-ink .btn{border-color:#fff;color:#fff}
.band-ink .btn:hover{background:#fff;color:var(--ink)}
/* An ink button is invisible on an ink band, so it inverts. */
.band-ink .btn-primary{background:#fff;border-color:#fff;color:var(--ink)}
.band-ink .btn-primary:hover{background:#E8E4DF;border-color:#E8E4DF;color:var(--ink)}
.btnrow{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap}
.center .btnrow{justify-content:center}
.undernote{margin-top:16px;font-size:14.5px;color:var(--grey)}
/* the quiet second door. Plain text, never a competing button. */
.altdoor{margin-top:22px;font-size:15px;color:var(--grey)}
.altdoor a{color:var(--ink);text-underline-offset:3px}

/* ---------- header ---------- */
header.site{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--line);
}
header.site .in{
  max-width:1140px;margin:0 auto;padding:0 24px;height:64px;
  display:flex;align-items:center;gap:26px;
}
.brand{
  font-family:'Anton',Impact,sans-serif;font-size:23px;text-transform:uppercase;
  text-decoration:none;transform:skewX(-7deg);letter-spacing:.01em;white-space:nowrap;
}
header.site nav{display:flex;gap:24px;margin-left:auto}
header.site nav a{
  text-decoration:none;font-size:14.5px;font-weight:600;color:#4A4641;
  text-underline-offset:5px;
}
header.site nav a:hover{color:var(--ink);text-decoration:underline}
header.site .cta{margin-left:22px;padding:11px 20px;font-size:13px}
@media(max-width:860px){
  header.site nav{display:none}
  header.site .cta{margin-left:auto}
}

/* ---------- hero ----------
   The trailer sits IN the hero, not a section below it. Every documentary site
   worth copying leads with the film itself; the old hero led with a still and
   asked for money before anyone had seen a frame. */
.hero{padding:clamp(26px,3.5vw,48px) 0 clamp(34px,4vw,56px);text-align:center}
.hero .w{max-width:900px}
/* One line now, and centred, so it needs a smaller ceiling than the old
   stacked two-line version or GOING DRY runs off the container. */
.hero .wordmark{transform-origin:center bottom;text-align:center;font-size:clamp(44px,8.4vw,104px)}
.hero .lead{margin-left:auto;margin-right:auto;max-width:52ch}
.hero .trailer{margin-top:34px}
.hero .btnrow{justify-content:center}

/* the date strip under the hero ask */
.when{
  display:flex;gap:26px;flex-wrap:wrap;margin-top:26px;justify-content:center;
  padding-top:22px;border-top:1px solid var(--line);
}
.when div{min-width:132px}
.when b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.01em}
.when span{display:block;font-size:13px;color:var(--grey);margin-top:2px}

/* ---------- trailer ---------- */
.trailer{
  display:block;width:100%;position:relative;padding:0;border:0;cursor:pointer;
  background:var(--ink);border-radius:3px;overflow:hidden;aspect-ratio:16/9;
}
.trailer img{width:100%;height:100%;object-fit:cover;opacity:.86;transition:opacity .2s,transform .4s}
.trailer:hover img{opacity:1;transform:scale(1.02)}
.trailer iframe{width:100%;height:100%;border:0;display:block}
.trailer .play{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;color:#fff;
}
.trailer .play i{
  width:76px;height:76px;border-radius:50%;background:var(--red);
  display:block;position:relative;transition:transform .2s;
}
.trailer:hover .play i{transform:scale(1.08)}
.trailer .play i:after{
  content:"";position:absolute;left:calc(50% - 8px);top:50%;transform:translateY(-50%);
  border-left:22px solid #fff;border-top:14px solid transparent;border-bottom:14px solid transparent;
}
.trailer .play span{
  font-weight:700;font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  text-shadow:0 1px 14px rgba(0,0,0,.5);
}

/* ---------- proof strip ----------
   A stranger had nothing to trust before the ask: no laurels, no press, no
   names, until the very bottom of the page. This is that, one quiet line,
   directly under the hero where it does some work. */
.proof{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0}
.proof .w{display:flex;gap:14px 46px;flex-wrap:wrap;justify-content:center;align-items:baseline}
.proof div{text-align:center}
.proof b{
  display:block;font:700 10.5px/1 'Archivo',sans-serif;letter-spacing:.18em;
  text-transform:uppercase;color:var(--red);margin-bottom:7px;
}
.proof span{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.proof i{display:block;font-style:normal;font-size:13px;color:var(--grey);font-weight:400;margin-top:2px}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,64px);align-items:center}
.split .pic img{width:100%;border-radius:3px}
@media(max-width:820px){.split{grid-template-columns:1fr}.split .pic{order:-1}}
.flip .pic{order:-1}
@media(max-width:820px){.flip .pic{order:-1}}

/* ---------- who is in it ---------- */
/* Fixed at three columns, not auto-fit. Six names in an auto-fit grid gives
   five across and one orphan on its own row beside a large empty cell. */
.names{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:2px;margin-top:40px;background:var(--line);border:1px solid var(--line);
}
@media(max-width:820px){.names{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.names{grid-template-columns:1fr}}
.names div{background:var(--paper);padding:28px 24px}
.band-ink .names{background:#2A2622;border-color:#2A2622}
.band-ink .names div{background:var(--ink)}
.names b{display:block;font-size:19px;font-weight:800;letter-spacing:-.02em}
.names span{display:block;font-size:13.5px;color:var(--grey);margin-top:7px;line-height:1.55}
.band-ink .names span{color:#948E88}

/* ---------- the six ---------- */
.six{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px}
@media(max-width:980px){.six{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.six{grid-template-columns:1fr}}
.six figure{margin:0}
.six img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:3px}
.six b{display:block;margin-top:16px;font-size:18px;font-weight:800;letter-spacing:-.02em}
.six p{margin:6px 0 0;font-size:14.5px;line-height:1.6;color:var(--grey)}
.band-ink .six p{color:#948E88}

/* ---------- tickets ---------- */
.tickets{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px}
@media(max-width:720px){.tickets{grid-template-columns:1fr}}
.ticket{
  background:var(--paper);color:var(--ink);border:2px solid var(--line);
  border-radius:3px;padding:36px 30px;
  display:flex;flex-direction:column;text-align:center;
}
.ticket .zone{
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);
}
.ticket .time{
  font-family:'Anton',Impact,sans-serif;font-size:clamp(38px,5vw,56px);
  line-height:1;margin:14px 0 0;transform:skewX(-7deg);
}
.ticket .date{margin:12px 0 0;font-size:15px;color:var(--grey)}
.ticket .go{margin-top:26px}
.ticket .go a{width:100%}

/* ---------- stills strip ---------- */
.strip{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:44px}
.strip figure{margin:0}
.strip img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:3px}
.strip figcaption{margin-top:12px;font-size:13.5px;color:var(--grey);line-height:1.6}
@media(max-width:640px){.strip{grid-template-columns:1fr}}

/* ---------- poster + better stack ---------- */
.artpair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.artpair img{width:100%;max-width:400px;margin:0 auto}
@media(max-width:820px){.artpair{grid-template-columns:1fr}}

/* ---------- credits ---------- */
.credits{font-size:13.5px;line-height:2;color:#8E8983;letter-spacing:.01em}
.credits b{color:#D9D5D0;font-weight:700}

/* ---------- footer ---------- */
footer.site{background:var(--ink);color:#8E8983;padding:56px 0 44px;font-size:14px}
footer.site a{color:#D9D5D0;text-underline-offset:3px}
footer.site .row{display:flex;gap:30px;flex-wrap:wrap;align-items:center}
footer.site .row .brand{color:#fff;font-size:26px;text-decoration:none}
footer.site nav{display:flex;gap:22px;flex-wrap:wrap;margin-left:auto}
footer.site .fine{margin-top:34px;line-height:1.9;font-size:13px;color:#6F6A65}

/* ---------- consent banner ---------- */
.consent{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:200;
  background:var(--ink);color:#D9D5D0;border-radius:4px;
  box-shadow:0 8px 40px rgba(0,0,0,.28);padding:22px 24px;
}
.consent .in{max-width:1000px;margin:0 auto;display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.consent p{margin:0;font-size:14.5px;line-height:1.65;max-width:62ch;flex:1 1 380px}
.consent a{color:#fff;text-underline-offset:3px}
.consent .row{display:flex;gap:10px;flex-wrap:wrap}
.consent button{
  padding:12px 20px;border-radius:2px;font:700 13.5px/1 'Archivo',sans-serif;
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer;border:2px solid #fff;
  background:none;color:#fff;
}
.consent button.yes{background:var(--red);border-color:var(--red)}
.consent button.yes:hover{background:var(--red-d);border-color:var(--red-d)}
.consent button.no:hover{background:#fff;color:var(--ink)}
/* On a phone the full-size banner covered the trailer, which is now the whole
   point of the hero. Slimmer, and the two answers sit side by side. */
@media(max-width:600px){
  .consent{left:10px;right:10px;bottom:10px;padding:16px 16px 14px}
  .consent .in{gap:14px}
  .consent p{font-size:13px;line-height:1.55}
  .consent .row{width:100%}
  .consent button{flex:1;padding:12px 8px;font-size:12.5px;letter-spacing:.04em}
}
.cookielink{
  background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
}

/* ---------- legal page ---------- */
.legalpage h2{font-size:clamp(22px,2.4vw,28px);margin-top:44px}
.legalpage h2:first-of-type{margin-top:0}
.legalpage p,.legalpage li{font-size:16.5px;line-height:1.75;color:#33302C}
.legalpage ul{padding-left:20px}
.legalpage li{margin-bottom:8px}

/* ---------- form slot ---------- */
.slot{margin-top:26px}
/* The Kajabi embed is the only third-party script on the page, so it is not
   loaded until somebody asks for it. Nothing from another domain runs before
   the visitor has answered the banner. */
.slot .askform{
  display:inline-block;padding:17px 30px;border:2px solid var(--ink);border-radius:2px;
  background:none;color:var(--ink);font:700 15px/1 'Archivo',sans-serif;
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
}
.slot .askform:hover{background:var(--ink);color:#fff}
.slot .kajabi-form__title,.slot .kajabi-form__subtitle{display:none!important}
.slot .kajabi-form__btn{
  background:var(--red)!important;color:#fff!important;border:0!important;
  border-radius:2px!important;font-weight:700!important;letter-spacing:.06em!important;
  text-transform:uppercase!important;padding:16px 28px!important;
}
.slot input[type=text],.slot input[type=email]{
  border:2px solid var(--line)!important;border-radius:2px!important;padding:14px 16px!important;
  font-family:'Archivo',sans-serif!important;font-size:16px!important;
}
.slot.empty{border:2px dashed var(--line);border-radius:3px;padding:26px;color:var(--grey);font-size:14px}