/* ═══════════════════════════════════════════════════════════════
   POMELO STUDIOS — ceramics & home objects
   Self-contained design system. Shares nothing with sibling worlds.

   Palette   butter #F8D86A · porcelain #FFFDF7 · tangerine #F48C4A
             dusty rose #D98992 · plum #67405C · sage #A9B98E
   Type      expressive serif (display) · rounded sans (body)
             tiny handwritten labels
   Shape     wheel-thrown asymmetry: ovals, slightly-off circles,
             torn clay edges, punched paper tags. No drop shadows,
             no glass, no gradients-as-decoration.
   Motion    everything settles. Nothing bounces, nothing loops fast.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --butter:     #F8D86A;
  --porcelain:  #FFFDF7;
  --tangerine:  #F48C4A;
  --rose:       #D98992;
  --plum:       #67405C;
  --sage:       #A9B98E;

  /* derived, still inside the family */
  --clay:       #E7D9C2;
  --clay-deep:  #D3BE9C;
  --ink:        #4A2C42;
  --ink-soft:   #7C5A70;
  --table:      #C9AE8A;
  --fire-a:     #F8D86A;
  --fire-b:     #F48C4A;

  /* Webfonts are loaded by each page (see the <link> in the head).
     Petrona is a sturdy, low-contrast old-style — dense like fired clay,
     not springy — with real stroke at a 5.4rem display size.
     Nunito already led --round; loading it makes that token true.
     Patrick Hand replaces the Comic Sans tail of the label hand. */
  --serif:  "Petrona", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --round:  "Nunito", "Quicksand", "Varela Round", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --hand:   "Patrick Hand", "Bradley Hand", "Segoe Print", "Chalkboard SE", cursive;

  --gut: clamp(1.25rem, 4vw, 3.5rem);
  --sweep: 720ms;

  color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--porcelain);
  color: var(--ink);
  font-family: var(--round);
  font-size: clamp(1rem, .55vw + .88rem, 1.125rem);
  line-height: 1.62;
  overflow-x: hidden;
}

/* faint kiln-shelf wash so the page reads as one clay body */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(58% 40% at 12% 8%,  rgba(248,216,106,.20), transparent 70%),
    radial-gradient(48% 38% at 92% 82%, rgba(217,137,146,.14), transparent 72%),
    radial-gradient(40% 30% at 74% 12%, rgba(169,185,142,.14), transparent 70%);
}

/* ═══ PAINTED SURFACE ═════════════════════════════════════════════
   Two levers, both SVG, both declared once in each page as a hidden
   <svg class="paint-defs">. Nothing here is a gradient standing in for
   a brush: #ps-grain is a real fractalNoise plate laid over the whole
   viewport, and #ps-brush / #ps-clay push our mathematically perfect
   vector edges out of true with a displacement map, so a circle that
   was drawn with a ruler stops being one. */
.paint-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.paint-grain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  /* .14, not the .32 I first shipped. Measured on a frozen hero:
     tooth ran 2.08 with no grain, 4.55 at .32 — 3.65x the bar's 1.249,
     which is BarMoon-2's overshoot shape rather than brushwork. At .14
     tooth lands 3.06, a dTooth of +0.98 that still clears the deposit
     floor twentyfold without pushing the page past the bar. */
  opacity: .14;
  /* MULTIPLY, not overlay. This ground is porcelain #FFFDF7, pale at
     every pixel, so overlay is base-preserving here and leaves the
     noise sitting in the DOM doing nothing visible — measured at
     dSd -5.01, i.e. it was flattening the ground rather than
     depositing on it. Multiply has tonal range to work against on a
     ground this light. */
  mix-blend-mode: multiply;
}

/* Displacement targets are picked so the filter input never changes per
   frame. A filtered element whose own transform animates makes Chrome
   re-run the turbulence every frame, which is the one way this technique
   costs more than it gives. So the heavy pass goes on the big static
   surfaces, the light pass on the forms, and the two elements that
   genuinely loop forever are left unfiltered — a soft radial gradient
   has no edge to displace, so it would only pay the cost. */
