/* ============================================================
   AQUILA MUSIC - "Gallery Mono" (redesign v3, 2026-06-21)
   Monochrome / neutral editorial system. The ONLY colour on the
   page comes from the photography. Warm-paper light canvas in
   counterpoint with near-black ink blocks.
   v3 type system (per Rachael's review):
     - MORIES (self-hosted) - the title / wordmark face. A high-
       contrast art-deco display caps face. Used for AQUILA and the
       big display headings only.
     - INTER - all running body copy + secondary headings + quotes
       (modern, clean, not cursive - replaces Cormorant Garamond).
     - SPACE GROTESK - technical labels, eyebrows and numerals.
   Emphasis is carried by scale, weight, negative space, hairlines
   and ink/paper inversion - no coloured accent of any kind.
   ============================================================ */

/* ---- Self-hosted display face: Mories (Malik Wisnu / MLKWSN) --- */
@font-face {
  font-family: 'Mories Display';
  src: url('../assets/fonts/Mories-Display.woff2') format('woff2'),
       url('../assets/fonts/Mories-Display.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Mories';
  src: url('../assets/fonts/Mories.woff2') format('woff2'),
       url('../assets/fonts/Mories.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --paper:    #f3efe6;   /* warm off-white canvas */
  --paper-2:  #ece7da;   /* raised paper surface */
  --paper-3:  #e3ddcd;   /* deeper paper / hover */
  --ink:      #15140f;   /* warm near-black */
  --ink-2:    #0b0b08;   /* deepest ink */
  --ink-soft: #2a2822;

  --line:     rgba(21,20,15,0.16);   /* hairline on paper */
  --line-2:   rgba(21,20,15,0.30);
  --muted:    #5b574d;               /* secondary on paper */
  --muted-2:  #837e72;

  /* inverted equivalents (used inside .ink contexts) */
  --line-inv:  rgba(243,239,230,0.16);
  --line-inv2: rgba(243,239,230,0.34);
  --muted-inv: #a39e91;
  --muted-inv2:#7d7869;

  --maxw:   1240px;
  --gutter: 40px;
  --ease:   cubic-bezier(.16,.84,.34,1);
  /* v4: Mories = AQUILA wordmark ONLY; modern Grotesk for headings; Inter = body */
  --wordmark: 'Mories Display', 'Mories', 'Cormorant Garamond', Georgia, serif;
  --display: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:   'Space Grotesk', 'Inter', sans-serif;
  --sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.62;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--ink); color: var(--paper); }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* ---- Section shell + ink/paper inversion ----------------- */
section { position: relative; }
.sheet {
  --bg: var(--paper); --fg: var(--ink); --soft: var(--muted);
  --soft2: var(--muted-2); --hair: var(--line); --hair2: var(--line-2);
  background: var(--bg); color: var(--fg);
  padding: clamp(38px, 5vw, 72px) 0;
}
.sheet.ink {
  --bg: var(--ink); --fg: var(--paper); --soft: var(--muted-inv);
  --soft2: var(--muted-inv2); --hair: var(--line-inv); --hair2: var(--line-inv2);
}
.sheet.ink.deep { --bg: var(--ink-2); }
.sheet.tight { padding: clamp(40px, 5vw, 64px) 0; }
.sheet.flush-top { padding-top: 0; }

/* ============================================================
   Typography
   ============================================================ */
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.04; letter-spacing: .005em; }
.display {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.9rem, 10.5vw, 9.4rem); line-height: .98; letter-spacing: .01em;
}
.display em { font-style: normal; font-weight: 400; opacity: .62; }

/* technical label / eyebrow */
.tag {
  font-family: var(--mono);
  font-size: .72rem; font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--soft, var(--muted));
  display: inline-flex; align-items: center; gap: .85em;
}
.tag::before {
  content: ''; width: 26px; height: 1px;
  background: currentColor; opacity: .55; display: inline-block;
}
.tag.nodash::before { display: none; }

