/* /resources, "the rider". Built on site.css tokens: stage, paper, standby amber, go green for state only.
   Mobile first: most visits are phones in Instagram and TikTok in-app browsers. */

.page-rider main { max-width: 46rem; margin: 0 auto; padding: 0 0 var(--sec); }
.rsec__k, .bill__h, .rider__k, .act__h, .hl__k { font: 500 11.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }

/* ---------------------------------------------------------------- hero ---- */
.rh { position: relative; isolation: isolate; overflow: clip; padding: calc(var(--bar-h) + clamp(32px, 6vw, 72px)) var(--pad) clamp(24px, 4vw, 40px); }
.rh::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("../assets/v4/patch-bay.webp") 50% 40% / cover no-repeat; opacity: 0.42; }
.rh::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(11 12 13 / 0.45) 0%, var(--stage) 94%); }
.rh__copy { display: grid; gap: 14px; }
.rh__state { display: inline-flex; align-items: center; gap: 10px; font: 600 12.5px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); }
.rh h1 { font: 900 clamp(2.6rem, 1.2rem + 5vw, 4.4rem)/0.94 var(--display); font-stretch: 112%; letter-spacing: -0.04em; }
.rh__amber { color: var(--amber); }
.rh__lede { max-width: 38ch; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); line-height: 1.55; color: var(--dim-2); }

