/* =======================================================================
   DIRTY WHISKEY :: dirtywhiskey.css
   The band's own page — blues and classic rock, Austin, Texas. A fourth
   room in the Frost Milano network, beside frost.html (ice/chrome),
   neck.html (shellac/amber) and shwing.html (retrowave/cable access).

   ================== THIS FILE IS A CHOOSER, ON PURPOSE ==================
   The band is new and nobody has picked a look yet, so this stylesheet
   ships SEVEN complete skins instead of one. Every one of them is a block
   of tokens under a `[data-theme="..."]` selector plus a handful of
   scoped flourishes at the foot of the file — the LAYOUT never changes,
   only the costume. js/dirtywhiskey.js writes the attribute onto <html>;
   ?theme=<id> pins one; the picker bar at the bottom of the page swaps it
   live.

   WHEN THE BAND PICKS ONE — and that is the point of the page — the tidy
   is mechanical and should be done, not left:

     1. set  <html data-theme="<the winner>">  in dirtywhiskey.html
     2. delete the other six token blocks and their flourish blocks here
     3. delete the picker markup + js/dirtywhiskey.js
     4. drop the @font-face blocks and the .woff2 files no surviving
        theme uses — css/dw-fonts.css carries the per-theme list. (This
        step used to read "cut the families out of the Google Fonts
        link"; there is no such link any more, the faces are served from
        fonts/dw/ in this repo. See that file's header for why.)
     5. delete js/dw-demo.js + css/dw-demo.css and the DEMO BOOTSTRAP
        <script> in dirtywhiskey.html — the placeholder shows, songs,
        portraits and email that make the page judgeable. All of it is
        invented and none of it may outlive the choice.

   ================== COLOUR LIVES ONLY IN THE TOKEN BLOCKS ===============
   Nothing below the themes hard-codes a colour. If a rule in "THE PAGE"
   needs a new colour, it gets a new token in all seven blocks — that is
   what keeps a skin from half-applying and looking broken in one section.

   No framework, no build step, no image files. Every texture is a CSS
   gradient so the page weighs what the fonts weigh and nothing more.
   ======================================================================= */

/* ======================================================================
   SHARED GEOMETRY — the same in every theme. Sizes, rhythm, breakpoints.
   Deliberately colourless: a token here can never make one skin differ
   from another, which is what makes the seven comparable.
   ====================================================================== */
:root{
  --wrap:      980px;   /* the reading column, same cap as frost.html's */
  --gap:       clamp(14px, 3.2vw, 26px);
  --sec-gap:   clamp(38px, 8vw, 76px);
  --pad:       clamp(16px, 4vw, 34px);

  /* Type scale. clamp() everywhere: a landscape phone is first-class and
     these must not need a media query to survive one. */
  --t-word:    clamp(2.9rem, 13vw, 7.2rem);   /* the wordmark */
  --t-head:    clamp(1.35rem, 5vw, 2.3rem);   /* section heads */
  --t-name:    clamp(1.05rem, 3.6vw, 1.5rem); /* a player's name */
  --t-body:    clamp(.95rem, 2.6vw, 1.06rem);
  --t-small:   clamp(.72rem, 2.1vw, .82rem);

  --pick-h:    56px;    /* the picker bar's height — body pads for it */
}

/* ======================================================================
   ================== THE SEVEN THEMES ==================================
   Every block defines the SAME token set. Copy one whole block to start
   an eighth; leave none of them out or that skin falls back to the one
   above it and looks half-dressed.

     --bg / --bg-2      the page, and the far dark behind it
     --grain            a background-image laid over the whole page
     --panel / --line   a section's body, and its hairline
     --ink / -soft / -faint   text, three weights of loud
     --accent / --accent-2    the one or two colours that carry the brand
     --on-accent        ink that survives ON the accent
     --display / --body / --alt   the three faces
     --word-space       letter-spacing for the wordmark
     --radius / --edge  corner and border treatment
     --shadow           the panel's lift
     --btn-radius       buttons can be a different shape to panels
   ====================================================================== */

/* ---------------------------------------------------------------------
   1. NEON — HONKY TONK NEON
   A beer sign in a black window at 1am. Hot pink tube, amber tube, and
   nothing else lit. The loudest of the seven and the most "bar".
   --------------------------------------------------------------------- */
[data-theme="neon"]{
  --bg:        #0a0509;
  --bg-2:      #150a12;
  --grain:     radial-gradient(1200px 600px at 50% -10%, rgba(255,46,120,.18), transparent 70%),
               radial-gradient(900px 500px at 90% 110%, rgba(255,176,42,.12), transparent 70%);
  --panel:     #150c14;
  --panel-2:   #1e1019;
  --line:      rgba(255,46,120,.30);
  --ink:       #ffeef6;
  --ink-soft:  #e0b9cd;
  --ink-faint: #8d6d80;
  --accent:    #ff2e78;
  --accent-2:  #ffb02a;
  --on-accent: #14060d;
  --display:   "Anton", "Impact", sans-serif;
  --body:      "Space Grotesk", system-ui, sans-serif;
  --alt:       "Space Grotesk", system-ui, sans-serif;
  --word-space: .02em;
  --radius:    4px;
  --btn-radius: 999px;
  --edge:      1px solid var(--line);
  --shadow:    0 0 0 1px rgba(255,46,120,.14), 0 18px 40px rgba(0,0,0,.55);
}

/* ---------------------------------------------------------------------
   2. LABEL — WHISKEY LABEL
   The front of a bottle. Cream paper, black letterpress, one copper rule.
   The quietest and the most grown-up; reads as a band that has its act
   together rather than one shouting.
   --------------------------------------------------------------------- */
[data-theme="label"]{
  --bg:        #f0e5cf;
  --bg-2:      #e6d8bd;
  --grain:     repeating-linear-gradient(0deg, rgba(120,90,50,.035) 0 1px, transparent 1px 3px),
               radial-gradient(900px 700px at 50% 0%, rgba(255,255,255,.55), transparent 70%);
  --panel:     #f7efdd;
  --panel-2:   #efe3c9;
  --line:      rgba(40,30,20,.30);
  --ink:       #191308;
  --ink-soft:  #4a3c28;
  --ink-faint: #8a7a60;
  --accent:    #96541f;
  --accent-2:  #1d1608;
  --on-accent: #f7efdd;
  --display:   "Playfair Display", Georgia, serif;
  --body:      Georgia, "Times New Roman", serif;
  --alt:       "Playfair Display", Georgia, serif;
  --word-space: .06em;
  --radius:    0;
  --btn-radius: 0;
  --edge:      1px solid var(--line);
  --shadow:    none;
}

/* ---------------------------------------------------------------------
   3. ICE — 1999 FROST
   The house style, verbatim: frost.html's navy-and-cyan chrome. Pick this
   one and the band page reads as part of the same network as the singer's
   own page rather than as a separate site.
   --------------------------------------------------------------------- */
[data-theme="ice"]{
  --bg:        #05131f;
  --bg-2:      #0a2036;
  --grain:     linear-gradient(180deg, rgba(63,193,255,.10), transparent 40%),
               repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 2px, transparent 2px 4px);
  --panel:     #0d2b45;
  --panel-2:   #12395c;
  --line:      #3fc1ff;
  --ink:       #eaf7ff;
  --ink-soft:  #a9d8f2;
  --ink-faint: #6f9cb8;
  --accent:    #3fc1ff;
  --accent-2:  #ffd23f;
  --on-accent: #04121d;
  --display:   "Anton", "Impact", sans-serif;
  --body:      "Space Grotesk", system-ui, sans-serif;
  --alt:       "VT323", "Courier New", monospace;
  --word-space: .01em;
  --radius:    2px;
  --btn-radius: 2px;
  --edge:      2px outset #2f8fbf;
  --shadow:    0 0 0 1px rgba(63,193,255,.25), 0 10px 30px rgba(0,0,0,.5);
}

/* ---------------------------------------------------------------------
   4. XEROX — FLYER ON A POLE
   A photocopied gig flyer: paper, black toner, one red rubber stamp,
   typewriter. Nothing on it looks designed, which is the point — it is
   the hardest of the seven to mistake for a template.
   --------------------------------------------------------------------- */
