/* Pre-order page. Tokens only, no raw colour, no gradients. */

.preorder {
  position: relative;
  padding-block: var(--primitive-space-9);
  background-color: var(--color-background);
  overflow: hidden;
  isolation: isolate;
}
/* Pattern anchored right; on narrow widths it sits only behind the lower part, clear of the H1 and lead. */
.preorder::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: url("../ds/patterns/contour-dark-quiet.svg");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
  pointer-events: none;
}
@media (min-width: 64em) {
  .preorder::before { inset: 0 0 0 auto; width: 45%; }
}
@media (max-width: 63.99em) {
  .preorder::before { inset: auto 0 0 0; height: 40%; background-position: right bottom; }
}

/* Brand shapes assemble once on load; Mist and Rain only (no Flame) */
.preorder__shapes { width: 6rem; height: 2rem; display: block; overflow: visible; }
.preorder__shape { stroke-width: 1.5; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; }
.preorder__shape--tri { fill: none; stroke: var(--primitive-color-teal-400); }
.preorder__shape--cir { fill: var(--primitive-color-teal-500); stroke: var(--primitive-color-teal-500); }
.preorder__shape--sq { fill: none; stroke: var(--color-foreground); }
@media (prefers-reduced-motion: no-preference) {
  .preorder__shape {
    animation: preorder-assemble 600ms var(--motion-easing) both;
  }
  .preorder__shape--tri { --from: translate(-14px, 18px) rotate(-70deg); }
  .preorder__shape--cir { --from: translate(6px, -20px) scale(0.6); }
  .preorder__shape--sq { --from: translate(18px, 14px) rotate(55deg); }
}
@keyframes preorder-assemble {
  from { transform: var(--from); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.site-content main > section.preorder { background-color: var(--color-background); }

.preorder__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--primitive-space-8);
  align-items: start;
}
/* Below the desktop breakpoint: copy, then the form, then mock and quote. */
@media (max-width: 63.99em) {
  .preorder { padding-block: var(--primitive-space-6) var(--primitive-space-8); }
  .preorder__grid { gap: var(--primitive-space-5); }
  .preorder__grid > .preorder__copy { display: contents; }
  .preorder__copy > * { justify-self: start; }
  .preorder__panel { order: 1; }
  .preorder__after { order: 2; }
  .preorder__grid .bookmock { margin-block-start: var(--primitive-space-4); }
}
@media (min-width: 64em) {
  .preorder__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--primitive-space-9); }
}

.preorder__copy { display: grid; gap: var(--primitive-space-5); justify-items: start; min-width: 0; }
.preorder__title { margin: 0; font-family: var(--font-display); max-width: 16ch; overflow-wrap: break-word; }
.preorder__lead { margin: 0; max-width: 52ch; }

/* Typographic book mockup */
.bookmock { display: grid; gap: var(--primitive-space-2); margin-block-start: var(--primitive-space-3); }
.bookmock__cover {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--primitive-space-5);
  width: min(100%, 17.5rem);
  aspect-ratio: 2 / 3;
  padding: var(--primitive-space-5);
  background-color: var(--primitive-color-teal-950);
  color: var(--primitive-color-teal-100);
  border: var(--primitive-border-hairline) solid var(--color-border);
  border-radius: var(--primitive-radius-sm);
  box-shadow: var(--primitive-shadow-lg);
}
.bookmock__shapes { display: inline-flex; gap: var(--primitive-space-1); }
.bookmock__shapes svg { width: var(--primitive-space-3); height: var(--primitive-space-3); display: block; }
.bookmock__title {
  font-family: var(--font-display);
  font-weight: var(--primitive-font-weight-bold);
  font-size: var(--text-h3-size);
  line-height: 1.1;
  letter-spacing: var(--primitive-font-tracking-tight);
}
.bookmock__sub { font-size: var(--text-small-size); line-height: 1.4; color: var(--primitive-color-teal-400); }
.bookmock__author {
  font-family: var(--font-accent);
  font-size: var(--primitive-font-size-xs);
  letter-spacing: var(--primitive-font-tracking-wide);
  text-transform: uppercase;
}
.bookmock__note {
  margin: 0;
  font-family: var(--font-accent);
  font-size: var(--primitive-font-size-xs);
  letter-spacing: var(--primitive-font-tracking-wide);
  text-transform: uppercase;
  color: var(--color-foreground-subtle);
}

/* The one serif moment */
.preorder__quote { margin: 0; padding-inline-start: var(--primitive-space-4); border-inline-start: var(--primitive-border-thick) solid var(--color-border-strong); max-width: 36ch; }
.preorder__quote blockquote { margin: 0; font-size: var(--primitive-font-size-xl); line-height: 1.3; }
.preorder__quote figcaption { margin-block-start: var(--primitive-space-2); color: var(--color-foreground-muted); }

/* Keep anchored errors clear of the sticky header */
#error-summary,
.preorder__form .w-input,
.preorder__form .w-check__input { scroll-margin-top: calc(var(--nav-height) + var(--primitive-space-6)); }
.preorder__form .w-label__req,
.w-check__text .w-label__req { color: var(--color-foreground-muted); }
#error-summary:focus { outline: none; }

/* Form card */
.preorder__card { min-width: 0; }
.preorder__form-title { margin: 0 0 var(--primitive-space-2); font-family: var(--font-display); }
.preorder__form { display: grid; gap: var(--primitive-space-5); margin-block-start: var(--primitive-space-5); }
.preorder__form .w-field { display: grid; gap: var(--primitive-space-2); }
.preorder__form .w-error[hidden],
.preorder__summary[hidden],
.preorder__submit-error[hidden] { display: none; }
.preorder__summary,
.preorder__submit-error { margin-block-start: var(--primitive-space-4); }
.preorder__summary-list { margin: 0; padding-inline-start: var(--primitive-space-4); display: grid; gap: var(--primitive-space-1); }
.preorder__summary-list a { color: var(--color-foreground); text-underline-offset: var(--primitive-space-1); }
.w-check { align-items: flex-start; }
.w-check__text { min-width: 0; }

.preorder__change {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 var(--primitive-space-2);
  background: none;
  border: 0;
  color: var(--color-accent-text);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: var(--primitive-space-1);
  cursor: pointer;
}

.preorder__hp { pointer-events: none; }

.preorder__success { display: grid; gap: var(--primitive-space-4); }
.preorder__success[hidden] { display: none; }
.preorder__success h2 { margin: 0; font-family: var(--font-display); }
.preorder__success h2:focus { outline: none; }
.preorder__success p { margin: 0; }

/* Notes */
.preorder-notes { padding-block: var(--primitive-space-9); background-color: var(--color-background); }
.site-content main > section.preorder-notes { background-color: var(--color-background); }
.preorder-notes__list { margin-block-start: var(--primitive-space-4); max-width: var(--layout-measure); }