/* =========================================================
   Naphet — Global Stylesheet
   Black / white split as the core visual language.
   ========================================================= */

:root {
  --black: #050505;
  --white: #FAFAFA;
  --hero-height: 360px;
  --nav-gap: 0.9rem;
  --content-max-width: 78rem;
  --transition-fast: 180ms ease;
  --transition-medium: 220ms ease;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
    Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

/* The black/white split is a single continuous background on <body>,
   so it stays visually unbroken behind the hero, the main content and
   the footer, regardless of page length. Individual pages never need
   to redeclare it. */
body {
  margin: 0;
  background: linear-gradient(
    to right,
    var(--black) 0%,
    var(--black) 50%,
    var(--white) 50%,
    var(--white) 100%
  );
  color: var(--black);
  font-family: inherit;
  line-height: 1.6;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

/* -----------------------------------------------------------
   Skip link (accessibility)
   ----------------------------------------------------------- */

.skip-link {
  position: absolute;
  top: -3rem;
  left: 1rem;
  background: var(--white);
  color: var(--black);
  padding: 0.6rem 1rem;
  z-index: 200;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 1rem;
}

/* -----------------------------------------------------------
   Hero
   ----------------------------------------------------------- */

.hero {
  position: relative;
  width: 100%;
  min-height: var(--hero-height);
  background-image: url("../images/naphet-hero.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  overflow: hidden;
}

/* Fallback split behind the image in case of slow load / no-image */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--black) 0%,
    var(--black) 50%,
    var(--white) 50%,
    var(--white) 100%
  );
  z-index: -1;
}

/* -----------------------------------------------------------
   Navigation (overlaid, left side, on black area)
   ----------------------------------------------------------- */

.site-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  display: flex;
  align-items: center;
  padding-inline-start: clamp(1.25rem, 4vw, 3rem);
  z-index: 10;
}

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.site-nav__link {
  display: inline-block;
  position: relative;
  color: var(--white);
  text-decoration: none;
  font-size: clamp(0.82rem, 1.3vw, 0.98rem);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 0.32rem 0.1rem;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-fast), opacity var(--transition-fast);
  opacity: 0.82;
  /* At narrow viewports the hero artwork is cropped tightly enough that
     some nav items sit over lighter parts of the illustration rather
     than the pure black half. This halo keeps the white text legible
     regardless of what's behind it, without adding a visible background. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 6px rgba(0, 0, 0, 0.6);
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  opacity: 1;
  border-top-color: var(--white);
  border-bottom-color: var(--white);
}

.site-nav__link[aria-current="page"] {
  opacity: 1;
  border-top-color: var(--white);
  border-bottom-color: var(--white);
}

.site-nav__link:focus-visible {
  outline: 1px dashed var(--white);
  outline-offset: 3px;
}

/* -----------------------------------------------------------
   Social links (overlaid, lower-right of hero)
   ----------------------------------------------------------- */

.hero-social {
  position: absolute;
  right: clamp(1rem, 4vw, 3rem);
  bottom: clamp(0.75rem, 3vh, 1.5rem);
  display: flex;
  gap: clamp(0.85rem, 2vw, 1.4rem);
  z-index: 10;
}

.hero-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Icons sit over the white half of the hero, so they read in black. */
  color: var(--black);
  opacity: 0.55;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.hero-social__link img {
  width: clamp(18px, 2.2vw, 28px);
  height: clamp(18px, 2.2vw, 28px);
  /* Matches the nav halo above: at narrow viewports the artwork's crop
     can place icons over darker parts of the illustration rather than
     clean white. A light halo keeps them legible either way. */
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9))
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.9));
}

.hero-social__link:hover,
.hero-social__link:focus-visible {
  opacity: 1;
  transform: translateY(-2px);
}

.hero-social__link:focus-visible {
  outline: 1px dashed var(--black);
  outline-offset: 4px;
}

/* -----------------------------------------------------------
   Language switcher (overlaid, upper-right of hero)
   ----------------------------------------------------------- */

.lang-switch {
  position: absolute;
  top: clamp(0.75rem, 3vh, 1.5rem);
  right: clamp(1rem, 4vw, 3rem);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: clamp(0.72rem, 1.1vw, 0.85rem);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 600;
}

