/* ============================================================
   MANUCHIE — warm, gold-on-black, premium
   ============================================================ */

:root{
  --bg:#0a0a0b;
  --bg-2:#101012;
  --bg-deep:#060607;
  --surface:#141416;
  --surface-2:#1a1a1d;

  /* ===== THEME — colour variant tokens ===== */
  --warm:#b5481e;
  --warm-mid:#6a2a12;
  --warm-deep:#331710;
  --warm-surface:#48210f;
  --warm-line:rgba(240,185,150,.15);
  --accent-glow:rgba(201,92,44,.14);
  --emph:#ffffff;
  --cta:#ffffff;
  --cta-text:#0a0a0b;
  --gold:#c9cace;
  --wave-top:rgba(255,255,255,.58);
  /* ===== /THEME ===== */

  --gold-bright:#ffffff; /* reserved white: logos */
  --gold-deep:#8a8b90;
  --rust:#9a9ba0;

  --cream:#f3f3f1;
  --cream-soft:rgba(243,243,241,.64);
  --cream-mute:rgba(243,243,241,.52);   /* small labels: ≥4.5:1 on the dark background (WCAG AA) */

  --line:rgba(255,255,255,.14);
  --line-2:rgba(255,255,255,.09);

  --disp:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  /* spacing system — every section shares one left/right rail */
  --pad:clamp(1.25rem,4.5vw,4rem);                          /* minimum side padding */
  --wrap:1320px;                                            /* content rail width */
  --gutter:max(var(--pad),calc((100% - var(--wrap)) / 2));  /* side padding that lands on the rail */
  --sec-y:clamp(4.5rem,9vw,7.5rem);                         /* section top/bottom */
  --col-gap:clamp(2.5rem,6vw,5rem);                         /* gap between the two text columns */
  --gap:clamp(1rem,2vw,1.5rem);                             /* gap between cards / photos */
  --s-label:1.4rem;                                         /* section label → heading */
  --s-head:clamp(1.2rem,2vw,1.6rem);                        /* heading → copy */
  --s-p:1rem;                                               /* paragraph → paragraph */
  --s-cta:2rem;                                             /* copy → buttons */
  --s-block:clamp(2.5rem,5vw,4rem);                         /* block → block inside a section */
  --measure:38rem;                                          /* readable line length for body copy */
  --fs-body:1.06rem;                                        /* section body copy */
  --r-card:16px;                                            /* cards, players, form */
  --r-photo:10px;                                           /* photographs */
  --r-ctl:10px;                                             /* inputs, small tiles */
  --photo:saturate(1.12) contrast(1.04);
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition-duration:.001ms!important}}

body{font-family:var(--sans);background:var(--bg);color:var(--cream);line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
::selection{background:var(--gold-bright);color:#0a0a0b}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.hero-photo img,.story-photo img,.mantra-photo img,.featured-art img,.gallery img{filter:var(--photo)}

/* film grain — depth over the flat black */
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.075;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* audio waveform — the producer's signature */
.wave{display:flex;align-items:center;gap:3px;height:46px;max-width:30rem;flex:1 1 100%;margin-top:clamp(1rem,2vw,1.6rem)}
.wave span{flex:1;min-width:2px;height:40%;border-radius:2px;transform-origin:center;
  background:linear-gradient(to top,rgba(255,255,255,.08),var(--wave-top));
  animation:eq 2.6s var(--ease) infinite}
@keyframes eq{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.5)}}
@media (prefers-reduced-motion:reduce){.wave span{animation:none}}

/* reveal (only hides when JS is on) */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .85s var(--ease),transform .85s var(--ease);transition-delay:calc(var(--d,0)*80ms)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}}

