/* ============================================================
   Crowns — Design System: Colors & Type
   The single source of truth for color tokens, font faces, and
   semantic typography classes. Import this on any new page:

   <link rel="stylesheet" href="/colors_and_type.css">

   Manuscript aesthetic. Warm-dark palette. Three voices in type.
   No pure black. No pure white. No bright jewel-tones.
   ============================================================ */

/* ------------------------------------------------------------
   1. Webfonts — Cinzel, Cormorant Garamond, Inter
   Self-hosted (F10, 22.08.2026): /fonts/crowns-fonts.css, woff2 in
   /fonts/crowns/, vendored by scripts/vendor-assets.mjs. No Google CDN.
   ------------------------------------------------------------ */
/* Inter с НАСТОЯЩИМ italic (решение Димы 2026-07-07): без ital-осей
   браузер синтезировал наклон (faux italic) на всех курсивных системных
   строках («All quiet within reach» и др.) — выглядело чужим шрифтом.
   Референс страдает тем же — здесь сознательно лучше референса. */
@import url('/fonts/crowns-fonts.css');

/* ------------------------------------------------------------
   2. Tokens — base palette + supporting tones
   ------------------------------------------------------------ */
:root {
  /* Core 4 — every page uses these directly */
  --ink:    #0F0F10;   /* Background. Neutral cool with one-step blue tail. Reads as deep night, not coffee. (Was #1A1612 — warm brown — pre PR 6 design pass.) */
  --vellum: #E8E4DC;   /* Body / headings / wordmark. Off-white parchment. NEVER pure white. */
  --ember:  #B8924A;   /* Accent gold — chapter numerals, rules, hover, CTA. Aged, never bright. */

  /* Supporting — derived from ink for layering */
  --iron:    #15151A;   /* Slightly lighter ink — panels, cards. Tracks layer-1. */
  --ash:     #8A8277;   /* Muted text — labels, sub-text, marginalia. W20 порт 1:1: выровнен под референс dc.html (решение Димы; был #6B6358). */
  --ash-dim: #3A3630;   /* Disabled, placeholder, divider hairlines. */

  /* ------------------------------------------------------------
     Z-axis — three reading layers. Each surface in the app sits on
     exactly one. Squint test: silhouettes must read as three weights
     of paper. L0 = the page (map, topbar, shelf, rails). L1 = a folio
     opened over the page. L2 = nested detail inside a folio.
     PR 6 design pass: re-anchored to neutral #0F0F10 base; each layer
     up is a measured cool lift (~5pts brightness, slight blue drift).
     ------------------------------------------------------------ */
  --layer-0: #0F0F10;   /* page surface — center stage where the globe sits (= --ink) */
  --layer-1: #0A0A0C;   /* opened folio — sinks slightly below page, sits in the same deep-neutral family as chrome (Dima's preference: "цвет ближе к основному цвету Chrome"). The lift inside a folio happens at L2 / nested-card level instead of at the folio's own background. */
  --layer-2: #131314;   /* nested drilldown card inside a folio — lifts above folio body so the inner block reads as the focal element. */
  /* Chrome layer — sinks below page so rails / topbar / shelf read as
     containing frame, not equal-weight surfaces. Folio L1 sits between
     chrome and page (chrome #07070A < folio #0A0A0C < page #0F0F10),
     so the depth grammar is: rails (deepest) · folio body (sunken) ·
     page (baseline) · nested card (lifted). */
  --chrome:  #08080B;   /* W20 порт 1:1: выровнен под референс dc.html (был #07070A) */
  --edge-0:  rgba(184, 146, 74, 0.18);  /* page hairlines */
  --edge-1:  rgba(184, 146, 74, 0.32);  /* folio edge — gently gilt */
  --edge-2:  rgba(184, 146, 74, 0.45);  /* nested edge — fully gilt */

  /* Semantic — translucent overlays for protection scrims */
  --ink-86: rgba(15, 15, 16, 0.86);
  --ink-62: rgba(15, 15, 16, 0.62);
  --ink-32: rgba(15, 15, 16, 0.32);
  --vellum-86: rgba(232, 228, 220, 0.86);
  --vellum-62: rgba(232, 228, 220, 0.62);
  --vellum-40: rgba(232, 228, 220, 0.40);
  --vellum-22: rgba(232, 228, 220, 0.22);  /* W20 design pass: the neutral hairline — de-boxed ledger rules */
  --ember-85: rgba(184, 146, 74, 0.85);
  --ember-60: rgba(184, 146, 74, 0.60);
  --ember-40: rgba(184, 146, 74, 0.40);   /* W20 design pass: seal outlines, quiet gilt edges */
  --ember-25: rgba(184, 146, 74, 0.25);   /* faded-gold hairline — digest-strip verticals, section rules */
  --ember-12: rgba(184, 146, 74, 0.12);   /* W20 design pass: faintest gold — hover washes, CTA fills */

  /* ------------------------------------------------------------
     Semantic colour palette — domain / stance / status tokens.
     Replaces ad-hoc hex literals scattered across pills, feed-row
     spines, status indicators, hex tile fills. Use these by name
     so the look is consistent across surfaces and a future palette
     refresh changes one place.
     PR 6 design pass: values preserved from current site, just
     declared as tokens. Polish (slight value tuning) deferred.
     ------------------------------------------------------------ */
  --war:        #c45a4a;   /* war pill, war feed spine, attacker tag, urgent ribbon spine */
  --ally:       #7AB87A;   /* alliance pill, ally hex outline, alliance feed spine */
  --ally-bright: #6BB87A;  /* live status dots that need a faint glow (kingdom ACTIVE, wallet connected) */
  --trade:      #74b9ff;   /* trade pill, trade feed spine, marketplace accents */
  --vassal:     #c66ba8;   /* vassal pill, bond feed spine */
  --blood:      #7A1E1E;   /* deeper red — relation banner ("In conflict with you"), threats */
  --moss:       #4a5d3a;   /* deeper green — alliance banner, peace context (wider than --ally bright) */
  --warn:       #b8a16b;   /* warm-yellow — awaiting / pending / collecting status pills */

  /* ------------------------------------------------------------
     3. Type stacks — three voices, each with one job
     - display-loud  → Cinzel        (loud uppercase headlines)
     - display       → Cormorant     (italic subtitles, roman numerals)
     - body          → Inter         (paragraphs, labels, nav)
     ------------------------------------------------------------ */
  --display-loud: "Cinzel", "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --display:      "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --sc:           "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --body:         "Inter", system-ui, -apple-system, sans-serif;
  --mono:         "Inter", system-ui, -apple-system, sans-serif;

  /* ------------------------------------------------------------
     4. Spacing — manuscript margins, fluid across desktop range.
     Each token clamp()'s between a 1100px-floor and a 1920px-ceiling
     so spacing scales optically with the viewport. Existing usages
     keep their names; values used to be fixed-px (4/8/12/16/24/32/
     48/64/96/128) — those are now the upper bound.
     ------------------------------------------------------------ */
  --space-1: clamp(3px,  0.25vw, 4px);
  --space-2: clamp(6px,  0.55vw, 8px);
  --space-3: clamp(9px,  0.85vw, 12px);
  --space-4: clamp(12px, 1.15vw, 16px);
  --space-5: clamp(18px, 1.7vw,  24px);
  --space-6: clamp(22px, 2.2vw,  32px);
  --space-7: clamp(32px, 3.4vw,  48px);
  --space-8: clamp(44px, 4.5vw,  64px);
  --space-9: clamp(64px, 6.8vw,  96px);
  --space-10: clamp(88px, 9vw,  128px);

  /* ------------------------------------------------------------
     4a. Typography scale — Tier B (fluid).
     Replaces the 22 distinct fixed font-size values scattered
     across styles.css. Anchored at 1100px floor → 1920px ceiling.
     Use in component CSS as `font-size: var(--text-md)` etc.
     ------------------------------------------------------------ */
  --text-2xs: clamp(9px,  0.7vw,  10px);
  --text-xs:  clamp(10px, 0.85vw, 11px);
  --text-sm:  clamp(11px, 0.95vw, 13px);
  --text-md:  clamp(13px, 1.1vw,  15px);
  --text-lg:  clamp(15px, 1.3vw,  18px);
  --text-xl:  clamp(18px, 1.6vw,  22px);
  --text-2xl: clamp(22px, 2.2vw,  30px);
  --text-3xl: clamp(28px, 3vw,    42px);
  --text-4xl: clamp(36px, 4vw,    56px);
  --text-5xl: clamp(48px, 5.5vw,  96px);

  /* ------------------------------------------------------------
     4b. Chrome dimensions — Tier C (breakpoint-set below).
     Base values here target the `compact` band (1100–1279px);
     media queries below raise rail widths and pad density as
     the viewport grows. Topbar/shelf height stay fixed-px because
     dozens of `position: fixed` offsets reference them — making
     them fluid would cascade into pixel-hunting all 15+ floating-
     layer offsets.
     ------------------------------------------------------------ */
  --topbar-h: 64px;
  --shelf-h:  56px;
  --rail-l-w: 240px;
  --rail-r-w: 280px;

  /* ------------------------------------------------------------
     4c. Folio & floating-layer dimensions — Tier C.
     Big sliding panels (Wars / Economy / Treasury etc) and
     fixed overlays (bell popover, pin dock, toast stack, auth
     modal). Base values target compact band; ultrawide caps
     are set in the 2200px breakpoint so they don't engulf the
     screen.
     ------------------------------------------------------------ */
  --folio-w:      min(840px, 92vw);
  --folio-wide-w: min(960px, 94vw);
  --bp-shell-w:   320px;
  --pd-shell-w:   220px;
  --toast-card-w: 320px;
  --minimap-w:    180px;

  /* ------------------------------------------------------------
     4d. Panel density — Tier C.
     Padding inside opened folios and hero strips. Today these
     are written inline (e.g. `padding: 56px 36px 36px`) in every
     sheet; promoting to tokens means one breakpoint can compact
     all sheets at once on narrower viewports. Base values are
     the compact-band minimums.
     ------------------------------------------------------------ */
  --panel-pad-x: 24px;
  --panel-pad-y: 36px;
  --hero-pad-x:  24px;
  --hero-pad-y:  36px;

  /* ------------------------------------------------------------
     5. Borders & lines — thin, rarely round
     ------------------------------------------------------------ */
  --line-thin:    1px solid rgba(232, 228, 220, 0.20);
  --line:         1px solid rgba(232, 228, 220, 0.40);
  --line-ember:   1px solid rgba(184, 146, 74, 0.60);
  --line-ember-faint: 1px solid rgba(184, 146, 74, 0.25);

  /* Corner radii — minimal. Manuscript pages don't have rounded corners. */
  --radius-0: 0px;
  --radius-1: 1px;   /* hairline rounding on inputs, max */
  --radius-2: 2px;

  /* ------------------------------------------------------------
     6. Shadows — soft, warm, never neon
     ------------------------------------------------------------ */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.6);                 /* drop on small icons */
  --shadow-2: 0 6px 18px rgba(0, 0, 0, 0.45);               /* lifted card */
  --shadow-3: 0 12px 36px rgba(0, 0, 0, 0.50);              /* deep panel */
  --shadow-text: 0 1px 12px rgba(26, 22, 18, 0.85);         /* text on photo */

  /* ------------------------------------------------------------
     7. Easing & duration — slow, organic, never bouncy
     ------------------------------------------------------------ */
  --ease-out: cubic-bezier(.2, .6, 0, 1);
  --ease-in-out: cubic-bezier(.4, .0, .2, 1);
  --dur-fast: 200ms;
  --dur: 240ms;
  --dur-slow: 800ms;
  --dur-reveal: 1800ms;
}

