/* ============================================================
   The Bob Dylan Fan Guide — design system
   Vintage broadside / newsprint Americana
   ============================================================ */

/* Dark is the default, declared on bare :root rather than applied by script —
   so the page paints dark immediately, with no flash of light while the
   stylesheet and data files load. Light is opt-in via the header toggle,
   which stamps data-theme="light" on the root element. */
:root {
  --paper:      #121009;
  --paper-2:    #1a1610;
  --paper-3:    #241f17;
  --card:       #1b1712;
  --ink:        #ede4d2;
  --ink-2:      #b8ab94;
  --ink-3:      #8a7d68;
  --rule:       #302a21;
  --rule-soft:  #262018;
  --accent:     #e07a45;
  --accent-2:   #dba949;
  --accent-dim: #e07a4520;
  --shadow:     0 1px 2px rgba(0,0,0,.45), 0 10px 30px rgba(0,0,0,.35);
  --shadow-sm:  0 1px 2px rgba(0,0,0,.5);
  --radius:     3px;
  --maxw:       1180px;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --paper:      #f5efe3;
  --paper-2:    #ece4d3;
  --paper-3:    #e2d8c3;
  --card:       #fffdf7;
  --ink:        #17140f;
  --ink-2:      #4c4438;
  --ink-3:      #7d7160;
  --rule:       #d7cbb3;
  --rule-soft:  #e6dcc7;
  --accent:     #a33a16;
  --accent-2:   #8a6d1f;
  --accent-dim: #a33a1618;
  --shadow:     0 1px 2px rgba(60,45,20,.07), 0 10px 30px rgba(60,45,20,.07);
  --shadow-sm:  0 1px 2px rgba(60,45,20,.08);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

/* The browser's own [hidden] rule is display:none, but any author rule that
   sets display — .chat-panel{display:flex}, say — silently beats it, and the
   element stays on screen while el.hidden reads true. Guard it globally so
   toggling .hidden always works. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Spectral', Georgia, 'Times New Roman', serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* faint paper grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(163,58,22,.035), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(138,109,31,.035), transparent 45%);
}

img { max-width: 100%; display: block; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink); }

h1, h2, h3, h4, h5 {
  font-family: 'Bodoni Moda', 'Bodoni 72', Didot, Georgia, serif;
  font-weight: 700;
  line-height: 1.12;
  margin: 0 0 .5em;
  letter-spacing: -.01em;
}

.kicker, .nav a, .btn, .chip, .tag, label, th, .meta-label, .stat-label {
  font-family: 'Oswald', 'Helvetica Neue', Arial, sans-serif;
}

/* ---------- layout ---------- */

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; position: relative; z-index: 1; }
.narrow { max-width: 820px; }

.section { padding: 54px 0; }
.section + .section { border-top: 1px solid var(--rule-soft); }

/* ---------- masthead / nav ---------- */

.masthead {
  border-bottom: 3px double var(--rule);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(8px);
}

