/* Derafsh website (docs/decisions/0054). Colours and surfaces follow UI kit v4 (art/ui4/ui4.css, decision 0051):
   thin near-black outlines, slate frames around light paper, wet gloss only on buttons, firuzeh and gold accents.
   The page itself sits on lapis night; the map and cards are the bright things on it. One look in every theme. */

@font-face { font-family: "Vazirmatn"; src: url("/fonts/Vazirmatn-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("/fonts/Vazirmatn-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Baloo Bhaijaan 2"; src: url("/fonts/BalooBhaijaan2-Variable.ttf") format("truetype"); font-weight: 400 800; font-display: swap; }

:root {
  --ol: #16181c;
  --slate-hi: #5f7688; --slate: #4a6074; --slate-dk: #3d5062;
  --paper-hi: #fbfaf6; --paper: #ecebe5; --paper-dk: #d6d3ca;
  --firuzeh-hi: #7fe3dc; --firuzeh: #23aaa2; --firuzeh-lo: #158a83; --firuzeh-dk: #0b5c57;
  --gold-hi: #fff07a; --gold: #f8b820; --gold-lo: #de8a07; --gold-dk: #9a5304;
  --green-hi: #c6f77e; --green: #59c22f; --green-lo: #2f8f17; --green-dk: #1f6a0e;
  --red: #e8392c; --red-lo: #b81f16;
  --night: #14243b; --night-2: #1b2f4b; --night-3: #243c5e; --night-line: #33507a;
  --text: #f2eee4; --text-dim: #b9c3d3; --ink: #22262d; --ink-dim: #545a63;
  --display: "Baloo Bhaijaan 2", "Vazirmatn", system-ui, sans-serif;
  --body: "Vazirmatn", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--night); color: var(--text); font-family: var(--body); font-size: 17px; line-height: 1.85;
  -webkit-text-size-adjust: 100%; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.2; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(36px, 6.4vw, 64px); }
h2 { font-size: clamp(28px, 4.4vw, 42px); }
h3 { font-size: 22px; }
p { margin: 0; }
a { color: var(--firuzeh-hi); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 3px; }
.skip { position: absolute; inset-inline-start: 8px; top: -60px; background: var(--gold); color: var(--ol); padding: 8px 14px; border-radius: 10px; z-index: 30; }
.skip:focus { top: 8px; }

.wrap { max-width: 1160px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }
.section { padding-block: clamp(48px, 8vw, 96px); }
.section-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; max-width: 720px; }
.eyebrow { font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--gold); }
.eyebrow a { color: inherit; }
.lede { color: var(--text-dim); font-size: 18px; max-width: 62ch; }

/* ---- buttons (ui4 .btn) ---- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px;
  padding: 8px 26px 12px; border: 3px solid var(--ol); border-radius: 18px; cursor: pointer; text-decoration: none;
  font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 1.1; color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,.35);
  background: linear-gradient(180deg, var(--hi) 0%, var(--c) 45%, var(--c) 80%, var(--lo) 100%);
  box-shadow: inset 0 -5px 0 var(--dk), inset 0 2px 0 rgba(255,255,255,.45), 0 3px 0 var(--ol); }
.btn::before { content: ""; position: absolute; left: 8px; right: 8px; top: 4px; height: 38%; pointer-events: none;
  border-radius: 12px 12px 8px 8px; background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.08)); }
.btn:active { transform: translateY(3px); box-shadow: inset 0 -2px 0 var(--dk), inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 var(--ol); }
.btn.gold { --hi: var(--gold-hi); --c: var(--gold); --lo: var(--gold-lo); --dk: var(--gold-dk); color: var(--ol); text-shadow: 0 1px 0 rgba(255,255,255,.4); }
.btn.green { --hi: var(--green-hi); --c: var(--green); --lo: var(--green-lo); --dk: var(--green-dk); }
.btn.teal { --hi: var(--firuzeh-hi); --c: var(--firuzeh); --lo: var(--firuzeh-lo); --dk: var(--firuzeh-dk); }
.btn.sm { min-height: 42px; font-size: 17px; padding: 5px 16px 9px; border-radius: 14px; }
.btn.lg { min-height: 60px; font-size: 23px; padding: 10px 32px 14px; }
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: transform .1s, filter .1s; }
  .btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
}

/* ---- header ---- */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(20,36,59,.94);
  border-bottom: 3px solid var(--ol); box-shadow: 0 2px 0 var(--night-line); backdrop-filter: blur(6px); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); background: var(--night); z-index: 21; }
