/* ============================================================
   The Acoustic Method — shared stylesheet
   Loaded by every page BEFORE the page's own css/<page>.css.
   ============================================================ */

:root{
  --bg:#1B140E;
  --panel:#251C14;
  --panel2:#2C2218;
  --line:#3A2F22;
  --ink:#EDE4D6;
  --muted:#A6957F;
  --brass:#C9A45C;
  --brass-dim:rgba(201,164,92,.35);
  --sage:#9DB48C;
  --pearl:#E8E3D8;
  --wood:#33261B;
  --red:#C97C5C;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none!important; animation:none!important;}
}

body{
  background:var(--bg); color:var(--ink);
  font-family:'Public Sans',system-ui,sans-serif;
  font-size:16px; line-height:1.65;
  position:relative;
}
::selection{background:var(--brass); color:var(--bg);}

/* ---- the koa guitar backdrop ---- */
body::before{
  content:""; position:fixed; z-index:-1;
  right:-140px; bottom:-160px;
  width:min(560px,70vw); height:900px;
  background:url("../img/guitar-bg.svg") no-repeat center bottom / contain;
  opacity:.55; pointer-events:none;
}
@media (max-width:700px){
  body::before{width:82vw; right:-30vw; opacity:.4;}
}

/* ---------------- header ---------------- */
header{
  text-align:center; padding:52px 20px 40px;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(ellipse 900px 340px at 50% -80px, rgba(201,164,92,.09), transparent 70%);
}
a.back{
  display:inline-block; margin-bottom:22px;
  font-family:'IBM Plex Mono',monospace; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); text-decoration:none;
}
a.back:hover{color:var(--brass);}
a.back:focus-visible{outline:2px solid var(--brass); outline-offset:3px;}
.eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--brass); margin-bottom:14px;
}
h1{
  font-family:'Fraunces',serif; font-weight:700;
  font-size:clamp(32px,6vw,52px); line-height:1.05; letter-spacing:-.01em;
}
header p.sub{max-width:600px; margin:16px auto 0; color:var(--muted); font-size:16px;}

/* ---------------- sticky bar: tabs + practice tools ---------------- */
nav#nav{
  position:sticky; top:0; z-index:50;
  background:rgba(27,20,14,.96); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; flex-wrap:wrap;
  gap:0 10px; padding:0 12px;
}
nav#nav .nav-tabs{
  display:flex; overflow-x:auto; scrollbar-width:none;
  flex:1 1 320px; min-width:0;
}
nav#nav .nav-tabs::-webkit-scrollbar{display:none;}
nav#nav .nav-tabs button{
  flex:0 0 auto; background:none; border:none;
  border-bottom:2px solid transparent;
  color:var(--muted); font-family:'IBM Plex Mono',monospace;
  font-size:12.5px; letter-spacing:.06em;
  padding:14px 13px 12px; cursor:pointer; white-space:nowrap;
}
nav#nav .nav-tabs button:hover{color:var(--ink);}
nav#nav .nav-tabs button.active{color:var(--brass); border-bottom-color:var(--brass);}
nav#nav .nav-tabs button:focus-visible{outline:2px solid var(--pearl); outline-offset:-2px;}