.masthead-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 10px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  flex: 0 0 auto;
}
.brand-name {
  font-family: 'Bodoni Moda', Didot, Georgia, serif;
  font-weight: 900;
  font-size: 1.35rem;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.brand-sub {
  font-family: 'Oswald', sans-serif;
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

.nav {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  margin-left: auto;
  align-items: center;
}
.nav a {
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  padding: 6px 9px;
  border-radius: var(--radius);
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.nav a:hover { background: var(--paper-2); color: var(--ink); }
.nav a.active { color: var(--accent); background: var(--accent-dim); }

.nav-tools { display: flex; gap: 6px; align-items: center; margin-left: 8px; }

.icon-btn {
  appearance: none;
  border: 1px solid var(--rule);
  background: var(--card);
  color: var(--ink-2);
  width: 34px; height: 34px;
  border-radius: var(--radius);
  cursor: pointer;
  display: grid; place-items: center;
  font-size: .95rem;
  transition: border-color .15s, color .15s;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }

.nav-toggle { display: none; }

/* ---------- hero ---------- */

.hero {
  padding: 0 0 46px;
  border-bottom: 3px double var(--rule);
  position: relative;
}

/* banner and copy share one grid cell on desktop, stack on mobile */
.hero-stage { display: grid; }
.hero-stage > * { grid-column: 1; grid-row: 1; }

.hero-banner {
  position: relative;
  width: 100%;
  /* Height scales with width so the crop stays constant at every screen size.
     A fixed px cap here is what made wide monitors show a thin sliver: the box
     kept widening while the height stopped, so the wider the display the more
     of the image was cut. The vh term only takes over on short screens.
     Height is set directly rather than via aspect-ratio — aspect-ratio plus a
     max-height lets a short wide viewport shrink the *width* to satisfy the
     ratio, leaving the banner short of the right edge. */
  height: min(40vw, 86vh);
  min-height: 320px;
  overflow: hidden;
  background: #17474c;
}
.hero-banner img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 85% center;
  display: block;
}
/* scrim from the artwork's own teal, so type stays readable over the sky */
.hero-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(11, 40, 44, .84) 0%,
    rgba(11, 40, 44, .62) 30%,
    rgba(11, 40, 44, .14) 56%,
    rgba(11, 40, 44, 0) 74%);
}

.hero-copy { display: flex; align-items: center; z-index: 2; pointer-events: none; }
.hero-copy .wrap { pointer-events: auto; width: 100%; text-align: left; }

.hero .kicker {
  font-size: .7rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: #e8a85f;
  margin: 0 0 16px;
}
.hero h1 {
  font-size: clamp(2.6rem, 7.4vw, 5.6rem);
  margin: 0;
  letter-spacing: -.035em;
  line-height: .92;
  color: #f7eeda;
  text-shadow: 0 2px 34px rgba(0, 0, 0, .5);
}
.hero .lede {
  font-size: clamp(1rem, 1.7vw, 1.18rem);
  color: #e4d9c3;
  max-width: 470px;
  margin: 0;
  font-style: italic;
  text-shadow: 0 1px 18px rgba(0, 0, 0, .55);
}
.hero-rule {
  width: 90px; height: 2px;
  background: #d98d3a;
  margin: 22px 0;
}

.hero-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 42px;
}
.hero-stats .stat { padding: 0 26px; border-left: 1px solid var(--rule); }
.hero-stats .stat:first-child { border-left: 0; }
.stat-num {
  font-family: 'Bodoni Moda', Didot, serif;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
  display: block;
}
.stat-label {
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 6px;
  display: block;
}

/* ---------- page header ---------- */

/* Inner pages carry a slimmer banner than the home hero, same overlay idea:
   image and copy share one grid cell, stacking below 760px. */
.page-stage {
  display: grid;
  border-bottom: 3px double var(--rule);
  margin-bottom: 34px;
}
.page-stage > * { grid-column: 1; grid-row: 1; }

.page-banner {
  position: relative;
  width: 100%;
  /* Same reasoning as .hero-banner: proportional height, no px cap, so the
     band looks identical on a 13" laptop and a 32" monitor. */
  height: min(23vw, 45vh);
  min-height: 210px;
  overflow: hidden;
  background: #1d3b40;
}
.page-banner img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  display: block;
}
.page-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(10, 30, 34, .88) 0%,
    rgba(10, 30, 34, .66) 34%,
    rgba(10, 30, 34, .22) 62%,
    rgba(10, 30, 34, .05) 82%);
}

.page-copy { display: flex; align-items: center; z-index: 2; pointer-events: none; }
.page-copy .wrap { pointer-events: auto; width: 100%; }

