/* ==========================================================================
   Dance Addiction — shared design system
   Owned by the design-system task. Page authors: DO NOT EDIT.
   Page-specific rules belong in assets/<page>.css, linked after this file.
   Documentation: assets/CLASSES.md
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  --ink:#14161d;
  --ink-deep:#0b0c11;
  --paper:#eef0f4;
  --card:#f8f9fb;
  --accent:#6e66ff;
  --accent-d:#2d2ac4;
  --accent-dd:#211f96;  /* --accent-d one step down: button hover + button shadow */

  /* category coding ONLY — dots, small labels, 3px rules. Never a fill. */
  --latin:#e21a86;
  --swing:#00a08c;
  --blues:#d38a00;

  --muted:#5e6474;
  --line:#dde1e8;

  /* Derived surface + on-dark tints. Not new palette entries: each one is a
     shade of a token above, named here so nothing hard-codes a hex. */
  --paper-2:#e3e6ec;    /* --paper, one step down: alt sections, row hover   */
  --on-dark:#c7cbd8;    /* body text on --ink-deep                          */
  --accent-lt:#9d9dff;  /* --accent lifted for kickers/labels on --ink-deep  */
  --swing-lt:#33d6bd;   /* --swing lifted for labels on --ink-deep           */
  --blues-lt:#f5b23d;   /* --blues lifted for labels on --ink-deep           */

  /* --swing and --blues darkened to the same hue for family label TEXT on the
     light surfaces (--paper 5.80:1 / --paper-2 5.29:1 / --card 6.28:1 and
     6.01 / 5.48 / 6.50). TEXT ONLY: the 8px dots, the 3px card rules and the
     timetable's left rules are non-text and keep the bright tokens, which is
     what makes the week scannable at a glance. */
  --swing-d:#00695c;    /* --swing darkened, hue held at 172                 */
  --blues-d:#7a5300;    /* --blues darkened, hue held at 39                  */

  --ui:'Archivo',system-ui,sans-serif;
  --hand:'Caveat',cursive;

  /* internals */
  --shadow:2px 2px 0 rgba(20,22,29,.10);
  --shadow-lift:3px 3px 0 rgba(20,22,29,.14);
  --radius:10px;
  --t:150ms ease;
  --navh:56px;
}

/* --------------------------------------------------------------------------
   2. RESET + FOUNDATION
   -------------------------------------------------------------------------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  font-family:var(--ui);
  font-size:.95rem;
  font-weight:400;
  line-height:1.55;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{max-width:100%;display:block}

/* Inline links sit on --paper/--card, where --accent is only 3.68:1. --accent-d
   is 8.22:1, so accent-coloured TEXT on the light surfaces uses --accent-d
   throughout; --accent is kept for fills, borders, rules and the dark bands. */
a{color:var(--accent-d);text-decoration:none}
a:hover{color:var(--accent-d);text-decoration:underline}

strong,b{font-weight:700}

::selection{background:var(--accent);color:#fff}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* anchors must clear the sticky nav */
[id]{scroll-margin-top:calc(var(--navh) + 12px)}

.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

section{padding:48px 0}
section.tight{padding:32px 0}
section.flush-top{padding-top:0}
section.flush-bottom{padding-bottom:0}

/* alternating background for rhythm without colour bands */
section.alt{background:var(--paper-2);border-block:1px solid var(--line)}

h1,h2,h3,h4{font-family:var(--ui);color:var(--ink)}

h1{
  font-size:clamp(2.1rem,4.4vw,3.1rem);
  line-height:1.08;
  font-weight:800;
  letter-spacing:-.02em;
}
h2{font-size:1.65rem;line-height:1.18;font-weight:700;letter-spacing:-.02em}
h3{font-size:1.05rem;line-height:1.3;font-weight:700}
h4{font-size:.95rem;font-weight:700}

p{margin:0}
p + p{margin-top:.7em}

.kicker{
  display:block;
  font-family:var(--ui);
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--accent-d);   /* 8.22:1 on --paper; .hero/.pagehead lift it to --accent-lt */
  margin-bottom:8px;
}

.lede{
  max-width:60ch;
  color:var(--muted);
  margin-top:10px;
}

/* the single permitted hand-lettered accent, max one per page */
.hand{
  font-family:var(--hand);
  font-weight:700;
  font-size:1.2em;        /* Caveat's small x-height needs >1em to sit level with Archivo 800 */
  line-height:1;
  color:var(--accent-d);  /* on --paper (studios .maprect); lifted on the dark bands below */
}

