/* imgroot.nl — press-kit pages (EN/NL/IT). Generated from the former inline <style> blocks; edit here. */
/* ---- base ---- */

.field::placeholder{color:var(--c-lavender)}
.field:focus{outline:none;border-color:var(--c-gold) !important;box-shadow:0 0 0 3px rgba(219,173,114,0.35)}
.field option{color:var(--c-navy)}

.btn-solid{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.btn-solid:hover{color:#ffffff}

@media (prefers-reduced-motion: no-preference){
  @keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

  @keyframes marquee{to{transform:translateX(-50%)}}

}
@media (prefers-reduced-motion: reduce){

  .case:hover .case-img img,.reel:hover,.btn-solid:hover{transform:none}
}

@media (max-width: 760px){
  .nav-links{display:none !important}

}

.menu-btn{display:none !important}
.mm-link{transition:color .3s ease}
.mm-link:hover{color:var(--c-gold)}

.qdot[aria-current="true"] span{background:#fff;transform:scale(1.2)}

/* header v3: one menu bar for both sites */
.site-sw.is-dj .sw-thumb{grid-column:2}
.site-sw a[aria-current],.site-sw a[aria-current]:hover{color:var(--c-navy);font-weight:800}

.nav-links{justify-self:start}
.nav-links a{position:relative;padding:12px 0;white-space:nowrap}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;border-radius:2px;background:var(--c-gold);transform:scaleX(0);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.nav-links a[aria-current]::after{transform:scaleX(1)}
.hdr-sep,.mm-sep{width:1px;height:22px;background:rgba(255,255,255,0.2)}
.mm-lang{margin-left:auto;margin-right:-10px}
.mm-lang a{width:44px;font-size:13px}
.mm-link{display:flex !important;align-items:baseline;gap:14px}
@media (max-width: 1240px){
  
  .nav-links{gap:24px !important;font-size:14px !important}
  
  .hdr-cta{padding:0 16px !important;font-size:14px}
  
}
@media (max-width: 1060px){
  
  .menu-btn{display:inline-flex !important}
  
}

/* page accent: red from the cap in the hero photo */
.nav-links a::after{background:var(--c-red)}
.nav-links a:hover,.mm-link:hover,.hdr-lang a:hover,.mm-lang a:hover{color:var(--c-red)}
.mm-link[aria-current]{color:var(--c-red) !important}
.hdr-cta:hover,#mobile-menu .btn-solid:hover{color:#ffffff}
header.hdr-stuck{background:rgba(31,3,40,0.94) !important}
/* site switch: a colored dot per site, teal = Evert Groot, red = Absoluut */

/* corner radius scale: fully round = clickable (buttons, pill, chips) · 20px = content (cards, photos, tiles) · 12px = small UI (fields, menus; items 8px) */
:root{--acc:var(--c-red);--pop:#2c0739}

/* footer: name + socials on top, small legal row below */
/* page theme: aubergine & red (Absoluut) */
body{background:var(--c-aubergine)}
a:hover{color:var(--c-pink)}
.field::placeholder{color:#b98fc8}
.field:focus{border-color:var(--c-pink) !important;box-shadow:0 0 0 3px rgba(255,159,178,0.3)}
.field option{color:var(--c-aubergine)}
.mm-link:hover{color:var(--c-pink)}

.hdr-lang a,.mm-lang a{color:#b98fc8}
.site-sw a,.site-sw.sw-flip a[aria-current]{color:var(--c-lilac)}
.site-sw a[aria-current],.site-sw a[aria-current]:hover,.site-sw.sw-flip a:not([aria-current]){color:var(--c-aubergine)}
.ft2-sub,.ft2-bottom a{color:#efd3f6}
.ft2-bottom{color:#cba8d8}
footer.ft2 nav a:hover,footer.ft2 nav a:focus-visible{color:var(--c-pink)}

/* end page theme */
/* page theme: utilitarian press kit */
body{background:#ffffff}
#bio a:hover,#media a:hover,#rider a:hover{color:var(--c-red)}
#media,#rider{position:relative}
/* the only divider between sections: as wide as the text, like every other line on the page */
#media::before,#rider::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:calc(min(100%, 1360px) - 2 * clamp(20px, 4vw, 48px));height:1px;background:var(--c-line)}
.ft2-sub,.ft2-bottom a{color:#efd3f6}
.ft2-bottom{color:#cba8d8}
/* end page theme */

/* ---- base ---- */
/* PDF (built by GitHub, see .github/workflows/press-kit-pdf.yml): biography and technical rider on one A4 page */
.pdf-only{display:none}
@page{size:A4;margin:12mm 13mm}
@media print{
  header,#mobile-menu,footer,.skip,[data-lang-banner],.cta-fab,#media,[data-copy],#top .gut > p:not(.pdf-only),#top .gut > div,#rider > div > p:last-child,#rider::before,#media::before{display:none !important}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact;animation:none;transition:none}
  .rise{opacity:1;transform:none}
  html,body,body > div{background:#ffffff}
  a{text-decoration:none !important;color:inherit !important}
  .gut,#rider > div{padding-left:0;padding-right:0;max-width:none}

  /* header band */
  #top{padding:16px 20px;border-radius:10px}
  #top .gut{display:flex;align-items:center;justify-content:flex-start;gap:16px}
  #top h1{font-size:26px;line-height:1;margin:0}
  /* light pink instead of red on the dark band, so the title stays clear on a black-and-white print */
  #top h1 span{color:var(--c-pink)}
  /* the Absoluut pill from the site switch in the header */
  .pdf-name{order:-1;display:inline-flex;align-items:center;height:32px;margin:0;padding:0 14px;border-radius:999px;background:#ffffff;font-family:'Baloo Bhai 2',sans-serif;font-size:15px;font-weight:700;line-height:1;letter-spacing:-0.01em;color:var(--c-aubergine);white-space:nowrap}
  .pdf-name::before{content:"";flex:0 0 auto;width:7px;height:7px;margin-right:7px;border-radius:50%;background:var(--c-red)}

  /* section titles */
  #bio h2,#rider h2{margin:0 0 10px;font-size:21px;line-height:1.1;letter-spacing:-0.02em}

  /* biography: text left, facts right */
  #bio > .gut{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:26px;padding:20px 0 0}
  #bio-text{font-size:12.5px;line-height:1.45;max-width:none;color:#3d3742}
  #bio-text p{margin:0 0 9px}
  /* short bio under the full one, for promoters who need a quick version */
  #bio-short{margin-top:8px;padding-top:10px;max-width:none;border-top:1px solid var(--c-line)}
  #bio-short h3{margin:0 0 4px;font-size:13px;line-height:1.2}
  #bio-short-text{font-size:12.5px;line-height:1.45;color:#3d3742}
  #bio-short-text p{margin:0}
  #bio dl{margin-top:6px;border-top:1px solid var(--c-line)}
  #bio dl > div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--c-line)}
  #bio dl > div:last-child{display:block;border-bottom:0}
  /* photo under the channels, same head-to-elbows crop as on the site */
  .pdf-photo{display:block;width:100%;height:auto;aspect-ratio:10 / 7;margin-top:10px;object-fit:cover;border-radius:10px}
  #bio dt{font-size:11px;letter-spacing:0.1em}
  #bio dd{margin:0;font-size:13px;line-height:1.2;text-align:right}
  #bio dl > div:last-child dd{margin-top:6px;text-align:left}
  #bio dd ul{flex-direction:column;gap:3px}
  #bio dd a.hv-tl{min-height:0;gap:0;font-size:12px;font-weight:700;text-decoration-line:none !important}
  #bio dd a > span[aria-hidden]{display:none}
  #bio dd a[href*="instagram"]::before{content:"Instagram\00a0\00a0";font-weight:500;color:#6b6470}
  #bio dd a[href*="tiktok"]::before{content:"TikTok\00a0\00a0";font-weight:500;color:#6b6470}
  #bio dd a[href*="soundcloud"]::before{content:"SoundCloud\00a0\00a0";font-weight:500;color:#6b6470}

  /* technical rider */
  #rider{border-top:0 !important;break-before:auto}
  #rider > div{padding:16px 0 0;border-top:1px solid var(--c-line);margin-top:16px}
  #rider figure{margin:8px 0 0;display:flex;flex-direction:column;align-items:center;gap:8px}
  #rider figure img{width:32%;height:auto;margin:0}
  #rider figcaption{margin:0;font-size:12px;line-height:1.4;text-align:center}
  #rider > div > div{margin-top:14px;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:18px}
  #rider > div > div > div:first-child > div{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 22px}
  #rider > div > div > div:last-of-type{grid-column:2;grid-row:1;padding:14px;border-radius:10px;align-self:start}
  #rider p{font-size:11px;letter-spacing:0.1em;margin:0 0 8px}
  #rider h3{font-size:15px;margin:0 0 3px}
  #rider ul{font-size:12.5px;line-height:1.42}
  #rider li{margin:0;padding:3px 0;border-width:0 0 1px}
  #rider li:last-child{border-bottom:0}
  /* two independent columns: Additional moves up under the short Audio block, so both columns end on the same line */
  #rider > div > div > div:first-child > div{grid-template-rows:auto auto auto}
  #rider > div > div > div:first-child > div > div:nth-child(1){grid-column:1;grid-row:1 / span 2}
  #rider > div > div > div:first-child > div > div:nth-child(2){grid-column:2;grid-row:1}
  #rider > div > div > div:first-child > div > div:nth-child(3){grid-column:1;grid-row:3;align-self:end}
  #rider > div > div > div:first-child > div > div:nth-child(4){grid-column:2;grid-row:2 / span 2;align-self:end}
  #rider h3,#rider li{break-inside:avoid}
  h2,h3{break-after:avoid}
  a[href^="http"]::after{content:""}
}

/* ---- hv-sys ---- */
/* unified hover system: primary · secondary · text link · icon · card */
:root{--hv-acc:var(--c-pink);--hv-acc-l:var(--c-red);--hv-glow:rgba(0,0,0,.32)}
.btn-solid{transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease,background-color .25s ease,color .25s ease !important}
.btn-ghost,.hv-2{transition:transform .25s cubic-bezier(.2,.7,.2,1),background-color .25s ease,border-color .25s ease,color .25s ease !important}
.btn-solid:hover,.btn-solid:focus-visible{box-shadow:0 8px 22px var(--hv-glow)}
.btn-ghost:hover,.btn-ghost:focus-visible,.hv-2.hv-dk:hover,.hv-2.hv-dk:focus-visible{background-color:rgba(255,255,255,.1) !important;border-color:#ffffff !important;color:#ffffff}
.hv-2.hv-lt:hover,.hv-2.hv-lt:focus-visible{background-color:rgba(22,18,26,.06) !important;border-color:var(--c-plum-ink) !important}
.hv-tl{text-decoration-line:underline !important;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:4px;transition:color .25s ease,text-decoration-color .25s ease}

.hv-tl.hv-lt:hover,.hv-tl.hv-lt:focus-visible{color:var(--hv-acc-l) !important;text-decoration-color:var(--hv-acc-l)}
.hv-card{transition:background-color .3s ease,color .3s ease}
.hv-card:hover,.hv-card:focus-visible{background-color:#ece8ee !important;color:var(--hv-acc-l) !important}

@media (hover:hover){

  :is(a,button):hover .hv-ar.hv-d{transform:translateY(3px)}

}

:is(a,button):focus-visible .hv-ar.hv-d{transform:translateY(3px)}

@media (prefers-reduced-motion:reduce){
  .btn-solid,.btn-ghost,.hv-2,footer.ft2 nav a,.hv-ar,.reel img,.reel video,a.case .case-img img{transform:none !important}
}

/* ---- polish-sys ---- */
/* polish pass: skip link, focus on light bands, field borders, tap targets, hero proof row, gigs, listen, press photos */

.hdr-cta{white-space:nowrap}
@media (min-width: 1061px) and (max-width: 1240px){.nav-links{gap:16px !important}}
/* browser surfaces in the page palette */
.field{caret-color:var(--hv-acc)}
/* arrows: one drawn set instead of font glyphs. down = further on this page, right = another page of the site,
   up-right = another website, download = save a file. The glyph stays in the markup as a text fallback. */

.hv-d{--ar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v11M3.5 8.5 8 13l4.5-4.5'/%3E%3C/svg%3E")}

.hv-dl{--ar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v8M4.5 6.5 8 10l3.5-3.5M3 14h10'/%3E%3C/svg%3E")}

@media (hover:hover){a:hover .hv-ar.hv-dl{transform:translateY(3px)}}
/* footer: no reserved space for a floating button that now steps aside here; tappable legal links on phones */
@media (max-width: 640px){.ft2-bottom{padding-top:14px !important}}
/* navigation: accent from the page's light accent (readable on the dark header), own focus rings */
.nav-links a::after{background:var(--hv-acc)}

:is(.menu-btn,.menu-close):focus-visible{outline:2px solid var(--hv-acc);outline-offset:3px}

/* mobile menu: sections sit low, close to the thumb; languages above a full-width call to action */

#mobile-menu > nav{margin-top:auto !important;padding-top:32px}
#mobile-menu > div:last-child{margin-top:0 !important;padding-top:28px !important;flex-direction:column;align-items:stretch !important;gap:12px !important}
#mobile-menu > div:last-child > .btn-solid{justify-content:center}
#mobile-menu .mm-lang{order:-1;margin:0 0 0 -12px}
@media (max-height: 640px){.mm-link{font-size:30px !important;padding:2px 0 !important}#mobile-menu > nav{padding-top:12px}#mobile-menu > div:last-child{padding-top:16px !important}}
@media (max-height: 440px){#mobile-menu{padding-top:12px !important;padding-bottom:14px !important}.mm-link{font-size:24px !important;line-height:1.2 !important;padding:0 !important}#mobile-menu > nav{padding-top:6px}#mobile-menu > div:last-child{padding-top:10px !important;flex-direction:row;align-items:center !important;justify-content:space-between}}
@media (prefers-reduced-motion: reduce){.nav-links a::after,.mm-link{transition:none}}
/* pages with a hero button: the header button joins in once the bar sticks, so the first screen has one call to action */
:is(#services,#events,#where,#bio,#media,#rider) :focus-visible{outline-color:var(--hv-acc-l) !important}

/* site switch: both names always written out; very narrow phones get a smaller size so both still fit */

#form-status a{color:inherit;text-underline-offset:3px}

/* images carry their intrinsic size; CSS decides the rendered height */
/* rider on screen, two columns: Additional moves up under the short Audio block, so Light and Additional end on the same line */
@media (min-width: 590px){
  #rider > div > div > div:first-child > div{grid-template-columns:repeat(2,minmax(0,1fr)) !important;grid-template-rows:auto auto auto}
  #rider > div > div > div:first-child > div > div:nth-child(1){grid-column:1;grid-row:1 / span 2;align-self:start}
  #rider > div > div > div:first-child > div > div:nth-child(2){grid-column:2;grid-row:1;align-self:start}
  #rider > div > div > div:first-child > div > div:nth-child(3){grid-column:1;grid-row:3;align-self:end}
  #rider > div > div > div:first-child > div > div:nth-child(4){grid-column:2;grid-row:2 / span 2;align-self:end}
}
/* biography: landscape crop of the hero photo (head to elbows) under the facts, ending level with the short bio */
#bio-photo{display:block;flex:none;width:100%;height:auto;aspect-ratio:10 / 7;margin-top:auto;object-fit:cover;border-radius:20px}
@media print{#bio-photo{display:none !important}}

/* ---- Extracted from inline styles (one class per repeated style) ---- */
.p-page-div{font-family: 'Manrope', sans-serif;color: var(--c-plum-ink);background: var(--c-white);min-height: 100vh;overflow: hidden}
.p-page-div-2{position: relative}
.p-page-header{position: absolute;left: 0;right: 0;top: 0;z-index: 5;max-width: none;padding-left: calc(max(0px, (100% - 1360px) / 2) + clamp(20px, 4vw, 48px));padding-right: calc(max(0px, (100% - 1360px) / 2) + clamp(20px, 4vw, 48px));max-width: 1360px;margin: 0 auto;padding: 22px clamp(20px, 4vw, 48px);display: grid;grid-template-columns: auto auto minmax(0, 1fr);align-items: center;gap: 24px 44px}
.p-page-nav{display: flex;gap: 32px;font-size: 15px;font-weight: 600}
.p-page-a{text-decoration: none}
.p-page-a-2{display: inline-flex;align-items: center;min-height: 44px;padding: 0 20px;border-radius: 999px;background: var(--c-red);color: var(--c-white);text-decoration: none;font-weight: 800}
.p-page-button{display: inline-flex;align-items: center;justify-content: center;width: 44px;height: 44px;padding: 0;border: 1px solid rgba(255,255,255,0.22);border-radius: 999px;background: transparent;color: var(--c-white);cursor: pointer}
.p-page-div-3{position: fixed;inset: 0;z-index: 60;display: flex;flex-direction: column;padding: 22px 20px 32px;background: var(--c-aubergine);overflow-y: auto}
.p-mobile-menu-div{display: flex;align-items: center;justify-content: space-between;gap: 12px}
.p-mobile-menu-nav{display: flex;flex-direction: column;margin-top: 48px}
.p-mobile-menu-a{display: block;padding: 6px 0;font-family: 'Baloo Bhai 2', sans-serif;font-size: 40px;font-weight: 800;line-height: 1.1;letter-spacing: -0.03em;text-decoration: none;color: var(--c-white)}
.p-mobile-menu-div-2{display: flex;flex-wrap: wrap;align-items: center;gap: 16px;margin-top: auto;padding-top: 40px}
.p-mobile-menu-a-2{display: inline-flex;align-items: center;min-height: 52px;padding: 0 26px;border-radius: 999px;background: var(--c-red);color: var(--c-white);text-decoration: none;font-weight: 800;font-size: 16px}
.p-main-section{background: var(--c-aubergine);padding: clamp(150px, 16vw, 210px) 0 clamp(64px, 8vw, 104px)}
.p-top-h1{margin: 0;color: var(--c-white);font-family: 'Baloo Bhai 2', sans-serif;font-weight: 800;font-size: clamp(48px, 7vw, 104px);line-height: 0.92;letter-spacing: -0.045em}
.p-top-span{color: var(--c-red)}
.p-top-p{margin: clamp(20px, 2.4vw, 32px) 0 0;max-width: 620px;font-size: clamp(18px, 1.6vw, 22px);line-height: 1.55;color: var(--c-lilac-soft)}
.p-top-div{display: flex;flex-wrap: wrap;gap: 12px;margin-top: clamp(28px, 3vw, 40px)}

.p-main-section-2{background: var(--c-white);color: var(--c-plum-ink)}
.p-bio-div{padding-top: clamp(80px, 10vw, 136px);padding-bottom: clamp(80px, 10vw, 136px);display: flex;flex-wrap: wrap;gap: clamp(40px, 6vw, 96px)}
.p-bio-div-2{flex: 1.6 1 460px;min-width: 0}
.p-bio-h2{margin: 0 0 clamp(24px, 3vw, 40px);font-family: 'Baloo Bhai 2', sans-serif;font-size: clamp(38px, 5vw, 72px);line-height: 0.98;letter-spacing: -0.04em;font-weight: 800}
.p-bio-div-3{max-width: 760px;font-size: clamp(18px, 1.5vw, 21px);line-height: 1.65;color: var(--c-body-grey)}
.p-bio-text-p{margin: 0 0 20px}
.p-bio-button{display: inline-flex;align-items: center;min-height: 48px;margin-top: 8px;padding: 0 22px;border-radius: 999px;border: 2px solid var(--c-plum-ink);background: transparent;color: var(--c-plum-ink);font: inherit;font-size: 15px;font-weight: 800;cursor: pointer}
.p-bio-div-4{max-width: 760px;margin-top: clamp(40px, 5vw, 56px);padding-top: clamp(24px, 3vw, 32px);border-top: 1px solid var(--c-line)}
.p-bio-short-h3{margin: 0 0 12px;font-family: 'Baloo Bhai 2', sans-serif;font-size: clamp(22px, 2vw, 26px);line-height: 1.1;letter-spacing: -0.02em;font-weight: 800}
.p-bio-short-div{font-size: 17px;line-height: 1.65;color: var(--c-body-grey)}
.p-bio-short-text-p{margin: 0 0 16px}
.p-bio-div-5{flex: 1 1 280px;display: flex;flex-direction: column;gap: clamp(32px, 4vw, 48px)}
.p-bio-dl{margin: 0;padding-top: clamp(24px, 3vw, 32px);border-top: 1px solid var(--c-line)}
.p-bio-dt{font-family: 'Baloo Bhai 2', sans-serif;font-size: clamp(22px, 2vw, 26px);line-height: 1.1;letter-spacing: -0.02em;font-weight: 800;color: var(--c-plum-ink)}
.p-bio-div-7{padding: 0}
.p-bio-dd-2{margin: 12px 0 0}
.p-bio-ul{margin: 0;padding: 0;list-style: none;display: flex;flex-direction: column;gap: 6px}
.p-bio-a{display: inline-flex;align-items: center;gap: 12px;min-height: 44px;color: var(--c-plum-ink);text-decoration: none;font-size: 16px;font-weight: 700}
.p-bio-span{display: inline-flex;align-items: center;justify-content: center;flex: 0 0 auto;width: 40px;height: 40px;border-radius: 999px;background: var(--c-plum-ink);color: var(--c-white)}
.p-bio-span{transition:background-color .25s ease}
.p-bio-a:hover .p-bio-span,.p-bio-a:focus-visible .p-bio-span{background:var(--hv-acc-l)} /* the icon takes the same red as the handle */
.p-main-section-3{background: var(--c-white)}
.p-media-div{padding-top: clamp(64px, 8vw, 104px);padding-bottom: clamp(64px, 8vw, 104px)}
.p-media-h2{margin: 0 0 clamp(28px, 3.5vw, 48px);font-family: 'Baloo Bhai 2', sans-serif;font-size: clamp(34px, 4.4vw, 60px);line-height: 0.98;letter-spacing: -0.04em;font-weight: 800}

.p-rider-div{max-width: 1360px;margin: 0 auto;padding: clamp(64px, 8vw, 104px) clamp(20px, 4vw, 48px)}
.p-rider-h2{margin: 0 0 clamp(32px, 4vw, 56px);font-family: 'Baloo Bhai 2', sans-serif;font-size: clamp(38px, 5vw, 72px);line-height: 0.98;letter-spacing: -0.04em;font-weight: 800}
.p-rider-figure{margin: 0 0 clamp(40px, 5vw, 72px)}
.p-rider-img{display: block;width: 100%;height: auto}
.p-rider-figcaption{margin-top: 34px;font-size: 14px;color: var(--c-mauve-grey)}
.p-rider-div-2{display: flex;flex-wrap: wrap;gap: clamp(40px, 5vw, 80px)}
.p-rider-div-3{flex: 2 1 560px;min-width: 0}
.p-rider-p{margin: 0 0 20px;font-size: 12px;font-weight: 800;letter-spacing: 0.14em;text-transform: uppercase;color: var(--c-red)}
.p-rider-div-4{display: grid;grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));gap: clamp(32px, 4vw, 48px) clamp(24px, 3vw, 48px)}
.p-rider-div-5{min-width: 0}
.p-rider-h3{margin: 0 0 6px;font-family: 'Baloo Bhai 2', sans-serif;font-size: 24px;font-weight: 800;letter-spacing: -0.02em;color: var(--c-plum-ink)}
.p-rider-ul{margin: 0;padding: 0;list-style: none;font-size: 16px;line-height: 1.5;color: var(--c-body-grey)}
.p-rider-li{padding: 12px 0;border-bottom: 1px solid var(--c-line)}
.p-rider-strong{color: var(--c-plum-ink)}
.p-rider-div-6{flex: 1 1 280px;min-width: 0;align-self: flex-start;padding: clamp(24px, 3vw, 36px);border-radius: 20px;background: var(--c-paper);color: var(--c-plum-ink)}
.p-rider-p-2{margin: 0 0 16px;font-size: 12px;font-weight: 800;letter-spacing: 0.14em;text-transform: uppercase;color: var(--c-red)}
.p-rider-ul-2{margin: 0;padding: 0;list-style: none;font-size: 16px;line-height: 1.5;color: var(--c-plum-ink)}
.p-rider-li-2{padding: 12px 0}
.p-rider-p-3{margin: clamp(48px, 6vw, 80px) 0 0;padding-top: 24px;border-top: 1px solid var(--c-line);font-size: 16px;line-height: 1.6;color: var(--c-body-grey)}
.p-rider-a{color: var(--c-plum-ink);font-weight: 800;text-underline-offset: 4px}
.p-page-footer{max-width: none;margin: 0;padding: clamp(48px, 6vw, 80px) calc(max(0px, (100% - 1360px) / 2) + clamp(20px, 4vw, 48px)) 36px;background: var(--c-aubergine)}
.p-page-nav-2{display: flex;align-items: center;gap: 10px}
.p-page-a-3{display: inline-flex;align-items: center;justify-content: center;width: 46px;height: 46px;border-radius: 999px;background: rgba(255,255,255,0.1)}
.p-page-a-4{display: inline-flex;align-items: center;justify-content: center;height: 46px;padding: 0 16px;border-radius: 999px;background: rgba(255,255,255,0.1)}
.p-page-span{display: block;width: 89px;height: 16px;background: currentColor;-webkit-mask: url(/assets/img/bops-logo-white.png) center / contain no-repeat;mask: url(/assets/img/bops-logo-white.png) center / contain no-repeat}
/* Press photos: four thumbnails that open a larger preview before downloading, plus one ZIP with all full-size files */
.pk-photos{display:grid;gap:20px;margin-bottom:clamp(48px,6vw,80px)}
/* Videos: a sibling of Press Photos, same heading, one link instead of a large card */
.pk-videos{display:grid;gap:16px;margin-bottom:clamp(48px,6vw,80px)}
.pk-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.pk-h3{margin:0;font-family:'Baloo Bhai 2',sans-serif;font-size:clamp(24px,2.4vw,32px);font-weight:800;letter-spacing:-0.02em;color:var(--c-plum-ink)}
.pk-all{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;border:2px solid var(--c-red);background:var(--c-red);color:#ffffff;text-decoration:none;font-weight:800;font-size:15px}
.pk-all:hover,.pk-all:focus-visible{color:#ffffff}
.pk-zip{font-weight:600;opacity:.85;white-space:nowrap}
.pk-grid{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,24px)}
@media (max-width:900px){.pk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pk-item{display:grid;gap:10px;min-width:0}
.pk-thumb{position:relative;display:block;padding:0;border:0;border-radius:16px;overflow:hidden;background:var(--c-paper);cursor:zoom-in;aspect-ratio:4/5}
.pk-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.pk-thumb:hover img{transform:scale(1.03)}}
.pk-thumb:focus-visible{outline:2px solid var(--c-red);outline-offset:3px}
/* the larger preview: full-screen, the photo as big as fits, the download and arrows underneath */
.pk-box{width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:rgba(22,6,28,.94);color:#ffffff;font-family:'Manrope',system-ui,sans-serif}
.pk-box::backdrop{background:rgba(22,6,28,.94)}
.pk-box[open]{display:grid;grid-template-rows:minmax(0,1fr) auto}
.pk-stage{display:grid;place-items:center;min-height:0;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 8px max(16px,env(safe-area-inset-left,0px))}
.pk-big{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.pk-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding:12px max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.pk-box-cap{margin:0;display:grid;gap:2px;font-size:14px;color:rgba(255,255,255,.8);min-width:0}
.pk-box-cap b{font-weight:700;color:#ffffff}
.pk-box-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.pk-ico{display:grid;place-items:center;width:48px;height:48px;padding:0;border:1.5px solid rgba(255,255,255,.45);border-radius:50%;background:none;color:#ffffff;font:800 20px/1 'Manrope',sans-serif;cursor:pointer}
.pk-ico:hover{border-color:#ffffff;background:rgba(255,255,255,.08)}
.pk-ico:focus-visible,.pk-box .pk-all:focus-visible{outline:2px solid #ffffff;outline-offset:3px}
.pk-count{min-width:44px;text-align:center;font-size:14px;color:rgba(255,255,255,.75);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.pk-thumb img{transition:none}.pk-thumb:hover img{transform:none}}
.pk-close{position:absolute;top:max(12px,env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px));z-index:1;background:rgba(22,6,28,.6)}
.pk-stage{padding-top:max(72px,env(safe-area-inset-top,0px))}

@media (max-width:600px){
  .pk-bar{flex-direction:column;align-items:stretch}
  .pk-box-acts{justify-content:space-between}
  .pk-box .pk-full{flex:1 1 100%;justify-content:center;order:3}

}
.pk-foot{display:flex}
.pk-big{transition:opacity .2s ease}
.pk-big.pk-loading{opacity:.35}
.pk-stage{touch-action:pan-y}
@media (prefers-reduced-motion:reduce){.pk-big{transition:none}}
/* buttons in the Media section follow the page's own button (Copy to Clipboard): a 48px pill, one line,
   2px solid border */
.pk-vid{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:999px;border:2px solid var(--c-plum-ink);background:transparent;color:var(--c-plum-ink);text-decoration:none;font-size:15px;font-weight:800;white-space:nowrap}
.pk-vid:hover,.pk-vid:focus-visible{color:var(--c-plum-ink)}
/* the red ZIP button stays red on hover (a shade deeper), unlike the outlined buttons that lighten */
.pk-all.hv-2:hover,.pk-all.hv-2:focus-visible{background-color:var(--c-red-deep) !important;border-color:var(--c-red-deep) !important;color:#ffffff !important}
/* preview layout: an opaque backdrop (no page showing through); the photo box fills the free space and the photo
   is fitted inside it, so it never runs under the controls; one tidy row of controls underneath */
.pk-box,.pk-box::backdrop{background:var(--c-tile-dark)}
.pk-stage{position:relative;padding:0}
.pk-big{position:absolute;top:max(72px,env(safe-area-inset-top,0px));left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));bottom:8px;width:calc(100% - 32px);height:calc(100% - 80px);max-width:none;max-height:none;margin:auto;object-fit:contain;border-radius:0;box-shadow:none}
.pk-bar{flex-direction:row;align-items:center;justify-content:space-between}
.pk-box-cap{display:flex;align-items:baseline;gap:12px;color:#ffffff;font-weight:700}
.pk-box-cap .pk-count{min-width:0;font-weight:600}
.pk-box-acts{flex-wrap:nowrap}
.pk-box .pk-full{justify-content:center;min-width:150px}
@media (max-width:600px){
  .pk-bar{flex-direction:column;align-items:stretch;gap:12px}
  .pk-box-cap{justify-content:space-between}
  .pk-box-acts{justify-content:space-between;gap:10px}
  .pk-box .pk-full{flex:1 1 auto;order:0}
}
/* bio side column: the photo fills the height left under Channels (no empty gap), cropped around the face */
@media (min-width:901px){
  .p-bio-div-5 #bio-photo{flex:1 1 0;min-height:280px;aspect-ratio:auto;margin-top:0;object-position:50% 0} /* cropped file with little room above the cap; keep its top edge */
}
/* phones and small tablets: Channels sits under the bio and the photo is left out */
@media (max-width:900px){
  .p-bio-div-5{flex-basis:100%}
  .p-bio-div{row-gap:clamp(40px, 5vw, 56px)} /* same space above the Channels rule as above the Short Bio rule */
  #bio-photo{display:none}
}
.hv-r{--ar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h11M8.5 3.5 13 8l-4.5 4.5'/%3E%3C/svg%3E")}
/* Booking: one sentence under the hero buttons, in the same voice as the rider's "Questions about the setup?" */
.pk-booking{margin:clamp(22px,2.6vw,32px) 0 0;font-size:16px;color:var(--c-lilac-soft)}
.pk-mail{font-weight:800;color:#ffffff;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;text-decoration-color:rgba(255,255,255,.4)}
.pk-mail:hover,.pk-mail:focus-visible{color:#ffffff;text-decoration-color:#ffffff}

/* Mixes: last in Media, after Videos; each row opens the set on SoundCloud */
.pk-mixes{display:grid;gap:20px}
.pk-mix-list{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px clamp(12px,1.6vw,24px)}
@media (max-width:760px){.pk-mix-list{grid-template-columns:minmax(0,1fr)}}
.pk-mix{display:grid;grid-template-columns:72px minmax(0,1fr) auto auto;align-items:center;gap:16px;padding:12px 18px 12px 12px;border-radius:16px;background:var(--c-paper);color:var(--c-plum-ink);text-decoration:none;transition:background-color .25s ease}
.pk-mix:hover,.pk-mix:focus-visible{background:#ece8ee;color:var(--c-plum-ink)}
.pk-mix:focus-visible{outline:2px solid var(--c-red);outline-offset:3px}
.pk-mix-art{display:block;width:72px;height:72px;border-radius:10px;object-fit:cover}
.pk-mix-t{display:grid;gap:2px;min-width:0}
.pk-mix-k{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--c-red)}
.pk-mix-h{font-family:'Baloo Bhai 2',sans-serif;font-size:20px;font-weight:800;line-height:1.15;letter-spacing:-0.01em}
.pk-mix-time{font-size:13px;font-weight:600;color:var(--c-body-grey);font-variant-numeric:tabular-nums;white-space:nowrap}
.pk-mix .hv-ar{color:var(--c-red)}
/* in the PDF there is no link to click, so the header band shows the address itself */
@media print{
  #top .gut > p.pk-pdf-src{display:block !important;margin:0 0 0 auto;font-size:12px;font-weight:800} /* where this file comes from */
  #top .pk-pdf-src a{color:#ffffff !important;text-decoration:none}
}
/* phones: the duration moves under the title, so titles get the full width */
@media (max-width:760px){
  .pk-mix{grid-template-columns:64px minmax(0,1fr) auto;grid-template-areas:"art t ar" "art time ar";gap:2px 14px}
  .pk-mix-art{grid-area:art;width:64px;height:64px}
  .pk-mix-t{grid-area:t;align-self:end}
  .pk-mix-time{grid-area:time;align-self:start}
  .pk-mix .hv-ar{grid-area:ar}
}
/* rhythm in Media: every heading sits 20px above its content; a photo's button stays close to its photo (10px)
   and far from the next row (28px+), so it clearly belongs to the photo above it */
.pk-videos{gap:20px}
.pk-grid{row-gap:clamp(28px,3vw,36px)}
/* the press kit is a reference page full of buttons and downloads: no floating "Check Availability" on phones
   (it covered photos and Download buttons); the button stays in the menu bar and the menu */
.cta-fab{display:none !important}
/* PDF only: where to find the photos, videos and mixes that the printout leaves out */
@media print{
  #rider .pk-pdf-rider-q{display:block !important;grid-column:2;grid-row:1;align-self:end;margin:0 0 3px;padding:0 0 0 14px;font-size:12.5px;letter-spacing:0;color:#3d3742}
  #rider .pk-pdf-rider-q a{font-weight:800;color:var(--c-plum-ink) !important;text-decoration:none}
  #bio dt{font-size:13px !important;line-height:1.2;letter-spacing:0 !important;text-transform:none !important;color:var(--c-plum-ink) !important} /* same heading as Short Bio, as on screen */
  #bio .p-bio-dl{padding-top:5px !important} /* + the 5px row padding = 10px under the line, as for Short Bio */
  #bio dl > div:last-child dd{margin-top:4px} /* heading to list 4px, as Short Bio heading to text */
  /* side column: Channels, the photo button with room around it, then the photo */
  #bio .p-bio-div-5{display:flex;flex-direction:column}
  #bio dl > div:last-child{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0}
  #bio .pdf-photo{margin-top:0;aspect-ratio:3 / 2;object-position:50% 30%}
  #bio .pk-pdf-zip{display:block !important;margin:20px 0 0}
  #bio .pk-pdf-vid{margin:8px 0 16px}
  #bio .pk-pdf-vid:has(+ .pk-pdf-zip){margin-bottom:0} /* the logo button follows: 8px between buttons, 16px after the last */ /* the two download buttons sit together, the photo 16px below */ /* looks the same above and below: the links' text runs ~7px past their line box */
  .pk-pdf-zip a{display:block;height:30px;padding:0 10px;border:1.5px solid var(--c-red);border-radius:999px;background:var(--c-red);color:#ffffff !important;text-decoration:none;text-align:center;font-size:11.5px;line-height:27px;font-weight:800;white-space:nowrap} /* one line box: label and its note share a baseline */
  .pk-pdf-zip span{margin-left:6px;font-size:11px;font-weight:600;opacity:.85}
  .pk-pdf-vid a{border-color:var(--c-plum-ink);background:transparent;color:var(--c-plum-ink) !important} /* as on the page: photos red, Google Drive outlined */
}
/* one line under the Photos heading says what the files are; each photo carries a small Download overlay,
   bottom right (clear of the face), while a tap anywhere else opens the larger preview */
.pk-photos .pk-note{margin:0 0 -8px;font-size:14px;color:var(--c-body-grey)} /* under the photos, right above the ZIP button it describes */
.pk-item{position:relative}
.pk-dl{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px 0 14px;border-radius:999px;background:var(--c-overlay);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#ffffff;text-decoration:none;font-size:14px;font-weight:800;transition:background-color .25s ease}
.pk-dl:hover,.pk-dl:focus-visible{background:var(--c-overlay-strong)}
.pk-dl:focus-visible{outline:2px solid #ffffff;outline-offset:2px}
.pk-dl .hv-ar{margin-left:.4em}
/* photo overlay Download: word and arrow turn pink together on hover; like every button, only the arrow moves */
.pk-dl{transition:background-color .25s ease,color .25s ease}
.pk-dl:hover,.pk-dl:focus-visible{color:var(--c-pink) !important}
.pk-dl-t{display:inline-flex;align-items:center;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.pk-all .pk-dl-t{gap:8px}
.pk-all.hv-2:hover,.pk-all.hv-2:focus-visible{transform:none !important}

@media (prefers-reduced-motion:reduce){.pk-dl-t{transform:none !important}}
/* the four mix rows are always the same height (the tallest sets it); on phones the type is a touch smaller so
   most titles fit on one line, and nothing is cut off */
.pk-mix-list{grid-auto-rows:1fr}
.pk-mix-list > li{display:grid}
@media (max-width:760px){
  .pk-mix-k{font-size:11px;letter-spacing:.08em}
  .pk-mix-h{font-size:18px}
}
/* the space above each section divider matches the space below it (as in Media and Rider); on phones and small
   tablets the bio ends with Channels, which sits midway between its two lines instead */
.p-bio-div{padding-bottom:clamp(64px,8vw,104px)}
@media screen and (max-width:900px){
  .p-bio-div{padding-bottom:clamp(40px, 5vw, 56px)}
  .p-bio-dl{padding-top:clamp(40px, 5vw, 56px)}
}
/* Media subsections are separated by the same light rule as Short Bio in the biography: Photos, then a line,
   Videos, then a line, Mixes */
.pk-photos,.pk-videos{margin-bottom:0}
.pk-videos,.pk-mixes{margin-top:clamp(40px,5vw,56px);padding-top:clamp(24px,3vw,32px);border-top:1px solid var(--c-line)}
/* three mixes: one row of three on wide screens, one column below */
.pk-mix-list{grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){.pk-mix-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* wide screens: Videos and Mixes side by side under one shared rule; Videos takes a narrow column, the mixes
   stack as rows in the wider one */
@media (min-width:1000px){
  .pk-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:0 clamp(32px,4vw,64px);margin-top:clamp(40px,5vw,56px);padding-top:clamp(24px,3vw,32px);border-top:1px solid var(--c-line)}
  .pk-row > .pk-videos,.pk-row > .pk-mixes{margin-top:0;padding-top:0;border-top:0;align-content:start}
  .pk-row .pk-mix-list{grid-template-columns:minmax(0,1fr)}
}
/* one rhythm for the whole page (screen only; the PDF has its own sizes):
   - every section starts the same distance below its divider (Bio started deeper than Media and Rider)
   - the three section headings share one size and one gap to their content (Media was smaller; the gaps were 3 values)
   - every subheading (Short Bio, Channels, Photos, Videos, Mixes, Players & Mixer…) shares one size and sits 16px
     above its content (sizes were 24/26/31px, gaps 6/12/20px) */
@media screen{
  .p-bio-div{padding-top:clamp(64px,8vw,104px)}
  .p-bio-h2,.p-media-h2,.p-rider-h2{margin-bottom:clamp(28px,3.5vw,48px)}
  .p-media-h2{font-size:clamp(38px,5vw,72px)}
  .pk-h3,.p-bio-short-h3,.p-bio-dt,.p-rider-h3{font-size:clamp(22px,2vw,26px);line-height:1.1}
  .p-bio-short-h3{margin-bottom:16px}
  .p-bio-dd-2{margin-top:16px}
  .p-rider-h3{margin-bottom:4px} /* + the 12px top padding of the first rider row = 16px */
  .pk-photos,.pk-videos,.pk-mixes{gap:16px}
  .pk-photos .pk-note{margin:0 0 -4px} /* note to ZIP button stays 12px */
}
/* hero: one action (the PDF, red like the other primary buttons) and a light row of jump links to the sections,
   so the three anchors no longer look like the file download */
.p-top-div{align-items:center;gap:16px 32px}
.p-top-pdf{display:inline-flex;align-items:center;min-height:52px;padding:0 26px;border-radius:999px;border:2px solid var(--c-red);background:var(--c-red);color:var(--c-white);text-decoration:none;font-size:16px;font-weight:800}
.p-top-pdf.hv-2:hover,.p-top-pdf.hv-2:focus-visible{background-color:var(--c-red-deep) !important;border-color:var(--c-red-deep) !important;color:var(--c-white) !important}
.p-top-jump{display:flex;flex-wrap:wrap;gap:8px 24px}
.p-top-jump-a{display:inline-flex;align-items:center;min-height:44px;color:var(--c-white);text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-decoration-thickness:2px;text-underline-offset:6px;font-size:16px;font-weight:800;transition:color .25s ease,text-decoration-color .25s ease}
.p-top-jump-a:hover,.p-top-jump-a:focus-visible{color:var(--c-pink);text-decoration-color:var(--c-pink)}
.p-top-jump-a:focus-visible{outline:2px solid var(--c-pink);outline-offset:3px;border-radius:4px}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.p-top-jump-a:hover .hv-ar.hv-d{transform:translateY(3px)}}
/* Download PDF: the label stays in place and only the arrow moves down, the same 3px as the jump links next to it */
.p-top-pdf.hv-2:is(:hover,:focus-visible){transform:none !important}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.p-top-pdf:hover .hv-ar.hv-dl{transform:translateY(3px)}}
@media (prefers-reduced-motion:no-preference){.p-top-pdf:focus-visible .hv-ar.hv-dl{transform:translateY(3px)}}
/* hero button hover, the same on every page: text keeps its colour, background deepens a little, soft shadow */
.p-top-pdf.hv-2:is(:hover,:focus-visible){box-shadow:0 8px 22px var(--hv-glow)}

/* ONE LINE FOR ALL BUTTONS (hover and keyboard focus)
   - nothing lifts: the label stays where it is; only the arrow moves, 3px in its own direction
   - solid buttons keep their text colour, the background deepens a little and a soft shadow appears */

.pk-all.hv-2:is(:hover,:focus-visible){box-shadow:0 8px 22px var(--hv-glow)}
:is(.pk-dl,.pk-all):focus-visible .hv-ar.hv-dl{transform:translateY(3px)}
/* ZIP buttons (Download All Photos / All Logos): the label never breaks inside; in a narrow window the size and arrow
   move to a second line together */
.pk-all{max-width:100%;padding-block:6px}
.pk-all .pk-dl-t{flex-wrap:wrap;justify-content:center;column-gap:8px;row-gap:0;text-align:center}
.pk-all-l,.pk-all .pk-zip{white-space:nowrap}
.pk-all-r{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}

/* LOGO: one preview tile with a colour switch (top left), a file-type switch (top right) and Download (bottom right);
   black logo on a light tile, white logo on a dark tile. The controls share the photo-overlay material: see-through
   dark with a soft blur on the light tile, see-through light on the dark tile (a dark layer would vanish there).
   Same divider and rhythm as Videos and Mixes; on wide screens the section follows the photo grid above it */
.pk-logos{display:grid;gap:16px;margin-top:clamp(40px,5vw,56px);padding-top:clamp(24px,3vw,32px);border-top:1px solid var(--c-line)}
.pk-logos .pk-foot{margin-top:-4px} /* text to button 12px, as under the photos */
.pk-logo{display:flex;flex-direction:column;min-width:0;max-width:720px}
.pk-logo-art{position:relative;display:grid;place-items:center;aspect-ratio:5 / 2;padding:max(9%, 66px) 12% max(9%, 66px);border-radius:16px} /* room above for the switches, below for Download */
.pk-logo-light{background:var(--c-paper)}
.pk-logo-dark{background:var(--c-tile-dark)}
.pk-logo-art img{display:block;width:100%;height:100%;object-fit:contain}
.pk-logo-art img[hidden]{display:none} /* tile and logo switch together, no fade (a fade briefly shows white on light) */
.pk-logo-info{max-width:720px;display:grid;gap:10px;font-size:14px;line-height:1.5;color:var(--c-body-grey)}
.pk-logo-info p{margin:0}
.pk-logo-info span[hidden]{display:none}

/* switches in the frame */
.pk-logo-art .pk-logo-row{position:absolute;top:10px;left:10px;right:10px;z-index:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 12px;margin:0}
.pk-fmt{position:relative;display:inline-flex;margin:0;padding:3px;border:0;border-radius:999px;touch-action:pan-y}
.pk-logo-art .pk-fmt{background:var(--c-overlay);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pk-logo-dark .pk-fmt{background:rgba(255,255,255,.14)}
.pk-fmt label{position:relative;z-index:1;display:inline-flex}
.pk-fmt input{position:absolute;top:-3px;right:0;bottom:-3px;left:0;width:100%;margin:0;opacity:0;cursor:pointer} /* 44px tap area: the radio reaches past the chip */
.pk-fmt span{display:inline-flex;align-items:center;min-height:38px;padding:0 11px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.04em;transition:background-color .2s ease,color .2s ease}
.pk-logo-art .pk-fmt span{color:rgba(255,255,255,.8)}
.pk-logo-art .pk-fmt label:hover span{color:#ffffff}
.pk-logo-art .pk-fmt input:checked + span{background:transparent;color:var(--c-plum-ink)} /* the thumb shows the choice */
.pk-fmt input:focus-visible + span{outline:2px solid #ffffff;outline-offset:2px}
/* the thumb glides to the chosen option and can be dragged, like the site switch in the header */
.pk-fmt-thumb{position:absolute;top:3px;left:0;bottom:3px;width:0;border-radius:999px;background:#ffffff;pointer-events:none}
.pk-fmt-ready .pk-fmt-thumb{transition:transform .45s cubic-bezier(.3,.7,.2,1),width .45s cubic-bezier(.3,.7,.2,1),background-color .2s ease}
.pk-fmt-drag .pk-fmt-thumb{transition:none}
.pk-fmt-drag{cursor:grabbing}
@media (prefers-reduced-motion:reduce){.pk-fmt-ready .pk-fmt-thumb{transition:none}}

/* Download on the tile: the photo-overlay pill */
.pk-logo-light .pk-dl{background:var(--c-overlay);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pk-logo-light .pk-dl:hover,.pk-logo-light .pk-dl:focus-visible{background:var(--c-overlay-strong)}
.pk-logo-dark .pk-dl{background:rgba(255,255,255,.14);color:#ffffff !important;-webkit-backdrop-filter:none;backdrop-filter:none}
.pk-logo-dark .pk-dl:hover,.pk-logo-dark .pk-dl:focus-visible{background:rgba(255,255,255,.24);color:var(--c-pink) !important}

/* wide screens: the tile spans the first two photo columns; text and Download All Logos in the right half */
@media (min-width:1000px){
  .pk-logos{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto auto 1fr;column-gap:clamp(12px,1.6vw,24px);row-gap:16px}
  .pk-logos > .pk-head{grid-column:1 / -1}
  .pk-logos > .pk-logo{grid-column:1 / 3;grid-row:2 / 5;max-width:none}
  .pk-logos > .pk-logo-info{grid-column:3 / -1;grid-row:2;align-self:start;max-width:46ch}
  .pk-logos > .pk-foot{grid-column:3 / -1;grid-row:3;align-self:start;margin-top:-4px}
}
/* phones: a taller tile */
@media (max-width:560px){.pk-logo-art{aspect-ratio:4 / 3}}
/* small screens: compact switches, so both stay on one row inside the frame */
@media (max-width:420px){
  .pk-logo-art .pk-logo-row{flex-wrap:nowrap;gap:6px;top:8px;left:8px;right:8px}
  .pk-logo-art .pk-fmt span{min-height:34px;padding:0 8px;font-size:11px;letter-spacing:.02em}
  .pk-logo-art{padding-top:max(9%, 58px)}
  .pk-fmt input{top:-5px;bottom:-5px}
}
/* very narrow screens (or large text zoom): the two switches stack inside the frame */
@media (max-width:300px){
  .pk-logo-art .pk-logo-row{flex-wrap:wrap;row-gap:6px}
  .pk-logo-art{padding-top:max(9%, 96px);aspect-ratio:auto;min-height:220px}
}
@media print{.pk-logos{display:none !important}}
/* footer links (Privacy Policy, FREYcreates): a 44px tap area on wider screens too; the negative margin keeps the row height */

/* hero jump links on phones: one compact row (smaller text, closer together); if they still wrap, the rows sit close
   (the 44px tap area overlaps a little instead of pushing the rows apart) */
@media (max-width:560px){
  .p-top-jump{gap:0 18px}
  .p-top-jump-a{font-size:15px;margin-block:-4px}
}
@media (max-width:400px){
  .p-top-jump{gap:0 14px}
  .p-top-jump-a{font-size:14px}
  .p-top-jump-a .hv-ar{margin-left:.3em}
}