/* underoneflame.com: one stylesheet for every page.
   Design: the medieval redesign of 2026-10-15 (src/site/README.md, changelog), built on the layout
   Jesper approved on 2026-10-12. A warm, dark hall lit by the one flame: gilded frames and
   dividers, the two factions as hanging banners, Cinzel for headings (the inscription capitals of
   the painted logo) and Alegreya for reading. Colors follow docs/design/brand/visual-identity-guide.md
   and faction-legend.md (Phoenix crimson and gold, Dragon jade and teal, the flame gold into teal).
   Fonts and ornaments are self-hosted in fonts/ and img/; nothing is loaded from another site.
   Phone first: the base rules are for a narrow screen, wider screens add to them. */

/* Fonts (SIL Open Font License, texts beside them) */

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/cinzel-latin-600-normal.woff2) format('woff2');
}

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/cinzel-latin-700-normal.woff2) format('woff2');
}

@font-face {
  font-family: 'Alegreya';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/alegreya-latin-400-normal.woff2) format('woff2');
}

@font-face {
  font-family: 'Alegreya';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/alegreya-latin-400-italic.woff2) format('woff2');
}

@font-face {
  font-family: 'Alegreya';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/alegreya-latin-700-normal.woff2) format('woff2');
}

/* Tokens */

:root {
  color-scheme: dark;

  /* The hall: warm near-blacks and the stone of the panels. */
  --ground: #15100c;
  --ground-deep: #0e0a07;
  --stone: #211a14;
  --stone-top: #2a2119;
  --stone-bottom: #1a140f;
  --line: rgba(232, 176, 79, 0.2);

  /* Gold: value, rank, the frames. */
  --gold: #e8b04f;
  --gold-bright: #ffd06a;
  --gold-pale: #ffe3a3;
  --gold-deep: #9c7232;
  --gilt: linear-gradient(180deg, #ffe3a3 0%, #e8b04f 52%, #a8742c 100%);

  /* The factions. */
  --crimson: #7d1a17;
  --crimson-deep: #430c0d;
  --jade: #155a50;
  --jade-deep: #0a2b27;
  --teal: #58c7be;
  --teal-light: #9fe3dc;

  /* Links stay teal, the alliance color of the game's own interface. */
  --link: #7fd8cf;
  --link-hover: #b4ece6;

  /* Text, warm ivory on the dark ground. */
  --heading: #f6ead2;
  --text: #ebdfc6;
  --text-body: #e0d3b9;
  --text-muted: #c8b89b;
  --text-dim: #a8977a;

  --font-display: 'Cinzel', 'Trajan Pro', 'Times New Roman', Georgia, serif;
  --font-text: 'Alegreya', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;

  --gutter: 16px;
  --max: 1120px;
  --target: 44px;
}

/* Base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--ground);
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--ground);
  /* A faint grain like worn stone, and the warmth of the fire from above. */
  background-image:
    url(img/grain-v1.svg),
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(232, 150, 60, 0.07), rgba(21, 16, 12, 0) 70%),
    linear-gradient(180deg, var(--ground) 0%, var(--ground-deep) 100%);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1;
}

img,
svg {
  max-width: 100%;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.2;
  font-family: var(--font-display);
  font-weight: 700;
}

p {
  margin: 0;
}

/* Links in running text: gold ink with a faint gilt underline, to sit with the
   carved headings rather than look like a plain web link (Jesper, 2026-10-15). */
a {
  color: var(--gold);
  text-decoration-line: underline;
  text-decoration-color: rgba(232, 176, 79, 0.45);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a:hover {
  color: var(--gold-bright);
  text-decoration-color: var(--gold-bright);
}

@media (prefers-reduced-motion: reduce) {
  a { transition: none; }
}

a:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.email {
  overflow-wrap: anywhere;
}

/* The gilded frame (img/frame-v1.svg) around the panels that matter: the closed-alpha card,
   the contents of the text pages and their callouts. The stone behind it is a layer of its own,
   so it reaches just inside the frame's outer rule. */

.framed,
.toc,
.callout {
  position: relative;
  isolation: isolate;
  border: 18px solid transparent;
  border-image: url(img/frame-v1.svg) 32 / 18px stretch;
}

.framed::before,
.toc::before,
.callout::before {
  content: '';
  position: absolute;
  inset: -15px;
  z-index: -1;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(232, 176, 79, 0.08), rgba(232, 176, 79, 0) 70%),
    linear-gradient(180deg, var(--stone-top), var(--stone-bottom));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}

