/* =========================================================
   v7.css — the poster home, with the rest of the site after it
   =========================================================
   Loads last: styles -> brand -> phase3 -> v6 -> lineup -> poster-home -> v7.
   lineup.css and poster-home.css were written for the review pages (no tab
   bar, no announce bar); this sheet puts the site chrome back around them.
   ========================================================= */

/* hero: the teaser's scroll cue, bottom centre; fades once the page moves */
.pc-hero { position: relative; }
.pc-scroll {
  position: absolute; left: 50%; bottom: clamp(28px, 5.5vh, 52px); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--black); pointer-events: none; transition: opacity 0.4s ease;
}
.pc-scroll svg { display: block; animation: pc-scroll-cue 1.8s ease-in-out infinite; }
@keyframes pc-scroll-cue {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50%      { transform: translateY(5px); opacity: 1; }
}
.pc-hero.is-scrolled .pc-scroll { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .pc-scroll svg { animation: none; } }
/* tablets and phones: the buttons fill the bottom, so the cue sits right,
   just above the headline */
@media (max-width: 860px) {
  .pc-scroll { position: static; transform: none; order: -1; align-self: flex-end; margin-bottom: 12px; }
}
/* phones: no cue (the copy fills the screen), and the flower sits up and to
   the right, off the headline and lede (tablets keep poster-home.css's band) */
@media (max-width: 600px) {
  .pc-scroll { display: none; }
  .pc-tree { left: 22%; right: -22%; top: 7%; bottom: 55%; }
}

/* hero: the entry line under the date (was in the announce bar), full red,
   not the faded divider style .pc-when span carries */
.pc-when .pc-drop { opacity: 1; margin: 0.15em 0 0; }

/* hero: RSVP first, the lineup second */
.pc-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.pc-cta .btn { margin-top: 0; font-size: 1.1875rem; }
/* under the buttons: the store's opening-weekend page, a text link in the
   date line's caps with a red rule, its arrow nudging on hover */
.pc-excl {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 0.5em;
  margin-top: 18px; padding-bottom: 3px; border-bottom: 2px solid var(--red);
  color: var(--black); text-decoration: none;
  font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.pc-excl span { color: var(--red); transition: transform 0.2s ease; }
.pc-excl:hover { color: var(--red); }
.pc-excl:hover span { transform: translateX(4px); }
.pc-excl:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .pc-excl span { transition: none; } }

/* phones: the tab bar is back, and the stage stops above it */
@media (max-width: 860px) {
  body { padding-bottom: var(--tabbar-h); }
  :root { --stage-h: calc(100vh - var(--header-h) - var(--tabbar-h)); }
  @supports (height: 100svh) {
    :root { --stage-h: calc(100svh - var(--header-h) - var(--tabbar-h)); }
  }
  .pc-cta .btn { flex: 0 0 auto; }
}

/* a section named by its index alone (the lineup): the red square and the
   word, large; the cube scales with the type */
.sec-head-title { margin-bottom: clamp(32px, 4vw, 56px); }
.sec-index.sec-title {
  margin: 0; gap: 0.3em;
  font-size: clamp(2.25rem, 4.6vw, 4.25rem); line-height: 1; letter-spacing: 0.06em;
}
.sec-index.sec-title::before { width: 0.62em; height: 0.62em; }
/* a large index followed by a display line (Partners, Schedule): the gap
   the small index had */
.sec-index.sec-title + .display { margin-top: clamp(18px, 2.2vw, 30px); }
/* a large index with a lede straight under it (the lineup, Art, Map) */
.sec-index.sec-title + .sec-lede { margin-top: clamp(18px, 2.2vw, 30px); }

/* lineup -> art: half a block each side, so one block between them, not two */
.pc-lineup { padding-bottom: calc(var(--blk-pad) / 2); }
.pc-lineup + .blk { padding-top: calc(var(--blk-pad) / 2); }

/* hero: the intro line under the headline */
.pc-lede {
  margin-top: clamp(16px, 2.4vh, 28px); max-width: 34em;
  font-size: clamp(1.125rem, 1.5vw, 1.3125rem); line-height: 1.5;
}

