/* songling.app — the app's own palette and typefaces, self-hosted.
   Built to the 2026-09-20 research: short pages that fit one screen where
   there is room and scroll freely where there isn't; motion only where it
   shows the product working; nothing loaded from anyone else's server. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 200 800; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900; font-display: swap; font-style: normal;
}
/* the metrics of the face that stands in while Inter loads, so no line of
   text jumps when the real one arrives */
@font-face {
  font-family: "Inter Fallback";
  src: local("Helvetica Neue"), local("Arial");
  size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%;
}

:root {
  --bg: #161618;
  --card: #1F1F23;
  --raised: #26262B;
  --hairline: #2C2C31;
  --line-strong: #3A3A42;
  --text: #ECE8DF;
  --muted: #A29D93;
  --faint: #6E6A62;
  --amber: #E8B54B;
  --amber-ink: #161618;
  /* the app's own feeling colours, used here as the accents they are there */
  --longing: #C09578;
  --melancholy: #66779B;
  --triumph: #F0B62E;
  --tender: #F2A0B5;
  --dread: #3C464B;
  --hope: #FFDD82;
  --defiance: #E06565;
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --ui: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pad: 24px;
  --ease: cubic-bezier(.23, 1, .32, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* a display rule further down must never outrank the hidden attribute:
   that is how a clip nobody can see still holds its space open */
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--ui); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-rows: auto 1fr auto;
}
a { color: var(--amber); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; margin: 0; text-wrap: balance; }
p { margin: 0 0 12px; }

.wrap { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 var(--pad); }
.narrow { max-width: 720px; }

/* ── the rail ────────────────────────────────────────────────────────── */
header.top { border-bottom: 1px solid var(--hairline); background: var(--bg); }
header.top .wrap { display: flex; align-items: center; gap: 18px; height: 58px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-family: var(--display); font-weight: 600; font-size: 17px; view-transition-name: brand; }
.brand:hover { text-decoration: none; }
.brand img { width: 28px; height: 28px; display: block; }
.brand em { font-style: normal; color: var(--amber); }
header.top nav { margin-left: auto; display: flex; gap: 20px; align-items: center; font-size: 14.5px; }
header.top nav a { color: var(--muted); }
header.top nav a:hover, header.top nav a[aria-current="page"] { color: var(--text); text-decoration: none; }
header.top nav a[aria-current="page"] { font-weight: 500; }
header.top .btn { padding: 7px 15px; font-size: 14px; }
@media (max-width: 780px) { header.top nav a:not(.btn) { display: none; } }

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 9px; font-family: var(--ui);
  font-size: 15px; font-weight: 500; padding: 11px 20px; border-radius: 11px;
  border: 1px solid var(--line-strong); background: var(--raised); color: var(--text);
  cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease), scale .1s var(--ease);
}
.btn:hover { border-color: var(--muted); text-decoration: none; }
.btn:active { scale: .97; }
.btn.primary { background: var(--amber); border-color: var(--amber); color: var(--amber-ink); font-weight: 600; }
.btn.primary:hover { background: #F0C266; border-color: #F0C266; }
.btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.under { font-size: 13px; color: var(--faint); margin: 10px 0 0; }

/* ── a page that fits one screen where there is room for it ──────────── */
main { display: flex; flex-direction: column; justify-content: center; padding: 30px 0; }
@media (max-height: 760px) { :root { --pad: 20px; } main { padding: 18px 0; } }
/* ── hero ────────────────────────────────────────────────────────────── */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 46px; align-items: center; }
@media (max-width: 980px) { .hero { grid-template-columns: 1fr; gap: 28px; } }
.hero h1 { font-size: clamp(30px, 1.9vw + 2.4svh, 50px); line-height: 1.04; letter-spacing: -0.02em; margin-bottom: 14px; }
.hero h1 em { font-style: normal; color: var(--amber); }
.hero .says { font-size: clamp(15px, .45vw + .9svh, 17.5px); color: var(--muted); max-width: 46ch; margin-bottom: 16px; }
.hero .where { font-size: 13px; color: var(--faint); letter-spacing: .02em; margin-bottom: 18px; }
.hero .cta { display: flex; gap: 11px; flex-wrap: wrap; align-items: center; }

