/* site.css -- mollusk, the one-page site.

   Every color here is a token from app/Theme.qml, under the same name, so
   the site and the app are one palette and a change to one is a change to
   both. There is ONE ground, the dark one (Garrett, 12 Sep 2026: "I kind of
   just want to not have a light mode honestly"). The light palette, the
   toggle and the crossfade between them are gone; git has them if the
   decision ever turns around.

   The feel is the GUI's sliding bar: teal light fading into a deep ground,
   and the light lives where the pointer is. Everything that glows here does
   it that way: the divider and the rules between sections hold that light
   still at their centers, and the background light trails the scroll. */


:root {
  /* AUDITION 11 Sep (Garrett's QR-card screenshot): the ground turned from
     near-black neutral to a dark green-teal, and the grays with it so the
     rail and cards sit in the same water. The app's Theme.qml values are
     kept here, commented, to go back to.
     was: --bg #131316  --rail #17171a  --panel #1b1b1f  --surface #212127
          --raised #282830  --hover #2f2f38  --border #2c2c33
          --border-strong #43434d  --deep #0e1516 */
  --bg: #0d201b;
  --rail: #102420;
  --panel: #132823;
  --surface: #182e29;
  --raised: #1e3630;
  --hover: #25403a;
  --border: #223a35;
  --border-strong: #3c5b54;
  --text: #e6e6ea;
  --muted: #a3a3ab;
  --faint: #9494a0;
  --accent: #6db8a7;
  --accent-rgb: 109, 184, 167;
  --accent-dim: #3d6a61;
  --ok: #7cc48c;
  --attention: #dcb055;
  /* the ocean: the app's floor, sinking toward teal as the page goes down.
     The three glow alphas went up about half again on 12 Sep (Garrett: "the
     light splotches should be more pronounced"); the shader's dither keeps
     the larger spans from banding. */
  --deep: #071311;
  --glow-a: rgba(109, 184, 167, 0.17);
  --glow-b: rgba(61, 106, 97, 0.38);
  --glow-c: rgba(109, 184, 167, 0.075);
  color-scheme: dark;
}



/* Self-hosted, so no visitor's browser contacts Google (files from
   fonts.gstatic.com, latin subsets, SIL Open Font License; saved by Garrett
   10 Sep). Mona Sans is variable in weight and width. */
@font-face {
  font-family: "Mona Sans";
  src: url("fonts/mona-sans.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("fonts/schibsted-grotesk.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* ---- type (Garrett, 10 Sep): Mona Sans for headings and text, Schibsted
   Grotesk for the mollusk wordmark alone, and the app's own mono (Consolas,
   Theme.monoFont) for file names. No third web font. ---- */
:root {
  --sans: "Mona Sans", system-ui, sans-serif;
  --display: "Mona Sans", system-ui, sans-serif;
  --wordmark: "Schibsted Grotesk", "Mona Sans", system-ui, sans-serif;
  --mono: Consolas, ui-monospace, "SF Mono", Menlo, monospace;
  --stretch-display: 112%;
  --stretch-body: 100%;
  --rail-w: 272px;
  --radius: 6px;
}

/* No italics anywhere, by decision. font-synthesis stops a browser faking
   an oblique if some future tag asks for one. */
*, *::before, *::after { box-sizing: border-box; font-style: normal; }
html { -webkit-text-size-adjust: 100%; font-synthesis: none; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  color: var(--text);
  background-color: var(--bg);
  font: 420 1.0625rem/1.62 var(--sans);
  font-stretch: var(--stretch-body);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* The ocean: a layer pinned to the viewport behind everything. A fixed
   pseudo-element rather than background-attachment: fixed, which repaints
   the whole page on every scroll and left blank bands after a jump. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 30%, var(--deep) 100%);
}

/* Light mode lines (Garrett, 10 Sep, pointing at the app's divider in light
   mode: "the line gradients should look more like this"). The app's handle
   is a 6 px band of accentDim, fading linearly to nothing 24% either side of
   its center; the rules and the page divider take that shape here, held at
   their centers. Dark mode keeps the thin bright spark. */

