/* Legacy Esports — legacy-esports.com
   Design tokens extracted from the approved prototype. Mobile-first. */

:root {
  --ink: #070709;
  --white: #f7f5fa;
  --muted: #aaa7b2;
  --soft: #bdb8c3;
  --purple: #8c37ff;
  --pink: #ed2da8;
  --line: #ffffff21;
  --card: #ffffff06;
  --grad-text: linear-gradient(90deg, #a769ff, #ed2da8);
  --grad-btn: linear-gradient(100deg, #8c37ff, #ed2da8);
  --font: Arial, Helvetica, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* :focus-within so the on-load jump to /#section stays instant (Chrome cancels a
   smooth on-load fragment scroll), while in-page anchor clicks still scroll smoothly. */
html:focus-within { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--white);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- type ---------- */

.display {
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.92;
  text-transform: uppercase;
}

.grad {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--soft);
  margin-bottom: 20px;
}

.kicker::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--grad-btn);
}

.kicker--plain::before { content: none; }

.lead { color: var(--soft); max-width: 34em; }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  padding: 16px 28px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--white);
}

.btn--grad { background: var(--grad-btn); }

.btn--ghost {
  background: #ffffff0a;
  border: 1px solid var(--line);
}

.btn--outline {
  border: 1px solid var(--purple);
  padding: 12px 20px;
}

/* ---------- header ---------- */

.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
}

.brand img { width: 46px; height: auto; }

.nav-toggle {
  background: none;
  border: 1px solid var(--line);
  color: var(--white);
  font: 700 11px var(--font);
  letter-spacing: 0.2em;
  padding: 10px 14px;
  cursor: pointer;
}

.site-nav {
  display: none;
  position: absolute;
  top: 100%; left: 0; right: 0;
  flex-direction: column;
  gap: 4px;
  background: var(--ink);
  border-bottom: 1px solid var(--line);
  padding: 16px 20px 24px;
}

.site-nav.open { display: flex; }

.site-nav a {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 12px 0;
}

.site-nav .btn--outline { align-self: flex-start; margin-top: 8px; }

.site-nav a[aria-current="page"] { color: var(--white); }
.site-nav a[aria-current="page"]::after {
  content: "";
  display: block;
  width: 28px; /* short dash while links are full-width in the mobile panel */
  height: 2px;
  margin-top: 4px;
  border-radius: 2px;
  background: var(--grad-btn);
}

@media (min-width: 820px) {
  .site-header { padding: 16px 40px; }
  .nav-toggle { display: none; }
  .site-nav {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 36px;
    background: none;
    border: 0;
    padding: 0;
  }
  .site-nav a { font-size: 11px; padding: 0; }
  .site-nav a[aria-current="page"]::after { width: auto; }
  .site-nav .btn--outline { margin: 0; padding: 12px 20px; }
}

/* ---------- sections ---------- */

section { position: relative; padding: 90px 0; }

.ghost {
  position: absolute;
  bottom: -0.18em;
  right: -0.05em;
  font-size: clamp(140px, 28vw, 420px);
  font-weight: 900;
  letter-spacing: -0.05em;
  color: #ffffff05;
  pointer-events: none;
  user-select: none;
  line-height: 1;
  white-space: nowrap;
}

.glow::before {
  content: "";
  position: absolute;
  top: 10%; right: -20%;
  width: 70vw; height: 70vw;
  max-width: 900px; max-height: 900px;
  background: radial-gradient(circle, #8c37ff2e 0%, transparent 65%);
  pointer-events: none;
}

/* ---------- hero ---------- */

.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 120px 0 70px;
  overflow: hidden;
}

.hero .wrap {
  display: grid;
  gap: 56px;
  align-items: center;
  width: 100%;
}

.hero h1 { font-size: clamp(50px, 10.5vw, 124px); letter-spacing: -0.075em; }

