@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@300;400;500&family=Lora:ital,wght@0,400;0,500;1,400&display=swap');

/* ============================================
   TOKENS
   ============================================ */
:root {
  --black:       #0a0a0a;
  --dark:        #111111;
  --surface:     #1a1a1a;
  --border:      #2a2a2a;
  --amber:       #c8853a;
  --amber-dim:   #8a5a24;
  --white:       #f0ede8;
  --muted:       #6a6560;
  --secondary:   #9a948e;

  --font-display: 'Bebas Neue', sans-serif;
  --font-head:    'Oswald', sans-serif;
  --font-body:    'Lora', Georgia, serif;

  --max-w: 960px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: var(--amber); text-decoration: none; }
a:hover { color: var(--white); }

/* ============================================
   NAV
   ============================================ */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem var(--gutter);
  background: linear-gradient(to bottom, rgba(10,10,10,0.95) 0%, transparent 100%);
}

.nav-logo {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}

.nav-links a {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--secondary);
  transition: color 0.2s;
}

.nav-links a:hover { color: var(--white); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--white);
  transition: all 0.3s;
}

/* ============================================
   HERO
   ============================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero-image {
  position: absolute;
  inset: 0;
  background-image: url('../images/hero-banner.png');
  background-size: cover;
  background-position: center center;
  filter: brightness(0.6);
}

.hero-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 30%,
    rgba(10,10,10,0.5) 65%,
    var(--black) 100%
  );
}

.hero-content {
  position: relative;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter) 5rem;
}

.hero-label {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 0.75rem;
}

.hero-tagline {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: clamp(16px, 2.5vw, 22px);
  letter-spacing: 0.08em;
  color: var(--secondary);
  max-width: 600px;
  margin-bottom: 2.5rem;
  line-height: 1.5;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white);
  border: 0.5px solid var(--amber);
  padding: 0.75rem 1.5rem;
  transition: all 0.25s;
}

.hero-cta:hover {
  background: var(--amber);
  color: var(--black);
}

.scroll-hint {
  position: absolute;
  bottom: 2rem;
  right: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.scroll-hint span {
  font-family: var(--font-head);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  writing-mode: vertical-rl;
}

.scroll-line {
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, var(--amber), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* ============================================
   SECTIONS
   ============================================ */
section {
  padding: clamp(4rem, 10vw, 8rem) var(--gutter);
  max-width: var(--max-w);
  margin: 0 auto;
}

.section-label {
  font-family: var(--font-head);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.section-label::after {
  content: '';
  flex: 1;
  height: 0.5px;
  background: var(--border);
  max-width: 80px;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 0.95;
  color: var(--white);
  margin-bottom: 2rem;
  letter-spacing: 0.02em;
}

.section-body {
  font-size: 17px;
  line-height: 1.85;
  color: var(--secondary);
  max-width: 640px;
}

.section-body p + p {
  margin-top: 1.25rem;
}

.amber { color: var(--amber); }

/* ============================================
   DIVIDER LINE
   ============================================ */
.full-divider {
  width: 100%;
  height: 0.5px;
  background: var(--border);
  margin: 0;
}

/* ============================================
   ALBUMS GRID
   ============================================ */
.albums-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 3rem;
}

.album-card {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  cursor: pointer;
}

.album-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease, filter 0.4s ease;
  filter: brightness(0.75);
}

.album-card:hover img {
  transform: scale(1.03);
  filter: brightness(0.9);
}

.album-card-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.5rem;
  background: linear-gradient(to top, rgba(10,10,10,0.95) 0%, transparent 100%);
}

.album-card-title {
  font-family: var(--font-display);
  font-size: 2rem;
  letter-spacing: 0.05em;
  color: var(--white);
  line-height: 1;
  margin-bottom: 0.35rem;
}

.album-card-sub {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber);
}

.album-card-links {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

.stream-btn {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--white);
  border: 0.5px solid rgba(255,255,255,0.25);
  padding: 0.35rem 0.75rem;
  transition: all 0.2s;
  white-space: nowrap;
}

