/*
 * Octotune's site: the pages outside the app (tools/site, docs/site.md).
 * Paper, ink and the sea (docs/brand.md, docs/brand-strategy.md §5): every
 * page is parchment from edge to edge, in navy ink with a little teal;
 * the five-line staff and noteheads as ornament; buttons shaped like the
 * front of a piano key. The home page is concept B, "Two hands, one piano":
 * the grown-up's part in print and cut paper, the child's in the picture book's
 * colours, one keyboard under both.
 *
 * Light and dark are each drawn, not inverted. At night the paper stays
 * paper, turned down a little as under a lamp, its ink still navy; only the
 * home page's bands on the room (how it works, the songbooks) go dark
 * (Adult's night, #0f1117). Two faces, served from the site
 * itself: no script, no font service, no images but the site's own files.
 *
 * Text colours are chosen for contrast (4.5:1 for body text, 3:1 for large
 * type): the brand teal itself is for surfaces and pictures; links, small
 * teal text and the keys use its darker shades.
 *
 * A relative url() names a file of the site's own (build.ts CSS_ASSETS), which
 * the build writes under /site/ by its contents' hash and names here.
 */

/*
 * Fraunces (optical size 9–144, weight 300–900) for titles; Atkinson
 * Hyperlegible Next (weight 200–800, and an italic) for everything else.
 * WOFF2 first (tools/site/fonts, cut to this unicode-range), then the app's
 * own WOFF (public/fonts). Latin only, as the files are; sharps, flats and
 * arrows come from the fallback in each stack below. `swap`: the page reads
 * at once in the fallback, never blank.
 */
@font-face {
  font-family: "Fraunces";
  src: url("/site/fonts/fraunces.4c2378c35d.woff2") format("woff2"), url("/fonts/fraunces.woff") format("woff");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2070-209F, U+20AC;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/site/fonts/atkinson-hyperlegible-next.6f5056d260.woff2") format("woff2"), url("/fonts/atkinson-hyperlegible-next.woff") format("woff");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2070-209F, U+20AC;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/site/fonts/atkinson-hyperlegible-next-italic.5ceba7048b.woff2") format("woff2"), url("/fonts/atkinson-hyperlegible-next-italic.woff") format("woff");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2070-209F, U+20AC;
}

:root {
  --teal: #2fb5a3;
  --teal-dark: #1d8f81;
  --teal-behind: #177a6e;
  --teal-deep: #146b61;
  --teal-shine: #8fe3d5;
  --teal-wash: rgba(29, 143, 129, 0.12);
  --orange: #f28a2e;
  --coral: #e8704f;
  --navy: #16334a;
  --cream: #f6efdd;

  /* The room behind the paper, and the paper itself. */
  --room: #e9dcc0;
  --sheet: #f6eedb;
  --leaf: #fbf6ea;
  --edge: #d6c7a6;
  --ink: var(--navy);
  --pencil: #8f8a7f;
  --hair: rgba(22, 51, 74, 0.16);
  --shadow-leaf: 0 1px 2px rgba(80, 50, 20, 0.1), 0 18px 40px -22px rgba(80, 50, 20, 0.45);
  /* What sits on the room itself (by day the room is paper too). */
  --on-room: var(--navy);
  --on-room-muted: #55616b;
  --room-focus: var(--navy);

  /* The words' tokens, as every page uses them: all on paper. */
  --bg: var(--sheet);
  --surface: var(--leaf);
  --line: #e0d3b5;
  --text: var(--navy);
  --muted: #4f5d69;
  --link: #0f6b60;
  --accent: var(--teal-deep);
  --accent-soft: rgba(47, 181, 163, 0.18);
  --paper: #fffdf7;
  --paper-ink: var(--navy);
  --todo: #fde7c8;
  --todo-line: var(--orange);
  --radius: 20px;
  --radius-sm: 14px;
  --shadow: 0 1px 2px rgba(22, 51, 74, 0.08), 0 8px 24px -12px rgba(22, 51, 74, 0.28);
  --measure: 44rem;
  /* A page's column to read (about seventy characters of the 18 px body to the line), and the room its pictures step out to. */
  --read: 38rem;
  --wide: 62rem;
  --wrap: 1160px;
  --gutter: clamp(16px, 4vw, 40px);

  /* Type: two roles (brand-strategy §5.3), each face first, then a fallback close to it that has the symbols it leaves out. */
  --font-ui: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", "Segoe UI Symbol", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Segoe UI Symbol", serif;

  /* Flat action surfaces match the app: soft equal corners, no bevel,
   * elevation or press displacement. Retain contrast and focus rings. */
  --key-bg: var(--teal-behind);
  --key-bg-hover: var(--teal-deep);
  --key-text: #ffffff;
  --key-radius: 10px;
  --key-radius-big: 12px;
  --key-shadow: 0 0 0 0 transparent;
  --key-shadow-pressed: 0 0 0 0 transparent;
  --key-press: 0px;
  --key-highlight: inset 0 0 0 0 transparent;
  --key-outline: var(--teal-behind);
  --key-outline-text: var(--teal-deep);
  --key-outline-bg: rgba(255, 253, 247, 0.6);
  --key-black-bg: var(--navy);
  --key-black-hover: #0d2233;
  --key-black-text: #ffffff;

  /* The focus ring: navy on the paper (11:1 and more). What sits on a dark ground sets its own (--room-focus, the coral orange). */
  --focus-ring: var(--navy);
  color-scheme: light dark;
}

/*
 * Japanese (docs/i18n.md, "Fonts"): the faces are Latin only, so kana and
 * kanji come from the device's own faces, a gothic under Atkinson and a
 * mincho under Fraunces, as the app does (src/styles/fonts.css). No file is
 * fetched. Korean and Chinese take the same shape under their own :lang().
 */
:root:lang(ja),
[lang]:lang(ja) {
  --font-ui: "Atkinson Hyperlegible Next", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", "Yu Gothic UI", "Yu Gothic", YuGothic, Meiryo, "Noto Sans JP", "Noto Sans CJK JP", system-ui, -apple-system, "Segoe UI", "Segoe UI Symbol", Roboto, sans-serif;
  --font-display: "Fraunces", "Hiragino Mincho ProN", "BIZ UDPMincho", "Yu Mincho", YuMincho, "Noto Serif JP", "Noto Serif CJK JP", "Iowan Old Style", "Palatino Linotype", Georgia, "Segoe UI Symbol", serif;
}

