/**
 * V2 Design — Red PROJECTS layout
 * All variables adjustable via V2 Settings panel
 */

@font-face {
  font-family: 'Parma-Normal';
  src: url('../fonts/Parma-Normal.woff') format('woff'),
       url('../fonts/Parma-Normal.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

:root {
  --v2-color: #e60000;
  /* Masthead line + index row strokes (defaults match text/accent) */
  --v2-divider-color: #e60000;
  --v2-bg: #ffffff;
  /* Fixed masthead overlay duplicate (see .v2-masthead-region--fixed-clone); override via V2 Color panel */
  --v2-nav-bg: #ffffff;
  --v2-font-size: 14px;
  --v2-letter-spacing: 0.02em;
  --v2-word-spacing: 0;
  --v2-secondary-font-size: 12px;
  --v2-secondary-letter-spacing: 0.02em;
  --v2-secondary-word-spacing: 0;
  --v2-line-height: 1.3;
  /* Prose / layout: max width for body text blocks site-wide */
  --v2-text-max-width: 900px;
  /* Figures, inline images, maps (capped vs. grid thumbnails) */
  --v2-media-max-width: 1200px;
  --v2-margin-y: 50px;
  --v2-margin-x: 50px;
  /* Horizontal gap between primary column and secondary column (matches left/right page margins). */
  --v2-secondary-nav-gap: var(--v2-margin-x);
  --v2-secondary-nav-margin-left: 0;
  --v2-masthead-table-gap: 32px;
  --v2-divider-thickness: 1px;
  /* From last masthead nav line to divider: outer margin minus half the stroke (optically even with top margin). */
  --v2-masthead-gap-above-divider: calc(var(--v2-margin-y) - var(--v2-divider-thickness));
  /* Guides → Columns: vertical guide track count (visualiser + page grid). */
  --v2-visualiser-cols: 8;
  --v2-visualiser-col-gap: 24px;
  --v2-visualiser-row-height: 24px;
  --v2-visualiser-row-gap: 24px;
  /* Projects/News: items per row; each item spans guides ÷ this many tracks. */
  --v2-grid-cols: 4;
  /* One project column width (same math as .v2-projects / news masonry / visualiser guides). */
  --v2-project-col-width: calc(
    (100% - (var(--v2-grid-cols) - 1) * var(--v2-visualiser-col-gap, var(--v2-col-gap)))
      / var(--v2-grid-cols)
  );
  /* Guide tracks per project column (visualiser grid span). */
  --v2-project-col-span: calc(var(--v2-visualiser-cols) / var(--v2-grid-cols));
  --v2-projects-row-gap: 40px;
  /* Projects listing grid: cap thumbnail size (viewport units) */
  --v2-projects-thumb-max-width: 100vw;
  --v2-projects-thumb-max-height: 75vh;
  /* Legacy fallbacks for older saved settings */
  --v2-col-gap: 24px;
  --v2-row-gap: 40px;
  --v2-project-code-gap: 8px;
  /* Horizontal gap between code (e.g. 028) and title on Projects index */
  --v2-project-code-title-gap: 8px;
  /* Single project page: figure / gallery images */
  --v2-project-page-image-max-width: 100vw;
  --v2-project-page-image-max-height: 85vh;
  --v2-project-page-image-align: left;
  --v2-project-page-description-max-width: 900px;
  /* Project page: masthead row + gap above divider + divider line (see .v2-masthead { margin-bottom: table-gap }). */
  --v2-project-masthead-chrome: calc(
    var(--v2-masthead-bar-height) + var(--v2-masthead-table-gap, 32px) + var(--v2-divider-thickness)
  );
  /*
   * In-flow nav wrapper (.v2-masthead-region--in-flow): height is set in v2-masthead-scroll.js from
   * element.offsetHeight. Fallback ≈ chrome + gap under the red line (matches old carousel band math).
   */
  --v2-masthead-in-flow-height: calc(
    var(--v2-project-masthead-chrome) + var(--v2-margin-y, 50px)
  );
  /* Single project page: image block width in guide columns (not a multi-column image layout) */
  --v2-project-page-image-columns: 8;
  --v2-project-page-caption-columns: 3;
  /* Stacked captions (fixed corner): vertical gap between lines */
  --v2-project-page-caption-line-gap: 4px;
  --v2-project-caption-num-width: 28px;
  /* Layout-3 horizontal strip: gap between slides + edge inset of scrollport = one L/R outer margin each */
  --v2-project-page-strip-gap: var(--v2-margin-x, 50px);
  /* Index table: each value = how many Guides column tracks that field spans (grid must use same gap as overlay) */
  --v2-index-col-no: 1;
  --v2-index-col-name: 3;
  --v2-index-col-loc: 2;
  --v2-index-col-year: 1;
  --v2-index-col-cat: 1;
  --v2-index-col-toggle: 1;
  /* Index column text-align (left | right); physical column order comes from DOM (JS reorders <td>) */
  --v2-index-align-no: left;
  --v2-index-align-name: left;
  --v2-index-align-loc: left;
  --v2-index-align-year: left;
  --v2-index-align-cat: left;
  --v2-index-align-toggle: right;
  /* First grid line for expanded description row (set from column order + spans in JS) */
  --v2-index-desc-grid-start: 2;
  /* Expanded description row: span count after index # column (max = guides − col-no) */
  --v2-index-col-desc: 7;
  /* Index list row vertical padding (main row cells) */
  --v2-index-item-padding-top: 50px;
  --v2-index-item-padding-bottom: 43px;
  /* Expanded index description spacing (page-specific; line-height uses var fallback to --v2-line-height) */
  --v2-index-description-paragraph-gap: 14px;
  --v2-index-description-line-break-gap: 11px;
  /* Practice: max width for text blocks (titles, prose, jobs, team); images/maps use --v2-practice-media-max-width */
  --v2-practice-text-max-width: 900px;
  /* Practice CMS: spacing (px) */
  --v2-practice-section-gap: 48px;
  /* Space between consecutive .block-text siblings within a section */
  --v2-practice-paragraph-gap: 12px;
  --v2-practice-title-cluster-gap: 16px;
  /* Practice: image + map max width (vw); text uses --v2-practice-text-max-width */
  --v2-practice-media-max-width: 85vw;
  /* Space above and below full-width practice images (px) */
  --v2-practice-image-gap: 24px;
  /* Staff grids: items per row (must divide 12; span = 12 / this) */
  --v2-practice-staff-large-cols: 2;
  --v2-practice-staff-small-cols: 3;
  --v2-table-row-gap: 8px;

  --v2-news-item-gap: 24px;
  /* Masthead micro-motion (opacity transitions, etc.) */
  --v2-nav-expand-duration: 0.32s;
  --v2-nav-expand-timing: cubic-bezier(0.32, 0, 0.24, 1);
  /* Other masthead micro-animations (e.g. where a shorter ease is desired) */
  --v2-masthead-nav-reveal-duration: 0.28s;
  --v2-masthead-nav-reveal-timing: cubic-bezier(0.45, 0, 0.55, 1);
  /* Project masthead list: non-current rows use this strength (matches .v2-masthead-primary idle) */
  --v2-project-list-inactive-opacity: 0.25;
  /* One text line in the masthead (matches body line-height); bar = top + bottom outer margin + line */
  --v2-masthead-one-line-box: calc(var(--v2-font-size) * var(--v2-line-height));
  --v2-masthead-bar-height: calc(2 * var(--v2-margin-y) + var(--v2-masthead-one-line-box));
  /* All primary section rows in the masthead (INDEX + PROJECTS + PRACTICE + NEWS) + top/bottom outer margin */
  --v2-nav-primary-rows: 4;
  --v2-nav-primary-expanded-height: calc(
    2 * var(--v2-margin-y) + var(--v2-nav-primary-rows) * var(--v2-masthead-one-line-box)
  );
  /* Secondary column (category filters) is often taller than the primary stack on expand. */
  --v2-nav-secondary-rows: 6;
  --v2-nav-masthead-expanded-height: calc(
    2 * var(--v2-margin-y)
      + max(var(--v2-nav-primary-rows), var(--v2-nav-secondary-rows)) * var(--v2-masthead-one-line-box)
  );
  /* Project list hover: strip = 2×margin-y + N×line − trim×line (trim pulls divider up through the bottom row). */
  --v2-project-list-hover-rows: 7.5;
  /* Lower = more of the bottom list row stays above the red line (less aggressive bisect). */
  --v2-project-list-hover-trim-rows: 0.38;
  /* Project masthead list: fixed column for codes (no gap between name/code) */
  --v2-project-code-col-width: 5ch;
  /* Fixed nav (v2-masthead-scroll.js): bar offset uses window scroll delta × sensitivity. --v2-nav-fixed-reveal-scroll-px is unused (reserved). */
  --v2-nav-fixed-reveal-scroll-px: 120px;
  --v2-nav-fixed-scroll-sensitivity: 1;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-weight: normal; }

.v2-body {
  position: relative;
  overflow-anchor: none;
  font-family: 'Parma-Normal', serif;
  font-size: var(--v2-font-size);
  font-weight: normal;
  line-height: var(--v2-line-height);
  letter-spacing: var(--v2-letter-spacing);
  word-spacing: var(--v2-word-spacing);
  color: var(--v2-color);
  background: var(--v2-bg);
  padding-top: 0;
  padding-right: var(--v2-margin-x);
  padding-bottom: var(--v2-margin-y);
  padding-left: var(--v2-margin-x);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* Site-wide light/dark (toggle on regular pages; landing uses v2-landing.css) */
html[data-v2-landing-theme-boot='dark'] body.v2-body:not([data-v2-page='landing']):not([data-v2-page='landing-v2']),
body.v2-body:not([data-v2-page='landing']):not([data-v2-page='landing-v2'])[data-v2-landing-theme='dark'] {
  --v2-color: #ffffff;
  --v2-bg: #000000;
  --v2-nav-bg: #000000;
  --v2-divider-color: #ffffff;
  color: var(--v2-color);
  background: var(--v2-bg);
}

.v2-site-theme-toolbar {
  position: absolute;
  top: calc(var(--v2-margin-y, 50px) + env(safe-area-inset-top, 0px));
  right: calc(var(--v2-margin-x, 50px) + env(safe-area-inset-right, 0px));
  z-index: 40;
  pointer-events: none;
}

body[data-v2-page='landing'] .v2-site-theme-toolbar,
body[data-v2-page='landing-v2'] .v2-site-theme-toolbar,
body[data-v2-page='project-page'] .v2-site-theme-toolbar {
  display: none !important;
}

.v2-site-theme-toggle {
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

/* Light on → click goes dark → show black; dark on → click goes light → show white */
.v2-site-theme-toggle[aria-pressed='true'] {
  background: #000;
  border: 1px solid #000;
}

.v2-site-theme-toggle[aria-pressed='false'] {
  background: #fff;
  border: 1px solid #fff;
}

.v2-site-theme-toggle[aria-pressed='true']:focus-visible {
  outline: 2px solid #000;
  outline-offset: 3px;
}

.v2-site-theme-toggle[aria-pressed='false']:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ========== MASTHEAD + DIVIDER ========== */
.v2-masthead {
  display: flex;
  align-items: baseline;
  gap: var(--v2-margin-y);
  margin-bottom: var(--v2-masthead-table-gap);
  font-size: var(--v2-font-size);
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: var(--v2-letter-spacing);
  word-spacing: var(--v2-word-spacing);
  color: var(--v2-color);
  width: 100%;
}

.v2-masthead-primary-expand {
  flex-direction: column;
  align-items: stretch;
  /* Open by default; project list strip still clips until hover (see .v2-project-masthead-top). */
  overflow: visible;
  margin-bottom: 0;
  padding-bottom: 0;
  position: relative;
  z-index: 1;
}

.v2-masthead-primary-expand .v2-masthead-top {
  display: flex;
  align-items: flex-start;
  gap: var(--v2-margin-y);
  flex-shrink: 0;
  width: 100%;
  height: auto;
  min-height: var(--v2-nav-primary-expanded-height);
  max-height: none;
  overflow: visible;
  /* Nav expand-on-hover animation is project-page only (.v2-project-masthead-top). */
  transition: none;
}

@media (min-width: 768px) {
  /*
   * Align nav with project column 2: logo = one column width, then one grid gutter
   * (same inset as the visualiser / .v2-projects grid, without a separate masthead grid).
   */
  .v2-masthead-primary-expand .v2-masthead-top,
  .v2-masthead-primary-expand .v2-project-masthead-top {
    gap: var(--v2-visualiser-col-gap, var(--v2-col-gap, 24px));
  }

  .v2-masthead-primary-expand .v2-masthead-top > .v2-masthead-logo,
  .v2-masthead-primary-expand .v2-project-masthead-top > .v2-masthead-logo {
    flex: 0 0 var(--v2-project-col-width);
    width: var(--v2-project-col-width);
    max-width: var(--v2-project-col-width);
    min-width: 0;
    box-sizing: border-box;
  }

  .v2-masthead-primary-expand .v2-masthead-top > .v2-masthead-nav-inline,
  .v2-masthead-primary-expand .v2-project-masthead-top > .v2-masthead-nav-inline {
    flex: 0 1 auto;
    min-width: 0;
  }

  .v2-masthead-primary-expand .v2-project-masthead-top > .v2-project-info-expand {
    flex: 1 1 0%;
    min-width: 0;
  }
}

/* Project page only: compact masthead row grows on nav hover (see @media min-width 768px block). */
body[data-v2-page='project-page']
  .v2-masthead-primary-expand:has(.nav-primary .primary-item:hover)
  .v2-project-masthead-top,
body[data-v2-page='project-page']
  .v2-masthead-primary-expand:has(.nav-primary .primary-item:focus-within)
  .v2-project-masthead-top {
  height: var(--v2-nav-masthead-expanded-height);
  min-height: var(--v2-nav-primary-expanded-height);
  max-height: var(--v2-nav-masthead-expanded-height);
  overflow: visible;
}

/* Project list hover: fixed strip to the divider; children stretch so the list column fills it (not a short column + gap). */
.v2-masthead-primary-expand:has(.v2-project-info-expand:hover) .v2-project-masthead-top,
.v2-masthead-primary-expand:has(.v2-project-info-expand:focus-within) .v2-project-masthead-top {
  align-items: stretch;
  --v2-project-list-hover-height: calc(
    2 * var(--v2-margin-y) + (var(--v2-project-list-hover-rows) * var(--v2-masthead-one-line-box))
      - (var(--v2-project-list-hover-trim-rows) * var(--v2-masthead-one-line-box))
  );
  height: var(--v2-project-list-hover-height);
  min-height: var(--v2-project-list-hover-height);
  max-height: var(--v2-project-list-hover-height);
  overflow: hidden;
}

@supports (height: 1lh) {
  .v2-masthead-primary-expand:has(.v2-project-info-expand:hover) .v2-project-masthead-top,
  .v2-masthead-primary-expand:has(.v2-project-info-expand:focus-within) .v2-project-masthead-top {
    --v2-project-list-hover-height: calc(
      2 * var(--v2-margin-y) + (var(--v2-project-list-hover-rows) * 1lh)
        - (var(--v2-project-list-hover-trim-rows) * 1lh)
    );
    height: var(--v2-project-list-hover-height);
    min-height: var(--v2-project-list-hover-height);
    max-height: var(--v2-project-list-hover-height);
  }
}

.v2-masthead-primary-expand:has(.v2-project-info-expand:hover) .v2-project-masthead-top > .v2-masthead-logo,
.v2-masthead-primary-expand:has(.v2-project-info-expand:focus-within) .v2-project-masthead-top > .v2-masthead-logo,
.v2-masthead-primary-expand:has(.v2-project-info-expand:hover) .v2-project-masthead-top > .v2-masthead-nav-inline,
.v2-masthead-primary-expand:has(.v2-project-info-expand:focus-within) .v2-project-masthead-top > .v2-masthead-nav-inline {
  align-self: flex-start;
}

body[data-v2-page='project-page']
  .v2-masthead-region--fixed-clone
  .v2-masthead-primary-expand:has(.nav-primary .primary-item:hover)
  .v2-project-masthead-top,
body[data-v2-page='project-page']
  .v2-masthead-region--fixed-clone
  .v2-masthead-primary-expand:has(.nav-primary .primary-item:focus-within)
  .v2-project-masthead-top {
  height: var(--v2-nav-masthead-expanded-height);
  min-height: var(--v2-nav-primary-expanded-height);
  max-height: var(--v2-nav-masthead-expanded-height);
  overflow: visible;
}

.v2-masthead-region--fixed-clone
  .v2-masthead-primary-expand:has(.v2-project-info-expand:hover)
  .v2-project-masthead-top,
.v2-masthead-region--fixed-clone
  .v2-masthead-primary-expand:has(.v2-project-info-expand:focus-within)
  .v2-project-masthead-top {
  align-items: stretch;
  --v2-project-list-hover-height: calc(
    2 * var(--v2-margin-y) + (var(--v2-project-list-hover-rows) * var(--v2-masthead-one-line-box))
      - (var(--v2-project-list-hover-trim-rows) * var(--v2-masthead-one-line-box))
  );
  height: var(--v2-project-list-hover-height);
  min-height: var(--v2-project-list-hover-height);
  max-height: var(--v2-project-list-hover-height);
  overflow: hidden;
}

@supports (height: 1lh) {
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.v2-project-info-expand:hover)
    .v2-project-masthead-top,
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.v2-project-info-expand:focus-within)
    .v2-project-masthead-top {
    --v2-project-list-hover-height: calc(
      2 * var(--v2-margin-y) + (var(--v2-project-list-hover-rows) * 1lh)
        - (var(--v2-project-list-hover-trim-rows) * 1lh)
    );
    height: var(--v2-project-list-hover-height);
    min-height: var(--v2-project-list-hover-height);
    max-height: var(--v2-project-list-hover-height);
  }
}

.v2-masthead-region--fixed-clone
  .v2-masthead-primary-expand:has(.v2-project-info-expand:hover)
  .v2-project-masthead-top
  > .v2-masthead-logo,
.v2-masthead-region--fixed-clone
  .v2-masthead-primary-expand:has(.v2-project-info-expand:focus-within)
  .v2-project-masthead-top
  > .v2-masthead-logo,
.v2-masthead-region--fixed-clone
  .v2-masthead-primary-expand:has(.v2-project-info-expand:hover)
  .v2-project-masthead-top
  > .v2-masthead-nav-inline,
.v2-masthead-region--fixed-clone
  .v2-masthead-primary-expand:has(.v2-project-info-expand:focus-within)
  .v2-project-masthead-top
  > .v2-masthead-nav-inline {
  align-self: flex-start;
}

.v2-masthead-primary-expand .v2-masthead-top > .v2-masthead-logo,
.v2-masthead-primary-expand .v2-masthead-top > .v2-masthead-nav-inline,
.v2-masthead-primary-expand .v2-project-masthead-top > .v2-masthead-logo,
.v2-masthead-primary-expand .v2-project-masthead-top > .v2-masthead-nav-inline,
.v2-masthead-primary-expand .v2-project-masthead-top > .v2-project-info-expand {
  flex-shrink: 0;
}

a.v2-masthead-logo {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.v2-masthead-primary-expand .v2-masthead-top > .v2-masthead-logo,
.v2-masthead-primary-expand .v2-project-masthead-top > .v2-masthead-logo {
  padding-top: var(--v2-margin-y);
}

/*
 * Nav column: bottom margin on active only when there is no inactive stack,
 * else bottom spacing comes from the last inactive primary row.
 */
.v2-masthead-primary-expand .v2-masthead-nav-inline .nav-primary.nav-primary--active,
.v2-masthead-primary-expand .v2-project-masthead-top .nav-primary.nav-primary--active {
  padding-top: 0;
  padding-bottom: var(--v2-margin-y);
}

.v2-masthead-primary-expand:has(.v2-nav-primary-inactive-stack-outer) .v2-masthead-nav-inline .nav-primary.nav-primary--active,
.v2-masthead-primary-expand:has(.v2-nav-primary-inactive-stack-outer) .v2-project-masthead-top .nav-primary.nav-primary--active {
  padding-bottom: 0;
}

.v2-masthead-primary-expand .v2-nav-primary-inactive-stack > .nav-primary:last-child {
  padding-bottom: var(--v2-margin-y);
}

/* Primary + secondary share one flex row so spacing is a single gap (not title | primary | secondary). */
.v2-masthead-nav-inline {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--v2-margin-y);
  flex: 1 1 auto;
  min-width: 0;
}

/* Semantic nav: nav-container > v2-nav-primary-groups > active nav-primary + inactive-stack-outer > inactive-stack */
.v2-masthead-nav-inline .nav-container,
.v2-project-masthead-top .nav-container {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

.v2-masthead-nav-inline .nav-container .v2-nav-primary-groups,
.v2-project-masthead-top .nav-container .v2-nav-primary-groups {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0;
  min-width: 0;
  width: 100%;
}

/* Primary column: stretch rows so SECTION labels stack vertically (baseline on column children caused overlap). */
.v2-masthead-primary-expand .v2-masthead-nav-inline .nav-container .v2-nav-primary-groups,
.v2-masthead-primary-expand .v2-project-masthead-top .nav-container .v2-nav-primary-groups {
  align-items: stretch;
}

/* Two-column nav: primaries stack left, active secondaries stack beside (not page-right). */
.v2-masthead-primary-expand .v2-nav-primary-groups {
  flex-direction: row !important;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  width: auto;
  max-width: 100%;
  flex: 0 1 auto;
}

.v2-masthead-primary-expand .v2-nav-primary-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: flex-start;
  gap: 0;
  min-width: 0;
  flex: 0 0 auto;
  padding-top: var(--v2-margin-y);
  padding-bottom: var(--v2-margin-y);
  margin-right: var(--v2-margin-x);
  box-sizing: border-box;
}

.v2-masthead-primary-expand .v2-nav-secondary-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: flex-start;
  flex: 0 0 auto;
  min-width: 0;
  padding-top: var(--v2-margin-y);
  padding-bottom: var(--v2-margin-y);
  box-sizing: border-box;
}

.v2-masthead-primary-expand .v2-nav-primary-col > .nav-primary {
  order: var(--_nav-order, 0);
}

.v2-masthead-primary-expand .v2-nav-primary-col > .nav-primary:has(a[href*="/projects"]) { --_nav-order: 1; }
.v2-masthead-primary-expand .v2-nav-primary-col > .nav-primary:has(a[href*="/index"]) { --_nav-order: 2; }
.v2-masthead-primary-expand .v2-nav-primary-col > .nav-primary:has(a[href*="/practice"]) { --_nav-order: 3; }
.v2-masthead-primary-expand .v2-nav-primary-col > .nav-primary:has(a[href*="/news"]) { --_nav-order: 4; }

.v2-masthead-primary-expand .v2-nav-primary-groups .nav-primary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: auto;
  max-width: none;
  gap: 0;
}

