/* =========================================================================
   THEME: every colour and font lives here. Change a value and the whole site follows.
   Source: official Cowgirls & Kicks Brand Guide v1 (18 Oct 2026).
   Rule of thumb: 60% cream, 30% black, 10% colour. Kick pink is the ONE pop colour.
   Lines marked "derived" are tints/shades of a brand colour, used only for badges/text contrast.
   ========================================================================= */
:root {
  /* The five brand colours */
  --brand-ink: #141414;          /* Ink black: text, header, footer */
  --brand-cream: #F7F1E6;        /* Cream: main background */
  --brand-pink: #E6197E;         /* Kick pink: buttons, active chip, key highlights (sparingly!) */
  --brand-tan: #C8A27C;          /* Saddle tan: warm accents, borders, dividers */
  --brand-denim: #3E5C7A;        /* Denim: secondary accents, links */
  --brand-white: #FFFFFF;

  /* Derived tints/shades (only for badges, text contrast and subtle backgrounds) */
  --brand-tan-tint: #F0E4D4;     /* derived */
  --brand-tan-dark: #6E5236;     /* derived: tan-family text on cream */
  --brand-denim-tint: #DDE5EE;   /* derived */
  --brand-denim-dark: #2A4057;   /* derived */
  --brand-pink-tint: #FCE4EF;    /* derived */
  --brand-pink-dark: #A3105A;    /* derived */
  --brand-ink-soft: #3A3633;     /* derived */
  --brand-muted: #5E5750;        /* derived: secondary text (6:1 on cream) */

  /* Roles (components use these) */
  --color-bg: var(--brand-cream);
  --color-surface: var(--brand-white);
  --color-text: var(--brand-ink);
  --color-text-muted: var(--brand-muted);
  --color-header-bg: var(--brand-ink);
  --color-header-text: var(--brand-white);
  --color-header-accent: var(--brand-tan);
  --color-primary: var(--brand-pink);
  --color-on-primary: var(--brand-white);
  --color-secondary: var(--brand-denim);
  --color-on-secondary: var(--brand-white);
  --color-link: var(--brand-denim);
  --color-border: #E4D6C3;       /* derived from Saddle tan */
  --color-divider: var(--brand-tan);
  --color-focus: var(--brand-denim);
  --color-chip-active-bg: var(--brand-pink);
  --color-chip-active-text: var(--brand-white);
  --color-tip-bg: var(--brand-pink-tint);
  --color-tip-border: var(--brand-pink);
  --color-progress-track: var(--brand-tan-tint);
  --color-progress-fill: var(--brand-pink);
  --color-footer-bg: var(--brand-ink);
  --color-footer-text: #EDE5D8;
  --color-footer-link: var(--brand-tan);
  --color-hero-overlay: linear-gradient(180deg, rgba(20,20,20,.05) 0%, rgba(20,20,20,.30) 50%, rgba(20,20,20,.82) 100%);
  --color-photo-text: var(--brand-white);
  --shadow-photo-text: 0 2px 6px rgba(0,0,0,.65), 0 0 2px rgba(0,0,0,.6);
  --color-spotify: #1DB954;
  --color-spotify-text: #08240F;
  --color-coming-soon-bg: var(--brand-ink);
  --color-coming-soon-accent: var(--brand-tan);

  /* Level badges: --lvl-<level>-bg / -fg (tan → denim → pink → black, never a rainbow) */
  --lvl-absolute-beginner-bg: var(--brand-tan-tint);   --lvl-absolute-beginner-fg: var(--brand-tan-dark);
  --lvl-beginner-bg: var(--brand-tan);                 --lvl-beginner-fg: var(--brand-ink);
  --lvl-high-beginner-bg: var(--brand-denim-tint);     --lvl-high-beginner-fg: var(--brand-denim-dark);
  --lvl-improver-bg: var(--brand-denim);               --lvl-improver-fg: var(--brand-white);
  --lvl-high-improver-bg: var(--brand-denim-dark);     --lvl-high-improver-fg: var(--brand-white);
  --lvl-easy-intermediate-bg: var(--brand-pink-tint);  --lvl-easy-intermediate-fg: var(--brand-pink-dark);
  --lvl-intermediate-bg: var(--brand-pink);            --lvl-intermediate-fg: var(--brand-white);
  --lvl-high-intermediate-bg: var(--brand-pink-dark);  --lvl-high-intermediate-fg: var(--brand-white);
  --lvl-easy-advanced-bg: var(--brand-ink-soft);       --lvl-easy-advanced-fg: var(--brand-white);
  --lvl-advanced-bg: var(--brand-ink);                 --lvl-advanced-fg: var(--brand-tan);
  --lvl-other-bg: var(--brand-tan-tint);               --lvl-other-fg: var(--brand-ink);

  /* Fonts */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;  /* weight 900, capitals */
  --font-body: "Lato", "Inter", "Open Sans", "Helvetica Neue", Arial, sans-serif;

  /* Shape */
  --radius: 16px;
  --shadow: 0 1px 2px rgba(20,20,20,.06), 0 6px 18px rgba(20,20,20,.07);
}
/* ======================= end of THEME ======================= */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size: 17px; line-height: 1.5;
  min-height: 100vh; display: flex; flex-direction: column;
  padding-bottom: calc(64px + max(6px, env(safe-area-inset-bottom, 0px))); /* room for bottom tabs */
}
a { color: var(--color-link); }
button { font-family: inherit; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.display { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: .01em; }

/* Header (sticky black bar; the hero scrolls away underneath it) */
.site-header { background: var(--color-header-bg); color: var(--color-header-text); position: sticky; top: 0; z-index: 30;
  padding-top: env(safe-area-inset-top); }
.header-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 6px 14px; }
.brand { display: block; line-height: 0; padding: 2px; }
.logo { width: 48px; height: auto; display: block; }
.header-title { display: flex; flex-direction: column; line-height: 1.1; flex: 1; min-width: 0; }
.header-kicker { font-size: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-header-accent); }
.header-name { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 18px; letter-spacing: .02em; }
.header-link { color: var(--color-header-text); border: 1.5px solid rgba(255,255,255,.7); text-decoration: none; padding: 6px 12px;
  border-radius: 99px; font-size: 16px; font-weight: 700; white-space: nowrap; text-transform: uppercase; letter-spacing: .04em; }
.header-link:hover { background: rgba(255,255,255,.1); }

/* Section tabs: in the header on desktop, a bottom bar on mobile */
.tabs { display: none; }
.tab { text-decoration: none; display: flex; align-items: center; gap: 6px; font-weight: 700; }
/* Bottom nav sits above anything a host injects (Netlify badge iframe uses z-index 2147483645),
   and clears the iPhone home indicator via the safe-area inset. */
.bottom-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483647; display: flex; background: var(--color-header-bg);
  padding-bottom: 0; padding-bottom: max(6px, env(safe-area-inset-bottom, 0px));
  padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px);
  transform: translateZ(0); isolation: isolate; touch-action: manipulation; }
.bottom-tabs .tab { flex: 1; flex-direction: column; justify-content: center; gap: 0; min-height: 58px; color: #BDB5AB; font-size: 16px;
  text-transform: uppercase; letter-spacing: .06em; }
.bottom-tabs .tab .tab-icon { font-size: 20px; line-height: 1.25; }
.bottom-tabs .tab[aria-current="page"] { color: var(--brand-white); box-shadow: inset 0 3px 0 var(--color-primary); }

/* Hero */
.hero { position: relative; color: var(--color-photo-text); overflow: hidden; background: var(--brand-ink); }
.hero picture, .hero img.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero img.hero-img { object-fit: cover; object-position: var(--hero-focus, 50% 30%); }
.hero::after { content: ""; position: absolute; inset: 0; background: var(--color-hero-overlay); }
.hero-inner { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 64px 16px 14px; min-height: 172px;
  display: flex; flex-direction: column; justify-content: flex-end; }
.hero h1 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 28px; line-height: 1.05; margin: 0 0 6px;
  text-shadow: var(--shadow-photo-text); letter-spacing: .01em; }
