/* ROTATION views: the pieces specific to pages and visualizations, on top of
   rotation.css (tokens, type, buttons, masthead). */

/* ---------- home: the time-machine teaser ---------- */
.tm-teaser { margin: 4px 0 18px; }
.tm-stage { display: grid; gap: 2px; min-height: 150px; align-content: end; padding-bottom: 10px; }
.tm-who { font-size: clamp(44px, 6.4vw, 84px); line-height: 0.86; transition: opacity 0.3s ease; overflow-wrap: anywhere; }
.tm-what { font-size: 20px; color: var(--ink-2); font-style: italic; }
.tm-bars { display: flex; align-items: flex-end; gap: 1px; height: 96px; border-bottom: 1.5px solid var(--ink); }
.tm-bars i { flex: 1 1 0; min-width: 0; border-radius: 1.5px 1.5px 0 0; opacity: 0.85; transition: opacity 0.3s ease, transform 0.3s var(--ease); transform-origin: bottom; }
.tm-bars i.on { opacity: 1; transform: scaleY(1.08); box-shadow: 0 0 0 1.5px var(--ink); }
.plate:hover .tm-bars i { opacity: 1; }

/* ---------- home: plates ---------- */
a.plate { text-decoration: none; color: inherit; display: block; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
a.plate:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -28px rgba(22, 19, 15, 0.5); }
.plate.night h4 { color: var(--night-ink); }
.plate #uni-teaser { margin: 4px -18px 14px; display: block; }
.quote-card .fine { line-height: 1.5; letter-spacing: 0.02em; font-size: 12px; }
.quote-card .cat { color: var(--signal-ink); }
.lineup-plate { background: var(--paper-3); }
.lp-frame-l { padding: 4%; background: #fbf8f1; box-shadow: 0 30px 50px -30px rgba(22, 19, 15, 0.7), 0 0 0 1px rgba(22, 19, 15, 0.12); margin: 6px auto 18px; max-width: 420px; transform: rotate(-1.2deg); transition: transform 0.4s var(--ease); }
.lineup-plate:hover .lp-frame-l { transform: rotate(0deg) scale(1.01); }
.lp-frame-l canvas { width: 100%; height: auto; display: block; opacity: 0; transition: opacity 0.6s ease; background: #121110; }
.lp-frame-l canvas.on { opacity: 1; }
.ask-plate { display: flex; flex-direction: column; }
.ask-chips { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 8px; }
.ask-chips a { display: block; padding: 11px 14px; border: 1px solid var(--rule-strong); border-radius: 2px; text-decoration: none; font-family: var(--font-serif); font-size: 19px; line-height: 1.2; background: var(--paper); transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s var(--ease); }
.ask-chips a::before { content: '→ '; font-family: var(--font-mono); font-size: 14px; color: var(--signal); }
.ask-chips a:hover { border-color: var(--ink); transform: translateX(3px); }
.ask-preview { margin-top: auto; padding-top: 22px; }
.ask-preview p { margin: 8px 0 0; padding-top: 12px; border-top: 1px solid var(--rule-strong); font: 400 clamp(22px, 2vw, 27px)/1.18 var(--font-serif); letter-spacing: -0.01em; }

/* ======================= YOUR ROTATION ======================= */
.app .mast { border-bottom: 0; }
.sides { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: rgba(243, 238, 229, 0.9); }
.sides-in { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; padding-top: 6px; padding-bottom: 6px; }
.sides-in::-webkit-scrollbar { display: none; }
.sides a { flex: 0 0 auto; text-decoration: none; font-size: 13px; color: var(--ink-2); padding: 6px 10px; border-radius: 999px; white-space: nowrap; }
.sides a b { font-family: var(--font-mono); font-weight: 500; font-size: 11px; color: var(--ink-3); margin-right: 4px; }
.sides a:hover { color: var(--ink); background: rgba(22, 19, 15, 0.05); }
.sides a.on { color: var(--paper); background: var(--ink); }
.sides a.on b { color: rgba(243, 238, 229, 0.6); }
html { scroll-padding-top: 118px; }

.empty-l { padding: 12vh 0; }
.empty-l h1 { font-size: clamp(64px, 12vw, 150px); margin: 16px 0 18px; }
.needs { border: 1px dashed var(--rule-strong); padding: 20px 22px; font-size: 15.5px; color: var(--ink-2); background: rgba(22, 19, 15, 0.025); margin: 0; }
.night-band .needs { color: rgba(243, 238, 229, 0.75); border-color: rgba(243, 238, 229, 0.25); }
.aside { font-family: var(--font-serif); font-style: italic; font-size: 20px; line-height: 1.3; color: var(--signal-ink); margin: 10px 0 0; }
.aside::before { content: '— '; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--rule-strong); background: transparent; color: var(--ink); border-radius: 999px; padding: 6px 12px; font: 500 13.5px var(--font-sans); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; }
.chip em { font-style: normal; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.chip:hover { border-color: var(--ink); }
.chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip.on em { color: rgba(243, 238, 229, 0.6); }
.chip.ghost { border-style: dashed; }
.night .chip { color: var(--night-ink); border-color: rgba(243, 238, 229, 0.3); }
.night .chip:hover { border-color: var(--night-ink); }
.night .chip em { color: rgba(243, 238, 229, 0.5); }
.toast-l { position: fixed; left: 50%; bottom: calc(22px + var(--safe-b)); transform: translate(-50%, 30px); opacity: 0; z-index: 90; background: var(--ink); color: var(--paper); padding: 11px 18px; border-radius: 999px; font-size: 14px; transition: all 0.3s var(--ease); pointer-events: none; }
.toast-l.on { opacity: 1; transform: translate(-50%, 0); }
.sample-flag { margin-top: 18px; display: inline-block; padding: 8px 14px; border: 1px solid var(--rule-strong); font-size: 14px; background: var(--paper-2); }

/* cover */
.cover-l { display: grid; gap: 28px; padding: clamp(28px, 5vw, 64px) var(--gut) 0; align-items: center; }
.cover-title { font-size: clamp(56px, 9vw, 150px); margin: 14px 0 18px; outline: none; overflow-wrap: normal; word-break: keep-all; hyphens: none; cursor: text; }
.cover-title:focus { color: var(--signal); }
.liner-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 26px 0 14px; border-top: 2px solid var(--ink); }
.liner-stats div { padding: 12px 0 10px; border-bottom: 1px solid var(--rule); }
.liner-stats div:nth-child(odd) { padding-right: 14px; border-right: 1px solid var(--rule); }
.liner-stats div:nth-child(even) { padding-left: 14px; }
.liner-stats dt { margin: 0 0 2px; }
.liner-stats dd { margin: 0; font-size: clamp(34px, 4vw, 52px); line-height: 1; }
.liner-stats.small dd { font-size: 26px; }
.cover-fig { margin: 0; }
#cover-fp { max-width: 620px; margin: 0 auto; }
@media (min-width: 980px) {
  .cover-l { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
  .liner-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .liner-stats div, .liner-stats div:nth-child(odd), .liner-stats div:nth-child(even) { padding: 12px 14px 10px; border-right: 1px solid var(--rule); }
  .liner-stats div:first-child { padding-left: 0; }
  .liner-stats div:last-child { border-right: 0; }
}

/* the time machine */
.tm-grid { display: grid; gap: 26px; }
.tm-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 38px; }
.tm-era { color: var(--signal-ink); }
.tm-month { font-size: clamp(52px, 8.4vw, 116px); margin: 6px 0 10px; }
.tm-lead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0 0 18px; }
.tm-no1 { background: none; border: 0; padding: 0; font: 400 clamp(32px, 4vw, 52px)/1 var(--font-serif); color: var(--ink); cursor: pointer; text-align: left; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: var(--rule-strong); }
.tm-no1:hover { color: var(--signal); }
.tm-share { font-style: italic; font-size: 22px; color: var(--ink-2); }
.tm-race { position: relative; list-style: none; padding: 0; margin: 0; overflow: hidden; }
.tm-row { position: absolute; left: 0; right: 0; top: 0; height: 40px; display: grid; grid-template-columns: 26px minmax(110px, 0.9fr) 2fr 54px; gap: 10px; align-items: center; opacity: 0; transition: transform 0.45s var(--ease), opacity 0.35s ease; }
.tm-row.on { opacity: 1; }
.tm-race.instant .tm-row { transition: none; }
.tm-row .rk { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); text-align: right; }
.tm-row .nm { background: none; border: 0; padding: 0; text-align: left; font: 640 16px/1.15 var(--font-sans); color: var(--ink); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-row .nm:hover { color: var(--signal); }
.tm-row .bar { height: 16px; background: rgba(22, 19, 15, 0.05); }
.tm-row .bar i { display: block; height: 100%; transition: width 0.45s var(--ease), background 0.3s ease; }
.tm-row .hr { font-family: var(--font-mono); font-size: 12.5px; text-align: right; }
.tm-aside { display: grid; grid-template-columns: 1fr; gap: 20px; align-content: start; }
.tm-aside .cat { margin: 0 0 8px; }
.tm-songs { list-style: none; padding: 0; margin: 0; counter-reset: s; }
.tm-songs li { padding: 7px 0; border-bottom: 1px solid var(--rule); }
.tm-songs b { display: block; font: 400 21px/1.15 var(--font-serif); }
.tm-songs span { font-size: 13px; color: var(--ink-3); }
.tm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.tm-total { font-size: 24px; margin: 0; }
.tm-strip { position: relative; display: flex; align-items: flex-end; gap: 1px; height: 92px; margin-top: 30px; cursor: ew-resize; touch-action: none; border-bottom: 2px solid var(--ink); }
.tm-strip:focus-visible { outline-offset: 6px; }
.tm-strip i { flex: 1 1 0; min-width: 0; border-radius: 1px 1px 0 0; pointer-events: none; }
.tm-cursor { position: absolute; top: -10px; bottom: -8px; width: 2px; margin-left: -1px; background: var(--signal); pointer-events: none; transition: left 0.2s var(--ease); }
.tm-cursor::before { content: ''; position: absolute; top: -6px; left: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--signal); }
.tm-years { position: relative; height: 22px; margin-top: 6px; }
.tm-years span { position: absolute; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); padding-left: 4px; border-left: 1px solid var(--rule-strong); }
.tm-ctrl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.tm-hint { margin-left: 6px; }
@media (min-width: 980px) {
  .tm-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 48px; }
}

