/* ==========================================================================
   Edge to Path — audio-page-v1.css
   Layout: a night page. One left-aligned reading column on Slate; each track
   is a full-width row whose only ornament is its own line, drawn from the
   measured music. Pressing Play opens a darker listening space.
   Every color and face derives from tokens.css (Brand Book §05, §06).
   One accent in this view: River. Bone carries the text.
   ========================================================================== */

body.audio-page{
  /* page tokens, derived from the brand core */
  --ap-ground:var(--slate);
  --ap-night:#171C20;              /* listening space: Slate, six points darker */
  --ap-text:var(--bone);
  --ap-soft:var(--muted-dark);     /* secondary text on Slate */
  --ap-rule:var(--hairline-dark);
  --ap-river:var(--river);
  --ap-river-lit:#8FA9B2;          /* River, lit, for lines and focus on Slate */
  color-scheme:dark;
}
body.audio-page,body.audio-page *{box-sizing:border-box}
body.audio-page{margin:0;background:var(--ap-ground);color:var(--ap-text);font:400 1.1875rem/1.7 var(--serif);-webkit-font-smoothing:antialiased}
body.audio-page :is(h1,h2,h3,p,ul,ol,figure){margin:0}
body.audio-page [hidden]{display:none!important}
body.audio-page img{display:block;max-width:100%;height:auto}
body.audio-page a{color:inherit;text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px}
body.audio-page a:hover{text-decoration-thickness:2px}
body.audio-page :focus-visible{outline:2px solid var(--ap-river-lit);outline-offset:4px}
body.audio-page main:focus{outline:none}

