/* Shared styling for the scale reference pages (c-major-scale.html, a-minor-scale.html,
   piano-scale-fingering.html). Extracted to a file rather than inlined per page the way
   about.html does it: about.html is ONE page, so its inline <style> costs nothing, but these
   pages are a set that will grow (one per scale), and three copies of the same 130 lines of
   tokens is three places to edit and three uncached downloads. An external sheet is also
   allowed by the prod CSP - it blocks inline <script>, not stylesheets from 'self'.

   Tokens are copied from public-scales/about.html so the reference pages and the marketing
   page read as one product. Keep them in step: this is a copy, not an import, because
   about.html must keep working if this file is ever dropped. */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('fonts/bricolagegrotesque-latin.woff2') format('woff2');
  font-weight: 200 800; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900; font-display: swap;
}

:root {
  --bg: #050506; --card: #131316; --panel: #151519; --graphite: #1b1b20;
  --chalk: #ededee; --muted: #9a9aa3; --faint: #82828c;
  --accent: #6571f0; --accent-hover: #7681f3; --accent-wash: #6571f01f;
  --teal: #3cbfae; --green: #3fb98b;
  --hairline: rgba(255,255,255,0.07); --hairline-strong: rgba(255,255,255,0.13);
  --display: 'Bricolage Grotesque', Inter, system-ui, sans-serif;
  --body: Inter, system-ui, -apple-system, sans-serif;
  --edge: inset 0 1px 0 rgba(255,255,255,0.05);
  --elev-1: 0 1px 1px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--chalk); font: 400 1rem/1.65 var(--body); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -0.02em; line-height: 1.15; margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* Reference pages are a reading column, narrower than about.html's 68rem marketing grid. */
.wrap { max-width: 52rem; margin: 0 auto; padding: 0 1.25rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 44px; padding: 0.6rem 1.6rem; border-radius: 999px;
  font: 600 0.9375rem/1 var(--body); text-decoration: none; white-space: nowrap;
  transition: transform 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.96); }
.btn-primary {
  color: #fff;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--accent) 86%, #fff), color-mix(in srgb, var(--accent) 90%, #000));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 2px rgba(0,0,0,0.6), 0 6px 16px rgba(0,0,0,0.35), 0 0 24px rgba(101,113,240,0.25);
}
.btn-primary:hover { background: linear-gradient(to bottom, color-mix(in srgb, var(--accent-hover) 88%, #fff), var(--accent)); }
.btn-secondary { color: var(--chalk); background: var(--graphite); border: 1px solid var(--hairline); box-shadow: var(--edge); }
.btn-secondary:hover { background: #22222a; }
.btn-lg { padding: 0.85rem 2.2rem; font-size: 1rem; }

.nav {
  position: sticky; top: 0; z-index: 10;
  background: rgba(5,5,6,0.72);
  backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-bottom: 1px solid var(--hairline);
}
.nav .wrap { display: flex; align-items: center; gap: 1.5rem; height: 64px; max-width: 68rem; }
.wordmark {
  font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--chalk);
  letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 0.55rem;
  text-decoration: none;
}
.wordmark:hover { text-decoration: none; }
.wordmark svg { flex: none; }
.wordmark small { font-weight: 500; font-size: 0.8rem; color: var(--muted); font-family: var(--body); }
.nav-links { display: flex; gap: 1.5rem; margin-left: auto; }
.nav-links a { color: var(--muted); font: 600 0.875rem/1 var(--body); padding: 0.75rem 0; text-decoration: none; }
.nav-links a:hover { color: var(--chalk); text-decoration: none; }
@media (max-width: 46rem) { .nav-links { display: none; } .wordmark { margin-right: auto; } }
@media (max-width: 34rem) { .wordmark small { display: none; } .wordmark { font-size: 1.05rem; } }

/* Breadcrumb mirrors the BreadcrumbList JSON-LD on each page. Google wants the visible trail
   to match the structured data, so edit both together. */
.crumbs { font-size: 0.85rem; color: var(--faint); padding: 1.75rem 0 0; }
.crumbs a { color: var(--muted); text-decoration: underline; text-underline-offset: 0.15em; }
.crumbs a:hover { color: var(--chalk); text-decoration: underline; }
.crumbs span { margin: 0 0.45rem; }

.page-head { padding: 1.25rem 0 2.5rem; }
.page-head h1 { font-size: clamp(2rem, 4vw + 1rem, 3rem); font-weight: 750; margin-bottom: 1rem; }
.page-head h1 em { font-style: normal; color: var(--accent-hover); }
.lede { font-size: clamp(1.05rem, 1vw + 0.85rem, 1.2rem); color: var(--muted); margin: 0 0 1.75rem; }

section { padding: 2.75rem 0; border-top: 1px solid var(--hairline); }
section h2 { font-size: clamp(1.4rem, 1.8vw + 0.9rem, 1.9rem); font-weight: 700; margin-bottom: 1rem; }
section h3 { font-size: 1.0625rem; font-weight: 650; margin: 1.75rem 0 0.6rem; }
section p { color: var(--muted); margin: 0 0 1rem; }
section p strong, section li strong { color: var(--chalk); font-weight: 600; }
section ul, section ol { color: var(--muted); padding-left: 1.25rem; margin: 0 0 1rem; }
section li { margin: 0.45rem 0; }

/* The notes of the scale, set large - this is the single fact most visitors came for. */
.notes {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.25rem; padding: 0; list-style: none;
}
.notes li {
  background: var(--graphite); border: 1px solid var(--hairline); border-radius: 10px;
  box-shadow: var(--edge); padding: 0.7rem 0; margin: 0;
  font: 700 1.15rem/1 var(--display); color: var(--chalk);
  min-width: 3.1rem; text-align: center;
}
.notes li.tonic { color: var(--accent-hover); border-color: rgba(101,113,240,0.4); background: var(--accent-wash); }
.notes li sup { font-size: 0.62em; font-weight: 600; color: var(--muted); }

/* Inline SVG keyboard. Scrolls on a narrow phone rather than shrinking the keys to illegibility. */
.keyboard { overflow-x: auto; margin: 0 0 1.25rem; padding-bottom: 0.5rem; }
.keyboard svg { display: block; min-width: 20rem; height: auto; }
.caption { color: var(--faint); font-size: 0.85rem; margin: 0 0 1rem; }

/* Wide tables (the all-keys fingering chart) scroll inside their own box rather than forcing the
   page body sideways on a phone. -webkit-overflow-scrolling keeps the momentum flick on iOS. */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1rem; }
.scroll-x table { margin-bottom: 0; min-width: 34rem; }

table { border-collapse: collapse; width: 100%; margin: 0 0 1rem; font-size: 0.95rem; }
caption { text-align: left; color: var(--faint); font-size: 0.85rem; padding-bottom: 0.6rem; }
th, td { border: 1px solid var(--hairline); padding: 0.6rem 0.7rem; text-align: left; }
th { background: var(--panel); color: var(--chalk); font-weight: 650; }
td { color: var(--muted); }
td b { color: var(--chalk); font-weight: 650; }
/* Finger numbers read as a row of digits, so give them a tabular monospace rhythm. */
.fingers { font-variant-numeric: tabular-nums; letter-spacing: 0.22em; color: var(--chalk); font-weight: 600; }

.callout {
  background: var(--panel); border: 1px solid var(--hairline); border-left: 3px solid var(--accent);
  border-radius: 0 12px 12px 0; padding: 1.1rem 1.25rem; margin: 0 0 1.25rem; box-shadow: var(--edge);
}
.callout p { margin: 0; }
.callout p + p { margin-top: 0.7rem; }

.related { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); padding: 0; list-style: none; margin: 0; }
.related li { margin: 0; }
.related a {
  display: block; height: 100%; background: var(--card); border: 1px solid var(--hairline);
  border-radius: 12px; padding: 1.1rem 1.2rem; box-shadow: var(--elev-1), var(--edge);
  text-decoration: none; transition: border-color 150ms ease, transform 150ms ease;
}
.related a:hover { text-decoration: none; border-color: var(--hairline-strong); transform: translateY(-2px); }
.related b { display: block; font-family: var(--display); font-weight: 650; font-size: 1rem; margin-bottom: 0.3rem; }
.related span { color: var(--muted); font-size: 0.875rem; }

.finale { text-align: center; }
.finale h2 { margin-bottom: 0.9rem; }
.finale p { max-width: 34rem; margin: 0 auto 1.75rem; }

footer { border-top: 1px solid var(--hairline); padding: 3rem 0 4rem; color: var(--faint); font-size: 0.875rem; }
footer nav { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
footer nav a { color: var(--muted); font-weight: 600; text-decoration: none; }
footer nav a:hover { text-decoration: underline; }
footer p { margin: 0.35rem 0; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .related a:hover { transform: none; } }