/* ===========================================================================
   OGONG docs theme - celestial editorial (the heavens, set like a magazine)
   Loaded after mdBook's own CSS, so these overrides win.
   Single accent knob: change --og-amber to recolor the whole site.

   Type system (matches the OGONG site):
     Inter Tight  - display: wordmark + headings
     Inter        - body, nav, labels, tables, buttons
     JetBrains Mono - code only
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* Pixeloid - the pixel/terminal "game" font, self-hosted from src/fonts/ (copied
   to book/fonts/). Sans Bold drives the headings + wordmark; Mono the small tags.
   Body stays Inter so long-form reading is unaffected. */
@font-face {
  font-family: "Pixeloid Mono";
  src: url("../fonts/PixeloidMono.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Pixeloid Sans Bold";
  src: url("../fonts/PixeloidSansBold.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Pixeloid Sans";
  src: url("../fonts/PixeloidSans.ttf") format("truetype");
  font-display: swap;
}

:root,
html.ayu,
html.coal,
html.navy,
html.light,
html.rust {
  /* celestial night sky - deep indigo, darker base (the heavens) */
  --og-bg:        #010104;
  --og-bg-2:      #090b15;
  --og-bg-3:      #10131f;
  --og-fg:        #d3d8e4;
  --og-fg-dim:    #828ca6;
  --og-amber:     #ffb000;   /* the one knob - the Monkey King's golden gaze */
  --og-amber-hi:  #ffce5c;
  --og-amber-dim: #b87d12;
  --og-amber-soft: rgba(255, 176, 0, 0.10);
  --og-amber-line: rgba(255, 176, 0, 0.28);
  --og-celest:    #8fa6ff;   /* faint heavenly blue - stars, secondary accents */
  --og-green:     #3fb950;   /* used ONLY for "accept / pass / on" */
  --og-border:    #1b2034;
  --og-border-2:  #262d44;

  /* code only - monospace */
  --og-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "SF Mono", Menlo,
             Consolas, "Liberation Mono", monospace;
  /* body copy (sans, matches the site) */
  --og-serif: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  /* display - wordmark + headings: the pixel "game" font */
  --og-display: "Pixeloid Sans Bold", "Pixeloid Sans", "Inter Tight", sans-serif;
  /* nav, labels, tables, buttons */
  --og-term: "Inter", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  --og-sans: var(--og-term);

  /* map mdBook's variables onto the palette */
  --bg: var(--og-bg);
  --fg: var(--og-fg);

  --sidebar-bg: #0b0d12;
  --sidebar-fg: #d6dce4;
  --sidebar-non-existant: #5b6675;
  --sidebar-active: var(--og-amber);
  --sidebar-spacer: var(--og-border);

  --scrollbar: var(--og-border-2);

  --icons: #6b7280;
  --icons-hover: var(--og-amber);

  --links: var(--og-amber);

  --inline-code-color: var(--og-amber-hi);

  --theme-popup-bg: var(--og-bg-2);
  --theme-popup-border: var(--og-border-2);
  --theme-hover: var(--og-amber-soft);

  --quote-bg: var(--og-bg-2);
  --quote-border: var(--og-amber-line);

  --table-border-color: var(--og-border-2);
  --table-header-bg: var(--og-bg-3);
  --table-alternate-bg: var(--og-bg-2);

  --searchbar-border-color: var(--og-border-2);
  --searchbar-bg: var(--og-bg-2);
  --searchbar-fg: var(--og-fg);
  --searchbar-shadow-color: rgba(0, 0, 0, 0.6);
  --searchresults-header-fg: var(--og-fg-dim);
  --searchresults-border-color: var(--og-border-2);
  --searchresults-li-bg: var(--og-bg-2);
  --search-mark-bg: var(--og-amber-dim);

  --color-scheme: dark;
}

/* ---- typography -------------------------------------------------------- */

html { font-family: var(--og-serif); overflow-x: clip; }

/* The heavens, rendered as a terminal: a golden aura from above (the celestial
   palace light), a faint starfield, a soft horizon glow at the foot, the CRT
   scanlines, and a barely-there terminal grid - all painted as flat layered
   backgrounds (no overlay, no z-index juggling; the overlay version broke the
   sidebar's fixed positioning). attachment:fixed keeps the sky still while the
   text scrolls past it. */
body {
  /* transparent so the fixed starfield canvas behind it is never covered; the
     opaque sky base lives on <html> (mdBook sets it via --bg). The canvas paints
     the aura, clouds and stars - no scanlines/grid here (they clashed with it). */
  background-color: transparent;
  font-size: 1.12rem;
}
/* reading column: Inter body, sized to match the site */
.content {
  font-size: 1.06rem;
  line-height: 1.72;
  color: #dfe3ec;
  letter-spacing: -0.006em;
}

/* the living heavens - animated starfield canvas, painted by theme/sky.js,
   pinned behind all content so it can't disturb the sidebar or click targets */
#og-sky {
  position: fixed;
  inset: 0;            /* fills the viewport without 100vw's scrollbar overflow */
  z-index: -1;
  pointer-events: none;
  display: block;
}

/* The page chrome paints an opaque background over the whole viewport, which
   would bury the fixed starfield canvas - make it transparent so the heavens
   show through (the opaque sky base stays on <html>, below the canvas). */
.page-wrapper { background-color: transparent !important; }

/* roomier reading measure, centered between the nav arrows - mdBook centers
   <main> with auto margins, so the max-width belongs there, not on .content */
.content main {
  position: relative;
  z-index: 0;
  max-width: 51rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 2.6rem;
  padding-bottom: 5rem;
}
/* a soft "reading page" - dims the starfield behind the text so the serif body
   is crisp, while the sky stays bright in the margins and sidebar. Feathered on
   all four edges (horizontal gradient + vertical mask) so there's no hard box. */
.content main::before {
  content: "";
  position: absolute;
  inset: -2rem -11rem 0 -11rem;
  z-index: -1;
  pointer-events: none;
  /* wide, gentle horizontal wash - long ramps so it dissolves into the sky */
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(5, 6, 15, 0.50) 26%,
    rgba(5, 6, 15, 0.50) 74%,
    transparent 100%);
  /* feather the top and bottom too, with a long bottom fade */
  -webkit-mask-image: linear-gradient(transparent 0, #000 3rem, #000 calc(100% - 9rem), transparent);
  mask-image: linear-gradient(transparent 0, #000 3rem, #000 calc(100% - 9rem), transparent);
}
.content p,
.content li { line-height: 1.78; }
.content p { margin: 0 0 1.15rem; }
.content ul,
.content ol { margin: 0 0 1.25rem; }
.content li { margin: 0.3rem 0; }
.content li > ul,
.content li > ol { margin: 0.3rem 0 0.4rem; }

.content h1,
.content h2,
.content h3,
.content h4 {
  font-family: var(--og-display);
  font-weight: 400;          /* Pixeloid is a single-weight bitmap font */
  letter-spacing: 0;
  color: #f1f3f8;
}

.content h1 {
  font-size: clamp(2.15rem, 4vw, 2.85rem);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 1.6rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--og-border-2);
}
/* generous air above sections so each one reads as its own breath */
.content h2 {
  font-size: 1.62rem;
  line-height: 1.22;
  margin: 4rem 0 1.2rem;
}
.content h3 {
  font-size: 1.26rem;
  line-height: 1.32;
  margin: 2.8rem 0 0.85rem;
}
.content h4 {
  font-size: 1.06rem;
  margin: 2.1rem 0 0.7rem;
}

.content a { text-decoration: none; }
.content a:hover { color: var(--og-amber-hi); text-decoration: underline; }

/* the terminal accent: small eyebrow/kicker labels in the Pixeloid "game" font.
   headings stay Inter Tight; only these little uppercase tags go pixel-terminal. */
.chapter .part-title,
.content table thead th,
.content .sidenote > b:first-child,
.content .sidenote > strong:first-child,
.content blockquote > strong:first-child,
.og-king-label,
.pagetoc-label {
  font-family: "Pixeloid Mono", var(--og-mono);
  letter-spacing: 0.04em;
}

::selection { background: var(--og-amber); color: #06070f; }

/* ---- sidebar ----------------------------------------------------------- */

/* transparent sidebar so the same sky runs through it and the content - one
   continuous heaven, no panel seam. a text-shadow keeps the nav crisp over it. */
#sidebar, .sidebar {
  font-family: var(--og-term);
  font-size: 0.94rem;
  letter-spacing: -0.005em;
  background-color: transparent !important;
  border-right: 1px solid var(--og-border);
}
.sidebar a, .sidebar .part-title {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}
/* start the sidebar's first item level with the page H1 */
.sidebar .sidebar-scrollbox { padding: 6.2rem 16px 14px; }

.chapter li.chapter-item {
  line-height: 1.6;
  margin-top: 0.5em;
}
.chapter li a { color: var(--sidebar-fg); }
.chapter li a:hover { color: var(--og-amber-hi); }
.chapter li a.active {
  color: var(--og-amber);
  font-weight: 700;
}
/* part titles like "Concepts", "Run a node" */
/* match mdBook's own ".chapter li.part-title" specificity so our margin wins */
.chapter li.part-title {
  color: #b9c1cd;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.92rem;
  /* generous air ABOVE each section group so they read as distinct areas */
  margin-top: 4em;
  margin-bottom: 0.5em;
}
/* the very first part-title doesn't need the big gap above it */
.chapter > li.part-title:first-child { margin-top: 0.5em; }

.sidebar-resize-handle { background: var(--og-border); }

/* ---- top menu bar ------------------------------------------------------ */

.menu-title {
  font-family: var(--og-term);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
}
.og-seal { width: 1.25em; height: 1.25em; display: block; flex: 0 0 auto; }
.og-brand-link { display: inline-flex; align-items: baseline; gap: 0.4ch; color: inherit !important; text-decoration: none !important; }
.og-brand-name { color: var(--og-fg); }
.og-brand-labs { color: var(--og-fg-dim); font-weight: 500; }

/* colophon footer, like the OGONG Labs site */
.og-foot {
  margin-top: 5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--og-border);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
  font-family: var(--og-mono);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  color: var(--og-fg-dim);
}
.og-foot-c { display: inline-flex; align-items: center; gap: 0.5ch; }
.og-foot .og-seal { width: 1.1em; height: 1.1em; }
.og-foot-terms { color: var(--og-amber-dim); letter-spacing: 0.06em; }
/* drop the theme/color picker (fixed custom theme) and the edit pencil */
#mdbook-theme-toggle, #theme-toggle,
#git-edit-button, .right-buttons a[href*="/edit/"] { display: none !important; }
/* translucent menu bar so the heavens drift behind it */
#menu-bar, #mdbook-menu-bar {
  background-color: rgba(6, 7, 15, 0.30) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--og-border);
}
#menu-bar .menu-title, #menu-bar .icon-button,
#mdbook-menu-bar .menu-title, #mdbook-menu-bar .icon-button {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

