/* Radiant Edge for the web: the one design layer of draftborn.com, its legal
   pages and Draftborn Admin (docs/art-direction.md, section 12).

   This file is the source. scripts/server/brand.py copies it unchanged next to
   each of the three stylesheets (site/radiant.css, legal/radiant.css,
   admin/panel/static/panel/radiant.css) and scripts/server/check_site.py fails
   when a copy differs or a color here leaves the game's tokens in
   draftborn/core/ui_kit.gd. Change it here, run brand.py, never edit a copy.

   It holds what the three share: the tokens, the base, the shapes (the blade,
   the brackets, the chip, the diamond), the bar, the buttons, the kicker, the
   rule, the figures and the motion, with the page change of the game's
   Transition. The pages keep their own layout and their @font-face, since the
   fonts lie in a folder of their own beside each stylesheet. No script and no
   inline style anywhere (the CSP allows neither); every motion stops for
   visitors who ask for reduced motion; nothing blinks and nothing glows blue
   (the owner's rule of 2026-10-29). */

/* 1. Tokens. The names on the left are the web's, the comment names the
   UiKit constant whose value they carry. */
:root { color-scheme: dark;
  --bg: #081120; /* BG */
  --bg-deep: #050b16;
  --slate: #0f1b2e; /* SLATE */
  --slate-2: #16243b; /* SLATE_2 */
  --slate-3: #223553; /* SLATE_3 */
  --steel: #2f4a73; /* BRONZE */
  --hairline: #7b9dcc; /* BRONZE_LIGHT */
  --inset: #1c2e4c; /* GOLD_DEEP */
  --line: rgba(123, 157, 204, .28);
  --line-strong: rgba(123, 157, 204, .5);
  --ink: #eef4fc; /* PARCHMENT */
  --dim: #a8bad3; /* PARCHMENT_DIM */
  --muted: #8297b5; /* MUTED */
  --ink-dark: #0a1626; /* INK_TEXT */
  --gold: #f2c14e; /* GOLD */
  --gold-bright: #fff1c7; /* GOLD_BRIGHT */
  --gold-top: #ffe39a;
  --gold-deep: #c98a17;
  --azure: #36c8ff; /* TEAL */
  --azure-light: #a6ecff; /* TEAL_LIGHT */
  --azure-deep: #0a3d63; /* TEAL_DEEP */
  --blue: #5aa2ff; /* BLUE */
  --violet: #b583ff; /* VIOLET */
  --lilac: #cdb9ff; /* LILAC */
  --red: #ff4d6a; /* RED */
  --red-light: #ff94a3; /* RED_LIGHT */
  --green: #47d98a; /* GREEN */
  --mint: #6cf2c4; /* MINT */
  --amber: #ffc845; /* AMBER */
  --orange: #ff8f3f; /* ORANGE */
  /* The two elements without an interface color of their own: nature (the
     jungle's lime key) and physical (white steel). The other elements are
     fire --orange, frost --azure-light, shadow --violet, light --gold-bright
     and lightning --blue, in the handbook and on the landing page alike. */
  --el-nature: #b8ff59;
  --el-physical: #dfe7f2;

  /* Spacing (SPACE_XS to SPACE_3XL) and the cuts of the blade (NICK,
     CHAMFER_S, CHAMFER, the panel's and the call to action's). */
  --space-xs: 4px; --space-s: 8px; --space-m: 12px; --space-l: 16px; --space-xl: 24px; --space-2xl: 32px; --space-3xl: 48px;
  --nick: 3px; --cut-s: 8px; --cut: 14px; --cut-cta: 18px; --cut-panel: 26px;
  /* The bands of a page breathe in steps above the game's scale. */
  --space-4xl: 64px; --space-5xl: 96px;

  /* The type scale of the web, one size per role, as UiKit's CAPTION to
     BANNER on a phone (art-direction.md section 3). Page sheets never write
     a font size of their own (check_site.py): a tag, a caption, the running
     text and its lead, a card's name, a feature's name, a section's title, a
     page's title and the name on the opening. */
  --fs-xs: .8125rem;
  --fs-s: .9375rem;
  --fs-m: 1rem;
  --fs-body: 1.125rem;
  --fs-lead: 1.25rem;
  --fs-card: 1.25rem;
  --fs-card-l: 1.5rem;
  --fs-figure: 2.25rem;
  --fs-feature: clamp(1.75rem, 2.6vw, 2.5rem);
  --fs-h2: clamp(2rem, 4.4vw, 3.4rem);
  --fs-h1: clamp(2.2rem, 5vw, 3.8rem);
  --fs-display: clamp(2.8rem, 11vw, 8rem);
  --lh-text: 1.65;
  --lh-ui: 1.5;

  --display: "Chakra Petch", "Segoe UI", Roboto, system-ui, sans-serif;
  --figures: "Chakra Petch Figures", "Chakra Petch", "Segoe UI", Roboto, system-ui, sans-serif;
  --text: "Saira Semi Condensed", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Motion: sharp and fast, out of light, never bouncy (UiChrome). */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.7, 0, .84, 0);
  --t-press: .12s; --t-fast: .2s; --t-base: .34s; --t-slow: .6s;

  /* The navy glass of a panel: lighter at the top, as panel_texture. */
  --glass: linear-gradient(180deg, rgba(34, 53, 83, .92), rgba(15, 27, 46, .94) 42%, rgba(12, 22, 38, .96));
  --glass-card: linear-gradient(180deg, var(--slate-2), var(--slate));
  --gold-plate: linear-gradient(180deg, var(--gold-top) 0%, var(--gold) 48%, var(--gold-deep) 100%);
}

