/* =========================================================================
   YERAZ Dansstudio Nederland - landing page
   Layout taken from the Lovable version, brought back to the brand
   palette and the studio's own style. Self-hosted fonts: no request to
   Google, so no cookie banner needed.
   ========================================================================= */

/* ---------- fonts ---------- */
@font-face{font-family:'Libre Baskerville';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/libre-baskerville-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}
@font-face{font-family:'Libre Baskerville';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/libre-baskerville-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}
@font-face{font-family:'Libre Baskerville';font-style:italic;font-weight:400;font-display:swap;
  src:url('../fonts/libre-baskerville-400-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/ibm-plex-sans-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/ibm-plex-sans-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/ibm-plex-sans-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}

/* ---------- tokens ---------- */
:root{
  /* brand colours as supplied */
  --bordeaux:#4C000C;      /* brand colour Granaatappel Bordeaux (pomegranate burgundy) */
  --creme:#F4ECDC;         /* brand colour Warm Crème (warm cream) */
  --oudroze:#9C5C54;       /* brand colour Oudroze (old rose) */
  --goud:#E8C890;          /* brand colour Klassiek Goud (classic gold) */

  --page:#FCF7F1;
  --card:#FFFDFA;
  --ink:#241318;
  --ink-soft:#6B5450;
  --ink-faint:#8A716C;
  --line:#E3D3C9;
  --line-soft:#EFE3DA;

  --primary:#7C0A1E;        /* buttons: livelier than #4C000C, same family */
  --primary-hover:#5E0616;
  --primary-deep:var(--bordeaux);

  --display:'Libre Baskerville',Georgia,'Times New Roman',serif;
  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  --wrap:1240px;
  --gutter:clamp(20px,4vw,48px);
  --r:8px;
  --r-lg:12px;
  --pill:999px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
/* don't let anchor targets land right under the header */
[id]{scroll-margin-top:clamp(80px,9vw,110px)}
body{
  position:relative;margin:0;background:var(--page);color:var(--ink);
  font-family:var(--sans);font-size:clamp(15px,.3vw + 14px,16px);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip;
  display:flex;flex-direction:column;min-height:100svh;min-height:100vh;
}
img,svg{max-width:100%;height:auto;display:block}
figure{margin:0}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:400;line-height:1.12}
p{margin:0}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:6px}
.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}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}

/* labels in capitals - the same across the whole page */
.label{
  font-family:var(--sans);font-size:clamp(10px,.24vw + 9px,11.5px);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--oudroze);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  font-family:var(--sans);font-weight:600;font-size:clamp(14px,.3vw + 13px,15.5px);
  padding:clamp(13px,1.1vw,17px) clamp(22px,2.2vw,32px);
  border-radius:var(--pill);border:1px solid transparent;cursor:pointer;white-space:nowrap;
  background:var(--primary);color:#fff;
  transition:background .2s ease,transform .2s ease,box-shadow .2s ease;
  box-shadow:none;
}
.btn:hover{background:var(--primary-hover);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn .arrow{transition:transform .2s ease}
.btn:hover .arrow{transform:translateX(4px)}
.btn--dark{background:var(--primary-deep)}
.btn--dark:hover{background:#6A0714}
.btn--lg{font-size:clamp(15px,.4vw + 14px,17px);padding:clamp(15px,1.3vw,19px) clamp(26px,2.6vw,38px)}
.btn--xl{font-size:clamp(17px,.5vw + 15px,20px);
  padding:clamp(19px,1.8vw,26px) clamp(38px,4.4vw,62px)}

/* ---------- decorative silk ribbon ---------- */
.silk{position:absolute;pointer-events:none;user-select:none;z-index:0}
/* the ribbon runs across the full width, as in the design */
.silk--top{
  /* stays in the top-right corner, fades out before it reaches the heading or the card */
  top:-58px;right:-28px;width:min(54%,740px);opacity:.55;
  transform:rotate(-6deg);transform-origin:top right;
  -webkit-mask-image:linear-gradient(198deg,#000 28%,rgba(0,0,0,.34) 58%,transparent 82%);
  mask-image:linear-gradient(198deg,#000 28%,rgba(0,0,0,.34) 58%,transparent 82%);
}
@media (max-width:700px){.silk--top{top:-34px;width:78%}}
/* The silk ribbon sits in the footer as a soft background. An oval mask lets
   it fade out on all sides, so there is never a hard edge. */
.site-foot__silk{
  position:absolute;left:50%;bottom:-26%;translate:-50% 0;
  width:min(126%,1720px);max-width:none;height:auto;z-index:0;opacity:.24;
  pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 58% 70% at 50% 62%,#000 26%,rgba(0,0,0,.4) 62%,transparent 100%);
  mask-image:radial-gradient(ellipse 58% 70% at 50% 62%,#000 26%,rgba(0,0,0,.4) 62%,transparent 100%);
}
@media (max-width:700px){.site-foot__silk{opacity:.2;width:200%}}
@media (max-width:700px){.silk{opacity:.3}}

/* =========================================================================
   HEADER
   ========================================================================= */
.topbar{position:relative;z-index:3;padding-block:clamp(16px,1.8vw,24px) 10px}
.topbar__inner{display:flex;align-items:center;gap:clamp(16px,2vw,28px)}
.brand{display:flex;align-items:center;gap:13px;flex:none}
.brand__mark{width:clamp(48px,4.2vw,58px);flex:none}
body.v-grand .brand__mark{width:clamp(62px,5.6vw,80px)}
body.v-grand .brand__name{font-size:clamp(22px,1.7vw,28px);letter-spacing:.16em}
body.v-grand .brand__sub{font-size:11px;letter-spacing:.22em}
.brand__text{display:grid;gap:1px}
.brand__name{font-family:var(--display);font-size:clamp(18px,1.3vw,22px);line-height:1;
  letter-spacing:.14em;color:var(--bordeaux)}
.brand__sub{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--oudroze)}

.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(18px,2vw,30px)}
.nav__links{display:inline-flex;align-items:center;gap:clamp(18px,2vw,30px)}
.nav a{font-size:14.5px;transition:color .18s ease}
.nav a:hover{}
@media (max-width:860px){.nav__links{display:none}}
/* on narrow screens the header must fit on one line */
@media (max-width:560px){
  .topbar__inner{gap:12px}
  .brand__mark{width:40px}
  .brand__sub{display:none}
  .brand__name{font-size:19px}
  .topbar .btn{padding:11px 17px;font-size:13.5px;box-shadow:none}
}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{position:relative;z-index:1;padding-block:clamp(24px,3.4vw,48px) clamp(36px,4vw,60px)}
.hero__grid{display:grid;gap:clamp(28px,3vw,46px)}
@media (min-width:1000px){
  .hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,.94fr);align-items:start;
    gap:clamp(32px,3.4vw,58px)}
}

/* top line: not a pill but a short dash and text - calmer and more distinctive */
.eyebrow{
  display:flex;align-items:center;gap:14px;margin:0;
  font-family:var(--sans);font-size:clamp(10.5px,.24vw + 9.5px,12px);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--oudroze);
}
.eyebrow__rule{display:block;width:clamp(26px,3vw,46px);height:1px;background:var(--goud);flex:none}

/* title */
.hero__title{
  margin-top:clamp(18px,2vw,26px);
  font-size:clamp(2.6rem,6.2vw,4.5rem);line-height:1.06;letter-spacing:-.012em;
}
.hero__title em{display:block;font-style:italic;color:var(--bordeaux)}

.rule{border:0;border-top:1px solid var(--line-soft);margin:clamp(24px,2.8vw,38px) 0}

/* four columns with the key details */
.specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.2vw,26px)}
@media (min-width:620px){.specs{grid-template-columns:repeat(4,minmax(0,1fr))}}
.spec{display:grid;gap:9px;align-content:start}
.spec .label{white-space:nowrap}
.spec__value{font-size:clamp(14px,.3vw + 13px,15.5px);font-weight:500;line-height:1.62;
  color:var(--ink)}
.spec__value span{display:block}
.spec__value .dim{font-weight:400;color:var(--ink);opacity:.78}
/* target group in capitals, as in the design */
.spec__value--caps{font-size:clamp(12px,.2vw + 11.2px,13px);letter-spacing:.02em;
  text-transform:uppercase;font-weight:600;line-height:1.6}

/* teacher */
.docent{display:flex;align-items:center;gap:14px}
.docent__avatar{
  width:clamp(52px,4.4vw,62px);height:clamp(52px,4.4vw,62px);flex:none;
  border-radius:50%;overflow:hidden;background:var(--creme);
  border:1px solid var(--line);
}
.docent__avatar picture{display:block;width:100%;height:100%}
.docent__avatar img{width:100%;height:100%;object-fit:cover}
.docent__text{display:grid;gap:3px}
.docent__name{font-size:clamp(15px,.35vw + 14px,17px);font-weight:600}

.hero__cta{margin-top:clamp(24px,2.8vw,34px)}

/* =========================================================================
   CARD ON THE RIGHT
   ========================================================================= */
.offer{
  display:grid;overflow:hidden;background:var(--card);
  border:1px solid var(--line-soft);border-radius:var(--r-lg);
  box-shadow:0 18px 40px -34px rgba(76,0,12,.3);
}
@media (min-width:560px){.offer{grid-template-columns:minmax(0,.82fr) minmax(0,1fr)}}