[data-theme="xerox"]{
  --bg:        #e9e6dd;
  --bg-2:      #ddd9ce;
  --grain:     radial-gradient(rgba(0,0,0,.10) 1px, transparent 1.4px) 0 0/4px 4px,
               repeating-linear-gradient(92deg, rgba(0,0,0,.03) 0 2px, transparent 2px 7px);
  --panel:     #f4f2ec;
  --panel-2:   #e6e3da;
  --line:      #1a1a1a;
  --ink:       #121212;
  --ink-soft:  #3c3c3c;
  --ink-faint: #7b7b76;
  --accent:    #c8221c;
  --accent-2:  #121212;
  --on-accent: #f4f2ec;
  --display:   "Anton", "Impact", sans-serif;
  --body:      "Special Elite", "Courier New", monospace;
  --alt:       "Special Elite", "Courier New", monospace;
  --word-space: -.01em;
  --radius:    0;
  --btn-radius: 0;
  --edge:      3px solid #1a1a1a;
  --shadow:    5px 5px 0 rgba(0,0,0,.85);
}

/* ---------------------------------------------------------------------
   5. VELVET — SMOKY LOUNGE
   A dim blues room after midnight: oxblood, brass, one warm lamp. Serif,
   wide, unhurried. The theme that says "we play slow ones too".
   --------------------------------------------------------------------- */
[data-theme="velvet"]{
  --bg:        #120809;
  --bg-2:      #1e0d0f;
  --grain:     radial-gradient(800px 520px at 50% 0%, rgba(255,190,110,.14), transparent 72%),
               repeating-linear-gradient(45deg, rgba(255,255,255,.014) 0 3px, transparent 3px 6px);
  --panel:     #1d0f11;
  --panel-2:   #2a1618;
  --line:      rgba(201,162,39,.36);
  --ink:       #f6ece0;
  --ink-soft:  #d3b9a4;
  --ink-faint: #8d7362;
  --accent:    #c9a227;
  --accent-2:  #9c2b2b;
  --on-accent: #170a0b;
  --display:   "Playfair Display", Georgia, serif;
  --body:      Georgia, "Times New Roman", serif;
  --alt:       "Playfair Display", Georgia, serif;
  --word-space: .08em;
  --radius:    2px;
  --btn-radius: 999px;
  --edge:      1px solid var(--line);
  --shadow:    0 22px 50px rgba(0,0,0,.6);
}

/* ---------------------------------------------------------------------
   6. OUTLAW — DESERT HIGHWAY
   Sun-bleached tan, faded denim, western wood type. Texas without the
   cliché longhorn: this is the look of a roadside sign that has been in
   the sun for forty years.
   --------------------------------------------------------------------- */
[data-theme="outlaw"]{
  --bg:        #d8c8a6;
  --bg-2:      #c9b590;
  --grain:     repeating-linear-gradient(0deg, rgba(90,60,30,.05) 0 1px, transparent 1px 4px),
               radial-gradient(1000px 600px at 50% -20%, rgba(255,240,200,.6), transparent 65%);
  --panel:     #e7dcc0;
  --panel-2:   #dbcdaa;
  --line:      rgba(60,40,20,.38);
  --ink:       #2a1c0e;
  --ink-soft:  #57432b;
  --ink-faint: #8a7452;
  --accent:    #b4441f;
  --accent-2:  #35566e;
  --on-accent: #f4ead2;
  --display:   "Rye", "Georgia", serif;
  --body:      "Space Grotesk", system-ui, sans-serif;
  --alt:       "Rye", Georgia, serif;
  --word-space: .01em;
  --radius:    3px;
  --btn-radius: 3px;
  --edge:      2px solid rgba(60,40,20,.45);
  --shadow:    0 4px 0 rgba(60,40,20,.22);
}

/* ---------------------------------------------------------------------
   7. AMP — AMP FACE
   The front of a guitar amplifier: black grille cloth, a cream tweed
   panel, chrome. The only theme whose page furniture is a piece of gear
   rather than a piece of paper.
   --------------------------------------------------------------------- */
[data-theme="amp"]{
  --bg:        #14120f;
  --bg-2:      #1c1915;
  --grain:     repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 1px, transparent 1px 5px),
               repeating-linear-gradient(-45deg, rgba(0,0,0,.30) 0 1px, transparent 1px 5px);
  --panel:     #221e18;
  --panel-2:   #2c2720;
  --line:      rgba(214,199,160,.30);
  --ink:       #f0e7d2;
  --ink-soft:  #c3b696;
  --ink-faint: #86795f;
  --accent:    #d9b25b;
  --accent-2:  #cfd3d6;
  --on-accent: #17140f;
  --display:   "Anton", "Impact", sans-serif;
  --body:      "Space Grotesk", system-ui, sans-serif;
  --alt:       "VT323", "Courier New", monospace;
  --word-space: .04em;
  --radius:    6px;
  --btn-radius: 4px;
  --edge:      1px solid var(--line);
  --shadow:    inset 0 1px 0 rgba(255,255,255,.06), 0 14px 34px rgba(0,0,0,.6);
}

/* ======================================================================
   ================== THE PAGE ==========================================
   One layout, seven costumes. Nothing below names a colour.
   ====================================================================== */
*, *::before, *::after{ box-sizing: border-box; }

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

body{
  margin: 0;
  background: var(--grain), linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.6;
  /* room for the fixed picker bar + the phone's home indicator */
  padding-bottom: calc(var(--pick-h) + env(safe-area-inset-bottom, 0px) + 10px);
}

a{ color: var(--accent); }
a:focus-visible, button:focus-visible{
  outline: 3px solid var(--accent-2);
  outline-offset: 2px;
}

