:root {
  --black: #080808;
  --paper: #f3f1eb;
  --white: #faf9f5;
  --muted-dark: #a7a7a2;
  --muted-light: #5f5f5a;
  --line-dark: rgba(255,255,255,.20);
  --line-light: rgba(8,8,8,.18);
  --pad: clamp(20px, 3vw, 54px);
  --serif: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --sans: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--black);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { max-width: 100%; display: block; }
::selection { background: #bbb; color: #000; }

.site-shell { overflow: clip; }
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .17;
  mix-blend-mode: soft-light;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.22) 0 1px, transparent 1.4px),
    radial-gradient(circle at 72% 64%, rgba(255,255,255,.18) 0 1px, transparent 1.4px),
    radial-gradient(circle at 42% 88%, rgba(0,0,0,.20) 0 1px, transparent 1.4px);
  background-size: 17px 19px, 23px 27px, 29px 31px;
}

.topbar {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  width: 100%;
  padding: 18px var(--pad);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  mix-blend-mode: difference;
  pointer-events: none;
}
.topbar a { pointer-events: auto; }
.topbar__brand {
  display: inline-flex;
  align-items: center;
  width: 38px;
  height: 30px;
}
.topbar__brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: invert(1);
}
.topbar__nav {
  display: flex;
  gap: 18px;
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.hero {
  position: relative;
  min-height: 100svh;
  isolation: isolate;
  background: var(--black);
  color: white;
}
.hero__paper {
  position: absolute;
  z-index: -2;
  inset: 0 0 0 49%;
  background: var(--paper);
  clip-path: polygon(20% 0, 100% 0, 100% 100%, 11% 100%, 25% 81%, 12% 62%, 19% 43%, 5% 25%);
  transform-origin: center;
  animation: seamIn 1.1s cubic-bezier(.2,.8,.2,1) both;
}
.hero__seam {
  position: absolute;
  z-index: 0;
  left: 51.3%;
  top: -10%;
  width: 1px;
  height: 120%;
  background: rgba(255,255,255,.45);
  transform: rotate(7deg);
  transform-origin: center;
  opacity: .36;
}
.hero__ray {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: clamp(140px, 30vw, 460px);
  height: 1px;
  background: currentColor;
  opacity: .22;
  transform-origin: left center;
}
.hero__ray--1 { transform: rotate(-22deg); color: white; }
.hero__ray--2 { transform: rotate(18deg); color: white; width: 37vw; }
.hero__ray--3 { transform: rotate(63deg); color: black; width: 26vw; }
.hero__ray--4 { transform: rotate(-58deg); color: black; width: 23vw; }
.hero__ray::after {
  content: "";
  position: absolute;
  right: 0;
  top: -2px;
  width: 5px;
  height: 5px;
  border: 1px solid currentColor;
}
.hero__meta {
  position: absolute;
  inset: 0;
  padding: clamp(78px, 9vw, 132px) var(--pad) var(--pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
}
.hero__kicker {
  grid-column: 1;
  align-self: start;
  font-size: clamp(16px, 1.5vw, 25px);
  line-height: .95;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.hero__kicker span { display: block; }
.hero__vertical {
  grid-column: 2;
  justify-self: end;
  writing-mode: vertical-rl;
  color: var(--black);
  font-family: var(--serif);
  font-size: clamp(14px, 1.1vw, 18px);
  letter-spacing: .18em;
  line-height: 1.8;
  margin-top: 14px;
}
.hero__date {
  grid-column: 1;
  grid-row: 3;
  align-self: end;
}
.hero__date .year {
  font-size: 15px;
  letter-spacing: .12em;
  margin-bottom: 4px;
}
.hero__date .days {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: clamp(38px, 5vw, 80px);
  font-weight: 500;
  letter-spacing: -.05em;
}
.hero__date .dow { font-size: 13px; letter-spacing: .12em; }
.hero__venue {
  grid-column: 2;
  grid-row: 3;
  justify-self: end;
  align-self: end;
  color: var(--black);
  text-align: right;
}
.hero__venue strong {
  display: block;
  font-size: clamp(18px, 1.8vw, 29px);
  letter-spacing: .06em;
  margin-bottom: 4px;
}
.hero__venue span { font-size: 10px; letter-spacing: .1em; }
.hero__logo-wrap {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.hero__logo {
  position: absolute;
  z-index: 3;
  width: min(66vw, 940px);
  max-height: 48vh;
  object-fit: contain;
  transform: translateY(-1vh) scale(.96);
  animation: logoIn 1s .2s cubic-bezier(.2,.75,.2,1) both;
}
.hero__logo--contrast {
  /* One white logo + difference blend keeps every glyph visible across the black/white seam. */
  filter: invert(1);
  mix-blend-mode: difference;
}
.scroll-cue {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  mix-blend-mode: difference;
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.scroll-cue::after {
  content: "";
  display: block;
  width: 1px;
  height: 35px;
  background: currentColor;
  margin: 9px auto 0;
  animation: scrollLine 1.7s ease-in-out infinite;
}

.section {
  position: relative;
  padding: clamp(84px, 12vw, 180px) var(--pad);
}
.section--light { background: var(--paper); color: var(--black); }
.section--dark { background: var(--black); color: white; }
.section__index {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .55;
  margin-bottom: 28px;
}
.section__eyebrow {
  font-size: 11px;
  letter-spacing: .17em;
  text-transform: uppercase;
  margin-bottom: 42px;
}
.section__title {
  margin: 0;
  font-weight: 500;
  letter-spacing: -.055em;
  font-size: clamp(44px, 8.5vw, 150px);
  line-height: .88;
}
.section__lead {
  font-family: var(--serif);
  font-size: clamp(25px, 4.2vw, 66px);
  line-height: 1.38;
  font-weight: 400;
  margin: 0;
  max-width: 14em;
}
.section__body {
  max-width: 660px;
  font-size: clamp(13px, 1.1vw, 17px);
  line-height: 2.05;
  letter-spacing: .04em;
}

.concept {
  min-height: 78svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: center;
}
.concept__words {
  display: grid;
  gap: 11px;
  align-self: end;
  padding-bottom: 12px;
}
.concept__word {
  border-top: 1px solid var(--line-light);
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
  font-size: clamp(14px, 1.5vw, 22px);
  letter-spacing: .08em;
}
.concept__word i { font-style: normal; font-size: 10px; opacity: .5; }

.creators { padding-bottom: 18vh; }
.creators__head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: clamp(60px, 8vw, 110px);
}
.creators__count { font-size: 11px; letter-spacing: .18em; opacity: .6; }
.creator-list { border-top: 1px solid var(--line-dark); }
.creator-row {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) minmax(120px, .32fr) 34px;
  gap: 18px;
  align-items: center;
  padding: clamp(19px, 2.4vw, 34px) 0;
  border-bottom: 1px solid var(--line-dark);
  transition: padding .3s ease, opacity .3s ease;
}
.creator-row::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 0;
  height: 1px;
  background: white;
  transition: width .3s ease;
}
.creator-row:hover { padding-left: 26px; }
.creator-row:hover::before { width: 22px; }
.creator-row__no { font-size: 10px; opacity: .48; }
.creator-row__name {
  font-size: clamp(29px, 5.1vw, 78px);
  letter-spacing: -.045em;
  line-height: .9;
}
.creator-row__genre {
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  opacity: .62;
}
.creator-row__arrow { font-size: 20px; justify-self: end; }

.crossing {
  min-height: 95svh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.crossing__stage {
  position: relative;
  width: 100%;
  min-height: 68vh;
  display: grid;
  align-content: center;
}
.crossing__ex,
.crossing__live {
  font-size: clamp(54px, 10vw, 170px);
  line-height: .82;
  font-weight: 900;
  letter-spacing: -.065em;
  text-transform: uppercase;
}
.crossing__ex { justify-self: start; }
.crossing__live { justify-self: end; text-align: right; margin-top: 20px; }
.crossing__x {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  font-size: clamp(52px, 8vw, 130px);
  font-weight: 300;
}
.crossing__tags {
  margin-top: 50px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px 18px;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.crossing__tags span:nth-child(even) { transform: translateY(15px); }

.food {
  display: grid;
  grid-template-columns: .55fr 1fr;
  gap: clamp(60px, 10vw, 160px);
  align-items: start;
}
.food__list { border-top: 1px solid var(--line-dark); }
.food__item {
  padding: 28px 0 30px;
  border-bottom: 1px solid var(--line-dark);
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 20px;
  align-items: baseline;
}
.food__item strong { font-size: clamp(24px, 3.1vw, 48px); letter-spacing: -.04em; }
.food__item span { font-size: 10px; letter-spacing: .14em; opacity: .6; text-transform: uppercase; }
.food__item p { grid-column: 2 / -1; margin: 5px 0 0; font-size: 12px; line-height: 1.8; opacity: .78; }

.schedule__grid {
  margin-top: 66px;
  border-top: 1px solid var(--line-light);
}
.schedule__day {
  display: grid;
  grid-template-columns: minmax(120px,.45fr) minmax(0,1fr);
  gap: 30px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line-light);
}
.schedule__date { font-size: clamp(28px, 4vw, 58px); letter-spacing: -.04em; }
.schedule__events { display: grid; gap: 12px; align-content: center; }
.schedule__event { display: flex; justify-content: space-between; gap: 20px; font-size: 12px; letter-spacing: .08em; }
.schedule__event span:last-child { opacity: .55; }

.venue {
  display: grid;
  grid-template-columns: 1fr .7fr;
  gap: clamp(55px, 10vw, 150px);
  align-items: end;
}
.venue__name {
  font-size: clamp(60px, 11vw, 180px);
  line-height: .88;
  letter-spacing: -.07em;
  margin: 0;
}
.venue__detail {
  border-top: 1px solid var(--line-dark);
  padding-top: 22px;
  font-size: 12px;
  line-height: 2;
  letter-spacing: .06em;
}
.venue__link {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  margin-top: 26px;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 5px;
}

.faq { max-width: 1180px; margin: 0 auto; }
.faq__list { margin-top: 60px; border-top: 1px solid var(--line-light); }
.faq__item { border-bottom: 1px solid var(--line-light); }
.faq__q {
  width: 100%;
  border: 0;
  background: none;
  color: inherit;
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
  cursor: pointer;
  font-size: clamp(15px, 1.6vw, 22px);
}
.faq__q span:last-child { font-size: 24px; font-weight: 300; transition: transform .25s ease; }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq__a p { margin: 0; padding: 0 0 25px; max-width: 720px; font-size: 13px; line-height: 1.9; opacity: .75; }
.faq__item.is-open .faq__a { max-height: 220px; }
.faq__item.is-open .faq__q span:last-child { transform: rotate(45deg); }

.info__rows { margin-top: 70px; border-top: 1px solid var(--line-dark); }
.info__row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 30px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-dark);
  align-items: baseline;
}
.info__key { font-size: 9px; letter-spacing: .17em; text-transform: uppercase; opacity: .58; }
.info__value { font-size: clamp(17px, 2vw, 30px); letter-spacing: -.02em; }

.footer {
  position: relative;
  min-height: 46svh;
  padding: var(--pad);
  background: var(--paper);
  color: var(--black);
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
}
.footer__mark {
  width: min(18vw, 220px);
  place-self: center;
  transform: rotate(-4deg);
}
.footer__bottom {
  border-top: 1px solid var(--line-light);
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.reveal { opacity: 1; transform: none; }
.motion-ready .reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s ease, transform .75s ease; }
.motion-ready .reveal.is-visible { opacity: 1; transform: translateY(0); }

/* CREATOR DETAIL */
.creator-page { background: var(--paper); }
.creator-hero {
  position: relative;
  min-height: 82svh;
  padding: clamp(100px, 13vw, 170px) var(--pad) 44px;
  background: var(--black);
  color: white;
  overflow: hidden;
}
.creator-hero::after {
  content: "";
  position: absolute;
  right: -10%;
  top: -5%;
  width: 45%;
  height: 115%;
  background: var(--paper);
  clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%, 19% 55%);
}
.creator-hero__no { font-size: 10px; letter-spacing: .18em; opacity: .55; }
.creator-hero__name {
  position: relative;
  z-index: 2;
  margin: 14vh 0 0;
  font-size: clamp(72px, 15vw, 250px);
  line-height: .78;
  letter-spacing: -.075em;
  max-width: 78%;
  overflow-wrap: anywhere;
}
.creator-hero__genre {
  position: absolute;
  z-index: 2;
  bottom: 44px;
  right: var(--pad);
  color: var(--black);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.creator-profile {
  display: grid;
  grid-template-columns: .6fr 1fr;
  gap: clamp(60px, 10vw, 150px);
  align-items: start;
}
.creator-profile__portrait {
  aspect-ratio: 4/5;
  border: 1px solid var(--line-light);
  display: grid;
  place-items: center;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  background:
    linear-gradient(145deg, rgba(0,0,0,.03), transparent 55%),
    var(--paper);
}
.creator-profile__text h2 { margin: 0 0 30px; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.creator-profile__text p { margin: 0; font-family: var(--serif); font-size: clamp(18px, 2.1vw, 31px); line-height: 1.75; }
.social-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.social-links a {
  width: 38px; height: 38px; border: 1px solid var(--line-light); border-radius: 50%;
  display: grid; place-items: center; font-size: 9px; font-weight: 700; text-transform: uppercase;
}
.works { background: var(--black); color: white; }
.works__grid { margin-top: 70px; display: grid; grid-template-columns: repeat(12,1fr); gap: clamp(16px, 2vw, 28px); }
.work-slot {
  min-height: 340px;
  border: 1px solid var(--line-dark);
  display: grid;
  place-items: center;
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
  background: linear-gradient(135deg, rgba(255,255,255,.035), transparent 50%);
}
.work-slot:nth-child(1) { grid-column: 1 / 9; min-height: 58vw; max-height: 760px; }
.work-slot:nth-child(2) { grid-column: 9 / 13; margin-top: 17vw; min-height: 31vw; }
.work-slot:nth-child(3) { grid-column: 3 / 11; min-height: 44vw; }
.creator-comment { min-height: 74svh; display: grid; grid-template-columns: .5fr 1fr; gap: 50px; align-items: center; }
.creator-comment p { margin: 0; font-family: var(--serif); font-size: clamp(22px, 4vw, 60px); line-height: 1.45; }
.next-creator { position: relative; min-height: 70svh; background: var(--black); color: white; display: grid; align-content: center; padding: var(--pad); overflow: hidden; }
.next-creator small { font-size: 9px; letter-spacing: .2em; opacity: .55; text-transform: uppercase; }
.next-creator strong { display: block; margin-top: 18px; font-size: clamp(70px, 15vw, 230px); line-height: .82; letter-spacing: -.075em; }
.next-creator span { margin-top: 20px; font-size: 10px; letter-spacing: .16em; opacity: .65; text-transform: uppercase; }
.next-creator::after { content: "→"; position: absolute; right: var(--pad); bottom: var(--pad); font-size: clamp(40px, 7vw, 100px); font-weight: 200; }

@keyframes seamIn { from { transform: translateX(16%); opacity: .2; } to { transform: translateX(0); opacity: 1; } }
@keyframes logoIn { from { opacity: 0; transform: translateY(1vh) scale(.91); } to { opacity: 1; transform: translateY(-1vh) scale(.96); } }
@keyframes scrollLine { 0%,100% { transform: scaleY(.3); transform-origin: top; opacity: .35; } 50% { transform: scaleY(1); opacity: 1; } }

@media (max-width: 820px) {
  .topbar__nav a:not(:last-child) { display: none; }
  .topbar__brand { width: 30px; height: 24px; }
  .reveal { opacity: 1 !important; }
  .hero__paper { left: 42%; clip-path: polygon(27% 0,100% 0,100% 100%,10% 100%,24% 75%,11% 52%,23% 29%); }
  .hero__logo { width: 88vw; }
  .hero__meta { grid-template-columns: 1fr 1fr; padding-top: 80px; }
  .hero__vertical { font-size: 12px; }
  .hero__date .days { display: grid; gap: 0; font-size: 42px; }
  .hero__venue strong { font-size: 15px; }
  .hero__venue span { display: none; }
  .concept, .food, .venue, .creator-profile, .creator-comment { grid-template-columns: 1fr; }
  .concept { min-height: auto; }
  .concept__words { margin-top: 40px; }
  .creator-row { grid-template-columns: 34px 1fr 24px; }
  .creator-row__genre { grid-column: 2; grid-row: 2; }
  .creator-row__arrow { grid-column: 3; grid-row: 1 / 3; }
  .creator-row:hover { padding-left: 0; }
  .crossing__stage { min-height: 58vh; }
  .crossing__tags { gap: 8px 12px; }
  .food__list { width: 100%; }
  .food__item { grid-template-columns: 32px 1fr; }
  .food__item > span { grid-column: 2; }
  .food__item p { grid-column: 2; }
  .schedule__day { grid-template-columns: 1fr; gap: 18px; }
  .info__row { grid-template-columns: 110px 1fr; }
  .footer__mark { width: min(30vw, 120px); }
  .footer__bottom { flex-direction: column; }
  .creator-hero { min-height: 68svh; }
  .creator-hero::after { width: 38%; }
  .creator-hero__name { margin-top: 19vh; max-width: 90%; }
  .works__grid { display: block; }
  .work-slot { min-height: 65vw !important; margin: 0 0 22px !important; }
  .creator-comment { min-height: 62svh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
}

/* =========================
   v0.3 refinements
   ========================= */

/* Functional menu: avoids fixed nav labels colliding with mobile content. */
.menu-toggle {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.menu-panel {
  position: fixed;
  z-index: 45;
  inset: 0;
  padding: clamp(96px, 12vw, 150px) var(--pad) var(--pad);
  background: rgba(8,8,8,.97);
  color: white;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity .28s ease, transform .28s ease, visibility .28s;
}
.menu-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.menu-panel nav {
  margin-left: auto;
  width: min(760px, 100%);
  border-top: 1px solid var(--line-dark);
}
.menu-panel a {
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-dark);
  font-size: clamp(29px, 5.2vw, 76px);
  line-height: .96;
  letter-spacing: -.045em;
}
.menu-panel a span {
  font-size: 9px;
  letter-spacing: .16em;
  opacity: .5;
}
body.menu-open { overflow: hidden; }

/* Hero: keep the poster DNA, but soften the hard section cut. */
.hero { z-index: 2; }
.hero__paper {
  inset: 0;
  clip-path: polygon(58% 0, 100% 0, 100% 100%, 48% 100%, 54% 79%, 49% 55%, 55% 28%);
}
.hero__tail {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: -86px;
  width: 50%;
  height: 120px;
  background: var(--black);
  clip-path: polygon(0 0, 100% 0, 72% 100%, 0 62%);
  pointer-events: none;
}
.hero__seam { left: 52%; opacity: .22; }
.hero__admission {
  grid-column: 2;
  grid-row: 3;
  justify-self: end;
  align-self: end;
  color: var(--black);
  text-align: right;
  display: grid;
  justify-items: end;
  gap: 3px;
}
.hero__admission span,
.hero__admission small {
  font-size: 9px;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.hero__admission strong {
  font-size: clamp(28px, 3.1vw, 52px);
  line-height: .9;
  letter-spacing: -.04em;
}
.hero__ray { animation: rayPulse 5.5s ease-in-out infinite alternate; }
.hero__ray--2 { animation-delay: -.9s; }
.hero__ray--3 { animation-delay: -1.8s; }
.hero__ray--4 { animation-delay: -2.7s; }

/* More visual rhythm without adding meaningless content. */
.section { overflow: hidden; }
.section__index {
  display: flex;
  align-items: center;
  gap: 13px;
  width: min(410px, 100%);
}
.section__index::after {
  content: "";
  height: 1px;
  flex: 1;
  background: currentColor;
  opacity: .18;
  transform-origin: left;
}
.concept::before,
.creators::before,
.venue::before,
#schedule::before,
.food::before,
#faq::before,
#info::before {
  position: absolute;
  right: -1vw;
  top: -3vw;
  font-size: clamp(120px, 22vw, 360px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.08em;
  opacity: .028;
  pointer-events: none;
}
.concept::before { content: "01"; }
.creators::before { content: "02"; }
.venue::before { content: "03"; }
#schedule::before { content: "04"; }
.food::before { content: "05"; }
#faq::before { content: "06"; }
#info::before { content: "07"; }

/* Creators: count remains useful, but no collision / no "4 fields". */
.creators__head { position: relative; z-index: 1; }
.creators__count {
  flex: 0 0 auto;
  padding-bottom: .6em;
  white-space: nowrap;
}
.creator-row { will-change: transform; }
.creator-row__arrow { transition: transform .28s ease; }
.creator-row:hover .creator-row__arrow { transform: translateX(8px); }

/* Alternate black / white sections, and adapt separators accordingly. */
.venue__detail { border-top-color: var(--line-light); }
#schedule .schedule__grid,
#schedule .schedule__day { border-color: var(--line-dark); }
#schedule .schedule__event span:last-child { color: var(--muted-dark); opacity: .8; }
.food__list,
.food__item { border-color: var(--line-light); }
#faq .faq__list,
#faq .faq__item { border-color: var(--line-dark); }
#info .info__rows,
#info .info__row { border-color: var(--line-light); }

/* Food becomes a compact supporting feature, not a late afterthought. */
.food { grid-template-columns: .62fr 1fr; }
.food .section__title { font-size: clamp(48px, 7.2vw, 118px); }
.food__item {
  padding: 34px 0 36px;
  grid-template-columns: 46px minmax(0,1fr) auto;
}
.food__item strong { font-size: clamp(28px, 3.6vw, 58px); }

/* Footer mark should really feel like a point, not another hero. */
.footer {
  min-height: 36svh;
  background: var(--black);
  color: white;
}
.footer__mark {
  width: min(10vw, 118px);
  filter: invert(1);
  animation: markBreath 5s ease-in-out infinite alternate;
}
.footer__bottom { border-top-color: var(--line-dark); }

/* Motion stays enhancement-only: content is never hidden if JS fails. */
.reveal { opacity: 1; transform: none; filter: none; }
.motion-ready .reveal {
  opacity: 1;
  transform: translateY(22px);
  filter: blur(1.4px);
  transition: transform .72s cubic-bezier(.2,.75,.2,1), filter .72s ease;
}
.motion-ready .reveal.is-visible { transform: translateY(0); filter: blur(0); }
.motion-ready .creator-row.reveal:nth-child(odd) { transform: translateX(-18px); }
.motion-ready .creator-row.reveal:nth-child(even) { transform: translateX(18px); }
.motion-ready .creator-row.reveal.is-visible { transform: translateX(0); }

@keyframes rayPulse {
  from { opacity: .12; scale: .94 1; }
  to { opacity: .30; scale: 1.05 1; }
}
@keyframes markBreath {
  from { transform: rotate(-3deg) scale(.96); }
  to { transform: rotate(2deg) scale(1.02); }
}

@media (max-width: 820px) {
  .topbar { padding-top: 16px; }
  .topbar__nav > a { display: none; }
  .menu-toggle { display: block; }
  .menu-panel { padding-top: 88px; }
  .menu-panel a { grid-template-columns: 38px 1fr; font-size: clamp(34px, 11vw, 58px); padding: 13px 0; }

  .hero { min-height: 100svh; }
  .hero__paper {
    clip-path: polygon(62% 0,100% 0,100% 100%,47% 100%,54% 77%,49% 54%,57% 27%);
  }
  .hero__tail { bottom: -58px; width: 54%; height: 82px; }
  .hero__seam { left: 51%; }
  .hero__vertical { display: none; }
  .hero__logo { width: 86vw; transform: translateY(-7vh) scale(.94); }
  .hero__meta { padding-top: 74px; grid-template-rows: auto 1fr auto; }
  .hero__kicker { font-size: 12px; }
  .hero__date .days { font-size: clamp(38px, 12vw, 54px); }
  .hero__admission { margin-bottom: 8px; }
  .hero__admission strong { font-size: 31px; }
  .scroll-cue { left: 51%; }

  .section { padding-top: 100px; padding-bottom: 100px; }
  .concept { padding-top: 150px; }
  .section__index { width: 100%; }
  .section__title { font-size: clamp(46px, 14vw, 76px); }

  .creators__head {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 18px;
    margin-bottom: 52px;
  }
  .creators__count {
    justify-self: start;
    padding: 0;
    font-size: 9px;
  }
  .creator-row {
    grid-template-columns: 34px minmax(0,1fr) 28px;
    gap: 10px 16px;
    padding: 23px 0;
  }
  .creator-row__name { font-size: clamp(32px, 10.5vw, 48px); }
  .creator-row__genre { font-size: 9px; overflow-wrap: anywhere; }

  .venue { gap: 42px; }
  .venue__name { font-size: clamp(58px, 19vw, 96px); }

  .food { gap: 48px; }
  .food .section__title { font-size: clamp(54px, 15vw, 76px); }
  .food__item {
    grid-template-columns: 36px minmax(0,1fr);
    grid-template-rows: auto auto auto;
    gap: 8px 12px;
    padding: 28px 0 31px;
  }
  .food__item > span:first-child { grid-column: 1; grid-row: 1; }
  .food__item > strong { grid-column: 2; grid-row: 1; font-size: 34px; min-width: 0; }
  .food__item > span:nth-of-type(2) { grid-column: 2; grid-row: 2; justify-self: start; }
  .food__item > p { grid-column: 2; grid-row: 3; margin-top: 8px; }

  .info__row { grid-template-columns: 92px minmax(0,1fr); gap: 16px; }
  .info__value { overflow-wrap: anywhere; }

  .footer { min-height: 30svh; }
  .footer__mark { width: 72px; }
  .motion-ready .reveal { transform: translateY(14px); filter: blur(.7px); }
  .motion-ready .reveal.is-visible { transform: translateY(0); filter: blur(0); }
  .motion-ready .creator-row.reveal:nth-child(odd),
  .motion-ready .creator-row.reveal:nth-child(even) { transform: translateX(10px); }
  .motion-ready .creator-row.reveal.is-visible { transform: translateX(0); }
}


/* =========================
   v0.4 refinements
   ========================= */

/* Hero-to-concept transition: a soft paper fade replaces the hard clipped tail. */
.hero__tail { display: none !important; }
.hero__fade {
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(74px, 10vw, 150px);
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(243,241,235,0) 0%,
    rgba(243,241,235,.06) 18%,
    rgba(243,241,235,.32) 55%,
    rgba(243,241,235,.78) 82%,
    var(--paper) 100%);
}
.scroll-cue { z-index: 7; bottom: clamp(42px, 6vw, 74px); }

/* Native FAQ accordion. Works even if JavaScript is blocked by a file previewer. */
.faq__item { display: block; }
.faq__q {
  list-style: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
.faq__plus { font-size: 24px; font-weight: 300; transition: transform .28s ease; }
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  max-height: none;
  transition: grid-template-rows .36s cubic-bezier(.2,.75,.2,1), opacity .25s ease;
  opacity: .35;
}
.faq__a > p { overflow: hidden; }
.faq__item[open] .faq__a { grid-template-rows: 1fr; opacity: 1; }
.faq__item[open] .faq__plus { transform: rotate(45deg); }

/* The footer mark must read as the inverse of its black background. */
.footer { background: var(--black) !important; color: white !important; }
.footer__mark { filter: invert(1) brightness(1.08) !important; opacity: .92; }
.footer__bottom { border-top-color: var(--line-dark) !important; }

/* Scroll-linked depth: decorative numbers drift, titles move against them. */
.section { --section-drift: 0px; }
.concept::before,
.creators::before,
.venue::before,
#schedule::before,
.food::before,
#faq::before,
#info::before {
  transform: translate3d(0, var(--section-drift), 0);
  will-change: transform;
}
[data-parallax] {
  --parallax-y: 0px;
  transform: translate3d(0, var(--parallax-y), 0);
  will-change: transform;
}
.creator-row__name {
  --row-drift: 0px;
  transform: translate3d(var(--row-drift),0,0);
  transition: transform .22s linear;
}

/* A restrained moving hairline gives long sections a little more life. */
.creators::after,
#schedule::after,
#faq::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: -12vw;
  top: 43%;
  width: 124vw;
  height: 1px;
  background: currentColor;
  opacity: .055;
  transform: rotate(-6deg) translate3d(var(--section-line, 0px),0,0);
  pointer-events: none;
  will-change: transform;
}
.creators > *, #schedule > *, #faq > * { position: relative; z-index: 1; }

@media (max-width: 820px) {
  .hero__fade { height: 112px; }
  .scroll-cue { bottom: 58px; }
  [data-parallax] { transform: translate3d(0, var(--parallax-y), 0); }
  .creator-row__name { transition: transform .15s linear; }
}


/* =========================
   v0.11 — v0.4 visual baseline, functional fixes only
   ========================= */

/* Keep the v0.4 black/white automatic inversion exactly as-is.
   Only enlarge the corner mark slightly. */
.topbar__brand {
  width: 44px !important;
  height: 34px !important;
}

/* v0.4 had pointer-events enabled only for links, not the button.
   This is the actual reason MENU could become untappable. */
.menu-toggle,
.topbar__nav,
.topbar__nav button {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  z-index: 2;
}

/* Allow the overlay to receive taps only while open. */
.menu-panel {
  pointer-events: none;
}
.menu-panel.is-open {
  pointer-events: auto;
}

/* Header remains above menu panel so CLOSE is always tappable. */
.topbar { z-index: 60 !important; }
.menu-panel { z-index: 55 !important; }

/* Improve menu tap targets without changing its visual language. */
.menu-panel a {
  min-height: 72px;
  touch-action: manipulation;
}

/* The logo is intentionally NOT overridden here.
   It remains the exact v0.4 hero logo behavior. */

@media (max-width: 820px) {
  .topbar__brand {
    width: 42px !important;
    height: 33px !important;
  }
}


/* ==========================================================
   v0.12 — DO NOT TOUCH HERO LOGO
   Functional/menu + bottom-information fixes only.
   ========================================================== */

/* ----------------------------------------------------------
   HERO INFO
   The logo's size, position, color, blend mode and animation
   are intentionally untouched.
   Only move the date and admission away from the bottom fade.
   ---------------------------------------------------------- */
@media (max-width: 820px) {
  .hero__date,
  .hero__admission {
    transform: translateY(-92px) !important;
  }

  /* Make the transition shallower so it no longer washes over
     visitor-facing information. */
  .hero__fade {
    height: 64px !important;
  }

  .scroll-cue {
    bottom: 86px !important;
  }
}

@media (max-width: 430px) {
  .hero__date,
  .hero__admission {
    transform: translateY(-82px) !important;
  }
}

/* ----------------------------------------------------------
   HASH MENU
   No JavaScript is required to open, close or navigate.
   MENU -> #site-menu
   Any section link changes the hash -> overlay disappears.
   ---------------------------------------------------------- */

.menu-closed-anchor {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* v0.4/v0.11 topbar inversion is preserved.
   The menu trigger is now an ordinary link, so it inherits
   the same black/white automatic inversion. */
.menu-link {
  pointer-events: auto !important;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.menu-panel--hash {
  position: fixed !important;
  z-index: 55 !important;
  inset: 0 !important;
  padding: clamp(96px, 12vw, 150px) var(--pad) var(--pad) !important;
  background: rgba(8,8,8,.985) !important;
  color: white !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-8px) !important;

  transition:
    opacity .18s ease,
    transform .18s ease,
    visibility 0s linear .18s !important;
  overflow-y: auto !important;
}

/* Native browser state: this is what makes it reliable in the previewer. */
.menu-panel--hash:target {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
  transition:
    opacity .18s ease,
    transform .18s ease,
    visibility 0s linear 0s !important;
}

.menu-panel--hash nav {
  margin-left: auto !important;
  width: min(760px, 100%) !important;
  border-top: 1px solid var(--line-dark) !important;
}

.menu-panel--hash nav > a {
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) !important;
  align-items: baseline !important;
  min-height: 72px !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--line-dark) !important;
  font-size: clamp(29px, 5.2vw, 76px) !important;
  line-height: .96 !important;
  letter-spacing: -.045em !important;
  touch-action: manipulation !important;
}