.idx { font-family: var(--mono); font-weight: 500; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.lead { font-size: clamp(1.1rem, 1.7vw, 1.35rem); color: var(--soft, var(--muted)); font-weight: 300; line-height: 1.55; }

/* ---- Buttons --------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .85em;
  font-family: var(--mono);
  font-size: .74rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  padding: 17px 30px;
  border: 1px solid var(--fg, var(--ink));
  color: var(--fg, var(--ink));
  background: transparent;
  cursor: pointer; border-radius: 0;
  transition: background .45s var(--ease), color .45s var(--ease), transform .3s var(--ease);
}
.btn .arw { transition: transform .4s var(--ease); }
.btn:hover { background: var(--fg, var(--ink)); color: var(--bg, var(--paper)); }
.btn:hover .arw { transform: translateX(5px); }
.btn-solid { background: var(--fg, var(--ink)); color: var(--bg, var(--paper)); }
.btn-solid:hover { background: transparent; color: var(--fg, var(--ink)); }

/* text link with sliding underline */
.tlink {
  font-family: var(--mono); font-size: .74rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .6em;
  position: relative; color: var(--fg, var(--ink));
}
.tlink::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.tlink:hover::after { transform: scaleX(1); }
.tlink .arw { transition: transform .4s var(--ease); }
.tlink:hover .arw { transform: translateX(4px); }

/* ============================================================
   Masthead / navigation  (ink-on-paper, editorial)
   ============================================================ */
.masthead {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 26px 0; mix-blend-mode: normal;
  transition: padding .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.masthead.condensed {
  padding: 13px 0; background: rgba(243,239,230,0.88);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.mast-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand {
  font-family: var(--wordmark); font-weight: 400;
  font-size: clamp(1.95rem, 4.4vw, 2.45rem); letter-spacing: .34em; padding-left: .34em;
  color: var(--ink); line-height: 1;
}
.nav { display: flex; align-items: center; gap: 34px; list-style: none; }
.nav a {
  font-family: var(--mono); font-size: .73rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  position: relative; padding: 6px 0; transition: color .3s var(--ease);
}
.nav a .n { font-size: .58rem; color: var(--muted-2); margin-right: .5em; vertical-align: .25em; }
.nav a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--ink); transition: width .4s var(--ease); }
.nav a:hover, .nav a.active { color: var(--ink); }
.nav a:hover::after, .nav a.active::after { width: 100%; }
.mast-cta { margin-left: 6px; padding: 12px 22px; }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; width: 40px; height: 40px; position: relative; z-index: 120; }
.nav-toggle span { position: absolute; left: 8px; right: 8px; height: 1.6px; background: var(--ink); transition: transform .4s var(--ease), opacity .25s var(--ease); }
.nav-toggle span:nth-child(1) { top: 14px; }
.nav-toggle span:nth-child(2) { top: 20px; }
.nav-toggle span:nth-child(3) { top: 26px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Photo-led pages: the masthead sits over a dark image at the top, so the
   wordmark, nav links and menu (hamburger) flip to light to stay clearly
   visible. Once the header condenses on scroll it gets a light background,
   so the default ink styling takes back over. A soft top scrim guarantees
   contrast even over a bright patch of the photo. */
body.lede-photo .masthead:not(.condensed)::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(11,11,8,.42), rgba(11,11,8,0));
}
body.lede-photo .masthead:not(.condensed) .brand { color: var(--paper); }
body.lede-photo .masthead:not(.condensed) .nav-toggle span { background: var(--paper); }
/* Desktop only: the horizontal nav row + Enquire button sit over the photo.
   (On mobile the nav is a full-screen light overlay, so its links stay ink.) */
@media (min-width: 721px) {
  body.lede-photo .masthead:not(.condensed) .nav a { color: rgba(243,239,230,.82); }
  body.lede-photo .masthead:not(.condensed) .nav a:hover,
  body.lede-photo .masthead:not(.condensed) .nav a.active { color: var(--paper); }
  body.lede-photo .masthead:not(.condensed) .nav a::after { background: var(--paper); }
  body.lede-photo .masthead:not(.condensed) .mast-cta { color: var(--paper); border-color: var(--paper); }
}

