/* ==========================================================================
   THEME — "Atelier"
   Premium editorial. Warm bone paper, serif headlines, clay accent, hairline
   rules and a lot of air. Feels expensive and considered rather than loud.
   ========================================================================== */

:root {
  --ink:        #1c1815;
  --ink-soft:   #4a423b;
  --muted:      #857b72;
  --line:       #e3dcd2;
  --bg:         #fbf8f3;
  --surface:    #f3ede4;
  --surface-2:  #ebe3d7;
  --accent:     #9c5a34;
  --accent-ink: #7a4324;
  --ok:         #4a6b4f;

  --font:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --display: "Fraunces", Georgia, "Times New Roman", serif;

  --radius: 2px;
  --radius-lg: 3px;
  --shadow: 0 1px 2px rgba(28, 24, 21, .04), 0 16px 40px rgba(28, 24, 21, .07);
}

body { background: var(--bg); }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; letter-spacing: -.015em; }
h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); line-height: 1.04; font-weight: 600; }
h2 { font-size: clamp(1.65rem, 3.2vw, 2.5rem); letter-spacing: -.012em; }
h3 { font-size: 1.2rem; }
.brand__name { font-family: var(--display); font-weight: 600; font-size: 1.3rem; letter-spacing: -.02em; }
.brand__name em { color: var(--accent); font-style: italic; }
.eyebrow { letter-spacing: .24em; font-size: .6875rem; color: var(--muted); font-weight: 500; }
.lede { font-size: 1.125rem; line-height: 1.65; }

/* Header — quiet, paper-toned */
.announce { background: var(--ink); color: #e8dfd3; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.site-header { background: rgba(251, 248, 243, .9); border-bottom-color: var(--line); }
.header-inner { height: 78px; }
.nav a { font-weight: 400; font-size: .9375rem; letter-spacing: .01em; }
.nav a[aria-current="page"] { font-weight: 500; }
.nav a[aria-current="page"]::after { height: 1px; background: var(--ink); }

/* Buttons — restrained, letter-spaced */
.btn {
  border-radius: var(--radius); font-weight: 500; font-size: .8125rem;
  letter-spacing: .11em; text-transform: uppercase; padding: 15px 28px;
}
.btn--ghost { border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn--accent:hover { background: var(--accent-ink); }

/* Hero — cream, generous, editorial */
.hero { background: var(--surface); border-bottom: 1px solid var(--line); }
.hero-inner { padding: 108px 0; gap: 64px; }
.hero p { font-size: 1.125rem; line-height: 1.7; color: var(--ink-soft); }
.hero-stats { gap: 48px; margin-top: 48px; }
.hero-stats b { font-family: var(--display); font-weight: 600; font-size: 1.5rem; }
.hero-stats div { letter-spacing: .06em; font-size: .75rem; text-transform: uppercase; }
.hero-art { background: var(--bg); border-color: var(--line); border-radius: var(--radius-lg); }
.art-bg { fill: #fbf8f3; }
.art-ink { stroke: #1c1815; opacity: .72; }
.art-accent { stroke: var(--accent); }
.art-blob-a { fill: var(--accent); opacity: .12; }
.art-blob-b { fill: #1c1815; opacity: .05; }

.section { padding: 96px 0; }
.section--tight { padding: 56px 0; }
.section-head { margin-bottom: 40px; }

/* Category tiles — flat, bordered, calm */
.cat-card { background: transparent; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 24px; }
.cat-card:hover { background: var(--surface); border-color: var(--ink); transform: none; box-shadow: none; }
.cat-card svg { color: var(--accent); width: 26px; height: 26px; }
.cat-card b { font-family: var(--display); font-weight: 600; font-size: 1.0625rem; }

/* Product cards — no chrome, all image and type */
.product-grid { gap: 44px 32px; }
.card__media { background: var(--surface); border-radius: var(--radius-lg); }
.card__cat { letter-spacing: .16em; font-size: .6875rem; color: var(--muted); }
.card__title { font-family: var(--display); font-weight: 600; font-size: 1.0625rem; letter-spacing: -.01em; margin: 6px 0 8px; }
.card__price { font-size: 1rem; font-weight: 500; }
.card__badge { border-radius: 0; background: var(--ink); font-weight: 500; letter-spacing: .12em; font-size: .625rem; padding: 6px 10px; }
.card__badge--sale { background: var(--accent); }

/* Product page */
.pdp { gap: 72px; }
.pdp__price { font-family: var(--display); font-weight: 600; font-size: 2rem; }
.swatch { border-radius: var(--radius); font-size: .8125rem; letter-spacing: .04em; }
.spec-list li { font-size: .9375rem; padding: 13px 0; }

.summary { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; }
.summary-row--total { font-family: var(--display); font-weight: 600; border-top-color: var(--line); }
.filter-list button[aria-pressed="true"] { background: var(--ink); }

/* Footer */
.site-footer { background: var(--ink); color: #b3a89c; }
.site-footer a { color: #b3a89c; }
.site-footer h4 { color: #f0e7da; letter-spacing: .2em; font-weight: 500; }
.footer-brand p { font-family: var(--display); font-size: 1rem; line-height: 1.55; color: #cdc2b4; }

.notice { background: var(--surface); border-color: var(--line); border-left-color: var(--accent); }
.wa-fab { background: var(--ink); border-radius: 999px; font-weight: 500; letter-spacing: .06em; }
.wa-fab:hover { background: #000; }