/* Lyricden — a pale gig-poster setlist. Paper ground, one red stamp, stencil for words, Plex for every figure
   (poster faces set the digit 1 as a bare stroke). */
:root{
  --paper:#F1ECE2; --paper2:#E7E0D2; --ink:#1D1A17; --ink2:#5A534A; --rule:#CFC6B5;
  --stamp:#D6452B; --stamp2:#F4D9D2; --good:#2E6B47;
  --word:'Big Shoulders Stencil Display', 'Arial Narrow', sans-serif;
  --body:'IBM Plex Sans', system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --dockh:64px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--paper);color:var(--ink)}
body{font:15px/1.5 var(--body);padding-bottom:calc(var(--dockh) + 18px + env(safe-area-inset-bottom));
  background-image:radial-gradient(rgba(29,26,23,.035) 1px,transparent 1px);background-size:5px 5px}
a{color:inherit}
.tk{font-style:normal}
button{font:inherit;cursor:pointer}

.gig{max-width:1180px;margin:0 auto;padding:14px 16px 0;display:grid;gap:22px}

/* ---- the setlist ---- */
.bill{border:2px solid var(--ink);background:var(--paper);padding:14px 14px 16px;position:relative}
.billtop{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:2px solid var(--ink);padding-bottom:10px}
.marque{display:flex;align-items:center;gap:8px;text-decoration:none}
.marque img{border-radius:6px;display:block}
.marque-word{font:800 26px/1 var(--word);letter-spacing:.04em;text-transform:uppercase}
.billclock{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;justify-content:flex-end;text-align:right}
.setno{font:600 13px/1 var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--ink2)}
.bellnum{font:600 26px/1 var(--body);font-variant-numeric:tabular-nums}
.belltag{font-size:12px;color:var(--ink2)}
.stampline{font:800 40px/.95 var(--word);text-transform:uppercase;letter-spacing:.02em;margin:14px 0 12px}
.stampline em{font-style:normal;color:var(--stamp)}