/* Section header helper: title left, optional link right.
   Baseline — not flex-end — alignment: flex-end pins the link to the BOTTOM of
   the heading block, so it sat beside the h2 when there was no lede and dropped
   to the lede's last line when there was. Baseline puts it on the kicker's
   baseline, a fixed offset from the top of the heading, in both cases. */
.sechead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:22px;
}
.sechead .lede{margin-top:8px}
.sechead .more{
  font-size:.85rem;font-weight:700;letter-spacing:.02em;white-space:nowrap;
}

.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* --------------------------------------------------------------------------
   3. NAV
   -------------------------------------------------------------------------- */
nav{
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(238,240,244,.94);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
nav .wrap{
  display:flex;
  align-items:center;
  gap:24px;
  height:var(--navh);
}

.brand{
  font-family:var(--ui);
  font-weight:800;
  font-size:1.08rem;
  letter-spacing:-.02em;
  color:var(--ink);
  text-decoration:none;
  white-space:nowrap;
}
.brand span{color:var(--accent-d)}
.brand:hover{color:var(--ink);text-decoration:none}

nav .links{display:flex;align-items:center;gap:26px;margin-left:auto}
nav .links a{
  position:relative;
  color:var(--ink);
  text-decoration:none;
  font-size:.88rem;
  font-weight:600;
  letter-spacing:.01em;
  padding:4px 0;
  transition:color var(--t);
}
nav .links a::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;
  height:2px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--t);
}
nav .links a:hover{color:var(--accent-d);text-decoration:none}
nav .links a:hover::after{transform:scaleX(1)}
nav .links a.here{color:var(--accent-d)}
nav .links a.here::after{transform:scaleX(1)}

.navtoggle{
  display:none;
  margin-left:auto;
  font:inherit;
  font-size:1.3rem;
  line-height:1;
  color:var(--ink);
  background:none;
  border:1.5px solid var(--line);
  border-radius:8px;
  padding:5px 11px;
  cursor:pointer;
  transition:border-color var(--t),color var(--t);
}
/* The glyph is TEXT on --paper, so it takes --accent-d (8.22:1) like every other
   accent-coloured label; the border is non-text and keeps the bright --accent. */
.navtoggle:hover{border-color:var(--accent);color:var(--accent-d)}

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn{
  display:inline-block;
  font-family:var(--ui);
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.02em;
  line-height:1.2;
  text-decoration:none;
  text-align:center;
  cursor:pointer;
  padding:12px 22px;
  border:none;
  border-radius:8px;
  /* White on --accent is only 4.19:1 and button labels are normal-size text, so
     the fill is --accent-d (9.38:1). Hover/active step down again to
     --accent-dd (12.35:1), keeping the same visible delta the old
     --accent -> --accent-d hover had. */
  background:var(--accent-d);
  color:#fff;
  box-shadow:2px 2px 0 var(--accent-dd);
  transition:background var(--t),transform var(--t),box-shadow var(--t),color var(--t);
}
.btn:hover{background:var(--accent-dd);color:#fff;text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(1px);box-shadow:0 0 0 var(--accent-dd)}

.btn-ghost{
  background:transparent;
  color:var(--ink);
  border:1.5px solid var(--ink);
  box-shadow:none;
  padding:10.5px 20.5px;
}
.btn-ghost:hover{background:transparent;color:var(--accent-d);border-color:var(--accent-d)}

.btn-sm{font-size:.8rem;padding:8px 15px}
.btn-sm.btn-ghost{padding:6.5px 13.5px}

.btnrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:22px}

