body {
  font-family: 'Noto Sans', sans-serif;
}


.footer .icon-link {
    font-size: 25px;
    color: #000;
}

.link-block a {
    margin-top: 5px;
    margin-bottom: 5px;
}

.dnerf {
  font-variant: small-caps;
}


.teaser .hero-body {
  padding-top: 0;
  padding-bottom: 3rem;
}

.teaser {
  font-family: 'Google Sans', sans-serif;
}


.publication-title {
}

.publication-banner {
  max-height: parent;

}

.publication-banner video {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  object-fit: fit;
}

.publication-header .hero-body {
}

.publication-title {
    font-family: 'Google Sans', sans-serif;
}

.publication-authors {
    font-family: 'Google Sans', sans-serif;
}

.publication-venue {
    color: #555;
    width: fit-content;
    font-weight: bold;
}

.publication-awards {
    color: #ff3860;
    width: fit-content;
    font-weight: bolder;
}

.publication-authors {
}

.publication-authors a {
   color: hsl(204, 86%, 53%) !important;
}

.publication-authors a:hover {
    text-decoration: underline;
}

.author-block {
  display: inline-block;
}

.publication-banner img {
}

.publication-authors {
  /*color: #4286f4;*/
}

.publication-video {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;

    overflow: hidden;
    border-radius: 10px !important;
}

.publication-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.publication-body img {
}

.results-carousel {
  overflow: hidden;
}

.results-carousel .item {
  margin: 5px;
  overflow: hidden;
  border: 1px solid #bbb;
  border-radius: 10px;
  padding: 0;
  font-size: 0;
}

.results-carousel video {
  margin: 0;
}


.interpolation-panel {
  background: #f5f5f5;
  border-radius: 10px;
}

.interpolation-panel .interpolation-image {
  width: 100%;
  border-radius: 5px;
}

.interpolation-video-column {
}

.interpolation-panel .slider {
  margin: 0 !important;
}

.interpolation-panel .slider {
  margin: 0 !important;
}

#interpolation-image-wrapper {
  width: 100%;
}
#interpolation-image-wrapper img {
  border-radius: 5px;
}


/* =====================================================================
   MessyMem project-page overrides.
   Everything above this line is the stock Nerfies stylesheet.
   ===================================================================== */

/* ---------------------------------------------------------------------
   PAPER PALETTE
   Sampled directly from the CoRL submission PDF (text spans + figure
   box strokes). Each of the three memory properties has its own color
   and is used consistently everywhere the property is named.
   --------------------------------------------------------------------- */
:root {
  /* Property 1 — Globally queryable & spatially grounded */
  --c-global: #a571c8;
  /* Property 2 — Updatable from interactions */
  --c-interaction: #45b5a5;
  /* Property 3 — Fine-grained */
  --c-fine: #f08a6e;

  /* Darker variants. The paper colors are tuned for bold display text;
     these have stronger contrast on white if you ever need a property
     color on small or non-bold text. Swap in as needed. */
  --c-global-dark: #8850ad;
  --c-interaction-dark: #2f8d7f;
  --c-fine-dark: #d4633f;

  /* Neutral panel fill used in the paper figures */
  --c-panel: #f5f5f5;
  --c-rule: #e4e7ec;
}

/* Inline property mentions: bold + colored, matching the paper.
   Usage:  <span class="p-global">globally queryable &amp; spatially grounded</span> */
.p-global,
.p-interaction,
.p-fine {
  font-weight: 700;
}

.p-global { color: var(--c-global); }
.p-interaction { color: var(--c-interaction); }
.p-fine { color: var(--c-fine); }

/* Tinted background variant, for when a mention needs to sit inside a
   figure caption or a busy block. */
.p-global-bg,
.p-interaction-bg,
.p-fine-bg {
  font-weight: 700;
  padding: 0.05em 0.3em;
  border-radius: 4px;
}

.p-global-bg { color: var(--c-global-dark); background: rgba(165, 113, 200, 0.14); }
.p-interaction-bg { color: var(--c-interaction-dark); background: rgba(69, 181, 165, 0.16); }
.p-fine-bg { color: var(--c-fine-dark); background: rgba(240, 138, 110, 0.18); }

.messymem {
  font-variant: small-caps;
  font-weight: 600;
}

.publication-title {
  line-height: 1.25;
}

.publication-venue {
  color: #555;
  font-weight: bold;
  margin-top: 0.75rem;
}

.publication-links {
  margin-top: 1.25rem;
}

.publication-links .link-block {
  display: inline-block;
  margin: 0.25rem;
}

/* Section anchors clear the sticky-ish navbar when jumping via #id. */
section[id] {
  scroll-margin-top: 4rem;
}

/* Media that has no file yet still shows the dashed poster instead of a
   collapsed 0-height box. Delete .placeholder-media once assets are in. */
.placeholder-media {
  width: 100%;
  display: block;
  border-radius: 10px;
  background: #f5f5f5;
}

/* --- Three-properties row ------------------------------------------- */
.property-card {
  height: 100%;
  background: #fff;
  border: 1px solid var(--c-rule);
  border-top: 5px solid var(--c-accent, var(--c-rule));
  border-radius: 10px;
  padding: 1.5rem 1.25rem;
}