.lang-switch__link {
  /* Sits over the white half of the hero, so it reads in black,
     matching the social icons below it. */
  color: var(--black);
  text-decoration: none;
  opacity: 0.55;
  transition: opacity var(--transition-fast);
}

.lang-switch__link:hover,
.lang-switch__link:focus-visible {
  opacity: 1;
}

.lang-switch__link[aria-current="page"] {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lang-switch__link:focus-visible {
  outline: 1px dashed var(--black);
  outline-offset: 4px;
}

.lang-switch__sep {
  opacity: 0.4;
}

/* -----------------------------------------------------------
   Main content area
   ----------------------------------------------------------- */

main {
  position: relative;
}

.page-section {
  position: relative;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.25rem, 5vw, 3rem);
}

.content-block {
  max-width: var(--content-max-width);
  margin-inline: auto;
}

.content-block--narrow {
  max-width: 42rem;
}

/* -----------------------------------------------------------
   Content surfaces
   Solid, high-contrast panels that sit on top of the global
   split. They are allowed to cross the center boundary — the
   solid fill keeps the text readable regardless of which half
   of the viewport it lands on, while the split remains visible
   in the margins around the surface.
   ----------------------------------------------------------- */

.surface {
  padding: clamp(1.5rem, 4vw, 3rem);
}

.surface--light {
  background: var(--white);
  color: var(--black);
}

.surface--dark {
  background: var(--black);
  color: var(--white);
}

/* A narrower, centered surface used for a single deliberate
   statement that crosses the boundary (e.g. an intro block). */
.surface--crossing {
  max-width: 52rem;
  margin-inline: auto;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0.7;
  margin: 0 0 0.75rem;
}

.page-title {
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 600;
  margin: 0 0 1rem;
  letter-spacing: -0.01em;
}

.section-title {
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  font-weight: 600;
  margin: 0 0 0.9rem;
  letter-spacing: -0.01em;
}

/* Reset the browser's default italic so legal/contact addresses read
   like the rest of the editorial body copy. */
address {
  font-style: normal;
  margin: 0 0 1.5rem;
}

/* Stacked news entries — plain list, no borders or rules; separation
   comes entirely from generous vertical spacing, consistent with the
   rest of the site's editorial (no-divider-lines) approach. */
.news-list {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

.news-item {
  margin: 0 0 2.25rem;
}

.news-item:last-child {
  margin-bottom: 0;
}

.news-item .section-title {
  margin-bottom: 0.5rem;
}

/* Three overlapping, fanned single covers for the "new songs" news
   item — sized purely with clamp()/calc() off a single --cover-size
   custom property, so the whole composition scales down smoothly on
   narrow viewports without ever cropping a cover or overflowing. */
.news-covers {
  --cover-size: clamp(84px, 18vw, 132px);
  position: relative;
  width: calc(var(--cover-size) * 2.2);
  height: calc(var(--cover-size) + 1.75rem);
  margin: 1.25rem 0 1.5rem;
}

.news-covers__item {
  position: absolute;
  top: 0.75rem;
  width: var(--cover-size);
  height: var(--cover-size);
  object-fit: cover;
  box-shadow: 0 10px 22px rgba(5, 5, 5, 0.22);
}

.news-covers__item--left {
  left: 0;
  transform: rotate(-6deg);
  z-index: 1;
}

.news-covers__item--center {
  left: calc(var(--cover-size) * 0.6);
  top: 0.4rem;
  transform: rotate(0deg);
  z-index: 3;
}

.news-covers__item--right {
  left: calc(var(--cover-size) * 1.2);
  transform: rotate(6deg);
  z-index: 2;
}

.placeholder {
  border: 1px dashed currentColor;
  opacity: 0.75;
  padding: 1rem 1.25rem;
  font-size: 0.92rem;
  margin: 1rem 0;
}

/* All page sections used to open with a divider line (.rule). The line
   has been removed site-wide; the section spacing alone now carries the
   separation between sections, tightened slightly on every section after
   the first so the transition reads as a deliberate editorial break
   rather than a leftover gap. */
main .page-section:not(:first-child) {
  padding-top: clamp(1.75rem, 4vw, 3rem);
}

/* Two-region layout used sparingly, only where it genuinely
   suits the content (e.g. album pages). Not used everywhere. */
.split-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
}