.v2-masthead-primary-expand .v2-nav-primary-groups .nav-primary.nav-primary--active {
  padding-top: 0;
  padding-bottom: 0;
}

.v2-masthead-primary-expand .v2-nav-primary-groups .v2-nav-secondary-col .nav-secondary {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin-left: 0;
  padding-top: 0;
}

.v2-masthead-primary-expand .v2-nav-primary-col .v2-masthead-primary {
  opacity: 0.25;
}

.v2-masthead-primary-expand .v2-nav-primary-col .v2-masthead-primary.active,
.v2-masthead-primary-expand .v2-nav-primary-col .v2-masthead-primary:hover {
  opacity: 1;
}

.v2-masthead-primary-expand .v2-masthead-nav-inline .nav-container,
.v2-masthead-primary-expand .v2-project-masthead-top .nav-container {
  flex: 0 1 auto;
  width: auto;
}

/* Legacy paired-row markup (if cached HTML still has it). */
.v2-nav-primary-groups--desktop,
.v2-nav-primary-inactive-stack-outer {
  display: none !important;
}

.v2-masthead-primary-expand .v2-masthead-nav-inline .nav-container .v2-nav-primary-groups > .nav-primary,
.v2-masthead-primary-expand .v2-project-masthead-top .nav-container .v2-nav-primary-groups > .nav-primary {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Non-active sections: never show their secondaries in the masthead (avoids flash when :has() hover ends). */
.v2-masthead-primary-expand .v2-masthead-nav-inline .nav-primary:not(.nav-primary--active) .nav-secondary {
  display: none !important;
}

/* Inactive primaries: stacked under the active section (open by default). */
.v2-masthead-primary-expand .v2-nav-primary-inactive-stack-outer {
  width: 100%;
  align-self: stretch;
  overflow: visible;
}

.v2-masthead-primary-expand .v2-nav-primary-inactive-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
}

.v2-masthead-primary-expand .v2-nav-primary-inactive-stack .nav-primary {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.v2-masthead-nav-inline .nav-primary,
.v2-project-masthead-top .nav-primary {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--v2-margin-y);
  row-gap: var(--v2-margin-y);
  flex: 0 1 auto;
  min-width: 0;
  min-height: 0;
}

/* Primary rows keep their natural line box height (don’t shrink like flex items in a tight column). */
.v2-masthead-primary-expand .v2-masthead-nav-inline .nav-primary,
.v2-masthead-primary-expand .v2-project-masthead-top .nav-primary {
  flex-shrink: 0;
  flex-grow: 0;
  min-height: auto;
}

.v2-masthead-nav-inline .nav-primary .primary-item,
.v2-project-masthead-top .nav-primary .primary-item {
  flex: 0 0 auto;
  min-width: 0;
}

.v2-masthead-primary {
  color: inherit;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  font-size: var(--v2-font-size);
  letter-spacing: var(--v2-letter-spacing);
  word-spacing: var(--v2-word-spacing);
  opacity: 0.25;
  transition: opacity var(--v2-masthead-nav-reveal-duration) var(--v2-masthead-nav-reveal-timing);
}

.v2-masthead-primary:hover,
.v2-masthead-primary.active {
  opacity: 1;
}

.v2-masthead-nav-inline .nav-primary > .nav-secondary,
.v2-project-masthead-top .nav-primary > .nav-secondary {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0;
  min-width: 0;
  flex: 0 1 auto;
  /* Settings: Left = 0 (beside primary list); Right = auto (page-right cluster). */
  margin-left: var(--v2-secondary-nav-margin-left);
}

.v2-masthead-secondary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.v2-masthead-nav-inline .secondary-item,
.v2-project-masthead-top .secondary-item {
  display: contents;
}

/* Stacked secondary list (two-column masthead). */
.v2-masthead-primary-expand .v2-nav-secondary-col .secondary-item,
.v2-masthead-primary-expand .v2-nav-secondary-col .v2-masthead-secondary-list .secondary-item {
  display: list-item;
  list-style: none;
}

/* Legacy paired-row markup: real boxes so :hover / :focus-within on .secondary-item work. */
.v2-masthead-primary-expand .v2-masthead-nav-inline .nav-primary .secondary-item,
.v2-masthead-primary-expand .v2-project-masthead-top .nav-primary .secondary-item {
  display: block;
}

.v2-masthead-title {
  color: inherit;
  text-decoration: none;
}

.v2-masthead-title:hover {
  text-decoration: none;
}

.v2-masthead-secondary {
  color: inherit;
  text-decoration: none;
  text-transform: uppercase;
  opacity: 0.25;
  transition: opacity var(--v2-masthead-nav-reveal-duration) var(--v2-masthead-nav-reveal-timing);
}

.v2-masthead-secondary.active {
  opacity: 1;
}

.v2-masthead-secondary:hover {
  text-decoration: none;
  opacity: 1;
}

/* Legacy inactive-stack rows (hidden via .v2-nav-primary-inactive-stack-outer { display: none }). */

.v2-masthead-divider {
  position: relative;
  width: 100%;
  height: var(--v2-divider-thickness);
  background: var(--v2-divider-color);
  margin: 0 0 var(--v2-margin-y) 0;
  border: none;
  overflow: hidden;
}

/* AJAX nav: black sweep left → right over the red line (see v2-navigation.js) */
.v2-masthead-divider__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background: #000;
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
  transition: transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.v2-masthead-divider--loading .v2-masthead-divider__fill {
  opacity: 1;
}

/* Masthead region — in-flow wrapper (see v2-masthead-scroll.js). Fixed overlay is a duplicate node. */
.v2-masthead-region {
  width: 100%;
}

/* Legacy: no longer inserted; kept for cached HTML / older builds */
.v2-masthead-region-spacer {
  width: 100%;
  flex-shrink: 0;
  overflow-anchor: none;
}

/* Duplicate masthead: fixed strip when user scrolls up after passing the in-flow bar (see v2-masthead-scroll.js) */
.v2-masthead-region--fixed-clone {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  width: 100%;
  box-sizing: border-box;
  padding-top: 0;
  padding-left: calc(var(--v2-margin-x) + env(safe-area-inset-left, 0px));
  padding-right: calc(var(--v2-margin-x) + env(safe-area-inset-right, 0px));
  padding-bottom: 0;
  background: var(--v2-nav-bg);
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

.v2-masthead-region--fixed-clone.v2-masthead-fixed-visible {
  visibility: visible;
  pointer-events: auto;
}

/* Scroll offset: transform from v2-masthead-scroll.js (hidePx). */
/* White bar ends at the red line; gap below divider stays page background (images), not white */
.v2-masthead-region--fixed-clone .v2-masthead-divider {
  margin-bottom: 0;
}

.v2-masthead-region--fixed-clone .v2-masthead-primary-expand {
  overflow: hidden;
}

.v2-masthead-region--fixed-clone .v2-project-masthead {
  overflow: hidden;
}

.v2-masthead-region--fixed-clone .v2-masthead-top,
.v2-masthead-region--fixed-clone .v2-project-masthead-top {
  align-items: center;
}

/* Set by JS while primary/project expand is hovered or focused — bar stays fully visible, scroll-hide paused */
.v2-masthead-region--fixed-clone.v2-masthead-region--docked-expand {
  z-index: 1001;
}

/*
 * Desktop fixed scroll strip: compact nav (active primary + active secondary on one bar).
 * Inactive primaries and other secondary links reveal on nav hover.
 * In-flow masthead on listing pages stays fully open; only the duplicate strip collapses.
 */
@media (min-width: 768px) {
  .v2-masthead-region--fixed-clone {
    --v2-nav-primary-rows: 1;
  }

  .v2-masthead-region--fixed-clone .v2-masthead-primary-expand .v2-masthead-top,
  .v2-masthead-region--fixed-clone .v2-masthead-primary-expand .v2-project-masthead-top {
    height: var(--v2-masthead-bar-height);
    min-height: var(--v2-masthead-bar-height);
    max-height: var(--v2-masthead-bar-height);
    overflow: hidden;
    transition:
      height var(--v2-nav-expand-duration) var(--v2-nav-expand-timing),
      min-height var(--v2-nav-expand-duration) var(--v2-nav-expand-timing),
      max-height var(--v2-nav-expand-duration) var(--v2-nav-expand-timing);
  }

  /*
   * Collapsed one-line strip: --v2-masthead-bar-height already includes top/bottom margin-y.
   * Drop logo/col padding so AL–JAWAD PIKE, PROJECTS, and the active filter share one vertical center.
   */
  .v2-masthead-region--fixed-clone.v2-masthead-fixed-visible
    .v2-masthead-primary-expand:not(:has(.v2-masthead-nav-inline:hover)):not(:has(.v2-masthead-nav-inline:focus-within)):not(:has(.nav-primary .primary-item:hover)):not(:has(.nav-primary .primary-item:focus-within)):not(:has(.v2-nav-secondary-col:hover)):not(:has(.secondary-item:hover)):not(:has(.v2-masthead-secondary:hover))
    .v2-masthead-top > .v2-masthead-logo,
  .v2-masthead-region--fixed-clone.v2-masthead-fixed-visible
    .v2-masthead-primary-expand:not(:has(.v2-masthead-nav-inline:hover)):not(:has(.v2-masthead-nav-inline:focus-within)):not(:has(.nav-primary .primary-item:hover)):not(:has(.nav-primary .primary-item:focus-within)):not(:has(.v2-nav-secondary-col:hover)):not(:has(.secondary-item:hover)):not(:has(.v2-masthead-secondary:hover))
    .v2-project-masthead-top > .v2-masthead-logo {
    display: flex;
    align-items: center;
    align-self: center;
    height: 100%;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
  }

  .v2-masthead-region--fixed-clone.v2-masthead-fixed-visible
    .v2-masthead-primary-expand:not(:has(.v2-masthead-nav-inline:hover)):not(:has(.v2-masthead-nav-inline:focus-within)):not(:has(.nav-primary .primary-item:hover)):not(:has(.nav-primary .primary-item:focus-within)):not(:has(.v2-nav-secondary-col:hover)):not(:has(.secondary-item:hover)):not(:has(.v2-masthead-secondary:hover))
    .v2-nav-primary-col,
  .v2-masthead-region--fixed-clone.v2-masthead-fixed-visible
    .v2-masthead-primary-expand:not(:has(.v2-masthead-nav-inline:hover)):not(:has(.v2-masthead-nav-inline:focus-within)):not(:has(.nav-primary .primary-item:hover)):not(:has(.nav-primary .primary-item:focus-within)):not(:has(.v2-nav-secondary-col:hover)):not(:has(.secondary-item:hover)):not(:has(.v2-masthead-secondary:hover))
    .v2-nav-secondary-col {
    justify-content: center;
    align-self: center;
    height: 100%;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
  }

  /* Off-screen / hidden overlay: no active filter (in-flow masthead only). */
  .v2-masthead-region--fixed-clone:not(.v2-masthead-fixed-visible) .v2-nav-secondary-col {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }

  /* Collapsed strip (slides with primary): active filter visible whenever overlay is shown. */
  .v2-masthead-region--fixed-clone.v2-masthead-fixed-visible .v2-nav-primary-groups .v2-nav-secondary-col {
    display: flex !important;
    flex-direction: column;
    flex: 0 0 auto;
    max-width: none;
    max-height: none;
    min-width: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /*
   * Collapsed (not hovered): inactive rows out of flow so active primary + secondary
   * sit on the one-line bar (not at their stacked list positions).
   */
  .v2-masthead-region--fixed-clone.v2-masthead-fixed-visible
    .v2-masthead-primary-expand:not(:has(.v2-masthead-nav-inline:hover)):not(:has(.v2-masthead-nav-inline:focus-within)):not(:has(.nav-primary .primary-item:hover)):not(:has(.nav-primary .primary-item:focus-within)):not(:has(.v2-nav-secondary-col:hover)):not(:has(.secondary-item:hover)):not(:has(.v2-masthead-secondary:hover))
    .v2-nav-primary-col
    > .nav-primary:not(.nav-primary--active),
  .v2-masthead-region--fixed-clone.v2-masthead-fixed-visible
    .v2-masthead-primary-expand:not(:has(.v2-masthead-nav-inline:hover)):not(:has(.v2-masthead-nav-inline:focus-within)):not(:has(.nav-primary .primary-item:hover)):not(:has(.nav-primary .primary-item:focus-within)):not(:has(.v2-nav-secondary-col:hover)):not(:has(.secondary-item:hover)):not(:has(.v2-masthead-secondary:hover))
    .v2-nav-secondary-col
    .secondary-item:not(:has(.v2-masthead-secondary.active)) {
    display: none !important;
    visibility: hidden;
  }

  .v2-masthead-region--fixed-clone.v2-masthead-fixed-visible
    .v2-nav-secondary-col
    .v2-masthead-secondary.active {
    opacity: 1 !important;
    transition: none;
  }

  .v2-masthead-region--fixed-clone
    .v2-nav-primary-groups
    .v2-masthead-primary.active {
    opacity: 1 !important;
  }

  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:hover)
    .v2-nav-primary-col
    > .nav-primary:not(.nav-primary--active),
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:focus-within)
    .v2-nav-primary-col
    > .nav-primary:not(.nav-primary--active),
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.nav-primary .primary-item:hover)
    .v2-nav-primary-col
    > .nav-primary:not(.nav-primary--active),
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.nav-primary .primary-item:focus-within)
    .v2-nav-primary-col
    > .nav-primary:not(.nav-primary--active) {
    display: flex !important;
    visibility: visible;
  }

  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:hover)
    .v2-nav-primary-col
    > .nav-primary:not(.nav-primary--active)
    .v2-masthead-primary,
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:focus-within)
    .v2-nav-primary-col
    > .nav-primary:not(.nav-primary--active)
    .v2-masthead-primary,
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.nav-primary .primary-item:hover)
    .v2-nav-primary-col
    > .nav-primary:not(.nav-primary--active)
    .v2-masthead-primary,
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.nav-primary .primary-item:focus-within)
    .v2-nav-primary-col
    > .nav-primary:not(.nav-primary--active)
    .v2-masthead-primary {
    opacity: var(--v2-project-list-inactive-opacity);
    transition: none;
  }

  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:hover)
    .v2-nav-primary-col
    > .nav-primary:not(.nav-primary--active)
    .v2-masthead-primary:hover,
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:focus-within)
    .v2-nav-primary-col
    > .nav-primary:not(.nav-primary--active)
    .v2-masthead-primary:hover,
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.nav-primary .primary-item:hover)
    .v2-nav-primary-col
    > .nav-primary:not(.nav-primary--active)
    .v2-masthead-primary:hover,
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.nav-primary .primary-item:focus-within)
    .v2-nav-primary-col
    > .nav-primary:not(.nav-primary--active)
    .v2-masthead-primary:hover {
    opacity: 1 !important;
    transition: none !important;
  }

  /* Inactive secondaries on expand: same triggers + opacity model as inactive primaries. */
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:hover)
    .v2-nav-secondary-col
    .secondary-item:not(:has(.v2-masthead-secondary.active)),
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:focus-within)
    .v2-nav-secondary-col
    .secondary-item:not(:has(.v2-masthead-secondary.active)),
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.nav-primary .primary-item:hover)
    .v2-nav-secondary-col
    .secondary-item:not(:has(.v2-masthead-secondary.active)),
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.nav-primary .primary-item:focus-within)
    .v2-nav-secondary-col
    .secondary-item:not(:has(.v2-masthead-secondary.active)),
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.v2-nav-secondary-col:hover)
    .v2-nav-secondary-col
    .secondary-item:not(:has(.v2-masthead-secondary.active)),
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.secondary-item:hover)
    .v2-nav-secondary-col
    .secondary-item:not(:has(.v2-masthead-secondary.active)),
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.v2-masthead-secondary:hover)
    .v2-nav-secondary-col
    .secondary-item:not(:has(.v2-masthead-secondary.active)) {
    display: list-item !important;
    visibility: visible;
  }

  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:hover)
    .v2-nav-secondary-col
    .secondary-item:not(:has(.v2-masthead-secondary.active))
    .v2-masthead-secondary,
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:focus-within)
    .v2-nav-secondary-col
    .secondary-item:not(:has(.v2-masthead-secondary.active))
    .v2-masthead-secondary,
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.nav-primary .primary-item:hover)
    .v2-nav-secondary-col
    .secondary-item:not(:has(.v2-masthead-secondary.active))
    .v2-masthead-secondary,
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.nav-primary .primary-item:focus-within)
    .v2-nav-secondary-col
    .secondary-item:not(:has(.v2-masthead-secondary.active))
    .v2-masthead-secondary,
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.v2-nav-secondary-col:hover)
    .v2-nav-secondary-col
    .secondary-item:not(:has(.v2-masthead-secondary.active))
    .v2-masthead-secondary,
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.secondary-item:hover)
    .v2-nav-secondary-col
    .secondary-item:not(:has(.v2-masthead-secondary.active))
    .v2-masthead-secondary,
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.v2-masthead-secondary:hover)
    .v2-nav-secondary-col
    .secondary-item:not(:has(.v2-masthead-secondary.active))
    .v2-masthead-secondary {
    opacity: var(--v2-project-list-inactive-opacity);
    transition: none;
  }

  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:hover)
    .v2-nav-secondary-col
    .secondary-item:not(:has(.v2-masthead-secondary.active))
    .v2-masthead-secondary:hover,
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:focus-within)
    .v2-nav-secondary-col
    .secondary-item:not(:has(.v2-masthead-secondary.active))
    .v2-masthead-secondary:hover,
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.nav-primary .primary-item:hover)
    .v2-nav-secondary-col
    .secondary-item:not(:has(.v2-masthead-secondary.active))
    .v2-masthead-secondary:hover,
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.nav-primary .primary-item:focus-within)
    .v2-nav-secondary-col
    .secondary-item:not(:has(.v2-masthead-secondary.active))
    .v2-masthead-secondary:hover,
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.v2-nav-secondary-col:hover)
    .v2-nav-secondary-col
    .secondary-item:not(:has(.v2-masthead-secondary.active))
    .v2-masthead-secondary:hover,
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.secondary-item:hover)
    .v2-nav-secondary-col
    .secondary-item:not(:has(.v2-masthead-secondary.active))
    .v2-masthead-secondary:hover,
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.v2-masthead-secondary:hover)
    .v2-nav-secondary-col
    .secondary-item:not(:has(.v2-masthead-secondary.active))
    .v2-masthead-secondary:hover {
    opacity: 1 !important;
    transition: none !important;
  }

  /* Collapsed: no global .v2-masthead-secondary:hover on hidden inactive filters. */
  .v2-masthead-region--fixed-clone.v2-masthead-fixed-visible
    .v2-masthead-primary-expand:not(:has(.v2-masthead-nav-inline:hover)):not(:has(.v2-masthead-nav-inline:focus-within)):not(:has(.nav-primary .primary-item:hover)):not(:has(.nav-primary .primary-item:focus-within)):not(:has(.v2-nav-secondary-col:hover)):not(:has(.secondary-item:hover)):not(:has(.v2-masthead-secondary:hover))
    .v2-nav-secondary-col
    .secondary-item:not(:has(.v2-masthead-secondary.active))
    .v2-masthead-secondary:hover {
    opacity: 0 !important;
    transition: none !important;
  }

  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:hover),
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:focus-within),
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.nav-primary .primary-item:hover),
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.nav-primary .primary-item:focus-within),
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.v2-nav-secondary-col:hover),
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.secondary-item:hover),
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.v2-masthead-secondary:hover) {
    --v2-nav-primary-rows: 4;
  }

  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:hover),
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:focus-within),
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.nav-primary .primary-item:hover),
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.nav-primary .primary-item:focus-within),
  .v2-masthead-region--fixed-clone.v2-masthead-region--docked-expand
    .v2-project-masthead,
  .v2-masthead-region--fixed-clone.v2-masthead-region--docked-expand
    .v2-masthead-primary-expand {
    overflow: visible;
  }

  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:hover)
    .v2-masthead-top,
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:focus-within)
    .v2-masthead-top,
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.nav-primary .primary-item:hover)
    .v2-masthead-top,
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.nav-primary .primary-item:focus-within)
    .v2-masthead-top,
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:hover)
    .v2-project-masthead-top,
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:focus-within)
    .v2-project-masthead-top,
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.nav-primary .primary-item:hover)
    .v2-project-masthead-top,
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.nav-primary .primary-item:focus-within)
    .v2-project-masthead-top,
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.v2-nav-secondary-col:hover)
    .v2-masthead-top,
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.secondary-item:hover)
    .v2-masthead-top,
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.v2-masthead-secondary:hover)
    .v2-masthead-top,
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.v2-nav-secondary-col:hover)
    .v2-project-masthead-top,
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.secondary-item:hover)
    .v2-project-masthead-top,
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.v2-masthead-secondary:hover)
    .v2-project-masthead-top {
    align-items: flex-start;
    height: var(--v2-nav-masthead-expanded-height);
    min-height: var(--v2-nav-primary-expanded-height);
    max-height: var(--v2-nav-masthead-expanded-height);
    overflow: hidden;
  }

  /* Nav hover on project page: keep project list compact unless the list column is hovered. */
  body[data-v2-page='project-page']
    .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:hover):not(:has(.v2-project-info-expand:hover))
    .v2-project-masthead-top,
  body[data-v2-page='project-page']
    .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:focus-within):not(:has(.v2-project-info-expand:focus-within))
    .v2-project-masthead-top,
  body[data-v2-page='project-page']
    .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.nav-primary .primary-item:hover):not(:has(.v2-project-info-expand:hover))
    .v2-project-masthead-top,
  body[data-v2-page='project-page']
    .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.nav-primary .primary-item:focus-within):not(:has(.v2-project-info-expand:focus-within))
    .v2-project-masthead-top {
    height: var(--v2-nav-masthead-expanded-height);
    min-height: var(--v2-nav-primary-expanded-height);
    max-height: var(--v2-nav-masthead-expanded-height);
    overflow: hidden;
  }

  body[data-v2-page='project-page']
    .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:hover):not(:has(.v2-project-info-expand:hover))
    .v2-project-masthead-top
    > .v2-project-info-expand,
  body[data-v2-page='project-page']
    .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:focus-within):not(:has(.v2-project-info-expand:focus-within))
    .v2-project-masthead-top
    > .v2-project-info-expand {
    align-self: flex-start;
    height: auto;
    max-height: none;
  }

  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:hover)
    .v2-nav-primary-groups
    .nav-primary.nav-primary--active,
  .v2-masthead-region--fixed-clone
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:focus-within)
    .v2-nav-primary-groups
    .nav-primary.nav-primary--active {
    padding-bottom: 0;
  }
}