.page-head {
  padding: 0;
  margin: 0;
}
.page-stage .page-head .kicker { color: #e8a85f; }
.page-stage .page-head h1 { color: #f7eeda; text-shadow: 0 2px 26px rgba(0, 0, 0, .5); }
.page-stage .page-head .lede { color: #e4d9c3; text-shadow: 0 1px 14px rgba(0, 0, 0, .55); max-width: 560px; }

@media (max-width: 760px) {
  .page-stage { grid-template-rows: auto auto; }
  .page-stage > .page-banner { grid-row: 1; }
  .page-stage > .page-copy { grid-row: 2; }
  .page-banner { height: clamp(150px, 38vw, 230px); max-height: none; }
  .page-banner::after {
    background: linear-gradient(180deg, rgba(10,30,34,0) 60%, rgba(10,30,34,.3) 100%);
  }
  .page-copy { padding: 26px 0 4px; }
  .page-stage .page-head .kicker { color: var(--accent); }
  .page-stage .page-head h1 { color: var(--ink); text-shadow: none; }
  .page-stage .page-head .lede { color: var(--ink-2); text-shadow: none; max-width: none; }
}
.page-head .kicker {
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.page-head h1 {
  font-size: clamp(2.1rem, 6vw, 3.6rem);
  margin: 0;
  letter-spacing: -.03em;
}
.page-head .lede {
  color: var(--ink-2);
  max-width: 700px;
  margin: 14px 0 0;
  font-size: 1.05rem;
}

/* ---------- section headings ---------- */

.sec-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 22px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
.sec-head h2 { margin: 0; font-size: 1.6rem; }
.sec-head .count {
  font-family: 'Oswald', sans-serif;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-left: auto;
}

/* ---------- cards & grids ---------- */

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }

.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.card.link-card { cursor: pointer; }
.card.link-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  border-color: var(--accent);
}
.card h3 { font-size: 1.16rem; margin: 0 0 6px; }
.card p { margin: 0; color: var(--ink-2); font-size: .93rem; }

.card-index a { text-decoration: none; color: inherit; display: block; }
.card-index .card-arrow {
  font-family: 'Oswald', sans-serif;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 14px;
  display: block;
}

/* ---------- album cards ---------- */

.album {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
}
.album::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  opacity: 0;
  transition: opacity .18s;
}
.album:hover::before { opacity: 1; }
.album-year {
  font-family: 'Oswald', sans-serif;
  font-size: .72rem;
  letter-spacing: .16em;
  color: var(--accent);
}
.album-title { font-size: 1.18rem; margin: 0; line-height: 1.2; }
.album-meta {
  font-family: 'Oswald', sans-serif;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.album-note { font-size: .9rem; color: var(--ink-2); margin: 4px 0 0; }
.album-tracks {
  font-size: .84rem;
  color: var(--ink-3);
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dotted var(--rule);
  font-style: italic;
}
.album-rank {
  position: absolute;
  top: 14px; right: 16px;
  font-family: 'Bodoni Moda', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--rule);
  line-height: 1;
}

/* ---------- album detail modal ---------- */

.album.clickable { cursor: pointer; }
.album.clickable:hover { border-color: var(--accent); box-shadow: var(--shadow); }

.album-more {
  font-family: 'Oswald', sans-serif;
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: none;
  border: 0;
  border-top: 1px dotted var(--rule);
  color: var(--accent);
  padding: 10px 0 0;
  margin-top: auto;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.album-more:hover { color: var(--ink); }
.album-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 6, 4, .74);
  backdrop-filter: blur(3px);
  z-index: 300;
  padding: 5vh 20px 40px;
  overflow-y: auto;
}
.modal {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
  padding: 34px 38px 32px;
}
.modal-close {
  position: absolute;
  top: 12px; right: 14px;
  width: 34px; height: 34px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  color: var(--ink-2);
  border-radius: 50%;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.modal-close:hover { border-color: var(--accent); color: var(--accent); }

.modal .m-kicker {
  font-family: 'Oswald', sans-serif;
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 8px;
}
.modal h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); margin: 0 0 10px; letter-spacing: -.02em; }
.modal .m-meta {
  font-family: 'Oswald', sans-serif;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.modal .m-note { color: var(--ink-2); font-size: .97rem; margin: 0 0 18px; }

.m-sec {
  font-family: 'Oswald', sans-serif;
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 24px 0 10px;
}

.tracklist { list-style: none; margin: 0; padding: 0; }
.tracklist li {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 14px;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px dotted var(--rule);
  font-size: .93rem;
}
.tracklist li:last-child { border-bottom: 0; }
.tracklist .n,
.tracklist .d {
  font-family: 'Oswald', sans-serif;
  font-size: .76rem;
  color: var(--ink-3);
}
.m-foot {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: .8rem;
  color: var(--ink-3);
}
.m-foot a { color: var(--ink-3); }
.m-foot a:hover { color: var(--accent); }

@media (max-width: 620px) {
  .modal { padding: 30px 20px 24px; }
  .tracklist li { grid-template-columns: 26px 1fr auto; gap: 10px; font-size: .88rem; }
}

/* ---------- filter bar ---------- */

.toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 24px;
  padding: 14px 16px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  position: sticky;
  top: 56px;
  z-index: 20;
}

