@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

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

body {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #ffffff;
  color: #000000;
  line-height: 1.4;
  text-align: left;
  transition: background-color 0.8s ease;
}

/* Type-specific background colors */
body[data-type="cosmogony"] {
  background-color: #ffff00;
}

body[data-type="anthropogony"] {
  background-color: #d4b896;
}

body[data-type="eschatology"] {
  background-color: #ff0000;
}

body[data-type="underworld"] {
  background-color: #888888;
}


/* Global select styling to override native gray appearance */
select {
  background-color: inherit !important;
  border: 2px solid #000000 !important;
  color: #000000 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 1rem !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  border-radius: 0 !important;
}

/* Body copy links (default: no underline; we opt-in in specific contexts) */
.body-link {
  color: #000000;
  text-decoration: none;
}

.body-link:hover {
  color: #000000;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
}

.mono {
  font-family: 'Space Grotesk', sans-serif;
}

/* Key Sentence / Pull Quote */
.key-sentence {
  font-size: 3rem;
  font-weight: 700;
  color: #000000;
  margin-bottom: 2rem;
  line-height: 1.1;
  text-align: left;
}

.key-sentence .body-link {
  text-decoration: underline;
}

.key-sentence .body-link:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .key-sentence {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .key-sentence {
    font-size: 1.5rem;
  }
}

/* Landing Page */
.landing {
  min-height: 100vh;
  padding: 2rem;
  text-align: left;
}

.landing > div {
  width: 100%;
}

.landing-title {
  font-size: 1rem;
  font-weight: 700;
  color: #000000;
  margin-bottom: 0.5rem;
}

.landing-subtitle {
  font-size: 1rem;
  font-weight: 400;
  color: #000000;
  margin-bottom: 3rem;
  line-height: 1.4;
}

.landing-buttons {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: flex-start;
}

.landing-button {
  width: 100%;
  max-width: 600px;
  padding: 3rem 2rem;
  background: inherit;
  border: 2px solid #000000;
  color: #000000;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 3rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: block;
  text-align: left;
  text-transform: uppercase;
}

.landing-button:hover {
  background: #000000;
  color: inherit;
}

@media (max-width: 768px) {
  .landing-button {
    font-size: 2rem;
    padding: 2rem 1.5rem;
  }
}

@media (max-width: 480px) {
  .landing-button {
    font-size: 1.5rem;
    padding: 1.5rem 1rem;
  }
}

.button {
  padding: 1rem 2rem;
  background: inherit;
  border: 1px solid #000000;
  color: #000000;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
  text-align: left;
  position: relative;
  padding-right: 3rem;
}

.button::after {
  content: '→';
  position: absolute;
  right: 1rem;
}

.button:hover {
  background: #000000;
  color: inherit;
}

/* Container */
.container {
  padding: 2rem;
  width: 100%;
}

/* Myths Index */
.myths-header {
  margin-bottom: 2rem;
}

.myths-title {
  font-size: 1rem;
  font-weight: 700;
  color: #000000;
  margin-bottom: 0.5rem;
}

.myths-count {
  color: #000000;
  font-size: 1rem;
  font-weight: 400;
}

.filters {
  margin-top: 2.5rem;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 768px) {
  .filters {
    flex-direction: row;
    align-items: flex-end;
  }
}

.filter-group {
  flex: 1;
}