body[data-v2-page='project-page'] .v2-masthead-region--fixed-clone,
body:has(.v2-project-masthead) .v2-masthead-region--fixed-clone {
  top: 0 !important;
}

/* Project page: name + code right-aligned; clip to fixed bar height */
.v2-project-masthead {
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  margin-bottom: 0;
}

/* flex-start: columns clipped by height + overflow on this row */
.v2-project-masthead-top {
  display: flex;
  align-items: flex-start;
  gap: var(--v2-margin-y);
  flex-shrink: 0;
  position: relative;
  isolation: isolate;
  /* So 1lh in project-list expanded height matches .v2-project-list-item line boxes */
  line-height: var(--v2-line-height);
}

.v2-masthead-primary-expand .v2-project-masthead-top {
  height: var(--v2-masthead-bar-height);
  min-height: var(--v2-masthead-bar-height);
  max-height: var(--v2-masthead-bar-height);
  overflow: hidden;
  transition:
    height var(--v2-nav-expand-duration) var(--v2-nav-expand-timing),
    min-height var(--v2-nav-expand-duration) var(--v2-nav-expand-timing),
    max-height var(--v2-nav-expand-duration) var(--v2-nav-expand-timing);
}

/*
 * Nav column grows with inactive primaries; without stacking, expanded nav can paint over the project list.
 * Keep project column above the nav so the list is never visually cut off by the nav stack.
 */
body[data-v2-page='project-page'] .v2-project-masthead-top > .v2-masthead-nav-inline,
body:has(.v2-project-masthead) .v2-project-masthead-top > .v2-masthead-nav-inline {
  position: relative;
  z-index: 1;
  min-width: 0;
}

body[data-v2-page='project-page'] .v2-project-masthead-top > .v2-project-info-expand,
body:has(.v2-project-masthead) .v2-project-masthead-top > .v2-project-info-expand {
  position: relative;
  z-index: 2;
  min-width: 0;
}

/* Project page: primary nav — PROJECTS only (hide INDEX, PRACTICE, NEWS + secondary column). */
body[data-v2-page='project-page'] {
  --v2-nav-primary-rows: 1;
}

body[data-v2-page='project-page'] .v2-project-masthead .v2-nav-primary-groups .v2-masthead-primary.active {
  opacity: 1 !important;
}

/*
 * Desktop project page: compact list (one row) unless the project column is hovered.
 * Inactive nav rows stay in layout; .v2-project-masthead-top overflow:hidden clips at the divider.
 */
@media (min-width: 768px) {
  body[data-v2-page='project-page'] .v2-project-masthead .v2-nav-primary-groups .v2-nav-primary-col > .nav-primary:not(.nav-primary--active) {
    display: flex !important;
    flex-direction: column;
  }

  /* Secondary column: hidden on idle; same nav-hover trigger as inactive primaries. */
  body[data-v2-page='project-page'] .v2-project-masthead .v2-nav-primary-groups .v2-nav-secondary-col {
    display: flex !important;
    flex-direction: column;
    flex: 0 0 0;
    max-width: 0;
    max-height: 0;
    min-width: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    padding-top: 0;
    padding-bottom: 0;
    transition:
      opacity var(--v2-masthead-nav-reveal-duration) linear,
      visibility 0s linear var(--v2-masthead-nav-reveal-duration),
      max-width 0s linear var(--v2-masthead-nav-reveal-duration),
      max-height 0s linear var(--v2-masthead-nav-reveal-duration);
  }

  body[data-v2-page='project-page'] .v2-project-masthead .v2-nav-secondary-col .v2-masthead-secondary {
    opacity: 0;
  }

  /* Inactive primaries: not visible on idle; revealed (dimmed) on nav expand. */
  body[data-v2-page='project-page']
    .v2-project-masthead
    .v2-nav-primary-col
    > .nav-primary:not(.nav-primary--active) {
    visibility: hidden;
  }

  body[data-v2-page='project-page']
    .v2-project-masthead
    .v2-nav-primary-col
    > .nav-primary:not(.nav-primary--active)
    .v2-masthead-primary {
    opacity: 0;
    transition: opacity var(--v2-masthead-nav-reveal-duration) linear;
  }

  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:hover)
    .v2-nav-primary-col
    > .nav-primary:not(.nav-primary--active),
  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:focus-within)
    .v2-nav-primary-col
    > .nav-primary:not(.nav-primary--active),
  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.nav-primary .primary-item:hover)
    .v2-nav-primary-col
    > .nav-primary:not(.nav-primary--active),
  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.nav-primary .primary-item:focus-within)
    .v2-nav-primary-col
    > .nav-primary:not(.nav-primary--active) {
    visibility: visible;
  }

  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:hover)
    .v2-nav-primary-col
    > .nav-primary:not(.nav-primary--active)
    .v2-masthead-primary,
  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:focus-within)
    .v2-nav-primary-col
    > .nav-primary:not(.nav-primary--active)
    .v2-masthead-primary,
  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.nav-primary .primary-item:hover)
    .v2-nav-primary-col
    > .nav-primary:not(.nav-primary--active)
    .v2-masthead-primary,
  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.nav-primary .primary-item:focus-within)
    .v2-nav-primary-col
    > .nav-primary:not(.nav-primary--active)
    .v2-masthead-primary {
    opacity: var(--v2-project-list-inactive-opacity);
    transition: none;
  }

  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:hover)
    .v2-nav-primary-col
    > .nav-primary:not(.nav-primary--active)
    .v2-masthead-primary:hover,
  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:focus-within)
    .v2-nav-primary-col
    > .nav-primary:not(.nav-primary--active)
    .v2-masthead-primary:hover,
  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.nav-primary .primary-item:hover)
    .v2-nav-primary-col
    > .nav-primary:not(.nav-primary--active)
    .v2-masthead-primary:hover,
  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.nav-primary .primary-item:focus-within)
    .v2-nav-primary-col
    > .nav-primary:not(.nav-primary--active)
    .v2-masthead-primary:hover {
    opacity: 1 !important;
    transition: none !important;
  }

  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:hover)
    .v2-nav-secondary-col,
  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:focus-within)
    .v2-nav-secondary-col,
  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.nav-primary .primary-item:hover)
    .v2-nav-secondary-col,
  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.nav-primary .primary-item:focus-within)
    .v2-nav-secondary-col {
    flex: 0 0 auto;
    max-width: none;
    max-height: none;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    padding-top: var(--v2-margin-y);
    padding-bottom: var(--v2-margin-y);
    transition: none;
  }

  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:hover)
    .v2-nav-secondary-col
    .v2-masthead-secondary,
  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:focus-within)
    .v2-nav-secondary-col
    .v2-masthead-secondary,
  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.nav-primary .primary-item:hover)
    .v2-nav-secondary-col
    .v2-masthead-secondary,
  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.nav-primary .primary-item:focus-within)
    .v2-nav-secondary-col
    .v2-masthead-secondary {
    opacity: var(--v2-project-list-inactive-opacity);
    transition: none;
  }

  body[data-v2-page='project-page'] .v2-project-masthead .v2-masthead-secondary:hover,
  body[data-v2-page='project-page'] .v2-project-masthead .v2-masthead-secondary.active {
    opacity: 1 !important;
    transition: none !important;
  }

  body[data-v2-page='project-page'] .v2-project-masthead .v2-project-list-item:not(.v2-project-list-item--current) {
    display: none !important;
  }

  body[data-v2-page='project-page'] .v2-project-masthead .v2-project-list-wrap {
    max-height: none;
    overflow: visible;
  }

  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.v2-project-info-expand:hover)
    .v2-project-list-item:not(.v2-project-list-item--current),
  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.v2-project-info-expand:focus-within)
    .v2-project-list-item:not(.v2-project-list-item--current) {
    display: grid !important;
  }

  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.v2-project-info-expand:hover)
    .v2-project-masthead-top,
  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.v2-project-info-expand:focus-within)
    .v2-project-masthead-top {
    align-items: stretch;
  }

  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.v2-project-info-expand:hover)
    .v2-project-masthead-top
    > .v2-project-info-expand,
  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.v2-project-info-expand:focus-within)
    .v2-project-masthead-top
    > .v2-project-info-expand {
    flex: 1 1 auto;
    min-height: 0;
    align-self: stretch;
    height: 100%;
    max-height: 100%;
  }

  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.v2-project-info-expand:hover)
    .v2-project-list-wrap,
  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.v2-project-info-expand:focus-within)
    .v2-project-list-wrap {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.v2-project-info-expand:hover)
    .v2-project-list
    > .v2-project-list-item:first-child,
  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.v2-project-info-expand:focus-within)
    .v2-project-list
    > .v2-project-list-item:first-child {
    padding-top: 0;
  }

  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.v2-project-info-expand:hover)
    .v2-project-list,
  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.v2-project-info-expand:focus-within)
    .v2-project-list {
    padding-bottom: var(--v2-masthead-gap-above-divider);
  }

  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.v2-project-info-expand:hover)
    .v2-project-list
    > .v2-project-list-item:last-child,
  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.v2-project-info-expand:focus-within)
    .v2-project-list
    > .v2-project-list-item:last-child {
    padding-bottom: 0;
  }

  /* Nav hover: same expanded height model as /projects (not full project list scroll height). */
  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:hover),
  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:focus-within) {
    --v2-nav-primary-rows: 4;
  }

  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:hover)
    .v2-project-masthead,
  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:focus-within)
    .v2-project-masthead,
  body[data-v2-page='project-page']
    .v2-masthead-region--fixed-clone.v2-masthead-region--docked-expand
    .v2-project-masthead,
  body[data-v2-page='project-page']
    .v2-masthead-region--fixed-clone.v2-masthead-region--docked-expand
    .v2-masthead-primary-expand {
    overflow: visible;
  }

  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:hover):not(:has(.v2-project-info-expand:hover))
    .v2-project-masthead-top,
  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:focus-within):not(:has(.v2-project-info-expand:focus-within))
    .v2-project-masthead-top,
  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.nav-primary .primary-item:hover):not(:has(.v2-project-info-expand:hover))
    .v2-project-masthead-top,
  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.nav-primary .primary-item:focus-within):not(:has(.v2-project-info-expand:focus-within))
    .v2-project-masthead-top {
    height: var(--v2-nav-masthead-expanded-height);
    min-height: var(--v2-nav-primary-expanded-height);
    max-height: var(--v2-nav-masthead-expanded-height);
    overflow: hidden;
  }

  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:hover):not(:has(.v2-project-info-expand:hover))
    .v2-project-masthead-top
    > .v2-project-info-expand,
  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:focus-within):not(:has(.v2-project-info-expand:focus-within))
    .v2-project-masthead-top
    > .v2-project-info-expand {
    align-self: flex-start;
    height: auto;
    max-height: none;
  }

  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:hover)
    .v2-nav-primary-groups
    .nav-primary.nav-primary--active,
  body[data-v2-page='project-page']
    .v2-masthead-primary-expand:has(.v2-masthead-nav-inline:focus-within)
    .v2-nav-primary-groups
    .nav-primary.nav-primary--active {
    padding-bottom: 0;
  }
}

.v2-project-info-expand {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: max-content;
  max-width: 100%;
  cursor: default;
  min-width: 0;
  min-height: 0;
}

/* Shared grid: names right-align to the code column edge; codes use a fixed width (no gap). */
.v2-project-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--v2-project-code-col-width);
  column-gap: 0;
  align-items: baseline;
  width: 100%;
  box-sizing: border-box;
}

