/* Marquee. A two-colour gig poster: one press blue, one hot pink, one warm
   paper, and the near-black you get where the two inks print over each other.

   The memorable thing is drawn type. Every line of the promise is one inline
   <svg> holding one <text>, fitted to the full width of its column, so the
   lines come out flush on both edges and each one finds its own size: a
   justified block, the way a poster locks up a forme. It happens three times
   and one of them is structural — the five names in the line-up ARE the
   about section's layout, five names locked to one measure because no one in
   this band is the support act.

   Nothing else on the page is loud, and nothing on it is decoration: the pink
   strips carry facts, the rules separate listings, the numbers count a real
   sequence of four steps. README.md before changing anything. */

/* Two self-hosted faces, both subset, both in this folder, so the page still
   asks the internet for nothing. Each licence file travels with its font.
   See README.md: the display is the poster, the text is the listings page. */
@font-face {
  font-family: "Archivo Black Subset";
  src: url("archivoblack-subset.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader Subset";
  src: url("newsreader-subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colour. Two inks, the paper, and the overprint. See README.md. */
  --bg: #f7f2e7;
  --ink: #16235e;
  --muted: #4a4f6b;
  --accent: #cc0064;
  --accent-ink: #f7f2e7;
  --tint: #f8e7ed;
  --rule: var(--ink);
  /* the two inks multiplied, the colour a real overprint makes */
  --overprint: #120025;
  /* second voice on the dark fields */
  --pale: #d9b9c6;

  /* Type scale. The drawn lines size themselves off the column; see .drawn. */
  --t-statement: clamp(1.5rem, 4.6vw, 3rem);
  --t-h: clamp(1.375rem, 3.4vw, 2.5rem);
  --t-h3: clamp(1.1875rem, 2.4vw, 1.75rem);
  --t-lead: clamp(1.0625rem, 1.4vw, 1.25rem);
  --t-body: 1.0625rem;
  --t-small: 0.9375rem;
  --t-mono: 0.8125rem;

  /* Spacing. */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 1rem;
  --s4: 1.5rem;
  --s5: 2.5rem;
  --s6: 4rem;
  --pad: clamp(0.9375rem, 4vw, 3.5rem);
  --field: clamp(1.25rem, 6vw, 5.5rem);
  /* the gap between the blocks inside a section: s3 on a phone, s4 on a
     desktop, so the phone page fits the ceiling without the wide one
     tightening up */
  --gap: clamp(1rem, 2.2vw, 1.5rem);
  /* one measure: the poster column the hero and the closing line lock to */
  --column: 46rem;

  --display: "Archivo Black Subset", "Archivo Black", "Arial Black", "Helvetica Neue", sans-serif;
  --text: "Newsreader Subset", Cambria, Charter, "Times New Roman", serif;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, "Courier New", monospace;
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--t-body);
  line-height: 1.55;
  overflow-wrap: break-word;
}

h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 900; }

p { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

img { max-width: 100%; height: auto; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.sheet {
  max-width: 72rem;
  margin: 0 auto;
  padding-inline: var(--pad);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--ink);
  color: var(--bg);
  padding: var(--s2) var(--s3);
  text-decoration: none;
}
.skip:focus { left: 0; }

/* ---------- the top trim ---------- */

.top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2) var(--s3);
  padding: var(--s2) var(--pad);
  border-bottom: 4px solid var(--rule);
}

.imprint {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.2;
  min-width: 0;
}

.top__tel {
  font-family: var(--mono);
  font-size: var(--t-mono);
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  /* the number is the one label on the page that must never break in two */
  white-space: nowrap;
  padding-block: 0.45em;
}

.top__tel, .plain {
  transition: text-decoration-thickness 120ms linear, color 120ms linear;
}
.top__tel:hover, .plain:hover { text-decoration-thickness: 3px; }

