/* ==========================================================================
   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); }

/* -------------------------------------------------------------- LOCAL NAV
   Three pages now, so the world carries its own small nav beside the mark.
   ---------------------------------------------------------------------- */
/* One segmented control, sitting in the middle of the row rather than
   crowding the mark on its left. The group reads as a single object, so
   the eye sees mark, nav, controls instead of six loose things. */
.fnav{
  display:flex; gap:.25rem; margin-inline:auto;
  padding:.28rem; border-radius:var(--r-pill);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
}
.fnav a{
  padding:.45rem 1rem; border-radius:var(--r-pill); white-space:nowrap;
  font-size:var(--step--2); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(255,255,255,.74); text-decoration:none;
  transition:color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.fnav a:hover{ color:#fff; background:rgba(255,255,255,.12); }
.fnav a[aria-current="page"]{
  color:#140A18; background:var(--brand);
  box-shadow:0 2px 10px -3px rgba(250,183,39,.6);
}
/* The header is a single row at desktop. Three extra links do not fit
   beside the mark on a phone, and a row that cannot fit pushes the whole
   page sideways, so below the desktop breakpoint the header is allowed to
   wrap and the nav takes a line of its own. */
@media (max-width:980px){
  [data-world="festivals"] .site-header__in{ flex-wrap:wrap; row-gap:.6rem; }
  .fnav{
    order:3; width:100%; margin:0; justify-content:center;
    overflow-x:auto; scrollbar-width:none;
  }
  .fnav::-webkit-scrollbar{ display:none; }
  .fnav a{ flex:none; }
}

/* ------------------------------------------------------------- TWO DOORS
   The main architectural moment of the landing page, in Alan's words. Two
   panels, each one a place rather than a link.
   ---------------------------------------------------------------------- */
.fdoors{ gap:var(--sp-5); }
.fdoor{
  position:relative; isolation:isolate; overflow:hidden;
  display:block; min-height:clamp(340px, 42vw, 480px);
  border-radius:var(--r-lg); text-decoration:none; color:#fff;
  background:var(--deep); border:1px solid transparent;
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.fdoor img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:0; opacity:.68; transition:transform 1.2s var(--ease), opacity var(--dur) var(--ease);
}
.fdoor::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(12,5,16,.96) 0%, rgba(12,5,16,.72) 38%,
                                      rgba(12,5,16,.22) 70%, rgba(12,5,16,.05) 100%);
}
.fdoor:hover{ transform:translateY(-5px); border-color:var(--brand); }
.fdoor:hover img{ transform:scale(1.05); opacity:.8; }
.fdoor__in{
  position:relative; z-index:2; display:flex; flex-direction:column;
  height:100%; justify-content:flex-end; padding:clamp(1.5rem,3vw,2.2rem);
}
.fdoor__k{
  font-size:var(--step--2); letter-spacing:.2em; text-transform:uppercase;
  font-weight:800; color:var(--brand); margin-bottom:.5rem;
}
.fdoor__t{
  font-family:var(--font-display); font-weight:800; font-size:var(--step-3);
  line-height:1.1; margin-bottom:.6rem;
}
.fdoor__p{
  font-size:var(--step--1); color:rgba(255,255,255,.86); max-width:36ch;
  margin-bottom:1rem; line-height:1.5;
}

