/* ============================================================
   518 Official — THE FLYER ARCHIVE (archive.html)
   css/pages/archive.css?v=2 — loads AFTER tokens.css + site.css.
   Layout only: never restyles the shared shell, never overrides
   tokens, never declares :root.

   WHAT THIS PAGE IS: sixteen nights 518 Events actually put on, each
   one shown as the flyer they published plus the facts printed on it.
   The design job is that a flyer stays READABLE and stays WHOLE.

   TWO RULES THIS FILE EXISTS TO HOLD
   1. A flyer is a document, so it is shown whole — object-fit:
      contain, never cover. Cropping a flyer destroys the printed
      facts that are the entire reason it is on this page. Nothing
      here ever gives .ar-art img a fixed height, which is what would
      make a crop possible in the first place.
   2. Cards size to their own content. An earlier revision stretched
      every card in a row to the tallest one, which parked up to 730px
      of empty panel under the short cards (measured at 1180px, three
      columns). align-items: start on the list is what prevents that;
      do not put height: 100% back on .ar-card.

   FACE-SAFE: the hero's object-position is the focal registered for
   THIS clip in data/media.json (med-hero-3-stage, 64.3% 26.4%) — see
   docs/ARCHITECTURE.md §4. No flyer registers a focal point because
   no flyer is ever cropped.
   ============================================================ */

/* ---------- Hero film ---------- */
.ar-sect--film { position: relative; overflow: hidden; }

.ar-film {
  position: absolute; inset: 0;
  height: clamp(300px, 42vh, 460px);
  z-index: var(--z-bg);
}

/* hero-3-stage — focal 64.3% 26.4%, as registered in data/media.json.
   (This once carried hero-4-dj's 39.7% 15.2%, which is a different
   clip and a different set of faces.) */
.ar-film video,
.ar-film .vslot-poster { object-fit: cover; object-position: 64.3% 26.4%; }

.ar-grade {
  position: absolute; inset: 0;
  height: clamp(300px, 42vh, 460px);
  z-index: var(--z-base); pointer-events: none;
  background: linear-gradient(to top,
    var(--bg) 0%,
    rgba(10, 10, 10, 0.88) 32%,
    rgba(10, 10, 10, 0.54) 64%,
    rgba(10, 10, 10, 0.36) 100%);
}

.ar-sect--film > .container { position: relative; z-index: var(--z-content); }
.ar-sect--film > .container > .sect-head { padding-top: clamp(1.75rem, 7vh, 4rem); }

.ar-h1 { max-width: 14ch; }

.ar-meta {
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ivory-60);
  margin-top: var(--sp-4);
}

/* ---------- The card grid ----------
   align-items: start — see rule 2 at the top of this file. */
.ar-list {
  list-style: none;
  margin: clamp(2rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-5);
  align-items: start;
  /* One column, capped and centred. Uncapped, a 719px window blew a
     flyer up to 652px against a 933px source — 0.60x of what a retina
     screen needs, i.e. printed text turned to mush. At 30rem the same
     flyer lands at ~0.97x. Below ~510px the container is narrower than
     the cap anyway and this does nothing. */
  max-width: 30rem;
  margin-inline: auto;
}
@media (min-width: 720px)  { .ar-list { max-width: none; grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .ar-list { grid-template-columns: repeat(3, 1fr); } }

.ar-card {
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  /* the facts list below reflows against the CARD, not the viewport —
     a two-column card at 768px is narrower than a one-column card at
     560px, so a viewport query gets this exactly backwards. */
  container-type: inline-size;
}

/* NEVER give this a height. See rule 1. */
.ar-art { margin: 0; background: var(--panel-2); }
.ar-art img { display: block; width: 100%; height: auto; object-fit: contain; }

.ar-body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }

.ar-when { font-family: var(--font-label); font-size: var(--fs-micro); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--rizz-text); margin: 0; }

/* The words the artwork itself prints, where they differ from the
   resolved date. Quiet: the resolved date is the headline. */
.ar-printed { margin: calc(var(--sp-3) * -1 + var(--sp-1)) 0 0; font-size: var(--fs-small); color: var(--ivory-60); }

/* An undated flyer says so on its face rather than sitting silently
   next to twelve dated ones and reading as a page that failed. */
.ar-when--undated { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); color: var(--ivory-60); }
.ar-noyear {
  font-size: var(--fs-micro);
  color: var(--smoke);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: 0.1rem 0.4rem;
}

.ar-title { font-family: var(--font-display); font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.15; text-transform: uppercase; margin: 0; }

/* ---------- The facts list ----------
   Stacked by default. A label beside its value only once the card is
   wide enough that the value still gets ~28 characters a line —
   below that the two-column form turns an address into a 20-character
   ribbon eighteen lines tall (measured at 360px). */
.ar-facts { margin: 0; display: grid; gap: var(--sp-3); }
.ar-facts > div { display: grid; gap: var(--sp-1); }
.ar-facts dt { font-family: var(--font-label); font-size: var(--fs-micro); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--smoke); }
.ar-facts dd { margin: 0; font-size: var(--fs-small); line-height: var(--lh-body); color: var(--ivory-80);
  overflow-wrap: break-word; }

@container (min-width: 24rem) {
  .ar-facts { gap: var(--sp-2); }
  .ar-facts > div { grid-template-columns: 6.5rem 1fr; gap: var(--sp-3); align-items: baseline; }
}

.ar-lineup { margin: 0; font-size: var(--fs-small); line-height: var(--lh-body); color: var(--ivory-80);
  overflow-wrap: break-word; }
.ar-lineup-label { display: block; font-family: var(--font-label); font-size: var(--fs-micro);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--smoke); margin-bottom: var(--sp-1); }

.ar-foot {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--smoke);
}