/* BEAR: Berkeley Economic Advising and Research
   One stylesheet, no framework.

   Direction (Oct 2026): the original bearecon.com, classed up. The Campanile
   at dusk, the teal "Solutions for:" line, the navy logo, a logo-left
   masthead and a grid of selected projects, set with more air, one modern
   sans (Albert Sans), and the sunset carried into the closing band. */

/* ---------- tokens ---------- */
:root {
  --navy:      #0e335e;   /* the logo's own navy */
  --navy-deep: #0b2846;   /* footer */
  --teal:      #3b777c;   /* the original "Solutions for:" teal, deepened for text */
  --teal-og:   #6e9c9f;   /* the original teal, for rules and marks */
  --text:      #283543;
  --muted:     #5c6976;
  --rule:      #dde3e8;
  --rule-2:    #c9d3dc;
  --mist:      #eef2f6;
  --paper:     #ffffff;
  --dusk-1:    #e6e6ec;   /* sampled from the Campanile sky, top to horizon */
  --dusk-2:    #fde3d3;
  --dusk-3:    #fccdb2;
  --focus:     #1d63b8;

  --sans: "Albert Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --shell: 1280px;
  --gutter: clamp(20px, 4.4vw, 64px);
  --measure: 66ch;
  --band: clamp(4.5rem, 9vw, 8.5rem);
  --radius: 3px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--paper); color: var(--text);
  font-family: var(--sans); font-size: 17.5px; line-height: 1.65; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--teal-og); color: #fff; }

/* ---------- type ---------- */
h1, h2, h3, h4 { font-family: var(--sans); color: var(--navy); margin: 0 0 .5em; }
h1 { font-size: clamp(2.5rem, 5.2vw, 4.7rem); line-height: 1.04; letter-spacing: -.028em; font-weight: 300; }
h2 { font-size: clamp(1.85rem, 3.1vw, 2.8rem); line-height: 1.1; letter-spacing: -.022em; font-weight: 300; }
h3 { font-size: clamp(1.12rem, 1.4vw, 1.3rem); line-height: 1.28; letter-spacing: -.008em; font-weight: 500; }
h4 { font-size: 1rem; font-weight: 600; }
p { margin: 0 0 1.1em; max-width: var(--measure); }
.lede { font-size: clamp(1.1rem, 1.45vw, 1.28rem); line-height: 1.58; max-width: 48ch; color: var(--text); font-weight: 400; }
strong, b { font-weight: 600; }

a { color: var(--teal); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(59,119,124,.4); }
a:hover { color: var(--navy); text-decoration-color: currentColor; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 3px;
}

.eyebrow, .updated, figcaption, .note { font-size: .84rem; line-height: 1.5; color: var(--muted); }
.eyebrow { margin: 0 0 1.2rem; }

/* ---------- layout ---------- */
.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.shell--narrow { max-width: 920px; }
.band { padding-block: var(--band); }
.band--warm, .band--cool { background: var(--mist); }
.rule-top { border-top: 1px solid var(--rule); }
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--navy); color: #fff; padding: .75rem 1.1rem; z-index: 100; }
.skip:focus { left: 1rem; top: 1rem; }

.section-head {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(1.5rem, 5vw, 6rem);
  align-items: end; margin-bottom: clamp(2.4rem, 4.6vw, 4rem);
}
.section-head > * { grid-column: 1; }
.section-head h2 { margin: 0; }
.section-head > p:not(.eyebrow) { grid-column: 2; grid-row: 1 / span 3; align-self: end; margin: 0; color: var(--muted); max-width: 48ch; }
@media (max-width: 860px) {
  .section-head { grid-template-columns: 1fr; row-gap: .9rem; }
  .section-head > p:not(.eyebrow) { grid-column: 1; grid-row: auto; }
}
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 6.5rem); align-items: start; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }

/* ---------- masthead: logo left, navigation right ---------- */
.masthead { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--rule); }
.masthead__inner { display: flex; align-items: stretch; justify-content: space-between; min-height: 88px; gap: 2rem; }
.wordmark { display: flex; align-items: center; line-height: 0; flex: none; }
.wordmark img { width: 214px; height: auto; }
.nav { display: flex; align-items: stretch; gap: clamp(1.2rem, 2.2vw, 2.3rem); }
.nav a {
  display: flex; align-items: center; font-size: .94rem; font-weight: 500; letter-spacing: .005em;
  text-decoration: none; color: var(--text); border-bottom: 2px solid transparent; border-top: 2px solid transparent;
}
.nav a:hover { color: var(--navy); }
.nav a[aria-current="page"] { color: var(--navy); border-bottom-color: var(--teal-og); }
.nav a.nav__cta {
  align-self: center; border: 1px solid var(--navy); border-radius: var(--radius); padding: .62rem 1.05rem; color: var(--navy);
}
.nav a.nav__cta:hover, .nav a.nav__cta[aria-current="page"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.nav-toggle {
  display: none; align-self: center; background: none; border: 1px solid var(--rule-2); border-radius: var(--radius); padding: .45rem .8rem;
  font: inherit; font-size: .9rem; font-weight: 500; color: var(--navy); cursor: pointer;
}
@media (max-width: 1100px) {
  .masthead__inner { min-height: 68px; }
  .wordmark img { width: 168px; }
  .nav-toggle { display: block; }
  .nav { display: none; }
  .nav.is-open {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0; position: fixed; top: 69px; left: 0; right: 0; bottom: 0;
    background: #fff; padding: 1.6rem var(--gutter) 3rem; overflow-y: auto; z-index: 60;
  }
  .nav.is-open a { font-size: 1.6rem; font-weight: 300; color: var(--navy); padding: .55rem 0; border: 0; }
  .nav.is-open a[aria-current="page"] { color: var(--teal); }
  .nav.is-open a.nav__cta { margin-top: 1.2rem; font-size: 1.05rem; font-weight: 500; padding: .8rem 1.2rem; border: 1px solid var(--navy); }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block; font-family: var(--sans); font-size: .95rem; font-weight: 500; letter-spacing: .01em;
  text-decoration: none; padding: .95rem 1.55rem; border: 1px solid var(--navy); border-radius: var(--radius);
  background: var(--navy); color: #fff; line-height: 1.2; transition: background-color .2s, color .2s, border-color .2s;
}
.btn:hover { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn--ghost { background: transparent; color: var(--navy); }
.btn--ghost:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn--sm { padding: .7rem 1.1rem; font-size: .9rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: center; margin-top: 2.2rem; }
.more { font-size: .98rem; }

/* ---------- home hero: the Campanile at dusk ---------- */
.hero-photo { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--dusk-1), var(--dusk-2) 55%, var(--dusk-3)); }
.hero-photo__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 26% 100%;
}
.hero-photo__inner { position: relative; display: flex; align-items: center; justify-content: flex-end; min-height: clamp(440px, 44vw, 700px); padding-block: 3rem 4.6rem; }
.solutions { width: min(56%, 700px); }
.solutions__lead {
  margin: 0 0 .1em; color: var(--teal); font-weight: 300; letter-spacing: -.025em; line-height: 1.05;
  font-size: clamp(2.4rem, 4.8vw, 4.6rem); max-width: none;
}
.solutions__rot {
  position: relative; display: grid; margin: 0; max-width: none; color: var(--navy); font-weight: 400;
  font-size: clamp(1.5rem, 2.75vw, 2.6rem); line-height: 1.14; letter-spacing: -.02em;
}
.solutions__rot span {
  grid-area: 1 / 1; opacity: 0; transform: translateY(.35em);
  transition: opacity .45s ease, transform .45s ease;
}
.solutions__rot span.is-on { opacity: 1; transform: none; transition: opacity 1s ease .35s, transform 1.2s cubic-bezier(.2,.7,.2,1) .35s; }
.solutions__ctrl { display: flex; align-items: center; gap: 1.1rem; margin-top: 2.1rem; }
.solutions__ticks { display: flex; gap: 6px; }
.solutions__ticks i { display: block; width: 26px; height: 2px; background: rgba(14,51,94,.22); transition: background-color .6s; }
.solutions__ticks i.is-on { background: var(--navy); }
@media (prefers-reduced-motion: reduce) { .solutions__rot span { transition: none; transform: none; } }
@media (max-width: 760px) {
  .hero-photo { background: #fff; }
  .hero-photo__img { position: static; height: auto; aspect-ratio: 16 / 9; object-position: 24% 100%; }
  .hero-photo__inner { display: block; min-height: 0; padding-block: 2rem 0; }
  .solutions { width: auto; }
}

/* intro under the photograph */
.intro { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); padding-block: clamp(3.6rem, 8vw, 7rem) clamp(2.8rem, 6vw, 5rem); align-items: start; }
.intro h1 { max-width: 17ch; margin: 0; font-size: clamp(2.4rem, 4.4vw, 4rem); }
.intro .lede { margin: .4rem 0 0; }
@media (max-width: 900px) { .intro { grid-template-columns: 1fr; } }
.hero__meta { margin-top: 2.2rem; font-size: .84rem; color: var(--muted); max-width: 52ch; }

/* ---------- inner page heads ----------
   No single banner repeats across the site. The default head is a light
   blue-grey band that carries the page's own picture (a figure from the work,
   the team, the capability statement). A few pages get their own treatment:
   Practice opens at night over California's census tracts, the Model page in
   deep teal over Los Angeles County's tracts (Census Bureau 2023 cartographic
   boundaries), Contact on the Berkeley evening. The band is a pseudo-element
   running edge to edge behind the section, which keeps its .shell width. */