.bench-top,
.placard,
.card,
.swatch .sw-dot,
.kiln-body,
.kiln-brick { filter: url(#ps-brush); }
/* The table is a 3px shelf edge, not a plank. At the clay pass
   (scale 11) it shredded into a scribble; the brush pass keeps the
   hand-drawn waver without eating the line. */
.table { filter: url(#ps-brush); }
.pot-turn,
.card-art svg,
.dragpot svg { filter: url(#ps-brush-fine); }

main, .top, .foot, .shelf { position: relative; z-index: 1; }

img, svg { display: block; max-width: 100%; }

a { color: inherit; }

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--tangerine);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 99;
  background: var(--plum);
  color: var(--porcelain);
  padding: .7rem 1.1rem;
  font-family: var(--hand);
  text-decoration: none;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ── handwritten micro-label: the connective tissue ──────────── */
.hand {
  font-family: var(--hand);
  font-size: clamp(.78rem, .3vw + .72rem, .92rem);
  letter-spacing: .04em;
  line-height: 1.5;
  color: var(--ink-soft);
}
.hand-note { margin-top: 1.6rem; }

/* ═══ HEADER ═══════════════════════════════════════════════════ */
.top {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
  padding: clamp(1.1rem, 2.4vw, 2rem) var(--gut) 0;
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  text-decoration: none;
}

.mark-vase {
  width: clamp(38px, 4vw, 52px);
  height: auto;
  fill: var(--tangerine);
}
.mark-vase .mark-line { fill: none; stroke: var(--porcelain); stroke-width: 2.4; }
.mark-vase .mark-stem { fill: none; stroke: var(--plum); stroke-width: 2.4; stroke-linecap: round; }
.mark-vase .mark-leaf { fill: var(--sage); }

.mark-text { display: grid; gap: .1rem; }

.mark-name {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 1.6vw + 1rem, 2.1rem);
  line-height: 1;
  letter-spacing: -.015em;
  color: var(--plum);
}
.mark-name em {
  font-style: italic;
  color: var(--tangerine);
  margin-left: .28em;
}
.mark-sub {
  font-family: var(--hand);
  font-size: .78rem;
  color: var(--ink-soft);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.4rem;
}
.nav a {
  font-family: var(--hand);
  font-size: .95rem;
  text-decoration: none;
  padding: .25rem 0;
  border-bottom: 2px solid transparent;
  color: var(--ink-soft);
  transition: color 180ms ease, border-color 180ms ease;
}
.nav a:hover { color: var(--plum); border-bottom-color: var(--butter); }

/* ═══ SHARED SECTION FURNITURE ═════════════════════════════════ */
/* Section headings share a type spec, but each section brings its own
   *sequence* of supporting elements — no two openers are alike. */
.sec-title,
.glaze-title,
.bench-title,
.kiln-title,
.teaser-title,
.visit-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.4vw + .8rem, 3.3rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--plum);
  margin: 0 0 .7rem;
  text-wrap: balance;
}
.sec-note,
.visit-note {
  margin: 0;
  max-width: 46ch;
  color: var(--ink-soft);
}

/* Each section's own handwritten aside — same voice, never the same slot. */
.bench-tag,
.kiln-tag,
.teaser-tag {
  margin: -.2rem 0 1.1rem;
  max-width: 40ch;
  color: var(--plum);
}

section { padding: clamp(3.2rem, 7vw, 6.5rem) var(--gut); }

/* ═══ BUTTONS: pressed thumbprint, not a pill ══════════════════ */
.btn {
  display: inline-block;
  font-family: var(--round);
  font-weight: 700;
  font-size: .98rem;
  letter-spacing: .01em;
  text-decoration: none;
  padding: .82rem 1.5rem .92rem;
  border-radius: 46% 54% 52% 48% / 58% 46% 54% 42%;
  transition: transform 220ms cubic-bezier(.2,.8,.3,1), background-color 220ms ease, color 220ms ease;
}
.btn-clay {
  background: var(--tangerine);
  color: var(--porcelain);
  border: 2px solid var(--plum);
}
.btn-clay:hover { transform: translateY(-2px) rotate(-.6deg); }
.btn-quiet {
  background: transparent;
  color: var(--plum);
  border: 2px dashed var(--clay-deep);
}
.btn-quiet:hover { transform: translateY(-2px); border-color: var(--tangerine); }
.btn:active { transform: translateY(1px); }

.link-hand {
  font-family: var(--hand);
  color: var(--tangerine);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.link-hand:hover { color: var(--plum); }

/* ═══ HERO ══════════════════════════════════════════════════════ */
.hero {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  /* Element-level guard: the studio table bleeds to the content edge and is
     clipped there. `clip` creates no scroll container, so sticky positioning
     and scroll anchoring inside the hero are unaffected (unlike hidden). */
  overflow-x: clip;
  overflow-clip-margin: 0;
  padding-top: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(1rem, 3vw, 2rem);
}
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); }
}

.hero-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.5rem, 6.2vw + .4rem, 5.4rem);
  line-height: .96;
  letter-spacing: -.028em;
  color: var(--plum);
  margin: .5rem 0 1.1rem;
  text-wrap: balance;
}
.hero-title em {
  font-style: italic;
  color: var(--tangerine);
  position: relative;
  white-space: nowrap;
}
.hero-title em::after {
  content: "";
  position: absolute;
  left: -2%; right: -2%; bottom: .04em;
  height: .22em;
  background: var(--butter);
  border-radius: 50% 46% 52% 48% / 60% 54% 46% 40%;
  z-index: -1;
}
.lede { max-width: 44ch; color: var(--ink-soft); margin: 0 0 1.9rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem 1rem; }

