/* judahdaniels.com — "the pinned poster" (see DESIGN.md).
   Colour and type live in these tokens; nothing below names a colour or a size.
   The palette comes from the footage itself: dark rooms and warm light, with
   a tangerine-red as the one accent, on the action. */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("/fonts/cormorant-garamond-latin.woff2?v=768af1061b") format("woff2");
  font-weight: 500 600;   /* cut to the weights used (tools/fonts.sh) */
  font-display: swap;
}

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/fonts/schibsted-grotesk-latin.woff2?v=362b2a6945") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}

:root {
  --bg: #0f0e0d;          /* the room after dark */
  --ink: #e4e0d8;         /* bone white, softened so it doesn't glare (round 47, pick 2) */
  --muted: #c2baae;       /* lighter grey: 10:1 on the ground */
  --field: #1c1a17;       /* one tone step up, for the cards and the contact */
  --accent: #ff6a3d;      /* tangerine-red: the action only (and the booking email) */
  --link: #857e74;        /* grey link underlines (4.8:1), white on hover (Judah: "white or grey") */
  --accent-ink: #0f0e0d;

  --font: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Cormorant Garamond", ui-serif, Georgia, serif;   /* headings */
  --wd: 500;   /* heading weight: Cormorant, a weight up from light (round 47, pick 2) */
  --td: 0;     /* heading tracking, as a multiple of -0.05em */
  --step-small: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);   /* a step up (round 47, pick 2) */
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-display: clamp(3.5rem, 7vw, 9.5rem);

  --m: clamp(16px, 2.2vw, 32px);    /* the one pair of page margins */
  --gap: clamp(96px, 12vw, 200px);  /* between sections */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* printed (the press page's Print / download PDF): black on white */
@media print { :root { --bg: #fff; --ink: #000; --muted: #444; --field: #fff; --accent: #000; --link: #000; } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 var(--step-body)/1.5 var(--font);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure, ol, ul { margin: 0; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 0.2em; transition: color 0.2s, text-decoration-color 0.2s; }
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* the skip link: out of sight until the keyboard reaches it */
.skip { position: absolute; z-index: 20; left: var(--m); top: 8px; padding: 10px 16px; background: var(--field); color: var(--ink); font-weight: 600; transform: translateY(-200%); }
.skip:focus-visible { transform: none; }
@media print { .skip { display: none; } }
::selection { background: var(--accent); color: var(--accent-ink); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px;
  background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: var(--step-small);
  text-decoration: none; border-radius: 0; transition: transform 0.2s var(--ease), background-color 0.2s;
}
.btn:hover { transform: translateY(-2px); background: var(--ink); }
.btn:active { transform: translateY(0) scale(0.98); }

/* the display headings: Cormorant at the heading weight (each sets its own size) */
.name, .dates-list h2, .bio h2, .show-words h2, .show-words h3, .photos h1, .gigpage h1, .nf-band h1 { font-family: var(--font-display); font-weight: var(--wd); }

/* ---- bar ------------------------------------------------------------------- */

.bar { display: flex; align-items: center; gap: 24px; padding: 16px var(--m); font-size: var(--step-small); font-weight: 600; }
.bar .mark { text-decoration: none; margin-right: auto; }
.bar nav { display: flex; gap: 24px; }
.bar nav a { text-decoration: none; }
.bar nav a:hover { text-decoration: underline; text-decoration-color: var(--ink); }

/* ---- hero: the name beside one picture, centred as a pair ------------------------- */

.hero { position: relative; min-height: 82svh; display: grid; grid-template-columns: 1fr auto auto 1fr; grid-template-rows: auto 1fr auto auto 1fr; column-gap: 2.5vw; }
.hero .bar { grid-column: 1 / -1; grid-row: 1; }
.name {
  grid-column: 2; grid-row: 3;
  font-size: var(--step-display); letter-spacing: calc(var(--td) * -0.05em); line-height: 0.88;
}
.name .l, .name .r { display: block; }
.frames { grid-column: 3; grid-row: 2 / 6; align-self: center; width: min(30vw, 58svh); padding-bottom: 24px; }
.frame img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.lede { grid-column: 2; grid-row: 4; padding-top: 24px; width: min(30ch, 100%); display: grid; gap: 12px; }
.next { font-family: var(--font-display); font-weight: var(--wd); font-size: 1.6rem; line-height: 1.1; font-variant-numeric: lining-nums; }
.next a { text-decoration: none; }
.next a:hover, .next a:focus-visible { text-decoration: underline; text-decoration-color: var(--ink); }
/* the booking email under the next gig (round 51, pick 2): small, in the accent, never split */
.lede-mail a { color: var(--accent); text-decoration: none; white-space: nowrap; font-size: var(--step-small); font-weight: 600; transition: color 0.2s; }
.lede-mail a:hover { color: var(--ink); }

/* ---- upcoming gigs: sticky photograph, active list ------------------------------ */

main > section + section { margin-top: var(--gap); }
main > .showcase + section { margin-top: clamp(56px, 6vw, 96px); }
.dates { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; padding: 0 var(--m); }
.dates-photo { grid-column: 1 / 6; position: sticky; top: 12vh; align-self: start; aspect-ratio: 4 / 5; }
.dates-photo .ph { position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s; }
.dates-photo .ph.on { opacity: 1; }
.dates-photo img { width: 100%; height: 100%; object-fit: cover; }
.dates-photo .ph.fit { background: var(--field); }   /* a poster sits on a matte the photo's size, so the picture's edges stay put */
.dates-photo .ph.fit img { object-fit: contain; }
.dates-list { grid-column: 7 / 13; }
.dates-list h2 { font-size: var(--step-head); letter-spacing: calc(var(--td) * -0.04em); line-height: 1; margin-bottom: 48px; }
.rows { list-style: none; padding: 0; }
/* every gig in full, nothing to open (round 48, pick 3; round 49, pick 3): the date and
   time in a column, the place and its description, Tickets or the entry on the right.
   (A border on the left, for the next-gig link's mark, sits in the margin.) */
.gig {
  display: grid; grid-template-columns: calc(var(--step-lead) * 5.4) minmax(0, 1fr) auto;
  grid-template-areas: "date at tix" "when blurb tix" ". cal ." ". more ."; column-gap: calc(var(--step-lead) * 0.4); row-gap: 8px;
  justify-items: start; align-items: baseline; padding: 14px 0 14px 14px; margin-left: -16px; border-left: 2px solid transparent; transition: border-color 0.3s;
}
.gig + .gig { border-top: 1px solid var(--field); }
.g-date { grid-area: date; font: 600 var(--step-lead)/1.15 var(--font-display); font-variant-numeric: lining-nums; letter-spacing: calc(var(--td) * -0.03em); }
.g-at { grid-area: at; font: var(--wd) var(--step-lead)/1.15 var(--font-display); }
.g-when { grid-area: when; }
.g-blurb { grid-area: blurb; max-width: 46ch; }
.g-when, .g-blurb, .g-entry { font-size: var(--step-small); color: var(--muted); line-height: 1.45; }
.g-entry, .g-tix { grid-area: tix; justify-self: end; }
.g-tix { align-self: start; min-height: 36px; padding: 0 14px; }
.g-cal { grid-area: cal; align-self: start; margin-top: 2px; }
.g-more { grid-area: more; font-size: var(--step-small); }
/* a venue or an area never splits across lines (the hero's next gig and the list) */
.next time, .next .v, .gig .v, .past-at .v { white-space: nowrap; }
/* the gig whose poster is showing in the photograph's place */
.gig.on .g-at { text-decoration: underline; text-decoration-color: var(--link); text-underline-offset: 0.2em; }
/* arriving from the next-gig link: the date glows, and a line marks the gig until you turn to another */
.gig.arrived { border-left-color: var(--accent); }
.gig.arrived .g-date { animation: gig-arrive 1.6s var(--ease); }
@keyframes gig-arrive { 0%, 40% { color: var(--accent); } 100% { color: var(--ink); } }
@media (prefers-reduced-motion: reduce) { .gig.arrived .g-date { animation: none; } }
/* words for screen readers only (a poster's description, as the photograph is hidden from them) */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.empty { font-size: var(--step-lead); max-width: 30ch; }

/* ---- about: his portrait at the left, as wide as the gig list's photo; the heading and
   the words at the right, at reading size (round 46, pick 7) ------------------------------ */

.bio { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto auto 1fr; column-gap: 24px; row-gap: 24px; align-items: start; padding: 0 var(--m); }
.bio h2 { grid-column: 7 / 13; font-size: var(--step-head); letter-spacing: calc(var(--td) * -0.04em); line-height: 1; }   /* the size of the other headings (round 52, pick 3) */
.bio-text { grid-column: 7 / 13; max-width: 60ch; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.6; }   /* a little under --step-lead (Judah: "a little smaller") */
.bio-pic { grid-column: 1 / 6; grid-row: 1 / span 3; }
.bio-pic img { width: 100%; height: auto; }
.bio-text p + p { margin-top: 1em; }

/* ---- Joyful: fills the screen, the words on a band, plays in place ------------------- */

.show { position: relative; height: 100svh; overflow: hidden; background: var(--field); }
.show video, .show iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.show video { object-fit: cover; object-position: 50% 0%; }
.show iframe { background: #000; }
.show-play { position: absolute; inset: 0; z-index: 1; cursor: pointer; }
.show-words {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none;
  display: flex; align-items: first baseline; gap: 20px; flex-wrap: wrap; padding: 20px var(--m);
  background: rgba(0, 0, 0, 0.55);
}
.show-title { display: grid; gap: 6px; }
.show-words .credit { font-size: 0.82rem; line-height: 1.2; }
.show-words h2, .show-words h3 { font-size: var(--step-head); letter-spacing: calc(var(--td) * -0.04em); line-height: 1; }
/* the play button: a large disc in the middle of the video, drawn on the link */
.show-play::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; transform: translate(-50%, -50%);
  border-radius: 50%; background: rgba(15, 14, 13, 0.55); border: 1.5px solid var(--ink); transition: transform 0.2s var(--ease);
}
.show-play::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-35%, -50%);
  border-left: 24px solid var(--ink); border-top: 15px solid transparent; border-bottom: 15px solid transparent;
}
.show:hover .show-play::before, .show-play:focus-visible::before { transform: translate(-50%, -50%) scale(1.08); }

/* ---- contact: the address as display type ------------------------------------------ */

.contact { background: var(--field); padding: clamp(48px, 8vw, 120px) var(--m) var(--m); display: grid; gap: clamp(24px, 3vw, 40px); }
.ask { font-size: var(--step-lead); max-width: 26ch; }
.email {
  text-decoration: none; white-space: nowrap; color: var(--accent);   /* the address never splits */
  font-size: min(6.3vw, 7.5rem); font-weight: 400; letter-spacing: -0.05em; line-height: 0.95; transition: color 0.2s;
}
.email:hover { color: var(--ink); }
/* the social links on one small line, "Instagram · YouTube · Bandcamp", each name with a
   tiny brand mark (Simple Icons, CC0) before it (round 43, pick 9) */
.social { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 0; font-size: var(--step-small); font-weight: 600; justify-self: start; }
.social li + li::before { content: "·"; margin: 0 14px; color: var(--muted); }
.social a { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.social a:hover .sl { text-decoration: underline; text-decoration-color: var(--ink); }
.si { width: 14px; height: 14px; fill: currentColor; flex: none; }

.foot {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 16px;
  padding: 32px var(--m); font-size: var(--step-small); font-weight: 600; color: var(--muted);
}
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }   /* (wraps on the narrowest phones: 320px) */
.foot nav a { color: var(--ink); }
.foot > span:last-child { justify-self: end; }

/* ---- the photos page: a title and the photos ------------------------------------------ */

.photos, .gigpage { padding: 48px var(--m) var(--gap); }
.photos h1, .gigpage h1 { font-size: var(--step-head); letter-spacing: calc(var(--td) * -0.04em); line-height: 1; margin-bottom: 32px; }
/* each photo in its own shape, on its average colour (--c) until it loads: in columns on
   a landscape screen, one at a time, large, down a portrait one (round 46, picks 7 and 10) */
.grid { list-style: none; padding: 0; columns: 3 280px; column-gap: 8px; }
.grid li { break-inside: avoid; margin-bottom: 8px; }
.grid img { width: 100%; background: var(--c); transition: opacity 0.2s, transform 0.3s var(--ease); }
@media (orientation: portrait) {
  .grid { columns: auto; display: grid; gap: clamp(32px, 8vh, 96px); justify-items: center; }
  .grid li { width: min(100%, calc(88svh * var(--ar))); margin: 0; }
}
.grid a:hover img { opacity: 0.85; transform: scale(1.01); }
.viewer { max-width: min(92vw, 1600px); max-height: 94svh; padding: 0; border: 0; background: var(--bg); color: var(--ink); }
.viewer::backdrop { background: rgba(0, 0, 0, 0.88); }
.viewer img { max-height: 82svh; width: auto; margin: 0 auto; }
.viewer p { display: flex; gap: 12px; align-items: center; padding: 12px 0 0; font-size: var(--step-small); font-weight: 600; }
.viewer .dl { margin-right: auto; }
.viewer button { font: inherit; color: var(--ink); background: var(--field); border: 0; min-height: 44px; padding: 0 16px; cursor: pointer; }
.viewer button:hover { background: var(--accent); color: var(--accent-ink); }
.gigpage article { max-width: 60ch; display: grid; gap: 20px; }
.gigpage .facts { font-size: var(--step-lead); font-weight: 600; }

/* ---- not found: the red-curtain photo, the words on a band ------------------------------- */

.nf { position: relative; height: 80svh; overflow: hidden; }
.nf img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.nf-band { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px var(--m); background: rgba(0, 0, 0, 0.55); display: grid; gap: 14px; }
.nf-band h1 { font-size: var(--step-head); line-height: 1; }
.nf-band p { display: flex; gap: 24px; font-weight: 600; }

/* ---- motion: entrances, once, never hiding content without script --------------------- */

.js [data-rise] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: var(--d, 0ms); }
.js [data-rise].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-rise] { transform: none; transition: opacity 0.3s; }
  .btn:hover, .grid a:hover img { transform: none; }
}