.offer__photo{position:relative;min-height:260px;background:var(--creme)}
.offer__photo picture{position:absolute;inset:0;display:block}
.offer__photo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;
}
.offer__caption{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:clamp(16px,1.8vw,22px);color:#fff;
  background:linear-gradient(to top,rgba(30,6,10,.82),rgba(30,6,10,.35) 55%,transparent);
}
.offer__caption strong{
  display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(18px,1.5vw,23px);line-height:1.2;
}
.offer__caption span{display:block;margin-top:5px;font-size:13px;opacity:.9}

.offer__body{padding:clamp(20px,2.2vw,30px);display:grid;align-content:start;gap:clamp(14px,1.4vw,18px)}
.offer__title{font-size:clamp(1.5rem,2.1vw,2rem);line-height:1.16}
.offer__note{font-size:14.5px;color:var(--ink-soft);line-height:1.55}

.facts{display:grid;gap:10px}
.fact{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;border:1px solid var(--line-soft);border-radius:var(--r);
  background:#fff;
}
.fact__icon{
  width:32px;height:32px;flex:none;display:grid;place-items:center;
  border-radius:50%;background:var(--creme);color:var(--bordeaux);
}
.fact__icon svg{width:18px;height:18px}
.fact__text{display:grid;gap:1px;min-width:0}
.fact__value{font-size:14.5px;font-weight:500}

.offer .btn{width:100%;margin-top:4px}

/* where to find us */
.findus{
  margin-top:clamp(14px,1.6vw,20px);
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:clamp(14px,1.6vw,20px) clamp(16px,1.8vw,24px);
  border:1px solid var(--line-soft);border-radius:var(--r-lg);background:var(--card);
}
.findus__text{display:grid;gap:3px}
.findus__place{font-size:15px;font-weight:600}
.socials{margin-left:auto;display:flex;align-items:center;gap:10px}
.socials a{
  width:40px;height:40px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line);color:var(--bordeaux);
  transition:background .18s ease,transform .18s ease,border-color .18s ease;
}
.socials a:hover{background:var(--creme);border-color:var(--oudroze);transform:translateY(-2px)}
.socials svg{width:17px;height:17px}

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-foot{
  position:relative;z-index:2;margin-top:auto;overflow:hidden;
  padding-block:clamp(34px,4.4vw,64px);text-align:center;
}
.site-foot > .wrap{position:relative;z-index:1}
/* full logo mark plus wordmark in the footer, so narrower and taller */
.site-foot__logo{width:clamp(104px,9vw,132px);margin:0 auto clamp(14px,1.6vw,18px)}
/* footer: only icons and a copyright line */
.site-foot__icons{display:flex;justify-content:center;align-items:center;gap:12px}
.site-foot__icons a,.site-foot__icons .soon{
  width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line);color:var(--bordeaux);
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.site-foot__icons a:hover{background:var(--creme);border-color:var(--oudroze);
  transform:translateY(-2px)}
.site-foot__icons a:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.site-foot__icons .soon{opacity:.42;cursor:default}
.site-foot__icons svg{width:18px;height:18px}
.site-foot__copy{
  margin-top:clamp(16px,2vw,22px);font-size:12.5px;color:var(--ink-faint);
  letter-spacing:.02em;
}
.site-foot__copy a{color:var(--ink-faint);text-decoration:none}
.site-foot__copy a:hover{color:var(--bordeaux);text-decoration:underline}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* =========================================================================
   SIGN-UP PAGE
   ========================================================================= */
.page-head{position:relative;z-index:1;padding-block:clamp(20px,3vw,44px) 0}
.form-col{width:100%;max-width:780px;margin-inline:auto}

.page-title{font-size:clamp(2.4rem,5.4vw,3.9rem);line-height:1.08;letter-spacing:-.015em}
.page-intro{margin-top:clamp(14px,1.6vw,20px);color:var(--ink-soft);font-size:clamp(15px,.3vw + 14px,16.5px)}
.page-intro + .page-intro{margin-top:8px}

.card{
  background:transparent;border:0;border-radius:0;padding:0;box-shadow:none;
}
.card + .card{margin-top:clamp(34px,4.4vw,58px)}
.card + .card{margin-top:clamp(20px,2.4vw,32px)}
.form-section{position:relative;z-index:1;padding-block:clamp(24px,3vw,40px) clamp(30px,4vw,56px)}

/* choice between a trial lesson and enrolling straight away */
.choices{display:grid;gap:14px;margin-bottom:clamp(20px,2.4vw,30px)}
@media (min-width:640px){.choices{grid-template-columns:1fr 1fr;gap:16px}}
.choice{position:relative;display:block;cursor:pointer}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice__box{
  height:100%;display:grid;gap:7px;align-content:start;
  padding:clamp(14px,1.6vw,18px) 2px clamp(16px,1.8vw,20px);
  border-bottom:1px solid var(--line);
  transition:border-color .2s ease;
}
.choice:hover .choice__box{border-color:var(--oudroze)}
.choice input:focus-visible + .choice__box{outline:2px solid var(--primary);outline-offset:4px}
.choice input:checked + .choice__box{border-color:var(--primary);border-bottom-width:2px}
.choice__head{display:flex;align-items:flex-start;gap:11px}
.choice__dot{
  flex:none;width:17px;height:17px;margin-top:3px;border-radius:50%;
  border:1.5px solid var(--line);background:#fff;transition:border-color .18s ease;
  display:grid;place-items:center;
}
.choice__dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--primary);
  transform:scale(0);transition:transform .18s ease}
.choice input:checked + .choice__box .choice__dot{border-color:var(--primary)}
.choice input:checked + .choice__box .choice__dot::after{transform:scale(1)}
.choice__title{font-family:var(--display);font-size:clamp(1.02rem,1.2vw,1.2rem);line-height:1.3}
.choice__note{font-size:14px;color:var(--ink-soft);line-height:1.5}

/* fields */
.fields{display:grid;gap:clamp(20px,2.4vw,30px)}
@media (min-width:640px){.fields{grid-template-columns:1fr 1fr;column-gap:clamp(26px,3vw,44px)}
  .field--wide{grid-column:1/-1}}
