html[data-drop="porcelain"] main { overflow-x: clip; }

.kiln-hero { position: relative; padding: 0; --dip: 40; --bar: calc(30px + env(safe-area-inset-top)); }
@media (min-width: 900px) { .kiln-hero { --dip: 50; } }

.kiln-stage {
  position: relative;
  min-height: calc(var(--vh, 1svh) * 100 - var(--bar));
  display: flex;
}
html.kiln-on .kiln-hero { height: calc(var(--vh, 1svh) * (100 + 2.25 * var(--dip)) - var(--bar)); }
html.kiln-on .kiln-stage {
  position: sticky; top: var(--bar);
  height: calc(var(--vh, 1svh) * 100 - var(--bar)); min-height: 0;
}

.kiln-grid {
  display: flex; flex-direction: column;
  gap: clamp(18px, calc(var(--vh, 1svh) * 3), 30px);
  padding-top: 86px;
  padding-bottom: clamp(24px, calc(var(--vh, 1svh) * 4.5), 48px);
}
.kiln {
  position: relative; flex: none;
  align-self: center;
  height: clamp(180px, calc(var(--vh, 1svh) * 100 - var(--bar) - 350px), 440px);
  aspect-ratio: 800 / 1040;
  margin: auto 0;
}
.kiln-layer {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  -webkit-user-select: none; user-select: none;
}
.kiln-layer + .kiln-layer { visibility: hidden; }

.kiln-edge {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
  opacity: 0;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.kiln-edge path {
  fill: none; stroke: #FFFFFF; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.8;
}

@media (min-width: 900px) {
  .kiln-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    align-items: center;
    width: 100%;
    padding-top: clamp(92px, calc(var(--vh, 1svh) * 11), 116px);
    padding-bottom: clamp(44px, calc(var(--vh, 1svh) * 8), 76px);
  }
  .kiln-copy { grid-column: 1; grid-row: 1; align-self: end; }
  .kiln {
    grid-column: 2; grid-row: 1;
    justify-self: center; margin: 0;
    height: min(calc(var(--vh, 1svh) * 76), 800px);
  }
}

html[data-drop="porcelain"] .kiln-copy h1 {
  font-size: clamp(3.3rem, 8vw, 7.4rem);
  font-weight: 500; line-height: 0.92; letter-spacing: -0.04em;
  color: var(--fg);
  margin: 0 0 clamp(14px, 1.8vw, 22px);
}
.kiln-line {
  font-size: clamp(1rem, 1.35vw, 1.15rem); line-height: 1.5;
  color: #C9C9CF;
  max-width: 34ch; margin: 0 0 8px;
  text-wrap: pretty;
}
.kiln-facts {
  font-size: 12.5px; font-weight: 500; letter-spacing: 0.08em; line-height: 1.35;
  text-transform: uppercase; font-variant-numeric: tabular-nums;
  color: var(--muted-fg);
  margin: 0 0 clamp(18px, 2.6vw, 28px);
}

.kiln-chips { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.chip {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  font-size: 12.5px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #BDBDC3;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: color 280ms var(--ease-2);
}
.chip img {
  width: 34px; height: 34px; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22);
  transition: box-shadow 320ms var(--ease-2), transform 320ms var(--ease-2);
}
.chip.is-on { color: #FFFFFF; }
.chip.is-on img { box-shadow: 0 0 0 2px #0C0C0E, 0 0 0 3.5px #FFFFFF; }
@media (hover: hover) and (pointer: fine) {
  .chip:hover { color: #FFFFFF; }
  .chip:hover img { transform: scale(1.08); }
}
.chip:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 4px; border-radius: 22px; }
@media (min-width: 900px) { .kiln-chips { gap: 6px 24px; } }
@media (max-width: 359px) {
  .kiln-chips { gap: 6px 10px; }
  .chip { gap: 7px; letter-spacing: 0.05em; }
  .chip img { width: 26px; height: 26px; }
}

.chapter { padding-top: clamp(72px, 9vw, 128px); padding-bottom: 0; }
.ch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px 4px;
}
.ch-grid > * { min-width: 0; }
.ch-head, .ch-grid .lead { grid-column: 1 / -1; }
.ch-grid .detail { display: none; }

.ch-mark { width: auto; height: 60px; margin: 0 0 18px; }
html[data-drop="porcelain"] .ch-head h2 {
  font-size: clamp(2.2rem, 3.3vw, 3rem);
  font-weight: 500; line-height: 1; letter-spacing: -0.035em;
  color: var(--fg);
  margin: 0 0 12px;
}
.ch-head p {
  font-size: 15px; line-height: 1.55;
  color: var(--muted-fg);
  max-width: 30ch; margin: 0;
  text-wrap: pretty;
}

.detail { margin: 0; }

.ch-grid .dots:not(:has(button)) { margin-top: 4px; min-height: 24px; align-items: center; }
@media (max-width: 719px) { .ch-grid .dots:not(:has(button)) { min-height: 28px; } }
html[data-page="apparel"] .meta .cap {
  font-size: 12.5px; font-weight: 500; line-height: 1.35;
  letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--muted-fg);
  margin: 0;
}