.v2-project-list-item__name {
  text-align: right;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v2-project-list-item__code {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.v2-project-list-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.v2-project-list-wrap::after {
  content: none !important;
  display: none !important;
}

/* Hovering the project list: column fills the strip height so the scrollport matches the clip at the divider. */
.v2-masthead-primary-expand:has(.v2-project-info-expand:hover) .v2-project-masthead-top > .v2-project-info-expand,
.v2-masthead-primary-expand:has(.v2-project-info-expand:focus-within) .v2-project-masthead-top > .v2-project-info-expand {
  align-self: stretch;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: 100%;
}

.v2-masthead-primary-expand:has(.v2-project-info-expand:hover) .v2-project-list-wrap,
.v2-masthead-primary-expand:has(.v2-project-info-expand:focus-within) .v2-project-list-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.v2-masthead-region--fixed-clone
  .v2-masthead-primary-expand:has(.v2-project-info-expand:hover)
  .v2-project-masthead-top > .v2-project-info-expand,
.v2-masthead-region--fixed-clone
  .v2-masthead-primary-expand:has(.v2-project-info-expand:focus-within)
  .v2-project-masthead-top > .v2-project-info-expand {
  align-self: stretch;
  height: 100%;
  max-height: 100%;
}

.v2-masthead-region--fixed-clone
  .v2-masthead-primary-expand:has(.v2-project-info-expand:hover)
  .v2-project-list-wrap,
.v2-masthead-region--fixed-clone
  .v2-masthead-primary-expand:has(.v2-project-info-expand:focus-within)
  .v2-project-list-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.v2-masthead-primary-expand:has(.v2-project-info-expand:hover) .v2-project-list-wrap::-webkit-scrollbar,
.v2-masthead-primary-expand:has(.v2-project-info-expand:focus-within) .v2-project-list-wrap::-webkit-scrollbar,
.v2-masthead-region--fixed-clone
  .v2-masthead-primary-expand:has(.v2-project-info-expand:hover)
  .v2-project-list-wrap::-webkit-scrollbar,
.v2-masthead-region--fixed-clone
  .v2-masthead-primary-expand:has(.v2-project-info-expand:focus-within)
  .v2-project-list-wrap::-webkit-scrollbar {
  display: none;
}

/*
 * Non-current project rows: opacity 0 until the project list column is hovered/focused, then snap to dimmed; hover → full (no opacity easing).
 */
.v2-project-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
  min-height: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.v2-project-list > .v2-project-list-item:not(:first-child) {
  opacity: 0;
  transition: none;
}

.v2-masthead-primary-expand:has(.v2-project-info-expand:hover) .v2-project-list > .v2-project-list-item:not(:first-child),
.v2-masthead-primary-expand:has(.v2-project-info-expand:focus-within) .v2-project-list > .v2-project-list-item:not(:first-child) {
  opacity: var(--v2-project-list-inactive-opacity);
}

.v2-masthead-primary-expand:has(.v2-project-info-expand:hover) .v2-project-list > .v2-project-list-item:not(:first-child):hover,
.v2-masthead-primary-expand:has(.v2-project-info-expand:focus-within) .v2-project-list > .v2-project-list-item:not(:first-child):hover {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .v2-masthead-primary-expand .v2-masthead-top,
  .v2-masthead-primary-expand .v2-project-masthead-top {
    transition: none;
  }
}

.v2-project-list-item {
  padding: 0;
  line-height: var(--v2-line-height);
  color: var(--v2-color);
  text-decoration: none;
  font-size: var(--v2-font-size);
  letter-spacing: var(--v2-letter-spacing);
  word-spacing: var(--v2-word-spacing);
}

.v2-project-list-item:hover {
  text-decoration: underline;
}

.v2-project-list-item--current {
  cursor: default;
}

.v2-project-list-item--current:hover {
  text-decoration: none;
}

/* Active project is first in DOM; first/last insets match outer vertical margin */
.v2-project-list > .v2-project-list-item:first-child {
  padding-top: var(--v2-margin-y);
}

.v2-project-list > .v2-project-list-item:last-child {
  padding-bottom: var(--v2-margin-y);
}

/* ========== INDEX ========== */
/* Index only: omit divider–content gap below the masthead line (other v2 pages keep it). */
.v2-masthead-region--in-flow + .v2-index,
.v2-masthead-divider + .v2-index {
  margin-top: calc(-1 * var(--v2-margin-y));
}

.v2-index {
  width: 100%;
}

.v2-index table {
  display: block;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--v2-font-size);
  font-weight: normal;
  color: var(--v2-color);
}

.v2-index tbody {
  display: block;
  width: 100%;
}

.v2-index tbody tr {
  display: grid;
  grid-template-columns: repeat(var(--v2-visualiser-cols), minmax(0, 1fr));
  column-gap: var(--v2-visualiser-col-gap, var(--v2-col-gap));
  width: 100%;
  position: relative;
  /* Border on the row, not cells — avoids gaps where grid column-gap breaks per-cell borders */
  border-bottom: var(--v2-divider-thickness) solid var(--v2-divider-color);
}

.v2-index tbody tr.v2-index-main {
  cursor: pointer;
}
.v2-index tbody tr.v2-index-main .col-toggle {
  cursor: default;
}
.v2-index tbody tr.v2-index-main .col-toggle .v2-index-readmore {
  cursor: pointer;
}

/* Author `display: grid` on tr wins over UA `[hidden] { display: none }`; keep detail rows collapsed. */
.v2-index tbody tr.v2-index-desc[hidden] {
  display: none !important;
}

.v2-index thead th {
  font-size: var(--v2-secondary-font-size);
  letter-spacing: var(--v2-secondary-letter-spacing);
  word-spacing: var(--v2-secondary-word-spacing);
  text-align: left;
}

/* Same inactive strength as .v2-masthead-secondary / .v2-masthead-primary; color-mix keeps
   dividers dimmed too, except lines touching the hovered row (handled below). */
/* One tbody per project row so hover/dim applies per entry (expandable detail is same group).
   Use tbody:has(tr:hover) so row borders respond to the actual row (grid tr + tbody:hover can disagree). */
/* Dim non-hovered rows; keep description-expanded entries full (same as hovered row). */
.v2-index table:hover tbody:not(:has(tr:hover)):not(.v2-index-expanded) td {
  color: color-mix(in srgb, var(--v2-color) 25%, transparent);
}

.v2-index table:hover tbody:not(:has(tr:hover)):not(.v2-index-expanded) tr {
  border-bottom-color: color-mix(in srgb, var(--v2-divider-color) 25%, transparent);
}

.v2-index table:hover tbody:not(:has(tr:hover)):not(.v2-index-expanded) td a {
  color: color-mix(in srgb, var(--v2-color) 25%, transparent);
}

/* Line above hovered row: previous project’s separator tr (class from v2-index.js). Text stays dimmed; border only full. */
.v2-index table:hover tr.v2-index-row-edge-divider {
  border-bottom-color: var(--v2-divider-color) !important;
}

.v2-index table:hover tbody:has(tr:hover) td {
  color: var(--v2-color);
}

.v2-index table:hover tbody:has(tr:hover) tr {
  border-bottom-color: var(--v2-divider-color);
}

.v2-index table:hover tbody:has(tr:hover) td a {
  color: var(--v2-color);
}

.v2-index table:hover tbody.v2-index-expanded:not(:has(tr:hover)) td {
  color: var(--v2-color);
}

.v2-index table:hover tbody.v2-index-expanded:not(:has(tr:hover)) tr {
  border-bottom-color: var(--v2-divider-color);
}

.v2-index table:hover tbody.v2-index-expanded:not(:has(tr:hover)) td a {
  color: var(--v2-color);
}

/* Description open: freeze hover — only expanded row full strength; ignore pointer on other rows */
.v2-index.v2-index-desc-open table tbody:not(.v2-index-expanded) td {
  color: color-mix(in srgb, var(--v2-color) 25%, transparent);
}

.v2-index.v2-index-desc-open table tbody:not(.v2-index-expanded) tr {
  border-bottom-color: color-mix(in srgb, var(--v2-divider-color) 25%, transparent);
}

.v2-index.v2-index-desc-open table tbody:not(.v2-index-expanded) td a {
  color: color-mix(in srgb, var(--v2-color) 25%, transparent);
}

.v2-index.v2-index-desc-open table tbody.v2-index-expanded td {
  color: var(--v2-color);
}

.v2-index.v2-index-desc-open table tbody.v2-index-expanded tr {
  border-bottom-color: var(--v2-divider-color);
}

.v2-index.v2-index-desc-open table tbody.v2-index-expanded td a {
  color: var(--v2-color);
}

.v2-index.v2-index-desc-open table tr.v2-index-row-edge-divider {
  border-bottom-color: var(--v2-divider-color) !important;
}

.v2-index tbody td {
  padding: var(--v2-index-item-padding-top, var(--v2-margin-y)) 0 var(--v2-index-item-padding-bottom, calc(var(--v2-margin-y) * 0.85)) 0;
  vertical-align: middle;
  font-size: var(--v2-font-size);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.v2-index .col-no {
  grid-column: span var(--v2-index-col-no, 1);
  min-width: 0;
  text-align: var(--v2-index-align-no, left);
}
.v2-index .col-name {
  grid-column: span var(--v2-index-col-name, 3);
  text-align: var(--v2-index-align-name, left);
}
.v2-index .col-loc {
  grid-column: span var(--v2-index-col-loc, 2);
  text-align: var(--v2-index-align-loc, left);
}
.v2-index .col-loc .loc-short { display: none; }
@media (max-width: 1023px) {
  .v2-index .col-loc .loc-full { display: none; }
  .v2-index .col-loc .loc-short { display: inline; }
}
.v2-index .col-year {
  grid-column: span var(--v2-index-col-year, 1);
  text-align: var(--v2-index-align-year, left);
}
.v2-index .col-year .v2-index-year-short {
  display: none;
}
@media (max-width: 1023px) {
  .v2-index .col-year .v2-index-year-full {
    display: none;
  }
  .v2-index .col-year .v2-index-year-short {
    display: inline;
  }
}
.v2-index .col-cat {
  grid-column: span var(--v2-index-col-cat, 1);
  min-width: 0;
  text-align: var(--v2-index-align-cat, left);
}

.v2-index .col-toggle {
  grid-column: span var(--v2-index-col-toggle, 1);
  min-width: 0;
  text-align: var(--v2-index-align-toggle, right);
}

/* Index column visibility toggles (body classes set by v2-settings.js) */
body.v2-index-hide-no .v2-index .col-no { display: none; }
body.v2-index-hide-name .v2-index .col-name { display: none; }
body.v2-index-hide-loc .v2-index .col-loc { display: none; }
body.v2-index-hide-year .v2-index .col-year { display: none; }
body.v2-index-hide-cat .v2-index .col-cat { display: none; }
body.v2-index-hide-toggle .v2-index .col-toggle { display: none; }

.v2-index-cat {
  min-width: 0;
  text-align: inherit;
}

.v2-index-readmore {
  font: inherit;
  font-size: var(--v2-font-size);
  letter-spacing: inherit;
  word-spacing: inherit;
  line-height: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: inherit;
  opacity: 1;
  pointer-events: auto;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .v2-index-readmore {
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
  }

  tbody:has(tr:hover) .v2-index-readmore,
  .v2-index-expanded .v2-index-readmore {
    opacity: 1;
    pointer-events: auto;
  }

  .v2-index.v2-index-desc-open tbody:not(.v2-index-expanded) .v2-index-readmore {
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

.v2-index-readmore:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Expanded: no line under main row — divider only under description. !important beats hover border-color on tr. */
.v2-index tbody:has(> tr.v2-index-desc:not([hidden])) > tr.v2-index-main {
  border-bottom: none !important;
}

/* Last entry: no trailing divider below the list */
.v2-index tbody:last-child > tr.v2-index-desc:not([hidden]),
.v2-index tbody:last-child:not(:has(> tr.v2-index-desc:not([hidden]))) > tr.v2-index-main {
  border-bottom: none !important;
}

/* Tighter gap between title row and expanded description (half of main+bottom + desc-top padding). */
.v2-index tbody:has(> tr.v2-index-desc:not([hidden])) > tr.v2-index-main td {
  padding-bottom: calc(var(--v2-index-item-padding-bottom, calc(var(--v2-margin-y) * 0.85)) / 2);
}

/* Expanded description: width set in panel (Description cols), capped in JS to guides − index cols */
.v2-index-desc td.v2-index-desc-cell {
  grid-column: var(--v2-index-desc-grid-start, calc(var(--v2-index-col-no, 1) + 1)) / span var(--v2-index-col-desc, 7);
  min-width: 0;
  padding: calc(var(--v2-index-item-padding-top, var(--v2-margin-y)) / 2) 0 var(--v2-index-item-padding-bottom, calc(var(--v2-margin-y) * 0.85)) 0;
  vertical-align: top;
  font-size: var(--v2-font-size);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* Mobile: description spans full width, no indent */
body.v2-index-hide-no .v2-index-desc td.v2-index-desc-cell {
  grid-column: 1 / -1;
}
@media (max-width: 767px) {
  .v2-index-desc td.v2-index-desc-cell {
    grid-column: 1 / -1;
  }
}

.v2-index-desc .description {
  line-height: var(--v2-index-description-line-height, var(--v2-line-height));
  width: 100%;
  padding-top: 0;
  text-align: left;
}

.v2-index-desc .description p:not(:first-of-type) {
  margin-top: var(--v2-index-description-paragraph-gap, 14px);
}

.v2-index-desc .description br + br {
  display: block;
  content: "";
  margin-top: var(--v2-index-description-line-break-gap, 11px);
}

.v2-index a {
  color: var(--v2-color);
  text-decoration: none;
}

.v2-index .name { text-transform: uppercase; }

/* ========== NEWS (Masonry: packed columns + horizontal order, like legacy /web/news) ========== */
#v2-news-container.v2-news {
  position: relative;
  width: 100%;
  max-width: 100%;
  /* Masonry subpixel math + CMS rich text: avoid document-level horizontal scroll */
  overflow-x: hidden;
  overflow-x: clip;
}

.v2-news-grid-sizer,
.v2-news-gutter-sizer {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
  height: 0;
  margin: 0;
  padding: 0;
}

.v2-news-grid-sizer,
#v2-news-container .v2-news-item {
  width: calc(
    (100% - (var(--v2-grid-cols) - 1) * var(--v2-visualiser-col-gap, var(--v2-col-gap, 24px))) /
      var(--v2-grid-cols)
  );
}

.v2-news-gutter-sizer {
  width: var(--v2-visualiser-col-gap, var(--v2-col-gap, 24px));
}

#v2-news-container .v2-news-item {
  margin-bottom: var(--v2-news-item-gap, 24px);
  transition: opacity 0.3s ease;
  min-width: 0;
}

#v2-news-container:hover .v2-news-item:not(:hover) {
  opacity: 0.75;
}

#v2-news-container .v2-news-item:hover {
  opacity: 1;
}

.v2-news-date {
  margin-bottom: 4px;
  font-size: var(--v2-secondary-font-size);
  letter-spacing: var(--v2-secondary-letter-spacing);
  word-spacing: var(--v2-secondary-word-spacing);
  color: var(--v2-color);
}

.v2-news-text {
  line-height: var(--v2-line-height);
  margin-bottom: 4px;
  color: var(--v2-color);
  max-width: min(var(--v2-text-max-width, 900px), 100%);
  overflow-wrap: break-word;
  word-wrap: break-word;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.v2-news-text p { margin-bottom: 0.25em; }

.v2-news-text img,
.v2-news-text video,
.v2-news-text iframe,
.v2-news-text embed,
.v2-news-text object,
.v2-news-text svg,
.v2-news-text table,
.v2-news-text figure {
  max-width: 100%;
  height: auto;
}

.v2-news-text table {
  max-width: 100%;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.v2-news-text pre {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: pre-wrap;
  word-break: break-word;
}

.v2-news-link {
  margin-bottom: 8px;
  font-size: var(--v2-secondary-font-size);
  letter-spacing: var(--v2-secondary-letter-spacing);
  word-spacing: var(--v2-secondary-word-spacing);
}

.v2-news-link a,
.v2-news-text a {
  font-size: inherit;
  color: var(--v2-color);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.v2-news-image {
  margin: 8px 0 0 0;
  max-width: min(var(--v2-media-max-width, 1200px), 100%);
}

.v2-news-image img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

#v2-news-container .v2-news-item:hover .v2-news-image img {
  filter: grayscale(0);
}

/* ========== PRACTICE ========== */
.v2-practice {
  max-width: min(var(--v2-practice-text-max-width, 900px), 100%);
  overflow-x: visible; /* allow .block-image / .block-map to extend past prose width */
}

/* CMS practice pages: full-width column (masthead margins only) so images/maps can use 100vw − outer margin like intro media. */
.v2-body .v2-practice:has(#practice-container) {
  max-width: 100%;
}

/* Wider than prose: hero image uses vw; .v2-practice-about-main keeps text max width */
.v2-practice--has-intro-media {
  max-width: 100%;
}

.v2-practice-intro-media {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: var(--v2-practice-image-gap, var(--v2-practice-intro-media-gap, 24px));
  margin-bottom: var(--v2-practice-image-gap, var(--v2-practice-intro-media-gap, 24px));
  min-width: 0;
}

.v2-practice--has-intro-media .v2-practice-about-main {
  max-width: min(var(--v2-practice-text-max-width, 900px), 100%);
}

.v2-practice-media {
  min-width: 0;
}

.v2-practice-intro-media .v2-practice-media {
  width: 100%;
  max-width: min(var(--v2-practice-media-max-width, 85vw), calc(100vw - 2 * var(--v2-margin-x, 0px)));
}

.v2-practice-media img {
  width: 100%;
  height: auto;
  display: block;
}

.v2-practice-media img + img {
  margin-top: 1rem;
}

.v2-practice-about-main {
  min-width: 0;
}

.v2-practice-intro {
  line-height: var(--v2-line-height);
  margin-bottom: 1.5em;
  color: var(--v2-color);
}

.v2-practice--has-intro-media .v2-practice-intro {
  margin-bottom: 0;
}

.v2-practice-intro p { margin-bottom: 0.5em; }

.v2-practice-sections { margin-top: 1em; }

.v2-practice-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 120px;
  margin-bottom: 2em;
  align-items: start;
}

.v2-practice-label {
  font-weight: normal;
  margin-bottom: 0.25em;
  font-size: var(--v2-secondary-font-size);
  letter-spacing: var(--v2-secondary-letter-spacing);
  word-spacing: var(--v2-secondary-word-spacing);
  color: var(--v2-color);
}

.v2-practice-list {
  line-height: var(--v2-line-height);
  color: var(--v2-color);
}

/* Practice CMS subpages: text + media blocks (see templates/_entries/_practiceEntry.twig) */
.v2-body #practice-container > section.block:not(:last-child) {
  margin-bottom: var(--v2-practice-section-gap, 48px);
}

.v2-body #practice-container .block.has-title > .block-title {
  max-width: min(var(--v2-practice-text-max-width, 900px), 100%);
  margin-bottom: var(--v2-practice-title-cluster-gap, 16px);
  font-size: var(--v2-font-size);
  letter-spacing: var(--v2-letter-spacing);
  word-spacing: var(--v2-word-spacing);
  font-weight: normal;
  color: var(--v2-color);
}

/* Staff grid: full width of practice content (not prose max width); title aligns with grid */
.v2-body #practice-container .block:has(> .block-staff) > .block-title {
  max-width: 100%;
}

.v2-body #practice-container .block-text + .block-text {
  margin-top: var(--v2-practice-paragraph-gap, 12px);
}

/* Rich text blocks: gap between paragraphs (same token as “Gap between paragraphs” in settings) */
.v2-body #practice-container .block-text p + p {
  margin-top: var(--v2-practice-paragraph-gap, 12px);
}

/* “Previous staff” name list (CMS text block with line breaks → inline, comma-separated) */
.v2-body #practice-container .block-text--inline-names br {
  display: inline;
}

.v2-body #practice-container .block-text--inline-names br::after {
  content: ", ";
}

/* Practice rich text: links match surrounding text (v2 does not load main styles.css .cluster a rules) */
.v2-body #practice-container .block-text a {
  color: inherit;
  text-decoration: none;
}

.v2-body #practice-container .block-text a:hover,
.v2-body #practice-container .block-text a:focus-visible {
  color: inherit;
  text-decoration: none;
}

/* Same paragraph gap as consecutive .block-text blocks — staff cards (rich text / multiple lines) */
.v2-body #practice-container .block-staff .staff-info p + p,
.v2-body #practice-container .block-staff .staff-description p + p {
  margin-top: var(--v2-practice-paragraph-gap, 12px);
}

/* Gap fills while V2 settings drawer is open (same idea as Projects → image↔code gap on .item-meta::before). */
body.v2-settings-panel-open .v2-body #practice-container > section.block + section.block {
  position: relative;
}

body.v2-settings-panel-open .v2-body #practice-container > section.block + section.block::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--v2-practice-section-gap, 48px));
  height: var(--v2-practice-section-gap, 48px);
  background: rgba(13, 71, 120, 0.5);
  pointer-events: none;
  z-index: 1;
}

body.v2-settings-panel-open .v2-body #practice-container .block-text + .block-text {
  position: relative;
}

body.v2-settings-panel-open .v2-body #practice-container .block-text + .block-text::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--v2-practice-paragraph-gap, 12px));
  height: var(--v2-practice-paragraph-gap, 12px);
  background: rgba(66, 133, 244, 0.38);
  pointer-events: none;
  z-index: 1;
}

body.v2-settings-panel-open .v2-body #practice-container .block.has-title > .block-title {
  position: relative;
}

body.v2-settings-panel-open .v2-body #practice-container .block.has-title > .block-title::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: var(--v2-practice-title-cluster-gap, 16px);
  background: rgba(187, 222, 251, 0.78);
  pointer-events: none;
  z-index: 1;
}

.v2-body #practice-container .block-text {
  max-width: min(var(--v2-practice-text-max-width, 900px), 100%);
}

.v2-body #practice-container .block-jobs {
  max-width: min(var(--v2-practice-text-max-width, 900px), 100%);
}

.v2-body #practice-container .block-jobs .job-entry + .job-entry,
.v2-body #practice-container .block-jobs .job-detail + .job-entry {
  margin-top: var(--v2-practice-job-entry-gap, 24px);
}

.v2-body #practice-container .block-jobs .job-summary-row {
  position: relative;
  display: block;
  width: 100%;
}

.v2-body #practice-container .block-jobs .job-summary-row .job-title {
  display: block;
  min-width: 0;
  padding-right: 1.75em;
}

.v2-body #practice-container .block-jobs .job-entry.has-detail .job-detail-toggle {
  position: absolute;
  right: 0;
  top: 0;
  min-width: 0;
  min-height: 0;
  width: 1.25em;
  height: 1em;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: var(--v2-font-size, 1rem);
  cursor: pointer;
  color: inherit;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.v2-body #practice-container .block-jobs .job-entry.has-detail:hover .job-detail-toggle,
.v2-body #practice-container .block-jobs .job-entry.has-detail:focus-within .job-detail-toggle {
  opacity: 1;
}

.v2-body #practice-container .block-jobs .job-entry.has-detail.is-active .job-detail-toggle {
  opacity: 1;
}

.v2-body #practice-container .block-jobs.has-active .job-entry {
  opacity: 0.4;
}

.v2-body #practice-container .block-jobs.has-active .job-entry.is-active {
  opacity: 1;
}

.v2-body #practice-container .block-jobs .job-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.v2-body #practice-container .block-jobs .job-detail.open {
  max-height: 5000px;
  overflow: visible;
}

.v2-body #practice-container .block-jobs .job-detail .job-detail-inner {
  display: block;
  width: 100%;
  padding-top: 0.35em;
  padding-bottom: var(--v2-practice-paragraph-gap, 12px);
}

.v2-body #practice-container .block-jobs .job-detail-pdf,
.v2-body #practice-container .block-jobs .job-detail-content-fallback {
  font-size: var(--v2-font-size, 14px);
  line-height: var(--v2-line-height, 1.3);
}

.v2-body #practice-container .block-jobs .job-detail-section {
  margin-bottom: var(--v2-practice-paragraph-gap, 12px);
}

.v2-body #practice-container .block-jobs .job-detail-section-num {
  text-transform: uppercase;
  font-weight: 400;
  margin-bottom: 0.5em;
}

.v2-body #practice-container .block-jobs .job-detail-list {
  margin: 0 0 0.75em;
  padding-left: 1.5em;
  list-style-type: none;
}

.v2-body #practice-container .block-jobs .job-detail-list li {
  position: relative;
  margin-bottom: 0.5em;
}

.v2-body #practice-container .block-jobs .job-detail-list li::before {
  content: '•';
  position: absolute;
  left: -1.5em;
}

.v2-body #practice-container .block-jobs .job-detail .job-pdf-link {
  display: inline-block;
  margin-top: 1em;
  font-size: var(--v2-secondary-font-size, 12px);
  color: var(--v2-color, #e60000);
}

/* Full-width image / map blocks: vertical space (V2 Practice → Image gap). */
.v2-body #practice-container .block-text + .block-image,
.v2-body #practice-container .block-text + .block-map {
  margin-top: var(--v2-practice-image-gap, var(--v2-practice-intro-media-gap, 24px));
  margin-bottom: var(--v2-practice-image-gap, var(--v2-practice-intro-media-gap, 24px));
}

.v2-body #practice-container .block.has-title > .block-title + .block-image,
.v2-body #practice-container .block.has-title > .block-title + .block-map {
  margin-top: var(--v2-practice-title-cluster-gap, 16px);
  margin-bottom: var(--v2-practice-image-gap, var(--v2-practice-intro-media-gap, 24px));
}

/* Image + map blocks: same max width (Practice → Image/map max width); capped by Guides horizontal margin (--v2-margin-x). */
.v2-body #practice-container .block-image,
.v2-body #practice-container .block-map {
  --v2-practice-image-within-margins: calc(100vw - 2 * var(--v2-margin-x, 0px));
  --v2-practice-image-outer: min(var(--v2-practice-media-max-width, 85vw), var(--v2-practice-image-within-margins));
  width: var(--v2-practice-image-outer);
  max-width: var(--v2-practice-image-outer);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
}

