/* ---------------------------------------------------------------------------
   The Vic Mensa Show: landing page
   Brand: Swiss modernism x Black political print culture.
   Palette + type per TVMS Brand Guide (Ani Sivakumar, 2026).
--------------------------------------------------------------------------- */

@font-face {
  font-family: "Swiss 911 UC";
  src: url("fonts/swiss911-ultra-compressed.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Arimo";
  src: url("fonts/arimo-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand Guide color system */
  --orange: #FF8000;        /* Full Orange, graphic fields */
  --orange-photo: #C9541A;  /* burnt orange, photographic register + scrims */
  --orange-deep: #D25713;   /* shipped-art deep orange */
  --cream: #F7F5EC;         /* Breathe */
  --ink: #191818;           /* Ash */
  --flame: #D90B1D;
  --crown: #F6B117;
  --root: #037246;
  --dew: #D9E99F;

  --display: "Swiss 911 UC", sans-serif;
  --body: "Arimo", sans-serif;

  --radius: 0;
  --gutter: clamp(20px, 5vw, 72px);
  --measure: 62ch;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- shared type ---------- */

.label {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
}
.label::before {
  content: "";
  width: 14px; height: 14px;
  background: currentColor;
  -webkit-mask: url("assets/fruit.svg") no-repeat center / contain;
  mask: url("assets/fruit.svg") no-repeat center / contain;
}

.display {
  font-family: var(--display);
  font-weight: 400;
  text-transform: lowercase;
  line-height: 0.92;
  letter-spacing: 0.005em;
  margin: 0;
}

.btn {
  display: inline-block;
  font-family: var(--display);
  font-size: 22px;
  text-transform: lowercase;
  letter-spacing: 0.03em;
  color: var(--cream);
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 14px 34px 16px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.08s ease, background 0.15s ease, color 0.15s ease;
}
.btn:hover { background: var(--cream); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--crown); outline-offset: 3px; }

.btn--cream { color: var(--ink); background: var(--cream); border-color: var(--cream); }
.btn--cream:hover { background: transparent; color: var(--cream); }
.btn--outline { color: var(--cream); background: transparent; border-color: var(--cream); }
.btn--outline:hover { background: var(--cream); color: var(--ink); }

/* ---------- header ---------- */

.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: clamp(16px, 3vw, 30px) var(--gutter);
}
.site-header .btn { font-size: 18px; padding: 10px 24px 12px; }

/* ---------- hero ---------- */

.hero:target { min-height: 900px; } /* capture/QA aid; inert in normal browsing */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--orange-photo);
}
.hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 68% 30%;
}
.hero::after {
  /* Full-Page-Show-Art device: photo settles into a flat orange field */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    rgba(160, 62, 15, 0.92) 0%,
    rgba(160, 62, 15, 0.55) 18%,
    rgba(160, 62, 15, 0) 42%
  );
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 var(--gutter) clamp(40px, 7vh, 84px);
  color: var(--cream);
}
.hero__lockup {
  width: clamp(190px, 26vw, 330px);
  height: auto;
  color: var(--cream);
  filter: drop-shadow(0 2px 24px rgba(80, 30, 5, 0.25));
}
.hero__meta {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  margin: 26px 0 18px;
  opacity: 0.92;
}
.hero__lede {
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.5;
  font-weight: 400;
  max-width: 46ch;
  margin: 0 0 30px;
}
.hero__cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

/* ---------- generic band ---------- */

.band { padding: clamp(72px, 11vw, 150px) var(--gutter); }
.band--cream { background: var(--cream); color: var(--ink); }
.band--ink { background: var(--ink); color: var(--cream); }
.band--orange {
  background: var(--orange) url("assets/host-pattern.png") center / cover;
  color: #fff;
}

.band__inner { max-width: 1180px; margin: 0 auto; }

/* ---------- manifesto ---------- */

