/* ============================================================
   PARHELION — SYSTEM
   Implements "Parhelion Design System.dc.html" §§ 02–07
   Requires tokens.css.
   ============================================================ */

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

/* Height of the sticky nav. An anchored jump must land the target section's
   top edge exactly here, or the gap fills with the previous section. The nav
   is content-sized and differs between breakpoints, so these are close static
   defaults; index.html measures the real height and overwrites --nav-h. */
:root { --nav-h: 83px; }
@media (max-width: 900px) { :root { --nav-h: 80px; } }

html {
  background: var(--void-000);
  scroll-behavior: smooth;
  /* Land anchors flush under the nav. Never pad this out beyond --nav-h:
     any surplus shows as a sliver of the section above. */
  scroll-padding-top: var(--nav-h);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--void-000);
  color: var(--text-primary);
  font-family: var(--font-text);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* height:auto is load-bearing — the width/height attributes that prevent layout
   shift are presentational hints, and without this they beat aspect-ratio. */
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: none; }

::selection { background: rgba(201, 162, 74, 0.3); color: var(--text-primary); }

:where(a, button, [tabindex]):focus-visible {
  outline: 1px solid var(--gold-500);
  outline-offset: 3px;
}

.ph-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ============================================================
   02 · TYPOGRAPHY
   Jost carries the voice — always tracked out, always uppercase.
   Barlow is sentence-case only, never tracked.
   ============================================================ */

.ph-display-xl,
.ph-display-lg,
.ph-h1,
.ph-h2,
.ph-eyebrow,
.ph-label {
  font-family: var(--font-display);
  text-transform: uppercase;
  margin: 0;
}

.ph-display-xl {
  font-weight: 300;
  font-size: var(--size-display-xl);
  letter-spacing: var(--track-display);
  line-height: 1;
  color: var(--gold-400);
}

.ph-display-lg {
  font-weight: 300;
  font-size: var(--size-display-lg);
  letter-spacing: 0.14em;
  line-height: 1.15;
  color: var(--gold-400);
}

.ph-h1 {
  font-weight: 300;
  font-size: var(--size-heading-1);
  letter-spacing: var(--track-heading);
  color: var(--gold-400);
}

.ph-h2 {
  font-weight: 300;
  font-size: var(--size-heading-2);
  letter-spacing: 0.22em;
  color: var(--gold-500);
}

.ph-eyebrow {
  font-weight: 400;
  font-size: var(--size-eyebrow);
  letter-spacing: var(--track-eyebrow);
  color: var(--text-gold);
}

.ph-label {
  font-weight: 400;
  font-size: var(--size-label);
  letter-spacing: var(--track-label);
  color: var(--text-primary);
}

.ph-body {
  font-family: var(--font-text);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  color: var(--text-secondary);
  max-width: 62ch;
  text-wrap: pretty;
  margin: 0;
}

.ph-caption {
  font-family: var(--font-text);
  font-size: var(--size-caption);
  line-height: var(--leading-caption);
  color: var(--text-muted);
  margin: 0;
}

.ph-mono {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* ============================================================
   03 · LAYOUT & PAGE RHYTHM
   Sections alternate void-000 / void-100. That 3% shift is the
   only structural signal — no borders between sections.
   ============================================================ */

.ph-section {
  padding-block: var(--section-y);
  background: var(--void-000);
}

/* Arriving by click is not the same as scrolling in. The full 128px top padding
   is correct rhythm when a section follows another, but on a jump it lands as
   dead air under the nav — nav + padding put the eyebrow a quarter of the way
   down the screen. Pull the landing up so content sits one block-separation
   (64px) below the nav. Negative scroll-margin affects only where an anchor
   comes to rest; the § 07 padding itself is untouched, so nothing moves for a
   reader scrolling through. Goes to zero once --section-y is already 64px. */
.ph-section[id] {
  scroll-margin-top: min(0px, calc(var(--space-6) - var(--section-y)));
}
.ph-section--alt   { background: var(--void-100); }
.ph-section--bleed { padding-block: 0; }

.ph-container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Section header — gold heading left, one arrow link right,
   baseline-aligned. Also the pattern for the outbound store link. */
.ph-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.ph-section-head__title > .ph-eyebrow { display: block; margin-bottom: var(--space-2); }

/* The page darkens toward the footer. */
.ph-descent {
  background: linear-gradient(180deg, var(--void-100) 0%, var(--void-000) 100%);
}

/* ============================================================
   04 · BUTTONS
   Radius 2px — the only rounded thing in the system.
   One solid button per screen, maximum.
   ============================================================ */

.ph-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 15px 34px;
  border: 1px solid var(--gold-500);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-400);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.ph-btn:hover {
  border-color: var(--gold-300);
  color: var(--gold-300);
  background: var(--wash-gold-hover);
}