.hero .lead { margin: 24px 0 32px; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-card {
  justify-self: center;
  width: min(320px, 84vw);
  background: #0c0a10;
  border: 1px solid var(--line);
  padding: 28px;
  transform: rotate(2deg);
  box-shadow: 0 30px 80px #00000080;
}

.hero-card img { width: 170px; margin: 8px auto 20px; }

.hero-card .index { font-size: 11px; letter-spacing: 0.2em; color: var(--muted); }

.hero-card .rule-label {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 18px;
  line-height: 1.8;
}

.hero-card .rule {
  font-size: 21px;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-transform: uppercase;
}

.scroll-hint {
  position: absolute;
  bottom: 28px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (min-width: 900px) {
  .hero .wrap { grid-template-columns: 1.55fr 1fr; }
  .hero-card { justify-self: end; }
}

/* ---------- about ---------- */

.about .wrap { display: grid; gap: 48px; }

.about h2 { font-size: clamp(44px, 8vw, 96px); }

.about-copy .about-lead {
  font-size: clamp(22px, 3.2vw, 30px);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 16px;
}

.about-copy p + p { margin-top: 14px; }

.about-copy p { color: var(--soft); }

.story-link {
  display: inline-block;
  margin-top: 28px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--purple);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #c9a4ff;
}

.values {
  list-style: none;
  display: grid;
  gap: 16px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.values li {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.values .num { color: var(--pink); font-size: 10px; margin-right: 10px; }

@media (min-width: 900px) {
  .about .wrap { grid-template-columns: 1fr 1.2fr; }
  .values { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- rosters ---------- */

.rosters-head { display: grid; gap: 12px; margin-bottom: 44px; }

.rosters h2 { font-size: clamp(48px, 10vw, 110px); }

.rosters-sub { color: var(--soft); }

/* Hairline grid: 1px gaps over a line-coloured backing draw the rules,
   so the tiles need no borders of their own. */
.team-list {
  list-style: none;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.team-tile {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  padding: 26px 24px 28px;
  min-height: 168px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: background 0.4s ease;
}

.team-org {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

.team-name {
  position: relative;
  font-size: clamp(34px, 4vw, 46px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  text-transform: uppercase;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.team-mark {
  position: absolute;
  right: -26px;
  bottom: -62px;
  font-size: 190px;
  font-weight: 900;
  line-height: 1;
  color: #ffffff07;
  pointer-events: none;
  transition: color 0.4s ease;
}

@media (hover: hover) {
  .team-tile:hover { background: #ffffff0b; }
  .team-tile:hover .team-mark { color: #ffffff12; }
}

@media (prefers-reduced-motion: reduce) {
  .team-tile, .team-mark { transition: none; }
}

/* A tile with a roster page: the link around the name is stretched over the
   whole tile via ::after, so the name stays the accessible label. */
.team-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.team-tile:focus-within { outline: 2px solid var(--purple); outline-offset: -2px; }

/* Auto margin beats the tile's space-between, so the name and its
   "View roster" line stay together at the bottom like the other tiles. */
.team-link { margin-top: auto; }

.team-cta {
  position: relative;
  margin-top: 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #c9a4ff;
}

.team-cta::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 18px;
  height: 1px;
  margin-right: 10px;
  background: currentColor;
}

@media (min-width: 620px) { .team-list { grid-template-columns: repeat(3, 1fr); } }

/* ---------- leadership (light band) ---------- */

.leadership {
  background: var(--white);
  color: var(--ink);
}

.leadership .kicker { color: #6b6675; }

.leader-grid {
  display: grid;
  gap: 12px;
}

.leader-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #ffffff;
  border: 1px solid #07070914;
  padding: 20px;
}

.leader-card .avatar {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--grad-btn);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  display: grid;
  place-items: center;
}

.leader-card .name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.leader-card .role { font-size: 12px; color: #6b6675; }

.org-link {
  display: inline-block;
  margin-top: 32px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--purple);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--purple);
}

@media (min-width: 640px) { .leader-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .leader-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .leader-grid { grid-template-columns: repeat(5, 1fr); } }

/* ---------- scheduling banner ---------- */

.scheduling h2 {
  font-size: clamp(34px, 6.5vw, 78px);
  max-width: 15em;
}

.scheduling h2 .dim { color: #8d8896; }

/* ---------- join ---------- */

.join { overflow: hidden; }

.join .wrap { display: grid; gap: 48px; }

.join h2 { font-size: clamp(44px, 9vw, 100px); }

.join .lead { margin-top: 20px; }

.contact-cards { display: grid; gap: 16px; align-content: start; }

.contact-card {
  background: #0b0812;
  border: 1px solid #8c37ff4d;
  box-shadow: 0 0 40px #8c37ff14;
  padding: 26px;
}

.contact-card .role {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.contact-card .name {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.01em;
  margin: 6px 0 2px;
}

.contact-card .phone { color: var(--soft); font-size: 15px; }

.contact-card .cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #c9a4ff;
}

@media (min-width: 900px) {
  .join .wrap { grid-template-columns: 1fr 1fr; }
}

/* ---------- connect ---------- */

.connect-head { display: grid; gap: 12px; margin-bottom: 44px; }

.connect h2 { font-size: clamp(48px, 10vw, 110px); }

.social-grid {
  display: grid;
  border: 1px solid var(--line);
}

.social-card {
  padding: 28px 24px;
  border-bottom: 1px solid var(--line);
}

.social-card:last-child { border-bottom: 0; }

.social-card .platform {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.social-card .handle {
  font-size: 22px;
  font-weight: 900;
  margin: 8px 0 16px;
  text-transform: uppercase;
}

.social-card .cta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #c9a4ff;
}

@media (min-width: 820px) {
  .social-grid { grid-template-columns: repeat(3, 1fr); }
  .social-card { border-bottom: 0; border-right: 1px solid var(--line); }
  .social-card:last-child { border-right: 0; }
}

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 32px 0;
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- our-story page ---------- */

.story-hero {
  min-height: 88svh;
  display: flex;
  align-items: center;
  padding: 140px 0 80px;
  overflow: hidden;
}

.story-hero h1 { font-size: clamp(48px, 11vw, 130px); }

.story-hero .lead { margin: 24px 0 36px; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }

.chips span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--soft);
  border: 1px solid var(--line);
  padding: 10px 14px;
}

.chapter { padding: 70px 0; border-top: 1px solid var(--line); }

.chapter:first-of-type { border-top: 0; }

.chapter .ch-num {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: #c9a4ff;
  margin-bottom: 14px;
}

.chapter h2 {
  font-size: clamp(34px, 7vw, 80px);
  margin-bottom: 28px;
}

.chapter p {
  color: var(--soft);
  font-size: 18px;
  line-height: 1.85;
  max-width: 42em;
}

.chapter p + p { margin-top: 16px; }

.chapter .shout {
  color: var(--white);
  font-weight: 900;
  font-size: clamp(20px, 3vw, 26px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.4;
}

.chapter ul.first-roster {
  list-style: none;
  margin: 20px 0;
}

.chapter ul.first-roster li {
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
}

.story-ending {
  text-align: center;
  padding: 110px 0;
  border-top: 1px solid var(--line);
}

.story-ending p { color: var(--soft); }

.story-ending .big {
  font-size: clamp(28px, 5.5vw, 54px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.15;
  max-width: 18em;
  margin: 20px auto 24px;
}

.story-ending .btn { margin-top: 28px; }

/* ---------- team roster page (/teams/<slug>/) ---------- */

.roster-hero {
  min-height: 62svh;
  display: flex;
  align-items: center;
  padding: 140px 0 70px;
  overflow: hidden;
}

.roster-hero .wrap { width: 100%; }

.roster-hero h1 { font-size: clamp(64px, 16vw, 190px); letter-spacing: -0.075em; }

.roster-hero .lead { margin: 24px 0 32px; }

.back-link {
  display: inline-block;
  margin-bottom: 40px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.back-link:hover, .back-link:focus-visible { color: var(--white); }

.roster { padding-top: 40px; }

.roster-head { display: grid; gap: 12px; margin-bottom: 32px; }

.roster-head--subs { margin-top: 80px; }

.roster h2 { font-size: clamp(38px, 7vw, 72px); }

/* Same hairline-grid trick as .team-list so the roster reads as the team
   tile opened up. */
.player-list {
  list-style: none;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.player {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  padding: 26px 24px 28px;
  min-height: 176px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: background 0.4s ease;
}

@media (hover: hover) {
  .player:hover { background: #ffffff0b; }
  .player:hover .player-mark { color: #ffffff12; }
}

@media (prefers-reduced-motion: reduce) {
  .player, .player-mark { transition: none; }
}

.player-role {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

.player-name {
  position: relative;
  margin-top: 10px;
  font-size: clamp(28px, 3vw, 34px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.player-line {
  position: relative;
  color: var(--soft);
  font-size: 15px;
  line-height: 1.55;
  max-width: 24em;
  margin: 14px 0 auto;
}

.player-mark {
  position: absolute;
  right: -26px;
  bottom: -62px;
  font-size: 190px;
  font-weight: 900;
  line-height: 1;
  color: #ffffff07;
  pointer-events: none;
  user-select: none;
  transition: color 0.4s ease;
}

.player-list--subs .player-name { background: none; color: var(--soft); }

/* Rank chip: the swatch carries the tier colour, the label stays muted so
   six different tiers do not turn the grid into a paint chart. */
.rank {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: 22px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--soft);
}

.rank::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--rank, var(--muted));
}

.rank--bronze     { --rank: #b87333; }
.rank--silver     { --rank: #c9ccd6; }
.rank--gold       { --rank: #e8b923; }
.rank--platinum   { --rank: #8fe3e3; }
.rank--diamond    { --rank: #5aa9ff; }
.rank--crimson    { --rank: #e0245e; }
.rank--iridescent { --rank: linear-gradient(135deg, #ff8fd1, #8fe3ff, #d4ff8f); }
.rank--top250     { --rank: var(--white); }

@media (min-width: 680px) {
  .player-list { grid-template-columns: repeat(2, 1fr); }
  /* Five players in two columns leaves an orphan; let it take the last row. */
  .player-list--five .player:nth-child(5) { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  /* Five players as a row of three over a row of two, with no empty cell:
     a six-column grid where the top row spans 2 each and the bottom row 3. */
  .player-list--five { grid-template-columns: repeat(6, 1fr); }
  .player-list--five .player { grid-column: span 2; }
  .player-list--five .player:nth-child(n+4) { grid-column: span 3; }
}
@media (min-width: 1040px) {
  .player-list { grid-template-columns: repeat(4, 1fr); }
  .player-list--five { grid-template-columns: repeat(6, 1fr); }
  .player-list--subs { grid-template-columns: repeat(2, 1fr); max-width: 50%; }
}

/* ---------- organigram page (/organigram/) ---------- */

.org-hero {
  min-height: 56svh;
  display: flex;
  align-items: center;
  padding: 140px 0 70px;
  overflow: hidden;
}

.org-hero .wrap { width: 100%; }

.org-hero h1 { font-size: clamp(44px, 9.5vw, 118px); letter-spacing: -0.075em; }

.org-hero .lead { margin-top: 24px; }

/* Every box on the chart. The department swatch colour rides on --dept. */
.node {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--ink);
  border: 1px solid var(--line);
  padding: 18px 20px 20px;
}

.node-dept {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.node-dept::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--dept, var(--muted));
}

.node-name {
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-transform: uppercase;
}

.node-role { font-size: 12px; line-height: 1.5; color: var(--soft); }

.node-link { display: block; }
.node-link:hover .node-name, .node-link:focus-visible .node-name { color: #c9a4ff; }

.dept--strategy { --dept: var(--white); }
.dept--esports  { --dept: var(--purple); }
.dept--recruit  { --dept: var(--pink); }
.dept--tech     { --dept: #5aa9ff; }

/* The clan leader: the one loud box on the page. */
.node--lead {
  background: #0b0812;
  border-color: #8c37ff4d;
  box-shadow: 0 0 40px #8c37ff14;
  padding: 26px 28px 28px;
}

.node--lead .node-name {
  font-size: clamp(30px, 4vw, 44px);
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.node--lead .node-role { font-size: 14px; }

/* Leadership tree: the clan leader over the four heads. Mobile stacks
   the heads in a hairline grid under a single stub; desktop draws the
   classic bracket with pseudo-elements. */
.org-top { padding-top: 20px; }

.org-tree, .org-tree ul { list-style: none; }

.org-tree > li > .node--lead { width: min(360px, 100%); margin: 0 auto; }

.org-tree ul {
  position: relative;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 28px;
}

.org-tree ul::before {
  content: "";
  position: absolute;
  top: -29px;
  left: 50%;
  width: 1px;
  height: 28px;
  background: var(--purple);
}

.org-tree ul .node { border: 0; border-top: 2px solid var(--dept); height: 100%; }

.org-tree ul .node-name { font-size: 24px; }

@media (min-width: 620px) { .org-tree ul { grid-template-columns: repeat(2, 1fr); } }

@media (min-width: 1040px) {
  .org-tree { display: flex; justify-content: center; }
  .org-tree > li { display: flex; flex-direction: column; align-items: center; width: 100%; }
  .org-tree ul {
    display: flex;
    justify-content: center;
    gap: 0;
    width: 100%;
    background: none;
    border: 0;
    padding-top: 28px;
    margin-top: 28px;
  }
  .org-tree ul::before { top: -28px; }
  .org-tree ul > li { position: relative; flex: 1 1 0; max-width: 280px; padding: 28px 8px 0; }
  .org-tree ul .node { border: 1px solid var(--line); border-top: 2px solid var(--dept); }
  /* Left half and right half of the bracket; the right half also carries the stub. */
  .org-tree ul > li::before, .org-tree ul > li::after {
    content: "";
    position: absolute;
    top: 0;
    right: 50%;
    width: 50%;
    height: 28px;
    border-top: 1px solid var(--purple);
  }
  .org-tree ul > li::after { right: auto; left: 50%; border-left: 1px solid var(--purple); }
  .org-tree ul > li:first-child::before { border-top: 0; }
  .org-tree ul > li:last-child::after { border-top: 0; }
}

/* Regions: one hairline grid per region, one column per department. */
.org-region { padding: 70px 0; border-top: 1px solid var(--line); }

.region-head { display: grid; gap: 12px; margin-bottom: 40px; }

.region-head h2 { font-size: clamp(40px, 8vw, 88px); }

.chains {
  display: grid;
  gap: 24px;
  align-items: start;
}

.chain {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.chain .node { background: var(--card); }

.chain .node--dept { border-top: 2px solid var(--dept); }

.chain .node--dept .node-name { font-size: 22px; }

/* Connector between two boxes in a chain: a coloured line with a square end. */
.chain li + li { position: relative; margin-top: 30px; }

.chain li + li::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -31px;
  width: 1px;
  height: 30px;
  background: var(--dept);
}

.chain li + li::after {
  content: "";
  position: absolute;
  left: calc(50% - 2px);
  top: -3px;
  width: 5px;
  height: 5px;
  background: var(--dept);
}

@media (min-width: 620px) { .chains { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .chains--3 { grid-template-columns: repeat(3, 1fr); }
  .chains--4 { grid-template-columns: repeat(4, 1fr); }
}

.org-rules { padding: 70px 0; border-top: 1px solid var(--line); }

.rules {
  list-style: none;
  display: grid;
  gap: 18px;
  max-width: 40em;
}

.rules li {
  position: relative;
  padding-left: 40px;
  color: var(--soft);
  font-size: 17px;
  line-height: 1.6;
}

.rules li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 24px;
  height: 2px;
  background: var(--grad-btn);
}