*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background-color: var(--paper);
  background-image: var(--paper-grid);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--thread);
  outline-offset: 3px;
}

/* ---------- Top bar ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
}

.wordmark {
  font-stretch: var(--display-stretch);
  font-weight: 800;
  font-size: var(--step-1);
  letter-spacing: 0.04em;
  text-decoration: none;
}

.cart-toggle {
  background: none;
  border: 0;
  padding: var(--space-2) 0;
  cursor: pointer;
  font-weight: 500;
}

/* ---------- Hero + stage ---------- */

.hero { position: relative; }

/* Grey label like the title strip of a sketch */
.hero__tag {
  display: inline-block;
  margin-bottom: var(--space-2);
  padding: 3px 10px;
  background: var(--tag);
  color: var(--paper);
  font-weight: 600;
  font-size: var(--step--1);
}

.hero__title {
  margin: 0;
  font-family: var(--hand);
  font-weight: 400;
  line-height: 1;
}

/* Break only between sentences */
.hero__title span { white-space: nowrap; }

.stage {
  position: relative;
  margin-inline: auto;
}

.stage__seams {
  position: absolute;
  z-index: 1;            /* over the photos, so an arrow can reach a piece behind another */
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.stage__pieces,
.stage__labels { position: absolute; inset: 0; }

.stage__pieces { z-index: 0; }
.stage__labels { z-index: 1; pointer-events: none; }

/* Reserve roughly the height stage.js will set (viewport minus top bar, buy bar
   and, on mobile, the headline), so the page below doesn't jump on load */
.js .stage:not(.is-ready) { height: calc(100svh - 156px); }
@media (max-width: 767px) { .js .stage:not(.is-ready) { height: calc(100svh - 300px); } }

/* Hidden until stage.js has positioned the pieces; labels wait for their seam line */
.stage:not(.is-ready) .stage__pieces { visibility: hidden; }
.stage__labels:not(.is-shown) .piece-label { opacity: 0; }

.piece-label {
  position: absolute;
  translate: 0 -50%;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.piece-label {
  font-family: var(--hand);
  line-height: 1.1;
  pointer-events: auto;
  cursor: pointer;
  transition: opacity var(--dur-hover) var(--ease-out);
}
.stage.has-active .piece-label:not(.is-active) { opacity: 0.45; }
.piece-label__name { font-size: 1.35rem; }
.piece-label__price { font-size: 1.1rem; color: var(--seam); }

.piece {
  position: absolute;
  translate: -50% -50%;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  pointer-events: none; /* mouse and touch use the pixel hit test in stage.js */
  -webkit-tap-highlight-color: transparent;
  transition: scale var(--dur-hover) var(--ease-out), opacity var(--dur-hover) var(--ease-out);
}

.stage.is-pointing { cursor: pointer; }

/* Hover state: the piece grows, the rest steps back */
.piece.is-active { scale: 1.06; }
.stage.has-active .piece:not(.is-active) { opacity: 0.45; }

.piece:focus-visible { outline-offset: 8px; }

.piece__art {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* Pencil overlay: arrows from each label to its piece, floor line */
.pencil {
  fill: none;
  stroke: var(--pencil);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pencil--floor { stroke-width: 1.2; }

[data-seam] .pencil { transition: stroke var(--dur-hover) var(--ease-out), stroke-width var(--dur-hover) var(--ease-out); }
[data-seam] { transition: opacity var(--dur-hover) var(--ease-out); }
[data-seam].is-active .pencil { stroke: var(--thread); stroke-width: 2; }
.stage.has-active [data-seam]:not(.is-active) { opacity: 0.35; }

/* ---------- Piece info: card (mouse) and bottom sheet (touch) ---------- */

.card {
  position: absolute;
  z-index: 5;
  left: 0;
  top: 0;
  width: 264px;
  padding: var(--space-4);
  background: var(--chalk);
  border: 1.5px solid var(--pencil);
  border-radius: 3px;
  opacity: 0;
  scale: 0.96;
  visibility: hidden; /* hidden chips must not be reachable with Tab */
  transition:
    opacity var(--dur-card) var(--ease-out),
    scale var(--dur-card) var(--ease-out),
    visibility 0s linear var(--dur-card);
}

.card.is-shown {
  opacity: 1;
  scale: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* Opened from the keyboard: show at once, keyboard actions never animate */
.stage.is-instant .card,
.stage.is-instant .piece,
.stage.is-instant .piece-label,
.stage.is-instant [data-seam],
.stage.is-instant [data-seam] .pencil { transition: none; }

.info__name { margin: 0; font-family: var(--hand); font-size: 1.6rem; line-height: 1.05; }
.info__material { margin: 2px 0 0; color: var(--seam); font-size: var(--step--1); }
.info__desc { margin: var(--space-3) 0 0; font-size: var(--step--1); line-height: 1.45; }
.info__price { margin: var(--space-3) 0 0; font-family: var(--hand); font-size: 1.45rem; line-height: 1; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.chip {
  min-width: 48px;
  padding: 7px 14px;
  border: 1px solid var(--pencil);
  border-radius: var(--radius-chip);
  background: transparent;
  font-weight: 500;
  font-size: var(--step--1);
  cursor: pointer;
  transition:
    background-color 150ms ease,
    color 150ms ease,
    border-color 150ms ease,
    scale var(--dur-press) var(--ease-out);
}

.chip--wide { padding-inline: var(--space-6); }

@media (hover: hover) and (pointer: fine) {
  .chip:not(:disabled):not(.is-added):hover { background: var(--ink); color: var(--paper); }
}

.chip:not(:disabled):active { scale: 0.97; }

.chip[aria-pressed="true"],
.chip.is-added {
  background: var(--thread);
  border-color: var(--thread);
  color: var(--thread-ink);
}

/* Sold out: struck through, not clickable */
.chip:disabled {
  border-color: var(--grid);
  color: var(--seam);
  text-decoration: line-through;
  cursor: not-allowed;
}

/* Sliding panels on <dialog>: piece sheet, cart drawer, bundle step (dialog.js) */
.panel-dialog {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}

.panel-dialog::backdrop { background: transparent; }

.panel-dialog__scrim {
  position: absolute;
  inset: 0;
  background: rgb(28 33 31 / 0.3);
  opacity: 0;
  transition: opacity 240ms var(--ease-out); /* closing: the system responds, so it's quicker */
}

.panel-dialog__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 85vh;
  overflow: auto;
  padding: var(--space-6) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom));
  background-color: var(--paper);
  background-image: var(--paper-grid);
  border-top: 1.5px solid var(--pencil);
  translate: 0 100%;
  transition: translate 240ms var(--ease-out);
}

.panel-dialog__panel:focus { outline: none; } /* focused on open so no button lights up */

.panel-dialog.is-open .panel-dialog__scrim { opacity: 1; transition: opacity var(--dur-drawer) var(--ease-drawer); }
.panel-dialog.is-open .panel-dialog__panel { translate: 0 0; transition: translate var(--dur-drawer) var(--ease-drawer); }

/* Desktop: the cart and the bundle step come in from the right */
@media (min-width: 768px) {
  .panel-dialog--side .panel-dialog__panel {
    left: auto;
    top: 0;
    width: min(440px, 100%);
    max-height: none;
    padding: var(--space-6);
    border-top: 0;
    border-left: 1.5px solid var(--pencil);
    translate: 100% 0;
  }
}

.panel-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 0;
  background: none;
  font-family: var(--hand);
  font-size: 1.15rem;
  cursor: pointer;
}

.sheet__body { padding-right: 96px; } /* room for the close button */
.sheet__body .info__name { font-size: 1.9rem; }
.sheet__body .chip { min-width: 56px; padding: 10px 16px; font-size: var(--step-0); }

html:has(.panel-dialog[open]) { overflow: hidden; }

/* ---------- Drawer content (cart and bundle step) ---------- */

.drawer { display: flex; flex-direction: column; }
@media (min-width: 768px) { .panel-dialog--side .drawer { height: 100%; } }

.drawer__head { padding-right: 96px; }
.drawer__head h2 { margin: 0; font-family: var(--hand); font-weight: 400; font-size: var(--step-3); line-height: 1.1; }

.drawer__notice {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--thread);
  background: var(--chalk);
  font-family: var(--hand);
  font-size: 1.1rem;
  line-height: 1.25;
}

.drawer__body { flex: 1; padding: var(--space-4) 0; }

.drawer__foot {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--pencil);
}