/* The night: the room goes dark; the paper stays paper, turned down a little, its ink still navy. */
@media (prefers-color-scheme: dark) {
  :root {
    --room: #0f1117;
    --sheet: #e9dfc7;
    --leaf: #efe6d0;
    --edge: #b9aa8a;
    --line: #cfc09f;
    --muted: #4a5663;
    --on-room: #efe8d8;
    --on-room-muted: #a3adb8;
    --room-focus: var(--orange);
    --paper: #f6efdd;
    --key-outline-bg: rgba(239, 230, 208, 0.9);
    --key-shadow: 0 0 0 0 transparent;
    --key-shadow-pressed: 0 0 0 0 transparent;
    --shadow-leaf: 0 1px 2px rgba(0, 0, 0, 0.5), 0 24px 50px -20px rgba(0, 0, 0, 0.9);
    --focus-ring: var(--navy);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 16px;
}

body {
  margin: 0;
  background: var(--room);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: clip;
}

a {
  color: var(--link);
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 6px;
}

img,
svg {
  max-width: 100%;
}

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

.skip {
  position: absolute;
  /* Physical on purpose: hidden off the left edge until focused. */
  left: -999px;
  top: 8px;
  z-index: 20;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--leaf);
  color: var(--ink);
  font-weight: 700;
}

