/* ============================================================
   AEGIRA DUO — Main Stylesheet
   
   STRUCTURE:
   1. Variables & Reset
   2. Navigation
   3. Footer
   4. Shared Section Styles
   5. Buttons
   6. Homepage — Hero
   7. Homepage — S&R Preview
   8. Homepage — Composer Grid
   9. About Page
   10. Synesthesia & Ritual Page
   11. Shows Page
   ============================================================ */

/* ── WEBFONT: TAN-MON CHERI ── */
@font-face {
  font-family: 'TAN-MON CHERI';
  src: url('../fonts/tan-mon-cheri-regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}



/* ── 1. VARIABLES & RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --linen:      #F5F0E8;
  --ink:        #2A2520;
  --teal:       #2C6E6A;
  --seafoam:    #A8C5C0;
  --drift:      #8C7B6E;
  --nav-h:      64px;
  --cg:         'Cormorant Garamond', 'Garamond', serif;
  --inter:      'Inter', sans-serif;
}

html { scroll-behavior: smooth; }
body {
  background: var(--linen);
  color: var(--ink);
  font-family: var(--inter);
  font-weight: 300;
}


/* ── 2. NAVIGATION ── */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 52px;
  background: var(--ink);
  border-bottom: 0.5px solid rgba(168, 197, 192, 0.25);
}

nav a.nav-home {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;     /* keep logo fixed width — avoids layout shift at small screens */
}

/* Wrapper around <ul> — needed so we can position the drawer at small screens
   without breaking the existing inline-list markup. */
nav .nav-list {
  display: flex;
  align-items: center;
  position: absolute;          /* pull out of flex flow so it centers independently */
  left: 50%;
  transform: translateX(-50%);
}

nav ul {
  list-style: none;
  display: flex;
  gap: 40px;
}

nav ul a {
  font-family: var(--inter);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--seafoam);
  text-decoration: none;
  /* Slight stroke for legibility on dark bg, between normal and bold */
  -webkit-text-stroke: 0.6px currentColor;
  transition: color 0.2s, -webkit-text-stroke 0.2s;
}

nav ul a:hover,
nav ul a.active {
  color: var(--linen);
  -webkit-text-stroke: 0.6px currentColor;
}

/* Submenu under a nav item — hover + focus-within trigger so it works for
   mouse, touch (tap parent first), and keyboard (tab into parent). */
nav li.nav-has-sub {
  position: relative;
}

nav li.nav-has-sub > a::after {
  content: ' ▾';
  font-size: 0.7em;
  margin-left: 4px;
  opacity: 0.7;
}

nav .nav-submenu {
  list-style: none;
  /* Override the parent `nav ul` rule which sets display:flex with a 40px
     horizontal gap — that lays the submenu items out side-by-side.
     We want the dropdown to stack vertically, with a small vertical gap. */
  display: flex;
  flex-direction: column;
  gap: 0;
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--ink);
  border: 0.5px solid rgba(168, 197, 192, 0.3);
  padding: 8px 0;
  min-width: 180px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 110;
}

nav li.nav-has-sub:hover > .nav-submenu,
nav li.nav-has-sub:focus-within > .nav-submenu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

nav .nav-submenu li {
  display: block;
}

nav .nav-submenu a {
  display: block;
  padding: 10px 24px;
  white-space: nowrap;
  color: var(--seafoam);
  font-size: 11px;
}

/* Submenu in mobile drawer: drop the absolute positioning, expand inline */
@media (max-width: 767px) {
  nav li.nav-has-sub > a::after { display: none; }
  nav li.nav-has-sub {
    width: 100%;          /* fill the drawer column so the submenu can't escape it */
  }
  nav .nav-submenu {
    position: static !important;
    transform: none !important;
    display: block !important;
    background: transparent;
    border: none;
    padding: 0;
    min-width: 0;
    opacity: 1;
    pointer-events: auto;
  }
  nav .nav-submenu a {
    padding: 10px 32px 10px 52px;   /* indent to show hierarchy */
    font-size: 12px;
    color: var(--seafoam);
    opacity: 0.7;
  }
  nav .nav-submenu a:hover { opacity: 1; }
}

/* Black nav uses the light/cream logo variant */
nav .nav-logo-light { display: block; }
nav .nav-logo-dark  { display: none; }

/* Hamburger toggle button — hidden on desktop, shown in mobile drawer mode */
nav .nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 8px;
  margin: 0;
  cursor: pointer;
  color: var(--seafoam);
  /* Tap target: 44x44 minimum */
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

nav .nav-toggle:hover { color: var(--linen); }
nav .nav-toggle:focus-visible { outline: 2px solid var(--seafoam); outline-offset: 2px; }

/* Three-line hamburger icon via box-shadows — keeps markup minimal */
nav .nav-toggle-icon,
nav .nav-toggle-icon::before,
nav .nav-toggle-icon::after {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.25s, opacity 0.25s;
  position: relative;
}

nav .nav-toggle-icon::before,
nav .nav-toggle-icon::after { content: ''; position: absolute; left: 0; }
nav .nav-toggle-icon::before { top: -7px; }
nav .nav-toggle-icon::after  { top:  7px; }

/* When drawer is open, transform the hamburger into an X */
body.nav-open nav .nav-toggle-icon { background: transparent; }
body.nav-open nav .nav-toggle-icon::before { top: 0 !important; transform: rotate(45deg) !important; }
body.nav-open nav .nav-toggle-icon::after  { top: 0 !important; transform: rotate(-45deg) !important; }

/* Dim overlay behind the open drawer */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  z-index: 98;
}

body.nav-open .nav-backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* ── Mid-breakpoint: shrink nav gap before going to hamburger ── */
@media (max-width: 1024px) {
  nav { padding: 0 32px; }
  nav ul { gap: 24px; }
}