.drawer__cta { width: 100%; padding-block: var(--space-4); }
.drawer__cta:disabled { background: var(--tag); cursor: not-allowed; }
.drawer__cta:disabled:active { transform: none; }

.drawer__msg { margin: 0; min-height: 1.2em; font-family: var(--hand); font-size: 1.05rem; color: var(--seam); }

.cart__empty { display: grid; gap: var(--space-4); justify-items: start; }
.cart__empty p { margin: 0; font-family: var(--hand); font-size: 1.3rem; line-height: 1.25; }

.lines { list-style: none; margin: 0; padding: 0; }

.line {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "info price" "info qty";
  gap: var(--space-2) var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--grid);
}

.line__info { grid-area: info; }
.line__name { margin: 0; font-family: var(--hand); font-size: 1.3rem; line-height: 1.1; }
.line__meta { margin: 2px 0 0; color: var(--seam); font-size: var(--step--1); line-height: 1.4; }
.line__price { grid-area: price; margin: 0; justify-self: end; font-family: var(--hand); font-size: 1.25rem; }

.line__remove {
  margin-top: var(--space-2);
  padding: 0;
  border: 0;
  background: none;
  color: var(--seam);
  font-size: var(--step--1);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.qty {
  grid-area: qty;
  justify-self: end;
  display: flex;
  align-items: center;
  border: 1px solid var(--pencil);
  border-radius: var(--radius-chip);
}

.qty__btn {
  width: 34px;
  height: 34px;
  border: 0;
  background: none;
  font-size: 1.1rem;
  cursor: pointer;
  transition: scale var(--dur-press) var(--ease-out);
}
.qty__btn:not(:disabled):active { scale: 0.95; }
.qty__btn:disabled { color: var(--grid); cursor: not-allowed; }
.qty__value { min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }

.sums { display: grid; gap: var(--space-1); margin: 0; }
.sums div { display: flex; justify-content: space-between; }
.sums dt { color: var(--seam); }
.sums dd { margin: 0; }
.sums__free { margin: 0; font-family: var(--hand); font-size: 1.05rem; color: var(--seam); }
.sums__free:empty { display: none; }
.sums__total { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.sums__total > span { font-family: var(--hand); font-size: 1.4rem; }

.bundle__lead { margin: 0 0 var(--space-2); font-family: var(--hand); font-size: 1.2rem; color: var(--seam); }
.bundle__row { padding: var(--space-3) 0; border-bottom: 1px solid var(--grid); }
.bundle__name { margin: 0; font-family: var(--hand); font-size: 1.3rem; }
.bundle__row .chips { margin-top: var(--space-2); }
.bundle__one { margin: 2px 0 0; color: var(--seam); font-size: var(--step--1); }
.bundle__save { margin: 0; font-family: var(--hand); font-size: 1.1rem; line-height: 1.2; color: var(--seam); }
.bundle__save s { color: var(--ink); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .piece, .piece-label, [data-seam], [data-seam] .pencil, .chip, .qty__btn { transition: none; }
  /* Panels fade in place instead of sliding */
  .panel-dialog__panel,
  .panel-dialog.is-open .panel-dialog__panel { translate: none; opacity: 0; transition: opacity 160ms linear; }
  .panel-dialog.is-open .panel-dialog__panel { opacity: 1; }
  .card { transition: opacity 120ms linear, visibility 0s linear 120ms; scale: 1; }
  .card.is-shown { transition-delay: 0s; }
}

/* Desktop stage: fixed aspect so percentages stay true */
@media (min-width: 768px) {
  .hero__intro {
    position: absolute;
    z-index: 2;
    top: var(--space-4);
    left: max(var(--space-6), calc((100% - var(--stage-w)) / 2 + var(--space-6)));
    pointer-events: none;
  }

  .hero__title { font-size: clamp(2rem, 3vw, 3.2rem); }
  .hero__title span { display: block; }

  .stage { width: var(--stage-w); }

  .hero { --stage-w: min(100% - var(--space-12), 1400px); }
}

/* Mobile stage: taller than wide, pieces staggered down the page */
@media (max-width: 767px) {
  .topbar { padding: var(--space-3) var(--space-4); }

  .hero__intro { padding: var(--space-2) var(--space-4) 0; }
  .hero__title { font-size: 1.9rem; }

  .stage { width: 100%; }

  .piece-label__name { font-size: 1.15rem; }
  .piece-label__price { font-size: 0.95rem; }
}

/* No-JS fallback list */
.piece-list {
  list-style: none;
  margin: 0 auto;
  padding: var(--space-6);
  max-width: 44rem;
}

.piece-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--seam);
}

