@view-transition { navigation: auto; }

:root{
  --paper:#f2efe6;
  --ink:#000;
  --pink:#f47b8b;
  --red:#ab1f1f;
  --orange:#d97325;
  --gold:#ffc700;

  --f:"Archivo",system-ui,sans-serif;
  --display-f:"Alfa Slab One",serif;
  --gut:clamp(1rem,4vw,2.5rem);
  --beat:625ms;            /* 96bpm — the clock in site.js keeps this honest */
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f);font-size:clamp(1rem,.96rem + .2vw,1.05rem);
  line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
/* author styles beat the UA's [hidden] rule, so display:block above would
   otherwise keep hidden images visible */
[hidden]{display:none!important}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:900;font-variation-settings:"wdth" 125;
  text-transform:uppercase;line-height:.86;letter-spacing:-.005em}

/* ---------- the count ruler: one clock for the whole page ---------- */
.ruler{
  position:sticky;top:0;z-index:50;
  display:grid;grid-template-columns:repeat(8,1fr);
  height:7px;background:var(--paper);border-bottom:1px solid var(--ink);
  view-transition-name:ruler;
}
.ruler i{border-right:1px solid var(--ink);background:transparent;transition:background 90ms linear}
.ruler i:last-child{border-right:0}
.ruler i.on{background:var(--pink)}
.ruler i.on.down{background:var(--red)}

header{
  view-transition-name:masthead;background:var(--paper);
  border-bottom:1px solid var(--ink);
  padding:.7rem var(--gut);display:flex;align-items:center;gap:.3rem .8rem;flex-wrap:wrap;
}
/* Same lettering as the hero, set on one line so it holds at nav size —
   the stacked logo collapses into a smudge that small. */
header .sig{display:block;margin-right:auto;line-height:0;text-decoration:none}
header .sig img{height:30px;width:auto;display:block}
header nav{display:flex;gap:.1rem;flex-wrap:wrap}
header nav a{
  text-decoration:none;font-size:.74rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.02em;padding:.32rem .55rem;border:1px solid transparent;
}
header nav a:hover,header nav a:focus-visible{background:var(--pink);border-color:var(--ink)}
header nav a[aria-current]{background:var(--ink);color:var(--paper)}

main{view-transition-name:sheet;display:block}
section{padding:clamp(2.2rem,6vw,4.5rem) var(--gut);max-width:1120px;margin-inline:auto}

/* checkerboard JS overlay handles the visual; sheet just swaps underneath */
::view-transition-group(sheet){animation-duration:0ms}
::view-transition-old(sheet),::view-transition-new(sheet){animation:none}
/* every cell lights through the turn — the phrase boundary */
.ruler.turning i{background:var(--red)}

/* ---------- hero wordmark ----------
   The logo's lettering is Snell Roundhand Bold — the P's crossing stem, the
   small x-height against a tall cap and the stroke contrast all line up, and
   it ships on every Mac, which is what someone designing without a font
   budget reaches for. Set here and converted to outlines, so it is the real
   letterforms as curves: exact, clean, and no font to load. */
.mark{display:block;margin:0}
.mark img{width:100%;max-width:460px;height:auto;display:block}

.lede{max-width:36ch;font-size:clamp(1.1rem,3.2vw,1.35rem);margin:1.8rem 0 0;line-height:1.45}

/* ---------- hero: one shot, full bleed, ticket link on top ----------
   The wordmark is part of the photograph, so there is no card and no
   crossfading filmstrip behind it — the picture is the hero. */
.hero-s{padding:0;max-width:none;margin-inline:0;background:var(--ink)}
.hero-shot{position:relative;margin:0;display:block;line-height:0;background:var(--ink)}
.hero-shot img{width:100%;height:auto;display:block}
/* Bottom left is the darkest, emptiest corner of the frame — speakers and
   cable — so the button lands there without covering anyone dancing. */
.hero-cta{position:absolute;left:var(--gut);bottom:clamp(1.1rem,4vw,2.4rem);z-index:1;line-height:1}
/* Tall phones crop the frame rather than letterboxing it, so the dancer
   still fills the screen instead of sitting in a thin strip. */
@media(max-width:560px){
  .hero-shot img{height:clamp(300px,52vh,460px);object-fit:cover;object-position:32% center}
}

