/* Shared base. Each page sets its own field color + one character motif on <body class="p-...">. */
:root{
  --paper:#f1d9bd; --paper-2:#e9c7a1;
  --ink:#2b1713; --ink-soft:#5a3a30;
  --accent:#8f2a24; --on-accent:#fbf0e4;
  --ember:#df7b58; --plum:#3f1a26; --night:#1e1412;
  --field:var(--paper); --field-ink:var(--ink); --field-soft:var(--ink-soft); --field-accent:var(--accent);
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#24150f; --paper-2:#2e1b13;
    --ink:#f3e2cf; --ink-soft:#c9ab94;
    --accent:#e46b4f; --on-accent:#1e1210;
    --plum:#2c111a; --night:#140d0b;
  }
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:Archivo,system-ui,sans-serif;font-size:17px;line-height:1.55;color:var(--field-ink);background:var(--field);min-height:100dvh;display:flex;flex-direction:column}
main{flex:1}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.45;mix-blend-mode:multiply;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .3 0 0 0 0 .14 0 0 0 .28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (prefers-color-scheme:dark){body::before{mix-blend-mode:screen;opacity:.12}}
a{color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:2px}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
img{display:block;width:100%;height:100%;object-fit:cover}
.wrap{max-width:1400px;margin:0 auto;padding:0 6vw}

/* header: logo mark + one-line nav */
.top{position:relative;z-index:10;height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 6vw;font-size:15px}
.top.over{position:absolute;inset:0 0 auto;color:#f6e6d6}
.mark{display:block;width:62px;height:72px;background:currentColor;-webkit-mask:url(/img/logo.svg?v=3) center/contain no-repeat;mask:url(/img/logo.svg?v=3) center/contain no-repeat}
.top nav{display:flex;gap:22px}
.top nav a{text-decoration:none}
.top nav a:hover,.top nav a[aria-current]{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}

h1,h2{font-weight:900;font-stretch:125%;text-transform:uppercase;line-height:.92;letter-spacing:-.015em;color:var(--field-accent)}
h1{font-size:clamp(52px,9vw,140px)}
h2{font-size:clamp(34px,4.4vw,64px)}
h3{font-weight:900;font-stretch:118%;text-transform:uppercase;line-height:1;color:var(--field-accent)}
.lede{font-size:clamp(18px,1.5vw,21px);max-width:42ch;color:var(--field-soft)}
.page-head{padding:7vw 0 6vw;display:grid;gap:26px}

.btn{display:inline-block;align-self:flex-start;background:var(--field-accent);color:var(--on-accent);text-decoration:none;font-weight:700;
  padding:14px 28px;border-radius:999px;white-space:nowrap;transition:transform .25s cubic-bezier(.16,1,.3,1)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.98)}

footer{position:relative;z-index:2;padding:56px 0}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px}
footer a{font-weight:700}

@media (prefers-reduced-motion:no-preference){
  .rise{animation:rise 1s cubic-bezier(.16,1,.3,1) both}
  @supports (animation-timeline:view()){
    .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
  }
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@keyframes rise{from{opacity:0;translate:0 36px}}

@media (max-width:767px){
  body{font-size:16px}
  .wrap,.top{padding-left:16px;padding-right:16px}
  .top nav{gap:12px;font-size:14px}
  .top nav .opt{display:none}
}

/* ---------- page characters ---------- */

/* scores: engraved staff lines behind everything */
.p-scores{--field:var(--paper)}
.p-scores main{background-image:repeating-linear-gradient(to bottom,transparent 0 9px,color-mix(in srgb,var(--accent) 20%,transparent) 9px 10px,transparent 10px 50px);background-size:100% 120px;background-position:0 40px}

/* recordings: night field, coral type */
.p-recordings{--field:var(--night);--field-ink:#f0dcc8;--field-soft:#c7a891;--field-accent:#f1a184;--on-accent:#2a120c}

/* instruments: workshop graph paper */
.p-instruments{--field:var(--paper)}
.p-instruments main{background-image:
  linear-gradient(color-mix(in srgb,var(--ink) 9%,transparent) 1px,transparent 1px),
  linear-gradient(90deg,color-mix(in srgb,var(--ink) 9%,transparent) 1px,transparent 1px);background-size:28px 28px}

/* bass: plum field */
.p-bass{--field:var(--plum);--field-ink:#f3dcc4;--field-soft:#e0bfa9;--field-accent:#f1a184;--on-accent:#3f1a26}

/* events: terracotta field */
.p-events{--field:#c4583a;--field-ink:#fff1e2;--field-soft:#ffe0cc;--field-accent:#2b1713;--on-accent:#fbe9d8}
@media (prefers-color-scheme:dark){.p-events{--field:#6e2a1b;--field-accent:#ffb08f;--on-accent:#3a140b}}

/* works: ochre field */
.p-works{--field:#dca35e;--field-ink:#2b1713;--field-soft:#4f2f22;--field-accent:#5a1f18;--on-accent:#f8e7d2}
@media (prefers-color-scheme:dark){.p-works{--field:#3a2511;--field-ink:#f3e2cf;--field-soft:#d6b694;--field-accent:#f0b26b;--on-accent:#2b1708}}