/* ============================================
   PAGES — Hero, Home, About, Contact, Details
   ============================================ */

/* ── Fullscreen hero ── */
.hero-fullscreen {
  position: relative;
  height: 100vh;          /* fallback */
  height: 100dvh;         /* accounts for iOS browser chrome */
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.hero-fullscreen > img,
.hero-fullscreen > picture,
.hero-fullscreen > picture img,
.hero-fullscreen > .prog-img-wrap {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  z-index: 0;
}

.hero-fullscreen > .prog-img-wrap img,
.hero-fullscreen > img,
.hero-fullscreen > picture img {
  object-fit: cover !important;
}

/* Tonal scrim so the name stays legible over any photo */
.hero-fullscreen::after {
  content: '';
  position: absolute;
  inset: 0;
  /* top scrim backing the name, a constant 4% veil, and the base scrim */
  background:
    linear-gradient(rgba(26, 26, 25, 0.35), rgba(26, 26, 25, 0) 30%),
    linear-gradient(rgba(13, 13, 12, 0.04), rgba(13, 13, 12, 0.04)),
    linear-gradient(rgba(26, 26, 25, 0) 55%, rgba(26, 26, 25, 0.45));
  z-index: 1;
  pointer-events: none;
}

/* Grain on the hero — same texture recipe as every other photo */
.hero-fullscreen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/images/Texture.jpg') repeat;
  background-size: 600px auto;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--width-wide);
  margin-inline: auto;
  padding: 0 var(--gutter) var(--space-lg);
}

.hero-eyebrow {
  color: rgba(246, 246, 244, 0.85);
  margin-bottom: var(--space-xs);
}

.hero-title {
  font-size: var(--text-display);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: var(--white);
}

/* ── Home bento — everything at a glance ── */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-sm);
}

.bento-cell {
  background: #fff;
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  min-width: 0;
}

.bento-cell > .label {
  margin-bottom: var(--space-2xs);
}

.bento-bio {
  grid-column: 1 / 4;
}

.bento-bio-text {
  font-size: var(--text-lede);
  line-height: 1.45;
  margin: 0;
}

.bento-highlight {
  grid-column: 4 / 7;
  grid-row: 1 / 3;
}

/* With the notes cell hidden the left column is a single row —
   the highlight matches it so both bottoms align */
.bento--nonotes .bento-highlight {
  grid-row: 1 / 2;
  position: relative;
  overflow: hidden;
  padding: 0;
  border: none;
  min-height: 18rem;
}

.bento-notes {
  grid-column: 1 / 4;
}

.bento-note-link {
  display: block;
  align-self: stretch;
}

.bento-note-title {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-weight: 300;
  line-height: var(--leading-snug);
  margin: var(--space-2xs) 0;
}

.bento-note-excerpt {
  display: block;
  font-family: var(--font-inter);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--charcoal);
}

.bento-highlight img,
.bento-highlight .prog-img-wrap {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
}

.bento-highlight img,
.bento-highlight .prog-img-wrap img {
  object-fit: cover !important;
  transition: transform 400ms var(--ease);
}

.bento-highlight:hover img {
  transform: scale(1.03);
}

.bento-highlight-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-md);
  background: linear-gradient(to bottom,
    rgba(var(--shade-rgb, 26, 26, 25), 0.02) 0%,
    rgba(var(--shade-rgb, 26, 26, 25), 0.03) 22%,
    rgba(var(--shade-rgb, 26, 26, 25), 0.05) 34%,
    rgba(var(--shade-rgb, 26, 26, 25), 0.08) 44%,
    rgba(var(--shade-rgb, 26, 26, 25), 0.13) 54%,
    rgba(var(--shade-rgb, 26, 26, 25), 0.20) 64%,
    rgba(var(--shade-rgb, 26, 26, 25), 0.30) 74%,
    rgba(var(--shade-rgb, 26, 26, 25), 0.42) 84%,
    rgba(var(--shade-rgb, 26, 26, 25), 0.53) 93%,
    rgba(var(--shade-rgb, 26, 26, 25), 0.62) 100%);
}

.bento-highlight-label {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  color: rgba(246, 246, 244, 0.85);
  margin: 0 0 var(--space-xs);
}

