/* ==========================================================================
   Sri Vinayaka — Academy of Indian Classical Performing Arts
   Round 3 (October 2026): visual identity from the client's style guide
   "Definitieve websitefeedback + visuele stijlgids voor Tim":
     crème #FBF6E9 · bordeaux #8E1B2C · diep rood #6F1722 · goud #B08D2A · tekst #2B2722
   Gold only as an accent (thin lines, small ornaments, icons); bordeaux / deep red
   for important titles and buttons. Titles in Cormorant Garamond (italic), body text
   in a calm sans-serif. Warm, classical, artistic and calm — no loud colours and no
   excess of ornament.
   Contrast: #B08D2A on crème is 2.9:1, so small gold TEXT uses the deeper
   --gold-text #8A6D1A (4.6:1); the bright gold stays for lines and icons.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  --cream:      #fbf6e9;
  --cream-deep: #f3e9d2;
  --paper:      #fffcf5;

  --bordeaux:   #8e1b2c;
  --deep-red:   #6f1722;
  --deep-red-2: #561019;

  --gold:       #b08d2a;
  --gold-text:  #8a6d1a;
  --gold-light: #dcc27a;
  --gold-soft:  rgba(176, 141, 42, .14);

  --ink:        #2b2722;
  --ink-soft:   #574e45;
  --ink-faint:  #73685d;

  --line:       rgba(176, 141, 42, .38);
  --line-soft:  rgba(43, 39, 34, .10);

  --shadow-sm: 0 2px 10px rgba(43, 39, 34, .06);
  --shadow-md: 0 12px 32px rgba(43, 39, 34, .10);
  --shadow-lg: 0 26px 60px rgba(43, 39, 34, .16);

  --radius:    12px;
  --radius-lg: 20px;

  --font-body:    'Mulish', Arial, Helvetica, sans-serif;
  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;

  --wrap: 1200px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --nav-h: 54px;

  /* round 4: brighter red for titles on dark photos (3.6:1 on the dark veil, large text
     only) and a warm red for "Welkom" on crème (7:1) */
  --red-on-dark: #d42a3c;
  --red:         #a8192d;
  /* gold photo frame: offset and the colour of the surface it sits on */
  --frame-x:  14px;
  --frame-bg: var(--cream);
}
@media (max-width: 760px) { :root { --frame-x: 9px; } }

/* ---------- 2. Base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: .97rem;  /* round 5: slightly smaller (client: "is het basis lettertype niet te groot?") */
  line-height: 1.75;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
p, li, td, th, h1, h2, h3, figcaption, address { overflow-wrap: break-word; }
a { color: var(--bordeaux); text-decoration-color: var(--line); text-underline-offset: 3px; overflow-wrap: anywhere; }
a:hover { color: var(--deep-red); text-decoration-color: currentColor; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  margin: 0 0 .5em;
  color: var(--deep-red);
}
/* hero and section titles: Cormorant Garamond Italic (client's preference) */
h1, h2 { font-style: italic; letter-spacing: -.005em; }
h1 { font-size: clamp(2.5rem, 6vw, 4.4rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.65rem); font-weight: 600; color: var(--ink); }
p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; color: var(--ink); }

::selection { background: var(--bordeaux); color: #fff; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--deep-red); color: #fff; padding: .8rem 1.3rem; }
.skip-link:focus { left: 0; color: #fff; }

/* ---------- 3. Layout ---------------------------------------------------- */
.wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; }
.wrap--narrow { width: min(800px, 100% - var(--gutter) * 2); margin-inline: auto; }

.section        { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.section--tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.section--paper { background: var(--paper); --frame-bg: var(--paper); }
.section--sand  { background: var(--cream-deep); }
.section--dark  { background: linear-gradient(160deg, var(--deep-red) 0%, var(--deep-red-2) 100%); color: #f4e9d8; }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark p { color: #ead9c4; }
.section--dark a:not(.btn) { color: var(--gold-light); }
.section + .section--paper, .section--paper + .section { border-top: 1px solid var(--line-soft); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--font-body); font-size: .76rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text);
  margin: 0 0 .9rem;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--gold); }
.section--dark .eyebrow, .pagehead--photo .eyebrow { color: var(--gold-light); }
.section--dark .eyebrow::before, .pagehead--photo .eyebrow::before { background: var(--gold-light); }

.section-head { max-width: 720px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .eyebrow::after { content: ""; width: 26px; height: 1px; background: var(--gold); }

.lede { font-size: 1.08rem; color: var(--ink-soft); }
.muted { color: var(--ink-faint); font-size: .92rem; }

/* gold rule with a small lotus in the middle */
.ornament { display: flex; align-items: center; gap: .7rem; color: var(--gold); max-width: 240px; }
.ornament > span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.ornament > span:last-child { background: linear-gradient(90deg, var(--gold), transparent); }
.ornament__icon { width: 22px; height: 22px; flex: none; stroke-width: 1.6; }
.section-head--center .ornament, .cta .ornament { margin-inline: auto; }

/* ---------- 4. Buttons --------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .85rem 1.7rem;
  font-family: var(--font-body); font-size: .82rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn .icon { width: 16px; height: 16px; }
.btn--primary { background: var(--bordeaux); color: #fff; box-shadow: inset 0 0 0 1px rgba(220, 194, 122, .55); }
.btn--primary:hover { background: var(--deep-red); color: #fff; }
.btn--ghost { border-color: var(--bordeaux); color: var(--bordeaux); background: transparent; }
.btn--ghost:hover { background: var(--bordeaux); color: #fff; }
.btn--light { border-color: rgba(255, 255, 255, .7); color: #fff; background: transparent; }
.btn--light:hover { background: #fff; color: var(--deep-red); }
.btn--gold { background: var(--gold-text); color: #fff; }
.btn--gold:hover { background: #73590f; color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.btn-row--center { justify-content: center; }
@media (max-width: 560px) {
  .btn-row { flex-direction: column; align-items: stretch; }
}

.link-more {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--bordeaux); text-decoration: none;
}
.link-more::after { content: "→"; transition: transform .2s ease; }
.link-more:hover::after { transform: translateX(4px); }

/* ---------- 5. Masthead (logo row) + navbar ------------------------------ */
.masthead { background: var(--cream); border-bottom: 1px solid var(--line); position: relative; z-index: 61; }
.masthead__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1rem 0; }

