/* ==========================================================================
   GRIST · What's on (poured in ruby)
   Sections: weekly four (night accordion + ticket stubs) · coming up (floating
   ruby-deep panel: ruled list with a date column and a synced image stage) ·
   close band (full-bleed photo fading into the footer).
   Ruby carries no red of either kind: accents are straw, buttons bone.
   ========================================================================== */

/* ---------- 2 weekly four: a ticket stub of detail in each night of the night accordion (site.css) ----------
   Default (list): the stub sits under the photo. Pinned: it rides the open body bottom right with a static tilt
   (the rotate property, so site.js can write its rise as a transform without losing the tilt). */
.wo-weekly{ padding-bottom:calc(var(--section) * .6); }
.wo-weekly .sec-head{ margin-bottom:56px; }
.wo-weekly .sec-head h2{ line-height:.84; }
.wo-ticket{ grid-row:2; position:relative; z-index:2; margin:14px; background:var(--bone); color:var(--ink); border-radius:12px; padding:16px 18px 14px; }
.wo-t-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding-bottom:12px; margin-bottom:10px;
  border-bottom:1.5px dashed rgba(27,20,17,.45); position:relative; }
.wo-t-head span{ font-family:var(--display); font-size:44px; line-height:.86; text-transform:uppercase; }
.wo-t-head small, .wo-t-label{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; }
.wo-t-head small{ padding-bottom:4px; }
.wo-t-label{ color:rgba(27,20,17,.78); margin-bottom:4px; }
.wo-t-list li{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:5px 0; border-bottom:1px solid rgba(27,20,17,.14); font-size:14px; line-height:1.3; }
.wo-t-list li:last-child{ border-bottom:0; padding-bottom:0; }
.wo-t-list b{ font-weight:500; }
.wo-t-list span{ font-family:var(--mono); font-size:11px; letter-spacing:.02em; white-space:nowrap; }
.wo-nacc.is-pin .wo-ticket{ position:absolute; margin:0; right:clamp(20px, 2.4vw, 34px); bottom:clamp(18px, 3.4svh, 32px); width:clamp(260px, 22vw, 300px); rotate:var(--tilt, 0deg);
  box-shadow:0 26px 50px -22px rgba(0,0,0,.75); }
.wo-nacc.is-pin .nacc-copy{ width:calc(100% - clamp(260px, 22vw, 300px) - 48px); max-width:600px; }
.wo-nacc.is-pin .nacc-name{ font-size:clamp(52px, min(5.4vw, 11.5svh), 120px); }
/* short laptops: the open body is ~430px tall; tighten the stub so it never meets the copy */
@media (min-width:901px) and (max-height:760px){
  .wo-nacc.is-pin .wo-ticket{ padding:12px 14px 10px; }
  .wo-nacc.is-pin .wo-t-head{ padding-bottom:8px; margin-bottom:6px; }
  .wo-nacc.is-pin .wo-t-head span{ font-size:34px; }
  .wo-nacc.is-pin .wo-t-list li{ padding:3px 0; font-size:13px; }
  .wo-nacc.is-pin .wo-t-label{ display:none; }
}
@media (min-width:901px) and (max-height:640px){ .wo-nacc.is-pin .wo-t-list li:nth-child(n+4){ display:none; } }

/* ---------- 3 coming up: floating panel, synced image stage, ruled list ---------- */
.wo-up{ padding:0 0 var(--section); }
.up-panel{ margin:0 max(var(--gutter-end), 5vw) 0 max(var(--gutter), 5vw); display:grid; grid-template-columns:40fr 60fr; background:var(--ruby-deep); color:var(--bone);
  border-radius:var(--r-card); overflow:clip; box-shadow:0 50px 90px -40px rgba(0,0,0,.55), inset 0 0 0 1px rgba(251,241,222,.1); }
