/* ============================================================
   AARON GROSS — single-page site
   Palette rule: the photo gives white, black, grey.
   One brown accent, nothing else.
   The photo's backdrop is pure #ffffff, so page bg is pure white
   and the print bleeds seamlessly into the page. Dark mode keeps the
   same un-inverted print, framed on black with a soft glow.
   ============================================================ */

:root {
  --bg:      #ffffff;
  --ink:     #111111;
  --ink-2:   #3a3a3a;
  --mid:     #8a8a8a;   /* sampled mid-grey from the print */
  --line:    #d9d9d9;
  --accent:  #8a5f42;   /* the one brown — adjust here */

  --display: 'Archivo', system-ui, sans-serif;
  --body:    'Newsreader', Georgia, serif;

  --ease: cubic-bezier(.22, 1, .36, 1);
}

[data-theme="dark"] {
  --bg:      #000000;
  --ink:     #f0f0f0;
  --ink-2:   #c9c9c9;
  --mid:     #7a7a7a;
  --line:    #2e2e2e;
  --accent:  #b98a63;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--display);
  -webkit-font-smoothing: antialiased;
  transition: background .4s var(--ease), color .4s var(--ease);
  overflow-x: hidden;
}

::selection { background: var(--accent); color: var(--bg); }

a { color: inherit; }

/* film grain — static, very quiet */
.grain {
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none; z-index: 60; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="dark"] .grain { opacity: .07; }

/* ---------------- top bar ---------------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.25rem 2rem;
  mix-blend-mode: difference;   /* stays legible over print or page, light or dark */
  color: #fff;
}
.mark img { height: 1.65rem; width: auto; display: block; }
.nav  { display: flex; align-items: center; gap: 1.6rem; }
.nav a {
  font-size: .72rem; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; text-decoration: none;
}
.nav a:hover { text-decoration: underline; text-underline-offset: .4em; }

.theme-btn {
  background: none; border: 1px solid #fff; border-radius: 50%;
  width: 1.55rem; height: 1.55rem; cursor: pointer;
  display: grid; place-items: center; padding: 0;
}
.theme-dot {
  width: .55rem; height: .55rem; border-radius: 50%;
  background: #fff; display: block;
  transition: transform .3s var(--ease);
}
.theme-btn:hover .theme-dot { transform: scale(1.6); }

/* ---------------- hero ----------------
   .hero is 260vh; .hero-inner is one sticky 100vh composition:
   headline first, then the LISTEN rows rise into the same screen
   against the photo's drift. Book and More are push panels that
   slide this stage out of the way when they arrive. */
.hero {
  position: relative;
  height: 260vh;
}
.hero-inner {
  position: sticky; top: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 48fr) minmax(0, 52fr);
}

.stage {
  position: relative;
  overflow: hidden;
}
.layer {
  position: absolute;
  left: 50%; top: 50%;
  height: 100vh; width: auto;
  max-width: none;
  transform-origin: center;
  transform: translate(-50%, -50%) scale(1.05);   /* base; JS overrides while pinned */
  will-change: transform, opacity;
  opacity: 1;
  /* 'backwards' only: the final state lives in base CSS, so JS can
     drive ghost opacity during the scroll pin without a fill conflict */
  animation: develop 1.4s var(--ease) .1s backwards;
}
.layer.ghost {
  filter: blur(14px);
  opacity: .55;
}
@keyframes develop { from { opacity: 0; transform: translate(-50%, -50%) scale(1.09); } }

/* light mode: the print's near-white matte disappears into the page */
.layer { mix-blend-mode: multiply; }

/* dark mode: the SAME print, un-inverted — it simply rests on the dark
   wall as a framed piece: hairline border + a soft glow off the white matte */
[data-theme="dark"] .layer { mix-blend-mode: normal; }
[data-theme="dark"] .layer.ghost { filter: blur(20px); opacity: .35; }
[data-theme="dark"] .layer.solid {
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 30px 80px -30px rgba(255, 255, 255, .18);
}

.hero-right {
  display: flex; flex-direction: column;
  padding: 12vh 7vw 6vh 1vw;   /* wider right margin — BACKGROUND needs air */
  overflow: hidden;
}
.hero-type {
  display: flex; flex-direction: column; justify-content: center;
  flex: 0 0 auto;
  min-height: 46vh;
  will-change: transform, opacity;
  /* transform/opacity are driven by JS during the hold —
     intro animation is applied to children so they never fight */
}
.hero-type > * {
  opacity: 0;
  animation: rise .9s var(--ease) both;
}
.hero-type > :nth-child(1) { animation-delay: .65s; }
.hero-type > :nth-child(2) { animation-delay: .80s; }
.hero-type > :nth-child(3) { animation-delay: .95s; }
.hero-type > :nth-child(4) { animation-delay: 1.1s; }
@keyframes rise { from { opacity: 0; transform: translateY(2.2rem); } to { opacity: 1; transform: none; } }

