/* Styled after the author's personal site (peter_career/personal-website):
   theme2 + font2 + nord highlighting.
   Light (the site's actual look): snow-storm surfaces, frost #5E81AC menu bar
   with white nav, aurora #BF616A links, Fredericka the Great headings,
   Crimson Text body, Headland One nav, Roboto Mono code.
   Dark: the nord.toml polar-night variant, same typography. */

@import url("https://fonts.googleapis.com/css2?family=Fredericka+the+Great&family=Headland+One&display=swap");

/* ---------- light: theme2 ---------- */
[data-md-color-scheme="default"] {
  /* menu bar: frost blue, white text (theme2 menu_primary / menu_text) */
  --md-primary-fg-color: #5e81ac;
  --md-primary-fg-color--light: #81a1c1;
  --md-primary-fg-color--dark: #4c6a91;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: #eceff4;

  /* accent: theme2 primary — aurora red */
  --md-accent-fg-color: #bf616a;
  --md-accent-fg-color--transparent: rgba(191, 97, 106, 0.1);

  --md-default-bg-color: #eceff4;
  --md-default-fg-color: #2e3440;
  --md-default-fg-color--light: #4c566a;
  --md-default-fg-color--lighter: #6b7489;
  --md-default-fg-color--lightest: #d8dee9;

  --md-typeset-color: #2e3440;
  --md-typeset-a-color: #bf616a;

  --md-code-bg-color: #e5e9f0;
  --md-code-fg-color: #2e3440;
  --md-code-hl-color: rgba(136, 192, 208, 0.25);

  --md-footer-bg-color: #5e81ac;
  --md-footer-bg-color--dark: #4c6a91;
  --md-footer-fg-color: #ffffff;
}

/* ---------- dark: polar night (nord.toml [dark]) ---------- */
[data-md-color-scheme="slate"] {
  --md-hue: 220; /* fallback hue; explicit colors below win */

  --md-primary-fg-color: #2e3440;
  --md-primary-fg-color--light: #3b4252;
  --md-primary-fg-color--dark: #242933;
  --md-primary-bg-color: #eceff4;

  --md-accent-fg-color: #ebcb8b;
  --md-accent-fg-color--transparent: rgba(235, 203, 139, 0.15);

  --md-default-bg-color: #2e3440;
  --md-default-fg-color: #eceff4;
  --md-default-fg-color--light: #d8dee9;
  --md-default-fg-color--lighter: #81a1c1;
  --md-default-fg-color--lightest: #434c5e;

  --md-typeset-color: #d8dee9;
  --md-typeset-a-color: #88c0d0;

  --md-code-bg-color: #3b4252;
  --md-code-fg-color: #d8dee9;
  --md-code-hl-color: rgba(136, 192, 208, 0.18);

  --md-footer-bg-color: #242933;
  --md-footer-bg-color--dark: #1e222a;
  --md-footer-fg-color: #d8dee9;

  /* tables / admonition surfaces on the raised polar-night step */
  --md-typeset-table-color: rgba(216, 222, 233, 0.12);
  --md-admonition-bg-color: #3b4252;
}

/* ---------- typography: font2 ---------- */

/* body: Crimson Text at the site's XL scale (set via theme.font in
   mkdocs.yml; serif runs small, so raise the docs base size) */
.md-typeset {
  font-size: 0.95rem;
  line-height: 1.6;
}

/* headings: Fredericka the Great, as on the site's section titles */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-family: "Fredericka the Great", cursive;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.md-typeset h1 {
  color: var(--md-default-fg-color);
}
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-family: "Crimson Text", serif;
  font-weight: 700;
}

/* nav: Headland One in the menu bar and tabs, as on the site */
.md-header__topic,
.md-header__title,
.md-tabs__link {
  font-family: "Headland One", serif;
}
.md-tabs__link {
  font-size: 0.72rem;
}

/* active menu item goes polar-night on the frost bar (theme2
   menu_text_active); dark scheme keeps its frost accent */
[data-md-color-scheme="default"] .md-tabs__link--active,
[data-md-color-scheme="default"] .md-tabs__link:hover {
  color: #2e3440;
}
[data-md-color-scheme="slate"] .md-header__title:hover,
[data-md-color-scheme="slate"] .md-tabs__link--active,
[data-md-color-scheme="slate"] .md-tabs__link:hover {
  color: #88c0d0;
}

/* links: aurora, underlined on hover like the site */
[data-md-color-scheme="default"] .md-typeset a:hover {
  color: #a1525a;
  text-decoration: underline;
}
[data-md-color-scheme="slate"] .md-typeset a:hover {
  color: #ebcb8b;
}

