/* /rmstudio/ — the RMS download page. Loads after /styles.css and uses only its
   tokens, so the site's light mode and reduced-motion rules apply here too. */
:root { --rec: #c43c3c; }

/* Hero: the pitch and the button on the left, the takes → song picture on the right. */
.rms-hero { position: relative; overflow: hidden; }
/* The shared glow starts above its section; here the section clips it right under
   the header, which left a hard horizontal edge. Fade it in and out instead. */
.rms-hero .hero__glow { inset: 0 -8% 0 30%; height: auto; -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
.rms-hero__inner { position: relative; display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: clamp(2rem, 6vw, 5rem); padding-block: 3.4rem 4rem; }
.rms-hero__copy { min-width: 0; }
.rms-eyebrow { display: flex; align-items: center; gap: .7rem; }
.rec-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rec); box-shadow: 0 0 0 3px #c43c3c33, 0 0 14px #c43c3c99; animation: rec 1.8s ease-in-out infinite; flex: none; }
@keyframes rec { 50% { opacity: .35; box-shadow: 0 0 0 3px #c43c3c11; } }
.rms-title { margin: 0; font: 400 clamp(2.9rem, 5.6vw, 4.9rem)/.98 var(--font-display); letter-spacing: -.05em; max-width: 13ch; }
.rms-title em { display: block; color: var(--ember); font-style: italic; }
.rms-lede { margin: 1.6rem 0 .8rem; font: 400 clamp(1.15rem, 1.9vw, 1.45rem)/1.4 var(--font-display); letter-spacing: -.015em; max-width: 30ch; }
.rms-body { margin: 0; max-width: 44ch; font-size: .88rem; line-height: 1.85; color: var(--ink-2); }
.rms-get { display: grid; justify-items: start; gap: .55rem; margin-top: 2rem; }
.rms-btn { min-height: 54px; padding-inline: 1.6rem; font-size: .76rem; }
.rms-btn:hover { color: #1a120e; } /* paper on ember is 3.2:1; dark ink is 4.7:1 */
.rms-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rms-get__meta { margin: .25rem 0 0; font: .64rem var(--font-mono); letter-spacing: .06em; color: var(--ink-2); }

/* The picture: three take lanes, the chosen part of each lit, joined below. */
.rms-figure { margin: 0; min-width: 0; }
.rms-figure__sheet { padding: 1.4rem 1.3rem 1.2rem; background: var(--sheet); border: 1px solid var(--line); box-shadow: 0 28px 60px var(--shadow), 0 0 50px #d45a3a14; }
.takes { display: block; width: 100%; height: auto; }
.tk-label { font: 600 11px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; fill: var(--ink-2); }
.tk-label--song { fill: var(--ember); }
.tk-lane { fill: var(--bg-deep); stroke: var(--line); }
.tk-lane--song { stroke: var(--line-strong); }
.tk-pick { fill: var(--gold); fill-opacity: .13; stroke: var(--gold); stroke-opacity: .7; }
.tk-dim, .tk-lit, .tk-song { fill: none; stroke-width: 2.1; stroke-linecap: round; }
.tk-dim { stroke: var(--line-strong); }
.tk-lit { stroke: var(--gold); }
.tk-song { stroke: var(--ember); }
.tk-guide { fill: none; stroke: var(--gold); stroke-opacity: .55; stroke-width: 1.2; stroke-dasharray: 2 4; }
.tk-join { fill: none; stroke: var(--ink); stroke-opacity: .55; stroke-width: 1.4; }
.rms-figure__caption { margin-top: .9rem; text-align: center; font: .62rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }

/* At-a-glance strip, the venue bar's sibling. */
.rms-strip { background: var(--bg-deep); color: var(--gold); border-block: 1px solid var(--line); }
.rms-strip__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem 1.4rem; min-height: 58px; margin-block: 0; padding-block: .8rem; list-style: none; font: .62rem var(--font-mono); letter-spacing: .16em; text-transform: uppercase; text-align: center; }
.rms-strip__inner li { display: inline-flex; align-items: center; gap: 1.4rem; }
.rms-strip__inner li + li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 10px #d45a3a88; }

/* Names of things on screen, and keys. */
.ui { display: inline; padding: .05em .4em; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--surface); color: var(--ink); font-size: .92em; white-space: nowrap; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.ui--long { white-space: normal; }
.file { font: 600 .92em var(--font-mono); color: var(--ink); overflow-wrap: anywhere; }
kbd { display: inline-block; min-width: 1.7em; padding: .1em .45em; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px; background: var(--surface); color: var(--ink); font: 600 .78em/1.5 var(--font-mono); text-align: center; }
q { quotes: "“" "”"; font-style: italic; color: var(--ink); }

/* First session: six numbered steps. */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2.6rem; margin: 0; padding: 0; list-style: none; counter-reset: step; border-top: 1px solid var(--line); }
.step { counter-increment: step; position: relative; padding: 1.7rem 0 1.9rem 3.2rem; border-bottom: 1px solid var(--line); }
.step::before { content: counter(step); position: absolute; left: 0; top: 1.45rem; font: italic 400 2.2rem/1 var(--font-display); color: var(--ember); }
.step h3 { margin: 0 0 .55rem; font: 400 1.25rem/1.3 var(--font-display); letter-spacing: -.01em; }
.step p { margin: 0; font-size: .86rem; line-height: 1.8; color: var(--ink-2); }

/* What's inside. */
.rms-inside { border-top: 1px solid var(--line); background: linear-gradient(180deg, var(--bg-deep), var(--bg) 70%); }
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin: 0; padding: 0; list-style: none; }
.feature { padding: 1.5rem 1.4rem 1.6rem; background: var(--sheet); border: 1px solid var(--line); border-top: 2px solid var(--gold); }
.feature h3 { margin: 0 0 .6rem; font: 400 1.18rem/1.3 var(--font-display); }
.feature p { margin: 0; font-size: .84rem; line-height: 1.8; color: var(--ink-2); }

/* Help: keys on the left, common snags on the right. */
.rms-help { border-top: 1px solid var(--line); }
.rms-help__inner { display: grid; grid-template-columns: .9fr 1.25fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.keys { margin-top: 2.2rem; padding: 1.2rem 1.3rem 1.1rem; background: var(--sheet); border: 1px solid var(--line); }
.keys__title { margin: 0 0 .8rem; font: 600 .62rem var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.keys__list { margin: 0; }
.keys__list div { display: grid; grid-template-columns: minmax(8.5rem, max-content) minmax(0, 1fr); align-items: center; gap: 1rem; padding: .45rem 0; border-top: 1px solid var(--line); }
.keys__list dt { white-space: nowrap; }
.keys__list dd { margin: 0; font-size: .82rem; color: var(--ink-2); }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { position: relative; display: block; padding: 1.15rem 2.5rem 1.15rem 0; cursor: pointer; list-style: none; font: 400 1.12rem/1.4 var(--font-display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); font: 300 1.5rem/1 var(--font-ui); color: var(--gold); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq summary:hover { color: var(--gold); }
.faq summary:focus-visible { outline-offset: 2px; }
.faq details p { margin: -.2rem 0 1.3rem; max-width: 60ch; font-size: .86rem; line-height: 1.85; color: var(--ink-2); }

.rms-foot p { max-width: 52ch; text-align: center; line-height: 1.7; }

@media (max-width: 1000px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 759px) {
  .rms-hero__inner { grid-template-columns: 1fr; padding-block: 2.6rem 3rem; }
  .rms-figure { max-width: 34rem; }
  .rms-help__inner { grid-template-columns: 1fr; }
  .rms-strip__inner { font-size: .55rem; gap: .5rem 1rem; }
  .rms-strip__inner li { gap: 1rem; }
}
@media (max-width: 540px) {
  .rms-title { font-size: clamp(2.5rem, 12vw, 3.2rem); }
  .rms-btn { width: 100%; }
  .rms-figure__sheet { padding: 1rem .8rem .9rem; }
  .steps, .features { grid-template-columns: 1fr; }
  .step { padding-left: 2.8rem; }
  .keys__list div { grid-template-columns: minmax(7.2rem, max-content) minmax(0, 1fr); gap: .7rem; }
  .rms .navlist li:last-child { display: list-item; }
  .rms .navlist { gap: 1rem; }
  .rms .navlist a { white-space: nowrap; }
  .rms-foot p { text-align: left; }
}

@media (prefers-color-scheme: light) {
  /* Light --gold / --ember small text dips under 4.5:1 on bg-deep and the
     glow; darker shades here only (measured 2026-10-01). */
  .rms-figure__caption { color: #6e4423; }
  .eyebrow { color: #7f5129; }
  .text-link { color: #a3331d; }
  .rms-btn:hover { color: var(--paper); }
  .rms-figure__sheet { box-shadow: 0 18px 40px var(--shadow); }
  .tk-pick { fill-opacity: .16; }
  .rms-strip { background: #1c1410; color: #e8d3b0; border-color: #1c1410; }
}