@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&family=Bitcount+Grid+Single:wght@100..900&display=swap');
/* ============================================================
   ŚWIAT AUGUSTYNA — GLOBAL DESIGN SYSTEM
   ============================================================ */

:root {
  /* Silnik design tokens */
  --sa-paper: #F0EEE9;
  --sa-ink: #373B32;
  --sa-green: #4A6A1D;
  --sa-orange: #FFB81C;
  --sa-turquoise: #3F9B96;

  /* Flowershow typography */
  --font-heading: "Space Grotesk", sans-serif;
  --font-body: "Space Grotesk", sans-serif;

  /* Sharper archive-like interface */
  --radius: 0.15rem;

  /* LIGHT THEME */
  --color-l-background: #F0EEE9;
  --color-l-foreground: #4A6A1D;
  --color-l-accent: #FFB81C;

  /* DARK THEME */
  --color-d-background: #0c0a09;
  --color-d-foreground: #d6d3d1;
  --color-d-accent: #FFB81C;
}

.page-hero {
  font-family: var(--font-body);
}

/* ==========================================================
   ŚWIAT AUGUSTYNA — SILNIK HERO
   PRINTED ARCHIVE DOSSIER
   ========================================================== */

.sa-engine-hero {
  position: relative;

  width: min(100%, 1120px);

  margin: 2.5rem auto 3rem;
  padding: 0;

  box-sizing: border-box;

  color: var(--sa-ink);

  background:
    linear-gradient(
      180deg,
      #f5f1e7 0%,
      #eee8db 100%
    );

  border: 1px solid rgba(55, 59, 50, 0.42);
  border-radius: 0;

  box-shadow:
    7px 9px 0 rgba(55, 59, 50, 0.08),
    0 14px 34px rgba(55, 59, 50, 0.10);

  overflow: hidden;
}


/* ----------------------------------------------------------
   TURQUOISE ARCHIVE BINDING / STRUCTURAL BAND
   ---------------------------------------------------------- */

.sa-engine-hero::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;
  bottom: 0;

  width: 18px;

  background: var(--sa-turquoise);

  border-right: 1px solid rgba(55, 59, 50, 0.28);

  pointer-events: none;
}


/* small orange registration mark */

.sa-engine-hero::after {
  content: "";

  position: absolute;

  top: 26px;
  left: 18px;

  width: 58px;
  height: 5px;

  background: var(--sa-orange);

  pointer-events: none;
}


/* ==========================================================
   PRINTED DOCUMENT HEADER
   ========================================================== */

.sa-engine-topbar {
  position: relative;

  min-height: auto;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 1rem;

  padding:
    1.15rem
    2rem
    1rem
    3rem;

  box-sizing: border-box;

  background: transparent;

  border-bottom: 1px solid rgba(55, 59, 50, 0.25);

  color: var(--sa-ink);

  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 650;

  letter-spacing: 0.13em;
  text-transform: uppercase;
}


/* document number */

.sa-engine-code {
  opacity: 0.72;
}


/* replace electronic "status" feeling with printed notation */

.sa-engine-status {
  display: none !important;
}


/* printed orange registration dot — not glowing */

.sa-engine-status i {
  width: 7px;
  height: 7px;

  display: inline-block;

  border-radius: 50%;

  background: var(--sa-orange);

  box-shadow: none;
}


/* ==========================================================
   MAIN PRINTED SHEET
   ========================================================== */

.sa-engine-screen {
  position: relative;

  min-height: 390px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;

  padding:
    4rem
    clamp(3rem, 7vw, 7rem)
    4.3rem;

  box-sizing: border-box;

  overflow: hidden;

  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 31px,
      rgba(55, 59, 50, 0.035) 32px
    ),
    linear-gradient(
      90deg,
      rgba(63, 155, 150, 0.055),
      transparent 22%
    ),
    #f4efe3;

  border: 0;
  border-radius: 0;

  box-shadow: none;
}


/* ----------------------------------------------------------
   REGISTRATION CORNERS
   Orange = printed annotation
   Turquoise = structural/index mark
   ---------------------------------------------------------- */

.sa-engine-screen::before,
.sa-engine-screen::after {
  content: "";

  position: absolute;

  width: 44px;
  height: 44px;

  pointer-events: none;
}


.sa-engine-screen::before {
  top: 28px;
  left: 34px;

  border-top: 4px solid var(--sa-turquoise);
  border-left: 4px solid var(--sa-turquoise);
}


.sa-engine-screen::after {
  right: 34px;
  bottom: 28px;

  border-right: 4px solid var(--sa-orange);
  border-bottom: 4px solid var(--sa-orange);
}


/* ==========================================================
   TYPOGRAPHY
   Entirely printed — Space Grotesk
   ========================================================== */

.sa-engine-kicker {
  position: relative;

  margin: 0 0 1.4rem;

  padding-left: 1rem;

  color: var(--sa-orange);

  font-family: var(--font-body);
  font-size: clamp(.72rem, 1vw, .84rem);
  font-weight: 700;

  letter-spacing: .16em;
  text-align: left;
  text-transform: uppercase;
}


/* turquoise classification bar */

.sa-engine-kicker::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0.05em;
  bottom: 0.05em;

  width: 5px;

  background: var(--sa-turquoise);
}


/* ----------------------------------------------------------
   TITLE
   ---------------------------------------------------------- */

.sa-engine-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  margin: 0;

  color: var(--sa-ink);

  font-family: var(--font-heading);

  text-align: left;

  line-height: 0.92;
}


.sa-engine-title span {
  font-size: clamp(2.2rem, 4vw, 3.7rem);
  font-weight: 400;

  letter-spacing: -0.035em;
}


.sa-engine-title strong {
  max-width: 850px;

  margin-top: 0.06em;

  color: var(--sa-green);

  font-size: clamp(3.3rem, 7vw, 6.6rem);
  font-weight: 650;

  letter-spacing: -0.06em;
}


/* ==========================================================
   PRINTED REGISTRATION RULE
   ========================================================== */

.sa-engine-rule {
  position: relative;

  width: min(520px, 68%);
  height: 10px;

  margin: 2.5rem 0 1.7rem;
}


/* thin ink rule */

.sa-engine-rule::before {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  top: 4px;

  height: 1px;

  background: rgba(55, 59, 50, 0.30);
}


/* orange printed blocks */

.sa-engine-rule span {
  position: absolute;

  left: 0;
  top: 0;

  width: 48%;
  height: 9px;

  transform: none;

  background:
    linear-gradient(
      90deg,
      var(--sa-orange) 0 16%,
      transparent 16% 20%,
      var(--sa-orange) 20% 67%,
      transparent 67% 71%,
      var(--sa-orange) 71% 100%
    );
}


.sa-engine-rule span::before,
.sa-engine-rule span::after {
  display: none;
}


/* ==========================================================
   TAXONOMY / DOCUMENT FOOTNOTE
   ========================================================== */

.sa-engine-subtitle {
  margin: 0 !important;

  color: var(--sa-ink) !important;

  font-family: var(--font-body) !important;

  font-size: clamp(.74rem, 1.1vw, .88rem) !important;
  font-weight: 650 !important;

  letter-spacing: .12em;
  line-height: 1.6 !important;

  text-align: left;
  text-transform: uppercase;

  opacity: 0.72;
}


/* ==========================================================
   DOCUMENT FOOTER
   ========================================================== */

.sa-engine-footer {
  position: relative;

  min-height: 58px;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;

  gap: 20px;

  padding:
    0.9rem
    2rem
    0.9rem
    3rem;

  box-sizing: border-box;

  background:
    linear-gradient(
      90deg,
      rgba(63, 155, 150, 0.12),
      transparent 42%
    );

  border-top: 1px solid rgba(55, 59, 50, 0.26);
}


/* printed metadata */

.sa-engine-id {
  display: flex;
  align-items: baseline;

  gap: 9px;

  font-family: var(--font-body);

  text-transform: uppercase;
}


.sa-engine-id span {
  color: var(--sa-ink);

  font-size: 0.58rem;
  font-weight: 600;

  letter-spacing: .16em;

  opacity: 0.48;
}


.sa-engine-id strong {
  color: var(--sa-green);

  font-size: 0.72rem;
  font-weight: 700;

  letter-spacing: .10em;
}


.sa-engine-id-right {
  justify-content: flex-end;
}


/* ----------------------------------------------------------
   Former indicator lamps:
   now three printed registration marks
   ---------------------------------------------------------- */

.sa-engine-lights {
  display: flex;
  align-items: center;

  gap: 7px;

  padding: 0;

  background: none;

  border: 0;
  border-radius: 0;

  box-shadow: none;
}


.sa-engine-lights span {
  width: 18px;
  height: 5px;

  display: block;

  border: 0;
  border-radius: 0;

  background: var(--sa-turquoise);

  box-shadow: none;
}


.sa-engine-lights span:nth-child(2) {
  background: var(--sa-orange);

  box-shadow: none;
}


.sa-engine-lights span:nth-child(3) {
  background: var(--sa-green);
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 700px) {

  .sa-engine-hero {
    margin: 1.5rem auto 2.25rem;

    box-shadow:
      4px 6px 0 rgba(55, 59, 50, 0.08);
  }


  .sa-engine-hero::before {
    width: 10px;
  }


  .sa-engine-hero::after {
    left: 10px;
    width: 42px;
  }


  .sa-engine-topbar {
    padding:
      0.9rem
      1rem
      0.85rem
      1.7rem;

    font-size: 0.56rem;
    letter-spacing: 0.10em;
  }


  .sa-engine-screen {
    min-height: 330px;

    padding:
      3.4rem
      1.7rem
      3.3rem;
  }


  .sa-engine-screen::before,
  .sa-engine-screen::after {
    width: 28px;
    height: 28px;
  }


  .sa-engine-screen::before {
    top: 18px;
    left: 20px;
  }


  .sa-engine-screen::after {
    right: 20px;
    bottom: 18px;
  }


  .sa-engine-title span {
    font-size: clamp(1.8rem, 8vw, 2.6rem);
  }


  .sa-engine-title strong {
    font-size: clamp(2.9rem, 13vw, 4.6rem);
  }


  .sa-engine-rule {
    width: 82%;
    margin-top: 2rem;
  }


  .sa-engine-footer {
    grid-template-columns: 1fr auto;

    gap: 10px;

    padding:
      0.8rem
      1rem
      0.8rem
      1.7rem;
  }


  .sa-engine-id-right {
    display: none;
  }

}
/* ============================================================
   ŚWIAT AUGUSTYNA — CATEGORY CATALOGUE SYSTEM
   One shared library-card design for all 8 archive floors.

   IMPORTANT:
   KSIĄŻKI and WSPÓLNOTY support both literal Unicode and
   percent-encoded hrefs, because browsers/frameworks may expose
   those URLs differently in the DOM.
   ============================================================ */