/* the listen block lives inside the pinned stage (desktop);
   JS lifts it in as the headline fades. The headline goes out of flow
   while pinned so all seven rows fit the held screen.
   Mobile/reduced-motion: static, everything in normal flow. */
.hero-listen { flex: 1 1 auto; }
@media (min-width: 821px) {
  .hero-right { position: relative; }
  .hero-type {
    position: absolute; top: 12vh; left: 1vw; right: 7vw;
    min-height: 0;
  }
  .hero-listen {
    opacity: 0; transform: translateY(26vh); will-change: transform, opacity;
    display: flex; flex-direction: column; justify-content: flex-end;
  }
}
/* compact rows inside the hero screen */
.hero-listen .sec-head { padding-bottom: .7rem; margin-bottom: 1.2rem; border-bottom-width: 1.5px; }
.hero-listen .sec-head h2 { font-size: clamp(1.5rem, 2.8vw, 2.4rem); }
.hero-listen .track-row { padding: .8rem .4rem; }
.hero-listen .track-row:hover { padding-left: 1rem; }
.hero-listen .track-title { font-size: clamp(1rem, 1.7vw, 1.4rem); }
.hero-listen .sec-foot { margin-top: 1.2rem; font-size: .78rem; }
/* short laptop screens: tighten further so all 7 fit */
@media (min-width: 821px) and (max-height: 780px) {
  .hero-listen .track-row { padding: .55rem .4rem; }
  .hero-listen .sec-head { margin-bottom: .9rem; }
  .hero-listen .sec-foot { margin-top: .8rem; }
}

.kicker {
  font-size: .72rem; font-weight: 600; letter-spacing: .26em;
  text-transform: uppercase; color: var(--mid);
  margin-bottom: 2.2rem;
}
.kicker .accent { color: var(--accent); font-size: .6rem; vertical-align: .1em; }

.hero-type h1 {
  font-size: clamp(2.6rem, 6.3vw, 7.2rem);
  font-weight: 800;
  font-stretch: 110%;
  line-height: .95;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.lede {
  font-family: var(--body); font-style: italic;
  font-size: clamp(1.05rem, 1.7vw, 1.5rem);
  color: var(--ink-2);
  margin: 2rem 0 2.6rem; max-width: 34ch;
}
.cta {
  align-self: flex-start; text-decoration: none;
  font-size: .78rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  border: 1.5px solid var(--ink); border-radius: 999px;
  padding: .85rem 1.7rem;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s;
}
.cta .cta-play { color: var(--accent); font-size: .7em; }
.cta:hover { background: var(--ink); color: var(--bg); }
.cta:hover .cta-play { color: var(--accent); }

.scroll-cue {
  position: absolute; left: 2rem; bottom: 1.6rem; z-index: 4;
  font-size: .64rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--mid);
  animation: cue 2.6s var(--ease) infinite;
}
@keyframes cue { 0%,100% { transform: translateY(0); opacity:.9 } 50% { transform: translateY(6px); opacity:.4 } }

/* ---------------- push panels ----------------
   Book and More are one-screen-each panels that scroll up and push
   the previous composition out — full viewport, vertically centered. */
.push {
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
}

/* ---------------- content shell ---------------- */
section:not(.hero) {
  position: relative; z-index: 5;
  background: var(--bg);
  padding: clamp(5rem, 12vh, 9rem) clamp(1.5rem, 6vw, 6rem);
}

.sec-head {
  display: flex; align-items: baseline; gap: 1.4rem;
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 1.1rem; margin-bottom: 3.4rem;
}
.sec-no { font-size: .8rem; font-weight: 700; color: var(--accent); letter-spacing: .1em; }
.sec-head h2 {
  font-size: clamp(2rem, 5vw, 4.2rem);
  font-weight: 800; font-stretch: 115%; text-transform: uppercase;
  letter-spacing: -.01em; line-height: 1;
}

.u { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .28em; text-decoration-thickness: 2px; }
.u:hover { color: var(--accent); }

.sec-foot { margin-top: 2.6rem; font-size: .85rem; color: var(--mid); }

/* ---------------- listen ---------------- */
.tracks { list-style: none; }
.track { border-bottom: 1px solid var(--line); }
.track:first-child { border-top: 1px solid var(--line); }