/* ── the app's own furniture ──────────────────────────────────────────
   These are not impressions of Songling's cards: the sizes, colours, radii
   and type below were read off the running app (2026-09-20) so a card here
   is drawn the way a card is drawn there. */
.stage { background: #17171C; border: 1px solid #26262E; border-radius: 14px; padding: 14px; position: relative; }
.stage .bar {
  display: flex; align-items: center; gap: 8px; background: #1F1F25;
  border: 1px solid #2C2C34; border-radius: 9px; padding: 8px 12px; font-size: 13px; color: var(--muted);
}
.stage .bar .typed { color: var(--text); }
.stage .bar .caret { display: inline-block; width: 1.5px; height: 14px; background: var(--amber); translate: 0 2px; }
.stage .found { font-size: 8.5px; letter-spacing: .5px; text-transform: uppercase; color: #9BBB58; margin: 13px 2px 7px; }
.cards { display: grid; gap: 8px; }

/* a progression card */
.pcard {
  background: #17171C; border: 1px solid #26262E; border-radius: 12px; padding: 12px 14px;
  box-shadow: inset 3px 0 0 0 color-mix(in srgb, var(--tone, #9BBB58) 65%, transparent);
  opacity: 0; translate: 0 6px;
  transition: opacity .3s var(--ease), translate .3s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.pcard.in { opacity: 1; translate: 0 0; }
.pcard.lit { border-color: var(--amber); box-shadow: inset 3px 0 0 0 color-mix(in srgb, var(--tone, #9BBB58) 65%, transparent), 0 0 0 1px color-mix(in srgb, var(--amber) 30%, transparent); }
.pcard .kind { font-size: 8.5px; letter-spacing: .5px; color: #A9B780; text-transform: uppercase; }
.pcard .name { font-family: var(--display); font-size: 13.5px; font-weight: 600; color: var(--text); margin-top: 1px; }
/* a chord row, wherever it appears — inside a card or on its own */
.rns { display: flex; gap: 5px; flex-wrap: wrap; }
.pcard .rns { margin-top: 8px; }

/* a chord chip: the numeral over the chord as it is spelled in this key,
   in a box tinted with the card's own feeling colour */
.rn {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  background: color-mix(in srgb, var(--tone, #9BBB58) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--tone, #9BBB58) 34%, transparent);
  border-radius: 9px; padding: 4px 10px 5px; min-width: 40px;
  transition: background .12s var(--ease), scale .12s var(--ease);
}
.rn b {
  font-family: var(--display); font-size: 15px; font-weight: 500; letter-spacing: -.2px;
  color: color-mix(in srgb, var(--tone, #9BBB58) 78%, white);
}
.rn small { font-family: var(--ui); font-size: 9.5px; font-weight: 400; color: var(--muted); }
.rn.on { background: color-mix(in srgb, var(--tone, #9BBB58) 30%, transparent); scale: 1.05; }

/* the feelings, as the app pills them */
.pills { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 9px; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--text);
  border: 1px solid #34343C; border-radius: 7px; padding: 2px 9px 2px 7px;
}
.pill i { width: 6px; height: 6px; border-radius: 99px; background: var(--dot); }
/* the weighted tags underneath */
.tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 7px; }
.tag {
  font-size: 9px; padding: 1.5px 8px; border-radius: 99px;
  background: color-mix(in srgb, var(--tone, #9BBB58) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--tone, #9BBB58) 34%, transparent);
  color: color-mix(in srgb, var(--tone, #9BBB58) 70%, white);
}
.stage .reach { font-size: 11px; color: #8F8C82; line-height: 1.5; margin: 11px 2px 0; min-height: 3.2em; }
.stage .reach b { color: #F1ECE2; font-weight: 600; font-size: 11.5px; }
.stage .pause {
  position: absolute; right: 12px; top: 12px; width: 26px; height: 26px; border-radius: 8px;
  border: 1px solid #2C2C34; background: color-mix(in srgb, #17171C 70%, transparent);
  color: var(--muted); font-size: 10px; display: grid; place-items: center; cursor: pointer;
}
.stage .pause:hover { color: var(--text); border-color: var(--line-strong); }

/* ── counts ──────────────────────────────────────────────────────────── */
.counts { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 20px; }
.counts > div { display: flex; align-items: baseline; gap: 7px; }
.counts .n { font-family: var(--display); font-size: 20px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.counts .what { font-size: 13px; color: var(--faint); }

/* ── tour tabs ───────────────────────────────────────────────────────── */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.tabs button {
  font: inherit; font-size: 14px; padding: 8px 16px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--hairline); background: transparent; color: var(--muted);
  transition: color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
}
.tabs button:hover { color: var(--text); }
.tabs button[aria-selected="true"] { color: var(--amber-ink); background: var(--amber); border-color: var(--amber); font-weight: 600; }
/* All four panels live in ONE grid cell, so the box is always as tall as the
   tallest of them and switching tabs moves nothing on the page. The inactive
   ones keep their space but are invisible, out of the tab order and out of
   the accessibility tree (visibility + inert), so nothing jumps and nothing
   is read out twice. */
.panels { display: grid; }
.panel {
  grid-area: 1 / 1;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 34px; align-items: center;
  opacity: 0; visibility: hidden; transition: opacity .18s var(--ease);
}
.panel.is-on { opacity: 1; visibility: visible; }
@media (max-width: 900px) { .panel { grid-template-columns: 1fr; gap: 22px; } }
.panel h2 { font-size: clamp(21px, 1.2vw + 1.4svh, 30px); margin-bottom: 10px; }
.panel p { color: var(--muted); max-width: 54ch; font-size: 15px; }
.panel .detail { font-size: 13px; color: var(--faint); border-top: 1px solid var(--hairline); padding-top: 10px; margin-top: 14px; }

/* a frame for a clip; until one exists it holds the app's own furniture
   rather than an empty box */
.frame { background: var(--card); border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden; position: relative; }
.frame video, .frame img { display: block; width: 100%; height: auto; }
.frame figcaption { font-size: 12px; color: var(--faint); padding: 9px 13px; border-top: 1px solid var(--hairline); }

/* ── platform cards ──────────────────────────────────────────────────── */
.platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 16px; margin: 22px 0 6px; }
.platform { background: var(--card); border: 1px solid var(--hairline); border-radius: 14px; padding: 20px; }
.platform.here { border-color: var(--line-strong); }
.platform h3 { font-size: 18px; margin-bottom: 3px; }
.platform .req { font-size: 12.5px; color: var(--faint); margin: 0 0 14px; }
.platform .ver { font-size: 12px; color: var(--faint); margin: 10px 0 0; }
.platform .yours { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--amber); display: block; margin-bottom: 6px; }

/* ── rows, prose ─────────────────────────────────────────────────────── */
ul.rows { list-style: none; margin: 16px 0 0; padding: 0; }
ul.rows li { padding: 11px 0; border-top: 1px solid var(--hairline); color: var(--muted); font-size: 14.5px; }
ul.rows li b { color: var(--text); font-weight: 500; }
.prose h1 { font-size: clamp(27px, 1.6vw + 1.8svh, 38px); margin-bottom: 8px; }
.prose .when { color: var(--faint); font-size: 13px; margin: 0 0 24px; }
.prose h2 { font-size: 19px; margin: 26px 0 8px; }
.prose h3 { font-size: 15px; margin: 18px 0 4px; font-weight: 500; color: var(--text); }
.prose p, .prose li { color: var(--muted); }
.prose ul { margin: 0 0 12px; padding-left: 20px; }
.prose li { margin-bottom: 6px; }
.prose strong { color: var(--text); font-weight: 500; }
.lede { font-size: 17px; color: var(--text); max-width: 60ch; }

/* ── footer ──────────────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--hairline); padding: 18px 0; }
footer .wrap { display: flex; gap: 14px 24px; flex-wrap: wrap; align-items: baseline; }
footer, footer a { font-size: 13px; color: var(--faint); }
footer a:hover { color: var(--muted); }
footer .who { margin-left: auto; }
@media (max-width: 620px) { footer .who { margin-left: 0; } }

/* ── less room: the short-laptop pass, last so it wins ──────────────── */
/* the short-laptop pass: a 1280x720 machine gives about 620px of page, and
   that is the size everything above has to survive in */
@media (max-height: 700px) {
  main { padding: 12px 0; }
  .hero { gap: 30px; }
  .hero h1 { font-size: clamp(25px, 1.4vw + 2svh, 38px); margin-bottom: 10px; }
  .hero .says { margin-bottom: 12px; }
  .hero .where { margin-bottom: 13px; }
  .counts { margin-top: 14px; gap: 18px; }
  .stage { padding: 12px; }
  .stage .found { margin: 10px 2px 7px; }
  .pcard { padding: 8px 11px; }
  .stage .reach { min-height: 2.6em; margin-top: 9px; }
  ul.rows { margin-top: 10px; }
  ul.rows li { padding: 8px 0; }
  .under { margin-top: 8px; }
}
/* On a shorter screen the demo sheds detail from the bottom up rather than
   pushing the buttons off the page: first the weighted tags, then the third
   find. A card keeps its chords and its feelings at every size. */
@media (max-height: 900px) and (min-width: 980px) {
  .tags { display: none; }
}
@media (max-height: 800px) and (min-width: 980px) {
  .stage { padding: 12px; }
  .pcard { padding: 10px 12px; }
  .stage .reach { min-height: 2.4em; margin-top: 9px; }
  .pills { margin-top: 7px; }
}
@media (max-height: 720px) and (min-width: 980px) {
  .cards .pcard:nth-child(3) { display: none; }
}

/* ── motion: between pages, and only if it is wanted ─────────────────── */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ── help: one DAW at a time ──────────────────────────────────────────────
   A reference page is long by nature, and the reader wants ONE of these
   seven. Each stays shut until it is asked for. */
.prose details {
  border: 1px solid var(--hairline); border-radius: 10px;
  padding: 0 14px; margin: 0 0 8px; background: var(--card);
}
.prose details[open] { padding-bottom: 6px; }
.prose summary {
  cursor: pointer; padding: 11px 0; color: var(--text);
  font-weight: 500; list-style: none;
}
.prose summary::-webkit-details-marker { display: none; }
.prose summary::before {
  content: "›"; display: inline-block; width: 16px;
  color: var(--faint); transition: transform 140ms ease;
}
.prose details[open] summary::before { transform: rotate(90deg); }
.prose summary:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 6px; }
.prose details ol { margin: 0 0 10px; padding-left: 32px; color: var(--muted); }
.prose details li { margin-bottom: 6px; }
.prose .paths { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 14px; }
.prose .paths th { text-align: left; font-weight: 500; color: var(--text); padding: 7px 12px 7px 0; }
.prose .paths td { color: var(--muted); padding: 7px 12px 7px 0; border-top: 1px solid var(--hairline); }
.prose .paths td code { font-size: 12.5px; word-break: break-all; }
@media (prefers-reduced-motion: reduce) { .prose summary::before { transition: none; } }

/* ── the price, on the download page ──────────────────────────────────────
   One line, stated plainly. The figure carries the weight; the sentence
   under it answers the only question a price raises when there is no demo
   button next to it — can I try it first. */
.price { margin: 18px 0 10px; font-size: 15px; color: var(--muted); }
.price strong { font-family: var(--display); font-size: 30px; font-weight: 600; color: var(--text); margin-right: 4px; }
.price span { display: block; margin-top: 6px; font-size: 13.5px; color: var(--faint); }
.buy { margin: 4px 0 14px; }
.buy span { display: block; margin-top: 8px; font-size: 13.5px; color: var(--faint); }