/* Michael G. Lewis — site styles
   Layout: white gallery wall, 12-column grid, images carry the page; type stays small and quiet. */
:root {
  --bg: #ffffff;
  --fg: #151515;
  --muted: #6e6e6a;
  --rule: #e3e3df;
  --stage: #101010;       /* behind slideshow images */
  --stage-fg: #f2f2ee;

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

  --step--1: 0.8125rem;   /* 13px labels, captions */
  --step-0: 1rem;         /* body */
  --step-1: clamp(1.125rem, 0.6vw + 1rem, 1.375rem);   /* lead text */
  --step-2: clamp(1.5rem, 1.6vw + 1rem, 2.25rem);      /* section titles */
  --step-3: clamp(2rem, 3.4vw + 1rem, 4rem);           /* page titles */

  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1440px;
  --space-s: 0.75rem;
  --space-m: 1.5rem;
  --space-l: clamp(2.5rem, 5vw, 4.5rem);
  --space-xl: clamp(4rem, 9vw, 8rem);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
h1, h2, h3 { font-weight: 500; line-height: 1.12; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.label {
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 500;
}
.muted { color: var(--muted); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- header / footer ---------- */
.site-header .wrap {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-m);
  padding-block: 1.5rem;
}
.brand { font-weight: 600; text-decoration: none; letter-spacing: 0.01em; white-space: nowrap; }
.nav { display: flex; gap: clamp(1rem, 3vw, 2.25rem); }
.nav a {
  font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500;
  text-decoration: none; white-space: nowrap; padding-block: 0.25rem;
  border-bottom: 1px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: currentColor; }

.site-footer { margin-top: var(--space-xl); border-top: 1px solid var(--rule); }
.site-footer .wrap {
  display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between;
  padding-block: 2rem 2.5rem; font-size: var(--step--1); color: var(--muted);
}
.site-footer ul { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--fg); }

/* ---------- landing ---------- */
.intro {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-m);
  align-items: end; padding-block: var(--space-l) var(--space-xl);
}
.intro__photo { grid-column: 1 / span 5; }
.intro__photo img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: grayscale(1); }
.intro__text { grid-column: 7 / span 6; display: grid; gap: var(--space-m); min-width: 0; }
.intro__text h1 { font-size: var(--step-3); }
.intro__lead { font-size: var(--step-2); line-height: 1.2; font-weight: 500; letter-spacing: -0.01em; }
.intro__text p { max-width: 36em; }
.links { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; padding-top: 0.5rem; }
.textlink {
  font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
  text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 0.2rem;
}
.textlink:hover { color: var(--muted); }

/* ---------- section headings ---------- */
.page-head { padding-block: var(--space-l) var(--space-l); display: grid; gap: var(--space-s); }
.page-head h1 { font-size: var(--step-3); max-width: 18ch; }
.page-head p:not(.label) { font-size: var(--step-1); max-width: 34em; color: var(--muted); }

/* ---------- work index ---------- */
.work-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-l) var(--space-m);
}
.card { display: grid; gap: 0.9rem; text-decoration: none; align-content: start; }
.card__img { overflow: hidden; background: var(--rule); aspect-ratio: 3 / 2; }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.card:hover .card__img img { transform: scale(1.025); }
.card__meta { display: grid; gap: 0.3rem; }
.card__title { font-size: var(--step-1); font-weight: 500; line-height: 1.25; }
.card__q { color: var(--muted); max-width: 32em; }
.work-grid--small { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-m); }
.work-grid--small .card__title { font-size: var(--step-0); }

/* ---------- project: slideshow ---------- */
.slideshow { position: relative; background: var(--stage); color: var(--stage-fg); }
.slides {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; height: min(84vh, 62vw); min-height: 300px;
}
.slides::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: start; margin: 0; height: 100%; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slideshow__bar .wrap {
  display: flex; align-items: center; gap: var(--space-m); padding-block: 0.9rem;
  font-size: var(--step--1);
}
.slideshow__count { font-variant-numeric: tabular-nums; letter-spacing: 0.06em; min-width: 3.5em; }
.slideshow__caption { flex: 1; min-width: 0; color: color-mix(in srgb, var(--stage-fg) 65%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slideshow__btns { display: flex; gap: 0.25rem; }
.slideshow button {
  appearance: none; border: 1px solid color-mix(in srgb, var(--stage-fg) 35%, transparent);
  background: transparent; color: inherit; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; transition: background 0.2s;
}
.slideshow button:hover { background: color-mix(in srgb, var(--stage-fg) 14%, transparent); }
.slideshow button svg { width: 16px; height: 16px; }

/* ---------- project: details ---------- */
.project-head { padding-block: var(--space-l) var(--space-l); display: grid; gap: 1.1rem; justify-items: start; }
.project-head h1 { font-size: var(--step-3); max-width: 20ch; }
.project-q { font-size: var(--step-2); line-height: 1.22; letter-spacing: -0.01em; max-width: 30ch; color: var(--muted); }
.project-head .label { margin-top: 0.4rem; }

.details {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-l) var(--space-m);
  padding-block: var(--space-m) var(--space-xl); border-top: 1px solid var(--rule);
}
.facts { grid-column: 1 / span 4; display: grid; gap: 1.4rem; align-content: start; min-width: 0; }
.facts dl { margin: 0; display: grid; gap: 1.4rem; }
.facts dt { margin-bottom: 0.25rem; }
.facts dd { margin: 0; }
.facts dd span { display: block; }
.description { grid-column: 6 / span 7; display: grid; gap: 1.1em; align-content: start; min-width: 0; }
.description p { font-size: var(--step-1); line-height: 1.5; max-width: 34em; }
.description .question { font-size: var(--step-2); line-height: 1.2; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 0.4em; }

/* ---------- project: gallery ---------- */
.gallery { display: grid; gap: var(--space-l); }
.gallery figure { margin: 0; display: grid; gap: 0.7rem; justify-items: start; }
.gallery figure.grouped { margin-top: calc(var(--space-l) * -0.6); }
.gallery figure img { width: 100%; background: var(--rule); }
.gallery figure.portrait img { width: auto; max-height: 90vh; max-width: min(100%, 720px); }
.gallery figcaption { font-size: var(--step--1); color: var(--muted); max-width: 60em; }

.more { margin-top: var(--space-xl); padding-top: var(--space-m); border-top: 1px solid var(--rule); display: grid; gap: var(--space-m); }
.more__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }

/* ---------- working together ---------- */
.bleed { margin: 0; }
.bleed img { width: 100%; max-height: 80vh; object-fit: cover; }
.bleed figcaption, .inset figcaption { font-size: var(--step--1); color: var(--muted); padding-top: 0.6rem; }
.inset { margin: 0; }
.inset img { width: 100%; }

.section {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-m);
  padding-block: var(--space-xl) var(--space-l);
}
.section__label { grid-column: 1 / span 3; display: grid; gap: 0.5rem; align-content: start; min-width: 0; }
.section__body { grid-column: 5 / span 8; min-width: 0; display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); align-content: start; }
.section__lede { font-size: var(--step-2); line-height: 1.2; font-weight: 500; letter-spacing: -0.01em; max-width: 24em; }
.prose { display: grid; gap: 1.1em; }
.prose p { font-size: var(--step-1); line-height: 1.5; max-width: 34em; }

.pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-l) var(--space-m); }
.pairs h3 { font-size: var(--step-0); font-weight: 600; margin-bottom: 0.4rem; letter-spacing: 0; }
.pairs p { color: var(--muted); }
.pairs a { text-decoration: none; }
.pairs a:hover h3 { text-decoration: underline; }

.deliv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-l) var(--space-m); }
.deliv h3 { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; padding-bottom: 0.75rem; border-bottom: 1px solid var(--rule); margin-bottom: 1rem; }
.deliv dl { margin: 0; display: grid; gap: 0.9rem; }
.deliv dt { font-weight: 600; }
.deliv dd { margin: 0; color: var(--muted); }

.contact {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-m);
  padding-block: var(--space-xl) 0; align-items: end;
}
.contact__img { grid-column: 1 / span 4; }
.contact__body { grid-column: 6 / span 7; display: grid; gap: var(--space-m); min-width: 0; }
.contact__body h2 { font-size: var(--step-3); }
.contact__list { display: grid; gap: 0.35rem; font-size: var(--step-1); }
.contact__list a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.contact__list a:hover { border-bottom-color: currentColor; }