/* shared type */
.sec-no{font-family:var(--sans);font-size:.76rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-mute);margin-bottom:var(--s-label)}
.sec-no.gold{color:var(--gold)}
.eyebrow{font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center}
.tick{width:7px;height:7px;border-radius:50%;background:var(--gold);margin-right:.65rem}
.h-lg{font-family:var(--disp);font-weight:500;font-size:clamp(2rem,3.6vw,3.5rem);line-height:1.04;letter-spacing:-.01em;color:var(--cream);text-wrap:balance}
.h-lg em{font-style:italic;color:var(--emph);font-weight:400}
.h-lg.light{color:var(--cream)}
.h-xl{font-family:var(--disp);font-weight:500;font-size:clamp(2.6rem,6.4vw,5.2rem);line-height:1;letter-spacing:-.015em;color:var(--cream);text-wrap:balance}
/* two-column section head: label + heading on the left, intro copy on the right */
.split-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--col-gap);row-gap:var(--s-head);align-items:start}
/* intro copy starts level with the heading, not the small label above it */
.sound-head .split-copy,.studio-head .split-copy{padding-top:calc(.76rem * 1.6 + var(--s-label))}
.split-title > :last-child{margin-bottom:0}
.split-copy > p{max-width:var(--measure);font-size:var(--fs-body);color:var(--cream-soft)}
.split-copy > p + p{margin-top:var(--s-p)}
.h-xl em{font-style:italic;color:var(--emph);font-weight:400}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:var(--sans);font-weight:600;font-size:.96rem;
  padding:.95rem 1.7rem;border-radius:999px;border:1.5px solid transparent;transition:transform .2s var(--ease),background .25s,color .25s,box-shadow .25s}
.btn-gold{background:var(--cta);color:var(--cta-text);box-shadow:0 12px 36px -16px rgba(0,0,0,.7)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 18px 44px -14px rgba(0,0,0,.8)}
.btn-line{border-color:var(--line);color:var(--cream);background:rgba(243,233,215,.02)}
.btn-line:hover{border-color:var(--gold);color:var(--gold-bright);transform:translateY(-2px)}
.btn-wide{width:100%;margin-top:.4rem}

