/* ==========================================================================
   Ridgeway Interactive — the placeholder page, and nothing else.
   ==========================================================================

   This site is one page, so it carries one stylesheet holding only what that
   page uses. It used to share the Cambium site's 2,000-line site.css, which
   was the sensible thing while the two lived in one document root; they are
   separate sites now, and a page with a mark, a wordmark and a line of text
   should not be shipping the rules for a documentation sidebar.

   The lockup below is the same construction Cambium's footer uses. Two copies
   of about thirty lines, deliberately: the alternative is a shared file that
   ties one site's deploy to the other's, which is exactly what the split was
   for. If the artwork or its metrics change, both need the same edit. */

/* Spectral SC, SIL Open Font License — see assets/fonts/OFL-Spectral.txt.
   The wordmark only, which is set in the 700 cut; no other weight is used
   here, so no other weight is shipped. */
@font-face {
  font-family: "Spectral SC";
  src: url("../assets/fonts/SpectralSC-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-wordmark: "Spectral SC", ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  --shell-pad: clamp(24px, 4.2vw, 64px);

  /* Dark, full stop. There is no theme switch on this page and no stored
     preference to read, so the four colours it needs are just declared. */
  --ground: #141414;
  --text: #E7EBE5;
  --text-dim: #A3AC9E;
  --focus: #63BC85;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---- the lockup ----
   Range and wordmark side by side, reading as one object because they start
   and stop on exactly the same two lines: the mark is set to the wordmark's
   cap height, and baseline alignment drops its base onto the baseline.
   Nothing has to be fudged at either end — the artwork's ink touches all four
   edges of its frame, so the image's box and the mountain's silhouette are the
   same thing, and RIDGEWAY in small caps has no descender, so its ink bottom
   is the baseline.

   The size lives on the container rather than the wordmark, so the mark's `em`
   height resolves against the same font-size the text is set in. */

.home-brand {
  display: flex;
  align-items: baseline;
  gap: 0.3em;
  width: max-content;
  max-width: 100%;
  grid-row: 2;
  font-size: clamp(28px, 5.4vw, 46px);
}

/* The mountain is black artwork on transparency, inverted for the dark page.
   An <img> filtered rather than a CSS mask: a mask can only take an inlined
   data URI (a file URL is blocked over file://), and this artwork is far too
   large to inline. */
.ridgeway-mark {
  display: block;
  /* 0.676em is Spectral SC's cap height, measured off a render rather than
     taken from the font's metrics. A replaced element's baseline is its bottom
     margin edge, which is what lands the range's base on the wordmark's
     baseline. */
  height: 0.676em;
  width: auto;
  filter: invert(1);
}

.home-wordmark {
  font-size: 1em;
  font-family: var(--font-wordmark);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  /* Letter-spacing lands after the last glyph too. Taking it back off the
     right keeps the lockup's box tight to the Y instead of trailing a space. */
  margin-right: -0.08em;
  white-space: nowrap;
  color: var(--text);
}

/* ---- the page ----
   Brand on the top quarter line, quote on the bottom third, nothing between. */
.home {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 25vh auto 1fr auto 25vh;
  justify-items: center;
  padding: 0 var(--shell-pad);
  text-align: center;
}

.home-tagline {
  grid-row: 4;
  align-self: end;
  font-family: var(--font-mono);
  font-size: clamp(0.86rem, 1.1vw, 1rem);
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--text-dim);
}