/* ---------- tablet ---------- */
@media (max-width: 1024px) {
  .intro__photo { grid-column: 1 / span 5; }
  .intro__text { grid-column: 6 / span 7; }
  .facts { grid-column: 1 / span 5; }
  .description { grid-column: 6 / span 7; }
  .section__label { grid-column: 1 / -1; }
  .section__body { grid-column: 1 / -1; }
  .contact__img { grid-column: 1 / span 5; }
  .contact__body { grid-column: 6 / span 7; }
}
@media (max-width: 760px) {
  .intro, .details, .contact { grid-template-columns: minmax(0, 1fr); }
  .intro { padding-top: var(--space-m); gap: var(--space-l); }
  .intro__photo, .intro__text, .facts, .description, .contact__img, .contact__body { grid-column: 1 / -1; }
  .intro__photo { max-width: 420px; }
  .description { order: -1; }
  .contact__img { max-width: 320px; }
  .work-grid, .pairs, .deliv { grid-template-columns: minmax(0, 1fr); }
  .work-grid--small { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
  .work-grid--small .card__q { display: none; }
  .slides { height: auto; aspect-ratio: 4 / 3; min-height: 0; }
  .slideshow__caption { display: none; }
  .slideshow__count { flex: 1; }
}
@media (max-width: 480px) {
  .site-header .wrap { flex-direction: column; gap: 0.5rem; align-items: flex-start; }
  .work-grid--small { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .slides { scroll-behavior: auto; }
  .card__img img { transition: none; }
}

/* ---------- splash (home) ----------
   Name rises letter by letter out of a baseline mask, the descriptor resolves word by word,
   links fade in, then a band of project colors travels through the link letters. */
:root {
  --chase-1: #4a5a8c;   /* Medal of Honor wall blue */
  --chase-2: #4f8577;   /* Adams teal */
  --chase-3: #a7864a;   /* Edelman amber */
  --chase-4: #93604f;   /* Vicksburg firelight */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}
.splash-body { overflow-x: clip; min-height: 100vh; min-height: 100svh; display: flex; }
.splash {
  flex: 1; width: 100%; display: flex; flex-direction: column; justify-content: center;
  gap: clamp(1rem, 2vw, 1.5rem); padding-block: 12vh;
}
.splash__name {
  font-size: clamp(1.5rem, 8vw, 6rem); font-weight: 600; letter-spacing: -0.01em;
  text-transform: uppercase; line-height: 1;
}
.splash .word { display: inline-block; overflow: clip; padding-block: 0.06em; margin-block: -0.06em; vertical-align: top; }
.splash__name > span {
  display: inline-block; white-space: nowrap;
  animation: sp-track 2.4s cubic-bezier(0.25, 1, 0.5, 1) 150ms both;
}
.splash__sub { font-size: var(--step-1); color: var(--muted); max-width: 40em; }
.splash__sub .w {
  display: inline-block; opacity: 0; filter: blur(6px); transform: translateY(0.35em);
  animation: sp-resolve 0.9s var(--ease-out) forwards;
  animation-delay: calc(1000ms + var(--i) * 70ms);
}
.splash__nav { margin-top: clamp(2rem, 6vh, 4rem); }
.splash__nav ul { display: grid; gap: 0.15em; font-size: var(--step-2); font-weight: 500; letter-spacing: -0.01em; }
.splash__nav li { opacity: 0; animation: sp-fade 1s ease forwards; animation-delay: calc(1600ms + var(--k) * 150ms); }
.splash__nav a { position: relative; display: inline-block; text-decoration: none; padding-block: 0.1em; }
.splash__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.05em; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease-out);
}
.splash__nav a:hover::after, .splash__nav a:focus-visible::after { transform: scaleX(1); }
.splash__nav .lt {
  display: inline-block; color: var(--fg);
  animation: sp-chase 3.6s linear infinite;
  animation-delay: calc(1600ms + var(--i) * 40ms);
}
@keyframes sp-track {
  0%   { letter-spacing: 0.6em; opacity: 0; color: var(--muted); filter: blur(2px); }
  45%  { opacity: 1; }
  100% { letter-spacing: -0.01em; opacity: 1; color: var(--fg); filter: blur(0); }
}
@keyframes sp-resolve { to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes sp-fade { to { opacity: 1; } }
@keyframes sp-chase {
  0%   { color: var(--fg); }
  5%   { color: var(--chase-1); }
  27%  { color: var(--chase-2); }
  50%  { color: var(--chase-3); }
  73%  { color: var(--chase-4); }
  94%, 100% { color: var(--fg); }
}
@media (prefers-reduced-motion: reduce) {
  .splash__name > span, .splash__sub .w, .splash__nav li { animation: none; opacity: 1; transform: none; filter: none; }
  .splash__nav .lt { animation: none; }
}

/* ---------- lightbox ---------- */
.zoomable { cursor: zoom-in; }
.lightbox-open, .lightbox-open body { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 100; background: #ffffff; color: var(--fg);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto;
  padding: calc(env(safe-area-inset-top, 0px) + 3.5rem) 0 env(safe-area-inset-bottom, 0px);
  opacity: 0; transition: opacity 0.25s ease;
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }
.lightbox__stage { margin: 0; grid-column: 2; grid-row: 1; position: relative; min-height: 0; min-width: 0; }
.lightbox__stage img {
  position: absolute; inset: 0; margin: auto;
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; cursor: default;
  opacity: 0; transition: opacity 0.3s ease;
}
.lightbox__stage img.is-in { opacity: 1; }
.lightbox button {
  appearance: none; background: transparent; border: 0; color: inherit; cursor: pointer;
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; transition: background 0.2s;
}
.lightbox button:hover { background: rgba(0, 0, 0, 0.06); }
.lightbox button svg { width: 18px; height: 18px; }
.lightbox__close { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 0.5rem); right: 0.5rem; }
.lightbox__nav { align-self: center; margin-inline: clamp(0.25rem, 1.5vw, 1rem); }
.lightbox__prev { grid-column: 1; grid-row: 1; }
.lightbox__next { grid-column: 3; grid-row: 1; }
.lightbox__bar {
  grid-column: 1 / -1; grid-row: 2; display: flex; gap: 1.5rem; align-items: baseline;
  padding: 1rem var(--gutter) 1.25rem; font-size: var(--step--1);
}
.lightbox__count { font-variant-numeric: tabular-nums; letter-spacing: 0.06em; flex: none; }
.lightbox__caption { display: none; }
@media (max-width: 760px) {
  .lightbox { grid-template-columns: 0 minmax(0, 1fr) 0; }
  .lightbox__nav { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox__stage img { transition: none; }
}
.splash__sub .sep { color: #b9b9b4; margin-inline: 0.2em; }

/* ---------- hover color chase (work titles, client tiles) ---------- */
.chase-hover .word { display: inline-block; }
.chase-hover .lt { display: inline-block; }
a:hover .chase-hover .lt, a:focus-visible .chase-hover .lt {
  animation: sp-chase 2.6s linear infinite;
  animation-delay: calc(var(--i) * 45ms);
}
@media (prefers-reduced-motion: reduce) {
  a:hover .chase-hover .lt, a:focus-visible .chase-hover .lt { animation: none; }
}

/* ---------- client access ---------- */
.client-access { margin-top: var(--space-l); padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.splash--still .splash__sub .sep { color: #b9b9b4; margin-inline: 0.2em; }
.gate { margin-top: clamp(2rem, 6vh, 4rem); display: grid; gap: 0.75rem; max-width: 26rem; }
.gate__row { display: flex; align-items: center; border-bottom: 1px solid var(--fg); }
.gate input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--fg);
  font: inherit; font-size: var(--step-1); padding: 0.6rem 0;
}
.gate input::placeholder { color: var(--muted); }
.gate button {
  appearance: none; border: 0; background: transparent; color: var(--fg); cursor: pointer;
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 50%;
}
.gate button:hover { background: var(--rule); }
.gate button svg { width: 18px; height: 18px; }
.gate.is-busy { opacity: 0.6; pointer-events: none; }
.gate__msg { min-height: 1.5em; font-size: var(--step--1); color: var(--muted); }
.gate__row:focus-within { border-bottom-width: 2px; margin-bottom: -1px; }

.client-head { padding-block: 1.5rem; }
.client-head .brand { margin: 0; }
.work-grid--client { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile { background: var(--bg); border: 1px solid var(--fg); display: grid; place-items: center; }
.tile__mark { font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
@media (max-width: 760px) { .work-grid--client { grid-template-columns: minmax(0, 1fr); } }

/* ---------- work groups ---------- */
.work-group { margin-top: var(--space-xl); padding-top: var(--space-m); border-top: 1px solid var(--rule); display: grid; gap: var(--space-m); }
.work-group__head { display: grid; gap: 0.5rem; }
.work-group__head p { color: var(--muted); max-width: 40em; }
.work-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-l) var(--space-m); }
.work-grid--three .card__title { font-size: var(--step-0); font-weight: 600; }

/* ---------- case study sections (digital products) ---------- */
.case { display: grid; gap: var(--space-xl); }
.case__sec { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-m); }
.case__text { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; gap: var(--space-m); align-items: start; }
.case__text h2 { grid-column: 1 / span 4; font-size: var(--step-1); line-height: 1.25; }
.case__body { grid-column: 6 / span 7; display: grid; gap: 1em; }
.case__body p { font-size: var(--step-1); line-height: 1.5; max-width: 34em; }
.case__figs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-m); margin-top: var(--space-s); }
.case__figs figure { grid-column: 1 / -1; margin: 0; display: grid; gap: 0.6rem; align-content: start; min-width: 0; }
.case__figs figure.half { grid-column: auto; }
.case__figs img { width: 100%; background: var(--rule); }
.case__figs figcaption { font-size: var(--step--1); color: var(--muted); }
@media (max-width: 1024px) {
  .work-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case__text h2 { grid-column: 1 / -1; }
  .case__body { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .work-grid--three { grid-template-columns: minmax(0, 1fr); }
  .case__sec, .case__text { grid-template-columns: minmax(0, 1fr); }
  .case__figs { grid-template-columns: minmax(0, 1fr); }
  .case__figs figure.half { grid-column: 1 / -1; }
}
.case__figs figure.portrait img { width: auto; max-width: min(100%, 520px); }

/* ---------- justified image rows (equal heights, no cropping) ---------- */
.row { display: flex; gap: clamp(0.75rem, 1.5vw, 1.25rem); align-items: flex-start; width: 100%; }
.row figure { margin: 0; min-width: 0; display: grid; gap: 0.6rem; align-content: start; }
.row figure img { width: 100%; height: auto; }
.gallery > .row, .case__figs > .row { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .row { flex-direction: column; gap: var(--space-m); }
  .row figure { flex: none !important; width: 100%; }
}

/* ---------- in-page jump links ---------- */
html:has(.wt-nav) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(.wt-nav) { scroll-behavior: auto; } }
.jump { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin-top: 0.75rem; }
.jump a {
  font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500;
  text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 0.2rem;
}
.jump a:hover { border-bottom-color: currentColor; }
#engagements, #deliverables, #contact { scroll-margin-top: 1.5rem; }

/* ---------- project hero (single image, natural proportions) ---------- */
.hero { margin: 0 0 var(--space-l); }
.hero img { width: 100%; height: auto; }
.project-head { padding-block: var(--space-l) var(--space-m); }
.page-head--quiet { padding-block: var(--space-l) var(--space-l); }
.page-head--quiet p:not(.label) { font-size: var(--step-2); line-height: 1.22; letter-spacing: -0.01em; color: var(--fg); max-width: 30ch; }

/* ---------- tile hairline (keeps white-background images from dissolving) ---------- */
.card__img { position: relative; }
.card__img::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(21, 21, 21, 0.32); pointer-events: none; }
.tile::after { display: none; }

/* ---------- case sections: heading sits directly on its text, left-aligned ---------- */
.case__text { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem; grid-column: 1 / span 8; }
.case__text h2 { grid-column: auto; font-size: var(--step-2); line-height: 1.2; letter-spacing: -0.01em; max-width: 28ch; }
.case__body { grid-column: auto; }
@media (max-width: 1024px) { .case__text { grid-column: 1 / -1; } }

/* ---------- Working Together: persistent section rail ---------- */
.wt { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-m); align-items: start; }
.wt-rail {
  grid-column: 1 / span 3; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 1.5rem);
  display: grid; gap: 1.75rem; justify-items: start; padding-bottom: 2rem;
}
.wt-nav { display: grid; gap: 0.15rem; position: relative; }
.wt-nav a {
  font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500;
  color: var(--muted); text-decoration: none; white-space: nowrap;
  padding: 0.45rem 0 0.45rem 0.9rem; border-left: 2px solid var(--rule); transition: color 0.2s, border-color 0.2s;
}
.wt-nav a:hover { color: var(--fg); }
.wt-nav a.is-current { color: var(--fg); border-left-color: var(--fg); }
.btn {
  display: inline-flex; align-items: center; white-space: nowrap; text-decoration: none;
  font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
  background: var(--fg); color: var(--bg); padding: 0.75rem 1.15rem; border-radius: 2rem; transition: opacity 0.2s;
}
.btn:hover { opacity: 0.82; }
.wt-main { grid-column: 4 / -1; display: grid; gap: var(--space-xl); min-width: 0; }
.wt-sec { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); align-content: start; min-width: 0; scroll-margin-top: 1.5rem; }
.wt .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); padding-block: 0; scroll-margin-top: 1.5rem; }
.wt .contact__img, .wt .contact__body { grid-column: auto; }
.wt .client-access { margin-top: 0; }
@media (max-width: 1024px) {
  .wt { grid-template-columns: minmax(0, 1fr); gap: var(--space-l); }
  .wt-rail {
    grid-column: 1; top: env(safe-area-inset-top, 0px); z-index: 10;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin-inline: calc(var(--gutter) * -1); padding: 0.55rem var(--gutter);
    background: color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--rule);
  }
  .wt-nav { display: flex; gap: 1.1rem; overflow-x: auto; scrollbar-width: none; min-width: 0; }
  .wt-nav::-webkit-scrollbar { display: none; }
  .wt-nav a { padding: 0.4rem 0; border-left: 0; border-bottom: 2px solid transparent; }
  .wt-nav a.is-current { border-bottom-color: var(--fg); }
  .btn { flex: none; padding: 0.55rem 0.9rem; }
  .wt-main { grid-column: 1; }
  .wt-sec, .wt .contact { scroll-margin-top: 5.25rem; }
}
@media (max-width: 760px) {
  .wt .contact { grid-template-columns: minmax(0, 1fr); }
}
/* rows made only of tall images (phone screens) stay side by side on phones */
@media (max-width: 760px) {
  .row.row--keep { flex-direction: row; gap: 0.6rem; }
  .row.row--keep figure { width: auto; }
  .row.row--keep figure { flex: 1 1 0% !important; }
  .row.row--keep figcaption { font-size: 0.7rem; }
}
figure.cutout img, .lightbox__stage img { background: transparent !important; }

/* ---------- case-study diagrams ---------- */
.case { --accent: var(--fg); }
.case__dia { grid-column: 1 / -1; margin-top: var(--space-s); }
.dia { margin: 0; border-top: 2px solid var(--accent); padding-top: 1.25rem; display: grid; gap: 1.25rem; }
.dia__title { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--muted); }
.dia__note { font-size: var(--step-1); font-weight: 500; color: var(--accent); }

/* from → to */
.dia__heads, .dia__rows li { display: grid; grid-template-columns: minmax(0, 1fr) 2.5rem minmax(0, 1fr); align-items: center; gap: 1rem; }
.dia__heads span { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.dia__heads span:last-child { color: var(--accent); }
.dia__rows { display: grid; }
.dia__rows li { padding-block: 0.85rem; border-bottom: 1px solid var(--rule); }
.dia__rows li:first-child { border-top: 1px solid var(--rule); }
.dia__from { color: var(--muted); font-size: var(--step-1); }
.dia__to { font-size: var(--step-1); font-weight: 500; }
.dia__arrow { width: 100%; height: 12px; color: var(--accent); }

/* ranked flows */
.dia__flowrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); }
.dia__flow { display: grid; gap: 0.75rem; align-content: start; padding: 1.25rem; border: 1px solid var(--rule); }
.dia__n { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--accent); color: #fff; font-size: var(--step--1); font-weight: 600; }
.dia__flow h4 { margin: 0; font-size: var(--step-1); font-weight: 600; }
.dia__meter { display: flex; align-items: center; gap: 0.3rem; font-size: var(--step--1); color: var(--muted); }
.dia__meter span { margin-right: 0.4rem; }
.dia__meter i { width: 1.4rem; height: 0.4rem; background: var(--rule); }
.dia__meter i.on { background: var(--accent); }
.dia__chain { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: step; }
.dia__chain li { position: relative; padding: 0.55rem 0 0.55rem 1.4rem; border-top: 1px solid var(--rule); }
.dia__chain li::before { content: ""; position: absolute; left: 0.2rem; top: 1.05rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; border: 1.5px solid var(--accent); }
.dia__result { font-weight: 600; color: var(--accent); padding-top: 0.5rem; border-top: 1px solid var(--rule); }