/* ---- inline code + code blocks (terminal cards) ------------------------ */

.content code {
  font-family: var(--og-mono);
}
.content :not(pre) > code {
  background: var(--og-amber-soft);
  border: 1px solid var(--og-border-2);
  border-radius: 4px;
  padding: 0.12em 0.4em;
  font-size: 0.88em;
}

.content pre {
  clear: right;          /* never let a code block squish beside a margin note */
  background: rgba(150, 170, 255, 0.04);   /* a soft wash that fades into the sky */
  border: 0;
  border-radius: 12px;
  padding: 1.3em 1.55em;
  margin: 2rem 0;
}
.content pre code { background: transparent !important; padding: 0; }

/* ---- notes / callouts as editorial cards ------------------------------- */

.content blockquote {
  background: rgba(14, 17, 30, 0.55);
  border: 1px solid var(--og-border-2);
  border-radius: 12px;
  padding: 1.15rem 1.4rem;
  margin: 1.9rem 0;
  color: var(--og-fg);
  box-shadow: 0 12px 34px -22px rgba(0, 0, 0, 0.9);
}
.content blockquote > :first-child { margin-top: 0; }
.content blockquote > :last-child { margin-bottom: 0; }
/* the leading bold word ("Note", "Status", "Important") becomes a small-caps
   eyebrow on its own line, like a magazine callout label */