/* ------------------------------------------------------------
   7a. Desktop breakpoints — override Tier C tokens.
   Three snapping points across the desktop range (1100→3440).
   The base values declared above target the `compact` band
   (1100–1279). Mobile (<1100) is intentionally undefined —
   it will be added as a separate redesign pass.

   What changes at each breakpoint: rail widths, panel padding
   density, floating popover widths, folio cap. NOT typography
   or spacing — those scale continuously via the fluid clamps.
   ------------------------------------------------------------ */
@media (min-width: 1280px) {
  :root {
    --rail-l-w: 280px;
    --rail-r-w: 360px;
    --panel-pad-x: 32px;
    --panel-pad-y: 48px;
    --hero-pad-x:  32px;
    --hero-pad-y:  48px;
    --minimap-w:   220px;
    --folio-w:      min(880px, 92vw);
    --folio-wide-w: min(1040px, 94vw);
  }
}
@media (min-width: 1600px) {
  :root {
    --rail-l-w: 320px;
    --rail-r-w: 380px;
    --panel-pad-x: 36px;
    --panel-pad-y: 56px;
    --hero-pad-x:  36px;
    --hero-pad-y:  56px;
    --bp-shell-w:  380px;
    --minimap-w:   240px;
    --folio-w:      min(960px, 92vw);
    --folio-wide-w: min(1120px, 96vw);
  }
}
@media (min-width: 2200px) {
  :root {
    --rail-l-w: 360px;
    --rail-r-w: 420px;
    --panel-pad-x: 48px;
    --panel-pad-y: 72px;
    --hero-pad-x:  48px;
    --hero-pad-y:  72px;
    --folio-w:      min(1280px, 60vw);
    --folio-wide-w: min(1440px, 70vw);
    --minimap-w:    280px;
  }
}

