/* atelier: calm and crafted. Shops, makers, ceramics, design objects.
   Playfair Display in large sizes, stone and forest green, sharp edges. */

:root {
  color-scheme: light dark;
  --color-bg: #e7e2da;
  --color-surface: #ddd6cb;
  --color-text: #1c1f19;
  --color-muted: #5a5d52;
  --color-accent: #2f4128;
  --color-accent-contrast: #f2eee7;
  --color-border: #c9c1b4;
  --color-dark: #233020;
  --color-dark-text: #ece6dc;
  --font-heading: "Playfair Display", "Didot", "Bodoni 72", Georgia, serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-size: 17px;
  --line-height: 1.6;
  --heading-weight: 500;
  --heading-tracking: -0.02em;
  --heading-line-height: 1.05;
  --display-size: clamp(3rem, 8.5vw, 6.5rem);
  --max-width-wide: 78rem;
  --radius: 0px;
  --button-radius: 999px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #171a15;
    --color-surface: #20241d;
    --color-text: #ebe5da;
    --color-muted: #aaa597;
    --color-accent: #b8c9a3;
    --color-accent-contrast: #171a15;
    --color-border: #33382d;
    --color-dark: #0f120d;
    --color-dark-text: #ebe5da;
  }
}

/* Header: name in the middle, small capitals around it */
.site-header { background: transparent; border-bottom: 1px solid var(--color-border); }
.site-header-inner { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.site-title { font-size: 1.6em; font-weight: 600; letter-spacing: -0.01em; }
.site-nav a { font-size: 0.75em; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }

h1, h2 { font-weight: 500; }
h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.05em; letter-spacing: 0; }

.button { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72em; font-weight: 600; padding: 1.15em 2.2em; }
.button:not(.button-secondary) { background: transparent; color: inherit; border-color: currentColor; }
.button:not(.button-secondary):hover { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
.tone-dark .button:not(.button-secondary), .tone-accent .button:not(.button-secondary), .has-bg .button:not(.button-secondary) { background: transparent; color: inherit; border-color: currentColor; }
.button-secondary { border-color: transparent; text-decoration: underline; text-underline-offset: 0.35em; padding-left: 0.5em; padding-right: 0.5em; }

/* hero: big type on the left, tall image on the right */
.block-hero.style-split .block-inner { align-items: end; }
.block-hero h1 { font-weight: 500; }
.block-hero .block-media img { aspect-ratio: 4 / 5; }

.block-intro h2, .block-text h2 { font-size: clamp(2.2rem, 5vw, 3.8rem); }

/* cards become product tiles: picture, name, small print */
.block-cards .block-item { background: transparent; }
.block-cards .item-body { padding: 1rem 0 0; }
.block-cards .item-media img { aspect-ratio: 4 / 5; }
.block-cards h3 { font-family: var(--font-heading); font-size: 1.45em; font-weight: 500; }
.block-cards .item-body p { font-size: 0.9em; color: var(--color-muted); }
.tone-dark .block-cards .item-body p { color: inherit; opacity: 0.8; }

.block-features .block-item { border-top: 1px solid currentColor; padding-top: 1.5rem; }
.block-features h3 { font-family: var(--font-heading); font-size: 1.6em; font-weight: 500; }
.block-features .item-body p { font-size: 0.92em; }

.menu-group h3 { font-family: var(--font-heading); font-size: 1.6em; font-weight: 500; border-bottom-color: currentColor; }
.quote blockquote { font-style: italic; }
.quote figcaption { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72em; }
.faq-item summary { font-family: var(--font-heading); font-size: 1.35em; }
.block-cta h2 { font-size: clamp(2.4rem, 6vw, 4.6rem); }

.site-footer { border-top: 0; background: var(--color-dark); color: var(--color-dark-text); }
.site-footer-inner { padding-top: 3rem; padding-bottom: 3rem; font-size: 0.85em; letter-spacing: 0.04em; }