/* ==========================================================================
   THE PRESS KIT'S OWN RULES — the Press page and the downloadable press kit
   (owner, 28–29 Oct). The Press page loads this file on that page only
   (routes/press.jsx); scripts/press-kit.js puts it inside the kit, after
   style.css and additions.css, as on the site.
   ========================================================================== */
:root { --mast: 76px; --gap: clamp(.9rem, 1.4vw, 1.4rem); }   /* --mast: the masthead's height, measured by the page */

/* The title across the top, then the kit. */
.pk-layout {
  position: relative; z-index: 10;
  max-width: 1600px; margin-inline: auto;
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2.5rem);
}
.pk-layout .deck { max-width: none; margin: 0; padding: 0; }
.pk-layout .pk-top { margin-bottom: var(--gap); }                  /* the same gap as between the boxes */

/* The title, with Print / Save as PDF at the top right. */
.pk-head { max-width: none; margin: 0; padding: 0 0 clamp(1.4rem, 3vw, 2.4rem);
           display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.5rem; }
.pk-head > p { flex-basis: 100%; max-width: none; margin-top: 0; }   /* always a line of its own, under the title */
.pk-tools { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
.pk-tools .action { margin-top: 0; }
.pk-tools [hidden] { display: none; }

/* "Print / Save as PDF" opens two choices (owner, 29 Oct), in a box like
   the player's "Up next" list. */
.pk-print-menu { position: relative; z-index: 40; }
.pk-head { z-index: 11; }        /* the menu opens over the boxes (both were layer 10; the boxes came later and covered it) */
.pk-print-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .5rem; }
.pk-print-menu > summary::-webkit-details-marker { display: none; }
.pk-print-menu > summary svg { width: 13px; height: 13px; }
.pk-print-menu[open] > summary svg { transform: rotate(180deg); }
.pk-menu {
  position: absolute; top: calc(100% + .5rem); right: 0;
  width: max-content; min-width: 100%; padding: .45rem; display: grid; gap: .15rem;
  border-radius: 14px; background: rgb(28, 24, 21);             /* solid: buttons sit right under it on phones */
  border: 1px solid var(--glass-brd-hi); box-shadow: 0 22px 48px -18px rgba(0, 0, 0, .9);
}
.pk-menu__item {
  display: grid; gap: .1rem; padding: .6rem .8rem; border: 0; border-radius: 10px; background: none;
  font: inherit; text-align: left; text-decoration: none; color: var(--ink); cursor: pointer;
}
.pk-menu__item:hover, .pk-menu__item:focus-visible { background: rgba(127, 42, 101, .24); }
.pk-menu__note { font-family: var(--mono); font-size: 10.5px; color: var(--ink-mid); }

/* THE TOP ROW: the latest song, the press photos, the bio over the quick
   facts — three boxes, the same top and the same height (owner, 29 Oct:
   the song "equal with the press photo"). The song's box keeps the side
   column's width; the photo box and the bio keep theirs. */
.pk-top { grid-template-columns: clamp(240px, 20vw, 290px) minmax(0, 7fr) minmax(0, 5fr); grid-auto-rows: auto;
          grid-template-areas: "release photos bio" "release photos facts"; }
.pk-top--nophotos { grid-template-areas: "release bio bio" "release facts facts"; }
.pk-top--norelease { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "photos bio" "photos facts"; }
.pk-top--norelease.pk-top--nophotos { grid-template-columns: minmax(0, 1fr); grid-template-areas: "bio" "facts"; }
.pk-top > .pk-release { grid-area: release; }
.pk-top > .pk-photos-panel { grid-area: photos; }
.pk-top > .pk-bio { grid-area: bio; }
.pk-top > .pk-facts { grid-area: facts; }
.pk-top > .panel, .pk-deck > .panel { scroll-margin-top: calc(var(--mast) + 1rem); }
/* In the narrow column: the platforms at the box's foot, two to a row, so
   the logos read bigger. */