/* ------------------------------------------------------------
   8. Reset & base — set page defaults
   ------------------------------------------------------------ */
html, body {
  background: var(--ink);
  color: var(--vellum);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
}

/* ------------------------------------------------------------
   9. Display tokens — utility classes
   ------------------------------------------------------------ */

/* disp-xl — Cinzel 96px, hero anchor (Beat 1 / page heroes). */
.disp-xl {
  font-family: var(--display-loud);
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.05;
  font-size: clamp(40px, 6vw, 96px);
  text-transform: uppercase;
  text-wrap: balance;
}

/* disp-l — Cinzel 48px, section h2. */
.disp-l {
  font-family: var(--display-loud);
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1.15;
  font-size: clamp(28px, 3.4vw, 48px);
  text-transform: uppercase;
  text-wrap: balance;
}

/* disp-m — Cinzel 36px, sub-section h3. */
.disp-m {
  font-family: var(--display-loud);
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1.15;
  font-size: clamp(22px, 2.6vw, 36px);
  text-transform: uppercase;
  text-wrap: balance;
}

/* disp-s — Cinzel 22px, smallest loud heading. */
.disp-s {
  font-family: var(--display-loud);
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.2;
  font-size: clamp(16px, 1.6vw, 22px);
  text-transform: uppercase;
  text-wrap: balance;
}

