/* Chris Cash Brand Identity v1.0 - paths assume this file stays in 02-web. */
@font-face { font-family: "Inter"; src: url("assets/brand/v1.0/04-fonts/Inter-Variable.woff") format("woff"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("assets/brand/v1.0/04-fonts/Inter-Italic-Variable.woff") format("woff"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("assets/brand/v1.0/04-fonts/SourceSerif4-Variable.woff") format("woff"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("assets/brand/v1.0/04-fonts/SourceSerif4-Italic-Variable.woff") format("woff"); font-weight: 200 900; font-style: italic; font-display: swap; }
/* Chris Cash identity v1.0, 2026-09-28. Shared website roles. */
[hidden]{display:none!important}
:root {
  --color-bg:#151515; --color-surface:#24211e; --color-text:#f4e8d4;
  --color-muted:#b9ad9c; --color-accent:#f4e8d4; --color-accent-ink:#151515;
  --color-accent-hover:#faf6ef; --color-border:#887b6c; --color-border-soft:#453a31;
  --font-heading:'Source Serif 4',Georgia,serif;
  --font-body:'Inter',Arial,sans-serif; --font-editorial:'Source Serif 4',Georgia,serif;
  --font-lcd:'Courier New',monospace;
  --text-caption:.875rem; --text-body:1.125rem; --text-lead:1.125rem;
  --text-h3:clamp(1.5rem,2.5vw,2rem); --text-h2:clamp(2rem,4vw,3.25rem);
  --text-h1:clamp(2.75rem,6vw,5rem);
  --text-section-heading:clamp(2rem,2.8vw,3rem);
  --text-eyebrow:.875rem;
  --color-section-heading:var(--color-text); --color-eyebrow:var(--color-muted);
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;
  --section-space:clamp(48px,6vw,96px); --page-gutter:clamp(20px,6vw,88px);
  --content-width:1200px; --prose-width:62ch; --radius-control:5px;
  --shadow-button:none;
}
/* A separate base for the calendar, administration and brand-reference pages. */
.brand-page {margin:0;background:var(--color-bg);color:var(--color-text);font:400 var(--text-body)/1.6 var(--font-body);color-scheme:dark}
.brand-page *, .brand-page *::before, .brand-page *::after {box-sizing:border-box}
.brand-page button,.brand-page input,.brand-page select,.brand-page textarea {font:inherit}
.brand-page button,.brand-page a {touch-action:manipulation}
.brand-page a {color:var(--color-accent);text-underline-offset:4px}
.brand-page h1,.brand-page h2,.brand-page h3 {font-family:var(--font-heading);font-weight:600;line-height:1.06;letter-spacing:-.015em;margin:0 0 16px;color:var(--color-text)}
.brand-page h1 {font-size:var(--text-h1)}.brand-page h2 {font-size:var(--text-h2)}.brand-page h3 {font-size:var(--text-h3)}
.brand-page p {margin:0 0 16px;max-width:var(--prose-width)}
.brand-page .muted {color:var(--color-muted)}
.brand-page .eyebrow {font:600 12px/1.5 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent);margin:0 0 12px}
.brand-page label {font-size:14px;font-weight:500}
.brand-page input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),.brand-page select,.brand-page textarea {background:var(--color-bg);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-control);padding:12px 14px;min-height:48px;max-width:100%}
.brand-page input::placeholder,.brand-page textarea::placeholder {color:var(--color-muted);opacity:1}
.brand-page :is(a,button,input,select,textarea):focus-visible {outline:3px solid var(--color-accent);outline-offset:4px}
.brand-page .brand-wrap {width:min(var(--content-width),calc(100% - 2 * var(--page-gutter)));margin-inline:auto}
/* Ordinary website content; do not broaden these selectors into the photographic room. */
.content,.bar-booking,.flat-music {font-family:var(--font-body);color:var(--color-text);background:var(--color-bg);padding:var(--section-space) var(--page-gutter)}
.content.watch,.content.club,.flat-music {background:var(--color-surface)}
.content h2,.bar-booking h2,.flat-music h2 {font:600 var(--text-h2)/1.12 var(--font-heading);letter-spacing:-.015em;margin:0 0 16px;color:var(--color-text)}
.content h3 {font:600 var(--text-h3)/1.15 var(--font-heading);letter-spacing:0;color:var(--color-text)}
.content p,.bar-booking p,.flat-music p {font:400 var(--text-body)/1.65 var(--font-body);color:var(--color-muted);max-width:var(--prose-width)}
.content .eyebrow,.bar-booking .eyebrow,.flat-music .eyebrow {font:600 12px/1.5 var(--font-body);letter-spacing:.12em;color:var(--color-accent);margin-bottom:12px}
.content .section-head {gap:24px;margin-bottom:32px;align-items:end}
.content .section-head>p {font-size:14px;line-height:1.6}
.content .split {gap:clamp(24px,5vw,64px)}
.content .text-link {font:600 16px/1.5 var(--font-body);color:var(--color-accent);min-height:44px;display:inline-flex;align-items:center;text-underline-offset:5px}
.content .club-form label,.content .club-form .note,.booking-actions small {font:400 14px/1.5 var(--font-body);color:var(--color-muted)}
.content .club-form input {font:400 16px/1.5 var(--font-body);min-height:50px;background:var(--color-bg);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-control)}
.content .club-form input::placeholder {color:var(--color-muted)}
.content .show {padding-block:24px;border-color:var(--color-border-soft)}
.content .show p {font-size:14px}.content .show .tag {font-size:14px;background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);min-height:44px;display:inline-flex;align-items:center;padding:10px 16px}
.content .date {color:var(--color-accent)}
.content .friends-options {gap:24px}.content .friends-option {background:var(--color-surface);border-color:var(--color-border-soft)}
.content .friends-option :is(a,button) {font-family:var(--font-body);font-size:16px;color:var(--color-accent)}
/* Shared main-page roles win over component sizes at every breakpoint. */
/* Keep display heroes, artist names, event venues and the photographic room separate. */
#site-main :is(.shows-heading>h2,.cash-club-copy>h2,.friends-introduction>h2,.booking-quick-heading h2,.flat-music>h2,.watch-copy>h2,.song-copy>h2,.section-heading) {
  font:600 var(--text-section-heading)/1.12 var(--font-heading);
  letter-spacing:-.015em;color:var(--color-section-heading);max-width:none;
}
#site-main :is(.shows-kicker,.friends-kicker,.booking-quick .booking-kicker,.cash-club-copy>.cash-club-kicker,.flat-music>.eyebrow,.watch-copy>.eyebrow,.song-copy>.eyebrow,.section-eyebrow) {
  font:600 var(--text-eyebrow)/1.5 var(--font-body);
  letter-spacing:.1em;text-transform:uppercase;color:var(--color-eyebrow);
}
#site-main .cash-club-section {
  --color-section-heading:var(--club-text,var(--color-accent-ink));
  --color-eyebrow:var(--club-accent,var(--color-accent-ink));
}
/* Shared action styling intentionally names only ordinary page/nav/dialog surfaces. */
.brand-page .button,.bar-nav .button,.content .button,.bar-booking .button,
#booking .button,#song .button,#reel .button {
  display:inline-flex;justify-content:center;align-items:center;gap:12px;min-height:50px;
  padding:12px 24px;background:var(--color-accent);color:var(--color-accent-ink);
  font:600 16px/1.4 var(--font-body);letter-spacing:0;text-decoration:none;
  border:1px solid var(--color-accent);border-radius:var(--radius-control);box-shadow:var(--shadow-button);
  cursor:pointer;transition:background .15s,transform .15s,box-shadow .15s;
}
.brand-page .button:hover,.bar-nav .button:hover,.content .button:hover,.bar-booking .button:hover,
#booking .button:hover,#song .button:hover,#reel .button:hover {background:var(--color-accent-hover);color:var(--color-accent-ink)}
.brand-page .button:active,.bar-nav .button:active,.content .button:active,.bar-booking .button:active {transform:translateY(2px);box-shadow:0 1px 0 #8e6531}
.brand-page .button:disabled {opacity:.55;cursor:not-allowed;box-shadow:none;transform:none}
.brand-page .button.secondary {background:transparent;color:var(--color-text);border-color:var(--color-border);box-shadow:none}
.brand-page .button.secondary:hover {background:var(--color-surface)}
.brand-page .button:focus-visible,.bar-nav .button:focus-visible,.content .button:focus-visible,.bar-booking .button:focus-visible {outline:3px solid var(--color-text);outline-offset:4px}
/* A clear artist name in navigation; existing nav-name rules own room/mobile visibility. */
.artist-wordmark {display:inline-flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:3px;flex:0 0 auto;min-height:44px;white-space:nowrap;text-decoration:none;color:var(--color-text)}
.artist-wordmark .artist-wordmark-name {display:block;font:600 36px/.95 var(--font-heading);letter-spacing:.01em;color:var(--color-text)}
.artist-wordmark .artist-wordmark-descriptor {display:block;font:500 11px/1.2 var(--font-body);letter-spacing:.08em;color:var(--color-muted)}
@media(max-width:1000px){.artist-wordmark .artist-wordmark-name{font-size:32px}.artist-wordmark .artist-wordmark-descriptor{font-size:10px}}
@media(max-width:760px){.booking-page-nav .artist-wordmark-name{font-size:30px}.booking-page-nav .artist-wordmark-descriptor{font-size:9.5px;letter-spacing:.05em}}
/* Give the booking links their own row instead of shrinking the artist descriptor. */
@media(max-width:480px){
  .booking-page .booking-page-nav{flex-wrap:wrap;gap:4px}
  .booking-page-nav .artist-wordmark-name{font-size:32px}
  .booking-page-nav .artist-wordmark-descriptor{font-size:11px;letter-spacing:.05em}
  .booking-page-nav nav{flex-basis:100%;justify-content:space-between}
  .booking-page-nav nav a{white-space:nowrap}
}
.bar-nav nav a {font-family:var(--font-body);font-size:14px;font-weight:500;letter-spacing:0}
.bar-nav .button {min-height:48px;padding:10px 20px;font-size:15px;flex-shrink:0}
@media(max-width:700px){.content .section-head{align-items:start}.bar-booking .booking-actions{padding-left:0;border:0}.bar-nav nav{gap:12px}.bar-nav .button{font-size:14px;padding-inline:14px}.content .field-row{flex-wrap:wrap}.content .field-row .button{flex-shrink:0}.brand-page .brand-wrap{width:calc(100% - 40px)}}
/* Keep all three room links and the booking action within the smallest header. */
@media(max-width:600px){.bar-nav nav{width:auto;flex:1;min-width:0;gap:8px}.bar-nav nav a{font-size:12px;white-space:nowrap}.bar-nav nav .button{font-size:13px;padding-inline:10px;min-height:48px}.bar-nav{gap:8px}}
@media(max-width:370px){.bar-nav{padding-inline:10px;gap:6px}.bar-nav nav{gap:6px}.bar-nav nav .button{padding-inline:8px}}
@media(prefers-reduced-motion:reduce){.brand-page .button,.bar-nav .button,.content .button,.bar-booking .button{transition:none}}