.piece-list li span:first-child { font-weight: 600; }
.piece-list li span:nth-child(2) { grid-column: 1; color: var(--seam); font-size: var(--step--1); }
.piece-list li span:last-child { grid-column: 2; grid-row: 1; font-stretch: var(--display-stretch); }

.js .piece-list { display: none; }
.no-js .stage { display: none; }

/* ---------- Buy bar ---------- */

.buybar {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4) var(--space-8);
  padding: var(--space-4) var(--space-6);
  background-color: var(--paper);
  background-image: var(--paper-grid);
  background-attachment: fixed; /* squares line up with the page behind */
  border-top: 1px solid var(--pencil);
}

/* Black stopwatch box with big digits */
.clock {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: 6px 14px 4px;
  background: var(--ink);
  color: var(--paper);
  line-height: 1;
}
.clock span { font-weight: 600; font-size: var(--step--1); letter-spacing: 0.06em; }
.clock strong {
  font-stretch: var(--narrow);
  font-weight: 700;
  font-size: 2.6rem;
  font-variant-numeric: tabular-nums;
}

.buybar__note { margin: 0; font-family: var(--hand); font-size: 1.15rem; line-height: 1.2; color: var(--seam); }
.buybar__note s { color: var(--ink); }

.button {
  border: 0;
  border-radius: var(--radius-chip);
  padding: var(--space-3) var(--space-6);
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--dur-press) var(--ease-out);
}