.property-card.is-global { --c-accent: var(--c-global); }
.property-card.is-interaction { --c-accent: var(--c-interaction); }
.property-card.is-fine { --c-accent: var(--c-fine); }

.property-card .property-title {
  color: var(--c-accent);
  font-weight: 700;
}

.property-card .property-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--c-accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
}

/* Icons are transparent PNGs cropped from the overview video and upscaled 3x,
   so no background or radius -- they sit directly on the card. Displayed well
   under their native width so they stay crisp on retina. */
.property-icon {
  width: 100%;
  max-width: 230px;
  margin-bottom: 0.75rem;
}

/* --- Video elements -------------------------------------------------- */
/* NOTE: do not name this `.hero-video` -- Bulma already defines that class as
   an absolutely-positioned fullscreen hero background, which drops the element
   out of normal flow and lets the next section render on top of it. */
.teaser-video,
.content-video {
  width: 100%;
  display: block;
  border-radius: 10px;
  background: #000;
}

.content-video {
  max-width: 900px;
  margin: 0 auto;
}

.caption {
  font-size: 0.9rem;
  color: #555;
  margin-top: 0.5rem;
}

.results-carousel .item .caption {
  padding: 0.5rem;
}

/* Carousel clips fill their card. Needed because the stock Nerfies rule only
   zeroes the margin, and `.item` sets font-size:0 to kill inline-block gaps --
   `.caption` re-declares its own font-size so it isn't swallowed by that. */
.results-carousel video {
  width: 100%;
  display: block;
  margin: 0;
}

.results-table td,
.results-table th {
  vertical-align: middle;
}

.footer {
  padding: 3rem 1.5rem;
}


/* =====================================================================
   PAGE COMPONENTS  (added when the paper content was filled in)
   ===================================================================== */

/* --- Chart ramp -------------------------------------------------------
   An ORDINAL blue ramp keyed to how many of MessyMem's three memory
   components a method has (3 -> 2 -> 1), plus a recessive neutral for
   external baselines. Deliberately not a 7-hue categorical palette:
   seven hues cannot clear the all-pairs colour-blindness gate, whereas a
   single-hue lightness ramp is legible under every CVD type. Validated
   with the dataviz validator - all checks pass in both light and dark.
   Dark-surface steps, if dark mode is ever added:
     lvl-1 #184f95   lvl-2 #2a78d6   lvl-3 #6da7ec
   -------------------------------------------------------------------- */
:root {
  --lvl-1: #86b6ef;
  --lvl-2: #2a78d6;
  --lvl-3: #1c5cab;
  --lvl-ext: #8f8f86;

  --ink-1: #14161a;
  --ink-2: #4a5059;
  --ink-3: #6b727c;
  --surface: #ffffff;
  --surface-tint: #f7f8fa;
}

/* --- Utilities -------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.section-tint { background: var(--surface-tint); }

.section-lead {
  color: var(--ink-2);
  max-width: 46rem;
  margin: 0.75rem auto 0;
  line-height: 1.65;
}

.note-box {
  border-left: 3px solid var(--c-rule);
  background: var(--surface);
  padding: 1rem 1.25rem;
  border-radius: 0 8px 8px 0;
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.65;
  margin-top: 1.5rem;
}

/* --- Navbar ----------------------------------------------------------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--c-rule);
  min-height: 3.1rem;
}

.site-nav .navbar-item { font-size: 0.95rem; color: var(--ink-2); }
.site-nav .navbar-item:hover { color: var(--ink-1); background: transparent; }
.nav-brand-text { font-weight: 700; font-size: 1.05rem; }

.site-nav .navbar-item.is-nav-current {
  color: var(--c-global-dark);
  box-shadow: inset 0 -2px 0 var(--c-global);
  background: transparent;
}

/* --- Scroll reveal ----------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* --- Figures ----------------------------------------------------------- */
.figure-block { margin: 0; }

.figure-block img {
  width: 100%;
  display: block;
  border: 1px solid var(--c-rule);
  border-radius: 10px;
  background: var(--surface);
}

.figure-block.is-inset img { border-radius: 8px; }

.figure-caption {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-2);
  margin-top: 0.75rem;
  text-align: left;
}

/* --- Execution loop ---------------------------------------------------- */
.loop-heading { margin-bottom: 1rem !important; }

.loop-diagram {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  align-items: stretch;
}

.loop-step {
  position: relative;
  flex: 1 1 9.5rem;
  min-width: 9rem;
  background: var(--surface);
  border: 1px solid var(--c-rule);
  border-top: 3px solid var(--ink-3);
  border-radius: 10px;
  padding: 0.85rem 0.9rem;
  font-weight: 600;
  color: var(--ink-1);
  font-size: 0.95rem;
  animation: loop-pulse 7.5s ease-in-out infinite;
}

.loop-step.is-global { border-top-color: var(--c-global); }
.loop-step.is-interaction { border-top-color: var(--c-interaction); }
.loop-step.is-fine { border-top-color: var(--c-fine); }