.content blockquote strong:first-child {
  display: block;
  font-family: var(--og-term);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--og-amber-hi);
  margin-bottom: 0.5rem;
}

/* ---- tables ------------------------------------------------------------ */

.content table { border-collapse: collapse; clear: right; }
.content table thead th {
  font-family: var(--og-term);
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--og-amber);
  background: var(--og-bg-3);
  border: 1px solid var(--og-border-2);
}
.content table td { border: 1px solid var(--og-border-2); }
.content table tbody tr:nth-child(2n) { background: var(--og-bg-2); }
.content table tbody tr:hover { background: var(--og-amber-soft); }
.content table code { font-size: 0.84em; }

/* ===========================================================================
   Magazine pull quotes - an excerpt set large in the side margin.
   Authoring: <aside class="pullquote">Text…<cite>Label</cite></aside>
   placed in the markdown right before the paragraph it should sit beside.
   =========================================================================== */

.content .pullquote {
  float: right;
  clear: right;
  width: 15rem;
  margin: 0.6rem 0 1.6rem 2.2rem;
  padding-top: 0.95rem;
  border-top: 2px solid var(--og-amber);
  font-family: var(--og-display);
  font-optical-sizing: auto;
  font-style: italic;
  font-weight: 400;
  font-size: 1.55rem;
  line-height: 1.26;
  color: #e9ecf3;
}
.content .pullquote cite {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--og-term);
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--og-amber-hi);
}
/* where the column has gutter to spare, pull the quote out into the margin so
   body text keeps its full measure beside it */