/* ── the studio table ────────────────────────────────────────── */
.hero-stage {
  position: relative;
  min-height: clamp(340px, 52vw, 560px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 3.2rem;
}

.table {
  position: absolute;
  /* Bleeds out to the section's content edge exactly. An earlier -8%
     over-shot it by ~1px at 1440 and pushed the document scrollWidth
     to 1441. --gut is the true distance from the stage to that edge. */
  inset: auto calc(-1 * var(--gut)) 12% calc(-1 * var(--gut));
  background:
    linear-gradient(to bottom, rgba(103,64,92,.10), rgba(103,64,92,.22)),
    repeating-linear-gradient(92deg, rgba(103,64,92,.07) 0 2px, transparent 2px 7px),
    var(--table);
  border-top: 3px solid var(--plum);
  border-radius: 50% 50% 4px 4px / 12% 12% 4px 4px;
}
.table-edge {
  position: absolute;
  inset: auto 0 0 0;
  height: 22%;
  background: var(--clay-deep);
  border-top: 2px solid rgba(103,64,92,.35);
  border-radius: 0 0 4px 4px;
}
.table-grain {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 90% at 30% 10%, rgba(255,253,247,.28), transparent 70%);
}

/* ── the four forms ──────────────────────────────────────────── */
.forms {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(.4rem, 2vw, 1.6rem);
  padding: 0 clamp(.5rem, 3vw, 2rem);
  margin-bottom: clamp(1rem, 4vw, 2.6rem);
}

.pot {
  margin: 0;
  flex: 1 1 0;
  min-width: 0;
  max-width: 190px;
  /* --tilt / --sheen / --turn written by world.js */
  transform: rotate(var(--tilt, 0deg)) translateY(calc(var(--rise, 0) * 1px));
  transform-origin: 50% 92%;
  transition: transform 520ms cubic-bezier(.16,.84,.34,1);
}
.pot svg { width: 100%; height: auto; overflow: visible; }

.pot-turn {
  transform-origin: 50% 92%;
  transform: rotateY(var(--turn, 0deg)) scaleX(var(--foreshorten, 1));
  transition: transform 160ms cubic-bezier(.22,.7,.3,1);
}
@supports not (transform: rotateY(0deg)) {
  .pot-turn { transform: skewX(calc(var(--foreshorten, 1) * -6deg)); }
}

/* squashing the group makes it read as turning; the sheen rides on it */
.pot-gloss, .drag-gloss {
  fill: var(--porcelain);
  opacity: calc(.22 + var(--sheen, .3) * .55);
  transition: opacity 160ms linear;
}

.pot-body, .drag-body {
  fill: var(--glaze, var(--butter));
  transition: fill 900ms cubic-bezier(.4,0,.2,1);
}
.pot-rim, .drag-rim, .pot-lid, .pot-wet-lid {
  fill: var(--glaze, var(--butter));
  opacity: .72;
  transition: fill 900ms cubic-bezier(.4,0,.2,1);
}
.pot-knob { fill: var(--glaze, var(--butter)); opacity: .86; transition: fill 900ms cubic-bezier(.4,0,.2,1); }
.pot-cast, .drag-shadow { fill: rgba(103,64,92,.26); }

/* throwing rings: the marks the wheel leaves */
.pot-throw {
  fill: none;
  stroke: rgba(103,64,92,.28);
  stroke-width: 2;
  stroke-linecap: round;
}

/* the wet-glaze layer, revealed bottom-up when a swatch is tapped */
.pot-wet {
  fill: var(--glaze-next, var(--butter));
  opacity: 0;
  clip-path: inset(100% 0 0 0);
}
.forms.is-dipping .pot-wet {
  animation: dip var(--sweep) cubic-bezier(.5,0,.2,1) forwards;
}
@keyframes dip { from { opacity: 1; clip-path: inset(100% 0 0 0); } to { opacity: 1; clip-path: inset(-4% 0 0 0); } }

.pot-sprig { fill: var(--sage); }
.pot-sprig path:first-child { fill: none; stroke: var(--plum); stroke-width: 2.4; stroke-linecap: round; }

.placard {
  display: flex;
  align-items: center;
  gap: .8rem;
  align-self: center;
  padding: .5rem 1.1rem;
  background: var(--porcelain);
  border: 2px solid var(--plum);
  border-radius: 4px 14px 6px 12px / 12px 6px 14px 4px;
  transform: rotate(-.8deg);
  max-width: 100%;
}
.placard-rule { flex: 0 0 26px; height: 2px; background: var(--butter); }