/* ============================================================
   1. CATEGORY IDENTITY
   Only these small variable blocks differ between floors.
   ============================================================ */

/* ---------- O · LUDZIE ---------- */
body:has(
    .site-tree-item-self.is-current[href$="/Ludzie/Ludzie"]
) {
  --catalog-code: "O";
  --catalog-form: "FORM. O-76   ·   KARTA KATALOGOWA   ·   DZIAŁ O / LUDZIE";
  --catalog-paper-1: #F8F2DA;
  --catalog-paper-2: #F5EED3;
  --catalog-ink: #4A4737;
  --catalog-rule: rgba(78, 69, 47, 0.42);
}
/* ---------- M · MIEJSCA ---------- */
body:has(
    .site-tree-item-self.is-current[href$="/Miejsca/Miejsca"]
) {
  --catalog-code: "M";
  --catalog-form: "FORM. M-76   ·   KARTA KATALOGOWA   ·   DZIAŁ M / MIEJSCA";
  --catalog-paper-1: #E8ECD8;
  --catalog-paper-2: #E0E7CF;
  --catalog-ink: #414A38;
  --catalog-rule: rgba(66, 82, 55, 0.40);
}
/* ---------- K · KSIĄŻKI ---------- */
body:has(
    .site-tree-item-self.is-current[href$="/Książki/Książki"],
    .site-tree-item-self.is-current[href$="/Ksi%C4%85%C5%BCki/Ksi%C4%85%C5%BCki"]
) {
  --catalog-code: "K";
  --catalog-form: "FORM. K-76   ·   KARTA KATALOGOWA   ·   DZIAŁ K / KSIĄŻKI";
  --catalog-paper-1: #F2E6BF;
  --catalog-paper-2: #ECDDAD;
  --catalog-ink: #514731;
  --catalog-rule: rgba(88, 71, 42, 0.40);
}
/* ---------- A · ARTEFAKTY ---------- */
body:has(
    .site-tree-item-self.is-current[href$="/Artefakty/Artefakty"]
) {
  --catalog-code: "A";
  --catalog-form: "FORM. A-76   ·   KARTA KATALOGOWA   ·   DZIAŁ A / ARTEFAKTY";
  --catalog-paper-1: #E7E4DC;
  --catalog-paper-2: #DDDAD1;
  --catalog-ink: #45443E;
  --catalog-rule: rgba(67, 65, 57, 0.38);
}
/* ---------- W · WYDARZENIA ---------- */
body:has(
    .site-tree-item-self.is-current[href$="/Wydarzenia/Wydarzenia"]
) {
  --catalog-code: "W";
  --catalog-form: "FORM. W-76   ·   KARTA KATALOGOWA   ·   DZIAŁ W / WYDARZENIA";
  --catalog-paper-1: #EBCFC6;
  --catalog-paper-2: #E4C2B8;
  --catalog-ink: #57413B;
  --catalog-rule: rgba(91, 59, 52, 0.38);
}
/* ---------- S · WSPÓLNOTY ---------- */
body:has(
    .site-tree-item-self.is-current[href$="/Wspólnoty/Wspólnoty"],
    .site-tree-item-self.is-current[href$="/Wsp%C3%B3lnoty/Wsp%C3%B3lnoty"]
) {
  --catalog-code: "S";
  --catalog-form: "FORM. S-76   ·   KARTA KATALOGOWA   ·   DZIAŁ S / WSPÓLNOTY";
  --catalog-paper-1: #E9DDC5;
  --catalog-paper-2: #DFD0B4;
  --catalog-ink: #51493C;
  --catalog-rule: rgba(82, 68, 47, 0.39);
}
/* ---------- R · RELIGIE ---------- */
body:has(
    .site-tree-item-self.is-current[href$="/Religie/Religie"]
) {
  --catalog-code: "R";
  --catalog-form: "FORM. R-76   ·   KARTA KATALOGOWA   ·   DZIAŁ R / RELIGIE";
  --catalog-paper-1: #E2DDE5;
  --catalog-paper-2: #D9D2DD;
  --catalog-ink: #49434D;
  --catalog-rule: rgba(71, 62, 75, 0.38);
}
/* ---------- I · IDEE ---------- */
body:has(
    .site-tree-item-self.is-current[href$="/Idee/Idee"]
) {
  --catalog-code: "I";
  --catalog-form: "FORM. I-76   ·   KARTA KATALOGOWA   ·   DZIAŁ I / IDEE";
  --catalog-paper-1: #DDE7E8;
  --catalog-paper-2: #D2DFE0;
  --catalog-ink: #3E4A4B;
  --catalog-rule: rgba(57, 76, 78, 0.38);
}


/* ============================================================
   2. CARD
   ============================================================ */

body:has(
    .site-tree-item-self.is-current[href$="/Ludzie/Ludzie"],
    .site-tree-item-self.is-current[href$="/Miejsca/Miejsca"],
    .site-tree-item-self.is-current[href$="/Książki/Książki"],
    .site-tree-item-self.is-current[href$="/Ksi%C4%85%C5%BCki/Ksi%C4%85%C5%BCki"],
    .site-tree-item-self.is-current[href$="/Artefakty/Artefakty"],
    .site-tree-item-self.is-current[href$="/Wydarzenia/Wydarzenia"],
    .site-tree-item-self.is-current[href$="/Wspólnoty/Wspólnoty"],
    .site-tree-item-self.is-current[href$="/Wsp%C3%B3lnoty/Wsp%C3%B3lnoty"],
    .site-tree-item-self.is-current[href$="/Religie/Religie"],
    .site-tree-item-self.is-current[href$="/Idee/Idee"]
)
.rendered-mdx:has(> .overflow-x-auto table) {
  position: relative;
  margin-top: 1.5rem;
  padding: 2.25rem 2.35rem 2.6rem;
  box-sizing: border-box;

  color: var(--catalog-ink);

  background:
    linear-gradient(
      rgba(255, 255, 255, 0.04),
      rgba(255, 255, 255, 0.04)
    ),
    linear-gradient(
      var(--catalog-paper-1),
      var(--catalog-paper-2)
    );

  border: 1px solid var(--catalog-rule);
  border-radius: 0;

  box-shadow:
    7px 9px 0 rgba(64, 55, 39, 0.10);
}


/* ============================================================
   3. PAPER RULING
   ============================================================ */

body:has(
    .site-tree-item-self.is-current[href$="/Ludzie/Ludzie"],
    .site-tree-item-self.is-current[href$="/Miejsca/Miejsca"],
    .site-tree-item-self.is-current[href$="/Książki/Książki"],
    .site-tree-item-self.is-current[href$="/Ksi%C4%85%C5%BCki/Ksi%C4%85%C5%BCki"],
    .site-tree-item-self.is-current[href$="/Artefakty/Artefakty"],
    .site-tree-item-self.is-current[href$="/Wydarzenia/Wydarzenia"],
    .site-tree-item-self.is-current[href$="/Wspólnoty/Wspólnoty"],
    .site-tree-item-self.is-current[href$="/Wsp%C3%B3lnoty/Wsp%C3%B3lnoty"],
    .site-tree-item-self.is-current[href$="/Religie/Religie"],
    .site-tree-item-self.is-current[href$="/Idee/Idee"]
)
.rendered-mdx:has(> .overflow-x-auto table)::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;

  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 2.05rem,
      var(--catalog-rule) 2.07rem
    );
}

body:has(
    .site-tree-item-self.is-current[href$="/Ludzie/Ludzie"],
    .site-tree-item-self.is-current[href$="/Miejsca/Miejsca"],
    .site-tree-item-self.is-current[href$="/Książki/Książki"],
    .site-tree-item-self.is-current[href$="/Ksi%C4%85%C5%BCki/Ksi%C4%85%C5%BCki"],
    .site-tree-item-self.is-current[href$="/Artefakty/Artefakty"],
    .site-tree-item-self.is-current[href$="/Wydarzenia/Wydarzenia"],
    .site-tree-item-self.is-current[href$="/Wspólnoty/Wspólnoty"],
    .site-tree-item-self.is-current[href$="/Wsp%C3%B3lnoty/Wsp%C3%B3lnoty"],
    .site-tree-item-self.is-current[href$="/Religie/Religie"],
    .site-tree-item-self.is-current[href$="/Idee/Idee"]
)
.rendered-mdx > * {
  position: relative;
  z-index: 1;
}


/* ============================================================
   4. FORM HEADER
   ============================================================ */

body:has(
    .site-tree-item-self.is-current[href$="/Ludzie/Ludzie"],
    .site-tree-item-self.is-current[href$="/Miejsca/Miejsca"],
    .site-tree-item-self.is-current[href$="/Książki/Książki"],
    .site-tree-item-self.is-current[href$="/Ksi%C4%85%C5%BCki/Ksi%C4%85%C5%BCki"],
    .site-tree-item-self.is-current[href$="/Artefakty/Artefakty"],
    .site-tree-item-self.is-current[href$="/Wydarzenia/Wydarzenia"],
    .site-tree-item-self.is-current[href$="/Wspólnoty/Wspólnoty"],
    .site-tree-item-self.is-current[href$="/Wsp%C3%B3lnoty/Wsp%C3%B3lnoty"],
    .site-tree-item-self.is-current[href$="/Religie/Religie"],
    .site-tree-item-self.is-current[href$="/Idee/Idee"]
)
.rendered-mdx:has(> .overflow-x-auto table)::after {
  content: var(--catalog-form);
  display: block;
  margin: 0 0 1.4rem;
  padding-bottom: 0.55rem;

  border-bottom: 2px solid var(--catalog-rule);

  color: var(--catalog-ink);
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}