.v2-body #practice-container .block-image {
  overflow: visible; /* avoid legacy .block-image { overflow:hidden } from clipping wide breakout */
}

/* Map tile layer needs explicit height (main site styles.css not loaded on v2). */
.v2-body #practice-container .block-map {
  height: calc(100vh / 3);
  min-height: 200px;
  margin-bottom: 1.5rem;
}

.v2-body #practice-container .block-image > img {
  width: 100%;
  height: auto;
  display: block;
}

.v2-body #practice-container .block-text img,
.v2-body #practice-container .block-text iframe,
.v2-body #practice-container .block-text embed,
.v2-body #practice-container .block-text video {
  max-width: min(100%, var(--v2-media-max-width, 1200px));
}

.v2-body #practice-container .block-text img,
.v2-body #practice-container .block-text video {
  height: auto;
}

/*
 * Practice — team / staff grids (main site styles.css is not loaded on v2).
 * Without these rules, .block-staff is block flow and reads as a single column.
 */
.v2-body #practice-container .block-staff {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  min-width: 0;
}

.v2-body #practice-container .block-staff.large-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--v2-visualiser-col-gap, var(--v2-col-gap, 24px));
  row-gap: var(--v2-practice-image-gap, 24px);
  align-items: start;
}

.v2-body #practice-container .block-staff.large-grid > .staff-entry {
  grid-column: span calc(12 / var(--v2-practice-staff-large-cols, 2));
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.v2-body #practice-container .block-staff.small-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--v2-visualiser-col-gap, var(--v2-col-gap, 24px));
  row-gap: var(--v2-practice-image-gap, 24px);
  align-items: start;
}

.v2-body #practice-container .block-staff.small-grid > .staff-entry {
  grid-column: span calc(12 / var(--v2-practice-staff-small-cols, 3));
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* List layout (e.g. “Previous staff”): inline names separated by commas */
.v2-body #practice-container .block-staff.list {
  display: block;
}

.v2-body #practice-container .block-staff.list > .staff-entry {
  display: inline;
  min-width: 0;
}

.v2-body #practice-container .block-staff.list .staff-info {
  display: inline;
  margin-top: 0;
}

.v2-body #practice-container .block-staff.list .staff-name {
  display: inline;
}

.v2-body #practice-container .block-staff.list > .staff-entry:not(:last-child) .staff-name::after {
  content: ", ";
}

/* Founders (section title “Founders” / .block-staff--founders or founder-only entries): two columns */
.v2-body #practice-container .block-staff.block-staff--founders,
.v2-body #practice-container .block-staff:not(:has(> .staff-entry:not(.founder))):has(> .staff-entry.founder) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--v2-visualiser-col-gap, var(--v2-col-gap, 24px));
  row-gap: var(--v2-practice-image-gap, 24px);
  align-items: start;
}

.v2-body #practice-container .block-staff.block-staff--founders > .staff-entry,
.v2-body #practice-container .block-staff:not(:has(> .staff-entry:not(.founder))):has(> .staff-entry.founder) > .staff-entry {
  grid-column: span 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.v2-body #practice-container .block-staff.large-grid .staff-image,
.v2-body #practice-container .block-staff.block-staff--founders .staff-image,
.v2-body #practice-container .block-staff:not(:has(> .staff-entry:not(.founder))):has(> .staff-entry.founder) .staff-image {
  display: flex;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.v2-body #practice-container .block-staff.small-grid .staff-image {
  display: flex;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.v2-body #practice-container .block-staff .staff-image img {
  flex: 1 1 0;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  min-width: 0;
  display: block;
}

.v2-body #practice-container .block-staff .staff-info {
  margin-top: 0.5em;
}

.v2-body #practice-container .block-staff .staff-name {
  text-transform: uppercase;
}

.v2-body #practice-container .block-staff .staff-description {
  margin-top: 0.5em;
}

/* Practice staff — small grid / founders: hidden until image click (column-width) */
.v2-body:not([data-practice-staff-mode]) #practice-container .block-staff:not(.large-grid) .staff-entry .staff-description,
.v2-body[data-practice-staff-mode="column-width"] #practice-container .block-staff:not(.large-grid) .staff-entry .staff-description {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0.5em;
  transition: opacity 0.2s ease;
}
.v2-body:not([data-practice-staff-mode]) #practice-container .block-staff:not(.large-grid) .staff-entry.is-open .staff-description,
.v2-body[data-practice-staff-mode="column-width"] #practice-container .block-staff:not(.large-grid) .staff-entry.is-open .staff-description {
  max-height: 80vh;
  opacity: 1;
}

/* Large grid: four-line preview + expand (main.js staffInlineToggle) */
.v2-body:not([data-practice-staff-mode]) #practice-container .block-staff.large-grid .staff-entry .staff-description,
.v2-body[data-practice-staff-mode="column-width"] #practice-container .block-staff.large-grid .staff-entry .staff-description {
  max-height: none;
  opacity: 1;
  margin-top: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  transition: opacity 0.2s ease;
}
.v2-body:not([data-practice-staff-mode]) #practice-container .block-staff.large-grid .staff-entry.is-expanded .staff-description,
.v2-body[data-practice-staff-mode="column-width"] #practice-container .block-staff.large-grid .staff-entry.is-expanded .staff-description {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

.v2-body #practice-container .staff-description-wrap {
  position: relative;
  margin-top: 0.5em;
}

.v2-body #practice-container .block-staff.large-grid .staff-description-wrap .staff-description {
  margin-top: 0;
}

/* Large grid: + control overlays top-right of name row (does not affect row height) */
.v2-body #practice-container .block-staff.large-grid .staff-name-row {
  position: relative;
  display: block;
  width: 100%;
}

.v2-body #practice-container .block-staff.large-grid .staff-name-row .staff-name {
  display: block;
  min-width: 0;
  padding-right: 1.75em;
}

.v2-body #practice-container .block-staff.large-grid .staff-name-row:not(.has-overflow) .staff-description-expand {
  display: none;
}

.v2-body #practice-container .block-staff.large-grid .staff-name-row .staff-description-expand {
  position: absolute;
  right: 0;
  top: 0;
  left: auto;
  bottom: auto;
  flex-shrink: 0;
  min-width: 0;
  min-height: 0;
  width: 1.25em;
  height: 1em;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

.v2-body #practice-container .block-staff.large-grid .staff-entry:hover .staff-name-row .staff-description-expand,
.v2-body #practice-container .block-staff.large-grid .staff-entry:focus-within .staff-name-row .staff-description-expand {
  opacity: 1;
}

.v2-body #practice-container .block-staff.large-grid .staff-entry.is-expanded .staff-name-row .staff-description-expand {
  opacity: 1;
}

/* Small grid / founders: + overlays name row (does not affect row height) */
.v2-body #practice-container .block-staff:not(.large-grid) .staff-name-row {
  position: relative;
  display: block;
  width: 100%;
}

.v2-body #practice-container .block-staff:not(.large-grid) .staff-name-row .staff-name {
  display: block;
  min-width: 0;
  padding-right: 1.75em;
}

.v2-body #practice-container .block-staff:not(.large-grid) .staff-name-row .staff-description-expand {
  position: absolute;
  right: 0;
  top: 0;
  left: auto;
  bottom: auto;
  flex-shrink: 0;
  min-width: 0;
  min-height: 0;
  width: 1.25em;
  height: 1em;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

.v2-body #practice-container .block-staff:not(.large-grid) .staff-entry:hover .staff-name-row .staff-description-expand,
.v2-body #practice-container .block-staff:not(.large-grid) .staff-entry:focus-within .staff-name-row .staff-description-expand {
  opacity: 1;
}

.v2-body #practice-container .block-staff:not(.large-grid) .staff-entry.is-open .staff-name-row .staff-description-expand {
  opacity: 1;
}

.v2-body #practice-container .staff-description-expand {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75em;
  min-height: 1.5em;
  padding: 0 0 0 0.75em;
  border: none;
  margin: 0;
  font: inherit;
  font-size: inherit;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  background: linear-gradient(to left, var(--v2-bg, #fff) 45%, rgba(255, 255, 255, 0));
  opacity: 0;
}

.v2-body #practice-container .staff-description-wrap:not(.has-overflow) .staff-description-expand {
  display: none;
}

.v2-body #practice-container .block-staff.large-grid .staff-entry:hover .staff-description-expand,
.v2-body #practice-container .block-staff.large-grid .staff-entry:focus-within .staff-description-expand {
  opacity: 1;
}

.v2-body #practice-container .block-staff.large-grid .staff-entry.is-expanded .staff-description-expand {
  opacity: 1;
}

.v2-body:not([data-practice-staff-mode]) #practice-container .block-staff .staff-entry,
.v2-body[data-practice-staff-mode="column-width"] #practice-container .block-staff .staff-entry {
  cursor: pointer;
}
.v2-body:not([data-practice-staff-mode]) #practice-container .block-staff .staff-entry .staff-description-expand,
.v2-body[data-practice-staff-mode="column-width"] #practice-container .block-staff .staff-entry .staff-description-expand {
  cursor: pointer;
}

.v2-body:not([data-practice-staff-mode]) #practice-container .block-staff:not(.large-grid).has-active .staff-entry,
.v2-body[data-practice-staff-mode="column-width"] #practice-container .block-staff:not(.large-grid).has-active .staff-entry {
  opacity: 0.4;
}
.v2-body:not([data-practice-staff-mode]) #practice-container .block-staff:not(.large-grid).has-active .staff-entry.is-open,
.v2-body[data-practice-staff-mode="column-width"] #practice-container .block-staff:not(.large-grid).has-active .staff-entry.is-open {
  opacity: 1;
}

.v2-body[data-practice-staff-mode="detail-panel"] #practice-container .block-staff .staff-description-wrap {
  display: none;
}

@media (max-width: 767px) {
  .v2-body #practice-container .block-staff.block-staff--founders,
  .v2-body #practice-container .block-staff:not(:has(> .staff-entry:not(.founder))):has(> .staff-entry.founder) {
    grid-template-columns: 1fr;
  }
}

/* ========== PROJECTS ========== */
.v2-projects {
  display: grid;
  grid-template-columns: repeat(var(--v2-visualiser-cols), minmax(0, 1fr));
  column-gap: var(--v2-visualiser-col-gap, var(--v2-col-gap, 24px));
  row-gap: var(--v2-projects-row-gap, var(--v2-row-gap, 40px));
}

/* span = var(--v2-visualiser-cols) / var(--v2-grid-cols) guide tracks */
.v2-projects .item {
  grid-column: span calc(var(--v2-visualiser-cols) / var(--v2-grid-cols));
  display: flex;
  flex-direction: column;
}

.v2-projects .item a {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

.v2-projects .item-image {
  width: 100%;
  overflow: hidden;
  background: #e8e8e8;
}

.v2-projects .item img {
  display: block;
  width: 100%;
  max-width: min(100%, var(--v2-projects-thumb-max-width, 100vw));
  height: auto;
  max-height: var(--v2-projects-thumb-max-height, 75vh);
  vertical-align: top;
}

.v2-projects .item-meta {
  margin-top: var(--v2-project-code-gap);
  display: flex;
  align-items: baseline;
  gap: var(--v2-project-code-title-gap, 8px);
  width: 100%;
  min-width: 0;
}

/* Highlight image↔code gap while design settings are open (same measure as --v2-project-code-gap). */
body.v2-settings-panel-open .v2-projects .item-meta {
  position: relative;
}

body.v2-settings-panel-open .v2-projects .item-meta::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--v2-project-code-gap, 8px));
  height: var(--v2-project-code-gap, 8px);
  background: rgba(37, 99, 235, 0.32);
  pointer-events: none;
  z-index: 1;
}

.v2-projects .item-code {
  font-weight: normal;
  color: var(--v2-color);
  flex: 0 0 auto;
}

.v2-projects .item-title {
  color: var(--v2-color);
  opacity: 0;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-transform: uppercase;
}

.v2-projects .item a:hover .item-title,
.v2-projects .item a:focus-visible .item-title {
  opacity: 1;
}

/* Mobile: push project thumbnails to the bottom of the viewport */
@media (max-width: 767px) {
  body.v2-body[data-v2-page="projects"] #v2-page-swap {
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - var(--v2-margin-y, 50px));
  }

  body.v2-body[data-v2-page="projects"] #v2-page-swap > .v2-projects {
    margin-top: auto;
  }

  /* Cap first thumbnail so the image + masthead + spacing fit one viewport.
     3 × margin-y = logo top padding + nav-groups bottom padding + body bottom padding.
     9 × olb = logo (1) + nav/list rows (7) + meta line below image (1). */
  body.v2-body[data-v2-page="projects"] .v2-projects .item:first-child .item-image {
    max-height: calc(
      100dvh
      - 5 * var(--v2-margin-y, 50px)
      - 9 * var(--v2-masthead-one-line-box)
      - var(--v2-project-code-gap, 8px)
      - env(safe-area-inset-top, 0px)
    );
  }
}

/* ========== PROJECT PAGE ========== */

.v2-project-content { margin-top: 0; }

/* Max width = span of N guide tracks (same gutter math as .v2-projects grid). */
.v2-project-images-flow {
  --v2-proj-img-span: min(
    var(--v2-project-page-image-columns, 8),
    var(--v2-visualiser-cols, 8)
  );
  display: block;
  max-width: min(
    100%,
    calc(
      (var(--v2-proj-img-span) * (100% - (var(--v2-visualiser-cols, 8) - 1) * var(--v2-visualiser-col-gap, 24px)))
        / var(--v2-visualiser-cols, 8)
      + (var(--v2-proj-img-span) - 1) * var(--v2-visualiser-col-gap, 24px)
    )
  );
  box-sizing: border-box;
}

/* Wraps figures; keeps grid/sticky siblings (layout-2 fixed captions) predictable. */
.v2-project-images-flow__main {
  display: block;
  min-width: 0;
}

/* Project page: blue outlines on image vs caption containers while V2 settings drawer is open. */
body[data-v2-page="project-page"].v2-settings-panel-open .v2-project-images-flow__main,
body[data-v2-page="project-page"].v2-settings-panel-open .v2-project-captions-fixed:not(:empty),
body[data-v2-page="project-page"].v2-settings-panel-open .v2-project-images-flow .v2-project-caption-below {
  outline: 2px solid #1a5cff;
  outline-offset: 2px;
}

/* Figcaption / fixed caption lines: tint while V2 settings drawer is open (matches outline hue). */
body[data-v2-page="project-page"].v2-settings-panel-open figcaption.v2-project-caption-below {
  background-color: rgba(26, 92, 255, 0.12);
  box-sizing: border-box;
  padding: 0;
}

body[data-v2-page="project-page"].v2-settings-panel-open .v2-project-captions-fixed .v2-project-caption-line {
  background-color: rgba(26, 92, 255, 0.12);
  box-sizing: border-box;
  padding: 2px 6px;
}

.v2-body[data-v2-project-page-image-align="left"] .v2-project-images-flow {
  margin-left: 0;
  margin-right: auto;
}

.v2-body[data-v2-project-page-image-align="right"] .v2-project-images-flow {
  margin-left: auto;
  margin-right: 0;
}

.v2-body[data-v2-project-page-image-align="center"] .v2-project-images-flow,
.v2-body:not([data-v2-project-page-image-align]) .v2-project-images-flow {
  margin-left: auto;
  margin-right: auto;
}

body:not([data-v2-project-page-layout="layout-3"]) .v2-project-images-flow .v2-project-figure {
  display: block;
  margin: 0 0 var(--v2-margin-x, 50px) 0;
  max-width: min(100%, var(--v2-project-page-image-max-width, 100vw));
}

/* scrollIntoView({ block: 'center' }) + fixed masthead: keep figure clear of the top chrome. */
body[data-v2-page="project-page"][data-v2-project-caption-mode="fixed"] .v2-project-images-flow .v2-project-figure {
  scroll-margin-top: calc(var(--v2-margin-y, 50px) + 3rem);
}

/* Narrower-than-flow figures: match container alignment (not default block / start). Layout-3 strip overrides. */
.v2-body:not([data-v2-project-page-layout="layout-3"])[data-v2-project-page-image-align="left"] .v2-project-images-flow .v2-project-figure {
  margin-left: 0;
  margin-right: auto;
}

.v2-body:not([data-v2-project-page-layout="layout-3"])[data-v2-project-page-image-align="right"] .v2-project-images-flow .v2-project-figure {
  margin-left: auto;
  margin-right: 0;
}

.v2-body:not([data-v2-project-page-layout="layout-3"])[data-v2-project-page-image-align="center"] .v2-project-images-flow .v2-project-figure,
.v2-body:not([data-v2-project-page-layout="layout-3"]):not([data-v2-project-page-image-align]) .v2-project-images-flow .v2-project-figure {
  margin-left: auto;
  margin-right: auto;
}

body:not([data-v2-project-page-layout="layout-3"]) .v2-project-figure__inner {
  display: block;
  width: 100%;
}

body:not([data-v2-project-page-layout="layout-3"]) .v2-project-images-flow .v2-project-figure img {
  width: 100%;
  height: auto;
  max-height: var(--v2-project-page-image-max-height, 85vh);
  object-fit: contain;
  object-position: center center;
  display: block;
}

/* object-fit:contain + max-height leaves horizontal letterboxing; pin bitmap to alignment edge */
.v2-body[data-v2-project-page-image-align="left"] .v2-project-images-flow .v2-project-figure img {
  object-position: left center;
}

.v2-body[data-v2-project-page-image-align="right"] .v2-project-images-flow .v2-project-figure img {
  object-position: right center;
}

.v2-body[data-v2-project-page-image-align="center"] .v2-project-images-flow .v2-project-figure img,
.v2-body:not([data-v2-project-page-image-align]) .v2-project-images-flow .v2-project-figure img {
  object-position: center center;
}

/* Project page caption mode: off | fixed (corner stack) | static (under each image). Set via v2-settings (data-v2-project-caption-mode on body). */
body[data-v2-project-caption-mode="off"] .v2-project-captions-fixed,
body[data-v2-project-caption-mode="off"] .v2-project-caption-below {
  display: none !important;
}

body[data-v2-project-caption-mode="static"] .v2-project-captions-fixed {
  display: none !important;
}

body[data-v2-project-caption-mode="fixed"] .v2-project-caption-below,
body:not([data-v2-project-caption-mode]) .v2-project-caption-below {
  display: none !important;
}

/* In-flow captions (static mode): secondary type, full width of figure */
.v2-project-caption-below {
  margin: 0;
  padding: 0;
  font-size: var(--v2-secondary-font-size);
  line-height: var(--v2-line-height);
  letter-spacing: var(--v2-secondary-letter-spacing);
  word-spacing: var(--v2-secondary-word-spacing);
  color: var(--v2-color);
  text-align: left;
  box-sizing: border-box;
}

/* Static: shrink-wrap image + caption in __inner so text aligns to the bitmap column, not the full figure track. */
body[data-v2-project-caption-mode="static"]:not([data-v2-project-page-layout="layout-3"]) .v2-project-images-flow .v2-project-figure {
  display: flex;
  flex-direction: row;
  width: 100%;
  max-width: min(100%, var(--v2-project-page-image-max-width, 100vw));
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--v2-margin-x, 50px);
  box-sizing: border-box;
}

body.v2-body[data-v2-project-caption-mode="static"]:not([data-v2-project-page-layout="layout-3"])[data-v2-project-page-image-align="left"] .v2-project-images-flow .v2-project-figure {
  justify-content: flex-start;
}

body.v2-body[data-v2-project-caption-mode="static"]:not([data-v2-project-page-layout="layout-3"])[data-v2-project-page-image-align="right"] .v2-project-images-flow .v2-project-figure {
  justify-content: flex-end;
}

body.v2-body[data-v2-project-caption-mode="static"]:not([data-v2-project-page-layout="layout-3"])[data-v2-project-page-image-align="center"] .v2-project-images-flow .v2-project-figure,
body.v2-body[data-v2-project-caption-mode="static"]:not([data-v2-project-page-layout="layout-3"]):not([data-v2-project-page-image-align]) .v2-project-images-flow .v2-project-figure {
  justify-content: center;
}

body[data-v2-project-caption-mode="static"]:not([data-v2-project-page-layout="layout-3"]) .v2-project-figure__inner {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  width: auto;
  max-width: min(100%, var(--v2-project-page-image-max-width, 100vw));
  min-width: 0;
}

body[data-v2-project-caption-mode="static"]:not([data-v2-project-page-layout="layout-3"]) .v2-project-images-flow .v2-project-figure__inner img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: var(--v2-project-page-image-max-height, 85vh);
  object-fit: contain;
  display: block;
}