@media (max-width: 900px) {
  nav ul { gap: 16px; }
  nav ul a { font-size: 11px; letter-spacing: 0.14em; }
}

/* ── Mobile: hamburger drawer ── */
@media (max-width: 767px) {
  nav {
    padding: 0 20px;
    gap: 14px;                  /* consistent gap between social icons and toggle */
  }

  nav .nav-toggle {
    display: flex;
    position: relative;      /* establish stacking context for the X icon */
    z-index: 101;            /* above the drawer (99) and backdrop (98) */
  }

  /* Social icons sit directly left of the hamburger inside .nav-actions,
     evenly spaced by the container's gap: 12px. The hamburger reads as
     a third icon in the row. */
  nav .nav-social {
    display: flex;
    gap: 12px;
    align-items: center;
  }

  /* Drawer sits over the page (not the nav) so it slides in below the bar */
  nav .nav-list {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;                /* override desktop centering */
    width: 80vw;
    max-width: 320px;
    height: 100vh;
    background: var(--ink);
    border-left: 0.5px solid rgba(168, 197, 192, 0.25);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: calc(var(--nav-h) + 24px) 0 24px;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 99;
  }

  body.nav-open nav .nav-list { transform: translateX(0); }

  nav ul {
    flex-direction: column;
    gap: 0;
    width: 100%;
  }

  nav ul a {
    display: block;
    padding: 14px 32px;
    min-height: 44px;          /* WCAG tap-target minimum */
    font-size: 13px;
    letter-spacing: 0.16em;
  }

  nav ul a:hover,
  nav ul a.active {
    background: rgba(168, 197, 192, 0.08);
  }
}

/* Lock body scroll while drawer is open */
body.nav-open { overflow: hidden; }


/* ── 3. FOOTER ── */
footer {
  background: var(--ink);
  padding: 56px 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px;
  border-top: 0.5px solid rgba(168, 197, 192, 0.25);
}

.footer-links {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

.footer-links a {
  font-family: var(--inter);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--seafoam);
  text-decoration: none;
  -webkit-text-stroke: 0.4px currentColor;
  transition: color 0.2s;
}

.footer-links a:hover { color: var(--linen); }

.footer-copy {
  font-family: var(--inter);
  font-weight: 300;
  font-size: 10px;
  color: var(--drift);
  letter-spacing: 0.08em;
}

/* Social icon row in the footer — sits between links and copyright on
   wide screens, stacks on narrow ones. Same seafoam as the footer-links
   for visual consistency. */
.footer-social {
  display: flex;
  gap: 16px;
  align-items: center;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--seafoam);
  text-decoration: none;
  transition: color 0.2s, transform 0.2s;
  border-radius: 50%;
}

.footer-social-link:hover {
  color: var(--linen);
  transform: translateY(-1px);
}

.footer-social-link svg {
  display: block;
}

/* Social icon cluster inside the top nav — appears to the right of the
   main nav list on desktop, hidden in the mobile drawer. Uses the same
   seafoam as the nav links. */
nav .nav-social {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-left: 24px;
}

nav .nav-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--seafoam);
  text-decoration: none;
  transition: color 0.2s, transform 0.2s;
}

nav .nav-social-link:hover {
  color: var(--linen);
  transform: translateY(-1px);
}

nav .nav-social-link svg {
  display: block;
}

/* Wrapper for social icons + hamburger toggle. On desktop the hamburger
   is hidden, so this just groups the social icons on the far right.
   On mobile, the two sit side by side with even spacing. */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;                   /* even spacing between social icons and hamburger */
  margin-left: auto;           /* push the whole cluster to the right */
}


/* ── 4. SHARED SECTION STYLES ── */
section { padding: 100px 52px; }

.page-body { padding: 96px 52px 75px; }

.section-eyebrow {
  font-family: var(--inter);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 16px;
}

h2.section-title {
  font-family: var(--cg);
  font-weight: 300;
  font-size: clamp(32px, 3vw, 48px);
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 32px;
}

.section-rule {
  width: 40px;
  height: 0.5px;
  background: var(--teal);
  margin-bottom: 40px;
}

/* ── 4b. SPONSORS SECTION ── */
/* Bottom-of-page sponsors block on homepage + S&R page.
   Uses the same eyebrow / title / rule pattern as the other sections.
   padding-top is cut in half (50px vs the base 100px) so the section
   doesn't feel disconnected from the content above it. */
.sponsors {
  padding: 50px 52px 100px;      /* top: 50 (was 100), bottom: 100 (gap before footer) */
  text-align: center;            /* center the eyebrow, title, and rule */
}

.sponsors .section-eyebrow {
  /* Same teal 10px caps as elsewhere; no override needed */
}

.sponsors .section-title {
  /* Same Cormorant serif clamp as elsewhere; no override needed */
}

.sponsors .section-rule {
  margin-left: auto;             /* center the 40px rule */
  margin-right: auto;
}

.sponsors-strip {
  display: block;
  width: 100%;
  max-width: 1200px;             /* match .shows-body max-width for consistency */
  height: auto;
  margin: 0 auto;                /* center within section */
  /* Source is 2400×800 (3:1). At max-width 1200px the strip renders
     at 400px tall on desktop — substantial enough to read logos clearly
     without dominating the page. On mobile width 100% caps height at
     ~150px which is plenty for a strip of this aspect. */
}

/* ── 4d. LISTEN SECTION (homepage video) ── */
/* A single YouTube embed on the homepage, placed between the Composers
   grid and the Sponsors section. Restrained framing — the S&R project
   remains the priority. */
.listen {
  padding: 50px 52px 100px;       /* modest top, full bottom to match sponsor gap */
  text-align: center;
}

