/* =====================================================================
   AMERICAN MEDUSA — style.css v2
   Compact cards, decade + lane focus, restraint over pulse.
   Palette from the Digital Ancients mural.
   ===================================================================== */

:root {
  /* core palette from the mural */
  --brick-black:     #0f0d0e;
  --brick-black-2:   #161315;
  --brick-black-3:   #1c1a1c;
  --charcoal:        #2a2729;
  --charcoal-2:      #3d3a3c;
  --bone:            #e8e4dd;
  --bone-dim:        #a8a49d;
  --bone-very-dim:   #4a4744;
  --coral:           #f06b6b;
  --coral-bright:    #ff7a7a;
  --coral-dim:       #8b3a3a;
  --brass:           #a07a3c;
  --brass-dim:       #6a4f24;

  /* verb palette */
  --verb-sanitize:       #c4b04a;
  --verb-popularize:     #d4b48c;
  --verb-monumentalize:  #a07a3c;
  --verb-commodify:      #c89c44;
  --verb-conscript:      #6a6a4a;
  --verb-weaponize:      #c8423a;
  --verb-sort:           #7a7a4a;
  --verb-gatekeep:       #8a6a2c;
  --verb-reclaim:        #b06ab0;
  --verb-parody:         #e06ab0;
  --verb-abandon:        #5a5a6a;
  --verb-precariatize:   #6a3a6a;
  --verb-annihilate:     #f06b6b;

  /* layout */
  --header-height: 44px;
  --year-axis-height: 44px;
  --lane-height: 390px;
  --lane-label-width: 64px;
  --decade-width: 320px;

  --font-display: 'VT323', 'Courier New', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--brick-black);
  color: var(--bone);
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.4;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

body {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(240,107,107,0.025) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(160,122,60,0.02) 0%, transparent 50%),
    repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(255,255,255,0.008) 3px, rgba(255,255,255,0.008) 4px);
}

a { color: var(--coral); text-decoration: none; }
a:hover { color: var(--coral-bright); text-decoration: underline; }

/* HEADER */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-height);
  background: var(--brick-black);
  border-bottom: 1px solid var(--coral-dim);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}

.header-left {
  font-size: 22px;
  letter-spacing: 0.2em;
  color: var(--coral);
  text-transform: uppercase;
}

.header-right {
  font-size: 14px;
  color: var(--bone-dim);
  letter-spacing: 0.05em;
}

.header-right .arrow { color: var(--coral); margin-right: 6px; }

@media (max-width: 600px) {
  .header-right { font-size: 11px; }
  .header-left { font-size: 18px; }
}

/* TITLE + WALL TEXT */
.title-block {
  padding: 30px 24px 24px;
  border-bottom: 1px solid var(--charcoal);
  max-width: 880px;
}

.title-block h1 {
  font-size: 56px;
  letter-spacing: 0.06em;
  color: var(--coral);
  text-transform: uppercase;
  line-height: 1;
  font-weight: normal;
}

.title-block .subtitle {
  font-size: 18px;
  color: var(--bone);
  margin-top: 8px;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.title-block .subtitle + .subtitle {
  margin-top: 4px;
  color: var(--bone-dim);
  font-style: italic;
}

@media (max-width: 600px) {
  .title-block h1 { font-size: 36px; }
  .title-block .subtitle { font-size: 14px; }
}

/* TIMELINE SCROLL */
.timeline-scroll {
  position: relative;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--brick-black);
  border-top: 2px solid var(--coral-dim);
  border-bottom: 2px solid var(--coral-dim);
}

.timeline-rail {
  position: relative;
  height: calc(var(--year-axis-height) + var(--lane-height) * 4);
}

/* Snake background */
.timeline-rail::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('images/snake.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  opacity: 0.08;
  pointer-events: none;
  z-index: 1;
}

.lane-labels-sticky {
  position: sticky;
  left: 0;
  top: 0;
  z-index: 30;
  width: 0;
  height: 0;
  pointer-events: none;
}

