/* =====================================================================
   Colibri — custom.css  (R74.3.1 — Ring/Title Overlap Fix)
   ---------------------------------------------------------------------
   R74.3.1 over R74.3:
   - Enlarged .cb-logo-stage to the full --cb-ring-size (clamp 380 →
     560px desktop, min(86vw, 340px) mobile) so the layout reserves
     space for the Greek ring's full extent. Without this, the ring's
     bottom half collided with the "Colibri AMS" title and tagline
     (letters κ / ι / θ / η / ε sitting on top of the text).
   - .cb-logo-stage now flex-centers the .cb-logo img inside the
     larger box, replacing the old `margin: 0 auto` on .cb-logo.
   - The gold halo (.cb-logo-stage::before) is now pinned to the
     logo's centre and sized to the mark, not the stage, so it
     stays on the hummingbird instead of inflating with the stage.
   - .cb-greek-overlay simplified back to `inset: 0` since its
     parent now IS the ring size.
   - Mobile --cb-hero-mark-size bumped 172 → 160, and mobile gets
     its own --cb-ring-size override.
   - Cache bust: head_custom.html ?v=r74-3 → ?v=r74-3-1.

   R74.3 changes over R74.1:
   - Greek concept ring is now ALWAYS VISIBLE (opacity 0.78 at rest,
     1.0 on hover/focus). The R74.1 behaviour of only revealing the
     letters on .cb-logo-stage:hover killed discoverability — the
     ring is part of the hero's visual identity now, not a hidden
     easter egg.
   - Letters are placed by polar coordinate math in the JS engine
     (see docs/assets/js/colibri-hero.js §3), not by hand-picked
     percent-of-stage values. Every letter sits on a perfect ring.
   - Tooltip card is a CSS-only child of each letter — no JS tooltip
     geometry, no fixed-position flip math. Letters in the top half
     of the ring carry .cb-greek--tip-below which flips the card
     beneath the letter via CSS only.
   - Axis color rims: each letter carries a subtle axis-tinted border
     at rest (copper / plum / sage / gold) and blooms to full axis
     color on hover. The ring now encodes axis distribution visually.
   - Removed the 7-second hover easter egg (.cb-eggshell).
   - Removed the runtime esm.sh import of @chenglou/pretext from the
     JS engine. Zero network dependencies for the hero.
   - Cache-bust: head_custom.html appends ?v=r74-3.

   R74.1 changes retained:
   - Single hummingbird (no background-image duplicate).
   - Atmospheric paper → gray-1 hero gradient.
   - Global typography rhythm on .main-content.

   Governed by docs/design-system.md §3–§7.
   ===================================================================== */

/* ------------------------------------------------------------------
   1. :root — R74 canonical tokens
   ------------------------------------------------------------------ */