.bento-highlight-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 2.6vw, 2.75rem);
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: var(--white);
  margin: 0;
}

.bento-highlight--noimg {
  background: linear-gradient(160deg, #f0efeb, var(--warm-grey));
}

.bento-highlight--noimg::before {
  content: attr(data-initial);
  position: absolute;
  top: -0.12em;
  right: 0.02em;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 14rem;
  line-height: 1;
  color: rgba(26, 26, 25, 0.06);
  pointer-events: none;
}

.bento-highlight--noimg .bento-highlight-overlay {
  background: none;
}

.bento-highlight--noimg .bento-highlight-label {
  color: var(--dark-grey);
}

.bento-highlight--noimg .bento-highlight-title {
  color: var(--near-black);
}

.bento-concerts {
  grid-column: 1 / 4;
}

.bento-concerts .upcoming-list {
  align-self: stretch;
}

/* Inside the card, rows (tint and hairlines) run flush to its edges */
.bento-concerts .upcoming-item {
  margin-inline: calc(-1 * var(--space-md));
  padding-inline: var(--space-md);
}

.bento-projects {
  grid-column: 1 / 4;
}

.bento-projects-list {
  list-style: none;
  align-self: stretch;
}

.bento-projects-list a {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--warm-grey);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--dur-fast) var(--ease);
}

.bento-projects-list li:last-child a {
  border-bottom: none;
}

.bento-projects-list a:hover {
  text-decoration-color: var(--near-black);
}

/* Contact reads as the one colored cell — the footer's steel blue,
   navy ink, and a filled pill that can't be missed */
.bento-contact {
  grid-column: 1 / 7;
  background: var(--accent);
  padding: var(--space-lg) var(--space-md);
  margin-top: var(--space-lg);
}

.bento-contact .label {
  color: #2c3a55;
}

.bento-contact-text {
  color: #1d2440;
  font-size: var(--text-lede);
  line-height: var(--leading-snug);
  margin: 0;
}

.bento-contact .btn {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #fff;
}

.bento-contact .btn:hover {
  background: #fff;
  border-color: #fff;
  color: var(--accent-deep);
}

.bento-cell-link {
  font-family: var(--font-sans);
  font-size: var(--text-sans);
  color: var(--dark-grey);
  margin-top: auto;
  transition: color var(--dur-fast) var(--ease);
}

.bento-cell-link:hover {
  color: var(--near-black);
}

@media (max-width: 900px) {
  .bento {
    display: flex;
    flex-direction: column;
  }
  .bento-highlight {
    min-height: 20rem;
    order: 1;
  }
  .bento-notes { order: 0; }
  .bento-concerts { order: 2; }
  .bento-contact { order: 3; }
}

.upcoming-list {
  list-style: none;
}

.upcoming-item {
  display: block;
  padding: var(--space-md2) var(--space-sm);
  margin-inline: calc(-1 * var(--space-sm));
  border-bottom: 1px solid rgba(51, 50, 47, 0.08);
  transition: background-color var(--dur-fast) var(--ease);
}

li:last-child > .upcoming-item {
  border-bottom: none;
}

/* Home bento rows mirror the concerts overview: date block left, title
   beside it on the shared baseline */
.upcoming-item--rich {
  display: grid;
  grid-template-columns: minmax(7.5rem, 9.5rem) minmax(0, 1fr);
  gap: var(--space-sm) var(--space-md);
  align-items: start;
}

.upcoming-item--rich .upcoming-item-title {
  padding-top: 1.6rem;
  font-size: var(--text-h2);
}

@media (max-width: 700px) {
  .upcoming-item--rich {
    display: block;
  }
  .upcoming-item--rich .upcoming-item-title {
    padding-top: var(--space-xs);
  }
}

.upcoming-item:hover {
  background-color: rgba(232, 230, 225, 0.35);
}

.upcoming-item-date {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  color: var(--dark-grey);
  display: block;
  margin-bottom: var(--space-2xs);
}

.upcoming-item-title {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-weight: 300;
  line-height: var(--leading-snug);
  display: block;
}

.upcoming-item-place {
  font-family: var(--font-sans);
  font-size: var(--text-sans);
  color: var(--dark-grey);
  display: block;
  margin-top: var(--space-2xs);
}