.skip:focus {
  /* Physical on purpose: hidden off the left edge until focused. */
  left: 8px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* The mark brings its own small navy tile, rounded (config.ts SITE_MARK): the light keys need it on the parchment, and on the navy footer it melts into the ground. */
.mark {
  display: block;
}

/* Paper: the grain over a warm gradient. Anything with .paper is a sheet, in navy ink, by day and by night. */
.paper {
  --focus-ring: var(--navy);
  background-color: var(--sheet);
  background-image: url("/site/paper.ed735946ff.svg"), radial-gradient(120% 90% at 50% 0, rgba(255, 252, 242, 0.7), rgba(255, 252, 242, 0) 60%), radial-gradient(140% 120% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(120, 84, 40, 0.12));
  color: var(--ink);
}

/* On the room: the ring and the words follow the room, dark at night. */
.on-room {
  --focus-ring: var(--room-focus);
  color: var(--on-room);
}

/* --- The parchment bar: Adult's Paper top bar in the app, on every page ----------------- */

.bar {
  position: relative;
  z-index: 5;
  border-bottom: 1px solid var(--hair);
  background-color: #f3e8cf;
  background-image: url("/site/paper.ed735946ff.svg");
}

.bar__row {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: var(--wrap);
  min-height: 61px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.bar__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}

.bar__name {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 650;
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: -0.005em;
}

.bar__nav {
  margin-inline-end: auto;
}

.bar__nav ul {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bar__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  border-bottom: 2px solid transparent;
  color: var(--ink);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
}

/* The section the page is in, underlined in teal, as the app's top bar marks its tab. */
.bar__nav a:hover,
.bar__nav a[aria-current="page"] {
  border-bottom-color: var(--teal-dark);
}

.bar__nav a[aria-current="page"] {
  border-bottom-width: 3px;
}

.bar__end {
  display: flex;
  align-items: center;
  gap: 12px;
}

.signin {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  color: var(--teal-deep);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
}

.signin:hover {
  text-decoration: underline;
}

/*
 * A grown-up signed in on this device (r.js sets <html data-signed-in> in the
 * head, before anything is drawn): "I already have an account" is never
 * shown, and the Sign in links wait, out of sight but keeping their place,
 * until the script has made them "Account" (data-signed-in="shown").
 */
[data-signed-in] [data-sign-in-only] {
  display: none;
}

[data-signed-in=""] a[data-account] {
  visibility: hidden;
}

/*
 * A phone or a tablet: the name and the two ways in on the first row, the
 * sections on a row of their own that never wraps. All five fit from
 * 360 px; narrower, the row scrolls sideways, running to the screen's
 * edges so the last link is cut there, which says so.
 */
@media (max-width: 900px) {
  .bar__row {
    flex-wrap: wrap;
    gap: 0 12px;
    padding-top: 6px;
  }

  /* The name, the mark's, gives way first: where a longer language's Sign in and Open Octotune leave
     it no room on the first row, it folds out of sight under the mark (the link's label still says
     Octotune), and the two ways in keep their row. A flex basis of 0 lets the row break as if the
     name took no room; the brand then grows back to its full width wherever that fits (English, always).
     Its padding holds the mark where the old centering did; a name that wrapped sits under the clip. */
  .bar__brand {
    flex: 1 1 0;
    flex-wrap: wrap;
    align-content: flex-start;
    row-gap: 20px;
    box-sizing: border-box;
    min-width: 44px;
    max-width: max-content;
    height: 44px;
    padding-block: 4px;
    overflow: clip;
    margin-inline-end: auto;
  }

  .bar__nav {
    order: 3;
    flex: 1 0 100%;
    min-width: 0;
    margin: 0 calc(-1 * var(--gutter));
    border-top: 1px solid var(--hair);
  }

  .bar__nav ul {
    gap: 0;
    padding: 0 calc(var(--gutter) - 8px);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .bar__nav ul::-webkit-scrollbar {
    display: none;
  }

  .bar__nav li {
    flex: none;
  }

  .bar__nav a {
    padding: 0 8px;
  }
}

@media (max-width: 420px) {
  .bar__brand {
    gap: 20px 8px;
    /* The smaller mark, held in the middle of the 44 px row. */
    padding-block: 6px;
  }

  .bar__name {
    font-size: 1.2rem;
  }

  .bar .mark {
    width: 32px;
    height: 32px;
  }

  .bar__end {
    gap: 6px;
  }

  .signin {
    font-size: 0.88rem;
  }

  .bar .key--small {
    padding: 0 10px;
    font-size: 0.85rem;
  }
}

/* --- The footer, on the piano's navy, under the keys' edge ------------------------------- */

.keyslip {
  position: relative;
  height: 34px;
  background: linear-gradient(#0f1117 0 0) 0 0 / 100% 4px no-repeat, repeating-linear-gradient(90deg, #fffdf7 0 38px, #cfc2a6 38px 40px);
}

/* The black keys, in their twos and threes. */
.keyslip::after {
  content: "";
  position: absolute;
  inset: 0 0 12px;
  background: repeating-linear-gradient(90deg, transparent 0 26px, #16334a 26px 50px, transparent 50px 66px, #16334a 66px 90px, transparent 90px 146px, #16334a 146px 170px, transparent 170px 186px, #16334a 186px 210px, transparent 210px 226px, #16334a 226px 250px, transparent 250px 280px);
}

.foot {
  --focus-ring: var(--orange);
  padding: 48px var(--gutter) 28px;
  background: var(--navy);
  color: #efe8d8;
}

.foot a {
  color: #efe8d8;
}

.foot__row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
  gap: 32px;
  max-width: var(--wrap);
  margin: 0 auto;
}

.foot__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 1.4rem;
  line-height: 1;
}

.foot__name p {
  margin: 0 0 0.8em;
}

.foot__promise {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.4;
}

.foot__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.foot h2 {
  margin: 0 0 8px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1rem;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
}

.foot ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.foot li a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  font-weight: 600;
  text-decoration: none;
}

.foot li a:hover {
  text-decoration: underline;
}

.foot__small {
  max-width: var(--wrap);
  margin: 28px auto 0;
  color: #c9d0d8;
  font-size: 0.875rem;
}

@media (max-width: 760px) {
  .foot__row {
    grid-template-columns: 1fr;
  }

  .foot__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- A page: the home page's parchment, edge to edge --------------------------------------- */

/*
 * Every page but the home page is laid out as the home page's paper
 * sections are: parchment from edge to edge (by night too, turned down a
 * little, as the home page's paper is), never a sheet floating on the room.
 * Its title page (the breadcrumb, the h1, the lede) sits over a hairline,
 * as the hero does; then one column to read, about seventy characters to
 * the line, which the pictures that want room (the notes on their staves,
 * the cards) step out of.
 */
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h1 {
  margin: 8px 0 12px;
  font-size: clamp(2rem, 6vw, 3rem);
}

h2 {
  margin: 40px 0 12px;
  font-size: 1.6rem;
}

h3 {
  margin: 24px 0 8px;
  font-size: 1.22rem;
}

.page {
  display: block;
  padding-bottom: clamp(48px, 7vw, 88px);
  font-size: 1.125rem;
  line-height: 1.65;
}

.column {
  width: 100%;
  max-width: calc(var(--read) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.page-head {
  padding: clamp(18px, 3vw, 34px) 0 clamp(30px, 4vw, 46px);
  border-bottom: 1px solid var(--hair);
}

/* The children's pages: the picture book's lighter paper, as the home page's half for children is. */
.page-head--kids {
  --focus-ring: var(--navy);
  background-color: #fdf6e7;
  background-image: radial-gradient(90% 60% at 50% 0, #fffaf0, rgba(255, 250, 240, 0));
}

/* The breadcrumb: a small label, letter-spaced small capitals, as the home page's kickers are. */
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  margin: 0 0 clamp(14px, 2vw, 22px);
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-weight: 700;
  font-size: 1rem;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.07em;
  line-height: 1.3;
}

.crumbs li + li::before {
  content: "›";
  margin-inline-end: 6px;
  color: var(--pencil);
}

.crumbs a {
  color: var(--teal-deep);
  text-decoration: none;
}

.crumbs a:hover {
  text-decoration: underline;
}

.page-head h1 {
  margin: 0;
  font-size: clamp(2.25rem, 5.2vw, 3.5rem);
  font-weight: 680;
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.page-head .lede {
  margin: 18px 0 0;
  font-size: clamp(1.16rem, 1.7vw, 1.3rem);
  line-height: 1.55;
  text-wrap: pretty;
}

.page-head .cast-row {
  margin-top: 0;
}

.page-head__action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 24px 0 0;
}

.page-head__action .app-store-badge {
  margin-inline-start: -13px;
}

/* A big key, as the hero's. */
.page-head__action .button {
  min-height: 52px;
  padding: 0 24px;
  border-radius: var(--key-radius-big);
  font-size: 1.0625rem;
}

.page-body {
  padding-top: clamp(26px, 4vw, 44px);
}

.page-body h2 {
  margin: 56px 0 14px;
  padding-top: 26px;
  border-top: 1px solid var(--hair);
  font-size: clamp(1.6rem, 2.8vw, 2rem);
}

/* The body's first heading sits under the title page's own hairline: no second line. */
.page-body > h2:first-child,
.page-body > section:first-child > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.page-body h3 {
  margin: 30px 0 8px;
  font-size: 1.3rem;
}

.page-body h2 + h3 {
  margin-top: 18px;
}

/* The pictures that want room step out of the column, to the home page's width at most. */
.page-body :is(.notes, .cards, .letters),
.page-body .table-wrap:has(th:nth-child(4)) {
  margin-inline: calc((100% - min(100vw - 2 * var(--gutter), var(--wide))) / 2);
}

.page-body > :first-child {
  margin-top: 0;
}

/* Lists: noteheads for bullets, as on the home page; numbers in the titles' face, in teal. */
.page-body ul:not(.cards, .letters) {
  padding: 0;
  list-style: none;
}

.page-body ul:not(.cards, .letters) > li {
  position: relative;
  margin: 0 0 0.55em;
  padding-inline-start: 28px;
}

.page-body ul:not(.cards, .letters) > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  top: 0.5em;
  width: 13px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink);
  transform: rotate(-22deg);
}

.page-body ol {
  padding-inline-start: 1.7em;
}

.page-body ol > li {
  margin: 0 0 0.55em;
  padding-inline-start: 4px;
}

.page-body ol > li::marker {
  color: var(--teal-deep);
  font-family: var(--font-display);
  font-weight: 650;
}

.lede,
.answer {
  font-size: 1.2rem;
  color: var(--text);
}

/*
 * The long reads (the guides, the FAQ) open with an initial cut from paper:
 * the lede's first letter, in cream, on a square of navy paper laid on a
 * scrap of teal and taped down (homeArt.tsx initialTileFile), in the
 * grown-up's cut paper, as the home page's pictures are. The letter is the
 * page's own text (pages.tsx Lede). The lede holds its float.
 */
.lede--initial {
  display: flow-root;
}

.initial {
  float: inline-start;
  width: 1.5em;
  height: 1.5em;
  margin-block: 0.1em 0;
  margin-inline: -0.04em 0.14em;
  padding-inline-end: 0.08em;
  background: url("/site/initial.1c65d1f11b.svg") 0 0 / 100% 100% no-repeat;
  color: #f6efdd;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 640;
  font-size: 2.9em;
  line-height: 1.44;
  text-align: center;
  text-shadow: 0 1px 1px rgba(5, 11, 18, 0.45);
  transform: rotate(-2deg);
}

.muted {
  color: var(--muted);
  font-weight: 500;
}

.aside,
.byline {
  color: var(--muted);
  font-size: 0.95rem;
}

/* Who wrote it and when: penciled at the foot of the page, as the home page's small asides are. */
.byline {
  margin-top: 56px;
  padding-top: 16px;
  border-top: 1px solid var(--hair);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
}

.tip {
  margin: 24px 0;
  padding: 14px 18px;
  border: 1px solid rgba(29, 143, 129, 0.35);
  border-radius: 4px 4px 14px 14px;
  background: var(--teal-wash);
}

.tip p {
  margin: 6px 0;
}

/* Kept in the page (the build and check:dist count them, and the page stays
   noindex while any is left), but never shown to a visitor: a page waiting
   for its words reads as a shorter page, not as a note to ourselves. Delete
   the display rule to see them while writing. */
.todo-copy {
  display: none;
  margin: 20px 0;
  padding: 12px 16px;
  border: 2px dashed var(--todo-line);
  border-radius: var(--radius-sm);
  background: var(--todo);
}

.todo-copy p {
  margin: 0;
}

/* --- Keys: the front of a piano key ---------------------------------------------------- */

.key,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--key-radius);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform 156ms cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow 156ms cubic-bezier(0.2, 0.9, 0.3, 1), background-color 156ms ease;
}