/* solid · one per screen. Gold fill always takes void ink. */
.ph-btn--solid {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--ink-on-gold);
  font-weight: 500;
  padding: 16px 34px;
}
.ph-btn--solid:hover {
  background: var(--gold-300);
  border-color: var(--gold-300);
  color: var(--ink-on-gold);
}

/* outline + icon · media */
.ph-btn--media { border-color: var(--hairline-active); padding: 15px 30px; }
.ph-btn--media:hover { border-color: var(--gold-500); background: rgba(201, 162, 74, 0.06); }
.ph-btn__icon { font-size: 0.6875rem; line-height: 1; }

/* text + arrow · navigation */
.ph-btn--text {
  border: none;
  padding: 0;
  gap: 12px;
  color: var(--text-gold);
}
.ph-btn--text:hover { color: var(--gold-300); background: none; }
.ph-btn--text .ph-btn__arrow {
  font-size: 0.9375rem;
  transition: transform var(--dur) var(--ease);
}
.ph-btn--text:hover .ph-btn__arrow { transform: translateX(4px); }

.ph-btn--sm { padding: 10px 22px; font-size: 0.6875rem; letter-spacing: 0.2em; }

.ph-btn[aria-disabled="true"],
.ph-btn:disabled {
  border-color: var(--hairline);
  color: var(--text-muted);
  background: none;
  cursor: default;
  pointer-events: none;
}

/* ============================================================
   04 · NAVIGATION
   ============================================================ */

.ph-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(5, 4, 3, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline-faint);
}
.ph-nav__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 26px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.ph-nav__logo { display: block; color: var(--gold-400); width: 170px; flex: none; }
.ph-nav__logo:hover { color: var(--gold-300); }