/* ── Concerts page ── */
.concerts-page {
  max-width: 60rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ── About ── */
.about-page {
  max-width: var(--width-content);
  margin-inline: auto;
  padding: 0 var(--gutter) var(--space-xl);
}

.about-page .content {
  /* Long-form reading text in Inter for legibility; headings, the lede
     and the pull-quote stay serif */
  font-family: var(--font-inter);
  font-size: 1rem;
  line-height: var(--leading-relaxed);
  color: var(--charcoal);
}

/* The markdown image paragraph collapses to an empty <p> once the browser
   re-parents the progressive wrapper — hide its stray margin */
.about-page .content > p:empty {
  display: none;
}

/* Portrait: calm full-width banner between the header and the text */
.about-page .content > .prog-img-wrap {
  aspect-ratio: 3 / 2;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-lg);
}

.about-page .content > .prog-img-wrap img {
  object-position: 50% 22%;
}

/* First text paragraph reads as a lede */
.about-page .content > .prog-img-wrap + p {
  font-family: var(--font-serif);
  font-size: var(--text-lede);
  line-height: 1.45;
  margin-bottom: var(--space-md);
}

.about-page .content h2 {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

.about-page .content blockquote {
  font-family: var(--font-serif);
  font-size: var(--text-lede);
  line-height: 1.45;
  border-left: 1px solid var(--mid-grey);
  padding-left: var(--space-md);
  margin: var(--space-lg) 0;
}

.about-page .content blockquote p {
  margin-bottom: 0;
}

@media (max-width: 700px) {
  .about-page .content > .prog-img-wrap {
    aspect-ratio: 4 / 5;
    margin-bottom: var(--space-md);
  }
}

.about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* Standalone external links inside content render as clean buttons */
.content-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: var(--space-xl) 0 0;
}

.content-actions + .content-actions {
  margin-top: var(--space-sm);
}

.about-projects {
  max-width: var(--width-content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.about-projects > h2 {
  margin-bottom: var(--space-md);
}

.about-projects-more {
  margin-top: var(--space-md);
}

/* ── Contact ── */
.contact-page {
  max-width: var(--width-content);
  margin-inline: auto;
  padding: 0 var(--gutter) var(--space-xl);
}

/* Fields stay a comfortable reading width inside the wider page */
.contact-page .form-group input,
.contact-page .form-group textarea,
.contact-page .newsletter-row {
  max-width: 34rem;
}

.contact-page form {
  margin-bottom: var(--space-md);
}

.contact-page form > .btn {
  margin-top: var(--space-sm);
}

.contact-page h2 {
  margin-bottom: var(--space-md);
}

.contact-divider {
  border-top: 1px solid var(--warm-grey);
  margin: var(--space-lg) 0;
}

.contact-footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.contact-newsletter-hint {
  font-family: var(--font-sans);
  font-size: var(--text-sans);
  color: var(--dark-grey);
  margin-bottom: var(--space-sm);
}

/* ── Detail pages (concert, project, highlight) ── */
.concert-detail,
.detail-page {
  max-width: var(--width-content);
  margin-inline: auto;
  padding: var(--space-2xl) var(--gutter) var(--space-xl);
}

.concert-detail h1,
.detail-page h1 {
  margin-bottom: var(--space-sm);
}

.concert-detail .date {
  font-size: var(--text-label);
  color: var(--dark-grey);
  font-family: var(--font-sans);
  margin-bottom: var(--space-sm);
}

.concert-detail .meta,
.detail-page .meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  font-size: var(--text-sans);
  color: var(--dark-grey);
  font-family: var(--font-sans);
  margin-bottom: var(--space-lg);
}

.detail-page .featured-image {
  margin-bottom: var(--space-lg);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.detail-page .video-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin-bottom: var(--space-lg);
  border-radius: var(--radius-lg);
}

.detail-page .video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Embedded players inside content (SoundCloud, audio recordings) */
.detail-page .content iframe,
.concert-detail .content iframe {
  width: 100%;
  border: none;
  border-radius: var(--radius-sm);
  margin: var(--space-sm) 0;
}

.detail-page .content audio,
.concert-detail .content audio {
  width: 100%;
  margin: var(--space-sm) 0;
}

/* ── Highlights listing ── */
.highlights-section {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-xl);
}

