/* Trophy Pedestals, in its logo's colours and laid out like a gallery: deep teal walls, velvet curtains, gold trim,
   cream museum labels and the five ranks' lights (grey, green, blue, purple, gold). DM Serif Display for titles,
   Pixelify Sans for small labels in capitals, Figtree for reading. Square corners and hairlines, not rounded cards.
   The landing page moves a little (none for reduced motion); the docs stay still and quiet. */

/* ---------- Tokens ---------- */
:root {
  --tp-gold: #ffc24a;
  --tp-ember: #ff8a4c;
  --tp-rose: #d6455f;
  --tp-velvet: #8e1f33;
  --tp-violet: #c06bff;
  --tp-grass: #7cc35a;
  --tp-diamond: #4a9dff;
  --tp-teal: #3fb8b0;
  --tp-common: #b8b8c2;
  --tp-uncommon: #7cc35a;
  --tp-rare: #4a9dff;
  --tp-epic: #c06bff;
  --tp-legendary: #ffc24a;
  --tp-title: "DM Serif Display", Georgia, serif;
  --tp-pixel: "Pixelify Sans", monospace;
  --tp-ease: cubic-bezier(0.2, 0.9, 0.25, 1);
  --tp-radius: 14px;
  --tp-hall: #07121a;
  --tp-velvet-drape: linear-gradient(90deg, #4e0e1a, #8e1f33 18%, #b33246 30%, #7a1a2a 46%, #5a1222 60%, #9a2639 76%, #6a1525 90%, #4e0e1a);
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color: #0a161d;
  --md-default-fg-color: #e8f2f1;
  --md-default-fg-color--light: #b9cfd0;
  --md-default-fg-color--lighter: #7e979b;
  --md-default-fg-color--lightest: #23404a;
  --md-primary-fg-color: #0a161d;
  --md-primary-fg-color--light: #12242e;
  --md-primary-fg-color--dark: #050d12;
  --md-primary-bg-color: #eef7f6;
  --md-accent-fg-color: var(--tp-gold);
  --md-typeset-a-color: #ffcf73;
  --md-code-bg-color: #0f2029;
  --md-code-fg-color: #e2eeee;
  --md-footer-bg-color: #050d12;
  --tp-bg: #0a161d;
  --tp-panel: #0f1f28;
  --tp-raised: #142a35;
  --tp-line: rgba(255, 206, 120, 0.13);
  --tp-line-strong: rgba(255, 206, 120, 0.26);
  --tp-text: #eef7f6;
  --tp-soft: #c8dcdc;
  --tp-dim: #8fa9ad;
  --tp-faint: #587379;
  --tp-accent: var(--tp-gold);
  --tp-accent-ink: #1e1300;
  --tp-glow: rgba(255, 194, 74, 0.18);
}

[data-md-color-scheme="default"] {
  --md-default-bg-color: #f7f3ea;
  --md-default-fg-color: #14242b;
  --md-default-fg-color--light: #3c5258;
  --md-default-fg-color--lighter: #6d8489;
  --md-default-fg-color--lightest: #e0d8c8;
  --md-primary-fg-color: #f7f3ea;
  --md-primary-fg-color--light: #fffbf2;
  --md-primary-fg-color--dark: #ece4d4;
  --md-primary-bg-color: #14242b;
  --md-accent-fg-color: #a8700c;
  --md-typeset-a-color: #8e5a06;
  --md-code-bg-color: #efe8da;
  --md-code-fg-color: #1c2f36;
  --md-footer-bg-color: #0b1a21;
  --tp-bg: #f7f3ea;
  --tp-panel: #ffffff;
  --tp-raised: #f1eadc;
  --tp-line: rgba(20, 50, 60, 0.12);
  --tp-line-strong: rgba(20, 50, 60, 0.24);
  --tp-text: #10202a;
  --tp-soft: #33494f;
  --tp-dim: #5d7479;
  --tp-faint: #8aa0a4;
  --tp-accent: #b07a0e;
  --tp-accent-ink: #fffaf0;
  --tp-glow: rgba(196, 140, 20, 0.14);
}

body { background: var(--tp-bg); }

/* ---------- The top bar: a full-width gallery bar ---------- */
/* A strip of the five ranks' colours along its top, a gold double rule along its foot, small capitals for the
   sections with a gold rule under the open one. */
.md-header.tp-bar {
  background: color-mix(in srgb, var(--tp-bg) 92%, transparent);
  backdrop-filter: saturate(1.3) blur(12px); -webkit-backdrop-filter: saturate(1.3) blur(12px);
  box-shadow: none; color: var(--tp-text);
  border-bottom: 3px double color-mix(in srgb, var(--tp-gold) 55%, transparent);
}
.tp-bar__ranks {
  display: block; height: 3px;
  background: linear-gradient(90deg, var(--tp-common) 0 20%, var(--tp-uncommon) 20% 40%, var(--tp-rare) 40% 60%, var(--tp-epic) 60% 80%, var(--tp-legendary) 80%);
}
.tp-bar .md-header__inner { height: 3.4rem; gap: 0.6rem; padding: 0 0.6rem; }
.md-header__button.tp-bar__brand { display: flex; align-items: center; gap: 0.7rem; width: auto; height: auto; margin: 0 1rem 0 0; padding: 0; }
.md-header__button.md-logo img { height: 2.3rem; image-rendering: pixelated; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 210, 120, 0.4), 0 4px 14px rgba(0, 0, 0, 0.35); }
.tp-bar__name { font-family: var(--tp-title); font-size: 1.15rem; letter-spacing: 0.01em; color: var(--tp-text); white-space: nowrap; }
.tp-bar__name b { font-weight: 400; color: var(--tp-accent); }
/* (The theme contains and clips its tab list, which would cut off the rule under the open section.) */
.md-header .tp-bar__tabs { display: flex; flex: 1; gap: 0.2rem; height: 100%; margin: 0; padding: 0; list-style: none; contain: none; overflow: visible; }
.md-header .tp-bar__tabs .md-tabs__item { contain: none; overflow: visible; display: flex; align-items: stretch; height: auto; padding: 0; margin: 0; }
.tp-bar__tabs .md-tabs__link {
  display: flex; align-items: center; margin: 0; padding: 0 0.85rem; opacity: 1;
  font-family: var(--tp-pixel); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--tp-dim); border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s;
}
.tp-bar__tabs .md-tabs__link:hover { color: var(--tp-text); }
.tp-bar__tabs .md-tabs__item--active .md-tabs__link { color: var(--tp-accent); border-bottom-color: var(--tp-accent); }
.tp-bar__tools { display: flex; align-items: center; gap: 0.1rem; margin-left: auto; }
.tp-bar__tools .md-header__button { margin: 0; padding: 0.4rem; border-radius: 4px; }
.tp-bar__tools .md-header__button:hover { background: var(--tp-raised); }
.tp-bar__repo svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.tp-bar .md-search { padding: 0; }
.md-search__form { border-radius: 4px; background: var(--tp-raised); }
.md-search__input::placeholder { color: var(--tp-dim); }
.md-source { color: var(--tp-soft); }
.tp-bar__menu { display: none; }
@media screen and (max-width: 76.234375em) {
  .md-header .tp-bar__tabs { display: none; }
  .tp-bar__menu { display: inline-flex; }
}
/* (On a phone: a smaller logo and name, closer together, so the tools still fit on the right.) */
@media (max-width: 30em) {
  .tp-bar .md-header__inner { gap: 0.2rem; padding: 0 0.2rem; }
  .md-header__button.tp-bar__brand { margin-right: 0; gap: 0.45rem; }
  .md-header__button.md-logo img { height: 1.8rem; }
  .tp-bar__name { font-size: 0.95rem; }
}

