/* ═══════════════════════════════════════════════════════════════════
   Merijn Verhaak — Portfolio · Page styles · v2 "Liner Notes"
   ═══════════════════════════════════════════════════════════════════ */

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

html, body {
  width: 100%;
  min-height: 100vh;
  background: var(--c-void);
}

body {
  color: var(--c-smoke);
  font-family: var(--font-body);
  font-size: var(--ts-sm);
  line-height: var(--lh-loose);
  overflow-x: hidden;
}

button, a, [role="button"], input { cursor: pointer; }
a { color: var(--ink-coral); text-decoration: none; }
::selection { background: var(--p-coral); color: var(--c-smoke); }

/* ── Layout ── */
.wrap {
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 0 40px;
}

.wrap-wide {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ── Animations ── */
@keyframes reel-spin   { to { transform: rotate(360deg); } }
@keyframes reel-spin-rev { to { transform: rotate(-360deg); } }

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

@keyframes fade-out-up {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-14px); }
}

/* Gentle eject/load — the playful swap moment, cooled down */
@keyframes tape-eject {
  0%   { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-12px); opacity: 0; }
}

@keyframes tape-load {
  0%   { transform: translateY(14px); opacity: 0; }
  70%  { transform: translateY(-2px); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}

.fade-key { animation: fade-in-up var(--dur-slow) var(--ease-out) both; }

/* ── Section transition states ── */
.swap-content { transition: opacity 220ms var(--ease-snap); }
.swap-content.swap-out { opacity: 0; pointer-events: none; }
.swap-content.swap-in  { opacity: 1; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── Headings ── */
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--fg-primary); }

/* ── Prose ──
   Hanken Grotesk for everything long-form; Bricolage carries display.
   Blockquotes step up in size — editorial voice without a serif. */
.fade-key p,
.prose-host p {
  font-family: var(--font-prose) !important;
  font-size: 16.5px !important;
  line-height: 1.75 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: var(--c-cream);
  margin-bottom: 1.05em;
  max-width: var(--max-prose);
  text-wrap: pretty;
}
.fade-key p:last-child,
.prose-host p:last-child { margin-bottom: 0; }
.fade-key blockquote p,
.prose-host blockquote p {
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  color: var(--c-smoke);
  margin-bottom: 0;
}
.fade-key li,
.prose-host li {
  font-family: var(--font-prose) !important;
}

/* Figure column distributes vertically alongside its prose neighbour */
.figcol {
  display: flex;
  flex-direction: column;
  gap: 28px;
  height: 100%;
  justify-content: space-between;
}
.figcol figure { margin: 0; }
@media (max-width: 880px) {
  .figcol { flex-direction: column; gap: 18px; }
}

/* ── Mobile drawer/responsive ── */
@media (max-width: 760px) {
  .wrap, .wrap-wide { padding: 0 20px; }
  .desktop-only { display: none !important; }

  /* Nav — brand row + horizontally scrollable links row */
  .nav-inner {
    height: auto !important;
    flex-wrap: wrap;
    gap: 2px 16px !important;
    padding: 10px 20px 0 !important;
  }
  .nav-links {
    width: 100%;
    overflow-x: auto;
    gap: 18px !important;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }

  /* Any two-column content split stacks */
  .g-split {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .g-gallery {
    grid-template-columns: 1fr !important;
  }

  /* Self-assessment rows: label on its own line, meter + word below */
  .meter-row {
    grid-template-columns: 1fr 88px !important;
    gap: 10px 16px !important;
  }
  .meter-row > div:first-child { grid-column: 1 / -1; }

  /* Portfolio index table: number · title · arrow */
  .pf-grid {
    grid-template-columns: 40px 1fr 22px !important;
    gap: 12px !important;
  }

  /* Tracklist rows */
  .track-title { font-size: 19px !important; }

  /* Case-study modal */
  .case-pad {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
  .case-title { font-size: 36px !important; }

  /* Footer columns stack, right block aligns left */
  .footer-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .footer-right { text-align: left !important; }

  /* Deck strip — tighter */
  .deck-strip { padding: 10px 14px !important; gap: 12px !important; }
  .deck-strip .deck-title { font-size: 15px !important; white-space: normal !important; }
}
@media (min-width: 761px) {
  .mobile-only { display: none !important; }
}