/* ==========================================================
   Jumeirah Piano Studio — Shared Editorial DNA
   Used by: homepage, Heritage.html, Founder.html,
            Programs.html, Gallery.html
   ========================================================== */

:root{
  --ivory:      #f6efe1;
  --ivory-2:    #efe6d3;
  --cream:      #fbf6ea;
  --paper:      #f4ead6;
  --sepia:      #e8dcc0;
  --ink:        #1a1206;
  --espresso:   #2a1d10;
  --espresso-2: #4a3520;
  --wood:       #3a2716;
  --muted:      #7a6647;
  --gold:       #b48644;
  --gold-2:     #c99a55;
  --gold-3:     #9a7238;
  --hairline:   rgba(122, 102, 71, 0.22);
  --hairline-2: rgba(180, 134, 68, 0.45);
  --hairline-3: rgba(122, 102, 71, 0.4);

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "Inter", -apple-system, system-ui, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, monospace;

  --pad-x: clamp(24px, 5vw, 96px);
  --nav-h: 124px;
  --maxw: 1440px;

  /* ========== FLUID TYPE SCALE ==========
     Single source of truth for typography across the whole site.
     All headings/body scale smoothly from mobile to desktop via clamp().
     Test widths: 375px (mobile), 768px (tablet), 1440px (desktop). */

  /* Display — hero-scale titles only. Larger than H1. */
  --fs-display: clamp(2.75rem, 8vw, 7rem);   /* 44px → 112px */

  /* H1 — page & hero headings */
  --fs-h1:      clamp(2rem, 6vw, 6rem);      /* 32px → 96px */

  /* H2 — section titles */
  --fs-h2:      clamp(1.5rem, 4vw, 3.5rem);  /* 24px → 56px */

  /* H3 — sub-section titles */
  --fs-h3:      clamp(1.125rem, 2vw, 2rem);  /* 18px → 32px */

  /* Lede — italic serif intro paragraph */
  --fs-lede:    clamp(1.125rem, 1.6vw, 1.5rem); /* 18px → 24px */

  /* Body / paragraphs — never below 16px on mobile */
  --fs-body:    clamp(1rem, 1.2vw, 1.25rem); /* 16px → 20px */

  /* Small body — for card descriptions, secondary text */
  --fs-body-sm: clamp(0.9375rem, 1vw, 1.0625rem); /* 15px → 17px */

  /* Caption — mono/label text, uppercase */
  --fs-caption: clamp(0.6875rem, 0.85vw, 0.8125rem); /* 11px → 13px */
  --fs-caption-xs: clamp(0.625rem, 0.75vw, 0.75rem); /* 10px → 12px */

  /* CTA buttons */
  --fs-btn:     clamp(0.75rem, 0.95vw, 0.9375rem); /* 12px → 15px */

  /* Line heights */
  --lh-display: 1.02;
  --lh-heading: 1.1;
  --lh-lede:    1.4;
  --lh-body:    1.65;

  /* Reading measure — cap paragraph line length */
  --measure:    65ch;
  --measure-sm: 46ch;

  /* ===== SPACING SCALE — vertical rhythm =====
     Test widths: 375px mobile → 1440px desktop */
  --sp-section:      clamp(3rem, 6vw, 6.5rem);  /* 48 → 104 — standard section pad */
  --sp-section-lg:   clamp(4rem, 7vw, 8rem);    /* 64 → 128 — hero, high-weight sections */
  --sp-block:        clamp(2rem, 4vw, 4rem);    /* 32 → 64  — smaller vertical block */
  --sp-block-sm:     clamp(1.5rem, 2vw, 2rem);  /* 24 → 32  — sub-block */
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background: var(--ivory);
  color: var(--espresso);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }
picture{ display: contents; }
p{ max-width: 64ch; }

/* ============ TYPE — driven by fluid tokens ============ */

/* Eyebrow / caption / label */
.eyebrow{
  font-family: var(--mono);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-3);
  display: inline-flex; align-items: center; gap: 14px;
}
.eyebrow::before{ content: ""; width: 28px; height: 1px; background: var(--gold); }
.eyebrow.center{ justify-content: center; }
.eyebrow.center::before{ display: none; }

.h-display{
  font-family: var(--serif); font-weight: 300;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: -0.02em; color: var(--espresso);
}
.h-display em{ font-style: italic; color: var(--gold); font-weight: 300; }

.h1{
  font-family: var(--serif); font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: -0.018em; color: var(--espresso);
}
.h1 em{ font-style: italic; color: var(--gold); font-weight: 400; }

.h2{
  font-family: var(--serif); font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: -0.012em; color: var(--espresso);
}
.h2 em{ font-style: italic; color: var(--espresso-2); }

.h3{
  font-family: var(--serif); font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.2;
  color: var(--espresso);
}
.h3 em{ font-style: italic; color: var(--gold); }