.hero p { margin: 0; font-size: 17px; font-weight: 700; max-width: 34em; text-shadow: var(--shadow-photo-text); }
.hero .hero-kicker { font-size: 16px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 4px; color: var(--brand-white); }
.hero .hero-kicker::before { content: ""; display: inline-block; width: 22px; height: 2px; background: var(--brand-pink); vertical-align: middle; margin-right: 8px; }

.status { max-width: 1100px; margin: 10px auto 0; padding: 8px 14px; font-size: 17px; color: var(--color-text);
  background: var(--brand-tan-tint); border: 1px solid var(--color-border); border-radius: 12px; width: calc(100% - 28px); }

.app { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 14px 14px 30px; }
.loading { text-align: center; color: var(--color-text-muted); padding: 40px 0; }

/* Progress */
.progress-card { background: var(--color-surface); border-radius: var(--radius); padding: 10px 14px; box-shadow: var(--shadow); margin-bottom: 12px; }
.progress-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.progress-title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 16px; letter-spacing: .02em; }
.progress-count { color: var(--color-text-muted); font-size: 16px; font-weight: 700; }
.progress-bar { height: 8px; background: var(--color-progress-track); border-radius: 99px; margin-top: 8px; overflow: hidden; }
.progress-bar span { display: block; height: 100%; background: var(--color-progress-fill); border-radius: 99px; transition: width .3s; }
.milestone { margin: 6px 0 0; font-size: 17px; color: var(--color-text-muted); }

/* Start here card */
.start-card { position: relative; background: var(--color-surface); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px;
  box-shadow: var(--shadow); border-top: 4px solid var(--color-divider); }
.start-card h2 { margin: 0 0 4px; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 17px; padding-right: 30px; line-height: 1.2; }
.start-card .tagline { margin: 0 0 4px; font-size: 16px; padding-right: 30px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-tan-dark); }
.start-card p { margin: 0 0 10px; font-size: 17px; line-height: 1.4; }
.start-card .dismiss { position: absolute; top: 6px; right: 6px; border: 0; background: transparent; font-size: 22px; width: 36px; height: 36px;
  color: var(--color-text-muted); cursor: pointer; border-radius: 50%; }

/* WhatsApp community (members only): ink button, cream text, small WhatsApp-green icon */
.wa-card { position: relative; background: var(--brand-ink); color: var(--brand-cream); border-radius: var(--radius); padding: 14px 14px 16px; margin-bottom: 12px;
  box-shadow: var(--shadow); border-top: 4px solid var(--brand-pink); }
.wa-card h2 { margin: 0 0 4px; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 18px; padding-right: 34px; line-height: 1.2; color: var(--brand-cream); }
.wa-card .tagline { margin: 0 0 4px; font-size: 16px; padding-right: 34px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-tan); }
.wa-card p { margin: 0 0 12px; font-size: 17px; line-height: 1.4; }
.wa-card .dismiss { position: absolute; top: 6px; right: 6px; border: 0; background: transparent; font-size: 24px; width: 40px; height: 40px;
  color: var(--brand-cream); cursor: pointer; border-radius: 50%; }
.wa-card .dismiss:hover { background: rgba(247,241,230,.12); }
.btn.wa-btn { font-family: var(--font-body); font-weight: 700; background: var(--brand-pink); color: var(--brand-cream); border-color: var(--brand-pink); gap: 8px; }
.btn.wa-btn:hover { background: var(--brand-pink-dark); border-color: var(--brand-pink-dark); }
.wa-account .btn.wa-btn { background: var(--brand-ink); border-color: var(--brand-ink); }
.wa-account .btn.wa-btn:hover { background: var(--brand-ink-soft); border-color: var(--brand-ink-soft); }
.wa-icon { flex: none; display: block; }
.wa-account p { margin-top: 0; }

/* Search & filters */
.search { position: relative; margin-bottom: 10px; }
.search input { width: 100%; font: inherit; font-size: 16px; padding: 12px 40px 12px 14px; border-radius: 14px;
  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); }
.search input:focus { outline: 3px solid var(--color-focus); outline-offset: 0; border-color: transparent; }
.search-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent;
  font-size: 22px; color: var(--color-text-muted); width: 34px; height: 34px; cursor: pointer; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 14px 8px; margin: 0 -14px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: 0 0 auto; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); border-radius: 99px;
  padding: 7px 14px; font-size: 16px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.chip[aria-pressed="true"] { background: var(--color-chip-active-bg); color: var(--color-chip-active-text); border-color: var(--color-chip-active-bg); }
.chip.fav[aria-pressed="true"] { background: var(--brand-ink); border-color: var(--brand-ink); color: var(--brand-white); }
.result-count { color: var(--color-text-muted); font-size: 16px; margin: 4px 2px 10px; font-weight: 700; }

/* Cards */
.cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 12px; }
.card { background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow); position: relative;
  border-left: 6px solid var(--lvl-bg, var(--color-divider)); }