.menu-panel--hash nav > a span {
  font-size: 9px !important;
  letter-spacing: .16em !important;
  opacity: .5 !important;
}

.menu-panel__close {
  position: fixed;
  z-index: 61;
  top: 18px;
  right: var(--pad);
  color: white;
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* The fixed topbar remains above normal page content.
   When the overlay itself is targeted, hide its ordinary Menu link;
   CLOSE is provided by the overlay. */
.menu-panel--hash:target ~ main {
  /* no visual change; section navigation happens natively */
}

/* Existing .menu-panel.is-open rules from older versions are irrelevant
   because v0.12 never adds is-open. */
.menu-panel--hash.is-open {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 820px) {
  /* Older CSS hides all topbar links on mobile.
     Explicitly keep the menu trigger visible. */
  .topbar__nav > .menu-link {
    display: inline-flex !important;
    align-items: center;
    min-height: 36px;
  }

  .menu-panel--hash {
    padding-top: 88px !important;
  }

  .menu-panel--hash nav > a {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    font-size: clamp(34px, 11vw, 58px) !important;
    padding: 13px 0 !important;
  }

  .menu-panel__close {
    top: 16px;
  }
}


/* ==========================================================
   v0.13 — micro adjustments only
   ========================================================== */

/* Menu close: compact × instead of oversized CLOSE text */
.menu-panel__close {
  top: 14px !important;
  right: 18px !important;
  width: 42px !important;
  height: 42px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  border-radius: 50% !important;
  font-size: 30px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #fff !important;
  background: rgba(8,8,8,.55) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* HERO LOGO:
   Keep v0.12 color/blend logic untouched.
   Move the whole logo slightly upward only. */
@media (max-width: 820px) {
  .hero__logo {
    transform: translateY(-10vh) scale(.94) !important;
  }
}
@media (min-width: 821px) {
  .hero__logo {
    transform: translateY(-3vh) scale(.96) !important;
  }
}

/* SCROLL cue:
   give it its own small backing so it remains readable across the seam. */
.scroll-cue {
  z-index: 12 !important;
  opacity: 1 !important;
  color: #111 !important;
  background: rgba(244,242,237,.92) !important;
  padding: 6px 9px !important;
  border-radius: 999px !important;
  line-height: 1 !important;
  letter-spacing: .16em !important;
  mix-blend-mode: normal !important;
  box-shadow: 0 0 0 1px rgba(17,17,17,.08);
}

/* Keep its vertical guide visible but separated from the label. */
.scroll-cue::after {
  opacity: .6 !important;
}

@media (max-width: 820px) {
  .scroll-cue {
    bottom: 104px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-size: 9px !important;
  }
}


/* ==========================================================
   v0.14 — remove unnecessary circles / pills
   ========================================================== */

/* Plain × only */
.menu-panel__close {
  top: 16px !important;
  right: 20px !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  font-size: 34px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  color: #fff !important;
}

/* Plain SCROLL text + guide only */
.scroll-cue {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  mix-blend-mode: normal !important;
  color: #111 !important;
  letter-spacing: .18em !important;
  font-size: 9px !important;
  opacity: .9 !important;
}

.scroll-cue::before {
  display: none !important;
}

.scroll-cue::after {
  opacity: .55 !important;
}

@media (max-width: 820px) {
  .scroll-cue {
    bottom: 106px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}


/* ==========================================================
   v0.15 — simplify header/menu + remove scroll cue entirely
   ========================================================== */

/* SCROLL cue: remove all of it. */
.scroll-cue,
.scroll-cue::before,
.scroll-cue::after {
  display: none !important;
}

/* When the hash menu is open, hide MENU completely. */
body:has(.menu-panel--hash:target) .menu-link {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Close control sits exactly where MENU was, with no circle or extra decoration. */
.menu-panel__close {
  position: fixed !important;
  z-index: 70 !important;
  top: 16px !important;
  right: var(--pad) !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  display: block !important;
  color: #fff !important;
  font-size: 26px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;

  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 820px) {
  .menu-panel__close {
    top: 16px !important;
    right: 18px !important;
    font-size: 28px !important;
  }
}


/* ==========================================================
   v0.16 — creator preview + clearer schedule
   ========================================================== */

/* slightly calmer creator list sizing */
.creator-row__name {
  font-size: clamp(24px, 4.3vw, 62px) !important;
  line-height: .94 !important;
}
.creator-row__genre {
  font-size: 10px !important;
}

/* creator detail preview modal */
.creator-modal {
  position: fixed;
  inset: 0;
  z-index: 58;
  background: rgba(8,8,8,.96);
  color: white;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
  overflow-y: auto;
}
.creator-modal:target {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear 0s;
}
.creator-modal__close {
  position: fixed;
  top: 18px;
  right: var(--pad);
  z-index: 59;
  color: white;
  font-size: 28px;
  line-height: 1;
  text-decoration: none;
}
.creator-modal__inner {
  min-height: 100svh;
  padding: clamp(84px, 10vw, 120px) var(--pad) clamp(34px, 6vw, 56px);
  display: grid;
  align-content: start;
  gap: 24px;
  background:
    linear-gradient(120deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(90deg, rgba(255,255,255,.04) 0 56%, rgba(255,255,255,0) 56% 100%);
}
.creator-modal__top {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: baseline;
}
.creator-modal__no,
.creator-modal__genre,
.creator-modal__eyebrow,
.creator-modal__back {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .72;
}
.creator-modal__name {
  margin: 0;
  font-size: clamp(58px, 10vw, 140px);
  line-height: .85;
  letter-spacing: -.06em;
  max-width: 10em;
}
.creator-modal__body {
  display: grid;
  grid-template-columns: minmax(240px, .55fr) 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.creator-modal__visual {
  min-height: 380px;
  border: 1px solid rgba(255,255,255,.18);
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 10px;
  letter-spacing: .14em;
  line-height: 1.9;
  color: rgba(255,255,255,.58);
  background:
    linear-gradient(145deg, rgba(255,255,255,.05), transparent 60%),
    rgba(255,255,255,.02);
}
.creator-modal__text {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(17px, 2vw, 28px);
  line-height: 1.85;
}
.creator-modal__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.creator-modal__links a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.18);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.creator-modal__works {
  margin-top: 32px;
}
.creator-modal__workgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 12px;
}
.creator-modal__work {
  min-height: 120px;
  border: 1px solid rgba(255,255,255,.16);
  display: grid;
  place-items: center;
  font-size: 9px;
  letter-spacing: .14em;
  color: rgba(255,255,255,.45);
  background: linear-gradient(135deg, rgba(255,255,255,.04), transparent 60%);
}
.creator-modal__back {
  display: inline-block;
  margin-top: 26px;
}

body:has(.creator-modal:target) .topbar {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* clearer schedule presentation */
.schedule__leadcopy {
  max-width: 760px;
  margin: 28px 0 0;
  font-size: clamp(13px, 1.2vw, 17px);
  line-height: 1.95;
  letter-spacing: .04em;
  opacity: .76;
}
.schedule__cards {
  margin-top: 58px;
  display: grid;
  gap: 18px;
}
.schedule-card {
  display: grid;
  grid-template-columns: minmax(180px, .42fr) 1fr;
  gap: clamp(24px, 4vw, 42px);
  padding: 30px;
  border: 1px solid var(--line-dark);
  background: linear-gradient(145deg, rgba(255,255,255,.035), transparent 62%);
}
.schedule-card__head h3 {
  margin: 10px 0 0;
  font-size: clamp(38px, 4.8vw, 68px);
  letter-spacing: -.05em;
  line-height: .94;
}
.schedule-card__head h3 small {
  font-size: .55em;
  letter-spacing: .02em;
}
.schedule-card__day {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .58;
}
.schedule-card__items {
  display: grid;
  gap: 14px;
  align-content: start;
}
.schedule-card__item {
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: 14px;
  display: grid;
  gap: 4px;
}
.schedule-card__item--muted {
  opacity: .62;
}
.schedule-card__label {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .62;
}
.schedule-card__status {
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.25;
  letter-spacing: -.02em;
}
.schedule-card__sub {
  font-size: 12px;
  letter-spacing: .05em;
  opacity: .66;
}

@media (max-width: 820px) {
  .creator-row__name {
    font-size: clamp(28px, 9vw, 42px) !important;
  }
  .creator-modal__close {
    top: 16px;
    right: 18px;
  }
  .creator-modal__inner {
    padding-top: 82px;
    gap: 18px;
  }
  .creator-modal__top {
    flex-direction: column;
    align-items: start;
    gap: 6px;
  }
  .creator-modal__name {
    font-size: clamp(42px, 13vw, 72px);
    max-width: 100%;
  }
  .creator-modal__body {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .creator-modal__visual {
    min-height: 220px;
  }
  .creator-modal__text {
    font-size: 16px;
    line-height: 1.9;
  }
  .creator-modal__workgrid {
    grid-template-columns: 1fr 1fr;
  }

  .schedule__leadcopy {
    margin-top: 22px;
    font-size: 13px;
  }
  .schedule__cards {
    margin-top: 38px;
    gap: 14px;
  }
  .schedule-card {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px 20px;
  }
  .schedule-card__head h3 {
    font-size: clamp(34px, 12vw, 52px);
  }
  .schedule-card__status {
    font-size: 18px;
  }
  .schedule-card__sub {
    font-size: 11px;
  }
}


/* ==========================================================
   v0.17 — editorial polish layer
   Base: v0.16. Existing hero/menu/fee/order fixes are untouched.
   ========================================================== */

/* Global editorial rhythm */
.section {
  isolation: isolate;
}
.section > * {
  position: relative;
  z-index: 2;
}
.section::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: var(--pad);
  right: var(--pad);
  top: 38px;
  height: 1px;
  background: currentColor;
  opacity: .06;
  pointer-events: none;
}

/* CREATOR LIST — slightly calmer */
.creators {
  padding-bottom: 13vh;
}
.creator-row {
  min-height: 106px;
}
.creator-row__name {
  font-size: clamp(24px, 4.2vw, 60px) !important;
  line-height: .94 !important;
  font-weight: 400;
}
.creator-row__genre {
  opacity: .5;
}
.creator-row__no {
  opacity: .34;
}
.creator-row::after {
  content: "VIEW";
  position: absolute;
  right: 48px;
  top: 50%;
  translate: 0 -50%;
  font-size: 8px;
  letter-spacing: .18em;
  opacity: 0;
  transform: translateX(-7px);
  transition: opacity .25s ease, transform .25s ease;
}
.creator-row:hover {
  background: rgba(255,255,255,.025);
}
.creator-row:hover::after {
  opacity: .45;
  transform: translateX(0);
}

/* CREATOR MODAL — editorial spread */
.creator-modal {
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 16%),
    rgba(8,8,8,.985);
}
.creator-modal__inner {
  min-height: 100svh;
  padding-top: clamp(84px, 8vw, 108px);
  background:
    linear-gradient(90deg, transparent 0 49.92%, rgba(255,255,255,.05) 50%, transparent 50.08%),
    linear-gradient(180deg, rgba(255,255,255,.014), transparent 40%);
}
.creator-modal__top {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.creator-modal__name {
  margin-top: 8px;
  font-size: clamp(52px, 8.8vw, 120px);
  max-width: 12em;
}
.creator-modal__body {
  margin-top: 10px;
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  gap: clamp(34px, 5.5vw, 74px);
  align-items: start;
}

/* Smaller square profile visual */
.creator-modal__visual {
  width: min(100%, 248px);
  aspect-ratio: 1 / 1;
  min-height: 0;
  justify-self: start;
  align-self: start;
  position: sticky;
  top: 96px;
  border: 1px solid rgba(255,255,255,.16);
  background:
    linear-gradient(135deg, rgba(255,255,255,.05), transparent 55%),
    radial-gradient(circle at 70% 28%, rgba(255,255,255,.035) 0 1px, transparent 1.5px),
    rgba(255,255,255,.018);
  background-size: auto, 18px 18px, auto;
}

.creator-modal__copy {
  max-width: 860px;
}
.creator-modal__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
}
.creator-modal__eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: .14;
}
.creator-modal__text {
  max-width: 28em;
  margin-top: 20px;
  font-size: clamp(17px, 1.7vw, 25px);
  line-height: 1.92;
}
.creator-modal__links {
  margin-top: 28px;
}
.creator-modal__links a {
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.28);
  padding: 0 0 4px;
  min-height: auto;
  transition: opacity .2s ease, translate .2s ease;
}
.creator-modal__links a:hover {
  opacity: .62;
  translate: 3px 0;
}
.creator-modal__works {
  margin-top: 42px;
}
.creator-modal__workgrid {
  grid-template-columns: 1.2fr .85fr .85fr;
  gap: 12px;
}
.creator-modal__work {
  min-height: 148px;
  position: relative;
  overflow: hidden;
  align-items: end;
  justify-items: start;
  padding: 12px;
}
.creator-modal__work:first-child {
  min-height: 188px;
}
.creator-modal__work::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(145deg, rgba(255,255,255,.035), transparent 54%),
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(255,255,255,.025) 22px 23px);
  opacity: .65;
}
.creator-modal__back {
  margin-top: 30px;
  opacity: .52;
}
.creator-modal__close {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
}

