/* ==========================================================================
   Deion Gill — Vintage Modern
   Palette + type extracted from Deion Gill Brand Bible (2026)
   ========================================================================== */

@font-face {
  font-family: "HelveticaNeueLTStd";
  src: url("../assets/brand/HelveticaNeueLTStd-Bd.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand palette — exact values from the Brand Bible */
  --amber:     #C88D56;
  --brown:     #664D3B;
  --forest:    #414B2A;
  --cognac:    #967339;
  --black:     #262424;
  /* Ground sampled from the panelled wall in the hero photograph — the room's
     own shadow tone, between #190F16 (deep shadow) and #32211E (lit panel). */
  --wood:      #2B1D17;
  --grey:      #666666;
  --teal:      #688CA8;
  --offwhite:  #FAF9F6;

  /* Derived, for legibility on the dark ground */
  --ink:       var(--offwhite);
  --ink-mute:  rgba(250, 249, 246, 0.52);
  --ink-faint: rgba(250, 249, 246, 0.28);
  --rule:      rgba(250, 249, 246, 0.13);
  --ground:    var(--wood);

  --display: "HelveticaNeueLTStd", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --text: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Restraint: one easing, used everywhere */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --slow: 900ms;
  --med:  480ms;

  --gutter: clamp(1.5rem, 4.5vw, 4.5rem);
  --header-h: clamp(4.5rem, 7vw, 6.5rem);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* --------------------------------------------------------------------------
   Film grain — the Brand Bible asks for analog warmth, not digital sharpness.
   One static turbulence layer, barely there.
   -------------------------------------------------------------------------- */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 9000;
  pointer-events: none;
  opacity: 0.045;
  background-image: 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.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Header — wordmark left, nav right. Present on every page.
   -------------------------------------------------------------------------- */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
}

/* On the interior pages the bar carries no scrim and does not stay put — it
   sits at the top of the document and scrolls away with the content. Absolute
   rather than static so the existing top padding on .page still holds it. */
.header--solid {
  position: absolute;
  background: none;
}

/* On the home page the bar floats over the photograph until the hero leaves. */
.header--float {
  background: linear-gradient(to bottom, rgba(43,29,23,0.55) 0%, rgba(43,29,23,0) 100%);
}

.wordmark {
  display: block;
  width: clamp(166px, 18vw, 262px);
}
.wordmark img {
  width: 100%;
  height: auto;
  transition: opacity var(--med) var(--ease);
}
.wordmark:hover img { opacity: 0.7; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.6vw, 2.6rem);
}

.nav a {
  font-family: var(--display);
  font-size: clamp(0.62rem, 0.78vw, 0.72rem);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0.4em 0;
  position: relative;
  transition: color var(--med) var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--med) var(--ease);
}
.nav a:hover { color: var(--amber); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav a[aria-current="page"] { color: var(--amber); }

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  background: none; border: 0; padding: 0.5rem;
  cursor: pointer; color: var(--ink);
}
.nav-toggle span {
  display: block; width: 22px; height: 1.5px;
  background: currentColor; margin: 5px 0;
  transition: transform var(--med) var(--ease), opacity var(--med) var(--ease);
}
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Home — full-bleed photograph, everything else overlaid.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  height: 100svh;
  min-height: 34rem;
  overflow: hidden;
}
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% center;
  transition: object-position var(--slow) var(--ease);
  /* Imperceptible drift — the room breathes, nothing announces itself. */
  animation: drift 42s var(--ease) forwards;
}
@keyframes drift {
  from { transform: scale(1.0); }
  to   { transform: scale(1.065); }
}
/* Deepen the corners so overlaid type always holds. */
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(43,29,23,0.55) 0%, rgba(43,29,23,0) 28%),
    linear-gradient(to top,    rgba(43,29,23,0.62) 0%, rgba(43,29,23,0) 34%);
  pointer-events: none;
}

.hero__foot {
  position: absolute;
  left: var(--gutter); right: var(--gutter);
  bottom: clamp(1.6rem, 4vw, 3rem);
  z-index: 10;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

.socials {
  display: flex;
  gap: clamp(0.9rem, 2vw, 1.6rem);
  flex-wrap: wrap;
}
.socials a {
  font-family: var(--display);
  font-size: 0.62rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ink-mute);
  transition: color var(--med) var(--ease);
}
.socials a:hover { color: var(--amber); }