/* ============================================================
   5. DESCRIPTION
   ============================================================ */

body:has(
    .site-tree-item-self.is-current[href$="/Ludzie/Ludzie"],
    .site-tree-item-self.is-current[href$="/Miejsca/Miejsca"],
    .site-tree-item-self.is-current[href$="/Książki/Książki"],
    .site-tree-item-self.is-current[href$="/Ksi%C4%85%C5%BCki/Ksi%C4%85%C5%BCki"],
    .site-tree-item-self.is-current[href$="/Artefakty/Artefakty"],
    .site-tree-item-self.is-current[href$="/Wydarzenia/Wydarzenia"],
    .site-tree-item-self.is-current[href$="/Wspólnoty/Wspólnoty"],
    .site-tree-item-self.is-current[href$="/Wsp%C3%B3lnoty/Wsp%C3%B3lnoty"],
    .site-tree-item-self.is-current[href$="/Religie/Religie"],
    .site-tree-item-self.is-current[href$="/Idee/Idee"]
)
.rendered-mdx > p:first-of-type {
  max-width: 760px;
  margin: 0 0 1.8rem;
  padding-bottom: 1rem;

  border-bottom: 1px solid var(--catalog-rule);

  color: var(--catalog-ink);
  font-size: 1rem;
  line-height: 1.5;
}


/* ============================================================
   6. TABLE
   ============================================================ */

body:has(
    .site-tree-item-self.is-current[href$="/Ludzie/Ludzie"],
    .site-tree-item-self.is-current[href$="/Miejsca/Miejsca"],
    .site-tree-item-self.is-current[href$="/Książki/Książki"],
    .site-tree-item-self.is-current[href$="/Ksi%C4%85%C5%BCki/Ksi%C4%85%C5%BCki"],
    .site-tree-item-self.is-current[href$="/Artefakty/Artefakty"],
    .site-tree-item-self.is-current[href$="/Wydarzenia/Wydarzenia"],
    .site-tree-item-self.is-current[href$="/Wspólnoty/Wspólnoty"],
    .site-tree-item-self.is-current[href$="/Wsp%C3%B3lnoty/Wsp%C3%B3lnoty"],
    .site-tree-item-self.is-current[href$="/Religie/Religie"],
    .site-tree-item-self.is-current[href$="/Idee/Idee"]
)
.rendered-mdx > .overflow-x-auto {
  overflow: visible;
  margin: 0;
}

body:has(
    .site-tree-item-self.is-current[href$="/Ludzie/Ludzie"],
    .site-tree-item-self.is-current[href$="/Miejsca/Miejsca"],
    .site-tree-item-self.is-current[href$="/Książki/Książki"],
    .site-tree-item-self.is-current[href$="/Ksi%C4%85%C5%BCki/Ksi%C4%85%C5%BCki"],
    .site-tree-item-self.is-current[href$="/Artefakty/Artefakty"],
    .site-tree-item-self.is-current[href$="/Wydarzenia/Wydarzenia"],
    .site-tree-item-self.is-current[href$="/Wspólnoty/Wspólnoty"],
    .site-tree-item-self.is-current[href$="/Wsp%C3%B3lnoty/Wsp%C3%B3lnoty"],
    .site-tree-item-self.is-current[href$="/Religie/Religie"],
    .site-tree-item-self.is-current[href$="/Idee/Idee"]
)
.rendered-mdx table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;

  background: transparent;
  color: var(--catalog-ink);

  font-family: var(--font-body);
}

body:has(
    .site-tree-item-self.is-current[href$="/Ludzie/Ludzie"],
    .site-tree-item-self.is-current[href$="/Miejsca/Miejsca"],
    .site-tree-item-self.is-current[href$="/Książki/Książki"],
    .site-tree-item-self.is-current[href$="/Ksi%C4%85%C5%BCki/Ksi%C4%85%C5%BCki"],
    .site-tree-item-self.is-current[href$="/Artefakty/Artefakty"],
    .site-tree-item-self.is-current[href$="/Wydarzenia/Wydarzenia"],
    .site-tree-item-self.is-current[href$="/Wspólnoty/Wspólnoty"],
    .site-tree-item-self.is-current[href$="/Wsp%C3%B3lnoty/Wsp%C3%B3lnoty"],
    .site-tree-item-self.is-current[href$="/Religie/Religie"],
    .site-tree-item-self.is-current[href$="/Idee/Idee"]
)
.rendered-mdx thead th {
  padding: 0.62rem 0.8rem;

  border-top: 2px solid var(--catalog-rule);
  border-bottom: 2px solid var(--catalog-rule);

  background: rgba(255, 255, 255, 0.10);
  color: var(--catalog-ink);

  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-align: left;
}

body:has(
    .site-tree-item-self.is-current[href$="/Ludzie/Ludzie"],
    .site-tree-item-self.is-current[href$="/Miejsca/Miejsca"],
    .site-tree-item-self.is-current[href$="/Książki/Książki"],
    .site-tree-item-self.is-current[href$="/Ksi%C4%85%C5%BCki/Ksi%C4%85%C5%BCki"],
    .site-tree-item-self.is-current[href$="/Artefakty/Artefakty"],
    .site-tree-item-self.is-current[href$="/Wydarzenia/Wydarzenia"],
    .site-tree-item-self.is-current[href$="/Wspólnoty/Wspólnoty"],
    .site-tree-item-self.is-current[href$="/Wsp%C3%B3lnoty/Wsp%C3%B3lnoty"],
    .site-tree-item-self.is-current[href$="/Religie/Religie"],
    .site-tree-item-self.is-current[href$="/Idee/Idee"]
)
.rendered-mdx tbody td {
  padding: 0.62rem 0.8rem;

  border-bottom: 1px solid var(--catalog-rule);

  vertical-align: middle;
  line-height: 1.35;
}


/* ============================================================
   7. ID COLUMN
   ============================================================ */

body:has(
    .site-tree-item-self.is-current[href$="/Ludzie/Ludzie"],
    .site-tree-item-self.is-current[href$="/Miejsca/Miejsca"],
    .site-tree-item-self.is-current[href$="/Książki/Książki"],
    .site-tree-item-self.is-current[href$="/Ksi%C4%85%C5%BCki/Ksi%C4%85%C5%BCki"],
    .site-tree-item-self.is-current[href$="/Artefakty/Artefakty"],
    .site-tree-item-self.is-current[href$="/Wydarzenia/Wydarzenia"],
    .site-tree-item-self.is-current[href$="/Wspólnoty/Wspólnoty"],
    .site-tree-item-self.is-current[href$="/Wsp%C3%B3lnoty/Wsp%C3%B3lnoty"],
    .site-tree-item-self.is-current[href$="/Religie/Religie"],
    .site-tree-item-self.is-current[href$="/Idee/Idee"]
)
.rendered-mdx th:first-child,
body:has(
    .site-tree-item-self.is-current[href$="/Ludzie/Ludzie"],
    .site-tree-item-self.is-current[href$="/Miejsca/Miejsca"],
    .site-tree-item-self.is-current[href$="/Książki/Książki"],
    .site-tree-item-self.is-current[href$="/Ksi%C4%85%C5%BCki/Ksi%C4%85%C5%BCki"],
    .site-tree-item-self.is-current[href$="/Artefakty/Artefakty"],
    .site-tree-item-self.is-current[href$="/Wydarzenia/Wydarzenia"],
    .site-tree-item-self.is-current[href$="/Wspólnoty/Wspólnoty"],
    .site-tree-item-self.is-current[href$="/Wsp%C3%B3lnoty/Wsp%C3%B3lnoty"],
    .site-tree-item-self.is-current[href$="/Religie/Religie"],
    .site-tree-item-self.is-current[href$="/Idee/Idee"]
)
.rendered-mdx td:first-child {
  width: 21%;
  border-right: 1px solid var(--catalog-rule);
}

body:has(
    .site-tree-item-self.is-current[href$="/Ludzie/Ludzie"],
    .site-tree-item-self.is-current[href$="/Miejsca/Miejsca"],
    .site-tree-item-self.is-current[href$="/Książki/Książki"],
    .site-tree-item-self.is-current[href$="/Ksi%C4%85%C5%BCki/Ksi%C4%85%C5%BCki"],
    .site-tree-item-self.is-current[href$="/Artefakty/Artefakty"],
    .site-tree-item-self.is-current[href$="/Wydarzenia/Wydarzenia"],
    .site-tree-item-self.is-current[href$="/Wspólnoty/Wspólnoty"],
    .site-tree-item-self.is-current[href$="/Wsp%C3%B3lnoty/Wsp%C3%B3lnoty"],
    .site-tree-item-self.is-current[href$="/Religie/Religie"],
    .site-tree-item-self.is-current[href$="/Idee/Idee"]
)
.rendered-mdx td:first-child {
  color: var(--catalog-ink);
  font-size: 0.86rem;
  font-weight: 650;
  letter-spacing: 0.08em;
}


/* ============================================================
   8. RECORD LINKS + HOVER
   ============================================================ */

body:has(
    .site-tree-item-self.is-current[href$="/Ludzie/Ludzie"],
    .site-tree-item-self.is-current[href$="/Miejsca/Miejsca"],
    .site-tree-item-self.is-current[href$="/Książki/Książki"],
    .site-tree-item-self.is-current[href$="/Ksi%C4%85%C5%BCki/Ksi%C4%85%C5%BCki"],
    .site-tree-item-self.is-current[href$="/Artefakty/Artefakty"],
    .site-tree-item-self.is-current[href$="/Wydarzenia/Wydarzenia"],
    .site-tree-item-self.is-current[href$="/Wspólnoty/Wspólnoty"],
    .site-tree-item-self.is-current[href$="/Wsp%C3%B3lnoty/Wsp%C3%B3lnoty"],
    .site-tree-item-self.is-current[href$="/Religie/Religie"],
    .site-tree-item-self.is-current[href$="/Idee/Idee"]
)
.rendered-mdx td:nth-child(2) a {
  color: var(--sa-green);
  font-weight: 600;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
}

