/* ---------------------------------------------------------------
   Sam Behr — sambehr.com
   Palette: paper #f4f2ed · ink #0b0b0c · red #d8001f
--------------------------------------------------------------- */

:root{
  --paper:#f4f2ed;
  --ink:#0b0b0c;
  --red:#d8001f;
  --grey:#5b5953;
  --pad:5vw;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Archivo', Helvetica, Arial, sans-serif;
  overflow-x:hidden;
}

h1,h2{ font-family:'Archivo Black', Impact, sans-serif; font-weight:400; }

a{ color:inherit; }

::selection{ background:var(--red); color:#fff; }

/* The rule above paints selections red with white text, which is invisible on
   the surfaces that are themselves red - the bio block, the hero badge and the
   section tag. There the selection inverts instead, so dragging over the text
   actually looks like it did something. The text was always selectable; only
   the highlight was missing. */
.bio::selection,       .bio *::selection,
.badge::selection,     .badge *::selection,
.tag::selection,       .tag *::selection{
  background:#fff;
  color:var(--red);
}

/* --- MARQUEE ------------------------------------------------- */
.marquee{
  background:var(--ink);
  color:var(--paper);
  padding:11px 0;
  overflow:hidden;
  white-space:nowrap;
  border-bottom:3px solid var(--ink);
}
.marquee__track{
  display:inline-block;
  animation:marq 22s linear infinite;
  font-family:'Archivo Black', Impact, sans-serif;
  font-size:15px;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.marquee__track span{ margin:0 18px; }
.marquee .star{ color:var(--red); }

@keyframes marq{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation:none; }
}

/* --- HERO ---------------------------------------------------- */
.hero{
  padding:5vh var(--pad) 6vh;
  display:grid;
  grid-template-columns:1fr .78fr;
  gap:40px;
  align-items:center;
}

.badge{
  display:inline-block;
  background:var(--red);
  color:#fff;
  font-family:'Archivo Black', Impact, sans-serif;
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:7px 14px;
  transform:rotate(-2deg);
  margin-bottom:24px;
}

.hero h1{
  font-size:clamp(60px, 13vw, 200px);
  line-height:.8;
  margin:0;
  text-transform:uppercase;
  letter-spacing:-.03em;
}

.hero__genre{
  font-weight:800;
  font-size:clamp(16px, 2vw, 22px);
  letter-spacing:.02em;
  text-transform:uppercase;
  margin:24px 0 0;
}

.btn{
  display:inline-block;
  margin-top:26px;
  background:var(--ink);
  color:var(--paper);
  font-family:'Archivo Black', Impact, sans-serif;
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  padding:16px 30px;
  transform:rotate(-1deg);
  transition:background .15s;
}
.btn:hover{ background:var(--red); }

.hero__photo{ position:relative; }
.hero__photo-shadow{
  position:absolute;
  inset:14px -14px -14px 14px;
  background:var(--red);
}
.hero__photo-swap{ position:relative; }
.hero__photo img{
  position:relative;
  width:100%;
  height:auto;            /* required: the img carries width/height attrs for
                             layout stability, and without this the height
                             attribute would force 1800px and stretch the hero */
  display:block;
  border:3px solid var(--ink);
  filter:grayscale(1) contrast(1.1);
  object-fit:cover;
}

/* The colour press shot, painted over the black and white one as a background
   on ::after. Both files are small (104K colour, 476K b/w), so every device
   loads it; what differs is when it shows.
     mouse : hidden, revealed while hovering
     touch : shown by default, tapped to flip to black and white and back  */
.hero__photo-swap::after{
  content:"";
  position:absolute;
  inset:0;
  border:3px solid var(--ink);
  background-image:url("photos/sam-press-web.jpg");
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
}

/* A real pointer: hold to reveal the colour. */
@media (hover:hover) and (pointer:fine){
  .hero__photo-swap:hover::after{ opacity:1; }
}

/* No hover to give: lead with the colour shot, and let a tap toggle it.
   .is-bw is set by the click handler in script.js. */
@media (hover:none){
  .hero__photo-swap{ cursor:pointer; }
  .hero__photo-swap::after{ opacity:1; }
  .hero__photo-swap.is-bw::after{ opacity:0; }
}

@media (prefers-reduced-motion:reduce){
  .hero__photo-swap::after{ transition:none; }
}
.hero__sticker{
  position:absolute;
  top:-16px;
  right:-10px;
  background:var(--paper);
  border:3px solid var(--ink);
  font-family:'Archivo Black', Impact, sans-serif;
  font-size:13px;
  padding:8px 12px;
  transform:rotate(6deg);
  text-transform:uppercase;
}

/* --- SECTION HEADINGS ---------------------------------------- */
.listen h2,
.watch h2,
.releases h2{
  font-size:clamp(38px, 8vw, 100px);
  margin:0;
  text-transform:uppercase;
  line-height:.85;
}
.dot{ color:var(--red); }

.tag{
  background:var(--red);
  color:#fff;
  font-family:'Archivo Black', Impact, sans-serif;
  font-size:13px;
  text-transform:uppercase;
  padding:6px 12px;
  transform:rotate(-2deg);
}

/* --- LISTEN -------------------------------------------------- */
.listen{
  background:var(--ink);
  color:var(--paper);
  padding:8vh var(--pad);
}
.listen h2{ margin-bottom:36px; }

.listen__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  gap:14px;
}
.listen__grid a{
  text-decoration:none;
  border:3px solid var(--paper);
  color:var(--paper);
  font-family:'Archivo Black', Impact, sans-serif;
  font-size:16px;
  text-transform:uppercase;
  padding:18px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  transition:background .15s, border-color .15s;
}
.listen__grid a:hover{
  background:var(--red);
  border-color:var(--red);
}