body.v2-body[data-v2-project-caption-mode="static"]:not([data-v2-project-page-layout="layout-3"])[data-v2-project-page-image-align="left"] .v2-project-images-flow .v2-project-figure__inner img {
  object-position: left center;
}

body.v2-body[data-v2-project-caption-mode="static"]:not([data-v2-project-page-layout="layout-3"])[data-v2-project-page-image-align="right"] .v2-project-images-flow .v2-project-figure__inner img {
  object-position: right center;
}

body.v2-body[data-v2-project-caption-mode="static"]:not([data-v2-project-page-layout="layout-3"])[data-v2-project-page-image-align="center"] .v2-project-images-flow .v2-project-figure__inner img,
body.v2-body[data-v2-project-caption-mode="static"]:not([data-v2-project-page-layout="layout-3"]):not([data-v2-project-page-image-align]) .v2-project-images-flow .v2-project-figure__inner img {
  object-position: center center;
}

/* Last figure: no bottom margin before description (base + static caption rules both set --v2-margin-x gap). */
body[data-v2-page="project-page"] .v2-project-images-flow__main > .v2-project-figure:last-child {
  margin-bottom: 0;
}

/* Caption block width = __inner (same as rendered image column). */
body[data-v2-project-caption-mode="static"] .v2-project-caption-below {
  margin-top: 0.65em;
  padding: 0;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
  box-sizing: border-box;
}

/*
 * In-flow figcaptions (static): band height = L/R margin + 10% of that value; small padding-top so copy
 * doesn’t sit flush under the image; rest of horizontal padding 0.
 */
body[data-v2-page="project-page"][data-v2-project-caption-mode="static"] figcaption.v2-project-caption-below {
  --v2-project-static-caption-band-height: calc(var(--v2-margin-x, 50px) * 1.1);
  --v2-project-static-caption-pad-top: calc(var(--v2-margin-x, 50px) * 0.35);
  height: var(--v2-project-static-caption-band-height);
  min-height: var(--v2-project-static-caption-band-height);
  max-height: var(--v2-project-static-caption-band-height);
  margin-top: 0;
  padding: var(--v2-project-static-caption-pad-top) 0 0 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Number + text share the first line’s baseline; extra lines only grow the text block downward (not the num column). */
body[data-v2-page="project-page"][data-v2-project-caption-mode="static"] figcaption.v2-project-caption-below .v2-project-caption-line {
  margin: 0;
  padding: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  min-height: 0;
  text-align: left;
}

/* Stacked captions: secondary (“size 2”) type, fixed to viewport corner; width = span of N guide tracks (fixed → use vw − margins as full width). */
.v2-project-captions-fixed {
  --v2-proj-cap-full: calc(100vw - 2 * var(--v2-margin-x, 50px));
  --v2-proj-cap-span: min(
    var(--v2-project-page-caption-columns, 3),
    var(--v2-visualiser-cols, 8)
  );
  position: fixed;
  bottom: var(--v2-margin-y, 50px);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: var(--v2-project-page-caption-line-gap, 4px);
  max-width: min(
    var(--v2-proj-cap-full),
    calc(
      (var(--v2-proj-cap-span) * (var(--v2-proj-cap-full) - (var(--v2-visualiser-cols, 8) - 1) * var(--v2-visualiser-col-gap, 24px)))
        / var(--v2-visualiser-cols, 8)
      + (var(--v2-proj-cap-span) - 1) * var(--v2-visualiser-col-gap, 24px)
    )
  );
  margin: 0;
  padding: 0;
  font-size: var(--v2-secondary-font-size);
  line-height: var(--v2-line-height);
  letter-spacing: var(--v2-secondary-letter-spacing);
  word-spacing: var(--v2-secondary-word-spacing);
  color: var(--v2-color);
  pointer-events: none;
  text-align: left;
  box-sizing: border-box;
}

/* Lines handle clicks (scroll to image); wrapper stays pointer-events none so gaps pass through. */
body[data-v2-project-caption-mode="fixed"] .v2-project-captions-fixed .v2-project-caption-line {
  pointer-events: auto;
  cursor: pointer;
}

.v2-project-captions-fixed:empty {
  display: none;
}

.v2-project-caption-line {
  margin: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  text-align: left;
}

/* Scroll-linked emphasis (see v2-project-captions.js): fixed mode only */
html.v2-project-caption-focus body[data-v2-project-caption-mode="fixed"] .v2-project-captions-fixed .v2-project-caption-line,
html.v2-project-caption-focus body:not([data-v2-project-caption-mode]) .v2-project-captions-fixed .v2-project-caption-line {
  opacity: 0.35;
}

html.v2-project-caption-focus body[data-v2-project-caption-mode="fixed"] .v2-project-captions-fixed .v2-project-caption-line.v2-project-caption-line--in-view,
html.v2-project-caption-focus body:not([data-v2-project-caption-mode]) .v2-project-captions-fixed .v2-project-caption-line.v2-project-caption-line--in-view {
  opacity: 1;
}

.v2-project-caption-num {
  flex: 0 0 var(--v2-project-caption-num-width, 28px);
  width: var(--v2-project-caption-num-width, 28px);
  min-width: var(--v2-project-caption-num-width, 28px);
  box-sizing: border-box;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

.v2-project-caption-text {
  flex: 1 1 auto;
  min-width: 0;
}

.v2-body[data-v2-project-caption-dock="right"] .v2-project-captions-fixed,
.v2-body:not([data-v2-project-caption-dock]) .v2-project-captions-fixed {
  left: auto;
  right: var(--v2-margin-x, 50px);
}

.v2-body[data-v2-project-caption-dock="left"] .v2-project-captions-fixed {
  right: auto;
  left: var(--v2-margin-x, 50px);
}

/*
 * Left-aligned preset: image block uses full Image columns width; captions sit in the same grid
 * cell (bottom corner) so they don’t steal horizontal space — 12 + 5 column settings both match the grid.
 */
body.v2-body[data-v2-project-page-layout="layout-2"][data-v2-project-caption-mode="fixed"] .v2-project-images-flow {
  --v2-proj-img-span: var(--v2-visualiser-cols, 8);
  --v2-proj-main-span: min(
    var(--v2-project-page-image-columns, 8),
    var(--v2-visualiser-cols, 8)
  );
  --v2-proj-main-max: min(
    100%,
    calc(
      (var(--v2-proj-main-span) * (100% - (var(--v2-visualiser-cols, 8) - 1) * var(--v2-visualiser-col-gap, 24px)))
        / var(--v2-visualiser-cols, 8)
      + (var(--v2-proj-main-span) - 1) * var(--v2-visualiser-col-gap, 24px)
    )
  );
  --v2-proj-cap-span: min(
    var(--v2-project-page-caption-columns, 3),
    var(--v2-visualiser-cols, 8)
  );
  --v2-proj-cap-full: calc(100vw - 2 * var(--v2-margin-x, 50px));
  --v2-proj-cap-max: min(
    var(--v2-proj-cap-full),
    calc(
      (var(--v2-proj-cap-span) * (var(--v2-proj-cap-full) - (var(--v2-visualiser-cols, 8) - 1) * var(--v2-visualiser-col-gap, 24px)))
        / var(--v2-visualiser-cols, 8)
      + (var(--v2-proj-cap-span) - 1) * var(--v2-visualiser-col-gap, 24px)
    )
  );
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
  align-items: start;
  justify-items: stretch;
}

body.v2-body[data-v2-layout-switch-choice="layout-2"][data-v2-project-page-layout="default"][data-v2-project-caption-mode="fixed"] .v2-project-images-flow {
  --v2-proj-img-span: var(--v2-visualiser-cols, 8);
  --v2-proj-main-span: min(
    var(--v2-project-page-image-columns, 8),
    var(--v2-visualiser-cols, 8)
  );
  --v2-proj-main-max: min(
    100%,
    calc(
      (var(--v2-proj-main-span) * (100% - (var(--v2-visualiser-cols, 8) - 1) * var(--v2-visualiser-col-gap, 24px)))
        / var(--v2-visualiser-cols, 8)
      + (var(--v2-proj-main-span) - 1) * var(--v2-visualiser-col-gap, 24px)
    )
  );
  --v2-proj-cap-span: min(
    var(--v2-project-page-caption-columns, 3),
    var(--v2-visualiser-cols, 8)
  );
  --v2-proj-cap-full: calc(100vw - 2 * var(--v2-margin-x, 50px));
  --v2-proj-cap-max: min(
    var(--v2-proj-cap-full),
    calc(
      (var(--v2-proj-cap-span) * (var(--v2-proj-cap-full) - (var(--v2-visualiser-cols, 8) - 1) * var(--v2-visualiser-col-gap, 24px)))
        / var(--v2-visualiser-cols, 8)
      + (var(--v2-proj-cap-span) - 1) * var(--v2-visualiser-col-gap, 24px)
    )
  );
  width: 100%;
  max-width: min(
    100%,
    calc(var(--v2-proj-main-max) + var(--v2-margin-x, 50px) + var(--v2-proj-cap-max))
  );
  display: grid;
  grid-template-columns: minmax(0, var(--v2-proj-main-max)) minmax(0, var(--v2-proj-cap-max));
  grid-template-rows: auto;
  column-gap: var(--v2-margin-x, 50px);
  align-items: start;
  justify-content: start;
}

body.v2-body[data-v2-project-page-layout="layout-2"][data-v2-project-caption-mode="fixed"] .v2-project-images-flow__main {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  max-width: var(--v2-proj-main-max);
  width: min(100%, var(--v2-proj-main-max));
  min-width: 0;
  z-index: 1;
}

body.v2-body[data-v2-layout-switch-choice="layout-2"][data-v2-project-page-layout="default"][data-v2-project-caption-mode="fixed"] .v2-project-images-flow__main {
  grid-column: 1;
  grid-row: 1;
  justify-self: stretch;
  max-width: none;
  width: 100%;
  min-width: 0;
  z-index: 1;
}

body.v2-body[data-v2-project-page-layout="layout-2"][data-v2-project-caption-mode="fixed"][data-v2-project-page-image-align="center"] .v2-project-images-flow__main,
body.v2-body[data-v2-project-page-layout="layout-2"][data-v2-project-caption-mode="fixed"]:not([data-v2-project-page-image-align]) .v2-project-images-flow__main {
  justify-self: center;
}

body.v2-body[data-v2-layout-switch-choice="layout-2"][data-v2-project-page-layout="default"][data-v2-project-caption-mode="fixed"][data-v2-project-page-image-align="center"] .v2-project-images-flow__main,
body.v2-body[data-v2-layout-switch-choice="layout-2"][data-v2-project-page-layout="default"][data-v2-project-caption-mode="fixed"]:not([data-v2-project-page-image-align]) .v2-project-images-flow__main {
  justify-self: stretch;
}

body.v2-body[data-v2-project-page-layout="layout-2"][data-v2-project-caption-mode="fixed"][data-v2-project-page-image-align="right"] .v2-project-images-flow__main {
  justify-self: end;
}

body.v2-body[data-v2-layout-switch-choice="layout-2"][data-v2-project-page-layout="default"][data-v2-project-caption-mode="fixed"][data-v2-project-page-image-align="right"] .v2-project-images-flow__main {
  justify-self: stretch;
}

body.v2-body[data-v2-project-page-layout="layout-2"][data-v2-project-caption-mode="fixed"] .v2-project-captions-fixed {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  align-self: end;
  position: sticky;
  top: var(--v2-layout2-caption-sticky-top, calc(100vh - var(--v2-margin-y, 50px) - 140px));
  bottom: auto;
  z-index: 2;
  width: fit-content;
  max-width: var(--v2-proj-cap-max);
  min-width: 0;
  left: auto;
  right: auto;
}

body.v2-body[data-v2-layout-switch-choice="layout-2"][data-v2-project-page-layout="default"][data-v2-project-caption-mode="fixed"] .v2-project-captions-fixed {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  align-self: end;
  position: sticky;
  top: auto;
  bottom: var(--v2-margin-y, 50px);
  z-index: 2;
  width: fit-content;
  max-width: var(--v2-proj-cap-max);
  min-width: 0;
  left: auto;
  right: auto;
}

body.v2-body[data-v2-project-page-layout="layout-2"][data-v2-project-caption-mode="fixed"][data-v2-project-caption-dock="left"] .v2-project-captions-fixed {
  justify-self: start;
}

body.v2-body[data-v2-layout-switch-choice="layout-2"][data-v2-project-page-layout="default"][data-v2-project-caption-mode="fixed"][data-v2-project-caption-dock="left"] .v2-project-captions-fixed {
  grid-column: 2;
  justify-self: start;
}

/*
 * Left-aligned image column + dock right: justify-self:end pins to the full flow width.
 * Inset from the viewport edge so the caption stack lines up with the image column (--v2-proj-main-max).
 */
body.v2-body[data-v2-project-page-layout="layout-2"][data-v2-project-caption-mode="fixed"][data-v2-project-page-image-align="left"]:not([data-v2-project-caption-dock="left"]) .v2-project-captions-fixed {
  margin-right: calc(100% - var(--v2-proj-main-max));
}

body.v2-body[data-v2-layout-switch-choice="layout-2"][data-v2-project-page-layout="default"][data-v2-project-caption-mode="fixed"][data-v2-project-page-image-align="left"]:not([data-v2-project-caption-dock="left"]) .v2-project-captions-fixed {
  margin-right: 0;
}

@media (max-width: 767px) {
  body.v2-body[data-v2-page="project-page"] .v2-project-carousel__btn {
    display: none !important;
  }

  body.v2-body[data-v2-page="project-page"] .v2-project-images-flow {
    width: 100%;
    max-width: min(100%, var(--v2-project-page-image-max-width, 100vw));
    margin-left: auto;
    margin-right: auto;
    height: auto;
    min-height: 0;
  }

  body.v2-body[data-v2-page="project-page"] .v2-project-carousel,
  body.v2-body[data-v2-page="project-page"] .v2-project-images-flow__main {
    height: auto;
    min-height: 0;
  }

  body.v2-body[data-v2-page="project-page"] .v2-project-images-flow__main {
    display: block;
    overflow: visible;
    padding-left: 0;
    padding-right: 0;
  }

  body.v2-body[data-v2-page="project-page"] .v2-project-images-flow .v2-project-figure {
    display: block;
    width: 100%;
    max-width: min(100%, var(--v2-project-page-image-max-width, 100vw));
    margin: 0 0 var(--v2-margin-x, 50px);
  }

  body.v2-body[data-v2-layout-switch-choice="layout-2"][data-v2-project-page-layout="default"] .v2-project-images-flow {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    max-width: min(100%, var(--v2-proj-main-max));
  }
}

.v2-project-content .description {
  line-height: var(--v2-line-height);
  max-width: min(var(--v2-project-page-description-max-width, 900px), 100%);
  margin-left: 0;
  margin-right: auto;
  margin-top: 2em;
  text-align: left;
  box-sizing: border-box;
}

/* Rich text / embeds inside project body */
.v2-project-content .description img,
.v2-project-content .description iframe,
.v2-project-content .description embed,
.v2-project-content .description video {
  max-width: min(100%, var(--v2-project-page-image-max-width, 100vw));
}

.v2-project-content .description img,
.v2-project-content .description video {
  height: auto;
  max-height: var(--v2-project-page-image-max-height, 85vh);
}

/* Layout-2 first image: 100vh − collapsed nav chrome − gap under red line − bottom body padding.
 * Chrome uses design tokens (not live region height) so expanding the nav pushes content without shrinking this cap. */
body.v2-body[data-v2-project-page-layout="layout-2"] .v2-project-images-flow__main > .v2-project-figure:first-child img {
  max-height: calc(
    100vh - var(--v2-project-masthead-chrome) - var(--v2-margin-y, 50px) - var(--v2-margin-y, 50px)
  );
}

/* Left-aligned: further images + description media — full viewport minus vertical margins only.
 * Exclude first figure: all imgs sit in .v2-project-figure__inner; that selector would otherwise
 * override the first-child rule above and drop the masthead offset. */
body.v2-body[data-v2-project-page-layout="layout-2"] .v2-project-images-flow__main > .v2-project-figure:not(:first-child) img,
body.v2-body[data-v2-project-page-layout="layout-2"] .v2-project-images-flow__main > .v2-project-figure:not(:first-child) .v2-project-figure__inner img,
body.v2-body[data-v2-project-page-layout="layout-2"] .v2-project-content .description img,
body.v2-body[data-v2-project-page-layout="layout-2"] .v2-project-content .description video {
  max-height: calc(100vh - var(--v2-margin-y, 50px));
}

/* First figure in static mode uses __inner img — same cap as first-child img above. */
body.v2-body[data-v2-project-page-layout="layout-2"][data-v2-project-caption-mode="static"] .v2-project-images-flow__main > .v2-project-figure:first-child .v2-project-figure__inner img {
  max-height: calc(
    100vh - var(--v2-project-masthead-chrome) - var(--v2-margin-y, 50px) - var(--v2-margin-y, 50px)
  );
}

/*
 * Layout-3 — fade carousel: one slide visible; crossfade on prev/next (v2-project-carousel.js).
 * Images scale with object-fit:contain inside a fixed-height row (never crop/stretch).
 */
.v2-project-carousel {
  display: block;
  width: 100%;
  min-width: 0;
}

.v2-project-carousel__btn {
  display: none;
}

/* Legacy layout experiment UI (removed from templates; hide if stale HTML is cached). */
body[data-v2-page="project-page"] .v2-project-layout-switch,
body[data-v2-page="project-page"] .v2-project-captions-fixed {
  display: none !important;
}

body.v2-body[data-v2-page="project-page"] .v2-project-images-flow {
  --v2-proj-img-span: min(
    var(--v2-project-page-image-columns, 24),
    var(--v2-visualiser-cols, 8)
  );
  /*
   * Fills the viewport from the top of this strip to the window bottom. Prefer --v2-layout3-carousel-band-measured-px
   * (set in v2-project-carousel.js) so the height matches the real offset under header + divider + gap; the
   * calc() fallback can over-subtract if --v2-masthead-in-flow-height ≠ the actual in-flow region height.
   */
  --v2-layout3-carousel-band-height: var(
    --v2-layout3-carousel-band-measured-px,
    calc(100dvh - var(--v2-masthead-in-flow-height))
  );
  /*
   * Pixel height available for the image cell: full band, minus fixed caption stack (JS) or static
   * in-slide caption allowance (below).
   */
  --v2-layout3-slide-height: max(
    0px,
    calc(var(--v2-layout3-carousel-band-height) - var(--v2-layout3-caption-reserve, 0px))
  );
  /* Slide bitmap cannot extend past outer margins (and optional image max width from settings). */
  --v2-layout3-slide-max-w: min(
    var(--v2-project-page-image-max-width, 100vw),
    calc(100vw - 2 * var(--v2-margin-x, 50px))
  );
  width: calc(100% + 2 * var(--v2-project-page-strip-gap));
  max-width: none;
  margin-left: calc(-1 * var(--v2-project-page-strip-gap));
  margin-right: calc(-1 * var(--v2-project-page-strip-gap));
  height: var(--v2-layout3-carousel-band-height);
}

/* Static: in-slide figcaptions sit in row 2; image row is 1fr = band minus caption block height. */
body.v2-body[data-v2-page="project-page"][data-v2-project-caption-mode="static"] .v2-project-images-flow {
  display: flex;
  flex-direction: column;
  min-height: var(--v2-layout3-carousel-band-height);
  height: var(--v2-layout3-carousel-band-height);
  max-height: var(--v2-layout3-carousel-band-height);
  box-sizing: border-box;
}

body.v2-body[data-v2-page="project-page"][data-v2-project-caption-mode="static"] .v2-project-carousel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}

body.v2-body[data-v2-page="project-page"] .v2-project-carousel {
  position: relative;
  isolation: isolate;
  min-height: var(--v2-layout3-carousel-band-height);
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* Invisible full-height halves: prev = left 50%, next = right 50%. */
body.v2-body[data-v2-page="project-page"] .v2-project-carousel__btn {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 12;
  transform: none;
  pointer-events: auto;
  width: 50%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: transparent;
  font-size: 0;
  line-height: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body.v2-body[data-v2-page="project-page"] .v2-project-carousel__btn .v2-project-carousel__btn-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.v2-body[data-v2-page="project-page"] .v2-project-carousel__btn--prev {
  left: 0;
  cursor: w-resize;
}

body.v2-body[data-v2-page="project-page"] .v2-project-carousel__btn--next {
  left: 50%;
  cursor: e-resize;
}

body.v2-body[data-v2-page="project-page"] .v2-project-carousel__btn:hover,
body.v2-body[data-v2-page="project-page"] .v2-project-carousel__btn:focus-visible {
  opacity: 1;
}

body.v2-body[data-v2-page="project-page"] .v2-project-carousel__btn:focus-visible {
  outline: 1px solid var(--v2-color);
  outline-offset: -2px;
}

body.v2-body[data-v2-page="project-page"] .v2-project-carousel__btn:disabled {
  cursor: not-allowed;
  pointer-events: none;
}

body.v2-body[data-v2-page="project-page"] .v2-project-carousel__btn.v2-carousel__btn--disabled {
  cursor: not-allowed;
  pointer-events: none;
}

/* Fade carousel viewport: stacked slides; L/R inset on each slide (absolute children ignore parent padding). */
body.v2-body[data-v2-page="project-page"] .v2-project-images-flow__main {
  position: relative;
  z-index: 0;
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  touch-action: pan-y;
  padding-bottom: 0;
  box-sizing: border-box;
}

body.v2-body[data-v2-page="project-page"] .v2-project-images-flow__main.v2-project-fade-carousel {
  display: block;
  --v2-project-fade-inset-x: calc(var(--v2-margin-x, 50px) + env(safe-area-inset-left, 0px));
  --v2-project-fade-inset-x-end: calc(var(--v2-margin-x, 50px) + env(safe-area-inset-right, 0px));
}

/*
 * Hide inactive slides before/without JS (first paint + between carousel re-inits).
 * Direct-child selector matches template markup; captions stay with their figure.
 */
@media (min-width: 768px) {
  body.v2-body[data-v2-page="project-page"]
    .v2-project-images-flow__main.v2-project-fade-carousel
    > .v2-project-figure:not(.v2-project-figure--active) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  body.v2-body[data-v2-page="project-page"]
    .v2-project-images-flow__main.v2-project-fade-carousel
    > .v2-project-figure.v2-project-figure--active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

body.v2-body[data-v2-page="project-page"] .v2-project-images-flow__main.v2-project-fade-carousel .v2-project-figure {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--v2-project-fade-inset-x);
  right: var(--v2-project-fade-inset-x-end);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  margin: 0;
  min-height: 0;
  min-width: 0;
  width: auto;
  max-width: none;
  height: auto;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none;
  z-index: 0;
}

/* Crossfade only after boot (avoids load-time flash when slides / band height settle). */
body.v2-body[data-v2-page="project-page"]
  .v2-project-images-flow__main.v2-project-fade-carousel--ready
  .v2-project-figure {
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

body.v2-body[data-v2-page="project-page"]
  .v2-project-images-flow__main.v2-project-fade-carousel:not(.v2-project-fade-carousel--ready)
  .v2-project-figure__inner
  > img:not([src]) {
  display: none;
}

body.v2-body[data-v2-page="project-page"]
  .v2-project-images-flow__main.v2-project-fade-carousel
  .v2-project-figure.v2-project-figure--active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}

body.v2-body[data-v2-page="project-page"]
  .v2-project-images-flow__main.v2-project-fade-carousel
  .v2-project-figure__inner {
  width: fit-content;
  max-width: min(100%, var(--v2-layout3-slide-max-w));
}

body.v2-body[data-v2-page="project-page"] .v2-project-images-flow .v2-project-figure {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  margin: 0;
  min-height: 0;
  min-width: 0;
  box-sizing: border-box;
}

body.v2-body[data-v2-page="project-page"][data-v2-project-page-image-align="left"] .v2-project-images-flow .v2-project-figure {
  align-items: flex-start;
}

body.v2-body[data-v2-page="project-page"][data-v2-project-page-image-align="right"] .v2-project-images-flow .v2-project-figure {
  align-items: flex-end;
}

body.v2-body[data-v2-page="project-page"][data-v2-project-caption-mode="fixed"] .v2-project-images-flow .v2-project-figure {
  scroll-margin-top: 0;
  scroll-margin-left: calc(var(--v2-margin-x, 50px) + env(safe-area-inset-left, 0px));
  scroll-margin-right: calc(var(--v2-margin-x, 50px) + env(safe-area-inset-right, 0px));
}

/*
 * Inner: single column minmax(0,1fr) so the image respects slide max-width; row height from slide rules.
 */
body.v2-body[data-v2-page="project-page"] .v2-project-images-flow .v2-project-figure__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

body.v2-body[data-v2-page="project-page"]:not([data-v2-project-caption-mode="static"])
  .v2-project-images-flow
  .v2-project-figure__inner {
  height: var(--v2-layout3-slide-height);
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
}

body.v2-body[data-v2-page="project-page"][data-v2-project-caption-mode="static"]
  .v2-project-images-flow
  .v2-project-figure__inner {
  height: 100%;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
}

/*
 * Image row is already 1fr inside a full-height slide; the grid subtracts the caption row. Do not cap
 * with vh (e.g. 85vh from V2 “image max height”) or the bitmap sits short of the row with empty space
 * — use 100% of the image cell so carousel + in-slide caption fill the band under the masthead.
 */
body.v2-body[data-v2-page="project-page"] .v2-project-images-flow .v2-project-figure__inner > img {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  align-self: end;
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: bottom left;
}

body.v2-body[data-v2-page="project-page"] .v2-project-images-flow .v2-project-figure__inner > figcaption.v2-project-caption-below {
  grid-column: 1;
  grid-row: 2;
  align-self: stretch;
}

body.v2-body[data-v2-page="project-page"][data-v2-project-caption-mode="static"][data-v2-project-page-image-align="left"]
  .v2-project-images-flow
  .v2-project-figure__inner
  > img {
  justify-self: start;
  object-position: bottom left;
}

body.v2-body[data-v2-page="project-page"][data-v2-project-caption-mode="static"][data-v2-project-page-image-align="right"]
  .v2-project-images-flow
  .v2-project-figure__inner
  > img {
  justify-self: end;
  object-position: bottom right;
}

body.v2-body[data-v2-page="project-page"][data-v2-project-caption-mode="static"][data-v2-project-page-image-align="center"]
  .v2-project-images-flow
  .v2-project-figure__inner
  > img,
body.v2-body[data-v2-page="project-page"][data-v2-project-caption-mode="static"]:not([data-v2-project-page-image-align])
  .v2-project-images-flow
  .v2-project-figure__inner
  > img {
  object-position: bottom center;
}

@media (prefers-reduced-motion: reduce) {
  body.v2-body[data-v2-page="project-page"]
    .v2-project-images-flow__main.v2-project-fade-carousel--ready
    .v2-project-figure {
    transition: none;
  }
}

body.v2-body[data-v2-page="project-page"] .v2-project-images-flow .v2-project-caption-below {
  flex-shrink: 0;
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  /* padding-top: from figcaption rule (gap under image) — do not use padding:0 shorthand */
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: break-word;
  align-self: start;
  /* width set in v2-project-carousel.js to match rendered img width */
}

/*
 * Layout-3: body’s default padding-bottom (≅ --v2-margin-y) is a second vertical slice — same size as the gap
 * under the masthead line — and reads as a white strip at the screen bottom. Safe-area only; spacing after
 * content lives on .v2-project-adjacent / .description. (Static rules previously duplicated this; one rule
 * for all layout-3 caption modes.)
 */
body.v2-body[data-v2-page="project-page"] {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

body.v2-body[data-v2-page="project-page"][data-v2-project-caption-mode="static"] #v2-page-swap {
  padding-bottom: 0;
}

body.v2-body[data-v2-page="project-page"][data-v2-project-caption-mode="static"] .v2-project-adjacent {
  margin-bottom: var(--v2-margin-y, 50px);
}

body.v2-body[data-v2-page="project-page"][data-v2-project-caption-mode="static"]
  #v2-page-swap
  > .v2-project-content:last-child
  .description:last-child {
  margin-bottom: var(--v2-margin-y, 50px);
}

/* Layout-3 + static: keep body text below the hero (first screen is carousel + in-slide caption strip only). */
body.v2-body[data-v2-page="project-page"][data-v2-project-caption-mode="static"] .v2-project-content .description {
  margin-top: var(--v2-margin-y, 50px);
}

/* ========== MOBILE PROJECT PAGE: vertical image stack replaces carousel ========== */
@media (max-width: 767px) {
  /* Reset body padding that layout-3+static removes */
  body.v2-body[data-v2-page="project-page"] {
    padding-bottom: var(--v2-margin-y, 50px) !important;
  }

  body.v2-body[data-v2-page="project-page"][data-v2-project-caption-mode="static"] #v2-page-swap {
    padding-bottom: 0 !important;
  }

  /* Reset carousel wrapper to simple block */
  body.v2-body[data-v2-page="project-page"] .v2-project-carousel {
    display: block !important;
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    isolation: auto !important;
  }

  /* Hide carousel prev/next buttons */
  body.v2-body[data-v2-page="project-page"] .v2-project-carousel__btn {
    display: none !important;
  }

  /* Reset images-flow container: undo bleed-out, fixed height, flex layout */
  body.v2-body[data-v2-page="project-page"] .v2-project-images-flow {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
  }

  /* Stack images vertically */
  body.v2-body[data-v2-page="project-page"] .v2-project-images-flow__main {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    scroll-behavior: auto !important;
  }

  /* Each figure: full-width block with vertical spacing */
  body.v2-body[data-v2-page="project-page"] .v2-project-images-flow .v2-project-figure,
  body.v2-body[data-v2-page="project-page"]
    .v2-project-images-flow__main.v2-project-fade-carousel
    .v2-project-figure {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    flex: none !important;
    margin: 0 0 var(--v2-margin-y, 50px) 0 !important;
    align-self: auto !important;
    scroll-margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: auto !important;
    transition: none !important;
  }

  body.v2-body[data-v2-page="project-page"] .v2-project-images-flow .v2-project-figure:last-child {
    margin-bottom: 0 !important;
  }

  /* Figure inner: simple block flow */
  body.v2-body[data-v2-page="project-page"] .v2-project-images-flow .v2-project-figure__inner {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* Images: full width, natural aspect ratio */
  body.v2-body[data-v2-page="project-page"] .v2-project-images-flow .v2-project-figure__inner > img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    place-self: auto !important;
    opacity: 1 !important;
    filter: none !important;
    transition: none !important;
  }

  /* Force captions visible below each image (override fixed/off modes) */
  body.v2-body[data-v2-page="project-page"] figcaption.v2-project-caption-below {
    display: flex !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-top: 0.5em !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-top: calc(var(--v2-margin-x, 50px) * 0.35) !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    overflow: visible !important;
  }

  /* Hide fixed-position caption overlay */
  body.v2-body[data-v2-page="project-page"] .v2-project-captions-fixed {
    display: none !important;
  }
}

.v2-project-content .description p:not(:first-of-type) {
  margin-top: 1em;
}

.v2-project-content .description br + br {
  display: block;
  content: "";
  margin-top: 0.75em;
}

/* Single project: previous / next in same order as Projects grid (postDate desc) */
.v2-project-adjacent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 1.25rem 2rem;
  margin-top: 2.75em;
  padding-top: 0;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.v2-project-adjacent__cell {
  min-width: 0;
  max-width: min(100%, 26rem);
}

.v2-project-adjacent__cell--prev {
  grid-column: 1;
  justify-self: start;
  text-align: left;
}

.v2-project-adjacent__cell--next {
  grid-column: 2;
  justify-self: end;
  text-align: right;
}

/* Prev: ← + code (+ title on hover/focus). Next: code + → (+ title on hover/focus). */
.v2-project-adjacent__link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35em 0.65em;
  width: 100%;
  max-width: 100%;
  color: var(--v2-color);
  text-decoration: none;
  box-sizing: border-box;
}

.v2-project-adjacent__link--prev {
  justify-content: flex-start;
}

.v2-project-adjacent__link--next {
  justify-content: flex-end;
}

.v2-project-adjacent a:hover,
.v2-project-adjacent a:focus-visible {
  text-decoration: none;
  opacity: 0.85;
}

.v2-project-adjacent__arrow {
  flex-shrink: 0;
  font-size: var(--v2-font-size);
  line-height: var(--v2-line-height);
  letter-spacing: var(--v2-letter-spacing);
}

/* Large typesetting: primary (--v2-font-size) for arrow, code, and title */
.v2-project-adjacent__code {
  font-size: var(--v2-font-size);
  line-height: var(--v2-line-height);
  letter-spacing: var(--v2-letter-spacing);
  word-spacing: var(--v2-word-spacing);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.v2-project-adjacent__title {
  font-size: var(--v2-font-size);
  line-height: var(--v2-line-height);
  letter-spacing: var(--v2-letter-spacing);
  word-spacing: var(--v2-word-spacing);
  text-transform: uppercase;
  min-width: 0;
  display: none;
  transition: none;
}

.v2-project-adjacent__link:hover .v2-project-adjacent__title,
.v2-project-adjacent__link:focus-visible .v2-project-adjacent__title {
  display: inline;
}

@media (max-width: 520px) {
  .v2-project-adjacent {
    grid-template-columns: 1fr;
  }

  .v2-project-adjacent__cell--prev,
  .v2-project-adjacent__cell--next {
    grid-column: 1;
    max-width: 100%;
  }

  .v2-project-adjacent__cell--next {
    justify-self: end;
  }
}

/* ========== Footer nav ========== */
.v2-foot-nav {
  margin-top: 3em;
}

.v2-foot-nav a {
  color: var(--v2-color);
  text-decoration: none;
}

.v2-foot-nav a:hover { text-decoration: none; }

/* ========== V2 Settings Panel ========== */
.v2-settings-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10000;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: 12px;
}

.v2-settings-toggle {
  position: fixed;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(37, 99, 235, 0.4);
  border-radius: 10px;
  background: #fff;
  color: #1b1d21;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s, opacity 0.2s;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
  display: none !important;
}

.v2-settings-toggle:hover,
.v2-settings-toggle:focus {
  background: #f4f6fa;
  transform: scale(1.05);
  outline: none;
}

@media (max-width: 767px) {
  .v2-settings-toggle {
    display: none !important;
  }
}

.v2-settings-drawer {
  position: fixed;
  top: 12px;
  right: 12px;
  width: 360px;
  max-width: min(360px, calc(100vw - 24px));
  min-width: 0;
  height: auto;
  max-height: calc(100vh - 24px);
  background: #fff;
  border: 1px solid rgba(37, 99, 235, 0.35);
  border-radius: 14px;
  transform: translateX(calc(100% + 16px));
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.14);
  overflow-y: auto;
}

