/* =====================================================================
   PRESSKIT BASE: what every page loads. Reset, type, layout, and the
   components a public view needs: name, button, link tile, tag, card,
   spec list, footer, badge, app bar. Forms, notices and tables live in
   app.css, which public views do not load.

   Mobile first, no framework, no build step. Every class is pk-*.
   Needs tokens.css and fonts.css before it.

   One loud thing per page: the name (.pk-name), set like the top line of
   a club poster, flush left, as wide as the page allows. Everything else
   stays quiet. The accent marks what can be pressed, nothing decorative.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; -webkit-tap-highlight-color: transparent; }

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
body {
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100dvh;
  background: var(--bg); color: var(--white);
  font: 400 var(--fs-body)/1.5 var(--font-body);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
/* Above the grain, which tokens.css paints at z-index 0. */
body > * { position: relative; z-index: 1; }

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
ul[class], ol[class] { list-style: none; padding: 0; }

/* :where() keeps these at zero specificity, so no component has to fight
   the base link colour. */
:where(a) { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
@media (hover: hover) { :where(a:hover) { color: var(--accent-hover); } }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 1px; }
::selection { background: var(--accent); color: var(--on-accent); }

.pk-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.pk-skip {
  position: absolute; left: var(--gutter); top: -4rem; z-index: 10;
  padding: var(--s-3) var(--s-4); background: var(--accent); color: var(--on-accent);
  font: 400 var(--fs-meta)/1 var(--font-mono); text-decoration: none; border-radius: var(--radius);
}
.pk-skip:focus { top: var(--s-3); }


/* ---- Layout ------------------------------------------------------- */

.pk-wrap {
  width: 100%; max-width: var(--wrap-narrow); margin-inline: auto;
  padding-left:  max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.pk-wrap--wide { max-width: var(--wrap-wide); }

.pk-main { flex: 1 0 auto; padding-block: var(--s-6) var(--s-8); }

/* Vertical rhythm. Set --flow on the parent to change the step. */
.pk-stack > * + * { margin-top: var(--flow, var(--s-4)); }

.pk-section { margin-top: var(--s-7); }
.pk-section__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  padding-bottom: var(--s-2); margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--rule);
}


/* ---- Type --------------------------------------------------------- */

/* The name. The size is fitted to the longest word: data-c carries its
   length (3 to 22, set by the display_name macro), and 0.44em is the room
   one Bebas Neue capital needs (measured mean advance 0.389em, typical
   names 0.34 to 0.43). So "ŻÓŁĆ" and "SCHWARZENBERGER" both fill the line.
   A data attribute, not an inline style: it survives a strict CSP.
   line-height 0.95 leaves room for Ż Ć Ğ İ above and Ç Ş Ą below. */
.pk-name {
  --c: 8;
  container-type: inline-size;
  font-size: 1rem; font-weight: 400; padding-top: 0.1em;
}
.pk-name__fit {
  display: block;
  font-family: var(--font-display); line-height: 0.95; letter-spacing: 0.01em;
  text-wrap: balance; overflow-wrap: anywhere;
  font-size: clamp(2.75rem, calc((100vw - 2.5rem) / (var(--c) * 0.44)), var(--name-max, 10rem));
}
@supports (width: 1cqw) {
  .pk-name__fit { font-size: clamp(2.75rem, calc(100cqw / (var(--c) * 0.44)), var(--name-max, 10rem)); }
}
.pk-name[data-c="3"]{--c:3}   .pk-name[data-c="4"]{--c:4}   .pk-name[data-c="5"]{--c:5}
.pk-name[data-c="6"]{--c:6}   .pk-name[data-c="7"]{--c:7}   .pk-name[data-c="8"]{--c:8}
.pk-name[data-c="9"]{--c:9}   .pk-name[data-c="10"]{--c:10} .pk-name[data-c="11"]{--c:11}
.pk-name[data-c="12"]{--c:12} .pk-name[data-c="13"]{--c:13} .pk-name[data-c="14"]{--c:14}
.pk-name[data-c="15"]{--c:15} .pk-name[data-c="16"]{--c:16} .pk-name[data-c="17"]{--c:17}
.pk-name[data-c="18"]{--c:18} .pk-name[data-c="19"]{--c:19} .pk-name[data-c="20"]{--c:20}
.pk-name[data-c="21"]{--c:21} .pk-name[data-c="22"]{--c:22}

