/* Funky Sole Line Dance Club. Black room, one neon red, warm white type.
   Headlines in Big Shoulders Display, body in Figtree. No build step. */

:root {
  --ink: #0b0b0d;
  --ink-2: #111114;
  --panel: #16161a;
  --panel-2: #1d1d22;
  --line: #2a2a31;
  --line-2: #3a3a44;
  --text: #f4efe7;
  --muted: #a7a19a;
  --dim: #6f6a66;
  --red: #ff2a2a;
  --red-2: #ff5c5c;
  --red-deep: #b51515;
  --red-glow: rgba(255, 42, 42, .45);
  --amber: #ffc43d;
  --ok: #4ade80;
  --font-display: "Big Shoulders Display", "Impact", "Arial Narrow", sans-serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1120px;
  --gutter: 16px;
  --radius: 14px;
  --shadow: 0 20px 50px -24px rgba(0, 0, 0, .9);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--red-2); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #fff; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: .95; margin: 0 0 .4em; letter-spacing: .01em; text-transform: uppercase; }
h1 { font-size: clamp(44px, 8vw, 84px); }
h2 { font-size: clamp(34px, 5.2vw, 56px); text-shadow: 0 0 18px rgba(255, 42, 42, .18); }
h3 { font-size: clamp(24px, 3vw, 32px); }
p { margin: 0 0 1em; }
.lede { font-size: clamp(18px, 2vw, 21px); color: var(--muted); max-width: 62ch; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(48px, 7vw, 88px) 0; }
.section.tight { padding-top: 24px; }
.eyebrow { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .22em; text-transform: uppercase; color: var(--red-2); margin-bottom: 10px; text-shadow: 0 0 10px var(--red-glow); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 14px; }

