@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght,SOFT,WONK@9..144,400,70,1;9..144,500,70,1;9..144,600,70,1&display=swap');

/* MODDER & FLODDER | Eerste versie | gebouwd als lichte, toegankelijke statische site */
:root {
  --paper: #fcfaf4;
  --paper2: #f2ecdf;
  --ink: #39392f;
  --muted: #777467;
  --line: #e5dece;
  --accent: #c76c5c;
  --accent-dark: #a94c3c;
  --tint: #f7e8d7;
  --green: #839a80;
  --hero: #f2e9df;
  --radius: 16px;
  --large-radius: 180px 180px 18px 18px;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --shadow: 0 24px 70px rgba(72, 54, 39, .1);
}
body { font-family:var(--sans); letter-spacing:-.01em; background:var(--paper); }
.utility-hidden { display:none; }
.announcement { background:#f6d7b2; color:#64453a; font-size:11px; letter-spacing:.095em; font-weight:700; padding:11px 18px; text-transform:uppercase; }
.announcement span { display:inline-block; margin:0 14px; color:var(--accent-dark); }
.site-header { background:rgba(252,250,244,.97); backdrop-filter:blur(12px); box-shadow:0 5px 25px rgba(71,55,41,.035); }
.header-inner { height:94px; gap:22px; }
.brand { gap:12px; text-align:left; flex-shrink:0; }
.brand .stamp { position:relative; font-family:var(--serif); font-size:19px; letter-spacing:-.12em; font-style:italic; font-weight:700; border:2px solid var(--accent); color:var(--accent-dark); width:57px; height:57px; border-radius:50%; transform:rotate(-11deg); padding:0 3px 0 0; box-shadow:2px 3px 0 #e9bc92; transition:transform .22s ease; }
.brand:hover .stamp { transform:rotate(-2deg); }
.stamp-amp { font-size:.8em; margin:0 1px; }
.brand-name { font-family:var(--serif); font-size:clamp(21px,2vw,27px); font-weight:600; letter-spacing:-.062em; white-space:nowrap; line-height:1; text-transform:lowercase; }
.brand-name em { color:var(--accent-dark); font-weight:500; }
.brand-name .period { color:var(--accent-dark); }
.brand-sub { letter-spacing:.16em; font-family:var(--sans); font-size:8px; margin-top:7px; font-weight:700; text-transform:uppercase; color:var(--muted); }
.nav { gap:clamp(12px,1.6vw,24px); }
.nav button { font-size:12px; letter-spacing:.01em; font-weight:600; white-space:nowrap; transition:color .15s; }
.nav button:hover,.nav button.active { color:var(--accent-dark); }
.nav button.active::after { background:var(--accent); }
.icon-btn { color:var(--ink); }
.cart-count { background:var(--accent); color:#fff; font-family:var(--sans); font-size:9px; }
.btn { background:var(--accent-dark); color:#fff; border-color:var(--accent-dark); border-radius:100px; padding:15px 25px; font-size:13px; font-weight:700; min-height:54px; box-shadow:0 8px 16px rgba(169,76,60,.12); }
.btn:hover { background:#823d32; border-color:#823d32; box-shadow:0 9px 20px rgba(169,76,60,.22); transform:translateY(-2px); }
.btn.outline { background:transparent; color:var(--accent-dark); }
.btn.outline:hover { background:var(--accent-dark); color:#fff; }
.btn.light { background:#fcfaf4; color:var(--ink); border-color:#fcfaf4; }
.text-link { font-weight:700; font-size:13px; }
.label,.eyebrow { color:var(--accent-dark); font-weight:700; letter-spacing:.15em; }
.fleur { font-style:italic; color:var(--accent-dark); }
.hero { background:var(--hero); min-height:665px; }
.hero::before { content:''; position:absolute; inset:0; opacity:.28; pointer-events:none; background-image:radial-gradient(#c8a794 0.9px,transparent 0.9px); background-size:20px 20px; mask-image:linear-gradient(90deg,transparent 20%,black 90%); }
.hero-inner { min-height:665px; padding-top:50px; padding-bottom:55px; grid-template-columns:1.13fr .87fr; gap:52px; position:relative; }
.hero-copy { position:relative; z-index:2; }
.hero h1 { font-family:var(--serif); font-weight:600; font-size:clamp(66px,6.55vw,99px); line-height:1.12; letter-spacing:-.065em; margin-top:29px; margin-bottom:22px; }
.hero h1 em { color:var(--accent-dark); font-weight:500; font-style:italic; white-space:nowrap; }
.hero-copy p { font-size:16px; line-height:1.85; max-width:490px; color:#665f55; }
.hero-buttons { margin-top:30px; gap:30px; }
.hero-visual { align-self:center; padding:18px 5px 16px 28px; overflow:visible; }
.hero-visual::before { content:''; position:absolute; width:86%; height:87%; top:5%; left:7%; border:2px solid #d6bda8; border-radius:47% 47% 12px 12px; transform:rotate(7deg); }
.hero-image { width:100%; object-fit:cover; aspect-ratio: .82; border-radius:49% 49% 12px 12px; position:relative; box-shadow:15px 20px 0 rgba(215,169,145,.22); }
.visual-circle { background:#f9dc9e; color:#644c3d; font-family:var(--serif); font-style:italic; font-size:23px; line-height:1.14; width:145px; height:145px; border-radius:50%; right:-14px; bottom:-11px; box-shadow:0 11px 35px #805b4320; transform:rotate(9deg); }
.visual-flower { color:var(--accent); font-size:90px; right:0; top:0; opacity:.9; transform:rotate(12deg); }
.hero-caption { color:#604b3d; text-shadow:none; bottom:25px; left:54px; font-weight:700; font-size:9px; }
.benefits { background:#fcfaf4; }
.benefit .symbol { color:var(--accent-dark); font-size:25px; }
.benefit strong { font-weight:700; }
.section-pad { padding-top:105px; padding-bottom:105px; }
.section-head h2,.story-content h2,.newsletter h2 { font-family:var(--serif); font-weight:500; letter-spacing:-.042em; line-height:1.18; }
.section-head h2 em,.story-content h2 em { color:var(--accent-dark); }
.product-card { transition:transform .2s ease; }
.product-card:hover { transform:translateY(-4px); }
.product-picture { background:#efe3d7; border-radius:16px; overflow:hidden; }
.product-picture img,.gallery-item img,.journal-card img,.workshop-card img { transition:transform .55s ease; }
.product-picture:hover img,.gallery-item:hover img,.journal-card:hover img,.workshop-card:hover img { transform:scale(1.055); }
.product-tag { border-radius:100px; background:#f9e8ba; color:#76523f; }
.product-name { font-family:var(--serif); font-size:25px; font-weight:500; }
.product-price { color:var(--accent-dark); font-weight:700; }
.story-block { background:#e8eddf; }
.story-content h2 { color:#334a39; }
.story-content h2 em { color:#a55340; }
.story-content p { color:#5d6a59; }
.story-image img { object-fit:cover; }
.workshop-panel { background:#79947d; border-radius:23px; }
.workshop-panel h2 { font-family:var(--serif); font-weight:500; }
.workshop-panel .label { color:#ffdfab; }
.workshop-panel .content { padding-left:66px; }
.workshop-panel .photo img { object-fit:cover; }
.badge-circle { background:#f7d4a3; color:#8f473d; font-family:var(--serif); }
.journal-card .image { border-radius:16px; }
.journal-card h3 { font-family:var(--serif); font-weight:500; }
.newsletter { background:#f3d8ca; color:#5f403b; padding:66px 0; }
.newsletter h2 { font-weight:500; }
.newsletter .label { color:#925044; }
.newsletter-cta { display:flex; flex-wrap:wrap; gap:20px; align-items:center; }
.newsletter-cta .text-link { color:#6c4640; }
.page-title { background:#efe8d9; position:relative; overflow:hidden; }
.page-title::after { content:'✳'; font-size:270px; color:#d9b4a0; opacity:.23; position:absolute; right:3%; top:-120px; pointer-events:none; transform:rotate(-12deg); }
.page-title .container { position:relative; z-index:1; }
.page-title h1 { font-family:var(--serif); font-weight:500; letter-spacing:-.056em; }
.page-title p { line-height:1.85; }
.filter { border-radius:100px; font-weight:700; }
.filter.active { background:var(--accent-dark); color:#fff; border-color:var(--accent-dark); }
.gallery-item { border-radius:16px; }
.workshop-card { border-radius:16px; overflow:hidden; }
.workshop-card-content h3 { font-family:var(--serif); font-size:28px; font-weight:500; }
.builder-category { color:var(--accent-dark); }
.module { border-radius:15px; }
.module.selected { background:#f9ebe3; border-color:var(--accent-dark); }
.module .check { border-radius:50%; }
.summary-card { border-radius:18px; background:#f6efe6; border:1px solid var(--line); }
.summary-card h3 { font-family:var(--serif); font-weight:500; }
.summary-card .field { background:#fffdfa; border-radius:8px; }
.total strong { color:var(--accent-dark); }
.tut-menu button.active { color:var(--accent-dark); border-color:var(--accent-dark); }
.tutorial-title,.tutorial-card h2 { font-family:var(--serif); font-weight:500; }
.about-grid h2 { font-family:var(--serif); font-weight:500; }
.footer { background:#333b30; }
.footer .stamp { color:#ffe9d4; border-color:#dca996; }
.footer .brand-name { color:#fffaf0; }
.footer .brand-name em,.footer .brand-name .period { color:#f2bdab; }
.footer .brand-sub { color:#dedbcc; }
.footer .mail-link { color:#ffe2a2; text-decoration:underline; text-underline-offset:3px; }
.dialog { border-radius:18px; overflow:hidden; }
.dialog h2 { font-family:var(--serif); font-weight:500; }
.dialog-close { border-radius:50%; }
.toast { border-radius:12px; background:#383d33; }
:focus-visible { outline:3px solid #ba594b!important; outline-offset:4px!important; }
@media(max-width:1250px) {
  .header-inner { padding:0 24px; }
  .brand-name { font-size:23px; }
  .brand .stamp { width:49px; height:49px; }
  .nav { gap:14px; }
  .nav button { font-size:11px; }
  .hero h1 { font-size:clamp(65px,6.7vw,90px); }
  .hero-inner { gap:22px; }
}
@media(max-width:900px) {
  .header-inner { height:80px; }
  .nav { top:80px; gap:0; background:var(--paper); border-bottom:1px solid var(--line); box-shadow:0 10px 20px #3b332614; }
  .nav button { padding:15px 10px; font-size:14px; }
  .hero,.hero-inner { min-height:0; }
  .hero-inner { padding-top:65px; padding-bottom:60px; }
  .hero h1 { font-size:clamp(60px,9vw,86px); }
  .hero-visual { padding:25px; }
  .visual-circle { width:115px; height:115px; font-size:18px; }
  .newsletter-cta { flex-direction:column; align-items:flex-start; }
}
@media(max-width:650px) {
  .announcement { font-size:9px; line-height:1.55; letter-spacing:.06em; }
  .announcement span { margin:0 3px; }
  .header-inner { height:72px; padding:0 16px; }
  .brand { gap:8px; }
  .brand-name { font-size:19px; letter-spacing:-.055em; }
  .brand-sub { letter-spacing:.095em; font-size:7px; white-space:nowrap; }
  .brand .stamp { width:43px; height:43px; font-size:15px; }
  .nav { top:72px; }
  .hero-inner { padding-top:54px; gap:10px; }
  .hero-copy { padding:0 8px; }
  .hero h1 { font-size:clamp(52px,10.8vw,76px); line-height:1.1; letter-spacing:-.061em; }
  .hero h1 em { white-space:normal; }
  .hero-copy p { font-size:14px; max-width:440px; }
  .hero-buttons { align-items:flex-start; gap:19px; }
  .hero-visual { padding:25px 28px 10px; max-width:430px; margin:10px auto 0; }
  .hero-image { max-height:480px; }
  .visual-circle { right:4px; bottom:0; }
  .hero-caption { left:43px; bottom:20px; }
  .section-pad { padding-top:69px; padding-bottom:69px; }
  .section-head h2 { font-size:clamp(38px,9vw,50px); }
  .story-content { padding:54px 28px; }
  .workshop-panel .content { padding:48px 27px; }
  .page-title { padding:55px 0; }
  .page-title h1 { font-size:clamp(50px,11vw,69px); }
  .page-title::after { font-size:170px; top:-60px; right:-5%; }
  .product-name { font-size:21px; }
  .newsletter-cta .btn { width:100%; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
}
.builder-aside .field { width:100%; }
.builder-aside textarea.field { min-height:84px; resize:vertical; line-height:1.5; padding:13px 14px; }
.request-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:18px; }
.request-actions .btn { text-align:center; }
@media(max-width:650px) { .request-actions { flex-direction:column; align-items:stretch; } }
.header-cta { min-height:43px; padding:11px 20px; font-size:11px; white-space:nowrap; box-shadow:none; }
.faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px 30px; }
.faq-grid details { padding:18px 19px; border:1px solid var(--line); border-radius:13px; background:#fffcf7; }
.faq-grid summary { cursor:pointer; font-family:var(--serif); font-size:19px; font-weight:500; display:flex; align-items:center; justify-content:space-between; gap:15px; list-style:none; }
.faq-grid summary::-webkit-details-marker { display:none; }
.faq-grid summary span { color:var(--accent-dark); font-family:var(--sans); font-size:23px; }
.faq-grid details[open] summary span { transform:rotate(45deg); }
.faq-grid details p { line-height:1.75; font-size:13px; color:var(--muted); padding-top:10px; margin-bottom:0; }
@media(max-width:1250px) { .header-cta { display:none; } }
@media(max-width:700px) { .faq-grid { grid-template-columns:1fr; } }