:root {
  /* Core palette (§3.1) */
  --cb-ink:    #0E1013;
  --cb-paper:  #FAFAF7;
  --cb-gold:   #C29B3F;
  --cb-sage:   #7A9B85;
  --cb-plum:   #4A3E5E;
  --cb-copper: #B86B3C;

  /* Neutral scale (§3.3) */
  --cb-gray-0: #FAFAF7;
  --cb-gray-1: #ECECE7;
  --cb-gray-2: #C8C7C1;
  --cb-gray-3: #8E8D87;
  --cb-gray-4: #3D3C38;
  --cb-gray-5: #1C1C1A;

  /* Hero variables (§5.3) */
  --cb-hero-bg-start: var(--cb-paper);
  --cb-hero-bg-end:   var(--cb-gray-1);
  --cb-hero-mark-size: 260px;
  --cb-hero-mark-hover-scale: 1.05;
  --cb-hero-title-size: clamp(2.4rem, 5.2vw + 0.6rem, 4.25rem);
  --cb-hero-tempo: 8s;
  --cb-hero-greek-fade: 0.5;

  /* R74.3.1: the ring box must be larger than the logo so the
     letters orbit OUTSIDE the hummingbird. The stage frame uses
     --cb-ring-size for layout reservation, so the title/tagline
     flow below the full ring extent (no overlap). */
  --cb-ring-size: clamp(380px, 52vw, 560px);

  /* Typography rhythm */
  --cb-prose-max: 72ch;
  --cb-line: 1.65;
  --cb-radius: 14px;
  --cb-ease:      cubic-bezier(0.2, 0.9, 0.3, 1);
  --cb-ease-out:  cubic-bezier(0.5, 0, 0.8, 0.5);

  /* Axis channel — overridden per .cb-axis-* */
  --cb-card-axis: var(--cb-gray-3);

  /* Font stacks (§4.2) */
  --cb-font-display: "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --cb-font-body:    "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --cb-font-greek:   "GFS Didot", "Linux Libertine", "Cambria Math", "Segoe UI Symbol", serif;
  --cb-font-mono:    "JetBrains Mono", "Fira Code", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

/* ------------------------------------------------------------------
   2. Dark mode (prefers-color-scheme: dark)
   ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root {
    --cb-ink:    #FAFAF7;
    --cb-paper:  #0E1013;
    --cb-gold:   #D7B257;
    --cb-sage:   #8FB29A;
    --cb-plum:   #6B5A85;
    --cb-copper: #CE8052;

    --cb-gray-0: #0E1013;
    --cb-gray-1: #16181D;
    --cb-gray-2: #2A2D35;
    --cb-gray-3: #6B6A65;
    --cb-gray-4: #C8C7C1;
    --cb-gray-5: #ECECE7;

    --cb-hero-bg-start: #141826;  /* deep indigo */
    --cb-hero-bg-end:   #08090C;  /* near-black */
  }
}

/* ------------------------------------------------------------------
   3. Base typography — applied across EVERY page (not just hero)
   ------------------------------------------------------------------ */
body {
  background: var(--cb-paper);
  color: var(--cb-gray-4);
  font-family: var(--cb-font-body);
  font-size: 1.0625rem;            /* 17px */
  line-height: var(--cb-line);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11", "kern";
}

.main-content {
  font-family: var(--cb-font-body);
  font-size: 1.0625rem;
  line-height: var(--cb-line);
  color: var(--cb-gray-4);
}

.main-content p,
.main-content ul,
.main-content ol,
.main-content blockquote,
.main-content pre {
  max-width: var(--cb-prose-max);
}

.main-content h1,
.main-content h2,
.main-content h3,
.main-content h4,
.main-content h5,
.main-content h6 {
  font-family: var(--cb-font-display);
  color: var(--cb-ink);
  letter-spacing: -0.015em;
  font-feature-settings: "lnum", "kern", "liga";
  margin-top: 2.2em;
  margin-bottom: 0.6em;
  line-height: 1.2;
}

.main-content h1 { font-size: 2.75rem; font-weight: 800; letter-spacing: -0.025em; margin-top: 1em; }
.main-content h2 { font-size: 2rem;    font-weight: 700; border-bottom: 1px solid var(--cb-gray-2); padding-bottom: 0.25em; }
.main-content h3 { font-size: 1.5rem;  font-weight: 700; font-family: var(--cb-font-body); letter-spacing: -0.005em; }
.main-content h4 { font-size: 1.2rem;  font-weight: 700; font-family: var(--cb-font-body); color: var(--cb-gray-5); }
.main-content h5,
.main-content h6 { font-size: 0.95rem; font-weight: 700; font-family: var(--cb-font-body); text-transform: uppercase; letter-spacing: 0.08em; color: var(--cb-gray-3); }

.main-content p {
  margin: 0 0 1.2em;
}

.main-content strong,
.main-content b {
  color: var(--cb-ink);
  font-weight: 700;
}

.main-content em,
.main-content i {
  color: var(--cb-gray-5);
}

/* ------------------------------------------------------------------
   4. Links — R74 copper → gold on hover
   ------------------------------------------------------------------ */
a,
.main-content a {
  color: var(--cb-copper);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--cb-copper) 35%, transparent);
  transition: color 0.2s var(--cb-ease), border-color 0.2s var(--cb-ease);
}
a:hover,
a:focus-visible,
.main-content a:hover,
.main-content a:focus-visible {
  color: var(--cb-gold);
  border-bottom-color: var(--cb-gold);
  outline: none;
}