.brand { display: flex; align-items: center; gap: 1rem; text-decoration: none; color: inherit; min-width: 0; overflow-wrap: normal; }
.brand__mark { width: 104px; height: auto; flex: none; }
.brand__text { display: flex; flex-direction: column; min-width: 0; }
.brand__name {
  font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: clamp(2.2rem, 3.4vw, 3.15rem); line-height: .95; color: var(--bordeaux);
  white-space: nowrap;
}
.brand__sub {
  margin-top: .45rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.02rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); line-height: 1.25;
}
.brand__ornament { margin-top: .4rem; max-width: 300px; }

.masthead__tools { display: flex; align-items: center; gap: .9rem; flex: none; }
.masthead__phone { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; font-size: .9rem; color: var(--ink); text-decoration: none; }
.masthead__phone .icon { width: 17px; height: 17px; color: var(--gold); }
.masthead__phone:hover { color: var(--bordeaux); }

.lang-switch {
  display: inline-flex; align-items: center; flex: none;
  border: 1px solid var(--line); border-radius: 999px; padding: 3px;
  font-size: .74rem; font-weight: 800; letter-spacing: .08em;
}
.lang-switch a, .lang-switch span {
  display: grid; place-items: center; min-width: 38px; min-height: 34px;
  padding: 0 .55rem; border-radius: 999px; text-decoration: none;
}
.lang-switch a { color: var(--ink-soft); }
.lang-switch a:hover { color: var(--bordeaux); background: var(--gold-soft); }
.lang-switch [aria-current] { background: var(--gold-text); color: #fff; }

.navbar {
  position: sticky; top: 0; z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s ease;
}
.navbar.is-stuck { box-shadow: var(--shadow-sm); }

.nav__list { display: flex; justify-content: center; flex-wrap: nowrap; list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: flex; align-items: center; min-height: var(--nav-h);
  padding: 0 .5rem;
  font-size: .86rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
  color: var(--ink); text-decoration: none; position: relative;
}
.nav__link:hover { color: var(--bordeaux); }
.nav__item.is-active > .nav__link { color: var(--bordeaux); }
.nav__item.is-active > .nav__link::after {
  content: ""; position: absolute; left: .5rem; right: .5rem; bottom: 12px; height: 2px; background: var(--gold); border-radius: 2px;
}
.nav__toggle-icon { width: 6px; height: 6px; margin-left: .32rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; }

.nav__item--has-menu { position: relative; }
.nav__menu {
  position: absolute; top: calc(100% - 4px); left: 0; min-width: 230px;
  list-style: none; margin: 0; padding: .45rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav__item--has-menu:hover .nav__menu,
.nav__item--has-menu:focus-within .nav__menu,
.nav__menu.is-open { opacity: 1; visibility: visible; transform: none; }
.nav__menu a { display: block; padding: .55rem .8rem; border-radius: 8px; font-size: .88rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.nav__menu a:hover, .nav__menu a[aria-current] { background: var(--cream); color: var(--bordeaux); }
.nav__meta { display: none; }

.burger {
  display: none; width: 46px; height: 44px; padding: 0; flex: none;
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
}
.burger span { display: block; width: 20px; height: 2px; margin: 4px auto; border-radius: 2px; background: var(--deep-red); transition: transform .25s ease, opacity .25s ease; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ten menu items need ~1220 px (measured, English). Below that: compact sticky
   logo bar + drawer. Keep in step with NAV_BREAK in main.js. */
@media (max-width: 1259px) {
  .masthead { position: sticky; top: 0; }
  .masthead__inner { padding: .6rem 0; }
  .brand { gap: .7rem; }
  .brand__mark { width: 62px; }
  .brand__name { font-size: 1.9rem; }
  .brand__sub { font-size: .72rem; letter-spacing: .12em; margin-top: .3rem; }
  .brand__ornament { display: none; }
  .burger { display: block; }
  .masthead__tools { position: relative; z-index: 75; }

  .navbar { position: static; height: 0; border: 0; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(340px, 88vw); z-index: 70;
    display: flex; flex-direction: column; gap: 1.2rem;
    padding: 5.75rem 1.35rem 2rem;
    background: var(--paper); border-left: 1px solid var(--line); box-shadow: var(--shadow-lg);
    transform: translateX(104%); transition: transform .32s cubic-bezier(.4,0,.2,1);
    overflow-y: auto; visibility: hidden;
  }
  .nav.is-open { transform: none; visibility: visible; }
  .nav__list { flex-direction: column; }
  .nav__link { min-height: 0; padding: .8rem .4rem; border-bottom: 1px solid var(--line-soft); white-space: normal; justify-content: space-between; }
  .nav__item.is-active > .nav__link::after { display: none; }
  .nav__item.is-active > .nav__link { box-shadow: inset 3px 0 0 var(--gold); padding-left: .8rem; }
  .nav__menu { position: static; opacity: 1; visibility: visible; transform: none; display: none; border: 0; box-shadow: none; background: var(--cream); margin: .35rem 0 .5rem; }
  .nav__menu.is-open { display: block; }
  .nav__meta { display: grid; gap: .55rem; font-size: .9rem; }
  .nav__meta a { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink); text-decoration: none; }
  .nav__meta .icon { width: 16px; height: 16px; color: var(--gold); }
  .nav-backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(43, 39, 34, .45); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s; }
  .nav-backdrop.is-open { opacity: 1; visibility: visible; }
  html { scroll-padding-top: 100px; }
}
@media (max-width: 760px) {
  .masthead__phone span { display: none; }
  .masthead__phone { width: 40px; height: 40px; justify-content: center; border: 1px solid var(--line); border-radius: 10px; }
}
@media (max-width: 520px) {
  .brand__mark { width: 50px; }
  .brand__name { font-size: 1.6rem; }
  .brand__sub { font-size: .58rem; letter-spacing: .1em; max-width: 21ch; }
  .masthead__tools { gap: .45rem; }
  .masthead__phone { display: none; }
  .lang-switch a, .lang-switch span { min-width: 32px; min-height: 32px; padding: 0 .4rem; }
}
@media (max-width: 360px) {
  .brand { gap: .5rem; }
  .brand__mark { width: 42px; }
  .brand__name { font-size: 1.38rem; }
  .brand__sub { display: none; }
}

/* ---------- 6. Home hero + founder inset + four blocks ------------------- */
/* round 4: the dancers in orange (cut from the client's own example) stand on the right
   half and fade into the dark stage on the left, as in her mock-up */
.hero { position: relative; isolation: isolate; background: #120a08; color: #fff; overflow: hidden; }
.hero__media { position: absolute; inset: 0 0 0 auto; width: 64%; z-index: -2;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%); mask-image: linear-gradient(90deg, transparent 0, #000 26%); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(18, 10, 8, .9) 0%, rgba(18, 10, 8, .55) 42%, rgba(18, 10, 8, 0) 62%);
}
.hero h1 { text-shadow: 0 2px 22px rgba(0, 0, 0, .55); }
.hero__body { padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(4rem, 9vw, 7.5rem); max-width: 620px; }
.hero__tag {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(.95rem, 1.6vw, 1.15rem);
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold-light); margin: 0 0 .6rem;
}
.hero h1 { color: var(--red-on-dark); font-weight: 600; font-size: clamp(3rem, 8vw, 5.6rem); line-height: 1; margin-bottom: .15em; }
.hero__subtitle {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(1.45rem, 3vw, 2.1rem); color: var(--gold-light); margin: 0 0 .9rem; line-height: 1.2;
}
.hero .ornament { color: var(--gold-light); max-width: 320px; margin-bottom: 1.2rem; }
.hero .ornament > span { background: linear-gradient(90deg, transparent, var(--gold-light)); }
.hero .ornament > span:last-child { background: linear-gradient(90deg, var(--gold-light), transparent); }
.hero__intro { font-size: 1.1rem; color: rgba(255, 255, 255, .92); max-width: 46ch; }
@media (max-width: 760px) {
  .hero__media { width: 100%; -webkit-mask-image: none; mask-image: none; }
  .hero__media img { object-position: 22% 20%; }
  .hero::after { background: linear-gradient(180deg, rgba(18, 10, 8, .35) 0%, rgba(18, 10, 8, .7) 40%, rgba(18, 10, 8, .93) 100%); }
  .hero__body { padding-top: 9rem; }
}

.home-intro { background: var(--cream); padding-bottom: clamp(3rem, 6vw, 5rem); }
/* round 6: the founder inset moved into the hero, so the four blocks use the full width */
.home-intro__grid { display: grid; grid-template-columns: 1fr; }

.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); padding-top: clamp(2.25rem, 4vw, 3rem); }
.pillar {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 1rem 1.2rem 1.4rem; text-decoration: none; color: inherit; position: relative;
}
.pillar + .pillar::before { content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 1px; background: var(--line); }
@media (max-width: 920px) { .pillar + .pillar::before { display: none; } .pillar { border-bottom: 1px solid var(--line-soft); } }
.pillar .icon { width: 50px; height: 50px; color: var(--bordeaux); stroke-width: 1.6; margin-bottom: .7rem; }
.pillar__title { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1.55rem; color: var(--bordeaux); line-height: 1.15; }
.pillar__sub { margin-top: .45rem; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); line-height: 1.6; }
.pillar::after { content: ""; width: 54px; height: 1px; background: var(--gold); margin-top: .9rem; transition: width .25s ease; }
.pillar:hover::after { width: 90px; }
.pillar:hover .pillar__title { color: var(--deep-red); }

