/* rainge beta pages: After Hours tokens from the rainge design system.
   Night is home; day follows prefers-color-scheme. Yellow is the ball and nothing else. */

:root {
  color-scheme: dark light;

  /* Night (After Hours) */
  --bg: #0d1a14;
  --surface: #16261e;
  --raised: #1c3026;
  --rule: #2a3a32;
  --line: #5e6b66;
  --ink: #f2e9d6;
  --muted: #a3aba2;
  --ball: #f2d04b;
  --action: #f2e9d6;
  --on-action: #0d1a14;
  --focus: #f2d04b;

  /* Type */
  --text: "Archivo", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --semi: 112.5%;
  --narrow: 62%;

  /* Space (4px base, 16px gutter) */
  --gutter: 16px;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s6: 24px;
  --s8: 32px;
  --s12: 48px;
  --s16: 64px;
  --s24: 96px;

  --radius-sm: 8px;
  --radius-lg: 24px;
  --radius-screen: 32px;
  --page: 1120px;
}

@media (prefers-color-scheme: light) {
  :root {
    /* Day: cream ground, brass ball (fills only) */
    --bg: #f2e9d6;
    --surface: #fbf7ef;
    --raised: #ffffff;
    --rule: #d9d0be;
    --line: #8c8473;
    --ink: #0d1a14;
    --muted: #4f5b55;
    --ball: #b8901a;
    --action: #0d1a14;
    --on-action: #f2e9d6;
    --focus: #0d1a14;
  }
}

@media (min-width: 640px) {
  :root { --gutter: 32px; }
}
@media (min-width: 1100px) {
  :root { --gutter: 48px; }
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.55;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}
@media (min-width: 900px) {
  body { font-size: 17px; }
}

img { display: block; max-width: 100%; height: auto; }

::selection { background: var(--ink); color: var(--bg); }

a { color: inherit; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: var(--line); }
a:hover { text-decoration-color: currentColor; }

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

p, ul, ol, dl, figure, h1, h2, h3 { margin: 0; }

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 10;
  padding: var(--s2) var(--s4);
  background: var(--action);
  color: var(--on-action);
  border-radius: 9999px;
  font-weight: 700;
  text-decoration: none;
}
.skip:focus { top: var(--s3); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- Type roles ---------- */

.eyebrow {
  font-stretch: var(--semi);
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.title {
  font-stretch: var(--semi);
  font-weight: 700;
  font-size: clamp(24px, 3.4vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

h2 {
  font-stretch: var(--semi);
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.15;
  text-wrap: balance;
}

h3 {
  font-stretch: var(--semi);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
}

.display {
  font-stretch: var(--semi);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.96;
}

.num {
  font-stretch: var(--narrow);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.muted { color: var(--muted); }

.prose > * + * { margin-top: var(--s4); }
.prose p, .prose li { max-width: 62ch; }

code {
  font-family: var(--text);
  font-stretch: var(--narrow);
  font-weight: 700;
  font-size: 1.06em;
  letter-spacing: 0.01em;
  padding: 0 0.3em;
  border-radius: 6px;
  background: var(--raised);
  overflow-wrap: anywhere;
}

/* ---------- Top bar ---------- */

.top { border-bottom: 1px solid var(--rule); }
.top-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--s4);
  min-height: 64px;
}
.top nav { display: flex; gap: var(--s4) var(--s6); }
.top nav a {
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--muted);
  padding-block: var(--s2);
}
.top nav a:hover { color: var(--ink); }

/* ---------- Wordmark ---------- */
/* The SVG viewBox carries ~1.9% padding on the left; pull it back so the R sits on the text edge.
   Cap height is 13.26% of the rendered width; clear space below is one cap height. */

.wordmark {
  --wm: min(100%, 600px);
  width: var(--wm);
  max-width: none;
  margin-left: calc(var(--wm) * -0.0192);
}

/* ---------- Buttons ---------- */

.cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 28px;
  border-radius: 9999px;
  background: var(--action);
  color: var(--on-action);
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.button:hover { text-decoration: none; filter: brightness(1.04); }
.button:focus-visible { border-radius: 9999px; }

.button.is-soon {
  background: transparent;
  color: var(--muted);
  border: 1.5px dashed var(--line);
  cursor: default;
}

.cta-note { font-size: 14px; color: var(--muted); max-width: 34ch; line-height: 1.45; }

/* ---------- Phone screens ---------- */

.screen { margin: 0; }
.screen picture,
.screen img {
  border-radius: var(--radius-screen);
}
.screen img {
  width: 100%;
  border: 1px solid var(--rule);
  background: var(--surface);
}
.screen figcaption {
  margin-top: var(--s3);
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}

@media (max-width: 899px) {
  .screen { width: min(78%, 280px); margin-inline: auto; }
  .screen img { aspect-ratio: 600 / 1000; object-fit: cover; object-position: top; }
  .screen figcaption { text-align: center; }
}
@media (min-width: 900px) {
  .screen { width: 300px; }
}

/* ---------- Board: label/value rows on a surface, like a yardage book page ---------- */

.board {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: var(--s2) var(--s4);
  max-width: 720px;
}
.board > div {
  display: grid;
  gap: var(--s1);
  padding-block: var(--s4);
  border-top: 1px solid var(--rule);
}
.board > div:first-child { border-top: 0; }
.board dt { margin: 0; }
.board dd { margin: 0; }
.board strong { font-weight: 700; }
@media (min-width: 640px) {
  .board { padding: var(--s2) var(--s6); }
  .board > div { grid-template-columns: var(--board-label, 160px) minmax(0, 1fr); column-gap: var(--s6); align-items: baseline; }
}

/* ---------- Footer ---------- */

.foot {
  border-top: 1px solid var(--rule);
  padding-block: var(--s16) var(--s12);
}
.foot .display { font-size: clamp(28px, 6vw, 56px); max-width: 14ch; }
.foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s6);
  margin-top: var(--s16);
  padding-top: var(--s6);
  border-top: 1px solid var(--rule);
}
.foot-mark { width: 152px; margin-left: -3px; }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); font-size: 14px; color: var(--muted); }
.foot-links a { color: var(--muted); }
.foot-links a:hover { color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}