.track-row {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: grid;
  grid-template-columns: 3.2rem 1fr auto 2.4rem;
  align-items: center; gap: 1rem;
  padding: 1.5rem .4rem;
  font-family: var(--display); color: var(--ink);
  text-align: left;
  transition: padding-left .3s var(--ease);
}
.track-row:hover { padding-left: 1.1rem; }
.track-no { font-size: .74rem; font-weight: 700; color: var(--mid); }
.track-title {
  font-size: clamp(1.25rem, 2.6vw, 2.1rem);
  font-weight: 700; font-stretch: 110%; text-transform: uppercase;
  letter-spacing: -.01em;
}
.track-row:hover .track-title { color: var(--accent); }
.track-meta { font-size: .8rem; color: var(--mid); letter-spacing: .08em; }
.track-toggle { font-size: .9rem; color: var(--accent); text-align: right; }
.track-toggle::before { content: "▶"; }
.track.open .track-toggle::before { content: "■"; }
.track.open .track-toggle { font-size: .7rem; }

/* 0fr → 1fr is the animatable disclosure pattern */
.player {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease);
}
.player-inner { min-height: 0; overflow: hidden; }
.player iframe {
  display: block; border: 0; width: 100%; height: 6.5rem;
  opacity: 0; transition: opacity .3s .1s;
}
.track.open .player { grid-template-rows: 1fr; }
.track.open .player iframe { opacity: 1; }

/* ---------------- book ---------------- */
.book-grid {
  display: grid; gap: 3rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.book-label {
  display: block; font-size: .68rem; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase; color: var(--mid);
  margin-bottom: .7rem;
}
.big {
  font-size: clamp(1.15rem, 2.1vw, 1.7rem);
  font-weight: 700; font-stretch: 105%;
  text-decoration: none;
}

/* ---------------- more ---------------- */
.door {
  display: block; text-decoration: none;
  border: 1.5px solid var(--ink);
  padding: clamp(2rem, 5vw, 4rem);
  position: relative; overflow: hidden;
  transition: color .35s var(--ease), border-color .35s;
}
.door::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform .5s var(--ease);
}
.door:hover::after { transform: translateY(0); }
.door:hover { color: var(--bg); border-color: var(--ink); }
.door > * { position: relative; z-index: 1; }
.door-word {
  display: block;
  font-size: clamp(2.6rem, 8vw, 7rem);
  font-weight: 800; font-stretch: 125%; text-transform: uppercase;
  line-height: 1; letter-spacing: -.015em;
}
.door-note {
  display: block; margin-top: 1.4rem; max-width: 46ch;
  font-family: var(--body); font-style: italic;
  font-size: clamp(.95rem, 1.4vw, 1.2rem); color: var(--mid);
}
.door:hover .door-note { color: var(--bg); opacity: .75; }
.door-arrow {
  position: absolute; right: clamp(1rem, 3vw, 2.6rem); bottom: clamp(1rem, 3vw, 2.2rem);
  font-size: clamp(1.6rem, 3vw, 2.6rem); z-index: 1;
  transition: transform .4s var(--ease);
}
.door:hover .door-arrow { transform: translateX(.6rem); }

/* ---------------- footer ---------------- */
.footer {
  position: relative; z-index: 5;
  background: var(--bg);
  padding: 4rem clamp(1.5rem, 6vw, 6rem) 3rem;
  display: flex; align-items: end; justify-content: space-between; gap: 2rem;
  border-top: 1px solid var(--line);
}
.logo { height: 2.6rem; width: auto; opacity: .9; }
/* the logo PNGs have baked-in mattes — blend them away per theme */
.logo-light { display: block; mix-blend-mode: multiply; }
.logo-dark  { display: none; mix-blend-mode: screen; }
[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .logo-dark  { display: block; }
.footer .fine { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--mid); }

/* ---------------- responsive ---------------- */
@media (max-width: 820px) {
  .hero { height: auto; }
  .hero-inner { position: static; height: auto; grid-template-columns: 1fr; }
  .stage { height: 78vh; }
  .layer { height: 78vh; }
  .hero-right { padding: 3.4rem 1.6rem 2rem; overflow: visible; }
  .hero-type { min-height: 0; }
  .hero-type h1 { font-size: clamp(2.4rem, 11.5vw, 5rem); }
  .push { min-height: 0; }
  .topbar { padding: 1rem 1.2rem; }
  .nav { gap: 1rem; }
  .nav a { font-size: .62rem; letter-spacing: .16em; }
  .scroll-cue { display: none; }
}

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero { height: auto; }
  .hero-inner { position: static; height: auto; }
  .stage { height: 100vh; }
  .hero-right { position: static; }
  .hero-type { position: static; }
  .layer, .hero-type > * { animation: none; }
  .layer { opacity: 1; }
  .layer.ghost { opacity: .55; }
  .hero-type > * { opacity: 1; transform: none; }
  .hero-listen { opacity: 1 !important; transform: none !important; display: block; }
  .scroll-cue { animation: none; }
  .player, .door::after, .door-arrow { transition: none; }
}