:root {
  --bg:#050607;
  --surface:#0c0f12;
  --surface-2:#11161b;
  --surface-3:#171d23;
  --text:#f5f8fb;
  --muted:#aab5c0;
  --line:rgba(255,255,255,.10);
  --accent:#00ffff;
  --cyan:#00ffff;
  --plaque-dark:#70757f;
  --plaque-mid:#aeb4bc;
  --plaque-light:#dfe4ea;
  --shadow:0 20px 55px rgba(0,0,0,.34);
}

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

html {
  scroll-behavior:smooth;
  scroll-padding-top:112px;
}

body {
  margin:0;
  background:
    radial-gradient(circle at 50% 0,rgba(0,255,255,.055),transparent 28rem),
    var(--bg);
  color:var(--text);
  font-family:"Yu Gothic","YuGothic","Segoe UI",Arial,sans-serif;
  line-height:1.65;
}

img {
  max-width:100%;
}

a {
  color:inherit;
}

.site-header {
  position:sticky;
  top:0;
  z-index:50;
  isolation:isolate;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(17,24,31,.985) 0%, rgba(8,13,18,.985) 54%, rgba(3,7,10,.99) 100%);
  border-bottom:1px solid rgba(0,255,255,.58);
  box-shadow:
    0 10px 34px rgba(0,0,0,.46),
    0 1px 0 rgba(255,255,255,.05) inset,
    0 -1px 18px rgba(0,255,255,.11) inset;
  backdrop-filter:blur(14px);
}

.site-header::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      115deg,
      transparent 0 88px,
      rgba(255,255,255,.025) 88px 90px,
      transparent 90px 176px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 124px,
      rgba(0,255,255,.025) 124px 125px
    );
  opacity:.9;
}

.site-header::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,255,255,.22) 7%,
      #00ffff 18%,
      rgba(0,255,255,.34) 42%,
      rgba(0,255,255,.08) 70%,
      transparent 100%
    );
  box-shadow:0 0 12px rgba(0,255,255,.34);
}

.header-inner {
  position:relative;
  z-index:1;
  width:min(1380px,calc(100% - 40px));
  margin:0 auto;
  min-height:94px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
}

.brand {
  --brand-mark-size:81px;
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:14px;
  min-width:0;
  text-decoration:none;
}

.brand::before {
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  left:calc(var(--brand-mark-size) / 2);
  top:50%;
  width:1250px;
  height:1250px;
  transform:translate(-50%,-50%);
  background:radial-gradient(
    ellipse at center,
    rgba(0,255,255,.64) 0%,
    rgba(0,255,255,.34) 27%,
    rgba(0,255,255,.06) 52%,
    transparent 72%
  );
}

.brand-mark {
  width:81px;
  height:81px;
  object-fit:contain;
  flex:0 0 auto;
}

.brand-title-image {
  height:34px;
  width:auto;
  display:block;
  object-fit:contain;
  min-width:0;
}

.site-nav {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:19px;
}

.site-nav a {
  position:relative;
  padding:9px 0;
  color:#eaf3f7;
  text-decoration:none;
  text-transform:uppercase;
  font-size:.82rem;
  font-weight:900;
  letter-spacing:.07em;
}

.site-nav a::after {
  content:"";
  position:absolute;
  left:0;
  bottom:3px;
  width:100%;
  height:2px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .2s ease;
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after {
  transform:scaleX(1);
}

.site-nav a {
  text-shadow:0 0 12px rgba(0,255,255,0);
  transition:color .18s ease,text-shadow .18s ease;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color:#ffffff;
  text-shadow:0 0 12px rgba(0,255,255,.30);
}

.brand-mark {
  filter:drop-shadow(0 0 8px rgba(0,255,255,.18));
}

.brand-title-image {
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.18));
}

.page-shell {
  width:min(1380px,calc(100% - 40px));
  margin:0 auto;
  padding:46px 0 90px;
}

.hero {
  margin-bottom:52px;
}

/* Etched metal Global Statement */
.etched-plaque {
  position:relative;
  padding:16px;
  border-radius:22px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),
    linear-gradient(135deg,#13161a 0%,#090b0d 100%);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:var(--shadow);
}

.plaque-frame {
  position:relative;
  border-radius:18px;
  padding:18px;
  background:linear-gradient(145deg,#1b2026 0%,#090b0d 36%,#2d343d 100%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 18px 35px rgba(0,0,0,.38);
}

.plaque-surface {
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding:42px clamp(24px,4vw,56px);
  border-radius:14px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.08)),
    linear-gradient(135deg,var(--plaque-light) 0%,var(--plaque-mid) 42%,var(--plaque-dark) 100%);
  border:1px solid rgba(255,255,255,.32);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.55),
    inset 0 -1px 1px rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(255,255,255,.12),
    0 0 0 1px rgba(0,0,0,.28);
}

.plaque-surface::before {
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(115deg,rgba(255,255,255,.055) 0 2px,transparent 2px 18px),
    linear-gradient(180deg,rgba(255,255,255,.12),transparent 22%,transparent 78%,rgba(0,0,0,.08));
  mix-blend-mode:soft-light;
  pointer-events:none;
}

.plaque-surface::after {
  content:"";
  position:absolute;
  inset:10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:
    inset 0 0 25px rgba(255,255,255,.11),
    inset 0 0 35px rgba(0,0,0,.06);
  pointer-events:none;
}

.plaque-surface p {
  position:relative;
  z-index:1;
  margin:0;
  color:#545a63;
  font-size:clamp(1rem,1.15vw,1.14rem);
  font-weight:800;
  text-shadow:
    0 1px 0 rgba(255,255,255,.45),
    0 -1px 0 rgba(0,0,0,.13);
}

.plaque-surface p + p {
  margin-top:20px;
}

.plaque-heading {
  margin:0 0 24px !important;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:clamp(1rem,1.9vw,1.7rem) !important;
  font-weight:900 !important;
  color:#5a616a !important;
}

.plaque-signature {
  position:relative;
  z-index:1;
  margin-top:28px;
  padding-top:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  color:#545a63;
}

.plaque-signature-mark {
  display:block;
  width:64px;
  height:64px;
  flex:0 0 auto;
  background:
    linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0) 42%),
    linear-gradient(135deg,#8f959d 0%,#6a7078 42%,#515860 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -1px 0 rgba(0,0,0,.14);
  -webkit-mask:url("assets/fsc-mark.png") center / contain no-repeat;
  mask:url("assets/fsc-mark.png") center / contain no-repeat;
  opacity:.98;
}

.plaque-signature-text {
  font-size:clamp(.9rem,1.7vw,1.55rem);
  font-weight:800;
  letter-spacing:.035em;
  color:#545a63;
  text-shadow:
    0 1px 0 rgba(255,255,255,.45),
    0 -1px 0 rgba(0,0,0,.13);
}

.plaque-screws span {
  position:absolute;
  width:18px;
  height:18px;
  border-radius:50%;
  background:
    radial-gradient(circle at 32% 28%,rgba(255,255,255,.9),rgba(255,255,255,.15) 28%,transparent 29%),
    linear-gradient(145deg,#d7dce2 0%,#8f96a0 44%,#5e646d 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.55),
    inset 0 -1px 1px rgba(0,0,0,.3),
    0 1px 3px rgba(0,0,0,.42);
}

.plaque-screws span::after {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:10px;
  height:2px;
  border-radius:999px;
  background:rgba(60,65,72,.68);
  transform:translate(-50%,-50%) rotate(-22deg);
}

.plaque-screws span:nth-child(1) { top:14px; left:14px; }
.plaque-screws span:nth-child(2) { top:14px; right:14px; }
.plaque-screws span:nth-child(3) { bottom:14px; left:14px; }
.plaque-screws span:nth-child(4) { bottom:14px; right:14px; }

/* General sections */
.section-block {
  padding:44px 0 10px;
}

.section-block + .section-block {
  margin-top:22px;
  border-top:1px solid rgba(255,255,255,.08);
}

.section-heading {
  max-width:940px;
  margin-bottom:28px;
}

.section-kicker {
  margin:0 0 7px;
  color:var(--accent);
  text-transform:uppercase;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.18em;
}

.section-heading h1,
.section-heading h2 {
  margin:0;
  font-size:clamp(2rem,4vw,3.6rem);
  line-height:1.05;
  letter-spacing:.015em;
}

.section-heading > p:not(.section-kicker) {
  margin:14px 0 0;
  max-width:880px;
  color:var(--muted);
  font-size:1.04rem;
}

.definition strong {
  color:#fff;
}

/* Staff & Wonders */
.two-halves {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}

.identity-card {
  min-height:230px;
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  align-items:center;
  gap:24px;
  padding:28px;
  border:1px solid var(--line);
  border-radius:22px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012)),
    var(--surface);
  box-shadow:var(--shadow);
}

.identity-card:hover {
  border-color:rgba(0,255,255,.32);
}

.identity-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:140px;
}

.identity-icon img {
  width:140px;
  max-height:140px;
  object-fit:contain;
}

.staff-card .identity-icon img {
  width:132px;
}

.identity-card h2 {
  margin:0 0 8px;
  font-size:1.55rem;
}

.identity-card p {
  margin:0;
  color:#d9e0e7;
}

/* Branches */
.branch-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:16px;
}

.branch-card {
  position:relative;
  overflow:hidden;
  min-height:335px;
  padding:18px 17px 20px;
  border:1px solid var(--line);
  border-radius:18px;
  background:
    linear-gradient(180deg,rgba(0,255,255,.08),transparent 48%),
    var(--surface);
  text-align:center;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}

.branch-card::before {
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  top:0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:.42;
}

.branch-card:hover {
  transform:translateY(-3px);
  border-color:rgba(0,255,255,.36);
  box-shadow:0 18px 32px rgba(0,0,0,.28);
}

.branch-card img {
  width:min(174px,88%);
  aspect-ratio:500/485;
  object-fit:contain;
  display:block;
  margin:0 auto 10px;
}

.branch-card h3 {
  margin:0 0 9px;
  font-size:1.03rem;
  letter-spacing:.025em;
}

.branch-card p {
  margin:0;
  color:#bfc8d1;
  font-size:.88rem;
  line-height:1.55;
}

/* Classes */
.rule-banner {
  padding:18px 20px;
  margin-bottom:20px;
  border:1px solid rgba(0,255,255,.27);
  border-left:4px solid var(--accent);
  border-radius:12px;
  background:rgba(0,255,255,.055);
  color:#dfe8ef;
}

.rule-banner strong {
  color:#fff;
}

.table-shell {
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface);
  box-shadow:var(--shadow);
}

.class-table {
  width:100%;
  border-collapse:collapse;
  min-width:620px;
}

.class-table th,
.class-table td {
  padding:14px 18px;
  text-align:left;
  border-bottom:1px solid rgba(255,255,255,.075);
}

.class-table th {
  background:#151b20;
  color:var(--accent);
  text-transform:uppercase;
  font-size:.76rem;
  letter-spacing:.1em;
}

.class-table td:first-child {
  width:160px;
  color:#fff;
  font-weight:900;
}

.class-table tr:last-child td {
  border-bottom:0;
}

.class-table tbody tr:hover {
  background:rgba(255,255,255,.022);
}

.class-examples {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:20px;
}

.class-examples article {
  padding:20px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface);
}

.class-examples h3 {
  margin:0 0 12px;
  color:var(--accent);
}

.class-examples p {
  margin:7px 0;
  color:#c8d1d9;
  font-size:.91rem;
}

.class-examples strong {
  color:#fff;
}

.example-record {
  margin-top:20px;
  display:grid;
  grid-template-columns:auto auto auto 1fr;
  align-items:center;
  gap:12px 18px;
  padding:20px;
  border-radius:16px;
  background:
    linear-gradient(90deg,rgba(0,255,255,.075),transparent 55%),
    var(--surface-2);
  border:1px solid rgba(0,255,255,.22);
}

.record-label {
  display:inline-block;
  color:var(--accent);
  text-transform:uppercase;
  font-size:.7rem;
  font-weight:900;
  letter-spacing:.12em;
}

.example-record p {
  margin:0;
  color:var(--muted);
  font-size:.9rem;
}

/* Wonders */
.wonders-section {
  position:relative;
}

.wonder-intro {
  display:grid;
  grid-template-columns:minmax(280px,380px) minmax(0,1fr);
  gap:22px;
  align-items:stretch;
}

.wonder-logo-panel {
  display:flex;
  align-items:center;
  gap:20px;
  padding:22px;
  border:1px solid rgba(0,255,255,.25);
  border-radius:20px;
  background:
    radial-gradient(circle at 22% 50%,rgba(0,255,255,.07),transparent 34%),
    var(--surface);
}

.wonder-logo-panel img {
  width:154px;
  flex:0 0 auto;
}

.wonder-format {
  display:block;
  margin-top:4px;
  font-size:clamp(2rem,4vw,3.3rem);
  letter-spacing:.04em;
}

.wonder-copy {
  padding:22px 24px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--surface);
}

.wonder-copy p {
  margin:0;
  color:#d1dae2;
}

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

.wonder-record {
  margin-top:20px;
  padding:22px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border-radius:18px;
  border:1px solid rgba(0,255,255,.3);
  background:
    linear-gradient(135deg,rgba(0,255,255,.085),transparent 45%),
    #0b1013;
  box-shadow:var(--shadow);
}

.wonder-record h3 {
  margin:3px 0 0;
  font-size:2rem;
}

.wonder-record dl {
  margin:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(120px,1fr));
  gap:10px;
}

.wonder-record dl > div {
  padding:11px 14px;
  border-radius:12px;
  background:rgba(255,255,255,.045);
}

.wonder-record dt {
  color:var(--muted);
  font-size:.7rem;
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:.1em;
}

.wonder-record dd {
  margin:3px 0 0;
  color:#fff;
  font-weight:900;
}

.metric-definitions {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:18px;
}

.metric-definitions article {
  padding:18px;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--surface);
}

.metric-definitions h3 {
  margin:0;
  color:var(--accent);
  font-size:1rem;
}

.metric-definitions p {
  margin:6px 0 0;
  color:#c5ced7;
  font-size:.9rem;
}

.threat-explainer {
  margin-top:20px;
  padding:24px;
  border-radius:18px;
  border:1px solid var(--line);
  background:
    linear-gradient(135deg,rgba(0,255,255,.045),transparent 45%),
    var(--surface);
}

.threat-explainer h3 {
  margin:0 0 9px;
  font-size:1.25rem;
}

.threat-explainer p {
  margin:8px 0;
  color:#cbd4dc;
}

.psychic-example {
  margin-top:16px;
  padding:14px 16px;
  border-left:3px solid var(--accent);
  background:rgba(0,255,255,.05);
  color:#e1e8ee;
}

.threat-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:18px;
}

.scale-card {
  padding:22px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface);
}

.scale-card h3 {
  margin:0 0 16px;
  color:var(--accent);
}

.scale-list {
  margin:0;
  padding:0;
  list-style:none;
}

.scale-list li {
  display:grid;
  grid-template-columns:44px 1fr;
  gap:12px;
  padding:9px 0;
  border-top:1px solid rgba(255,255,255,.065);
}

.scale-list li:first-child {
  border-top:0;
}

.scale-list strong {
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:50%;
  color:#001014;
  background:var(--accent);
  font-size:.88rem;
}

.scale-list span {
  color:#c8d1d9;
  align-self:center;
  font-size:.9rem;
}

.site-footer {
  width:min(1380px,calc(100% - 40px));
  margin:0 auto;
  padding:34px 0 46px;
  display:flex;
  align-items:center;
  gap:13px;
  border-top:1px solid rgba(255,255,255,.08);
  color:var(--muted);
}

.site-footer img {
  width:42px;
  height:42px;
  object-fit:contain;
}

.site-footer p {
  margin:0;
  font-weight:800;
  color:#d9e0e7;
}

.site-footer a {
  margin-left:auto;
  color:var(--accent);
  text-decoration:none;
  font-size:.88rem;
  font-weight:800;
}

@media(max-width:1180px) {
  .branch-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .canon-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:900px) {
  .header-inner {
    min-height:auto;
    padding:12px 0;
    align-items:flex-start;
    flex-direction:column;
  }

  .brand {
    --brand-mark-size:63px;
  }

  .brand-mark {
    width:63px;
    height:63px;
  }

  .brand-title-image {
    height:28px;
  }

  .site-nav {
    justify-content:flex-start;
    gap:14px 18px;
  }

  .two-halves,
  .threat-grid {
    grid-template-columns:1fr;
  }

  .identity-card {
    min-height:0;
  }

  .branch-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .class-examples {
    grid-template-columns:1fr;
  }

  .example-record {
    grid-template-columns:1fr 1fr;
  }

  .example-record .record-label,
  .example-record p {
    grid-column:1 / -1;
  }

  .wonder-intro {
    grid-template-columns:1fr;
  }

  .wonder-record {
    align-items:flex-start;
    flex-direction:column;
  }

  .wonder-record dl {
    width:100%;
  }
}

@media(max-width:650px) {
  html {
    scroll-padding-top:160px;
  }

  .page-shell,
  .header-inner,
  .site-footer {
    width:min(100% - 24px,1380px);
  }

  .page-shell {
    padding-top:24px;
  }

  .brand-title-image {
    height:23px;
  }

  .site-nav a {
    font-size:.76rem;
  }

  .plaque-frame {
    padding:12px;
  }

  .plaque-surface {
    padding:30px 18px;
  }

  .plaque-heading {
    font-size:clamp(.98rem,5.4vw,1.24rem) !important;
  }

  .plaque-signature {
    flex-direction:column;
    gap:8px;
  }

  .plaque-signature-mark {
    width:48px;
    height:48px;
  }

  .plaque-signature-text {
    font-size:1rem;
  }

  .section-block {
    padding-top:36px;
  }

  .section-heading h1,
  .section-heading h2 {
    font-size:clamp(1.8rem,8vw,2.55rem);
  }

  .two-halves {
    gap:14px;
  }

  .identity-card {
    grid-template-columns:1fr;
    text-align:center;
    padding:22px 18px;
  }

  .identity-icon {
    min-height:110px;
  }

  .identity-icon img,
  .staff-card .identity-icon img {
    width:110px;
    max-height:110px;
  }

  .branch-grid {
    grid-template-columns:1fr;
  }

  .branch-card {
    min-height:0;
  }

  .branch-card img {
    width:160px;
  }

  .example-record {
    grid-template-columns:1fr;
  }

  .wonder-logo-panel {
    flex-direction:column;
    text-align:center;
  }

  .wonder-logo-panel img {
    width:138px;
  }

  .wonder-record dl {
    grid-template-columns:1fr;
  }

  .metric-definitions,
  .canon-grid {
    grid-template-columns:1fr;
  }

  .canon-grid article {
    min-height:0;
  }

  .site-footer {
    flex-wrap:wrap;
  }

  .site-footer a {
    margin-left:0;
    width:100%;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after {
    transition:none !important;
    animation:none !important;
  }
}


/* v90 multi-page FSC structure */
.site-nav a.is-active::after {
  transform:scaleX(1)
}

.subpage-shell {
  padding-top:54px
}

.subpage-hero {
  max-width:980px;
  padding:18px 0 22px
}

.subpage-hero h1 {
  margin:0;
  font-size:clamp(2.4rem,5vw,4.6rem);
  line-height:1.02;
  letter-spacing:.01em
}

.subpage-hero > p:not(.section-kicker),
.subpage-hero > div > p:not(.section-kicker) {
  margin:16px 0 0;
  max-width:900px;
  color:var(--muted);
  font-size:1.06rem
}

.first-subpage-section {
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.08)
}

.wonders-hero {
  display:grid;
  grid-template-columns:180px minmax(0,1fr);
  gap:26px;
  align-items:center;
  max-width:1080px
}

.subpage-hero-emblem {
  width:180px;
  object-fit:contain
}

.home-about {
  padding-top:30px
}

.home-link-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px
}

.home-link-card {
  min-height:150px;
  display:grid;
  grid-template-columns:96px minmax(0,1fr);
  gap:18px;
  align-items:center;
  padding:20px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface);
  color:inherit;
  text-decoration:none;
  transition:transform .18s ease,border-color .18s ease
}

.home-link-card:hover {
  transform:translateY(-2px);
  border-color:rgba(0,255,255,.36)
}

.home-link-icon {
  display:flex;
  align-items:center;
  justify-content:center
}

.home-link-icon img {
  width:88px;
  max-height:88px;
  object-fit:contain
}

.home-link-card strong {
  display:block;
  margin-bottom:5px;
  color:#fff;
  font-size:1.18rem
}

.home-link-card small {
  display:block;
  color:var(--muted);
  font-size:.9rem;
  line-height:1.5
}

.branch-card h2 {
  margin:0 0 9px;
  font-size:1.03rem;
  letter-spacing:.025em
}

.class-note {
  margin-top:20px;
  padding:22px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface)
}

.class-note h2 {
  margin:0 0 8px;
  font-size:1.2rem
}

.class-note p {
  margin:8px 0 0;
  color:#c8d1d9
}

.class-examples h2 {
  margin:0 0 12px;
  color:var(--accent);
  font-size:1.08rem
}

.wonder-record h2 {
  margin:3px 0 0;
  font-size:2rem
}

.metric-definitions h2 {
  margin:0;
  color:var(--accent);
  font-size:1rem
}

.threat-explainer h2 {
  margin:0 0 9px;
  font-size:1.25rem
}

.scale-card h2 {
  margin:0 0 16px;
  color:var(--accent);
  font-size:1.12rem
}

@media(max-width:900px) {
  .home-link-grid {
    grid-template-columns:1fr
  }

  .wonders-hero {
    grid-template-columns:130px minmax(0,1fr)
  }

  .subpage-hero-emblem {
    width:130px
  }
}

@media(max-width:650px) {
  .subpage-shell {
    padding-top:30px
  }

  .subpage-hero h1 {
    font-size:clamp(2rem,10vw,3rem)
  }

  .wonders-hero {
    grid-template-columns:1fr;
    text-align:center
  }

  .subpage-hero-emblem {
    width:126px;
    margin:0 auto
  }

  .home-link-card {
    grid-template-columns:72px minmax(0,1fr)
  }

  .home-link-icon img {
    width:66px;
    max-height:66px
  }
}


/* v92: richer Branches page */
.branches-hero {
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(440px,.95fr);
  gap:54px;
  align-items:center;
  padding:18px 0 42px
}

.branches-hero-copy h1 {
  margin:0;
  font-size:clamp(2.7rem,5.2vw,5rem);
  line-height:.98;
  letter-spacing:.01em
}

.branches-hero-copy > p:not(.section-kicker) {
  margin:18px 0 0;
  max-width:760px;
  color:var(--muted);
  font-size:1.08rem
}

.branch-stat-row {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:26px;
  max-width:650px
}

.branch-stat-row > div {
  padding:14px 16px;
  border:1px solid rgba(0,255,255,.20);
  border-radius:13px;
  background:
    linear-gradient(145deg,rgba(0,255,255,.065),rgba(255,255,255,.018)),
    var(--surface)
}

.branch-stat-row strong {
  display:block;
  color:var(--accent);
  font-size:1.3rem;
  line-height:1
}

.branch-stat-row span {
  display:block;
  margin-top:6px;
  color:#c4cdd5;
  font-size:.75rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.07em
}

.branch-emblem-wall {
  position:relative;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:9px;
  padding:22px;
  border:1px solid rgba(0,255,255,.20);
  border-radius:24px;
  background:
    radial-gradient(circle at 50% 50%,rgba(0,255,255,.085),transparent 58%),
    linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.008)),
    var(--surface);
  box-shadow:var(--shadow)
}

.branch-emblem-wall::before,
.branch-emblem-wall::after {
  content:"";
  position:absolute;
  pointer-events:none
}

.branch-emblem-wall::before {
  inset:10px;
  border:1px solid rgba(255,255,255,.045);
  border-radius:17px
}

.branch-emblem-wall::after {
  left:18%;
  right:18%;
  top:50%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,255,255,.28),transparent)
}

.branch-emblem-wall img {
  position:relative;
  z-index:1;
  width:100%;
  aspect-ratio:1;
  object-fit:contain;
  padding:3px;
  filter:drop-shadow(0 7px 11px rgba(0,0,0,.23));
  transition:transform .18s ease,filter .18s ease
}