/* ---------- blocks & rules ---------- */
.block{background:var(--pink);border:1px solid var(--ink);padding:clamp(1rem,3vw,1.6rem)}
.block.deep{background:var(--red);color:var(--paper)}
.head{display:flex;align-items:flex-end;gap:1rem;border-bottom:1px solid var(--ink);padding-bottom:.5rem;margin-bottom:1.5rem}
.head h2{font-size:clamp(2rem,8vw,4.5rem);font-family:var(--display-f);font-weight:400;font-variation-settings:normal;white-space:nowrap}
.head p{margin:0 0 0 auto;font-size:.74rem;text-align:right;max-width:24ch;text-transform:uppercase;letter-spacing:.02em}

/* ---------- full-width bands (e.g. dark sections) ---------- */
.band--dark{background:var(--ink);color:var(--paper)}
.band--dark .head{border-bottom-color:rgba(255,255,255,.18)}
.band--dark .bill{border-color:rgba(255,255,255,.18)}
.band--dark .ev{border-bottom-color:rgba(255,255,255,.12)}
.band--dark .ev:hover{background:var(--pink);color:var(--ink)}
.band--dark .ev .off{color:var(--paper)}
.band--dark a{color:var(--paper)}
.band--dark a:hover,.band--dark a:focus-visible{color:var(--gold)}

.cta{
  display:inline-block;text-decoration:none;background:var(--ink);color:var(--paper);
  font-weight:800;font-size:.9rem;text-transform:uppercase;letter-spacing:.03em;
  padding:.8rem 1.4rem;border:1px solid var(--ink);
}
.cta:hover,.cta:focus-visible{background:var(--pink);color:var(--ink)}

/* ---------- marquee, quantised to the clock ---------- */
.mq{border-block:1px solid var(--ink);overflow:hidden;white-space:nowrap;padding:.6rem 0;background:var(--paper)}
.mq.mq--dark{background:var(--ink);border-block-color:var(--ink);color:var(--paper)}
.mq.mq--dark b{color:var(--gold)}
.mq div{
  display:inline-block;font-weight:900;font-variation-settings:"wdth" 125;
  text-transform:uppercase;font-size:clamp(1rem,3vw,1.4rem);letter-spacing:.01em;
  animation:slide calc(var(--beat)*32) steps(32) infinite;
}
.mq b{color:var(--pink);font-weight:900}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- calendar ---------- */
.bill{border:1px solid var(--ink)}
.ev{display:grid;grid-template-columns:auto 1fr auto;gap:.1rem 1.1rem;align-items:center;
  padding:.85rem clamp(.7rem,2.5vw,1.1rem);border-bottom:1px solid var(--ink)}
.ev:last-child{border-bottom:0}
.ev:hover{background:var(--pink)}
.ev .d{font-weight:900;font-variation-settings:"wdth" 125;font-size:clamp(1rem,3.4vw,1.4rem);
  font-variant-numeric:tabular-nums;min-width:4.2ch}
.ev .n{font-weight:700}
.ev .m{grid-column:2;font-size:.79rem}
.ev .a{grid-row:span 2;font-weight:800;font-size:.82rem;text-transform:uppercase;white-space:nowrap}
.ev .a .off{font-weight:500;text-transform:none;opacity:.6}

/* A row with a flyer gains a leading image column. The rows are declared
   explicitly so the image can span them with 1/-1 — with rows left implicit,
   -1 resolves to the first line and the image collapses into one cell. */
.ev.has-flyer{grid-template-columns:auto auto 1fr auto;grid-template-rows:auto auto}
.ev.has-flyer .m{grid-column:3}
.ev-flyer{grid-row:1/-1;grid-column:1;align-self:center;
  width:clamp(58px,8vw,84px);aspect-ratio:2/3;object-fit:cover;
  display:block;border:1px solid var(--ink);background:var(--ink)}
.band--dark .ev-flyer{border-color:rgba(255,255,255,.25)}

@media(max-width:560px){
  .ev{grid-template-columns:auto 1fr}
  /* Stack in reading order — when it is, then where, then how to get in —
     rather than letting the buy link float up between the name and the time. */
  .ev .m{grid-row:2;grid-column:2}
  .ev .a{grid-row:3;grid-column:2;justify-self:start;margin-top:.3rem}
  /* No room for a date gutter beside a picture — the flyer takes the left
     column and everything else stacks against it. */
  .ev.has-flyer{grid-template-columns:auto 1fr;grid-template-rows:auto auto auto auto}
  .ev.has-flyer .d,.ev.has-flyer .n,.ev.has-flyer .m,.ev.has-flyer .a{grid-column:2}
  .ev.has-flyer .d{grid-row:1}
  .ev.has-flyer .n{grid-row:2}
  .ev.has-flyer .m{grid-row:3}
  .ev.has-flyer .a{grid-row:4}
  .ev-flyer{width:clamp(64px,20vw,92px)}
}