/* ---- the light (Garrett, 10 Sep): the original faint teal wash, option 4,
   and it must not sit still. His pick of the three auditioned motions:
   "float + eased", then "it doesn't need to fully catch up to where the
   scroll is at": the layer trails the scroll, settles, and travels 40% as
   far as the page (PARALLAX in site.js). This is the CSS fallback; the
   GPU version below draws the same lights dithered. Each light is one soft radial gradient with the sizes
   and colors the fixed wash used. Reduced motion: no drift, and the layer
   moves exactly with the scroll. ---- */
body { position: relative; }
.ocean {
  position: fixed;
  left: 0; top: 0;
  width: 100%;
  height: var(--ocean-h, 100vh);
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  will-change: transform;
}
.ocean i {
  position: absolute;
  display: block;
  border-radius: 50%;
  /* No hard rim (Garrett, 10 Sep: "hard edges on the splotches ... a bit
     corny"). A straight fade stops at its edge with a visible crease, and a
     faint teal on near-black shows its 8-bit steps as rings. So the falloff
     is a curve that reaches zero with no slope left, and a light blur
     smooths what banding is left. */
  background: radial-gradient(closest-side,
    var(--c) 0%,
    color-mix(in srgb, var(--c) 82%, transparent) 18%,
    color-mix(in srgb, var(--c) 55%, transparent) 38%,
    color-mix(in srgb, var(--c) 28%, transparent) 58%,
    color-mix(in srgb, var(--c) 10%, transparent) 76%,
    color-mix(in srgb, var(--c) 2%, transparent) 90%,
    transparent 100%);
  filter: blur(28px);
  /* Two motions layered, on different clocks so no two lights move in
     step: a slow drift across the screen that stretches unevenly as it
     goes, and a gentle breathing in brightness. site.js gives each light
     its own direction (--dx, --dy), speed and starting point. */
  animation:
    wander var(--wander-s, 80s) ease-in-out infinite alternate,
    var(--breathe, breathe1) var(--breathe-s, 10s) ease-in-out infinite alternate;
  will-change: transform, opacity;
}
.ocean i:nth-child(3n+1) { --breathe: breathe1; --breathe-s: 10s; }
.ocean i:nth-child(3n+2) { --breathe: breathe2; --breathe-s: 13s; }
.ocean i:nth-child(3n)   { --breathe: breathe1; --breathe-s: 16s; }
/* Garrett, 10 Sep: "they can slowly drift across the whole screen", and
   "subtly stretch". A path, not a straight line: out along the vector,
   curving, and back (alternate). */
@keyframes wander {
  0%   { transform: translate(0, 0) scale(1, 1); }
  30%  { transform: translate(calc(var(--dx) * 0.35), calc(var(--dy) * 0.75)) scale(1.14, 0.93); }
  65%  { transform: translate(calc(var(--dx) * 0.72), calc(var(--dy) * 0.25)) scale(0.95, 1.12); }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.08, 1.02); }
}
/* "Ever so slightly brighter and dimmer." */
@keyframes breathe1 { from { opacity: 0.8; }  to { opacity: 1; } }
@keyframes breathe2 { from { opacity: 1; }    to { opacity: 0.78; } }
@media (prefers-reduced-motion: reduce) { .ocean i { animation: none !important; } }

/* The GPU version of the light (site.js). When it runs, it paints the ground
   and the lights together, dithered, so the CSS ground and lights step
   aside. */
/* the bubbles: their own layer, above the ocean and behind everything
   that is read. Never interactive, and painted only while the tab is
   visible (site.js). */
.bubbles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .bubbles { display: none; } }

.sea {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
.gl .ocean, .gl body::before { display: none; }

/* ---- the preview notice: the app's "worth reading, not alarm" amber ---- */
.preview {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 18px 0 0;
  font: 500 0.8125rem/1.4 var(--sans);
  color: var(--muted);
}
.preview .dot {
  flex: none;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--attention);
  box-shadow: 0 0 10px rgba(220, 176, 85, 0.45);
}

