/* Direction: Kiln — warm clay, natural window light, restrained serif */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #f3eadd;
  --surface: #fbf5ea;
  --surface-2: #e8dac6;
  --border: #d5c4ab;
  --border-strong: #b1a79d;
  --ink: #2b1e16;
  --muted: #6a5646;
  --accent: #a4502c;
  --accent-hover: #8b4425;
  --accent-ink: #ffffff;
  --accent-text: #8a4224;
  --accent-strong: #8b4425;
  --accent-soft: #e8d4c4;
  --accent-border: #cfa58d;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #d8ddca;
  --success-strong: #116d34;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #ebd8c4;
  --warning-strong: #994607;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #ecd1c6;
  --danger-strong: #aa1a1a;
  --chart-1: #a4502c;
  --chart-2: #958800;
  --chart-3: #0d6545;
  --chart-4: #078eaf;
  --chart-5: #4a4597;
  --chart-6: #b76098;

  --font-display: "Newsreader", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --display-weight: 400;
  --display-tracking: -0.02em;
  --radius-card: 6px;
  --radius-btn: 999px;
  --radius-input: 8px;
  --x-band: #2a1d16;
  --x-on-photo: #f6ebdc;
  --x-glaze-oat: #d9c8a7;
  --x-glaze-iron: #4b3425;
  --x-glaze-celadon: #9db79e;
  --x-glaze-ash: #9ba5a8;
  --x-glaze-rust: #b5532d;
  --x-glaze-ink: #26303d;
  --x-clay-raw: #6f5a4b;
  --x-clay-bisque: #e7cdb4;
  --x-ember: #ff7a2e;
  --x-wheel: #3a2f28;
  --x-wheel-ring: #66554a;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Inter", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #140905;
  --surface: #2c221e;
  --surface-2: #201512;
  --border: #352b28;
  --border-strong: #5b5350;
  --ink: #f3eadd;
  --muted: #9a9087;
  --accent: #a4502c;
  --accent-hover: #b26a4c;
  --accent-ink: #ffffff;
  --accent-text: #be8268;
  --accent-strong: #b8775b;
  --accent-soft: #34190e;
  --accent-border: #552917;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #142311;
  --success-strong: #499c68;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #371906;
  --warning-strong: #c57a40;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #380d0a;
  --danger-strong: #d16969;
  --chart-1: #ab5632;
  --chart-2: #9b8e12;
  --chart-3: #029869;
  --chart-4: #1894b6;
  --chart-5: #7674cb;
  --chart-6: #be679e;
}

/* Kiln — the bits no primitive covers: stage, swatches, process steps. */

.eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.eyebrow-on-band { color: var(--x-on-photo); opacity: 0.7; }

.hero-wash {
  background:
    radial-gradient(60rem 36rem at 78% 18%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--canvas) 85%);
}

/* The 3D stage */
.stage {
  border-radius: var(--radius-card);
  background: radial-gradient(closest-side at 50% 42%, color-mix(in srgb, var(--surface) 90%, transparent), transparent 100%);
  cursor: grab;
}
.stage:active { cursor: grabbing; }
.stage canvas {
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  border-radius: var(--radius-card);
}
.stage canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.process-stage {
  background: radial-gradient(closest-side at 50% 45%, color-mix(in srgb, var(--x-ember) 16%, transparent), transparent 100%);
  border-radius: 0;
}

/* Glaze swatches */
.swatch {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: 999px;
  background: var(--sw);
  border: 1px solid rgb(0 0 0 / 0.22);
  box-shadow: inset 0 -6px 10px rgb(0 0 0 / 0.14), inset 0 4px 6px rgb(255 255 255 / 0.18);
  transition: transform 0.2s ease, outline-offset 0.2s ease;
}
button.swatch { cursor: pointer; }
button.swatch:hover { transform: translateY(-2px); }
button.swatch:active { transform: scale(0.94); }
button.swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.swatch[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: 3px; }
.swatch-sm { width: 1.25rem; height: 1.25rem; box-shadow: none; }
button.swatch-sm { width: 1.75rem; height: 1.75rem; }
.band-swatches .swatch[aria-pressed="true"],
[data-process] .swatch[aria-pressed="true"] { outline-color: var(--x-on-photo); }

/* Filter chips and cart count */
.chip { cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
.chip:hover { background: var(--accent-soft); }
.chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.cart-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--accent);
  color: var(--accent-ink);
}
.cart-count-on-accent { background: var(--accent-ink); color: var(--accent); }
.cart-bump { animation: cart-bump 0.4s ease; }
@keyframes cart-bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* Making-process steps */
.step { border-bottom: 1px solid rgb(255 255 255 / 0.12); }
.step-head {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  column-gap: 0.25rem;
  width: 100%;
  padding: 0.55rem 0;
  text-align: left;
  color: inherit;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.step-head:hover { opacity: 0.85; }
.step-head:focus-visible { outline: 2px solid var(--x-on-photo); outline-offset: 2px; }
.step-num { grid-row: span 2; font-size: 0.8rem; letter-spacing: 0.1em; padding-top: 0.4rem; color: var(--x-ember); }
.step-title { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.2; }
.step-meta { display: none; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }
.step-body { display: none; padding: 0 0 0.8rem 2.5rem; font-size: 0.95rem; line-height: 1.55; max-width: 34rem; opacity: 0.85; }
.step[data-active] .step-head { opacity: 1; }
.step[data-active] .step-meta,
.step[data-active] .step-body { display: block; }
@media (min-width: 768px) {
  .step-title { font-size: 1.6rem; }
}
@media (max-height: 700px) and (max-width: 767px) {
  .step-body { font-size: 0.85rem; line-height: 1.4; }
  .step-head { padding: 0.35rem 0; }
}

/* Tactile paper grain on photo wells */
.media { position: relative; }

html.reduced-motion .cart-bump,
html.reduced-motion .media img { animation: none !important; transition: none !important; }
html.reduced-motion .step-head,
html.reduced-motion button.swatch { transition: none !important; }
html.reduced-motion .group:hover .media img { transform: none !important; }