.branch-emblem-wall img:hover {
  transform:scale(1.08);
  filter:drop-shadow(0 8px 16px rgba(0,255,255,.14))
}

.branch-directory {
  padding-top:34px
}

.branch-family {
  position:relative;
  padding:28px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  background:
    linear-gradient(145deg,rgba(0,0,0,.045),transparent 55%),
    rgba(10,13,16,.72)
}

.branch-family + .branch-family {
  margin-top:24px
}

.branch-family-heading {
  display:grid;
  grid-template-columns:70px minmax(0,1fr);
  gap:18px;
  align-items:start;
  margin-bottom:22px
}

.branch-family-number {
  display:flex;
  align-items:center;
  justify-content:center;
  width:58px;
  height:58px;
  border:1px solid rgba(0,255,255,.26);
  border-radius:16px;
  color:var(--accent);
  background:rgba(0,255,255,.05);
  font-size:.93rem;
  font-weight:900;
  letter-spacing:.1em
}

.branch-family-heading .section-kicker {
  margin-bottom:4px
}

.branch-family-heading h2 {
  margin:0;
  font-size:clamp(1.55rem,2.7vw,2.3rem);
  line-height:1.08
}

.branch-family-heading p:last-child {
  margin:8px 0 0;
  max-width:800px;
  color:var(--muted);
  font-size:.94rem
}

.branch-grid-three {
  grid-template-columns:repeat(3,minmax(0,1fr))
}

.branch-grid-four {
  grid-template-columns:repeat(4,minmax(0,1fr))
}

.branch-card {
  min-height:365px;
  padding:20px 18px 22px
}

.branch-card::after {
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:42%;
  background:linear-gradient(180deg,transparent,rgba(0,255,255,.08));
  pointer-events:none
}

.branch-index {
  position:absolute;
  top:14px;
  right:15px;
  z-index:2;
  color:rgba(0,255,255,.48);
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.13em
}

.branch-card img {
  width:min(190px,91%);
  margin-top:4px
}

.branch-card h3 {
  position:relative;
  z-index:1;
  margin:0 0 9px;
  font-size:1.12rem
}

.branch-card p {
  position:relative;
  z-index:1;
  font-size:.9rem
}

.classes-on-branches {
  position:relative;
  margin-top:44px !important;
  padding-top:54px !important
}

.class-section-marker {
  position:absolute;
  top:0;
  left:50%;
  display:flex;
  gap:9px;
  transform:translate(-50%,-50%);
  padding:0 14px;
  background:var(--bg)
}

.class-section-marker span {
  display:block;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 12px rgba(0,255,255,.34)
}

@media(max-width:1180px) {
  .branches-hero {
    grid-template-columns:minmax(0,1fr) minmax(360px,.8fr);
    gap:34px
  }

  .branch-emblem-wall {
    grid-template-columns:repeat(5,minmax(54px,1fr));
    padding:18px
  }

  .branch-grid-four {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media(max-width:900px) {
  .branches-hero {
    grid-template-columns:1fr
  }

  .branch-emblem-wall {
    max-width:680px
  }

  .branch-grid-three,
  .branch-grid-four {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media(max-width:650px) {
  .branches-hero {
    padding-top:6px;
    gap:24px
  }

  .branches-hero-copy h1 {
    font-size:clamp(2.3rem,12vw,3.5rem)
  }

  .branch-stat-row {
    grid-template-columns:1fr
  }

  .branch-emblem-wall {
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:4px;
    padding:12px
  }

  .branch-family {
    padding:18px 14px
  }

  .branch-family-heading {
    grid-template-columns:48px minmax(0,1fr);
    gap:12px
  }

  .branch-family-number {
    width:44px;
    height:44px;
    border-radius:12px;
    font-size:.74rem
  }

  .branch-grid-three,
  .branch-grid-four {
    grid-template-columns:1fr
  }

  .branch-card {
    min-height:0
  }
}


/* v93: interactive branch selector and earlier Classes section */
.branch-stat-row {
  grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:430px
}

.branch-emblem-wall {
  gap:10px;
  padding:18px
}

.branch-emblem-wall::after {
  display:none
}

.branch-emblem-button {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  aspect-ratio:1;
  padding:7px;
  appearance:none;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012)),
    #0b0e11;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 7px 13px rgba(0,0,0,.22);
  cursor:pointer;
  transform:translateY(0);
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease
}

.branch-emblem-button::after {
  content:"";
  position:absolute;
  inset:5px;
  border-radius:10px;
  border:1px solid rgba(0,255,255,.07);
  pointer-events:none
}

.branch-emblem-button:hover,
.branch-emblem-button:focus-visible {
  transform:translateY(-3px);
  border-color:rgba(0,255,255,.52);
  background:
    linear-gradient(180deg,rgba(0,255,255,.09),rgba(255,255,255,.018)),
    #0b0e11;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 11px 18px rgba(0,0,0,.30),
    0 0 18px rgba(0,255,255,.08);
  outline:none
}

.branch-emblem-button.is-selected {
  border-color:var(--accent);
  background:
    linear-gradient(180deg,rgba(0,255,255,.14),rgba(0,255,255,.035)),
    #0b0f12;
  box-shadow:
    inset 0 0 0 1px rgba(0,255,255,.18),
    0 10px 20px rgba(0,0,0,.30),
    0 0 18px rgba(0,255,255,.13)
}

.branch-emblem-button img {
  width:100%;
  height:100%;
  object-fit:contain;
  padding:0;
  filter:drop-shadow(0 5px 9px rgba(0,0,0,.2));
  transition:transform .18s ease
}

.branch-emblem-button:hover img,
.branch-emblem-button:focus-visible img,
.branch-emblem-button.is-selected img {
  transform:scale(1.06)
}

.compact-heading {
  margin-bottom:18px
}

.branch-breakdown-section {
  padding-top:28px
}

.branch-breakdown-panel {
  display:grid;
  grid-template-columns:250px minmax(0,1fr);
  gap:30px;
  align-items:center;
  min-height:300px;
  padding:28px;
  border:1px solid rgba(0,255,255,.24);
  border-radius:22px;
  background:
    radial-gradient(circle at 12% 50%,rgba(0,255,255,.075),transparent 31%),
    linear-gradient(145deg,rgba(255,255,255,.03),transparent 55%),
    var(--surface);
  box-shadow:var(--shadow);
  transition:opacity .18s ease,transform .18s ease
}

.branch-breakdown-panel.is-switching {
  opacity:.4;
  transform:translateY(3px)
}

.branch-breakdown-emblem {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:220px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:18px;
  background:rgba(0,0,0,.17)
}

.branch-breakdown-emblem img {
  width:215px;
  max-height:215px;
  object-fit:contain
}

.branch-purpose-label {
  margin:0 0 6px;
  color:var(--accent);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase
}

.branch-breakdown-description {
  margin:0;
  max-width:820px;
  color:#edf3f7;
  font-size:1.07rem;
  line-height:1.7
}

.branch-focus-wrap {
  margin-top:22px
}

.branch-focus-list {
  display:flex;
  flex-wrap:wrap;
  gap:9px
}

.branch-focus-list span {
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:7px 11px;
  border:1px solid rgba(0,255,255,.18);
  border-radius:999px;
  background:rgba(0,255,255,.05);
  color:#dce6ed;
  font-size:.8rem;
  font-weight:800
}

.classes-on-branches {
  margin-top:26px !important;
  padding-top:42px !important
}

.class-section-marker {
  display:none !important
}

@media(max-width:900px) {
  .branch-breakdown-panel {
    grid-template-columns:190px minmax(0,1fr);
    gap:22px
  }

  .branch-breakdown-emblem {
    min-height:180px
  }

  .branch-breakdown-emblem img {
    width:168px;
    max-height:168px
  }
}

@media(max-width:650px) {
  .branch-stat-row {
    grid-template-columns:repeat(2,minmax(0,1fr));
    max-width:none
  }

  .branch-emblem-wall {
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:5px;
    padding:10px
  }

  .branch-emblem-button {
    padding:3px;
    border-radius:9px
  }

  .branch-emblem-button::after {
    inset:3px;
    border-radius:6px
  }

  .branch-breakdown-panel {
    grid-template-columns:1fr;
    gap:18px;
    padding:18px
  }

  .branch-breakdown-emblem {
    min-height:150px
  }

  .branch-breakdown-emblem img {
    width:145px;
    max-height:145px
  }
}


/* v94: HTML/CSS-only branch selector */
.branch-selector-css {
  position:relative
}

.branch-choice {
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none
}

.branch-selector-css .branch-emblem-wall {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  padding:18px;
  border:1px solid rgba(0,255,255,.20);
  border-radius:24px;
  background:
    radial-gradient(circle at 50% 50%,rgba(0,255,255,.085),transparent 58%),
    linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.008)),
    var(--surface);
  box-shadow:var(--shadow)
}

.branch-selector-css .branch-emblem-button {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  aspect-ratio:1;
  padding:7px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:14px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012)),
    #0b0e11;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 7px 13px rgba(0,0,0,.22);
  cursor:pointer;
  transform:translateY(0);
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease
}

.branch-selector-css .branch-emblem-button::after {
  content:"";
  position:absolute;
  inset:5px;
  border-radius:10px;
  border:1px solid rgba(0,255,255,.08);
  pointer-events:none
}

.branch-selector-css .branch-emblem-button:hover {
  transform:translateY(-3px);
  border-color:rgba(0,255,255,.52);
  background:
    linear-gradient(180deg,rgba(0,255,255,.09),rgba(255,255,255,.018)),
    #0b0e11;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 11px 18px rgba(0,0,0,.30),
    0 0 18px rgba(0,255,255,.08)
}

.branch-selector-css .branch-emblem-button img {
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 5px 9px rgba(0,0,0,.20));
  transition:transform .18s ease
}

.branch-selector-css .branch-emblem-button:hover img {
  transform:scale(1.06)
}

/* v302b: the emblem itself indicates branch selection, matching Staff Files. */
.branch-selector-css .branch-emblem-state.branch-emblem-active {
  display:none
}

.branch-selector-css .branch-emblem-state.branch-emblem-inactive {
  display:block
}

/* Keep every selector tile dark; selected state is cyan emblem vs. grey emblem only. */
#branch-life-sciences:checked ~ .branch-emblem-wall label[for="branch-life-sciences"],
#branch-physical-sciences:checked ~ .branch-emblem-wall label[for="branch-physical-sciences"],
#branch-information-sciences:checked ~ .branch-emblem-wall label[for="branch-information-sciences"],
#branch-combat:checked ~ .branch-emblem-wall label[for="branch-combat"],
#branch-security:checked ~ .branch-emblem-wall label[for="branch-security"],
#branch-intelligence:checked ~ .branch-emblem-wall label[for="branch-intelligence"],
#branch-health:checked ~ .branch-emblem-wall label[for="branch-health"],
#branch-infrastructure:checked ~ .branch-emblem-wall label[for="branch-infrastructure"],
#branch-relations:checked ~ .branch-emblem-wall label[for="branch-relations"],
#branch-oversight:checked ~ .branch-emblem-wall label[for="branch-oversight"] {
  background:
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012)),
    #0b0e11;
  border-color:rgba(255,255,255,.13);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 7px 13px rgba(0,0,0,.22);
  transform:translateY(0)
}

#branch-life-sciences:checked ~ .branch-emblem-wall label[for="branch-life-sciences"]::after,
#branch-physical-sciences:checked ~ .branch-emblem-wall label[for="branch-physical-sciences"]::after,
#branch-information-sciences:checked ~ .branch-emblem-wall label[for="branch-information-sciences"]::after,
#branch-combat:checked ~ .branch-emblem-wall label[for="branch-combat"]::after,
#branch-security:checked ~ .branch-emblem-wall label[for="branch-security"]::after,
#branch-intelligence:checked ~ .branch-emblem-wall label[for="branch-intelligence"]::after,
#branch-health:checked ~ .branch-emblem-wall label[for="branch-health"]::after,
#branch-infrastructure:checked ~ .branch-emblem-wall label[for="branch-infrastructure"]::after,
#branch-relations:checked ~ .branch-emblem-wall label[for="branch-relations"]::after,
#branch-oversight:checked ~ .branch-emblem-wall label[for="branch-oversight"]::after {
  border-color:rgba(0,255,255,.08)
}

#branch-life-sciences:checked ~ .branch-emblem-wall label[for="branch-life-sciences"] .branch-emblem-active,
#branch-physical-sciences:checked ~ .branch-emblem-wall label[for="branch-physical-sciences"] .branch-emblem-active,
#branch-information-sciences:checked ~ .branch-emblem-wall label[for="branch-information-sciences"] .branch-emblem-active,
#branch-combat:checked ~ .branch-emblem-wall label[for="branch-combat"] .branch-emblem-active,
#branch-security:checked ~ .branch-emblem-wall label[for="branch-security"] .branch-emblem-active,
#branch-intelligence:checked ~ .branch-emblem-wall label[for="branch-intelligence"] .branch-emblem-active,
#branch-health:checked ~ .branch-emblem-wall label[for="branch-health"] .branch-emblem-active,
#branch-infrastructure:checked ~ .branch-emblem-wall label[for="branch-infrastructure"] .branch-emblem-active,
#branch-relations:checked ~ .branch-emblem-wall label[for="branch-relations"] .branch-emblem-active,
#branch-oversight:checked ~ .branch-emblem-wall label[for="branch-oversight"] .branch-emblem-active {
  display:block;
  transform:scale(1.07)
}

#branch-life-sciences:checked ~ .branch-emblem-wall label[for="branch-life-sciences"] .branch-emblem-inactive,
#branch-physical-sciences:checked ~ .branch-emblem-wall label[for="branch-physical-sciences"] .branch-emblem-inactive,
#branch-information-sciences:checked ~ .branch-emblem-wall label[for="branch-information-sciences"] .branch-emblem-inactive,
#branch-combat:checked ~ .branch-emblem-wall label[for="branch-combat"] .branch-emblem-inactive,
#branch-security:checked ~ .branch-emblem-wall label[for="branch-security"] .branch-emblem-inactive,
#branch-intelligence:checked ~ .branch-emblem-wall label[for="branch-intelligence"] .branch-emblem-inactive,
#branch-health:checked ~ .branch-emblem-wall label[for="branch-health"] .branch-emblem-inactive,
#branch-infrastructure:checked ~ .branch-emblem-wall label[for="branch-infrastructure"] .branch-emblem-inactive,
#branch-relations:checked ~ .branch-emblem-wall label[for="branch-relations"] .branch-emblem-inactive,
#branch-oversight:checked ~ .branch-emblem-wall label[for="branch-oversight"] .branch-emblem-inactive {
  display:none
}

/* Pure CSS breakdown switching. No scrolling or snapping is triggered. */
.branch-breakdown-stack {
  margin-top:22px
}

.branch-breakdown-stack .branch-breakdown-panel {
  display:none
}

#branch-life-sciences:checked ~ .branch-breakdown-stack .branch-panel-life-sciences,
#branch-physical-sciences:checked ~ .branch-breakdown-stack .branch-panel-physical-sciences,
#branch-information-sciences:checked ~ .branch-breakdown-stack .branch-panel-information-sciences,
#branch-combat:checked ~ .branch-breakdown-stack .branch-panel-combat,
#branch-security:checked ~ .branch-breakdown-stack .branch-panel-security,
#branch-intelligence:checked ~ .branch-breakdown-stack .branch-panel-intelligence,
#branch-health:checked ~ .branch-breakdown-stack .branch-panel-health,
#branch-infrastructure:checked ~ .branch-breakdown-stack .branch-panel-infrastructure,
#branch-relations:checked ~ .branch-breakdown-stack .branch-panel-relations,
#branch-oversight:checked ~ .branch-breakdown-stack .branch-panel-oversight {
  display:grid
}

.branch-breakdown-content h2 {
  margin:0 0 20px;
  font-size:clamp(1.8rem,3vw,2.55rem);
  line-height:1.05
}

.branch-breakdown-content .section-kicker {
  margin-bottom:5px
}

@media(max-width:650px) {
  .branch-selector-css .branch-emblem-wall {
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:5px;
    padding:10px
  }

  .branch-selector-css .branch-emblem-button {
    padding:3px;
    border-radius:9px
  }

  .branch-selector-css .branch-emblem-button::after {
    inset:3px;
    border-radius:6px
  }
}


/* v95: example employee paper profile */
.example-employee-section {
  margin: 10px 0 8px;
  padding: 0 0 8px;
}

.employee-paper-card {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  border: 1px solid rgba(0,0,0,.35);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0) 22%),
    repeating-linear-gradient(0deg, rgba(70,62,48,.04) 0 1px, transparent 1px 32px),
    linear-gradient(145deg, #f4eddc 0%, #ebe3cf 48%, #dfd4be 100%);
  color: #23201a;
  box-shadow:
    0 18px 40px rgba(0,0,0,.28),
    0 2px 0 rgba(255,255,255,.08);
  transform: rotate(-0.35deg);
}

.employee-paper-card::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(78,68,48,.18);
  border-radius: 4px;
  pointer-events: none;
}

.employee-paper-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 22px 12px;
  border-bottom: 1px solid rgba(55,48,36,.24);
}

.paper-stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 14px;
  border: 2px solid rgba(124,34,34,.65);
  color: rgba(124,34,34,.85);
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 4px;
  transform: rotate(-4deg);
}

.paper-ref {
  color: rgba(44,40,34,.72);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.employee-paper-body {
  display: grid;
  grid-template-columns: 230px minmax(0,1fr);
  gap: 26px;
  padding: 22px;
}

.employee-photo-frame {
  position: relative;
  min-height: 272px;
  border: 1px solid rgba(37,33,28,.48);
  background:
    linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.01)),
    #e8deca;
  box-shadow:
    inset 0 0 0 8px rgba(255,255,255,.24),
    inset 0 0 0 9px rgba(65,56,44,.06);
}