/* SCHEDULE — easier to scan, still in the current visual language */
.schedule__leadcopy {
  max-width: 620px;
  opacity: .62;
}
.schedule__cards {
  gap: 0;
  border-top: 1px solid rgba(255,255,255,.13);
}
.schedule-card {
  position: relative;
  grid-template-columns: minmax(160px, .32fr) 1fr;
  padding: 34px 0;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.13);
  background: transparent;
}
.schedule-card::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 0;
  height: 1px;
  background: white;
  transition: width .28s ease;
}
.schedule-card:hover::before {
  width: 10px;
}
.schedule-card__head h3 {
  font-size: clamp(40px, 4.7vw, 66px);
}
.schedule-card__day {
  opacity: .42;
}
.schedule-card__items {
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.schedule-card__item {
  padding: 16px 0 0;
  border-top: 1px solid rgba(255,255,255,.12);
}
.schedule-card__status {
  font-size: clamp(17px, 1.7vw, 24px);
  font-weight: 500;
}
.schedule-card__sub {
  margin-top: 2px;
  max-width: 22em;
  line-height: 1.6;
}
.schedule-card__item--muted {
  opacity: .44;
}

/* Subtle interaction polish elsewhere */
.faq__q,
.info__row {
  transition: padding-left .22s ease;
}
.faq__item:hover .faq__q,
.info__row:hover {
  padding-left: 8px;
}
.footer__mark {
  transform: none !important;
}
.footer__bottom {
  opacity: .82;
}

/* Mobile */
@media (max-width: 820px) {
  .section::after {
    top: 28px;
  }

  .creator-row {
    min-height: 90px;
  }
  .creator-row__name {
    font-size: clamp(27px, 8.3vw, 39px) !important;
  }
  .creator-row::after {
    display: none;
  }

  .creator-modal__inner {
    padding-top: 78px;
    gap: 15px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.018), transparent 30%);
  }
  .creator-modal__name {
    font-size: clamp(42px, 12vw, 64px);
    margin-top: 4px;
  }
  .creator-modal__body {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 8px;
  }
  .creator-modal__visual {
    width: 148px;
    aspect-ratio: 1 / 1;
    position: static;
  }
  .creator-modal__text {
    margin-top: 16px;
    font-size: 16px;
    line-height: 1.9;
  }
  .creator-modal__works {
    margin-top: 32px;
  }
  .creator-modal__workgrid {
    grid-template-columns: 1.1fr .9fr;
  }
  .creator-modal__work {
    min-height: 108px;
  }
  .creator-modal__work:first-child {
    min-height: 144px;
    grid-row: span 2;
  }

  .schedule__cards {
    margin-top: 34px;
  }
  .schedule-card {
    grid-template-columns: 1fr;
    padding: 28px 0;
    gap: 20px;
  }
  .schedule-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
  }
  .schedule-card__head h3 {
    margin: 0;
    font-size: clamp(34px, 11vw, 48px);
  }
  .schedule-card__items {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .schedule-card__status {
    font-size: 16px;
  }
  .schedule-card__sub {
    font-size: 10px;
  }
}