/* layers */
.dia__stack { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; max-width: 46rem; }
.dia__stack li { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1rem; align-items: center; padding: 0.9rem 1rem; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--bg)); }
.dia__stack li:nth-child(2) { margin-left: 1.5rem; } .dia__stack li:nth-child(3) { margin-left: 3rem; } .dia__stack li:nth-child(4) { margin-left: 4.5rem; }
.dia__layer { font-weight: 600; }
.dia__role { color: var(--muted); }

@media (max-width: 760px) {
  .dia__heads { display: none; }
  .dia__rows li { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
  .dia__rows .dia__arrow { width: 1.5rem; transform: rotate(90deg); margin-left: 0.2rem; }
  .dia__flowrow { grid-template-columns: minmax(0, 1fr); }
  .dia__stack li { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; margin-left: 0 !important; }
}

/* ---------- SVG diagrams ---------- */
figure.case__dia { margin: var(--space-s) 0 0; grid-column: 1 / -1; display: block; }
.case__dia img { display: block; width: 100%; height: auto; background: transparent; }
@media (max-width: 760px) {
  /* diagrams fit the screen on phones; tap opens them full-size in the lightbox */
  .case__dia-scroll { overflow: visible; margin-inline: 0; padding-inline: 0; }
  .case__dia-scroll img { width: 100%; max-width: 100%; }
}
/* Working Together: contact without the side image */
.wt .contact { grid-template-columns: minmax(0, 1fr); }
.card__img--tile img { width: 100%; height: 100%; object-fit: cover; }
.card:hover .card__img--tile img { transform: none; }
.card__img--tile { transition: background 0.3s; }

/* ---------- client logo tiles: black at rest, color chase on hover ---------- */
.card__img--tile { background: #efeee9; display: block; }
.card__img--tile .logo {
  position: absolute; inset: 0; margin: auto; display: block;
  background: var(--fg);
  -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.card:hover .card__img--tile .logo, .card:focus-visible .card__img--tile .logo {
  background: linear-gradient(100deg, var(--chase-1), var(--chase-2), var(--chase-3), var(--chase-4), var(--chase-1), var(--chase-2));
  background-size: 300% 100%;
  animation: logo-chase 2.6s linear infinite;
}
@keyframes logo-chase { from { background-position: 0% 0; } to { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) {
  .card:hover .card__img--tile .logo { animation: none; background: var(--chase-1); }
}

/* ---------- image discipline: nothing taller than the screen ----------
   Each single image, row of images, hero and diagram carries --ar (its total aspect ratio).
   Width = min(column, cap height × ar), so every block fits in one view and keeps its proportions. */
figure.solo, .row, figure.case__dia { --cap: 72vh; width: min(100%, calc(var(--cap) * var(--ar))); }
figure.solo.is-tall, .row.is-tall { --cap: 58vh; }
figure.hero.solo { --cap: 66vh; }
figure.case__dia { --cap: 82vh; }
figure.solo img, figure.solo.portrait img, .case__figs figure.solo img { width: 100% !important; max-width: 100% !important; max-height: none !important; height: auto; }
.row figure img { max-height: none !important; }
.case__figs { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: 0.5rem; }
.case__figs > * { grid-column: 1 / -1 !important; }
.gallery { gap: clamp(2rem, 4vw, 3.5rem); }
.gallery figure.grouped { margin-top: 0; }

/* tighter, steadier rhythm between case-study sections */
.case { gap: clamp(3.5rem, 7vw, 6rem); }
.case__sec { row-gap: clamp(1.25rem, 2.5vw, 2rem); }
.details { padding-bottom: clamp(3rem, 6vw, 5rem); }
.more { margin-top: clamp(4rem, 8vw, 6.5rem); }

@media (max-width: 760px) {
  figure.solo, .row { --cap: 80vh; }
  figure.solo.is-tall, .row.is-tall { --cap: 62vh; }
  figure.case__dia { width: auto; }
  .row:not(.row--keep) { width: 100%; }
}

/* ---------- project pages: four type sizes, text set in from the left ----------
   display (title) · lead (question, section headings) · body (all running text, facts) · small (labels, captions) */
.project-head h1 { font-size: var(--step-3); }
.project-q { font-size: var(--step-1); line-height: 1.35; max-width: 34ch; }
.description p, .description p:first-child { font-size: var(--step-0); line-height: 1.6; }
.facts dd, .facts dd span { font-size: var(--step-0); }
.case__text h2 { font-size: var(--step-1); font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; max-width: 34ch; }
.case__body p { font-size: var(--step-0); line-height: 1.6; max-width: 36em; }
.gallery figcaption, .case__figs figcaption { font-size: var(--step--1); }
@media (min-width: 1025px) {
  .case__text { grid-column: 3 / span 8 !important; }
}

/* ---------- case sections: same two-column system as the facts/description block ----------
   rule → heading on the left edge (cols 1–4) · text in the description column (cols 6–12) → images.
   Large space before each rule, tight space after it, so every block belongs to what follows. */
.case { gap: clamp(4rem, 8vw, 6.5rem); }
.case__sec { border-top: 1px solid var(--rule); padding-top: clamp(1.25rem, 2vw, 1.75rem); row-gap: clamp(1.5rem, 3vw, 2.25rem); }
.case__text { grid-column: 1 / -1 !important; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.75rem var(--space-m); align-items: start; }
.case__text h2 { grid-column: 1 / span 4; margin: 0; }
.case__body { grid-column: 6 / span 7; }
.case__body p:first-child { margin-top: 0; }
@media (max-width: 1024px) {
  .case__text h2 { grid-column: 1 / span 5; }
  .case__body { grid-column: 6 / -1; }
}
@media (max-width: 760px) {
  .case__text { grid-template-columns: minmax(0, 1fr); }
  .case__text h2, .case__body { grid-column: 1 / -1; }
}

/* ---------- project artifacts on white: matted on a grey plate so they read as exhibits, not page copy ---------- */
:root { --plate: #e9e7e1; }
figure.plate > img {
  box-sizing: border-box; background: var(--plate) !important;
  padding: clamp(10px, 4%, 44px);
  outline: 1px solid color-mix(in srgb, var(--fg) 8%, transparent); outline-offset: -1px;
}
.row figure.plate > img { padding: clamp(8px, 5%, 32px); }

/* ---------- project intro: description first, facts as one horizontal strip ---------- */
.details--strip { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1.75rem, 3vw, 2.5rem) var(--space-m); }
.details--strip .description { grid-column: 1 / span 8; grid-row: 1; order: 0; }
.details--strip .facts { grid-column: 1 / -1; grid-row: 2; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.details--strip .facts dl {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem var(--space-m);
  grid-auto-flow: row dense;
}
.details--strip .facts__led { grid-column: span 2; }
.details--strip .facts__led dd { columns: 2; column-gap: var(--space-m); }
.details--strip .facts__led dd span { break-inside: avoid; }
@media (max-width: 1024px) {
  .details--strip .description { grid-column: 1 / -1; }
  .details--strip .facts dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .details--strip { grid-template-columns: minmax(0, 1fr); }
  .details--strip .description, .details--strip .facts { grid-column: 1; }
  .details--strip .facts__led dd { columns: 1; }
}
.details--strip .facts__led { grid-column: 1 / -1; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.details--strip .facts__led dd { columns: 4; }
@media (max-width: 1024px) { .details--strip .facts__led dd { columns: 2; } }
@media (max-width: 760px) { .details--strip .facts__led dd { columns: 1; } }

/* ---------- project intro on the section system: one rule, facts left (cols 1–4), text right (cols 6–12) ---------- */
.details--strip { border-top: 1px solid var(--rule); padding-top: clamp(1.25rem, 2vw, 1.75rem); gap: 1.5rem var(--space-m); }
.details--strip .facts { grid-column: 1 / span 4; grid-row: 1; padding-top: 0; border-top: 0; }
.details--strip .facts dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.details--strip .description { grid-column: 6 / span 7; grid-row: 1; display: grid; gap: 1em; align-content: start; }
.details--strip .led { margin-top: 0.5em; padding-top: 1em; border-top: 1px solid var(--rule); color: var(--muted); font-size: var(--step--1); line-height: 1.7; }
.details--strip .led .label { display: block; margin-bottom: 0.3rem; }
.details--strip .led span:not(.label) + span:not(.label)::before { content: "·"; margin: 0 0.55em; color: var(--rule); color: color-mix(in srgb, var(--muted) 60%, transparent); }
@media (max-width: 1024px) {
  .details--strip .facts { grid-column: 1 / span 5; }
  .details--strip .description { grid-column: 6 / -1; }
}
@media (max-width: 760px) {
  .details--strip .facts, .details--strip .description { grid-column: 1; grid-row: auto; }
  .details--strip .facts dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- alignment: every block spans the full column ----------
   The block is always full width; only the picture inside is capped by height and centered.
   Plates fill the whole block, so plates, diagrams and full-bleed images share both edges. */
figure.solo { width: 100% !important; display: grid; justify-items: center; }
figure.solo > img { width: min(100%, calc(var(--cap) * var(--ar))) !important; margin-inline: auto; }
figure.solo > figcaption { justify-self: start; }
.row { width: min(100%, calc(var(--cap) * var(--ar))) !important; margin-inline: auto; }
figure.case__dia { width: 100% !important; }
figure.hero.solo > img { width: min(100%, calc(var(--cap) * var(--ar))) !important; }

/* plates: the grey fills the full block; the slide sits centered on it */
figure.solo.plate { background: var(--plate); padding: clamp(14px, 3.5%, 44px); outline: 1px solid color-mix(in srgb, var(--fg) 8%, transparent); outline-offset: -1px; }
figure.solo.plate > img { padding: 0 !important; background: none !important; outline: 0 !important;
  width: min(100%, calc((var(--cap) - 6vh) * var(--ar))) !important; }
figure.solo.plate > figcaption { margin-top: 0.4rem; }
.row figure.plate > img { padding: clamp(8px, 5%, 28px) !important; }
/* phone/device mockups: one fixed height per project so every phone renders at the same size */
figure.solo.is-device, .row.is-device { --cap: 50vh; }
.row.is-device { gap: clamp(1.5rem, 3vw, 3rem); }
@media (max-width: 760px) { figure.solo.is-device, .row.is-device { --cap: 60vh; } }

/* ---------- full-bleed project hero with a translucent band carrying title + question ---------- */
.phero { position: relative; width: 100%; height: clamp(440px, 78vh, 920px); overflow: hidden; background: var(--stage); }
.phero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; cursor: default !important; }
.phero__band {
  position: absolute; left: 0; right: 0; bottom: 14%;
  background: rgba(10, 10, 10, 0.52); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  color: #fff; padding-block: clamp(1.25rem, 2.6vw, 2.25rem);
}
.phero__inner { display: grid; gap: 0.5rem; }
.phero h1 { font-size: var(--step-2); font-weight: 600; letter-spacing: -0.01em; line-height: 1.12; max-width: 28ch; }
.phero__q { font-size: var(--step-1); line-height: 1.35; max-width: 40ch; color: rgba(255, 255, 255, 0.86); }
.phero + .wrap .details { margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (max-width: 760px) {
  .phero { height: auto; overflow: visible; background: none; }
  .phero__img { position: static; height: 58svh; min-height: 300px; }
  .phero__band { position: static; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--fg); padding-block: 1.5rem 0; }
  .phero__q { color: var(--muted); }
  .phero h1 { font-size: var(--step-3); }
}
@media (max-width: 760px) {
  .phero--nike-sb .phero__img { object-position: 78% 30% !important; }
  .phero--zagat .phero__img { object-position: 70% 55% !important; }
  .phero--bloomberg .phero__img { object-position: 52% 65% !important; }
}

/* ---------- Working Together: same four sizes as the project pages ----------
   title 64 · lead 22 (section opening lines, contact heading) · body 16 · small 13 (labels, rail, button) */
.wt-sec .section__lede, .wt .contact__body h2 { font-size: var(--step-1); font-weight: 600; line-height: 1.35; letter-spacing: -0.005em; max-width: 34ch; }
.wt .prose p { font-size: var(--step-0); line-height: 1.6; max-width: 36em; }
.wt .pairs h3 { font-size: var(--step-0); font-weight: 600; letter-spacing: 0; }
.wt .pairs p, .wt .deliv dd { font-size: var(--step-0); line-height: 1.55; }
.wt .deliv dt { font-size: var(--step-0); font-weight: 600; }
.wt .deliv h3 { font-size: var(--step--1); }
.wt .contact__list { font-size: var(--step-0); line-height: 1.8; }
.wt .contact__body p.muted { font-size: var(--step-0); }
.wt ~ * , .wt .client-access a { font-size: var(--step--1); }
/* the section rail names each section, so the in-page labels are kept for screen readers only */
.wt-sec > h2.label, .wt .contact__body > p.label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.wt .deliv h3 { font-size: 1.125rem; font-weight: 600; text-transform: none; letter-spacing: -0.005em; color: var(--fg); }
.wt .deliv h3 { font-size: 1.3125rem; border-bottom: 3px solid var(--fg); padding-bottom: 0.6rem; }
/* free-standing device mockups (the Dodgers monitor) obey the device height cap like phones do */
.case__figs figure.solo.is-device.cutout > img { width: min(100%, calc(var(--cap) * var(--ar))) !important; }
figure.solo.is-device.cutout { --cap: 75vh; }
@media (max-width: 760px) { figure.solo.is-device.cutout { --cap: 60vh; } }
/* digital project pages: all five other projects in one row */
.work-grid--small.work-grid--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1024px) { .work-grid--small.work-grid--five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .work-grid--small.work-grid--five { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* phones: stacked row images never exceed ~2/3 of the screen height (a lone tall phone mockup no longer goes full width) */
@media (max-width: 760px) {
  .case__figs .row:not(.row--keep) figure { width: min(100%, calc(62svh * var(--far, 10))) !important; margin-inline: auto; }
}
@media (max-width: 760px) {
  /* a lone phone mockup matches the height of the phones in the paired mockups above it */
  .case__figs .row.is-device:not(.row--keep) figure { width: min(100%, calc(38svh * var(--far, 10))) !important; }
}

/* ---------- Working Together: three ways to engage, in project order ---------- */
.phases { display: grid; gap: var(--space-xl); }
.phase { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: var(--space-m) var(--space-l); scroll-margin-top: 1.5rem; }
.phase__head { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; align-items: baseline;
  border-top: 3px solid var(--fg); padding-top: 0.9rem; }
.phase__n { font-size: 1.3125rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.phase__head h3 { font-size: 1.3125rem; font-weight: 600; letter-spacing: -0.005em; }
.phase__when { grid-column: 2; font-size: var(--step-0); line-height: 1.55; color: var(--muted); margin-top: 0.3rem; max-width: 40em; }
.phase__k { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding-bottom: 0.6rem; border-bottom: 1px solid var(--rule); margin-bottom: 1rem; }
.phase__eng { display: grid; gap: 1.1rem; align-content: start; }
.phase__eng .phase__k { margin-bottom: 0; }
.phase__eng h4, .dlv dt { font-size: var(--step-0); font-weight: 600; }
.phase__eng p:not(.phase__k), .dlv dd { font-size: var(--step-0); line-height: 1.55; color: var(--muted); margin: 0.2rem 0 0; }
.dlv { margin: 0; display: grid; gap: 1.1rem; }
.proof { font-size: var(--step--1); line-height: 1.5; color: var(--fg); margin-top: 0.35rem; }
.proof__k { text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-right: 0.35rem; }
.proof a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 0.2em; }
.proof a:hover { text-decoration-color: var(--fg); }
.specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-l) var(--space-m); }
.spec h3 { font-size: 1.3125rem; font-weight: 600; letter-spacing: -0.005em; border-bottom: 3px solid var(--fg); padding-bottom: 0.6rem; margin-bottom: 1rem; }
@media (max-width: 1024px) { .specs { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .phase { grid-template-columns: minmax(0, 1fr); }
  .phase__when { grid-column: 1 / -1; }
  .phase { scroll-margin-top: 5.25rem; }
}
.phase__eng { gap: 0; }
.phase__eng .phase__k { margin-bottom: 1rem; }
.phase__eng > div + div { margin-top: 1.1rem; }
.phase__eng h4, .dlv dt { margin: 0; line-height: 1.4; }
.phase__eng > div > p { margin: 0.2rem 0 0 !important; }
.work-group--solo { margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 0; padding-top: 0; }
.work-aside { margin-top: var(--space-l); padding-top: var(--space-m); border-top: 1px solid var(--rule); }
/* specialties: same heading treatment as the numbered phases, without a number */
.phase--spec { grid-template-columns: minmax(0, 1fr); }
.phase__head--plain { grid-template-columns: minmax(0, 1fr); }
.spec .phase__k { margin-bottom: 1rem; }
.splash__sub .grp { white-space: nowrap; }
@media (max-width: 520px) { .splash__sub .grp { display: block; } .splash__sub .sep { display: none; } }

/* ---------- Working Together: no side rail; sections fold open ---------- */
.wt--full .wt-main { grid-column: 1 / -1; }
.phases { gap: 0; }
.fold { border-top: 3px solid var(--fg); }
.fold:last-child { border-bottom: 1px solid var(--rule); }
.fold > summary.phase__head { list-style: none; cursor: pointer; border-top: 0; padding: 1.1rem 0; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.fold > summary.phase__head::-webkit-details-marker { display: none; }
.fold > summary.phase__head:not(:has(.phase__n)) { grid-template-columns: minmax(0, 1fr) auto; }
.fold > summary:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }
.fold__icon { width: 18px; height: 18px; position: relative; }
.fold__icon::before, .fold__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--fg); transition: transform 0.25s ease; }
.fold__icon::after { transform: rotate(90deg); }
.fold[open] .fold__icon::after { transform: rotate(0deg); }
.fold > summary:hover h3 { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.phase__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: var(--space-m) var(--space-l); padding: 0.5rem 0 var(--space-l); }
.phase__body--one { grid-template-columns: minmax(0, 1fr); }
.specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) {
  .phase__body, .specs { grid-template-columns: minmax(0, 1fr); }
}
.work-sub { margin: 0 0 var(--space-s); padding-bottom: 0.6rem; border-bottom: 1px solid var(--rule); }
/* Work page: motto as the headline, the descriptive sentence beneath it */
.page-head--quiet p.work-motto { font-size: var(--step-3); line-height: 1.1; letter-spacing: -0.015em; color: var(--fg); max-width: none; }
.work-motto .sep { color: #b9b9b4; font-weight: 300; margin-inline: 0.15em; }
.page-head--quiet p.work-intro { font-size: var(--step-1); line-height: 1.4; letter-spacing: 0; color: var(--muted); max-width: 34em; margin-top: 0.9rem; }
@media (max-width: 600px) { .work-motto .grp { display: block; } .work-motto .sep { display: none; } }

/* ---------- project cards: calm, clear hover (the color chase stays on the name only) ---------- */
.card:hover .chase-hover .lt, .card:focus-visible .chase-hover .lt { animation: none !important; color: inherit; }
.card:hover .card__img--tile .logo, .card:focus-visible .card__img--tile .logo { animation: none; background: var(--fg); }
.card__img img { transition: transform 0.6s ease, filter 0.4s ease; }
.card:hover .card__img img, .card:focus-visible .card__img img { transform: scale(1.04); filter: brightness(0.86); }
.card__img--tile { transition: background-color 0.4s ease; }
.card:hover .card__img--tile, .card:focus-visible .card__img--tile { background-color: #e2e1da; }
.card__title { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 0.22em; transition: text-decoration-color 0.3s ease; }
.card:hover .card__title, .card:focus-visible .card__title { text-decoration-color: currentColor; }
@media (prefers-reduced-motion: reduce) { .card:hover .card__img img { transform: none; } }
.card__title { text-decoration: none !important; }
.card__title > span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 0.12em; transition: background-size 0.35s ease; }
.card:hover .card__title > span, .card:focus-visible .card__title > span { background-size: 100% 1px; }
/* "Selected recent projects": section heading, same scale as the Working Together section heads */
.work-sub.label { font-size: 1.3125rem; font-weight: 600; letter-spacing: -0.005em; text-transform: none; color: var(--fg); padding-bottom: 0.75rem; border-bottom: 3px solid var(--fg); margin-bottom: var(--space-m); }

/* ---------- Work page: four full-bleed project tiles, edge to edge, no gaps ---------- */
.wtiles { display: grid; gap: 0; margin-top: calc(var(--space-m) * -1 + 0.5rem); }
.page-head--quiet + .work-sub, .wrap > .work-sub { margin-bottom: var(--space-m); }
.wtile { position: relative; display: block; height: clamp(160px, calc(var(--th, 50) * 1vh), 900px); overflow: hidden; background: var(--stage, #151515); color: #fff; text-decoration: none; }
.wtile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s ease, filter 0.5s ease; }
.wtile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.28) 32%, rgba(0,0,0,0) 58%); pointer-events: none; }
.wtile__text { position: absolute; left: 0; right: 0; bottom: clamp(1.5rem, 4vw, 3rem); z-index: 1; display: grid; gap: 0.45rem; }
.wtile__name { font-size: var(--step-2); font-weight: 600; letter-spacing: -0.01em; line-height: 1.12; max-width: 28ch;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 0.1em; justify-self: start; transition: background-size 0.4s ease; }
.wtile__q { font-size: var(--step-1); line-height: 1.35; max-width: 40ch; color: rgba(255,255,255,0.88); }
.wtile:hover .wtile__img, .wtile:focus-visible .wtile__img { transform: scale(1.03); filter: brightness(0.88); }
.wtile:hover .wtile__name, .wtile:focus-visible .wtile__name { background-size: 100% 1px; }
.wtile:focus-visible { outline: 3px solid var(--fg); outline-offset: -3px; }
.wtiles + .wrap .work-aside { margin-top: var(--space-l); }
@media (max-width: 760px) { .wtile { height: calc(var(--th, 50) * 0.8svh); min-height: 180px; } }
@media (prefers-reduced-motion: reduce) { .wtile:hover .wtile__img { transform: none; } }
.wtile::after { background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.42) 34%, rgba(0,0,0,0) 62%); }
.wtile__text { text-shadow: 0 1px 12px rgba(0,0,0,0.35); }
.work-sub.label { font-weight: 400; border-bottom: 0; padding-bottom: 0; }
.wtiles { margin-top: 0; } .wrap > .work-sub.label { margin-bottom: 1.1rem; }
.wrap > .work-sub.label { margin-bottom: 1.75rem; }