/* 2. Base. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg);
  scrollbar-color: var(--steel) var(--bg-deep); }
body { margin: 0; color: var(--ink); background: var(--bg); overflow-wrap: break-word; }
/* A list line never leaves one word alone on its last line. */
li { text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--azure-light); text-decoration-color: rgba(166, 236, 255, .45); text-underline-offset: 3px;
  transition: color var(--t-fast), text-decoration-color var(--t-fast); }
a:hover { color: var(--gold-bright); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--azure-light); outline-offset: 3px; }
/* A blade cuts its corners with clip-path, which would cut an outline drawn
   outside it too: the frames of the web draw their focus inside. */
:where(.btn, .chip, .card, .path, .news-card, .chapter-card, .pager, .pages a, .toc a, .tile, .ranges a,
  .faq summary, .bestiary-tabs label, .armory-tabs label, .menu summary):focus-visible { outline-offset: -4px; }
::selection { color: var(--ink-dark); background: var(--gold); }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -64px; z-index: 60; padding: var(--space-m) var(--space-l); color: var(--ink-dark);
  background: var(--gold); font-weight: 700; }
.skip:focus { top: 12px; }

/* 3. Shapes. The blade: top left and bottom right cut at 45 degrees, the two
   other corners nicked (UiKit.blade_distance). Set --c for the cut. */
.blade { --c: var(--cut);
  clip-path: polygon(var(--c) 0, calc(100% - var(--nick)) 0, 100% var(--nick), 100% calc(100% - var(--c)),
    calc(100% - var(--c)) 100%, var(--nick) 100%, 0 calc(100% - var(--nick)), 0 var(--c)); }

/* The brackets: a gold one over the top left cut, an azure one over the
   bottom right, as every panel of the game wears them (UiKit._chamfer). Each
   is a 2 px line along the cut that runs on along both edges. They take the
   element's ::before and ::after; --c is the element's cut. */
.bracketed { position: relative; }
.bracketed::before, .bracketed::after { --l: 34px; --w: 2px; content: ""; position: absolute; z-index: 2; pointer-events: none;
  width: calc(var(--c, 14px) + var(--l)); height: calc(var(--c, 14px) + var(--l)); }
.bracketed::before { left: 0; top: 0; background: var(--gold);
  clip-path: polygon(0 100%, 0 var(--c, 14px), var(--c, 14px) 0, 100% 0, 100% var(--w),
    calc(var(--c, 14px) + var(--w) * .41) var(--w), var(--w) calc(var(--c, 14px) + var(--w) * .41), var(--w) 100%); }