.loop-step em {
  display: block;
  font-style: normal;
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--ink-3);
  margin-top: 0.15rem;
}

.loop-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem; height: 1.35rem;
  border-radius: 50%;
  background: var(--c-panel);
  color: var(--ink-2);
  font-size: 0.75rem;
  margin-right: 0.4rem;
}

.loop-step:nth-child(1) { animation-delay: 0s; }
.loop-step:nth-child(2) { animation-delay: .5s; }
.loop-step:nth-child(3) { animation-delay: 1s; }
.loop-step:nth-child(4) { animation-delay: 1.5s; }
.loop-step:nth-child(5) { animation-delay: 2s; }

@keyframes loop-pulse {
  0%, 22%, 100% { transform: none; box-shadow: none; }
  8% { transform: translateY(-4px); box-shadow: 0 6px 18px rgba(20, 22, 26, 0.10); }
}

.loop-return {
  text-align: center;
  font-size: 0.88rem;
  color: var(--ink-3);
  margin-top: 0.75rem;
}
.loop-return span { font-size: 1.1rem; margin-right: 0.3rem; }

/* --- Method / setup / finding cards ------------------------------------ */
.method-grid,
.setup-grid,
.findings-grid {
  display: grid;
  gap: 1.25rem;
}

.method-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.setup-grid { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin-top: 2rem; }
.findings-grid { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }

.method-card,
.setup-card,
.finding-card {
  background: var(--surface);
  border: 1px solid var(--c-rule);
  border-radius: 12px;
  padding: 1.4rem 1.5rem;
  transition: box-shadow .25s ease, transform .25s ease;
}

.method-card:hover,
.finding-card:hover {
  box-shadow: 0 10px 30px rgba(20, 22, 26, 0.07);
  transform: translateY(-2px);
}

.method-card { border-top: 4px solid var(--c-rule); position: relative; }
.method-card.is-global { border-top-color: var(--c-global); }
.method-card.is-interaction { border-top-color: var(--c-interaction); }
.method-card.is-fine { border-top-color: var(--c-fine); }

/* The retriever/planner consumes all three components rather than being one of
   them, so it sits as a full-width base under the other three and takes a top
   bar blending the three property colours. Its two paragraphs run side by side
   so the wide card doesn't become one very long measure. */
.method-card.is-wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.75rem;
  align-content: start;
  border-top-color: transparent;
}

.method-card.is-wide > .title { grid-column: 1 / -1; }
.method-card.is-wide p + p { margin-top: 0; }

.method-card.is-wide::after {
  content: "";
  position: absolute;
  top: -4px;
  left: -1px;
  right: -1px;
  height: 4px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(90deg,
    var(--c-global) 0%, var(--c-global) 28%,
    var(--c-interaction) 45%, var(--c-interaction) 58%,
    var(--c-fine) 76%, var(--c-fine) 100%);
}

.method-card p,
.finding-card p,
.setup-card p {
  font-size: 0.94rem;
  line-height: 1.68;
  color: var(--ink-2);
}
.method-card p + p { margin-top: 0.75rem; }

.method-card code,
.scenario-card code {
  background: var(--c-panel);
  color: var(--c-global-dark);
  padding: 0.1em 0.35em;
  border-radius: 4px;
  font-size: 0.86em;
}

.setup-title {
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.5rem;
}

.finding-card { border-left: 4px solid var(--c-rule); }
.finding-card.is-interaction { border-left-color: var(--c-interaction); }
.finding-card.is-fine { border-left-color: var(--c-fine); }
.finding-card .title { margin-bottom: 0.6rem !important; font-size: 1.02rem !important; }

/* --- Compared-methods legend ------------------------------------------- */
.method-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.legend-group {
  background: var(--surface);
  border: 1px solid var(--c-rule);
  border-radius: 12px;
  padding: 1.25rem 1.4rem;
}

.legend-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.75rem;
}

.legend-group ul { list-style: none; margin: 0; padding: 0; }
.legend-group li {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-2);
  padding-left: 1.4rem;
  position: relative;
}
.legend-group li + li { margin-top: 0.7rem; }

.swatch {
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.85rem; height: 0.85rem;
  border-radius: 3px;
  display: inline-block;
}
.swatch.lvl-1 { background: var(--lvl-1); }
.swatch.lvl-2 { background: var(--lvl-2); }
.swatch.lvl-3 { background: var(--lvl-3); }
.swatch.lvl-ext { background: var(--lvl-ext); }

/* --- Scenario cards ----------------------------------------------------- */
.scenario-card {
  background: var(--surface);
  border: 1px solid var(--c-rule);
  border-radius: 14px;
  padding: 1.75rem;
  margin-top: 2rem;
}

.scenario-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.scenario-head .title { margin-bottom: 0 !important; }

.scenario-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.28em 0.7em;
  border-radius: 999px;
  white-space: nowrap;
}
.badge.is-global { color: var(--c-global-dark); background: rgba(165, 113, 200, 0.14); }
.badge.is-interaction { color: var(--c-interaction-dark); background: rgba(69, 181, 165, 0.16); }
.badge.is-fine { color: var(--c-fine-dark); background: rgba(240, 138, 110, 0.18); }