/* on dark surfaces */
.hero .btn-ghost,.pagehead .btn-ghost{color:var(--paper);border-color:rgba(238,240,244,.45)}
.hero .btn-ghost:hover,.pagehead .btn-ghost:hover{color:#fff;border-color:#fff}

/* --------------------------------------------------------------------------
   5. HERO (index only)
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  overflow:hidden;
  padding:56px 0 48px;
  color:var(--paper);
  background:
    radial-gradient(760px 420px at 78% 18%, rgba(110,102,255,.30), transparent 62%),
    var(--ink-deep);
}
.hero .wrap{position:relative;z-index:1}

.hero-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:36px;
  align-items:center;
}

.hero h1{color:var(--paper);max-width:16ch}
.hero .kicker{color:var(--accent-lt)}
.hero .hand,.pagehead .hand{color:var(--accent-lt)}

.hero .sub{
  color:var(--on-dark);
  font-size:1.02rem;
  max-width:52ch;
  margin-top:14px;
}

.facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.fact{
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--on-dark);
  border:1px solid rgba(238,240,244,.24);
  border-radius:999px;
  padding:5px 13px;
  white-space:nowrap;
}
.fact b{color:var(--paper)}

/* --------------------------------------------------------------------------
   6. TONIGHT CARD (hero right column — replaces the deleted vinyl)
   -------------------------------------------------------------------------- */
.tonight{
  background:var(--card);
  color:var(--ink);
  border-radius:12px;
  border-top:3px solid var(--accent);
  padding:20px 22px 18px;
  box-shadow:3px 3px 0 rgba(0,0,0,.28);
}
.tonight .lbl{
  display:block;
  font-size:.68rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--accent-d);
}
.tonight .day{
  display:block;
  font-size:1.5rem;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.1;
  margin-top:4px;
}
.tonight .head{
  display:block;
  font-size:1rem;
  font-weight:700;
  line-height:1.3;
  margin-top:8px;
}
.tonight p{color:var(--muted);font-size:.9rem;margin-top:6px}
.tonight .time{
  display:block;
  font-size:.82rem;
  font-weight:600;
  color:var(--ink);
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.tonight .fam{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.7rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-top:10px;
}

/* --------------------------------------------------------------------------
   7. WEEK STRIP (index)
   -------------------------------------------------------------------------- */
.weekstrip{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:10px;
}
.wcard{
  display:block;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px 12px 13px;
  color:var(--ink);
  text-decoration:none;
  min-width:0;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.wcard:hover{
  color:var(--ink);
  text-decoration:none;
  transform:translateY(-2px);
  box-shadow:var(--shadow-lift);
  border-color:var(--accent);
}
.wcard .d{
  font-size:.7rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--muted);
}
.wcard .h{
  display:block;
  font-size:.9rem;
  font-weight:700;
  line-height:1.25;
  margin-top:6px;
}
.wcard .t{
  display:block;
  font-size:.76rem;
  color:var(--muted);
  margin-top:7px;
  line-height:1.4;
}
.wcard.today{border-color:var(--accent);box-shadow:var(--shadow)}

/* --------------------------------------------------------------------------
   8. NIGHT ROWS (timetable) — dense grid, 3px family rule on the left
   -------------------------------------------------------------------------- */
.nights{border-top:1px solid var(--line)}

.night{
  display:grid;
  grid-template-columns:190px 1fr 172px;
  gap:22px;
  align-items:baseline;
  padding:15px 4px 15px 16px;
  border-bottom:1px solid var(--line);
  border-left:3px solid var(--fc,var(--muted));
  transition:background var(--t);
}
.night:hover{background:var(--paper-2)}
.night.n-latin{--fc:var(--latin)}
.night.n-swing{--fc:var(--swing)}
.night.n-blues{--fc:var(--blues)}

.night .day{font-size:1.05rem;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.night .day small{
  display:block;
  margin-top:3px;
  font-size:.68rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.night .headline{font-size:1rem;font-weight:700;line-height:1.3}
.night .tag{color:var(--muted);font-size:.9rem;margin-top:3px;max-width:62ch}
.night .when{
  font-size:.8rem;
  font-weight:600;
  line-height:1.55;
  color:var(--ink);
  text-align:right;
}
.night .when span{display:block;color:var(--muted);font-weight:400}

/* --------------------------------------------------------------------------
   9. DANCES
   -------------------------------------------------------------------------- */
.famtabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.famtab{
  font-family:var(--ui);
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--ink);
  background:var(--card);
  border:1.5px solid var(--line);
  border-radius:999px;
  padding:7px 16px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:7px;
  transition:border-color var(--t),color var(--t),background var(--t);
}
.famtab:hover{border-color:var(--accent);color:var(--accent-d)}
.famtab.active{
  background:var(--accent-d);   /* #fff label needs 4.5:1 — see .btn above */
  border-color:var(--accent-d);
  color:#fff;
}
.famtab.active .dot{background:#fff}

.dancegrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:16px;
}
.dancecard{
  background:var(--card);
  border:1px solid var(--line);
  border-top:3px solid var(--fc,var(--muted));
  border-radius:10px;
  padding:16px 18px 15px;
  transition:transform var(--t),box-shadow var(--t);
}
.dancecard:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.dancecard.f-latin{--fc:var(--latin)}
.dancecard.f-swing{--fc:var(--swing)}
.dancecard.f-blues{--fc:var(--blues)}
.dancecard h3{margin-bottom:6px}
.dancecard p{font-size:.9rem;color:var(--muted)}
.dancecard p em{color:var(--ink);font-style:italic}
.dancecard .meta{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid var(--line);
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--muted);
}

/* --------------------------------------------------------------------------
   10. PRICING — compact horizontal band, no punched holes, no full-bleed pink
   -------------------------------------------------------------------------- */
.pricerow{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  gap:0;
  background:var(--card);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:10px;
  padding:4px 0;
}
.ticket{
  flex:1 1 160px;
  padding:12px 20px;
  border-right:1px solid var(--line);
  text-align:left;
}
.ticket:last-child{border-right:none}
.ticket b{
  display:block;
  font-size:1.55rem;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.1;
  color:var(--accent-d);
}
.ticket span{display:block;font-size:.88rem;font-weight:600;margin-top:2px}
.ticket small{display:block;font-size:.8rem;color:var(--muted);margin-top:1px}
.pricerow .note{
  flex:1 1 190px;
  padding:12px 20px;
  font-size:.85rem;
  color:var(--muted);
  align-self:center;
}

/* --------------------------------------------------------------------------
   11. REASONS
   -------------------------------------------------------------------------- */
.reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.reason{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:10px;
  padding:16px 18px;
  transition:transform var(--t),box-shadow var(--t);
}
.reason:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.reason .num{
  display:block;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.14em;
  color:var(--accent-d);
  margin-bottom:6px;
}
.reason h3{margin-bottom:4px}
.reason p{font-size:.9rem;color:var(--muted)}

/* --------------------------------------------------------------------------
   12. LOCATIONS
   -------------------------------------------------------------------------- */
.loccards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.loccard{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:10px;
  padding:18px 20px 20px;
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:box-shadow var(--t);
}
.loccard:hover{box-shadow:var(--shadow-lift)}
.loccard h3{font-size:1.15rem}
.loccard address{font-style:normal;color:var(--muted);font-size:.9rem}

/* Status pills. "Open" is a state, not a dance family, so it must never wear a
   family colour: ink for open, accent outline for the one that is not open. */
.badge{
  align-self:flex-start;
  font-size:.68rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  border-radius:999px;
  padding:3px 10px;
  color:var(--paper);
  background:var(--ink);
  border:1px solid var(--ink);
}
.badge.soon{background:transparent;color:var(--accent-d);border-color:var(--accent-d)}

.maprect{
  height:118px;
  border-radius:8px;
  border:1px dashed var(--line);
  background:var(--paper);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 16px;
  color:var(--muted);
  font-size:.85rem;
}

/* accent-arrow list — travel directions, location notes */
.arrowlist{list-style:none;font-size:.9rem}
.arrowlist li{position:relative;padding-left:19px;margin:6px 0}
.arrowlist li::before{
  content:"\2192";position:absolute;left:0;top:0;color:var(--accent-d);font-weight:700;
}

/* --------------------------------------------------------------------------
   13. HIRE
   -------------------------------------------------------------------------- */
.hiregrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hirecard{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:10px;
  padding:16px 18px 17px;
  display:flex;
  flex-direction:column;
  transition:transform var(--t),box-shadow var(--t);
}
.hirecard:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.hirecard .size{
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--muted);
  margin:3px 0 10px;
}
.hirecard .rate{
  margin-top:auto;
  padding-top:12px;
  border-top:1px solid var(--line);
  font-size:.88rem;
  font-weight:700;
}
.hirecard .rate b{color:var(--accent-d)}