/* The ornamental divider (img/divider-v1.svg) under the section titles. */

.section-title::after,
.page-head h1::after,
.tagline::before,
.site-footer::before {
  content: '';
  display: block;
  height: 24px;
  background: url(img/divider-v1.svg) center / contain no-repeat;
}

/* Skip link */

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  padding: 0 1rem;
  border-radius: 4px;
  background: var(--gold);
  color: var(--ground-deep);
  font-weight: 700;
}

.skip-link:focus {
  top: 0.75rem;
  color: var(--ground-deep);
}

/* Buttons: struck gold. */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid #6e4a1c;
  border-radius: 4px;
  background: var(--gilt);
  color: #2a1906;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -2px 0 rgba(90, 55, 15, 0.35),
    0 0 0 3px rgba(21, 16, 12, 0.9),
    0 0 0 4px rgba(232, 176, 79, 0.45),
    0 8px 20px rgba(0, 0, 0, 0.45);
  transition: filter 0.2s ease, box-shadow 0.2s ease;
}

.button:hover {
  color: #2a1906;
  filter: brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -2px 0 rgba(90, 55, 15, 0.35),
    0 0 0 3px rgba(21, 16, 12, 0.9),
    0 0 0 4px rgba(255, 208, 106, 0.8),
    0 0 26px rgba(242, 167, 68, 0.35),
    0 8px 20px rgba(0, 0, 0, 0.45);
}

.button:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 6px;
}

/* The 404 page's button; the same gold as every button now. */
.button-gold {
  background: var(--gilt);
}

/* Header */

.site-header {
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, #1f1811 0%, #140f0b 100%);
  border-bottom: 1px solid rgba(232, 176, 79, 0.5);
  box-shadow: 0 3px 0 -1px rgba(14, 10, 7, 1), 0 4px 0 -1px rgba(232, 176, 79, 0.22), 0 10px 24px rgba(0, 0, 0, 0.35);
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 16px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--target);
  color: var(--heading);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.brand:hover {
  color: var(--gold-bright);
}

.brand img {
  width: 20px;
  height: 30px;
  filter: drop-shadow(0 0 6px rgba(242, 167, 68, 0.45));
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  color: var(--text-muted);
  text-decoration: none;
}

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

.site-nav a[aria-current='page'] {
  color: var(--gold);
}

/* A small gold lozenge under the current page. */
.site-nav a[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 6px;
  height: 6px;
  background: var(--gold);
  transform: translateX(-50%) rotate(45deg);
}

/* Footer */

.site-footer {
  margin-top: 8px;
  background: linear-gradient(180deg, rgba(14, 10, 7, 0) 0, var(--ground-deep) 40px);
}

.site-footer::before {
  width: min(320px, calc(100% - 32px));
  margin: 0 auto;
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 32px;
  padding-top: 16px;
  padding-bottom: 32px;
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.site-footer ul a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  color: var(--text-muted);
  text-decoration: none;
}

.site-footer ul a:hover {
  color: var(--gold-bright);
  text-decoration: underline;
}

.site-footer p {
  color: var(--text-dim);
  font-size: 0.9375rem;
}

.site-footer p.company {
  font-size: 0.8125rem;
  margin-top: 0.25rem;
}

.site-footer p a {
  display: inline-block;
  padding: 0.6rem 0;
}

/* Home: hero */

.hero {
  position: relative;
  overflow: hidden;
  /* 2026-10-12 (Jesper: the art cropped badly on a wide screen): the whole picture is shown,
     never cropped, and on screens wider than the art it stops growing and fades into the page. */
  /* At most 1600 px wide, and never taller than about 85 % of the window (the art is 3:2). */
  max-width: min(1600px, 128vh);
  margin: 0 auto;
}

/* The side fade is on the art's layers only, never on .hero-copy, so the badge and the text keep
   their full contrast (website review 2026-10-13, 4.2). */
@media (min-width: 1280px) {
  .hero picture {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  }
}

.hero picture,
.hero img {
  display: block;
}

.hero img {
  width: 100%;
  height: auto;
}