/* ═══ GLAZE SWATCHES ═══════════════════════════════════════════ */
.glaze { padding-top: clamp(2rem, 4vw, 3rem); }
.glaze > .glaze-title,
.glaze > .sec-note { max-width: 60ch; }
.glaze > .sec-note { margin-bottom: 1.8rem; }

.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: .9rem;
  max-width: 1180px;
}

.swatch {
  --c: var(--butter);
  display: grid;
  grid-template-columns: 46px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: .1rem .8rem;
  text-align: left;
  font: inherit;
  color: var(--ink);
  background: var(--porcelain);
  border: 2px solid var(--clay-deep);
  border-radius: 10px 22px 12px 20px / 20px 12px 22px 10px;
  padding: .8rem .9rem;
  cursor: pointer;
  transition: transform 220ms cubic-bezier(.2,.8,.3,1), border-color 200ms ease;
}
.swatch:hover { transform: translateY(-3px) rotate(-.5deg); border-color: var(--tangerine); }
.swatch[aria-checked="true"] {
  border-color: var(--plum);
  background: color-mix(in srgb, var(--c) 16%, var(--porcelain));
}
.swatch .sw-dot {
  grid-row: 1 / 3;
  width: 46px; height: 46px;
  border-radius: 50% 46% 52% 48% / 56% 48% 52% 44%;
  background: var(--c);
  border: 2px solid rgba(103,64,92,.55);
}
.swatch .sw-name { font-weight: 700; font-size: .96rem; }
.swatch .sw-hex { font-family: var(--hand); font-size: .76rem; color: var(--ink-soft); }

.glaze-status { margin-top: 1.4rem; font-size: 1rem; color: var(--plum); }

/* ═══ THE BENCH (drag a mug, leave a shadow) ═══════════════════ */
.bench { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .bench { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }

.facts { display: grid; gap: .5rem; margin: 1.8rem 0 0; }
.facts > div {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  padding: .5rem 0;
  border-bottom: 1px dashed var(--clay-deep);
}
.facts dt { font-family: var(--hand); font-size: .9rem; color: var(--ink-soft); min-width: 4.6rem; }
.facts dd { margin: 0; font-weight: 700; color: var(--plum); }

.bench-stage {
  position: relative;
  aspect-ratio: 4 / 3;
  min-height: 300px;
  border-radius: 30px 18px 34px 16px / 18px 34px 16px 30px;
  background: var(--clay);
  border: 3px solid var(--plum);
  overflow: hidden;
  touch-action: none;
}
.bench-top {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(88deg, rgba(103,64,92,.06) 0 1px, transparent 1px 9px),
    radial-gradient(70% 60% at 30% 20%, rgba(255,253,247,.4), transparent 70%);
  pointer-events: none;
}

.smudges { position: absolute; inset: 0; pointer-events: none; }
.smudge {
  position: absolute;
  translate: -50% -50%;
  border-radius: 50% 44% 56% 46% / 52% 58% 42% 48%;
  background: radial-gradient(closest-side, rgba(103,64,92,.30), rgba(103,64,92,.10) 62%, transparent 78%);
  animation: smudge 2600ms cubic-bezier(.3,0,.4,1) forwards;
}
@keyframes smudge {
  from { opacity: 0; transform: scale(.4); }
  22%  { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.5) translateY(6px); }
}

.dragpot {
  position: absolute;
  left: 14%; top: 26%;
  width: clamp(96px, 26%, 148px);
  cursor: grab;
  touch-action: none;
  will-change: transform;
}
.dragpot svg { width: 100%; height: auto; overflow: visible; }
.dragpot.is-held { cursor: grabbing; }
.dragpot.is-held svg { transform: rotate(-3deg) scale(1.04); }
.dragpot .drag-body { --glaze: var(--butter); }
.drag-mark { fill: none; stroke: rgba(103,64,92,.4); stroke-width: 3; stroke-linecap: round; }

.bench-hint {
  position: absolute;
  left: calc(14% + clamp(96px, 26%, 148px) + .4rem);
  top: 44%;
  margin: 0;
  pointer-events: none;
  color: var(--plum);
  font-size: 1rem;
}
.dragpot.is-held ~ .bench-hint,
.bench-stage.is-used .bench-hint { opacity: 0; transition: opacity 300ms ease; }