.manifesto { text-align: left; }
.manifesto .display {
  font-size: clamp(52px, 9.5vw, 138px);
  max-width: 11em;
}
.manifesto__attr {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  margin-top: 30px;
}

/* ---------- two-column feature ---------- */

.feature {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(36px, 6vw, 90px);
  align-items: center;
}
.feature--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.feature h2.display { font-size: clamp(44px, 6.5vw, 96px); margin-bottom: 26px; }
.feature p { max-width: var(--measure); margin: 0 0 1.1em; }
.feature p:last-of-type { margin-bottom: 0; }

.framed {
  position: relative;
  border: 2px solid var(--ink);
  background: var(--ink);
}
.framed img { width: 100%; height: auto; }
.framed__caption {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  margin-top: 14px;
}

/* ---------- watch ---------- */

.watch .display {
  font-size: clamp(48px, 8vw, 120px);
  margin-bottom: clamp(28px, 4vw, 52px);
}
.watch__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 2px solid var(--cream);
  background: #000;
}
.watch__frame iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.watch__unmute {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
}
.watch__unmute[hidden] { display: none; }

.watch__caption {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  margin-top: 14px;
}

.listen {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: clamp(24px, 3vw, 36px);
}
.listen__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
  opacity: 0.72;
}
.listen__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}
.listen__links a {
  color: var(--cream);
  text-decoration: none;
  border-bottom: 2px solid var(--orange);
  padding-bottom: 2px;
}
.listen__links a:hover { color: var(--orange); }

/* ---------- season one ---------- */

.season .display { font-size: clamp(48px, 8vw, 120px); max-width: 9.5em; }
.season__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
  margin-top: clamp(30px, 4vw, 54px);
}
.season__copy p { max-width: 52ch; margin: 0 0 1.1em; }
.season__themes {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 12px;
}
.season__themes li {
  font-family: var(--display);
  font-size: clamp(24px, 3vw, 38px);
  text-transform: lowercase;
  line-height: 1.05;
  padding-left: 26px;
  position: relative;
}
.season__themes li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.32em;
  width: 15px; height: 15px;
  background: var(--orange);
  -webkit-mask: url("assets/fruit.svg") no-repeat center / contain;
  mask: url("assets/fruit.svg") no-repeat center / contain;
}
.season .btn { margin-top: 34px; }

/* ---------- signup ---------- */

.signup { text-align: center; }
.signup .band__inner { max-width: 760px; }
.signup .display { font-size: clamp(52px, 8vw, 110px); }
.signup__sub {
  max-width: 46ch;
  margin: 24px auto 40px;
  font-size: clamp(16px, 1.8vw, 19px);
}
.signup__panel {
  background: var(--cream);
  border: 2px solid var(--ink);
  padding: clamp(18px, 3.5vw, 40px);
  text-align: left;
}
.signup__fineprint {
  font-size: 12.5px;
  margin-top: 26px;
  opacity: 0.75;
}

/* Rivet container: widget injects an open-shadow div here */
#rivet-slot { min-height: 60px; }

/* ---------- fallback form (hidden unless Rivet fails) ---------- */

.fallback { display: none; }
.fallback.is-active { display: block; }
.fallback .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.fallback .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.fallback label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0; text-transform: uppercase;
}
.fallback input {
  font-family: var(--body);
  font-size: 16px;
  color: var(--ink);
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 12px 14px;
  width: 100%;
}
.fallback input:focus-visible { outline: 3px solid var(--crown); outline-offset: 1px; }
.fallback .btn { width: 100%; margin-top: 6px; }
.fallback__error { color: var(--flame); font-size: 14px; font-weight: 700; }
.fallback__ok { font-size: 17px; font-weight: 700; }

/* ---------- footer ---------- */