@media (min-width: 1080px) {
  .content .pullquote { width: 16rem; margin-right: -7rem; }
}
/* on narrow screens, don't float a tiny column - let it span, centered */
@media (max-width: 700px) {
  .content .pullquote {
    float: none;
    width: auto;
    max-width: 32rem;
    margin: 1.8rem auto;
    text-align: center;
  }
}

/* ===========================================================================
   Margin sidenotes - tangential asides set small, off in the right margin.
   Authoring: <aside class="sidenote"><b>Label</b> body text…</aside>
   placed right before the paragraph it relates to.
   =========================================================================== */

.content .sidenote {
  /* same editorial voice as a pull quote: short, serif, italic, gold-ruled */
  margin: 1.9rem 0;
  padding-top: 0.85rem;
  border-top: 2px solid var(--og-amber);
  font-family: var(--og-display);
  font-optical-sizing: auto;
  font-style: italic;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.32;
  color: #e3e7f1;
}
/* the leading label is a small-caps eyebrow; inner bold/links stay normal */
.content .sidenote > b:first-child,
.content .sidenote > strong:first-child {
  display: block;
  margin-bottom: 0.45rem;
  font-family: var(--og-term);
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--og-amber-hi);
}
.content .sidenote a { color: var(--og-amber-hi); }
.content .sidenote code {
  font-family: var(--og-mono);
  font-style: normal;
  font-size: 0.8em;
  color: var(--og-amber-hi);
}
/* wide viewports: lift it out into the right margin, clear of the text column.
   breakpoint high enough that a 13rem note can't overflow into a scrollbar */
@media (min-width: 1650px) {
  .content .sidenote {
    position: absolute;
    left: 100%;
    width: 13rem;
    margin: 0.3rem 0 0 1.6rem;
  }
}

