:root {
  --bg: #334335;
  --bg-soft: #415344;
  --bg-deep: #243224;
  --panel-flat: #b8ac97;
  --panel-flat-dark: #a2947f;
  --panel-top: #d8cfbf;
  --panel-mid: #bfb39f;
  --panel-base: #998c77;
  --line-dark: #564d40;
  --line-mid: #8b7d69;
  --bevel-light: rgba(255, 250, 238, 0.72);
  --bevel-dark: rgba(68, 60, 49, 0.48);
  --text: #1f1b16;
  --text-soft: #453d32;
  --text-faint: #e4ddcf;
  --error-bg: #d8c0b8;
  --error-border: #8f6b60;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Roboto Flex", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-variation-settings:
    "slnt" 0,
    "wdth" 100,
    "GRAD" 0,
    "XOPQ" 96,
    "XTRA" 468,
    "YOPQ" 79,
    "YTAS" 750,
    "YTDE" -203,
    "YTFI" 738,
    "YTLC" 514,
    "YTUC" 712;
  color: var(--text-faint);
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.04), transparent 18%),
    linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 26%, var(--bg-deep) 100%);
  position: relative;
  isolation: isolate;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  z-index: -2;
  background: repeating-linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.065) 0,
    rgba(255, 255, 255, 0.065) 1px,
    rgba(0, 0, 0, 0.08) 1px,
    rgba(0, 0, 0, 0.08) 4px
  );
  opacity: 0.42;
}

body::after {
  z-index: -1;
  background:
    radial-gradient(circle at center, transparent 56%, rgba(8, 10, 8, 0.18) 90%),
    radial-gradient(circle at center, transparent 72%, rgba(8, 10, 8, 0.28) 100%);
}

a {
  color: inherit;
}

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

button,
input,
select {
  font: inherit;
}

[hidden] {
  display: none !important;
}

.banner h1,
.detail-banner h1,
.detail-card h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
}

.eyebrow,
.feature-nav-link,
.detail-home-link,
.timeline-date,
.timeline-arrow,
.see-more-button,
.meta-pill,
.control-group span,
.tribe-name,
input,
select {
  font-family: "Courier New", "Lucida Console", monospace;
}

.home-shell,
.detail-shell {
  width: 100%;
  padding-bottom: 6rem;
}

.banner,
.banner-copy,
.home-section,
.detail-header,
.detail-shell {
  width: min(1080px, calc(100% - 2rem));
  margin-left: auto;
  margin-right: auto;
}

.banner {
  padding-top: 4.5rem;
}

.banner-copy {
  display: grid;
  gap: 1.5rem;
  padding: 0;
}

.feature-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.feature-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.28rem 0.6rem;
  color: var(--text);
  text-decoration: none;
}

.banner h1,
.detail-banner h1 {
  margin: 0;
  color: #f5efe2;
  font-size: clamp(3.6rem, 8vw, 6rem);
  line-height: 0.9;
  text-transform: uppercase;
}

.banner-copy p,
.lead,
.detail-card p,
.timeline-detail p,
.map-legend li,
.character-card-summary {
  margin: 0;
  color: var(--text-faint);
}

.home-section {
  margin-top: 3rem;
}

.eyebrow {
  margin: 0 0 0.45rem;
  color: rgba(245, 239, 226, 0.74);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tribe-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem 4rem;
  width: 100%;
  padding: 2rem 0 2.4rem;
}

.tribe-link {
  display: grid;
  gap: 0.7rem;
  justify-items: center;
  text-decoration: none;
  transition: transform 0.14s ease, filter 0.14s ease;
}

.tribe-link:hover {
  transform: translateY(-4px);
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.24));
}

.tribe-icon {
  width: 168px;
  min-height: 168px;
  display: grid;
  place-items: center;
  justify-self: center;
  background: transparent;
}

.tribe-icon img {
  width: auto;
  max-width: 168px;
  max-height: 168px;
  object-fit: contain;
}

.tribe-icon-placeholder {
  width: 168px;
  height: 168px;
  display: grid;
  place-items: center;
  color: #f5efe2;
  font-size: 1.6rem;
  font-weight: 700;
}

.tribe-name {
  text-align: center;
  color: #f5efe2;
}

.map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) 280px;
  gap: 1.2rem;
}

