/*
Theme Name: Mr. Po — Stay Clean
Theme URI: https://example.com
Author: Mr. Po
Description: One-page artist/release site for Mr. Po's 1998 record "Stay Clean," announcing its digital re-release on Spotify and YouTube Music. All copy and images are editable from wp-admin via Advanced Custom Fields.
Version: 1.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mr-po
*/

:root{
  --cream: oklch(0.95 0.025 75);
  --muted-bg: oklch(0.9 0.01 70);
  --ink: oklch(0.2 0.02 40);
  --rust: oklch(0.55 0.14 45);
  --red: oklch(0.52 0.16 25);
  --red-hover: oklch(0.42 0.16 25);
  --label-grey: oklch(0.45 0.02 40);
  --cream-chip: oklch(0.88 0.03 70);
  --near-white: oklch(0.97 0.01 70);
}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--cream);font-family:'Work Sans',sans-serif;color:var(--ink);}
a{color:var(--red);text-decoration:none;}
a:hover{color:var(--red-hover);}
.label{font-family:'IBM Plex Mono',monospace;letter-spacing:0.14em;text-transform:uppercase;}
img{display:block;max-width:100%;}

.wrap{max-width:1400px;margin:0 auto;}

.nav{display:flex;justify-content:space-between;align-items:center;padding:32px 48px;flex-wrap:wrap;gap:16px;}
.wordmark{font-family:'Anton',sans-serif;font-size:26px;letter-spacing:0.02em;}
.nav-links{display:flex;gap:36px;flex-wrap:wrap;}
.nav-links a{font-size:14px;}

.hero{position:relative;height:760px;margin:0 32px;overflow:hidden;box-shadow:0 20px 50px oklch(0.2 0.02 40 / 0.25);}
.hero-photo{width:100%;height:100%;object-fit:cover;filter:sepia(0.3) contrast(1.12) saturate(0.75);}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,oklch(0.2 0.02 40/0.1) 0%,oklch(0.15 0.02 40/0.85) 100%);pointer-events:none;}
.hero-chips{position:absolute;top:191px;left:148px;display:flex;gap:14px;flex-wrap:wrap;max-width:calc(100% - 32px);}
.chip{padding:8px 16px;font-size:16px;box-shadow:0 4px 10px oklch(0.2 0.02 40/0.3);white-space:nowrap;}
.chip-cream{background:var(--cream-chip);transform:rotate(-3deg);}
.chip-red{background:var(--red);color:var(--near-white);transform:rotate(2deg);}
.hero-copy{position:absolute;left:48px;right:48px;bottom:56px;}
.hero-eyebrow{color:var(--near-white);font-size:20px;margin-bottom:8px;}
.hero-title{font-family:'Anton',sans-serif;font-size:clamp(56px,12vw,150px);line-height:0.85;color:var(--near-white);text-transform:uppercase;}
.hero-ctas{display:flex;align-items:center;gap:14px;margin-top:20px;flex-wrap:wrap;}

.btn{display:inline-block;padding:14px 30px;font-weight:600;transition:background-color .15s ease,opacity .15s ease,color .15s ease;}
.btn-solid-rust{background:var(--rust);color:var(--near-white);}
.btn-solid-rust:hover{background:oklch(0.48 0.14 45);color:var(--near-white);}
.btn-outline-light{border:2px solid var(--near-white);color:var(--near-white);}
.btn-outline-light:hover{background:oklch(0.95 0.02 70/0.12);color:var(--near-white);}
.btn-outline-dark{border:2px solid var(--ink);color:var(--ink);}
.btn-outline-dark:hover{background:oklch(0.2 0.02 40/0.08);color:var(--ink);}

section{padding:100px 48px;}

.section-label{font-size:16px;margin-bottom:16px;}

#band{padding:140px 48px 100px;}
.band-row{display:flex;gap:64px;align-items:flex-start;flex-wrap:wrap;}
.band-intro{flex:1;min-width:320px;}
.band-intro p{font-size:26px;line-height:1.45;max-width:560px;margin:0;}
.band-credit{font-size:14px;color:var(--label-grey);margin-top:28px;}
.band-grid{flex:1.2;min-width:360px;display:grid;grid-template-columns:1fr 1fr;gap:28px;}
.member-name{font-family:'Anton',sans-serif;font-size:24px;text-transform:uppercase;}
.member-role{font-size:13px;color:var(--label-grey);margin-top:6px;}

#record{padding:100px 48px;background:var(--ink);color:oklch(0.95 0.02 70);margin:0 32px;}
.record-row{display:flex;gap:64px;flex-wrap:wrap;}
.record-intro{flex:1;min-width:300px;}
.record-intro p{font-size:22px;line-height:1.5;max-width:460px;margin:0;}
.disc-art{width:220px;height:220px;margin-top:36px;box-shadow:0 14px 30px oklch(0 0 0/0.4);overflow:hidden;}
.disc-art img{width:100%;height:100%;object-fit:cover;}
.tracklist{flex:1.3;min-width:340px;display:flex;flex-direction:column;}
.track{display:flex;justify-content:space-between;padding:16px 0;border-bottom:1px solid oklch(0.4 0.02 40);font-size:14px;}
.track:last-child{border-bottom:none;}

#story{padding:120px 48px;}
.story-row{display:flex;gap:64px;flex-wrap:wrap;align-items:center;}
.story-intro{flex:1;min-width:320px;}
.story-intro p{font-size:26px;line-height:1.45;max-width:520px;margin:0;}
.story-lists{display:flex;gap:48px;margin-top:36px;flex-wrap:wrap;}
.story-lists .list-label{font-size:14px;color:var(--label-grey);margin-bottom:10px;}
.story-lists .list-body{font-size:16px;line-height:1.8;}
.story-photos{flex:1;min-width:320px;display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.story-photo{height:220px;box-shadow:0 12px 26px oklch(0.2 0.02 40/0.25);overflow:hidden;}
.story-photo img{width:100%;height:100%;object-fit:cover;}
.story-photo.rotate-neg{transform:rotate(-2deg);}
.story-photo.rotate-pos{transform:rotate(2deg);margin-top:40px;}

#follow{padding:140px 48px;text-align:center;background:var(--muted-bg);margin:0 32px;}
.follow-eyebrow{font-size:16px;margin-bottom:20px;}
.follow-title{font-family:'Anton',sans-serif;font-size:clamp(40px,9vw,96px);text-transform:uppercase;line-height:0.95;}
.follow-sub{font-size:16px;color:var(--label-grey);margin:28px 0 36px;}
.follow-ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}

#thanks p{font-size:16px;line-height:1.9;max-width:900px;color:oklch(0.3 0.02 40);}

.site-footer{padding:40px 48px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;}
.site-footer span{font-size:13px;color:var(--label-grey);}

@media (max-width: 900px){
  .band-row, .record-row, .story-row{gap:36px;}
  section{padding:64px 24px;}
  #band{padding:96px 24px 64px;}
  #record, #follow{margin:0 16px;}
  .hero{margin:0 16px;height:520px;}
  .hero-chips{top:24px;left:24px;}
  .hero-copy{left:24px;right:24px;bottom:32px;}
  .nav{padding:24px;}
  .nav-links{gap:20px;}
  #story{padding:80px 24px;}
  #follow{padding:96px 24px;}
}