/* ==========================================================================
   BORROWED TIME — shared by submit.html (call for artists) and rsvp.html
   Ivory paper, ink, one warm gold. Torn edges, tape and slight tilts give
   the handmade feel; everything is CSS, no images or extra fonts.
   All rules are scoped under .bt so nothing leaks into the shared header,
   nav or footer from styles.css.
   ========================================================================== */
.bt {
  --paper: #f4eee2;            /* cotton-paper ivory */
  --sheet: #fbf8f1;            /* the form "sheet" sitting on it */
  --card: #fdfaf3;             /* index cards */
  --gold: var(--accent-bright, #e8a87c);   /* the site's warm copper — rules and details */
  --gold-ink: #8a5a2b;         /* darker gold for text, focus and hover (≥4.5:1 on ivory) */
  --tape: rgba(232, 220, 190, 0.78);
  --rule: rgba(138, 90, 43, 0.28);
  --shadow: 0 1px 2px rgba(40, 30, 15, 0.06), 0 12px 30px -14px rgba(40, 30, 15, 0.28);
  --torn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 16' preserveAspectRatio='none'%3E%3Cpath d='M0 16.0 L0 3.3 L8 4.3 L17 6.0 L25 6.9 L33 5.4 L42 9.1 L50 4.3 L58 5.3 L67 5.8 L75 3.2 L83 4.0 L92 3.3 L100 8.5 L108 3.3 L117 8.0 L125 4.0 L133 7.8 L142 7.9 L150 5.2 L158 10.4 L167 7.9 L175 7.0 L183 2.4 L192 5.7 L200 4.4 L208 6.2 L217 10.4 L225 9.8 L233 2.6 L242 8.1 L250 10.4 L258 6.9 L267 2.9 L275 9.8 L283 5.8 L292 10.8 L300 9.9 L308 9.5 L317 10.4 L325 2.6 L333 9.1 L342 4.7 L350 3.2 L358 5.4 L367 7.3 L375 2.0 L383 6.0 L392 9.1 L400 6.5 L400 16.0 Z'/%3E%3C/svg%3E");

  background-color: var(--paper);
  /* Paper grain: a 160px fractal-noise tile, drawn by the browser. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .26 0 0 0 0 .18 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--ink);
  overflow-x: clip;
}
.bt [hidden] { display: none !important; }
.bt p { font-size: 1.05rem; line-height: 1.75; }
.bt :focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; }

.bt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.bt-eyebrow::before {
  content: "";
  width: 2.2rem;
  height: 1px;
  background: var(--gold);
}
.bt-h2 {
  font-family: 'Playfair Display', 'Times New Roman', serif;
  font-weight: 600;
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 1rem 0 0;
}
.bt-h2 em { font-weight: 400; color: var(--gold-ink); }

/* Buttons: the site's .btn, re-coloured for this page — ink, gold on hover. */
.bt .btn { min-height: 52px; justify-content: center; }
.bt .btn-primary { background: var(--ink); color: var(--paper); }
.bt .btn-primary:hover,
.bt .btn-primary:focus-visible { background: var(--gold-ink) !important; color: #fff !important; }
.bt .btn-ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.bt .btn-ghost:hover { background: var(--ink) !important; color: var(--paper) !important; border-color: var(--ink) !important; }

/* Tape: a translucent strip with ragged ends. */
.tape {
  position: absolute;
  width: 112px;
  height: 30px;
  background: var(--tape);
  box-shadow: 0 1px 1px rgba(60, 45, 20, 0.08);
  clip-path: polygon(0 10%, 5% 0, 30% 6%, 62% 0, 96% 5%, 100% 0, 98% 30%, 100% 55%, 97% 82%, 100% 100%, 70% 95%, 35% 100%, 4% 94%, 0 100%, 2% 68%, 0 42%, 3% 22%);
  z-index: 3;
  pointer-events: none;
}

/* Scroll reveal — only added once JS has run, so nothing is ever hidden without it. */
/* translate (not transform) so it stacks with the cards' own rotate() */
.bt.js-reveal .bt-rise {
  opacity: 0;
  translate: 0 18px;
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), translate 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.bt.js-reveal .bt-rise.in { opacity: 1; translate: none; }

/* ---------------------------------------------------------------- HERO */
.bt-hero { padding: clamp(10rem, 14vw, 12rem) 0 clamp(4rem, 8vw, 7rem); }  /* clears the fixed header */
.bt-hero .container { padding-left: max(var(--gutter), 20px); padding-right: max(var(--gutter), 20px); }
.bt-hero-grid > * { min-width: 0; }
.bt-hero-grid {
  display: grid;
  /* minmax(0, …): the big headline can never push a column wider than its
     share, so nothing spills past the container on either side. */
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
}
.bt-hero h1 {
  font-family: 'Playfair Display', 'Times New Roman', serif;
  font-weight: 700;
  /* !important: styles.css caps every h1 at 2.6rem on phones; this page's
     headline is the poster line and is meant to be big. */
  font-size: clamp(3.1rem, 6.2vw, 6.6rem) !important;
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 1.6rem 0 1.8rem;
}
.bt-hero h1 em { display: block; font-weight: 400; font-style: italic; color: var(--gold-ink); }
.bt-hero-copy { max-width: 44ch; color: var(--ink-soft); font-size: 1.12rem !important; }
.bt-hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.4rem; }

/* The pinned print */
.bt-hero-art { position: relative; margin: 0; padding: 2rem 1.5rem 2.5rem; }
.print {
  position: relative;
  filter: drop-shadow(0 18px 22px rgba(40, 30, 15, 0.22)) drop-shadow(0 2px 3px rgba(40, 30, 15, 0.12));
}
.print-front { transform: rotate(1.6deg); max-width: 460px; margin: 0 auto; z-index: 2; }
.print-paper {
  background: #fffdf7;
  padding: 4%;
  clip-path: polygon(0.0% 0.1%, 3.6% 1.0%, 7.1% 0.9%, 10.7% 1.3%, 14.3% 0.4%, 17.9% 0.4%, 21.4% 1.0%, 25.0% 0.9%, 28.6% 0.4%, 32.1% 1.0%, 35.7% 0.6%, 39.3% 1.1%, 42.9% 0.2%, 46.4% 0.3%, 50.0% 1.3%, 53.6% 0.5%, 57.1% 0.4%, 60.7% 1.1%, 64.3% 0.9%, 67.9% 0.2%, 71.4% 0.8%, 75.0% 0.9%, 78.6% 0.2%, 82.1% 0.9%, 85.7% 0.2%, 89.3% 0.5%, 92.9% 0.1%, 96.4% 0.3%, 100.0% 1.4%, 100.0% 2.9%, 99.2% 5.9%, 99.5% 8.8%, 99.8% 11.8%, 99.6% 14.7%, 98.8% 17.6%, 99.4% 20.6%, 99.5% 23.5%, 98.9% 26.5%, 98.7% 29.4%, 99.8% 32.4%, 99.3% 35.3%, 98.9% 38.2%, 99.2% 41.2%, 98.9% 44.1%, 99.7% 47.1%, 99.3% 50.0%, 98.7% 52.9%, 99.7% 55.9%, 98.7% 58.8%, 99.0% 61.8%, 98.6% 64.7%, 99.6% 67.6%, 98.8% 70.6%, 99.3% 73.5%, 98.7% 76.5%, 99.3% 79.4%, 99.6% 82.4%, 99.3% 85.3%, 99.2% 88.2%, 99.3% 91.2%, 99.2% 94.1%, 99.4% 97.1%, 98.7% 100.0%, 96.4% 99.9%, 92.9% 98.9%, 89.3% 99.3%, 85.7% 100.0%, 82.1% 98.9%, 78.6% 98.5%, 75.0% 99.0%, 71.4% 98.8%, 67.9% 99.2%, 64.3% 99.4%, 60.7% 98.7%, 57.1% 98.9%, 53.6% 98.8%, 50.0% 99.9%, 46.4% 99.3%, 42.9% 99.0%, 39.3% 99.1%, 35.7% 99.9%, 32.1% 99.5%, 28.6% 98.4%, 25.0% 99.3%, 21.4% 99.5%, 17.9% 98.6%, 14.3% 98.5%, 10.7% 99.9%, 7.1% 99.8%, 3.6% 98.8%, 0.0% 99.2%, 0.2% 97.1%, 0.1% 94.1%, 0.3% 91.2%, 0.4% 88.2%, 0.6% 85.3%, 1.1% 82.4%, 0.3% 79.4%, 0.7% 76.5%, 1.1% 73.5%, 0.4% 70.6%, 0.9% 67.6%, 0.7% 64.7%, 1.2% 61.8%, 0.5% 58.8%, 0.4% 55.9%, 1.0% 52.9%, 0.6% 50.0%, 0.9% 47.1%, 1.1% 44.1%, 0.7% 41.2%, 0.7% 38.2%, 0.4% 35.3%, 0.9% 32.4%, 0.3% 29.4%, 1.1% 26.5%, 0.7% 23.5%, 0.3% 20.6%, 0.3% 17.6%, 1.0% 14.7%, 0.3% 11.8%, 0.2% 8.8%, 0.2% 5.9%, 0.0% 2.9%);
}
/* width/height attributes give the 3:4 box before load; height:auto keeps
   the whole poster visible — nothing is cropped. */
.print-paper img { width: 100%; height: auto; display: block; aspect-ratio: 1200 / 1600; background: #efe9dc; }
.print-front .tape-l { top: -10px; left: -22px; transform: rotate(-38deg); }
.print-front .tape-r { top: -8px; right: -24px; transform: rotate(36deg); width: 104px; }

/* ------------------------------------------------------- DETAILS STRIP */
.bt-details { padding: 0 0 clamp(4rem, 8vw, 6rem); }
.bt-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: 0;
}
.bt-strip .tile { padding: 1.8rem 1.6rem; }
.bt-strip .tile + .tile { border-left: 1px solid var(--gold); }
.bt-strip dt {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 0.6rem;
}
.bt-strip dd {
  margin: 0;
  font-family: 'Playfair Display', 'Times New Roman', serif;
  font-size: 1.2rem;
  line-height: 1.35;
}
.bt-strip .dd-sub {
  display: block;
  margin-top: 0.35rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: var(--ink-muted);
}

/* ---------------------------------------------------------------- THEME */
.bt-theme {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(4rem, 8vw, 6rem) 0;      /* 64px phone → 96px desktop */
  text-align: center;
}
.bt-theme .bt-eyebrow { color: var(--gold); }
.bt-theme .bt-eyebrow::after,
.bt-steps-head .bt-eyebrow::after,
.confirmation .bt-eyebrow::after { content: ""; width: 2.2rem; height: 1px; background: var(--gold); }
.bt-theme .bt-h2 { color: var(--paper); }
.bt-theme .bt-h2 em { color: var(--gold); }
.bt-theme-intro {
  margin: 1.2rem auto 0;
  max-width: 46ch;
  color: rgba(244, 238, 226, 0.7);
}

/* Ledger grid: every tile draws its top and left hairline; the grid closes
   the right and bottom edges. Rows share the tallest tile's height. */
.bt-themes {
  --ledger: rgba(232, 168, 124, 0.25);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  max-width: 1080px;
  margin: 3rem auto 0;
  padding: 0;
  border-right: 1px solid var(--ledger);
  border-bottom: 1px solid var(--ledger);
  text-align: left;
}
.theme-tile {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border-top: 1px solid var(--ledger);
  border-left: 1px solid var(--ledger);
}
.theme-num {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: rgba(232, 168, 124, 0.75);
  transition: color 0.3s ease;
}
.theme-word {
  margin-top: 0.9rem;
  font-family: 'Playfair Display', 'Times New Roman', serif;
  font-style: italic;
  font-size: clamp(1.15rem, 4.6vw, 2.1rem);
  line-height: 1.15;
  color: var(--paper);
  white-space: nowrap;
  transition: color 0.3s ease;
}
.theme-line {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(232, 168, 124, 0.62);
}
@media (hover: hover) {
  .theme-tile:hover .theme-num,
  .theme-tile:hover .theme-word { color: var(--gold); }
}
/* Small phones (≤360px): "Relationships" must still fit a half-width tile. */
@media (max-width: 360px) {
  .theme-tile { padding: 22px 16px; }
  .theme-word { font-size: 1.02rem; }
}
@media (min-width: 640px) {
  .bt-themes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* scales from the 3-column switch (24px / ~21px type) to 36px / 2.1rem */
  .theme-tile { padding: clamp(24px, 2.5vw, 36px); }
  .theme-word { font-size: clamp(1.3rem, 2.9vw, 2.1rem); }
}

.bt-mediums {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 3rem;
  font-size: 0.75rem !important;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(244, 238, 226, 0.75);
}
.bt-mediums::before,
.bt-mediums::after { content: ""; width: 2.2rem; height: 1px; background: var(--gold); }

/* ---------------------------------------------------------- HOW IT WORKS */
.bt-steps { padding: clamp(5rem, 10vw, 8rem) 0 clamp(3rem, 6vw, 4rem); }
.bt-steps-head { text-align: center; margin-bottom: 3.5rem; }
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.steps li {
  position: relative;
  background: var(--card);
  padding: 2.4rem 2rem 2.2rem;
  box-shadow: var(--shadow);
}
.steps li:nth-child(1) { transform: rotate(-1.2deg); }
.steps li:nth-child(2) { transform: rotate(0.8deg) translateY(10px); }
.steps li:nth-child(3) { transform: rotate(-0.6deg); }
.steps li .tape { top: -15px; left: 50%; margin-left: -56px; transform: rotate(-2deg); }
.step-num {
  display: block;
  font-family: 'Playfair Display', 'Times New Roman', serif;
  font-size: 3.6rem;
  line-height: 1;
  color: var(--gold-ink);
  margin-bottom: 1.1rem;
}
.steps h3 { font-size: 1.45rem; line-height: 1.2; margin-bottom: 0.7rem; }
.steps p { color: var(--ink-muted); font-size: 1rem !important; margin: 0; }

/* ------------------------------------------------------------- THE FORM */
.form-section { padding: clamp(3rem, 7vw, 5rem) 0 clamp(5rem, 10vw, 8rem); scroll-margin-top: 90px; }
.form-wrap {
  position: relative;
  max-width: 760px;
  margin: 2rem auto 0;
  background: var(--sheet);
  box-shadow: var(--shadow);
  padding: clamp(2rem, 6vw, 4rem);
}
/* torn top edge: a strip of the same paper, cut ragged, sitting on top */
.form-wrap::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -13px;
  height: 14px;
  background: var(--sheet);
  -webkit-mask: var(--torn) 0 0 / 100% 100% no-repeat;
  mask: var(--torn) 0 0 / 100% 100% no-repeat;
}
.form-wrap > .tape { top: -26px; left: 50%; margin-left: -60px; width: 120px; transform: rotate(-1.5deg); }

.form-step { margin-bottom: 4rem; }
.form-step-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin-bottom: 2.2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}
.form-step-num {
  font-family: 'Playfair Display', 'Times New Roman', serif;
  font-size: clamp(2.6rem, 6vw, 3.4rem);
  line-height: 1;
  color: var(--gold-ink);
}
.form-step-title {
  font-family: 'Playfair Display', 'Times New Roman', serif;
  font-size: clamp(1.5rem, 3.4vw, 1.9rem);
  font-weight: 600;
}
.form-step-desc { font-size: 0.9rem; color: var(--ink-muted); margin-left: auto; font-style: italic; }
/* Field rhythm: label → 8px → input, and 28px from one field to the next label. */
.form-grid { display: grid; gap: 28px; align-items: start; }
.form-grid-2 { grid-template-columns: 1fr 1fr; gap: 28px 1.6rem; }

