/* ==========================================================================
   FESTIVALS & CULTURE
   Its own room, not a section of somebody else's page.

   The main site is black type on cream and keeps its voice down. A festival
   should not. This world runs dark plum into near black, with the logo gold
   and the logo red doing the shouting, because the whole argument of the
   place is that public joy is a strategy rather than a decoration.

   Everything here sits on top of core.css. Nothing here is loaded anywhere
   else, so nothing here can damage another page.
   ========================================================================== */

:root[data-world="festivals"],
[data-world="festivals"] body{
  --paper:#140A18;
  --surface:#1E1024;
  --ink:#FFFFFF;
  --muted:rgba(255,255,255,.76);
  --line:rgba(255,255,255,.16);
  --deep:#0C0510;
  --fest-plum:#2A1232;
  --fest-glow:#FF4FA3;
}

[data-world="festivals"] body{
  background:var(--paper); color:var(--ink);
}

/* ------------------------------------------------------------------ HERO
   Four photographs turning over slowly behind one sentence. The gradient
   is heavy at the foot because the words live there and a face behind a
   headline must never cost the headline its contrast.
   --------------------------------------------------------------------- */
.fhero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:min(88svh, 820px);
  display:flex; align-items:flex-end;
  padding-block:clamp(5rem, 14vh, 9rem);
  background:var(--deep);
}
.fhero__roll{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.fhero__roll .roll__slide{ opacity:0; }
.fhero__roll .roll__slide.is-active{ opacity:1; }
.fhero__roll img{
  width:100%; height:100%; object-fit:cover; opacity:.72;
  animation:festDrift 22s ease-in-out infinite alternate;
}
@keyframes festDrift{ from{ transform:scale(1.04) } to{ transform:scale(1.14) translate3d(-2%,-1%,0) } }
@media (prefers-reduced-motion: reduce){ .fhero__roll img{ animation:none; transform:scale(1.04) } }
.fhero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(90% 70% at 50% 100%, rgba(42,18,50,.72) 0%, transparent 70%),
    linear-gradient(to top,
      rgba(12,5,16,.96) 0%, rgba(12,5,16,.88) 26%, rgba(12,5,16,.56) 52%,
      rgba(12,5,16,.22) 76%, rgba(12,5,16,.35) 100%);
}
.fhero__in{ position:relative; z-index:2; text-align:center; }
.fhero__eyebrow{
  font-size:var(--step--2); letter-spacing:.24em; text-transform:uppercase;
  font-weight:800; color:var(--brand); margin:0 0 1rem;
}
.fhero__title{
  font-family:var(--font-display); font-weight:900; letter-spacing:-.03em;
  font-size:clamp(2.6rem, 1.6rem + 4.6vw, 5.4rem); line-height:.98;
  margin:0 0 1.1rem; color:#fff;
  text-shadow:0 4px 40px rgba(0,0,0,.6);
}
.fhero__title em{ font-style:normal; color:var(--brand); }
.fhero__lede{
  font-size:var(--step-1); line-height:1.5; color:rgba(255,255,255,.9);
  max-width:46ch; margin:0 auto; text-shadow:0 2px 20px rgba(0,0,0,.7);
}
.fhero__acts{ justify-content:center; margin-top:var(--sp-6); }
/* The years, laid out like a ticket stub. 2027 is listed and marked as the
   one that has not happened, because a blank is stronger than a guess. */
.fhero__strip{
  display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center;
  margin:var(--sp-7) 0 0; padding:0;
}
.fhero__strip span{
  font-family:var(--font-mono); font-size:var(--step--2); letter-spacing:.14em;
  padding:.4rem .85rem; border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.26); color:rgba(255,255,255,.86);
  background:rgba(255,255,255,.06);
}
.fhero__strip .is-next{
  border-color:var(--brand); color:var(--brand); background:transparent;
  border-style:dashed;
}

/* ----------------------------------------------------------------- BANDS */
.fband{ background:var(--paper); }
.fband--deep{ background:var(--deep); }
.fband .sec-head h2{ color:#fff; }
.fband .sec-head p, .fband p{ color:var(--muted); }
.fband .eyebrow{ color:var(--brand); }

.fquote{
  margin:0 0 var(--sp-5); padding:var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6);
  border-left:3px solid var(--brand);
  background:linear-gradient(90deg, rgba(255,183,39,.10), transparent 70%);
  border-radius:0 var(--r-md) var(--r-md) 0;
}
.fquote blockquote{
  margin:0; font-family:var(--font-display); font-size:var(--step-2);
  line-height:1.3; color:#fff;
}
.fside{
  width:100%; height:auto; display:block; border-radius:var(--r-lg);
  aspect-ratio:4/3; object-fit:cover;
}