/* ---------- the drawn type ---------- */
/* Each line is one <svg> with one <text>. Three numbers per line, measured
   against Archivo Black at font-size 1000 and written into index.html: the
   viewBox is the ink box, so the ink fills the width exactly; textLength is
   the natural advance, which the browser holds to even when it is drawing a
   different face, so a fallback is squeezed or stretched to the same measure
   instead of ending somewhere else. No JavaScript, nothing to re-measure on
   resize, the same locked block on a phone as on a desktop.

   The words are drawn in capitals; each svg carries role="img" and an
   aria-label in sentence case, so a screen reader is read the promise once,
   in the right case, and there is no second hidden copy of it in the page. */

.stack { margin: 0; font-size: var(--t-statement); }

.drawn {
  display: block;
  width: 100%;
  height: auto;
  /* the comma and the full stop hang below the ink box; let them */
  overflow: visible;
}

.drawn text {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1000px;
  letter-spacing: -0.035em;
  fill: var(--ink);
}

.stack .drawn:nth-of-type(even) text { fill: var(--accent); }

/* ---------- the poster column ---------- */

.forme { padding-block: var(--field); }
.forme--open { padding-bottom: 0; }
.forme--blue { background: var(--ink); color: var(--bg); }
.forme--pink { background: var(--accent); color: var(--accent-ink); }
.forme--pale { background: var(--tint); }

.forme--blue :focus-visible,
.forme--pink :focus-visible { outline-color: var(--bg); }

.stack--hero, .stack--last { max-width: var(--column); }

.say {
  max-width: var(--column);
  margin-top: var(--gap);
  display: grid;
  gap: var(--s3);
  align-items: end;
}

.strapline {
  font-size: var(--t-lead);
  line-height: 1.35;
  max-width: 30em;
}
.strapline--wide { max-width: 28em; }

.note {
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--muted);
  max-width: 30em;
}
.forme--blue .note { color: var(--pale); }

.act {
  display: grid;
  justify-items: start;
  gap: var(--s2);
  margin: 0;
}

/* ---------- the ticket, and plain links ---------- */

.ticket {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-ink);
  border: 3px solid var(--accent);
  padding: 0.85em 1.4em;
  font-family: var(--display);
  font-weight: 900;
  font-size: var(--t-small);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-decoration: none;
  transition: background-color 120ms linear, border-color 120ms linear, color 120ms linear;
}
.ticket:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.ticket:active { background: var(--overprint); border-color: var(--overprint); color: var(--bg); }
/* the ring has to read against the pink fill, not vanish into it */
.ticket:focus-visible { outline-color: var(--ink); }

.plain {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--t-mono);
  color: var(--muted);
  padding-block: 0.45em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
.plain:hover { color: var(--accent); }

/* ---------- the bill strip ---------- */
/* The second ink, solid, carrying the facts a poster puts under the name.
   Twice: closing the hero with what is on, and in the footer with how to
   reach the band. Hairlines between the items, never dots. */

.bill {
  margin-top: var(--s5);
  background: var(--accent);
  color: var(--accent-ink);
}

.bill__list {
  list-style: none;
  margin-block: 0;
  margin-inline: auto;
  padding-block: var(--s1);
  font-family: var(--mono);
  font-size: var(--t-mono);
  line-height: 1.5;
  display: grid;
}

.bill__list li + li { border-top: 1px solid var(--accent-ink); }

/* Four short labels, so the strip pairs them up rather than running them
   down the phone. The footer strip stays one to a line: they are links. */
.bill:not(.bill--foot) .bill__list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--s3);
}
.bill:not(.bill--foot) .bill__list li:nth-child(2) { border-top: 0; }