.map-panel,
.map-legend,
.timeline-detail,
.control-group input,
.control-group select,
.character-card,
.detail-card,
.media-frame,
.message {
  border: 1px solid var(--line-dark);
  background: var(--panel-flat);
  box-shadow:
    inset 1px 1px 0 var(--bevel-light),
    inset -2px -2px 0 var(--bevel-dark),
    0 14px 28px rgba(22, 18, 14, 0.18);
}

.timeline-arrow,
.see-more-button,
.meta-pill,
.feature-nav-link,
.detail-home-link {
  border: 1px solid var(--line-dark);
  background: linear-gradient(180deg, var(--panel-top) 0%, var(--panel-mid) 20%, var(--panel-base) 100%);
  box-shadow: inset 1px 1px 0 rgba(255, 250, 238, 0.48), inset -1px -1px 0 rgba(68, 60, 49, 0.18);
}

.map-panel {
  padding: 1rem;
}

.map-image {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  background:
    linear-gradient(180deg, rgba(251, 247, 239, 0.08), rgba(30, 36, 29, 0.28)),
    url("../img/tribe/windingpaths-v1.webp") center/cover no-repeat;
  box-shadow: inset 1px 1px 0 rgba(255, 248, 234, 0.4), inset -2px -2px 0 rgba(68, 60, 49, 0.4);
}

.map-image::after {
  content: "Territory map placeholder";
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  padding: 0.34rem 0.72rem;
  border: 1px solid var(--line-dark);
  background: linear-gradient(180deg, var(--panel-top) 0%, var(--panel-mid) 20%, var(--panel-base) 100%);
  color: var(--text-soft);
  font-size: 0.76rem;
  box-shadow: inset 1px 1px 0 rgba(255, 250, 238, 0.6), inset -1px -1px 0 rgba(68, 60, 49, 0.28);
}

.map-legend {
  padding: 1rem 1.1rem;
  color: var(--text-soft);
}

.map-key-list {
  display: grid;
  gap: 0.8rem;
}

.map-key-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  font-family: "Courier New", "Lucida Console", monospace;
  font-size: 0.9rem;
}

.map-key-number {
  width: 1.5rem;
  height: 1.5rem;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  background: linear-gradient(180deg, var(--panel-top) 0%, var(--panel-mid) 20%, var(--panel-base) 100%);
  color: var(--text);
  box-shadow: inset 1px 1px 0 rgba(255, 250, 238, 0.48), inset -1px -1px 0 rgba(68, 60, 49, 0.18);
}

.timeline-shell {
  display: grid;
  gap: 1rem;
  width: 100%;
  justify-items: stretch;
}

.timeline-controls {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 30px;
  align-items: end;
  gap: 0.7rem;
  width: 100%;
}

.timeline-track-frame {
  position: relative;
  width: 100%;
}

.timeline-track-frame::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  right: 0.2rem;
  top: 2.9rem;
  height: 3px;
  background: linear-gradient(90deg, rgba(216, 207, 191, 0.7), rgba(143, 117, 86, 0.95), rgba(216, 207, 191, 0.7));
  pointer-events: none;
}

.timeline-arrow {
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--text);
  cursor: pointer;
  font-size: 0.78rem;
  align-self: end;
  margin-bottom: 0.15rem;
}

.timeline-arrow:disabled {
  opacity: 0.45;
  cursor: default;
}

.timeline-track {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 140px;
  align-items: start;
  gap: 1rem;
  width: 100%;
  min-height: 4.5rem;
  overflow-x: auto;
  padding: 0.2rem calc(50% - 70px);
  scrollbar-width: none;
}

.timeline-track::-webkit-scrollbar {
  display: none;
}

.timeline-point {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
}

.timeline-date {
  display: block;
  min-height: 1.95rem;
  width: 100%;
  text-align: center;
  color: rgba(245, 239, 226, 0.92);
  font-size: 0.82rem;
  line-height: 1.25;
  white-space: nowrap;
}