.key,
.button--go {
  background: var(--key-bg);
  color: var(--key-text);
  box-shadow: var(--key-highlight), var(--key-shadow);
}

.key:hover,
.button--go:hover {
  background: var(--key-bg-hover);
}

.key:active,
.button:active {
  transform: translateY(var(--key-press));
}

.key:active,
.button--go:active {
  box-shadow: var(--key-highlight), var(--key-shadow-pressed);
}

/* A secondary action: an outlined key. */
.key--outline,
.button--outline {
  background: var(--key-outline-bg);
  color: var(--key-outline-text);
  box-shadow: inset 0 0 0 2px var(--key-outline), var(--key-shadow);
}

.key--outline:hover,
.button--outline:hover {
  background: var(--leaf);
}

.key--outline:active,
.button--outline:active {
  box-shadow: inset 0 0 0 2px var(--key-outline), var(--key-shadow-pressed);
}

/* A black key. */
.button--dark {
  background: var(--key-black-bg);
  color: var(--key-black-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), var(--key-shadow);
}

.button--dark:hover {
  background: var(--key-black-hover);
}

.key--small,
.button--small {
  padding: 0 14px;
  font-size: 0.95rem;
}

.key--big,
.button--big {
  min-height: 56px;
  padding: 0 26px;
  border-radius: var(--key-radius-big);
  font-size: 1.125rem;
}

.cta-row {
  margin: 24px 0;
}

@media (prefers-reduced-motion: reduce) {
  .key,
  .button {
    transition: none;
  }

  .key:active,
  .button:active {
    transform: none;
  }
}

/* --- Cards and lists ----------------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 14px;
  margin: 20px 0;
  padding: 0;
  list-style: none;
}

/* A card: the home page's guide cards, a staff along the top edge. */
.card__link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 36px 18px 18px;
  border: 1px solid var(--edge);
  border-radius: 6px 6px 18px 18px;
  background: var(--leaf) repeating-linear-gradient(to bottom, rgba(22, 51, 74, 0.22) 0 1px, transparent 1px 4px) no-repeat 18px 16px / calc(100% - 36px) 17px;
  color: var(--ink);
  text-decoration: none;
}

.card__link:hover {
  border-color: var(--teal-dark);
}

.card__title {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 1.2rem;
  line-height: 1.25;
}

.card__text {
  color: var(--muted);
  font-size: 0.95rem;
}

.song-list,
.guide-list {
  padding-inline-start: 1.4em;
}

.song-list li,
.guide-list li {
  margin: 6px 0;
}

.song-list__meta {
  display: block;
  color: var(--muted);
  font-size: 0.92rem;
}

.steps li {
  margin: 6px 0;
}

/* Where to go next: under a hairline, the way on in the home page's "more" links. */
.around {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--hair);
}

.around > h2 {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.around > p a {
  color: var(--teal-deep);
  font-weight: 700;
  text-decoration-thickness: 1.5px;
}

/* --- Tables ---------------------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  margin: 16px 0;
  border: 1px solid var(--edge);
  border-radius: 6px;
  background: var(--surface);
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 10px 14px;
  text-align: start;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

tr:last-child th,
tr:last-child td {
  border-bottom: 0;
}

thead th {
  font-size: 0.9rem;
  color: var(--muted);
}

tbody th {
  font-weight: 750;
}

.facts th {
  width: 9.5rem;
  color: var(--muted);
  font-weight: 700;
}

@media (max-width: 480px) {
  .facts th {
    width: 7.25rem;
  }
}

/* --- Music: notes on the staff, a song's opening, the letters ------------------------ */

.notes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 14px;
  margin: 16px 0;
}

.note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--edge);
  border-radius: 6px 6px 18px 18px;
  background: var(--surface);
  scroll-margin-top: 16px;
}

.note h3 {
  margin: 4px 0 6px;
}

.note dl {
  margin: 0;
  font-size: 0.95rem;
}

/* A small label: letter-spaced small capitals, never capitals. */
.note dt {
  color: var(--muted);
  font-weight: 700;
  font-size: 0.95rem;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.05em;
}

.note dd {
  margin: 0 0 6px;
}

.notation-chart {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-block: 20px;
}

.practice-note {
  display: block;
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.9rem;
}