.top-in { max-width: 1160px; margin: 0 auto; padding: 8px var(--gutter-r) 8px var(--gutter); display: flex; align-items: center; gap: 18px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--gold); font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1; flex: none; }
.brand img { border-radius: 12px; border: 2px solid var(--ol); }
.nav { display: flex; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { color: var(--text); text-decoration: none; font-weight: 700; font-size: 16px; padding: 6px 12px; border-radius: 10px; white-space: nowrap; }
.nav a:hover { background: var(--night-3); }
.nav a[aria-current="page"] { background: var(--night-3); box-shadow: inset 0 -3px 0 var(--gold); }
.top-cta { flex: none; }
@media (max-width: 760px) {
  .top-in { flex-wrap: wrap; gap: 6px 12px; }
  .brand { font-size: 26px; }
  .brand img { width: 36px; height: 36px; }
  .top-cta { margin-inline-start: auto; }
  .nav { order: 3; flex-basis: 100%; }
}

/* ---- home hero ---- */
.hero { position: relative; overflow: hidden; background:
  radial-gradient(70% 90% at 30% 20%, rgba(248,184,32,.18), transparent 60%),
  radial-gradient(60% 80% at 85% 90%, rgba(35,170,162,.16), transparent 60%), var(--night); border-bottom: 3px solid var(--ol); }
/* Rostam is big (Hesam: twice the size): a waist-up bust anchored to the hero's bottom-left edge, under the text. */
/* a full-screen section under the sticky header (site.js keeps --top-h at the header's height) */
.hero-in { position: relative; display: grid; grid-template-columns: minmax(0, 560px); justify-content: start; align-content: center;
  min-height: calc(100svh - var(--top-h, 62px));
  padding-top: clamp(28px, 5vw, 56px); z-index: 1; }
.hero-text { display: flex; flex-direction: column; gap: 18px; padding-bottom: clamp(32px, 6vw, 72px); min-width: 0; }
.wordmark { font-family: var(--display); font-weight: 800; font-size: clamp(84px, 15vw, 168px); line-height: .9; color: var(--gold);
  -webkit-text-stroke: 3px var(--ol); paint-order: stroke fill;
  text-shadow: 0 5px 0 var(--gold-dk), 0 8px 0 var(--ol), 0 14px 24px rgba(0,0,0,.45); }
.tagline { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 3.2vw, 32px); line-height: 1.35; }
.hero .lede { color: var(--text-dim); }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.promises { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.promises li { background: linear-gradient(180deg, #4a4e57, #2a2d34 60%); border: 2px solid var(--ol); border-radius: 12px;
  padding: 3px 12px; font-size: 15px; font-weight: 700; box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
/* As tall as the hero, top to bottom edge, and its left edge on the content's left edge, so the page has the same margin
   on both sides (Hesam). The image's own transparent strip before the mace (~6.8% of its width) is pulled back out. */
.hero-art { position: absolute; left: max(16px, calc((100% - 1160px) / 2 + 16px)); top: 0; bottom: -3px; margin: 0; z-index: 0;
  pointer-events: none; transform: translateX(-6.8%); }
.hero-art img { height: 100%; width: auto; max-width: none; filter: drop-shadow(0 12px 18px rgba(0,0,0,.5)); }
.hero-text { text-shadow: 0 2px 12px rgba(20,36,59,.9); }
/* a dusk on the text's side so the words stay readable where the cape runs under them */
.hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to left, rgba(20,36,59,.92) 0, rgba(20,36,59,.8) 34%, rgba(20,36,59,0) 58%); }
@media (max-width: 760px) {
  /* one phone screen: the words on top, Rostam rising from the bottom edge under them */
  .hero-in { grid-template-columns: 1fr; align-content: start; min-height: 0; height: calc(100svh - var(--top-h, 104px)); }
  .hero-text { padding-bottom: 0; gap: 14px; }
  .hero .lede, .hero .promises { display: none; }
  .hero-art { left: 0; right: 0; bottom: -3px; top: auto; transform: none; }
  .hero-art img { width: 100%; height: auto; }
  .hero::after { display: none; }
}

/* ---- the road: sticky map + stops ---- */
.road { background: linear-gradient(180deg, var(--night) 0, var(--night-2) 100%); overflow-x: clip; } /* the fanned deck never widens the page (clip keeps sticky working) */
.road-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.map-sticky { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 78px); }
.board { border: 3px solid var(--ol); border-radius: 22px; background: var(--slate); padding: 10px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.25), 0 6px 0 var(--ol); }
.map { position: relative; aspect-ratio: 16 / 9; border: 3px solid var(--ol); border-radius: 14px; overflow: hidden;
  background: #c9b37a url("/img/map-1024.webp") center / cover; }
@media (min-width: 900px) { .map { background-image: url("/img/map.webp"); } }
.map svg.roads { position: absolute; inset: 0; width: 100%; height: 100%; }
.roads .hw { stroke: #7a4a1c; stroke-width: .7; fill: none; stroke-linecap: round; stroke-dasharray: 1.6 1.1; }
.roads .bd { stroke: var(--red-lo); stroke-width: .6; fill: none; stroke-linecap: round; stroke-dasharray: 1 1.2; }
.city { position: absolute; width: 10.5%; transform: translate(-50%, -70%); pointer-events: none; }
.city img { width: 100%; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.city span { position: absolute; left: 50%; top: 92%; transform: translateX(-50%); white-space: nowrap; font-weight: 700;
  font-size: clamp(9px, 1.25vw, 14px); line-height: 1.5; color: #fff; background: rgba(22,24,28,.78); border: 1px solid var(--ol);
  border-radius: 8px; padding: 0 7px; }
.city.on span { background: var(--gold); color: var(--ol); }
.map-caravan { position: absolute; width: 7%; transform: translate(-50%, -85%); z-index: 2; pointer-events: none;
  filter: drop-shadow(0 3px 2px rgba(0,0,0,.4)); }
@media (prefers-reduced-motion: no-preference) {
  .map-caravan { transition: left 1.2s cubic-bezier(.5,0,.3,1), top 1.2s cubic-bezier(.5,0,.3,1); }
}
.map-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--paper-hi); margin-top: 8px; padding-inline: 4px; }
.map-legend i { display: inline-block; width: 22px; height: 0; border-top: 3px dashed #c8894a; vertical-align: middle; margin-inline-end: 6px; }
.map-legend i.bd { border-top-color: #ff7a6b; }
.stops { display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 0; list-style: none; }
/* With script on, the stops are a deck of same-size cards, like playing cards: the deck sticks beside (on a phone,
   under) the map while its track scrolls past, and each step brings the card from underneath onto the top.
   site.js sets --stack-top, --card-h and --n, and each card's data-pos (0 = on top). */
.deck-track.on .stops { position: relative; height: var(--card-h); display: block; }
/* Pinned (the usual case): the whole section, heading, map and deck, holds the screen while its track scrolls by, so
   nothing under the map is ever empty. If it does not fit the screen, the deck alone sticks under the map ("tall"). */
.road.pinned { padding-block: 0; }
.road.pinned .road-pin { height: calc(var(--n) * 46vh + 100svh - var(--pin-top)); }
.road.pinned .road-stage { position: sticky; top: var(--pin-top); height: calc(100svh - var(--pin-top)); display: flex; align-items: center; }
.road.pinned .road-stage > .wrap { width: 100%; }
.road.pinned .map-sticky { position: static; }
.road.pinned .section-head { margin-bottom: 18px; }
.deck-track.on.tall { height: calc(var(--n) * 46vh + var(--card-h)); }
.deck-track.on.tall .stops { position: sticky; top: var(--stack-top, 0px); }
.deck-track.on .stop { position: absolute; inset: 0; margin: 0; transform-origin: 50% 100%;
  transition: transform .45s cubic-bezier(.3,.7,.2,1), box-shadow .3s; }
.deck-track.on .stop[data-pos="0"] { z-index: 5; transform: none; }
.deck-track.on .stop[data-pos="1"] { z-index: 4; transform: translate(-7px, 9px) rotate(-1.6deg); }
.deck-track.on .stop[data-pos="2"] { z-index: 3; transform: translate(-13px, 17px) rotate(-3deg); }
.deck-track.on .stop[data-pos="3"] { z-index: 2; transform: translate(-18px, 24px) rotate(-4.2deg); }
.deck-track.on .stop[data-pos="4"] { z-index: 1; transform: translate(-22px, 30px) rotate(-5.2deg); }
.deck-track.on .stop:not([data-pos="0"]) .stop-body { visibility: hidden; } /* only the top card is read */
@media (prefers-reduced-motion: no-preference) {
  /* the card from underneath slides out to the side, then lands on top */
  .deck-track.on .stop.rise { animation: deck-rise .55s cubic-bezier(.3,.7,.2,1); }
  @keyframes deck-rise {
    0% { z-index: 4; transform: translate(-7px, 9px) rotate(-1.6deg); }
    45% { z-index: 4; transform: translate(-62%, 4px) rotate(-9deg); }
    55% { z-index: 6; transform: translate(-62%, 4px) rotate(-9deg); }
    100% { z-index: 6; transform: none; }
  }
}
.deck-count { position: absolute; z-index: 7; bottom: -14px; left: 50%; transform: translateX(-50%); font-weight: 700; font-size: 14px;
  color: #fff; background: linear-gradient(180deg, #4a4e57, #2a2d34); border: 2px solid var(--ol); border-radius: 10px; padding: 0 10px; }
.stop { border: 3px solid var(--ol); border-radius: 18px; background: linear-gradient(180deg, var(--paper-hi), #e9e6de); color: var(--ink);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.8), 0 5px 0 var(--ol); overflow: hidden; scroll-margin-top: 120px; box-sizing: border-box; }
.stop-head { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: linear-gradient(180deg, var(--slate-hi), var(--slate));
  color: #fff; border-bottom: 3px solid var(--gold); font-family: var(--display); font-weight: 800; font-size: 21px; }
.stop-head small { font-family: var(--body); font-weight: 700; font-size: 14px; color: var(--gold-hi); margin-inline-start: auto; }
.stop-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.stop-body p { color: var(--ink-dim); font-size: 16px; }
.stop-body h3 { color: var(--ink); }
.stop-art { display: flex; gap: 8px; align-items: end; }
.stop-art img { width: 22%; max-width: 96px; }
.stop.on { box-shadow: inset 0 0 0 2px rgba(255,255,255,.8), 0 5px 0 var(--ol), 0 0 0 4px var(--gold); }
@media (max-width: 899px) {
  .road-grid { grid-template-columns: 1fr; }
  .map-sticky { top: calc(env(safe-area-inset-top, 0px) + 104px); z-index: 3; }
  .road.pinned .section-head .lede { display: none; }
  .road.pinned .section-head { margin-bottom: 12px; gap: 4px; }
  .road.pinned .road-grid { gap: 14px; }
  .board { padding: 6px; border-radius: 16px; }
  .map-legend { display: none; }
}

/* ---- hero cards (ui4 frame + slate band with gold rim) ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 22px; }
.hcard { border: 3px solid var(--ol); border-radius: 20px; background: var(--paper); color: var(--ink); overflow: hidden;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.7), 0 6px 0 var(--ol); display: flex; flex-direction: column; min-width: 0; }
.hcard-band { background: linear-gradient(180deg, var(--slate-hi), var(--slate) 60%, var(--slate-dk)); border-bottom: 3px solid var(--ol);
  box-shadow: inset 0 -3px 0 var(--gold), inset 0 2px 0 rgba(255,255,255,.25); padding: 8px 16px 11px; display: flex; align-items: baseline; gap: 10px; }
.hcard-band h3 { color: #fff; font-size: 28px; text-shadow: 0 2px 0 var(--ol); }
.hcard-band .role { margin-inline-start: auto; font-size: 14px; font-weight: 700; color: var(--ol); border: 2px solid var(--ol); border-radius: 10px;
  padding: 0 10px; background: linear-gradient(180deg, var(--hi), var(--c) 60%, var(--lo)); }
.role.attack { --hi: #ff9a7e; --c: #e8392c; --lo: #b81f16; color: #fff; }
.role.defense { --hi: #a8dcff; --c: #2f86e0; --lo: #1c5fba; color: #fff; }
.role.caravan { --hi: var(--gold-hi); --c: var(--gold); --lo: var(--gold-lo); }
.hcard-art { position: relative; aspect-ratio: 1; overflow: hidden;
  background: radial-gradient(70% 60% at 50% 45%, var(--glow, #ffe7a3), var(--glow-2, #e3c27a) 70%); border-bottom: 3px solid var(--ol); }
/* the hero's portrait (waist up, transparent), filling the square from the bottom edge */
.hcard-art img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 6px 6px rgba(0,0,0,.3)); }
.hcard.attack .hcard-art { --glow: #ffd2b8; --glow-2: #e98b63; }
.hcard.defense .hcard-art { --glow: #d5ecff; --glow-2: #7fb2e6; }
.hcard.caravan .hcard-art { --glow: #fff2c2; --glow-2: #e9c35a; }
.hcard-body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.hcard-body p { font-size: 16px; color: var(--ink-dim); }
.ability { display: flex; gap: 10px; align-items: center; background: linear-gradient(180deg, var(--paper-dk), #e2dfd6); border: 3px solid var(--ol);
  border-radius: 14px; padding: 6px 12px; box-shadow: inset 0 3px 5px rgba(0,0,0,.14); }
.ability b { font-family: var(--display); font-size: 18px; color: var(--ink); }
.ability span { font-size: 14px; color: var(--ink-dim); }
.unlock { margin-top: auto; font-size: 14px; font-weight: 700; color: var(--firuzeh-dk); }
.cards-more { margin-top: 24px; display: flex; justify-content: center; }

.soon { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
.scard { border: 3px solid var(--ol); border-radius: 18px; background: linear-gradient(180deg, #3b4150, #262a33); overflow: hidden;
  box-shadow: 0 5px 0 var(--ol); display: flex; flex-direction: column; }
.scard img { aspect-ratio: 1; object-fit: cover; width: 100%; filter: saturate(.85); border-bottom: 3px solid var(--ol); }
.scard div { padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.scard h3 { font-size: 21px; color: var(--gold-hi); }
.scard p { font-size: 14px; color: var(--text-dim); line-height: 1.7; }
.scard .tag { align-self: flex-start; font-size: 12px; font-weight: 700; border: 2px solid var(--ol); border-radius: 8px; padding: 0 8px;
  background: var(--firuzeh); color: #fff; }

/* ---- fortress strip ---- */
.fort { background: radial-gradient(80% 100% at 50% 100%, #5f8a3a 0, #3f6a2a 45%, var(--night-2) 46%); }
.fort-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: 12px; }
.fort-row figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fort-row figcaption { font-weight: 700; font-size: 15px; background: rgba(22,24,28,.75); border: 2px solid var(--ol); border-radius: 10px; padding: 0 10px; }
@media (max-width: 640px) { .fort-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- generic panels ---- */
.panel { border: 3px solid var(--ol); border-radius: 20px; background: var(--paper); color: var(--ink); padding: 18px 20px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.7), 0 6px 0 var(--ol); }
.panel p { color: var(--ink-dim); }
.panel a, .link-dark { color: var(--firuzeh-dk); font-weight: 700; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.region h3 { margin-bottom: 6px; }
.region .tag { display: inline-block; font-size: 13px; font-weight: 700; border: 2px solid var(--ol); border-radius: 8px; padding: 0 8px; margin-bottom: 8px; color: #fff; }
.tag.safe { background: var(--green-lo); }
.tag.pvp { background: var(--red-lo); }
.tag.pve { background: #6a4c93; }

.cities { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.cities li { background: var(--night-3); border: 2px solid var(--ol); border-radius: 14px; padding: 8px 8px 10px; text-align: center; }
.cities img { width: 78%; margin: 0 auto; }
.cities b { display: block; font-family: var(--display); font-size: 19px; }
.cities span { font-size: 13px; color: var(--text-dim); }
.cities li.turan { background: #4a2326; }

.foes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.foe { display: flex; gap: 12px; align-items: center; background: #3a1d22; border: 3px solid var(--ol); border-radius: 16px; padding: 10px; }
.foe img { width: 84px; height: 84px; border-radius: 12px; border: 2px solid var(--ol); object-fit: cover; flex: none; }
.foe b { font-family: var(--display); font-size: 20px; display: block; color: #ffb3a6; }
.foe span { font-size: 14px; color: var(--text-dim); line-height: 1.6; }

.lineages { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.lineage { border: 3px solid var(--ol); border-radius: 18px; overflow: hidden; background: var(--paper); color: var(--ink); box-shadow: 0 5px 0 var(--ol); }
.lineage-flag { height: 92px; background: var(--c); display: grid; place-items: center; border-bottom: 3px solid var(--ol); position: relative; }
.lineage-flag::after { content: ""; position: absolute; inset: auto 0 0; height: 18px;
  background: linear-gradient(135deg, transparent 50%, var(--paper) 50%) 0 0 / 18px 18px repeat-x; }
.lineage-flag img { width: 56px; filter: drop-shadow(0 2px 0 var(--ol)); }
.lineage div.b { padding: 10px 14px 16px; }
.lineage h3 { font-size: 24px; }
.lineage p { font-size: 15px; color: var(--ink-dim); }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.facts li { background: linear-gradient(180deg, #4a4e57, #2a2d34 60%); border: 3px solid var(--ol); border-radius: 14px; padding: 10px 14px; }
.facts b { display: block; font-family: var(--display); font-size: 28px; color: var(--gold-hi); line-height: 1.2; }
.facts span { font-size: 14px; color: var(--text-dim); }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; } }

/* ---- join band and form ---- */
.join { background: linear-gradient(180deg, var(--night-2), var(--night)); }
.join-box { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; }
.join-box img.naqqal { width: 180px; }
.join-text { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.join-text .section-head { margin: 0; }
@media (max-width: 700px) { .join-box { grid-template-columns: 1fr; } .join-box img.naqqal { width: 120px; } }
.prereg { display: flex; flex-direction: column; gap: 10px; }
.prereg label { font-weight: 700; color: var(--ink); }
.prereg-row { display: flex; flex-wrap: wrap; gap: 10px; }
.prereg input { flex: 1 1 240px; min-width: 0; min-height: 52px; font: inherit; font-size: 18px; color: var(--ink); background: #fff;
  border: 3px solid var(--ol); border-radius: 14px; padding: 6px 14px; box-shadow: inset 0 3px 4px rgba(0,0,0,.12); }
.prereg .hint { font-size: 14px; color: var(--ink-dim); }
.prereg .msg { font-weight: 700; font-size: 16px; min-height: 1.85em; }
.prereg .msg.ok { color: var(--green-dk); }
.prereg .msg.err { color: var(--red-lo); }
.prereg button[disabled] { filter: grayscale(.6); cursor: progress; }

/* ---- news ---- */
.news-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.news-item a { display: grid; gap: 2px; text-decoration: none; color: var(--ink); background: var(--paper); border: 3px solid var(--ol); border-radius: 16px;
  padding: 12px 16px; box-shadow: 0 4px 0 var(--ol); }
.news-item time { font-size: 14px; color: var(--firuzeh-dk); font-weight: 700; }
.news-title { font-family: var(--display); font-weight: 800; font-size: 22px; }
.news-sum { color: var(--ink-dim); font-size: 15px; }
.post { padding-block: 40px 72px; max-width: 760px; display: flex; flex-direction: column; gap: 16px; }
.post p, .post li { color: var(--text); }
.post h2 { font-size: 28px; margin-top: 12px; }
.post img { border: 3px solid var(--ol); border-radius: 16px; }

/* ---- page head for inner pages ---- */
.page-head { padding-block: clamp(36px, 6vw, 64px) 8px; display: flex; flex-direction: column; gap: 12px; }
.prose { max-width: 68ch; display: flex; flex-direction: column; gap: 14px; }
.prose ul { margin: 0; padding-inline-start: 22px; }

/* ---- footer ---- */
.foot { background: #0e1a2c; border-top: 3px solid var(--ol); }
.foot-in { max-width: 1160px; margin: 0 auto; padding: 32px var(--gutter-r) calc(32px + env(safe-area-inset-bottom, 0px)) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.foot-brand { display: flex; gap: 12px; align-items: center; }
.foot-brand img { border-radius: 14px; border: 2px solid var(--ol); }
.foot-name { font-family: var(--display); font-weight: 800; font-size: 28px; color: var(--gold); line-height: 1.1; }
.foot-line { font-size: 14px; color: var(--text-dim); }
.foot-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
.foot-nav a { color: var(--text); text-decoration: none; font-size: 15px; }
.foot-nav a:hover { color: var(--gold-hi); }
.foot-bayt { font-size: 15px; line-height: 2.1; color: var(--text-dim); border-inline-start: 3px solid var(--gold-dk); padding-inline-start: 12px; }
.foot-bayt span { display: block; font-size: 13px; color: var(--gold); }
@media (max-width: 760px) { .foot-in { grid-template-columns: 1fr; } }