/* ============================================================
   BMVA 2027 — Homepage (Apple-grade dark)
   Loaded only on index. Overrides global style.css for the home page.
   POV: monochrome chrome, colour comes from the festival photography.
   Type: Inter semibold + JetBrains Mono utility face (timecode/data).
   ============================================================ */

:root {
  --ink:        #000000;
  --panel:      #0c0c0e;
  --panel-2:    #131316;
  --hair:       rgba(255,255,255,0.10);
  --hair-2:     rgba(255,255,255,0.20);
  --fg:         #f5f5f7;     /* Apple off-white */
  --fg-2:       #a1a1a6;     /* Apple body grey */
  --fg-3:       #86868b;     /* Apple caption grey */
  --mono:       "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

body { background: var(--ink); color: var(--fg-2); }

/* ---- Type register: semibold, tight, Apple neutrals ---- */
h1,h2,h3,h4 { color: var(--fg); font-weight: 600; letter-spacing: -0.025em; }
.h-xl { font-weight: 600; letter-spacing: -0.035em; }
.h-lg { font-weight: 600; letter-spacing: -0.028em; font-size: clamp(1.9rem, 3.6vw, 3rem); }
.h-md { font-weight: 600; letter-spacing: -0.02em; }
.lead, .sec-head .lead { color: var(--fg-2); }
.text-gradient { background: none; -webkit-text-fill-color: currentColor; color: var(--fg); }

/* ---- Utility eyebrow (mono): the festival's technical voice ---- */
.eyebrow {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-weight: 500; font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3);
}
.kicker { font-family: var(--mono); font-weight: 500; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.kicker::before { display: none; }

/* ---- Buttons: Apple-quiet pill (no glow) ---- */
.btn { font-weight: 500; }
.btn--primary { background: var(--magenta); box-shadow: none; }
.btn--primary:hover { background: #ff45a8; box-shadow: none; transform: translateY(-2px); }
.btn--ghost { background: rgba(255,255,255,.06); }
.textlink { display: inline-flex; align-items: center; gap: .35em; color: var(--fg); font-weight: 500; font-size: 1.02rem; }
.textlink span { color: var(--magenta); transition: transform .25s var(--ease); }
.textlink:hover span { transform: translateX(3px); }

/* ---- Section heads ---- */
.sec-head { gap: .8rem; }
.sec-head--left { align-items: flex-start; text-align: left; }

/* ===================================================================
   HERO — full-bleed video, Apple restraint
   =================================================================== */
.hero__overlay { background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.28) 38%, rgba(0,0,0,.6) 76%, #000 100%); }
.hero__glow { background: radial-gradient(58% 46% at 50% 100%, rgba(255,45,155,.16), transparent 72%); }
.hero__inner { max-width: 900px; }
.hero__title { font-weight: 600; font-size: clamp(2.8rem, 7.4vw, 5.8rem); letter-spacing: -0.035em; line-height: 1.03; color: #fff; }
.hero__sub { font-size: clamp(1.05rem, 1.5vw, 1.35rem); color: rgba(255,255,255,.72); font-weight: 400; letter-spacing: -0.01em; }
.hero__actions { display: flex; gap: 1.6rem; align-items: center; justify-content: center; flex-wrap: wrap; }
.hero .eyebrow { color: rgba(255,255,255,.82); }
.hero__cue { gap: .6rem; }
.hero__cue span { font-family: var(--mono); font-size: .66rem; letter-spacing: .25em; }

/* drop decorative index numerals on category cards (not a real sequence) */
.card .idx { display: none; }

/* ===================================================================
   STAGE — the thesis statement
   =================================================================== */
.stage { padding-block: clamp(5rem, 12vw, 10rem); text-align: center; }
.stage__inner { max-width: 820px; }
.stage__title { font-size: clamp(2rem, 4.5vw, 3.6rem); line-height: 1.1; letter-spacing: -0.03em; color: var(--fg); }
.stage__lead { font-size: clamp(1.08rem, 1.3vw, 1.3rem); color: var(--fg-2); max-width: 62ch; margin-inline: auto; line-height: 1.55; }
.stage__values { font-family: var(--mono); font-size: .76rem; letter-spacing: .04em; color: var(--fg-3); text-transform: uppercase; }

/* ===================================================================
   BENTO — "everything at a glance" (signature)
   =================================================================== */
.bento {
  display: grid; gap: 14px;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  grid-template-areas:
    "carpet carpet prize prize"
    "carpet carpet dates venue"
    "stage  stage  cats  submit";
}
.bento__tile {
  position: relative; overflow: hidden; border-radius: 26px;
  border: 1px solid var(--hair); background: var(--panel);
  display: flex; flex-direction: column; padding: 1.6rem;
  text-decoration: none; color: var(--fg);
  transition: transform .45s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
a.bento__tile:hover { transform: translateY(-4px); border-color: var(--hair-2); }
.bento__tile p { color: var(--fg-3); font-size: .92rem; margin-top: auto; line-height: 1.45; }

/* panel tiles */
.bento__tile--panel { justify-content: flex-start; }
.bento__big { font-weight: 600; font-size: clamp(2.1rem, 3.6vw, 3.1rem); letter-spacing: -0.03em; line-height: 1; color: var(--fg); margin: .7rem 0 .8rem; }
.bento__unit { font-size: .42em; color: var(--fg-3); margin-left: .35em; font-weight: 500; letter-spacing: 0; }
.bento__mid { font-weight: 600; font-size: clamp(1.4rem, 2vw, 1.7rem); letter-spacing: -0.02em; color: var(--fg); margin: .7rem 0 .8rem; }
.bento__tile--link p span, .bento__tile p span[aria-hidden] { color: var(--magenta); }

/* photo tiles */
.bento__tile--photo { padding: 0; }
.bento__tile--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.bento__tile--photo:hover img { transform: scale(1.05); }
.bento__tile--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,0) 58%); }
.bento__cap { position: relative; z-index: 1; margin-top: auto; padding: 1.5rem; }
.bento__cap b { display: block; margin-top: .45rem; font-weight: 600; font-size: 1.06rem; letter-spacing: -0.015em; color: #fff; max-width: 24ch; }

/* accent (submit) tile */
.bento__tile--accent { background: linear-gradient(155deg, #ff2d9b, #c4186f); border-color: transparent; }
.bento__tile--accent .eyebrow, .bento__tile--accent p { color: rgba(255,255,255,.82); }
.bento__cta { font-weight: 600; font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: -0.02em; color: #fff; margin: .7rem 0 .8rem; }

@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "carpet carpet"
      "carpet carpet"
      "prize  prize"
      "dates  venue"
      "stage  stage"
      "cats   submit"; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; grid-auto-rows: minmax(168px, auto);
    grid-template-areas: "carpet" "prize" "dates" "venue" "stage" "cats" "submit"; }
  .bento__tile--xl { min-height: 320px; }
  .bento__tile--photo:not(.bento__tile--xl) { min-height: 220px; }
}

/* ===================================================================
   MOMENT — full-bleed photographic interlude
   =================================================================== */
.moment { position: relative; min-height: 72vh; display: grid; place-items: center; text-align: center; overflow: hidden; }
.moment__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.moment::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.5) 50%, rgba(0,0,0,.7)); }
.moment__inner { position: relative; z-index: 1; }
.moment__line { font-weight: 600; font-size: clamp(1.5rem, 3.3vw, 2.7rem); letter-spacing: -0.025em; line-height: 1.18; color: #fff; max-width: 24ch; margin-inline: auto; }

/* ===================================================================
   WHY-SUBMIT feature tiles (Apple panels)
   =================================================================== */
.feature { background: var(--panel); border: 1px solid var(--hair); border-radius: 26px; padding: clamp(1.8rem, 3vw, 2.4rem); }
.feature:hover { border-color: var(--hair-2); }
.feature .eyebrow { display: block; margin-bottom: 1.1rem; }
.feature h3 { font-weight: 600; font-size: 1.3rem; letter-spacing: -0.02em; color: var(--fg); margin-bottom: .6rem; }
.feature p { color: var(--fg-2); font-size: .96rem; line-height: 1.6; }

/* ===================================================================
   Lower sections refined to match (cards, gallery, partners, cta)
   =================================================================== */
.card { border-radius: 22px; background: var(--panel); border-color: var(--hair); }
.card:hover { background: var(--panel-2); border-color: var(--hair-2); }
.card h3 { font-weight: 600; }
.card .tag { color: var(--fg-3); border-color: var(--hair); }
.card--special { background: var(--panel-2); }

.gallery-tile { border-radius: 24px; }
.gallery-tile figcaption b { font-weight: 600; }

.news-card h3 { font-weight: 600; }
.news-card time { color: var(--fg-3); }

.partner-grid { border-radius: 24px; }
.partner-grid a, .partner-grid span { background: var(--panel); color: var(--fg-3); font-weight: 500; }
.partner-grid a:hover { background: var(--panel-2); color: #fff; }

.deadline { border-radius: 18px; background: var(--panel); }
.deadline__date { color: var(--fg-3); }
.deadline.is-final { background: var(--panel-2); border-color: var(--hair-2); }
.deadline.is-final .deadline__date { color: var(--magenta); }

.newsletter { background: var(--panel); border: 1px solid var(--hair); border-radius: 30px; }
.newsletter input { background: rgba(255,255,255,.04); }

.cta-band { background: var(--panel); border: 1px solid var(--hair); border-radius: 30px; }
.cta-band::before { background: radial-gradient(60% 90% at 50% 0%, rgba(255,45,155,.16), transparent 72%); }

/* eyebrow colour inside the always-magenta places stays magenta via base */
.pill .dot { background: var(--magenta); }