/* ==========================================================================
   Cutie Pie's Clay

   Design direction: San Francisco fog as the cool ground, fired clay as the
   warm objects sitting on it, International Orange reserved strictly for
   buy actions. Everything is built on a block grid with hard bevels and
   zero rounded corners.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts
   -------------------------------------------------------------------------- */

/* Clay Pixel is Silkscreen with one glyph redrawn. Silkscreen Bold draws 4
   as a solid block with no counter, which reads as a 9 at price-tag size.
   On a shop whose three prices are $3, $4 and $5 that is not cosmetic.
   See tools/patch-font.py. Licence in fonts/OFL.txt.

   Pixelify Sans was the other candidate and is worse: its 5 is an S-shape
   indistinguishable from 8. */
@font-face {
  font-family: "Clay Pixel";
  src: url("fonts/claypixel-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Clay Pixel";
  src: url("fonts/claypixel-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Karla";
  src: url("fonts/karla-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Fog: the cool ground everything sits on */
  --fog-0: #e9eeef;
  --fog-1: #d8e3e5;
  --fog-2: #b8c8cb;

  /* Slate: text and the deepest structure */
  --slate: #26343a;
  --slate-2: #55676e;

  /* Paper: the warm interior of every block */
  --paper: #faf7f3;
  --paper-2: #f0e9e1;

  /* Clay: fired terracotta, the material of the blocks themselves */
  --clay: #b06a4b;
  --clay-hi: #d9997a;
  --clay-lo: #7c4630;

  /* Bridge: International Orange. Buy actions only. Nothing else. */
  --bridge: #c93a12;
  --bridge-hi: #e8724a;
  --bridge-lo: #8a2408;

  /* Sun: one small warm highlight, used for price tags */
  --sun: #f2c14e;
  --sun-lo: #b98a1c;

  /* Structure */
  --bevel: 4px;
  --gap: 1rem;
  --container: 68rem;

  /* Type scale */
  --step--1: 0.82rem;
  --step-0: 1rem;
  --step-1: 1.2rem;
  --step-2: 1.5rem;
  --step-3: 2rem;
  --step-4: 2.6rem;

  --display: "Clay Pixel", ui-monospace, monospace;
  --body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* --------------------------------------------------------------------------
   3. Reset and base
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--fog-0);
  color: var(--slate);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.6;
  /* Faint block grid, so the page itself reads as graph paper */
  background-image:
    linear-gradient(var(--fog-1) 1px, transparent 1px),
    linear-gradient(90deg, var(--fog-1) 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px;
}

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

img { image-rendering: pixelated; }

/* Clay Pixel is a caps-forward bitmap face and sets wide, so the display
   sizes here run smaller than a proportional face would want. */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 0.6em;
  overflow-wrap: break-word;
}

h1 { font-size: clamp(1.35rem, 6.5vw, 2.3rem); }
h2 { font-size: clamp(1.05rem, 4.4vw, 1.6rem); }
h3 { font-size: var(--step-0); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--bridge-lo); }

:focus-visible {
  outline: var(--bevel) solid var(--slate);
  outline-offset: 2px;
}

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

.wrap {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
}

.section { padding: 3.5rem 0; }
.section--tight { padding: 2.25rem 0; }

.section__label {
  font-family: var(--display);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--clay-lo);
  margin: 0 0 0.35rem;
}

/* --------------------------------------------------------------------------
   5. The block primitive

   Light on top and left, dark on bottom and right, plus a hard offset
   shadow. This is the whole visual language of the site.
   -------------------------------------------------------------------------- */

.block {
  background: var(--paper);
  border: var(--bevel) solid;
  border-color: var(--clay-hi) var(--clay-lo) var(--clay-lo) var(--clay-hi);
  box-shadow: var(--bevel) var(--bevel) 0 rgba(38, 52, 58, 0.16);
}