.ph-nav__links {
  display: flex;
  gap: 44px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ph-nav__link {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-decoration: none;
  padding-bottom: 6px;
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ph-nav__link:hover { color: var(--gold-400); }
.ph-nav__link[aria-current="page"] {
  color: var(--text-primary);
  border-bottom-color: var(--gold-500);
}

.ph-nav__social {
  display: flex;
  gap: 18px;
  align-items: center;
  color: var(--text-gold);
}
.ph-nav__social a {
  color: inherit;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  transition: color var(--dur) var(--ease);
}
.ph-nav__social a:hover { color: var(--gold-300); }
.ph-nav__social svg { width: 17px; height: 17px; fill: currentColor; }

@media (max-width: 900px) {
  .ph-nav__links { display: none; }
}

/* Below 900 the nav is just wordmark and social icons. Five icons plus the
   170px wordmark overruns the viewport on any phone, so both sides scale with
   it rather than stepping at a breakpoint — a fixed tier only moves the cliff
   to whatever width sits just under it. The floors (104px, 10px) are what
   still fits a 320px screen inside the 24px gutters; the ceilings restore the
   desktop values before the links reappear. Dropping an icon was the other
   option, but the set is the band's whole off-site presence. */
@media (max-width: 900px) {
  .ph-nav__logo { width: clamp(104px, 34vw, 170px); }
  .ph-nav__social { gap: clamp(10px, 3vw, 18px); }
}

/* ============================================================
   04 · TRACKLIST ROW
   ============================================================ */

.ph-tracklist { background: var(--void-000); }
.ph-track {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: var(--space-2);
  padding: 20px var(--space-3);
  border-bottom: 1px solid var(--hairline-faint);
  transition: background-color var(--dur) var(--ease);
}
.ph-track__no,
.ph-track__title,
.ph-track__time {
  font-family: var(--font-display);
  text-transform: uppercase;
}
.ph-track__no    { font-size: 0.8125rem; letter-spacing: 0.12em; color: var(--text-muted); }
.ph-track__title { font-size: 0.875rem;  letter-spacing: 0.14em; color: var(--text-primary); }
.ph-track__time  { font-size: 0.8125rem; letter-spacing: 0.10em; color: var(--text-secondary); }

/* Hover is an affordance for interaction, so only rows that are genuinely a
   link or a button get it. A plain listing row must not light up under the
   cursor. Make a row an <a> and the hover returns on its own. */
.ph-track:is(a, button):hover { background: var(--wash-gold); }

/* Playing state — index gold, title gold-400, 5% gold wash.
   Part of the system (§ 04) and shown in the styleguide, but only apply it
   when something is genuinely playing. index.html has no player, so no row
   there carries it. */
.ph-track[aria-current="true"] { background: var(--wash-gold); }
.ph-track[aria-current="true"] .ph-track__no    { color: var(--gold-500); }
.ph-track[aria-current="true"] .ph-track__title { color: var(--gold-400); }
.ph-track[aria-current="true"] .ph-track__time  { color: var(--gold-500); }

/* ============================================================
   04 · TOUR ROW
   date / city / venue / action · 4-col grid, hairline between
   ============================================================ */

.ph-tour { background: var(--void-000); }
.ph-tour__row {
  display: grid;
  grid-template-columns: 150px 1fr 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: 18px var(--space-3);
  border-bottom: 1px solid var(--hairline-faint);
  transition: background-color var(--dur) var(--ease);
}
.ph-tour__row:hover { background: var(--wash-gold); }
.ph-tour__date,
.ph-tour__city,
.ph-tour__venue {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ph-tour__date  { color: var(--text-secondary); }
.ph-tour__city  { color: var(--text-primary); }
.ph-tour__venue { color: var(--text-secondary); }

.ph-tour__row--past { pointer-events: none; }
.ph-tour__row--past .ph-tour__date,
.ph-tour__row--past .ph-tour__city,
.ph-tour__row--past .ph-tour__venue { color: var(--text-muted); }

@media (max-width: 820px) {
  .ph-tour__row {
    grid-template-columns: 1fr auto;
    row-gap: var(--space-1);
    padding-block: var(--space-3);
  }
  .ph-tour__date  { grid-column: 1; }
  .ph-tour__city  { grid-column: 1; grid-row: 2; }
  .ph-tour__venue { grid-column: 1; grid-row: 3; }
  .ph-tour__row > .ph-btn { grid-column: 2; grid-row: 1 / span 3; }
}

/* ============================================================
   04 · CARDS & MEDIA
   Square corners, void-200, lift to void-300 on hover with the
   hairline brightening to 45%. Imagery is always the hero.
   ============================================================ */

.ph-card {
  display: block;
  background: var(--void-200);
  border: 1px solid var(--hairline-faint);
  border-radius: var(--radius-none);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
a.ph-card:hover {
  background: var(--void-300);
  border-color: var(--hairline-active);
}
.ph-card__art {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: cover;
  display: block;
}
.ph-card__body { padding: 20px 20px 24px; }
.ph-card__meta {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-gold);
}
.ph-card__title {
  font-family: var(--font-display);
  font-size: 0.875rem;
  letter-spacing: var(--track-heading);
  text-transform: uppercase;
  color: var(--gold-400);
  margin: 10px 0 0;
}

/* Artwork placeholder — the hatch from the system doc.
   Drop a real image in and this never renders. */
.ph-art-placeholder {
  aspect-ratio: 1 / 1;
  background: repeating-linear-gradient(135deg, #0E0D0B 0 10px, #141210 10px 20px);
  display: grid;
  place-items: center;
}

/* media band · 16:9 */
.ph-media {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--void-000);
  border: 1px solid var(--hairline-faint);
  /* width must be explicit. The block carries aspect-ratio: 16/9 inline, and
     with only min-height to go on the browser solves it the other way round —
     260px tall becomes 462px wide, which overflows the container below about
     510px and puts a horizontal scrollbar on the whole page. With a width to
     work from, aspect-ratio supplies the height, and min-height only ever
     stretches the box downward. */
  width: 100%;
  min-height: 260px;
}
.ph-media__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Scrim — the only overlay photography ever gets. */
.ph-media__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,4,3,0.15) 40%, rgba(5,4,3,0.92) 100%);
}
.ph-media__caption {
  position: absolute;
  left: 28px;
  bottom: 24px;
}
.ph-media__caption .ph-eyebrow { font-size: 0.6875rem; }
.ph-media__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.125rem, 0.9rem + 1vw, 1.625rem);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-primary);
  margin: var(--space-1) 0 0;
}

.ph-play {
  position: relative;
  width: 76px; height: 76px;
  border: 1px solid var(--gold-500);
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--gold-400);
  font-size: 1.125rem;
  cursor: pointer;
  transition: color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.ph-play:hover {
  border-color: var(--gold-300);
  color: var(--gold-300);
  background: var(--wash-gold-hover);
}
/* The player swapped in when .ph-play is clicked. .ph-media is a centring
   grid, so the frame is absolutely positioned to fill it rather than being
   sized by the grid. */