.field { display: flex; flex-direction: column; min-width: 0; }
.field label,
.field .label {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
  line-height: 1.4;
  font-weight: 600;
}
.field .req { color: var(--gold-ink); margin-left: 3px; }
.field .opt { color: var(--ink-muted); font-weight: 400; text-transform: none; letter-spacing: 0.03em; }
.bt { --field-line: rgba(17, 17, 17, 0.3); }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--field-line);
  border-radius: 0;
  color: var(--ink);
  font-family: 'Playfair Display', 'Times New Roman', serif;
  font-size: 1.22rem;
  padding: 0.6rem 0.1rem;
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s, background-color 0.25s;
  -webkit-appearance: none;
  appearance: none;
}
/* Single-line fields share one fixed height, so every underline in a row
   sits at the same y no matter which control it belongs to. */
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select { height: 48px; }
.field textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.55;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-bottom-color: var(--gold-ink);
  background-color: rgba(232, 168, 124, 0.07);
}
/* Placeholders a step smaller than typed text. */
.field input::placeholder,
.field textarea::placeholder { color: #8a8478; font-style: italic; font-size: 1.02rem; }
.field select {
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%238a5a2b' d='M0 0l6 8 6-8z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.2rem center;
  padding-right: 1.8rem;
}
.field input:disabled { color: #8a8478; }

.field-error { display: none; margin-top: 0.5rem; font-size: 0.85rem !important; line-height: 1.45 !important; color: var(--accent); }
.has-error > .field-error { display: block; }
.has-error input,
.has-error select,
.has-error textarea { border-color: var(--accent) !important; }
.field-hint { margin: 6px 0 0; font-size: 0.8rem !important; line-height: 1.3 !important; color: var(--ink-muted); }
.counter { margin-top: 0.45rem; font-size: 0.78rem; color: var(--ink-muted); text-align: right; font-variant-numeric: tabular-nums; }
.counter.near { color: var(--accent); }
.hp-field { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Artwork index cards */
.artwork-list { display: grid; gap: 3rem; padding-top: 1.2rem; }
.artwork-card {
  position: relative;
  background: var(--card);
  border: 1px solid rgba(138, 90, 43, 0.14);
  box-shadow: 0 1px 2px rgba(40, 30, 15, 0.05), 0 10px 22px -16px rgba(40, 30, 15, 0.35);
  padding: 2.2rem 2rem 2rem;
  display: grid;
  gap: 28px;
}
.artwork-head { display: flex; justify-content: flex-end; min-height: 1.4rem; }
.artwork-title {
  position: absolute;
  top: -1.85rem;
  left: 1.4rem;
  background: var(--card);
  border: 1px solid rgba(138, 90, 43, 0.14);
  border-bottom: none;
  padding: 0.45rem 1.1rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.artwork-remove {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 40px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 0 0.2rem;
  margin-top: -0.9rem;
}
.artwork-remove::before { content: "×"; font-size: 1.15rem; letter-spacing: 0; line-height: 1; }
.artwork-remove:hover { color: var(--accent); }
.artwork-list.single .artwork-remove { display: none; }
/* Top-aligned, one-line labels, equal-height inputs: the underlines of a
   row line up exactly. Depth's "(optional)" hangs below its own field. */
.size-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 5.5rem; gap: 28px 1.2rem; align-items: start; }
.size-grid .field label,
.form-grid-2 > .field > label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.size-grid .field label { letter-spacing: 0.14em; }
.price-wrap { position: relative; }
.price-wrap .cur {
  position: absolute;
  left: 0.1rem;
  bottom: 0.72rem;
  font-family: 'Playfair Display', 'Times New Roman', serif;
  font-size: 1.22rem;
  color: var(--ink-muted);
  pointer-events: none;
}
.price-wrap input[type="text"] { padding-left: 1.1rem; }
.field .inline-check {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 44px;
  margin: 0.5rem 0 0;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink-soft);
  cursor: pointer;
}
.inline-check input { width: 20px; height: 20px; accent-color: var(--gold-ink); margin: 0; cursor: pointer; }

.add-artwork {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  width: 100%;
  min-height: 76px;
  margin-top: 2.2rem;
  background: transparent;
  border: 1.5px dashed rgba(138, 90, 43, 0.5);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.add-artwork:hover { border-color: var(--gold-ink); background: rgba(232, 168, 124, 0.08); color: var(--gold-ink); }
.is-busy .artwork-list,
.is-busy .add-artwork { pointer-events: none; opacity: 0.7; }

/* Photo drop zone */
.dropzone {
  border: 1.5px dashed rgba(138, 90, 43, 0.5);
  background: rgba(255, 255, 255, 0.5);
  padding: 2rem 1.4rem;
  text-align: center;
  transition: border-color 0.2s, background-color 0.2s;
}
.dropzone.dragover { border-color: var(--gold-ink); background: rgba(232, 168, 124, 0.12); }
.has-error .dropzone { border-color: var(--accent); }
.dropzone-icon { width: 38px; height: 38px; color: var(--gold-ink); margin: 0 auto 0.8rem; display: block; }
.dropzone-text {
  font-family: 'Playfair Display', 'Times New Roman', serif;
  font-style: italic;
  font-size: 1.2rem !important;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}
.dropzone .btn { padding: 0.9rem 1.8rem; min-height: 48px; }
.dropzone-hint { margin: 1rem 0 0; font-size: 0.85rem !important; color: var(--ink-muted); line-height: 1.6 !important; }
.dropzone input[type="file"] { display: none; }

/* Thumbnails as polaroids */
.thumbs {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 1.1rem 0.9rem;
  margin: 1.4rem 0 0;
}
.thumbs:empty { display: none; }
.thumb {
  position: relative;
  background: #fff;
  padding: 6px 6px 24px;
  box-shadow: 0 1px 2px rgba(40, 30, 15, 0.12), 0 6px 14px -8px rgba(40, 30, 15, 0.35);
  cursor: grab;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s;
}
.thumb:nth-child(odd) { transform: rotate(-1.4deg); }
.thumb:nth-child(even) { transform: rotate(1.1deg); }
.thumb img,
.thumb-placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}
.thumb.dragging {
  cursor: grabbing;
  transform: rotate(0deg) scale(1.07);
  box-shadow: 0 18px 30px -12px rgba(40, 30, 15, 0.45);
  z-index: 2;
}
.thumbs.is-sorting .thumb:not(.dragging) { opacity: 0.7; }
.thumb-placeholder {
  background: var(--bg-tint);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.4rem;
  text-align: center;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.thumb-placeholder strong {
  font-family: 'Playfair Display', 'Times New Roman', serif;
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  font-weight: 500;
}
.thumb.processing .thumb-placeholder::after {
  content: "";
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--line);
  border-top-color: var(--gold-ink);
  border-radius: 50%;
  animation: bt-spin 0.8s linear infinite;
}
@keyframes bt-spin { to { transform: rotate(360deg); } }
.thumb-main {
  position: absolute;
  left: 8px;
  bottom: 5px;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.thumb-remove {
  position: absolute;
  top: 0;
  right: 0;
  width: 34px;
  height: 34px;
  transform: translate(35%, -35%);
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.thumb-remove:hover { background: var(--accent); }
.thumb.uploaded::before {
  content: "✓";
  position: absolute;
  top: 10px;
  left: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gold-ink);
  color: #fff;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.thumb.failed { outline: 2px solid var(--accent); outline-offset: 2px; }
.thumbs-hint { margin: 0.9rem 0 0; font-size: 0.85rem !important; color: var(--ink-muted); font-style: italic; }

/* Confirmation checkbox */
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.4rem 1.5rem;
  background: rgba(232, 168, 124, 0.1);
  border-left: 2px solid var(--gold);
}
.checkbox-row input[type="checkbox"] {
  margin-top: 0.25rem;
  width: 22px;
  height: 22px;
  accent-color: var(--gold-ink);
  cursor: pointer;
  flex-shrink: 0;
}
.field .checkbox-row label {
  font-size: 1rem;
  color: var(--ink-soft);
  cursor: pointer;
  line-height: 1.55;
  margin: 0;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
.confirm-field.has-error .checkbox-row { background: #f7e9e6; border-left-color: var(--accent); }

/* Submit + progress */
.form-submit { margin-top: 3rem; text-align: center; border-top: 1px solid var(--rule); padding-top: 3rem; }
.form-submit .btn { min-height: 60px; padding: 1.2rem 3.2rem; font-size: 0.8rem; }
.form-submit .btn[disabled] { opacity: 0.65; cursor: progress; }
.form-alert {
  display: none;
  margin: 0 auto 2rem;
  max-width: 52ch;
  padding: 1rem 1.25rem;
  border-left: 2px solid var(--accent);
  background: #f7e9e6;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.6;
  text-align: left;
}
.form-alert.show { display: block; }
.progress { display: none; max-width: 440px; margin: 2rem auto 0; }
.progress.show { display: block; }
.progress-track { height: 4px; background: rgba(138, 90, 43, 0.15); overflow: hidden; border-radius: 2px; }
.progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--gold-ink)); transition: width 0.2s ease; }
.progress-label {
  margin-top: 0.85rem;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-ink);
  font-variant-numeric: tabular-nums;
}
.form-fineprint { margin: 1.6rem auto 0; max-width: 52ch; font-size: 0.85rem !important; color: var(--ink-muted); line-height: 1.6 !important; }

/* Thank-you / closed */
.confirmation { display: none; text-align: center; padding: 1.5rem 0 0.5rem; }
.confirmation.show { display: block; }
.confirmation:focus { outline: none; }
.ty-scrap {
  position: relative;
  width: 150px;
  height: 46px;
  margin: 0 auto 2rem;
  background: rgba(232, 168, 124, 0.35);
  transform: rotate(-4deg);
  -webkit-mask: var(--torn) 0 0 / 100% 100% no-repeat, linear-gradient(#000, #000) 0 15px / 100% calc(100% - 15px) no-repeat;
  mask: var(--torn) 0 0 / 100% 100% no-repeat, linear-gradient(#000, #000) 0 15px / 100% calc(100% - 15px) no-repeat;
}
.ty-title {
  font-family: 'Playfair Display', 'Times New Roman', serif;
  font-weight: 700;
  font-size: clamp(3rem, 12vw, 5rem) !important;   /* beats the global ≤375px h2 cap */
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 1rem 0 1.4rem;
}
.ty-title em { font-weight: 400; color: var(--gold-ink); }
.confirmation p { color: var(--ink-soft); max-width: 46ch; margin: 0 auto 1.6rem; }
.confirmation .signoff { font-family: 'Playfair Display', 'Times New Roman', serif; font-style: italic; font-size: 1.35rem !important; color: var(--gold-ink); }
.confirmation-actions { display: flex; gap: 1.6rem 2rem; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 2.2rem; }

/* ---------------------------------------------------------- RESPONSIVE */
@media (max-width: 900px) {
  .bt-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
  .bt-hero h1 { font-size: clamp(3.1rem, 13vw, 5.2rem) !important; }
  /* Stacked: poster first. Visual order only — the HTML keeps the headline
     first, so screen readers still hear the heading before the image. */
  .bt-hero { padding-top: 8rem; }          /* header is ~107–110px here */
  .bt-hero-art { order: -1; width: 100%; margin: 0; padding: 0.9rem 0 1.4rem; }
  .print-front { width: min(81vw, 440px); max-width: none; }   /* ~84% of the screen once tilted */
  .bt-strip { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .bt-strip .tile + .tile { border-left: none; }
  .bt-strip .tile:nth-child(n) { border-top: 1px solid var(--rule); }
  .bt-strip .tile:first-child { border-top: none; }
  .steps { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; gap: 2.6rem; }
  .steps li:nth-child(2) { transform: rotate(0.8deg); }
}
@media (max-width: 768px) {
  .form-grid-2 { grid-template-columns: 1fr; }
  .form-step-desc { margin-left: 0; width: 100%; }
  .size-grid { grid-template-columns: 1fr 1fr; }
  .artwork-card { padding: 2rem 1.3rem 1.6rem; }
}
@media (max-width: 560px) {
  .bt-strip { grid-template-columns: 1fr; }
  .bt-strip .tile { padding: 1.3rem 0.2rem; }
  .bt-strip .tile:first-child { border-top: none; }
  .bt-hero-actions .btn { width: 100%; }
  /* Full-width buttons keep their label on one line: a touch smaller and
     less tracked than desktop, and never allowed to wrap. */
  .bt-hero-actions .btn,
  .form-submit .btn,
  .confirmation-actions .btn {
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    white-space: nowrap;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .form-section .container { padding: 0 14px; }
  .form-wrap { padding: 2.2rem 1.15rem 2rem; }
  .artwork-card { padding: 1.9rem 1rem 1.4rem; }
  .dropzone { padding: 1.6rem 1rem; }
  .thumbs { grid-template-columns: repeat(3, 1fr); gap: 0.9rem 0.6rem; }
  .form-submit .btn,
  .confirmation-actions .btn { width: 100%; padding: 1.2rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bt.js-reveal .bt-rise { opacity: 1; translate: none; transition: none; }
  .thumb, .progress-fill, .theme-num, .theme-word { transition: none; }
  .thumb.processing .thumb-placeholder::after { animation-duration: 2.4s; }
}