/* ===========================================================================
   Landing page: NFO-style ASCII hero + flat nav list (no boxes)
   =========================================================================== */

.ogong-kicker {
  font-family: var(--og-term);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--og-fg-dim);
  margin: 1.4rem 0 0.8rem;
}
.ogong-kicker .og-prompt { color: var(--og-green); margin-right: 0.7ch; }
/* blinking terminal cursor after the kicker command */
.ogong-kicker::after {
  content: "\2588";          /* █ */
  color: var(--og-amber);
  margin-left: 0.3ch;
  animation: og-blink 1.05s steps(1) infinite;
}
@keyframes og-blink { 50% { opacity: 0; } }

.ogong-wordmark {
  font-family: var(--og-display);
  font-size: clamp(3.2rem, 11vw, 6rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  margin: 0.5rem 0 1rem;
  color: var(--og-amber-hi);
  text-shadow:
    0 0 18px rgba(255, 176, 0, 0.35),
    0 0 44px rgba(255, 176, 0, 0.18);
  border: 0;
}
.ogong-wordmark::before { content: none !important; }

/* the deck / standfirst - editorial serif, lighter weight, larger measure */
.ogong-tag {
  font-family: var(--og-serif);
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  font-weight: 400;
  line-height: 1.4;
  color: #c3cad9;
  max-width: 30ch;
  margin: 0 0 2rem;
}

.ogong-hero-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 3.4rem; }
.ogong-btn {
  font-family: var(--og-term);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.7em 1.3em;
  border-radius: 7px;
  /* secondary ("How it works") - celestial-blue identity, distinct from gold */
  border: 1px solid rgba(143, 166, 255, 0.45);
  background: rgba(143, 166, 255, 0.09);
  color: #e7ebf6 !important;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ogong-btn:hover {
  border-color: var(--og-celest);
  background: rgba(143, 166, 255, 0.18);
  color: #ffffff !important;
  text-decoration: none !important;
}
.ogong-btn-primary {
  background: var(--og-amber);
  border-color: var(--og-amber);
  color: #1a1303 !important;
  font-weight: 600;
}
.ogong-btn-primary:hover {
  background: var(--og-amber-hi);
  border-color: var(--og-amber-hi);
  color: #1a1303 !important;
}

/* flat nav list (replaces boxed cards) */
.ogong-nav { display: flex; flex-direction: column; margin: 0.5rem 0 1rem; }
.ogong-nav a {
  display: block;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--og-border);
  color: var(--og-fg) !important;
  text-decoration: none !important;
}
.ogong-nav a b {
  font-family: var(--og-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--og-amber-hi);
  transition: color 0.15s ease;
}
.ogong-nav a:hover b { color: var(--og-amber); }
.ogong-nav a span {
  display: block;
  font-family: var(--og-serif);
  color: var(--og-fg-dim);
  font-size: 1rem;
  line-height: 1.5;
  margin-top: 0.3rem;
}

/* ===========================================================================
   Per-page "On this page" ToC (right rail) - built by theme/pagetoc.js
   =========================================================================== */

/* The right margin is dedicated to editorial notes + pull quotes, which would
   collide with a floating ToC at this content width. Hidden for now; flip this
   back on (and narrow the content) if the mini-contents rail is preferred. */