.bracketed::after { right: 0; bottom: 0; background: var(--azure);
  clip-path: polygon(100% 0, 100% calc(100% - var(--c, 14px)), calc(100% - var(--c, 14px)) 100%, 0 100%, 0 calc(100% - var(--w)),
    calc(100% - var(--c, 14px) - var(--w) * .41) calc(100% - var(--w)), calc(100% - var(--w)) calc(100% - var(--c, 14px) - var(--w) * .41),
    calc(100% - var(--w)) 0); }

/* The chip: a bar with pointed ends (pill_style), for counters and tags. */
.chip { --tip: 10px; display: inline-flex; align-items: center; gap: var(--space-s); min-height: 30px; padding: 3px calc(var(--tip) + 8px);
  color: var(--dim); background: var(--slate-2); font: 700 var(--fs-s)/1.2 var(--text); letter-spacing: .02em;
  clip-path: polygon(var(--tip) 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, var(--tip) 100%, 0 50%); }
.chip.gold { color: var(--ink-dark); background: var(--gold); }
.chip.azure { color: var(--ink-dark); background: var(--azure); }
.chip.good { color: var(--green); background: rgba(71, 217, 138, .12); }
.chip.bad { color: var(--red-light); background: rgba(255, 77, 106, .12); }
.chip.warn { color: var(--amber); background: rgba(255, 200, 69, .12); }

/* The diamond: the one ornament. */
.diamond { display: inline-block; flex: none; width: 10px; height: 10px; transform: rotate(45deg); background: var(--gold); }

/* The rule: a steel hairline with an azure core that fades at both ends
   (UiKit.separator_style). */
.rule { height: 1px; margin: var(--space-xl) 0; border: 0;
  background: linear-gradient(90deg, transparent, var(--line-strong) 18%, var(--azure) 50%, var(--line-strong) 82%, transparent); }

/* 4. Type. The kicker over a title: a gold diamond and azure capitals. */
.kicker { display: flex; align-items: center; gap: var(--space-m); margin: 0 0 var(--space-m); color: var(--azure-light);
  font: 700 var(--fs-m)/1.3 var(--display); letter-spacing: .16em; text-transform: uppercase; }
.kicker::before { content: ""; flex: none; width: 10px; height: 10px; transform: rotate(45deg); background: var(--gold); }
/* Numbers stand in the game's figures: ten digits of one width. */
.figures { font-family: var(--figures); font-variant-numeric: tabular-nums; }

/* 5. The bar: floating glass at the top, its cut corners on a layer of
   their own, so they never clip a menu that opens below. */
.bar { position: relative; isolation: isolate; display: flex; align-items: center; gap: var(--space-m) var(--space-2xl);
  max-width: 1560px; margin: 0 auto; padding: var(--space-s) var(--space-m) var(--space-s) var(--space-l); view-transition-name: bar; }
.bar::before { --c: var(--cut); content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(8, 17, 32, .86);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px var(--line);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.brand { display: inline-flex; align-items: center; gap: var(--space-m); color: var(--gold); text-decoration: none;
  font: 700 var(--fs-card)/1 var(--display); letter-spacing: .22em; text-transform: uppercase; min-height: 44px; }
.brand img { width: 40px; height: 40px; transition: transform var(--t-base) var(--ease-out); }
.brand:hover { color: var(--gold-bright); }
.brand:hover img { transform: rotate(-8deg) scale(1.06); }
/* The links of the bar: a gold line grows under the one pointed at and
   stands under the page shown. */
.nav-link { position: relative; color: var(--dim); text-decoration: none; font-weight: 700; letter-spacing: .04em;
  padding: var(--space-m) 0; white-space: nowrap; }
.nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: var(--gold);
  transform: scaleX(0); transition: transform var(--t-base) var(--ease-out); }
.nav-link:hover, .nav-link[aria-current] { color: var(--ink); }
.nav-link:hover::after, .nav-link[aria-current]::after { transform: scaleX(1); }

/* 6. Buttons. The gold plate with dark capitals is the one call to action
   (PrimaryButton), the framed one the second choice, the steel one an
   action of a list. A press shrinks it to 95% and brightens it; a gold one
   also sends a frame of light off (UiFx.burst). */