.field{display:grid;gap:5px}
.field__label{font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--oudroze)}
.field__label .req{color:var(--primary)}
.field input{
  width:100%;font-family:var(--display);font-size:clamp(16px,.3vw + 15px,17.5px);
  color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--line);border-radius:0;
  padding:9px 2px 11px;
  transition:border-color .2s ease;
}
.field input::placeholder{color:#B6A09B;font-family:var(--sans);font-size:14.5px}
.field input:hover{border-color:var(--oudroze)}
.field input:focus{outline:none;border-color:var(--primary);border-bottom-width:2px;
  padding-bottom:10px}
.field input[aria-invalid="true"]{border-color:#B3261E}
.field__error{display:none;font-size:12.5px;color:#B3261E}
.field input[aria-invalid="true"] ~ .field__error{display:block}

/* consent checkboxes */
.consents{display:grid;gap:13px;margin-top:clamp(18px,2vw,24px)}
.consent{display:flex;align-items:flex-start;gap:11px;cursor:pointer;
  font-size:14.5px;line-height:1.55;color:var(--ink-soft)}
.consent input{position:absolute;opacity:0;width:0;height:0}
.consent__box{
  flex:none;width:20px;height:20px;margin-top:1px;border-radius:50%;
  border:1px solid var(--line);background:transparent;display:grid;place-items:center;
  color:#fff;transition:background .18s ease,border-color .18s ease;
}
.consent__box svg{width:12px;height:12px;opacity:0;transform:scale(.6);
  transition:opacity .16s ease,transform .16s ease}
.consent input:checked + .consent__box{background:var(--primary);border-color:var(--primary)}
.consent input:checked + .consent__box svg{opacity:1;transform:none}
.consent input:focus-visible + .consent__box{outline:2px solid var(--primary);outline-offset:3px}
.consent a{color:var(--primary);text-decoration:underline;text-underline-offset:2px}
.consent[data-invalid="true"] .consent__box{border-color:#B3261E;box-shadow:0 0 0 3px rgba(179,38,30,.12)}

.form-actions{margin-top:clamp(22px,2.6vw,30px)}
.form-actions .btn{width:auto;min-width:min(100%,280px)}
.form-error{display:none;margin-top:12px;font-size:14px;color:#B3261E}
.form-error[data-show="true"]{display:block}
.btn[data-busy="true"]{opacity:.7;pointer-events:none}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* terms - two columns with a divider, as in the design */
.terms{margin-top:clamp(30px,3.6vw,52px)}
.terms__title{font-size:clamp(1.6rem,2.6vw,2.15rem);margin-bottom:clamp(18px,2.2vw,28px)}
.terms__grid{display:grid;gap:clamp(4px,1vw,10px)}
@media (min-width:700px){
  .terms__grid{
    grid-template-columns:1fr 1fr;
    column-gap:clamp(34px,4.4vw,64px);
    /* the hairline between the columns, over the full height */
    background:linear-gradient(var(--line),var(--line)) center / 1px 100% no-repeat;
  }
}
.terms dl{margin:0}
.terms dt{margin-top:clamp(18px,2vw,26px);color:var(--primary)}
.terms dl:first-child dt:first-of-type,
.terms dl + dl dt:first-of-type{margin-top:0}
@media (max-width:699px){.terms dl + dl dt:first-of-type{margin-top:clamp(18px,2vw,26px)}}
.terms dd{margin:7px 0 0;font-size:14.5px;line-height:1.65;color:#5E4046;max-width:42ch}
.terms dd a{color:var(--primary);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* thank-you dialog */
.modal{
  position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;
  background:rgba(36,19,24,.5);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s ease;
}
.modal[data-open="true"]{opacity:1;visibility:visible}
.modal__box{
  position:relative;width:min(540px,100%);max-height:88vh;overflow:auto;text-align:center;
  background:var(--card);border-radius:var(--r-lg);
  padding:clamp(30px,4.4vw,48px) clamp(22px,4vw,44px);
  box-shadow:0 40px 90px -40px rgba(36,4,12,.6);
  transform:translateY(12px) scale(.99);transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.modal[data-open="true"] .modal__box{transform:none}
.modal__mark{width:76px;margin:0 auto clamp(14px,1.8vw,20px)}
.modal__title{font-size:clamp(1.5rem,3vw,2.05rem);margin-bottom:.5em}
.modal__text{color:var(--ink-soft);margin:0 auto;max-width:40ch;font-size:15px;line-height:1.6}
.modal__actions{margin-top:clamp(20px,2.6vw,28px)}
.modal__close{
  position:absolute;top:12px;right:12px;width:38px;height:38px;border:0;border-radius:50%;
  background:transparent;color:var(--ink-faint);font-size:21px;line-height:1;cursor:pointer;
}
.modal__close:hover{background:var(--creme);color:var(--bordeaux)}

/* =========================================================================
   GALLERY
   Columns instead of a grid: every photo keeps its own aspect ratio,
   so nothing gets cropped. Calm, with plenty of white space around it.
   ========================================================================= */
.gallery{position:relative;z-index:1;padding-block:clamp(30px,4vw,60px) 0}
.gallery__head{display:grid;gap:8px;margin-bottom:clamp(20px,2.6vw,32px)}
.gallery__title{font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.14}
.gallery__note{margin-top:4px;color:var(--ink-soft);font-size:15px;max-width:52ch}

.gallery__grid{columns:2;column-gap:clamp(10px,1.2vw,16px);column-fill:balance;orphans:1;widows:1}
@media (min-width:720px){.gallery__grid{columns:3;column-gap:16px}}
@media (min-width:1180px){.gallery__grid{columns:3;column-gap:18px}}
.gallery__grid--wide{columns:2}
@media (min-width:720px){.gallery__grid--wide{columns:3}}
@media (min-width:1180px){.gallery__grid--wide{columns:4}}

.tile{
  display:block;width:100%;padding:0;border:0;background:var(--creme);cursor:zoom-in;
  break-inside:avoid;margin:0 0 clamp(10px,1.2vw,16px);border-radius:4px;
  overflow:hidden;position:relative;line-height:0;-webkit-mask-image:radial-gradient(#fff,#000);
}
.tile img{width:100%;height:auto;display:block;
  transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .3s ease}
.tile:hover img,.tile:focus-visible img{transform:scale(1.04);opacity:.94}
.tile:focus-visible{outline:2px solid var(--primary);outline-offset:3px}

/* button below the gallery */
.gallery__more{display:flex;justify-content:center;margin-top:clamp(20px,2.6vw,32px)}
.btn--outline{
  background:transparent;color:var(--primary);border-color:var(--line);box-shadow:none;
}
.btn--outline:hover{background:#fff;border-color:var(--primary);color:var(--primary);
  box-shadow:0 10px 24px -18px rgba(76,0,12,.5)}

/* ---------- video carousel ----------
   Horizontal scrolling with scroll-snap. Works with any number of videos:
   the track grows with them, the buttons and dots are built in JS. */
.carousel{position:relative;margin-top:clamp(16px,2vw,26px)}
/* flexbox instead of grid: percentages for the slide width are calculated
   reliably against the track here; with grid-auto-columns it fell back to the minimum */
.videos{
  display:flex;gap:clamp(12px,1.6vw,20px);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-bottom:4px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.videos::-webkit-scrollbar{display:none}
.videos > *{flex:0 0 86%;scroll-snap-align:start}
@media (min-width:640px){.videos > *{flex-basis:calc((100% - 16px)/2)}}
@media (min-width:1000px){.videos > *{flex-basis:calc((100% - 40px)/3)}}

/* arrows */
.carousel__nav{
  position:absolute;top:50%;margin-top:-24px;z-index:2;
  width:48px;height:48px;border-radius:50%;border:1px solid var(--line);
  background:rgba(255,255,255,.94);color:var(--primary);cursor:pointer;
  display:grid;place-items:center;font-size:20px;line-height:1;
  box-shadow:0 10px 26px -14px rgba(76,0,12,.5);
  transition:background .18s ease,transform .18s ease,opacity .2s ease;
}
.carousel__nav:hover{background:#fff;transform:scale(1.06)}
.carousel__nav:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.carousel__nav[disabled]{opacity:0;pointer-events:none}
.carousel__nav--prev{left:calc(var(--gutter) * -0.5)}
.carousel__nav--next{right:calc(var(--gutter) * -0.5)}
@media (max-width:900px){
  .carousel__nav--prev{left:6px}
  .carousel__nav--next{right:6px}
}

/* dots */
.carousel__dots{display:flex;justify-content:center;gap:8px;margin-top:clamp(14px,1.8vw,22px)}
.carousel__dot{
  width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(76,0,12,.22);transition:background .2s ease,transform .2s ease;
}
.carousel__dot[aria-current="true"]{background:var(--primary);transform:scale(1.35)}
.carousel__dot:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
/* At rest all tiles share the same aspect ratio, so the row lines up neatly.
   Once playback starts the tile takes on the real aspect ratio of the recording -
   then the picture fills the tile and there are no bars at the sides. */
.video{position:relative;margin:0;border-radius:4px;overflow:hidden;background:#1b0d11;
  line-height:0;aspect-ratio:3/4;transition:aspect-ratio .35s ease}
.video video{width:100%;height:100%;display:block;object-fit:cover;background:#1b0d11}
.video[data-playing="true"] video{object-fit:contain}
@media (prefers-reduced-motion:reduce){.video{transition:none}}

/* play button in the middle; the controls only appear once the video is playing */
.video__play{
  position:absolute;inset:0;margin:auto;width:clamp(58px,6vw,74px);height:clamp(58px,6vw,74px);
  display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;
  background:rgba(76,0,12,.82);color:var(--creme);
  backdrop-filter:blur(2px);
  transition:transform .22s cubic-bezier(.22,1,.36,1),background .2s ease,opacity .25s ease;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.6);
}
.video__play svg{width:42%;height:42%;margin-left:8%}
.video__play:hover{background:var(--primary);transform:scale(1.07)}
.video__play:focus-visible{outline:2px solid var(--creme);outline-offset:3px}

/* a soft dark haze over the poster image, so the button stands out */
.video::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(20,4,8,.34),rgba(20,4,8,.12) 60%,transparent);
  transition:opacity .25s ease;
}
.video[data-playing="true"]::after{opacity:0}
.video[data-playing="true"] .video__play{opacity:0;pointer-events:none;transform:scale(.85)}

/* lightbox */
.lightbox{
  position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:clamp(14px,3vw,44px);
  background:rgba(28,12,16,.9);opacity:0;visibility:hidden;
  transition:opacity .26s ease,visibility .26s ease;
}
.lightbox[data-open="true"]{opacity:1;visibility:visible}
.lightbox img{
  max-width:100%;max-height:88vh;width:auto;height:auto;border-radius:10px;
  transform:scale(.97);transition:transform .3s cubic-bezier(.22,1,.36,1);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.8);
}
.lightbox[data-open="true"] img{transform:none}
.lightbox__close,.lightbox__nav{
  position:absolute;border:0;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  transition:background .18s ease;backdrop-filter:blur(4px);
}
.lightbox__close:hover,.lightbox__nav:hover{background:rgba(255,255,255,.22)}
.lightbox__close{top:clamp(12px,2vw,26px);right:clamp(12px,2vw,26px);font-size:22px;line-height:1}
.lightbox__nav{top:50%;margin-top:-23px;font-size:20px;line-height:1}
.lightbox__nav--prev{left:clamp(8px,1.6vw,24px)}
.lightbox__nav--next{right:clamp(8px,1.6vw,24px)}
.lightbox__caption{
  position:absolute;left:0;right:0;bottom:clamp(10px,2vw,22px);text-align:center;
  color:rgba(255,255,255,.82);font-size:14px;padding-inline:70px;
}

/* =========================================================================
   VARIANT B - portrait on the left, all details in a dark panel on the right
   ========================================================================= */
.hero-b{position:relative;z-index:1;padding-block:clamp(18px,2.6vw,38px) clamp(30px,4vw,54px)}
.hero-b__grid{display:grid;gap:clamp(26px,3.4vw,52px)}
@media (min-width:1000px){
  .hero-b__grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);align-items:center}
}

/* ---- left: heading, portrait, button ---- */
.hero-b__title{
  margin-top:clamp(16px,1.8vw,24px);
  font-size:clamp(2.5rem,5.6vw,4.1rem);line-height:1.05;letter-spacing:-.015em;
}
.hero-b__title em{display:block;font-style:italic;color:var(--bordeaux)}

/* the portrait blends into the background through a soft glow - no
   hard cut-out, as on the poster */
/* Round portrait from the poster photo. The soft edge is already in the PNG; here
   only a warm glow is added behind it for depth. */
.portrait{position:relative;margin-top:clamp(14px,2vw,26px);display:grid;place-items:center}
.portrait::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(104%,600px);aspect-ratio:1;border-radius:50%;z-index:0;
  background:radial-gradient(circle,
    rgba(232,200,144,.34) 0%, rgba(200,150,140,.26) 40%,
    rgba(156,92,84,.14) 62%, rgba(156,92,84,0) 78%);
  filter:blur(30px);
}
.portrait picture{position:relative;z-index:1;display:block;width:100%;max-width:min(100%,540px)}
.portrait img{
  width:100%;height:auto;
  filter:drop-shadow(0 22px 44px rgba(76,0,12,.16));
}
.hero-b__cta{margin-top:clamp(20px,2.6vw,32px)}

/* ---- right: the dark panel ---- */
.panel{
  background:linear-gradient(160deg,#5A0512 0%,var(--bordeaux) 46%,#3B0009 100%);
  color:var(--creme);border-radius:var(--r-lg);
  padding:clamp(24px,2.8vw,42px);
  box-shadow:0 24px 54px -40px rgba(40,0,8,.6);
  display:grid;gap:clamp(16px,1.8vw,22px);align-content:start;
}
.panel .label{color:var(--goud)}
.panel__title{font-size:clamp(1.6rem,2.4vw,2.15rem);line-height:1.16;color:var(--creme)}
.panel__note{font-size:15px;line-height:1.6;color:rgba(244,236,220,.76)}

.panel__rows{display:grid;gap:10px}
.panel__row{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:var(--r);
  border:1px solid rgba(244,236,220,.2);
  background:rgba(244,236,220,.06);
}
.panel__icon{
  flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  background:rgba(244,236,220,.12);color:var(--goud);
}
.panel__icon svg{width:19px;height:19px}
.panel__text{display:grid;gap:2px;min-width:0}
.panel__value{font-size:15.5px;font-weight:500;line-height:1.45}
.panel__value span{display:block}
.panel__value .soft{font-weight:400;color:rgba(244,236,220,.72)}

.panel .btn{
  width:100%;background:var(--goud);color:var(--bordeaux);
  box-shadow:0 14px 30px -18px rgba(0,0,0,.8);
}
.panel .btn:hover{background:#F0D6A6;color:var(--bordeaux)}

.panel__foot{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding-top:clamp(14px,1.6vw,20px);border-top:1px solid rgba(244,236,220,.16);
}
.panel__docent{display:flex;align-items:center;gap:12px}
.panel__avatar{
  width:46px;height:46px;flex:none;border-radius:50%;overflow:hidden;
  border:1px solid rgba(244,236,220,.28);background:rgba(244,236,220,.1);
}
.panel__avatar picture{display:block;width:100%;height:100%}
.panel__avatar img{width:100%;height:100%;object-fit:cover}
.panel__socials{margin-left:auto;display:flex;gap:9px}
.panel__socials a{
  width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(244,236,220,.26);color:var(--creme);
  transition:background .18s ease,transform .18s ease;
}
.panel__socials a:hover{background:rgba(244,236,220,.14);transform:translateY(-2px)}
.panel__socials svg{width:17px;height:17px}

/* TikTok is already listed, but the account is not live yet -
   so it is an icon without a link, slightly quieter than the rest */
.socials .socials__soon,
.panel__socials .socials__soon{
  display:grid;place-items:center;border-radius:50%;cursor:default;
  opacity:.42;
}
.socials .socials__soon{width:40px;height:40px;border:1px solid var(--line);color:var(--bordeaux)}
.panel__socials .socials__soon{width:38px;height:38px;border:1px solid rgba(244,236,220,.26);color:var(--creme)}
.socials .socials__soon svg{width:17px;height:17px}
.panel__socials .socials__soon svg{width:17px;height:17px}
.site-foot__links .soon{color:var(--ink-faint);cursor:default}

/* =========================================================================
   MENU (three-line hamburger button)
   ========================================================================= */
/* flex instead of grid: the three lines are then guaranteed to be evenly
   spaced; with grid they sometimes collapsed together */
.menu-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;flex:none;width:44px;height:44px;padding:0;
  border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;
  transition:color .18s ease;
}
.menu-btn:hover{color:var(--primary)}
.menu-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.menu-btn span{
  display:block;width:22px;height:1.5px;background:currentColor;border-radius:2px;
  transition:transform .28s cubic-bezier(.22,1,.36,1),opacity .18s ease;
}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.4)}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:50;display:grid;place-items:center;
  background:rgba(30,8,14,.55);backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;transition:opacity .26s ease,visibility .26s ease;
}
.menu[data-open="true"]{opacity:1;visibility:visible}
.menu__panel{
  width:min(420px,calc(100% - 32px));background:var(--card);
  border-radius:var(--r-lg);padding:clamp(28px,4vw,44px);
  box-shadow:0 40px 90px -40px rgba(40,4,12,.6);
  transform:translateY(10px) scale(.99);transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.menu[data-open="true"] .menu__panel{transform:none}
.menu__list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.menu__list a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:clamp(13px,1.6vw,17px) 4px;
  font-family:var(--display);font-size:clamp(1.1rem,1.6vw,1.32rem);color:var(--ink);
  border-bottom:1px solid var(--line-soft);transition:color .18s ease,padding-left .2s ease;
}
.menu__list li:last-child a{border-bottom:0}
.menu__list a:hover,.menu__list a:focus-visible{color:var(--primary);padding-left:10px}
.menu__list .arrow{color:var(--oudroze);font-size:1.1em}
.menu__close{
  position:absolute;top:clamp(14px,2vw,26px);right:clamp(14px,2vw,26px);
  width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.14);
  color:#fff;font-size:22px;line-height:1;cursor:pointer;
}
.menu__close:hover{background:rgba(255,255,255,.26)}

/* =========================================================================
   INFO PAGE
   ========================================================================= */
.info{position:relative;z-index:1;padding-block:clamp(24px,3.4vw,48px) clamp(30px,4vw,56px)}
.info__col{width:100%;max-width:720px;margin-inline:auto}
.info__title{font-size:clamp(2.2rem,4.6vw,3.2rem);line-height:1.1}
.info section + section{margin-top:clamp(34px,4.4vw,60px)}
.info h2{font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.18;margin-bottom:clamp(12px,1.4vw,18px)}
.info p{font-size:clamp(15px,.3vw + 14px,16.5px);line-height:1.72;color:var(--ink-soft);
  max-width:56ch}
.info p + p{margin-top:.8em}
.info a{color:var(--primary);text-decoration:underline;text-underline-offset:3px}
.info__rule{border:0;border-top:1px solid var(--line-soft);margin:clamp(28px,3.4vw,46px) 0}

/* =========================================================================
   VARIANT C - minimal homepage: only the essentials, one button, no photo
   ========================================================================= */
.sober{
  position:relative;z-index:1;
  min-height:clamp(560px,72vh,760px);
  display:grid;place-items:center;text-align:center;
  padding-block:clamp(36px,6vw,86px);
}
.sober__inner{width:100%;max-width:760px}

.sober__eyebrow{
  display:flex;align-items:center;justify-content:center;gap:14px;margin:0;
  font-family:var(--sans);font-size:clamp(10.5px,.24vw + 9.5px,12px);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--oudroze);
}
.sober__eyebrow::before,.sober__eyebrow::after{
  content:"";display:block;width:clamp(22px,3vw,42px);height:1px;background:var(--goud);
}

.sober__title{
  margin-top:clamp(18px,2.4vw,30px);
  font-size:clamp(2.8rem,7.4vw,5.2rem);line-height:1.02;letter-spacing:-.02em;
  color:var(--bordeaux);
}
.sober__title em{font-style:italic}

.sober__who{
  margin-top:clamp(16px,2vw,24px);
  font-family:var(--sans);font-size:clamp(11px,.3vw + 10px,13px);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);line-height:1.9;
}