.block--fog {
  background: var(--fog-1);
  border-color: #fff var(--fog-2) var(--fog-2) #fff;
}

/* --------------------------------------------------------------------------
   6. Buttons

   A button is a physical key. It sits proud, and pressing it pushes it
   into the page by exactly one bevel.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--display);
  font-size: var(--step-0);
  font-weight: 700;
  line-height: 1;
  padding: 0.85rem 1.15rem;
  border: var(--bevel) solid;
  cursor: pointer;
  text-decoration: none;
  background: var(--fog-1);
  color: var(--slate);
  border-color: #fff var(--fog-2) var(--fog-2) #fff;
  box-shadow: var(--bevel) var(--bevel) 0 rgba(38, 52, 58, 0.18);
  transition: transform 80ms steps(2), box-shadow 80ms steps(2);
}

.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 rgba(38, 52, 58, 0.22); }

.btn:active {
  transform: translate(var(--bevel), var(--bevel));
  box-shadow: 0 0 0 rgba(38, 52, 58, 0);
  border-color: var(--fog-2) #fff #fff var(--fog-2);
}

/* The only International Orange on the page */
.btn--buy {
  background: var(--bridge);
  color: #fff;
  border-color: var(--bridge-hi) var(--bridge-lo) var(--bridge-lo) var(--bridge-hi);
  width: 100%;
}

.btn--buy:active { border-color: var(--bridge-lo) var(--bridge-hi) var(--bridge-hi) var(--bridge-lo); }

.btn--ghost { background: var(--paper); border-color: var(--clay-hi) var(--clay-lo) var(--clay-lo) var(--clay-hi); }
.btn--ghost:active { border-color: var(--clay-lo) var(--clay-hi) var(--clay-hi) var(--clay-lo); }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #cfe0e4 0%, #e9eeef 62%, var(--fog-0) 100%);
  border-bottom: var(--bevel) solid var(--fog-2);
  padding-top: 2.5rem;
}

.hero__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-bottom: 0.5rem;
}

/* Stacked two-line lockup. Clay Pixel is wide enough that setting the name
   on one line either overflows a phone or shrinks past legibility. */
.wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 7.5vw, 2.9rem);
  line-height: 1.15;
  color: var(--slate);
  margin: 0;
  /* Blocky offset shadow in clay, so the name reads as a stamped tile */
  text-shadow:
    0.09em 0.09em 0 var(--clay-hi),
    0.18em 0.18em 0 var(--clay-lo);
}

.wordmark span { display: block; }

/* A note from Zlata, pinned to the page.

   Deliberately the one thing on the site that is not a clay block: paper,
   tape, and a degree of tilt. A nine year old running a real business is what
   actually stops someone, so it should not read as another tagline. */
.note {
  position: relative;
  max-width: 28.6rem;
  margin: 1.75rem auto 1.8rem;
  padding: 1.5rem 1.5rem 1.3rem;
  background: #fffdf8;
  border: var(--bevel) solid;
  border-color: #fff #d8cec0 #d8cec0 #fff;
  box-shadow: 6px 8px 0 rgba(38, 52, 58, 0.16);
  transform: rotate(-1.1deg);
  text-align: left;
}

/* Two strips of tape. Translucent, so the paper shows through. */
.note::before,
.note::after {
  content: "";
  position: absolute;
  top: -14px;
  width: 75px;
  height: 26px;
  background: rgba(242, 193, 78, 0.72);
  border: 2px solid rgba(185, 138, 28, 0.45);
}

.note::before { left: 23px; transform: rotate(-6deg); }
.note::after  { right: 23px; transform: rotate(5deg); }

.note__label {
  font-family: var(--display);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clay-lo);
  margin: 0 0 0.72rem;
}

.note__text {
  font-family: var(--body);
  font-weight: 700;
  font-size: 1.33rem;
  line-height: 1.45;
  color: var(--slate);
  margin: 0;
}