main { overflow-x: clip; }
.hero {
  position: relative; isolation: isolate;
  padding-block: clamp(3.2rem, 6.6vw, 5.8rem) clamp(3.2rem, 6.4vw, 5.6rem);
}
.hero::before, .hero::after {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0;
  left: calc(50% - 50vw); right: calc(50% - 50vw); pointer-events: none;
}
.hero::before { background: linear-gradient(180deg, #dde6ef 0%, #e9eef4 70%, #edf1f5 100%); }
.hero h1 { max-width: 16ch; font-size: clamp(2.3rem, 4.3vw, 4rem); }
.hero .lede { margin-top: 1.7rem; }
.hero--inner h1 { max-width: 20ch; }
.hero--split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
.hero--split h1 { max-width: 17ch; font-size: clamp(2.1rem, 3.7vw, 3.5rem); }
.hero--split .hero__text { min-width: 0; }
.hero__figure { margin: 0; min-width: 0; }
.hero__figure img { width: 100%; height: auto; border-radius: var(--radius); }
.hero__figure--ground {
  background: #fff; padding: clamp(1.2rem, 3vw, 2.4rem) clamp(1.2rem, 3vw, 2.4rem) clamp(1rem, 2.2vw, 1.8rem); border-radius: 4px;
  box-shadow: 0 28px 56px -34px rgba(14,51,94,.5), 0 0 0 1px rgba(14,51,94,.06);
}
.hero__figure--ground img { mix-blend-mode: multiply; }
.hero__figure--photo img { aspect-ratio: 4 / 3; object-fit: cover; box-shadow: 0 28px 56px -34px rgba(14,51,94,.55); border-radius: 4px; }
.hero__figure--num { display: grid; place-items: center; text-align: center; aspect-ratio: 4 / 3; border-radius: 4px; background: linear-gradient(180deg, #f6f3f2, var(--dusk-2)); box-shadow: 0 28px 56px -34px rgba(14,51,94,.45); padding: 2rem; }
.hero__figure--num b { display: block; font-size: clamp(3.4rem, 6vw, 5.4rem); line-height: .95; letter-spacing: -.035em; font-weight: 300; color: var(--navy); }
.hero__figure--num small { display: block; color: var(--muted); margin: 1rem auto 0; font-size: .86rem; line-height: 1.45; max-width: 26ch; }
.hero__figure figcaption { margin-top: 1rem; max-width: 46ch; color: var(--muted); }
@media (max-width: 960px) { .hero--split { grid-template-columns: 1fr; } .hero__figure { max-width: 640px; } }

/* the capability statement, shown as the page it is */
.hero__doc { margin: 0; justify-self: center; width: min(100%, 360px); }
.hero__doc a { display: block; text-decoration: none; }
.hero__doc img { width: 100%; height: auto; border-radius: 2px; box-shadow: 0 34px 60px -30px rgba(14,51,94,.55), 0 0 0 1px rgba(14,51,94,.08); transition: transform .3s ease; }
.hero__doc a:hover img { transform: translateY(-4px); }
.hero__doc figcaption { margin-top: 1rem; text-align: center; }

/* project write-ups without a figure: the public document itself */
.hero__report { margin: 0; justify-self: end; width: min(100%, 420px); }
.hero__report a {
  display: flex; flex-direction: column; aspect-ratio: 8.5 / 10; padding: clamp(1.6rem, 3vw, 2.4rem); text-decoration: none;
  background: #fff; border-top: 6px solid var(--navy); border-radius: 2px 2px 4px 4px;
  box-shadow: 0 34px 60px -32px rgba(14,51,94,.55), 0 0 0 1px rgba(14,51,94,.07); transition: transform .3s ease;
}
.hero__report a:hover { transform: translateY(-4px); }
.hero__report-client { font-size: .84rem; line-height: 1.4; color: var(--teal); margin-bottom: 1.4rem; }
.hero__report-title { font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.22; letter-spacing: -.015em; font-weight: 300; color: var(--navy); }
.hero__report-note { margin-top: .9rem; font-size: .84rem; color: var(--muted); }
.hero__report-open { margin-top: auto; padding-top: 1.2rem; border-top: 1px solid var(--rule); font-size: .9rem; font-weight: 500; color: var(--teal); }
.hero__report a:hover .hero__report-open { color: var(--navy); }
@media (max-width: 960px) { .hero__report { justify-self: start; } .hero__report a { aspect-ratio: auto; min-height: 280px; } }

/* the team, by face */
.hero__faces { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.hero__faces li { grid-column: span 2; }
.hero__faces li:nth-child(4) { grid-column: 2 / span 2; }
.hero__faces a { display: block; text-decoration: none; color: var(--navy); font-size: .82rem; line-height: 1.3; }
.hero__faces img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: 4px; background: #fff; box-shadow: 0 20px 40px -28px rgba(14,51,94,.6); margin-bottom: .55rem; }
.hero__faces a:hover { color: var(--teal); }

/* dark heads: Practice (night) and the Model (teal) */
.hero--dark { color: #c9d6e3; }
.hero--dark h1 { color: #fff; }
.hero--dark p, .hero--dark .lede { color: #c9d6e3; }
.hero--dark .crumbs { color: #9fb2c6; }
.hero--dark .crumbs a, .hero--dark a:not(.btn) { color: var(--dusk-2); text-decoration-color: rgba(253,227,211,.4); }
.hero--dark a:not(.btn):hover { color: #fff; }
.hero--dark .crumbs span[aria-hidden] { color: rgba(255,255,255,.3); }
.hero--dark .btn { background: #fff; border-color: #fff; color: var(--navy); }
.hero--dark .btn:hover { background: var(--dusk-2); border-color: var(--dusk-2); color: var(--navy); }
.hero--dark .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.hero--dark .btn--ghost:hover { background: #fff; border-color: #fff; color: var(--navy); }
.hero--dark::after { -webkit-mask-image: linear-gradient(90deg, transparent 38%, #000 66%); mask-image: linear-gradient(90deg, transparent 38%, #000 66%); }

.hero--night::before {
  background:
    radial-gradient(64% 115% at 82% 122%, rgba(252,205,178,.55) 0%, rgba(253,227,211,.2) 36%, rgba(14,51,94,0) 66%),
    radial-gradient(48% 70% at 98% 100%, rgba(230,230,236,.12), rgba(14,51,94,0) 70%),
    linear-gradient(180deg, #0a2440 0%, var(--navy) 62%, #173f6c 100%);
}
.hero--night::after { background: url(img/ca-tracts.webp) no-repeat right max(-4vw, calc(50vw - 760px)) top 42% / auto 138%; opacity: .24; }

.hero--teal::before {
  background:
    radial-gradient(55% 90% at 90% 0%, rgba(160,205,208,.22), rgba(20,62,68,0) 70%),
    linear-gradient(160deg, #0f3338 0%, #17464c 55%, #215a60 100%);
}
.hero--teal::after { background: url(img/la-tracts.webp) no-repeat right max(-2vw, calc(50vw - 700px)) center / auto 118%; opacity: .2; }

@media (max-width: 760px) {
  .hero--dark::after { background-position: right -38vw top 30%; background-size: auto 150%; opacity: .14; -webkit-mask-image: none; mask-image: none; }
}

/* Contact: the Berkeley evening, tower out of frame */
.hero--photo { min-height: clamp(380px, 38vw, 560px); display: flex; flex-direction: column; justify-content: center; }
.hero--photo::before {
  background:
    linear-gradient(90deg, rgba(240,238,243,.86) 0%, rgba(240,238,243,.55) 42%, rgba(240,238,243,0) 70%),
    url(img/campanile-dusk-2400.jpg) no-repeat right bottom / cover;
}
@media (min-width: 761px) { .hero--photo::before { background-size: auto, max(170vw, 1500px) auto; } }
.hero--photo h1 { max-width: 14ch; }
.hero--photo .lede { max-width: 42ch; }

.crumbs { font-size: .86rem; color: var(--muted); margin: 0 0 1.8rem; max-width: none; }
.crumbs a { color: var(--teal); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span[aria-hidden] { margin: 0 .55rem; color: var(--rule-2); }

/* ---------- statement ---------- */
.statement-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 6vw, 6rem); padding-block: clamp(3rem, 7vw, 6rem); border-top: 1px solid var(--rule); }
.statement-wrap .statement { grid-column: 2; }
@media (max-width: 860px) { .statement-wrap { grid-template-columns: 1fr; } .statement-wrap .statement { grid-column: 1; } }
.statement { font-size: clamp(1.45rem, 2.5vw, 2.2rem); line-height: 1.3; letter-spacing: -.018em; font-weight: 300; color: var(--navy); max-width: 34ch; margin: 0; }
.statement a { color: var(--teal); text-decoration-color: rgba(59,119,124,.35); text-underline-offset: 6px; }

/* figure rows */
.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule-2); }
.figure { padding: 1.6rem 1.4rem 1.6rem 0; }
.figure + .figure { padding-left: 1.4rem; border-left: 1px solid var(--rule); }
.figure__n { display: block; font-size: clamp(2.2rem, 3.8vw, 3.3rem); line-height: 1; letter-spacing: -.03em; font-weight: 300; color: var(--teal); }
.figure__l { display: block; font-size: .85rem; color: var(--muted); margin-top: .75rem; max-width: 24ch; }
@media (max-width: 860px) { .figures { grid-template-columns: 1fr 1fr; } .figure:nth-child(3) { padding-left: 0; border-left: 0; } }

/* ---------- selected projects (after the original home page) ---------- */
.tabs { list-style: none; margin: 0 0 2.4rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 0; align-items: center; }
.tabs li { display: flex; align-items: center; }
.tabs li + li::before { content: "/"; color: var(--rule-2); margin: 0 .85rem; }
.tabs button {
  background: none; border: 0; padding: .3rem 0; font: inherit; font-size: .96rem; color: var(--muted); cursor: pointer;
  border-bottom: 1px solid transparent;
}
.tabs button:hover { color: var(--navy); }
.tabs button.is-on { color: var(--teal); border-bottom-color: var(--teal-og); }
.selected .card[hidden] { display: none; }
@media (max-width: 620px) {
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); white-space: nowrap; }
  .tabs::-webkit-scrollbar { display: none; }
}

/* ---------- project cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 2.2vw, 2rem); }
.cards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 960px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .cards, .cards--two { grid-template-columns: 1fr; } }
.card { display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; transition: border-color .25s, box-shadow .25s; }
.card:hover { border-color: var(--rule-2); box-shadow: 0 14px 34px -22px rgba(14,51,94,.35); }
.card__ground { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 11; background: #fff; border-bottom: 1px solid var(--rule); padding: 7%; text-decoration: none; overflow: hidden; }
.card__ground img { width: 100%; height: 100%; object-fit: contain; }
.card__ground--photo { padding: 0; }
.card__ground--photo img { object-fit: cover; }
.card__ground--num { background: linear-gradient(180deg, #f6f3f2, var(--dusk-2)); }
.card__ground--num span { display: block; text-align: center; }
.card__ground b { display: block; font-size: clamp(2.8rem, 4.6vw, 4.2rem); line-height: .95; letter-spacing: -.035em; font-weight: 300; color: var(--navy); }
.card__ground small { display: block; color: var(--muted); margin: .9rem auto 0; font-size: .8rem; line-height: 1.4; max-width: 22ch; }
.card__body { display: flex; flex-direction: column; flex: 1; padding: 1.3rem 1.45rem 1.4rem; }
.card__tag { font-size: .84rem; font-style: italic; color: var(--muted); margin: 0 0 .35rem; }
.card h3 { margin: 0 0 .55rem; font-size: 1.08rem; line-height: 1.32; }
.card h3 a { color: var(--navy); text-decoration: none; }
.card h3 a:hover { color: var(--teal); }
.card__body > p:not(.card__tag):not(.card__links) { margin: 0; font-size: .93rem; line-height: 1.55; color: var(--muted); }
.card__links { margin: auto 0 0; padding-top: 1.1rem; display: flex; flex-wrap: wrap; gap: .3rem 1.3rem; font-size: .9rem; }
.card__links a { text-decoration: none; font-weight: 500; }
.card__links a:hover { text-decoration: underline; }
.cards--text article { border-top: 2px solid var(--teal-og); padding-top: 1.2rem; }
.cards--text h3 { font-size: 1.22rem; margin-bottom: .6rem; }
.cards--text p { color: var(--muted); }

/* practice page: one card per line, each with a figure from its own work */
.band--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.card--lane h3 { font-size: clamp(1.2rem, 1.6vw, 1.38rem); font-weight: 400; letter-spacing: -.012em; margin-bottom: .6rem; }
.card--lane .card__body > p.lane__q { color: var(--navy); font-size: .98rem; line-height: 1.5; margin: 0 0 .6rem; }
.card--lane .card__links { padding-top: 1.2rem; }
.card--lane .card__links .updated { font-size: .8rem; line-height: 1.45; padding-top: .9rem; border-top: 1px solid var(--rule); width: 100%; }
.card--lane:hover h3 a { color: var(--teal); }

.lanes-more { max-width: 68ch; margin: clamp(2.2rem, 4vw, 3rem) 0 0; padding-top: 1.6rem; border-top: 1px solid var(--rule-2); font-size: 1.04rem; color: var(--text); }

/* ---------- practice lines ---------- */
.lanes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(1.4rem, 3vw, 3rem); }
@media (max-width: 960px) { .lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .lanes { grid-template-columns: 1fr; } }
.lanes li { display: flex; }
.lane { display: flex; flex-direction: column; width: 100%; padding: 1.6rem 0 2.2rem; border-top: 1px solid var(--rule-2); color: var(--text); text-decoration: none; }
.lane__n { font-size: .84rem; color: var(--teal); margin-bottom: .9rem; font-variant-numeric: tabular-nums; }
.lane h3 { margin: 0 0 .7rem; font-size: clamp(1.35rem, 2vw, 1.7rem); font-weight: 300; letter-spacing: -.018em; line-height: 1.15; }
.lane:hover h3 { color: var(--teal); }
.lane__q { margin: 0 0 .55rem; font-size: .98rem; color: var(--text); }
.lane .updated { margin: 0 0 1.1rem; }
.lane .more { margin-top: auto; font-size: .9rem; font-weight: 500; color: var(--teal); }

/* ---------- project page ---------- */
.proj-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: clamp(2.4rem, 6vw, 6.5rem); align-items: start; }
@media (max-width: 1000px) { .proj-layout { grid-template-columns: 1fr; } }
.proj-main { max-width: 760px; min-width: 0; }
.proj-main h2 { font-size: 1.42rem; font-weight: 400; letter-spacing: -.012em; margin: 3.4rem 0 1rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); }
.proj-main h2:first-child { margin-top: 0; }
.proj-main > p { font-size: 1.04rem; }
.proj-aside { position: sticky; top: 116px; background: var(--mist); border-radius: var(--radius); padding: 1.5rem 1.5rem 1.7rem; }
@media (max-width: 1000px) { .proj-aside { position: static; order: -1; } }
.aside-lanes { margin: 0; font-size: .92rem; }
.aside-lanes span { display: block; font-size: .8rem; color: var(--muted); margin-bottom: .2rem; }
.factsheet { margin: 1.3rem 0 0; border-top: 1px solid var(--rule-2); }
.factsheet div { display: grid; grid-template-columns: 6.8rem minmax(0, 1fr); gap: .9rem; padding: .75rem 0; border-bottom: 1px solid var(--rule); }
.factsheet dt { font-size: .8rem; color: var(--muted); }
.factsheet dd { margin: 0; font-size: .88rem; line-height: 1.45; }
.headline { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1.8rem 2.4rem; margin: .4rem 0 2.6rem; padding: 1.6rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.headline b { display: block; font-size: clamp(2.4rem, 4.4vw, 3.8rem); line-height: .95; letter-spacing: -.035em; font-weight: 300; color: var(--teal); }
.headline span { display: block; font-size: .85rem; color: var(--muted); margin-top: .7rem; max-width: 24ch; }
.work-fig { margin: 2.8rem 0; }
.work-fig img { width: 100%; height: auto; }
.work-fig--ground { background: var(--mist); padding: clamp(1.1rem, 3.4vw, 2.8rem); border-radius: var(--radius); }
.work-fig--ground img { mix-blend-mode: multiply; }
.work-fig--narrow img { max-width: 560px; margin-inline: auto; }
.work-fig figcaption { margin-top: .9rem; max-width: 62ch; }
.cite { font-size: .9rem; line-height: 1.6; max-width: none; margin: 0; padding-left: 1.1rem; border-left: 2px solid var(--teal-og); }
.record-links { list-style: none; margin: 0; padding: 0; }
.record-links li { padding: .85rem 0; border-bottom: 1px solid var(--rule); }
.record-links li:first-child { padding-top: 0; }
.record-links small { display: block; color: var(--muted); font-size: .82rem; margin-top: .2rem; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 720px; }
table.data caption { text-align: left; font-size: .85rem; color: var(--muted); padding-bottom: 1.4rem; line-height: 1.5; max-width: 80ch; }
table.data th, table.data td { text-align: left; padding: 1rem 1.4rem 1rem 0; vertical-align: top; border-bottom: 1px solid var(--rule); }
table.data thead th { font-size: .82rem; color: var(--muted); font-weight: 500; border-bottom: 1px solid var(--rule-2); padding-bottom: .75rem; white-space: nowrap; }
table.data td:first-child { white-space: nowrap; color: var(--navy); }
table.data .yr { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--muted); }
.pill { display: inline-block; font-size: .8rem; color: var(--muted); white-space: nowrap; border: 1px solid var(--rule-2); border-radius: 99px; padding: .1rem .6rem; }
.pill--llc { color: var(--teal); border-color: var(--teal-og); }
.scroll-hint { font-size: .8rem; color: var(--muted); }
@media (min-width: 780px) { .scroll-hint { display: none; } }
.table-note { max-width: 70ch; margin: 2rem 0 0; font-size: .95rem; color: var(--muted); }
.table-note strong { color: var(--navy); font-weight: 500; }

/* ---------- process, FAQ, lineage ---------- */
.stages { list-style: none; margin: 0; padding: 0; counter-reset: stage; border-top: 1px solid var(--rule-2); }
.stage { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 1.4rem; padding: 1.6rem 0; border-bottom: 1px solid var(--rule); }
.stage::before { counter-increment: stage; content: counter(stage); font-size: .9rem; color: var(--teal); padding-top: .2rem; }
.stage > div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 2rem; }
.stage h3 { margin: 0; }
.stage p { margin: 0; color: var(--muted); }
@media (max-width: 760px) { .stage > div { grid-template-columns: 1fr; gap: .4rem; } }

.faq { border-top: 1px solid var(--rule-2); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; padding: 1.25rem 2.4rem 1.25rem 0; position: relative; font-size: 1.08rem; font-weight: 500; color: var(--navy); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .1rem; top: 1rem; font-weight: 300; font-size: 1.5rem; color: var(--teal); }
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding: 0 0 1.4rem; color: var(--muted); }
.faq details p { margin-bottom: .8rem; }

.lineage { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-2); }
.lineage li { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1.6rem; padding: 1.25rem 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.lineage b { font-weight: 300; font-size: 1.8rem; line-height: 1; letter-spacing: -.03em; color: var(--teal); }
.lineage span { max-width: 62ch; }
@media (max-width: 640px) { .lineage li { grid-template-columns: 1fr; gap: .35rem; } }

.kicker-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-2); }
.kicker-list li { padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.kicker-list b { font-weight: 600; color: var(--navy); }

.callout { margin: 2.4rem 0; font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.3; letter-spacing: -.015em; font-weight: 300; color: var(--navy); }
.callout p { max-width: 30ch; margin: 0; }

/* ---------- documents, news ---------- */
.docs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-2); }
.docs li { border-bottom: 1px solid var(--rule); }
.docs a { display: flex; justify-content: space-between; align-items: baseline; gap: 2rem; padding: 1.05rem 0; text-decoration: none; color: var(--navy); }
.docs a:hover .docs__name { color: var(--teal); text-decoration: underline; text-underline-offset: 4px; }
.docs__project { display: block; font-size: .84rem; color: var(--muted); margin-top: .2rem; }
.docs__meta { font-size: .78rem; color: var(--muted); white-space: nowrap; letter-spacing: .06em; }

.news { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-2); }
.news li { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 2rem; padding: 1.5rem 0; border-bottom: 1px solid var(--rule); }
.news time { font-size: .86rem; color: var(--teal); padding-top: .15rem; }
.news h3 { font-size: 1.15rem; margin: 0 0 .35rem; }
.news h3 a { color: var(--navy); text-decoration: none; }
.news h3 a:hover { color: var(--teal); text-decoration: underline; }
.news p { margin: 0; font-size: .93rem; color: var(--muted); }
.news .outlet { font-size: .84rem; font-style: italic; margin: 0 0 .25rem; }
@media (max-width: 600px) { .news li { grid-template-columns: 1fr; gap: .3rem; } }

/* ---------- people ---------- */
.people { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-2); }
.person { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(1.6rem, 5vw, 4.5rem); padding: 2.8rem 0; border-bottom: 1px solid var(--rule); }
.person > img { width: 240px; height: 300px; object-fit: cover; object-position: 50% 28%; background: var(--mist); border-radius: var(--radius); }
.person h3 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); font-weight: 300; letter-spacing: -.022em; margin-bottom: .3rem; }
.person__role { font-size: .9rem; color: var(--teal); margin: 0 0 1.4rem; }
.person__meta { font-size: .86rem; color: var(--muted); margin: 0; }
@media (max-width: 700px) { .person { grid-template-columns: 1fr; } .person > img { width: 200px; height: 250px; } }