.filter-label {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: #000000;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

/* Custom dropdown */
.dropdown {
  position: relative;
}

.dropdown-toggle {
  width: 100%;
  padding: 1rem 2.5rem 1rem 1rem;
  background-color: inherit;
  border: 2px solid #000000;
  color: #000000;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  border-radius: 0;
  position: relative;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.dropdown-toggle:hover {
  background-color: #000000;
  color: inherit;
  border-color: #000000;
}

body[data-type="cosmogony"] .dropdown-toggle:hover {
  color: #ffff00;
}

body[data-type="anthropogony"] .dropdown-toggle:hover {
  color: #d4b896;
}

body[data-type="eschatology"] .dropdown-toggle:hover {
  color: #ff0000;
}

body[data-type="underworld"] .dropdown-toggle:hover {
  color: #888888;
}

body:not([data-type]) .dropdown-toggle:hover {
  color: #ffffff;
}

.dropdown.open .dropdown-toggle {
  background-color: #000000;
  color: inherit;
  border-color: #000000 !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

body[data-type="cosmogony"] .dropdown.open .dropdown-toggle {
  color: #ffff00;
  border-color: #000000 !important;
}

body[data-type="anthropogony"] .dropdown.open .dropdown-toggle {
  color: #d4b896;
  border-color: #000000 !important;
}

body[data-type="eschatology"] .dropdown.open .dropdown-toggle {
  color: #ff0000;
  border-color: #000000 !important;
}

body[data-type="underworld"] .dropdown.open .dropdown-toggle {
  color: #888888;
  border-color: #000000 !important;
}

body:not([data-type]) .dropdown.open .dropdown-toggle {
  color: #ffffff;
  border-color: #000000 !important;
}

.dropdown-toggle::after {
  content: '▼';
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
}

.dropdown.open .dropdown-toggle {
  background-color: #000000;
  color: inherit;
  border-color: inherit;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

body[data-type="cosmogony"] .dropdown.open .dropdown-toggle {
  color: #ffff00;
  border-color: #ffff00;
}

body[data-type="anthropogony"] .dropdown.open .dropdown-toggle {
  color: #d4b896;
  border-color: #d4b896;
}

body[data-type="eschatology"] .dropdown.open .dropdown-toggle {
  color: #ff0000;
  border-color: #ff0000;
}

body[data-type="underworld"] .dropdown.open .dropdown-toggle {
  color: #888888;
  border-color: #888888;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  border: 2px solid #000000;
  border-top: none;
  z-index: 20;
  display: none;
}

body[data-type="cosmogony"] .dropdown-menu {
  background-color: #ffff00;
}

body[data-type="anthropogony"] .dropdown-menu {
  background-color: #d4b896;
}

body[data-type="eschatology"] .dropdown-menu {
  background-color: #ff0000;
}

body[data-type="underworld"] .dropdown-menu {
  background-color: #888888;
}

.dropdown.open .dropdown-menu {
  display: block;
}

.dropdown-item {
  width: 100%;
  padding: 0.75rem 1rem;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #000000;
  color: #000000;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
}

.dropdown-item:last-child {
  border-bottom: none;
}

.dropdown-item:hover {
  background-color: #000000;
  color: #ffffff;
}

body[data-type="cosmogony"] .dropdown-item:hover {
  color: #ffff00;
}

body[data-type="anthropogony"] .dropdown-item:hover {
  color: #d4b896;
}

body[data-type="eschatology"] .dropdown-item:hover {
  color: #ff0000;
}

body[data-type="underworld"] .dropdown-item:hover {
  color: #888888;
}

/* Myths Grid */
.myths-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .myths-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .myths-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.myth-card {
  padding: 1.5rem;
  background-color: inherit;
  border: 1px solid #000000;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: left;
  text-decoration: none;
}

.myth-card:hover {
  background-color: #000000;
  border-color: #000000;
}

.myth-card:hover * {
  color: inherit;
}

body[data-type="cosmogony"] .myth-card:hover * {
  color: #ffff00;
}

body[data-type="cosmogony"] .myth-card:hover .myth-tag,
body[data-type="cosmogony"] .myth-card:hover .myth-theme {
  border-color: #ffff00;
}

body[data-type="anthropogony"] .myth-card:hover * {
  color: #d4b896;
}

body[data-type="anthropogony"] .myth-card:hover .myth-tag,
body[data-type="anthropogony"] .myth-card:hover .myth-theme {
  border-color: #d4b896;
}

body[data-type="eschatology"] .myth-card:hover * {
  color: #ff0000;
}

body[data-type="eschatology"] .myth-card:hover .myth-tag,
body[data-type="eschatology"] .myth-card:hover .myth-theme {
  border-color: #ff0000;
}

body[data-type="underworld"] .myth-card:hover * {
  color: #888888;
}

body[data-type="underworld"] .myth-card:hover .myth-tag,
body[data-type="underworld"] .myth-card:hover .myth-theme {
  border-color: #888888;
}

body:not([data-type]) .myth-card:hover * {
  color: #ffffff;
}

body:not([data-type]) .myth-card:hover .myth-tag,
body:not([data-type]) .myth-card:hover .myth-theme {
  border-color: #ffffff;
}

.myth-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: #000000;
  margin-bottom: 0.5rem;
  transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.myth-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.myth-tag {
  font-size: 1rem;
  font-weight: 400;
  color: #000000;
  background-color: inherit;
  padding: 0.25rem 0.5rem;
  border: 1px solid #000000;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.myth-tag:hover {
  background-color: #000000;
  color: inherit;
  border-color: inherit;
}

body[data-type="cosmogony"] .myth-tag:hover {
  color: #ffff00;
  border-color: #ffff00;
}

body[data-type="anthropogony"] .myth-tag:hover {
  color: #d4b896;
  border-color: #d4b896;
}

body[data-type="eschatology"] .myth-tag:hover {
  color: #ff0000;
  border-color: #ff0000;
}

body[data-type="underworld"] .myth-tag:hover {
  color: #888888;
  border-color: #888888;
}

body:not([data-type]) .myth-tag:hover {
  color: #ffffff;
  border-color: #ffffff;
}

.myth-summary {
  color: #000000;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s ease;
}


.myth-themes {
  padding-top: 1rem;
  border-top: 1px solid #000000;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  transition: border-color 0.3s ease;
}


.myth-theme {
  font-size: 1rem;
  font-weight: 400;
  color: #000000;
  background-color: inherit;
  padding: 0.125rem 0.5rem;
  border: 1px solid #000000;
}

/* Detail Page */
.back-link {
  display: inline-block;
  margin-bottom: 2rem;
  color: #000000;
  font-size: 1rem;
  font-weight: 400;
  text-decoration: none;
  transition: all 0.3s ease;
}

.detail-article ~ .back-link {
  margin-top: 3rem;
  margin-bottom: 0;
}

.back-link:hover {
  text-decoration: underline;
}

.detail-article {
  width: 100%;
}

.detail-header {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #000000;
}

.detail-title {
  font-size: 3rem;
  font-weight: 700;
  color: #000000;
  margin-bottom: 1rem;
  line-height: 1.1;
}

@media (max-width: 768px) {
  .detail-title {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .detail-title {
    font-size: 1.5rem;
  }
}

.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.detail-tag {
  font-size: 1rem;
  font-weight: 400;
  color: #000000;
  background-color: inherit;
  padding: 0.375rem 0.75rem;
  border: 1px solid #000000;
}

.detail-tag-button {
  cursor: pointer;
  text-decoration: none;
}

.detail-themes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.5rem;
}

.detail-theme {
  font-size: 1rem;
  font-weight: 400;
  color: #000000;
  background-color: inherit;
  padding: 0.25rem 0.5rem;
  border: 1px solid #000000;
  display: inline-block;
}

.detail-extract {
  margin-bottom: 2rem;
  color: #000000;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
}

.detail-section-content a {
  color: #000000;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.detail-section-content a:hover {
  text-decoration-thickness: 2px;
}

.detail-sections {
  margin-top: 2rem;
  padding-top: 2rem;
}

.detail-section {
  margin-bottom: 3rem;
}

.detail-section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #000000;
  margin-bottom: 1.5rem;
}

.detail-section-content {
  color: #000000;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.4;
  padding-left: 0;
  border-left: none;
}

@media (max-width: 768px) {
  .detail-section-content {
    font-size: 1rem;
  }
}

.detail-placeholder {
  font-size: 2rem;
  font-weight: 400;
  color: #000000;
  margin-left: 0.5rem;
}

.related-section {
  margin-top: 3rem;
  padding-top: 3rem;
}

.related-title {
  font-size: 1rem;
  font-weight: 700;
  color: #000000;
  margin-bottom: 1.5rem;
}

.related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.related-card {
  padding: 1rem;
  background-color: inherit;
  border: 1px solid #000000;
  text-decoration: none;
  color: #000000;
  display: block;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.related-card:hover {
  background-color: #000000;
  border-color: #000000;
}

.related-card:hover * {
  color: inherit;
}

body[data-type="cosmogony"] .related-card:hover * {
  color: #ffff00;
}

body[data-type="anthropogony"] .related-card:hover * {
  color: #d4b896;
}

body[data-type="eschatology"] .related-card:hover * {
  color: #ff0000;
}

body[data-type="underworld"] .related-card:hover * {
  color: #888888;
}

body:not([data-type]) .related-card:hover * {
  color: #ffffff;
}

.related-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: #000000;
  margin-bottom: 0.25rem;
  transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.related-card-meta {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 400;
  color: #000000;
  transition: color 0.3s ease;
}


.related-card-summary {
  font-size: 1rem;
  font-weight: 400;
  color: #000000;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s ease;
}


.source-section {
  margin-top: 3rem;
  padding-top: 2rem;
}

.source-link {
  font-family: 'Space Grotesk', monospace;
  font-size: 0.75rem;
  font-weight: 400;
  color: #000000;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  letter-spacing: 0.05em;
}

.source-link:hover {
  text-decoration-thickness: 2px;
}

.source-caption {
  font-size: 0.75rem;
  font-weight: 400;
  color: #000000;
  margin-left: 0.5rem;
}

.source-caption-link {
  color: #000000;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.source-caption-link:hover {
  text-decoration-thickness: 2px;
}

.myth-image {
  display: block;
  margin-top: 2rem;
  max-width: 100%;
  height: auto;
  border: 2px solid #000000;
  background-color: inherit;
}

.myth-image-caption {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  font-weight: 400;
  color: #000000;
}

.empty-state {
  text-align: left;
  padding: 3rem 0;
  color: #000000;
  font-size: 1rem;
  font-weight: 400;
}

.loading {
  text-align: left;
  padding: 3rem 0;
  color: #000000;
  font-size: 1rem;
  font-weight: 400;
}

.site-footer {
  padding: 2rem;
  border-top: 1px solid #000000;
  margin-top: 3rem;
  font-size: 0.875rem;
}

.site-footer a {
  color: #000000;
  text-decoration: underline;
}

.site-footer a:hover {
  color: #000000;
  text-decoration: underline;
}

.symbol-map-link {
  display: inline-block;
  margin-top: 2.5rem;
  padding: 0.75rem 1.5rem;
  background-color: inherit;
  border: 2px solid #000000;
  color: #000000;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.symbol-map-link:hover {
  background-color: #000000;
  color: inherit;
  border-color: #000000;
}

body[data-type="cosmogony"] .symbol-map-link:hover {
  color: #ffff00;
}

body[data-type="anthropogony"] .symbol-map-link:hover {
  color: #d4b896;
}

body[data-type="eschatology"] .symbol-map-link:hover {
  color: #ff0000;
}

body[data-type="underworld"] .symbol-map-link:hover {
  color: #888888;
}

body:not([data-type]) .symbol-map-link:hover {
  color: #ffffff;
}

/* Symbol Map Page Styles */
.symbols-container {
  margin-top: 2rem;
}

.symbols-list {
  margin-top: 2rem;
}

.symbol-group {
  margin-bottom: 3rem;
}

.symbol-group-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #000000;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.symbol-items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.symbol-item {
  padding: 1rem;
  background-color: inherit;
  border: 1px solid #000000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.symbol-word {
  font-size: 1.25rem;
  font-weight: 700;
  color: #000000;
  text-transform: capitalize;
}

.symbol-myths {
  font-size: 1rem;
  font-weight: 400;
  color: #000000;
  line-height: 1.6;
}

.symbol-myth-link {
  color: #000000;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.symbol-myth-link:hover {
  text-decoration-thickness: 2px;
}

@media (min-width: 768px) {
  .symbol-item {
    flex-direction: row;
    align-items: baseline;
    gap: 1rem;
  }

  .symbol-word {
    min-width: 150px;
  }
}