/* ============================================================
   Home hero - typographic, asymmetric, photo to the side
   ============================================================ */
.hero { background: var(--paper); padding: clamp(128px, 17vw, 210px) 0 clamp(40px, 6vw, 80px); }
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.hero-copy { position: relative; z-index: 2; min-width: 0; }
.hero-media { min-width: 0; }
/* type-led hero (layout A): single column, type runs full width */
.hero.type-led .hero-grid { grid-template-columns: 1fr; }
.hero.type-led .display { font-size: clamp(2.7rem, 8.5vw, 7.6rem); }
.hero-copy .display { margin: 22px 0 30px; }
.hero-copy .display .ln { display: block; overflow: hidden; }
.hero-copy .display .ln > span { display: block; transform: translateY(105%); transition: transform 1s var(--ease); }
.hero-copy .display.in .ln > span { transform: translateY(0); }
.hero-quote {
  font-family: var(--sans); font-style: normal; font-weight: 300;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem); color: var(--ink-soft);
  max-width: 32ch; line-height: 1.5; margin-bottom: 34px;
  padding-left: 20px; border-left: 1px solid var(--line-2);
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-media { position: relative; align-self: stretch; min-height: 62vh; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media .cap { position: absolute; bottom: 16px; left: 16px; font-family: var(--mono); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--paper); mix-blend-mode: difference; }
.hero-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: clamp(40px, 6vw, 74px); padding-top: 22px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.hero-foot .meta { font-family: var(--mono); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

/* ============================================================
   Ticker / marquee  (artist names - the "reimagined" story)
   ============================================================ */
.ticker { background: var(--ink); color: var(--paper); overflow: hidden; padding: 26px 0; border-top: 1px solid var(--ink); }
.ticker-row { display: flex; width: max-content; animation: ticker 64s linear infinite; will-change: transform; }
.ticker:hover .ticker-row { animation-play-state: paused; }
.ticker-row span {
  font-family: var(--sans); font-style: normal; font-weight: 300;
  font-size: clamp(1.2rem, 2.4vw, 2.1rem); white-space: nowrap; padding: 0 .55em;
  letter-spacing: -.01em; color: var(--paper); opacity: .9;
}
.ticker-row span .dot { font-style: normal; opacity: .4; padding: 0 .15em; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-row { animation: none; } }

/* ============================================================
   Section heading block
   ============================================================ */
.head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 70px); }
.head.center { margin-left: auto; margin-right: auto; text-align: center; }
.head.center .tag { justify-content: center; }
.head h2 { font-size: clamp(2.1rem, 5vw, 3.9rem); margin: 20px 0 18px; }
.head p { color: var(--soft, var(--muted)); font-weight: 300; font-size: 1.08rem; max-width: 56ch; }
.head.center p { margin-left: auto; margin-right: auto; }

/* ============================================================
   Index list - numbered editorial entries (replaces pillars)
   ============================================================ */
.index { border-top: 1px solid var(--hair); }
.ix {
  display: grid; grid-template-columns: auto 1fr auto; gap: clamp(20px, 4vw, 64px);
  align-items: baseline; padding: clamp(30px, 4vw, 50px) 0;
  border-bottom: 1px solid var(--hair); transition: padding-left .5s var(--ease);
}
.ix:hover { padding-left: 14px; }
.ix .ix-n { font-family: var(--mono); font-size: .8rem; letter-spacing: .1em; color: var(--soft2, var(--muted-2)); padding-top: .6em; }
.ix .ix-h { font-family: var(--display); font-size: clamp(1.55rem, 3vw, 2.5rem); line-height: 1.05; letter-spacing: .01em; }
.ix .ix-b { max-width: 46ch; color: var(--soft, var(--muted)); font-weight: 300; font-size: 1rem; }
.ix .ix-b .tlink { margin-top: 16px; font-size: .7rem; }
@media (min-width: 921px) { .ix .ix-b { justify-self: end; } }

