:root {
  --ink: #17110c;
  --night: #111a1f;
  --iron: #25333a;
  --pine: #263d34;
  --verdigris: #4f7669;
  --blood: #8b2f2c;
  --gold: #c79b4b;
  --paper: #e9dcc0;
  --bone: #f3ead8;
  --smoke: rgba(17, 26, 31, 0.72);
  --line: rgba(243, 234, 216, 0.24);
  font-family: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

section[id] { scroll-margin-top: 100px; }
button { font: inherit; }
.media-credit { margin: 14px 0; color: #bac1b4; font: 0.75rem/1.5 "Segoe UI", Arial, sans-serif; }
.language-select {
  flex-shrink: 0;
  max-width: 112px;
  min-height: 40px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #141916;
  color: var(--bone);
  font: 0.8rem "Segoe UI", Arial, sans-serif;
}
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 5px;
}
.hero-motto {
  font-size: 1.7rem;
  line-height: 1.3;
  color: var(--paper);
  margin: 22px 0 12px;
}
.destiny-band { background: #141916; }
.destiny-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
  margin-bottom: 32px;
}
.destiny-tabs button {
  min-height: 60px;
  padding: 14px 12px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: #b6b8ab;
  cursor: pointer;
  font-size: 1.15rem;
}
.destiny-tabs button[aria-selected="true"] {
  color: var(--gold);
  border-bottom-color: var(--gold);
  background: rgba(199, 155, 75, 0.07);
}
.destiny-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.destiny-image { margin: 0; }
.destiny-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #0c100e;
}
.destiny-image figcaption, .destiny-status {
  font: 0.85rem/1.6 "Segoe UI", Arial, sans-serif;
  color: #aab0a5;
}
.destiny-image figcaption { padding-top: 12px; }
.destiny-copy h3 { font-size: 2rem; line-height: 1.15; }
.destiny-copy > p:not(.eyebrow):not(.destiny-status) {
  font: 1rem/1.7 "Segoe UI", Arial, sans-serif;
  color: #c4c5b7;
}
.destiny-stakes { margin: 24px 0; }
.destiny-stakes > div {
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.destiny-stakes dt { font-size: 0.8rem; }
.destiny-stakes dd { line-height: 1.6; }
.destiny-status { border-left: 2px solid var(--verdigris); padding-left: 14px; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--bone);
  background: var(--night);
  letter-spacing: 0;
}

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

a {
  color: inherit;
  text-decoration: none;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px clamp(18px, 4vw, 58px);
  background: linear-gradient(180deg, rgba(17, 26, 31, 0.86), rgba(17, 26, 31, 0.35));
  border-bottom: 1px solid rgba(233, 220, 192, 0.16);
  backdrop-filter: blur(12px);
}

.brand-mark img {
  width: 132px;
  height: auto;
}

nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 0.78rem;
  text-transform: uppercase;
  color: rgba(243, 234, 216, 0.82);
}

nav a:hover {
  color: var(--gold);
}

.hero {
  position: relative;
  min-height: 86vh;
  display: grid;
  align-items: end;
  padding: 120px clamp(22px, 6vw, 84px) 70px;
  background:
    linear-gradient(90deg, rgba(17, 26, 31, 0.94) 0%, rgba(17, 26, 31, 0.72) 37%, rgba(17, 26, 31, 0.22) 100%),
    url("assets/images/ostreath-promo-v2.png") center / cover no-repeat;
}

.hero-shade {
  position: absolute;
  inset: auto 0 0;
  height: 34%;
  background: linear-gradient(0deg, var(--night), transparent);
}

.hero-content {
  position: relative;
  max-width: 760px;
}

.hero-logo {
  width: min(390px, 70vw);
  margin-bottom: 12px;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--gold);
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1, h2, h3, p {
  margin-top: 0;
}

h1 {
  margin-bottom: 14px;
  font-size: clamp(4rem, 12vw, 9rem);
  line-height: 0.82;
  text-shadow: 0 10px 32px rgba(0, 0, 0, 0.5);
}

h2 {
  margin-bottom: 16px;
  font-size: clamp(2.1rem, 5vw, 4.8rem);
  line-height: 0.96;
}

h3 {
  color: var(--paper);
  font-size: 1.25rem;
}

.hero-copy, .lead, .section-head p, .map-copy p, .discord-band p {
  color: rgba(243, 234, 216, 0.82);
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.7;
}

.hero-copy {
  max-width: 620px;
  font-size: clamp(1.1rem, 2vw, 1.38rem);
}

.hero-actions, .discord-band {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: "Segoe UI", Arial, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.button.primary {
  background: var(--blood);
  border-color: #b85b43;
  color: #fff5e2;
}

.button.ghost {
  background: rgba(17, 26, 31, 0.42);
}

.ticker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #172429;
}

.ticker div {
  padding: 20px clamp(18px, 4vw, 58px);
  border-right: 1px solid var(--line);
}