body:has(
    .site-tree-item-self.is-current[href$="/Ludzie/Ludzie"],
    .site-tree-item-self.is-current[href$="/Miejsca/Miejsca"],
    .site-tree-item-self.is-current[href$="/Książki/Książki"],
    .site-tree-item-self.is-current[href$="/Ksi%C4%85%C5%BCki/Ksi%C4%85%C5%BCki"],
    .site-tree-item-self.is-current[href$="/Artefakty/Artefakty"],
    .site-tree-item-self.is-current[href$="/Wydarzenia/Wydarzenia"],
    .site-tree-item-self.is-current[href$="/Wspólnoty/Wspólnoty"],
    .site-tree-item-self.is-current[href$="/Wsp%C3%B3lnoty/Wsp%C3%B3lnoty"],
    .site-tree-item-self.is-current[href$="/Religie/Religie"],
    .site-tree-item-self.is-current[href$="/Idee/Idee"]
)
.rendered-mdx tbody tr:hover {
  background: rgba(255, 184, 28, 0.10);
}


/* ============================================================
   9. CLASSIFICATION STAMP
   ============================================================ */

body:has(
    .site-tree-item-self.is-current[href$="/Ludzie/Ludzie"],
    .site-tree-item-self.is-current[href$="/Miejsca/Miejsca"],
    .site-tree-item-self.is-current[href$="/Książki/Książki"],
    .site-tree-item-self.is-current[href$="/Ksi%C4%85%C5%BCki/Ksi%C4%85%C5%BCki"],
    .site-tree-item-self.is-current[href$="/Artefakty/Artefakty"],
    .site-tree-item-self.is-current[href$="/Wydarzenia/Wydarzenia"],
    .site-tree-item-self.is-current[href$="/Wspólnoty/Wspólnoty"],
    .site-tree-item-self.is-current[href$="/Wsp%C3%B3lnoty/Wsp%C3%B3lnoty"],
    .site-tree-item-self.is-current[href$="/Religie/Religie"],
    .site-tree-item-self.is-current[href$="/Idee/Idee"]
)
.rendered-mdx > .overflow-x-auto::before {
  content: var(--catalog-code);

  display: block;
  width: fit-content;

  margin: 0 0 0.8rem auto;
  padding: 0.16rem 0.42rem 0.12rem;

  background: var(--sa-orange);
  color: var(--sa-ink);

  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}


/* ============================================================
   10. MOBILE
   ============================================================ */

@media (max-width: 720px) {

  body:has(
    .site-tree-item-self.is-current[href$="/Ludzie/Ludzie"],
    .site-tree-item-self.is-current[href$="/Miejsca/Miejsca"],
    .site-tree-item-self.is-current[href$="/Książki/Książki"],
    .site-tree-item-self.is-current[href$="/Ksi%C4%85%C5%BCki/Ksi%C4%85%C5%BCki"],
    .site-tree-item-self.is-current[href$="/Artefakty/Artefakty"],
    .site-tree-item-self.is-current[href$="/Wydarzenia/Wydarzenia"],
    .site-tree-item-self.is-current[href$="/Wspólnoty/Wspólnoty"],
    .site-tree-item-self.is-current[href$="/Wsp%C3%B3lnoty/Wsp%C3%B3lnoty"],
    .site-tree-item-self.is-current[href$="/Religie/Religie"],
    .site-tree-item-self.is-current[href$="/Idee/Idee"]
)
  .rendered-mdx:has(> .overflow-x-auto table) {
    padding: 1.4rem 1rem 1.8rem;
  }

  body:has(
    .site-tree-item-self.is-current[href$="/Ludzie/Ludzie"],
    .site-tree-item-self.is-current[href$="/Miejsca/Miejsca"],
    .site-tree-item-self.is-current[href$="/Książki/Książki"],
    .site-tree-item-self.is-current[href$="/Ksi%C4%85%C5%BCki/Ksi%C4%85%C5%BCki"],
    .site-tree-item-self.is-current[href$="/Artefakty/Artefakty"],
    .site-tree-item-self.is-current[href$="/Wydarzenia/Wydarzenia"],
    .site-tree-item-self.is-current[href$="/Wspólnoty/Wspólnoty"],
    .site-tree-item-self.is-current[href$="/Wsp%C3%B3lnoty/Wsp%C3%B3lnoty"],
    .site-tree-item-self.is-current[href$="/Religie/Religie"],
    .site-tree-item-self.is-current[href$="/Idee/Idee"]
)
  .rendered-mdx:has(> .overflow-x-auto table)::after {
    font-size: 0.60rem;
    line-height: 1.5;
  }

  body:has(
    .site-tree-item-self.is-current[href$="/Ludzie/Ludzie"],
    .site-tree-item-self.is-current[href$="/Miejsca/Miejsca"],
    .site-tree-item-self.is-current[href$="/Książki/Książki"],
    .site-tree-item-self.is-current[href$="/Ksi%C4%85%C5%BCki/Ksi%C4%85%C5%BCki"],
    .site-tree-item-self.is-current[href$="/Artefakty/Artefakty"],
    .site-tree-item-self.is-current[href$="/Wydarzenia/Wydarzenia"],
    .site-tree-item-self.is-current[href$="/Wspólnoty/Wspólnoty"],
    .site-tree-item-self.is-current[href$="/Wsp%C3%B3lnoty/Wsp%C3%B3lnoty"],
    .site-tree-item-self.is-current[href$="/Religie/Religie"],
    .site-tree-item-self.is-current[href$="/Idee/Idee"]
)
  .rendered-mdx th:first-child,
  body:has(
    .site-tree-item-self.is-current[href$="/Ludzie/Ludzie"],
    .site-tree-item-self.is-current[href$="/Miejsca/Miejsca"],
    .site-tree-item-self.is-current[href$="/Książki/Książki"],
    .site-tree-item-self.is-current[href$="/Ksi%C4%85%C5%BCki/Ksi%C4%85%C5%BCki"],
    .site-tree-item-self.is-current[href$="/Artefakty/Artefakty"],
    .site-tree-item-self.is-current[href$="/Wydarzenia/Wydarzenia"],
    .site-tree-item-self.is-current[href$="/Wspólnoty/Wspólnoty"],
    .site-tree-item-self.is-current[href$="/Wsp%C3%B3lnoty/Wsp%C3%B3lnoty"],
    .site-tree-item-self.is-current[href$="/Religie/Religie"],
    .site-tree-item-self.is-current[href$="/Idee/Idee"]
)
  .rendered-mdx td:first-child {
    width: 32%;
  }
}

/* ============================================================
   ŚWIAT AUGUSTYNA — LUDZIE
   PERSON RECORD
   ============================================================ */


/* ---------- record label ---------- */

.rendered-mdx > h6[id^="rekord-osobowy"] {
  margin: 2.4rem 0 1rem;

  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;

  letter-spacing: 0.15em;
  text-transform: uppercase;

  opacity: 0.72;
}


/* ============================================================
   PORTRAIT + FIRST TABLE
   ============================================================ */

/*
The portrait is immediately followed by the wrapper
of the first serialized table.
*/

.rendered-mdx > h6[id^="rekord-osobowy"] + img {
  float: left;

  width: 220px;
  max-width: 30%;

  height: auto;

  margin: 0 2rem 2rem 0;
  padding: 0.65rem;

  box-sizing: border-box;

  border: 1px solid rgba(47, 43, 37, 0.55);

  background: rgba(247, 243, 233, 0.78);

  box-shadow:
    4px 4px 0 rgba(47, 43, 37, 0.10);

  border-radius: 0;
}


/*
The FIRST overflow wrapper after the portrait contains
the personal-information table.
*/

.rendered-mdx
> h6[id^="rekord-osobowy"]
+ img
+ .overflow-x-auto {

  display: block;

  width: calc(100% - 252px);

  margin: 0 0 2.6rem auto;

  overflow: visible;
}


/* ---------- personal table ---------- */

.rendered-mdx
> h6[id^="rekord-osobowy"]
+ img
+ .overflow-x-auto
> table {

  width: 100%;

  border-collapse: collapse;

  border: 2px solid rgba(47, 43, 37, 0.82);

  background: rgba(250, 247, 239, 0.62);

  box-shadow:
    4px 4px 0 rgba(47, 43, 37, 0.08);
}


/* header */

.rendered-mdx
> h6[id^="rekord-osobowy"]
+ img
+ .overflow-x-auto
> table
thead th {

  padding: 0.72rem 0.85rem;

  border-bottom: 2px solid rgba(47, 43, 37, 0.82);

  background: rgba(47, 43, 37, 0.08);

  font-size: 0.68rem;
  font-weight: 700;

  letter-spacing: 0.11em;
  text-transform: uppercase;

  text-align: left;
}


/* cells */

.rendered-mdx
> h6[id^="rekord-osobowy"]
+ img
+ .overflow-x-auto
> table
td {

  padding: 0.68rem 0.85rem;

  vertical-align: top;

  border-bottom: 1px solid rgba(47, 43, 37, 0.30);

  line-height: 1.5;
}


/* field column */

.rendered-mdx
> h6[id^="rekord-osobowy"]
+ img
+ .overflow-x-auto
> table
td:first-child,

.rendered-mdx
> h6[id^="rekord-osobowy"]
+ img
+ .overflow-x-auto
> table
th:first-child {

  width: 36%;

  border-right: 1px solid rgba(47, 43, 37, 0.45);
}


.rendered-mdx
> h6[id^="rekord-osobowy"]
+ img
+ .overflow-x-auto
> table
td:first-child {

  background: rgba(47, 43, 37, 0.035);

  font-size: 0.71rem;
  font-weight: 700;

  letter-spacing: 0.035em;
  text-transform: uppercase;
}