/* ═══ KILN ═════════════════════════════════════════════════════ */
.kiln-sec { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .kiln-sec { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.kiln-art { display: grid; place-items: center; }
.kiln { width: min(100%, 400px); height: auto; }

.kiln-floor { fill: rgba(103,64,92,.14); }
.kiln-body  { fill: var(--clay-deep); stroke: var(--plum); stroke-width: 4; }
.kiln-brick { fill: var(--clay); stroke: rgba(103,64,92,.4); stroke-width: 2; }
.kiln-peel  { fill: rgba(103,64,92,.16); }

/* the fire answers the dial — opacity and flicker rate both track --heat */
.kiln-fire {
  opacity: calc(.22 + var(--heat, .8) * .78);
  mix-blend-mode: multiply;
  transition: opacity 400ms ease;
}
.kiln-flame path {
  fill: var(--fire-a);
  opacity: calc(.35 + var(--heat, .8) * .6);
  transform-origin: 50% 100%;
}
.kiln-flame .fl1 { animation: lick 2400ms ease-in-out infinite; }
.kiln-flame .fl2 { animation: lick 1700ms ease-in-out infinite .3s; }
.kiln-flame .fl3 { animation: lick 2900ms ease-in-out infinite .6s; }
@keyframes lick {
  0%, 100% { transform: scaleY(1) scaleX(1); }
  38%      { transform: scaleY(calc(1 + var(--heat, .8) * .34)) scaleX(.92); }
  64%      { transform: scaleY(.9) scaleX(1.07); }
}

.cone       { fill: var(--porcelain); stroke: var(--plum); stroke-width: 3; transform-origin: 50% 100%; }
.cone-shadow{ fill: rgba(103,64,92,.3); }
.kiln-cone   { transform: rotate(calc(var(--heat, .8) * 9deg)); transition: transform 500ms cubic-bezier(.3,.8,.3,1); }

.dial-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem 2rem; margin-top: 2rem; }

.dial {
  width: clamp(120px, 15vw, 152px);
  flex: 0 0 auto;
  cursor: grab;
  touch-action: none;
  border-radius: 50%;
}
.dial.is-held { cursor: grabbing; }
.dial svg { width: 100%; height: auto; }
.dial-face { fill: var(--porcelain); stroke: var(--plum); stroke-width: 5; }
.dial-ring { fill: color-mix(in srgb, var(--tangerine) 14%, var(--porcelain)); stroke: var(--clay-deep); stroke-width: 2; }
.dial-ticks path { stroke: var(--ink-soft); stroke-width: 4; stroke-linecap: round; }
.dial-needle path  { stroke: var(--tangerine); stroke-width: 7; stroke-linecap: round; }
.dial-needle circle{ fill: var(--plum); }
.dial-needle { transform-origin: 70px 70px; transition: transform 260ms cubic-bezier(.25,.9,.3,1); }
.dial.is-held .dial-needle { transition: none; }

.readout .temp {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4vw + 1rem, 3.6rem);
  line-height: 1;
  color: var(--tangerine);
  margin: 0 0 .3rem;
}
.readout .deg { font-size: .42em; color: var(--ink-soft); margin-left: .12em; }
.readout .hand { margin: 0; }

.heat-bar {
  width: min(240px, 60vw);
  height: 12px;
  margin: .9rem 0 .5rem;
  border: 2px solid var(--plum);
  border-radius: 8px 5px 9px 4px / 5px 9px 4px 8px;
  background: var(--porcelain);
  overflow: hidden;
}
.heat-bar span {
  display: block;
  height: 100%;
  width: 80%;
  background: linear-gradient(to right, var(--tangerine), var(--butter));
  transition: width 260ms cubic-bezier(.3,.8,.3,1);
}
.dial-hint { margin-top: 1.6rem; }

/* ═══ PRODUCT CARDS — physical paper tags ══════════════════════ */
.tray {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(1.4rem, 3vw, 2.4rem);
  margin: 2.2rem 0 1.6rem;
}

.card {
  --tone: var(--butter);
  position: relative;
  display: grid;
  gap: .55rem;
  align-content: start;
  margin: 0;
  padding: 1.1rem 1.1rem 1.3rem;
  background: var(--porcelain);
  border: 2px solid var(--clay-deep);
  border-radius: 16px 8px 18px 6px / 8px 18px 6px 16px;
  transition: transform 260ms cubic-bezier(.2,.8,.3,1), border-color 200ms ease;
}
.card:hover { transform: translateY(-4px) rotate(-.5deg); border-color: var(--plum); }

.card-art {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: end center;
  background: radial-gradient(64% 56% at 50% 88%, rgba(103,64,92,.13), transparent 70%), var(--clay);
  border-radius: 12px 6px 14px 5px / 6px 14px 5px 12px;
  overflow: hidden;
  padding: 1rem;
}
.card-art svg { width: 54%; height: auto; overflow: visible; }
.card-art .body { fill: var(--tone); transition: fill 700ms ease; }
.card-art .gloss { fill: var(--porcelain); opacity: .45; }
.card-art .ring  { fill: none; stroke: rgba(103,64,92,.3); stroke-width: 2.4; stroke-linecap: round; }

.card-name {
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.1;
  color: var(--plum);
  margin: 0;
}
.card-meta { font-family: var(--hand); font-size: .82rem; color: var(--ink-soft); margin: 0; }

