/* =========================================================
   iPBL 2026 — Quadruped Manual
   University of San Jose – Recoletos
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-sans: 'Lexend', system-ui, sans-serif;
  --font-serif-italic: 'Crimson Pro', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --green-900: #06200F;
  --green-800: #0D3E20;
  --green-700: #195A33;
  --green-600: #2A7B4A;
  --green-100: #DCE7DE;
  --green-50:  #EFF3EC;

  --gold-700: #8A5A00;   /* AA-contrast gold for text on paper/paper-2 */
  --gold-600: #C98300;
  --gold-500: #FEB104;
  --gold-300: #FFCD55;
  --gold-100: #FFE9B0;

  --orange-700: #B7410E;
  --orange-100: #FBE6D7;

  --paper:    #F6F4EE;      /* warm ivory, desaturated off the original cream/beige */
  --paper-2:  #EDE9DD;
  --ink:      #21291F;      /* near-black warm ink — body text */
  --ink-soft: #3D4A3C;
  --ink-mute: #55624F;
  --rule:     #C9C4B4;

  --maxw: 1600px;
  --measure: 70rem;      /* readable cap for main.content prose/tables/figures */
  --gutter: clamp(1.25rem, 3vw, 2.5rem);
  --topbar-h: 68px;

  --shadow-sm: 0 1px 0 rgba(13,62,32,.08);
  --shadow-md: 0 8px 24px -12px rgba(13,62,32,.25);
}

/* ---------- Event page theme override (index.html only) ----------
   Poster-matched palette: vivid orange primary, dark brown secondary,
   swapped in as custom-property overrides so every component built on
   the --green---gold-* tokens (topbar, buttons, headings, footer,
   map pins) repaints without touching each rule individually. */
body.event-page {
  --green-900: #1F1309;
  --green-800: #2E1B0E;
  --green-700: #7A4419;
  --green-600: #8F5A2E;
  --green-100: #E7D9C9;
  --green-50:  #F3E9DE;

  --gold-700: #B7410E;   /* matches --orange-700 so map pin + text accents read as one orange */
  --gold-600: #C96A0C;
  --gold-500: #F0850F;
  --gold-300: #FFB066;
  --gold-100: #FFD9A8;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: light; background: var(--paper); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block; }

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--green-800);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 .5em;
  scroll-margin-top: calc(var(--topbar-h) + 1rem);
}
h1 { font-size: clamp(2.6rem, 5.5vw, 4.6rem); font-weight: 700; }
h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-top: 2.5em; }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); margin-top: 2em; font-weight: 600; }
h4 { font-size: 1.15rem; margin-top: 1.5em; font-weight: 600; color: var(--ink-soft); }

p { margin: 0 0 1.1em; }
a {
  color: var(--green-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .15s ease;
}
a:hover { color: var(--gold-700); }

strong { font-weight: 600; color: var(--ink); }
em { color: var(--ink-soft); font-family: var(--font-serif-italic); }

ul, ol { padding-left: 1.4em; margin: 0 0 1.2em; }
ul li, ol li { margin-bottom: .35em; }

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: .92em;
  background: var(--paper-2);
  padding: .12em .42em;
  border-radius: 3px;
  color: var(--green-800);
}

hr {
  border: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--rule) 20%, var(--rule) 80%, transparent);
  margin: 3em 0;
}

/* ---------- Top bar ---------- */
.topbar {
  background: var(--green-800);
  color: var(--paper);
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar-inner {
  min-height: var(--topbar-h);
  padding: .85rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: .8rem;
  text-decoration: none;
  color: var(--paper);
}
.brand-mark {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
  filter: invert(1);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.brand-sub {
  font-size: .72rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gold-300);
  font-family: var(--font-mono);
}

.topbar-actions { display: flex; align-items: center; gap: 1rem; }
.topbar-link {
  color: var(--paper);
  opacity: .75;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: .78rem;
  letter-spacing: .04em;
  transition: opacity .15s ease;
}
.topbar-link:hover { opacity: 1; }

.nav-toggle {
  background: transparent;
  border: 1px solid rgba(254,177,4,.45);
  color: var(--paper);
  padding: .45rem .7rem;
  font-family: var(--font-sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  display: none;
}
.nav-toggle:hover { border-color: var(--gold-500); color: var(--gold-300); }

/* ---------- Layout: Sidebar + Content ---------- */
.layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 3rem;
  padding: 2.5rem var(--gutter) 2.5rem;
}

aside.sidebar {
  position: sticky;
  top: 90px;
  align-self: start;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  padding-right: 1rem;
  border-right: 1px solid var(--rule);
  font-family: var(--font-sans);
  font-size: .9rem;
}
.sidebar-label {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .72rem;
  font-weight: 600;
  color: var(--ink-mute);
  margin-bottom: .9rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--rule);
}
.sidebar ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: navcount;
}
.sidebar ol li { margin: 0; counter-increment: navcount; }
.sidebar ol li a {
  display: grid;
  grid-template-columns: 2.5em 1fr;
  align-items: baseline;
  padding: .55rem 0;
  text-decoration: none;
  color: var(--ink-soft);
  border-bottom: 1px dotted transparent;
  transition: color .15s ease;
}
.sidebar ol li a::before {
  content: counter(navcount, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--ink-mute);
  letter-spacing: .05em;
}
.sidebar ol li a:hover { color: var(--green-800); }
.sidebar ol li a:hover::before { color: var(--gold-700); }
.sidebar ol li a.current {
  color: var(--green-800);
  font-weight: 700;
}
.sidebar ol li a.current::before {
  color: var(--gold-500);
  font-weight: 700;
}
.sidebar .home-link {
  display: block;
  padding: .4rem 0 .8rem;
  margin-bottom: .8rem;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink-soft);
  font-size: .8rem;
}
.sidebar .home-link::before { content: "← "; color: var(--gold-700); }
.sidebar .home-link:hover { color: var(--green-800); }

/* Reference block below the numbered sections */
.sidebar-label.ref { margin-top: 1.5rem; }
.sidebar .ref-list li a { grid-template-columns: 1fr; }
.sidebar .ref-list li a::before { content: none; }

/* ---------- Content ---------- */
main.content {
  width: 100%;
  max-width: var(--measure);
  min-width: 0;
  min-height: calc(100vh - var(--topbar-h)); /* keeps the dark footer off-screen while a section is still fetching */
}

/* Viewer states (manual.html shell) */
.view-status {
  font-family: var(--font-mono);
  font-size: .85rem;
  color: var(--ink-mute);
  padding: 3rem 0;
}
.page-head:empty, .pagination:empty { display: none; }

/* A new h2 marks a new subsystem — give it a visible break. */
main.content h2 {
  margin-top: 1.3em;
  padding-top: .6em;
  border-top: 1px solid var(--rule);
}
main.content .page-head + #sectionView > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.lede {
  font-family: var(--font-sans);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0 0 2rem;
}

/* ---------- Figures ---------- */
figure {
  margin: 2.5em 0;
  padding: 0;
}
figure .frame {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: .4rem;
  position: relative;
}
figure .frame::before,
figure .frame::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--gold-500);
}
figure .frame::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
figure .frame::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* Shown over a figure's media (or the hero 3D model) while it is still
   fetching; JS toggles .is-loading on the host and removes it on load. */
figure .frame.is-loading img,
figure .frame.is-loading video,
figure .frame.is-loading model-viewer,
figure .frame.is-loading kicanvas-embed {
  visibility: hidden;
}
.asset-loading-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: var(--paper-2);
  z-index: 2;
}

figure .placeholder {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--paper);
  display: grid;
  place-items: center;
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid var(--rule);
}
figure .frame img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
}
figure .frame video {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 37%;
  border: 1px solid var(--rule);
}
figure .frame model-viewer {
  display: block;
  width: 100%;
  height: 760px;
  border: 1px solid var(--rule);
}
figure .frame kicanvas-embed {
  display: block;
  width: 100%;
  height: 500px;
  border: 1px solid var(--rule);
}
figure .frame iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 1px solid var(--rule);
}

/* Square frames (assembly-sequence photos): each figure's subject sits at
   a different point in its source photo, so crop position is set per image. */
figure .frame.square {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
figure .frame.square img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
figure .frame.square img.pos-tibia   { object-position: 44% 50%; }
figure .frame.square img.pos-coxa    { object-position: 56% 50%; }
figure .frame.square img.pos-shold-1 { object-position: 60% 50%; }
figure .frame.square img.pos-shold-2 { object-position: 58% 50%; }
figure .frame.square img.pos-femur   { object-position: 50% 50%; }
figure .frame.square img.pos-body    { object-position: 45% 50%; }
figure .frame.square img.pos-limbs   { object-position: 49% 50%; }
figure .frame.square img.pos-pcb     { object-position: 46% 50%; }
figure .placeholder span {
  padding: .4rem .9rem;
  text-align: center;
}
figure figcaption {
  font-family: var(--font-serif-italic);
  font-style: italic;
  font-size: .92rem;
  color: var(--ink-soft);
  margin-top: .9rem;
}
figure figcaption .fig-label {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin-right: .6rem;
}

/* Scroll zoom: the image eases in slightly larger the first time its frame
   scrolls into view (JS toggles .in-view via IntersectionObserver, once);
   the frame itself holds still, clipping the zoomed edges. */
figure .frame.zoom-frame { overflow: hidden; }
.scroll-reveal {
  transform: scale(1);
  transition: transform 2.5s ease;
}
.scroll-reveal.in-view {
  transform: scale(1.02);
}
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal { transform: none; transition: none; }
}

/* Inline SVG diagrams inside frames */
svg.diagram { width: 100%; height: auto; background: var(--paper); }
svg.diagram a { cursor: pointer; text-decoration: none; }
svg.diagram .diagram-box { transition: stroke .15s ease, stroke-width .15s ease; }
svg.diagram a:hover .diagram-box,
svg.diagram a:focus-visible .diagram-box { stroke: var(--gold-600); stroke-width: 1.5; }
svg.diagram .diagram-hint { opacity: 0; transition: opacity .15s ease; }
svg.diagram .diagram-hint path { transition: transform .15s ease; }
svg.diagram a:hover .diagram-hint,
svg.diagram a:focus-visible .diagram-hint { opacity: 1; }
svg.diagram a:hover .diagram-hint path,
svg.diagram a:focus-visible .diagram-hint path { transform: translateX(3px); }

/* Two-up figures */
.figure-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin: 2.5em 0;
}
.figure-grid figure { margin: 0; }

/* ---------- Callouts ---------- */
.callout {
  margin: 2em 0;
  padding: 1.2rem 1.4rem;
  background: var(--paper-2);
  position: relative;
}
.callout .callout-label {
  font-family: var(--font-sans);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .5rem;
  font-weight: 700;
}
.callout p:last-child { margin-bottom: 0; }
/* Hierarchy: note/tip are quiet asides; warning must outrank both. */
.callout.note     { background: var(--green-100); }
.callout.note .callout-label    { color: var(--green-700); }
.callout.tip      { background: var(--gold-100); }
.callout.tip .callout-label     { color: var(--gold-700); }
.callout.warning  { background: var(--orange-100); }
.callout.warning .callout-label { color: var(--orange-700); font-size: .84rem; }
.callout.warning .callout-label::before { content: "⚠ "; }

/* ---------- Step Blocks ---------- */
.steps {
  list-style: none;
  padding: 0;
  margin: 2em 0;
  counter-reset: stepcount;
}
.steps > li {
  counter-increment: stepcount;
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 0 1.4rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
/* The number pseudo-element owns column 1; all real children stack in
   column 2 (without this, anything after the h4 auto-flows into the
   3rem number column and wraps one word per line). */
.steps > li > * { grid-column: 2; min-width: 0; }
.steps > li:first-child { padding-top: 0; }
.steps > li:last-child { border-bottom: 0; }
.steps > li::before {
  content: counter(stepcount, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--gold-700);
  line-height: 1;
  padding-top: .15rem;
}
.steps > li h4 { margin-top: 0; font-size: 1.25rem; color: var(--green-800); }
.steps > li p:last-child { margin-bottom: 0; }

/* ---------- Tables ---------- */
.table-wrap {
  overflow-x: auto;
  margin: 2em 0;
  padding: .4rem;
  border: 1px solid var(--rule);
  background: var(--paper-2);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: .94rem;
  font-family: var(--font-sans);
}
table thead th {
  text-align: left;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .84rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--green-800);
  padding: .75rem 1rem;
}
table tbody td {
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
table tbody tr:last-child td { border-bottom: 0; }
table tbody tr:nth-child(even) { background: rgba(255,255,255,.4); }
table .num { text-align: right; }
table .num.center { text-align: center; }
table tbody .num { font-family: var(--font-mono); color: var(--ink-soft); }

/* ---------- Code Blocks ---------- */
pre {
  background: var(--green-900);
  color: #E4DCC4;
  padding: 1.5rem;
  margin: 2em 0;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: .85rem;
  line-height: 1.6;
  position: relative;
}
pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
}
pre::before {
  content: attr(data-lang);
  position: absolute;
  top: .55rem;
  right: 1rem;
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-300);
}
.code-comment { color: #7C8A6E; font-style: italic; }
.code-key     { color: var(--gold-300); }
.code-str     { color: #C4DBA0; }

/* ---------- Pagination ---------- */
.pagination {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 4rem 0 0;
  padding-top: 2rem;
  border-top: 2px solid var(--green-800);
}
.pagination a {
  text-decoration: none;
  color: var(--ink-soft);
  display: block;
  padding: 1rem 1.2rem;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.pagination a:hover {
  background: var(--green-800);
  color: var(--paper);
  border-color: var(--green-800);
}
.pagination a:hover .page-direction { color: var(--gold-300); }
.pagination a:hover .page-title { color: var(--paper); }
.pagination .page-direction {
  font-family: var(--font-sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gold-700);
  display: block;
  margin-bottom: .25rem;
}
.pagination .page-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--green-800);
  font-weight: 500;
}
.pagination .next { text-align: right; }
.pagination .empty { visibility: hidden; }

/* ---------- Footer ---------- */
footer.site-footer {
  background: var(--green-900);
  color: var(--green-100);
  padding: 2.5rem var(--gutter) 0;
  margin-top: 2.5rem;
}
footer.site-footer.home-footer { margin-top: 0; }
footer.site-footer .foot-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 3rem;
}
footer.site-footer .foot-links {
  display: flex;
  gap: 3rem;
  justify-content: flex-end;
}
footer.site-footer .foot-about { max-width: 34rem; }
footer.site-footer h3 {
  font-family: var(--font-sans);
  font-size: .78rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin: 0 0 1rem;
  font-weight: 600;
}
footer.site-footer p, footer.site-footer li {
  font-size: .9rem;
  color: var(--green-100);
  line-height: 1.55;
}
footer.site-footer strong { color: inherit; }
footer.site-footer strong.name-accent { color: var(--gold-300); }
footer.site-footer ul { list-style: none; padding: 0; margin: 0; }
footer.site-footer li { margin-bottom: .35rem; }
footer.site-footer a { color: var(--gold-300); text-decoration: none; }
footer.site-footer a:hover { color: var(--gold-500); text-decoration: underline; }
.colophon {
  margin: 1.25rem calc(-1 * var(--gutter)) 0;
  padding: .9rem var(--gutter) 1rem;
  border-top: 1px solid rgba(254,177,4,.18);
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .03em;
  color: rgba(220, 231, 222, 0.75);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem;
}
/* .colophon's border/text tints are hardcoded rgba (not tokens), so the
   event-page override above can't reach them — restated here in the
   poster orange/brown instead of the manual's green/gold. */
body.event-page .colophon { border-top-color: rgba(240, 133, 15, .18); color: rgba(231, 217, 201, 0.75); }
.colophon-sponsors {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.sponsor-cycle {
  position: relative;
  width: 150px;
  height: 32px;
  overflow: hidden;
  flex: 0 0 auto;
}
.sponsor-cycle > img,
.sponsor-cycle > .cycle-pair {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: sponsor-cycle-fade 20s infinite;
}
.sponsor-cycle > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sponsor-cycle > img.pop-chip {
  background: var(--paper);
  border-radius: .25rem;
  padding: 3px;
  box-sizing: border-box;
}
.cycle-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.cycle-pair img { max-height: 80%; max-width: 46%; width: auto; object-fit: contain; }
.cycle-pair img.cycle-pair-lead { max-height: 100%; max-width: 62%; }
.sponsor-cycle > *:nth-child(1) { animation-delay: 0s; }
.sponsor-cycle > *:nth-child(2) { animation-delay: 2.5s; }
.sponsor-cycle > *:nth-child(3) { animation-delay: 5s; }
.sponsor-cycle > *:nth-child(4) { animation-delay: 7.5s; }
.sponsor-cycle > *:nth-child(5) { animation-delay: 10s; }
.sponsor-cycle > *:nth-child(6) { animation-delay: 12.5s; }
.sponsor-cycle > *:nth-child(7) { animation-delay: 15s; }
.sponsor-cycle > *:nth-child(8) { animation-delay: 17.5s; }
@keyframes sponsor-cycle-fade {
  0%, 100% { opacity: 0; }
  1.5%, 10.5% { opacity: 1; }
  12.5% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sponsor-cycle > img, .sponsor-cycle > .cycle-pair { animation: none; opacity: 0; }
  .sponsor-cycle > *:first-child { opacity: 1; }
}
.foot-partners {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.foot-partners img {
  height: 46px;
  width: auto;
  max-width: 72px;
  object-fit: contain;
}
.partner-logo {
  position: relative;
  display: inline-flex;
}
.partner-tag {
  position: absolute;
  bottom: calc(100% + .55rem);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--paper);
  color: var(--green-800);
  font-family: var(--font-sans);
  font-size: .72rem;
  letter-spacing: .01em;
  line-height: 1.3;
  white-space: nowrap;
  padding: .4rem .65rem;
  border-radius: .3rem;
  box-shadow: 0 6px 16px rgba(0,0,0,.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 5;
}
.partner-tag::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 10px;
  height: 10px;
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
  background: var(--paper);
}
.partner-logo:nth-child(1) .partner-tag,
.partner-logo:nth-child(2) .partner-tag {
  left: 0;
  transform: translateY(4px);
}
.partner-logo:nth-child(1):hover .partner-tag,
.partner-logo:nth-child(1):focus-within .partner-tag,
.partner-logo:nth-child(2):hover .partner-tag,
.partner-logo:nth-child(2):focus-within .partner-tag {
  transform: translateY(0);
}
.partner-logo:nth-child(1) .partner-tag::after,
.partner-logo:nth-child(2) .partner-tag::after { left: 20px; }
.partner-logo:hover .partner-tag,
.partner-logo:focus-within .partner-tag {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- Home Hero (index only) ---------- */
.hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(2rem, 6vh, 4rem) var(--gutter) clamp(1.5rem, 4vh, 2.5rem);
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: center;
  align-content: center;
  gap: clamp(2rem, 4vw, 4rem);
  min-height: calc(100vh - var(--topbar-h));
  position: relative;
}
.hero::before {
  content: "iPBL · 2026";
  position: absolute;
  top: 2rem;
  right: var(--gutter);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .25em;
  color: var(--gold-700);
  z-index: 1;
}
.hero-copy {
  position: relative;
  z-index: 1;
}
.hero-title {
  font-size: clamp(2.4rem, 1.8vw + 1.9rem, 4.2rem);
  line-height: 1.08;
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.hero-title .accent {
  font-family: var(--font-serif-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--gold-700);
}
.hero-meta {
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.hero-meta .dot {
  width: 6px; height: 6px;
  background: var(--gold-500);
  border-radius: 50%;
  display: inline-block;
}
.hero-blurb {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(0.95rem, 0.3vw + 0.85rem, 1.05rem);
  line-height: 1.5;
  color: var(--ink-soft);
  margin-top: 1.25rem;
}
.hero-blurb p { margin: 0 0 1em; }

/* Interactive 3D model holder - anchored in the right column, oversized so it
   spills behind the hero copy; z-index keeps the text readable on top. */
.hero-mark {
  position: relative;
  z-index: 0;
  aspect-ratio: 1 / 1;
}
.hero-mark model-viewer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-60%, -50%);
  width: 187.5%;
  aspect-ratio: 1 / 1;
  height: auto;
}
.hero-mark.is-loading model-viewer { visibility: hidden; }

/* ---------- Event Hero (index.html only) ---------- */
/* Full-bleed backdrop of crossfading photos under a dark scrim; JS (see
   main.js) cycles .is-active between the stacked images on a timer. */
.event-hero {
  position: relative;
  min-height: calc(100vh - var(--topbar-h));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.event-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.event-hero-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.08) translateX(1.5%);
  transition: opacity 2s ease;
}
.event-hero-bg img.is-active {
  opacity: 1;
  animation: event-hero-pan 6s linear forwards;
  will-change: transform, opacity;
}
@keyframes event-hero-pan {
  from { transform: scale(1.08) translateX(-1.5%); }
  to { transform: scale(1.08) translateX(1.5%); }
}
.event-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, var(--green-900) 0%, rgba(31, 19, 9, .4) 45%, rgba(31, 19, 9, .6) 100%),
    linear-gradient(to right, rgba(31, 19, 9, .6) 0%, rgba(31, 19, 9, .2) 45%, rgba(31, 19, 9, .6) 100%);
}
.event-hero-content {
  position: relative;
  z-index: 2;
  max-width: 46rem;
  padding: 0 var(--gutter);
  text-align: center;
  color: var(--paper);
}
.event-hero-kicker {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin: 0 0 1.2rem;
}
.event-hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 3vw + 1.6rem, 4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin: 0 0 1.2rem;
}
.event-hero-subtitle {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, .6vw + 1rem, 1.5rem);
  color: var(--gold-100);
  margin: 0 0 1.2rem;
}
.event-hero-meta {
  font-family: var(--font-sans);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gold-100);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  margin: 0 0 1.5rem;
}
.event-hero-meta .dot {
  width: 4px;
  height: 4px;
  background: var(--gold-500);
  border-radius: 50%;
  display: inline-block;
}
.event-hero-sub {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--paper);
  opacity: .88;
  margin: 0 0 2rem;
}
@media (prefers-reduced-motion: reduce) {
  .event-hero-bg img { transition: none; transform: none; }
  .event-hero-bg img.is-active { animation: none; }
}

/* Home sections (non-content pages share these) */
.home-section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 4rem var(--gutter);
  border-top: 1px solid var(--rule);
  scroll-margin-top: var(--topbar-h);
}
.home-section h2 {
  font-size: clamp(2rem, 3.5vw, 3rem);
  margin-top: 0;
}
.cols-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}
.uni-card {
  padding: 1.6rem 1.4rem;
  position: relative;
}
.uni-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5.5rem;
}
.uni-logo img { max-width: 100%; max-height: 6.4rem; object-fit: contain; }
.uni-card.dual-logo .uni-logo { gap: .9rem; flex-wrap: nowrap; }
.uni-card.dual-logo .uni-logo img:first-child { max-width: 5.8rem; max-height: 5.8rem; flex: 0 0 auto; }
.uni-card.dual-logo .uni-logo img:last-child { max-height: 2rem; max-width: 100%; flex: 1 1 auto; min-width: 0; filter: brightness(0); }

.sponsor-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
.sponsor-track {
  display: flex;
  width: max-content;
  animation: sponsor-scroll 32s linear infinite;
}
.sponsor-marquee:hover .sponsor-track {
  animation-play-state: paused;
}
@keyframes sponsor-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.sponsor-card {
  flex: 0 0 auto;
  width: 200px;
  min-width: 0;
  margin-right: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.4rem;
}
.sponsor-card img { width: 100%; height: 2.4rem; min-width: 0; object-fit: contain; }
.sponsor-lockup { display: flex; align-items: center; gap: .75rem; min-width: 0; max-width: 100%; }
.sponsor-lockup .sponsor-mark { max-height: 2.2rem; max-width: 2.2rem; }
.sponsor-lockup .sponsor-wordmark { max-height: 1.36rem; max-width: 4.16rem; }
.sponsor-card-wide { width: 280px; }
.sponsor-card-wide .sponsor-wordmark { max-height: 1.76rem; max-width: 7.2rem; }
.sponsor-card-wide .sponsor-mark { max-height: 2.72rem; max-width: 2.72rem; }

.sponsor-featured {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}
.sponsor-featured-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.4rem;
}
.sponsor-featured-card img { max-width: 100%; max-height: 4.4rem; width: auto; height: auto; object-fit: contain; }
.sponsor-featured-card .sponsor-mark { max-height: 4rem; max-width: 4rem; }
.sponsor-featured-card .sponsor-wordmark { max-height: 2.3rem; max-width: 10rem; }
@media (prefers-reduced-motion: reduce) {
  .sponsor-track { animation: none; }
  .sponsor-track .sponsor-card[aria-hidden="true"] { display: none; }
}

.credits-marks {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 1rem;
  margin: 2.5rem 0 -3rem;
}
.credits-marks img {
  height: 64px;
  width: auto;
  image-rendering: pixelated;
}
.mark-lapu {
  transform-origin: bottom center;
  animation: mark-breathe 2.8s ease-in-out infinite;
}
.mark-cross {
  transform-origin: bottom center;
  animation: mark-sway 4s ease-in-out infinite;
}
.mark-whale {
  transform-origin: 15% 75%;
  animation: mark-swim 1.6s ease-in-out infinite;
}
@keyframes mark-breathe {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.035); }
}
@keyframes mark-sway {
  0%, 100% { transform: rotate(-1.5deg); }
  50% { transform: rotate(1.5deg); }
}
@keyframes mark-swim {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .mark-lapu, .mark-cross, .mark-whale { animation: none; }
}

.scope-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
  margin-top: 2rem;
}
.scope-intro {
  position: sticky;
  top: 90px;
}
.scope-intro h2 { margin-top: 0; }
.scope-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.scope-grid > div {
  padding: 1.6rem 1.6rem 1.8rem;
  background: var(--paper);
  border: 1px solid var(--rule);
}
.scope-grid h3 {
  margin: 0 0 .8rem;
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--font-sans);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.scope-grid .included h3 { color: var(--green-700); }
.scope-grid .excluded h3 { color: var(--gold-700); }
.scope-grid ul { margin: 0; padding-left: 1.2rem; }
.scope-grid li { font-size: .95rem; line-height: 1.6; margin-bottom: .75rem; }
.scope-grid li:last-child { margin-bottom: 0; }

/* ---------- Programme layout (index.html only) ---------- */
.programme-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
  margin-top: 2rem;
}
.programme-intro {
  position: sticky;
  top: 90px;
}
.programme-intro h2 { margin-top: 0; }
.programme-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.programme-card {
  padding: 1.6rem 1.6rem 1.8rem;
  background: var(--paper);
  border: 1px solid var(--rule);
}
.programme-card h3 {
  margin: 0 0 1.1rem;
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--font-sans);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.programme-card:first-child h3 { color: var(--green-700); }
.programme-card:last-child h3 { color: var(--gold-700); }
.programme-card p { margin: 0; font-size: .95rem; line-height: 1.65; color: var(--ink-soft); }
.programme-card .spec-list { margin: 0; }

/* CTA */
.cta-band {
  background: var(--green-800);
  color: var(--paper);
  padding: 3.5rem var(--gutter);
  margin-top: 4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band h2 {
  color: var(--paper);
  margin: 0 0 1rem;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
}
.cta-band p {
  max-width: 640px;
  margin: 0 auto 2rem;
  color: var(--paper);
  font-size: 1.05rem;
}
.btn {
  display: inline-block;
  padding: .9rem 1.6rem;
  background: var(--gold-500);
  color: var(--green-900);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  border: 2px solid var(--gold-500);
  transition: background .15s ease, color .15s ease;
}
.btn:hover { background: transparent; color: var(--gold-500); }
.btn.btn-sm { padding: .55rem 1.1rem; font-size: .74rem; }

/* Shared content helpers (replace one-off inline styles) */
.section-intro { max-width: 62ch; color: var(--ink-soft); font-size: 1.05rem; }
.em-accent { font-style: italic; color: var(--gold-700); }
.aside-note { font-size: .85rem; margin-top: .8rem; color: var(--ink-mute); font-style: italic; }
.fine-note { color: var(--ink-mute); font-size: .9rem; font-style: italic; }
.signoff { font-style: italic; color: var(--ink-soft); text-align: center; font-size: 1.1rem; }
.stack-top { margin-top: 1.5rem; }
.stack-bottom { margin-bottom: 1.5rem; }
.stack-top-sm { margin-top: .75rem; }
.dl-tag { color: var(--gold-700); margin-left: .35rem; }
.not-provided { color: var(--orange-700); font-weight: 600; }
.name-accent { color: var(--gold-700); }

/* ---------- Venue Map (index.html only) ---------- */
/* Breaks out of .home-section's centred max-width to run the full width of
   the viewport rather than sitting inset in a bordered figure frame; the
   figcaption below stays put in the normal reading column. Isolates
   Leaflet's internal z-indexes (900-1000 range) inside their own stacking
   context so its controls/tooltips can never rise above the sticky topbar
   as the map scrolls underneath it. */
.venue-map-frame {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  isolation: isolate;
  z-index: 0;
}
.venue-map {
  display: block;
  width: 100%;
  height: 480px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
}
/* The sitewide img reset above (max-width: 100%) shrinks Leaflet's 256px
   tile <img>s just enough to open hairline seams between them. */
.venue-map.leaflet-container img { max-width: none; }
/* Leaflet positions tiles with sub-pixel translate3d offsets; browsers
   round each tile independently, opening 1px seams that expose the map
   background as a grid. Oversizing tiles a hair covers most of the
   rounding gap (overrides Leaflet's own inline width/height, hence
   !important); a light blur on the tile pane itself (not the individual
   tiles, which would double up at their overlaps) hides what's left
   without softening the pins/labels/controls, which live in their own
   separate panes untouched by this filter. */
.venue-map .leaflet-tile { width: 256.5px !important; height: 256.5px !important; }
.venue-map .leaflet-tile-pane { filter: blur(1px); }

.map-pin-icon { display: block; filter: drop-shadow(0 2px 3px rgba(6, 32, 15, .35)); }
.map-pin-icon--primary { color: var(--orange-700); }
.map-pin-icon--secondary { color: var(--green-700); }

.venue-map .leaflet-tooltip { border-radius: 0; opacity: 1; }
.venue-map .leaflet-tooltip::before { display: none; }

.map-tooltip {
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  padding: .35rem .6rem;
  font-family: var(--font-sans);
  line-height: 1.3;
}
.map-tooltip-name { display: block; font-weight: 600; font-size: .82rem; color: var(--ink); }
.map-tooltip-role { display: block; font-size: .72rem; color: var(--ink-mute); }

.map-label-tooltip {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  font-family: var(--font-sans);
  text-shadow: 0 0 3px var(--paper), 0 0 3px var(--paper), 0 0 6px var(--paper);
}
.map-label-tooltip--street { font-size: .74rem; font-weight: 400; color: var(--ink-mute); }
.map-label-tooltip--district {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.venue-map .leaflet-control-zoom {
  border: 1px solid var(--rule);
  border-radius: 0;
  box-shadow: none;
}
.venue-map .leaflet-control-zoom a {
  background: var(--paper);
  color: var(--ink);
  border-radius: 0;
  font-family: var(--font-sans);
}
.venue-map .leaflet-control-zoom a:first-child { border-bottom: 1px solid var(--rule); }
.venue-map .leaflet-control-zoom a:hover { background: var(--green-800); color: var(--paper); }

/* Collapsed to a small "i" circle, inset from the bottom-right corner by
   default (Leaflet gives the attribution control no margin of its own, so
   without this it sits flush against the map's true edge, which reads as
   jammed into the corner now that the map itself runs to the edge of the
   viewport). row-reverse keeps the icon pinned at that corner while the
   credit text rolls out from behind it on hover/focus, growing toward
   the left where the map has room; a fixed pixel width would either
   clip the credit or leave slack, so max-width is animated to a value
   generous enough to always fit it. JS toggles .isOpen for touch taps. */
.venue-map .leaflet-control-attribution.venue-map-attr {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  height: 26px;
  max-width: 26px;
  margin: 0 .75rem .75rem 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: .68rem;
  color: var(--ink-mute);
  white-space: nowrap;
  overflow: hidden;
  transition: max-width .25s ease, padding-left .25s ease;
  cursor: pointer;
}
/* Left padding for the credit text is added only once expanded — kept off
   the collapsed pill because the icon's box is sized to exactly fill the
   26px circle's inner content area (26px minus the 1px border on each
   side); any padding-left there would starve the icon of room and get it
   clipped off-centre by overflow: hidden. */
.venue-map .leaflet-control-attribution.venue-map-attr:hover,
.venue-map .leaflet-control-attribution.venue-map-attr:focus-within,
.venue-map .leaflet-control-attribution.venue-map-attr.isOpen {
  max-width: 320px;
  padding-left: .6rem;
}
.venue-map-attr-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.venue-map-attr-icon svg { width: 14px; height: 14px; display: block; }
.venue-map-attr-text a { color: var(--ink-mute); }

/* ---------- Page header (interior pages) ---------- */
.page-head {
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--rule);
}
.page-head .crumb {
  font-family: var(--font-sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: .8rem;
}
.page-head h1 {
  margin: 0 0 .8rem;
  font-style: italic;
  font-weight: 400;
}
.page-head .subtitle {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  color: var(--ink-soft);
  margin: 0;
  max-width: 60ch;
}

/* ---------- Spec list ---------- */
.spec-list {
  display: grid;
  gap: .9rem;
  list-style: none;
  padding: 0;
  margin: 2em 0;
}
.spec-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--rule);
}
.spec-list li:last-child { padding-bottom: 0; border-bottom: 0; }
.spec-list .spec-label {
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.spec-list .spec-value {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--green-800);
  font-weight: 500;
  text-align: right;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .layout { grid-template-columns: 1fr; gap: 0; }
  aside.sidebar {
    /* fixed dropdown under the sticky topbar, so "Contents" is reachable
       at any scroll position instead of pushing the page down in-flow */
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    right: 0;
    z-index: 40;
    max-height: calc(100vh - var(--topbar-h));
    overflow-y: auto;
    background: var(--paper);
    border-right: 0;
    border-top: 0;
    border-bottom: 1px solid var(--rule);
    box-shadow: var(--shadow-md);
    padding: 1rem var(--gutter) 1.5rem;
    margin-bottom: 0;
    display: none;
  }
  aside.sidebar.open { display: block; }
  .nav-toggle { display: inline-block; }
  .hero { grid-template-columns: 1fr; gap: 1.5rem; padding: clamp(1.5rem, 8vh, 3rem) var(--gutter) 2rem; overflow: hidden; }
  /* Below the two-column breakpoint the model no longer fits beside the
     copy at a legible size, so it drops behind the text as a faint,
     full-bleed backdrop instead of shrinking into a small inset box. */
  .hero-mark {
    position: absolute;
    inset: 0;
    z-index: 0;
    max-width: none;
    aspect-ratio: auto;
    opacity: .80;
    filter: grayscale(35%);
    pointer-events: none;
  }
  .hero-mark model-viewer {
    top: 50%;
    left: 50%;
    width: min(150vw, 130vh);
    height: min(150vw, 130vh);
    aspect-ratio: 1 / 1;
  }
  footer.site-footer .foot-inner { grid-template-columns: 1fr; gap: 2rem; }
  footer.site-footer .foot-links { flex-direction: column; gap: 2rem; }
  .scope-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .scope-intro { position: static; }
  .scope-grid { gap: 1.5rem; }
  .programme-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .programme-intro { position: static; }
  body { font-size: 17px; }
}
@media (max-width: 560px) {
  .pagination { grid-template-columns: 1fr; }
  .pagination .next { text-align: left; }
  body { font-size: 16px; }
  .topbar-inner { gap: .5rem; }
  .brand-mark { width: 32px; height: 32px; }
  .brand-title { font-size: .95rem; }
  .brand-sub { font-size: .65rem; }
  .topbar-link { display: none; }
  .hero-mark model-viewer { width: min(190vw, 120vh); height: min(190vw, 120vh); }
  figure .frame iframe { height: 300px; }
  .venue-map { height: 300px; }
}

/* ---------- Print ----------
   Each section should print as a clean, self-contained handout. */
@media print {
  .topbar, aside.sidebar, .nav-toggle, .pagination,
  footer.site-footer, .cta-band, .event-hero { display: none; }
  .layout { display: block; padding: 0; }
  main.content { max-width: 100%; }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
    line-height: 1.5;
  }
  h1, h2, h3, h4 { color: #000; }
  .page-head h1 { font-size: 22pt; }

  /* New subsystem = new sheet. */
  main.content h2 { break-before: page; border-top: 0; padding-top: 0; margin-top: 0; }
  h2, h3, h4 { break-after: avoid; }
  figure, .callout, .table-wrap, pre, .steps > li, .spec-list li { break-inside: avoid; }

  /* Ink-friendly surfaces. */
  figure .frame, figure .placeholder, .callout, .spec-list li,
  .table-wrap, table tbody tr:nth-child(even) { background: #fff; }
  figure .frame::before, figure .frame::after { display: none; }
  table thead th { background: #fff; color: #000; border-bottom: 2px solid #000; }
  pre { background: #fff; color: #000; border: 1px solid #888; white-space: pre-wrap; word-break: break-word; }
  .code-comment { color: #555; }
  .code-key, .code-str { color: #000; }

  /* Links: flatten, but show external destinations. */
  a { color: #000; text-decoration: none; }
  main.content a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: .78em;
    color: #444;
    word-break: break-all;
  }
}