/* Deep slate navy uses the existing website surface.
   Muted trim is mixed from existing surface and text tokens. */
:root {
  --card-border-width:2px;
  --card-inset:clamp(24px,3vw,44px);
  --card-border-color:color-mix(in srgb,var(--surface) 75%,var(--muted));
  --card-border-active:color-mix(in srgb,var(--surface) 65%,var(--muted));
  --card-line:color-mix(in srgb,var(--card-border-color) 50%,transparent);
  --card-paper:var(--surface);
  --card-face-hover:color-mix(in srgb,var(--card-border-color) 14%,transparent);
  --card-shadow:0 1px 3px rgba(0,0,0,.2),0 14px 36px rgba(0,0,0,.16);
  --card-shadow-active:0 1px 3px rgba(0,0,0,.24),0 18px 44px rgba(0,0,0,.24);
}

/* Approved cream and gold card values. */
:root[data-theme="light"] {
  --card-border-width:2px;
  --card-border-color:var(--gold-soft);
  --card-border-active:var(--gold-soft);
  --card-face-hover:var(--slot-tint);
  --card-inset:clamp(24px,3vw,44px);
  --card-line:color-mix(in srgb,var(--gold) 20%,transparent);
  --card-paper:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface) 97%,var(--gold)));
  --card-shadow:0 1px 3px color-mix(in srgb,var(--fg) 3%,transparent),0 14px 36px color-mix(in srgb,var(--fg) 4%,transparent);
  --card-shadow-active:0 1px 3px color-mix(in srgb,var(--fg) 4%,transparent),0 18px 44px color-mix(in srgb,var(--fg) 6%,transparent);
}
/* The light theme has no navigation halo; its invisible box must not cause overflow. */
:root[data-theme="light"] .nav a::before { display:none; }

/* Shared card geometry keeps page layout steady across theme changes. */
:root :is(.mission-copy,.hero .row,.content-card,.steps>div,.strategy-king,.strategy-entry,.rows .r,.inqwrap .rail,.form.panel,.legal,.card) {
  position:relative;
  background:var(--card-paper);
  border:var(--card-border-width) solid var(--card-border-color);
  box-shadow:var(--card-shadow);
}
:root :is(.mission-copy,.hero .row,.content-card,.steps>div,.strategy-king,.rows .r,.inqwrap .rail,.form.panel,.legal) {
  padding:var(--card-inset);
}
/* Both themes share the approved continuous 2px trim and reading layout. */
:root .mission-copy {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:28px;
  width:100%;
  max-width:calc(680px + 2 * var(--card-inset) + 2 * var(--card-border-width));
}
:root .steps { gap:28px; background:transparent; }
:root .steps .n { color:var(--gold); }
:root .rows { gap:22px; }
:root .rows .r { align-items:center; }
:root .inqwrap .rail { align-self:start; }
:root .legal {
  width:calc(100% - 2 * var(--page-gutter));
  margin-bottom:100px;
}
:root .card { padding:28px 28px 32px; }
:root .card .slot { margin-bottom:28px; }
:root .card .viewbio { border-color:var(--card-line); }

/* The king receives a balanced presentation with a fine internal divider. */
:root .strategy-king {
  grid-template-columns:minmax(148px,240px) minmax(0,680px);
  justify-content:center;
  gap:44px;
}
:root .strategy-king__piece {
  align-self:stretch;
  justify-content:center;
  padding-right:44px;
  border-right:1px solid var(--card-line);
}
:root .strategy-king__copy { max-width:none; gap:22px; }
:root .strategy-piece__name {
  order:-1;
  font-size:.8125rem;
  font-weight:500;
  letter-spacing:.16em;
}

/* Gallery-like piece cards. No movement on hover, so disclosure motion stays stable. */
:root .strategy-explorer .strategy-pieces { gap:22px; border:0; }
:root .strategy-entry {
  transition:border-color var(--hover-fade) ease,box-shadow var(--hover-fade) ease;
}
:root .strategy-entry:is(:hover,:focus-within,.is-open) {
  border-color:var(--card-border-active);
  box-shadow:var(--card-shadow-active);
}
:root .strategy-entry .strategy-piece { padding:34px 14px 30px; gap:22px; }
:root .strategy-entry .strategy-piece::after { content:none; }
:root .strategy-piece:hover,
:root .strategy-entry.is-open .strategy-piece {
  background:var(--card-face-hover);
}
:root .strategy-piece img { filter:none; }
:root .strategy-piece__strategy { color:var(--fg); min-height:90px; }
:root .strategy-power { border-top:1px solid var(--card-line); padding-top:18px; gap:12px; }
:root .strategy-power__label b { font:400 1.125rem/1.3 'Marcellus',serif; }
:root .strategy-power__label { flex-wrap:wrap; white-space:normal; gap:4px 9px; }
:root .strategy-power__label b { white-space:nowrap; }
:root .strategy-piece__action {
  font-size:.8125rem;
  font-weight:500;
  letter-spacing:.08em;
  text-decoration:none;
  border-bottom:1px solid var(--card-line);
  padding-bottom:4px;
}
:root .strategy-entry .strategy-detail {
  padding:64px clamp(22px,2.5vw,40px) 40px;
  border-color:var(--card-line);
  gap:32px;
}
:root .strategy-detail__close { border-color:var(--card-line); }
@media (min-width:851px) and (max-width:1250px) {
  :root .strategy-explorer .strategy-pieces { gap:14px; }
}
@media (max-width:850px) {
  :root .strategy-king { grid-template-columns:minmax(0,1fr); gap:28px; }
  :root .strategy-king__piece { padding:0 0 28px; border-right:0; border-bottom:1px solid var(--card-line); }
  :root .strategy-entry .strategy-piece { padding:28px 24px; gap:12px 26px; }
    :root .strategy-piece__strategy { min-height:0; }
  :root .strategy-power { margin-top:8px; padding-top:12px; }
  :root .rows .r { align-items:start; }
}
@media (max-width:600px) {
  :root .card { padding:24px; }
  :root .strategy-entry .strategy-piece { padding:24px 18px; gap:12px 18px; }
  :root .strategy-entry .strategy-detail { padding:64px 24px 32px; }
  :root .legal { margin-bottom:72px; }
  :root .content-card > div:last-child { flex-wrap:wrap; }
}
@media (prefers-reduced-motion:reduce) {
  :root .strategy-entry { transition:none; }
}
@media (max-width:360px) {
  :root .strategy-entry .strategy-piece { grid-template-columns:72px minmax(0,1fr); padding-inline:14px; column-gap:14px; }
  :root .strategy-entry .strategy-piece img { width:72px; }
}

/* Small-screen navigation has no room for the decorative hover halo. */
@media(max-width:600px) { :root .nav a::before { display:none; } }

/* Secondary copy retains readable contrast on the raised navy surfaces. */
:root:not([data-theme="light"]) :is(.mission-copy,.hero .row,.content-card,.steps>div,.strategy-king,.strategy-entry,.rows .r,.inqwrap .rail,.form.panel,.legal,.card) {
  --dim:var(--muted);
  --dim-2:var(--muted);
  --muted-2:var(--muted);
}