.search-input {
  flex: 1 1 220px;
  min-width: 180px;
  font-family: 'Spectral', Georgia, serif;
  font-size: .95rem;
  padding: 8px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
}
.search-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--rule);
  background: var(--card);
  color: var(--ink-2);
  border-radius: 100px;
  cursor: pointer;
  transition: all .15s;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
:root:not([data-theme="light"]) .chip.on { color: #1a1610; }

.result-count {
  font-family: 'Oswald', sans-serif;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-left: auto;
}

.empty {
  padding: 50px 0;
  text-align: center;
  color: var(--ink-3);
  font-style: italic;
}

/* ---------- timeline ---------- */

.timeline { position: relative; padding-left: 0; }
.tl-era {
  font-family: 'Oswald', sans-serif;
  font-size: .68rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 38px 0 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
}
.tl-item {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px dotted var(--rule);
  align-items: start;
}
.tl-date {
  font-family: 'Oswald', sans-serif;
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--ink-3);
  padding-top: 3px;
  white-space: nowrap;
}
.tl-body strong { display: block; font-size: 1rem; }
.tl-body p { margin: 3px 0 0; color: var(--ink-2); font-size: .93rem; }

/* ---------- quote blocks ---------- */

.quote-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
  break-inside: avoid;
  margin-bottom: 18px;
}
.quote-card blockquote {
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.55;
  font-style: italic;
}
.quote-card cite {
  display: block;
  margin-top: 12px;
  font-family: 'Oswald', sans-serif;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-style: normal;
}
.quote-masonry { columns: 2; column-gap: 18px; }

.pull {
  font-family: 'Bodoni Moda', Didot, serif;
  font-size: clamp(1.3rem, 3.2vw, 2rem);
  line-height: 1.3;
  font-style: italic;
  text-align: center;
  max-width: 760px;
  margin: 44px auto;
  color: var(--ink);
}
.pull span {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: .68rem;
  font-style: normal;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 16px;
}

/* ---------- era / prose ---------- */

