:root {
  --bg: #09090b;
  --surface: #121214;
  --elevated: #1c1c20;
  --fg: #f4f0ea;
  --muted: #9a958c;
  --subtle: #6b6760;
  --accent: #e11d2e;
  --accent-dim: #8f1220;
  --border: #2a2926;
  --honor: #8a9bb0;
  --ruthless: #e11d2e;
  --ambiguous: #c4a574;
  --undeclared: #6b6760;
  --evil: #6f8f5a;   /* ICON has five Morality values; the design shipped four */
  --display: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  --sans: "Barlow", "Segoe UI", system-ui, sans-serif;
}

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

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: none;
  border: 0;
}

.kicker {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

.kicker.accent { color: var(--accent); }

.board {
  max-width: 72rem;
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
}

@media (min-width: 640px) {
  .board { padding-left: 1.5rem; padding-right: 1.5rem; }
}

.board-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
}

.badge {
  display: inline-flex;
  border: 1px solid;
  padding: 0.15rem 0.5rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.badge.ruthless { color: var(--ruthless); border-color: color-mix(in srgb, var(--ruthless) 50%, transparent); }
.badge.honorable { color: var(--honor); border-color: color-mix(in srgb, var(--honor) 40%, transparent); }
.badge.ambiguous { color: var(--ambiguous); border-color: color-mix(in srgb, var(--ambiguous) 40%, transparent); }
.badge.evil { color: var(--evil); border-color: color-mix(in srgb, var(--evil) 45%, transparent); }
.badge.undeclared { color: var(--undeclared); border-color: var(--border); }

.nick { margin-top: 1rem; }
.last {
  font-family: var(--display);
  font-size: clamp(3.2rem, 8vw, 6rem);
  letter-spacing: 0.06em;
  line-height: 0.85;
  margin: 0.15rem 0 0;
  font-weight: 400;
}
.first {
  font-family: var(--display);
  font-size: 1.5rem;
  letter-spacing: 0.28em;
  color: var(--muted);
  margin: 0.15rem 0 0;
  font-weight: 400;
}

.stamp-btn {
  border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  background: color-mix(in srgb, var(--accent-dim) 40%, transparent);
  padding: 0.75rem 1.25rem;
  text-align: left;
}
.stamp-btn:hover { background: color-mix(in srgb, var(--accent-dim) 70%, transparent); }
.stamp-btn:active { transform: scale(0.96); }
.stamp-btn .phrase {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--display);
  font-size: 1.5rem;
  letter-spacing: 0.08em;
}

.section { margin-top: 3rem; }
.section > .kicker { margin-bottom: 1rem; }

.wall {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
}
@media (min-width: 640px) {
  .wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.plate {
  background: var(--bg);
  padding: 1rem 0.75rem;
}
.plate b {
  display: block;
  margin-top: 0.25rem;
  font-weight: 500;
  font-size: 0.9rem;
}

.split {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 1024px) {
  .split { grid-template-columns: 1fr 1fr; }
}

.bio h2, .called h2, .env-btn span:first-child {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.08em;
  margin: 0.35rem 0 0;
}
.bio h2 { font-size: 1.85rem; }
.called h2 { font-size: 2.25rem; }
.bio p {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  line-height: 1.6;
}
.kind { margin-top: 0.5rem; }
.detail { margin-top: 0.75rem; font-size: 0.9rem; color: var(--muted); }

/* Was a single-column grid built for exactly two pins. A character can have
   several finishers and signatures, so it wraps into columns instead of
   growing into a tall stack. */
.pins {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.5rem;
  margin-top: 1.5rem;
}
@media (min-width: 640px) {
  .pins { grid-template-columns: 1fr 1fr; }
}
.pin {
  border-radius: 6px;
  padding: 1rem;
  text-align: left;
  background: var(--surface);
  box-shadow: 0 0 0 1px rgba(244, 240, 234, 0.08);
}
.pin:hover { background: var(--elevated); }
.pin:active { transform: scale(0.96); }
.pin.on { background: var(--accent-dim); }
.pin b {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--display);
  font-size: 1.25rem;
  letter-spacing: 0.08em;
  font-weight: 400;
}

.arsenal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.chip {
  min-height: 2.75rem;
  border-radius: 6px;
  padding: 0 0.75rem;
  font-size: 0.9rem;
  background: var(--surface);
  color: var(--muted);
  box-shadow: 0 0 0 1px rgba(244, 240, 234, 0.08);
}
.chip:hover { color: var(--fg); }
.chip.on { background: var(--accent-dim); color: var(--fg); }