@media (min-width: 900px) {
  .ch-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 4px; }
  .ch-grid .detail { display: flex; flex-direction: column; }
  .ch-grid .lead {
    grid-column: 1 / span 2; grid-row: 1 / span 2;
    display: flex; flex-direction: column;
  }
  .ch-grid .lead .plate { aspect-ratio: auto; flex: 1 1 auto; min-height: 0; }
  .ch-head { grid-column: 3; grid-row: 1; padding: 0 12px 0 clamp(24px, 3vw, 44px); }
  .ch-grid [data-slot="s1"] { grid-column: 4; grid-row: 1; }
  .ch-grid [data-slot="s2"] { grid-column: 3; grid-row: 2; }
  .ch-grid [data-slot="s3"] { grid-column: 4; grid-row: 2; }

  .flip .ch-grid .lead { grid-column: 3 / span 2; }
  .flip .ch-head { grid-column: 1; padding: 0 clamp(24px, 3vw, 44px) 0 0; }
  .flip .ch-grid [data-slot="s1"] { grid-column: 2; }
  .flip .ch-grid [data-slot="s2"] { grid-column: 1; }
  .flip .ch-grid [data-slot="s3"] { grid-column: 2; }
}

.finale { padding-top: clamp(96px, 13vw, 176px); padding-bottom: clamp(24px, 4vw, 48px); }
.fin-head {
  display: grid; gap: 26px;
  margin-bottom: clamp(22px, 3vw, 34px);
}
.fin-marks { display: flex; gap: 6px; margin: 0 0 18px; }
.fin-marks img { width: auto; height: 52px; }
html[data-drop="porcelain"] .fin-copy h2 {
  font-size: clamp(2.6rem, 5.2vw, 4.4rem);
  font-weight: 500; line-height: 0.98; letter-spacing: -0.04em;
  color: var(--fg);
  margin: 0 0 14px;
}
.fin-copy p {
  font-size: clamp(15px, 1.3vw, 17px); line-height: 1.55;
  color: var(--muted-fg);
  max-width: 40ch; margin: 0;
  text-wrap: pretty;
}
.fin-buy { display: grid; justify-items: start; padding-top: 0; }
html[data-page="apparel"] .fin-buy .price { display: block; }
.fin-buy .dots { margin-bottom: 18px; }
html[data-page="apparel"] .fin-btn.btn.solid { background: #FFFFFF; color: #0A0A0C; }
html[data-page="apparel"] .fin-btn.btn.solid:hover { background: #E4E4E8; }
html[data-page="apparel"] .fin-btn.btn.solid .pip { background: rgba(10, 10, 12, 0.13); color: #0A0A0C; }
.fin-plates { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.fin-more {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 4px;
  margin-top: clamp(40px, 6vw, 72px);
}
.fin-more > * { min-width: 0; }
.fin-more .dots:not(:has(button)) { margin-top: 4px; min-height: 28px; align-items: center; }

@media (min-width: 600px) {
  .fin-plates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .fin-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .fin-buy { justify-items: end; text-align: right; }
  .fin-buy .dots:has(button) { margin-left: 0; margin-right: -7px; justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  .chip, .chip img { transition: none; }
}

@media (max-width: 719px) {
  html[data-drop="porcelain"] .dots:has(button:nth-child(6)) { margin-left: -7px; }
  html[data-drop="porcelain"] .dots:has(button:nth-child(6)) button { width: 24px; height: 24px; }
}

html[data-page="apparel"] .meta .until { color: var(--fg); letter-spacing: 0.08em; }
html[data-page="apparel"] .meta .until.is-closed { color: var(--muted-fg); }
.fin-buy .until { margin-left: 12px; }
.pdp-until { margin: 0 0 12px; font-size: 13px; line-height: 1.45; color: var(--fg); }
.pdp-order:disabled { opacity: 0.45; cursor: not-allowed; }

.plate.still { cursor: default; }
html[data-drop="porcelain"] main > [hidden] { display: none; }

.gate { padding: 0; }
.gate-in {
  min-height: calc(var(--vh, 1svh) * 100 - 30px - env(safe-area-inset-top));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding-top: 92px; padding-bottom: 48px;
}

.gate-set {
  --rh: min(calc(var(--vh, 1svh) * 26), 250px, 34vw);
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(4px, 1.2vw, 16px);
  margin: 0 0 clamp(24px, calc(var(--vh, 1svh) * 4), 42px);
  translate: calc(var(--rh) * 0.084) 0;
}
.gate-r {
  width: auto;
  height: var(--rh);
  animation: gate-up 900ms var(--ease) both;
  animation-delay: calc(var(--i) * 110ms);
}
@keyframes gate-up {
  from { opacity: 0; translate: 0 22px; }
  to   { opacity: 1; translate: 0 0; }
}

html[data-drop="porcelain"] .gate h1 {
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 500; line-height: 0.95; letter-spacing: -0.04em;
  color: var(--fg);
  margin: 0 0 14px;
}
.gate-line {
  font-size: clamp(1rem, 1.3vw, 1.1rem); line-height: 1.5;
  color: #C9C9CF;
  max-width: 38ch; margin: 0 auto 14px;
  text-wrap: balance;
}
.gate-when {
  font-size: 12.5px; font-weight: 500; line-height: 1.35;
  text-wrap: balance;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg);
  margin: 0 0 18px;
}
.gate-count {
  display: flex; justify-content: center; gap: clamp(20px, 6vw, 36px);
  margin: 0 0 clamp(26px, calc(var(--vh, 1svh) * 4), 40px);
}
.gate-count[hidden] { display: none; }
.gc { display: grid; justify-items: center; gap: 6px; min-width: 3ch; }
.gc-n {
  font-size: clamp(2rem, 4.6vw, 2.6rem); font-weight: 500; line-height: 1;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.gc-l {
  font-size: 12px; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted-fg);
}
.gc-now { font-size: 15px; line-height: 1.45; color: var(--fg); }

.gate-acts { width: 100%; max-width: 400px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
.gate-list { display: grid; gap: 10px; justify-items: center; }
html[data-page="apparel"] .gate-btn.btn.solid { background: #FFFFFF; color: #0A0A0C; }
html[data-page="apparel"] .gate-btn.btn.solid:hover { background: #E4E4E8; }
html[data-page="apparel"] .gate-btn.btn.solid .pip { background: rgba(10, 10, 12, 0.13); color: #0A0A0C; }
.gate-note { font-size: 14px; line-height: 1.45; color: var(--muted-fg); margin: 0; }

.gate-list.list-form { justify-items: stretch; }
.list-form input {
  height: 52px; padding: 0 16px;
  border: 1px solid var(--edge); border-radius: var(--r-in);
  background: #141417; color: var(--fg); caret-color: #FFFFFF;
  font: 500 16px/1 "Inter Tight", system-ui, sans-serif; letter-spacing: 0.01em;
  text-align: center;
  transition: border-color 200ms var(--ease-2);
}
.list-form input::placeholder { color: var(--muted-fg); opacity: 1; }
.list-form input:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.list-form .gate-btn { width: 100%; justify-content: center; }
.list-form .gate-btn:disabled { opacity: 0.6; cursor: progress; }
.list-msg { margin: 0; font-size: 15px; line-height: 1.5; color: var(--fg); text-wrap: pretty; }
.list-msg:empty { display: none; }
.list-msg:focus { outline: none; }
.list-form.is-done input, .list-form.is-done .gate-btn { display: none; }
.list-form.is-joined .gate-note { display: none; }
.list-form.is-joined .list-msg { font-size: 16px; }
.list-check { display: block; width: 100%; height: 160px; border: 0; border-radius: var(--r-in); background: #FFFFFF; }
@media (hover: hover) and (pointer: fine) {
  .list-form input:hover { border-color: rgba(255, 255, 255, 0.5); }
}
@media (prefers-reduced-motion: reduce) { .list-form input { transition: none; } }

.gate-form {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px;
  padding-top: 24px;
  border-top: 1px solid var(--hair);
}
.gate-form label {
  font-size: 12.5px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-fg);
}
.gate-row { display: flex; gap: 8px; }
.gate-row input {
  flex: 1 1 auto; min-width: 0; height: 48px;
  padding: 0 14px;
  border: 1px solid var(--edge); border-radius: var(--r-in);
  background: #141417; color: var(--fg); caret-color: #FFFFFF;
  font: 500 16px/1 "Inter Tight", system-ui, sans-serif; letter-spacing: 0.02em;
  transition: border-color 200ms var(--ease-2);
}
.gate-row input:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.gate-open {
  flex: none; height: 48px; padding: 0 22px;
  border: 1.5px solid #FFFFFF; border-radius: var(--r-in);
  background: transparent; color: #FFFFFF;
  font: 500 15px/1 "Inter Tight", system-ui, sans-serif;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background-color 240ms var(--ease-2), color 240ms var(--ease-2);
}
@media (hover: hover) and (pointer: fine) {
  .gate-row input:hover { border-color: rgba(255, 255, 255, 0.5); }
  .gate-open:hover { background: #FFFFFF; color: #0A0A0C; }
}
.gate-open:disabled { opacity: 0.6; cursor: progress; }
.gate-open:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
.gate-msg { min-height: 1.45em; margin: 0; font-size: 14px; line-height: 1.45; color: var(--fg); }

@media (prefers-reduced-motion: reduce) {
  .gate-r { animation: none; }
  .gate-row input, .gate-open { transition: none; }
}