@media (max-width: 520px) {
  .schedule-card__items {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================
   v0.18 — adopted v0.17 + modal tap fix + one accent color
   ========================================================== */

:root {
  --accent: #3157e8; /* deep cobalt blue */
  --accent-soft: rgba(49,87,232,.18);
}

/* ----------------------------------------------------------
   1) CREATOR MODAL TAP FIX
   The v0.17 modal sat below the fixed topbar (58 vs 60),
   so on iOS the close tap could leak into MENU.
   Put the entire modal decisively above all fixed header UI.
   ---------------------------------------------------------- */
.creator-modal {
  z-index: 120 !important;
}
.creator-modal__close {
  z-index: 122 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent;
}
.creator-modal:target {
  pointer-events: auto !important;
}

/* While a creator modal is targeted, the global header is not interactive.
   This is only a backup; the modal itself is already above it. */
body:has(.creator-modal:target) .topbar {
  pointer-events: none !important;
}

/* ----------------------------------------------------------
   2) ACCENT COLOR
   One color, used only on small editorial details.
   Main typography / logo / black-white structure stay untouched.
   ---------------------------------------------------------- */

/* Section indices */
.section__index {
  color: var(--accent);
  opacity: .82;
}
.section__index::after {
  background: var(--accent);
  opacity: .38;
}

/* Creator list: number + arrow only */
.creator-row__no {
  color: var(--accent);
  opacity: .78;
}
.creator-row__arrow {
  color: var(--accent);
}
.creator-row::before {
  background: var(--accent);
}
.creator-row:hover {
  background:
    linear-gradient(90deg, var(--accent-soft), transparent 38%),
    rgba(255,255,255,.018);
}

/* Creator modal small labels */
.creator-modal__no,
.creator-modal__genre,
.creator-modal__eyebrow {
  color: var(--accent);
  opacity: .9;
}
.creator-modal__eyebrow::after {
  background: var(--accent);
  opacity: .44;
}
.creator-modal__work {
  border-color: rgba(49,87,232,.26);
}
.creator-modal__work:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}
.creator-modal__back {
  color: var(--accent);
  opacity: .86;
}

/* Schedule: day labels + small category labels */
.schedule-card__day,
.schedule-card__label {
  color: var(--accent);
  opacity: .9;
}
.schedule-card::before {
  background: var(--accent);
}

/* Food / FAQ / Info tiny accents */
.food__item > span:first-child {
  color: var(--accent);
  opacity: .9;
}
.faq__plus {
  color: var(--accent);
}
.info__key {
  color: var(--accent);
  opacity: .82;
}

/* Venue external link */
.venue__link {
  border-bottom-color: var(--accent);
}
.venue__link span {
  color: var(--accent);
}

/* Footer: one restrained accent line, no recoloring of the mark */
.footer__bottom {
  border-top-color: rgba(49,87,232,.45) !important;
}

/* Mobile keeps the accent subtle */
@media (max-width: 820px) {
  .creator-row:hover {
    background: transparent;
  }
}


/* ==========================================================
   v0.19 — warm orange accent + attendance/live status + work lightbox
   Base: v0.18. Existing layout fixes remain untouched.
   ========================================================== */

:root {
  --accent: #E76A2D; /* warm burnt orange */
  --accent-soft: rgba(231,106,45,.18);
}

/* Ensure v0.18 hard-coded blue values are overridden */
.creator-modal__work {
  border-color: rgba(231,106,45,.28) !important;
}
.footer__bottom {
  border-top-color: rgba(231,106,45,.45) !important;
}

/* Attendance / live schedule line */
.creator-modal__attendance {
  margin-top: 30px;
  padding: 16px 0 17px;
  border-top: 1px solid rgba(255,255,255,.14);
  border-bottom: 1px solid rgba(255,255,255,.14);
  display: grid;
  grid-template-columns: minmax(110px, .34fr) 1fr;
  align-items: baseline;
  gap: 18px;
}
.creator-modal__attendance-label {
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent);
}
.creator-modal__attendance-value {
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 500;
  letter-spacing: -.02em;
}

/* Work placeholders now behave like image buttons */
.creator-modal__work {
  appearance: none;
  width: 100%;
  color: rgba(255,255,255,.48);
  font-family: inherit;
  cursor: zoom-in;
  text-align: left;
}
.creator-modal__work::after {
  content: "↗";
  position: absolute;
  right: 11px;
  top: 9px;
  font-size: 15px;
  color: var(--accent);
  opacity: .9;
}
.creator-modal__work:hover {
  border-color: var(--accent) !important;
}

/* Shared work lightbox */
.work-lightbox {
  position: fixed;
  inset: 0;
  z-index: 220;
  background: rgba(8,8,8,.97);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility 0s linear .2s;
  display: grid;
  place-items: center;
  padding: clamp(56px, 6vw, 86px) var(--pad) 34px;
}
.work-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .2s ease, visibility 0s linear 0s;
}
.work-lightbox__close {
  position: fixed;
  z-index: 222;
  top: 16px;
  right: 18px;
  appearance: none;
  border: 0;
  background: transparent;
  color: white;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}
.work-lightbox__stage {
  width: min(1100px, 100%);
  max-height: calc(100svh - 110px);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 18px;
}
.work-lightbox__image {
  min-height: min(70svh, 760px);
  border: 1px solid rgba(255,255,255,.14);
  display: grid;
  place-items: center;
  background:
    linear-gradient(145deg, rgba(255,255,255,.04), transparent 56%),
    repeating-linear-gradient(90deg, transparent 0 28px, rgba(255,255,255,.018) 28px 29px);
  overflow: hidden;
}
.work-lightbox__image img {
  width: 100%;
  height: 100%;
  max-height: 72svh;
  object-fit: contain;
}
.work-lightbox__placeholder {
  text-align: center;
  font-size: 10px;
  line-height: 2;
  letter-spacing: .16em;
  color: rgba(255,255,255,.42);
}
.work-lightbox__meta {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: baseline;
  border-top: 1px solid rgba(255,255,255,.13);
  padding-top: 12px;
}
.work-lightbox__creator {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--accent);
}
.work-lightbox__title {
  font-size: 14px;
  letter-spacing: .05em;
  font-weight: 500;
}

body.work-lightbox-open {
  overflow: hidden;
}

@media (max-width: 820px) {
  .creator-modal__attendance {
    grid-template-columns: 1fr auto;
    gap: 14px;
    margin-top: 24px;
  }

  .work-lightbox {
    padding: 58px 18px 24px;
  }
  .work-lightbox__image {
    min-height: 58svh;
  }
  .work-lightbox__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
}