.mix{margin:0 0 12px}
.mixbar{display:block;width:100%;height:22px;border:1.5px solid var(--ink)}
.mixcap{font-size:12px;color:var(--ink2);margin-top:4px;font-variant-numeric:tabular-nums}
.slots{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.slot{position:relative;border:1.5px solid var(--ink);background:var(--paper);min-height:108px;padding:9px 10px 8px;
  display:flex;flex-direction:column;gap:4px;overflow:hidden;cursor:pointer;text-align:left;user-select:none;
  transition:transform .12s ease, box-shadow .12s ease}
.slot:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.slot[aria-pressed="true"]{box-shadow:4px 4px 0 var(--stamp);border-color:var(--stamp)}
.slotfill{position:absolute;left:0;right:0;bottom:0;background:var(--paper2);z-index:0;transition:height .6s ease}
.slot[data-top="1"] .slotfill{background:var(--stamp2)}
.slot>*:not(.slotfill){position:relative;z-index:1}
.slothead{display:flex;align-items:baseline;gap:8px}
.slotno{font:600 13px/1 var(--body);font-variant-numeric:tabular-nums;color:var(--ink2)}
.slotname{font:800 19px/1 var(--word);text-transform:uppercase;letter-spacing:.02em}
.slotnums{margin-top:auto;display:flex;flex-wrap:wrap;justify-content:space-between;column-gap:6px;row-gap:1px;font-size:12.5px;font-variant-numeric:tabular-nums}
.slotnums>span{white-space:nowrap}
.slotshare{font-weight:600}
.slotprice{color:var(--ink2)}
.slotstamp{position:absolute;top:8px;right:-30px;transform:rotate(18deg);background:var(--stamp);color:var(--paper);
  font:800 13px/1 var(--word);letter-spacing:.12em;text-transform:uppercase;padding:4px 34px;z-index:2}
.slotmine{position:absolute;top:6px;right:8px;font:600 11px/1 var(--body);background:var(--ink);color:var(--paper);padding:3px 6px;z-index:2}

.askrow{margin-top:14px;border-top:2px dashed var(--ink);padding-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end}
.askk{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink2);margin-bottom:4px}
.askslot{font:800 22px/1.1 var(--word);text-transform:uppercase}
.askamt input{width:100%;font:600 18px/1 var(--body);font-variant-numeric:tabular-nums;padding:10px 10px;border:1.5px solid var(--ink);
  background:#FBF8F2;color:var(--ink);border-radius:0}
.askamt input:focus{outline:2px solid var(--stamp);outline-offset:1px}
.askquote{grid-column:1/-1;font-size:13.5px;font-variant-numeric:tabular-nums;color:var(--ink2)}
.askgo{grid-column:1/-1;background:var(--ink);color:var(--paper);border:0;padding:14px 16px;font:800 22px/1 var(--word);
  text-transform:uppercase;letter-spacing:.06em}
.askgo:hover{background:var(--stamp)}
.askgo:disabled{opacity:.55;cursor:not-allowed}
.askwhy{min-height:1.4em;margin:8px 0 0;font-size:13px;color:var(--ink2)}

/* ---- the wings ---- */
.wings{display:grid;gap:14px;align-content:start}
.jar{border:2px solid var(--ink);padding:14px;background:var(--ink);color:var(--paper)}
.jark{font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;opacity:.75}
.jarnum{display:block;font:600 42px/1.05 var(--body);font-variant-numeric:tabular-nums;margin:4px 0 2px}
.jarsub{font-size:13px;opacity:.8}
.jarlead{margin-top:10px;padding-top:10px;border-top:1px solid rgba(241,236,226,.25);font-size:14px}
.jarlead b{color:#F2A08F}
.primer,.runsheet,.pastsets{border:1.5px solid var(--ink);padding:12px 14px;background:var(--paper)}
.wingh{font:800 20px/1 var(--word);text-transform:uppercase;letter-spacing:.03em;margin:0 0 8px}
.primerlist{margin:0;padding-left:20px;font-size:14px}
.primerlist li{margin:4px 0}
.morehow{display:inline-block;margin-top:8px;font-size:13px}
.tapelist,.pastlist{list-style:none;margin:0;padding:0;font-size:13.5px;font-variant-numeric:tabular-nums}
.tapelist li,.pastlist li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dotted var(--rule)}
.tapelist li:last-child,.pastlist li:last-child{border-bottom:0}
.tapequiet{color:var(--ink2);justify-content:flex-start!important}
.tapewho{font-family:var(--mono);font-size:12.5px}

/* ---- other views ---- */
.leaf{border:2px solid var(--ink);padding:16px;background:var(--paper)}
.leaf h1{font:800 34px/1 var(--word);text-transform:uppercase;margin:0 0 12px}
.leaf h2{font:800 22px/1 var(--word);text-transform:uppercase;margin:18px 0 6px}
.leaf p{max-width:62ch}
.leaftable{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.leaftable th,.leaftable td{text-align:left;padding:7px 6px;border-bottom:1px solid var(--rule);vertical-align:top}
.leaftable th{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink2)}
.pocketbtn{background:var(--stamp);color:var(--paper);border:0;padding:6px 10px;font-weight:600}
.tablewrap{overflow-x:auto}

/* ---- credits ---- */
.credits{border-top:2px solid var(--ink);padding:14px 0 10px;display:grid;gap:10px;font-size:13px}
.creditk{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink2)}
.creditv{font-family:var(--mono);font-size:12.5px;word-break:break-all}
.creditlinks{display:flex;flex-wrap:wrap;gap:14px}
.nolink{display:none}
.creditnote{margin:0;color:var(--ink2)}

/* ---- the dock ---- */
.dock{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:40;min-height:var(--dockh);
  display:flex;align-items:center;gap:8px;padding:8px 8px 8px 12px;background:var(--ink);color:var(--paper);
  border:2px solid var(--ink);box-shadow:0 6px 0 var(--stamp)}
