/* ==========================================================================
   Plain Sight Group - design system
   --------------------------------------------------------------------------
   Art direction: an institutional bulletin. The page is set on a twelve
   column editorial grid with varied spans, vertical rules between columns,
   and real metadata (institution, year, category) carrying the small type.
   Density comes from information, never from decoration. Cool limestone and
   institutional navy are taken from the firm's own photography; the brick
   accent is annotation only and never a background field.
   ========================================================================== */

:root {
  /* Surfaces */
  --white: #ffffff;
  --paper: #f7f8f8;
  --stone: #e8ebea;
  --stone-deep: #dde2e1;

  /* Institutional field */
  --navy: #0b2133;
  --navy-mid: #11293d;
  --navy-deep: #081a28;

  /* Text */
  --ink: #15222c;
  --slate: #4e5d68;
  --muted: #586771;
  --on-navy: #c9d3d8;
  --on-navy-quiet: #93a4b0;

  /* Accent, used as annotation */
  --brick: #9c3d2e;
  --brick-deep: #7d3024;
  --brick-bright: #cd7260;

  /* Hairlines, in three weights so rules can carry hierarchy */
  --rule: #ccd3d4;
  --rule-soft: #dee2e2;
  --rule-strong: #a9b5b8;
  --rule-dark: rgba(201, 211, 216, .22);
  --rule-dark-soft: rgba(201, 211, 216, .12);

  /* Measure and rhythm */
  --max: 1320px;
  --gutter: 32px;
  --col-gap: 28px;
  --bar-h: 34px;
  --header-h: 76px;
  --header-h-compact: 58px;

  /* Type. The first two declarations are the approved stack and are
     required by scripts/validate.mjs. --font-display is the editorial voice. */
  --font-body: "Inter", Arial, sans-serif;
  --font-heading: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Source Serif 4", "Source Serif Pro", "Charter", serif;
}

/* --------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h-compact) + 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.62;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; text-align: left; }
strong, b { font-weight: 600; }

:focus-visible { outline: 2px solid var(--brick); outline-offset: 3px; }
.on-dark :focus-visible, .site-footer :focus-visible, .topbar :focus-visible { outline-color: var(--brick-bright); }

.skip-link {
  position: fixed;
  top: -80px;
  left: 16px;
  z-index: 300;
  padding: 12px 18px;
  background: var(--navy);
  color: var(--white);
  font-size: .875rem;
  font-weight: 500;
  transition: top .15s ease;
}
.skip-link:focus { top: 14px; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------ typography -- */

.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -.012em;
  color: var(--ink);
}

/* Balanced only at the two largest sizes, where lines are few and a widow
   is conspicuous. Smaller headings sit in narrow columns, where balancing
   turns two sensible lines into three short ones. */
.d1 { font-size: clamp(2.375rem, 1.5rem + 2.9vw, 3.5rem); line-height: 1.04; letter-spacing: -.02em; text-wrap: balance; }
.d2 { font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem); line-height: 1.1; letter-spacing: -.016em; text-wrap: balance; }
.d3 { font-size: clamp(1.375rem, 1.15rem + .75vw, 1.75rem); line-height: 1.18; }
.d4 { font-size: clamp(1.125rem, 1.02rem + .35vw, 1.3125rem); line-height: 1.26; }

.subhead {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.34;
  letter-spacing: -.004em;
  color: var(--ink);
}
.subhead-sm { font-size: .9375rem; }

.lead { color: var(--slate); font-size: 1.125rem; line-height: 1.58; }
.prose { color: var(--slate); max-width: 68ch; }
.prose p + p { margin-top: 1.05em; }
.measure-sm { max-width: 46ch; }
.measure-md { max-width: 58ch; }

/* Real metadata: institution, year, category. Never a decorative eyebrow. */
.meta {
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .055em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.meta-brick { color: var(--brick-deep); }
/* No separator glyph between items: a long institution name wraps, and a
   divider drawn with a pseudo-element strands at the start of the new line.
   Spacing and the tabular year carry the separation instead. */
.meta-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; }
.on-dark .meta, .band-navy .meta, .site-footer .meta { color: var(--on-navy-quiet); }

.year { font-variant-numeric: tabular-nums; }