/* practice tools cluster (injected by js/practice-bar.js) */
.pb-tools{
  display:flex; align-items:center; gap:14px;
  margin-left:auto; padding:8px 0;
  flex:0 0 auto;
}
.pb-metro,.pb-timer{
  display:flex; align-items:center; gap:5px;
  background:var(--panel); border:1px solid var(--line);
  border-radius:8px; padding:3px 6px;
}
.pb-tools button{
  background:none; border:none; color:var(--ink);
  font-family:'IBM Plex Mono',monospace; font-size:14px; font-weight:600;
  width:26px; height:26px; border-radius:6px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.pb-tools button:hover{background:var(--panel2); color:var(--brass);}
.pb-tools button:focus-visible{outline:2px solid var(--pearl); outline-offset:1px;}
.pb-bpm{
  font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:600;
  color:var(--ink); font-variant-numeric:tabular-nums;
  min-width:52px; text-align:center;
}
.pb-bpm::after{content:" bpm"; font-size:10px; color:var(--muted); font-weight:400;}
.pb-metro.on .pb-bpm{color:var(--brass);}
button.pb-mgo, button.pb-tgo{
  width:auto; padding:0 12px; height:26px;
  background:var(--brass); color:var(--bg);
  font-family:'Public Sans',sans-serif; font-weight:700; font-size:12px;
}
button.pb-mgo:hover, button.pb-tgo:hover{background:var(--brass); color:var(--bg); filter:brightness(1.12);}
.pb-metro.on button.pb-mgo, .pb-timer.on button.pb-tgo{
  background:var(--panel2); color:var(--muted);
}
.pb-pulse{
  width:9px; height:9px; border-radius:50%;
  background:var(--line); flex:0 0 auto; margin-left:2px;
}
.pb-metro.on .pb-pulse.beat{background:var(--brass);}
.pb-metro.on .pb-pulse.beat.accent{background:var(--pearl);}
button.pb-ttime{
  width:auto; min-width:54px; padding:0 4px;
  font-size:13px; font-variant-numeric:tabular-nums; color:var(--ink);
}
.pb-timer.on button.pb-ttime{color:var(--brass);}
.pb-timer.done button.pb-ttime{color:var(--sage);}
@media (max-width:640px){
  .pb-tools{margin-left:0; width:100%; justify-content:center;
    border-top:1px solid var(--line); padding:7px 0;}
}

/* ---- clickable duration chips in content ---- */
.min{
  font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:500;
  color:var(--bg); background:var(--brass-dim);
  padding:2px 8px; border-radius:3px; letter-spacing:.05em;
  color:var(--brass); background:rgba(201,164,92,.12);
  border:1px dashed var(--brass-dim);
  cursor:pointer; user-select:none;
}
.min:hover{background:rgba(201,164,92,.22); border-style:solid;}
.min:focus-visible{outline:2px solid var(--brass); outline-offset:2px;}
.min::before{content:"⏱ "; font-size:10px;}

/* ---------------- common content blocks ---------------- */
main{max-width:860px; margin:0 auto; padding:40px 20px 80px;}
section.phase{display:none;}
section.phase.visible{display:block; animation:fadeUp .35s ease both;}
@keyframes fadeUp{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}

.phase-label{
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--brass); margin-bottom:8px;
}
h2{font-family:'Fraunces',serif; font-size:28px; font-weight:600; margin-bottom:14px;}
h3{
  font-family:'Fraunces',serif; font-size:20px; font-weight:600; margin:34px 0 10px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
p{margin:10px 0;}
p.quiet, li.quiet{color:var(--muted); font-size:14.5px;}
ul,ol{margin:10px 0 10px 22px;}
li{margin:6px 0;}
em{color:var(--brass); font-style:italic;}

.card{
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:20px 22px; margin:18px 0;
}
.milestone{
  background:rgba(157,180,140,.08); border:1px solid rgba(157,180,140,.35);
  border-radius:10px; padding:14px 18px; margin:24px 0; font-size:15px;
}
.ml-tag{
  display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--sage);
  margin-right:10px;
}
.rule-callout{
  border-left:3px solid var(--brass); background:rgba(201,164,92,.07);
  border-radius:0 10px 10px 0; padding:16px 20px; margin:18px 0;
}

.tabblock, .tab-wrap{
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  margin:16px 0; overflow:hidden;
}
.tabblock .tb-title, .tab-wrap .tab-title{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--brass);
  padding:10px 16px; border-bottom:1px solid var(--line);
}
.tabblock pre, .tab-wrap pre.tab{
  font-family:'IBM Plex Mono',monospace; font-size:13px; line-height:1.7;
  color:var(--ink); padding:14px 16px; overflow-x:auto; white-space:pre;
}
.tabblock .cnt, pre.tab .cnt{color:var(--brass);}
.tabblock .fng, pre.tab .fng{color:var(--sage);}

table{width:100%; border-collapse:collapse; margin:14px 0; font-size:14.5px;}
th{
  text-align:left; font-family:'IBM Plex Mono',monospace; font-size:11.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--brass);
  padding:8px 12px 8px 0; border-bottom:1px solid var(--brass-dim);
}
td{padding:10px 12px 10px 0; border-bottom:1px solid var(--line); vertical-align:top;}
td:first-child{color:var(--ink); font-weight:600; width:38%;}
td:last-child{color:var(--muted);}

.next-btn{
  display:inline-block; margin-top:30px; background:none; border:1px solid var(--brass-dim);
  color:var(--brass); font-family:'Public Sans',sans-serif; font-weight:700; font-size:14px;
  padding:11px 22px; border-radius:8px; cursor:pointer;
}
.next-btn:hover{background:rgba(201,164,92,.1);}
.next-btn:focus-visible{outline:2px solid var(--pearl); outline-offset:2px;}

/* ---- illustrations ---- */
figure.illus{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:20px 20px 12px; margin:20px 0; text-align:center;
}
figure.illus img, figure.illus svg{max-width:100%; height:auto; display:block; margin:0 auto;}
figure.illus figcaption{
  font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted);
  margin-top:10px; letter-spacing:.04em;
}

footer{
  text-align:center; padding:30px 20px 50px; color:var(--muted); font-size:13px;
  border-top:1px solid var(--line);
}
footer a{color:var(--muted);}
footer a:hover{color:var(--brass);}