/* ---------- repertoire + step player ---------- */
.dance{border-bottom:1px solid var(--ink)}
/* Every row is [name (+ song) | steps link]. When the steps are recorded the
   name half is a button that opens the player; otherwise it is plain text.
   Both shapes share the row so the rhythm down the page doesn't break. */
.dance .row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.8rem}
.dance .row>button{
  all:unset;box-sizing:border-box;display:grid;grid-template-columns:1fr auto;
  align-items:center;gap:.8rem;width:100%;padding:.85rem .2rem;cursor:pointer;
}
.dance .row>button:hover,.dance .row>button:focus-visible{background:var(--pink)}
.dance .row>.nm{padding:.85rem 0}
.dance .nm{min-width:0}
.dance .t{font-weight:900;font-variation-settings:"wdth" 125;text-transform:uppercase;
  font-size:clamp(1rem,3.6vw,1.45rem)}
.dance .c{font-size:.72rem;font-variant-numeric:tabular-nums;text-transform:uppercase;white-space:nowrap}
.dance .sheet{font-size:.72rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.02em;white-space:nowrap;text-decoration:none;
  border:1px solid var(--ink);padding:.3rem .55rem;margin-right:.2rem}
.dance .sheet:hover{background:var(--ink);color:var(--paper)}
.nosteps{font-size:.78rem;opacity:.7;max-width:46ch;margin:.4rem 0 0}

@media(max-width:560px){
  /* Side by side there isn't width for both, and the name wraps to three
     lines beside its own counts. Stack them; the steps link stays put. */
  .dance .row>button{grid-template-columns:1fr;gap:.15rem}
  .dance .c{justify-self:start}
}
.dance .s{display:block;font-weight:500;font-variation-settings:"wdth" 100;
  text-transform:none;font-size:.79rem;opacity:.65;margin-top:.1rem}

/* ---------- playlist ---------- */
.playlist{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.4rem;
  font-weight:800;font-size:.82rem;text-transform:uppercase;letter-spacing:.02em;
  padding:.7rem 1rem;border:1px solid var(--ink);background:var(--gold);
  color:var(--ink);text-decoration:none}
.playlist:hover{background:var(--ink);color:var(--paper)}

.player{display:grid;gap:1rem;padding:0 .2rem 1.2rem;grid-template-columns:minmax(0,150px) 1fr;align-items:start}
.floor{border:1px solid var(--ink);aspect-ratio:1;width:100%}
/* the dancer turns at the wall change; the room stays where it is */
.facing{transition:transform calc(var(--beat)*.9) cubic-bezier(.6,0,.25,1)}
.facing-now{font-variation-settings:"wdth" 125;font-weight:700}
.counts{display:grid;grid-template-columns:repeat(8,1fr);border:1px solid var(--ink);border-right:0}
.counts b{
  border-right:1px solid var(--ink);text-align:center;padding:.3rem 0;
  font-size:.78rem;font-weight:800;font-variant-numeric:tabular-nums;
}
.counts b.on{background:var(--red);color:var(--paper)}
.step-label{font-size:.82rem;margin:.55rem 0 0;min-height:1.5em}
.step-label b{font-variation-settings:"wdth" 125;text-transform:uppercase}
.wall{font-size:.72rem;text-transform:uppercase;letter-spacing:.02em;margin:.35rem 0 0}
.wall em{font-style:normal;background:var(--pink);padding:.1rem .35rem;border:1px solid var(--ink)}