/* Provenance, set in the serif italic of a research-report figure note. */
.source {
  font-family: var(--font-display);
  font-style: italic;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--muted);
}
.band-navy .source, .on-dark .source { color: var(--on-navy-quiet); }

/* Section label: a running head, set once per section against a rule. */
.running-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 12px;
  margin-bottom: clamp(26px, 2.6vw, 40px);
  border-bottom: 2px solid var(--ink);
}
.band-navy .running-head, .on-dark .running-head { border-bottom-color: var(--on-navy); }
.running-head .meta { color: var(--brick-deep); }
.band-navy .running-head .meta, .on-dark .running-head .meta { color: var(--brick-bright); }

/* ---------------------------------------------------------------- grid -- */

.wrap { width: min(100% - (var(--gutter) * 2), var(--max)); margin-inline: auto; }

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
}

.c1-3  { grid-column: 1 / 4; }
.c1-4  { grid-column: 1 / 5; }
.c1-5  { grid-column: 1 / 6; }
.c1-6  { grid-column: 1 / 7; }
.c1-7  { grid-column: 1 / 8; }
.c1-8  { grid-column: 1 / 9; }
.c1-9  { grid-column: 1 / 10; }
.c1-10 { grid-column: 1 / 11; }
.c1-11 { grid-column: 1 / 12; }
.c1-12 { grid-column: 1 / -1; }
.c4-12 { grid-column: 4 / -1; }
.c5-7  { grid-column: 5 / 8; }
.c5-12 { grid-column: 5 / -1; }
.c6-9  { grid-column: 6 / 10; }
.c6-12 { grid-column: 6 / -1; }
.c7-9  { grid-column: 7 / 10; }
.c7-12 { grid-column: 7 / -1; }
.c8-10 { grid-column: 8 / 11; }
.c8-12 { grid-column: 8 / -1; }
.c9-12 { grid-column: 9 / -1; }
.c10-12 { grid-column: 10 / -1; }
.c11-12 { grid-column: 11 / -1; }

.self-end { align-self: end; }

/* Vertical rules between columns, the way a broadsheet separates stories. */
.rule-left { border-left: 1px solid var(--rule); padding-left: var(--col-gap); }
.band-navy .rule-left, .on-dark .rule-left { border-left-color: var(--rule-dark); }

.band { padding-block: clamp(52px, 5.2vw, 84px); }
.band-tight { padding-block: clamp(38px, 3.6vw, 56px); }
.band-stone { background: var(--stone); }
.band-paper { background: var(--paper); }
.band-white { background: var(--white); }
.band-navy { background: var(--navy); color: var(--on-navy); }
.band-navy .display, .band-navy .subhead { color: var(--white); }
.band-navy .lead, .band-navy .prose { color: var(--on-navy); }

.stack { display: grid; align-content: start; }
.gap-xs { gap: 8px; }
.gap-sm { gap: 14px; }
.gap-md { gap: 22px; }
.gap-lg { gap: 34px; }

.flow-sm { margin-top: 12px; }
.flow-md { margin-top: 24px; }
.flow-lg { margin-top: clamp(32px, 3.4vw, 52px); }

/* --------------------------------------------------------------- topbar -- */

.topbar {
  background: var(--navy-deep);
  color: var(--on-navy-quiet);
  font-size: .75rem;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.topbar-inner {
  min-height: var(--bar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.topbar-featured {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  color: var(--on-navy);
}
.topbar-featured .meta { color: var(--brick-bright); flex-shrink: 0; }
.topbar-featured span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-featured:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- header -- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.site-header.is-compact { box-shadow: 0 1px 0 var(--rule), 0 10px 24px -20px rgba(11, 33, 51, .5); }

.header-inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  transition: min-height .22s ease;
}
.is-compact .header-inner { min-height: var(--header-h-compact); }

.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand-mark {
  position: relative;
  width: 36px; height: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--navy);
  color: var(--white);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  transition: width .22s ease, height .22s ease;
}
.brand-mark::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--brick);
}
.is-compact .brand-mark { width: 30px; height: 30px; }

.brand-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.brand-name { color: var(--navy); font-size: .9375rem; font-weight: 600; letter-spacing: .085em; line-height: 1; }
.brand-descriptor {
  color: var(--muted);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .015em;
  line-height: 1;
  transition: opacity .2s ease;
}
.is-compact .brand-descriptor { opacity: 0; }

