/* ENVOY — JIT Labs
   Bodoni Moda SC on black. Two screens: the title-card video, then the
   drop plate. Courier Prime carries the dated/technical lines.

   ------------------------------------------------------------------------
   This is one stylesheet split across files, not a set of independent ones.
   THE ORDER THE <link> TAGS APPEAR IN index.html IS PART OF THE STYLESHEET:
   the cascade resolves ties by source order, and responsive.css in
   particular only works because it is last. Moving a tag, or adding one in
   the middle, changes the page. The order is:

       base.css            this file — custom properties, reset, html/body
       nav.css             the fixed bar
       title.css           the title-card video and its controls
       drop.css            the countdown plates and the date line
       gear.css            the red screen and its two photographic plates
       why.css             the four-panel "Why Envoy?" rig walkthrough
       tour.css            the sticky 360° board tour
       light.css           the three-up claims under the tour
       backdrop.css        the fixed fire plate behind the document
       next.css            the black run-up either side of the order panel
       order.css           the order panel and the spec sheet
       order-form.css      the form frame, price, text fields, stepper
       order-choices.css   colourway swatches, running summary, terms
       order-submit.css    submit button, status, errors, confirmation
       footer.css          the closing panel
       responsive.css      every media query on the site — MUST BE LAST

   The split is by page section because that is how the page is edited: the
   thing you are changing is almost always one section, and the file is the
   section. The one exception is responsive.css, which holds the mobile
   overrides for *all* sections rather than each section holding its own —
   keeping every media query in one place is what makes "last" a rule that
   can be stated and checked, instead of a property of fourteen files.

   Custom properties are declared here and read everywhere, including from
   script: js/title.js reads the three title-card timings back off :root.
   ------------------------------------------------------------------------ */

:root {
  --red:        #ef2015;
  --red-bright: #ff4a34;
  --ink:        #f3e4e2;
  /* The footer's column headings. The only warm note on the site that is not
     the red — it reads as signage against the outlined wordmark rather than
     competing with it. */
  --gold:       #f2c230;
  --nav-h:      54px;

  /* The drop card's numerals and its date line are a plain grotesque against
     all the Bodoni — the flat, even figures are what make the plates read as
     a clock face. System fonts only; nothing extra to download. */
  --sans: "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif;

  /* the title-card loop, shared with js/title.js via getComputedStyle so
     the timings only live in one place */
  --fade-out:   600ms;   /* video ends -> full black */
  --black-hold: 220ms;   /* how long it sits on black while rewinding */
  --flash-out:  260ms;   /* white pop -> clear */
}

* { box-sizing: border-box; }

html { background: #000; scroll-behavior: smooth; }

/* No browser scroll snapping anywhere on the page. It used to be
   `y mandatory` with every full screen a target, and that is what made an
   ordinary scroll dump the reader deep inside the 3D section: a trackpad flick
   is not one event but a stream of twenty, and a mandatory snap container
   advances a whole target per event, so a single flick could fly five screens
   down into the tour. `proximity` fixes the flying but drags every short
   scroll back to the screen it started on, which is its own kind of the page
   moving without being asked.

   So the browser now just scrolls, and the one place that steps deliberately —
   the tour — does it in js/tour.js, where a gesture can be recognised as a
   gesture and answered with exactly one panel. */
html { scroll-snap-type: none; }

/* Transparent, not black. The backdrop canvas sits at z-index -1, and in the
   painting order a non-positioned block's background lands *above* negative
   z-index children — so a black body would bury the fire. The black now comes
   from <html> above, which paints below everything, and each section brings
   its own where it wants to hide the field. */
body {
  margin: 0;
  background: transparent;
  color: var(--ink);
  font-family: "Bodoni Moda SC", "Bodoni MT", Didot, "Playfair Display", serif;
  -webkit-font-smoothing: antialiased;
}