/* italic-l — was Cormorant italic 28px. Switched to Inter regular per
   May 2026 design feedback: Cormorant italic at small sizes was hard
   to read for what is functional context (subtitles, epigraphs). The
   class name is kept for compatibility — semantics now mean "subtitle
   accent" rather than literal italic. Sizes shrunk because Inter at
   the same physical size reads larger than Cormorant italic. */
.italic-l {
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(13px, 1.1vw, 16px);
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--vellum-86);
}

/* italic-m — was Cormorant italic 22px. Same rationale as italic-l. */
.italic-m {
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(11px, 0.95vw, 13px);
  letter-spacing: 0;
  line-height: 1.45;
  color: var(--vellum-86);
}

/* roman-numeral — Cormorant Light, big, ember .60. Used for chapter glyphs. */
.roman-numeral {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(64px, 7vw, 108px);
  line-height: 1;
  letter-spacing: .04em;
  color: var(--ember);
  opacity: .60;
}

/* page-num — small Roman numeral i / ii / iii in corner. Switched
   from Cormorant italic to Inter regular per design feedback. */
.page-num {
  font-family: var(--body);
  font-weight: 500;
  font-size: clamp(11px, 0.9vw, 13px);
  letter-spacing: .04em;
  color: var(--ember-85);
}

/* body-l — Inter 18px, large paragraph. */
.body-l {
  font-family: var(--body);
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.7;
  letter-spacing: .005em;
  font-weight: 400;
  color: var(--vellum-86);
  text-wrap: pretty;
}

/* body-m — Inter 16px, default paragraph. */
.body-m {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  color: var(--vellum-86);
  text-wrap: pretty;
}

/* body-s — Inter 14px, small / supplementary copy. */
.body-s {
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--vellum-86);
}

/* label — Inter 11px Medium uppercase tracked. Nav, CTAs, mono caps. */
.label {
  font-family: var(--body);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--vellum-86);
}

/* label-tight — same but tighter tracking, used in chapter marks. */
.label-tight {
  font-family: var(--body);
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--vellum-62);
}