/* Founder inset — round 6 (last feedback): "zonder wit, graag laten opgaan in de kleuren
   van de balk". No cream card any more: it sits inside the dark hero with gold lines and
   light text in the hero's own colours.
   Round 7: "slightly smaller and with a black background — now she sits on the back of
   the dancer": the see-through panel is now solid black, so the dancers' backs no longer
   show through behind her, and the photo is a little smaller (see round 8 below). */
.hero > .wrap { position: relative; }
.founder {
  text-align: center; color: #fff;
  background: #000;
  border: 1px solid rgba(220, 194, 122, .38); border-radius: var(--radius-lg);
  padding: 1rem .95rem .9rem;
}
.founder__photo { width: 116px; height: 128px; margin: 0 auto .7rem; border-radius: 14px; padding: 4px; border: 1px solid var(--gold-light); }
.founder__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; border-radius: 10px; }
.founder__name { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1.35rem; color: var(--gold-light); line-height: 1.1; margin: 0; }
.founder__role { font-family: var(--font-display); font-size: .95rem; color: #fff; margin: .2rem 0 .45rem; }
.founder__line { font-family: var(--font-display); font-size: .88rem; line-height: 1.4; color: rgba(255, 255, 255, .78); margin: 0 0 .6rem; }
.hero .founder .ornament { margin: 0 auto; max-width: 140px; }
/* Round 8 (15 Oct 2026): "she wants it on a location with a black background. Now it's
   on the shoulder of the women." The inset no longer stands on the dancers: on every
   screen it sits under the hero text and button, on the black left side of the band,
   with the photo beside the text (the layout phones and tablets already had). */
.founder--hero {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; text-align: left;
  max-width: 420px; margin: calc(-1 * clamp(2rem, 5vw, 3.5rem)) 0 clamp(2rem, 5vw, 3rem);
}
.founder--hero .founder__photo { width: 96px; height: 106px; margin: 0; }
.hero .founder--hero .ornament { margin: 0; }
/* wide screens: close under the button, where the client marked it */
@media (min-width: 1000px) {
  .founder--hero { max-width: 380px; margin-top: calc(2rem - clamp(4rem, 9vw, 7.5rem)); }
}

/* ---------- 7. Inner page header ----------------------------------------- */
.pagehead { position: relative; isolation: isolate; padding: clamp(2.75rem, 6vw, 4.5rem) 0 clamp(2.25rem, 4.5vw, 3.25rem); background: var(--paper); border-bottom: 1px solid var(--line); overflow: hidden; }
.pagehead::before {
  /* a single, subtle lotus watermark — not repeated elsewhere */
  content: ""; position: absolute; right: max(2vw, calc(50% - 640px)); top: 50%; width: 220px; height: 220px; transform: translateY(-50%); z-index: -1; opacity: .09;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23b08d2a' stroke-width='1.2'%3E%3Cpath d='M24 36c-3.5-4.2-5-8.6-5-13.2 0-4.2 1.8-8 5-11.2 3.2 3.2 5 7 5 11.2 0 4.6-1.5 9-5 13.2Z'/%3E%3Cpath d='M21.4 35.2C16 34 11.4 31 8.6 26.6c2.8-1.6 6-2.2 9.4-1.6'/%3E%3Cpath d='M26.6 35.2C32 34 36.6 31 39.4 26.6c-2.8-1.6-6-2.2-9.4-1.6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pagehead h1 { margin-bottom: .2em; }
.pagehead__lede { font-family: var(--font-display); font-size: clamp(1.2rem, 2.2vw, 1.5rem); color: var(--gold-text); max-width: 60ch; line-height: 1.35; }
.crumbs { font-size: .8rem; color: var(--ink-faint); margin-top: 1.1rem; }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--bordeaux); text-decoration: underline; }
.crumbs span[aria-hidden] { margin: 0 .45rem; opacity: .6; }

