/* Leo Force: a hard-techno poster, with the artist and his records as its material. */
:root {
  --bg: #080808;
  --surface: #171717;
  --ink: #f2f2ee;
  --muted: #bdbdb6;
  --accent: #ff4a2a;
  --accent-ink: #080808;
  --paper: #f2f2ee;
  --dark: #080808;
  --control: #292929;
}

.site-header { padding-block: 28px; }
.wordmark { font-size: 30px; }
.site-header nav a:hover { color: var(--accent); opacity: 1; }
.primary:hover { background: var(--ink); }
.button { font-weight: 700; }
.button:hover { transform: translateY(-2px); }

.hero-picture { clip-path: inset(10% 4% 10% 48%); }
.hero-photo {
  filter: grayscale(1) contrast(1.18) brightness(.88);
  transform: translateX(14%);
}
.hero-title {
  top: 22%;
  bottom: auto;
  font-size: clamp(108px, 16vw, 260px);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: .79;
}
.hero-intro {
  left: var(--gutter);
  right: auto;
  bottom: 8%;
  width: 39%;
  max-width: 490px;
}
.hero-intro p { max-width: 33ch; margin-bottom: 24px; }
.hero-intro .button { width: auto; }
.hero-intro .text-link { margin: 0 0 0 20px; }
.hero-end { color: var(--ink); }

.biography { padding-block: 130px; }
.bio-portrait { filter: grayscale(1) contrast(1.15); }
.bio-download:hover { color: var(--accent); }

.sets { min-height: 900px; }
.set-background { filter: grayscale(1) contrast(1.1) brightness(.48); }
.set-panel {
  width: 420px;
  margin-left: var(--gutter);
  padding: 36px;
  background: var(--surface);
  color: var(--ink);
}
.set-panel h2 { font-size: 64px; }
.set-options { gap: 8px; }
.set-options button { color: var(--ink); padding: 16px 14px; }
.set-options button[aria-pressed=true] {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}
.set-options button:hover { transform: translateX(4px); }
.set-options button:focus-visible { outline-color: var(--ink); }
.selected-set { margin-block: 26px; }
#listen-button { background: var(--ink); color: var(--dark); }
#listen-button:hover { background: var(--accent); }

.record-scrim { background: rgba(0, 0, 0, .58); }
.record-title { font-weight: 900; letter-spacing: -.025em; }
.record-list a:hover .record-title,
.record-list a:focus-visible .record-title { color: var(--accent); }
.scene-proof { background: var(--surface); }
.names-track span { color: var(--accent); }
.proof-links a:hover { color: var(--accent); }
.proof-links a span+span { color: var(--muted); }

.contact-photo { filter: grayscale(1) contrast(1.18) brightness(.8); }
.contact-panel { background: var(--surface); color: var(--ink); }
.professional-links a:hover { color: var(--accent); }
.footer-name { font-weight: 900; letter-spacing: -.035em; }
.footer-name:hover { color: var(--accent); }

html:not(.js) .hero-picture { clip-path: inset(10% 4% 10% 48%); }

@media (min-width: 768px) and (max-width: 1100px) {
  .hero-intro { width: 42%; max-width: 440px; }
  .hero-intro .text-link { display: block; margin: 15px 0 0; }
  .set-panel { width: 390px; }
}

@media (max-width: 767px) {
  .site-header { padding-top: 22px; }
  .wordmark { font-size: 24px; }
  .hero-picture { clip-path: inset(27% 12% 23% 12%); }
  .hero-photo { transform: translateY(22%); }
  .hero-title { top: 91px; font-size: clamp(66px, 18.5vw, 120px); line-height: .82; }
  .hero-intro { left: var(--gutter); right: var(--gutter); bottom: 24px; width: auto; max-width: none; }
  .hero-intro p { margin-bottom: 18px; max-width: 34ch; }
  .hero-intro .text-link { display: inline-block; margin: 0 0 0 14px; }
  .biography { padding-block: 80px; }
  .sets { min-height: 0; }
  .set-panel { width: 100%; margin: 0; padding: 26px; }
  .set-panel h2 { font-size: 48px; }
  .set-options button { padding: 16px 12px; font-size: 16px; }
  .set-options button span { font-size: 14px; }
  .records.is-live .record-run { inset: 175px 0 100px; }
  .contact { background: var(--bg); }
  .footer-name { letter-spacing: -.025em; }
  html:not(.js) .hero-picture { clip-path: inset(27% 12% 23% 12%); }
}