/* ---- phone: its own composition ---------------------------------------------------------- */

@media (max-width: 760px) {
  .bar nav { display: none; }
  .hero { min-height: auto; grid-template-columns: 1fr; grid-template-rows: none; gap: 16px; padding-bottom: 32px; }
  .name { grid-column: 1; grid-row: 3; margin: 0 var(--m); font-size: 21vw; }
  .lede { grid-column: 1; grid-row: 4; padding: 0 var(--m); }
  /* the photo first, square and edge to edge, then the name and the words */
  .frames { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: 1fr; width: auto; margin: 0; padding: 0; }
  .frame img { aspect-ratio: 1; }

  /* each section's picture edge to edge, its heading on a band across the picture's foot
     like Joyful's title, then the rest (round 52, pick 11). The band is dark enough (70%
     black) that the heading keeps at least 6.6:1 over any photo or poster. The list's own
     box steps aside so its heading can sit on the photo; the heading stays a heading. */
  .dates { display: flex; flex-direction: column; }
  .dates-list { display: contents; }
  .dates-photo { order: 1; position: relative; top: auto; width: calc(100% + 2 * var(--m)); aspect-ratio: 4 / 5; margin: 0 calc(-1 * var(--m)); }
  .dates-photo:not(:has(.ph)) { display: none; }   /* (no gigs, no photo: the heading as usual) */
  .dates-list > * { order: 2; }
  .dates-photo:has(.ph) + .dates-list h2, .bio h2:has(~ .bio-pic) { position: relative; z-index: 1; padding: 16px var(--m); background: rgba(0, 0, 0, 0.7); }
  .dates-photo:has(.ph) + .dates-list h2 { margin: calc(-1lh - 32px) calc(-1 * var(--m)) 24px; }
  .dates-photo .ph.fit { padding-bottom: calc(var(--step-head) + 32px); }   /* a poster, whole, above the band */
  /* each gig in three short lines: the date and time small and grey with "Add to calendar"
     at its right; the place with Tickets (or the entry) at its right; the description */
  .gig { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "date cal" "at tix" "blurb blurb" "more more"; column-gap: 12px; row-gap: 2px; padding-block: 10px; }
  .g-date { font: 400 var(--step-small)/1.4 var(--font); color: var(--muted); }
  .g-when { grid-area: date; padding-left: 6.4em; line-height: 1.4; white-space: nowrap; }   /* the time kept whole */
  .g-cal { justify-self: end; margin: 0; }
  .g-entry, .g-tix { align-self: center; }
  /* (the narrowest phones: "Add to calendar" under the description, so the time stays whole) */
  @media (max-width: 359px) {
    .gig { grid-template-areas: "date date" "at tix" "blurb blurb" "cal cal" "more more"; }
    .g-cal { justify-self: start; margin-top: 4px; }
  }

  /* the portrait first, edge to edge, "About" on its band, then the words */
  .bio { grid-template-columns: 1fr; grid-template-rows: none; gap: 16px; }
  .bio h2, .bio-text, .bio-pic { grid-column: 1; grid-row: auto; }
  .bio-pic { order: -1; margin: 0 calc(-1 * var(--m)); }
  .bio h2:has(~ .bio-pic) { margin: calc(-1lh - 32px - 16px) calc(-1 * var(--m)) 0; }

  .show { height: auto; aspect-ratio: 5 / 4; }
  .show-words { gap: 12px; }

  .email { font-size: calc((100vw - 2 * var(--m)) / 12.4); }   /* the whole address across the screen (it is 12.05em wide) */
  .foot { grid-template-columns: 1fr; gap: 8px; }
  .foot > span:last-child { justify-self: start; }
}

