/* =========================================================================
   Base: reset, document defaults, shared utilities
   ========================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* On a screen bigger than the laptop the page was drawn on (1512 × 830),
   everything set in rem grows with it, as the cards (drawn to the
   screen, finish-card.css) do: by the lesser of how much wider and how
   much taller it is, so the page is the laptop's, larger. Never under
   the reader's own setting. Media queries are untouched: their rem is
   always the browser's. */
html {
  font-size: max(100%, min(calc(100vw / 1512 * 16), calc(100vh / 830 * 16)));
  background: var(--c-black);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100svh;
  background: var(--c-black);
  overflow-x: hidden;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

strong,
b {
  font-weight: 400;
}

:focus-visible {
  outline: 1px solid var(--c-led-core);
  outline-offset: 4px;
}

/* ---- Utilities ---- */

/* Components set their own display; [hidden] must always win */
[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Small uppercase monospace label, the site's secondary voice */
.mono,
.eyebrow,
.kicker,
.field__label,
.site-footer {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: var(--fs-micro);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
}

/* =========================================================================
   Section rules

   A hairline marking where one section ends and the next begins. Drawn as
   a pseudo-element inset to the gutters rather than as a border, for two
   reasons: a border would run the full width of the viewport, where every
   other rule on the page stops at the gutter; and a section whose picture
   bleeds to its top edge could not carry one without drawing it across
   the picture — such a section takes its rule from the foot of the one
   above (.rule-bottom).
   ========================================================================= */

.rule-top,
.rule-bottom {
  position: relative;
}

.rule-top::before,
.rule-bottom::after {
  content: "";
  position: absolute;
  left: var(--gutter-safe);
  right: var(--gutter-safe);
  height: 1px;
  background: var(--c-hairline);
  pointer-events: none;
}

.rule-top::before { top: 0; }
.rule-bottom::after { bottom: 0; }

/* Anchors glide rather than jump — the page's one piece of scroll motion,
   and only where motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* A line break that only applies once there is room for the line it makes.
   Narrow screens wrap the sentence on their own. */
.break-wide {
  display: none;
}

@media (min-width: 40rem) {
  .break-wide {
    display: inline;
  }
}

/* =========================================================================
   Enquiry link

   Sits at the foot of a section that offers variants, naming whichever one
   is on show. See src/js/ui/variants.js — it fills the matching field in
   the register form on the way down.
   ========================================================================= */

.enquire {
  margin-top: var(--space-6);
}

/* A line to turn a preference into an action, and to take the risk out of
   it before the button is pressed. */
.enquire__prompt {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-small);
  color: var(--c-ink-3);
}

.enquire__link {
  width: auto;
}