*{margin:0;padding:0;box-sizing:border-box}
:root{--ink:#181509;--cream:#f4eddd;--cream2:#efe6d2;--green:#0C6C5F;--coral:#c94210;--line:#e2d8c2;--card:#fffdf7;--maxw:1180px;--yellow:#ffc63d;--lime:#c7f04a;--indigo:#6360e6;--blue:#3570dd}
html{scroll-behavior:smooth}
body{color:var(--ink);font-family:'Hanken Grotesk',system-ui,sans-serif;font-weight:600;line-height:1.5;-webkit-font-smoothing:antialiased;background-color:#e9f4cf;
  background-image:repeating-linear-gradient(180deg,rgba(120,140,70,.30) 0 1px,transparent 1px 13px,rgba(120,140,70,.30) 13px 14px,transparent 14px 26px,rgba(120,140,70,.30) 26px 27px,transparent 27px 39px,rgba(120,140,70,.30) 39px 40px,transparent 40px 52px,rgba(120,140,70,.30) 52px 53px,transparent 53px 92px);
  background-attachment:fixed}
a{color:var(--green);text-decoration:none}
a:hover{color:#0a564b}
.display{font-family:'Righteous',cursive,sans-serif;font-weight:400;letter-spacing:0;line-height:1;text-transform:uppercase}
.h-grot{font-family:'Hanken Grotesk',sans-serif;font-weight:900;letter-spacing:-.035em;line-height:.96}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px}
.kicker{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
/* ---- site navigation ----------------------------------------------------
   Lifted verbatim from the live pages so the blog carries the same header as
   the rest of ritmik.net, including the Instruments mega-menu and the
   Download button. The bundle shipped an earlier, simpler nav; keeping it
   would have made the blog the only page with a different header. */
/* ---- landing-style nav ---- */
  .nav{position:sticky;top:14px;z-index:80;padding:0 18px;margin-top:14px}
.nav-in{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:26px;
    background:#fffdf7;border-radius:999px;padding:11px 11px 11px 26px;
    box-shadow:0 8px 30px rgba(24,21,9,.10),0 1px 0 rgba(255,255,255,.7) inset}
.nav-in .brand{display:flex;align-items:center}
.ritmik-logo{height:28px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:28px;margin-right:auto}
.nav-links a{font-weight:800;font-size:15px;color:#211d10;white-space:nowrap;text-decoration:none}
.nav-links a:hover,.nav-links a.active{color:var(--green)}
/* ---- instruments mega-menu (from the handpan handoff) ---- */
  .nav-item { position: relative; display: flex; align-items: center; }
.nav-trigger { font: 800 15px 'Hanken Grotesk', sans-serif; color: #211d10; background: none; border: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.nav-trigger svg { width: 12px; height: 12px; transition: transform .18s ease; }
.nav-item:hover .nav-trigger { color: var(--green); }
.nav-item:hover .nav-trigger svg { transform: rotate(180deg); }
.nav-menu { position: absolute; top: 100%; left: -14px; margin-top: 16px; background: #fffdf7; border-radius: 26px; padding: 12px; display: grid; grid-template-columns: repeat(3, 252px); gap: 12px; box-shadow: 0 18px 40px rgba(24,21,9,.14); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; }
.nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav-item:hover .nav-menu, .nav-item:focus-within .nav-menu { opacity: 1; visibility: visible; transform: none; }
@media (max-width: 800px) {
  .nav-menu { grid-template-columns: 1fr; min-width: 280px; }
  .nav-card { height: 108px; }
  .nav-card img { width: 116px; right: -22px; }
}
/* .nav-links a sets white-space: nowrap for the plain header links; the menu
     cards are also <a> inside it, and inheriting nowrap made the description
     ignore its max-width and run one long line under the illustration. */
  .nav-links a.nav-card { white-space: normal; }
.nav-card { position: relative; overflow: hidden; border-radius: 20px; height: 190px; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; color: #181509; transition: transform .18s ease, box-shadow .18s ease; }
.nav-card img { position: absolute; right: -34px; top: 4px; width: 168px; transition: transform .22s cubic-bezier(.34,1.56,.64,1); }
.nav-card b { position: relative; font-weight: 900; font-size: 18px; letter-spacing: -0.02em; line-height: 1; }
.nav-card span { position: relative; font-weight: 600; font-size: 12.5px; line-height: 1.3; opacity: .62; max-width: 150px; }
.nav-card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(24,21,9,.14); }
.nav-card:hover img { transform: scale(1.07) rotate(-3deg); }
.nav-card[aria-current="page"] { box-shadow: inset 0 0 0 2.5px rgba(24,21,9,.7); }
.nav-card:hover b, .nav-card:hover span { color: inherit; }
.nav-card[href="bendir.html"]:hover { color: #1d3f9c; }
.nav-card[href="erbane.html"]:hover { color: #b5440f; }
.nav-card[href="handpan.html"]:hover { color: #2f2b86; }
.nav-lang{display:inline-flex;background:rgba(24,21,9,.08);border-radius:999px;padding:3px;gap:2px}
.nav-lang button{display:inline-flex;align-items:center;justify-content:center;gap:7px;
    font:800 13px 'Hanken Grotesk',sans-serif;color:#211d10;background:none;border:none;
    padding:8px 13px;border-radius:999px;cursor:pointer;letter-spacing:.02em;transition:background .15s,color .15s,box-shadow .15s}
.nav-lang button:hover{color:var(--green)}
.nav-lang button.active{background:#fff;color:#211d10;box-shadow:0 1px 3px rgba(24,21,9,.18)}
.lang-flag{width:16px;height:16px;border-radius:50%;display:block;flex:none}
.nav-cta{display:inline-flex;align-items:center;font:800 14.5px 'Hanken Grotesk',sans-serif;
    color:#fff;background:#211d10;border-radius:999px;padding:12px 22px;text-decoration:none;white-space:nowrap}
.nav-cta:hover{background:#3d3728}
.nav-download{display:inline-flex;align-items:center;gap:10px;font:800 14.5px 'Hanken Grotesk',sans-serif;
    color:#211d10;background:transparent;border:2px solid #211d10;border-radius:999px;padding:10px 20px;text-decoration:none;white-space:nowrap}
.nav-download:hover{background:rgba(24,21,9,.06)}
.nav-download .ic{width:19px;height:19px;flex:none}
@media (max-width: 420px) {
}
@media (max-width: 600px) {
  .nav-links { display: none; }
  .nav-in { gap: 9px; padding: 8px; flex-wrap: nowrap; }
  .nav-in .brand { flex: 0 1 auto; min-width: 0; margin-right: auto; margin-left: 6px; }
  .ritmik-logo { height: 23px; }
  .nav-lang { flex: 0 0 auto; }
  /* flags only — hide the EN/TR text (text node, so font-size:0) */
    .nav-lang button { padding: 6px 9px; font-size: 0; gap: 0; }
  .nav-cta { padding: 10px 15px; font-size: 13.5px; flex: 0 0 auto; }
  .nav-download { padding: 8px 15px; font-size: 13.5px; flex: 0 0 auto; }
}

/* ---- shared blocks ---- */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{display:inline-flex;align-items:center;gap:7px;font:800 14px 'Hanken Grotesk',sans-serif;color:var(--ink);background:rgba(255,253,247,.8);border:1.6px solid rgba(24,21,9,.16);border-radius:999px;padding:9px 17px;cursor:pointer;transition:transform .12s,background .12s,color .12s,border-color .12s}
.chip:hover{transform:translateY(-1px);background:#fffdf7}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.chip .n{font-weight:700;opacity:.55;font-size:13px}
.badge{display:inline-flex;align-items:center;align-self:flex-start;width:fit-content;font:800 12px 'Hanken Grotesk',sans-serif;letter-spacing:.06em;text-transform:uppercase;background:var(--chip2);border-radius:999px;padding:5px 12px;color:inherit}
/* ---- post cards ---- */
.p-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.p-card{border-radius:28px;padding:26px 26px 22px;display:flex;flex-direction:column;gap:14px;min-height:270px;color:inherit;transition:transform .16s,box-shadow .16s;--chip:rgba(255,255,255,.34);--chip2:rgba(255,255,255,.46);--sub:rgba(24,21,9,1);--brd:rgba(24,21,9,.2)}
.p-card:hover{transform:translateY(-6px);box-shadow:0 26px 48px rgba(24,21,9,.22)}
.p-card.green{background:var(--green);color:#ffffff}
.p-card.indigo{background:var(--indigo);color:var(--on-indigo)}
.p-card.coral{background:var(--coral);color:var(--on-coral)}
.p-card.blue{background:var(--blue);color:var(--on-blue)}
.p-card.ink{background:var(--ink);color:#ffffff}
  .p-card.green,
  .p-card.green,
  .p-card.indigo,
  .p-card.coral,
  .p-card.blue,
  .p-card.ink{--chip:rgba(0,0,0,.18);--chip2:rgba(0,0,0,.26);--sub:#ffffff;--brd:rgba(255,255,255,.3)}

.p-card.lime{background:var(--lime);color:var(--ink);--chip:rgba(255,255,255,.34);--chip2:rgba(255,255,255,.46);--sub:rgba(24,21,9,1);--brd:rgba(24,21,9,.13)}
.p-card.yellow{background:var(--yellow);color:var(--ink);--chip:rgba(255,255,255,.34);--chip2:rgba(255,255,255,.46);--sub:rgba(24,21,9,1);--brd:rgba(24,21,9,.13)}
.p-card.cream{background:var(--cream2);color:var(--ink);--chip:rgba(255,255,255,.34);--chip2:rgba(255,255,255,.46);--sub:rgba(24,21,9,.58);--brd:rgba(24,21,9,.11)}
.p-card h3{font-family:'Hanken Grotesk',sans-serif;font-weight:900;letter-spacing:-.03em;line-height:1.04;font-size:26px;color:inherit;text-wrap:pretty}
.p-card p{font-size:16px;color:var(--sub);font-weight:600;text-wrap:pretty}
.p-foot{margin-top:auto;padding-top:8px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13.5px;font-weight:700;color:var(--sub);border-top:1px solid var(--brd)}
.p-foot .arrow{width:18px;height:18px;flex:none}
/* ---- rhythm block ---- */
.rb{background:#fffdf7;border-radius:24px;padding:20px 22px 18px;box-shadow:0 1px 0 rgba(24,21,9,.06),0 14px 30px rgba(24,21,9,.08);display:flex;flex-direction:column;gap:14px}
.rb-top{display:flex;align-items:center;justify-content:space-between;gap:14px}
.rb-name{font-weight:900;letter-spacing:-.02em;font-size:18px;display:flex;align-items:baseline;gap:10px}
.rb-var{font-weight:700;font-size:13.5px;color:rgba(24,21,9,.72)}
.rb-play{display:inline-flex;align-items:center;gap:8px;font:800 14px 'Hanken Grotesk',sans-serif;color:var(--ink);background:rgba(24,21,9,.07);border:1px solid rgba(24,21,9,.13);border-radius:999px;padding:8px 16px 8px 12px;cursor:pointer;transition:transform .12s,filter .12s}
.rb-play:hover{transform:translateY(-1px);filter:brightness(1.04)}
.rb-play .ic{width:18px;height:18px;flex:none}
.rb.playing .rb-play{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.rb-grid{display:flex;align-items:stretch;gap:5px}
.rb-cell{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;height:50px;border-radius:10px;font-size:13px;font-weight:800;letter-spacing:.01em;transition:transform .08s,box-shadow .08s}
.rb-d{background:var(--green);color:#eafff8}
.rb-d.muted{background:rgba(12,108,95,.2);color:var(--green);border:1.6px solid var(--green)}
.rb-t{background:transparent;border:1.6px solid var(--ink);color:var(--ink)}
.rb-r{background:repeating-linear-gradient(45deg,#e7ddc6 0 4px,transparent 4px 8px);border:1px solid var(--line)}
.rb-cell.on{transform:translateY(-3px);box-shadow:0 6px 14px rgba(24,21,9,.22);outline:2.5px solid var(--coral);outline-offset:1px}
.rb-cap{font-size:14px;font-weight:600;color:rgba(24,21,9,.58)}
/* ---- footer ---- */
.footer-big{position:relative;background:#100f0c;color:#fff;overflow:hidden;padding:clamp(40px,5vw,72px) clamp(26px,6vw,90px) clamp(30px,4vw,50px);margin-top:clamp(40px,6vw,80px)}
.footer-big::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:repeating-linear-gradient(to bottom,rgba(255,255,255,.07) 0 1.5px,transparent 1.5px 13px,rgba(255,255,255,.07) 13px 14.5px,transparent 14.5px 26px,rgba(255,255,255,.07) 26px 27.5px,transparent 27.5px 39px,rgba(255,255,255,.07) 39px 40.5px,transparent 40.5px 52px,rgba(255,255,255,.07) 52px 53.5px,transparent 53.5px 96px)}
.footer-big>*{position:relative;z-index:1}
.fb-logo{display:block;width:100%;height:auto;overflow:visible}
.fb-logo rect{fill:var(--yellow)}
.fb-logo path{fill:#fff}
.fb-foot{margin-top:clamp(34px,5vw,64px)}
.fb-line{height:1px;background:rgba(255,255,255,.32)}
.fb-row{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;margin-top:clamp(20px,2.6vw,32px)}
.fb-tag{font-weight:600;font-size:clamp(14px,1.05vw,16px);max-width:30ch;color:rgba(255,255,255,.9);line-height:1.4}
.fb-links{display:flex;flex:none;gap:clamp(20px,2.6vw,42px);font-weight:800;font-size:15px}
.fb-links a{white-space:nowrap;color:rgba(255,255,255,.85)}
.fb-links a:hover{color:#fff;text-decoration:underline}
.fb-copy{margin-top:clamp(20px,3vw,34px);font-weight:700;font-size:13.5px;color:rgba(255,255,255,.6)}
/* ---- closing CTA band ---- */
.closing{background:var(--ink);color:var(--cream);border-radius:42px;padding:clamp(40px,6vw,72px);text-align:center;margin-top:clamp(34px,5vw,64px)}
.closing h2{font-size:clamp(28px,4vw,46px);margin-bottom:14px}
.closing p{max-width:52ch;margin:0 auto 26px;color:#d8cfb8;font-size:18px;font-weight:600}
.closing .cbtn{display:inline-flex;align-items:center;gap:9px;background:var(--coral);color:var(--on-coral);font-weight:800;font-size:17px;padding:15px 30px;border-radius:999px;transition:transform .12s,filter .12s}
.closing .cbtn:hover{color:var(--on-coral);transform:translateY(-2px);filter:brightness(1.1)}
.closing .free{display:block;margin-top:12px;font-size:13.5px;font-weight:700;color:rgba(244,237,221,.6)}

/* ---- article tables -------------------------------------------------------
   The source documents compare usûls, price tiers and instruments in tables.
   They scroll inside their own wrapper so a wide comparison never widens the
   article column or the page. */
.a-tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:20px;background:#fffdf7;box-shadow:0 1px 0 rgba(24,21,9,.06),0 14px 30px rgba(24,21,9,.07)}
.a-tbl{border-collapse:collapse;width:100%;min-width:min(560px,100%);font-size:16px}
.a-tbl th,.a-tbl td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid #e7ddc6}
.a-tbl thead th{font-weight:900;font-size:13.5px;letter-spacing:.04em;text-transform:uppercase;color:#0C6C5F;white-space:nowrap}
.a-tbl tbody td{font-weight:600;color:#2c2718;line-height:1.45}
.a-tbl tbody td:first-child{font-weight:800}
.a-tbl tbody tr:last-child td{border-bottom:0}

/* ---- nav at narrow widths -------------------------------------------------
   The blog nav carries one item more than the rest of the site (Blog), so the
   row's natural width is ~1020px and it spilled past the viewport on anything
   under a wide laptop. It sheds in the site's own order: the secondary
   Download button first, then the link list — Open Ritmik, the language pills
   and the wordmark always stay. */

@media (max-width: 600px){ .nav-links{display:none} }

/* ---- Instruments mega-menu at narrow widths -------------------------------
   Same rules the rest of the site carries: the menu is absolutely positioned,
   so three 252px cards hanging off the trigger widen the whole page long
   before they are visible. Two-up, then a single stacked column. */
@media (max-width: 1120px){ .nav-menu{grid-template-columns:repeat(2,252px)} }
@media (max-width: 800px){ .nav-menu{grid-template-columns:1fr;min-width:280px} .nav-card{height:108px} .nav-card img{width:116px;right:-22px} }
.nav-links a.nav-card{white-space:normal}

/* ---- article layout on phones ---------------------------------------------
   Grid and flex children default to min-width:auto, so a long heading in the
   table of contents or a wide footer link row pushes the page sideways instead
   of wrapping. */
.toc a{overflow-wrap:anywhere}
.fb-links{flex-wrap:wrap}

/* The reading grid and the footer row are grid/flex containers, whose children
   default to min-width:auto — so a long TOC entry or the footer link list sets
   a floor wider than a phone and pushes the whole page sideways. */
.a-body-wrap>*,.fb-row>*{min-width:0;max-width:100%}
@media (max-width: 900px){
  .a-body-wrap{display:block;min-width:0}
  .toc{position:static;width:auto}
}

/* Match the main site: index/instrument pages pull this cluster in with
   margin-right:-16px on .lang and .cta-dl, giving a 10px visual gap between
   the language pills, Download and Open Ritmik. Do the same here so the bar
   is identical across the site. */
.nav-in > .nav-lang,
.nav-in > .nav-download { margin-right: -16px; }
@media (max-width: 1080px) { .nav-in > .nav-lang, .nav-in > .nav-download { margin-right: -8px; } }
@media (max-width: 600px) {
  .nav-in > .nav-lang,
  .nav-in > .nav-download { margin-right: 0; }
}

/* At 320px this row overflowed and its tail was unreachable. */
.fb-links{flex-wrap:wrap;row-gap:10px;justify-content:center}


/* 821-1000px: the nav links are still shown and the "Download Ritmik" label now
   stays visible, so the row is at its tightest here. Buy the last ~50px from
   the gaps and the button padding rather than from the label. */
@media (max-width: 1000px) and (min-width: 821px) {
  .nav-in { gap: 14px; padding-left: 18px; }
  .nav-links { gap: 14px; }
}


  /* One nav for the whole site. These buttons are a second implementation of the
     home bar's .cta / .cta-dl, and had drifted: the `font:` shorthand below resets
     line-height to normal, which made each button 3px shorter and the whole bar
     6px shorter than on the home and instrument pages, and the outline button
     carried its own padding and border width. Match the reference exactly. */
  .nav-in .nav-cta, .nav-in .nav-download { line-height: 21.75px; }
  .nav-in .nav-download { padding: 12px 22px; border-width: 1.5px; }
  .ritmik-logo { height: 26px; }