/* ---- the window: a rail, the sliding bar, the work area ---- */
.window {
  display: grid;
  grid-template-columns: var(--rail-w) 6px minmax(0, 1fr);
  min-height: 100vh;
}

.rail {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 26px 18px 22px 22px;
  background: color-mix(in srgb, var(--rail) 84%, transparent);
  overflow: hidden;
}

/* The mark sits in the line of type like an emoji typed before the word
   (Garrett, 10 Sep): on the same baseline, its foot dipping below it the
   way an emoji's does, its top above the capitals. So the brand is a line
   of text, not a flex row. */
.brand {
  display: inline-block;
  align-self: flex-start;
  white-space: nowrap;
  font: 800 2.125rem/1.15 var(--wordmark);   /* 26 to 34 px (Garrett, 10 Sep: "a good amount larger without getting too large") */
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
}
/* light mode: a softer charcoal than the body ink, since the mark is set
   large and heavy (Garrett, 10 Sep: "lighten it a bit in light mode") */
.brand img {
  display: inline-block;
  /* matched to a real 🟦 set in this face at this size (Garrett, 10 Sep,
     "Like this: 🟦mollusk"): measured at 2x, the square stands 3 px above
     the tallest letters and 3 px below the baseline, 7 px from the m */
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.19em;
  margin-right: 0.12em;       /* the 3 px gap at 26 px, scaled */
}
.descriptor {
  /* under the word: the 1.1em mark plus the 0.12em gap, at the brand size */
  margin: 4px 0 0 calc(2.125rem * 1.22);
  font: 500 0.9375rem/1.3 var(--sans);
  color: var(--muted);
  letter-spacing: 0.01em;
}

.index {
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.index a {
  display: block;
  padding: 7px 10px 8px;
  margin: 0 -10px;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background-color 150ms ease-out;
}
.index a:hover { background: var(--surface); }
.index a.on { background: var(--surface); }
.index .t {
  display: block;
  font: 560 0.875rem/1.35 var(--sans);
  color: var(--text);
}
.index a.on .t { color: var(--accent); }
.index .s {
  display: block;
  font: 420 0.75rem/1.35 var(--sans);
  color: var(--faint);
}

.rail-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font: 420 0.8125rem/1.45 var(--sans);
}
.rail-foot .mail { color: var(--text); text-decoration: none; }
.rail-foot .mail:hover { color: var(--accent); }
.entity { margin: 0; color: var(--faint); font-size: 0.75rem; }
.entity span { display: block; }

/* The divider between the index and the page. Garrett, 10 Sep: it "should
   also not animate and be the same type of thing as the horizontal lines".
   A 1px rule with the same light held at its center (the middle of the
   screen, since the divider is pinned to the viewport), at the same 0.72. */
.bar {
  position: sticky;
  top: 0;
  height: 100vh;
}
.bar::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  background: var(--border);
}
.bar::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: calc(50% - 1px);
  width: 3px;
  opacity: 0.72;
  background: radial-gradient(3px 260px at 50% 50%, var(--accent), rgba(var(--accent-rgb), 0.35) 38%, rgba(var(--accent-rgb), 0) 100%);
}

/* ---- the work area ---- */
main {
  padding: 0 clamp(28px, 6vw, 96px) 64px;
  max-width: 980px;
}
section { max-width: 44rem; padding: 64px 0 60px; }
section p { margin: 0 0 1em; color: var(--muted); }

.hero { padding-top: clamp(48px, 10vh, 112px); }
/* Above the headline: the ptx2rpp wordmark exactly as the app draws it
   (app/brand, 25ac450), dark or light version with the theme, then what it
   converts. Garrett, 10 Sep: "Those should go above the header", "It
   should be a good size", and after a detour: "I like ptx2rpp exactly where
   it is ... it's very necessary to have at the top because someone looking
   for a conversion tool will be reassured by it being there". The SVG's baseline is 1090 of its 1410 units
   (22.7% up from the bottom), so it drops by that share of its height to
   share a baseline with the words beside it. */