.sober__facts{
  margin-top:clamp(30px,4vw,52px);
  display:grid;gap:clamp(20px,3vw,30px);justify-content:center;
}
@media (min-width:620px){
  .sober__facts{grid-template-columns:repeat(2,auto);gap:clamp(38px,6vw,88px)}
}
.sober__fact{display:grid;gap:8px;justify-items:center}
.sober__fact .label{color:var(--oudroze)}
.sober__fact p{font-size:clamp(15px,.3vw + 14px,16.5px);line-height:1.62;color:var(--ink)}
.sober__fact p span{display:block}
.sober__fact p .soft{color:var(--ink-soft)}

.sober__cta{margin-top:clamp(32px,4.4vw,56px)}
.sober__note{
  margin-top:clamp(14px,1.8vw,20px);
  font-family:var(--sans);font-size:clamp(10.5px,.24vw + 9.5px,12px);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);line-height:1.8;
}

/* =========================================================================
   VARIANT D - editorial, everything left-aligned, only space on the right
   ========================================================================= */
.edit{position:relative;z-index:1;padding-block:clamp(30px,6vw,90px) clamp(40px,6vw,90px)}
.edit__grid{display:grid;gap:clamp(26px,4vw,56px)}
@media (min-width:940px){
  .edit__grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);align-items:center}
}
.edit__copy{max-width:620px}
.edit__title{
  margin-top:clamp(16px,2vw,24px);
  font-size:clamp(2.9rem,7vw,5rem);line-height:1.02;letter-spacing:-.022em;color:var(--bordeaux);
}
.edit__who{
  margin-top:clamp(16px,2vw,24px);
  font-family:var(--sans);font-size:clamp(11px,.3vw + 10px,13px);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);line-height:1.95;
}
.edit__rule{border:0;border-top:1px solid var(--goud);width:clamp(54px,7vw,92px);
  margin:clamp(26px,3.4vw,42px) 0}