/* ---------- photos ---------- */
.gal{display:grid;gap:1px;background:var(--ink);border:1px solid var(--ink);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.gal figure{margin:0;background:var(--ink);padding:0;position:relative;overflow:hidden}
.gal img{aspect-ratio:1;object-fit:cover;width:100%;display:block}
.gal figcaption{
  position:absolute;bottom:0;left:0;right:0;
  padding:.4rem .55rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.02em;
  background:rgba(242,239,230,.9);opacity:0;transition:opacity 120ms linear}
.gal figure:hover figcaption,.gal figure:focus-within figcaption{opacity:1}
.gal-empty{padding:clamp(2.5rem,6vw,4rem) 0;font-size:.95rem}

footer{border-top:1px solid var(--ink);padding:clamp(3rem,8vw,5rem) var(--gut);display:grid;gap:.8rem;text-align:center}
footer .ig{font-family:var(--display-f);font-weight:400;font-variation-settings:normal;text-transform:uppercase;
  font-size:clamp(2rem,9vw,5rem);text-decoration:none;line-height:.9;letter-spacing:-.01em}
footer .ig:hover{color:var(--pink)}
footer small{font-size:.72rem;text-transform:uppercase;letter-spacing:.03em}
footer small a{text-decoration:underline;text-underline-offset:2px}
footer small a:hover{color:var(--pink)}

:focus-visible{outline:2px solid var(--red);outline-offset:2px}

@media(max-width:600px){
  /* section headers: stack h2 and subtext instead of fighting for width */
  .head{flex-direction:column;align-items:flex-start;gap:.3rem}
  .head p{margin-left:0;text-align:left}
  /* nowrap prevents star-splitting on desktop but causes overflow at small sizes */
  .head h2{white-space:normal}
}

@media(max-width:520px){.player{grid-template-columns:1fr}.floor{max-width:190px}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .mark .a{transform:translate(-.04em,.025em)}
  .mark .b{transform:translate(.04em,-.025em)}
  #ckbd{display:none}
  .ruler{display:none}
}

.watch{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.02em;
  border-bottom:2px solid var(--pink)}

/* every count registers on the marker, travelling or not */
.marker circle{transform-origin:50px 50px}
.marker.tap circle{animation:tap calc(var(--beat)*.5) ease-out}
@keyframes tap{0%{transform:scale(1)}35%{transform:scale(1.3)}100%{transform:scale(1)}}

/* ---------- dance video ---------- */
.video{margin:0 .2rem;max-width:34rem}
.video:not(:empty){margin:1rem .2rem 1.2rem}
.video iframe{width:100%;aspect-ratio:16/9;border:1px solid var(--ink);display:block;background:var(--ink)}

/* ---------- step player actions ----------
   One quiet row in the site's own micro-type. These were three bordered
   boxes in three places, which made the player read as a control panel. */
.acts{display:flex;gap:1.1rem;align-items:baseline;flex-wrap:wrap;margin:.75rem 0 0}
.acts button,.acts a{
  all:unset;box-sizing:border-box;cursor:pointer;
  font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.02em;
  border-bottom:2px solid var(--pink);
}
.acts button:hover,.acts a:hover,.acts button:focus-visible,.acts a:focus-visible{
  background:var(--pink);
}
.acts .bpm{margin-left:auto;font-size:.68rem;text-transform:uppercase;letter-spacing:.02em;
  opacity:.55;font-variant-numeric:tabular-nums}

/* open row: the pink slab read as a stuck hover state rather than as open */
.dance>button[aria-expanded="true"]{background:transparent}
.dance>button[aria-expanded="true"] .t{box-shadow:inset 0 -4px 0 var(--pink)}

/* ---------- running prose ---------- */
.prose{max-width:62ch}
.prose p{margin:0 0 1rem;font-size:1.02rem;line-height:1.6}
.prose p:last-child{margin-bottom:0}
.prose a{text-decoration:underline;text-decoration-color:var(--pink);text-underline-offset:2px}

/* the card is dark, so anything inside it has to invert */
.hero-cta{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.hero-cta:hover,.hero-cta:focus-visible{background:var(--pink);border-color:var(--pink)}

/* thanks.html sets words the logo doesn't contain, so it stays type */
.mark .c{display:block;font-family:var(--script-f);font-weight:400;
  font-size:clamp(3.6rem,11vw,7.5rem);line-height:.82;color:var(--gold)}
.mark .c .two{color:var(--pink);display:block}

/* ---------- past nights ---------- */
.flyers{display:grid;gap:1rem;margin-top:1rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr))}
.flyer{margin:0}
.flyer img{width:100%;height:auto;border:1px solid var(--ink);display:block}
.flyer figcaption{font-size:.72rem;text-transform:uppercase;letter-spacing:.02em;
  padding:.4rem .1rem 0}