.pagehead--photo { background: #1a1210; color: #fff; border-bottom: 0; padding: clamp(4rem, 9vw, 6.5rem) 0 clamp(2.5rem, 5vw, 3.5rem); }
.pagehead--photo::before { display: none; }
.pagehead__media { position: absolute; inset: 0; z-index: -2; }
.pagehead__media img { width: 100%; height: 100%; object-fit: cover; }
.pagehead--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(95deg, rgba(20, 12, 10, .88) 0%, rgba(20, 12, 10, .62) 55%, rgba(20, 12, 10, .3) 100%); }
.pagehead--photo h1 { color: #fff; }
.pagehead--photo .pagehead__lede { color: var(--gold-light); }
.pagehead--photo .crumbs, .pagehead--photo .crumbs a { color: rgba(255, 255, 255, .82); }

/* ---------- 8. Split, figures, frames ------------------------------------ */
.split { display: grid; gap: clamp(1.75rem, 4vw, 4rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: center; }
.split--top { align-items: start; }
.split--wide-text { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
@media (max-width: 860px) { .split--wide-text { grid-template-columns: 1fr; } }
.split__media { position: relative; isolation: isolate; margin: 0; }
.split__media img { border-radius: var(--radius-lg); width: 100%; }
/* Gold frame around every photo (round 4: "zo een gouden kader om de foto's, dat mag
   je bij alle foto's doen"). Two shadows draw a thin gold outline shifted to the lower
   right: the first, in the section colour (--frame-bg), hides the inside of the second.
   Unlike a ::before it follows the image only, not the caption under it. */
.split__media img, .photo-row img, .framed img {
  box-shadow: var(--frame-x) var(--frame-x) 0 -1px var(--frame-bg), var(--frame-x) var(--frame-x) 0 0 var(--gold), var(--shadow-md);
}
.split__media a, .framed a { display: block; line-height: 0; }
.section--dark .split__media img { box-shadow: var(--shadow-md); outline: 1px solid var(--gold-light); outline-offset: 7px; }
.split--reverse > :first-child { order: 2; }
@media (max-width: 760px) { .split--reverse > :first-child { order: 0; } }

.figure-caption, figcaption.caption { font-size: .84rem; color: var(--ink-faint); margin-top: .8rem; line-height: 1.5; }
.caption strong { display: block; font-family: var(--font-display); font-size: 1.15rem; font-style: italic; color: var(--bordeaux); font-weight: 600; }

@media (min-width: 900px) { .sticky-col { position: sticky; top: calc(var(--nav-h) + 30px); } }

.photo-row { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.photo-row figure { margin: 0; }
.photo-row img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }
.photo-row--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }

/* the Guru portrait: soft oval in warm gold, a small lotus accent (no palace arch) */
.guru { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: center; }
@media (max-width: 760px) { .guru { grid-template-columns: 1fr; justify-items: center; text-align: center; } .guru .ornament { margin-inline: auto; } }
.guru__frame { position: relative; width: min(300px, 78vw); margin: 0; }
.guru__oval { border-radius: 50%; padding: 8px; border: 1.5px solid var(--gold); background: var(--paper); box-shadow: var(--shadow-md); }
.guru__oval img { width: 100%; aspect-ratio: 604 / 900; object-fit: cover; border-radius: 50%; }
.guru__lotus { position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%); width: 46px; height: 46px; padding: 8px; border-radius: 50%; background: var(--cream); color: var(--gold); border: 1px solid var(--line); }
.guru__title { font-family: var(--font-display); font-size: 1rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-text); margin: 0 0 .3rem; }
.guru__name { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: clamp(1.8rem, 3.4vw, 2.5rem); color: var(--deep-red); line-height: 1.1; margin: 0 0 .3rem; }
.guru__org { font-family: var(--font-display); font-size: 1.25rem; color: var(--ink-soft); margin: 0 0 1.2rem; }