.note__sign {
  font-family: var(--display);
  font-size: 0.91rem;
  color: var(--clay-lo);
  margin: 1.1rem 0 0;
  text-align: right;
}

/* A tilted card can nudge past the viewport on a narrow phone. */
@media (max-width: 22rem) {
  .note { transform: none; }
}

.hero__pitch {
  max-width: 30rem;
  margin: 0 auto 1.5rem;
  font-size: var(--step-0);
  color: var(--slate-2);
}

/* Price tiers, as three small blocks */
.tiers {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}

/* The price tiles jump to the collection. Padding lives on the anchor so the
   whole tile is the hit area and the geometry is identical to before. */
.tier {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--step-2);
  background: var(--sun);
  color: var(--slate);
  border: var(--bevel) solid;
  border-color: #fbe3a3 var(--sun-lo) var(--sun-lo) #fbe3a3;
  transition: transform 80ms steps(2);
}

.tier a {
  display: block;
  padding: 0.5rem 0.9rem;
  color: inherit;
  text-decoration: none;
}

.tier:hover { transform: translate(-1px, -1px); }

.tier:active {
  transform: translate(2px, 2px);
  border-color: var(--sun-lo) #fbe3a3 #fbe3a3 var(--sun-lo);
}

/* Land the collection just below the top edge rather than flush against it */
#collection { scroll-margin-top: 1rem; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* The signature: pixel San Francisco.

   On a wide screen the drawing shows in full at its natural 176:66 ratio.
   On a phone that would be a 146px sliver, so it gets a fixed height and
   the SVG crops from both sides instead ("slice" in the markup). Sutro
   Tower and the far bridge tower live outside the phone crop on purpose. */
.skyline {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: -1px; /* seal the seam against the section below */
}

@media (max-width: 46rem) {
  .skyline { height: 210px; }
}

/* Fog bands drift behind the skyline */
.fogband { opacity: 0.55; }

@media (prefers-reduced-motion: no-preference) {
  .fogband--a { animation: drift 38s linear infinite; }
  .fogband--b { animation: drift 61s linear infinite reverse; }
  .fogband--c { animation: drift 47s linear infinite; }
}

@keyframes drift {
  from { transform: translateX(-40px); }
  to   { transform: translateX(40px); }
}

/* --------------------------------------------------------------------------
   8. Collection grid
   -------------------------------------------------------------------------- */

/* Two up on a phone, three up above that, and capped so six designs read as
   a considered set rather than a thin row of stamps on a wide screen. */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 54rem;
}

@media (min-width: 46rem) {
  .grid { grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
}

.card {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 0;
  overflow: hidden;
}

.card__media {
  position: relative;
  aspect-ratio: 1;
  background: var(--paper-2);
  border-bottom: 3px solid var(--clay-hi);
}

.card__media img,
.card__media svg { width: 100%; height: 100%; object-fit: cover; }

/* Only appears when the count is genuinely low. Scarcity that is always on
   screen is just decoration, and stops meaning anything.

   Slate rather than orange: International Orange belongs to buy actions only,
   and a page with two competing oranges weakens both. */
.card__left {
  position: absolute;
  bottom: 0; left: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.68rem;
  padding: 0.25rem 0.45rem;
  background: var(--slate);
  color: var(--fog-0);
}

.card__price {
  position: absolute;
  top: 0; right: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--step-0);
  padding: 0.2rem 0.45rem;
  background: var(--sun);
  color: var(--slate);
}

.card__body {
  padding: 0.7rem 0.7rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}

.card__name {
  font-family: var(--body);
  font-weight: 700;
  font-size: var(--step-0);
  line-height: 1.25;
  margin: 0;
}

/* Most names are proper nouns now, so this is the only thing telling a
   buyer whether they are looking at a magnet or a keychain. */
.card__type {
  font-family: var(--display);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clay-lo);
  margin: 0;
}