/* ── 404 + form-success ── */
.page-404,
.page-success {
  max-width: var(--width-prose);
  margin-inline: auto;
  padding: var(--space-2xl) var(--gutter) var(--space-xl);
  text-align: center;
}

/* ── Concerts belonging to a project ── */
.project-concerts {
  margin-top: var(--space-lg);
}

.project-concerts > h2 {
  margin-bottom: var(--space-sm);
}

.project-concerts-label {
  margin: var(--space-md) 0 var(--space-2xs);
}

.upcoming-list--past .upcoming-item-title {
  font-size: 1.25rem;
  color: var(--charcoal);
}

.upcoming-list--past .upcoming-item {
  padding-block: var(--space-sm);
}

.project-concerts-more {
  margin-top: var(--space-sm);
}

/* ── About gallery — cross-fading portraits with quiet controls ── */
.about-gallery {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  margin-bottom: var(--space-lg);
  background: var(--warm-grey);
}

.gallery-slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}

/* slides carry the site's progressive image: colour tile first, photo
   fades in — no more top-to-bottom trickle */
.gallery-slide .prog-img-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.gallery-slide .prog-img-wrap img {
  object-position: 50% 22%;
}

/* Dissolve: the outgoing slide holds at full opacity underneath
   while the incoming one fades in above it */
.gallery-slide.was-active {
  opacity: 1;
  z-index: 1;
}

.gallery-slide.is-active {
  opacity: 1;
  z-index: 2;
}

@media (max-width: 700px) {
  .about-gallery {
    aspect-ratio: 4 / 5;
  }
}

/* Past concerts on a project page fold away until asked for */
.project-archive > summary {
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-fast) var(--ease);
}

.project-archive > summary::-webkit-details-marker {
  display: none;
}

.project-archive > summary::after {
  content: '\25B8';
  display: inline-block;
  margin-left: 0.45em;
  font-size: 0.85em;
  transition: transform var(--dur-fast) var(--ease);
}

.project-archive[open] > summary::after {
  transform: rotate(90deg);
}

.project-archive > summary:hover {
  color: var(--near-black);
}

/* ── Note drift — the latest note as a quiet centred thought above the
   bento: words fade in one by one, the whole thought breathes slowly,
   then recedes a little once it has been said. ── */
.note-drift {
  max-width: var(--width-prose);
  /* generous air around the thought — three times the old breathing room */
  margin: calc(var(--space-xl) * 3) auto calc(var(--space-xl) * 1.5);
  padding: 0 var(--gutter);
  text-align: center;
  position: relative;
  z-index: 2;
}

.note-drift-link {
  display: block;
  text-decoration: none;
  color: inherit;
  animation: note-drift-breathe 11s var(--ease) infinite alternate;
}

@keyframes note-drift-breathe {
  from { transform: translateY(0); }
  to   { transform: translateY(-7px); }
}

.note-drift-text {
  font-family: var(--font-serif);
  font-style: italic;
  /* 0.78 of the lede size (0.6, then 1.3x up) — quiet but present */
  font-size: calc(var(--text-lede) * 0.78);
  font-weight: 300;
  line-height: 1.5;
  color: var(--charcoal);
  margin: 0 0 var(--space-xs);
  transition: opacity 3s var(--ease);
}

/* The quotation marks are their own spans with the same ink-room padding
   as the words, so they can never be clipped — very light, the words
   carry the weight */
.note-drift-text .nq {
  color: var(--mid-grey);
  padding: 0.12em 0.16em;
  margin: -0.12em -0.16em;
}
.note-drift.is-live .nw.nq {
  opacity: 0.85;
}

.note-drift-text .nw {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em);
  filter: blur(10px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), filter 0.8s var(--ease);
}

