/* =======================================================================
   archive.css — THE ARCHIVE BOOK, IN ONE PLACE

   The look of the book every bar keeps of its own past shows. The engine is
   js/show-archive.js; it builds the markup and sets five variables, and
   everything below dresses them. Same split as css/hud.css: the LOOK lives
   here, and the only thing a venue supplies is its colour.

   --arc-accent is the whole per-venue API. King Bee's book is bound in its
   own gold, the Dizzy Rooster's in its red, and not one rule below knows
   which bar it is drawing.

   ================= WHY IT IS A DOM OVERLAY =================
   Every other overlay in this network is a canvas (pool-game.js, the arcade
   cabinets) because every other overlay is a GAME. This one is a month
   calendar, a column of photographs and a video player - three things the
   browser already draws better than a canvas ever will, with real text
   selection, real scrolling and a real <video>. So it is DOM over the
   canvas, sitting on the same grammar: a WASH rather than a fill, so the
   bar stays dimly visible behind its own book.

   ================= THE ONE HARD BIT: THE COVER =================
   A book opens by swinging its front board LEFT off the right-hand half,
   which means the closed book is only half as wide as the open one. Animating
   `width` for that is a layout thrash sixty times a second; so the book is
   ALWAYS the full spread and is TRANSLATED instead - closed, it sits shifted
   a quarter-spread right so the cover lands dead centre; open, it slides back
   to centre while the board swings off it. Both are transforms, so the whole
   thing is composited and never touches layout.

   The board is two faces on one element (front = the cover, back = the
   endpaper you see once it has swung over), so it reads as a board with a
   thickness rather than a rectangle that fades.
   ======================================================================= */

.arc{
  --arc-accent:#f2c11c;      /* the venue's own colour */
  --arc-cover:#3a2c08;       /* what the board is bound in */
  --arc-paper:#efe2bd;       /* the page */
  --arc-ink:#2a1f12;         /* what is written on it */
  --arc-dim:rgba(42,31,18,.62);

  position:fixed; inset:0; z-index:60;
  display:grid; place-items:center;
  padding:max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right))
          max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  /* A WASH, NOT A FILL. The room behind stays visible through it, which is
     the entire reason this is an overlay and not a page. */
  background:radial-gradient(ellipse at 50% 45%,
              rgba(6,4,10,.55) 0%, rgba(4,3,7,.86) 78%);
  font-family:"Courier New", Courier, monospace;
  color:var(--arc-ink);
  opacity:0; transition:opacity .28s ease;
  -webkit-tap-highlight-color:transparent;
}
.arc--in{ opacity:1; }

/* ===================== NOT THE HOST PAGE'S TYPE =====================
   THE BUG THIS EXISTS FOR: this one component is dropped into five pages with
   five different stylesheets, and a host's own `p { text-align:center; color:
   #7ad9ff }` beats anything the book merely INHERITS - it is set on the <p>
   itself, and inheritance always loses to a real declaration. So the Dizzy
   Rooster's ledger printed its bill in lounge ice-blue, centred, on cream
   paper.

   The book therefore states its own body copy outright instead of trusting
   what it lands in. Wrapped in :where() so the whole reset carries the
   specificity of `.arc` alone and every component rule below - all of them one
   class - still wins on document order. Without :where(), `.arc figcaption`
   would quietly outrank `.arc__cap`. */
.arc :where(p, ul, ol, li, figure, figcaption, b, code, span, div, button, a){
  margin:0; padding:0;
  font-family:inherit; font-size:inherit; font-weight:inherit;
  font-style:normal; color:inherit; letter-spacing:normal; line-height:inherit;
  text-shadow:none; text-transform:none; background:none; border:0;
  /* INHERIT, not left. A `p { text-align:center }` on the host is set on the
     paragraph itself, so the page telling its own body copy to align left is
     not enough - the paragraph has to be told to take the page's word for it.
     Everything the book deliberately centres (the cover, a crowd name, the
     weekday row) says so in its own rule below and wins on document order. */
  text-align:inherit;
}
.arc :where(ul, ol){ list-style:none; }
.arc__head, .arc__body{ text-align:left; }