.card-link { display: block; padding: 13px 52px 13px 14px; color: inherit; text-decoration: none; border-radius: var(--radius); }
.card h2 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 18px; margin: 0 0 6px; line-height: 1.2; letter-spacing: .01em; }
.card .meta { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-bottom: 6px; }
.card .facts { color: var(--color-text-muted); font-size: 16px; font-weight: 700; }
.card .song { font-size: 17px; margin: 2px 0; }
.card .choreo { font-size: 16px; color: var(--color-text-muted); margin: 2px 0 0; }
.card .desc { font-size: 17px; margin: 2px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .status-pill { position: absolute; right: 12px; bottom: 12px; }
.card.step-card { border-left-color: var(--color-divider); }
.star { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer;
  font-size: 24px; color: #CDBBA5; line-height: 1; border-radius: 50%; }
.star[aria-pressed="true"] { color: var(--color-primary); }
.star:hover { background: var(--color-bg); }

.badge { display: inline-block; font-size: 16px; font-weight: 700; padding: 2px 10px; border-radius: 99px; line-height: 1.5; white-space: nowrap; }
.badge.club { background: var(--brand-ink); color: var(--brand-white); }
.badge.club::before { content: "▶ "; font-size: 16px; vertical-align: 1px; color: var(--brand-pink); }
.badge.video { background: var(--brand-denim-tint); color: var(--brand-denim-dark); }
.badge.cat { background: var(--brand-tan-tint); color: var(--brand-tan-dark); }
.lvl { background: var(--lvl-bg); color: var(--lvl-fg); }
[data-level="absolute-beginner"] { --lvl-bg: var(--lvl-absolute-beginner-bg); --lvl-fg: var(--lvl-absolute-beginner-fg); }
[data-level="beginner"]          { --lvl-bg: var(--lvl-beginner-bg); --lvl-fg: var(--lvl-beginner-fg); }
[data-level="high-beginner"]     { --lvl-bg: var(--lvl-high-beginner-bg); --lvl-fg: var(--lvl-high-beginner-fg); }
[data-level="improver"]          { --lvl-bg: var(--lvl-improver-bg); --lvl-fg: var(--lvl-improver-fg); }
[data-level="high-improver"]     { --lvl-bg: var(--lvl-high-improver-bg); --lvl-fg: var(--lvl-high-improver-fg); }
[data-level="easy-intermediate"] { --lvl-bg: var(--lvl-easy-intermediate-bg); --lvl-fg: var(--lvl-easy-intermediate-fg); }
[data-level="intermediate"]      { --lvl-bg: var(--lvl-intermediate-bg); --lvl-fg: var(--lvl-intermediate-fg); }
[data-level="high-intermediate"] { --lvl-bg: var(--lvl-high-intermediate-bg); --lvl-fg: var(--lvl-high-intermediate-fg); }
[data-level="easy-advanced"]     { --lvl-bg: var(--lvl-easy-advanced-bg); --lvl-fg: var(--lvl-easy-advanced-fg); }
[data-level="advanced"]          { --lvl-bg: var(--lvl-advanced-bg); --lvl-fg: var(--lvl-advanced-fg); }
[data-level="other"]             { --lvl-bg: var(--lvl-other-bg); --lvl-fg: var(--lvl-other-fg); }

.status-pill { font-size: 16px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--brand-tan-tint); color: var(--color-text); }
.status-pill.learning { background: var(--brand-denim-tint); color: var(--brand-denim-dark); }
.status-pill.got-it { background: var(--brand-ink); color: var(--brand-white); }

.empty { text-align: center; padding: 30px 14px; color: var(--color-text-muted); background: var(--color-surface); border-radius: var(--radius); }
.empty button, .empty .btn { margin-top: 10px; }

/* Detail pages */
.detail-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.back { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; color: var(--color-link); font-weight: 700;
  padding: 6px 10px 6px 4px; border-radius: 10px; }
.back:hover { background: var(--brand-denim-tint); }
.detail-top .star { position: static; margin-left: auto; }
.detail h1 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 30px; line-height: 1.1; margin: 0 0 8px; letter-spacing: .01em; }
.detail .song { font-size: 17px; margin: 0 0 8px; font-weight: 700; }
.detail .meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; color: var(--color-text-muted); font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.detail .choreo { color: var(--color-text-muted); font-size: 17px; margin: 0 0 14px; }
.player { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Our own portrait club videos (media/*.mp4): 9:16, phone-sized, centred on wider screens */
.player.player-mp4 { aspect-ratio: 9 / 16; width: min(100%, 400px, calc(78vh * 9 / 16)); margin: 0 auto; }
.player.player-mp4 video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.player.player-mp4 + .player-caption { text-align: center; }
@media print { .player.player-mp4 { display: none; } }
.player-caption { font-size: 17px; color: var(--color-text-muted); margin: 6px 2px 0; }
.coming-soon { aspect-ratio: 16 / 9; border-radius: var(--radius); background: var(--color-coming-soon-bg); color: var(--brand-cream);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; }
.coming-soon .icon { font-size: 30px; margin-bottom: 4px; }
.coming-soon strong { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 22px; color: var(--color-coming-soon-accent); }
.coming-soon span { font-size: 17px; opacity: .9; margin-top: 4px; max-width: 26em; }
.club-note { margin: 8px 2px 0; font-size: 17px; color: var(--color-text-muted); }
.section-label { font-size: 16px; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-tan-dark); margin: 20px 0 8px; font-weight: 700;
  display: flex; align-items: center; gap: 10px; }
.section-label::after { content: ""; flex: 1; height: 1px; background: var(--color-divider); opacity: .7; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 10px 18px; border-radius: 99px;
  font-size: 16px; font-weight: 700; text-decoration: none; cursor: pointer; letter-spacing: .02em;
  background: var(--brand-white); color: var(--brand-ink); border: 2px solid var(--brand-ink); }
.btn[aria-pressed="true"] { background: var(--brand-ink); color: var(--brand-white); }
.btn.primary { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); text-transform: uppercase; }
.btn.secondary { background: var(--color-secondary); color: var(--color-on-secondary); border-color: var(--color-secondary); }
.btn.spotify { background: var(--color-spotify); color: var(--color-spotify-text); border-color: var(--color-spotify); }
.btn.primary-soft { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.btn.ghost { background: transparent; color: var(--brand-ink); border-color: var(--brand-ink); }
.btn.small { min-height: 38px; padding: 7px 14px; font-size: 16px; }
.btn.caps { text-transform: uppercase; }
.segmented { display: inline-flex; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 99px; padding: 3px; gap: 2px; }
.segmented button { border: 0; background: transparent; padding: 8px 14px; border-radius: 99px; font-size: 16px; font-weight: 700; cursor: pointer; color: var(--color-text); min-height: 40px; }
.segmented button[aria-pressed="true"] { background: var(--brand-ink); color: var(--brand-white); }
.segmented button[data-status="got-it"][aria-pressed="true"] { background: var(--color-primary); color: var(--color-on-primary); }
.info-card { background: var(--color-surface); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); font-size: 16px; }
.info-card p { margin: 4px 0; }
.tip-card { background: var(--color-tip-bg); border-left: 5px solid var(--color-tip-border); border-radius: var(--radius); padding: 12px 14px; margin-top: 16px; }
.tip-card h2 { margin: 0 0 4px; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 16px; color: var(--brand-pink-dark); }
.tip-card p { margin: 0; }
.used-in { display: flex; flex-wrap: wrap; gap: 6px; }
.used-in a, .used-in span { display: inline-block; padding: 5px 12px; border-radius: 99px; font-size: 16px; font-weight: 700; text-decoration: none;
  background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); }
.used-in a { color: var(--color-link); }
.used-in a:hover { border-color: var(--color-link); }
.used-more { border: 0; background: none; color: var(--color-link); font-weight: 700; font-size: 16px; cursor: pointer; padding: 6px 4px; text-decoration: underline; }
.small { font-size: 16px; color: var(--color-text-muted); }

/* Footer */
.site-footer { background: var(--color-footer-bg); color: var(--color-footer-text); font-size: 17px; padding: 26px 16px 22px; text-align: center; }
.site-footer p { max-width: 640px; margin: 6px auto; }
.site-footer a { color: var(--color-footer-link); }
.footer-logo { width: 96px; height: auto; display: block; margin: 0 auto 10px; }
.footer-small { font-size: 16px; opacity: .7; }
.meet { max-width: 640px; margin: 0 auto 20px; text-align: left; display: grid; grid-template-columns: 1fr; gap: 12px; align-items: center;
  border-bottom: 1px solid rgba(200,162,124,.4); padding-bottom: 20px; }
.meet img { width: 100%; height: auto; border-radius: var(--radius); display: block; aspect-ratio: 3 / 2; object-fit: cover; }
.meet h2 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; color: var(--brand-white); font-size: 20px; margin: 0 0 4px; }
.meet p { margin: 0 0 6px; font-size: 17px; }
.meet .values { font-size: 16px; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-tan); font-weight: 700; }

@media (min-width: 640px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .logo { width: 56px; }
  .header-name { font-size: 21px; }
  .detail h1 { font-size: 40px; }
  .hero-inner { min-height: 280px; padding-bottom: 24px; }
  .hero h1 { font-size: 46px; }
  .hero p { font-size: 18px; }
  .chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 2px 0 8px; }
  .meet { grid-template-columns: 220px 1fr; gap: 18px; }
}
@media (min-width: 860px) {
  body { padding-bottom: 0; }
  .bottom-tabs { display: none; }
  .tabs { display: flex; gap: 4px; margin-right: 6px; }
  .tabs .tab { color: #D3CBC0; padding: 8px 14px; border-radius: 99px; font-size: 16px; text-transform: uppercase; letter-spacing: .06em; }
  .tabs .tab:hover { color: var(--brand-white); background: rgba(255,255,255,.08); }
  .tabs .tab[aria-current="page"] { color: var(--brand-white); box-shadow: inset 0 -3px 0 var(--color-primary); border-radius: 0; }
  .hero-inner { min-height: 380px; }
  .hero img.hero-img { object-position: var(--hero-focus-wide, 50% 12%); }
}
@media (min-width: 960px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
  .detail { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0 28px; align-items: start; }
  .detail-head, .detail-top { grid-column: 1 / -1; }
  .detail-media { grid-column: 1; }
  .detail-side { grid-column: 2; }
  .detail-side .section-label:first-child { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.used-in [hidden] { display: none; }

/* =========================================================================
   Member accounts: welcome page, taster, forms, account page
   ========================================================================= */
.tab[hidden], .header-link[hidden], [hidden].field { display: none !important; }
body:not(.accounts-on) .accounts-only { display: none; }
.bottom-tabs .tab-label { display: inline; }
/* On phones the header has room for one pill: show the account pill, not "Club site" */
@media (max-width: 699px) { body.accounts-on #club-link { display: none; } }

.welcome-cta { background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 16px 16px;
  border-top: 4px solid var(--brand-pink); margin-bottom: 6px; }
.welcome-cta .tagline { margin: 0 0 6px; font-size: 16px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-tan-dark); }
.welcome-cta h2 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 22px; line-height: 1.15; margin: 0 0 8px; }
.welcome-cta p { margin: 0 0 10px; font-size: 16px; }
.perks { list-style: none; padding: 0; margin: 4px 0 14px; display: grid; gap: 6px; font-size: 17px; }
.perks li { position: relative; padding-left: 26px; }
.perks li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--brand-tan-tint);
  color: var(--brand-tan-dark); font-weight: 900; font-size: 16px; display: flex; align-items: center; justify-content: center; margin-top: 3px; }
