.drop_wrap {
  --ink: #07080a; --bone: #ece8df; --mute: rgba(236, 232, 223, 0.58); --dim: rgba(236, 232, 223, 0.34); --line: rgba(236, 232, 223, 0.16);
  --live: #ff3b2f; --inkline: rgba(7, 8, 10, 0.16); --inkmute: rgba(7, 8, 10, 0.56);
  --sans: 'VG Sans', 'Archivo', system-ui, sans-serif; --mono: 'VG Mono', 'Martian Mono', ui-monospace, monospace;
  --gut: clamp(16px, 2.2vw, 32px);
  position: relative; color: var(--bone); font-family: var(--sans);
}
.drop_wrap.is-live { margin-top: -100vh; }
.drop_wrap .drop_contain { position: relative; }
.drop_wrap .drop_run { position: relative; z-index: 3; }
.drop_wrap.is-live .drop_run + .drop_run { margin-top: -100vh; }
.drop_wrap.is-live .drop_run.is-merch { height: 300vh; }
.drop_wrap.is-live .drop_run.is-fans { height: 260vh; }
.drop_wrap.is-live .drop_run.is-season { height: 300vh; }
.drop_wrap.is-live .drop_stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; transform: translate3d(0, var(--hold, 0px), 0); visibility: hidden; }
.drop_wrap .drop_tag { display: inline-block; font: 600 10px/1 var(--mono); font-variation-settings: 'wdth' 85; letter-spacing: 0.08em; padding: 4px 6px 3px; background: var(--bone); color: var(--ink); margin-right: 10px; }
.drop_wrap .drop_tag.is-ink { background: var(--ink); color: var(--bone); }
.drop_wrap .drop_kicker { position: absolute; left: var(--gut); top: calc(var(--gut) + 54px); margin: 0; font: 500 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); display: flex; align-items: center; z-index: 2; opacity: var(--in, 1); }
.drop_wrap .drop_merch .drop_kicker, .drop_wrap .drop_season .drop_kicker { color: var(--inkmute); }
.drop_wrap .drop_x { position: relative; width: 18px; height: 18px; flex: none; }
.drop_wrap .drop_x::before, .drop_wrap .drop_x::after { content: ''; position: absolute; left: 50%; top: 50%; background: currentColor; transform: translate(-50%, -50%); }
.drop_wrap .drop_x::before { width: 18px; height: 1px; } .drop_wrap .drop_x::after { width: 1px; height: 18px; }
.drop_wrap .drop_cue { position: absolute; right: var(--gut); bottom: calc(var(--gut) + 30px); margin: 0; display: flex; align-items: center; gap: 12px; font: 500 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); opacity: var(--in, 1); }
.drop_wrap .drop_cue.is-ink { color: var(--inkmute); }

/* 12 merch: bone studio */
.drop_wrap .drop_merch { position: absolute; inset: 0; --lv: 0; background: #e4e0d6; color: var(--ink); clip-path: inset(calc((1 - var(--rv, 1)) * 100%) 0 calc(var(--lv, 0) * 100%) 0); }
.drop_wrap .drop_cloth { position: absolute; left: 34%; right: 0; top: 0; bottom: 0; cursor: grab; touch-action: pan-y; }
.drop_wrap .drop_cloth:active { cursor: grabbing; }
.drop_wrap .drop_cloth canvas { display: block; width: 100%; height: 100%; }
.drop_wrap .drop_merch_title { position: absolute; left: var(--gut); top: calc(var(--gut) + 92px); margin: 0; font: 200 clamp(56px, 8.4vw, 150px)/0.84 var(--sans); font-variation-settings: 'wdth' 125; letter-spacing: -0.02em; opacity: var(--in, 1); pointer-events: none; }
.drop_wrap .drop_spec { position: absolute; left: var(--gut); bottom: calc(var(--gut) + 30px); width: min(380px, 40%); margin: 0; opacity: var(--in, 1); }
.drop_wrap .drop_spec div { display: grid; grid-template-columns: 80px 1fr; gap: 12px; padding: 9px 0 8px; border-top: 1px solid var(--inkline); }
.drop_wrap .drop_spec dt { font: 500 10px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--inkmute); }
.drop_wrap .drop_spec dd { margin: 0; font: 500 14px/1.3 var(--sans); }