.v2-settings-panel.v2-settings-open .v2-settings-drawer {
  transform: translateX(0);
}

.v2-settings-panel.v2-settings-open .v2-settings-toggle {
  opacity: 0;
  pointer-events: none;
}

body.v2-settings-panel-open .v2-index tbody td {
  outline: 1px solid rgba(37, 99, 235, 0.75);
  outline-offset: -1px;
}

/* Layout blocks: blue outlines while V2 settings drawer is open */
body.v2-settings-panel-open .v2-masthead,
body.v2-settings-panel-open .v2-masthead-top,
body.v2-settings-panel-open .v2-masthead-nav-inline,
body.v2-settings-panel-open .v2-masthead-nav-inline .nav-container,
body.v2-settings-panel-open .v2-masthead-nav-inline .v2-nav-primary-groups,
body.v2-settings-panel-open .v2-masthead-nav-inline .v2-nav-primary-col,
body.v2-settings-panel-open .v2-masthead-nav-inline .v2-nav-secondary-col,
body.v2-settings-panel-open .v2-masthead-nav-inline .v2-nav-primary-inactive-stack-outer,
body.v2-settings-panel-open .v2-masthead-nav-inline .v2-nav-primary-inactive-stack,
body.v2-settings-panel-open .v2-masthead-nav-inline .nav-primary,
body.v2-settings-panel-open .v2-masthead-nav-inline .primary-item,
body.v2-settings-panel-open .v2-masthead-nav-inline .nav-secondary,
body.v2-settings-panel-open .v2-masthead-primary,
body.v2-settings-panel-open .v2-masthead-secondaries,
body.v2-settings-panel-open .v2-practice,
body.v2-settings-panel-open .v2-practice-media,
body.v2-settings-panel-open .v2-practice-intro-media,
body.v2-settings-panel-open .v2-practice-about-main,
body.v2-settings-panel-open .v2-practice-intro,
body.v2-settings-panel-open .v2-practice-sections,
body.v2-settings-panel-open .v2-practice-row,
body.v2-settings-panel-open .v2-practice-label,
body.v2-settings-panel-open .v2-practice-list,
body.v2-settings-panel-open #practice-container,
body.v2-settings-panel-open #practice-container .block,
body.v2-settings-panel-open #practice-container .block-title,
body.v2-settings-panel-open #practice-container .cluster,
body.v2-settings-panel-open .v2-projects .item,
body.v2-settings-panel-open .v2-news-item,
body.v2-settings-panel-open .v2-project-content > * {
  outline: 1px solid rgba(37, 99, 235, 0.75);
  outline-offset: -1px;
}

#site-preview-root {
  width: 100%;
}

/* V2 settings — breakpoint preview (same behaviour as main settings-panel iframe preview) */
#v2-settings-preview-frame {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 900;
  width: 100%;
  padding: 0;
  justify-content: center;
  align-items: center;
  overflow: auto;
}

#v2-settings-preview-frame .preview-scaler {
  transform-origin: top center;
  transform: scale(var(--preview-scale, 1));
}

#v2-settings-preview-frame iframe {
  width: var(--preview-width, 390px);
  height: var(--preview-height, 844px);
  border: 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.24);
}

body[data-v2-preview-device]:not([data-v2-preview-device="large"]) #v2-settings-preview-frame {
  display: flex;
}

body[data-v2-preview-device]:not([data-v2-preview-device="large"]) #site-preview-root {
  display: none;
}

.v2-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid #eceef2;
  background: #fff;
  flex-shrink: 0;
  box-sizing: border-box;
  min-height: 54px;
}

.v2-settings-header-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.v2-settings-breakpoint-pager {
  display: flex;
  align-items: center;
  gap: 2px;
}

.v2-settings-breakpoint-nav {
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: #6f7788;
  border-radius: 6px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.v2-settings-breakpoint-nav:hover {
  background: #f1f3f7;
  color: #1c1f26;
}

.v2-settings-breakpoint-current {
  min-width: 52px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: #1b1f28;
}

.v2-settings-header h3 {
  margin: 0;
  color: #16181d;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
}

.v2-settings-close {
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: #7f8798;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}

.v2-settings-close:hover {
  background: #f1f3f7;
  color: #1c1f26;
}

.v2-settings-body {
  padding: 12px 16px 16px;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: transparent;
  max-height: min(65vh, calc(100vh - 140px));
}

.v2-settings-tabs {
  position: relative;
  margin: 0 -16px 8px;
  padding: 0;
  border-bottom: 1px solid #eceef2;
  box-sizing: border-box;
  height: 40px;
  flex-shrink: 0;
  overflow: visible;
}

.v2-settings-tabs-scroll {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 16px;
  height: 100%;
  box-sizing: border-box;
  /* Extra right padding keeps the last tab clear of the edge fade */
  padding: 0 48px 0 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* legacy Edge */
}

/* Chrome, Safari, Edge: hide scrollbar, keep touch/trackpad/mouse-wheel scroll */
.v2-settings-tabs-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.v2-settings-tabs::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 28px;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(to left, #ffffff 55%, rgba(255, 255, 255, 0));
}

.v2-settings-tab-link {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  align-self: stretch;
  justify-content: flex-start;
  box-sizing: border-box;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 0;
  color: #727987;
  text-decoration: none;
  padding: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.v2-settings-tab-link:hover {
  color: #2a2f3a;
}

.v2-settings-tab-link.is-active {
  color: #111318;
}

/* Sits on the same line as the nav bottom border */
.v2-settings-tab-link.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: #111318;
  pointer-events: none;
}

.v2-settings-group {
  margin: 0 0 14px;
  border-top: none;
  padding-top: 0;
  border: none;
}

.v2-settings-group:not(.is-tab-active) {
  display: none !important;
}

.v2-settings-group legend {
  display: none;
}

.v2-settings-subgroup {
  margin-bottom: 14px;
}

.v2-settings-subgroup:last-child {
  margin-bottom: 0;
}

.v2-settings-subgroup-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #6b7280;
  margin: 0 0 8px;
}

.v2-settings-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  width: 100%;
  min-width: 0;
}

.v2-settings-row label {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 65%;
  font-size: 12px;
  color: #4e5666;
}

/* Group control + unit so the block sits on the right while inputs stay left-aligned within it. */
.v2-settings-value {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin-left: auto;
  justify-content: flex-start;
  min-width: 0;
}

.v2-settings-value--color {
  gap: 8px;
}

.v2-settings-suffix {
  flex-shrink: 0;
  font-size: 12px;
  color: #2563eb;
}

.v2-settings-suffix--placeholder {
  visibility: hidden;
  user-select: none;
}