/* neon utilities */
.neon { color: #fff; text-shadow: 0 0 6px var(--red-glow), 0 0 18px var(--red-glow), 0 0 40px rgba(255, 42, 42, .25); }
.neon-red { color: var(--red); text-shadow: 0 0 6px var(--red-glow), 0 0 22px var(--red-glow); }
.rule { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--red), transparent); margin: 0; opacity: .7; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 10px; font-weight: 700; font-size: 15px; text-decoration: none; border: 1.5px solid var(--line-2); color: var(--text); background: transparent; cursor: pointer; font-family: var(--font-body); transition: background .15s, border-color .15s, box-shadow .15s, color .15s; }
.btn:hover { border-color: var(--red); color: #fff; }
.btn-primary { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 0 0 0 var(--red-glow), 0 10px 30px -12px var(--red-glow); }
.btn-primary:hover { background: #ff4040; box-shadow: 0 0 18px var(--red-glow), 0 12px 30px -10px var(--red-glow); }
.btn-neon { border-color: var(--red); color: #fff; box-shadow: inset 0 0 12px rgba(255, 42, 42, .18), 0 0 14px rgba(255, 42, 42, .25); }
.btn-neon:hover { background: rgba(255, 42, 42, .12); }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: 14px; }

/* header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(11, 11, 13, .88); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 42, 42, .45); box-shadow: 0 1px 0 rgba(255, 42, 42, .25), 0 8px 24px -16px var(--red-glow); }
.site-header .wrap { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
.brand .wm { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: .04em; text-transform: uppercase; line-height: 1; color: #fff; text-shadow: 0 0 6px var(--red-glow), 0 0 16px rgba(255, 42, 42, .35); }
.nav { margin-left: auto; display: flex; gap: 4px; }
.nav a { color: #ffd9d9; text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: .09em; text-transform: uppercase; padding: 10px 12px; border-radius: 8px; text-shadow: 0 0 5px rgba(255, 42, 42, .35); transition: color .15s, text-shadow .15s; }
.nav a:hover { color: #fff; text-shadow: 0 0 6px rgba(255, 42, 42, .6), 0 0 14px rgba(255, 42, 42, .3); }
.nav a[aria-current="page"] { color: var(--red-2); text-shadow: 0 0 6px rgba(255, 42, 42, .7), 0 0 16px rgba(255, 42, 42, .35); box-shadow: inset 0 -2px 0 var(--red), 0 6px 14px -8px var(--red); border-radius: 8px 8px 0 0; }
.nav-toggle { display: none; margin-left: auto; min-width: 44px; min-height: 44px; border: 1.5px solid rgba(255, 42, 42, .6); background: transparent; color: #fff; border-radius: 10px; font-weight: 700; font-family: var(--font-display); font-size: 17px; letter-spacing: .1em; text-transform: uppercase; text-shadow: 0 0 8px var(--red-glow); box-shadow: 0 0 12px -4px var(--red-glow); cursor: pointer; }
/* Ten links: tighten them on small laptops, and fold into the Menu button
   before they can push the page sideways. */
@media (max-width: 1240px) { .nav { gap: 0; } .nav a { font-size: 16px; padding: 10px 7px; letter-spacing: .05em; } }
@media (max-width: 1000px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; background: var(--ink-2); border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 14px; }
  .nav.open { display: flex; max-height: calc(100vh - 68px); max-height: calc(100dvh - 68px); overflow-y: auto; }
  body.nav-open { overflow: hidden; }
  .nav a { padding: 14px 10px; font-size: 22px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav a[aria-current="page"] { box-shadow: none; }
}

/* hero: the neon sign bleeds off the left edge and fades into black
   where the copy sits, like the old site's composite, built in CSS so it
   scales. The sign is a pseudo-element sized from the hero's HEIGHT by its
   own aspect ratio, and the fade is a mask on the sign itself, so the fade
   always sits on the sign's right edge. It used to be a background gradient
   measured as a percentage of the hero width, which on a wide monitor fell
   past the sign and left a hard edge with plain black beside it. Below 860px
   the sign spans the top and fades down into the copy. */
.hero { position: relative; overflow: hidden; background: #000; }
/* On a wide monitor the sign slides right so its fade meets the title
   rather than stopping short of the centred copy, and its left edge fades
   in from black so there is no hard rectangle where the photo starts. The
   wrap is 1120px, the copy column starts just past the middle, and the
   sign is 1.24 times the hero height wide: 50% - 760px puts the fade on the
   title at 1500px and above, and max() keeps it bleeding off the left edge
   below that. */
.hero::before { content: ""; position: absolute; top: 0; bottom: 0; left: max(0px, calc(50% - 760px)); aspect-ratio: 1400 / 1128; background: url("/img/neon-sign-v2.jpg") center / cover no-repeat; -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 12%, #000 52%, rgba(0, 0, 0, 0) 98%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 12%, #000 52%, rgba(0, 0, 0, 0) 98%); }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, .55)); pointer-events: none; }
.hero > .wrap { position: relative; z-index: 1; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(20px, 4vw, 56px); align-items: center; min-height: clamp(520px, 52vw, 700px); padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(28px, 4vw, 56px); }
.hero-copy { position: relative; }
.hero-copy .script { font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 2.4vw, 26px); letter-spacing: .3em; color: var(--red-2); text-transform: uppercase; }
.hero-copy h1 { margin: 6px 0 4px; }
.hero-copy h1 span { display: block; color: var(--red); text-shadow: 0 0 10px var(--red-glow), 0 0 30px rgba(255, 42, 42, .3); }
.hero-copy .lede { margin: 18px 0 26px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 1200px) {
  .hero::before { left: 0; -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 26%, rgba(0, 0, 0, 0) 78%); mask-image: linear-gradient(90deg, #000 0%, #000 26%, rgba(0, 0, 0, 0) 78%); }
  .hero .wrap { grid-template-columns: .8fr 1.2fr; }
}
@media (max-width: 860px) {
  .hero::before { left: 0; right: 0; bottom: auto; height: min(74vw, 520px); aspect-ratio: auto; background-size: 100% auto; background-position: top center; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(180deg, #000 0%, #000 45%, rgba(0, 0, 0, 0) 100%); }
  .hero .wrap { grid-template-columns: 1fr; min-height: 0; padding-top: 0; }
  .hero-spacer { height: min(74vw, 520px); }
}

/* fuego band */
.fuego { background: radial-gradient(ellipse at 15% 50%, rgba(255, 120, 20, .22), transparent 55%), var(--ink-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fuego .wrap { display: grid; grid-template-columns: 300px 1fr; gap: 36px; align-items: center; padding-top: 48px; padding-bottom: 48px; }
.fuego-art { display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-2); box-shadow: 0 0 40px -8px rgba(255, 120, 20, .6); }
.fuego-art img { display: block; width: 100%; height: auto; transition: transform .2s; }
.fuego-art:hover img { transform: scale(1.02); }
.fuego h2 { margin: 0 0 10px; }
.fuego-copy > p { color: var(--muted); max-width: 60ch; }
.fuego-code { display: inline-flex; align-items: center; gap: 12px; margin: 6px 0 4px; padding: 10px 14px; border: 1px dashed rgba(255, 150, 40, .6); border-radius: 10px; background: rgba(255, 120, 20, .08); color: var(--text) !important; }
.fuego-code span { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.fuego-code code { font-family: var(--font-display); font-size: 22px; letter-spacing: .08em; color: #ffb257; user-select: all; }
@media (max-width: 760px) {
  .fuego .wrap { grid-template-columns: 1fr; gap: 22px; text-align: center; }
  .fuego-art { width: min(100%, 320px); margin: 0 auto; }
  .fuego-copy > p { margin-left: auto; margin-right: auto; }
  .fuego-code { margin-left: auto; margin-right: auto; }
  .fuego .podcast-links { justify-content: center; }
}

/* podcast band */
.podcast { background: radial-gradient(ellipse at 80% 50%, rgba(140, 40, 120, .28), transparent 55%), var(--ink-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.podcast .wrap { display: grid; grid-template-columns: 260px 1fr; gap: 36px; align-items: center; padding-top: 48px; padding-bottom: 48px; }
.podcast-art { display: block; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 0 40px -6px rgba(170, 60, 150, .7); }
.podcast-art img { display: block; width: 100%; height: auto; border-radius: 50%; transition: transform .2s; }
.podcast-art:hover img { transform: scale(1.03); }
.podcast h2 { margin: 0; }
.podcast-strap { margin: 4px 0 12px; font-family: var(--font-display); font-size: 18px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.podcast-copy > p:not(.podcast-strap) { color: var(--muted); max-width: 60ch; }
.podcast-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.podcast-links .btn { display: inline-flex; align-items: center; gap: 8px; }
.podcast-links svg { width: 18px; height: 18px; fill: currentColor; }
@media (max-width: 760px) {
  .podcast .wrap { grid-template-columns: 1fr; gap: 22px; text-align: center; }
  .podcast-art { width: 200px; margin: 0 auto; }
  .podcast-copy > p:not(.podcast-strap) { margin-left: auto; margin-right: auto; }
  .podcast-links { justify-content: center; }
  .podcast-links .btn { flex: 1 1 100%; justify-content: center; }
}

/* cards and grids */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; transition: border-color .15s, box-shadow .15s; }
.card:hover { border-color: rgba(255, 42, 42, .5); box-shadow: 0 0 20px -8px var(--red-glow); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.section-head p { margin: 0; color: var(--muted); }

/* class cards */
.day-block { margin-bottom: 34px; }
.day-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; border-bottom: 1px solid rgba(255, 42, 42, .4); padding-bottom: 8px; box-shadow: 0 1px 0 rgba(255, 42, 42, .15); }
.day-head h2 { margin: 0; font-size: clamp(30px, 4vw, 44px); color: #fff; text-shadow: 0 0 8px var(--red-glow), 0 0 22px rgba(255, 42, 42, .3); }
.day-head span { color: var(--muted); font-size: 14px; }
.classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.class { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 8px; position: relative; transition: border-color .15s, transform .15s; }
.class:hover { border-color: rgba(255, 42, 42, .7); box-shadow: 0 0 0 1px rgba(255, 42, 42, .25), 0 0 22px -6px var(--red-glow); }
.class.hidden { display: none; }
.class .top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.badge { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; padding: 4px 9px 3px; border-radius: 6px; border: 1px solid; }
.badge.beginner { color: var(--ok); border-color: rgba(74, 222, 128, .4); box-shadow: 0 0 10px -2px rgba(74, 222, 128, .45); }
.badge.improver { color: var(--amber); border-color: rgba(255, 196, 61, .45); box-shadow: 0 0 10px -2px rgba(255, 196, 61, .45); }
.badge.inter { color: var(--red-2); border-color: rgba(255, 42, 42, .45); box-shadow: 0 0 10px -2px var(--red-glow); }
.badge.tag { color: var(--muted); border-color: var(--line-2); }
.class .time { font-family: var(--font-display); font-weight: 800; font-size: 30px; letter-spacing: .02em; line-height: 1; }
.class .fee { margin-left: auto; font-weight: 700; color: var(--text); }
.class .venue { font-weight: 700; }
.class .addr { color: var(--muted); font-size: 14px; }
.class .who { color: var(--muted); font-size: 14px; }
.class .note { color: var(--amber); font-size: 13px; }
.class .map { margin-top: auto; align-self: flex-start; font-size: 14px; font-weight: 600; }

/* filter chips */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 28px; }
.chip { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line-2); background: transparent; color: var(--muted); font-weight: 600; font-size: 14px; cursor: pointer; font-family: var(--font-body); }
.chip:hover { color: #fff; border-color: var(--red); }
.chip[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 0 14px -2px var(--red-glow); }
.filters .sep { width: 1px; background: var(--line-2); margin: 4px 6px; }
.empty { display: none; color: var(--muted); padding: 24px; text-align: center; border: 1px dashed var(--line-2); border-radius: var(--radius); }
.empty.show { display: block; }

.callout { display: flex; gap: 16px; align-items: center; background: linear-gradient(90deg, rgba(255, 42, 42, .14), transparent 70%); border: 1px solid rgba(255, 42, 42, .4); border-radius: var(--radius); padding: 16px 20px; }
.callout b { font-family: var(--font-display); font-size: 26px; letter-spacing: .04em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.callout p { margin: 0; color: var(--muted); }

/* teaches */
.teach-group { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); margin-bottom: 12px; overflow: hidden; }
.teach-group summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.teach-group summary::-webkit-details-marker { display: none; }
.teach-group summary .day { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: .06em; text-transform: uppercase; color: var(--red-2); min-width: 120px; text-shadow: 0 0 10px var(--red-glow); }
.teach-group summary .venue { font-weight: 700; font-size: 18px; }
.teach-group summary .count { margin-left: auto; color: var(--muted); font-size: 14px; white-space: nowrap; }
.teach-group summary .chev { width: 18px; height: 18px; stroke: var(--muted); fill: none; stroke-width: 2; transition: transform .2s; }
.teach-group[open] summary .chev { transform: rotate(180deg); }
.teach-group[open] { border-color: rgba(255, 42, 42, .5); box-shadow: 0 0 20px -8px var(--red-glow); }
.teach-group[open] summary { border-bottom: 1px solid rgba(255, 42, 42, .35); }
.sessions { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0; }
.session { padding: 16px 18px; border-left: 1px solid var(--line); }
.session:first-child { border-left: 0; }
.session h3 { font-size: 18px; letter-spacing: .08em; color: var(--amber); margin-bottom: 8px; }
.session ol { margin: 0; padding: 0; list-style: none; }
.session li { padding: 6px 0; border-top: 1px solid var(--line); font-size: 15px; }
.session li:first-child { border-top: 0; }
.session li a { color: var(--text); text-decoration: none; font-weight: 600; }
.session li a:hover { color: var(--red-2); }
.session li span { color: var(--muted); font-size: 13px; display: block; }
@media (max-width: 640px) { .session { border-left: 0; border-top: 1px solid var(--line); } .teach-group summary .day { min-width: 0; } .teach-group summary { flex-wrap: wrap; } }

/* calendar */
.month { margin-bottom: 30px; }
.month h2 { font-size: clamp(28px, 4vw, 40px); border-bottom: 1px solid rgba(255, 42, 42, .4); padding-bottom: 8px; margin-bottom: 12px; color: #fff; text-shadow: 0 0 8px var(--red-glow), 0 0 22px rgba(255, 42, 42, .3); }
.event { display: grid; grid-template-columns: 190px 1fr; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.event:last-child { border-bottom: 0; }
.event .when { font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: .03em; text-transform: uppercase; line-height: 1.05; }
.event .when small { display: block; font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: .14em; color: var(--muted); margin-top: 6px; text-transform: uppercase; }
.event h3 { font-size: 22px; letter-spacing: .03em; margin-bottom: 4px; text-transform: none; font-family: var(--font-body); font-weight: 800; }
.event p { margin: 0 0 4px; color: var(--muted); font-size: 15px; }
.event .where { color: var(--text); font-weight: 600; font-size: 15px; }
.event.funky .when { color: var(--red-2); text-shadow: 0 0 10px var(--red-glow); }
.event .kind { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--dim); }
@media (max-width: 600px) { .event { grid-template-columns: 1fr; gap: 6px; } }

/* choreography */
.dance-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.dance-table th { text-align: left; font-family: var(--font-display); font-weight: 700; letter-spacing: .14em; font-size: 13px; text-transform: uppercase; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid rgba(255, 42, 42, .45); box-shadow: 0 1px 0 rgba(255, 42, 42, .15); }
.dance-table td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.dance-table td:nth-child(3), .dance-table th:nth-child(3) { white-space: nowrap; }
.dance-table tr:hover td { background: var(--panel); }
.dance-table .title { font-weight: 700; font-size: 17px; }
.dance-table .links { display: flex; gap: 8px; }
.icon-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 8px; border: 1.5px solid var(--line-2); color: var(--text); text-decoration: none; font-size: 13px; font-weight: 700; white-space: nowrap; }
.icon-btn svg { width: 16px; height: 16px; fill: currentColor; }
.icon-btn.yt { color: #fff; border-color: rgba(255, 42, 42, .6); }
.icon-btn.yt svg { fill: var(--red); }
.icon-btn:hover { background: var(--panel-2); border-color: var(--red); }
.table-wrap { overflow-x: auto; }
@media (max-width: 700px) {
  .dance-table thead { display: none; }
  .dance-table, .dance-table tbody, .dance-table tr, .dance-table td { display: block; width: 100%; }
  .dance-table tr { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); margin-bottom: 10px; padding: 8px 4px; }
  .dance-table td { border: 0; padding: 4px 12px; }
  .dance-table td[data-label]::before { content: attr(data-label) " "; color: var(--muted); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; margin-right: 6px; }
}
.dance-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.dance-tools .search { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 12px; border-radius: 10px; border: 1.5px solid var(--line-2); background: var(--ink); }
.dance-tools .search:focus-within { border-color: var(--red); box-shadow: 0 0 12px -4px var(--red-glow); }
.dance-tools .search svg { width: 18px; height: 18px; stroke: var(--muted); fill: none; stroke-width: 2; stroke-linecap: round; flex: none; }
.dance-tools .search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 15px; outline: none; }
.dance-tools .sort { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; font-weight: 600; }
.dance-tools .sort select { min-height: 42px; padding: 0 10px; border-radius: 10px; border: 1.5px solid var(--line-2); background: var(--ink); color: var(--text); font: inherit; font-size: 14px; }
.dance-tools .count { margin-left: auto; color: var(--muted); font-size: 14px; white-space: nowrap; }
.dance-table tr[hidden] { display: none; }
.subscribe { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.subscribe input { flex: 1 1 220px; min-height: 46px; border-radius: 10px; border: 1.5px solid var(--line-2); background: var(--ink); color: var(--text); padding: 0 14px; font: inherit; }
.subscribe input:focus { outline: 2px solid var(--red); outline-offset: 1px; }

/* about */
.about-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: start; }
.about-grid .logo { max-width: 320px; margin: 0 auto; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .7)); }
.about-grid .sig { font-family: "Georgia", serif; font-style: italic; color: var(--muted); font-size: 18px; }
@media (max-width: 820px) { .about-grid { grid-template-columns: 1fr; } }
.person { display: flex; flex-direction: column; gap: 14px; }
.person img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line-2); filter: saturate(.9); }
.person h3 { margin: 4px 0 0; }
.person .role { color: var(--red-2); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.person p { color: var(--muted); font-size: 15px; }
.person details { color: var(--muted); font-size: 15px; }
.person details p:first-of-type { margin-top: 14px; }
.person summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line-2); color: var(--text); font-weight: 700; font-size: 14px; transition: border-color .15s, background .15s; }
.person summary::-webkit-details-marker { display: none; }
.person summary:hover { border-color: var(--red); background: rgba(255, 42, 42, .08); }
.person summary svg { width: 16px; height: 16px; stroke: var(--red); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.person details[open] summary svg { transform: rotate(180deg); }
.person details[open] summary span::after { content: ""; }

/* gallery */
.masonry { columns: 4 220px; column-gap: 10px; }
.masonry a { display: block; margin: 0 0 10px; break-inside: avoid; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); }
.masonry img { width: 100%; transition: transform .25s, filter .25s; filter: saturate(.92); }
.masonry a:hover img { transform: scale(1.03); filter: saturate(1.05); }
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .94); display: flex; align-items: center; justify-content: center; padding: 16px; }
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: min(1200px, 100%); max-height: 100%; display: flex; flex-direction: column; align-items: center; }
.lightbox img { max-height: calc(100vh - 90px); max-width: 100%; width: auto; border-radius: 8px; box-shadow: 0 0 60px rgba(255, 42, 42, .15); }
.lightbox figcaption { color: var(--muted); font-size: 14px; margin-top: 10px; }
.lb-btn { position: absolute; min-width: 48px; min-height: 48px; border-radius: 50%; border: 1.5px solid var(--line-2); background: rgba(20, 20, 24, .8); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lb-btn:hover { border-color: var(--red); }
.lb-close { top: 16px; right: 16px; }
.lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 12px; top: 50%; transform: translateY(-50%); }

/* contact */
.field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; }
.field label { font-weight: 700; font-size: 14px; letter-spacing: .04em; }
.field input, .field textarea { width: 100%; border-radius: 10px; border: 1.5px solid var(--line-2); background: var(--ink); color: var(--text); padding: 12px 14px; font: inherit; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--red); outline-offset: 1px; border-color: var(--red); }
.field .hint { color: var(--muted); font-size: 13px; }
.hp { position: absolute; left: -9999px; }
.form-error { color: var(--red-2); font-weight: 600; }
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.contact-list li { display: flex; gap: 12px; align-items: center; }
.contact-list svg { width: 22px; height: 22px; stroke: var(--red); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.contact-list a { color: var(--text); text-decoration: none; font-weight: 600; }
.contact-list a:hover { color: var(--red-2); }
.socials { display: flex; gap: 10px; flex-wrap: wrap; }
.socials a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1.5px solid var(--line-2); text-decoration: none; color: var(--text); font-weight: 700; font-size: 14px; }
.socials a:hover { border-color: var(--red); }
.socials svg { width: 18px; height: 18px; fill: currentColor; }