/* ==========================================================
   v0.20 — stronger orange legibility + soft scroll emergence
   Base: v0.19. Existing hero/menu/modal/lightbox behavior preserved.
   ========================================================== */

/* ----------------------------------------------------------
   ORANGE LEGIBILITY
   Make accent information easier to read without making it loud.
   ---------------------------------------------------------- */
.section__index,
.creator-row__no,
.creator-modal__no,
.creator-modal__genre,
.creator-modal__eyebrow,
.creator-modal__attendance-label,
.schedule-card__day,
.schedule-card__label,
.food__item > span:first-child,
.info__key,
.work-lightbox__creator {
  font-weight: 700 !important;
  letter-spacing: .13em !important;
}

.section__index {
  font-size: 11px !important;
  opacity: .96 !important;
}

.creator-row__no {
  font-size: 11px !important;
  opacity: .95 !important;
}

.creator-modal__no,
.creator-modal__genre,
.creator-modal__eyebrow,
.creator-modal__attendance-label {
  font-size: 11px !important;
  opacity: 1 !important;
}

.schedule-card__day,
.schedule-card__label {
  font-size: 11px !important;
  opacity: 1 !important;
}

.food__item > span:first-child,
.info__key {
  font-size: 10px !important;
  opacity: .95 !important;
}

/* Add tiny orange markers so meaning does not rely on thin orange text alone. */
.section__index::before,
.creator-modal__eyebrow::before,
.creator-modal__attendance-label::before,
.schedule-card__day::before,
.schedule-card__label::before,
.info__key::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  background: var(--accent);
  vertical-align: .05em;
}

.creator-modal__eyebrow {
  gap: 8px !important;
}

/* ----------------------------------------------------------
   SOFT SCROLL EMERGENCE
   Content is only hidden if JS successfully enables the effect.
   ---------------------------------------------------------- */

.emerge-ready .scroll-emerge {
  opacity: 0;
  filter: blur(10px);
  transform: translate3d(0, 22px, 0) scale(.985);
  transform-origin: center top;
  transition:
    opacity .82s cubic-bezier(.2,.72,.2,1),
    filter .82s ease,
    transform .92s cubic-bezier(.16,.72,.2,1);
  will-change: opacity, filter, transform;
}

.emerge-ready .scroll-emerge.is-emerged {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0,0,0) scale(1);
}

/* Titles appear a little more slowly and softly. */
.emerge-ready .scroll-emerge--title {
  transform: translate3d(0, 28px, 0) scale(.975);
  filter: blur(13px);
  transition-duration: 1s;
}

/* Rows / cards rise a little less to keep lists calm. */
.emerge-ready .scroll-emerge--item {
  transform: translate3d(0, 14px, 0) scale(.99);
  filter: blur(6px);
  transition-duration: .72s;
}

/* Slightly staggered impression without slow UX. */
.emerge-ready .scroll-emerge[data-delay="1"] { transition-delay: .05s; }
.emerge-ready .scroll-emerge[data-delay="2"] { transition-delay: .10s; }
.emerge-ready .scroll-emerge[data-delay="3"] { transition-delay: .15s; }
.emerge-ready .scroll-emerge[data-delay="4"] { transition-delay: .20s; }
.emerge-ready .scroll-emerge[data-delay="5"] { transition-delay: .25s; }

/* A subtle orange hairline grows in as sections arrive. */
.emerge-ready .section.emerge-section::before {
  transform-origin: left center;
  transform: scaleX(.16);
  opacity: 0;
  transition: transform 1s cubic-bezier(.2,.72,.2,1), opacity .8s ease;
}
.emerge-ready .section.emerge-section.is-section-emerged::before {
  transform: scaleX(1);
  opacity: .03;
}

/* Modal contents also emerge softly when opened. */
.creator-modal:target .creator-modal__visual,
.creator-modal:target .creator-modal__copy {
  animation: modalSoftIn .72s cubic-bezier(.2,.72,.2,1) both;
}
.creator-modal:target .creator-modal__copy {
  animation-delay: .06s;
}

@keyframes modalSoftIn {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@media (max-width: 820px) {
  .section__index {
    font-size: 10px !important;
  }

  .creator-row__no,
  .schedule-card__day,
  .schedule-card__label,
  .creator-modal__attendance-label {
    font-size: 10px !important;
  }

  .emerge-ready .scroll-emerge {
    filter: blur(7px);
    transform: translate3d(0, 16px, 0) scale(.99);
  }

  .emerge-ready .scroll-emerge--title {
    filter: blur(10px);
    transform: translate3d(0, 20px, 0) scale(.985);
  }
}

@media (prefers-reduced-motion: reduce) {
  .emerge-ready .scroll-emerge,
  .emerge-ready .scroll-emerge--title,
  .emerge-ready .scroll-emerge--item {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ==========================================================
   v0.21 — larger orange labels only
   Base: v0.20. Layout and motion unchanged.
   ========================================================== */

.section__index {
  font-size: 13px !important;
}

.creator-row__no {
  font-size: 13px !important;
}

.creator-modal__no,
.creator-modal__genre,
.creator-modal__eyebrow,
.creator-modal__attendance-label {
  font-size: 13px !important;
}

.schedule-card__day,
.schedule-card__label {
  font-size: 13px !important;
}

.food__item > span:first-child,
.info__key {
  font-size: 12px !important;
}

.work-lightbox__creator {
  font-size: 12px !important;
}

@media (max-width: 820px) {
  .section__index {
    font-size: 12px !important;
  }

  .creator-row__no {
    font-size: 12px !important;
  }

  .creator-modal__no,
  .creator-modal__genre,
  .creator-modal__eyebrow,
  .creator-modal__attendance-label {
    font-size: 12px !important;
  }

  .schedule-card__day,
  .schedule-card__label {
    font-size: 12px !important;
  }

  .food__item > span:first-child,
  .info__key,
  .work-lightbox__creator {
    font-size: 11px !important;
  }
}


/* ==========================================================
   v0.22 — creator scale, tighter mobile modal, venue links,
   and clearer concept copy. Base: v0.21.
   ========================================================== */

/* 1) Creator list: a little smaller, a little bolder */
.creator-row__name {
  font-size: clamp(26px, 4.1vw, 58px) !important;
  font-weight: 700;
  letter-spacing: -.04em;
}

@media (max-width: 820px) {
  .creator-row {
    grid-template-columns: 40px minmax(0, 1fr) 92px 24px;
    gap: 12px;
    padding: 20px 0;
  }
  .creator-row__name {
    font-size: clamp(24px, 7.8vw, 34px) !important;
    line-height: .94;
  }
  .creator-row__genre {
    font-size: 9px;
    letter-spacing: .12em;
  }
  .creator-row__arrow {
    font-size: 18px;
  }
}

/* 2) Concept section: larger and easier to read */
.concept__body {
  max-width: 760px;
}
.concept__sublead {
  margin: 0 0 20px;
  font-size: clamp(15px, 1.35vw, 20px);
  line-height: 1.95;
  letter-spacing: .03em;
}
.concept__body p:last-child {
  font-size: clamp(14px, 1.18vw, 18px);
  line-height: 2.05;
}
@media (max-width: 820px) {
  .concept__sublead {
    font-size: 16px;
    line-height: 1.95;
    margin-bottom: 16px;
  }
  .concept__body p:last-child {
    font-size: 15px;
    line-height: 2;
  }
}

/* 3) Venue section: use the empty right space for links */
.venue__detail {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(180px, .75fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.venue__detail-main {
  min-width: 0;
}
.venue__detail-links {
  display: grid;
  gap: 18px;
  align-content: start;
  justify-items: start;
  padding-top: 2px;
}
.venue__link {
  margin-top: 0;
}
@media (max-width: 820px) {
  .venue__detail {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .venue__detail-links {
    gap: 14px;
  }
}

/* 4) Mobile creator modal: square visual with profile text beside it */
.creator-modal__intro {
  min-width: 0;
}

@media (max-width: 820px) {
  .creator-modal__body {
    grid-template-columns: minmax(128px, 42vw) minmax(0, 1fr);
    gap: 18px 16px;
    align-items: start;
  }

  .creator-modal__copy {
    display: contents;
  }

  .creator-modal__visual {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    align-self: start;
  }

  .creator-modal__intro {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }

  .creator-modal__text {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.9;
  }

  .creator-modal__links {
    margin-top: 16px;
  }

  .creator-modal__attendance {
    margin-top: 18px;
  }

  .creator-modal__works,
  .creator-modal__back {
    grid-column: 1 / -1;
  }

  .creator-modal__works {
    margin-top: 10px;
  }
}


/* ==========================================================
   v0.23 — mobile creator modal refinement
   Base: v0.22. Existing motion / menu / hero preserved.
   ========================================================== */

/* In creator detail: make the orange PROFILE line start from the left,
   lower the visual a bit, and let attendance sit in a normal block. */
@media (max-width: 820px) {
  .creator-modal__body {
    grid-template-columns: minmax(132px, 41vw) minmax(0, 1fr);
    gap: 18px 16px;
    align-items: start;
  }

  .creator-modal__intro {
    display: contents;
  }

  .creator-modal__eyebrow {
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0 0 2px;
  }

  .creator-modal__visual {
    grid-column: 1;
    grid-row: 2;
    margin-top: 8px;
    align-self: start;
  }

  .creator-modal__text {
    grid-column: 2;
    grid-row: 2;
    margin-top: 8px;
    max-width: none;
    font-size: 13.5px;
    line-height: 1.92;
  }

  .creator-modal__links {
    grid-column: 2;
    grid-row: 3;
    margin-top: 10px;
  }

  .creator-modal__attendance {
    grid-column: 1 / -1;
    grid-row: 4;
    margin-top: 2px;
    padding: 14px 0 15px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: start;
  }

  .creator-modal__attendance-label,
  .creator-modal__attendance-value {
    justify-self: start;
    text-align: left;
  }

  .creator-modal__attendance-value {
    font-size: 24px;
    line-height: 1.1;
  }

  .creator-modal__works {
    grid-column: 1 / -1;
    grid-row: 5;
    margin-top: 10px;
  }
}


/* ==========================================================
   v0.24 — hierarchy cleanup
   Base: v0.23. Existing hero/menu/motion/profile behavior preserved.
   ========================================================== */

/* ----------------------------------------------------------
   CREATORS — name + role read as one identity
   ---------------------------------------------------------- */
.creator-row {
  grid-template-columns: 48px minmax(0, 1fr) 30px !important;
  gap: 16px !important;
}

.creator-row__identity {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: clamp(12px, 1.8vw, 24px);
  flex-wrap: wrap;
}

.creator-row__name {
  flex: 0 1 auto;
}

.creator-row__genre {
  flex: 0 0 auto;
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: .12em !important;
  opacity: .58 !important;
  white-space: nowrap;
}

.creator-row__arrow {
  grid-column: 3 !important;
  justify-self: end;
}

@media (max-width: 820px) {
  .creator-row {
    grid-template-columns: 38px minmax(0, 1fr) 24px !important;
    gap: 12px !important;
    min-height: 84px;
  }

  .creator-row__identity {
    grid-column: 2;
    display: flex;
    align-items: baseline;
    gap: 9px 12px;
    flex-wrap: wrap;
  }

  .creator-row__name {
    font-size: clamp(23px, 7.2vw, 32px) !important;
    font-weight: 700;
  }

  .creator-row__genre {
    font-size: 9px !important;
    line-height: 1.2;
    white-space: normal;
  }

  .creator-row__arrow {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: center;
  }
}

/* ----------------------------------------------------------
   CREATOR MODAL — genre sits beside creator name
   ---------------------------------------------------------- */
.creator-modal__top {
  justify-content: flex-start !important;
}

.creator-modal__heading {
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 2vw, 28px);
  flex-wrap: wrap;
}

.creator-modal__heading .creator-modal__name {
  margin: 0;
}

.creator-modal__heading .creator-modal__genre {
  font-size: 13px !important;
  font-weight: 700;
  letter-spacing: .13em !important;
  color: var(--accent);
  opacity: 1 !important;
}

@media (max-width: 820px) {
  .creator-modal__heading {
    gap: 10px 14px;
    margin-top: 2px;
  }

  .creator-modal__heading .creator-modal__genre {
    font-size: 11px !important;
  }
}

/* ----------------------------------------------------------
   VENUE — less giant, more useful information
   ---------------------------------------------------------- */
.venue__name {
  font-size: clamp(52px, 8.8vw, 138px) !important;
  letter-spacing: -.065em !important;
}

.venue__detail {
  font-size: clamp(14px, 1.15vw, 17px) !important;
  line-height: 1.9 !important;
}

.venue__detail-main {
  font-size: inherit;
}

.venue__detail-links {
  gap: 16px !important;
}

.venue__link {
  font-size: 12px !important;
  letter-spacing: .14em !important;
  padding-bottom: 6px !important;
}

@media (max-width: 820px) {
  .venue__name {
    font-size: clamp(50px, 15.5vw, 74px) !important;
  }

  .venue__detail {
    font-size: 16px !important;
    line-height: 1.95 !important;
  }

  .venue__detail-links {
    margin-top: 4px;
    gap: 16px !important;
  }

  .venue__link {
    font-size: 13px !important;
  }
}

/* ----------------------------------------------------------
   FOOD — remove competing item numbers and pull list inward
   ---------------------------------------------------------- */
.food__item {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
}

.food__item > strong {
  grid-column: 1 !important;
  font-size: clamp(26px, 3.2vw, 48px) !important;
}

.food__item > span {
  grid-column: 1 !important;
  justify-self: start !important;
}

.food__item > p {
  grid-column: 1 !important;
  max-width: 28em;
}

@media (max-width: 820px) {
  .food {
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr) !important;
    gap: 24px !important;
    align-items: start;
  }

  .food__list {
    width: 100% !important;
    margin-left: 0 !important;
  }

  .food__item {
    padding: 25px 0 28px !important;
  }

  .food__item > strong {
    font-size: 28px !important;
    line-height: .96;
  }

  .food__item > span {
    font-size: 10px !important;
  }

  .food__item > p {
    font-size: 12px !important;
    line-height: 1.75 !important;
    margin-top: 7px !important;
  }
}

@media (max-width: 520px) {
  .food {
    grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr) !important;
    gap: 18px !important;
  }

  .food .section__title {
    font-size: clamp(48px, 13.2vw, 64px) !important;
  }
}


/* ==========================================================
   v0.25 — remove duplicated section titles
   Base: v0.24. Existing hero/menu/modal/motion preserved.
   ========================================================== */

/* One section heading only: orange number + normal-sized title + line */
.compact-section-head {
  display: grid;
  grid-template-columns: auto auto minmax(36px, 1fr);
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(42px, 6vw, 76px);
}

.compact-section-head__no {
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1;
}

.compact-section-head__title {
  margin: 0;
  color: inherit;
  font-size: clamp(28px, 3.6vw, 50px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1;
}

.compact-section-head__line {
  height: 1px;
  background: var(--accent);
  opacity: .48;
}

/* Remove the old big background-number clash a little more around compact headings */
.creators::before,
#schedule::before,
.food::before,
#faq::before,
#info::before {
  opacity: .018 !important;
}

/* Creator header spacing now that giant title is gone */
.creators__head {
  display: block !important;
  margin-bottom: 30px !important;
}
.creators__head > div {
  display: block;
}
.creators__count {
  margin-top: -20px;
  margin-bottom: 34px;
  padding: 0 !important;
}

/* Schedule intro sits directly under the compact title */
#schedule .schedule__leadcopy {
  margin-top: -22px !important;
  margin-bottom: 40px;
}

/* FOOD: remove huge duplicated title layout and shift vendor list right */
.food {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
  gap: clamp(42px, 7vw, 88px) !important;
  align-items: start;
}

.food > .reveal:first-child {
  min-width: 0;
}

.food .compact-section-head {
  grid-column: 1 / -1;
  margin-bottom: 28px;
}

.food .section__body {
  margin-top: 14px !important;
  max-width: 19em;
  font-size: clamp(14px, 1.15vw, 17px);
}

.food__list {
  margin-left: clamp(10px, 2vw, 28px);
}

.food__item > strong {
  font-size: clamp(25px, 3vw, 44px) !important;
}

/* FAQ / INFO don't need giant titles anymore */
#faq .compact-section-head,
#info .compact-section-head {
  margin-bottom: 38px;
}

#faq .faq__list {
  margin-top: 0 !important;
}