/* ----------------------------------------------------------------- CARDS */
.fcard{
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--sp-5);
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
             background var(--dur) var(--ease);
}
.fcard::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(to right, var(--brand) 0 40%, var(--red) 40% 64%, var(--brand) 64%);
}
.fcard:hover{
  transform:translateY(-5px); border-color:var(--brand);
  background:color-mix(in srgb, var(--brand) 7%, var(--surface));
}
.fcard h3{ font-size:var(--step-2); margin:.2rem 0 .5rem; color:#fff; }
.fcard p{ color:var(--muted); font-size:var(--step--1); margin:0; }
.fcard--open{ background:transparent; }

/* ---------------------------------------------------------------- RUNWAY
   Four categories, numbered, each one a claim about where we belong. The
   number is set in the display face and left large on purpose: these are
   the four things people remember from the day.
   --------------------------------------------------------------------- */
.runway{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; }
@media (min-width:860px){ .runway{ grid-template-columns:repeat(2,1fr); } }
.runway__cat{
  background:var(--paper); padding:var(--sp-6) var(--sp-5);
  display:grid; grid-template-columns:auto 1fr; gap:0 var(--sp-5);
  align-items:start;
  transition:background var(--dur) var(--ease);
}
.runway__cat:hover{ background:var(--surface); }
.runway__n{
  grid-row:span 2;
  font-family:var(--font-display); font-weight:900; font-size:var(--step-5);
  line-height:.85; color:var(--brand); opacity:.9;
}
.runway__cat h3{ font-size:var(--step-2); margin:0 0 .5rem; color:#fff; }
.runway__cat p{ margin:0; color:var(--muted); font-size:var(--step--1); line-height:1.6; }

/* -------------------------------------------------------------- EDITIONS
   Five years in one place would be five hundred photographs on one scroll.
   The years are tabs: you pick one, you get that one. With JavaScript off
   every panel is simply shown, so nothing is ever hidden from a reader who
   cannot run the script.
   --------------------------------------------------------------------- */
.years{
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center;
  margin-bottom:var(--sp-6);
}
.years__btn{
  display:grid; gap:.15rem; justify-items:center;
  padding:.7rem 1.2rem; border-radius:var(--r-md); cursor:pointer;
  background:transparent; border:1px solid var(--line); color:rgba(255,255,255,.8);
  transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.years__btn b{ font-family:var(--font-display); font-size:var(--step-2); line-height:1; }
.years__btn span{ font-size:var(--step--2); letter-spacing:.08em; text-transform:uppercase; opacity:.78; }
.years__btn:hover{ border-color:var(--brand); color:#fff; transform:translateY(-2px); }
.years__btn.is-on{
  background:var(--brand); border-color:var(--brand); color:#140A18;
}
.years__btn.is-on span{ opacity:.85; }

[data-world="festivals"] .edition{ padding-block:0; }
[data-world="festivals"] .edition + .edition{ border-top:0; }
[data-world="festivals"] .edition + .edition::before{ content:none; }
[data-world="festivals"] .edition__year{ color:var(--brand); }
[data-world="festivals"] .edition__theme{ color:#fff; }
[data-world="festivals"] .edition__note{ color:var(--muted); max-width:68ch; }
.edition__count{
  margin:var(--sp-4) 0 0; font-family:var(--font-mono);
  font-size:var(--step--2); letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.6); text-align:center;
}
[data-world="festivals"] .gallery img{ border-radius:var(--r-md); }

/* ------------------------------------------------------------------ PLAN */
.plan{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--sp-6);
}
.plan__h{ font-size:var(--step-1); margin:0 0 var(--sp-4); color:var(--brand); }
.plan__list{ margin:0; padding-left:1.15rem; display:grid; gap:.9rem; }
.plan__list li{ color:var(--muted); font-size:var(--step--1); line-height:1.6; }
.plan__list b{ color:#fff; }
.plan__note{
  margin:var(--sp-5) 0 0; padding-top:var(--sp-4);
  border-top:1px solid var(--line);
  font-size:var(--step--2); color:rgba(255,255,255,.6);
}
.fnote{ color:rgba(255,255,255,.6); }

/* --------------------------------------------------------------- SPONSOR */
.fsponsor{
  position:relative; isolation:isolate;
  padding-block:clamp(4.5rem, 9vh, 7rem);
  background:
    radial-gradient(80% 90% at 20% 0%, rgba(255,79,163,.16) 0%, transparent 62%),
    linear-gradient(160deg, var(--fest-plum) 0%, #0C0510 68%);
  border-block:1px solid var(--line);
}
.fsponsor .sec-head h2{ color:#fff; }
.fsponsor__grid{ margin-top:var(--sp-6); }
.fsponsor__acts{ justify-content:center; margin-top:var(--sp-7); }

/* ------------------------------------------------------- CARD OVERRIDES
   core.css paints a card on cream. In here the paper is plum, so the card
   has to be told what surface it is standing on. */
[data-world="festivals"] .card{
  background:var(--surface); border-color:var(--line); color:var(--ink);
}
[data-world="festivals"] .card:hover{
  background:color-mix(in srgb, var(--brand) 8%, var(--surface));
  border-color:var(--brand);
}
[data-world="festivals"] .card__title{ color:#fff; }
[data-world="festivals"] .card .small{ color:var(--muted); }
[data-world="festivals"] .link-arrow{ color:var(--brand); }

/* The kicker on a card is red in the main skin, which reads as a warning
   in a room this dark. In here it is the logo gold. */
[data-world="festivals"] .card__kicker{ color:var(--brand); }