/* ----------------------------------------------------------- navigation -- */

.main-nav { display: flex; align-items: center; gap: 4px; }

/* Deliberately not a positioning context: the mega panel is positioned
   against the sticky header so it spans the full page width. */
.nav-item { display: flex; }

.nav-link,
.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.nav-link:hover, .nav-trigger:hover,
.nav-trigger[aria-expanded="true"] { color: var(--brick-deep); }
.nav-link[aria-current="page"],
.nav-item.is-current .nav-trigger { color: var(--brick-deep); border-bottom-color: var(--brick); }

.nav-caret {
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}
.nav-trigger[aria-expanded="true"] .nav-caret { transform: translateY(1px) rotate(-135deg); }

.nav-cta {
  margin-left: 12px;
  padding: 11px 18px;
  background: var(--navy);
  color: var(--white);
  border: 1px solid var(--navy);
  font-size: .875rem;
  font-weight: 500;
  transition: background .18s ease, border-color .18s ease;
}
.nav-cta:hover, .nav-cta:focus-visible,
.nav-cta[aria-current="page"] { background: var(--brick-deep); border-color: var(--brick-deep); color: var(--white); }

/* Mega panel: a full-width sheet of real destinations, not a link dump. */
.mega {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  z-index: 190;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  border-bottom: 2px solid var(--navy);
  box-shadow: 0 24px 40px -28px rgba(11, 33, 51, .55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.mega.is-open { opacity: 1; visibility: visible; transform: none; }
.mega-inner { padding-block: 34px 38px; }
.mega-col { display: grid; align-content: start; gap: 4px; }
.mega-col + .mega-col { border-left: 1px solid var(--rule); padding-left: var(--col-gap); }

.mega-head { padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--rule-strong); }
.mega-links-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 3vw, 56px); }
.mega-links-2 .mega-link:last-child { border-bottom: 1px solid var(--rule-soft); }

.mega-link {
  display: grid;
  gap: 3px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule-soft);
  transition: padding-left .2s ease;
}
.mega-link:last-child { border-bottom: 0; }
.mega-link:hover { padding-left: 8px; }
.mega-link:hover .subhead-sm { color: var(--brick-deep); }
.mega-link p { color: var(--slate); font-size: .875rem; line-height: 1.45; }

.mega-note { padding: 18px 20px; background: var(--stone); border-left: 3px solid var(--brick); }

.menu-button { display: none; width: 44px; height: 44px; margin-right: -10px; place-items: center; }
.menu-icon { display: block; width: 22px; height: 11px; position: relative; }
.menu-icon::before, .menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%; height: 1.5px;
  background: var(--navy);
  transition: transform .22s ease, top .22s ease;
}
.menu-icon::before { top: 0; }
.menu-icon::after { top: 9.5px; }
[aria-expanded="true"] .menu-icon::before { top: 5px; transform: rotate(45deg); }
[aria-expanded="true"] .menu-icon::after { top: 5px; transform: rotate(-45deg); }

/* --------------------------------------------------------------- actions -- */