/* a teacher/artist portrait with a two-line caption (Giridhara) */
.portrait-card { background: var(--paper); border: 1px solid var(--gold); border-radius: var(--radius-lg); overflow: hidden; margin: 0;
  box-shadow: var(--frame-x) var(--frame-x) 0 -1px var(--frame-bg), var(--frame-x) var(--frame-x) 0 0 var(--gold), var(--shadow-md); }
.portrait-card img { width: 100%; }
.portrait-card figcaption { padding: 1.15rem 1.35rem 1.3rem; }
.portrait-card__name { display: block; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1.55rem; color: var(--bordeaux); line-height: 1.15; }
.portrait-card__role { display: block; margin-top: .3rem; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text); }

/* ---------- 9. Text components ------------------------------------------- */
.quote {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.35rem, 2.6vw, 1.75rem); line-height: 1.45; color: var(--deep-red);
  border-left: 2px solid var(--gold); padding: .2rem 0 .2rem 1.5rem; margin: 1.6rem 0;
}
.section--dark .quote { color: #fff; border-color: var(--gold-light); }

.statement {
  font-family: var(--font-display); font-style: italic; font-size: clamp(1.25rem, 2.3vw, 1.5rem); line-height: 1.4;
  color: var(--deep-red); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1rem 0; margin: 1.7rem 0;
}
.section--dark .statement { color: #fff; border-color: rgba(220, 194, 122, .35); }

.prose h2 { margin-top: 2.5rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.8rem; }
.prose p, .prose li { color: var(--ink-soft); }

.checklist { list-style: none; padding: 0; margin: 0 0 1.3rem; }
.checklist li { position: relative; padding-left: 1.6rem; margin-bottom: .55rem; color: var(--ink-soft); }
.checklist li::before { content: ""; position: absolute; left: .15rem; top: .62em; width: 7px; height: 7px; transform: rotate(45deg); background: var(--gold); }
.section--dark .checklist li { color: #ead9c4; }

.note { background: var(--paper); border-left: 2px solid var(--gold); padding: 1rem 1.3rem; border-radius: 0 10px 10px 0; font-size: .95rem; color: var(--ink-soft); }
.section--paper .note { background: var(--cream); }

.sargam {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  letter-spacing: .06em; color: var(--deep-red); margin: .4rem 0 0;
}
.sargam span { color: var(--gold); margin: 0 .35rem; }

/* ---------- 10. Cards, stages, boxes ------------------------------------- */
.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

.box { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.35rem, 3vw, 2rem); box-shadow: var(--shadow-sm); }
.section--paper .box { background: var(--cream); }
.box h3 { margin-top: 0; }
.box__head { display: flex; align-items: center; gap: .9rem; margin-bottom: .9rem; }
.box__head h3 { margin: 0; }
.box__head .icon { width: 40px; height: 40px; flex: none; color: var(--bordeaux); stroke-width: 1.6; }

.stages { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.stage { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.5rem 1.5rem 1.4rem; }
.stage__num { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--gold); color: var(--bordeaux); font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1.4rem; margin-bottom: .8rem; }
.stage h3 { margin: 0 0 .7rem; }
.stage .checklist { margin-bottom: 0; }

.fees { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); margin: 1.1rem 0 1.3rem; }
.fee { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .15rem; }
.section--paper .fee { background: var(--cream); }
.fee__who { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.fee__price { font-family: var(--font-display); font-size: 2.1rem; font-weight: 600; line-height: 1.1; color: var(--bordeaux); }
.fee__per { font-size: .9rem; color: var(--ink-soft); }

.slots { list-style: none; margin: 1.2rem 0; padding: 0; display: grid; gap: .7rem; }
.slot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .2rem 1rem; background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--bordeaux); border-radius: 0 var(--radius) var(--radius) 0; padding: .85rem 1.1rem; }
.section--paper .slot { background: var(--cream); }
.slot span { font-weight: 700; color: var(--bordeaux); white-space: nowrap; }

.duo { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

/* pictograms for clothing / what to bring */
.pictos { list-style: none; margin: 1rem 0 1.4rem; padding: 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.picto { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem .7rem .9rem; font-size: .9rem; color: var(--ink-soft); line-height: 1.35; }
.section--paper .picto { background: var(--cream); }
.picto .icon { width: 40px; height: 40px; color: var(--bordeaux); stroke-width: 1.6; }
.picto--white .icon { color: var(--gold); }

/* "Lessen op maat" (client's mock-up) */
.features { display: grid; gap: 1.3rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); margin: 1.6rem 0 0; }
.feature { display: flex; gap: .9rem; align-items: flex-start; }
.feature__icon { width: 54px; height: 54px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); color: var(--bordeaux); }
.feature__icon .icon { width: 26px; height: 26px; stroke-width: 1.7; }
.feature h3 { font-size: 1.3rem; margin: .1rem 0 .2rem; }
.feature p { font-size: .94rem; color: var(--ink-soft); margin: 0; }

.contact-box { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.6rem; margin-top: 2rem; padding: 1.4rem 1.6rem; background: var(--paper); border: 1px solid var(--gold); border-radius: var(--radius-lg); }
.contact-box__icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); color: var(--gold-text); flex: none; }
.contact-box__icon .icon { width: 30px; height: 30px; }
.contact-box__text { flex: 1 1 260px; }
.contact-box__text h3 { margin: 0 0 .2rem; color: var(--ink); }
.contact-box__text p { margin: 0; color: var(--ink-soft); }