/* the universe */
.night-band { background: var(--night); color: var(--night-ink); margin-top: clamp(64px, 10vw, 128px); padding-bottom: clamp(48px, 7vw, 88px); }
.track-night { border-top-color: var(--night-ink); }
.track-night .say { color: rgba(243, 238, 229, 0.7); }
.track-night .cat { color: rgba(243, 238, 229, 0.55); }
.uni { display: grid; gap: 18px; position: relative; }
.uni-stage { position: relative; border: 1px solid rgba(243, 238, 229, 0.12); }
.uni-canvas { display: block; touch-action: none; cursor: grab; }
.uni-canvas:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
.uni-side { align-self: start; }
.uni-side h3 { font-size: clamp(40px, 5vw, 64px); margin: 4px 0 6px; overflow-wrap: anywhere; }
.uni-side p { color: rgba(243, 238, 229, 0.78); font-size: 15px; line-height: 1.5; margin: 6px 0; }
.uni-side .uni-big { font-family: var(--font-serif); font-size: 34px; color: var(--night-ink); margin: 0 0 8px; line-height: 1.05; }
.uni-side .fine { color: rgba(243, 238, 229, 0.5); }
.uni-cl { list-style: none; padding: 0; margin: 6px 0 0; }
.uni-cl button { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid rgba(243, 238, 229, 0.12); color: var(--night-ink); padding: 10px 0; cursor: pointer; }
.uni-cl b { display: block; font: 400 20px/1.15 var(--font-serif); }
.uni-cl span { font-family: var(--font-mono); font-size: 11px; color: rgba(243, 238, 229, 0.5); letter-spacing: 0.08em; text-transform: uppercase; }
.uni-cl button:hover b { color: var(--signal); }
.uni-controls { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-top: 16px; }
.uni-time { display: flex; align-items: center; gap: 12px; flex: 1 1 280px; }
.uni-time .cat { flex: 0 0 auto; min-width: 150px; color: var(--night-ink); }
.uni-time input { flex: 1; accent-color: var(--signal); }
.uni-zoom { display: flex; gap: 6px; }
@media (min-width: 980px) { .uni { grid-template-columns: minmax(0, 1fr) 320px; } }