.btn { --c: var(--cut); position: relative; isolation: isolate; display: inline-flex; align-items: center;
  justify-content: center; gap: var(--space-m); min-height: 56px; padding: 0 var(--space-2xl); border: 0; cursor: pointer; text-decoration: none;
  color: var(--ink); background: var(--slate-3); font: 700 var(--fs-m)/1 var(--display); letter-spacing: .14em; text-transform: uppercase;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  transition: transform var(--t-fast) var(--ease-out), filter var(--t-fast), background-color var(--t-fast); }
.btn:hover { color: var(--ink); background-color: var(--steel); transform: translateY(-2px); }
.btn:active { transform: scale(.95); filter: brightness(1.18); transition-duration: var(--t-press); }
.btn-gold { color: var(--ink-dark); background: var(--gold-plate); }
.btn-gold::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), transparent 38%);
  clip-path: inset(1px 1px 60% 1px); opacity: .55; }
.btn-gold:hover { color: var(--ink-dark); background: var(--gold-plate); filter: brightness(1.08) saturate(1.05); }
.btn-ghost { color: var(--gold-bright); background: var(--gold); }
.btn-ghost::before { content: ""; position: absolute; inset: 1.5px; z-index: -1; background: var(--bg);
  clip-path: polygon(calc(var(--c) - 1px) 0, 100% 0, 100% calc(100% - var(--c) + 1px), calc(100% - var(--c) + 1px) 100%, 0 100%, 0 calc(var(--c) - 1px));
  transition: background-color var(--t-fast) var(--ease); }
.btn-ghost:hover { color: var(--gold-bright); background: var(--gold); }
.btn-ghost:hover::before { background: var(--slate-2); }
.btn-danger { color: #2a0b12; background: linear-gradient(180deg, var(--red-light), var(--red)); }
.btn-danger:hover { color: #2a0b12; background: linear-gradient(180deg, #ffb3bd, var(--red-light)); }
/* A flat one: text only, an azure wash where a pointer rests (FlatButton). */
.btn-flat { color: var(--dim); background: transparent; }
.btn-flat:hover { color: var(--ink); background: rgba(54, 200, 255, .12); transform: none; }
.btn-small { --c: 10px; min-height: 44px; padding: 0 var(--space-l); font-size: var(--fs-s); letter-spacing: .1em; }
/* The frame of light a gold button sends off while pressed. */
.btn-gold::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 0 2px var(--gold-bright); }
.btn-gold:active::after { animation: burst .42s var(--ease-out); }
@keyframes burst { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.12); } }

/* 7. The pages of draftborn.com (the landing page, the handbook, the news,
   the legal pages): the floating bar, the head of a page, a document beside
   its table of contents, tables, and the foot with its four columns. */
.top { position: fixed; inset: 0 0 auto; z-index: 40; padding: 10px clamp(8px, 2vw, 24px) 0; pointer-events: none; }
.top .bar { pointer-events: auto; }
.top .brand { margin-right: auto; }
.sections { display: none; gap: var(--space-xs) var(--space-xl); }
.sections a { position: relative; color: var(--dim); text-decoration: none; font: 700 var(--fs-s)/1 var(--text);
  letter-spacing: .04em; padding: var(--space-m) 0; white-space: nowrap; }
.sections a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: var(--gold);
  transform: scaleX(0); transition: transform var(--t-base) var(--ease-out); }
.sections a:hover, .sections a[aria-current] { color: var(--ink); }
.sections a:hover::after, .sections a[aria-current]::after { transform: scaleX(1); }
.top .btn-small { display: none; }
@media (min-width: 560px) { .top .btn-small { display: inline-flex; } }
@media (min-width: 1180px) { .sections { display: flex; } .menu { display: none; } }

/* The menu of small screens: a list under the bar. */
.menu { position: relative; }
.menu summary { display: grid; place-items: center; width: 48px; height: 48px; list-style: none; cursor: pointer;
  background: var(--slate-2); border: 1px solid var(--line); }
.menu summary::-webkit-details-marker { display: none; }
.burger, .burger::before, .burger::after { display: block; width: 22px; height: 2px; background: var(--gold);
  transition: transform .25s var(--ease), background-color .25s; }