/* agenda cards and posts */
.event { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.event + .event { margin-top: clamp(1.25rem, 2.5vw, 2rem); }
@media (max-width: 760px) { .event { grid-template-columns: 1fr; } }
.event__poster { display: block; background: var(--cream-deep); padding: 1rem; line-height: 0; }
.event__poster img { width: 100%; height: auto; border-radius: 6px; box-shadow: var(--shadow-sm); }
.event__body { padding: clamp(1.3rem, 3vw, 2rem); display: flex; flex-direction: column; }
.event__date { display: inline-flex; align-items: center; gap: .5rem; font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text); margin-bottom: .5rem; }
.event__date .icon { width: 18px; height: 18px; color: var(--gold); }
.event__body h2, .event__body h3 { margin: 0 0 .5rem; }
.event__facts { list-style: none; margin: .6rem 0 1rem; padding: 0; display: grid; gap: .35rem; font-size: .95rem; color: var(--ink-soft); }
.event__facts strong { color: var(--ink); }
.event__body .btn-row { margin-top: auto; padding-top: 1rem; }
.event__extra { font-size: .88rem; margin-top: .7rem; }

.event-mini { display: flex; gap: 1rem; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem; text-decoration: none; color: inherit; transition: border-color .2s ease, box-shadow .2s ease; }
.event-mini:hover { border-color: var(--gold); box-shadow: var(--shadow-sm); }
.event-mini img { width: 84px; height: 112px; object-fit: cover; object-position: top; border-radius: 6px; flex: none; }
.event-mini__date { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); }
.event-mini__title { display: block; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1.4rem; color: var(--bordeaux); line-height: 1.15; margin: .15rem 0; }
.event-mini__where { font-size: .88rem; color: var(--ink-soft); }

.empty-note { text-align: center; font-family: var(--font-display); font-style: italic; font-size: clamp(1.35rem, 2.6vw, 1.75rem); color: var(--deep-red); padding: 2.5rem 1rem; border: 1px dashed var(--line); border-radius: var(--radius-lg); background: var(--paper); }

.cat-nav { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.cat-nav a { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem 1rem; border: 1px solid var(--line); border-radius: 999px; font-size: .84rem; font-weight: 700; color: var(--ink); text-decoration: none; background: var(--paper); }
.cat-nav a:hover { border-color: var(--bordeaux); color: var(--bordeaux); }
.cat-nav .icon { width: 18px; height: 18px; color: var(--gold); }

.post { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.5rem 1.5rem 1.4rem; box-shadow: var(--shadow-sm); }
.post__cat { display: inline-flex; align-items: center; gap: .5rem; font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text); margin-bottom: .6rem; }
.post__cat .icon { width: 22px; height: 22px; color: var(--bordeaux); }
.post h3 { margin: 0 0 .5rem; color: var(--deep-red); font-style: italic; font-weight: 600; }
.post p { color: var(--ink-soft); font-size: .96rem; }
.post .link-more { margin-top: auto; padding-top: .9rem; align-self: flex-start; }

/* ---------- 11. Posters, videos ------------------------------------------ */
.poster-grid { display: grid; gap: 1.3rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.poster { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--gold); background: var(--paper); box-shadow: var(--shadow-sm); }
.poster a { display: block; line-height: 0; }
.poster img { width: 100%; transition: transform .4s ease; }
.poster:hover img { transform: scale(1.02); }
.poster figcaption { padding: .7rem .9rem .85rem; font-size: .86rem; font-weight: 700; color: var(--ink); line-height: 1.35; }

.video-grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.video { margin: 0; }
.video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #120c0a; object-fit: contain; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.video figcaption { margin-top: .8rem; font-weight: 700; color: var(--ink); line-height: 1.4; }
.video figcaption span { display: block; font-weight: 400; font-size: .88rem; color: var(--ink-faint); }
.section--dark .video figcaption { color: #fff; }
.section--dark .video figcaption span { color: #e0cdb5; }

/* ---------- 12. Contact, form, map --------------------------------------- */
.contact-grid { display: grid; gap: clamp(1.75rem, 4vw, 3.25rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); align-items: start; }
.info-list { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.info-list li { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line-soft); }
.info-list li:last-child { border-bottom: 0; }
.info-list__icon { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); color: var(--bordeaux); background: var(--paper); }
.info-list__icon .icon { width: 20px; height: 20px; }
.info-list__label { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.info-list__value { display: block; font-weight: 700; color: var(--ink); }
.info-list a { color: var(--ink); text-decoration: none; }
.info-list a:hover { color: var(--bordeaux); }
address { font-style: normal; }

.form-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.4rem, 3.5vw, 2.4rem); box-shadow: var(--shadow-sm); }
.form-card h2, .form-card h3 { margin-top: 0; }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .4rem; }
.field input, .field textarea, .field select {
  width: 100%; padding: .8rem 1rem; font: inherit; font-size: .97rem; color: var(--ink);
  background: var(--cream); border: 1px solid var(--line-soft); border-radius: 10px;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--gold); background: #fff; }