.welcome-cta .btn-row { margin-bottom: 8px; }

.lock-card { background: var(--brand-ink); color: var(--brand-white); border-radius: var(--radius); padding: 18px 16px; margin: 18px 0 8px; text-align: center; }
.lock-card .lock-icon { font-size: 28px; line-height: 1; margin-bottom: 6px; }
.lock-card h2 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 19px; margin: 0 0 6px; color: var(--brand-white); }
.lock-card p { margin: 0 auto 12px; font-size: 17px; color: #EDE5D8; max-width: 32em; }
.lock-card .btn-row { justify-content: center; }
.lock-card .btn.ghost { color: var(--brand-white); border-color: rgba(255,255,255,.8); }
.detail.locked .lock-card { margin-top: 10px; }
.taster-note { margin: 8px 0 0; }

.account-page { max-width: 560px; margin: 0 auto; }
.page-title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 26px; line-height: 1.1; margin: 6px 0 8px; }
.account-page .intro { margin: 0 0 16px; font-size: 16px; }
.form { display: block; }
.account-page > .form { background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
.field { margin: 0 0 14px; }
.field > label { display: block; font-weight: 700; font-size: 16px; margin: 0 0 5px; }
.field .optional { font-weight: 400; color: var(--color-text-muted); }
.field input:not([type=checkbox]), .field select {
  width: 100%; min-height: 48px; padding: 10px 12px; font: inherit; font-size: 17px; color: var(--color-text);
  background: var(--brand-white); border: 1.5px solid var(--color-border); border-radius: 12px; }
.field select { appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--brand-ink) 50%), linear-gradient(135deg, var(--brand-ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
.field input:focus, .field select:focus { outline: none; border-color: var(--brand-denim); box-shadow: 0 0 0 3px var(--brand-denim-tint); }
.field .hint { margin: 5px 0 0; font-size: 16px; color: var(--color-text-muted); }
.field.check { display: flex; gap: 10px; align-items: flex-start; background: var(--brand-tan-tint); border-radius: 12px; padding: 12px; }
.field.check input { width: 24px; height: 24px; flex: none; margin: 1px 0 0; accent-color: var(--brand-pink); }
.field.check label { font-weight: 400; font-size: 17px; margin: 0; }
.code-input { font-size: 30px !important; letter-spacing: .45em; text-align: center; font-weight: 900; font-variant-numeric: tabular-nums; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn.wide { width: 100%; margin-top: 4px; }
.btn.danger { background: var(--brand-white); color: #A3105A; border-color: #A3105A; }
.btn:disabled { opacity: .55; cursor: default; }
.form-error { background: var(--brand-pink-tint); color: var(--brand-pink-dark); border-left: 4px solid var(--brand-pink); border-radius: 8px;
  padding: 10px 12px; font-size: 17px; margin: 0 0 12px; }
.form-error a { color: var(--brand-pink-dark); font-weight: 700; }
.form-ok { color: var(--brand-denim-dark); font-weight: 700; margin: 0 0 10px; }
.form-foot { text-align: center; margin: 14px 0 0; font-size: 17px; }
.code-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.linkish { background: none; border: 0; color: var(--color-link); text-decoration: underline; font-size: 16px; padding: 6px; cursor: pointer; }
.linkish:disabled { color: var(--color-text-muted); text-decoration: none; }
.draft-note { display: inline-block; margin: 6px 0 0; font-size: 16px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
  background: #FFF3BF; color: #5C4A00; border: 1px dashed #B39200; border-radius: 6px; padding: 2px 7px; }
.form > .draft-note { margin: -6px 0 14px; }
.draft-banner { background: #FFF3BF; color: #3D3100; border: 2px dashed #B39200; border-radius: 12px; padding: 12px 14px; font-size: 17px; margin: 6px 0 14px; }
.account-summary p { margin: 2px 0; }
.sync-line { margin: 8px 0 0; font-size: 16px; color: var(--color-text-muted); }
.danger-zone { border: 1.5px solid #E7B9CF; border-radius: var(--radius); padding: 12px 14px; background: var(--brand-white); }
.danger-zone .small { margin-top: 0; }
.delete-confirm { margin-top: 12px; }
.privacy h2 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 18px; margin: 20px 0 6px; }
.privacy p, .privacy li { font-size: 16px; }
.privacy ul { padding-left: 20px; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(80px + env(safe-area-inset-bottom, 0px)); z-index: 2147483647;
  background: var(--brand-ink); color: var(--brand-white); padding: 10px 16px; border-radius: 12px; font-size: 17px; max-width: calc(100% - 28px);
  box-shadow: 0 6px 20px rgba(0,0,0,.25); border-left: 4px solid var(--brand-pink); }
@media (min-width: 700px) { .toast { bottom: 24px; } .welcome-cta { padding: 24px; } .welcome-cta h2 { font-size: 28px; } }

/* =========================================================================
   Club photos: bands, form headers, photo-backed members cards
   ========================================================================= */
.photo-band { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--brand-ink); color: var(--brand-white);
  margin: 22px 0 8px; min-height: 300px; display: flex; align-items: flex-end; box-shadow: var(--shadow); }
.photo-band .band-photo, .photo-band .band-photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.photo-band .band-photo img { object-fit: cover; }
.photo-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,20,20,.05) 0%, rgba(20,20,20,.55) 38%, rgba(20,20,20,.90) 100%); }
.band-inner { position: relative; z-index: 1; padding: 90px 18px 18px; }
.band-kicker { margin: 0 0 4px; font-size: 16px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-white); text-shadow: var(--shadow-photo-text); }
.band-kicker::before { content: ""; display: inline-block; width: 22px; height: 2px; background: var(--brand-pink); vertical-align: middle; margin-right: 8px; }
.photo-band h2 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 24px; line-height: 1.08; margin: 0 0 6px; text-shadow: var(--shadow-photo-text); }
.photo-band p { margin: 0 0 12px; font-size: 17px; font-weight: 700; max-width: 34em; text-shadow: var(--shadow-photo-text); }
.photo-band .btn.ghost { color: var(--brand-white); border-color: rgba(255,255,255,.85); }
.form-photo { position: relative; height: 150px; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; margin: 6px 0 -6px; background: var(--brand-ink); }
.form-photo .band-photo, .form-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.form-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,20,20,0) 40%, rgba(20,20,20,.35) 100%); }
.form-photo + .form { border-top-left-radius: 0; border-top-right-radius: 0; border-top: 4px solid var(--brand-pink); }
.lock-card.has-photo { position: relative; overflow: hidden; padding-top: 34px; padding-bottom: 22px; }
.lock-card.has-photo > * { position: relative; z-index: 1; }
.lock-card.has-photo .lock-photo, .lock-card.has-photo .lock-photo img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.lock-card.has-photo .lock-photo img { object-fit: cover; }
.lock-card.has-photo::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(20,20,20,.62) 0%, rgba(20,20,20,.84) 60%, rgba(20,20,20,.92) 100%); }
.lock-card.has-photo h2, .lock-card.has-photo p { text-shadow: 0 1px 4px rgba(0,0,0,.6); }
@media (min-width: 700px) { .photo-band { min-height: 360px; } .photo-band h2 { font-size: 32px; } .band-inner { padding: 120px 28px 24px; } .form-photo { height: 200px; } }

/* =========================================================================
   Community ideas
   ========================================================================= */
