@import url("../fonts/fonts.css");

:root {
  /* The artwork carries its own flat border, so the band is simply set to it
     and the frame's edge disappears. #001333 is not the nominal #011332: it
     is the value the file's flat border actually decodes to, which matches it
     3.5x more closely (mean error 0.29/255 against 1.00). */
  --astral: #001333;
  --bg: #071a2b;
  --bg-deep: #04101c;

  --panel-a: rgba(17, 38, 54, 0.72);
  --panel-b: rgba(9, 25, 39, 0.82);
  --panel-inner: rgba(8, 26, 40, 0.62);

  --border: rgba(173, 154, 117, 0.26);
  --border-soft: rgba(141, 160, 172, 0.20);
  --border-cyan: rgba(80, 204, 199, 0.28);

  --text: #d9d0bf;
  --body: #b3bcc0;
  --muted: #8f9ca4;
  --heading: #ead9bd;

  --accent: #53c9c5;
  --accent-strong: #86e8e2;
  --gold: #c79d61;
  --green: #75c59a;

  --shadow: 0 20px 50px rgba(0, 0, 0, 0.34);
  --radius: 16px;
  --max: 1200px;
  --header-h: 78px;

  --serif: "PT Serif", Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; overflow-x: clip; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.6;
  background-color: var(--bg);
  background-image: linear-gradient(180deg, var(--bg) 0%, var(--bg) 55%, var(--bg-deep) 100%);
  background-attachment: fixed;
}

/* Fine film grain — keeps the large flat dark areas from banding. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.14;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 4px; border-radius: 4px; }
img { display: block; max-width: 100%; height: auto; }

.container { width: min(calc(100% - 48px), var(--max)); margin-inline: auto; }

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  /* No tint: the bar is pure backdrop-blur. Any tint has to sit over two
     different backdrops — the black hero band on the homepage and the navy
     page background elsewhere — and cannot match both; the previous navy
     value left a 31/255 step on the inner pages once the band went black.
     Blurring a flat colour returns that colour, so transparent is the only
     value that is seamless on both (measured 3.0 / 2.7 / 0.1). */
  background: transparent;
  border-bottom: 1px solid rgba(137, 160, 169, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.header-inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
}
.nav { margin-inline: auto; display: flex; align-items: center; gap: 46px; }
.nav a {
  position: relative;
  padding: 28px 0 23px;
  color: #b4bcc0;
  font-size: 0.97rem;
  transition: color .18s ease;
}
.nav a:hover, .nav a.active { color: var(--heading); }
.nav a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 13px rgba(83, 201, 197, 0.7);
}
.menu-button {
  margin-left: auto;
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--border-cyan);
  border-radius: 10px;
  background: rgba(12, 31, 39, 0.8);
  color: var(--text);
  cursor: pointer;
}
.menu-button span, .menu-button::before, .menu-button::after {
  content: "";
  display: block;
  width: 20px; height: 2px;
  margin: 5px auto;
  background: currentColor;
}

/* ------------------------------------------------------------------ hero */

/* --art-bottom: how far the artwork overhangs the hero. The solid band and
   the hand-off gradient both key off it, so the colour stays flat to the
   exact bottom of the image and the gradient begins only below it. */
.hero-wrap { position: relative; isolation: isolate; --art-bottom: 90px; }

/* Full-bleed astral band: FLAT colour, no gradient, from above the header down
   to the bottom edge of the artwork. The hand-off to the page happens in
   ::after, entirely below the image. */
.hero-wrap::before {
  content: "";
  position: absolute;
  z-index: -2;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  top: calc(-1 * var(--header-h));
  bottom: calc(-1 * var(--art-bottom));
  background: var(--astral);
}

/* The hand-off, starting exactly where the band ends. */
.hero-wrap::after {
  content: "";
  position: absolute;
  z-index: -2;
  pointer-events: none;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  top: calc(100% + var(--art-bottom));
  height: 240px;
  background: linear-gradient(180deg,
    var(--astral) 0%,
    rgba(0, 19, 51, 0.55) 42%,
    rgba(0, 19, 51, 0) 100%);
}

.hero {
  position: relative;
  min-height: 480px;
  display: grid;
  grid-template-columns: 54% 46%;
  align-items: center;
}

.hero-art {
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--header-h) + 70px);
  bottom: calc(-1 * var(--art-bottom));
  right: -2%;
  width: 64%;
  /* The source JPEG is served as-is. Re-encoding was the problem, not the
     solution: lossy WebP decoded this border as (0,20,52) against the file's
     (0,19,51), which is exactly the 1-2/255 mismatch that used to draw a
     faint rectangle around the art box. Untouched, nothing can drift. */
  background-image: url("../images/hero-island.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  /* contain, never cover: the artwork is never cropped at any viewport, and
     the letterboxed margins are invisible because the image's own flat border
     and the band behind it are the same colour. The mask below only handles
     the longer bottom hand-off into the sections. */
  background-size: contain;
}