.pagetoc {
  display: none;
  position: fixed;
  top: 6rem;
  right: 1.5rem;
  width: 240px;
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
  font-family: var(--og-term);
  z-index: 2;
}
.pagetoc-label {
  color: var(--og-amber-hi);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.pagetoc nav { display: flex; flex-direction: column; gap: 0.1rem; }
.pagetoc a {
  display: block;
  color: #b3bbc7 !important;
  font-size: 0.98rem;
  line-height: 1.45;
  padding: 0.3rem 0 0.3rem 0.8rem;
  border-left: 2px solid var(--og-border-2);
  text-decoration: none !important;
  transition: color 0.1s ease, border-color 0.1s ease;
}
.pagetoc a.pagetoc-h3 { padding-left: 1.6rem; font-size: 0.92rem; }
.pagetoc a:hover { color: var(--og-amber-hi) !important; }
.pagetoc a.active {
  color: var(--og-amber) !important;
  border-left-color: var(--og-amber);
}

/* only show the right rail when there's genuinely room for it */
@media (max-width: 1500px) { .pagetoc { display: none; } }

@media (max-width: 700px) {
  .ogong-ascii { font-size: 0.6rem; }
}

/* ===========================================================================
   OGONG narrates the margins - the Monkey King floats on the right and speaks
   every note / pull quote as a bubble (theme/king-docs.js). Wide screens only.
   =========================================================================== */

#og-king { display: none; }
body.og-king-on #og-king {
  display: block;
  position: fixed;
  right: 9.5rem;
  bottom: 8vh;
  width: 168px;
  z-index: 6;
  pointer-events: none;
}
.og-king-body {
  will-change: transform;
  animation: ogk-bob 4.6s ease-in-out infinite;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.55));
}
.og-king-body.talking { animation-duration: 2.3s; }
.ogk-fly { width: 100%; height: auto; display: block; overflow: visible; }
.ogk-cloud {
  transform-box: view-box;
  transform-origin: 160px 282px;
  animation: ogk-sway 5s ease-in-out infinite;
}
@keyframes ogk-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes ogk-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

/* the golden gaze: his eyes flash gold every so often, with a glow */
.ogk-iris { animation: ogk-iris 7s ease-in-out infinite; }
.ogk-sclera { animation: ogk-sclera 7s ease-in-out infinite; }
.ogk-eyes { animation: ogk-glow 7s ease-in-out infinite; }
@keyframes ogk-iris { 0%, 86%, 100% { fill: #181009; } 90%, 95% { fill: #ff8c00; } }
@keyframes ogk-sclera { 0%, 86%, 100% { fill: #ffffff; } 90%, 95% { fill: #ffd24a; } }
@keyframes ogk-glow {
  0%, 86%, 100% { filter: none; }
  90%, 95% { filter: drop-shadow(0 0 5px rgba(255, 210, 60, 0.95)) drop-shadow(0 0 13px rgba(255, 176, 0, 0.75)); }
}

/* the speech bubble, up and to the left of the King, tail pointing down at him */
.og-king-bubble {
  position: absolute;
  right: 132px;
  bottom: 152px;
  width: 18.5rem;
  max-width: 40vw;
  padding: 0.95rem 1.2rem;
  background: #fdfdf8;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 14px;
  box-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.6);
  /* square off the tail corner so the nub tucks under it (only the tip shows) */
  border-bottom-right-radius: 3px;
  color: #20242f;
  font-family: var(--og-serif);
  font-style: normal;
  font-size: 1.04rem;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(10px) scale(0.95);
  transform-origin: bottom right;
  transition: opacity 0.18s ease, transform 0.24s cubic-bezier(0.2, 1.3, 0.4, 1);
  pointer-events: none;
}
.og-king-bubble.show { opacity: 1; transform: translateY(0) scale(1); }
/* the tail: an arrow on the bottom-right corner pointing southeast at the King */
.og-king-bubble::after {
  content: "";
  position: absolute;
  right: -8px;
  bottom: -6px;
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 15px solid #fdfdf8;
  transform: rotate(-45deg);
  transform-origin: center;
  filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.2));
}
.og-king-label {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--og-term);
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #b06a00;
}
.og-king-bubble code {
  font-family: var(--og-mono);
  font-style: normal;
  font-size: 0.82em;
  color: #9a5b00;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 3px;
  padding: 0 0.25em;
}

/* while the King narrates: notes/quotes become his speech, content slides left + widens */
body.og-king-on .content .sidenote,
body.og-king-on .content .pullquote { display: none !important; }
body.og-king-on .content main {
  max-width: 50rem;
  margin-left: 12rem;
  margin-right: auto;
}