.burger { position: relative; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { top: -7px; } .burger::after { top: 7px; }
.menu[open] .burger { background: transparent; }
.menu[open] .burger::before { transform: translateY(7px) rotate(45deg); }
.menu[open] .burger::after { transform: translateY(-7px) rotate(-45deg); }
.menu nav { position: absolute; right: 0; top: calc(100% + 14px); display: grid; grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: var(--space-xs); width: min(92vw, 420px); padding: var(--space-m); background: rgba(8, 17, 32, .96); border: 1px solid var(--line);
  max-height: calc(100svh - 100px); overflow-y: auto; }
.menu nav a { padding: var(--space-m) var(--space-l); color: var(--ink); text-decoration: none; font-weight: 700; background: var(--slate); }
.menu nav a:hover { color: var(--gold-bright); background: var(--slate-2); }

/* The head of a page: where you are, the title, a line on it. A head with a
   picture (.page-head.art) lays the picture behind it, veiled toward the
   text; one without carries a large diamond of light at its right edge. */
.page-head { --pad-x: max(clamp(16px, 5vw, 96px), (100% - 1400px) / 2); position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(116px, 12vw, 160px) var(--pad-x) clamp(36px, 4vw, 60px);
  background: radial-gradient(ellipse 70% 120% at 85% 0%, rgba(242, 193, 78, .12), transparent 60%),
    radial-gradient(ellipse 60% 100% at 10% 0%, rgba(47, 74, 115, .45), transparent 65%), linear-gradient(180deg, var(--slate), var(--bg)); }
.page-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 18%, var(--azure) 50%, var(--line-strong) 82%, transparent); }
.page-head::before { content: ""; position: absolute; right: var(--pad-x); top: 50%; z-index: -1; width: 220px; height: 220px;
  margin-top: -60px; transform: rotate(45deg); border: 1px solid rgba(242, 193, 78, .18);
  box-shadow: inset 0 0 0 26px rgba(242, 193, 78, .03), 0 0 0 26px rgba(123, 157, 204, .04); }
.page-head.art { min-height: min(62svh, 560px); display: flex; flex-direction: column; justify-content: flex-end; }
.page-head.art::before { display: none; }
.head-art { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.head-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.head-art::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(5, 11, 22, .95) 0%, rgba(5, 11, 22, .84) 42%, rgba(5, 11, 22, .2) 82%),
    linear-gradient(0deg, var(--bg) 0%, transparent 42%), linear-gradient(180deg, rgba(5, 11, 22, .7) 0%, transparent 30%); }
.page-head h1 { margin: 0 0 var(--space-m); color: var(--gold); font: 700 var(--fs-h1)/1.06 var(--display); letter-spacing: .03em;
  text-transform: uppercase; text-shadow: 0 2px 24px rgba(5, 11, 22, .6); }
.page-head .meta { margin: 0; color: var(--dim); font-size: var(--fs-lead); }
.page-head.art .meta { color: var(--ink); text-shadow: 0 1px 12px rgba(5, 11, 22, .9); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) 0; margin: 0 0 var(--space-l); font-size: var(--fs-m); }
.crumbs a { color: var(--dim); text-decoration: none; }
.crumbs a:hover { color: var(--gold-bright); }
.crumbs a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 var(--space-m) var(--space-xs) var(--space-l); transform: rotate(45deg);
  background: var(--steel); }
.crumbs span { color: var(--ink); }
/* On a phone the title under the trail names the page: the trail ends at
   the section, without a diamond hanging at its end. */
@media (max-width: 560px) { .crumbs span[aria-current] { display: none; }
  .crumbs a:nth-last-child(2)::after { display: none; } }

/* A document beside its table of contents. */
.layout { display: grid; gap: var(--space-xl);
  padding: clamp(32px, 4vw, 56px) max(clamp(16px, 5vw, 96px), (100% - 1400px) / 2) clamp(56px, 6vw, 96px); }