.listen .section-eyebrow {
  /* standard eyebrow style; no override needed */
}

.listen .section-title {
  /* standard title style; no override needed */
}

.listen .section-rule {
  /* standard rule style; no override needed */
  margin: 0 auto 48px;
  width: 60px;                    /* shorter rule than full-width */
}

.listen-embed {
  max-width: 720px;               /* keeps the embed from dominating */
  margin: 0 auto;
}

/* 16:9 responsive wrapper for the iframe */
.listen-embed-frame {
  position: relative;
  padding-bottom: 56.25%;         /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  background: var(--ink);         /* dark background while loading */
  border-radius: 2px;
}

.listen-embed-frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.listen-caption {
  font-family: var(--inter);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--drift);
  margin-top: 20px;
  line-height: 1.5;
}

/* Phone: full-width embed, tighter padding */
@media (max-width: 600px) {
  .listen {
    padding: 40px 20px 80px;
  }
  .listen-embed {
    max-width: 100%;
  }
  .listen .section-rule {
    margin-bottom: 32px;
  }
}


/* ── 4c. IMAGE CREDITS ── */
/* HTML-based attribution for the homepage S&R preview image.
   The S&R page banner bakes its attribution into the image (dark
   gradient + white text in the bottom-right corner), but the homepage
   concept art is a clean image — the credit sits as a small text line
   directly below. Stays small and quiet so it doesn't compete with
   the section title or body copy. */
.image-credit {
  font-family: var(--inter);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink);
  opacity: 0.72;               /* ~72% black ink on linen — legible but quiet */
  margin-top: 14px;
  max-width: 60ch;             /* wide enough for line 1 on its own row */
  line-height: 1.5;
}
.image-credit em {
  font-style: italic;
  font-weight: 500;
}

/* Variant: the S&R page banner uses a right-aligned text-only credit
   sitting just below the full-width image — no baked overlay.
   padding-right keeps the credit off the viewport edge without pushing
   it too far in. */
.image-credit--right {
  text-align: right;
  margin-left: auto;           /* push the constrained box to the right edge */
  margin-right: 0;
  padding-right: 26px;         /* half the nav/page-body gutter (52px) */
}

/* On the homepage, the composers section sits directly above the sponsors
   section. Cut the composer's bottom padding in half (50px vs the base
   100px) so the gap between the last composer card and the Supporters
   eyebrow reads as a single visual transition, not two separate sections. */
#composers {
  padding: 100px 52px 50px;      /* top: 100, bottom: 50 (was 100) */
}


/* ── 5. BUTTONS ── */
.btn {
  display: inline-block;
  font-family: var(--inter);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 28px;
  border: 0.5px solid var(--teal);
  color: var(--teal);
  background: transparent;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.btn:hover { background: var(--teal); color: var(--linen); }

.btn-filled {
  background: var(--teal);
  color: var(--linen);
  border-color: var(--teal);
}

.btn-filled:hover {
  background: var(--ink);
  border-color: var(--seafoam);
  color: var(--linen);
}


/* ── 6. HOMEPAGE — HERO ── */
.hero-fullbleed {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--nav-h));
  overflow: hidden;
}

.hero-fullbleed img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

.hero-fullbleed::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(42, 37, 32, 0.0)  0%,
    rgba(42, 37, 32, 0.05) 30%,
    rgba(42, 37, 32, 0.45) 65%,
    rgba(42, 37, 32, 0.78) 100%
  );
}

.hero-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 2;
  padding: 0 64px 72px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.hero-left {
  min-width: 0;                /* allow flex to shrink below content width so the
                                  word space between AEGIRA and DUO triggers a
                                  natural line break on small screens */
}

.hero-wordmark-large {
  font-family: 'TAN-MON CHERI', var(--cg);
  font-weight: 400;
  font-size: clamp(39px, 4.5vw, 63px);   /* 75% of original — matches pre-font-change size */
  color: var(--linen);
  line-height: 1.4;             /* double the vertical gap when DUO wraps below AEGIRA */
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

/* -100 spacing between A and E (tight, per Andrea's design) */
.hero-a {
  letter-spacing: -0.1em;
  margin-right: -0.1em;
}

/* +175 spacing between G-I-R-A */
.hero-gira {
  letter-spacing: 0.175em;
}

/* +125 spacing between D-U-O */
.hero-duo {
  letter-spacing: 0.125em;
}

/* AEGIRA stays together on one line; DUO wraps below naturally.
   The space between the wrapper and DUO is a regular word space,
   so the browser breaks there when the viewport is too narrow. */
.hero-aegira {
  white-space: nowrap;
}

.hero-wordmark-large .teal { color: var(--seafoam); }

.hero-right { text-align: right; padding-bottom: 4px; }

.hero-project-label {
  font-family: var(--inter);
  font-weight: 300;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--seafoam);
  margin-bottom: 12px;
}

.hero-project-title {
  font-family: var(--cg);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 2.5vw, 30px);
  color: var(--linen);
  line-height: 1.3;
  margin-bottom: 12px;
}

.hero-tour-cities {
  font-family: var(--inter);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: rgba(245, 240, 232, 0.6);
}

.hero-scroll-hint {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--inter);
  font-weight: 300;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.45);
  text-align: center;
}

.hero-scroll-hint::after {
  content: '';
  display: block;
  margin: 8px auto 0;
  width: 0.5px;
  height: 32px;
  background: rgba(245, 240, 232, 0.35);
}