.note-drift.is-live .nw {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* Each word keeps floating and softly pulsating on its own rhythm —
   duration and phase are set per word inline, so no two move together.
   The padding (undone by the negative margin) gives italic glyphs room
   to overhang inside the animated box instead of being cut off. */
.note-drift-text .nw-i {
  display: inline-block;
  padding: 0.12em 0.16em;
  margin: -0.12em -0.16em;
  animation: nw-float 4s ease-in-out infinite alternate;
}

@keyframes nw-float {
  from { transform: translateY(0.03em); opacity: 1; }
  to   { transform: translateY(-0.06em); opacity: 0.78; }
}

/* said — now it really drifts off */
.note-drift.is-settled .note-drift-text {
  opacity: 0.3;
  transition: opacity 5s var(--ease);
}

/* making room for the next thought */
.note-drift.is-leaving .note-drift-text,
.note-drift.is-leaving .note-drift-meta {
  opacity: 0;
  transition: opacity 1.5s var(--ease);
}

.note-drift-meta {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  letter-spacing: 0.04em;
  color: var(--dark-grey);
  opacity: 0;
  transition: opacity 1.6s var(--ease) 0.9s, color var(--dur-fast) var(--ease);
}

.note-drift.is-live .note-drift-meta {
  opacity: 1;
}

.note-drift-link:hover .note-drift-text {
  opacity: 1;
  transition-duration: 0.6s;
}

.note-drift-link:hover .note-drift-meta {
  color: var(--near-black);
}

@media (prefers-reduced-motion: reduce) {
  .note-drift-link { animation: none; }
  .note-drift-text .nw { transition: none; opacity: 1; transform: none; filter: none; }
  .note-drift-text .nw-i { animation: none; }
  .note-drift-meta { transition: none; opacity: 1; }
}

/* ── Notes overview — every note floats, loosely off-axis so the page
   reads as drifting thoughts rather than a list ── */
.notes-float {
  display: flex;
  flex-direction: column;
  gap: clamp(7rem, 16vh, 11rem);
  max-width: var(--width-prose);
  margin: var(--space-2xl) auto var(--space-2xl);
}

.notes-float .note-drift {
  margin: 0;
}

.notes-float .note-drift-meta {
  display: block;
  margin-top: var(--space-xs);
}

/* date and title lead each note on the overview */
.notes-float .note-drift-meta--top {
  margin: 0 0 var(--space-sm);
}

/* a quiet hairline announces every next note */
.notes-float .note-drift + .note-drift {
  border-top: 1px solid var(--warm-grey);
  padding-top: clamp(4rem, 9vh, 6.5rem);
}

/* On the overview and note pages the movement stays gentler than on
   the home page — floating, not swaying */
@keyframes nw-float-soft {
  from { transform: translateY(0.03em); opacity: 1; }
  to   { transform: translateY(-0.05em); opacity: 0.85; }
}

.note-drift--page .nw-i {
  animation-name: nw-float-soft;
}

@keyframes note-drift-breathe-soft {
  from { transform: translateY(0); }
  to   { transform: translateY(-5px); }
}

.note-drift--page .note-drift-link {
  animation-name: note-drift-breathe-soft;
  animation-duration: 14s;
}

/* ── Note detail page — the note itself keeps floating ── */
.note-page {
  text-align: center;
}

.note-page .detail-top {
  text-align: left;
}

.note-drift--full {
  margin: var(--space-lg) auto 0;
  max-width: var(--width-prose);
  padding: 0;
}


.note-drift--full .note-drift-text {
  animation: note-drift-breathe-soft 14s var(--ease) infinite alternate;
}

.note-page-date {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  letter-spacing: 0.05em;
  color: var(--dark-grey);
  margin: 0 0 var(--space-xs);
}

.note-page-title {
  font-weight: 300;
  font-size: var(--text-h2);
  margin-bottom: var(--space-md);
}

.note-page-body p {
  margin: 0 0 var(--space-sm);
}

.note-page-body audio,
.note-page-body .audio-player {
  margin-left: auto;
  margin-right: auto;
}

.content-actions--centered {
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .note-drift--full .note-drift-text { animation: none; }
}

/* ── Note photos — a loose stack of pictures: slightly rotated, gently
   swaying against each other; hovering brings one forward ── */
.note-photos {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  max-width: 42rem;
  margin: var(--space-lg) auto var(--space-md);
}

/* the stack is expansive — twice the old size, breaking out well beyond
   the text column (the hover peek on the index keeps its own size) */
.note-photos:not(.note-photos--peek) {
  width: min(92vw, 72rem);
  max-width: none;
  margin: var(--space-lg) calc(50% - min(46vw, 36rem)) var(--space-md);
}

.note-photo {
  width: min(44%, 30rem);
  margin: -2.6rem -2rem;
  transform: rotate(var(--pr, 0deg));
  /* the z-index swap waits a beat, so the size change leads the layering */
  transition: transform 0.55s var(--ease), z-index 0s 0.12s;
  z-index: 1;
}

/* portrait photos narrower, so both orientations read as the same size */
.note-photo--portrait {
  width: min(33%, 21.5rem);
}

.note-photo:hover {
  transform: rotate(0deg) scale(1.07);
  z-index: 5;
  transition: transform 0.55s var(--ease), z-index 0s 0s;
}

/* while hovered, the whole stack rises above neighbouring sections,
   players and hairlines instead of sliding underneath them */
.note-photos {
  position: relative;
}

.note-photos:hover,
.note-media:hover {
  z-index: 60;
}

.note-drift:hover {
  z-index: 30;
}

/* while one photo comes forward, the others lean back */
.note-photos:hover .note-photo:not(:hover) {
  transform: rotate(var(--pr, 0deg)) scale(0.95);
}

.note-photo-sway {
  background: #fff;
  padding: 0.45rem;
  animation: note-photo-sway 7s ease-in-out infinite alternate;
}

/* picture → black border → white mat → shadow */
.note-photo-sway .prog-img-wrap {
  border: 1px solid var(--near-black);
}

@keyframes note-photo-sway {
  from { transform: translateY(3px) rotate(0.4deg); }
  to   { transform: translateY(-4px) rotate(-0.5deg); }
}

/* one photo stands alone, straight and centred */
.note-photos--one .note-photo {
  width: min(92%, 44rem);
  margin: 0;
  transform: none;
}

.note-photos--one .note-photo--portrait {
  width: min(64%, 30rem);
}

.note-photos--one .note-photo:hover {
  transform: scale(1.03);
}

/* Index: the latest note's photos sit right beneath the quote — always
   visible, a quieter size than the big overview stacks */
.note-photos--index,
.note-photos.note-photos--index:not(.note-photos--peek) {
  width: min(90vw, 36rem);
  max-width: none;
  margin: var(--space-sm) auto 0;
}

@media (max-width: 600px) {
  .note-photo { width: 64%; margin: -1.2rem -1.8rem; }
  .note-photo--portrait { width: 48%; }
  .note-photos--one .note-photo { width: 94%; }
  .note-photos--one .note-photo--portrait { width: 70%; }
}

@media (prefers-reduced-motion: reduce) {
  .note-photo-sway { animation: none; }
}

/* Photos, media and links wait for the words: hidden until half the
   text has arrived */
.note-photos:not(.note-photos--peek),
.note-media,
.note-links {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1.4s var(--ease), transform 1.4s var(--ease);
}

.note-attach--in {
  opacity: 1 !important;
  transform: none !important;
}

.note-photo {
  cursor: zoom-in;
}



/* ── Photo lightbox — click to expand; the frame keeps the picture's
   dominant colour while the large version loads ── */
.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 5vw, 3rem);
  /* no dark veil — a light frosted breath of the site's own ground */
  background: rgba(246, 246, 244, 0.72);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  cursor: zoom-out;
}