.rendered-mdx
> h6[id^="rekord-osobowy"]
+ img
+ .overflow-x-auto
> table
tbody tr:last-child td {

  border-bottom: none;
}


/* ============================================================
   SECOND TABLE — RELATIONS & DOCUMENTATION
   ============================================================ */

/*
The second overflow wrapper follows the first wrapper.
Clear the portrait before it.
*/

.rendered-mdx
> h6[id^="rekord-osobowy"]
+ img
+ .overflow-x-auto
+ .overflow-x-auto {

  clear: both;

  width: 100%;

  margin: 1.5rem 0 3rem;
}


/* second table */

.rendered-mdx
> h6[id^="rekord-osobowy"]
+ img
+ .overflow-x-auto
+ .overflow-x-auto
> table {

  width: 100%;

  border-collapse: collapse;

  border-top: 2px solid rgba(47, 43, 37, 0.75);
  border-bottom: 1px solid rgba(47, 43, 37, 0.50);
}


/* second table header */

.rendered-mdx
> h6[id^="rekord-osobowy"]
+ img
+ .overflow-x-auto
+ .overflow-x-auto
> table
thead th {

  padding: 0.7rem 0.8rem;

  border-bottom: 1px solid rgba(47, 43, 37, 0.45);

  font-size: 0.68rem;
  font-weight: 700;

  letter-spacing: 0.10em;
  text-transform: uppercase;

  text-align: left;

  opacity: 0.75;
}


/* second table rows */

.rendered-mdx
> h6[id^="rekord-osobowy"]
+ img
+ .overflow-x-auto
+ .overflow-x-auto
> table
td {

  padding: 0.65rem 0.8rem;

  vertical-align: top;

  border-bottom: 1px solid rgba(47, 43, 37, 0.14);

  line-height: 1.55;
}


/* field column */

.rendered-mdx
> h6[id^="rekord-osobowy"]
+ img
+ .overflow-x-auto
+ .overflow-x-auto
> table
td:first-child,

.rendered-mdx
> h6[id^="rekord-osobowy"]
+ img
+ .overflow-x-auto
+ .overflow-x-auto
> table
th:first-child {

  width: 29%;
}


/* ============================================================
   LINKS
   ============================================================ */

.rendered-mdx
> .overflow-x-auto
table a {

  font-weight: 500;

  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 720px) {

  .rendered-mdx > h6[id^="rekord-osobowy"] + img {

    float: none;

    display: block;

    width: min(70%, 240px);
    max-width: 240px;

    margin: 0 auto 1.5rem;
  }


  .rendered-mdx
  > h6[id^="rekord-osobowy"]
  + img
  + .overflow-x-auto {

    width: 100%;

    margin: 0 0 2.5rem;
  }


  .rendered-mdx
  > h6[id^="rekord-osobowy"]
  + img
  + .overflow-x-auto
  > table {

    min-width: 0;
  }


  .rendered-mdx
  > h6[id^="rekord-osobowy"]
  + img
  + .overflow-x-auto
  > table
  td:first-child {

    width: 38%;
  }
}

/* ============================================================
   ŚWIAT AUGUSTYNA — ARCHIVE ELEVATOR v3
   The panel now scrolls with the page and visually belongs to
   the sidebar column. The native Flowershow tree is pushed
   underneath it instead of being covered.
   ============================================================ */

:root {
  --elevator-floor: "—";
  --elevator-name: "ARCHIWUM";
}


/* ============================================================
   CURRENT FLOOR DETECTION
   ============================================================ */

body:has(.site-tree-item-self.is-current[href*="/Ludzie/"]) {
  --elevator-floor: "O";
  --elevator-name: "LUDZIE";
}

body:has(.site-tree-item-self.is-current[href*="/Miejsca/"]) {
  --elevator-floor: "M";
  --elevator-name: "MIEJSCA";
}

body:has(
  .site-tree-item-self.is-current[href*="/Książki/"],
  .site-tree-item-self.is-current[href*="/Ksi%C4%85%C5%BCki/"]
) {
  --elevator-floor: "K";
  --elevator-name: "KSIĄŻKI";
}

body:has(.site-tree-item-self.is-current[href*="/Artefakty/"]) {
  --elevator-floor: "A";
  --elevator-name: "ARTEFAKTY";
}

body:has(.site-tree-item-self.is-current[href*="/Wydarzenia/"]) {
  --elevator-floor: "W";
  --elevator-name: "WYDARZENIA";
}

body:has(
  .site-tree-item-self.is-current[href*="/Wspólnoty/"],
  .site-tree-item-self.is-current[href*="/Wsp%C3%B3lnoty/"]
) {
  --elevator-floor: "S";
  --elevator-name: "WSPÓLNOTY";
}

body:has(.site-tree-item-self.is-current[href*="/Religie/"]) {
  --elevator-floor: "R";
  --elevator-name: "RELIGIE";
}

body:has(.site-tree-item-self.is-current[href*="/Idee/"]) {
  --elevator-floor: "I";
  --elevator-name: "IDEE";
}


/* ============================================================
   BUTTON IDENTITY
   ============================================================ */

.site-navbar-link[href*="/Ludzie/"] {
  --button-code: "O";
  --button-label: "LUDZIE";
}

.site-navbar-link[href*="/Miejsca/"] {
  --button-code: "M";
  --button-label: "MIEJSCA";
}

.site-navbar-link[href*="/Książki/"],
.site-navbar-link[href*="/Ksi%C4%85%C5%BCki/"] {
  --button-code: "K";
  --button-label: "KSIĄŻKI";
}

.site-navbar-link[href*="/Artefakty/"] {
  --button-code: "A";
  --button-label: "ARTEFAKTY";
}

.site-navbar-link[href*="/Wydarzenia/"] {
  --button-code: "W";
  --button-label: "WYDARZENIA";
}

.site-navbar-link[href*="/Wspólnoty/"],
.site-navbar-link[href*="/Wsp%C3%B3lnoty/"] {
  --button-code: "S";
  --button-label: "WSPÓLNOTY";
}

.site-navbar-link[href*="/Religie/"] {
  --button-code: "R";
  --button-label: "RELIGIE";
}

.site-navbar-link[href*="/Idee/"] {
  --button-code: "I";
  --button-label: "IDEE";
}


/* ============================================================
   DESKTOP
   ============================================================ */

