/* ============================================================
   Rung Learning - shared stylesheet for the text sub-pages
   (about, contact, privacy, 404).

   The landing page keeps its own inline CSS and is untouched.
   Tokens, class names, and type scale are lifted from index.html
   (Brand Guide v6) so the sub-pages read as the same site.
   ============================================================ */

:root {
  /* core brand */
  --burgundy: #270C11;   /* v6: deep oxblood; THE house ground */
  --butter:   #E9CE83;
  --orange:   #C25A2C;   /* decorative register only; never body text */
  /* working materials */
  --ivory:    #F4EDDA;
  --ink:      #1A1612;
  --espresso: #3A2A1E;
  --line:     #ECE8DE;
  --muted:    #8A8275;

  /* layout */
  --container: 1200px;
  --reading: 680px;
  --gutter: clamp(20px, 4vw, 48px);
  --pad-y: clamp(56px, 8vw, 96px);

  --font-sans: "Inter", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--burgundy);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; }
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus, var(--burgundy));
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -64px;
  background: var(--butter); color: var(--ink);
  font: 700 14px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .04em;
  padding: 12px 16px; border-radius: 4px; z-index: 50;
  text-decoration: none;
  transition: top 150ms ease;
}
.skip-link:focus-visible { top: 16px; }

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

/* ============ Grounds ============ */
.s-burgundy { background: var(--burgundy); color: var(--ivory); --focus: var(--butter); }
.s-butter   { background: var(--butter);   color: var(--ink);   --focus: var(--burgundy); }
.s-espresso { background: var(--espresso); color: var(--ivory); --focus: var(--butter); }
.s-ivory    { background: var(--ivory);    color: var(--ink);   --focus: var(--burgundy); }

/* ============ Type scale (Brand Guide v6, Section 5) ============ */
.display {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(38px, 5.5vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}
.h2 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
.h3 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(19px, 2.2vw, 23px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}
.subhead {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.45;
  margin: 0;
  max-width: var(--reading);
}
.body-copy {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.65;
  margin: 0;
  max-width: var(--reading);
}
.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(13px, 1.2vw, 16px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
}
.wordmark {
  /* The outlined asset, not live type: outlining is what fixes the tracking and stops
     anyone setting it in the wrong weight (Brand Guide v7, Section 3). Sized by height
     rather than font-size, and coloured through `color` so one symbol serves the Butter
     header and the Ivory footer. */
  display: block;
  flex: none;
  height: clamp(23px, 2.5vw, 30px);
  /* The <svg> carries no width/height attributes, so without an aspect ratio it
     stretches to the flex line and the glyphs letterbox inside an over-wide box,
     which pulls the lockup apart. Ratio is the wordmark's own viewBox. */
  aspect-ratio: 934.81 / 137.05;
  width: auto;
}
.mark { display: block; }

/* ============ Buttons ============ */
.btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(14px, 1.3vw, 16px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  border-radius: 4px;
  padding: 17px 26px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  text-align: center;
  border: 1px solid transparent;
  transition: filter 150ms ease, transform 150ms ease;
}
.btn:hover { filter: brightness(0.92); }
.btn:active { transform: translateY(1px); }
.btn--butter   { background: var(--butter); border-color: var(--butter); color: var(--ink); }
.btn--burgundy { background: var(--burgundy); border-color: var(--burgundy); color: var(--butter); }

/* ============ Nav ============ */
.site-header { padding-block: clamp(20px, 3vw, 32px); }
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
}
.site-header .wordmark { color: var(--butter); }
.nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 30px);
  flex-wrap: wrap;
}
.nav-link {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ivory);
  text-decoration: none;
  padding: 12px 4px;
  border-bottom: 2px solid transparent;
  transition: border-color 100ms ease, color 100ms ease;
}
.nav-link:hover { color: var(--butter); border-bottom-color: var(--butter); }
.nav .btn { padding: 12px 20px; }
@media (max-width: 760px) {
  .site-header .container { flex-direction: column; align-items: flex-start; gap: 16px; }
  .nav { width: 100%; gap: 14px 22px; }
  /* The mark holds its 64px floor at every width: below it the finals say change
     variant, never shrink (final/USAGE.md). */
  .site-header .wordmark { height: 21px; }
  .site-header .brand-lockup { gap: 10px; }
  .nav-link { font-size: 12px; }
}

/* ============ The page body ============ */
.page-head { padding-block: clamp(28px, 5vw, 56px) clamp(40px, 6vw, 72px); }
.page-head .eyebrow { color: var(--orange); margin-bottom: 18px; }
.page-head .display { color: var(--ivory); max-width: 15ch; }
.page-head .subhead { color: rgba(244,237,218,0.82); margin-top: 22px; }

.prose { padding-block: var(--pad-y); }
/* Full-width container so the reading column starts on the same left edge as
   the page heading above it. Width is held by the max-width on the children. */
.prose h2, .prose h3 { max-width: var(--reading); }
.prose h2 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin: clamp(38px, 5vw, 56px) 0 14px;
  text-wrap: balance;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.25;
  margin: 30px 0 10px;
}
.prose p { margin: 0 0 18px; max-width: var(--reading); }
.prose ul { margin: 0 0 18px; padding-left: 22px; max-width: var(--reading); }
.prose li { margin: 0 0 10px; }
.prose li::marker { color: var(--orange); }
.prose a { color: var(--espresso); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--orange); }
.prose strong { font-weight: 700; }
.prose .lede { font-size: clamp(18px, 2vw, 21px); line-height: 1.5; font-weight: 500; }
.prose .meta {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 32px;
}
.prose hr { border: 0; height: 1px; background: var(--line); margin: clamp(36px, 5vw, 52px) 0; }

.cta-strip { padding-block: clamp(48px, 6vw, 72px); }
.cta-strip .h2 { max-width: 22ch; }
.cta-strip p { margin: 16px 0 26px; max-width: var(--reading); }

/* ============ Footer ============ */
.site-footer { padding-block: clamp(48px, 6vw, 72px) clamp(32px, 4vw, 48px); }
.site-footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.site-footer .brand-lockup { gap: 14px; }
.site-footer .wordmark { height: 24px; color: var(--ivory); }
.footer-desc {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  color: rgba(244,237,218,0.72);
  margin: 0;
  max-width: 34ch;
}
.footer-links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  flex-wrap: wrap;
}
.footer-links a {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(244,237,218,0.72);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: color 100ms ease, border-color 100ms ease;
}
.footer-links a:hover { color: var(--butter); border-bottom-color: var(--butter); }
.footer-rule { height: 3px; width: 100%; background: var(--butter); border: 0; margin: clamp(32px, 4vw, 48px) 0 0; }