/* the tag: punched hole, thread, price written on it */
.tag {
  position: absolute;
  top: -14px;
  right: 12px;
  display: grid;
  justify-items: center;
  gap: 0;
  width: 76px;
  padding: .5rem .3rem .55rem;
  background: var(--butter);
  color: var(--plum);
  transform: rotate(6deg);
  transform-origin: 50% -6px;
  /* the notched tag silhouette */
  clip-path: polygon(0 8px, 6px 0, 70% 0, 78% 8px, 86% 0, 100% 0, 100% 100%, 0 100%);
  box-shadow: 0 2px 0 rgba(103,64,92,.22);
}
.tag::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--porcelain);
  border: 2px solid rgba(103,64,92,.5);
  margin-bottom: .1rem;
}
.tag::after {
  content: "";
  position: absolute;
  top: -18px; left: 50%;
  width: 2px; height: 20px;
  translate: -50% 0;
  background: var(--ink-soft);
  opacity: .6;
}
.tag-price { font-family: var(--hand); font-size: 1rem; font-weight: 700; line-height: 1; }
.tag-run   { font-family: var(--hand); font-size: .68rem; opacity: .75; }

/* card glaze strip — each card carries its own tone */
.card-tone {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 50% 46% 54% 48% / 56% 48% 52% 44%;
  background: var(--tone);
  border: 2px solid rgba(103,64,92,.5);
  vertical-align: -2px;
  margin-right: .4rem;
}

/* ═══ VISIT ════════════════════════════════════════════════════ */
.visit { display: grid; gap: clamp(1.6rem, 3vw, 3rem); }
@media (min-width: 860px) { .visit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.visit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; align-content: start; }
.visit-list li {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.2rem;
  align-items: baseline;
  padding: .7rem 0;
  border-bottom: 1px dashed var(--clay-deep);
}
.visit-list li span:last-child { font-weight: 700; color: var(--plum); }
.visit-list .hand { min-width: 5.4rem; }

/* ═══ STUDIO SHELF — the persisted detail ══════════════════════ */
.shelf {
  position: sticky;
  bottom: 0;
  margin-top: clamp(2rem, 5vw, 4rem);
  background: var(--plum);
  color: var(--porcelain);
  border-top: 4px solid var(--tangerine);
}
.shelf-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem 1.4rem;
  padding: .9rem var(--gut) 1rem;
  max-width: 1500px;
  margin: 0 auto;
}
.shelf-title { color: var(--butter); margin: 0; flex: 0 0 auto; }
.shelf-title span { color: var(--porcelain); opacity: .7; }

.shelf-items {
  display: flex;
  flex: 1 1 240px;
  gap: .55rem;
  align-items: center;
  flex-wrap: wrap;
  min-height: 46px;
}
.shelf-empty { font-family: var(--hand); opacity: .65; }

.shelf-item {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  background: var(--butter);
  border-radius: 50% 46% 54% 48% / 56% 48% 52% 44%;
  border: 2px solid var(--porcelain);
  animation: setdown 480ms cubic-bezier(.2,1.5,.4,1) both;
}
@keyframes setdown {
  from { opacity: 0; transform: translateY(-14px) rotate(-14deg) scale(.7); }
  to   { opacity: 1; transform: none; }
}
.shelf-item svg { width: 62%; height: auto; }
.shelf-item .body { fill: var(--plum); }
.shelf-item .ring { fill: none; stroke: var(--porcelain); stroke-width: 3; stroke-linecap: round; opacity: .7; }

.shelf-remove {
  position: absolute;
  top: -7px; right: -7px;
  width: 20px; height: 20px;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: .8rem;
  line-height: 1;
  background: var(--tangerine);
  color: var(--porcelain);
  border: 2px solid var(--porcelain);
  border-radius: 50%;
  cursor: pointer;
}
.shelf-remove:hover { background: var(--rose); }

.shelf-clear {
  font: inherit;
  font-family: var(--hand);
  font-size: .82rem;
  color: var(--porcelain);
  background: transparent;
  border: 2px dashed rgba(255,253,247,.5);
  border-radius: 20px 10px 20px 10px / 12px 20px 12px 20px;
  padding: .35rem .9rem;
  cursor: pointer;
  flex: 0 0 auto;
}
.shelf-clear:hover { border-color: var(--butter); color: var(--butter); }

/* ═══ FOOTER ════════════════════════════════════════════════════ */
.foot {
  padding: clamp(2.4rem, 5vw, 4rem) var(--gut) 8rem;
  text-align: center;
  border-top: 2px dashed var(--clay-deep);
}
.foot-mark {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw + .6rem, 2.6rem);
  color: var(--plum);
  margin: 0 0 .5rem;
  letter-spacing: -.02em;
}
.foot-mark span { font-style: italic; color: var(--tangerine); margin-left: .2em; }
.foot .hand { margin: 0; }