/* gallery images are plates of polar night in both schemes — frame them */
.md-typeset img {
  border-radius: 4px;
}
[data-md-color-scheme="default"] .md-typeset img {
  box-shadow: 0 2px 10px rgba(46, 52, 64, 0.28);
}

/* ---------- landing hero (lab v1: kellax-anatomy candidate) ---------- */

.pf-hero {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  margin: 0.5rem 0 1.5rem;
  flex-wrap: wrap;
}
.pf-hero-text {
  flex: 1 1 24rem;
  min-width: 18rem;
}
.pf-hero-fig {
  flex: 1 1 20rem;
  min-width: 16rem;
  margin: 0;
}
.pf-hero-fig img {
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(46, 52, 64, 0.18);
}
.pf-hero-fig figcaption {
  font-family: "Crimson Text", serif;
  font-style: italic;
  font-size: 0.78rem;
  color: var(--md-default-fg-color--light);
  margin-top: 0.5rem;
}
.pf-eyebrow {
  font-family: "Headland One", serif;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  color: var(--md-default-fg-color--light);
  margin-bottom: 0.2rem;
}
.pf-hero-text h1 {
  font-size: 3.2rem;
  margin: 0.1em 0 0.15em;
}
.pf-accent {
  color: #bf616a;
}
.pf-tagline {
  font-family: "Crimson Text", serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--md-typeset-color);
}

/* ---------- gallery: motion grid (lab v1) ---------- */

.pf-motion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem;
  margin: 1rem 0 2rem;
}
.pf-motion-item {
  margin: 0;
}
.pf-motion-item video {
  width: 100%;
  display: block;
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(46, 52, 64, 0.18);
}
.pf-motion-item figcaption {
  font-family: "Crimson Text", serif;
  font-style: italic;
  font-size: 0.78rem;
  color: var(--md-default-fg-color--light);
  margin-top: 0.4rem;
}

.pf-motion-item.pf-wide {
  grid-column: 1 / -1;
}
.pf-motion-item.pf-wide video {
  max-width: 640px;
  margin: 0 auto;
}

/* ---------- gallery: banner tiles + uniform stills grid (lab v2) ---------- */

.pf-banner-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.4rem;
  margin: 1rem 0 1.5rem;
}
.pf-banner-grid figure,
.pf-stills-grid figure {
  margin: 0;
}
.pf-banner-grid p,
.pf-stills-grid p {
  margin: 0;
}
.pf-banner-grid img {
  width: 100%;
  display: block;
  border-radius: 2px;
}
.pf-banner-grid figcaption {
  font-family: "Crimson Text", serif;
  font-style: italic;
  font-size: 0.68rem;
  line-height: 1.25;
  text-align: center;
  color: var(--md-default-fg-color--light);
  margin-top: 0.25rem;
}

.pf-stills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem;
  margin: 1rem 0 2rem;
}
.pf-stills-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  /* letterbox in the figures' own surface color, so odd aspects sit
     centered in a uniform box instead of breaking the grid */
  background: #2e3440;
  border-radius: 2px;
  display: block;
}
.pf-stills-grid figcaption {
  font-family: "Crimson Text", serif;
  font-style: italic;
  font-size: 0.78rem;
  color: var(--md-default-fg-color--light);
  margin-top: 0.4rem;
}

/* ---------- admonitions: nord palette (R7) ----------
   Light borders = nord hue with lightness lowered until >= 3:1 on the
   nord6 field (computed, not eyeballed); dark borders = native nord steps
   (all >= 3:1 on nord0). Title bar = 12% tint; icon = border hue. */

[data-md-color-scheme="default"] {
  --pf-adm-note: #5e81ac;      /* nord10 native */
  --pf-adm-abstract: #4392a9;  /* from nord8 */
  --pf-adm-tip: #589291;       /* from nord7 */
  --pf-adm-success: #709253;   /* from nord14 */
  --pf-adm-question: #668cb3;  /* from nord9 */
  --pf-adm-warning: #c87156;   /* from nord12 (nord13 yellow unreadable on light) */
  --pf-adm-danger: #bf616a;    /* nord11 native */
  --pf-adm-example: #a77a9f;   /* from nord15 */
  --pf-adm-quote: #4c566a;     /* nord3 */
}
[data-md-color-scheme="slate"] {
  --pf-adm-note: #5e81ac;
  --pf-adm-abstract: #88c0d0;
  --pf-adm-tip: #8fbcbb;
  --pf-adm-success: #a3be8c;
  --pf-adm-question: #81a1c1;
  --pf-adm-warning: #ebcb8b;   /* nord13 claims its warning role in dark */
  --pf-adm-danger: #bf616a;
  --pf-adm-example: #b48ead;
  --pf-adm-quote: #d8dee9;
}