.latest {
  text-align: right;
  line-height: 1.4;
}
.latest__label {
  display: block;
  font-family: var(--display);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(250, 249, 246, 0.45);
  margin-bottom: 0.45rem;
}
.latest__title {
  font-family: var(--display);
  font-size: clamp(0.82rem, 1.15vw, 1rem);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color var(--med) var(--ease);
}
.latest:hover .latest__title { color: var(--amber); }
/* Video hero ------------------------------------------------------------
   The footage is a bright, multi-scene montage. The veil is a top-and-bottom
   vignette only — fully clear from 30% to 62% so the picture reads — with the
   bands tuned against the brightest frames in the clip. Worst measured contrast
   for overlaid type is about 8:1 (nav, over the white ceiling around 0:08),
   comfortably past WCAG AAA. Raise the band opacities if the footage changes. */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero--video::after {
  background: linear-gradient(to bottom,
    rgba(43,29,23,0.80)  0%,
    rgba(43,29,23,0.62)  8%,
    rgba(43,29,23,0.20) 20%,
    rgba(43,29,23,0)    30%,
    rgba(43,29,23,0)    62%,
    rgba(43,29,23,0.26) 76%,
    rgba(43,29,23,0.68) 90%,
    rgba(43,29,23,0.86) 100%);
}
/* The foot content stacks on a phone, so the lower band has to start higher. */
@media (max-width: 720px) {
  .hero--video::after {
    background: linear-gradient(to bottom,
      rgba(43,29,23,0.80)  0%,
      rgba(43,29,23,0.62)  7%,
      rgba(43,29,23,0.20) 18%,
      rgba(43,29,23,0)    28%,
      rgba(43,29,23,0)    54%,
      rgba(43,29,23,0.28) 70%,
      rgba(43,29,23,0.72) 87%,
      rgba(43,29,23,0.88) 100%);
  }
}
/* Stillness is the brand's own instruction; honour the OS setting literally. */
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
  .hero--video { background: url("../assets/video/hero-poster.jpg") center/cover no-repeat; }
}

/* --------------------------------------------------------------------------
   Interior pages
   -------------------------------------------------------------------------- */
/* The home page runs the montage; every other page carries the still behind it.
   Fixed rather than scrolling, so the room stays put while content moves over
   it — and a fixed element rather than background-attachment, which iOS Safari
   handles badly. The scrim is light: the photograph is already dark enough that
   off-white type clears 10:1 against its brightest area unaided. */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(43,29,23,0.62), rgba(43,29,23,0.62)),
    url("../assets/brand/home-bg.jpg") center / cover no-repeat;
}
.page, .centred, .footer { position: relative; z-index: 1; }
.page {
  padding: calc(var(--header-h) + clamp(2.5rem, 6vw, 5.5rem)) var(--gutter) clamp(4rem, 9vw, 8rem);
  min-height: 100svh;
}

.page__head {
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
  border-bottom: 1px solid var(--rule);
  padding-bottom: clamp(0.85rem, 1.7vw, 1.3rem);
}
.page__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.7vw, 1.25rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1;
}
.page__note {
  margin: 1rem 0 0;
  max-width: 34rem;
  color: var(--ink-mute);
  font-size: 0.94rem;
}

/* Music grid ------------------------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3.2vw, 3rem) clamp(1.1rem, 2.4vw, 2.2rem);
}
@media (min-width: 620px) { .grid { grid-template-columns: repeat(3, 1fr); } }

.release__art {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: rgba(20,14,11,0.35);
}
.release__art img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1200ms var(--ease), filter 1200ms var(--ease);
}
.release:hover .release__art img { transform: scale(1.045); }

.release__meta { margin-top: 0.85rem; }
.release__title {
  font-family: var(--display);
  font-size: clamp(0.68rem, 0.92vw, 0.8rem);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color var(--med) var(--ease);
}
.release:hover .release__title { color: var(--amber); }
.release__type {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--display);
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Videos ----------------------------------------------------------------- */
/* Two up on desktop: the four visualizers fill two clean rows, and a bigger
   player is worth more here than a denser grid. */