/* plain feature list — studio specs */
.featlist{list-style:none;font-size:.9rem;color:var(--muted)}
.featlist li{position:relative;padding-left:15px;margin:4px 0}
.featlist li::before{
  content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;
  border-radius:50%;background:var(--line);
}

/* --------------------------------------------------------------------------
   14. PAGE HEAD (subpages) — short ink band, much smaller than .hero
   -------------------------------------------------------------------------- */
.pagehead{
  background:
    radial-gradient(620px 260px at 82% 20%, rgba(110,102,255,.24), transparent 62%),
    var(--ink-deep);
  color:var(--paper);
  padding:28px 0 30px;
}
.pagehead h1{color:var(--paper);font-size:clamp(1.8rem,3.4vw,2.35rem)}
.pagehead .kicker{color:var(--accent-lt);margin-bottom:6px}
.pagehead p{color:var(--on-dark);margin-top:8px;max-width:62ch;font-size:.95rem}
.pagehead .wrap{display:flex;flex-direction:column;gap:0}

/* .lede is muted-on-paper by default; lift it on the two dark bands */
.hero .lede,.pagehead .lede{color:var(--on-dark)}

/* --------------------------------------------------------------------------
   15. FOOTER
   -------------------------------------------------------------------------- */
footer{
  background:var(--ink-deep);
  color:var(--on-dark);
  padding:36px 0;
  font-size:.88rem;
  border-top:3px solid var(--accent);
}
footer .wrap{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
}
/* The four column headings are the top-level headings of the footer landmark,
   so they are <h2>. line-height is pinned back to the inherited body value
   because the h2 type scale sets 1.18 and these must render exactly as the
   previous <h4> did. */