.ideas-page { max-width: 720px; margin: 0 auto; }
.ideas-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 4px 0 12px; }
.ideas-head .intro { flex: 1 1 260px; margin: 0; font-size: 16px; }
.ideas-tools { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.seg { display: inline-flex; background: var(--brand-tan-tint); border-radius: 99px; padding: 3px; }
.seg button { border: 0; background: transparent; font: inherit; font-weight: 900; font-size: 16px; letter-spacing: .04em; text-transform: uppercase;
  padding: 8px 16px; min-height: 38px; border-radius: 99px; color: var(--brand-tan-dark); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--brand-ink); color: var(--brand-white); }
#ideas-list { display: grid; gap: 12px; margin-top: 6px; }
.idea-card { padding: 14px 14px 10px; border-left: 4px solid var(--color-divider); }
.idea-card.pinned { border-left-color: var(--brand-pink); }
.idea-card.is-hidden { opacity: .78; background: repeating-linear-gradient(135deg, #fff, #fff 12px, #FBF6EE 12px, #FBF6EE 24px); }
.idea-top { display: flex; gap: 12px; align-items: flex-start; }
.idea-main { flex: 1; min-width: 0; }
.idea-card h2 { font-size: 18px; margin: 2px 0 4px; overflow-wrap: anywhere; }
.idea-body { margin: 0 0 6px; font-size: 17px; white-space: pre-line; overflow-wrap: anywhere; }
.idea-by { margin: 0; }
.idea-note { margin: 6px 0 0; font-size: 16px; color: var(--brand-tan-dark); font-weight: 700; }
.badge.pin { background: var(--brand-pink-tint); color: var(--brand-pink-dark); }
.badge.idea-status { background: var(--brand-denim); color: var(--brand-white); }
.badge.idea-status[data-status="done"] { background: var(--brand-ink); color: var(--brand-tan); }
.badge.idea-status[data-status="done"]::before { content: "✓ "; }
.badge.idea-status[data-status="not-now"] { background: var(--brand-tan-tint); color: var(--brand-tan-dark); }
.badge.hidden-badge { background: #FFF3BF; color: #5C4A00; }
.vote-btn { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 58px; min-height: 64px; padding: 6px 4px;
  border: 1.5px solid var(--color-border); border-radius: 14px; background: var(--brand-white); color: var(--brand-ink); font: inherit; cursor: pointer; touch-action: manipulation; }
.vote-btn .arrow { font-size: 16px; line-height: 1; color: var(--brand-tan-dark); }
.vote-btn .n { font-size: 20px; font-weight: 900; line-height: 1.15; font-variant-numeric: tabular-nums; }
.vote-btn .vlabel { font-size: 16px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.vote-btn[aria-pressed="true"] { background: var(--brand-pink); border-color: var(--brand-pink); color: var(--brand-white); }
.vote-btn[aria-pressed="true"] .arrow, .vote-btn[aria-pressed="true"] .vlabel { color: var(--brand-white); }
.vote-btn:disabled { opacity: .5; cursor: default; }
.vote-btn:focus-visible, .seg button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.idea-actions { display: flex; flex-wrap: wrap; gap: 2px 14px; align-items: center; margin-top: 6px; border-top: 1px solid var(--color-border); padding-top: 4px; }
.idea-actions .linkish, .idea-actions a.linkish { font-size: 16px; font-weight: 700; text-decoration: none; padding: 8px 2px; min-height: 40px; display: inline-flex; align-items: center; }
.danger-link { color: var(--brand-pink-dark) !important; }
.linkish.armed, .btn.armed { color: var(--brand-white) !important; background: var(--brand-pink-dark); border-radius: 99px; padding-left: 10px !important; padding-right: 10px !important; }
.idea-comments { margin: 6px 0 4px; padding: 10px 12px; background: var(--brand-cream); border-radius: 12px; }
.comment-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.comment-list li { border-bottom: 1px dashed var(--color-border); padding-bottom: 6px; }
.comment-body { margin: 0 0 2px; font-size: 17px; white-space: pre-line; overflow-wrap: anywhere; }
.small-link { font-size: 16px; padding: 2px 4px; }
.comment-form textarea, #idea-form textarea { width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border: 1.5px solid var(--color-border);
  border-radius: 12px; background: var(--brand-white); color: var(--color-text); resize: vertical; }
#idea-form textarea { min-height: 110px; }
.comment-form textarea:focus, #idea-form textarea:focus { outline: none; border-color: var(--brand-denim); box-shadow: 0 0 0 3px var(--brand-denim-tint); }
.comment-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; }
.comment-form .form-error { margin: 8px 0 0; }
.counter { font-variant-numeric: tabular-nums; }
.admin-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px -14px -10px; padding: 10px 14px;
  background: var(--brand-ink); color: var(--brand-white); border-radius: 0 0 var(--radius) var(--radius); }
.admin-bar .admin-label { font-size: 16px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-tan); }
.admin-bar label { font-size: 16px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.admin-bar select { font: inherit; font-size: 16px; min-height: 38px; border-radius: 10px; padding: 4px 8px; border: 0; }
.admin-bar .btn.ghost { color: var(--brand-white); border-color: rgba(255,255,255,.7); }
.admin-bar .btn.ghost[aria-pressed="true"] { background: var(--brand-white); color: var(--brand-ink); }
.ideas-empty .empty-icon { font-size: 34px; }
.ideas-empty h2 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 20px; color: var(--brand-ink); margin: 4px 0 6px; }
.ideas-empty p { max-width: 30em; margin: 0 auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* four tabs on small phones: keep labels on one line and targets big */
@media (max-width: 360px) { .bottom-tabs .tab { font-size: 16px; } }

/* Home-screen / install hints (iOS Safari keeps separate storage from the home-screen app) */
.standalone-hint { background: var(--brand-tan-tint); border-left: 4px solid var(--brand-tan); border-radius: 8px; padding: 10px 12px; margin: 10px 0 14px; font-size: 17px; color: var(--brand-ink); line-height: 1.4; }
.install-tip { margin-bottom: 14px; }
#forgot-email a { font-weight: 700; }

/* ---------- Step sheet (our own, classic step-sheet layout) ---------- */
.stepsheet { grid-column: 1 / -1; margin: 26px 0 8px; background: var(--brand-white); color: var(--brand-ink);
  border: 1px solid var(--color-border, var(--brand-tan)); border-top: 5px solid var(--brand-pink); border-radius: var(--radius);
  padding: 18px 16px 16px; box-shadow: var(--shadow); scroll-margin-top: 72px; }
.stepsheet.ss-locked { text-align: center; background: var(--brand-tan-tint); }
.stepsheet.ss-locked .btn-row { justify-content: center; }
.stepsheet.ss-locked .lock-icon { font-size: 28px; }
.stepsheet.ss-empty { background: transparent; border: 0; padding: 0; box-shadow: none; }
.stepsheet .ss-soon { aspect-ratio: auto; min-height: 150px; }
.ss-head { text-align: center; border-bottom: 2px solid var(--brand-ink); padding-bottom: 12px; margin-bottom: 4px; }
.ss-kicker { margin: 0 0 2px; font-size: 16px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-pink-dark); }
.draft-label { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 99px; font-size: 16px; letter-spacing: .1em;
  background: var(--brand-tan-tint); color: var(--brand-tan-dark); border: 1px solid var(--brand-tan); vertical-align: 1px; }
.ss-title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 26px; line-height: 1.1; margin: 0 0 10px; letter-spacing: .01em; }
.ss-facts { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.ss-facts div { background: var(--brand-cream); border: 1px solid var(--brand-tan); border-radius: 10px; padding: 4px 12px; min-width: 70px; }
.ss-facts dt { font-size: 16px; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-tan-dark); font-weight: 700; }
.ss-facts dd { margin: 0; font-weight: 700; font-size: 17px; }
.ss-line { margin: 2px 0; font-size: 17px; }
.ss-line.small { font-size: 16px; }
.ss-start, .ss-phrasing { margin-top: 8px; }
.ss-section { padding: 12px 0 6px; border-bottom: 1px solid var(--brand-tan-tint); break-inside: avoid; page-break-inside: avoid; }
.ss-section h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; font-family: var(--font-display); font-weight: 900; font-size: 16px; line-height: 1.25; }
.ss-range { flex: none; font-family: var(--font-body); font-size: 16px; font-weight: 700; letter-spacing: .06em; color: var(--brand-white);
  background: var(--brand-ink); border-radius: 99px; padding: 2px 9px; white-space: nowrap; }