.stream-btn:hover {
  border-color: var(--amber);
  color: var(--amber);
}

/* ============================================
   THE STORY
   ============================================ */
.story-section {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(4rem, 10vw, 8rem) var(--gutter);
}

.story-intro {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  line-height: 1.2;
  color: var(--white);
  max-width: 780px;
  margin-bottom: 3rem;
  letter-spacing: 0.03em;
}

.story-blocks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem 4rem;
  margin-top: 3rem;
}

.story-block-title {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 0.75rem;
}

.story-block-text {
  font-size: 16px;
  line-height: 1.85;
  color: var(--secondary);
}

/* ============================================
   FOR MEN
   ============================================ */
.formen-intro {
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  line-height: 1.75;
  color: var(--white);
  max-width: 680px;
  margin-bottom: 3rem;
  font-style: italic;
}

.formen-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 4rem;
}

.formen-card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  padding: 1.75rem;
}

.formen-card-num {
  font-family: var(--font-display);
  font-size: 3rem;
  color: var(--amber);
  opacity: 0.4;
  line-height: 1;
  margin-bottom: 0.75rem;
}

.formen-card-title {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 0.5rem;
}

.formen-card-text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--secondary);
}

.resources-title {
  font-family: var(--font-head);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.25rem;
}

.resources-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.resources-list li {
  border-left: 2px solid var(--amber-dim);
  padding-left: 1rem;
}

.resources-list a {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.05em;
  color: var(--white);
}

.resources-list .res-desc {
  font-size: 13px;
  color: var(--muted);
  margin-top: 0.2rem;
}

/* ============================================
   JOURNAL
   ============================================ */
.journal-entry {
  border-top: 0.5px solid var(--border);
  padding: 2rem 0;
}

.journal-date {
  font-family: var(--font-head);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.journal-title {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.05em;
  color: var(--white);
  margin-bottom: 1rem;
}

.journal-text {
  font-size: 16px;
  line-height: 1.85;
  color: var(--secondary);
  max-width: 680px;
}

/* Paragraph spacing inside an entry. Replaces the hand-typed
   style="margin-top:1rem;" that every paragraph after the first
   used to carry. The first paragraph is unmatched and keeps
   margin-top: 0 from the global reset, exactly as before. */
.journal-text p + p {
  margin-top: 1rem;
}

/* The last entry closes the list with a bottom rule. Replaces the
   inline border-bottom that had to be moved by hand whenever an
   entry was added. :last-child and :last-of-type cannot be used
   here because a non-entry div follows the entries inside the
   same section, so neither would ever match an entry. */
.journal-entry:not(:has(~ .journal-entry)) {
  border-bottom: 0.5px solid var(--border);
}

/* Read more / Read less expander for long entries.
   Built on native <details>/<summary>, so it needs no JavaScript:
   with scripts disabled the control still opens and the hidden
   paragraphs are still reachable, and browser find-in-page can
   still open it. The label swaps by toggling two real spans on
   the [open] attribute, so the words "Read more" and "Read less"
   are genuine text in the DOM rather than generated content. */
.journal-more {
  margin-top: 1rem;
}

.journal-more > summary {
  display: inline-block;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--amber);
  transition: color 0.2s;
  outline-offset: 2px;
}

/* Hide the default disclosure triangle. Safari needs the
   -webkit- pseudo-element as well as list-style: none. */
.journal-more > summary::-webkit-details-marker {
  display: none;
}

.journal-more > summary::marker {
  content: "";
}

.journal-more > summary:hover {
  color: var(--white);
}

/* Label swap, driven only by the [open] attribute. */
.journal-more .journal-more-less {
  display: none;
}

.journal-more[open] .journal-more-open {
  display: none;
}

.journal-more[open] .journal-more-less {
  display: inline;
}

/* The first paragraph after the summary needs the same rhythm
   as p + p, which cannot match it because summary precedes it. */
.journal-more > summary + p {
  margin-top: 1rem;
}

