/* Hand-Painted Figures — the workbench.
   Memorable element: the masthead is a self-healing cutting mat (green, cm grid).
   Everything else stays quiet so the hand-held footage carries the page. */

:root {
  --mat: #2f5d50;        /* cutting mat green */
  --mat-line: #5f8a7c;   /* mat grid lines */
  --paper: #f2f3f0;      /* neutral grey-white, not cream */
  --card: #ffffff;
  --ink: #1e2422;
  --primer: #6f7873;     /* secondary text, primer grey */
  --rule: #d9ddd9;
  --stamp: #b8322a;      /* SOLD stamp red */
  --focus: #e0a526;
  --gutter: 16px;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --text: "Barlow", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.55 var(--text);
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- masthead: the cutting mat ---------- */
.masthead {
  background-color: var(--mat);
  background-image:
    linear-gradient(var(--mat-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--mat-line) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
  background-position: -1px -1px;
  color: #fff;
  padding: 40px max(var(--gutter), calc((100% - 1180px) / 2 + var(--gutter))) 28px;
}
.wordmark {
  font: 700 clamp(2.4rem, 9vw, 4.75rem)/0.92 var(--display);
  letter-spacing: -0.01em;
  text-decoration: none;
  display: block;
  max-width: 12ch;
}
.promise {
  margin: 14px 0 0;
  font-size: 1rem;
  max-width: 34ch;
  color: #dce8e3;
}

main { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- feed ---------- */
.feed-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 28px 0 12px;
}
.feed-head h2 { font: 700 1.6rem/1 var(--display); margin: 0; }
.feed-head p { margin: 0; color: var(--primer); font-size: .95rem; }

.feed {
  list-style: none; margin: 0; padding: 0 0 48px;
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.card a { display: block; text-decoration: none; background: var(--card); border-radius: 6px; overflow: hidden; }
.frame { position: relative; aspect-ratio: 4 / 5; background: #dfe3df; }
.frame img, .frame video { width: 100%; height: 100%; object-fit: cover; }
.meta {
  display: grid; grid-template-columns: 1fr auto; column-gap: 12px;
  padding: 12px 14px 14px;
}
.meta .no { grid-column: 1 / -1; font: 700 1.5rem/1 var(--display); }
.meta .name { color: var(--primer); font-size: .95rem; margin-top: 4px; }
.meta .price { font-weight: 600; margin-top: 4px; }
.card a:hover .no { text-decoration: underline; text-underline-offset: 3px; }
.is-sold .frame img, .is-sold .frame video { filter: grayscale(.85); opacity: .75; }
.is-sold .price { color: var(--primer); font-weight: 400; }

/* the one loud thing besides the mat */
.stamp {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  font: 700 2.6rem/1 var(--display); text-transform: uppercase; letter-spacing: .06em;
  color: var(--stamp); border: 4px solid var(--stamp); border-radius: 4px;
  padding: 4px 18px; background: rgba(255,255,255,.75);
}

/* ---------- product page ---------- */
.piece { display: grid; gap: 20px; padding: 20px 0 56px; }
@media (min-width: 900px) {
  .piece { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
  .detail { position: sticky; top: 24px; }
}
.gallery { display: grid; gap: 12px; }
/* phones: swipe through the shots instead of scrolling past them */
@media (max-width: 899px) {
  .gallery {
    grid-auto-flow: column; grid-auto-columns: 86%;
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter);
    scrollbar-width: none;
  }
  .gallery::-webkit-scrollbar { display: none; }
  .shot { scroll-snap-align: center; }
  .shot img, .shot video { aspect-ratio: 4 / 5; object-fit: cover; height: auto; }
}
.shot { margin: 0; background: #dfe3df; border-radius: 6px; overflow: hidden; }
.shot video, .shot img { width: 100%; }
.shot figcaption { font-size: .85rem; color: var(--primer); padding: 8px 12px; background: var(--card); }

.no.big { font: 700 clamp(3.5rem, 14vw, 6rem)/0.9 var(--display); margin: 0; }
.detail h1 { font: 500 1.35rem/1.3 var(--text); margin: 8px 0 0; max-width: 32ch; }
.price-line { display: flex; align-items: baseline; gap: 14px; margin: 16px 0 20px; }
.price-line .price { font: 700 2rem/1 var(--display); }
.stock { color: var(--primer); }
.stock.sold { color: var(--stamp); font-weight: 600; }

.buy {
  display: block; text-align: center; text-decoration: none;
  background: var(--ink); color: #fff; font-weight: 600; font-size: 1.05rem;
  padding: 16px 20px; border-radius: 6px;
}
.buy:hover { background: var(--mat); }
.ship-note { color: var(--primer); font-size: .92rem; margin: -12px 0 18px; }
.buy-note { color: var(--primer); font-size: .92rem; margin: 10px 0 0; }
.desc { margin-top: 24px; max-width: 62ch; }
.tags { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { font-size: .85rem; border: 1px solid var(--rule); background: var(--card); padding: 3px 10px; border-radius: 999px; }
.truth { border-left: 3px solid var(--mat); padding-left: 12px; color: var(--primer); font-size: .92rem; margin-top: 24px; }
.back { display: inline-block; margin-top: 20px; font-weight: 500; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--rule); padding: 24px var(--gutter) 40px; max-width: 1180px; margin: 0 auto; }
@media (min-width: 1212px) { .foot { padding-inline: var(--gutter); } }
.foot p { margin: 0 0 6px; }
.foot .small { color: var(--primer); font-size: .88rem; max-width: 60ch; }
.empty { padding: 48px 0; color: var(--primer); }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }