/* ==========================================================================
   THE GRAY MAN — a musical by Eric Sorrels
   Base styles + texture system. Duotone: aged paper cream / deep ink.
   ========================================================================== */

:root {
  --paper: #ede8dd;
  --paper-dim: #e2dcca;
  --paper-shadow: #d3ccb8;
  --ink: #1b1a17;
  --ink-soft: #35322c;
  --ink-faint: #5c584e;
  --gray-mid: #8b8579;

  --font-display: 'Oswald', sans-serif;
  --font-body: 'Josefin Sans', sans-serif;

  --tracking-wide: 0.28em;
  --tracking-wider: 0.4em;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  overflow-x: hidden;
}

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

/* Anything with the hidden attribute stays hidden, no matter what
   other display rules apply (e.g. the flex-based password gate). */
[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------
   Shared texture layers — paper grain + halftone dot + vignette.
   Applied as pseudo-elements so any section can opt in with a class.
   -------------------------------------------------------------------- */

.texture-grain {
  position: relative;
}

.texture-grain::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

.texture-halftone {
  position: relative;
}

/* A fine printer's screen — small dots packed tightly and laid on
   lightly, so it reads as newsprint grain rather than visible halftone
   dots. Used on every paper-toned surface across the site. */
.texture-halftone::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: radial-gradient(circle, var(--ink) 0.5px, transparent 0.9px);
  background-size: 3px 3px;
}

.texture-vignette {
  position: relative;
}

.texture-vignette::before,
.texture-vignette::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

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

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 6vh 6vw 6vh;
  isolation: isolate;
  overflow: hidden;

  /* The key art photograph. Two soft gradients sit over it: one melts
     the very top into the paper color so the page begins seamlessly,
     the other settles the bottom into ink so the next section can rise
     out of the dark water. */
  background-color: var(--paper);
  background-image:
    linear-gradient(
      to bottom,
      var(--paper) 0%,
      rgba(237, 232, 221, 0.6) 10%,
      rgba(237, 232, 221, 0) 26%
    ),
    linear-gradient(
      to top,
      var(--ink) 0%,
      rgba(27, 26, 23, 0.88) 9%,
      rgba(27, 26, 23, 0.55) 18%,
      rgba(27, 26, 23, 0.18) 28%,
      rgba(27, 26, 23, 0) 40%
    ),
    /* hero-ocean.jpg is a compressed copy of hero-ocean.png — visually
       identical, but a fifth of the size so the page loads quickly.
       The .png remains the untouched original. If you ever replace the
       photograph, ask Claude to regenerate this .jpg from it. */
    url('../img/hero-ocean.jpg');
  background-size: cover;
  /* The photograph is portrait, so a wide screen can only show a band of
     it. Favouring the upper-middle keeps pale sky behind the title and
     lets the wave break low, the way the poster is composed. On tall or
     phone-shaped screens the whole photograph fits and this has no
     effect. */
  background-position: center 62%;
  background-repeat: no-repeat;
}

.hero__fog {
  position: absolute;
  inset: -10% -20%;
  pointer-events: none;
  z-index: 1;
  background-image:
    radial-gradient(ellipse 40% 18% at 20% 78%, rgba(237, 232, 221, 0.35), transparent 70%),
    radial-gradient(ellipse 35% 15% at 70% 85%, rgba(237, 232, 221, 0.28), transparent 70%),
    radial-gradient(ellipse 50% 20% at 45% 92%, rgba(237, 232, 221, 0.22), transparent 70%);
  animation: drift 38s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes drift {
  from { transform: translateX(-4%); }
  to { transform: translateX(4%); }
}

.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 900px;
  /* Reaches from under the top padding (6vh) down to the wave crest,
     which the photograph places at 62% of the hero. The title then
     centres itself inside whatever is left below the byline. */
  height: 56vh;
}

.hero__byline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(0.62rem, 1.1vw, 0.8rem);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
  opacity: 0;
  animation: fade-in 1.6s ease-out 0.4s forwards;
}

.hero__byline strong {
  display: inline-block;
  margin-left: 0.5em;
  font-weight: 700;
  font-size: 1.25em;
  letter-spacing: var(--tracking-wide);
  color: var(--ink);
}

/* The hand-painted title artwork.

   The PNG is exported on a large square canvas, so the lettering itself
   fills only the middle of the file — roughly 60% of its width and the
   band from 31% to 69% of its height. The negative margins below crop
   that empty space out of the page layout so the title sits tight
   against the byline and tagline. If the artwork is ever re-exported
   with different padding, these two numbers need revisiting. */
.hero__title {
  width: min(620px, 82vw);
  /* Auto margins split the leftover space evenly above and below, so the
     title stays centred between the byline and the wave at any screen
     size — a fixed offset can't, because the title's height follows the
     screen's width while the space follows its height. */
  margin: auto 0;
  opacity: 0;
  animation: fade-in 1.8s ease-out 0.7s forwards;
}

.hero__title img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: -38.7%;
  margin-bottom: -39.2%;
}