.edit__facts{display:grid;gap:clamp(16px,2.2vw,26px)}
@media (min-width:520px){.edit__facts{grid-template-columns:repeat(2,auto);
  justify-content:start;column-gap:clamp(44px,7vw,96px)}}
.edit__fact{display:grid;gap:7px}
.edit__fact p{font-size:clamp(15px,.3vw + 14px,16.5px);line-height:1.62}
.edit__fact p span{display:block}
.edit__fact .soft{color:var(--ink-soft)}
.edit__cta{margin-top:clamp(30px,4vw,48px)}
.edit__note{
  margin-top:clamp(13px,1.6vw,18px);
  font-family:var(--sans);font-size:clamp(10.5px,.24vw + 9.5px,12px);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);
}
/* right half: the crane large and very light, as a watermark */
.edit__mark{position:relative;display:none;place-items:center}
@media (min-width:940px){.edit__mark{display:grid}}
.edit__mark img{width:min(100%,460px);opacity:.1}

/* =========================================================================
   VARIANT E - the logo itself is the heading, like a poster
   ========================================================================= */
.poster{
  position:relative;z-index:1;min-height:clamp(580px,76vh,820px);
  display:grid;place-items:center;text-align:center;
  padding-block:clamp(30px,5vw,70px);
}
.poster__inner{width:100%;max-width:640px}
.poster__logo{width:clamp(170px,20vw,250px);margin:0 auto}
.poster__rule{border:0;border-top:1px solid var(--goud);width:clamp(50px,6vw,80px);
  margin:clamp(24px,3.2vw,40px) auto}
.poster__title{
  font-size:clamp(1.9rem,4.2vw,3rem);line-height:1.12;color:var(--bordeaux);
  letter-spacing:-.015em;
}
.poster__who{
  margin-top:clamp(12px,1.6vw,18px);
  font-family:var(--sans);font-size:clamp(10.5px,.26vw + 9.5px,12.5px);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);line-height:1.9;
}
.poster__lines{
  margin-top:clamp(26px,3.4vw,42px);display:grid;gap:8px;
  font-size:clamp(14.5px,.3vw + 13.5px,16px);color:var(--ink);line-height:1.66;
}
.poster__lines .label{display:block;margin-bottom:2px}
.poster__lines .soft{color:var(--ink-soft)}
.poster__cta{margin-top:clamp(30px,4vw,48px)}
.poster__note{
  margin-top:clamp(13px,1.6vw,18px);
  font-family:var(--sans);font-size:clamp(10.5px,.24vw + 9.5px,12px);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);
}

/* =========================================================================
   VARIANT F - minimal, but with scale, texture and depth
   ========================================================================= */
.grand{
  position:relative;z-index:1;background:transparent;min-height:100svh;min-height:100vh;
  display:grid;grid-template-rows:1fr auto;
  padding-block:clamp(10px,2vw,26px) clamp(24px,4vw,54px);
  /* no overflow:hidden - the ribbon may run outside the section */
}
/* fine grain over the whole page: takes away the flat look */
.grand::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
.grand__inner{
  position:relative;z-index:1;width:100%;
  max-width:1180px;margin-inline:auto;padding-inline:var(--gutter);text-align:center;
}

/* the silk as atmosphere, not as an edge: two large layers running behind the text */
.grand__silk{position:absolute;left:50%;translate:-50% 0;pointer-events:none;z-index:0;max-width:none}
/* The atmosphere now mainly comes from a colour gradient - it never repeats and
   needs no file. The organza is now just one accent, top left. */
body.v-grand{
  background:
    radial-gradient(110% 52% at 78% 2%, rgba(200,150,146,.26) 0%, rgba(200,150,146,0) 60%),
    radial-gradient(90% 42% at 6% 74%, rgba(156,92,84,.16) 0%, rgba(156,92,84,0) 64%),
    var(--page);
  background-attachment:fixed;
}
.grand__silk--1{
  top:-12%;left:-10%;translate:none;width:min(92%,1200px);opacity:.32;
  -webkit-mask-image:radial-gradient(ellipse 62% 76% at 38% 48%,
    #000 22%, rgba(0,0,0,.45) 56%, transparent 82%);
  mask-image:radial-gradient(ellipse 62% 76% at 38% 48%,
    #000 22%, rgba(0,0,0,.45) 56%, transparent 82%);
}
.grand__silk--2{display:none}
/* soft light spot behind the text, so everything stays readable */
.grand__inner::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(120%,1100px);height:min(130%,620px);z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center,
    rgba(252,247,241,.92) 0%, rgba(252,247,241,.72) 46%, rgba(252,247,241,0) 78%);
}

.grand__eyebrow{
  display:flex;align-items:center;justify-content:center;gap:16px;margin:0;
  font-family:var(--sans);font-size:clamp(10px,.22vw + 9px,11.5px);font-weight:600;
  letter-spacing:.34em;text-transform:uppercase;color:var(--oudroze);
}
.grand__eyebrow::before,.grand__eyebrow::after{
  content:"";display:block;width:clamp(28px,4vw,64px);height:1px;
  background:linear-gradient(to right,transparent,var(--goud),transparent);
}

.grand__title{
  margin-top:clamp(18px,2.6vw,34px);
  font-size:clamp(3.2rem,11.5vw,10rem);line-height:.92;letter-spacing:-.035em;
  color:var(--bordeaux);font-weight:400;
}
.grand__title em{display:block;font-style:italic;letter-spacing:-.03em}

.grand__who{
  margin-top:clamp(20px,2.6vw,32px);
  font-family:var(--sans);font-size:clamp(10.5px,.26vw + 9.5px,12.5px);font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft);line-height:2;
}

.grand__meta{
  margin-top:clamp(26px,3.2vw,44px);
  display:grid;gap:clamp(14px,1.8vw,22px);justify-items:center;
  font-size:clamp(14px,.3vw + 13px,15.5px);color:var(--ink);
}
.grand__meta b{font-weight:500}
.grand__meta .soft{color:var(--ink-soft)}
.grand__place{letter-spacing:.01em}

/* the two lesson times side by side, separated by a fine gold line */
.grand__times{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(18px,2.6vw,40px);
}
.grand__time{display:grid;gap:3px;justify-items:center;position:relative}
.grand__time + .grand__time::before{
  content:"";position:absolute;left:calc(clamp(18px,2.6vw,40px) / -2);
  top:12%;bottom:12%;width:1px;
  background:linear-gradient(to bottom,transparent,var(--goud),transparent);
}
.grand__time .label{color:var(--oudroze)}
.grand__time span:last-child{font-size:clamp(14.5px,.3vw + 13.5px,16px)}

/* the only image on the homepage: the teacher, small and round */
.grand__docent{
  margin-top:clamp(26px,3.4vw,42px);
  display:flex;align-items:center;justify-content:center;gap:13px;
}
.grand__avatar{
  width:clamp(54px,5vw,66px);height:clamp(54px,5vw,66px);flex:none;
  border-radius:50%;overflow:hidden;background:var(--creme);
  border:1px solid var(--line);
  box-shadow:0 10px 24px -16px rgba(76,0,12,.5);
}
.grand__avatar picture{display:block;width:100%;height:100%}
.grand__avatar img{width:100%;height:100%;object-fit:cover}
.grand__docent-text{display:grid;gap:2px;text-align:left}
.grand__docent-name{font-family:var(--display);font-size:clamp(15px,.36vw + 14px,17.5px);
  color:var(--ink)}

.grand__cta{margin-top:clamp(48px,6vw,80px)}
.grand__note{
  margin-top:clamp(24px,3.2vw,34px);
  font-family:var(--sans);font-size:clamp(10px,.22vw + 9px,11.5px);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);
}

/* calm entrance on load - gives the whole page a crafted feel */
@media (prefers-reduced-motion:no-preference){
  .rise{opacity:0;transform:translateY(14px);animation:rise .9s cubic-bezier(.22,1,.36,1) forwards}
  .rise:nth-child(1){animation-delay:.05s}
  .rise:nth-child(2){animation-delay:.16s}
  .rise:nth-child(3){animation-delay:.27s}
  .rise:nth-child(4){animation-delay:.38s}
  .rise:nth-child(5){animation-delay:.49s}
  @keyframes rise{to{opacity:1;transform:none}}
}