.wrap{
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* ---------- HERO ---------------------------------------------------- */
.hero{
  text-align: center;
  padding: clamp(46px, 12vw, 104px) 0 clamp(30px, 7vw, 56px);
}

.hero__eyebrow{
  margin: 0 0 clamp(10px, 2.4vw, 18px);
  font-family: var(--alt);
  font-size: var(--t-small);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.wordmark{
  margin: 0;
  font-family: var(--display);
  font-size: var(--t-word);
  line-height: .88;
  letter-spacing: var(--word-space);
  text-transform: uppercase;
  color: var(--ink);
  /* two lines on a phone, one on a wide screen — no media query needed:
     the flex wrap does it and the gap keeps the words from touching. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 .28em;
}

.hero__tag{
  margin: clamp(14px, 3vw, 22px) 0 0;
  font-family: var(--alt);
  font-size: clamp(.8rem, 2.6vw, 1rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.hero__btns{
  margin-top: clamp(22px, 5vw, 34px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.btn{
  display: inline-block;
  padding: .72em 1.5em;
  border: var(--edge);
  border-radius: var(--btn-radius);
  background: var(--panel-2);
  color: var(--ink);
  font-family: var(--alt);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .12s ease, background .12s ease, color .12s ease;
}
.btn:hover{ background: var(--accent); color: var(--on-accent); transform: translateY(-1px); }
.btn--solid{ background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn--solid:hover{ background: var(--accent-2); border-color: var(--accent-2); }

/* ---------- SECTIONS ------------------------------------------------ */
/* padding-BOTTOM only, and that is load-bearing. Every section carries
   BOTH classes (`class="sec wrap"`), so the shorthand `padding: 0 0 X`
   that used to be here won the cascade over `.wrap`'s `padding: 0 var(--pad)`
   — same specificity, declared later — and zeroed the side gutter. On a
   desktop nothing showed, because the 980px cap leaves margin anyway; on a
   390px phone every card and every empty slot ran flush to both edges,
   which is also what made the XEROX cards overflow the viewport. */
.sec{ padding-bottom: var(--sec-gap); }

.sec__head{
  margin: 0 0 clamp(6px, 1.6vw, 10px);
  font-family: var(--display);
  font-size: var(--t-head);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}

.sec__rule{
  height: 2px;
  background: var(--accent);
  margin: 0 0 clamp(18px, 4vw, 30px);
  border: 0;
  opacity: .9;
}

.sec__dek{
  margin: 0 0 clamp(18px, 4vw, 28px);
  color: var(--ink-soft);
  max-width: 46em;
}

/* ---------- THE BAND ------------------------------------------------ */
/* Five players, and the minimum is 260px FOR ARITHMETIC REASONS, not for
   taste. Inside the 980px wrap the row has 912px of usable width and a
   26px gap, so 260 admits three columns (3x260 + 52 = 832) and refuses
   four (4x260 + 78 = 1118). Five cards therefore break 3 + 2, which
   reads as a band; at 220px it took four and left one player stranded
   alone on the second row looking like an afterthought.

   auto-fit and not a fixed count, so the same rule walks down to 2-up on
   a tablet and 1-up on a portrait phone with no breakpoint. */
.band{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--gap);
}

.member{
  background: var(--panel);
  border: var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0 0 clamp(14px, 3vw, 20px);
  text-align: center;
  overflow: hidden;
}

/* THE PHOTO SLOT SHIPS EMPTY AND SAYS SO. The <img> is on top; when the
   file is not there yet the browser paints nothing and the dashed panel
   underneath shows through with the path to drop the file at. Same
   convention as shwing.html's TAPE PENDING frame. */
.member__pic{
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--panel-2);
  border-bottom: var(--edge);
  overflow: hidden;
}
.member__pic img{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.member__pending{
  position: absolute;
  inset: 8px;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 2px dashed var(--ink-faint);
  border-radius: var(--radius);
  color: var(--ink-faint);
  font-family: var(--alt);
  font-size: var(--t-small);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  padding: 8px;
}
/* text-transform is inherited, and the panel above is uppercase — which
   turned the path into IMG/DW/FROST.JPG, an instruction to create a file
   at a name that is not the one being asked for. A path prints as it is
   typed or it is not a path. */
.member__pending code{
  font-family: ui-monospace, "Courier New", monospace;
  font-size: .72rem;
  letter-spacing: 0;
  text-transform: none;
  opacity: .85;
  word-break: break-all;
}

.member__name{
  margin: clamp(12px, 3vw, 18px) 12px 4px;
  font-family: var(--display);
  font-size: var(--t-name);
  line-height: 1.15;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
}

.member__role{
  margin: 0 12px;
  font-family: var(--alt);
  font-size: var(--t-small);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}

.member__at{
  display: inline-block;
  margin: 10px 12px 0;
  font-family: ui-monospace, "Courier New", monospace;
  font-size: var(--t-small);
  letter-spacing: .02em;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.member__at:hover{ color: var(--accent); border-color: var(--accent); }

/* ---------- AN EMPTY SLOT ------------------------------------------- */
/* Shows, records and a booking address are all things only the band can
   fill in. Until one of them says the words, the section says plainly
   that it is empty rather than carrying a plausible-looking placeholder
   a stranger could mistake for a fact. */
.slot{
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: clamp(20px, 5vw, 34px);
  text-align: center;
  color: var(--ink-soft);
}
.slot__big{
  display: block;
  font-family: var(--display);
  font-size: clamp(1.05rem, 3.4vw, 1.4rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 8px;
}
.slot__note{
  display: block;
  font-size: var(--t-small);
  color: var(--ink-faint);
  margin-top: 10px;
}
.slot code{
  font-family: ui-monospace, "Courier New", monospace;
  font-size: .78rem;
  color: var(--accent);
}

/* ---------- A SHOW LIST, AND A TRACK LIST ---------------------------- */
/* NOTHING ON THE LIVE PAGE USES THESE YET, and that is fine. They are
   the dressing the two empty sections above will need the moment the
   band hands over a date or a recording, and they are written now
   because js/dw-demo.js fills those sections with placeholder rows so a
   skin can be judged against a full page instead of two dashed boxes.

   THEY LIVE HERE, NOT IN css/dw-demo.css, ON PURPOSE: the demo is fake
   FACTS and gets deleted whole, while this is real design and should
   survive that deletion. Adding a real gig should be writing one <li>,
   not re-deriving a layout.

   Both are colourless outside the tokens, same as everything else below
   the theme blocks, so neither can make one skin look broken. */
.shows,
.tracks{
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--edge);
}

.show{
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: clamp(12px, 3vw, 22px);
  padding: clamp(12px, 2.6vw, 18px) clamp(4px, 1.5vw, 10px);
  border-bottom: var(--edge);
}
.show__when{
  text-align: center;
  line-height: 1.05;
}
.show__when b{
  display: block;
  font-family: var(--alt);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--ink-faint);
}
.show__when span{
  display: block;
  margin-top: 3px;
  font-family: var(--display);
  font-size: clamp(.92rem, 2.8vw, 1.12rem);
  letter-spacing: .05em;
  color: var(--accent);
}
.show__what{ min-width: 0; }
.show__venue{
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1rem, 3.2vw, 1.3rem);
  letter-spacing: var(--word-space, .02em);
  color: var(--ink);
}
.show__where{
  margin: 3px 0 0;
  font-family: var(--body);
  font-size: var(--t-small);
  color: var(--ink-soft);
}
.show__tag{
  padding: .34em .7em;
  border: var(--edge);
  border-radius: var(--btn-radius);
  font-family: var(--alt);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-faint);
}
/* THE REAL ROWS LINK OUT (js/dw-shows.js): the room's name goes to its
   venue page, the tag is a DIRECTIONS link where the book has a street.
   Same shapes as the demo's dead text, so a skin judged on ?demo=1 is the
   skin the live rows wear; only the hover is new. */
.show__venue a{ color: inherit; text-decoration: none; }
.show__venue a:hover{ color: var(--accent); }
a.show__tag{ text-decoration: none; }
a.show__tag:hover{ color: var(--accent); border-color: var(--accent); }
.shows[hidden]{ display: none; }

/* ---------- THE CUTS, UNDRESSED --------------------------------------
   Four songs, a press target each, and NO IDEA OF ITS OWN — deliberately.
   A previous cut of this file made LISTEN a rack of cassette shells in
   every theme, which was SHWING's object wearing two coats of paint; the
   owner's verdict was "all you did was copy the other ideas". What a
   song list LOOKS like is a decision each theme has to make for itself
   — see THE THEME WORLDS at the foot of this file, where AMP builds a
   speaker and XEROX strikes rubber stamps. This block is only the
   fallback for a theme that has not made that decision yet, and five of
   them have not.
   -------------------------------------------------------------------- */
.cuts{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.cut__go{
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(10px, 2.4vw, 18px);
  padding: clamp(11px, 2.2vw, 15px) clamp(12px, 2.4vw, 16px);
  cursor: pointer;
  text-align: left;
  background: var(--panel);
  border: var(--edge);
  border-radius: var(--radius);
  color: var(--ink);
  font: inherit;
}
.cut__go:hover{ border-color: var(--accent); }
.cut__n{
  font-family: var(--alt);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--ink-faint);
}
.cut__name{
  min-width: 0;
  font-family: var(--body);
  font-size: var(--t-body);
}
.cut__len{
  font-family: ui-monospace, "Courier New", monospace;
  font-size: var(--t-small);
  color: var(--ink-soft);
}
.cut.is-playing .cut__name{ color: var(--accent); }

/* ---------- A WALL OF CLIPS ------------------------------------------ */
/* Same reasoning as .shows and .tracks: real design, kept out of the
   demo stylesheet so it survives the tidy. Portrait aspect because
   every clip a band has is somebody's phone held upright. */
.reels{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: var(--gap);
}
.reel{
  margin: 0;
  background: var(--panel);
  border: var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.reel__screen{ position: relative; cursor: pointer; }
.reel__v{
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: #000;
}
/* scanlines, a REC lamp and a running timecode — the furniture that
   makes a phone video read as footage. All of it sits above the picture
   and none of it takes a click away from the video. */
.reel__scan,
.reel__rec,
.reel__tc,
.reel__play{ position: absolute; pointer-events: none; }
.reel__scan{
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px);
  opacity: .35;
}
.reel__rec{
  top: 8px; left: 8px;
  display: flex; align-items: center; gap: 5px;
  font-family: var(--alt);
  font-size: .58rem;
  letter-spacing: .2em;
  color: #fff;
  text-shadow: 0 1px 3px #000;
  opacity: .45;
}
.reel__rec i{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #e33;
  box-shadow: 0 0 6px rgba(238,51,51,.9);
}
.reel.is-live .reel__rec{ opacity: 1; }
.reel.is-live .reel__rec i{ animation: dw-rec 1.1s steps(1) infinite; }
@keyframes dw-rec{ 50%{ opacity: .15; } }
.reel__tc{
  right: 8px; top: 8px;
  font-family: ui-monospace, "Courier New", monospace;
  font-size: .6rem;
  color: #fff;
  text-shadow: 0 1px 3px #000;
  opacity: .7;
}
/* the play glyph is the affordance, and it gets out of the way once the
   clip is running */