.up-stage{ position:relative; min-height:560px; background:var(--malt); }
/* on short screens the stage holds under the nav while the list scrolls past it */
.up-stage-in{ position:sticky; top:var(--nav-h); height:min(100%, calc(100svh - var(--nav-h) - var(--bar))); overflow:hidden; }
.up-fig{ position:absolute; inset:0; opacity:0; transition:opacity 700ms var(--ease-land); }
.up-fig.is-on{ opacity:1; }
.up-fig img{ width:100%; height:100%; object-fit:cover; object-position:var(--focus, 50% 50%); }
.up-fig::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(12,9,6,.86) 0%, rgba(12,9,6,.35) 38%, rgba(12,9,6,0) 62%); }
.up-fig figcaption{ position:absolute; z-index:1; left:32px; bottom:26px; display:flex; align-items:flex-end; gap:16px; color:var(--bone);
  transform:translateY(24px); opacity:0; transition:transform 900ms var(--ease-enter), opacity 600ms var(--ease-land); }
.up-fig.is-on figcaption{ transform:none; opacity:1; transition-delay:120ms; }
.up-fig figcaption b{ font-family:var(--display); font-weight:400; font-size:clamp(150px, 15vw, 250px); line-height:.76; }
.up-fig figcaption span{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; padding-bottom:10px; color:var(--straw); }

.up-list{ padding:clamp(36px, 4vw, 56px) clamp(24px, 3.6vw, 52px) clamp(28px, 3vw, 40px); display:flex; flex-direction:column; }
.up-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:26px; }
.up-head .kick{ color:var(--bone-80); order:2; padding-bottom:8px; }
.up-rows{ border-top:1.5px solid rgba(251,241,222,.5); }
.ev{ position:relative; display:grid; grid-template-columns:92px minmax(0,1fr) 72px auto; align-items:start; gap:6px 22px; padding:20px 12px 20px 0;
  border-bottom:1px solid rgba(251,241,222,.2); transition:background-color var(--dur-hover) var(--ease-hover); }
/* state: a straw bar grows down the left edge of the active row */
.ev::before{ content:""; position:absolute; left:-1px; top:14px; bottom:14px; width:3px; border-radius:3px; background:var(--straw); transform:scaleY(0); transform-origin:50% 0; transition:transform 450ms var(--ease-enter); }
.ev.is-on{ background:rgba(251,241,222,.06); }
.ev.is-on::before{ transform:none; }
.ev-date{ display:flex; align-items:flex-start; gap:8px; padding-left:16px; }
.ev-date b{ font-family:var(--display); font-weight:400; font-size:62px; line-height:.8; min-width:1.1ch; }
.ev-date span{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; line-height:1.45; color:var(--bone-80); }
.ev-flag{ display:none; margin-bottom:8px; }
.ev.is-next .ev-flag{ display:block; }
.ev-next{ display:inline-flex; align-items:center; gap:8px; min-height:24px; padding:0 10px; border-radius:var(--r-pill); background:var(--straw); color:var(--ink);
  font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; }
.ev-next::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--ink); }
.ev-name{ font-family:var(--display); font-weight:400; font-size:clamp(30px, 2.6vw, 40px); line-height:.9; text-transform:uppercase; }
.ev-line{ margin-top:8px; font-size:16px; line-height:1.45; color:var(--bone-80); max-width:46ch; }
.ev-more{ margin-top:10px; padding-top:10px; border-top:1px dashed rgba(251,241,222,.3); font-size:15px; line-height:1.45; color:var(--bone); max-width:46ch; }
.js .ev-more:not(.is-open){ display:none; }
.ev-price{ font-family:var(--mono); font-size:15px; padding-top:4px; text-align:right; color:var(--straw); white-space:nowrap; }
.ev-price small{ font-size:10px; margin-left:2px; color:var(--bone-80); }
.ev-act{ padding-top:0; }
.ev-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:44px; min-width:112px; padding:0 18px; border-radius:var(--r-pill);
  border:0; background:transparent; box-shadow:inset 0 0 0 1.5px rgba(251,241,222,.7); color:var(--bone); font:500 15px/1 var(--sans); text-decoration:none; cursor:pointer;
  transition:background-color var(--dur-hover) var(--ease-hover), color var(--dur-hover) var(--ease-hover); }