@media (min-width: 768px) {
  .split-columns {
    grid-template-columns: 1fr 1fr;
  }
}

/* -----------------------------------------------------------
   Album header (cover + intro copy)
   ----------------------------------------------------------- */

.album-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  margin-top: 1.25rem;
}

.album-header__cover {
  width: clamp(140px, 22vw, 240px);
  height: auto;
  flex-shrink: 0;
}

.album-header__body {
  flex: 1 1 16rem;
  min-width: 16rem;
}

.album-header__body p {
  margin: 0 0 1rem;
}

.album-header__body p:last-child {
  margin-bottom: 0;
}

/* Compact teaser version used on the home/news page. */
.album-teaser {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.25rem;
}

.album-teaser__cover {
  width: 96px;
  height: 96px;
  object-fit: cover;
  flex-shrink: 0;
}

.album-teaser__body {
  flex: 1 1 12rem;
  min-width: 12rem;
}

.album-teaser__body p {
  margin: 0 0 0.75rem;
}

/* -----------------------------------------------------------
   Tracklist / browser audio player / lyrics disclosure
   ----------------------------------------------------------- */

.tracklist {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}

.track {
  display: grid;
  grid-template-columns: 1.75rem 3.25rem 1fr;
  grid-template-rows: auto auto auto;
  align-items: stretch;
  column-gap: 0.9rem;
  border-bottom: 1px solid rgba(5, 5, 5, 0.15);
  border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
  padding: 0.9rem 0;
}

.track:first-child {
  border-top: 1px solid rgba(5, 5, 5, 0.15);
  border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}

.track__num {
  grid-column: 1;
  grid-row: 1;
  text-align: right;
  opacity: 0.55;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  align-self: start;
  padding-top: 0.2rem;
}

/* The cover thumbnail stretches to match the combined height of the
   title row (row 1) and the "Lyrics" toggle button (row 2) directly
   beneath it — the expandable lyrics text lives in its own row 3, so
   revealing it never grows rows 1-2 and the cover never resizes. */
.track__cover {
  grid-column: 2;
  grid-row: 1 / 3;
  width: 3.25rem;
  height: 100%;
  object-fit: cover;
  display: block;
}

.track__body {
  grid-column: 3;
  grid-row: 1;
  min-width: 0;
}

.track__row {
  display: grid;
  grid-template-columns: 1fr 2.25rem auto;
  align-items: center;
  column-gap: 0.9rem;
  row-gap: 0.5rem;
}

.track__title {
  min-width: 0;
  margin: 0;
  font-weight: 500;
  overflow-wrap: break-word;
}

.track__play {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  background: none;
  color: inherit;
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.track__play::before {
  content: "\25B6";
  transform: translateX(1px);
}

.track__play.is-playing::before {
  content: "\275A\275A";
  transform: none;
}

.track__play:hover,
.track__play:focus-visible {
  background: rgba(5, 5, 5, 0.12);
  background: color-mix(in srgb, currentColor 12%, transparent);
}

.track__play:focus-visible {
  outline: 1px dashed currentColor;
  outline-offset: 3px;
}

.track__links {
  /* Fixed-width grid: Spotify / Apple Music / Amazon Music / YouTube always
     occupy the same 4 slots, whether the link is available or not, so the
     Play button and every icon column stay aligned across all tracks. */
  display: grid;
  grid-template-columns: repeat(4, 1.75rem);
  align-items: center;
  justify-items: center;
}

.track__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.track__link img {
  width: 16px;
  height: 16px;
}

.track__link:hover,
.track__link:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
}

.track__link:focus-visible {
  outline: 1px dashed currentColor;
  outline-offset: 3px;
}

/* Unavailable platform link: same slot, same icon, clearly muted and
   non-interactive (no href, not focusable, not clickable). */
.track__link--unavailable {
  opacity: 0.22;
  cursor: default;
  pointer-events: none;
}

.track__link--unavailable img {
  filter: grayscale(1);
}