/* ── 6b. HOMEPAGE — DUO INTRO (second hero, landscape bg) ── */
.duo-intro {
  /* Override the generic `section { padding: 100px 52px }` so the photo is
     flush with the hero above it — no horizontal padding, no top/bottom padding.
     Comes later in the cascade than the bare `section` selector. */
  padding: 0;
  position: relative;
  width: 100%;
  /* Source was cropped to ~2.11:1 (2100×994, exact values).
     Top: 9% cut (just above violinist's head).
     Bottom: 80% cut (just below the Bösendorfer logo / fallboard area).
     Section aspect matches so no cropping at any viewport width.
     At 1920 wide → 909 tall. At 1440 wide → 681 tall. */
  aspect-ratio: 2100 / 994;
  overflow: hidden;
}

.duo-intro img {
  position: absolute;        /* take out of flow so width/height:100% always fills,
                                even when parent uses min-height instead of fixed height */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* No gradient overlay — the user removed the text and replaced it with a
   single "Shows" link, which is placed bottom-right. Keeping the image
   unobscured honors the request for clean, flush framing. */

.duo-intro-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;       /* anchor to top */
  justify-content: flex-end;     /* anchor to right */
  padding: 56px 64px 0 0;        /* top-right corner with breathing room */
  pointer-events: none;          /* let the parent <a> own clicks */
}

/* "SHOWS" wordmark — top-right quadrant of the cropped photo.
   Inter weight 150 (extra-light) for a delicate display wordmark.
   On 16" laptops: 140px (was 200, -30%). On phones: 80px floor
   (was 40, +100%). Single clamp, no per-viewport overrides. */
.duo-intro-shows-link {
  pointer-events: auto;
  font-family: var(--inter);
  font-weight: 150;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  /* Min 80px (phones get a readable wordmark, not a thin label).
     Max 140px (less dominant on big screens — was 200).
     Preferred 12vw scales smoothly across all viewports. */
  font-size: clamp(80px, 12vw, 140px);
  line-height: 1.0;
  color: var(--linen);
  text-decoration: none;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
  transition: opacity 0.2s, color 0.2s;
}

.duo-intro-shows-link:hover {
  color: var(--seafoam);
  opacity: 0.9;
}

@media (max-width: 768px) {
  .duo-intro-overlay { padding: 32px 24px 0 0; }
  /* On small viewports, KEEP the wide landscape framing — don't force a
     tall min-height (which was cropping the violinists face and arms off
     because object-fit:cover zoomed into the center).
     Use the source's 2.11:1 aspect so both performers stay in frame.
     Override only at smaller viewports so this doesn't affect tablet. */
  .duo-intro {
    aspect-ratio: 2100 / 994;
    min-height: 0;
    height: auto;
  }
  /* Pull the image slightly toward the upper-middle so both performers'
     faces sit in the top half of the frame (they're around y=300-1100
     in the source). Default center is fine but explicit avoids surprises. */
  .duo-intro img { object-position: center 38%; }
  /* At the 80px floor with 0.18em letter-spacing, 'SHOWS' is ~363px wide
     and overflows a 375px phone viewport. Tighten letter-spacing so it
     fits without dropping the size. */
  .duo-intro-shows-link {
    letter-spacing: 0.10em;
  }
}

@media (max-width: 480px) {
  /* Tighten a touch more on the smallest viewports. */
  .duo-intro-shows-link {
    letter-spacing: 0.08em;
  }
}


/* ── 7. HOMEPAGE — S&R PREVIEW ── */
#sr-preview {
  border-top: 0.5px solid rgba(44, 110, 106, 0.2);
  padding: 80px 52px;
  display: grid;
  grid-template-columns: 360px 1fr;   /* fixed-width image | text fills remaining */
  grid-template-rows: auto auto;      /* row 1: image+text, row 2: tour block */
  column-gap: 64px;
  row-gap: 56px;
  align-items: start;                 /* don't stretch — top-align image with eyebrow */
}

.sr-image-col {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;        /* let the credit + image span full column width */
}

.sr-image-wrap {
  width: 360px;
  height: 360px;                     /* explicit height ensures square */
  aspect-ratio: 1 / 1;               /* always 1:1 square */
  overflow: hidden;
  background: rgba(44, 110, 106, 0.04);
}

.sr-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
  display: block;
}

.sr-text-col {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.sr-block {
  grid-column: 1 / -1;               /* span both columns on its own row */
  grid-row: 2;
  background: var(--seafoam);
  padding: 48px 52px;
  max-width: 100%;
}

.sr-preview-inner { max-width: 680px; }

.sr-preview-inner p {
  font-family: var(--inter);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink);
  margin-bottom: 20px;
}

.learn-more-link {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--inter);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal);
  text-decoration: none;
  border-bottom: 0.5px solid var(--teal);
  padding-bottom: 3px;
  transition: opacity 0.2s;
}

.learn-more-link:hover { opacity: 0.6; }

.sr-block-title {
  font-family: var(--cg);
  font-weight: 300;
  font-size: 32px;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 6px;
}

.sr-block-title em {
  font-style: italic;
}

.sr-block-subtitle {
  font-family: var(--inter);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 32px;
}

.tour-dates {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.tour-date { border-left: 0.5px solid var(--teal); padding-left: 20px; }

.date-city {
  font-family: var(--inter);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 4px;
}

.date-venue {
  font-family: var(--cg);
  font-weight: 300;
  font-size: 18px;
  color: var(--ink);
  margin-bottom: 2px;
}

.date-when {
  font-family: var(--inter);
  font-weight: 300;
  font-size: 11px;
  color: var(--drift);
}

/* S&R Preview — responsive: image always 1:1 square; stacks on small devices */
@media (max-width: 1100px) {
  #sr-preview { column-gap: 48px; }
}

@media (max-width: 900px) {
  #sr-preview { column-gap: 40px; }
  .sr-image-wrap { width: 360px; height: 360px; }
}

@media (max-width: 768px) {
  #sr-preview {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 56px 32px;
    align-items: stretch;     /* override desktop align-items: start so flex items fill width */
    grid-template-columns: 1fr;
  }
  .sr-image-col {
    order: 1;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
  }
  .sr-image-wrap {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .sr-text-col {
    order: 2;
    align-self: stretch;
  }
  .sr-block {
    order: 3;
    padding: 36px 32px;
    grid-column: auto;  /* reset desktop grid placement */
  }
  .sr-preview-inner { max-width: none; }
}

@media (max-width: 480px) {
  #sr-preview { padding: 48px 24px; gap: 32px; }
  .sr-block { padding: 32px 24px; }
}


/* ── 8. HOMEPAGE — COMPOSER GRID ── */
#composers { border-top: 0.5px solid rgba(44, 110, 106, 0.2); }

.composers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  width: 100%;
  max-width: 100%;
}