/* ============================================================
   Feature - editorial about with pull quote + offset image
   ============================================================ */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 92px); align-items: center; }
.feature.flip .feat-media { order: 2; }
.feat-media { position: relative; }
.feat-media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.feat-media .mark { position: absolute; top: -14px; left: -14px; right: 14px; bottom: 14px; border: 1px solid var(--hair2); z-index: -1; }
.feat-media .cap { font-family: var(--mono); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--soft2, var(--muted-2)); margin-top: 14px; }
.feat-body h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); margin: 18px 0 26px; }
.feat-body p { color: var(--soft, var(--muted)); font-weight: 300; margin-bottom: 18px; }
.feat-body p .em, .feat-body .accent { color: var(--fg, var(--ink)); font-weight: 400; font-style: normal; }
.feat-body p.drop::first-letter { font-family: var(--display); float: left; font-size: 3.6em; line-height: .74; padding: .06em .12em 0 0; font-weight: 400; }

/* ============================================================
   Statement - big italic pull-quote prose (ink block)
   ============================================================ */
.statement .pull {
  font-family: var(--sans); font-style: normal; font-weight: 300;
  font-size: clamp(1.5rem, 3.1vw, 2.6rem); line-height: 1.26; letter-spacing: -.015em;
  max-width: 22ch; margin-bottom: clamp(36px, 5vw, 64px);
}
.prose { columns: 2; column-gap: clamp(32px, 5vw, 70px); max-width: 1000px; }
.prose p { color: var(--soft, var(--muted)); font-weight: 300; margin-bottom: 20px; font-size: 1.02rem; break-inside: avoid; }
.prose p .em { color: var(--fg, var(--paper)); }
@media (max-width: 760px) { .prose { columns: 1; } }

/* chips (event types) */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.chip {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid var(--hair2); color: var(--soft, var(--muted)); padding: 9px 16px;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
a.chip:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* ============================================================
   Gallery strip - photography as hero (horizontal scroll)
   ============================================================ */
.gallery { background: var(--ink); padding: 0; }
.gallery-scroll { display: flex; gap: 2px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.gallery-scroll::-webkit-scrollbar { display: none; }
.gshot { position: relative; flex: 0 0 auto; width: clamp(280px, 42vw, 560px); height: clamp(340px, 56vh, 660px); scroll-snap-align: start; overflow: hidden; }
.gshot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease); }
.gshot:hover img { transform: scale(1.05); }
.gshot .cap { position: absolute; left: 16px; bottom: 16px; font-family: var(--mono); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: #fff; mix-blend-mode: difference; }

/* ---- Instagram band -------------------------------------- */
.insta { text-align: center; }
.insta-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.insta .ig-glyph { width: 40px; height: 40px; color: var(--paper); opacity: .9; }
.insta .tag { justify-content: center; }
.insta h2 { margin: 4px 0 2px; }
.insta p { max-width: 46ch; margin: 0 auto 8px; }
.insta .handle { font-family: var(--mono); letter-spacing: .04em; }
.insta .ig-handle { color: var(--paper); font-family: var(--mono); font-size: .8rem; letter-spacing: .04em; text-decoration: none; border-bottom: 1px solid rgba(243,239,230,.4); padding-bottom: 2px; }
.insta .ig-handle:hover { border-bottom-color: var(--paper); }
/* Live photo feed - a grid of recent shots that links straight to Instagram */
.ig-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  max-width: var(--maxw); margin: clamp(22px, 3vw, 34px) auto 0; padding: 0 var(--gutter);
  text-decoration: none;
}
.ig-tile { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 4px; }
.ig-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease), opacity .3s var(--ease); }
.ig-grid:hover .ig-tile img { opacity: .7; }
.ig-tile:hover img { transform: scale(1.05); opacity: 1; }
.ig-more {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  aspect-ratio: 1 / 1; border-radius: 4px; background: var(--ink-2, #1a1a1a);
  color: var(--paper); font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-align: center; padding: 8px;
  border: 1px solid rgba(243,239,230,.16); transition: background .3s var(--ease);
}
.ig-more:hover { background: rgba(243,239,230,.08); }
.ig-more .arw { font-size: 1.1rem; }
@media (max-width: 620px) {
  .ig-grid { grid-template-columns: repeat(2, 1fr); }
  .ig-more { display: none; }
}

/* ============================================================
   v3 - full-photo hero, showcase, image breaks, "read more"
   ============================================================ */
/* home hero photo shown in FULL (uncropped) - per Rachael's note */
.hero-media.full { align-self: center; min-height: 0; }
.hero-media.full img { width: 100%; height: auto; object-fit: contain; }
.hero-media.full .cap { mix-blend-mode: normal; color: var(--muted); left: 2px; bottom: -26px; }

/* a whole, uncropped band photo presented as a framed showcase */
.showcase { background: var(--ink); padding: clamp(46px, 6vw, 86px) 0; }
.showcase.paper { background: var(--paper); }
.showcase figure { margin: 0; }
.showcase img { width: auto; height: auto; max-width: 100%; max-height: 86vh; margin: 0 auto; display: block; }
.showcase .cap { display: block; text-align: center; margin-top: 18px; font-family: var(--mono); font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted-inv); }
.showcase.paper .cap { color: var(--muted); }

