:root {
  --r-ink: #172338;
  --r-night: #0d2442;
  --r-paper: #f7f1e4;
  --r-cream: #fffaf0;
  --r-road: #c5522f;
  --r-blue: #1f6f8b;
  --r-gold: #d69b2d;
  --r-leaf: #476f52;
  --r-violet: #66558c;
  --r-line: #d7c9ad;
  --r-shadow: 0 18px 60px rgba(13, 36, 66, .12);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body.rimbaud {
  margin: 0;
  color: var(--r-ink);
  background:
    radial-gradient(circle at 10% 8%, rgba(214,155,45,.16), transparent 21rem),
    linear-gradient(135deg, rgba(31,111,139,.08), transparent 34rem),
    var(--r-paper);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.68;
}

.r-skip {
  position: fixed;
  left: 1rem;
  top: -6rem;
  z-index: 1000;
  padding: .75rem 1rem;
  background: #fff;
  color: var(--r-night);
  border: 3px solid var(--r-gold);
}
.r-skip:focus { top: 1rem; }

.r-top {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(255,255,255,.22);
  color: #fff;
  background: rgba(13,36,66,.96);
  backdrop-filter: blur(12px);
}
.r-top__inner {
  width: min(1220px, calc(100% - 2rem));
  min-height: 4.2rem;
  margin: auto;
  display: flex;
  align-items: center;
  gap: clamp(.7rem, 2vw, 1.6rem);
}
.r-brand { margin-right: auto; font-weight: 800; letter-spacing: .02em; }
.r-top a { color: #fff; text-decoration: none; font: 700 .78rem/1.2 system-ui, sans-serif; }
.r-top a:hover { text-decoration: underline; text-underline-offset: .3rem; }
.r-route { color: #f6c75d !important; }

.r-shell { width: min(1220px, calc(100% - 2rem)); margin: auto; padding: 1rem 0 5rem; }
.r-crumb { margin: .8rem 0 1.2rem; color: #52606f; font: 650 .78rem/1.5 system-ui, sans-serif; }
.r-crumb a { color: inherit; }
.r-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2rem, 6vw, 5.5rem);
  color: #fff;
  border-radius: 0 0 2.5rem .5rem;
  background:
    linear-gradient(112deg, rgba(13,36,66,.98), rgba(31,111,139,.88) 56%, rgba(197,82,47,.84)),
    var(--r-night);
  box-shadow: var(--r-shadow);
}
.r-hero::before,
.r-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%;
}
.r-hero::before { width: 28rem; height: 12rem; right: -7rem; top: -4rem; transform: rotate(-18deg); }
.r-hero::after { width: 20rem; height: 33rem; right: 9%; bottom: -29rem; transform: rotate(26deg); }
.r-kicker { margin: 0 0 .7rem; color: #f6c75d; font: 800 .75rem/1.3 system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.r-hero h1 { max-width: 18ch; margin: 0; font-size: clamp(2.6rem, 7vw, 6.2rem); line-height: .94; letter-spacing: -.045em; }
.r-hero__lead { max-width: 68ch; margin: 1.25rem 0 0; font-size: clamp(1.05rem, 2.1vw, 1.35rem); }
.r-badges { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.4rem; }
.r-badge { padding: .35rem .7rem; border: 1px solid rgba(255,255,255,.45); border-radius: 99rem; font: 700 .72rem/1.2 system-ui, sans-serif; }

.r-grid { display: grid; grid-template-columns: minmax(0, 1fr) 17.5rem; gap: clamp(1.5rem, 4vw, 3.8rem); margin-top: 2.2rem; }
.r-content { min-width: 0; }
.r-panel,
.r-section,
.r-figure,
.r-grammar,
.r-proof,
.r-game,
.r-track-card {
  background: rgba(255,250,240,.96);
  border: 1px solid var(--r-line);
  box-shadow: 0 10px 34px rgba(13,36,66,.07);
}
.r-section { margin: 0 0 2.2rem; padding: clamp(1.2rem, 3.7vw, 3.2rem); border-radius: .4rem 1.8rem .4rem .4rem; }
.r-section h2 { margin: 0 0 1rem; font-size: clamp(1.8rem, 4vw, 3.1rem); line-height: 1.03; }
.r-section h3 { margin: 2.1rem 0 .7rem; color: var(--r-blue); font-size: 1.4rem; line-height: 1.2; }
.r-section p { max-width: 76ch; }
.r-pull { padding: 1.1rem 1.3rem; border-left: .45rem solid var(--r-road); background: #fff; font-size: 1.08rem; }
.r-quote { margin: 1.1rem 0; padding: 1rem 1.25rem; border-left: .45rem solid var(--r-gold); background: #fff7da; font-size: 1.13rem; }
.r-anchor { font: 750 .72rem/1.3 system-ui, sans-serif; color: #5c506f; letter-spacing: .04em; }

.r-toc { position: sticky; top: 5.4rem; align-self: start; padding: 1rem; border-top: .5rem solid var(--r-road); background: #fffaf0; }
.r-toc strong { display: block; margin-bottom: .55rem; font: 850 .72rem/1.3 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.r-toc a { display: block; padding: .44rem .15rem; color: var(--r-night); border-bottom: 1px solid #eadfc8; text-decoration: none; font: 650 .78rem/1.35 system-ui, sans-serif; }
.r-toc a:hover { color: var(--r-road); }

.r-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.4rem 0 2rem; }
.r-figure { margin: 0; overflow: hidden; border-radius: .35rem 1rem .35rem .35rem; }
.r-figure svg { display: block; width: 100%; height: auto; background: #f8f2e6; }
.r-figure figcaption { padding: .85rem 1rem 1rem; font-size: .9rem; line-height: 1.45; }
.r-figure figcaption strong { display: block; color: var(--r-road); }
.r-figure .quote { display: block; margin-top: .35rem; font-style: italic; }
.r-figure text { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.r-grammar-grid,
.r-proof-grid,
.r-card-grid,
.r-track-grid,
.r-game-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.r-grammar,
.r-proof,
.r-track-card { padding: 1rem 1.05rem; border-radius: .35rem 1rem .35rem .35rem; }
.r-grammar h3,
.r-proof h3 { margin: 0 0 .5rem; color: var(--r-blue); font-size: 1.03rem; }
.r-grammar p,
.r-proof p { margin: .45rem 0; font-size: .91rem; line-height: 1.52; }
.r-grammar code { color: #fff; background: var(--r-night); padding: .12rem .35rem; border-radius: .25rem; white-space: normal; }

.r-callout { margin: 1.6rem 0; padding: 1rem 1.2rem; border: 1px solid #bcd0c0; border-left: .45rem solid var(--r-leaf); background: #eff7ed; }
.r-warning { border-color: #e4c190; border-left-color: var(--r-gold); background: #fff7df; }
.r-source-list li { margin: .55rem 0; }

.r-stage-wrap { margin-top: 2rem; padding: clamp(1rem, 3vw, 2rem); border: 1px solid #6f8297; border-radius: .45rem 1.6rem .45rem .45rem; color: #fff; background: #0b1d34; box-shadow: var(--r-shadow); }
.r-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 22rem); gap: 1.2rem; align-items: stretch; }
.r-stage svg { width: 100%; min-height: 32rem; border: 1px solid rgba(255,255,255,.2); background: linear-gradient(#102c4d, #09182c); }
.r-state-copy { display: flex; flex-direction: column; padding: 1rem; background: rgba(255,255,255,.07); }
.r-state-copy h2 { margin: 0; color: #f6c75d; font-size: 1.75rem; }
.r-state-copy blockquote { margin: 1rem 0; padding: .8rem; border-left: .35rem solid #f6c75d; background: rgba(0,0,0,.2); }
.r-state-copy p { font-size: .95rem; }
.r-progress { margin-top: auto; font: 750 .78rem/1.3 system-ui, sans-serif; }
.r-controls { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.r-button {
  min-height: 2.85rem;
  padding: .65rem .95rem;
  border: 1px solid #fff;
  border-radius: .35rem;
  color: #fff;
  background: transparent;
  cursor: pointer;
  font: 800 .78rem/1.2 system-ui, sans-serif;
}
.r-button--primary { color: #0b1d34; border-color: #f6c75d; background: #f6c75d; }
.r-button:hover { transform: translateY(-1px); }
.r-button[disabled] { opacity: .4; cursor: not-allowed; transform: none; }
.r-sound-state { margin-left: auto; align-self: center; color: #b9d7e6; font: 700 .72rem/1.3 system-ui, sans-serif; }

.r-game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r-game { padding: 1rem; border-radius: .35rem 1rem .35rem .35rem; }
.r-game h3 { margin: 0 0 .45rem; font-size: 1rem; }
.r-game p { margin: .45rem 0; font-size: .9rem; }
.r-game__answers { display: grid; gap: .45rem; margin-top: .75rem; }
.r-game__answers button { padding: .55rem .65rem; border: 1px solid var(--r-line); background: #fff; text-align: left; cursor: pointer; }
.r-game__answers button:hover { border-color: var(--r-blue); }
.r-game__feedback { min-height: 1.6rem; color: var(--r-leaf); font-weight: 700; }

.r-track-card { display: flex; flex-direction: column; }
.r-track-card h3 { margin: 0; color: var(--r-blue); }
.r-track-card a { margin-top: auto; font-weight: 800; }
.r-tech { border-top: .5rem solid var(--r-blue); }
.r-general { border-top: .5rem solid var(--r-road); }

.r-poem { margin: 2rem 0; padding: 1.4rem; border-left: .35rem solid var(--r-blue); background: #fff; }
.r-poem h2 { margin: 0 0 .8rem; font-size: 1.65rem; }
.r-poem pre { margin: 0; white-space: pre-wrap; font: 1rem/1.7 Georgia, serif; }
.r-poem__meta { color: #5c6673; font: 700 .72rem/1.35 system-ui, sans-serif; }

.r-footer { margin-top: 3rem; padding: 2rem 0 1rem; border-top: 1px solid var(--r-line); color: #5b6570; font: 600 .77rem/1.5 system-ui, sans-serif; }
.r-footer a { color: inherit; }

:focus-visible { outline: 3px solid #efad2f; outline-offset: 4px; }

@media (max-width: 900px) {
  .r-grid,
  .r-stage { grid-template-columns: 1fr; }
  .r-toc { position: static; order: -1; }
  .r-grammar-grid,
  .r-proof-grid,
  .r-card-grid,
  .r-track-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r-stage svg { min-height: 24rem; }
}

@media (max-width: 620px) {
  body.rimbaud { font-size: 16px; }
  .r-top__inner { min-height: 3.8rem; flex-wrap: wrap; padding: .55rem 0; }
  .r-brand { flex-basis: 100%; }
  .r-shell { width: min(100% - 1rem, 1220px); }
  .r-hero { padding: 1.7rem 1.15rem 2rem; border-radius: 0 0 1.25rem .25rem; }
  .r-section { padding: 1rem; }
  .r-figures,
  .r-grammar-grid,
  .r-proof-grid,
  .r-card-grid,
  .r-track-grid,
  .r-game-grid { grid-template-columns: 1fr; }
  .r-stage svg { min-height: 20rem; }
  .r-sound-state { width: 100%; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

@media print {
  .r-top, .r-toc, .r-controls, .r-skip { display: none !important; }
  body.rimbaud { background: #fff; color: #000; font-size: 11pt; }
  .r-shell { width: 100%; padding: 0; }
  .r-hero { color: #000; background: #fff; box-shadow: none; border: 1px solid #777; }
  .r-section, .r-figure, .r-grammar, .r-proof { box-shadow: none; break-inside: avoid; }
}