.photo-lightbox.is-open {
  opacity: 1;
}

.photo-lightbox-frame {
  position: relative;
  background: #fff;
  padding: 0.5rem;
  box-shadow:
    0 4px 14px rgba(13, 13, 12, 0.10),
    0 22px 60px rgba(13, 13, 12, 0.14);
  max-width: min(78vw, 54rem);
  max-height: 80vh;
  transform: scale(0.95);
  transition: transform 0.4s var(--ease);
  cursor: default;
}

.photo-lightbox-close {
  position: absolute;
  top: -0.8rem;
  right: -0.8rem;
  width: 1.9rem;
  height: 1.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--near-black);
  border-radius: 999px;
  background: #fff;
  color: var(--near-black);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.photo-lightbox-close:hover {
  background: var(--near-black);
  color: #fff;
}

.photo-lightbox.is-open .photo-lightbox-frame {
  transform: scale(1);
}

.photo-lightbox-frame img {
  display: block;
  max-width: 100%;
  max-height: calc(80vh - 1.6rem);
  width: auto;
  height: auto;
  object-fit: contain;
  border: 1px solid var(--near-black);
}

@media (prefers-reduced-motion: reduce) {
  .note-photos:not(.note-photos--peek),
  .note-media,
  .note-links { opacity: 1; transform: none; transition: none; }
}