/* ---------- project note: a short first-person text block inside the gallery ---------- */
.pnote { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-m); padding-block: clamp(0.5rem, 2vw, 1.5rem); }
.pnote p { grid-column: 1 / span 8; font-size: var(--step-1); line-height: 1.45; letter-spacing: -0.003em; color: var(--fg); max-width: 36em; }
.pnote p + p { margin-top: 1em; }
@media (max-width: 1024px) { .pnote p { grid-column: 1 / -1; } }
/* project awards: a count in the facts row that opens to the list */
.awards > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.6rem; }
.awards > summary::-webkit-details-marker { display: none; }
.awards .fold__icon { width: 12px; height: 12px; }
.awards .fold__icon::before, .awards .fold__icon::after { height: 1.5px; }
.awards > summary:hover { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.awards ul { list-style: none; margin: 0.9rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.awards li { display: grid; gap: 0.15rem; font-size: var(--step--1); line-height: 1.45; }
.awards li strong { font-weight: 600; }
.awards li span { color: var(--muted); }
.awards[open] .fold__icon::after { transform: rotate(0deg); }
.awards li strong, .awards li span { font-size: var(--step--1); line-height: 1.45; }
@media (max-width: 1024px) { .details--strip .facts__awards { grid-column: 1 / -1; } }

/* ---------- monograph project story: short titled sections between image groups ---------- */
.pstory { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-m); row-gap: 0.6rem; }
.pstory > * { grid-column: 1 / span 7; }
.pstory h2 { font-size: 1.3125rem; font-weight: 600; letter-spacing: -0.005em; line-height: 1.25; }
.pstory p { font-size: var(--step-0); line-height: 1.6; color: var(--fg); max-width: 36em; }
.pstory + .pstory { margin-top: calc(var(--space-s) * -0.5); }
@media (max-width: 1024px) { .pstory > * { grid-column: 1 / -1; } }
/* points alternate: left, then right, like a product page */
.pstory--l > * { grid-column: 1 / span 6; }
.pstory--r > * { grid-column: 7 / -1; }
@media (max-width: 1024px) { .pstory--l > *, .pstory--r > * { grid-column: 1 / -1; } }
.overview-h { font-size: 1.3125rem; font-weight: 600; letter-spacing: -0.005em; line-height: 1.25; margin-bottom: 0.6rem; }
.description > .overview-h { margin-bottom: -1rem; padding-bottom: 0.6rem; }
/* press list: same pattern as awards, titles link out */
.awards li a { font-size: var(--step--1); line-height: 1.45; color: var(--muted); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 0.2em; }
.awards li a:hover { color: var(--fg); text-decoration-color: currentColor; }
/* one outside voice per project, set large between image groups */
.pquote { margin: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-m); row-gap: 0.9rem; padding-block: clamp(0.5rem, 2vw, 1.5rem); }
.pquote > * { grid-column: 2 / span 9; }
.pquote blockquote { margin: 0; }
.pquote blockquote p { font-size: var(--step-2); line-height: 1.22; letter-spacing: -0.01em; text-indent: -0.42em; }
.pquote figcaption { font-size: var(--step--1); color: var(--muted); max-width: 40em; }
@media (max-width: 1024px) { .pquote > * { grid-column: 1 / -1; } }
.pquote > * { grid-column: 1 / span 10; }
.page-head .page-head__sub { font-size: var(--step-1); line-height: 1.4; color: var(--muted); max-width: 34em; margin-top: 1rem; }
/* museum galleries: single images fill the full column (only very tall images are still height-capped) */
.gallery figure.solo { --cap: 96vh; }
.gallery .row { --cap: 96vh; }
@media (max-width: 760px) { .gallery figure.solo, .gallery .row { --cap: 80vh; } }
/* video hero: covers like the image hero; still poster for reduced motion */
.phero__video { object-fit: cover; background: #0c0c0c; }

/* ---------- headlines: one weight and leading across pages ---------- */
.page-head--quiet p.work-motto { font-weight: 500; line-height: 1.12; letter-spacing: -0.015em; }

/* ---------- landing: name and links in plain solid type (no texture animation) ---------- */
.splash__name > span { display: inline-block; animation: sp-track 2.4s cubic-bezier(0.25, 1, 0.5, 1) 150ms both; }
.splash__nav .lt { animation: none; }
@media (prefers-reduced-motion: reduce) { .splash__name > span { animation: none; } }

/* landing: quiet client access link, bottom left */
.splash__client {
  position: fixed; left: var(--gutter); bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); z-index: 2;
  font-size: var(--step--1); color: var(--muted); text-decoration: none;
  opacity: 0; animation: sp-fade 1s ease forwards; animation-delay: 2.4s;
  border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s;
}
.splash__client:hover, .splash__client:focus-visible { color: var(--fg); border-bottom-color: currentColor; }
@media (prefers-reduced-motion: reduce) { .splash__client { animation: none; opacity: 1; } }

