/*
Theme Name:   FLTH
Theme URI:    https://github.com/flth/flth-theme
Description:  The FLTH front end. A child of Divi, so Divi keeps updating underneath without touching any of this. All of the design lives here; anything that must survive a theme change lives in the FLTH Core plugin instead.
Author:       FLTH
Template:     Divi
Version: 1.7.0
License:      GPL-2.0-or-later
Text Domain:  flth-theme
*/

/* ==========================================================================
   Tokens
   ========================================================================== */
:root{
  --flth-black:#000000;
  --flth-line:#242420;
  --flth-paper:#FFFFFF;
  --flth-mute:#8C8C84;
  --flth-body:#D4D4CE;
  --flth-acid:#EFFF0F;

  /* The only ink permitted on the acid fill. Nothing overrides this. */
  --flth-on-acid:#000000;

  --flth-charcoal:#15151A;
  --flth-charcoal-line:#2A2A31;

  --flth-band-yes:#F2D024;
  --flth-band-no:#D4322A;

  --flth-display:"Archivo Black", system-ui, -apple-system, sans-serif;
  --flth-text:"Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --flth-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Base
   ========================================================================== */
body.flth{
  background:var(--flth-black);
  color:var(--flth-paper);
  font-family:var(--flth-text);
  font-size:17px;
  line-height:1.5;
  margin:0;
  -webkit-font-smoothing:antialiased;
}
body.flth img{max-width:100%;display:block}

/* Links are acid ONLY inside prose. A blanket `body.flth a` rule outranks
   .flth-btn and .flth-nav a on specificity and repaints them acid, which is
   how a yellow button ends up with yellow text on a yellow ground. Scope it. */
body.flth .flth-copy a,
body.flth .flth-about__body a,
body.flth .flth-rules__a a,
body.flth .flth-contact__lede a,
body.flth .flth-bands-note a{color:var(--flth-acid)}
.flth-wrap{width:100%;max-width:1080px;margin:0 auto;padding-left:18px;padding-right:18px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.flth-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.flth-display,.flth-section__h{
  font-family:var(--flth-display);font-weight:400;text-transform:uppercase;
  transform:skewX(-9deg);transform-origin:left bottom;
  line-height:0.9;margin:0;text-wrap:balance;
}
.flth-label{
  font-family:var(--flth-text);font-weight:600;font-size:0.68rem;
  letter-spacing:0.26em;text-transform:uppercase;color:var(--flth-acid);margin:0;
}

a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--flth-acid);outline-offset:3px;
}

/* ==========================================================================
   Buttons
   Two states, exact opposites. Each rule sets ground AND ink together so
   neither half can be overridden alone and leave invisible text.
   ========================================================================== */
body.flth .flth-btn{
  display:inline-block;font-family:var(--flth-text);font-weight:600;
  font-size:0.78rem;letter-spacing:0.16em;text-transform:uppercase;
  padding:14px 24px;text-decoration:none;border:1px solid var(--flth-acid);
  cursor:pointer;transition:background .15s,color .15s;
  background:var(--flth-acid);color:var(--flth-on-acid);
}
body.flth .flth-btn:hover, body.flth .flth-btn:focus-visible{background:var(--flth-black);color:var(--flth-acid)}
body.flth .flth-btn.flth-btn--ghost{background:var(--flth-black);color:var(--flth-acid)}
body.flth .flth-btn.flth-btn--ghost:hover, body.flth .flth-btn.flth-btn--ghost:focus-visible{background:var(--flth-acid);color:var(--flth-on-acid)}
body.flth .flth-btn.flth-btn--muted{background:transparent;border-color:var(--flth-line);color:var(--flth-mute);cursor:default}
body.flth .flth-btn[disabled]{opacity:0.6;cursor:wait}

/* ==========================================================================
   Grain and tape
   ========================================================================== */
.flth-grain{
  position:fixed;inset:0;z-index:100;pointer-events:none;
  background-image:var(--flth-grain);background-size:260px 260px;
  opacity:0.14;mix-blend-mode:overlay;
}
.flth-section,.flth-footer{position:relative}
.flth-section::before,.flth-footer::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:var(--flth-grain);background-size:520px 520px;
  opacity:0.07;mix-blend-mode:screen;
}
.flth-section > *,.flth-footer > *{position:relative;z-index:1}