@media (min-width: 1024px) {

  /*
   Flowershow renders the 8 links inside the navbar. To make the
   elevator behave like part of the scrolling sidebar using CSS
   only, the desktop navbar must no longer be sticky.
  */

  .site-navbar {
    position: relative !important;
    top: auto !important;
  }


  /* ------------------------------------------------------------
     ELEVATOR PANEL
     ------------------------------------------------------------ */

  .site-navbar-links-container {
    position: absolute;

    left: 0.65rem;
    top: 7.35rem;

    z-index: 20;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.48rem 0.55rem;

    width: 13.6rem;

    margin: 0;
    padding: 7.8rem 0.78rem 1rem;

    box-sizing: border-box;

    border: 1px solid rgba(54, 43, 24, 0.88);
    border-radius: 7px;

    background:
      radial-gradient(circle at 12px 12px,
        #d4bf83 0 2px,
        #5e4b2c 2.4px 4px,
        transparent 4.5px),
      radial-gradient(circle at calc(100% - 12px) 12px,
        #d4bf83 0 2px,
        #5e4b2c 2.4px 4px,
        transparent 4.5px),
      radial-gradient(circle at 12px calc(100% - 12px),
        #d4bf83 0 2px,
        #5e4b2c 2.4px 4px,
        transparent 4.5px),
      radial-gradient(circle at calc(100% - 12px) calc(100% - 12px),
        #d4bf83 0 2px,
        #5e4b2c 2.4px 4px,
        transparent 4.5px),
      linear-gradient(
        100deg,
        rgba(255,255,255,0.11),
        transparent 18%,
        rgba(0,0,0,0.08) 58%,
        rgba(255,255,255,0.05)
      ),
      linear-gradient(
        #9a8050,
        #75603a 48%,
        #8d7447
      );

    box-shadow:
      0 2px 0 rgba(255,255,255,0.20) inset,
      0 -2px 0 rgba(45,34,18,0.28) inset,
      4px 7px 16px rgba(39, 34, 24, 0.18);

    font-family: var(--font-body);
  }


  /* ------------------------------------------------------------
     FLOOR DISPLAY
     ------------------------------------------------------------ */

  .site-navbar-links-container::before {
    font-family: "Bitcount Grid Single", system-ui !important;
font-optical-sizing: auto !important;
font-style: normal !important;
font-weight: 400 !important;

font-variation-settings:
  "slnt" 0,
  "CRSV" 0.5,
  "ELSH" 0,
  "ELXP" 0 !important;
    
    content:
      "ARCHIWUM CENTRALNE\A"
      "SILNIK ŚWIATA AUGUSTYNA\A\A"
      "POZIOM  " var(--elevator-floor) "\A"
      var(--elevator-name);

    position: absolute;

    top: 0.9rem;
    left: 0.78rem;
    right: 0.78rem;

    min-height: 5.95rem;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding: 0.6rem 0.5rem;

    border: 3px solid #4d3f27;
    border-radius: 5px;

    background:
      radial-gradient(circle at 50% 45%,
        rgba(255,184,28,0.09),
        transparent 60%),
      #17180f;

    box-shadow:
      0 0 0 1px rgba(219,198,142,0.38),
      inset 0 0 14px rgba(0,0,0,0.80);

    color: #ffb81c;

    font-size: 0.65rem;
    font-weight: 700;

    line-height: 1.45;
    letter-spacing: 0.11em;

    text-align: center;
    white-space: pre-line;
    text-transform: uppercase;

    text-shadow:
      0 0 4px rgba(255,184,28,0.42);
  }


  /* ------------------------------------------------------------
     PANEL FOOTER
     ------------------------------------------------------------ */

  .site-navbar-links-container::after {
    content: "SILNIK / 08";

    grid-column: 1 / -1;

    display: block;

    margin-top: 0.15rem;
    padding-top: 0.55rem;

    border-top: 1px solid rgba(44,35,21,0.55);

    color: rgba(31, 27, 20, 0.82);

    font-size: 0.57rem;
    font-weight: 700;

    letter-spacing: 0.14em;
    text-align: center;
    text-transform: uppercase;
  }


  /* ------------------------------------------------------------
     BUTTON CELLS
     ------------------------------------------------------------ */

  .site-navbar-links-container .site-navbar-link {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 0.34rem;

    min-width: 0;
    min-height: 4.15rem;

    margin: 0;
    padding: 0.42rem 0.18rem 0.34rem;

    box-sizing: border-box;

    border: 1px solid rgba(62, 48, 28, 0.19);
    border-radius: 3px;

    background:
      linear-gradient(
        rgba(255,255,255,0.035),
        rgba(0,0,0,0.035)
      );

    color: transparent;

    font-size: 0;

    text-decoration: none;
  }


  /* physical Bakelite button */

  .site-navbar-links-container .site-navbar-link::before {
    content: var(--button-code);

    width: 2.48rem;
    height: 2.48rem;

    display: grid;
    place-items: center;

    box-sizing: border-box;

    border: 2px solid #b69d66;
    border-radius: 50%;

    background:
      radial-gradient(circle at 35% 28%,
        rgba(255,255,255,0.18),
        transparent 32%),
      linear-gradient(#23231d, #090a08);

    box-shadow:
      0 0 0 2px #4a3d27,
      0 2px 3px rgba(0,0,0,0.42),
      inset 0 0 0 1px rgba(255,255,255,0.08);

    color: #e5ddc6;

    font-size: 0.96rem;
    font-weight: 650;

    line-height: 1;

    text-shadow: 0 1px 1px #000;
  }


  /* ------------------------------------------------------------
     LIGHT ENAMEL DESTINATION PLATE
     ------------------------------------------------------------ */

  .site-navbar-links-container .site-navbar-link::after {
    content: var(--button-label);

    width: 100%;

    box-sizing: border-box;

    padding: 0.27rem 0.12rem 0.24rem;

    border: 1px solid rgba(68, 54, 31, 0.72);
    border-radius: 2px;

    background:
      linear-gradient(
        #eee4c9,
        #d9cba5
      );

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.68),
      0 1px 0 rgba(60,45,24,0.16);

    color: #373024;

    font-size: 0.50rem;
    font-weight: 750;

    line-height: 1.2;

    letter-spacing: 0.065em;
    text-align: center;
    text-transform: uppercase;

    text-shadow:
      0 1px 0 rgba(255,255,255,0.55);
  }


  /* ------------------------------------------------------------
     HOVER / FOCUS / PRESS
     ------------------------------------------------------------ */

  .site-navbar-links-container .site-navbar-link:hover {
    background: rgba(255,184,28,0.06);
  }

  .site-navbar-links-container .site-navbar-link:hover::before {
    border-color: #d5bc7f;

    box-shadow:
      0 0 0 2px #4a3d27,
      0 2px 3px rgba(0,0,0,0.42),
      0 0 8px rgba(255,184,28,0.25),
      inset 0 0 0 1px rgba(255,255,255,0.10);
  }

  .site-navbar-links-container .site-navbar-link:hover::after {
    background:
      linear-gradient(
        #fff0c7,
        #e4d19e
      );
  }

  .site-navbar-links-container .site-navbar-link:focus {
    outline: none;
  }

  .site-navbar-links-container .site-navbar-link:focus-visible {
    outline: 2px solid var(--sa-orange);
    outline-offset: 2px;
  }

  .site-navbar-links-container .site-navbar-link:active::before {
    transform: translateY(1px);

    box-shadow:
      0 0 0 2px #4a3d27,
      inset 0 2px 5px rgba(0,0,0,0.55);
  }


  /* ============================================================
     ACTIVE FLOOR
     ============================================================ */

  body:has(.site-tree-item-self.is-current[href*="/Ludzie/"])
  .site-navbar-link[href*="/Ludzie/"]::before,

  body:has(.site-tree-item-self.is-current[href*="/Miejsca/"])
  .site-navbar-link[href*="/Miejsca/"]::before,

  body:has(
    .site-tree-item-self.is-current[href*="/Książki/"],
    .site-tree-item-self.is-current[href*="/Ksi%C4%85%C5%BCki/"]
  )
  .site-navbar-link[href*="/Ksi"]::before,

  body:has(.site-tree-item-self.is-current[href*="/Artefakty/"])
  .site-navbar-link[href*="/Artefakty/"]::before,

  body:has(.site-tree-item-self.is-current[href*="/Wydarzenia/"])
  .site-navbar-link[href*="/Wydarzenia/"]::before,

  body:has(
    .site-tree-item-self.is-current[href*="/Wspólnoty/"],
    .site-tree-item-self.is-current[href*="/Wsp%C3%B3lnoty/"]
  )
  .site-navbar-link[href*="/Wsp"]::before,

  body:has(.site-tree-item-self.is-current[href*="/Religie/"])
  .site-navbar-link[href*="/Religie/"]::before,

  body:has(.site-tree-item-self.is-current[href*="/Idee/"])
  .site-navbar-link[href*="/Idee/"]::before {
    border-color: #f3c659;

    background:
      radial-gradient(circle at 42% 38%,
        #fff7c8 0 12%,
        #ffd96b 25%,
        #ffb81c 57%,
        #c9730c 100%);

    color: #292217;

    box-shadow:
      0 0 0 2px #6b4a1c,
      0 0 8px rgba(255,184,28,0.92),
      0 0 17px rgba(255,184,28,0.52),
      inset 0 0 7px rgba(255,255,255,0.65);

    text-shadow: none;
  }


  /* ============================================================
     NATIVE SIDEBAR TREE
     Reserve vertical space for the elevator so the menu starts
     underneath it. Because both are now in the normal document
     scroll, they move together.
     ============================================================ */

  .layout-inner-left {
    min-width: 15rem;
  }

  .site-tree-container {
    padding-top: 31rem;
  }
}


/* ============================================================
   MOBILE / TABLET
   Keep Flowershow's native navbar navigation.
   ============================================================ */

@media (max-width: 1023px) {
  .site-navbar-links-container {
    position: static;
  }

  .site-tree-container {
    padding-top: 0;
  }
}
/* ==========================================================
   ŚWIAT AUGUSTYNA — SILNIK HERO
   CSS archive-machine prototype
   ========================================================== */

.sa-engine-hero {
  --sa-shell: #66675e;
  --sa-shell-dark: #505149;
  --sa-shell-light: #77786e;
  --sa-panel: #dad3c2;
  --sa-panel-light: #ebe4d4;
  --sa-ink: #292b28;
  --sa-muted: #6f7068;
  --sa-orange: #c85a2c;
  --sa-orange-dark: #9e4321;

  position: relative;
  width: min(100%, 1120px);
  margin: 2.5rem auto 3rem;
  padding: 14px;

  box-sizing: border-box;

  background:
    linear-gradient(
      180deg,
      var(--sa-shell-light) 0%,
      var(--sa-shell) 10%,
      var(--sa-shell-dark) 100%
    );

  border: 1px solid #41423d;
  border-radius: 9px;

  box-shadow:
    0 2px 0 rgba(255,255,255,.18) inset,
    0 -2px 0 rgba(0,0,0,.18) inset,
    0 7px 0 rgba(58,57,51,.18),
    0 14px 28px rgba(35,32,27,.20);

  color: var(--sa-ink);
}


/* ----------------------------------------------------------
   Little recessed edge around the machine
   ---------------------------------------------------------- */

.sa-engine-hero::before {
  content: "";
  position: absolute;
  inset: 6px;

  border: 1px solid rgba(25,25,22,.25);
  border-radius: 5px;

  pointer-events: none;
}


/* ----------------------------------------------------------
   TOP CONTROL STRIP
   ---------------------------------------------------------- */

.sa-engine-topbar {
  position: relative;
  z-index: 1;

  min-height: 34px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;

  padding: 0 10px 10px;

  box-sizing: border-box;

  color: rgba(244,239,226,.82);

  font-family:
    "Courier New",
    Courier,
    monospace;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: .13em;
  text-transform: uppercase;
}


.sa-engine-code {
  opacity: .78;
}


.sa-engine-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  white-space: nowrap;
}


.sa-engine-status i {
  width: 8px;
  height: 8px;

  display: inline-block;

  border-radius: 50%;

  background: var(--sa-orange);

  box-shadow:
    0 0 0 2px rgba(38,38,34,.35),
    0 0 8px rgba(200,90,44,.45);
}


/* ==========================================================
   CENTRAL DISPLAY
   ========================================================== */