/* ===================== THE BOOK ===================== */
.arc__book{
  position:relative;
  width:min(1000px, 96vw);
  height:min(660px, 82vh);
  display:grid; grid-template-columns:1fr 1fr;
  perspective:2200px;
  /* CLOSED: shifted a quarter-spread right, so the board that is about to
     swing sits centred on the screen. See the header. */
  transform:translateX(25%) rotateX(6deg) scale(.94);
  /* FLAT ON PURPOSE, and this is not a detail to tidy away. `perspective`
     above still gives the board a real 3D swing - that is what perspective
     does to a child's own transform. What preserve-3d would ADD is putting
     the board and the two pages in ONE 3D space, where the browser sorts them
     by computed depth and IGNORES z-index - and the whole stack above depends
     on z-index, so the board came down on top of the page it should have gone
     under. Flat keeps the swing and gives the sort back. */
  transform-style:flat;
  transition:transform .62s cubic-bezier(.22,.9,.24,1);
}
.arc--open .arc__book{ transform:translateX(0) rotateX(0) scale(1); }

/* The two halves of the spread. The left one holds the calendar and the
   right one whatever the calendar was pointed at.

   ================= THE STACK, WHICH IS THE WHOLE TRICK =================
   The board starts ON TOP of the right page (a shut book is a board with the
   pages under it) and ends UNDERNEATH the left one (an open book's front
   board lies to the left of the spread, with the first page resting on it).
   So the two pages sit on OPPOSITE SIDES of the board in z:

     right page 1  <  board 6  <  left page 7 (once open)

   and because the board only overlaps the left half AFTER it passes 90°,
   raising the left page the instant the swing starts is enough - no
   mid-animation class, no timer to keep in sync with a duration. Shut, the
   left page is not there to be seen at all: it fades in behind the board on
   the way over, which is what makes the board read as having been ON it. */
.arc__page{
  position:relative; overflow:hidden;
  background:
    linear-gradient(90deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,0) 7%),
    var(--arc-paper);
  box-shadow:inset 0 0 60px rgba(90,60,20,.20);
  display:flex; flex-direction:column;
}
.arc__page--left{
  z-index:2; opacity:0;
  border-radius:5px 0 0 5px;
  background:
    linear-gradient(270deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,0) 8%),
    var(--arc-paper);
  transition:opacity .34s ease .3s;
}
.arc--open .arc__page--left{ z-index:7; opacity:1; }
.arc__page--right{ z-index:1; border-radius:0 5px 5px 0; }
/* The grain. A background layer on the page, NOT a fixed full-viewport
   overlay - the comment in css/neck.css spells out at length why a fixed
   textured layer with a blend mode blanks the page mid-scroll. */
.arc__page::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  opacity:.5;
  background-image:
    radial-gradient(rgba(120,90,50,.11) 1px, transparent 1px),
    radial-gradient(rgba(120,90,50,.08) 1px, transparent 1px);
  background-size:7px 7px, 11px 11px;
  background-position:0 0, 4px 5px;
}
/* The spine: the shadow two pages cast into their own gutter. Above BOTH
   pages, or the left one paints over its own half of it. */
.arc__book::before{
  content:""; position:absolute; z-index:8; pointer-events:none;
  left:50%; top:0; bottom:0; width:34px; transform:translateX(-17px);
  background:linear-gradient(90deg,
    rgba(0,0,0,0) 0%, rgba(60,38,12,.34) 42%, rgba(0,0,0,.42) 50%,
    rgba(60,38,12,.34) 58%, rgba(0,0,0,0) 100%);
}