/* -------------------------------------------------------------- TIMELINE */
.tl{ display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin-top:var(--sp-6); }
.tl__year{
  display:grid; gap:.2rem; justify-items:center; text-decoration:none;
  padding:.9rem 1.3rem; border-radius:var(--r-md);
  border:1px solid var(--line); color:rgba(255,255,255,.82);
  transition:border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease),
             background var(--dur-fast) var(--ease);
}
.tl__year b{ font-family:var(--font-display); font-size:var(--step-2); line-height:1; color:var(--brand); }
.tl__year span{ font-size:var(--step--2); letter-spacing:.08em; text-transform:uppercase; opacity:.78; }
.tl__year:hover{ border-color:var(--brand); transform:translateY(-3px); background:rgba(255,255,255,.04); }
.tl__year--next{ border-style:dashed; }
.tl__year--next b{ color:#fff; }

/* ------------------------------------------------------------- NEXT CARD */
.nextcard{
  margin-top:var(--sp-6); padding:clamp(1.7rem,4vw,2.8rem);
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(160deg, rgba(255,183,39,.1), transparent 64%), var(--surface);
  text-align:center;
}
.nextcard__k{
  font-size:var(--step--2); letter-spacing:.2em; text-transform:uppercase;
  font-weight:800; color:var(--brand); margin:0 0 .5rem;
}
.nextcard__t{
  font-family:var(--font-display); font-weight:900; font-size:var(--step-5);
  line-height:1; margin:0 0 1rem; color:#fff;
}
.nextcard__p{ max-width:56ch; margin:0 auto 1rem; color:var(--muted); font-size:var(--step-0); }
.nextcard__note{ max-width:56ch; margin:0 auto var(--sp-5); font-size:var(--step--2); color:rgba(255,255,255,.58); }
.nextcard .btn-row{ justify-content:center; }

/* ---------------------------------------------------- EDITION EXTRA LINES */
.edition__sub{
  margin:.2rem auto 0; font-size:var(--step-0); color:var(--brand);
  font-weight:600; text-align:center; max-width:48ch;
}
.edition__where{
  margin:.35rem auto 0; font-family:var(--font-mono); font-size:var(--step--2);
  letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.6);
  text-align:center;
}
/* the disclosure sits on the centre line as well */
.edition > .more{ display:flex; flex-direction:column; align-items:center; }
.edition > .more > summary{ align-self:center; }
.edbits{
  display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  margin:var(--sp-5) 0;
}
@media (min-width:820px){ .edbits{ grid-template-columns:repeat(2,1fr); } }
.edbit{ background:var(--paper); padding:var(--sp-5); }
.edbit h4{ font-size:var(--step-0); margin:0 0 .4rem; color:#fff; }
.edbit p{ margin:0; font-size:var(--step--1); color:var(--muted); line-height:1.55; }

/* --------------------------------------------------------------- CREATOR */
.creator{
  display:grid; gap:clamp(1.6rem,3.5vw,3rem); align-items:start;
  margin-top:var(--sp-6);
}
@media (min-width:880px){ .creator{ grid-template-columns:.8fr 1.2fr; } }
.creator__pic img{
  width:100%; height:auto; display:block; border-radius:var(--r-lg);
  aspect-ratio:1/1; object-fit:cover;
  box-shadow:0 30px 64px -26px rgba(0,0,0,.8);
}
.creator__k{
  font-size:var(--step--2); letter-spacing:.2em; text-transform:uppercase;
  font-weight:800; color:var(--brand); margin:0 0 .5rem;
}
.creator__name{
  font-family:var(--font-display); font-weight:900; font-size:var(--step-5);
  line-height:1; margin:0 0 .3rem; color:#fff;
}
.creator__role{ margin:0 0 var(--sp-5); color:#FF5E6D; font-weight:700; font-size:var(--step--1); }
.creator__body p{ color:var(--muted); margin:0 0 1rem; }

/* --------------------------------------------------------- TASTE OF MY SKIN */
.tms{
  display:grid; gap:clamp(1.4rem,3vw,2.4rem); margin-top:var(--sp-8);
  padding-top:var(--sp-7); border-top:1px solid var(--line);
}
@media (min-width:880px){ .tms{ grid-template-columns:1.25fr .75fr; align-items:start; } }
.tms__k{
  font-size:var(--step--2); letter-spacing:.2em; text-transform:uppercase;
  font-weight:800; color:var(--brand); margin:0 0 .4rem;
}
.tms__t{ font-family:var(--font-display); font-size:var(--step-4); margin:0 0 .9rem; color:#fff; }
.tms__body p{ color:var(--muted); margin:0 0 1rem; }
.tms__event{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--sp-6);
}
.tms__date{
  font-family:var(--font-display); font-weight:900; font-size:var(--step-3);
  margin:.8rem 0 .2rem; color:#fff; line-height:1.05;
}
.tms__where{ margin:0 0 1rem; color:var(--brand); font-weight:600; font-size:var(--step--1); }
.tms__note{ margin:0 0 var(--sp-5); font-size:var(--step--2); color:rgba(255,255,255,.6); }

/* ------------------------------------------------------------- THE HERO
   The years and the two buttons are one block, centred together, rather
   than three rows that happen to be near each other.
   ---------------------------------------------------------------------- */
.fhero__acts{ justify-content:center; margin-top:var(--sp-6); }
.fhero__strip{ margin-top:var(--sp-5); }

/* ---------------------------------------------------------- THE IDEA
   One statement that runs straight into the thing it is describing. The
   section does not end and restart; it narrows, points down, and opens
   into the two doors.
   ---------------------------------------------------------------------- */
.idea{
  position:relative;
  padding-block:clamp(3.5rem, 8vh, 6rem) clamp(3.5rem, 8vh, 6rem);
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(255,183,39,.1) 0%, transparent 62%),
    linear-gradient(180deg, var(--paper) 0%, var(--deep) 100%);
}
.idea__say{ margin-bottom:var(--sp-7); }
.idea__say .sec-head{ margin-bottom:var(--sp-5); }
.idea__down{ margin:0; display:flex; justify-content:center; }
.idea__down span{
  display:block; width:1px; height:clamp(34px, 5vw, 56px);
  background:linear-gradient(to bottom, var(--brand), transparent);
}

/* ------------------------------------------------- CREATIVE EXPRESSION
   Six rooms, shown rather than listed. The label sits on the picture,
   because a caption underneath makes it a diagram.
   ---------------------------------------------------------------------- */
.exprs{
  display:grid; gap:var(--sp-4);
  grid-template-columns:repeat(3, minmax(0,1fr));
}
@media (max-width:760px){ .exprs{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.expr{
  position:relative; margin:0; overflow:hidden; isolation:isolate;
  border-radius:var(--r-lg); border:1px solid rgba(255,255,255,.14);
  aspect-ratio:4/5;
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.expr img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:0; transition:transform 1.1s var(--ease);
}
.expr::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(12,5,16,.94) 0%, rgba(12,5,16,.6) 40%,
                                      rgba(12,5,16,.1) 76%, transparent 100%);
}
.expr:hover{ transform:translateY(-4px); border-color:var(--brand); }
.expr:hover img{ transform:scale(1.06); }
.expr__cap{
  position:relative; z-index:2; display:flex; flex-direction:column;
  height:100%; justify-content:flex-end; padding:var(--sp-5) var(--sp-4);
}
.expr__t{
  font-family:var(--font-display); font-weight:800; font-size:var(--step-1);
  line-height:1.1; color:#fff; margin-bottom:.35rem;
}
.expr__p{ font-size:var(--step--2); color:rgba(255,255,255,.82); line-height:1.45; }

/* ------------------------------------------------------- SIDE PICTURE */
.fside--edge{
  border:2px solid var(--brand);
  box-shadow:0 26px 60px -22px rgba(0,0,0,.72);
}

/* The runway is three categories, so it gets three columns and no hole. */
@media (min-width:860px){ .runway{ grid-template-columns:repeat(3,1fr); } }
.runway__cat{ grid-template-columns:auto 1fr; }


/* The line under Garissa is a paragraph, so it needs its own auto margin
   to sit under the middle of the word rather than beside it. */
.nextcard__k, .nextcard__t, .nextcard__p, .nextcard__note{ margin-inline:auto; }


/* The top strip. This world turns --ink white, which turned the shared
   worldbar white with plum type. Keep it dark like the rest of the room,
   and on phones and tablets let it be one line: the way home. */
[data-world="festivals"] .worldbar{ background:var(--deep); color:#fff; border-bottom:1px solid var(--line); }
@media (max-width: 900px){
  [data-world="festivals"] .worldbar__note{ display:none; }
  [data-world="festivals"] .worldbar__in{ justify-content:center; min-height:34px; }
}

/* "What happened on the day" gets its own space above the photographs,
   and turns gold so it reads on plum. */
.edition > .more{ margin-block:var(--sp-5) var(--sp-6); }
.edition > .more > summary{ color:var(--brand); border-color:var(--brand); }
.edition > .more > summary:hover{ background:var(--brand); color:#140A18; border-color:var(--brand); }