.envs {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.envs li { border-bottom: 1px solid var(--border); }
.envs li:last-child { border-bottom: 0; }
.env-btn {
  width: 100%;
  min-height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  text-align: left;
}
.env-btn span:first-child { font-size: 1.5rem; }
.env-body {
  display: none;
  margin: 0;
  padding: 0 0 1rem;
  font-size: 0.9rem;
  color: var(--muted);
}
.env.open .env-body { display: block; }
.env.open .env-btn .kicker::after { content: none; }

.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border: 0;
  width: 100%;
}
.overlay.show { display: flex; }
.overlay p {
  font-family: var(--display);
  font-size: clamp(2.4rem, 10vw, 7rem);
  line-height: 0.86;
  letter-spacing: 0.05em;
  text-align: center;
  max-width: 56rem;
  margin: 0;
}
.overlay .kicker { margin-top: 2rem; }

/* =========================================================
   ICON additions to the supplied design
   ========================================================= */

/* ---- Feature image behind the header ---- */
.board-top.has-art {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  padding: 2.5rem 2rem;
  /* 36rem = 576px, which is the Feature image's own height at full width
     (2464x1152 renders 1232x576). Matching it exactly means the art shows at
     its true proportions instead of being cropped top and bottom. */
  min-height: 36rem;
  align-items: flex-end;
}
/* Below the container's max width the image scales, so the header follows it
   by aspect rather than holding a fixed height that would crop again. */
@media (max-width: 1264px) {
  .board-top.has-art { min-height: 0; aspect-ratio: 1232 / 576; }
}
@media (max-width: 700px) {
  /* On a phone that ratio leaves a strip too short for the name, so height
     wins over fidelity here. */
  .board-top.has-art { aspect-ratio: auto; min-height: 24rem; }

}
.board-art {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Set through a variable so the mobile override changes ONE value rather
     than re-declaring the property. A re-declaration depends on which rule
     comes last in the file; a variable doesn't. */
  object-position: var(--art-pos, center);
}
/* Fades bottom-left, where the name sits -- the art stays visible top-right
   rather than being flatly dimmed across the whole panel. */
.board-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--bg) 2%, color-mix(in srgb, var(--bg) 70%, transparent) 45%, transparent 85%),
    linear-gradient(to right, color-mix(in srgb, var(--bg) 85%, transparent), transparent 65%);
}
.board-top-copy { position: relative; z-index: 1; }
.board-top.has-art .stamp-btn { position: relative; z-index: 1; }

/* ---- Mobile: show the RIGHT half of the hero ----
   Placed AFTER the .board-art and .board-veil rules above deliberately. An
   earlier attempt sat in the 700px block further up the file, and since
   these selectors have equal specificity the later plain rule simply won
   and reset object-position back to centre.

   On a phone the panel is nearly square while the art is 2.14:1, so cover
   crops hard from both sides and centre shows a strip from the middle. */
@media (max-width: 700px) {
  /* The panel is nearly square on a phone while the art is wide, so cover
     crops from both sides. Anchoring right keeps the figure in frame -- they
     are usually placed to one side of these backdrops, not the middle. */
  .board-top.has-art { --art-pos: right center; }
  /* The left-to-right fade was written for a wide panel, where it darkened
     the copy side and left the art visible on the right. At this width it
     would sit over the part now being shown, so only the bottom-up fade
     remains -- the one the name needs to stay readable. */
  .board-veil {
    background: linear-gradient(to top, var(--bg) 2%, color-mix(in srgb, var(--bg) 72%, transparent) 48%, transparent 88%);
  }
}

/* ---- Histories inside the envelopes ----
   These hold our own tables rather than a line of text, so the padding and
   overflow have to suit a table. */
.env-body {
  display: none;
  padding: 0 1.15rem 1.15rem;
}
.env.open .env-body { display: block; }
.env-body table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.env-body th {
  text-align: left; padding: 0.5rem 0.6rem;
  font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--border); white-space: nowrap;
}
.env-body td {
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  vertical-align: top;
}
.env-body a { color: var(--accent); }
.env-body a:hover { text-decoration: underline; }
.env-body .history-scroll { max-height: 26rem; overflow-y: auto; }
.env-body .history-pager { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0 0; }
.env-body .history-pager button {
  border: 1px solid var(--border); background: var(--surface); color: var(--fg);
  border-radius: 6px; padding: 0.3rem 0.7rem; font-size: 0.75rem;
}
.env-body .history-pager button[disabled] { opacity: 0.4; cursor: default; }
.env-body .empty { color: var(--muted); font-style: italic; }

/* ---- Members under a Pact or Syndicate name ---- */
.board-members {
  margin: 0.6rem 0 0;
  font-family: var(--sans);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.1rem 0.55rem;
}
.board-members a { color: var(--fg); text-decoration: none; border-bottom: 1px solid transparent; }
.board-members a:hover { border-bottom-color: var(--accent); }
.board-members .sep { color: var(--muted); }
@media (max-width: 700px) { .board-members { font-size: 0.88rem; } }

/* A group's name runs as one line. Wraps rather than overflowing, since
   "Heirs To The Throne" is a lot wider than a surname. */
h1.last.whole {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 0.95;
}