@media (min-width: 1100px) { .layout { grid-template-columns: 300px minmax(0, 1fr); gap: var(--space-3xl); align-items: start; } }
.toc nav { --c: var(--cut); padding: var(--space-xl) var(--space-xl); background: var(--slate); border-top: 2px solid var(--gold);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
@media (min-width: 1100px) { .toc { position: sticky; top: 104px; max-height: calc(100vh - 124px); overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--steel) transparent; }
  .toc:has(li:nth-child(13)) { mask-image: linear-gradient(#000 calc(100% - 32px), transparent); } }
.toc-title { margin: 0 0 var(--space-m); color: var(--gold); font: 700 var(--fs-s)/1.3 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.toc li { margin: 0; padding: 0; counter-increment: toc; }
.toc li::before { content: none; }
.toc a { display: grid; grid-template-columns: 30px 1fr; padding: var(--space-s) 0; color: var(--dim); text-decoration: none; line-height: 1.35;
  border-top: 1px solid var(--line); transition: color var(--t-fast), padding-left var(--t-base) var(--ease-out); }
.toc li:first-child a { border-top: 0; }
.toc a::before { content: counter(toc, decimal-leading-zero); color: var(--hairline); font: 700 var(--fs-s)/1.5 var(--figures); }
.toc a:hover, .toc a[aria-current] { color: var(--gold-bright); padding-left: var(--space-xs); }
.toc a[aria-current]::before { color: var(--gold); }
@media (min-width: 640px) and (max-width: 1099px) { .toc ol { columns: 2; column-gap: var(--space-2xl); } .toc li { break-inside: avoid; } }

.doc { --c: 22px; position: relative; min-width: 0; padding: clamp(22px, 3.4vw, 48px);
  background: linear-gradient(180deg, var(--slate), rgba(15, 27, 46, .7)); border-top: 2px solid var(--steel);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
@media (max-width: 560px) { .doc { --c: var(--cut); padding: var(--space-l) var(--space-l) var(--space-xl); } }
.doc > :first-child { margin-top: 0; }
.doc > :last-child { margin-bottom: 0; }
.doc h2 { position: relative; margin: var(--space-3xl) 0 var(--space-l); padding: 0 0 var(--space-m) var(--space-xl); color: var(--gold); font: 700 var(--fs-card)/1.3 var(--display);
  letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.doc h2::before { content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; transform: rotate(45deg);
  background: var(--gold); transition: transform var(--t-base) var(--ease-out); }
.doc h2:hover::before { transform: rotate(135deg); }
.doc > h2:first-child, .doc > section:first-child > h2:first-child { margin-top: 0; }
.doc h2:target { color: var(--gold-bright); border-bottom-color: var(--gold); }
.doc h2::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; pointer-events: none; }
.doc h2:target::after { transform: scaleX(1); }
.doc h3 { margin: var(--space-xl) 0 var(--space-s); color: var(--ink); font: 700 var(--fs-body)/1.35 var(--display); letter-spacing: .02em; text-transform: none; }
.doc ul, .doc ol { margin: 0 0 var(--space-l); padding-left: 0; list-style: none; }
.doc li { position: relative; margin: var(--space-s) 0; padding-left: var(--space-xl); }
.doc ul > li::before { content: ""; position: absolute; left: 3px; top: .66em; width: 9px; height: 9px; transform: rotate(45deg);
  background: var(--gold); }
.doc ol { counter-reset: item; }
.doc ol > li { counter-increment: item; padding-left: calc(26px + var(--space-m)); }
.doc ol > li::before { content: counter(item); position: absolute; left: 0; top: 2px; display: grid; place-items: center;
  width: 26px; height: 26px; color: var(--ink-dark); background: var(--gold); font: 700 var(--fs-s)/1 var(--figures);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

/* Tables: gold capitals over steel lines; a wide one scrolls in its frame. */
.table { --c: var(--cut); overflow-x: auto; margin: var(--space-l) 0; background: var(--slate-2); border-top: 2px solid var(--gold);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.table table { width: 100%; border-collapse: collapse; font-size: var(--fs-m); }
.table th, .table td { padding: var(--space-m) var(--space-l); text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.table th { color: var(--gold); background: rgba(34, 53, 83, .6); font: 700 var(--fs-s)/1.35 var(--display); letter-spacing: .06em;
  text-transform: uppercase; }
.table tbody tr:last-child > * { border-bottom: 0; }
.table tbody tr { transition: background-color var(--t-fast); }
.table tbody tr:hover { background: rgba(34, 53, 83, .45); }

/* The foot: the brand and four columns of links. */
.foot { padding: clamp(48px, 6vw, 80px) max(clamp(16px, 5vw, 96px), (100% - 1400px) / 2) 36px; color: var(--dim);
  background: radial-gradient(ellipse 50% 120% at 50% 0%, rgba(47, 74, 115, .28), transparent 70%), var(--bg-deep);
  border-top: 1px solid var(--line); }
.foot-grid { display: grid; gap: var(--space-2xl) var(--space-3xl); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.foot-brand { grid-column: 1 / -1; }
@media (min-width: 980px) { .foot-grid { grid-template-columns: 1.7fr repeat(4, minmax(0, 1fr)); } .foot-brand { grid-column: auto; } }
.foot-brand img { width: 56px; height: 56px; margin-bottom: var(--space-l); }
.foot-brand p { margin: 0 0 var(--space-l); font-size: var(--fs-m); }
.foot-brand b { display: block; margin-bottom: var(--space-s); color: var(--gold); font: 700 var(--fs-card)/1.2 var(--display); letter-spacing: .2em;
  text-transform: uppercase; }
.foot-soon { display: inline-flex; align-items: center; gap: var(--space-m); color: var(--azure-light); font-weight: 700; }
.foot-soon::before { content: ""; width: 8px; height: 8px; transform: rotate(45deg); background: var(--gold); }
.foot-title { margin: 0 0 var(--space-m); color: var(--gold); font: 700 var(--fs-s)/1.3 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.foot ul { margin: 0; padding: 0; list-style: none; }
.foot ul li { margin: 0; padding: 0; }
.foot ul li::before { content: none; }
.foot ul a { display: inline-block; padding: var(--space-s) 0; color: var(--ink); text-decoration: none; }
.foot ul a:hover { color: var(--gold-bright); text-decoration: underline; }
.foot a[aria-current] { color: var(--gold); }
.foot .fine { margin: var(--space-3xl) 0 0; padding-top: var(--space-xl); border-top: 1px solid var(--line); font-size: var(--fs-m); }

/* 8. The page change (Transition): the new page opens out of a slanted
   line of light across the middle, the old one sinks into the navy; the
   bar stays where it is. Browsers without cross-page transitions simply
   load the page. */
@view-transition { navigation: auto; }

/* 9. Motion shared by every page. */
@keyframes arrive { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes drop-in { from { opacity: 0; translate: 0 -14px; } to { opacity: 1; translate: 0 0; } }
/* A window opens out of a line of light (UiChrome.reveal). */
@keyframes unfold { 0% { opacity: 0; clip-path: inset(49.5% 50% 49.5% 50%); filter: brightness(2.2); }
  35% { opacity: 1; clip-path: inset(49.5% 0 49.5% 0); filter: brightness(1.8); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); filter: none; } }
/* A line of light runs out from the left (headings, the bar under a tab). */
@keyframes draw-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  ::view-transition-old(root) { animation: page-out var(--t-base) var(--ease-in) both; }
  ::view-transition-new(root) { animation: page-in .52s var(--ease-out) both; }
  ::view-transition-group(bar) { animation-duration: var(--t-base); }
  .top .bar { animation: drop-in .7s var(--ease-out) both .05s; }
  .page-head > :not(.head-art) { animation: arrive .8s var(--ease-out) both; }
  .page-head > :nth-child(3) { animation-delay: .08s; }
  .page-head > :nth-child(4) { animation-delay: .16s; }
  .page-head > :nth-child(5) { animation-delay: .24s; }
  .head-art img { animation: settle 1.6s var(--ease-out) both; }
  .toc nav, .doc { animation: arrive .8s var(--ease-out) both .25s; }
  .doc h2:target::after { animation: draw-line .6s var(--ease-out) both; }
  @keyframes settle { from { scale: 1.08; filter: brightness(1.35); } to { scale: 1; filter: none; } }
  @keyframes page-out { to { opacity: 0; filter: brightness(.45) saturate(.6); scale: .985; } }
  @keyframes page-in {
    0% { clip-path: polygon(0 46%, 100% 50%, 100% 50%, 0 54%); filter: brightness(1.9); }
    40% { clip-path: polygon(0 34%, 100% 26%, 100% 74%, 0 66%); filter: brightness(1.25); }
    100% { clip-path: polygon(0 -10%, 100% -10%, 100% 110%, 0 110%); filter: none; } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; }
}