.scenario-card > p {
  color: var(--ink-2);
  line-height: 1.7;
  font-size: 0.96rem;
}
.scenario-card > p + p { margin-top: 0.85rem; }
.scenario-card .figure-block { margin-top: 1.5rem; }

/* Focused experiments: compact decision diagrams with the paper one click away. */
.scenario-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
  scroll-margin-top: 7rem;
}
.scenario-compact {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 1.4rem;
}
.scenario-compact .title.is-4 {
  font-size: 1.3rem;
  line-height: 1.3;
  margin-bottom: 0.7rem;
}
.scenario-compact .scenario-badges { min-height: 2.8rem; align-content: flex-start; }
.scenario-compact .badge { font-size: 0.63rem; letter-spacing: 0; }
.scenario-compact > .experiment-sequence {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.55rem;
  margin: 0 0 1rem;
  font-size: 0.76rem;
  line-height: 1.6;
}
.experiment-sequence b { color: var(--ink-3); font-weight: 500; margin-right: 0.25rem; }
.sequence-arrow { color: var(--c-global-dark); }
.experiment-diagram {
  margin: 0;
  padding: 0.9rem 0.65rem 0.8rem;
  border: 1px solid var(--c-rule);
  border-radius: 9px;
  background: #fafbfc;
}
.cabinet-options, .clutter-options { display: grid; gap: 0.5rem; }
.cabinet-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.clutter-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cabinet-option { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
.cabinet-name { color: var(--ink-3); font-size: 0.7rem; margin-bottom: 0.45rem; }
.cabinet-door {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90%;
  max-width: 104px;
  height: 68px;
  margin-bottom: 0.6rem;
  border: 2px solid #c7c1b6;
  border-radius: 4px;
  background: #f3f0e9;
  box-shadow: inset 0 0 0 5px #faf8f3;
  color: #777368;
  font-size: 1.15rem;
}
.cabinet-door::after { content: ""; position: absolute; right: 9px; top: 27px; width: 3px; height: 13px; background: currentColor; border-radius: 2px; }
.cabinet-door.is-locked { color: #a45647; border-color: #d6ada4; background: #f7eae6; box-shadow: inset 0 0 0 5px #fcf4f0; }
.cabinet-door.is-unseen { color: #23796c; border-color: #72b1a6; background: #e4f2ee; box-shadow: inset 0 0 0 5px #f3faf7; font-weight: 700; }
.cabinet-option strong { color: var(--ink-1); font-size: 0.78rem; line-height: 1.5; }
.cabinet-note { color: var(--ink-2); font-size: 0.66rem; line-height: 1.6; }
.choice-label { margin-top: 0.5rem; padding: 0.16rem 0.7rem; border-radius: 5px; background: #eceef1; color: var(--ink-2); font-size: 0.67rem; font-weight: 700; }
.choice-label.is-success { color: #216e61; background: #dcefe9; }
.clutter-scene { display: block; width: 100%; height: 68px; margin-bottom: 0.6rem; }
.clutter-scene .shelf-back { fill: #f3f0e9; stroke: #c7c1b6; stroke-width: 2; }
.clutter-scene .shelf-line { fill: none; stroke: #c7c1b6; stroke-width: 2; }
.clutter-scene .stored-item { fill: #c8c1b0; stroke: #918978; stroke-width: 1.3; }
.clutter-scene .access-space { fill: #e0f0e8; stroke: #72b1a6; stroke-dasharray: 3 3; }
.clutter-scene .blocked-space { fill: #f2ded5; stroke: #c68e7c; stroke-dasharray: 3 3; }
.clutter-scene .ketchup-bottle { fill: #c85b48; stroke: #a94335; stroke-width: 1.2; }
.clutter-scene .bottle-cap { fill: #984135; }
.clutter-scene .bottle-label { fill: #fff3df; }
.clutter-scene .access-arrow { fill: none; stroke: #2f8d7f; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.experiment-diagram figcaption { margin-top: 0.9rem; padding-top: 0.7rem; border-top: 1px solid var(--c-rule); color: var(--ink-2); font-size: 0.76rem; line-height: 1.55; }
.experiment-diagram figcaption b { display: block; color: var(--ink-1); }
.experiment-outcomes { display: grid; gap: 0.5rem; padding: 1rem 0; margin-bottom: auto; }
.experiment-outcomes p { display: flex; align-items: baseline; gap: 0.45rem; font-size: 0.74rem; line-height: 1.5; color: var(--ink-2); }
.experiment-outcomes b { color: var(--ink-1); }
.outcome-mark { flex-shrink: 0; width: 0.8rem; font-weight: 700; }
.outcome-mark.is-success { color: #267d6c; }
.outcome-mark.is-failure { color: #b45340; }
.experiment-expand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--c-rule);
  border-radius: 7px;
  background: #fff;
  color: var(--c-global-dark);
  font-size: 0.78rem;
  font-weight: 700;
}
.experiment-expand:hover { color: #70408f; background: #f8f3fb; border-color: #cdb4de; }
.experiment-expand:focus-visible { outline: 3px solid var(--c-global-dark); outline-offset: 3px; }
@media screen and (max-width: 1023px) {
  .scenario-pair { grid-template-columns: 1fr; }
  .scenario-compact .scenario-badges { min-height: 0; margin-bottom: 0.85rem; }
}
@media screen and (max-width: 480px) {
  .scenario-compact { padding: 1rem; }
  .scenario-compact .title.is-4 { font-size: 1.18rem; }
  .scenario-compact > .experiment-sequence { gap: 0.25rem 0.4rem; font-size: 0.71rem; }
  .cabinet-option strong { font-size: 0.71rem; }
  .cabinet-note { font-size: 0.62rem; }
  .clutter-options .cabinet-note { max-width: 15ch; }
}

/* --- Stat tiles --------------------------------------------------------- */
.stat-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 1rem;
  margin-top: 2rem;
}
.stat-grid.is-triple { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

.stat-tile {
  background: var(--surface);
  border: 1px solid var(--c-rule);
  border-radius: 12px;
  padding: 1.5rem 1.4rem;
  text-align: center;
}

.stat-tile.is-hero {
  background: linear-gradient(180deg, rgba(42, 120, 214, 0.06), rgba(42, 120, 214, 0));
  border-color: rgba(42, 120, 214, 0.28);
}

.stat-value {
  font-family: 'Google Sans', sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--lvl-3);
  font-variant-numeric: tabular-nums;
}
.stat-tile.is-hero .stat-value { font-size: 3.4rem; }
.stat-sign { font-size: 0.7em; vertical-align: 0.12em; }

.stat-unit {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink-3);
  margin-left: 0.15rem;
}

.stat-label {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.87rem;
  line-height: 1.5;
  color: var(--ink-2);
}

/* --- Charts -------------------------------------------------------------
   Horizontal bars on a shared 0-100 scale, so values are comparable both
   down a column (methods) and across a row (scenarios). Every bar carries a
   direct value label and a text method label, so identity is never conveyed
   by colour alone.
   ---------------------------------------------------------------------- */
.chart-block {
  background: var(--surface);
  border: 1px solid var(--c-rule);
  border-radius: 14px;
  padding: 1.75rem;
  margin-top: 2rem;
}
.chart-block.is-compact { padding: 1.25rem; margin-top: 1.5rem; }

.chart-title { margin-bottom: 0.35rem !important; }

.chart-sub {
  font-size: 0.87rem;
  line-height: 1.6;
  color: var(--ink-3);
  margin-bottom: 1rem;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  margin-bottom: 1.25rem;
  font-size: 0.82rem;
  color: var(--ink-2);
}
.legend-item { position: relative; padding-left: 1.25rem; }
.legend-item .swatch { top: 0.28em; }

.chart { display: grid; grid-template-columns: 10.5rem repeat(3, 1fr); gap: 0.35rem 1rem; }
.chart.is-single { grid-template-columns: 10.5rem 1fr; }

.chart-headrow { display: contents; }

.chart-colhead {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--c-rule);
}

.chart-corner { border-bottom: 1px solid var(--c-rule); }

.chart-row { display: contents; }

.chart-label {
  font-size: 0.88rem;
  color: var(--ink-2);
  align-self: center;
  padding: 0.3rem 0;
  text-align: right;
}
.chart-row.is-ours .chart-label { color: var(--ink-1); }
.chart-label em { font-style: normal; color: var(--ink-3); font-size: 0.85em; }

.chart-cell {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0;
}

.chart-track {
  position: relative;
  flex: 1 1 auto;
  height: 1.05rem;
  background: var(--c-panel);
  border-radius: 4px;
  overflow: visible;
}

.chart-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 4px;
  background: var(--lvl-2);
  transition: width 1s cubic-bezier(.22, 1, .36, 1);
}
.chart-bar.lvl-1 { background: var(--lvl-1); }
.chart-bar.lvl-2 { background: var(--lvl-2); }
.chart-bar.lvl-3 { background: var(--lvl-3); }
.chart-bar.lvl-ext { background: var(--lvl-ext); }

.is-visible .chart-bar { width: calc(var(--v) * 1%); }

/* Stagger the bars so the chart reads as it draws. */
.chart-row:nth-child(2) .chart-bar { transition-delay: .05s; }
.chart-row:nth-child(3) .chart-bar { transition-delay: .11s; }
.chart-row:nth-child(4) .chart-bar { transition-delay: .17s; }
.chart-row:nth-child(5) .chart-bar { transition-delay: .23s; }
.chart-row:nth-child(6) .chart-bar { transition-delay: .29s; }
.chart-row:nth-child(7) .chart-bar { transition-delay: .35s; }
.chart-row:nth-child(8) .chart-bar { transition-delay: .41s; }

/* 95% confidence interval whisker, drawn over the bar end. */
.chart-ci {
  position: absolute;
  top: 50%;
  left: calc(var(--lo) * 1%);
  width: calc((var(--hi) - var(--lo)) * 1%);
  height: 1px;
  background: rgba(20, 22, 26, 0.55);
  opacity: 0;
  transition: opacity .4s ease .9s;
}
.is-visible .chart-ci { opacity: 1; }

.chart-ci::before,
.chart-ci::after {
  content: "";
  position: absolute;
  top: -3.5px;
  width: 1px;
  height: 8px;
  background: rgba(20, 22, 26, 0.55);
}
.chart-ci::before { left: 0; }
.chart-ci::after { right: 0; }

.chart-value {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  min-width: 2.6rem;
  text-align: right;
}
.chart-row.is-ours .chart-value { color: var(--lvl-3); }

/* --- Table reveal + results tables -------------------------------------- */
.table-reveal { margin-top: 1.5rem; }

.table-reveal summary {
  cursor: pointer;
  font-size: 0.87rem;
  color: var(--ink-2);
  padding: 0.4rem 0;
  user-select: none;
}
.table-reveal summary:hover { color: var(--ink-1); }
.table-reveal[open] summary { margin-bottom: 0.5rem; }

.results-table { font-size: 0.9rem; }
.results-table th, .results-table td { vertical-align: middle; }
.results-table thead th { color: var(--ink-2); border-bottom-width: 1px; }
.results-table th.sub { font-size: 0.78rem; font-weight: 600; color: var(--ink-3); }
.results-table .is-overall { background: rgba(42, 120, 214, 0.05); }
.results-table tr.is-highlight { background: rgba(42, 120, 214, 0.08); }
.results-table tr.is-highlight th[scope="row"] { color: var(--lvl-3); }
.results-table .ci {
  display: block;
  font-size: 0.76rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* --- Hardware + limitations --------------------------------------------- */
/* The platform is not one of the three memory properties, so it takes the
   blended bar rather than borrowing the scene-graph purple, which would read
   as "globally queryable". Same treatment as the retriever card and the
   memory-queries task family. */
.hardware-note {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--c-rule);
  border-left: 4px solid transparent;
  border-radius: 0 12px 12px 0;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem auto 2rem;
  max-width: 52rem;
}

.hardware-note::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -4px;
  width: 4px;
  height: calc(100% + 2px);
  background: linear-gradient(180deg,
    var(--c-global) 0%, var(--c-global) 26%,
    var(--c-interaction) 44%, var(--c-interaction) 58%,
    var(--c-fine) 76%, var(--c-fine) 100%);
}
.hardware-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.4rem;
}
.hardware-note p { font-size: 0.93rem; line-height: 1.68; color: var(--ink-2); }

.limitations-list { list-style: none; margin-left: 0; }
.limitations-list li {
  border-left: 3px solid var(--c-rule);
  padding: 0.15rem 0 0.15rem 1rem;
  color: var(--ink-2);
  line-height: 1.7;
}
.limitations-list li + li { margin-top: 1rem; }

/* --- Pending link buttons ------------------------------------------------ */
.button.is-pending {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.pending-tag {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.85;
  margin-left: 0.35rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.05em 0.4em;
}

/* --- Responsive ---------------------------------------------------------- */
@media screen and (max-width: 1023px) {
  .method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 900px) {
  .stat-grid { grid-template-columns: 1fr; }
  .chart { grid-template-columns: 1fr; gap: 0; }
  .chart.is-single { grid-template-columns: 1fr; }
  .chart-headrow { display: none; }
  .chart-row { display: block; padding: 0.6rem 0; border-bottom: 1px solid var(--c-rule); }
  .chart-label { text-align: left; display: block; font-weight: 600; }
  .chart-cell[data-scenario]::before {
    content: attr(data-scenario);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-3);
    min-width: 7.5rem;
  }
  .scenario-head { flex-direction: column; align-items: flex-start; }
  .method-grid { grid-template-columns: minmax(0, 1fr); }
  .method-card.is-wide { grid-template-columns: minmax(0, 1fr); }
  .method-card.is-wide p + p { margin-top: 0.75rem; }
}

/* --- Motion preferences --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .chart-bar { transition: none; width: calc(var(--v) * 1%); }
  .chart-ci { transition: none; opacity: 1; }
  .loop-step { animation: none; }
  .method-card:hover, .finding-card:hover { transform: none; }
  html { scroll-behavior: auto; }
}

html { scroll-behavior: smooth; }


/* =====================================================================
   LIGHTBOX — expanded, pannable/zoomable figure viewer
   ===================================================================== */

/* Affordance: figures that open in the viewer. */
.figure-block img {
  cursor: zoom-in;
  transition: box-shadow .25s ease;
}
.figure-block img:hover {
  box-shadow: 0 6px 24px rgba(20, 22, 26, 0.12);
}

.figure-block {
  position: relative;
}

.figure-block::after {
  content: "\f00e"; /* fa-search-plus */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(20, 22, 26, 0.62);
  color: #fff;
  font-size: 0.85rem;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.figure-block:hover::after { opacity: 1; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .22s ease;
}

/* MUST come after the rule above. The `hidden` attribute only hides an element
   through the UA stylesheet's `display: none`, which ANY author `display` rule
   overrides -- so `display: flex` above would otherwise leave this overlay
   permanently on top of the page: invisible at opacity 0, but still covering the
   viewport, showing `cursor: grab`, and swallowing every scroll via the stage's
   preventDefault'd wheel handler. Higher specificity (0,2,0 vs 0,1,0) wins
   without needing !important. */
.lightbox[hidden] {
  display: none !important;
}

.lightbox.is-open { opacity: 1; }

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 13, 16, 0.93);
}

.lightbox-stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;      /* we handle pinch/pan ourselves */
  cursor: grab;
}
.lightbox-stage.is-grabbing { cursor: grabbing; }
.lightbox-stage.is-zoomed { cursor: grab; }

.lightbox-img {
  max-width: 94%;
  max-height: calc(100% - 8.5rem);
  transform-origin: center center;
  transition: transform .2s cubic-bezier(.22, 1, .36, 1);
  user-select: none;
  -webkit-user-drag: none;
  border-radius: 4px;
  background: #fff;
  will-change: transform;
}
.lightbox-stage.is-grabbing .lightbox-img { transition: none; }

.lightbox-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem 1.25rem 1.15rem;
  background: linear-gradient(to top, rgba(12, 13, 16, 0.96), rgba(12, 13, 16, 0));
}

.lightbox-caption {
  color: #e8e9ec;
  font-size: 0.86rem;
  line-height: 1.55;
  max-width: 62ch;
  margin: 0;
}
.lightbox-caption b { color: #fff; }
.lightbox-caption .messymem { color: #fff; }
/* Property colours are tuned for white; lift them for the dark backdrop. */
.lightbox-caption .p-global { color: #c9a3e0; }
.lightbox-caption .p-interaction { color: #6fd2c2; }
.lightbox-caption .p-fine { color: #ffa98d; }

.lightbox-controls {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.lb-btn {
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .18s ease, border-color .18s ease;
}
.lb-btn:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.4); }
.lb-btn:focus-visible { outline: 2px solid #86b6ef; outline-offset: 2px; }
.lb-btn.is-close { background: rgba(255, 255, 255, 0.18); }
.lb-btn[disabled] { opacity: 0.4; cursor: default; }

.lightbox-zoom {
  color: #c9cbd1;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  min-width: 3.2rem;
  text-align: center;
}

.lightbox-hint {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.76rem;
  text-align: center;
  margin: 0;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  pointer-events: none;
}

/* Stop the page behind the viewer from scrolling. */
body.lb-locked { overflow: hidden; }

@media screen and (max-width: 768px) {
  .lightbox-bar { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .lightbox-caption { max-width: none; font-size: 0.8rem; max-height: 6.5rem; overflow-y: auto; }
  .lightbox-controls { justify-content: center; }
  .lightbox-hint { display: none; }
  .lightbox-img { max-height: calc(100% - 12rem); }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox,
  .lightbox-img,
  .figure-block img,
  .figure-block::after { transition: none; }
}


/* --- Key-phrase emphasis -----------------------------------------------
   Body copy runs at --ink-2. Bold at the same value only thickens the
   strokes; lifting it to --ink-1 is what actually makes a phrase stand out
   when the eye skims. Applied by scope so it never touches the dark
   lightbox caption, which sets its own colours. */
.section-lead b,
.property-card b,
.method-card b,
.setup-card b,
.finding-card b,
.scenario-card b,
.hardware-note b,
.note-box b,
.limitations-list b,
.legend-group b,
.figure-block .figure-caption b,
.content p b,
.teaser .subtitle b {
  color: var(--ink-1);
  font-weight: 700;
}


/* --- Long-horizon task families -----------------------------------------
   The four families each stress a different memory property, so each card is
   keyed to that property's colour. The fourth (memory queries) draws on all of
   memory rather than one component, so it takes the blended bar. */
.taskfam-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.25rem 0 0.5rem;
}

.taskfam {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--c-rule);
  border-radius: 12px;
  padding: 1.15rem 1.25rem 1.25rem;
  overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease;
}

.taskfam:hover {
  box-shadow: 0 10px 28px rgba(20, 22, 26, 0.08);
  transform: translateY(-2px);
}

.taskfam::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  height: 100%;
  background: var(--c-accent, var(--c-rule));
}

.taskfam.is-global { --c-accent: var(--c-global); }
.taskfam.is-interaction { --c-accent: var(--c-interaction); }
.taskfam.is-fine { --c-accent: var(--c-fine); }
.taskfam.is-query {
  --c-accent: var(--ink-3);
}
.taskfam.is-query::before {
  background: linear-gradient(180deg, var(--c-global), var(--c-interaction), var(--c-fine));
}

.taskfam-kicker {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.taskfam-name {
  font-family: 'Google Sans', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--c-accent);
  margin: 0.15rem 0 0.5rem;
  line-height: 1.2;
}
.taskfam.is-query .taskfam-name { color: var(--ink-1); }

.taskfam p {
  font-size: 0.9rem;
  line-height: 1.62;
  color: var(--ink-2);
  margin: 0;
}

.taskfam code {
  background: var(--c-panel);
  color: var(--c-global-dark);
  padding: 0.1em 0.35em;
  border-radius: 4px;
  font-size: 0.86em;
}

/* Property-vocabulary chips. These are the fields the interaction analyzer
   writes, so they carry the interaction colour rather than the code-span
   purple used elsewhere. */
.taskfam-props {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.7rem 0 !important;
}

.taskfam-props code {
  background: rgba(69, 181, 165, 0.13);
  color: var(--c-interaction-dark);
  border: 1px solid rgba(69, 181, 165, 0.3);
  padding: 0.18em 0.5em;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
}

.taskfam p + p { margin-top: 0.6rem !important; }

.taskfam-eg {
  margin-top: 0.75rem !important;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--c-rule);
  font-size: 0.85rem !important;
  color: var(--ink-3) !important;
  font-style: italic;
}

.taskfam-eg span {
  display: inline-block;
  font-style: normal;
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-right: 0.4rem;
}
.taskfam.is-query .taskfam-eg span { color: var(--ink-2); }

@media screen and (max-width: 768px) {
  .taskfam-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .taskfam:hover { transform: none; }
}


/* --- Teaser unmute overlay ----------------------------------------------
   The teaser is narrated but must autoplay muted, and the native volume
   control is small enough that many viewers never realise there is sound.
   This pill sits top-left (clear of the native control bar) and disappears
   once sound is on, whichever control turned it on. */
.teaser-frame,
.sound-frame { position: relative; }

/* The walkthrough video is capped at 900px and centred; the frame must match
   so the sound pill sits on the video's corner, not the container's. */
.content-frame {
  max-width: 900px;
  margin: 0 auto;
}

.unmute-btn {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(12, 13, 16, 0.72);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, opacity .25s ease, transform .25s ease;
}
.unmute-btn:hover { background: rgba(12, 13, 16, 0.88); }
.unmute-btn:focus-visible { outline: 2px solid #86b6ef; outline-offset: 2px; }

.teaser-frame.is-unmuted .unmute-btn,
.sound-frame.is-unmuted .unmute-btn {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .unmute-btn { transition: none; }
}


/* --- Title wordmark gradient ---------------------------------------------
   Scoped to the hero title only: .messymem appears throughout the body copy,
   where gradient text would be noisy. Uses the -dark property variants - the
   base paper colours are too light as solid text on white even at this size.
   Wrapped in @supports so a browser without background-clip:text falls back
   to ordinary solid text instead of transparent (invisible) text. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .publication-title .messymem {
    background: linear-gradient(90deg,
      var(--c-global-dark) 0%,
      var(--c-interaction-dark) 50%,
      var(--c-fine-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}


/* --- Teaser spacing -------------------------------------------------------
   More air between the teaser video and the one-line description under it. */
.teaser .hero-body .subtitle { margin-top: 1.9rem; }

/* --- Headline result band --------------------------------------------------
   The handful of numbers people should leave with, directly under the
   abstract. Flex-wrap rather than a fixed grid so any row count (5 on desktop,
   fewer on narrow screens) centres cleanly without empty grid cells. */
.result-band {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 2.25rem auto 0;
}

.band-item {
  flex: 1 1 10rem;
  max-width: 12.5rem;
  padding: 1.15rem 0.85rem 1.05rem;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--c-rule);
  border-radius: 12px;
}

.band-num {
  font-family: 'Google Sans', sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink-1);
  font-variant-numeric: tabular-nums;
}

.band-unit {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink-3);
  margin-left: 0.15rem;
}

.band-label {
  display: block;
  margin-top: 0.55rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink-2);
}

/* --- Table note ----------------------------------------------------------- */
.table-note {
  font-size: 0.82rem !important;
  line-height: 1.55;
  color: var(--ink-3) !important;
  margin-top: 0.5rem;
}

/* Twelve data columns in the Office Drawer table: tighten cell padding so it
   fits without scrolling on a laptop; it still scrolls inside its container
   on narrow screens. */
.results-table.is-compact-cols th,
.results-table.is-compact-cols td {
  padding: 0.45em 0.5em;
  white-space: nowrap;
}


/* --- Nav colour gradient (after messynav.github.io) --------------------------
   A faint full-width wash across the sticky nav in all three property
   colours: purple on the left, turquoise through the middle, coral on the
   right, the same order as the title wordmark gradient. Kept to the nav only;
   the title block stays plain white. */
:root {
  --c-global-rgb: 165, 113, 200;
  --c-interaction-rgb: 69, 181, 165;
  --c-fine-rgb: 240, 138, 110;
}

.site-nav {
  background-color: rgba(255, 255, 255, 0.92);
  background-image: linear-gradient(to right,
    rgba(var(--c-global-rgb), 0.18) 0%,
    rgba(var(--c-interaction-rgb), 0.16) 50%,
    rgba(var(--c-fine-rgb), 0.18) 100%);
}

/* Bulma paints the open mobile menu white, which would cut the wash off
   under the burger; let the nav's own background show through instead. */
.site-nav .navbar-menu,
.site-nav .navbar-brand { background-color: transparent; }