#info .info__rows {
  margin-top: 0 !important;
}

/* Mobile */
@media (max-width: 820px) {
  .compact-section-head {
    grid-template-columns: auto auto minmax(24px, 1fr);
    gap: 11px;
    margin-bottom: 38px;
  }

  .compact-section-head__no {
    font-size: 12px;
  }

  .compact-section-head__title {
    font-size: clamp(24px, 8vw, 34px);
  }

  .creators__count {
    margin-top: -12px;
    margin-bottom: 30px;
    font-size: 10px;
  }

  #schedule .schedule__leadcopy {
    margin-top: -16px !important;
    margin-bottom: 30px;
  }

  .food {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) !important;
    gap: 26px !important;
  }

  .food .compact-section-head {
    grid-column: 1 / -1;
    margin-bottom: 24px;
  }

  .food__list {
    margin-left: 14px !important;
  }

  .food .section__body {
    max-width: 15em;
    font-size: 13px;
    line-height: 1.95;
  }

  .food__item > strong {
    font-size: 27px !important;
  }

  .food__item > p {
    font-size: 12px !important;
    line-height: 1.75 !important;
  }
}

@media (max-width: 520px) {
  .food {
    grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr) !important;
    gap: 22px !important;
  }

  .food__list {
    margin-left: 18px !important;
  }
}


/* ==========================================================
   v0.26 — unify section headings
   ========================================================== */

/* Hide legacy small index when replaced by compact heading */
#concept .section__index,
#venue .section__index {
  display: none !important;
}

/* Unified heading system */
.compact-section-head {
  display: grid;
  grid-template-columns: auto auto minmax(36px, 1fr);
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(34px, 5vw, 62px);
}

.compact-section-head__no,
.compact-section-head__title {
  color: var(--accent) !important;
}

.compact-section-head__no {
  font-size: clamp(24px, 2.8vw, 38px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
}

.compact-section-head__title {
  margin: 0;
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
}

.compact-section-head__line {
  height: 1px;
  background: var(--accent);
  opacity: .5;
}

/* Section-specific rhythm */
#concept .compact-section-head {
  margin-bottom: 40px;
}

#venue .compact-section-head {
  margin-bottom: 34px;
}

#schedule .compact-section-head,
#food .compact-section-head,
#faq .compact-section-head,
#info .compact-section-head,
.creators .compact-section-head {
  margin-bottom: 28px;
}

.creators__head {
  margin-bottom: 22px !important;
}

.creators__count {
  margin-top: 6px !important;
}

#venue .venue__name {
  margin-top: 0;
}

/* remove over-strong differences between headings */
.creators::before,
#schedule::before,
.food::before,
#faq::before,
#info::before {
  opacity: .02 !important;
}

@media (max-width: 820px) {
  .compact-section-head {
    grid-template-columns: auto auto minmax(24px, 1fr);
    gap: 12px;
    margin-bottom: 28px;
  }

  .compact-section-head__no {
    font-size: clamp(20px, 6vw, 28px);
  }

  .compact-section-head__title {
    font-size: clamp(22px, 7vw, 32px);
  }

  #concept .compact-section-head {
    margin-bottom: 28px;
  }

  #venue .compact-section-head {
    margin-bottom: 24px;
  }

  .creators__count {
    margin-top: 2px !important;
    margin-bottom: 30px !important;
  }
}


/* ==========================================================
   v0.27 — creator spacing cleanup
   Base: v0.26.
   ========================================================== */

/* No creator count */
.creators__count {
  display: none !important;
}

/* Give creator name and discipline more breathing room in the list */
.creator-row__identity {
  gap: clamp(18px, 2.5vw, 34px) !important;
}

/* Give creator name and discipline more breathing room in the detail view */
.creator-modal__heading {
  gap: clamp(24px, 3.4vw, 48px) !important;
  align-items: baseline;
}

/* Slightly more air before PROFILE block */
.creator-modal__body {
  margin-top: 22px !important;
}

@media (max-width: 820px) {
  .creator-row__identity {
    gap: 12px 18px !important;
  }

  .creator-modal__heading {
    gap: 14px 22px !important;
  }

  .creator-modal__body {
    margin-top: 18px !important;
  }
}


/* ==========================================================
   v0.29 — back to v0.27 + hero scroll + admission in schedule
   ========================================================== */

/* ----------------------------------------------------------
   HERO: no money first. Just a clean scroll invitation.
   ---------------------------------------------------------- */
.hero-scroll {
  position: absolute;
  z-index: 12;
  right: var(--pad);
  bottom: clamp(34px, 5vw, 58px);
  display: grid;
  grid-template-columns: auto 42px auto;
  align-items: center;
  gap: 10px;
  color: var(--black);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  pointer-events: auto;
}

.hero-scroll__line {
  height: 1px;
  background: currentColor;
  opacity: .5;
  transform-origin: left center;
  animation: heroScrollLine 1.8s ease-in-out infinite;
}

.hero-scroll__arrow {
  font-size: 14px;
  letter-spacing: 0;
  animation: heroScrollArrow 1.8s ease-in-out infinite;
}

@keyframes heroScrollLine {
  0%, 100% { transform: scaleX(.28); opacity: .28; }
  50% { transform: scaleX(1); opacity: .78; }
}

@keyframes heroScrollArrow {
  0%, 100% { transform: translateY(-2px); opacity: .45; }
  50% { transform: translateY(4px); opacity: 1; }
}

/* ----------------------------------------------------------
   ADMISSION & SCHEDULE
   ---------------------------------------------------------- */
.admission-block {
  margin: 0 0 54px;
  display: grid;
  grid-template-columns: minmax(100px, .28fr) minmax(180px, .6fr) minmax(180px, 1fr);
  align-items: end;
  gap: clamp(24px, 4vw, 56px);
  padding: 26px 0 30px;
  border-top: 1px solid rgba(255,255,255,.18);
  border-bottom: 1px solid rgba(255,255,255,.18);
}

.admission-block__label {
  align-self: start;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .15em;
}

.admission-block__main {
  display: grid;
  gap: 4px;
}

.admission-block__main strong {
  font-size: clamp(48px, 7vw, 96px);
  line-height: .82;
  letter-spacing: -.06em;
}

.admission-block__main span {
  color: rgba(255,255,255,.58);
  font-size: 10px;
  letter-spacing: .16em;
}

.admission-block__live {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  align-items: baseline;
}

.admission-block__live > span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
}

.admission-block__live > strong {
  font-size: clamp(24px, 3vw, 42px);
  font-weight: 500;
  letter-spacing: -.03em;
}

.admission-block__live > small {
  grid-column: 1 / -1;
  color: rgba(255,255,255,.52);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: .05em;
}

/* Give the renamed heading enough room on small screens */
#schedule .compact-section-head__title {
  white-space: normal;
}

/* ----------------------------------------------------------
   Mobile
   ---------------------------------------------------------- */
@media (max-width: 820px) {
  .hero-scroll {
    right: 22px;
    bottom: 46px;
    grid-template-columns: auto 30px auto;
    gap: 8px;
    font-size: 9px;
  }

  .admission-block {
    grid-template-columns: 1fr 1fr;
    gap: 22px 18px;
    margin-bottom: 42px;
    padding: 22px 0 24px;
  }

  .admission-block__label {
    grid-column: 1 / -1;
    font-size: 11px;
  }

  .admission-block__main {
    grid-column: 1;
  }

  .admission-block__main strong {
    font-size: clamp(50px, 15vw, 72px);
  }

  .admission-block__live {
    grid-column: 2;
    align-self: end;
  }

  .admission-block__live > strong {
    font-size: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll__line,
  .hero-scroll__arrow {
    animation: none !important;
  }
}


/* ==========================================================
   v0.30 — quieter admission, higher scroll cue, tighter venue
   Base: v0.29 / v0.27 baseline preserved
   ========================================================== */

/* ----------------------------------------------------------
   HERO SCROLL — raise to approximately the date line
   ---------------------------------------------------------- */
.hero-scroll {
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: .16em !important;
}

@media (max-width: 820px) {
  .hero-scroll {
    right: 22px !important;
    bottom: 112px !important;
    grid-template-columns: auto 28px auto !important;
    gap: 8px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
  }

  .hero-scroll__arrow {
    font-size: 15px !important;
  }
}

/* ----------------------------------------------------------
   ADMISSION — information, not the visual hero
   ---------------------------------------------------------- */
.admission-block {
  margin-bottom: 40px !important;
  padding: 20px 0 22px !important;
  gap: clamp(18px, 3vw, 38px) !important;
}

.admission-block__label {
  font-size: 10px !important;
  letter-spacing: .14em !important;
  opacity: .9;
}

.admission-block__main strong {
  font-size: clamp(34px, 4.5vw, 58px) !important;
  line-height: .92 !important;
  letter-spacing: -.045em !important;
  font-weight: 650 !important;
}

.admission-block__main span {
  font-size: 9px !important;
  opacity: .55;
}

.admission-block__live > span {
  font-size: 10px !important;
}

.admission-block__live > strong {
  font-size: clamp(18px, 2.2vw, 28px) !important;
  font-weight: 450 !important;
}

.admission-block__live > small {
  font-size: 10px !important;
  opacity: .72;
}

@media (max-width: 820px) {
  .admission-block {
    gap: 16px !important;
    margin-bottom: 34px !important;
    padding: 18px 0 20px !important;
  }

  .admission-block__label {
    font-size: 10px !important;
  }

  .admission-block__main strong {
    font-size: 38px !important;
  }

  .admission-block__live > strong {
    font-size: 19px !important;
  }

  .admission-block__live > small {
    font-size: 9.5px !important;
    line-height: 1.6 !important;
  }
}

/* ----------------------------------------------------------
   VENUE — smaller title, no divider, tighter relationship
   ---------------------------------------------------------- */
.venue {
  gap: clamp(30px, 5vw, 64px) !important;
}

.venue__name {
  font-size: clamp(44px, 7vw, 104px) !important;
  line-height: .92 !important;
  letter-spacing: -.055em !important;
}

.venue__detail {
  border-top: 0 !important;
  padding-top: 0 !important;
}

@media (max-width: 820px) {
  .venue {
    gap: 18px !important;
  }

  .venue__name {
    font-size: clamp(42px, 12.5vw, 58px) !important;
    line-height: .94 !important;
  }

  .venue__detail {
    font-size: 15px !important;
    line-height: 1.9 !important;
    padding-top: 0 !important;
  }

  .venue__detail-links {
    margin-top: 2px !important;
  }
}


/* ==========================================================
   v0.31 — replace Mincho usage with modern Japanese Gothic
   Base: v0.30. Layout / colors / motion unchanged.
   ========================================================== */

:root {
  --jp-gothic:
    "Hiragino Sans",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    "Noto Sans JP",
    system-ui,
    sans-serif;
}

/* Hero vertical copy */
.hero__vertical {
  font-family: var(--jp-gothic) !important;
  font-weight: 500 !important;
  letter-spacing: .16em !important;
}

/* Concept headline */
.section__lead {
  font-family: var(--jp-gothic) !important;
  font-weight: 650 !important;
  letter-spacing: -.035em !important;
  line-height: 1.42 !important;
}

/* Creator modal profile copy */
.creator-modal__text {
  font-family: var(--jp-gothic) !important;
  font-weight: 450 !important;
  letter-spacing: .015em !important;
  line-height: 1.9 !important;
}

/* Standalone creator pages */
.creator-profile__text p {
  font-family: var(--jp-gothic) !important;
  font-weight: 450 !important;
  letter-spacing: .015em !important;
  line-height: 1.85 !important;
}

.creator-comment p {
  font-family: var(--jp-gothic) !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
  line-height: 1.55 !important;
}

/* Slightly LUMO-like compactness on mobile */
@media (max-width: 820px) {
  .section__lead {
    font-weight: 650 !important;
    line-height: 1.45 !important;
    letter-spacing: -.04em !important;
  }

  .creator-modal__text {
    font-size: 13.5px !important;
    line-height: 1.9 !important;
    font-weight: 450 !important;
  }

  .hero__vertical {
    font-weight: 500 !important;
  }
}


/* ==========================================================
   v0.32 — separate admission / schedule + quieter menu
   Base: v0.31
   ========================================================== */

/* ----------------------------------------------------------
   MENU — less dominant
   ---------------------------------------------------------- */
.menu-panel--hash nav > a {
  min-height: 64px !important;
  padding: 12px 0 !important;
  font-size: clamp(24px, 4.2vw, 56px) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
  color: rgba(255,255,255,.88) !important;
}

.menu-panel--hash nav > a span {
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: .15em !important;
  opacity: .34 !important;
}

@media (max-width: 820px) {
  .menu-panel--hash nav > a {
    grid-template-columns: 34px minmax(0,1fr) !important;
    min-height: 61px !important;
    padding: 11px 0 !important;
    font-size: clamp(28px, 8.5vw, 42px) !important;
    font-weight: 400 !important;
  }

  .menu-panel--hash nav > a span {
    font-size: 9px !important;
  }
}

/* ----------------------------------------------------------
   ADMISSION — intentionally quiet
   ---------------------------------------------------------- */
.admission {
  min-height: auto !important;
  padding-top: clamp(92px, 10vw, 138px) !important;
  padding-bottom: clamp(92px, 10vw, 138px) !important;
}

.admission .compact-section-head {
  margin-bottom: 36px !important;
}

.admission-simple {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(34px, 7vw, 90px);
  max-width: 900px;
  padding-top: 22px;
  border-top: 1px solid var(--line-light);
}

.admission-simple__item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 8px 20px;
}

