@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Manrope:wght@300;400;500&display=swap");

:root {
  --page-bg: #050b0f;
  --surface-bg: #081117;
  --surface-deep: #03080c;
  --text-primary: #ece9e2;
  --text-secondary: #9b9c9b;
  --text-muted: #686c6e;
  --accent: #b48a4b;
  --accent-soft: #8c6b3b;
  --border: rgba(255, 255, 255, 0.11);
  --overlay: rgba(2, 7, 10, 0.68);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--page-bg); }
body { margin: 0; color: var(--text-primary); background: radial-gradient(circle at 50% 60%, #0b1820 0, var(--page-bg) 43%); font-family: var(--sans); font-weight: 300; }
section[id] { scroll-margin-top: 90px; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 100; left: 12px; top: -80px; padding: 12px 18px; background: var(--accent); color: #050709; }
.skip-link:focus { top: 12px; }

.site-header {
  height: 74px; position: sticky; z-index: 50; top: 0; display: flex; align-items: center;
  padding: 0 6.9%; border-bottom: 1px solid var(--border); background: rgba(3, 8, 12, .93);
  backdrop-filter: blur(12px);
}
.logo { font: 500 29px/1 var(--serif); letter-spacing: .22em; white-space: nowrap; }
.desktop-nav { display: flex; align-items: center; gap: clamp(20px, 2.5vw, 42px); margin: 0 auto 0 62px; }
.desktop-nav a { color: #b7b5b1; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; transition: color .2s; }
.desktop-nav a:hover { color: var(--text-primary); }
.menu-toggle, .mobile-nav { display: none; }

.social-rail {
  position: absolute; z-index: 4; left: 0; top: 74px; width: 89px; height: 397px; border-right: 1px solid var(--border);
  pointer-events: none;
}

.hero {
  min-height: 397px; position: relative; overflow: hidden; display: grid; grid-template-columns: 68% 32%;
  padding: 0 6.5% 0 10.4%; border-bottom: 1px solid var(--border); isolation: isolate;
}
.hero__media { position: absolute; z-index: -3; inset: 0; display: block; background: #071017; }
.hero__media img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.hero::before { content: ""; position: absolute; z-index: -2; inset: 0; background:
  linear-gradient(90deg, rgba(2,7,11,.88) 0%, rgba(2,7,11,.64) 25%, rgba(2,7,11,.12) 52%, rgba(2,7,11,.61) 78%, rgba(2,7,11,.91) 100%),
  linear-gradient(180deg, rgba(2,7,11,.04), rgba(2,7,11,.31)); pointer-events: none; }
.hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, transparent 57%, rgba(1,5,8,.38)); box-shadow: inset 0 0 70px rgba(1,5,8,.3); pointer-events: none; }
.hero-intro { align-self: center; position: relative; z-index: 2; max-width: 480px; }
.eyebrow { color: var(--accent); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; }
.hero h1 { margin: 0 0 12px; font: 500 clamp(56px, 5.3vw, 82px)/.9 var(--serif); letter-spacing: .11em; }
.hero-subtitle { margin: 0 0 27px; font-size: 15px; letter-spacing: .35em; text-transform: uppercase; }
.hero-description { max-width: 285px; margin: 0 0 26px; font: 400 17px/1.55 var(--serif); color: #d0cec8; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 34px; border: 1px solid var(--accent-soft); color: var(--accent); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; transition: background .2s, color .2s; }
.button:hover { color: var(--surface-deep); background: var(--accent); }

.quote-slider { position: relative; align-self: stretch; min-width: 0; padding: 80px 3% 43px 5%; background: linear-gradient(90deg, transparent, rgba(2,7,10,.2) 28%, rgba(2,7,10,.45)); }
.quote-mark { position: absolute; top: 31px; color: var(--accent); font: 600 66px/1 var(--serif); }
.slides { position: relative; height: 235px; }
.quote-slide { position: absolute; inset: 0; margin: 0; opacity: 0; pointer-events: none; transition: opacity .45s ease; }
.quote-slide.active { opacity: 1; pointer-events: auto; }
.quote-slide blockquote { margin: 0; min-height: 177px; font: 400 clamp(20px, 1.42vw, 22px)/1.44 var(--serif); letter-spacing: .01em; }
.quote-slide figcaption { margin-top: 12px; color: #c7c2b8; font-size: 10px; letter-spacing: .34em; text-transform: uppercase; }
.slider-dots { position: absolute; right: 0; bottom: 18px; display: flex; gap: 14px; }
.slider-dots button { width: 14px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; position: relative; }
.slider-dots button::after { content: ""; position: absolute; left: 4px; top: 18px; width: 6px; height: 6px; border-radius: 50%; background: #858b8c; }
.slider-dots button[aria-current="true"]::after { background: var(--accent); }

.featured { padding: 27px 2.1% 18px 4.1%; }
.section-heading { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; max-width: 1300px; margin: 0 auto 19px; }
.section-heading span { height: 1px; background: rgba(255,255,255,.09); }
.section-heading h2 { margin: 0; font-size: 14px; font-weight: 400; letter-spacing: .46em; text-transform: uppercase; }
.cards { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.work-card { position: relative; min-width: 0; height: 242px; overflow: hidden; border: 1px solid var(--border); border-radius: 2px; background: #0d151b; }
.card-art, .card-shade { position: absolute; inset: 0; }
.card-art { overflow: hidden; }
.card-art img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .4s ease; }
.card-shade { background: linear-gradient(180deg, rgba(3,8,12,.04) 0%, rgba(3,8,12,.12) 42%, rgba(3,8,12,.82) 74%, rgba(3,8,12,.98) 100%); }
.card-content { position: relative; height: 100%; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 18px 8px; text-align: center; }
.card-year { position: absolute; top: 11px; right: 11px; color: rgba(255,255,255,.52); font-size: 9px; letter-spacing: .15em; }
.work-card h3 { margin: 0 auto 20px; font: 500 clamp(13px, .95vw, 16px)/1.08 var(--serif); letter-spacing: .025em; text-transform: uppercase; text-wrap: balance; overflow-wrap: normal; }
.work-card a { min-height: 32px; position: relative; color: #d4d0c7; font-size: 9px; letter-spacing: .25em; text-transform: uppercase; }
.work-card a::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 36px; height: 1px; background: #80725c; transform: translateX(-50%); transition: width .2s, background .2s; }
.work-card:hover { border-color: rgba(180,138,75,.45); }
.work-card:hover .card-art img { transform: scale(1.025); }
.work-card:hover a::after { width: 54px; background: var(--accent); }
.all-works { display: table; margin: 18px auto 0; color: #c49756; font-size: 11px; letter-spacing: .34em; text-transform: uppercase; }
.all-works span { margin-left: 12px; font-size: 16px; }
.home-prose { padding: 52px max(20px, 6vw) 58px; border-top: 1px solid var(--border); }
.prose-feature-grid { max-width: 1240px; margin: 34px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.prose-feature { min-height: 330px; position: relative; overflow: hidden; padding: clamp(30px, 4vw, 54px); border: 1px solid var(--border); background: radial-gradient(circle at 82% 18%, rgba(180,138,75,.18), transparent 30%), repeating-linear-gradient(125deg, transparent 0 22px, rgba(255,255,255,.018) 23px 24px), #09141b; }
.prose-feature::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(255,255,255,.045); pointer-events: none; }
.prose-feature h3 { margin: 15px 0 23px; font: 500 clamp(36px, 4vw, 58px)/1 var(--serif); }
.prose-feature > p:not(.eyebrow) { max-width: 36ch; color: #c5c1b9; font: 400 20px/1.5 var(--serif); }

.page-shell { min-height: 100vh; display: flex; flex-direction: column; }
.page-shell > main { flex: 1 0 auto; }
#utility-navigation, .utility-navigation, .footer { flex-shrink: 0; }
.utility-navigation { margin: 0 5.8%; padding: 14px 2%; border-top: 1px solid rgba(180,138,75,.38); border-bottom: 1px solid rgba(180,138,75,.24); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 2vw, 32px); background: rgba(7,15,20,.72); }
.utility-navigation__item { min-width: 0; min-height: 64px; position: relative; display: flex; align-items: center; justify-content: center; gap: 13px; padding: 8px; text-align: center; }
.utility-navigation__item svg { flex: 0 0 auto; width: 30px; height: 30px; fill: none; stroke: var(--accent); stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
.utility-navigation__item span { font: 500 clamp(13px, 1vw, 16px)/1.1 var(--serif); letter-spacing: .08em; text-transform: uppercase; text-wrap: balance; }
.utility-navigation__item:hover span, .utility-navigation__item[aria-current="page"] { color: var(--accent); }
.utility-navigation__item[aria-current="page"]::after { content: ""; position: absolute; left: 25%; right: 25%; bottom: 2px; height: 1px; background: var(--accent); }
.footer { min-height: 76px; border-top: 1px solid var(--border); display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 20px; padding: 0 5.8%; color: #858887; font-size: 12px; letter-spacing: .03em; }
.footer > :last-child { text-align: right; }

.work-page { min-height: calc(100vh - 150px); padding: 74px max(24px, 15vw) 90px; background: radial-gradient(circle at 50% 12%, #12212a, #050b0f 46%); }
.work-header { max-width: 850px; margin: auto; text-align: center; }
.back-link { display: inline-block; margin-bottom: 58px; color: var(--text-secondary); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; }
.work-header h1 { max-width: 900px; margin: 18px auto 58px; font: 500 clamp(40px, 5vw, 72px)/1.02 var(--serif); text-wrap: balance; }
.work-reading { max-width: 1120px; margin: auto; display: grid; grid-template-columns: minmax(240px, 330px) minmax(0, 720px); align-items: start; gap: clamp(45px, 7vw, 95px); }
.work-art { position: sticky; top: 96px; aspect-ratio: 5 / 7; margin: 0; overflow: hidden; border: 1px solid var(--border); background: #091218; }
.work-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 62%, rgba(2,7,10,.55)); pointer-events: none; }
.work-art img { width: 100%; height: 100%; display: block; object-fit: cover; }
.poem { max-width: 720px; margin: 0; font: 400 clamp(19px, 1.7vw, 25px)/1.55 var(--serif); }
.poem span { display: block; white-space: pre-wrap; }
.poem > p { margin: 0; white-space: pre-wrap; }
.work-reading.prose-reading { max-width: 1220px; grid-template-columns: minmax(220px, 300px) minmax(0, 840px); gap: clamp(44px, 6vw, 82px); }
.poem.prose { max-width: 840px; font-size: clamp(18px, 1.45vw, 21px); }
.poem.prose p { margin: 0 0 1.25em; line-height: 1.78; }
.breadcrumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-bottom: 48px; color: var(--text-secondary); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.bibliographic-note, .cycle-back { display: block; max-width: 840px; margin: 35px auto 0; color: var(--text-muted); font-size: 12px; }
.workshop-link { display: flex; width: max-content; margin: 55px auto 0; }
.work-neighbors { max-width: 940px; margin: 90px auto 0; padding-top: 28px; border-top: 1px solid var(--border); display: grid; grid-template-columns: 1fr 1fr; gap: 50px; font: 500 22px/1.15 var(--serif); }
.work-neighbors a:last-child { text-align: right; }
.work-neighbors span { display: block; margin-bottom: 8px; color: var(--text-muted); font: 9px var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.not-found { min-height: calc(100vh - 74px); display: grid; place-content: center; text-align: center; }
.not-found h1 { font: 500 48px var(--serif); }

.listing-page, .theme-page { min-height: calc(100vh - 74px); padding: 80px max(24px, 7vw) 100px; background: radial-gradient(circle at 80% 5%, #10212a, var(--page-bg) 38%); }
.page-intro { max-width: 900px; margin: 0 auto 70px; text-align: center; }
.page-intro h1 { margin: 12px 0 22px; font: 500 clamp(52px, 7vw, 104px)/.95 var(--serif); letter-spacing: .035em; text-wrap: balance; }
.page-intro > p:last-of-type { max-width: 720px; margin: auto; color: #c4c2bc; font: 400 clamp(19px, 2vw, 28px)/1.4 var(--serif); }
.page-intro small { display: block; margin-top: 22px; color: var(--text-muted); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; }
.work-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 80px; }
.work-filters a { padding: 11px 15px; border: 1px solid var(--border); color: var(--text-secondary); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.work-filters a[aria-current="page"] { border-color: var(--accent); color: var(--accent); }
.form-filters { display: flex; justify-content: center; gap: 34px; margin: -35px 0 24px; }
.form-filters a { padding: 12px 26px; border-bottom: 1px solid var(--border); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; }
.form-filters a[aria-current="page"] { color: var(--accent); border-color: var(--accent); }
.archive-sections { max-width: 1380px; margin: auto; }
.archive-section { margin-bottom: 88px; scroll-margin-top: 90px; }
.archive-section > header { display: grid; grid-template-columns: 1fr auto; align-items: end; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.archive-section > header .eyebrow { grid-column: 1; }
.archive-section > header h2 { grid-column: 1; margin: 0 0 20px; font: 500 clamp(38px, 5vw, 64px)/1 var(--serif); }
.archive-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; align-items: start; }
.listing-page--prose .archive-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.archive-work { min-width: 0; height: 610px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); background: rgba(8,17,23,.78); }
.work-card.archive-work h3 { min-height: 2.15em; margin: 13px 0 17px; font: 500 25px/1.06 var(--serif); letter-spacing: normal; text-transform: none; text-wrap: balance; }
.work-card.archive-work h3 a { min-height: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.work-card__media { height: 250px; flex: 0 0 auto; display: block; position: relative; overflow: hidden; background: #071017; }
.work-card__media::after { content: ""; position: absolute; inset: auto 0 0; height: 36%; background: linear-gradient(180deg, transparent, rgba(5,12,17,.64)); pointer-events: none; }
.work-card__media img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .65s ease; }
.work-card:hover .work-card__media img, .work-card:focus-within .work-card__media img { transform: scale(1.035); }
.work-card__body { min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; padding: 23px 22px 27px; }
.work-card__meta { margin: 0; }
.work-card__excerpt { flex: 1 1 auto; min-height: 0; margin: 0; overflow: hidden; color: #bbb9b3; font: 400 17px/1.48 var(--serif); }
.work-card__excerpt span { display: block; }
.work-card__excerpt--prose { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 12; line-clamp: 12; }
.work-card__excerpt--prose.is-truncated::after { content: "…"; }
.text-link { display: inline-block; margin-top: 26px; color: var(--accent); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.work-card__link { margin-top: auto; padding-top: 26px; }

.theme-page { padding-inline: max(24px, 5vw); }
.theme-list { max-width: 1320px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; align-items: start; margin: auto; }
.prose-page .theme-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.theme-work { min-width: 0; height: 610px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); background: rgba(8,17,23,.78); }
.theme-work .work-card__media { height: 260px; }
.theme-visual { min-height: 430px; overflow: hidden; position: relative; }
.theme-visual img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 30%; }
.theme-visual.texture { display: grid; place-items: center; background:
  radial-gradient(circle at 68% 22%, rgba(180,138,75,.19), transparent 26%),
  repeating-linear-gradient(117deg, transparent 0 18px, rgba(255,255,255,.025) 19px 20px),
  linear-gradient(145deg, #0f2029, #050b0f); }
.theme-visual.texture::after { content: ""; position: absolute; inset: 9%; border: 1px solid rgba(255,255,255,.08); }
.theme-visual.texture span { color: rgba(180,138,75,.42); font: 500 92px/1 var(--serif); }
.theme-copy { width: 100%; height: auto; padding: 23px 24px 28px; }
.theme-copy h2 { min-height: 2.1em; margin: 13px 0 18px; font: 500 clamp(25px, 2vw, 32px)/1.05 var(--serif); overflow-wrap: break-word; text-wrap: balance; }
.theme-copy .work-card__excerpt { font-size: clamp(16px, 1.25vw, 18px); }
.section-neighbors { max-width: 1100px; margin: 100px auto 0; padding-top: 30px; border-top: 1px solid var(--border); display: grid; grid-template-columns: 1fr 1fr; font: 500 28px/1.1 var(--serif); }
.section-neighbors a:last-child { text-align: right; }
.section-neighbors span { display: block; margin-bottom: 8px; color: var(--text-muted); font: 9px var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.prose-cycle { max-width: 1320px; margin: 0 auto 110px; }
.cycle-header { max-width: 830px; margin: 0 auto 50px; text-align: center; }
.cycle-header h2 { margin: 10px 0 20px; font: 500 clamp(48px, 7vw, 86px)/1 var(--serif); text-transform: uppercase; }
.cycle-header > p:last-child { color: #bdbab3; font: 400 22px/1.45 var(--serif); }
.back-to-prose { display: table; margin: 0 auto; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.songs-page { min-height: calc(100vh - 150px); overflow-x: clip; padding: 28px max(38px, 5vw) 20px; background: radial-gradient(circle at 50% 15%, rgba(15,34,45,.68), transparent 42%), linear-gradient(180deg, #061018, #040b10); }
.songs-page .page-intro { margin: 0 auto 22px; }
.songs-page .page-intro h1 { margin: 0 0 8px; font-size: clamp(50px, 4.8vw, 72px); letter-spacing: .18em; }
.songs-page .page-intro > p:last-child { font-size: clamp(18px, 1.65vw, 24px); }
.songs-title-rule { width: 180px; height: 12px; display: block; position: relative; margin: 0 auto 5px; }
.songs-title-rule::before, .songs-title-rule::after { content: ""; position: absolute; top: 5px; width: 74px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent)); }
.songs-title-rule::after { right: 0; transform: scaleX(-1); }
.songs-title-rule { background: radial-gradient(closest-side, var(--accent) 0 28%, transparent 32%); }
.song-grid { max-width: 1380px; margin: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 2.6vw, 42px); }
.song-card { min-width: 0; min-height: 515px; overflow: hidden; padding: 22px 24px 18px; border: 1px solid rgba(182,190,192,.18); border-radius: 6px; background: linear-gradient(145deg, rgba(11,26,35,.88), rgba(5,14,20,.93)); box-shadow: 0 18px 45px rgba(0,0,0,.15); transition: border-color .35s ease, box-shadow .35s ease; }
.song-card.is-active { border-color: rgba(190,139,69,.82); box-shadow: 0 18px 50px rgba(0,0,0,.23), inset 0 0 30px rgba(180,138,75,.035); }
.vinyl-stage { width: 100%; height: 254px; display: block; position: relative; margin: 0 0 14px; padding: 0; border: 0; color: inherit; text-align: left; background: transparent; cursor: pointer; }
.vinyl-stage:disabled { cursor: not-allowed; opacity: .55; }
.record-sleeve { width: min(72%, 260px); aspect-ratio: 1; display: block; position: relative; z-index: 2; margin: 0; overflow: hidden; border: 1px solid rgba(221,211,189,.25); background: #0b141a; box-shadow: 0 10px 28px rgba(0,0,0,.38); }
.record-cover { width: 100%; height: 100%; display: block; object-fit: cover; }
.vinyl-shift { width: min(72%, 260px); aspect-ratio: 1; position: absolute; z-index: 1; top: 2px; left: 0; transform: translateX(29%); transition: transform .7s cubic-bezier(.22,.72,.25,1); }
.song-card.is-extended .vinyl-shift { transform: translateX(58%); }
.vinyl-record { width: 100%; height: 100%; position: relative; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(225,220,205,.35); background:
  radial-gradient(circle, transparent 0 10%, rgba(188,139,72,.15) 10.5% 11%, transparent 11.5% 18%, rgba(255,255,255,.06) 18.5% 19%, transparent 19.5%),
  repeating-radial-gradient(circle, #111416 0 2px, #222426 2.5px 3px, #0c0f11 3.5px 5px);
  box-shadow: inset 14px 6px 25px rgba(255,255,255,.06), inset -12px -7px 25px rgba(0,0,0,.7), 4px 8px 20px rgba(0,0,0,.45);
}
.vinyl-record::after { content: ""; position: absolute; inset: 4%; border-radius: 50%; background: linear-gradient(118deg, transparent 36%, rgba(255,255,255,.09) 44%, transparent 51%); }
.vinyl-label { width: 34%; aspect-ratio: 1; position: relative; z-index: 2; display: grid; place-content: center; gap: 4px; border-radius: 50%; border: 1px solid rgba(190,139,69,.38); text-align: center; background: radial-gradient(circle, #26313a 0 8%, #111d24 9% 64%, #92703e 65% 67%, #0d171d 68%); }
.vinyl-label span { font: 500 clamp(7px, .6vw, 10px)/1 var(--serif); letter-spacing: .17em; }
.vinyl-label small { max-width: 10ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #b7a47e; font-size: 5px; letter-spacing: .08em; text-transform: uppercase; }
.song-card.is-extended .vinyl-record { animation: vinyl-spin 21s linear infinite; animation-play-state: paused; }
.song-card.is-playing .vinyl-record { animation-play-state: running; }
@keyframes vinyl-spin { to { transform: rotate(360deg); } }
.song-card h2 { min-height: 2.05em; margin: 0 0 2px; font: 500 clamp(25px, 2.1vw, 34px)/1.03 var(--serif); text-wrap: balance; }
.song-first-line { min-height: 1.4em; margin: 0 0 14px; overflow: hidden; color: #b7b4ac; font: 400 15px/1.35 var(--serif); white-space: nowrap; text-overflow: ellipsis; }
.song-credit { margin: 0 0 15px; color: var(--accent); font-size: 13px; letter-spacing: .035em; }
.song-player { min-width: 0; display: grid; grid-template-columns: 44px 42px minmax(60px, 1fr) 42px; gap: 8px; align-items: center; }
.song-audio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.song-play { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); background: rgba(5,13,18,.75); cursor: pointer; }
.song-play:disabled { cursor: not-allowed; opacity: .4; }
.song-play__icon { width: 0; height: 0; margin-left: 3px; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 11px solid currentColor; }
.song-play.is-playing .song-play__icon { width: 11px; height: 14px; margin: 0; border: 0; background: linear-gradient(90deg, currentColor 0 3px, transparent 3px 8px, currentColor 8px 11px); }
.song-time { color: #c4c2bc; font-size: 12px; font-variant-numeric: tabular-nums; }
.song-time--duration { text-align: right; }
.song-progress-label { min-width: 0; display: flex; }
.song-progress, .song-volume input { --progress: 0%; width: 100%; height: 22px; margin: 0; appearance: none; background: transparent; cursor: pointer; }
.song-progress::-webkit-slider-runnable-track, .song-volume input::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--accent) var(--progress), #667078 var(--progress)); }
.song-progress::-moz-range-track, .song-volume input::-moz-range-track { height: 2px; background: #667078; }
.song-progress::-moz-range-progress, .song-volume input::-moz-range-progress { height: 2px; background: var(--accent); }
.song-progress::-webkit-slider-thumb, .song-volume input::-webkit-slider-thumb { width: 9px; height: 9px; margin-top: -3.5px; appearance: none; border: 0; border-radius: 50%; background: #e1a652; }
.song-progress::-moz-range-thumb, .song-volume input::-moz-range-thumb { width: 9px; height: 9px; border: 0; border-radius: 50%; background: #e1a652; }
.song-volume { grid-column: 3 / 5; display: grid; grid-template-columns: 16px minmax(55px, 110px); gap: 7px; justify-content: end; align-items: center; color: #879096; font-size: 15px; }
.song-volume input { height: 15px; }
.song-error { grid-column: 1 / -1; margin: 2px 0 0; color: #c6a77b; font-size: 11px; }
.song-read-link { min-height: 32px; display: table; margin: 3px 0 0 auto; padding-top: 7px; border-bottom: 1px solid var(--accent); color: #d5d1c8; font-size: 12px; letter-spacing: .04em; }
.work-song { max-width: 940px; margin: 58px auto 0; padding: 20px; border: 1px solid rgba(180,138,75,.3); background: rgba(3,9,13,.66); }
.work-song > .eyebrow, .work-song > .song-player__title { grid-column: 1 / -1; }
.work-song > .song-player__title { margin: -4px 0 9px; font: 500 19px/1.2 var(--serif); }

.placeholder-page { min-height: calc(100vh - 150px); display: grid; place-content: center; justify-items: center; padding: 70px 24px; text-align: center; background: radial-gradient(circle, #11232d, var(--page-bg) 50%); }
.placeholder-page h1 { margin: 12px 0 20px; font: 500 clamp(56px, 8vw, 110px)/1 var(--serif); }
.placeholder-page > p:not(.eyebrow) { max-width: 660px; margin: 0 0 36px; color: #c4c2bc; font: 400 23px/1.5 var(--serif); }

.about-page { min-height: calc(100vh - 74px); padding: 96px max(24px, 7vw) 112px; overflow: hidden; background:
  radial-gradient(circle at 82% 9%, rgba(30,62,75,.52), transparent 34%),
  linear-gradient(180deg, #08141b, var(--page-bg) 54%); }
.about-hero { max-width: 1050px; margin: 0 auto 72px; text-align: center; }
.about-hero h1 { margin: 14px 0 32px; font: 500 clamp(58px, 8vw, 112px)/.92 var(--serif); letter-spacing: .025em; text-transform: uppercase; text-wrap: balance; }
.about-body { max-width: 800px; margin: auto; color: #c5c2ba; font: 400 clamp(18px, 1.35vw, 20px)/1.8 var(--serif); }
.about-body p { margin: 0 0 1.55em; }
.about-body p:first-child { color: var(--text-primary); font-size: 1.12em; }

@media (max-width: 1220px) {
  .site-header { padding: 0 4.5%; }
  .desktop-nav { gap: 24px; margin-left: 45px; }
  .hero { padding-left: 7%; }
  .social-rail { display: none; }
  .cards { overflow-x: auto; grid-template-columns: repeat(8, calc((100vw - 98px) / 4)); scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .work-card { scroll-snap-align: start; }
  .desktop-nav { display: none; }
  .menu-toggle { display: flex; margin-left: auto; width: 44px; height: 44px; border: 0; background: transparent; flex-direction: column; justify-content: center; gap: 7px; }
  .menu-toggle span { width: 24px; height: 1px; margin-left: auto; background: var(--text-primary); }
  .mobile-nav { position: fixed; inset: 74px 0 auto; max-height: calc(100vh - 74px); overflow: auto; padding: 24px 5%; background: rgba(3,8,12,.98); border-bottom: 1px solid var(--border); }
  .mobile-nav:not([hidden]) { display: grid; }
  .mobile-nav a { min-height: 50px; display: flex; align-items: center; border-bottom: 1px solid var(--border); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
  .utility-navigation { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 24px; }
  .archive-list { grid-template-columns: repeat(2, 1fr); }
  .listing-page--prose .archive-list { grid-template-columns: repeat(2, 1fr); }
  .theme-list, .prose-page .theme-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .archive-work, .theme-work { height: 600px; }
  .work-card__media, .theme-work .work-card__media { height: 230px; }
}
@media (max-width: 900px) {
  .mobile-nav { position: fixed; inset: 74px 0 auto; max-height: calc(100vh - 74px); overflow: auto; padding: 24px 5%; background: rgba(3,8,12,.98); border-bottom: 1px solid var(--border); }
  .mobile-nav:not([hidden]) { display: grid; }
  .mobile-nav a { min-height: 50px; display: flex; align-items: center; border-bottom: 1px solid var(--border); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
  .hero { min-height: 570px; grid-template-columns: 1fr 1fr; padding: 48px 7% 24px; }
  .hero-intro { align-self: start; }
  .quote-slider { grid-column: 2; align-self: end; padding: 67px 0 30px 7%; background: linear-gradient(90deg, transparent, rgba(2,7,10,.38)); }
  .quote-mark { top: 16px; }
  .quote-slide blockquote { font-size: 19px; }
  .hero::before { background: linear-gradient(90deg, rgba(2,7,10,.75), rgba(2,7,10,.25) 48%, rgba(2,7,10,.59)), linear-gradient(180deg, rgba(2,7,11,.05), rgba(2,7,11,.27)); }
  .utility-navigation { margin-inline: 4%; }
  .prose-feature-grid { grid-template-columns: 1fr; }
  .footer { padding-inline: 4%; }
  .song-grid { max-width: none; display: flex; overflow-x: auto; padding: 0 7% 12px 0; scroll-snap-type: x mandatory; scrollbar-width: thin; }
  .song-card { flex: 0 0 min(66vw, 450px); scroll-snap-align: start; }
  .about-page { padding-top: 76px; }
  .about-hero { margin-bottom: 68px; }
}
@media (max-width: 640px) {
  .site-header { height: 64px; padding: 0 20px; }
  .logo { font-size: 25px; }
  .mobile-nav { inset-block-start: 64px; }
  .hero { height: 656px; min-height: 656px; display: block; padding: 47px 20px 18px; }
  .hero h1 { font-size: clamp(47px, 14vw, 52px); }
  .hero-subtitle { font-size: 12px; letter-spacing: .32em; }
  .hero-description { max-width: 330px; font-size: 17px; }
  .button { min-height: 46px; }
  .quote-slider { min-height: 284px; margin-top: 18px; padding: 54px 0 32px; background: linear-gradient(180deg, transparent, rgba(2,7,10,.32)); }
  .quote-mark { top: 3px; }
  .slides { height: 207px; }
  .quote-slide blockquote { min-height: 164px; font-size: 20px; line-height: 1.4; }
  .quote-slide figcaption { font-size: 9px; line-height: 1.5; }
  .slider-dots { left: 0; right: auto; bottom: -3px; }
  .hero::before { background: linear-gradient(90deg, rgba(2,7,10,.74), rgba(2,7,10,.31) 58%, rgba(2,7,10,.58)), linear-gradient(180deg, rgba(2,7,11,.08), rgba(2,7,11,.31)); }
  .featured { padding: 24px 20px 29px; }
  .section-heading { gap: 15px; margin-bottom: 22px; }
  .section-heading h2 { font-size: 12px; letter-spacing: .32em; }
  .cards { grid-template-columns: repeat(8, min(78vw, 270px)); gap: 14px; margin-right: -20px; }
  .work-card { height: 350px; }
  .work-card h3 { font-size: 21px; }
  .utility-navigation { margin: 0 20px; padding: 10px 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; }
  .utility-navigation__item { min-height: 48px; justify-content: flex-start; text-align: left; }
  .utility-navigation__item span { font-size: 13px; }
  .utility-navigation__item:last-child { grid-column: 1 / -1; justify-content: center; }
  .footer { grid-template-columns: 1fr; padding: 30px 20px; text-align: center; gap: 16px; }
  .footer > :last-child { text-align: center; }
  .work-page { padding: 45px 20px 65px; }
  .back-link { margin-bottom: 42px; }
  .work-header { text-align: left; }
  .breadcrumbs { justify-content: flex-start; margin-bottom: 36px; }
  .work-header h1 { margin: 14px 0 45px; font-size: clamp(40px, 12vw, 55px); }
  .work-reading, .work-reading.prose-reading { display: block; }
  .work-art { position: relative; top: auto; width: min(100%, 420px); margin: 0 auto 42px; }
  .poem { font-size: 19px; line-height: 1.55; overflow-wrap: anywhere; }
  .work-neighbors { margin-top: 65px; grid-template-columns: 1fr; gap: 28px; font-size: 20px; }
  .work-neighbors a:last-child { text-align: left; }
  .footer { grid-template-columns: 1fr; }
  .listing-page, .theme-page { padding: 50px 20px 70px; }
  .page-intro { margin-bottom: 45px; text-align: left; }
  .page-intro h1 { font-size: clamp(48px, 16vw, 72px); }
  .work-filters { justify-content: flex-start; margin-bottom: 50px; }
  .archive-section { margin-bottom: 70px; }
  .archive-list { grid-template-columns: 1fr; }
  .listing-page--prose .archive-list { grid-template-columns: 1fr; }
  .archive-work { height: auto; min-height: 580px; max-height: 680px; }
  .archive-work h3 { min-height: 0; font-size: 29px; }
  .theme-list, .prose-page .theme-list { grid-template-columns: 1fr; gap: 20px; }
  .theme-work { height: auto; min-height: 580px; max-height: 700px; }
  .work-card__media, .theme-work .work-card__media { width: 100%; height: clamp(280px, 90vw, 360px); }
  .work-card__body, .theme-copy { padding: 28px 24px 32px; }
  .theme-copy h2 { font-size: 32px; }
  .work-card__excerpt--prose { -webkit-line-clamp: 10; line-clamp: 10; }
  .section-neighbors { grid-template-columns: 1fr; gap: 30px; font-size: 24px; }
  .section-neighbors a:last-child { text-align: left; }
  .songs-page { padding: 35px 20px 55px; }
  .songs-page .page-intro { margin-bottom: 28px; text-align: center; }
  .songs-page .page-intro h1 { font-size: 48px; }
  .song-grid { display: grid; grid-template-columns: 1fr; gap: 24px; overflow: visible; margin-right: 0; padding: 0; }
  .song-card { min-height: 0; padding: 18px; }
  .vinyl-stage { height: min(72vw, 270px); }
  .record-sleeve, .vinyl-shift { width: min(72vw, 270px); }
  .song-card h2 { min-height: 0; font-size: 29px; }
  .song-player { grid-template-columns: 44px 40px minmax(50px, 1fr) 40px; gap: 6px; }
  .song-volume { display: none; }
  .song-read-link { margin-top: 7px; }
  .work-song { padding: 16px; }
  .about-page { padding: 55px 20px 76px; }
  .about-hero { margin-bottom: 52px; text-align: left; }
  .about-hero h1 { margin-bottom: 26px; font-size: clamp(44px, 14vw, 60px); }
  .about-body { font-size: 17px; line-height: 1.78; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .song-card.is-extended .vinyl-record { animation: none !important; }
}