/* ===================== THE BOARD ===================== */
.arc__cover{
  position:absolute; z-index:6; top:0; bottom:0; left:50%; right:0;
  transform-origin:0% 50%;
  transform-style:preserve-3d;
  transform:rotateY(0deg);
  transition:transform .78s cubic-bezier(.35,.02,.2,1);
  cursor:pointer;
}
.arc--open .arc__cover{ transform:rotateY(-179.6deg); }
/* Not -180: at exactly a half turn some engines land the board coplanar with
   the page under it and z-fight it into a flicker. Four tenths of a degree
   is invisible and settles the sort. */

.arc__face{
  position:absolute; inset:0;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:34px 26px; text-align:center;
  border-radius:0 6px 6px 0;
}
/* THE OUTSIDE OF THE BOARD: bound board, a foil rule round it, the venue's
   name blocked in the middle. */
.arc__face--front{
  background:
    linear-gradient(100deg, rgba(255,255,255,.09) 0%, rgba(0,0,0,.18) 60%),
    var(--arc-cover);
  box-shadow:0 22px 60px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.5);
  color:var(--arc-accent);
}
.arc__face--front::before{
  content:""; position:absolute; inset:13px;
  border:1.5px solid color-mix(in srgb, var(--arc-accent) 58%, transparent);
  border-radius:3px; opacity:.75; pointer-events:none;
}
/* THE INSIDE OF THE BOARD, seen once it has swung over the left page: plain
   endpaper, because the inside of a cover is not a second cover. */
.arc__face--back{
  transform:rotateY(180deg);
  background:
    linear-gradient(260deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,0) 30%),
    color-mix(in srgb, var(--arc-paper) 84%, var(--arc-cover));
  box-shadow:inset 0 0 40px rgba(70,45,15,.3);
  color:var(--arc-dim);
}

.arc__cover-kicker{
  font-size:.62rem; letter-spacing:.34em; text-transform:uppercase;
  opacity:.8;
}
.arc__cover-name{
  font-family:Impact, "Arial Narrow", Haettenschweiler, sans-serif;
  font-size:clamp(1.5rem, 4.4vw, 2.9rem); line-height:1.02;
  letter-spacing:.03em; text-transform:uppercase;
  text-shadow:0 2px 0 rgba(0,0,0,.5);
}
.arc__cover-where{
  font-size:.7rem; letter-spacing:.16em; opacity:.72;
  color:color-mix(in srgb, var(--arc-accent) 74%, #ffffff);
}
.arc__cover-rule{
  width:min(210px, 60%); height:2px; opacity:.6;
  background:linear-gradient(90deg, transparent, var(--arc-accent), transparent);
}
.arc__cover-open{
  margin-top:6px; font-size:.66rem; letter-spacing:.22em; opacity:.75;
  animation:arc-breathe 2.4s ease-in-out infinite;
}
@keyframes arc-breathe{ 50%{ opacity:.32; } }

/* ===================== THE PAGE FURNITURE ===================== */
.arc__head{
  flex:0 0 auto; padding:18px 22px 10px;
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  border-bottom:1.5px solid color-mix(in srgb, var(--arc-ink) 22%, transparent);
}
.arc__title{
  font-family:Impact, "Arial Narrow", Haettenschweiler, sans-serif;
  font-size:1.02rem; letter-spacing:.08em; text-transform:uppercase;
}
.arc__sub{ font-size:.62rem; letter-spacing:.18em; color:var(--arc-dim); }
.arc__body{ flex:1 1 auto; overflow:auto; padding:14px 22px 20px;
            overscroll-behavior:contain; }

/* ---- the month, and the arrows either side of it ---- */
.arc__month{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin:2px 0 12px;
}
.arc__mname{ font-size:.82rem; letter-spacing:.2em; text-transform:uppercase; }
.arc__arrow{
  appearance:none; border:1.5px solid color-mix(in srgb, var(--arc-ink) 30%, transparent);
  background:color-mix(in srgb, var(--arc-paper) 70%, #ffffff);
  color:var(--arc-ink); font:inherit; font-size:.8rem; line-height:1;
  padding:6px 11px; border-radius:4px; cursor:pointer;
}
.arc__arrow:hover{ background:color-mix(in srgb, var(--arc-accent) 26%, var(--arc-paper)); }
.arc__arrow:disabled{ opacity:.28; cursor:default; }

.arc__grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:3px; }
.arc__dow{
  font-size:.54rem; letter-spacing:.1em; text-align:center;
  padding:3px 0 5px; color:var(--arc-dim);
}
/* LANDSCAPE, NOT SQUARE. Seven square cells across a book page are 80px each,
   which pushes the house line and the loose pages off the bottom of a spread
   that is otherwise half empty - a month should fit on the page it is on. */
.arc__day{
  position:relative; aspect-ratio:1.5/1;
  display:flex; align-items:flex-start; justify-content:flex-end;
  padding:3px 4px; font-size:.62rem;
  border:1px solid color-mix(in srgb, var(--arc-ink) 12%, transparent);
  border-radius:3px; color:color-mix(in srgb, var(--arc-ink) 62%, transparent);
  background:transparent;
}
.arc__day--pad{ border-color:transparent; }
/* TODAY is a ring, not a fill: a fill competes with a night. */
.arc__day--today{ box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--arc-ink) 40%, transparent); }