.timeline-dot {
  width: 1.15rem;
  height: 1.15rem;
  border: 3px solid var(--bg);
  border-radius: 50%;
  background: linear-gradient(180deg, #c48b63, #8d5f41);
  box-shadow: 0 0 0 2px rgba(123, 101, 80, 0.45);
  transform: translateY(2px);
}

.timeline-point.is-active .timeline-dot {
  background: linear-gradient(180deg, #f0d7b8, #a56b43);
}

.timeline-detail {
  width: fit-content;
  max-width: min(100%, 720px);
  min-height: 0;
  padding: 1rem 1.1rem;
  transition: margin-left 0.28s ease;
}

.timeline-detail p,
.meta-pill,
.control-group span,
.detail-card p,
.map-legend li,
.message {
  color: var(--text-soft);
}

.control-group span {
  color: rgba(245, 239, 226, 0.82);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.timeline-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.8rem;
}

.meta-pill {
  padding: 0.28rem 0.6rem;
  font-size: 0.8rem;
  text-decoration: none;
}

.meta-pill:hover,
.feature-nav-link:hover {
  background: linear-gradient(180deg, #e6ddd0 0%, #c6baa6 20%, #a6967e 100%);
}

.timeline-tribe-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.85rem;
  text-decoration: none;
}

.timeline-tribe-icon,
.character-tribe-icon {
  width: auto;
  height: 1.85rem;
  object-fit: contain;
}

.tribe-inline-icon-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.85rem;
  height: 1.85rem;
  color: #f5efe2;
  font-family: "Courier New", "Lucida Console", monospace;
  font-size: 0.72rem;
  line-height: 1;
}

.character-controls {
  display: grid;
  grid-template-columns: minmax(420px, 2.4fr) minmax(220px, 1fr) minmax(220px, 1fr);
  gap: 0.9rem;
  width: 100%;
  margin-bottom: 1rem;
}

.control-group {
  display: grid;
  gap: 0.45rem;
}

.control-group input,
.control-group select {
  width: 100%;
  padding: 0.78rem 0.9rem;
  color: var(--text);
  font-size: 0.9rem;
}

.control-group input::placeholder {
  color: rgba(69, 61, 50, 0.72);
}

.character-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 220px);
  justify-content: start;
  gap: 1rem;
}

.character-card {
  width: 220px;
  display: grid;
  gap: 0.65rem;
  padding: 0.9rem;
  position: relative;
  z-index: 1;
  text-decoration: none;
  color: var(--text);
}

.character-card h3,
.detail-card h2 {
  margin: 0;
  color: var(--text);
}

.character-card-media {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  background: linear-gradient(180deg, #ded3c2, #ab9d87);
  box-shadow: inset 1px 1px 0 rgba(255, 250, 238, 0.55), inset -1px -1px 0 rgba(68, 60, 49, 0.22);
}

.character-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.character-card-placeholder {
  color: var(--line-dark);
  font-size: 1.15rem;
}

.character-card-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.35rem;
  color: var(--text-soft);
  font-size: 0.92rem;
}

.character-role-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.85rem;
  padding: 0.26rem 0.58rem;
  border: 1px solid var(--line-dark);
  background: linear-gradient(180deg, var(--panel-top) 0%, var(--panel-mid) 20%, var(--panel-base) 100%);
  box-shadow: inset 1px 1px 0 rgba(255, 250, 238, 0.48), inset -1px -1px 0 rgba(68, 60, 49, 0.18);
  color: var(--text);
  font-family: "Courier New", "Lucida Console", monospace;
  font-size: 0.76rem;
  line-height: 1;
  text-transform: uppercase;
}

.see-more-button,
.detail-home-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  text-decoration: none;
  padding: 0.38rem 0.8rem;
}

.see-more-button {
  margin: 1rem auto 0;
  padding: 0.34rem 0.75rem;
  font-size: 0.76rem;
  cursor: pointer;
}

.detail-page {
  min-height: 100vh;
}

.detail-header {
  padding-top: 1rem;
}

.detail-shell {
  padding-top: 1rem;
}

.detail-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
  gap: 1.2rem;
}

.detail-banner-copy {
  display: grid;
  gap: 1.5rem;
  padding: 1rem 0;
}

.detail-banner-media,
.detail-banner-media .media-frame {
  height: 100%;
}

.media-frame {
  min-height: 320px;
  overflow: hidden;
}

.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-frame-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 1rem;
  text-align: center;
  color: var(--text-soft);
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.8rem 0;
}

.section-heading {
  margin-bottom: 1rem;
}

.roles-shell {
  padding-bottom: 5rem;
}

.roles-banner {
  grid-template-columns: 1fr;
}

.roles-jump-list {
  gap: 0.55rem;
}

.roles-section {
  margin-top: 2.2rem;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.roles-section h2,
.role-entry h3,
.role-entry h4 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  color: var(--text);
}