.actions { display: flex; align-items: center; gap: 12px 26px; flex-wrap: wrap; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  background: var(--navy);
  color: var(--white);
  border: 1px solid var(--navy);
  font-size: .9375rem;
  font-weight: 500;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover, .btn:focus-visible { background: var(--brick-deep); border-color: var(--brick-deep); color: var(--white); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn-ghost:hover, .btn-ghost:focus-visible { background: var(--navy); border-color: var(--navy); color: var(--white); }

.band-navy .btn, .closing .btn, .page-head .btn, .on-dark .btn {
  background: var(--white); color: var(--navy); border-color: var(--white);
}
.band-navy .btn:hover, .band-navy .btn:focus-visible,
.closing .btn:hover, .closing .btn:focus-visible,
.page-head .btn:hover, .page-head .btn:focus-visible,
.on-dark .btn:hover, .on-dark .btn:focus-visible {
  background: var(--brick-bright); border-color: var(--brick-bright); color: var(--navy-deep);
}

.link {
  display: inline-block;
  color: var(--brick-deep);
  font-size: .9375rem;
  font-weight: 500;
  border-bottom: 1px solid var(--brick);
  padding-bottom: 2px;
  transition: color .15s ease, border-color .15s ease;
}
.link:hover { color: var(--ink); border-bottom-color: var(--ink); }
.band-navy .link, .on-dark .link { color: var(--brick-bright); border-bottom-color: var(--brick-bright); }
.band-navy .link:hover, .on-dark .link:hover { color: var(--white); border-bottom-color: var(--white); }

/* ------------------------------------------------------------- lead page -- */
/* The front page: lead story on the left, research rail on the right,
   divided by a vertical rule. */

.hero { padding-block: clamp(40px, 4.4vw, 72px) clamp(32px, 3.6vw, 56px); }
.hero-grid { align-items: start; }

.lead-story { display: grid; align-content: start; gap: 22px; }
/* No measure cap: the six column track is the measure, and capping it
   narrower forced a stubby first line. */
.lead-story .d1 { max-width: none; }
.lead-story .lead { max-width: 46ch; font-size: 1.1875rem; }

/* The photograph carries the hero. A list of publications in this position
   reads as a sidebar widget and puts old dates in the most valuable space
   on the page; one image and one statement is the composition that works. */
.hero-figure { margin: 0; }
.hero-figure .frame { background: var(--navy); }
.hero-figure img {
  width: 100%;
  height: clamp(340px, 37vw, 560px);
  object-fit: cover;
  /* Anchored right so the Washington Monument stays in frame at every width. */
  object-position: right center;
}

.figure-caption { display: flex; gap: 13px; align-items: baseline; padding-top: 13px; }
.figure-caption::before {
  content: "";
  flex: 0 0 24px;
  height: 1px;
  margin-top: .62em;
  background: var(--brick);
}

/* ------------------------------------------------------- expertise tabs -- */

.selector { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--col-gap); }

.tablist { display: grid; align-content: start; border-top: 1px solid var(--rule); }
.tab {
  position: relative;
  width: 100%;
  display: grid;
  gap: 4px;
  padding: 17px 34px 17px 18px;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  transition: background .18s ease, padding-left .18s ease;
}
.tab::before {
  content: "";
  position: absolute;
  left: 0; top: -1px; bottom: -1px;
  width: 3px;
  background: var(--brick);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .25s cubic-bezier(.2, .7, .3, 1);
}
.tab:hover { background: var(--stone); }
.tab[aria-selected="true"] { background: var(--stone); padding-left: 22px; }
.tab[aria-selected="true"]::before { transform: none; }
.tab[aria-selected="true"] .subhead { color: var(--brick-deep); }
.tab span:last-child { color: var(--slate); font-size: .875rem; line-height: 1.4; }

.tabpanel { display: none; }
.tabpanel.is-active { display: block; }
.tabpanel-body { display: grid; gap: 18px; }

.capabilities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(24px, 3vw, 48px);
  border-top: 1px solid var(--rule-strong);
}
.capabilities li {
  padding-block: 10px;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink);
  font-size: .9375rem;
}

/* ------------------------------------------------------- research record -- */
/* A real table. Three columns that align all the way down the page, with a
   header row and subject bands inside it, so the record can be scanned down
   a column or read across a row. A stack of left-aligned lines, which is
   what this replaced, has no alignment for the eye to follow. */

/* Subject rail: the same selector language as the Advisory Practices
   tablist on the homepage, so choosing a subject here feels like part of
   the site rather than a filter toolbar dropped on top of a table. */