.admission-simple__label {
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
}

.admission-simple__value {
  justify-self: start;
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1;
}

.admission-simple__value--live {
  font-size: clamp(21px, 2.8vw, 34px);
  font-weight: 500;
}

.admission-simple__note {
  grid-column: 2;
  font-size: 11px;
  line-height: 1.7;
  opacity: .58;
  letter-spacing: .04em;
}

@media (max-width: 820px) {
  .admission {
    padding-top: 82px !important;
    padding-bottom: 82px !important;
  }

  .admission-simple {
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: none;
  }

  .admission-simple__item {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 7px 18px;
  }

  .admission-simple__value {
    font-size: 34px;
  }

  .admission-simple__value--live {
    font-size: 23px;
  }

  .admission-simple__note {
    grid-column: 2;
    font-size: 10px;
  }
}

/* ----------------------------------------------------------
   Schedule begins cleanly, no admission residue
   ---------------------------------------------------------- */
#schedule .schedule__leadcopy {
  max-width: 660px;
}


/* ==========================================================
   v0.34 — exact v0.32 baseline + corrected watermark numbers
   ========================================================== */

/* Add the missing ADMISSION watermark and renumber everything after it. */
#admission::before,
#schedule::before,
.food::before,
#faq::before,
#info::before {
  position: absolute;
  right: -1vw;
  top: -3vw;
  font-size: clamp(120px, 22vw, 360px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.08em;
  opacity: .028;
  pointer-events: none;
  transform: translate3d(0, var(--section-drift), 0);
  will-change: transform;
}

/* Correct numbering after the new Admission section */
#admission::before { content: "04" !important; }
#schedule::before { content: "05" !important; }
.food::before     { content: "06" !important; }
#faq::before      { content: "07" !important; }
#info::before     { content: "08" !important; }

/* Keep the same very faint treatment used by v0.32 */
#admission,
#schedule,
.food,
#faq,
#info {
  --section-drift: 0px;
}

/* ==========================================================
   v0.35 — creator data / projects / social icons / を。 assets
   ========================================================== */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.creator-modal__visual--image{overflow:hidden;padding:0;background:#111}
.creator-modal__visual--image img,.creator-profile__portrait--image img{width:100%;height:100%;display:block;object-fit:cover}
.creator-profile__portrait--image{overflow:hidden;padding:0}
.creator-modal__projects{margin-top:30px}
.creator-modal__project-list,.creator-profile__project-list{list-style:none;margin:13px 0 0;padding:0;border-top:1px solid rgba(255,255,255,.14)}
.creator-modal__project-list li{display:grid;grid-template-columns:minmax(74px,.24fr) 1fr;gap:18px;padding:10px 0 11px;border-bottom:1px solid rgba(255,255,255,.1);font-size:12px;line-height:1.65}
.creator-modal__project-year{color:var(--accent);font-size:10px;font-weight:700;letter-spacing:.08em;white-space:nowrap}
.creator-modal__project-title{color:rgba(255,255,255,.74)}
.creator-modal__links,.social-links{gap:9px}
.creator-modal__links .social-icon,.social-links .social-icon{width:38px;height:38px;min-height:38px;padding:0;border:1px solid rgba(255,255,255,.20);border-radius:50%;display:inline-grid;place-items:center;color:currentColor;transition:border-color .2s ease,color .2s ease,transform .2s ease}
.creator-modal__links .social-icon{border-bottom:1px solid rgba(255,255,255,.20)}
.creator-modal__links .social-icon:hover,.social-links .social-icon:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-2px);opacity:1;translate:0 0}
.social-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.creator-modal__work--image{min-height:0!important;padding:0!important;display:block!important;background:transparent!important;line-height:0}
.creator-modal__work--image:first-child{min-height:0!important}
.creator-modal__work--image::before{display:none!important}
.creator-modal__work--image img{width:100%;height:auto;display:block}
.creator-modal__work-index,.work-slot__index{position:absolute;left:10px;bottom:9px;z-index:2;color:#fff;font-size:9px;line-height:1;letter-spacing:.12em;text-shadow:0 1px 10px rgba(0,0,0,.65)}
.creator-modal__work--image::after{z-index:2;text-shadow:0 1px 10px rgba(0,0,0,.65)}
.creator-profile__projects{margin-top:38px}
.creator-profile__subhead{color:var(--accent);font-size:10px;font-weight:700;letter-spacing:.16em}
.creator-profile__project-list{border-top-color:rgba(0,0,0,.16)}
.creator-profile__project-list li{display:grid;grid-template-columns:minmax(86px,.26fr) 1fr;gap:18px;padding:12px 0;border-bottom:1px solid rgba(0,0,0,.12);font-size:13px;line-height:1.65}
.creator-profile__project-year{color:var(--accent);font-size:10px;font-weight:700;letter-spacing:.08em;white-space:nowrap}
.creator-profile__text .social-links{margin-top:25px}
.creator-profile__text .social-links .social-icon{border-color:rgba(0,0,0,.18)}
.creator-profile__text .social-links .social-icon:hover{border-color:var(--accent)}
.work-slot--image{position:relative;min-height:0!important;padding:0;border-color:rgba(255,255,255,.16);background:transparent;overflow:hidden;cursor:zoom-in}
.work-slot--image img{width:100%;height:auto;display:block}
.work-slot--image::after{content:"↗";position:absolute;right:12px;top:10px;color:var(--accent);font-size:16px;line-height:1}
.work-lightbox__image img{max-width:min(84vw,1120px);max-height:78svh;width:auto;height:auto;object-fit:contain;display:block}
@media(max-width:820px){
  .creator-modal__projects{grid-column:1/-1;grid-row:3;margin-top:10px}
  .creator-modal__project-list{margin-top:9px}
  .creator-modal__project-list li{grid-template-columns:74px minmax(0,1fr);gap:12px;padding:8px 0 9px;font-size:11px;line-height:1.55}
  .creator-modal__links{grid-column:1/-1;grid-row:4;margin-top:8px}
  .creator-modal__attendance{grid-column:1/-1;grid-row:5;margin-top:2px}
  .creator-modal__works{grid-column:1/-1;grid-row:6;margin-top:10px}
  .creator-modal__workgrid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:8px}
  .creator-modal__work-index{left:7px;bottom:6px;font-size:8px}
  .creator-profile__projects{margin-top:30px}
  .creator-profile__project-list li{grid-template-columns:74px minmax(0,1fr);gap:12px;font-size:12px}
}


/* ==========================================================
   v0.36 — supplied X icon asset
   ========================================================== */
.sns-icon--x {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .92;
}

a:hover .sns-icon--x,
a:focus-visible .sns-icon--x {
  opacity: 1;
}

@media (max-width: 820px) {
  .sns-icon--x {
    width: 21px;
    height: 21px;
  }
}

/* v0.37: selected pieces / hide numeric overlay */
.creator-modal__work-index,.work-slot__index{display:none!important;}


/* ==========================================================
   v0.38 — reliable one-tap work lightbox on touch devices
   ========================================================== */

/* iOS/Safari can treat :hover as a first-tap state.
   Keep hover-only decoration on devices that actually hover. */
.creator-modal__work:hover,
.work-slot--image:hover {
  border-color: inherit !important;
}

@media (hover: hover) and (pointer: fine) {
  .creator-modal__work:hover {
    border-color: var(--accent) !important;
  }

  .work-slot--image:hover {
    border-color: var(--accent) !important;
  }
}

.js-work-lightbox {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* On phones, make the opened piece feel clearly enlarged. */
@media (max-width: 820px) {
  .work-lightbox {
    padding: 52px 12px 18px !important;
  }

  .work-lightbox__stage,
  .work-lightbox__inner {
    width: 100% !important;
    max-width: none !important;
  }

  .work-lightbox__image {
    min-height: 0 !important;
    width: 100% !important;
    height: calc(100svh - 118px) !important;
    border: 0 !important;
    background: transparent !important;
  }

  .work-lightbox__image img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }

  .work-lightbox__meta {
    display: none !important;
  }

  .work-lightbox__close {
    top: 14px !important;
    right: 16px !important;
    font-size: 32px !important;
  }
}


/* ==========================================================
   v0.42 — CSS/hash based piece viewer
   No JS required to open/close: reliable in iPhone preview.
   ========================================================== */

.piece-link {
  text-decoration: none;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.piece-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 54px 18px 72px;
  background: #050505;
  color: #fff;
  overflow: hidden;
  overscroll-behavior: contain;
}

.piece-overlay:target {
  display: flex;
}

.piece-overlay__stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.piece-overlay__stage img {
  display: block;
  width: auto;
  height: auto;
  max-width: 96vw;
  max-height: calc(100vh - 132px);
  max-height: calc(100svh - 132px);
  object-fit: contain;
}

.piece-overlay__close {
  position: fixed;
  top: 14px;
  right: 18px;
  z-index: 20002;
  color: #fff;
  text-decoration: none;
  font-size: 34px;
  font-weight: 300;
  line-height: 1;
  padding: 8px;
  -webkit-tap-highlight-color: transparent;
}

.piece-overlay__back {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 20002;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(8,8,8,.88);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .03em;
  -webkit-tap-highlight-color: transparent;
}

@supports (bottom: env(safe-area-inset-bottom)) {
  .piece-overlay__back {
    bottom: calc(16px + env(safe-area-inset-bottom));
  }
}

/* Phone only: make controls more obvious */
@media (max-width: 820px) {
  .piece-overlay {
    padding: 54px 10px 76px;
  }

  .piece-overlay__stage img {
    max-width: 100%;
    max-height: calc(100svh - 128px);
  }

  .piece-overlay__close {
    top: 10px;
    right: 12px;
    font-size: 36px;
  }

  .piece-overlay__back {
    left: 14px;
    font-size: 14px;
  }
}


/* ==========================================================
   v0.50 — v0.45-style creator photo strip, divider-to-divider
   Base: v0.42 stable version.
   Mobile only.
   ========================================================== */

@media (max-width: 820px) {

  .creator-row--has-photo {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  /* The photo stays a right-side strip (not a full-row background),
     but its top/bottom now touch the row dividers. */
  .creator-row__photo {
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    right: 44px;
    width: 52%;
    pointer-events: none;

    background:
      linear-gradient(
        90deg,
        rgba(8,8,8,.92) 0%,
        rgba(8,8,8,.63) 18%,
        rgba(8,8,8,.22) 42%,
        rgba(8,8,8,.05) 70%,
        rgba(8,8,8,0) 100%
      ),
      var(--creator-photo);

    background-size: 100% 100%, cover;
    background-position: center, center;
    background-repeat: no-repeat;

    opacity: .24;

    /* No rounded card: the horizontal rules are the boundary. */
    border-radius: 0;
  }

  /* Keep text perfectly centered over the strip. */
  .creator-row--has-photo .creator-row__identity {
    position: relative;
    z-index: 2;
    align-self: center;
    align-items: center !important;
  }

  .creator-row--has-photo .creator-row__no,
  .creator-row--has-photo .creator-row__name,
  .creator-row--has-photo .creator-row__genre,
  .creator-row--has-photo .creator-row__arrow {
    position: relative;
    z-index: 2;
  }

  /* Genre remains readable while sitting over the image. */
  .creator-row--has-photo .creator-row__genre {
    text-shadow: 0 1px 10px rgba(0,0,0,.72);
  }

  /* Small natural variation, while keeping the same visual system. */
  .creator-row--has-photo:nth-of-type(even) .creator-row__photo {
    width: 50%;
    right: 40px;
    opacity: .23;
  }

  .creator-row--has-photo:nth-of-type(3n) .creator-row__photo {
    width: 54%;
    right: 48px;
    opacity: .25;
  }
}


/* ==========================================================
   v0.51 — creator strip refinement
   - add fade on right edge too
   - unify vertical / positional treatment for all creators
   ========================================================== */
@media (max-width: 820px) {

  .creator-row__photo {
    top: 0;
    bottom: 0;
    right: 44px;
    width: 52%;
    opacity: .24;

    background:
      linear-gradient(
        90deg,
        rgba(8,8,8,.94) 0%,
        rgba(8,8,8,.62) 16%,
        rgba(8,8,8,.22) 34%,
        rgba(8,8,8,.08) 56%,
        rgba(8,8,8,.18) 72%,
        rgba(8,8,8,.50) 86%,
        rgba(8,8,8,.90) 100%
      ),
      var(--creator-photo);

    background-size: 100% 100%, cover;
    background-position: center center, center center;
    background-repeat: no-repeat;
  }

  /* cancel the small per-row variations from v0.50 */
  .creator-row--has-photo:nth-of-type(even) .creator-row__photo,
  .creator-row--has-photo:nth-of-type(3n) .creator-row__photo {
    top: 0;
    bottom: 0;
    right: 44px;
    width: 52%;
    opacity: .24;
    background-position: center center, center center;
  }
}


/* ==========================================================
   v0.52 — micro refinements from review
   - heavier black text in INFORMATION
   - schedule head reversed: date left / DAY right
   - tighter VENUE spacing
   - clearer admission wording
   ========================================================== */

#info .info__value {
  font-weight: 700 !important;
  letter-spacing: -.03em !important;
}