/* ═══ SUB-PAGE (collection / studio) ════════════════════════════ */
.page-head { padding-top: clamp(1.6rem, 4vw, 3rem); }
.page-head .lede { margin-top: 1rem; }

.breadcrumb {
  display: inline-block;
  margin-bottom: 1rem;
  font-family: var(--hand);
  color: var(--tangerine);
  text-decoration: none;
}
.breadcrumb:hover { color: var(--plum); }

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .6rem;
  margin: 1.8rem 0 0;
}
.filter-bar button {
  font: inherit;
  font-family: var(--hand);
  font-size: .88rem;
  color: var(--ink-soft);
  background: var(--porcelain);
  border: 2px solid var(--clay-deep);
  border-radius: 22px 12px 22px 12px / 12px 22px 12px 22px;
  padding: .4rem 1rem;
  cursor: pointer;
  transition: transform 200ms cubic-bezier(.2,.8,.3,1), border-color 200ms ease, color 200ms ease;
}
.filter-bar button:hover { transform: translateY(-2px); border-color: var(--tangerine); }
.filter-bar button[aria-pressed="true"] {
  background: var(--plum);
  color: var(--porcelain);
  border-color: var(--plum);
}

.tray.is-filtered .card[hidden] { display: none; }

.card-actions { display: flex; gap: .6rem; align-items: center; margin-top: .3rem; }
.shelf-btn {
  font: inherit;
  font-family: var(--hand);
  font-size: .85rem;
  color: var(--plum);
  background: transparent;
  border: 2px solid var(--clum, var(--plum));
  border-color: var(--plum);
  border-radius: 18px 10px 18px 10px / 10px 18px 10px 18px;
  padding: .3rem .85rem;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, transform 200ms cubic-bezier(.2,.8,.3,1);
}
.shelf-btn:hover { transform: translateY(-2px); }
.shelf-btn[aria-pressed="true"] { background: var(--plum); color: var(--butter); }

/* process list on the studio page — numbered like kiln log lines */
.log { list-style: none; counter-reset: step; margin: 2rem 0 0; padding: 0; display: grid; gap: .1rem; max-width: 68ch; }
.log li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px dashed var(--clay-deep);
}
.log li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--tangerine);
  line-height: 1.2;
}
.log b { color: var(--plum); font-weight: 700; }

/* ═══ AMBIENT MOTION ══════════════════════════════════════════════
   The world does not sit still waiting to be poked. A glaze skin
   creeps across each form, heat stands over the kiln mouth, dust
   turns in the window light, and the shelf breathes. All of it is
   infinite and all of it is slow: nothing here loops faster than the
   eye can ignore, because this is a studio at 2pm, not a carousel.

   Every rule below is written so that its 0% and 100% states are the
   SAME composed pose. That is what lets prefers-reduced-motion set
   animation-iteration-count to 1 and land on a fully-drawn scene
   rather than a half-finished one. */

/* ── glaze shimmer: a wet highlight drifting down the pot ──────── */
/* NORMAL, not soft-light: a wet highlight is ADDED light, and
   soft-light is base-preserving — over pale porcelain it measured
   dSd -0.009, i.e. present in the DOM, animating, invisible. */
.pot-shimmer {
  fill: var(--porcelain);
  opacity: 0;
  mix-blend-mode: normal;
}
.pot-shimmer { animation: glaze-creep 11s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -2.6s); }
@keyframes glaze-creep {
  0%, 100% { opacity: 0;    transform: translateX(-9%) scaleY(.86); }
  42%      { opacity: .38;  transform: translateX(4%)  scaleY(1.04); }
  68%      { opacity: .16;  transform: translateX(12%) scaleY(.96); }
}
/* ── dust in the light over the studio table ───────────────────── */
.motes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.motes i {
  position: absolute;
  left: var(--x);
  bottom: 8%;
  width: var(--sz);
  height: var(--sz);
  border-radius: 50%;
  background: var(--butter);
  opacity: 0;
  animation: mote-drift var(--dur) linear infinite;
  animation-delay: var(--del);
}
@keyframes mote-drift {
  0%   { opacity: 0;   transform: translate3d(0, 0, 0); }
  18%  { opacity: .7; }
  52%  { opacity: .34; transform: translate3d(14px, -46vh, 0); }
  84%  { opacity: .1; }
  100% { opacity: 0;   transform: translate3d(-8px, -92vh, 0); }
}