.sa-engine-screen {
  position: relative;
  z-index: 1;

  min-height: 340px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 54px 50px;

  box-sizing: border-box;

  overflow: hidden;

  background:
    linear-gradient(
      rgba(68,67,61,.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(68,67,61,.025) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 50% 35%,
      rgba(255,255,255,.55),
      transparent 48%
    ),
    linear-gradient(
      180deg,
      var(--sa-panel-light),
      var(--sa-panel)
    );

  background-size:
    100% 28px,
    28px 100%,
    auto,
    auto;

  border: 1px solid #44453f;
  border-radius: 4px;

  box-shadow:
    0 3px 7px rgba(25,24,21,.28) inset,
    0 1px 0 rgba(255,255,255,.55);
}


/* ----------------------------------------------------------
   Corner markers
   ---------------------------------------------------------- */

.sa-engine-screen::before,
.sa-engine-screen::after {
  content: "";

  position: absolute;

  width: 48px;
  height: 48px;

  pointer-events: none;
}


.sa-engine-screen::before {
  top: 19px;
  left: 19px;

  border-top: 3px solid var(--sa-orange);
  border-left: 3px solid var(--sa-orange);
}


.sa-engine-screen::after {
  right: 19px;
  bottom: 19px;

  border-right: 3px solid var(--sa-orange);
  border-bottom: 3px solid var(--sa-orange);
}


/* ==========================================================
   HERO TYPOGRAPHY
   ========================================================== */

.sa-engine-kicker {
  margin-bottom: 18px;

  color: var(--sa-orange-dark);

  font-family:
    "Courier New",
    Courier,
    monospace;

  font-size: clamp(.66rem, 1vw, .78rem);
  font-weight: 700;

  letter-spacing: .20em;
  text-align: center;
  text-transform: uppercase;
}


.sa-engine-title {
  display: flex;
  flex-direction: column;
  align-items: center;

  margin: 0;

  color: var(--sa-ink);

  text-align: center;

  line-height: .94;
}


.sa-engine-title span {
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 400;

  letter-spacing: -.025em;
}


.sa-engine-title strong {
  margin-top: .08em;

  font-size: clamp(3.2rem, 7vw, 6.5rem);
  font-weight: 650;

  letter-spacing: -.055em;
}


/* ----------------------------------------------------------
   Orange signal / data line
   ---------------------------------------------------------- */

.sa-engine-rule {
  width: min(390px, 72%);
  height: 8px;

  margin: 32px auto 25px;

  position: relative;
}


.sa-engine-rule::before {
  content: "";

  position: absolute;
  left: 0;
  right: 0;
  top: 3px;

  height: 1px;

  background: rgba(46,47,43,.28);
}


.sa-engine-rule span {
  position: absolute;

  left: 50%;
  top: 0;

  width: 42%;
  height: 7px;

  transform: translateX(-50%);

  background: var(--sa-orange);
}


.sa-engine-rule span::before,
.sa-engine-rule span::after {
  content: "";

  position: absolute;
  top: 0;

  width: 7px;
  height: 7px;

  background: var(--sa-panel);
}


.sa-engine-rule span::before {
  left: 15%;
}


.sa-engine-rule span::after {
  right: 15%;
}


/* ----------------------------------------------------------
   Subtitle
   ---------------------------------------------------------- */

.sa-engine-subtitle {
  margin: 0 !important;

  color: #55574f !important;

  font-family:
    "Courier New",
    Courier,
    monospace;

  font-size: clamp(.76rem, 1.3vw, .9rem) !important;

  font-weight: 600;

  letter-spacing: .11em;
  line-height: 1.6 !important;

  text-align: center;
  text-transform: uppercase;
}


/* ==========================================================
   LOWER CONTROL STRIP
   ========================================================== */

.sa-engine-footer {
  position: relative;
  z-index: 1;

  min-height: 58px;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;

  padding: 12px 12px 0;

  box-sizing: border-box;
}


.sa-engine-id {
  display: flex;
  align-items: baseline;
  gap: 9px;

  font-family:
    "Courier New",
    Courier,
    monospace;

  text-transform: uppercase;
}


.sa-engine-id span {
  color: rgba(245,240,226,.55);

  font-size: 8px;

  letter-spacing: .16em;
}


.sa-engine-id strong {
  color: rgba(245,240,226,.88);

  font-size: 11px;

  letter-spacing: .09em;
}


.sa-engine-id-right {
  justify-content: flex-end;
}


/* ----------------------------------------------------------
   Three indicator lamps
   ---------------------------------------------------------- */

.sa-engine-lights {
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 6px 13px;

  background: rgba(48,49,44,.35);

  border: 1px solid rgba(30,30,27,.35);
  border-radius: 20px;

  box-shadow:
    0 1px 3px rgba(0,0,0,.25) inset,
    0 1px 0 rgba(255,255,255,.09);
}


.sa-engine-lights span {
  width: 8px;
  height: 8px;

  display: block;

  border-radius: 50%;

  background: #aaa58f;

  border: 1px solid #484943;

  box-shadow:
    0 1px 2px rgba(0,0,0,.35) inset;
}


.sa-engine-lights span:nth-child(2) {
  background: var(--sa-orange);

  box-shadow:
    0 0 6px rgba(200,90,44,.55),
    0 1px 2px rgba(0,0,0,.25) inset;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 700px) {

  .sa-engine-hero {
    margin: 1.5rem auto 2.25rem;

    padding: 10px;

    border-radius: 7px;
  }


  .sa-engine-topbar {
    min-height: 31px;

    padding: 0 6px 8px;

    font-size: 8px;

    letter-spacing: .09em;
  }


  .sa-engine-screen {
    min-height: 310px;

    padding: 48px 24px;
  }


  .sa-engine-title span {
    font-size: clamp(1.7rem, 8vw, 2.5rem);
  }


  .sa-engine-title strong {
    font-size: clamp(2.7rem, 13vw, 4.5rem);
  }


  .sa-engine-screen::before,
  .sa-engine-screen::after {
    width: 32px;
    height: 32px;
  }


  .sa-engine-screen::before {
    top: 13px;
    left: 13px;
  }


  .sa-engine-screen::after {
    right: 13px;
    bottom: 13px;
  }


  .sa-engine-footer {
    grid-template-columns: 1fr auto;

    min-height: 50px;

    gap: 10px;

    padding: 9px 7px 0;
  }


  .sa-engine-id-right {
    display: none;
  }


  .sa-engine-lights {
    justify-self: end;

    gap: 8px;

    padding: 5px 10px;
  }
}

/* ==========================================================
   HOMEPAGE — HIDE FLOWERSHOW'S AUTOMATIC TITLE
   ========================================================== */

.page-main:has(.sa-engine-hero) > .page-header {
  display: none;
}

/* ============================================================
   SILNIK ŚWIATA AUGUSTYNA
   DOT-MATRIX NAVBAR DISPLAY
   ============================================================ */


/* ------------------------------------------------------------
   COMPLETE TITLE UNIT
   Outer physical housing
   ------------------------------------------------------------ */

.site-navbar-site-title {
  display: inline-flex !important;
  align-items: center !important;

  margin: 0 !important;
  padding: 4px 5px !important;

  text-decoration: none !important;

  background:
    linear-gradient(
      180deg,
      #6e6a60 0%,
      #4b4841 18%,
      #34322e 82%,
      #24231f 100%
    ) !important;

  border: 1px solid #26251f !important;
  border-radius: 4px !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -2px 1px rgba(0,0,0,0.35),
    0 2px 4px rgba(0,0,0,0.22) !important;
}


/* ------------------------------------------------------------
   HIDE EXISTING FLOWERSHOW LOGO
   ------------------------------------------------------------ */

.site-navbar-site-title .site-navbar-site-logo {
  display: none !important;
}


/* ------------------------------------------------------------
   DOT-MATRIX DISPLAY
   ------------------------------------------------------------ */

.site-navbar-site-name {
  display: block !important;

  margin: 0 !important;
  padding: 0.56rem 0.9rem 0.5rem !important;

  white-space: nowrap !important;

  /* BITCOUNT GRID SINGLE */

  font-family: "Bitcount Grid Single", system-ui !important;
  font-optical-sizing: auto !important;
  font-style: normal !important;
  font-weight: 400 !important;

  font-variation-settings:
    "slnt" 0,
    "CRSV" 0.5,
    "ELSH" 0,
    "ELXP" 0 !important;

  font-size: 1.18rem !important;
  line-height: 1 !important;

  letter-spacing: 0.035em !important;
  text-transform: uppercase !important;

  /* AMBER DISPLAY */

  color: #ffad20 !important;

  background:
    radial-gradient(
      ellipse at 50% 25%,
      rgba(255,255,255,0.035),
      transparent 58%
    ),
    linear-gradient(
      180deg,
      #11110f 0%,
      #050504 48%,
      #090806 100%
    ) !important;

  border: 2px solid #171612 !important;
  border-radius: 2px !important;

  box-shadow:
    inset 0 2px 5px rgba(0,0,0,0.95),
    inset 0 0 0 1px rgba(255,255,255,0.045) !important;

  /* LED GLOW */

  text-shadow:
    0 0 1px #ffd06b,
    0 0 3px rgba(255,174,32,0.90),
    0 0 6px rgba(255,140,0,0.42) !important;
}


/* ------------------------------------------------------------
   HOVER
   ------------------------------------------------------------ */

.site-navbar-site-title:hover .site-navbar-site-name {
  color: #ffbc35 !important;

  text-shadow:
    0 0 1px #ffe09a,
    0 0 3px rgba(255,185,45,0.95),
    0 0 7px rgba(255,140,0,0.50) !important;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 720px) {

  .site-navbar-site-name {
    font-size: 0.88rem !important;
    letter-spacing: 0.02em !important;

    padding:
      0.48rem
      0.58rem
      0.44rem !important;
  }

}
/* ==========================================================
   HERO — REMOVE OLD MACHINE CASING
   Keep this at the END of the stylesheet
   ========================================================== */

.sa-engine-hero {
  background: #f4efe3 !important;

  border: 1px solid rgba(55, 59, 50, 0.38) !important;
  border-radius: 0 !important;

  box-shadow:
    7px 9px 0 rgba(55, 59, 50, 0.08),
    0 14px 34px rgba(55, 59, 50, 0.10) !important;
}


/* remove old inset machine edge */

.sa-engine-hero::before {
  inset: auto !important;

  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;

  width: 18px !important;

  border: 0 !important;
  border-right: 1px solid rgba(55, 59, 50, 0.28) !important;
  border-radius: 0 !important;

  background: var(--sa-turquoise) !important;
}


/* ----------------------------------------------------------
   TOP STRIP = PRINTED DOCUMENT HEADER, NOT METAL
   ---------------------------------------------------------- */

.sa-engine-topbar {
  background:
    linear-gradient(
      90deg,
      rgba(63, 155, 150, 0.10),
      transparent 38%
    ) !important;

  color: var(--sa-ink) !important;

  border: 0 !important;
  border-bottom: 1px solid rgba(55, 59, 50, 0.25) !important;

  box-shadow: none !important;
}


/* printed header text */

.sa-engine-code,
.sa-engine-status {
  color: var(--sa-ink) !important;
}


/* orange printed dot, no lamp glow */

.sa-engine-status i {
  background: var(--sa-orange) !important;

  border: 0 !important;

  box-shadow: none !important;
}


/* ----------------------------------------------------------
   CENTRAL PAPER
   ---------------------------------------------------------- */

.sa-engine-screen {
  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;
}


/* ----------------------------------------------------------
   FOOTER = PRINTED DOCUMENT FOOTER, NOT CONTROL PANEL
   ---------------------------------------------------------- */

.sa-engine-footer {
  background:
    linear-gradient(
      90deg,
      rgba(63, 155, 150, 0.12),
      transparent 42%
    ) !important;

  border: 0 !important;
  border-top: 1px solid rgba(55, 59, 50, 0.26) !important;

  box-shadow: none !important;
}


/* footer metadata */

.sa-engine-id span {
  color: var(--sa-ink) !important;
}

.sa-engine-id strong {
  color: var(--sa-green) !important;
}


/* former machine indicator housing */

.sa-engine-lights {
  background: transparent !important;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;
}


/* turn the former lamps into printed colour bars */

.sa-engine-lights span {
  width: 18px !important;
  height: 5px !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: var(--sa-turquoise) !important;

  box-shadow: none !important;
}

.sa-engine-lights span:nth-child(2) {
  background: var(--sa-orange) !important;
}

.sa-engine-lights span:nth-child(3) {
  background: var(--sa-green) !important;
}

/* ============================================================
   ŚWIAT AUGUSTYNA — BAZA ILUSTRACJI / ARCHIWIZOR OBRAZU v1
   ============================================================ */

.sa-illustration-viewer {
  --viewer-shell: #55584f;
  --viewer-shell-dark: #383b35;
  --viewer-panel: #d8d1c1;
  --viewer-screen: #151711;
  --viewer-glass: #20251c;
  --viewer-paper: #eee7d8;
  --viewer-orange: #e56f32;
  --viewer-amber: #ffb81c;
  --viewer-cyan: #72c8c2;

  position: relative;
  clear: both;
  width: min(100%, 920px);
  margin: 3rem auto;
  padding: 14px;
  box-sizing: border-box;
  overflow: hidden;

  color: #292b28;
  background:
    linear-gradient(145deg, rgba(255,255,255,.16), transparent 28%),
    linear-gradient(180deg, #707268, var(--viewer-shell) 36%, var(--viewer-shell-dark));
  border: 1px solid #34372f;
  border-radius: 7px;
  box-shadow:
    0 2px 0 rgba(255,255,255,.28) inset,
    0 -2px 0 rgba(0,0,0,.25) inset,
    8px 11px 0 rgba(55,59,50,.10),
    0 18px 34px rgba(28,29,25,.22);
}

.sa-illustration-viewer::before,
.sa-illustration-viewer::after {
  content: "";
  position: absolute;
  z-index: 5;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #d9d6c9 0 12%, #77786f 35%, #2f312c 72%);
  box-shadow: 0 1px 2px rgba(0,0,0,.55);
}

.sa-illustration-viewer::before { top: 8px; left: 8px; }
.sa-illustration-viewer::after { right: 8px; bottom: 8px; }

.sa-illustration-machinebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 34px;
  padding: .45rem 1.15rem .4rem;
  box-sizing: border-box;

  color: #f3eee2;
  font-family: "Space Grotesk", sans-serif;
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #292b28;
}

.sa-illustration-machinebar span:last-child {
  color: var(--viewer-amber);
}

.sa-illustration-viewport {
  display: flex;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;

  background: var(--viewer-panel);
  border: 1px solid #282a26;
  box-shadow:
    0 0 0 5px #44473f,
    0 0 0 6px rgba(255,255,255,.16),
    0 3px 8px rgba(0,0,0,.38) inset;
}

.sa-illustration-viewport::-webkit-scrollbar {
  display: none;
}

.sa-illustration-slide {
  position: relative;
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  grid-template-rows: minmax(420px, 68vh) auto;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  scroll-margin-top: 7rem;
  min-width: 0;
  margin: 0 !important;
  padding: 0;
  box-sizing: border-box;
  background: var(--viewer-panel);
}

.sa-illustration-screen {
  position: relative;
  grid-column: 1;
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: clamp(1rem, 3vw, 2rem);
  box-sizing: border-box;
  overflow: hidden;

  background:
    radial-gradient(circle at 50% 42%, rgba(114,200,194,.08), transparent 53%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.015) 3px 4px),
    var(--viewer-screen);
  border-right: 1px solid #74766c;
}