/* ---------- Docs: sidebars and type ---------- */
.md-main__inner { min-height: calc(100vh - 4.2rem); }
/* The sidebars pin just under the top bar (taller than the theme's own: its rank strip, 3.4rem and its double rule),
   and are as tall as their contents, up to the screen's height. Sized by the theme, they slid under the bar and shrank
   as the footer came in, showing a scroll bar with half the pages hidden. */
:root { --tp-bar-height: calc(3.4rem + 6px); }
@media screen and (min-width: 76.25em) {
  .md-sidebar { top: var(--tp-bar-height); height: auto !important; align-self: flex-start; }
  .md-sidebar__scrollwrap { height: auto !important; max-height: calc(100vh - var(--tp-bar-height) - 1.2rem); }
}
/* The section's pages as a column of labels on a rail: a small diamond for each, gold for the open one. */
/* (Not pulled left as the theme's links are: the sidebar clips at its edge, which cut the diamonds in half.) */
.md-sidebar--primary .md-nav__item:not(.md-nav__item--section):not(.md-nav__item--nested) > a.md-nav__link { position: relative; margin-left: 0; padding-left: 1.4rem; }
.md-sidebar--primary .md-nav__item:not(.md-nav__item--section):not(.md-nav__item--nested) > a.md-nav__link::before {
  content: ""; position: absolute; left: 0.5rem; top: 50%; width: 6px; height: 6px; margin-top: -3px;
  transform: rotate(45deg); background: var(--tp-faint); transition: background 0.2s, box-shadow 0.2s;
}
.md-sidebar--primary a.md-nav__link.is-read::before { background: color-mix(in srgb, var(--tp-accent) 45%, transparent) !important; }
.md-sidebar--primary .md-nav__link--active::before { background: var(--tp-accent) !important; box-shadow: 0 0 0 3px var(--tp-glow); }
.md-nav { font-size: 0.74rem; }
.md-nav__title { color: var(--tp-faint); font-family: var(--tp-pixel); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.62rem; }
.md-nav--primary .md-nav__item--section > .md-nav__link { color: var(--tp-faint); font-family: var(--tp-pixel); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.62rem; border-bottom: 1px solid var(--tp-line); padding-bottom: 0.3rem; }
.md-nav__link { border-radius: 4px; padding: 0.2rem 0.5rem; margin-left: -0.5rem; transition: background 0.15s, color 0.15s; }
.md-nav__link:hover { background: var(--tp-raised); color: var(--tp-text); }
.md-nav__link--active { color: var(--tp-accent) !important; font-weight: 700; }