.v2-settings-value .v2-settings-hint {
  margin-left: 0;
}

.v2-settings-row input[type="number"],
.v2-settings-row input[type="text"],
.v2-settings-row select {
  padding: 4px 8px;
  font-size: 12px;
  background: #fff;
  color: #181c25;
  border: 1px solid rgba(37, 99, 235, 0.45);
  border-radius: 4px;
}

.v2-settings-row input[type="number"],
.v2-settings-row input[type="text"] {
  flex: 0 0 auto;
  width: 60px;
}

.v2-settings-row--checkbox input[type="checkbox"] {
  width: auto;
  min-width: 1.1rem;
  height: auto;
  margin: 0;
  cursor: pointer;
  accent-color: #2563eb;
}

.v2-settings-row select {
  flex: 0 0 auto;
  width: auto;
  min-width: 7.5rem;
  max-width: min(11rem, 48%);
  box-sizing: border-box;
}

.v2-settings-row input[type="color"] {
  width: 36px;
  height: 28px;
  padding: 2px;
  border: 1px solid rgba(37, 99, 235, 0.45);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}

.v2-settings-row input[type="text"][id$="-hex"] {
  width: 70px;
}

.v2-settings-row input:focus,
.v2-settings-row select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.22);
  outline: none;
}

/* Index column weight controls: clear outer edge */
.v2-settings-row:has([data-var^="--v2-index-col-"]) .v2-settings-value {
  outline: 1px solid rgba(37, 99, 235, 0.55);
  outline-offset: 2px;
  border-radius: 6px;
  padding: 3px 5px;
}

/* Index column toggle checkbox */
.v2-settings-row--col-toggle .v2-settings-value {
  gap: 6px;
}
.v2-col-toggle {
  width: 13px;
  height: 13px;
  margin: 0;
  accent-color: #2563eb;
  cursor: pointer;
  flex-shrink: 0;
}
.v2-settings-row--col-toggle .v2-col-toggle:not(:checked) ~ input[type="number"] {
  opacity: 0.35;
  pointer-events: none;
}
.v2-settings-row--col-toggle .v2-col-toggle:not(:checked) ~ .v2-settings-suffix {
  opacity: 0.35;
}

.v2-index-col-order-hint {
  margin: 0 0 8px;
}

.v2-index-col-order-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 10px;
}

.v2-index-col-item.v2-settings-row {
  margin-bottom: 10px;
}

.v2-index-col-item--dragging {
  opacity: 0.65;
}

.v2-index-col-drag {
  flex: 0 0 auto;
  width: 1.5rem;
  padding: 2px 0;
  margin: 0 2px 0 0;
  border: none;
  background: transparent;
  color: #9ca3af;
  font-size: 14px;
  line-height: 1;
  cursor: grab;
  user-select: none;
}

.v2-index-col-drag:active {
  cursor: grabbing;
}

.v2-index-col-item .v2-index-align-btn {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 0;
  margin: 0 2px 0 0;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  border: 1px solid rgba(37, 99, 235, 0.45);
  border-radius: 4px;
  background: #fff;
  color: #181c25;
  cursor: pointer;
}

.v2-index-col-item .v2-index-align-btn[aria-pressed="true"] {
  background: rgba(37, 99, 235, 0.12);
  border-color: #2563eb;
  color: #1d4ed8;
}

.v2-index-col-item .v2-index-align-btn:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.45);
  outline-offset: 1px;
}

.v2-settings-hint {
  font-size: 11px;
  color: #888;
  margin-left: 4px;
}

.v2-settings-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 12px;
  border-top: 1px solid #eceef2;
  background: #fff;
  flex-shrink: 0;
}

.v2-settings-btn {
  padding: 4px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: #f8fafc;
  color: #1e293b;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.v2-settings-btn:hover {
  background: #e2e8f0;
  border-color: #94a3b8;
}

.v2-settings-save {
  flex: 1;
  padding: 7px 0;
  border: 1px solid #2563eb;
  border-radius: 6px;
  background: #2563eb;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}

.v2-settings-save:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
}

.v2-settings-save:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Disable hover underline site-wide. */
a:hover {
  text-decoration: none !important;
}

/* ========== MOBILE NAV: logo row + primary left / secondary right ========== */
/* Hamburger / close: only on fixed duplicate strip (see v2-masthead-scroll.js). */
.v2-masthead-mobile-menu-btn {
  display: none !important;
}

@media (max-width: 767px) {
  /*
   * Region handles only the safe-area (notch); margin-y lives on the logo <a> element
   * (padding-top: var(--v2-margin-y)) — consistent with tablet/desktop.
   */
  .v2-masthead-region--in-flow {
    padding-top: env(safe-area-inset-top, 0px);
  }

  .v2-masthead-region--fixed-clone {
    padding-top: env(safe-area-inset-top, 0px);
  }

  /* In-flow: .v2-nav-primary-groups padding-bottom (--v2-masthead-gap-above-divider); zero base masthead margin to avoid doubling. */
  .v2-masthead-region--in-flow .v2-masthead {
    margin-bottom: 0;
  }

  /* Fixed clone: nav hidden when collapsed — bottom gap matches in-flow divider spacing. */
  .v2-masthead-region--fixed-clone .v2-masthead {
    margin-bottom: var(--v2-masthead-gap-above-divider);
  }

  .v2-masthead-region--fixed-clone .v2-masthead-top,
  .v2-masthead-region--fixed-clone .v2-project-masthead-top {
    position: relative;
    box-sizing: border-box;
  }

  /*
   * Reserve the right edge for the menu control. Padding alone still leaves a full-width
   * border-box on the logo <a>, so taps on the icon hit the home link — cap width so the
   * hamburger receives clicks.
   */
  .v2-masthead-region--fixed-clone .v2-masthead-top > .v2-masthead-logo,
  .v2-masthead-region--fixed-clone .v2-project-masthead-top > .v2-masthead-logo {
    max-width: calc(100% - 48px);
    padding-right: 0;
    box-sizing: border-box;
  }

  /* Right edge matches secondary column: --v2-margin-x (+ safe area) is on .v2-masthead-region--fixed-clone; use inner edge. */
  .v2-masthead-region--fixed-clone .v2-masthead-mobile-menu-btn {
    display: flex !important;
    position: absolute;
    /* Centre on the logo wordmark (one line box), not the logo link’s bottom padding. */
    top: calc(var(--v2-margin-y) + var(--v2-masthead-one-line-box) / 2);
    right: 0;
    z-index: 20;
    box-sizing: border-box;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
    margin-inline-end: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--v2-color, #000);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    -webkit-tap-highlight-color: transparent;
  }

  .v2-masthead-region--fixed-clone .v2-masthead-mobile-menu-btn:focus,
  .v2-masthead-region--fixed-clone .v2-masthead-mobile-menu-btn:focus-visible {
    outline: none;
  }

  .v2-masthead-menu-btn-icon {
    position: relative;
    display: block;
    width: 22px;
    height: 15px;
  }

  .v2-masthead-menu-btn__line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1.5px;
    border-radius: 0;
    background: currentColor;
    transition:
      transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.2s ease;
  }

  .v2-masthead-menu-btn__line:nth-child(1) {
    top: 0;
  }

  .v2-masthead-menu-btn__line:nth-child(2) {
    top: 6.75px;
  }

  .v2-masthead-menu-btn__line:nth-child(3) {
    top: 13.5px;
  }

  .v2-masthead-region--fixed-clone .v2-masthead-mobile-menu-btn[aria-expanded="true"] .v2-masthead-menu-btn__line:nth-child(1),
  body[data-v2-page="project-page"] .v2-masthead-region--in-flow .v2-project-masthead-top > .v2-masthead-mobile-menu-btn[aria-expanded="true"] .v2-masthead-menu-btn__line:nth-child(1) {
    transform: translateY(6.75px) rotate(45deg);
  }

  .v2-masthead-region--fixed-clone .v2-masthead-mobile-menu-btn[aria-expanded="true"] .v2-masthead-menu-btn__line:nth-child(2),
  body[data-v2-page="project-page"] .v2-masthead-region--in-flow .v2-project-masthead-top > .v2-masthead-mobile-menu-btn[aria-expanded="true"] .v2-masthead-menu-btn__line:nth-child(2) {
    opacity: 0;
  }

  .v2-masthead-region--fixed-clone .v2-masthead-mobile-menu-btn[aria-expanded="true"] .v2-masthead-menu-btn__line:nth-child(3),
  body[data-v2-page="project-page"] .v2-masthead-region--in-flow .v2-project-masthead-top > .v2-masthead-mobile-menu-btn[aria-expanded="true"] .v2-masthead-menu-btn__line:nth-child(3) {
    transform: translateY(-6.75px) rotate(-45deg);
  }

  /*
   * Project page (in-flow): show hamburger beside the logo row; fixed clone still handles scroll.
   * Reserve logo width so taps on the icon do not hit the home link.
   */
  body[data-v2-page="project-page"] .v2-masthead-region--in-flow .v2-project-masthead-top > .v2-masthead-logo {
    max-width: calc(100% - 48px);
    padding-right: 0;
    box-sizing: border-box;
  }

  body[data-v2-page="project-page"] .v2-masthead-region--in-flow .v2-project-masthead-top > .v2-masthead-mobile-menu-btn {
    display: flex !important;
    position: absolute;
    top: calc(var(--v2-margin-y) + var(--v2-masthead-one-line-box) / 2);
    right: 0;
    z-index: 20;
    box-sizing: border-box;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
    margin-inline-end: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--v2-color, #000);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    -webkit-tap-highlight-color: transparent;
  }

  body[data-v2-page="project-page"] .v2-masthead-region--in-flow .v2-project-masthead-top > .v2-masthead-mobile-menu-btn:focus,
  body[data-v2-page="project-page"] .v2-masthead-region--in-flow .v2-project-masthead-top > .v2-masthead-mobile-menu-btn:focus-visible {
    outline: none;
  }

  .v2-masthead-primary-expand {
    overflow: visible;
  }

  .v2-masthead-primary-expand .v2-masthead-top {
    flex-wrap: wrap;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  /*
   * Project page: logo on its own row (full width), then primary nav + project list on the next row.
   * nowrap + logo flex:0 0 100% kept nav and list on the same flex line as the logo, so they sat
   * past the viewport edge and were clipped/invisible. Wrap matches .v2-masthead-top behaviour.
   */
  .v2-masthead-primary-expand .v2-project-masthead-top {
    flex-wrap: wrap;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  .v2-masthead-primary-expand .v2-masthead-top > .v2-masthead-logo,
  .v2-masthead-primary-expand .v2-project-masthead-top > .v2-masthead-logo {
    flex: 0 0 100%;
  }

  /* Full-width nav row only on non-project mastheads (project uses .v2-project-masthead-top). */
  .v2-masthead-primary-expand .v2-masthead-top > .v2-masthead-nav-inline {
    flex: 1 0 100%;
  }

  .v2-masthead-primary-expand .v2-nav-primary-groups {
    padding-bottom: 0;
    width: 100%;
  }

  .v2-masthead-primary-expand .v2-nav-primary-groups .nav-primary.nav-primary--active {
    padding-top: 0;
  }

  .v2-masthead-primary-expand .v2-nav-secondary-col .nav-secondary {
    padding-top: 0;
  }

  /* Fixed scroll strip: compact until expanded (logo + control only; tap opens full nav — v2-masthead-scroll.js). */
  .v2-masthead-region--fixed-clone:not(.v2-masthead-fixed-mobile-expanded) .v2-masthead-top,
  .v2-masthead-region--fixed-clone:not(.v2-masthead-fixed-mobile-expanded) .v2-project-masthead-top {
    max-height: min(28vh, 8rem);
    overflow: hidden;
    transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .v2-masthead-region--fixed-clone.v2-masthead-fixed-mobile-expanded .v2-masthead-top,
  .v2-masthead-region--fixed-clone.v2-masthead-fixed-mobile-expanded .v2-project-masthead-top {
    max-height: min(92vh, 60rem);
    overflow: visible;
    transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Fixed strip collapsed: logo + menu control only (full nav + project list after expand). */
  .v2-masthead-region--fixed-clone:not(.v2-masthead-fixed-mobile-expanded) .v2-masthead-nav-inline,
  .v2-masthead-region--fixed-clone:not(.v2-masthead-fixed-mobile-expanded) .v2-project-masthead-top > .v2-project-info-expand {
    display: none !important;
  }

  /* Expanded: parent overflow:hidden on .v2-masthead-primary-expand would clip the full lists — show everything. */
  .v2-masthead-region--fixed-clone.v2-masthead-fixed-mobile-expanded .v2-masthead-primary-expand,
  .v2-masthead-region--fixed-clone.v2-masthead-fixed-mobile-expanded .v2-project-masthead {
    overflow: visible !important;
  }

  .v2-masthead-region--fixed-clone.v2-masthead-fixed-mobile-expanded .v2-nav-primary-groups .v2-nav-primary-col > .nav-primary {
    display: flex !important;
  }

  .v2-masthead-region--fixed-clone.v2-masthead-fixed-mobile-expanded .v2-nav-primary-groups .nav-secondary .secondary-item {
    display: block !important;
  }

  /* Disable hover-expand height changes */
  .v2-masthead-primary-expand:has(.nav-primary .primary-item:hover) .v2-masthead-top,
  .v2-masthead-primary-expand:has(.nav-primary .primary-item:focus-within) .v2-masthead-top,
  .v2-masthead-primary-expand:has(.nav-primary .primary-item:hover) .v2-project-masthead-top,
  .v2-masthead-primary-expand:has(.nav-primary .primary-item:focus-within) .v2-project-masthead-top {
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  .v2-masthead-region--fixed-clone .v2-masthead-primary-expand {
    overflow: visible;
  }

  .v2-masthead-region--fixed-clone .v2-masthead-primary-expand .v2-masthead-top,
  .v2-masthead-region--fixed-clone .v2-masthead-primary-expand .v2-project-masthead-top {
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  .v2-masthead-primary-expand .v2-nav-primary-inactive-stack > .nav-primary:last-child {
    padding-bottom: 0;
  }

  /*
   * Project page: keep primary nav + project list on one row (like secondary column on other sections).
   * Overrides generic .v2-masthead-nav-inline { flex: 1 0 100% } which stacked the list below the nav.
   */
  .v2-masthead-primary-expand .v2-project-masthead-top > .v2-masthead-nav-inline {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    align-self: flex-start;
  }

  .v2-masthead-primary-expand .v2-project-masthead-top > .v2-project-info-expand {
    flex: 1 1 0%;
    flex-shrink: 1 !important;
    width: 0;
    min-width: 0;
    align-self: flex-start;
    margin-left: 0;
  }

  /* Logo on its own row; top margin stays on the <a> (consistent with tablet/desktop). */

  /* Strip nav active padding so nav text and project list start at the same Y. */
  .v2-masthead-primary-expand .v2-project-masthead-top .nav-primary.nav-primary--active {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Nav + project list share one row: no padding on nav groups; divider gap is on .v2-project-list (inside .v2-project-list-wrap). */
  .v2-project-masthead-top .nav-container .v2-nav-primary-groups {
    padding-bottom: 0;
  }

  /* Break the width:100% / flex:1 chain so the nav column is content-width, not full-width. */
  .v2-project-masthead-top .nav-container {
    flex: 0 1 auto;
    width: auto;
  }

  .v2-project-masthead-top .nav-container .v2-nav-primary-groups {
    width: auto;
    justify-content: flex-start;
  }

  .v2-project-masthead-top .v2-nav-primary-groups .v2-nav-primary-col {
    flex: 0 0 auto;
  }

  /* Align first project line with INDEX; desktop list insets use --v2-margin-y for the one-line strip. */
  .v2-project-masthead .v2-project-list > .v2-project-list-item:first-child {
    padding-top: 0;
  }

  .v2-project-masthead .v2-project-list > .v2-project-list-item:last-child {
    padding-bottom: 0;
  }

  /*
   * Scrollport (.v2-project-list-wrap) clips at the divider; put --v2-masthead-gap-above-divider on the list
   * so the last row stays above the line when scrolled flush, instead of padding the outer masthead row.
   */
  .v2-project-masthead .v2-project-list {
    padding-bottom: var(--v2-masthead-gap-above-divider);
  }

  .v2-project-masthead .v2-project-list-wrap {
    max-height: calc(7 * var(--v2-masthead-one-line-box));
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    min-height: 0;
  }

  .v2-project-masthead .v2-project-list-wrap::-webkit-scrollbar {
    display: none;
  }

  /* Mobile: inactive rows visible at dimmed strength without requiring column hover. */
  .v2-project-masthead .v2-project-list > .v2-project-list-item:not(:first-child) {
    opacity: var(--v2-project-list-inactive-opacity);
  }

  .v2-project-masthead .v2-project-list > .v2-project-list-item:not(:first-child):hover,
  .v2-project-masthead .v2-project-list > .v2-project-list-item:not(:first-child):focus-visible {
    opacity: 1;
  }

  /* ---------- Project page compact masthead: LOGO / PROJECTS + current name + code ---------- */

  /* Hide inactive primary nav items (INDEX, PRACTICE, NEWS) */
  body[data-v2-page="project-page"] .v2-project-masthead .v2-nav-primary-groups .v2-nav-primary-col > .nav-primary:not(.nav-primary--active) {
    display: none !important;
  }

  /* Hide secondary nav column (not needed in compact view) */
  body[data-v2-page="project-page"] .v2-project-masthead .v2-nav-primary-groups .v2-nav-secondary-col {
    display: none !important;
  }

  /* Hide all project list items except the current project */
  body[data-v2-page="project-page"] .v2-project-masthead .v2-project-list-item:not(.v2-project-list-item--current) {
    display: none !important;
  }

  /* No scroll needed — only one item visible */
  body[data-v2-page="project-page"] .v2-project-masthead .v2-project-list-wrap {
    max-height: none !important;
    overflow: visible !important;
  }

  /* Current project at full opacity */
  body[data-v2-page="project-page"] .v2-project-masthead .v2-project-list-item--current {
    opacity: 1 !important;
  }

  /* Active primary at full opacity (no dimming) */
  body[data-v2-page="project-page"] .v2-project-masthead .v2-nav-primary-groups .v2-masthead-primary.active {
    opacity: 1 !important;
  }

  /* --- Expanded (fixed clone or in-flow hamburger): restore full nav --- */

  .v2-masthead-region--fixed-clone.v2-masthead-fixed-mobile-expanded .v2-project-masthead .v2-nav-primary-groups .v2-nav-primary-col > .nav-primary:not(.nav-primary--active),
  .v2-masthead-region--in-flow.v2-masthead-in-flow-mobile-expanded .v2-project-masthead .v2-nav-primary-groups .v2-nav-primary-col > .nav-primary:not(.nav-primary--active) {
    display: flex !important;
  }

  .v2-masthead-region--fixed-clone.v2-masthead-fixed-mobile-expanded .v2-project-masthead .v2-nav-primary-groups .v2-nav-secondary-col,
  .v2-masthead-region--in-flow.v2-masthead-in-flow-mobile-expanded .v2-project-masthead .v2-nav-primary-groups .v2-nav-secondary-col {
    display: flex !important;
  }

  .v2-masthead-region--fixed-clone.v2-masthead-fixed-mobile-expanded .v2-project-masthead .v2-project-list-item:not(.v2-project-list-item--current),
  .v2-masthead-region--in-flow.v2-masthead-in-flow-mobile-expanded .v2-project-masthead .v2-project-list-item:not(.v2-project-list-item--current) {
    display: grid !important;
  }

  .v2-masthead-region--fixed-clone.v2-masthead-fixed-mobile-expanded .v2-project-masthead .v2-project-list-wrap,
  .v2-masthead-region--in-flow.v2-masthead-in-flow-mobile-expanded .v2-project-masthead .v2-project-list-wrap {
    max-height: calc(7 * var(--v2-masthead-one-line-box)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}

/* ========== V2 visualiser overlay ========== */
#v2-columnsHud {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9000;
  pointer-events: none;
  display: none;
}

#v2-columnsHud .v2-columns-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

body.v2-show-columns #v2-columnsHud,
body.v2-show-rows #v2-columnsHud {
  display: block;
}

/* ========== DARK MODE (auto: 00:00–07:00 local time) ========== */

body.v2-dark-mode {
  --v2-color: #ffffff;
  --v2-divider-color: #ffffff;
  --v2-bg: #000000;
  --v2-nav-bg: #000000;
}

body.v2-dark-mode .v2-masthead-divider__fill {
  background: #fff;
}

body.v2-dark-mode .staff-description-expand {
  background: linear-gradient(to left, #000 45%, rgba(0, 0, 0, 0)) !important;
}

body.v2-dark-mode a {
  color: inherit;
}

body.v2-dark-mode img {
  opacity: 0.92;
}