/* Moving Music base for the pages built from the prototype (homepage and garlic page), Nov 2026.
   Copied from the homepage prototype (v3.79): paper and ink, EB Garamond for words read as words,
   Work Sans for labels and controls, square buttons. The header and footer live in chrome.css. */

:root{
  --paper:#f3ede1;
  --paper-2:#e8dec9;
  --card:#fbf8f2;
  --card-hover:#ffffff;
  --rule:#cbbfa6;
  --rule-dark:#8d8068;
  --ink:#231f1b;
  --ink-2:#5a5248;
  --red:#8a2f22;
  --red-dark:#6f2419;
  --maxw:1120px;
  --pink:#F9CEC5;
  --gold-tint:#FAD49F;
  --kraft:#d8bf96;
}
/* Garamond for words that are read as words; a sans for labels, copy blocks, and controls */
html{--serif:"EB Garamond",Georgia,serif;--hw:500;--sans:"Work Sans","Helvetica Neue",Arial,sans-serif;--body-size:1.02rem}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:var(--body-size);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:max(22px,env(safe-area-inset-left,0px));padding-right:max(22px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--serif);font-weight:var(--hw);line-height:1.15;margin:0}
h2{font-size:clamp(2.1rem,3.3vw,2.9rem);letter-spacing:-.005em}
p{margin:0}
.muted{color:var(--ink-2)}
.ui{font-family:var(--sans)}

/* Buttons: square, two colors */
.btn{display:inline-block;padding:.7rem 1.25rem;border:1px solid var(--ink);border-radius:2px;background:var(--ink);color:var(--paper);text-decoration:none;font-family:var(--sans);font-weight:700;font-size:1rem;line-height:1.1;cursor:pointer}
.btn:hover{background:var(--red);border-color:var(--red)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn.red{background:var(--red);border-color:var(--red)}
.btn.red:hover{background:var(--red-dark);border-color:var(--red-dark)}

/* Section labels */
.rule-head{margin:0 0 18px}
.rule-head span{font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--ink-2)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

section{padding:36px 0 44px}

/* Panels */
.panel{padding:26px;background:var(--card);box-shadow:0 1px 2px rgba(35,31,27,.08),0 2px 8px rgba(35,31,27,.06)}
.panel h3{font-size:1.5rem;margin-bottom:.5rem;text-wrap:balance}
.panel p{color:var(--ink-2);margin-bottom:.8rem}
.panel .rule-head{margin-bottom:8px}

@media (max-width:600px){
  section{padding:28px 0 32px}
}