/* art: the cube artists at the lineup's name size (poster-home.css sizes the
   lineup down on desktop; the art section is full width and would not be) */
@media (min-width: 861px) {
  #art .la-names { font-size: clamp(2rem, 3.8vw, 3.75rem); }
}
/* art: the meet-the-artists line under the names, at the intro's size */
.cube-note {
  margin-top: clamp(20px, 2.6vw, 36px); max-width: 40em;
  font-size: clamp(1.125rem, 1.5vw, 1.3125rem); line-height: 1.5; font-weight: 700;
}
/* led by a red square, like the route cubes between the names above */
.cube-note::before {
  content: ""; display: inline-block; width: 0.5em; height: 0.5em;
  background: var(--red); margin-right: 0.5em; vertical-align: 0.08em;
}
/* art: the intro on the left, the flower's landing spot on the right. The
   intro is see-through like the lineup, so the stage's flower shows as it
   flies in (js/poster-home.js); the body below is solid and covers the stage */
.pc-art { background: transparent; padding-bottom: 0; }
.pc-art-body { background: var(--black); padding-bottom: var(--blk-pad); }
.art-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px); align-items: stretch;
  margin-bottom: 0; padding-bottom: clamp(32px, 4vw, 56px);
}
.art-flower { min-height: clamp(380px, 36vw, 560px); }
/* phones: the flower lands between the title and the intro, close to where
   it rides on the stage, so it never flies back through the text */
@media (max-width: 860px) {
  .art-head { grid-template-columns: 1fr; gap: 16px; }
  .art-head-text { display: contents; }
  .art-head .sec-lede { order: 2; margin-top: 0; }
  .art-flower { order: 1; min-height: 0; aspect-ratio: 4 / 3; }  /* the flower band's shape */
}
/* art: breathing room between the artist names and the cube images */
#art .la-stage + .cube-grid { margin-top: clamp(48px, 6vw, 96px); }
/* art: teaser poster standing in for the cube grid, centred and capped
   so it never outgrows its 965px source */
.art-teaser { margin: clamp(48px, 6vw, 96px) auto 0; max-width: min(100%, 640px); }
.art-teaser img { display: block; width: 100%; height: auto; }

/* art: each card flips between its stamp and its concept render
   (js/main.js sets .is-flipped). Each face turns itself rather than sharing
   a preserve-3d parent, which Safari flattens under clipping ancestors; the
   transform and backface sit on the imgs, which have no children to leak. */
