/* ============================================================================
   newmedley.com — THE MASTER STYLESHEET
   ----------------------------------------------------------------------------
   Every page links exactly one CSS file. To re-theme the entire site, point the
   shell at a different one — no page is restyled, no markup is touched.

   That is only true while this file holds ALL the styling. The moment a page
   carries its own <style> block, "swap one file" quietly becomes "swap one file
   and hunt for the exceptions", which is the same defect as a second source of
   truth. If a page needs something unique, it earns a class in here.

   The palette is the entire theme surface. A new theme can redefine only the
   custom properties below and inherit every layout decision, or it can replace
   the file wholesale. Both are supported on purpose.
   ============================================================================ */

:root{
  --paper:#f7f7f4; --ink:#191d1c; --dim:#5b6360; --rule:#dcdcd4;
  --accent:#0d6b60;            /* deep, not the neon teal every AI site uses */
  --brass:#8a6f2e;
  --measure:34rem;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:"Inter var",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root{--paper:#121514;--ink:#e6e9e6;--dim:#96a09c;--rule:#242a28;--accent:#4fbdaa;--brass:#c9a961}
}
:root[data-theme=dark]{--paper:#121514;--ink:#e6e9e6;--dim:#96a09c;--rule:#242a28;--accent:#4fbdaa;--brass:#c9a961}
:root[data-theme=light]{--paper:#f7f7f4;--ink:#191d1c;--dim:#5b6360;--rule:#dcdcd4;--accent:#0d6b60;--brass:#8a6f2e}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:1.0625rem/1.65 var(--serif);
     text-rendering:optimizeLegibility}

/* The masthead is a programme heading, not a hero. No gradient, no glow, no giant claim. */
header.mast{border-bottom:1px solid var(--rule)}
.wrap{max-width:64rem;margin:0 auto;padding:0 1.5rem}
.mast .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:baseline;padding-block:1.4rem}
.brand{font:600 1.05rem/1 var(--sans);letter-spacing:.02em;color:var(--ink);text-decoration:none;
       white-space:nowrap}
.brand span{color:var(--accent)}
.tag{font:0.78rem/1.4 var(--sans);color:var(--dim);letter-spacing:.04em}

/* The track listing. A reader can jump; they are not trapped inside a scroll. */
nav.tracks{border-bottom:1px solid var(--rule);position:sticky;top:0;background:var(--paper);z-index:5}
nav.tracks .wrap{display:flex;gap:1.4rem;overflow-x:auto;padding-block:.7rem;scrollbar-width:none}
nav.tracks .wrap::-webkit-scrollbar{display:none}
nav.tracks a{font:0.82rem/1 var(--sans);color:var(--dim);text-decoration:none;white-space:nowrap;
             padding-block:.25rem;border-bottom:2px solid transparent}
nav.tracks a:hover{color:var(--ink)}
nav.tracks a.on{color:var(--ink);border-bottom-color:var(--accent)}

main{padding-block:3rem 4rem}
main .wrap{max-width:calc(var(--measure) + 3rem)}

h1{font:400 clamp(1.9rem,4.4vw,2.7rem)/1.18 var(--serif);margin:0 0 1.2rem;text-wrap:balance;
   letter-spacing:-0.012em}
h2{font:600 1.28rem/1.3 var(--sans);margin:3rem 0 .8rem;text-wrap:balance;letter-spacing:-0.01em}
h3{font:600 1rem/1.4 var(--sans);margin:2rem 0 .5rem}
h2+h3{margin-top:1rem}
p{margin:0 0 1.05rem;max-width:var(--measure)}
strong{font-weight:600}
a{color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:.06em}
ul{margin:0 0 1.05rem;padding-left:1.1rem;max-width:var(--measure)}
li{margin-bottom:.4rem}
hr{border:0;border-top:1px solid var(--rule);margin:2.6rem 0}
code{font:0.86em/1 var(--mono);background:color-mix(in srgb,var(--rule) 60%,transparent);
     padding:.12em .35em;border-radius:3px}

/* A quoted aside is a margin note in the programme, not a pull-quote shout. */
blockquote{margin:1.6rem 0;padding:.2rem 0 .2rem 1.1rem;border-left:2px solid var(--brass);
           color:var(--dim);max-width:var(--measure)}
blockquote p{margin-bottom:.6rem}
blockquote p:last-child{margin-bottom:0}

.scroll{overflow-x:auto;margin:0 0 1.4rem}
table{border-collapse:collapse;font:0.92rem/1.5 var(--sans);min-width:100%}
th,td{text-align:left;padding:.55rem .8rem;border-bottom:1px solid var(--rule);vertical-align:top}
th{font-weight:600;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}

footer{border-top:1px solid var(--rule);padding-block:2rem 3rem;font:0.86rem/1.6 var(--sans);
       color:var(--dim)}
footer .wrap{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;justify-content:space-between}
footer a{color:var(--dim)}
.src{font:0.72rem/1.5 var(--mono);color:var(--dim);opacity:.75}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}