/* ============================================================
   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); }

/* On a phone this is the only way around the site, so it is not another
   anonymous icon square next to search and theme — it carries a word, it is
   tinted with the accent, and it inverts while the panel is open. */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 13px;
  border: 1px solid var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: 'Oswald', sans-serif;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.nav-toggle-icon { font-size: .9rem; line-height: 1; }
.nav-toggle[aria-expanded="true"] { background: var(--accent); color: #fff; }
:root:not([data-theme="light"]) .nav-toggle[aria-expanded="true"] { color: #17140f; }

/* section heading inside the flattened mobile menu; the desktop dropdown is
   its own affordance and does not need it */
.nav-group-label {
  display: none;
  font-family: 'Oswald', sans-serif;
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 18px 18px 7px;
  border-top: 1px solid var(--rule);
  margin-top: 8px;
}

/* ---------- 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. */
  /* 28.02vw is exactly 1/3.5688 — the artwork's own ratio — so the whole
     image shows with no crop at any width. Change this number and it starts
     cropping again. The vh term only bites on very short windows. */
  height: min(28.02vw, 72vh);
  /* Floor is set by the overlaid title block, which runs to ~256px: any
     shorter and the kicker, heading and lede spill out of the image. */
  min-height: 270px;
  overflow: hidden;
  background: #17474c;
}
.hero-banner img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Nothing to choose: the box matches the artwork's ratio, so this only
     applies on the short-window and min-height edges. */
  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. The artwork is
     2.36:1 — taller than the 3:1 it replaced — so the old 18.5vw band showed
     noticeably less of it and cut the guitar case. 21vw restores roughly half
     the artwork; object-position below decides which half. */
  height: min(21vw, 38vh);
  /* Floor is set by the overlaid title, not by taste: the kicker, heading and
     lede run to ~200px, and a shorter band would let them spill out of the
     image. Below roughly 1140px the 20% trim therefore tapers off. */
  min-height: 210px;
  overflow: hidden;
  background: #1d3b40;
}
.page-banner img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Tuned to the artwork: the sun sits around 42–48% of its height and the
     guitar case bottoms out near 88%. This percentage is not "centre the band
     there" — it distributes the cropped overflow, so 80% puts 80% of the loss
     above and lands the band on roughly 40–90%: sun, figure and case all in,
     with the empty sky taking the cut. Horizontal is moot; the image is wider
     than the band, so cover crops vertically only. */
  object-position: 50% 80%;
  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 {
  /* starting point only — timeline.html measures the sticky toolbar (its chips
     wrap, so its height moves with the viewport) and overrides this inline */
  scroll-margin-top: 132px;
  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 ---------- */

/* ---------- biography: era rail + per-era milestones ---------- */

.rail-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 46px;
  align-items: start;
}

.side-rail { position: sticky; top: 74px; }
.side-rail h2 {
  font-family: 'Oswald', sans-serif;
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 14px;
}
.side-rail ol { list-style: none; margin: 0; padding: 0; position: relative; }
/* the spine */
.side-rail ol::before {
  content: "";
  position: absolute;
  left: 5px; top: 8px; bottom: 8px;
  width: 1px;
  background: var(--rule);
}
.side-rail li { position: relative; padding-left: 24px; margin-bottom: 15px; }
.side-rail li::before {
  content: "";
  position: absolute;
  left: 0; top: 4px;
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--paper);
  transition: background .18s, border-color .18s;
}
.side-rail a {
  display: block;
  text-decoration: none;
  font-family: 'Oswald', sans-serif;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
  line-height: 1.3;
}
.side-rail .yr {
  display: block;
  font-size: .58rem;
  letter-spacing: .1em;
  color: var(--ink-3);
  margin-top: 2px;
}
.side-rail a:hover { color: var(--accent); }
.side-rail li.on::before { background: var(--accent); border-color: var(--accent); }
.side-rail li.on a { color: var(--accent); }