/* mono — Inter 14px tabular nums (leaderboard numbers). */
.mono {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: .04em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
   10. Semantic element styling — h1..h6, p, code, blockquote
   These are opt-in via .prose wrapper to not break component CSS.
   ------------------------------------------------------------ */
.prose h1 { font-family: var(--display-loud); font-weight: 500; letter-spacing: .04em; line-height: 1.05; font-size: clamp(40px, 6vw, 96px); text-transform: uppercase; text-wrap: balance; margin: 0 0 var(--space-6); }
.prose h2 { font-family: var(--display-loud); font-weight: 500; letter-spacing: .05em; line-height: 1.15; font-size: clamp(28px, 3.4vw, 48px); text-transform: uppercase; text-wrap: balance; margin: var(--space-8) 0 var(--space-5); }
.prose h3 { font-family: var(--display-loud); font-weight: 500; letter-spacing: .06em; line-height: 1.15; font-size: clamp(22px, 2.6vw, 36px); text-transform: uppercase; text-wrap: balance; margin: var(--space-7) 0 var(--space-4); }
.prose h4 { font-family: var(--body); font-weight: 600; font-size: clamp(15px, 1.3vw, 18px); margin: var(--space-6) 0 var(--space-3); color: var(--ember); }
.prose h5 { font-family: var(--body); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; color: var(--vellum-62); margin: var(--space-5) 0 var(--space-2); }
.prose p  { margin: 0 0 var(--space-4); font-size: clamp(15px, 1.25vw, 18px); line-height: 1.7; color: var(--vellum-86); text-wrap: pretty; }
.prose blockquote {
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--vellum);
  border-left: var(--line-ember);
  padding-left: var(--space-5);
  margin: var(--space-6) 0;
  line-height: 1.4;
}
.prose code {
  font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: .9em;
  color: var(--ember);
  background: var(--iron);
  padding: 2px 6px;
  border: var(--line-ember-faint);
  border-radius: var(--radius-1);
}
.prose hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(184,146,74,0) 0%,
    rgba(184,146,74,.7) 14%,
    rgba(184,146,74,.7) 86%,
    rgba(184,146,74,0) 100%);
  margin: var(--space-8) auto;
  width: min(420px, 72%);
}
.prose a { color: var(--vellum); border-bottom: 1px solid var(--ember-60); transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.prose a:hover { color: var(--ember); border-bottom-color: var(--ember); }

/* ------------------------------------------------------------
   11. Manuscript components — chapter mark, divider, top-rule
   ------------------------------------------------------------ */
.chapter-mark {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  font-family: var(--body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--vellum-62);
}
.chapter-mark .num { color: var(--ember); }
.chapter-mark .pip {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ember);
  opacity: .85;
}

.ms-divider {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin: 0 auto;
  width: min(420px, 72%);
}
.ms-divider .rule {
  flex: 1;
  height: 1px;
  background: var(--vellum-40);
}
.ms-divider .floret {
  font-family: var(--display);
  color: var(--ember);
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1;
  opacity: .9;
}
.ms-divider .floret-logo {
  height: clamp(22px, 2vw, 28px);
  width: auto;
  opacity: .92;
  display: block;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.55));
}

.top-rule {
  display: block;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(184,146,74,0)   0%,
    rgba(184,146,74,.7) 14%,
    rgba(184,146,74,.7) 86%,
    rgba(184,146,74,0) 100%);
}
.top-rule.narrow {
  width: min(240px, 38%);
  margin: 0 auto;
  background: linear-gradient(90deg,
    rgba(184,146,74,0)   0%,
    rgba(184,146,74,.85) 22%,
    rgba(184,146,74,.85) 78%,
    rgba(184,146,74,0) 100%);
}

/* ------------------------------------------------------------
   12. Optional offline @font-face block — uncomment if hosting
   self-hosted .woff2 files in /fonts/. (See README — fonts are
   currently substituted from Google Fonts; replace when files
   are vendored locally.)
   ------------------------------------------------------------ */
/*
@font-face { font-family: "Cinzel";              src: url("/fonts/Cinzel-Medium.woff2") format("woff2");                  font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cinzel";              src: url("/fonts/Cinzel-SemiBold.woff2") format("woff2");                font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond";  src: url("/fonts/CormorantGaramond-Light.woff2") format("woff2");        font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond";  src: url("/fonts/CormorantGaramond-LightItalic.woff2") format("woff2");  font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant Garamond";  src: url("/fonts/CormorantGaramond-MediumItalic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter";               src: url("/fonts/Inter-Regular.woff2") format("woff2");                  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter";               src: url("/fonts/Inter-Medium.woff2") format("woff2");                   font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter";               src: url("/fonts/Inter-SemiBold.woff2") format("woff2");                 font-weight: 600; font-style: normal; font-display: swap; }
*/