.fcol h2{
  color:var(--accent);
  font-family:var(--ui);
  font-size:.72rem;
  font-weight:700;
  line-height:inherit;
  text-transform:uppercase;
  letter-spacing:.14em;
  margin-bottom:7px;
}
.fcol p{line-height:1.7}
footer a{color:var(--paper);text-decoration:none}
footer a:hover{color:var(--accent);text-decoration:underline}

/* --------------------------------------------------------------------------
   16. CATEGORY CODING
   -------------------------------------------------------------------------- */
.dot{
  display:inline-block;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--muted);
  flex:0 0 auto;
  vertical-align:baseline;
}
.dot-latin{background:var(--latin)}
.dot-swing{background:var(--swing)}
.dot-blues{background:var(--blues)}

/* Family LABEL TEXT on the light surfaces: each family uses its darkened shade,
   because --latin/--swing/--blues are 3.38 / 2.80 / 2.34:1 on --paper. The dots
   and rules keep the bright tokens (section 16 top, and .dancecard/.night). */
.fam-latin{color:var(--accent-d)}  /* --latin has no darkened token of its own, so its light-surface
                                       label text routes through --accent-d (8.22:1) like every other
                                       accent-coloured label; the dot and rules keep bright --latin */
.fam-swing{color:var(--swing-d)}
.fam-blues{color:var(--blues-d)}

/* on dark surfaces the family text needs lifting */
.hero .fam-swing,.pagehead .fam-swing,footer .fam-swing{color:var(--swing-lt)}
.hero .fam-blues,.pagehead .fam-blues,footer .fam-blues{color:var(--blues-lt)}
.hero .fam-latin,.pagehead .fam-latin,footer .fam-latin{color:var(--accent-lt)}

/* small standalone family label */
.famlabel{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.7rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
}

/* legend row for the three families */
.famkey{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px}

/* --------------------------------------------------------------------------
   17. GENERIC CARD + UTILITIES
   -------------------------------------------------------------------------- */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:10px;
  padding:18px 20px;
}
.card-accent{border-top:3px solid var(--accent)}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-2-1{display:grid;grid-template-columns:1.6fr 1fr;gap:24px;align-items:start}

.rule{border:0;border-top:1px solid var(--line);margin:26px 0}
.muted{color:var(--muted)}
.center{text-align:center}
.nowrap{white-space:nowrap}
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}
.mt-16{margin-top:16px}
.mt-24{margin-top:24px}

/* --------------------------------------------------------------------------
   18. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width:980px){
  .hero-grid{gap:26px}
  .night{grid-template-columns:160px 1fr 150px;gap:16px}
  /* 3-item grids stay 3-across down to 720 — a 2-col rule orphans the third card */
  .reasons,.hiregrid,.grid-3{gap:12px}
  footer .wrap{grid-template-columns:1fr 1fr;gap:24px}
  .grid-2-1{grid-template-columns:1fr}
}