.era { margin-bottom: 54px; scroll-margin-top: 80px; }
.era-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  border-bottom: 3px double var(--rule);
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.era-years {
  font-family: 'Oswald', sans-serif;
  font-size: .72rem;
  letter-spacing: .18em;
  color: #fff;
  background: var(--accent);
  padding: 4px 11px;
  border-radius: 100px;
  white-space: nowrap;
}
:root:not([data-theme="light"]) .era-years { color: #1a1610; }
.era-head h2 { margin: 0; font-size: clamp(1.5rem, 3.6vw, 2.2rem); }
.era-tag {
  font-family: 'Oswald', sans-serif;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-left: auto;
}
.prose p { margin: 0 0 1.05em; }
.prose p:last-child { margin-bottom: 0; }
.prose h4 {
  font-family: 'Oswald', sans-serif;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 26px 0 10px;
}

.era-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 22px 0;
  padding: 18px 20px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.era-fact .meta-label {
  display: block;
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 3px;
}
.era-fact div:last-child { font-size: .93rem; }

/* ---------- tables ---------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-size: .92rem; background: var(--card); }
th {
  text-align: left;
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 400;
  padding: 11px 14px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
  white-space: nowrap;
}
td { padding: 10px 14px; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--accent-dim); }
td.num { font-family: 'Oswald', sans-serif; color: var(--ink-3); white-space: nowrap; font-size: .82rem; }

/* ---------- list items (stories, interviews, books) ---------- */

.entry {
  padding: 22px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.entry:first-child { padding-top: 0; }
.entry h3 { font-size: 1.24rem; margin: 0 0 4px; }
.entry-meta {
  font-family: 'Oswald', sans-serif;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.entry-meta .dot { color: var(--rule); }
.entry p { margin: 0 0 .8em; color: var(--ink-2); font-size: .96rem; }
.entry p:last-child { margin-bottom: 0; }
.entry blockquote {
  margin: 12px 0;
  padding: 2px 0 2px 18px;
  border-left: 2px solid var(--accent);
  font-style: italic;
  color: var(--ink);
  font-size: .98rem;
}

.tag {
  display: inline-block;
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border: 1px solid var(--rule);
  border-radius: 100px;
  color: var(--ink-3);
  margin: 0 5px 5px 0;
}
.tag.hot { border-color: var(--accent); color: var(--accent); }

/* ---------- style / looks ---------- */

.look {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--accent);
}
.look h3 { margin: 0 0 2px; font-size: 1.2rem; }
.look .years {
  font-family: 'Oswald', sans-serif;
  font-size: .68rem;
  letter-spacing: .14em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-bottom: 12px;
}
/* column layout so cards can vary in height with their photographs */
.look-masonry { columns: 2; column-gap: 18px; }
.look-masonry .look { break-inside: avoid; margin-bottom: 18px; }

.look-photo { margin: 0 0 14px; }
.look-photo a { display: block; }
.look-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  background: var(--paper-2);
}
.look-photo figcaption {
  font-size: .82rem;
  line-height: 1.45;
  color: var(--ink-3);
  margin-top: 8px;
}
.look-photo .credit {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: 5px;
}
.look-photo .credit a { color: var(--ink-3); }
.look-photo .credit a:hover { color: var(--accent); }

.look-nopic {
  font-size: .82rem;
  font-style: italic;
  color: var(--ink-3);
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
}

.look ul { margin: 12px 0 0; padding-left: 18px; }
.look li { margin-bottom: 6px; font-size: .92rem; color: var(--ink-2); }
.look li strong { color: var(--ink); }

/* ---------- footer ---------- */

.footer {
  margin-top: 70px;
  border-top: 3px double var(--rule);
  padding: 40px 0 60px;
  background: var(--paper-2);
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 30px;
  margin-bottom: 32px;
}
.footer h4 {
  font-family: 'Oswald', sans-serif;
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 10px;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 5px; }
.footer a { font-size: .9rem; text-decoration: none; color: var(--ink-2); }
.footer a:hover { color: var(--accent); text-decoration: underline; }
.colophon {
  border-top: 1px solid var(--rule);
  padding-top: 22px;
  font-size: .82rem;
  color: var(--ink-3);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

/* ---------- chat widget ---------- */

.chat-launcher {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 17px;
  border: 1px solid var(--accent);
  border-radius: 100px;
  background: var(--accent);
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .3);
  transition: transform .18s, box-shadow .18s;
}
:root[data-theme="light"] .chat-launcher { color: #fff; }
.chat-launcher:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 0, 0, .36); }
.chat-launcher-icon { display: grid; place-items: center; }
.chat-launcher-icon svg { width: 17px; height: 17px; }
.chat-launcher.is-open .chat-launcher-label { display: none; }
.chat-launcher.is-open { padding: 12px; }

.chat-panel {
  position: fixed;
  right: 22px; bottom: 82px;
  z-index: 120;
  width: min(390px, calc(100vw - 44px));
  max-height: min(600px, calc(100vh - 130px));
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .42);
  overflow: hidden;
}