/* Darkens the bottom of the art so the words stay readable, then fades into the page. Drawn on
   the picture itself, so it ends where the art ends and the words below sit on the page's own
   ground. */
.hero picture {
  position: relative;
}

.hero picture::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(21, 16, 12, 0) 62%, rgba(21, 16, 12, 0.72) 84%, var(--ground) 100%);
}

.ember {
  position: absolute;
  left: 50%;
  bottom: 40px;
  width: 560px;
  max-width: 100%;
  height: 240px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(242, 167, 68, 0.3), rgba(242, 167, 68, 0));
  opacity: 0.55;
  animation: ember-glow 7s ease-in-out infinite;
  pointer-events: none;
}

@keyframes ember-glow {
  0%,
  100% {
    opacity: 0.55;
  }

  50% {
    opacity: 0.9;
  }
}

/* Sparks drifting up from the embers: ten small points of light, each on its own path and pace. */
.sparks {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.sparks span {
  position: absolute;
  bottom: 12%;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffd38a;
  box-shadow: 0 0 6px 2px rgba(255, 170, 70, 0.75);
  opacity: 0;
  animation: spark-rise 9s linear infinite;
}

.sparks span:nth-child(1) { left: 22%; animation-delay: 0s; animation-duration: 10s; }
.sparks span:nth-child(2) { left: 31%; animation-delay: 3.2s; animation-duration: 8s; }
.sparks span:nth-child(3) { left: 39%; animation-delay: 6.1s; animation-duration: 11s; }
.sparks span:nth-child(4) { left: 46%; animation-delay: 1.4s; animation-duration: 9s; }
.sparks span:nth-child(5) { left: 52%; animation-delay: 4.6s; animation-duration: 12s; width: 2px; height: 2px; }
.sparks span:nth-child(6) { left: 58%; animation-delay: 7.3s; animation-duration: 9.5s; }
.sparks span:nth-child(7) { left: 64%; animation-delay: 2.2s; animation-duration: 10.5s; width: 2px; height: 2px; }
.sparks span:nth-child(8) { left: 71%; animation-delay: 5.4s; animation-duration: 8.5s; }
.sparks span:nth-child(9) { left: 78%; animation-delay: 0.8s; animation-duration: 11.5s; }
.sparks span:nth-child(10) { left: 43%; animation-delay: 8.4s; animation-duration: 13s; width: 2px; height: 2px; }

@keyframes spark-rise {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }

  12% {
    opacity: 0.95;
  }

  50% {
    transform: translate(14px, -38vh);
  }

  80% {
    opacity: 0.5;
  }

  100% {
    opacity: 0;
    transform: translate(-10px, -72vh);
  }
}

/* Below the art, pulled up into its faded bottom edge, centered like an inscription. */
.hero-copy {
  position: relative;
  margin-top: -64px;
  padding-bottom: 24px;
  text-align: center;
}

.hero-copy .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* "In development" as a small ribbon. */
.pill {
  padding: 5px 24px 6px;
  background: linear-gradient(180deg, #8a211d, var(--crimson-deep));
  color: var(--gold-pale);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%, 10px 50%);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}

/* 2026-10-13 (Jesper): the hook, the first words a visitor reads under the art, in the
   gilded capitals of the logo. */
.hook {
  max-width: 24ch;
  background: var(--gilt);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4.6vw, 3.375rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0.02em;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 22px rgba(0, 0, 0, 0.55));
  animation: rise-in 1.4s ease-out 0.15s both;
}

.tagline {
  max-width: 34ch;
  color: var(--heading);
  font-size: clamp(1.25rem, 2.4vw, 1.5625rem);
  font-style: italic;
  line-height: 1.4;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
  animation: rise-in 1.4s ease-out 0.55s both;
}