.subject-rail { display: grid; border-top: 1px solid var(--rule); }
.subject-rail a {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px 13px 16px;
  border-bottom: 1px solid var(--rule);
  font-size: .9375rem;
  line-height: 1.35;
  color: var(--ink);
  transition: background .18s ease, padding-left .18s ease, color .15s ease;
}
.subject-rail a::before {
  content: "";
  position: absolute;
  left: 0; top: -1px; bottom: -1px;
  width: 3px;
  background: var(--brick);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .25s cubic-bezier(.2, .7, .3, 1);
}
.subject-rail a:hover { background: var(--stone); }
.subject-rail a.is-selected { background: var(--stone); padding-left: 20px; font-weight: 600; }
.subject-rail a.is-selected::before { transform: none; }
.subject-rail a.is-selected > span:first-child { color: var(--brick-deep); }
.subject-rail .count {
  flex-shrink: 0;
  color: var(--muted);
  font-size: .8125rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.record-table { width: 100%; border-collapse: collapse; text-align: left; }
.record-table tbody[hidden] { display: none; }

.record-table thead th {
  padding: 0 0 10px;
  border-bottom: 2px solid var(--ink);
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .055em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* Subject band: a row spanning the table, introducing the entries below it. */
.record-table tbody th[colspan] {
  padding: clamp(26px, 2.6vw, 38px) 0 10px;
  border-bottom: 1px solid var(--rule-strong);
  font-weight: 400;
}
.group-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.group-head .display { color: var(--ink); }

.record-table td {
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.record-table tbody tr:hover td { border-bottom-color: var(--rule-strong); }

.col-year {
  width: 5.5rem;
  padding-right: 20px;
  font-size: .875rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.col-institution {
  width: 15rem;
  padding-left: clamp(20px, 2.4vw, 36px);
  font-size: .875rem;
  line-height: 1.4;
  color: var(--ink);
}

.record-title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--ink);
  transition: color .15s ease;
}
.record-title:hover { color: var(--brick-deep); }
.record-title .mark { color: var(--brick); font-size: .82em; }
.record-desc { margin-top: 4px; font-size: .875rem; line-height: 1.45; color: var(--slate); }

.record-foot { margin-top: clamp(28px, 3vw, 44px); display: grid; gap: 16px; }

/* ------------------------------------------------------------- registers -- */

.register { border-bottom: 1px solid var(--rule); }
.register-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: 14px var(--col-gap);
  align-items: baseline;
  padding-block: 22px;
  border-top: 1px solid var(--rule);
}
.register-item::after {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 0; height: 2px;
  background: var(--brick);
  transition: width .35s cubic-bezier(.2, .7, .3, 1);
}
a.register-item:hover::after, a.register-item:focus-visible::after { width: 80px; }
a.register-item:hover .subhead, a.register-item:hover .display { color: var(--brick-deep); }
.register-item p { color: var(--slate); font-size: .9375rem; }
.band-navy .register, .band-navy .register-item { border-color: var(--rule-dark); }
.band-navy .register-item p { color: var(--on-navy); }

/* Metadata index: institution and year in the margin. */
.index { border-bottom: 1px solid var(--rule); }
.index-row {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto;
  gap: 10px clamp(24px, 3vw, 44px);
  align-items: baseline;
  padding-block: 20px;
  border-top: 1px solid var(--rule);
}
.index-meta { display: grid; gap: 3px; align-content: start; }
.index-institution { color: var(--ink); font-size: .875rem; font-weight: 600; line-height: 1.32; }
.index-body p { margin-top: 6px; color: var(--slate); font-size: .9375rem; }
.index-action { justify-self: end; white-space: nowrap; }
.band-navy .index, .band-navy .index-row { border-color: var(--rule-dark); }
.band-navy .index-institution { color: var(--white); }
.band-navy .index-body p { color: var(--on-navy); }

/* Columned entries, for parallel items of equal weight. */
.entries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 3.4vw, 56px); border-bottom: 1px solid var(--rule); }
.entries-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.entries-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.entry { padding-block: 20px; border-top: 1px solid var(--rule); }
.entry p { margin-top: 8px; color: var(--slate); font-size: .9375rem; }
.band-navy .entries, .band-navy .entry { border-color: var(--rule-dark); }
.band-navy .entry p { color: var(--on-navy); }

.terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(28px, 3.4vw, 56px); border-bottom: 1px solid var(--rule); }
.terms li { padding-block: 14px; border-top: 1px solid var(--rule); font-size: 1rem; }
.band-navy .terms, .band-navy .terms li { border-color: var(--rule-dark); }

/* ------------------------------------------------------------- statement -- */

.pull {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.05rem + 1.1vw, 1.875rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -.008em;
  color: var(--ink);
}
.band-navy .pull, .on-dark .pull { color: var(--white); }

.note {
  max-width: 88ch;
  padding: 20px 24px;
  background: var(--white);
  border-left: 3px solid var(--brick);
  color: var(--slate);
  font-size: .9375rem;
  line-height: 1.6;
}
.note strong { color: var(--ink); }
.band-stone .note { background: var(--paper); }
.band-navy .note, .on-dark .note {
  background: rgba(255, 255, 255, .055);
  border-left-color: var(--brick-bright);
  color: var(--on-navy);
}
.band-navy .note strong, .on-dark .note strong { color: var(--white); }