.field textarea { min-height: 140px; resize: vertical; }
.field--row { display: grid; gap: 0 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.form-note { font-size: .82rem; color: var(--ink-faint); margin-top: 1rem; }
.form-status { margin-top: 1rem; padding: .85rem 1.1rem; border-radius: 10px; font-size: .92rem; display: none; }
.form-status.is-visible { display: block; }
.form-status--ok { background: var(--gold-soft); color: var(--gold-text); }
.form-status--err { background: rgba(142, 27, 44, .08); color: var(--bordeaux); }

.map-frame { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); line-height: 0; background: var(--cream-deep); }
.map-frame iframe { width: 100%; height: 340px; border: 0; }
.map-link { margin-top: .7rem; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- 13. Closing call-to-action ----------------------------------- */
.cta { background: var(--paper); border-top: 1px solid var(--line); padding: clamp(3.25rem, 7vw, 5rem) 0; text-align: center; }
.cta__inner { max-width: 760px; }
.cta .ornament { margin-bottom: 1.2rem; }
.cta .eyebrow { justify-content: center; }
.cta .eyebrow::after { content: ""; width: 26px; height: 1px; background: var(--gold); }
.cta h2 { font-size: clamp(1.9rem, 3.8vw, 2.7rem); }
.cta p { color: var(--ink-soft); max-width: 56ch; margin-inline: auto; }

/* ---------- 14. Footer --------------------------------------------------- */
.footer { background: var(--deep-red); color: #ecdcc6; border-top: 3px solid var(--gold); padding: clamp(3rem, 6vw, 4.5rem) 0 0; font-size: .93rem; }
.footer__grid { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__h { font-family: var(--font-body); font-style: normal; font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-light); margin: 0 0 1rem; }
.footer__h--gap { margin-top: 1.8rem; }
.footer a { color: #f6ead8; text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: .55rem; }
.footer__menu { columns: 2; column-gap: 1.5rem; }
.footer__logo { display: inline-block; background: var(--cream); border-radius: var(--radius-lg); padding: .8rem 1rem; line-height: 0; border: 1px solid var(--gold); }
.footer__logo img { width: 128px; }
.footer__sub { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-light); margin: 1rem 0 .4rem; }
.footer__about { color: #e2cdb4; max-width: 40ch; }
.footer__bottom { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding: 1.3rem 0; border-top: 1px solid rgba(255, 255, 255, .14); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; font-size: .82rem; color: #d9c2a6; }

/* ---------- 15. Reveal + utilities --------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
.text-center { text-align: center; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: clamp(2rem, 4vw, 3rem); }
.anchor-target { scroll-margin-top: calc(var(--nav-h) + 24px); }
.sr-only input { width: 1px; height: 1px; }

/* ---------- 16. Phone refinements (measured at 390 / 320 px) ------------- */
@media (max-width: 1259px) {
  /* the logo bar must stay above the drawer, or its close button is covered */
  .masthead { z-index: 80; }
}
@media (max-width: 920px) {
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillar { padding: 1.1rem .6rem 1.2rem; }
  .pillar .icon { width: 42px; height: 42px; }
  .pillar__title { font-size: 1.3rem; }
  .pillar__sub { font-size: .64rem; letter-spacing: .12em; }
}
@media (max-width: 560px) {
  .hero__tag { font-size: .82rem; letter-spacing: .12em; }
}
@media (max-width: 520px) {
  .brand__sub { font-family: var(--font-body); font-weight: 700; font-size: .52rem; letter-spacing: .07em; max-width: 30ch; line-height: 1.45; }
}

/* ---------- 17. Round 4 (October 2026) ------------------------------------ */
/* Home: a real welcome in red, larger than a section label */
.welcome { font-size: clamp(2.6rem, 5.4vw, 3.9rem); font-weight: 600; color: var(--red); line-height: 1.05; margin-bottom: .15em; }
.welcome__ornament { margin: .5rem 0 .9rem; max-width: 280px; }
.welcome__sub { font-family: var(--font-display); font-style: italic; font-size: clamp(1.3rem, 2.4vw, 1.6rem); color: var(--gold-text); line-height: 1.3; margin-bottom: 1.1rem; }

/* Home: Agenda and Meer beleven, each in a frame ("in een kadertje") */
.home-boxes { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.home-box {
  display: flex; flex-direction: column; gap: 1.2rem;
  background: var(--paper); border: 1px solid var(--gold); border-radius: var(--radius-lg);
  outline: 1px solid var(--line); outline-offset: -9px;
  padding: clamp(1.5rem, 3.5vw, 2.3rem); box-shadow: var(--shadow-sm);
}
.home-box__head { display: flex; align-items: center; gap: 1rem; }
.home-box__head > .icon { width: 46px; height: 46px; flex: none; color: var(--bordeaux); stroke-width: 1.6; }
.home-box__head .eyebrow { margin-bottom: .2rem; }
.home-box__head h2 { margin: 0; font-size: clamp(1.9rem, 3.4vw, 2.5rem); }
.home-box__list { display: grid; gap: .8rem; }
.home-box .event-mini { background: var(--cream); }
.home-box__empty { font-family: var(--font-display); font-style: italic; font-size: 1.3rem; color: var(--deep-red); }
.home-box__posts { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.home-box__posts a { display: block; padding: .9rem 1.1rem; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: inherit; transition: border-color .2s ease, box-shadow .2s ease; }
.home-box__posts a:hover { border-color: var(--gold); box-shadow: var(--shadow-sm); }
.home-box__cat { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); }
.home-box__title { display: block; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1.4rem; line-height: 1.2; color: var(--bordeaux); margin-top: .15rem; }
.home-box > .btn { align-self: flex-start; margin-top: auto; }

/* inner page header with a framed photo or flyer beside the title */
.pagehead--side::before { display: none; }
.pagehead--side .pagehead__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.pagehead__side { margin: 0 var(--frame-x) var(--frame-x) 0; justify-self: end; --frame-bg: var(--paper); }
.pagehead__side img { width: auto; max-width: clamp(160px, 20vw, 250px); max-height: 270px; border-radius: var(--radius); }
.pagehead__side--poster img { border-radius: 6px; }
.pagehead__side figcaption { margin-top: calc(var(--frame-x) + .5rem); font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1.15rem; color: var(--bordeaux); text-align: center; line-height: 1.2; }
@media (max-width: 700px) {
  .pagehead--side .pagehead__body { grid-template-columns: 1fr; }
  .pagehead__side { justify-self: start; }
  .pagehead__side img { max-width: min(230px, 70vw); max-height: 300px; }
}

/* Zang & Muziek: the header title in red ("balk zang en muziek in rode letters") */
.page-zang .pagehead--photo h1, .page-bharatanatyam .pagehead--photo h1, .page-lessen .pagehead--photo h1, .page-werk .pagehead--photo h1, .page-agenda .pagehead--photo h1 { color: var(--red-on-dark); font-weight: 600; text-shadow: 0 2px 18px rgba(0, 0, 0, .5); }

/* the sargam syllables dance a little; a small harmonium beside them */
.sargam-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; margin-top: .4rem; }
.sargam { margin: 0; }
.sargam__syl { display: inline-block; margin-right: .5em; animation: sargam-dance 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * .2s); }
.sargam__syl:last-child { margin-right: 0; }
.sargam__syl:nth-child(odd) { color: var(--gold-text); }
@keyframes sargam-dance {
  0%, 100% { transform: translateY(0) rotate(0); }
  25%      { transform: translateY(-.3em) rotate(-5deg); }
  50%      { transform: translateY(0) rotate(0); }
  75%      { transform: translateY(.12em) rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) { .sargam__syl { animation: none; } }
.harmonium-art { width: 118px; height: auto; flex: none; }

/* lesson levels: "alle leeftijden" under the level name */
.slot strong em { display: block; font-style: normal; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text); }

/* Bharatanatyam: certificate photo beside the text about partial certificates */
.certificate { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.certificate > p { font-size: 1.1rem; color: var(--ink-soft); }
.certificate__img { margin: 0 var(--frame-x) var(--frame-x) 0; }
.certificate__img img { width: 100%; border-radius: var(--radius); }
@media (max-width: 760px) { .certificate { grid-template-columns: 1fr; } }

/* Over Sitrawatie: four generations of teachers */
.generations figcaption strong { margin-bottom: .3rem; }
.generations__list { margin: .3rem 0 0; padding-left: 1.3rem; }
.generations__list li { margin-bottom: .2rem; color: var(--ink-soft); }

/* figure captions under framed photos sit below the frame */
.split__media > figcaption, .photo-row figcaption { margin-top: calc(var(--frame-x) + .55rem); }

/* Lessen: download of the registration form & terms (client PDF) */
.download { display: inline-flex; align-items: center; gap: .9rem; margin-top: 1rem; padding: .9rem 1.2rem .9rem .9rem; background: var(--paper); border: 1px solid var(--gold); border-radius: var(--radius); text-decoration: none; color: inherit; transition: box-shadow .2s ease, transform .2s ease; }
.download:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); color: inherit; }
.download__icon { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--bordeaux); color: #fff; }
.download__icon .icon { width: 22px; height: 22px; }
.download__title { display: block; font-weight: 700; color: var(--bordeaux); }
.download__meta { display: block; font-size: .82rem; color: var(--ink-faint); }

/* ---------- Round 5 (client feedback 8 Oct 2026) ---------------------------- */
/* banners with a flyer/portrait beside the title are now coloured like the others,
   with the image running blurred through the background ("het witte vlak inkleuren") */
.pagehead--blur .pagehead__media img { filter: blur(3px) saturate(1.1); transform: scale(1.04); }
.pagehead--blur::after { background: linear-gradient(95deg, rgba(20, 12, 10, .9) 0%, rgba(20, 12, 10, .7) 45%, rgba(20, 12, 10, .35) 100%); }
.pagehead--photo.pagehead--side .pagehead__side { --frame-bg: #24160f; }
.pagehead--photo .pagehead__side figcaption { color: var(--gold-light); }
/* Contact: no photo, a calm bordeaux band with the elephant logo in a cream medallion */
.pagehead--brand { background: linear-gradient(115deg, var(--deep-red) 0%, #4a0f17 60%, #2f0a10 100%); }
.pagehead--brand::after { background: none; }
.pagehead__brand {
  position: absolute; z-index: 0; top: 50%; right: max(4vw, calc(50% - 600px)); transform: translateY(-50%);
  width: clamp(120px, 15vw, 190px); aspect-ratio: 1; border-radius: 50%; padding: clamp(14px, 1.8vw, 22px);
  background: var(--cream); border: 2px solid var(--gold); box-shadow: 0 0 0 6px rgba(176, 141, 42, .25), var(--shadow-md);
  display: grid; place-items: center;
}
.pagehead__brand img { width: 100%; height: auto; }
@media (max-width: 640px) { .pagehead__brand { width: 92px; padding: 10px; top: 1.2rem; transform: none; right: 1rem; } }
/* Lessen: every lesson type gets a red heading like "Groepslessen" */
h3.lesson-type { color: var(--bordeaux); font-style: italic; font-size: clamp(1.5rem, 2.6vw, 1.85rem); }
.box__head h3.lesson-type { color: var(--bordeaux); }
/* the clothing illustration under the dress code */
.dresscode { max-width: 330px; margin: 1.6rem 0 0; }
.dresscode img { border-radius: var(--radius); }
.dresscode .caption { margin-top: calc(var(--frame-x) + .6rem); }
/* submenus under every chapter: the last ones open to the left so they stay on screen */
.nav__item--has-menu:nth-last-child(-n+3) .nav__menu { left: auto; right: 0; }
.nav__menu { min-width: 290px; }
.nav__menu-pdf { font-size: .66rem; font-weight: 800; letter-spacing: .08em; color: var(--gold-text); border: 1px solid var(--gold); border-radius: 4px; padding: 0 .3rem; margin-left: .3rem; vertical-align: 1px; }
/* ten chapters with a submenu arrow: a little less space per item on narrower desktops (measured: English +12 px at 1260) */
@media (min-width: 1260px) and (max-width: 1439px) { .nav__link { padding: 0 .43rem; } .nav__item.is-active > .nav__link::after { left: .43rem; right: .43rem; } }