.lane-label {
  position: absolute;
  left: 0;
  width: var(--lane-label-width);
  height: var(--lane-height);
  background: var(--brick-black);
  border-right: 2px solid var(--coral-dim);
  color: var(--coral);
  font-size: 16px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.lane-label:hover {
  background: var(--brick-black-2);
  color: var(--coral-bright);
  border-right-color: var(--coral);
}

.lane-label.active {
  background: var(--coral-dim);
  color: var(--bone);
  border-right: 3px solid var(--coral-bright);
}

/* YEAR AXIS */
.year-axis {
  position: absolute;
  top: 0;
  left: 0;
  height: var(--year-axis-height);
  width: 100%;
  border-bottom: 1px solid var(--coral-dim);
  z-index: 20;
}

.year-tick {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background: var(--charcoal-2);
}

.year-tick.major { background: var(--coral-dim); }

.year-label {
  position: absolute;
  top: 6px;
  font-size: 14px;
  color: var(--bone-dim);
  white-space: nowrap;
  transform: translateX(-50%);
}

.year-tick.major .year-label {
  color: var(--coral);
  font-size: 16px;
}

.era-label {
  position: absolute;
  top: 26px;
  font-size: 11px;
  color: var(--coral-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-50%);
}

/* DECADE HOTSPOTS */
.decade-hotspot {
  position: absolute;
  top: 0;
  height: calc(var(--year-axis-height) + var(--lane-height) * 4);
  cursor: pointer;
  z-index: 6;
  background: transparent;
  border-left: 1px dotted var(--charcoal);
  transition: background 0.2s ease;
}

.decade-hotspot:hover {
  background: rgba(240,107,107,0.04);
}

.decade-hotspot.active {
  background: rgba(240,107,107,0.09);
  border-left: 1px solid var(--coral-dim);
  border-right: 1px solid var(--coral-dim);
}

/* LANE BANDS */
.lane-band {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--lane-height);
  border-bottom: 1px solid var(--charcoal);
  transition: opacity 0.25s ease;
}

.lane-band.school  { top: var(--year-axis-height); background: rgba(255,240,230,0.006); }
.lane-band.church  { top: calc(var(--year-axis-height) + var(--lane-height) * 1); background: rgba(220,200,240,0.006); }
.lane-band.state   { top: calc(var(--year-axis-height) + var(--lane-height) * 2); background: rgba(240,220,200,0.006); }
.lane-band.market  { top: calc(var(--year-axis-height) + var(--lane-height) * 3); background: rgba(200,220,240,0.006); }

/* FOCUS CELLS — lit rectangles at the decade × lane intersection.
   Rendered behind cards, only visible when focus is active. */
.focus-cell {
  position: absolute;
  background: rgba(240,107,107,0.10);
  border-left: 1px solid rgba(240,107,107,0.35);
  border-right: 1px solid rgba(240,107,107,0.35);
  pointer-events: none;
  z-index: 3;
  display: none;
}

.timeline-rail.focus-active .focus-cell.active {
  display: block;
}

/* CARDS — compact */
.card {
  position: absolute;
  z-index: 10;
  cursor: pointer;
  transform: translate(-50%, 0);
  transition: opacity 0.25s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  background: var(--brick-black-2);
  border: 1px solid var(--charcoal-2);
  border-left-width: 3px;
  padding: 3px 5px 4px;
  font-family: var(--font-display);
}

.card:hover {
  border-color: var(--coral);
  box-shadow: 0 0 14px rgba(240,107,107,0.25);
  z-index: 25;
}

.card .card-year {
  display: none;
}

