/* /festival/ — Loud Hills kinetic typography. Anybody (variable width 50–150, weight 100–900) does all the heavy lifting. */
@font-face { font-family: "Anybody"; src: url(/assets/fonts/anybody-variable.woff2) format("woff2"); font-weight: 100 900; font-stretch: 50% 150%; font-display: swap; }
.fx-page {
  --pg-bg: #f1ece0; --pg-ink: #0e0e0e; --f-display: "Anybody", system-ui, sans-serif; --h-weight: 850;
  --hot: #ff4d1f; --pink: #ff8fd0; --amber: #ffc233;
  --bar-bg: #0e0e0e; --bar-fg: #f1ece0; --tag: #ff8fd0; --btn-bg: #ff4d1f; --btn-fg: #fff; --order-bg: #0e0e0e; --order-fg: #f1ece0;
  overflow-x: clip;
}
.fx-page h1, .fx-page h2 { text-transform: uppercase; letter-spacing: -.01em; }
.fx-page h2 { font-variation-settings: "wdth" 120, "wght" 850; }
.fx-page .dm-bar__name { font: 900 1.2rem "Anybody", sans-serif; font-variation-settings: "wdth" 140, "wght" 900; letter-spacing: .02em; }
.fx-page .dm-eyebrow { color: var(--hot); }

/* ---------- Hero ---------- */
.fx-hero { min-height: calc(100svh - 52px); display: grid; grid-template-rows: auto 1fr auto; padding: 2rem max(16px, (100vw - 1400px) / 2) 2.2rem; }
.fx-kick { margin: 0; font: 500 .8rem var(--f-mono); letter-spacing: .16em; text-transform: uppercase; }
.fx-title { align-self: center; margin: 0; display: grid; font-size: clamp(5rem, 21vw, 21rem); line-height: .8; text-align: center; transform-origin: 50% 60%; }
.fx-line { display: block; white-space: nowrap; font-variation-settings: "wdth" 88, "wght" 700; }
.fx-line + .fx-line { color: var(--hot); }
.fx-ch { display: inline-block; font-variation-settings: "wdth" 88, "wght" 700; }
.fx-hero__foot { display: flex; justify-content: space-between; align-items: end; gap: 2rem; flex-wrap: wrap; }
.fx-sub { margin: 0; max-width: 24rem; font-size: 1.05rem; }
.fx-count { display: flex; gap: 1.4rem; }
.fx-count div { display: grid; }
.fx-count b { font: 900 clamp(2rem, 4.4vw, 3.6rem)/1 "Anybody", sans-serif; font-variation-settings: "wdth" 60, "wght" 850; font-variant-numeric: tabular-nums; }
.fx-count span { font: 500 .66rem var(--f-mono); letter-spacing: .16em; text-transform: uppercase; }