/* ── Note media — audio and video floating like the photos ── */
.note-media {
  position: relative;
  max-width: 34rem;
  margin: var(--space-lg) auto var(--space-md);
  transition: transform 0.55s var(--ease);
}

.note-media.note-attach--in:hover {
  transform: scale(1.02) !important;
}

.note-media .note-media-sway {
  animation: note-photo-sway 8s ease-in-out infinite alternate;
}

.note-media--audio .audio-player {
  background: var(--white);
}

.note-media--video .note-media-sway {
  background: #fff;
  padding: 0.45rem;
}

.note-media--video video {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--near-black);
  background: var(--near-black);
}

/* ── Note links — quiet floating links instead of buttons ── */
.note-links {
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin: var(--space-lg) auto var(--space-md);
}

.note-link-float {
  display: inline-block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--charcoal);
  text-decoration: underline;
  text-decoration-color: var(--warm-grey);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  animation: note-drift-breathe-soft 9s ease-in-out infinite alternate;
  transition: transform 0.5s var(--ease), color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease);
}

.note-link-float:nth-child(even) { animation-delay: -4.5s; }
.note-link-float:nth-child(3n) { animation-delay: -2.5s; }

.note-link-float:hover {
  transform: translateY(-3px) scale(1.06);
  color: var(--near-black);
  text-decoration-color: var(--near-black);
}

.note-link-arrow {
  font-size: 0.8em;
  color: var(--dark-grey);
}

@media (prefers-reduced-motion: reduce) {
  .note-media .note-media-sway,
  .note-link-float { animation: none; }
}

/* ── Hero scroll hint — a quiet white chevron: fades in after a second,
   nudges down twice, rests, nudges twice more, then fades away for good ── */
.hero-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 2.2rem;
  z-index: 2;
  color: rgba(246, 246, 244, 0.9);
  filter: drop-shadow(0 1px 4px rgba(13, 13, 12, 0.35));
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%);
  animation: hero-scroll-hint 8s ease-in-out 1s 1 forwards;
}

.hero-scroll-hint svg { display: block; }

@keyframes hero-scroll-hint {
  0%   { opacity: 0; transform: translateX(-50%) translateY(0); }
  9%   { opacity: 1; transform: translateX(-50%) translateY(0); }
  /* first pair of nudges */
  13%  { transform: translateX(-50%) translateY(9px); }
  17%  { transform: translateX(-50%) translateY(0); }
  21%  { transform: translateX(-50%) translateY(9px); }
  25%  { transform: translateX(-50%) translateY(0); }
  /* rest */
  55%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  /* second pair */
  59%  { transform: translateX(-50%) translateY(9px); }
  63%  { transform: translateX(-50%) translateY(0); }
  67%  { transform: translateX(-50%) translateY(9px); }
  71%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  /* gone */
  100% { opacity: 0; transform: translateX(-50%) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll-hint { display: none; }
}

/* ── Highlights filters — quiet pills under the page title ── */
.hl-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: calc(-1 * var(--space-md)) 0 var(--space-md);
}

.hl-filter {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  color: var(--dark-grey);
  background: none;
  border: 1px solid var(--warm-grey);
  border-radius: 999px;
  padding: 0.45em 1.1em;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.hl-filter:hover {
  color: var(--near-black);
  border-color: var(--near-black);
}

.hl-filter.active {
  background: var(--near-black);
  border-color: var(--near-black);
  color: var(--off-white);
}

/* Mobile: the first highlight card is visible without scrolling */
@media (max-width: 768px) {
  .highlights-section .page-header {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-sm);
  }
  .hl-filters { margin-top: 0; }
}