*{box-sizing:border-box}body{background:radial-gradient(120% 80% at 50% -10%,#241726 0%,#16111b 55%);min-height:100vh}::selection{background:#d8a94e;color:#16111b}a,button{transition:color .18s ease,background .18s ease,transform .18s ease,opacity .18s ease}button{cursor:pointer}.nav-link{padding:.5rem .75rem}.nav-link:hover{color:#d8a94e}.section-kicker{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:#8f8275}.news-row{display:grid;grid-template-columns:112px 96px 1fr auto;gap:24px;align-items:baseline;padding:15px 6px;border-top:1px solid rgb(240 231 216/.1)}.news-row:hover{background:rgb(240 231 216/.035)}.show-cover{position:relative;aspect-ratio:3/4;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;border-radius:8px;padding:18px 17px;cursor:pointer;background:linear-gradient(150deg,var(--from),var(--to));box-shadow:0 18px 40px -22px #000;isolation:isolate}.show-cover-media{position:absolute!important;z-index:0!important;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.94) brightness(.95);transform:scale(1.015);transition:transform .55s cubic-bezier(.2,.75,.2,1),filter .45s ease}
/* Scrim only where type sits: a band at the top for the year, one at the
   bottom for the title. The middle stays clear so the artwork reads. */
.show-cover-shade{position:absolute!important;z-index:1!important;inset:0;background:linear-gradient(180deg,rgba(13,9,16,.34) 0%,rgba(13,9,16,0) 30%,rgba(13,9,16,0) 48%,rgba(13,9,16,.66) 100%)}
.show-cover:after{content:"";position:absolute;z-index:2;inset:0;background:repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 2px,transparent 2px 16px);pointer-events:none}.show-cover-year,.show-cover-copy{position:relative;z-index:3}.show-cover i{display:block;width:30px;height:2px;margin-bottom:12px;background:#d8a94e}.show-cover h3{font-family:'Cormorant Garamond',serif;font-size:23px;font-weight:700;line-height:1.08;color:white;text-shadow:0 1px 3px rgba(0,0,0,.92),0 2px 16px rgba(0,0,0,.7)}.show-cover:hover{transform:translateY(-4px)}.show-cover:hover .show-cover-media{filter:saturate(1) brightness(1.02);transform:scale(1.065)}.chip{padding:7px 15px;border:1px solid rgb(240 231 216/.16);border-radius:999px;font-size:13px;color:#b0a08f}.chip.active,.chip:hover{background:#a5203a;color:#f0e7d8;border-color:#a5203a}.detail-head{margin-bottom:14px;font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:600;color:#f0e7d8}.page-in{animation:fadeIn .45s ease}.card-in{animation:fadeUp .45s ease both}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}.htmx-request{opacity:.55}@media(max-width:700px){.news-row{grid-template-columns:90px 1fr;gap:4px 12px}.news-row>:nth-child(2),.news-row>:last-child{display:none}}@media(prefers-reduced-motion:reduce){.show-cover-media,.show-cover{transition:none}.card-in{animation:none}}

/* The header sticks only from 1024px, where pages have room for it. Below
   that it scrolls away, so in-page bars (archive sections, reader tools) can
   stick to the very top instead of stacking under it. */
:root{--header-h:0px}
@media(min-width:1024px){:root{--header-h:60px}.site-header{position:sticky;top:0;height:var(--header-h)}}

/* ---- Header navigation and search -------------------------------------- */
.site-nav{display:flex;flex:none;align-items:center;gap:4px;white-space:nowrap;font-size:14px;color:#b0a08f}
.nav-link[aria-current="page"]{color:#f0e7d8;box-shadow:inset 0 -2px 0 #a5203a}
/* Search and language keep their size; the search box between them is what gives way. */
.site-tools{flex:none}
.header-search-toggle{display:grid;width:44px;height:44px;flex:none;place-items:center;border-radius:999px;color:#b0a08f}
.header-search-toggle:hover,.header-search-toggle[aria-expanded="true"]{color:#d8a94e}
.header-search-toggle svg{width:20px;height:20px}
.header-search{display:flex;flex:0 0 100%;order:9;gap:8px;margin-top:10px}
.header-search[hidden]{display:none}
.header-search input{flex:1;min-width:0;min-height:44px;border:1px solid rgb(240 231 216/.2);border-radius:999px;background:rgb(240 231 216/.06);padding:0 18px;font-size:16px;color:#f0e7d8;outline:none}
.header-search input::placeholder,.catalog-search::placeholder{color:#7a6f66}
.header-search input:focus,.catalog-search:focus{border-color:#d8a94e}
.header-search button{flex:none;min-height:44px;border-radius:999px;background:#a5203a;padding:0 18px;font-size:14px;color:#f0e7d8}
@media(min-width:768px){.header-search-toggle,form.header-search{display:none}}
/* Only narrow headers wrap: the search row below 768px, the section tabs below 640px. */
@media(max-width:767px){header.site-header{flex-wrap:wrap;row-gap:0}}
@media(max-width:639px){
  /* Sections become a row of tabs under the wordmark; the header's bottom border runs beneath them. */
  header.site-header{column-gap:.5rem;padding-bottom:0}
  .site-nav{flex:0 0 calc(100% + 2rem);order:10;gap:0;margin:10px -1rem 0;border-top:1px solid rgb(240 231 216/.08);padding:0 .5rem;overflow-x:auto;scrollbar-width:none}
  .site-nav::-webkit-scrollbar{display:none}
  /* Tabs share the row evenly but never shrink below their label; long labels scroll instead of spilling. */
  .site-nav .nav-link{display:flex;flex:1 0 auto;align-items:center;justify-content:center;min-height:44px;padding:0 .3rem;font-size:14.5px;letter-spacing:.03em}
  form.header-search{margin-bottom:2px}
}

/* ---- Catalogue toolbar, cards and search results ------------------------ */
select option{background:#16111b;color:#f0e7d8}
.catalog-awards-link{display:inline-flex;flex:none;align-items:center;min-height:44px;margin-left:auto;white-space:nowrap;color:#b0a08f}
.catalog-awards-link:hover{color:#d8a94e}
.catalog-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-bottom:22px;border-bottom:1px solid rgb(240 231 216/.1);padding-bottom:20px}
.catalog-search{flex:1 1 100%;min-width:0;min-height:44px;border:1px solid rgb(240 231 216/.2);border-radius:999px;background:rgb(240 231 216/.06);padding:0 18px;font-size:16px;color:#f0e7d8;outline:none}
.catalog-filter{display:flex;flex:1;align-items:center;gap:10px;font-size:14px;color:#8f8275}
.catalog-filter>span:not(.sr-only){display:none}
.catalog-select{width:100%;min-height:44px;border:1px solid rgb(240 231 216/.2);border-radius:999px;background-color:#16111b;padding:0 16px;font-size:16px;color:#f0e7d8;outline:none}
.catalog-select:focus{border-color:#d8a94e}
.catalog-count{margin-bottom:16px;font-size:13px;letter-spacing:.04em;color:#8f8275}
#catalog-results.htmx-request{opacity:.5;transition:opacity .15s ease}
.card-lyrics-link{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-height:32px;margin-top:6px;font-size:12px;letter-spacing:.04em;color:#a99a86}
.card-lyrics-link:hover{color:#d8a94e}
.card-lyrics-link:hover .content-badge{border-color:rgb(216 169 78/.6);color:#d8a94e}
.lyric-results{margin-top:44px;border-top:1px solid rgb(240 231 216/.1);padding-top:30px}
.result-snippet{display:block;margin-top:6px;border-left:2px solid rgb(216 169 78/.4);padding-left:10px;font-size:14.5px;font-style:italic;line-height:1.55;color:#c9bdaf}
.result-snippet mark,.search-result-row mark{border-radius:2px;background:rgb(216 169 78/.24);padding:0 2px;color:#f0e7d8}
.more-results{margin-top:6px;border-top:1px solid rgb(240 231 216/.1)}
.more-results>summary{display:inline-flex;align-items:center;gap:8px;min-height:48px;cursor:pointer;list-style:none;font-size:14px;color:#b0a08f}
.more-results>summary::-webkit-details-marker{display:none}
.more-results>summary:before{content:"\25B8";font-size:12px}
.more-results[open]>summary:before{content:"\25BE"}
.more-results>summary:hover{color:#d8a94e}
.people-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-bottom:24px;border-bottom:1px solid rgb(240 231 216/.1);padding-bottom:20px}
.people-search{display:flex;flex:1 1 100%}
@media(min-width:640px){
  .catalog-filter{flex:none}
  .catalog-filter>span:not(.sr-only){display:inline}
  .catalog-select{width:auto;min-height:40px;font-size:14px}
  .people-search{flex:0 1 340px}
}
@media(min-width:768px){.catalog-search{flex:1 1 300px;max-width:520px;min-height:40px;font-size:15px;margin-right:auto}}

/* ---- Account and watchlist forms ----------------------------------------- */
.form-page form input:not([type=radio]):not([type=hidden]),.form-page form select,.form-page form textarea{width:100%;border:1px solid rgba(240,231,216,.18);border-radius:7px;background:rgba(0,0,0,.24);padding:10px 12px;font-size:16px;color:#f0e7d8;outline:none}
.form-page form input:focus,.form-page form select:focus,.form-page form textarea:focus{border-color:#d8a94e}
#id_viewing_type,#id_status{display:flex;flex-wrap:wrap;gap:8px}
#id_viewing_type label,#id_status label{display:flex;align-items:center;min-height:40px;border:1px solid rgba(216,169,78,.35);border-radius:999px;padding:7px 14px;color:#d8a94e;font-size:14px;cursor:pointer}
#id_viewing_type label:has(input:checked),#id_status label:has(input:checked){background:#a5203a;border-color:#a5203a;color:#f0e7d8}
#id_viewing_type input,#id_status input{position:absolute;opacity:0}
.account-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin-bottom:26px;border:1px solid rgb(240 231 216/.1);border-radius:10px;background:rgb(240 231 216/.035);padding:10px 16px;font-size:14px;color:#b0a08f}
.account-strip strong{font-weight:500;color:#f0e7d8}
.account-strip button{min-height:40px;border:1px solid rgb(240 231 216/.2);border-radius:999px;padding:0 16px;font-size:13.5px;color:#b0a08f}
.account-strip button:hover{border-color:#d8a94e;color:#f0e7d8}