.card__buy { margin-top: auto; }

/* Sold */
.card--sold { filter: saturate(0.25); }
.card--sold .card__media::after {
  content: "SOLD";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--step-2);
  letter-spacing: 0.1em;
  color: var(--paper);
  background: rgba(38, 52, 58, 0.66);
}

.sold-note {
  font-family: var(--display);
  font-size: var(--step--1);
  color: var(--slate-2);
  text-align: center;
  margin-top: auto;
  padding: 0.85rem 0;
}

.grid__empty {
  grid-column: 1 / -1;
  padding: 2rem;
  text-align: center;
  color: var(--slate-2);
}

/* --------------------------------------------------------------------------
   9. Story
   -------------------------------------------------------------------------- */

.story {
  display: grid;
  gap: 1.5rem;
  align-items: start;
  padding: 1.5rem;
}

.story__avatar {
  width: 11rem;
  margin-inline: auto;
}

/* Set in the body face on purpose. Silkscreen is caps-only, and a
   three-line sentence in all caps reads as a wall rather than a voice. */
.story__quote {
  font-family: var(--body);
  font-weight: 700;
  font-size: var(--step-2);
  line-height: 1.35;
  color: var(--clay-lo);
  margin: 0 0 1rem;
  padding-left: 0.9rem;
  border-left: var(--bevel) solid var(--clay-hi);
}

/* The point of the whole project, so it gets its own block rather than
   being a fourth paragraph nobody reads. */
.challenge {
  margin-top: 1.5rem;
  padding: 1.1rem 1.2rem;
  background: var(--fog-1);
  border: var(--bevel) solid;
  border-color: #fff var(--fog-2) var(--fog-2) #fff;
}

.challenge__label {
  font-family: var(--display);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--clay-lo);
  margin: 0 0 0.5rem;
}

.challenge__text {
  font-family: var(--body);
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.35;
  color: var(--slate);
  margin: 0 0 0.6rem;
}

.challenge__note {
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--slate-2);
  margin: 0;
}

@media (min-width: 42rem) {
  .story { grid-template-columns: 12rem 1fr; gap: 2rem; padding: 2rem; }
  .story__avatar { width: 100%; margin: 0; }
}

/* --------------------------------------------------------------------------
   10. Steps
   -------------------------------------------------------------------------- */

.steps {
  display: grid;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
}

.step {
  padding: 1rem 1.1rem;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.9rem;
  align-items: start;
}

.step::before {
  counter-increment: step;
  content: counter(step);
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--step-1);
  width: 2rem; height: 2rem;
  display: grid;
  place-items: center;
  background: var(--slate);
  color: var(--fog-0);
}

.step h3 { margin: 0 0 0.15rem; font-size: var(--step-0); }
.step p { font-size: var(--step--1); color: var(--slate-2); margin: 0; }