@media (max-width: 360px) {
  .hero-title { font-size: 17vw; }
  .hero-intro .text-link { display: block; margin: 10px 0 0; }
  .set-panel { padding: 22px; }
  .set-options button { font-size: 14px; }
}

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .hero-picture { clip-path: inset(10% 4% 10% 48%); }
}
/* Preserve the original composition while keeping the verified contact channel explicit. */
.contact-panel>.contact-channel{margin:10px 0 0;font-size:14px;color:var(--muted)}
@media(prefers-reduced-motion:reduce){.button:hover{transform:none}}
/* Display voice requested by the artist: a tall poster face, with Archivo kept for reading. */
@font-face{font-family:'Bebas Neue';src:url('assets/fonts/BebasNeue-latin.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
:root{--font-display:'Bebas Neue',Impact,sans-serif;--font-text:Archivo,system-ui,sans-serif}
h1,h2,h3,.wordmark,.record-title,.names-track span,.footer-name,.hero-end{font-family:var(--font-display);font-weight:400;font-stretch:normal;font-variation-settings:normal;letter-spacing:-.015em}
.wordmark{font-size:36px}.hero-title{font-size:clamp(128px,20vw,310px);font-weight:400;line-height:.79;letter-spacing:-.025em}.record-title{font-size:clamp(80px,11vw,168px);line-height:.95}.footer-name{letter-spacing:-.02em}.hero-end{line-height:1}
.listening-dock{position:fixed;right:var(--gutter);bottom:max(24px,env(safe-area-inset-bottom));z-index:30;width:min(420px,calc(100vw - 2 * var(--gutter)));padding:16px;background:var(--surface);color:var(--ink);font-family:var(--font-text)}.dock-row{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:12px;align-items:center}.dock-toggle,.dock-return{display:flex;align-items:center;justify-content:center;width:44px;height:44px;font-size:18px}.dock-toggle{background:var(--accent);color:var(--accent-ink)}.dock-toggle:disabled{background:var(--control);color:var(--muted);cursor:default}.dock-return{background:var(--control)}.dock-toggle:hover,.dock-return:hover{background:var(--ink);color:var(--dark)}.dock-copy{min-width:0}.dock-title{font-size:18px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dock-state{font-size:14px;color:var(--muted);margin-top:2px}.dock-position{display:flex;gap:14px;align-items:center;margin-top:12px}.dock-position progress{appearance:none;display:block;width:100%;height:4px;accent-color:var(--accent);border:0;background:var(--control)}.dock-position progress::-webkit-progress-bar{background:var(--control)}.dock-position progress::-webkit-progress-value{background:var(--accent)}.dock-position progress::-moz-progress-bar{background:var(--accent)}.dock-position span{font-size:14px;white-space:nowrap;font-variant-numeric:tabular-nums}.dock-fallback{display:inline-block;margin-top:10px;text-decoration:underline;font-size:14px}.has-listening-dock{scroll-padding-bottom:150px}.has-listening-dock a,.has-listening-dock button{scroll-margin-bottom:150px}.has-listening-dock .footer{padding-bottom:165px}
@media(max-width:767px){.wordmark{font-size:28px}.hero-title{font-size:25vw}.record-title{font-size:17vw;line-height:1}.footer-name{font-size:27vw}.hero-end{font-size:52px;max-width:10ch}.listening-dock{bottom:max(16px,env(safe-area-inset-bottom));padding:14px}.has-listening-dock .hero-intro{bottom:142px;background:var(--bg)}}
@media(prefers-reduced-motion:reduce){.listening-dock *{transition:none!important;animation:none!important}}