.employee-photo-frame::before {
  content: "ID PHOTO";
  position: absolute;
  left: 12px;
  top: 10px;
  color: rgba(44,40,34,.44);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.employee-photo-frame::after {
  content: "REDACTED";
  position: absolute;
  right: 8px;
  bottom: 10px;
  color: rgba(124,34,34,.72);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.employee-silhouette {
  position: absolute;
  inset: 22px 18px 18px;
}

.silhouette-head,
.silhouette-neck,
.silhouette-body,
.silhouette-shoulders {
  position: absolute;
  display: block;
  background: #060606;
}

.silhouette-head {
  left: 50%;
  top: 24px;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  transform: translateX(-50%);
}

.silhouette-neck {
  left: 50%;
  top: 94px;
  width: 28px;
  height: 24px;
  transform: translateX(-50%);
  border-radius: 10px;
}

.silhouette-body {
  left: 50%;
  bottom: 36px;
  width: 92px;
  height: 116px;
  transform: translateX(-50%);
  border-radius: 28px 28px 18px 18px;
}

.silhouette-shoulders {
  left: 50%;
  bottom: 12px;
  width: 162px;
  height: 78px;
  transform: translateX(-50%);
  border-radius: 78px 78px 18px 18px;
}

.employee-kicker {
  margin: 0 0 6px;
  color: #4a4438;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.employee-details h2 {
  margin: 0 0 16px;
  color: #201d17;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1.03;
}

.employee-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.employee-meta-grid > div {
  padding: 10px 12px;
  border: 1px solid rgba(46,40,31,.2);
  background: rgba(255,255,255,.34);
  min-height: 72px;
}

.employee-meta-grid span {
  display: block;
  color: #595243;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.employee-meta-grid strong {
  display: block;
  margin-top: 6px;
  color: #1d1914;
  font-size: 1.03rem;
  line-height: 1.25;
}

.employee-lines {
  padding-top: 6px;
  border-top: 1px solid rgba(55,48,36,.18);
}

.employee-lines p {
  margin: 10px 0 0;
  color: #2e291f;
  font-size: .98rem;
  line-height: 1.65;
}

.employee-lines strong {
  color: #181511;
}

@media (max-width: 900px) {
  .employee-meta-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 650px) {
  .employee-paper-card {
    transform: none;
  }

  .employee-paper-top {
    align-items: flex-start;
    flex-direction: column;
  }

  .employee-paper-body {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 16px;
  }

  .employee-photo-frame {
    min-height: 230px;
  }

  .employee-meta-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .employee-meta-grid > div {
    min-height: 66px;
  }

  .employee-lines p {
    font-size: .94rem;
  }
}


/* v96: refined example employee dossier */
.employee-photo-frame {
  overflow:hidden;
  min-height:292px;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(50,46,38,.055) 0,
      rgba(50,46,38,.055) 1px,
      transparent 1px,
      transparent 34px
    ),
    linear-gradient(180deg,#ded5c3 0%,#eee6d7 100%);
}

.employee-photo-frame::before {
  content:"IDENTIFICATION";
  z-index:6;
}

.employee-photo-frame::after {
  content:"";
}

.photo-height-lines {
  position:absolute;
  z-index:1;
  inset:38px 10px 16px auto;
  width:35px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  color:rgba(50,45,37,.33);
  font-size:.55rem;
  font-weight:800;
}

.photo-height-lines span {
  position:relative;
  display:block;
}

.photo-height-lines span::before {
  content:"";
  position:absolute;
  right:25px;
  top:50%;
  width:10px;
  border-top:1px solid rgba(50,45,37,.22);
}

.employee-silhouette {
  position:absolute;
  z-index:2;
  inset:20px 18px 0;
}

.silhouette-head {
  z-index:4;
  left:50%;
  top:31px;
  width:76px;
  height:92px;
  border-radius:46% 46% 44% 44% / 40% 40% 56% 56%;
  transform:translateX(-50%);
  background:#050505;
}

.silhouette-hair {
  position:absolute;
  z-index:5;
  left:50%;
  top:22px;
  width:80px;
  height:40px;
  transform:translateX(-50%);
  background:#050505;
  clip-path:polygon(
    7% 72%, 10% 30%, 25% 11%, 48% 2%, 72% 9%, 91% 27%,
    96% 61%, 86% 53%, 78% 41%, 59% 48%, 43% 37%, 28% 48%, 17% 44%
  );
}

.silhouette-ear {
  position:absolute;
  z-index:3;
  top:64px;
  width:14px;
  height:27px;
  border-radius:50%;
  background:#050505;
}

.silhouette-ear-left {
  left:calc(50% - 44px);
}

.silhouette-ear-right {
  right:calc(50% - 44px);
}

.silhouette-neck {
  z-index:3;
  left:50%;
  top:112px;
  width:36px;
  height:38px;
  transform:translateX(-50%);
  border-radius:7px 7px 14px 14px;
  background:#050505;
}

.silhouette-shirt {
  position:absolute;
  z-index:2;
  left:50%;
  top:139px;
  width:82px;
  height:86px;
  transform:translateX(-50%);
  background:#050505;
  clip-path:polygon(14% 0, 86% 0, 100% 100%, 0 100%);
}

.silhouette-collar {
  position:absolute;
  z-index:6;
  top:139px;
  width:39px;
  height:42px;
  background:#171717;
}

.silhouette-collar-left {
  left:calc(50% - 39px);
  clip-path:polygon(0 0,100% 0,75% 100%);
}

.silhouette-collar-right {
  right:calc(50% - 39px);
  clip-path:polygon(0 0,100% 0,25% 100%);
}

.silhouette-tie {
  position:absolute;
  z-index:7;
  left:50%;
  top:152px;
  width:17px;
  height:62px;
  transform:translateX(-50%);
  background:#262626;
  clip-path:polygon(50% 0,100% 18%,72% 100%,28% 100%,0 18%);
}

.silhouette-jacket {
  position:absolute;
  z-index:1;
  left:50%;
  bottom:-8px;
  width:194px;
  height:132px;
  transform:translateX(-50%);
  background:#050505;
  clip-path:polygon(
    18% 14%, 38% 0, 50% 20%, 62% 0, 82% 14%,
    100% 42%, 100% 100%, 0 100%, 0 42%
  );
}

.photo-redaction-bar {
  position:absolute;
  z-index:8;
  left:20px;
  right:20px;
  top:91px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:4px 8px;
  background:#050505;
  color:#eee6d7;
  border:1px solid rgba(255,255,255,.08);
  font-size:.58rem;
  font-weight:900;
  letter-spacing:.17em;
  text-transform:uppercase;
}

.employee-meta-grid-revised {
  grid-template-columns:minmax(250px,1.65fr) minmax(120px,.7fr) minmax(170px,1fr);
}

.employee-branches-field strong + strong {
  margin-top:5px;
}

.employee-description {
  margin-top:14px;
  padding:14px 15px;
  border:1px solid rgba(55,48,36,.18);
  background:rgba(255,255,255,.25);
}

.employee-description > strong {
  display:block;
  margin-bottom:5px;
  color:#4f483b;
  font-size:.7rem;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.employee-description p {
  margin:0;
  color:#2e291f;
  font-size:.98rem;
  line-height:1.67;
}

@media(max-width:900px) {
  .employee-meta-grid-revised {
    grid-template-columns:1fr 1fr;
  }

  .employee-branches-field {
    grid-column:1 / -1;
  }
}

@media(max-width:650px) {
  .employee-photo-frame {
    min-height:270px;
  }

  .employee-meta-grid-revised {
    grid-template-columns:1fr;
  }

  .employee-branches-field {
    grid-column:auto;
  }

  .employee-description p {
    font-size:.94rem;
  }
}


/* v97: cleaner example profile photo + reorganized metadata */
.employee-details h2 {
  margin: 0 0 4px;
}

.employee-personnel-id {
  margin: 0 0 16px;
  color: #2a251c;
  font-size: 1rem;
  line-height: 1.45;
}

.employee-personnel-id strong {
  color: #181511;
}

.employee-photo-frame {
  overflow: hidden;
  min-height: 318px;
}

.cleaner-silhouette {
  position: absolute;
  inset: 18px 18px 0;
}

.cleaner-silhouette span {
  position: absolute;
  display: block;
  background: #050505;
}

.silhouette-photo-head {
  left: 50%;
  top: 42px;
  width: 88px;
  height: 104px;
  transform: translateX(-50%);
  border-radius: 46px 46px 42px 42px / 40px 40px 58px 58px;
  z-index: 3;
}

.silhouette-photo-hair {
  left: 50%;
  top: 30px;
  width: 96px;
  height: 48px;
  transform: translateX(-50%);
  z-index: 4;
  clip-path: polygon(10% 70%, 12% 32%, 26% 14%, 45% 4%, 66% 9%, 84% 21%, 90% 48%, 87% 70%, 71% 50%, 55% 58%, 42% 44%, 28% 55%);
}

.silhouette-photo-neck {
  left: 50%;
  top: 136px;
  width: 30px;
  height: 28px;
  transform: translateX(-50%);
  border-radius: 8px;
  z-index: 2;
}

.silhouette-photo-shoulders {
  left: 50%;
  bottom: 0;
  width: 190px;
  height: 110px;
  transform: translateX(-50%);
  z-index: 1;
  clip-path: polygon(0 58%, 18% 34%, 38% 22%, 50% 34%, 62% 22%, 82% 34%, 100% 58%, 100% 100%, 0 100%);
}

.silhouette-photo-collar {
  top: 156px;
  width: 36px;
  height: 34px;
  background: #1a1a1a;
  z-index: 5;
}

.silhouette-photo-collar-left {
  left: calc(50% - 37px);
  clip-path: polygon(0 0, 100% 0, 74% 100%);
}

.silhouette-photo-collar-right {
  right: calc(50% - 37px);
  clip-path: polygon(0 0, 100% 0, 26% 100%);
}

.silhouette-photo-torso {
  left: 50%;
  top: 172px;
  width: 74px;
  height: 88px;
  transform: translateX(-50%);
  z-index: 2;
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}

.silhouette-photo-tie {
  left: 50%;
  top: 170px;
  width: 18px;
  height: 64px;
  transform: translateX(-50%);
  background: #262626;
  z-index: 6;
  clip-path: polygon(50% 0, 100% 18%, 72% 100%, 28% 100%, 0 18%);
}

.employee-traits-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}

.employee-traits-grid > div {
  padding: 10px 12px;
  border: 1px solid rgba(46, 40, 31, .2);
  background: rgba(255, 255, 255, .28);
  min-height: 70px;
}

.employee-traits-grid span {
  display: block;
  color: #595243;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.employee-traits-grid strong {
  display: block;
  margin-top: 6px;
  color: #1d1914;
  font-size: 1rem;
  line-height: 1.25;
}

.employee-lines {
  padding-top: 0;
  border-top: none;
}

@media (max-width: 1100px) {
  .employee-traits-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .employee-photo-frame {
    min-height: 300px;
  }
}

@media (max-width: 650px) {
  .employee-traits-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .employee-traits-grid > div {
    min-height: 64px;
  }

  .employee-personnel-id {
    margin-bottom: 14px;
    font-size: .96rem;
  }

  .employee-photo-frame {
    min-height: 280px;
  }
}


/* v98: desktop ID-photo proportion fix */
@media (min-width: 901px) {
  .employee-paper-body {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 28px;
  }

  .employee-photo-frame {
    min-height: 330px;
  }

  .cleaner-silhouette {
    left: 50%;
    right: auto;
    top: 20px;
    bottom: 0;
    width: 220px;
    transform: translateX(-50%);
  }

  .silhouette-photo-head {
    top: 42px;
    width: 82px;
    height: 98px;
  }

  .silhouette-photo-hair {
    top: 31px;
    width: 90px;
    height: 45px;
  }

  .silhouette-photo-neck {
    top: 132px;
    width: 30px;
    height: 31px;
  }

  .silhouette-photo-shoulders {
    width: 174px;
    height: 108px;
  }

  .silhouette-photo-collar {
    top: 157px;
    width: 34px;
    height: 32px;
  }

  .silhouette-photo-collar-left {
    left: calc(50% - 35px);
  }

  .silhouette-photo-collar-right {
    right: calc(50% - 35px);
  }

  .silhouette-photo-torso {
    top: 170px;
    width: 68px;
    height: 86px;
  }

  .silhouette-photo-tie {
    top: 168px;
    width: 16px;
    height: 61px;
  }

  .photo-redaction-bar {
    left: 28px;
    right: 28px;
    top: 94px;
  }
}

.employee-details h2 {
  margin-top: 2px;
}


/* v99: continuous ID silhouette + branch emblems beside employee name */

/*
   The previous portrait used independently positioned head, collar, torso,
   shoulders, and tie pieces. On taller desktop photo frames those pieces
   separated vertically. This version intentionally uses only three connected
   shapes so the silhouette remains visually continuous at all breakpoints.
*/
.cleaner-silhouette {
  position: absolute;
  left: 50%;
  top: 28px;
  bottom: 0;
  width: 210px;
  transform: translateX(-50%);
}

.cleaner-silhouette .portrait-head,
.cleaner-silhouette .portrait-neck,
.cleaner-silhouette .portrait-body {
  position: absolute;
  display: block;
  background: #050505;
}

.cleaner-silhouette .portrait-head {
  z-index: 3;
  left: 50%;
  top: 18px;
  width: 88px;
  height: 108px;
  transform: translateX(-50%);
  border-radius: 48% 48% 44% 44% / 42% 42% 56% 56%;
}

.cleaner-silhouette .portrait-head::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -9px;
  width: 94px;
  height: 36px;
  transform: translateX(-50%);
  background: #050505;
  border-radius: 48% 52% 24% 30%;
  clip-path: polygon(
    5% 78%, 10% 34%, 24% 13%, 45% 2%, 68% 8%,
    87% 22%, 96% 64%, 82% 53%, 65% 47%, 47% 50%,
    31% 43%, 17% 55%
  );
}

.cleaner-silhouette .portrait-neck {
  z-index: 2;
  left: 50%;
  top: 118px;
  width: 34px;
  height: 42px;
  transform: translateX(-50%);
  border-radius: 4px 4px 10px 10px;
}

.cleaner-silhouette .portrait-body {
  z-index: 1;
  left: 50%;
  top: 148px;
  bottom: 0;
  width: 194px;
  transform: translateX(-50%);
  border-radius: 46% 46% 0 0 / 20% 20% 0 0;
  clip-path: polygon(
    50% 0,
    60% 5%,
    72% 14%,
    86% 20%,
    100% 36%,
    100% 100%,
    0 100%,
    0 36%,
    14% 20%,
    28% 14%,
    40% 5%
  );
}

/* Hide the now-obsolete old portrait pieces if any stale CSS remains. */
.silhouette-photo-head,
.silhouette-photo-hair,
.silhouette-photo-neck,
.silhouette-photo-shoulders,
.silhouette-photo-collar,
.silhouette-photo-torso,
.silhouette-photo-tie,
.silhouette-hair,
.silhouette-head,
.silhouette-ear,
.silhouette-neck,
.silhouette-shirt,
.silhouette-collar,
.silhouette-tie,
.silhouette-jacket,
.silhouette-body,
.silhouette-shoulders {
  display: none !important;
}

.employee-name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 16px;
}

.employee-name-copy {
  min-width: 0;
}

.employee-name-row .employee-personnel-id {
  margin-bottom: 0;
}

.employee-branch-badges {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 0 0 auto;
}

.employee-branch-badge {
  min-width: 84px;
  padding: 7px 8px 6px;
  border: 1px solid rgba(46, 40, 31, .22);
  background: rgba(255, 255, 255, .34);
  text-align: center;
}

.employee-branch-badge img {
  display: block;
  width: 58px;
  height: 58px;
  margin: 0 auto 3px;
  object-fit: contain;
}

.employee-branch-badge span {
  display: block;
  color: #403a30;
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (min-width: 901px) {
  .cleaner-silhouette {
    width: 220px;
    top: 28px;
  }

  .cleaner-silhouette .portrait-body {
    width: 200px;
  }
}

@media (max-width: 900px) {
  .employee-name-row {
    align-items: center;
  }

  .employee-branch-badge {
    min-width: 76px;
  }

  .employee-branch-badge img {
    width: 52px;
    height: 52px;
  }
}

@media (max-width: 650px) {
  .employee-name-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .employee-branch-badges {
    width: 100%;
  }

  .employee-branch-badge {
    min-width: 82px;
  }

  .cleaner-silhouette {
    width: 200px;
    top: 22px;
  }

  .cleaner-silhouette .portrait-body {
    width: 184px;
  }
}


/* v100: simplify Branches / Classes box to logos + class numbers only */
.employee-branches-icons-only {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.employee-branches-icon-row {
  display: flex;
  align-items: stretch;
  gap: 16px;
  margin-top: 10px;
}

.employee-branches-icon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 108px;
  padding: 8px 10px 10px;
  border: 1px solid rgba(46, 40, 31, .16);
  background: rgba(255, 255, 255, .22);
}

.employee-branches-icon-card img {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.employee-branches-icon-card strong {
  display: block;
  margin-top: 6px;
  color: #1d1914;
  font-size: 1.55rem;
  line-height: 1;
  font-weight: 800;
}

@media (max-width: 650px) {
  .employee-branches-icon-row {
    gap: 12px;
  }

  .employee-branches-icon-card {
    min-width: 92px;
    padding: 8px 8px 10px;
  }

  .employee-branches-icon-card img {
    width: 54px;
    height: 54px;
  }

  .employee-branches-icon-card strong {
    font-size: 1.35rem;
  }
}


/* v101: remove top-right duplicate branch badges and normalize portrait scaling */
.employee-name-row {
  display: block;
  margin-bottom: 16px;
}

.employee-name-copy {
  min-width: 0;
}

.employee-branch-badges,
.employee-branch-badge {
  display: none !important;
}

/* Use one SVG silhouette so desktop/mobile render the same proportions */
.employee-photo-frame {
  min-height: 320px;
}

.employee-silhouette-svg {
  position: absolute;
  inset: 36px 22px 6px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.employee-portrait-svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 210px;
  overflow: visible;
}

/* Hide any older CSS-piece portrait rules if present */
.cleaner-silhouette,
.cleaner-silhouette .portrait-head,
.cleaner-silhouette .portrait-neck,
.cleaner-silhouette .portrait-body,
.silhouette-photo-head,
.silhouette-photo-hair,
.silhouette-photo-neck,
.silhouette-photo-shoulders,
.silhouette-photo-collar,
.silhouette-photo-torso,
.silhouette-photo-tie,
.silhouette-hair,
.silhouette-head,
.silhouette-ear,
.silhouette-neck,
.silhouette-shirt,
.silhouette-collar,
.silhouette-tie,
.silhouette-jacket,
.silhouette-body,
.silhouette-shoulders {
  display: none !important;
}

@media (min-width: 901px) {
  .employee-paper-body {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 28px;
  }

  .employee-photo-frame {
    min-height: 320px;
  }

  .employee-silhouette-svg {
    inset: 34px 22px 6px;
  }

  .employee-portrait-svg {
    max-width: 212px;
  }
}

@media (max-width: 900px) {
  .employee-photo-frame {
    min-height: 320px;
  }

  .employee-silhouette-svg {
    inset: 34px 22px 6px;
  }

  .employee-portrait-svg {
    max-width: 210px;
  }
}

@media (max-width: 650px) {
  .employee-photo-frame {
    min-height: 300px;
  }

  .employee-silhouette-svg {
    inset: 28px 18px 4px;
  }

  .employee-portrait-svg {
    max-width: 200px;
  }
}


/* v103: text-only Branches / Classes, icon-only top-right badges */
.employee-branches-icons-only,
.employee-branches-icon-row,
.employee-branches-icon-card {
  display: none !important;
}

.employee-branches-field {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.employee-branches-field > span {
  display: block;
}

.employee-branches-field > strong {
  display: block;
  margin-top: 6px;
  color: #1d1914;
  font-size: 1.03rem;
  line-height: 1.25;
}

.employee-name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 16px;
}

.employee-name-copy {
  min-width: 0;
}

.employee-branch-badges-icons-only {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  flex: 0 0 auto;
}

.employee-branch-badges-icons-only .employee-branch-badge {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-width: 84px;
  min-height: 84px;
  padding: 7px;
  border: 1px solid rgba(46,40,31,.22);
  background: rgba(255,255,255,.34);
  text-align: center;
}

.employee-branch-badges-icons-only .employee-branch-badge img {
  display: block;
  width: 66px;
  height: 66px;
  margin: 0;
  object-fit: contain;
}

.employee-branch-badges-icons-only .employee-branch-badge span {
  display: none !important;
}

@media(max-width:900px) {
  .employee-branch-badges-icons-only .employee-branch-badge {
    min-width: 76px;
    min-height: 76px;
  }

  .employee-branch-badges-icons-only .employee-branch-badge img {
    width: 58px;
    height: 58px;
  }
}

@media(max-width:650px) {
  .employee-name-row {
    flex-direction: column;
    gap: 12px;
  }

  .employee-branch-badges-icons-only {
    width: 100%;
  }
}


/* v104: simplified Classes section */
.classes-on-branches .class-note {
  margin-top: 0;
  margin-bottom: 20px;
}

.classes-on-branches .table-shell {
  margin-top: 0;
}

.classes-on-branches .rule-banner {
  margin-top: 20px;
  margin-bottom: 0;
}

.classes-on-branches .class-examples,
.classes-on-branches .example-record {
  display: none !important;
}



/* v110 Wonders page tweaks */
.wonder-format {
  display: inline-flex;
  align-items: baseline;
  gap: 0.18em;
  flex-wrap: wrap;
  line-height: 0.95;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: normal;
}

.wonder-format .hash-run {
  display: inline-block;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.wonder-record dl {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 12px;
  align-items: start;
}

.wonder-record dl > div {
  min-width: 0;
}

@media (min-width: 900px) {
  .wonder-record dl {
    width: 360px;
  }
}

@media (max-width: 899px) {
  .wonder-record dl {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .wonder-format {
    font-size: clamp(2.2rem, 9vw, 4.2rem);
  }

  .wonder-record dl {
    grid-template-columns: repeat(2, minmax(110px, 1fr));
  }
}


/* v111: About-page card refinements */
.home-link-icon-branches {
  min-width: 96px;
}

.mini-branch-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  width: 92px;
  align-items: center;
  justify-items: center;
}

.mini-branch-grid img {
  width: 17px;
  height: 17px;
  object-fit: contain;
  display: block;
}

.home-link-icon-personnel {
  min-width: 96px;
}

.personnel-card-silhouette {
  width: 84px;
  height: 84px;
  display: block;
  fill: #050505;
}

@media (max-width: 650px) {
  .home-link-icon-branches,
  .home-link-icon-personnel {
    min-width: 72px;
  }

  .mini-branch-grid {
    width: 68px;
    gap: 2px;
  }

  .mini-branch-grid img {
    width: 13px;
    height: 13px;
  }

  .personnel-card-silhouette {
    width: 64px;
    height: 64px;
  }
}


/* v112 — dossier-style Example Wonder Record */
.wonder-dossier {
  margin-top: 28px;
  border: 1px solid rgba(206, 197, 171, 0.75);
  border-radius: 12px;
  overflow: hidden;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(40, 32, 18, 0.035) 0,
      rgba(40, 32, 18, 0.035) 1px,
      transparent 1px,
      transparent 34px
    ),
    linear-gradient(180deg, #e6dece 0%, #ddd4c2 100%);
  color: #121212;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}

.wonder-dossier-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(148, 133, 104, 0.25);
}

.wonder-dossier-stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border: 2px solid rgba(164, 67, 57, 0.7);
  color: rgba(164, 67, 57, 0.9);
  font-weight: 800;
  letter-spacing: 0.12em;
  transform: rotate(-3deg);
  border-radius: 4px;
  text-transform: uppercase;
}

.wonder-dossier-title {
  font-size: 0.98rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(42, 48, 61, 0.82);
  font-weight: 700;
}

.wonder-dossier-body {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 24px;
  padding: 22px;
}

.wonder-dossier-left {
  min-width: 0;
}

.wonder-id-panel {
  border: 1px solid rgba(148, 133, 104, 0.3);
  background: rgba(255, 255, 255, 0.2);
  padding: 12px;
  height: 100%;
}

.wonder-id-label {
  font-size: 0.86rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(77, 88, 107, 0.7);
  margin-bottom: 10px;
}

.wonder-id-frame {
  position: relative;
  min-height: 335px;
  border: 1px solid rgba(148, 133, 104, 0.25);
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(54, 42, 20, 0.06) 0,
      rgba(54, 42, 20, 0.06) 1px,
      transparent 1px,
      transparent 32px
    ),
    rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 26px 18px 30px;
}

.wonder-id-frame img {
  width: 150px;
  height: 150px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.18));
}

.wonder-id-band {
  margin-top: 18px;
  background: #0b0b0b;
  color: #f3f3f3;
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 18px;
  width: min(100%, 220px);
  text-align: center;
}

.wonder-id-mark {
  margin-top: 18px;
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #111111;
}

.wonder-dossier-right {
  min-width: 0;
}

.wonder-dossier-header {
  margin-bottom: 18px;
}

.wonder-overline {
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(123, 79, 24, 0.88);
  margin-bottom: 8px;
}

.wonder-dossier-header h2 {
  margin: 0;
  font-size: clamp(2.2rem, 4vw, 3.3rem);
  line-height: 1;
  color: #111111;
}

.wonder-subline {
  margin-top: 8px;
  color: rgba(26, 26, 26, 0.72);
  font-size: 1rem;
}

.wonder-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.wonder-meta-card,
.wonder-description-card {
  border: 1px solid rgba(148, 133, 104, 0.28);
  background: rgba(255, 255, 255, 0.18);
  padding: 14px 16px;
  min-width: 0;
}

.wonder-meta-wide {
  grid-column: span 2;
}

.wonder-meta-label {
  font-size: 0.84rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(92, 74, 42, 0.86);
  margin-bottom: 8px;
}

.wonder-meta-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: #101010;
}

.wonder-description-card p {
  margin: 0;
  color: rgba(16, 16, 16, 0.82);
  line-height: 1.75;
}

@media (max-width: 1280px) {
  .map-visuals-layout {
    grid-template-columns: minmax(0, 1fr) 480px;
  }
}

@media (max-width: 980px) {
  .wonder-dossier-body {
    grid-template-columns: 1fr;
  }

  .wonder-id-frame {
    min-height: 280px;
  }
}

@media (max-width: 640px) {
  .wonder-dossier-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .wonder-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wonder-meta-wide {
    grid-column: span 2;
  }

  .wonder-id-frame img {
    width: 124px;
    height: 124px;
  }
}


/* v113: simplified Wonders intro */
.wonder-intro-single {
  display: block;
}

.wonder-intro-single .wonder-copy {
  width: 100%;
}


/* v114: Wonders layout refinements */
.wonder-dossier {
  width: 100%;
  max-width: 1040px;
  margin: 28px auto 0;
}

.wonder-stat-row {
  margin-top: 24px;
  max-width: 430px;
}


/* v115: Wonders hero/file alignment */
.wonders-hero {
  grid-template-columns: minmax(0, 1fr) 180px;
}

.wonders-hero .subpage-hero-emblem {
  justify-self: end;
}

.wonders-hero + .first-subpage-section {
  border-top: none !important;
  padding-top: 0;
}

.wonder-dossier {
  width: 100%;
  max-width: 1040px !important;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 900px) {
  .wonders-hero {
    grid-template-columns: minmax(0, 1fr) 130px;
  }

  .wonders-hero .subpage-hero-emblem {
    justify-self: end;
  }
}

@media (max-width: 650px) {
  .wonders-hero {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .wonders-hero .subpage-hero-emblem {
    order: 2;
    justify-self: end;
    width: 126px;
    margin: 10px 0 0;
  }
}


/* v116: exact Branches-page sizing match on Wonders */
.wonders-hero h1 {
  margin: 0;
  font-size: clamp(2.7rem, 5.2vw, 5rem);
  line-height: .98;
  letter-spacing: .01em;
}

.wonder-stat-row {
  margin-top: 26px;
  max-width: 650px;
}

@media (max-width: 650px) {
  .wonders-hero h1 {
    font-size: clamp(2.3rem, 12vw, 3.5rem);
  }
}


/* v117: top-right hero emblems */
.wonders-hero {
  grid-template-columns: minmax(0, 1fr) 180px;
  align-items: start;
}

.wonders-hero .subpage-hero-emblem {
  justify-self: end;
  align-self: start;
  margin-top: 6px;
}

/* Compact all-branch emblem cluster on the Branches hero */
.branches-hero {
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 42px;
  align-items: start;
}

.branches-hero-emblems {
  display: grid;
  grid-template-columns: repeat(5, 38px);
  gap: 10px;
  justify-content: end;
  align-content: start;
  padding-top: 12px;
}

.branches-hero-emblems img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  display: block;
}

@media (max-width: 900px) {
  .branches-hero {
    grid-template-columns: minmax(0, 1fr) 210px;
    gap: 28px;
  }

  .branches-hero-emblems {
    grid-template-columns: repeat(5, 32px);
    gap: 8px;
  }

  .branches-hero-emblems img {
    width: 32px;
    height: 32px;
  }

  .wonders-hero {
    grid-template-columns: minmax(0, 1fr) 140px;
  }
}

@media (max-width: 650px) {
  .branches-hero,
  .wonders-hero {
    grid-template-columns: 1fr;
  }

  .branches-hero-emblems {
    grid-template-columns: repeat(5, 30px);
    justify-content: start;
    padding-top: 0;
  }

  .branches-hero-emblems img {
    width: 30px;
    height: 30px;
  }

  .wonders-hero .subpage-hero-emblem {
    justify-self: end;
    width: 126px;
    margin-top: 8px;
  }
}


/* v118: Wonders top alignment and label refinements */

/* Push the Wonder emblem farther to the right edge of the hero area. */
.wonders-hero {
  max-width: none;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) 180px;
}

.wonders-hero .subpage-hero-emblem {
  justify-self: end;
  margin-right: 0;
}

/* Keep number and label on one line inside the two top scale boxes. */
.wonder-stat-row {
  max-width: 650px;
}

.wonder-stat-row > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

.wonder-stat-row strong,
.wonder-stat-row span {
  display: inline;
  margin-top: 0;
}

.wonder-stat-row strong {
  flex: 0 0 auto;
}

.wonder-stat-row span {
  flex: 0 1 auto;
}

/* Allow the full dossier field names to fit comfortably. */
.wonder-meta-label {
  line-height: 1.2;
}


@media (max-width: 650px) {
  .wonder-stat-row {
    grid-template-columns: 1fr;
  }

  .wonder-stat-row > div {
    white-space: normal;
  }
}


/* v119: Branches top stat boxes on one line */
.branches-hero .branch-stat-row > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