/* Navigation and button links have no body underline */
.side-bar a,
.nav-list a,
.nav-list-link,
.site-title,
.cb-btn,
.cb-hero__cta,
.cb-cta a {
  border-bottom: none;
}

.side-bar a,
.nav-list-link {
  color: var(--cb-gray-4);
  font-weight: 500;
}
.side-bar a:hover,
.nav-list-link:hover,
.nav-list-link.active {
  color: var(--cb-copper);
  background: var(--cb-gray-1);
}

/* ------------------------------------------------------------------
   5. Code blocks, inline code, kbd
   ------------------------------------------------------------------ */
code, kbd, samp, pre,
.main-content code,
.main-content pre {
  font-family: var(--cb-font-mono);
  font-feature-settings: "calt", "ss02";
}

.main-content code {
  background: var(--cb-gray-1);
  color: var(--cb-gray-5);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  font-size: 0.92em;
  border: 1px solid var(--cb-gray-2);
}

.main-content pre {
  background: var(--cb-gray-1);
  color: var(--cb-gray-5);
  padding: 1em 1.2em;
  border-radius: var(--cb-radius);
  border: 1px solid var(--cb-gray-2);
  overflow-x: auto;
  font-size: 0.92em;
  line-height: 1.55;
}

.main-content pre code {
  background: transparent;
  border: none;
  padding: 0;
  color: inherit;
}

kbd {
  display: inline-block;
  padding: 2px 6px;
  background: var(--cb-gray-1);
  color: var(--cb-gray-5);
  border: 1px solid var(--cb-gray-2);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-size: 0.85em;
  line-height: 1;
}

/* ------------------------------------------------------------------
   6. Blockquotes — gold left rail, calmer interior
   ------------------------------------------------------------------ */
.main-content blockquote {
  border-left: 3px solid var(--cb-gold);
  background: color-mix(in srgb, var(--cb-gold) 7%, var(--cb-paper));
  color: var(--cb-gray-4);
  padding: 14px 18px 14px 20px;
  margin: 1.4em 0;
  font-style: normal;
  border-radius: 0 var(--cb-radius) var(--cb-radius) 0;
}

.main-content blockquote p:last-child {
  margin-bottom: 0;
}

.main-content blockquote strong {
  color: var(--cb-gold);
}

/* ------------------------------------------------------------------
   7. Tables — quiet rows, gold underline on headers
   ------------------------------------------------------------------ */
.main-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.4em 0;
  font-size: 0.95em;
  border: 1px solid var(--cb-gray-2);
  border-radius: var(--cb-radius);
  overflow: hidden;
}

.main-content th {
  background: var(--cb-gray-1);
  color: var(--cb-ink);
  border: none;
  border-bottom: 2px solid var(--cb-gold);
  padding: 10px 14px;
  text-align: left;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.main-content td {
  border: none;
  border-bottom: 1px solid var(--cb-gray-2);
  padding: 10px 14px;
  vertical-align: top;
}

.main-content tr:last-child td {
  border-bottom: none;
}

.main-content tr:nth-child(even) td {
  background: color-mix(in srgb, var(--cb-gray-1) 40%, transparent);
}

/* ------------------------------------------------------------------
   8. Horizontal rule
   ------------------------------------------------------------------ */
.main-content hr {
  border: none;
  height: 1px;
  background: var(--cb-gray-2);
  margin: 2.4em 0;
}

/* ------------------------------------------------------------------
   9. Hero container (.cb-hero) — R74.1 fix: NO background PNG
   ------------------------------------------------------------------ */
.cb-hero {
  position: relative;
  margin: -24px -24px 40px;
  padding: 104px 24px 80px;
  min-height: 620px;
  text-align: center;
  overflow: hidden;
  border-radius: var(--cb-radius);
  color: var(--cb-ink);
  background:
    radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--cb-gold) 8%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, var(--cb-hero-bg-start) 0%, var(--cb-hero-bg-end) 100%);
  isolation: isolate;
}