.bill__list a {
  display: inline-block;
  padding-block: 0.4em;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
.bill__list a:hover { text-decoration-thickness: 3px; }

.bill__list li:not(:has(a)) { padding-block: 0.4em; }

/* ---------- headings ---------- */

.head {
  font-size: var(--t-h);
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-bottom: var(--s3);
}

.statement {
  font-size: var(--t-statement);
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  margin-bottom: 0;
}

/* ---------- the doubt, and the answer to it ---------- */

.doubt { display: grid; gap: var(--gap); }
.doubt__text > * + * { margin-top: var(--s3); }

/* Two things people said, one over the other, at two sizes, each on its own
   rule. Not a pair of cards. */

.said {
  margin-top: var(--s3);
  display: grid;
  gap: var(--s3);
}

.quote {
  margin: 0;
  border-top: 3px solid var(--bg);
  padding-top: var(--s2);
}

.quote blockquote { margin: 0 0 var(--s3); }

.quote blockquote p {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-size: clamp(1.1875rem, 2.9vw, 2rem);
}

.said .quote:last-child blockquote p {
  font-size: clamp(1.0625rem, 2.1vw, 1.5rem);
  max-width: 32em;
}

.quote figcaption {
  font-family: var(--mono);
  font-size: var(--t-mono);
  color: var(--pale);
}

/* ---------- the printed block ---------- */
/* Both photo slots take the same frame: a 4px rule in the field's own ink,
   and a pink strip under it carrying the caption. While the slot is empty
   the frame is not a hole and not a grey rectangle: it holds something true
   at the same aspect the photograph will take, so nothing moves when one
   arrives. */

.print {
  margin: var(--s3) 0 0;
  border: 4px solid currentColor;
}

.print__stand {
  display: grid;
  align-content: start;
  padding: var(--s3);
}

.print:not(.is-empty) .print__stand { display: none; }

.print img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.print--wide img { aspect-ratio: 12 / 5; }

.print__cap {
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--mono);
  font-size: var(--t-mono);
  line-height: 1.4;
  padding: var(--s1) var(--s3);
}

/* the running order, which is what the dance-floor photograph shows */

/* three cells across, because a running order reads left to right. Below
   25em it becomes one row per set instead, because three columns at 320
   broke a word in half inside the design's own empty frame. */
.running {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s3);
}

.running li {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  border-top: 1px solid currentColor;
  padding-top: var(--s2);
}


.running__at {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.375rem, 4.4vw, 4rem);
  letter-spacing: -0.03em;
  line-height: 1;
}

.running li > * { overflow-wrap: normal; }

.running__what {
  font-family: var(--mono);
  font-size: var(--t-mono);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.running__set {
  font-family: var(--display);
  font-weight: 900;
  font-size: var(--t-small);
  letter-spacing: -0.01em;
  line-height: 1.1;
  padding-top: var(--s2);
}

/* what comes out of the van, which is what the band photograph shows */

.van, .hours {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: var(--t-small);
}

.van caption, .hours caption {
  text-align: left;
  font-family: var(--mono);
  font-size: var(--t-mono);
  line-height: 1.4;
  padding-bottom: var(--s2);
}

.van th, .hours th {
  font-weight: normal;
  font-family: var(--display);
  font-size: var(--t-mono);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  padding-block: var(--s1);
  padding-right: var(--s3);
  vertical-align: baseline;
}

.van td, .hours td {
  padding-block: var(--s1);
  text-align: right;
  vertical-align: baseline;
}

.van tr + tr th, .van tr + tr td,
.hours tr + tr th, .hours tr + tr td { border-top: 1px solid currentColor; }

.hours caption, .hours td { color: var(--pale); }

/* ---------- what you can book ---------- */
/* A bill of what is on: name, one line of detail, then the description, with
   a heavy rule over each item the way a poster rules its listings. */

.listing { display: grid; }

.listing__row {
  border-top: 3px solid var(--rule);
  padding-block: var(--s2) var(--s3);
  display: grid;
  gap: var(--s3);
}

.listing__head { display: grid; gap: var(--s1); }

.listing__name {
  font-size: var(--t-h3);
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.listing__tag {
  margin: 0;
  font-size: var(--t-small);
  color: var(--accent);
}

.listing__note {
  max-width: 29em;
  color: var(--muted);
  line-height: 1.5;
}

/* ---------- from your date to our load-in ---------- */
/* The second ink as a whole field. One step per line, the numeral set in
   front of it the way a poster bills the support acts. These are the only
   numbers on the page, because this is the only sequence. */

.order {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
  display: grid;
  gap: var(--s2);
}

.order__step {
  counter-increment: step;
  display: grid;
  gap: var(--s2);
}

.order__name {
  font-size: clamp(1.1875rem, 3.2vw, 2rem);
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 1;
}

.order__name::before {
  content: counter(step);
  color: var(--tint);
  margin-right: 0.3em;
}

.order__note {
  margin: 0;
  color: var(--tint);
  font-size: var(--t-small);
  line-height: 1.5;
  max-width: 31em;
}

/* ---------- the five of us ---------- */
/* The device, third appearance, and this time it is the layout: five names
   drawn to one measure. Delete the drawing and the section has no shape. */

.who { display: grid; gap: var(--gap); }

.lineup {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* one grid for all five rows, so the instrument column is sized once and
     every drawn name comes out at the same width. Five rows of their own
     grids gave three widths and a 15px rag on the one device that exists
     to justify type. */
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s1);
}

.lineup li {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: baseline;
  column-gap: var(--s3);
  border-top: 1px solid var(--rule);
  padding-top: var(--s2);
}

.lineup li:nth-child(even) .drawn text { fill: var(--accent); }

.lineup__part {
  font-family: var(--mono);
  font-size: var(--t-mono);
  color: var(--muted);
  /* holds the column where subgrid is not supported */
  min-width: 3rem;
  text-align: right;
}

.who__text > * + * { margin-top: var(--s3); }

/* ---------- the last word ---------- */

.last { display: grid; gap: var(--gap); }
.last .say { margin-top: 0; }

/* ---------- the footer ---------- */

.foot {
  background: var(--overprint);
  color: var(--bg);
  padding-block: var(--field) var(--s3);
}

.foot :focus-visible { outline-color: var(--bg); }

.bill--foot { margin-top: 0; margin-bottom: var(--s3); }

.foot__foot { display: grid; gap: var(--gap); }

.foot__where p { color: var(--pale); font-size: var(--t-small); line-height: 1.5; max-width: 30em; }

.foot__copy { font-family: var(--mono); font-size: var(--t-mono); }

/* ---------- wider screens ---------- */

@media (max-width: 25em) {
  .running { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .running li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--s3);
    align-items: baseline;
    padding-top: var(--s1);
  }
  .running__at { grid-row: span 2; }
  .running__set { padding-top: 0; }
}

@media (min-width: 48em) {
  .say {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s5);
  }
  .act { align-content: end; }

  .lineup li { column-gap: var(--s4); }

  .listing__row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: var(--s5);
    align-items: start;
    padding-block: var(--s4) var(--s5);
  }


  .foot__foot {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--s6);
  }
}

@media (min-width: 68em) {
  /* Four across only once a column is wide enough to hold a fact on one
     line; below this the strip stays a stacked list. */
  .bill__list { padding-block: var(--s3); }
  .bill:not(.bill--foot) .bill__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bill__list li { padding-inline: var(--s4); }
  .bill__list li:first-child { padding-left: 0; }
  .bill__list li + li { border-top: 0; border-left: 1px solid var(--accent-ink); }
  .bill--foot .bill__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* The statement stays one block above its answer rather than sitting in a
     column beside it: two lines of poster type across the field, then the
     reading copy under it. Two columns left a 108px hole under the shorter
     one once the text face changed, and the fix that kept the columns would
     have pushed the answer under 45 characters a line. */
  .statement { max-width: 26ch; }

  .order__step {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    column-gap: var(--s6);
    align-items: baseline;
  }
  .order__note { max-width: none; }

  /* a wide screen crops the dance floor into a true banner */
  .print--wide img { aspect-ratio: 3 / 1; }

  .who {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: var(--s6);
    align-items: start;
  }

  /* The closing line takes the left column and the ask sits in the right,
     so the last section holds the full sheet the way the hero does. */
  .last {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--s6);
    align-items: end;
  }
  .last .stack--last { max-width: none; }
  .last .say { max-width: none; grid-template-columns: minmax(0, 1fr); }
}

/* Forced colours override `color` and not `fill`, so without this the drawn
   type keeps its navy on a black ground at 1.44:1 and the one memorable
   thing on the page disappears for a high-contrast reader. */
@media (forced-colors: active) {
  .drawn text { fill: CanvasText; }
  .stack .drawn:nth-of-type(even) text,
  .lineup li:nth-child(even) .drawn text { fill: LinkText; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}