.branches-hero .branch-stat-row strong,
.branches-hero .branch-stat-row span {
  display: inline;
  margin-top: 0;
}

.branches-hero .branch-stat-row strong {
  flex: 0 0 auto;
}

.branches-hero .branch-stat-row span {
  flex: 0 1 auto;
}


/* v120: stable Wonder hero emblem container, modeled after Branches hero emblems */
.wonders-hero {
  grid-template-columns: minmax(0, 1fr) 180px;
  align-items: start;
}

.wonders-hero-emblem-wrap {
  display: grid;
  grid-template-columns: 150px;
  justify-content: end;
  align-content: start;
  padding-top: 8px;
  min-width: 0;
}

.wonders-hero-emblem-wrap img {
  width: 150px;
  height: 150px;
  object-fit: contain;
  display: block;
  max-width: none;
}

@media (max-width: 900px) {
  .wonders-hero {
    grid-template-columns: minmax(0, 1fr) 140px;
  }

  .wonders-hero-emblem-wrap {
    grid-template-columns: 120px;
  }

  .wonders-hero-emblem-wrap img {
    width: 120px;
    height: 120px;
  }
}

@media (max-width: 650px) {
  .wonders-hero {
    grid-template-columns: 1fr;
  }

  .wonders-hero-emblem-wrap {
    grid-template-columns: 104px;
    justify-content: end;
    padding-top: 4px;
  }

  .wonders-hero-emblem-wrap img {
    width: 104px;
    height: 104px;
  }
}


/* v121: Wonder dossier field fit */
.wonder-meta-grid {
  align-items: stretch;
}

.wonder-meta-card {
  min-width: 0;
}

.wonder-meta-value {
  overflow-wrap: anywhere;
}


/* v123: Locations page */
.locations-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: start;
  max-width: none;
  width: 100%;
}

.locations-hero-copy {
  max-width: 650px;
}

.locations-hero-copy h1 {
  margin: 0;
  font-size: clamp(2.7rem, 5.2vw, 5rem);
  line-height: .98;
  letter-spacing: .01em;
}

.locations-stat-row > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

.locations-stat-row strong,
.locations-stat-row span {
  display: inline;
  margin-top: 0;
}

.locations-hero-emblems {
  display: grid;
  grid-template-columns: repeat(2, 124px);
  gap: 18px;
  justify-content: end;
  justify-self: end;
  align-content: start;
  width: max-content;
  padding-top: 8px;
  margin-left: auto;
  transform: none;
}

.locations-hero-emblems img {
  width: 124px;
  height: 124px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 10px rgba(111,255,255,.22));
}

.world-map-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: 34px;
}

.map-card,
.earth-bases-panel,
.location-card,
.icon-concept-card {
  background: linear-gradient(180deg, rgba(15,18,22,.98), rgba(10,12,15,.98));
  border: 1px solid rgba(111,255,255,.25);
  box-shadow: 0 18px 40px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.03);
}

.map-card,
.earth-bases-panel,
.location-card {
  border-radius: 24px;
}

.map-card {
  overflow: hidden;
}

.map-visuals-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  padding: 18px;
  align-items: start;
}

.map-offworld-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-content: start;
}


.map-card-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
  padding: 20px 24px 0;
}

.map-card-header h2,
.earth-bases-panel h2,
.location-card h2,
.base-icons-section h2 {
  margin: 0;
}

.map-card-header p {
  margin: 0;
  color: rgba(226,232,240,.72);
  font-size: .95rem;
}

.map-frame {
  position: relative;
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 40%, rgba(21,38,46,.8) 0%, rgba(7,11,14,1) 70%),
    linear-gradient(180deg, rgba(15,28,35,.98), rgba(6,9,12,1));
  border: 1px solid rgba(111,255,255,.18);
  min-height: 620px;
  height: 100%;
}

.map-overlay-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(111,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111,255,255,.06) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
}

.fsc-world-map {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
}

.continent-shapes path {
  fill: rgba(0,255,255,.08);
  stroke: rgba(111,255,255,.92);
  stroke-width: 3.6;
}

.map-guides line {
  stroke: rgba(111,255,255,.12);
  stroke-width: 1.4;
}

.map-base {
  cursor: pointer;
  transition: transform .18s ease;
}

.map-base .base-ring {
  fill: rgba(111,255,255,.12);
  stroke: rgba(111,255,255,.96);
  stroke-width: 2.8;
}

.map-base .base-core {
  fill: rgba(111,255,255,1);
  stroke: rgba(255,255,255,.92);
  stroke-width: 2;
}

.map-base .base-number {
  fill: #021216;
  font-size: 12px;
  font-weight: 800;
  text-anchor: middle;
  font-family: Arial, Helvetica, sans-serif;
}

.map-base .base-label {
  opacity: 0;
  transition: opacity .18s ease;
  fill: rgba(245,250,255,.98);
  font-size: 16px;
  font-weight: 700;
  font-family: Arial, Helvetica, sans-serif;
  paint-order: stroke;
  stroke: rgba(0,0,0,.55);
  stroke-width: 4px;
}

.map-base:hover .base-label,
.map-base:focus .base-label {
  opacity: 1;
}

.map-base:hover,
.map-base:focus {
  transform: scale(1.03);
}

.earth-bases-panel {
  padding: 22px;
}

.base-listing {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  gap: 12px;
}

.base-listing li {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(111,255,255,.12);
}

.base-listing li strong {
  color: #fff;
}

.base-listing li span {
  color: rgba(226,232,240,.74);
  line-height: 1.45;
  font-size: .96rem;
}

.map-offworld-row {
  display: none;
}

.offworld-visual-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(111,255,255,.18);
}

.offworld-visual-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Keep the user's artwork untouched; crop/reposition only inside its viewport. */
.earth-moon-frame img {
  position: absolute;
  height: 160%;
  width: auto;
  max-width: none;
  left: -50%;
  top: -30%;
  object-fit: unset;
  object-position: initial;
  transform: none;
}

.solar-system-frame img {
  position: absolute;
  width: 137%;
  height: auto;
  max-width: none;
  left: -37%;
  top: -36.6%;
  object-fit: unset;
  object-position: initial;
  transform: none;
}

.offworld-base-marker {
  position: absolute;
  z-index: 3;
  width: 38px;
  height: 38px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border: 2px solid #00ffff;
  border-radius: 50%;
  background: #071014;
  color: #fff;
  font: 800 13px/1 Arial, sans-serif;
  box-shadow:
    0 0 0 4px rgba(0,255,255,.10),
    0 0 16px rgba(0,255,255,.60);
}

/* Base 13 sits on the Moon in the Earth/Moon reference. */
.lunar-base-marker {
  left: 78.8%;
  top: 38.3%;
}

/* Base 16 sits directly in the asteroid belt in the cropped solar-system view. */
.asteroid-base-marker {
  left: 52%;
  top: 25%;
}

.base14-marker {
  left: 50%;
  top: 46.5%;
}

.base14-frame img {
  object-fit: contain;
  object-position: 50% 50%;
}

.redacted-location-frame {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,255,255,.055), transparent 58%),
    #020607;
  border: 1px solid rgba(111,255,255,.18);
}

.redacted-base-marker {
  left: 14%;
  top: 16%;
}

.location-redacted-text {
  color: rgba(255,255,255,.9);
  font-size: clamp(.9rem, 1.4vw, 1.25rem);
  font-weight: 800;
  letter-spacing: .16em;
  text-align: center;
  text-transform: uppercase;
  padding: 18px;
  border-top: 1px solid rgba(0,255,255,.5);
  border-bottom: 1px solid rgba(0,255,255,.5);
  background: rgba(0,0,0,.5);
  box-shadow: 0 0 20px rgba(0,255,255,.08);
}

@media (max-width: 650px) {
  .map-offworld-row {
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 14px 14px 0;
  }

  .map-offworld-grid {
    grid-template-columns: 1fr;
  }

  .offworld-base-marker {
    width: 30px;
    height: 30px;
    font-size: 11px;
  }
}

.location-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
  margin-top: 28px;
}

.location-card {
  padding: 18px 18px 20px;
}

.location-card-head {
  display: grid;
  gap: 5px;
}

.location-id {
  color: rgba(111,255,255,.92);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .83rem;
}

.location-card-body {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 16px;
  align-items: start;
  margin-top: 14px;
}

.location-card-emblem {
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(111,255,255,.18));
}

.location-card p {
  margin: 0;
  color: rgba(226,232,240,.82);
  line-height: 1.55;
}

.base-icons-section {
  margin-top: 34px;
}

.compact-heading {
  margin-bottom: 18px;
}

.icon-concepts-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
}

.icon-concept-card {
  border-radius: 22px;
  padding: 22px 18px 18px;
  text-align: center;
}

.icon-concept-card h3 {
  margin: 14px 0 0;
  font-size: 1rem;
}

.icon-shell {
  position: relative;
  width: 124px;
  height: 124px;
  margin: 0 auto;
  display: grid;
  place-items: center;
}

.icon-shell img {
  width: 66px;
  height: 66px;
  object-fit: contain;
  position: relative;
  z-index: 2;
}

.icon-shell::before,
.icon-shell::after {
  content: "";
  position: absolute;
  inset: 0;
}

.standard-base::before {
  clip-path: polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0% 50%);
  background: rgba(111,255,255,.09);
  border: 2px solid rgba(111,255,255,.65);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 0 20px rgba(111,255,255,.15);
}

.shield-base::before {
  clip-path: polygon(50% 0%,90% 16%,100% 46%,80% 84%,50% 100%,20% 84%,0% 46%,10% 16%);
  border: 2px solid rgba(111,255,255,.7);
  background: radial-gradient(circle at 50% 42%, rgba(111,255,255,.12), rgba(111,255,255,.03));
}

.shield-base::after {
  inset: 16px;
  border: 1px solid rgba(111,255,255,.42);
  clip-path: polygon(50% 0%,90% 16%,100% 46%,80% 84%,50% 100%,20% 84%,0% 46%,10% 16%);
}

.orbit-base::before {
  border-radius: 50%;
  border: 2px solid rgba(111,255,255,.72);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

.orbit-base::after {
  inset: 18px 2px;
  border-radius: 50%;
  border: 1.8px solid rgba(111,255,255,.42);
  transform: rotate(-18deg);
}

.transit-base::before {
  clip-path: polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0% 50%);
  border: 2px solid rgba(111,255,255,.7);
  background: rgba(111,255,255,.05);
}

.transit-base::after {
  inset: 22px 10px;
  clip-path: polygon(0 50%, 24% 26%, 24% 42%, 76% 42%, 76% 26%, 100% 50%, 76% 74%, 76% 58%, 24% 58%, 24% 74%);
  background: rgba(111,255,255,.18);
  border: 1px solid rgba(111,255,255,.45);
}

@media (max-width: 1180px) {
  .location-grid,
  .icon-concepts-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 980px) {
  .world-map-section {
    grid-template-columns: 1fr;
  }

  .map-visuals-layout {
    grid-template-columns: 1fr;
  }

  .map-offworld-grid {
    grid-template-columns: 1fr;
  }

  .locations-hero {
    grid-template-columns: minmax(0,1fr) auto;
    gap: 22px;
    max-width: none;
    width: 100%;
  }

  .locations-hero-emblems {
    grid-template-columns: repeat(2, 100px);
    gap: 14px;
    justify-content: end;
    justify-self: end;
    width: max-content;
    margin-left: auto;
    transform: none;
  }

  .locations-hero-emblems img {
    width: 100px;
    height: 100px;
  }
}

@media (max-width: 650px) {
  .locations-hero {
    grid-template-columns: 1fr;
    max-width: none;
    width: 100%;
  }

  .locations-hero-emblems {
    grid-template-columns: repeat(2, 72px);
    gap: 12px;
    justify-content: end;
    justify-self: end;
    width: max-content;
    padding-top: 0;
    transform: none;
  }

  .locations-hero-emblems img {
    width: 72px;
    height: 72px;
  }

  .locations-hero-copy h1 {
    font-size: clamp(2.3rem, 12vw, 3.5rem);
  }

  .locations-stat-row {
    grid-template-columns: 1fr;
  }

  .locations-stat-row > div {
    white-space: nowrap;
  }

  .map-card-header {
    flex-direction: column;
    align-items: start;
  }

  .map-frame {
    min-height: 360px;
    margin: 14px;
  }

  .location-grid,
  .icon-concepts-grid {
    grid-template-columns: 1fr;
  }

  .location-card-body {
    grid-template-columns: 56px 1fr;
  }

  .location-card-emblem {
    width: 56px;
    height: 56px;
  }

  .map-base .base-label {
    font-size: 13px;
  }
}


/* v132/v153: world map without white border */
.map-frame-image {
  --map-border: 0px;
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: #000;
  padding: 0;
}

.locations-world-map {
  width: 100%;
  height: auto;
  display: block;
  background: #000;
}

.base-marker-layer {
  position: absolute;
  inset: var(--map-border);
  pointer-events: none;
}

.base-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  padding: 0;
  border: 2px solid #00ffff;
  border-radius: 50%;
  background: #071014;
  color: #fff;
  display: grid;
  place-items: center;
  font: 800 12px/1 Arial, sans-serif;
  box-shadow:
    0 0 0 4px rgba(0,255,255,.10),
    0 0 16px rgba(0,255,255,.60);
  cursor: pointer;
  pointer-events: auto;
  z-index: 2;
}

.base-pin::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(0,255,255,.28);
  border-radius: 50%;
}

.base-pin em {
  position: absolute;
  left: 42px;
  top: 50%;
  transform: translateY(-50%);
  padding: 5px 8px;
  border: 1px solid rgba(0,255,255,.34);
  border-radius: 6px;
  background: rgba(3,10,13,.94);
  color: #aefeff;
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease, visibility .15s ease;
}

.base-pin:hover em,
.base-pin:focus-visible em {
  opacity: 1;
  visibility: visible;
}

/* Approximate base positions over the new world map */
.pin-01 { left: 14.8%; top: 29.0%; }
.pin-02 { left: 24.8%; top: 27.5%; }
.pin-03 { left: 28.0%; top: 58.0%; }
.pin-04 { left: 42.0%; top: 24.0%; }
.pin-05 { left: 53.5%; top: 20.5%; }
.pin-06 { left: 51.0%; top: 34.0%; }
.pin-07 { left: 52.5%; top: 68.0%; }
.pin-08 { left: 66.0%; top: 38.0%; }
.pin-09 { left: 84.0%; top: 29.0%; }
.pin-10 { left: 85.0%; top: 64.0%; }
.pin-11 { display: none; }
.pin-12 { display: none; }

@media (max-width: 650px) {
  .base-pin {
    width: 28px;
    height: 28px;
    font-size: 10px;
  }

  .base-pin em {
    display: none;
  }
}


/* v125: new FSC male mascot in the Example Personnel identification photo */
.employee-mascot-photo {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 8px;
  width: auto;
  height: 392px;
  max-width: none;
  transform: translateX(-50%);
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 900px) {
  .employee-mascot-photo {
    top: 8px;
    height: 390px;
  }
}

@media (max-width: 650px) {
  .employee-mascot-photo {
    top: 9px;
    height: 365px;
  }
}

/* v127: centered identification photo carousel with front and side views */
.employee-identification-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  gap: 10px;
}

.employee-identification-column .employee-photo-frame {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
  padding: 34px 16px 10px;
  /* Remove the old measurement / height-line treatment. */
  background: linear-gradient(180deg, #ded5c3 0%, #eee6d7 100%);
}

.employee-identification-column .employee-mascot-photo {
  position: static;
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  transform: none;
  margin: 0 auto;
  pointer-events: none;
  user-select: none;
}

.employee-photo-picker {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 8px;
  padding: 7px;
  border: 1px solid rgba(37, 33, 28, .28);
  background: rgba(238, 230, 215, .72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26);
}

.employee-photo-thumbnails {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}

.employee-photo-thumb,
.employee-photo-arrow {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(37, 33, 28, .32);
  background: rgba(255, 255, 255, .26);
  color: #17140f;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease, transform .16s ease;
}

.employee-photo-arrow {
  width: 38px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 1.25rem;
  line-height: 1;
  font-weight: 900;
}

.employee-photo-thumb {
  position: relative;
  height: 52px;
  min-width: 0;
  padding: 3px;
  overflow: hidden;
}

.employee-photo-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
}

.employee-photo-thumb.is-active {
  border-color: #00ffff;
  box-shadow: inset 0 0 0 1px #00ffff, 0 0 0 1px rgba(0,255,255,.18);
  background: rgba(0,255,255,.07);
}

.employee-photo-thumb:hover,
.employee-photo-arrow:hover,
.employee-photo-thumb:focus-visible,
.employee-photo-arrow:focus-visible {
  border-color: rgba(0,255,255,.9);
  outline: none;
}

.employee-photo-arrow:active,
.employee-photo-thumb:active {
  transform: translateY(1px);
}

@media (min-width: 901px) {
  .employee-identification-column {
    align-self: stretch;
  }

  .employee-identification-column .employee-photo-frame {
    min-height: 330px;
  }
}

@media (max-width: 650px) {
  .employee-identification-column .employee-photo-frame {
    min-height: 300px;
  }

  .employee-photo-picker {
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    gap: 6px;
    padding: 6px;
  }

  .employee-photo-arrow {
    width: 34px;
    height: 48px;
  }

  .employee-photo-thumb {
    height: 48px;
  }
}

/* v128: full-width personnel file + 25% identification column + four-view carousel */
.example-employee-section {
  width: 100%;
}

.employee-paper-card {
  width: 100%;
  max-width: none;
}

.employee-paper-body {
  /* The identification area occupies one quarter of the usable card width. */
  grid-template-columns: 25% minmax(0, 1fr);
  gap: 26px;
}

.employee-photo-thumbnails {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.employee-identification-column .employee-photo-frame {
  width: 100%;
  min-width: 0;
}

/* Keep every turnaround asset visually centered and consistently scaled. */
.employee-identification-column .employee-mascot-photo {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
}

@media (max-width: 900px) {
  .employee-paper-card {
    width: 100%;
    max-width: none;
  }

  .employee-paper-body {
    grid-template-columns: 25% minmax(0, 1fr);
    gap: 18px;
  }
}

@media (max-width: 650px) {
  .employee-paper-body {
    grid-template-columns: 1fr;
  }

  .employee-photo-thumbnails {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* v129: one-third identification column + square identification photo */
.employee-paper-body {
  grid-template-columns: 33.333% minmax(0, 1fr);
}

.employee-identification-column .employee-photo-frame {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  min-height: 0;
  flex: 0 0 auto;
}

@media (max-width: 900px) and (min-width: 651px) {
  .employee-paper-body {
    grid-template-columns: 33.333% minmax(0, 1fr);
  }
}

@media (max-width: 650px) {
  .employee-paper-body {
    grid-template-columns: 1fr;
  }

  .employee-identification-column .employee-photo-frame {
    aspect-ratio: 1 / 1;
    height: auto;
    min-height: 0;
  }
}

/* v130: return identification column to one-quarter while preserving square photo */
.employee-paper-body {
  grid-template-columns: 25% minmax(0, 1fr);
}

.employee-identification-column .employee-photo-frame {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  min-height: 0;
}

@media (max-width: 900px) and (min-width: 651px) {
  .employee-paper-body {
    grid-template-columns: 25% minmax(0, 1fr);
  }
}

@media (max-width: 650px) {
  .employee-paper-body {
    grid-template-columns: 1fr;
  }

  .employee-identification-column .employee-photo-frame {
    aspect-ratio: 1 / 1;
    height: auto;
  }
}

/* v131: expand Wonders example file to match Branches dossier proportions */
.wonder-dossier {
  width: 100%;
  max-width: none !important;
  margin-left: 0;
  margin-right: 0;
}

.wonder-dossier-body {
  grid-template-columns: 25% minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

.wonder-dossier-left,
.wonder-id-panel {
  min-width: 0;
}

.wonder-id-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
}

.wonder-id-label {
  margin: 0;
  padding: 0 2px;
}

.wonder-id-frame {
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 0;
  height: auto;
  box-sizing: border-box;
  padding: 28px;
  background: linear-gradient(180deg, #ded5c3 0%, #eee6d7 100%);
  overflow: hidden;
}

.wonder-id-frame img {
  display: block;
  width: 72%;
  height: 72%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  margin: auto;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.18));
}

.wonder-photo-picker {
  width: 100%;
  box-sizing: border-box;
}

.wonder-photo-thumbnails {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wonder-photo-thumb img {
  object-fit: contain;
  object-position: center center;
}

@media (max-width: 900px) and (min-width: 651px) {
  .wonder-dossier-body {
    grid-template-columns: 25% minmax(0, 1fr);
    gap: 18px;
  }

  .wonder-id-frame {
    aspect-ratio: 1 / 1;
    min-height: 0;
    padding: 20px;
  }
}

@media (max-width: 650px) {
  .wonder-dossier-body {
    grid-template-columns: 1fr;
  }

  .wonder-id-frame {
    aspect-ratio: 1 / 1;
    min-height: 0;
    padding: 24px;
  }
}

/* v154: full-width Locations hero + borderless Earth map */
.locations-hero {
  max-width: none;
}

.map-frame.map-frame-image {
  border: 0 !important;
  box-shadow: none !important;
  background: #000 !important;
  padding: 0 !important;
}

/* v166: Branches / Staff page split */
.branch-stat-row-single {
  grid-template-columns: minmax(0, 210px);
}

.staff-page-hero {
  padding-bottom: 30px;
}

.staff-stat-row {
  grid-template-columns: repeat(2, minmax(0, 210px));
}

.staff-page-hero + .example-employee-section {
  margin-top: 10px;
}

@media (max-width: 650px) {
  .branch-stat-row-single,
  .staff-stat-row {
    grid-template-columns: 1fr;
  }
}

/* v170: light institutional FSC shell with dark tactical modules */
:root {
  --bg:#f4f7f9;
  --surface:#ffffff;
  --surface-2:#edf3f6;
  --surface-3:#e3ebef;
  --text:#111820;
  --muted:#586874;
  --line:rgba(18,43,55,.14);
  --shadow:0 18px 42px rgba(23,43,55,.12);
}

body {
  background:
    radial-gradient(circle at 14% 0,rgba(0,255,255,.10),transparent 28rem),
    linear-gradient(180deg,#f9fbfc 0%,#f3f6f8 46%,#eef3f5 100%);
  color:var(--text);
}

.page-shell {
  position:relative;
}

.section-block + .section-block,
.first-subpage-section {
  border-color:rgba(18,43,55,.12);
}

.section-heading > p:not(.section-kicker),
.subpage-hero > p:not(.section-kicker),
.subpage-hero > div > p:not(.section-kicker),
.branches-hero-copy > p:not(.section-kicker) {
  color:var(--muted);
}

/* White institutional cards */
.home-link-card,
.identity-card,
.branch-card,
.class-note,
.metric-definitions article,
.threat-explainer,
.scale-card,
.wonder-logo-panel,
.wonder-copy,
.branch-emblem-wall,
.branch-breakdown-panel,
.table-shell {
  background:
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,251,252,.98));
  border-color:rgba(15,55,70,.14);
  box-shadow:var(--shadow);
}

.home-link-card:hover,
.identity-card:hover,
.branch-card:hover {
  border-color:rgba(0,255,255,.42);
  box-shadow:0 18px 34px rgba(23,43,55,.15),0 0 0 1px rgba(0,255,255,.05);
}

.home-link-card strong,
.identity-card h2,
.branch-card h2,
.branch-card h3,
.class-note h2,
.threat-explainer h3 {
  color:#14202a;
}

.home-link-card small,
.identity-card p,
.branch-card p,
.metric-definitions p,
.threat-explainer p,
.scale-list span,
.wonder-copy p {
  color:#5b6974;
}

/* Home/about cards get a subtle technical accent instead of a black field. */
.home-link-card {
  position:relative;
  overflow:hidden;
}

.home-link-card::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(0,255,255,.52),transparent);
  opacity:.75;
}

/* Hero stat modules */
.branch-stat-row > div,
.locations-stat-row > div,
.wonder-stat-row > div {
  background:
    linear-gradient(145deg,rgba(0,255,255,.07),rgba(255,255,255,.82)),
    #fff;
  border-color:rgba(0,255,255,.26);
  box-shadow:0 8px 22px rgba(25,55,68,.07);
}