.tagline::before {
  width: min(320px, 80vw);
  margin: 2px auto 12px;
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Home: about and the closed alpha */

.about {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px 48px;
  padding-top: 36px;
  padding-bottom: 32px;
}

.about-text {
  flex: 999 1 460px;
  min-width: 0;
  max-width: 62ch;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.about-text .lead {
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1.6;
}

/* An illuminated first letter. */
.about-text .lead::first-letter {
  float: left;
  margin: 0.06em 0.1em 0 0;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 3.4em;
  font-weight: 700;
  line-height: 0.8;
  text-shadow: 0 0 18px rgba(242, 167, 68, 0.35);
}

.about-text .motto {
  padding-left: 16px;
  border-left: 2px solid var(--gold-deep);
  color: var(--gold-pale);
  font-size: 1.1875rem;
  font-style: italic;
}

/* "Read more" link: a quieter, outlined sibling of the gold button (Jesper, 2026-10-15:
   the plain underlined link looked out of place). */
.more-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: var(--target);
  padding: 10px 20px;
  border: 1px solid var(--gold-deep);
  border-radius: 4px;
  background: linear-gradient(180deg, var(--stone-top) 0%, var(--stone-bottom) 100%);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.35;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 227, 163, 0.12), 0 6px 16px rgba(0, 0, 0, 0.35);
  transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.more-link::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.more-link:hover {
  color: var(--gold-bright);
  border-color: var(--gold);
  box-shadow: inset 0 1px 0 rgba(255, 227, 163, 0.18), 0 0 18px rgba(242, 167, 68, 0.25), 0 6px 16px rgba(0, 0, 0, 0.35);
}

.more-link:hover::after {
  transform: translateX(3px) rotate(45deg);
}

.more-link:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .more-link, .more-link::after { transition: none; }
  .more-link:hover::after { transform: rotate(45deg); }
}

.alpha-card {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 10px 10px 12px;
}

.alpha-card h2 {
  color: var(--gold);
  font-size: 1.25rem;
  letter-spacing: 0.02em;
}

.alpha-card p {
  color: var(--text-body);
  font-size: 1.0625rem;
}

.alpha-discord {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 4px;
}

.alpha-discord .button {
  align-self: flex-start;
}

.alpha-card .alpha-note {
  color: var(--text-dim);
  font-size: 0.9375rem;
}

.alpha-card .alpha-note strong {
  color: var(--text-muted);
}

/* Home: the three ways to play */

.pillars {
  padding-top: 40px;
  padding-bottom: 24px;
}

.section-title {
  margin-bottom: 32px;
  color: var(--heading);
  font-size: clamp(1.625rem, 3.4vw, 2.25rem);
  letter-spacing: 0.03em;
  text-align: center;
}

.section-title::after {
  width: min(320px, 100%);
  margin: 12px auto 0;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 22px 26px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold-deep);
  border-radius: 3px;
  background: linear-gradient(180deg, var(--stone-top), var(--stone-bottom));
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
  text-align: center;
}

/* The painted art in an arched window with a gilt edge. */
.card-art {
  width: min(78%, 220px);
  aspect-ratio: 1;
  margin-bottom: 10px;
  overflow: hidden;
  border-radius: 999px 999px 4px 4px;
  background: #121722;
  box-shadow:
    0 0 0 2px #9c7232,
    0 0 0 5px #1a140f,
    0 0 0 6px rgba(232, 176, 79, 0.45),
    0 16px 30px rgba(0, 0, 0, 0.5);
}

.card-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-art-item {
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 62%, rgba(242, 167, 68, 0.4), rgba(18, 23, 34, 0) 62%), #121722;
}

.card-art-item img {
  width: 76%;
  height: auto;
  margin-top: 12%;
}

.card h3 {
  color: var(--heading);
  font-size: 1.1875rem;
  letter-spacing: 0.02em;
}

.card p {
  max-width: 34ch;
  color: var(--text-muted);
  font-size: 1.0625rem;
}

/* Home: the factions, two banners of equal size hanging side by side. */

.factions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 14px;
  max-width: 860px;
  padding-top: 48px;
  padding-bottom: 56px;
}

.factions-flame {
  display: none;
}

.banner {
  position: relative;
  min-width: 0;
  padding-top: 8px;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.55));
}