.ss-tag .ss-range { background: var(--brand-pink); }
.ss-tag { background: var(--brand-pink-tint); margin: 10px -16px 0; padding: 12px 16px 6px; border-bottom: 0; }
.ss-when { margin: 0 0 6px; font-size: 17px; font-style: italic; }
.ss-steps { list-style: none; margin: 0; padding: 0; }
.ss-steps li { display: grid; grid-template-columns: 3.6em 1fr auto; gap: 2px 8px; padding: 5px 0; font-size: 16px; line-height: 1.4; align-items: baseline; }
.ss-steps li + li { border-top: 1px dotted var(--brand-tan-tint); }
.ss-count { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--brand-ink); white-space: nowrap; }
.ss-face { font-size: 16px; font-weight: 700; color: var(--brand-denim-dark); background: var(--brand-denim-tint); border-radius: 99px; padding: 1px 7px; white-space: nowrap; }
.ss-styling { margin: 6px 0 0; font-size: 16px; line-height: 1.4; font-style: italic; color: var(--brand-ink-soft); }
.ss-again { margin: 12px 0 0; text-align: center; font-size: 17px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-pink-dark); }
.ss-ends { margin: 4px 0 0; text-align: right; font-size: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-muted); }
.step-link { color: var(--brand-ink); text-decoration: underline; text-decoration-color: var(--brand-pink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.step-link:hover, .step-link:focus { color: var(--brand-pink-dark); }
.ss-box { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--brand-cream); border-left: 4px solid var(--brand-tan); break-inside: avoid; page-break-inside: avoid; }
.ss-box h3 { margin: 0 0 4px; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 16px; letter-spacing: .02em; }
.ss-box p, .ss-box ul { margin: 0; font-size: 17px; }
.ss-box ul { padding-left: 18px; }
.ss-box li + li { margin-top: 4px; }
.ss-restarts { border-left-color: var(--brand-pink); }
.ss-tip { background: var(--color-tip-bg); border-left-color: var(--color-tip-border); }
.ss-credit { margin-top: 14px; padding-top: 10px; border-top: 2px solid var(--brand-ink); text-align: center; font-size: 17px; color: var(--brand-ink-soft); }
.ss-credit p { margin: 2px 0; }
.ss-club { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: var(--brand-pink-dark); }
@media (max-width: 380px) { .ss-steps li { grid-template-columns: 3.1em 1fr; } .ss-face { grid-column: 2; justify-self: start; } .stepsheet { padding: 16px 12px 14px; } .ss-tag { margin: 10px -12px 0; padding: 12px 12px 6px; } }
@media (min-width: 640px) { .stepsheet { padding: 26px 30px 22px; } .ss-title { font-size: 34px; } .ss-tag { margin: 10px -30px 0; padding: 12px 30px 6px; } }

/* ---------- Print: just the step sheet, ink on white ---------- */
@media print {
  @page { margin: 14mm 12mm; }
  html, body { background: #fff !important; color: #000 !important; font-size: 11pt; padding: 0 !important; }
  .site-header, .bottom-tabs, .hero, #hero-slot, .site-footer, .detail-top, .detail-head, .detail-media, .detail-side, .toast, #status, .standalone-hint, .install-tip, .install-sheet-wrap, .ss-teaser { display: none !important; }
  main, #app, .detail { display: block !important; margin: 0 !important; padding: 0 !important; max-width: none !important; }
  .stepsheet { display: block; margin: 0; padding: 0; border: 0; box-shadow: none; background: #fff; }
  .ss-head { border-bottom: 2px solid #000; }
  .ss-title { font-size: 24pt; color: #000; }
  .ss-kicker, .ss-club { color: #000; }
  .draft-label { border-color: #000; color: #000; background: #fff; }
  .ss-facts div, .ss-box, .ss-tag { background: #fff !important; border-color: #000; }
  .ss-tag { margin: 8px 0 0; padding: 8px 0 4px; border-top: 1px solid #000; }
  .ss-range { background: #fff !important; color: #000 !important; border: 1px solid #000; }
  .ss-face { background: #fff; color: #000; border: 1px solid #555; }
  .ss-steps li { font-size: 11pt; padding: 2px 0; }
  .ss-section { break-inside: avoid; page-break-inside: avoid; border-bottom: 1px solid #999; }
  .step-link { color: #000; text-decoration: none; }
  .ss-credit { color: #000; display: block !important; break-inside: avoid; }
  .ss-box { border-radius: 0; border-left: 3px solid #000; padding: 4px 10px; margin-top: 8px; }
  .ss-box p, .ss-box ul { font-size: 10pt; }
  .ss-section { padding: 6px 0 3px; }
  .ss-section h3 { font-size: 12pt; margin-bottom: 3px; }
  .ss-ends { font-size: 8pt; margin-top: 1px; }
  .ss-facts { margin-bottom: 6px; }
  .ss-line { font-size: 10.5pt; }
}
.btn[hidden] { display: none !important; }

/* ---------- Club shop ---------- */
.header-shop { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 40px; height: 40px; padding: 0 8px;
  border-radius: 99px; text-decoration: none; color: var(--color-header-text); border: 1.5px solid rgba(255,255,255,.7); font-size: 18px; line-height: 1; }
.header-shop:hover { background: rgba(255,255,255,.1); }
.header-shop-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 860px) { .header-shop { display: none; } }
.shop-card { margin: 22px 0 6px; padding: 16px 16px 18px; border-radius: var(--radius); background: var(--brand-white);
  border: 1px solid var(--color-border); border-left: 5px solid var(--brand-pink); box-shadow: var(--shadow); }
.shop-card .tagline { margin: 0 0 4px; font-size: 16px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-pink-dark); }
.shop-card h2 { margin: 0 0 4px; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 20px; line-height: 1.15; }
.shop-card p { margin: 0 0 12px; }
@media print { .shop-card, .header-shop { display: none !important; } }
/* Phone header with the shop icon: keep the title on two lines (kicker + name) */
@media (max-width: 459px) {
  .header-inner { gap: 8px; padding: 6px 10px; }
  .logo { width: 42px; }
  .header-shop { min-width: 34px; height: 34px; padding: 0 6px; font-size: 16px; }
  .header-link { padding: 6px 10px; font-size: 16px; letter-spacing: .02em; }
  /* 16px text floor: the header button says just "Account" on phones (full "My account" is its aria-label) */
  .header-link .hl-my { display: none; }
  .header-kicker { font-size: 16px; letter-spacing: .04em; }
  .header-name { font-size: 17px; }
  .header-kicker, .header-name { white-space: nowrap; }
}
@media (max-width: 389px) { .header-name { font-size: 16px; letter-spacing: 0; } .header-kicker { letter-spacing: 0; }
  .header-inner { gap: 6px; padding: 6px 8px; } .logo { width: 36px; } .header-link { padding: 6px 9px; letter-spacing: 0; } }
/* Very narrow phones (under 350px): let the title wrap rather than shrink text below 16px */
@media (max-width: 349px) { .header-kicker, .header-name { white-space: normal; } }

/* ---------- Dance stats (admins only, #/stats) ---------- */
.stats-page { max-width: 720px; }
.stats-page .detail-top { margin-bottom: 4px; }
.stats-summary #stats-members, .stats-summary #stats-dances { font-family: var(--font-display); font-weight: 900; font-size: 22px; }
.stats-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; color: var(--color-text-muted); }
.stats-legend > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.stats-legend .key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.stats-legend .key.got, .stats-bar .seg.got { background: var(--brand-denim); }
.stats-legend .key.learning, .stats-bar .seg.learning { background: var(--brand-tan); }
.stats-legend .key.not { background: var(--brand-tan-tint); border: 1px solid var(--color-border); }
.stats-search { margin-top: 4px; }
.stats-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.stats-row { background: var(--color-surface); border-radius: 12px; box-shadow: var(--shadow); padding: 10px 12px; }
.stats-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 700; font-size: 16px; }
.stats-name a { color: var(--color-text); text-decoration: none; }
.stats-name a:hover { text-decoration: underline; }
.stats-name .badge { font-size: 16px; padding: 1px 8px; }
.stats-bar { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--brand-tan-tint); margin: 8px 0 6px; }
.stats-bar .seg { display: block; height: 100%; }
.stats-nums { margin: 0; font-size: 17px; color: var(--color-text-muted); }
.stats-nums strong { color: var(--color-text); }
.stats-nums .n-favs strong, .stats-nums .n-favs { color: var(--brand-pink-dark); }
.stats-empty { padding: 8px 0; }

/* ---------- Members (admins only, #/members) ---------- */
.admin-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.member-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.member-stat { display: flex; flex-direction: column; }
.member-stat strong { font-family: var(--font-display); font-weight: 900; font-size: 26px; line-height: 1.1; }
.member-stat span { font-size: 16px; color: var(--color-text-muted); }
.members-page .chips + .chips { margin-top: -2px; }
.members-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.member-card { background: var(--color-surface); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.member-card.open { outline: 2px solid var(--brand-tan); }
.member-toggle { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; width: 100%; text-align: left; border: 0; background: transparent;
  font: inherit; color: var(--color-text); padding: 12px 40px 12px 14px; cursor: pointer; min-height: 56px; }
.member-name { font-weight: 700; font-size: 17px; }
.member-tags { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.member-tags .badge { font-size: 16px; padding: 1px 8px; }
.badge.mk-yes { background: var(--brand-denim-tint); color: var(--brand-denim-dark); }
.badge.hd-yes { background: #FAF3E4; color: #A34416; border: 1px solid #A34416; }
.badge.unconfirmed { background: #FFF3BF; color: #5C4A00; }
.member-sub { flex-basis: 100%; font-size: 17px; color: var(--color-text-muted); }
.member-sub strong { color: var(--color-text); }
.member-chev { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--brand-tan-dark); font-size: 18px; }
.member-body { padding: 0 14px 14px; border-top: 1px solid var(--color-border); }
.member-info { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; margin: 12px 0; font-size: 17px; }
.member-info dt { color: var(--color-text-muted); }
.member-info dd { margin: 0; overflow-wrap: anywhere; }
.member-info a { color: var(--color-link); font-weight: 700; }
.member-info .muted { color: var(--color-text-muted); }
.member-dances h3 { font-size: 16px; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-tan-dark); margin: 12px 0 4px; }
.member-dances h3 span { letter-spacing: 0; }
.member-dances ul { margin: 0; padding-left: 18px; }
.member-dances li { margin: 2px 0; }
.member-dances a { color: var(--color-text); }
.member-dances.got h3 { color: var(--brand-denim-dark); }
.member-dances.favs h3 { color: var(--brand-pink-dark); }
.members-note { margin-top: 14px; }

/* ---------- Add to Home Screen button + how-to sheet ---------- */
.install-tip .install-btn { width: 100%; justify-content: center; }
.install-tip .install-note { margin: 8px 0 0; }
.btn.install-btn { background: var(--brand-pink); border-color: var(--brand-pink); color: var(--brand-white); font-weight: 900; }
.install-sheet-wrap { position: fixed; inset: 0; z-index: 2147483647; /* above the bottom nav (same layer, later in the page) */ display: flex; align-items: flex-end; justify-content: center; }
.install-backdrop { position: absolute; inset: 0; background: rgba(20,20,20,.55); }
.install-sheet { position: relative; width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto; background: var(--brand-cream); color: var(--brand-ink);
  border-radius: 20px 20px 0 0; border-top: 5px solid var(--brand-pink); padding: 20px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px rgba(20,20,20,.25);
  font-family: var(--font-body); animation: sheet-up .22s ease-out; }
@media (min-width: 700px) { .install-sheet-wrap { align-items: center; } .install-sheet { border-radius: 20px; } }
@keyframes sheet-up { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.install-sheet h2 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 22px; line-height: 1.15; margin: 0 40px 10px 0; }
.install-sheet p { font-size: 16px; line-height: 1.45; margin: 0 0 10px; }
.install-sheet .dismiss { position: absolute; top: 10px; right: 10px; border: 0; background: transparent; font-size: 26px; width: 40px; height: 40px; border-radius: 99px; color: var(--brand-ink); cursor: pointer; }
.install-steps { list-style: none; counter-reset: st; margin: 6px 0 12px; padding: 0; display: grid; gap: 10px; }
.install-steps li { counter-increment: st; display: flex; align-items: center; gap: 12px; background: var(--brand-white); border-radius: 12px; padding: 10px 12px; font-size: 16px; line-height: 1.4; box-shadow: var(--shadow); }
.install-steps li::before { content: counter(st); flex: 0 0 26px; height: 26px; border-radius: 99px; background: var(--brand-ink); color: var(--brand-white); font-weight: 900; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.install-steps .step-ico { flex: 0 0 38px; height: 38px; border-radius: 10px; background: var(--brand-denim-tint); color: #007AFF; display: flex; align-items: center; justify-content: center; }
.install-steps .step-add { color: #007AFF; font-weight: 700; font-size: 16px; background: var(--brand-denim-tint); }
.install-steps .ios-ico { vertical-align: -5px; color: #007AFF; }
.install-warn { background: var(--brand-pink-tint); border-left: 4px solid var(--brand-pink); border-radius: 8px; padding: 10px 12px; color: var(--brand-ink); }
.install-copy { display: flex; gap: 8px; align-items: center; background: var(--brand-white); border: 1px solid var(--color-border); border-radius: 12px; padding: 8px 8px 8px 12px; margin: 0 0 12px; }
.install-copy code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.install-sheet .btn-row { margin-top: 6px; }
body.sheet-open { overflow: hidden; }

/* Public taster step sheet: friendly sign-up line underneath (not printed) */
.ss-teaser { margin: 16px 0 0; padding: 14px; border-radius: 12px; background: var(--brand-pink-tint); border-left: 4px solid var(--brand-pink); text-align: center; }
.ss-teaser p { margin: 0 0 10px; font-size: 16px; line-height: 1.4; color: var(--brand-ink); }
.ss-teaser .btn-row { justify-content: center; margin: 0; }

/* Dummer Down Hoedown 2.0 ticket card: the Hoedown's own brand (brand pack v1, Oct 2026), not C&K pink.
   Parchment #FAF3E4, saddle brown #492A11 text, dark leather #28160C, button rust #B0481E,
   logo rust #A34416, copper glow #F0AA6E accents. Playfair Display: Black 900 capitals for dates and
   buttons, Regular/Italic for body copy. The logo is used as supplied (never recoloured or stretched). */
.hoedown-card { --hd-parchment: #FAF3E4; --hd-saddle: #492A11; --hd-leather: #28160C; --hd-button: #B0481E;
  --hd-rust: #A34416; --hd-copper: #F0AA6E;
  margin: 16px 0; padding: 20px 18px 22px; border-radius: var(--radius); text-align: center;
  background: var(--hd-parchment); color: var(--hd-saddle); font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  border: 2px solid var(--hd-leather); box-shadow: 0 0 0 4px var(--hd-copper), 0 6px 18px rgba(40,22,12,.25); }
.hoedown-card .hd-logo { margin: 0 auto 10px; line-height: 0; }
.hoedown-card .hd-logo img { display: block; width: 100%; max-width: 340px; min-width: 240px; height: auto; margin: 0 auto; }
.hoedown-card p { margin: 0; }
.hoedown-card .hd-kicker { font-weight: 900; text-transform: uppercase; letter-spacing: .08em; font-size: 20px; color: var(--hd-rust); }
.hoedown-card .hd-tagline { font-style: italic; font-weight: 400; font-size: 18px; margin: 2px 0 14px; }
.hoedown-card .hd-date { font-weight: 900; text-transform: uppercase; letter-spacing: .03em; font-size: 20px; line-height: 1.2;
  padding: 10px 6px 4px; border-top: 2px solid var(--hd-rust); }
.hoedown-card .hd-where { font-size: 17px; line-height: 1.35; }
.hoedown-card .hd-doors { font-weight: 700; font-size: 17px; margin: 2px 0 16px; padding-bottom: 12px; border-bottom: 2px solid var(--hd-rust); }
.hoedown-card .hd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 12px 26px;
  border-radius: 99px; background: var(--hd-button); color: #FAF3E4; font-weight: 900; text-transform: uppercase; letter-spacing: .06em;
  font-size: 17px; text-decoration: none; box-shadow: 0 3px 0 var(--hd-leather); }
.hoedown-card .hd-btn:hover { background: var(--hd-rust); }
.hoedown-card .hd-btn:focus-visible { outline: 3px solid var(--hd-leather); outline-offset: 3px; }
@media print { .hoedown-card { display: none !important; } }

/* ---------- Step of the week (Grapevine): C&K brand, not the Hoedown palette ---------- */
.sotw-card { background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow); border-top: 4px solid var(--brand-pink);
  padding: 18px 16px 16px; margin: 0 0 18px; }
.sotw-card .tagline, .sotw-page .sotw-tag { margin: 0 0 6px; font-size: 16px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-pink-dark); }
.sotw-card h2 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 22px; line-height: 1.15; margin: 0 0 8px; color: var(--brand-ink); }
.sotw-card .meta, .sotw-page .meta { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.sotw-video { display: flex; justify-content: center; margin: 0 0 14px; }
.sotw-video video { display: block; width: 100%; max-width: 360px; height: auto; aspect-ratio: 9 / 16; background: var(--brand-ink);
  border-radius: var(--radius); border: 2px solid var(--brand-tan); }
.sotw-note { font-size: 17px; font-style: italic; margin: 0 0 10px; color: var(--brand-ink-soft); }
.sotw-steps-h { font-family: var(--font-display); font-size: 18px; font-weight: 900; text-transform: uppercase; margin: 0 0 8px; }
.sotw-steps { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 6px; }
.sotw-steps li { display: flex; align-items: center; gap: 10px; font-size: 17px; }
.sotw-count { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--brand-pink); color: var(--brand-white);
  font-weight: 900; font-size: 17px; display: inline-flex; align-items: center; justify-content: center; }
.sotw-after { font-size: 17px; font-weight: 700; margin: 0 0 12px; }
.sotw-page .sotw-info { max-width: 560px; margin: 0 auto 14px; padding: 14px 16px; }
.sotw-page .detail-head { text-align: center; }
.sotw-page .meta { justify-content: center; }
.sotw-page .btn-row { justify-content: center; }
@media (min-width: 700px) { .sotw-card { padding: 24px; } .sotw-card h2 { font-size: 28px; } }
@media print { .sotw-video { display: none; } }

/* Hoedown early bird reminder (logged-in members who haven't bought) + one-time Hoedown news prompt.
   Same Hoedown brand as the ticket card: parchment, saddle brown, dark leather, rust. */
.hoedown-card .hd-flag { display: inline-block; margin: -4px auto 12px; padding: 6px 16px; border-radius: 99px; background: var(--hd-rust); color: var(--hd-parchment);
  font-weight: 900; text-transform: uppercase; letter-spacing: .06em; font-size: 17px; line-height: 1.25; box-shadow: 0 2px 0 var(--hd-leather); }
.hd-early .hd-tagline { font-style: normal; font-size: 17px; line-height: 1.4; }
.hd-early .hd-btn { padding: 12px 18px; letter-spacing: .03em; }
.hd-prompt { --hd-parchment: #FAF3E4; --hd-saddle: #492A11; --hd-leather: #28160C; --hd-button: #B0481E; --hd-rust: #A34416;
  margin: 16px 0; padding: 18px 18px 16px; border-radius: var(--radius); background: var(--hd-parchment); color: var(--hd-saddle);
  border: 2px solid var(--hd-saddle); border-left: 8px solid var(--hd-rust); font-family: var(--font-body); }
.hd-prompt p { margin: 0 0 12px; font-size: 17px; line-height: 1.45; }
.hd-prompt .hd-prompt-kicker { margin: 0 0 2px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 16px; color: var(--hd-rust); }
.hd-prompt h2 { margin: 0 0 8px; font-family: "Playfair Display", Georgia, serif; font-weight: 900; font-size: 22px; line-height: 1.2; color: var(--hd-leather); }
.hd-prompt .field.check { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #FFFFFF; border: 1px solid var(--hd-saddle); }
.hd-prompt .field.check label { color: var(--hd-leather); font-weight: 700; }
.hd-prompt .btn-row { align-items: center; margin: 0 0 8px; }
.hd-prompt .hd-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 28px; border-radius: 99px; border: 0;
  background: var(--hd-button); color: #FAF3E4; font-family: "Playfair Display", Georgia, serif; font-weight: 900; text-transform: uppercase;
  letter-spacing: .06em; font-size: 17px; cursor: pointer; box-shadow: 0 3px 0 var(--hd-leather); }
.hd-prompt .hd-btn:hover { background: var(--hd-rust); }
.hd-prompt .hd-btn:focus-visible, .hd-prompt .btn:focus-visible { outline: 3px solid var(--hd-leather); outline-offset: 3px; }
.hd-prompt .btn.ghost { min-height: 48px; color: var(--hd-leather); border-color: var(--hd-saddle); font-size: 17px; }
.hd-prompt .hd-prompt-foot { margin: 4px 0 0; font-size: 16px; }
.hd-prompt .hd-prompt-foot a { color: var(--hd-rust); font-weight: 700; }
.hd-prompt .form-error { margin: 0 0 12px; }
.sim-note { margin: 16px 0 -4px; padding: 8px 12px; border-radius: 10px; background: var(--brand-denim-tint); color: var(--brand-denim-dark);
  border: 1px dashed var(--brand-denim); font-size: 16px; font-weight: 700; text-align: center; }
@media print { .hd-prompt, .sim-note { display: none !important; } }

/* ---------- Dance of the Week (home banner, 31 Oct 2026): C&K brand, cream/ink/tan with one pink button ---------- */
.dotw-card { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: center; background: var(--color-surface); color: var(--brand-ink);
  border-radius: var(--radius); box-shadow: var(--shadow); border: 2px solid var(--brand-tan); padding: 14px; margin: 0 0 14px; }
.dotw-card.has-poster { grid-template-columns: 104px minmax(0, 1fr); }
.dotw-poster { display: block; line-height: 0; }
.dotw-poster img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; background: var(--brand-ink);
  border: 2px solid var(--brand-ink); }
.dotw-body { min-width: 0; }
.dotw-label { margin: 0 0 2px; font-size: 16px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-denim); }
.dotw-name { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 24px; line-height: 1.1; margin: 0 0 8px;
  color: var(--brand-ink); overflow-wrap: anywhere; }
.dotw-card .meta { display: flex; gap: 6px 8px; flex-wrap: wrap; align-items: center; margin: 0 0 6px; }
.dotw-card .facts { font-size: 16px; color: var(--color-text-muted); }
.dotw-choreo { margin: 0 0 6px; font-size: 16px; color: var(--brand-ink-soft); }
.dotw-note { margin: 0 0 10px; font-size: 16px; font-weight: 700; color: var(--brand-tan-dark); }
.dotw-card .btn-row { margin: 0; }
.dotw-card .btn.primary { width: 100%; }
@media (min-width: 420px) { .dotw-card .btn.primary { width: auto; } }
@media (min-width: 700px) { .dotw-card { padding: 18px; gap: 20px; } .dotw-card.has-poster { grid-template-columns: 150px minmax(0, 1fr); } .dotw-name { font-size: 30px; } }
@media print { .dotw-card { display: none !important; } }