/* The platform icons are monochrome SVGs that render with their default
   (black) stroke colour — an <img>-referenced SVG does not inherit
   `currentColor` from the page. On dark surfaces (the black album) that
   makes them invisible, so invert them to a very light grey instead;
   unavailable icons stay a muted dark grey to read as clearly disabled. */
.surface--dark .track__link img {
  filter: invert(1);
}

.surface--dark .track__link--unavailable img {
  filter: invert(1) grayscale(1);
}

.surface--dark .track__link {
  opacity: 0.85;
}

.surface--dark .track__link--unavailable {
  opacity: 0.3;
}

/* Plain toggle button (not native <details>/<summary>) so the always-
   visible "Lyrics" label can live in its own grid row (row 2, right
   under the title) while the tall revealed text sits in row 3 — see
   the .track__cover comment above and assets/js/main.js. */
.track__lyrics-toggle {
  grid-column: 3;
  grid-row: 2;
  min-width: 0;
  margin: 0.6rem 0 0;
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: inherit;
  opacity: 0.75;
  transition: opacity var(--transition-fast);
}

.track__lyrics-toggle::before {
  content: "+";
  font-weight: 600;
}

.track__lyrics-toggle[aria-expanded="true"]::before {
  content: "\2013";
}

.track__lyrics-toggle:hover,
.track__lyrics-toggle:focus-visible {
  opacity: 1;
}

.track__lyrics-toggle:focus-visible {
  outline: 1px dashed currentColor;
  outline-offset: 3px;
}

.track__lyrics-text {
  grid-column: 3;
  grid-row: 3;
  font-family: inherit;
  font-size: 0.88rem;
  line-height: 1.6;
  white-space: pre-wrap;
  margin: 0.75rem 0 0;
  padding: 1rem 1.25rem;
  max-width: 38rem;
  background: rgba(5, 5, 5, 0.05);
  background: color-mix(in srgb, currentColor 6%, transparent);
}

@media (max-width: 480px) {
  .track__row {
    grid-template-columns: 2.25rem 1fr;
    grid-template-areas:
      "title title"
      "play links";
    row-gap: 0.6rem;
  }

  .track__title {
    grid-area: title;
  }

  .track__play {
    grid-area: play;
  }

  .track__links {
    grid-area: links;
    justify-content: start;
    justify-items: start;
  }
}

/* -----------------------------------------------------------
   Footer
   The footer itself stays transparent so the global split
   remains visible behind it. Its content sits inside a solid
   surface bar so the copyright/links stay readable regardless
   of where they land relative to the boundary.
   ----------------------------------------------------------- */

.site-footer {
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.25rem, 5vw, 3rem) 2.5rem;
}

.site-footer__bar {
  max-width: var(--content-max-width);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  background: var(--white);
  color: var(--black);
}

.site-footer__links {
  display: flex;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__links a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-fast);
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
  border-bottom-color: currentColor;
}

/* -----------------------------------------------------------
   Responsive adjustments
   ----------------------------------------------------------- */

@media (max-width: 767px) {
  :root {
    --hero-height: 280px;
  }

  .site-nav {
    padding-inline-start: 1rem;
  }

  .site-nav__list {
    gap: 0.4rem;
  }

  .hero-social {
    right: 1rem;
    bottom: 0.75rem;
    gap: 0.75rem;
  }

  .lang-switch {
    top: 0.6rem;
    right: 1rem;
  }
}

@media (max-width: 430px) {
  :root {
    --hero-height: 240px;
  }

  .site-nav__link {
    font-size: 0.62rem;
    letter-spacing: 0.06em;
  }

  .hero-social__link svg {
    width: 16px;
    height: 16px;
  }

  .lang-switch {
    font-size: 0.62rem;
    gap: 0.3rem;
  }
}

@media (min-width: 1920px) {
  :root {
    /* Wide viewports need a taller hero so the very wide source
       image (1754×329) isn't forced to cover width by cropping
       its height — this is what previously clipped the wordmark. */
    --hero-height: 480px;
  }
}

@media (min-width: 2560px) {
  :root {
    --hero-height: 620px;
  }
}

/* -----------------------------------------------------------
   Reduced motion
   ----------------------------------------------------------- */

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