/* lifecycles */
.lc-say { color: var(--ink-2); font-size: 16px; margin: 14px 0 22px; }
.lc-body { display: grid; gap: 24px; }
.lc-list { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--ink); }
.lc-list button { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--rule); padding: 12px 10px 12px 0; cursor: pointer; color: var(--ink); transition: padding 0.2s var(--ease), background 0.2s ease; }
.lc-list b { display: block; font: 640 17px/1.2 var(--font-sans); }
.lc-list span { display: block; font-size: 13.5px; color: var(--ink-3); margin-top: 2px; }
.lc-list button:hover { padding-left: 6px; }
.lc-list button.on { background: var(--ink); color: var(--paper); padding-left: 12px; }
.lc-list button.on span { color: rgba(243, 238, 229, 0.65); }
.lc-name { font-size: clamp(48px, 7vw, 96px); margin: 4px 0 10px; overflow-wrap: anywhere; }
.lc-fact { font-size: 16.5px; line-height: 1.55; color: var(--ink-2); max-width: 60ch; }
.lc-detail .ch-wrap { margin-top: 20px; }
@media (min-width: 980px) { .lc-body { grid-template-columns: 340px minmax(0, 1fr); gap: 44px; } }

/* listening weather */
.rh-years { margin-bottom: 18px; }
.rh-map { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 8px; }
.rh-hours { grid-row: 1; display: flex; flex-direction: column; justify-content: space-between; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); text-align: right; }
.rh-canvas { grid-row: 1; grid-column: 2; }
.rh-canvas canvas { display: block; }
.rh-months { grid-row: 2; grid-column: 2; display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); padding-top: 6px; }
.rh-legend { grid-row: 3; grid-column: 2; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.rh-ramp { display: inline-flex; align-items: center; gap: 2px; }
.rh-ramp i { width: 22px; height: 12px; display: inline-block; }
.rh-ramp em { font-style: normal; font-family: var(--font-mono); font-size: 11px; margin-left: 6px; color: var(--ink-2); }
.rh-take { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 4px; }
.rh-take li { font-family: var(--font-serif); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; }
.rh-take li::before { content: '● '; color: var(--signal); font-size: 0.6em; vertical-align: 0.25em; }
.rh-panels { display: grid; gap: 22px; margin-top: 30px; border-top: 2px solid var(--ink); padding-top: 18px; }
.rh-p .cat { margin: 0 0 10px; }
.sw { display: inline-block; width: 18px; height: 3px; vertical-align: middle; margin-left: 4px; }
.sw.ink { background: var(--ink); } .sw.red { background: var(--signal); }
.rh-seasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule); }
.rh-seasons div { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.rh-seasons div:nth-child(odd) { border-right: 1px solid var(--rule); padding-right: 10px; }
.rh-seasons div:nth-child(even) { padding-left: 10px; }
.rh-seasons b { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--font-mono); font-weight: 500; }
.rh-seasons span { display: block; font-size: 26px; line-height: 1.1; }
.rh-seasons em { display: block; font-style: normal; font-size: 14px; color: var(--ink-2); }
@media (min-width: 980px) { .rh-panels { grid-template-columns: 0.8fr 1.2fr 1fr; gap: 36px; } }

/* things about you */
.side-b .side-mark { font-family: var(--font-sans); font-stretch: 125%; font-weight: 800; font-size: 13px; letter-spacing: 0.4em; text-transform: uppercase; text-align: center; padding: 14px; border: 2px solid var(--ink); border-radius: 999px; width: max-content; margin: 0 auto 56px; }
.th-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }

/* ask */
.ask-form { display: flex; gap: 8px; border-bottom: 2px solid var(--ink); padding-bottom: 10px; }
.ask-form input { flex: 1; min-width: 0; background: transparent; border: 0; font: 400 clamp(26px, 3.4vw, 44px)/1.1 var(--font-serif); color: var(--ink); padding: 6px 0; outline: none; }
.ask-form input::placeholder { color: var(--ink-4); font-style: italic; }
.ask-sugg { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ask-sugg button { border: 1px solid var(--rule-strong); background: transparent; border-radius: 2px; padding: 8px 12px; font: 400 17px/1.2 var(--font-serif); cursor: pointer; color: var(--ink); text-align: left; }
.ask-sugg button:hover { border-color: var(--ink); background: var(--paper-2); }
.answer { margin-top: 30px; padding: clamp(18px, 3vw, 32px); background: var(--paper-2); border: 1px solid var(--rule-strong); }
.answer.cant { border-style: dashed; background: transparent; }
.q-echo { font-size: 24px; font-style: italic; margin: 2px 0 6px; }
.read-as { margin: 0 0 14px; }
.answer-h { font: 400 clamp(30px, 3.6vw, 50px)/1.06 var(--font-serif); letter-spacing: -0.015em; margin: 0 0 20px; max-width: 26ch; }
.answer-h.long { font-size: clamp(25px, 2.5vw, 36px); line-height: 1.12; max-width: 40ch; }
.answer-viz { margin: 8px 0 16px; }
.layer { border-top: 1px solid var(--rule); padding-top: 10px; margin-top: 12px; }
.layer ul { margin: 6px 0 0; padding-left: 18px; }
.layer li, .layer p { font-size: 15px; line-height: 1.55; color: var(--ink-2); margin: 4px 0; }
.answer-table { margin-top: 14px; }
.answer-table summary { cursor: pointer; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.answer-table table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
.answer-table th { text-align: left; font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--rule-strong); padding: 6px 8px 6px 0; }
.answer-table td { border-bottom: 1px solid var(--rule); padding: 6px 8px 6px 0; }

/* lineup */
.fest-l { display: grid; gap: 28px; align-items: start; }
.fest-poster-l { position: relative; max-width: 680px; width: 100%; margin: 0 auto; padding: 3.5%; background: #fbf8f1; box-shadow: 0 40px 70px -40px rgba(22, 19, 15, 0.8), 0 0 0 1px rgba(22, 19, 15, 0.12); }
.fest-poster-l canvas { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; background: #121110; }
.fest-side-l .chips { margin: 8px 0 16px; }
@media (min-width: 980px) { .fest-l { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; } }

/* back room */
.backroom { display: grid; gap: 0; border-top: 2px solid var(--ink); }
.br-item { display: grid; gap: 4px; padding: 20px 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); }
.br-item b { font: 400 32px/1.05 var(--font-serif); }
.br-item span:last-child { color: var(--ink-2); font-size: 15px; }
.br-item:hover b { color: var(--signal); }
@media (min-width: 900px) { .backroom { grid-template-columns: repeat(4, 1fr); } .br-item { padding: 22px 20px 22px 0; border-right: 1px solid var(--rule); border-bottom: 0; } .br-item + .br-item { padding-left: 20px; } .br-item:last-child { border-right: 0; } }

/* the drawer */
.drawer { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(22, 19, 15, 0.35); opacity: 0; transition: opacity 0.3s ease; }
.drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: var(--paper); border-left: 2px solid var(--ink); overflow-y: auto; transform: translateX(100%); transition: transform 0.4s var(--ease); padding: 26px clamp(18px, 4vw, 36px) calc(40px + var(--safe-b)); outline: none; }
.drawer.on { pointer-events: auto; }
.drawer.on .drawer-scrim { opacity: 1; }
.drawer.on .drawer-panel { transform: none; }
.drawer-x { position: sticky; top: 0; float: right; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--paper); font-size: 24px; line-height: 1; cursor: pointer; z-index: 2; }
.drawer-x:hover { background: var(--ink); color: var(--paper); }
.drawer-name { font-size: clamp(54px, 9vw, 92px); margin: 8px 0 12px; overflow-wrap: anywhere; }
.drawer-name::after { content: ''; display: block; width: 64px; height: 6px; background: var(--c, var(--ink)); margin-top: 12px; }
.drawer-h { margin: 26px 0 8px; }
.drawer-songs { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.drawer-songs li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.drawer-songs b { font: 400 19px/1.2 var(--font-serif); }
.drawer-songs span { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.drawer-ins { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.drawer-ins b { display: block; font: 400 20px/1.2 var(--font-serif); }
.drawer-ins span { font-size: 14px; color: var(--ink-2); }
.drawer-out { margin-top: 26px; }
body.drawer-open { overflow: hidden; }
@media (max-width: 640px) {
  .drawer-panel { top: 8vh; border-left: 0; border-top: 2px solid var(--ink); transform: translateY(100%); }
}

/* small charts */
.ch { display: block; width: 100%; height: auto; }
.ch-wrap .ch { height: auto; max-height: 220px; }
.ch-labels { display: flex; justify-content: space-between; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); margin-top: 4px; letter-spacing: 0.04em; }
.ch-labels .pk { color: var(--ink); }
.ch-marks { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 4px; font-size: 13.5px; color: var(--ink-2); }
.ch-marks b { font-family: var(--font-mono); font-weight: 500; font-size: 11.5px; color: var(--ink); margin-right: 6px; }
.ch-bars { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 7px; }
.ch-bars li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline; }
.ch-bars .r { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); text-align: right; }
.ch-bars .l b { font-weight: 600; font-size: 14.5px; }
.ch-bars .l em { display: block; font-style: normal; font-size: 12.5px; color: var(--ink-3); }
.ch-bars .v { font-family: var(--font-mono); font-size: 12px; }
.ch-bars .t { grid-column: 2 / -1; height: 5px; background: rgba(22, 19, 15, 0.06); }
.ch-bars .t i { display: block; height: 100%; }
.ch-clock { max-width: 260px; margin: 0 auto; }
.ch-week { list-style: none; padding: 0; margin: 8px 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.ch-week li { display: grid; gap: 4px; text-align: center; }
.ch-week .t { height: 80px; display: flex; align-items: flex-end; background: rgba(22, 19, 15, 0.04); }
.ch-week .t i { display: block; width: 100%; }
.ch-week b { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; }
.ch-week em { font-style: normal; font-size: 11px; color: var(--ink-3); }
.ch-cal { display: grid; grid-template-rows: repeat(7, 11px); grid-auto-flow: column; grid-auto-columns: 11px; gap: 2px; margin: 10px 0; overflow-x: auto; max-width: 100%; padding-bottom: 2px; }
.ch-cal i { width: 11px; height: 11px; display: block; border-radius: 2px; }
.ch-cal i.pad { background: transparent; }
.ch-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; margin: 8px 0; }
.ch-compare .big-num { display: block; font-size: clamp(40px, 5vw, 64px); }
.ch-compare .t { display: block; height: 6px; background: rgba(22, 19, 15, 0.06); margin-top: 8px; }
.ch-compare .t i { display: block; height: 100%; }
.ch-number .big-num { display: block; }