/* Subtle radial vignette for depth */
.cb-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--cb-ink) 8%, transparent) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.cb-hero > * {
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------------------------
   10. Hummingbird mark stage — the ONLY hummingbird on the page
   ------------------------------------------------------------------
   R74.3.1: the stage box is now sized to the full Greek ring extent
   (--cb-ring-size) and flex-centers the hummingbird mark inside it.
   The surrounding layout reserves space for the ring's full height,
   so letters can never overlap the title or tagline below.
   ------------------------------------------------------------------ */
.cb-logo-stage {
  position: relative;
  width: var(--cb-ring-size);
  max-width: 92vw;
  aspect-ratio: 1 / 1;
  margin: 0 auto 40px;
  /* Center the logo visually inside the larger ring box */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Gold halo — pinned to the logo, not the stage, so it stays on
   the hummingbird even though the stage is much larger than the mark. */
.cb-logo-stage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--cb-hero-mark-size) * 1.22);
  height: calc(var(--cb-hero-mark-size) * 1.22);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at center, color-mix(in srgb, var(--cb-gold) 22%, transparent) 0%, transparent 62%);
  z-index: 0;
  filter: blur(2px);
  pointer-events: none;
}

.cb-hero__mark,
.cb-logo {
  position: relative;
  z-index: 1;
  display: block;
  width: var(--cb-hero-mark-size);
  height: var(--cb-hero-mark-size);
  max-width: 100%;
  max-height: 100%;
  /* flex-centered by the stage — no margin auto needed */
  color: var(--cb-gold);
  transition: transform 0.6s var(--cb-ease), filter 0.6s var(--cb-ease);
  will-change: transform;
}

.cb-hero__mark img,
.cb-logo img,
.cb-hero__mark svg,
.cb-logo svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 6px 24px color-mix(in srgb, var(--cb-ink) 18%, transparent));
}

.cb-hero__mark:hover,
.cb-hero__mark:focus-visible,
.cb-logo:hover,
.cb-logo:focus-visible,
.cb-logo-stage:hover .cb-logo,
.cb-logo-stage:focus-within .cb-logo {
  transform: scale(var(--cb-hero-mark-hover-scale)) translateY(-4px);
  outline: none;
}

/* ------------------------------------------------------------------
   11. Hero headline, tagline, subtitle
   ------------------------------------------------------------------ */
.cb-hero__title,
.cb-hero h1.cb-title,
h1.cb-title {
  margin: 0 0 14px;
  font-family: var(--cb-font-display);
  font-size: var(--cb-hero-title-size);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--cb-ink);
  font-feature-settings: "lnum", "kern", "liga";
}

/* Override base-content h1 rules when inside the hero */
.cb-hero h1.cb-title {
  border-bottom: none;
  padding-bottom: 0;
  margin-top: 0;
}

.cb-title-accent {
  color: var(--cb-gold);
  font-style: italic;
  font-weight: 800;
  letter-spacing: 0.01em;
  margin-left: 0.12em;
}

.cb-hero__tagline,
.cb-tagline {
  margin: 0 auto 28px;
  max-width: 780px;
  font-family: var(--cb-font-body);
  font-size: clamp(0.95rem, 1.1vw + 0.4rem, 1.15rem);
  color: var(--cb-gray-4);
  letter-spacing: 0.02em;
  font-weight: 500;
}

.cb-tagline .cb-dot {
  display: inline-block;
  margin: 0 10px;
  color: var(--cb-gold);
  font-weight: 700;
}

.cb-hero__subtitle,
.cb-subtitle {
  margin: 0 auto 40px;
  max-width: 680px;
  font-family: var(--cb-font-body);
  font-size: 1rem;
  color: var(--cb-gray-4);
  line-height: 1.6;
}

.cb-subtitle strong {
  color: var(--cb-ink);
  font-weight: 700;
}

/* ------------------------------------------------------------------
   12. Hero CTA buttons
   ------------------------------------------------------------------ */
.cb-cta {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-bottom: 28px;
}

.cb-hero__cta,
.cb-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-family: var(--cb-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--cb-ease),
              background-color 0.25s var(--cb-ease),
              border-color 0.25s var(--cb-ease),
              color 0.25s var(--cb-ease),
              box-shadow 0.25s var(--cb-ease);
}