/* variant F2 - the organza as a full background behind the hero */
body.v-grand2{background:var(--page)}
.grand--bg{position:relative;overflow:hidden}
.grand--bg .grand__bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
}
.grand--bg .grand__bg img{
  width:100%;height:100%;object-fit:cover;object-position:50% 42%;opacity:.9;
}
/* light haze in the middle so the text stays easy to read */
.grand--bg::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 56% 46% at 50% 48%,
    rgba(252,247,241,.86) 0%, rgba(252,247,241,.5) 52%, rgba(252,247,241,0) 82%);
}
/* Bottom edge: a long, early transition. This belongs BEHIND the text - as a
   layer on ::after it sat over the button and made it look pale. */
.grand--bg .grand__bg::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,
    transparent 42%, rgba(252,247,241,.55) 72%, var(--page) 97%);
}
.grand--bg .grand__inner{z-index:3}

/* The hero already carries the fabric here. Another ribbon in the footer gave a
   second edge, so that is dropped, just like the dash above it. */
body.v-grand2 .site-foot__silk{display:none}
body.v-grand2 .site-foot{border-top:0;margin-top:0}

/* text below the button was too light on the fabric */
body.v-grand2 .grand__note{color:var(--oudroze);letter-spacing:.18em}

/* button lost contrast on the pinkish background: deeper bordeaux */
body.v-grand2 .btn{background:var(--bordeaux);border-color:var(--bordeaux);
  box-shadow:0 14px 30px -18px rgba(40,0,8,.7)}
body.v-grand2 .btn:hover{background:#6A0714}


/* =========================================================================
   SILK - three placements to choose from
   ========================================================================= */

/* 1. top-right corner - as in the client's own design. The fade is in
      the PNG, so the section's overflow can no longer cut it off flat. */
body.silk-1 .grand__silk--1{
  top:-10%;left:auto;right:-18%;width:min(96%,1290px);opacity:.5;
  -webkit-mask-image:none;mask-image:none;
}

/* 2. interwoven: runs behind the heading */
body.silk-2 .grand__silk--1{
  top:0;left:-24%;right:auto;width:min(112%,1370px);opacity:.42;
  -webkit-mask-image:none;mask-image:none;
}
body.silk-2 .grand__title{position:relative}

/* 3. band: two ribbons - the first from the top left, the second from the right
      and lower, so they flow over each other */
body.silk-3 .grand__silk--1{
  top:-8%;left:-12%;right:auto;width:min(118%,1375px);opacity:.4;
  -webkit-mask-image:none;mask-image:none;
}
body.silk-3 .grand__silk--2{
  display:block;top:38%;left:auto;right:-16%;translate:none;
  width:min(104%,1375px);opacity:.32;transform:scaleX(-1);
  -webkit-mask-image:none;mask-image:none;
}


/* =========================================================================
   FONT CHOICE - three options for the headings
   ========================================================================= */
@font-face{font-family:'Marcellus';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/marcellus-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}
@font-face{font-family:'Prata';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/prata-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}

/* 1. Cormorant Garamond - fine and classical, the same family as the wordmark */
body.font-cormorant{--display:'Cormorant Garamond',Georgia,serif}
body.font-cormorant .grand__title{font-weight:400;letter-spacing:-.02em;
  font-size:clamp(3.6rem,13vw,11.5rem);line-height:.9}

/* 2. Marcellus - classical Roman, incised; no italic, so the second line
      stands out through size */
body.font-marcellus{--display:'Marcellus',Georgia,serif}
body.font-marcellus .grand__title{font-weight:400;letter-spacing:-.015em;
  font-size:clamp(3.2rem,11.8vw,10.2rem)}
body.font-marcellus .grand__title em{font-style:normal;font-size:.82em;
  letter-spacing:.04em}

/* 3. Prata - high contrast, stately */
body.font-prata{--display:'Prata',Georgia,serif}
body.font-prata .grand__title{font-weight:400;letter-spacing:-.022em;
  font-size:clamp(3rem,10.6vw,9.2rem);line-height:.98}
body.font-prata .grand__title em{font-style:normal;font-size:.86em}


/* =========================================================================
   FONT CHOICE - didones, in line with Prata
   ========================================================================= */
@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/bodoni-moda-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}
@font-face{font-family:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/dm-serif-display-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}
@font-face{font-family:'Antic Didone';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/antic-didone-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}
@font-face{font-family:'Italiana';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/italiana-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}
@font-face{font-family:'Gloock';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/gloock-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}

/* none of these has an italic, so the second line stands out
   through size and spacing */
body.font-bodoni,body.font-dmserif,body.font-antic,body.font-italiana,body.font-gloock{}
body.font-bodoni .grand__title em,
body.font-dmserif .grand__title em,
body.font-antic .grand__title em,
body.font-italiana .grand__title em,
body.font-gloock .grand__title em{font-style:normal}

body.font-bodoni{--display:'Bodoni Moda',Georgia,serif}
body.font-bodoni .grand__title{font-weight:400;letter-spacing:-.018em;
  font-size:clamp(3rem,10.8vw,9.4rem);line-height:.98}
body.font-bodoni .grand__title em{font-size:.86em;letter-spacing:.01em}

body.font-dmserif{--display:'DM Serif Display',Georgia,serif}
body.font-dmserif .grand__title{font-weight:400;letter-spacing:-.022em;
  font-size:clamp(3rem,10.6vw,9.2rem);line-height:.98}
body.font-dmserif .grand__title em{font-size:.86em}

body.font-antic{--display:'Antic Didone',Georgia,serif}
body.font-antic .grand__title{font-weight:400;letter-spacing:-.012em;
  font-size:clamp(3.2rem,11.6vw,10.2rem);line-height:1}
body.font-antic .grand__title em{font-size:.88em;letter-spacing:.02em}

body.font-italiana{--display:'Italiana',Georgia,serif}
body.font-italiana .grand__title{font-weight:400;letter-spacing:.01em;
  font-size:clamp(3.2rem,11.4vw,10rem);line-height:1.02}
body.font-italiana .grand__title em{font-size:.9em;letter-spacing:.06em}

body.font-gloock{--display:'Gloock',Georgia,serif}
body.font-gloock .grand__title{font-weight:400;letter-spacing:-.02em;
  font-size:clamp(2.9rem,10.2vw,8.8rem);line-height:.98}
body.font-gloock .grand__title em{font-size:.86em}


