:root {
  --navy: #071d3d;
  --navy-2: #0b2d59;
  --blue: #185da8;
  --gold: #c9942c;
  --gold-light: #edc66e;
  --cream: #f7f2e8;
  --paper: #fffdf8;
  --ink: #13213a;
  --muted: #667184;
  --line: rgba(7, 29, 61, 0.16);
  --serif: "Libre Caslon Display", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
  --content: min(1180px, calc(100vw - 48px));
}

* { box-sizing: border-box; }
html { max-width: 100%; overflow-x: hidden; overflow-x: clip; scroll-behavior: smooth; }
body { max-width: 100%; margin: 0; overflow-x: hidden; overflow-x: clip; color: var(--ink); background: var(--paper); font-family: var(--sans); line-height: 1.6; }
body.nav-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
section[id] { scroll-margin-top: 86px; }

.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; }
.skip-link { position: fixed; z-index: 100; left: 16px; top: 12px; padding: 10px 16px; color: white; background: var(--navy); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: fixed; z-index: 50; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; height: 84px; padding: 0 max(24px, calc((100vw - 1180px) / 2)); color: white; transition: background .3s ease, box-shadow .3s ease, height .3s ease; }
.site-header::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; opacity: .8; background: linear-gradient(90deg, #e74335, #efb62f, #55a15d, #4097cb, #7b62b7); }
.site-header.is-scrolled { height: 72px; background: rgba(7, 29, 61, .97); box-shadow: 0 10px 28px rgba(0, 0, 0, .15); }
.brand { display: flex; align-items: center; gap: 12px; color: white; text-decoration: none; line-height: 1.1; }
.brand img { width: 56px; height: 56px; object-fit: contain; }
.brand span { display: grid; gap: 5px; }
.brand strong { font-family: var(--serif); font-size: 17px; font-weight: 400; letter-spacing: .02em; }
.brand small { font-size: 9px; letter-spacing: .15em; text-transform: uppercase; opacity: .7; }
.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav a { color: white; text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.site-nav a:not(.nav-cta) { position: relative; }
.site-nav a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -7px; height: 1px; background: var(--gold-light); transition: right .25s ease; }
.site-nav a:hover::after, .site-nav a:focus-visible::after { right: 0; }
.nav-cta { padding: 10px 17px; border: 1px solid rgba(255,255,255,.5); }
.nav-toggle { display: none; color: white; background: transparent; border: 0; padding: 9px; }

.hero { min-height: 760px; position: relative; display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: 3vw; padding: 150px max(24px, calc((100vw - 1180px) / 2)) 92px; color: white; overflow: hidden; background: var(--navy); }
.hero::before { content: ""; position: absolute; width: 680px; height: 680px; left: -410px; bottom: -440px; border: 1px solid rgba(237,198,110,.25); border-radius: 50%; box-shadow: 0 0 0 90px rgba(237,198,110,.035), 0 0 0 180px rgba(237,198,110,.025); }
.hero-copy { position: relative; z-index: 2; max-width: 600px; }
.eyebrow { margin: 0 0 22px; color: #8a6419; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.eyebrow-light { color: var(--gold-light); }
h1, h2 { margin: 0; font-family: var(--serif); font-weight: 400; line-height: .98; letter-spacing: -.03em; }
h1 { font-size: clamp(50px, 6.1vw, 86px); }
h1 em, h2 em { color: var(--gold-light); font-style: italic; }
.hero-lede { max-width: 560px; margin: 30px 0 34px; color: rgba(255,255,255,.73); font-size: clamp(17px, 2vw, 20px); line-height: 1.65; }
.button-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 50px; padding: 0 22px; border: 1px solid transparent; text-decoration: none; font-size: 13px; font-weight: 700; transition: transform .2s ease, background .2s ease, color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-gold { color: var(--navy); background: var(--gold-light); }
.button-quiet { color: white; border-color: rgba(255,255,255,.38); }
.button-navy { color: white; background: var(--navy); }
.hero-art { position: relative; z-index: 1; width: 100%; margin: 0; }
.hero-art::before { content: ""; position: absolute; inset: -20px 20px 20px -20px; border: 1px solid rgba(237,198,110,.4); }
.hero-art img { position: relative; width: 100%; height: auto; min-height: 0; aspect-ratio: 1280 / 853; object-fit: contain; object-position: center; box-shadow: 0 32px 72px rgba(0,0,0,.35); }
.hero-art figcaption { position: absolute; right: 0; bottom: -42px; color: rgba(255,255,255,.55); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; }
.hero-scroll { position: absolute; bottom: 27px; left: max(24px, calc((100vw - 1180px) / 2)); display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.45); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; }
.hero-scroll span { display: block; width: 50px; height: 1px; background: rgba(255,255,255,.35); }

.section { position: relative; width: var(--content); margin: auto; padding: 128px 0; }
.section-number { position: absolute; top: 128px; left: 0; color: var(--gold); font-size: 12px; }
.welcome { display: grid; grid-template-columns: .7fr 1fr; gap: 10%; padding-left: 70px; }
.section-intro h2, .harvest h2, .giving h2, .contact h2 { color: var(--navy); font-size: clamp(45px, 5.5vw, 76px); }
.welcome-body { padding-top: 18px; }
.welcome-body .lead { margin-top: 0; color: var(--navy); font-family: var(--serif); font-size: clamp(23px, 2.3vw, 31px); line-height: 1.35; }
.welcome-body > p:not(.lead) { max-width: 620px; color: var(--muted); }
.faith-note { display: flex; align-items: center; gap: 18px; margin-top: 38px; padding-top: 28px; border-top: 1px solid var(--line); }
.faith-note .cross { color: var(--gold); font-size: 24px; }
.faith-note p { margin: 0; color: var(--navy); font-weight: 600; }

.parish-life { display: grid; grid-template-columns: .65fr 1.35fr; gap: 7%; align-items: center; padding: 30px max(24px, calc((100vw - 1180px) / 2)) 128px; background: var(--paper); }
.parish-life-copy h2 { color: var(--navy); font-size: clamp(44px, 5.1vw, 70px); }
.parish-life-copy > p:not(.eyebrow) { max-width: 410px; color: var(--muted); }
.parish-life-gallery { display: grid; gap: 12px; min-width: 0; }
.life-photo-row { display: grid; gap: 12px; align-items: start; min-width: 0; }
.life-photo-row-ceremony { grid-template-columns: 4fr 3fr; }
.life-photo-row-community { grid-template-columns: 1.2fr 1fr; }
.life-photo { min-width: 0; margin: 0; overflow: hidden; }
.life-photo img { width: 100%; height: auto; object-fit: contain; }

.section-dark { color: white; background: var(--navy); }
.shepherd { display: grid; grid-template-columns: minmax(320px, .85fr) 1.15fr; gap: clamp(50px, 8vw, 120px); align-items: center; padding: 112px max(24px, calc((100vw - 1080px) / 2)); overflow: hidden; }
.shepherd-photo { position: relative; }
.shepherd-photo img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; object-position: center; filter: saturate(.87) contrast(1.02); }
.photo-rule { position: absolute; inset: 22px -22px -22px 22px; border: 1px solid rgba(237,198,110,.45); pointer-events: none; }
.shepherd-copy h2 { max-width: 700px; font-size: clamp(46px, 5.7vw, 76px); }
.shepherd-copy .title { color: var(--gold-light); font-size: 12px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.shepherd blockquote { max-width: 650px; margin: 45px 0 24px; padding-left: 24px; border-left: 1px solid var(--gold-light); color: rgba(255,255,255,.85); font-family: var(--serif); font-size: clamp(21px, 2.2vw, 29px); line-height: 1.45; }
.muted { color: rgba(255,255,255,.5); font-size: 14px; }

.harvest { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(45px, 7vw, 90px); align-items: center; }
.harvest-flyer { position: relative; }
.harvest-flyer::after { content: "2026"; position: absolute; right: -34px; top: -55px; z-index: -1; color: #efe5d2; font-family: var(--serif); font-size: 118px; line-height: 1; }
.harvest-flyer a { display: block; box-shadow: 0 28px 65px rgba(65,43,10,.16); }
.harvest-flyer img { width: 100%; height: auto; }
.harvest-flyer img { aspect-ratio: 1280 / 853; object-fit: contain; }
.harvest-copy h2 em { color: var(--gold); }
.scripture { max-width: 540px; margin: 26px 0; color: var(--muted); font-family: var(--serif); font-size: 18px; font-style: italic; }
.scripture span { color: inherit; white-space: normal; }
.scripture span:last-child { color: var(--navy); white-space: nowrap; }
.date-block { display: grid; gap: 3px; padding: 20px 0; border-block: 1px solid var(--line); }
.date-block strong { color: var(--navy); font-size: 19px; }
.date-block span { color: var(--muted); font-size: 13px; }
.event-days { display: grid; grid-template-columns: repeat(3, 1fr); margin: 20px 0; }
.event-day { padding: 0 15px; border-left: 1px solid var(--line); }
.event-day:first-child { padding-left: 0; border-left: 0; }
.event-day span, .event-day strong, .event-day em { display: block; }
.event-day span { color: var(--gold); font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.event-day strong { margin: 6px 0 2px; color: var(--navy); font-size: 12px; line-height: 1.25; }
.event-day em { color: var(--muted); font-size: 11px; font-style: normal; }
.harvest-copy > p:not(.eyebrow):not(.scripture) { color: var(--muted); }
.text-link { color: var(--navy); font-size: 13px; font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--gold); }

.visit { padding: 122px max(24px, calc((100vw - 1180px) / 2)); color: white; background: linear-gradient(rgba(7,29,61,.96), rgba(7,29,61,.96)), url("/assets/images/identity-banner.jpg") center/cover; }
.visit-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.16); }
.visit-heading h2, .connect h2 { font-size: clamp(48px, 6vw, 78px); }
.visit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.visit-item { min-height: 235px; padding: 38px 40px 10px 0; }
.visit-item + .visit-item { padding-left: 40px; border-left: 1px solid rgba(255,255,255,.16); }
.visit-item span { color: var(--gold-light); font-size: 11px; }
.visit-item h3 { margin: 35px 0 8px; font-family: var(--serif); font-size: 27px; font-weight: 400; }
.visit-item p { max-width: 310px; color: rgba(255,255,255,.6); font-size: 14px; }
.visit-item a { color: var(--gold-light); font-size: 12px; font-weight: 700; text-decoration: none; }
.schedule-details { margin-top: 16px; }
.schedule-details summary { color: var(--gold-light); font-size: 12px; font-weight: 700; cursor: pointer; }
.schedule-details > div { max-height: 250px; margin: 14px 0; padding-right: 8px; overflow: auto; }
.schedule-details p { display: grid; grid-template-columns: 70px 1fr; gap: 8px; margin: 0; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.11); font-size: 11px; }
.schedule-details p strong { color: white; }
.schedule-details p span { color: rgba(255,255,255,.58); }
.schedule-details h4 { margin: 22px 0 4px; color: var(--gold-light); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }

.giving { display: grid; grid-template-columns: .72fr 1.28fr; gap: 8%; }
.giving-intro > p:not(.eyebrow) { max-width: 460px; color: var(--muted); }
.giving-options { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.giving-option { display: flex; flex-direction: column; min-height: 430px; padding: 42px; color: white; background: var(--navy); }
.giving-option-secondary { color: var(--ink); background: var(--cream); }
.giving-option > div { display: flex; align-items: center; justify-content: space-between; }
.option-number { color: var(--gold-light); font-size: 11px; }
.option-label { margin: 0; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .62; }
.giving-option h3 { margin: 70px 0 12px; font-family: var(--serif); font-size: 42px; font-weight: 400; }
.giving-option > p { margin: 0 0 35px; font-size: 14px; opacity: .7; }
.giving-option .button, .copy-button { margin-top: auto; align-self: flex-start; }
.giving-option:not(.giving-option-secondary) .button-navy { color: var(--navy); background: var(--gold-light); }
.copy-button { min-height: 48px; padding: 0 18px; color: white; background: var(--navy); border: 0; font: 700 13px var(--sans); cursor: pointer; }
.giving-note { position: absolute; right: 0; bottom: 91px; max-width: 60%; color: var(--muted); font-size: 11px; }

.connect { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 10%; min-height: 620px; padding: 95px max(24px, calc((100vw - 1050px) / 2)); overflow: hidden; }
.connect-mark { position: relative; display: grid; place-items: center; }
.connect-mark::before { content: ""; position: absolute; width: 120%; aspect-ratio: 1; border: 1px solid rgba(237,198,110,.2); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255,255,255,.018); }
.connect-mark img { position: relative; width: min(390px, 90%); height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.connect-copy p:not(.eyebrow) { max-width: 560px; margin: 26px 0 30px; color: rgba(255,255,255,.62); }

.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 10%; }
.contact-details { border-top: 1px solid var(--line); }
.contact-row { display: grid; grid-template-columns: 110px 1fr; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--line); }
[data-contact-dynamic] { display: contents; }
.contact-row > span { color: var(--gold); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.contact-row strong, .contact-row address, .contact-row a { color: var(--navy); font-size: 15px; font-style: normal; font-weight: 600; text-decoration: none; }

.footer { padding: 68px max(24px, calc((100vw - 1180px) / 2)) 28px; color: white; background: #04142c; }
.footer-brand { display: flex; align-items: center; gap: 26px; }
.footer-brand img { width: 90px; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.footer-brand p { max-width: 360px; color: rgba(255,255,255,.55); font-family: var(--serif); font-size: 19px; }
.footer nav { display: flex; flex-wrap: wrap; gap: 28px; margin: 45px 0; padding: 25px 0; border-block: 1px solid rgba(255,255,255,.12); }
.footer nav a { color: rgba(255,255,255,.7); font-size: 12px; text-decoration: none; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; color: rgba(255,255,255,.38); font-size: 10px; }
.footer-bottom span, .footer-bottom a { color: var(--gold-light); }
.footer-bottom a { text-decoration: none; }
.footer-bottom a:hover, .footer-bottom a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal-delay { transition-delay: .12s; }
.reveal-delay-2 { transition-delay: .22s; }
.reveal.is-visible { opacity: 1; transform: none; }
:focus-visible { outline: 3px solid #e8b84e; outline-offset: 4px; }

@media (max-width: 960px) {
  :root { --content: min(100% - 36px, 720px); }
  .nav-toggle { display: grid; gap: 6px; }
  .nav-toggle span:not(.sr-only) { display: block; width: 24px; height: 1px; background: currentColor; transition: transform .2s ease; }
  .nav-toggle[aria-expanded="true"] span:nth-of-type(2) { transform: translateY(3.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-of-type(3) { transform: translateY(-3.5px) rotate(-45deg); }
  .site-nav { position: fixed; inset: 72px 0 0; display: grid; align-content: center; justify-items: center; gap: 24px; background: var(--navy); transform: translateX(100%); transition: transform .3s ease; }
  .site-nav:not(.is-open) { visibility: hidden; pointer-events: none; }
  .site-nav.is-open { transform: none; }
  .site-nav a { font-family: var(--serif); font-size: 26px; font-weight: 400; }
  .hero { grid-template-columns: 1fr; padding-top: 132px; }
  .hero-art { margin-top: 20px; }
  .hero-art img { min-height: 0; }
  .hero-scroll { display: none; }
  .welcome, .harvest, .giving, .contact { grid-template-columns: minmax(0, 1fr); }
  .harvest > *, .giving > *, .contact > * { min-width: 0; max-width: 100%; }
  .parish-life { grid-template-columns: 1fr; gap: 40px; }
  .welcome { padding-left: 0; }
  .section-number { display: none; }
  .shepherd { grid-template-columns: .85fr 1.15fr; gap: 50px; }
  .event-days { margin-bottom: 28px; }
  .giving-note { position: static; max-width: 100%; }
  .connect { grid-template-columns: .8fr 1.2fr; }
}

@media (max-width: 700px) {
  .site-header { height: 72px; padding-inline: 18px; }
  .brand img { width: 48px; height: 48px; }
  .brand strong { font-size: 15px; }
  .hero { min-height: auto; padding: 120px 18px 80px; }
  .hero-art::before { inset: -10px 10px 10px -10px; }
  .hero-art img { min-height: 0; }
  .hero-art figcaption { display: none; }
  .button-row { align-items: stretch; }
  .button-row .button { width: 100%; }
  .section { padding-block: 88px; }
  .parish-life { padding: 0 18px 88px; }
  .parish-life-gallery, .life-photo-row { grid-template-columns: 1fr; min-height: 0; }
  .life-photo img { height: auto; object-fit: contain; }
  .shepherd { grid-template-columns: 1fr; padding: 86px 28px; }
  .shepherd-photo { width: 100%; max-width: 480px; margin-inline: auto; }
  .shepherd blockquote { margin-top: 32px; }
  .harvest-flyer::after { right: -12px; top: -42px; font-size: 82px; }
  .event-days { grid-template-columns: 1fr; }
  .event-day { padding: 13px 0; border-left: 0; border-top: 1px solid var(--line); }
  .event-day:first-child { border-top: 0; }
  .visit { padding: 88px 24px; background: var(--navy); }
  .visit-heading { display: block; }
  .visit-heading .eyebrow { margin-bottom: 18px; }
  .visit-grid { grid-template-columns: 1fr; }
  .visit-item { min-height: 0; padding: 28px 0; }
  .visit-item + .visit-item { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.16); }
  .visit-item h3 { margin-top: 16px; }
  .giving-options { grid-template-columns: 1fr; }
  .giving-option { min-height: 350px; padding: 34px 28px; }
  .giving-option h3 { margin-top: 45px; }
  .connect { grid-template-columns: 1fr; gap: 55px; padding-block: 85px; }
  .connect-mark img { width: 240px; }
  .contact-row { grid-template-columns: 80px 1fr; }
  .footer-brand, .footer-bottom { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Dove cursor — the beak tip is the pointer hotspot. Static fallback for touch, reduced motion, or before JS loads. */
html, body { cursor: url("/assets/cursor/dove.svg") 1 1, auto; }
a, button, summary, label[for], [role="button"], .copy-button, .schedule-details summary { cursor: url("/assets/cursor/dove-gold.svg") 1 1, pointer; }
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), textarea { cursor: text; }

/* Animated dove (cursor.js) */
html.has-dove-cursor, html.has-dove-cursor * { cursor: none !important; }
html.has-dove-cursor input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]),
html.has-dove-cursor textarea, html.has-dove-cursor [contenteditable="true"] { cursor: text !important; }
html.has-dove-cursor iframe { cursor: auto !important; }
.dove-trail { position: fixed; z-index: 9998; inset: 0; pointer-events: none; }
.dove-cursor { position: fixed; z-index: 9999; top: 0; left: 0; width: 64px; height: 64px; pointer-events: none; opacity: 0; transform-origin: 1.6px 1.6px; will-change: transform; transition: opacity .25s ease; }
.dove-cursor.is-visible { opacity: 1; }
.dove-cursor svg { display: block; overflow: visible; filter: drop-shadow(0 5px 7px rgba(7, 29, 61, .32)) drop-shadow(0 0 1px rgba(7, 29, 61, .35)); transition: filter .35s ease; }
.dove-cursor .dc-aura { opacity: .35; transition: opacity .35s ease; }
.dove-cursor.is-hovering svg { filter: drop-shadow(0 5px 8px rgba(7, 29, 61, .3)) drop-shadow(0 0 10px rgba(237, 198, 110, .85)); }
.dove-cursor.is-hovering .dc-aura { opacity: 1; }
.dove-cursor::before { content: ""; position: absolute; left: -1px; top: -8px; width: 22px; height: 7px; border: 1.5px solid #edc66e; border-radius: 50%; box-shadow: 0 0 8px rgba(237, 198, 110, .9), inset 0 0 4px rgba(237, 198, 110, .6); opacity: 0; transform: translateY(4px) scale(.6); transition: opacity .3s ease, transform .35s cubic-bezier(.2, 1.4, .4, 1); }
.dove-cursor.is-hovering::before { opacity: 1; transform: translateY(0) scale(1); animation: dove-halo 2.2s ease-in-out infinite; }
@keyframes dove-halo { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2px; } }

/* Worship music player */
.music-player { position: fixed; z-index: 60; left: 20px; bottom: 20px; display: flex; align-items: center; gap: 12px; padding: 7px 16px 7px 7px; color: white; background: rgba(7, 29, 61, .92); border: 1px solid rgba(237, 198, 110, .35); border-radius: 999px; box-shadow: 0 14px 34px rgba(0, 0, 0, .28); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.music-toggle { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: var(--navy); background: linear-gradient(145deg, var(--gold-light), var(--gold)); border: 0; border-radius: 50%; transition: transform .2s ease, box-shadow .2s ease; }
.music-toggle:hover { transform: scale(1.06); box-shadow: 0 0 0 5px rgba(237, 198, 110, .18); }
.music-toggle:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.music-icon { width: 20px; height: 20px; fill: currentColor; }
.music-icon-pause, .music-player.is-playing .music-icon-play { display: none; }
.music-player.is-playing .music-icon-pause { display: block; }
.music-player.is-playing .music-toggle::after { content: ""; position: absolute; inset: -4px; border: 1px solid rgba(237, 198, 110, .55); border-radius: 50%; animation: music-pulse 2.4s ease-out infinite; }
.music-meta { display: grid; line-height: 1.15; }
.music-meta small { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; opacity: .65; }
.music-meta strong { font-family: var(--serif); font-size: 16px; font-weight: 400; letter-spacing: .02em; color: var(--gold-light); }
.music-bars { display: flex; align-items: flex-end; gap: 3px; height: 18px; }
.music-bars span { width: 3px; height: 4px; background: var(--gold-light); border-radius: 2px; opacity: .5; }
.music-player.is-playing .music-bars span { opacity: 1; animation: music-bar 1s ease-in-out infinite; }
.music-player.is-playing .music-bars span:nth-child(2) { animation-delay: -.4s; }
.music-player.is-playing .music-bars span:nth-child(3) { animation-delay: -.7s; }
.music-player.is-playing .music-bars span:nth-child(4) { animation-delay: -.2s; }
@keyframes music-bar { 0%, 100% { height: 4px; } 50% { height: 18px; } }
@keyframes music-pulse { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.5); } }
@media (max-width: 600px) {
  .music-player { left: 12px; bottom: 12px; gap: 10px; padding-right: 12px; }
  .music-meta small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .music-player.is-playing .music-bars span, .music-player.is-playing .music-toggle::after { animation: none; }
  .music-player.is-playing .music-bars span { height: 12px; }
}