.cb-hero__cta--primary,
.cb-btn-primary {
  background: var(--cb-gold);
  color: var(--cb-ink);
  border-color: var(--cb-gold);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--cb-gold) 28%, transparent);
}
.cb-hero__cta--primary:hover,
.cb-btn-primary:hover {
  transform: translateY(-2px);
  background: var(--cb-copper);
  border-color: var(--cb-copper);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--cb-copper) 30%, transparent);
}

.cb-hero__cta--secondary,
.cb-btn-secondary {
  background: transparent;
  color: var(--cb-ink);
  border-color: var(--cb-ink);
}
.cb-hero__cta--secondary:hover,
.cb-btn-secondary:hover {
  background: var(--cb-ink);
  color: var(--cb-paper);
  transform: translateY(-2px);
}

.cb-hero__cta--tertiary {
  background: transparent;
  color: var(--cb-copper);
  border-color: transparent;
  padding: 13px 12px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.cb-hero__cta--tertiary:hover {
  color: var(--cb-gold);
}

/* Hint line */
.cb-hint {
  display: block;
  margin-top: 20px;
  font-family: var(--cb-font-body);
  font-size: 0.82rem;
  color: var(--cb-gray-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cb-hint::before { content: "↳  "; opacity: 0.55; }

/* ------------------------------------------------------------------
   13. Greek concept ring (R74.3 senior rewrite)
   ------------------------------------------------------------------
   Fifteen Greek letters orbit the hummingbird on a mathematical ring.
   - Placement is polar-coordinate (see colibri-hero.js §3).
   - Always visible — discoverable without hovering.
   - Hover/focus blooms the letter to its axis colour and reveals
     a CSS-only tooltip card. The tooltip flips above/below based
     on which half of the ring the letter sits in (no JS geometry).
   ------------------------------------------------------------------ */

/* Overlay fills the ring-sized stage. The stage reserves space for
   the ring in the document flow (R74.3.1), so the overlay simply
   inherits that box with inset: 0. */
.cb-greek-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

/* Individual letter — each is a semantic <a> link. */
.cb-greek {
  position: absolute;
  /* left/top set per-letter by JS; these transforms center the pill
     on its polar point. */
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1em;
  min-height: 2.1em;
  padding: 0.18em 0.5em;
  background: color-mix(in srgb, var(--cb-paper) 92%, transparent);
  border: 1.5px solid var(--cb-gray-2);
  border-radius: 999px;
  color: var(--cb-ink);
  font-family: var(--cb-font-greek);
  font-size: clamp(1.15rem, 1.3vw + 0.55rem, 1.8rem);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--cb-ink) 10%, transparent);
  backdrop-filter: blur(2px);
  /* Enter animation → holds at 0.78 opacity; perpetual float kicks
     in once the enter finishes. */
  opacity: 0;
  animation:
    cb-greek-enter 700ms var(--cb-ease) var(--cb-enter-delay, 0s) forwards,
    cb-greek-float 6.5s ease-in-out var(--cb-float-delay, 0s) 900ms infinite alternate;
  transition:
    background-color 240ms var(--cb-ease),
    border-color 240ms var(--cb-ease),
    color 240ms var(--cb-ease),
    box-shadow 240ms var(--cb-ease),
    transform 240ms var(--cb-ease);
}

/* Axis colour hints — subtle rim at rest, full bloom on hover. */
.cb-axis-execution    { --cb-greek-accent: var(--cb-copper); }
.cb-axis-intelligence { --cb-greek-accent: var(--cb-plum); }
.cb-axis-legitimacy   { --cb-greek-accent: var(--cb-sage); }
.cb-axis-cross        { --cb-greek-accent: var(--cb-gold); }

.cb-greek.cb-axis-execution    { border-color: color-mix(in srgb, var(--cb-copper) 45%, var(--cb-gray-2)); }
.cb-greek.cb-axis-intelligence { border-color: color-mix(in srgb, var(--cb-plum)   45%, var(--cb-gray-2)); }
.cb-greek.cb-axis-legitimacy   { border-color: color-mix(in srgb, var(--cb-sage)   45%, var(--cb-gray-2)); }
.cb-greek.cb-axis-cross        { border-color: color-mix(in srgb, var(--cb-gold)   45%, var(--cb-gray-2)); }

.cb-greek:hover,
.cb-greek:focus-visible {
  background: var(--cb-paper);
  border-color: var(--cb-greek-accent, var(--cb-gold));
  color: var(--cb-greek-accent, var(--cb-gold));
  transform: translate(-50%, -50%) scale(1.14);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--cb-greek-accent, var(--cb-gold)) 32%, transparent);
  outline: none;
  opacity: 1;
  /* Pause the float animation while hovered so the card is steady. */
  animation-play-state: running, paused;
  z-index: 6;
}