/* ---------- site header, menu, footer: the shared pattern of the subject pages ---------- */
body.audio-page .skip{position:absolute;left:1rem;top:-5rem;z-index:60;background:var(--bone);color:var(--ink);padding:14px 20px;font:600 14px/1.4 var(--sans)}
body.audio-page .skip:focus{top:1rem}
body.audio-page .tp-site-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px max(24px,calc((100vw - 1200px)/2));background:var(--slate);color:var(--bone);border-bottom:1px solid var(--ap-rule)}
body.audio-page .brand{display:block;color:inherit;text-decoration:none}
body.audio-page .brand img{width:140px;height:auto;max-width:100%}
body.audio-page nav.desktop{display:flex;align-items:center;gap:30px}
body.audio-page nav.desktop a{display:inline-flex;align-items:center;min-height:32px;color:var(--bone);font:500 11px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
body.audio-page nav.desktop a:hover{text-decoration:underline}
body.audio-page nav.desktop a[aria-current="page"]{border-bottom:1px solid var(--ap-river-lit)}
body.audio-page .menu-btn{display:none;width:48px;height:48px;flex-shrink:0;padding:0;align-items:center;justify-content:center;flex-direction:column;gap:5px;background:none;border:1px solid var(--muted-dark);color:var(--bone);cursor:pointer}
body.audio-page .menu-btn span{display:block;width:1.1rem;height:1px;background:currentColor}
body.audio-page dialog.mobilemenu{display:none;position:fixed;inset:0;z-index:40;background:var(--slate);padding:5.5rem 2rem 2rem;flex-direction:column;gap:1.6rem;width:100%;max-width:none;height:100%;max-height:none;margin:0;border:0;overflow-y:auto;overscroll-behavior:contain;color:var(--bone)}
body.audio-page dialog.mobilemenu.open{display:flex}
body.audio-page dialog.mobilemenu::backdrop{background:var(--slate)}
body.audio-page .mobilemenu a{flex-shrink:0;font:400 1.6rem/1.2 var(--display);color:var(--bone);text-decoration:none;min-height:44px}
body.audio-page .mobilemenu a:hover{text-decoration:underline}
body.audio-page .mobilemenu .close{position:absolute;top:1.4rem;right:1.4rem;min-width:48px;min-height:48px;background:none;border:0;color:var(--bone);font:1.4rem var(--mono);cursor:pointer}
body.audio-page .tp-site-footer{background:var(--ap-night);color:var(--bone);padding:clamp(3.5rem,7vw,5.5rem) clamp(1.25rem,6vw,4rem) 2.5rem}
body.audio-page .foot-grid{max-width:72rem;margin:auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.5rem}
body.audio-page .tp-site-footer p{max-width:22rem;margin-top:1rem;color:var(--muted-dark);font-size:.9rem;line-height:1.7}
body.audio-page .foot-col h2{margin-bottom:1.2rem;color:var(--muted-dark);font:600 var(--fs-label)/1.2 var(--sans);letter-spacing:var(--ls-label);text-transform:uppercase}
body.audio-page .foot-col a{display:block;margin-bottom:.8rem;min-height:28px;color:var(--muted-dark);font:.88rem/1.4 var(--sans)}
body.audio-page .foot-col a:hover{color:var(--bone)}
body.audio-page .footer-social{display:inline-flex;width:2.35rem;height:2.35rem;margin-top:1.25rem;align-items:center;justify-content:center;border:1px solid var(--muted-dark);color:var(--muted-dark)}
body.audio-page .footer-social svg{width:1.05rem;height:1.05rem;fill:currentColor}
body.audio-page .foot-bottom{max-width:72rem;margin:3.5rem auto 0;padding-top:1.6rem;border-top:1px solid var(--hairline-dark);color:var(--muted-dark);font:var(--fs-caption)/1.4 var(--mono);letter-spacing:.08em}

/* ---------- the reading page ---------- */
body.audio-page .ap-wrap{width:calc(100% - 48px);max-width:1040px;margin-inline:auto;padding-block:72px 96px;display:flex;flex-direction:column;gap:88px}
body.audio-page .ap-open{display:flex;flex-direction:column;gap:22px;max-width:40rem}
body.audio-page h1{font:400 clamp(3rem,9vw,4.75rem)/1.04 var(--display);letter-spacing:-.018em}
body.audio-page .ap-lede{font-size:1.3125rem;line-height:1.6}
body.audio-page .ap-two{color:var(--ap-soft);font-size:1.0625rem;line-height:1.65}

body.audio-page .ap-set{display:flex;flex-direction:column;gap:14px}
body.audio-page .ap-sethead{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 28px}
body.audio-page h2{font:400 2.25rem/1.2 var(--display);letter-spacing:-.01em;text-wrap:balance}
body.audio-page .ap-setnote{color:var(--ap-soft);font-style:italic;font-size:1.0625rem}

body.audio-page .ap-tracks{list-style:none;padding:0;margin-top:14px;border-top:1px solid var(--ap-rule)}
body.audio-page .ap-track{border-bottom:1px solid var(--ap-rule);padding-block:34px 30px;display:flex;flex-direction:column;gap:18px}
body.audio-page .ap-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 24px}
body.audio-page h3{font:400 1.75rem/1.2 var(--display);letter-spacing:-.005em}
body.audio-page .ap-len{font:400 .8125rem/1.4 var(--mono);color:var(--ap-soft);letter-spacing:.04em;font-variant-numeric:tabular-nums}
body.audio-page .ap-where{color:var(--ap-soft);font-size:1.0625rem;line-height:1.55;margin-top:-10px}
body.audio-page .ap-where b{font-weight:400;color:var(--ap-text)}

/* the track's own line: lead-instrument level across the whole piece */
body.audio-page .ap-line{position:relative;height:56px}
body.audio-page .ap-line svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
body.audio-page .ap-line polyline{fill:none;stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round}
body.audio-page .ap-line .rest{stroke:var(--ap-river-lit);opacity:.62}
body.audio-page .ap-line .played{stroke:var(--ap-text)}
body.audio-page .ap-dot{position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--ap-text);left:0;top:50%;opacity:0;transition:opacity .3s ease}
body.audio-page .ap-track.is-started .ap-dot{opacity:1}

