/* www.r301.dev — the lockup at page scale.
   The kit's mark is the wordmark over two rules: a long ink one (the URL you
   were handed) and a short red one (the one r301 hands back). Here the headline
   stands where the wordmark stands, both rules run the gutter's full width, and
   the red one stops short — and, once, on load, shortens from the long rule's
   length to its own. The masthead lockup itself is the kit's own PNG, not type
   dressed up to imitate it. Archivo comes from Google Fonts, the page's only
   third-party request. There is no JavaScript. */

/* ---------- tokens ---------- */

:root {
  color-scheme: light dark;

  --ground: #f3f2f2;
  --ink:    #201e1d;
  --muted:  #6b6866;   /* the lockup's ".dev" grey: 4.95:1 on ground */
  --red:    #ec3013;   /* 3.76:1 on ground: rules, focus, hover — never small text */
  --red-text: #c9280f; /* 4.95:1 on ground, 5.31:1 on surface — red that may set text */
  --hairline: #d8d5d3; /* band dividers; non-text */
  --surface:    #fbfafa;
  --code-ink:   #201e1d;
  --code-muted: #6b6866;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gutter: clamp(1.25rem, 5vw, 5rem);

  /* kit proportions: ink rule 4 high, red rule 6 high, 8 between, red = 27.1% of ink */
  --rule-long:  4px;
  --rule-short: 6px;
  --rule-gap:   8px;
  --short-ratio: 0.271;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #201e1d;
    --ink:    #f3f2f2;
    --muted:  #a8a5a3;   /* 6.78:1 on ink */
    --red:    #ec3013;   /* 3.95:1 on ink */
    --red-text: #ff7a63; /* 6.50:1 on ground, 5.80:1 on surface */
    --hairline: #3a3735;
    --surface:    #2a2725;
    --code-ink:   #f3f2f2;
    --code-muted: #a8a5a3;
  }
}

/* ---------- base ---------- */

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

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

body {
  margin: 0;
  background-color: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

p, h1, h2, h3, ol, ul, pre { margin: 0; }
a { color: inherit; }

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

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1;
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: var(--ground);
  font-weight: 800;
  text-decoration: none;
}

.skip:focus { left: var(--gutter); top: 0.5rem; }

/* ---------- bands ---------- */

.masthead,
main { padding-inline: var(--gutter); }

/* ---------- masthead ---------- */

/* The lockup is the kit's own artwork, not type set to look like it. The dark
   file carries a baked #201e1d ground that matches --ground exactly, so it
   seats seamlessly; the light file is transparent. 6rem is the kit's stated
   minimum lockup width. */
.lockup img {
  display: block;
  width: 6rem;
  height: auto;
}

.masthead {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem 2rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--hairline);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.75rem;
}

.nav-link {
  font-size: 0.9375rem;
  text-decoration: none;
  padding-bottom: 0.125rem;
  border-bottom: 2px solid transparent;
}

.nav-link:hover { border-bottom-color: var(--red); }

.nav-cta {
  padding: 0.75rem 1.125rem;
  background: var(--ink);
  color: var(--ground);
  font-size: 0.9375rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  box-shadow: inset 0 0 0 var(--red);
}

.nav-cta:hover { box-shadow: inset 0 calc(-1 * var(--rule-short)) 0 var(--red); }

/* ---------- hero ---------- */

.hero { padding-block: clamp(2.5rem, 7vh, 5.5rem) clamp(2.5rem, 6vh, 4.5rem); }

.eyebrow {
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red-text);
  margin-bottom: clamp(1rem, 2.5vh, 1.75rem);
}