/* full-bleed image break between text sections (more imagery) */
.imgbreak { height: clamp(240px, 36vw, 480px); overflow: hidden; }
.imgbreak img { width: 100%; height: 100%; object-fit: cover; }

/* photo-led hero - text and band picture share one horizontal band.
   Mobile: single column, picture on top with its tall arched shape (kept as-is
   because it reads well on a phone). Desktop: two columns side-by-side so the
   copy and the picture fill the width together instead of leaving dead space. */
.hero-photo { position: relative; background: var(--ink); padding: clamp(92px, 13vw, 124px) 0 clamp(28px, 4vw, 52px); }
.hero-photo .hero-grid { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 30px); }
.hero-photo .hero-figure { order: -1; margin: 0; }
.hero-photo .hero-arch {
  display: block; margin: 0 auto;
  width: min(96vw, 720px); aspect-ratio: 1506 / 1600; max-height: 82vh;
  object-fit: cover; object-position: center;
  border-radius: clamp(80px, 15vw, 170px) clamp(80px, 15vw, 170px) 22px 22px;
}
.hero-photo .hero-copy { display: flex; flex-direction: column; align-items: flex-start; }
.hero-photo .hero-copy .tag, .hero-photo .hero-copy .meta { color: var(--paper); }
.hero-photo .display { color: var(--paper); margin: 10px 0 14px; font-size: clamp(1.9rem, 4.6vw, 3.9rem); }
.hero-photo .hp-sub { color: rgba(243,239,230,.82); font-weight: 300; max-width: 46ch; margin-bottom: 20px; }
/* Desktop: side-by-side. Copy on the left, picture on the right, both centred
   vertically so the row fills the width and the empty space disappears. */
@media (min-width: 861px) {
  /* The hero breaks out of the standard 1240px column so the photograph can
     carry the page. Copy left, picture right, picture taking the larger share. */
  .hero-photo .wrap { max-width: min(1560px, 94vw); }
  .hero-photo .hero-grid { display: grid; grid-template-columns: 0.72fr 1.28fr; align-items: center; gap: clamp(32px, 4vw, 64px); }
  .hero-photo .hero-figure { order: 0; }
  .hero-photo .hero-arch {
    width: 100%; max-width: none; margin: 0; max-height: 92vh;
    aspect-ratio: 1506 / 1600;
    border-radius: clamp(36px, 5vw, 64px) clamp(36px, 5vw, 64px) 18px 18px;
  }
  .hero-photo .display { font-size: clamp(2.6rem, 4.6vw, 4.2rem); }
}
.hero-photo .hero-cta .btn { border-color: var(--paper); color: var(--paper); }
.hero-photo .hero-cta .btn:hover { background: var(--paper); color: var(--ink); }
.hero-photo .hero-cta .btn-solid { background: var(--paper); color: var(--ink); }
.hero-photo .hero-cta .btn-solid:hover { background: transparent; color: var(--paper); }