.videos {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem) clamp(1.2rem, 2.6vw, 2.4rem);
}
@media (min-width: 700px) { .videos { grid-template-columns: repeat(2, 1fr); } }
.video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: rgba(20,14,11,0.35);
  overflow: hidden;
}
.video__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.video__title {
  margin-top: 0.9rem;
  font-family: var(--display);
  font-size: clamp(0.68rem, 0.92vw, 0.8rem);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* Centred pages (Shop / Sign Up) ----------------------------------------- */
.centred {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--header-h) + 2rem) var(--gutter) clamp(3rem, 8vw, 6rem);
}
.centred__inner { max-width: 30rem; width: 100%; }
.centred .page__title { font-size: clamp(1.8rem, 6vw, 4rem); }
.centred__note {
  margin: 1.4rem 0 0;
  color: var(--ink-mute);
  font-size: 0.95rem;
  line-height: 1.75;
}

.rule-word {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin: 2.4rem 0 0;
  color: var(--ink-faint);
  font-family: var(--display);
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.rule-word::before, .rule-word::after {
  content: ""; height: 1px; background: var(--rule); flex: 1;
}

/* Form ------------------------------------------------------------------- */
.form { margin-top: 2.4rem; text-align: left; }
.field { margin-bottom: 1.4rem; }
.field label {
  display: block;
  font-family: var(--display);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.6rem;
}
.field input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1rem;
  padding: 0.55rem 0;
  transition: border-color var(--med) var(--ease);
}
.field input:focus {
  outline: none;
  border-bottom-color: var(--amber);
}
.field input::placeholder { color: rgba(250,249,246,0.2); }

.btn {
  margin-top: 0.8rem;
  width: 100%;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--display);
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 1.05rem 1.5rem;
  cursor: pointer;
  transition: background var(--med) var(--ease), border-color var(--med) var(--ease), color var(--med) var(--ease);
}
.btn:hover { background: var(--amber); border-color: var(--amber); color: var(--black); }

.form__msg {
  margin-top: 1.2rem;
  font-size: 0.85rem;
  color: var(--amber);
  min-height: 1.3em;
}

/* beehiiv subscribe form, embedded by URL rather than via their loader script
   (see build.py). We own the height here, so there is no 2000px iframe to clip
   and no clipping that could hide the submit button. */
.signup-embed {
  margin-top: 2.4rem;
  margin-bottom: 0.6rem;
  display: flex;
  justify-content: center;
}
.signup-frame {
  width: 100%;
  max-width: 420px;
  /* px, not rem: this has to match the height beehiiv's own document lays out
     to, and rem would scale it with the root font size and clip the button. */
  height: 300px;
  border: 0;
  display: block;
  background: transparent;
}

.fineprint {
  margin-top: 1.6rem;
  font-size: 0.72rem;
  line-height: 1.7;
  color: var(--ink-faint);
}

/* Footer ----------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--rule);
  padding: clamp(1.6rem, 3vw, 2.4rem) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.footer small {
  font-family: var(--display);
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.empty {
  border: 1px solid var(--rule);
  padding: clamp(2.5rem, 6vw, 4.5rem) 2rem;
  text-align: center;
  color: var(--ink-mute);
  font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   Entrance — a slow, quiet fade-up. Staggered by [data-reveal] index.
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Cross-fade between pages */
.veil {
  position: fixed; inset: 0; z-index: 9500;
  background: var(--ground);
  pointer-events: none;
  opacity: 0;
  transition: opacity 420ms var(--ease);
}
.veil.is-on { opacity: 1; }

/* Portrait viewports crop hard. On a phone the window is roughly a third of
   the photograph's width, so the crop has to sit far right to put Deion in the
   middle of the frame rather than half off it. */
@media (max-aspect-ratio: 1/1) {
  .hero__img { object-position: 78% center; }
}
@media (max-width: 720px) {
  .hero__img { object-position: 88% center; }
}
@media (max-width: 720px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed;
    inset: 0;
    background: var(--ground);
    flex-direction: column;
    justify-content: center;
    gap: 1.9rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--med) var(--ease);
  }
  .nav a { font-size: 1rem; letter-spacing: 0.22em; }
  .nav-open .nav { opacity: 1; pointer-events: auto; }
  .nav-toggle { position: relative; z-index: 110; }
  .hero__foot { flex-direction: column; align-items: flex-start; gap: 1.35rem; }
  .hero__foot .latest  { order: 1; }
  .hero__foot .socials { order: 2; }
  .latest { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}