@media (max-width: 768px) {
  .composers-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .composers-grid { grid-template-columns: 1fr; }
}

/* Thumbnail card: square photo + name below, clickable to composers page */
.composer-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-right: 0.5px solid rgba(44, 110, 106, 0.18);
  border-bottom: 0.5px solid rgba(44, 110, 106, 0.18);
  padding: 0;
  transition: opacity 0.2s;
}

.composer-card:hover { opacity: 0.85; }

/* Remove right border on the last column of each row */
.composers-grid .composer-card:nth-child(3n) { border-right: none; }

/* 7-composer grid: center the 7th card (Aegira Duo) in the middle column */
.composers-grid .composer-card:nth-child(7) {
  grid-column: 2 / 3;
}

@media (max-width: 768px) {
  .composers-grid .composer-card:nth-child(3n) { border-right: 0.5px solid rgba(44, 110, 106, 0.18); }
  .composers-grid .composer-card:nth-child(2n) { border-right: none; }
  /* On 2-column, 7th card spans both columns */
  .composers-grid .composer-card:nth-child(7) { grid-column: 1 / -1; max-width: 50%; margin: 0 auto; }
}

@media (max-width: 480px) {
  .composers-grid .composer-card:nth-child(2n) { border-right: 0.5px solid rgba(44, 110, 106, 0.18); }
  .composers-grid .composer-card:nth-child(n) { border-right: none; }
}

.composer-img-wrap {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.composer-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: grayscale(15%);
  transition: filter 0.3s, transform 0.4s;
}

.composer-card:hover .composer-img {
  filter: grayscale(0%);
  transform: scale(1.03);
}

.composer-info {
  padding: 18px 16px 24px;
  text-align: center;
}

.composer-origin {
  font-family: var(--inter);
  font-weight: 300;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--drift);
  margin-bottom: 6px;
}

.composer-name {
  font-family: var(--cg);
  font-weight: 400;
  font-size: 20px;
  color: var(--ink);
  margin-bottom: 4px;
  line-height: 1.2;
}

/* Hide the bio paragraph on the homepage grid (it shows on composers.html) */
.composer-card .composer-bio { display: none; }

/* Bio shown on composers.html */
.composer-bio {
  font-family: var(--inter);
  font-weight: 300;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.75;
}


/* ── 8b. COMPOSERS PAGE — VERTICAL LIST ── */
.composer-list {
  max-width: 980px;
  margin: 0 auto;
}

.composer-entry {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 56px;
  padding: 56px 0;
  border-bottom: 0.5px solid rgba(44, 110, 106, 0.18);
  scroll-margin-top: calc(var(--nav-h) + 24px);
}

.composer-entry:last-child { border-bottom: none; }

.composer-entry .composer-img-wrap {
  aspect-ratio: 4 / 5;
}

.composer-entry .composer-img {
  filter: grayscale(0%);
}

.composer-entry .composer-info {
  padding: 0;
  text-align: left;
}

.composer-entry .composer-origin {
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--teal);
  margin-bottom: 10px;
}

.composer-entry .composer-name {
  font-size: 36px;
  font-weight: 300;
  margin-bottom: 18px;
  color: var(--ink);
}

@media (max-width: 768px) {
  .composer-entry {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 40px 0;
  }
  .composer-entry .composer-img-wrap {
    /* Stacked mobile: each headshot gets a uniform 4:5 portrait at
       exactly the same width across all six entries. */
    width: 100%;
    max-width: 480px;          /* caps image on tablets */
    aspect-ratio: 4 / 5;        /* 4:5 portrait — same as desktop */
    margin-left: auto;          /* center when narrower than column */
    margin-right: auto;
  }
  .composer-entry .composer-img {
    width: 100%;
    height: 100%;
  }
  .composer-entry .composer-name { font-size: 28px; }
}

/* On phones (≤480px): image fills the full content width. The 4:5
   aspect-ratio keeps all six headshots at exactly the same dimensions
   (same width × 1.25 height) on every phone viewport, so they read
   as a visually uniform series. */
@media (max-width: 480px) {
  .composer-entry .composer-img-wrap {
    max-width: 100%;
  }
}


/* ── 9. ABOUT PAGE ── */
.about-grid {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 80px;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}

/* Sticky image — keeps the duo photo pinned beside the bio while the
   reader scrolls through it. NOTE: this base rule is declared BEFORE the
   mobile media queries below so that the breakpoints can correctly
   override `position: sticky` → `position: relative` on small screens.
   If you move this block, also update the mobile overrides. */
.about-img-wrap {
  position: sticky;
  top: calc(var(--nav-h) + 32px);
  /* Height adapts to the photo so nothing is cropped */
  align-self: start;
}

.about-img-wrap img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center center;
  display: block;
}

/* Tablet portrait (≤900px, ≥601px): photo centered above text, logo
   centered below the photo. No more float — the photo sits on its own
   row, centered, with the bio text flowing below it. */