.skip-link{position:fixed;top:-60px;left:1rem;z-index:200;background:var(--gold);color:#17100a;padding:.6rem 1rem;border-radius:6px;font-weight:600;transition:top .2s}
.skip-link:focus{top:1rem}
/* in-page targets land below the fixed nav (same 72px offset the old JS scroll used) */
#top,section[id]{scroll-margin-top:4.5rem}
/* sections focused by in-page links get keyboard focus without a frame drawn round them */
[tabindex="-1"]:focus{outline:none}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  padding:clamp(1rem,2.2vw,1.5rem) var(--gutter);transition:background .4s,border-color .4s,padding .3s}
.nav.solid{background:rgba(15,11,7,.78);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);box-shadow:0 14px 34px -24px rgba(0,0,0,.9);padding-top:.8rem;padding-bottom:.8rem}
.nav-logo{font-family:var(--disp);font-weight:600;font-size:1.4rem;letter-spacing:-.01em;color:var(--gold-bright)}
.nav-links{display:flex;align-items:center;gap:clamp(1.2rem,2.4vw,2.2rem)}
.nav-links a{font-size:.92rem;font-weight:500;color:var(--cream-soft);transition:color .2s}
.nav-links a:hover{color:var(--cream)}
.nav-book{padding:.55rem 1.15rem;border:1.4px solid var(--gold);border-radius:999px;color:var(--gold)!important;transition:background .25s,color .25s}
.nav-book:hover{background:var(--gold-bright);color:#0a0a0b!important}
.burger{display:none;flex-direction:column;gap:6px;background:none;border:0;padding:8px;z-index:101}
.burger span{width:25px;height:2px;background:var(--cream);transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
.drawer{position:fixed;inset:0;z-index:95;background:rgba(10,7,5,.97);backdrop-filter:blur(18px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6rem}
.drawer[hidden]{display:none}
.drawer a{font-family:var(--disp);font-weight:500;font-size:2.2rem;color:var(--cream)}
.drawer-book{color:var(--gold-bright)!important}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:var(--col-gap);
  padding:clamp(7rem,13vh,10rem) var(--gutter) clamp(3rem,6vw,4.5rem);overflow:hidden;
  background:
    radial-gradient(135% 115% at 80% -16%,var(--warm) 0%,var(--warm-mid) 16%,var(--warm-deep) 35%,#0a0a0b 61%)}
.hero-glow{position:absolute;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(60% 55% at 80% 32%,var(--accent-glow),transparent 62%),
  radial-gradient(45% 50% at 12% 88%,rgba(255,255,255,.045),transparent 60%)}
.hero-type{position:relative;z-index:1;max-width:38rem}
.hero-name{font-family:var(--disp);font-weight:500;font-size:clamp(3.6rem,9vw,8rem);line-height:.9;letter-spacing:-.03em;margin:calc(1.4rem - .14em) 0 .3rem;
  padding-top:.14em; /* room for the tall caps inside the gradient-painted box; margin gives it back */
  background:linear-gradient(168deg,#ffffff 8%,#dcdde1 52%,#a9aab0);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-tagline{font-family:var(--disp);font-size:clamp(1.6rem,3.2vw,2.6rem);line-height:1.1;color:var(--cream);margin-bottom:1.4rem}
.hero-tagline em{display:block;font-style:italic;color:var(--emph)}
.hero-sub{font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--cream-soft);max-width:31rem;line-height:1.6}
.hero-sub + .hero-sub{margin-top:.9rem}
.hero-based{margin-top:1.1rem;font-size:.95rem;font-weight:600;color:var(--cream)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.2rem}
.hero-photo{position:relative;z-index:1;justify-self:end;width:100%;max-width:30rem;aspect-ratio:536/640;border-radius:var(--r-photo);overflow:hidden;box-shadow:0 36px 80px -46px rgba(0,0,0,.65)}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.hero-photo figcaption{position:absolute;left:clamp(1rem,2vw,1.4rem);bottom:clamp(1rem,2vw,1.4rem);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85);text-shadow:0 1px 10px rgba(0,0,0,.6)}

/* ---------- marquee ---------- */
.marquee{border-block:1px solid var(--line);background:var(--bg-2);overflow:hidden;padding-block:1.3rem}
.marquee-run{display:inline-flex;align-items:center;gap:2.2rem;white-space:nowrap;animation:marq 52s linear infinite}
.marquee:hover .marquee-run{animation-play-state:paused}
.marquee span{font-family:var(--disp);font-style:italic;font-size:clamp(1.1rem,2.3vw,1.7rem);color:var(--cream-soft)}
.marquee i{color:var(--gold);font-style:normal;font-size:.7rem}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- story ---------- */
.story{padding:var(--sec-y) var(--gutter);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--col-gap);align-items:start}
.story-photo{position:sticky;top:7rem;aspect-ratio:4/5;border-radius:var(--r-photo);overflow:hidden;border:1px solid var(--line-2)}
.story-photo img{width:100%;height:100%;object-fit:cover}
.story-copy .h-lg{margin-bottom:var(--s-head)}
.story-copy p{color:var(--cream-soft);margin-top:var(--s-p);font-size:var(--fs-body);max-width:var(--measure)}
.story-copy p strong{color:var(--cream);font-weight:600}
.facts{list-style:none;padding:0;margin-top:var(--s-cta);border-top:1px solid var(--line-2);max-width:var(--measure)}
.facts li{display:grid;grid-template-columns:6.5rem 1fr;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--line-2);font-size:.98rem;color:var(--cream)}
.facts li span{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);align-self:center}

/* ---------- mantra ---------- */
.mantra{background:linear-gradient(92deg,var(--warm) 0%,var(--warm-mid) 30%,var(--warm-deep) 47%,#0a0a0b 76%);display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.mantra-photo{overflow:hidden;min-height:68vh}
.mantra-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.mantra-type{display:flex;flex-direction:column;justify-content:center;padding:var(--sec-y) 0;
  padding-left:calc(var(--col-gap) / 2);                       /* starts where the page's right column starts */
  padding-right:max(var(--pad),calc(100% - var(--wrap) / 2))} /* half-width column: lands on the page rail */
.mantra-type > *{max-width:var(--measure)}
.mantra-line{font-family:var(--disp);font-weight:500;font-size:clamp(2.3rem,4.6vw,4rem);line-height:1;letter-spacing:-.02em;color:var(--cream);text-wrap:balance}
.mantra-line em{font-style:italic;color:var(--emph)}
.mantra-verse{margin:var(--s-head) 0 0;padding-left:1.2rem;border-left:2px solid rgba(255,255,255,.35)}
.mantra-verse p{font-family:var(--disp);font-style:italic;font-size:clamp(1.25rem,2vw,1.55rem);line-height:1.3;color:var(--cream)}
.mantra-verse cite{display:block;margin-top:.6rem;font-style:normal;font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.mantra-sub{margin-top:var(--s-head);color:var(--cream-soft);font-size:var(--fs-body)}
.mantra-sub + .mantra-sub{margin-top:var(--s-p)}
.mantra-close{margin-top:var(--s-head);font-size:var(--fs-body);font-weight:600;color:var(--cream)}

/* ---------- sound ---------- */
.sound{padding:var(--sec-y) var(--gutter)}
.sound-head{margin-bottom:var(--s-block)}
.split-copy > .sound-listen{color:var(--cream);font-weight:600}
.sound-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap);align-items:stretch}
/* the player grows to the featured card's height, so the two sit as a matched pair */
.player > iframe{flex:1;width:100%;height:auto;min-height:420px;border:0;border-radius:var(--r-card);box-shadow:0 30px 60px -40px rgba(0,0,0,.8)}
.player{display:flex;flex-direction:column}
.player-fallback{flex:1;min-height:420px;display:flex;flex-direction:column;justify-content:flex-end;gap:.35rem;padding:clamp(1.5rem,3vw,2.2rem);
  border:1px solid var(--line);border-radius:var(--r-card);
  background:radial-gradient(120% 90% at 85% 0%,var(--warm-deep),var(--surface) 62%)}
.player-fallback[hidden]{display:none}
.pf-player{margin-bottom:auto;padding-bottom:1.6rem}
.pf-player iframe{display:block;width:100%;height:175px;border:0;border-radius:var(--r-ctl);overflow:hidden}
.player-fallback h3{font-family:var(--disp);font-weight:500;font-size:clamp(2.4rem,4.6vw,3.6rem);line-height:1;letter-spacing:-.02em;color:var(--cream)}
.pf-links{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}
.featured{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:var(--surface)}
.featured-art{aspect-ratio:16/9;overflow:hidden}
.featured-art img{width:100%;height:100%;object-fit:cover}
.featured-meta{padding:clamp(1.5rem,3vw,2.2rem);display:flex;flex-direction:column;gap:.35rem}
.featured-k{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.featured-meta h3{font-family:var(--disp);font-weight:500;font-size:clamp(1.5rem,2.6vw,2rem);color:var(--cream);line-height:1.1}
.featured-meta p{color:var(--cream-soft);font-size:.95rem}
.featured-link{margin-top:.6rem;color:var(--gold);font-weight:600;font-size:.95rem;align-self:flex-start}
.featured-link:hover{color:var(--gold-bright)}

.records-k{margin-top:var(--s-block);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-mute)}
.records{list-style:none;padding:0;margin-top:var(--s-block);border-top:1px solid var(--line-2)}
.records-k + .records{margin-top:1rem}
.records-note{margin-top:1.2rem;font-size:.92rem;font-style:italic;color:var(--cream-mute)}
.records a{display:grid;grid-template-columns:3rem 1fr auto;align-items:baseline;gap:.3rem 1rem;padding:1.1rem .3rem;border-bottom:1px solid var(--line-2);transition:padding-left .25s var(--ease),background .25s}
.records a:hover{padding-left:1rem;background:linear-gradient(90deg,rgba(255,255,255,.05),transparent)}
.records .yr{font-family:var(--disp);font-style:italic;color:var(--gold)}
.records .nm{font-family:var(--disp);font-weight:500;font-size:clamp(1.2rem,2vw,1.6rem);color:var(--cream)}
.records .wi{grid-column:2;font-size:.9rem;color:var(--cream-mute)}
.records .go{color:var(--cream-mute);transition:transform .25s,color .25s}
.records a:hover .go{transform:translate(2px,-2px);color:var(--gold)}
.platforms{display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem;margin-top:var(--s-cta);padding-top:var(--s-head);border-top:1px solid var(--line-2)}
.platforms span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-mute)}
.platforms a{font-size:.98rem;color:var(--cream);border-bottom:1px solid var(--line);padding-bottom:2px;transition:border-color .2s,color .2s}
.platforms a:hover{border-color:var(--gold);color:var(--gold-bright)}