/* ======================= THE GUIDE ======================= */
.guide-l .g5 { padding: clamp(24px, 4vw, 48px) var(--gut) 0; }
.guide-l .g5-h { font-family: var(--font-sans); font-size: clamp(54px, 8.6vw, 120px); line-height: 0.86; margin: 14px 0 16px; letter-spacing: -0.012em; font-weight: 820; font-stretch: 62%; }
.guide-l .g5-lede { max-width: 40ch; }
.guide-l .g5-grid { margin-top: 34px; }
.guide-l .g5-steps { gap: 0; border-top: 2px solid var(--ink); }
.guide-l .g5-steps > li { border-radius: 0; background: transparent; border: 0; border-bottom: 1px solid var(--rule); padding: 18px 4px 18px 0; grid-template-columns: 46px 1fr; }
.guide-l .g5-steps > li.on { background: linear-gradient(90deg, rgba(30, 215, 96, 0.09), transparent 70%); border-color: var(--rule); }
.guide-l .g5-n { width: 34px; height: 34px; background: transparent; border: 1.5px solid var(--ink); font-family: var(--font-serif); font-size: 19px; }
.guide-l .g5-steps > li.on .g5-n { background: #1ed760; border-color: #1ed760; color: #06150b; }
.guide-l .g5-t { font-size: 18.5px; font-weight: 640; }
.guide-l .g5-sub { color: var(--ink-3); }
.guide-l #zone { border: 1.5px dashed var(--rule-strong); border-radius: 4px; background: var(--paper-2); }
.guide-l #zone:hover, .guide-l #zone.over { border-color: var(--signal); background: #f6e3d8; }
.guide-l #zone .vinyl { background: radial-gradient(circle, var(--paper) 0 4px, transparent 4.5px), conic-gradient(from 0deg, rgba(255,255,255,0.12), transparent 12%, rgba(255,255,255,0.08) 30%, transparent 45%, rgba(255,255,255,0.12) 62%, transparent 78%, rgba(255,255,255,0.08)), repeating-radial-gradient(circle, #24201b 0 1.2px, #16130F 1.2px 2.6px); box-shadow: 0 14px 30px -14px rgba(22, 19, 15, 0.6); }
.guide-l #zone .vinyl::after { background: var(--signal); }
.guide-l #zone .big { font-family: var(--font-serif); }
.guide-l #bar { background: var(--signal); }
.guide-l .ingest-note { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); }
.welcome-back { margin-top: 18px; padding: 14px 18px !important; background: var(--ink); color: var(--paper); font-family: var(--font-serif); font-size: 22px; }
.remind-l { display: grid; gap: 14px; margin-top: 14px; max-width: 30rem; }
.field-l { display: grid; gap: 6px; }
.field-l input, .guess-l input, .guess-l select { width: 100%; font: 400 17px var(--font-sans); padding: 12px 14px; border: 1.5px solid var(--rule-strong); border-radius: 3px; background: var(--paper); color: var(--ink); }
.field-l input:focus, .guess-l input:focus, .guess-l select:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgba(232, 67, 28, 0.18); }
.cadence-l { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.cadence-l legend { margin-bottom: 6px; }
.cadence-l label, .consent-l { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.4; cursor: pointer; }
.cadence-l em { font-style: normal; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); margin-left: 6px; }
.cadence-l input, .consent-l input { margin-top: 3px; accent-color: var(--signal); width: 16px; height: 16px; flex: 0 0 auto; }
.consent-l span { color: var(--ink-2); }
.sms-l { display: grid; gap: 10px; padding-top: 10px; border-top: 1px dashed var(--rule-strong); }
.wait-l { margin-top: clamp(64px, 9vw, 112px); }
.guess-l { display: grid; grid-template-columns: 1fr; gap: 14px 20px; }
.guess-l label { display: grid; gap: 6px; }
.guess-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.wait-more { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--rule); }
@media (min-width: 900px) {
  .guess-l { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .guess-actions { grid-column: 1 / -1; }
}

/* the sealed guesses, opened on the cover */
.guesses-l { margin-top: 28px; border: 2px solid var(--ink); padding: 18px 20px; background: var(--paper-2); }
.guesses-l h3 { font: 400 30px/1.05 var(--font-serif); margin: 4px 0 12px; }
.guesses-l ol { list-style: none; margin: 0; padding: 0; }
.guesses-l li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--rule); }
.guesses-l li b { font-weight: 640; }
.guesses-l li .v { font-family: var(--font-serif); font-size: 19px; grid-column: 1 / -1; }
.guesses-l li .v em { color: var(--signal-ink); }
.guesses-l li .mark { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; align-self: center; }
.guesses-l li.hit .mark { color: #0a7a3c; }
.guesses-l .score { font-family: var(--font-serif); font-size: 52px; line-height: 1; }

/* ======================= LEGACY PAGES ON PAPER ======================= */
/* the old navigation bar, set like the new masthead */
.liner .nav .mark, .liner .topbar .mark { font-family: var(--font-sans); font-stretch: 125%; font-weight: 800; letter-spacing: 0.1em; color: var(--ink); }
.liner .mark span { color: var(--signal); }
.liner .nav .links a { color: var(--ink-2); font-weight: 560; }
.liner .nav .links a:hover { color: var(--ink); }
/* buttons: no gradients, ink and red */
.liner .btn { border-color: var(--ink); color: var(--ink); background: transparent; box-shadow: none; }
.liner .btn:hover { background: rgba(22, 19, 15, 0.05); }
.liner .btn.amber, .liner .btn.hot, .liner .btn.solid { background: var(--signal-btn); border-color: var(--signal-btn); color: #fff; box-shadow: none; }
.liner .btn.amber:hover, .liner .btn.hot:hover, .liner .btn.solid:hover { background: var(--ink); border-color: var(--ink); }
.liner .btn.ghost { border-color: var(--rule-strong); }
.liner input, .liner select, .liner textarea { color: var(--ink); }
/* the archive (the previous portal) */
.liner.portal .topbar { background: rgba(243, 238, 229, 0.9); border-bottom: 1px solid var(--rule); }
.liner.portal .hero-aura { opacity: 0.35; filter: saturate(0.8); }
.liner .crop-bar { background: rgba(243, 238, 229, 0.94); border-color: var(--rule-strong); box-shadow: 0 18px 40px -22px rgba(22, 19, 15, 0.5); }
.liner .crop-bar .crop-mini b { color: var(--ink); }
.liner .box { background: var(--paper-2); }
.liner #modal { background: var(--paper); color: var(--ink); border: 2px solid var(--ink); }
.liner #modal-back { background: rgba(22, 19, 15, 0.4); }
.liner .tip { background: var(--ink); color: var(--paper); }
.liner .flow-name, .liner .flow-when { color: #fff; }
.liner .toast { background: var(--ink); color: var(--paper); }
/* no channel configured: the form is just the honest line */
#remind-form[data-email="off"][data-sms="off"] > *:not(#remind-status) { display: none; }
#remind-form[data-email="off"] .cadence-l, #remind-form[data-email="off"] > .field-l { display: none; }

/* ======================= THE GIFT MAKER ======================= */
.gifts.liner .wrap > .nav { display: none; }
.shop-hero-slim { padding-top: 10px !important; }
.gm-hero { padding: clamp(26px, 5vw, 64px) var(--gut) 10px; }
.gm-hero h1 { font-size: clamp(56px, 9.4vw, 136px); margin: 14px 0 18px; max-width: 12ch; }
.gm { display: grid; gap: 32px; margin-top: 28px; }
.gm-step { position: relative; padding: 20px 0 24px 52px; border-top: 2px solid var(--ink); }
.gm-step + .gm-step { border-top-width: 1px; border-top-color: var(--rule-strong); }
.gm-n { position: absolute; left: 0; top: 20px; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; font-family: var(--font-serif); font-size: 19px; }
.gm-step h2 { font: 640 21px/1.2 var(--font-sans); margin: 4px 0 14px; }
.gm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.gm-row-tight { display: flex; justify-content: space-between; align-items: center; margin: 10px 0 0; }
.gm-help { margin: -6px 0 10px; font-size: 12px; letter-spacing: 0.02em; }
.gm-help b { font-weight: 500; color: var(--ink); }
#gm-music { width: 100%; font: 400 17px/1.5 var(--font-sans); padding: 12px 14px; border: 1.5px solid var(--rule-strong); border-radius: 3px; background: var(--paper); color: var(--ink); resize: vertical; }
#gm-music:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgba(232, 67, 28, 0.18); }
.gm-playlist { margin-top: 16px; border-top: 1px dashed var(--rule-strong); padding-top: 12px; }
.gm-playlist summary { cursor: pointer; font-weight: 600; font-size: 15px; }
.gm-link { width: 100%; font: 400 15px var(--font-mono); padding: 10px 12px; border: 1.5px solid var(--rule-strong); border-radius: 3px; background: var(--paper); margin: 8px 0; }
.gm-embed iframe { border-radius: 12px; display: block; }
.gm-designs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gm-design { text-align: left; border: 1.5px solid var(--rule-strong); background: var(--paper-2); padding: 10px; cursor: pointer; display: grid; gap: 4px; border-radius: 2px; transition: border-color 0.15s ease, transform 0.2s var(--ease); color: var(--ink); }
.gm-design canvas { width: 100%; height: auto; display: block; background: #E3DCCD; margin-bottom: 6px; box-shadow: 0 8px 16px -10px rgba(22, 19, 15, 0.5); }
.gm-design b { font-size: 15px; font-weight: 680; }
.gm-design span { font-size: 13px; color: var(--ink-3); line-height: 1.35; }
.gm-design:hover { border-color: var(--ink); }
.gm-design.on { border-color: var(--signal); box-shadow: 0 0 0 2px var(--signal); }
.gm-styles { margin-top: 12px; }
.gm-preview { align-self: start; }
.gm-frame { padding: 4%; background: #fbf8f1; box-shadow: 0 34px 60px -34px rgba(22, 19, 15, 0.75), 0 0 0 1px rgba(22, 19, 15, 0.12); }
.gm-frame canvas { display: block; width: 100%; height: auto; }
.gm-actions { margin-top: 18px; }
.gm-preview .fine { margin-top: 10px; line-height: 1.6; }
.gm-ideas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.gm-idea { text-align: left; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); display: grid; gap: 4px; }
.gm-idea .gm-frame { transition: transform 0.35s var(--ease); margin-bottom: 10px; }
.gm-idea:hover .gm-frame { transform: translateY(-4px) rotate(-0.6deg); }
.gm-idea b { font: 400 26px/1.1 var(--font-serif); }
.gm-idea span { font-size: 14px; color: var(--ink-2); }
.gm-received { padding: clamp(26px, 5vw, 56px) var(--gut) 40px; border-bottom: 2px solid var(--ink); margin-bottom: 20px; }
.gm-received h1 { font-size: clamp(48px, 8vw, 110px); margin: 12px 0 24px; }
.gm-recv { display: grid; gap: 28px; align-items: start; }
@media (min-width: 980px) {
  .gm { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 52px; }
  .gm-preview { position: sticky; top: 76px; }
  .gm-ideas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gm-recv { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: 48px; }
}

/* ======================= CARD, PROFILE, COMPARE ======================= */
.dlg-l { border: 2px solid var(--ink); background: var(--paper); color: var(--ink); padding: 0; max-width: min(560px, calc(100vw - 24px)); width: 100%; border-radius: 4px; box-shadow: 0 40px 80px -30px rgba(22, 19, 15, 0.6); }
.dlg-l::backdrop { background: rgba(22, 19, 15, 0.45); }
.dlg-in { padding: 24px clamp(18px, 4vw, 30px) 26px; display: grid; gap: 14px; }
.dlg-in h2 { font-size: clamp(44px, 7vw, 68px); margin: 0; }
.dlg-in .drawer-x { position: absolute; top: 12px; right: 12px; float: none; }
.pf .cover-title { margin-top: 12px; }
.pf-two { display: grid; gap: 28px; align-items: start; }
.pf-bars li { padding: 2px 0; }
.pf-yrs { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); border-top: 2px solid var(--ink); }
.pf-yrs li { display: grid; padding: 14px 14px 14px 0; border-bottom: 1px solid var(--rule); }
.pf-yrs .display { font-size: 52px; line-height: 0.9; color: var(--signal); }
.pf-yrs b { font-weight: 400; font-size: 24px; line-height: 1.1; margin-top: 6px; }
.pf-yrs em { font-style: normal; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); }
.cmp { display: grid; gap: 26px; align-items: start; }
.cmp-score .big-num { display: block; font-size: clamp(96px, 16vw, 200px); line-height: 0.85; color: var(--signal); }
.cmp-score .fine { margin-top: 12px; max-width: 34ch; }
.cmp-parts { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--ink); }
.cmp-parts li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.cmp-parts b { font-size: 17px; font-weight: 680; }
.cmp-parts .serif { font-size: 32px; line-height: 1; }
.cmp-parts .t { grid-column: 1 / -1; height: 6px; background: rgba(22, 19, 15, 0.07); }
.cmp-parts .t i { display: block; height: 100%; background: var(--ink); }
.cmp-parts em { grid-column: 1 / -1; font-style: normal; font-size: 13.5px; color: var(--ink-2); }
.cmp-years { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.cmp-years li { display: grid; grid-template-columns: 54px 1fr 32px 1fr; gap: 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.cmp-years b { font: 400 19px/1.15 var(--font-serif); }
.cmp-years i { font-style: normal; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); text-align: center; }
.cmp-years li.same i { color: var(--signal); font-size: 16px; }
@media (min-width: 980px) {
  .pf-two { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 48px; }
  .cmp { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 48px; }
}
@media (max-width: 640px) {
  .tm-row { grid-template-columns: 20px minmax(0, 1.5fr) minmax(0, 1fr) 44px; gap: 8px; }
  .tm-row .nm { font-size: 15px; }
}

/* six stats in the drawer: always three across */
.liner-stats.small { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.liner-stats.small div, .liner-stats.small div:nth-child(odd), .liner-stats.small div:nth-child(even) { padding: 10px 10px 8px 0 !important; border-right: 0 !important; }
.liner-stats.small div:not(:nth-child(3n)) { border-right: 1px solid var(--rule) !important; }
.liner-stats.small div:not(:nth-child(3n+1)) { padding-left: 10px !important; }
.liner-stats.small dd { font-size: 24px; }

/* ---------- privacy and terms ---------- */
.legal { padding-top: clamp(40px, 7vw, 88px); }
.legal .display { font-size: clamp(56px, 9vw, 120px); margin: 14px 0 18px; }
.legal .lede { max-width: 34ch; margin-bottom: clamp(32px, 5vw, 56px); }
.legal-sec { max-width: 68ch; padding: 26px 0 6px; border-top: 1px solid var(--rule); }
.legal-sec h2 { font: 640 13px/1.3 var(--font-sans); font-stretch: 125%; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 12px; }
.legal-sec p, .legal-sec li { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.legal-sec p { margin: 0 0 14px; }
.legal-sec ul { margin: 0 0 14px; padding-left: 20px; }
.legal-sec li { margin: 0 0 8px; }
.legal-sec b { color: var(--ink); font-weight: 600; }
.legal a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.legal-contact { max-width: 68ch; padding-top: 26px; border-top: 2px solid var(--ink); font-size: 16px; }

/* ---------- fact cards: the homepage band and Your Rotation's weird stuff ---------- */
.facts-band { grid-column: 1 / -1; padding: clamp(18px, 3vw, 34px) 0 6px; }
.facts-label { margin: 0 0 14px; }
.facts, .th { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(12px, 1.6vw, 18px); }
@media (min-width: 700px) { .facts, .th { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .facts, .th { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fact { display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 18px; background: var(--paper-2); border: 1px solid var(--rule-strong); color: var(--ink); }
@media (min-width: 700px) { .fact { min-height: 300px; } }
.fact .cat { margin: 0; }
.fact .cat .dot { color: var(--signal); }
.fact-title { margin: 0; font-family: var(--font-sans); font-stretch: 62%; font-weight: 820; text-transform: uppercase; font-size: clamp(36px, 3.3vw, 50px); line-height: 0.92; letter-spacing: -0.005em; overflow-wrap: anywhere; }
.fact-title em { font-style: normal; color: var(--signal); }
.fact-big { margin: 0; font-family: var(--font-serif); font-size: clamp(64px, 7vw, 96px); line-height: 0.85; letter-spacing: -0.03em; color: var(--signal); }
.fact-chart { overflow: hidden; }
.fact .ch-marks { display: none; }
.fact .ch-wrap .ch { max-height: 110px; }
.fact .ch-cal { grid-template-rows: repeat(7, 7px); grid-auto-columns: 7px; gap: 1.5px; }
.fact .ch-cal i { width: 7px; height: 7px; border-radius: 1.5px; }
.fact .ch-compare .big-num { font-size: clamp(30px, 3vw, 40px); overflow-wrap: anywhere; }
.fact .aside { font-size: 19px; margin: 0; }
.receipt { margin-top: auto; padding-top: 6px; }
.receipt summary { cursor: pointer; list-style: none; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.receipt summary::-webkit-details-marker { display: none; }
.receipt summary::before { content: '+ '; color: var(--signal); }
.receipt[open] summary::before { content: '− '; }
.receipt p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.receipt .th-actions { margin-top: 12px; }
.fact.dark { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.fact.dark .cat, .fact.dark .receipt summary, .fact.dark .receipt p, .fact.dark .ch-labels { color: rgba(243, 238, 229, 0.66); }
.fact.dark .ch-labels .pk { color: var(--paper); }
.fact.dark .aside { color: #F79A75; }
.fact.dark .ch-compare .t { background: rgba(243, 238, 229, 0.12); }
.fact.dark .b { border-color: rgba(243, 238, 229, 0.5); color: var(--paper); }
.fact.wide { grid-column: 1 / -1; }
@media (min-width: 1040px) { .fact.wide { grid-column: span 2; } .fact.wide .fact-title { font-size: clamp(48px, 4.6vw, 72px); } }

/* ---------- the homepage, show first ---------- */
.h-wall { padding-top: clamp(8px, 2vw, 24px); }
.h-how { margin-top: clamp(64px, 9vw, 112px); }
.h-how .steps-l { list-style: none; margin: 0; padding: 0; }
.h-end { margin-top: 28px; }
.b.big { min-height: 60px; padding: 16px 30px; font-size: 18px; }


/* a section's legend: what the marks mean, in one mono line, instead of a paragraph */
.track .legend-l { grid-column: 1 / -1; margin: 0; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--ink-3); }
.night .track .legend-l { color: rgba(243, 238, 229, 0.62); }
.lc-detail .receipt { margin-top: 14px; }

/* ---------- shuffle: a random fact, then another ---------- */
.shuffle-band { background: var(--ink); color: var(--paper); margin-top: clamp(40px, 6vw, 72px); padding: clamp(36px, 6vw, 64px) 0; }
.shuffle-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: center; }
@media (min-width: 860px) { .shuffle-in { grid-template-columns: minmax(0, 1fr) auto; gap: 56px; } }
.sh-card { perspective: 900px; min-height: 9em; }
.sh-card.flip { animation: sh-in 0.5s var(--ease); }
@keyframes sh-in { from { opacity: 0; transform: translateY(16px) rotateX(-14deg); } to { opacity: 1; transform: none; } }
.sh-kind { color: rgba(243, 238, 229, 0.62); margin: 0; }
.sh-kind .dot { color: var(--signal); }
.sh-title { margin: 10px 0 14px; font-family: var(--font-sans); font-stretch: 62%; font-weight: 820; text-transform: uppercase; font-size: clamp(44px, 6.2vw, 92px); line-height: 0.9; letter-spacing: -0.005em; max-width: 17ch; overflow-wrap: anywhere; }
.sh-title em { font-style: normal; color: var(--signal); }
.sh-fact { margin: 0; font-family: var(--font-serif); font-size: clamp(19px, 1.8vw, 24px); line-height: 1.3; color: rgba(243, 238, 229, 0.74); max-width: 52ch; }
.sh-btn { display: grid; justify-items: center; gap: 12px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--paper); justify-self: center; -webkit-tap-highlight-color: transparent; }
.sh-disc { grid-area: 1 / 1; width: clamp(150px, 15vw, 196px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #16130F 0 3%, var(--signal) 3.5% 33%, transparent 33.5%), repeating-radial-gradient(circle, #2b2621 0 1.5px, #191613 1.5px 5px);
  box-shadow: 0 0 0 1px rgba(243, 238, 229, 0.14), 0 24px 44px -22px rgba(0, 0, 0, 0.7); transition: transform 0.5s var(--ease); }
.sh-label { grid-area: 1 / 1; align-self: center; margin-top: 30%; font: 800 12px/1 var(--font-sans); font-stretch: 125%; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; pointer-events: none; }
.sh-n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: rgba(243, 238, 229, 0.6); }
.sh-btn:hover .sh-disc { transform: rotate(40deg); }
.sh-btn:focus-visible .sh-disc { outline: 3px solid var(--signal); outline-offset: 4px; }
.sh-btn.spin .sh-disc { animation: spin 0.7s var(--ease); }

/* ---------- on tour ---------- */
.tour-l { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 900px) { .tour-l { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 44px; align-items: start; } }
.tour-poster canvas { display: block; width: 100%; height: auto; box-shadow: 0 34px 60px -34px rgba(22, 19, 15, 0.6); }
.tour-acts { list-style: none; padding: 0; margin: 0 0 22px; border-top: 2px solid var(--ink); }
.tour-acts button { width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 2px 10px; text-align: left; padding: 12px 6px; border: 0; border-bottom: 1px solid var(--rule); background: none; cursor: pointer; color: var(--ink); transition: background 0.2s ease; }
.tour-acts button:hover { background: var(--paper-2); }
.tour-acts .r { grid-row: span 2; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); padding-top: 7px; }
.tour-acts b { font-family: var(--font-sans); font-stretch: 62%; font-weight: 820; text-transform: uppercase; font-size: 28px; line-height: 1; }
.tour-acts em { font-family: var(--font-serif); font-size: 16px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tour-acts button.on b { color: var(--signal); }
@media (max-width: 899px) {
  .tour-acts { display: flex; gap: 8px; overflow-x: auto; border-top: 0; padding-bottom: 6px; scroll-snap-type: x proximity; }
  .tour-acts li { flex: 0 0 auto; scroll-snap-align: start; }
  .tour-acts button { display: flex; gap: 8px; align-items: baseline; padding: 9px 14px; border: 1px solid var(--rule-strong); border-radius: 999px; }
  .tour-acts .r { padding: 0; }
  .tour-acts b { font-size: 19px; }
  .tour-acts em { display: none; }
  .tour-acts button.on { background: var(--ink); border-color: var(--ink); }
  .tour-acts button.on b { color: var(--paper); }
  .tour-acts button.on .r { color: rgba(243, 238, 229, 0.6); }
}

/* ---------- every day ---------- */
.ev-stats { grid-template-columns: minmax(0, 1fr) !important; }
@media (min-width: 700px) { .ev-stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
.ev-stats div, .ev-stats div:nth-child(odd), .ev-stats div:nth-child(even) { padding: 12px 14px 10px 0; border-right: 0; }
@media (min-width: 700px) { .ev-stats div + div { padding-left: 14px !important; border-left: 1px solid var(--rule); } }
.liner-stats dd.sub { font-family: var(--font-sans); font-size: 13.5px; line-height: 1.4; color: var(--ink-3); margin-top: 6px; }
.ev-modes, .wv-modes { margin: 22px 0 16px; }
.ev { position: relative; }
.ev-grid { display: grid; gap: 14px; }
@media (min-width: 1100px) { .ev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 36px; } .ev-year { grid-template-columns: 56px minmax(0, 1fr); } }
.ev-year { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 12px; align-items: start; }
.ev-y { margin: 4px 0 0; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); }
.ev-y b { display: block; font-family: var(--font-sans); font-stretch: 62%; font-weight: 820; font-size: 24px; line-height: 1; color: var(--ink); }
@media (max-width: 600px) {
  .ev-year { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ev-y { display: flex; gap: 10px; align-items: baseline; }
  .ev-y b { display: inline; font-size: 20px; }
}
.ev svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.ev-m text { font: 500 9px var(--font-mono); fill: var(--ink-3); }
.ev rect.on { stroke: var(--ink); stroke-width: 1.5; }
.ev-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 16px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.ev-legend .ramp { display: inline-flex; gap: 3px; }
.ev-legend .ramp i { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }
.ev-legend .ev-key { display: inline-flex; gap: 6px; align-items: center; font-family: var(--font-sans); font-size: 13px; color: var(--ink-2); }
.ev-legend .ev-key i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* ---------- the wave ---------- */
.wv { position: relative; }
.wv-plot svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.wv-layers [data-k] { transition: opacity 0.25s ease; }
.wv-lab { font-family: var(--font-sans); font-weight: 760; font-stretch: 88%; fill: #121110; letter-spacing: -0.01em; pointer-events: none; }
.wv-yr { font: 500 10.5px var(--font-mono); fill: rgba(243, 238, 229, 0.55); }
.wv-guide { stroke: rgba(243, 238, 229, 0.75); stroke-width: 1; stroke-dasharray: 2 3; pointer-events: none; }
.wv-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.wv-legend .wv-key { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--rule-strong); border-radius: 999px; background: none; font-family: var(--font-sans); font-size: 13px; color: var(--ink); cursor: pointer; }
.wv-legend .wv-key i { width: 10px; height: 10px; border-radius: 50%; }
.wv-legend .wv-key.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.vz-tip .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }

/* ---------- the homepage hero: three tour posters, fanned ---------- */
.h-tours { position: relative; display: block; width: 100%; max-width: 600px; aspect-ratio: 1 / 1.02; margin: 0 auto; color: inherit; text-decoration: none; }
.h-tours canvas { position: absolute; left: 50%; top: 47%; width: 60%; height: auto; transform-origin: 50% 90%; box-shadow: 0 28px 50px -26px rgba(22, 19, 15, 0.65); opacity: 0; transition: transform 0.6s var(--ease), opacity 0.7s ease; }
.h-tours canvas.on { opacity: 1; }
.h-tours [data-tour="0"] { z-index: 3; transform: translate(-50%, -50%) rotate(-1deg); }
.h-tours [data-tour="1"] { z-index: 2; transform: translate(-82%, -51%) rotate(-9deg); }
.h-tours [data-tour="2"] { z-index: 1; transform: translate(-18%, -51%) rotate(8deg); }
.h-tours:hover [data-tour="0"], .h-tours:focus-visible [data-tour="0"] { transform: translate(-50%, -53%) rotate(0deg) scale(1.02); }
.h-tours:hover [data-tour="1"], .h-tours:focus-visible [data-tour="1"] { transform: translate(-96%, -50%) rotate(-13deg); }
.h-tours:hover [data-tour="2"], .h-tours:focus-visible [data-tour="2"] { transform: translate(-4%, -50%) rotate(12deg); }
.h-tours-cap { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; }
@media (prefers-reduced-motion: reduce) { .h-tours canvas { transition: none; } }
.h-shuffle { margin-top: clamp(8px, 2vw, 24px); }
.wave-plate .cat, .ev-plate .cat { margin-bottom: 14px; }
.fp-plate .fp-wrap { margin: 6px 0 14px; }
@media (max-width: 600px) {
  .h-tours { aspect-ratio: 1 / 1.08; }
  .h-tours canvas { width: 56%; }
  .h-tours [data-tour="1"] { transform: translate(-76%, -51%) rotate(-7deg); }
  .h-tours [data-tour="2"] { transform: translate(-24%, -51%) rotate(7deg); }
}

/* the wave lives on a dark band: the streams glow, the chrome steps back */
.night .wv-legend .wv-key { border-color: rgba(243, 238, 229, 0.28); color: var(--night-ink); }
.night .wv-legend .wv-key:hover { border-color: var(--night-ink); }
.night .wv-legend .wv-key.on { background: var(--night-ink); border-color: var(--night-ink); color: #121110; }
.night .chip.on { background: var(--night-ink); color: #121110; border-color: var(--night-ink); }
.night.side-b .side-mark, .night .side-mark { border-color: var(--night-ink); color: var(--night-ink); }
.wave-plate .cat { color: rgba(243, 238, 229, 0.6); }
.wave-plate .cat b { color: var(--night-ink); }