/* The gilded rod the banner hangs from. */
.banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: -8px;
  right: -8px;
  height: 10px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 5px 50%, #ffe3a3 0 3px, rgba(0, 0, 0, 0) 4px),
    radial-gradient(circle at calc(100% - 5px) 50%, #ffe3a3 0 3px, rgba(0, 0, 0, 0) 4px),
    linear-gradient(180deg, #ffd98a, #b07a2f 60%, #6e4a1c);
  z-index: 1;
}

/* The gold edge: the cloth's own shape, a little larger than the cloth inside it. */
.banner-cloth {
  --tail: 40px;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 26px 14px calc(var(--tail) + 30px);
  text-align: center;
  background: linear-gradient(180deg, #ffd98a, #c08a3a 45%, #8f6428);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - var(--tail)), 0 100%);
}

/* The cloth: its color, light from the crest and the shadows of its folds. */
.banner-cloth::before {
  content: '';
  position: absolute;
  inset: 0 4px 6px;
  z-index: -1;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - var(--tail) + 2px), 0 100%);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0) 14%, rgba(255, 255, 255, 0.05) 30%, rgba(0, 0, 0, 0) 44%, rgba(0, 0, 0, 0.18) 58%, rgba(0, 0, 0, 0) 72%, rgba(255, 255, 255, 0.04) 84%, rgba(0, 0, 0, 0.34)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0, rgba(0, 0, 0, 0) 22px),
    radial-gradient(ellipse 70% 40% at 50% 28%, var(--glow), rgba(0, 0, 0, 0) 75%),
    linear-gradient(180deg, var(--cloth), var(--cloth-deep));
}

/* A stitched hem just inside the edge. */
.banner-cloth::after {
  content: '';
  position: absolute;
  inset: 10px 12px auto;
  height: calc(100% - var(--tail) - 26px);
  z-index: -1;
  border: 1px dashed rgba(255, 220, 150, 0.28);
  border-bottom: 0;
}

.banner-phoenix {
  --cloth: #8c201b;
  --cloth-deep: var(--crimson-deep);
  --glow: rgba(242, 167, 68, 0.38);
}

.banner-dragon {
  --cloth: #1a6457;
  --cloth-deep: var(--jade-deep);
  --glow: rgba(88, 199, 190, 0.32);
}

.banner-crest {
  width: auto;
  height: 132px;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55));
}

.banner h2 {
  color: var(--gold-bright);
  font-size: 1.125rem;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.banner-dragon h2 {
  color: #f0d08a;
}

.banner p {
  max-width: 24ch;
  color: #fbf0dc;
  font-size: 1rem;
  font-style: italic;
  line-height: 1.45;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* Text pages: the heading band */

.page-head {
  background:
    radial-gradient(ellipse 70% 100% at 18% 0%, rgba(242, 167, 68, 0.12), rgba(21, 16, 12, 0) 70%),
    linear-gradient(180deg, rgba(14, 10, 7, 0.6), rgba(14, 10, 7, 0));
}

.page-head .wrap {
  padding-top: 36px;
  padding-bottom: 28px;
}

.eyebrow {
  margin-bottom: 8px;
  color: var(--gold);
  font-size: 1.0625rem;
  font-style: italic;
}

.page-head h1 {
  margin-bottom: 14px;
  background: var(--gilt);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(2rem, 5vw, 3.125rem);
  letter-spacing: 0.02em;
  line-height: 1.12;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6));
}

/* The divider sits under the heading, aligned with the text. */
.page-head h1::after {
  width: 240px;
  max-width: 100%;
  margin-top: 12px;
  background-position: left center;
}

.updated {
  color: var(--text-dim);
  font-size: 1rem;
  font-style: italic;
}

.page-head .lede {
  max-width: 66ch;
  margin-top: 14px;
  color: var(--text-muted);
  font-size: 1.1875rem;
}

/* Text pages: contents and article */

.page-body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px 48px;
  padding-top: 8px;
  padding-bottom: 64px;
}

.toc {
  flex: 1 1 250px;
  min-width: 0;
  padding: 6px 8px 4px;
}

.toc-title {
  margin-bottom: 4px;
  color: var(--gold);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
}

.toc ol {
  margin: 0;
  padding-left: 24px;
  font-size: 1.0625rem;
  line-height: 1.35;
}

.toc li::marker {
  color: var(--gold-deep);
  font-family: var(--font-display);
  font-size: 0.875em;
}

.toc a {
  /* A block, so the number stays beside the first line when a long entry wraps. */
  display: block;
  padding: 0.65rem 0 0.5rem;
  color: var(--text);
  text-decoration: none;
}

.toc a:hover {
  color: var(--gold-bright);
  text-decoration: underline;
}

.toc .toc-key {
  color: var(--gold);
  font-weight: 700;
}

.toc .toc-key:hover {
  color: var(--gold-bright);
}

