/* ─────────────────────────────────────────────────────────────
   WONAMU. — brand system
   "Designed by nature."
   ───────────────────────────────────────────────────────────── */

:root {
  /* Core palette */
  --wn-burgundy: #300014;
  --wn-burgundy-soft: #4a1126;
  --wn-cream: #f4ecde;
  --wn-cream-deep: #ebe0cb;
  --wn-paper: #f9f4ea;
  --wn-ink: #0d0108;
  --wn-bark: #2a1a10;
  --wn-bamboo: #c9a35e;
  --wn-bamboo-light: #e8c98a;
  --wn-acacia: #8a5a32;
  --wn-acacia-deep: #5a3a1f;
  --wn-line: rgba(13, 1, 8, 0.12);
  --wn-line-cream: rgba(244, 236, 222, 0.22);

  /* Type */
  --wn-serif: "Libre Bodoni", "Bodoni Moda", "Didot", "Bodoni 72", Didot, serif;
  --wn-sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --wn-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* Generic resets for gallery artboards */
.wn-board, .wn-board * {
  box-sizing: border-box;
}
.wn-board {
  font-family: var(--wn-sans);
  font-feature-settings: "ss01", "cv11";
  color: var(--wn-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings */
.wn-h, .wn-display {
  font-family: var(--wn-serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.96;
}
.wn-display {
  font-style: italic;
  font-weight: 300;
}
.wn-eyebrow {
  font-family: var(--wn-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 400;
}
.wn-meta {
  font-family: var(--wn-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}
.wn-caption {
  font-family: var(--wn-serif);
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
}

/* The WONAMU. mark — period is sacred */
.wn-mark {
  font-family: var(--wn-serif);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.wn-mark .dot {
  letter-spacing: 0;
  margin-left: -0.05em;
}

/* Reusable placeholder swatches — readable on any canvas */
.wn-swatch {
  position: relative;
  overflow: hidden;
  background: var(--wn-cream-deep);
}
.wn-swatch::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      92deg,
      rgba(42, 26, 16, 0.04) 0 1px,
      transparent 1px 4px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(42, 26, 16, 0.03) 0 1px,
      transparent 1px 8px
    );
  pointer-events: none;
}
.wn-swatch--bark {
  background: linear-gradient(120deg, #8a5a32 0%, #6e4422 55%, #4e2f14 100%);
  color: var(--wn-cream);
}
.wn-swatch--bark::before {
  background:
    repeating-linear-gradient(
      88deg,
      rgba(0, 0, 0, 0.18) 0 1px,
      transparent 1px 5px
    ),
    repeating-linear-gradient(
      89deg,
      rgba(255, 230, 190, 0.06) 0 1px,
      transparent 1px 9px
    );
}
.wn-swatch--bamboo {
  background:
    radial-gradient(120% 80% at 30% 20%, #e8c98a 0%, #c9a35e 60%, #a07d40 100%);
  color: var(--wn-bark);
}
.wn-swatch--bamboo::before {
  background:
    repeating-linear-gradient(
      90deg,
      rgba(90, 58, 31, 0.10) 0 1px,
      transparent 1px 6px
    );
}
.wn-swatch--cream {
  background: linear-gradient(160deg, #f6efe1 0%, #e8dcc4 100%);
  color: var(--wn-bark);
}
.wn-swatch--ink {
  background: linear-gradient(160deg, #1c1410 0%, #0b0805 100%);
  color: var(--wn-cream);
}
.wn-swatch--burgundy {
  background: linear-gradient(160deg, #4a1126 0%, #1f000d 100%);
  color: var(--wn-cream);
}

/* Tiny label that appears centered in placeholder swatches */
.wn-swatch-label {
  position: absolute;
  inset: auto 0 0 0;
  padding: 10px 12px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  font-family: var(--wn-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.78;
  pointer-events: none;
}
.wn-swatch-label--center {
  inset: 0;
  align-items: center;
  justify-content: center;
}

/* Drop-target slot variant — used with <image-slot> for real photos */
image-slot {
  --is-bg: var(--wn-cream-deep);
  --is-color: var(--wn-bark);
}

/* No-scroll inside boards */
.wn-noscroll {
  overflow: hidden;
}