.pk-h1 { font: 400 var(--fs-h1)/0.95 var(--font-display); letter-spacing: 0.01em; }
.pk-h2 { font: 400 var(--fs-h2)/1 var(--font-display); letter-spacing: 0.02em; }
.pk-h3 { font: 600 var(--fs-h3)/1.2 var(--font-body); letter-spacing: 0.01em; }

.pk-lead  { max-width: 34rem; font-size: var(--fs-lead); line-height: 1.4; color: var(--light); }
/* Long bio. 34rem is about 75 characters of Barlow Condensed. */
.pk-prose { max-width: 34rem; color: var(--light); }
.pk-prose > * + * { margin-top: 1em; }
.pk-prose--plain { white-space: pre-line; }   /* plain text with the DJ's own line breaks */

.pk-label { font: 400 var(--fs-label)/1.4 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
/* Handles, cities, years. Never uppercased: "@elkolbo_" is a handle, not a label. */
.pk-meta  { font: 400 var(--fs-meta)/1.5 var(--font-mono); color: var(--mid); }
.pk-muted { color: var(--mid); }


/* ---- Icon --------------------------------------------------------- */

.pk-icon { display: inline-grid; place-items: center; flex: none; width: 1.25rem; height: 1.25rem; }
.pk-icon svg { width: 100%; height: 100%; }


/* ---- Button ------------------------------------------------------- */

.pk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap); padding: 0 var(--s-5);
  font: 400 var(--fs-meta)/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; text-align: center; cursor: pointer;
  color: var(--on-accent); background: var(--accent);
  border: 1px solid transparent; border-radius: var(--radius);
  transition: background-color 0.15s, border-color 0.15s;
}
.pk-btn:active { transform: translateY(1px); }
.pk-btn--block { display: flex; width: 100%; }
.pk-btn--ghost  { color: var(--white);  background: transparent; border-color: var(--hi-border); }
.pk-btn--danger { color: var(--danger); background: transparent; border-color: currentColor; }
.pk-btn[disabled], .pk-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
@media (hover: hover) {
  .pk-btn:hover { color: var(--on-accent); background: var(--accent-hover); }
  .pk-btn--ghost:hover  { color: var(--white);  background: var(--hi); border-color: var(--accent); }
  .pk-btn--danger:hover { color: var(--danger); background: var(--hi); }
  .pk-btn[disabled]:hover, .pk-btn[aria-disabled="true"]:hover { background: var(--accent); }
  .pk-btn--ghost[disabled]:hover { background: transparent; border-color: var(--hi-border); }
}


/* ---- Link tile ------------------------------------------------------
   From .social-link on homepage/public/about.html:195-212: cells divided
   by --rule, icon dimmed until hover. Grown to a 56px touch row, and the
   text is not uppercased mono any more because it carries handles.
   The 1px gaps show the list's --rule background: dividers that survive
   wrapping, with no border bookkeeping. */
.pk-links {
  display: grid; gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); overflow: hidden;
}
/* Columns: icon, title, handle. The title is never squeezed below its
   longest word ("Bandca-mp" next to a complete URL is the wrong trade), a
   long title wraps between words, and the handle keeps 4.5rem for an
   ellipsis that still says something. Without a handle the title runs on. */
.pk-link {
  display: grid; grid-template-columns: 3.5rem auto minmax(4.5rem, 1fr); align-items: center;
  min-height: 3.5rem; height: 100%;
  color: var(--white); background: var(--bg2); text-decoration: none;
  transition: background-color 0.15s;
}
.pk-link:focus-visible { outline-offset: -3px; }
.pk-link__icon {
  display: grid; place-items: center; align-self: stretch;
  border-right: 1px solid var(--rule); color: var(--mid);
  transition: color 0.15s;
}
.pk-link__title  { padding: var(--s-3) var(--s-4); font: 600 var(--fs-lead)/1.2 var(--font-body); letter-spacing: 0.01em; }
.pk-link__title:last-child { grid-column: 2 / -1; }
.pk-link__handle {
  justify-self: end; max-width: 100%; padding-right: var(--s-4);
  font: 400 var(--fs-meta)/1.2 var(--font-mono); color: var(--dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The one link a view wants pressed first, e.g. "Booking & Presskit".
   The tint is a layer over --bg2, so the tile stays opaque. */
.pk-link--feature { background: linear-gradient(var(--accent-tint), var(--accent-tint)), var(--bg2); }
.pk-link--feature .pk-link__icon { color: var(--accent); border-right-color: var(--accent-line); }
@media (hover: hover) {
  .pk-link:hover { color: var(--white); background: var(--bg3); }
  .pk-link:hover .pk-link__icon { color: var(--accent); }
  .pk-link--feature:hover { background: linear-gradient(var(--accent-tint), var(--accent-tint)), var(--bg3); }
}

/* The compact row, the homepage shape: for the platform links in the
   head of the booking view. Cells share the width and wrap on a phone. */
.pk-links--strip { display: flex; flex-wrap: wrap; }
.pk-links--strip > li { flex: 1 1 8.5rem; }
.pk-links--strip .pk-link {
  display: flex; justify-content: center; gap: var(--s-2);
  min-height: var(--tap); padding-inline: var(--s-4);
}
.pk-links--strip .pk-link__icon  { align-self: center; border-right: 0; }
.pk-links--strip .pk-link__icon svg { width: 1rem; height: 1rem; }
.pk-links--strip .pk-link__title {
  padding: 0; font: 400 var(--fs-label)/1 var(--font-mono);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--light);
}
.pk-links--strip .pk-link__handle { display: none; }


/* ---- Tag, card, spec list ----------------------------------------- */

.pk-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pk-tag {
  display: inline-block; padding: 0.4rem 0.6rem;
  font: 400 var(--fs-label)/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--light); border: 1px solid var(--hi-border); border-radius: var(--radius);
}