body.audio-page .ap-controls{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
body.audio-page .ap-play{display:inline-flex;align-items:center;gap:.7rem;min-height:48px;padding:.8rem 1.5rem .8rem 1.3rem;background:var(--ap-text);color:var(--ink);border:1px solid var(--ap-text);border-radius:0;font:600 .8125rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background .2s ease,color .2s ease}
body.audio-page .ap-play:hover{background:transparent;color:var(--ap-text)}
body.audio-page .ap-play svg{width:.7rem;height:.8rem;fill:currentColor;flex:none}
body.audio-page .ap-ver{display:flex;flex-wrap:wrap;gap:6px 22px;border:0;padding:0;margin:0;min-width:0}
body.audio-page .ap-ver legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
body.audio-page .ap-ver label{display:inline-flex;align-items:center;gap:.55rem;min-height:32px;font:500 .875rem/1.3 var(--sans);color:var(--ap-soft);cursor:pointer}
body.audio-page .ap-ver input{appearance:none;-webkit-appearance:none;width:14px;height:14px;margin:0;border:1px solid var(--ap-soft);border-radius:50%;background:transparent;flex:none;cursor:pointer}
body.audio-page .ap-ver input:checked{border-color:var(--ap-text);background:radial-gradient(circle,var(--ap-text) 0 3.5px,transparent 4px)}
body.audio-page .ap-ver input:checked+span{color:var(--ap-text)}

body.audio-page .ap-more{display:flex;flex-wrap:wrap;gap:8px 30px;align-items:flex-start}
body.audio-page .ap-more details{min-width:0;font:400 .9375rem/1.65 var(--sans);color:var(--ap-soft)}
body.audio-page .ap-more details[open]{flex-basis:100%}
body.audio-page .ap-more summary{cursor:pointer;width:fit-content;min-height:32px;display:flex;align-items:center;gap:.5rem;list-style:none;color:var(--ap-text);font-weight:500}
body.audio-page .ap-more summary span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em}
body.audio-page .ap-more summary:hover span{text-decoration-thickness:2px}
body.audio-page .ap-more summary::-webkit-details-marker{display:none}
body.audio-page .ap-more summary::before{content:"+";font-family:var(--mono);display:inline-block;width:.8em}
body.audio-page .ap-more details[open] summary::before{content:"\2212"}
body.audio-page .ap-under{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 44px;padding-top:14px;max-width:60rem}
body.audio-page .ap-under p{max-width:34rem}
body.audio-page .ap-under p+p{margin-top:.8em}
body.audio-page .ap-num{font-family:var(--mono);font-size:.92em;color:var(--ap-text);white-space:nowrap}
body.audio-page .ap-curve{align-self:start}
body.audio-page .ap-curve svg{display:block;width:100%;height:auto;overflow:visible}
body.audio-page .ap-curve text{font:400 11px var(--mono);fill:var(--ap-soft)}
body.audio-page .ap-curve .axis{stroke:var(--ap-rule);stroke-width:1;fill:none}
body.audio-page .ap-curve .beat{stroke:var(--ap-river-lit);stroke-width:1.5;fill:none}
body.audio-page .ap-curve figcaption{margin-top:8px;font:400 .75rem/1.5 var(--mono);color:var(--ap-soft)}

body.audio-page .ap-notes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px 72px}
body.audio-page .ap-notes>div{display:flex;flex-direction:column;gap:18px;min-width:0}
body.audio-page .ap-notes h2{font-size:1.875rem}
body.audio-page .ap-notes p,body.audio-page .ap-notes li{font-size:1.0625rem;line-height:1.7;max-width:34rem}
body.audio-page .ap-care{list-style:none;padding:0;display:flex;flex-direction:column;gap:12px}
body.audio-page .ap-care li{padding-left:1.4rem;position:relative}
body.audio-page .ap-care li::before{content:"";position:absolute;left:0;top:.85em;width:.7rem;height:1px;background:var(--ap-river-lit)}
body.audio-page .ap-small{color:var(--ap-soft);font:400 .9375rem/1.65 var(--sans)}
body.audio-page .ap-terms{border-top:1px solid var(--ap-rule);padding-top:26px;display:flex;flex-direction:column;gap:8px;max-width:44rem}