/* "read the full story" collapsible - keeps all copy, hides the bulk */
.more { margin-top: 10px; }
.more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .6em; font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--fg, var(--ink)); padding: 8px 0; position: relative; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after { content: ''; position: absolute; left: 0; bottom: 2px; width: 100%; height: 1px; background: currentColor; opacity: .5; }
.more > summary .arw { transition: transform .3s var(--ease); }
.more[open] > summary .arw { transform: rotate(90deg); }
.more[open] > summary { margin-bottom: 20px; }
.more .more-body p { color: var(--soft, var(--muted)); font-weight: 300; margin-bottom: 16px; }
.more .more-body { columns: inherit; }

/* A/B layout switch chip (preview-only - compare the two homepages) */
.layout-switch { position: fixed; left: 22px; bottom: 24px; z-index: 95; display: inline-flex; align-items: center; gap: .7em; background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; padding: 11px 17px; box-shadow: 0 8px 26px rgba(0,0,0,.2); transition: transform .3s var(--ease), background .3s var(--ease); }
.layout-switch:hover { transform: translateY(-2px); background: var(--ink-2); }
.layout-switch .sw-now { color: var(--muted-inv); }
.layout-switch .arw { transition: transform .35s var(--ease); }
.layout-switch:hover .arw { transform: translateX(4px); }
@media (max-width: 720px) { .layout-switch { left: 14px; bottom: 16px; font-size: .58rem; padding: 9px 13px; } }

/* ============================================================
   Page header (interior pages) - editorial, paper
   ============================================================ */
.page-head { background: var(--paper); padding: clamp(150px, 19vw, 230px) 0 clamp(40px, 5vw, 70px); }
.page-head .meta-row { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 30px; flex-wrap: wrap; }
.page-head h1 { font-size: clamp(3rem, 9vw, 7rem); line-height: .92; letter-spacing: -.025em; }
.page-head .lead { max-width: 54ch; margin-top: 22px; }
.page-head .pg-idx { font-family: var(--mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

/* full-bleed media band under interior headers */
.media-band { height: clamp(320px, 48vw, 620px); overflow: hidden; }
.media-band img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   Services grid - editorial list cards
   ============================================================ */
.svc-grid { border-top: 1px solid var(--hair); }
.svc {
  display: grid; grid-template-columns: auto 1fr auto; gap: clamp(20px, 4vw, 60px);
  align-items: start; padding: clamp(30px, 4vw, 48px) 0; border-bottom: 1px solid var(--hair);
  transition: padding-left .5s var(--ease);
}
.svc:hover { padding-left: 14px; }
.svc .svc-n { font-family: var(--mono); font-size: .8rem; letter-spacing: .1em; color: var(--soft2, var(--muted-2)); padding-top: .5em; }
.svc h3 { font-family: var(--display); font-size: clamp(1.45rem, 2.9vw, 2.3rem); letter-spacing: .01em; }
.svc-text { max-width: 60ch; }
.svc-text p { color: var(--soft, var(--muted)); font-weight: 300; margin: 12px 0 0; font-size: 1rem; }
.svc .svc-act { white-space: nowrap; padding-top: .6em; }

/* ============================================================
   Watch / video
   ============================================================ */
.vfeature { margin-bottom: clamp(40px, 5vw, 64px); }
.vembed { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; overflow: hidden; border: 1px solid var(--hair); }
.vembed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vfeature h3 { font-family: var(--display); font-size: clamp(1.25rem, 2.3vw, 1.8rem); margin-top: 22px; letter-spacing: .01em; }
.vfeature .tag { margin-bottom: 4px; }
.vgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.video-note { margin-top: 38px; color: var(--soft, var(--muted)); font-weight: 300; }
.video-note a { border-bottom: 1px solid var(--line-2); }

/* ============================================================
   Testimonials
   ============================================================ */
.tbig { font-family: var(--sans); font-style: normal; font-weight: 300; font-size: clamp(1.7rem, 5vw, 3.6rem); line-height: 1.18; letter-spacing: -.02em; max-width: 24ch; }
.tbig .who { display: block; font-style: normal; font-family: var(--mono); font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--soft, var(--muted)); margin-top: 34px; }
.tcard { border: 1px solid var(--hair); padding: clamp(34px, 4vw, 52px); }
.tcard .q { font-family: var(--sans); font-weight: 300; font-size: 1.12rem; line-height: 1.62; font-style: normal; margin-bottom: 26px; }
.tcard .attrib { font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; color: var(--soft, var(--muted)); }
.tcard .attrib .name { display: block; letter-spacing: .18em; text-transform: uppercase; color: var(--fg, var(--ink)); margin-bottom: 5px; }
.t-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(30px, 4vw, 56px); align-items: center; }