/* ── heat haze standing over the kiln mouth ────────────────────── */
.hz {
  fill: var(--fire-a);
  opacity: 0;
  mix-blend-mode: normal;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.hz1 { animation: heat-rise 6200ms ease-in-out infinite; }
.hz2 { animation: heat-rise 4900ms ease-in-out infinite -1.4s; }
.hz3 { animation: heat-rise 7100ms ease-in-out infinite -2.9s; }
.hz4 { animation: heat-rise 5400ms ease-in-out infinite -4.1s; }
@keyframes heat-rise {
  0%, 100% { opacity: 0;   transform: translateY(10%) scaleY(.7); }
  38%      { opacity: .34; transform: translateY(-2%) scaleY(1); }
  72%      { opacity: .12; transform: translateY(-9%) scaleY(1.22); }
}

/* ── the fire breathes; the cone never fully settles ───────────── */
.kiln-fire { animation: fire-breathe 5200ms ease-in-out infinite; }
@keyframes fire-breathe {
  0%, 100% { transform: scale(1); }
  46%      { transform: scale(1.045); }
}

/* ── the shelf breathes: the kiln light reaches the far wall ─────
   The plum lives on .shelf, not .shelf-inner, so the breathing has to
   be declared there — animating the inner wrapper would paint a
   slightly different rectangle inside a bar of the same colour. */
.shelf { animation: shelf-breathe 9s ease-in-out infinite; }
@keyframes shelf-breathe {
  0%, 100% { background-color: var(--plum); }
  50%      { background-color: color-mix(in srgb, var(--plum) 90%, var(--tangerine)); }
}

/* ── a glaze dot is never quite the same twice ─────────────────── */
.swatch .sw-dot { animation: glaze-turn 17s ease-in-out infinite; }
@keyframes glaze-turn {
  0%, 100% { border-radius: 50% 46% 52% 48% / 56% 48% 52% 44%; }
  50%      { border-radius: 44% 54% 46% 56% / 48% 56% 44% 52%; }
}
.log p { margin: .2rem 0 0; color: var(--ink-soft); }

/* ═══ RESPONSIVE: 390px is a first-class layout ═════════════════ */
@media (max-width: 560px) {
  .top { padding-top: 1rem; }
  .nav { width: 100%; justify-content: space-between; gap: .2rem .6rem; }
  .nav a { font-size: .84rem; }
  .hero-stage { min-height: 300px; }
  .forms { gap: .2rem; }
  .pot { max-width: 116px; }
  .bench-stage { min-height: 260px; aspect-ratio: 1 / 1; }
  .dragpot { left: 8%; top: 22%; width: 100px; }
  .bench-hint { left: calc(8% + 100px + .3rem); top: 38%; }
  .shelf-inner { padding: .7rem var(--gut) .8rem; }
  .shelf-title { flex-basis: 100%; }
  .tag { width: 66px; right: 8px; }
  .dial-row { gap: 1rem; }
}

/* The studio shelf is sticky to the viewport bottom, which is right on
   a desk and wrong on a phone: at 390x844 the four hero forms end at
   y≈828 while the shelf's top edge sat at y≈699, so the bar covered the
   artwork outright and the first screen was text plus a purple slab.
   On narrow viewports the shelf returns to the flow after the last
   section instead, where it can still be reached but covers nothing. */
@media (max-width: 560px) {
  .shelf {
    position: static;
    bottom: auto;
    margin-top: 0;
  }
  .foot { padding-bottom: clamp(2.4rem, 5vw, 4rem); }
}

@media (max-width: 380px) {
  .pot { max-width: 96px; }
  .nav a { font-size: .78rem; }
}

/* ═══ REDUCED MOTION ═══════════════════════════════════════════
   Everything that moves without being asked stops. Pointer-driven
   form rotation, the dip, the fire and the tilt all switch off;
   the layout and every value stay exactly where they were.

   Ambient motion stops too, but the scene it was animating must stay
   fully drawn. Every loop above has identical 0% and 100% poses, so
   stopping at iteration 1 lands on a complete frame — these rules
   state that resting pose explicitly rather than trusting it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .pot-turn { transform: none !important; }
  .pot-gloss, .drag-gloss { opacity: .5 !important; }
  .smudge { animation: none; opacity: .55; transform: scale(1); }
  .shelf { animation: none !important; background-color: var(--plum) !important; }
  .forms.is-dipping .pot-wet { animation: none; opacity: 1; clip-path: inset(-4% 0 0 0); }
  .shelf-item { animation: none; }
  .pot-shimmer { opacity: .18 !important; animation: none !important; transform: none !important; }
  .motes i     { opacity: .28 !important; animation: none !important; transform: none !important; }
  .hz          { opacity: .2 !important;  animation: none !important; transform: none !important; }
  .kiln-fire   { animation: none !important; transform: none !important; }
  .shelf-inner { animation: none !important; background-color: var(--plum) !important; }
  .swatch .sw-dot { animation: none !important; }
}