@media (min-width: 46rem) {
  .steps { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   11. Custom orders and booth
   -------------------------------------------------------------------------- */

.panel { padding: 1.75rem 1.5rem; text-align: center; }
.panel p { max-width: 34rem; margin-inline: auto; color: var(--slate-2); }
.panel .btn { margin-top: 1rem; }

.booth__where {
  font-family: var(--display);
  font-size: var(--step-1);
  color: var(--slate);
  margin: 0.35rem 0;
}

/* --------------------------------------------------------------------------
   12. Modal
   -------------------------------------------------------------------------- */

.modal {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 26rem;
  width: calc(100% - 2rem);
}

.modal::backdrop { background: rgba(38, 52, 58, 0.6); }

.modal__inner { padding: 0; }

.modal__head {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  padding: 0.9rem;
  background: var(--paper-2);
  border-bottom: 3px solid var(--clay-hi);
}

.modal__thumb { width: 4rem; height: 4rem; flex: none; border: 3px solid var(--clay-lo); }
.modal__thumb img, .modal__thumb svg { width: 100%; height: 100%; object-fit: cover; }

.modal__title { font-family: var(--display); font-weight: 700; font-size: var(--step-1); margin: 0; }
.modal__price { font-family: var(--display); font-size: var(--step-0); color: var(--clay-lo); margin: 0; }

.modal__close {
  margin-left: auto;
  align-self: flex-start;
  font-family: var(--display);
  font-size: var(--step-0);
  line-height: 1;
  padding: 0.4rem 0.55rem;
  background: var(--fog-1);
  border: 3px solid;
  border-color: #fff var(--fog-2) var(--fog-2) #fff;
  cursor: pointer;
}

.modal__body { padding: 1.1rem 0.9rem 1.2rem; }

.modal__step { margin-bottom: 1.25rem; }
.modal__step:last-child { margin-bottom: 0; }

.modal__steplabel {
  font-family: var(--display);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--clay-lo);
  margin: 0 0 0.5rem;
}

.modal__hint { font-size: var(--step--1); color: var(--slate-2); margin: 0.6rem 0 0; }


/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */

.footer {
  border-top: var(--bevel) solid var(--fog-2);
  background: var(--fog-1);
  padding: 2rem 0 2.5rem;
  text-align: center;
  font-size: var(--step--1);
  color: var(--slate-2);
}

.footer__mark { width: 8rem; margin: 0 auto 0.9rem; }
.footer p { margin: 0.2rem 0; }

/* The fundraiser. A real button, in the same red as the buy actions. It sits
   at the very bottom of the page, well past the collection, so it is not
   competing with anything by the time a reader reaches it. */
.footer .footer__fund {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 1.5rem;   /* it opens the footer, so the padding above is enough */
}

/* btn--buy stretches to fill a product card. In the footer it should hug its
   own label instead. */
.footer__fund .btn {
  font-size: var(--step--1);
  width: auto;
  padding: 0.7rem 1rem;
}

/* --------------------------------------------------------------------------
   14. Selection

   A picked card and the Added button both need to read as "already in",
   without turning the grid into a wall of orange.
   -------------------------------------------------------------------------- */

.btn--added {
  background: var(--fog-1);
  color: var(--slate);
  border-color: var(--fog-2) #fff #fff var(--fog-2);
  box-shadow: none;
  width: 100%;
  transform: translate(2px, 2px);
}

.btn--added::before { content: "\2713"; margin-right: 0.4rem; }
.btn--added:hover { transform: translate(1px, 1px); box-shadow: none; }

.card--picked { border-color: var(--bridge-hi) var(--bridge-lo) var(--bridge-lo) var(--bridge-hi); }

/* The bar along the bottom */
.cartbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  background: var(--paper);
  border-top: var(--bevel) solid var(--clay-lo);
  box-shadow: 0 -4px 0 rgba(38, 52, 58, 0.10);
}

.cartbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
}

/* The display face is wide, so at 390px the count and the button fight for
   room. Both step down rather than letting "3 pieces" wrap onto two lines. */
.cartbar__count {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.72rem;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  white-space: nowrap;
}

.cartbar__total { color: var(--clay-lo); }

.cartbar__go {
  width: auto;
  flex: none;
  font-size: 0.72rem;
  padding: 0.7rem 0.8rem;
}

@media (min-width: 24rem) {
  .cartbar__count { font-size: var(--step-0); gap: 0.6rem; }
  .cartbar__go { font-size: var(--step-0); padding: 0.85rem 1.15rem; }
}

/* Keep the footer clear of the fixed bar */
body.has-bar { padding-bottom: 5rem; }

/* --------------------------------------------------------------------------
   15. Request panel
   -------------------------------------------------------------------------- */

.picked {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  border-top: 3px solid var(--paper-2);
}

.picked__row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0;
  border-bottom: 3px solid var(--paper-2);
}

