/* PitchRhythmKit — The Practice Companion · visual prototype only.
   Intentionally self-contained: zero external fonts, images, libraries, or trackers. */
:root {
  --paper:#F3F0E8; --ink:#19282D; --muted:#526361;
  --hair:#C9CEC5; --stage:#19282D; --stage2:#263E41;
  --aqua:#BDE8D9; --cream:#FBFAF3; --accent:#006E68;
  --focus:#B57A47; --rust:#A04F3D; --brass:#B57A47;
  --brand-display:Georgia,'Times New Roman',serif;
  --brand-ui:'Avenir Next','Segoe UI',system-ui,sans-serif;
}
html {scroll-behavior:smooth}
body {background:var(--paper)!important;color:var(--ink)!important;font-family:var(--brand-ui)!important;}
.head {background:var(--paper); border-bottom:1px solid #C0C8BF; position:relative}
.head::after {content:'';position:absolute;bottom:-1px;left:0;width:clamp(50px,9vw,134px);height:2px;background:var(--brass)}
.brand {font-family:var(--brand-ui)!important;display:inline-flex!important;align-items:center;gap:10px;font-size:clamp(18px,1.8vw,23px)!important;letter-spacing:-.058em!important;font-weight:760!important}
.brand span:not(.brand-mark){color:var(--accent)!important}
.brand-mark {margin:0!important;display:inline-flex!important;align-items:center!important;height:34px!important;width:69px!important;flex:none}
.signature-mark {color:var(--accent);display:block;width:69px;height:34px;overflow:visible}
.nav a.current {border-bottom-color:var(--brass)!important}
.nav a:hover {color:var(--accent)}
.preview-banner {background:#ECE7DA!important;border-color:#D8CBBA!important;color:#654D39!important;font-size:10px!important;letter-spacing:.075em}
.eyebrow,.section-index,.side-header,.side-label {color:var(--accent)!important}
.intro h1,.directory h1 {font-family:var(--brand-display)!important;font-weight:400;letter-spacing:-.046em!important}
.intro h1 {font-size:clamp(36px,3.8vw,55px);}
.intro p {color:var(--muted)!important;max-width:640px}
.intro {position:relative;min-height:125px}
.stage {background:var(--stage)!important;color:var(--cream)}
.stage::before,.stage:before {background:var(--brass)!important;max-height:66px;width:3px!important}
.stage .section-index {color:#B9C7BF!important}
.stage .primary-btn,.stage .start-btn {background:var(--aqua)!important;color:#153333!important;border-radius:2px!important;box-shadow:none!important}
.stage .primary-btn:hover,.stage .start-btn:hover {background:#D5F2E7!important}
.stage .note,.stage .detected-note,.stage .bpm-number {font-family:var(--brand-display)!important}
.side {background:transparent!important}
.side svg:not(.signature-mark){color:var(--accent)}
.selection svg {color:var(--accent)!important}
.mobile-preset svg {color:var(--accent)!important; width:30px!important; height:46px!important; flex:none}
.string-item[aria-pressed="true"] {box-shadow:inset 3px 0 var(--brass)!important}
.stage .beat:first-child {border-color:var(--aqua)}
button,select,input {font-family:var(--brand-ui)}
.footer {background:transparent}
.footer a {color:var(--accent)}
.brand-line {max-width:510px;font-size:14px;line-height:1.6;color:var(--muted);margin-top:16px}
.brand-rule {display:inline-flex;gap:7px;align-items:center;color:var(--accent);font-size:11px;text-transform:uppercase;letter-spacing:.16em;font-weight:700}
.brand-rule::before {content:'';display:inline-block;width:25px;height:2px;background:var(--brass)}
/* Tool illustration is associated with a tool's task, never a photograph/background. */
.tool-symbol {display:block;width:53px;height:56px;color:var(--accent);flex:none}
.intro-symbol {width:52px;height:55px;display:block;margin-left:auto;margin-bottom:2px;color:var(--accent)}
.intro-symbol .tool-symbol {width:100%;height:100%}
.intro-icon-wrap {margin-left:auto;align-self:center;opacity:.9;flex:none}
.intro-icon-wrap::after {content:'';display:block;margin:7px auto 0;width:32px;border-top:1px solid var(--brass)}
/* Editorial directory instead of a three-card landing page. */
.brand-home {padding:52px 0 16px}
.brand-home h1 {font:400 clamp(42px,5.4vw,76px)/1.07 var(--brand-display)!important;letter-spacing:-.053em!important;max-width:790px;margin:16px 0}
.brand-home h1 em {color:var(--accent);font-style:normal}
.brand-home p {font-size:clamp(15px,1.4vw,18px);max-width:565px;color:var(--muted);line-height:1.65}
.brand-kicker {display:flex;align-items:center;gap:10px;font-weight:750;font-size:11px;letter-spacing:.17em;color:var(--accent)}
.brand-kicker:before {content:'';background:var(--brass);width:27px;height:2px}
.tool-directory {border-top:1px solid var(--ink);margin-top:42px}
.brand-tool-row {display:grid;grid-template-columns:75px minmax(0,1fr) auto;gap:24px;align-items:center;text-decoration:none;min-height:140px;padding:22px 5px;border-bottom:1px solid var(--hair);color:var(--ink)}
.brand-tool-row:hover {background:#E9EDE6;color:var(--ink)}
.brand-tool-row h2 {font:400 clamp(24px,2.6vw,34px)/1.15 var(--brand-display);margin:0 0 6px;letter-spacing:-.025em}
.brand-tool-row p {margin:0;color:var(--muted);font-size:14px;max-width:590px}
.brand-tool-row .row-heading {display:flex;align-items:baseline;gap:14px}
.brand-tool-row .ord {font-size:11px;letter-spacing:.1em;color:var(--accent);font-weight:750}
.brand-tool-row .open {color:var(--accent);font-weight:750;font-size:13px;white-space:nowrap}
.brand-qualifier {border-top:1px solid var(--hair);display:flex;justify-content:space-between;align-items:center;gap:20px;color:var(--muted);font-size:13px;padding:21px 4px 40px}
.brand-qualifier span:first-child {font-weight:750;color:var(--ink)}
/* Protect tight mobile layouts and tool-first behavior. */
@media (max-width:720px) {
 .brand {gap:7px!important;min-height:36px}.brand-mark {width:52px!important;height:27px!important}.signature-mark {width:52px;height:27px}
 .brand-home {padding:27px 0 9px}.brand-home h1 {font-size:clamp(36px,9vw,53px);margin:12px 0}
 .tool-directory {margin-top:23px}.brand-tool-row {grid-template-columns:50px minmax(0,1fr);gap:10px;padding:17px 2px;min-height:115px}
 .brand-tool-row .open {grid-column:2;white-space:normal;margin-top:-5px}.tool-symbol {width:43px;height:48px}
 .brand-qualifier {display:block;padding:18px 0 27px}.brand-qualifier span {display:block;margin:4px 0}
 .intro-icon-wrap {display:none}
 .intro {min-height:unset}
}
@media (max-width:350px) {.brand-mark {width:42px!important}.signature-mark {width:42px;height:24px}.brand {font-size:18px!important}.brand-tool-row h2 {font-size:23px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Unified brand header and tool ordering: Pitch -> Tuner -> Metronome. */
.head .headbar{display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:70px;padding-top:0}
.head .brand{display:inline-flex!important;align-items:center;white-space:nowrap;min-height:48px;text-decoration:none}
.head .nav{display:flex;gap:22px;align-items:stretch;max-width:100%;overflow:visible;white-space:nowrap}
.head .nav a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;border-bottom:3px solid transparent;text-decoration:none;color:var(--muted);font-size:13px;font-weight:650;padding:0 2px}
.head .nav a.current{color:var(--ink)!important;border-bottom-color:var(--brass)!important;font-weight:750}
.head .nav .nav-short{display:none}
.head .nav .nav-long{display:inline}
.head .nav a:focus-visible,.head .brand:focus-visible{outline:3px solid var(--focus)!important;outline-offset:3px}
@media(max-width:720px){
 .head .headbar{display:block;min-height:0;padding-top:9px;padding-bottom:0}
 .head .brand{min-height:42px;width:max-content;max-width:100%}
 .head .nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:8px;overflow:visible;white-space:nowrap}
 .head .nav a{min-height:48px;font-size:13px;padding:0 2px}
 .head .nav .nav-long{display:none}
 .head .nav .nav-short{display:inline}
}
@media(max-width:350px){
 .head .nav{gap:4px}
 .head .nav a{font-size:12px}
}

/* HEADER ALIGNMENT HOTFIX / 2026-11-13
   Fixes page-specific tuner .headbar padding override on mobile/tablet.
   Header markup, logo, and navigation are shared across all four pages.
   This CSS is purposefully scoped to header only; no tool controls change.
*/
.head .shell.headbar {
  padding-left:44px;
  padding-right:44px;
}
@media (min-width:721px) and (max-width:1030px) {
  .head .shell.headbar { padding-left:26px; padding-right:26px; }
}
@media (min-width:351px) and (max-width:720px) {
  .head .shell.headbar { padding-left:20px; padding-right:20px; }
}
@media (max-width:350px) {
  .head .shell.headbar { padding-left:15px; padding-right:15px; }
}
/* Identical preview-status banner typography/vertical spacing on all pages. */
.preview-banner {
  font-family:var(--brand-ui, 'Avenir Next', 'Segoe UI', system-ui, sans-serif);
  font-size:11px;
  line-height:1.45;
  letter-spacing:.012em;
  padding:7px 12px;
}
@media (max-width:720px) {
  .preview-banner {font-size:10px; padding:6px 10px;}
}