.button:active { transform: scale(0.97); }

.button--primary {
  background: var(--thread);
  color: var(--thread-ink);
}

@media (max-width: 767px) {
  .buybar {
    grid-template-columns: 1fr auto;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-3) var(--space-4);
  }
  .buybar { grid-template-columns: auto 1fr; }
  .buybar .clock strong { font-size: 2.1rem; }
  .buybar__note { font-size: 1rem; }
  .buybar__cta { grid-column: 1 / -1; }
}

/* ---------- About ---------- */

.about {
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--space-16) var(--space-6) var(--space-12);
}

.about h2 {
  margin: 0 0 var(--space-4);
  font-family: var(--hand);
  font-weight: 400;
  font-size: var(--step-3);
  line-height: 1.1;
}

.about > p { margin: 0 0 var(--space-8); }

.about details { border-top: 1px solid var(--seam); }
.about details:last-of-type { border-bottom: 1px solid var(--seam); }

.about summary {
  padding: var(--space-4) 0;
  font-weight: 600;
  cursor: pointer;
}

.about details p { margin: 0 0 var(--space-4); }

/* ---------- Legal pages ---------- */

.legal {
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-12);
}

.legal__title {
  margin: 0 0 var(--space-6);
  font-family: var(--hand);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  line-height: 1.05;
}

.legal__draft {
  margin: 0 0 var(--space-8);
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--pencil);
  background: var(--chalk);
  font-size: var(--step--1);
}

.legal h2 {
  margin: var(--space-8) 0 var(--space-2);
  font-family: var(--hand);
  font-weight: 400;
  font-size: var(--step-2);
  line-height: 1.15;
}

.legal p, .legal ul { margin: 0 0 var(--space-4); }
.legal ul { padding-left: 1.2em; }
.legal li { margin-bottom: var(--space-2); }
.legal__date { color: var(--seam); font-size: var(--step--1); }

/* ---------- Thank-you page ---------- */

.thanks {
  max-width: 34rem;
  margin: 0 auto;
  padding: var(--space-12) var(--space-6) var(--space-16);
}

.thanks__title {
  margin: 0 0 var(--space-6);
  font-family: var(--hand);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.05;
}

.thanks p { margin: 0 0 var(--space-4); }

.thanks__back { display: inline-block; margin-top: var(--space-4); text-decoration: none; }

/* ---------- Footer ---------- */

.footer {
  padding: var(--space-8) var(--space-6) var(--space-12);
  font-size: var(--step--1);
}

.footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
}