.pk-card {
  padding: var(--s-5);
  background: var(--bg2); border: 1px solid var(--rule); border-radius: var(--radius-lg);
}
.pk-card--flush { padding: 0; overflow: hidden; }   /* embeds and photos run to the edge */

/* Label and value in ruled rows: tech rider, played-at, contact. */
.pk-spec {
  display: grid; grid-template-columns: minmax(6.5rem, max-content) minmax(0, 1fr);
  border-top: 1px solid var(--rule);
}
.pk-spec > dt, .pk-spec > dd { padding-block: var(--s-3); border-bottom: 1px solid var(--rule); }
.pk-spec > dt {
  padding-top: calc(var(--s-3) + 0.4em); padding-right: var(--s-5);
  font: 400 var(--fs-label)/1.4 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
}


/* ---- App bar (app pages only, a presskit has no KRATEO header) ------ */

.pk-appbar { border-bottom: 1px solid var(--rule); }
.pk-appbar__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 3.5rem; }
/* One line next to the wordmark down to 360px, below that under it. */
.pk-appbar__row { flex-wrap: wrap; }
.pk-appbar .pk-btn { white-space: nowrap; }
@media (max-width: 29.99rem) {
  .pk-appbar__row { column-gap: var(--s-3); }
  .pk-appbar .pk-btn { padding-inline: var(--s-3); letter-spacing: 0.06em; }
}
/* The wordmark pattern of homepage/public/header-footer.css:99-108:
   KRATEO never changes, the product follows in the product's colour. */
.pk-mark {
  display: inline-flex; align-items: center; gap: 0.28em; min-height: var(--tap);
  font: 400 1.375rem/1 var(--font-display); letter-spacing: 0.12em; white-space: nowrap;
  color: var(--white); text-decoration: none;
}
.pk-mark span { color: var(--accent); }
@media (hover: hover) { .pk-mark:hover { color: var(--white); } }


/* ---- Footer and badge --------------------------------------------- */

.pk-footer {
  flex: none; border-top: 1px solid var(--rule);
  padding-block: var(--s-4) calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
}
.pk-footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--s-6); }
.pk-footer__legal { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); }
.pk-footer__legal a {
  display: inline-flex; align-items: center; min-height: var(--tap);
  font: 400 var(--fs-label)/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mid); text-decoration: underline; text-decoration-color: #444; text-underline-offset: 0.4em;
}
@media (hover: hover) { .pk-footer__legal a:hover { color: var(--white); text-decoration-color: var(--accent); } }

/* The disc is the KRATEO mark and stays amber: the one place the umbrella
   brand's colour appears on a presskit. */
.pk-badge {
  display: inline-flex; align-items: center; gap: 0.55rem; min-height: var(--tap);
  color: var(--dim); text-decoration: none;
}
.pk-badge__disc { flex: none; width: 1.375rem; height: 1.375rem; }
.pk-badge__made { font: 400 var(--fs-label)/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.pk-badge__mark { font: 400 1.25rem/1 var(--font-display); letter-spacing: 0.12em; color: var(--white); }
@media (hover: hover) { .pk-badge:hover { color: var(--light); } }


/* ---- Wider than a phone ------------------------------------------- */

@media (min-width: 48rem) {
  :root { --gutter: 2rem; }
  .pk-main { padding-top: var(--s-7); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}