.card .card-title {
  font-size: 12px;
  color: var(--bone);
  line-height: 1.15;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

/* Year DOES show in expanded state as a small tag */
.card.expanded .card-year {
  display: block;
  font-size: 11px;
  color: var(--coral);
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.card.anchor {
  width: 86px;
  min-height: 44px;
  border-left-width: 4px;
}

.card.anchor .card-title { color: var(--bone); }

.card.connector {
  width: 72px;
  min-height: 36px;
  border-left-width: 2px;
}

.card.connector .card-title {
  color: var(--bone-dim);
  font-size: 12px;
}

.card.connector .card-year { color: var(--coral-dim); font-size: 11px; }

/* ─── TREND cards: same family as events, peach tinted, stretched width ─── */
.card.trend {
  min-height: 34px;
  background: rgba(240,107,107,0.13);
  border: 1px solid rgba(240,107,107,0.45);
  border-left-width: 3px;
  border-left-color: var(--coral) !important;
  padding: 3px 8px 4px;
  /* width is set inline by JS to match the span range */
  /* trends use left edge positioning, NOT center-translate */
  transform: none;
}

.card.trend:hover {
  background: rgba(240,107,107,0.22);
  border-color: var(--coral);
  box-shadow: 0 0 14px rgba(240,107,107,0.3);
}

.card.trend .card-title {
  font-size: 11px;
  color: var(--coral-bright);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-style: italic;
  line-height: 1.2;
  -webkit-line-clamp: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card.trend .card-year {
  display: none;
}

.card.trend.expanded {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(440px, 90vw) !important;
  max-height: 70vh;
  min-height: auto;
  padding: 20px 22px;
  background: var(--brick-black-2);
  border-color: var(--coral);
  border-width: 2px;
  border-left-width: 4px;
  box-shadow: 0 0 60px rgba(240,107,107,0.5), 0 0 120px rgba(0,0,0,0.9);
  z-index: 1000;
  overflow-y: auto;
}

.card.trend.expanded .card-title {
  font-size: 15px;
  color: var(--coral);
  text-transform: uppercase;
  font-style: italic;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  -webkit-line-clamp: none;
  margin-bottom: 8px;
}

.card.trend.expanded .card-caption {
  display: block;
  font-size: 13px;
  color: var(--bone);
  line-height: 1.55;
  margin-bottom: 6px;
}

.card .card-image,
.card .card-verb,
.card .card-subtitle,
.card .card-caption,
.card .card-source,
.card .card-close {
  display: none;
}

.card.expanded {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(440px, 90vw) !important;
  max-height: 70vh;
  min-height: auto;
  padding: 20px 22px;
  background: var(--brick-black-2);
  border: 2px solid var(--coral);
  border-left-width: 4px;
  box-shadow: 0 0 60px rgba(240,107,107,0.5), 0 0 120px rgba(0,0,0,0.9);
  z-index: 1000;
  overflow-y: auto;
}

.card.expanded .card-title {
  font-size: 17px;
  color: var(--coral);
  line-height: 1.25;
  margin-bottom: 4px;
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
}

.card.expanded .card-subtitle {
  display: block;
  font-size: 12px;
  color: var(--bone-dim);
  font-style: italic;
  margin-bottom: 10px;
}

.card.expanded .card-caption {
  display: block;
  font-size: 14px;
  color: var(--bone);
  line-height: 1.55;
  margin-bottom: 10px;
}

.card.expanded .card-source {
  display: block;
  font-size: 11px;
  color: var(--coral);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  word-break: break-all;
}

.card.expanded .card-verb {
  display: block;
  font-size: 10px;
  color: var(--coral-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.card.expanded .card-close {
  display: block;
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 11px;
  color: var(--coral);
  letter-spacing: 0.05em;
  cursor: pointer;
}

/* FOCUS MODE */
.timeline-rail.focus-active .card { opacity: 0.12; }
.timeline-rail.focus-active .card.in-focus { opacity: 1; }
.timeline-rail.focus-active .lane-band { opacity: 0.4; }
.timeline-rail.focus-active .lane-band.in-focus-lane { opacity: 1; }

.lane-band.in-focus-lane.school  { background: rgba(255,240,230,0.02); }
.lane-band.in-focus-lane.church  { background: rgba(220,200,240,0.02); }
.lane-band.in-focus-lane.state   { background: rgba(240,220,200,0.02); }
.lane-band.in-focus-lane.market  { background: rgba(200,220,240,0.02); }

/* VERB COLORS */
.verb-SANITIZE      { border-left-color: var(--verb-sanitize)      !important; }
.verb-POPULARIZE    { border-left-color: var(--verb-popularize)    !important; }
.verb-MONUMENTALIZE { border-left-color: var(--verb-monumentalize) !important; }
.verb-COMMODIFY     { border-left-color: var(--verb-commodify)     !important; }
.verb-CONSCRIPT     { border-left-color: var(--verb-conscript)     !important; }
.verb-WEAPONIZE     { border-left-color: var(--verb-weaponize)     !important; }
.verb-SORT          { border-left-color: var(--verb-sort)          !important; }
.verb-GATEKEEP      { border-left-color: var(--verb-gatekeep)      !important; }
.verb-RECLAIM       { border-left-color: var(--verb-reclaim)       !important; }
.verb-PARODY        { border-left-color: var(--verb-parody)        !important; }
.verb-ABANDON       { border-left-color: var(--verb-abandon)       !important; }
.verb-PRECARIATIZE  { border-left-color: var(--verb-precariatize)  !important; }
.verb-ANNIHILATE    { border-left-color: var(--verb-annihilate)    !important; }

/* FOOTER / SKIP / CHRONO */
.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus {
  left: 8px; top: 8px;
  background: var(--coral);
  color: var(--brick-black);
  padding: 8px 14px;
  z-index: 100;
}

.footer {
  padding: 30px 24px;
  border-top: 1px solid var(--charcoal);
  color: var(--bone-dim);
  font-size: 13px;
  max-width: 760px;
}

.footer .footer-title {
  color: var(--coral);
  font-size: 18px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.chronological-list {
  padding: 30px 24px;
  border-top: 1px solid var(--charcoal);
  max-width: 760px;
}

.chronological-list h2 {
  color: var(--coral);
  font-size: 22px;
  margin-bottom: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.chronological-list ol { list-style: none; padding: 0; }
.chronological-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--charcoal);
  color: var(--bone);
  font-size: 14px;
}
.chronological-list .year { color: var(--coral); display: inline-block; width: 60px; }
.chronological-list .lane {
  color: var(--bone-dim);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-left: 8px;
}

.timeline-scroll::-webkit-scrollbar { height: 14px; }
.timeline-scroll::-webkit-scrollbar-track {
  background: var(--brick-black-2);
  border-top: 1px solid var(--coral-dim);
}
.timeline-scroll::-webkit-scrollbar-thumb {
  background: var(--coral-dim);
  border: 2px solid var(--brick-black-2);
}
.timeline-scroll::-webkit-scrollbar-thumb:hover { background: var(--coral); }

/* MOBILE — the timeline is fundamentally desktop-shaped, but we make
   the chrome legible and the modals usable on small screens. */
@media (max-width: 600px) {
  .header { padding: 0 12px; height: 38px; }
  .header-left { font-size: 16px; letter-spacing: 0.15em; }
  .header-right { font-size: 10px; }
  .title-block { padding: 20px 16px 16px; }
  .title-block h1 { font-size: 32px; }
  .title-block .subtitle { font-size: 14px; }
  .footer { padding: 20px 16px; }
  .chronological-list { padding: 20px 16px; }
  .chronological-list h2 { font-size: 18px; }
  .card.expanded,
  .card.trend.expanded {
    width: 92vw !important;
    max-height: 80vh;
    padding: 16px 18px;
  }
  .card.expanded .card-title,
  .card.trend.expanded .card-title { font-size: 16px; }
  .card.expanded .card-caption { font-size: 13px; }
}