/* opelenartys.com — score register */
:root{
  --ink:#201C1A;
  --gold:#B8945A;
  --ivory:#FAF6EC;
  --ink-soft:rgba(32,28,26,.66);
  --ink-faint:rgba(32,28,26,.13);
  --gold-faint:rgba(184,148,90,.34);
  --measure:70ch;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.72;
  font-weight:380;
}
img{max-width:100%;display:block}
a{color:inherit}

/* ---- the five-line staff motif ---- */
.staff{
  height:17px;
  background-image:repeating-linear-gradient(
    to bottom,
    var(--gold) 0, var(--gold) 1px,
    transparent 1px, transparent 4px);
  background-repeat:no-repeat;
  background-size:100% 17px;
  opacity:.85;
}
.staff--short{width:74px}
.staff--rule{width:100%;margin:0}

/* ---- header ---- */
.masthead{
  position:relative;
  border-bottom:1px solid var(--ink-faint);
  background:var(--ivory);
}
.masthead__inner{
  max-width:1120px;margin:0 auto;padding:0 28px;
  min-height:76px;
  display:flex;align-items:center;gap:28px;justify-content:space-between;
}
.wordmark{
  position:relative;
  display:inline-block;
  padding:10px 14px;
  text-decoration:none;
  font-family:"Bodoni Moda",Didot,"Times New Roman",serif;
  font-size:24px;letter-spacing:.055em;line-height:1;
  white-space:nowrap;
}
.wordmark::before{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(
    to bottom, var(--gold) 0, var(--gold) 1px, transparent 1px, transparent 6px);
  background-position:0 9px;background-size:100% 26px;background-repeat:no-repeat;
  opacity:.26;pointer-events:none;
}
.wordmark span{position:relative}
.navlist{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
.navlist a{
  text-decoration:none;font-size:13px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-soft);padding:6px 0;border-bottom:1px solid transparent;
}
.navlist a:hover,.navlist a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--gold)}
.navtoggle{display:none;background:none;border:1px solid var(--ink-faint);border-radius:2px;
  padding:9px 12px;font:inherit;font-size:13px;letter-spacing:.09em;text-transform:uppercase;cursor:pointer;color:var(--ink)}

/* ---- layout ---- */
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
.narrow{max-width:var(--measure)}
main{display:block}
section{padding:0}

/* ---- hero ---- */
.hero{padding:74px 0 0}
.eyebrow{
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  margin:0 0 18px;font-weight:600;
}
h1{
  font-family:"Bodoni Moda",Didot,"Times New Roman",serif;
  font-weight:400;font-size:clamp(2.3rem,5.4vw,3.9rem);line-height:1.1;
  letter-spacing:-.005em;margin:0 0 22px;max-width:16ch;
}
.hero p{max-width:60ch;margin:0 0 34px;font-size:1.08rem;color:var(--ink-soft)}
.hero .staff{margin:44px 0 0}

/* ---- hero visual ---- */
.hero-visual{
  margin:0;
  width:100%;
  overflow:hidden;
  border:1px solid var(--gold-faint);
  background:#1a1410;
}
.hero-visual img{
  width:100%;
  height:auto;
  aspect-ratio:16/7;
  object-fit:cover;
  object-position:center 42%;
}
@media(max-width:620px){
  .hero-visual img{aspect-ratio:4/3;object-position:center 38%}
}

/* ---- movements on the home page ---- */
.movements{padding:72px 0 10px}
.movement{padding:0 0 54px}
.movement + .movement{border-top:1px solid var(--ink-faint);padding-top:50px}
.movement .staff--short{margin-bottom:20px}
.movement h2{
  font-family:"Bodoni Moda",Didot,serif;font-weight:400;
  font-size:clamp(1.6rem,3.2vw,2.15rem);line-height:1.2;margin:0 0 6px;
}
.movement h2 a{text-decoration:none;border-bottom:1px solid var(--gold-faint)}
.movement h2 a:hover{border-bottom-color:var(--gold)}
.count{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  margin:0 0 16px;font-weight:600;
}
.movement p.body{max-width:var(--measure);margin:0 0 14px}
.readon{
  display:inline-block;margin-top:6px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);border-bottom:1px solid var(--gold);padding-bottom:3px;
}

