:root {
  --cream: #f4ead6; --ink: #2b2118; --oxblood: #7a1f1f; --brass: #b98a3c;
  --paper: #fbf4e6; --line: #ddc9a8;
}
* { box-sizing: border-box; }
body {
  margin: 0; background:
    radial-gradient(120% 80% at 50% -10%, #fff9 , transparent),
    linear-gradient(160deg, #efe0c4, #e6d3ad);
  color: var(--ink); font-family: "Spectral", Georgia, serif;
}
.p-nav { display:flex; justify-content:space-between; align-items:center;
  padding:1.1rem 1.6rem; border-bottom:1px solid var(--line); }
.brand { font-family:"Fraunces",serif; font-weight:600; font-size:1.25rem;
  color:var(--ink); text-decoration:none; letter-spacing:.02em; }
main { max-width: 900px; margin: 0 auto; padding: 2.4rem 1.4rem 4rem; }
.eyebrow { font-family:"Courier Prime",monospace; text-transform:uppercase;
  letter-spacing:.28em; font-size:.72rem; color:var(--oxblood); margin:0 0 .6rem; }
h1 { font-family:"Fraunces",serif; font-weight:500; font-size:clamp(1.8rem,4vw,2.8rem);
  line-height:1.05; margin:.1rem 0 .8rem; }
.lede { max-width: 46ch; color:#4b3d2c; }
.card { background:var(--paper); border:1px solid var(--line); border-radius:14px;
  padding:2rem; box-shadow:0 18px 40px -28px #0007; }
form { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem; }
input { flex:1 1 240px; padding:.85rem 1rem; border:1px solid var(--line);
  border-radius:9px; background:#fff; font:inherit; }
button { cursor:pointer; font:inherit; border-radius:9px; padding:.85rem 1.3rem; border:1px solid transparent; }
.primary { background:var(--oxblood); color:var(--cream); }
.primary:hover { background:#651818; }
.ghost { background:transparent; border-color:var(--line); color:var(--ink); }
.note { font-family:"Courier Prime",monospace; font-size:.82rem; color:#6d5c43; margin-top:1rem; }
.note.quiet { opacity:.8; margin-top:2rem; }
.occasion-grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); margin-top:1.4rem; }
.occasion-card { text-align:left; background:var(--paper); border:1px solid var(--line);
  border-radius:12px; padding:1.3rem; display:block; }
.occasion-card h3 { font-family:"Fraunces",serif; margin:.2rem 0 .3rem; }
.occasion-card .kind { font-family:"Courier Prime",monospace; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.2em; color:var(--brass); }
.bar { display:flex; gap:.7rem; flex-wrap:wrap; margin:1.2rem 0 1.6rem; }
.machine { list-style:none; padding:0; margin:0; display:grid; gap:.6rem; }
.msg { display:flex; align-items:center; gap:1rem; background:var(--paper);
  border:1px solid var(--line); border-radius:10px; padding:.85rem 1rem; }
.msg .play { width:42px; height:42px; border-radius:50%; background:var(--ink);
  color:var(--cream); border:none; font-size:1rem; }
.msg .meta { flex:1; }
.msg .label { font-family:"Fraunces",serif; font-size:1.05rem; }
.msg .dur { font-family:"Courier Prime",monospace; font-size:.75rem; color:#6d5c43; }
.msg.reel { border-color:var(--brass); box-shadow:0 0 0 1px var(--brass) inset; }
a.dl { color:var(--oxblood); text-decoration:none; font-family:"Courier Prime",monospace; font-size:.8rem; }
[hidden] { display:none !important; }