.hero__tagline {
  position: relative;
  z-index: 2;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(0.68rem, 1.3vw, 0.95rem);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--paper);
  text-align: center;
  margin: auto 0 8vh;
  padding-top: 12vh;
  /* Keeps the line legible if it lands on bright sea foam. */
  text-shadow: 0 1px 12px rgba(27, 26, 23, 0.75), 0 0 3px rgba(27, 26, 23, 0.5);
  opacity: 0;
  animation: fade-in 1.6s ease-out 1.1s forwards;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero__scroll-cue {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6em;
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 1px 10px rgba(27, 26, 23, 0.7);
  opacity: 0;
  animation: fade-in 1.6s ease-out 1.6s forwards, pulse 4s ease-in-out 3.4s infinite;
}

.hero__scroll-cue::after {
  content: '';
  width: 1px;
  height: 34px;
  background: currentColor;
  opacity: 0.6;
}

@keyframes pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* --------------------------------------------------------------------
   Site navigation — hidden over the hero, drifts in once you scroll.
   -------------------------------------------------------------------- */

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  gap: clamp(1.4em, 5vw, 3.2em);
  padding: 1.15em 1em 1.05em;
  background: rgba(237, 232, 221, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(27, 26, 23, 0.08);
  transform: translateY(-100%);
  transition: transform 0.5s ease;
}

.site-nav.is-visible {
  transform: translateY(0);
}

.site-nav a {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.3s ease;
}

.site-nav a:hover {
  color: var(--ink);
}

/* --------------------------------------------------------------------
   Content sections — alternating paper and ink, joined by slow
   gradient crossfades so each one emerges from the last like fog.
   -------------------------------------------------------------------- */

.section {
  position: relative;
  padding: clamp(200px, 24vh, 300px) 8vw 18vh;
  scroll-margin-top: 3rem;
  overflow: hidden;
}

.section--paper {
  background: var(--paper);
  color: var(--ink);
}

.section--paper.section--from-ink {
  background: linear-gradient(to bottom, var(--ink) 0, var(--paper) 240px);
}

.section--ink {
  background: var(--ink);
  color: var(--paper-dim);
}

.section--ink.section--from-paper {
  background: linear-gradient(to bottom, var(--paper) 0, var(--ink) 240px);
}

.section__inner {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}

.section-label {
  font-family: var(--font-body);
  font-size: clamp(0.58rem, 0.9vw, 0.68rem);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 3.5em;
}

.section--ink .section-label {
  color: var(--gray-mid);
}

.section__prose p {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  margin: 0 0 1.8em;
}

.section--ink .section__prose p {
  color: var(--paper-dim);
}

.show-title {
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.rule {
  width: 48px;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
  margin: 2.4em auto;
}

/* Music — the teaser video.

   The shape comes from content.js so a square or vertical clip from
   Instagram sits correctly without leaving black bars, and so the page
   doesn't jump as the file loads. */

.video {
  margin: 0 auto 3.5em;
  max-width: 640px;
}

.video__player {
  display: block;
  width: 100%;
  height: auto;
  background: #000;
  border: 1px solid rgba(237, 232, 221, 0.18);
}

.video[data-shape='wide'] .video__player {
  aspect-ratio: 16 / 9;
}

.video[data-shape='square'] .video__player {
  aspect-ratio: 1 / 1;
}

.video[data-shape='tall'] .video__player {
  aspect-ratio: 9 / 16;
}

/* A vertical clip would otherwise run taller than the screen. */
.video[data-shape='square'],
.video[data-shape='tall'] {
  max-width: min(380px, 78vw);
}

.video__caption {
  margin-top: 1.4em;
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gray-mid);
  text-align: center;
}

/* Music — placeholder for the future album embed */

.album-placeholder {
  display: flex;
  flex-direction: column;
  gap: 1em;
  align-items: center;
  max-width: 460px;
  margin: 3em auto 0;
  padding: 3.2em 2em;
  border: 1px solid rgba(237, 232, 221, 0.25);
}

.album-placeholder span {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--paper);
}

.album-placeholder__note {
  opacity: 0.5;
}

/* The one place on the site asking for an action, so it is filled
   rather than outlined — enough weight to read as a button without
   breaking the hush of the page. */

.cta {
  margin-top: 2.6em;
  text-align: center;
}

.cta__button {
  display: inline-block;
  padding: 1.4em 2.8em;
  background: var(--paper);
  border: 1px solid var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease;
}

.cta__button:hover,
.cta__button:focus-visible {
  background: transparent;
  color: var(--paper);
}

.cta__note {
  margin: 1.6em 0 0;
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gray-mid);
}

/* News */

.news-item + .news-item {
  margin-top: 7em;
}

.news-item__date {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1.2em;
}

.news-item__title {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 1.6em;
}

/* Contact + footer */

.section--contact {
  padding-bottom: 0;
}

.contact-link {
  display: inline-block;
  margin-top: 0.5em;
  font-family: var(--font-body);
  font-size: clamp(0.8rem, 1.4vw, 1rem);
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(237, 232, 221, 0.4);
  transition: text-decoration-color 0.3s ease;
}

.contact-link:hover {
  text-decoration-color: var(--paper);
}

