/* THE FILM'S OWN BRAND, 9 Sep 2026. Karina supplied the Going Dry Brand Guide
   2025 and Andy took it: Barlow Condensed ExtraBold for headlines, Barlow Semi
   Condensed for everything else, and the three brand colours below. The site
   used to run Anton and Archivo on a red sampled off the poster artwork, which
   was a guess made before there was a guide.
   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. 136KB for the six files. */
@font-face{font-family:'Barlow Condensed';src:url('/assets/fonts/barlow-condensed-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('/assets/fonts/barlow-condensed-latin-800-normal.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Semi Condensed';src:url('/assets/fonts/barlow-semi-condensed-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Semi Condensed';src:url('/assets/fonts/barlow-semi-condensed-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Semi Condensed';src:url('/assets/fonts/barlow-semi-condensed-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Semi Condensed';src:url('/assets/fonts/barlow-semi-condensed-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  /* Straight off the brand guide: Black 000000, Green 37D49A (Pantone 7479),
     Cream EFE8DD (Pantone Cool Grey 1C). Green is the key colour and the guide
     says it must always keep sufficient contrast, so it appears on black and
     never as small text on a light ground. */
  --ink:#000000; --green:#37D49A; --green-d:#22B382;
  --grey:#6E6A66; --line:#DED7CB; --soft:#EFE8DD; --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 18px/1.62 'Barlow Semi Condensed',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 ---------- */
/* Barlow Condensed ExtraBold, the guide's primary face. Sentence case is kept
   because Andy's headings carry full stops and read as shouting in all caps;
   the eyebrows carry the uppercase instead. Sizes are up about a fifth, since
   a condensed face at the old sizes reads noticeably smaller. */
h1,h2,h3{
  font-family:'Barlow Condensed',Impact,sans-serif;
  margin:0;letter-spacing:-.005em;line-height:1.02;font-weight:800;
}
h2{font-size:clamp(36px,4.8vw,58px)}
h3{font-size:clamp(24px,2.6vw,31px)}
p{margin:0 0 18px}
.lead{font-size:clamp(18px,1.4vw,20.5px);line-height:1.68;color:#2E2B27;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(--ink);
}
/* .hero is NOT .band-ink, so every dark-context rule has to name both. The
   green is the key brand colour but it is unreadable as small text on white,
   so on light sections the eyebrow is simply black. */
.band-ink .eyebrow,.hero .eyebrow{color:var(--green)}
.grey .eyebrow{color:var(--grey)}
.pull{
  font-family:'Barlow Condensed',Impact,sans-serif;
  font-size:clamp(26px,3vw,38px);font-weight:800;line-height:1.12;
  letter-spacing:-.005em;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. Barlow Condensed ExtraBold, upright. The old skew was an
   approximation of the poster's compressed italic, made before there was a
   brand guide; the guide's own wordmark stands straight, so this does too. */
.wordmark{
  font-family:'Barlow Condensed',Impact,sans-serif;font-weight:800;
  font-size:clamp(62px,12.6vw,148px);line-height:.88;
  letter-spacing:-.01em;text-transform:uppercase;
  margin:0 0 4px;
}
.tagline{
  font-family:'Barlow Condensed',Impact,sans-serif;
  color:var(--green);font-weight:800;text-transform:uppercase;
  font-size:clamp(19px,2.3vw,28px);letter-spacing:.03em;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}
/* The primary button is GREEN with black type, everywhere on the site.
   Andy's rule of 6 Sep 2026 was that buttons are INK and never the brand
   colour, because in this film's world RED is the drink: the spill, the
   shattered glass, the thing being broken, so a red button asked people to
   click the problem while the line above it said Everything to gain.
   Green is the opposite. It is the guide's key colour, it is the affirmative
   half of the story, and it holds its contrast on black and on white alike.
   It also means one primary button instead of three: the old ink button had
   to invert to white on the dark bands, so the hero, the tickets and the
   closing ask each had a different coloured CTA. */
.btn-primary{background:var(--green);border-color:var(--green);color:#000}
.btn-primary:hover{background:var(--green-d);border-color:var(--green-d);color:#000}
.btn-big{padding:20px 40px;font-size:16.5px}
/* .hero is NOT .band-ink. Both get named, every time. */
.band-ink .btn,.hero .btn{border-color:#fff;color:#fff}
.band-ink .btn:hover,.hero .btn:hover{background:#fff;color:var(--ink)}
/* And the primary has to be restated at the same specificity, or the white
   text from the rule above wins over .btn-primary and puts white type on the
   green button, which measures about 1.9:1. Two classes beat one, always. */
.band-ink .btn.btn-primary,.hero .btn.btn-primary,header.site .btn.btn-primary{
  background:var(--green);border-color:var(--green);color:#000;
}
.band-ink .btn.btn-primary:hover,.hero .btn.btn-primary:hover,header.site .btn.btn-primary:hover{
  background:var(--green-d);border-color:var(--green-d);color:#000;
}
.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 ---------- */
/* Black, like the hero under it. A white bar above a black hero left a hard
   seam across the top of the page. */
header.site{
  position:sticky;top:0;z-index:50;background:rgba(0,0,0,.92);color:#fff;
  backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid #23211E;
}
header.site .in{
  max-width:1140px;margin:0 auto;padding:0 24px;height:64px;
  display:flex;align-items:center;gap:26px;
}
.brand{
  font-family:'Barlow Condensed',Impact,sans-serif;font-weight:800;font-size:26px;
  text-transform:uppercase;color:#fff;
  text-decoration:none;letter-spacing:.005em;white-space:nowrap;
}
header.site nav{display:flex;gap:24px;margin-left:auto}
header.site nav a{
  text-decoration:none;font-size:15px;font-weight:600;color:#B8B3AD;
  text-underline-offset:5px;
}
header.site nav a:hover{color:var(--green);text-decoration:underline}
header.site .btn{border-color:#fff;color:#fff}
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. */
/* Black, 9 Sep 2026. The brand guide is black-dominant and the green only
   works on it, so a white hero meant the film's key colour could not appear on
   the most important screen at all. .hero is NOT .band-ink, so every dark rule
   below names both. */
.hero{
  padding:clamp(30px,3.8vw,54px) 0 clamp(38px,4.4vw,60px);text-align:center;
  background:var(--ink);color:#fff;
}
.hero .w{max-width:900px}
.hero .wordmark{color:#fff}
.hero .lead{color:#D9D5D0}
.hero .undernote{color:#8E8983}
/* 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:16.5px;font-weight:700;letter-spacing:-.005em}
.when span{display:block;font-size:14px;color:var(--grey);margin-top:2px}
.hero .when{border-top-color:#2A2622}
.hero .when b{color:#fff}
.hero .when span{color:#8E8983}

/* ---------- 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(--green);
  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 #000;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 11px/1 'Barlow Semi Condensed',sans-serif;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink);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:20px;font-weight:700;letter-spacing:-.01em}
.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:19px;font-weight:700;letter-spacing:-.01em}
.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:'Barlow Condensed',Impact,sans-serif;font-weight:800;font-size:clamp(42px,5.5vw,62px);
  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 14px/1 'Barlow Semi Condensed',sans-serif;
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer;border:2px solid #fff;
  background:none;color:#fff;
}
.consent button.yes{background:var(--green);border-color:var(--green);color:#000}
.consent button.yes:hover{background:var(--green-d);border-color:var(--green-d);color:#000}
.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 15.5px/1 'Barlow Semi Condensed',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(--green)!important;color:#000!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:'Barlow Semi Condensed',sans-serif!important;font-size:16.5px!important;
}
.slot.empty{border:2px dashed var(--line);border-radius:3px;padding:26px;color:var(--grey);font-size:14px}