/* A NIGHT THAT WAS PLAYED: stamped, and clickable. */
.arc__day--show{
  cursor:pointer; color:#fff; font-weight:bold;
  border-color:color-mix(in srgb, var(--arc-accent) 70%, #000);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--arc-accent) 88%, #fff) 0%,
                            color-mix(in srgb, var(--arc-accent) 62%, #000) 100%);
  text-shadow:0 1px 0 rgba(0,0,0,.45);
}
.arc__day--show:hover{ transform:translateY(-1px); filter:brightness(1.12); }
/* A NIGHT NOT PLAYED YET: an outline, so the book never files tomorrow
   under history. */
.arc__day--soon{
  cursor:pointer; color:var(--arc-ink);
  border:1.5px dashed color-mix(in srgb, var(--arc-accent) 72%, #000);
  background:color-mix(in srgb, var(--arc-accent) 14%, transparent);
}
.arc__day--sel{ outline:2px solid var(--arc-ink); outline-offset:1px; }
.arc__dot{
  position:absolute; left:4px; bottom:3px; right:4px; height:3px;
  border-radius:2px; background:rgba(0,0,0,.34);
}

/* ---- the house line, and the loose pages ---- */
.arc__house{
  margin:14px 0 0; padding:12px 13px;
  border-left:3px solid color-mix(in srgb, var(--arc-accent) 60%, #000);
  background:color-mix(in srgb, var(--arc-accent) 9%, transparent);
  font-size:.7rem; line-height:1.65; color:var(--arc-dim);
}
.arc__loose{ margin-top:16px; }
.arc__loose-head{
  font-size:.6rem; letter-spacing:.2em; color:var(--arc-dim);
  padding-bottom:6px; border-bottom:1px dashed color-mix(in srgb, var(--arc-ink) 26%, transparent);
}
.arc__slip{
  display:block; width:100%; text-align:left; appearance:none; cursor:pointer;
  margin-top:8px; padding:9px 11px; font:inherit; font-size:.68rem; line-height:1.5;
  color:var(--arc-ink);
  border:1px solid color-mix(in srgb, var(--arc-ink) 24%, transparent);
  border-left:3px solid color-mix(in srgb, var(--arc-accent) 70%, #000);
  border-radius:0 4px 4px 0;
  background:color-mix(in srgb, var(--arc-paper) 62%, #ffffff);
  transform:rotate(-.35deg);   /* a slip of paper laid in, not a table row */
}
.arc__slip:nth-child(even){ transform:rotate(.4deg); }
.arc__slip:hover{ background:color-mix(in srgb, var(--arc-accent) 20%, var(--arc-paper)); }
.arc__slip b{ letter-spacing:.06em; }
.arc__slip span{ display:block; color:var(--arc-dim); font-size:.62rem; }

/* ===================== A NIGHT ===================== */
.arc__night-when{
  font-family:Impact, "Arial Narrow", Haettenschweiler, sans-serif;
  font-size:1.5rem; letter-spacing:.04em; line-height:1.1;
}
.arc__stamp{
  display:inline-block; margin-left:8px; padding:3px 7px; vertical-align:middle;
  font-size:.55rem; letter-spacing:.16em; border-radius:3px;
  border:1.5px solid currentColor; transform:rotate(-3deg);
  color:color-mix(in srgb, var(--arc-accent) 60%, #000);
}
.arc__bill{ margin:10px 0 0; padding:0; list-style:none; }
.arc__bill li{ font-size:.78rem; letter-spacing:.06em; padding:2px 0; }
.arc__bill li:first-child{ font-size:.95rem; font-weight:bold; letter-spacing:.1em; }
/* "w/" ONCE, on the first support act only. A bill reads "SHWING! w/ ANACRUSIS,
   THE RICH BANKERS" - putting it on every line under the headliner turns one
   bill into a list of three separate shows. */
.arc__bill li:nth-child(2)::before{ content:"w/ "; color:var(--arc-dim); }
.arc__bill li:nth-child(n+3){ padding-left:1.9em; }
.arc__note{ margin:10px 0 0; font-size:.72rem; line-height:1.7; }
.arc__source{
  margin:10px 0 0; font-size:.56rem; line-height:1.6; color:var(--arc-dim);
  letter-spacing:.04em;
}
.arc__legend{
  margin:16px 0 6px; font-size:.58rem; letter-spacing:.2em; color:var(--arc-dim);
  padding-bottom:5px;
  border-bottom:1px solid color-mix(in srgb, var(--arc-ink) 20%, transparent);
}

/* ---- what came off the night ---- */
.arc__media{ display:grid; gap:9px; grid-template-columns:repeat(auto-fill, minmax(132px, 1fr)); }
.arc__shot{
  margin:0; position:relative; border-radius:3px; overflow:hidden;
  background:color-mix(in srgb, var(--arc-cover) 22%, var(--arc-paper));
  border:1px solid color-mix(in srgb, var(--arc-ink) 24%, transparent);
  box-shadow:0 3px 10px rgba(60,40,12,.22);
}
.arc__shot img, .arc__shot video{
  display:block; width:100%; height:118px; object-fit:cover; background:#100c08;
}
.arc__shot video{ height:auto; max-height:190px; object-fit:contain; }
.arc__cap{
  display:block; padding:5px 7px; font-size:.54rem; letter-spacing:.08em;
  line-height:1.5; color:var(--arc-dim);
}
/* NO BROKEN PICTURES. A file that is not there yet says so, the same way
   neck.html's portrait frame does. */
.arc__pending{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; height:118px; padding:8px; text-align:center;
  font-size:.55rem; letter-spacing:.14em; color:var(--arc-dim);
  background:repeating-linear-gradient(45deg,
    rgba(120,90,50,.10) 0 6px, transparent 6px 12px);
}
.arc__pending code{ font-size:.5rem; letter-spacing:0; opacity:.8; }
.arc__out{
  display:inline-flex; align-items:center; gap:6px; margin:8px 8px 0 0;
  padding:6px 11px; font-size:.6rem; letter-spacing:.14em; text-decoration:none;
  border-radius:4px; color:var(--arc-ink);
  border:1.5px solid color-mix(in srgb, var(--arc-accent) 62%, #000);
  background:color-mix(in srgb, var(--arc-accent) 22%, var(--arc-paper));
}
.arc__out:hover{ background:color-mix(in srgb, var(--arc-accent) 44%, var(--arc-paper)); }

/* ---- who was there ---- */
.arc__crowd{ display:flex; flex-wrap:wrap; gap:10px; }
.arc__who{ width:58px; text-align:center; }
.arc__who canvas{
  display:block; width:46px; height:46px; margin:0 auto;
  image-rendering:pixelated;
}
.arc__who span{
  display:block; font-size:.5rem; letter-spacing:.06em; line-height:1.4;
  color:var(--arc-dim); word-break:break-word;
}
/* The stock guest, for a name with no lounge look behind it. */
.arc__who--anon canvas{ opacity:.5; }

/* ===================== CHROME ===================== */
.arc__shut{
  position:absolute; top:-14px; right:-10px; z-index:10;
  appearance:none; cursor:pointer; font:inherit;
  font-size:.6rem; letter-spacing:.16em; padding:7px 13px; border-radius:6px;
  color:var(--arc-accent); background:rgba(8,6,12,.86);
  border:1.5px solid color-mix(in srgb, var(--arc-accent) 55%, transparent);
}
.arc__shut:hover{ background:rgba(20,14,26,.94); }
.arc__foot{
  position:absolute; left:0; right:0; bottom:-26px; z-index:10;
  text-align:center; font-size:.55rem; letter-spacing:.18em;
  color:color-mix(in srgb, var(--arc-accent) 62%, #ffffff); opacity:.62;
}

/* The back button that only exists when the spread has been folded down to
   one page. Hidden on a real spread, where the calendar is right there. */
.arc__back{
  display:none; appearance:none; cursor:pointer; font:inherit;
  margin-bottom:12px; padding:6px 11px; font-size:.6rem; letter-spacing:.16em;
  color:var(--arc-ink); border-radius:4px;
  border:1.5px solid color-mix(in srgb, var(--arc-ink) 30%, transparent);
  background:color-mix(in srgb, var(--arc-paper) 70%, #ffffff);
}

/* ===================== ONE PAGE AT A TIME =====================
   A spread on a phone is two columns of nothing. Below this width the book
   becomes ONE page: the calendar, and picking a night replaces it with the
   night and a way back. Same markup, same engine - the board still swings,
   it just has one leaf under it. */
@media (max-width:760px), (max-height:520px){
  .arc__book{
    grid-template-columns:1fr;
    height:min(660px, 88vh);
    transform:translateX(0) rotateX(4deg) scale(.95);
  }
  .arc--open .arc__book{ transform:none; }
  .arc__cover{ left:0; }
  .arc__book::before{ display:none; }
  .arc__page--left{ border-radius:5px; }
  .arc__page--right{ border-radius:5px; }
  /* Only one of the two is ever in the flow. */
  .arc__page--right{ display:none; }
  .arc--night .arc__page--left{ display:none; }
  .arc--night .arc__page--right{ display:flex; }
  .arc--night .arc__back{ display:inline-block; }
  .arc__shut{ top:-13px; right:0; }
}

/* ===================== MOTION, IF IT IS WANTED =====================
   The swing is the one thing this component is FOR, so it is the first
   thing to go when somebody has said they do not want movement: the book is
   simply open. */
@media (prefers-reduced-motion:reduce){
  .arc, .arc__book, .arc__cover{ transition:none; }
  .arc__cover-open{ animation:none; }
  .arc__leaf{ display:none !important; }
}

/* ---- the leaf that turns when you pick a night ---- */
.arc__leaf{
  position:absolute; z-index:5; top:0; bottom:0; left:50%; right:0;
  transform-origin:0% 50%; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 10%),
    var(--arc-paper);
  box-shadow:0 0 30px rgba(0,0,0,.35);
  animation:arc-turn .42s cubic-bezier(.4,.05,.3,1) forwards;
}
@keyframes arc-turn{
  from{ transform:rotateY(0deg); }
  to{ transform:rotateY(-176deg); }
}
@media (max-width:760px), (max-height:520px){
  .arc__leaf{ left:0; }
}