/* ============================================================
   Repertoire (music)
   ============================================================ */
.rep-bar { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; border-top: 1px solid var(--hair); padding-top: 26px; }
.rep-search { flex: 1; min-width: 240px; background: transparent; border: 0; border-bottom: 1px solid var(--line-2); color: var(--ink); padding: 12px 2px; font-family: var(--sans); font-weight: 300; font-size: 1.3rem; }
.rep-search::placeholder { color: var(--muted-2); }
.rep-search:focus { outline: none; border-color: var(--ink); }
.rep-count { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.rep-list { columns: 3; column-gap: 44px; margin-top: 34px; }
.rep-item { display: flex; align-items: baseline; gap: .35em; break-inside: avoid; padding: 8px 0; font-size: .94rem; color: var(--muted); font-weight: 300; border-bottom: 1px solid rgba(21,20,15,.06); transition: color .25s var(--ease); cursor: pointer; }
.rep-item .title { color: var(--ink); }
.rep-item .artist { color: var(--muted-2); }
.rep-item .rep-play { margin-left: auto; padding-left: .6em; font-size: .62rem; color: var(--muted-2); opacity: 0; transform: translateX(-4px); transition: opacity .25s var(--ease), transform .25s var(--ease), color .25s var(--ease); }
.rep-item:hover { color: var(--ink); }
.rep-item:hover .title { text-decoration: underline; text-underline-offset: 3px; }
.rep-item:hover .rep-play { opacity: 1; transform: translateX(0); color: #c4302b; }
.rep-empty { color: var(--muted); font-style: italic; padding: 30px 0; }
.rep-note { column-span: all; color: var(--muted); font-weight: 300; font-size: .96rem; margin-bottom: 18px; max-width: 60ch; }

/* ============================================================
   Contact
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.field { margin-bottom: 24px; }
.field label { display: block; font-family: var(--mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.field input, .field textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line-2); color: var(--ink); padding: 11px 2px; font-family: var(--sans); font-size: 1.05rem; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.field textarea { min-height: 130px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.cdetail { border-top: 1px solid var(--line); padding: 20px 0; }
.cdetail .k { font-family: var(--mono); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.cdetail .v { font-family: var(--sans); font-weight: 400; font-size: 1.15rem; }
.cdetail .v a { border-bottom: 1px solid transparent; transition: border-color .3s; }
.cdetail .v a:hover { border-color: var(--ink); }

/* ============================================================
   CTA band (ink)
   ============================================================ */
.cta { text-align: center; }
.cta h2 { font-size: clamp(2.2rem, 6vw, 4.6rem); margin-bottom: 22px; max-width: 18ch; margin-left: auto; margin-right: auto; }
.cta p { color: var(--soft, var(--muted-inv)); font-weight: 300; margin-bottom: 36px; }

/* ============================================================
   Colophon / footer (ink)
   ============================================================ */
.colophon { background: var(--ink-2); color: var(--paper); padding: clamp(64px, 8vw, 100px) 0 40px; }
.colophon .display-mini { font-family: var(--display); font-size: clamp(2.4rem, 7.5vw, 5.4rem); line-height: .96; letter-spacing: .01em; margin-bottom: clamp(40px, 5vw, 64px); }
.col-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 44px; margin-bottom: 54px; }
.col-brand p { color: var(--muted-inv); font-weight: 300; max-width: 34ch; font-size: .95rem; }
.col h4 { font-family: var(--mono); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted-inv2); margin-bottom: 20px; }
.col ul { list-style: none; }
.col li { margin-bottom: 11px; }
.col a { color: var(--muted-inv); font-size: .94rem; transition: color .3s; }
.col a:hover { color: var(--paper); }
.socials { display: flex; gap: 12px; margin-top: 18px; }
.socials a { width: 42px; height: 42px; border: 1px solid var(--line-inv2); display: flex; align-items: center; justify-content: center; color: var(--muted-inv); transition: border-color .3s, color .3s, transform .3s; }
.socials a:hover { color: var(--paper); border-color: var(--paper); transform: translateY(-3px); }
.socials svg { width: 18px; height: 18px; }
.col-foot { border-top: 1px solid var(--line-inv); padding-top: 26px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.col-foot p { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; color: var(--muted-inv2); }

/* scroll-to-top */
.to-top { position: fixed; right: 26px; bottom: 26px; z-index: 90; width: 48px; height: 48px; background: var(--ink); color: var(--paper); border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s; }
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top svg { width: 20px; height: 20px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  :root { --gutter: 30px; }
  .col-grid { grid-template-columns: 1fr 1fr; }
  .vgrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { min-height: 52vh; margin-top: 8px; }
  .feature, .feature.flip { grid-template-columns: 1fr; gap: 32px; }
  .feature.flip .feat-media { order: 0; }
  .feat-media .mark { display: none; }
  .feat-media img { aspect-ratio: 16/11; }
  .t-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .ix { grid-template-columns: auto 1fr; }
  .ix .ix-b { grid-column: 2; }
  .svc { grid-template-columns: auto 1fr; }
  .svc .svc-act { grid-column: 2; }
  .rep-list { columns: 2; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .nav-toggle { display: block; }
  .mast-cta { display: none; }
  .nav {
    /* Sized in viewport units, not inset:0. The condensed masthead uses
       backdrop-filter, which makes it the containing block for this fixed
       overlay — with inset:0 the menu would only cover the ~66px header and
       lose its full-screen white background once you've scrolled. */
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh;
    flex-direction: column; justify-content: center; align-items: flex-start;
    padding: 0 40px; gap: 22px; background: var(--paper);
    transform: translateX(100%); transition: transform .5s var(--ease);
  }
  .nav.open { transform: translateX(0); }
  .nav a { font-family: var(--sans); font-weight: 400; font-size: 1.7rem; letter-spacing: 0; text-transform: none; color: var(--ink); }
  .nav a .n { font-family: var(--mono); font-size: .7rem; }
  /* Photo-led pages flip the wordmark + hamburger to light so they read over the
     hero photo. When the full-screen menu opens it has a light paper background,
     so flip them back to ink — otherwise they're paper-on-paper and vanish. */
  body.menu-open.lede-photo .masthead:not(.condensed) .brand { color: var(--ink); }
  body.menu-open.lede-photo .masthead:not(.condensed) .nav-toggle span { background: var(--ink); }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .col-grid { grid-template-columns: 1fr; }
  .col-foot { flex-direction: column; }
  .vgrid { grid-template-columns: 1fr; }
  .rep-list { columns: 1; }
}