@media (min-width: 1101px) {
  .pk-top > .pk-release .panel__body { grid-template-rows: auto auto 1fr; }
  .pk-top > .pk-release .open-in { align-self: end; }
  .pk-top > .pk-release .platforms { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; }
  .pk-top > .pk-release .platform { min-height: 34px; }
  .pk-top > .pk-release .platform img { height: 16px; }
}
/* The cover frame small, the name beside it, everything else under them.
   Wider than 560px (tablets), the cover stands on the left of it all. */
.pk-release { container: pk-release / inline-size; }
.pk-release .panel__body {
  display: grid; grid-template-columns: minmax(80px, 40%) minmax(0, 1fr);
  grid-template-areas: "cover words" "spec spec" "links links";
  align-content: start; gap: 1.05rem .9rem;
}
.pk-release .cover { grid-area: cover; width: 100%; margin: 0; transform: none; align-self: start; }
.pk-release__words { grid-area: words; align-self: center; display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.pk-release .hero__title { font-size: clamp(1.05rem, .45vw + .85rem, 1.3rem); }
.pk-release .spec { grid-area: spec; margin-top: 0; gap: .6rem 1.2rem; }
.pk-release .open-in { grid-area: links; }
.pk-release .platforms { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: .4rem; }
.pk-release .platform { min-height: 38px; padding: 0 .4rem; border-radius: 9px; }
.pk-release .platform img { height: 14px; max-width: 100%; object-fit: contain; }
@container pk-release (min-width: 560px) {
  .pk-release .panel__body { grid-template-columns: 200px minmax(0, 1fr); align-content: center; column-gap: 1.6rem;
                             grid-template-areas: "cover words" "cover spec" "cover links"; }
  .pk-release__words { align-self: end; }
  .pk-release .hero__title { font-size: clamp(1.7rem, 1.6vw + 1rem, 2.6rem); }
  .pk-release .spec { gap: .7rem 1.4rem; }
  .pk-release .platforms { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: .45rem; }
  .pk-release .platform { min-height: 40px; padding: 0 .6rem; border-radius: 10px; }
  .pk-release .platform img { height: 16px; }
}

/* THE REST, across the whole width: rows of three, then two. */
.pk-deck { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.pk-deck > .pk-half { grid-column: span 6; }
.pk-deck > .pk-third { grid-column: span 4; }

/* Each box's number, in the Muscadine tint. */
.pk-n { color: var(--muscadine-lt); letter-spacing: .04em; }

/* Small round buttons with a word (the site's .ctl--label): Copy, Save. */
.pk-copy, .pk-save { height: 28px; gap: .35rem; font-size: 11.5px; padding: 0 .75rem 0 .6rem; }
.pk-copy svg, .pk-save svg { width: 13px; height: 13px; }

/* Bio: each one ready to copy. */
.pk-label { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.pk-label:not(:first-child) { margin-top: 1.1rem; }
.prose .pk-label + p { margin-top: .35rem; }

/* Quick facts two by two, all four in a row when the box is wide. */
.pk-facts { container: pk-facts / inline-size; }
.pk-facts .spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.4rem; margin-top: 0; }
@container pk-facts (min-width: 820px) { .pk-facts .spec { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* PRESS PHOTOS: every photo in its own shape, never cropped or stretched.
   A row's photos share one height (flex-grow = width ÷ height), and the row
   breaks come from rowStarts, for the width the photo box has. */
.pk-shelf { container: pk-shelf / inline-size; }
.pk-photos-panel .pk-shelf { margin-block: auto; }       /* any height left over in the box: half above the photos, half below */
.pk-photos { --g: clamp(.6rem, 1vw, .9rem); display: flex; flex-wrap: wrap; align-items: flex-start;
             column-gap: var(--g); row-gap: calc(var(--g) / 2); }   /* each break is a line of its own: half above it, half below */
.pk-photo { container: pk-photo / inline-size; flex: var(--r) 1 0; min-width: 0; max-width: calc(var(--r) * 34rem);
            display: flex; flex-direction: column; gap: .4rem; }
.pk-photo__frame { position: relative; }
.pk-photo__open { display: block; width: 100%; padding: 0; border-radius: 8px; line-height: 0; cursor: zoom-in; }
.pk-photo img { display: block; width: 100%; height: auto; border-radius: 8px;
                border: 1px solid rgba(244, 240, 235, .12); background: var(--char-deep); }
.pk-photo__open:hover img { border-color: var(--muscadine-lt); }
/* "Save" sits on the photo's corner, so the captions stay short. */
.pk-photo .pk-save { position: absolute; right: .4rem; bottom: .4rem; color: var(--cotton);
                     background: rgba(20, 17, 15, .72); border-color: rgba(244, 240, 235, .3);
                     -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pk-photo .pk-save:hover { color: var(--cotton); background: rgba(20, 17, 15, .86); border-color: var(--muscadine-lt); }
.pk-photo figcaption span { white-space: nowrap; }
.pk-photo__n { color: var(--muscadine-lt); }
/* A narrow photo keeps its number and size (pixels are in the viewer),
   and its Save is the arrow alone. */
@container pk-photo (max-width: 179.98px) { .pk-photo__px { display: none; } }
@container pk-photo (max-width: 139.98px) {
  .pk-photo .pk-save { width: 28px; padding: 0; justify-content: center; gap: 0; }
  .pk-save__word { display: none; }
}
/* "Save all": one ZIP of every photo, at the foot of the box. */
.pk-all { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.pk-all .action { margin-top: 0; display: inline-flex; align-items: center; gap: .45rem; }
.pk-all .action svg { width: 14px; height: 14px; }
.pk-all .action:disabled { opacity: .7; cursor: progress; }
.pk-br { display: none; flex-basis: 100%; height: 0; }
.pk-br--wide { display: block; }                                    /* also where container sizes aren't known */
@container pk-shelf (max-width: 719.98px) { .pk-br--wide { display: none; } .pk-br--box { display: block; } }
@container pk-shelf (max-width: 359.98px) {
  .pk-br--box { display: none; }
  .pk-photos { row-gap: var(--g); }
  .pk-photo { flex-basis: 100%; max-width: none; }                  /* one under another */
}

/* THE PHOTO VIEWER: one photo as big as the window allows, over the dark
   page (never Sorghum: these are photos of the artist). */
.pk-viewer { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
             margin: 0; padding: 0; border: 0; overflow: hidden; background: rgba(20, 17, 15, .94); color: var(--ink); }
.pk-viewer[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.pk-viewer::backdrop { background: rgba(10, 8, 7, .55); }
.pk-viewer__stage { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center;
                    padding: clamp(.8rem, 3vw, 2.2rem); touch-action: pan-y pinch-zoom; }
.pk-viewer__stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 10px; cursor: pointer;
                        border: 1px solid rgba(244, 240, 235, .14); box-shadow: 0 30px 80px -30px #000; }
.pk-viewer__bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem;
                  padding: .75rem clamp(1rem, 3vw, 2.2rem) 1rem; border-top: 1px solid var(--glass-brd); background: rgba(28, 24, 21, .72); }
.pk-viewer__count { color: var(--ink); }
.pk-viewer__go { display: flex; align-items: center; gap: .45rem; margin-left: auto; }
.pk-viewer__go .action { margin-top: 0; }
.pk-viewer .ctl { width: 38px; height: 38px; }
.pk-viewer .ctl svg { width: 16px; height: 16px; }
@media (hover: none) { .pk-viewer__keys { display: none; } }
html:has(.pk-viewer[open]) { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .pk-viewer[open] .pk-viewer__stage img { animation: pkShow .3s var(--ease); }
}
@keyframes pkShow { from { opacity: 0; transform: scale(.985); } }

.pk-made { flex-basis: 100%; order: 4; margin-top: .4rem; }
.pk-keep { white-space: nowrap; }
/* Words for the screen only, and for the PDF only (owner, 29 Oct). */
.pk-print { display: none; }

/* TABLETS: the song's box across the top, the photos and the bio under it. */
@media (max-width: 1100px) {
  .pk-top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "release release" "photos bio" "photos facts"; }
  .pk-top--nophotos { grid-template-areas: "release release" "bio bio" "facts facts"; }
  .pk-top--norelease { grid-template-areas: "photos bio" "photos facts"; }
  .pk-top--norelease.pk-top--nophotos { grid-template-columns: minmax(0, 1fr); grid-template-areas: "bio" "facts"; }
}
/* One column: the song, the photos, the bio, the quick facts, the rest. */
@media (max-width: 900px) {
  .pk-top { grid-template-columns: minmax(0, 1fr); grid-template-areas: "release" "photos" "bio" "facts"; }
  .pk-top--nophotos { grid-template-areas: "release" "bio" "facts"; }
  .pk-top--norelease { grid-template-columns: minmax(0, 1fr); grid-template-areas: "photos" "bio" "facts"; }
  .pk-top--norelease.pk-top--nophotos { grid-template-areas: "bio" "facts"; }
  .pk-deck { grid-template-columns: minmax(0, 1fr); }
  .pk-deck > .panel { grid-column: 1 / -1 !important; grid-row: auto !important; }
}
@media (max-width: 720px) {
  .pk-viewer__info { order: 3; flex-basis: 100%; }
}
/* Phones and small tablets (owner, 29 Oct): the line under the title first,
   then the buttons, with the Press page's spacing. (The buttons stop
   fitting beside the title under 764 px on the Press page, with three of
   them, and under 562 px in the kit, with two.) */
@media (max-width: 800px) {
  .pk-head > p { order: 1; }
  .pk-tools { order: 2; margin-left: 0; margin-top: .6rem; }
  .pk-menu { right: auto; left: 0; }                     /* the button sits on the left here */
}

/* PRINT / SAVE AS PDF: a still copy. The dark page stays (browsers leave
   backgrounds out of prints unless told), the scenery and the buttons go,
   the masthead keeps only the profile photo and the name (no page tabs, no
   clock), the footer goes (owner, 29 Oct: everything in it is in the kit;
   the page itself keeps both), and every page
   of the PDF gets the same space at its top and bottom. Each box stays whole
   on one page, one under another in the kit's order (plain blocks: boxes in
   a grid or flexbox came out overlapping or cut where a page broke). Page 1
   holds the title, the song and the photos, so those two are a little
   smaller on paper. */
@media print {
  @page { margin: 0; }
  *, *::before, *::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html, body { background: var(--char); }
  .atmosphere, .masthead__nav, .masthead__status, .pk-tools, .pk-copy, .pk-save, .pk-all, .pk-viewer, .footer { display: none !important; }
  .hp, .notice-slot, .tipbox { display: none !important; }      /* the site's music player and pop-ups (Press page) */
  .pk-screen { display: none; }
  .pk-print { display: inline; }
  .masthead { position: static; padding-block: .6rem; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .pagewrap { -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-block: 10mm; }
  .pk-layout { padding-top: 1.4rem; padding-bottom: 0; }
  .pk-head { padding-bottom: 1rem; }
  .pk-top, .pk-deck { display: block; }
  .pk-top > .panel, .pk-deck > .panel { margin-bottom: 14px; }
  .panel { animation: none !important; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; break-inside: avoid; }
  .pk-release .panel__body { grid-template-columns: 150px minmax(0, 1fr); }
  .pk-release .hero__title { font-size: 1.6rem; }
  /* Seven to a row on paper (29 Oct): with 13 platforms, two rows — six to
     a row made three, and pushed the photos off page 1. */
  .pk-release .platforms { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem; }
  .pk-release .platform { min-height: 34px; padding: 0 .35rem; }
  .pk-release .platform img { height: 14px; }
  .pk-photos-panel .pk-shelf { max-width: 600px; }
}