/* ------------------------------------------------------------- page head -- */

.page-head { padding-block: clamp(44px, 4.6vw, 72px) clamp(34px, 3.6vw, 54px); background: var(--navy); color: var(--on-navy); }
.page-head .display { color: var(--white); max-width: 30ch; }
.page-head .lead { color: var(--on-navy); margin-top: 18px; }

.crumb { margin-bottom: 24px; font-size: .8125rem; font-weight: 500; color: var(--on-navy-quiet); }
.crumb a { border-bottom: 1px solid transparent; }
.crumb a:hover { border-bottom-color: var(--on-navy-quiet); }
.crumb span { padding-inline: 8px; }

/* -------------------------------------------------------------- practice -- */

.practice {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: 16px clamp(32px, 4vw, 64px);
  align-items: start;
  padding-block: clamp(32px, 3.2vw, 46px);
  border-top: 1px solid var(--rule);
}
.practice:last-child { border-bottom: 1px solid var(--rule); }
.practice h2 { text-wrap: normal; }
.practice-body > p { max-width: 62ch; color: var(--slate); }

/* --------------------------------------------------------------- founder -- */

.portrait-plate img { width: 100%; height: auto; background: var(--stone-deep); }
.portrait-plate figcaption { margin-top: 12px; }

.credentials { border-bottom: 1px solid var(--rule); }
.credential {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 5px 32px;
  padding-block: 14px;
  border-top: 1px solid var(--rule);
}
.credential dt { color: var(--ink); font-size: .9375rem; font-weight: 600; }
.credential dd { color: var(--slate); font-size: .9375rem; }

.affiliations { padding-top: 20px; border-top: 1px solid var(--rule); }

/* --------------------------------------------------------------- closing -- */

.closing { padding-block: clamp(52px, 5.4vw, 86px); background: var(--navy); color: var(--white); }
.band-navy + .closing { border-top: 1px solid var(--rule-dark); }
.closing .display { color: var(--white); }

/* ---------------------------------------------------------------- footer -- */

.site-footer { padding-block: clamp(48px, 5vw, 72px) 24px; background: var(--navy-deep); color: var(--on-navy-quiet); }
.site-footer .brand-name { color: var(--white); }
.site-footer .brand-descriptor { color: var(--on-navy-quiet); }
.site-footer .brand-mark { background: var(--white); color: var(--navy); }

.footer-blurb { max-width: 40ch; margin-top: 18px; color: var(--on-navy); font-size: .9375rem; }

.footer-col { display: grid; align-content: start; gap: 2px; }
.footer-col h2 {
  padding-bottom: 9px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--rule-dark);
  color: var(--white);
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.footer-col a, .footer-col p { padding-block: 5px; color: var(--on-navy); font-size: .875rem; line-height: 1.45; }
.footer-col a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 32px;
  margin-top: clamp(36px, 3.6vw, 54px);
  padding-top: 20px;
  border-top: 1px solid var(--rule-dark);
  font-size: .75rem;
}

/* ------------------------------------------------------------------ 404 --- */

.notfound { padding-block: clamp(60px, 7vw, 110px); }

/* ---------------------------------------------------------------- motion -- */
/* Section entry reveals. Applied only once JavaScript adds .js to <html>,
   so nothing is ever hidden from a reader without scripting. */

.js .reveal { opacity: 0; transform: translateY(8px); }
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .55s cubic-bezier(.2, .7, .3, 1), transform .55s cubic-bezier(.2, .7, .3, 1);
}
.js .reveal.is-in:nth-child(2) { transition-delay: .06s; }
.js .reveal.is-in:nth-child(3) { transition-delay: .12s; }
.js .reveal.is-in:nth-child(4) { transition-delay: .18s; }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .7s cubic-bezier(.2, .7, .3, 1) backwards; }
.rise-1 { animation-delay: .04s; }
.rise-2 { animation-delay: .13s; }
.rise-3 { animation-delay: .22s; }
.rise-4 { animation-delay: .31s; }

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 1180px) {
  :root { --col-gap: 22px; --gutter: 26px; }
  /* No measure cap: the six column track is the measure, and capping it
   narrower forced a stubby first line. */
.lead-story .d1 { max-width: none; }
}