.ticker span, .card-kicker, .tag, dt {
  display: block;
  margin-bottom: 7px;
  color: var(--gold);
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.ticker strong {
  font-size: 1rem;
}

.band, .lore-band, .gallery-band, .roadmap-band {
  padding: clamp(64px, 9vw, 120px) clamp(22px, 6vw, 84px);
}

.intro {
  background: #191b18;
  color: var(--bone);
  border-bottom: 1px solid var(--line);
}

.intro .eyebrow {
  color: var(--gold);
}

.intro .lead {
  color: #c4bba9;
}

.section-head {
  max-width: 920px;
  margin-bottom: 34px;
}

.lead {
  max-width: 1050px;
  font-size: clamp(1.14rem, 2vw, 1.55rem);
  color: #332317;
}

.map-band {
  display: grid;
  grid-template-columns: minmax(280px, 0.86fr) minmax(340px, 1.14fr);
  gap: clamp(24px, 5vw, 70px);
  align-items: center;
  padding: clamp(64px, 9vw, 120px) clamp(22px, 6vw, 84px);
  background: #151c1a;
}

.map-copy dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 32px;
}

.map-copy div, .system-card, .roadmap-columns > div, .lore-item {
  border: 1px solid rgba(233, 220, 192, 0.22);
  border-radius: 6px;
  background: rgba(233, 220, 192, 0.06);
}

.map-copy div {
  padding: 18px;
}

dt {
  font-size: 1.4rem;
  text-transform: none;
}

dd {
  margin: 0;
  color: rgba(243, 234, 216, 0.72);
  font-family: "Segoe UI", Arial, sans-serif;
}

.map-frame {
  margin: 0;
  border: 1px solid rgba(199, 155, 75, 0.45);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.35);
}

.system-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.system-card {
  min-height: 230px;
  padding: 24px;
}

.system-card p, .lore-item p, li {
  color: rgba(243, 234, 216, 0.76);
  font-family: "Segoe UI", Arial, sans-serif;
  line-height: 1.62;
}

.lore-band {
  background: linear-gradient(180deg, #1b2529, #17201e);
}

.lore-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(300px, 1.1fr);
  gap: clamp(24px, 5vw, 62px);
  align-items: stretch;
}

.lore-layout figure {
  margin: 0;
  align-self: start;
  overflow: hidden;
  border-radius: 6px;
}

.lore-layout img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: contain;
}

.lore-list {
  display: grid;
  gap: 12px;
}

.lore-item {
  padding: 22px;
}

.gallery-band {
  background: #171918;
  color: var(--bone);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.gallery-band .section-head p {
  color: #c4bba9;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 6px;
  background: #201812;
}

.shot img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  transition: transform 0.35s ease;
}

.shot:hover img {
  transform: scale(1.04);
}

.shot figcaption {
  padding: 16px;
  background: #18211d;
  color: var(--bone);
}

.tag {
  display: inline-block;
  margin-bottom: 6px;
}

.roadmap-band {
  background: #131b23;
}

.milestones {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 34px;
}

.milestone {
  min-height: 154px;
  padding: 16px;
  border: 1px solid rgba(233, 220, 192, 0.2);
  border-radius: 6px;
  background: rgba(233, 220, 192, 0.06);
}

.milestone.done { border-color: #75a37a; }
.milestone.near { border-color: var(--gold); }
.milestone.active { border-color: var(--verdigris); }
.milestone.future { opacity: 0.68; }

.milestone strong {
  display: block;
  margin-bottom: 12px;
  color: var(--gold);
}

.milestone span {
  display: block;
  margin-top: 14px;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 0.78rem;
  color: rgba(243, 234, 216, 0.7);
}

.roadmap-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.roadmap-columns > div {
  padding: 24px;
}

ul {
  margin: 0;
  padding-left: 20px;
}

.discord-band {
  justify-content: space-between;
  padding: clamp(56px, 7vw, 88px) clamp(22px, 6vw, 84px);
  background:
    linear-gradient(90deg, rgba(17, 26, 31, 0.92), rgba(38, 61, 52, 0.7)),
    url("assets/images/ostreath-captura.png") center / cover no-repeat;
}

.discord-band > div {
  max-width: 760px;
}

footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px clamp(22px, 6vw, 84px);
  background: #0c1216;
  border-top: 1px solid var(--line);
  color: rgba(243, 234, 216, 0.72);
  font-family: "Segoe UI", Arial, sans-serif;
}

footer img {
  width: 150px;
}

@media (max-width: 980px) {
  .destiny-layout { grid-template-columns: 1fr; gap: 24px; }
  .site-header {
    position: absolute;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
  }

  .site-header nav { order: 3; width: 100%; justify-content: flex-start; }

  nav {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .ticker, .map-band, .lore-layout, .roadmap-columns {
    grid-template-columns: 1fr;
  }

  .system-grid, .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

@media (max-width: 640px) {
  .destiny-tabs button { font-size: 0.9rem; padding: 12px 6px; }
  .hero-motto { font-size: 1.35rem; }
  .site-header {
    padding: 12px 16px;
  }

  .brand-mark img {
    width: 104px;
  }

  nav {
    gap: 10px;
    font-size: 0.68rem;
  }

  .hero {
    min-height: 84vh;
    padding: 116px 18px 52px;
  }

  .ticker, .system-grid, .gallery-grid, .milestones, .map-copy dl {
    grid-template-columns: 1fr;
  }

  .ticker div {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .lore-layout figure {
    min-height: 0;
  }

  footer, .discord-band {
    align-items: flex-start;
    flex-direction: column;
  }
}