.headline {
  font-size: clamp(2.75rem, 7.6vw + 0.5rem, 8.5rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.04em;
}

.headline-links { color: var(--ink); }

/* 3.76:1 on ground — legal here only because display type clears WCAG's 3:1
   large-text threshold. Pinned by a test; never reuse it on body copy. */
.headline-code { color: var(--red); }

.rules {
  display: grid;
  gap: var(--rule-gap);
  /* clear space ≥ 2× the red rule's height, as the kit asks; this is far more */
  margin-top: clamp(1.75rem, 4vh, 3rem);
}

.rule { display: block; }

.rule-long {
  height: var(--rule-long);
  width: 100%;                         /* stops at the gutter, not the viewport edge */
  background: var(--ink);
}

.rule-short {
  height: var(--rule-short);
  width: calc(100% * var(--short-ratio));
  background: var(--red);
  transform-origin: left center;
}

.below {
  display: grid;
  grid-template-columns: minmax(0, 32rem) minmax(0, 1fr);
  column-gap: clamp(2rem, 6vw, 6rem);
  row-gap: 1.75rem;
  align-items: start;
  margin-top: clamp(1.75rem, 4vh, 3rem);
}

.lede {
  font-size: clamp(1.0625rem, 1.2vw + 0.5rem, 1.3125rem);
  line-height: 1.45;
  text-wrap: pretty;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
}

@media (max-width: 52rem) {
  .below { grid-template-columns: minmax(0, 32rem); }
}

/* ---------- CTAs ---------- */

.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.cta-primary {
  padding: 1rem 1.375rem;
  background: var(--ink);
  color: var(--ground);
  box-shadow: inset 0 0 0 var(--red);
}

.cta-primary:hover { box-shadow: inset 0 calc(-1 * var(--rule-short)) 0 var(--red); }

.cta-primary svg {
  width: 0.75em;
  height: 0.75em;
  flex: none;
}

.cta-secondary {
  padding-bottom: 0.1875rem;
  border-bottom: var(--rule-long) solid var(--ink);
}

.cta-secondary:hover { border-bottom-color: var(--red); }

/* ---------- detail: panel + features ---------- */

.detail {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 6vw, 5rem);
  row-gap: 3rem;
  align-items: start;
  padding-block: clamp(2.5rem, 6vh, 4.5rem);
  border-top: 1px solid var(--hairline);
}

.panel {
  background: var(--surface);
  border: 1px solid var(--hairline);
  padding: clamp(1.25rem, 3vw, 2rem);
}

.panel-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--hairline);
}

.panel-title {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.panel-endpoint {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--code-muted);
}

.method {
  color: var(--red-text);
  font-weight: 700;
}

.sample-label {
  margin-top: 1.5rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--code-muted);
}

.sample-status {
  font-family: var(--mono);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--red-text);
}

.sample-auth,
.code {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--code-ink);
}

.sample-auth {
  margin-top: 0.5rem;
  color: var(--code-muted);
}

.code {
  margin: 0.5rem 0 0;
  overflow-x: auto;
  white-space: pre;
}

.tok-key  { color: var(--code-ink); }
.tok-str  { color: var(--red-text); }
.tok-num  { color: var(--code-muted); }
.tok-punc { color: var(--code-muted); }

.features {
  list-style: none;
  padding: 0;
  display: grid;
  gap: clamp(1.75rem, 4vh, 2.5rem);
}

.feature { border-top: 1px solid var(--hairline); padding-top: 1rem; }
.feature:first-child { border-top: 0; padding-top: 0; }

.feature-num {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.feature-title {
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0.375rem;
}

.feature-body {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}

.feature-body code {
  font-family: var(--mono);
  font-size: 0.875em;
  color: var(--ink);
}

@media (max-width: 62rem) {
  .detail { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- motion: one moment, once ---------- */

@media (prefers-reduced-motion: no-preference) {
  .rule-short {
    animation: shorten 900ms cubic-bezier(0.16, 1, 0.3, 1) 300ms both;
  }
  .cta-primary,
  .cta-secondary,
  .nav-link,
  .nav-cta {
    transition: box-shadow 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out;
  }
}

/* scaleX(1 / ratio) is exactly the long rule's length */
@keyframes shorten {
  from { transform: scaleX(3.69); }
  to   { transform: scaleX(1); }
}