:root {
  color-scheme: dark;
  --library-ink: #07191c;
  --library-deep: #0b2629;
  --library-paper: #fff1d0;
  --library-cream: #f2e3bd;
  --library-gold: #d7a547;
  --library-aqua: #79d8d0;
  --library-line: rgba(242, 227, 189, .18);
  --library-muted: rgba(242, 227, 189, .63);
}

* { box-sizing: border-box; }
html { background: var(--library-ink); scroll-behavior: smooth; }
body {
  min-width: 320px;
  margin: 0;
  color: var(--library-cream);
  background:
    radial-gradient(circle at 82% 12%, rgba(33, 86, 83, .24), transparent 28rem),
    linear-gradient(145deg, #07191c 0%, #0b2427 48%, #07191c 100%);
  font-family: "Helvetica Neue", Arial, sans-serif;
}
button, a { color: inherit; font: inherit; }
.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 12px 16px; color: var(--library-ink); background: var(--library-paper); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

.atlas-library-page main { width: min(1240px, calc(100% - 48px)); margin: 0 auto; }
.library-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  align-items: end;
  gap: clamp(35px, 9vw, 130px);
  min-height: 570px;
  padding: 104px 7vw 95px;
  border-bottom: 1px solid var(--library-line);
  background:
    linear-gradient(90deg, rgba(7, 25, 28, .98) 0%, rgba(7, 25, 28, .84) 42%, rgba(7, 25, 28, .32)),
    url("./assets/generated/atlas-broadcast-cartography-v1.jpg") center / cover;
  box-shadow: inset 0 -45px 80px rgba(7, 25, 28, .65);
}
.hero-copy { max-width: 720px; }
.eyebrow, .section-number { margin: 0 0 22px; color: var(--library-aqua); font-size: 10px; font-weight: 800; letter-spacing: .25em; text-transform: uppercase; }
.library-hero h1, .library-footer-note h2 { margin: 0; color: var(--library-paper); font: 400 clamp(55px, 7vw, 104px)/.9 Georgia, serif; letter-spacing: -.055em; }
.library-hero h1 em, .library-footer-note h2 em { color: var(--library-gold); font-weight: 400; }
.hero-lede { max-width: 610px; margin: 30px 0 0; color: rgba(255, 241, 208, .84); font: 400 clamp(17px, 1.5vw, 21px)/1.48 Georgia, serif; }
.catalog-card { position: relative; display: grid; grid-template-columns: 58px 1fr; gap: 15px; align-items: center; padding: 18px; border: 1px solid rgba(215, 165, 71, .54); background: rgba(5, 20, 22, .7); box-shadow: inset 0 0 0 4px rgba(215, 165, 71, .08); backdrop-filter: blur(10px); }
.catalog-card-mark { display: grid; width: 56px; height: 56px; place-items: center; border: 1px solid var(--library-gold); border-radius: 50%; color: #2a2115; background: radial-gradient(circle, #f2dda9 0 43%, #ae742d 45% 50%, #2a2115 52% 59%, #c68d3e 61%); font: 700 14px Georgia, serif; }
.catalog-card p { margin: 0 0 6px; color: var(--library-aqua); font-size: 8px; font-weight: 800; letter-spacing: .17em; }
.catalog-card strong { display: block; color: var(--library-paper); font: 400 18px/1.1 Georgia, serif; }
.catalog-card-rule { grid-column: 1 / -1; width: 100%; border-top: 1px solid var(--library-line); }
.catalog-card small { grid-column: 1 / -1; color: var(--library-muted); font-size: 10px; letter-spacing: .04em; }

.catalog-section { padding: 92px 7vw 30px; }
.section-heading { max-width: 670px; margin-bottom: 38px; }
.section-heading-wide { max-width: 760px; }
.section-heading h2 { margin: 0; color: var(--library-paper); font: 400 clamp(38px, 5vw, 65px)/.95 Georgia, serif; letter-spacing: -.045em; }
.section-heading > p:last-child { margin: 17px 0 0; color: var(--library-muted); font: 400 16px/1.55 Georgia, serif; }
.music-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.music-card, .story-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--library-line); background: linear-gradient(145deg, rgba(28, 57, 56, .7), rgba(7, 24, 27, .86)); }
.music-card { display: grid; grid-template-columns: 48px 66px 1fr; align-items: center; gap: 14px; min-height: 108px; padding: 15px 17px 15px 14px; }
.card-index, .story-index { align-self: start; color: var(--library-gold); font: 700 10px/1 "Helvetica Neue", sans-serif; letter-spacing: .13em; }
.card-art { display: grid; width: 62px; height: 62px; place-items: center; border: 1px solid rgba(215, 165, 71, .7); border-radius: 50%; background: radial-gradient(circle, #c79845 0 27%, #172d2c 29% 43%, #d7a547 45% 48%, #0b2629 50% 100%); box-shadow: 0 0 0 5px rgba(215, 165, 71, .07); }
.card-art span { color: var(--library-paper); font: 700 13px Georgia, serif; }
.music-card-copy { min-width: 0; }
.music-card-copy p, .story-type { margin: 0 0 7px; color: var(--library-aqua); font-size: 8px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.music-card h3, .story-card h3 { overflow-wrap: anywhere; margin: 0; color: var(--library-paper); font: 400 clamp(18px, 1.7vw, 23px)/1.08 Georgia, serif; }
.music-card-copy small { display: block; margin-top: 8px; color: var(--library-muted); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.catalog-only { position: absolute; right: 12px; bottom: 10px; color: rgba(242, 227, 189, .35); font-size: 7px; font-weight: 800; letter-spacing: .16em; }
.catalog-tools { margin: 0 0 20px; }
.catalog-search { display: grid; gap: 8px; color: var(--library-aqua); font-size: 8px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.catalog-search input { width: 100%; padding: 13px 14px; border: 1px solid var(--library-line); border-radius: 0; outline: none; color: var(--library-paper); background: rgba(4, 17, 19, .72); font: 400 16px Georgia, serif; }
.catalog-search input:focus { border-color: var(--library-aqua); box-shadow: 0 0 0 3px rgba(121, 216, 208, .12); }
.catalog-play, .story-open, .catalog-more { position: relative; z-index: 3; border: 1px solid rgba(121, 216, 208, .42); color: var(--library-aqua); background: rgba(6, 24, 26, .62); font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.catalog-play { grid-column: 2 / -1; justify-self: start; margin-top: 3px; padding: 8px 10px; }
.catalog-play span, .story-open span, .catalog-more span { color: var(--library-gold); font-size: 12px; }
.catalog-play:hover, .catalog-play:focus-visible, .story-open:hover, .story-open:focus-visible, .catalog-more:hover, .catalog-more:focus-visible { border-color: var(--library-gold); color: var(--library-paper); }
.catalog-more { grid-column: 1 / -1; justify-self: start; margin-top: 7px; padding: 12px 14px; }

.program-section { padding-top: 82px; }
.program-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.program-card { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; min-height: 142px; padding: 17px; border: 1px solid var(--library-line); background: linear-gradient(135deg, rgba(34, 62, 60, .72), rgba(7, 25, 28, .9)); }
.program-index { color: var(--library-gold); font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.program-card p { grid-column: 2; align-self: end; margin: 0; color: var(--library-aqua); font-size: 8px; font-weight: 800; letter-spacing: .15em; }
.program-card h3 { grid-column: 1 / -1; margin: 0; color: var(--library-paper); font: 400 21px/1.05 Georgia, serif; }
.program-card .catalog-play { grid-column: 1 / -1; margin-top: 2px; }

.story-section { padding-top: 112px; }
.island-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.island-filters button { padding: 10px 14px; border: 1px solid var(--library-line); border-radius: 999px; color: var(--library-muted); background: transparent; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.island-filters button:hover, .island-filters button:focus-visible, .island-filters button.is-selected { border-color: rgba(121, 216, 208, .7); color: var(--library-ink); background: var(--library-aqua); }
.story-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.story-card { min-height: 330px; padding: 19px 20px 24px; background: #0b2629; }
.story-card::after { position: absolute; z-index: 1; inset: 0; content: ""; pointer-events: none; background: linear-gradient(180deg, rgba(4, 16, 18, .26), rgba(4, 16, 18, .5) 42%, rgba(4, 16, 18, .94) 100%); }
.story-card-art { position: absolute; z-index: 0; inset: 0; overflow: hidden; }
.story-card-art img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.04) brightness(.82); }
.story-card-top, .story-card .story-compass, .story-card .story-type, .story-card h3, .story-card .story-place, .story-card .story-coordinates, .story-card .catalog-only { position: relative; z-index: 2; }
.story-card-top { display: flex; justify-content: space-between; }
.story-island { color: var(--library-aqua); font-size: 8px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.story-compass { display: grid; width: 68px; height: 68px; margin: 20px 0 18px; place-items: center; border: 1px solid rgba(255, 241, 208, .74); border-radius: 50%; color: var(--library-paper); background: rgba(7, 25, 28, .48); box-shadow: 0 5px 18px rgba(0, 0, 0, .2); font-size: 42px; line-height: 1; }
.story-type { margin-bottom: 7px; }
.story-place { margin: 8px 0 0; color: var(--library-muted); font: 400 14px/1.3 Georgia, serif; }
.story-coordinates { display: block; margin-top: 17px; color: rgba(242, 227, 189, .42); font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.story-open { margin-top: 16px; padding: 9px 10px; }
.story-card.is-playing-story { outline: 2px solid var(--library-aqua); outline-offset: 3px; }
.story-card.is-playing-story::before { position: absolute; z-index: 4; top: 14px; right: 15px; content: "NARRATING"; color: var(--library-ink); background: var(--library-aqua); padding: 5px 7px; font-size: 7px; font-weight: 800; letter-spacing: .14em; }
.story-card.is-playing-story .story-open { border-color: var(--library-aqua); color: var(--library-ink); background: var(--library-aqua); }
.story-controls { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: start; }
.story-count { color: var(--library-muted); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.loading-state, .empty-state { grid-column: 1 / -1; margin: 0; padding: 36px; border: 1px dashed var(--library-line); color: var(--library-muted); font: italic 18px Georgia, serif; text-align: center; }
.story-dialog { width: min(920px, calc(100% - 26px)); max-height: min(760px, calc(100dvh - 26px)); padding: 0; border: 1px solid rgba(215, 165, 71, .65); color: var(--library-cream); background: #081d20; box-shadow: 0 28px 100px rgba(0, 0, 0, .72); }
.story-dialog::backdrop { background: rgba(1, 10, 12, .8); backdrop-filter: blur(5px); }
.story-dialog-art { position: absolute; inset: 0 48% 0 0; }
.story-dialog-art::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, transparent, #081d20); }
.story-dialog-art img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.83) brightness(.76); }
.story-dialog-copy { position: relative; min-height: 510px; margin-left: 42%; padding: 42px; background: linear-gradient(90deg, rgba(8, 29, 32, .45), #081d20 20%); }
.dialog-close { position: absolute; top: 14px; right: 16px; width: 34px; height: 34px; border: 1px solid var(--library-line); border-radius: 50%; color: var(--library-paper); background: rgba(7, 25, 28, .68); font-size: 23px; line-height: 1; cursor: pointer; }
.story-dialog h2 { max-width: 600px; margin: 0; color: var(--library-paper); font: 400 clamp(36px, 5vw, 58px)/.96 Georgia, serif; letter-spacing: -.04em; }
.story-dialog-place { margin: 11px 0 24px; color: var(--library-aqua); font: 400 15px Georgia, serif; }
.story-dialog-text { max-height: 355px; padding-right: 8px; overflow: auto; color: var(--library-cream); font: 400 16px/1.55 Georgia, serif; }
.story-dialog-text p { margin: 0 0 17px; white-space: pre-line; }
.story-dialog-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 22px; }
.dialog-audio-note { color: var(--library-muted); font-size: 10px; line-height: 1.4; }
.library-footer-note { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(230px, .7fr) minmax(210px, .55fr); gap: 35px; align-items: end; margin: 105px 7vw 70px; padding: 58px 0 0; border-top: 1px solid var(--library-line); }
.library-footer-note .eyebrow { margin-bottom: 18px; }
.library-footer-note h2 { font-size: clamp(37px, 4vw, 58px); }
.library-footer-note > p { margin: 0; color: var(--library-muted); font: 400 15px/1.55 Georgia, serif; }
.footer-actions { display: grid; gap: 10px; }
.library-action { display: inline-flex; justify-content: space-between; align-items: center; gap: 20px; padding: 14px 16px; border: 1px solid var(--library-line); color: var(--library-cream); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
.library-action span { color: var(--library-aqua); font-size: 17px; }
.library-action.primary { border-color: rgba(215, 165, 71, .65); background: rgba(215, 165, 71, .12); }
.library-listen-link { display: inline-block; padding: 10px 13px; border: 1px solid rgba(121, 216, 208, .45); color: var(--library-aqua); font-size: 8px; font-weight: 800; letter-spacing: .14em; text-decoration: none; text-transform: uppercase; }

@media (min-width: 901px) {
  .catalog-section {
    display: grid;
    grid-template-columns: minmax(260px, .5fr) minmax(0, 1fr);
    column-gap: clamp(42px, 7vw, 100px);
    align-items: start;
  }

  .catalog-section .section-heading {
    position: sticky;
    top: calc(var(--atlas-site-header-height) + 32px);
    grid-column: 1;
    margin: 0;
    padding-bottom: 32px;
  }

  .catalog-section .music-grid,
  .catalog-section .program-grid,
  .catalog-section .catalog-tools,
  .catalog-section .story-controls,
  .catalog-section .island-filters,
  .catalog-section .story-grid { grid-column: 2; }

  .catalog-section .music-grid,
  .catalog-section .program-grid,
  .catalog-section .story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .catalog-section .music-grid { grid-row: 1 / span 2; }
  .program-section .program-grid { grid-row: 1 / span 2; }
  .story-section .section-heading { grid-row: 1 / span 2; }
  .story-section .story-controls { grid-row: 1; }
  .story-section .story-grid { grid-row: 2; margin-top: 8px; }
}

@media (max-width: 850px) {
  .library-hero { grid-template-columns: 1fr; min-height: auto; padding: 85px 7vw 62px; }
  .catalog-card { max-width: 390px; }
  .music-grid, .program-grid, .story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .library-footer-note { grid-template-columns: 1fr 1fr; }
  .library-footer-note > p { grid-column: 1 / -1; }
  .footer-actions { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .atlas-library-page main { width: min(100% - 28px, 1240px); }
  .library-hero, .catalog-section { padding-right: 4px; padding-left: 4px; }
  .library-hero h1 { font-size: clamp(49px, 15vw, 75px); }
  .music-grid, .program-grid, .story-grid { grid-template-columns: 1fr; }
  .music-card { grid-template-columns: 37px 58px 1fr; gap: 10px; }
  .card-art { width: 55px; height: 55px; }
  .library-footer-note { grid-template-columns: 1fr; margin: 85px 4px 45px; }
  .library-footer-note > p, .footer-actions { grid-column: auto; }
  .footer-actions { grid-template-columns: 1fr; }
  .story-dialog-art { display: none; }
  .story-dialog-copy { min-height: 0; margin: 0; padding: 34px 24px 25px; background: #081d20; }
  .story-dialog-text { max-height: 45dvh; }
}