/* Merel's own illustrations and the direction in aanpassingenwebsite.pptx.
   Adelle II is preferred, but is NOT bundled. See FONT-INSTELLEN.md.
   Georgia is the deliberate, temporary fallback in this concept. */
:root {
  --heading: 'Adelle II', Georgia, 'Times New Roman', serif;
  --header-height: 94px;
}
h1,h2,h3 { font-weight: 700; letter-spacing: -.045em; }
.brand { gap: 11px; min-width: 0; }
.wordmark { font-size: clamp(23px,2.05vw,31px); font-family:var(--body); font-weight:600; letter-spacing:-.03em; word-spacing:.02em; white-space:nowrap; line-height:1.02; }
.brand-bird { width: 49px; height: 45px; object-fit:contain; }
.merel-bird { object-fit: contain; }
.desktop-nav { margin-left:0; gap:29px; }
.header-inner { gap:24px; }
.ink-on-paper { mix-blend-mode:multiply; }
.hero { grid-template-columns:1.08fr 1fr; gap:5px; min-height:730px; padding-block:34px 55px; }
.hero h1 { font-size:clamp(55px,5.55vw,80px); font-weight:700; line-height:1.10; letter-spacing:-.06em; white-space:normal; }
.hero-description { max-width:425px; margin-top:36px; font-size:16px; }
.hero-art { height:608px; }
.hero-actions { gap:24px; }
.hero-footnote { margin-top:33px; }
.postcard-front.portrait-postcard { top:106px; left:10%; width:71%; padding:25px 21px 10px; transform:translateY(var(--parallax-y,0px)) rotate(-7deg); background:var(--paper); }
.portrait-postcard .merel-portrait { aspect-ratio:.95; object-fit:contain; width:100%; }
.portrait-postcard .postcard-caption { font-size:24px; padding:19px 7px 9px; }
.postcard-back { width:65%; top:74px; left:32%; }
.postcard-back img { aspect-ratio:.94; }
.art-stamp { top:340px; right:1%; }
.art-stamp>div { background:var(--paper); outline-color:var(--paper); border-color:var(--blue); color:var(--blue); }
.art-stamp .merel-bird { width:66px; height:65px; }
.hand-note { top:15px; left:10%; font-size:26px; }
.paper-note { bottom:5px; right:15%; width:254px; }
.paper-note span { font-size:22px; }
/* The original drawing, as cream ink directly on the blue section. */
.philosophy { padding-block:92px; }
.philosophy-grid { grid-template-columns:110px minmax(0,1fr) 294px; column-gap:35px; align-items:start; }
.philosophy .section-index { font-size:9px; letter-spacing:.08em; }
.philosophy h2 { font-size:clamp(42px,4.1vw,59px); font-weight:600; line-height:1.15; letter-spacing:-.05em; }
.philosophy-bottom { margin-top:40px; }
.philosophy-bottom>p { max-width:480px; font-size:15px; }
.thought-art { align-self:center; padding-top:18px; }
.thought-print { background:transparent; padding:0; box-shadow:none; transform:none; border:0; border-radius:0; }
.thought-print img { width:100%; height:auto; filter:url("#merel-cream-ink"); mix-blend-mode:normal; }
.thought-art figcaption { font:italic 22px/1.35 var(--heading); color:var(--cream); margin:27px 0 0 18px; transform:rotate(-3deg); }
.section-heading h2 { font-size:clamp(41px,4.1vw,58px); line-height:1.12; }
.feature-copy h3 { font-size:clamp(40px,3.9vw,55px); line-height:1.08; }
.travel-postcard>p { font-size:clamp(29px,2.85vw,40px); letter-spacing:-.045em; line-height:1.08; }
.postcard-lines>.merel-bird { width:36px; height:36px; }
.travel-note { font-size:19px; }
.offerings-pair h3 { font-size:clamp(31px,2.8vw,39px); line-height:1.12; }
/* Project op maat is no longer hidden in a small text strip. */
.custom-project { display:grid; grid-template-columns:minmax(200px, .84fr) 1.16fr; align-items:center; gap:65px; border-top:0; padding:28px 58px 27px 36px; margin-top:24px; border-radius:14px; background:#eeeada; overflow:hidden; }
.custom-project-art { width:100%; }
.custom-project-art img { width:100%; max-height:280px; object-fit:contain; }
.custom-project-copy .section-index { color:var(--olive); font-size:10px; margin:0 0 17px; }
.custom-project h3 { font-size:35px; color:var(--blue); line-height:1.14; }
.custom-project-copy>p:not(.section-index) { margin-top:15px; font-size:14px; max-width:380px; }
.custom-project .text-link { margin-top:12px; }
.looking-artwork { background:var(--paper); }
.painting-window { background:var(--paper); padding:20px; }
.painting-window .painting-fallback { width:100%; height:100%; object-fit:contain; }
.question-content h3 { font-size:clamp(31px,3.05vw,43px); line-height:1.13; }
.looking-heading h2 { font-size:clamp(39px,4vw,58px); }
/* Full-length self-portrait. Keep the complete silhouette, not a face crop. */
.about { grid-template-columns:1fr 1fr; gap:90px; padding-block:116px; }
.about-art { position:relative; padding:0 5px 35px; }
.portrait-stage { position:relative; min-height:565px; height:610px; isolation:isolate; }
.portrait-backdrop { position:absolute; left:2%; right:0; bottom:6%; top:7%; background:#e8e7d2; border-radius:220px 220px 9px 9px; transform:rotate(-3deg); z-index:-1; }
.standing-portrait { width:auto; height:100%; max-width:85%; object-fit:contain; position:relative; margin:0 auto; }
.portrait-signature { position:absolute; left:3%; bottom:9%; font:italic 34px/1.08 var(--heading); color:var(--blue); transform:rotate(-7deg); }
.about-small-note { bottom:0; right:-12px; font-size:23px; }
.about-copy h2 { font-size:clamp(40px,3.7vw,54px); line-height:1.12; }
.about-copy>p:not(.section-index) { font-size:15px; }
.about-copy>p.about-belief { font-family:var(--heading); font-style:italic; font-size:24px; }
.contact h2 { font-size:clamp(41px,4.35vw,63px); line-height:1.12; }
.contact-signoff .merel-bird { width:90px; height:85px; }
.dialog-brand { font-size:24px; letter-spacing:-.05em; }
.dialog-title { line-height:1.12; }
.dialog-project-art { width:290px; max-width:70%; margin:5px auto 30px; }
.legal-hero h1 { line-height:1.15; }
.legal-header .wordmark { font-size:27px; }
.preview-notice { font-size:11px; background:#eeeada; }
.footer-main { column-gap:26px; }
.footer-main>p { margin-left:0; }
@media(max-width:1180px) {
  .hero { min-height:660px; }
  .hero-art { height:542px; }
  .hero h1 { font-size:5.65vw; }
  .hero-actions { gap:14px; }
  .postcard-front.portrait-postcard { top:103px; left:7%; width:75%; padding:20px 16px 8px; }
  .postcard-back { top:79px; left:28%; width:70%; }
  .paper-note { bottom:3px; right:8%; width:242px; }
  .art-stamp { top:302px; right:0; }
  .hand-note { left:9%; top:12px; font-size:23px; }
  .philosophy-grid { grid-template-columns:95px minmax(0,1fr) 236px; gap:28px; }
  .philosophy h2 { font-size:4.3vw; }
  .thought-print { padding:0; }
  .thought-art figcaption { font-size:20px; }
  .custom-project { gap:35px; padding:26px 34px; }
  .about { gap:58px; }
  .portrait-stage { height:550px; min-height:0; }
  .portrait-signature { font-size:28px; left:0; }
}
@media(max-width:980px) {
  :root { --header-height:80px; }
  .wordmark { font-size:25px; }
  .brand-bird { width:40px; height:40px; }
  .desktop-nav { gap:17px; }
  .desktop-nav a { font-size:12px; }
  .header-cta { font-size:11px; padding:10px 13px; gap:10px; }
  .hero { min-height:590px; }
  .hero-art { height:485px; }
  .hero-description { font-size:14px; }
  .hero-actions { gap:10px; }
  .portrait-postcard .postcard-caption { font-size:19px; padding:14px 0 6px; }
  .paper-note { bottom:3px; width:206px; right:5%; }
  .paper-note span { font-size:19px; }
  .art-stamp { top:272px; right:-1%; }
  .art-stamp .merel-bird { width:43px; height:46px; }
  .philosophy-grid { grid-template-columns:minmax(0,1fr) 265px; gap:23px 37px; }
  .section-kicker { grid-column:1 / -1; }
  .section-kicker .mini-flower { display:none; }
  .philosophy .section-index { margin:0 0 8px; }
  .philosophy h2 { font-size:4.75vw; }
  .philosophy-bottom>p { font-size:14px; }
  .section-heading h2 { font-size:42px; }
  .section-heading>p { font-size:13px; }
  .feature-copy h3 { font-size:40px; }
  .travel-postcard>p { font-size:29px; }
  .offerings-pair h3 { font-size:32px; }
  .custom-project h3 { font-size:29px; }
  .custom-project-copy>p:not(.section-index) { font-size:13px; }
  .portrait-stage { height:495px; }
  .about-copy h2 { font-size:39px; }
  .about-copy>p:not(.section-index) { font-size:14px; }
  .about-copy>p.about-belief { font-size:22px; }
  .about-small-note { font-size:20px; padding:15px 18px; }
  .contact h2 { font-size:39px; }
}
@media(max-width:820px) and (min-width:761px) {
  .desktop-nav { display:none; }
  .header-inner { gap:20px; }
  .header-cta { margin-left:auto; }
  .menu-toggle { display:grid; }
}
@media(max-width:760px) {
  :root { --header-height:76px; }
  .wordmark,.legal-header .wordmark { font-size:clamp(22px,5.6vw,29px); }
  .brand { gap:8px; }
  .brand-bird,.legal-header .brand-bird { width:39px; height:39px; }
  .hero { padding-block:37px 19px; gap:0; min-height:0; }
  .hero h1 { font-size:clamp(36px,9.05vw,65px); line-height:1.14; letter-spacing:-.064em; }
  .hero-description { margin-top:30px; font-size:14px; max-width:430px; }
  .hero-actions { gap:17px; }
  .hero-actions>.button { padding:13px 17px; }
  .hero-footnote { margin-top:25px; }
  .hero-art { width:100%; max-width:455px; aspect-ratio:1.03; height:auto; min-height:332px; margin-top:26px; }
  .postcard-front.portrait-postcard { top:52px; left:10%; width:69%; padding:18px 15px 6px; }
  .portrait-postcard .merel-portrait { aspect-ratio:1; }
  .portrait-postcard .postcard-caption { padding:10px 0 6px; font-size:19px; }
  .postcard-back { top:41px; left:33%; width:59%; }
  .postcard-back img { aspect-ratio:.87; }
  .hand-note { top:-4px; left:6%; font-size:20px; }
  .hand-note svg { left:104px; }
  .art-stamp { top:48%; right:3%; width:77px; height:99px; }
  .art-stamp .merel-bird { width:43px; height:44px; }
  .paper-note { bottom:-2%; right:12%; width:205px; min-height:61px; padding:12px 16px; }
  .paper-note span { font-size:18px; }
  .philosophy { padding-block:59px 67px; }
  .philosophy-grid { grid-template-columns:1fr; gap:26px; }
  .section-kicker { grid-column:auto; }
  .philosophy h2 { font-size:clamp(31px,7.3vw,49px); line-height:1.19; letter-spacing:-.045em; }
  .philosophy-bottom { margin-top:35px; }
  .philosophy-bottom>p { font-size:14px; max-width:450px; }
  .thought-art { width:min(282px,83%); padding-top:13px; margin:0 auto; }
  .thought-print { padding:0; }
  .thought-art figcaption { text-align:center; font-size:21px; margin:24px 0 0; }
  .section-heading h2 { font-size:clamp(31px,7.7vw,46px); line-height:1.16; }
  .section-heading>p { font-size:14px; }
  .feature-copy h3 { font-size:40px; }
  .travel-postcard>p { font-size:35px; }
  .travel-note { font-size:20px; }
  .offerings-pair h3 { font-size:31px; line-height:1.12; }
  .custom-project { grid-template-columns:1fr; gap:15px; padding:28px 26px 30px; margin-top:18px; }
  .custom-project-art { max-width:330px; margin:0 auto; }
  .custom-project-art img { max-height:234px; }
  .custom-project h3 { font-size:30px; }
  .custom-project-copy .section-index { margin-bottom:13px; }
  .custom-project-copy>p:not(.section-index) { font-size:14px; }
  .custom-project .text-link { margin-top:12px; }
  .looking-heading h2 { font-size:35px; line-height:1.15; }
  .question-content h3 { font-size:34px; }
  .about { grid-template-columns:1fr; gap:53px; padding-block:69px; }
  .about-art { width:100%; max-width:440px; padding:0 0 28px; margin:0 auto; }
  .portrait-stage { height:490px; min-height:0; }
  .portrait-backdrop { left:2%; right:2%; bottom:6%; top:5%; }
  .standing-portrait { max-width:82%; }
  .portrait-signature { left:3%; bottom:10%; font-size:29px; }
  .about-small-note { bottom:0; right:0; font-size:20px; padding:14px 18px; }
  .about-copy h2 { font-size:39px; line-height:1.14; }
  .about-copy>p:not(.section-index) { font-size:15px; }
  .about-copy>p.about-belief { font-size:22px; }
  .contact h2 { font-size:clamp(32px,8vw,47px); line-height:1.2; }
  .contact-signoff .merel-bird { width:71px; height:68px; }
  .dialog-brand { font-size:21px; }
  .dialog-title { font-size:37px; line-height:1.15; }
  .dialog-project-art { width:230px; }
  .legal-header .button { padding:10px 13px; font-size:11px; }
  .legal-header .button svg { display:none; }
  .footer-main { gap:24px; }
  .footer-main .wordmark { font-size:26px; }
  .legal-hero h1 { font-size:clamp(33px,9vw,45px); }
}
@media(max-width:375px) {
  .wrap { width:calc(100% - 36px); }
  .wordmark,.legal-header .wordmark { font-size:22px; }
  .brand-bird,.legal-header .brand-bird { width:31px; height:33px; }
  .header-inner { gap:8px; }
  .menu-toggle { width:40px; height:40px; }
  .hero h1 { font-size:9.5vw; }
  .hero-art { min-height:307px; }
  .hero-actions { gap:9px; }
  .hero-actions>.button { font-size:11px; padding:13px 14px; gap:7px; }
  .hero-actions>.text-link { font-size:11px; }
  .portrait-postcard .postcard-caption { font-size:16px; }
  .paper-note { width:187px; bottom:1%; }
  .philosophy h2 { font-size:8vw; }
  .feature-copy h3 { font-size:35px; }
  .travel-postcard>p { font-size:30px; }
  .portrait-stage { height:435px; }
  .portrait-signature { font-size:24px; }
  .about-copy h2 { font-size:35px; }
  .legal-header .button { padding:10px; font-size:10px; }
  .legal-header nav { gap:0; }
  .contact h2 { font-size:9vw; }
}
@media(prefers-reduced-motion:reduce) {
  .postcard-front.portrait-postcard { transform:rotate(-7deg); }
}
@media print {
  .thought-art,.custom-project-art { display:none; }
  .philosophy-grid { display:block; }
  .philosophy-bottom>p { color:#111; }
  .custom-project { display:block; background:none; padding:20px 0; }
}
/* Make blend compositing include the page color outside the olive arch. */
.portrait-stage { background:var(--cream); }

/* The note sits below the illustration, so hands, legs and shoes stay visible. */
.about-art { padding-bottom:0; }
.about-small-note { position:relative; right:auto; bottom:auto; width:max-content; max-width:94%; margin:13px 0 0 auto; }

.contact-signoff .merel-bird { background:var(--cream); border-radius:50%; padding:9px; }

/* An editorial reference rather than an endorsement or a reproduced article. */
.press-note { margin-top:30px; padding-top:21px; border-top:1px solid rgba(75,25,10,.18); max-width:470px; }
.press-note>.section-index { font-size:9px; letter-spacing:.15em; margin:0 0 13px; color:var(--olive); }
.press-link { display:flex; align-items:center; justify-content:space-between; gap:24px; color:var(--brown); text-decoration:none; min-height:54px; padding:3px 0; }
.press-link strong { display:block; font-family:var(--heading); font-size:23px; line-height:1.25; letter-spacing:-.035em; }
.press-link-caption { display:block; margin-top:7px; color:var(--brown); font-size:12px; line-height:1.55; }
.press-link>svg { flex:0 0 38px; width:38px; height:38px; padding:9px; border:1px solid rgba(75,25,10,.22); border-radius:50%; color:var(--blue); transition:transform .25s ease,background .25s ease; }
.press-link:hover>svg { transform:translate(2px,-2px); background:rgba(34,43,200,.05); }
.press-link:hover .press-link-caption { text-decoration:underline; text-underline-offset:4px; }
.press-link:focus-visible { outline:2px solid var(--blue); outline-offset:6px; border-radius:3px; }
@media(max-width:760px) { .press-note { margin-top:26px; padding-top:20px; } .press-link strong { font-size:22px; } }
@media(prefers-reduced-motion:reduce) { .press-link>svg { transition:none; } .press-link:hover>svg { transform:none; } }
html[data-motion="off"] .press-link>svg { transition:none; transform:none; }

/* v3: words and curl have separate layout boxes, independent of installed fonts. */
.hand-note { display:flex; align-items:center; gap:12px; width:max-content; max-width:96%; z-index:3; }
.hand-note-text { display:block; flex:0 0 auto; }
.hand-note-text>span { display:block; white-space:nowrap; }
.hand-note .hand-note-arrow { position:static; inset:auto; flex:0 0 64px; width:64px; height:68px; margin-top:9px; transform:none; }
@media(max-width:1180px) and (min-width:761px) {
  .hand-note { left:6%; font-size:21px; gap:9px; }
  .hand-note .hand-note-arrow { width:50px; height:58px; flex-basis:50px; }
}
@media(max-width:760px) {
  .hand-note { top:0; left:5%; font-size:20px; gap:10px; }
  .hand-note .hand-note-arrow { width:49px; height:58px; flex-basis:49px; margin-top:7px; }
  .hero-art { aspect-ratio:.95; min-height:360px; margin-top:32px; }
  .postcard-front.portrait-postcard { top:78px; }
  .postcard-back { top:67px; }
}
@media(max-width:375px) {
  .hand-note { font-size:18px; gap:8px; }
  .hand-note .hand-note-arrow { width:42px; height:54px; flex-basis:42px; }
  .hero-art { min-height:340px; }
}
@media print { .thought-print img { filter:none; } }

/* v4: the opening self-portrait is a free-standing drawing, not a postcard.
   The supplied drawing is unchanged. Multiply lets its white paper disappear
   into the cream page. The local background supports isolated compositing. */
.hero-art-portrait {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:110px 18px 24px;
  background:var(--cream);
  perspective:none;
}
.hero-portrait {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:520px;
  height:100%;
  min-height:0;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  transform:translateY(var(--parallax-y,0px));
  mix-blend-mode:multiply;
}
.hero-portrait .merel-portrait {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  mix-blend-mode:normal;
}
.enhanced .hero-portrait .merel-portrait {
  animation:heroEnter 1.15s var(--ease) .12s both;
}
@media(max-width:760px) {
  .hero-art-portrait {
    height:auto;
    min-height:0;
    aspect-ratio:auto;
    padding:94px 0 18px;
    margin-top:26px;
  }
  .hero-art-portrait .hero-portrait {
    width:96%;
    height:auto;
    transform:none;
  }
  .hero-portrait .merel-portrait { height:auto; }
}
@media(prefers-reduced-motion:reduce) {
  .enhanced .hero-portrait .merel-portrait { animation:none; }
  .hero-art-portrait .hero-portrait { transform:none; }
}
html[data-motion="off"] .hero-portrait,
html[data-motion="off"] .hero-portrait .merel-portrait {
  animation:none;
  transform:none;
}

/* V11: shared hand-lettered wordmark. No system-font fallback. */
.brand .brand-wordmark,.mix-brand .brand-wordmark {
  display:block;width:184px;height:auto;max-width:none;aspect-ratio:359 / 107;
  flex:0 0 auto;object-fit:contain;margin:0;padding:0;border:0;box-shadow:none;transform:none;
}
.brand,.mix-brand {align-items:center;}
@media(max-width:850px){.brand .brand-wordmark,.mix-brand .brand-wordmark{width:166px;}}
@media(max-width:700px){.brand .brand-wordmark,.mix-brand .brand-wordmark{width:158px;}.legal-header .header-inner{gap:10px;}}
@media(max-width:370px){.brand .brand-wordmark,.mix-brand .brand-wordmark{width:145px;}.legal-header .brand{gap:5px;}}