/* BOETIEK · airy boutique / dekor
   Linen white, sage, blush, lots of air. Elegant high-contrast serif (Cormorant
   Garamond) + light geometric sans (Jost). Arched image frames. Default hero: split. */
:root {
  --c-bg: #fbf8f4;
  --c-surface: #ffffff;
  --c-surface-2: #f2ece4;
  --c-text: #2e2a27;
  --c-muted: #645d57;
  --c-primary: #4f6455;
  --c-on-primary: #ffffff;
  --c-accent: #d9b3a4;
  --c-on-accent: #2e2a27;
  --c-accent-text: #8c5a48;
  --c-line: #e3dbd0;
  --c-hero-bg: #efe7dd;
  --c-hero-text: #2e2a27;
  --c-footer-bg: #4f6455;
  --c-footer-text: #fbf8f4;
  --c-ph-a: #ebe2d6; --c-ph-b: #e2d3c6;
  --c-price: #2e2a27;

  --f-head: "Cormorant Garamond", "Garamond", Georgia, serif;
  --f-body: "Jost", "Futura", system-ui, sans-serif;
  --fw-head: 600;
  --fw-body-bold: 500;
  --ls-head: -.005em;
  --lh-head: 1.05;
  --ls-eyebrow: .28em;
  --radius-s: 2px; --radius-m: 2px; --radius-l: 4px; --radius-btn: 0;
  --radius-ph: 999px 999px 4px 4px;   /* arch */
  --shadow: none;
  --section-pad: clamp(4rem, 2.5rem + 6vw, 8rem);
  --motif-color: #d9b3a4;
  --texture: none;
  --hero-texture: radial-gradient(circle at 85% 20%, #f6dcd2 0, transparent 35%), radial-gradient(circle at 10% 90%, #dfe7dc 0, transparent 40%);
  --ph-pattern: linear-gradient(180deg, #efe4d8 0%, #e3cfc2 60%, #c9b4a4 100%);
}
h1 { font-size: clamp(2.6rem, 1.6rem + 4vw, 5rem); }
.brand__mark { background: transparent; color: var(--c-text); border: 1px solid var(--c-text); border-radius: 999px 999px 2px 2px; font-size: 1.4rem; }
.brand__name { font-size: var(--step-2); }
.site-nav a { text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; }
.btn { text-transform: uppercase; letter-spacing: .14em; font-size: .85rem; padding-inline: var(--space-6); }
.card { border: 0; background: transparent; text-align: center; }
.card .ph--card { aspect-ratio: 4 / 5; border-radius: 999px 999px 0 0; }
.card__title { font-size: var(--step-2); }
.cards { gap: var(--space-7) var(--space-5); }
.section__head, .products .section__head { text-align: center; }
.section__head p { margin-inline: auto; }
.signoff { color: var(--c-accent-text); }

.hero .ph--hero { aspect-ratio: 4 / 5; width: min(100%, 26rem); justify-self: center; }
.about .ph--portrait { width: min(100%, 24rem); justify-self: center; }
@media (max-width: 47.99rem) { .site-nav a { letter-spacing: .06em; padding-inline: .55rem; } }