.ph-media__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ============================================================
   04 · PLATFORM LINKS
   Equal-width strip, 2px gaps.
   ============================================================ */

.ph-platforms {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
}
.ph-platform {
  flex: 1 1 140px;
  border: 1px solid var(--hairline-active);
  padding: 18px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-primary);
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ph-platform:hover {
  background: var(--wash-gold-hover);
  border-color: var(--gold-500);
  color: var(--text-primary);
}

/* ============================================================
   06 · PHOTOGRAPHY
   Always full-bleed, never in a card. Top and bottom scrims to
   rgba(5,4,3,.85) so type sits on near-black.
   ============================================================ */

.ph-photo {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  display: grid;
  place-items: end center;
  isolation: isolate;
}
.ph-photo__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.ph-photo__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* § 06 gives 0.55 / 0.10 / 0.85; the extra stop at 74% is what actually
     delivers the stated intent — the statement line sitting on near-black
     rather than on the brightest part of the frame. */
  background: linear-gradient(180deg,
    rgba(5,4,3,0.55) 0%,
    rgba(5,4,3,0.10) 42%,
    rgba(5,4,3,0.74) 74%,
    rgba(5,4,3,0.92) 100%);
}
.ph-photo__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--gutter) var(--space-6);
  text-align: center;
}
.ph-photo__statement {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--size-heading-1);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin: 0;
  text-wrap: balance;
}

/* ============================================================
   05 · LOGO & MOTIF
   ============================================================ */

/* Both marks are vector and recoloured through a CSS mask — the
   letterforms are outlined, so no font file is needed to set the mark.
   `background` is the mark colour; never give these a light ground. */
.ph-mark {
  display: block;
  width: 100%;
  background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
.ph-mark--word {
  aspect-ratio: 1090 / 168;
  -webkit-mask-image: url(parhelion-wordmark.svg);
  mask-image: url(parhelion-wordmark.svg);
}
/* The emblem is never recolored or filled (§ 05) — its metal is a multi-stop
   gradient, so it ships as artwork rather than a mask. Transparent RGBA,
   extracted from the lockup master. */
.ph-emblem {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 680 / 538;
  object-fit: contain;
}

/* Primary lockup — emblem over wordmark on a common vertical axis.
   Clear space equals the wordmark cap height. */
.ph-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  color: var(--gold-400);
}
.ph-lockup__emblem {
  width: min(340px, 50vw);
  filter: drop-shadow(0 0 70px rgba(201, 162, 74, 0.30));
}
.ph-lockup__word { width: min(520px, 74vw); margin: 0; }

/* Texture — filigree and gold dust, 10–20% opacity, bleeding off a
   section edge. Decorative only, never behind body copy. */
.ph-texture {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, var(--void-000) 0%, var(--void-200) 60%, var(--gold-900) 100%);
  opacity: 0.16;
}

/* ============================================================
   03 · GLOW, NOT SHADOW
   Depth comes from light. Elevate by lifting the background one
   void step and adding a gold glow. No drop shadows anywhere.
   ============================================================ */

.ph-glow-soft   { box-shadow: var(--glow-soft) inset; }
.ph-glow-strong { box-shadow: var(--glow-strong) inset; }

/* ============================================================
   FOOTER
   The emblem returns, small and centred, to close the loop
   opened by the hero.
   ============================================================ */

.ph-footer {
  background: var(--void-100);
  border-top: 1px solid var(--hairline-faint);
  padding-block: var(--space-6);
  text-align: center;
}
.ph-footer__emblem {
  width: 76px;
  margin-inline: auto;
  opacity: 0.85;
}
.ph-footer__links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
}
.ph-footer__links a {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.ph-footer__links a:hover { color: var(--gold-400); }

/* ============================================================
   GRID HELPERS
   ============================================================ */

.ph-grid { display: grid; gap: var(--space-4); }
.ph-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ph-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ph-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ph-grid--split { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.ph-span-2 { grid-column: span 2; }

@media (max-width: 1024px) {
  .ph-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph-grid--3 { grid-template-columns: 1fr; }
  .ph-grid--split { grid-template-columns: 1fr; gap: var(--space-5); }
}
@media (max-width: 640px) {
  .ph-grid--4, .ph-grid--2 { grid-template-columns: 1fr; }
  .ph-span-2 { grid-column: span 1; }
  .ph-media__caption { left: var(--space-3); bottom: var(--space-2); }
}