:root{
  --paper:#f6f1e4;
  --paper-deep:#efe6d0;
  --ink:#22301f;
  --ink-soft:#3c4a38;
  --gold:#9a7b2d;
  --gold-soft:#c8ab63;
  --rule:#d8cba6;
  --card:#fbf8ef;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Palatino,"Palatino Linotype","Book Antiqua",Georgia,serif;
  font-size:19px;
  line-height:1.65;
}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:880px;margin:0 auto;padding:0 22px}

/* Masthead */
.masthead{
  text-align:center;
  padding:34px 22px 0;
}
.masthead .name{
  font-size:15px;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--ink);
  font-weight:bold;
  margin:0;
}
.masthead .name a{color:var(--ink)}
.masthead .name a:hover{text-decoration:none;color:var(--gold)}
.masthead nav{margin-top:12px;font-size:14px;letter-spacing:.18em;text-transform:uppercase}
.masthead nav a{color:var(--ink-soft);margin:0 14px}
.masthead .rule{border:none;border-top:1px solid var(--rule);margin:22px auto 0;max-width:880px}

/* Hero */
.hero{text-align:center;padding:64px 0 8px}
.hero h1{
  font-size:56px;
  line-height:1.08;
  margin:0 0 14px;
  font-weight:normal;
  letter-spacing:.01em;
}
.hero .signature{
  font-style:italic;
  font-size:24px;
  color:var(--gold);
  margin:0 0 26px;
}
.hero .intro{
  max-width:620px;
  margin:0 auto;
  color:var(--ink-soft);
  font-size:20px;
}
.ornament{color:var(--gold-soft);letter-spacing:.6em;margin:38px 0 0;font-size:15px}

/* Statement cards */
.cards{padding:30px 0 10px}
.card{
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:6px;
  padding:34px 38px;
  margin:0 0 26px;
}
.card .kicker{
  font-size:13px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 10px;
}
.card h2{font-size:32px;line-height:1.2;margin:0 0 10px;font-weight:normal}
.card h2 a{color:var(--ink)}
.card h2 a:hover{color:var(--gold);text-decoration:none}
.card .deck{font-style:italic;color:var(--ink-soft);margin:0 0 16px;font-size:20px}
.card .meta{font-size:15px;color:var(--ink-soft);letter-spacing:.08em;text-transform:uppercase;margin:0 0 20px}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  display:inline-block;
  border:1px solid var(--gold);
  color:var(--gold);
  padding:9px 22px;
  border-radius:999px;
  font-size:15px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.btn:hover{background:var(--gold);color:#fff;text-decoration:none}
.btn.solid{background:var(--gold);color:#fff}
.btn.solid:hover{background:#856824}

/* Piece pages */
.piece-head{text-align:center;padding:56px 0 6px}
.piece-head .kicker{font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin:0 0 14px}
.piece-head h1{font-size:44px;line-height:1.15;font-weight:normal;margin:0 0 14px}
.piece-head .deck{font-style:italic;font-size:22px;color:var(--ink-soft);margin:0 0 12px}
.piece-head .meta{font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.player{
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:6px;
  padding:22px 26px;
  margin:30px 0 8px;
}
.player audio{width:100%}
.player .plabel{font-size:13px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin:0 0 10px;text-align:center}
.transcript{padding:26px 0 0}
.transcript h2{
  text-align:center;
  font-size:15px;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:normal;
  margin:0 0 28px;
}
.transcript p{margin:0 0 1.35em}
.transcript p:first-of-type::first-letter{
  font-size:2.6em;
  float:left;
  line-height:.92;
  padding-right:10px;
  padding-top:2px;
  color:var(--gold);
}
.backlinks{text-align:center;padding:26px 0 6px;font-size:16px}
.backlinks a{margin:0 10px}

/* About */
.about{padding:44px 0 0}
.about h1{text-align:center;font-size:40px;font-weight:normal;margin:0 0 26px}
.about p{margin:0 0 1.35em}
.about .sig{font-style:italic;color:var(--gold);text-align:center;font-size:21px;margin-top:34px}

/* Footer */
footer{
  margin-top:64px;
  border-top:1px solid var(--rule);
  padding:26px 22px 40px;
  text-align:center;
  color:var(--ink-soft);
  font-size:15px;
}
footer .fname{letter-spacing:.34em;text-transform:uppercase;font-size:13px;color:var(--ink)}
@media (max-width:640px){
  .hero h1{font-size:40px}
  .piece-head h1{font-size:32px}
  .card{padding:26px 22px}
  body{font-size:18px}
}