/* home strips */
.home-classes .classes { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.next-events { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.next-events .card .when { font-family: var(--font-display); font-weight: 800; font-size: 26px; text-transform: uppercase; color: var(--red-2); letter-spacing: .03em; line-height: 1; margin-bottom: 8px; }
.next-events .card h3 { font-family: var(--font-body); text-transform: none; font-size: 19px; letter-spacing: 0; }
.next-events .card p { color: var(--muted); font-size: 15px; margin: 0; }
.team-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.team-strip a { display: block; text-decoration: none; color: var(--text); text-align: center; }
.team-strip img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line-2); margin-bottom: 10px; filter: saturate(.9); }
.team-strip b { font-family: var(--font-display); font-size: 22px; letter-spacing: .04em; text-transform: uppercase; display: block; }
.team-strip span { color: var(--muted); font-size: 14px; }
@media (max-width: 600px) { .team-strip { grid-template-columns: 1fr; } }
.cta-band { background: radial-gradient(ellipse at 20% 50%, rgba(255, 42, 42, .22), transparent 55%), var(--ink-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cta-band .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 40px; padding-bottom: 40px; }
.cta-band h2 { margin: 0; }
.cta-band p { margin: 4px 0 0; color: var(--muted); }

/* page header */
.page-head { padding-top: clamp(36px, 6vw, 64px); padding-bottom: 10px; }
.page-head h1 { margin-bottom: 8px; color: #fff; text-shadow: 0 0 10px rgba(255, 42, 42, .35), 0 0 36px rgba(255, 42, 42, .2); }

/* footer */
.site-footer { border-top: 1px solid rgba(255, 42, 42, .4); box-shadow: 0 -1px 0 rgba(255, 42, 42, .15), 0 -10px 30px -22px var(--red-glow); margin-top: 60px; padding: 36px 0 28px; color: var(--muted); font-size: 14px; }
.site-footer .wrap { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 28px; }
.site-footer h4 { font-size: 15px; letter-spacing: .18em; color: #fff; margin-bottom: 10px; text-shadow: 0 0 8px rgba(255, 42, 42, .35); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer .legal { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 16px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--dim); }
.site-footer .legal a { color: var(--dim); }
/* "Site by STOMPR" credit, Stompr's own wordmark and sunset orange, as on every client site. */
.stompr-credit { font-family: "Righteous", "Big Shoulders Display", sans-serif; color: #F97316 !important; letter-spacing: .04em; }
@media (max-width: 720px) { .site-footer .wrap { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------
   /holidays/: Winson Holidays Ltd, the Winsons' dance-weekend company.
   Same site, but gold where the rest is neon red, after their logo. */
.holidays { --gold: #d4af5a; --gold-2: #f0d48a; --gold-deep: #8d6b25; --gold-glow: rgba(212, 175, 90, .35); }
.holidays .gold, .holidays .gold-text { color: var(--gold-2); text-shadow: none; }
.holidays .eyebrow.gold { color: var(--gold); text-shadow: 0 0 10px var(--gold-glow); }
.holidays h1, .holidays h2 { text-shadow: 0 0 18px rgba(212, 175, 90, .22); }
.holidays a { color: var(--gold-2); }
.holidays a:hover { color: #fff; }
.gold-hero { background: radial-gradient(ellipse at 50% 35%, rgba(212, 175, 90, .16), transparent 60%), #000; text-align: center; padding: clamp(28px, 5vw, 56px) 0 clamp(32px, 5vw, 56px); border-bottom: 1px solid rgba(212, 175, 90, .35); box-shadow: 0 1px 0 rgba(212, 175, 90, .15); }
.gold-hero img { width: min(640px, 92%); margin: 0 auto 12px; filter: drop-shadow(0 20px 50px rgba(0, 0, 0, .8)); }
.btn-gold { background: linear-gradient(180deg, var(--gold-2), var(--gold) 55%, var(--gold-deep)); border-color: var(--gold-2); color: #1a1405 !important; box-shadow: 0 10px 30px -12px var(--gold-glow); }
.btn-gold:hover { background: linear-gradient(180deg, #fff2c6, var(--gold-2) 55%, var(--gold)); box-shadow: 0 0 18px var(--gold-glow); }
.btn-gold-line { border-color: var(--gold); color: var(--gold-2) !important; }
.btn-gold-line:hover { background: rgba(212, 175, 90, .12); color: #fff !important; }
.gold-card { position: relative; }
.gold-card:hover { border-color: rgba(212, 175, 90, .5); box-shadow: 0 0 20px -8px var(--gold-glow); }
.gold-card::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(212, 175, 90, .16); border-radius: 9px; pointer-events: none; }
.weekends-list { display: grid; gap: 14px; }
.weekend { display: grid; grid-template-columns: 170px 1fr auto; gap: 22px; align-items: center; padding: 22px 24px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); position: relative; transition: border-color .15s, box-shadow .15s; }
.weekend::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(212, 175, 90, .16); border-radius: 9px; pointer-events: none; }
.weekend:hover { border-color: rgba(212, 175, 90, .55); box-shadow: 0 0 22px -8px var(--gold-glow); }
.weekend .when { font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1.05; letter-spacing: .03em; text-transform: uppercase; color: var(--gold-2); text-shadow: 0 0 10px var(--gold-glow); }
.weekend .when small { display: block; font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: .14em; color: var(--muted); margin-top: 6px; }
.weekend h3 { margin-bottom: 2px; text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-weight: 800; font-size: 20px; }
.weekend .where { color: var(--gold); font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.weekend p { color: var(--muted); font-size: 15px; margin: 0; }
@media (max-width: 760px) { .weekend { grid-template-columns: 1fr; gap: 12px; } }
.founder { display: grid; gap: 6px; }
.founder .name { font-family: var(--font-display); color: var(--gold-2); font-size: 22px; letter-spacing: .06em; text-transform: uppercase; }
.founder p { color: var(--muted); font-size: 15px; margin: 0; }
.legal { max-width: 800px; margin: 0 auto; }
.legal h2 { margin-top: 44px; font-size: 26px; color: var(--gold-2); }
.legal h3 { margin-top: 26px; font-size: 16px; letter-spacing: .02em; font-family: var(--font-body); font-weight: 800; text-transform: none; color: var(--text); }
.legal p, .legal li { color: var(--muted); font-size: 15px; }
.legal ul { padding-left: 20px; }
.legal table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 10px 0 18px; }
.legal th, .legal td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.legal th { color: var(--gold); font-weight: 700; }

/* ------------------------------------------------------------------
   Phone layout. Everything above is fluid; these are the few places a
   narrow screen needs a different shape rather than a narrower one. */
@media (max-width: 640px) {
  /* 2. callouts stack instead of squeezing the text beside the label */
  .callout { flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 16px; }
  .callout b { white-space: normal; font-size: 24px; }
  /* 5. three class cards on the home page, not six */
  .home-classes .class:nth-child(n+4) { display: none; }
  /* 3. dance cards: title first, badge and counts on one row, then who */
  .dance-table tr { padding: 14px 4px 12px; }
  .dance-table td.title { font-size: 19px; padding-bottom: 6px; }
  .dance-table td.title::before { display: none; }
  .dance-table td[data-label="Level"], .dance-table td[data-label="Shape"] { display: inline-block; width: auto; vertical-align: middle; padding-top: 2px; padding-bottom: 8px; }
  .dance-table td[data-label="Level"]::before, .dance-table td[data-label="Shape"]::before { display: none; }
  .dance-table td[data-label="Shape"] { color: var(--muted); font-size: 14px; padding-left: 4px; }
  .dance-table td[data-label="By"]::before { content: "By "; }
  .dance-table td .links { padding-top: 6px; }
  .dance-tools .count { margin-left: 0; width: 100%; }
  /* 4. gallery in two columns */
  .masonry { columns: 2; column-gap: 8px; }
  .masonry a { margin-bottom: 8px; }
  /* teaches accordion header: count sits under the venue, not on its own line */
  .teach-group summary { padding: 14px 16px; row-gap: 2px; }
  .teach-group summary .count { margin-left: 0; width: 100%; font-size: 13px; }
  /* hero buttons fill the width in two neat rows */
  .hero-actions .btn { flex: 1 1 40%; }
  /* footer tighter */
  .site-footer { margin-top: 40px; padding-top: 28px; }
  .site-footer .wrap { gap: 20px; }
}

/* Phone: pill out of the thumb zone. After the base rule so it wins. */

/* portal-edited regions (content/templates.py) */
.notice-bar { background: linear-gradient(90deg, rgba(255, 42, 42, .22), rgba(255, 42, 42, .06)); border-bottom: 1px solid rgba(255, 42, 42, .45); }
.notice-bar p { margin: 0; padding: 12px 0; font-weight: 600; color: #fff; }
.classes-count { color: var(--muted); margin: -8px 0 18px; }
.merch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.merch-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.merch-card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; filter: saturate(.92); }
.merch-card .merch-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 16px 0; }
.merch-card h3 { margin: 0; }
.merch-card .price { font-family: var(--font-display); font-size: 24px; color: var(--red-2); text-shadow: 0 0 10px var(--red-glow); white-space: nowrap; }
.merch-card p { color: var(--muted); font-size: 15px; margin: 6px 0 0; padding: 0 16px 16px; }
.merch-card .merch-photo { display: block; }
.merch-card .merch-more { display: flex; gap: 6px; padding: 8px 10px 0; }
.merch-card .merch-more a { flex: 0 1 calc(33.33% - 4px); min-width: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #fff; }
.merch-card .merch-more img { aspect-ratio: 1; filter: none; }

/* event posters (portal uploads; a PDF arrives as its first page) */
.event .posters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.event .posters a { display: block; width: 120px; height: 160px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); overflow: hidden; }
.event .posters img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .2s; }
.event .posters a:hover img { transform: scale(1.03); }
@media (max-width: 600px) { .event .posters a { width: 96px; height: 128px; } }

/* phone review 2026-10-26: every link a thumb can reach (44px rows), the
   small labels readable, the search box the height of a button */
@media (max-width: 860px) {
  .site-footer li { margin: 0; }
  .site-footer li a { display: inline-block; padding: 9px 0; }
  .legal a { display: inline-block; padding: 8px 2px; }
  .class .map, .event p a, .weekend p a, .card p a { display: inline-block; padding: 8px 0; }
  .event .when small { font-size: 13px; }
  .dance-tools .search input { min-height: 44px; }
  .contact-list a { display: inline-block; padding: 8px 0; }
}

/* merch viewer: the photo, its other views, and what it is, side by side */
.merch-viewer { padding: 72px 72px 24px; background: rgba(6, 6, 8, .985); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.mv-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; align-items: center; width: min(1100px, 100%); max-height: 100%; }
.mv-stage { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; }
.merch-viewer .mv-main { width: 100%; max-height: calc(100vh - 220px); object-fit: contain; background: #fff; border-radius: 10px; box-shadow: 0 0 60px rgba(255, 42, 42, .15); }
.mv-thumbs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.mv-thumbs button { padding: 0; width: 64px; height: 64px; border: 2px solid var(--line-2); border-radius: 8px; overflow: hidden; background: #fff; cursor: pointer; }
.mv-thumbs button[aria-current="true"] { border-color: var(--red); box-shadow: 0 0 10px var(--red-glow); }
.mv-thumbs img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; max-height: none; }
.mv-info { color: var(--text); }
.mv-count { color: var(--muted); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 6px; }
.mv-name { font-family: var(--font-display); font-size: clamp(30px, 4vw, 46px); text-transform: uppercase; line-height: 1; margin: 0 0 10px; }
.mv-price { font-family: var(--font-display); font-size: 30px; color: var(--red-2); text-shadow: 0 0 10px var(--red-glow); margin: 0 0 10px; }
.mv-detail { color: var(--muted); font-size: 17px; line-height: 1.6; margin: 0 0 18px; }
.mv-order { font-size: 15px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px; margin: 0; }
.merch-card a { cursor: zoom-in; }
@media (max-width: 860px) {
  .merch-viewer { padding: 64px 12px 16px; align-items: flex-start; overflow-y: auto; }
  .mv-body { grid-template-columns: 1fr; gap: 16px; }
  .merch-viewer .mv-main { max-height: 52vh; }
  .merch-viewer .lb-prev, .merch-viewer .lb-next { top: 30vh; }
  .mv-thumbs button { width: 56px; height: 56px; }
}

/* merch cards line up: the photo strip always takes one thumbnail's height
   and every title reserves two lines, so descriptions start level */
.merch-card .merch-more:empty::before { content: ""; display: block; width: calc(33.33% - 4px); aspect-ratio: 1; }
/* One line of title for every card: the qualifier (Unisex, Ladies') sits in
   a small label above it rather than making some names wrap. */
.merch-card .merch-name { min-width: 0; }
.merch-card .merch-tag { display: block; min-height: 1.4em; font-family: var(--font-display); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--red-2); }
.merch-card h3 { line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Phones: two to a row so the range fits on a couple of screens. The other
   views live in the viewer a tap away, so the strip is left out here. */
@media (max-width: 600px) {
  .merch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .merch-card .merch-more { display: none; }
  .merch-card .merch-top { padding: 10px 12px 0; }
  .merch-card .merch-tag { font-size: 11px; letter-spacing: .1em; }
  .merch-card h3 { font-size: 20px; }
  .merch-card .price { font-size: 18px; }
  .merch-card p { font-size: 13px; line-height: 1.45; padding: 0 12px 12px; }
}