.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
.chat-head strong { font-family: 'Bodoni Moda', Georgia, serif; font-size: 1rem; display: block; }
.chat-sub {
  font-family: 'Oswald', sans-serif;
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.chat-close {
  border: 0; background: none; color: var(--ink-3);
  font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 2px;
}
.chat-close:hover { color: var(--accent); }

.chat-log {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-msg { display: flex; }
.chat-user { justify-content: flex-end; }
.chat-bubble {
  max-width: 86%;
  padding: 9px 13px;
  border-radius: 12px;
  font-size: .92rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.chat-assistant .chat-bubble {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-bottom-left-radius: 3px;
  color: var(--ink);
}
.chat-user .chat-bubble {
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 3px;
}
.chat-bubble.is-error { color: var(--accent); font-style: italic; }

.chat-dots { display: inline-flex; gap: 4px; padding: 3px 0; }
.chat-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-3);
  animation: chat-blink 1.3s infinite ease-in-out;
}
.chat-dots i:nth-child(2) { animation-delay: .18s; }
.chat-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes chat-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

.chat-form {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--rule);
}
.chat-input {
  flex: 1;
  font-family: 'Spectral', Georgia, serif;
  font-size: .92rem;
  padding: 9px 12px;
  border: 1px solid var(--rule);
  border-radius: 100px;
  background: var(--paper);
  color: var(--ink);
}
.chat-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.chat-input:disabled { opacity: .6; }
.chat-send {
  width: 38px; height: 38px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
}
.chat-send:disabled { opacity: .5; cursor: default; }

.chat-foot {
  margin: 0;
  padding: 0 14px 12px;
  font-size: .72rem;
  color: var(--ink-3);
  line-height: 1.45;
}

@media (max-width: 620px) {
  .chat-launcher-label { display: none; }
  .chat-launcher { padding: 12px; }
  .chat-panel {
    right: 12px; left: 12px; bottom: 76px;
    width: auto;
    max-height: calc(100vh - 120px);
  }
}

@media print { .chat-root { display: none; } }

/* ---------- back to top ---------- */

.to-top {
  position: fixed;
  right: 22px; bottom: 22px;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--card);
  color: var(--ink-2);
  cursor: pointer;
  display: grid; place-items: center;
  box-shadow: var(--shadow);
  opacity: 0; pointer-events: none;
  transition: opacity .2s;
  z-index: 40;
}
.to-top.show { opacity: 1; pointer-events: auto; }
.to-top:hover { color: var(--accent); border-color: var(--accent); }

/* only lift it when the chat launcher is actually on the page */
body.has-chat .to-top { bottom: 78px; }

/* ---------- misc ---------- */

.jump {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule-soft);
}
.jump a {
  font-family: 'Oswald', sans-serif;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  border: 1px solid var(--rule);
  padding: 5px 11px;
  border-radius: 100px;
  transition: all .15s;
}
.jump a:hover { border-color: var(--accent); color: var(--accent); }

.notice {
  padding: 14px 18px;
  background: var(--accent-dim);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  font-size: .92rem;
  margin: 0 0 26px;
  color: var(--ink-2);
}

noscript .notice { display: block; }

/* ---------- listen buttons ---------- */

.listen { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }

.lbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Oswald', sans-serif;
  font-size: .68rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 5px 11px;
  border-radius: 100px;
  border: 1px solid var(--rule);
  background: var(--card);
  color: var(--ink-2);
  line-height: 1;
  white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
}
.lbtn svg { width: 13px; height: 13px; flex: 0 0 auto; }
.lbtn i { font-style: normal; opacity: .55; font-size: .8rem; margin-left: -1px; }

