/* LifeMusic design tokens, ported from the design system (reference/life-music-prototype).
   Dark only, like the app: one near-black surface family and a single accent for links. */
@font-face{font-family:'Plus Jakarta Sans';src:url('/fonts/PlusJakartaSans-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url('/fonts/PlusJakartaSans-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url('/fonts/PlusJakartaSans-ExtraBold.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap}

:root{
  --surface-app:#1A1A1A;
  --surface-card:#242424;
  --text-primary:#FFFFFF;
  --text-secondary:rgba(255,255,255,0.72);
  --text-tertiary:rgba(255,255,255,0.5);
  --brand-accent:#FF3EA5;
  --brand-accent-soft:rgba(255,62,165,0.16);
  --rule:rgba(255,255,255,0.12);
  --font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{overflow-wrap:break-word;margin:0;background:var(--surface-app);color:var(--text-primary);font:400 17px/1.6 var(--font-family)}

.wrap{max-width:46rem;margin:0 auto;padding:0 1.25rem}

header.site{border-bottom:1px solid var(--rule)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:1rem;padding-bottom:1rem}
header.site img{display:block;height:40px;width:auto}
header.site nav a{margin-left:1.25rem;color:var(--text-secondary);text-decoration:none;font-weight:600;font-size:15px}
header.site nav a:hover,header.site nav a:focus-visible{color:var(--text-primary)}

main{padding:2.5rem 0 4rem}
h1{font:800 clamp(2rem,6vw,2.75rem)/1.1 var(--font-family);margin:0 0 .5rem;letter-spacing:-.01em}
h2{font:800 1.5rem/1.2 var(--font-family);margin:2.5rem 0 .75rem}
h3{font:600 1.1rem/1.3 var(--font-family);margin:1.5rem 0 .5rem}
p,li{color:var(--text-secondary)}
p{margin:.75rem 0}
ul,ol{padding-left:1.25rem}
li{margin:.35rem 0}
strong{color:var(--text-primary);font-weight:600}
a{color:var(--brand-accent);text-underline-offset:3px}
a:focus-visible{outline:2px solid var(--brand-accent);outline-offset:3px;border-radius:2px}
.meta{color:var(--text-tertiary);font-size:15px;margin:0 0 2rem}
.lede{font-size:1.2rem;color:var(--text-primary);font-weight:600;max-width:34rem}

.card{background:var(--surface-card);border:1px solid var(--rule);border-radius:16px;padding:1.25rem 1.5rem;margin:1.5rem 0}
.card p:first-child{margin-top:0}.card p:last-child{margin-bottom:0}

table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:15px}
th,td{text-align:left;vertical-align:top;padding:.65rem .75rem;border-bottom:1px solid var(--rule);color:var(--text-secondary);overflow-wrap:anywhere}
th{color:var(--text-primary);font-weight:600}

footer.site{border-top:1px solid var(--rule);padding:1.5rem 0 2.5rem;color:var(--text-tertiary);font-size:14px}
footer.site a{color:var(--text-secondary);margin-right:1.25rem}

@media (max-width:30rem){
  header.site .wrap{flex-direction:column;align-items:flex-start;gap:.75rem}
  header.site nav a{margin:0 1rem 0 0}
  th,td{padding:.5rem .4rem}
}

/* The logo artwork sits on pure black. `lighten` keeps the larger of the logo's and the page's
   colour per pixel, so the black drops out and the white remains, on any surface. */
header.site img,.hero img{mix-blend-mode:lighten}
.hero{padding:1rem 0 .5rem}
.hero img{display:block;width:min(100%,22rem);height:auto;margin:0 0 1.5rem -.5rem}