@media (max-width: 1040px) {
  .menu-button { display: grid; }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    z-index: 190;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    padding: 6px var(--gutter) 26px;
    background: var(--paper);
    border-bottom: 2px solid var(--navy);
    box-shadow: 0 20px 34px -24px rgba(11, 33, 51, .55);
  }
  .main-nav.open { display: flex; }
  .nav-item { display: block; }
  .nav-link, .nav-trigger {
    width: 100%;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid var(--rule-soft);
    border-left: 0;
  }
  .nav-link[aria-current="page"], .nav-item.is-current .nav-trigger { border-bottom-color: var(--brick); }

  /* On small screens the mega panel becomes an inline disclosure. */
  .mega {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border-top: 0;
    border-bottom: 1px solid var(--rule-soft);
    background: var(--stone);
    display: none;
  }
  .mega.is-open { display: block; }
  .mega-inner { width: auto; padding: 10px 14px 16px; }
  .mega-inner.grid { display: block; }
  .mega-col + .mega-col { border-left: 0; padding-left: 0; margin-top: 14px; }
  .mega-links-2 { grid-template-columns: 1fr; }
  /* The aside is supporting context, not navigation: drop the whole column
     rather than leaving its heading stranded above a hidden note. */
  .mega-col-aside { display: none; }
  .nav-cta { margin: 18px 0 0; justify-content: center; }

  .selector { grid-template-columns: 1fr; row-gap: 24px; }
  /* A three column table cannot hold its shape on a phone, so each entry
     becomes a block: year, then title and summary, then institution. */
  .record-table, .record-table tbody, .record-table tr, .record-table td, .record-table th { display: block; width: auto; }
  .record-table thead { display: none; }
  .record-table tbody th[colspan] { padding-bottom: 8px; }
  .record-table td { border-bottom: 0; padding: 0; }
  .record-table tbody tr { padding-block: 15px; border-bottom: 1px solid var(--rule); }
  /* The subject row already closes with its own rule; a second one from the
     stacked-row treatment would double it. */
  .record-table tbody tr.group-row { padding-block: 0; border-bottom: 0; }
  .record-table tbody tr:hover td { border-bottom-color: transparent; }
  .col-year { padding-right: 0; font-size: .8125rem; }
  .col-institution { padding-left: 0; margin-top: 5px; font-size: .8125rem; color: var(--muted); }
  .record-title { font-size: 1.0625rem; }
  .entries-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .grid { display: block; }
  .grid > * + * { margin-top: clamp(34px, 5vw, 48px); }
  .mega-inner.grid > * + * { margin-top: 14px; }
  .rule-left { border-left: 0; padding-left: 0; }
  .entries-3, .terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid > * + * { margin-top: 28px; }
}

@media (max-width: 680px) {
  :root { --gutter: 20px; --header-h: 66px; }
  .topbar-featured { display: none; }
  .topbar-inner { justify-content: center; }
  .register-item, .index-row { grid-template-columns: 1fr; gap: 8px; }
  .index-action { justify-self: start; }
  .entries, .entries-3, .entries-4, .terms, .capabilities, .credential, .practice { grid-template-columns: 1fr; }
  .actions .btn { width: 100%; }

  .hero-figure img { height: clamp(240px, 58vw, 340px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------------- print -- */

@media print {
  :root { --gutter: 0px; }
  body { background: #fff; color: #000; font-size: 11pt; line-height: 1.5; }
  .topbar, .site-header, .site-footer, .menu-button, .closing, .skip-link, .nav-cta, .record-side, .mega { display: none !important; }
  .band, .band-tight, .page-head, .lead-block { padding-block: 16pt; background: #fff !important; color: #000 !important; }
  .page-head .display, .band-navy .display, .band-navy .subhead, .closing .display { color: #000 !important; }
  .band-navy .prose, .band-navy .lead, .band-navy .entry p, .band-navy .index-body p { color: #000 !important; }
  .grid { display: block; }
  .rule-left { border-left: 0; padding-left: 0; }
  .tabpanel { display: block !important; }
  .hero-figure, .portrait-plate, .register-item, .index-row, .entry, .practice, .record-item, .featured { break-inside: avoid; }
  .hero-figure img { height: 150pt; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  a[href^="https://"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; word-break: break-all; }
}