.cube-flip { perspective: 1400px; }
.cube-face { display: block; }
.cube-face-render { position: absolute; inset: 0; }
.cube-face img {
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  transition: transform 0.6s cubic-bezier(0.45, 0, 0.2, 1);
}
.cube-face-render img { transform: rotateY(180deg); }
.cube-flip.is-flipped .cube-face-stamp img { transform: rotateY(-180deg); }
.cube-flip.is-flipped .cube-face-render img { transform: rotateY(0deg); }
/* no JS: a mouse can still turn a card over */
@media (hover: hover) {
  html:not(.js) .cube-flip:hover .cube-face-stamp img { transform: rotateY(-180deg); }
  html:not(.js) .cube-flip:hover .cube-face-render img { transform: rotateY(0deg); }
}
.js .cube-flip { cursor: pointer; }
/* reduced motion: a crossfade, never a turn (and no autoplay, js/main.js) */
@media (prefers-reduced-motion: reduce) {
  .cube-face img, .cube-flip.is-flipped .cube-face img { transform: none !important; }
  .cube-face-render img { opacity: 0; transition: opacity 0.3s linear; }
  .cube-flip.is-flipped .cube-face-render img { opacity: 1; }
}
/* pause/play for the flip sequence, above the grid's right edge */
.cube-flip-toggle {
  display: flex; align-items: center; gap: 8px;
  margin: clamp(48px, 6vw, 96px) 0 16px auto; padding: 8px 12px;
  background: none; border: 1px solid #444; color: var(--white); cursor: pointer;
  font: inherit; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.cube-flip-toggle::before { content: ""; width: 6px; height: 6px; background: var(--red); flex: none; }
.cube-flip-toggle:hover { border-color: var(--white); }
.cube-flip-toggle:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.cube-flip-toggle[hidden] { display: none; }
#art .cube-flip-toggle + .cube-grid { margin-top: 0; }
#art .la-stage + .cube-flip-toggle[hidden] + .cube-grid { margin-top: clamp(48px, 6vw, 96px); }

/* =========================================================
   Map section: js/festival-map.js, in the hero map's language
   (grey streets, grey caps, the festival in red). Static, full
   bleed, with a key under it that links on into the site.
   ========================================================= */
.map-bleed { margin: 0; background: var(--white); }
.map-bleed .fm { display: block; width: 100%; height: clamp(420px, 46vw, 760px); }

/* marks: shared by the map and the key's icons */
.fm-st { stroke: #ececec; stroke-width: 11; fill: none; }
.fm-lane { stroke: #ececec; stroke-width: 6; fill: none; }
.fm-market { stroke: #e6e6e6; stroke-width: 34; fill: none; }
.fm-closure { fill: rgba(255, 0, 0, 0.1); }
.fm-red { fill: var(--red); }
.fm-black { fill: var(--black); }
.fm-bowl { fill: var(--red); }
.fm-steam { stroke: var(--red); stroke-width: 0.9; stroke-linecap: round; fill: none; }
/* restaurants: the bowl on a white tile (its shadow is #fm-shadow) */
.fm-tile { fill: var(--white); }
/* inside the Ellis closure: pitches, tables, the zone labels' leaders */
.fm-pitch { fill: var(--white); stroke: var(--red); stroke-width: 0.5; }
.fm-tent { fill: var(--white); stroke: var(--black); stroke-width: 0.45; }
.fm-leader { stroke: var(--black); stroke-width: 0.3; fill: none; }

/* type, in map units: desktop draws at ~3.4-4.2px a unit */
.fm text { font-family: var(--font); font-weight: 700; letter-spacing: 0.14em; }
.fm .fm-names text { font-size: 3px; fill: #a6a6a6; }
.fm .fm-names .is-lane { font-size: 2.6px; }
.fm .fm-label { font-size: 3.3px; }
.fm .fm-label.is-red { fill: var(--red); font-size: 4.1px; }
.fm .fm-label.is-black { fill: var(--black); }
.fm .fm-tag { font-size: 2.9px; fill: var(--white); letter-spacing: 0.08em; }
.fm .fm-zone { font-size: 3px; fill: var(--black); letter-spacing: 0.08em; }
.fm .fm-zone.is-place { fill: #8a8a8a; font-size: 2.7px; }
.fm .fm-addr { font-size: 2.7px; fill: var(--black); letter-spacing: 0.08em; }
.fm .a-mid { text-anchor: middle; }
.fm .a-end { text-anchor: end; }
/* tablets (~2.6-3.3px a unit, the MID frame) and phones (~1.5px a unit,
   TIGHT): the type steps up, and phones drop the zone labels for the key */
@media (max-width: 860px) {
  .map-bleed .fm { height: clamp(420px, 58vw, 500px); }
  .fm .fm-names text { font-size: 3.8px; }
  .fm .fm-names .is-lane { font-size: 3.3px; }
  .fm .fm-label { font-size: 4.2px; }
  .fm .fm-label.is-red { font-size: 5.2px; }
  .fm .fm-tag { font-size: 3.4px; }
  .fm .fm-zone { font-size: 3.8px; }
  .fm .fm-zone.is-place { font-size: 3.4px; }
  .fm .fm-addr { font-size: 3.4px; }
}
@media (max-width: 600px) {
  .map-bleed .fm { height: auto; aspect-ratio: 250 / 180; }   /* TIGHT frame */
  .fm .fm-names text { font-size: 5.6px; letter-spacing: 0.1em; }
  .fm .fm-names .is-lane { font-size: 4.8px; }
  .fm .fm-label { font-size: 5.8px; letter-spacing: 0.1em; }
  .fm .fm-label.is-red { font-size: 7.2px; }
  .fm .fm-tag { font-size: 4px; }
  .fm .fm-addr { font-size: 4.4px; }
  .fm .fm-zone, .fm .fm-leader, .fm .is-wide { display: none; }
}
/* the BART / MUNI tags: one size at every width, set so the name fills its
   tag (js/festival-map.js holds it there with textLength); is-sm are the
   two in the cube rows */
.fm .fm-tag.is-md { font-size: 2.4px; }
.fm .fm-tag.is-sm { font-size: 1.9px; }

/* the key: labels only. Desktop: a panel over the map's upper right, its
   right edge on the page's content edge. Tablets and phones: the map is too
   short to cover, so it sits under the map in two columns. */
.map-bleed { position: relative; }
.map-key {
  position: absolute; top: clamp(20px, 2.6vw, 40px); right: var(--pad-x);
  background: var(--white); border-top: 3px solid var(--black);
  padding: 16px 22px 18px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}
.map-key ul { margin-top: 12px; display: grid; gap: 10px; }
.map-key li { display: flex; align-items: center; gap: 12px; font-size: 0.9375rem; font-weight: 700; line-height: 1.2; }
.mk-icon { width: 22px; height: 22px; flex: 0 0 22px; overflow: visible; }
.mk-tile { stroke: #d6d6d6; stroke-width: 0.6; }   /* the key has no shadow filter */
@media (max-width: 860px) {
  .map-key {
    position: static; box-shadow: none; background: none; border-top: 0;
    padding: 24px var(--gutter) 0;
  }
  .map-key ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
}

/* =========================================================
   Map + Getting here: one section. The title and entry line head it,
   the map follows, and the Getting here band under the map is its second
   key: the ways in, each with the mark it has on the map. The FAQ closes
   the section on the grey.
   ========================================================= */
/* head: the title with the entry line under it, as the lineup's (the
   .sec-title + .sec-lede gap above) */

/* marks only the band uses: the grey "not on the map" icons for bus and
   driving */
.mk-icon.is-off { fill: none; stroke: #a6a6a6; stroke-width: 1; stroke-linejoin: round; stroke-linecap: round; }

/* the band: still the map's white, a hairline under the streets */
.gh { background: var(--white); border-top: 1px solid #e6e6e6; padding: clamp(24px, 2.6vw, 36px) 0 clamp(28px, 3vw, 44px); scroll-margin-top: calc(var(--header-h) + 12px); }
.gh-note { margin-top: 10px; font-size: 1.0625rem; font-weight: 700; line-height: 1.35; }
.gh-list { margin-top: 20px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px clamp(20px, 2.4vw, 36px); }
.gh-list li { display: flex; align-items: flex-start; gap: 12px; }
.gh-list .mk-icon { margin-top: -2px; }
.gh-list strong { display: block; font-size: 0.9375rem; font-weight: 700; line-height: 1.2; }
.gh-list span { display: block; margin-top: 4px; font-size: 0.9375rem; line-height: 1.4; color: #6b6b6b; }
@media (max-width: 860px) {
  .gh { border-top: 0; padding-top: 32px; }
  .gh .container { padding-inline: var(--gutter); }
  .gh-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) { .gh-list { grid-template-columns: 1fr; gap: 16px; } }

/* the FAQ, on the grey after the map: its title left, the questions right */
.faq-wrap { margin-top: calc(var(--blk-pad) * 0.75); }

/* =========================================================
   Activities (white, 9.27: red was hard to read): three highlights, then
   the partner directory, which lineup.css prints for the red, so its
   white logos and wordmarks are turned back to black here.
   ========================================================= */
.act-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(36px, 3.6vw, 56px); align-items: start;
}
.act-item { min-width: 0; }
.act-item > * + * { margin-top: 14px; }
/* each column opens on its verb, large and red, over the column's rule */
.act-item > .act-verb {
  color: var(--red); font-size: clamp(3rem, 5.6vw, 5.5rem); line-height: 0.9;
  font-weight: 700; letter-spacing: -0.035em;
  padding-bottom: clamp(14px, 1.6vw, 22px); border-bottom: 3px solid var(--black);
}
.act-item > .act-verb + * { margin-top: 18px; }
.act-title {
  color: var(--black); font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: 0.96;
  font-weight: 700; letter-spacing: -0.03em;
}
.act-item p { font-size: 1.0625rem; line-height: 1.5; max-width: 36em; }
.act-item .act-accent { font-weight: 700; color: var(--red); }
.act-list { border-top: 1px solid #d6d6d6; }
.act-list li { padding: 9px 0; border-bottom: 1px solid #d6d6d6; font-size: 1rem; line-height: 1.35; }
.act-list b { font-weight: 700; }
.act-sub {
  margin: clamp(72px, 8vw, 120px) 0 clamp(28px, 3vw, 44px); scroll-margin-top: calc(var(--header-h, 80px) + 24px);
  color: var(--black); font-size: clamp(2rem, 3.4vw, 3.25rem); line-height: 0.95; font-weight: 700; letter-spacing: -0.03em;
}
/* the directory on white: black logos and wordmarks, red-on-hover links */
.act-sec .pt-mark img { filter: brightness(0); }
.act-sec .pt-wordmark { color: var(--black); }
.act-sec .pt-about { color: var(--black); border-bottom-color: var(--red); }
.act-sec .pt-about:hover { color: var(--red); }
.act-sec .pt-about:focus-visible { outline-color: var(--red); }
/* below three columns: one, so Play, Make, Collect stay in order */
@media (max-width: 1100px) {
  .act-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(48px, 7vw, 72px); }
}

/* =========================================================
   Schedule: the weekend at a glance, above the stage grid. Three day
   columns (Fri, Sat, Sun); each bar sits in the days it runs, its hours
   inside. The store and art cubes run all three; music and activities
   are Friday.
   ========================================================= */
.dayb-days, .dayb-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.dayb-days {
  padding-bottom: 10px; margin-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
/* Friday is the festival: a red note under its heading */
.dayb-days em { display: block; margin-top: 4px; color: var(--red); font-style: normal; }
.dayb-rows { display: grid; gap: 18px; }
.dayb-row { row-gap: 8px; }
.dayb-name { grid-column: 1 / -1; font-size: 0.9375rem; font-weight: 700; line-height: 1.25; letter-spacing: 0.08em; text-transform: uppercase; }
.dayb-bar {
  display: flex; align-items: center; min-height: 34px; padding: 0 12px;
  background: var(--red); color: var(--black);
  font-size: 0.875rem; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap;
}
/* the store and the art cubes keep the same hours: white bars, black text
   (client, 9.30: black read poorly on the red) */
.dayb-row.is-store .dayb-bar, .dayb-row.is-art .dayb-bar { background: var(--white); }
/* drop-in: an open, dashed bar, come and go */
.dayb-row.is-drop .dayb-bar { background: none; border: 2px dashed var(--red); color: var(--white); }
@media (max-width: 420px) {
  .dayb-bar { padding: 0 8px; font-size: 0.8125rem; letter-spacing: 0.02em; }
}

/* schedule head, two columns: the title and intro on the left, the weekend
   grid on the right with its top level with the title's */
@media (min-width: 861px) {
  .sch-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 64px; align-items: start; }
  .sch-head .sec-sub { display: contents; }
  .sch-head .sec-title { grid-column: 1; grid-row: 1; }
  .sch-head .sec-lede { grid-column: 1; grid-row: 2; margin-top: clamp(28px, 3.4vw, 52px); }
  .sch-head .dayb { grid-column: 2; grid-row: 1 / span 2; }
}

/* the stage grid's date, where the grid starts (the sets are Friday only) */
.sch-date {
  margin-bottom: clamp(20px, 2.4vw, 32px);
  font-size: clamp(1.5rem, 2.4vw, 2.25rem); line-height: 1.05; font-weight: 700; letter-spacing: -0.02em;
}
.sch-date span {
  margin-left: 0.5em; color: var(--red);
  font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; vertical-align: middle;
}

/* the footer is one line now, so it doesn't need v6's tall padding */
.footer { padding-block: 28px; }