.ev-btn span{ display:inline-block; transition:transform var(--dur-hover) var(--ease-hover); }
.ev-btn:hover, .ev-btn:focus-visible{ background:var(--bone); color:var(--ink); }
.ev-btn[aria-expanded="true"] span{ transform:rotate(45deg); }
.ev-btn--fill{ background:var(--bone); color:var(--ink); box-shadow:none; }
.ev-btn--fill:hover, .ev-btn--fill:focus-visible{ background:var(--straw); }
.ev-btn--fill:hover span{ transform:translateX(4px); }
.ev.is-past{ opacity:.55; }
.ev.is-past .ev-act{ visibility:hidden; }
.up-foot{ margin-top:auto; padding-top:22px; font-size:14px; color:var(--bone-80); }

@media (max-width:1100px){
  .up-panel{ grid-template-columns:1fr; }
  .up-stage{ min-height:0; aspect-ratio:16 / 9; }
  .up-stage-in{ position:absolute; inset:0; height:auto; }
  .ev{ grid-template-columns:78px minmax(0,1fr) auto; }
  .ev-act{ grid-column:2 / -1; }
  .ev-price{ grid-column:3; grid-row:1; }
}
@media (max-width:640px){
  .up-panel{ margin:0 var(--gutter); }
  .up-stage{ aspect-ratio:4 / 3; }
  .up-fig figcaption{ left:18px; bottom:16px; }
  .up-fig figcaption b{ font-size:120px; }
  .up-list{ padding:28px 18px 22px; }
  .ev{ grid-template-columns:62px minmax(0,1fr); padding:18px 0; gap:6px 14px; }
  .ev-date{ padding-left:10px; flex-direction:column; gap:6px; }
  .ev-date b{ font-size:50px; }
  .ev-price{ grid-column:2; grid-row:auto; text-align:left; padding-top:0; }
  .ev-act{ grid-column:2; }
}

/* ---------- 4 close band: full-bleed photo that fades into the footer ground ---------- */
.wo-cta{ position:relative; isolation:isolate; min-height:max(620px, 88svh); display:flex; color:var(--bone); background:var(--stout); overflow:clip; }
.wo-cta-img{ position:absolute; inset:0; z-index:-2; }
.wo-cta-img img{ width:100%; height:100%; object-fit:cover; object-position:var(--focus, 50% 50%); }
/* a fixed wash and a fade to the exact footer ground (fade-in footer) */
.wo-cta::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(27,20,17,.72) 0%, rgba(27,20,17,.25) 30%, rgba(27,20,17,.35) 55%, var(--stout) 100%),
             linear-gradient(90deg, rgba(27,20,17,.55) 0%, rgba(27,20,17,0) 60%); }
.wo-cta-body{ width:100%; display:grid; grid-template-columns:minmax(0,1fr) minmax(280px, 420px); grid-template-rows:1fr auto; gap:32px 48px;
  padding:calc(var(--section) + 20px) var(--gutter-end) 48px var(--gutter); }
.wo-cta-h{ font-size:clamp(88px, 12vw, 200px); line-height:.84; align-self:start; }
.wo-cta-side{ grid-column:2; grid-row:2; display:grid; gap:22px; justify-items:start; }
.wo-cta-side .lede{ font-size:clamp(17px, 1.35vw, 20px); }
.wo-cta .link-line{ font-weight:500; }
@media (max-width:900px){
  .wo-cta{ min-height:max(560px, 80svh); }
  .wo-cta-body{ grid-template-columns:1fr; padding-top:var(--section); }
  .wo-cta-side{ grid-column:1; }
  .wo-cta-h{ font-size:clamp(76px, 22vw, 140px); }
}

@media (prefers-reduced-motion: reduce){
  .up-fig figcaption{ transform:none; opacity:1; }
  .ev::before{ transition:none; }
}