@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --ink: #e8e3d5;
  --muted: #aaa995;
  --gold: #c6a66a;
  --gold-bright: #e0c58b;
  --panel: rgba(13, 19, 17, .88);
  --line: rgba(198, 166, 106, .35);
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: Inter, Arial, sans-serif;
  background:
    linear-gradient(180deg, rgba(5,10,9,.58), rgba(5,10,9,.88)),
    radial-gradient(ellipse at 50% 28%, rgba(70,91,69,.42), transparent 58%),
    repeating-radial-gradient(ellipse at 12% 88%, transparent 0 34px, rgba(183,171,130,.08) 35px 36px, transparent 37px 68px),
    linear-gradient(135deg, #26352b, #111a18 54%, #20291f);
  background-attachment: fixed;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .17;
  background-image:
    linear-gradient(180deg, rgba(7,13,12,.35), rgba(7,13,12,.72)),
    url("https://store.bistudio.com/cdn/shop/files/landscape-wildlands_4k_a97725c2-bcae-4c38-a647-004122b9d604.png?v=1717147591&width=1946"),
    url("https://barronbucket.nyc3.digitaloceanspaces.com/screenshot/5130/pue6b4b2a746ed40e1af829d1fa82daa10-1559056297-4655791-screenshot-original.jpg"),
    url("https://static.wixstatic.com/media/15eb5d_9d593e7ae0d149b7bdc53a594be26daa~mv2.webp/v1/fill/w_900%2Ch_500%2Cal_c%2Cq_85%2Cenc_avif%2Cquality_auto/15eb5d_9d593e7ae0d149b7bdc53a594be26daa~mv2.webp");
  background-size: cover, cover, 46vw auto, 42vw auto;
  background-position: center, center, right 12% top 8%, left 8% bottom 5%;
  background-repeat: no-repeat;
  filter: saturate(.62) contrast(1.08);
  mix-blend-mode: screen;
}