.cb-greek-mark {
  display: inline-block;
  font-family: var(--cb-font-greek);
  pointer-events: none;
}

/* --- Tooltip card — pure CSS, child of the letter ---------------- */
.cb-greek-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 14px);
  transform: translate(-50%, 6px);
  width: max(220px, 22ch);
  max-width: min(320px, 72vw);
  padding: 12px 14px;
  background: var(--cb-paper);
  border: 1px solid var(--cb-gray-2);
  border-radius: 12px;
  color: var(--cb-gray-4);
  font-family: var(--cb-font-body);
  font-size: 0.82rem;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
  box-shadow: 0 18px 48px color-mix(in srgb, var(--cb-ink) 22%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms var(--cb-ease), transform 180ms var(--cb-ease);
  z-index: 10;
}

/* Flip the card beneath the letter when the letter is in the top
   half of the ring (so it never clips above the hero). */
.cb-greek--tip-below .cb-greek-tip {
  bottom: auto;
  top: calc(100% + 14px);
  transform: translate(-50%, -6px);
}

.cb-greek:hover .cb-greek-tip,
.cb-greek:focus-visible .cb-greek-tip,
.cb-greek:focus-within .cb-greek-tip {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.cb-greek-tip-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}

.cb-greek-tip-letter {
  font-family: var(--cb-font-greek);
  font-size: 1.25rem;
  color: var(--cb-gold);
  line-height: 1;
}

.cb-greek-tip-name {
  font-weight: 700;
  color: var(--cb-ink);
  font-size: 0.94rem;
}

.cb-greek-tip-desc {
  display: block;
  color: var(--cb-gray-4);
  margin-bottom: 8px;
}

.cb-greek-tip-axis {
  display: inline-block;
  padding: 2px 10px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--cb-greek-accent, var(--cb-gray-2));
  color: var(--cb-greek-accent, var(--cb-gray-4));
  border-radius: 999px;
  background: color-mix(in srgb, var(--cb-greek-accent, var(--cb-gray-2)) 8%, var(--cb-paper));
}

/* --- Ring animations -------------------------------------------- */
@keyframes cb-greek-enter {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.55);
  }
  to {
    opacity: 0.78;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Subtle breathing — 6.5s per cycle, staggered via --cb-float-delay. */
@keyframes cb-greek-float {
  from {
    transform: translate(-50%, calc(-50% + 0px)) scale(1);
  }
  to {
    transform: translate(-50%, calc(-50% - 5px)) scale(1.015);
  }
}

/* ------------------------------------------------------------------
   17. Dark-mode overrides
   ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  body {
    background: var(--cb-paper);
    color: var(--cb-gray-4);
  }

  .main-content,
  .main-content p {
    color: var(--cb-gray-4);
  }

  .main-content h1,
  .main-content h2,
  .main-content h3,
  .main-content h4,
  .main-content h5,
  .main-content h6 {
    color: var(--cb-ink);
  }

  .main-content h2 {
    border-bottom-color: var(--cb-gray-2);
  }

  .main-content code {
    background: var(--cb-gray-1);
    color: var(--cb-gray-5);
    border-color: var(--cb-gray-2);
  }

  .main-content pre {
    background: var(--cb-gray-1);
    color: var(--cb-gray-5);
    border-color: var(--cb-gray-2);
  }

  .main-content blockquote {
    background: color-mix(in srgb, var(--cb-gold) 10%, var(--cb-paper));
    color: var(--cb-gray-4);
  }

  .main-content th {
    background: var(--cb-gray-1);
    color: var(--cb-ink);
  }

  .main-content tr:nth-child(even) td {
    background: color-mix(in srgb, var(--cb-gray-1) 30%, transparent);
  }

  .main-content td {
    border-bottom-color: var(--cb-gray-2);
  }

  .cb-hero__title,
  .cb-hero h1.cb-title,
  h1.cb-title {
    color: var(--cb-ink);
  }

  .cb-hero__tagline,
  .cb-tagline,
  .cb-hero__subtitle,
  .cb-subtitle {
    color: var(--cb-gray-4);
  }

  .cb-subtitle strong { color: var(--cb-ink); }

  .cb-greek {
    background: color-mix(in srgb, var(--cb-paper) 94%, var(--cb-ink));
    color: var(--cb-ink);
  }
  .cb-greek:hover,
  .cb-greek:focus-visible {
    background: var(--cb-paper);
  }

  .cb-hero__cta--secondary,
  .cb-btn-secondary {
    color: var(--cb-ink);
    border-color: var(--cb-gray-4);
  }
  .cb-hero__cta--secondary:hover,
  .cb-btn-secondary:hover {
    background: var(--cb-ink);
    color: var(--cb-paper);
  }

  a,
  .main-content a {
    color: #CE8052;
    border-bottom-color: color-mix(in srgb, #CE8052 35%, transparent);
  }
  a:hover,
  a:focus-visible,
  .main-content a:hover,
  .main-content a:focus-visible {
    color: #D7B257;
    border-bottom-color: #D7B257;
  }

  .side-bar a,
  .nav-list-link { color: var(--cb-gray-4); }
  .side-bar a:hover,
  .nav-list-link:hover,
  .nav-list-link.active {
    color: #CE8052;
    background: var(--cb-gray-1);
  }

  .cb-greek-tip {
    background: var(--cb-gray-1);
    border-color: var(--cb-gray-2);
    color: var(--cb-gray-4);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6);
  }
  .cb-greek-tip-name   { color: var(--cb-ink); }
  .cb-greek-tip-desc   { color: var(--cb-gray-4); }
  .cb-greek-tip-letter { color: var(--cb-gold); }
}

/* ------------------------------------------------------------------
   18. Mobile adjustments
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  :root {
    --cb-hero-mark-size: 160px;
    /* Mobile ring box: tighter so the letters don't spill to the
       viewport edges, but still large enough to orbit outside the
       160px mark. */
    --cb-ring-size: min(86vw, 340px);
  }
  .cb-hero {
    padding: 48px 16px 44px;
    margin: -16px -16px 28px;
    min-height: 520px;
  }
  .cb-logo-stage {
    margin-bottom: 32px;
  }
  .cb-greek {
    font-size: clamp(1rem, 3.2vw + 0.3rem, 1.35rem);
    min-width: 1.9em;
    min-height: 1.9em;
    padding: 0.12em 0.38em;
    border-width: 1px;
  }
  /* Taps on mobile go straight to the concept page — the card would
     cover half the hero and fight with the touch target. */
  .cb-greek-tip {
    display: none;
  }
  .cb-cta {
    flex-direction: column;
    align-items: stretch;
  }
  .main-content h1 { font-size: 2.1rem; }
  .main-content h2 { font-size: 1.6rem; }
  .main-content h3 { font-size: 1.25rem; }
}

/* ------------------------------------------------------------------
   19. Reduced motion
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .cb-hero__mark,
  .cb-logo {
    transform: none !important;
  }
  /* .cb-greek is absolutely positioned; keep the centering translate
     when motion is disabled, and show the resting state directly
     since the enter animation is off. */
  .cb-greek {
    transform: translate(-50%, -50%) !important;
    opacity: 0.9 !important;
  }
  .cb-greek:hover,
  .cb-greek:focus-visible {
    opacity: 1 !important;
  }
}