.flth-tape-band{position:relative;height:74px;overflow:hidden}
.flth-tape{
  position:absolute;top:50%;left:-6%;width:112%;height:46px;
  transform:translateY(-50%) rotate(-2.2deg);
  background:repeating-linear-gradient(-52deg,var(--flth-acid) 0 26px,#0B0B08 26px 52px);
  background-size:200% 100%;opacity:0.9;filter:contrast(1.1);
  -webkit-mask-image:var(--flth-grain),linear-gradient(#000,#000);
  -webkit-mask-size:180px 180px,100% 100%;
  -webkit-mask-composite:source-in;
  mask-image:var(--flth-grain),linear-gradient(#000,#000);
  mask-size:180px 180px,100% 100%;
  mask-composite:intersect;
}
.flth-tape::after{
  content:"";position:absolute;inset:0;
  background-image:var(--flth-grain);background-size:200px 200px;
  opacity:0.3;mix-blend-mode:multiply;
}

/* ==========================================================================
   Header
   ========================================================================== */
.flth-hdr{
  position:sticky;top:0;z-index:50;isolation:isolate;
  background:var(--flth-black);border-bottom:1px solid var(--flth-line);
}
.flth-hdr__in{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-block:11px}
.flth-hdr__home{flex:0 0 auto;display:block}
.flth-hdr__logo{width:84px}
body.flth .flth-hdr .flth-btn{padding:11px 18px;font-size:0.72rem}

.flth-burger{
  display:none;flex:0 0 auto;background:none;border:1px solid var(--flth-line);
  width:42px;height:38px;padding:0 9px;cursor:pointer;
  flex-direction:column;justify-content:center;gap:5px;
}
.flth-burger span{display:block;height:2px;background:var(--flth-paper);transition:transform .18s,opacity .18s}
.flth-burger[aria-expanded="true"]{border-color:var(--flth-acid)}
.flth-burger[aria-expanded="true"] span{background:var(--flth-acid)}
.flth-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.flth-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.flth-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.flth-nav{flex:1 1 auto;min-width:0}
.flth-nav ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;gap:clamp(14px,3vw,30px)}
.flth-nav li{flex:0 0 auto}
body.flth .flth-nav a{
  display:block;padding:4px 0;text-decoration:none;color:var(--flth-paper);
  font-family:var(--flth-text);font-weight:600;font-size:0.68rem;
  letter-spacing:0.16em;text-transform:uppercase;white-space:nowrap;
  border-bottom:2px solid transparent;
}
body.flth .flth-nav a:hover{color:var(--flth-acid);border-bottom-color:var(--flth-acid)}

@media(max-width:760px){
  .flth-burger{display:flex}
  .flth-hdr__logo{width:68px}
  body.flth .flth-hdr .flth-btn{padding:10px 13px;font-size:0.64rem;letter-spacing:0.1em}
  .flth-nav{
    position:absolute;left:0;right:0;top:100%;display:none;
    background:var(--flth-black);border-bottom:1px solid var(--flth-line);
  }
  .flth-nav[data-open="true"]{display:block}
  .flth-nav ul{flex-direction:column;gap:0;padding:6px 18px 14px}
  .flth-nav li{border-bottom:1px solid var(--flth-line)}
  .flth-nav li:last-child{border-bottom:0}
  body.flth .flth-nav a{padding:15px 0;font-size:0.78rem;letter-spacing:0.2em;border-bottom:0}
}

/* ==========================================================================
   Hero: the mark is the image
   ========================================================================== */
.flth-hero{padding-block:clamp(16px,3vw,30px) clamp(30px,6vw,54px);text-align:center}
/* The wordmark sits in the same column as the logo and nav above it, so its
   left and right edges line up with the rest of the site rather than running
   to the window. */
.flth-stage{
  position:relative;
  width:100%;
  max-width:none;
  margin:0 auto;
  aspect-ratio:2946/711;
}
.flth-stage img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;animation:flth-cycle 24s infinite;
}
.flth-stage img:nth-child(1){animation-delay:0s}
.flth-stage img:nth-child(2){animation-delay:4s}
.flth-stage img:nth-child(3){animation-delay:8s}
.flth-stage img:nth-child(4){animation-delay:12s}
.flth-stage img:nth-child(5){animation-delay:16s}
.flth-stage img:nth-child(6){animation-delay:20s}
@keyframes flth-cycle{0%{opacity:0}2%{opacity:1}16%{opacity:1}18%{opacity:0}100%{opacity:0}}
/* First frame always painted, so the page never opens blank. */
.flth-stage img:first-child{opacity:1}

.flth-hero__tag{
  font-family:var(--flth-text);font-weight:700;
  font-size:clamp(0.85rem,3.4vw,1.25rem);
  letter-spacing:0.3em;text-transform:uppercase;margin:20px 0 0;color:var(--flth-paper);
}
.flth-hero__where{
  color:var(--flth-mute);margin:14px 0 0;
  font-weight:600;font-size:0.72rem;
  letter-spacing:0.2em;text-transform:uppercase;
}
.flth-hero__cta{margin-top:26px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}

/* Countdown */
.flth-doors{margin:28px 0 0;display:flex;flex-direction:column;align-items:center;gap:12px}
.flth-doors__lead{
  font-family:var(--flth-text);font-weight:600;font-size:0.66rem;
  letter-spacing:0.3em;text-transform:uppercase;color:var(--flth-mute);
}
.flth-clock{display:flex;align-items:stretch}
.flth-cd{display:flex;flex-direction:column;align-items:center;gap:5px;padding:0 clamp(12px,3.6vw,26px)}
.flth-cd + .flth-cd{border-left:1px solid var(--flth-line)}
.flth-cd b{
  font-family:var(--flth-display);font-weight:400;
  font-size:clamp(2rem,9vw,3.4rem);line-height:0.92;color:var(--flth-acid);
  transform:skewX(-9deg);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
}
.flth-cd i{
  font-style:normal;font-weight:600;font-size:0.6rem;
  letter-spacing:0.22em;text-transform:uppercase;color:var(--flth-mute);
}
.flth-doors--open{
  font-family:var(--flth-display);text-transform:uppercase;transform:skewX(-9deg);
  font-size:clamp(1.6rem,7vw,2.6rem);color:var(--flth-acid);
}

/* ==========================================================================
   Sections
   ========================================================================== */
.flth-section{border-top:1px solid var(--flth-line)}
.flth-sec{padding-block:clamp(46px,9vw,88px);display:flex;flex-direction:column;gap:26px}
.flth-copy{display:flex;flex-direction:column;gap:14px;color:var(--flth-body);max-width:56ch;font-size:1.03rem}
.flth-copy p{margin:0}
.flth-copy strong{color:var(--flth-paper)}

/* About */
.flth-about{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.flth-about__h{
  font-family:var(--flth-display);text-transform:uppercase;transform:skewX(-9deg);
  font-size:clamp(1.9rem,7.5vw,3.9rem);line-height:0.94;margin:0;color:var(--flth-paper);
  text-wrap:balance;max-width:26ch;
}
.flth-about__body{text-align:center;max-width:56ch;margin:0 auto;width:100%}
@media(min-width:860px){
  .flth-about__body{
    display:block;text-align:left;max-width:none;
    column-count:2;column-gap:clamp(34px,4.5vw,64px);
  }
  .flth-about__body p{margin:0 0 15px;break-inside:avoid}
  .flth-about__body p:last-child{margin-bottom:0}
}

/* Manifesto over the floor */
.flth-manifesto{position:relative;isolation:isolate;overflow:hidden;display:grid;border-top:1px solid var(--flth-line)}
.flth-manifesto > img{
  grid-area:1/1;width:100%;height:clamp(380px,68vw,620px);object-fit:cover;
  filter:grayscale(1) contrast(1.14) brightness(0.62);
}
.flth-manifesto::after{
  content:"";grid-area:1/1;
  background:linear-gradient(90deg,rgba(0,0,0,0.82) 0%,rgba(0,0,0,0.5) 55%,rgba(0,0,0,0.2) 100%);
}
.flth-manifesto__in{
  grid-area:1/1;z-index:1;display:flex;align-items:center;
  width:100%;max-width:1080px;margin:0 auto;padding:28px 18px;
}
.flth-shout{
  font-family:var(--flth-display);text-transform:uppercase;transform:skewX(-9deg);
  font-size:clamp(1.55rem,6.8vw,3rem);color:var(--flth-paper);line-height:1;margin:0;
  text-shadow:0 2px 24px rgba(0,0,0,0.85);
}
.flth-shout em{font-style:normal;color:var(--flth-acid)}

/* Next event */
.flth-next__date{
  font-family:var(--flth-display);transform:skewX(-9deg);text-transform:uppercase;
  font-size:clamp(2.4rem,12vw,5rem);line-height:0.84;margin:0;
}
.flth-facts{margin:18px 0 0;display:flex;flex-direction:column;max-width:52ch}
.flth-facts > div{display:grid;grid-template-columns:84px 1fr;gap:14px;padding:11px 0;border-bottom:1px solid var(--flth-line)}
.flth-facts > div:first-child{border-top:1px solid var(--flth-line)}
.flth-facts dt{font-weight:600;font-size:0.64rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--flth-mute);padding-top:4px}
.flth-facts dd{margin:0;color:var(--flth-body);font-size:0.98rem}
.flth-events__empty{color:var(--flth-mute);margin:0}

/* Separator band */
.flth-sep{overflow:hidden;line-height:0}
.flth-sep img{
  width:100%;height:clamp(300px,44vw,520px);object-fit:cover;object-position:center 42%;
  filter:grayscale(1) contrast(1.12) brightness(0.86);
}

/* Rules accordion */
.flth-rules__item{border-bottom:1px solid var(--flth-line)}
.flth-rules__item:first-child{border-top:1px solid var(--flth-line)}
.flth-rules__q{
  cursor:pointer;list-style:none;padding:19px 44px 19px 0;position:relative;
  font-family:var(--flth-display);text-transform:uppercase;transform:skewX(-9deg);
  transform-origin:left center;font-size:clamp(1.05rem,4.4vw,1.35rem);color:var(--flth-paper);
}
.flth-rules__q::-webkit-details-marker{display:none}
.flth-rules__q::after{
  content:"+";position:absolute;right:2px;top:18px;color:var(--flth-acid);
  font-size:1.4rem;line-height:1;transform:skewX(9deg);
}
details[open] > .flth-rules__q::after{content:"\2013"}
.flth-rules__a{padding:0 0 22px;color:#C4C4BE;max-width:60ch;display:flex;flex-direction:column;gap:10px}
.flth-rules__a p{margin:0}
.flth-rules__a--wide{max-width:none;gap:16px}

/* Armbands */
.flth-bands{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.flth-bands{gap:10px}}
.flth-band{display:flex;flex-direction:column;border:1px solid var(--flth-line);background:#0A0A08}
.flth-band__swatch{
  height:74px;display:flex;align-items:center;justify-content:center;
  font-family:var(--flth-display);text-transform:uppercase;
  font-size:clamp(0.9rem,3.6vw,1.3rem);transform:skewX(-9deg);
}
.flth-band--yes .flth-band__swatch{background:var(--flth-band-yes);color:#000}
.flth-band--no .flth-band__swatch{background:var(--flth-band-no);color:#fff}
.flth-band__body{padding:16px 15px;display:flex;flex-direction:column;gap:9px;flex:1}
.flth-band__name{font-weight:700;font-size:0.68rem;letter-spacing:0.2em;text-transform:uppercase;margin:0;color:var(--flth-mute)}
.flth-band__means{margin:0;font-size:1.02rem;font-weight:600;color:var(--flth-paper);line-height:1.3}
.flth-band__desc{margin:0;color:#A8A8A0;font-size:0.9rem;line-height:1.45}
.flth-band__note{margin:0;padding-top:9px;border-top:1px solid var(--flth-line);font-size:0.84rem;color:#A8A8A0}
.flth-bands-note{margin:0;border-left:3px solid var(--flth-acid);padding:12px 16px;background:#0D0D0A;font-size:0.95rem;color:var(--flth-body)}
.flth-bands-note strong{color:var(--flth-acid)}

/* Photo strip */
.flth-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--flth-line)}
@media(min-width:700px){.flth-strip{grid-template-columns:repeat(4,1fr)}}
.flth-strip img{aspect-ratio:1;object-fit:cover;filter:grayscale(1) contrast(1.12);width:100%}

/* ==========================================================================
   Mailing list band: the only acid block on the page
   ========================================================================== */
.flth-signup-band{background:var(--flth-acid);color:var(--flth-on-acid);position:relative;overflow:hidden}
.flth-signup-band::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--flth-grain);background-size:320px 320px;
  opacity:0.16;mix-blend-mode:multiply;
}
.flth-signup-band__in{
  position:relative;z-index:1;width:100%;max-width:1080px;margin:0 auto;
  padding:clamp(34px,6vw,58px) 18px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
}
.flth-signup-band__h{
  font-family:var(--flth-display);text-transform:uppercase;transform:skewX(-9deg);
  font-size:clamp(1.7rem,7vw,2.8rem);line-height:0.94;margin:0;color:var(--flth-on-acid);
}
.flth-signup-band__lede{margin:0;max-width:46ch;font-size:1rem;color:#1A1A08;font-weight:600}

.flth-signup{display:flex;flex-direction:column;gap:16px;max-width:520px;width:100%;align-items:center}
.flth-signup__row{display:flex;gap:8px;flex-wrap:nowrap;width:100%}
.flth-signup input[type=email]{
  flex:1 1 0;min-width:0;background:var(--flth-on-acid);border:1px solid var(--flth-on-acid);
  color:var(--flth-paper);padding:14px;font-family:var(--flth-text);font-size:0.9rem;border-radius:0;
}
.flth-signup input[type=email]::placeholder{color:var(--flth-mute)}
body.flth .flth-btn--onacid{background:var(--flth-on-acid);color:var(--flth-acid);border-color:var(--flth-on-acid)}
body.flth .flth-btn--onacid:hover, body.flth .flth-btn--onacid:focus-visible{background:var(--flth-paper);color:var(--flth-on-acid);border-color:var(--flth-paper)}
.flth-consent{display:flex;gap:10px;align-items:flex-start;font-size:0.85rem;color:#2A2A12;text-align:left}
.flth-consent input{margin-top:3px;accent-color:var(--flth-on-acid)}
body.flth .flth-signup-band a{color:#1A1A08;text-decoration:underline}
body.flth .flth-signup-band a:focus-visible, body.flth .flth-signup-band button:focus-visible, body.flth .flth-signup-band input:focus-visible{outline-color:var(--flth-on-acid)}
.flth-signup-band .flth-form-msg{color:var(--flth-on-acid);font-weight:700}

/* ==========================================================================
   Contact form
   ========================================================================== */
/* Centred to match the mailing list band above it, so the two halves of the
   contact section share one axis instead of one being centred and the other
   ranged left. Field labels stay left inside the box, because a centred label
   floating above an input is hard to associate with it. */
.flth-contact{display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center}
.flth-contact__h{
  font-family:var(--flth-display);text-transform:uppercase;transform:skewX(-9deg);
  font-size:clamp(1.3rem,5vw,1.8rem);margin:0;color:var(--flth-paper);
}
.flth-contact__lede{margin:0 auto;color:var(--flth-body);max-width:52ch}
.flth-cform{display:flex;flex-direction:column;gap:14px;width:100%;max-width:520px;align-items:center;text-align:left}
.flth-field{display:flex;flex-direction:column;gap:6px;width:100%}
.flth-field label{font-weight:600;font-size:0.62rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--flth-mute)}
.flth-field input,.flth-field textarea{
  background:var(--flth-black);border:1px solid var(--flth-line);color:var(--flth-paper);
  padding:12px 13px;font-family:var(--flth-text);font-size:0.95rem;width:100%;border-radius:0;
}
.flth-field textarea{resize:vertical;min-height:104px}
.flth-field input:focus,.flth-field textarea:focus{border-color:var(--flth-acid);outline:none}

.flth-form-msg{margin:0;font-size:0.9rem;color:var(--flth-mute);min-height:1.4em;text-align:center;width:100%}
.flth-form-msg--ok{color:var(--flth-acid);font-weight:600}
.flth-form-msg--bad{color:#E8695E}

.flth-socials{list-style:none;margin:0;padding:0;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* ==========================================================================
   Pages: the legal documents and anything else that is not the front page
   ========================================================================== */
.flth-page{display:block}

.flth-doc__head{padding-block:clamp(34px,7vw,64px) clamp(22px,4vw,34px);position:relative}
.flth-doc__head::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--flth-grain);background-size:520px 520px;
  opacity:0.07;mix-blend-mode:screen;
}
.flth-doc__head > *{position:relative}
.flth-doc__title{
  font-family:var(--flth-display);text-transform:uppercase;transform:skewX(-9deg);
  transform-origin:left bottom;line-height:0.92;margin:12px 0 0;color:var(--flth-paper);
  font-size:clamp(1.9rem,7vw,3.6rem);text-wrap:balance;max-width:18ch;
}
.flth-doc__meta{
  margin:14px 0 0;color:var(--flth-mute);font-size:0.78rem;
  letter-spacing:0.16em;text-transform:uppercase;font-weight:600;
}

/* One column on a phone, document plus index from tablet up. */
.flth-doc__body{
  display:grid;grid-template-columns:1fr;gap:clamp(34px,5vw,56px);
  padding-block:clamp(34px,6vw,64px) clamp(50px,9vw,90px);
}
@media(min-width:900px){
  .flth-doc__body{grid-template-columns:minmax(0,1fr) 230px}
}

/* Prose. A measure built for reading a policy, not for shouting. */
.flth-prose{color:var(--flth-body);font-size:1.02rem;line-height:1.65;max-width:68ch;min-width:0}
.flth-prose > *:first-child{margin-top:0}
.flth-prose p{margin:0 0 1.15em}
.flth-prose strong{color:var(--flth-paper)}
.flth-prose em{color:var(--flth-mute);font-style:normal}
.flth-prose a{color:var(--flth-acid);text-underline-offset:3px}

.flth-prose h2{
  font-family:var(--flth-display);text-transform:uppercase;transform:skewX(-9deg);
  transform-origin:left bottom;color:var(--flth-paper);line-height:1;
  font-size:clamp(1.15rem,3.4vw,1.5rem);
  margin:2.1em 0 0.7em;padding-top:1.1em;border-top:1px solid var(--flth-line);
}
.flth-prose h2:first-of-type{border-top:0;padding-top:0;margin-top:1.4em}
.flth-prose h3{
  font-family:var(--flth-text);font-weight:700;color:var(--flth-paper);
  font-size:1rem;letter-spacing:0.02em;margin:1.7em 0 0.5em;
}

.flth-prose ul{margin:0 0 1.15em;padding-left:1.1em;display:flex;flex-direction:column;gap:0.5em}
.flth-prose li{padding-left:0.2em}
.flth-prose li::marker{color:var(--flth-acid)}

/* The index of the other documents. */
.flth-doc__aside{align-self:start;min-width:0}
@media(min-width:900px){.flth-doc__aside{position:sticky;top:96px}}
.flth-doc__aside-h{
  font-family:var(--flth-text);font-weight:600;font-size:0.64rem;
  letter-spacing:0.22em;text-transform:uppercase;color:var(--flth-mute);margin:0 0 14px;
}
.flth-doc__aside ul{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:0}
.flth-doc__aside li{border-top:1px solid var(--flth-line)}
.flth-doc__aside li:last-child{border-bottom:1px solid var(--flth-line)}
body.flth .flth-doc__aside a{
  display:block;padding:11px 0;color:#C4C4BE;text-decoration:none;font-size:0.88rem;line-height:1.35;
}
body.flth .flth-doc__aside a:hover{color:var(--flth-acid)}
body.flth .flth-doc__aside .current-menu-item > a{color:var(--flth-acid);font-weight:600}
.flth-doc__back{width:100%;text-align:center}

/* ==========================================================================
   Footer
   ========================================================================== */
.flth-footer{background:var(--flth-charcoal);border-top:1px solid var(--flth-charcoal-line);padding-block:42px 32px}
/* Four children now: brand, The Night, Guides, Legal. The old three-column
   rule left the fourth to wrap underneath the brand, which is what put Legal in
   its own stack. Mobile keeps the two columns JJ asked for; the three link
   columns sit side by side from tablet up. */
.flth-foot{display:grid;grid-template-columns:1fr 1fr;gap:28px 22px;align-items:start}
.flth-foot__brand{grid-column:1 / -1}
/* Grid children default to min-width:auto, so a long link title refuses to
   shrink and pushes the column past the screen edge. */
.flth-foot > *{min-width:0}
.flth-foot a{overflow-wrap:break-word}

/* Tablet: the brand takes its own row so the three link columns get equal
   width rather than being squeezed by it. */
@media(min-width:640px){
  .flth-foot{grid-template-columns:repeat(3,1fr)}
  .flth-foot__brand{grid-column:1 / -1}
}

/* Desktop: everything on one row, brand wider because it carries the logo. */
@media(min-width:960px){
  .flth-foot{grid-template-columns:1.4fr 1fr 1fr 1.15fr;gap:32px}
  .flth-foot__brand{grid-column:auto}
}
.flth-foot h3{font-weight:600;font-size:0.64rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--flth-mute);margin:0 0 12px}
.flth-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
body.flth .flth-foot a{color:#C4C4BE;text-decoration:none;font-size:0.92rem}
body.flth .flth-foot a:hover{color:var(--flth-acid)}
.flth-foot__logo{width:112px;margin-bottom:14px}
.flth-foot__note{color:#78786F;font-size:0.88rem;margin:0;max-width:28ch}
.flth-foot__legal{
  border-top:1px solid var(--flth-charcoal-line);margin-top:32px;padding-top:18px;
  display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:space-between;
  color:#57574F;font-size:0.76rem;
}

/* ==========================================================================
   Motion
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body.flth *{animation:none!important;transition:none!important}
  .flth-stage img{opacity:0}
  .flth-stage img:first-child{opacity:1}
}

/* ---------------------------------------------------------------------------
   Event pages and the events archive.

   Each night has its own address so its date can be found and indexed, and past
   nights stay listed. Mobile first: the list is a single stacked column and only
   splits the date out into its own block once there is room for it.
   --------------------------------------------------------------------------- */

body.flth .flth-elist__h{
  font-family:var(--flth-display);text-transform:uppercase;letter-spacing:0.02em;
  font-size:clamp(1.3rem,5vw,1.9rem);color:var(--flth-paper);
  margin:48px 0 16px;padding-bottom:10px;border-bottom:1px solid var(--flth-line);
}

body.flth .flth-elist{list-style:none;margin:0;padding:0}

body.flth .flth-elist__item{border-bottom:1px solid var(--flth-line)}

body.flth .flth-elist__link{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;
  padding:18px 2px;text-decoration:none;color:var(--flth-paper);
}
body.flth .flth-elist__link:hover,
body.flth .flth-elist__link:focus-visible{background:rgba(239,255,15,0.06)}

body.flth .flth-elist__date{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex:0 0 auto;min-width:74px;padding:8px 10px;
  border:1px solid var(--flth-acid);color:var(--flth-acid);
}
body.flth .flth-elist__day{font-family:var(--flth-display);font-size:1.5rem;line-height:1}
body.flth .flth-elist__mon{
  font-size:0.66rem;letter-spacing:0.18em;text-transform:uppercase;margin-top:4px;
}

body.flth .flth-elist__body{flex:1 1 200px;min-width:0}
body.flth .flth-elist__title{
  display:block;font-family:var(--flth-display);text-transform:uppercase;
  font-size:1.05rem;line-height:1.2;
}
body.flth .flth-elist__venue{
  display:block;color:var(--flth-mute);font-size:0.85rem;margin-top:4px;
}

/* The acid fill always takes black ink. */
body.flth .flth-elist__cta{
  flex:0 0 auto;background:var(--flth-acid);color:var(--flth-on-acid);
  font-size:0.7rem;letter-spacing:0.16em;text-transform:uppercase;
  padding:8px 14px;font-weight:700;
}

/* Past nights are still worth having on the page, but they should not compete
   with the date a man can actually buy a ticket for. */
body.flth .flth-elist--past .flth-elist__date{border-color:var(--flth-line);color:var(--flth-mute)}
body.flth .flth-elist--past .flth-elist__title{color:var(--flth-body);font-size:0.95rem}

body.flth .flth-elist__foot{margin:40px 0 8px;color:var(--flth-mute)}

body.flth .flth-event-page__when{
  font-family:var(--flth-display);text-transform:uppercase;
  font-size:clamp(1rem,4.4vw,1.35rem);color:var(--flth-acid);margin:14px 0 4px;
}
body.flth .flth-event-page__where{color:var(--flth-body);margin:0 0 20px}
body.flth .flth-event-page__cta{margin:0}