/* Stygia institutional presentation.
   One token system drives every surface. Material for MkDocs derives its
   component colours from the custom properties mapped below, so no text can
   fall back to an unreadable default on any page mode. Page modes are
   detected from stable heading identifiers, not scripts:
   - html:has(#stygia)             the root threshold page
   - html:has(#welcome-to-stygia)  the ceremonial landing page
   - everything else               a reading page                          */

/* 1. Tokens */

@font-face {
  font-family: "Crimson Pro";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/crimson-pro-latin-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Crimson Pro";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/crimson-pro-latin-italic.woff2") format("woff2");
}

:root {
  --stygia-ink: #1a1c21;
  --stygia-charcoal: #242932;
  --stygia-charcoal-deep: #171a20;
  --stygia-ivory: #f4f0e6;
  --stygia-parchment: #ece5d6;
  --stygia-crimson: #8f2638;
  --stygia-crimson-bright: #c05a6c;
  --stygia-bronze: #c8a66a;
  --stygia-bronze-soft: rgba(200, 166, 106, 0.38);
  --stygia-hairline: rgba(143, 38, 56, 0.55);

  --stygia-paper: var(--stygia-ivory);
  --stygia-text: rgba(26, 28, 33, 0.94);
  --stygia-text-soft: rgba(26, 28, 33, 0.66);
  --stygia-text-faint: rgba(26, 28, 33, 0.42);
  --stygia-line: rgba(26, 28, 33, 0.14);
  --stygia-link: var(--stygia-crimson);
  --stygia-heading: var(--stygia-charcoal);
  --stygia-code-bg: rgba(200, 166, 106, 0.16);

  --stygia-serif: "Crimson Pro", "Iowan Old Style", "Palatino Linotype", Palatino,
    "Book Antiqua", Georgia, "Times New Roman", serif;
  --stygia-sans: "Avenir Next", Avenir, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --stygia-paper: #1c1f26;
    --stygia-text: rgba(244, 240, 230, 0.92);
    --stygia-text-soft: rgba(244, 240, 230, 0.64);
    --stygia-text-faint: rgba(244, 240, 230, 0.42);
    --stygia-line: rgba(244, 240, 230, 0.14);
    --stygia-link: #d89aa6;
    --stygia-heading: var(--stygia-ivory);
    --stygia-code-bg: rgba(200, 166, 106, 0.14);
  }
}

/* The landing page keeps a ceremonial dark hall in both colour schemes. */
html:has(#welcome-to-stygia) {
  --stygia-paper: #121419;
  --stygia-text: rgba(244, 240, 230, 0.92);
  --stygia-text-soft: rgba(244, 240, 230, 0.68);
  --stygia-text-faint: rgba(244, 240, 230, 0.44);
  --stygia-line: rgba(200, 166, 106, 0.26);
  --stygia-link: var(--stygia-bronze);
  --stygia-heading: var(--stygia-ivory);
  --stygia-code-bg: rgba(200, 166, 106, 0.14);
}

/* 2. Map the tokens onto Material's own colour system. */

:root,
[data-md-color-scheme] {
  --md-primary-fg-color: var(--stygia-charcoal);
  --md-primary-fg-color--light: var(--stygia-charcoal);
  --md-primary-fg-color--dark: var(--stygia-charcoal-deep);
  --md-primary-bg-color: var(--stygia-ivory);
  --md-accent-fg-color: var(--stygia-crimson-bright);
  --md-default-bg-color: var(--stygia-paper);
  --md-default-fg-color: var(--stygia-text);
  --md-default-fg-color--light: var(--stygia-text-soft);
  --md-default-fg-color--lighter: var(--stygia-text-faint);
  --md-default-fg-color--lightest: var(--stygia-line);
  --md-typeset-color: var(--stygia-text);
  --md-typeset-a-color: var(--stygia-link);
  --md-typeset-table-color: var(--stygia-line);
  --md-typeset-table-color--light: var(--stygia-line);
  --md-typeset-kbd-color: var(--stygia-code-bg);
  --md-typeset-kbd-accent-color: var(--stygia-paper);
  --md-typeset-kbd-border-color: var(--stygia-line);
  --md-typeset-mark-color: rgba(200, 166, 106, 0.35);
  --md-code-bg-color: var(--stygia-code-bg);
  --md-code-fg-color: var(--stygia-text);
  --md-footer-bg-color: var(--stygia-charcoal);
  --md-footer-bg-color--dark: var(--stygia-charcoal-deep);
  --md-footer-fg-color: var(--stygia-ivory);
  --md-footer-fg-color--light: rgba(244, 240, 230, 0.72);
}