.md-typeset { font-size: 0.8rem; line-height: 1.75; color: var(--tp-soft); }
.md-typeset h1, .md-typeset h2, .md-typeset h3 { font-family: var(--tp-title); font-weight: 400; color: var(--tp-text); letter-spacing: 0; }
.md-typeset h1 { font-size: 2.4em; margin-bottom: 0.6em; }
.md-typeset h1::after {
  /* the five ranks' gems, common to legendary */
  content: ""; display: block; width: 78px; height: 8px; margin-top: 0.45em;
  background:
    linear-gradient(var(--tp-common), var(--tp-common)) 0 0 / 10px 8px no-repeat,
    linear-gradient(var(--tp-uncommon), var(--tp-uncommon)) 17px 0 / 10px 8px no-repeat,
    linear-gradient(var(--tp-rare), var(--tp-rare)) 34px 0 / 10px 8px no-repeat,
    linear-gradient(var(--tp-epic), var(--tp-epic)) 51px 0 / 10px 8px no-repeat,
    linear-gradient(var(--tp-legendary), var(--tp-legendary)) 68px 0 / 10px 8px no-repeat;
  clip-path: polygon(0 50%, 5px 0, 10px 50%, 5px 100%, 0 50%, 17px 50%, 22px 0, 27px 50%, 22px 100%, 17px 50%, 34px 50%, 39px 0, 44px 50%, 39px 100%, 34px 50%, 51px 50%, 56px 0, 61px 50%, 56px 100%, 51px 50%, 68px 50%, 73px 0, 78px 50%, 73px 100%, 68px 50%);
}
.md-typeset h2 { font-size: 1.6em; margin-top: 2em; padding-top: 0.8em; border-top: 1px solid var(--tp-line); }
.md-typeset h3 { font-size: 1.2em; }
.md-typeset a { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
.md-typeset a:hover { text-decoration-color: currentColor; }
.md-typeset code { border-radius: 3px; padding: 0.1em 0.35em; }
.md-typeset pre > code { border-radius: 6px; border: 1px solid var(--tp-line); border-left: 3px solid color-mix(in srgb, var(--tp-gold) 60%, transparent); padding: 1em 1.2em; }
.md-typeset table:not([class]) { border-radius: 6px; border: 1px solid var(--tp-line); overflow: hidden; font-size: 0.74rem; background: var(--tp-panel); }
.md-typeset table:not([class]) th { background: var(--tp-raised); color: var(--tp-text); font-family: var(--tp-pixel); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; }
.md-typeset table:not([class]) td { border-top: 1px solid var(--tp-line); }
.md-typeset .admonition, .md-typeset details { border-radius: 6px; border-width: 1px; box-shadow: none; }
.md-typeset img { border-radius: 6px; border: 1px solid var(--tp-line); }
.md-content__inner { max-width: 46rem; }
.md-content__inner > p:first-of-type { font-size: 1.05em; color: var(--tp-text); }

/* ---------- Footer ---------- */
.tp-foot { margin-top: 3rem; }
.tp-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 0 1.2rem 2.5rem; max-width: 61rem; }
.tp-step { display: flex; flex-direction: column; gap: 0.2rem; padding: 1rem 1.2rem; border: 1px solid var(--tp-line); border-top: 2px solid color-mix(in srgb, var(--tp-gold) 50%, transparent); border-radius: 4px; background: var(--tp-panel); color: var(--tp-text); transition: border-color 0.2s; }
.tp-step:hover { border-color: var(--tp-accent); }
.tp-step small { color: var(--tp-dim); font-size: 0.65rem; display: inline-flex; gap: 0.3rem; align-items: center; font-family: var(--tp-pixel); text-transform: uppercase; letter-spacing: 0.06em; }
.tp-step small svg { width: 0.9em; height: 0.9em; fill: currentColor; }
.tp-step strong { font-family: var(--tp-title); font-weight: 400; font-size: 1.05rem; }
.tp-step--next { text-align: right; align-items: flex-end; }
.tp-foot__band { background: #050d12; position: relative; border-top: 3px double color-mix(in srgb, var(--tp-gold) 45%, transparent); }
.tp-foot__inner { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; align-items: center; padding: 2rem 1.2rem; color: #8fa9ad; }
.tp-foot__brand { display: flex; gap: 0.7rem; align-items: center; color: #eef7f6; margin-right: auto; }
.tp-foot__brand img { image-rendering: pixelated; border-radius: 3px; }
.tp-foot__brand b { display: block; font-family: var(--tp-title); font-weight: 400; font-size: 1.1rem; }
.tp-foot__brand small { display: block; font-size: 0.65rem; color: #8fa9ad; }
.tp-foot__links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; font-size: 0.66rem; font-family: var(--tp-pixel); text-transform: uppercase; letter-spacing: 0.06em; }
.tp-foot__links a, .tp-foot__credit a { color: #c8dcdc; }
.tp-foot__links a:hover, .tp-foot__credit a:hover { color: var(--tp-gold); }
.tp-foot__credit { flex-basis: 100%; margin: 0; font-size: 0.62rem; color: #587379; }

/* ---------- Landing page ---------- */
.tp { --gutter: 1.2rem; overflow-x: clip; position: relative; }
.md-main__inner:has(.tp) { margin-top: 0; max-width: none; }
.md-content:has(.tp) { max-width: none; }
.md-content__inner:has(.tp) { max-width: none; margin: 0; padding: 0; }
.md-content__inner:has(.tp)::before { display: none; }
.tp .md-grid { padding-left: var(--gutter); padding-right: var(--gutter); }
.tp h1, .tp h2, .tp h3 { font-family: var(--tp-title); font-weight: 400; color: var(--tp-text); margin: 0; letter-spacing: 0; border: 0; padding: 0; }
.tp h1::after { display: none; }
.tp p { margin: 0; }
.md-typeset .tp ul, .md-typeset .tp ol, .md-typeset .tp dl { margin: 0; padding: 0; list-style: none; }
.md-typeset .tp li, .md-typeset .tp dd { margin: 0 !important; }
.md-typeset .tp img { border: 0; border-radius: 0; }
/* (The theme centres a figure and sizes it to its content: the landing page's fill their place.) */
.md-typeset .tp figure { width: auto; max-width: none; margin: 0; align-items: stretch; }
.md-typeset .tp .tp-vitrine { width: min(14.5rem, 100%); }
.tp code { font-size: 0.85em; }
.tp-cta + .md-content__inner, .md-main:has(.tp) + .tp-foot { margin-top: 0; }

/* Shared pieces */
.tp-kicker { display: inline-flex; align-items: center; gap: 0.55rem; margin-bottom: 0.7rem !important; font-family: var(--tp-pixel); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tp-accent); }
.tp-kicker::before { content: ""; width: 1.6rem; height: 1px; background: currentColor; }
.tp-btn {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.4rem; border-radius: 3px;
  font-family: var(--tp-pixel); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff8ee !important; background: rgba(6, 20, 26, 0.55); border: 1px solid rgba(255, 220, 160, 0.35);
  text-decoration: none !important; transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.tp-btn:hover { border-color: var(--tp-gold); color: var(--tp-gold) !important; }
.tp-btn--gold { background: linear-gradient(180deg, #ffe08a, #e0ac3c); color: #241300 !important; border-color: #9a6a1a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 8px 24px rgba(255, 170, 60, 0.25); }
.tp-btn--gold:hover { color: #241300 !important; background: linear-gradient(180deg, #fff0b8, #ffc24a); }
.tp-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.8rem; }
.tp-link { display: inline-block; margin-top: 1rem; font-family: var(--tp-pixel); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tp-accent) !important; text-decoration: none !important; border-bottom: 1px solid color-mix(in srgb, var(--tp-accent) 40%, transparent); }
.tp-link:hover { border-bottom-color: var(--tp-accent); }
.tp-more { margin-top: 1.4rem !important; }
.tp-section { padding-top: 6rem; }
/* A section's head: its title on the left, a paragraph on the right, a hairline under both. */
.tp-intro { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1rem 3rem; align-items: end; padding-bottom: 1.4rem; margin-bottom: 2.4rem; border-bottom: 1px solid var(--tp-line); }
.tp-intro h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.08; }
.tp-intro > p { color: var(--tp-dim); font-size: 0.88rem; line-height: 1.7; }

/* The hero: a gallery at night, split. The words on the left; a display case lit by one spotlight on the right. */
.tp-hero { position: relative; isolation: isolate; color: #fff8ee; margin-top: 0; }
.tp-sky {
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), rgba(120, 200, 200, 0.05) calc(12.5% - 1px) 12.5%),
    linear-gradient(180deg, #06121a 0%, #0b1f29 45%, #10303a 85%, #133842 100%);
}
.tp-stars { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.tp-spot {
  position: absolute; top: -4%; right: 6%; width: 34rem; height: 110%; z-index: 1;
  background: linear-gradient(180deg, rgba(255, 226, 160, 0.30), rgba(255, 226, 160, 0.10) 60%, transparent 92%);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); transform-origin: 50% 0; filter: blur(6px);
  animation: tp-sway 11s ease-in-out infinite alternate;
}
@keyframes tp-sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
.tp-curtain {
  position: absolute; top: 0; bottom: 110px; width: clamp(2.4rem, 7vw, 6rem); z-index: 3;
  background: var(--tp-velvet-drape); background-size: 3rem 100%;
  box-shadow: inset -10px 0 18px rgba(0, 0, 0, 0.45);
  clip-path: polygon(0 0, 100% 0, 52% 46%, 64% 100%, 0 100%);
}
.tp-curtain--left { left: 0; }
.tp-curtain--right { right: 0; transform: scaleX(-1); }
.tp-curtain::after { content: ""; position: absolute; left: 0; width: 60%; top: 45%; height: 10px; background: linear-gradient(180deg, #ffe08a, #e0ac3c 50%, #9a6a1a); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); }
.tp-floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 110px; z-index: 1;
  background:
    linear-gradient(180deg, #060c10 0 6px, #e0ac3c 6px 9px, #9a6a1a 9px 11px, transparent 11px),
    radial-gradient(30% 70% at 72% 30%, rgba(255, 226, 160, 0.22), transparent 70%),
    linear-gradient(180deg, transparent 0 40px, rgba(7, 18, 26, 0.6) 80px, var(--tp-hall) 100%),
    repeating-conic-gradient(#1b2a31 0 25%, #2c434c 0 50%) 0 11px / 48px 24px;
}
.tp-hero__inner { position: relative; z-index: 4; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 2.5rem; align-items: center; padding-top: 3.5rem; padding-bottom: 8.5rem; padding-left: max(var(--gutter), 7vw) !important; padding-right: max(var(--gutter), 7vw) !important; }
.tp-tag { font-family: var(--tp-pixel); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: #ffd98a; }
.tp-title { font-size: clamp(2.5rem, 5.4vw, 4.4rem); line-height: 1.02; margin: 0.9rem 0 1.2rem !important; color: #fffaf0 !important; }
.tp-title em { font-style: italic; color: #ffc24a; }
.tp-lead { font-size: 1rem; line-height: 1.7; color: #e6f1ef; max-width: 34rem; }
.tp-showcase { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; }
/* The display case: a gold frame round a dark wall in a gold spotlight, with a sheen of glass across it. (Nothing between
   its loop and the case may start a stacking context, or the loop's screen blend would show its black.) */
.tp-vitrine {
  --c: #ffc24a;
  position: relative; margin: 0; width: min(14.5rem, 100%); aspect-ratio: 2 / 3; overflow: hidden;
  background:
    radial-gradient(52% 34% at 50% 64%, color-mix(in srgb, var(--c) 24%, transparent), color-mix(in srgb, var(--c) 8%, transparent) 55%, transparent),
    radial-gradient(36% 12% at 50% 89%, color-mix(in srgb, var(--c) 32%, transparent), transparent),
    linear-gradient(180deg, #0a1a22, var(--tp-hall) 70%);
  border: 6px solid #e0ac3c; border-image: linear-gradient(160deg, #fff0b8, #e0ac3c 30%, #9a6a1a 70%, #e0ac3c) 1;
  box-shadow: 0 0 0 2px #1a1006, 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 80px rgba(255, 194, 74, 0.18);
}
.tp-vitrine::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, 0.10) 0 18%, transparent 18% 60%, rgba(255, 255, 255, 0.05) 60% 64%, transparent 64%); }
.tp-vitrine__shade, .tp-vitrine__video { position: absolute; inset: 0; width: 100%; height: 100%; }
.tp-vitrine__shade { background: var(--tp-hall); -webkit-mask: var(--mask) center / 100% 100% no-repeat; mask: var(--mask) center / 100% 100% no-repeat; }
.tp-vitrine__video { display: block; object-fit: cover; mix-blend-mode: screen; }

/* The trophy panel under the case, stepping through the ranks. */
.tp-plate { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; }
.tp-frame {
  --c: var(--tp-common);
  position: relative; min-width: 15rem; padding: 0.65rem 1.4rem 0.75rem; text-align: center;
  font-family: var(--tp-pixel); line-height: 1.35; color: #fff; background: rgba(6, 10, 14, 0.85);
  border: 2px solid color-mix(in srgb, var(--c) 70%, transparent);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 24px color-mix(in srgb, var(--c) 25%, transparent);
  transition: border-color 0.45s, box-shadow 0.45s;
}
.tp-frame span { display: block; }
.tp-frame__rank { font-size: 0.78rem; color: var(--c); transition: color 0.45s; }
.tp-frame__what { font-size: 1.05rem; }
.tp-frame__who { font-size: 0.82rem; color: #d8d8d8; }
.tp-frame__when { font-size: 0.72rem; color: #9a9a9a; }
.tp-frame::before, .tp-frame::after { content: ""; position: absolute; width: 8px; height: 8px; top: -5px; background: var(--c); transform: rotate(45deg); opacity: 0; transition: opacity 0.45s, background 0.45s; }
.tp-frame::before { left: -5px; }
.tp-frame::after { right: -5px; }
.tp-frame[data-rank="rare"]::before, .tp-frame[data-rank="rare"]::after,
.tp-frame[data-rank="epic"]::before, .tp-frame[data-rank="epic"]::after,
.tp-frame[data-rank="legendary"]::before, .tp-frame[data-rank="legendary"]::after { opacity: 1; }
.tp-frame[data-rank="epic"], .tp-frame[data-rank="legendary"] { box-shadow: inset 0 0 0 3px rgba(6, 10, 14, 0.9), inset 0 0 0 4px color-mix(in srgb, var(--c) 55%, transparent), 0 0 30px color-mix(in srgb, var(--c) 32%, transparent); }
.tp-frame[data-rank="legendary"] { border-color: #ffd36a; }
.tp-frame__crown { position: absolute; left: 50%; top: -1.15rem; width: 1.6rem; height: 0.9rem; margin-left: -0.8rem; background: linear-gradient(180deg, #ffe08a, #e0ac3c); clip-path: polygon(0 100%, 0 20%, 25% 60%, 50% 0, 75% 60%, 100% 20%, 100% 100%); opacity: 0; transform: translateY(6px); transition: opacity 0.45s, transform 0.45s var(--tp-ease); }
.tp-frame[data-rank="legendary"] .tp-frame__crown { opacity: 1; transform: none; }
.tp-plate__dots { display: flex; gap: 0.45rem; }
.tp-plate__dots i { width: 0.5rem; height: 0.5rem; transform: rotate(45deg); background: var(--c); opacity: 0.3; transition: opacity 0.3s, transform 0.3s; }
.tp-plate__dots i.is-on { opacity: 1; transform: rotate(45deg) scale(1.3); }

/* Gallery I: the ranks as a wall of display cases, each with a museum label under it. */
.tp-section--hall { background: var(--tp-hall); padding-top: 3rem; padding-bottom: 5rem; color: #c8dcdc; }
.tp-section--hall .tp-intro { border-bottom-color: rgba(255, 206, 120, 0.13); }
.tp-section--hall h2 { color: #eef7f6; }
.tp-section--hall .tp-intro > p { color: #8fa9ad; }
.tp-section--hall .tp-kicker { color: var(--tp-gold); }
.md-typeset .tp-cases { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2rem; }
.tp-case { margin: 0; display: flex; flex-direction: column; }
/* (Nothing between a loop and its case may start a stacking context, or its screen blend would stop short of the case's
   wall and show the loop's black.) */
.tp-case__box {
  position: relative; aspect-ratio: 2 / 3; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--c) 45%, #000);
  background:
    radial-gradient(52% 34% at 50% 64%, color-mix(in srgb, var(--c) 24%, transparent), color-mix(in srgb, var(--c) 8%, transparent) 55%, transparent),
    radial-gradient(36% 12% at 50% 89%, color-mix(in srgb, var(--c) 32%, transparent), transparent),
    linear-gradient(180deg, #0a1a22, var(--tp-hall) 70%);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
}
.tp-case__box::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c); }
.tp-case__shade, .tp-case__video { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 92%; transition: transform 0.5s var(--tp-ease); }
.tp-case__shade { background: var(--tp-hall); -webkit-mask: var(--mask) center / 100% 100% no-repeat; mask: var(--mask) center / 100% 100% no-repeat; }
.tp-case__video { display: block; object-fit: cover; mix-blend-mode: screen; }
.tp-case:hover .tp-case__video, .tp-case:hover .tp-case__shade { transform: scale(1.08); }
.md-typeset .tp-label, .md-typeset .tp-shot figcaption { font-style: normal; text-align: left; max-width: none; }
/* (Each label grows to its case's foot, so the labels in a row are all as tall as the tallest.) */
.tp-label { flex: 1 0 auto; margin-top: 0.8rem; padding: 0.7rem 0.8rem 0.8rem; background: #f3ecdc; color: #2a2418; border-radius: 2px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); }
.tp-label small { display: block; font-family: var(--tp-pixel); font-size: 0.58rem; letter-spacing: 0.1em; color: #8a7a5a; }
.tp-label b { display: block; font-family: var(--tp-title); font-weight: 400; font-size: 1.15rem; color: color-mix(in srgb, var(--c) 55%, #2a2418); margin: 0.1rem 0 0.25rem; }
.tp-label span { display: block; font-size: 0.68rem; line-height: 1.5; color: #4a4232; }

/* Gallery II: pictures hung as an exhibition, one large and the rest round it, each labelled under it. */
.tp-salon { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem 1.2rem; }
.tp-salon .tp-shot { display: flex; flex-direction: column; }
.tp-salon__big { grid-column: span 2; grid-row: span 2; }
.tp-shot { margin: 0; position: relative; }
.tp-shot img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #050d12; border: 6px solid #f3ecdc; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 16px 34px rgba(0, 0, 0, 0.35); transition: box-shadow 0.3s; }
[data-md-color-scheme="default"] .tp-shot img { border-color: #fff; }
.tp-salon__big img { aspect-ratio: auto; height: 100%; flex: 1; }
.tp-shot:hover img { box-shadow: 0 0 0 1px var(--tp-gold), 0 20px 40px rgba(0, 0, 0, 0.45); }
.tp-shot figcaption { margin-top: 0.55rem; font-family: var(--tp-pixel); font-size: 0.64rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tp-dim); }

/* How it works: three plaques. */
/* (The theme gives its lists display: flow-root through a selector these can't outrank by specificity alone.) */
.md-typeset .tp-plaques { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; counter-reset: none; }
.tp-plaques li { position: relative; padding: 1.4rem 1.4rem 1.5rem; background: var(--tp-panel); border: 1px solid var(--tp-line); border-top: 3px solid color-mix(in srgb, var(--tp-gold) 60%, transparent); }
.tp-plaques span { display: block; font-family: var(--tp-title); font-size: 2.6rem; line-height: 1; color: var(--tp-accent); margin-bottom: 0.6rem; }
.tp-plaques b { display: block; font-family: var(--tp-title); font-weight: 400; font-size: 1.25rem; color: var(--tp-text); margin-bottom: 0.3rem; }
.tp-plaques p { color: var(--tp-dim); font-size: 0.8rem; line-height: 1.6; }
/* More features: eight plaques, four to a row, an icon over each name. */
.md-typeset .tp-plaques--features { grid-template-columns: repeat(4, 1fr); }
.tp-plaques--features span { font-size: 1.8rem; }
@media (max-width: 76.25em) { .md-typeset .tp-plaques--features { grid-template-columns: repeat(2, 1fr); } }


/* The adjust screen: its tabs in a strip with dots, the words beside them. */
.tp-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3.5rem; align-items: center; }
.tp-split--flip { grid-template-columns: 1.1fr 1fr; }
.tp-split h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.1; margin-bottom: 0.9rem; }
.tp-split__text { color: var(--tp-dim); font-size: 0.9rem; line-height: 1.7; }
.tp-gallery__track { display: flex; gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 0.3rem 0.1rem 0.6rem; outline: none; }
.tp-gallery__track::-webkit-scrollbar { display: none; }
.tp-gallery__track > .tp-shot { flex: 0 0 100%; scroll-snap-align: start; }
.tp-shot--ui img { aspect-ratio: 1174 / 993; }
.tp-gallery__dots { display: flex; justify-content: center; gap: 0.6rem; margin-top: 0.8rem; }
.tp-gallery__dot { width: 0.6rem; height: 0.6rem; padding: 0; border: 1px solid var(--tp-line-strong); background: transparent; transform: rotate(45deg); cursor: pointer; transition: background 0.3s, border-color 0.3s; }
.tp-gallery__dot:hover { border-color: var(--tp-accent); }
.tp-gallery__dot.is-on { background: var(--tp-accent); border-color: var(--tp-accent); }
.tp-gallery__dot:focus-visible { outline: 2px solid var(--tp-accent); outline-offset: 3px; }

/* Cabinets and shelves: a spec sheet, a big figure over each fact. */
.md-typeset .tp-specs { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--tp-line); border-bottom: 1px solid var(--tp-line); }
.tp-specs > div { padding: 1.6rem 1.4rem 1.6rem 0; }
.tp-specs > div + div { padding-left: 1.4rem; border-left: 1px solid var(--tp-line); }
.tp-specs dt { font-family: var(--tp-title); font-size: 2.6rem; line-height: 1; color: var(--tp-accent); margin-bottom: 0.8rem; }
.tp-specs dt small { font-size: 0.6em; color: var(--tp-faint); }
.tp-specs dd { color: var(--tp-dim); font-size: 0.78rem; line-height: 1.6; }
.tp-specs dd b { display: block; font-family: var(--tp-title); font-weight: 400; font-size: 1.1rem; color: var(--tp-text); margin-bottom: 0.25rem; }

/* What it works with: one row each. */
.md-typeset .tp-rows { border-top: 1px solid var(--tp-line); }
.tp-rows li { display: grid; grid-template-columns: 2.6rem 15rem 1fr; gap: 1.2rem; align-items: center; padding: 0.9rem 0.4rem; border-bottom: 1px solid var(--tp-line); transition: background 0.2s; }
.tp-rows li:hover { background: var(--tp-panel); }
.tp-rows__mark { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; overflow: hidden; border-radius: 4px; background: var(--tp-raised); border: 1px solid var(--tp-line); }
.tp-rows__mark img { width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
.tp-rows__mark--text { font-family: var(--tp-pixel); font-size: 0.78rem; color: var(--tp-accent); }
.tp-rows b { font-family: var(--tp-title); font-weight: 400; font-size: 1.15rem; color: var(--tp-text); }
.tp-rows b a { color: inherit; text-decoration: none; }
.tp-rows b a:hover { color: var(--tp-accent); }
.tp-rows span:last-child { color: var(--tp-dim); font-size: 0.82rem; }

/* Closing band: velvet at both sides, the call on the left, where it runs on the right, the gold skirting below. */
.tp-cta {
  margin-top: 6rem; padding: 4.5rem 0 5rem; position: relative; overflow: hidden; color: #e6f1ef;
  background: radial-gradient(40% 70% at 30% 0%, rgba(255, 226, 160, 0.22), transparent 70%), linear-gradient(180deg, #0b1f29, #133842);
}
.tp-cta::before { content: ""; position: absolute; inset: 0; background: var(--tp-velvet-drape) left top / 3rem 100% repeat-y, var(--tp-velvet-drape) right top / 3rem 100% repeat-y; -webkit-mask: linear-gradient(90deg, #000 0 clamp(1.4rem, 4vw, 3.5rem), transparent clamp(1.4rem, 4vw, 3.5rem) calc(100% - clamp(1.4rem, 4vw, 3.5rem)), #000 0); mask: linear-gradient(90deg, #000 0 clamp(1.4rem, 4vw, 3.5rem), transparent clamp(1.4rem, 4vw, 3.5rem) calc(100% - clamp(1.4rem, 4vw, 3.5rem)), #000 0); }
.tp-cta::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: linear-gradient(180deg, #e0ac3c 0 3px, #9a6a1a 3px 5px, transparent 5px), repeating-conic-gradient(#1b2a31 0 25%, #2c434c 0 50%) 0 5px / 32px 16px; }
.tp-cta__inner { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: center; padding-left: max(var(--gutter), 6vw) !important; padding-right: max(var(--gutter), 6vw) !important; }
.tp-cta h2 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; color: #fffaf0 !important; }
.tp-cta p { color: #c8dcdc; margin-top: 0.7rem !important; }
.tp-runs { padding: 1.4rem 1.5rem; background: rgba(5, 13, 18, 0.6); border: 1px solid rgba(255, 206, 120, 0.2); }
.tp-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.tp-table th { text-align: left; font-family: var(--tp-pixel); font-weight: 500; font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: #8fa9ad; padding: 0 0.4rem 0.6rem; }
.tp-table td { padding: 0.7rem 0.4rem; border-top: 1px solid rgba(255, 206, 120, 0.13); color: #c8dcdc; }
.tp-table td:first-child { font-family: var(--tp-title); font-size: 1rem; color: #eef7f6; }
.tp-table small { font-family: var(--tp-pixel); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tp-ember); }
.tp-needs { margin-top: 1rem !important; font-size: 0.76rem; color: #a8c2c4 !important; }
.tp-needs a { color: #ffd98a; }

/* Appearing as they come into view (only while the script runs). */
.tp.tp-anim [data-rise] { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--tp-ease), transform 0.6s var(--tp-ease); }
.tp.tp-anim [data-rise].is-in { opacity: 1; transform: none; }

/* ---------- Smaller screens ---------- */
@media (max-width: 60em) {
  .tp-hero__inner { grid-template-columns: 1fr; padding-top: 3rem; padding-bottom: 8rem; }
  .tp-spot { right: 50%; margin-right: -17rem; }
  .tp-intro, .tp-split, .tp-split--flip, .tp-cta__inner { grid-template-columns: 1fr; }
  /* The cases scroll sideways, three and a bit showing. */
  .md-typeset .tp-cases { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 0.5rem; }
  .tp-cases::-webkit-scrollbar { display: none; }
  .tp-case { flex: 0 0 34%; scroll-snap-align: start; }
  .tp-salon { grid-template-columns: 1fr 1fr; }
  .md-typeset .tp-plaques { grid-template-columns: 1fr; }
  .md-typeset .tp-specs { grid-template-columns: 1fr 1fr; }
  .tp-specs > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .tp-specs > div:nth-child(n+3) { border-top: 1px solid var(--tp-line); }
}
@media (max-width: 36em) {
  .tp-case { flex-basis: 62%; }
  .tp-salon { grid-template-columns: 1fr; }
  .tp-salon__big { grid-column: auto; grid-row: auto; }
  .tp-salon__big img { aspect-ratio: 4 / 3; height: auto; }
  .md-typeset .tp-specs { grid-template-columns: 1fr; }
  .tp-specs > div, .tp-specs > div + div { padding-left: 0; border-left: 0; }
  .tp-specs > div + div { border-top: 1px solid var(--tp-line); }
  .tp-rows li { grid-template-columns: 2.6rem 1fr; }
  .tp-rows li span:last-child { grid-column: 2; }
  .tp-steps { grid-template-columns: 1fr; }
  .tp-frame { min-width: 0; width: 100%; }
  .tp-curtain { width: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .tp.tp-anim [data-rise] { opacity: 1; transform: none; }
  .tp-gallery__track { scroll-behavior: auto; }
}

/* Pictures open large on a click (pedestals.js): a dimmed page behind the picture and its caption; a click anywhere,
   the close button or Escape closes it. */
.tp-shot img[data-zoom] { cursor: zoom-in; }
.tp-lightbox {
  position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.9rem; padding: 2rem 1rem; background: rgba(3, 10, 14, 0.9); backdrop-filter: blur(6px); cursor: zoom-out;
  opacity: 0; transition: opacity 0.25s;
}
.tp-lightbox.is-on { opacity: 1; }
.tp-lightbox img { max-width: min(94vw, 1600px); max-height: 82vh; border: 8px solid #f3ecdc; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6); transform: scale(0.97); transition: transform 0.3s var(--tp-ease); }
.tp-lightbox.is-on img { transform: none; }
.tp-lightbox p { margin: 0; max-width: 46rem; text-align: center; color: #dceaea; font-family: var(--tp-pixel); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; }
.tp-lightbox button { position: absolute; top: 1rem; right: 1rem; width: 2.2rem; height: 2.2rem; border-radius: 3px; border: 1px solid rgba(255, 220, 160, 0.3); background: rgba(6, 20, 26, 0.8); color: #fff; font-size: 1rem; line-height: 1; cursor: pointer; }
.tp-lightbox button:hover { border-color: var(--tp-gold); }