.dockca{flex:1;min-width:0;display:flex;flex-direction:column}
.dockk{font:600 10.5px/1 var(--body);letter-spacing:.12em;opacity:.7}
.dockaddr{font:500 11.5px/1.3 var(--mono);word-break:break-all;user-select:all}
.dockcopy{background:var(--stamp);color:var(--paper);border:0;padding:10px 12px;font:800 16px/1 var(--word);letter-spacing:.06em;text-transform:uppercase}
.dockcopy[data-done="1"]{background:var(--good)}
.dockgm{font-size:12px;opacity:.8;text-decoration:underline}
.dockplug{background:transparent;color:var(--paper);border:1.5px solid rgba(241,236,226,.6);padding:9px 10px;font-weight:600;font-size:13px}
.dockplug[data-on="1"]{border-color:var(--stamp)}

/* ---- card ---- */
.veil{position:fixed;inset:0;background:rgba(29,26,23,.45);z-index:60;display:flex;align-items:flex-end;justify-content:center}
.card{background:var(--paper);border:2px solid var(--ink);width:min(520px,100%);max-height:80vh;overflow:auto;padding:14px}
.cardtop{display:flex;justify-content:space-between;align-items:center;font:800 20px/1 var(--word);text-transform:uppercase;margin-bottom:10px}
.cardtop button{background:none;border:0;font-size:26px;line-height:1}
.wellpick{display:grid;gap:8px}
.wellpick button{display:flex;align-items:center;gap:10px;padding:10px;border:1.5px solid var(--ink);background:#FBF8F2;text-align:left}
.wellpick img{width:24px;height:24px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--dockh) + 34px);background:var(--ink);color:var(--paper);
  padding:10px 14px;z-index:70;font-size:14px;max-width:90vw}

/* ---- phone: the dock gives up the GMGN link and the connect label, never the address or the copy ---- */
@media (max-width:420px){
  .dockgm{display:none}
  .dockplug{padding:9px 8px;font-size:12px}
  .stampline{font-size:34px}
  .slot{min-height:100px}
}

/* ---- tablet: a wider single column, three across ---- */
@media (min-width:640px){
  .slots{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stampline{font-size:52px}
  .slot{min-height:122px}
  .slotname{font-size:21px}
  .askrow{grid-template-columns:1.1fr 1fr 1.2fr;align-items:end}
  .askquote{grid-column:auto;padding-bottom:12px}
  .askgo{grid-column:1/-1}
  .wings{grid-template-columns:1fr 1fr}
  .jar{grid-column:1/-1}
  .dock{left:50%;right:auto;transform:translateX(-50%);width:min(760px,calc(100% - 20px))}
  .dockaddr{font-size:13px}
  .credits{grid-template-columns:1fr 1fr}
  .creditlinks,.creditnote{grid-column:1/-1}
}

/* ---- desktop: the page recomposes — the setlist and its form on the left, the room beside it ---- */
@media (min-width:1000px){
  .gig{grid-template-columns:minmax(0,1.75fr) minmax(300px,1fr);grid-template-areas:"bill wings" "leaf leaf" "credits credits";
    padding-top:26px;gap:26px}
  .bill{grid-area:bill;padding:20px 20px 22px}
  .wings{grid-area:wings;grid-template-columns:1fr}
  .leaf{grid-area:leaf}
  .credits{grid-area:credits;grid-template-columns:1fr 1fr 1fr;align-items:start}
  .creditlinks,.creditnote{grid-column:auto}
  .slots{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
  .slot{min-height:150px;padding:12px}
  .slotname{font-size:24px}
  .stampline{font-size:68px;margin:18px 0 16px}
  .marque-word{font-size:32px}
  .bellnum{font-size:34px}
  .jarnum{font-size:54px}
  .askrow{grid-template-columns:1fr 1.2fr 1fr auto}
  .askgo{grid-column:auto}
  .dock{width:min(980px,calc(100% - 40px))}
  .dockaddr{font-size:14px}
  /* another view on desktop takes the setlist's place and keeps the wings */
  html:not([data-view="setlist"]) .gig{grid-template-areas:"leaf wings" "credits credits"}
}