/* 3. Typography and base surfaces */

body {
  background: var(--md-default-bg-color);
  font-family: var(--stygia-sans);
}

.md-typeset {
  font-family: var(--stygia-serif);
  /* Crimson Pro has a small x-height; 0.93rem restores the visual size
     the layout was designed at (DEC-090). */
  font-size: 0.93rem;
  line-height: 1.7;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  color: var(--stygia-heading);
  font-family: var(--stygia-serif);
  letter-spacing: 0.015em;
}

.md-typeset h1 {
  border-bottom: 2px solid var(--stygia-hairline);
  padding-bottom: 0.45rem;
  font-weight: 600;
}

.md-typeset h2 {
  border-bottom: 1px solid var(--stygia-line);
  padding-bottom: 0.25rem;
}

.md-content__inner {
  max-width: 47rem;
  margin-inline: auto;
}

.md-header,
.md-tabs {
  background: var(--stygia-charcoal);
  color: var(--stygia-ivory);
}

.md-header__title {
  font-family: var(--stygia-sans);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.md-nav {
  font-family: var(--stygia-sans);
}

/* Collapsible navigation groups: the top level shows the twelve chapter
   groups plus the welcome page; a group expands on demand or when it
   holds the current page. The soft text token keeps labels above the
   4.5:1 contrast threshold on every surface. */
.md-nav--primary .md-nav__item--nested > .md-nav__link {
  color: var(--stygia-text-soft);
  font-weight: 700;
}

.md-nav--primary .md-nav__link--active {
  color: var(--md-accent-fg-color);
  font-weight: 700;
}

/* 4. Prose components */

.md-typeset a {
  color: var(--md-typeset-a-color);
}

.md-typeset a:hover,
.md-typeset a:focus {
  color: var(--md-accent-fg-color);
}

.md-typeset blockquote {
  border-left: 2px solid var(--stygia-bronze);
  color: var(--stygia-text);
  padding-block: 0.2rem;
}

.md-typeset table:not([class]) {
  font-family: var(--stygia-sans);
  font-size: 0.72rem;
}

.md-typeset table:not([class]) th {
  background: var(--stygia-charcoal);
  color: var(--stygia-ivory);
}

.md-typeset table:not([class]) tr:nth-child(2n) {
  background: rgba(200, 166, 106, 0.07);
}

.md-typeset .admonition,
.md-typeset details {
  border-color: var(--stygia-crimson);
  background: color-mix(in srgb, var(--stygia-paper) 88%, var(--stygia-bronze));
  font-family: var(--stygia-sans);
}

/* Keyboard focus stays visible on every interactive element. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--stygia-bronze);
  outline-offset: 2px;
}

/* 5. Imagery */

.stygia-hero-image {
  display: block;
  width: 100%;
  max-height: 34rem;
  margin: 0 0 1.8rem;
  object-fit: cover;
  border: 1px solid var(--stygia-bronze-soft);
}

.book-cover-image {
  display: block;
  width: min(100%, 26rem);
  margin: 0 auto 2rem;
  object-fit: contain;
  border: 1px solid var(--stygia-bronze-soft);
  box-shadow: 0 0.8rem 2rem rgba(23, 26, 32, 0.25);
}

/* 6. The circle gallery on the landing page. Rows follow the tree:
   The Architect's medallion, then CONAN and INTEL, then the twelve
   lenses in their fixed rows of five, four, and three. */

/* Each row keeps its exact membership at every width: rows never wrap,
   and the emblems shrink together instead. */
.stygia-circle {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: clamp(0.4rem, 2vw, 0.9rem);
  margin: 1.1rem 0;
  overflow-x: clip;
  text-align: center;
}

.stygia-circle a {
  display: grid;
  gap: 0.45rem;
  justify-items: center;
  flex: 0 1 6rem;
  min-width: 0;
  color: var(--stygia-link);
  font-family: var(--stygia-sans);
  font-size: clamp(0.44rem, 2.2vw, 0.62rem);
  font-weight: 600;
  letter-spacing: min(0.14em, 0.3vw);
  text-transform: uppercase;
  text-decoration: none;
}

.stygia-circle a > span {
  min-width: 0;
  max-width: 100%;
}

.stygia-circle img {
  width: 100%;
  max-width: 5.4rem;
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--stygia-bronze-soft);
  background: var(--stygia-charcoal-deep);
  transition: transform 125ms ease, box-shadow 125ms ease;
}

.stygia-circle-apex a {
  flex-basis: 7.6rem;
}

.stygia-circle-apex img {
  max-width: 6.8rem;
}

/* The Architect's medallion shares the coin treatment at the largest
   size; its artwork carries its own ornamental ring. */