/* ---------- facts, download ---------- */
.facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0 2.6rem; margin: 0; border-top: 1px solid var(--rule-2); }
.facts-grid div { padding: 1.2rem 0; border-bottom: 1px solid var(--rule); }
.facts-grid dt { font-size: .82rem; color: var(--muted); margin-bottom: .3rem; }
.facts-grid dd { margin: 0; font-size: 1.04rem; line-height: 1.45; color: var(--navy); }
.facts-grid dd small { display: block; color: var(--muted); font-size: .82rem; margin-top: .25rem; }

.download { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.5rem; align-items: center; background: var(--mist); border-radius: var(--radius); padding: 1.2rem 1.4rem; max-width: 46rem; }
.download__icon { width: 40px; height: 52px; border: 1px solid var(--navy); border-radius: 2px; background: #fff; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; font-size: .58rem; letter-spacing: .1em; color: var(--navy); }
.download h3 { margin: 0 0 .15rem; font-size: 1.05rem; }
.download p { margin: 0; font-size: .86rem; color: var(--muted); }
@media (max-width: 560px) { .download { grid-template-columns: 1fr; } }

/* ---------- clients ---------- */
.clients { columns: 3 15rem; column-gap: 3rem; list-style: none; margin: 0; padding: 0; }
.clients li { break-inside: avoid; padding: .8rem 0; border-top: 1px solid var(--rule); font-size: 1rem; color: var(--navy); }
.clients li small { color: var(--muted); margin-left: .5rem; font-size: .8rem; }

/* ---------- full index filters and rows ---------- */
.filters { margin-bottom: 2.6rem; background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.6rem 1.6rem 1.4rem; }
.filters label { display: block; font-size: .82rem; color: var(--muted); margin-bottom: .3rem; }
.filters input[type="search"], .filters select {
  font: inherit; font-size: 1rem; width: 100%; padding: .65rem 0; border: 0; border-bottom: 1px solid var(--rule-2);
  border-radius: 0; background: transparent; color: var(--navy); -webkit-appearance: none; appearance: none;
}
.filters input[type="search"]:focus, .filters select:focus { border-bottom-color: var(--teal); }
.filters select { background-image: linear-gradient(45deg, transparent 50%, #3b777c 50%), linear-gradient(135deg, #3b777c 50%, transparent 50%); background-position: calc(100% - 9px) 55%, calc(100% - 4px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 1.4rem; }
.filters input[type="search"] { font-size: 1.4rem; font-weight: 300; }
.filters__search { margin-bottom: 1.4rem; max-width: 42rem; }
.filters__row { display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: end; }
.filters__row .field { flex: 1 1 12rem; min-width: 0; }
.result-count { font-size: .84rem; color: var(--muted); margin: 0 0 .6rem; }
.proj-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-2); }
.proj { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: .4rem 3rem; padding: 1.5rem 0; border-bottom: 1px solid var(--rule); }
.proj > * { grid-column: 2; }
.proj__tags { grid-column: 1; grid-row: 1 / span 4; display: flex; flex-wrap: wrap; gap: .3rem .5rem; align-content: start; }
.proj__title { margin: 0; font-size: 1.08rem; }
.proj__title a { color: var(--navy); text-decoration: none; }
.proj__title a:hover { color: var(--teal); text-decoration: underline; }
.proj__meta { font-size: .86rem; font-style: italic; color: var(--muted); margin: 0; }
.proj__summary { margin: .3rem 0 0; font-size: .95rem; max-width: 70ch; }
.proj__flag { margin: .3rem 0 0; font-size: .88rem; color: #8b96a1; }
.proj__pdfs { margin: .45rem 0 0; font-size: .9rem; }
.tag { font-size: .78rem; color: var(--muted); border: 1px solid var(--rule); border-radius: 99px; padding: .08rem .6rem; white-space: nowrap; }
.tag--ca, .tag--intl { color: var(--navy); border-color: var(--rule-2); }
.badge-page { font-size: .78rem; color: #fff; background: var(--teal); border-radius: 99px; padding: .1rem .6rem; }
.proj[hidden], .docs li[hidden] { display: none; }
@media (max-width: 760px) { .proj { grid-template-columns: 1fr; } .proj > *, .proj__tags { grid-column: 1; grid-row: auto; } }

/* ---------- photographs ---------- */
.bleed { margin: 0; }
.bleed img { width: 100%; height: clamp(220px, 32vw, 460px); object-fit: cover; }
.bleed figcaption { max-width: var(--shell); margin-inline: auto; padding: .9rem var(--gutter) 0; }
.photo { border-radius: var(--radius); }

/* ---------- closing band: the dusk sky ---------- */
.band--ink { background: linear-gradient(180deg, var(--dusk-1) 0%, var(--dusk-2) 58%, var(--dusk-3) 100%); color: var(--text); }
.band--ink h2 { color: var(--navy); }
.band--ink p { color: var(--text); }
.band--ink a:not(.btn) { color: var(--navy); }
.band--ink .btn--light { background: var(--navy); color: #fff; border-color: var(--navy); }
.band--ink .btn--light:hover { background: var(--teal); border-color: var(--teal); }
.band--ink .btn--ghost-light { background: transparent; color: var(--navy); border-color: var(--navy); }
.band--ink .btn--ghost-light:hover { background: var(--navy); color: #fff; }

/* ---------- footer ---------- */
.footer { background: var(--navy-deep); color: #b9c7d6; padding-block: clamp(3.8rem, 7vw, 5.6rem) 2.4rem; font-size: .9rem; }
.footer a { color: #fff; text-decoration: none; }
.footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer__logo { width: 170px; margin-bottom: 1.6rem; filter: brightness(0) invert(1); }
.footer__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.1fr; gap: 2.6rem; padding-bottom: 3rem; }
@media (max-width: 960px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer h3 { color: #fff; font-size: .92rem; font-weight: 500; letter-spacing: 0; margin-bottom: 1.1rem; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: .55rem; }
.footer p { max-width: 40ch; }
.footer .ids { font-size: .8rem; color: #8ea1b6; margin-top: 1rem; }
.cert { display: inline-block; border: 1px solid rgba(255,255,255,.3); border-radius: var(--radius); padding: .55rem .8rem; font-size: .8rem; color: #e3eaf2; line-height: 1.45; }
.footer__legal { border-top: 1px solid rgba(255,255,255,.14); padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; font-size: .8rem; color: #8ea1b6; }

/* retired */
.reveal { opacity: 1; transform: none; }
.todo, .draft { display: none; }
.section-head__aside { grid-column: 2; grid-row: 1 / span 3; align-self: end; color: var(--muted); max-width: 48ch; }
.section-head__aside p:last-child { margin-bottom: 0; }
@media (max-width: 860px) { .section-head__aside { grid-column: 1; grid-row: auto; } }
@media (max-width: 620px) { .card__ground { aspect-ratio: 16 / 10; } }


/* ---------- featured practice line: full row on the home and practice pages ---------- */
.lanes li.lanes__feature { grid-column: 1 / -1; }
.lane--feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(1.4rem, 3vw, 3rem); align-items: start; }
.lane--feature h3 { grid-row: span 2; }
.lane--feature > div, .lane--feature .more { grid-column: 2; }
@media (max-width: 760px) { .lane--feature { display: flex; } }
.card--feature { grid-column: 1 / -1; flex-direction: row; }
.card--feature .card__ground { flex: 0 0 54%; aspect-ratio: 16 / 9; border-bottom: 0; border-right: 1px solid var(--rule); }
.card--feature .card__body { padding: clamp(1.4rem, 3vw, 2.6rem); }
.card--feature h3 { font-size: clamp(1.45rem, 2.3vw, 1.95rem); font-weight: 300; letter-spacing: -.018em; }
@media (max-width: 760px) {
  .card--feature { flex-direction: column; }
  .card--feature .card__ground { aspect-ratio: 16 / 11; border-right: 0; border-bottom: 1px solid var(--rule); }
}

/* practice page: methods */
.methods .card__links { margin: 0; padding-top: .9rem; }
.lane--feature h3 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); }
.methods article { display: flex; flex-direction: column; }
.methods .card__links { margin-top: auto; }

/* home: spotlight strip under the hero photo */
.spotlight { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .8rem 2rem; align-items: center; margin-top: clamp(1.4rem, 3vw, 2.2rem); padding: 1.25rem 1.6rem; background: #fff; border: 1px solid var(--rule-2); border-radius: var(--radius); color: var(--text); text-decoration: none; transition: border-color .25s, box-shadow .25s; }
.spotlight:hover { border-color: var(--teal); box-shadow: 0 14px 34px -22px rgba(14,51,94,.35); }
.spotlight__tag { font-size: .76rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }
.spotlight__body { display: flex; flex-direction: column; gap: .3rem; }
.spotlight__title { font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.25; color: var(--navy); }
.spotlight__text { font-size: .95rem; line-height: 1.5; color: var(--muted); }
.spotlight__go { font-size: .92rem; font-weight: 500; color: var(--teal); white-space: nowrap; }
.spotlight:hover .spotlight__title { color: var(--teal); }
@media (max-width: 760px) { .spotlight { grid-template-columns: 1fr; } }