/* ---------- the listening space ---------- */
body.audio-page .ap-listen{position:fixed;inset:0;z-index:50;background:var(--ap-night);color:var(--ap-text);display:flex;flex-direction:column;justify-content:space-between}
body.audio-page .ap-listen canvas{position:absolute;inset:0;width:100%;height:100%;display:block;transition:opacity 1.2s ease}
body.audio-page .ap-listen .top,body.audio-page .ap-listen .bottom{position:relative;z-index:2;padding-inline:max(20px,env(safe-area-inset-left,0px));transition:opacity .6s ease}
body.audio-page .ap-listen .top{padding-top:calc(18px + env(safe-area-inset-top,0px));display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
body.audio-page .ap-listen .bottom{padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:14px}
body.audio-page .ap-now h2{font:400 1.5rem/1.2 var(--display)}
body.audio-page .ap-now p{margin-top:4px;font:400 .8125rem/1.4 var(--sans);color:var(--ap-soft);letter-spacing:.04em}
/* The controls on the listening screen stay quiet so the light can carry the screen: no boxes around every choice,
   sentence case, one accent. The page itself keeps the site's own buttons. */
body.audio-page .ap-listen button:focus-visible{outline:2px solid var(--ap-river-lit);outline-offset:3px}
body.audio-page .ap-quiet{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:0 2px;background:none;border:0;border-radius:0;color:var(--ap-soft);font:500 .9375rem/1 var(--sans);cursor:pointer}
body.audio-page .ap-quiet:hover{color:var(--ap-text)}
body.audio-page .ap-quiet[aria-pressed="true"],body.audio-page .ap-quiet[aria-expanded="true"]{color:var(--ap-river-lit)}
body.audio-page .ap-quiet svg{width:10px;height:6px;fill:none;stroke:currentColor;stroke-width:1.4;transition:transform .2s ease}
body.audio-page .ap-quiet[aria-expanded="true"] svg{transform:rotate(180deg)}
body.audio-page .ap-transport{display:flex;align-items:center;gap:16px}
body.audio-page .ap-pp{flex:none;width:44px;height:44px;display:grid;place-items:center;background:rgba(23,28,32,.4);border:1px solid var(--ap-rule);border-radius:0;color:var(--ap-text);cursor:pointer}
body.audio-page .ap-pp:hover{border-color:var(--ap-soft)}
body.audio-page .ap-pp svg{width:13px;height:13px;fill:currentColor;grid-area:1/1}
body.audio-page .ap-pp[data-state="playing"] .i-play,body.audio-page .ap-pp[data-state="paused"] .i-pause{display:none}
body.audio-page .ap-back{flex:none;width:36px;height:44px;margin-left:-6px;display:grid;place-items:center;background:none;border:0;border-radius:0;color:var(--ap-soft);cursor:pointer}
body.audio-page .ap-back:hover{color:var(--ap-text)}
body.audio-page .ap-back svg{width:13px;height:13px;fill:currentColor}
body.audio-page .ap-time{font:400 .8125rem/1 var(--mono);color:var(--ap-soft);font-variant-numeric:tabular-nums;min-width:6.4rem;text-align:right}
body.audio-page .ap-seek{flex:1;min-width:0;height:44px;display:flex;align-items:center;cursor:pointer;background:none;border:0;padding:0}
body.audio-page .ap-seek .rail{width:100%;height:1px;background:var(--ap-rule);position:relative}
body.audio-page .ap-seek .fill{position:absolute;left:0;top:-.5px;height:2px;width:0;background:var(--ap-river-lit)}
body.audio-page .ap-toggles{display:flex;align-items:center;justify-content:space-between;gap:16px}
body.audio-page .ap-panel{display:grid;gap:16px;padding-top:16px;border-top:1px solid var(--ap-rule)}
body.audio-page .ap-panel[hidden]{display:none}
body.audio-page .ap-opt{display:grid;gap:7px;min-width:0}
body.audio-page .ap-opt-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:500 .875rem/1.2 var(--sans);color:var(--ap-text)}
body.audio-page .ap-opt-head .note{color:var(--ap-soft);font-weight:400;font-size:.8125rem;text-align:right}
body.audio-page .ap-seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border:1px solid var(--ap-rule);background:rgba(23,28,32,.4)}
body.audio-page .ap-seg button{min-height:40px;padding:0 2px;background:none;border:0;border-left:1px solid var(--ap-rule);border-radius:0;color:var(--ap-soft);font:500 .875rem/1 var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap;cursor:pointer}
body.audio-page .ap-seg button:first-child{border-left:0}
body.audio-page .ap-seg button:hover{color:var(--ap-text)}
body.audio-page .ap-seg button[aria-pressed="true"]{background:rgba(143,169,178,.22);color:var(--ap-text);box-shadow:inset 0 -2px 0 var(--ap-river-lit)}
body.audio-page .ap-switch{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:40px;padding:0;background:none;border:0;border-radius:0;color:var(--ap-text);font:500 .875rem/1.2 var(--sans);text-align:left;cursor:pointer}
body.audio-page .ap-switch .track{flex:none;position:relative;width:40px;height:22px;border:1px solid var(--ap-soft)}
body.audio-page .ap-switch .knob{position:absolute;top:3px;left:3px;width:14px;height:14px;background:var(--ap-soft);transition:transform .2s ease,background-color .2s ease}
body.audio-page .ap-switch[aria-pressed="true"] .track{border-color:var(--ap-river-lit);background:rgba(143,169,178,.18)}
body.audio-page .ap-switch[aria-pressed="true"] .knob{transform:translateX(18px);background:var(--ap-river-lit)}
body.audio-page .ap-msg{font:400 .8125rem/1.4 var(--sans);color:var(--ap-soft)}
body.audio-page .ap-msg:empty{display:none}
@media (min-width:861px){
  body.audio-page .ap-panel{grid-template-columns:minmax(0,22rem) minmax(0,26rem) minmax(0,13rem);gap:32px;align-items:end}
  body.audio-page .ap-switch{min-height:42px}
}
body.audio-page .ap-listen.dim .top,body.audio-page .ap-listen.dim .bottom{opacity:.16}
body.audio-page .ap-listen.dim canvas{opacity:0}

@media (max-width:860px){
  body.audio-page nav.desktop{display:none}
  body.audio-page .menu-btn{display:inline-flex}
  body.audio-page .tp-site-header{padding:20px}
  body.audio-page .foot-grid{grid-template-columns:1fr 1fr}
  body.audio-page .ap-wrap{width:calc(100% - 40px);padding-block:48px 72px;gap:64px}
  body.audio-page .ap-notes{grid-template-columns:minmax(0,1fr)}
  body.audio-page .ap-under{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  body.audio-page{font-size:1.0625rem}
  body.audio-page .foot-grid{grid-template-columns:1fr}
  body.audio-page .ap-lede{font-size:1.1875rem}
  body.audio-page h2{font-size:1.875rem}
  body.audio-page h3{font-size:1.5rem}
  body.audio-page .ap-line{height:44px}
  body.audio-page .ap-time{min-width:5.6rem}
}
@media (prefers-reduced-motion:reduce){
  body.audio-page .ap-listen canvas,body.audio-page .ap-listen .top,body.audio-page .ap-listen .bottom,body.audio-page .ap-dot,body.audio-page .ap-play{transition:none}
  body.audio-page .ap-quiet svg,body.audio-page .ap-switch .knob{transition:none}
}