/* ========================================================================
   Bass Technique — cmdurham.com/bass-technique/
   Style C: signature yellow, Anton display, typewriter labels, one
   blackletter accent. Notation is never styled beyond its own SVG.
   All paths are relative so the site works under any base path.
   ======================================================================== */

@font-face { font-family: 'Anton'; src: url('fonts/anton-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Special Elite'; src: url('fonts/special-elite-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'UnifrakturMaguntia'; src: url('fonts/unifrakturmaguntia-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('fonts/inter-tight-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('fonts/inter-tight-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('fonts/inter-tight-latin-800-normal.woff2') format('woff2'); font-weight: 800; font-display: swap; }
/* notation text (finger letters, fret numbers, tempo) */
@font-face { font-family: 'Barlow'; src: url('fonts/barlow-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('fonts/barlow-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root { --y: #FFD400; --ink: #111; --paper: #fff; --muted: #555; color-scheme: light; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.55 'Inter Tight', system-ui, sans-serif; }
a { color: inherit; }
.wrap { max-width: 860px; margin: 0 auto; padding: 0 20px; }

/* ---------- top bar ---------- */
.topbar { background: var(--ink); color: var(--y); }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 48px; gap: 16px; }
.topbar a { text-decoration: none; }
.topbar .home { font-weight: 600; font-size: 15px; color: #fff; }
.topbar .home:hover { color: var(--y); }
.topbar .sect { font-family: 'Anton'; text-transform: uppercase; letter-spacing: .06em; font-size: 16px; }
.crumbs { font-family: 'Special Elite'; font-size: 14px; margin: 18px 0 0; }
.crumbs a { text-decoration: none; border-bottom: 2px solid var(--ink); }

/* ---------- footer ---------- */
.site-foot { border-top: 8px solid var(--ink); margin-top: 72px; padding: 14px 0 40px; font-family: 'Anton';
             text-transform: uppercase; letter-spacing: .05em; font-size: 13px; }
.site-foot .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

/* ---------- hero ---------- */
.hero { background: var(--y); padding: 40px 0 0; }
.hero h1 { font-family: 'Anton'; font-weight: 400; text-transform: uppercase; font-size: clamp(64px, 13vw, 128px); line-height: .9; margin: 16px 0 0; }
.hero.small h1 { font-size: clamp(56px, 11vw, 104px); }
.goth { font-family: 'UnifrakturMaguntia'; font-size: clamp(36px, 7vw, 58px); line-height: 1; margin-top: 6px; }
.tape { display: inline-block; background: var(--ink); color: var(--y); font-family: 'Special Elite'; font-size: clamp(14px, 2.4vw, 18px);
        padding: 8px 18px; transform: rotate(-2deg); margin: 30px 0 0; }
.dl { display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: var(--y); text-decoration: none; font-family: 'Anton';
      text-transform: uppercase; letter-spacing: .05em; font-size: 17px; padding: 12px 20px; margin: 28px 0 0; }
.dl:hover { background: #000; color: #fff; }
.dl small { font-family: 'Inter Tight'; font-weight: 400; font-size: 13px; letter-spacing: 0; text-transform: none; opacity: .8; }
.hero .lede { max-width: 56ch; margin: 26px 0 0; font-size: 18px; }
.hero-end { height: 40px; }

/* contents grid (A's cover footer) */
.toc { border-top: 8px solid var(--ink); margin-top: 44px; padding: 14px 0 26px; display: grid; grid-template-columns: 1fr 1fr auto; gap: 4px 28px; font-size: 15px; }
.toc ol { list-style: none; margin: 0; padding: 0; display: contents; }
.toc a { text-decoration: none; display: block; }
.toc a:hover { text-decoration: underline; }
.toc b { font-family: 'Anton'; font-weight: 400; margin-right: 8px; }
.toc .legend-inline { font-family: 'Special Elite'; font-size: 14px; line-height: 1.5; grid-row: 1 / span 2; grid-column: 3; }
@media (max-width: 640px) {
  .toc { grid-template-columns: 1fr; }
  .toc .legend-inline { grid-row: auto; grid-column: auto; margin-top: 8px; }
}

/* ---------- sections ---------- */
.sec { border-top: 8px solid var(--ink); margin-top: 64px; padding-top: 22px; scroll-margin-top: 16px; }
.sec-hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.label { display: inline-block; background: var(--y); font-family: 'Anton'; font-weight: 400; text-transform: uppercase;
         font-size: clamp(30px, 5vw, 40px); line-height: 1.15; padding: 2px 18px; transform: rotate(-1.5deg); margin: 0; }
.sec-hd .g { font-family: 'UnifrakturMaguntia'; font-size: 26px; white-space: nowrap; }
.sec p { max-width: 68ch; }
.intro { margin: 22px 0 26px; }
.pima { border: 2px solid var(--ink); padding: 10px 16px; font-family: 'Special Elite'; font-size: 15px; margin-top: 22px; }
.pima b { font-family: 'Anton'; font-weight: 400; letter-spacing: .05em; margin-right: 10px; }

/* ---------- variations + notation ---------- */
.var { margin: 30px 0 0; }
.var-hd { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 6px; }
.var h3 { font-family: 'Special Elite'; font-weight: 400; font-size: 18px; margin: 0; }
.legend { font-family: 'Special Elite'; font-size: 14px; line-height: 1.45; border: 2px solid var(--ink); padding: 4px 12px;
          text-align: center; white-space: nowrap; flex: none; }
.score { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.score svg { display: block; width: 100%; min-width: 640px; height: auto; color: var(--ink); }
.score-hint { display: none; font-size: 13px; color: var(--muted); margin: 4px 0 0; }
@media (max-width: 680px) { .score-hint { display: block; } }

/* ---------- index cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 26px; }
.card { border: 2px solid var(--ink); padding: 20px 20px 18px; display: flex; flex-direction: column; text-decoration: none; }
.card.live { box-shadow: 6px 6px 0 var(--y); transition: box-shadow .15s ease; }
.card.live:hover { box-shadow: 6px 6px 0 var(--ink); }
.card .meta { font-family: 'Special Elite'; font-size: 14px; color: #333; }
.card h3 { font-family: 'Anton'; font-weight: 400; text-transform: uppercase; font-size: 28px; line-height: 1.05; margin: 10px 0 8px; }
.card p { margin: 0 0 16px; font-size: 15.5px; }
.card .cta { margin-top: auto; font-family: 'Anton'; text-transform: uppercase; letter-spacing: .05em; }
.card.lab { border-style: dashed; color: #777; }
.card.lab .q { font-family: 'Anton'; font-size: 40px; line-height: 1; }

@media print {
  .topbar, .dl, .score-hint, .site-foot { display: none; }
  .hero { background: none; }
  .score svg { min-width: 0; }
  .sec { break-inside: avoid-page; }
}