.reel__play{
  left: 50%; top: 50%;
  width: 46px; height: 46px;
  margin: -23px 0 0 -23px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(0,0,0,.5);
  border: 2px solid rgba(255,255,255,.85);
  color: #fff;
  font-size: 1rem;
  transition: opacity .2s ease;
}
.reel.is-live .reel__play{ opacity: 0; }

.reel__cap{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 8px 10px;
  font-family: var(--alt);
  font-size: var(--t-small);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.reel__no{ color: var(--accent); }
.track__name{
  min-width: 0;
  font-family: var(--body);
  font-size: var(--t-body);
  color: var(--ink);
}
.track__bar{
  display: block;
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.track__bar i{
  display: block;
  height: 100%;
  background: var(--accent);
}
.track__time{
  font-family: ui-monospace, "Courier New", monospace;
  font-size: var(--t-small);
  color: var(--ink-soft);
}
/* A landscape phone is first-class: the level meter is the one thing on
   a track row carrying no information, so it is what goes. */
@media (max-width: 520px){
  .track{ grid-template-columns: auto 1fr auto; }
  .track__bar{ display: none; }
}

/* ---------- FOOT ---------------------------------------------------- */
.foot{
  border-top: var(--edge);
  padding: clamp(22px, 5vw, 34px) 0;
  text-align: center;
  color: var(--ink-faint);
  font-size: var(--t-small);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.foot a{ color: var(--ink-soft); }

/* ======================================================================
   THE PICKER — scaffolding, not the site.
   Deleted whole when a theme is chosen (see the head of this file). It
   is styled off the tokens too, so it never looks pasted on top of the
   skin it is showing you.
   ====================================================================== */
.picker{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--panel);
  border-top: 2px solid var(--accent);
  box-shadow: 0 -10px 30px rgba(0,0,0,.35);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.picker::-webkit-scrollbar{ display: none; }

.picker__label{
  flex: 0 0 auto;
  font-family: var(--alt);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-right: 4px;
}

.picker__btn{
  flex: 0 0 auto;
  appearance: none;
  cursor: pointer;
  padding: .55em 1em;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--ink-soft);
  font-family: var(--alt);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.picker__btn:hover{ color: var(--ink); border-color: var(--accent); }
.picker__btn[aria-pressed="true"]{
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* ======================================================================
   ================== PER-THEME FLOURISHES ==============================
   The handful of rules that make each skin its own thing rather than a
   recolour. Everything here is scoped to one [data-theme] and can be
   deleted with that theme's token block.
   ====================================================================== */

/* --- NEON: the wordmark is a lit tube, and the two words light in two
       different colours the way a real double-tube sign does. --------- */
[data-theme="neon"] .wordmark{
  color: var(--accent);
  text-shadow: 0 0 6px rgba(255,46,120,.9), 0 0 22px rgba(255,46,120,.55), 0 0 54px rgba(255,46,120,.32);
}
[data-theme="neon"] .wordmark span:last-child{
  color: var(--accent-2);
  text-shadow: 0 0 6px rgba(255,176,42,.9), 0 0 22px rgba(255,176,42,.5), 0 0 54px rgba(255,176,42,.3);
}
[data-theme="neon"] .sec__rule{
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 14px rgba(255,46,120,.55);
}
[data-theme="neon"] .member{ transition: box-shadow .16s ease; }
[data-theme="neon"] .member:hover{ box-shadow: 0 0 0 1px var(--accent), 0 0 30px rgba(255,46,120,.28); }

/* --- LABEL: a bottle label is a box inside a box. Double rule around
       the hero, small caps, and no shadow anywhere on the page. ------- */
[data-theme="label"] .hero{
  border: 1px solid var(--line);
  outline: 1px solid var(--line);
  outline-offset: 5px;
  margin: clamp(26px, 6vw, 52px) 0 clamp(30px, 7vw, 56px);
  padding-left: var(--pad);
  padding-right: var(--pad);
}
[data-theme="label"] .wordmark{ font-weight: 700; }
[data-theme="label"] .sec__head{ font-weight: 700; }
[data-theme="label"] .sec__rule{
  height: 1px;
  background: var(--ink);
  position: relative;
}
[data-theme="label"] .sec__rule::after{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 4px;
  height: 1px;
  background: var(--accent);
}
[data-theme="label"] .member{ box-shadow: none; }

/* --- ICE: 1999 chrome. Beveled panels, a text shadow on the wordmark,
       and the gold second colour on hover, exactly like frost.html. --- */
[data-theme="ice"] .wordmark{
  color: var(--ink);
  text-shadow: 3px 3px 0 var(--accent), 6px 6px 0 rgba(0,0,0,.45);
}
[data-theme="ice"] .sec__head{ color: var(--accent); }
[data-theme="ice"] .btn{ border-style: outset; }
[data-theme="ice"] .btn:active{ border-style: inset; }
[data-theme="ice"] .member{ border-style: outset; }

/* --- XEROX: everything is stapled on slightly crooked, and the hero is
       a black box with knocked-out type. Rotations are tiny — enough to
       read as hand-placed, not enough to look broken. ----------------- */
/* THE 6px OF SIDE MARGIN IS STRUCTURAL, not a design choice: a full-bleed
   box rotated by half a degree grows by height x sin(angle), so this hero
   sticks 1.1px past each edge at 390px and the page scrolls sideways.
   Measured with and without: L=4.7/R=385.3 against L=-1.1/R=391.1.

   ⚠ IT IS NOT WHY THIS THEME MEASURED 3px OF OVERFLOW, and this comment
   said it was. The 3px was `.sec` zeroing `.wrap`'s side padding for all
   seven themes (see the SECTIONS block) — a whole-page bug that happened
   to show up first on the one theme that rotates things. The margin was
   added, the number did not move, and the second measurement is the only
   reason the real cause got found instead of this one getting the credit. */
[data-theme="xerox"] .hero{
  background: var(--ink);
  color: var(--panel);
  border: var(--edge);
  box-shadow: var(--shadow);
  margin: clamp(24px, 6vw, 46px) 6px clamp(34px, 8vw, 60px);
  padding-left: var(--pad);
  padding-right: var(--pad);
  transform: rotate(-.5deg);
}
[data-theme="xerox"] .wordmark,
[data-theme="xerox"] .hero__tag{ color: var(--panel); }
[data-theme="xerox"] .hero__eyebrow{ color: var(--accent); }
[data-theme="xerox"] .hero__btns .btn{ background: var(--panel); color: var(--ink); }
[data-theme="xerox"] .sec__rule{ height: 4px; background: var(--ink); }
[data-theme="xerox"] .member:nth-child(2n){ transform: rotate(.6deg); }
[data-theme="xerox"] .member:nth-child(3n){ transform: rotate(-.7deg); }
[data-theme="xerox"] .member__role{ color: var(--accent); }

/* --- VELVET: one warm lamp above the wordmark, brass rules, and the
       section heads sit in small caps rather than shouting. ---------- */
[data-theme="velvet"] .wordmark{
  color: var(--ink);
  text-shadow: 0 2px 30px rgba(255,190,110,.35);
}
[data-theme="velvet"] .sec__head{
  color: var(--accent);
  letter-spacing: .18em;
}
[data-theme="velvet"] .sec__rule{
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
}
[data-theme="velvet"] .member__name{ letter-spacing: .06em; }

/* --- OUTLAW: wood type sits on a sun-faded board. A hard bottom edge
       instead of a shadow, because a painted sign has no glow. ------- */
[data-theme="outlaw"] .wordmark{
  color: var(--accent);
  text-shadow: 2px 2px 0 rgba(60,40,20,.28);
}
[data-theme="outlaw"] .hero__eyebrow{ color: var(--accent-2); }
[data-theme="outlaw"] .sec__head{ color: var(--ink); }
[data-theme="outlaw"] .sec__rule{
  height: 5px;
  background: var(--accent-2);
  box-shadow: 0 3px 0 rgba(60,40,20,.2);
}
[data-theme="outlaw"] .btn:hover{ transform: translateY(1px); box-shadow: none; }

/* --- AMP: the sections are chrome control panels bolted to grille
       cloth, and the rule under each head is a brushed-metal strip. --- */
[data-theme="amp"] .wordmark{
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255,255,255,.14), 0 -1px 0 rgba(0,0,0,.6);
}
[data-theme="amp"] .sec__head{ color: var(--accent); }
[data-theme="amp"] .sec__rule{
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(180deg, #eef1f3, #9aa2a8 48%, #5f676c 52%, #b9c0c4);
}
[data-theme="amp"] .member{
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
}
[data-theme="amp"] .member__name{ color: var(--ink); }

/* ======================================================================
   ================== THE THEME WORLDS ==================================

   THE FIRST CUT OF THIS PAGE WAS A COSTUME RAIL AND THE OWNER CALLED IT:
   "those themes look half assed the frost and shwing sites are so
   personalized and really good." He was right, and the file said so
   itself in a line written as a virtue — "the LAYOUT never changes, only
   the costume does." Seven skins were thirty lines of tokens plus, in
   XEROX's case, EIGHT lines of character. A colour swap is not a look.

   WHAT THE TWO REFERENCE PAGES ACTUALLY DO. frost.html is not "ice
   coloured", it is a 1999 fan page: a hit counter reading 001338, BEST
   VIEWED IN NETSCAPE 4.0, a Winamp playlist with a real seek bar, chrome
   plaques with emoji bookends, Instagram reels drawn as phone screens,
   DO NOT STEAL MY HTML in the footer. shwing.html is not "retrowave", it
   is a cable-access TV station: a CRT with static, no-signal and
   scanlines, a channel dial, and a crate of cassettes with screws,
   windows and catalogue numbers. Both build the METAPHOR as objects.

   So each block below is a WORLD, not a palette — its own furniture,
   drawn in CSS, out of the same markup. TWO ARE DONE (amp, xerox); the
   other five still have only their token block and their handful of
   flourishes above, and are the work left.
   ====================================================================== */

/* ---------------------------------------------------------------------
   AMP — THE FRONT OF A GUITAR AMPLIFIER
   Tolex, grille cloth, a screwed-on badge, a brushed control panel with
   engraved legends, and the track list as a row of knobs. Every surface
   here is a gradient; there is not one image file in it.
   --------------------------------------------------------------------- */
[data-theme="amp"]{
  /* the four surfaces this world is built out of, named once */
  --amp-metal:  linear-gradient(180deg, #e8e6e1 0%, #c3bfb6 24%, #9e9a90 52%, #c3bfb6 80%, #e8e6e1 100%);
  --amp-brush:  repeating-linear-gradient(90deg, rgba(0,0,0,.055) 0 1px, transparent 1px 3px);
  --amp-cloth:  repeating-linear-gradient(0deg, rgba(0,0,0,.55) 0 1px, transparent 1px 3px),
                repeating-linear-gradient(90deg, rgba(0,0,0,.45) 0 1px, transparent 1px 3px),
                linear-gradient(180deg, #6d6047 0%, #574c39 55%, #3f3729 100%);
  --amp-screw:  radial-gradient(circle at 50% 50%, #55514a 0 2.5px, #cfcbc2 2.5px 5px, #7d7972 5px 6px, transparent 6px);
}

/* THE GRILLE. The hero is the speaker baffle: cloth, a deep inset
   shadow so it sits BEHIND the cabinet face, and piping round the edge. */
[data-theme="amp"] .hero{
  margin: clamp(14px, 3vw, 26px) 0 clamp(26px, 6vw, 44px);
  padding: clamp(34px, 8vw, 68px) clamp(14px, 4vw, 30px) clamp(30px, 7vw, 52px);
  background: var(--amp-cloth);
  border: 6px solid #17140f;
  border-radius: 10px;
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.05),
    inset 0 14px 34px rgba(0,0,0,.75),
    inset 0 -14px 34px rgba(0,0,0,.75),
    0 10px 26px rgba(0,0,0,.6);
}

/* THE BADGE. A metal plate screwed onto the cloth — the screws are four
   background layers at the corners, not four elements. */
[data-theme="amp"] .wordmark{
  display: inline-flex;
  padding: clamp(10px, 2.4vw, 18px) clamp(20px, 5vw, 42px);
  border-radius: 5px;
  background:
    var(--amp-screw) 10px 10px / 14px 14px no-repeat,
    var(--amp-screw) calc(100% - 10px) 10px / 14px 14px no-repeat,
    var(--amp-screw) 10px calc(100% - 10px) / 14px 14px no-repeat,
    var(--amp-screw) calc(100% - 10px) calc(100% - 10px) / 14px 14px no-repeat,
    var(--amp-brush), var(--amp-metal);
  color: #26221c;
  /* engraved: a dark letter with a light lip under it */
  text-shadow: 0 1px 0 rgba(255,255,255,.55), 0 -1px 0 rgba(0,0,0,.35);
  border: 1px solid #6f6b62;
  box-shadow: 0 3px 0 #4a463f, 0 10px 20px rgba(0,0,0,.55);
}
[data-theme="amp"] .hero__eyebrow{
  color: #d8cfae;
  text-shadow: 0 1px 2px #000;
}
/* THE MODEL PLATE — every amp has one and it is always in script or in
   wide engraved caps. */
[data-theme="amp"] .hero__tag{
  display: inline-block;
  margin-top: clamp(14px, 3vw, 22px);
  padding: 5px 16px;
  background: linear-gradient(180deg, #2a2620, #1b1813);
  border: 1px solid var(--accent);
  border-radius: 3px;
  color: var(--accent);
  font-family: var(--alt);
  letter-spacing: .34em;
  text-transform: uppercase;
}

/* THE CONTROL PANEL. Every section head is an engraved legend on a
   brushed strip with a screw at each end. */
[data-theme="amp"] .sec__head{
  padding: 9px clamp(38px, 7vw, 58px);
  background:
    var(--amp-screw) 12px 50% / 14px 14px no-repeat,
    var(--amp-screw) calc(100% - 12px) 50% / 14px 14px no-repeat,
    var(--amp-brush), var(--amp-metal);
  border: 1px solid #6f6b62;
  border-radius: 4px;
  color: #26221c;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  box-shadow: 0 2px 0 #4a463f, 0 8px 16px rgba(0,0,0,.45);
}
[data-theme="amp"] .sec__rule{
  height: 3px;
  background: linear-gradient(90deg, transparent, #0f0d0a 12%, #0f0d0a 88%, transparent);
  box-shadow: 0 1px 0 rgba(255,255,255,.07);
}

/* A PLAYER IS AN INPUT CHANNEL. Card = a jack panel: cloth above, a
   brushed nameplate below, and a real jack socket punched into it. */
[data-theme="amp"] .member{
  background: linear-gradient(180deg, #241f19, #1a1713);
  border: 2px solid #0f0d0a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 20px rgba(0,0,0,.5);
}
[data-theme="amp"] .member__pic{
  border-bottom: 3px solid #0f0d0a;
  box-shadow: inset 0 0 30px rgba(0,0,0,.6);
}
[data-theme="amp"] .member__name{
  position: relative;
  display: block;
  margin: 0 10px;
  padding: 8px 10px 8px 40px;
  background: var(--amp-brush), var(--amp-metal);
  border: 1px solid #6f6b62;
  border-radius: 3px;
  color: #26221c;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  text-align: left;
  font-size: clamp(.9rem, 2.8vw, 1.1rem);
}
/* the jack socket, punched through the nameplate */
[data-theme="amp"] .member__name::before{
  content: "";
  position: absolute;
  left: 10px; top: 50%;
  width: 22px; height: 22px;
  margin-top: -11px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #000 0 6px, #2b2823 6px 8px, #8e8a81 8px 10px, #5d594f 10px 11px, transparent 11px);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.9);
}
[data-theme="amp"] .member__role{
  margin-top: 8px;
  color: var(--accent);
  font-family: var(--alt);
  letter-spacing: .22em;
}

/* SHOWS IS THE SETLIST, TAPED ON. The one piece of paper on an
   amplifier, gaffer-taped to the top and written in marker before the
   first set — dates instead of songs. It was the last section still
   printing a plain list, which is the whole of the owner's note: every
   section has to invent a way to show its data. */
[data-theme="amp"] .shows{
  position: relative;
  padding: clamp(20px, 4vw, 34px) clamp(16px, 3.4vw, 28px);
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.03) 0 1px, transparent 1px 26px),
    linear-gradient(178deg, #efe9d8, #ded6c0);
  border: 0;
  border-radius: 2px;
  box-shadow: 0 12px 28px rgba(0,0,0,.62);
  transform: rotate(-.45deg);
}
[data-theme="amp"] .show{ border-bottom: 1px solid rgba(0,0,0,.16); }
[data-theme="amp"] .show:last-child{ border-bottom: 0; }
[data-theme="amp"] .show__venue{ color: #1b1913; }
[data-theme="amp"] .show__where{ color: #55503f; }
[data-theme="amp"] .show__when b{ color: #7c7053; }
[data-theme="amp"] .show__when span{ color: #9c3316; }   /* marker red */
[data-theme="amp"] .show__tag{
  border: 2px solid #1b1913;
  border-radius: 0;
  color: #1b1913;
}

/* LISTEN IS THE DRIVER ITSELF. Not a rack of anything — an amplifier has
   no cassettes in it. One twelve-inch speaker with a paper cone, a
   surround and a dust cap, and the four songs as CHANNEL BUTTONS on a
   brushed plate beside it, each with its own pilot lamp. The cone moves
   while a file plays, off the audio's events. Nothing in this block
   could be lifted into another theme, which is the test it exists to
   pass. */
[data-theme="amp"] #listen{
  display: grid;
  grid-template-columns: minmax(150px, 32%) 1fr;
  grid-template-areas: "head head" "rule rule" "cone cuts";
  column-gap: clamp(16px, 3.4vw, 30px);
  row-gap: clamp(8px, 1.6vw, 12px);
  align-items: center;
}
[data-theme="amp"] #listen .sec__head{ grid-area: head; }
[data-theme="amp"] #listen .sec__rule{ grid-area: rule; }
[data-theme="amp"] #listen .amp-driver{ grid-area: cone; }
[data-theme="amp"] #listen .cuts{ grid-area: cuts; }
@media (max-width: 620px){
  [data-theme="amp"] #listen{
    grid-template-columns: 1fr;
    grid-template-areas: "head" "rule" "cone" "cuts";
    justify-items: center;
  }
  [data-theme="amp"] #listen .amp-driver{ width: min(62%, 240px); }
}

[data-theme="amp"] .amp-driver{
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 3px solid #0f0d0a;
  background:
    /* four mounting bolts around the chassis */
    var(--amp-screw) 50% 4px / 13px 13px no-repeat,
    var(--amp-screw) 50% calc(100% - 4px) / 13px 13px no-repeat,
    var(--amp-screw) 4px 50% / 13px 13px no-repeat,
    var(--amp-screw) calc(100% - 4px) 50% / 13px 13px no-repeat,
    /* dust cap */
    radial-gradient(circle at 47% 42%, #6d6353 0 6%, #40392f 7%, #241f19 15%, transparent 15.5%),
    /* cone ribbing */
    repeating-conic-gradient(from 0deg, rgba(255,255,255,.028) 0 3deg, transparent 3deg 7deg),
    /* cone, surround, chassis rings */
    radial-gradient(circle,
      #322c24 0 30%,
      #262019 30% 58%,
      #423a2f 58% 66%,   /* the rubber surround catching light */
      #191612 66% 74%,
      #4b4438 74% 82%,   /* chassis rim */
      #201c16 82% 100%);
  box-shadow: inset 0 0 46px rgba(0,0,0,.9), 0 10px 26px rgba(0,0,0,.6);
}
/* THE CONE MOVES ONLY WHILE AUDIO RUNS — js/dw-demo.js puts is-playing
   on the SECTION, because in this theme the moving part is the driver
   and not the row that was pressed. */
[data-theme="amp"] #listen.is-playing .amp-driver{
  animation: dw-cone .34s ease-in-out infinite;
}
@keyframes dw-cone{ 50%{ transform: scale(1.028); } }

/* the songs, as channel buttons on the control panel */
[data-theme="amp"] .cuts{ gap: 10px; }
[data-theme="amp"] .cut__go{
  background: var(--amp-brush), var(--amp-metal);
  border: 1px solid #6f6b62;
  border-radius: 3px;
  color: #26221c;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  box-shadow: 0 2px 0 #4a463f, 0 6px 14px rgba(0,0,0,.4);
}
[data-theme="amp"] .cut__go:active{ transform: translateY(2px); box-shadow: 0 0 0 #4a463f; }
[data-theme="amp"] .cut__name{ font-family: var(--display); letter-spacing: .04em; }
[data-theme="amp"] .cut__len{ color: #5d574c; }
/* the number becomes a pilot lamp, dark until its channel is live */
[data-theme="amp"] .cut__n{
  width: 13px; height: 13px;
  border-radius: 50%;
  overflow: hidden;
  text-indent: -99px;
  background: radial-gradient(circle at 40% 34%, #6b6252, #2a251e);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.85), 0 0 0 2px #8e8a81;
}
[data-theme="amp"] .cut.is-playing .cut__n{
  background: radial-gradient(circle at 40% 34%, #ffdca6, #e8622c 58%, #7d1f0c);
  box-shadow: 0 0 10px 3px rgba(232,98,44,.6), 0 0 0 2px #8e8a81;
}
[data-theme="amp"] .cut.is-playing .cut__go{ border-color: var(--accent); }

/* THE CLIPS ARE RACK MONITORS — bolted into a flight case, with the
   same corner hardware as the cabinet. */
[data-theme="amp"] .reel{
  background: linear-gradient(180deg, #241f19, #17140f);
  border: 2px solid #0f0d0a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 20px rgba(0,0,0,.5);
}
[data-theme="amp"] .reel__screen{
  margin: 8px 8px 0;
  border: 2px solid #000;
  box-shadow: inset 0 0 24px rgba(0,0,0,.9);
}
[data-theme="amp"] .reel__cap{
  margin: 8px;
  padding: 6px 9px;
  background: var(--amp-brush), var(--amp-metal);
  border: 1px solid #6f6b62;
  border-radius: 2px;
  color: #26221c;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
[data-theme="amp"] .reel__no{ color: #7a5a12; }

/* THE SETLIST IS TAPED ON. Paper, marker, and two strips of tape — the
   one thing on an amplifier that is not made of metal or cloth. */
[data-theme="amp"] .show{
  border-bottom: 1px dashed rgba(255,255,255,.16);
}
[data-theme="amp"] .show__when span{ color: var(--accent); }
[data-theme="amp"] .show__tag{
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------------------------------------------------------------------
   XEROX — A PHOTOCOPIED FLYER, STAPLED TO A POLE
   The sheet is white, the toner is uneven, the copy is crooked, and the
   whole page sits on a wall rather than on a background colour.
   --------------------------------------------------------------------- */
[data-theme="xerox"]{
  --xr-halftone: radial-gradient(circle, rgba(0,0,0,.5) .6px, transparent .9px) 0 0 / 3px 3px;
  --xr-toner:    linear-gradient(90deg, rgba(0,0,0,.16) 0 6px, transparent 6px 26px, rgba(0,0,0,.05) 26px 40px, transparent 40px);
}

/* THE WALL the flyer is stuck to — cool grey, not the sheet's white. */
[data-theme="xerox"] body{
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.035) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #8f8d86, #7c7a73);
  /* A ROTATED SHEET IS WIDER THAN ITS OWN BOX. Every sheet here is
     turned up to .55deg and throws a 7px hard shadow to the right, so at
     390px the page scrolled 2px sideways — measured, not guessed. The
     fix is ROOM, not clipping: `overflow-x: clip` on the body does
     nothing here, because for html and body overflow PROPAGATES TO THE
     VIEWPORT — the body's value is handed to the viewport and the body
     itself computes back to visible, so the measurement never moved. */
  padding-left: 10px;
  padding-right: 10px;
}

/* THE SHEET. Everything in the reading column sits on paper, and the
   paper is very slightly off-square because a copier never is. */
[data-theme="xerox"] .hero,
[data-theme="xerox"] .sec{
  position: relative;
  background:
    var(--xr-halftone),
    var(--xr-toner),
    linear-gradient(178deg, #f7f5ef, #ebe8df);
  border: 3px solid #141414;
  box-shadow: 7px 7px 0 rgba(0,0,0,.55);
  padding-left: clamp(14px, 4vw, 30px);
  padding-right: clamp(14px, 4vw, 30px);
  padding-top: clamp(20px, 4vw, 30px);
  margin-bottom: clamp(26px, 6vw, 44px);
}
/* THE HERO IS A SHEET, SO IT IS THE WIDTH OF A SHEET. .sec carries
   .wrap and is therefore capped at the reading column, but .hero holds
   .wrap INSIDE it and ran the full width of the window — which put the
   staples out at the screen edges holding up nothing, and made the top
   of the page a different object from the rest of it. */
[data-theme="xerox"] .hero{
  max-width: var(--wrap);
  margin-left: auto;
  margin-right: auto;
  transform: rotate(-.55deg);
}
[data-theme="xerox"] .sec:nth-of-type(2n){ transform: rotate(.4deg); }
[data-theme="xerox"] .sec:nth-of-type(3n){ transform: rotate(-.35deg); }

/* THE WORDMARK IS A SECOND-GENERATION COPY — the ghost offset is what
   makes it read as photocopied rather than merely black. */
[data-theme="xerox"] .wordmark{
  color: #101010;
  text-shadow: 2px 2px 0 rgba(0,0,0,.28), -1px -1px 0 rgba(0,0,0,.14);
}
[data-theme="xerox"] .hero__tag{
  display: inline-block;
  padding: 3px 14px;
  background: #101010;
  color: #f7f5ef;
  letter-spacing: .3em;
}
[data-theme="xerox"] .hero__eyebrow{ color: var(--accent); letter-spacing: .42em; }

/* Section heads are marker on paper: struck through with a hand-drawn
   looking bar rather than a rule. */
[data-theme="xerox"] .sec__head{
  display: inline-block;
  padding: 2px 12px 2px 0;
  color: #101010;
}
[data-theme="xerox"] .sec__rule{
  height: 5px;
  background: #141414;
  transform: rotate(-.3deg);
}

/* THE BAND ARE FIVE PHOTOCOPIES, each stuck down at its own angle. */
[data-theme="xerox"] .member{
  background: #f7f5ef;
  border: 3px solid #141414;
  box-shadow: 5px 5px 0 rgba(0,0,0,.5);
}
[data-theme="xerox"] .member:nth-child(1){ transform: rotate(-1.1deg); }
[data-theme="xerox"] .member:nth-child(2){ transform: rotate(.8deg); }
[data-theme="xerox"] .member:nth-child(3){ transform: rotate(-.5deg); }
[data-theme="xerox"] .member:nth-child(4){ transform: rotate(1deg); }
[data-theme="xerox"] .member:nth-child(5){ transform: rotate(-.8deg); }
/* the portrait is blown-out and dotted, the way a photo comes off a
   copier: contrast crushed, then screened. */
[data-theme="xerox"] .member__pic{
  filter: contrast(2.2) grayscale(1);
  border-bottom: 3px solid #141414;
}
[data-theme="xerox"] .member__pic::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--xr-halftone);
  mix-blend-mode: multiply;
  opacity: .55;
  pointer-events: none;
}
[data-theme="xerox"] .member__name{ color: #101010; }

/* SHOWS ARE A TYPED LIST ON THE FLYER. Dashed rules, no colour but the
   one red the copier could not have made and the poster owner added. */
/* SHOWS IS A HANDFUL OF TICKET STUBS. Not a list with a border — five
   torn tickets laid on the sheet, each with a perforation down the side
   and its own angle, because the section had no idea of its own and a
   flyer's gigs are the tickets you kept. */
[data-theme="xerox"] .shows{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--gap);
  border-top: 0;
}
[data-theme="xerox"] .show{
  position: relative;
  /* ⚠ THE DATE IS ABSOLUTE, SO IT LEAVES THE GRID — and the base rule's
     three columns (64px 1fr auto) then belong to the two remaining
     children: the venue got the 64px date column and wrapped one word
     per line, and the FREE / SOLD OUT tag stretched across the 1fr.
     Taking an element out of flow re-numbers the columns behind it. */
  grid-template-columns: 1fr auto;
  padding: 14px 14px 14px 78px;
  background: #fff;
  border: 2px solid #141414;
  box-shadow: 4px 4px 0 rgba(0,0,0,.45);
}
/* the perforation the stub tears along */
[data-theme="xerox"] .show::before{
  content: "";
  position: absolute;
  left: 62px; top: 7px; bottom: 7px;
  width: 2px;
  background: repeating-linear-gradient(180deg, #141414 0 4px, transparent 4px 9px);
}
[data-theme="xerox"] .show__when{
  position: absolute;
  left: 0; top: 50%;
  width: 62px;
  transform: translateY(-50%);
}
[data-theme="xerox"] .show:nth-child(2n){ transform: rotate(.6deg); }
[data-theme="xerox"] .show:nth-child(3n){ transform: rotate(-.7deg); }

/* LISTEN IS FOUR RUBBER STAMPS struck onto the sheet in red ink. The
   one thing a photocopier cannot make is the red — so on this page it is
   always something a person did BY HAND afterwards, and a stamp is the
   most hand thing there is. Struck crooked, ink uneven, and the one
   that is playing gets a second impression across it. An amplifier has
   nowhere to put a rubber stamp; that is the test. */
[data-theme="xerox"] .cuts{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(16px, 3.6vw, 34px);
  padding: clamp(8px, 2vw, 18px) 0;
}
[data-theme="xerox"] .cut__go{
  display: block;
  width: auto;
  padding: 12px 20px 10px;
  text-align: center;
  background: transparent;
  border: 3px double var(--accent);
  border-radius: 2px;
  color: var(--accent);
  /* real stamps are never solid: the ink breaks up and the impression
     sits ON the paper rather than in it */
  opacity: .86;
  mix-blend-mode: multiply;
  box-shadow: none;
}
[data-theme="xerox"] .cut__go:hover{ opacity: 1; border-color: var(--accent); }
[data-theme="xerox"] .cut__n{
  display: block;
  font-size: .58rem;
  letter-spacing: .34em;
  color: var(--accent);
}
[data-theme="xerox"] .cut__name{
  display: block;
  margin: 2px 0 1px;
  font-family: var(--display);
  font-size: clamp(1.05rem, 3.4vw, 1.5rem);
  text-transform: uppercase;
  letter-spacing: .03em;
}
[data-theme="xerox"] .cut__len{
  display: block;
  font-size: .6rem;
  letter-spacing: .2em;
  color: var(--accent);
}
/* struck by hand, so no two land square */
[data-theme="xerox"] .cut:nth-child(1) .cut__go{ transform: rotate(-3.2deg); }
[data-theme="xerox"] .cut:nth-child(2) .cut__go{ transform: rotate(2.1deg); }
[data-theme="xerox"] .cut:nth-child(3) .cut__go{ transform: rotate(-1.4deg); }
[data-theme="xerox"] .cut:nth-child(4) .cut__go{ transform: rotate(3.6deg); }
/* the second impression, across the one that is running */
[data-theme="xerox"] .cut.is-playing .cut__go{ opacity: 1; }
[data-theme="xerox"] .cut.is-playing .cut__go::after{
  content: "PLAYING";
  position: absolute;
  left: 50%; top: 50%;
  padding: 3px 10px;
  transform: translate(-50%, -50%) rotate(-13deg);
  border: 3px solid var(--accent);
  color: var(--accent);
  font-family: var(--alt);
  font-size: .68rem;
  letter-spacing: .24em;
  background: rgba(247,245,239,.72);
}

/* THE CLIPS ARE FRAMES ON A STRIP OF FILM — sprocket holes down both
   edges, and no colour, because the sheet has none. */
[data-theme="xerox"] .reel{
  background: #141414;
  border: 3px solid #141414;
  border-radius: 0;
  padding: 0 9px;
}
[data-theme="xerox"] .reel__screen{
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  background:
    repeating-linear-gradient(90deg, #f7f5ef 0 7px, #141414 7px 15px) 0 0 / auto 5px repeat-x,
    repeating-linear-gradient(90deg, #f7f5ef 0 7px, #141414 7px 15px) 0 100% / auto 5px repeat-x;
  background-clip: border-box;
}
[data-theme="xerox"] .reel__cap{
  background: #141414;
  color: #f7f5ef;
  border-radius: 0;
}
[data-theme="xerox"] .reel__no{ color: #f7f5ef; }
[data-theme="xerox"] .show,
[data-theme="xerox"] .track{ border-bottom: 1px dashed #141414; }
[data-theme="xerox"] .show__when span{ color: var(--accent); }
[data-theme="xerox"] .show__venue{ color: #101010; }
[data-theme="xerox"] .show__tag{
  border: 2px solid #141414;
  border-radius: 0;
  color: #101010;
}
[data-theme="xerox"] .track__bar{ background: rgba(0,0,0,.18); }
[data-theme="xerox"] .track__bar i{ background: #141414; }

/* A COPIER HAS NO COLOUR, AND THAT INCLUDES THE VIDEO. The clip posters
   came through in full colour on a black-and-white flyer and were the
   one thing on the sheet that could not have come out of the machine —
   the same crush the portraits get, or the metaphor breaks. */
[data-theme="xerox"] .reel{ box-shadow: 5px 5px 0 rgba(0,0,0,.5); }
[data-theme="xerox"] .reel__v{ filter: contrast(1.9) grayscale(1); }
[data-theme="xerox"] .reel:nth-child(1){ transform: rotate(-.8deg); }
[data-theme="xerox"] .reel:nth-child(3){ transform: rotate(.7deg); }

/* ---------------------------------------------------------------------
   THE HARDWARE — the pieces js/dw-scenery.js adds, because they have no
   element in the page to borrow. Everything else in both worlds above is
   drawn onto markup that was already there.
   --------------------------------------------------------------------- */
[data-theme="amp"] .hero,
[data-theme="xerox"] .hero{ position: relative; }

/* AMP: four corner protectors, a strap handle, a pilot lamp. */
[data-theme="amp"] .amp-corner{
  position: absolute;
  width: 34px; height: 34px;
  background: var(--amp-brush), var(--amp-metal);
  border: 1px solid #6f6b62;
  box-shadow: 0 2px 5px rgba(0,0,0,.65);
}
[data-theme="amp"] .amp-corner--tl{ top: -3px; left: -3px;
  clip-path: polygon(0 0, 100% 0, 100% 13px, 13px 13px, 13px 100%, 0 100%); }
[data-theme="amp"] .amp-corner--tr{ top: -3px; right: -3px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - 13px) 100%, calc(100% - 13px) 13px, 0 13px); }
[data-theme="amp"] .amp-corner--bl{ bottom: -3px; left: -3px;
  clip-path: polygon(0 0, 13px 0, 13px calc(100% - 13px), 100% calc(100% - 13px), 100% 100%, 0 100%); }
[data-theme="amp"] .amp-corner--br{ bottom: -3px; right: -3px;
  clip-path: polygon(calc(100% - 13px) 0, 100% 0, 100% 100%, 0 100%, 0 calc(100% - 13px), calc(100% - 13px) calc(100% - 13px)); }

[data-theme="amp"] .amp-handle{
  position: absolute;
  top: -15px; left: 50%;
  width: clamp(120px, 26vw, 190px); height: 19px;
  margin-left: calc(clamp(120px, 26vw, 190px) / -2);
  border-radius: 10px 10px 3px 3px;
  background: linear-gradient(180deg, #423a2d 0%, #2a241c 55%, #191510 100%);
  border: 1px solid #0d0b08;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 3px 7px rgba(0,0,0,.6);
}
/* gaffer tape across the top corners of the setlist */
[data-theme="amp"] .amp-gaff{
  position: absolute;
  top: -11px;
  width: clamp(64px, 12vw, 96px);
  height: 24px;
  background: linear-gradient(180deg, #35302a, #23201b);
  box-shadow: 0 2px 5px rgba(0,0,0,.55);
  opacity: .93;
}
[data-theme="amp"] .amp-gaff--l{ left: 8%;  transform: rotate(-4deg); }
[data-theme="amp"] .amp-gaff--r{ right: 8%; transform: rotate(3deg); }

[data-theme="amp"] .amp-lamp{
  position: absolute;
  right: clamp(16px, 4vw, 30px);
  bottom: clamp(14px, 3vw, 24px);
  width: 19px; height: 19px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #ffdca6 0 3px, #e8622c 45%, #7d1f0c 100%);
  box-shadow:
    0 0 0 3px #b9b3a3, 0 0 0 4px #5f5a4e,
    0 0 14px 4px rgba(232,98,44,.5),
    inset 0 1px 2px rgba(255,255,255,.5);
  animation: dw-lamp 3.8s ease-in-out infinite;
}
@keyframes dw-lamp{
  0%, 100%{ box-shadow: 0 0 0 3px #b9b3a3, 0 0 0 4px #5f5a4e, 0 0 12px 3px rgba(232,98,44,.42), inset 0 1px 2px rgba(255,255,255,.5); }
  50%     { box-shadow: 0 0 0 3px #b9b3a3, 0 0 0 4px #5f5a4e, 0 0 20px 6px rgba(232,98,44,.68), inset 0 1px 2px rgba(255,255,255,.6); }
}

/* XEROX: two staples, a strip of tape, a coffee ring, and the fringe. */
[data-theme="xerox"] .xr-staple{
  position: absolute;
  top: 9px;
  width: 24px; height: 7px;
  background: linear-gradient(180deg, #e2e0da 0%, #9a9891 55%, #6d6b66 100%);
  border: 1px solid #383836;
  box-shadow: 0 1px 3px rgba(0,0,0,.55);
}
[data-theme="xerox"] .xr-staple--l{ left: 26px; transform: rotate(-9deg); }
[data-theme="xerox"] .xr-staple--r{ right: 26px; transform: rotate(7deg); }
[data-theme="xerox"] .xr-tape{
  position: absolute;
  top: -13px; left: 50%;
  width: 128px; height: 36px;
  margin-left: -64px;
  transform: rotate(-2.4deg);
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(226,224,212,.34));
  border-left: 1px dashed rgba(0,0,0,.2);
  border-right: 1px dashed rgba(0,0,0,.2);
  box-shadow: 0 1px 4px rgba(0,0,0,.28);
}
[data-theme="xerox"] .xr-ring{
  position: absolute;
  right: 7%; bottom: 11%;
  width: clamp(84px, 16vw, 128px);
  height: clamp(84px, 16vw, 128px);
  border-radius: 50%;
  border: 7px solid rgba(94,62,30,.17);
  box-shadow: inset 0 0 0 2px rgba(94,62,30,.07);
  transform: rotate(14deg);
}
/* the tear-off fringe: what every flyer on every pole in Austin has */
[data-theme="xerox"] .xr-tabs{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: clamp(18px, 4vw, 30px);
}
[data-theme="xerox"] .xr-tab{
  writing-mode: vertical-rl;
  padding: 20px 7px;
  background: #f7f5ef;
  border: 1px solid #141414;
  border-top: 1px dashed #6a6a68;
  color: #101010;
  font-family: var(--alt);
  font-size: .78rem;
  letter-spacing: .04em;
  white-space: nowrap;
}
/* two of them already pulled part-way off */
[data-theme="xerox"] .xr-tab:nth-child(3){ transform: rotate(4deg) translateY(3px); }
[data-theme="xerox"] .xr-tab:nth-child(7){ transform: rotate(-5deg) translateY(4px); }

/* ======================================================================
   MOTION — off for anyone who asked their system for less of it.
   ====================================================================== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-theme="xerox"] .hero,
  [data-theme="xerox"] .member{ transform: none; }
}

/* ======================================================================
   PRINT — a flyer wants to be printable. Drop the picker and the dark.
   ====================================================================== */
@media print{
  .picker{ display: none; }
  body{ background: #fff; color: #000; padding-bottom: 0; }
}