.lede{
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: var(--fs-lede);
  line-height: var(--lh-lede);
  color: var(--espresso-2);
  text-wrap: pretty;
  max-width: var(--measure);
}

.body{
  color: var(--espresso-2);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-wrap: pretty;
  max-width: var(--measure);
}
.body + .body{ margin-top: 16px; }

.body-sm{
  color: var(--espresso-2);
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  max-width: var(--measure);
}

.caption{
  font-family: var(--mono);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted);
}
.roman{
  font-family: var(--serif); font-style: italic; font-weight: 300;
  line-height: 1; color: var(--gold);
}

/* Base paragraph — anywhere a naked <p> is used */
p{ max-width: var(--measure); }

/* ============ BUTTONS ============ */
.btn{
  display: inline-flex; align-items: center; gap: 12px;
  padding: 13px 26px;
  font-family: var(--sans);
  font-size: var(--fs-btn);
  font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  border: 1px solid var(--espresso); color: var(--espresso); background: transparent;
  cursor: pointer; transition: all .3s ease;
}
.btn:hover{ background: var(--espresso); color: var(--ivory); }
.btn.filled{ background: var(--espresso); color: var(--cream); }
.btn.filled:hover{ background: var(--ink); }
.btn.gold{ background: var(--gold); border-color: var(--gold); color: var(--cream); }
.btn.gold:hover{ background: var(--espresso); border-color: var(--espresso); color: var(--cream); }
.btn.ghost{ border-color: var(--hairline-3); color: var(--espresso-2); }
.btn.ghost:hover{ border-color: var(--espresso); background: var(--espresso); color: var(--cream); }
.btn .arr{ transition: transform .3s; display: inline-block; }
.btn:hover .arr{ transform: translateX(4px); }

/* Editorial read-more link — for teasers on homepage */
.read-more{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold-3);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--hairline-2);
  transition: color .25s, border-color .25s, gap .3s;
}
.read-more:hover{ color: var(--gold); border-color: var(--gold); gap: 14px; }
.read-more .arr{ display: inline-block; }

/* ============ NAV ============ */
header.nav{
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  padding: 0 var(--pad-x);
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(246, 239, 225, 0.94);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  border-bottom: 1px solid var(--hairline);
  transition: box-shadow .3s ease, background .3s ease;
}
header.nav.scrolled{
  background: rgba(246, 239, 225, 0.98);
  box-shadow: 0 1px 24px rgba(30, 21, 9, 0.06);
}
.nav-brand{ display: flex; align-items: center; gap: 14px; }
.nav-brand img{
  height: 116px; width: auto; display: block;
  margin: -8px 0;
}

nav.anchors{ display: flex; gap: 2px; align-items: center; }
nav.anchors a{
  padding: 10px 12px;
  font-family: var(--sans);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--espresso-2); position: relative;
  transition: color .25s;
}
nav.anchors a:hover{ color: var(--gold-3); }
nav.anchors a.active,
nav.anchors a.current{ color: var(--gold-3); }
nav.anchors a.active::after,
nav.anchors a.current::after{
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px;
  height: 1px; background: var(--gold);
}
nav.anchors a.ext{
  color: var(--gold-3);
  border: 1px solid rgba(180, 134, 68, 0.4);
  margin-left: 4px;
}
nav.anchors a.ext:hover{
  background: var(--gold);
  color: var(--cream);
  border-color: var(--gold);
}

.nav-cta{ display: flex; align-items: center; gap: 16px; }
.menu-btn{ display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.menu-btn span{ display: block; width: 22px; height: 1.5px; background: var(--espresso); margin: 5px 0; transition: .3s; }
.menu-btn.open span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.menu-btn.open span:nth-child(2){ opacity: 0; }
.menu-btn.open span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width:1280px){ nav.anchors a{ padding: 10px 8px; font-size: 10.5px; } }
@media (max-width:1080px){
  nav.anchors{
    position: fixed; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; gap: 0; align-items: stretch;
    background: var(--cream); border-bottom: 1px solid var(--hairline);
    padding: 10px var(--pad-x);
    transform: translateY(-120%); transition: transform .35s ease;
    max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
  }
  nav.anchors.open{ transform: translateY(0); box-shadow: 0 12px 30px rgba(30, 21, 9, 0.08); }
  nav.anchors a{ padding: 14px 0; border-bottom: 1px solid var(--hairline); font-size: 12px; }
  nav.anchors a:last-child{ border-bottom: 0; }
  nav.anchors a.ext{ border: 0; border-bottom: 1px solid var(--hairline); margin-left: 0; }
  .menu-btn{ display: block; }
}
@media (max-width:600px){
  .nav-brand img{ height: 78px; }
}

