/* ===========================
   ABOUT US (scoped to this page only)
   =========================== */

/* Solid black page */
.page-about{
  background: #000;
  color: var(--sb-text);
}

/* Force black for all sections on About */
.page-about .section-dark,
.page-about .section-darker,
.page-about #footer,
.page-about .about-logo-wrap{
  background: #000 !important;
}

/* Hero (text only, solid black; same footprint as index hero) */
.page-about .about-hero{
  position: relative;
  z-index: 0;
  height: 100vh;
  background: #000;
}
.page-about .about-hero__title{
  font-family: "Freeman", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: clamp(2.25rem, 6vw, 5rem);
  margin: 0;
  color: #fff;
}

/* Copy scale (matches index vibe) */
.page-about .about-copy{
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
  margin: 0;
  text-align: center;
  font-size: clamp(1.4rem, 2.4vw, 2.25rem);
}

/* ===== Tighten vertical rhythm on text sections ===== */
.page-about .section-dark .container,
.page-about .section-darker .container{
  padding-top: 1.75rem !important;
  padding-bottom: 1.75rem !important;
}
@media (min-width: 992px){
  .page-about .section-dark .container,
  .page-about .section-darker .container{
    padding-top: 2.25rem !important;   /* was ~3rem via .py-5 */
    padding-bottom: 2.25rem !important;
  }
}

/* Also rein in the artists strip padding (its container uses .py-6 globally) */
.page-about #artists-strip .container{
  padding-top: 2.25rem !important;
  padding-bottom: 2.25rem !important;
}

/* Full-bleed media blocks: same size as hero */
.page-about .about-media{
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: #000;
  isolation: isolate; /* ensure overlays sit above media */
}
.page-about .about-media > img,
.page-about .about-media > video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1; /* under the vignette */
}

/* ===== Ultra-aggressive vignette for all non-hero media =====
   1) ::before = deep inset shadow to push edges to pure black
   2) ::after  = layered gradients for long, smooth falloff
*/
.page-about .about-media::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow:
    inset 0 0 260px 160px rgba(0,0,0,1),
    inset 0 0 480px 280px rgba(0,0,0,.96);
}
.page-about .about-media::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;                 /* above img/video and ::before */
  pointer-events: none;
  background:
    radial-gradient(72% 66% at 50% 48%,
      rgba(0,0,0,0)    20%,
      rgba(0,0,0,.72)  48%,
      rgba(0,0,0,.94)  68%,
      #000             86%
    ),
    linear-gradient(to bottom,
      #000 0%,
      rgba(0,0,0,0) 12%,
      rgba(0,0,0,0) 88%,
      #000 100%
    ),
    linear-gradient(to right,
      #000 0%,
      rgba(0,0,0,0) 16%,
      rgba(0,0,0,0) 84%,
      #000 100%
    );
}

/* === About page only: remove Artists Strip borders/corner ticks === */
.page-about #artists-strip.artists-strip{
  border: none !important;
}
.page-about #artists-strip.artists-strip::before,
.page-about #artists-strip.artists-strip::after{
  display: none !important;
  content: none !important;
}

/* === About page only: keep navbar always visible (disable hide-on-scroll) === */
.page-about .navbar.hidden{
  transform: none !important;
}
.page-about .navbar{
  transition: none !important; /* prevents subtle slide/flicker on class toggles */
}

/* ===========================
   Signup Banner (compact card)
   =========================== */
.signup-banner{
	position: fixed;
	left: 0; right: 0;
	bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
	width: clamp(300px, 90vw, 640px);
	margin: 0 auto;
	transform: none;
	box-sizing: border-box;
	background: rgba(0,0,0,.92);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 20px;
	padding: 16px 16px 16px 20px;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	column-gap: 16px;
	z-index: 1040;
	box-shadow: 0 10px 28px rgba(0,0,0,.45);
	overflow: visible; /* let the X float outside */
}
.signup-banner__left{ display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.signup-banner__title{
	font-weight: 900;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-size: .95rem;
	line-height: 1.15;
	color: #fff;
}
.signup-banner__subtitle{
	font-size: .85rem;
	line-height: 1.3;
	color: rgba(255,255,255,.85);
	margin: 0;
}
.signup-banner__cta{
	white-space: nowrap;
	font-size: .9rem;
	line-height: 1.1;
	padding: 8px 16px;
	min-width: 112px;
	border-radius: 999px;
	box-shadow: none !important;
	border: 0;
}
.signup-banner__cta:focus,
.signup-banner__cta:active{ box-shadow: none !important; transform: none !important; }

/* Edge-floating X button */
.signup-banner__close{
	position: absolute;
	top: -18px;
	right: -18px;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: rgba(255,255,255,.95);
	color: #111;
	border: 0;
	display: grid;
	place-items: center;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(0,0,0,.25);
	z-index: 1041;
	pointer-events: auto;
}
.signup-banner__close:hover{ background: #fff; }

@media (max-width: 575.98px){
	.signup-banner{
		grid-template-columns: 1fr;
		row-gap: 10px;
		padding-right: 44px; /* space for the X */
	}
	.signup-banner__cta{ justify-self: start; }
}

/* Old fixed button (ensure it never shows) */
.signup-fixed-btn{ display: none !important; }

/* Modal backdrop: solid black at 10%, instant open/close */
#signupModal,
#signupModal .modal-dialog,
#signupModal .modal-content{ transition: none !important; animation: none !important; }
#signupModal .modal-dialog{ transform: none !important; }
.modal-backdrop{ background-color: #000 !important; opacity: .10 !important; transition: none !important; animation: none !important; }
.modal-backdrop.show{ opacity: .10 !important; }

/* === Signup banner close button: perfect 22x22 with centered X === */
.signup-banner__close{
  width: 22px !important;
  height: 22px !important;
  top: -11px !important;                 /* straddles the card edge */
  right: -11px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.95) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.22) !important;

  /* center container */
  position: absolute;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  line-height: 1 !important;

  /* hide the font glyph and use CSS lines instead */
  color: transparent !important;
  font-size: 0 !important;
}

/* Draw the X with two centered lines */
.signup-banner__close::before,
.signup-banner__close::after{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 12px;                           /* length of each stroke */
  height: 2px;                           /* thickness */
  background: #111;
  border-radius: 2px;
  transform-origin: center;
}

.signup-banner__close::before{
  transform: translate(-50%, -50%) rotate(45deg);
}
.signup-banner__close::after{
  transform: translate(-50%, -50%) rotate(-45deg);
}

.signup-banner__close:hover{ background: #fff !important; }


/* Disable vignette on a specific block if ever needed */
.page-about .about-media.no-vignette::before,
.page-about .about-media.no-vignette::after{ display: none; }

/* ===== Centered logo/photo (not full-bleed) — tightened spacing ===== */
.page-about .about-logo-wrap{
  display: grid;
  place-items: center;
  padding: 2.25rem 1rem;              /* was 6rem */
}
@media (min-width: 992px){
  .page-about .about-logo-wrap{
    padding: 3rem 1rem;               /* was 6rem */
  }
}
.page-about .about-logo{
  width: clamp(220px, 30vw, 460px);
  height: auto;
  display: block;
  filter: drop-shadow(0