.site-footer {
  position: relative;
  z-index: 1;
  margin-top: 16vh;
  padding: 0 8vw 5vh;
  text-align: center;
}

.site-footer p {
  font-family: var(--font-body);
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gray-mid);
  margin: 0 0 1em;
}

/* --------------------------------------------------------------------
   Scroll reveals — slow, quiet fades as sections enter the viewport.
   -------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.4s ease, transform 1.4s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------
   Early Digital Access page (access.html)
   -------------------------------------------------------------------- */

/* The locked door */

.gate {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10vh 8vw;
  background: var(--paper);
}

/* Same artwork as the hero, and the same trick for cropping the empty
   space baked into the PNG. The negative margins MUST sit on the image
   inside a fixed-width wrapper: percentage margins resolve against the
   container's width, so applied directly to a full-width parent they
   scale with the browser window and drag the title over the form. */
.gate__title {
  width: min(300px, 62vw);
  margin: 0 0 2.2em;
}

.gate__title img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: -38.7%;
  margin-bottom: -39.2%;
}

.gate__hint {
  font-family: var(--font-body);
  font-size: clamp(0.7rem, 1vw, 0.8rem);
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  margin: 0 0 3em;
}

.gate__form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.2em;
}

.gate__input {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(27, 26, 23, 0.4);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  letter-spacing: 0.25em;
  text-align: center;
  color: var(--ink);
  padding: 0.6em 0.2em;
  width: min(280px, 70vw);
  outline: none;
  transition: border-color 0.3s ease;
}

.gate__input:focus {
  border-color: var(--ink);
}

.gate__button {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  padding: 1em 2.4em;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.gate__button:hover {
  background: var(--ink);
  color: var(--paper);
}

.gate__error {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 2em 0 0;
}

.gate__back {
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
  margin-top: 5em;
  transition: color 0.3s ease;
}

.gate__back:hover {
  color: var(--ink);
}

/* The vault */

.vault__heading {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 1.6em;
}

.section__inner--wide {
  max-width: 720px;
}

/* Track players */

.track-list {
  text-align: left;
}

.track {
  display: flex;
  align-items: center;
  gap: 1.1em;
  padding: 1.1em 0;
  border-bottom: 1px solid rgba(237, 232, 221, 0.12);
}

.track:first-child {
  border-top: 1px solid rgba(237, 232, 221, 0.12);
}

/* Heading that sets the bonus tracks apart from the album proper. */
.track-group {
  margin: 3.4em 0 0;
  padding-bottom: 1.4em;
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--gray-mid);
  text-align: center;
}

.track-group + .track {
  border-top: 1px solid rgba(237, 232, 221, 0.12);
}

.track__play {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(237, 232, 221, 0.4);
  background: transparent;
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.track__play:hover {
  border-color: var(--paper);
}

.track__play:disabled {
  cursor: default;
  border-color: rgba(237, 232, 221, 0.2);
}

.track__play svg {
  display: block;
  margin-left: 1px;
}

/* The number, title, timeline and clock each hold a fixed column so
   all 21 rows line up no matter how long a song title runs. */
.track__num {
  flex: 0 0 1.6em;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--gray-mid);
}

.track__title {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
}

.track__timeline {
  flex: 0 0 clamp(70px, 14%, 130px);
  padding: 8px 0;
  cursor: pointer;
}

.track__bar {
  position: relative;
  height: 2px;
  background: rgba(237, 232, 221, 0.2);
}

.track__progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: var(--paper);
}

.track__time {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-mid);
  /* Fixed, not content-sized: "Soon" and "0:02" are different widths and
     would otherwise nudge the whole row out of line. */
  flex: 0 0 3.6em;
  text-align: right;
}

.track--unavailable {
  opacity: 0.45;
}

/* The song currently playing — a quiet lift, easy to find in a long
   list without breaking the hush of the page. */
.track--playing .track__title {
  color: #fff;
}

.track--playing .track__num,
.track--playing .track__time {
  color: var(--paper-dim);
}

.track--playing .track__play {
  border-color: var(--paper);
  background: rgba(237, 232, 221, 0.1);
}

@media (max-width: 620px) {
  .track {
    flex-wrap: wrap;
  }

  .track__title {
    flex: 1;
  }

  .track__timeline {
    flex-basis: 100%;
    order: 5;
  }
}

/* Download buttons */

.downloads {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1em;
  margin-top: 1em;
}

.download-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5em 1.5em;
  border: 1px solid rgba(237, 232, 221, 0.35);
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
  line-height: 2.1;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.download-btn:hover {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}

.vault__back {
  display: inline-block;
  margin-top: 5em;
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gray-mid);
  text-decoration: none;
  transition: color 0.3s ease;
}

.vault__back:hover {
  color: var(--paper);
}

@media (prefers-reduced-motion: reduce) {
  .hero__fog { animation: none; }
  .hero__byline, .hero__title, .hero__tagline, .hero__scroll-cue {
    animation: none;
    opacity: 1;
  }
  .hero__scroll-cue { animation: none; opacity: 0.8; }
  .site-nav { transition: none; }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}