.era-timeline { margin: 24px 0 26px; }
.era-timeline > h4 { margin-bottom: 12px; }
.era-timeline ol {
  list-style: none;
  margin: 0;
  padding: 0 0 0 22px;
  border-left: 2px solid var(--rule);
}
.era-tl {
  position: relative;
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 7px 0;
}
.era-tl::before {
  content: "";
  position: absolute;
  left: -27px; top: 14px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.era-tl .d {
  font-family: 'Oswald', sans-serif;
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--ink-3);
  white-space: nowrap;
}
.era-tl .t { font-size: .93rem; color: var(--ink); }

@media (max-width: 1000px) {
  .rail-layout { grid-template-columns: 1fr; gap: 0; }
  .side-rail { display: none; }
  .era-tl { grid-template-columns: 1fr; gap: 2px; }
  .era-tl .d { font-size: .66rem; }
}

.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; }
  /* thumb-sized: 34px is fine for a mouse, short for a finger */
  .nav-toggle { display: inline-flex; height: 40px; padding: 0 15px; }
  .nav-tools .icon-btn { width: 40px; height: 40px; }
  .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;
    /* .nav is flex-wrap:wrap for the desktop bar. Left on in a column with a
       max-height, flexbox wraps the overflow into a SECOND COLUMN on top of
       the first instead of scrolling — so it has to be turned off here. */
    flex-wrap: nowrap;
    padding: 6px 0 12px;
    gap: 0;
    box-shadow: var(--shadow);
    max-height: calc(100vh - 56px);
    overflow-y: auto;
  }
  .nav.open { display: flex; }
  .nav a {
    padding: 13px 18px;
    border-bottom: 1px solid var(--rule-soft);
    font-size: .82rem;
    letter-spacing: .1em;
  }
  /* where you are, stated plainly rather than as a faint tint */
  .nav a.active {
    background: var(--accent-dim);
    border-left: 3px solid var(--accent);
    padding-left: 15px;
  }
  /* Flatten the More dropdown. Vertical space is free in a panel you scroll,
     so hiding half the site behind a second tap buys nothing. */
  .nav .dropdown { display: contents; }
  .nav .drop-btn { display: none; }
  .nav .drop-menu {
    display: block;
    position: static;
    min-width: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    z-index: auto;
  }
  .nav .drop-menu a { padding: 13px 18px; border-bottom: 1px solid var(--rule-soft); }
  .nav-group-label { display: block; }
  .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; }
  /* The narrow band can only show about a third of a 3.57:1 image, so aim it
     at the figure rather than splitting the difference and clipping him. */
  .hero-banner img { object-position: 92% 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; }
}

/* ---------- monthly quiz ---------- */

.quiz-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 46px;
  align-items: start;
  margin-top: 34px;
}

.quiz-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 30px 32px 34px;
}

.quiz-intro h2 { font-size: 1.75rem; margin: 4px 0 12px; }
.quiz-intro p { color: var(--ink-2); margin: 0 0 14px; }

.quiz-warn,
.quiz-best {
  border-left: 2px solid var(--accent);
  padding-left: 14px;
  font-size: .93rem;
}
.quiz-best strong { color: var(--accent); }

.quiz-fine {
  margin: 18px 0 0 !important;
  font-size: .82rem;
  color: var(--ink-3);
  font-style: italic;
}

/* buttons — the site had no general button style, only .icon-btn and the
   Spotify/YouTube .lbtn pair, so the quiz brings its own */