.kicker {
  margin: 0;
  font: 560 1.0625rem/1.3 var(--sans);
  color: var(--muted);
}
.kicker .pmark {
  display: inline-block;
  width: auto;
  height: 58px;
  vertical-align: -13px;
  margin-right: 16px;
}
h1 {
  /* padding-bottom gives the descenders (the y of "your") painted ground
     under a text-clipped gradient; the margin gives the same amount back */
  margin: 22px 0 calc(28px - 0.14em);
  padding-bottom: 0.14em;
  font: 800 clamp(2.5rem, 5.4vw, 4.4rem)/1.02 var(--display);
  font-stretch: var(--stretch-display);
  letter-spacing: -0.028em;
  color: var(--text);
  max-width: 22ch;
  text-wrap: balance;
}
/* The teal phrase reads as one thought, so it takes a line of its own
   rather than starting halfway along the line above (Garrett, 12 Sep:
   "it used to have 'sounding like your mix' all in 1 line at the bottom
   of the header"). Held on one line only where there is room for it;
   on a narrow screen it wraps like any other text. */
h1 .lastline { display: block; }
@media (min-width: 861px) { h1 .lastline { white-space: nowrap; } }
/* Lit from the middle (Garrett, 10 Sep: "more white in the middle but the
   edges are slightly darker"). A pool of light across the headline's box,
   clipped to the letters; inverted in light mode. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  h1 {
    /* the first version, restored (Garrett, 10 Sep: "Let's go back to the
       first gradient"); the darker ellipse that followed it is dropped */
    background: radial-gradient(circle farthest-side at 42% 48%, #ffffff 0%, #f1f1f4 32%, #d4d4da 70%, #bdbdc5 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  /* Light mode: the first gradient, inverted (Garrett, 10 Sep: "use the
     first gradient but inverted"). Darkest ink at the middle, easing to a
     softer gray at the rim; the rim is about 7:1 on the light ground. */
  /* "sounding like it should.": light at the edge of depth. Garrett, 10 Sep,
     in turn: "more detailed and it can have layers ... reminiscent of light
     streaming in shallow ocean water"; "an abstract thing so it shouldn't be
     too on the nose"; "darker too. The whole thing is like right on the
     edge of where sunlight can still be seen in deep water. But not like
     literally water looking"; "a 45 degree angle like \\"; and "sounding is
     lighter than 'like it should' so that there's a gradient going downward
     as well".
     So the light falls two ways. Downward: "sounding" (.hl-1) is the
     lighter band and "like it should." (.hl-2) the deeper one, and each
     line darkens from top to bottom. Diagonally: a faint wash from the top
     left, two soft sets of shafts on a 45-degree fall, three dim glints.
     Nothing crisp. The deepest color stays at 3.8:1 on the dark ground,
     over the 3:1 floor for headline type. The shafts drift slowly; reduced
     motion holds them. */
  h1 .hl, .offer .hl {
    background:
      radial-gradient(ellipse 5em 1.1em at 16% 24%, var(--sh-glint), transparent 70%),
      radial-gradient(ellipse 3.4em 0.8em at 60% 30%, var(--sh-glint), transparent 70%),
      radial-gradient(ellipse 4.2em 0.9em at 82% 70%, var(--sh-glint2), transparent 70%),
      repeating-linear-gradient(45deg, transparent 0, transparent 0.5em, var(--sh-ray) 1.3em, transparent 2.1em, transparent 2.6em),
      repeating-linear-gradient(49deg, transparent 0, transparent 0.4em, var(--sh-ray2) 1.0em, transparent 1.6em, transparent 1.9em),
      linear-gradient(135deg, var(--sh-wash) 0%, transparent 60%),
      linear-gradient(180deg, var(--sh-top) 0%, var(--sh-bottom) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shallows 26s ease-in-out infinite alternate;
  }
  h1 .hl, .offer .hl {
    --sh-ray: rgba(200, 250, 236, 0.20); --sh-ray2: rgba(200, 250, 236, 0.11);
    --sh-glint: rgba(214, 252, 242, 0.24); --sh-glint2: rgba(150, 225, 208, 0.18);
    --sh-wash: rgba(220, 255, 246, 0.14);
  }
  h1 .hl-1, .offer .hl-1 { --sh-top: #86d3c0; --sh-bottom: #549f8c; }
  h1 .hl-2, .offer .hl-2 { --sh-top: #5aa895; --sh-bottom: #357d6c; }
}
@keyframes shallows {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 0.6em 0.1em, -0.5em 0, 0.4em -0.1em, 1.3em 0, -0.9em 0, 0 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) { h1 .hl, .offer .hl { animation: none; } }
h1 .hl, .offer .hl { color: var(--accent); }   /* where text clipping is unsupported */
/* The offer, directly under the headline: the one sentence a stranger
   needs, with "free" lit like the phrase above it (Garrett, 12 Sep).
   LICENSING 2c: one whole session converts, and the report is free and
   uncapped on every session in the library. */
/* the second clause is its own line: two statements, not one long one
   (Garrett, 12 Sep) */
.offer .clause { display: block; }

.offer {
  margin: 0 0 24px;
  max-width: 34rem;
  text-wrap: balance;   /* two lines of even length, not a long one and a stub */
  font: 620 1.3125rem/1.4 var(--sans);
  color: var(--text);
}
@media (max-width: 860px) { .offer { font-size: 1.1875rem; } }
/* On a phone the wordmark and its line do not fit side by side, and
   "Pro Tools to REAPER" broke after "to". Stack them instead. */
@media (max-width: 620px) {
  .kicker { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
  .kicker .pmark { height: 46px; vertical-align: 0; margin-right: 0; }
  .kicker .k-sub { white-space: nowrap; }
}

/* Side by side: the pairs the page is built around (Garrett, 12 Sep:
   "just go straight into screenshots"). Until the real pairs are shot
   (SCREENSHOTS.md, SHOWCASE-SESSIONS.md) each pane is a dashed slot saying
   what goes in it, at the shape the screenshot will take, so the page
   never pretends to have an image it does not have. */
/* The pairs are the argument, so they get the full width of the work
   area rather than the 44rem reading measure the prose keeps. */
#side-by-side { max-width: none; }
#side-by-side h2, .shots-note { max-width: 44rem; }
.pairs { display: grid; gap: 34px; margin-top: 26px; }
.pair { margin: 0; min-width: 0; }
.pair .panes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pane {
  aspect-ratio: 16 / 10;
  min-width: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 12px 14px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  font-size: 0.78rem; line-height: 1.45; color: var(--faint);
}
.pane b { display: block; font-size: 0.8125rem; color: var(--muted); font-weight: 620; margin-bottom: 2px; }
.pair figcaption { margin-top: 12px; font-size: 0.9375rem; line-height: 1.55; color: var(--text); max-width: 46rem; }
.shots-note { margin-top: 26px; color: var(--faint); font-size: 0.9375rem; }
@media (max-width: 620px) { .pair .panes { grid-template-columns: minmax(0, 1fr); } }

.lead {
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--text);
  max-width: 36rem;
}
.hero .aside { max-width: 34rem; }

h2 {
  margin: 0 0 18px;
  font: 760 clamp(1.5rem, 2.4vw, 1.9rem)/1.15 var(--display);
  font-stretch: var(--stretch-display);
  letter-spacing: -0.018em;
  color: var(--text);
}

code {
  font-family: var(--mono);
}
code {
  font-size: 0.82em;
  padding: 0.14em 0.4em;
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
}

/* Rules between sections: the sliding bar laid on its side, held still.
   Garrett, 10 Sep: they "should not actually animate at all. They should all
   have that light gradient on it at center and be slightly less than full
   brightness in the middle as if the cursor is somewhat close to it." So the
   light is fixed at the center, at the brightness the old pointer-following
   version showed about 75 px from the cursor. */
.rule {
  position: relative;
  height: 1px;
  max-width: 44rem;
  background: var(--border);
}
.rule::after {
  content: "";
  position: absolute;
  inset: -1px 0;
  opacity: 0.72;
  background: radial-gradient(260px 3px at 50% 50%, var(--accent), rgba(var(--accent-rgb), 0.35) 38%, rgba(var(--accent-rgb), 0) 100%);
}

/* ---- rows, the queue's own ---- */
.rows { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 8px; }
.rows li {
  display: grid;
  grid-template-columns: 7px 1fr;
  column-gap: 14px;
  align-items: baseline;
  padding: 12px 16px 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: background-color 150ms ease-out, border-color 150ms ease-out;
}
.rows li:hover { background: var(--hover); border-color: var(--border-strong); }
.rows .ok {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok);
  transform: translateY(-1px);
}
.rows .t { font-weight: 600; color: var(--text); font-size: 0.9375rem; }
.rows .s { grid-column: 2; color: var(--muted); font-size: 0.875rem; line-height: 1.5; }

/* ---- the email button: quiet on purpose. Garrett, 10 Sep: no glow, and it
   should not look like the app's Convert key at all. An outline that takes
   the accent on hover, in sentence case. ---- */
.key-slot { margin-top: 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.cta {
  display: inline-block;
  padding: 11px 20px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font: 600 0.9375rem/1 var(--sans);
  color: var(--text);
  text-decoration: none;
  transition: border-color 150ms ease-out, color 150ms ease-out, background-color 150ms ease-out;
}
.cta:hover { border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb), 0.06); }
.cta:active { background: rgba(var(--accent-rgb), 0.12); }
.cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.consequence { margin: 0 !important; font-size: 0.75rem; color: var(--faint) !important; }

footer {
  max-width: 44rem;
  padding-top: 26px;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--faint);
}
footer p { margin: 0; }

