/* ---------- Local Aptos font family ---------- */
@font-face {
  font-family: 'Aptos';
  src: url('fonts/Aptos.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aptos';
  src: url('fonts/Aptos-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aptos';
  src: url('fonts/Aptos-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aptos';
  src: url('fonts/Aptos-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --fyb-black:  #000000;
  --fyb-orange: #c56a11;   /* "Living Under an Oppressive Regime" section */
  --fyb-brown:  #45290e;   /* "The Shared Wall" section */
  --fyb-brown2: #4f3315;   /* form section */
  --fyb-gold:   #fed238;   /* "On the Road to Pittsburgh" headline */
  --fyb-offwhite: #e8e4de;
}

body {
  font-family: 'Aptos', 'Helvetica Neue', Arial, sans-serif;
  background: var(--fyb-black);
  color: #fff;
  overflow-x: hidden;
}

a { color: #fff; }
a:hover { color: #ddd; }

/* ---------- Type ---------- */
.display-giant {
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.02em;
  /* scales from mobile to the huge PSD size */
  font-size: clamp(2.5rem, 10vw, 10.75rem);
  margin: 0;
}
.display-giant-2x {
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.02em;
  /* scales from mobile to the huge PSD size */
  font-size: clamp(2.5rem, 15vw, 15.75rem);
  margin: 0;
}
.display-giant-3x {
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.02em;
  /* scales from mobile to the huge PSD size */
  font-size: clamp(2.5rem, 10vw, 9.75rem);
  margin: 0;
}
.display-lg {
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.02em;
  font-size: clamp(1.75rem, 5vw, 3rem);
  margin: 0;
}
.headline-md {
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.01em;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
}
.headline-sm {
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
}
.body-copy {
  font-size: clamp(1rem, 1.35vw, 1.2rem);      /* matches the copy beside the contact form */
  line-height: 1.65;
  color: #f3f1ee;
  max-width: 34rem;
}
.text-right-block { margin-left: auto; }

.link-underline {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.link-underline:hover { text-decoration: underline; }

/* "On the Road to Pittsburgh" — sized so it breaks as two lines */
#road .display-giant-3x {
  font-size: clamp(2.5rem, 9vw, 7.5rem);
}

/* ---------- Sections ---------- */
.section { padding: 5rem 0; }
.bg-orange { background: var(--fyb-orange); }
.bg-brown  { background: var(--fyb-brown); }
.bg-brown2 { background: var(--fyb-brown2); }
.bg-blue   { background: #1c4781; }
.bg-navy   { background: #202239; }
.bg-gray   { background: #323232; }
.text-gold { color: var(--fyb-gold); }

/* ---------- Episodes: pinned horizontal track ---------- */
.episodes-track { overflow: hidden; background: #000; }
.episodes-panels { display: flex; flex-wrap: nowrap; }
.ep-panel {
  flex: 0 0 100vw;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  padding: 6.5rem 0 2rem;
  overflow: hidden;
}
/* until "More Episodes" is clicked, only the Origin Story panel exists on the page */
.episodes-track:not(.is-open) .ep-panel + .ep-panel { display: none; }

/* PSD-scale type: headline fills the panel, bounded by width AND height so it
   never overflows a short viewport (entrance animation is GSAP, see script.js) */
.ep-headline {
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-size: min(9.5vw, 12vh);
  margin: 0 0 3vh;
}
.ep-panel .headline-md { font-size: clamp(2rem, 3.4vw, 2.75rem); }
.ep-panel .body-copy { font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.6; }
.ep-date {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  opacity: 0.8;
  margin-bottom: 1rem;
}
.ep-tease { font-weight: 700; }
/* date-gated episode video (set by script.js until the air date) */
/* Shrink-wraps the picture, so the "Coming Soon" badge is pinned to the image
   rather than to a wider box around it. The entrance animation moves this link
   (not the img inside), which keeps the badge travelling with the picture. */
.ep-video-link {
  position: relative;
  display: block;
  width: -webkit-fit-content;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.ep-video-locked { cursor: default; }
.ep-video-locked img { opacity: 1; }   /* thumbnails stay full-brightness; the badge does the talking */
.ep-coming {
  position: absolute;
  left: 1rem; bottom: 1rem;
  background: #fff;
  color: #000;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  padding: 0.5rem 0.9rem;
  white-space: nowrap;
}
/* auto-fit steps (added by script.js only when a panel's content is taller than the viewport) */
.ep-panel.fit-1 { padding-top: 5.5rem; }
.ep-panel.fit-1 .ep-headline { margin-bottom: 1.5vh; }
.ep-panel.fit-1 .body-copy { line-height: 1.45; margin-bottom: 0.6rem; }
.ep-panel.fit-1 .ep-date { margin-bottom: 0.6rem; }
.ep-panel.fit-2 .ep-headline { font-size: min(8vw, 9.5vh); }
.ep-panel.fit-2 .body-copy { font-size: 1rem; line-height: 1.4; }
.ep-panel.fit-2 .ep-video { max-height: 36vh; }
/* fit-3: short viewports with the full description showing (no Read more) */
.ep-panel.fit-3 { padding-top: 5rem; }
.ep-panel.fit-3 .ep-headline { font-size: min(6.5vw, 8vh); margin-bottom: 1vh; }
.ep-panel.fit-3 .headline-md { font-size: 1.6rem; margin-bottom: 0.35rem !important; }
.ep-panel.fit-3 .ep-date { font-size: 0.72rem; margin-bottom: 0.45rem; }
.ep-panel.fit-3 .body-copy { font-size: 0.92rem; line-height: 1.32; margin-bottom: 0.5rem; }
.ep-panel.fit-3 .ep-video { max-height: 30vh; }
/* Sized to the picture's own shape rather than stretched to the column and
   letterboxed — a full-width box with object-fit leaves empty gutters beside
   the picture, and the "Coming Soon" badge ends up floating in one of them. */
.ep-video {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 44vh;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* "More Episodes" — big orange button under the Origin episode. Opens the
   horizontal track, which still slides in from the side. */
.ep-panel { position: relative; }
.ep-more-btn-wrap { text-align: center; margin-top: 2rem; }
.ep-more-btn {
  display: inline-block;
  background: #e8760d;
  color: #fff;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  padding: 1rem 3.25rem;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}
.ep-more-btn:hover {
  background: #ff8c1a;
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
}
/* close button — only while the track is open */
.ep-close {
  display: none;
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 20;
  background: #fff;
  color: #000;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
  padding: 0.7rem 1.1rem;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.episodes-track { position: relative; }
.episodes-track.is-open .ep-close { display: inline-flex; }
.ep-close:hover { background: var(--fyb-orange); color: #fff; text-decoration: none; }
/* phones: no pinning — episodes stack vertically, each at least a screen tall */
@media (max-width: 767.98px) {
  .episodes-panels { display: block; }
  .ep-panel { display: block; width: auto; height: auto; min-height: 100vh; padding: 6rem 0 3rem; }
  .ep-headline { font-size: clamp(2.75rem, 13vw, 4.5rem); }
  .ep-video { max-height: none; }
  .episodes-track.is-open .ep-close { position: fixed; right: 1rem; bottom: 1rem; }
}

/* white episode section (Ferrucci): brown headline, dark copy */
.bg-white-section { background: #fff; color: #111; }
.bg-white-section .display-giant-3x,
.bg-white-section .ep-headline,
.bg-white-section .headline-md { color: var(--fyb-brown); }
.bg-white-section .body-copy { color: #222; }

/* tagline band under the hero */
.white-band {
  background: #fff;
  color: #000;
  text-align: center;
  padding: 4rem 0;
}
.white-band-title {
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-size: clamp(1.5rem, 3.6vw, 3.4rem);
  margin: 0;
}

/* ---------- Nav ---------- */
.navbar-fyb {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1030;
  padding: 1.5rem 0 2.5rem;
  background: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0) 100%);
  pointer-events: none;            /* the gradient's fade-out area shouldn't block clicks */
}
.navbar-fyb .container-fluid { pointer-events: auto; }
.navbar-fyb .nav-link {
  color: #fff !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.85rem;
  padding: 0.35rem 0.9rem;
}
.navbar-fyb .nav-link.btn-outline {
  border: 2px solid #fff;
  margin-left: 0.5rem;
}
.navbar-fyb .navbar-toggler { border-color: rgba(255,255,255,.6); }
@media (max-width: 991.98px) {
  .navbar-fyb .navbar-collapse {
    background: rgba(0,0,0,.9);
    padding: 1rem;
    margin-top: .5rem;
  }
}

/* ---------- Hero ---------- */
.hero {
  min-height: 100vh;
  background: #000;
  display: flex;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* full-bleed background video (black until it loads) */
.hero-video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-inner { width: 100%; padding: 7rem 1rem 4rem; position: relative; z-index: 1; }
.hero-logo { max-width: 320px; width: 73%; height: auto; opacity: 0.7; }
/* AOS fade lands on opacity:1 — make the animated end-state 0.7 instead */
.hero-logo[data-aos].aos-animate,
.hero-episodes[data-aos].aos-animate { opacity: 0.7; }
.hero-tagline {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 1rem;
}
.hero-episodes {
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  margin: 1.25rem 0 1.25rem;
  opacity: 0.7;
}
.badge-podcast { height: 48px; width: auto; }

/* hero v2: big logo lockup, trailer button, platform badges */
.hero-logo-v2 { max-width: 500px; width: 70%; height: auto; }
.hero-tagline-v2 {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(0.95rem, 1.7vw, 1.4rem);
  margin: 0.75rem 0 1.5rem;
}
.btn-trailer {
  display: inline-block;
  background: var(--fyb-orange);
  border: 2px solid var(--fyb-orange);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.6rem 1.5rem;
  margin-bottom: 1.5rem;
  transition: background 0.2s, border-color 0.2s;
}
.btn-trailer:hover { background: #a85809; border-color: #a85809; color: #fff; text-decoration: none; }
/* ---------- hero: premiere line + "remind me" capture ---------- */
.hero-premiere {
  margin-top: 1.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: clamp(0.85rem, 1.15vw, 1rem);
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}
.hero-remind { margin-top: 0.85rem; }
/* one row: field then button. Gravity Forms stacks its parts by default, so the
   form, its field wrapper and its footer are all flattened onto the same line. */
.hero-remind .gform_wrapper,
.hero-remind form { margin: 0; }
.hero-remind .gform_wrapper form,
.hero-remind .fyb-remind-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 0.5rem;
}
.hero-remind .gform-body,
.hero-remind .gform_fields,
.hero-remind .gfield { display: block; margin: 0; padding: 0; }
.hero-remind .gform_footer { margin: 0; padding: 0; }
.hero-remind .gfield_label,
.hero-remind .gform_required_legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.hero-remind .gform_validation_container,
.hero-remind .gfield--type-honeypot { display: none !important; }
.hero-remind input[type="email"] {
  width: min(19rem, 60vw);
  background: rgba(255, 255, 255, 0.94);
  border: 0;
  border-radius: 0;
  color: #333;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0.7rem 0.9rem;
}
.hero-remind input[type="email"]::placeholder { color: #8b8b8b; font-weight: 600; }
.hero-remind .gform_button,
.hero-remind .fyb-remind-form button {
  background: var(--fyb-orange);
  border: 0;
  border-radius: 0;
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.78rem;
  padding: 0.7rem 1.2rem;
  cursor: pointer;
  white-space: nowrap;
}
.hero-remind .gform_button:hover,
.hero-remind .fyb-remind-form button:hover { background: #e8760d; }
.hero-remind .gform_confirmation_message {
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}
.hero-remind .validation_message,
.hero-remind .gform_validation_errors {
  background: none; border: 0; padding: 0.3rem 0 0;
  color: #ffcaca; font-size: 0.78rem; width: 100%;
}
@media (max-width: 575.98px) {
  .hero-remind input[type="email"] { width: min(15rem, 68vw); }
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 6rem;        /* sits about an inch below the trailer button */
}
.hero-badges img { height: 32px; width: auto; display: block; }   /* 20% smaller */

/* ---------- Video thumbnails ---------- */
.video-thumb {
  position: relative;
  display: block;
  background: #222 center / cover no-repeat;
  cursor: pointer;
}
.video-thumb::after {           /* play button */
  content: '';
  position: absolute;
  left: 1rem; bottom: 1rem;
  width: 44px; height: 44px;
  border: 2px solid #fff;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E")
    center / 20px no-repeat;
}
.video-thumb img { width: 100%; height: auto; display: block; }
/* keeps layout honest before real images are dropped in */
.video-thumb.placeholder { aspect-ratio: 16 / 10; }

/* headline-overlap rows: no pull-up on mobile (overrides the inline top) */
@media (max-width: 767.98px) {
  .overlap-row { top: 0 !important; }
}

/* fancybox video popups — no white frame, just the player */
.fancybox-content,
.fancybox-slide--iframe .fancybox-content,
.fancybox-iframe {
  background: transparent;
}

/* thin vertical divider between text + video (desktop only) */
.divider-col { border-left: 1px solid #fff; }
@media (max-width: 767.98px) { .divider-col { border-left: 0; } }

/* ---------- Full-bleed photo bands ---------- */
.band {
  position: relative;
  background: #2a2a2a center / cover no-repeat;
  display: flex;
  align-items: center;
}
.band-merch {
  min-height: 70vh;
  background-image: url('img/merch.jpg');
  text-align: center;
  justify-content: center;
}
.band-attic {
  min-height: 70vh;
  background-image: url('img/attic-band.jpg');
  text-align: center;
  justify-content: center;
}
.band-team {
  min-height: 90vh;
  background-image: url('img/the-team.jpg');
  align-items: flex-end;
}
.band .shade {           /* subtle darkening so text stays readable */
  position: absolute; inset: 0;
  background: rgba(0,0,0,.25);
}
.band .band-content { position: relative; z-index: 1; }

/* ---------- Form ---------- */
.fyb-form .form-control {
  background: var(--fyb-offwhite);
  border: 0;
  border-radius: 0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
  color: #555;
  padding: 1.4rem 1rem;
}
.fyb-form textarea.form-control {
  min-height: 130px;
  padding-top: 1rem;
}
.fyb-form .form-control::placeholder { color: #999; }
.upload-input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  overflow: hidden;
}
.upload-label {
  display: block;
  width: 100%;
  background: var(--fyb-offwhite);
  color: #999;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
  padding: 1.05rem 1rem;
  margin: 0;
  cursor: pointer;
  border: 2px dashed #b5b0a6;
}
.upload-label:hover { border-color: #857f73; color: #666; }
.upload-label.has-file { color: #333; border-style: solid; }
/* ---------- Gravity Forms, wearing the site's clothes ----------
   GF's own stylesheet still loads (it handles error states, spinners and the
   ajax lifecycle); these rules only restyle the visible parts. Labels are
   hidden at form level, so placeholders carry the naming as before. */
.fyb-form .gform_wrapper { margin: 0; }
.fyb-form .gform_fields { display: grid; grid-row-gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.fyb-form .gfield { margin: 0; }
/* GF's own stylesheet is off (see gform_disable_css), and that stylesheet is
   what normally hides the spam honeypot — so it has to be hidden here. */
.fyb-form .gform_validation_container,
.fyb-form .gfield--type-honeypot,
.fyb-form .gfield_visibility_hidden { display: none !important; }
/* placeholders do the naming visually; labels stay for screen readers */
.fyb-form .gfield_label,
.fyb-form .gform_required_legend {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.fyb-form input[type="text"],
.fyb-form input[type="email"],
.fyb-form textarea {
  width: 100%;
  background: var(--fyb-offwhite);
  border: 0;
  border-radius: 0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
  color: #555;
  padding: 0.8rem 1rem;
}
/* three lines of copy. GF renders the textarea with a rows attribute, and that
   intrinsic height beats min-height — so set height outright and let the
   visitor drag it taller if they want the room. */
.fyb-form textarea {
  height: calc(4.5em + 1.6rem);
  min-height: calc(4.5em + 1.6rem);
  line-height: 1.5;
  text-transform: none;
  resize: vertical;
}
.fyb-form input::placeholder,
.fyb-form textarea::placeholder { color: #999; }

/* file field — the dashed drop-box look, built on GF's real file input */
.fyb-form .ginput_container_fileupload { background: var(--fyb-offwhite); border: 2px dashed #b5b0a6; padding: 0.6rem 0.85rem; }
.fyb-form .ginput_container_fileupload:hover { border-color: #857f73; }
.fyb-form input[type="file"] { width: 100%; color: #666; font-size: 0.8rem; font-weight: 700; }
.fyb-form input[type="file"]::file-selector-button {
  background: #ddd8cf; border: 0; color: #333;
  font: inherit; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0.4rem 0.8rem; margin-right: 0.8rem; cursor: pointer;
}
.fyb-form .gfield_description { color: #f3f1ee; font-size: 0.8rem; padding: 0.4rem 0 0; }
/* the file field's hint sits inside the pale drop-box, so it needs dark ink */
.fyb-form .gfield--type-fileupload .gfield_description { color: #6b6459; padding: 0.3rem 0 0; font-size: 0.72rem; }

/* consent checkbox + submit share a row, as they did before */
.fyb-form .gfield--type-consent .ginput_container_consent { display: flex; align-items: flex-start; gap: 0.75rem; max-width: 26rem; }
.fyb-form .gfield--type-consent input[type="checkbox"] {
  flex: 0 0 auto; width: 26px; height: 26px; margin: 0;
  appearance: none; -webkit-appearance: none;
  background: var(--fyb-offwhite); border: 0; border-radius: 0; cursor: pointer;
}
.fyb-form .gfield--type-consent input[type="checkbox"]:checked::after {
  content: "\2713"; display: block; color: #000; font-weight: 900;
  font-size: 20px; line-height: 26px; text-align: center;
}
.fyb-form .gfield_consent_label,
.fyb-form .gfield--type-consent label { color: #f3f1ee; font-size: 0.9rem; line-height: 1.45; margin: 0; }
.fyb-form .gfield_consent_label a { color: #fff; text-decoration: underline; }

.fyb-form .gform_footer { padding: 0; margin: 0.9rem 0 0; }
.fyb-form .gform_button {
  background: none; border: 0; padding: 0;
  color: #fff; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  text-decoration: underline; text-underline-offset: 5px; cursor: pointer;
}
.fyb-form .gform_button:hover { color: var(--fyb-orange); }

/* validation + confirmation */
.fyb-form .gfield_error input,
.fyb-form .gfield_error textarea { outline: 2px solid #ff6b6b; }
.fyb-form .validation_message,
.fyb-form .gform_validation_errors { background: none; border: 0; color: #ffb3b3; font-size: 0.85rem; padding: 0.35rem 0 0; }
.fyb-form .gform_confirmation_message { color: #f3f1ee; font-weight: 700; }

.upload-note {
  color: #f3f1ee;
  line-height: 1.6;            /* size inherits from .body-copy */
  margin: 0.75rem 0 1rem;
}
.upload-tag { color: #fff; font-weight: 800; }

.btn-submit {
  background: none;
  border: 0;
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: underline;
  text-underline-offset: 5px;
}

footer { background: #000; padding: 3rem 0; }
.site-footer { background: #000; padding: 3rem 0 2.5rem; text-align: center; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: center; }
.footer-links a {
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  text-decoration: none;
}
.footer-links a:hover { color: var(--fyb-orange); text-decoration: underline; text-underline-offset: 5px; }
.footer-copy {
  margin-top: 1.1rem;
  color: #8b8b8b;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- legal pages (privacy policy, submission terms) ---------- */
.legal-meta {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  color: var(--fyb-orange);
  margin-bottom: 2rem;
}
.page-content .legal-h2 {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  margin: 2.5rem 0 0.9rem;
  color: #fff;
}
.page-content p { max-width: 46rem; line-height: 1.7; font-size: clamp(1rem, 1.35vw, 1.2rem); margin-bottom: 1rem; }
.page-content strong { color: #fff; }

/* ---------- Product / inner pages (WooCommerce) ---------- */
.product-section { padding-top: 9rem; }
.product-kicker {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.85rem;
  color: var(--fyb-orange);
  margin-bottom: 0.75rem;
}
.product-title { margin-bottom: 1rem; }
.product-price {
  font-weight: 800;
  font-size: 1.6rem;
  color: #fff;
  margin-bottom: 1.25rem;
}
.product-price del { opacity: 0.5; margin-right: 0.5rem; }
.product-short { margin-bottom: 2rem; }
.product-thumbs a { display: block; }
.product-thumb { margin-bottom: 0.75rem; }
.product-thumb > a { cursor: zoom-in; }

/* WooCommerce form, restyled dark */
.fyb-cart-form .variations { width: 100%; margin-bottom: 1.5rem; }
.fyb-cart-form .variations td { padding: 0.35rem 0; border: 0; }
.fyb-cart-form .variations th.label {
  width: 6.5rem;                 /* shared label column width — QUANTITY aligns to this */
  padding-right: 0.75rem;
  vertical-align: middle;
}
.fyb-cart-form .variations label {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
  color: #fff;
  margin: 0;
}
.fyb-cart-form select {
  width: 100%;
  background: #111;
  color: #fff;
  border: 1px solid #444;
  border-radius: 0;
  padding: 0.7rem 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
}
.fyb-cart-form .reset_variations { color: #999; font-size: 0.75rem; }
/* quantity + add-to-cart stack in a flex column — flex ignores WooCommerce's
   float on div.quantity, which was overriding the margin and causing overlap */
.fyb-cart-form .woocommerce-variation-add-to-cart,
.fyb-cart-form form.cart:not(.variations_form) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.6rem;
}
/* quantity gets a visible label matching the SIZE/COLORS rows */
.fyb-cart-form .quantity {
  display: flex;
  align-items: center;
  float: none !important;
  margin: 0.4rem 0 0 !important;
}
.fyb-cart-form .quantity::before {
  content: 'Quantity';
  flex: 0 0 6.5rem;
  padding-right: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
  color: #fff;
}
.fyb-cart-form .quantity .qty {
  width: 5rem;
  background: #111;
  color: #fff;
  border: 1px solid #444;
  border-radius: 0;
  padding: 0.7rem 0.5rem;
  font-weight: 700;
  margin-right: 0.75rem;
}
.fyb-cart-form .single_add_to_cart_button {
  /* full width so it matches the WooPay express button stacked beneath it */
  display: block;
  width: 100%;
  min-height: 48px;              /* WooPay renders at 48px — keep both the same height */
  text-align: center;
  margin-top: 0;                 /* the flex column's gap handles separation */
  background: var(--fyb-orange) !important; /* Woo's stylesheet loads later and repaints it */
  color: #fff !important;
  border: 0;
  border-radius: 0;
  padding: 0.85rem 1.5rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.fyb-cart-form .single_add_to_cart_button:hover { background: #a85809; }
/* WooPay / express checkout sits below Add to Cart with space between them */
.fyb-cart-form .wcpay-express-checkout-wrapper,
.fyb-cart-form #wcpay-woopay-button { margin-top: 0.85rem; }
.fyb-cart-form .wcpay-express-checkout-wrapper .woopay-express-button,
.fyb-cart-form #wcpay-woopay-button > div { width: 100% !important; }
.fyb-cart-form .wcpay-express-checkout-wrapper > div + div { margin-top: 0.85rem; }
.fyb-cart-form .single_add_to_cart_button.disabled { opacity: 0.4; cursor: not-allowed; }
.fyb-cart-form .woocommerce-variation-price { margin-bottom: 1rem; }
.fyb-cart-form .woocommerce-variation-price .price { color: #fff; font-weight: 800; }
.fyb-cart-form .stock.in-stock { color: #7fc97f; font-size: 0.85rem; }
.fyb-cart-form .stock.out-of-stock { color: #e07070; font-size: 0.85rem; }

/* ---------- "The Attic" merch store ---------- */
.store-hero {
  min-height: 60vh;
  background: #1a0f08 url('img/store-hero.jpg?v=2') center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 7rem 1rem 3rem;
}
.store-hero-title {
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-size: clamp(3rem, 10vw, 9rem);
  margin: 0;
}
.store-hero-sub {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(1rem, 2vw, 1.5rem);
}
.store-section { padding-top: 4.5rem; }
.store-section-light { background: #fff; }
.store-section-dark { background: #000; }
.store-title {
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-size: clamp(2.75rem, 9vw, 8rem);
  text-align: center;
  margin-bottom: 3.5rem;
}
.store-section-light .store-title { color: var(--fyb-brown); }
.store-section-dark .store-title { color: #fff; }
.store-tile { position: relative; }
/* every tile crops to the same square so PSD tiles (473x533) and Printify
   mockups (2048x2048) line up in the grid regardless of source ratio */
.store-tile img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
}
/* title + button stack at the bottom of each tile. Both sit on a white chip so
   they stay legible over any product image (white mockups, grass, dark puck). */
.store-meta {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  /* generous top padding gives the gradient room to fade in from nothing */
  padding: 4rem 0.75rem 1.25rem;
  background: linear-gradient(to bottom,
              rgba(0,0,0,0) 0%,
              rgba(0,0,0,0.45) 45%,
              rgba(0,0,0,0.78) 100%);
  pointer-events: none;          /* only the links inside stay clickable */
}
.store-meta a { pointer-events: auto; }
.store-item-title {
  max-width: 100%;
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.8rem;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}
.store-item-title:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.store-add {
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  padding: 0.55rem 1.8rem;
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.store-add:hover { background: #fff; color: #1a1a1a; text-decoration: none; }

/* WooCommerce block components (cart / checkout) on dark */
.fyb-inner-page .wp-block-woocommerce-cart,
.fyb-inner-page .wp-block-woocommerce-checkout { color: #f3f1ee; }
.fyb-inner-page [class*="wc-block-components"] { color: inherit; }
.fyb-inner-page .wc-block-components-product-name,
.fyb-inner-page .wc-block-components-product-price,
.fyb-inner-page .wc-block-components-totals-item,
.fyb-inner-page .wc-block-components-totals-footer-item,
.fyb-inner-page .wc-block-components-formatted-money-amount,
.fyb-inner-page .wc-block-components-checkout-step__title,
.fyb-inner-page .wc-block-components-title { color: #fff; }
.fyb-inner-page .wc-block-components-sidebar,
.fyb-inner-page .wc-block-components-main { border-color: #333; }
.fyb-inner-page .wc-block-components-text-input input,
.fyb-inner-page .wc-block-components-combobox input,
.fyb-inner-page .wc-block-components-country-input input,
.fyb-inner-page .wc-block-components-quantity-selector,
.fyb-inner-page .wc-block-components-quantity-selector input {
  background: #111;
  color: #fff;
  border-color: #444;
}
.fyb-inner-page .wc-block-components-text-input label,
.fyb-inner-page .wc-block-components-combobox label { color: #aaa; }
.fyb-inner-page .wc-block-components-button:not(.is-link) {
  background: var(--fyb-orange) !important;
  color: #fff !important;
  border-radius: 0;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.05em;
}
.fyb-inner-page .wc-block-components-button:not(.is-link):hover { background: #a85809 !important; }

/* My Account (classic markup) */
.page-content .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; }
.page-content .woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid #333;
}
.page-content .woocommerce-MyAccount-navigation a {
  display: block;
  padding: 0.7rem 0;
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.85rem;
}
.page-content .woocommerce-MyAccount-navigation .is-active a { color: var(--fyb-gold); }
.page-content .woocommerce-form-login,
.page-content .woocommerce-form-register {
  border: 1px solid #333 !important;
  border-radius: 0 !important;
  max-width: 30rem;
}
.page-content .woocommerce-form-login label,
.page-content .woocommerce-form-register label { color: #f3f1ee; }

/* generic inner-page content (cart, checkout) readable on black */
.page-content { color: #f3f1ee; }
.page-content a { color: var(--fyb-gold); }
.page-content .shop_table,
.page-content .shop_table td,
.page-content .shop_table th { color: #f3f1ee; border-color: #333; }
.page-content .button,
.page-content button[type="submit"] {
  background: var(--fyb-orange);
  color: #fff;
  border: 0;
  border-radius: 0;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.05em;
}
.page-content input[type="text"],
.page-content input[type="email"],
.page-content input[type="tel"],
.page-content input[type="number"],
.page-content select,
.page-content textarea {
  background: #111;
  color: #fff;
  border: 1px solid #444;
  border-radius: 0;
}

/* story copy column ends above the pulled-up "Tell Us" headline */
@media (min-width: 992px) {
  .story-copy-col { padding-bottom: 110px; }
}

/* ---------- phones: keep AOS from widening the page ----------
   AOS parks fade-left / fade-right elements 100px to the side until they
   animate in. On a phone those columns are full-width, so the offset pushes
   the document 100px wider than the screen: the whole page scrolls sideways,
   and fixed UI anchored to the right (the "Close Episodes" button) gets
   dragged out of view with it. Keep the fade, drop the sideways travel. */
@media (max-width: 767.98px) {
  [data-aos="fade-left"]:not(.aos-animate),
  [data-aos="fade-right"]:not(.aos-animate),
  [data-aos="fade-up-left"]:not(.aos-animate),
  [data-aos="fade-up-right"]:not(.aos-animate),
  [data-aos="fade-down-left"]:not(.aos-animate),
  [data-aos="fade-down-right"]:not(.aos-animate) {
    transform: translate3d(0, 0, 0);
  }
}

/* ---------- cart: nav count badge + a way back to the store ---------- */
.nav-link .cart-count {
  display: inline-block;
  min-width: 1.15rem;
  margin-left: 0.4rem;
  padding: 0 0.28rem;
  background: var(--fyb-orange);
  color: #fff;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.15rem;
  text-align: center;
  vertical-align: 1px;
}
.fyb-back-to-store {
  display: block;
  margin-top: 0.9rem;
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.fyb-back-to-store:hover { color: var(--fyb-orange); text-decoration: underline; }

/* the suggestions heading is a core block, so it renders in the block editor's
   font rather than the site's — pull it back to the theme headline treatment */
.wp-block-woocommerce-cart .wp-block-heading {
  font-family: inherit;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.01em;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  margin-top: 3rem;
}
.wp-block-woocommerce-cart .wc-block-cart__empty-cart__title { margin-top: 0; }

/* suggested products on the cart — WooCommerce's grid defaults are off-brand,
   and this block only became visible once it was set to show on a filled cart */
.wp-block-woocommerce-cart .wc-block-grid__product-title,
.wp-block-woocommerce-cart .wc-block-grid__product-title a { color: #fff; font-weight: 800; }
.wp-block-woocommerce-cart .wc-block-grid__product-title a:hover { color: var(--fyb-orange); }
.wp-block-woocommerce-cart .wc-block-grid__product-price { color: #cfc9bf; }
.wp-block-woocommerce-cart .wc-block-grid__product .wp-block-button__link,
.wp-block-woocommerce-cart .wc-block-grid__product .add_to_cart_button {
  background: var(--fyb-orange);
  color: #fff;
  border: 0;
  border-radius: 0;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
  padding: 0.6rem 1.1rem;
}
.wp-block-woocommerce-cart .wc-block-grid__product .wp-block-button__link:hover,
.wp-block-woocommerce-cart .wc-block-grid__product .add_to_cart_button:hover { background: #ff8c1a; color: #fff; }

/* ---------- product description ---------- */
.product-description { max-width: 46rem; margin-bottom: 1.75rem; }
.product-description p { margin-bottom: 0.9rem; }
.product-description p:last-child { margin-bottom: 0; }
.product-description strong,
.product-description b { color: #fff; font-weight: 800; }
.product-description h2,
.product-description h3,
.product-description h4 {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1rem;
  margin: 1.75rem 0 0.75rem;
}
.product-description ul,
.product-description ol { margin: 0 0 1rem 1.15rem; padding: 0; }
.product-description li { margin-bottom: 0.35rem; }
/* spec lines, folded out of "• " paragraphs — single spaced, bullet kept */
.product-description .fyb-spec-list { list-style: none; margin: 0 0 1.1rem; padding: 0; }
.product-description .fyb-spec-list li {
  position: relative;
  padding-left: 0.95rem;
  margin: 0;
  line-height: 1.55;
}
.product-description .fyb-spec-list li::before { content: "\2022"; position: absolute; left: 0; }
.product-description a { color: var(--fyb-orange); text-decoration: underline; }

/* ---------- WooCommerce notices ----------
   Notices are pale panels that assume dark text, but the site's light body
   colour inherits straight into them — every variant (error, warning, info,
   success) was rendering near-invisible, around 1.05:1. Set the ink here so
   the whole component is fixed rather than one message. */
/* NB: `.fyb-inner-page [class*="wc-block-components"] { color: inherit }` below
   forces every block component to take the page's light text. Notices are the
   exception, so these selectors carry the .fyb-inner-page prefix too — without
   it they lose the cascade to that blanket rule. */
.wc-block-components-notice-banner,
.wc-block-components-notice-banner *,
.wc-block-components-validation-error,
.fyb-inner-page .wc-block-components-notice-banner,
.fyb-inner-page .wc-block-components-notice-banner *,
.fyb-inner-page .wc-block-components-validation-error,
.fyb-inner-page .wc-block-components-checkout-step__description--error,
.woocommerce-error,
.woocommerce-error *,
.woocommerce-message,
.woocommerce-message *,
.woocommerce-info,
.woocommerce-info *,
.woocommerce-noreviews,
.wc-block-components-checkout-step__description--error {
  color: #1e1e1e;
}
.wc-block-components-notice-banner a,
.fyb-inner-page .wc-block-components-notice-banner a,
.woocommerce-error a,
.woocommerce-message a,
.woocommerce-info a {
  color: #7a3f05;
  text-decoration: underline;
}
.wc-block-components-notice-banner a:hover,
.woocommerce-error a:hover,
.woocommerce-message a:hover,
.woocommerce-info a:hover { color: #000; }
/* the coloured status icon is meaningful — leave it its own colour */
.wc-block-components-notice-banner > svg { color: inherit; }
.wc-block-components-notice-banner.is-error > svg,
.fyb-inner-page .wc-block-components-notice-banner.is-error > svg { color: #cc1818; }
.wc-block-components-notice-banner.is-warning > svg,
.fyb-inner-page .wc-block-components-notice-banner.is-warning > svg { color: #f0b849; }
.wc-block-components-notice-banner.is-info > svg,
.fyb-inner-page .wc-block-components-notice-banner.is-info > svg { color: #007cba; }
.wc-block-components-notice-banner.is-success > svg,
.fyb-inner-page .wc-block-components-notice-banner.is-success > svg { color: #4ab866; }

/* ---------- 404 ---------- */
.fyb-404 { min-height: 62vh; display: flex; align-items: center; }
.fyb-404-kicker {
  font-weight: 800; text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 0.8rem; color: var(--fyb-orange); margin-bottom: 1rem;
}
.fyb-404-copy { max-width: 34rem; margin: 1.75rem 0 2.25rem; }
.fyb-404-links { display: flex; flex-wrap: wrap; gap: 0.75rem 2.5rem; }

/* ---------- fixed scroll cue (homepage) ---------- */
/* Parks in the bottom-right corner, and glides to the middle of the screen
   while the episode track has taken over (see .is-centered below). Anchored by
   left/top in both states so the move between them can transition; transform
   is left to the bob animation. */
.scroll-cue {
  position: fixed;
  left: calc(100% - 3.25rem);
  top: calc(100% - 3.25rem);
  transform: translate(-50%, -50%);
  z-index: 1020;
  display: block;
  line-height: 0;
  opacity: 1;
  transition: left 0.55s ease, top 0.55s ease, opacity 0.4s ease;
  animation: scroll-cue-bob 1.8s ease-in-out infinite;
}
.scroll-cue img { width: 23px; height: auto; display: block; }
.scroll-cue.is-hidden { opacity: 0; pointer-events: none; }
/* episodes open: slides along the bottom to the middle, same height as its
   parked position, and stays out of the way of a click */
.scroll-cue.is-centered { left: 50%; pointer-events: none; }
/* phones don't get the horizontal takeover, so "Close Episodes" keeps the
   bottom-right corner and the cue steps across to the other side */
.scroll-cue.is-parked-left { left: 3.25rem; }
@keyframes scroll-cue-bob {
  0%, 100% { transform: translate(-50%, -50%); }
  50%      { transform: translate(-50%, calc(-50% + 8px)); }
}
@media (prefers-reduced-motion: reduce) { .scroll-cue { animation: none; } }

/* ---------- Sarah's round: contact-form copy, agree checkbox, footer social ---------- */
/* copy beside the story form reads larger */
#your-story .body-copy { max-width: 38rem; }
/* the giant "Tell Us The Story" headline is pulled up over the form's lower
   area, so its column was swallowing clicks on the agree checkbox. Keep the
   form above it and make the headline click-through. */
#your-story .story-form-row { position: relative; z-index: 2; }
#your-story .story-headline-row { position: relative; z-index: 1; pointer-events: none; }
#your-story .story-headline-row .display-giant-3x { pointer-events: none; }


/* required agreement checkbox, sits opposite Submit */
.form-agree-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
}
.form-agree { display: flex; align-items: flex-start; gap: 0.75rem; max-width: 26rem; }
.form-agree input[type="checkbox"] {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: var(--fyb-offwhite);
  border: 0;
  cursor: pointer;
}
.form-agree input[type="checkbox"]:checked {
  background: var(--fyb-offwhite)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")
    center / 18px no-repeat;
}
.form-agree input[type="checkbox"]:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.form-agree label { margin: 0; font-size: 0.9rem; line-height: 1.4; color: #f3f1ee; cursor: pointer; }
.form-agree label a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* footer social icons */
.footer-social { display: flex; gap: 1.5rem; justify-content: center; margin-bottom: 1.5rem; }
.footer-social a { color: #fff; line-height: 0; display: block; transition: color 0.2s, transform 0.2s; }
.footer-social a:hover { color: var(--fyb-orange); transform: translateY(-2px); }
.footer-social svg { width: 26px; height: 26px; display: block; }