/* ============ SECTION SHELL ============ */
section{
  padding: var(--sp-section) var(--pad-x);
  position: relative;
}
section .maxw{ max-width: var(--maxw); margin: 0 auto; }
.section-mark{
  display: flex; align-items: baseline; gap: 20px;
  margin-bottom: 20px;
}
.section-mark .num{
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(2.5rem, 4.5vw, 3.5rem);
  color: var(--gold); line-height: 1;
}
.section-mark .lbl{
  font-family: var(--mono);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted);
  padding-bottom: 8px;
  display: flex; align-items: center; gap: 12px;
}
.section-mark .lbl::before{ content: ""; width: 24px; height: 1px; background: var(--gold); }

/* ============ IMAGE PLACEHOLDER ============ */
.ph{
  position: relative;
  background:
    repeating-linear-gradient(135deg,
      rgba(180, 134, 68, 0.08) 0 1px,
      transparent 1px 22px),
    linear-gradient(180deg, var(--cream) 0%, var(--sepia) 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--muted);
  text-align: center;
  padding: 24px;
  overflow: hidden;
}
.ph::before{
  content: attr(data-label);
  font-family: var(--mono);
  font-size: var(--fs-caption-xs);
  font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold-3);
  display: block;
}
.ph::after{
  content: attr(data-note);
  display: block;
  font-family: var(--serif); font-style: italic;
  font-size: var(--fs-body-sm);
  color: var(--muted);
  margin-top: 12px; max-width: 30ch; line-height: 1.4;
}
.ph.framed{
  outline: 1px solid rgba(180, 134, 68, 0.35);
  outline-offset: -14px;
}
.ph.dark{
  background:
    repeating-linear-gradient(135deg,
      rgba(180, 134, 68, 0.06) 0 1px,
      transparent 1px 22px),
    linear-gradient(180deg, var(--wood) 0%, var(--ink) 100%);
  color: rgba(255, 255, 255, 0.5);
}
.ph.dark::before{ color: var(--gold-2); }
.ph.dark::after{ color: rgba(255, 255, 255, 0.5); }

/* ============ SUB-PAGE HERO (Heritage, Founder, Programs) ============ */
.page-hero{
  padding: calc(var(--nav-h) + var(--sp-block)) var(--pad-x) var(--sp-section);
  background: var(--ivory);
  border-bottom: 1px solid var(--hairline);
}
.page-hero .maxw{ max-width: 1200px; margin: 0 auto; }
.page-hero .crumb{
  font-family: var(--mono);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.28em; color: var(--muted); text-transform: uppercase;
  margin-bottom: 26px;
}
.page-hero .crumb a{ color: var(--muted); transition: color .2s; }
.page-hero .crumb a:hover{ color: var(--gold-3); }
.page-hero h1{
  font-family: var(--serif); font-weight: 300;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: -0.02em; color: var(--espresso);
  margin: 22px 0 0;
  max-width: 22ch;
}
.page-hero h1 em{ font-style: italic; color: var(--gold); font-weight: 300; }
.page-hero .lede{
  margin-top: 32px;
  max-width: 62ch;
}

/* ============ SUB-PAGE CTA STRIP ============ */
.cta-strip{
  padding: var(--sp-section) var(--pad-x);
  background: var(--ink);
  color: var(--cream);
  text-align: center;
}
.cta-strip h3{
  font-family: var(--serif); font-weight: 300;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading); color: var(--cream);
  max-width: 22ch; margin: 0 auto;
}
.cta-strip h3 em{ font-style: italic; color: var(--gold-2); }
.cta-strip p{
  margin: 22px auto 0;
  font-family: var(--serif); font-style: italic;
  font-size: var(--fs-lede);
  line-height: var(--lh-lede);
  color: #d5c19b; max-width: 52ch;
}
.cta-strip .row{
  margin-top: 34px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.cta-strip .btn{ border-color: var(--gold-2); color: var(--gold-2); }
.cta-strip .btn:hover{ background: var(--gold-2); color: var(--espresso); }
.cta-strip .btn.filled{
  background: var(--gold-2); border-color: var(--gold-2); color: var(--espresso);
}
.cta-strip .btn.filled:hover{
  background: transparent; color: var(--gold-2);
}

/* ============ FOOT LINE ============ */
.foot-line{
  background: var(--ink);
  padding: 22px var(--pad-x);
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap;
  font-family: var(--mono);
  font-size: var(--fs-caption-xs);
  font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: #d9c49a;
  border-top: 1px solid rgba(180, 134, 68, 0.18);
}

/* ============ REVEAL ============ */
.reveal{
  opacity: 0; transform: translateY(24px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
}
.reveal.in{ opacity: 1; transform: none; }
.reveal.d1{ transition-delay: 0.08s; }
.reveal.d2{ transition-delay: 0.16s; }
.reveal.d3{ transition-delay: 0.24s; }
.reveal.d4{ transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; transition: none; }
}

/* Mobile safeguard — no parallax transforms below 900px.
   Prevents images from visually overlapping stacked text. */
@media (max-width: 899px){
  .parallax{ transform: none !important; }
}

::selection{ background: var(--gold); color: var(--cream); }