.lbtn.sp svg { fill: #1db954; stroke: var(--card); }
.lbtn.yt svg { fill: #ff0033; }

.lbtn.sp:hover { border-color: #1db954; color: #178a41; background: #1db9540f; }
.lbtn.yt:hover { border-color: #ff0033; color: #c4002a; background: #ff00330f; }
:root:not([data-theme="light"]) .lbtn.sp:hover { color: #4ade80; }
:root:not([data-theme="light"]) .lbtn.yt:hover { color: #ff6b8a; }

/* a verified direct link, rather than a search */
.lbtn.exact { border-color: #1db95466; color: var(--ink); }
.lbtn.exact:hover { background: #1db95418; }

.album .listen { margin-top: 12px; }

/* icon-only, for dense tables */
.listen.compact { flex-wrap: nowrap; gap: 5px; margin-top: 7px; }
.listen.compact .lbtn { padding: 4px 6px; }
.listen.compact .lbtn svg { width: 14px; height: 14px; }

/* ---------- nav dropdown ---------- */

.dropdown { position: relative; }
.drop-btn {
  font-family: 'Oswald', sans-serif;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: none;
  border: 0;
  padding: 6px 9px;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
}
.drop-btn:hover { background: var(--paper-2); color: var(--ink); }
.drop-btn.active { color: var(--accent); background: var(--accent-dim); }
.drop-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 172px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 6px;
  flex-direction: column;
  z-index: 60;
}
.drop-menu.open { display: flex; }
.drop-menu a { display: block; padding: 7px 10px; }

/* ---------- global search overlay ---------- */

.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 16, 10, .55);
  backdrop-filter: blur(3px);
  z-index: 200;
  padding: 8vh 20px 20px;
  overflow-y: auto;
}
.search-panel {
  max-width: 680px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  overflow: hidden;
}
.search-box {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: var(--card);
  color: var(--ink);
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 1.3rem;
  padding: 20px 24px;
}
.search-box:focus { outline: none; border-bottom-color: var(--accent); }
.search-results { max-height: 60vh; overflow-y: auto; }
.search-hint { padding: 26px 24px; color: var(--ink-3); font-size: .9rem; margin: 0; font-style: italic; }
.search-hint kbd {
  font-family: 'Oswald', sans-serif;
  font-size: .7rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1px 5px;
  font-style: normal;
}
.search-hit {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 4px 14px;
  padding: 11px 24px;
  border-bottom: 1px solid var(--rule-soft);
  text-decoration: none;
  color: var(--ink);
}
.search-hit:hover { background: var(--accent-dim); }
.hit-label {
  grid-row: span 2;
  font-family: 'Oswald', sans-serif;
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 4px;
}
.hit-title { font-size: .98rem; line-height: 1.35; }
.hit-sub { font-family: 'Oswald', sans-serif; font-size: .68rem; letter-spacing: .06em; color: var(--ink-3); }

/* ---------- responsive ---------- */

@media (max-width: 940px) {
  .quote-masonry { columns: 1; }
  .look-masonry { columns: 1; }
  .nav-toggle { display: grid; }
  .nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--paper);
    border-bottom: 3px double var(--rule);
    flex-direction: column;
    align-items: stretch;
    padding: 10px 18px 16px;
    gap: 0;
    box-shadow: var(--shadow);
  }
  .nav.open { display: flex; }
  .nav a { padding: 10px 6px; border-bottom: 1px solid var(--rule-soft); }
  .masthead-inner { position: relative; }
  .nav-tools { margin-left: auto; }
}

/* below this width the banner is too short to hold type — stack instead of overlay */
@media (max-width: 760px) {
  .hero-stage { grid-template-rows: auto auto; }
  .hero-stage > .hero-banner { grid-row: 1; }
  .hero-stage > .hero-copy { grid-row: 2; }
  .hero-banner { height: clamp(280px, 62vw, 420px); max-height: none; }
  .hero-banner img { object-position: 76% center; }
  .hero-banner::after {
    background: linear-gradient(180deg, rgba(11,40,44,0) 62%, rgba(11,40,44,.3) 100%);
  }
  .hero-copy { padding-top: 30px; }
  .hero-copy .wrap { text-align: center; }
  .hero .kicker { color: var(--accent); }
  .hero h1 { color: var(--ink); text-shadow: none; }
  .hero .lede { color: var(--ink-2); text-shadow: none; max-width: none; margin: 0 auto; }
  .hero-rule { margin: 20px auto; background: var(--accent); }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .tl-item { grid-template-columns: 1fr; gap: 4px; }
  .hero-stats .stat { padding: 10px 18px; border-left: 0; }
  .toolbar { position: static; }
  .brand-sub { display: none; }
  .era-head { gap: 10px; }
  .era-tag { margin-left: 0; width: 100%; }
}

@media print {
  .masthead, .footer, .toolbar, .to-top, .jump { display: none; }
  body { background: #fff; color: #000; }
}