@font-face{font-family:Bebas;src:url('/fonts/bebas-neue.woff') format('woff');font-display:swap}
@font-face{font-family:Source;src:url('/fonts/source-serif-4.woff') format('woff');font-display:swap}
@font-face{font-family:Source;src:url('/fonts/source-serif-4-italic.woff') format('woff');font-style:italic;font-display:swap}
@font-face{font-family:Source;src:url('/fonts/source-serif-4-600.woff') format('woff');font-weight:600;font-display:swap}
@font-face{font-family:Condensed;src:url('/fonts/roboto-condensed.woff') format('woff');font-display:swap}
@font-face{font-family:Condensed;src:url('/fonts/roboto-condensed-700.woff') format('woff');font-weight:700;font-display:swap}
:root{
  color-scheme:light;
  --color-paper:#f5f1e7;--color-surface:#ece5d6;--color-ink:#20201c;--color-muted:#686456;
  --color-accent:#f2a541;--color-accent-ink:#20201c;--color-line:#c7bead;--color-deep:#232923;
  --color-inverse:#f5f1e7;--color-inverse-muted:#cec9bb;--color-focus:#1b5c7b;--color-blue:#355a78;
  --color-pages:#eee9dd;--color-device:#252624;
  --font-display:Bebas,'Arial Narrow',sans-serif;--font-body:Source,Georgia,serif;--font-label:Condensed,'Arial Narrow',sans-serif;
  --type-hero:clamp(80px,9.2vw,136px);--type-heading:clamp(48px,5.8vw,84px);
  --type-body:18px;--type-label:14px;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;--space-24:96px;
  --radius-control:3px;--radius-device:16px;
  --ease-soft:cubic-bezier(.22,1,.36,1);--duration-fast:180ms;--duration-control:320ms;--duration-object:800ms;--duration-scene:650ms;
  --shadow-book:0 2px 2px #0002,10px 18px 24px #27201220;--shadow-device:4px 8px 0 #111,12px 24px 32px #0003;
  --page-width:1280px;
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--color-paper:#1d201b;--color-surface:#292d25;--color-ink:#f5f1e7;--color-muted:#c3bcab;--color-line:#5d6454;--color-focus:#9ed0e5;--color-blue:#a7c6da;--shadow-book:0 2px 2px #0008,10px 18px 24px #0005}}
:root[data-theme="dark"]{color-scheme:dark;--color-paper:#1d201b;--color-surface:#292d25;--color-ink:#f5f1e7;--color-muted:#c3bcab;--color-line:#5d6454;--color-focus:#9ed0e5;--color-blue:#a7c6da;--shadow-book:0 2px 2px #0008,10px 18px 24px #0005}
@media(prefers-reduced-motion:reduce){:root{--duration-fast:0ms;--duration-control:0ms;--duration-object:0ms;--duration-scene:0ms}}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;background:var(--color-paper);color:var(--color-ink);font:var(--type-body)/1.65 var(--font-body);-webkit-font-smoothing:antialiased}
button,input,select{font:inherit}
button,a,input,summary{touch-action:manipulation}
button,summary{cursor:pointer}
button,a{ -webkit-tap-highlight-color:transparent }
a{color:inherit;text-underline-offset:5px}
img{max-width:100%;display:block}
h1,h2,h3,h4,p,figure{margin:0}
h1,h2,h3{font-weight:400}
h1,h2,h3{font-family:var(--font-display);line-height:.98}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,select:focus-visible{outline:3px solid var(--color-focus);outline-offset:5px}
button:disabled{cursor:default;opacity:.6}
::selection{background:var(--color-accent);color:#20201c}
.wrap{width:min(var(--page-width),calc(100% - 112px));margin-inline:auto}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.skip-link{position:fixed;left:20px;top:-80px;z-index:50;padding:12px 18px;background:var(--color-ink);color:var(--color-paper)}
.skip-link:focus{top:12px}
.eyebrow{font:14px/1.4 var(--font-label);letter-spacing:.12em;text-transform:uppercase}
.quiet{color:var(--color-muted)}
.site-header{position:relative;z-index:10;background:var(--color-paper)}
.header-inner{min-height:104px;display:flex;align-items:center;justify-content:space-between;gap:30px;border-bottom:1px solid var(--color-line)}
.brand{--brand-title-size:32px;--brand-subtitle-size:12px;--brand-line-gap:3px;--brand-ink-top:calc(var(--brand-title-size)*.09);--brand-ink-bottom:calc(var(--brand-subtitle-size)*.24482421875);display:inline-flex;align-items:center;gap:14px;min-height:44px;text-decoration:none}
.brand-copy{display:flex;flex-direction:column}
/* Author screenshot: fit the visible 976 x 1167 clef-and-book mark, excluding its transparent canvas.
   Optical insets follow the bundled Bebas/Roboto glyph metrics, not the line-box edges. */
.brand-mark{display:block;height:calc(var(--brand-title-size) + var(--brand-line-gap) + var(--brand-subtitle-size)*1.6 - var(--brand-ink-top) - var(--brand-ink-bottom));aspect-ratio:976/1167;flex:none;margin-top:var(--brand-ink-top);margin-bottom:var(--brand-ink-bottom);background:currentColor;-webkit-mask:url('/assets/logo-clef-book.webp') 50% 41.3793103%/128.4836066% 107.4550129% no-repeat;mask:url('/assets/logo-clef-book.webp') 50% 41.3793103%/128.4836066% 107.4550129% no-repeat}
.brand strong{font:var(--brand-title-size)/1 var(--font-display);letter-spacing:.01em;font-weight:400}
.brand small{font:var(--brand-subtitle-size)/1.6 var(--font-label);letter-spacing:.04em;color:var(--color-muted);margin-top:var(--brand-line-gap)}
.navigation{display:flex;gap:28px;align-items:center;font:16px/1.3 var(--font-label)}
.navigation a{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;position:relative}
.navigation a:after{position:absolute;content:'';bottom:5px;left:0;right:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--duration-control) var(--ease-soft)}
.navigation a:hover:after,.navigation a[aria-current="page"]:after{transform:scaleX(1)}
.navigation .join{border:1px solid var(--color-line);padding:0 18px}
.navigation .join:after{display:none}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:26px;min-height:54px;padding:12px 24px;border:1px solid var(--color-ink);background:var(--color-ink);color:var(--color-paper);font:16px/1.3 var(--font-label);text-decoration:none;border-radius:var(--radius-control);transition:background var(--duration-control),color var(--duration-control),transform var(--duration-control) var(--ease-soft)}
.button:hover{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-accent-ink);transform:translateY(-2px)}
.button:active{transform:translateY(0) scale(.985)}
.button.secondary{background:transparent;color:var(--color-ink);border-color:var(--color-line)}
.button.secondary:hover{border-color:var(--color-ink)}
.arrow{font:24px/1 Arial,sans-serif;display:inline-block;transition:transform var(--duration-control) var(--ease-soft)}
a:hover>.arrow,a:hover .arrow{transform:translateX(5px)}
.site-footer{border-top:1px solid var(--color-line);padding:40px 0 24px}
.footer-top{display:flex;justify-content:space-between;gap:40px;align-items:start}
.footer-series{max-width:350px;font-size:17px;line-height:1.6}
.footer-bottom{display:flex;justify-content:space-between;gap:30px;margin-top:34px;font:14px/1.5 var(--font-label);color:var(--color-muted);flex-wrap:wrap}
.footer-bottom>div{display:flex;gap:24px;flex-wrap:wrap}
.page-heading{padding:64px 0 35px}
.page-heading h1{font-size:var(--type-heading);margin-top:20px;max-width:900px}
.page-heading p{max-width:650px;margin-top:24px}
.audio-home-list{list-style:none;padding:0;margin:30px 0 70px;max-width:1000px}
.audio-home-list li{border-top:1px solid var(--color-line)}
.audio-home-list a{min-height:100px;display:grid;grid-template-columns:60px 1fr 30px;align-items:center;gap:24px;text-decoration:none;padding:18px 0}
.part-index-number{font:42px/1 var(--font-display)}
.audio-home-list h2{font:32px/1.1 var(--font-display)}
.audio-home-list small{font:14px/1.5 var(--font-label);color:var(--color-muted);display:block;margin-top:8px}
.example-search{display:flex;gap:12px;max-width:650px;margin:30px 0;align-items:end;flex-wrap:wrap}
.example-search label{display:block;font:15px/1.4 var(--font-label);margin-bottom:8px}
.example-search input{min-height:54px;padding:10px 14px;background:var(--color-paper);color:var(--color-ink);border:1px solid var(--color-muted);width:260px;max-width:100%}
/* Audio: deliberately still, compact and light. */
.audio-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:100px;padding:55px 0 75px}
.audio-main{grid-column:2;grid-row:1;max-width:650px}
.audio-sidebar{grid-column:1;grid-row:1}
.audio-context{font:14px/1.5 var(--font-label);color:var(--color-muted)}
.example-number{font:16px/1.4 var(--font-label);letter-spacing:.1em;text-transform:uppercase;margin:25px 0 12px;display:flex;gap:10px;align-items:center}
.example-number:before{content:'';width:8px;height:8px;background:var(--color-accent)}
.example-title{font-size:54px;line-height:1.05}
.playback{margin-top:28px}
.play-main{width:100%;height:86px;border:0;border-radius:3px;background:var(--color-accent);color:#20201c;font:26px/1 var(--font-label);display:flex;align-items:center;justify-content:center;gap:20px;transition:background var(--duration-fast),box-shadow var(--duration-fast)}
.play-main:hover{box-shadow:inset 0 0 0 2px #20201c}
.play-mark{width:0;height:0;border-left:17px solid #20201c;border-top:10px solid transparent;border-bottom:10px solid transparent}
[data-player-state="playing"] .play-mark{width:20px;height:23px;border:0;border-inline:6px solid #20201c}
.progress-wrap{margin-top:12px}
.progress-wrap input{width:100%;height:44px;accent-color:var(--color-ink);cursor:pointer;margin:0}
.time-labels{display:flex;justify-content:space-between;font:13px/1.5 var(--font-label);color:var(--color-muted)}
.player-status{min-height:20px;font:13px/1.5 var(--font-label);color:var(--color-muted);margin-top:8px}
.native-audio{width:100%;margin-block:20px}
.next-example{display:flex;justify-content:space-between;align-items:center;gap:20px;border-block:1px solid var(--color-line);min-height:80px;padding:15px 0;margin-top:18px;text-decoration:none;font:20px/1.4 var(--font-label)}
.next-example small{font:13px/1.5 var(--font-label);display:block;color:var(--color-muted);margin-top:5px}
.practice-controls{display:flex;gap:14px;margin-top:24px}
.practice-controls button{min-height:48px;min-width:90px;border:1px solid var(--color-line);background:none;color:var(--color-ink);padding:10px 16px;font:16px/1.4 var(--font-label);transition:background var(--duration-fast)}
.practice-controls button[aria-pressed="true"]{background:var(--color-surface);border-color:var(--color-ink)}
.what-you-hear{padding:32px 0}
.what-you-hear h2{font:14px/1.4 var(--font-label);text-transform:uppercase;letter-spacing:.1em;margin-bottom:16px}
.what-you-hear p{font-size:17px}
.audio-sidebar h2{font-size:30px;margin-top:15px}
.part-list{list-style:none;padding:0;margin:28px 0}
.part-list a{display:grid;grid-template-columns:32px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--color-line);font:15px/1.5 var(--font-label);text-decoration:none;min-height:52px}
.part-list a[aria-current="page"]{font-weight:700;border-left:3px solid var(--color-accent);padding-left:12px}
.part-list a[aria-current="page"] .list-title:after{content:'Current example';display:block;font-size:12px;font-weight:400}
.part-example-row{border-top:1px solid var(--color-line);padding:26px 0;display:grid;grid-template-columns:70px 1fr 320px;gap:25px;align-items:start}
.part-example-row h2{font-size:29px}
.part-example-row p{font-size:15px;color:var(--color-muted);margin-top:12px}
.part-example-row audio{width:100%;height:44px}
.pending-notice{padding:22px;background:var(--color-surface);margin-top:25px;border-left:3px solid var(--color-accent);font:17px/1.6 var(--font-body)}
html:not(.audio-enhanced) .play-main,html:not(.audio-enhanced) .progress-wrap,html:not(.audio-enhanced) .player-status,html:not(.audio-enhanced) .practice-controls{display:none}
@media(max-width:850px){.audio-layout{display:block}.audio-sidebar{margin-top:50px}.audio-main{max-width:none}.part-example-row{grid-template-columns:50px 1fr}.part-example-row audio{grid-column:2}.wrap{width:calc(100% - 48px)}}
@media(max-width:600px){html{scroll-padding-top:24px}.wrap{width:calc(100% - 40px)}.header-inner{min-height:0}.brand{--brand-title-size:24px;--brand-subtitle-size:11px}.navigation{gap:6px}.footer-top,.footer-bottom{display:block}.footer-bottom>div{flex-wrap:wrap}.footer-bottom a{overflow-wrap:anywhere}.page-heading{padding:38px 0 20px}.page-heading h1{font-size:48px}.page-heading p{font-size:17px;margin-top:20px} .audio-page .header-inner{display:flex;align-items:center;padding:14px 0;gap:12px}
 .audio-page .brand{gap:10px;--brand-title-size:clamp(19px,5.7vw,24px);--brand-subtitle-size:10px}
 .audio-page .navigation{margin:0}.audio-page .navigation a{font-size:13px}
 .audio-page .navigation a:first-child{display:none}
 .audio-layout{padding:22px 0 50px}.audio-context{font-size:12px;max-width:310px}
 .example-number{font-size:13px;margin:18px 0 9px}
 .example-title{font-size:36px}.playback{margin-top:12px}
 .play-main{height:80px;font-size:23px}.progress-wrap{margin-top:8px}.time-labels{font-size:12px}
 .player-status{font-size:12px;margin-top:3px}
 .next-example{min-height:68px;margin-top:8px;padding:11px 0;font-size:18px}.next-example small{font-size:12px;max-width:265px}
 .practice-controls{margin-top:22px}.practice-controls button{flex:1}
 .what-you-hear{padding-top:26px}.what-you-hear p{font-size:16px}
 .audio-home-list a{grid-template-columns:36px 1fr 20px;gap:18px}.audio-home-list h2{font-size:28px}
 .part-example-row{gap:16px;padding:22px 0}.part-example-row h2{font-size:26px}
 .example-search{gap:10px}.example-search>div{flex:1;min-width:0}.example-search input{width:100%;min-width:0}.example-search .button{padding:12px 16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}