.site-footer {
  background: var(--ink);
  color: var(--cream);
  padding: clamp(56px, 8vw, 96px) var(--gutter) 40px;
}
.site-footer__inner {
  max-width: 1180px; margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
.site-footer__stamp {
  width: clamp(120px, 16vw, 190px);
  height: auto;
  color: var(--cream);
}
.site-footer__tag {
  font-family: var(--body);
  font-weight: 700;
  font-size: 16px;
  text-transform: lowercase;
  line-height: 1.3;
  margin: 0 0 16px;
}
.site-footer__links {
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0; text-transform: uppercase;
}
.site-footer__links a { color: var(--cream); text-decoration: none; border-bottom: 2px solid var(--orange); padding-bottom: 2px; }
.site-footer__links a:hover { color: var(--orange); }
.site-footer__legal {
  max-width: 1180px; margin: 44px auto 0;
  font-size: 12px; opacity: 0.72;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}

/* ---------- reveal ---------- */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- responsive ---------- */

@media (max-width: 880px) {
  .feature, .feature--flip, .season__grid { grid-template-columns: 1fr; }
  .feature--flip .framed { order: -1; }
  .site-footer__inner { grid-template-columns: 1fr; }
  .hero__img { object-position: 62% 25%; }
}
@media (max-width: 560px) {
  /* Full-Page-Show-Art device: photo on top, fading into a flat orange
     field that carries the lockup + copy. Nothing overlays Vic. */
  .hero {
    min-height: 0;
    display: block;
    background: #A03E0F;
  }
  .hero__img {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-position: center 15%;
    -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  }
  .hero::after { display: none; }
  .hero__inner { padding-top: 0; margin-top: -14vw; }
  .hero__lockup { width: min(62vw, 240px); }
  .fallback .row { grid-template-columns: 1fr; }
}

/* ---------- cookie consent ---------- */
/* Fixed bottom bar, flat cream field with a hard ink rule. No radius, no
   shadow, consistent with the rest of the page. Hidden via [hidden] until
   script.js decides the visitor still owes a choice, then slid in. */
.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--cream);
  border-top: 2px solid var(--ink);
  padding: 16px var(--gutter);
  transform: translateY(100%);
  transition: transform 0.28s ease;
}
.consent.is-in { transform: translateY(0); }

.consent__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.consent__copy {
  flex: 1 1 320px;
  margin: 0;
  max-width: 74ch;
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
.consent__actions {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  /* The copy is capped at 74ch for readability, so push the buttons out to the
     bar's right edge instead of letting them trail the text. */
  margin-left: auto;
}

/* Compact variant of the site button, plus an outline pairing so "decline"
   reads as an equal choice rather than a discouraged one. */
.btn--sm { font-size: 17px; padding: 8px 22px 10px; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--cream); }

@media (prefers-reduced-motion: reduce) {
  .consent { transition: none; }
}

@media (max-width: 560px) {
  .consent { padding: 14px 20px; }
  .consent__inner { gap: 14px; }
  .consent__actions { width: 100%; }
  .consent__actions .btn { flex: 1 1 0; text-align: center; }
}

/* ---------- coming-soon holding page (index.html until 2026-08-10) ---------- */
/* Flat orange field carrying the cream lockup and the caption line, nothing else.
   Signup and the rest of the content live on the launched site (launch.html).
   Reuses .consent from the full site, so script.js drives both with no branching. */
.soon-body { background: var(--orange); }

.soon {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(40px, 8vw, 96px) var(--gutter);
  /* keep the fixed consent bar off the caption on short viewports */
  padding-bottom: clamp(120px, 18vh, 190px);
}
.soon__inner {
  width: 100%;
  max-width: 720px;
  text-align: center;
  color: var(--cream);
}

.soon__lockup {
  width: min(52vw, 300px);
  height: auto;
  display: block;
  margin: 0 auto clamp(30px, 5vw, 48px);
}

.soon__caption {
  font-family: var(--body);
  font-size: clamp(11px, 1.5vw, 14px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.5;
  margin: 0;
  color: var(--cream);
}