.sy-hub {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--terra);
    text-decoration: none;
    margin: 0 0 12px;
  }
  .sy-hub:hover { color: var(--terra-soft); }

  

  /* Headings */
  h1 { font-size: 2.3rem; line-height: 1.15; margin: 0 0 10px; }
  section > h2 {
    font-size: 1.7rem; margin: 56px 0 14px; padding-bottom: 8px;
    border-bottom: 3px solid var(--ochre); display: inline-block;
  }
  h3 { font-size: 1.2rem; margin: 30px 0 8px; color: var(--terra); }
  h4 { font-size: 1.05rem; margin: 22px 0 6px; color: var(--terra-soft); }
  p { margin: 0 0 14px; }
  .lead { font-size: 1.12rem; color: #4a3728; }

  
  
  

  /* Cards & callouts */
  .card {
    background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow);
    margin: 18px 0;
  }
  .note {
    border-left: 5px solid var(--ochre); background: #fbf1da;
    padding: 12px 18px; border-radius: 8px; margin: 18px 0; color: #5a4a34;
  }
  .tip { border-left-color: var(--green); background: #eef3e7; }

  /* Tables */
  table { border-collapse: collapse; width: max-content; max-width: 100%; margin: 16px 0; font-size: 0.96rem; background: var(--panel); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
  th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
  th { background: #f3e6cf; font-weight: 700; }
  tr:last-child td { border-bottom: none; }

  .b-kick  { background: #6b6152; }
  .b-snare { background: var(--terra); }
  .b-hat   { background: #8a5a2b; }
  .b-ride  { background: var(--green); }
  .b-crash { background: var(--ochre); color:#3d2b1f; }
  .b-tom   { background: #9a6b3f; }
  

  /* Drum grid marks. A column is one moment; a row is one piece of the kit, in
     score order, cymbals at the top down to the kick. The mark is the notation a
     drummer would write by hand: × on a cymbal, ● on a drum, ○ for an open hat. */
  table.grid td.hit { font-size: 1rem; line-height: 1; color: var(--terra); }
  /* An accent is marked by the bar under it — the same thing the pencil mark means
     on paper — so the mark itself only needs to be bolder, not bigger. Growing it
     would change the row height and stop the grids matching each other. */
  table.grid td.hit.accent { font-weight: 800; }
  /* A ghost has to be obviously softer than a hit and still obviously not a rest,
     which is why it keeps the terra family and only loses weight. Pale grey read
     as an empty column. */
  table.grid td.hit.ghost { color: #d98b6a; }
  table.grid td.rest { color: #ddcdb0; }
  table.grid th.lane {
    text-align: right; white-space: nowrap; font-weight: 700;
    background: #f3e6cf; font-size: 0.82rem; padding-right: 12px;
  }
  .grid-legend { font-size: 0.88rem; color: var(--muted); margin: 6px 0 16px; }
  .grid-legend b { color: var(--ink); font-weight: 700; }
  .groove > .groove-title { font-weight: 700; margin: 0 0 6px; }

  /* Rhythm grid */
  .grid-wrap { overflow-x: auto; margin: 14px 0 6px; }
  table.grid { width: auto; min-width: max-content; max-width: 100%; text-align: center; }
  table.grid th, table.grid td { text-align: center; white-space: nowrap; padding: 8px 10px; }
  table.grid thead th { background: #efe0c6; color: var(--muted); font-weight: 600; font-size: .82rem; }
  table.grid .sam { box-shadow: inset 0 3px 0 var(--terra); }
  .hands { font-size:.9rem; color: var(--muted); margin: 2px 0 14px; }
  
  
  

  /* Checklist */
  ul.check { list-style: none; padding-left: 0; }
  ul.check li { padding: 6px 0 6px 30px; position: relative; }
  ul.check li::before { content: "☐"; position: absolute; left: 4px; color: var(--terra); font-size: 1.1rem; }

  /* Level badges */
  .badge { display:inline-block; background: var(--terra); color:#fff; font-size:.72rem; font-weight:700; padding:3px 10px; border-radius: 20px; letter-spacing:.04em; vertical-align: middle; margin-left: 8px; }

  code { background: #f3e6cf; padding: 1px 6px; border-radius: 5px; font-size: .9em; }
  

  
  
  
  
  
  /* Audio player */
.playbtn { background: var(--terra); color:#fff; border:none; width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:.75rem; line-height:1; display:inline-flex; align-items:center; justify-content:center; padding:0; }
  .playbtn:hover { background: var(--terra-soft); }
  .playbtn.playing { background: var(--green); }
  
  

  @media (max-width: 820px) {
    
    h1 { font-size: 1.8rem; }
    }

.btn.nav { background: var(--terra); color: #fff; }
.row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }