@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');
/* ==========================================================================
   GARDEN RESEARCH — main.css
   Fonts:  IBM Plex Mono (mono accents, weights 400/500/600/700, @import above)
           Arial / Helvetica (system, body) — no font file needed.
   Structure:  [shared] global tokens + reset, then the canonical masthead
   + footer, then one PER-PAGE section, each scoped under a body.p-* class so
   page-specific :root tokens (e.g. --mono differs per template) never collide.
   Page classes: p-home p-herb-index p-lib-index p-article
   (essay+seo) p-work-index p-case p-lab-index p-labpost p-about p-404
   ========================================================================== */

/* ---------- shared: universal tokens (fallbacks; pages may override) ---------- */
:root{
  --bg:#fcfcfa; --ink:#000; --grey:#b9b9b6; --sub:#6e6e6a; --faded:#d6d2c8;
  --rule:#e3e0d9; --line:#e3e0d9; --link:#0051ff; --blue:#0051ff; --red:#FF4000;
  --green:#04B038; --purple:#8B48D2; --gold:#E8E398;
  --mono: Arial, Helvetica, sans-serif; --sans:Arial,Helvetica,sans-serif;
  --pad:clamp(8px,0.8vw,14px); --side:clamp(8px,0.8vw,14px);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}

/* ---------- shared: gentle easing on every interactive element ---------- */
html { scroll-behavior: smooth; }
a, button, summary, label, input, [role="button"], .item, .stack-btn,
.filter-btn, .toc a, .proj-image, .nav-links a, .footer-col a {
  transition: color 0.28s ease, background-color 0.28s ease,
              border-color 0.28s ease, opacity 0.28s ease,
              transform 0.28s cubic-bezier(.2,.7,.3,1), filter 0.28s ease;
}
/* tactile press on click */
a:active, button:active, summary:active, [role="button"]:active,
.item:active, .stack-btn:active, .filter-btn:active, .proj-image:active {
  transform: scale(0.97);
  transition-duration: 0.06s;
}
/* subtle nudge to the right on hoverable cards */
.proj-image:hover { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  a, button, summary, label, input, [role="button"], .item, .stack-btn,
  .filter-btn, .toc a, .proj-image, .nav-links a, .footer-col a { transition: none; }
  a:active, button:active, .item:active, .stack-btn:active,
  .filter-btn:active, .proj-image:active, .proj-image:hover { transform: none; }
}

/* ---------- shared: cross-document view transitions ----------
   Modern Chrome/Safari/Edge crossfade between full page loads, so
   the white flash disappears. Firefox falls back silently.
   The flower appears instantly because the static SVG is inlined
   in the header markup — no need to mark the header as a shared
   transition element (which would conflict with sticky children). */
@view-transition { navigation: auto; }
::view-transition-group(root) {
  animation-duration: 220ms;
  animation-timing-function: cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---------- shared: canonical masthead + footer (used on every page) ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Transparent masthead — no panel behind the nav, so scrolling content
     is never clipped by a hard opaque edge. */
  background: transparent;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: var(--pad, clamp(8px, 0.8vw, 14px))
           var(--side, clamp(8px, 0.8vw, 14px))
           clamp(14px, 1.6vw, 22px);
}
/* Browsers without backdrop-filter fall back to a near-opaque tint so
   the nav stays legible over content. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .header { background: color-mix(in srgb, var(--bg, #fcfcfa) 92%, transparent); }
}
/* (Removed the soft dissolve below the masthead — it read as a visible white
   shadow over content/images.) */

.nav {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: clamp(16px, 1.3vw, 21px);
  font-weight: 700;
  line-height: 1.1;
}
.header .nav-mark {
  font-family: var(--sans, Arial, Helvetica, sans-serif);
  font-weight: 400;
  font-size: 0.9em;
  line-height: 1;
  color: var(--ink, #000);
  align-self: flex-start;
  margin-top: 0.02em;
  /* reserve room for the live flower SVG so JS hydration
     doesn't shift the nav text on load or navigation */
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
  text-align: center;
  overflow: hidden;
}
.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32em;
}
.header .nav-links a { color: var(--grey, #b9b9b6); white-space: nowrap; text-decoration: none; }
.nav-links a.active { color: var(--ink, #000); }
.nav-links a:not(.active):hover { color: #8c8c89; }

.header .logo {
  flex-shrink: 0;
  width: clamp(68px, 6vw, 92px);
  height: auto;
  margin-top: 0;
  margin-right: 0;
}

.header-right {
  position: relative;
  min-width: 0;
  max-width: 44ch;
  margin-left: auto;
}
.header-right .logo {
  position: absolute;
  top: 2px;
  right: 0;
  margin-top: 0;
  opacity: 0;
  transform: scale(0.96);
  filter: blur(2px);
  transition: opacity 0.45s ease, transform 0.45s ease, filter 0.45s ease;
}
/* Home: stack the logo and the tag menu in one cell so the logo->tags
   swap happens in the exact same spot (no vertical jump / divergence). */
.header-right.filter {
  display: grid;
  justify-items: end;
  align-items: start;
}
.header-right.filter > .logo {
  position: static;
  top: auto;
  right: auto;
  margin: 0;
  grid-area: 1 / 1;
}
.header-right.filter > .filterbar,
.header-right.filter > .stack-tags {
  grid-area: 1 / 1;
  /* lift the tag row so its text top lines up with the logo's first line
     (compensates the button top padding + line-height half-leading) */
  transform: translateY(calc(-4px - 0.2em));
}
.stack-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0;
}
.header .stack-btn {
  font-family: var(--sans, Arial, Helvetica, sans-serif);
  font-size: clamp(16px, 1.3vw, 21px);
  font-weight: 700;
  text-transform: lowercase;
  color: var(--ink, #000);
  background: transparent;
  border: none;
  padding: 4px 13px;
  cursor: pointer;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.45s ease var(--rd, 0s),
    transform 0.45s cubic-bezier(.2,.7,.3,1) var(--rd, 0s),
    background 0.1s ease,
    color 0.1s ease;
}
.stack-btn:nth-child(1) { --rd: 0.15s; }
.stack-btn:nth-child(2) { --rd: 0.23s; }
.stack-btn:nth-child(3) { --rd: 0.31s; }
.stack-btn:nth-child(4) { --rd: 0.39s; }
.stack-btn:nth-child(5) { --rd: 0.47s; }
.stack-btn:hover, .stack-btn.active { color: #fff; }
.stack-btn:nth-child(6n+1):hover, .stack-btn:nth-child(6n+1).active { background: #0051ff; }
.stack-btn:nth-child(6n+2):hover, .stack-btn:nth-child(6n+2).active { background: #FF4000; }
.stack-btn:nth-child(6n+3):hover, .stack-btn:nth-child(6n+3).active { background: #04B038; }
.stack-btn:nth-child(6n+4):hover, .stack-btn:nth-child(6n+4).active { background: #8B48D2; }
.stack-btn:nth-child(6n+5):hover, .stack-btn:nth-child(6n+5).active { background: #E8E398; color: #000; }
.stack-btn[data-value="all"]:hover, .stack-btn[data-value="all"].active { background: var(--ink, #000); color: #fff; }

.header.intro .logo { opacity: 1; transform: scale(1); filter: blur(0); }
.header.intro .stack-btn { opacity: 0; transform: translateY(9px); }

@media (prefers-reduced-motion: reduce) {
  .header-right .logo, .header .stack-btn { transition: none; }
}

.header-right.links { max-width: none; margin-left: auto; }
.header-right.links .logo {
  position: static;
  opacity: 1;
  transform: none;
  filter: none;
  margin-top: 0;
  margin-right: 0;
}

/* media/img never overflow their column on any width */
img, svg, video, canvas { max-width: 100%; height: auto; }

/* ===== Responsive masthead: stack nav over the tag menu on narrow screens.
   Only applies to pages whose header morphs the logo into tags (.filter).
   On logo-only pages (.links) the header stays a row and the logo stays right. ===== */
@media (max-width: 760px) {
  .header:has(.header-right.filter) {
    flex-direction: column;
    align-items: stretch;
    gap: clamp(6px, 2.4vw, 14px);
  }
  .header:has(.header-right.filter) .nav { width: 100%; }
  .header-right.filter {
    max-width: none;
    margin-left: 0;
    width: 100%;
  }
  /* left-align the tag menu under the nav instead of pushing it right */
  .header-right.filter { justify-items: start; }
  .header-right.filter .stack-tags { justify-content: flex-start; }
  body.p-home .filterbar { justify-content: flex-start; }

  /* logo-only headers: keep the logo pinned to the right even on mobile */
  .header:has(.header-right.links) { align-items: flex-start; }
  .header-right.links { margin-left: auto; }

  /* Hide the wordmark on small screens — its late image load causes
     visible reflow, and on mobile the nav already identifies the site. */
  .header .logo,
  .col.left .brand { display: none; }
}

.footer {
  margin-top: clamp(72px, 11vw, 160px);
  padding: clamp(28px, 4vw, 48px)
           var(--side, clamp(8px, 0.8vw, 14px))
           clamp(40px, 5vw, 68px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(28px, 4vw, 52px);
  font-family: var(--sans, Arial, Helvetica, sans-serif);
  font-weight: 700;
  font-size: clamp(16px, 1.3vw, 21px);
  line-height: 1.3;
  color: var(--ink, #000);
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 40px;
  width: 100%;
}
.footer-col { display: flex; flex-direction: column; gap: 0.32em; min-width: 0; }
.footer-col-head { margin: 0 0 0.55em; font: inherit; color: var(--ink, #000); }
.footer .footer-col a { color: var(--grey, #b9b9b6); text-decoration: none; white-space: nowrap; }
.footer .footer-col a:hover { color: var(--ink, #000); }
.footer-col-note { color: var(--grey, #b9b9b6); }

/* nav/footer item that isn't live yet — non-clickable, shows "Coming Soon" on hover */
.nav-soon, .footer .footer-soon { color: var(--grey, #b9b9b6); cursor: default; position: relative; white-space: nowrap; }
.nav-soon::after, .footer-soon::after { content: attr(data-soon);
  position: absolute; left: 0; top: 100%; margin-top: 0.45em; z-index: 5;
  font-family: var(--sans, Arial, Helvetica, sans-serif); font-size: 0.7em; font-weight: 700;
  letter-spacing: 0; text-transform: none; white-space: nowrap;
  background: var(--ink, #000); color: #fff; padding: 0.25em 0.5em;
  opacity: 0; pointer-events: none; transition: opacity 120ms ease; }
.nav-soon:hover::after, .footer-soon:hover::after { opacity: 1; }
.footer-legal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2em;
  margin: 0;
  text-align: left;
  font-family: var(--sans, Arial, Helvetica, sans-serif);
  font-weight: 700;
  font-size: 0.8em;
  color: var(--grey, #b9b9b6);
}
.footer .footer-legal span { white-space: nowrap; }
@media (max-width: 640px) {
  .footer-cols { grid-template-columns: 1fr; }
}


/* ==========================================================================
   PAGE: p-home  (source: home.html)
   ========================================================================== */
body.p-home { --bg:    #fcfcfa;
  --ink:   #000000;
  --grey:  #b9b9b6;
  --sub:   #6e6e6a;
  --faded: #d6d2c8;   
  --rule:  #e3e0d9;
  --link:  #0051ff;

  --blue:  #0051ff;
  --red:   #FF4000;
  --green: #04B038;

  --mono: Arial, Helvetica, sans-serif;
  --sans:  Arial, Helvetica, sans-serif;

  --pad:   clamp(8px, 0.8vw, 14px);
  --side:  clamp(8px, 0.8vw, 14px); }
body.p-home { -webkit-text-size-adjust: 100%; }
body.p-home { font-family: var(--sans);
  font-weight: 700;
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased; }
body.p-home a { color: inherit; text-decoration: none; }
body.p-home .filterbar { display: flex;
  align-items: baseline;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.1em 0.5em; }
body.p-home .header .header-right { max-width: none; }
body.p-home .polotno-wrap { padding: clamp(34px, 5vw, 72px) var(--side) clamp(64px, 9vw, 120px); }
body.p-home .polotno { font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(20px, 2.15vw, 34px);
  line-height: 1.22;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: pretty; }
body.p-home .polotno .item { color: var(--ink);
  padding: 0 0.05em;
  border-radius: 1px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: color .08s ease, background .08s ease;
  cursor: pointer; }
body.p-home .polotno .item:hover { color: #fff !important; }
/* varied hover colors cycling through the harmonized palette */
body.p-home .polotno .item:nth-child(12n+1):hover  { background: #E2153A !important; }
body.p-home .polotno .item:nth-child(12n+2):hover  { background: #FF4000 !important; }
body.p-home .polotno .item:nth-child(12n+3):hover  { background: #04B038 !important; }
body.p-home .polotno .item:nth-child(12n+4):hover  { background: #0051FF !important; }
body.p-home .polotno .item:nth-child(12n+5):hover  { background: #8B48D2 !important; }
body.p-home .polotno .item:nth-child(12n+6):hover  { background: #9C274B !important; }
body.p-home .polotno .item:nth-child(12n+7):hover  { background: #029A5D !important; }
body.p-home .polotno .item:nth-child(12n+8):hover  { background: #476E39 !important; }
body.p-home .polotno .item:nth-child(12n+9):hover  { background: #70D0C8 !important; color: #000 !important; }
body.p-home .polotno .item:nth-child(12n+10):hover { background: #7FB9FF !important; color: #000 !important; }
body.p-home .polotno .item:nth-child(12n+11):hover { background: #C3A4F1 !important; color: #000 !important; }
body.p-home .polotno .item:nth-child(12n+12):hover { background: #F58498 !important; color: #000 !important; }
body.p-home .polotno.f-domains, body.p-home .polotno.f-capabilities, body.p-home .polotno.f-projects, body.p-home .polotno.f-ideas { color: var(--faded); }
body.p-home .polotno.f-domains      .item { color: var(--faded); }
body.p-home .polotno.f-capabilities .item { color: var(--faded); }
body.p-home .polotno.f-projects     .item { color: var(--faded); }
body.p-home .polotno.f-ideas        .item { color: var(--faded); }
body.p-home .polotno.f-domains      .item[data-cat="domains"] { color: var(--ink); }
body.p-home .polotno.f-capabilities .item[data-cat="capabilities"] { color: var(--ink); }
body.p-home .polotno.f-projects     .item[data-cat="projects"] { color: var(--ink); }
body.p-home .polotno.f-ideas        .item[data-cat="ideas"] { color: var(--ink); }
body.p-home .polotno .end { color: inherit; }
body.p-home .polotno .item.motto, body.p-home .polotno .item.motto:hover, body.p-home .polotno.f-domains      .item.motto, body.p-home .polotno.f-capabilities .item.motto, body.p-home .polotno.f-projects     .item.motto, body.p-home .polotno.f-ideas        .item.motto { background: var(--ink) !important;
  color: #fff !important; }

/* desktop-only hover preview: lab cover thumbnail follows the cursor when an
   ideas item with [data-hover-img] is hovered. Hidden on touch/mobile. */
body.p-home .hover-img {
  position: fixed;
  top: 0; left: 0;
  width: clamp(220px, 22vw, 340px);
  height: auto;
  max-height: 70vh;
  object-fit: cover;
  pointer-events: none;
  opacity: 0;
  z-index: 200;
  transform: translate3d(-9999px, -9999px, 0);
  transition: opacity 0.18s ease;
  will-change: transform, opacity;
}
body.p-home .hover-img.is-visible { opacity: 1; }
@media (max-width: 860px), (hover: none), (pointer: coarse) {
  body.p-home .hover-img { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  body.p-home .hover-img { transition: none; }
}

/* ==========================================================================
   PAGE: p-herb-index  (source: herbarium-index.html)
   ========================================================================== */
body.p-herb-index { --bg:    #fcfcfa;
  --ink:   #000000;
  --sub:   #585858;
  --muted: #8a8a86;
  --faded: #d6d2c8;
  --rule:  #e3e0d9;
  --link:  #0051ff;
  /* Home palette — full set, identical hex values to body.p-home */
  --crimson:  #E2153A;
  --red:      #FF4000;
  --green:    #04B038;
  --blue:     #0051FF;
  --purple:   #8B48D2;
  --burgundy: #9C274B;
  --emerald:  #029A5D;
  --forest:   #476E39;
  --mint:     #70D0C8;
  --sky:      #7FB9FF;
  --lavender: #C3A4F1;
  --pink:     #F58498;
  --mono: Arial, Helvetica, sans-serif;
  --sans:  Arial, Helvetica, sans-serif;
  --side:  clamp(8px, 0.8vw, 14px); }
body.p-herb-index { height: 100%; -webkit-text-size-adjust: 100%; }
body.p-herb-index { font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased; }
body.p-herb-index a { color: inherit; text-decoration: none; }
body.p-herb-index .gr-page { position: relative; }
body.p-herb-index .sl-page { display: block;
  padding: clamp(28px, 4vw, 56px) var(--side) clamp(48px, 7vw, 96px); }
body.p-herb-index .sidebar { position: sticky;
  top: clamp(74px, 9vw, 104px);
  z-index: 50;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 2.6vw, 38px);
  margin-bottom: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(16px, 2vw, 26px);
  border-bottom: none; }
body.p-herb-index .sidebar::before { content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 60vh;
  background: var(--bg);
  pointer-events: none; }
body.p-herb-index .sidebar-intro { font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(20px, 2vw, 32px);
  line-height: 1.22;
  letter-spacing: -0.014em;
  max-width: none;
  text-wrap: pretty; }
body.p-herb-index .news-link { background: var(--ink);
  color: #fff;
  padding: 0 0.32em;
  border-radius: 1px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  text-decoration: none;
  transition: background .1s ease; }
body.p-herb-index .news-link .arr { display: inline-block; margin-left: 0.1em; text-decoration: none; }
body.p-herb-index .news-link:hover { background: var(--blue); color: #fff; }
body.p-herb-index .filter-bar { display: flex;
  flex-wrap: wrap;
  gap: 2px 0;
  margin-left: 0; }
body.p-herb-index .filter-stack { display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 22px); }
body.p-herb-index .filter-group { display: grid;
  grid-template-columns: 132px 1fr;
  gap: clamp(10px, 1.4vw, 24px);
  align-items: baseline; }
body.p-herb-index .filter-label { font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding-top: 7px; }
body.p-herb-index .filter-buttons { display: flex;
  flex-wrap: wrap;
  gap: 0; }
body.p-herb-index .filter-btn { font-family: var(--sans);
  font-size: clamp(16px, 1.3vw, 21px);
  font-weight: 700;
  text-transform: lowercase;
  color: var(--ink);
  background: transparent;
  border: none;
  margin: 0;
  padding: 3px 12px;
  cursor: pointer;
  line-height: 1.4;
  white-space: nowrap;
  transition: background 90ms, color 90ms; }
body.p-herb-index .filter-btn:hover, body.p-herb-index .filter-btn.active { color: #fff; }
/* source_type — three colours from home palette */
body.p-herb-index .filter-btn[data-value="academic_paper"]:hover, body.p-herb-index .filter-btn[data-value="academic_paper"].active { background: var(--blue); }
body.p-herb-index .filter-btn[data-value="institutional_report"]:hover, body.p-herb-index .filter-btn[data-value="institutional_report"].active { background: var(--purple); }
body.p-herb-index .filter-btn[data-value="lab_research_blog"]:hover, body.p-herb-index .filter-btn[data-value="lab_research_blog"].active { background: var(--pink); color: var(--ink); }
/* domain — eight colours from home palette */
body.p-herb-index .filter-btn[data-value="Epistemology"]:hover, body.p-herb-index .filter-btn[data-value="Epistemology"].active { background: var(--crimson); }
body.p-herb-index .filter-btn[data-value="Methodology"]:hover, body.p-herb-index .filter-btn[data-value="Methodology"].active { background: var(--red); }
body.p-herb-index .filter-btn[data-value="Peer review"]:hover, body.p-herb-index .filter-btn[data-value="Peer review"].active { background: var(--emerald); }
body.p-herb-index .filter-btn[data-value="Authorship"]:hover, body.p-herb-index .filter-btn[data-value="Authorship"].active { background: var(--burgundy); }
body.p-herb-index .filter-btn[data-value="Infrastructure"]:hover, body.p-herb-index .filter-btn[data-value="Infrastructure"].active { background: var(--mint); color: var(--ink); }
body.p-herb-index .filter-btn[data-value="Access"]:hover, body.p-herb-index .filter-btn[data-value="Access"].active { background: var(--forest); }
body.p-herb-index .filter-btn[data-value="Policy"]:hover, body.p-herb-index .filter-btn[data-value="Policy"].active { background: var(--sky); color: var(--ink); }
body.p-herb-index .filter-btn[data-value="Economics of science"]:hover, body.p-herb-index .filter-btn[data-value="Economics of science"].active { background: var(--lavender); color: var(--ink); }
/* period — colour cycles by index (set in PHP via inline --period-color) */
body.p-herb-index .filter-btn[data-group="period"]:hover, body.p-herb-index .filter-btn[data-group="period"].active { background: var(--period-color, var(--green)); }
body.p-herb-index .filter-btn[data-group="period"][data-light="1"]:hover, body.p-herb-index .filter-btn[data-group="period"][data-light="1"].active { color: var(--ink); }
body.p-herb-index .filter-btn.reset:hover, body.p-herb-index .filter-btn.reset.active { background: var(--ink); color: #fff; }
body.p-herb-index .sidebar-count { font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted); }
body.p-herb-index .sl-list { display: flex;
  flex-direction: column; }
body.p-herb-index .sl-row { display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 64px);
  padding: clamp(26px, 3.2vw, 46px) 0;
  border-bottom: none;
  align-items: start; }
body.p-herb-index .sl-row:first-child { padding-top: 0; }
body.p-herb-index .sl-row.hidden { display: none; }
body.p-herb-index .sl-left { display: flex; flex-direction: column; align-items: flex-start; gap: 0; position: sticky; top: var(--stick-top, 120px); align-self: start; }
body.p-herb-index .sl-date { font-family: var(--sans);
  font-size: clamp(16px, 1.3vw, 21px);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.28;
  order: 0; }
body.p-herb-index .sl-tags { display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  order: 1; }
body.p-herb-index .sl-tag { font-family: var(--sans);
  font-size: clamp(16px, 1.3vw, 21px);
  font-weight: 700;
  line-height: 1.28;
  color: var(--ink);
  background: transparent; }
body.p-herb-index .sl-doi { font-family: var(--sans);
  font-size: clamp(16px, 1.3vw, 21px);
  font-weight: 700;
  color: var(--link);
  line-height: 1.28;
  word-break: break-word;
  order: 2; }
body.p-herb-index .sl-doi:hover { text-decoration: underline; text-underline-offset: 3px; }
body.p-herb-index .sl-right { display: flex; flex-direction: column; gap: 14px; }
body.p-herb-index .sl-title { font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(16px, 1.3vw, 21px);
  line-height: 1.3;
  letter-spacing: -0.006em;
  color: var(--ink);
  text-wrap: pretty;
  transition: color .09s ease; }
body.p-herb-index .sl-title:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
body.p-herb-index .sl-desc { font-family: var(--sans);
  font-size: clamp(16px, 1.3vw, 21px);
  line-height: 1.45;
  font-weight: 700;
  color: #b9b9b6; }
body.p-herb-index .no-results { display: none;
  padding: 32px 0;
  font-size: clamp(17px, 1.35vw, 22px);
  font-weight: 700;
  color: var(--sub); }
body.p-herb-index .no-results.visible { display: block; }
@media (max-width: 760px) {
  body.p-herb-index .sidebar-intro { max-width: none; }
  body.p-herb-index .sl-row { grid-template-columns: 1fr; gap: 16px; }
  body.p-herb-index .sl-left { position: static; }
  /* on mobile the intro/filter sidebar scrolls with the page instead of pinning */
  body.p-herb-index .sidebar { position: static; top: auto; }
  body.p-herb-index .sidebar::before { display: none; }
}

/* ==========================================================================
   PAGE: p-lib-index  (source: library-index.html)
   ========================================================================== */
body.p-lib-index { --bg:    #fcfcfa;
  --ink:   #000000;
  --sub:   #585858;
  --muted: #8a8a86;
  --faded: #d6d2c8;
  --rule:  #e3e0d9;
  --link:  #0051ff;
  /* Home palette — identical hex values to body.p-home */
  --crimson:  #E2153A;
  --red:      #FF4000;
  --green:    #04B038;
  --blue:     #0051FF;
  --purple:   #8B48D2;
  --burgundy: #9C274B;
  --emerald:  #029A5D;
  --forest:   #476E39;
  --mint:     #70D0C8;
  --sky:      #7FB9FF;
  --lavender: #C3A4F1;
  --pink:     #F58498;
  --mono: Arial, Helvetica, sans-serif;
  --sans:  Arial, Helvetica, sans-serif;
  --side:  clamp(8px, 0.8vw, 14px); }
body.p-lib-index { height: 100%; -webkit-text-size-adjust: 100%; }
body.p-lib-index { font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased; }
body.p-lib-index a { color: inherit; text-decoration: none; }
body.p-lib-index .gr-page { position: relative; }
body.p-lib-index .sl-page { display: block;
  padding: clamp(28px, 4vw, 56px) var(--side) clamp(48px, 7vw, 96px); }
body.p-lib-index .sidebar { position: sticky;
  top: clamp(74px, 9vw, 104px);
  z-index: 50;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 2.6vw, 38px);
  margin-bottom: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(16px, 2vw, 26px);
  border-bottom: none; }
body.p-lib-index .sidebar::before { content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 60vh;
  background: var(--bg);
  pointer-events: none; }
body.p-lib-index .sidebar-intro { font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(20px, 2vw, 32px);
  line-height: 1.22;
  letter-spacing: -0.014em;
  max-width: none;
  text-wrap: pretty; }
body.p-lib-index .news-link { background: var(--ink);
  color: #fff;
  padding: 0 0.32em;
  border-radius: 1px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  text-decoration: none;
  transition: background .1s ease; }
body.p-lib-index .news-link .arr { display: inline-block; margin-left: 0.1em; text-decoration: none; }
body.p-lib-index .news-link:hover { background: var(--blue); color: #fff; }
body.p-lib-index .filter-bar { display: flex;
  flex-wrap: wrap;
  gap: 2px 0;
  margin-left: 0; }
body.p-lib-index .filter-stack { display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 22px); }
body.p-lib-index .filter-group { display: grid;
  grid-template-columns: 132px 1fr;
  gap: clamp(10px, 1.4vw, 24px);
  align-items: baseline; }
body.p-lib-index .filter-label { font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding-top: 7px; }
body.p-lib-index .filter-buttons { display: flex;
  flex-wrap: wrap;
  gap: 0; }
body.p-lib-index .filter-btn { font-family: var(--sans);
  font-size: clamp(16px, 1.3vw, 21px);
  font-weight: 700;
  text-transform: lowercase;
  color: var(--ink);
  background: transparent;
  border: none;
  margin: 0;
  padding: 3px 12px;
  cursor: pointer;
  line-height: 1.4;
  white-space: nowrap;
  transition: background 90ms, color 90ms; }
body.p-lib-index .filter-btn:hover, body.p-lib-index .filter-btn.active { color: #fff; background: var(--ink); }
/* topic — per-tag colours (any tag without its own colour falls back to ink above, so text stays readable) */
body.p-lib-index .filter-btn[data-value="agent-memory"]:hover, body.p-lib-index .filter-btn[data-value="agent-memory"].active { background: var(--crimson); }
body.p-lib-index .filter-btn[data-value="retrieval-rag"]:hover, body.p-lib-index .filter-btn[data-value="retrieval-rag"].active { background: var(--red); }
body.p-lib-index .filter-btn[data-value="open-web"]:hover, body.p-lib-index .filter-btn[data-value="open-web"].active { background: var(--green); }
body.p-lib-index .filter-btn[data-value="org-knowledge"]:hover, body.p-lib-index .filter-btn[data-value="org-knowledge"].active { background: var(--blue); }
body.p-lib-index .filter-btn[data-value="evaluation"]:hover, body.p-lib-index .filter-btn[data-value="evaluation"].active { background: var(--purple); }
body.p-lib-index .filter-btn[data-value="ai-science"]:hover, body.p-lib-index .filter-btn[data-value="ai-science"].active { background: var(--burgundy); }
body.p-lib-index .filter-btn[data-value="ai-learning"]:hover, body.p-lib-index .filter-btn[data-value="ai-learning"].active { background: var(--emerald); }
body.p-lib-index .filter-btn[data-value="ai-adoption"]:hover, body.p-lib-index .filter-btn[data-value="ai-adoption"].active { background: var(--forest); }
body.p-lib-index .filter-btn[data-value="tooling"]:hover, body.p-lib-index .filter-btn[data-value="tooling"].active { background: var(--mint); color: var(--ink); }
body.p-lib-index .filter-btn[data-value="agentic-seo"]:hover, body.p-lib-index .filter-btn[data-value="agentic-seo"].active { background: var(--sky); color: var(--ink); }
body.p-lib-index .filter-btn.reset:hover, body.p-lib-index .filter-btn.reset.active { background: var(--ink); color: #fff; }
body.p-lib-index .sidebar-count { font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted); }
body.p-lib-index .sl-list { display: flex;
  flex-direction: column; }
body.p-lib-index .sl-row { display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 64px);
  padding: clamp(26px, 3.2vw, 46px) 0;
  border-bottom: none;
  align-items: start; }
body.p-lib-index .sl-row:first-child { padding-top: 0; }
body.p-lib-index .sl-row.hidden { display: none; }
body.p-lib-index .sl-left { display: flex; flex-direction: column; align-items: flex-start; gap: 0; position: sticky; top: var(--stick-top, 120px); align-self: start; }
body.p-lib-index .sl-date { font-family: var(--sans);
  font-size: clamp(16px, 1.3vw, 21px);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.28;
  order: 0; }
body.p-lib-index .sl-tags { display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  order: 1; }
body.p-lib-index .sl-tag { font-family: var(--sans);
  font-size: clamp(16px, 1.3vw, 21px);
  font-weight: 700;
  line-height: 1.28;
  color: var(--ink);
  background: transparent; }
body.p-lib-index .sl-doi { font-family: var(--sans);
  font-size: clamp(16px, 1.3vw, 21px);
  font-weight: 700;
  color: var(--link);
  line-height: 1.28;
  word-break: break-word;
  order: 2; }
body.p-lib-index .sl-doi:hover { text-decoration: underline; text-underline-offset: 3px; }
body.p-lib-index .sl-right { display: flex; flex-direction: column; gap: 14px; }
body.p-lib-index .sl-title { font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(16px, 1.3vw, 21px);
  line-height: 1.3;
  letter-spacing: -0.006em;
  color: var(--ink);
  text-wrap: pretty;
  transition: color .09s ease; }
body.p-lib-index .sl-title:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
body.p-lib-index .sl-desc { font-family: var(--sans);
  font-size: clamp(16px, 1.3vw, 21px);
  line-height: 1.45;
  font-weight: 700;
  color: #b9b9b6; }
body.p-lib-index .no-results { display: none;
  padding: 32px 0;
  font-size: clamp(17px, 1.35vw, 22px);
  font-weight: 700;
  color: var(--sub); }
body.p-lib-index .no-results.visible { display: block; }
@media (max-width: 760px) {
  body.p-lib-index .sidebar-intro { max-width: none; }
  body.p-lib-index .sl-row { grid-template-columns: 1fr; gap: 16px; }
  body.p-lib-index .sl-left { position: static; }
  /* on mobile the intro/filter sidebar scrolls with the page instead of pinning */
  body.p-lib-index .sidebar { position: static; top: auto; }
  body.p-lib-index .sidebar::before { display: none; }
}

/* ==========================================================================
   PAGE: p-article  (source: library-essay.html)
   ========================================================================== */
body.p-article { --bg:    #fcfcfa;
  --ink:   #000000;
  --grey:  #b9b9b6;
  --sub:   #6e6e6a;
  --line:  #e3e0d9;
  --tint:  #f1efe9;
  --link:  #0051ff;
  --mono:  Arial, Helvetica, sans-serif;
  --sans:  Arial, Helvetica, sans-serif;
  --code:  'IBM Plex Mono', ui-monospace, monospace;

  --blue:  #0051ff;
  --red:   #FF4000;
  --green: #04B038;
  --purple:#8B48D2;
  --gold:  #E8E398;

  --pad:   clamp(8px, 0.8vw, 14px);
  --side:  clamp(8px, 0.8vw, 14px);
  --body: 20px;
  --read: 20px;
  --stick: clamp(96px, 11vw, 124px); }
body.p-article { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.p-article { font-family: var(--sans);
  font-weight: 700;
  font-size: var(--body);
  line-height: 1.32;
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased; }
body.p-article a { color: inherit; text-decoration: none; }
body.p-article .cover { width: 100%;
  height: clamp(420px, 82vh, 900px);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  background: var(--tint); }
body.p-article .cover img { width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; }
/* mobile: show the whole cover image, scaled to fit the screen (no crop) */
@media (max-width: 760px) {
  body.p-article .cover { height: auto; max-height: 88vh; }
  body.p-article .cover img { height: auto; max-height: 88vh; object-fit: contain; }
}
body.p-article .case { display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(40px, 6vw, 96px);
  padding: clamp(36px, 5vw, 72px) var(--side) clamp(80px, 12vw, 160px);
  align-items: start; }
body.p-article .rail { position: sticky;
  top: var(--stick);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 44px); }
body.p-article .client { display: flex; flex-direction: column; }
/* Work case: org descriptor (line 1), small client logo + area tags */
body.p-article .case-org { margin: -2px 0 12px; font-weight: 700;
  text-wrap: pretty; }
body.p-article .case-meta { margin: 10px 0 0; font-size: 0.9em; }
body.p-article .case-figure { margin: 14px 0 0; }
body.p-article .case-figure img { width: 100%; height: auto; display: block; }
body.p-article .case-logo { margin: 0 0 14px; }
body.p-article .case-logo img { height: 26px; width: auto; max-width: 160px;
  display: block; object-fit: contain; }
body.p-article .case-tags { display: flex; flex-wrap: wrap; gap: 6px;
  margin: 10px 0 0; }
body.p-article .case-tags .tag { font-size: 0.72em; line-height: 1;
  padding: 0.32em 0.5em; border: 1px solid var(--ink);
  background: var(--ink); color: var(--bg);
  border-radius: 2px; white-space: nowrap; }
body.p-article .cl { font-size: var(--body); font-weight: 700; line-height: 1.14; text-wrap: pretty; }
body.p-article .hl { background: var(--ink);
  color: var(--bg);
  padding: 0.02em 0.16em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone; }
body.p-article .toc { padding-top: clamp(16px, 1.6vw, 22px); }
body.p-article .toc-h { font-family: var(--mono);
  font-weight: 700;
  font-size: var(--body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 0.9em; }
body.p-article .toc ol { list-style: none; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-left: -12px; }
body.p-article .toc a { display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  width: fit-content;
  white-space: nowrap;
  font-size: var(--body);
  font-weight: 700;
  text-transform: lowercase;
  line-height: 1.3;
  color: var(--ink);
  padding: 4px 12px;
  transition: background 90ms ease, color 90ms ease; }
body.p-article .toc a .n { font-weight: 700; color: inherit; display: inline-block; width: 1.2em; }
body.p-article .toc a.current { color: #fff; }
body.p-article .toc li:nth-child(5n+1) a.current { background: var(--blue); }
body.p-article .toc li:nth-child(5n+2) a.current { background: var(--red); }
body.p-article .toc li:nth-child(5n+3) a.current { background: var(--green); }
body.p-article .toc li:nth-child(5n+4) a.current { background: var(--purple); }
body.p-article .toc li:nth-child(5n+5) a.current { background: var(--gold); color: #000; }
body.p-article .toc a.back-link { margin-left: calc(1.2em + 0.5em); color: var(--grey); }
body.p-article .toc a.back-link:hover { background: var(--ink); color: #fff; }
body.p-article .article { max-width: 64ch; }
body.p-article .eyebrow { font-family: var(--mono);
  font-weight: 700;
  font-size: 0.78em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sub);
  margin-bottom: 0.9em; }
body.p-article .case-title { font-size: var(--body);
  line-height: 1.3;
  margin-bottom: clamp(28px, 4vw, 52px);
  text-wrap: balance; }
body.p-article .section { padding-top: clamp(40px, 5vw, 72px); scroll-margin-top: var(--stick); }
body.p-article .section:first-of-type { padding-top: 0; }
body.p-article .section-head { display: flex;
  align-items: baseline;
  gap: 0.7em;
  margin-bottom: clamp(16px, 1.6vw, 22px); }
body.p-article .section-head .sn { font-family: var(--mono); font-weight: 700; font-size: var(--body); color: var(--ink); }
body.p-article .section-head h2 { font-size: var(--body); font-weight: 700; line-height: 1.2; }
body.p-article .section-head h2 a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
body.p-article .section-head h2 a:hover { background: var(--link); color: #fff; text-decoration: none; }
body.p-article .section p { font-size: var(--read);
  font-weight: 700;
  line-height: 1.4;
  text-wrap: pretty; }
body.p-article .section p + p { margin-top: 1.3em; }
body.p-article .section p b, body.p-article .section p strong { font-weight: 700; }
body.p-article .lede { font-weight: 700 !important; }
body.p-article .section p a, body.p-article .ans a, body.p-article .lede a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
body.p-article .section p a:hover, body.p-article .ans a:hover { background: var(--link); color: #fff; text-decoration: none; }
body.p-article .section p a:has(> img), body.p-article .ans a:has(> img), body.p-article .lede a:has(> img) { text-decoration: none; background: none; }
body.p-article .section p a:has(> img):hover, body.p-article .ans a:has(> img):hover, body.p-article .lede a:has(> img):hover { background: none; }
body.p-article code { font-family: var(--code); font-weight: 700; font-size: 0.84em; background: var(--tint); padding: 0.08em 0.36em; }
body.p-article .codeblock { margin: 1.7em 0; }
body.p-article .codeblock .cap { font-family: var(--mono);
  font-weight: 700;
  font-size: 0.74em;
  color: var(--sub);
  margin-bottom: 0.6em;
  display: flex;
  justify-content: space-between;
  gap: 1em; }
body.p-article .codeblock .cap .lang { color: var(--grey); }
body.p-article .codeblock pre { background: var(--ink);
  color: var(--bg);
  padding: clamp(18px, 2.2vw, 26px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  font-family: var(--code);
  font-weight: 700;
  font-size: 0.74em;
  line-height: 1.65;
  tab-size: 2; }
body.p-article .codeblock pre code { background: none;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  color: inherit; }
body.p-article .codeblock .c { color: var(--grey); }
body.p-article .codeblock .s { color: #9DFFBA; }
body.p-article .codeblock .k { color: #7FB9FF; }
body.p-article .section h3 { font-size: var(--body); font-weight: 700; line-height: 1.22; margin-top: 1.7em; margin-bottom: 0.15em; }
body.p-article .section h3 + p { margin-top: 0.45em; }
body.p-article .list, body.p-article .steps { list-style: none; margin-top: 1.3em; display: flex; flex-direction: column; gap: 0.65em; }
body.p-article .list li, body.p-article .steps li { position: relative; font-weight: 700; line-height: 1.4; text-wrap: pretty; }
body.p-article .list li { padding-left: 1.4em; }
body.p-article .list li::before { content: "—"; position: absolute; left: 0; font-weight: 700; color: var(--ink); }
body.p-article .steps { counter-reset: st; margin-top: 1.5em; gap: 1em; }
body.p-article .steps li { padding-left: 2.6em; min-height: 1.4em; }
body.p-article .steps li::before { counter-increment: st;
  content: counter(st, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--mono); font-weight: 700; font-size: 1em;
  color: var(--ink); }
body.p-article .list li b, body.p-article .steps li b { font-weight: 700; }
body.p-article figure { margin: 1.7em 0; }
body.p-article .ph { position: relative;
  width: 100%;
  background-color: var(--tint);
  background-image: repeating-linear-gradient(135deg, transparent 0 11px, rgba(0,0,0,0.05) 11px 12px);
  border: 1px solid var(--line);
  display: grid;
  place-items: center; }
body.p-article .ph-16x9 { aspect-ratio: 16 / 9; }
body.p-article .ph-4x3 { aspect-ratio: 4 / 3; }
body.p-article .ph-1x1 { aspect-ratio: 1 / 1; }
body.p-article .ph-label { font-family: var(--mono);
  font-weight: 700;
  font-size: 0.72em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sub);
  background: var(--bg);
  padding: 0.35em 0.7em;
  text-align: center;
  border: 1px solid var(--line); }
body.p-article .ph-video .play { font-family: var(--sans);
  font-size: 1.1em;
  line-height: 1;
  width: 2.6em; height: 2.6em;
  display: grid; place-items: center;
  padding-left: 0.18em;
  background: var(--ink); color: var(--bg);
  border: none; border-radius: 50%;
  cursor: pointer;
  position: absolute; }
body.p-article .ph-video .ph-label { position: absolute; left: 50%; bottom: 0.9em; transform: translateX(-50%); }
body.p-article figcaption { font-family: var(--mono);
  font-weight: 700;
  font-size: 0.76em;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--sub);
  margin-top: 0.75em;
  text-wrap: pretty; }
body.p-article .fig-credit { color: var(--grey); }
body.p-article .gallery { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.4vw, 16px); }
body.p-article .gallery figcaption { grid-column: 1 / -1; margin-top: 0.2em; }
body.p-article .pull { font-size: 1.18em;
  font-weight: 700;
  line-height: 1.28;
  text-wrap: pretty;
  margin: 1.5em 0 0; }
body.p-article .quote { margin: 1.7em 0; background: var(--tint); padding: clamp(20px, 2.6vw, 30px); }
body.p-article .quote blockquote { font-size: 1.05em; font-weight: 700; line-height: 1.3; text-wrap: pretty; }
body.p-article .quote figcaption { margin-top: 0.9em; color: var(--ink); }
body.p-article .quote figcaption b { font-weight: 700; }
body.p-article .quote figcaption span { color: var(--sub); }
body.p-article .note { margin: 1.7em 0;
  padding: clamp(18px, 2.4vw, 26px) clamp(20px, 2.6vw, 28px);
  background: var(--tint); }
body.p-article .note--tip { --accent: var(--green); }
body.p-article .note--warn { --accent: var(--red); }
body.p-article .note--info { --accent: var(--blue); }
body.p-article .note-label { font-family: var(--mono);
  font-weight: 700;
  font-size: 0.76em;
  color: var(--ink);
  margin-bottom: 0.55em; }
body.p-article .note p { font-weight: 700; line-height: 1.35; }
body.p-article .takeaways { margin: 1.8em 0;
  background: var(--tint);
  color: var(--ink);
  padding: clamp(20px, 2.6vw, 30px); }
body.p-article .takeaways h3 { font-family: var(--mono);
  font-weight: 700;
  font-size: 0.78em;
  color: var(--sub);
  margin: 0 0 1.1em; }
body.p-article .takeaways ul { list-style: none; display: flex; flex-direction: column; gap: 0.75em; }
body.p-article .takeaways li { font-weight: 700; line-height: 1.32; text-wrap: pretty; }
body.p-article .case-table { width: 100%; border-collapse: collapse; margin-top: 1.3em; font-size: var(--read); }
body.p-article .case-table th { text-align: left; font-weight: 700; color: var(--ink);
  padding: 0 0 0.7em; border-bottom: 2px solid var(--ink); vertical-align: bottom; }
body.p-article .case-table td { padding: 0.85em 0; border-bottom: 1px solid var(--line);
  vertical-align: top; font-weight: 700; line-height: 1.3; text-wrap: pretty; }
body.p-article .case-table th:first-child, body.p-article .case-table td:first-child { width: 46%; padding-right: 1.4em; }
body.p-article .case-table td .tn { color: inherit; margin-right: 0.5em; font-family: var(--mono); }
body.p-article .faq { margin-top: 1.4em; border-top: 2px solid var(--ink); }
body.p-article .faq details { border-bottom: 1px solid var(--line); }
body.p-article .faq summary { list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: baseline; gap: 1em;
  padding: 0.95em 0; font-weight: 700; line-height: 1.3; text-wrap: pretty; }
body.p-article .faq summary::-webkit-details-marker { display: none; }
body.p-article .faq summary::after { content: "+"; font-family: var(--mono); font-weight: 700; color: var(--sub); }
body.p-article .faq details[open] summary::after { content: "\2013"; }
body.p-article .faq .ans { padding: 0 0 1.1em; max-width: 58ch; }
body.p-article .faq .ans p { font-weight: 700; }
body.p-article .related { margin-top: 1.4em; border-top: 2px solid var(--ink); }
body.p-article .related a { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5em;
  padding: 0.95em 0; border-bottom: 1px solid var(--line); }
body.p-article .related a .r-t { font-weight: 700; line-height: 1.3; text-wrap: pretty;
  transition: background 90ms ease, color 90ms ease; }
body.p-article .related a .r-k { font-family: var(--mono); font-weight: 700; color: var(--grey); white-space: nowrap; }
body.p-article .related a:hover .r-t { background: var(--ink); color: var(--bg);
  padding: 0.06em 0.22em; margin: -0.06em -0.22em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone; }
body.p-article .cta { margin: 1.9em 0 0;
  background: var(--ink);
  color: var(--bg);
  padding: clamp(26px, 3.5vw, 44px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.1em; }
body.p-article .cta .cta-h { font-size: 1.1em; font-weight: 700; line-height: 1.24; color: var(--bg); text-wrap: pretty; }
body.p-article .cta a { font-family: var(--mono); font-weight: 700; font-size: 0.82em;
  letter-spacing: 0.04em; text-transform: uppercase;
  border: 1px solid var(--bg); padding: 0.7em 1.1em;
  transition: background 90ms ease, color 90ms ease; }
body.p-article .cta a:hover { background: var(--bg); color: var(--ink); }
@media (max-width: 880px) {
  body.p-article .case { grid-template-columns: 1fr; row-gap: clamp(40px, 7vw, 64px); }
  body.p-article .rail { position: static; max-height: none; overflow: visible; }
  body.p-article .article { max-width: none; }
}
@media (max-width: 640px) {
  body.p-article { --body: 18px; }
  body.p-article .gallery { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PAGE: p-work-index  (source: work-index.html)
   ========================================================================== */
body.p-work-index { --bg:    #fcfcfa;
  --ink:   #000000;
  --grey:  #b9b9b6;
  --sub:   #6e6e6a;
  --link:  #0051ff;
  --ph:    #dbd7cd;   
  --mono: Arial, Helvetica, sans-serif;
  --sans:  Arial, Helvetica, sans-serif;

  --pad:   clamp(8px, 0.8vw, 14px);
  --side:  clamp(8px, 0.8vw, 14px);
  --body: 20px; }
body.p-work-index { -webkit-text-size-adjust: 100%; }
body.p-work-index { font-family: var(--sans);
  font-weight: 700;
  font-size: var(--body);
  line-height: 1.32;
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased; }
body.p-work-index a { color: inherit; text-decoration: none; }
body.p-work-index .work { padding: clamp(40px, 6vw, 80px) var(--side) clamp(64px, 9vw, 120px); }
body.p-work-index .work-lead { margin-bottom: clamp(40px, 5vw, 72px); }
body.p-work-index .project { display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 56px); }
body.p-work-index .project + .project { margin-top: clamp(72px, 10vw, 150px); }
body.p-work-index .proj-grid { display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(40px, 5vw, 88px);
  align-items: start; }
body.p-work-index .meta { display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 44px);
  position: sticky;
  top: clamp(96px, 11vw, 120px); }
body.p-work-index .client { display: flex;
  flex-direction: column; }
body.p-work-index .cl { font-size: var(--body);
  font-weight: 700;
  line-height: 1.14;
  text-wrap: pretty; }
body.p-work-index .hl { background: var(--ink);
  color: var(--bg);
  padding: 0.02em 0.16em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone; }
body.p-work-index .case-link { font-size: var(--body);
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  width: fit-content; }
body.p-work-index .case-link .arr { display: inline-block; margin-left: 0.12em; text-decoration: none; }
body.p-work-index .case-link:hover { text-decoration-thickness: 3px; }
body.p-work-index .proj-image { position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--ph);
  overflow: hidden; }
body.p-work-index .proj-image:has(.proj-cover) { aspect-ratio: auto;
  background: none; }
body.p-work-index .proj-image .proj-cover { position: static;
  display: block;
  width: 100%;
  height: auto; }
body.p-work-index .proj-image .img-arr { position: absolute;
  top: clamp(14px, 1.4vw, 22px);
  right: clamp(14px, 1.4vw, 22px);
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(25px, 2.5vw, 40px);
  line-height: 1;
  color: var(--ink);
  transition: transform 140ms ease; }
body.p-work-index .proj-image:hover .img-arr { transform: translate(3px, -3px); }
body.p-work-index .proj-image::after { content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  transition: opacity 140ms ease; }
body.p-work-index .proj-image:hover::after { opacity: 0.04; }
body.p-work-index .proj-desc { width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5em; }
body.p-work-index .proj-desc-inner { margin-left: 0; }
body.p-work-index .proj-desc p { max-width: none; }
body.p-work-index .proj-desc .result { color: var(--ink); }
@media (max-width: 860px) {
  body.p-work-index .proj-grid { grid-template-columns: 1fr; row-gap: clamp(28px, 6vw, 40px); }
  body.p-work-index .meta { position: static; }
  body.p-work-index .proj-desc-inner { margin-left: 0; }
  body.p-work-index .proj-desc p { max-width: none; }
}
@media (max-width: 640px) {
  body.p-work-index { --body: 20px; }
}

/* ==========================================================================
   PAGE: p-case  (source: work-case.html)
   ========================================================================== */
body.p-case { --bg:    #fcfcfa;
  --ink:   #000000;
  --grey:  #b9b9b6;
  --sub:   #6e6e6a;
  --link:  #0051ff;
  --mono:  Arial, Helvetica, sans-serif;
  --sans:  Arial, Helvetica, sans-serif;

  --pad:   clamp(8px, 0.8vw, 14px);
  --side:  clamp(8px, 0.8vw, 14px);
  --body: 20px;                              
  --read: 20px;
  --stick: clamp(96px, 11vw, 124px); }
body.p-case { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.p-case { font-family: var(--sans);
  font-weight: 700;
  font-size: var(--body);
  line-height: 1.32;
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased; }
body.p-case a { color: inherit; text-decoration: none; }
body.p-case .case { display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(40px, 6vw, 96px);
  padding: clamp(36px, 5vw, 72px) var(--side) clamp(80px, 12vw, 160px);
  align-items: start; }
body.p-case .rail { position: sticky;
  top: var(--stick);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 44px); }
body.p-case .back { font-family: var(--mono);
  font-weight: 400;
  font-size: var(--body);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--grey);
  width: fit-content;
  white-space: nowrap; }
body.p-case .back:hover { color: var(--ink); }
body.p-case .client { display: flex; flex-direction: column; }
body.p-case .cl { font-size: var(--body); font-weight: 700; line-height: 1.14; text-wrap: pretty; }
body.p-case .hl { background: var(--ink);
  color: var(--bg);
  padding: 0.02em 0.16em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone; }
body.p-case .toc { padding-top: clamp(16px, 1.6vw, 22px); }
body.p-case .toc-h { font-family: var(--mono);
  font-weight: 400;
  font-size: var(--body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 0.9em; }
body.p-case .toc ol { list-style: none; display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin-left: -12px; }
body.p-case .toc a { display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  width: fit-content;
  font-size: var(--body);
  font-weight: 700;
  text-transform: lowercase;
  line-height: 1.3;
  color: var(--ink);
  padding: 4px 12px;
  transition: background 90ms ease, color 90ms ease; }
body.p-case .toc a .n { font-weight: 700; color: inherit; display: inline-block; width: 1.2em; }
body.p-case .toc a.current { color: #fff; }
body.p-case .toc li:nth-child(6n+1) a:hover, body.p-case .toc li:nth-child(6n+1) a.current { background: #0051ff; }
body.p-case .toc li:nth-child(6n+2) a:hover, body.p-case .toc li:nth-child(6n+2) a.current { background: #FF4000; }
body.p-case .toc li:nth-child(6n+3) a:hover, body.p-case .toc li:nth-child(6n+3) a.current { background: #04B038; }
body.p-case .toc li:nth-child(6n+4) a:hover, body.p-case .toc li:nth-child(6n+4) a.current { background: #8B48D2; }
body.p-case .toc li:nth-child(6n+5) a:hover, body.p-case .toc li:nth-child(6n+5) a.current { background: #E8E398; color: #000; }
body.p-case .toc a.back-link { margin-left: calc(1.2em + 0.5em); }
body.p-case .article { max-width: 62ch; }
body.p-case .case-title { font-size: var(--body);
  line-height: 1.3;
  margin-bottom: clamp(28px, 4vw, 52px);
  text-wrap: balance; }
body.p-case .section { padding-top: clamp(40px, 5vw, 72px); scroll-margin-top: var(--stick); }
body.p-case .section:first-of-type { padding-top: 0; }
body.p-case .section-head { display: flex;
  align-items: baseline;
  gap: 0.7em;
  margin-bottom: clamp(16px, 1.6vw, 22px); }
body.p-case .section-head .sn { font-family: var(--mono); font-weight: 700; font-size: var(--body); color: var(--ink); padding-top: 0; }
body.p-case .section-head h2 { font-size: var(--body); font-weight: 700; line-height: 1.2; }
body.p-case .section p { font-size: var(--read);
  font-weight: 400;
  line-height: 1.4;
  text-wrap: pretty; }
body.p-case .section p + p { margin-top: 1.3em; }
body.p-case .section p b, body.p-case .section p strong { font-weight: 700; }
body.p-case .case-table { width: 100%;
  border-collapse: collapse;
  margin-top: 1.3em;
  font-size: var(--read); }
body.p-case .case-table th { text-align: left;
  font-weight: 400;
  color: var(--ink);
  padding: 0 0 0.7em;
  border-bottom: 2px solid var(--ink);
  vertical-align: bottom; }
body.p-case .case-table td { padding: 0.85em 0;
  border-bottom: 1px solid #e3e0d9;
  vertical-align: top;
  font-weight: 700;
  line-height: 1.3;
  text-wrap: pretty; }
body.p-case .case-table th:first-child, body.p-case .case-table td:first-child { width: 46%; padding-right: 1.4em; }
body.p-case .case-table td .tn { color: inherit; margin-right: 0.5em; }
body.p-case .pull { font-size: var(--body);
  font-weight: 700;
  line-height: 1.32;
  text-wrap: pretty; }
body.p-case .list, body.p-case .steps { list-style: none; margin-top: 1.3em; display: flex; flex-direction: column; gap: 0.65em; }
body.p-case .list li, body.p-case .steps li { position: relative; font-weight: 700; line-height: 1.4; text-wrap: pretty; }
body.p-case .list li { padding-left: 1.4em; }
body.p-case .list li::before { content: "—"; position: absolute; left: 0; font-weight: 700; color: var(--ink); }
body.p-case .steps { counter-reset: st; margin-top: 1.5em; gap: 1em; }
body.p-case .steps li { padding-left: 2.6em; min-height: 1.4em; }
body.p-case .steps li::before { counter-increment: st;
  content: counter(st, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--mono); font-weight: 700; font-size: 1em;
  color: var(--ink); }
body.p-case .list li b, body.p-case .steps li b { font-weight: 700; }
body.p-case .related { margin-top: 1.4em; border-top: 2px solid var(--ink); }
body.p-case .related a { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5em;
  padding: 0.95em 0; border-bottom: 1px solid var(--line); }
body.p-case .related a .r-t { font-weight: 700; line-height: 1.3; text-wrap: pretty;
  transition: background 90ms ease, color 90ms ease; }
body.p-case .related a .r-k { font-family: var(--mono); font-weight: 700; color: var(--grey); white-space: nowrap; }
body.p-case .related a:hover .r-t { background: var(--ink); color: var(--bg);
  padding: 0.06em 0.22em; margin: -0.06em -0.22em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone; }
@media (max-width: 880px) {
  body.p-case .case { grid-template-columns: 1fr; row-gap: clamp(40px, 7vw, 64px); }
  body.p-case .rail { position: static; }
  body.p-case .article { max-width: none; }
}
@media (max-width: 640px) {
  body.p-case { --body: 18px; }
}

/* ==========================================================================
   PAGE: p-lab-index  (source: lab-index.html)
   ========================================================================== */
body.p-lab-index { --bg:    #fcfcfa;
  --ink:   #000000;
  --grey:  #b9b9b6;
  --sub:   #6e6e6a;
  --link:  #0051ff;
  --ph:    #dbd7cd;   
  --mono: Arial, Helvetica, sans-serif;
  --sans:  Arial, Helvetica, sans-serif;

  --pad:   clamp(8px, 0.8vw, 14px);
  --side:  clamp(8px, 0.8vw, 14px);
  --body: 20px; }
body.p-lab-index { -webkit-text-size-adjust: 100%; }
body.p-lab-index { font-family: var(--sans);
  font-weight: 700;
  font-size: var(--body);
  line-height: 1.32;
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased; }
body.p-lab-index a { color: inherit; text-decoration: none; }
body.p-lab-index .work { padding: clamp(40px, 6vw, 80px) var(--side) clamp(64px, 9vw, 120px); }
body.p-lab-index .work-lead { margin-bottom: clamp(40px, 5vw, 72px); }
body.p-lab-index .project { display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 56px); }
body.p-lab-index .project.hidden { display: none; }
body.p-lab-index .project + .project { margin-top: clamp(72px, 10vw, 150px); }
body.p-lab-index .proj-grid { display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(40px, 5vw, 88px);
  align-items: start; }
body.p-lab-index .meta { display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 44px);
  position: sticky;
  top: clamp(96px, 11vw, 120px); }
body.p-lab-index .client { display: flex;
  flex-direction: column; }
body.p-lab-index .cl { font-size: var(--body);
  font-weight: 700;
  line-height: 1.14;
  text-wrap: pretty; }
body.p-lab-index .hl { background: var(--ink);
  color: var(--bg);
  padding: 0.02em 0.16em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone; }
body.p-lab-index .case-link { font-size: var(--body);
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  width: fit-content; }
body.p-lab-index .case-link .arr { display: inline-block; margin-left: 0.12em; text-decoration: none; }
body.p-lab-index .case-link:hover { text-decoration-thickness: 3px; }
body.p-lab-index .proj-image { position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--ph);
  overflow: hidden; }
body.p-lab-index .proj-image .img-arr { position: absolute;
  top: clamp(14px, 1.4vw, 22px);
  right: clamp(14px, 1.4vw, 22px);
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(25px, 2.5vw, 40px);
  line-height: 1;
  color: var(--ink);
  transition: transform 140ms ease; }
body.p-lab-index .proj-image:hover .img-arr { transform: translate(3px, -3px); }
body.p-lab-index .proj-image::after { content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  transition: opacity 140ms ease; }
body.p-lab-index .proj-image:hover::after { opacity: 0.04; }
body.p-lab-index .proj-desc { width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5em; }
body.p-lab-index .proj-desc-inner { margin-left: 0; }
body.p-lab-index .proj-desc p { max-width: none; }
body.p-lab-index .proj-desc .result { color: var(--ink); }
@media (max-width: 860px) {
  body.p-lab-index .proj-grid { grid-template-columns: 1fr; row-gap: clamp(28px, 6vw, 40px); }
  body.p-lab-index .meta { position: static; }
  body.p-lab-index .proj-desc-inner { margin-left: 0; }
  body.p-lab-index .proj-desc p { max-width: none; }
}
@media (max-width: 640px) {
  body.p-lab-index { --body: 20px; }
}

/* ==========================================================================
   PAGE: p-labpost  (source: lab-post.html)
   ========================================================================== */
body.p-labpost { --bg:    #fcfcfa;
  --ink:   #000000;
  --grey:  #b9b9b6;
  --sub:   #6e6e6a;
  --line:  #e3e0d9;
  --tint:  #f1efe9;
  --link:  #0051ff;
  --mono:  Arial, Helvetica, sans-serif;
  --sans:  Arial, Helvetica, sans-serif;
  --code:  'IBM Plex Mono', ui-monospace, monospace;

  --blue:  #0051ff;
  --red:   #FF4000;
  --green: #04B038;
  --purple:#8B48D2;
  --gold:  #E8E398;

  --pad:   clamp(8px, 0.8vw, 14px);
  --side:  clamp(8px, 0.8vw, 14px);
  --body: 20px;
  --read: 20px;
  --stick: clamp(96px, 11vw, 124px); }
body.p-labpost { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.p-labpost { font-family: var(--sans);
  font-weight: 700;
  font-size: var(--body);
  line-height: 1.32;
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased; }
body.p-labpost a { color: inherit; text-decoration: none; }
body.p-labpost .case { display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(40px, 6vw, 96px);
  padding: clamp(36px, 5vw, 72px) var(--side) clamp(80px, 12vw, 160px);
  align-items: start; }
body.p-labpost .rail { position: sticky;
  top: var(--stick);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 44px); }
body.p-labpost .client { display: flex; flex-direction: column; }
body.p-labpost .cl { font-size: var(--body); font-weight: 700; line-height: 1.14; text-wrap: pretty; }
body.p-labpost .hl { background: var(--ink);
  color: var(--bg);
  padding: 0.02em 0.16em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone; }
body.p-labpost .toc { padding-top: clamp(16px, 1.6vw, 22px); }
body.p-labpost .toc-h { font-family: var(--mono);
  font-weight: 700;
  font-size: var(--body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 0.9em; }
body.p-labpost .toc ol { list-style: none; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-left: -12px; }
body.p-labpost .toc a { display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  width: fit-content;
  white-space: nowrap;
  font-size: var(--body);
  font-weight: 700;
  text-transform: lowercase;
  line-height: 1.3;
  color: var(--ink);
  padding: 4px 12px;
  transition: background 90ms ease, color 90ms ease; }
body.p-labpost .toc a .n { font-weight: 700; color: inherit; display: inline-block; width: 1.2em; }
body.p-labpost .toc a.current { color: #fff; }
body.p-labpost .toc li:nth-child(5n+1) a.current { background: var(--blue); }
body.p-labpost .toc li:nth-child(5n+2) a.current { background: var(--red); }
body.p-labpost .toc li:nth-child(5n+3) a.current { background: var(--green); }
body.p-labpost .toc li:nth-child(5n+4) a.current { background: var(--purple); }
body.p-labpost .toc li:nth-child(5n+5) a.current { background: var(--gold); color: #000; }
body.p-labpost .toc a.back-link { margin-left: calc(1.2em + 0.5em); color: var(--grey); }
body.p-labpost .toc a.back-link:hover { background: var(--ink); color: #fff; }
body.p-labpost .article { max-width: 64ch; }
body.p-labpost .eyebrow { font-family: var(--mono);
  font-weight: 700;
  font-size: 0.78em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sub);
  margin-bottom: 0.9em; }
body.p-labpost .case-title { font-size: var(--body);
  line-height: 1.3;
  margin-bottom: clamp(28px, 4vw, 52px);
  text-wrap: balance; }
body.p-labpost .section { padding-top: clamp(40px, 5vw, 72px); scroll-margin-top: var(--stick); }
body.p-labpost .section:first-of-type { padding-top: 0; }
body.p-labpost .section-head { display: flex;
  align-items: baseline;
  gap: 0.7em;
  margin-bottom: clamp(16px, 1.6vw, 22px); }
body.p-labpost .section-head .sn { font-family: var(--mono); font-weight: 700; font-size: var(--body); color: var(--ink); }
body.p-labpost .section-head h2 { font-size: var(--body); font-weight: 700; line-height: 1.2; }
body.p-labpost .section p { font-size: var(--read);
  font-weight: 700;
  line-height: 1.4;
  text-wrap: pretty; }
body.p-labpost .section p + p { margin-top: 1.3em; }
body.p-labpost .section p b, body.p-labpost .section p strong { font-weight: 700; }
body.p-labpost .lede { font-weight: 700 !important; }
body.p-labpost .section p a, body.p-labpost .ans a, body.p-labpost .lede a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
body.p-labpost .section p a:hover, body.p-labpost .ans a:hover { background: var(--link); color: #fff; text-decoration: none; }
body.p-labpost .section p a:has(> img), body.p-labpost .ans a:has(> img), body.p-labpost .lede a:has(> img) { text-decoration: none; background: none; }
body.p-labpost .section p a:has(> img):hover, body.p-labpost .ans a:has(> img):hover, body.p-labpost .lede a:has(> img):hover { background: none; }
body.p-labpost code { font-family: var(--code); font-weight: 700; font-size: 0.84em; background: var(--tint); padding: 0.08em 0.36em; }
body.p-labpost .codeblock { margin: 1.7em 0; }
body.p-labpost .codeblock .cap { font-family: var(--mono);
  font-weight: 700;
  font-size: 0.74em;
  color: var(--sub);
  margin-bottom: 0.6em;
  display: flex;
  justify-content: space-between;
  gap: 1em; }
body.p-labpost .codeblock .cap .lang { color: var(--grey); }
body.p-labpost .codeblock pre { background: var(--ink);
  color: var(--bg);
  padding: clamp(18px, 2.2vw, 26px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  font-family: var(--code);
  font-weight: 700;
  font-size: 0.74em;
  line-height: 1.65;
  tab-size: 2; }
body.p-labpost .codeblock pre code { background: none;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  color: inherit; }
body.p-labpost .codeblock .c { color: var(--grey); }
body.p-labpost .codeblock .s { color: #9DFFBA; }
body.p-labpost .codeblock .k { color: #7FB9FF; }
body.p-labpost .section h3 { font-size: var(--body); font-weight: 700; line-height: 1.22; margin-top: 1.7em; margin-bottom: 0.15em; }
body.p-labpost .section h3 + p { margin-top: 0.45em; }
body.p-labpost .list, body.p-labpost .steps { list-style: none; margin-top: 1.3em; display: flex; flex-direction: column; gap: 0.65em; }
body.p-labpost .list li, body.p-labpost .steps li { position: relative; font-weight: 700; line-height: 1.4; text-wrap: pretty; }
body.p-labpost .list li { padding-left: 1.4em; }
body.p-labpost .list li::before { content: "—"; position: absolute; left: 0; font-weight: 700; color: var(--ink); }
body.p-labpost .steps { counter-reset: st; margin-top: 1.5em; gap: 1em; }
body.p-labpost .steps li { padding-left: 2.6em; min-height: 1.4em; }
body.p-labpost .steps li::before { counter-increment: st;
  content: counter(st, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--mono); font-weight: 700; font-size: 1em;
  color: var(--ink); }
body.p-labpost .list li b, body.p-labpost .steps li b { font-weight: 700; }
body.p-labpost figure { margin: 1.7em 0; }
body.p-labpost .ph { position: relative;
  width: 100%;
  background-color: var(--tint);
  background-image: repeating-linear-gradient(135deg, transparent 0 11px, rgba(0,0,0,0.05) 11px 12px);
  border: 1px solid var(--line);
  display: grid;
  place-items: center; }
body.p-labpost .ph-16x9 { aspect-ratio: 16 / 9; }
body.p-labpost .ph-4x3 { aspect-ratio: 4 / 3; }
body.p-labpost .ph-1x1 { aspect-ratio: 1 / 1; }
body.p-labpost .ph-label { font-family: var(--mono);
  font-weight: 700;
  font-size: 0.72em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sub);
  background: var(--bg);
  padding: 0.35em 0.7em;
  text-align: center;
  border: 1px solid var(--line); }
body.p-labpost .ph-video .play { font-family: var(--sans);
  font-size: 1.1em;
  line-height: 1;
  width: 2.6em; height: 2.6em;
  display: grid; place-items: center;
  padding-left: 0.18em;
  background: var(--ink); color: var(--bg);
  border: none; border-radius: 50%;
  cursor: pointer;
  position: absolute; }
body.p-labpost .ph-video .ph-label { position: absolute; left: 50%; bottom: 0.9em; transform: translateX(-50%); }
body.p-labpost figcaption { font-family: var(--mono);
  font-weight: 700;
  font-size: 0.76em;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--sub);
  margin-top: 0.75em;
  text-wrap: pretty; }
body.p-labpost .fig-credit { color: var(--grey); }
body.p-labpost .gallery { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.4vw, 16px); }
body.p-labpost .gallery figcaption { grid-column: 1 / -1; margin-top: 0.2em; }
body.p-labpost .gallery img[data-zoom] { cursor: zoom-in; }

/* Embedded interactive map previews (live same-origin iframes). */
body.p-labpost .map-embed { margin: 1.7em 0; }
body.p-labpost .map-embed iframe { display: block; width: 100%; height: clamp(440px, 70vh, 720px);
  border: 1px solid var(--line); background: #fcfcfa; }
body.p-labpost .map-embed figcaption { font-family: var(--mono); font-size: var(--small, 0.82em);
  letter-spacing: 0.02em; margin-top: 0.45em; }
body.p-labpost .map-embed figcaption a { font-weight: 700; }

/* Click-to-zoom lightbox overlay (shared; driven by main.js [data-zoom]). */
.lightbox-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center;
  justify-content: center; padding: clamp(16px, 4vw, 56px); background: rgba(8, 8, 8, 0.9);
  cursor: zoom-out; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; }
.lightbox-overlay.open { opacity: 1; pointer-events: auto; }
.lightbox-overlay img { max-width: 100%; max-height: 100%; object-fit: contain;
  box-shadow: 0 6px 48px rgba(0, 0, 0, 0.45); }
@media (prefers-reduced-motion: reduce) { .lightbox-overlay { transition: none; } }

body.p-labpost .pull { font-size: 1.18em;
  font-weight: 700;
  line-height: 1.28;
  text-wrap: pretty;
  margin: 1.5em 0 0; }
body.p-labpost .quote { margin: 1.7em 0; background: var(--tint); padding: clamp(20px, 2.6vw, 30px); }
body.p-labpost .quote blockquote { font-size: 1.05em; font-weight: 700; line-height: 1.3; text-wrap: pretty; }
body.p-labpost .quote figcaption { margin-top: 0.9em; color: var(--ink); }
body.p-labpost .quote figcaption b { font-weight: 700; }
body.p-labpost .quote figcaption span { color: var(--sub); }
body.p-labpost .note { margin: 1.7em 0;
  padding: clamp(18px, 2.4vw, 26px) clamp(20px, 2.6vw, 28px);
  background: var(--tint); }
body.p-labpost .note--tip { --accent: var(--green); }
body.p-labpost .note--warn { --accent: var(--red); }
body.p-labpost .note--info { --accent: var(--blue); }
body.p-labpost .note-label { font-family: var(--mono);
  font-weight: 700;
  font-size: 0.76em;
  color: var(--ink);
  margin-bottom: 0.55em; }
body.p-labpost .note p { font-weight: 700; line-height: 1.35; }
body.p-labpost .takeaways { margin: 1.8em 0;
  background: var(--tint);
  color: var(--ink);
  padding: clamp(20px, 2.6vw, 30px); }
body.p-labpost .takeaways h3 { font-family: var(--mono);
  font-weight: 700;
  font-size: 0.78em;
  color: var(--sub);
  margin: 0 0 1.1em; }
body.p-labpost .takeaways ul { list-style: none; display: flex; flex-direction: column; gap: 0.75em; }
body.p-labpost .takeaways li { font-weight: 700; line-height: 1.32; text-wrap: pretty; }
body.p-labpost .case-table { width: 100%; border-collapse: collapse; margin-top: 1.3em; font-size: var(--read); }
body.p-labpost .case-table th { text-align: left; font-weight: 700; color: var(--ink);
  padding: 0 0 0.7em; border-bottom: 2px solid var(--ink); vertical-align: bottom; }
body.p-labpost .case-table td { padding: 0.85em 0; border-bottom: 1px solid var(--line);
  vertical-align: top; font-weight: 700; line-height: 1.3; text-wrap: pretty; }
body.p-labpost .case-table th:first-child, body.p-labpost .case-table td:first-child { width: 46%; padding-right: 1.4em; }
body.p-labpost .case-table td .tn { color: inherit; margin-right: 0.5em; font-family: var(--mono); }
body.p-labpost .faq { margin-top: 1.4em; border-top: 2px solid var(--ink); }
body.p-labpost .faq details { border-bottom: 1px solid var(--line); }
body.p-labpost .faq summary { list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: baseline; gap: 1em;
  padding: 0.95em 0; font-weight: 700; line-height: 1.3; text-wrap: pretty; }
body.p-labpost .faq summary::-webkit-details-marker { display: none; }
body.p-labpost .faq summary::after { content: "+"; font-family: var(--mono); font-weight: 700; color: var(--sub); }
body.p-labpost .faq details[open] summary::after { content: "\2013"; }
body.p-labpost .faq .ans { padding: 0 0 1.1em; max-width: 58ch; }
body.p-labpost .faq .ans p { font-weight: 700; }
body.p-labpost .related { margin-top: 1.4em; border-top: 2px solid var(--ink); }
body.p-labpost .related a { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5em;
  padding: 0.95em 0; border-bottom: 1px solid var(--line); }
body.p-labpost .related a .r-t { font-weight: 700; line-height: 1.3; text-wrap: pretty;
  transition: background 90ms ease, color 90ms ease; }
body.p-labpost .related a .r-k { font-family: var(--mono); font-weight: 700; color: var(--grey); white-space: nowrap; }
body.p-labpost .related a:hover .r-t { background: var(--ink); color: var(--bg);
  padding: 0.06em 0.22em; margin: -0.06em -0.22em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone; }
body.p-labpost .cta { margin: 1.9em 0 0;
  background: var(--ink);
  color: var(--bg);
  padding: clamp(26px, 3.5vw, 44px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.1em; }
body.p-labpost .cta .cta-h { font-size: 1.1em; font-weight: 700; line-height: 1.24; color: var(--bg); text-wrap: pretty; }
body.p-labpost .cta a { font-family: var(--mono); font-weight: 700; font-size: 0.82em;
  letter-spacing: 0.04em; text-transform: uppercase;
  border: 1px solid var(--bg); padding: 0.7em 1.1em;
  transition: background 90ms ease, color 90ms ease; }
body.p-labpost .cta a:hover { background: var(--bg); color: var(--ink); }
@media (max-width: 880px) {
  body.p-labpost .case { grid-template-columns: 1fr; row-gap: clamp(40px, 7vw, 64px); }
  body.p-labpost .rail { position: static; }
  body.p-labpost .article { max-width: none; }
}
@media (max-width: 640px) {
  body.p-labpost { --body: 18px; }
  body.p-labpost .gallery { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PAGE: p-about  (source: about.html)
   ========================================================================== */
body.p-about { --bg:    #fcfcfa;
  --ink:   #000000;
  --grey:  #b9b9b6;   
  --link:  #0051ff;
  --mono: Arial, Helvetica, sans-serif;
  --sans:  Arial, Helvetica, sans-serif;

  --pad:   clamp(8px, 0.8vw, 14px);
  --side:  clamp(8px, 0.8vw, 14px);
  --body:  clamp(16px, 1.3vw, 21px); }
body.p-about { -webkit-text-size-adjust: 100%; }
body.p-about { font-family: var(--sans);
  font-weight: 700;
  font-size: var(--body);
  line-height: 1.32;
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  padding: 0;
  -webkit-font-smoothing: antialiased; }
body.p-about .about { width: 50%;
  margin-top: clamp(48px, 6vw, 88px);
  padding: 0 var(--side) clamp(48px, 7vw, 96px);
  display: flex;
  flex-direction: column;
  gap: 1.7em; }
body.p-about .about p { margin: 0; }
body.p-about .stack { display: flex; flex-direction: column; }
body.p-about a.l { color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--link);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px; }
body.p-about a.plain { color: inherit; }
body.p-about a.plain:hover { text-decoration: underline; text-underline-offset: 3px; }
body.p-about .mono { font-family: var(--mono); font-weight: 500; }
@media (max-width: 820px) {
  body.p-about .about { width: 100%; }
}
@media (max-width: 640px) {
  body.p-about { --body: clamp(14px, 4.2vw, 18px); }
}

/* --- rich About sections: Who / What we study / Stack / What we do --------- */
body.p-about { --sub: #6f6f6b; --line: #e2e2de; --acc: var(--link);
  --read: var(--body); }
body.p-about .section { display: flex; flex-direction: column; }
body.p-about .section-head { display: flex; gap: 0.6em; align-items: baseline; margin-bottom: 0.7em; }
body.p-about .section-head .sn { font-family: var(--mono); font-weight: 700; font-size: var(--read); color: var(--ink); }
body.p-about .section-head h2 { font-size: var(--body); font-weight: 700; line-height: 1.2; margin: 0; }
body.p-about .section p { font-size: var(--read); font-weight: 700; line-height: 1.4; margin: 0; text-wrap: pretty; }
body.p-about .section p + p { margin-top: 1.1em; }
body.p-about .section p a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
body.p-about .section p a:hover { background: var(--link); color: #fff; text-decoration: none; }

/* taxonomy tree (.tree) — indented bracket tree with CSS-border connectors */
body.p-about .viz { margin: 1.4em 0 0; }
body.p-about .tree { margin: 0; font-weight: 700; font-size: var(--read); }
body.p-about .tree .root { display: inline-block; background: var(--ink); color: var(--bg);
  padding: 0.4em 0.8em; font-family: var(--mono); font-weight: 700; font-size: 0.82em;
  margin-bottom: 0.2em; }
body.p-about .tree ul { list-style: none; padding-left: 1.6em; position: relative; margin: 0; }
body.p-about .tree li { position: relative; padding: 0.32em 0 0.32em 1.5em; }
body.p-about .tree li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 1.5px; background: var(--ink); }
body.p-about .tree li::after { content: ""; position: absolute; left: 0; top: 0.95em;
  width: 1.05em; height: 1.5px; background: var(--ink); }
body.p-about .tree li:last-child::before { bottom: auto; height: 0.95em; }
body.p-about .tree .nm { font-weight: 700; line-height: 1.2; }
body.p-about .tree .ix { font-family: var(--mono); color: var(--sub); margin-right: 0.5em; }
body.p-about .tree .desc { font-family: var(--mono); font-weight: 700; font-size: 0.72em;
  color: var(--sub); display: block; margin-top: 0.1em; }
body.p-about .tree .tag { font-family: var(--mono); font-weight: 700; font-size: 0.68em;
  background: var(--ink); color: var(--bg);
  padding: 0.08em 0.45em; margin-left: 0.55em; white-space: nowrap; }
body.p-about .tree ul ul .nm { font-size: 0.86em; }

/* stack table (.case-table) */
body.p-about .case-table { width: 100%; border-collapse: collapse; margin-top: 1.3em; font-size: var(--read); }
body.p-about .case-table th { text-align: left; font-weight: 700; color: var(--ink);
  padding: 0 0 0.7em; border-bottom: 2px solid var(--ink); vertical-align: bottom; }
body.p-about .case-table td { padding: 0.85em 0; border-bottom: 1px solid var(--line);
  vertical-align: top; font-weight: 700; line-height: 1.3; text-wrap: pretty; }
body.p-about .case-table th:first-child, body.p-about .case-table td:first-child { width: 38%; padding-right: 1.4em; }

/* what-we-do catalog (.steps) + plain dash list (.list) */
body.p-about .list, body.p-about .steps { list-style: none; margin: 1.3em 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.65em; }
body.p-about .list li, body.p-about .steps li { position: relative; font-weight: 700; line-height: 1.4; font-size: var(--read); text-wrap: pretty; }
body.p-about .list li { padding-left: 1.4em; }
body.p-about .list li::before { content: "—"; position: absolute; left: 0; font-weight: 700; color: var(--ink); }
body.p-about .steps { counter-reset: st; gap: 1em; }
body.p-about .steps li { padding-left: 2.6em; min-height: 1.4em; }
body.p-about .steps li::before { counter-increment: st; content: counter(st, decimal-leading-zero);
  position: absolute; left: 0; top: 0; font-family: var(--mono); font-weight: 700; color: var(--sub); }

/* Impressum / legal page body (kirbytext) */
body.p-about .legal { display: flex; flex-direction: column; gap: 1.6em; }
body.p-about .legal h2 { font-size: var(--read); font-weight: 700; line-height: 1.2; margin: 0; }
body.p-about .legal p { font-size: var(--read); font-weight: 700; line-height: 1.4; margin: 0; }
body.p-about .legal a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   PAGE: p-404  (source: 404.html)
   ========================================================================== */
body.p-404 { --blue: #0051FF;
  --ink:  #ffffff;
  --mono: Arial, Helvetica, sans-serif;
  --fs:   clamp(10px, 0.86vw, 15px);
  --lh:   1.32; }
body.p-404, body.p-404 { height: 100%; }
/* Full-screen 404 has its own layout — hide the site nav from the header snippet */
body.p-404 .header { display: none; }
body.p-404 { font-family: var(--mono);
  font-weight: 500;
  font-size: var(--fs);
  line-height: var(--lh);
  color: var(--ink);
  background: var(--blue);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-transform: uppercase;
  letter-spacing: 0.02em; }
body.p-404 a { color: inherit; text-decoration: none; }
body.p-404 .brand { width: clamp(76px, 6vw, 108px);
  height: auto;
  display: block;
  margin-bottom: 1.5em;
  filter: brightness(0) invert(1); }
body.p-404 .scan { position: fixed; inset: 0; z-index: 50; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0)    0,
    rgba(0,0,0,0)    2px,
    rgba(0,0,0,0.05) 3px
  );
  mix-blend-mode: multiply; }
body.p-404 .poem {  }
body.p-404 .screen { position: fixed; inset: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 23% 42% 35%;
  padding: clamp(14px, 1.8vw, 34px) clamp(14px, 1.8vw, 34px) clamp(54px, 5vw, 80px);
  white-space: nowrap; }
body.p-404 .col { position: relative; overflow: hidden; }
body.p-404 .col.left { padding-right: 1.5em; }
body.p-404 .col.mid { padding-right: 1.2em; }
body.p-404 .col.right { padding-left: 0.4em; }
body.p-404 .blank { height: 1.32em; }
body.p-404 .b { font-weight: 700; }
body.p-404 .dim { opacity: 0.62; }
body.p-404 .inv { background: var(--ink); color: var(--blue); padding: 0 0.15em; }
body.p-404 .kbd { background: var(--ink); color: var(--blue); padding: 0 0.32em; font-weight: 700; }
body.p-404 .ln { display: flex; justify-content: space-between; gap: 2em; }
body.p-404 .ln .no { opacity: 0.95; }
body.p-404 .left .lower { position: absolute; left: 0; top: 42%; padding-right: 1.5em; }
body.p-404 .barcorrupt { letter-spacing: -0.04em;
  opacity: 0.5;
  overflow: hidden; }
body.p-404 .glitch { font-weight: 700; line-height: 1.18; }
body.p-404 .glitch .row { display: block; }
body.p-404 .glitch.with-no .row { display: flex; justify-content: space-between; gap: 1.4em; }
body.p-404 a.gohome { display: inline-block; }
body.p-404 a.gohome:hover { background: var(--ink); color: var(--blue); }
body.p-404 .statusbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid;
  grid-template-columns: 23% 42% 35%;
  padding: clamp(8px, 0.9vw, 16px) clamp(14px, 1.8vw, 34px);
  background: var(--blue); }
body.p-404 .statusbar .seg { white-space: nowrap; }
body.p-404 .statusbar a:hover { text-decoration: underline; text-underline-offset: 3px; }
body.p-404 .cur { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (max-width: 720px) {
  body.p-404 .screen, body.p-404 .statusbar { grid-template-columns: 1fr; }
  body.p-404 .col.right, body.p-404 .col.left { display: none; }
  body.p-404 .statusbar { grid-template-columns: 1fr; gap: 0.2em; font-size: 0.85em; }
}
/* ---------- work/lab project-card background swatches (ex-inline) ---------- */
.proj-image.pi-a{background:#70D0C8;}
.proj-image.pi-b{background:#E8E398;}
.proj-image.pi-c{background:#C3A4F1;}

/* ---------- TOC: wrap long entries, cap at rail width ---------- */
.toc a {
  white-space: normal !important;
  max-width: 100% !important;
  align-items: flex-start !important;
}
.toc a span:not(.n) {
  display: inline-block;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

/* ---------- article body: prevent horizontal overflow on mobile ---------- */
body.p-article .section p,
body.p-article .section li,
body.p-article .ans p,
body.p-article .ans li,
body.p-case .section p,
body.p-case .section li,
body.p-labpost .section p,
body.p-labpost .section li {
  overflow-wrap: anywhere;
  word-break: normal;
}
body.p-article .case-table,
body.p-case .case-table,
body.p-labpost .case-table {
  table-layout: fixed;
}
body.p-article .case-table td,
body.p-article .case-table th,
body.p-case .case-table td,
body.p-case .case-table th,
body.p-labpost .case-table td,
body.p-labpost .case-table th {
  overflow-wrap: anywhere;
  word-break: normal;
}
/* prevent any wide elements from pushing the page wider than the viewport.
   NB: must be `clip`, not `hidden` — `hidden` creates a scroll container on
   html/body, which silently breaks `position: sticky` on all descendants
   (.header, .meta, .rail, .sidebar, .sl-left). `clip` clips without scrolling. */
html, body { overflow-x: clip; }

/* ---------- proj-image: cover photo fills the card if provided ---------- */
.proj-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- article: numbered sub-headings (jobs & tools) ---------- */
body.p-article .sub-head { display: flex; align-items: baseline; gap: 0.55em; scroll-margin-top: var(--stick); }
body.p-article .sub-head .hn { font-family: var(--mono); font-weight: 700; font-size: var(--body); color: var(--sub); white-space: nowrap; }
body.p-article .section h4 { font-size: var(--body); font-weight: 700; line-height: 1.22; margin-top: 1.5em; margin-bottom: 0.15em; }
body.p-article .section h4 + p { margin-top: 0.45em; }
body.p-article .h4-head { padding-left: 1.1em; }
body.p-article .h4-head .hn { color: var(--grey); }
/* breathing room after lists and tables (were glued to following text) */
body.p-article .section .list, body.p-article .section .steps { margin-bottom: 1.45em; }
body.p-article .section .case-table { margin-bottom: 1.75em; }
/* group label: an h3 that just groups tools (no number) */
body.p-article .group-head { font-family: var(--mono); font-weight: 700; font-size: var(--body);
  text-transform: uppercase; letter-spacing: 0.03em; color: var(--sub); line-height: 1.2;
  margin-top: 2em; margin-bottom: 0.5em; scroll-margin-top: var(--stick); }

/* ---------- article: nested TOC (sub-sections under each section) ---------- */
body.p-article .toc-sub { list-style: none; margin: 3px 0 6px 0; display: flex; flex-direction: column; gap: 1px; }
body.p-article .toc-sub a { display: inline-flex; align-items: baseline; gap: 0.5em; width: fit-content; white-space: nowrap;
  font-size: var(--body); font-weight: 700; text-transform: lowercase; line-height: 1.3; color: var(--sub); padding: 2px 12px; }
body.p-article .toc-sub .n { font-family: var(--mono); font-weight: 700; width: auto; min-width: 2.8em; color: var(--grey); }
body.p-article .toc-sub .lvl-h4 a { padding-left: 26px; }
body.p-article .toc-sub .is-group a { text-transform: uppercase; letter-spacing: 0.02em; color: var(--grey); padding-top: 6px; }
body.p-article .toc .toc-sub a:hover, body.p-article .toc .toc-sub a.current { background: var(--ink); color: #fff; }

/* Lab post: numbered body sub-headings (e.g. "02.01  Trend Radar").
   Without this the number and title spans render with no gap. Mirrors the
   p-article .sub-head rules. */
body.p-labpost .sub-head { display: flex; align-items: baseline; gap: 0.55em; scroll-margin-top: var(--stick); }
body.p-labpost .sub-head .hn { font-family: var(--mono); font-weight: 700; font-size: var(--body); color: var(--ink); white-space: nowrap; }
body.p-labpost .group-head { font-family: var(--mono); font-weight: 700; font-size: var(--body);
  text-transform: uppercase; letter-spacing: 0.03em; color: var(--sub); line-height: 1.2;
  margin-top: 2em; margin-bottom: 0.5em; scroll-margin-top: var(--stick); }

/* Nested sub-headings in the Lab post sidebar (e.g. 02.01 Trend Radar).
   Mirrors the p-article rules so NN.MM numbers align instead of overflowing
   the top-level .n width. */
body.p-labpost .toc-sub { list-style: none; margin: 3px 0 6px 0; display: flex; flex-direction: column; gap: 1px; }
body.p-labpost .toc-sub a { display: inline-flex; align-items: baseline; gap: 0.5em; width: fit-content; white-space: nowrap;
  font-size: var(--body); font-weight: 700; text-transform: lowercase; line-height: 1.3; color: var(--sub); padding: 2px 12px; }
body.p-labpost .toc-sub .n { font-family: var(--mono); font-weight: 700; width: auto; min-width: 2.8em; color: var(--grey); }
body.p-labpost .toc-sub .lvl-h4 a { padding-left: 26px; }
body.p-labpost .toc-sub .is-group a { text-transform: uppercase; letter-spacing: 0.02em; color: var(--grey); padding-top: 6px; }
body.p-labpost .toc .toc-sub a:hover, body.p-labpost .toc .toc-sub a.current { background: var(--ink); color: #fff; }

/* TOC hover highlight only on real-hover devices — prevents sticky :hover
   leaving multiple items highlighted on touch screens. */
@media (hover: hover) {
  body.p-article .toc a:hover,
  body.p-case .toc a:hover,
  body.p-labpost .toc a:hover { color: #fff; }
  body.p-article .toc li:nth-child(5n+1) a:hover { background: var(--blue); }
  body.p-article .toc li:nth-child(5n+2) a:hover { background: var(--red); }
  body.p-article .toc li:nth-child(5n+3) a:hover { background: var(--green); }
  body.p-article .toc li:nth-child(5n+4) a:hover { background: var(--purple); }
  body.p-article .toc li:nth-child(5n+5) a:hover { background: var(--gold); color: #000; }
  body.p-labpost .toc li:nth-child(5n+1) a:hover { background: var(--blue); }
  body.p-labpost .toc li:nth-child(5n+2) a:hover { background: var(--red); }
  body.p-labpost .toc li:nth-child(5n+3) a:hover { background: var(--green); }
  body.p-labpost .toc li:nth-child(5n+4) a:hover { background: var(--purple); }
  body.p-labpost .toc li:nth-child(5n+5) a:hover { background: var(--gold); color: #000; }
}