.picked__thumb { width: 2.4rem; height: 2.4rem; flex: none; border: 3px solid var(--clay-lo); }
.picked__thumb img, .picked__thumb svg { width: 100%; height: 100%; object-fit: cover; }

.picked__name { flex: 1; min-width: 0; font-weight: 700; font-size: var(--step--1); }

.picked__price {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--step--1);
  color: var(--clay-lo);
}

.picked__x {
  font-family: var(--display);
  font-size: 0.7rem;
  line-height: 1;
  padding: 0.3rem 0.4rem;
  background: var(--fog-1);
  color: var(--slate-2);
  border: 3px solid;
  border-color: #fff var(--fog-2) var(--fog-2) #fff;
  cursor: pointer;
  flex: none;
}

.picked__x:hover { color: var(--bridge); }

/* Form */
.field { margin-bottom: 0.9rem; }
.field--set { border: 0; padding: 0; margin-inline: 0; }

.field label,
.field legend {
  display: block;
  font-family: var(--display);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-2);
  margin-bottom: 0.35rem;
  padding: 0;
}

.field__req { color: var(--bridge); }
.field__opt { color: var(--fog-2); }

.field input[type="text"],
.field input[type="email"],
.field textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 1rem;           /* 16px stops iOS zooming the page on focus */
  color: var(--slate);
  background: #fff;
  border: 3px solid;
  border-color: var(--fog-2) #fff #fff var(--fog-2);
  padding: 0.6rem 0.7rem;
  resize: vertical;
}

.field input:focus-visible,
.field textarea:focus-visible { outline: 3px solid var(--slate); outline-offset: 1px; }

.choice {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--body) !important;
  font-size: var(--step--1) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--slate) !important;
  margin-bottom: 0.3rem !important;
  cursor: pointer;
}

.choice input { accent-color: var(--bridge); width: 1.1rem; height: 1.1rem; }

/* Honeypot. Off screen rather than display:none, which some bots skip. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formstatus { margin: 0.7rem 0 0; font-size: var(--step--1); }
.formstatus--bad { color: var(--bridge-lo); font-weight: 700; }
.formstatus--busy { color: var(--slate-2); }

#order-submit[disabled] { opacity: 0.5; cursor: not-allowed; }

.sent { text-align: center; padding: 1rem 0; }

.sent__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--step-1);
  color: var(--clay-lo);
  margin: 0 0 0.5rem;
}

.sent p { font-size: var(--step--1); color: var(--slate-2); }
.sent .btn { margin-top: 1rem; width: auto; }

/* --------------------------------------------------------------------------
   16. Custom request pictures
   -------------------------------------------------------------------------- */

.field input[type="file"] {
  width: 100%;
  font-family: var(--body);
  font-size: var(--step--1);
  color: var(--slate-2);
  background: var(--fog-1);
  border: 3px solid;
  border-color: var(--fog-2) #fff #fff var(--fog-2);
  padding: 0.55rem 0.6rem;
}

.field input[type="file"]::file-selector-button {
  font-family: var(--display);
  font-size: 0.7rem;
  color: var(--slate);
  background: var(--paper);
  border: 3px solid;
  border-color: var(--clay-hi) var(--clay-lo) var(--clay-lo) var(--clay-hi);
  padding: 0.35rem 0.6rem;
  margin-right: 0.6rem;
  cursor: pointer;
}

.field__hint {
  font-size: 0.72rem;
  color: var(--slate-2);
  margin: 0.35rem 0 0;
}

.thumbs {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.thumb {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--paper-2);
  border: 3px solid var(--clay-hi);
  padding: 0.3rem;
}

.thumb img {
  width: 2.4rem;
  height: 2.4rem;
  object-fit: cover;
  flex: none;
  image-rendering: auto;      /* a buyer's photo, not pixel art */
}

.thumb__name {
  flex: 1;
  min-width: 0;
  font-size: 0.72rem;
  color: var(--slate-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}