.branch-stat-row span,
.locations-stat-row span,
.wonder-stat-row span {
  color:#4b5b66;
}

/* Branches: clean white information panels, dark icon bays preserved. */
.branch-emblem-wall {
  background:
    radial-gradient(circle at 50% 50%,rgba(0,255,255,.075),transparent 58%),
    linear-gradient(180deg,#ffffff,#f5f9fa);
}

.branch-breakdown-panel {
  background:
    radial-gradient(circle at 10% 50%,rgba(0,255,255,.075),transparent 29%),
    linear-gradient(180deg,#ffffff,#f7fafb);
}

.branch-breakdown-emblem {
  background:
    radial-gradient(circle at 50% 45%,rgba(0,255,255,.08),transparent 60%),
    #081014;
  border-color:rgba(0,255,255,.28);
  box-shadow:inset 0 0 24px rgba(0,0,0,.20);
}

.branch-breakdown-description {
  color:#344651;
}

.branch-focus-list span {
  color:#37515d;
  background:rgba(0,255,255,.065);
  border-color:rgba(0,255,255,.18);
}

/* Keep branch-selector icon buttons as compact dark tactical controls. */
.branch-emblem-button {
  border-color:rgba(0,255,255,.20);
}

/* Staff Classes table: light data sheet with a dark technical header. */
.table-shell {
  overflow:hidden;
}

.class-table th,
.class-table td {
  border-bottom-color:rgba(18,43,55,.10);
}

.class-table th {
  background:linear-gradient(180deg,#16232b,#0c161c);
  color:#00ffff;
}

.class-table td {
  color:#45545f;
  background:rgba(255,255,255,.76);
}

.class-table td:first-child {
  color:#172832;
}

.class-table tbody tr:hover td {
  background:#f0f8fa;
}

.rule-banner {
  color:#364b56;
  background:rgba(0,255,255,.065);
  border-color:rgba(0,255,255,.24);
  border-left-color:#00ffff;
}

.rule-banner strong {
  color:#172832;
}

/* Wonders: keep the paper dossier, lighten the explanatory UI around it. */
.metric-definitions article,
.threat-explainer,
.scale-card {
  border-color:rgba(18,43,55,.13);
}

.psychic-example {
  color:#2f4853;
  background:rgba(0,255,255,.065);
}

.scale-list li {
  border-top-color:rgba(18,43,55,.09);
}

/* Preserve dark tactical data/readout components. */
.wonder-record,
.map-card,
.earth-bases-panel,
.location-card,
.icon-concept-card,
.offworld-visual-frame,
.redacted-location-frame {
  color:#f5f8fb;
}

.wonder-record {
  box-shadow:0 18px 40px rgba(0,0,0,.22);
}

/* Locations: the surrounding page is light; the actual operational map stays dark. */
.world-map-section {
  padding:8px 0 0;
}

.map-card {
  box-shadow:0 20px 46px rgba(14,31,40,.22),inset 0 0 0 1px rgba(0,0,0,.045);
}

/* Footer belongs to the light shell now. */
.site-footer {
  border-top-color:rgba(18,43,55,.12);
  color:#667782;
}

.site-footer p {
  color:#394b56;
}

/* Small text cleanup for light surfaces. */
.definition strong,
.class-examples strong {
  color:#172832;
}

.class-examples article,
.example-record {
  background:#fff;
  border-color:rgba(18,43,55,.13);
}

.class-examples p,
.example-record p {
  color:#596a75;
}

/* The dark sci-fi header remains intentionally unchanged. */
.site-header,
.site-header * {
  --text:#f5f8fb;
}


/* Cyan text on white/light surfaces gets a dark header-chip background for readability. */
.section-kicker,
.record-label,
.class-examples h2,
.class-examples h3,
.metric-definitions h2,
.metric-definitions h3,
.scale-card h2,
.scale-card h3,
.branch-stat-row strong,
.branch-purpose-label {
  display: inline-block;
  width: max-content;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, #1b2127 0%, #12181d 100%);
  border: 1px solid rgba(0,255,255,.22);
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

.branch-stat-row strong {
  line-height: 1;
}


/* v190 — selected Branch information stays fully light. */
.branch-breakdown-panel {
  background:
    radial-gradient(circle at 10% 50%, rgba(0,255,255,.055), transparent 30%),
    linear-gradient(180deg, #ffffff, #f7fafb);
}

.branch-breakdown-emblem {
  background:
    radial-gradient(circle at 50% 45%, rgba(0,255,255,.07), transparent 62%),
    #ffffff;
  border-color: rgba(18,43,55,.13);
  box-shadow: inset 0 0 18px rgba(18,43,55,.035);
}

.branch-purpose-label {
  color: var(--accent);
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

/* Wonders scale headings: plain black text, no dark label background. */
.scale-card h2 {
  display: block;
  width: auto;
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #000000;
}


/* v192 — Locations picture group outer shell is white while the inner tactical frames stay dark. */
.map-card {
  background:#ffffff;
  border:1px solid rgba(18,43,55,.13);
  box-shadow:0 18px 40px rgba(0,0,0,.10);
  color:#172832;
}


/* v192 — Wonders level tables use Staff-style table headers and black first-column labels. */
.scale-card {
  padding:0;
  overflow:hidden;
  background:#ffffff;
}

.scale-card .table-shell {
  overflow:hidden;
  border-radius:inherit;
}

.scale-table td:first-child {
  color:#000000;
  font-weight:700;
  white-space:nowrap;
  width:220px;
}

.scale-table td {
  vertical-align:top;
}


/* v194 — center the numeric 0–9 columns in all staff/wonder level tables. */
.class-table th:first-child,
.class-table td:first-child {
  text-align:center;
}


@media(max-width:650px) {
  .brand::before {
    width:625px;
    height:625px;
  }
}


/* v196 — Homepage cleanup: remove the black outer Global Statement frame. */
.etched-plaque {
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
}

.plaque-frame {
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
}

/* Expanded About copy replaces the old homepage link cards. */
.about-expanded-copy {
  max-width:1100px;
}

.about-expanded-copy > p:not(.section-kicker) {
  max-width:1050px;
  font-size:1.04rem;
  line-height:1.75;
}

.about-expanded-copy > p + p {
  margin-top:18px;
}


/* v198 — About copy spans the same content width as the Global Statement. */
.home-about .section-heading {
  width:100%;
  max-width:none;
}

.home-about .section-heading > p:not(.section-kicker) {
  max-width:none;
}


/* v199 — Staff Classes intro uses the full content width, matching the Example File. */
.classes-on-branches .section-heading {
  width:100%;
  max-width:none;
}

.classes-on-branches .section-heading > p:not(.section-kicker) {
  max-width:none;
}

/* v199 — Responsive Class / Intelligence / Destruction tables.
   Keep the two-column table layout on phones, but remove the desktop minimum width
   and let both columns wrap instead of getting clipped. */
@media(max-width:650px) {
  .classes-on-branches .table-shell,
  .scale-card .table-shell {
    width:100%;
    overflow:hidden;
  }

  .class-table {
    width:100%;
    min-width:0;
    table-layout:fixed;
  }

  .class-table th,
  .class-table td {
    padding:10px 8px;
    font-size:.78rem;
    line-height:1.35;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:normal;
  }

  .class-table th:first-child,
  .class-table td:first-child {
    width:28%;
    min-width:0;
    white-space:normal;
  }

  .scale-table th:first-child,
  .scale-table td:first-child {
    width:34%;
    min-width:0;
    white-space:normal;
  }
}


/* v200 — Unified subpage titles + site-wide language strip. */
.branches-hero-copy h1,
.staff-page-hero h1,
.wonders-hero h1,
.locations-hero-copy h1 {
  margin:0;
  font-size:clamp(2.7rem,5vw,4.6rem);
  line-height:1.02;
  letter-spacing:.01em;
}

.language-strip {
  position:relative;
  z-index:2;
  display:none;
  grid-template-columns:repeat(12,minmax(0,1fr));
  width:100%;
  border-top:1px solid rgba(0,0,0,.18);
  border-bottom:1px solid rgba(0,255,255,.72);
  background:#071014;
  box-shadow:0 5px 16px rgba(0,0,0,.18);
}

.language-choice {
  position:relative;
  min-width:0;
  border-right:1px solid rgba(0,0,0,.22);
}

.language-choice:nth-child(12) {
  border-right:0;
}

.language-choice input {
  position:absolute;
  width:1px;
  height:1px;
  margin:0;
  opacity:0;
  pointer-events:none;
}

.language-choice span {
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:34px;
  height:100%;
  padding:7px 5px;
  background:#00ffff;
  color:#000000;
  font-size:clamp(.58rem,.72vw,.78rem);
  font-weight:900;
  line-height:1.15;
  text-align:center;
  white-space:normal;
  cursor:pointer;
  transition:filter .16s ease,color .16s ease,box-shadow .16s ease;
}

.language-choice:hover span {
  filter:brightness(.92);
}

.language-choice input:focus-visible + span {
  outline:none;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.22);
}

.language-choice input:checked + span {
  color:#ffffff;
  text-shadow:0 1px 2px rgba(0,0,0,.65);
  box-shadow:inset 0 -3px 0 rgba(255,255,255,.95);
}

@media(max-width:900px) {
  .language-strip {
    grid-template-columns:repeat(6,minmax(0,1fr));
  }

  .language-choice span {
    font-size:.7rem;
  }
}

@media(max-width:650px) {
  .branches-hero-copy h1,
  .staff-page-hero h1,
  .wonders-hero h1,
  .locations-hero-copy h1 {
    font-size:clamp(2rem,10vw,3rem);
  }

  .language-strip {
    grid-template-columns:repeat(5,minmax(0,1fr));
  }

  .language-choice span {
    min-height:32px;
    padding:6px 3px;
    font-size:.64rem;
  }
}


/* v202 — CSS-only Languages toggle in the main navigation. */
.language-panel-toggle {
  position:absolute;
  width:1px;
  height:1px;
  margin:0;
  opacity:0;
  pointer-events:none;
}

.language-panel-toggle:checked ~ .language-strip {
  display:grid;
}

.site-nav .language-nav-toggle {
  position:relative;
  padding:9px 0;
  color:#eaf3f7;
  text-decoration:none;
  text-transform:uppercase;
  font-size:.82rem;
  font-weight:900;
  letter-spacing:.07em;
  cursor:pointer;
  user-select:none;
  text-shadow:0 0 12px rgba(0,255,255,0);
  transition:color .18s ease,text-shadow .18s ease;
}

.site-nav .language-nav-toggle::after {
  content:"";
  position:absolute;
  left:0;
  bottom:3px;
  width:100%;
  height:2px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .2s ease;
}

.site-nav .language-nav-toggle:hover,
.language-panel-toggle:checked ~ .header-inner .language-nav-toggle {
  color:#ffffff;
  text-shadow:0 0 12px rgba(0,255,255,.30);
}

.site-nav .language-nav-toggle:hover::after,
.language-panel-toggle:checked ~ .header-inner .language-nav-toggle::after {
  transform:scaleX(1);
}

@media(max-width:650px) {
  .site-nav .language-nav-toggle {
    font-size:.76rem;
  }
}


/* v203 — CSS-only Languages auto-close + About submenu. */
.language-panel-toggle,
.about-panel-toggle {
  position:absolute;
  width:1px;
  height:1px;
  margin:0;
  opacity:0;
  pointer-events:none;
}

.language-strip,
.about-strip {
  position:relative;
  z-index:2;
  display:none;
  width:100%;
  border-top:1px solid rgba(0,0,0,.18);
  border-bottom:1px solid rgba(0,255,255,.72);
  background:#071014;
  box-shadow:0 5px 16px rgba(0,0,0,.18);
}

.language-strip {
  grid-template-columns:repeat(12,minmax(0,1fr));
}

.about-strip {
  grid-template-columns:repeat(5,minmax(0,1fr));
}

.language-panel-toggle:checked ~ .language-strip,
.about-panel-toggle:checked ~ .about-strip {
  display:grid;
}

.language-choice,
.about-choice {
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:34px;
  height:100%;
  padding:7px 5px;
  border-right:1px solid rgba(0,0,0,.22);
  background:#00ffff;
  color:#000000;
  text-decoration:none;
  font-size:clamp(.58rem,.72vw,.78rem);
  font-weight:900;
  line-height:1.15;
  text-align:center;
  white-space:normal;
  cursor:pointer;
  transition:filter .16s ease,color .16s ease,box-shadow .16s ease;
}

.language-choice:last-child,
.about-choice:last-child {
  border-right:0;
}

.language-choice:hover,
.about-choice:hover {
  filter:brightness(.92);
}

.language-choice:focus-visible,
.about-choice:focus-visible {
  outline:none;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.22);
}

/* Selected language: the clicked language becomes :target after the static page reload.
   English is the visual default when no language target is present. */
.language-choice.is-active {
  color:#ffffff;
  text-shadow:0 1px 2px rgba(0,0,0,.65);
  box-shadow:inset 0 -3px 0 rgba(255,255,255,.95);
}

.about-choice.is-active {
  color:#ffffff;
  text-shadow:0 1px 2px rgba(0,0,0,.65);
  box-shadow:inset 0 -3px 0 rgba(255,255,255,.95);
}

.site-nav .language-nav-toggle,
.site-nav .about-nav-toggle {
  position:relative;
  padding:9px 0;
  color:#eaf3f7;
  text-decoration:none;
  text-transform:uppercase;
  font-size:.82rem;
  font-weight:900;
  letter-spacing:.07em;
  cursor:pointer;
  user-select:none;
  text-shadow:0 0 12px rgba(0,255,255,0);
  transition:color .18s ease,text-shadow .18s ease;
}

.site-nav .language-nav-toggle::after,
.site-nav .about-nav-toggle::after {
  content:"";
  position:absolute;
  left:0;
  bottom:3px;
  width:100%;
  height:2px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .2s ease;
}

.site-nav .language-nav-toggle:hover,
.site-nav .about-nav-toggle:hover,
.language-panel-toggle:checked ~ .header-inner .language-nav-toggle,
.about-panel-toggle:checked ~ .header-inner .about-nav-toggle {
  color:#ffffff;
  text-shadow:0 0 12px rgba(0,255,255,.30);
}

.site-nav .language-nav-toggle:hover::after,
.site-nav .about-nav-toggle:hover::after,
.language-panel-toggle:checked ~ .header-inner .language-nav-toggle::after,
.about-panel-toggle:checked ~ .header-inner .about-nav-toggle::after::after {
  transform:scaleX(1);
}

/* Override the older v200 radio-label language styling. */
.language-choice input,
.language-choice span {
  all:unset;
}

@media(max-width:900px) {
  .language-strip {
    grid-template-columns:repeat(6,minmax(0,1fr));
  }
}

@media(max-width:650px) {
  .language-strip {
    grid-template-columns:repeat(5,minmax(0,1fr));
  }

  .about-strip {
    grid-template-columns:1fr;
  }

  .language-choice,
  .about-choice {
    min-height:32px;
    padding:6px 3px;
    font-size:.64rem;
  }

  .site-nav .language-nav-toggle,
  .site-nav .about-nav-toggle {
    font-size:.76rem;
  }
}


/* v204 — CSS-only Wonders submenu and corrected top-nav underline state. */
.wonders-panel-toggle {
  position:absolute;
  width:1px;
  height:1px;
  margin:0;
  opacity:0;
  pointer-events:none;
}

.wonders-strip {
  position:relative;
  z-index:2;
  display:none;
  grid-template-columns:repeat(2,minmax(0,1fr));
  width:100%;
  border-top:1px solid rgba(0,0,0,.18);
  border-bottom:1px solid rgba(0,255,255,.72);
  background:#071014;
  box-shadow:0 5px 16px rgba(0,0,0,.18);
}

.wonders-panel-toggle:checked ~ .wonders-strip {
  display:grid;
}

.wonder-choice {
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:34px;
  height:100%;
  padding:7px 5px;
  border-right:1px solid rgba(0,0,0,.22);
  background:#00ffff;
  color:#000000;
  text-decoration:none;
  font-size:clamp(.58rem,.72vw,.78rem);
  font-weight:900;
  line-height:1.15;
  text-align:center;
  white-space:normal;
  transition:filter .16s ease,color .16s ease,box-shadow .16s ease;
}

.wonder-choice:last-child {
  border-right:0;
}

.wonder-choice:hover {
  filter:brightness(.92);
}

.wonder-choice.is-active {
  color:#ffffff;
  text-shadow:0 1px 2px rgba(0,0,0,.65);
  box-shadow:inset 0 -3px 0 rgba(255,255,255,.95);
}

.site-nav .wonders-nav-toggle {
  position:relative;
  padding:9px 0;
  color:#eaf3f7;
  text-transform:uppercase;
  font-size:.82rem;
  font-weight:900;
  letter-spacing:.07em;
  cursor:pointer;
  user-select:none;
  text-shadow:0 0 12px rgba(0,255,255,0);
  transition:color .18s ease,text-shadow .18s ease;
}

.site-nav .wonders-nav-toggle::after {
  content:"";
  position:absolute;
  left:0;
  bottom:3px;
  width:100%;
  height:2px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .2s ease;
}

.site-nav .wonders-nav-toggle:hover,
.wonders-panel-toggle:checked ~ .header-inner .wonders-nav-toggle {
  color:#ffffff;
  text-shadow:0 0 12px rgba(0,255,255,.30);
}

.site-nav .wonders-nav-toggle:hover::after,
.wonders-panel-toggle:checked ~ .header-inner .wonders-nav-toggle::after {
  transform:scaleX(1);
}

/* About no longer keeps its underline merely because the current page belongs to About. */
.site-nav .about-nav-toggle.section-active::after {
  transform:scaleX(0);
}
.site-nav .about-nav-toggle.section-active:hover::after,
.about-panel-toggle:checked ~ .header-inner .about-nav-toggle.section-active::after {
  transform:scaleX(1);
}

/* Simple public directory/list pages. */
.wonder-list-hero h1,
.wonder-tales-hero h1 {
  margin:0;
  font-size:clamp(2.7rem,5vw,4.6rem);
  line-height:1.02;
  letter-spacing:.01em;
}

.wonder-list-hero > p,
.wonder-tales-hero > p {
  margin:16px 0 0;
  max-width:900px;
  color:var(--muted);
  font-size:1.06rem;
}

.wonder-directory-list,
.wonder-tales-list {
  display:grid;
  gap:14px;
}

.wonder-directory-entry,
.wonder-tale-entry {
  display:grid;
  grid-template-columns:minmax(120px,190px) 1fr;
  align-items:center;
  gap:18px;
  padding:18px 20px;
  border:1px solid rgba(18,43,55,.13);
  border-radius:16px;
  background:#ffffff;
  color:#172832;
  text-decoration:none;
  box-shadow:0 10px 24px rgba(0,0,0,.07);
  transition:transform .18s ease,border-color .18s ease;
}

.wonder-directory-entry:hover,
.wonder-tale-entry:hover {
  transform:translateY(-2px);
  border-color:rgba(0,255,255,.62);
}

.wonder-directory-entry strong,
.wonder-tale-entry strong {
  color:#000000;
  font-size:1.08rem;
}

.wonder-directory-entry span {
  color:#596a75;
}

@media(max-width:650px) {
  .wonders-strip {
    grid-template-columns:1fr;
  }

  .wonder-choice {
    min-height:32px;
    padding:6px 3px;
    font-size:.64rem;
    border-right:0;
    border-bottom:1px solid rgba(0,0,0,.18);
  }

  .wonder-choice:last-child {
    border-bottom:0;
  }

  .site-nav .wonders-nav-toggle {
    font-size:.76rem;
  }

  .wonder-list-hero h1,
  .wonder-tales-hero h1 {
    font-size:clamp(2rem,10vw,3rem);
  }

  .wonder-directory-entry,
  .wonder-tale-entry {
    grid-template-columns:1fr;
    gap:5px;
  }
}

/* v205 — Polished CSS-only navigation drawers. */
.language-strip,
.about-strip,
.wonders-strip {
  position:relative;
  z-index:3;
  display:grid !important;
  width:min(1180px,calc(100% - 40px));
  margin:0 auto;
  gap:9px;
  padding:0 12px;
  max-height:0;
  opacity:0;
  overflow:hidden;
  pointer-events:none;
  transform:translateY(-10px) scale(.985);
  transform-origin:top center;
  border:1px solid transparent;
  border-radius:0 0 18px 18px;
  background:
    linear-gradient(180deg,rgba(18,29,36,.985),rgba(6,12,16,.99));
  box-shadow:none;
  transition:
    max-height .30s cubic-bezier(.2,.75,.25,1),
    opacity .18s ease,
    transform .30s cubic-bezier(.2,.75,.25,1),
    padding .30s cubic-bezier(.2,.75,.25,1),
    margin-bottom .30s cubic-bezier(.2,.75,.25,1),
    border-color .18s ease,
    box-shadow .22s ease;
}

.language-strip {
  grid-template-columns:repeat(6,minmax(0,1fr));
}

.about-strip {
  width:min(760px,calc(100% - 40px));
  grid-template-columns:repeat(5,minmax(0,1fr));
}

.wonders-strip {
  width:min(650px,calc(100% - 40px));
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.language-panel-toggle:checked ~ .language-strip,
.about-panel-toggle:checked ~ .about-strip,
.wonders-panel-toggle:checked ~ .wonders-strip {
  max-height:420px;
  opacity:1;
  pointer-events:auto;
  transform:translateY(0) scale(1);
  padding:12px;
  margin-bottom:12px;
  border-color:rgba(0,255,255,.24);
  box-shadow:
    0 14px 30px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 -1px 0 rgba(0,255,255,.08);
}

/* Languages retain the cyan-button visual identity, but become individual soft tiles. */
.language-choice {
  min-height:40px;
  padding:8px 9px;
  border:1px solid rgba(0,0,0,.18) !important;
  border-radius:10px;
  background:linear-gradient(180deg,#20ffff 0%,#00e8e8 100%);
  color:#001012;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 3px 8px rgba(0,0,0,.16);
  transition:
    transform .16s ease,
    filter .16s ease,
    box-shadow .16s ease,
    color .16s ease;
}

.language-choice:hover {
  transform:translateY(-1px);
  filter:brightness(1.035);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58),
    0 6px 12px rgba(0,0,0,.22),
    0 0 12px rgba(0,255,255,.10);
}

.language-choice.is-active {
  color:#ffffff;
  text-shadow:0 1px 2px rgba(0,0,0,.72);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.68),
    inset 0 1px 0 rgba(255,255,255,.52),
    0 5px 12px rgba(0,0,0,.22);
}

/* About/Wonders use quieter menu cards so they read like navigation, not language buttons. */
.about-choice,
.wonder-choice {
  min-height:42px;
  padding:9px 12px;
  border:1px solid rgba(0,255,255,.14) !important;
  border-radius:10px;
  background:rgba(255,255,255,.045);
  color:#e9f3f6;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  font-size:.76rem;
  letter-spacing:.035em;
  transition:
    transform .16s ease,
    background .16s ease,
    border-color .16s ease,
    color .16s ease,
    box-shadow .16s ease;
}

.about-choice:hover,
.wonder-choice:hover {
  transform:translateY(-1px);
  filter:none;
  background:rgba(0,255,255,.09);
  border-color:rgba(0,255,255,.38) !important;
  color:#ffffff;
  box-shadow:0 5px 12px rgba(0,0,0,.18);
}

.about-choice.is-active,
.wonder-choice.is-active {
  color:#00ffff;
  text-shadow:0 0 10px rgba(0,255,255,.22);
  background:rgba(0,255,255,.07);
  border-color:rgba(0,255,255,.42) !important;
  box-shadow:inset 0 -2px 0 #00ffff;
}

/* Small chevrons make it clear that these top-nav items open menus. */
.site-nav .language-nav-toggle,
.site-nav .about-nav-toggle,
.site-nav .wonders-nav-toggle {
  display:inline-flex;
  align-items:center;
  gap:7px;
}

.site-nav .language-nav-toggle::before,
.site-nav .about-nav-toggle::before,
.site-nav .wonders-nav-toggle::before {
  content:"";
  width:5px;
  height:5px;
  flex:0 0 auto;
  border-right:1.5px solid rgba(0,255,255,.88);
  border-bottom:1.5px solid rgba(0,255,255,.88);
  transform:rotate(45deg) translateY(-2px);
  transform-origin:center;
  transition:transform .18s ease;
}

.language-panel-toggle:checked ~ .header-inner .language-nav-toggle::before,
.about-panel-toggle:checked ~ .header-inner .about-nav-toggle::before,
.wonders-panel-toggle:checked ~ .header-inner .wonders-nav-toggle::before {
  transform:rotate(225deg) translate(-1px,-1px);
}

@media(max-width:900px) {
  .language-strip {
    grid-template-columns:repeat(4,minmax(0,1fr));
  }

  .about-strip {
    grid-template-columns:repeat(5,minmax(0,1fr));
  }
}

@media(max-width:650px) {
  .language-strip,
  .about-strip,
  .wonders-strip {
    width:min(100% - 24px,1180px);
    gap:7px;
    border-radius:0 0 14px 14px;
  }

  .language-strip {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .about-strip {
    grid-template-columns:1fr;
  }

  .wonders-strip {
    grid-template-columns:1fr;
  }

  .language-panel-toggle:checked ~ .language-strip,
  .about-panel-toggle:checked ~ .about-strip,
  .wonders-panel-toggle:checked ~ .wonders-strip {
    padding:10px;
    margin-bottom:10px;
  }

  .language-choice,
  .about-choice,
  .wonder-choice {
    min-height:38px;
    padding:8px 7px;
    font-size:.7rem;
  }
}


/* v207 — static multilingual pages */
html[dir="rtl"] body { direction:rtl; }
html[dir="rtl"] .header-inner,
html[dir="rtl"] .site-nav,
html[dir="rtl"] .about-strip,
html[dir="rtl"] .wonders-strip,
html[dir="rtl"] .language-strip { direction:rtl; }
html[dir="rtl"] .brand { direction:ltr; }
html[dir="rtl"] .class-table th,
html[dir="rtl"] .class-table td { text-align:right; }
html[dir="rtl"] .class-table th:first-child,
html[dir="rtl"] .class-table td:first-child { text-align:center; }
html[dir="rtl"] .branch-breakdown-copy,
html[dir="rtl"] .section-heading,
html[dir="rtl"] .locations-hero-copy { text-align:right; }


/* v213 — About Staff + Staff Files directory and Branch Head personnel files. */
.about-strip {
  width:min(940px,calc(100% - 40px));
  grid-template-columns:repeat(5,minmax(0,1fr));
}
.staff-files-hero > p {
  margin:16px 0 0;
  max-width:900px;
  color:var(--muted);
  font-size:1.06rem;
}
.staff-directory-list {
  display:grid;
  gap:14px;
}
.staff-directory-entry {
  display:grid;
  grid-template-columns:minmax(210px,330px) 1fr;
  align-items:center;
  gap:18px;
  padding:18px 20px;
  border:1px solid rgba(18,43,55,.13);
  border-radius:16px;
  background:#ffffff;
  color:#172832;
  text-decoration:none;
  box-shadow:0 10px 24px rgba(0,0,0,.07);
  transition:transform .18s ease,border-color .18s ease;
}
.staff-directory-entry:hover {
  transform:translateY(-2px);
  border-color:rgba(0,255,255,.62);
}
.staff-directory-entry strong {
  color:#000000;
  font-size:1.08rem;
}
.staff-directory-entry span {
  color:#596a75;
}
.staff-file-page .staff-record-section {
  padding-top:18px;
}
@media(max-width:900px) {
  .about-strip {
    grid-template-columns:1fr;
  }
}
@media(max-width:650px) {
  .about-strip {
    grid-template-columns:1fr;
  }
  .staff-directory-entry {
    grid-template-columns:1fr;
    gap:5px;
  }
}


/* v214 — expanded English Branch Head staff files. */
.employee-description p + p {
  margin-top:12px;
}
.employee-description blockquote {
  margin:12px 0 0;
  padding:10px 14px;
  border-left:3px solid rgba(0,130,140,.45);
  background:rgba(255,255,255,.28);
  color:#211d17;
  font-size:.96rem;
  line-height:1.6;
}
.staff-profile-notes {
  display:grid;
  gap:18px;
  max-width:1040px;
  margin:26px auto 0;
}
.staff-profile-note {
  padding:26px 28px;
  border:1px solid rgba(18,43,55,.13);
  border-radius:16px;
  background:#fff;
  color:#263943;
  box-shadow:0 10px 24px rgba(0,0,0,.07);
}
.staff-profile-note.staff-profile-personal-note {
  border-color:rgba(0,210,220,.30);
  background:linear-gradient(145deg,#ffffff 0%,#f4ffff 100%);
}
.staff-profile-note-label {
  margin:0 0 7px;
  color:#51808a;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.staff-profile-note h2 {
  margin:0 0 16px;
  color:#07181f;
  font-size:clamp(1.35rem,2.4vw,1.9rem);
  line-height:1.15;
}
.staff-profile-note p,
.staff-profile-note li {
  color:#435761;
  font-size:1rem;
  line-height:1.72;
}
.staff-profile-note p {
  margin:0 0 12px;
}
.staff-profile-note p:last-child {
  margin-bottom:0;
}
.staff-profile-note ul {
  margin:8px 0 14px 1.3rem;
  padding:0;
}
.staff-profile-note blockquote {
  margin:14px 0;
  padding:12px 16px;
  border-left:3px solid #00cfd7;
  background:#f0fbfc;
  color:#20353d;
  font-size:1rem;
  line-height:1.68;
}
@media(max-width:650px) {
  .staff-profile-note {
    padding:20px 18px;
  }
  .staff-profile-note p,
  .staff-profile-note li,
  .staff-profile-note blockquote {
    font-size:.95rem;
  }
}


/* v215 — English personnel-file layout refinements and dialogue treatment. */
.staff-file-page-v215 .staff-profile-notes {
  width: 100%;
  max-width: none;
}

.staff-file-page-v215 .paper-person-name {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  color: #17130e;
  font-size: 1.08rem;
  font-weight: 900;
  letter-spacing: .015em;
  line-height: 1.2;
}

.staff-file-page-v215 .employee-id-row {
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}

.staff-file-page-v215 .employee-id-row .employee-branch-badges-icons-only {
  width: auto;
  flex: 0 0 auto;
  align-items: center;
}

.staff-file-page-v215 .employee-id-row .employee-branch-badges-icons-only .employee-branch-badge {
  min-width: 58px;
  min-height: 58px;
  padding: 5px;
}

.staff-file-page-v215 .employee-id-row .employee-branch-badges-icons-only .employee-branch-badge img {
  width: 46px;
  height: 46px;
}

.staff-file-page-v215 .employee-id-row .employee-personnel-id {
  margin: 0;
}

.staff-file-page-v215 .employee-traits-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.staff-file-page-v215 blockquote.spoken-dialogue,
.staff-file-page-v215 .employee-description blockquote.spoken-dialogue,
.staff-file-page-v215 .staff-profile-note blockquote.spoken-dialogue {
  border-left: 4px solid #00ffff;
  background: #07191d;
  color: #00ffff;
  box-shadow: inset 0 0 0 1px rgba(0,255,255,.13);
}

.staff-file-page-v215 blockquote.spoken-dialogue strong,
.staff-file-page-v215 blockquote.spoken-dialogue .dialogue-speaker {
  color: #00ffff;
}

@media(max-width:1100px) {
  .staff-file-page-v215 .employee-traits-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media(max-width:650px) {
  .staff-file-page-v215 .employee-id-row {
    flex-direction: row;
    align-items: center;
  }
  .staff-file-page-v215 .employee-traits-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .staff-file-page-v215 .paper-person-name {
    font-size: .96rem;
  }
}


/* v216 — staff file branch matrix + header cleanup */
.staff-file-page-v215 .subpage-hero.staff-files-hero p {
  display: none;
}

.staff-file-page-v215 .employee-paper-top {
  align-items: center;
}

.staff-file-page-v215 .paper-ref {
  color: #363126;
  font-size: .82rem;
  letter-spacing: .08em;
}

.staff-file-page-v215 .employee-id-row {
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.staff-file-page-v215 .employee-id-row .employee-branch-badges-all {
  display: flex !important;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  max-width: 100%;
}

.staff-file-page-v215 .employee-id-row .employee-branch-badges-all .employee-branch-badge {
  min-width: 34px;
  min-height: 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.staff-file-page-v215 .employee-id-row .employee-branch-badges-all .employee-branch-badge img {
  width: 34px;
  height: 34px;
}

.staff-file-page-v215 .employee-id-row .employee-personnel-id {
  margin: 0;
  font-size: .98rem;
  line-height: 1.2;
}

.staff-file-page-v215 .employee-id-row .employee-personnel-id strong {
  color: #201b14;
}

.staff-file-page-v215 .staff-profile-notes {
  width: 100%;
  max-width: none;
}

@media (max-width: 900px) {
  .staff-file-page-v215 .employee-id-row .employee-branch-badges-all {
    gap: 5px;
  }
  .staff-file-page-v215 .employee-id-row .employee-branch-badges-all .employee-branch-badge,
  .staff-file-page-v215 .employee-id-row .employee-branch-badges-all .employee-branch-badge img {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
  }
}

@media (max-width: 650px) {
  .staff-file-page-v215 .paper-ref {
    font-size: .74rem;
    letter-spacing: .05em;
  }

  .staff-file-page-v215 .employee-id-row {
    gap: 10px;
  }

  .staff-file-page-v215 .employee-id-row .employee-branch-badges-all {
    width: 100%;
    margin-bottom: 2px;
  }

  .staff-file-page-v215 .employee-id-row .employee-branch-badges-all .employee-branch-badge,
  .staff-file-page-v215 .employee-id-row .employee-branch-badges-all .employee-branch-badge img {
    width: 27px;
    height: 27px;
    min-width: 27px;
    min-height: 27px;
  }
}


/* v217 — branch row full-width, single personnel ID, cyan highlights */
.staff-file-page-v215 .employee-id-row {
  display: block;
  width: 100%;
  margin-bottom: 16px;
}

.staff-file-page-v215 .employee-id-row .employee-branch-badges-all {
  display: grid !important;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  width: 100%;
  gap: 8px;
}

.staff-file-page-v215 .employee-id-row .employee-branch-badges-all .employee-branch-badge {
  width: 100%;
  max-width: 34px;
  min-width: 0;
  height: auto;
  min-height: 0;
  aspect-ratio: 1 / 1;
  justify-self: center;
}

.staff-file-page-v215 .employee-id-row .employee-branch-badges-all .employee-branch-badge img {
  width: 100%;
  max-width: 34px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.staff-file-page-v215 .employee-id-row .employee-personnel-id {
  display: none !important;
}

.staff-file-page-v215 blockquote.spoken-dialogue,
.staff-file-page-v215 .employee-description blockquote.spoken-dialogue,
.staff-file-page-v215 .staff-profile-note blockquote.spoken-dialogue {
  border-left: 4px solid #00ffff;
  background: rgba(0,255,255,.22);
  color: #101010;
  box-shadow: inset 0 0 0 1px rgba(0,255,255,.55);
}

.staff-file-page-v215 blockquote.spoken-dialogue strong,
.staff-file-page-v215 blockquote.spoken-dialogue .dialogue-speaker {
  color: #101010;
}

.staff-file-page-v215 .staff-profile-note.staff-profile-personal-note {
  border-color: rgba(0,255,255,.42);
  background: linear-gradient(145deg, #ffffff 0%, #f0ffff 100%);
}

.staff-file-page-v215 .staff-profile-note blockquote {
  border-left-color: #00ffff;
  background: #efffff;
  color: #1b1b1b;
}

.staff-file-page-v215 .staff-profile-note-label {
  color: #00bfc7;
}

@media (max-width: 900px) {
  .staff-file-page-v215 .employee-id-row .employee-branch-badges-all {
    gap: 6px;
  }
  .staff-file-page-v215 .employee-id-row .employee-branch-badges-all .employee-branch-badge,
  .staff-file-page-v215 .employee-id-row .employee-branch-badges-all .employee-branch-badge img {
    max-width: 30px;
  }
}

@media (max-width: 650px) {
  .staff-file-page-v215 .employee-id-row .employee-branch-badges-all {
    gap: 4px;
  }
  .staff-file-page-v215 .employee-id-row .employee-branch-badges-all .employee-branch-badge,
  .staff-file-page-v215 .employee-id-row .employee-branch-badges-all .employee-branch-badge img {
    max-width: 26px;
  }
}


/* v218 — larger branch logos and unified cyan highlight style */
.staff-file-page-v215 .employee-id-row .employee-branch-badges-all {
  gap: 10px;
}

.staff-file-page-v215 .employee-id-row .employee-branch-badges-all .employee-branch-badge {
  max-width: 51px;
}

.staff-file-page-v215 .employee-id-row .employee-branch-badges-all .employee-branch-badge img {
  max-width: 51px;
}

.staff-file-page-v215 .employee-description blockquote,
.staff-file-page-v215 .staff-profile-note blockquote,
.staff-file-page-v215 blockquote.spoken-dialogue,
.staff-file-page-v215 .employee-description blockquote.spoken-dialogue,
.staff-file-page-v215 .staff-profile-note blockquote.spoken-dialogue {
  margin: 14px 0;
  padding: 12px 16px;
  border-left: 3px solid #00ffff;
  background: #f0ffff;
  color: #111111;
  font-size: 1rem;
  line-height: 1.68;
  box-shadow: none;
}

.staff-file-page-v215 blockquote.spoken-dialogue strong,
.staff-file-page-v215 blockquote.spoken-dialogue .dialogue-speaker,
.staff-file-page-v215 .employee-description blockquote strong,
.staff-file-page-v215 .staff-profile-note blockquote strong {
  color: #111111;
}

.staff-file-page-v215 .staff-profile-note-label,
.staff-file-page-v215 .employee-paper-card .paper-ref,
.staff-file-page-v215 .employee-lines strong,
.staff-file-page-v215 .employee-description strong,
.staff-file-page-v215 .employee-meta-grid span,
.staff-file-page-v215 .employee-traits-grid span {
  color: #00ffff;
}

@media (max-width: 900px) {
  .staff-file-page-v215 .employee-id-row .employee-branch-badges-all {
    gap: 8px;
  }
  .staff-file-page-v215 .employee-id-row .employee-branch-badges-all .employee-branch-badge,
  .staff-file-page-v215 .employee-id-row .employee-branch-badges-all .employee-branch-badge img {
    max-width: 45px;
  }
}

@media (max-width: 650px) {
  .staff-file-page-v215 .employee-id-row .employee-branch-badges-all {
    gap: 6px;
  }
  .staff-file-page-v215 .employee-id-row .employee-branch-badges-all .employee-branch-badge,
  .staff-file-page-v215 .employee-id-row .employee-branch-badges-all .employee-branch-badge img {
    max-width: 38px;
  }
}


/* v219 — 150% larger branch logos; restore personnel-file heading colors */
.staff-file-page-v215 .employee-id-row .employee-branch-badges-all {
  gap: 10px;
}

/* v270 — make branch symbols about 25% larger on the example staff file and all staff files */
.staff-file-page-v215 .employee-id-row .employee-branch-badges-all .employee-branch-badge,
.staff-file-page-v215 .employee-id-row .employee-branch-badges-all .employee-branch-badge img {
  max-width: 96px;
}

/* Restore the personnel-file labels/titles to their pre-v218 colors. */
.staff-file-page-v215 .employee-paper-card .paper-ref {
  color: #363126;
}

.staff-file-page-v215 .employee-lines strong,
.staff-file-page-v215 .employee-description strong {
  color: #181511;
}

.staff-file-page-v215 .employee-meta-grid span,
.staff-file-page-v215 .employee-traits-grid span {
  color: #595243;
}

/* Keep the supplemental/personnel-observation kicker in the established teal. */
.staff-file-page-v215 .staff-profile-note-label {
  color: #00bfc7;
}

@media (max-width: 900px) {
  .staff-file-page-v215 .employee-id-row .employee-branch-badges-all .employee-branch-badge,
  .staff-file-page-v215 .employee-id-row .employee-branch-badges-all .employee-branch-badge img {
    max-width: 85px;
  }
}

@media (max-width: 650px) {
  .staff-file-page-v215 .employee-id-row .employee-branch-badges-all .employee-branch-badge,
  .staff-file-page-v215 .employee-id-row .employee-branch-badges-all .employee-branch-badge img {
    max-width: 71px;
  }
}


/* v222 — Organizations directory and individual organization files. */
.about-strip {
  width: min(1120px, calc(100% - 40px));
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.organizations-hero,
.organization-detail-hero {
  margin-bottom: 26px;
}

.organizations-index {
  display: grid;
  gap: 26px;
}

.organization-group {
  padding: 24px;
  border: 1px solid rgba(18,43,55,.13);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(0,0,0,.07);
}

.organization-group-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(18,43,55,.11);
}

.organization-group-heading h2 {
  margin: 0;
  color: #07181f;
  font-size: clamp(1.5rem, 2.8vw, 2.15rem);
}

.organization-group-heading span {
  color: #71818a;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.organization-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.organization-card {
  display: flex;
  flex-direction: column;
  min-height: 205px;
  padding: 20px 22px;
  border: 1px solid rgba(18,43,55,.14);
  border-radius: 14px;
  background: #fbfdfe;
  color: #182b35;
  text-decoration: none;
  transition: transform .17s ease, border-color .17s ease, box-shadow .17s ease;
}

.organization-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0,255,255,.58);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

.organization-card h3 {
  margin: 12px 0 8px;
  color: #08181f;
  font-size: 1.3rem;
}

.organization-card p {
  margin: 0 0 18px;
  color: #536771;
  line-height: 1.62;
}

.organization-card-link {
  margin-top: auto;
  color: #007d83;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.organization-card-top {
  display: flex;
  justify-content: flex-start;
}

.organization-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  padding: 6px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: #fff;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.organization-status-positive { color: #007f71; background: #effbf8; }
.organization-status-neutral { color: #626d72; background: #f5f7f8; }
.organization-status-negative { color: #8a3232; background: #fff4f4; }

.organization-detail-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
}

.organization-detail-hero > div {
  min-width: 0;
}

.organization-file-kicker {
  margin: 0 0 9px !important;
  color: #00aeb6 !important;
  font-size: .76rem !important;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.organization-detail-card {
  padding: 30px 32px;
  border: 1px solid rgba(18,43,55,.14);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(0,0,0,.07);
}

.organization-detail-label {
  margin-bottom: 7px;
  color: #00aeb6;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.organization-detail-card h2 {
  margin: 0 0 20px;
  color: #091920;
  font-size: 1.6rem;
}

.organization-detail-card p {
  margin: 0 0 14px;
  color: #465a64;
  font-size: 1.02rem;
  line-height: 1.75;
}

.organization-detail-card p:last-child { margin-bottom: 0; }

.organization-detail-nav {
  margin-top: 18px;
}

.organization-detail-nav a {
  color: #006c72;
  font-weight: 800;
  text-decoration: none;
}

.organization-detail-nav a:hover { color: #000; }

@media (max-width: 900px) {
  .about-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 650px) {
  .about-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .organization-card-grid { grid-template-columns: 1fr; }
  .organization-group { padding: 18px; }
  .organization-detail-hero { align-items: flex-start; flex-direction: column; gap: 14px; }
  .organization-detail-card { padding: 22px 20px; }
}


.organization-card-top {
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.organization-card-logo-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  flex: 0 0 auto;
  border: 3px solid #000;
  border-radius: 50%;
  background: #fff;
  box-sizing: border-box;
  overflow: hidden;
}

.organization-card-logo {
  width: 84px;
  height: 84px;
  object-fit: contain;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.organization-card-top .organization-status {
  align-self: flex-start;
}

.organization-detail-hero-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  flex: 0 0 auto;
}

.organization-detail-logo {
  width: min(180px, 24vw);
  height: auto;
  object-fit: contain;
}

@media (max-width: 740px) {
  .organization-card-logo-frame {
    width: 80px;
    height: 80px;
    border-width: 3px;
  }

  .organization-card-logo {
    width: 70px;
    height: 70px;
  }

  .organization-detail-hero-side {
    align-items: flex-start;
  }

  .organization-detail-logo {
    width: 132px;
  }
}

/* v238: keep organization logos against the far-right edge of the page shell */
.organization-detail-hero {
  max-width: none;
  width: 100%;
}

.organization-detail-hero > div:first-child {
  max-width: 820px;
}

.organization-detail-hero-side {
  margin-left: auto;
}

@media (max-width: 650px) {
  .organization-detail-hero-side {
    margin-left: 0;
  }
}

/* v253: directory group headings carry the classification color; per-card status pills were removed from organizations.html. */
.organization-group-positive .organization-group-heading h2 { color: #007f71; }
.organization-group-positive .organization-group-heading span { color: #007f71; }
.organization-group-neutral .organization-group-heading h2 { color: #626d72; }
.organization-group-neutral .organization-group-heading span { color: #626d72; }
.organization-group-negative .organization-group-heading h2 { color: #8a3232; }
.organization-group-negative .organization-group-heading span { color: #8a3232; }


/* v275: Specialized Teams added to About; six items total. */
.about-strip {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}


/* v259: expandable base/station distribution rows. */
.location-distribution-section {
  margin-top: 28px;
  margin-bottom: 72px;
}

.location-distribution-card {
  background: #fff;
  border: 1px solid #d7e0e4;
  border-radius: 22px;
  padding: 28px 30px 30px;
  box-shadow: 0 16px 38px rgba(9, 31, 39, 0.08);
}

.location-distribution-heading {
  padding-bottom: 20px;
  border-bottom: 1px solid #dce5e8;
}

.location-distribution-heading h2 {
  margin: 0;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.05;
  color: #101922;
}

.location-distribution-heading p {
  margin: 10px 0 0;
  color: #617281;
  font-size: 16px;
  line-height: 1.6;
}

.location-distribution-list {
  display: grid;
}

.location-distribution-entry {
  border-bottom: 1px solid #e2e9ec;
}

.location-distribution-entry:last-child {
  border-bottom: 0;
}

.location-distribution-entry.location-distribution-special {
  margin-top: 10px;
  border-top: 2px solid #00cfd4;
}

.location-distribution-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(190px, 1fr) minmax(210px, 1fr);
  align-items: center;
  gap: 24px;
  min-height: 78px;
  padding: 10px 42px 10px 4px;
  list-style: none;
  cursor: pointer;
}

.location-distribution-row::-webkit-details-marker {
  display: none;
}

.location-distribution-row::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid #a9c4ca;
  border-radius: 50%;
  color: #007f86;
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
}

.location-distribution-entry[open] > .location-distribution-row::after {
  content: "−";
}

.location-distribution-row:hover {
  background: #f7fbfc;
}

.location-distribution-name {
  font-size: 20px;
  font-weight: 700;
  color: #101922;
}

.location-distribution-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: #263844;
  font-size: 17px;
}

.location-distribution-stat img,
.location-detail-label img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  flex: 0 0 auto;
}

.location-distribution-stat strong {
  font-size: 21px;
  color: #101922;
}

.location-distribution-details {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 26px;
  margin: 0 4px 18px;
  padding: 18px 20px 20px;
  background: #f7fafb;
  border: 1px solid #dce7ea;
  border-radius: 14px;
}

.location-detail-group {
  min-width: 0;
}

.location-detail-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: #13232c;
  font-size: 17px;
  font-weight: 700;
}

.location-detail-label img {
  width: 34px;
  height: 34px;
}

.location-number-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.location-number-chip,
.location-number-empty {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid #bfd4d9;
  border-radius: 999px;
  background: #fff;
  color: #253a43;
  font-size: 14px;
  line-height: 1.2;
}

.location-number-empty {
  color: #687b83;
}

@media (max-width: 780px) {
  .location-distribution-card {
    padding: 22px 20px 24px;
  }

  .location-distribution-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px 18px;
    padding: 18px 40px 18px 2px;
  }

  .location-distribution-name {
    grid-column: 1 / -1;
  }

  .location-distribution-stat img {
    width: 40px;
    height: 40px;
  }

  .location-distribution-details {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .location-distribution-row {
    grid-template-columns: 1fr;
  }

  .location-distribution-name {
    grid-column: auto;
  }
}


/* v261: clarify FSC location clearance and make expandable rows visibly interactive. */
.location-distribution-heading p {
  max-width: 1120px;
}

.location-distribution-instruction {
  margin-top: 14px !important;
  color: #007f86 !important;
  font-weight: 700;
}

.location-distribution-entry {
  border-bottom: 0;
  margin: 8px 0;
}

.location-distribution-entry:last-child {
  margin-bottom: 0;
}

.location-distribution-entry.location-distribution-special {
  margin-top: 18px;
  padding-top: 8px;
  border-top: 2px solid #00cfd4;
}

.location-distribution-row {
  grid-template-columns: minmax(220px, 1.4fr) minmax(190px, 1fr) minmax(210px, 1fr) auto;
  padding: 12px 16px;
  border: 1px solid #d7e4e8;
  border-radius: 12px;
  background: #fbfdfe;
  transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.location-distribution-row::after {
  content: none;
}

.location-distribution-row:hover {
  background: #f3fbfc;
  border-color: #77cbd0;
  box-shadow: inset 4px 0 0 #00bfc7;
}

.location-distribution-row:focus-visible {
  outline: 3px solid rgba(0, 191, 199, 0.28);
  outline-offset: 2px;
  border-color: #00aeb7;
}

.location-distribution-entry[open] > .location-distribution-row {
  background: #f1fbfc;
  border-color: #69c8cd;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.location-row-action {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 94px;
  color: #007f86;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.location-row-arrow {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid #8dcdd2;
  border-radius: 50%;
  background: #fff;
  color: #007f86;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  transition: transform 0.16s ease, background-color 0.16s ease;
}

.location-distribution-entry[open] > .location-distribution-row .location-row-arrow {
  transform: rotate(90deg);
  background: #e7f8f9;
}

.location-distribution-details {
  margin: 8px 8px 18px;
}

@media (max-width: 900px) {
  .location-distribution-row {
    grid-template-columns: 1fr 1fr auto;
    gap: 10px 18px;
  }

  .location-distribution-name {
    grid-column: 1 / 3;
  }

  .location-row-action {
    grid-column: 3;
    grid-row: 1;
  }
}

@media (max-width: 620px) {
  .location-distribution-row {
    grid-template-columns: 1fr auto;
  }

  .location-distribution-name {
    grid-column: 1;
  }

  .location-distribution-stat {
    grid-column: 1 / -1;
  }

  .location-row-action {
    grid-column: 2;
    grid-row: 1;
  }
}


/* v262: fully remove the legacy +/- details indicator; only the View IDs arrow remains. */
.location-distribution-row::after,
.location-distribution-entry[open] > .location-distribution-row::after {
  content: none !important;
  display: none !important;
}

/* v264 — About Staff standard FSC uniform issue section */
.staff-uniform-section {
  margin-top: 28px;
}

.staff-uniform-heading {
  margin-bottom: 20px;
}

.staff-uniform-heading p {
  max-width: 1040px;
}

.staff-uniform-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.staff-uniform-card {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(18,43,55,.14);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

.staff-uniform-image {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 310px;
  padding: 14px;
  background: #f7f9fa;
}

.staff-uniform-image img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: contain;
}

.staff-uniform-image-tall {
  min-height: 440px;
}

.staff-uniform-image-shoes {
  min-height: 260px;
}

.staff-uniform-card figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 17px 16px;
  border-top: 1px solid rgba(18,43,55,.11);
}

.staff-uniform-card figcaption strong {
  color: #091920;
  font-size: 1.02rem;
}

.staff-uniform-card figcaption span {
  color: #687982;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .035em;
  text-align: right;
}

@media (max-width: 760px) {
  .staff-uniform-grid {
    grid-template-columns: 1fr;
  }

  .staff-uniform-image,
  .staff-uniform-image-tall,
  .staff-uniform-image-shoes {
    min-height: 0;
  }

  .staff-uniform-card figcaption {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .staff-uniform-card figcaption span {
    text-align: left;
  }
}

/* v268 — requested layout refinements */
.staff-uniform-heading {
  max-width: none;
  width: 100%;
}

.staff-uniform-heading > p:not(.section-kicker),
.staff-uniform-heading p {
  max-width: none;
  width: 100%;
}

/* Identification photography removed from personnel files; branch emblems remain. */
.staff-file-page .employee-paper-body,
.staff-page .employee-paper-body,
.staff-record-section .employee-paper-body {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
}

/* Match Wonder record paper to the staff-file tan paper while preserving Wonder layout/images. */
.wonder-dossier {
  background:
    linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0) 22%),
    repeating-linear-gradient(0deg, rgba(70,62,48,.04) 0 1px, transparent 1px 32px),
    linear-gradient(145deg, #f4eddc 0%, #ebe3cf 48%, #dfd4be 100%) !important;
}



/* v278: Allies and Enemies moved from About into the main top navigation. */
.about-strip {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}


/* v279 — navigation reorganization: Locations under About; Staff gets its own drawer. */
.staff-panel-toggle {
  position:absolute;
  width:1px;
  height:1px;
  margin:0;
  opacity:0;
  pointer-events:none;
}

/* About now contains only About Us, Branches, and Locations. */
.about-strip {
  width:min(650px,calc(100% - 40px));
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.staff-strip {
  position:relative;
  z-index:3;
  display:grid !important;
  width:min(760px,calc(100% - 40px));
  margin:0 auto;
  gap:9px;
  padding:0 12px;
  max-height:0;
  opacity:0;
  overflow:hidden;
  pointer-events:none;
  transform:translateY(-10px) scale(.985);
  transform-origin:top center;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid transparent;
  border-radius:0 0 18px 18px;
  background:linear-gradient(180deg,rgba(18,29,36,.985),rgba(6,12,16,.99));
  box-shadow:none;
  transition:
    max-height .30s cubic-bezier(.2,.75,.25,1),
    opacity .18s ease,
    transform .30s cubic-bezier(.2,.75,.25,1),
    padding .30s cubic-bezier(.2,.75,.25,1),
    margin-bottom .30s cubic-bezier(.2,.75,.25,1),
    border-color .18s ease,
    box-shadow .22s ease;
}

.staff-panel-toggle:checked ~ .staff-strip {
  max-height:420px;
  opacity:1;
  pointer-events:auto;
  transform:translateY(0) scale(1);
  padding:12px;
  margin-bottom:12px;
  border-color:rgba(0,255,255,.24);
  box-shadow:
    0 14px 30px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 -1px 0 rgba(0,255,255,.08);
}

.site-nav .staff-nav-toggle {
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 0;
  color:#eaf3f7;
  text-transform:uppercase;
  font-size:.82rem;
  font-weight:900;
  letter-spacing:.07em;
  cursor:pointer;
  user-select:none;
  text-shadow:0 0 12px rgba(0,255,255,0);
  transition:color .18s ease,text-shadow .18s ease;
}

.site-nav .staff-nav-toggle::after {
  content:"";
  position:absolute;
  left:0;
  bottom:3px;
  width:100%;
  height:2px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .2s ease;
}

.site-nav .staff-nav-toggle::before {
  content:"";
  width:5px;
  height:5px;
  flex:0 0 auto;
  border-right:1.5px solid rgba(0,255,255,.88);
  border-bottom:1.5px solid rgba(0,255,255,.88);
  transform:rotate(45deg) translateY(-2px);
  transform-origin:center;
  transition:transform .18s ease;
}

.site-nav .staff-nav-toggle:hover,
.staff-panel-toggle:checked ~ .header-inner .staff-nav-toggle {
  color:#ffffff;
  text-shadow:0 0 12px rgba(0,255,255,.30);
}

.site-nav .staff-nav-toggle:hover::after,
.staff-panel-toggle:checked ~ .header-inner .staff-nav-toggle::after {
  transform:scaleX(1);
}

.staff-panel-toggle:checked ~ .header-inner .staff-nav-toggle::before {
  transform:rotate(225deg) translate(-1px,-1px);
}

html[dir="rtl"] .staff-strip { direction:rtl; }

@media(max-width:650px) {
  .staff-strip {
    width:min(100% - 24px,1180px);
    grid-template-columns:1fr;
    gap:7px;
    border-radius:0 0 14px 14px;
  }
  .staff-panel-toggle:checked ~ .staff-strip {
    padding:10px;
    margin-bottom:10px;
  }
  .site-nav .staff-nav-toggle { font-size:.76rem; }
}


/* v280 — place Staff immediately after About in the shared top navigation */
.site-nav .language-nav-toggle { order:1; }
.site-nav .about-nav-toggle { order:2; }
.site-nav .staff-nav-toggle { order:3; }
.site-nav .wonders-nav-toggle { order:4; }
.site-nav > a { order:5; }

/* v280 — branch references on About Staff / Classes link to the Branches page */
.branch-inline-link,
.branch-inline-link:visited {
  color:#0000ee;
  text-decoration:underline;
  text-decoration-color:#0000ee;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
}
.branch-inline-link:hover,
.branch-inline-link:focus-visible {
  color:#0000bb;
  text-decoration-color:#0000bb;
}


/* v302 — Branch selector uses the same cyan/grey branch emblem states as Staff Files. */
.branch-selector-css .branch-emblem-button .branch-emblem-state {
  width:100%;
  height:100%;
  object-fit:contain;
  padding:0;
}

.branch-selector-css .branch-emblem-button .branch-emblem-active {
  display:none;
}

.branch-selector-css .branch-emblem-button .branch-emblem-inactive {
  display:block;
}

/* Remove the old black/white selected-card treatment; selection is conveyed by the emblem itself. */
#branch-life-sciences:checked ~ .branch-emblem-wall label[for="branch-life-sciences"],
#branch-physical-sciences:checked ~ .branch-emblem-wall label[for="branch-physical-sciences"],
#branch-information-sciences:checked ~ .branch-emblem-wall label[for="branch-information-sciences"],
#branch-combat:checked ~ .branch-emblem-wall label[for="branch-combat"],
#branch-security:checked ~ .branch-emblem-wall label[for="branch-security"],
#branch-intelligence:checked ~ .branch-emblem-wall label[for="branch-intelligence"],
#branch-health:checked ~ .branch-emblem-wall label[for="branch-health"],
#branch-infrastructure:checked ~ .branch-emblem-wall label[for="branch-infrastructure"],
#branch-relations:checked ~ .branch-emblem-wall label[for="branch-relations"],
#branch-oversight:checked ~ .branch-emblem-wall label[for="branch-oversight"] {
  background:
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012)),
    #0b0e11;
  border-color:rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 7px 13px rgba(0,0,0,.22);
  transform:translateY(0);
}

#branch-life-sciences:checked ~ .branch-emblem-wall label[for="branch-life-sciences"]::after,
#branch-physical-sciences:checked ~ .branch-emblem-wall label[for="branch-physical-sciences"]::after,
#branch-information-sciences:checked ~ .branch-emblem-wall label[for="branch-information-sciences"]::after,
#branch-combat:checked ~ .branch-emblem-wall label[for="branch-combat"]::after,
#branch-security:checked ~ .branch-emblem-wall label[for="branch-security"]::after,
#branch-intelligence:checked ~ .branch-emblem-wall label[for="branch-intelligence"]::after,
#branch-health:checked ~ .branch-emblem-wall label[for="branch-health"]::after,
#branch-infrastructure:checked ~ .branch-emblem-wall label[for="branch-infrastructure"]::after,
#branch-relations:checked ~ .branch-emblem-wall label[for="branch-relations"]::after,
#branch-oversight:checked ~ .branch-emblem-wall label[for="branch-oversight"]::after {
  border-color:rgba(0,255,255,.07);
}

#branch-life-sciences:checked ~ .branch-emblem-wall label[for="branch-life-sciences"] .branch-emblem-active,
#branch-physical-sciences:checked ~ .branch-emblem-wall label[for="branch-physical-sciences"] .branch-emblem-active,
#branch-information-sciences:checked ~ .branch-emblem-wall label[for="branch-information-sciences"] .branch-emblem-active,
#branch-combat:checked ~ .branch-emblem-wall label[for="branch-combat"] .branch-emblem-active,
#branch-security:checked ~ .branch-emblem-wall label[for="branch-security"] .branch-emblem-active,
#branch-intelligence:checked ~ .branch-emblem-wall label[for="branch-intelligence"] .branch-emblem-active,
#branch-health:checked ~ .branch-emblem-wall label[for="branch-health"] .branch-emblem-active,
#branch-infrastructure:checked ~ .branch-emblem-wall label[for="branch-infrastructure"] .branch-emblem-active,
#branch-relations:checked ~ .branch-emblem-wall label[for="branch-relations"] .branch-emblem-active,
#branch-oversight:checked ~ .branch-emblem-wall label[for="branch-oversight"] .branch-emblem-active {
  display:block;
  transform:none;
}

#branch-life-sciences:checked ~ .branch-emblem-wall label[for="branch-life-sciences"] .branch-emblem-inactive,
#branch-physical-sciences:checked ~ .branch-emblem-wall label[for="branch-physical-sciences"] .branch-emblem-inactive,
#branch-information-sciences:checked ~ .branch-emblem-wall label[for="branch-information-sciences"] .branch-emblem-inactive,
#branch-combat:checked ~ .branch-emblem-wall label[for="branch-combat"] .branch-emblem-inactive,
#branch-security:checked ~ .branch-emblem-wall label[for="branch-security"] .branch-emblem-inactive,
#branch-intelligence:checked ~ .branch-emblem-wall label[for="branch-intelligence"] .branch-emblem-inactive,
#branch-health:checked ~ .branch-emblem-wall label[for="branch-health"] .branch-emblem-inactive,
#branch-infrastructure:checked ~ .branch-emblem-wall label[for="branch-infrastructure"] .branch-emblem-inactive,
#branch-relations:checked ~ .branch-emblem-wall label[for="branch-relations"] .branch-emblem-inactive,
#branch-oversight:checked ~ .branch-emblem-wall label[for="branch-oversight"] .branch-emblem-inactive {
  display:none;
}

/* v302 — Wonders terminology reference section. */
.wonder-terminology-section {
  margin-top:34px;
  padding-top:34px;
  border-top:1px solid rgba(255,255,255,.08);
}

.wonder-terminology-heading h2 {
  margin:0;
  font-size:clamp(1.65rem,3vw,2.35rem);
  line-height:1.1;
}

.wonder-terminology-list {
  display:grid;
  gap:14px;
  margin-top:18px;
}

.wonder-term-card {
  padding:22px 24px;
  border:1px solid var(--line);
  border-radius:18px;
  background:
    linear-gradient(135deg,rgba(0,255,255,.045),transparent 48%),
    var(--surface);
}

.wonder-term-card h3 {
  margin:0 0 8px;
  color:var(--accent);
  font-size:1.18rem;
}

.wonder-term-card p {
  margin:0;
  max-width:980px;
  color:#111111;
  line-height:1.7;
}

/* v304 — Branches selector uses clean white icon cards; selected detail logo has no surrounding box. */
.branch-selector-css .branch-emblem-button {
  background:#ffffff;
  border-color:rgba(20,55,68,.14);
  box-shadow:0 6px 14px rgba(25,55,68,.08);
}

.branch-selector-css .branch-emblem-button:hover,
.branch-selector-css .branch-emblem-button:focus-visible {
  background:#ffffff;
  border-color:rgba(0,210,220,.55);
  box-shadow:0 9px 18px rgba(25,55,68,.11);
}

#branch-life-sciences:checked ~ .branch-emblem-wall label[for="branch-life-sciences"],
#branch-physical-sciences:checked ~ .branch-emblem-wall label[for="branch-physical-sciences"],
#branch-information-sciences:checked ~ .branch-emblem-wall label[for="branch-information-sciences"],
#branch-combat:checked ~ .branch-emblem-wall label[for="branch-combat"],
#branch-security:checked ~ .branch-emblem-wall label[for="branch-security"],
#branch-intelligence:checked ~ .branch-emblem-wall label[for="branch-intelligence"],
#branch-health:checked ~ .branch-emblem-wall label[for="branch-health"],
#branch-infrastructure:checked ~ .branch-emblem-wall label[for="branch-infrastructure"],
#branch-relations:checked ~ .branch-emblem-wall label[for="branch-relations"],
#branch-oversight:checked ~ .branch-emblem-wall label[for="branch-oversight"] {
  background:#ffffff;
  border-color:rgba(20,55,68,.14);
  box-shadow:0 6px 14px rgba(25,55,68,.08);
}

.branch-breakdown-emblem {
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}


/* v307 — dedicated Wonder file records and W-233 visual. */
.wonder-file-hero {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:28px;
}

.wonder-file-kicker,
.wonder-file-section-label {
  margin:0 0 8px;
  color:var(--accent);
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.wonder-file-hero h1 {
  margin:0;
  font-size:clamp(3rem,7vw,5.8rem);
  line-height:.9;
}

.wonder-file-hero > div > p:last-child {
  margin:14px 0 0;
  color:var(--muted);
  font-size:clamp(1.05rem,2vw,1.35rem);
}

.wonder-file-back {
  flex:0 0 auto;
  margin-bottom:4px;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  color:#d6e3ea;
  text-decoration:none;
  font-size:.88rem;
  font-weight:800;
}

.wonder-file-back:hover,
.wonder-file-back:focus-visible {
  border-color:rgba(0,255,255,.55);
  color:#fff;
}

.wonder-record-dossier { margin-top:0; }
.wonder-record-stamp { transform:rotate(-2deg); text-transform:none; font-family: "Segoe UI", "Segoe UI Symbol", "Noto Sans", Arial, sans-serif; }

.wonder-record-dossier .wonder-description-card p + p {
  margin-top:12px;
}

.w233-id-frame {
  min-height:395px;
  padding:24px 14px;
}

.w233-switch-visual {
  position:relative;
  width:190px;
  height:292px;
  border:3px solid #171819;
  border-radius:5px;
  background:
    radial-gradient(circle at 50% 10%,rgba(255,255,255,.12),transparent 25%),
    linear-gradient(100deg,#222426 0%,#121314 45%,#26282a 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.035),
    inset 0 0 28px rgba(0,0,0,.7),
    0 14px 22px rgba(0,0,0,.27);
}

.w233-plate-screw {
  position:absolute;
  width:12px;
  height:12px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 32%,#8b8b84,#272824 58%,#0d0e0d 62%);
  box-shadow:inset 0 0 0 1px #050505;
}
.w233-plate-screw::after {
  content:"";
  position:absolute;
  left:2px;
  right:2px;
  top:5px;
  height:1px;
  background:#111;
  transform:rotate(-22deg);
}
.w233-screw-a{left:12px;top:12px}.w233-screw-b{right:12px;top:12px}.w233-screw-c{left:12px;bottom:12px}.w233-screw-d{right:12px;bottom:12px}

.w233-label {
  position:absolute;
  left:34px;
  right:34px;
  top:52px;
  padding:4px 5px 3px;
  border:1px solid #77766c;
  background:#303234;
  color:#d9d3bf;
  font-family:Georgia,serif;
  font-size:10px;
  text-align:center;
  letter-spacing:.08em;
  box-shadow:inset 0 0 8px rgba(0,0,0,.65);
}

.w233-contact {
  position:absolute;
  top:102px;
  width:22px;
  height:104px;
}
.w233-contact-left{left:38px}.w233-contact-right{right:38px}
.w233-contact span {
  position:absolute;
  left:4px;
  top:0;
  width:14px;
  height:21px;
  border-radius:3px;
  background:linear-gradient(90deg,#7f5d12,#e7c45a 45%,#9a731d);
  box-shadow:inset 0 0 0 1px rgba(57,38,0,.45);
}
.w233-contact i {
  position:absolute;
  left:8px;
  top:17px;
  width:6px;
  height:78px;
  border-radius:4px;
  background:linear-gradient(90deg,#8d681a,#f0cd62 42%,#9d741c);
  transform:rotate(3deg);
  box-shadow:0 0 0 1px rgba(71,45,0,.28);
}
.w233-contact-right i{transform:rotate(-3deg)}

.w233-lower-terminal {
  position:absolute;
  bottom:43px;
  width:28px;
  height:31px;
  border-radius:6px 6px 4px 4px;
  background:linear-gradient(90deg,#6f5112,#d9b84c 48%,#806018);
  box-shadow:inset 0 0 0 1px rgba(68,45,0,.5);
}
.w233-lower-terminal::after {
  content:"";
  position:absolute;
  left:8px;
  top:7px;
  width:12px;
  height:15px;
  border:3px solid #a5a08e;
  border-top:0;
  border-radius:0 0 8px 8px;
}
.w233-terminal-left{left:35px}.w233-terminal-right{right:35px}

.w233-lever-pivot {
  position:absolute;
  left:50%;
  top:87px;
  width:40px;
  height:14px;
  margin-left:-20px;
  border-radius:50%;
  background:linear-gradient(#aaa89e,#2a2b2b 45%,#0b0b0b 60%,#85847d);
  box-shadow:0 3px 5px rgba(0,0,0,.7);
  z-index:3;
}

.w233-lever-stem {
  position:absolute;
  left:50%;
  top:25px;
  width:13px;
  height:78px;
  margin-left:-6px;
  border-radius:7px 7px 3px 3px;
  background:linear-gradient(90deg,#313436,#a8abad 46%,#292c2f);
  box-shadow:0 3px 8px rgba(0,0,0,.55);
  z-index:2;
}

.w233-lever-grip {
  position:absolute;
  left:50%;
  top:-24px;
  width:42px;
  height:79px;
  margin-left:-21px;
  border-radius:16px 16px 8px 8px / 12px 12px 22px 22px;
  background:linear-gradient(90deg,#292c2e,#73787c 43%,#1e2022 100%);
  clip-path:polygon(22% 0,78% 0,100% 86%,82% 100%,18% 100%,0 86%);
  box-shadow:0 8px 10px rgba(0,0,0,.42);
  z-index:4;
}

.wonder-file-page .wonder-file-section {
  margin-top:28px;
  border:1px solid var(--line);
  border-radius:28px;
  background:
    linear-gradient(135deg,rgba(0,255,255,.03),transparent 48%),
    var(--surface-alt);
  overflow:hidden;
}

.wonder-file-page .wonder-file-section-heading {
  margin:0;
}

.wonder-file-page .wonder-file-section-label {
  display:block;
  width:100%;
  box-sizing:border-box;
  margin:0;
  padding:10px 16px;
  background:#050505;
  color:var(--accent);
  line-height:1.35;
}

.wonder-file-page .wonder-file-section-heading h2 {
  margin:0;
  padding:18px 22px 0;
  font-size:clamp(1.8rem,3vw,2.5rem);
}

.wonder-file-copy-card,
.wonder-test-card {
  border:1px solid var(--line);
  border-radius:18px;
  background:
    linear-gradient(135deg,rgba(0,255,255,.035),transparent 46%),
    var(--surface);
}

.wonder-file-page .wonder-file-copy-card {
  margin:18px 22px 22px;
  padding:22px 24px;
}

.wonder-file-copy-card p {
  margin:0;
  max-width:1050px;
  color:#111111;
  line-height:1.78;
}

.wonder-file-copy-card p + p { margin-top:15px; }

.wonder-file-page .wonder-test-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin:18px 22px 22px;
}

.wonder-file-page .wonder-test-card {
  padding:0;
  overflow:hidden;
}

.wonder-test-state {
  margin:0;
  padding:10px 16px;
  background:#050505;
  color:var(--accent);
  font-size:.75rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:1.35;
}

.wonder-file-page .wonder-test-card h3 {
  margin:0;
  padding:14px 22px 10px;
  font-size:1.2rem;
}

.wonder-file-page .wonder-test-card p {
  margin:0;
  padding:0 22px 22px;
  color:#111111;
  line-height:1.7;
}

@media(max-width:780px) {
  .wonder-file-hero {
    align-items:flex-start;
    flex-direction:column;
  }
  .wonder-file-page .wonder-file-copy-card,
  .wonder-file-page .wonder-test-grid {
    margin:16px 16px 16px;
  }
  .wonder-file-page .wonder-file-section-heading h2 {
    padding:16px 16px 0;
  }
  .wonder-file-back { margin-bottom:0; }
  .wonder-file-page .wonder-test-grid { grid-template-columns:1fr; }
}

@media(max-width:640px) {
  .w233-id-frame { min-height:355px; }
  .w233-switch-visual { transform:scale(.9); }
}


.wonder-pronunciation-note {
  margin: 8px 0 0;
  font-size: 0.96rem;
  color: rgba(42, 48, 61, 0.78);
}
.wonder-pronunciation-note strong {
  color: rgba(42, 48, 61, 0.9);
}

/* v308 — Greek Wonder registry designation note */
.wonder-registry-note {
  margin: 0 0 24px;
  padding: 18px 20px;
  border: 1px solid rgba(28, 209, 226, 0.38);
  background: rgba(28, 209, 226, 0.055);
}
.wonder-registry-note > strong {
  display: block;
  margin-bottom: 6px;
  color: var(--cyan, #1cd1e2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.wonder-registry-note p {
  margin: 0;
}


/* v310 — W-ψ190 Feelings Gun visual */
.w190-id-frame {
  min-height: 395px;
  padding: 26px 18px;
}
.w190-gun-visual {
  position: relative;
  width: 100%;
  height: 340px;
}
.w190-body {
  position: absolute;
  left: 38px;
  top: 120px;
  width: 215px;
  height: 86px;
  border-radius: 28px 24px 26px 22px;
  background: linear-gradient(180deg, #79e0ef 0%, #42bfd5 58%, #2398b4 100%);
  border: 4px solid rgba(28, 91, 108, 0.55);
  box-shadow: inset 0 10px 18px rgba(255,255,255,0.18);
}
.w190-barrel {
  position: absolute;
  left: 210px;
  top: 133px;
  width: 86px;
  height: 58px;
  border-radius: 0 28px 28px 0;
  background: linear-gradient(180deg, #b8c7d0 0%, #879aa8 55%, #647a89 100%);
  border: 4px solid rgba(42, 48, 61, 0.28);
}
.w190-muzzle-ring {
  position: absolute;
  left: 286px;
  top: 140px;
  width: 32px;
  height: 44px;
  border-radius: 0 22px 22px 0;
  background: #d6e2ea;
  border: 4px solid rgba(42, 48, 61, 0.25);
}
.w190-emitter {
  position: absolute;
  left: 304px;
  top: 150px;
  width: 12px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 14px rgba(28, 209, 226, 0.65);
}
.w190-rear-cap {
  position: absolute;
  left: 18px;
  top: 140px;
  width: 36px;
  height: 44px;
  border-radius: 16px 10px 10px 16px;
  background: linear-gradient(180deg, #f6e0a7 0%, #d3b36b 100%);
  border: 4px solid rgba(132, 98, 33, 0.34);
}
.w190-grip {
  position: absolute;
  left: 108px;
  top: 182px;
  width: 54px;
  height: 112px;
  border-radius: 10px 10px 16px 16px;
  background: linear-gradient(180deg, #f7d06a 0%, #e1a84c 100%);
  border: 4px solid rgba(140, 91, 25, 0.34);
  transform: skew(-10deg);
}
.w190-trigger-guard {
  position: absolute;
  left: 152px;
  top: 190px;
  width: 54px;
  height: 58px;
  border: 6px solid rgba(42, 48, 61, 0.24);
  border-top: none;
  border-radius: 0 0 28px 28px;
}
.w190-trigger {
  position: absolute;
  left: 173px;
  top: 198px;
  width: 12px;
  height: 30px;
  border-radius: 999px;
  background: rgba(42, 48, 61, 0.7);
}
.w190-dial {
  position: absolute;
  left: 78px;
  top: 72px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffeec2 0%, #eec97d 100%);
  border: 5px solid rgba(140, 91, 25, 0.34);
  box-shadow: 0 8px 12px rgba(42, 48, 61, 0.12);
}
.w190-dial-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  margin-top: -8px;
  border-radius: 50%;
  background: rgba(42, 48, 61, 0.65);
}
.w190-dial-pointer {
  position: absolute;
  left: 49px;
  top: 16px;
  width: 8px;
  height: 30px;
  border-radius: 999px;
  background: rgba(164, 67, 57, 0.88);
  transform: rotate(34deg);
  transform-origin: 50% 78px;
}
.w190-dial-label {
  position: absolute;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: rgba(92, 67, 19, 0.82);
}
.w190-label-a { left: 74px; top: 56px; }
.w190-label-b { left: 140px; top: 105px; }
.w190-label-c { left: 56px; top: 150px; }
@media(max-width:640px) {
  .w190-id-frame { min-height: 350px; }
  .w190-gun-visual { transform: scale(0.9); transform-origin: top left; }
}


/* v311 — W-κ643 Scarecrow visual */
.w643-id-frame {
  min-height: 430px;
  padding: 18px 10px;
  background: linear-gradient(180deg, rgba(226,236,238,.95) 0%, rgba(222,214,173,.9) 64%, rgba(178,150,92,.82) 100%);
  overflow: hidden;
}
.w643-scarecrow-visual {
  position: relative;
  width: 100%;
  height: 390px;
  margin: 0 auto;
}
.w643-pole {
  position:absolute;
  left:50%; top:128px;
  width:16px; height:280px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,#684425 0%,#a57542 48%,#62401f 100%);
  border-radius:5px;
  box-shadow:0 0 0 2px rgba(70,43,20,.22);
}
.w643-crossbar {
  position:absolute;
  left:28px; right:28px; top:150px;
  height:14px;
  background:linear-gradient(180deg,#9f7243,#66431f);
  border-radius:5px;
  transform:rotate(-1deg);
}
.w643-shirt-body {
  position:absolute;
  left:50%; top:148px;
  width:120px; height:138px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,#7c3d2d 0%,#9a5540 58%,#6a3229 100%);
  clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);
  border-radius:8px;
  opacity:.95;
}
.w643-sleeve {
  position:absolute;
  top:155px;
  width:92px; height:44px;
  background:#8f4936;
  border-radius:12px;
}
.w643-sleeve-left { left:32px; transform:rotate(5deg); }
.w643-sleeve-right { right:32px; transform:rotate(-5deg); }
.w643-hand {
  position:absolute;
  top:163px;
  width:38px; height:24px;
  background:repeating-linear-gradient(90deg,#d6ad65 0 4px,#b98946 4px 7px);
  border-radius:45%;
}
.w643-hand-left { left:16px; transform:rotate(8deg); }
.w643-hand-right { right:16px; transform:rotate(-8deg); }
.w643-head {
  position:absolute;
  left:50%; top:67px;
  width:92px; height:88px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,#d9bf87,#b18d53);
  border:3px solid rgba(89,62,31,.42);
  border-radius:45% 48% 42% 44%;
  z-index:4;
}
.w643-eye {
  position:absolute;
  top:31px;
  width:10px; height:10px;
  background:#211b16;
  border-radius:50%;
  box-shadow:0 0 0 2px rgba(80,54,28,.16);
}
.w643-eye-left { left:24px; }
.w643-eye-right { right:24px; }
.w643-mouth {
  position:absolute;
  left:23px; top:56px;
  width:44px; height:15px;
  border-bottom:4px solid #38251c;
  border-radius:0 0 40px 40px;
}
.w643-hat-brim {
  position:absolute;
  left:50%; top:55px;
  width:128px; height:18px;
  transform:translateX(-50%) rotate(-3deg);
  background:#5f4025;
  border-radius:50%;
  z-index:6;
}
.w643-hat-crown {
  position:absolute;
  left:50%; top:19px;
  width:82px; height:52px;
  transform:translateX(-50%) rotate(-3deg);
  background:linear-gradient(180deg,#74512d,#4f351f);
  clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);
  border-radius:6px;
  z-index:5;
}
.w643-straw {
  position:absolute;
  top:192px;
  width:42px; height:72px;
  background:repeating-linear-gradient(96deg,transparent 0 5px,#c89e4d 5px 8px,transparent 8px 12px);
  opacity:.95;
}
.w643-straw-left { left:79px; transform:rotate(8deg); }
.w643-straw-right { right:79px; transform:rotate(-8deg); }
@media(max-width:640px) {
  .w643-id-frame { min-height:390px; }
  .w643-scarecrow-visual { transform:scale(.9); transform-origin:top center; }
}


/* v321 — Black/cyan rows are reserved for collapsible controls. */
.wonder-term-card h3,
.wonder-registry-note > strong,
.staff-file-page-v215 .staff-profile-note-label,
.wonder-file-section-label,
.wonder-test-state {
  display:block;
  width:100%;
  max-width:none;
  box-sizing:border-box;
  background:#050505;
  color:var(--accent);
  border-radius:0;
  line-height:1.35;
}

/* Static labels must not imitate collapsible black/cyan rows. */
.section-kicker,
.class-examples h2,
.class-examples h3,
.record-label,
.metric-definitions h2,
.metric-definitions h3,
.scale-card h2,
.scale-card h3,
.branch-stat-row strong,
.branch-purpose-label,
.wonder-file-kicker {
  background:transparent;
  border:0;
  box-shadow:none;
  color:inherit;
  padding:0;
  border-radius:0;
}

/* Restore non-interactive labels inside the tan personnel file. */
.staff-file-page-v215 .employee-paper-card .paper-ref {
  display:inline;
  width:auto;
  padding:0;
  background:transparent;
  color:#363126;
}
.staff-file-page-v215 .employee-meta-grid span,
.staff-file-page-v215 .employee-traits-grid span {
  display:inline;
  width:auto;
  padding:0;
  background:transparent;
  color:#595243;
}
.staff-file-page-v215 .employee-lines > .employee-description > strong {
  display:inline;
  width:auto;
  padding:0;
  background:transparent;
  color:#181511;
}

/* Static branch number badges remain ordinary neutral badges. */
.branch-family-number {
  background:rgba(18,43,55,.06);
  color:inherit;
  border-color:rgba(18,43,55,.18);
  border-radius:16px;
}

/* Table header rows are collapsible controls and keep the black/cyan language. */
.class-table th {
  background:#050505;
  color:var(--accent);
}

/* v319 — Wonder group headers sit flush in rounded containers. */
.wonder-file-page .section-block.wonder-file-section {
  padding: 0;
}

.wonder-file-page .wonder-file-section > .wonder-file-section-heading > .wonder-file-section-label {
  margin: 0;
  padding: 16px 16px;
  border-radius: 27px 27px 0 0;
  background: #050505;
  color: var(--accent);
}

.wonder-file-page .wonder-test-card > .wonder-test-state {
  margin: 0;
  padding: 16px 16px;
  border-radius: 17px 17px 0 0;
  background: #050505;
  color: var(--accent);
}


/* v321 — Collapsible black/cyan row behavior. */
.fsc-collapse-toggle {
  position:relative;
  cursor:pointer;
  user-select:none;
  padding-right:48px !important;
}
.fsc-collapse-toggle::after {
  content:"▾";
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  color:var(--accent);
  font-size:1rem;
  line-height:1;
  transition:transform .16s ease;
}
.fsc-collapse-toggle[aria-expanded="false"]::after {
  transform:translateY(-50%) rotate(-90deg);
}
.fsc-collapse-toggle:hover,
.fsc-collapse-toggle:focus-visible {
  background:#0b1519 !important;
  outline:none;
}
.fsc-collapse-toggle:focus-visible {
  box-shadow:inset 0 0 0 2px rgba(28,209,226,.62);
}

/* Wonder file section collapse. */
.wonder-file-page .wonder-file-section.is-collapsed > .wonder-file-section-heading > h2,
.wonder-file-page .wonder-file-section.is-collapsed > .wonder-file-copy-card,
.wonder-file-page .wonder-file-section.is-collapsed > .wonder-test-grid {
  display:none;
}
.wonder-file-page .wonder-file-section.is-collapsed > .wonder-file-section-heading > .wonder-file-section-label {
  border-radius:27px;
}

/* Individual test-card collapse. */
.wonder-file-page .wonder-test-card.is-collapsed > h3,
.wonder-file-page .wonder-test-card.is-collapsed > p {
  display:none;
}
.wonder-file-page .wonder-test-card.is-collapsed > .wonder-test-state {
  border-radius:17px;
}

/* About Wonders collapsible notes/cards. */
.wonder-registry-note {
  padding:0;
  overflow:hidden;
}
.wonder-registry-note > strong {
  margin:0;
  padding:16px 20px;
}
.wonder-registry-note > p {
  padding:18px 20px;
}
.wonder-registry-note.is-collapsed > p {
  display:none;
}
.wonder-term-card {
  padding:0;
  overflow:hidden;
}
.wonder-term-card > h3 {
  margin:0;
  padding:16px 20px;
}
.wonder-term-card > p {
  margin:0;
  padding:18px 22px 22px;
}
.wonder-term-card.is-collapsed > p {
  display:none;
}

/* Personnel supplemental-note collapse. */
.staff-profile-note.is-collapsed > :not(.staff-profile-note-label) {
  display:none;
}

/* Table header rows collapse the table body. */
.class-table thead {
  cursor:pointer;
}
.class-table thead th:last-child {
  position:relative;
  padding-right:48px;
}
.class-table thead th:last-child::after {
  content:"▾";
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  color:var(--accent);
  font-size:1rem;
  line-height:1;
  transition:transform .16s ease;
}
.class-table.is-collapsed thead th:last-child::after {
  transform:translateY(-50%) rotate(-90deg);
}
.class-table.is-collapsed tbody {
  display:none;
}
.class-table thead:hover th,
.class-table thead:focus-visible th {
  background:#0b1519;
}
.class-table thead:focus-visible {
  outline:2px solid rgba(28,209,226,.62);
  outline-offset:-2px;
}

.staff-file-page-v215 .staff-profile-note-label {
  padding:16px 18px;
}


/* v322 — About Staff / About Wonders black-cyan rows are informational, not collapsible. */
.about-staff-page .class-table thead,
.about-wonders-page .class-table thead {
  cursor: default;
}
.about-staff-page .class-table thead th:last-child::after,
.about-wonders-page .class-table thead th:last-child::after {
  display: none;
}
.about-staff-page .class-table thead:hover th,
.about-staff-page .class-table thead:focus-visible th,
.about-wonders-page .class-table thead:hover th,
.about-wonders-page .class-table thead:focus-visible th {
  background: #050505;
}
.about-staff-page .class-table thead:focus-visible,
.about-wonders-page .class-table thead:focus-visible {
  outline: none;
}

/* v322 — Staff-file collapsible headers fill the full rounded top edge like Wonder files. */
.staff-file-page-v215 .staff-profile-note {
  padding: 0 0 26px;
  overflow: hidden;
}
.staff-file-page-v215 .staff-profile-note > .staff-profile-note-label {
  margin: 0;
  padding: 16px 28px;
  border-radius: 0;
  background: #050505;
  color: var(--accent);
}
.staff-file-page-v215 .staff-profile-note > h2 {
  margin: 22px 28px 16px;
}
.staff-file-page-v215 .staff-profile-note > p {
  margin-left: 28px;
  margin-right: 28px;
}
.staff-file-page-v215 .staff-profile-note > ul {
  margin-left: calc(28px + 1.3rem);
  margin-right: 28px;
}
.staff-file-page-v215 .staff-profile-note > blockquote {
  margin-left: 28px;
  margin-right: 28px;
}
.staff-file-page-v215 .staff-profile-note.is-collapsed {
  padding-bottom: 0;
}
.staff-file-page-v215 .staff-profile-note.is-collapsed > .staff-profile-note-label {
  border-radius: 0;
}

@media(max-width:650px) {
  .staff-file-page-v215 .staff-profile-note {
    padding: 0 0 20px;
  }
  .staff-file-page-v215 .staff-profile-note > .staff-profile-note-label {
    padding: 16px 18px;
  }
  .staff-file-page-v215 .staff-profile-note > h2 {
    margin: 18px 18px 14px;
  }
  .staff-file-page-v215 .staff-profile-note > p {
    margin-left: 18px;
    margin-right: 18px;
  }
  .staff-file-page-v215 .staff-profile-note > ul {
    margin-left: calc(18px + 1.3rem);
    margin-right: 18px;
  }
  .staff-file-page-v215 .staff-profile-note > blockquote {
    margin-left: 18px;
    margin-right: 18px;
  }
}


/* v323 — Native HTML/CSS collapsible rows. No JavaScript required. */
.wonder-file-page details.wonder-file-section > summary.wonder-file-section-label,
.wonder-file-page details.wonder-test-card > summary.wonder-test-state,
.staff-file-page-v215 details.staff-profile-note > summary.staff-profile-note-label {
  position: relative;
  display: block;
  width: 100%;
  box-sizing: border-box;
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding-right: 48px;
}

.wonder-file-page details.wonder-file-section > summary.wonder-file-section-label::-webkit-details-marker,
.wonder-file-page details.wonder-test-card > summary.wonder-test-state::-webkit-details-marker,
.staff-file-page-v215 details.staff-profile-note > summary.staff-profile-note-label::-webkit-details-marker {
  display: none;
}

.wonder-file-page details.wonder-file-section > summary.wonder-file-section-label::after,
.wonder-file-page details.wonder-test-card > summary.wonder-test-state::after,
.staff-file-page-v215 details.staff-profile-note > summary.staff-profile-note-label::after {
  content: "▾";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-size: 1rem;
  line-height: 1;
}

.wonder-file-page details.wonder-file-section:not([open]) > summary.wonder-file-section-label::after,
.wonder-file-page details.wonder-test-card:not([open]) > summary.wonder-test-state::after,
.staff-file-page-v215 details.staff-profile-note:not([open]) > summary.staff-profile-note-label::after {
  transform: translateY(-50%) rotate(-90deg);
}

.wonder-file-page details.wonder-file-section > summary.wonder-file-section-label:hover,
.wonder-file-page details.wonder-file-section > summary.wonder-file-section-label:focus-visible,
.wonder-file-page details.wonder-test-card > summary.wonder-test-state:hover,
.wonder-file-page details.wonder-test-card > summary.wonder-test-state:focus-visible,
.staff-file-page-v215 details.staff-profile-note > summary.staff-profile-note-label:hover,
.staff-file-page-v215 details.staff-profile-note > summary.staff-profile-note-label:focus-visible {
  background: #0b1519;
  outline: none;
}

.wonder-file-page details.wonder-file-section > summary.wonder-file-section-label:focus-visible,
.wonder-file-page details.wonder-test-card > summary.wonder-test-state:focus-visible,
.staff-file-page-v215 details.staff-profile-note > summary.staff-profile-note-label:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(28,209,226,.62);
}

/* Wonder section summaries remain the actual rounded top edge. */
.wonder-file-page details.wonder-file-section > summary.wonder-file-section-label {
  margin: 0;
  padding: 16px 48px 16px 16px;
  border-radius: 27px 27px 0 0;
  background: #050505;
  color: var(--accent);
}
.wonder-file-page details.wonder-file-section:not([open]) > summary.wonder-file-section-label {
  border-radius: 27px;
}

/* Test-card summaries remain slightly smaller rounded top rows. */
.wonder-file-page details.wonder-test-card > summary.wonder-test-state {
  margin: 0;
  padding: 16px 48px 16px 16px;
  border-radius: 17px 17px 0 0;
  background: #050505;
  color: var(--accent);
}
.wonder-file-page details.wonder-test-card:not([open]) > summary.wonder-test-state {
  border-radius: 17px;
}

/* Staff-file summary bars fill the rounded top and collapse cleanly. */
.staff-file-page-v215 details.staff-profile-note > summary.staff-profile-note-label {
  margin: 0;
  padding: 16px 48px 16px 28px;
  border-radius: 0;
  background: #050505;
  color: var(--accent);
}
.staff-file-page-v215 details.staff-profile-note:not([open]) {
  padding-bottom: 0;
}

@media(max-width:650px) {
  .staff-file-page-v215 details.staff-profile-note > summary.staff-profile-note-label {
    padding: 16px 48px 16px 18px;
  }
}

/* v327 — Location Distribution bars: black/cyan treatment + larger base/station icons. */
.location-distribution-row {
  background: #050505;
  border-color: #232b2d;
  color: var(--accent);
}

.location-distribution-name,
.location-distribution-stat,
.location-distribution-stat strong,
.location-row-action {
  color: var(--accent);
}

.location-distribution-row:hover {
  background: #050505;
  border-color: var(--accent);
  box-shadow: inset 5px 0 0 var(--accent);
}

.location-distribution-row:focus-visible {
  outline: 3px solid rgba(0, 255, 255, 0.3);
  outline-offset: 2px;
  border-color: var(--accent);
}

.location-distribution-entry[open] > .location-distribution-row {
  background: #050505;
  border-color: var(--accent);
  box-shadow: inset 5px 0 0 var(--accent);
}

.location-row-arrow {
  border-color: var(--accent);
  background: #050505;
  color: var(--accent);
}

.location-distribution-entry[open] > .location-distribution-row .location-row-arrow {
  background: var(--accent);
  color: #050505;
}

/* About 20% larger than the previous 46px / 34px sizes. */
.location-distribution-stat img {
  width: 55px;
  height: 55px;
}

.location-detail-label img {
  width: 41px;
  height: 41px;
}

@media (max-width: 780px) {
  .location-distribution-stat img {
    width: 48px;
    height: 48px;
  }
}

/* v328 — Location Distribution expanded layout parity. */
.location-distribution-details {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* Expanded Base/Station icons match the icons shown in the summary bars. */
.location-detail-label img {
  width: 55px;
  height: 55px;
}

@media (max-width: 780px) {
  .location-detail-label img {
    width: 48px;
    height: 48px;
  }
}

/* v329 — Wonder file hero and example-field alignment */
.wonder-file-page .wonder-file-hero {
  align-items:flex-start;
}
.wonder-file-page .wonder-file-hero h1 {
  max-width:100%;
  line-height:1.02;
}
.wonder-file-page .wonder-file-hero .wonder-pronunciation-note {
  margin:0 0 12px;
}


/* v330 — simplify dedicated Wonder record headings and use full-width page title. */
.wonder-file-page .wonder-file-hero {
  max-width:none;
  width:100%;
}

.wonder-file-page .wonder-file-hero > div {
  width:100%;
  min-width:0;
}

.wonder-file-page .wonder-file-hero h1 {
  width:100%;
  max-width:none;
  font-size:clamp(2.5rem,4.2vw,4.2rem);
  white-space:nowrap;
}

.wonder-file-page .wonder-record-stamp {
  max-width:min(74%, 760px);
  line-height:1.18;
}

@media (max-width:780px) {
  .wonder-file-page .wonder-file-hero h1 {
    white-space:normal;
    font-size:clamp(2.35rem,10vw,3.7rem);
  }

  .wonder-file-page .wonder-record-stamp {
    max-width:100%;
  }
}


/* v331 — dedicated Wonder file title hierarchy and dossier top row. */
.wonder-file-page .wonder-file-hero h1 {
  font-size:clamp(2.4rem,5vw,4.6rem);
  line-height:1.02;
  letter-spacing:.01em;
  white-space:normal;
}

.wonder-file-page .first-subpage-section {
  border-top:0;
}

.wonder-file-page .wonder-dossier-top {
  align-items:baseline;
}

.wonder-file-page .wonder-record-stamp {
  max-width:none;
  padding:0;
  border:0;
  border-radius:0;
  color:#111111;
  background:transparent;
  transform:none;
  font-size:1.15rem;
  font-weight:800;
  letter-spacing:.08em;
}

.wonder-file-page .wonder-dossier-title {
  color:#111111;
  font-size:1.15rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:none;
  text-align:right;
}

@media (max-width:640px) {
  .wonder-file-page .wonder-dossier-title {
    text-align:left;
  }
}


/* v333 — Wonder metadata rows: three equal summary fields, then Primary Location / Disposition 50–50. */
.wonder-meta-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.wonder-meta-card.wonder-meta-third {
  grid-column: span 2;
}

.wonder-meta-card.wonder-meta-half {
  grid-column: span 3;
}

@media (max-width: 640px) {
  .wonder-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wonder-meta-card.wonder-meta-third,
  .wonder-meta-card.wonder-meta-half {
    grid-column: span 2;
  }
}

/* v334 — Multiple entries inside Wonder/Staff file groups always stack vertically. */
.wonder-file-page .wonder-test-grid,
.staff-file-page-v215 .staff-profile-notes {
  grid-template-columns: 1fr;
}


/* v335 — Wonder metadata: Intelligence 25%, Destruction 25%, Disposition 50%. */
.wonder-meta-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wonder-meta-card.wonder-meta-quarter {
  grid-column: span 1;
}

.wonder-meta-card.wonder-meta-half {
  grid-column: span 2;
}

@media (max-width: 640px) {
  .wonder-meta-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .wonder-meta-card.wonder-meta-quarter {
    grid-column: span 1;
  }

  .wonder-meta-card.wonder-meta-half {
    grid-column: span 2;
  }
}