/* ============================================
   CONTACT
   ============================================ */
.contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.contact-statement {
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.85;
  color: var(--secondary);
}

.contact-statement strong {
  color: var(--white);
  font-weight: 400;
}

form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

label {
  font-family: var(--font-head);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

input, textarea {
  background: var(--surface);
  border: 0.5px solid var(--border);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 15px;
  padding: 0.75rem 1rem;
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
  resize: vertical;
}

input:focus, textarea:focus {
  border-color: var(--amber);
}

textarea { min-height: 140px; }

.form-submit {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--black);
  background: var(--amber);
  border: none;
  padding: 0.875rem 2rem;
  cursor: pointer;
  transition: background 0.2s;
  align-self: flex-start;
}

.form-submit:hover { background: var(--white); }

/* ============================================
   ALBUM ACTIONS (button row under each album)
   ============================================ */
.album-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ============================================
   PLAYER AREA (streaming embeds)
   ============================================ */
.player-area {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 3rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.player-area iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--border);
  /* Kept, not removed. Both embeds paint their own opaque background
     once loaded, so this is never the steady-state appearance -- it is
     the placeholder that shows while loading="lazy" defers the fetch.
     Removing it would leave an invisible hole there instead. The
     "single dark mass" was the 16px gap and the sub-pixel border, both
     fixed above. */
  background: var(--surface);
}

/* Spotify picks its layout from the height it is given, not the width:
   152px renders the compact bar, 352px the expanded player with an
   in-embed track list. The compact bar is sized to fill exactly 152px,
   so it cannot leave dead space, and the page already prints the full
   track list in its own markup above. */
.player-spotify { height: 152px; }

/* Apple's album widget scrolls its track list inside the box, so the
   height has to scale with track count. Apple's documented 450px
   default shows about six 44px rows, which puts the fixed chrome
   (artwork header and controls) at roughly 186px. */
.player-apple-495         { height: 580px; }  /* 49/5 - 9 tracks: 186 + 9x44 */
.player-apple-playing-man { height: 500px; }  /* Playing Man - 7 tracks: 186 + 7x44 */

/* ============================================
   NOTE PANEL (AI disclosure and mental health note)
   ============================================ */
.ai-note {
  background: var(--surface);
  border-left: 2px solid var(--amber-dim);
  padding: 1.25rem 1.5rem;
  margin-top: 3rem;
}

.ai-note p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--secondary);
  font-style: italic;
}

/* ============================================
   FOOTER
   ============================================ */
footer {
  border-top: 0.5px solid var(--border);
  padding: 2.5rem var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-logo {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}

.footer-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

.footer-links a {
  font-family: var(--font-head);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.2s;
}

.footer-links a:hover { color: var(--amber); }

.footer-copy {
  font-family: var(--font-head);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.05em;
}

/* ============================================
   MOBILE NAV
   ============================================ */
@media (max-width: 768px) {
  .nav-toggle { display: flex; }

  .nav-links {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--dark);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    z-index: 99;
  }

  .nav-links.open { display: flex; }
  .nav-links a { font-size: 16px; }

  .albums-grid { grid-template-columns: 1fr; }
  .story-blocks { grid-template-columns: 1fr; gap: 2rem; }
  .formen-cards { grid-template-columns: 1fr; }
  .contact-wrap { grid-template-columns: 1fr; gap: 2.5rem; }

  /* The three buttons need roughly 427px and a phone column is about
     335px, so "All Platforms" wrapped to a line of its own. An outlined
     orphan button passing under the fixed header read as a collision.
     Stacking removes the ragged row entirely. */
  .album-actions { flex-direction: column; }
  .album-actions .hero-cta { justify-content: center; }

  /* nav is position: fixed with a gradient that fades to transparent,
     so scrolling content showed straight through its lower half. Give
     it an opaque floor at the sizes where the collision happens. */
  nav {
    background: var(--black);
    border-bottom: 1px solid var(--border);
  }

  footer {
    flex-direction: column;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-line { animation: none; }
  * { transition: none !important; }
}