/* the calendar links: following the feeds at the end of the gig list, tapped open to all
   gigs or London's only (round 42, pick 10), and one gig's on its own line under its
   description (round 41, pick 4) */
.cal-end { margin-top: 28px; }
.cal-end summary, .past summary { display: inline; list-style: none; cursor: pointer; }
.cal-end summary::-webkit-details-marker, .past summary::-webkit-details-marker { display: none; }
.cal-end p { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 10px; }
/* the gigs that have happened, folded behind "Past gigs" under the list (round 53, pick 3):
   a small link like the one above it, opening to quiet rows in the list's own columns */
.past { margin-top: 14px; }
.past-list {
  list-style: none; padding: 0; margin-top: 14px; color: var(--muted);
  display: grid; grid-template-columns: minmax(calc(var(--step-lead) * 5.4), max-content) minmax(0, 1fr); column-gap: calc(var(--step-lead) * 0.4);   /* the date column as wide as the list's, or a date with its year */
}
.past-list li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; padding: 12px 0; }
.past-list li + li { border-top: 1px solid var(--field); }
.past-list time { font: 600 var(--step-lead)/1.15 var(--font-display); font-variant-numeric: lining-nums; white-space: nowrap; }
.past-at { font: var(--wd) var(--step-lead)/1.15 var(--font-display); }
@media (max-width: 760px) {
  .past-list { grid-template-columns: minmax(6.4em, max-content) minmax(0, 1fr); }
  .past-list li { padding: 10px 0; }
  .past-list time { font: 400 var(--step-small)/1.4 var(--font); }
}
.cal, .ac summary, .ac-links a { font-size: var(--step-small); color: var(--muted); text-decoration: underline; text-decoration-color: var(--link); }
.cal:hover, .ac summary:hover, .ac-links a:hover { color: var(--ink); }
/* one gig's "Add to calendar" (round 45, pick 8): a small menu under it of the four
   choices and Close; on phones a sheet from the bottom of the screen */