.schedule-card__head {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 20px !important;
}

.schedule-card__head h3 {
  order: 1;
  margin: 0 !important;
}

.schedule-card__day {
  order: 2;
  margin-left: auto;
  text-align: right;
  white-space: nowrap;
}

#venue {
  min-height: auto !important;
  padding-bottom: clamp(64px, 7vw, 104px) !important;
}

#venue .venue__detail {
  margin-top: 20px !important;
}

#admission .admission-simple__item:first-child .admission-simple__note {
  opacity: .72 !important;
}

@media (max-width: 820px) {
  #info .info__value {
    font-weight: 720 !important;
    line-height: 1.36 !important;
  }

  .schedule-card__head {
    align-items: baseline !important;
    gap: 16px !important;
  }

  .schedule-card__day {
    justify-self: auto;
  }

  #venue {
    padding-bottom: 62px !important;
  }

  #venue .venue__detail {
    margin-top: 8px !important;
  }
}


/* ==========================================================
   v0.53 — venue access + mobile visual-guidance experiment
   Base: v0.52. Desktop layout remains unchanged except venue text.
   ========================================================== */

.venue__postal,
.venue__address-line { display: inline-block; }

.venue__nearest {
  margin-top: 22px;
  display: grid;
  gap: 7px;
  font-size: .90em;
  line-height: 1.7;
}

.venue__nearest span { display: block; }

.mobile-tear,
.mobile-scroll-fade { display: none; }

@media (max-width: 820px) {
  /* Keep street address + building/floor on one line. */
  .venue__address-line {
    white-space: nowrap;
    font-size: clamp(12px, 3.32vw, 14px);
    letter-spacing: -.025em;
  }

  .venue__nearest {
    margin-top: 18px;
    gap: 5px;
    font-size: 13px;
    line-height: 1.65;
  }

  /* Soft gradient transitions between black / paper sections.
     No texture asset, no torn edge — just a quiet visual bridge. */
  .mobile-tear {
    position: relative;
    z-index: 5;
    display: block;
    height: 64px;
    margin-top: -32px;
    margin-bottom: -32px;
    pointer-events: none;
  }

  /* Previous section: black → next section: paper */
  .mobile-tear--light {
    background: linear-gradient(
      to bottom,
      var(--black) 0%,
      rgba(8,8,8,.88) 18%,
      rgba(35,35,34,.54) 40%,
      rgba(146,145,141,.38) 61%,
      rgba(225,223,217,.72) 80%,
      var(--paper) 100%
    );
  }

  /* Previous section: paper → next section: black */
  .mobile-tear--dark {
    background: linear-gradient(
      to bottom,
      var(--paper) 0%,
      rgba(225,223,217,.72) 18%,
      rgba(146,145,141,.38) 39%,
      rgba(35,35,34,.54) 60%,
      rgba(8,8,8,.88) 82%,
      var(--black) 100%
    );
  }

  /* Slightly stronger white lift at the viewport bottom so the page feels like it keeps going. */
  .mobile-scroll-fade {
    position: fixed;
    z-index: 20;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    height: 112px;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.014) 32%,
      rgba(255,255,255,.04) 56%,
      rgba(255,255,255,.085) 78%,
      rgba(255,255,255,.13) 100%
    );
  }

  body:has(.creator-modal:target) .mobile-scroll-fade,
  body:has(.piece-overlay:target) .mobile-scroll-fade,
  body:has(.menu-panel--hash:target) .mobile-scroll-fade {
    display: none;
  }
}


/* ==========================================================
   v0.56 — softer / longer section fade + watermark safe area
   ========================================================== */
@media (max-width: 820px) {
  /* Keep the large section number fully inside the viewport. */
  .concept::before,
  .creators::before,
  .venue::before,
  #admission::before,
  #schedule::before,
  .food::before,
  #faq::before,
  #info::before {
    right: 14px !important;
  }

  /* Longer transition: less like a blurred border, more like a soft scene change. */
  .mobile-tear {
    height: 136px !important;
    margin-top: -68px !important;
    margin-bottom: -68px !important;
  }

  .mobile-tear--light {
    background: linear-gradient(
      to bottom,
      #080808 0%,
      #111110 12%,
      #242422 26%,
      #44433f 42%,
      #74726d 58%,
      #aaa7a0 73%,
      #d7d4cd 87%,
      #f3f1eb 100%
    ) !important;
  }

  .mobile-tear--dark {
    background: linear-gradient(
      to bottom,
      #f3f1eb 0%,
      #d7d4cd 13%,
      #aaa7a0 27%,
      #74726d 42%,
      #44433f 58%,
      #242422 74%,
      #111110 88%,
      #080808 100%
    ) !important;
  }

  /* Bottom cue: a little longer and clearer than v0.55. */
  .mobile-scroll-fade {
    height: 132px !important;
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.012) 28%,
      rgba(255,255,255,.045) 52%,
      rgba(255,255,255,.095) 76%,
      rgba(255,255,255,.16) 100%
    ) !important;
  }
}

/* ==========================================================
   v0.57 — remove watermark numbers + smoother hero fade
   ========================================================== */

/* The large right-side section watermark numbers are no longer needed. */
.concept::before,
.creators::before,
.venue::before,
#admission::before,
#schedule::before,
.food::before,
#faq::before,
#info::before {
  content: none !important;
  display: none !important;
}

/* Smooth out the very first black→paper transition.
   The previous cut was caused mainly by the seam continuing too low
   and the fade being a bit too short / too contrasty near the top. */
.hero {
  overflow: hidden;
}

.hero__seam {
  top: -4% !important;
  height: 108% !important;
  opacity: .18 !important;
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 58%,
    rgba(0,0,0,.72) 72%,
    rgba(0,0,0,.28) 86%,
    rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 58%,
    rgba(0,0,0,.72) 72%,
    rgba(0,0,0,.28) 86%,
    rgba(0,0,0,0) 100%);
}

.hero__fade {
  bottom: -2px !important;
  height: clamp(120px, 14vw, 190px) !important;
  background: linear-gradient(to bottom,
    rgba(243,241,235,0) 0%,
    rgba(243,241,235,.015) 18%,
    rgba(243,241,235,.06) 34%,
    rgba(243,241,235,.18) 50%,
    rgba(243,241,235,.42) 68%,
    rgba(243,241,235,.72) 84%,
    rgba(243,241,235,.92) 94%,
    var(--paper) 100%) !important;
}

@media (max-width: 820px) {
  .hero__seam {
    top: -2% !important;
    height: 104% !important;
    left: 51% !important;
    opacity: .13 !important;
  }

  .hero__fade {
    height: 150px !important;
    background: linear-gradient(to bottom,
      rgba(243,241,235,0) 0%,
      rgba(243,241,235,.01) 16%,
      rgba(243,241,235,.04) 30%,
      rgba(243,241,235,.10) 44%,
      rgba(243,241,235,.22) 58%,
      rgba(243,241,235,.44) 72%,
      rgba(243,241,235,.72) 86%,
      rgba(243,241,235,.92) 96%,
      var(--paper) 100%) !important;
  }
}

/* ==========================================================
   v0.58 — desktop creator list repair + single modal scrollbar
   Base: v0.57. Mobile creator layout is intentionally preserved.
   ========================================================== */

/* ----------------------------------------------------------
   DESKTOP CREATOR LIST
   The photo layer must never participate as a grid cell.
   It is a quiet right-side background strip, like the mobile list.
   ---------------------------------------------------------- */
@media (min-width: 821px) {
  .creator-row {
    grid-template-columns: 48px minmax(0, 1fr) 30px !important;
    gap: 16px !important;
    min-height: 112px;
    overflow: hidden;
    isolation: isolate;
  }

  .creator-row__no {
    grid-column: 1 !important;
    position: relative;
    z-index: 3;
  }

  .creator-row__identity {
    grid-column: 2 !important;
    position: relative;
    z-index: 3;
    min-width: 0;
    justify-self: start;
    align-self: center;
  }

  .creator-row__arrow {
    grid-column: 3 !important;
    position: relative;
    z-index: 3;
    justify-self: end;
  }

  .creator-row__photo {
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    right: 54px;
    width: min(39vw, 560px);
    pointer-events: none;
    border-radius: 0;
    opacity: .22;
    background:
      linear-gradient(
        90deg,
        rgba(8,8,8,.96) 0%,
        rgba(8,8,8,.66) 14%,
        rgba(8,8,8,.18) 34%,
        rgba(8,8,8,.06) 56%,
        rgba(8,8,8,.16) 74%,
        rgba(8,8,8,.58) 90%,
        rgba(8,8,8,.94) 100%
      ),
      var(--creator-photo);
    background-size: 100% 100%, cover;
    background-position: center, center 42%;
    background-repeat: no-repeat;
  }

  .creator-row--has-photo .creator-row__genre {
    text-shadow: 0 1px 10px rgba(0,0,0,.7);
  }
}

/* ----------------------------------------------------------
   CREATOR MODAL SCROLL LOCK
   Only the fixed creator modal scrolls while it is open.
   ---------------------------------------------------------- */
html:has(.creator-modal:target),
body:has(.creator-modal:target) {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

.creator-modal {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}


/* ==========================================================
   v0.59 — piece viewer prev/next navigation + swipe support
   ========================================================== */
.piece-overlay__nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20003;
  width: clamp(44px, 4.2vw, 56px);
  height: clamp(44px, 4.2vw, 56px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.42);
  background: rgba(8,8,8,.56);
  color: #fff;
  text-decoration: none;
  font-size: clamp(24px, 2.1vw, 34px);
  line-height: 1;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  -webkit-tap-highlight-color: transparent;
  transition:
    background .18s ease,
    border-color .18s ease,
    opacity .18s ease,
    transform .18s ease;
}

.piece-overlay__nav:hover {
  background: rgba(8,8,8,.74);
  border-color: rgba(255,255,255,.62);
}

.piece-overlay__nav:active {
  transform: translateY(-50%) scale(.96);
}

.piece-overlay__nav--prev {
  left: max(14px, env(safe-area-inset-left));
}

.piece-overlay__nav--next {
  right: max(14px, env(safe-area-inset-right));
}

.piece-overlay__nav.is-hidden {
  display: none !important;
}

@media (max-width: 820px) {
  .piece-overlay__nav {
    width: 46px;
    height: 46px;
    font-size: 28px;
  }

  .piece-overlay__nav--prev {
    left: max(10px, env(safe-area-inset-left));
  }

  .piece-overlay__nav--next {
    right: max(10px, env(safe-area-inset-right));
  }
}

html:has(.piece-overlay:target),
body:has(.piece-overlay:target) {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}


/* ==========================================================
   v0.60 — reliable static piece navigation / simple < >
   ========================================================== */

.piece-overlay__nav {
  position: fixed !important;
  top: 50% !important;
  z-index: 20005 !important;
  width: auto !important;
  height: auto !important;
  min-width: 44px;
  min-height: 58px;
  padding: 8px 10px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(255,255,255,.92) !important;
  font-size: clamp(42px, 4vw, 62px) !important;
  font-weight: 200 !important;
  line-height: .8 !important;
  text-decoration: none !important;
  text-shadow: 0 2px 16px rgba(0,0,0,.72);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: .86;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.piece-overlay__nav:hover,
.piece-overlay__nav:focus-visible {
  opacity: 1;
  background: transparent !important;
}

.piece-overlay__nav:active {
  transform: translateY(-50%) scale(.92) !important;
}

.piece-overlay__nav--prev {
  left: max(8px, env(safe-area-inset-left)) !important;
}

.piece-overlay__nav--next {
  right: max(8px, env(safe-area-inset-right)) !important;
}

@media (max-width: 820px) {
  .piece-overlay__nav {
    min-width: 42px !important;
    min-height: 64px !important;
    padding: 8px 7px !important;
    font-size: 44px !important;
    opacity: .94 !important;
  }

  .piece-overlay__nav--prev {
    left: max(2px, env(safe-area-inset-left)) !important;
  }

  .piece-overlay__nav--next {
    right: max(2px, env(safe-area-inset-right)) !important;
  }

  /* Keep image away from the navigation touch zones without visibly shrinking it. */
  .piece-overlay__stage {
    padding-left: 28px;
    padding-right: 28px;
  }
}