/* client placeholder grid */
.ph-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 2vw, 1.5rem); padding-block: var(--space-l, 3rem) var(--space-xl, 5rem); }
.ph-grid__cell { aspect-ratio: 1; background: #f1f1ee; display: grid; place-items: center; }
.ph-grid__cell span { font-size: var(--step-2); color: var(--muted); font-variant-numeric: tabular-nums; }
.gate__back { margin-top: 2.5rem; font-size: var(--step--1); } .gate__back a { color: var(--muted); text-decoration: none; } .gate__back a:hover { color: var(--fg); }

/* video in story galleries (added from the admin) */
.gallery figure video.gvid { display: block; width: 100%; height: auto; background: var(--rule); }
.gallery figure.portrait video.gvid { width: auto; max-height: 90vh; max-width: min(100%, 720px); }
.row figure video.gvid { width: 100%; height: auto; }

/* work page without its intro: tiles start just under the header */
.wtiles--top { margin-top: var(--space-s); }

/* Work tiles: a white gap between projects, and a blue two-tone wash on hover */
.wtiles { gap: 8px; background: #000; --wash: #4a5a8c; --wash-strength: 0.7; }
.wtile__img { z-index: 0; }
.wtile__wash { position: absolute; inset: 0; z-index: 1; background: var(--wash); mix-blend-mode: multiply; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; }
.wtile::before { content: ""; position: absolute; inset: 0; z-index: 2; background: var(--wash); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; }
.wtile::after { z-index: 3; transition: opacity 0.4s ease; }
.wtile__text { z-index: 4; }
@media (hover: hover) {
  .wtile:hover .wtile__img { transform: scale(1.015); filter: grayscale(1) contrast(1.05) brightness(1.3); }
  .wtile:hover .wtile__wash { opacity: var(--wash-strength); }
  .wtile:hover::before { opacity: calc(var(--wash-strength) * 0.45); }
  .wtile:hover::after { opacity: 0.55; }
  .wtile:hover .wtile__name { background-size: 100% 2px; }
}
.wtile:focus-visible .wtile__img { transform: scale(1.015); filter: grayscale(1) contrast(1.05) brightness(1.3); }
.wtile:focus-visible .wtile__wash { opacity: var(--wash-strength); }
.wtile:focus-visible::before { opacity: calc(var(--wash-strength) * 0.45); }
@media (prefers-reduced-motion: reduce) { .wtile:hover .wtile__img, .wtile:focus-visible .wtile__img { transform: none; } }
.work-sub--top { margin-top: var(--space-m); }

/* ---------- points and quotes: left, center or right, set a column in from the image edges ---------- */
.pstory--l > * { grid-column: 2 / span 6; }
.pstory--c > * { grid-column: 4 / span 6; }
.pstory--r > * { grid-column: 6 / span 6; }
.pquote--l > * { grid-column: 2 / span 9; }
.pquote--c > * { grid-column: 3 / span 8; }
.pquote--r > * { grid-column: 4 / span 8; }
@media (max-width: 1024px) {
  .pstory--l > *, .pstory--c > *, .pstory--r > *, .pquote--l > *, .pquote--c > *, .pquote--r > * { grid-column: 1 / -1; }
}
/* diagrams in a gallery: drawn on the page, no image plate */
.gallery figure.diagram img { background: transparent; }
.pstory--r > *, .pquote--r > * { justify-self: end; width: min(100%, 36em); }
.pquote--r > * { width: min(100%, 44em); }
.pstory--c > *, .pquote--c > * { justify-self: center; text-align: center; width: min(100%, 36em); }
.pquote--c blockquote p { text-indent: 0; }
@media (max-width: 1024px) { .pstory--r > *, .pquote--r > *, .pstory--c > *, .pquote--c > * { justify-self: stretch; width: auto; } .pstory--c > *, .pquote--c > * { text-align: left; } }

/* ---------- project info under the hero: facts, recognition, press, responsibilities ---------- */
.pinfo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-m); padding-block: clamp(2rem, 4vw, 3.25rem) clamp(0.5rem, 1.5vw, 1rem); }
.pinfo__grid { grid-column: 2 / span 10; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem var(--space-m); align-items: start; }
.pinfo__grid > div { min-width: 0; }
.pinfo__grid dt { margin-bottom: 0.3rem; }
.pinfo__grid dd { margin: 0; font-size: var(--step-0); line-height: 1.5; }
.pinfo__grid dd > span { display: block; }
.pinfo__led { grid-column: 1 / -1; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.pinfo__led dd { columns: 3; column-gap: var(--space-m); }
.pinfo__led dd > span { break-inside: avoid; }
@media (max-width: 1024px) {
  .pinfo__grid { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pinfo__led dd { columns: 2; }
}
@media (max-width: 600px) {
  .pinfo__grid { grid-template-columns: minmax(0, 1fr); }
  .pinfo__led dd { columns: 1; }
}
.poverview .links { margin-top: 0.4rem; }

/* center, text left: the block sits in the middle, its lines start on one edge */
.pstory--m > *, .pquote--m > * { grid-column: 4 / span 6; max-width: none; }
@media (max-width: 1024px) { .pstory--m > *, .pquote--m > * { grid-column: 1 / -1; } }

/* captions start at the left edge of their image, not the page */
figure.solo > figcaption { justify-self: center; width: min(100%, calc(var(--cap) * var(--ar))); }
figure.solo.plate > figcaption { width: 100%; }
figure.solo > figcaption { max-width: none; }
.pinfo + .gallery { margin-top: clamp(1.5rem, 3vw, 2.5rem); }

/* ---------- project hero: a soft gradient from the bottom instead of a band (phones keep the title below the image) ---------- */
@media (min-width: 761px) {
  .phero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.465) 26%, rgba(0,0,0,0.15) 48%, rgba(0,0,0,0) 66%); }
  .phero__band { bottom: clamp(2rem, 6vh, 4.5rem); z-index: 2; padding-block: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; text-shadow: 0 1px 14px rgba(0,0,0,0.3); }
  .phero h1 { font-size: var(--step-3); line-height: 1.04; letter-spacing: -0.02em; max-width: 22ch; text-wrap: balance; }
  .phero__q { color: rgba(255, 255, 255, 0.9); }
}
.pstory .links { margin-top: 0.4rem; }

/* hero caption: small, in the lower right corner of the image; under the image on phones */
.phero__cap { position: absolute; right: var(--gutter); bottom: clamp(1rem, 2.5vh, 1.75rem); z-index: 2; max-width: 32ch; margin: 0;
  font-size: var(--step--1); line-height: 1.4; text-align: right; color: rgba(255, 255, 255, 0.78); text-shadow: 0 1px 8px rgba(0,0,0,0.4); }
@media (max-width: 760px) {
  .phero__cap { position: static; max-width: none; text-align: left; color: var(--muted); text-shadow: none; padding: 0.5rem var(--gutter) 0; }
}

