:root{--ink:#1E1E1C;--paper:#F3EFE6;--gold:#C2913F;--stone:#6F6B62;--ash:#D9D4C7;--card:#FBF9F4}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 Inter,'Segoe UI',Arial,sans-serif}
img,svg{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
h1,h2,h3{font-family:Outfit,'Segoe UI',Arial,sans-serif;margin:0;text-wrap:balance}
h1{font-weight:300;font-size:clamp(2.2rem,5.4vw,4.1rem);line-height:1.08;letter-spacing:-.01em}
h3{font-weight:400;font-size:1.6rem}
p{margin:0}
.eyebrow,.label{font:600 .74rem/1.4 Outfit,'Segoe UI',Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#8F6A25}
.lede{font-size:1.16rem;color:#3B3A36;max-width:34em}

.top{position:sticky;top:0;z-index:5;background:rgba(243,239,230,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--ash)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand img{height:52px;width:auto}
.top nav{display:flex;gap:30px}
.top nav a{font:400 1rem Outfit,'Segoe UI',Arial,sans-serif;text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.top nav a:hover,.top nav a[aria-current]{border-color:var(--gold)}

.hero .wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:center;padding-top:88px;padding-bottom:96px}
.hero-text>*+*{margin-top:22px}
.lion{width:100%;max-width:380px;justify-self:end;color:var(--ink)}
.lion path{animation:draw .7s ease backwards}
.lion path:nth-child(1){animation-delay:.1s}.lion path:nth-child(2){animation-delay:.25s}.lion path:nth-child(3){animation-delay:.4s}
.lion path:nth-child(4){animation-delay:.55s}.lion path:nth-child(5){animation-delay:.7s}.lion path:nth-child(6){animation-delay:.85s}
.lion path:nth-child(7){animation-delay:1s}.lion path:nth-child(8){animation-delay:1.15s}.lion path:nth-child(9){animation-delay:1.3s}.lion path:nth-child(10){animation-delay:1.45s}
@keyframes draw{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.lion path{animation:none}}

.btn{display:inline-block;background:var(--ink);color:var(--paper);text-decoration:none;font:400 1rem Outfit,'Segoe UI',Arial,sans-serif;padding:14px 26px;border-radius:999px;transition:background .2s}
.btn:hover{background:#3A3935}

.head .wrap{padding-top:80px;padding-bottom:56px}
.head .wrap>*+*{margin-top:22px}
.head h1{max-width:16em}

.band{border-top:1px solid var(--ash)}
.band .wrap{padding-top:64px;padding-bottom:80px}
.band .label{margin-bottom:26px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.card{background:var(--card);border:1px solid var(--ash);border-radius:10px;padding:30px;display:flex;flex-direction:column;gap:12px;min-height:240px}
.tile{display:flex;align-items:center;justify-content:center;gap:12px;height:132px;margin:-30px -30px 14px;border-radius:9px 9px 0 0;text-decoration:none;transition:filter .2s}
a.tile:hover{filter:brightness(1.25)}
.tile.songcut{background:#16171A;color:#F3F1EC;font:600 1.75rem 'General Sans',Outfit,'Segoe UI',Arial,sans-serif}
.tile.zemer{background:#111215;color:#fff;font:800 2rem ui-sans-serif,-apple-system,'Segoe UI',Inter,Roboto,'Helvetica Neue',Arial,sans-serif;letter-spacing:-.02em}
.card p:not(.eyebrow){color:#3B3A36}
.card.ghost{background:transparent;border-style:dashed}
.go{margin-top:auto;padding-top:10px;font:400 1rem Outfit,'Segoe UI',Arial,sans-serif;text-decoration:none;border-bottom:2px solid var(--gold);align-self:flex-start}
.go span{display:inline-block;transition:transform .2s}.go:hover span{transform:translateX(4px)}
.where{color:var(--stone)}.note{font-size:1.1rem}.note a{text-decoration-color:var(--gold);text-underline-offset:3px}

.dark{background:var(--ink);color:var(--paper)}
.dark .wrap{padding-top:72px;padding-bottom:84px}
.dark .label{color:var(--gold);margin-bottom:30px}
.three{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:36px}
.three h3{font-size:1.35rem;margin-bottom:10px}
.three p{color:#C9C4B8}

.prose{border-top:1px solid var(--ash)}
.prose .wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:start;padding-top:60px;padding-bottom:88px}
.prose p{font-size:1.1rem;max-width:36em;margin:10px 0 36px;color:#3B3A36}

.foot{background:var(--ink);color:#C9C4B8;border-top:1px solid #34332F}
.foot .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:18px 34px;padding-top:34px;padding-bottom:34px}
.foot img{height:44px;width:auto}
.foot nav{display:flex;gap:24px}
.foot a{text-decoration:none;font-family:Outfit,'Segoe UI',Arial,sans-serif}.foot a:hover{color:var(--paper)}
.foot p{margin-left:auto;font-size:.85rem}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

@media (max-width:760px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  .top .wrap{height:64px}
  .brand img{height:40px}
  .top nav{gap:14px}
  .top nav a{font-size:.9rem}
  .hero .wrap,.prose .wrap{grid-template-columns:1fr;gap:28px;padding-top:48px;padding-bottom:56px}
  .lion{max-width:200px;justify-self:start;order:-1}
  .prose .lion{order:1}
  .head .wrap{padding-top:48px;padding-bottom:40px}
  .band .wrap{padding-top:44px;padding-bottom:56px}
  .card{min-height:0;padding:24px}
  .tile{margin:-24px -24px 12px;height:112px}
  .foot p{margin-left:0;width:100%}
}