body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  opacity: .23;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
.site-header { position: relative; z-index: 1; border-bottom: 1px solid var(--line); background: rgba(7,13,12,.76); }
.header-inner { width: min(1120px, calc(100% - 40px)); margin: auto; padding: 26px 0 0; }
.brand { text-align: center; padding: 0 0 22px; }
.brand-mark { color: var(--gold); font-size: 14px; letter-spacing: .45em; }
.brand h1 {
  margin: 7px 0 3px; font: 800 clamp(2rem, 5vw, 3.6rem)/1.05 Cinzel, Georgia, serif;
  letter-spacing: .12em; text-transform: uppercase; color: #eee8d9;
  text-shadow: 0 3px 24px rgba(0,0,0,.8);
}
.brand p { margin: 9px 0 0; color: var(--muted); font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; }
nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; }
nav a {
  display: inline-block; padding: 15px 25px 17px; color: #c8c6b8;
  text-decoration: none; text-transform: uppercase; letter-spacing: .16em;
  font-size: .76rem; font-weight: 700; border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s, background .2s;
}
nav a:hover, nav a.active { color: var(--gold-bright); border-bottom-color: var(--gold); background: rgba(198,166,106,.07); }
main { position: relative; z-index: 1; width: min(1000px, calc(100% - 40px)); margin: 0 auto; padding: 76px 0 90px; }
.eyebrow { color: var(--gold); letter-spacing: .32em; font-size: .7rem; font-weight: 700; text-transform: uppercase; }
h2 { margin: 14px 0 18px; font: 700 clamp(2rem, 5vw, 3.4rem)/1.12 Cinzel, Georgia, serif; letter-spacing: .035em; }
.lead { max-width: 680px; color: #c5c7ba; font-size: 1.05rem; line-height: 1.8; }
.panel {
  margin-top: 38px; padding: 30px; border: 1px solid var(--line);
  background: var(--panel); box-shadow: 0 18px 60px rgba(0,0,0,.28);
  position: relative;
}
.panel::before, .panel::after { content: "✦"; position: absolute; color: var(--gold); opacity: .8; font-size: 13px; }
.panel::before { top: 12px; left: 14px; } .panel::after { bottom: 12px; right: 14px; }
.panel h3 { margin: 0 0 12px; color: var(--gold-bright); font: 600 1.15rem Cinzel, Georgia, serif; letter-spacing: .08em; }
.panel p, .panel li { color: #c1c4b7; line-height: 1.75; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.button {
  display: inline-block; padding: 13px 20px; border: 1px solid var(--gold);
  color: #171b15; background: var(--gold); text-decoration: none;
  text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 800;
}
.button.secondary { color: var(--gold-bright); background: transparent; }
.button:hover { background: var(--gold-bright); border-color: var(--gold-bright); color: #171b15; }
footer { position: relative; z-index: 1; padding: 22px; border-top: 1px solid var(--line); color: #858b7e; text-align: center; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; }
@media (max-width: 600px) {
  .header-inner { width: min(100% - 24px, 1120px); }
  nav a { padding: 13px 11px 15px; font-size: .68rem; }
  main { width: calc(100% - 28px); padding-top: 52px; }
  .panel { padding: 25px 20px; }
}


/* =========================================================
   MAPS NAVIGATION
   The dropdown opens on hover and keyboard focus.
   ========================================================= */
nav .nav-dropdown { position: relative; display: inline-flex; align-items: stretch; }
nav .nav-dropdown > a { display: inline-flex; align-items: center; }
nav .map-menu { position: relative; display: flex; align-items: center; }
nav .map-menu summary {
  display: flex; align-items: center; justify-content: center;
  width: 31px; height: 100%; min-height: 48px; margin-left: -15px;
  padding: 0 10px 2px 4px; color: #d2c5ac; cursor: pointer;
  list-style: none; user-select: none; font-size: 1rem;
  border-bottom: 2px solid transparent;
}
nav .map-menu summary::-webkit-details-marker { display: none; }
nav .map-menu summary:hover,
nav .map-menu[open] summary { color: #f2d59e; background: rgba(188,126,58,.12); }
nav .dropdown-menu {
  display: none; position: absolute; top: calc(100% + 1px); left: -8px; z-index: 200;
  min-width: 220px; padding: 8px 0; background: rgba(18,13,9,.99);
  border: 1px solid rgba(207,159,88,.7);
  box-shadow: 0 18px 42px rgba(0,0,0,.75);
}
nav .map-menu[open] .dropdown-menu { display: block; }
nav .dropdown-menu a {
  display: block; position: relative; z-index: 201;
  padding: 13px 18px; border: 0; white-space: nowrap;
  text-align: left; letter-spacing: .1em; pointer-events: auto;
}
nav .dropdown-menu a:hover,
nav .dropdown-menu a.active { background: rgba(198,166,106,.18); color: #ffe2ad; }

/* =========================================================
   HOME / VIKING HALL BACKDROP
   Uses a local SVG illustration, so it works offline.
   ========================================================= */
body.page-home::after {
  opacity: .56;
  background-image:
    linear-gradient(180deg, rgba(5,10,9,.28), rgba(5,10,9,.66)),
    url("images/viking-hall.svg");
  background-size: cover, cover;
  background-position: center, center 54%;
  background-repeat: no-repeat;
  filter: saturate(.78) contrast(1.06);
  mix-blend-mode: normal;
}

/* =========================================================
   MAP-SPECIFIC BACKDROPS
   Each map page uses its own local illustration.
   ========================================================= */
body.map-chernarus::after,
body.map-deerisle::after,
body.map-arsteinen::after,
body.map-pripyat::after {
  opacity: .58;
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat;
  filter: saturate(.78) contrast(1.08);
  mix-blend-mode: normal;
}
body.map-chernarus::after {
  background-image: linear-gradient(180deg, rgba(5,10,9,.25), rgba(5,10,9,.68)), url("images/chernarus.svg");
}
body.map-deerisle::after {
  background-image: linear-gradient(180deg, rgba(5,10,9,.22), rgba(5,10,9,.66)), url("images/deerisle.svg");
}
body.map-arsteinen::after {
  background-image: linear-gradient(180deg, rgba(5,10,9,.24), rgba(5,10,9,.68)), url("images/arsteinen.svg");
}
body.map-pripyat::after {
  background-image: linear-gradient(180deg, rgba(5,10,9,.22), rgba(5,10,9,.70)), url("images/pripyat.svg");
}

/* MAPS INDEX: responsive cards linking to each individual map page. */
.map-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px; margin-top: 30px;
}
.map-card {
  display: flex; min-height: 180px; flex-direction: column; justify-content: flex-end;
  padding: 22px; border: 1px solid var(--line); color: var(--ink);
  text-decoration: none; background: rgba(10,16,14,.78);
  box-shadow: 0 12px 34px rgba(0,0,0,.25); transition: transform .2s, border-color .2s;
}
.map-card:hover { transform: translateY(-3px); border-color: var(--gold-bright); }
.map-card h3 { margin: 0 0 7px; color: var(--gold-bright); font: 600 1.35rem Cinzel, Georgia, serif; }
.map-card p { margin: 0; color: #c1c4b7; line-height: 1.6; }
.map-card.chernarus { background-image: linear-gradient(0deg, rgba(5,10,9,.92), rgba(5,10,9,.12)), url("images/chernarus.svg"); background-size: cover; }
.map-card.deerisle { background-image: linear-gradient(0deg, rgba(5,10,9,.92), rgba(5,10,9,.12)), url("images/deerisle.svg"); background-size: cover; }
.map-card.arsteinen { background-image: linear-gradient(0deg, rgba(5,10,9,.92), rgba(5,10,9,.12)), url("images/arsteinen.svg"); background-size: cover; }
.map-card.pripyat { background-image: linear-gradient(0deg, rgba(5,10,9,.92), rgba(5,10,9,.12)), url("images/pripyat.svg"); background-size: cover; }
.map-details { margin-top: 28px; }
.map-details ul { padding-left: 22px; }
@media (max-width: 680px) {
  nav { gap: 0; }
  nav a { padding: 12px 11px; font-size: .68rem; }
  nav .dropdown-menu { left: auto; right: 0; }
  .map-grid { grid-template-columns: 1fr; }
}


/* FULL-SITE VIKING / VALHALLA THEME */
:root {
  --ink: #eee7d8; --muted: #c0b49c; --gold: #c89b55;
  --gold-bright: #efd19a; --panel: rgba(16,13,10,.86);
  --line: rgba(200,155,85,.48);
}
body {
  background-color: #100f0d;
  background-image: radial-gradient(ellipse at 50% 16%,rgba(151,83,34,.19),transparent 48%),
    repeating-linear-gradient(90deg,rgba(91,56,31,.055) 0 3px,transparent 3px 46px),
    linear-gradient(180deg,#21180f 0%,#111512 58%,#0b100e 100%);
}
.site-header {
  background: linear-gradient(180deg,rgba(20,13,8,.97),rgba(10,14,12,.91));
  border-bottom: 1px solid rgba(207,159,88,.58);
  box-shadow: 0 10px 35px rgba(0,0,0,.42);
}
.brand-mark { color:#d6a75d; text-shadow:0 0 18px rgba(218,139,54,.28); }
.brand h1 { color:#f1e4c9; text-shadow:0 3px 24px rgba(0,0,0,.95),0 0 26px rgba(183,107,43,.18); }
.brand p { color:#c6b18c; }
nav a { color:#d2c5ac; }
nav a:hover, nav a.active { color:#f2d59e; border-bottom-color:#d0a05a; background:rgba(188,126,58,.12); }
nav .dropdown-menu { background:rgba(18,13,9,.98); border-color:rgba(207,159,88,.58); }
main { text-shadow:0 2px 12px rgba(0,0,0,.42); }
.eyebrow { color:#d7ad6b; }
h2 { color:#f0e4ce; text-shadow:0 3px 24px rgba(0,0,0,.8); }
.lead { color:#ded2bd; }
.panel {
  background:linear-gradient(135deg,rgba(41,27,16,.88),rgba(11,16,14,.91)),
    repeating-linear-gradient(0deg,rgba(170,120,69,.045) 0 2px,transparent 2px 12px);
  border-color:rgba(201,157,91,.5);
  box-shadow:0 20px 65px rgba(0,0,0,.48),inset 0 1px rgba(255,224,173,.05);
}
.panel h3,.map-card h3 { color:#e8c58d; }
.panel p,.panel li { color:#d1c6b4; }
.button {
  background:linear-gradient(180deg,#e2bd7c,#b77d3e); border-color:#e0b878;
  color:#1b140d; box-shadow:inset 0 1px rgba(255,255,255,.22),0 5px 18px rgba(0,0,0,.22);
}
.button.secondary { color:#efd19a; background:rgba(15,13,10,.48); }
footer { background:rgba(10,12,10,.72); color:#b9a98e; border-top-color:rgba(207,159,88,.42); }
.map-card { border-color:rgba(207,159,88,.5); box-shadow:0 15px 40px rgba(0,0,0,.42),inset 0 0 0 1px rgba(255,224,173,.035); }
.map-card p { color:#e1d5c2; }

/* HOMEPAGE: make the locally stored Viking great hall the dominant backdrop. */
body.page-home::after {
  opacity:.78;
  background-image:linear-gradient(180deg,rgba(5,7,6,.10),rgba(5,8,7,.54)),url("images/viking-hall.svg");
  background-position:center,center 56%;
}
body.page-home main { padding-top:82px; }
body.page-home .panel { background:rgba(14,12,9,.78); }

/* MAP PAGES: keep each map's own landscape artwork. */
body.map-chernarus::after,body.map-deerisle::after,
body.map-arsteinen::after,body.map-pripyat::after { opacity:.68; }


/* CLICKABLE MAPS MENU
   The arrow is a native HTML disclosure control: click/tap to open,
   click/tap again to close. The Maps label itself still opens maps.html. */
.site-header { position: relative; z-index: 100; }
.site-header, .header-inner, nav { overflow: visible; }
nav .nav-dropdown { z-index: 150; }
nav .map-menu[open] { z-index: 160; }
nav .dropdown-menu { pointer-events: auto; }
@media (max-width: 680px) {
  nav .dropdown-menu { left: auto; right: -2px; }
  nav .map-menu summary { min-height: 44px; }
}

/* =========================================================
   THE GREAT HALL — richer locally stored Norse longhouse art.
   Timber roof, carved pillars, shields, banners, long tables,
   benches, braziers and a central stone hearth.
   ========================================================= */
body.page-home::after {
  opacity: .88;
  background-image:
    linear-gradient(180deg, rgba(4,5,4,.08), rgba(5,7,6,.34) 58%, rgba(5,7,6,.70)),
    url("images/viking-hall.svg");
  background-size: cover, cover;
  background-position: center, center 53%;
  filter: saturate(.95) contrast(1.08);
}
body.page-home main { padding-top: 68px; }
body.page-home .panel {
  background: linear-gradient(135deg, rgba(22,14,9,.82), rgba(9,12,10,.83));
  border-color: rgba(218,171,103,.62);
}


/* CLICK-TO-OPEN MAPS MENU: the Maps label itself is the disclosure control. */
nav details.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}
nav details.nav-dropdown > summary {
  display: inline-flex;
  align-items: center;
  padding: 15px 25px 17px;
  color: #d2c5ac;
  cursor: pointer;
  list-style: none;
  user-select: none;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .76rem;
  font-weight: 700;
  border-bottom: 2px solid transparent;
}
nav details.nav-dropdown > summary::-webkit-details-marker { display: none; }
nav details.nav-dropdown > summary:hover,
nav details.nav-dropdown[open] > summary {
  color: #f2d59e;
  border-bottom-color: #d0a05a;
  background: rgba(188,126,58,.12);
}
nav details.nav-dropdown .dropdown-menu {
  top: 100%;
  left: 0;
  right: auto;
}
nav details.nav-dropdown .dropdown-menu a { display: block; }
@media (max-width: 680px) {
  nav details.nav-dropdown > summary { padding: 12px 11px; font-size: .68rem; }
  nav details.nav-dropdown .dropdown-menu { left: auto; right: 0; }
}

/* Great Hall atmosphere is shared by the home and community utility pages. */
body.page-community::after {
  opacity: .78;
  background-image:
    linear-gradient(180deg, rgba(4,5,4,.12), rgba(5,7,6,.62)),
    url("images/viking-hall.svg");
  background-size: cover, cover;
  background-position: center, center 53%;
  background-repeat: no-repeat;
  filter: saturate(.92) contrast(1.08);
  mix-blend-mode: normal;
}

/* LIVE SERVER STATUS PAGE */
.status-overview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin: 34px 0 22px;
  padding: 20px 24px;
  border: 1px solid rgba(218,171,103,.62);
  background: linear-gradient(120deg, rgba(42,27,15,.9), rgba(10,14,12,.91));
  box-shadow: 0 16px 44px rgba(0,0,0,.4);
}
.status-overview-copy { display: flex; align-items: center; gap: 15px; }
.status-rune { color: var(--gold-bright); font: 2.4rem Cinzel, Georgia, serif; }
.status-overview-title { color: #f0dfc2; font: 700 1.05rem Cinzel, Georgia, serif; letter-spacing: .06em; }
.status-overview-subtitle { margin-top: 5px; color: #d1c6b4; font-size: .9rem; }
.status-updated { color: #bfb29d; font-size: .75rem; text-align: right; }
.status-updated strong { display: block; margin-top: 5px; color: #e7d7bd; font-weight: 600; }
.server-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.server-card {
  min-width: 0;
  padding: 23px;
  border: 1px solid rgba(201,157,91,.5);
  background: linear-gradient(145deg, rgba(31,22,14,.94), rgba(9,14,12,.94));
  box-shadow: 0 15px 40px rgba(0,0,0,.4), inset 0 1px rgba(255,224,173,.04);
}
.server-card.is-online { border-left: 3px solid #78a76e; }
.server-card.is-offline { border-left: 3px solid #bd6658; }
.server-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.server-card h3 { margin: 0; color: #e8c58d; font: 600 1.3rem Cinzel, Georgia, serif; letter-spacing: .04em; }
.status-pill {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px solid currentColor;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .12em;
}
.status-pill.online { color: #a7d49b; background: rgba(78,130,66,.13); }
.status-pill.offline { color: #e5a095; background: rgba(150,57,45,.16); }
.status-pill.pending { color: #d9bd88; }
.server-name { min-height: 42px; margin: 13px 0 18px; color: #c9bead; font-size: .82rem; line-height: 1.55; overflow-wrap: anywhere; }
.server-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; padding: 15px 0; border-top: 1px solid rgba(201,157,91,.22); border-bottom: 1px solid rgba(201,157,91,.22); }
.server-stat { display: flex; min-width: 0; flex-direction: column; gap: 7px; }
.server-stat-label { color: #a99a80; font-size: .61rem; font-weight: 700; letter-spacing: .14em; }
.server-stat strong { color: #f0dfc2; font-size: .95rem; overflow-wrap: anywhere; }
.server-card-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 15px; color: #a99f8e; font-size: .68rem; }
.server-card-bottom a { color: #e2bd7c; text-decoration: none; border-bottom: 1px solid rgba(226,189,124,.5); }
.server-card-bottom a:hover { color: #fff0d0; }
.server-error { margin: 13px 0 0; color: #e5a095; font-size: .78rem; line-height: 1.5; }
.api-error { margin-top: 20px; padding: 14px 18px; border: 1px solid rgba(210,105,88,.55); color: #f0b1a5; background: rgba(90,28,22,.38); }
.status-footnote { margin-top: 22px; color: #b8ad9b; font-size: .76rem; line-height: 1.7; }
@media (max-width: 680px) {
  .status-overview { align-items: flex-start; flex-direction: column; padding: 18px; }
  .status-updated { text-align: left; }
  .status-grid, .server-grid { grid-template-columns: 1fr; }
  .server-card { padding: 20px; }
}

nav details.nav-dropdown > summary { width: auto; height: auto; min-height: 0; margin: 0; }

/* Compact live server status line on each individual map page. */
.map-live-status{display:flex;align-items:center;flex-wrap:wrap;gap:.55rem;width:fit-content;max-width:100%;margin:1rem 0 1.5rem;padding:.7rem 1rem;border:1px solid rgba(196,157,91,.55);border-radius:6px;background:rgba(12,16,15,.82);color:var(--text,#eee8dc);text-decoration:none;box-shadow:0 5px 18px rgba(0,0,0,.25);transition:border-color 160ms ease,background 160ms ease}
.map-live-status:hover{border-color:#d6ad69;background:rgba(22,27,24,.94)}
.map-live-status .live-dot{width:.65rem;height:.65rem;flex:0 0 .65rem;border-radius:50%;background:#a9a9a9;box-shadow:0 0 8px rgba(169,169,169,.55)}
.map-live-status.is-online .live-dot{background:#55d66b;box-shadow:0 0 9px rgba(85,214,107,.8)}
.map-live-status.is-offline .live-dot{background:#e05a50;box-shadow:0 0 9px rgba(224,90,80,.65)}
.map-live-status .live-label{font-weight:700;letter-spacing:.025em}
.map-live-status .live-separator{color:rgba(220,190,140,.75)}
.map-live-status .live-detail{color:#e0d8ca}
.map-live-status .live-hint{margin-left:.25rem;color:#c9a66d;font-size:.82em}



/* MAPS MENU: hover/focus opens the submenu; clicking Maps navigates to maps.html. */
nav .nav-dropdown.map-menu {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}
nav .nav-dropdown.map-menu > a {
  display: inline-flex;
  align-items: center;
}
nav .nav-dropdown.map-menu .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 300;
  min-width: 210px;
  padding: 8px 0;
  background: rgba(18,13,9,.98);
  border: 1px solid rgba(207,159,88,.7);
  box-shadow: 0 18px 42px rgba(0,0,0,.75);
}
nav .nav-dropdown.map-menu:hover .dropdown-menu,
nav .nav-dropdown.map-menu:focus-within .dropdown-menu {
  display: block;
}
nav .nav-dropdown.map-menu .dropdown-menu a {
  display: block;
  padding: 13px 18px;
  border: 0;
  white-space: nowrap;
  text-align: left;
  letter-spacing: .1em;
}
@media (max-width: 680px) {
  nav .nav-dropdown.map-menu .dropdown-menu { left: auto; right: 0; }
}


/* DOWNLOADS: desktop wallpaper cards for each Valhalla Calling server. */
.download-section { margin-top: 44px; }
.section-heading { margin-bottom: 24px; }
.section-heading h3 {
  margin: 10px 0 8px;
  color: var(--gold-bright);
  font: 700 clamp(1.55rem, 3vw, 2.25rem)/1.2 Cinzel, Georgia, serif;
}
.wallpaper-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.wallpaper-card {
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(10, 15, 13, .9);
  box-shadow: 0 14px 38px rgba(0,0,0,.32);
}
.wallpaper-preview {
  min-height: 180px;
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--line);
}
.wallpaper-chernarus .wallpaper-preview { background-image: url("downloads/Chernarusl_thumbnail_1024x640.jpg"); }
.wallpaper-deerisle .wallpaper-preview { background-image: url("downloads/DeerIsle_thumbnail_1024x640.jpg"); }
.wallpaper-arsteinen .wallpaper-preview { background-image: url("downloads/Arsteinenl_thumbnail_1024x640.jpg"); }
.wallpaper-pripyat .wallpaper-preview { background-image: url("downloads/Pripyat_thumbnail_1024x640.jpg"); }
.wallpaper-card-content { padding: 20px; }
.wallpaper-card h4 {
  margin: 0 0 7px;
  color: var(--gold-bright);
  font: 700 1.2rem Cinzel, Georgia, serif;
}
.wallpaper-card p { margin: 0 0 18px; color: #c1c4b7; line-height: 1.6; }
.wallpaper-card .button { margin-bottom: 12px; }
.download-meta { display: block; color: var(--muted); font-size: .72rem; letter-spacing: .04em; }
@media (max-width: 680px) {
  .wallpaper-grid { grid-template-columns: 1fr; }
  .wallpaper-preview { min-height: 155px; }
}