/* ============================================================
   NOUS — Le Laboratoire Créatif
   Design tokens + reset + base typography
   ============================================================ */

:root {
  /* Palette */
  --bg: #f4ede5;
  --paper: #ede2d4;
  --ink: #2a2320;
  --accent: #a88370;
  --accent-dark: #8c6a59;
  --muted: #6b5d54;
  --hairline: rgba(42, 35, 32, 0.18);

  /* Typography */
  --font-serif: 'DM Serif Display', Georgia, serif;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;

  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;

  /* Layout */
  --col-narrow: 520px;
  --col-medium: 720px;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* Reusable atoms */
.meta {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}
.meta-accent { color: var(--accent); }
.rule {
  width: 40px;
  height: 2px;
  background: var(--accent);
  border: 0;
  display: block;
}

/* ============================================================
   Top bar — anchor nav, fades out past hero
   ============================================================ */

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 3rem;
  background: transparent;
  pointer-events: auto;
  transition: opacity 300ms ease, transform 300ms ease;
}
.topbar[data-hidden="true"] {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}
.topbar-left {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink);
}
.topbar-nav {
  display: flex;
  gap: 1.75rem;
}
.topbar-nav a {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 200ms, border-color 200ms;
}
.topbar-nav a:hover,
.topbar-nav a:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ============================================================
   Hero (Ouverture)
   Typographic "NO — US" split with hairline bridge.
   Three beats: gesture · poetic line · meta footer.
   ============================================================ */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 5vw, 3rem) 5rem;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(3rem, 6vw, 5rem);
  max-width: 1100px;
  width: 100%;
  text-align: center;
}

.hero-gesture {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin: 0;
  line-height: 1;
}

.hero-word {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  font-size: clamp(5rem, 14vw, 11rem);
  line-height: 1;
  letter-spacing: 0.04em;
}

.hero-word em {
  font-style: italic;
}

.hero-bridge {
  display: block;
  width: clamp(60px, 8vw, 120px);
  height: 2px;
  background: var(--accent);
  flex-shrink: 0;
  font-size: clamp(5rem, 14vw, 11rem); /* match .hero-word so margin-top em scales with the wordmark */
  margin-top: -0.08em;
}

.hero-line {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1.5;
  max-width: 38ch;
  margin: 0 auto;
}

.hero-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem clamp(1.5rem, 5vw, 3rem) 0;
  border-top: 1px solid var(--hairline);
  margin: 0 clamp(1.5rem, 5vw, 3rem);
}

.hero-cta {
  color: var(--ink);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 200ms, border-color 200ms;
}
.hero-cta:hover,
.hero-cta:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.hero-texture {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.18; /* warm tint reads ~15% visually; tune 0.10–0.25 */
  background-color: var(--bg);
  /* feColorMatrix tint 0.66/0.51/0.44 ≈ --accent (#a88370); var() cannot be used inside a data URI */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.66  0 0 0 0 0.51  0 0 0 0 0.44  0 0 0 0.9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 320px 320px;
  background-repeat: repeat;
  will-change: transform; /* compositor layer for scroll parallax */
}

/* ============================================================
   Hero load animation
   Single entrance: NO slides in from left, US from right.
   Rule fades in as they settle. Poetic line + meta follow.
   Plays once on page load. Honors prefers-reduced-motion.
   See docs/superpowers/specs/2026-05-20-hero-load-animation-design.md
   ============================================================ */