/* 13 fans: the wall */
.drop_wrap .drop_fans { position: absolute; inset: 0; --lv: 0; background: var(--ink); clip-path: inset(calc((1 - var(--rv, 1)) * 100%) 0 calc(var(--lv, 0) * 100%) 0); }
.drop_wrap .drop_wall { position: absolute; top: calc(var(--gut) + 74px); bottom: calc(var(--gut) + 120px); left: 56%; right: var(--gut); display: grid; grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); gap: 0 18px; padding: 0 var(--gut); overflow: hidden; -webkit-mask: linear-gradient(transparent, #000 18%, #000 82%, transparent); mask: linear-gradient(transparent, #000 18%, #000 82%, transparent); }
.drop_wrap .drop_col { display: flex; flex-direction: column; gap: 10px; transform: translate3d(0, var(--y, 0px), 0); will-change: transform; }
.drop_wrap .drop_msg { font: 500 12.5px/1.3 var(--sans); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drop_wrap .drop_msg b { font: 500 9.5px/1 var(--mono); letter-spacing: 0.05em; color: rgba(236, 232, 223, 0.26); margin-right: 8px; text-transform: uppercase; }
.drop_wrap .drop_msg.is-you { color: var(--bone); }
.drop_wrap .drop_msg.is-you b { color: var(--live); }
.drop_wrap .drop_msg.is-chant { color: var(--mute); font-weight: 700; font-variation-settings: 'wdth' 70; text-transform: uppercase; letter-spacing: 0.04em; }
.drop_wrap .drop_fans_title { position: absolute; left: var(--gut); top: calc(var(--gut) + 92px); margin: 0; max-width: 52%; font: 200 clamp(48px, 6.6vw, 124px)/0.86 var(--sans); font-variation-settings: 'wdth' 125; letter-spacing: -0.02em; opacity: var(--in, 1); pointer-events: none; }
.drop_wrap .drop_say { position: absolute; left: var(--gut); right: var(--gut); bottom: calc(var(--gut) + 46px); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 14px 16px; background: var(--ink); border: 1px solid var(--line); opacity: var(--in, 1); }
.drop_wrap .drop_say_label { font: 500 10px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.drop_wrap .drop_say_input { appearance: none; border: 0; background: none; color: var(--bone); outline: none; font: 700 clamp(22px, 2.6vw, 40px)/1 var(--sans); font-variation-settings: 'wdth' 70; text-transform: uppercase; letter-spacing: 0.02em; min-width: 0; }
.drop_wrap .drop_say_input::placeholder { color: rgba(236, 232, 223, 0.22); }
.drop_wrap .drop_say_go { appearance: none; border: 0; background: var(--bone); color: var(--ink); padding: 11px 14px 10px; display: flex; gap: 10px; align-items: center; font: 600 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.drop_wrap .drop_say_go:hover { background: var(--live); color: var(--bone); }
.drop_wrap .drop_fans_note { position: absolute; left: var(--gut); bottom: calc(var(--gut) + 18px); margin: 0; font: 500 10px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); opacity: var(--in, 1); }

/* 14 season: an Obys index of dates */
.drop_wrap .drop_season { position: absolute; inset: 0; --lv: 0; background: var(--bone); color: var(--ink); clip-path: inset(calc((1 - var(--rv, 1)) * 100%) 0 calc(var(--lv, 0) * 100%) 0); }
.drop_wrap .drop_cal { position: absolute; left: var(--gut); right: var(--gut); top: calc(var(--gut) + 92px); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--inkline); opacity: var(--in, 1); }
.drop_wrap .drop_cal li { border-bottom: 1px solid var(--inkline); }
.drop_wrap .drop_cal button { appearance: none; border: 0; background: none; width: 100%; color: var(--ink); text-align: left; cursor: default; display: grid; grid-template-columns: 10ch 1fr 18ch 12ch; align-items: baseline; gap: 20px; padding: 7px 0 5px; }
.drop_wrap .drop_cal time { font: 500 11px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--inkmute); }
.drop_wrap .drop_cal b { font: 700 clamp(30px, 4.2vw, 72px)/0.9 var(--sans); font-variation-settings: 'wdth' 62; text-transform: uppercase; transition: transform 0.4s cubic-bezier(.2, .8, .2, 1); }
.drop_wrap .drop_cal span { font: 500 11px/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.drop_wrap .drop_cal em { font: 600 10px/1 var(--mono); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; justify-self: end; border: 1px solid var(--ink); padding: 4px 6px 3px; }
.drop_wrap .drop_cal em.is-lan { background: var(--ink); color: var(--bone); }
.drop_wrap .drop_cal i { grid-column: 2 / -1; font: 400 14px/1.35 var(--sans); font-style: normal; max-height: 0; overflow: hidden; color: var(--inkmute); transition: max-height 0.4s, padding 0.4s; }
.drop_wrap .drop_cal button.is-on b { transform: translateX(12px); }
.drop_wrap .drop_cal button.is-on i { max-height: 3em; padding-top: 6px; }

@media (max-width: 760px) {
  .drop_wrap .drop_kicker { top: calc(var(--gut) + 46px); }
  .drop_wrap .drop_cloth { left: 0; top: 18%; bottom: 30%; }
  .drop_wrap .drop_merch_title { top: calc(var(--gut) + 74px); font-size: 44px; }
  .drop_wrap .drop_spec { width: auto; right: var(--gut); bottom: calc(var(--gut) + 36px); }
  .drop_wrap .drop_spec div { padding: 6px 0 5px; }
  .drop_wrap .drop_spec dd { font-size: 12.5px; }
  .drop_wrap .drop_fans_title { top: calc(var(--gut) + 74px); font-size: 44px; max-width: none; }
  .drop_wrap .drop_wall { left: var(--gut); right: var(--gut); top: calc(var(--gut) + 190px); bottom: calc(var(--gut) + 120px); }
  .drop_wrap .drop_say { grid-template-columns: 1fr auto; bottom: calc(var(--gut) + 42px); padding: 10px 12px; }
  .drop_wrap .drop_say_label { display: none; }
  .drop_wrap .drop_say_input { font-size: 20px; }
  .drop_wrap .drop_fans_note { font-size: 8.5px; left: calc(var(--gut) + 40px); right: var(--gut); bottom: calc(var(--gut) + 4px); }
  .drop_wrap .drop_say { bottom: calc(var(--gut) + 50px); }
  .drop_wrap .drop_cal { top: calc(var(--gut) + 80px); }
  .drop_wrap .drop_cal button { grid-template-columns: 1fr auto; gap: 4px 10px; }
  .drop_wrap .drop_cal time { grid-column: 1 / -1; }
  .drop_wrap .drop_cal b { font-size: 28px; }
  .drop_wrap .drop_cal button.is-on i { max-height: 7em; }
  .drop_wrap .drop_cal span { display: none; }
  .drop_wrap .drop_cue { left: calc(var(--gut) + 40px); right: auto; bottom: calc(var(--gut) + 4px); font-size: 9.5px; }
}

/* the editor's canvas: this section's chapters as stills (stage.js showPosters) */
.drop_wrap.is-canvas { margin-top: 0; background: #07080a; }
.drop_wrap .drop_poster { position: relative; margin: 0; }
.drop_wrap .drop_poster_img { display: block; width: 100%; height: auto; }
.drop_wrap .drop_poster_cap { position: absolute; left: 16px; bottom: 14px; padding: 4px 6px 3px; background: #ece8df; color: #07080a; font: 600 10px/1 'VG Mono', ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; }

/* short phones: the season list tightens so the last date clears the cue */
@media (max-width: 760px) and (max-height: 780px) {
  .drop_wrap .drop_cal { top: calc(var(--gut) + 72px); }
  .drop_wrap .drop_cal button { padding: 5px 0 3px; }
  .drop_wrap .drop_cal b { font-size: 23px; }
  .drop_wrap .drop_cal button.is-on i { max-height: 4.6em; font-size: 13px; }
}

/* a stage is only a frame: its content takes the taps, and a chapter that has faded out takes none (a stage arriving
   over another must never sit on its controls) */
.drop_wrap.is-live .drop_run, .drop_wrap.is-live .drop_stage { pointer-events: none; }
.drop_wrap.is-live .drop_stage > * { pointer-events: auto; }
.drop_wrap .is-off, .drop_wrap .is-off * { pointer-events: none !important; }