:root{
  --paper:#f6f3ec;
  --paper-2:#efeadf;
  --ink:#1b1714;
  --ink-soft:#5b554d;
  --hair:#d8d2c5;
  --accent:#8a3324;
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}
body{background:var(--paper);color:var(--ink);
  font-family:"Fraunces",Georgia,serif;font-optical-sizing:auto;
  line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.meta{font-family:"Inter",system-ui,sans-serif;font-size:.74rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* header */
header{position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--hair)}
.bar{display:flex;align-items:center;justify-content:space-between;
  height:74px}
.brand{font-size:1.18rem;font-weight:500;letter-spacing:.01em}
.brand small{font-family:"Inter",sans-serif;font-size:.62rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);
  display:block;margin-top:1px}
nav ul{display:flex;gap:30px;list-style:none}
nav a{font-family:"Inter",sans-serif;font-size:.82rem;letter-spacing:.04em;
  color:var(--ink-soft);padding:6px 0;position:relative;transition:color .2s}
nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;
  width:0;background:var(--ink);transition:width .25s ease}
nav a:hover{color:var(--ink)}
nav a:hover::after{width:100%}
nav a.here{color:var(--ink)}
nav a.here::after{width:100%}
.navbtn{display:none;background:none;border:0;font-size:1.5rem;cursor:pointer;
  color:var(--ink)}

/* article */
.post{max-width:720px;margin:0 auto;padding:76px 32px 90px}
.post .kicker{margin-bottom:18px}
.post h1{font-size:clamp(2.1rem,4.6vw,3.2rem);font-weight:300;
  line-height:1.16;letter-spacing:-.015em}
.post .byline{margin-top:16px}
.post .body{margin-top:44px;font-size:1.1rem;line-height:1.8;
  color:var(--ink-soft)}
.post .body p+p{margin-top:1.2em}
.post .body strong{color:var(--ink);font-weight:500}
.post .body em{color:var(--ink)}
.post .body a{color:var(--accent);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.post .body a:hover{opacity:.7}
.post .body h2{font-size:1.6rem;font-weight:400;color:var(--ink);
  margin:1.8em 0 .6em;letter-spacing:-.01em}
.post .body .lede{font-size:1.28rem;font-style:italic;color:var(--accent);
  line-height:1.5}
.post .back{margin-top:64px;padding-top:28px;border-top:1px solid var(--hair)}
.post .back a{font-family:"Inter",sans-serif;font-size:.78rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);
  border-bottom:1px solid var(--ink-soft);padding-bottom:2px}
.post .back a:hover{color:var(--ink);border-color:var(--ink)}

footer{border-top:1px solid var(--hair);padding:42px 0 56px}
.foot{display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:18px}
.foot .social{display:flex;gap:24px}
.foot a{font-family:"Inter",sans-serif;font-size:.8rem;color:var(--ink-soft)}
.foot a:hover{color:var(--ink)}

@media(max-width:880px){
  .wrap{padding:0 22px}
  nav ul{position:fixed;inset:74px 0 auto 0;background:var(--paper);
    flex-direction:column;gap:0;border-bottom:1px solid var(--hair);
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:.25s}
  nav ul.open{transform:none;opacity:1;pointer-events:auto}
  nav li{border-top:1px solid var(--hair)}
  nav a{display:block;padding:16px 22px;font-size:1rem}
  .navbtn{display:block}
  .post{padding:56px 22px 70px}
}

/* voicing widget */
.vw{margin:2.2em 0;padding:20px;border:1px solid var(--hair);
  background:var(--paper-2);border-radius:6px;font-family:"Inter",system-ui,sans-serif}
.vw-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.vw-row label{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin-right:4px}
.vw select{font:inherit;font-size:.85rem;padding:4px 8px;border:1px solid var(--hair);
  background:var(--paper);color:var(--ink);border-radius:4px}
.vw-btn{font:inherit;font-size:.82rem;padding:5px 11px;border:1px solid var(--hair);
  background:var(--paper);color:var(--ink-soft);border-radius:4px;cursor:pointer}
.vw-btn:hover{color:var(--ink);border-color:var(--ink-soft)}
.vw-btn.on{background:var(--accent);border-color:var(--accent);color:#fff}
.vw-btn.play{background:var(--ink);border-color:var(--ink);color:#fff}
.vw-btn.play:disabled{opacity:.5;cursor:default}
.vw-view{display:grid;grid-template-columns:1fr 240px;gap:16px;align-items:start}
.vw-kbd{width:100%;height:auto;display:block}
.vw-kbd .w{fill:#fff;stroke:#9a9385;stroke-width:1}
.vw-kbd .b{fill:#2a2622;stroke:#2a2622}
.vw-kbd .rh{fill:var(--accent)}
.vw-kbd .lh{fill:#3f5a72}
.vw-staff svg{max-width:100%;height:auto}
.vw-strip{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.vw-card{padding:8px 12px;border:1px solid var(--hair);background:var(--paper);
  border-radius:4px;cursor:pointer;min-width:96px;text-align:center}
.vw-card.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.vw-card b{display:block;font-family:"Fraunces",serif;font-size:1.1rem;font-weight:500;color:var(--ink)}
.vw-card small{display:block;font-size:.7rem;color:var(--ink-soft);margin-top:2px}
.vw-card select{margin-top:6px;font-size:.75rem}
.vw-status{font-size:.75rem;color:var(--ink-soft);margin-top:8px;min-height:1em}
@media(max-width:700px){.vw-view{grid-template-columns:1fr}}
.vw-view-stack{grid-template-columns:1fr}
.vw-view-stack .vw-staff{overflow-x:auto}