.ac { position: relative; }
.ac summary { list-style: none; cursor: pointer; }
.ac summary::-webkit-details-marker { display: none; }
.ac-links { position: absolute; z-index: 5; left: 0; top: 100%; display: grid; justify-items: start; gap: 8px; margin-top: 8px; padding: 14px 18px; background: var(--field); min-width: 14em; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.ac-close { display: block; margin-top: 6px; font: inherit; font-size: var(--step-small); color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; }
/* (the open menu hangs outside its gig) */
@media (max-width: 760px) {
  .ac-links { position: fixed; left: 0; right: 0; top: auto; bottom: 0; margin: 0; padding: 20px var(--m) 28px; gap: 0; }
  .ac-links a, .ac-close { display: block; width: 100%; text-align: left; padding: 12px 0; min-height: 48px; font-size: var(--step-body); color: var(--ink); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
  .ac-close { text-align: center; border: 0; margin-top: 8px; color: var(--muted); }
}

/* ---- the press page (/press/): one page for promoters --------------------------------
   The name, words and email held at the left while the rest scrolls on the right (round
   39, pick 6): About, the photos to download at full size, Joyful, the gigs, the booking
   line. On a phone it all stacks. The button prints it, or saves it as a PDF. */

.press { padding: 48px var(--m) var(--gap); display: grid; grid-template-columns: 4fr 8fr; column-gap: clamp(32px, 4vw, 64px); align-items: start; }
.pk-open { position: sticky; top: 48px; display: grid; gap: 8px; justify-items: start; }
.pk-open h1 { font-size: var(--step-head); font-family: var(--font-display); font-weight: var(--wd); line-height: 1; margin-bottom: 16px; }
.pk-tag { font-size: var(--step-lead); }
.pk-intro { color: var(--muted); max-width: 40ch; }
.pk-mail { margin-top: 16px; }
.pk-mail a { color: var(--accent); text-decoration: none; white-space: nowrap; }
.pk-mail a:hover { color: var(--ink); }
.pk-print { margin-top: 16px; }
html:not(.js) .pk-print { display: none; }
.pk-printbtn { font: 600 var(--step-small) var(--font); min-height: 44px; padding: 0 20px; border: 0; background: var(--field); color: var(--ink); cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.pk-printbtn:hover { background: var(--accent); color: var(--accent-ink); }
.pk-rest { display: flex; flex-direction: column; gap: clamp(64px, 8vw, 128px); min-width: 0; }
.pk-sec > h2 { font-size: var(--step-lead); font-family: var(--font-display); font-weight: var(--wd); line-height: 1.2; margin-bottom: 16px; }
.pk-body { display: grid; gap: 1em; align-content: start; }
.pk-about .pk-body { font-size: 1rem; line-height: 1.6; max-width: 70ch; }
.pk-lineup { margin: 0.5em 0 0; display: grid; gap: 4px; }
.pk-lineup div { display: grid; grid-template-columns: 9em 1fr; gap: 16px; }
.pk-lineup dt { color: var(--muted); }
.pk-lineup dd { margin: 0; }
.press .show { height: auto; aspect-ratio: 5 / 4; width: 100%; }
.press .show-words h3 { font-size: calc(var(--step-lead) * 1.5); font-family: var(--font-display); font-weight: var(--wd); line-height: 1; }
.press .show-words { padding: 14px 20px; }
.press .show-at { font-size: var(--step-small); }
.press .show-play::before { width: 64px; height: 64px; }
.pk-yt { font-size: var(--step-small); color: var(--muted); }
.pk-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 28px 12px; align-items: end; }   /* shapes differ: the download links line up */
.pk-grid li { display: grid; gap: 6px; align-content: start; font-size: var(--step-small); }
.pk-thumb img { width: 100%; height: auto; transition: opacity 0.2s; }   /* each photo whole, in its own shape */
.pk-thumb:hover img { opacity: 0.85; }
/* Credits: the quote, then one plain fact a line, the place stressed */
.pk-quote .q, .cr-quote .q { font-family: var(--font-display); font-size: var(--step-lead); line-height: 1.2; }
.pk-quote .q-by, .cr-quote .q-by { font-size: var(--step-small); color: var(--muted); white-space: nowrap; }
.pk-quote a, .cr-quote a { text-decoration-color: var(--link); }
.pk-crlist { list-style: none; padding: 0; display: grid; gap: 6px; font-size: 1rem; line-height: 1.5; max-width: 70ch; }
.pk-dl { color: var(--muted); text-decoration-color: var(--link); }
.pk-dl:hover { color: var(--ink); }
.pk-gigs { list-style: none; padding: 0; display: grid; gap: 14px; }
.pk-gigs li { display: grid; grid-template-columns: 7em 1fr auto; column-gap: 16px; align-items: baseline; }
.pk-gigs time { font-family: var(--font-display); font-weight: 600; font-size: var(--step-lead); font-variant-numeric: lining-nums; line-height: 1.15; }
.pk-at { font-family: var(--font-display); font-size: var(--step-lead); line-height: 1.15; }
.pk-when { font-size: var(--step-small); color: var(--muted); }
.pk-blurb { grid-column: 2 / -1; font-size: var(--step-small); color: var(--muted); max-width: 60ch; }
.pk-email { color: var(--accent); text-decoration: none; font-size: var(--step-lead); white-space: nowrap; justify-self: start; }
.pk-email:hover { color: var(--ink); }
.pk-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: var(--step-small); font-weight: 600; }

@media (max-width: 760px) {
  .press { display: flex; flex-direction: column; gap: clamp(56px, 7vw, 112px); }
  .pk-open { position: static; }
  .pk-rest { gap: inherit; }
  .pk-grid { grid-template-columns: 1fr 1fr; gap: 20px 8px; }
  .pk-lineup div { grid-template-columns: 7.5em 1fr; gap: 8px; }
  .pk-gigs li { grid-template-columns: 5.6em 1fr; }
  .pk-when { grid-column: 2; }
}

/* printed, or saved as a PDF: a one-sheet on one A4 or Letter page, black on white. The
   name and tagline as a header with the email and site at the right; About with the
   line-up beside it; Credits, the quote then the list in two columns; three photos
   the same size, with no captions; Contact with the social addresses written out. No bar, footer, dev bar, button, video or gigs. Nothing forces a page
   break: blocks just keep together, so a longer bio flows to a second page cleanly. */
.pk-printed { display: none; }
@media print {
  @page { margin: 14mm 16mm; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  body { font-size: 10pt; line-height: 1.45; letter-spacing: 0; }
  .bar, .foot, [class^="dev"], .pk-print, .pk-watch, .pk-dates { display: none !important; }
  .pk-printed { display: block; }
  a { text-decoration: none; }
  .press { display: block; padding: 0; }

  .pk-open { position: static; grid-template-columns: 1fr auto; gap: 2pt 24pt; align-items: baseline; padding-bottom: 10pt; margin-bottom: 10pt; border-bottom: 0.75pt solid var(--ink); }
  .pk-open > * { grid-column: 1; }
  .pk-open h1 { font-size: 32pt; margin: 0; }
  .pk-tag { font-size: 13pt; }
  .pk-intro { max-width: none; font-size: 10pt; }
  .pk-open .pk-mail, .pk-web { grid-column: 2; justify-self: end; margin: 0; }
  .pk-open .pk-mail { grid-row: 2; font-size: 13pt; font-weight: 600; }
  .pk-mail a { color: var(--ink); }
  .pk-web { grid-row: 3; color: var(--muted); }

  .pk-rest { display: block; }
  .pk-sec { break-inside: avoid; }
  .pk-sec + .pk-sec { margin-top: 12pt; }
  .pk-sec > h2 { font-size: 14pt; margin-bottom: 6pt; break-after: avoid; }
  .pk-about .pk-body { grid-template-columns: 1fr 17em; gap: 0.8em 24pt; font-size: 10pt; line-height: 1.5; max-width: none; }
  .pk-about .pk-body > * { grid-column: 1; }
  .pk-about .pk-body > .pk-lineup { grid-column: 2; grid-row: 1 / span 2; align-self: start; margin: 0; gap: 7pt; padding-left: 12pt; border-left: 0.75pt solid var(--muted); }
  .pk-lineup div { grid-template-columns: 1fr; gap: 0; break-inside: avoid; }
  .pk-lineup dt { font-size: 8pt; }

  .pk-quote .q { font-size: 13pt; }
  .pk-quote .q-by { font-size: 9pt; }
  .pk-credits .pk-body { gap: 4pt; }
  .pk-crlist { display: block; columns: 2; column-gap: 24pt; max-width: none; font-size: 9pt; line-height: 1.4; }
  .pk-crlist li { break-inside: avoid; margin-bottom: 2pt; }

  /* the first three, whole, at one height */
  .pk-grid { display: flex; gap: 8pt; align-items: end; }
  .pk-grid img { width: auto; height: 1.7in; }
  .pk-grid li:nth-child(n+4) { display: none; }
  .pk-grid li { font-size: 8pt; gap: 3pt; }
  .pk-dl { display: none; }
  .pk-full { margin-top: 6pt; font-size: 8pt; color: var(--muted); }

  .pk-contact { padding-top: 10pt; border-top: 0.75pt solid var(--ink); }
  .pk-contact .pk-body { gap: 2pt; }
  .pk-email { font-size: 13pt; font-weight: 600; color: var(--ink); }
  .pk-links { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 4pt 32pt; margin-top: 6pt; font-size: 9pt; }
  .pk-links a::after { content: attr(data-addr); display: block; font-weight: 400; color: var(--muted); }
}

/* the link to the press page, at the end of About */
.press-link { grid-column: 7 / 13; justify-self: start; font-weight: 600; }
.press-link a { text-decoration: underline; text-decoration-color: var(--link); }
.press-link a:hover, .ac summary:hover { text-decoration-color: var(--ink); }
@media (max-width: 760px) { .press-link { grid-column: 1; } }

/* the credits on the home page (round 44, pick 8): a quiet strip between the opening and
   Joyful, the quote and then the stages in a row (the quote's type is with the press
   page's, above); centred, so the names are spaced rather than dotted: a dot could start
   a line */
.cr-strip { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 0 var(--m) clamp(40px, 5vw, 72px); }
.cr-names { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; font-size: var(--step-small); color: var(--muted); }