.md-typeset .admonition, .md-typeset details { border-width: 1px; }

.md-typeset .admonition.note, .md-typeset details.note,
.md-typeset .admonition.seealso, .md-typeset details.seealso {
  border-color: var(--pf-adm-note);
}
.md-typeset .note > .admonition-title, .md-typeset .note > summary,
.md-typeset .seealso > .admonition-title, .md-typeset .seealso > summary {
  background-color: color-mix(in srgb, var(--pf-adm-note) 12%, transparent);
}
.md-typeset .note > .admonition-title::before, .md-typeset .note > summary::before,
.md-typeset .seealso > .admonition-title::before, .md-typeset .seealso > summary::before {
  background-color: var(--pf-adm-note);
}

.md-typeset .admonition.abstract, .md-typeset details.abstract,
.md-typeset .admonition.summary, .md-typeset details.summary,
.md-typeset .admonition.tldr, .md-typeset details.tldr,
.md-typeset .admonition.info, .md-typeset details.info,
.md-typeset .admonition.todo, .md-typeset details.todo {
  border-color: var(--pf-adm-abstract);
}
.md-typeset .abstract > .admonition-title, .md-typeset .abstract > summary,
.md-typeset .summary > .admonition-title, .md-typeset .summary > summary,
.md-typeset .tldr > .admonition-title, .md-typeset .tldr > summary,
.md-typeset .info > .admonition-title, .md-typeset .info > summary,
.md-typeset .todo > .admonition-title, .md-typeset .todo > summary {
  background-color: color-mix(in srgb, var(--pf-adm-abstract) 12%, transparent);
}
.md-typeset .abstract > .admonition-title::before, .md-typeset .abstract > summary::before,
.md-typeset .summary > .admonition-title::before, .md-typeset .summary > summary::before,
.md-typeset .tldr > .admonition-title::before, .md-typeset .tldr > summary::before,
.md-typeset .info > .admonition-title::before, .md-typeset .info > summary::before,
.md-typeset .todo > .admonition-title::before, .md-typeset .todo > summary::before {
  background-color: var(--pf-adm-abstract);
}

.md-typeset .admonition.tip, .md-typeset details.tip,
.md-typeset .admonition.hint, .md-typeset details.hint,
.md-typeset .admonition.important, .md-typeset details.important {
  border-color: var(--pf-adm-tip);
}
.md-typeset .tip > .admonition-title, .md-typeset .tip > summary,
.md-typeset .hint > .admonition-title, .md-typeset .hint > summary,
.md-typeset .important > .admonition-title, .md-typeset .important > summary {
  background-color: color-mix(in srgb, var(--pf-adm-tip) 12%, transparent);
}
.md-typeset .tip > .admonition-title::before, .md-typeset .tip > summary::before,
.md-typeset .hint > .admonition-title::before, .md-typeset .hint > summary::before,
.md-typeset .important > .admonition-title::before, .md-typeset .important > summary::before {
  background-color: var(--pf-adm-tip);
}

.md-typeset .admonition.success, .md-typeset details.success,
.md-typeset .admonition.check, .md-typeset details.check,
.md-typeset .admonition.done, .md-typeset details.done {
  border-color: var(--pf-adm-success);
}
.md-typeset .success > .admonition-title, .md-typeset .success > summary,
.md-typeset .check > .admonition-title, .md-typeset .check > summary,
.md-typeset .done > .admonition-title, .md-typeset .done > summary {
  background-color: color-mix(in srgb, var(--pf-adm-success) 12%, transparent);
}
.md-typeset .success > .admonition-title::before, .md-typeset .success > summary::before,
.md-typeset .check > .admonition-title::before, .md-typeset .check > summary::before,
.md-typeset .done > .admonition-title::before, .md-typeset .done > summary::before {
  background-color: var(--pf-adm-success);
}

.md-typeset .admonition.question, .md-typeset details.question,
.md-typeset .admonition.help, .md-typeset details.help,
.md-typeset .admonition.faq, .md-typeset details.faq {
  border-color: var(--pf-adm-question);
}
.md-typeset .question > .admonition-title, .md-typeset .question > summary,
.md-typeset .help > .admonition-title, .md-typeset .help > summary,
.md-typeset .faq > .admonition-title, .md-typeset .faq > summary {
  background-color: color-mix(in srgb, var(--pf-adm-question) 12%, transparent);
}
.md-typeset .question > .admonition-title::before, .md-typeset .question > summary::before,
.md-typeset .help > .admonition-title::before, .md-typeset .help > summary::before,
.md-typeset .faq > .admonition-title::before, .md-typeset .faq > summary::before {
  background-color: var(--pf-adm-question);
}