.stygia-circle-architect a {
  flex-basis: 8.4rem;
}

.stygia-circle-architect img {
  max-width: 7.4rem;
}

.stygia-circle a:hover img,
.stygia-circle a:focus-visible img {
  transform: translateY(-0.15rem);
  box-shadow: 0 0 0 2px var(--stygia-bronze);
}


/* 7. The medallion shelf, injected by site-experience.js at the top of
   every documentation page: The Architect's medallion first, then the
   fourteen Books in fixed order, with the current page highlighted in
   place. The leading and trailing pseudo-elements centre the row when
   it fits and preserve reachability when it overflows. */

.stygia-shelf {
  display: flex;
  align-items: end;
  gap: clamp(0.55rem, 1.6vw, 1.15rem);
  padding: 0.55rem 0.9rem 0.4rem;
  background: color-mix(in srgb, var(--stygia-paper) 90%, var(--stygia-charcoal));
  border-bottom: 1px solid var(--stygia-bronze-soft);
  overflow-x: auto;
}

.stygia-shelf::before,
.stygia-shelf::after {
  content: "";
  margin: auto;
}

.stygia-shelf a {
  display: grid;
  gap: 0.2rem;
  justify-items: center;
  flex-shrink: 0;
  color: var(--stygia-text-soft);
  font-family: var(--stygia-sans);
  font-size: 0.52rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
}

/* The intelligences are acronyms; the Architect is not. */
.stygia-shelf .stygia-shelf-architect {
  text-transform: none;
}

.stygia-shelf img {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  object-fit: cover;
  opacity: 0.82;
}

.stygia-shelf a:hover img,
.stygia-shelf a:focus-visible img {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--stygia-bronze);
}

.stygia-shelf .is-current {
  color: var(--md-accent-fg-color);
}

.stygia-shelf .is-current img {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--stygia-bronze);
}

/* 8. The root threshold page */

html:has(#stygia) .md-header,
html:has(#stygia) .md-tabs,
html:has(#stygia) .md-sidebar,
html:has(#stygia) .md-footer,
html:has(#stygia) .md-top,
html:has(#stygia) .md-content__button {
  display: none;
}

html:has(#stygia) body {
  background: var(--stygia-charcoal-deep);
}

html:has(#stygia) .md-main {
  display: grid;
  min-height: 100vh;
  place-items: center;
}

html:has(#stygia) .md-main__inner {
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
}

html:has(#stygia) .md-content__inner {
  max-width: 34.5rem;
  margin: 0;
  padding: 3rem 1.5rem;
  text-align: center;
}

html:has(#stygia) .stygia-threshold-emblem {
  display: block;
  width: min(14rem, 52vw);
  height: auto;
  margin: 0 auto 2rem;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--stygia-bronze-soft), 0 1.5rem 3rem rgba(0, 0, 0, 0.55);
}

html:has(#stygia) .md-typeset p {
  text-wrap: balance;
  color: rgba(244, 240, 230, 0.82);
  font-size: 0.98rem;
  line-height: 1.75;
}

html:has(#stygia) .md-typeset a {
  color: var(--stygia-bronze);
}

html:has(#stygia) .md-typeset .stygia-threshold-enter {
  display: inline-block;
  margin-top: 1.4rem;
  padding: 0.7rem 2.2rem;
  border: 1px solid var(--stygia-bronze);
  border-radius: 2rem;
  color: var(--stygia-ivory);
  font-family: var(--stygia-sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

html:has(#stygia) .md-typeset .stygia-threshold-enter:hover,
html:has(#stygia) .md-typeset .stygia-threshold-enter:focus-visible {
  background: rgba(200, 166, 106, 0.14);
  color: var(--stygia-ivory);
}

html:has(#stygia) .md-typeset h1 {
  border-bottom: 0;
  color: var(--stygia-ivory);
  font-size: clamp(1.5rem, 4vw, 3rem);
  font-weight: 600;
  letter-spacing: 0.3em;
  /* The Architect centres the title on the gap between the y and the g,
     aligning it to the hourglass on the emblem's axis; centred text
     shifts by half this padding, so the value is twice the offset the
     word needs, measured in the rendered build. */
  padding-left: 1.3em;
}

/* 9. Small screens: spacing only. Material's drawer layout is untouched. */

@media (max-width: 34rem) {
  .md-content__inner {
    padding-inline: 0.9rem;
  }

  .stygia-circle {
    grid-template-columns: repeat(auto-fit, minmax(5.6rem, 1fr));
  }

  .stygia-circle img {
    width: 4.8rem;
    height: 4.8rem;
  }
}