.sa-illustration-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(105deg, rgba(255,255,255,.10), transparent 22%),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.36) 100%);
}

.sa-illustration-screen img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(62vh, 650px);
  margin: 0 !important;
  object-fit: contain;
  border: 1px solid rgba(242,235,216,.24);
  border-radius: 0;
  box-shadow: 0 8px 25px rgba(0,0,0,.52);
}

.sa-illustration-caption {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.45rem 1.3rem 1.2rem;
  box-sizing: border-box;

  background:
    repeating-linear-gradient(to bottom, transparent 0 27px, rgba(59,57,48,.075) 28px),
    linear-gradient(180deg, #f0eadc, #ddd5c4);
  border-bottom: 1px solid rgba(47,49,44,.35);
}

.sa-illustration-counter {
  margin: 0 0 1.15rem;
  padding: .33rem .48rem .28rem;
  width: fit-content;
  color: #272a24;
  background: var(--viewer-amber);
  font-family: "Bitcount Grid Single", monospace;
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sa-illustration-caption p {
  margin: 0 0 1.35rem !important;
  padding: 0 !important;
  border: 0 !important;
  color: #32342f !important;
  font-family: "Space Grotesk", sans-serif;
  font-size: .94rem !important;
  line-height: 1.55 !important;
}

.sa-illustration-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .55rem;
  margin-top: auto;
}

.sa-illustration-links a {
  color: #3e5f20;
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .075em;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

.sa-illustration-controls {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: .55rem;
  padding: .75rem;
  background: #c2bbab;
}

.sa-illustration-controls a,
.sa-illustration-index a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  color: #f7f1e5;
  background: linear-gradient(#66685f, #41443d);
  border: 1px solid #292b27;
  border-radius: 3px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.24) inset,
    0 3px 0 #292b27;
  text-decoration: none !important;
}

.sa-illustration-controls a {
  width: 44px;
  height: 35px;
  font-size: 1.45rem;
  line-height: 1;
}

.sa-illustration-controls a:hover,
.sa-illustration-index a:hover,
.sa-illustration-controls a:focus-visible,
.sa-illustration-index a:focus-visible {
  color: #242620;
  background: var(--viewer-amber);
  outline: 2px solid var(--viewer-cyan);
  outline-offset: 2px;
}

.sa-illustration-controls span {
  justify-self: center;
  color: #39402f;
  font-family: "Bitcount Grid Single", monospace;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .08em;
}

.sa-illustration-index {
  display: flex;
  justify-content: center;
  gap: .55rem;
  padding: 1rem .8rem .7rem;
}

.sa-illustration-index a {
  width: 36px;
  height: 27px;
  font-family: "Bitcount Grid Single", monospace;
  font-size: .7rem;
  font-weight: 700;
}

.sa-illustration-slide:target .sa-illustration-counter {
  color: #11211f;
  background: var(--viewer-cyan);
}

/* Individual image record */

.rendered-mdx > h6[id^="rekord-ilustracji"] {
  margin: 2.4rem 0 1rem;
  color: var(--sa-ink);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.rendered-mdx > h6[id^="rekord-ilustracji"] + img,
.rendered-mdx > h6[id^="rekord-ilustracji"] + p > img:only-child {
  display: block;
  width: auto;
  max-width: min(100%, 620px);
  max-height: 720px;
  margin: 0 auto 1.4rem;
  padding: .8rem;
  box-sizing: border-box;
  object-fit: contain;
  background: #171914;
  border: 8px solid #575a51;
  border-radius: 2px;
  box-shadow: 7px 9px 0 rgba(55,59,50,.11);
}

/* Image database index */

body:has(.site-tree-item-self.is-current[href*="/Ilustracje/"]) {
  --catalog-code: "IL";
  --catalog-form: "FORM. IL-76   ·   BAZA ILUSTRACJI   ·   ARCHIWUM OBRAZU";
  --catalog-paper-1: #d8e7e4;
  --catalog-paper-2: #c8dcd8;
  --catalog-ink: #334743;
  --catalog-rule: rgba(44,77,72,.36);
}

body:has(.site-tree-item-self.is-current[href$="/Ilustracje/Ilustracje"])
.rendered-mdx:has(> .overflow-x-auto table) {
  padding: 2.25rem 2.35rem 2.6rem;
  color: var(--catalog-ink);
  background: linear-gradient(var(--catalog-paper-1), var(--catalog-paper-2));
  border: 1px solid var(--catalog-rule);
  border-radius: 0;
  box-shadow: 7px 9px 0 rgba(55,59,50,.10);
}

body:has(.site-tree-item-self.is-current[href$="/Ilustracje/Ilustracje"])
.rendered-mdx table {
  width: 100%;
  border-collapse: collapse;
  color: var(--catalog-ink);
  background: transparent;
}

body:has(.site-tree-item-self.is-current[href$="/Ilustracje/Ilustracje"])
.rendered-mdx th,
body:has(.site-tree-item-self.is-current[href$="/Ilustracje/Ilustracje"])
.rendered-mdx td {
  padding: .7rem .8rem;
  border-bottom: 1px solid var(--catalog-rule);
  text-align: left;
  vertical-align: top;
}

@media (max-width: 760px) {
  .sa-illustration-viewer {
    width: calc(100% + 1rem);
    margin-left: -.5rem;
    padding: 10px;
  }

  .sa-illustration-machinebar {
    padding-inline: .7rem;
    font-size: .56rem;
  }

  .sa-illustration-slide {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(330px, 60vh) auto auto;
  }

  .sa-illustration-screen {
    grid-column: 1;
    grid-row: 1;
    border-right: 0;
    border-bottom: 1px solid #74766c;
  }

  .sa-illustration-screen img {
    max-height: 55vh;
  }

  .sa-illustration-caption {
    grid-column: 1;
    grid-row: 2;
    min-height: 220px;
  }

  .sa-illustration-controls {
    grid-column: 1;
    grid-row: 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sa-illustration-viewport {
    scroll-behavior: auto;
  }
}