/* ENVOY — order.css
   the order panel, its head, and the spec sheet

   One part of a stylesheet split across files. The load order in
   index.html is part of the stylesheet — see css/base.css for the map. */

/* ----------------------------------------------------------------- order */

/* The preorder block, sitting in the film panel above the footer.
 *
 * Everything here has to earn its own legibility. The panel is `field` — it
 * paints nothing, so the fire is directly behind every word — and the two
 * gradient masks at the panel's ends are at z-index -1, below this content
 * rather than over it. So the cards carry dark backgrounds and a backdrop
 * blur, the same job the tour cards do over the moving board, and for the
 * same reason.
 *
 * Sized off the footer's max-width so the two blocks at the foot of the page
 * share one measure and one gutter.
 */
.order {
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  /* The top padding is clear of the panel's own 24vh black mask, so the
     heading starts in the fire rather than in the run-up to it. Both numbers
     came down together — 34vh over a 38vh mask — because the mask, the .gap
     above it and this padding are three stacked runs of black and the reader
     was scrolling through all three before reaching the title. */
  /* The bottom is the other half of the run to the footer — it is stacked
     straight on top of `.next + .gap`, so trimming that alone would only have
     moved black from one box to the next. 20vh here plus 34vh there was better
     than half a screen of nothing under the last field; this is 12 + 20. */
  padding: 26vh clamp(20px, 4vw, 64px) 12vh;
  /* An anchor target under a fixed nav lands with its first line behind the
     bar; this is what the nav's Preorder link scrolls to. */
  scroll-margin-top: calc(var(--nav-h) + 12px);
}

.order-head {
  max-width: 62ch;
  margin-bottom: clamp(28px, 5vh, 60px);
}

/* Same Courier Prime rule the tour uses for its eyebrow — it is the site's
   one voice for a technical caption, so it is worth being literal about. */
.order-eyebrow {
  margin: 0 0 clamp(6px, 1vh, 12px);
  font-family: "Courier Prime", "Courier New", monospace;
  font-size: clamp(9px, 0.85vw, 12px);
  font-weight: 700;
  letter-spacing: 0.36em;
  text-indent: 0.36em;
  text-transform: uppercase;
  color: var(--red);
}

/* Cormorant Garamond, upright — the same face and weight the .light heading
   above it is set in, where this was the page's one italic Bodoni display
   line. Two numbers moved with the family rather than being carried over:
   0.94 was a Bodoni line-height and closes Cormorant's taller ascenders into
   its descenders, and the -0.01em was tightening a face that is already the
   tighter of the two — Cormorant wants a hair of air at this size, not less. */
.order-title {
  margin: 0 0 clamp(14px, 2.4vh, 26px);
  font-family: "Cormorant Garamond", "EB Garamond", Garamond, serif;
  font-size: clamp(38px, 6.2vw, 96px);
  font-weight: 600;
  line-height: 1.0;
  letter-spacing: 0.005em;
  color: var(--ink);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.8);
}

.order-lede {
  margin: 0;
  font-family: "Cormorant Garamond", "EB Garamond", Garamond, serif;
  font-size: clamp(16px, 1.4vw, 23px);
  line-height: 1.5;
  color: rgba(243, 228, 226, 0.86);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
}

.order-lede strong { font-weight: 600; color: var(--red-bright); }

.order-lede--min {
  margin-top: clamp(16px, 2.4vh, 26px);
  font-size: clamp(14px, 1.15vw, 18px);
  text-shadow: none;
}

/* Datasheet left, form right, and the form is the wider of the two — the
   column being asked to do work gets the room. minmax(0,…) on both tracks
   because a grid track's default `auto` minimum is its content, and a long
   unbroken spec value would otherwise push the column past its share. */
.order-body {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: clamp(18px, 2.6vw, 44px);
  align-items: start;
}

/* ---- spec sheet ---- */

/* The tour card's treatment, verbatim in spirit: red rule down the left, dark
   gradient, blur. It is what this site does with a block of text that has to
   sit on top of something moving. */
.order-spec {
  padding: clamp(20px, 2.2vw, 34px) clamp(20px, 2.4vw, 36px);
  border-left: 2px solid var(--red);
  background: linear-gradient(to right, rgba(10, 0, 0, 0.92), rgba(10, 0, 0, 0.7));
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.order-sub {
  margin: 0 0 clamp(14px, 2vh, 22px);
  font-family: "Cormorant Garamond", "EB Garamond", Garamond, serif;
  font-size: clamp(20px, 1.9vw, 30px);
  font-weight: 600;
  line-height: 1.12;
  color: var(--ink);
}

.order-sub-ref {
  font-family: "Courier Prime", "Courier New", monospace;
  font-size: 0.44em;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--red);
  vertical-align: 0.42em;
}

.order-sub--min {
  margin-top: clamp(20px, 3vh, 32px);
  font-size: clamp(16px, 1.35vw, 21px);
}

/* A <dl> rather than a table: these are name/value pairs, not a grid of data,
   and the wrapper div per row is what lets each pair be its own flex line
   while keeping the dt/dd association intact for a screen reader. */
.spec-list { margin: 0; }

.spec-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.4em;
  padding: clamp(7px, 1vh, 11px) 0;
  border-bottom: 1px solid rgba(239, 32, 21, 0.16);
}

.spec-row:last-child { border-bottom: 0; }

.spec-row dt {
  flex: none;
  font-family: "Courier Prime", "Courier New", monospace;
  font-size: clamp(9px, 0.78vw, 11px);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(239, 32, 21, 0.9);
}

.spec-row dd {
  margin: 0;
  text-align: right;
  font-family: "Cormorant Garamond", "EB Garamond", Garamond, serif;
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.35;
  color: rgba(243, 228, 226, 0.88);
}

.box-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: "Cormorant Garamond", "EB Garamond", Garamond, serif;
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.5;
  color: rgba(243, 228, 226, 0.82);
}

.box-list li { padding-left: 1.3em; text-indent: -1.3em; }

.box-list li::before {
  content: "✱";
  margin-right: 0.55em;
  color: var(--gold);
}