/* tldre.com. The palette and faces are the videos' own: the cover-intro board, the cream cards,
   Archivo Black for captions and Source Serif 4 for cards (packages/renderer/src/theme.ts). */

@font-face { font-family: "Archivo Black"; src: url("/fonts/archivo-black-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/fonts/source-serif-4-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/fonts/source-serif-4-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/fonts/source-serif-4-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --board: #201b17;      /* cover-intro board */
  --board-raised: #2c251f;
  --paper: #f3e6cc;      /* card cream */
  --ink: #231a12;        /* card ink */
  --outline: #14100c;    /* caption outline */
  --amber: #f2c46b;      /* lamplight punch */
  --amber-ink: #8a5a10;
  --error: #9b2a25;
  /* The light sections. */
  --surface: #f3e6cc;
  --surface-field: #fbf5e8;
  --text: #231a12;
  --text-soft: #5b4a39;
  --rule: #cdb894;
  --accent-text: #8a5a10;

  --caption: "Archivo Black", "Arial Black", Impact, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --gutter: clamp(16px, 4vw, 48px);
  --measure: 38rem;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #241e19;
    --surface-field: #2e2620;
    --text: #f3e6cc;
    --text-soft: #c9b89a;
    --rule: #4a3d31;
    --accent-text: #f2c46b;
    --error: #f09a8f;
  }
}
:root[data-theme="dark"] {
  --surface: #241e19; --surface-field: #2e2620; --text: #f3e6cc; --text-soft: #c9b89a;
  --rule: #4a3d31; --accent-text: #f2c46b; --error: #f09a8f;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.6;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }

/* Caption type: how lines look in the videos, cream with a dark outline. */
.caption-type, .cap, .mark, .edition-mark, .price {
  font-family: var(--caption);
  letter-spacing: -0.005em;
}

.button {
  display: inline-block;
  padding: 0.8rem 1.4rem 0.85rem;
  border: 0;
  border-radius: 6px;
  background: var(--amber);
  color: var(--ink);
  font-family: var(--caption);
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.button:hover { background: #f6d48e; }
.button:active { transform: translateY(1px); }
.button[disabled] { opacity: 0.6; cursor: progress; }

.link-button {
  padding: 0; border: 0; background: none; color: inherit; font: inherit;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; cursor: pointer;
}
.link-button:hover { text-decoration-thickness: 2px; }

/* Currency: the Worker sets data-currency; the switch flips it. */
html[data-currency="gbp"] .cur-usd, html[data-currency="usd"] .cur-gbp { display: none; }

/* ---- Bar ---------------------------------------------------------------------------------------------- */
.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem var(--gutter);
  background: var(--board);
  color: var(--paper);
}
.mark { font-size: 1.35rem; text-decoration: none; color: var(--paper); }
.bar nav { display: flex; align-items: center; gap: clamp(0.9rem, 3vw, 2rem); font-size: 1rem; }
.bar nav a { text-decoration: none; }
.bar nav a:hover { text-decoration: underline; }
.bar .bar-cta { color: var(--amber); }
@media (max-width: 420px) { .bar nav a:not(.bar-cta) { display: none; } }

/* ---- Hero --------------------------------------------------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(2rem, 5vw, 4rem) var(--gutter) clamp(3rem, 6vw, 5rem);
  background: var(--board);
  color: var(--paper);
}
.hero-copy { max-width: 40rem; }
.hero h1 {
  display: flex; flex-direction: column;
  font-size: clamp(2.3rem, 4.6vw, 4.3rem);
  line-height: 1.04;
  white-space: nowrap;
  color: var(--paper);
}
.hero h1 span:last-child { color: var(--amber); }
@media (max-width: 520px) { .hero h1 { font-size: 7.8vw; } }
.lede { margin-top: 1.75rem; max-width: 34rem; font-size: 1.25rem; line-height: 1.55; color: #e6d7ba; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.25rem; margin-top: 2rem; }
.from { font-style: italic; color: #d6c6a8; }

.phone-wrap { margin: 0; justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.phone-wrap figcaption { max-width: 19rem; font-size: 0.9rem; line-height: 1.45; color: #bfae90; text-align: center; }

.phone {
  position: relative;
  width: min(320px, 76vw);
  aspect-ratio: 9 / 16;
  border: 10px solid #0d0c0b;
  border-radius: 36px;
  overflow: hidden;
  background: #0d0c0b;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7), 0 0 0 1px #3a332c;
  container-type: inline-size;
}
.shot { position: absolute; inset: 0; visibility: hidden; }
.shot.is-on { visibility: visible; }
.scene { position: absolute; inset: 0; }

.cap {
  position: absolute; left: 7%; right: 7%; bottom: 17%;
  text-align: center;
  font-size: 7.4cqi;
  line-height: 1.12;
  color: var(--paper);
  text-shadow:
    0.06em 0 0 var(--outline), -0.06em 0 0 var(--outline), 0 0.06em 0 var(--outline), 0 -0.06em 0 var(--outline),
    0.045em 0.045em 0 var(--outline), -0.045em 0.045em 0 var(--outline), 0.045em -0.045em 0 var(--outline), -0.045em -0.045em 0 var(--outline);
}
.shot.is-on .cap, .shot.is-on .card, .shot.is-on .endcard { animation: pop 140ms ease-out both; }
@keyframes pop { from { transform: scale(0.92); opacity: 0; } to { transform: none; opacity: 1; } }

.card {
  position: absolute; left: 10%; right: 10%; top: 38%;
  padding: 1.1em 1em;
  background: var(--paper); color: var(--ink);
  font-family: var(--serif); font-weight: 600;
  font-size: 7.6cqi; line-height: 1.2; text-align: center;
  rotate: -2deg;
  box-shadow: 0 10px 0 -2px var(--outline);
}

.tag {
  position: absolute; top: 5.5%; right: 6%;
  font-family: var(--caption); font-size: 4.2cqi; color: var(--paper); opacity: 0.9;
  text-shadow:
    0.06em 0 0 var(--outline), -0.06em 0 0 var(--outline), 0 0.06em 0 var(--outline), 0 -0.06em 0 var(--outline),
    0.045em 0.045em 0 var(--outline), -0.045em 0.045em 0 var(--outline), 0.045em -0.045em 0 var(--outline), -0.045em -0.045em 0 var(--outline);
}
.progress { position: absolute; left: 6%; right: 6%; top: 3%; height: 3px; background: rgba(243, 230, 204, 0.25); border-radius: 2px; overflow: hidden; }
.progress span { display: block; height: 100%; width: 0; background: var(--paper); }

/* Scenes, drawn in CSS like the videos' designed screens. */
.board { background: radial-gradient(120% 80% at 50% 45%, #3a332c 0%, #0d0c0b 100%); }

/* The orphanage dormitory: arched windows over a row of iron beds. */
.beds { background: #3a2e23; }
.dorm { display: block; width: 100%; height: 100%; filter: sepia(0.25); }

.letter { background: radial-gradient(90% 70% at 50% 40%, #4a3d30, #1a1511); display: grid; place-items: center; }
.paper {
  width: 68%; aspect-ratio: 3 / 4; margin-top: -30%;
  padding: 12% 10%;
  background: #f6efdf; rotate: -5deg;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
  display: flex; flex-direction: column; gap: 9%;
}
.paper-head { font-family: var(--serif); font-style: italic; font-size: 6.4cqi; color: #3b2f22; }
.paper span { display: block; height: 2px; background: #b6a78c; }
.paper span.short { width: 55%; }

.shadow { background: radial-gradient(70% 60% at 50% 35%, #e8cf9a 0%, #b7925a 55%, #5e4527 100%); }
.legs {
  position: absolute; left: 50%; bottom: 0; height: 96%; width: auto;
  translate: -50% 0; transform: skewX(-8deg); transform-origin: bottom;
  fill: rgba(28, 20, 12, 0.78);
  filter: blur(1.2px);
}

.college {
  background:
    linear-gradient(transparent 0 46%, #4b3a2c 46% 100%) ,
    linear-gradient(#f0cf8f, #9db4c0 70%);
}
.college::before {
  content: ""; position: absolute; left: 8%; right: 8%; top: 22%; height: 34%;
  background: #6d5641;
  clip-path: polygon(0 100%, 0 40%, 14% 40%, 14% 10%, 22% 0, 30% 10%, 30% 40%, 70% 40%, 70% 10%, 78% 0, 86% 10%, 86% 40%, 100% 40%, 100% 100%);
}
.college::after {
  content: ""; position: absolute; left: 20%; right: 20%; top: 41%; height: 9%;
  background: repeating-linear-gradient(90deg, #e9cf8c 0 7%, transparent 7% 14%);
  opacity: 0.85;
}

.endcard {
  position: absolute; left: 9%; right: 9%; top: 30%;
  padding: 10% 8%;
  background: var(--paper); color: var(--ink); text-align: center;
  box-shadow: 0 10px 0 -2px var(--outline);
}
.end-title { font-family: var(--serif); font-weight: 600; font-size: 9cqi; line-height: 1.1; }
.end-author { margin-top: 0.4em; font-family: var(--serif); font-style: italic; font-size: 6cqi; }
.end-buy {
  display: inline-block; margin-top: 1.2em; padding: 0.5em 1em;
  background: var(--amber); border-radius: 4px;
  font-family: var(--caption); font-size: 5cqi;
}

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .phone-wrap { justify-self: stretch; }
}

/* ---- Sections ----------------------------------------------------------------------------------------- */
.section { padding: clamp(3.5rem, 8vw, 6.5rem) var(--gutter); max-width: 76rem; margin: 0 auto; }
.section h2 { font-family: var(--caption); font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.05; max-width: 20ch; }
.section h3 { font-family: var(--serif); font-weight: 600; font-size: 1.3rem; line-height: 1.3; }
.section-lead { margin-top: 1rem; max-width: var(--measure); font-size: 1.2rem; color: var(--text-soft); }
.section-foot { margin-top: 2.5rem; max-width: var(--measure); color: var(--text-soft); font-style: italic; }

/* How it works: a real sequence, so it is numbered. */
.steps {
  list-style: none; counter-reset: step; padding: 0; margin: 2.75rem 0 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 2.25rem;
}
.steps li { counter-increment: step; border-top: 2px solid var(--text); padding-top: 1rem; }
.steps li::before {
  content: counter(step);
  display: block; margin-bottom: 0.6rem;
  font-family: var(--caption); font-size: 2.6rem; line-height: 1; color: var(--accent-text);
}
.steps p { margin-top: 0.5rem; color: var(--text-soft); font-size: 1.05rem; }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* Coming soon: a cover designed for each book, in the site's faces, over one simple pattern taken from the story.
   Sizes are in cqi of the poster, so a cover is the same design at any width. */
.soon-grid { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.25rem 1.5rem; }
.poster { position: relative; container-type: inline-size; }
.cover {
  position: relative; aspect-ratio: 2 / 3; overflow: hidden;
  border-radius: 1.5cqi 4cqi 4cqi 1.5cqi;
  box-shadow: inset 2.4cqi 0 0 rgba(0, 0, 0, 0.16), 0 3cqi 7cqi rgba(35, 26, 18, 0.35);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 9cqi 8cqi 10cqi 11cqi;
  color: var(--cover-ink, var(--paper));
  background: var(--cover-bg, var(--board));
}
.cover-mark { position: absolute; top: 6cqi; left: 11cqi; font-family: var(--caption); font-size: 4.2cqi; opacity: 0.8; }
.cover-title { font-family: var(--caption); font-size: 11.5cqi; line-height: 1.02; }
.cover-author { margin-top: 3cqi; font-family: var(--serif); font-style: italic; font-size: 5.6cqi; }
.cover-type { position: relative; }
.poster-soon {
  position: absolute; top: 5cqi; right: -1.5cqi;
  padding: 1.6cqi 3.5cqi; border-radius: 1cqi 0 0 1cqi;
  background: var(--amber); color: var(--ink);
  font-family: var(--caption); font-size: 4cqi;
  box-shadow: 0 1cqi 2cqi rgba(0, 0, 0, 0.3);
}

/* Pride and Prejudice: Regency wallpaper stripes, and a card for the title. */
.cover-pride-and-prejudice {
  --cover-ink: #2f3a2b;
  background: repeating-linear-gradient(90deg, #dfe3cf 0 5cqi, #c6cfb4 5cqi 6cqi, #dfe3cf 6cqi 8cqi, #b4bf9f 8cqi 9cqi);
}
.cover-pride-and-prejudice .cover-type { background: #f6f0de; padding: 6cqi 6cqi 7cqi; outline: 0.8cqi solid #2f3a2b; outline-offset: -2.4cqi; }
.cover-pride-and-prejudice .cover-mark { color: #2f3a2b; }

/* Persuasion: the sea, in rows of waves. */
.cover-persuasion {
  --cover-ink: #f3e6cc;
  background-color: #1d2b45;
  background-image: radial-gradient(circle at 50% 0, transparent 5.2cqi, #6f86a8 5.4cqi 6.2cqi, transparent 6.4cqi);
  background-size: 12cqi 7cqi;
}
.cover-persuasion .cover-type { background: #1d2b45; margin: 0 -8cqi -10cqi -11cqi; padding: 7cqi 8cqi 10cqi 11cqi; }

/* Jane Eyre: leaded window panes, and the red room. */
.cover-jane-eyre {
  --cover-ink: #f3e6cc;
  background-color: #5c1c22;
  background-image:
    repeating-linear-gradient(45deg, transparent 0 9cqi, rgba(243, 230, 204, 0.28) 9cqi 9.7cqi),
    repeating-linear-gradient(-45deg, transparent 0 9cqi, rgba(243, 230, 204, 0.28) 9cqi 9.7cqi);
}
.cover-jane-eyre .cover-type { background: #5c1c22; margin: 0 -8cqi -10cqi -11cqi; padding: 7cqi 8cqi 10cqi 11cqi; border-top: 1cqi solid #f2c46b; }

/* Wuthering Heights: wind across the moor, over a band of heather. */
.cover-wuthering-heights {
  --cover-ink: #f3e6cc;
  background:
    linear-gradient(transparent 62%, #5d3f63 62%),
    repeating-linear-gradient(-14deg, #3a3f4b 0 2.6cqi, #4a505e 2.6cqi 3.2cqi, #3a3f4b 3.2cqi 7cqi);
}

/* North and South: soot and mill threads above, cotton below. */
.cover-north-and-south {
  --cover-ink: #f3e6cc;
  justify-content: center;
  background:
    radial-gradient(circle, #d9d2c3 0.9cqi, transparent 1.1cqi) 0 50% / 6cqi 6cqi,
    linear-gradient(#2b2a28 50%, #f1ebde 50%);
}
.cover-north-and-south::before {
  content: ""; position: absolute; inset: 0 0 50% 0;
  background: repeating-linear-gradient(0deg, #2b2a28 0 2.2cqi, #3b3a37 2.2cqi 2.6cqi);
}
.cover-north-and-south .cover-mark { z-index: 1; }
.cover-north-and-south .cover-title { position: absolute; left: 11cqi; z-index: 1; }
.cover-north-and-south .ns-north { bottom: calc(50% + 3cqi); }
.cover-north-and-south .ns-south { top: calc(50% + 3cqi); color: #2b2a28; }
.cover-north-and-south .cover-and {
  position: absolute; z-index: 1; right: 9cqi; top: 50%; translate: 0 -50%;
  padding: 0.6cqi 2.6cqi; border-radius: 1cqi;
  background: #f2c46b; color: #231a12;
  font-family: var(--serif); font-style: italic; font-size: 5.4cqi;
}
.cover-north-and-south .cover-author { position: absolute; z-index: 1; bottom: 10cqi; left: 11cqi; color: #2b2a28; }

/* The Hound of the Baskervilles: a moon over the moor. */
.cover-hound {
  --cover-ink: #f3e6cc;
  background:
    radial-gradient(circle at 62% 30%, #f2c46b 0 15cqi, transparent 15.4cqi),
    linear-gradient(transparent 55%, #121a14 55%),
    repeating-linear-gradient(0deg, #1f2b23 0 3cqi, #243128 3cqi 6cqi);
}

/* Daddy-Long-Legs: long legs, on writing paper. */
.cover-daddy-long-legs {
  --cover-ink: #231a12;
  background:
    repeating-linear-gradient(90deg, transparent 0 13cqi, #231a12 13cqi 13.7cqi, transparent 13.7cqi 15cqi, #231a12 15cqi 15.7cqi, transparent 15.7cqi 30cqi) 26cqi 0 / 100% 62% no-repeat,
    repeating-linear-gradient(0deg, #f3e9d3 0 5.4cqi, #d9c9a8 5.4cqi 5.7cqi);
}
.cover-daddy-long-legs .cover-type { background: #f3e9d3; margin: 0 -8cqi -10cqi -11cqi; padding: 6cqi 8cqi 10cqi 11cqi; }
.cover-daddy-long-legs .cover-mark { color: #231a12; }

/* The Enchanted April: wisteria, and Italian sun. */
.cover-enchanted-april {
  --cover-ink: #2e2240;
  background-color: #cbbbe3;
  background-image: radial-gradient(circle, #8e72b8 1.6cqi, transparent 1.8cqi), radial-gradient(circle, #a68fcb 1.1cqi, transparent 1.3cqi);
  background-size: 7cqi 7cqi, 7cqi 7cqi;
  background-position: 0 0, 3.5cqi 3.5cqi;
}
.cover-enchanted-april .cover-type { background: #f2c46b; padding: 6cqi; margin-left: -3cqi; }
.cover-enchanted-april .cover-mark { color: #2e2240; }

.soon h3 { margin-top: 0.9rem; font-size: 1.15rem; }
.soon-meta { margin-top: 0.1rem; color: var(--text-soft); font-size: 0.98rem; font-style: italic; }
.soon-meta + p { margin-top: 0.45rem; color: var(--text-soft); font-size: 1rem; }
@media (max-width: 900px) { .soon-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .soon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; } }

/* The edition and its price, on the cover-intro board. */
.prices-note { margin-top: 0.9rem; color: var(--text-soft); font-size: 1rem; display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; }
.edition-card {
  max-width: 40rem;
  margin-top: 2.25rem;
  background: var(--board); color: var(--paper);
  border-radius: 10px;
  overflow: hidden;
}
.edition { padding: clamp(1.75rem, 4vw, 2.75rem); }
.edition-mark { font-size: 1.05rem; color: var(--amber); }
.edition h3 { margin-top: 0.35rem; font-size: 1.6rem; color: var(--paper); }
.price { margin-top: 1.1rem; font-size: clamp(3rem, 7vw, 4.6rem); line-height: 1; color: var(--paper); }
/* Half-price offer: the Worker shows these only while it runs, and removes them after. A class that sets display
   must not override `hidden`, or the unrewritten page would show the offer. */
[hidden] { display: none !important; }
.was { text-decoration-thickness: 0.08em; opacity: 0.7; }
.price .was { font-size: 0.55em; color: #d6c6a8; margin-right: 0.15em; }
.offer-note { margin-top: 0.6rem; color: var(--amber); font-size: 1.05rem; }
.offer-flag { margin-top: 1.25rem; display: inline-block; padding: 0.5rem 0.85rem; border-radius: 6px; border: 1px solid var(--amber); color: var(--amber); font-size: 1.05rem; }
.edition-lead { margin-top: 1rem; font-size: 1.2rem; color: #ead9b8; max-width: 26rem; }
.edition ul { margin: 1.4rem 0 0; padding: 0 0 0 1.1rem; color: #d6c6a8; font-size: 1.02rem; }
.edition li + li { margin-top: 0.45rem; }
.edition li::marker { color: var(--amber); }


/* The pictures: how we make them, and swapping in the author's own, side by side. */
.policy-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; margin-top: 2.5rem; max-width: 60rem; }
.policy { border-top: 2px solid var(--text); padding-top: 1rem; }
.policy p { margin-top: 0.5rem; color: var(--text-soft); font-size: 1.05rem; }
@media (max-width: 760px) { .policy-pair { grid-template-columns: 1fr; } }

/* Sound */
.sound-options { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 52rem; gap: 2rem; }
.sound-options li { border-left: 2px solid var(--text); padding-left: 1rem; }
.sound-options p { margin-top: 0.4rem; color: var(--text-soft); font-size: 1.05rem; }
@media (max-width: 760px) { .sound-options { grid-template-columns: 1fr; } }

/* Questions */
.questions details { max-width: 46rem; border-bottom: 1px solid var(--rule); }
.questions h2 + details { margin-top: 2rem; border-top: 1px solid var(--rule); }
.questions summary {
  padding: 1.1rem 2rem 1.1rem 0; position: relative; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 1.15rem;
}
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after {
  content: "+"; position: absolute; right: 0.25rem; top: 0.9rem;
  font-family: var(--caption); font-size: 1.3rem; color: var(--accent-text);
}
.questions details[open] summary::after { content: "–"; }
.questions details p { padding: 0 0 1.25rem; max-width: var(--measure); color: var(--text-soft); }

/* Order form */
.order-form { margin-top: 2.25rem; max-width: 46rem; display: flex; flex-direction: column; gap: 1.4rem; }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.4rem; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
fieldset.field { margin: 0; padding: 0; border: 0; }
.field > label, .field legend { font-weight: 600; font-size: 1.02rem; }
.field legend { margin-bottom: 0.4rem; padding: 0; }
.optional { font-weight: 400; color: var(--text-soft); }
.field input[type="text"], .field input[type="email"], .field input[type="url"], .field textarea {
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: 2px solid var(--text);
  border-radius: 5px;
  background: var(--surface-field);
  color: var(--text);
  font: inherit; font-size: 1.05rem;
}
.field textarea { resize: vertical; min-height: 7rem; }
.field textarea::placeholder { color: var(--text-soft); opacity: 1; font-style: italic; }
.field textarea:focus::placeholder { opacity: 0.45; }
.field input:focus-visible, .field textarea:focus-visible { outline-offset: 1px; }
.field [aria-invalid="true"] { border-color: var(--error); }
.field > .choice, .choice { display: flex; align-items: baseline; gap: 0.6rem; font-weight: 400; font-size: 1.05rem; padding: 0.2rem 0; cursor: pointer; }
.choice input { accent-color: var(--amber-ink); width: 1.05rem; height: 1.05rem; flex: none; translate: 0 0.12rem; }
.field-hint { font-size: 0.95rem; color: var(--text-soft); }
.field-error { font-size: 0.98rem; color: var(--error); font-weight: 600; }
.form-status { padding: 0.9rem 1rem; border-left: 4px solid var(--error); background: var(--surface-field); font-weight: 600; }
.form-status.is-done { border-left-color: var(--amber-ink); }
.privacy-line { font-size: 0.98rem; color: var(--text-soft); }
.order-form .button { align-self: flex-start; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Footer ------------------------------------------------------------------------------------------- */
.foot {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem 2rem;
  padding: 2.25rem var(--gutter);
  background: var(--board); color: #d6c6a8; font-size: 1rem;
}
.foot .mark { margin-right: auto; font-size: 1.15rem; }

/* ---- Plain pages (privacy, thanks, form errors) ------------------------------------------------------- */
.plain-main { max-width: 42rem; margin: 0 auto; padding: clamp(2.5rem, 7vw, 5rem) var(--gutter) 5rem; }
.plain-main h1 { font-family: var(--caption); font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1.08; }
.plain-main h2 { margin-top: 2.25rem; font-weight: 600; font-size: 1.3rem; }
.plain-main p, .plain-main ul { margin-top: 1rem; }
.plain-main li + li { margin-top: 0.4rem; }

@media (prefers-reduced-motion: reduce) {
  .shot.is-on .cap, .shot.is-on .card, .shot.is-on .endcard { animation: none; }
}