.prose {
  flex: 999 1 560px;
  min-width: 0;
  max-width: 68ch;
  color: var(--text-body);
  font-size: 1.125rem;
  line-height: 1.68;
}

.prose h2 {
  margin: 52px 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, rgba(232, 176, 79, 0.6), rgba(232, 176, 79, 0) 80%) 1;
  color: var(--heading);
  font-size: 1.3125rem;
  letter-spacing: 0.02em;
  scroll-margin-top: 24px;
}

.prose > h2:first-child {
  margin-top: 0;
}

.prose h3 {
  margin: 30px 0 10px;
  color: var(--gold);
  font-size: 1.0625rem;
  letter-spacing: 0.03em;
}

.prose p {
  margin: 0 0 16px;
}

.prose ul,
.prose ol {
  margin: 0 0 18px;
  padding-left: 24px;
}

.prose li {
  margin: 0 0 8px;
}

.prose ul > li::marker {
  color: var(--gold);
}

.prose ol > li::marker {
  color: var(--gold);
  font-weight: 700;
}

.prose strong {
  color: var(--heading);
}

.callout {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 22px;
  padding: 8px 8px 6px;
}

.callout-key::before {
  background:
    radial-gradient(ellipse 80% 70% at 50% 0%, rgba(232, 176, 79, 0.16), rgba(232, 176, 79, 0) 70%),
    linear-gradient(180deg, var(--stone-top), var(--stone-bottom));
}

.prose .callout p {
  margin: 0;
}

.callout > p:first-child {
  color: var(--heading);
}

.callout .button {
  align-self: flex-start;
}

/* Text pages: the game's facts at a glance (game.html) */

.summary {
  color: var(--heading);
  font-size: 1.1875rem;
}

.facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px 20px;
  margin: 4px 0 0;
}

.facts dt {
  margin-top: 10px;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.facts dd {
  margin: 0;
  color: var(--text-body);
}

/* A short label beside things that are planned but not yet in the game: a jade enamel plate. */
.tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px 2px;
  border: 1px solid rgba(88, 199, 190, 0.55);
  border-radius: 3px;
  background: linear-gradient(180deg, #164a43, #0c2c28);
  color: var(--teal-light);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.5;
  vertical-align: 0.2em;
  white-space: nowrap;
}

.prose h2 .tag,
.prose h3 .tag {
  font-size: 0.6875rem;
}

/* Wider screens */

@media (min-width: 40.0625rem) {
  :root {
    --gutter: 32px;
  }

  body {
    font-size: 1.125rem;
  }

  .site-header .wrap {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .brand {
    font-size: 1.1875rem;
  }

  .site-nav ul {
    gap: 0 28px;
    font-size: 0.875rem;
  }

  .hero-copy {
    margin-top: -80px;
    padding-bottom: 40px;
  }

  .about {
    padding-top: 48px;
  }

  .alpha-card {
    padding: 14px 16px 16px;
  }

  .factions {
    grid-template-columns: 1fr auto 1fr;
    gap: 28px;
    padding-top: 64px;
    padding-bottom: 72px;
  }

  /* The one flame between the two banners. */
  .factions-flame {
    display: block;
    width: 40px;
    height: 60px;
    align-self: center;
    filter: drop-shadow(0 0 14px rgba(242, 167, 68, 0.55));
  }

  .banner::before {
    left: -12px;
    right: -12px;
  }

  .banner-cloth {
    --tail: 56px;
    gap: 14px;
    padding: 40px 32px calc(var(--tail) + 40px);
  }

  .banner-crest {
    height: 190px;
  }

  .banner h2 {
    font-size: 1.75rem;
  }

  .banner p {
    font-size: 1.25rem;
  }

  .page-head .wrap {
    padding-top: 52px;
  }

  .prose h2 {
    font-size: 1.5rem;
  }

  .facts {
    grid-template-columns: max-content 1fr;
    gap: 10px 24px;
  }

  .facts dt {
    margin-top: 0.35em;
  }

  .page-body {
    padding-bottom: 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ember,
  .hook,
  .tagline {
    animation: none;
  }

  .sparks {
    display: none;
  }

  .button {
    transition: none;
  }

  * {
    scroll-behavior: auto !important;
  }
}

/* 2026-10-12 (Jesper): the key art already carries the painted logo, so the typed title is
   kept for screen readers and search engines but hidden on screen. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}