.notation-chart--keys {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.notation-chart--rests { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.notation-chart--ledger { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 600px) {
  .notation-chart--rests,
  .notation-chart--ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.notation-card {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-align: center;
  background: var(--surface);
}

.notation-card svg {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

.notation-card .staff {
  width: 100%;
  max-width: 160px;
}

.notation-card figcaption { font-size: 0.95rem; line-height: 1.4; }
.notation-label { fill: var(--text); font: 14px var(--font-ui); }
.notation-key { stroke: var(--text); stroke-width: 1; }
.notation-key--white { fill: var(--paper); }
.notation-key--black { fill: var(--text); }
.notation-key--selected { fill: var(--teal-deep); }

.staff {
  flex: none;
  width: 96px;
  height: auto;
  border-radius: var(--radius-sm);
  background: var(--paper);
}

.staff__accidental {
  fill: var(--paper-ink);
  font-size: 22px;
  font-family: var(--font-ui);
}

.opening {
  margin: 24px 0;
}

.opening__art {
  max-width: 36rem;
  padding: 10px 14px;
  border: 1px solid var(--edge);
  border-radius: 6px;
  background: var(--paper);
}

.opening__svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 200 / 60;
}

.opening figcaption {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.92rem;
}

/* The opening's notes, named in its caption: words on the caption's line, not the guides' grid of notes. */
.opening figcaption .notes {
  display: inline;
  margin: 0;
}

.letters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
  gap: 8px;
  padding: 0;
  list-style: none;
}

.letters li {
  padding: 8px 12px;
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.letters__bar {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.letters__notes {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  font-size: 1.3rem;
  font-weight: 850;
}

.letters__note sub {
  /* Physical on purpose: a note name and its octave read left to right. */
  margin-left: 1px;
  color: var(--muted);
  font-size: 0.62em;
  font-weight: 700;
}

.credits {
  padding-inline-start: 1.2em;
}

/* Questions and answers, each under a hairline, the question in the titles' face, as the home page asks them (always open here: the answers are the page). */
.faq__item {
  padding: 14px 0 2px;
  border-top: 1px solid var(--hair);
}

.faq__item h3 {
  margin: 0 0 6px;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.3;
}

.faq__item p {
  margin: 0 0 12px;
}

/* A song's opening (src/components/SongCover.tsx) is the app's engraver's pen: its stylesheet,
   src/styles/engrave.css, is added to this one by build.ts; here, its ink and paper. */
.sg-engr {
  --engr-staff: color-mix(in srgb, var(--paper-ink) 75%, transparent);
  --engr-page: var(--paper);
  --engr-time-font: Georgia, "Times New Roman", serif;
  color: var(--paper-ink);
}

.sg-engr .engr .tuplet {
  fill: currentColor;
  font: italic 700 14px Georgia, "Times New Roman", serif;
  text-anchor: middle;
}

/* The notes on the guides' staves (diagrams.tsx NoteOnStaff), drawn here on paper in both themes. */
.sg-engr__line {
  stroke: var(--paper-ink);
  stroke-width: 0.75;
  opacity: 0.75;
}

.staff .sg-engr__line {
  stroke-width: 1.2;
}

.sg-engr__line--ledger {
  opacity: 1;
}

.sg-engr__ink {
  fill: var(--paper-ink);
}

.sg-engr__paper {
  fill: var(--paper);
}

.sg-engr__clef {
  color: var(--paper-ink);
}

/* --- The home page (landing.tsx): concept B, "Two hands, one piano" -------------------------- */

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* The notes on the hero's staff carry their letters (src/art/PaintedNote.tsx) where the
   staff is wide enough to read them; on a narrower page they would be under 10 px. (The
   rule names the letter alone: it is matched inside each <use>, where .sprite is not above it.) */
@media (max-width: 720px) {
  .pn__letter {
    display: none;
  }
}

.landing h2 {
  margin: 0 0 12px;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
}

.landing .lede {
  max-width: 52ch;
  font-size: clamp(1.06rem, 1.6vw, 1.19rem);
  color: inherit;
}

.band-lede {
  max-width: 60ch;
  font-size: 1.125rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 22px 0 10px;
}

.hero-note {
  max-width: 44ch;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Apple's unmodified badge: 52 px high, with a quarter-height of clear space. */
.app-store-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  padding: 13px;
  line-height: 0;
  border-radius: 8px;
}

.app-store-badge img {
  display: block;
  width: 156px;
  height: 52px;
}

.download-info {
  margin: 10px auto 18px;
  font-size: 0.95rem;
}

/* The catchphrase (config.ts TAGLINE) over the h1. */
.eyebrow {
  margin: 0 0 10px;
  color: var(--teal-deep);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  line-height: 1.3;
}

/* A small label: letter-spaced small capitals, never capitals. */
.kicker {
  margin: 0 0 6px;
  color: var(--teal-deep);
  font-weight: 700;
  font-size: 1rem;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
  line-height: 1.3;
}

.more {
  color: var(--teal-deep);
  font-weight: 700;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.more::after {
  content: " →";
}

.on-room .more {
  color: var(--on-room);
}

/* Not here yet: pencilled in, on a dashed tag. */
.coming {
  display: inline-block;
  margin-inline-start: 8px;
  padding: 1px 8px 2px;
  border: 1.5px dashed var(--pencil);
  border-radius: 3px 3px 9px 9px;
  color: var(--muted);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 0.8rem;
  line-height: 1.4;
  vertical-align: 2px;
  transform: rotate(-1.5deg);
}

/* Noteheads as bullets: a tilted oval before each line. */
.noteheads {
  margin: 0 0 1em;
  padding: 0;
  list-style: none;
}

.noteheads li {
  position: relative;
  margin: 0 0 0.6em;
  padding-inline-start: 28px;
}

.noteheads li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  top: 0.42em;
  width: 14px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink);
  transform: rotate(-22deg);
}

.noteheads--teal li::before {
  background: var(--teal-dark);
}

/* The keyboard: the grown-up's octave is cut paper (homeArt.tsx PaperOctave), the child's the picture book's. */
.keyboard {
  display: block;
  width: 100%;
  height: auto;
}

.kb-w--kid {
  fill: #fffdf7;
  stroke: #e6d9bd;
  stroke-width: 1.5;
}

.kb-b--kid {
  fill: #2b2d42;
}

.kb-b-shine {
  fill: rgba(255, 255, 255, 0.1);
}

.kb-tint {
  opacity: 0.22;
}

.kb-tint--on {
  opacity: 1;
}

/* The hero: the title page of a duet. */
.duet {
  border-bottom: 1px solid var(--hair);
}

.duet__title {
  padding: clamp(24px, 4vw, 52px) var(--gutter) 10px;
  text-align: center;
}

.duet__title .lede,
.duet__title .hero-note {
  margin-inline: auto;
}

.duet__title .actions {
  align-items: center;
  justify-content: center;
}

.hero-signin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 8px;
  font-size: 0.95rem;
}

.part__action {
  margin: 20px 0 24px;
}

.duet h1 {
  margin: 0 0 16px;
  font-size: clamp(2.6rem, 6vw, 4.75rem);
  font-weight: 680;
  line-height: 1.04;
  letter-spacing: -0.02em;
}

/* Over the catchphrase: the family on one piano bench, each player with their own avatar (drawn by src/art/avatar.ts) and name. Small, so the keys stay high. */
.bench {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 14px;
}

.bench__players {
  display: flex;
  justify-content: center;
  gap: clamp(10px, 1.4vw + 6px, 22px);
  margin: 0;
  padding: 0 clamp(8px, 1.2vw + 4px, 18px);
  list-style: none;
}

.bench__players li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--ink);
  font-weight: 700;
  font-size: clamp(0.8125rem, 0.3vw + 0.75rem, 0.9375rem);
  line-height: 1.2;
}

/* Each avatar a round portrait: a hairline and a soft shadow, so the pale backdrops (the staff paper) still read as a disk on the page's paper. */
.bench__face {
  display: block;
  width: clamp(48px, 3vw + 37px, 66px);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(22, 51, 74, 0.13), 0 4px 8px -4px rgba(80, 50, 20, 0.4);
}

.bench__av {
  display: block;
  width: 100%;
  height: auto;
}

.bench__seat {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 3px;
}

.bench__top {
  fill: var(--ink);
}

.bench__leg {
  stroke: var(--ink);
  stroke-width: 6;
  stroke-linecap: round;
}

.duet__art {
  position: relative;
  padding: 10px var(--gutter) 34px;
}

/* The child's half of the page is a little lighter: the picture book's paper. */
.duet__art::before {
  content: "";
  position: absolute;
  /* Physical on purpose: the duet picture: Octo on the low keys (left), the child on the high. */
  inset: 0 0 0 50%;
  background: linear-gradient(rgba(253, 246, 231, 0), rgba(253, 246, 231, 0.96) 90px);
}

.duet__art > * {
  position: relative;
}

.duet__score {
  display: block;
  width: 100%;
  max-width: 1100px;
  height: auto;
  margin: 0 auto;
  color: var(--ink);
}

/* The grown-up's part, printed on its strip of music paper: engraved, crisp, square-ended. */
.d-print {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.4;
}

.d-print-fill {
  fill: var(--ink);
}

.d-kid-line {
  fill: none;
  stroke: #b9ab8d;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.d-clef {
  color: var(--ink);
}

.d-clef--kid {
  color: #8a7d62;
}

.d-part {
  fill: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
}

.d-part--sub {
  fill: var(--muted);
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
}

.duet__kb {
  max-width: 1100px;
  margin: -4px auto 0;
}

.duet__kb .keyboard {
  filter: drop-shadow(0 12px 14px rgba(80, 50, 20, 0.18));
}

.duet__hands {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1100px;
  margin: 10px auto 0;
  color: var(--muted);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
}

.duet__hands span:last-child {
  /* Physical on purpose: the duet picture: Octo on the low keys (left), the child on the high. */
  text-align: right;
}

/* How it works: three white keys, with black keys between them. */
.keys-band {
  padding: 56px 0 48px;
  background: var(--room);
}

.keys-band h2 {
  color: var(--on-room);
}

.keys-band .band-lede {
  color: var(--on-room-muted);
}

.keycards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
  margin: 26px 0 20px;
  padding: 0;
  list-style: none;
}

.keycard {
  --focus-ring: var(--navy);
  position: relative;
  min-height: 250px;
  padding: 44px 22px 28px;
  border: 1.5px solid var(--edge);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  background: #fffdf7;
  box-shadow: 0 14px 20px -14px rgba(80, 50, 20, 0.5);
  color: var(--ink);
}

/* The black key between two white ones. */
.keycard + .keycard::before {
  content: "";
  position: absolute;
  top: 0;
  /* Physical on purpose: the duet picture: Octo on the low keys (left), the child on the high. */
  left: -44px;
  z-index: 2;
  width: 54px;
  height: 150px;
  border-radius: 0 0 8px 8px;
  background: var(--navy);
  box-shadow: inset 0 -6px 0 rgba(255, 255, 255, 0.08);
}

.keycard h3 {
  margin: 0 0 8px;
  font-size: 1.3rem;
}

.keycard p {
  margin: 0;
  font-size: 1rem;
}

.keycard__finger {
  position: absolute;
  top: 12px;
  /* Physical on purpose: the duet picture: Octo on the low keys (left), the child on the high. */
  left: 22px;
  color: var(--teal-deep);
  font-weight: 700;
  font-size: 0.95rem;
}

.keycard--coming {
  background: repeating-linear-gradient(-45deg, #fffdf7 0 10px, #f7f0e0 10px 11px);
}

/* The two parts, side by side: the grown-up's in print and cut paper, the child's in the picture book. */
.parts {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.part {
  min-width: 0;
  padding: clamp(40px, 5vw, 72px) clamp(22px, 4vw, 64px) 56px;
}

.part--primo {
  --focus-ring: var(--navy);
  background-color: #fdf6e7;
  background-image: radial-gradient(90% 50% at 50% 0, #fffaf0, rgba(255, 250, 240, 0));
  color: var(--ink);
}

.part__name {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  color: var(--muted);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.125rem;
}

.part__name::after {
  content: "";
  flex: 1;
  border-top: 1px solid currentColor;
  opacity: 0.4;
}

.part .noteheads li,
.part .lede {
  color: var(--ink);
}

.tempo {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 4px 0 20px;
}

.tempo__mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 1.2rem;
}

.ticks {
  display: inline-flex;
  gap: 2px;
}

.ticks i {
  display: block;
  width: 3px;
  height: 14px;
  border-radius: 1px;
  background: var(--teal-dark);
}

.ticks i.off {
  background: var(--hair);
}

/* The Kids half's stars: Octo and his friends from the reef, standing on the sand, each named. */
.cast-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(4px, 1.4vw, 14px);
  margin: 8px 0 22px;
  padding: 0 4px 8px;
  border-bottom: 4px solid #f3dcae;
  list-style: none;
}

.cast-row li {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.cast-row__pic {
  display: block;
  max-width: 100%;
}

.cast-row__pic svg {
  display: block;
  width: 100%;
  height: auto;
}

.cast-row__pic--octo {
  width: clamp(56px, 11vw, 96px);
}

.cast-row__pic--pim {
  width: clamp(58px, 11vw, 100px);
}

.cast-row__pic--moss {
  width: clamp(64px, 12.5vw, 112px);
}

.cast-row__pic--luma {
  width: clamp(38px, 7.3vw, 66px);
}

.cast-row__pic--gilly {
  width: clamp(50px, 9.6vw, 88px);
}

.cast-row__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
}

/* The grown-up's picture: a cut-paper print, cut out with a white margin and taped down (the kit's washi tape). */
.part__art {
  position: relative;
  margin: 14px 0 22px;
  border: 5px solid #fffdf6;
  border-radius: 2px;
  background: #f6efdd;
  box-shadow: 0 1px 2px rgba(15, 37, 54, 0.22), 0 10px 18px -12px rgba(15, 37, 54, 0.45);
}

.part__art::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -12px;
  /* Physical on purpose: the duet picture: Octo on the low keys (left), the child on the high. */
  left: -16px;
  width: 64px;
  height: 18px;
  background: rgba(207, 233, 226, 0.82);
  box-shadow: 0 1px 1px rgba(15, 37, 54, 0.12);
  transform: rotate(-32deg);
}

.part__art img,
.shelf img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.part__art--kid {
  overflow: hidden;
  border: 10px solid #fff;
  border-radius: 22px;
  box-shadow: 0 16px 30px -18px rgba(80, 50, 20, 0.5);
}

.part__art--kid::before {
  content: none;
}

/* Tutti: the whole family, in words (their bench is the hero's picture). The teachers' note penciled in beside the text. */
.tutti {
  padding: clamp(44px, 6vw, 80px) 0;
  border-top: 1px solid var(--hair);
}

.tutti__row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  column-gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.tutti__row > .part__name,
.tutti__row > h2 {
  grid-column: 1 / -1;
}

.tutti__row > h2 {
  margin-bottom: 18px;
}

.tutti__text > .lede {
  margin-top: 0;
}

.tutti__text > :last-child {
  margin-bottom: 0;
}

.tutti__row > .pencil-note {
  margin-top: 4px;
}

.pencil-note {
  margin-top: 20px;
  padding: 14px 16px;
  border: 1.5px dashed var(--pencil);
  border-radius: 4px 4px 14px 14px;
}

.pencil-note h3 {
  margin: 0 0 6px;
  font-size: 1.2rem;
}

.pencil-note p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}

/* Teachers and their students: a quiet band after the family, the words beside a few noteheads. */
.studio-band {
  padding: clamp(36px, 5vw, 64px) 0;
  border-top: 1px solid var(--hair);
}

.studio-band__row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  column-gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.studio-band__text > .lede {
  margin-top: 0;
}

.studio-band__keys {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin-bottom: 0;
}

.studio-band__row > .noteheads {
  margin: 0;
}

/* The songbooks: two books open on the room, the grown-up's in cut paper, the child's in color. */
.repertoire {
  padding: clamp(44px, 6vw, 80px) 0 40px;
  background: var(--room);
}

.repertoire h2 {
  color: var(--on-room);
}

.repertoire .band-lede,
.repertoire__more {
  color: var(--on-room-muted);
}

.repertoire__more a {
  color: var(--on-room);
}

.repertoire__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1240px;
  margin: 24px auto 18px;
  padding: 0 var(--gutter);
}

.repertoire__col {
  padding: 28px clamp(18px, 3vw, 36px) 32px;
  /* Physical on purpose: the duet picture: Octo on the low keys (left), the child on the high. */
  border-radius: 6px 0 0 6px;
}

.repertoire__col--kid {
  --focus-ring: var(--navy);
  /* Physical on purpose: the duet picture: Octo on the low keys (left), the child on the high. */
  border-radius: 0 6px 6px 0;
  background: #fdf6e7;
  color: var(--ink);
}

.repertoire__col h3 {
  margin: 0 0 16px;
  font-size: 1.5rem;
}

.repertoire__col h3 span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-style: italic;
  font-weight: 500;
  font-size: 1rem;
}

.shelf {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The grown-up's shelf: each picture a cut-paper print with its white margin; the child's, the picture book's rounded tiles. */
.shelf__pic {
  overflow: hidden;
  border: 4px solid #fffdf6;
  border-radius: 2px;
  background: #f6efdd;
  box-shadow: 0 1px 2px rgba(15, 37, 54, 0.22), 0 8px 14px -10px rgba(15, 37, 54, 0.45);
}

.shelf--kid .shelf__pic {
  border: 6px solid #fff;
  border-radius: 14px;
  box-shadow: 0 10px 18px -12px rgba(80, 50, 20, 0.6);
}

.shelf h4 {
  margin: 8px 0 2px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.06rem;
  line-height: 1.25;
}

.shelf p {
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
}

/* The guides: four cards, each with a staff along its top edge. */
.guides-band {
  padding: clamp(44px, 6vw, 72px) 0;
  border-top: 1px solid var(--hair);
}

.guide-cards {
  display: grid;
  gap: 16px;
  margin: 20px 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .guide-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .guide-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.guide-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 36px 18px 20px;
  border: 1px solid var(--edge);
  border-radius: 6px 6px 18px 18px;
  background: var(--leaf) repeating-linear-gradient(to bottom, rgba(22, 51, 74, 0.22) 0 1px, transparent 1px 4px) no-repeat 18px 16px / calc(100% - 36px) 17px;
  color: var(--ink);
  text-decoration: none;
}

.guide-card:hover {
  border-color: var(--teal-dark);
}

.guide-card__title {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 1.2rem;
  line-height: 1.25;
}

.guide-card__text {
  color: var(--muted);
  font-size: 0.95rem;
}

/* The promise, on the piano's fallboard: navy wood with a cream inlay line. */
.fallboard {
  --focus-ring: var(--orange);
  padding: 56px 0 50px;
  background: var(--navy);
  box-shadow: inset 0 10px 0 #0f2536, inset 0 -2px 0 #0d2233;
  color: #efe8d8;
  text-align: center;
}

.fallboard .wrap {
  max-width: 1000px;
  padding-top: 34px;
  padding-bottom: 30px;
  border: 1px solid rgba(239, 232, 216, 0.35);
  border-radius: 6px;
}

.fallboard h2 {
  color: #efe8d8;
}

.fallboard__inlay {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 6px 16px;
  border-radius: 40px;
  background: #f6efdd;
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 1.375rem;
}

.fallboard__lead {
  max-width: 34ch;
  margin: 0 auto 26px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.35;
}

.fallboard__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin: 0 auto 22px;
  padding: 0;
  list-style: none;
  text-align: start;
}

.fallboard__list h3 {
  margin: 0 0 6px;
  color: var(--teal-shine);
  font-size: 1.2rem;
}

.fallboard__list p {
  margin: 0;
  color: #c9d0d8;
}

.fallboard .more {
  color: var(--teal-shine);
}

/* The prices. */
.plans {
  padding: clamp(44px, 6vw, 80px) 0;
  border-top: 1px solid var(--hair);
}

.plans__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
  margin-top: 22px;
}

.plan {
  height: 100%;
  padding: 22px 22px 24px;
  border: 1px solid var(--edge);
  border-radius: 6px 6px 18px 18px;
  background: var(--leaf);
}