/* -------------------------------------------------------- tonight's bill ---- */
.bill { padding: 8px var(--pad) 0; }
.bill__h { margin: 0 0 12px; }
.bill ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bill a { display: grid; grid-template-columns: 2.4em minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; border-radius: var(--r-panel); background: var(--booth); border: 1px solid var(--rule); text-decoration: none; transition: transform 160ms var(--ease), border-color 160ms var(--ease); }
.bill a:active { transform: scale(0.98); }
.bill__q { font: 600 13px/1 var(--mono); color: var(--amber); }
.bill__t b { display: block; font: 800 1.06rem/1.15 var(--display); font-stretch: 112%; letter-spacing: -0.01em; }
.bill__t small { display: block; margin-top: 4px; font: 500 12px/1.3 var(--mono); color: var(--dim-2); }
.bill__go { font: 600 18px/1 var(--mono); color: var(--dim-2); }
.bill .bill__lead { background: var(--amber); border-color: var(--amber); color: var(--on-amber); }
.bill .bill__lead .bill__q, .bill .bill__lead small, .bill .bill__lead .bill__go { color: var(--on-amber); }
@media (hover: hover) and (pointer: fine) { .bill a:hover { border-color: var(--dim); } .bill .bill__lead:hover { background: #ffc04d; } }

/* ------------------------------------------------------------ sections ---- */
.rsec { padding: clamp(48px, 8vw, 88px) var(--pad) 0; display: grid; gap: 10px; }
.rsec h2 { font: 900 clamp(2.1rem, 1.2rem + 3.4vw, 3.4rem)/0.95 var(--display); font-stretch: 112%; letter-spacing: -0.035em; }
.rsec p { color: var(--dim-2); max-width: 40ch; }

/* ------------------------------------------------- the rider (paper) ---- */
.rider { margin: 22px clamp(10px, 2vw, 24px) 0; padding: 18px clamp(14px, 3vw, 28px) 22px; background: var(--paper); color: var(--paper-ink); border-radius: 4px; box-shadow: 0 40px 90px -30px rgb(0 0 0 / 0.8); color-scheme: light; }
.rider__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; padding-bottom: 12px; border-bottom: 2px solid var(--paper-ink); }
.rider__k { display: block; color: var(--paper-dim); font-size: 10.5px; }
.rider__v { display: block; margin-top: 5px; font: 800 1.1rem/1.1 var(--display); font-stretch: 112%; }
.rider__n { font: 900 2.6rem/0.85 var(--display); font-stretch: 125%; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.rider__grp { margin: 20px 0 2px; font: 600 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-dim); }
.rider__list { list-style: none; margin: 0; padding: 0; }
.rch { display: grid; grid-template-columns: 2.9em 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 66px; padding: 11px 4px; border-bottom: 1px solid var(--paper-rule); text-decoration: none; color: var(--paper-ink); transition: background-color 160ms var(--ease); }
.rch:active { background: var(--paper-2); }
@media (hover: hover) and (pointer: fine) { .rch:hover { background: var(--paper-2); } .rch:hover .rch__go { color: var(--paper-ink); transform: translateX(3px); } }
.rch:focus-visible { outline-color: var(--paper-ink); outline-offset: -2px; }
.rch__no { font: 600 12px/1 var(--mono); color: var(--paper-dim); }
.rch__tile { width: 40px; height: 40px; border-radius: 10px; background: var(--stage); display: grid; place-items: center; overflow: hidden; }
.rch__tile img { width: 22px; height: 22px; object-fit: contain; }
.rch__tile--tile { background: none; }
.rch__tile--tile img { width: 40px; height: 40px; }
.rch__tile--app img { width: 48px; height: 48px; max-width: none; }
.rch__txt b { display: block; font: 800 1rem/1.15 var(--display); font-stretch: 106%; }
.rch__txt > span { display: block; margin-top: 3px; font-size: 0.86rem; line-height: 1.38; color: var(--paper-dim); }
.rch__go { font: 600 15px/1 var(--mono); color: var(--paper-dim); transition: transform 160ms var(--ease), color 160ms var(--ease); }
.rch__aff { display: inline-block; margin-left: 7px; padding: 2px 6px; border: 1px solid var(--paper-ink); border-radius: 999px; font: 600 9.5px/1.2 var(--mono); letter-spacing: 0.08em; vertical-align: 2px; }
.rider__stamp { display: inline-block; margin: 20px 0 0; padding: 9px 13px; max-width: 26ch; border: 3px solid var(--paper-ink); border-radius: 6px; font: 900 0.86rem/1.15 var(--display); font-stretch: 112%; text-transform: uppercase; transform: rotate(-2deg); }

/* ------------------------------------------------------- the cue sheet ---- */
.acts { padding: 8px var(--pad) 0; }
.act { margin-top: 26px; }
.act__h { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.act__h::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.pq { margin-bottom: 10px; background: var(--booth); border: 1px solid var(--rule); border-radius: var(--r-panel); overflow: hidden; transition: background-color 300ms var(--ease), border-color 300ms var(--ease); }
.pq summary { list-style: none; display: grid; grid-template-columns: 2.6em minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 62px; padding: 13px 16px; cursor: pointer; }
.pq summary::-webkit-details-marker { display: none; }
.pq summary:focus-visible { outline-offset: -3px; border-radius: var(--r-panel); }
.pq__q { font: 600 13px/1 var(--mono); color: var(--amber); }
.pq__t { display: block; font-weight: 600; font-size: 0.98rem; line-height: 1.3; }
.pq__tool { display: block; margin-top: 4px; font: 500 11.5px/1.2 var(--mono); color: var(--dim-2); }
.pq__st { display: inline-flex; align-items: center; gap: 7px; font: 600 11.5px/1 var(--mono); letter-spacing: 0.08em; color: var(--amber); }
.pq__st i { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); }
.pq__body { padding: 0 16px 16px; display: grid; gap: 10px; }
.pq__p { font-size: 0.94rem; color: var(--chalk); }
.pq__how { font-size: 0.86rem; color: var(--dim-2); }
.pq__text { margin: 2px 0 0; padding: 14px; max-height: 18rem; overflow: auto; background: var(--stage); border: 1px solid var(--rule); border-radius: var(--r-input); font: 400 12.5px/1.6 var(--mono); color: var(--chalk); white-space: pre-wrap; overflow-wrap: anywhere; -webkit-user-select: text; user-select: text; }
.pq__text mark { background: rgb(255 176 31 / 0.16); color: var(--amber); border-radius: 3px; padding: 0 2px; }
.pq__fire { width: 100%; height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 0; border-radius: 999px; background: var(--amber); color: var(--on-amber); cursor: pointer; transition: transform 140ms var(--ease), background-color 200ms var(--ease); }
.pq__fire:active { transform: scale(0.97); }
.pq__fire-l { font: 900 17px/1 var(--display); font-stretch: 125%; letter-spacing: 0.02em; }
.pq__fire-n { font: 500 12.5px/1 var(--mono); padding-left: 12px; border-left: 1px solid currentColor; }
.pq__hint { font: 500 12.5px/1.45 var(--mono); color: var(--amber); }
.pq.is-go { background: rgb(52 210 123 / 0.07); border-color: rgb(52 210 123 / 0.35); }
.pq.is-go .pq__q, .pq.is-go .pq__st { color: var(--go); }
.pq.is-go .pq__st i { background: var(--go); }
.pq.is-go .pq__fire { background: var(--go); }
@media (hover: hover) and (pointer: fine) { .pq__fire:hover { background: #ffc04d; } .pq.is-go .pq__fire:hover { background: #5fdc97; } .pq summary:hover .pq__t { color: #fff; } }

/* ----------------------------------------------------- the headliner ---- */
.hl { margin: clamp(48px, 8vw, 88px) clamp(10px, 2vw, 24px) 0; padding: 22px clamp(16px, 3vw, 32px) 26px; background: var(--paper); color: var(--paper-ink); border-radius: 4px; border-top: 6px solid var(--paper-ink); display: grid; gap: 12px; color-scheme: light; }
.hl__k { color: var(--paper-dim); }
.hl h2 { font: 900 clamp(1.9rem, 1.2rem + 2.6vw, 2.8rem)/1 var(--display); font-stretch: 112%; letter-spacing: -0.03em; }
.hl__line { font-weight: 600; }
.hl__desc { color: var(--paper-dim); }
.hl__dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; margin: 6px 0; padding: 14px 0; border-top: 1px solid var(--paper-rule); border-bottom: 1px solid var(--paper-rule); }
.hl__dl dt { font: 500 11px/1.6 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-dim); }
.hl__dl dd { margin: 0; font: 700 1rem/1.4 var(--display); font-stretch: 106%; }
.hl__dl .hl__price { font: 900 2rem/1 var(--display); font-stretch: 112%; letter-spacing: -0.02em; }
.hl__cta { justify-self: start; }
.hl__fine { font: 500 12.5px/1.4 var(--mono); color: var(--paper-dim); }

/* ------------------------------------------------------------ reveals ---- */
@media (prefers-reduced-motion: no-preference) {
  .js .page-rider .rv { opacity: 0; transform: translateY(22px); transition: opacity 700ms var(--ease), transform 900ms var(--ease); }
  .js .page-rider .rv.is-in { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------- phone ---- */
@media (max-width: 760px) {
  .page-rider .nav { display: none; }
  .hl__cta { justify-self: stretch; }
  .rch { grid-template-columns: 2.5em 40px minmax(0, 1fr) auto; gap: 10px; }
}
@media (max-width: 360px) {
  .rch__no { display: none; }
  .rch { grid-template-columns: 40px minmax(0, 1fr) auto; }
}
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rch__mono { font: 700 12px/1 var(--mono); color: var(--chalk); letter-spacing: -0.02em; }