.md-typeset .admonition.warning, .md-typeset details.warning,
.md-typeset .admonition.caution, .md-typeset details.caution,
.md-typeset .admonition.attention, .md-typeset details.attention {
  border-color: var(--pf-adm-warning);
}
.md-typeset .warning > .admonition-title, .md-typeset .warning > summary,
.md-typeset .caution > .admonition-title, .md-typeset .caution > summary,
.md-typeset .attention > .admonition-title, .md-typeset .attention > summary {
  background-color: color-mix(in srgb, var(--pf-adm-warning) 12%, transparent);
}
.md-typeset .warning > .admonition-title::before, .md-typeset .warning > summary::before,
.md-typeset .caution > .admonition-title::before, .md-typeset .caution > summary::before,
.md-typeset .attention > .admonition-title::before, .md-typeset .attention > summary::before {
  background-color: var(--pf-adm-warning);
}

.md-typeset .admonition.danger, .md-typeset details.danger,
.md-typeset .admonition.error, .md-typeset details.error,
.md-typeset .admonition.failure, .md-typeset details.failure,
.md-typeset .admonition.fail, .md-typeset details.fail,
.md-typeset .admonition.missing, .md-typeset details.missing,
.md-typeset .admonition.bug, .md-typeset details.bug {
  border-color: var(--pf-adm-danger);
}
.md-typeset .danger > .admonition-title, .md-typeset .danger > summary,
.md-typeset .error > .admonition-title, .md-typeset .error > summary,
.md-typeset .failure > .admonition-title, .md-typeset .failure > summary,
.md-typeset .fail > .admonition-title, .md-typeset .fail > summary,
.md-typeset .missing > .admonition-title, .md-typeset .missing > summary,
.md-typeset .bug > .admonition-title, .md-typeset .bug > summary {
  background-color: color-mix(in srgb, var(--pf-adm-danger) 12%, transparent);
}
.md-typeset .danger > .admonition-title::before, .md-typeset .danger > summary::before,
.md-typeset .error > .admonition-title::before, .md-typeset .error > summary::before,
.md-typeset .failure > .admonition-title::before, .md-typeset .failure > summary::before,
.md-typeset .fail > .admonition-title::before, .md-typeset .fail > summary::before,
.md-typeset .missing > .admonition-title::before, .md-typeset .missing > summary::before,
.md-typeset .bug > .admonition-title::before, .md-typeset .bug > summary::before {
  background-color: var(--pf-adm-danger);
}

.md-typeset .admonition.example, .md-typeset details.example {
  border-color: var(--pf-adm-example);
}
.md-typeset .example > .admonition-title, .md-typeset .example > summary {
  background-color: color-mix(in srgb, var(--pf-adm-example) 12%, transparent);
}
.md-typeset .example > .admonition-title::before, .md-typeset .example > summary::before {
  background-color: var(--pf-adm-example);
}

.md-typeset .admonition.quote, .md-typeset details.quote,
.md-typeset .admonition.cite, .md-typeset details.cite {
  border-color: var(--pf-adm-quote);
}
.md-typeset .quote > .admonition-title, .md-typeset .quote > summary,
.md-typeset .cite > .admonition-title, .md-typeset .cite > summary {
  background-color: color-mix(in srgb, var(--pf-adm-quote) 12%, transparent);
}
.md-typeset .quote > .admonition-title::before, .md-typeset .quote > summary::before,
.md-typeset .cite > .admonition-title::before, .md-typeset .cite > summary::before {
  background-color: var(--pf-adm-quote);
}

/* ---------- header + tabs read as ONE frost block (R9) ---------- */

.md-header { box-shadow: none; }
.md-tabs { box-shadow: none; }
.md-header__topic { font-family: "Headland One", serif; }
.md-tabs__link {
  font-family: "Headland One", serif;
  font-size: 0.72rem;
  opacity: 0.8;
}
.md-tabs__item--active .md-tabs__link,
.md-tabs__link--active {
  color: #2e3440;   /* the personal site's active-nav ink on frost */
  opacity: 1;
}
[data-md-color-scheme="slate"] .md-tabs__item--active .md-tabs__link,
[data-md-color-scheme="slate"] .md-tabs__link--active {
  color: #eceff4;
}

/* caption emphasis: the one representative knob per demo, lifted to full
   ink (Crimson 600 italic) against the muted caption line */
.pf-motion-item figcaption strong,
.pf-stills-grid figcaption strong,
.pf-hero-fig figcaption strong {
  color: var(--md-default-fg-color);
  font-weight: 600;
}