.plan h3 {
  margin: 0;
  font-size: 1.5rem;
}

.plan__price {
  margin: 6px 0 14px;
  color: var(--muted);
}

.plan__price b {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 2.25rem;
  line-height: 1;
}

.plan__price span {
  font-size: 0.95rem;
}

/* Under the yearly price: what it comes to a month, in the plan's teal. */
.plan__price .plan__value {
  color: var(--teal-deep);
  font-weight: 650;
}

.plan--plus {
  border-color: var(--teal-dark);
  box-shadow: inset 0 0 0 1px var(--teal-dark);
}

.plan__badge {
  display: inline-block;
  margin: 0 0 8px;
  padding: 2px 10px 3px;
  border-radius: 3px 3px 10px 10px;
  background: var(--teal-wash);
  color: var(--teal-deep);
  font-weight: 700;
  font-size: 0.875rem;
}

.plan__pearl {
  display: block;
  width: 40px;
  height: 40px;
  margin-bottom: 6px;
}

.small {
  color: var(--muted);
  font-size: 0.875rem;
}

/* Questions, and the last call. */
.coda {
  padding: clamp(44px, 6vw, 80px) 0;
  border-top: 1px solid var(--hair);
}

.coda__row {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
}

.faq-q {
  padding: 4px 0;
  border-top: 1px solid var(--hair);
}

.faq-q summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}

.faq-q summary::-webkit-details-marker {
  display: none;
}

.faq-q summary::after {
  content: "+";
  color: var(--teal-deep);
  font-family: var(--font-ui);
  font-size: 1.5rem;
  line-height: 1;
}

.faq-q[open] summary::after {
  content: "−";
}

.faq-q p {
  max-width: 62ch;
  margin: 0 0 14px;
}

.coda__call {
  padding: 30px;
  border: 1px solid var(--edge);
  border-radius: 6px;
  background: var(--leaf);
  text-align: center;
}

.coda__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 14px;
  color: var(--muted);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
}

.coda__mark::before,
.coda__mark::after {
  content: "";
  width: 48px;
  border-top: 1px solid var(--ink);
  opacity: 0.45;
}

/* More about Octotune: the written words, as a readable column. */
.about {
  padding: 10px 0 56px;
}

.about h2 {
  font-size: 1.6rem;
}

.about .prose {
  max-width: var(--measure);
}

.prose h3 {
  margin-top: 28px;
  font-size: 1.25rem;
}

.prose > :first-child {
  margin-top: 0;
}

/* The home page, narrower: one part, one plan, one question at a time. */
@media (max-width: 900px) {
  .keycards {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .keycard {
    min-height: 0;
    border-top: 1.5px solid var(--edge);
    border-radius: 4px 4px 18px 18px;
  }

  .keycard + .keycard::before {
    display: none;
  }

  .parts,
  .tutti__row,
  .studio-band__row,
  .coda__row,
  .repertoire__cols,
  .fallboard__list,
  .plans__row {
    grid-template-columns: 1fr;
  }

  .tutti__row > .pencil-note {
    margin-top: 22px;
  }

  .studio-band__row > .noteheads {
    margin-top: 22px;
  }

  .repertoire__col {
    border-radius: 6px 6px 0 0;
  }

  .repertoire__col--kid {
    border-radius: 0 0 6px 6px;
  }
}

@media (max-width: 560px) {
  .duet__art {
    /* Physical on purpose: the duet picture: Octo on the low keys (left), the child on the high. */
    padding-right: 8px;
    padding-left: 8px;
  }

  .d-part {
    font-size: 34px;
  }

  .d-part--sub {
    font-size: 22px;
  }

  .duet__hands {
    font-size: 0.875rem;
  }

  .actions .key {
    width: min(100%, 22rem);
  }

  .shelf {
    grid-template-columns: 1fr 1fr;
  }

  .shelf li:nth-child(3) {
    display: none;
  }

  .fallboard .wrap {
    padding-inline: 18px;
  }
}

/* ==========================================================================
   The engraver's pen (src/score/engrave/glyphs.ts), wherever it draws: the
   song sheets and a lesson's page (two-bar.css), and every lesson's own
   notation, drawn through src/score/engrave/Pen.tsx (a Meet card, a note
   card, the exercises, concept cards, rhythm, the practice sheet, the end
   screens). One set of weights, in the engraver's units (10 to a staff gap:
   Pen.tsx scales a drawing measured otherwise), so a staff line, a ledger,
   a stem, a head and a clef are the same wherever they are drawn.

   The music is drawn from currentColor: the ink is whatever colour the
   drawing is set in, and a mark (the note to find, a right or a wrong one)
   is one colour change on its group. Three names set the rest:

   - --engr-staff: the staff lines, a quieter ink (by default the ink at 62%);
   - --engr-page: the page, which shows through a hollow head;
   - --engr-time-font: the time signature's face (the serif; Kids' the
     interface face).
   ========================================================================== */

.engr .staff {
  stroke: var(--engr-staff, color-mix(in srgb, currentColor 62%, transparent));
  stroke-width: 1.05;
}

.engr .ledger {
  stroke: currentColor;
  stroke-width: 1.2;
  opacity: 0.8;
}

.engr .barline,
.engr .sysline {
  stroke: currentColor;
  stroke-width: 1.35;
}

.engr .stem {
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
}

.engr .ink,
.engr .head {
  fill: currentColor;
}

.engr .hole {
  fill: var(--engr-page, #fff);
}

.engr .pen {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.engr .pen.thin {
  stroke-width: 1.25;
}

.engr .pen.thick {
  stroke-width: 3.1;
  stroke-linecap: butt;
}

.engr .pen.mid {
  stroke-width: 1.8;
}

.engr .rest-q {
  stroke-width: 2.7;
}

.engr .timesig text {
  fill: currentColor;
  font: 700 23px var(--engr-time-font, var(--font-serif));
  font-variation-settings: "opsz" 72;
  text-anchor: middle;
}

/* Kids: the picture book's pen, a little bolder and rounder: the song sheets', a child's sittings'
   and their practice sheet's. */
:is(.tb--kids, .escore--kids, .session--kids, .habits--kids) .engr .staff {
  stroke-width: 1.5;
  stroke-linecap: round;
}

:is(.tb--kids, .escore--kids, .session--kids, .habits--kids) .engr .barline {
  stroke-width: 1.8;
}

:is(.tb--kids, .escore--kids, .session--kids, .habits--kids) .engr .stem {
  stroke-width: 1.8;
}