/* =========================================================================
   FONT CHOICE - contemporary display serifs (alternatives to Beausite,
   which requires a paid licence)
   ========================================================================= */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/instrument-serif-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300;font-display:swap;
  src:url('../fonts/fraunces-300-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300;font-display:swap;
  src:url('../fonts/newsreader-300-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}

body.font-instrument{--display:'Instrument Serif',Georgia,serif}
body.font-instrument .grand__title{font-weight:400;letter-spacing:-.02em;
  font-size:clamp(3.4rem,12.4vw,10.8rem);line-height:.94}
body.font-instrument .grand__title em{font-style:italic;font-size:.94em}

body.font-fraunces{--display:'Fraunces',Georgia,serif}
body.font-fraunces .grand__title{font-weight:300;letter-spacing:-.022em;
  font-size:clamp(3rem,10.8vw,9.4rem);line-height:.98}
body.font-fraunces .grand__title em{font-style:normal;font-size:.86em}

body.font-newsreader{--display:'Newsreader',Georgia,serif}
body.font-newsreader .grand__title{font-weight:300;letter-spacing:-.02em;
  font-size:clamp(3.2rem,11.6vw,10rem);line-height:.96}
body.font-newsreader .grand__title em{font-style:italic;font-size:.94em}


/* =========================================================================
   FONT CHOICE - sharp, contemporary serifs (in the spirit of Beausite)
   ========================================================================= */
@font-face{font-family:'Young Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/young-serif-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}
@font-face{font-family:'Hedvig Letters Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/hedvig-letters-serif-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}
@font-face{font-family:'Petrona';font-style:normal;font-weight:300;font-display:swap;
  src:url('../fonts/petrona-300-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}
@font-face{font-family:'Petrona';font-style:italic;font-weight:300;font-display:swap;
  src:url('../fonts/petrona-300-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}
@font-face{font-family:'Spectral';font-style:normal;font-weight:300;font-display:swap;
  src:url('../fonts/spectral-300-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}
@font-face{font-family:'Spectral';font-style:italic;font-weight:300;font-display:swap;
  src:url('../fonts/spectral-300-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}

body.font-young{--display:'Young Serif',Georgia,serif}
body.font-young .grand__title{font-weight:400;letter-spacing:-.024em;
  font-size:clamp(2.9rem,10.2vw,8.8rem);line-height:.98}
body.font-young .grand__title em{font-style:normal;font-size:.86em}

body.font-hedvig{--display:'Hedvig Letters Serif',Georgia,serif}
body.font-hedvig .grand__title{font-weight:400;letter-spacing:-.018em;
  font-size:clamp(3.1rem,11.2vw,9.8rem);line-height:.98}
body.font-hedvig .grand__title em{font-style:normal;font-size:.88em}

body.font-petrona{--display:'Petrona',Georgia,serif}
body.font-petrona .grand__title{font-weight:300;letter-spacing:-.022em;
  font-size:clamp(3.2rem,11.6vw,10.2rem);line-height:.96}
body.font-petrona .grand__title em{font-style:italic;font-size:.94em}

body.font-spectral{--display:'Spectral',Georgia,serif}
body.font-spectral .grand__title{font-weight:300;letter-spacing:-.024em;
  font-size:clamp(3rem,10.8vw,9.4rem);line-height:.98}
body.font-spectral .grand__title em{font-style:italic;font-size:.94em}


/* =========================================================================
   BEAUSITE GRAND THIN
   Commercial typeface by Fatype. Requires a valid web licence
   (fatype.com/eula) before this may go live. The original .woff file is
   used, not converted, because the licence restricts conversion.
   ========================================================================= */
@font-face{
  font-family:'Beausite Grand';font-style:normal;font-weight:200;font-display:swap;
  src:url('../fonts/BeausiteGrandWeb-Thin.woff') format('woff');
}
body.font-beausite{--display:'Beausite Grand',Georgia,serif}
body.font-beausite .grand__title{
  font-weight:200;letter-spacing:-.028em;
  font-size:clamp(3.4rem,12.8vw,11.2rem);line-height:.92;
}
body.font-beausite .grand__title em{font-style:normal;font-size:.9em;letter-spacing:-.02em}


/* =========================================================================
   HOUSE FONTS - Beausite for headings, Graphik for text and links
   ---------------------------------------------------------------------------
   Both are commercial. Beausite Grand Thin is already here (licence needed from
   fatype.com/eula). Graphik still has to be licensed from Commercial Type.

   Once the Graphik files are available: put them in assets/fonts/, uncomment
   the @font-face block below and that's it. Graphik is already first in the
   font stack, so it then takes over automatically; until then the site falls
   back to Inter, which is close.

@font-face{font-family:'Graphik';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/Graphik-Regular-Web.woff2') format('woff2');}
@font-face{font-family:'Graphik';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/Graphik-Medium-Web.woff2') format('woff2');}
@font-face{font-family:'Graphik';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/Graphik-Semibold-Web.woff2') format('woff2');}
   ========================================================================= */
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;
  src:url('../fonts/inter-300-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/inter-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/inter-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/inter-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}

body.huisletters{
  --display:'Beausite Grand',Georgia,serif;
  --sans:'Graphik','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
body.huisletters .grand__title{
  font-weight:200;letter-spacing:-.028em;
  font-size:clamp(3.4rem,12.8vw,11.2rem);line-height:.92;
}
body.huisletters .grand__title em{font-style:normal;font-size:.9em;letter-spacing:-.02em}
/* Graphik/Inter are slightly more compact than IBM Plex, so labels get a bit more spacing */
body.huisletters .label,
body.huisletters .grand__who,
body.huisletters .grand__note{letter-spacing:.2em}

/* =========================================================================
   CHOICE: BUTTON  (knop-1 to knop-4)
   ========================================================================= */

/* 1. filled pill - as now */
body.knop-1 .grand__cta .btn{
  background:var(--bordeaux);color:#fff;border-color:var(--bordeaux);border-radius:var(--pill);
}

/* 2. outline - more refined, fills on hover */
body.knop-2 .grand__cta .btn{
  background:transparent;color:var(--bordeaux);border:1px solid var(--bordeaux);
  border-radius:var(--pill);box-shadow:none;
}
body.knop-2 .grand__cta .btn:hover{background:var(--bordeaux);color:#fff}

/* 3. square corners - sharper, more architectural */
body.knop-3 .grand__cta .btn{
  background:var(--bordeaux);color:#fff;border-color:var(--bordeaux);border-radius:3px;
  letter-spacing:.06em;
}

/* 4. text link with a gold line - the most understated */
body.knop-4 .grand__cta .btn{
  background:transparent;color:var(--bordeaux);border:0;border-radius:0;box-shadow:none;
  padding:6px 2px;font-family:var(--display);font-weight:400;
  font-size:clamp(21px,1.9vw,30px);letter-spacing:0;
  border-bottom:1px solid var(--goud);
}
body.knop-4 .grand__cta .btn:hover{
  background:transparent;color:var(--primary);transform:none;border-bottom-color:var(--bordeaux);
}

/* =========================================================================
   CHOICE: LESSON TIMES  (tijd-1 to tijd-4)
   ========================================================================= */

/* 1. two columns with a gold hairline - as now */

/* 2. one line, only space in between, no divider */
body.tijd-2 .grand__times{gap:clamp(26px,4.4vw,72px)}
body.tijd-2 .grand__time{grid-auto-flow:column;align-items:baseline;gap:9px}
body.tijd-2 .grand__time + .grand__time::before{display:none}
body.tijd-2 .grand__time .label{font-size:inherit;letter-spacing:.01em;text-transform:none;
  font-family:var(--sans);font-weight:600;color:var(--ink)}

/* 3. two lines stacked, day on the left and time on the right, with a thin line */
body.tijd-3 .grand__times{display:grid;gap:0;width:min(100%,380px);margin-inline:auto}
body.tijd-3 .grand__time{
  grid-auto-flow:column;justify-content:space-between;align-items:baseline;
  padding-block:11px;border-top:1px solid var(--line-soft);
}
body.tijd-3 .grand__time:first-child{border-top:0}
body.tijd-3 .grand__time + .grand__time::before{display:none}
body.tijd-3 .grand__time .label{color:var(--oudroze)}

/* 4. without headings - only the two lines, very calm */
body.tijd-4 .grand__times{display:grid;gap:5px}
body.tijd-4 .grand__time{grid-auto-flow:column;gap:9px;justify-content:center;align-items:baseline}
body.tijd-4 .grand__time + .grand__time::before{display:none}
body.tijd-4 .grand__time .label{
  font-family:var(--sans);font-size:inherit;font-weight:400;letter-spacing:.01em;
  text-transform:none;color:var(--ink);
}
body.tijd-4 .grand__time span:last-child{color:var(--ink-soft)}

/* =========================================================================
   CHOICE: TEACHER PORTRAIT  (docent-1 to docent-3)
   ========================================================================= */

/* smaller than before, in all three versions */
body[class*="docent-"] .grand__avatar{
  width:clamp(46px,3.9vw,56px);height:clamp(46px,3.9vw,56px);
}

/* 1. thin gold ring, name beside it */
body.docent-1 .grand__avatar{
  border:1px solid var(--goud);box-shadow:0 0 0 1px rgba(232,200,144,.3);
  background:var(--creme);
}

/* 2. soft edge that fades into the page, no border */
body.docent-2 .grand__avatar{
  border:0;background:transparent;box-shadow:none;overflow:visible;border-radius:0;
}

/* 3. portrait on top, name below, centred */
body.docent-3 .grand__docent{flex-direction:column;gap:10px}
body.docent-3 .grand__docent-text{text-align:center;justify-items:center}
body.docent-3 .grand__avatar{
  width:clamp(56px,4.8vw,68px);height:clamp(56px,4.8vw,68px);
  border:1px solid var(--line);background:var(--creme);
}

/* =========================================================================
   PORTRAIT BLOCK - a large part of the poster; the text 'Dansdocente Lusik'
   is already in the image, so it is not repeated in the HTML
   ========================================================================= */
.grand__blok{
  margin-top:clamp(24px,3.2vw,40px);width:100%;
  display:flex;justify-content:center;
}
.grand__blok picture{display:block;width:min(100%,var(--blok-breedte,520px))}
.grand__blok img{
  width:100%;height:auto;border-radius:6px;
  box-shadow:0 22px 48px -34px rgba(76,0,12,.42);
}
body.blok-1{--blok-breedte:540px}
body.blok-2{--blok-breedte:560px}
body.blok-3{--blok-breedte:600px}


/* =========================================================================
   PORTRAIT CIRCLE - a large part of the poster, cut out as a circle.
   The text 'Dansdocente Lusik' is in the photo; the bottom fades out so the
   cropped YERAZ logo does not show.
   ========================================================================= */
.grand__cirkel{margin-top:clamp(22px,3vw,38px);display:flex;justify-content:center}
.grand__cirkel picture{display:block;width:min(100%,var(--cirkel,340px))}
.grand__cirkel img{
  width:100%;height:auto;
  filter:drop-shadow(0 26px 40px rgba(76,0,12,.26));
}
body.cirkel-1{--cirkel:300px}
body.cirkel-2{--cirkel:360px}
body.cirkel-3{--cirkel:430px}

body.cirkel-klein{--cirkel:260px}
/* name below the portrait, in the site's font and label style */
.grand__cirkel{flex-direction:column;align-items:center}
.grand__cirkel-naam{
  margin:clamp(14px,1.8vw,20px) 0 0;display:grid;gap:4px;justify-items:center;text-align:center;
}
.grand__cirkel-naam .label{color:var(--oudroze)}
.grand__cirkel-naam strong{
  font-family:var(--display);font-weight:400;font-size:clamp(1.55rem,2.4vw,2.05rem);
  line-height:1.1;letter-spacing:-.01em;color:var(--bordeaux);
}

/* keep short lines balanced: no single word on the second line */
.grand__who,.grand__note{text-wrap:balance}

/* =========================================================================
   FIT - the whole homepage (header to button) fits in the first screen;
   only the footer sits below it. Sizes follow the screen HEIGHT, not just
   the width: otherwise a wide but short laptop got a ~300px heading.
   Tablet/desktop only; on a phone you simply scroll.
   ========================================================================= */
@media (min-width:700px){
  body.fit{
    /* header height, so the hero fills exactly the rest of the screen */
    --kop:calc(clamp(62px,5.6vw,80px) + 2 * clamp(16px,1.8vw,24px));
  }
  /* logo and header keep their original size */

  body.fit .grand{
    min-height:calc(100vh - var(--kop));
    min-height:calc(100svh - var(--kop));
    padding-block:clamp(0px,0.8vh,10px) clamp(8px,3vh,36px);
  }
  body.fit .grand__title{
    margin-top:clamp(0px,0.4vh,8px);
    font-size:clamp(2.6rem,min(9vw,11.5vh),9rem);
  }
  body.fit .grand__who{margin-top:clamp(6px,1.8vh,24px)}
  /* location to the left of the portrait, lesson times to the right */
  body.fit .grand__row{
    margin-top:clamp(10px,2.2vh,30px);
    grid-template-columns:1fr var(--cirkel,280px) 1fr;grid-template-areas:"loc cirkel tijd";
    column-gap:clamp(28px,4vw,64px);align-items:center;justify-items:stretch;
  }
  body.fit .grand__side--loc{justify-items:end;text-align:right}
  body.fit .grand__side--tijd{justify-items:start;text-align:left}
  body.fit.cirkel-klein{--cirkel:clamp(180px,29vh,290px)}
  body.fit .grand__cta{margin-top:clamp(22px,4.2vh,54px)}
  body.fit .grand__cta .btn--xl{padding:clamp(10px,1.9vh,24px) clamp(34px,4vw,58px)}
  body.fit .grand__note{margin-top:clamp(16px,2.6vh,30px)}
}

/* location and lesson times side by side even on a phone; the portrait
   photo gets its own row below, until the full desktop row at 700px */
/* The outer 1fr tracks are empty: they absorb the leftover space equally, so
   the loc/tijd pair is centred on its real width instead of on a 50/50 split
   (the two blocks are not equally wide). They also swallow the portrait's
   width demand, which would otherwise blow the content columns up. */
.grand__row{
  margin-top:clamp(30px,4.4vw,44px);display:grid;justify-items:center;
  gap:clamp(20px,4vw,30px) clamp(10px,4vw,26px);
  grid-template-columns:1fr minmax(0,auto) minmax(0,auto) 1fr;
  grid-template-areas:"pre loc tijd post" "cirkel cirkel cirkel cirkel";
}
/* below ~330px the two blocks would run into each other, so stack them again */
@media (max-width:359px){
  .grand__row{
    grid-template-columns:1fr;
    grid-template-areas:"loc" "tijd" "cirkel";
  }
}
.grand__side--loc{grid-area:loc}
.grand__side--tijd{grid-area:tijd}
.grand__row .grand__cirkel{grid-area:cirkel;margin-top:0}
.grand__side{display:grid;gap:6px;justify-items:center;text-align:center}
.grand__side .label{color:var(--oudroze)}
.grand__side-val{margin:0;font-size:clamp(14.5px,.3vw + 13.5px,16px);line-height:1.62;color:var(--ink)}
.grand__side-val b{font-weight:500}
.grand__side-val .regel{display:block;white-space:nowrap}
.grand__side-val .soft{color:var(--ink-soft)}

/* Lestijden: line up "19:00" and "19:30" under each other instead of each
   day+time floating at its own width */
.grand__side--tijd .grand__side-val{
  display:inline-grid;grid-template-columns:auto auto;column-gap:.5em;row-gap:2px;
  justify-items:start;align-items:baseline;text-align:left;
}
.grand__side--tijd .grand__side-val .regel{display:contents}
.grand__side--tijd .grand__side-val .dag,
.grand__side--tijd .grand__side-val .soft{white-space:nowrap}
.grand__side--tijd .grand__side-val .dag::after{content:":";color:var(--oudroze)}

/* location is clickable: opens the place in Google Maps */
.grand__maps{
  display:block;color:inherit;text-decoration:none;border-radius:4px;
  transition:color .18s ease;
}
.grand__maps b{border-bottom:1px solid transparent;transition:border-color .18s ease}
.grand__maps:hover,.grand__maps:focus-visible{color:var(--bordeaux)}
.grand__maps:hover b,.grand__maps:focus-visible b{border-bottom-color:var(--goud)}
.grand__maps:focus-visible{outline:2px solid var(--primary);outline-offset:4px}
.grand__maps-pijl{
  display:inline-block;margin-left:5px;font-size:.82em;color:var(--oudroze);
  transition:transform .18s ease;
}
.grand__maps:hover .grand__maps-pijl{transform:translate(2px,-2px)}

/* =========================================================================
   NO LINES, NO BOXES - YERAZ house rule
   Straight dividers and boxed panels give the 'generated' feel. Space,
   typography and colour do the work. The only exception: the focus
   outline for keyboard users (accessibility).
   ========================================================================= */

/* ---- menu: no card, no lines, no arrows ---- */
.menu{
  background:
    radial-gradient(110% 52% at 78% 2%, rgba(200,150,146,.26) 0%, rgba(200,150,146,0) 60%),
    radial-gradient(90% 42% at 6% 74%, rgba(156,92,84,.16) 0%, rgba(156,92,84,0) 64%),
    var(--page);
  backdrop-filter:blur(6px);
}
.menu__silk{
  position:absolute;top:35%;left:-24%;width:min(112%,1370px);max-width:none;
  opacity:.2;pointer-events:none;z-index:0;
}
.menu__panel,
.menu[data-open="true"] .menu__panel{
  position:relative;z-index:1;
  width:auto;background:transparent;border-radius:0;padding:0;box-shadow:none;transform:none;
}
.menu__list{gap:clamp(4px,1vh,12px);text-align:center}
.menu__list a{
  display:inline-block;border:0;padding:clamp(4px,.8vh,10px) 8px;
  font-family:var(--display);font-size:clamp(1.4rem,3.4vw,2.7rem);line-height:1.08;
  letter-spacing:-.015em;color:var(--bordeaux);transition:color .25s ease;
}
/* on hover italic and bordeaux - the same movement as 'dans' in the heading */
.menu__list a:hover,.menu__list a:focus-visible{color:var(--ink);font-style:italic;padding-left:8px}
.menu__list .arrow,.menu__close{display:none}
@media (prefers-reduced-motion:no-preference){
  .menu[data-open="true"] .menu__list a{animation:menuIn .6s cubic-bezier(.22,1,.36,1) both}
  .menu[data-open="true"] .menu__list li:nth-child(2) a{animation-delay:.07s}
  .menu[data-open="true"] .menu__list li:nth-child(3) a{animation-delay:.14s}
  .menu[data-open="true"] .menu__list li:nth-child(4) a{animation-delay:.21s}
  @keyframes menuIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}
/* the header stays above the open menu: logo on the left, the cross on the right closes it */
body.menu-open .topbar{z-index:60}

/* ---- footer: no line above it, icons without a ring ---- */
.site-foot{border-top:0}
.site-foot__icons a,.site-foot__icons .soon{border:0}
.site-foot__icons a:hover{background:transparent;color:var(--primary)}

/* ---- homepage: location link without underline ---- */
.grand__maps b,
.grand__maps:hover b,.grand__maps:focus-visible b{border-bottom:0}

/* ---- info and privacy: space instead of dividers ---- */
.info__rule{display:none}
.info section + section{margin-top:clamp(40px,5.4vw,72px)}

/* ---- sign-up: choices, fields and checkboxes without borders ---- */
.choice__box{border-bottom:0}
.choice input:checked + .choice__box{border:0}
.choice input:checked + .choice__box .choice__title{color:var(--bordeaux)}
.choice__dot{border:0;background:rgba(76,0,12,.09)}

/* input fields: a soft fill colour instead of a line underneath, otherwise
   nobody can see where to type */
.field input{border:0;border-radius:14px;background:rgba(76,0,12,.045);padding:14px 16px}
.field input:hover{background:rgba(76,0,12,.065)}
.field input:focus{border:0;background:rgba(76,0,12,.08);padding:14px 16px}
.field input[aria-invalid="true"]{border:0;background:rgba(179,38,30,.09)}

.consent__box{border:0;background:rgba(76,0,12,.09)}
.consent input:checked + .consent__box{background:var(--primary)}
.consent[data-invalid="true"] .consent__box{background:rgba(179,38,30,.2);box-shadow:none}

@media (min-width:700px){.terms__grid{background:none}}

/* ---- thank-you dialog: no card, just like the menu ---- */
.modal{background:rgba(252,247,241,.97);backdrop-filter:blur(6px)}
.modal__box{background:transparent;box-shadow:none;border-radius:0;width:min(620px,100%)}
.modal__close,.modal__close:hover{background:transparent;color:var(--bordeaux)}

/* ---- form controls follow the site's fonts ----
   Browsers don't let buttons and input fields inherit the font by default.
   Text therefore uses the sans-serif, as on the homepage;
   the serif stays for headings. */
button,input,select,textarea{font-family:inherit}
.field input{font-family:var(--sans);font-size:clamp(15px,.3vw + 14px,16px)}
.field input::placeholder{font-family:var(--sans);font-size:inherit}

/* An empty date of birth looks like the other placeholder texts (jj/mm/aaaa in soft
   rose-grey); while typing and once filled in it goes back to normal ink. */
.field input[type=date]:invalid:not(:focus)::-webkit-datetime-edit{color:#B6A09B}
.field input[type=date]::-webkit-calendar-picker-indicator{opacity:.45;cursor:pointer;transition:opacity .2s ease}
.field input[type=date]:hover::-webkit-calendar-picker-indicator{opacity:.8}