@media (max-width: 900px) and (min-width: 601px) {
  .about-grid {
    display: block;             /* undo the two-column grid */
    max-width: 680px;           /* comfortable prose width for wrapping text */
  }
  .about-img-wrap {
    float: none;
    width: 320px;
    margin: 0 auto 24px;        /* centered, with bottom breathing room */
    position: static;           /* no sticky at this size */
  }
  .about-img-wrap img {
    width: 100%;
    height: auto;
    display: block;
  }
  .about-text {
    max-width: none;            /* let text fill the full width */
  }
  /* .duo-mark inherits text-align: center from base rule */
}

/* Phone (≤600px): stack image above text. Photo stays within page-body
   padding (not full-bleed). Logo centered below the photo. */
@media (max-width: 600px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .about-img-wrap { order: 0; position: relative; top: auto; max-width: 280px; margin: 0 auto; }
  .about-img-wrap img { width: 100%; height: auto; }
  .about-text     { order: 1; }
  /* Reduce page-body padding so content reaches the viewport sooner.
     96px top is too much on a phone — the bio would feel buried. */
  .page-body      { padding: 56px 24px 80px; }
  /* Center the logo below the photo */
  .duo-mark       { padding: 32px 0 24px; }
}

/* Very narrow phones (≤360px): trim side padding a bit more */
@media (max-width: 360px) {
  .page-body { padding: 48px 16px 72px; }
  .about-img-wrap { max-width: 240px; }
}

.about-text {
  /* Cap prose line length at ~65 characters (Bringhurst, "The Elements of
     Typographic Style") so paragraphs stay readable on wider phones and
     small tablets — without affecting desktop, where the grid column
     already constrains the text width. */
  max-width: 65ch;
}

.about-text p {
  font-family: var(--inter);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink);
  margin-bottom: 22px;
}

.about-text p:last-child { margin-bottom: 0; }

/* Duo wordmark, used as the heading at the top of the bio column
   (left-aligned in the right column of the about-grid) */
.duo-mark {
  font-family: var(--cg);
  font-weight: 300;
  font-size: clamp(45px, 5.625vw, 70px);  /* 25% larger */
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-align: center;
  padding: 40px 0 32px;     /* halved from 80px top; still leaves breathing room */
  margin: 0;
}

/* The teal letters inside the wordmark use seafoam + slight bolder stroke */
.duo-mark-img {
  display: inline-block;
  max-width: 380px;          /* cap at ~60% of text column width on desktop */
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.duo-mark .teal {
  color: var(--teal);
  -webkit-text-stroke: 0.4px currentColor;
}

/* Bold individual names in the duo bio paragraph */
.about-text .person-name {
  font-weight: 600;
  color: var(--ink);
}


/* ── 12. PRESS PAGE ── */
.press-body {
  padding: 50px 52px 100px;
  max-width: 860px;
  margin: 0 auto;
}

.press-body h1 {
  font-family: var(--cg);
  font-weight: 300;
  font-size: 38px;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0 0 56px;
  padding-bottom: 16px;
  border-bottom: 0.5px solid rgba(44, 110, 106, 0.35);
}

/* Each quote block: a glyph on the left, a text container on the
   right (performer name + quote + attribution, stacked vertically,
   all left-aligned). The whole section is centered on the page
   because .press-body has margin: 0 auto. */

.press-section {
  display: flex;
  align-items: flex-start;
  gap: 5em;
  max-width: 720px;
  margin: 0 auto 64px;
}

.press-section::before {
  content: "\201C";
  flex: 0 0 auto;
  padding: 0 0.4em;
  font-family: var(--cg);
  font-style: italic;
  font-weight: 300;
  font-size: 80px;
  line-height: 1;
  color: var(--teal);
}

.press-text {
  flex: 1 1 auto;
  min-width: 0;
}

.press-performer {
  font-family: var(--cg);
  font-weight: 600;
  font-style: normal;
  font-size: 22px;
  color: var(--ink);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 0.5px solid rgba(44, 110, 106, 0.2);
}

.press-quote {
  font-family: var(--inter);
  font-weight: 300;
  font-style: italic;
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink);
  margin: 0 0 10px;
}

.press-attribution {
  font-family: var(--inter);
  font-weight: 300;
  font-size: 11px;
  color: #555555;
  margin: 0;
}

@media (max-width: 768px) {
  .press-body { padding: 45px 24px 80px; }
  .press-section { gap: 3em; margin-bottom: 48px; }
  .press-section::before { font-size: 56px; padding: 0 0.3em; }
  .press-performer { font-size: 19px; margin-bottom: 12px; }
  .press-quote { font-size: 14px; }
}

/* ── 10. SYNESTHESIA & RITUAL PAGE ── */
.sr-page-body { padding: 96px 52px 100px; max-width: 860px; }

.sr-full-text p {
  font-family: var(--inter);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink);
  margin-bottom: 22px;
}

.sr-subhead {
  font-family: var(--cg);
  font-weight: 400;
  font-style: italic;
  font-size: 30px;          /* was 22 — bigger, more presence */
  line-height: 1.2;
  color: var(--teal);       /* was ink — color signal helps scanning */
  margin: 56px 0 24px;
  letter-spacing: -0.005em;
}

/* Composer / duo names highlighted in body-weight bold ink within text */
.sr-name {
  font-weight: 600;
  color: var(--ink);
}

a.sr-name {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}

a.sr-name:hover {
  border-bottom-color: var(--ink);
  color: var(--ink);
}

.sr-page-block {
  background: var(--seafoam);
  padding: 52px;
  margin: 56px 0;
  max-width: 820px;
}

.sr-page-block .sr-block-title {
  font-size: 20px;     /* smaller for sr.html — this is a label, not the main title */
  margin-bottom: 28px;
}
.sr-page-block .tour-dates { margin-bottom: 36px; }

.composers-cta {
  margin-top: 32px;
  padding-top: 0;
  text-align: center;
  border-top: none;
}

.composers-cta .btn {
  font-size: 13px;             /* +30% from default 10px */
  padding: 16px 36px;          /* +30% from default 12x28 */
}


/* ── 11. SHOWS PAGE ── */
/* Top padding reduced from 96 → 67 (-30%) per Andrea's request.
   This tightens the gap between the banner image and the
   'Upcoming Performances' eyebrow text below it. */
.shows-body { padding: 67px 52px 100px; max-width: 1200px; }

/* On the Shows page only, the "Shows" h2.section-title is doubled in size
   (clamp 64-96px) per Andrea's request. The base `.section-title` rule
   (clamp 32-48px) still applies on every other page. */
.shows-body h2.section-title {
  font-size: clamp(64px, 6vw, 96px);
  margin-bottom: 40px;
}

.shows-banner {
  width: 100%;
  overflow: hidden;
  background: rgba(44, 110, 106, 0.06);
}

.shows-banner img {
  width: 100%;
  height: auto;
  display: block;
  /* Source cropped to ~1.96:1 (3525×1800) — renders at natural aspect.
     No max-height: keeps the user's specified bow/knee crop bounds intact. */
}

.shows-list { margin-top: 8px; }

/* Default layout: generous spacing on desktop/tablet.
   On screens ≥ 1024px (the "responsive wider" rule below) we expand
   the date column, the gaps, and the body max-width further. */
/* Show-item: fills the parent .shows-body container (max-width 1200px).
   No max-width cap here — concert info needs room to breathe across the
   full content width. The 150px gap gives the date block clear separation
   from the info column without compressing the info text. */
.show-item {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  gap: 150px;             /* generous breathing room between date and info */
  align-items: center;
  padding: 44px 0;
  border-bottom: 0.5px solid rgba(44, 110, 106, 0.18);
}

.show-item:last-child { border-bottom: none; }

/* Date block — CSS grid (AUG | 14 stacked, 2026 below 14).
   2×2 grid gives explicit placement: AUG top-left, 14 top-right,
   year bottom-right (under the day, not under AUG).
   column-gap is 0 on desktop — AUG and "14" sit flush against each other
   so the date reads as one unit, not two separate elements.
   On ≤768px the stacked layout uses the existing flex-column rules. */
.show-date-block {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  align-items: baseline;
  column-gap: 0;          /* AUG and "14" touch — reads as a single date unit */
  row-gap: 2px;
  text-align: right;      /* right-align within the date column */
}

.show-date-month {
  grid-column: 1;         /* top-left of the 2×2 date grid */
  grid-row: 1;
  font-family: var(--inter);
  font-weight: 300;
  font-size: 22px;             /* teal abbreviated month — large on desktop */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal);
  line-height: 1;
}

.show-date-month .show-date-month-text { display: inline-block; }

.show-date-day {
  grid-column: 2;         /* top-right of the 2×2 date grid (right of AUG) */
  grid-row: 1;
  font-family: var(--cg);
  font-weight: 300;
  font-size: 52px;
  color: var(--ink);
  line-height: 1.0;
  margin-bottom: 2px;
}

.show-date-year {
  grid-column: 2;         /* bottom-right of the 2×2 date grid (under "14") */
  grid-row: 2;
  justify-self: end;      /* right-edge within the cell */
  font-family: var(--inter);
  font-weight: 300;
  font-size: 11px;
  color: var(--drift);
}

.show-program {
  font-family: var(--inter);
  font-weight: 300;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 8px;
}

.show-title {
  font-family: var(--cg);
  font-style: italic;
  font-weight: 700;             /* bold (was 300 light) per Andrea's request */
  font-size: 24px;
  color: var(--ink);
  margin-bottom: 10px;
}

.show-venue {
  font-family: var(--inter);
  font-weight: 300;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 4px;
}

.show-city {
  font-family: var(--inter);
  font-weight: 300;
  font-size: 12px;
  color: var(--drift);
}


/* ── 11a. SHOWS PAGE — MOBILE LAYOUT (≤ 768px) ── */

/* Banner image is now wider (aspect ~2.91:1 after re-crop). On mobile we
   keep it full-bleed but cap height so it doesn't dominate the page. */