.qbtn {
  font-family: 'Oswald', sans-serif;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 13px 26px;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  transition: filter .15s, background .15s, color .15s;
}
:root:not([data-theme="light"]) .qbtn { color: #17140f; }
.qbtn:hover { filter: brightness(1.08); }
.qbtn:disabled { opacity: .5; cursor: default; filter: none; }

.qbtn-go { display: block; width: 100%; margin-top: 20px; }

.qbtn-ghost {
  background: transparent;
  color: var(--ink-2);
  border-color: var(--rule);
  display: block;
  width: 100%;
  margin-top: 12px;
}
:root:not([data-theme="light"]) .qbtn-ghost { color: var(--ink-2); }
.qbtn-ghost:hover { border-color: var(--accent); color: var(--accent); filter: none; }

/* progress + clock */
.qbar {
  height: 2px;
  background: var(--rule);
  margin: -30px -32px 22px;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
}
.qbar i { display: block; height: 100%; background: var(--accent); transition: width .3s ease; }

.qhead {
  display: flex;
  justify-content: space-between;
  font-family: 'Oswald', sans-serif;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}

.qtext { font-size: 1.42rem; line-height: 1.28; margin: 0 0 22px; }

.qopts { display: grid; gap: 9px; }

.qopt {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  width: 100%;
  text-align: left;
  padding: 14px 17px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-2);
  color: var(--ink);
  font-family: 'Spectral', Georgia, serif;
  font-size: 1rem;
  line-height: 1.45;
  cursor: pointer;
  transition: border-color .15s, background .15s, opacity .2s;
}
.qopt:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-dim); }
.qopt:disabled { cursor: default; }

.qopt-mark {
  flex: 0 0 auto;
  width: 13px; height: 13px;
  margin-top: 6px;
  border: 1px solid var(--ink-3);
  border-radius: 50%;
}
.qopt.right { border-color: var(--accent); background: var(--accent-dim); }
.qopt.right .qopt-mark { background: var(--accent); border-color: var(--accent); }
/* Still legible — you want to see what you picked — but stepped back so the
   correct answer is the brightest thing on the card, not your mistake. */
.qopt.wrong { border-color: var(--ink-3); opacity: .72; }
.qopt.wrong .qopt-mark { background: var(--ink-3); border-color: var(--ink-3); }
.qopt.wrong .qopt-text { text-decoration: line-through; text-decoration-thickness: 1px; }
.qopt.dim { opacity: .42; }

.qnote {
  margin-top: 20px;
  padding: 16px 18px;
  background: var(--paper-2);
  border-left: 2px solid var(--ink-3);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .95rem;
  color: var(--ink-2);
}
.qnote.ok { border-left-color: var(--accent); }
.qnote strong { color: var(--ink); }

/* result */
.quiz-result { text-align: center; }
.quiz-result .kicker { color: var(--ink-3); }

.score-big {
  font-family: 'Bodoni Moda', Didot, Georgia, serif;
  font-size: 5rem;
  line-height: 1;
  font-weight: 900;
  color: var(--accent);
  margin: 10px 0 6px;
}
.score-big span { font-size: 2rem; color: var(--ink-3); font-weight: 500; }

.score-verdict { color: var(--ink-2); margin: 0 0 26px; font-style: italic; }
.score-verdict span {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-style: normal;
  font-size: .7rem;
  letter-spacing: .16em;
  color: var(--ink-3);
  margin-top: 6px;
}