.roles-section h2 {
  color: #f5efe2;
  font-size: clamp(2rem, 4vw, 2.8rem);
}

.role-intro,
.role-entry {
  border: 1px solid var(--line-dark);
  background: var(--panel-flat);
  box-shadow:
    inset 1px 1px 0 var(--bevel-light),
    inset -2px -2px 0 var(--bevel-dark),
    0 14px 28px rgba(22, 18, 14, 0.18);
}

.role-intro {
  margin-bottom: 1rem;
  padding: 1rem 1.1rem;
}

.role-intro p,
.role-entry p,
.role-note p,
.role-note li,
.role-list li {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.6;
}

.role-stack {
  display: grid;
  gap: 1rem;
}

.role-entry {
  display: grid;
  gap: 1rem;
  padding: 1.15rem 1.2rem 1.2rem;
}

.role-entry-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 0.85rem;
}

.role-entry h3 {
  font-size: clamp(1.9rem, 3vw, 2.35rem);
  line-height: 0.95;
  color: var(--text);
}

.role-age-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.95rem;
  padding: 0.28rem 0.72rem;
  border: 1px solid var(--line-dark);
  background: rgba(255, 248, 236, 0.38);
  box-shadow: inset 1px 1px 0 rgba(255, 250, 238, 0.3);
  color: var(--text);
  font-family: "Courier New", "Lucida Console", monospace;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.role-summary {
  font-size: 1rem;
  color: var(--text);
  text-align: justify;
  text-wrap: pretty;
}

.role-entry h4 {
  display: inline-block;
  margin-bottom: 0.45rem;
  font-size: 1.02rem;
  color: var(--text);
  font-family: "Courier New", "Lucida Console", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.role-detail {
  display: block;
}

.role-detail + .role-detail {
  margin-top: 0.95rem;
  border-top: 1px solid rgba(86, 77, 64, 0.22);
  padding-top: 0.8rem;
}

.role-detail-copy {
  display: block;
}

.role-detail-copy p,
.role-list li {
  text-align: justify;
  text-wrap: pretty;
  hyphens: auto;
}

.role-note {
  display: block;
  margin: 0.8rem 0;
  padding: 0.72rem 0.85rem;
  border: 1px solid var(--line-mid);
  background: rgba(255, 248, 236, 0.26);
  box-shadow: inset 1px 1px 0 rgba(255, 250, 238, 0.38);
}

.role-note-label {
  display: block;
  font-family: "Courier New", "Lucida Console", monospace;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.role-note-label::-webkit-details-marker {
  display: none;
}

.role-note-label::before {
  content: "+";
  display: inline-block;
  width: 0.9rem;
  margin-right: 0.3rem;
}

.role-note[open] .role-note-label::before {
  content: "-";
}

.role-note > :not(summary) {
  margin-top: 0.55rem;
}

.role-list {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--text-soft);
  line-height: 1.45;
}

.role-note li + li,
.role-list li + li,
.role-entry p + p,
.role-note p + p {
  margin-top: 0.14rem;
}

.detail-card {
  padding: 1rem;
}

.detail-card h2 {
  margin-bottom: 0.55rem;
  font-size: 1.3rem;
  line-height: 1;
}

.detail-card-wide {
  grid-column: span 2;
}

.message {
  padding: 1rem 1.1rem;
}

.message-error {
  background: linear-gradient(180deg, var(--error-bg), #b88f86);
  border-color: var(--error-border);
  color: #41251f;
}

.empty-state {
  padding: 0.7rem 0;
  color: rgba(245, 239, 226, 0.82);
}

@media (max-width: 900px) {
  .map-layout,
  .detail-banner {
    grid-template-columns: 1fr;
  }

  .character-controls {
    grid-template-columns: minmax(0, 1.6fr) minmax(180px, 220px);
  }

  .tribe-row {
    gap: 1.4rem 2.2rem;
  }
}

@media (max-width: 700px) {
  .banner,
  .banner-copy,
  .home-section,
  .detail-header,
  .detail-shell {
    width: min(100%, calc(100% - 1rem));
  }

  .tribe-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .timeline-controls,
  .character-controls {
    grid-template-columns: 1fr;
  }

  .character-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .character-card {
    width: 100%;
  }

  .detail-grid {
    grid-template-columns: 1fr;
  }

  .detail-card-wide {
    grid-column: auto;
  }

  .role-entry,
  .role-intro {
    padding: 0.95rem 1rem;
  }
}