/* ---------- studio ---------- */
.studio{background:radial-gradient(130% 92% at 50% -25%,var(--warm-mid),#0a0a0b 56%);border-block:1px solid var(--warm-line)}
.studio{padding:var(--sec-y) var(--gutter)}
.studio-head{margin-bottom:var(--s-label)}
.studio-head .offers-k{grid-column:1 / -1;margin:calc(var(--s-block) - var(--s-head)) 0 0}
.offers{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.offers li{padding:clamp(1.5rem,3vw,2.2rem);border:1px solid var(--warm-line);border-radius:var(--r-card);background:var(--warm-surface);transition:transform .35s var(--ease),border-color .35s,background .35s}
.offers li:hover{transform:translateY(-4px);border-color:rgba(240,185,150,.3);background:#58311e}
.offer-no{font-family:var(--disp);font-style:italic;font-size:1rem;color:var(--gold)}
.offers h3{font-family:var(--disp);font-weight:500;font-size:1.45rem;line-height:1.2;color:var(--cream);margin:.5rem 0 0}
.studio-world{margin-top:var(--s-block);padding-top:var(--s-block);border-top:1px solid var(--warm-line);align-items:start}
.studio-world h3{font-family:var(--disp);font-weight:500;font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.08;color:var(--cream);text-wrap:balance}
.studio-world h3 em{font-style:italic;font-weight:400;color:var(--emph)}
.split-copy > .studio-tag{color:var(--cream);font-weight:600}
.studio-world .btn{margin-top:var(--s-cta)}

/* ---------- gallery ---------- */
/* the photos share the page rail edge to edge, in equal columns */
.gallery{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--gap);padding:var(--sec-y) var(--gutter) 0}
.gallery figure{aspect-ratio:3/4;border-radius:var(--r-photo);overflow:hidden;border:1px solid var(--line-2);background:var(--surface)}
/* phones: swipe through them */
@media (max-width:640px){
  .gallery{grid-auto-columns:72vw;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .gallery::-webkit-scrollbar{display:none}
  .gallery figure{scroll-snap-align:start}
}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.gallery figure:hover img{transform:scale(1.04)}

/* ---------- contact ---------- */
.contact{padding:var(--sec-y) var(--gutter);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--col-gap);align-items:start}
.contact-left .h-xl{margin-bottom:var(--s-head)}
.contact-sub{color:var(--cream-soft);font-size:var(--fs-body);max-width:var(--measure)}
.contact-sub + .contact-sub{margin-top:var(--s-p)}
.contact-lead{color:var(--cream)}
.contact-loc{margin-top:var(--s-cta);font-size:.76rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.contact-sign{margin-top:.9rem;font-size:1.05rem;color:var(--cream)}
.contact-sign strong{font-weight:600}
.contact-sign em{font-family:var(--disp);font-style:italic;color:var(--cream-soft)}
.contact-direct{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:var(--s-cta)}
.cd{display:flex;flex-direction:column;gap:.2rem;border:1px solid var(--line);border-radius:var(--r-ctl);padding:.9rem 1.2rem;min-width:12rem;transition:border-color .25s,transform .2s}
.cd:hover{border-color:var(--gold);transform:translateY(-2px)}
.cd-k{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.cd-v{font-size:1rem;color:var(--cream)}
.contact-form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(1.5rem,3vw,2.2rem)}
.fld{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.1rem}
.fld span{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cream-mute)}
.fld input,.fld textarea{font:inherit;font-size:1rem;color:var(--cream);background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r-ctl);padding:.85rem 1rem;transition:border-color .2s,box-shadow .2s;width:100%}
.fld textarea{resize:vertical;min-height:110px}
.fld input::placeholder,.fld textarea::placeholder{color:var(--cream-mute)}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,255,255,.12)}
.hp{position:absolute;left:-9999px;opacity:0}
.form-status{margin-top:1rem;font-size:.92rem;text-align:center;min-height:1.1em;color:var(--cream-soft)}
.form-status.ok{color:var(--gold-bright)}
.form-status.err{color:#e08a5e}

/* ---------- footer ---------- */
.foot{background:var(--bg-deep);border-top:1px solid var(--line-2);padding:clamp(3rem,6vw,4.5rem) var(--gutter)}
.foot-top{margin-bottom:2.2rem;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1.5rem;padding-bottom:2.2rem;border-bottom:1px solid var(--line-2)}
.foot-logo{font-family:var(--disp);font-weight:500;font-size:clamp(2.2rem,6vw,4rem);color:var(--gold-bright);line-height:.9}
.foot-links{display:flex;flex-wrap:wrap;gap:1.2rem}
.foot-links a{font-size:.92rem;color:var(--cream-soft);border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.foot-links a:hover{color:var(--gold);border-color:var(--gold)}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;font-size:.82rem;color:var(--cream-mute)}
.foot-mantra{font-family:var(--disp);font-style:italic;color:var(--cream-soft)}
/* site credit — the builder's mark, in the footer's own greys */
.foot-credit-row{display:flex;justify-content:center;margin-top:2.2rem;padding-top:1.8rem;border-top:1px solid var(--line-2)}
.foot-credit{display:inline-flex;align-items:center;gap:.7rem;font-size:.85rem;color:var(--cream-soft);transition:color .25s}
.foot-credit-k{color:var(--cream-mute);transition:color .25s}
.foot-credit img{height:2.75rem;width:auto;transition:transform .35s var(--ease)}
.foot-credit:hover,.foot-credit:hover .foot-credit-k{color:var(--cream)}
.foot-credit:hover img{transform:scale(1.06)}

/* ---------- responsive ---------- */
/* desktop: the hero fits the first screen — type, gaps and photo scale with the viewport height */
@media (min-width:901px){
  .hero{--hero-top:clamp(5.5rem,14vh,10rem);--hero-bot:clamp(1.25rem,4vh,4.5rem);
    /* text column at its readable width; the portrait takes the rest of the rail */
    grid-template-columns:minmax(0,42rem) minmax(36%,1fr);padding-top:var(--hero-top);padding-bottom:var(--hero-bot)}
  .hero-type{max-width:42rem}
  .hero-name{font-size:clamp(3.6rem,min(9vw,13vh),8rem);margin-top:calc(min(1.4rem,2vh) - .14em)}
  .hero-tagline{font-size:clamp(1.6rem,min(3.2vw,4.6vh),2.6rem);margin-bottom:min(1.4rem,2.2vh)}
  .hero-sub{font-size:clamp(1rem,min(1.5vw,2.3vh),1.2rem);max-width:40rem;line-height:1.55}
  .hero-sub + .hero-sub{margin-top:min(.9rem,1.6vh)}
  .hero-based{margin-top:min(1.1rem,1.8vh)}
  .hero-cta{align-items:center;margin-top:min(2.2rem,3.4vh)}
  .hero-cta .wave{flex:1 1 4rem;min-width:0;overflow:hidden;margin:0 0 0 .6rem;height:min(46px,6vh)}
  /* portrait fills its column at its natural shape, never taller than the screen allows,
     so its top and bottom sit level with the text block beside it */
  .hero-photo{width:100%;max-width:calc((100svh - var(--hero-top) - var(--hero-bot)) * 536 / 640)}
}
/* narrower desktops: give the portrait a larger share so it keeps pace with the text */
@media (min-width:901px) and (max-width:1199px){
  .hero{grid-template-columns:minmax(0,42rem) minmax(40%,1fr)}
}
/* short laptop screens (e.g. 1366×768 with browser chrome) */
@media (min-width:901px) and (max-height:700px){
  .nav{padding-block:.7rem}
  .hero-sub{font-size:.95rem;line-height:1.5}
}
@media (max-width:900px){
  .nav-links{display:none}
  .burger{display:flex}
  .hero{grid-template-columns:1fr;min-height:auto;gap:2.5rem}
  .hero-photo{order:2;justify-self:start;width:100%;max-width:34rem}
  .story{grid-template-columns:1fr;gap:var(--s-block)}
  .story-photo{position:static;max-width:30rem}
  .mantra{grid-template-columns:1fr}
  .mantra-photo{order:-1;min-height:56vh}
  .mantra-type{padding-inline:var(--gutter)}
  .split-head{grid-template-columns:1fr}
  .sound-head .split-copy,.studio-head .split-copy{padding-top:0}
  .sound-grid{grid-template-columns:1fr}
  .offers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact{grid-template-columns:1fr;gap:var(--s-block)}
}
@media (max-width:540px){
  .records a{grid-template-columns:2.2rem 1fr auto;gap:.2rem .8rem}
  .offers{grid-template-columns:1fr}
  .foot-top,.foot-base{flex-direction:column;align-items:flex-start}
}