/* ---------- Stretch lines ---------- */
.fx-stretch { background: var(--hot); color: #0e0e0e; padding: 18vh 0; overflow: hidden; }
.fx-stretch__in { text-align: center; width: min(100%, 100vw - 24px); margin: 0 auto; }
.fx-stretch p { display: block; width: max-content; margin: 0 auto; font: 900 clamp(3.4rem, 13vw, 13rem)/.9 "Anybody", sans-serif; text-transform: uppercase; white-space: nowrap; font-variation-settings: "wdth" 100, "wght" 850; }
.fx-stretch p:nth-child(2) { color: #f1ece0; }

/* ---------- Lineup marquees ---------- */
.fx-lineup { background: #0e0e0e; color: #f1ece0; padding: 6rem 0; display: grid; gap: 1.2rem; overflow: hidden; }
.fx-row { position: relative; }
.fx-row__day { margin: 0 0 .2rem max(16px, (100vw - 1400px) / 2); font: 500 .75rem var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--pink); }
.fx-row__track { display: flex; width: max-content; will-change: transform; }
.fx-row__set { display: flex; align-items: center; flex: none; }
.fx-act { font: 900 clamp(3rem, 8.5vw, 8rem)/1.05 "Anybody", sans-serif; text-transform: uppercase; white-space: nowrap; padding: 0 .35em; font-variation-settings: "wdth" 72, "wght" 800;
  transition: font-variation-settings .45s cubic-bezier(.2, .8, .2, 1), color .3s; }
.fx-act:hover { font-variation-settings: "wdth" 140, "wght" 900; color: var(--amber); }
.fx-row:nth-child(2) .fx-act { -webkit-text-stroke: 2px #f1ece0; color: transparent; }
.fx-row:nth-child(2) .fx-act:hover { color: var(--amber); -webkit-text-stroke-color: var(--amber); }
.fx-star { font-style: normal; color: var(--hot); font-size: clamp(1.6rem, 4vw, 3.4rem); }

/* ---------- Flip-board ---------- */
.fx-times { background: #161616; color: #f1ece0; padding: 6rem 0; }
.fx-times h2 { font-size: clamp(2.6rem, 7vw, 6rem); margin: .6rem 0 2.2rem; }
.fx-board { display: grid; gap: .45rem; padding: 1.2rem; border-radius: 14px; background: #0a0a0a; box-shadow: inset 0 0 0 1px #262626; overflow-x: auto; }
.fx-board__head, .fx-board__row { display: grid; grid-template-columns: 3fr 5fr 17fr 5fr; gap: 1rem; align-items: center; min-width: 720px; }
.fx-board__head { font: 500 .66rem var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: #8a8a8a; padding: 0 0 .3rem; }
.fx-cell { display: flex; gap: 3px; }
.fx-cell i { position: relative; display: grid; place-items: center; width: 1.55em; height: 2.1em; border-radius: 3px; background: linear-gradient(#1f1f1f 50%, #191919 50%);
  font: 600 clamp(.9rem, 1.6vw, 1.25rem) var(--f-mono); font-style: normal; color: var(--amber); box-shadow: inset 0 -1px 0 #000; }
.fx-cell i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .8); }
.fx-cell i.flip { animation: fx-flip .09s linear; }
@keyframes fx-flip { 0% { transform: scaleY(1); } 50% { transform: scaleY(.15); } 100% { transform: scaleY(1); } }
.fx-cell.c3 i { color: var(--pink); }

/* ---------- Text on a path ---------- */
.fx-path { background: #f1ece0; height: min(40vw, 420px); overflow: hidden; }
.fx-path svg { width: 100%; height: 100%; display: block; }
.fx-path path { stroke: rgba(14, 14, 14, .12); stroke-width: 2; }
.fx-path text { font: 900 58px "Anybody", sans-serif; font-variation-settings: "wdth" 110, "wght" 900; fill: #0e0e0e; letter-spacing: 1px; }

/* ---------- Tickets ---------- */
.fx-tickets { background: #f1ece0; padding: 5rem 0 6rem; }
.fx-tickets h2 { font-size: clamp(2.6rem, 7vw, 6rem); margin: .6rem 0 2.2rem; }
.fx-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.4rem; }
.fx-tier { padding: 1.6rem; border-radius: 20px; background: #fff; border: 2px solid #0e0e0e; display: grid; gap: .3rem; overflow: hidden; }
.fx-tier p { margin: 0; font: 500 .72rem var(--f-mono); letter-spacing: .16em; text-transform: uppercase; }
.fx-tier b { font: 900 clamp(3.4rem, 7vw, 5.6rem)/1 "Anybody", sans-serif; font-variation-settings: "wdth" 60, "wght" 850; white-space: nowrap; }
.fx-tier span { color: #555; font-size: .95rem; }
.fx-tier--hot { background: var(--hot); color: #fff; } .fx-tier--hot span { color: rgba(255, 255, 255, .85); }

@media (max-width: 800px) {
  .fx-title { font-size: 27vw; }
  .fx-hero { padding-top: 1.4rem; }
  .fx-hero__foot { flex-direction: column; align-items: start; gap: 1.2rem; }
  .fx-tiers { grid-template-columns: minmax(0, 1fr); }
  .fx-lineup { padding: 4rem 0; }
  .fx-row:nth-child(2) .fx-act { -webkit-text-stroke-width: 1.2px; }
  .fx-board { padding: .8rem .6rem; gap: .8rem; overflow: visible; }
  .fx-board__head { display: none; }
  .fx-board__row { min-width: 0; grid-template-columns: auto auto 1fr; grid-template-areas: "day time ." "act act act"; gap: .35rem .5rem; }
  .fx-board__row .c0 { grid-area: day; } .fx-board__row .c1 { grid-area: time; } .fx-board__row .c2 { grid-area: act; } .fx-board__row .c3 { display: none; }
  .fx-cell { gap: 2px; }
  .fx-cell i { font-size: .74rem; width: 1.32em; height: 1.95em; }
}
@media (prefers-reduced-motion: reduce) { .fx-row__track { flex-wrap: wrap; width: auto; } .fx-row__set + .fx-row__set { display: none; } .fx-row__set { flex-wrap: wrap; } }

/* Own fonts (not the studio's Hanken Grotesk / IBM Plex Mono): body text and labels */
.fx-page { --f-body: "Anybody", system-ui, sans-serif; --f-mono: "Anybody", system-ui, sans-serif; }