@media (max-width:900px){
  .hero{padding:44px 0 40px}

  /* 7-column week strip becomes a snapping horizontal scroller.
     scroll-padding-inline keeps the snap position clear of the bleed gutter,
     otherwise the strip opens with the first card cropped against the edge. */
  .weekstrip{
    display:flex;
    gap:10px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-bottom:6px;
    margin:0 -24px;
    padding-inline:24px;
    scroll-padding-inline:24px;
  }
  .wcard{flex:0 0 210px;scroll-snap-align:start}

  .grid-2{grid-template-columns:1fr}
}

/* The two location cards hold a short address, a map placeholder and a 3-item
   list: at 768 a 352px column still sets that comfortably, and collapsing there
   left a wide empty right margin. They go one-up at 620, where the column would
   otherwise drop under ~280px. */
@media (max-width:620px){
  .loccards{grid-template-columns:1fr}
}

/* The hero stays two-column down to 760: collapsing at 900 left a ~300px
   empty band beside the capped Tonight card on tablets. Below 760 the card
   fills the column and reflows into a horizontal band. */
@media (max-width:760px){
  .hero-grid{grid-template-columns:1fr;gap:22px}
  .hero h1{max-width:100%}
  .hero .sub{max-width:100%}

  .tonight{
    max-width:none;
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    column-gap:14px;
    row-gap:2px;
    padding:16px 18px 15px;
  }
  .tonight .day,.tonight .head{margin-top:0}
  .tonight .fam{margin-top:0;margin-left:auto}
  .tonight p{flex:1 1 100%;margin-top:5px}
  .tonight .time{flex:1 1 100%;margin-top:10px;padding-top:10px}
}

/* Nav collapses at 820, not 720: a 768 tablet is a touch device and the
   desktop link row is only ~30px tall, under the 24px+ target guidance. */
@media (max-width:820px){
  .navtoggle{display:block;padding:10px 13px}
  nav .wrap{position:relative}
  nav .links{
    display:none;
    position:absolute;
    left:0;right:0;
    top:var(--navh);
    margin-left:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    box-shadow:0 8px 18px rgba(20,22,29,.10);
    padding:6px 24px 12px;
  }
  nav.open .links{display:flex}
  nav .links a{padding:10px 0;border-bottom:1px solid var(--line);font-size:.95rem}
  nav .links a:last-child{border-bottom:none}
  nav .links a::after{display:none}

  /* Touch targets: inline text links and the small controls all clear 24px. */
  footer a,
  .sechead .more,
  .loccard a,
  .arrowlist a,
  .featlist a,
  .tonight .time a,
  .night a{
    display:inline-block;
    padding-block:7px;
  }
  .famtab{padding:13px 18px}
  .btn-sm{padding:13px 20px}
  .btn-sm.btn-ghost{padding:11.5px 18.5px}
}

@media (max-width:720px){
  section{padding:36px 0}

  .night{
    grid-template-columns:1fr;
    gap:5px;
    padding:14px 4px 14px 14px;
  }
  .night .when{text-align:left}
  .night .when span{display:inline}

  .reasons,.hiregrid,.grid-3{grid-template-columns:1fr}
  .pricerow{border-left-width:3px}
  .ticket{flex:1 1 100%;border-right:none;border-bottom:1px solid var(--line)}
  .ticket:last-child{border-bottom:none}
  .pricerow .note{flex:1 1 100%}
}

@media (max-width:480px){
  .wrap{padding:0 18px}
  .hero{padding:36px 0 34px}
  .hero .sub{font-size:.95rem}
  .facts{gap:6px}
  .fact{font-size:.72rem;padding:4px 11px}
  .weekstrip{margin:0 -18px;padding-inline:18px;scroll-padding-inline:18px}
  /* Size the card off the track rather than fixing it at 180px: at 390 a fixed
     180 put the third card's leading edge 10px inside the viewport, which reads
     as a clipping bug rather than "there is more". 2.4 cards per track keeps a
     ~40% peek of the third card at every width in this range. */
  .wcard{flex:0 0 calc((100% - 20px) / 2.4)}
  .btnrow .btn{flex:1 1 100%}
  footer .wrap{grid-template-columns:1fr;gap:20px}
  nav .links{padding:6px 18px 12px}
  .sechead{flex-direction:column;align-items:flex-start;gap:10px}
}

/* --------------------------------------------------------------------------
   19. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .wcard:hover,.dancecard:hover,.reason:hover,.hirecard:hover,.btn:hover{transform:none}
  .weekstrip{scroll-snap-type:none}
}