@media (max-width: 768px) {
  .shows-body { padding: 48px 28px 64px; }
  .shows-body h2.section-title { font-size: clamp(48px, 12vw, 64px); }
  .shows-banner img { max-height: 50vh; object-fit: cover; }

  /* Show-item: research (Songkick/Carnegie Hall pattern) says stack the
     button BELOW the text on mobile, give more breathing room, and don't
     keep the giant 52px day number on cramped viewports. */
  .show-item {
    grid-template-columns: 88px 1fr;   /* tighter date column */
    column-gap: 24px;
    row-gap: 16px;
    padding: 36px 0;
  }
  /* Button moves to a new row, full width, right-aligned but compact */
  .show-item > div:last-child {
    grid-column: 2 / 3;
    display: flex;
    justify-content: flex-start;
  }
  .show-item > div:last-child .btn {
    padding: 12px 24px;
    font-size: 12px;
  }

  .show-date-block {
    display: flex;            /* mobile: stack vertically (previous working version) */
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .show-date-month {
    grid-column: auto;        /* reset desktop grid placement */
    grid-row: auto;
    font-size: 16px;            /* teal abbreviated month — large on mobile */
    letter-spacing: 0.08em;
  }
  .show-date-day {
    grid-column: auto;        /* reset desktop grid placement */
    grid-row: auto;
    font-size: 36px;       /* down from 52px on desktop */
  }
  .show-date-year {
    grid-column: auto;        /* reset desktop grid placement */
    grid-row: auto;
    font-size: 10px;
  }

  .show-program { font-size: 10px; letter-spacing: 0.18em; }
  .show-title { font-size: 20px; line-height: 1.2; margin-bottom: 8px; }
  .show-venue { font-size: 14px; margin-bottom: 6px; }
  .show-city { font-size: 12px; }
}

@media (max-width: 480px) {
  /* On the smallest phones, push the date block to its own row so text
     has the full width and is easier to read (Bandsintown pattern). */
  .show-item {
    grid-template-columns: 1fr;
    row-gap: 20px;
    padding: 40px 0;
  }
  /* Button spans its own row, full width, with safe tap target */
  .show-item > div:last-child {
    grid-column: 1 / -1;
  }
  .show-item > div:last-child .btn {
    width: 100%;
    text-align: center;
  }
}

/* ── 11b. SHOWS PAGE — DESKTOP BUTTON UNIFORM SIZE ── */
@media (min-width: 769px) {
  /* All three show-item buttons (More Info / Tickets) must be IDENTICAL size.
     Pin the column width (in .show-item grid-template-columns) AND set
     min-width: 100% on the .btn so even short labels render at the same width.
     Text is centered so all three buttons read as visually uniform. */
  .show-item > div:last-child .btn {
    font-size: 13px;
    padding: 16px 36px;
    min-width: 100%;       /* fill the button column — uniform width */
    text-align: center;
    box-sizing: border-box;
  }
}

/* ── 11b2. SHOWS PAGE — MEDIUM SCREENS (769–1023px) ── */
/* Medium viewports (tablets, small laptops) don't have room for the
   full 200px button + 150px gaps that ≥1024px uses. Tighten here so
   the layout still spans the available width without horizontal overflow.
   Same architecture as ≥1024px: pinned columns + min-width:100% buttons. */
@media (min-width: 769px) and (max-width: 1023px) {
  .show-item {
    grid-template-columns: 180px 1fr 160px;
    gap: 80px;             /* 150 → 80 on medium so info column still fits */
  }
}

/* ── 11c. SHOWS PAGE — WIDE DESKTOP (≥ 1024px) ── */
@media (min-width: 1024px) {
  /* On large monitors the show-item fills the .shows-body width (1200px).
     Date column slightly wider for visual breathing room; button column
     pinned at 200px so all three show buttons line up identically. */
  .show-item {
    grid-template-columns: 220px 1fr 200px;
    gap: 150px;
  }
}

/* ── 12. CONTACT PAGE ── */
/* Single-column intro (eyebrow + title + rule) followed by a 2-column
   grid: portrait on the left, contact blocks on the right. On small
   screens the image stacks above the text and goes full-width. */
.contact-page {
  max-width: 1200px;
}

.contact-title {
  font-family: var(--cg);
  font-weight: 300;
  font-size: 64px;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 24px 0;
}

.contact-page .section-rule {
  margin-bottom: 64px;
}

.contact-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 80px;
  align-items: start;
}

.contact-img-wrap {
  width: 100%;
  max-width: 380px;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--linen);
}

.contact-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.contact-text {
  font-family: var(--cg);
  font-weight: 300;
  font-size: 19px;
  line-height: 1.65;
  color: #444;
}

.contact-intro {
  font-size: 22px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 48px 0;
  font-style: italic;
}

.contact-block {
  padding: 28px 0;
  border-top: 0.5px solid rgba(44, 110, 106, 0.18);
}

.contact-block-label {
  font-family: var(--inter);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 14px;
}

.contact-email {
  font-family: var(--cg);
  font-weight: 400;
  font-size: 28px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--teal);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
  display: inline-block;
  margin-bottom: 8px;
  word-break: break-all;
}

.contact-email:hover {
  color: var(--teal);
  border-color: var(--ink);
}

/* Smaller variant for secondary emails (e.g. Solis Consulting) */
.contact-email--small {
  font-size: 20px;
}

.contact-block-text {
  font-size: 17px;
  line-height: 1.6;
  color: #555;
  margin: 0 0 10px 0;
}

.contact-block-note {
  font-family: var(--inter);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.6;
  color: var(--drift);
  margin: 8px 0 0 0;
  letter-spacing: 0.02em;
}

.contact-link {
  font-family: var(--inter);
  font-weight: 400;
  font-size: 14px;
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color 0.2s;
  display: inline-block;
  margin-top: 4px;
}

.contact-link:hover {
  border-color: var(--teal);
}

.contact-block--social {
  border-bottom: 0.5px solid rgba(44, 110, 106, 0.18);
}

.contact-social-row {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
}

.contact-social-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--inter);
  font-weight: 400;
  font-size: 14px;
  color: var(--teal);
  text-decoration: none;
  transition: opacity 0.2s;
}

.contact-social-link:hover { opacity: 0.7; }

.contact-social-link svg { display: block; }

/* Tablet (≤900px): keep 2-col but tighten gaps */
@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 280px 1fr;
    gap: 48px;
  }
  .contact-img-wrap { max-width: 280px; }
  .contact-title { font-size: 52px; }
  .contact-intro { font-size: 20px; }
  .contact-email { font-size: 24px; }
}

/* Phone (≤600px): stack image above text, full width */
@media (max-width: 600px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .contact-img-wrap {
    max-width: 100%;
    margin: 0 auto;
  }
  .contact-title { font-size: 42px; }
  .contact-page .section-rule { margin-bottom: 40px; }
  .contact-intro { font-size: 18px; margin-bottom: 32px; }
  .contact-email { font-size: 22px; }
  .contact-social-row { gap: 16px; }
  .contact-social-link { font-size: 13px; }
}