.hero-copy { padding: 96px 0 92px; position: relative; z-index: 2; }
.hero-heading { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 24px); }
.hero-emblem {
  flex: none;
  width: clamp(46px, 4.4vw, 70px);
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .45));
}

.hero h1,
.page-hero h1,
.section-title,
.release-version,
.panel h2,
.panel h3,
.doc-mini h3,
.version-item strong {
  font-family: var(--serif);
  color: var(--heading);
  font-weight: 400;
  letter-spacing: 0.005em;
}

.hero h1 {
  margin: 0;
  font-size: clamp(2.6rem, 4.6vw, 4.2rem);
  line-height: 1.02;
  text-shadow: 0 6px 34px rgba(3, 10, 22, 0.75);
}

.hero-rule { width: min(400px, 92%); height: 16px; margin: 30px 0 28px; position: relative; }
.hero-rule::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 7px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), rgba(199, 157, 97, .55), transparent);
}
.hero-rule::after {
  content: "";
  position: absolute;
  left: 46%; top: 1px;
  width: 11px; height: 11px;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
  background: var(--astral);
  box-shadow: 0 0 10px rgba(199, 157, 97, .35);
}
.hero p {
  margin: 0;
  /* wide enough that «Проклятых земель» and the lead-in share a line */
  max-width: 520px;
  text-wrap: pretty;
  color: #bcc3c6;
  font-size: clamp(1.06rem, 1.5vw, 1.3rem);
  line-height: 1.5;
  text-shadow: 0 2px 18px rgba(3, 10, 22, 0.7);
}

/* -------------------------------------------------------- home sections */

.home-sections { position: relative; z-index: 1; padding: 10px 0 30px; display: grid; gap: 20px; }

.feature-section {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--panel-a), var(--panel-b));
  box-shadow: var(--shadow);
  overflow: hidden;
}
.feature-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255, 255, 255, .028), transparent 38%);
}
.feature-inner { position: relative; padding: 30px 36px; }

.section-link {
  position: absolute;
  right: 36px;
  top: 32px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--accent);
  font-size: 1.02rem;
  transition: color .18s ease, gap .18s ease;
}
.section-link::after { content: "→"; font-size: 1.15em; line-height: 1; }
.section-link:hover { color: var(--accent-strong); gap: 16px; }

.section-title { margin: 0 0 6px; font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1.15; }
.section-subtitle { margin: 0; color: var(--muted); }

/* download preview */
.download-preview .feature-inner { min-height: 0; }
.release-grid { display: grid; grid-template-columns: 272px 1fr; gap: 30px; align-items: center; margin-top: 14px; }
.release-label { color: var(--muted); margin-bottom: 2px; font-size: .96rem; }
.release-version { font-size: 2.6rem; line-height: 1; display: flex; gap: 13px; align-items: center; flex-wrap: wrap; }
.badge {
  font: 600 .74rem/1 var(--sans);
  border: 1px solid rgba(117, 197, 154, .5);
  color: #9edbb6;
  border-radius: 6px;
  padding: 7px 9px;
  background: rgba(54, 114, 80, .16);
  letter-spacing: .04em;
  white-space: nowrap;
}
.badge.gold { border-color: rgba(199, 157, 97, .5); color: #dcbc86; background: rgba(120, 90, 44, .16); }

.changes { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; color: #aeb7ba; font-size: .97rem; }
.changes li { display: grid; grid-template-columns: 26px 1fr; align-items: baseline; }
.changes li::before { content: "✦"; color: var(--accent); font-size: .82em; }

/* docs preview */
.docs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-top: 24px; }
.doc-mini {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 13px;
  padding: 19px;
  min-height: 126px;
  border: 1px solid var(--border-soft);
  border-radius: 11px;
  background: var(--panel-inner);
  transition: border-color .18s ease, transform .18s ease;
}
a.doc-mini:hover { border-color: var(--border-cyan); transform: translateY(-2px); }
.doc-mini img { width: 48px; }
.doc-mini h3 { margin: 0 0 4px; font-size: 1.06rem; }
.doc-mini p { margin: 0; font-size: .865rem; color: var(--muted); line-height: 1.45; }

/* mods preview — every tile the exact same size, no featured treatment.
   The banner artwork already carries each mod's name, so the tiles carry no
   overlay text; the name stays for screen readers. */
.mod-preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; }
.mod-preview-card {
  position: relative;
  display: block;
  border: 1px solid rgba(199, 157, 97, .24);
  border-radius: 11px;
  overflow: hidden;
  background: #071620;
  transition: border-color .2s ease, transform .2s ease;
}
.mod-preview-card:hover { border-color: rgba(199, 157, 97, .55); transform: translateY(-3px); }
.mod-preview-card img { width: 100%; aspect-ratio: 8 / 3; object-fit: cover; }