@keyframes hero-word-in-left {
  from { transform: translateX(-40vw); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

@keyframes hero-word-in-right {
  from { transform: translateX(40vw); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes hero-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* NO — slides in from the left */
.hero-gesture .hero-word:nth-of-type(1) {
  animation: hero-word-in-left 800ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* US — slides in from the right */
.hero-gesture .hero-word:nth-of-type(3) {
  animation: hero-word-in-right 800ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Hairline bridge — fades in as the words settle (overlaps wordmark slide by 300ms) */
.hero-bridge {
  animation: hero-fade-in 400ms ease-out 500ms both;
}

/* Poetic line — fades in after the wordmark animation completes */
.hero-line {
  animation: hero-fade-in 400ms ease-out 900ms both;
}

/* Meta footer — fades in last */
.hero-foot {
  animation: hero-fade-in 400ms ease-out 1300ms both;
}

@media (prefers-reduced-motion: reduce) {
  .hero-gesture .hero-word:nth-of-type(1),
  .hero-gesture .hero-word:nth-of-type(3),
  .hero-bridge,
  .hero-line,
  .hero-foot {
    animation: none;
  }
}

/* ============================================================
   Manifeste — and shared text-section primitives
   ============================================================ */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.col-narrow {
  max-width: var(--col-narrow);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section-num {
  margin-bottom: 3rem;
  text-align: center;
}

.prose {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink);
}
.prose + .prose { margin-top: 1.5rem; }
.prose em { color: var(--accent); font-style: italic; }

.manifeste {
  padding: var(--space-xl) 0;
}

.pullquote {
  margin: 3rem auto;
  text-align: center;
}
.pullquote-rule {
  margin: 0 auto;
  width: 30px;
  height: 1px;
}
.pullquote blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  line-height: 1.4;
  color: var(--accent);
  padding: 2rem 0;
  letter-spacing: 0.01em;
}

/* ============================================================
   Héritage
   ============================================================ */

.heritage {
  padding: var(--space-xl) 0;
  background: var(--paper);
}

/* ============================================================
   Plate-vinyl — gatefold + slide-out interaction
   On hover/tap: back slides left, front slides right (no gap),
   vinyl is pulled out the right side of the front cover.
   Mobile uses an asymmetric spread so the vinyl peek lands inside
   the viewport (back loses a small slice on the left).
   ============================================================ */

.plate-vinyl {
  --pv-back-tx: -50%;
  --pv-front-tx: 50%;
  --pv-disc-tx: 105%;
  --pv-disc-rot: 15deg;
  margin: 3.5rem auto;
  width: 320px;
  text-align: center;
}

.plate-vinyl-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.plate-vinyl-back,
.plate-vinyl-front {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border: 1px solid var(--hairline);
  display: block;
  transition: transform 850ms cubic-bezier(0.22, 1, 0.36, 1);
}
.plate-vinyl-back { z-index: 1; }
.plate-vinyl-front {
  z-index: 3;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.plate-vinyl-disc {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 78%;
  height: 78%;
  margin-top: -39%;
  margin-left: -39%;
  border-radius: 50%;
  background: radial-gradient(circle at center, var(--accent-dark) 0 14%, #0a0a0a 14.2% 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 10px 22px rgba(0, 0, 0, 0.32);
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.plate-vinyl-disc::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-radial-gradient(circle at center,
    rgba(255, 255, 255, 0.04) 0 1px,
    rgba(0, 0, 0, 0) 1px 3px);
  pointer-events: none;
}
.plate-vinyl-disc::after {
  content: "BONNY · COMPRENDRE";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30%;
  height: 30%;
  border-radius: 50%;
  background: var(--accent);
  color: #faf2e8;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 8px;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.1;
  padding: 0 6px;
}

@media (hover: hover) {
  .plate-vinyl-stage:hover .plate-vinyl-back { transform: translateX(var(--pv-back-tx)); }
  .plate-vinyl-stage:hover .plate-vinyl-front { transform: translateX(var(--pv-front-tx)); }
  .plate-vinyl-stage:hover .plate-vinyl-disc { transform: translateX(var(--pv-disc-tx)) rotate(var(--pv-disc-rot)); }
}

/* Touch fallback: tap focuses the stage and triggers the spread. */
.plate-vinyl-stage:focus-within .plate-vinyl-back { transform: translateX(var(--pv-back-tx)); }
.plate-vinyl-stage:focus-within .plate-vinyl-front { transform: translateX(var(--pv-front-tx)); }
.plate-vinyl-stage:focus-within .plate-vinyl-disc { transform: translateX(var(--pv-disc-tx)) rotate(var(--pv-disc-rot)); }

.plate-vinyl-stage:focus { outline: none; }
.plate-vinyl-stage:focus-visible { outline: 2px solid var(--accent); outline-offset: 8px; }

.plate-caption {
  margin-top: 1rem;
  letter-spacing: 0.18em;
  text-transform: none;
  font-size: 0.7rem;
  color: var(--muted);
}
.plate-caption em {
  font-style: italic;
  color: var(--ink);
}

/* ============================================================
   Plate-vinyl — play button + spin animation
   Opt-in audio: hover/focus reveals ▶; click plays; disc spins.
   See docs/superpowers/specs/2026-05-21-vinyl-audio-design.md
   ============================================================ */

.plate-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  margin-left: -22px;
  border: 0;
  border-radius: 50%;
  background: rgba(42, 35, 32, 0.75); /* --ink at 75% */
  color: var(--bg);
  font-size: 18px;
  font-family: var(--font-sans);
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition:
    left 700ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 300ms ease,
    background-color 200ms ease,
    transform 200ms ease;
}

/* Visible + slid-to-disc-position when the stage is in any open state */
.plate-vinyl-stage:hover .plate-play,
.plate-vinyl-stage:focus-within .plate-play,
.plate-vinyl-stage.is-playing .plate-play {
  opacity: 1;
  pointer-events: auto;
  /* The disc's width is 78% of the stage; its centre after translateX(var(--pv-disc-tx))
     ends up at 50% + 0.78 * var(--pv-disc-tx) of the stage. */
  left: calc(50% + var(--pv-disc-tx) * 0.78);
}

.plate-play:hover {
  background: rgba(42, 35, 32, 0.9);
  transform: scale(1.05);
}

.plate-play:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* Vinyl spin: composed with the existing slid-out transform so the disc
   continues to sit in its slid-out position while rotating. */
@keyframes vinyl-spin {
  from { transform: translateX(var(--pv-disc-tx)) rotate(var(--pv-disc-rot)); }
  to   { transform: translateX(var(--pv-disc-tx)) rotate(calc(var(--pv-disc-rot) + 360deg)); }
}

.plate-vinyl-stage.is-playing .plate-vinyl-disc {
  animation: vinyl-spin 4s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .plate-vinyl-back,
  .plate-vinyl-front,
  .plate-vinyl-disc { transition: none !important; }
  .plate-vinyl-stage.is-playing .plate-vinyl-disc {
    animation: none;
  }
}

/* ============================================================
   Projets — Atlas
   Composition A: image one side (full-bleed vertical), text other.
   ============================================================ */

.projets {
  padding: 0;
}

/* Spread: 50/50 columns. The image fills its 50vw × 100vh cell with
   object-fit: cover — the photograph is "zoomed in" if needed to
   keep its intrinsic ratio without distortion. Text occupies the
   other half with content constrained to ~560px wide and pushed
   toward the image so the pair reads as a connected composition. */
.spread {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 100vh;
  min-height: 100svh;
  border-top: 1px solid var(--hairline);
  background: var(--bg);
}

.spread-image {
  overflow: hidden;
}
.spread-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Only the text is sticky — image is in normal flow and scrolls
   past while the reader has a moment with the words. Text sits at
   the top of its column initially (align-self: start) so it's
   immediately visible at viewport top, then pins via position:
   sticky as the page scrolls. */
.spread-text {
  position: sticky;
  top: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  max-width: 560px;
  padding: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 4vw, 4rem);
}
/* Push the text column close to the image; the cream space on the
   opposite side reads as the editorial outer margin. */
.spread.img-right .spread-text { justify-self: end; }
.spread.img-left  .spread-text { justify-self: start; }
.spread-top-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1.5rem;
}
.tag-line {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--accent);
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
.spread-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  line-height: 1.05;
  margin-bottom: 1.5rem;
}
.spread-body {
  margin-bottom: 2rem;
  max-width: 340px;
}
.spread-cta { margin-top: auto; }
.discover {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
  display: inline-block;
  transition: color 200ms, border-color 200ms;
}
.discover:hover,
.discover:focus-visible {
  color: var(--accent-dark);
  border-color: var(--accent-dark);
}

/* ============================================================
   Composition B — image-led (Epic By)
   ============================================================ */

.spread-b {
  display: block;
  grid-template-columns: none;
  border-top: 1px solid var(--hairline);
  background: var(--bg);
  min-height: auto;
}

.spread-b-image {
  width: 100%;
  height: clamp(360px, 60vh, 560px);
  overflow: hidden;
}
.spread-b-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.spread-b-below {
  display: grid;
  grid-template-columns: 30% 1fr;
  gap: 3rem;
  padding: 3rem 3.5rem 4rem;
  align-items: start;
  max-width: 1280px;
  margin: 0 auto;
}
.spread-b-title-col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.spread-b-title-col .spread-title {
  font-size: clamp(2.2rem, 3.5vw, 2.8rem);
  margin: 0;
}
.spread-b-body-col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 540px;
}
.spread-b-body-col .spread-body { margin-bottom: 0; max-width: none; }

/* Sub-projects list (shared, used inside spread-b but reusable) */
.sublist {
  list-style: none;
  margin: 0; padding: 0;
}
.sublist li {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.85rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sublist li:last-child { border-bottom: 1px solid var(--hairline); }
.sublist-num {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  color: var(--accent);
}

/* ============================================================
   Au-delà de la musique
   ============================================================ */

.au-dela {
  padding: var(--space-xl) 0;
  text-align: center;
}
.au-dela-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  color: var(--ink);
  line-height: 1.3;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.au-dela-body {
  max-width: 480px;
  margin: 0 auto;
}
.au-dela-rule {
  margin: 3rem auto 0;
}

/* ============================================================
   Footer
   ============================================================ */

.pied {
  border-top: 1px solid var(--hairline);
  padding: 2.5rem 3rem;
  background: var(--bg);
}
.pied-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
}
.pied-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pied-right { text-align: right; }
.pied-muted { color: var(--muted); }
.pied-link {
  color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms;
}
.pied-link:hover,
.pied-link:focus-visible {
  border-bottom-color: var(--accent);
}

/* ============================================================
   Scroll-reveal
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms ease, transform 600ms ease;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-image {
  /* Images fade in but do not rise */
  opacity: 0;
  transition: opacity 600ms ease;
  will-change: opacity;
}
.reveal-image.is-visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-image {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   Responsive — tablet and mobile
   ============================================================ */

@media (max-width: 959px) {
  .spread-b-below { padding: 2rem; gap: 2rem; }

  .plate-vinyl { width: 280px; }

  /* Spreads stack on tablets and small laptops: image bleeds full-width
     at the top, text below. Single-column flex (override desktop grid).
     Sticky positioning is removed in the stacked layout. */
  .spread,
  .spread.img-right,
  .spread.img-left {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    min-height: auto;
    padding: 0 0 2.5rem;
    gap: 2rem;
  }
  /* img-right HTML order is text-then-image — reverse so image is on top. */
  .spread.img-right { flex-direction: column-reverse; }
  .spread-image {
    position: static;
    width: 100%;
    height: auto;
    overflow: hidden;
  }
  .spread-image img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
  }
  .spread.img-right .spread-text,
  .spread.img-left .spread-text {
    position: static;
    height: auto;
    max-width: none;
    align-items: flex-start;
    justify-self: stretch;
    padding: 1.5rem 2rem 0;
  }
  .spread-text > * { max-width: none; }
}

@media (max-width: 639px) {
  .hero {
    padding: clamp(4rem, 12vw, 6rem) 1.5rem 5.5rem;
  }
  .hero-gesture {
    flex-direction: column;
    gap: clamp(1rem, 4vw, 2rem);
  }
  .hero-bridge {
    width: clamp(40px, 12vw, 80px);
    margin-top: 0; /* reset desktop cap-height nudge; not needed when stacked */
  }
  .hero-foot {
    padding: 1rem 1.5rem 0;
    margin: 0 1.5rem;
    bottom: 1.5rem;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }

  /* Top bar — hide nav on smallest screens to keep it minimal */
  .topbar { padding: 1rem 1.5rem; }
  .topbar-nav { display: none; }

  /* Phone-specific: tighter padding/gap; image cap lowered for shorter screens */
  .spread,
  .spread.img-right,
  .spread.img-left {
    padding: 0 0 2rem;
    gap: 1.5rem;
  }
  .spread.img-right .spread-text,
  .spread.img-left .spread-text {
    padding: 1rem 1.5rem 0;
  }
  .spread-b-image { height: clamp(280px, 50vh, 420px); }
  .spread-b-below {
    grid-template-columns: 1fr;
    padding: 2rem 1.5rem;
    gap: 1.5rem;
  }

  /* Footer stacks */
  .pied { padding: 2rem 1.5rem; }
  .pied-inner { flex-direction: column; gap: 1.5rem; }
  .pied-right { text-align: left; }

  /* Text sections — tighter padding */
  .manifeste, .heritage, .au-dela { padding: 4rem 0; }

  /* Plate-vinyl: balanced asymmetric spread tuned so the open
     composition (back + front + vinyl peek) is centred in the
     viewport — back's left edge sits at the viewport's left edge,
     vinyl peek lands just at the right. */
  .plate-vinyl {
    width: 180px;
    --pv-back-tx: -57%;
    --pv-front-tx: 43%;
    --pv-disc-tx: 88%;
  }
}

@media (max-width: 380px) {
  .plate-vinyl {
    width: 160px;
    --pv-back-tx: -62%;
    --pv-front-tx: 38%;
    --pv-disc-tx: 88%;
  }
  .hero {
    padding: clamp(3.5rem, 12vw, 5rem) 1rem 5.5rem;
  }
  .hero-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0 1rem;
    padding: 0.75rem 0 0;
  }
}

/* ============================================================
   Focus states (keyboard)
   ============================================================ */

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ============================================================
   Atlas rhythm — between-spread dividers
   ============================================================ */

.next-hint {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 3.5rem;
  border-top: 1px solid var(--hairline);
  background: var(--bg);
}
.next-hint-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--ink);
}
@media (max-width: 639px) {
  .next-hint {
    padding: 1rem 1.5rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}