a { color: var(--accent); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

::selection { background: var(--accent-dim); color: var(--text); }


/* ---- narrow screens: the rail becomes a masthead ---- */
@media (max-width: 860px) {
  .window { display: block; }
  .rail {
    position: static;
    height: auto;
    padding: 22px 22px 18px;
    background: var(--rail);
  }
  .index, .bar { display: none; }
  .rail-foot {
    margin-top: 18px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 18px;
  }
  .entity span { display: inline; }
  .entity span + span::before { content: "· "; }
  main { padding: 0 22px 48px; }
  section { padding: 44px 0 40px; }
  .hero { padding-top: 52px; }
  .lead { font-size: 1.125rem; }
}

/* a phrase that must not break across lines */
.nb { white-space: nowrap; }

/* Everything it carries: one block of text, not a list of bullets, with a
   teal dot between each thing (Garrett, 12 Sep: "laid out in a block with
   those teal dots separating each one but it's like just a big block of
   text in a sensible order"). The order is the order you would walk a
   session: tracks, routing, plug-ins, automation, clips, MIDI, tempo,
   colors, then the file itself. Every line comes from TRANSFERS.md, and
   only from the rows marked VERIFIED or WRITTEN. */
.carries { max-width: 62rem; margin: 0 auto; padding: clamp(30px, 6vh, 56px) 0 0; }
/* the rail layout holds every other section to a reading measure; this
   one wants the width, like the screenshot pairs */
#carries { max-width: none; }
#carries h2 { max-width: 44rem; }
.carries h2 { text-align: center; }
.carries .run {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.85;
  /* justified, so the block reads as a block: both edges straight, the
     last line centered under them (Garrett, 12 Sep: "make the edges all
     line up straight"). Word spacing does the stretching -- nothing is
     hyphenated, and the dots keep the rhythm even where a line is loose. */
  text-align: justify;
  text-align-last: center;
  hyphens: none;
}
.carries .run span::after {
  content: "·";
  margin: 0 0.45em;
  color: var(--accent);
  font-weight: 700;
}
.carries .run span:last-child::after { content: none; }
.carries-note {
  margin: 20px auto 0;
  max-width: 40rem;
  text-align: center;
  color: var(--faint);
  font-size: 0.9375rem;
}
.carries-note em { font-style: normal; color: var(--muted); font-weight: 650; }

/* "Not yet." -- the same block, turned down: the same dots, the same
   justification, a dimmer ink, because it is the honest other half rather
   than the argument. */
.notyet .run { color: var(--faint); }
.notyet .run span::after { color: var(--accent-dim); }