/* --- WATCH --------------------------------------------------- */
.watch{ padding:8vh var(--pad); }
.watch__head{
  display:flex;
  align-items:baseline;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:30px;
}
.video{
  position:relative;
  width:100%;
  padding-top:56.25%;
  border:3px solid var(--ink);
}
.video iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* --- RELEASES ------------------------------------------------ */
.releases{ padding:4vh var(--pad) 8vh; }
.releases h2{ margin-bottom:36px; }

.releases__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:16px;
}
.release{
  border:3px solid var(--ink);
  padding:20px;
  background:var(--paper);
}
.release__top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:'Archivo Black', Impact, sans-serif;
  font-size:13px;
  text-transform:uppercase;
  margin-bottom:16px;
  gap:10px;
}
.release__n{
  background:var(--ink);
  color:var(--paper);
  padding:3px 9px;
}
.release__status{ color:var(--red); }
.release__title{
  font-family:'Archivo Black', Impact, sans-serif;
  font-size:22px;
  margin:0 0 6px;
  text-transform:uppercase;
  line-height:.95;
}
.release__date{
  font-weight:700;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin:0;
  color:var(--grey);
}

/* Released titles are links out to Spotify; upcoming ones render as plain
   divs and stay unclickable, so only the live ones react to a pointer. */
a.release{
  display:block;
  text-decoration:none;
  color:inherit;
  transition:background .15s, border-color .15s, color .15s;
}
a.release:hover,
a.release:focus-visible{
  background:var(--red);
  border-color:var(--red);
  color:#fff;
}
a.release:hover .release__status,
a.release:focus-visible .release__status,
a.release:hover .release__date,
a.release:focus-visible .release__date{ color:#fff; }
a.release:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }

/* --- BIO ----------------------------------------------------- */
.bio{
  background:var(--red);
  color:#fff;
  padding:9vh var(--pad);
}
.bio p{
  font-weight:800;
  font-size:clamp(20px, 3vw, 38px);
  line-height:1.3;
  max-width:1000px;
  margin:0;
  text-transform:uppercase;
  text-wrap:pretty;
}

/* --- BOOKING ------------------------------------------------- */
.booking{
  padding:9vh var(--pad);
  text-align:center;
}
.booking__label{
  font-family:'Archivo Black', Impact, sans-serif;
  font-size:14px;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin:0 0 20px;
}
.booking__email{
  font-family:'Archivo Black', Impact, sans-serif;
  font-size:clamp(22px, 5vw, 64px);
  text-decoration:none;
  text-transform:lowercase;
  display:inline-block;
  border-bottom:5px solid var(--red);
  word-break:break-word;
  transition:color .15s;
}
.booking__email:hover{ color:var(--red); }

/* --- FOOTER -------------------------------------------------- */
.footer{
  background:var(--ink);
  color:var(--paper);
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:26px var(--pad);
  flex-wrap:wrap;
  gap:16px;
}
.footer__name{
  font-family:'Archivo Black', Impact, sans-serif;
  font-size:15px;
  text-transform:uppercase;
}
.footer__social{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  font-family:'Archivo Black', Impact, sans-serif;
  font-size:12px;
  text-transform:uppercase;
}
.footer__social a{
  text-decoration:none;
  transition:color .15s;
}
.footer__social a:hover{ color:var(--red); }
.footer__copy{ font-size:11px; color:#76746f; }

/* --- MOBILE -------------------------------------------------- */
@media (max-width: 820px){
  :root{ --pad:7vw; }

  .hero{
    grid-template-columns:1fr;
    gap:48px;
    padding-top:6vh;
  }
  .hero__photo{ max-width:460px; }
  .hero__photo-shadow{ inset:10px -10px -10px 10px; }

  .listen__grid{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }
  .listen__grid a{ font-size:14px; padding:16px; }

  .releases__grid{ grid-template-columns:1fr 1fr; }

  .footer{ justify-content:center; text-align:center; }
}

@media (max-width: 520px){
  .releases__grid{ grid-template-columns:1fr; }
  .listen__grid{ grid-template-columns:1fr; }
}


/* --- iOS safe areas ------------------------------------------------------
   The viewport meta now says viewport-fit=cover, so the page paints edge to
   edge on notched iPhones. Every full-bleed section therefore pads itself
   clear of the notch, the rounded corners and the home indicator. env()
   resolves to 0 everywhere else, so this is inert on other devices. */
.hero, .listen, .watch, .releases, .bio, .booking, .footer{
  padding-left:max(var(--pad), env(safe-area-inset-left));
  padding-right:max(var(--pad), env(safe-area-inset-right));
}
.footer{ padding-bottom:max(26px, env(safe-area-inset-bottom)); }
.marquee{ padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); }

.booking__fallback{
  font-family:'Archivo Black', Impact, sans-serif;
  font-size:clamp(18px,4vw,32px);
  margin:0;
}

/* --- touch targets -------------------------------------------------------
   Apple asks for 44x44pt. The footer links are 13px of text, so on a coarse
   pointer they get padding to reach the mark. Scoped to touch, so the desktop
   footer keeps its current spacing. */
@media (pointer:coarse){
  .footer__social{ gap:4px 10px; }
  .footer__social a{ display:inline-block; padding:14px 8px; }
  .listen__grid a{ min-height:56px; }
}