.submit-row {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 22px 0;
  margin: 0;
  text-align: left;
}
.submit-row label {
  display: block;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.submit-line { display: flex; gap: 9px; }
.submit-line .search-input { flex: 1; min-width: 0; }
.submit-line .qbtn { flex: 0 0 auto; }

.submit-msg { margin: 10px 0 0; font-size: .88rem; color: var(--ink-3); min-height: 1.2em; }
.submit-msg.good { color: var(--accent); }
.submit-msg.bad { color: var(--ink-2); }

.rv-head {
  text-align: left;
  font-size: .68rem;
  font-family: 'Oswald', sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 34px 0 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
}

.review { list-style: none; margin: 0; padding: 0; text-align: left; }
.review li {
  display: flex;
  gap: 13px;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.review li:last-child { border-bottom: 0; }
.rv-mark { flex: 0 0 16px; font-size: .9rem; line-height: 1.6; color: var(--ink-3); }
.review li.ok .rv-mark { color: var(--accent); }
.rv-q { margin: 0 0 3px; font-size: .95rem; color: var(--ink-2); }
.rv-a { margin: 0; font-size: .95rem; color: var(--ink); }
.rv-yours { color: var(--ink-3); font-style: italic; }

/* board */
.quiz-side { position: sticky; top: 74px; }

.board-list { list-style: none; margin: 0; padding: 0; }
.board-list li {
  display: grid;
  grid-template-columns: 22px 1fr auto auto;
  gap: 10px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.board-list li:last-child { border-bottom: 0; }
.bd-rank { font-family: 'Oswald', sans-serif; font-size: .7rem; color: var(--ink-3); }
.bd-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; }
.bd-time { font-family: 'Oswald', sans-serif; font-size: .68rem; color: var(--ink-3); }
.bd-score {
  font-family: 'Oswald', sans-serif;
  font-size: .8rem;
  color: var(--ink);
  min-width: 18px;
  text-align: right;
}
.board-list li.you { background: var(--accent-dim); margin: 0 -10px; padding: 8px 10px; }
.board-list li.you .bd-name,
.board-list li.you .bd-score { color: var(--accent); }

.board-foot {
  font-size: .78rem;
  color: var(--ink-3);
  font-style: italic;
  margin-top: 14px;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .quiz-layout { grid-template-columns: 1fr; gap: 42px; }
  .quiz-side { position: static; }
}

@media (max-width: 620px) {
  .quiz-card { padding: 24px 20px 26px; }
  .qbar { margin: -24px -20px 20px; }
  .qtext { font-size: 1.22rem; }
  .score-big { font-size: 4rem; }
  .submit-line { flex-wrap: wrap; }
  .submit-line .qbtn { width: 100%; }
}

/* ---------- page-to-page navigation: pager + swipe ---------- */

.pager {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 22px 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.pager a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.pager a:hover { border-color: var(--accent); background: var(--accent-dim); }
.pager-next { text-align: right; align-items: flex-end; }

.pager-dir {
  font-family: 'Oswald', sans-serif;
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pager-name {
  font-family: 'Bodoni Moda', Didot, Georgia, serif;
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
}
.pager a:hover .pager-name { color: var(--accent); }

/* keeps the remaining link on its own side at the ends of the sequence */
.pager-end { display: block; }

.pager-hint {
  display: none;          /* pointer devices have nothing to swipe */
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 22px 4px;
  font-size: .76rem;
  font-style: italic;
  color: var(--ink-3);
  text-align: center;
  position: relative;
  z-index: 1;
}

/* The label that slides in while a swipe is in progress, so the gesture says
   where it is going before it commits — and says nothing at the ends of the
   sequence, where it would be lying. */
.swipe-peek {
  position: fixed;
  top: 50%;
  z-index: 180;
  padding: 11px 17px;
  background: var(--accent);
  color: #fff;
  border-radius: 100px;
  box-shadow: var(--shadow);
  font-family: 'Oswald', sans-serif;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  max-width: 60vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root:not([data-theme="light"]) .swipe-peek { color: #17140f; }
.swipe-peek.on-right { right: 14px; }
.swipe-peek.on-left { left: 14px; }

@media (hover: none) and (pointer: coarse) {
  .pager-hint { display: block; }
}

@media (max-width: 620px) {
  .pager { grid-template-columns: 1fr; }
  .pager-next { text-align: left; align-items: flex-start; }
  .pager-end { display: none; }
}

/* ---------- home page: all-pages tap grid (phones) ---------- */

/* Two columns of plain targets. On a phone the six "Start here" cards stack
   into a long scroll and the nav bar is behind a button, so the home page
   doubles as the launcher — every page one tap away, above the fold. */
.tile-grid {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
}

.tile-grid a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 62px;
  padding: 12px 10px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
  text-decoration: none;
  font-family: 'Oswald', sans-serif;
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  line-height: 1.3;
  transition: border-color .15s, color .15s, background .15s;
}
.tile-grid a:active,
.tile-grid a:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }

/* Fifteen identical tiles is a wall to scan, so the two most-wanted
   destinations carry the accent and a larger face. Still the same two
   columns — only the weight changes. */
.tile-grid a:nth-child(-n+2) {
  font-size: .9rem;
  min-height: 70px;
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}

@media (max-width: 620px) {
  .tile-grid { display: grid; }
  /* the editorial cards and the full index are both redundant once the grid
     above lists everything */
  #start-cards { display: none; }
  #all-section { display: none; }
}