/* ---- closing statement ---- */
.coda{
  border-top:1px solid var(--ink-faint);
  padding:56px 0 76px;
}
.coda p{
  font-family:"Bodoni Moda",Didot,serif;font-size:clamp(1.15rem,2.4vw,1.5rem);
  line-height:1.5;max-width:46ch;margin:0;font-weight:400;
}

/* ---- category pages ---- */
.movement-head{padding:66px 0 0}
.movement-head h1{max-width:20ch}
.movement-head p.lede{max-width:64ch;font-size:1.06rem;color:var(--ink-soft);margin:0}
.movement-head .staff{margin:40px 0 0}

.pieces{padding:10px 0 0}
.piece{padding:52px 0 46px;max-width:var(--measure)}
.piece + .piece{border-top:0}
.piece__no{
  font-family:"Bodoni Moda",Didot,serif;
  font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  margin:0 0 10px;
}
.piece h2{
  font-family:"Bodoni Moda",Didot,serif;font-weight:400;
  font-size:clamp(1.5rem,3vw,2rem);line-height:1.22;margin:0 0 4px;
}
.piece .place{
  font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 22px;
}
.piece p{margin:0 0 16px}
.piece figure{margin:0 0 26px}
.piece figcaption{font-size:12.5px;color:var(--ink-soft);margin-top:9px;letter-spacing:.02em}
.piece img{border:1px solid var(--ink-faint)}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0}
.tags li{
  font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);
  border:1px solid var(--gold-faint);border-radius:999px;padding:5px 13px;
}
.divider{padding:0;margin:0}

/* ---- long-form pages ---- */
.doc{padding:66px 0 80px;max-width:var(--measure)}
.doc h1{max-width:22ch;margin-bottom:10px}
.doc .staff--short{margin:0 0 26px}
.doc h2{
  font-family:"Bodoni Moda",Didot,serif;font-weight:400;font-size:1.42rem;
  margin:44px 0 12px;line-height:1.3;
}
.doc p{margin:0 0 16px}
.doc ul{margin:0 0 16px;padding-left:20px}
.doc li{margin-bottom:8px}
.doc .updated{font-size:13px;color:var(--ink-soft);letter-spacing:.05em;margin-bottom:0}
.doc a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--gold)}

/* ---- footer ---- */
.footer{
  border-top:1px solid var(--ink-faint);
  padding:56px 0 46px;margin-top:20px;
}
.footer__grid{
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:44px;align-items:start;
}
.footer__name{
  font-family:"Bodoni Moda",Didot,serif;font-size:21px;letter-spacing:.04em;margin:0 0 12px;
}
.footer p{margin:0;color:var(--ink-soft);font-size:15px;max-width:40ch}
.footer h3{
  font-size:12px;letter-spacing:.17em;text-transform:uppercase;color:var(--gold);
  margin:0 0 14px;font-weight:600;
}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin-bottom:9px}
.footer li a{text-decoration:none;font-size:15px;color:var(--ink-soft)}
.footer li a:hover{color:var(--ink)}
.footer__close{
  margin-top:44px;padding-top:22px;border-top:1px solid var(--ink-faint);
  font-size:13.5px;color:var(--ink-soft);
}

@media(max-width:860px){
  .footer__grid{grid-template-columns:1fr 1fr;gap:34px}
  .footer__brand{grid-column:1/-1}
}
@media(max-width:760px){
  .masthead__inner{min-height:66px;padding:0 20px}
  .wrap{padding:0 20px}
  .navtoggle{display:block}
  .navlist{
    display:none;position:absolute;left:0;right:0;top:100%;z-index:20;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--ivory);border-bottom:1px solid var(--ink-faint);
    padding:8px 20px 18px;
  }
  .navlist.is-open{display:flex}
  .navlist li{width:100%}
  .navlist a{display:block;padding:12px 0;border-bottom:1px solid var(--ink-faint);width:100%}
  .hero{padding:52px 0 0}
  .movements{padding:52px 0 0}
  .footer__grid{grid-template-columns:1fr}
}