/* the trailing tile links to the full gallery — same box, no artwork */
.mod-preview-card.more {
  aspect-ratio: 8 / 3;
  display: grid;
  place-items: center;
  border-style: dashed;
  border-color: var(--border-soft);
  background: var(--panel-inner);
  color: var(--accent);
}
.mod-preview-card.more span { display: inline-flex; align-items: center; gap: 10px; font-size: .98rem; }
.mod-preview-card.more span::after { content: "\2192"; font-size: 1.15em; }
.mod-preview-card.more:hover { border-color: var(--border-cyan); color: var(--accent-strong); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- footer */

.site-footer { position: relative; z-index: 1; border-top: 1px solid rgba(139, 154, 160, .13); margin-top: 20px; }
.footer-inner { min-height: 98px; display: grid; place-items: center; color: #7f888e; font-size: .9rem; text-align: center; }
.footer-inner a { color: #9aa4a9; border-bottom: 1px solid rgba(154, 164, 169, .3); }
.footer-inner a:hover { color: var(--accent); border-color: var(--accent); }

/* ----------------------------------------------------------- inner pages */

.page-main { position: relative; z-index: 1; padding-bottom: 46px; }
.page-hero { padding: 62px 0 34px; }
.page-hero h1 { margin: 0 0 12px; font-size: clamp(2.6rem, 4.6vw, 4rem); line-height: 1.05; }
.page-hero p { margin: 0; max-width: 760px; color: var(--muted); font-size: 1.08rem; }

.panel {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--panel-a), var(--panel-b));
  box-shadow: var(--shadow);
}
.panel + .panel { margin-top: 20px; }
.panel-body { padding: 30px; }
.panel h2 { margin: 0 0 10px; font-size: 1.95rem; }
.panel h3 { margin: 0 0 6px; font-size: 1.2rem; }
.panel p { color: var(--body); }
.panel p:last-child { margin-bottom: 0; }

.downloads-layout { display: grid; grid-template-columns: 1.45fr .8fr; gap: 20px; align-items: start; }
.download-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 22px; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid rgba(83, 201, 197, .46);
  border-radius: 9px;
  color: #dcebe9;
  font-size: .96rem;
  background: linear-gradient(180deg, rgba(28, 89, 93, .62), rgba(17, 60, 66, .6));
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.button:hover { border-color: var(--accent); transform: translateY(-1px); }
.button.secondary { border-color: var(--border); background: rgba(12, 27, 35, .68); color: #c7c3b9; }
.button.secondary:hover { border-color: var(--gold); }

.version-list { display: grid; gap: 11px; margin-top: 22px; }
.version-item {
  display: grid;
  grid-template-columns: 152px 1fr;
  gap: 24px;
  padding: 19px 21px;
  border: 1px solid var(--border-soft);
  border-radius: 11px;
  background: var(--panel-inner);
}
.version-item strong { font-size: 1.24rem; font-weight: 400; display: block; }
.version-date { color: var(--muted); font-size: .84rem; margin-top: 2px; }
.version-item p { margin: 0; font-size: .93rem; }
.version-item ul { margin: 0; padding-left: 18px; font-size: .93rem; color: var(--body); display: grid; gap: 5px; }

.notice {
  padding: 16px 18px;
  margin: 18px 0 0;
  border-left: 3px solid var(--gold);
  background: rgba(72, 53, 29, .16);
  color: #bcb3a4;
  border-radius: 0 8px 8px 0;
  font-size: .93rem;
  line-height: 1.55;
}
.notice.cyan { border-left-color: var(--accent); background: rgba(24, 68, 72, .18); color: #b2c6c8; }
.notice strong { color: var(--heading); font-weight: 600; }

.docs-layout { display: grid; grid-template-columns: 262px 1fr; gap: 20px; align-items: start; }
.docs-toc { position: sticky; top: calc(var(--header-h) + 20px); padding: 20px; }
.docs-toc a { display: block; padding: 9px 11px; color: #a7b0b3; border-radius: 7px; font-size: .95rem; }
.docs-toc a:hover { color: var(--heading); background: rgba(83, 201, 197, .09); }
.docs-content { display: grid; gap: 20px; }
.docs-content section { scroll-margin-top: calc(var(--header-h) + 20px); }
.docs-content ul { color: var(--body); padding-left: 20px; display: grid; gap: 6px; }
.docs-content dl { margin: 14px 0 0; display: grid; gap: 12px; }
.docs-content dt { color: var(--heading); font-family: var(--serif); font-size: 1.02rem; }
.docs-content dd { margin: 3px 0 0; color: var(--body); font-size: .94rem; }

.code {
  overflow-x: auto;
  padding: 15px 17px;
  margin: 14px 0 0;
  border: 1px solid rgba(83, 201, 197, .16);
  border-radius: 9px;
  color: #b8d4d2;
  background: #05121c;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .89rem;
  line-height: 1.6;
  white-space: pre;
}


/* Inline links in running text. The global rule is `a { color: inherit }`,
   which left links in prose visually identical to the text around them — you
   could not tell they were clickable. Buttons, nav and card links are excluded:
   they already read as controls. */
.page-hero p a,
.panel p a,
.panel dd a,
.notice a,
.docs-content li a,
.version-item a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(83, 201, 197, .5);
  transition: color .18s ease, text-decoration-color .18s ease;
}
.page-hero p a:hover,
.panel p a:hover,
.panel dd a:hover,
.notice a:hover,
.docs-content li a:hover,
.version-item a:hover {
  color: var(--accent-strong);
  text-decoration-color: var(--accent-strong);
}

/* inline code */
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .875em;
  color: #a9d6d2;
  background: rgba(6, 26, 38, .8);
  border: 1px solid rgba(83, 201, 197, .16);
  border-radius: 5px;
  padding: 1px 5px;
  white-space: nowrap;
}
.notice code, .version-item code { background: rgba(4, 16, 26, .6); }

/* aside release version sits tighter than the hero one */
aside .release-version { margin-bottom: 10px; }
aside .panel + .panel { margin-top: 20px; }

/* mods gallery */
.mod-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.mod-card { overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s ease, transform .2s ease; }
.mod-card:hover { border-color: rgba(199, 157, 97, .5); transform: translateY(-3px); }
.mod-card img { width: 100%; aspect-ratio: 8 / 3; object-fit: cover; border-bottom: 1px solid rgba(199, 157, 97, .18); }
.mod-card-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.mod-card h2 { margin: 0 0 6px; font-size: 1.5rem; }
.mod-card p { margin: 0 0 auto; font-size: .93rem; line-height: 1.6; }
.mod-tagline { color: var(--gold) !important; font-size: .95rem !important; margin: 0 0 10px !important; flex: none; }
.tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
/* one uniform tag style — mods are shown as peers, so no tag is highlighted */
.tag { border: 1px solid rgba(83, 201, 197, .32); border-radius: 5px; padding: 4px 8px; color: #8fd3cf; font-size: .74rem; letter-spacing: .02em; }
.mod-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.mod-links .button { min-height: 40px; padding: 0 15px; font-size: .9rem; }

/* -------------------------------------------------------------- responsive */

@media (max-width: 1000px) {
  .menu-button { display: block; }
  .nav {
    display: none;
    position: absolute;
    top: var(--header-h);
    left: 20px; right: 20px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(6, 22, 38, .98);
    box-shadow: var(--shadow);
  }
  .nav.open { display: grid; }
  .nav a { padding: 11px 13px; }
  .nav a.active::after { display: none; }

  .hero-wrap { --art-bottom: 30px; }
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy { padding: 54px 0 300px; }
  .hero-art {
    top: auto;
    bottom: calc(-1 * var(--art-bottom));
    right: 50%;
    transform: translateX(50%);
    width: 128%;
    height: 380px;
  }
  .release-grid { grid-template-columns: 1fr; gap: 18px; }
  .docs-grid { grid-template-columns: 1fr 1fr; }
  .downloads-layout, .docs-layout { grid-template-columns: 1fr; }
  .docs-toc { position: static; }
  .mod-preview-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 660px) {
  .container { width: min(calc(100% - 28px), var(--max)); }
  .hero-copy { padding: 42px 0 240px; }
  .hero h1 { font-size: 3rem; }
  .hero-art { height: 300px; width: 150%; }
  .feature-inner { padding: 24px 20px; }
  .section-link { position: static; display: inline-flex; margin-bottom: 14px; }
  .release-version { font-size: 2.3rem; }
  .docs-grid, .mod-grid { grid-template-columns: 1fr; }
  .mod-preview-grid { grid-template-columns: 1fr; }

  .doc-mini { min-height: auto; }
  .panel-body { padding: 24px 20px; }
  .version-item { grid-template-columns: 1fr; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}