/* ---------- accessibility pass ---------- */
/* home: the links are there to use right away; the entrance stays but no longer holds them back */
.splash__nav li { animation-duration: 0.6s; animation-delay: calc(200ms + var(--k) * 90ms); }
.splash__nav li:focus-within, .splash__client:focus { opacity: 1 !important; animation: none !important; }
.splash__client { animation-delay: 0.6s !important; }
/* keyboard focus is always visible */
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
img.zoomable:focus-visible { outline: 3px solid var(--fg); outline-offset: 4px; }
summary:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }
.phero :focus-visible, .wtile:focus-visible { outline-color: #fff; }
/* pause / play for autoplay video */
figure:has(> video.gvid) { position: relative; }
.vctl { position: absolute; top: clamp(0.75rem, 2vw, 1.25rem); right: clamp(0.75rem, 2vw, 1.25rem); z-index: 3;
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: rgba(15, 15, 15, 0.42); color: #fff; cursor: pointer; opacity: 0.75; transition: opacity 0.2s, background 0.2s; }
.vctl svg { width: 0.95rem; height: 0.95rem; }
.vctl:hover, .vctl:focus-visible { opacity: 1; background: rgba(15, 15, 15, 0.7); }
.vctl:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* reduced motion: no reveals, blurs, delays or smooth scrolling anywhere */
@media (prefers-reduced-motion: reduce) {
  html, html:has(.wt-nav), .slides { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .splash__sub .w, .splash__nav li, .splash__client { opacity: 1 !important; filter: none !important; transform: none !important; }
}
/* private projects: a quiet label on cards and tiles; the password screen names the project */
.card__private, .wtile__private { font-size: var(--step--1); letter-spacing: 0.04em; color: var(--muted); display: inline-flex; align-items: center; gap: 0.4em; }
.card__private::before, .wtile__private::before { content: ""; width: 0.55em; height: 0.7em; border: 1.5px solid currentColor; border-radius: 1px; box-shadow: inset 0 -0.3em 0 -0.1em currentColor; opacity: 0.8; }
.wtile__private { color: rgba(255, 255, 255, 0.82); }
.gate__site { margin: 0 0 clamp(2rem, 6vh, 3.5rem); font-weight: 600; }
.gate__site a { text-decoration: none; }
.gate__kicker { margin: 0 0 0.6rem; }
.gate__title { font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; margin: 0 0 0.75rem; max-width: 22ch; text-wrap: balance; }
.gate input[aria-invalid="true"] { border-bottom-color: #a33a2a; }
/* attribution: role with firm, recognition and credits */
.pinfo__at { margin-top: 0.2rem; font-size: var(--step--1); color: var(--muted); }
.awards li a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.awards__to { font-style: italic; }
.pinfo__credits { grid-column: 1 / -1; }
.pinfo__credits dd { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.25rem var(--space-m); font-size: var(--step--1); }
.pinfo__k { color: var(--muted); }
.pinfo__k::after { content: ":"; }
.pinfo__people { color: var(--muted); }
figcaption .figcredit { display: block; margin-top: 0.15rem; font-size: 0.85em; opacity: 0.8; }
.vctl[hidden] { display: none; }
/* larger touch targets for small text links, without changing how they look */
.splash__client::before { content: ""; position: absolute; inset: -12px -10px; }
.awards li a { position: relative; }
.awards li a::before { content: ""; position: absolute; inset: -5px 0; }
.splash__name { overflow-x: clip; }
/* images fill the content column: single images at full column width, rows at full column width
   with every image in the row at the same height (row items flex by aspect ratio). Device mockups keep their cap. */
figure.solo:not(.is-device), .row:not(.is-device) { --cap: 1000vh !important; }
/* a plate (image on a tinted mat) in a row keeps the same outer height as its neighbours */
.row figure.plate > img { box-sizing: border-box; aspect-ratio: var(--far); height: auto !important; object-fit: contain; }
/* portrait images (and rows of portraits) are framed to fit on screen below the header */
figure.solo.is-portrait:not(.is-device), .row.is-portrait:not(.is-device) { --cap: calc(100vh - 8rem) !important; --cap: calc(100svh - 8rem) !important; }
/* image area: 90% of the content column, centered (full width on phones) */
@media (min-width: 761px) {
  .gallery > figure.solo { width: 90% !important; margin-inline: auto; }
  .gallery > .row { width: min(90%, calc(var(--cap) * var(--ar))) !important; margin-inline: auto; }
}
/* image area: 75% of the content column, centered (full width on phones) */
@media (min-width: 761px) {
  .gallery > figure.solo { width: 75% !important; margin-inline: auto; }
  .gallery > .row { width: min(75%, calc(var(--cap) * var(--ar))) !important; margin-inline: auto; }
}
/* lightbox: black, edge to edge, image at full browser height; controls float over it */
.lightbox { background: #000; color: #fff; padding: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.lightbox__stage { grid-column: 1; grid-row: 1; }
.lightbox__stage img { height: 100%; width: auto; max-width: 100%; max-height: 100%; }
.lightbox__bar { display: none; }
.lightbox button { background: rgba(0, 0, 0, 0.55); color: #fff; z-index: 1; }
.lightbox button:hover { background: rgba(40, 40, 40, 0.8); }
.lightbox button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lightbox__close { top: calc(env(safe-area-inset-top, 0px) + 0.75rem); right: 0.75rem; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); margin: 0; }
.lightbox__prev { left: clamp(0.5rem, 1.5vw, 1.25rem); }
.lightbox__next { right: clamp(0.5rem, 1.5vw, 1.25rem); }
/* image carousel: steps through once, rests on the last image */
.seq { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; row-gap: 0.4rem; width: 100%; position: relative; }
.seq__stage { grid-column: 1 / -1; width: 100%; }
.gallery figure.seq { justify-items: stretch; gap: 0.4rem 1rem; }
@media (min-width: 761px) { .gallery > .seq { width: 75%; margin-inline: auto; } }
.seq__stage { position: relative; display: grid; aspect-ratio: var(--ar); overflow: hidden; }
.seq__slide { grid-area: 1 / 1; min-width: 0; min-height: 0; opacity: 0; visibility: hidden; transition: opacity 1.1s ease, visibility 0s linear 1.1s; }
.seq__slide.is-on { opacity: 1; visibility: visible; transition: opacity 1.1s ease, visibility 0s; }
.seq__slide img { display: block; width: 100%; height: 100%; object-fit: contain; }
.seq__ctl { display: none; align-items: center; justify-content: flex-end; gap: 0.25rem; }
.seq.is-ready .seq__ctl { display: flex; }
.seq__btn { appearance: none; border: 0; background: transparent; color: var(--fg); width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.seq__btn svg { width: 16px; height: 16px; }
.seq__btn:hover { background: rgba(0, 0, 0, 0.06); }
.seq__btn:disabled { opacity: 0.3; cursor: default; background: transparent; }
.seq__dots { display: flex; }
.seq__dot { appearance: none; border: 0; background: transparent; width: 1.6rem; height: 2.75rem; display: grid; place-items: center; cursor: pointer; padding: 0; }
.seq__dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--fg); opacity: 0.25; transition: opacity 0.3s; }
.seq__dot[aria-current]::before { opacity: 0.9; }
.seq__btn:focus-visible, .seq__dot:focus-visible { outline: 2px solid var(--fg); outline-offset: 1px; }
.seq > figcaption { grid-column: 1; grid-row: 2; align-self: center; font-size: var(--step--1); color: var(--muted); min-height: 1em; }
.seq__ctl { grid-column: 2; grid-row: 2; margin-right: -0.6rem; }
@media (prefers-reduced-motion: reduce) { .seq__slide, .seq__slide.is-on { transition: none; } }
.seq.is-init .seq__slide { transition: none !important; }
/* carousel pace: quicker fades; the current dot becomes a small bar that fills until the next image */
.seq__slide { transition: opacity 0.7s ease, visibility 0s linear 0.7s; }
.seq__slide.is-on { transition: opacity 0.7s ease, visibility 0s; }
.seq__dot::before, .seq__dot::after { grid-area: 1 / 1; }
.seq__dot::before { transition: width 0.3s ease, opacity 0.3s; }
.seq__dot[aria-current]::before { width: 20px; border-radius: 4px; }
.seq__dot::after { content: ""; width: 20px; height: 7px; border-radius: 4px; background: var(--fg); opacity: 0; transform: scaleX(0); transform-origin: left; }
.seq.is-ticking .seq__dot[aria-current]::before { opacity: 0.25; }
.seq.is-ticking .seq__dot[aria-current]::after { opacity: 0.9; animation: seq-fill var(--hold, 2600ms) linear forwards; }
@keyframes seq-fill { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .seq.is-ticking .seq__dot[aria-current]::after { animation: none; } }

/* =================== Pitch pages: full-screen statements, concepts, diagrams, film =================== */
.pp { --pa: #0f3a2c; --pb: #c43b74; --pd: #0a0f0c; --pk: #e9d27a; --pi: #f3f1ea; --ps: rgba(243, 241, 234, 0.7); }
.pp-lbl { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.12em; margin: 0 0 1.4rem; color: var(--ps); }
.pp-head { margin: 0; font-weight: 500; text-wrap: balance; letter-spacing: -0.025em; }
.pp-head--l { font-size: clamp(2.1rem, 6.2vw, 5.6rem); line-height: 1.02; max-width: 15ch; }
.pp-head--m { font-size: clamp(1.6rem, 4.2vw, 3.6rem); line-height: 1.08; max-width: 20ch; letter-spacing: -0.02em; }
.pp-head em, .pp-con h3 em { font-style: normal; color: var(--pk); }
.pp-body { font-size: var(--step-1); line-height: 1.45; max-width: 34em; margin: 1.6rem 0 0; color: var(--ps); }
.pp-body + .pp-body { margin-top: 0.8rem; }
/* statements */
.pp-stmt { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: center; overflow: hidden; color: var(--pi); background: var(--pd); }
.pp-stmt--a { background: var(--pa); } .pp-stmt--b { background: var(--pb); }
.pp-stmt--b .pp-head em { color: #fff; } .pp-stmt--b .pp-lbl, .pp-stmt--b .pp-body { color: rgba(255, 255, 255, 0.8); }
.pp-stmt__in { width: 100%; max-width: var(--maxw); margin-inline: auto; padding: clamp(5rem, 12vh, 9rem) var(--gutter); position: relative; z-index: 1; }
.pp-tex::before, .pp-tex::after { content: ""; position: absolute; inset: 0; pointer-events: none; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: right center; mask-position: right center; -webkit-mask-size: auto 108%; mask-size: auto 108%; }
.pp-tex::before { background: color-mix(in srgb, currentColor 7%, transparent); }
.pp-tex::after { background: color-mix(in srgb, currentColor 12%, transparent); }
.pp-tex--tea-olive::before { -webkit-mask-image: url(../motifs/tea-olive-a.svg); mask-image: url(../motifs/tea-olive-a.svg); } .pp-tex--tea-olive::after { -webkit-mask-image: url(../motifs/tea-olive-b.svg); mask-image: url(../motifs/tea-olive-b.svg); }
.pp-tex--pink-dogwood::before { -webkit-mask-image: url(../motifs/pink-dogwood-a.svg); mask-image: url(../motifs/pink-dogwood-a.svg); } .pp-tex--pink-dogwood::after { -webkit-mask-image: url(../motifs/pink-dogwood-b.svg); mask-image: url(../motifs/pink-dogwood-b.svg); }
.pp-tex--magnolia::before { -webkit-mask-image: url(../motifs/magnolia-a.svg); mask-image: url(../motifs/magnolia-a.svg); } .pp-tex--magnolia::after { -webkit-mask-image: url(../motifs/magnolia-b.svg); mask-image: url(../motifs/magnolia-b.svg); }
.pp-tex--camellia::before { -webkit-mask-image: url(../motifs/camellia-a.svg); mask-image: url(../motifs/camellia-a.svg); } .pp-tex--camellia::after { -webkit-mask-image: url(../motifs/camellia-b.svg); mask-image: url(../motifs/camellia-b.svg); }
.pp-tex--golden-bell::before { -webkit-mask-image: url(../motifs/golden-bell-a.svg); mask-image: url(../motifs/golden-bell-a.svg); } .pp-tex--golden-bell::after { -webkit-mask-image: url(../motifs/golden-bell-b.svg); mask-image: url(../motifs/golden-bell-b.svg); }
.pp-tex--azalea::before { -webkit-mask-image: url(../motifs/azalea-a.svg); mask-image: url(../motifs/azalea-a.svg); } .pp-tex--azalea::after { -webkit-mask-image: url(../motifs/azalea-b.svg); mask-image: url(../motifs/azalea-b.svg); }
.pp-tex--holly::before { -webkit-mask-image: url(../motifs/holly-a.svg); mask-image: url(../motifs/holly-a.svg); } .pp-tex--holly::after { -webkit-mask-image: url(../motifs/holly-b.svg); mask-image: url(../motifs/holly-b.svg); }
.pp-tex--milkweed::before { -webkit-mask-image: url(../motifs/milkweed-a.svg); mask-image: url(../motifs/milkweed-a.svg); } .pp-tex--milkweed::after { -webkit-mask-image: url(../motifs/milkweed-b.svg); mask-image: url(../motifs/milkweed-b.svg); }
.pp-tex--monarch::before { -webkit-mask-image: url(../motifs/monarch-a.svg); mask-image: url(../motifs/monarch-a.svg); } .pp-tex--monarch::after { -webkit-mask-image: url(../motifs/monarch-b.svg); mask-image: url(../motifs/monarch-b.svg); }
.pp-tlbl { position: absolute; right: var(--gutter); bottom: clamp(1rem, 3vh, 1.75rem); z-index: 1; margin: 0; font-size: 0.66rem; letter-spacing: 0.08em; color: color-mix(in srgb, currentColor 36%, transparent); }
.pp-stmt__bg { position: absolute; inset: 0; }
.pp-stmt__bg img { width: 100%; height: 100%; object-fit: cover; }
.pp-stmt__bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(10,12,11,0.9) 0, rgba(10,12,11,0.7) 42%, rgba(10,12,11,0.25) 100%); }
@media (max-width: 760px) { .pp-stmt { min-height: 82svh; } .pp-tex::before, .pp-tex::after { -webkit-mask-size: auto 80%; mask-size: auto 80%; -webkit-mask-position: right bottom; mask-position: right bottom; opacity: 0.7; } }
/* concepts */
.pp-con { position: relative; color: var(--pi); background: var(--pd); }
.pp-con__img { margin: 0; }
.pp-con__img img { display: block; width: 100%; }
.pp-con__n { display: block; font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ps); margin-bottom: 0.8rem; }
.pp-con h3 { font-size: clamp(1.6rem, 3.6vw, 3rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; margin: 0; }
.pp-con__txt > p { margin: 0.7rem 0 0; max-width: 32em; font-size: var(--step-1); line-height: 1.4; color: var(--ps); }
.pp-con--over { min-height: 100vh; min-height: 100svh; display: grid; align-items: end; }
.pp-con--over .pp-con__img { position: absolute; inset: 0; }
.pp-con--over .pp-con__img img { height: 100%; object-fit: cover; }
.pp-con--over .pp-con__img::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(8,10,9,0.86) 0, rgba(8,10,9,0.35) 30%, rgba(8,10,9,0) 55%); }
.pp-con--over:has(.pp-more[open]) .pp-con__img::after { background: linear-gradient(0deg, rgba(8,10,9,0.94) 0, rgba(8,10,9,0.8) 45%, rgba(8,10,9,0.25) 85%); }
.pp-con--over .pp-con__txt { position: relative; z-index: 1; width: 100%; max-width: var(--maxw); margin-inline: auto; padding: 0 var(--gutter) clamp(2.5rem, 7vh, 5rem); }
.pp-con--side { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 3vw, 3rem); padding: clamp(1.5rem, 3vw, 2.5rem) 0; }
.pp-con--side + .pp-con--side { border-top: 1px solid color-mix(in srgb, var(--pi) 10%, transparent); }
.pp-con--side .pp-con__img img { height: auto; max-height: 82vh; object-fit: cover; }
.pp-con--side .pp-con__txt { padding-right: var(--gutter); }
@media (min-width: 901px) {
  .pp-con--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); }
  .pp-con--flip .pp-con__img { order: 2; }
  .pp-con--flip .pp-con__txt { order: 1; padding: 0 0 0 var(--gutter); }
}
@media (max-width: 900px) {
  .pp-con--side { grid-template-columns: 1fr; gap: 1rem; padding: 0 0 clamp(2.5rem, 8vw, 4rem); }
  .pp-con--side .pp-con__txt { padding: 0 var(--gutter); }
}
@media (max-width: 760px) {
  .pp-con--over { min-height: 0; display: block; }
  .pp-con--over .pp-con__img { position: relative; aspect-ratio: 3 / 2; }
  .pp-con--over .pp-con__img::after { display: none; }
  .pp-con--over .pp-con__txt { padding-top: 1.1rem; padding-bottom: 3.5rem; }
}
.pp-more { margin-top: 0.9rem; max-width: 36em; }
.pp-more summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.1em; color: var(--pi); padding: 0.35rem 0; }
.pp-more summary::-webkit-details-marker { display: none; }
.pp-more summary::before { content: "+"; font-size: 1.1em; line-height: 1; width: 0.8em; }
.pp-more[open] summary::before { content: "\2212"; }
.pp-more summary .l2 { display: none; } .pp-more[open] summary .l1 { display: none; } .pp-more[open] summary .l2 { display: inline; }
.pp-more summary:focus-visible { outline: 2px solid var(--pi); outline-offset: 3px; }
.pp-more p { margin: 0.5rem 0 0; line-height: 1.55; color: var(--ps); }
/* before / after, crossfading with scroll */
.pp-morph { height: 240vh; position: relative; color: var(--pi); background: var(--pd); }
.pp-morph__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; align-items: end; }
.pp-morph .pp-con__img { position: absolute; inset: 0; }
.pp-morph .pp-con__img img { height: 100%; object-fit: cover; }
.pp-morph .pp-con__img--2 { opacity: var(--p, 0); }
.pp-morph .pp-con__img--1::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(0deg, rgba(8,10,9,0.86) 0, rgba(8,10,9,0.35) 30%, rgba(8,10,9,0) 55%); }
.pp-morph .pp-con__img--2 { z-index: 1; }
.pp-morph .pp-con__txt { position: relative; z-index: 3; width: 100%; max-width: var(--maxw); margin-inline: auto; padding: 0 var(--gutter) clamp(2.5rem, 7vh, 5rem); }
.pp-morph__caps { position: relative; min-height: 3.2em; }
.pp-morph__caps p { position: absolute; left: 0; bottom: 0; margin: 0; max-width: 32em; font-size: var(--step-1); line-height: 1.4; color: var(--ps); }
.pp-morph__caps .c1 { opacity: calc(1 - var(--p, 0)); } .pp-morph__caps .c2 { opacity: var(--p, 0); }
@media (max-width: 760px) {
  .pp-morph { height: auto; } .pp-morph__pin { position: relative; height: auto; display: block; }
  .pp-morph .pp-con__img { position: relative; aspect-ratio: 3 / 2; } .pp-morph .pp-con__img--2 { opacity: 1; }
  .pp-morph .pp-con__img--1::after { display: none; }
  .pp-morph .pp-con__txt { padding-top: 1.1rem; padding-bottom: 3.5rem; }
  .pp-morph__caps { min-height: 0; } .pp-morph__caps p { position: static; opacity: 1 !important; margin-top: 0.5rem; }
}
/* diagrams on a light panel */
.pp-dia { background: #f4f2ee; color: #151515; }
.pp-dia .pp-lbl { color: #6e6e6a; } .pp-dia .pp-body { color: #55534f; } .pp-dia .pp-head em { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.15em; }
.pp-dia__txt { max-width: var(--maxw); margin-inline: auto; padding: clamp(4rem, 9vh, 7rem) var(--gutter) clamp(1rem, 3vw, 2rem); }
.pp-dia__img { margin: 0 auto; max-width: 1800px; padding: 0 var(--gutter) clamp(3rem, 6vw, 5rem); }
.pp-dia__img img { width: 100%; height: auto; display: block; mix-blend-mode: multiply; }
.pp-dia--beside .pp-dia__in { max-width: var(--maxw); margin-inline: auto; padding: clamp(4rem, 10vh, 7rem) var(--gutter); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; min-height: 80vh; }
.pp-dia--beside .pp-dia__txt, .pp-dia--beside .pp-dia__img { padding: 0; max-width: none; margin: 0; }
.pp-dia--beside .pp-dia__img img { max-width: 600px; margin-inline: auto; }
@media (max-width: 760px) { .pp-dia--beside .pp-dia__in { grid-template-columns: 1fr; min-height: 0; } }
/* film */
.pp-film { background: #0c0b0a; color: var(--pi); }
.pp-film__in { max-width: var(--maxw); margin-inline: auto; padding: clamp(4rem, 10vh, 7rem) var(--gutter); }
.pp-film .pp-head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.pp-film video { width: 100%; height: auto; display: block; background: #000; aspect-ratio: 16 / 9; }
.pp-film__alt { margin: 0.9rem 0 0; font-size: var(--step--1); } .pp-film__alt a { color: var(--ps); }
/* reveal: background first, then the words */
.pp-js .pp-fade { opacity: 0; transition: opacity 0.9s ease; }
.pp-js .is-shown .pp-fade, .pp-js .is-shown.pp-fade { opacity: 1; }
.pp-js .pp-tex::before, .pp-js .pp-tex::after { opacity: 0; transition: opacity 0.9s ease; }
.pp-js .pp-tex.is-shown::before, .pp-js .pp-tex.is-shown::after { opacity: 1; }
.pp-js .pp-rise { opacity: 0; transform: translateY(14px); transition: opacity 0.9s ease 0.6s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.6s; }
.pp-js .is-shown .pp-rise { opacity: 1; transform: none; }
.pp-js .pp-morph.is-shown .pp-con__img--2 { opacity: var(--p, 0); }
@media (prefers-reduced-motion: reduce) { .pp-js .pp-fade, .pp-js .pp-rise, .pp-js .pp-tex::before, .pp-js .pp-tex::after { opacity: 1 !important; transform: none !important; transition: none !important; } }
/* ordinary blocks (sketches, notes) between pitch sections */
.pp-plain { padding-block: clamp(3rem, 7vw, 6rem); }
.pp > .pp-plain:first-child { padding-top: clamp(1rem, 2.5vw, 2rem); }   /* straight after the facts, which already have space of their own */
.pp > .pp-plain:last-child { padding-bottom: 0; }                          /* "More projects" brings its own space */
.pp > .pp-plain + .pp-plain { padding-top: 0; }

/* ---- pages made in the admin (/pages/*.html) */
.nav { flex-wrap: wrap; row-gap: 0.35rem; }
.cp-wrap { display: grid; gap: var(--space-xl); }
.cp-wrap > :first-child:not(.cp-back):not(.page-head):not(.intro) { margin-top: var(--space-l); }
.cp-back { margin-top: var(--space-m); margin-bottom: calc(var(--space-xl) * -1 + var(--space-s)); font-size: var(--step--1); }
.cp-back a { text-decoration: none; color: var(--muted); }
.cp-back a:hover { color: var(--fg); }
.cp-head { padding-block: var(--space-l) 0; }
.cp-intro--text .intro__text { grid-column: 1 / span 8; }
.cp-intro:not(.cp-intro--bw) .intro__photo img { filter: none; }
.cp-wt .cp-main { grid-column: 1 / -1; }
.cp-wt .contact { grid-template-columns: minmax(0, 1fr); }
.cp-dl p { font-size: var(--step-1); }
.cp-dl__meta { font-size: var(--step--1); color: var(--muted); margin-left: 0.6rem; }
.cp-dl .muted { font-size: var(--step-0); margin-top: 0.5rem; max-width: 36em; }
.cp-grid__label { margin-bottom: 1.25rem; }
.cp-tiles { margin-top: var(--space-xl); }
.wrap + .cp-tiles { margin-top: 1.1rem; }
.cp-tiles + .wrap, .pp + .wrap.cp-wrap, .cp-tiles + .pp { margin-top: var(--space-xl); }
@media (max-width: 1024px) { .cp-intro--text .intro__text { grid-column: 1 / -1; } }
.cp-wt .wt-sec > h2.label, .cp-wt .contact__body > p.label { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
/* diagrams print onto the paper color (multiply). Fading the image itself breaks the blend mid-fade, so
   the image shows its own background and then snaps; fade a paper-colored cover off it instead. */
.pp-js .pp-dia__img.pp-fade { opacity: 1; position: relative; }
.pp-js .pp-dia__img.pp-fade::after { content: ""; position: absolute; inset: 0; background: #f4f2ee; opacity: 1; transition: opacity 0.9s ease; pointer-events: none; }
.pp-js .is-shown .pp-dia__img.pp-fade::after { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .pp-js .pp-dia__img.pp-fade::after { display: none; } }
/* an Images block set to Full width fills the whole column instead of the 75% image area */
.mwide { display: grid; gap: inherit; }
.mwide > figure.solo { width: 100% !important; }
.mwide > .row { width: min(100%, calc(var(--cap) * var(--ar))) !important; }
.cp-wrap > .cp-head:not(:last-child) { margin-bottom: calc(var(--space-l) - var(--space-xl)); }
/* parked landing page: contact details in place of the page links */
.splash__nav--contact ul { font-size: var(--step-1); }
.splash__nav--contact a { overflow-wrap: anywhere; }

/* =================== Type system ===================
   Every text style reads these variables. The admin's Type screen overrides the values (in assets/site/pages.css);
   these are the defaults. a = size on a phone, b = on a wide screen (px); w weight; lh line height; ls letter spacing (em). */
:root {
  --f-head: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-text: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --name-case: uppercase; --label-case: uppercase;
  --name-a: 24; --name-b: 96; --name-w: 600; --name-lh: 1.0; --name-ls: -0.01;
  --title-a: 32; --title-b: 64; --title-w: 500; --title-lh: 1.12; --title-ls: -0.015;
  --section-a: 24; --section-b: 36; --section-w: 500; --section-lh: 1.2; --section-ls: -0.01;
  --subhead-a: 21; --subhead-b: 21; --subhead-w: 600; --subhead-lh: 1.25; --subhead-ls: -0.005;
  --lead-a: 18; --lead-b: 22; --lead-w: 400; --lead-lh: 1.45; --lead-ls: 0;
  --body-a: 16; --body-b: 16; --body-w: 400; --body-lh: 1.6; --body-ls: 0;
  --small-a: 13; --small-b: 13; --small-w: 400; --small-lh: 1.45; --small-ls: 0;
  --label-a: 13; --label-b: 13; --label-w: 500; --label-lh: 1.3; --label-ls: 0.08;
  --pitchl-a: 33.6; --pitchl-b: 89.6; --pitchl-w: 500; --pitchl-lh: 1.02; --pitchl-ls: -0.025;
  --pitchm-a: 25.6; --pitchm-b: 57.6; --pitchm-w: 500; --pitchm-lh: 1.08; --pitchm-ls: -0.02;
  --concept-a: 25.6; --concept-b: 48; --concept-w: 500; --concept-lh: 1.05; --concept-ls: -0.02;
  --fs-name: clamp(calc(var(--name-a) * 0.0625rem), calc(var(--name-a) * 0.0625rem + (var(--name-b) - var(--name-a)) * (100vw - 300px) / 900), calc(var(--name-b) * 0.0625rem));
  --fs-title: clamp(calc(var(--title-a) * 0.0625rem), calc(var(--title-a) * 0.0625rem + (var(--title-b) - var(--title-a)) * (100vw - 471px) / 941), calc(var(--title-b) * 0.0625rem));
  --fs-section: clamp(calc(var(--section-a) * 0.0625rem), calc(var(--section-a) * 0.0625rem + (var(--section-b) - var(--section-a)) * (100vw - 500px) / 750), calc(var(--section-b) * 0.0625rem));
  --fs-subhead: clamp(calc(var(--subhead-a) * 0.0625rem), calc(var(--subhead-a) * 0.0625rem + (var(--subhead-b) - var(--subhead-a)) * (100vw - 360px) / 920), calc(var(--subhead-b) * 0.0625rem));
  --fs-lead: clamp(calc(var(--lead-a) * 0.0625rem), calc(var(--lead-a) * 0.0625rem + (var(--lead-b) - var(--lead-a)) * (100vw - 333px) / 667), calc(var(--lead-b) * 0.0625rem));
  --fs-body: clamp(calc(var(--body-a) * 0.0625rem), calc(var(--body-a) * 0.0625rem + (var(--body-b) - var(--body-a)) * (100vw - 360px) / 920), calc(var(--body-b) * 0.0625rem));
  --fs-small: clamp(calc(var(--small-a) * 0.0625rem), calc(var(--small-a) * 0.0625rem + (var(--small-b) - var(--small-a)) * (100vw - 360px) / 920), calc(var(--small-b) * 0.0625rem));
  --fs-label: clamp(calc(var(--label-a) * 0.0625rem), calc(var(--label-a) * 0.0625rem + (var(--label-b) - var(--label-a)) * (100vw - 360px) / 920), calc(var(--label-b) * 0.0625rem));
  --fs-pitchl: clamp(calc(var(--pitchl-a) * 0.0625rem), calc(var(--pitchl-a) * 0.0625rem + (var(--pitchl-b) - var(--pitchl-a)) * (100vw - 542px) / 903), calc(var(--pitchl-b) * 0.0625rem));
  --fs-pitchm: clamp(calc(var(--pitchm-a) * 0.0625rem), calc(var(--pitchm-a) * 0.0625rem + (var(--pitchm-b) - var(--pitchm-a)) * (100vw - 610px) / 761), calc(var(--pitchm-b) * 0.0625rem));
  --fs-concept: clamp(calc(var(--concept-a) * 0.0625rem), calc(var(--concept-a) * 0.0625rem + (var(--concept-b) - var(--concept-a)) * (100vw - 711px) / 622), calc(var(--concept-b) * 0.0625rem));
  --step-3: var(--fs-title); --step-2: var(--fs-section); --step-1: var(--fs-lead); --step-0: var(--fs-body); --step--1: var(--fs-small);
  --sans: var(--f-text);
}
body { font-family: var(--f-text); font-weight: var(--body-w); line-height: var(--body-lh); letter-spacing: calc(var(--body-ls) * 1em); }
h1, h2, h3, .card__title { font-family: var(--f-head); }
/* landing-page name */
.splash__name { font-family: var(--f-head); font-size: var(--fs-name); font-weight: var(--name-w); line-height: var(--name-lh); letter-spacing: calc(var(--name-ls) * 1em); text-transform: var(--name-case); }
/* page title */
.page-head h1, .intro__text h1, .project-head h1, .phero h1, .contact__body h2, .page-head--quiet p.work-motto, .gate__title {
  font-family: var(--f-head); font-weight: var(--title-w); line-height: var(--title-lh); letter-spacing: calc(var(--title-ls) * 1em); }
/* section title */
.intro__lead, .project-q, .description .question, .section__lede, .wtile__name, .pquote blockquote p, .page-head--quiet p:not(.label) {
  font-family: var(--f-head); font-weight: var(--section-w); line-height: var(--section-lh); letter-spacing: calc(var(--section-ls) * 1em); }
.splash__nav ul { font-family: var(--f-head); font-weight: var(--section-w); letter-spacing: calc(var(--section-ls) * 1em); }
.splash__nav--contact ul { font-size: var(--fs-lead); }
/* subhead */
.pstory h2, .phase__head h3, .work-sub.label, .wt .deliv h3, .spec h3, .wt-sec .section__lede, .wt .contact__body h2, .dia__flow h4 {
  font-family: var(--f-head); font-size: var(--fs-subhead); font-weight: var(--subhead-w); line-height: var(--subhead-lh); letter-spacing: calc(var(--subhead-ls) * 1em); }
.phase__n { font-family: var(--f-head); font-size: var(--fs-subhead); font-weight: var(--subhead-w); }
/* lead */
.page-head p:not(.label), .description p, .prose p, .phero__q, .wtile__q, .splash__sub, .pnote p, .pp-body, .pp-con__txt > p, .pp-morph__caps p, .page-head .page-head__sub, .contact__list {
  font-weight: var(--lead-w); line-height: var(--lead-lh); letter-spacing: calc(var(--lead-ls) * 1em); }
/* body */
.pstory p, .phase__eng p:not(.phase__k), .phase__eng h4, .dlv dd, .dlv dt, .pinfo__grid dd, .wt .prose p { line-height: var(--body-lh); letter-spacing: calc(var(--body-ls) * 1em); }
/* small */
.gallery figcaption, .inset figcaption, .pquote figcaption, .seq > figcaption, .site-footer, .awards li { font-weight: var(--small-w); line-height: var(--small-lh); letter-spacing: calc(var(--small-ls) * 1em); }
/* label (links and buttons use it one weight heavier) */
.label, .nav a, .jump a, .wt-nav a, .phase__k, .dia__title, .dia__heads span, .deliv h3, .pp-lbl, .pp-con__n, .pp-more summary, .textlink, .btn {
  font-family: var(--f-text); font-size: var(--fs-label); font-weight: var(--label-w); letter-spacing: calc(var(--label-ls) * 1em); text-transform: var(--label-case); }
.textlink, .btn { font-weight: min(calc(var(--label-w) + 100), 700); }
/* pitch pages */
.pp-head { font-family: var(--f-head); }
.pp-head--l { font-size: var(--fs-pitchl); font-weight: var(--pitchl-w); line-height: var(--pitchl-lh); letter-spacing: calc(var(--pitchl-ls) * 1em); }
.pp-head--m { font-size: var(--fs-pitchm); font-weight: var(--pitchm-w); line-height: var(--pitchm-lh); letter-spacing: calc(var(--pitchm-ls) * 1em); }
.pp-con h3 { font-family: var(--f-head); font-size: var(--fs-concept); font-weight: var(--concept-w); line-height: var(--concept-lh); letter-spacing: calc(var(--concept-ls) * 1em); }
/* project pages: a small link back to the page you came from */
.p-back { margin: 0; padding: 0.6rem 0 0.9rem; font-size: var(--step--1); }
.p-back a { color: var(--muted); text-decoration: none; }
.p-back a:hover { color: var(--fg); }
.work-intro { margin: -0.5rem 0 1.5rem; max-width: 40em; color: var(--muted); }

/* links written inside a paragraph */
.pstory p a, .cp-intro .intro__text p a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); transition: text-decoration-color 0.15s; }
.pstory p a:hover, .cp-intro .intro__text p a:hover { text-decoration-color: currentColor; }

/* free text block: a type style, justification, and a place on the 12-column grid */
.mtext { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-m); }
.mtext > p { grid-column: var(--tc, 1) / span var(--ts, 6); margin: 0 0 0.9em; }
.mtext > p:last-child { margin-bottom: 0; }
.mtext + .mtext { margin-top: calc(var(--space-s) * -0.5); }
.mtext--l > p { text-align: left; } .mtext--c > p { text-align: center; } .mtext--r > p { text-align: right; }
.mtext--title > p { font-family: var(--f-head); font-size: var(--fs-title); font-weight: var(--title-w); line-height: var(--title-lh); letter-spacing: calc(var(--title-ls) * 1em); }
.mtext--section > p { font-family: var(--f-head); font-size: var(--fs-section); font-weight: var(--section-w); line-height: var(--section-lh); letter-spacing: calc(var(--section-ls) * 1em); }
.mtext--subhead > p { font-family: var(--f-head); font-size: var(--fs-subhead); font-weight: var(--subhead-w); line-height: var(--subhead-lh); letter-spacing: calc(var(--subhead-ls) * 1em); }
.mtext--lead > p { font-family: var(--f-text); font-size: var(--fs-lead); font-weight: var(--lead-w); line-height: var(--lead-lh); letter-spacing: calc(var(--lead-ls) * 1em); }
.mtext--body > p { font-family: var(--f-text); font-size: var(--fs-body); font-weight: var(--body-w); line-height: var(--body-lh); letter-spacing: calc(var(--body-ls) * 1em); }
.mtext--small > p { font-family: var(--f-text); font-size: var(--fs-small); font-weight: var(--small-w); line-height: var(--small-lh); letter-spacing: calc(var(--small-ls) * 1em); }
.mtext--label > p { font-family: var(--f-text); font-size: var(--fs-label); font-weight: var(--label-w); line-height: var(--label-lh); letter-spacing: calc(var(--label-ls) * 1em); text-transform: var(--label-case, uppercase); }
.mtext a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.mtext a:hover { text-decoration-color: currentColor; }
@media (max-width: 1024px) { .mtext > p { grid-column: 1 / -1; } }

/* Space block: adds blank space on top of the normal gap between blocks */
.mspace { height: 0; }
.mspace--s { height: 1.5rem; } .mspace--m { height: clamp(2.5rem, 5vw, 4rem); } .mspace--l { height: clamp(4rem, 9vw, 7rem); } .mspace--xl { height: clamp(7rem, 14vw, 12rem); }

/* project list cards: 1-4 per row */
.work-grid--three.work-grid--c1 { grid-template-columns: minmax(0, 1fr); }
.work-grid--three.work-grid--c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.work-grid--three.work-grid--c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .work-grid--three.work-grid--c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .work-grid--three.work-grid--c2, .work-grid--three.work-grid--c4 { grid-template-columns: minmax(0, 1fr); } }
/* project list cards show only the project name */
.work-grid--three .card__meta .label, .work-grid--three .card__q, .work-grid--three .card__private { display: none; }

/* "More projects": a dark full-width band so it reads as navigation, not part of the project */
.more { position: relative; margin-top: clamp(4rem, 8vw, 6.5rem); padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2.5rem, 5vw, 4rem); border-top: 0;
  background: #0d0d0d; color: #fff; box-shadow: 0 0 0 100vmax #0d0d0d; clip-path: inset(0 -100vmax); }
.more .label, .more .more__head .label { color: #fff; font-size: var(--step-1); font-weight: 600; letter-spacing: 0.01em; }
.more a, .more .textlink, .more .card, .more .card__title { color: #fff; }
.more .card__img::after { border-color: rgba(255, 255, 255, 0.18); }
.more .card__meta .label, .more .card__q, .more .card__private { display: none; }
.more .card__title { font-size: var(--step-0); font-weight: 600; }
/* project pages end in black: the footer continues the "More projects" band */
main:has(.more) + .site-footer { margin-top: 0; border-top: 0; background: #0d0d0d; }
main:has(.more) + .site-footer .wrap { color: #a8a8a8; }
main:has(.more) + .site-footer a { color: #a8a8a8; }
main:has(.more) + .site-footer a:hover { color: #fff; }
/* intro blocks: the photo's top lines up with the top of the text */
.cp-intro { align-items: start; }