/* CantStop ID application styles. Tokens and rules: design.md, "CantStop ID: project direction". */

@font-face { font-family: 'DM Sans'; src: url('/fonts/dm-sans-latin.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('/fonts/space-grotesk-latin.woff2') format('woff2'); font-weight: 500 700; font-display: swap; }

:root {
  --void: #08090c;
  --void-surface: #111319;
  --ink: #f6f4ed;
  --muted: #b4b6bd;
  --void-line: rgba(255, 255, 255, .14);
  --paper: #f2efe7;
  --paper-surface: #ffffff;
  --paper-ink: #111217;
  --paper-muted: #5d5f65;
  --paper-line: rgba(17, 18, 23, .14);
  --plus: #ece94a;
  --plus-hover: #f4f27a;
  --danger-void: #ff3b30;
  --danger-paper: #c0261d;
  --good-paper: #1f8a4c;
  --warn-paper: #9a6a00;

  --display: 'Space Grotesk', system-ui, sans-serif;
  --text: 'DM Sans', system-ui, sans-serif;
  --technical: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  --radius-control: 6px;
  --radius-surface: 10px;
  --radius-card: 14px;
  --gutter: clamp(1rem, 5vw, 4rem);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body { margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; font: 400 1.0625rem/1.55 var(--text); }
main { flex: 1 0 auto; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2 { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
h1 { font-size: clamp(1.75rem, 3vw, 2.25rem); margin: 0 0 1rem; }
h2 { font-size: 1.25rem; margin: 2.5rem 0 .75rem; }
code { font-family: var(--technical); font-size: .9375em; }
.frame { width: min(64rem, 100% - 2 * var(--gutter)); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; padding: .5rem .75rem; background: var(--plus); color: var(--void); border-radius: var(--radius-control); z-index: 10; }
.skip:focus { top: 1rem; }

/* Modes */
.mode-front { background: var(--void); color: var(--ink); --line: var(--void-line); --muted-text: var(--muted); --focus: var(--plus); --danger: var(--danger-void); }
.mode-desk { background: var(--paper); color: var(--paper-ink); --line: var(--paper-line); --muted-text: var(--paper-muted); --focus: var(--paper-ink); --danger: var(--danger-paper); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

/* Top bar: the CS mark, the site name, the section navigation, and who's signed in. It sits on the
   same void as the desk title band below it, so the page reads as one dark masthead, then paper. */
.topbar { background: var(--void); color: var(--ink); --focus: var(--plus); --muted-text: var(--muted); }
.topbar-inner { display: flex; align-items: center; gap: .5rem 2rem; min-height: 4.25rem; flex-wrap: wrap; padding-top: .75rem; }
.wordmark { display: inline-flex; align-items: center; gap: .625rem; font: 700 1.1875rem/1 var(--display); letter-spacing: -.02em; text-decoration: none; margin-right: auto; }
.wordmark-mark { display: block; width: 28px; height: 28px; }
.wordmark-tld { color: var(--plus); }
.topbar-account { display: flex; align-items: center; gap: 1rem; margin: 0; color: var(--muted); font-size: .9375rem; }
.sections { display: flex; gap: .25rem 1.5rem; font-size: .9375rem; font-weight: 500; order: 3; flex-basis: 100%; overflow-x: auto; scrollbar-width: none; padding-bottom: .25rem; }
.sections a { position: relative; flex: none; padding-block: .625rem; color: var(--muted); text-decoration: none; }
.sections a:hover { color: var(--ink); }
/* Yellow marks the current section: a selected state, the one place it appears in the bar. */
.sections a[aria-current="page"] { color: var(--ink); }
.sections a[aria-current="page"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: .125rem; height: 3px; border-radius: 2px; background: var(--plus); }
@media (min-width: 56rem) {
  .sections { order: 0; flex-basis: auto; padding-bottom: 0; }
  .topbar-inner { flex-wrap: nowrap; padding-top: 0; }
}
@media (max-width: 30rem) { .topbar-name { display: none; } }

main.frame { padding-block: clamp(2.5rem, 7vw, 5rem); }
.mode-desk main.frame { padding-top: 0; }

/* Desk title band: void continues from the top bar under the page title, then the page turns to
   paper (a chapter change, as on sethcantstop.com). The band is full-bleed; its text stays on the frame. */
.desk-head { position: relative; isolation: isolate; color: var(--ink); --muted-text: var(--muted); --focus: var(--plus); --line: var(--void-line);
  padding-block: clamp(1.75rem, 4vw, 2.75rem) clamp(2rem, 4.5vw, 3rem); margin-bottom: clamp(2rem, 4vw, 2.75rem); }
.desk-head::before { content: ''; position: absolute; z-index: -1; inset: 0 -100vw; background: var(--void); }
.desk-head h1 { font-size: clamp(2.125rem, 4.5vw, 3.25rem); letter-spacing: -.03em; margin: 0; }
.desk-head .crumb { margin-bottom: .75rem; }
.desk-meta { margin: .75rem 0 0; color: var(--muted); font: .875rem/1.5 var(--technical); font-variant-numeric: tabular-nums; }
.desk-head.title-row { align-items: flex-end; margin-bottom: clamp(2rem, 4vw, 2.75rem); }
.desk-head .button-secondary:hover { background: rgba(246, 244, 237, .08); }

/* Front: one centred task */
.panel { max-width: 26rem; }
.panel p { color: var(--muted-text); }
.aside { margin-top: 2rem; color: var(--muted-text); font-size: .9375rem; }

/* Desk: working pages */
.desk-page { max-width: 44rem; }
.lede { color: var(--muted-text); max-width: 60ch; margin: 0 0 1.5rem; }

/* Forms */
.form { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
.field { display: grid; gap: .375rem; }
.field label { font-weight: 500; }
input[type="email"], input[type="password"], input[type="text"], input[type="date"], select, textarea {
  width: 100%; min-height: 48px; padding: .625rem .875rem; border-radius: var(--radius-control);
  font: inherit; color: var(--paper-ink); background: var(--paper-surface);
  border: 1px solid var(--line);
}
.mode-front input { border-color: transparent; }
.input-code { font-family: var(--technical); letter-spacing: .12em; max-width: 14rem; }
.password { position: relative; }
.password input { padding-right: 4.75rem; }
.reveal {
  position: absolute; right: .375rem; top: 50%; transform: translateY(-50%); min-height: 36px; padding: 0 .75rem;
  border: 0; border-radius: var(--radius-control); background: transparent; color: var(--paper-muted); font: 500 .875rem/1 var(--text); cursor: pointer;
}
.reveal:focus-visible { outline-color: var(--paper-ink); }

/* Wider front panel for sign-up */
.panel-wide { max-width: 32rem; }
.hint { margin: 0; font-size: .9375rem; color: var(--muted-text); }
.field-error { margin: .25rem 0 0; font-size: .9375rem; color: var(--danger); }
.field-error::before { content: '⚠︎ '; }
.label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.label-row a { font-size: .9375rem; color: var(--muted-text); }
.plain { font-weight: 600; color: inherit; }
.optional { font-weight: 400; color: var(--muted-text); }
input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }

/* Checkboxes: the whole row is the target */
.check { display: flex; align-items: flex-start; gap: .75rem; min-height: 44px; padding-block: .5rem; cursor: pointer; }
.check input { width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; flex: none; accent-color: var(--plus); }
.mode-desk .check input { accent-color: var(--paper-ink); }
.choices { border: 0; padding: 0; margin: 0; display: grid; gap: .125rem; }
.choices legend { font-weight: 500; padding: 0; margin-bottom: .25rem; }

/* The archive note sits directly above the sign-up button in ordinary body text */
.archive-note { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.archive-note p { margin: 0 0 .75rem; color: var(--muted-text); font-size: .9375rem; }

/* Honeypot field: off-screen for people, visible to bots */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Buttons */
.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .75rem 1.25rem;
  border: 0; border-radius: var(--radius-control); background: var(--plus); color: var(--void);
  font: 600 1rem/1.2 var(--text); text-decoration: none; cursor: pointer; justify-self: start;
}
.button:hover { background: var(--plus-hover); }
.button-secondary { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
.button-secondary:hover { background: rgba(17, 18, 23, .06); }
.link-button { border: 0; padding: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

.button-danger { background: var(--danger-paper); color: #fff; }
.button-danger:hover { background: #a11f17; }

/* Settings: sections separated by rules, not cards */
.crumb { margin: 0 0 .5rem; font-size: .9375rem; color: var(--muted-text); }
.setting { border-top: 1px solid var(--paper-ink); padding-block: 1.5rem 2rem; }
.setting h2 { margin-top: 0; }
.setting > p { color: var(--muted-text); margin: 0 0 .5rem; max-width: 60ch; }
.setting > p strong { color: var(--paper-ink); }
.setting .form { margin-top: 1rem; max-width: 28rem; }
.setting-danger h2 { color: var(--danger-paper); }

/* Messages and status chips: always words, never color alone */
.message { margin: 1rem 0 0; padding: .75rem 1rem; border-radius: var(--radius-control); border: 1px solid var(--line); }
.mode-front .message { color: var(--ink); }
.desk-page > .message { margin: 0 0 1.5rem; }
.message-error { border-color: var(--danger); }
.message-error::before { content: '⚠︎ '; }
.chip { display: inline-block; padding: .125rem .625rem; border-radius: 999px; font-size: .875rem; font-weight: 500; border: 1px solid currentColor; }
.chip-good { color: var(--good-paper); }
.chip-warn { color: var(--warn-paper); }

/* Ledgers: rows, not cards */
.ledger { margin: 0; border-top: 1px solid var(--paper-ink); }
.ledger > div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .875rem; border-bottom: 1px solid var(--line); }
.ledger dt { color: var(--muted-text); }
.ledger dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 500; }
.ledger-list { list-style: none; padding: 0; }
.ledger-list > li { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .25rem 1rem; padding-block: .875rem; border-bottom: 1px solid var(--line); }
.ledger-meta { color: var(--muted-text); font-size: .9375rem; }
.ledger-links a { font-weight: 600; }

/* Two-factor setup */
.steps { list-style: none; padding: 0; margin: 2rem 0 0; counter-reset: step; }
.steps > li { counter-increment: step; padding-block: 1.5rem; border-top: 1px solid var(--line); }
.steps h2 { margin-top: 0; }
.steps h2::before { content: counter(step) '. '; }
.qr { display: block; width: 220px; height: 220px; border-radius: var(--radius-surface); background: #fff; }
.secret { display: inline-block; padding: .375rem .625rem; background: var(--paper-surface); border: 1px solid var(--line); border-radius: var(--radius-control); word-break: break-all; }
.codes { list-style: none; padding: 1.25rem; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .5rem 1.5rem; background: var(--paper-surface); border: 1px solid var(--line); border-radius: var(--radius-surface); }
.codes code { font-size: 1rem; }

/* The member card: the one card on an account screen, sized and laid out like a physical ID
   (credit-card proportions on wide screens), sitting in the void title band. */
.desk-head-card { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2rem, 5vw, 3.5rem); }
.member-card {
  position: relative; overflow: hidden; background: var(--void-surface); color: var(--ink); border: 1px solid var(--void-line);
  border-radius: var(--radius-card); padding: clamp(1.25rem, 4vw, 2rem); max-width: 34rem; aspect-ratio: 1.586;
  display: flex; flex-direction: column; box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
/* A thin yellow edge on the left: the card's one accent, like the stripe on a lanyard pass. */
.member-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--plus); }
.member-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.member-card-mark { width: clamp(6.5rem, 22vw, 9rem); height: auto; display: block; }
.member-card-id { margin: 0; text-align: right; font: .8125rem/1.4 var(--technical); letter-spacing: .06em; color: var(--ink); }
.member-card-id span { display: block; color: var(--muted); letter-spacing: 0; font-family: var(--text); }
.member-card-name { font: 700 clamp(1.5rem, 4vw, 2rem)/1.1 var(--display); letter-spacing: -.02em; margin: auto 0 1rem; padding-top: 1.25rem; }
.member-card dl { margin: 0; display: grid; grid-template-columns: repeat(3, auto); gap: .75rem 1.5rem; justify-content: start; border-top: 1px solid var(--void-line); padding-top: .875rem; }
.member-card dt { color: var(--muted); font-size: .8125rem; }
.member-card dd { margin: 0; font-weight: 500; }
.member-card a { color: var(--plus); }
@media (max-width: 34rem) {
  .member-card { aspect-ratio: auto; }
  .member-card dl { grid-template-columns: 1fr 1fr; }
}
.ledger-directory { max-width: 44rem; }

/* Footer: quiet, on paper or void to match the page */
.footer { border-top: 1px solid var(--line); color: var(--muted-text); font-size: .875rem; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding-block: 1.5rem 2rem; }

.debug { white-space: pre-wrap; font: .8125rem/1.5 var(--technical); color: var(--muted); overflow-x: auto; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Orders: technical values (numbers, dates, amounts) use the monospace role with tabular figures. */
.technical { font-family: var(--technical); font-size: .875rem; font-variant-numeric: tabular-nums; }
.filters { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0 0 1.5rem; }
.filters a { padding-block: .25rem; }
.filters a[aria-current="page"] { font-weight: 600; text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 2px; }
.ledger-orders > li > span:first-child { display: flex; flex-direction: column; gap: .125rem; flex: 1 1 18rem; }
.address { font-style: normal; line-height: 1.6; margin: 0 0 1.5rem; }
h1 .technical { font-size: 1em; font-weight: 600; }

/* Order desk and support */
.desk-page-wide { max-width: 56rem; }
.title-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 1rem; margin-bottom: 1rem; }
.title-row h1 { margin: 0; }
.filters-quiet { font-size: .9375rem; margin-top: -.75rem; }
.filters-quiet a { color: var(--muted-text); }
.filters-quiet a[aria-current="page"] { color: inherit; }
textarea { min-height: 6rem; line-height: 1.5; resize: vertical; }
select { appearance: auto; }
.input-amount { max-width: 12rem; font-variant-numeric: tabular-nums; }
.input-html { min-height: 22rem; font-family: var(--technical); font-size: .875rem; line-height: 1.5; tab-size: 2; }
.prose ul { padding-left: 1.25rem; max-width: 62ch; }
.prose li { margin-bottom: .5rem; }
.prose p { max-width: 62ch; }

/* Disclosure for rarely used, consequential actions (disconnect Twitch) */
.disclosure { margin-top: 1rem; }
.disclosure summary { cursor: pointer; color: var(--muted-text); padding-block: .5rem; }
.disclosure[open] summary { color: inherit; }

/* Ledgers with columns (what · when · amount · status) line up from row to row on wider screens;
   on phones each row is a stacked record with the status still visible. */
@media (min-width: 40rem) {
  .ledger-table > li { display: grid; grid-template-columns: minmax(0, 1fr) 8.5rem 6.5rem 8rem; align-items: center; gap: .25rem 1rem; }
  .ledger-table-wide > li { grid-template-columns: minmax(0, 1fr) 14rem 6.5rem 8rem; }
  .ledger-table-3 > li { grid-template-columns: minmax(0, 1fr) 12rem 9rem; }
  .ledger-table > li > :nth-last-child(2) { text-align: right; }
  .ledger-table > li > :last-child { justify-self: end; }
}

/* Front pages with a task (support, sign-in, join): the statement on the left, one panel on the right.
   On the support page The panel switches
   between monthly and once with CSS alone (:has); without :has both forms simply show. */
.front-split { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 58rem) { .front-split { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); gap: 4rem; } }
.front-intro h1 { font-size: clamp(2.75rem, 6vw, 4.5rem); letter-spacing: -.035em; line-height: .98; margin-bottom: 1.5rem; }
.front-intro p { color: var(--muted); max-width: 34ch; font-size: 1.1875rem; margin: 0 0 1.25rem; }
.front-intro .support-free { font-size: 1rem; }
.surface { background: var(--void-surface); border: 1px solid var(--void-line); border-radius: var(--radius-surface); padding: clamp(1.25rem, 3vw, 1.75rem); }
.surface .form { margin-top: 1.25rem; }
.surface > .form:first-child, .surface > .message + .form { margin-top: 0; }
.front-intro .front-mark { width: clamp(9rem, 24vw, 13rem); height: auto; display: block; margin-bottom: 2rem; }
.surface .aside { margin-top: 1.5rem; font-size: .875rem; }
.support-option + .support-option { margin-top: 2rem; }
.surface:has(#frequency-monthly:checked) .support-once,
.surface:has(#frequency-once:checked) .support-monthly { display: none; }
.surface:has(.segmented) .support-option + .support-option { margin-top: 0; }
@supports not selector(:has(*)) { .segmented { display: none; } }

.segmented { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--void-line); border-radius: var(--radius-control); padding: 3px; margin: 0; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 4px; font-weight: 600; cursor: pointer; color: var(--muted); }
.segmented input:checked + label { background: var(--ink); color: var(--void); }
.segmented input:focus-visible + label { outline: 3px solid var(--plus); outline-offset: 2px; }

/* Selectable price rows: the whole row is the control; the chosen one gets the yellow edge. */
.options { border: 0; padding: 0; margin: 0; display: grid; gap: .5rem; }
.options-grid { grid-template-columns: 1fr 1fr; }
.option { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .125rem 1rem; padding: .875rem 1rem;
  border: 1px solid var(--void-line); border-radius: var(--radius-control); cursor: pointer; transition: border-color .15s; }
.option:hover { border-color: rgba(255, 255, 255, .32); }
.option input { position: absolute; opacity: 0; pointer-events: none; }
.option:has(input:checked) { border-color: var(--plus); box-shadow: inset 0 0 0 1px var(--plus); }
.option:has(input:focus-visible) { outline: 3px solid var(--plus); outline-offset: 2px; }
.option-name { font-weight: 600; }
.option-price { font: 700 1.375rem/1.1 var(--display); letter-spacing: -.02em; text-align: right; }
.option-price small { font: 400 .875rem var(--text); color: var(--muted); letter-spacing: 0; }
.option-detail { grid-column: 1 / -1; color: var(--muted); font-size: .875rem; }
.options-grid .option { grid-template-columns: 1fr; }
.options-grid .option-price { text-align: left; }
.option-other { grid-column: 1 / -1; }
.option-other .option-detail { grid-column: auto; text-align: right; }
@supports not selector(:has(*)) { .option input { position: static; opacity: 1; pointer-events: auto; } }
.support-once:has([data-other-amount]:not(:checked)):not(:has([aria-invalid="true"])) .field-other { display: none; }
/* The band already closes the masthead; the first section under it doesn't need its own rule. */
.desk-head + .setting, .desk-head + .message + .setting { border-top: 0; padding-top: 0; }
.desk-head + .setting h2, .desk-head + .message + .setting h2 { margin-top: 0; }

/* Admin figures: three real numbers at architecture scale, each linking to where it's managed. */
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0; margin: 0 0 .75rem; border-top: 1px solid var(--paper-ink); }
.figures > div { padding: 1rem 1.25rem 1.25rem 0; border-bottom: 1px solid var(--line); }
.figures dt { font-size: .9375rem; }
.figures dt a { color: var(--muted-text); }
.figures dd { margin: .25rem 0 0; font: 700 clamp(2.5rem, 6vw, 4rem)/1 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Brand pass (September 30, 2026): the landing page's system carried into the app.
   Archivo italic for display, the CantStop+ logo in the bar, the logo's 12° slant on
   primary buttons, and real artwork beside front-page forms.
   ========================================================================== */
@font-face { font-family: 'Archivo'; src: url('/fonts/archivo-latin.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('/fonts/archivo-italic-latin.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-style: italic; font-display: swap; }
:root { --display: 'Archivo', 'Arial Black', system-ui, sans-serif; --slant: -12deg; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

h1 { font-family: var(--display); font-style: italic; font-weight: 900; font-stretch: 116%; text-transform: uppercase; letter-spacing: -.01em; line-height: .95; }
h2 { font-family: var(--display); font-weight: 800; font-stretch: 106%; letter-spacing: -.01em; }
.front-intro h1 { font-size: clamp(2.5rem, 5.4vw, 4.25rem); letter-spacing: -.01em; line-height: .92; }
.desk-head h1 { font-size: clamp(2rem, 4.2vw, 3.25rem); letter-spacing: -.01em; }
.member-card-name { font-family: var(--display); font-style: italic; font-weight: 900; font-stretch: 112%; text-transform: uppercase; letter-spacing: 0; }

/* Bar */
.topbar { position: relative; z-index: 5; }
.topbar-inner { min-height: 4.5rem; }
.wordmark { margin-right: auto; }
.wordmark-logo { display: block; width: auto; height: 2.25rem; aspect-ratio: 732 / 318; fill: var(--plus); }
.topbar-visitor { display: flex; align-items: center; gap: 1.25rem; font-size: .9375rem; color: var(--muted); }
.topbar-visitor a:not(.button) { color: var(--ink); font-weight: 600; text-decoration: none; }
.topbar-visitor a:not(.button):hover { text-decoration: underline; text-underline-offset: 3px; }
.topbar-visitor span + a { margin-left: -.75rem; }

/* Buttons: the fill is a skewed layer behind the label, so the words stay upright. */
.button {
  position: relative; isolation: isolate; background: none; border-radius: 0; box-shadow: none;
  font: italic 800 1rem/1.1 var(--display); font-stretch: 110%; letter-spacing: .02em; text-transform: uppercase;
  padding-inline: 1.5rem; transition: color .15s;
}
.button::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 5px; transform: skewX(var(--slant)); background: var(--plus); transition: background-color .15s, transform .15s; }
.button:hover { background: none; }
.button:hover::before { background: var(--plus-hover); }
.button:active::before { transform: skewX(var(--slant)) scale(.97); }
.button-secondary { background: none; box-shadow: none; }
.button-secondary::before { background: transparent; box-shadow: inset 0 0 0 2px currentColor; }
.button-secondary:hover { background: none; }
.button-secondary:hover::before { background: rgba(17, 18, 23, .07); }
.mode-front .button-secondary:hover::before, .desk-head .button-secondary:hover::before { background: rgba(246, 244, 237, .1); }
.desk-head .button-secondary:hover { background: none; }
.button-danger { color: #fff; }
.button-danger::before { background: var(--danger-paper); }
.button-danger:hover::before { background: #a11f17; }
.button-small { min-height: 2.5rem; padding: .5rem 1.1rem; font-size: .875rem; }
.button:focus-visible { outline-offset: 5px; }

/* Front pages: a strip of real artwork under the intro. */
.front-intro { position: relative; }
.front-art { position: relative; margin-top: 2.5rem; height: clamp(14rem, 26vw, 20rem); overflow: hidden; border-radius: 12px;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
.front-art-plane { position: absolute; left: 50%; top: 50%; display: grid; grid-template-columns: repeat(5, 8.5rem); gap: .75rem; transform: translate(-50%, -48%) rotate(-10deg); }
.front-art img { width: 8.5rem; height: 8.5rem; object-fit: cover; border-radius: 6px; filter: brightness(.8) saturate(.9); }
.front-art-photo { margin-top: 2.5rem; border-radius: 12px; overflow: hidden; max-width: 30rem; }
.front-art-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; filter: brightness(.85); }
@media (max-width: 57.99rem) { .front-art, .front-art-photo { display: none; } }
@media (min-width: 58rem) { .front-split { padding-top: 1rem; } }

/* Footer */
.footer-inner { align-items: flex-start; padding-block: 2.5rem 2.5rem; gap: 1.5rem 3rem; }
.footer-logo { display: block; width: 5.5rem; height: auto; aspect-ratio: 732 / 318; fill: var(--plus); }
.mode-desk .footer-logo { fill: var(--paper-ink); }
.footer-brand p { margin: .75rem 0 0; }
.footer-links { display: grid; grid-template-columns: repeat(2, auto); gap: .4rem 2.5rem; }
.footer-links a { color: inherit; text-decoration: none; }
.footer-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.mode-desk .footer-links a:hover { color: var(--paper-ink); }
@media (max-width: 34rem) { .footer-links { grid-template-columns: 1fr; } }
.front-art-photo { margin-inline: 0; }

/* Network strip (matches the landing page) and the bar's section links in the display face. */
.netbar { background: #000; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: .8125rem; color: #7d808a; }
.netbar-inner { display: flex; align-items: center; gap: 1.5rem; min-height: 2.25rem; }
.netbar-label { font: italic 800 .6875rem/1 var(--display); font-stretch: 112%; letter-spacing: .14em; text-transform: uppercase; color: var(--plus); white-space: nowrap; }
.netbar nav { display: flex; gap: 1.25rem; overflow-x: auto; scrollbar-width: none; }
.netbar nav a { color: var(--muted); text-decoration: none; white-space: nowrap; }
.netbar nav a:hover { color: var(--ink); }
@media (max-width: 40rem) { .netbar-label { display: none; } }
.sections a { font: italic 800 .8125rem/1 var(--display); font-stretch: 112%; letter-spacing: .1em; text-transform: uppercase; padding-block: .9rem; }
.sections a[aria-current="page"]::after { transform: skewX(var(--slant)); border-radius: 0; }

/* ==========================================================================
   Account pass (September 30, 2026): a real dashboard, two-column settings rows,
   white panels on paper, the level meter, and episode art in the title band.
   Member pages opt in with .acct; admin pages keep the plain desk.
   ========================================================================== */
.desk-head::after {
  content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: 38%; right: calc((100% - 100vw) / 2);
  background: url('/media/band.webp') center / cover no-repeat; opacity: .26;
  -webkit-mask-image: linear-gradient(to right, transparent, rgba(0, 0, 0, .35) 40%, #000 85%); mask-image: linear-gradient(to right, transparent, rgba(0, 0, 0, .35) 40%, #000 85%);
  pointer-events: none;
}
.acct { max-width: none; }
.acct .desk-head { padding-block: clamp(2rem, 4.5vw, 3.25rem) clamp(2.25rem, 5vw, 3.5rem); margin-bottom: clamp(2rem, 4vw, 3rem); }
.acct .desk-head h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); }
.acct .home-hero { padding-top: clamp(1.5rem, 3vw, 2.25rem); }

/* Panels */
.acct-panel { background: var(--paper-surface); border: 1px solid var(--paper-line); border-radius: 12px; padding: clamp(1.25rem, 3vw, 1.75rem); box-shadow: 0 1px 2px rgba(17, 18, 23, .04); }
.acct-panel > :first-child { margin-top: 0; }
.acct-panel > :last-child { margin-bottom: 0; }
.acct-panel .form { margin-top: 1rem; max-width: 30rem; }
.acct-panel > .form:first-child { margin-top: 0; }
.acct-panel .message { margin: 0 0 1rem; }
.acct-panel-flush { padding: .25rem 0; }
.acct-panel .ledger { border-top: 0; margin-top: 0; }
.acct-panel .ledger-list > li:last-child { border-bottom: 0; }
.acct-panel .ledger + .form, .acct-panel .ledger + .actions { margin-top: 1rem; }
.acct-panel-flush .ledger-list > li { padding-inline: clamp(1rem, 3vw, 1.5rem); }
.acct-panel-flush .ledger-list > li:last-child { border-bottom: 0; }
.acct-quiet { color: var(--paper-muted); margin: 0 0 1rem; }
.acct-callout { margin-top: 2rem; border-left: 5px solid var(--plus); }
.acct-callout h2 { margin: 0 0 .5rem; }
.acct-callout > p { color: var(--paper-muted); }

.tile-note { margin: auto 0 0; color: var(--paper-muted); font-size: .9375rem; line-height: 1.45; }
.tile-kicker { display: flex; align-items: center; gap: .5rem; margin: 0 0 .6rem; font: italic 800 .75rem/1 var(--display); font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; color: var(--paper-muted); }
.tile-kicker svg { width: 2.4rem; height: 1.05rem; fill: var(--plus); }

/* Level meter ($5 steps to $25) */
.level-meter { position: relative; height: .6rem; margin: .9rem 0 .5rem; border-radius: 99px; background: rgba(17, 18, 23, .09); overflow: hidden; }
.level-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--plus); box-shadow: inset 0 0 0 1px rgba(17, 18, 23, .12); }
.level-5 { width: 20%; } .level-10 { width: 40%; } .level-15 { width: 60%; } .level-20 { width: 80%; } .level-25 { width: 100%; }
.level-tick { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--paper-surface); }
.level-tick-5 { left: 20%; } .level-tick-10 { left: 40%; }
.level-scale { position: relative; height: 1.1rem; margin: 0; font: .75rem/1.3 var(--technical); color: var(--paper-muted); }
.level-scale span { position: absolute; top: 0; white-space: nowrap; }
.level-scale span:nth-child(1) { left: 20%; transform: translateX(-50%); }
.level-scale span:nth-child(2) { left: 40%; transform: translateX(-30%); }
.level-scale span:nth-child(3) { right: 0; }

/* Support summary */
.acct-summary { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.5rem 3rem; margin-bottom: 1rem; }
.acct-summary-level { margin: 0; font: italic 900 clamp(2.25rem, 5vw, 3.5rem)/.95 var(--display); font-stretch: 116%; text-transform: uppercase; }
.acct-summary-sources ul { list-style: none; margin: 0; padding: 0; }
.acct-summary-sources li { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--paper-line); }
.acct-summary-total { font-weight: 700; border-bottom: 0 !important; }
@media (max-width: 44rem) { .acct-summary { grid-template-columns: minmax(0, 1fr); } }

/* Rows: heading and explanation on the left, the thing itself on the right */
.acct-row { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: 1rem 3rem; padding-block: 2rem; border-top: 1px solid var(--paper-line); }
.acct-summary + .acct-row, .desk-head + .acct-row, .desk-head + .message + .acct-row { border-top: 0; padding-top: 1rem; }
.acct-row-head h2 { margin: 0 0 .5rem; font-size: 1.25rem; }
.acct-row-head p { margin: 0; color: var(--paper-muted); font-size: .9375rem; line-height: 1.5; }
.acct-row-full { grid-template-columns: minmax(0, 1fr); }
.acct-row-danger h2 { color: var(--danger-paper); }
.acct-panel-danger { border-color: rgba(192, 38, 29, .45); }
.acct-panel .setting { border: 0; padding: 0; }
@media (max-width: 52rem) { .acct-row { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }

/* Twitch and card details */
.button-twitch { color: #fff; }
.button-twitch::before { background: #9146ff; }
.button-twitch:hover::before { background: #772ce8; }
.button-twitch svg { width: 1.125rem; height: 1.125rem; margin-right: .6rem; flex: none; }
.or-rule { display: flex; align-items: center; gap: .75rem; margin: 1.5rem 0; color: var(--muted-text); font-size: .875rem; }
.or-rule::before, .or-rule::after { content: ''; flex: 1; border-top: 1px solid currentColor; opacity: .35; }
.twitch-dot { display: inline-block; width: .7rem; height: .7rem; margin-right: .5rem; background: #9146ff; transform: skewX(var(--slant)); vertical-align: .05em; }
.acct-twitch-id { margin: 0 0 1rem; }
.acct-card { display: flex; align-items: center; gap: 1rem; margin: 0 0 1rem; }
.acct-card-chip { display: grid; place-items: center; flex: none; width: 3.5rem; height: 2.3rem; border-radius: 6px; background: var(--paper-ink); color: var(--paper); font: 700 .7rem/1 var(--technical); letter-spacing: .06em; }

/* Empty orders */
.acct-empty { display: grid; justify-items: center; text-align: center; padding: clamp(2rem, 6vw, 3.5rem) 1.5rem; background: var(--paper-surface); border: 1px solid var(--paper-line); border-radius: 12px; }
.acct-empty-art { display: flex; margin-bottom: 1.75rem; }
.acct-empty-art img { width: clamp(6rem, 14vw, 8.5rem); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 10px; box-shadow: 0 14px 30px -12px rgba(17, 18, 23, .45); background: #fff; }
.acct-empty-art img:nth-child(1) { transform: rotate(-8deg) translateX(1.25rem); }
.acct-empty-art img:nth-child(2) { position: relative; z-index: 1; transform: translateY(-.5rem); }
.acct-empty-art img:nth-child(3) { transform: rotate(8deg) translateX(-1.25rem); }
.acct-empty-art .on-white { object-fit: contain; padding: .35rem; }
.acct-empty h2 { margin: 0 0 .5rem; font: italic 900 1.75rem/1 var(--display); font-stretch: 114%; text-transform: uppercase; }
.acct-empty p { max-width: 42ch; color: var(--paper-muted); margin: 0 0 1.5rem; }
.acct-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 1.25rem; }

@media (max-width: 38rem) { .level-scale span:nth-child(1) { display: none; } }
@media (max-width: 30rem) { .sections { gap: .25rem 1.1rem; } .sections a { font-size: .75rem; letter-spacing: .06em; } }

/* Orders: cards on the list, a full order page with a tracker (September 30, 2026). */
.chip-plain { color: var(--paper-muted); }
.order-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.order-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 18px 22px 18px 18px; background: var(--paper-surface); border: 1px solid var(--paper-line); border-radius: 12px; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.order-card:hover { border-color: var(--paper-ink); box-shadow: 0 10px 30px -16px rgba(17, 18, 23, .35); }
.order-card:hover .order-card-open { text-decoration: underline; text-underline-offset: 3px; }
.order-thumbs { position: relative; display: block; width: 104px; height: 104px; flex: none; }
.order-thumbs img, .order-thumb-store { position: absolute; width: 88px; height: 88px; object-fit: cover; border-radius: 8px; background: #efece4; border: 2px solid var(--paper-surface); }
.order-thumbs-1 img { width: 104px; height: 104px; border: 0; }
.order-thumbs-2 img:nth-child(1) { left: 0; top: 0; } .order-thumbs-2 img:nth-child(2) { right: 0; bottom: 0; }
.order-thumbs-3 img { width: 76px; height: 76px; } .order-thumbs-3 img:nth-child(1) { left: 0; top: 0; } .order-thumbs-3 img:nth-child(2) { right: 0; top: 8px; } .order-thumbs-3 img:nth-child(3) { left: 14px; bottom: 0; }
.order-thumb-store { inset: 0; width: 104px; height: 104px; display: grid; place-items: center; border: 0; background: var(--void); color: var(--plus); font: italic 900 1.9rem/1 var(--display); font-stretch: 112%; }
.order-card-main { display: grid; gap: 4px; min-width: 0; }
.order-card-top { display: flex; align-items: center; gap: 12px; }
.order-card-store { font: italic 800 .75rem/1 var(--display); font-stretch: 112%; letter-spacing: .1em; text-transform: uppercase; color: var(--paper-muted); }
.order-card-number { font-size: 1.125rem; font-weight: 700; }
.order-card-number .technical { font-size: 1rem; letter-spacing: .04em; }
.order-card-items { display: grid; gap: 2px; margin-top: 4px; }
.order-card-items > span { font-size: .9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-card-items small { margin-left: 8px; color: var(--paper-muted); font-size: .8125rem; }
.order-card-more { color: var(--paper-muted); }
.order-card-side { display: grid; justify-items: end; gap: 4px; text-align: right; }
.order-card-total { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.order-card-date { font: .8125rem/1.3 var(--technical); color: var(--paper-muted); }
.order-card-open { margin-top: 8px; font-weight: 600; font-size: .9375rem; }
.order-help { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--paper-line); }
.order-help h2 { margin: 0 0 1.25rem; font-size: 1.25rem; }
.order-help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.5rem 2rem; }
.order-help-grid > div { display: grid; gap: 4px; align-content: start; }
.order-help-store { margin: 0 0 4px; font: italic 800 .75rem/1 var(--display); font-stretch: 112%; letter-spacing: .1em; text-transform: uppercase; color: var(--paper-muted); }
.order-help-grid a { color: var(--paper-ink); font-weight: 600; }
.order-help-grid .order-help-policy { font-weight: 400; font-size: .875rem; color: var(--paper-muted); }
.order-help-note { font-size: .875rem; color: var(--paper-muted); }
.order-help-fine { margin: 1.5rem 0 0; font-size: .875rem; color: var(--paper-muted); }

.order-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: 1.25rem; align-items: start; }
.order-primary, .order-aside { display: grid; gap: 1.25rem; }
.order-layout h2 { margin: 0 0 .75rem; font-size: 1.125rem; }
.order-progress-head h2 { font: italic 900 clamp(1.75rem, 3.4vw, 2.4rem)/1 var(--display); font-stretch: 114%; text-transform: uppercase; margin-bottom: .6rem; }
.order-progress-head p { margin: 0; color: var(--paper-muted); }
.order-progress-head strong { color: var(--paper-ink); }
.tracker { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 1.75rem 0 .25rem; padding: 0; }
.tracker li { position: relative; display: grid; gap: 2px; padding-top: 22px; font-size: .875rem; }
.tracker li::before { content: ''; position: absolute; top: 6px; left: 0; right: 0; height: 3px; background: var(--paper-line); }
.tracker li:first-child::before { left: 7px; }
.tracker li:last-child::before { right: auto; width: 7px; }
.tracker-done::before, .tracker-now::before { background: var(--paper-ink) !important; }
.tracker-now::before { background: linear-gradient(to right, var(--paper-ink) 7px, var(--paper-line) 7px) !important; }
.tracker-dot { position: absolute; top: 0; left: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--paper-surface); border: 3px solid var(--paper-line); }
.tracker-done .tracker-dot { background: var(--paper-ink); border-color: var(--paper-ink); }
.tracker-now .tracker-dot { background: var(--plus); border-color: var(--paper-ink); box-shadow: 0 0 0 4px rgba(236, 233, 74, .35); }
.tracker-label { font-weight: 700; }
.tracker-next .tracker-label { color: var(--paper-muted); font-weight: 500; }
.tracker-when { font: .75rem/1.3 var(--technical); color: var(--paper-muted); min-height: 1em; }
.order-tracking { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; padding: 1rem 1.25rem; background: var(--paper); border-radius: 8px; }
.order-note { margin: 1.25rem 0 0; padding: 1rem 1.25rem; border-left: 4px solid var(--plus); background: var(--paper); }
.order-note p { margin: 0 0 .5rem; }
.order-note cite { font-size: .8125rem; font-style: normal; color: var(--paper-muted); }
.order-items ul { list-style: none; margin: 0; padding: 0; }
.order-items li { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: .9rem 0; border-top: 1px solid var(--paper-line); }
.order-items li img, .order-item-blank { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; background: #efece4; }
.order-item-text strong { display: block; font-weight: 600; line-height: 1.3; }
.order-item-text small { display: block; margin-top: 4px; color: var(--paper-muted); font-size: .8125rem; }
.order-item-price { font-weight: 700; font-variant-numeric: tabular-nums; }
.order-totals { margin: .5rem 0 0; padding-top: .75rem; border-top: 1px solid var(--paper-line); }
.order-totals > div { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; font-size: .9375rem; }
.order-totals dt { color: var(--paper-muted); }
.order-totals dd { margin: 0; font-variant-numeric: tabular-nums; }
.order-totals-grand { margin-top: .4rem; padding-top: .7rem !important; border-top: 2px solid var(--paper-ink); font-size: 1.0625rem !important; }
.order-totals-grand dt { color: var(--paper-ink); font-weight: 700; }
.order-totals-grand dd { font-weight: 700; }
.order-receipt { margin: 1rem 0 0; font-size: .8125rem; color: var(--paper-muted); }
.order-aside address { font-style: normal; line-height: 1.6; }
.order-aside-note { margin: .75rem 0 0; font-size: .875rem; color: var(--paper-muted); }
.order-support p { color: var(--paper-muted); margin: 0 0 1rem; font-size: .9375rem; }
.order-support .button { width: 100%; font-size: .8125rem; padding-inline: .75rem; white-space: normal; text-align: center; }
.order-support-links { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .4rem; font-size: .9375rem; }
.order-support-links a { color: var(--paper-ink); }
.order-support-fine { margin: 1rem 0 0 !important; padding-top: .9rem; border-top: 1px solid var(--paper-line); font-size: .75rem !important; }
@media (max-width: 52rem) {
  .order-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 38rem) {
  .order-card { grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 14px; }
  .order-thumbs, .order-thumb-store, .order-thumbs-1 img { width: 72px; height: 72px; }
  .order-thumbs img { width: 60px; height: 60px; } .order-thumbs-3 img { width: 52px; height: 52px; }
  .order-card-side { grid-column: 1 / -1; grid-template-columns: auto auto 1fr; justify-items: start; align-items: baseline; gap: 12px; text-align: left; padding-top: 10px; border-top: 1px solid var(--paper-line); }
  .order-card-open { justify-self: end; margin: 0; }
  .order-card-items > span { white-space: normal; }
  .tracker li { font-size: .75rem; }
  .order-items li { grid-template-columns: 60px minmax(0, 1fr); }
  .order-items li img, .order-item-blank { width: 60px; height: 60px; }
  .order-item-price { grid-column: 2; }
}
.order-support-email { color: var(--paper-ink); font-weight: 600; }

/* Shared member identity, plus the square crop controls on Settings. */
.profile-avatar{display:inline-flex;width:36px;height:36px;flex:0 0 auto;align-items:center;justify-content:center;object-fit:cover;border-radius:50%;background:#ece94a;color:#08090c;font:700 1rem 'DM Sans',sans-serif;vertical-align:middle}
.profile-avatar-large{width:96px;height:96px;font-size:2rem}
.profile-avatar-link{display:inline-flex;min-width:44px;min-height:44px;align-items:center;justify-content:center}
/* Photo editing stays out of the settings form until a photo is selected. */
.profile-photo-change{position:relative;display:inline-flex;flex:none;border-radius:50%;text-decoration:none}
.profile-photo-change:hover .profile-avatar{outline:2px solid currentColor;outline-offset:3px}
.profile-photo-edit{position:absolute;right:-3px;bottom:-2px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--plus);color:var(--void);border:2px solid var(--void)}
.profile-photo-edit svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.profile-current{display:flex;align-items:center;gap:24px;margin-bottom:16px}.profile-current p{margin:8px 0 0}
.profile-current .profile-photo-edit{width:26px;height:26px;border-color:var(--paper-surface)}
.profile-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.profile-actions form{margin:0}
.photo-editor{width:min(28rem,calc(100% - 32px));max-width:none;max-height:calc(100dvh - 32px);margin:auto;padding:24px;border:0;border-radius:10px;background:var(--paper-surface);color:var(--paper-ink);box-shadow:0 16px 64px #0005;overflow:auto}
.photo-editor:not([open]),.photo-editor [hidden]{display:none!important}
.photo-editor::backdrop{background:rgba(8,9,12,.72)}
.photo-editor form{margin:0}.photo-editor-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}
.photo-editor-head h2{font:700 1.4rem 'Space Grotesk',sans-serif;margin:0}
.photo-icon-button{display:grid;place-items:center;flex:none;width:44px;height:44px;border:0;border-radius:6px;background:transparent;color:inherit;font:400 1.6rem 'DM Sans',sans-serif;cursor:pointer}
.photo-icon-button:hover{background:var(--paper)}.photo-icon-button:disabled{opacity:.3;cursor:default}
.photo-crop-stage{position:relative;overflow:hidden;isolation:isolate;width:min(100%,17.5rem,42svh);aspect-ratio:1;margin:0 auto;background:var(--paper);border-radius:6px}
.photo-crop-stage canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab;outline-offset:-4px}
.photo-crop-stage canvas.is-dragging{cursor:grabbing}
.photo-crop-guide{position:absolute;inset:0;border:2px solid rgba(255,255,255,.9);border-radius:50%;box-shadow:0 0 0 5rem rgba(8,9,12,.4);pointer-events:none}
.photo-crop-stage:focus-within .photo-crop-guide{border:3px solid var(--paper-ink)}
.photo-crop-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0 20px}
.photo-crop-caption p{margin:0;color:var(--paper-muted);font-size:.875rem;line-height:1.4}.photo-crop-caption button{min-height:44px}
.photo-zoom-heading{display:flex;justify-content:space-between;align-items:center;font-size:.9375rem;font-weight:500}.photo-zoom-heading output{color:var(--paper-muted);font-variant-numeric:tabular-nums}
.photo-zoom{display:flex;align-items:center;gap:8px}.photo-zoom input[type=range]{appearance:none;flex:1;min-width:0;width:100%;height:44px;padding:0;margin:0;background:transparent;cursor:pointer}
.photo-zoom input::-webkit-slider-runnable-track{height:4px;background:#d3d2cc;border-radius:2px}
.photo-zoom input::-webkit-slider-thumb{appearance:none;width:18px;height:18px;margin-top:-7px;border:0;border-radius:50%;background:var(--paper-ink);box-shadow:0 0 0 3px var(--paper-surface)}
.photo-zoom input::-moz-range-track{height:4px;background:#d3d2cc;border-radius:2px}.photo-zoom input::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:var(--paper-ink)}
.photo-another{display:block;margin:12px auto;min-height:44px}.photo-editor-actions{display:flex;justify-content:flex-end;gap:12px;border-top:1px solid var(--paper-line);padding-top:20px;margin-top:12px}
.photo-editor-status{margin:24px 0}.photo-editor-actions .button{min-width:100px;white-space:nowrap}
@media(max-width:400px){.photo-editor{padding:16px}.profile-current{gap:16px}.profile-actions{gap:12px}.photo-editor-actions .button{min-width:0;flex:1;padding-inline:.75rem;font-size:.875rem}}
@media(max-height:700px){.photo-editor-head{margin-bottom:12px}.photo-crop-stage{width:min(100%,14rem,32svh)}.photo-crop-caption{margin:4px 0 8px}.photo-another{margin:4px auto}.photo-editor-actions{padding-top:12px;margin-top:8px}}
.member-card-person{display:flex;align-items:center;gap:.75rem}.member-card-person .profile-avatar{width:48px;height:48px}

/* Admin members: the directory, one member's record, and the dashboard's sign-up columns. */
.member-who { display: flex; align-items: center; gap: .75rem; min-width: 0; flex: 1 1 16rem; }
.member-who > span:last-child { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.member-who a { font-weight: 600; }
.member-who .ledger-meta { overflow-wrap: anywhere; }
.profile-avatar-plain { background: var(--paper-ink); color: var(--paper); }
.member-title { display: flex; align-items: center; gap: .875rem; overflow-wrap: anywhere; }
.member-title .profile-avatar { width: 56px; height: 56px; font-size: 1.375rem; }
.member-title .profile-avatar-plain { background: var(--plus); color: var(--void); }
.member-search { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 0 0 1.5rem; }
.member-search input { flex: 1 1 14rem; max-width: 24rem; }
.member-note { margin-bottom: 1rem; }
.member-sub { border-top: 0; }
.member-sub + .hint { margin-top: .75rem; }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; margin-top: 1.5rem; }
.pager a { font-weight: 600; }
.ledger-more { margin: .875rem 0 0; }
.ledger-more a { font-weight: 600; }
.ledger-latest > li { flex-wrap: nowrap; }
.ledger-latest > li > .ledger-meta { flex: none; text-align: right; }
.ledger dt a { color: inherit; }
.ledger-narrow { max-width: 44rem; }
.desk-columns > div > h2:first-child { margin-top: 2.5rem; }
@media (min-width: 40rem) {
  .ledger-members > li { grid-template-columns: minmax(0, 1fr) 8rem 8rem 9.5rem; }
  .ledger-members > li > :nth-last-child(2) { text-align: left; }
}
@media (min-width: 52rem) {
  .desk-columns { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0 3rem; align-items: start; }
}
@media (max-width: 30rem) {
  .ledger-latest > li { flex-wrap: wrap; }
  .ledger-latest > li > .ledger-meta { padding-left: calc(36px + .75rem); text-align: left; }
}

/* ==========================================================================
   Account home (October 9, 2026): the archive owns the void band, with every show one
   click away; the member card, which carries the support level, sits beside the greeting.
   On paper: orders, connections, and account housekeeping.
   ========================================================================== */
.home-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); grid-template-areas: "alert alert" "intro card" "shows shows"; gap: clamp(1.75rem, 3.5vw, 2.5rem) clamp(2rem, 5vw, 3.5rem); align-items: center; }
.home-hero::after { content: none; }
.home-alert { grid-area: alert; display: flex; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; padding: .75rem 1rem; background: var(--void-surface); border: 1px solid var(--void-line); border-radius: var(--radius-surface); color: var(--ink); text-decoration: none; transition: border-color .15s; }
.home-alert:hover { border-color: var(--ink); }
.home-alert .chip { flex: none; color: var(--plus); }
.home-alert-text { flex: 1 1 14rem; min-width: 0; }
.home-alert-text strong { font-weight: 600; }
.home-alert-text span { color: var(--muted); }
.home-alert-go { flex: none; font-weight: 600; }
.home-alert-go::after, .home-shows-head a::after, .home-panel-head a::after, .home-row-go::after { content: ' →'; }

.home-intro { grid-area: intro; }
.home-intro h1 { margin: 0 0 1rem; }
.home-intro h1 span { display: block; }
.home-intro > p { margin: 0; max-width: 34rem; color: var(--muted); font-size: 1.125rem; }
.nowrap { white-space: nowrap; }
.home-actions { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; margin-top: 1.75rem; }
.home-actions .button-secondary { color: var(--ink); }
.home-intro .home-library { margin-top: 1rem; font-size: .9375rem; }
.home-library a { color: var(--ink); font-weight: 600; }

/* The member card carries the support level here: name, meter, what counts, and one way in. */
.home-hero .member-card { grid-area: card; width: 100%; justify-self: end; aspect-ratio: auto; padding: 1.25rem 1.5rem 1.25rem 1.75rem; }
.home-hero .member-card-mark { width: 7rem; }
.home-hero .member-card-name { font-size: 1.5rem; margin-bottom: 0; padding-top: .875rem; }
.member-card-level { margin-top: .875rem; padding-top: .875rem; border-top: 1px solid var(--void-line); }
.member-card-label { margin: 0 0 .25rem; color: var(--muted); font-size: .8125rem; }
.member-card-levelname { margin: 0; font: italic 900 clamp(1.25rem, 2.2vw, 1.5rem)/1 var(--display); font-stretch: 114%; text-transform: uppercase; color: var(--plus); }
.member-card .level-meter { margin: .875rem 0 .375rem; background: rgba(255, 255, 255, .14); }
.member-card .level-tick { background: var(--void-surface); }
.member-card .level-scale { color: var(--muted); font-family: var(--text); }
.member-card-note { margin: .625rem 0 0; color: var(--muted); font-size: .875rem; line-height: 1.45; }
.member-card-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem 1rem; margin-top: 1rem; color: var(--muted); font-size: .8125rem; }
.member-card-foot .button { color: var(--ink); }

/* The shows: Seth & Colby leads at double size, the eight early podcasts follow in order. */
.home-shows { grid-area: shows; min-width: 0; }
.home-shows-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .875rem; padding-top: clamp(1.5rem, 3vw, 2rem); border-top: 1px solid var(--void-line); }
.home-shows-head h2 { margin: 0; font: 800 1.125rem/1.2 var(--display); font-stretch: 110%; letter-spacing: 0; }
.home-shows-head a { font-weight: 600; font-size: .9375rem; text-decoration: none; }
.home-shows-head a:hover { text-decoration: underline; text-underline-offset: 3px; }
.shows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem .75rem; }
.show { display: flex; min-width: 0; }
.show a { display: flex; flex-direction: column; gap: .5rem; width: 100%; color: inherit; text-decoration: none; }
.show-art { position: relative; display: block; overflow: hidden; aspect-ratio: 1; border-radius: 8px; background: var(--void-surface); box-shadow: 0 0 0 1px var(--void-line); transition: transform .16s ease-out, box-shadow .16s ease-out; }
.show-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.show-play { position: absolute; right: .5rem; bottom: .5rem; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--plus); color: var(--void); opacity: 0; transform: translateY(4px); transition: opacity .16s, transform .16s; }
.show-play svg { width: .875rem; height: .875rem; margin-left: 2px; fill: currentColor; }
.show a:hover .show-art, .show a:focus-visible .show-art { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--ink), 0 14px 28px -12px #000; }
.show a:hover .show-play, .show a:focus-visible .show-play { opacity: 1; transform: none; }
.show-cap { display: flex; flex-direction: column; gap: .125rem; line-height: 1.3; }
.show-cap strong { font-weight: 600; font-size: .9375rem; }
.show-cap span { color: var(--muted); font-size: .8125rem; }
.show-lead { grid-column: span 2; grid-row: span 2; }
.show-lead .show-art { flex: 1; aspect-ratio: auto; min-height: 12rem; }
.show-lead .show-art img { position: absolute; inset: 0; }
.show-lead .show-play { width: 3rem; height: 3rem; right: .75rem; bottom: .75rem; }
.show-lead .show-play svg { width: 1.125rem; height: 1.125rem; }
.show-lead .show-cap strong { font-size: 1.0625rem; }
@media (max-width: 60rem) {
  .home-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "alert" "intro" "card" "shows"; }
  .home-hero .member-card { justify-self: start; max-width: 28rem; }
  .shows { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Phones: the shows become one swipeable row that runs off the right edge. */
@media (max-width: 40rem) {
  .shows { display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) .25rem; scroll-padding-inline: var(--gutter); }
  .shows::-webkit-scrollbar { display: none; }
  .show { flex: 0 0 min(42vw, 11rem); scroll-snap-align: start; }
  .show-lead { flex-basis: min(42vw, 11rem); }
  .show-lead .show-art { flex: none; aspect-ratio: 1; min-height: 0; }
  .show-lead .show-cap strong { font-size: .9375rem; }
  .home-actions .button { flex: 1 1 auto; }
}

/* The desk: orders on the left, connections and account housekeeping stacked on the right. */
.home-desk { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.25rem; }
.home-panel { display: flex; flex-direction: column; padding: 1.5rem 1.5rem 1.25rem; }
.home-orders { grid-row: span 2; align-self: start; }
.home-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.home-panel-head h2 { margin: 0; font: 800 1.125rem/1.2 var(--display); font-stretch: 110%; letter-spacing: 0; }
.home-panel-head a { font-weight: 600; font-size: .9375rem; color: var(--paper-ink); text-decoration: none; white-space: nowrap; }
.home-panel-head a:hover, .home-row-go:hover { text-decoration: underline; text-underline-offset: 3px; }
.home-rows { list-style: none; margin: 0; padding: 0; }
.home-rows > li { display: flex; align-items: center; gap: .875rem; padding-block: .875rem; border-top: 1px solid var(--paper-line); }
.home-rows > li:first-child { border-top: 0; }
.home-row-main { flex: 1; display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.home-row-title { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .625rem; font-weight: 600; line-height: 1.3; }
.home-row-title .chip { font-size: .8125rem; }
.home-row-note { color: var(--paper-muted); font-size: .9375rem; line-height: 1.4; overflow-wrap: anywhere; }
.home-row-go { flex: none; font-weight: 600; font-size: .9375rem; color: var(--paper-ink); text-decoration: none; white-space: nowrap; }
.home-icon { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 8px; background: var(--paper); color: var(--paper-ink); }
.home-icon svg { width: 1.375rem; height: 1.375rem; fill: currentColor; }
.home-icon-line svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.home-icon-twitch { background: #9146ff; color: #fff; }
.home-icon-discord { background: #5865f2; color: #fff; }

/* Orders: the whole row opens the order; tracking is its own link beside it. */
.home-order { position: relative; }
.home-order-thumb { flex: none; width: 3.5rem; height: 3.5rem; border-radius: 8px; overflow: hidden; background: #efece4; }
.home-order-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-order-thumb .order-thumb-store { position: static; width: 100%; height: 100%; font-size: 1.125rem; }
.home-order-open { color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.home-order-open::after { content: ''; position: absolute; inset: 0; }
.home-order:hover .home-order-open { text-decoration: underline; text-underline-offset: 3px; }
.home-order .home-row-title { flex-wrap: nowrap; }
.home-order .chip { flex: none; }
.home-order-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; max-width: 14rem; margin-top: .375rem; }
.home-order-steps i { height: 4px; border-radius: 2px; background: var(--paper-line); }
.home-order-steps i.on { background: var(--paper-ink); }
.home-order-track { position: relative; z-index: 1; }
.home-empty { display: flex; align-items: center; gap: 1.25rem; padding-block: .75rem .5rem; margin-block: auto; }
.home-empty-art { display: flex; flex: none; }
.home-empty-art img { width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: 8px; box-shadow: 0 10px 22px -12px rgba(17, 18, 23, .5); }
.home-empty-art img:first-child { transform: rotate(-6deg); }
.home-empty-art img:last-child { transform: rotate(5deg) translate(-.75rem, .375rem); }
.home-empty p { margin: 0; color: var(--paper-muted); font-size: .9375rem; }
.home-empty p strong { display: block; color: var(--paper-ink); font-size: 1.0625rem; margin-bottom: .125rem; }

@media (max-width: 56rem) { .home-desk { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 30rem) {
  .home-panel { padding: 1.25rem 1.125rem 1rem; }
  .home-rows > li { flex-wrap: wrap; row-gap: .375rem; }
  .home-row-main { flex-basis: calc(100% - 4.5rem); }
  .home-row-go { margin-left: 3.625rem; }
  .home-order .home-row-title { flex-wrap: wrap; }
  .home-order-open { white-space: normal; }
  .home-order-track { margin-left: 4.375rem; }
  .home-empty-art { display: none; }
}
@media (prefers-reduced-motion: reduce) { .show a:hover .show-art, .show a:focus-visible .show-art, .show-play { transform: none; } }