/* ---------- Tokens ---------- */

:root {
  /* Oregon woods at night: fir-black paper, fog-pale ink, blaze-orange accent
     (what you wear in bear country). The site is dark-only. */
  --paper: #0f1713;
  --paper-2: #18231d;
  --ink: #e7ece4;
  --ink-2: #98a59c;
  --rule: #2a372f;
  --accent: #ff6a2c;
  --accent-ink: #ff8a57;
  /* Decorative only (interstitials): a few steps off the paper. */
  --dusk: #22313a;
  --rust: #3b2a24;
  --ridge-far: #1d292c;
  --ridge-near: #17241d;

  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1440px;
  --measure: 40rem;
  --radius: 7px;
  /* Dashed separator: 6px dashes, 5px gaps (used as a border-image). */
  --dash: repeating-linear-gradient(to right, var(--rule) 0 6px, transparent 6px 11px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: dark;
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 300 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* Poppins is set in Light (300); emphasis steps up to Medium, not Bold. */
b,
strong {
  font-weight: 500;
}
img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
}
::selection {
  background: var(--accent);
  color: #fff;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  background: var(--ink);
  color: var(--paper);
  padding: 0.5rem 1rem;
  z-index: 100;
}
.skip:focus {
  top: 1rem;
}

.eyebrow {
  font: 500 0.75rem/1.4 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem var(--gutter);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.site-header.scrolled {
  border-bottom-color: var(--rule);
}
.wordmark {
  font: 600 1.05rem/1 var(--serif);
  font-variation-settings: 'SOFT' 50, 'WONK' 1;
  text-decoration: none;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.site-nav {
  display: flex;
  gap: clamp(1rem, 3vw, 2.25rem);
}
.site-nav a {
  font: 500 0.8125rem/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  padding: 0.35rem 0;
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 2px no-repeat;
  transition: background-size 0.35s var(--ease);
}
.site-nav a:hover,
.site-nav a[aria-current='page'] {
  background-size: 100% 2px;
}
/* Phones: wordmark on its own line, nav below with full-size tap targets */
@media (max-width: 600px) {
  .site-header {
    flex-wrap: wrap;
    row-gap: 0.25rem;
    padding-block: 0.75rem 0.25rem;
  }
  .site-nav {
    width: 100%;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .site-nav a {
    font-size: 0.75rem;
    padding: 0.85rem 0;
  }
}

main {
  display: block;
}

/* ---------- Home ---------- */

.hero {
  position: relative;
  isolation: isolate;
  /* Same top as .statement, so the eyebrow sits where it does on other pages. */
  padding: clamp(3rem, 10vw, 8rem) var(--gutter) clamp(2.5rem, 6vw, 5rem);
  max-width: var(--max);
  margin: 0 auto;
}
.hero-eyebrow {
  margin-bottom: 1.5rem;
}
.hero-title {
  font-family: var(--serif);
  font-weight: 380;
  font-size: clamp(2.1rem, 5.6vw, 5.4rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  margin: 0;
  max-width: 17ch;
  text-wrap: balance;
}
.hero-kicker {
  display: block;
  margin-top: 0.15em;
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
}
.clients {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1.5rem;
  margin: clamp(2.5rem, 6vw, 4.5rem) 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  border-image: var(--dash) 1;
  font: 300 0.95rem/1.4 var(--sans);
  color: var(--ink-2);
}
.clients .eyebrow {
  color: var(--ink);
  margin-right: 0.5rem;
}

.work {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(4rem, 10vw, 8rem);
}
.section-head {
  display: flex;
  justify-content: space-between;
  padding-bottom: 1rem;
  margin-bottom: clamp(1.5rem, 4vw, 3rem);
  /* Dotted rule: round 2px dots every 6px. */
  background: radial-gradient(circle, var(--ink) 0.9px, transparent 1.3px) left bottom / 6px 2px repeat-x;
}
.work-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 4rem);
}
@media (min-width: 760px) {
  .work-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(1.5rem, 5vw, 5rem);
    row-gap: clamp(3rem, 6vw, 6rem);
  }
  /* Staggered columns, magazine-style */
  .work-item:nth-child(even) {
    transform: translateY(clamp(4rem, 12vw, 11rem));
  }
  .work-grid {
    padding-bottom: clamp(4rem, 12vw, 11rem);
  }
}
.work-item a {
  display: block;
  text-decoration: none;
}
.work-thumb {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper-2);
  border-radius: var(--radius);
}
.work-thumb img,
.work-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease), filter 0.6s;
}
.work-item a:hover .work-thumb img,
.work-item a:focus-visible .work-thumb img {
  transform: scale(1.035);
}
.work-caption {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1rem;
  align-items: baseline;
  margin-top: 1rem;
}
.work-title {
  margin: 0;
  font: 420 clamp(1.4rem, 2.4vw, 2rem)/1.1 var(--serif);
  letter-spacing: -0.015em;
  font-variation-settings: 'opsz' 72;
}
.work-title {
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 2px no-repeat;
  justify-self: start;
  padding-bottom: 2px;
  transition: background-size 0.5s var(--ease);
}
.work-item a:hover .work-title,
.work-item a:focus-visible .work-title {
  background-size: 100% 2px;
}
.work-role {
  grid-column: 2;
  margin-top: 0.4rem;
  font-size: 0.9rem;
  color: var(--ink-2);
}

/* ---------- Statement pages (about, contact, 404) ---------- */

.statement {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(3rem, 10vw, 8rem) var(--gutter) clamp(2rem, 5vw, 4rem);
}
.statement .eyebrow {
  margin-bottom: 1.5rem;
}
.statement-title {
  font: 380 clamp(2.4rem, 7vw, 6.5rem)/1 var(--serif);
  letter-spacing: -0.03em;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  margin: 0;
  max-width: 14ch;
  text-wrap: balance;
}
.statement-title em {
  display: block;
  color: var(--accent);
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
  font-weight: 500;
}
.star {
  color: var(--accent);
}

.about-body {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(2rem, 5vw, 3rem);
}
.about-body p {
  max-width: var(--measure);
  margin-left: auto;
  margin-right: max(0px, calc((100% - 2 * var(--measure)) / 2));
}
@media (max-width: 1100px) {
  .about-body p {
    margin-left: 0;
  }
}
/* Drop cap: custom F artwork (build.mjs), three lines tall. */
.about-body .dropcap {
  float: left;
  height: 3.85em;
  width: auto;
  margin: 0.38em 0.4em 0 -0.05em;
}

.contact-book {
  margin: 1rem 0 0;
  color: var(--ink-2);
}
.contact-body {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--ink-2);
  margin: 2.5rem 0 0.75rem;
  max-width: var(--measure);
}
.email {
  display: inline-block;
  font: 420 clamp(1.6rem, 5vw, 3.6rem)/1.15 var(--serif);
  letter-spacing: -0.02em;
  text-decoration: none;
  overflow-wrap: anywhere;
  background: linear-gradient(var(--rule), var(--rule)) 0 100% / 100% 1px no-repeat;
  padding-bottom: 0.1em;
  transition: background-image 0.3s, color 0.3s;
}
.email:hover {
  background-image: linear-gradient(var(--accent), var(--accent));
}
.text-link {
  font: 500 0.875rem/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.page-contact main,
body:has(.statement:only-child) main {
  min-height: 60vh;
}

/* ---------- Prose ---------- */

.prose {
  max-width: var(--measure);
  margin: 0 auto;
}
.prose p {
  margin: 0 0 1.1em;
}
/* Inline links, site-wide: a quiet hairline in the text's own color that
   warms to the orange accent on hover and focus. */
.prose a,
.project-intro a,
.credits a,
.hero-descriptor a,
.glance a,
.claim-proof a,
.resume a,
.rec-meta a,
.contact-body a,
.text-link {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 0.25em;
  transition: text-decoration-color 0.2s, color 0.2s;
}
.prose a:hover,
.project-intro a:hover,
.credits a:hover,
.hero-descriptor a:hover,
.glance a:hover,
.claim-proof a:hover,
.resume a:hover,
.rec-meta a:hover,
.contact-body a:hover,
.text-link:hover,
.prose a:focus-visible,
.text-link:focus-visible {
  text-decoration-color: var(--accent);
}
.prose-lg {
  font-size: clamp(1.08rem, 1.5vw, 1.25rem);
  line-height: 1.65;
}

/* ---------- Project ---------- */

.project-head {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 5rem) var(--gutter) clamp(2rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
.back {
  text-decoration: none;
  justify-self: start;
}
.back:hover {
  color: var(--accent-ink);
}
.project-count {
  color: var(--accent);
  margin-top: clamp(1rem, 4vw, 3rem);
}
.project-title {
  font: 380 clamp(2.5rem, 8vw, 7.5rem)/0.98 var(--serif);
  letter-spacing: -0.035em;
  font-variation-settings: 'opsz' 144, 'SOFT' 20;
  margin: 0;
  text-wrap: balance;
  max-width: 16ch;
}
.project-intro {
  font: 300 clamp(1.15rem, 1.9vw, 1.5rem)/1.5 var(--sans);
  max-width: 44rem;
  margin-top: clamp(0.5rem, 2vw, 1.5rem);
}
.project-intro p {
  margin: 0 0 0.8em;
}
.project-meta {
  margin: 0;
  display: flex;
  gap: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  border-image: var(--dash) 1;
}
.project-meta dt {
  font: 500 0.75rem/1.4 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}
.project-meta dd {
  margin: 0.25rem 0 0;
}
@media (min-width: 1000px) {
  .project-head {
    grid-template-columns: minmax(0, 1fr) 18rem;
    column-gap: 4rem;
  }
  .project-head > * {
    grid-column: 1 / -1;
  }
  .project-intro {
    grid-column: 1;
  }
  .project-meta {
    grid-column: 2;
    align-self: end;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 0.8em;
  }
}

.project-hero {
  margin: 0 auto;
  max-width: var(--max);
  padding: 0 var(--gutter);
}
.project-hero.has-inset {
  position: relative;
}
/* A cut-out object card floated over the hero's lower corner. */
.hero-inset {
  position: absolute;
  right: calc(var(--gutter) + clamp(12px, 2.5vw, 32px));
  bottom: clamp(12px, 2.5vw, 32px);
  width: clamp(140px, 26%, 360px);
  padding: clamp(10px, 1.6vw, 20px);
  background: rgb(15 23 19 / 0.72);
  border: 1px solid rgb(231 236 228 / 0.14);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.project-hero .hero-inset img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  border-radius: 0;
}
.project-hero img,
.project-hero video {
  width: 100%;
  max-height: 82vh;
  object-fit: cover;
  border-radius: var(--radius);
}

.project-body {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6rem) var(--gutter) 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.project-body > .prose {
  margin-top: -0.5rem;
  width: 100%;
}
.section-title {
  font: 420 clamp(1.6rem, 3.4vw, 2.6rem)/1.1 var(--serif);
  letter-spacing: -0.02em;
  font-variation-settings: 'opsz' 96;
  max-width: var(--measure);
  width: 100%;
  margin: clamp(2rem, 6vw, 4rem) auto 0;
  padding-top: 1.25rem;
  border-top: 2px solid var(--accent);
  text-wrap: balance;
}
.project-body > .section-title:first-child {
  margin-top: 0;
}

.pull {
  margin: clamp(1.5rem, 5vw, 4rem) auto;
  max-width: 62rem;
  text-align: center;
}
.pull p {
  margin: 0;
  font: 400 clamp(1.6rem, 3.6vw, 3rem)/1.18 var(--serif);
  font-style: italic;
  letter-spacing: -0.02em;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
  text-wrap: balance;
}
.pull p::before {
  content: '';
  display: block;
  width: 3rem;
  height: 3px;
  background: var(--accent);
  margin: 0 auto 1.75rem;
}
.pull br {
  display: none;
}

.mobile-split {
  display: none;
}
@media (max-width: 759px) {
  .hide-mobile {
    display: none;
  }
  .mobile-split {
    display: grid;
    gap: 1rem;
    justify-items: center;
  }
  .mobile-split img {
    width: 100%;
    max-width: 420px;
    height: auto;
    border-radius: var(--radius);
  }
}

.media {
  margin: 0 auto;
  width: 100%;
}
.media-wide {
  max-width: 1200px;
}
.media-mid {
  max-width: 980px;
}
.media-tall {
  max-width: 640px;
}
.media img,
.media video {
  width: 100%;
  border-radius: var(--radius);
}
.zoom {
  all: unset;
  display: block;
  width: 100%;
  cursor: zoom-in;
  border-radius: var(--radius);
}
.zoom:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Tall page captures in a browser frame */
.media-scroll {
  max-width: 760px;
}
.browser {
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.35);
}
.browser-bar {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule);
}
.browser-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--rule);
}
.browser-view {
  max-height: min(80vh, 760px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.browser-view img {
  border-radius: 0;
}
.media figcaption {
  font: 500 0.7rem/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  text-align: center;
  margin-top: 0.9rem;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 2vw, 1.5rem);
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
@media (min-width: 800px) {
  .gallery {
    grid-template-columns: repeat(min(var(--cols, 3), 3), minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .gallery {
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  }
}
.gallery-item {
  margin: 0;
}
.gallery-item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  transition: transform 0.6s var(--ease);
}
.gallery-item .zoom {
  overflow: hidden;
}
.gallery-item .zoom:hover img {
  transform: scale(1.03);
}
.gallery-item figcaption {
  font: 500 0.95rem/1.3 var(--serif);
  margin-top: 0.6rem;
}
/* Explained galleries: two columns, each image with its full caption. */
.gallery--explained {
  row-gap: clamp(2rem, 5vw, 3.5rem);
}
@media (max-width: 599px) {
  .gallery--explained {
    grid-template-columns: 1fr;
  }
}
.gallery-explain {
  margin-top: 1rem;
}
.gallery-explain p {
  margin: 0;
  max-width: 34rem;
  font: 300 0.95rem/1.6 var(--sans);
  color: var(--ink-2);
}
.gallery-explain strong {
  font: 500 1.15rem/1.3 var(--serif);
  color: var(--ink);
}
.gallery-explain em {
  font-family: var(--serif);
  color: var(--accent);
}

.media-social {
  display: flex;
  justify-content: center;
}
.ig {
  width: min(100%, 400px);
  height: 720px;
  border: 0;
  border-radius: var(--radius);
  background: var(--paper-2);
}
.yt {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
}
.yt iframe,
.yt-play,
.yt-play img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.yt-play {
  all: unset;
  position: absolute;
  inset: 0;
  cursor: pointer;
}
.yt-play img {
  object-fit: cover;
  opacity: 0.85;
  transition: opacity 0.3s, transform 0.8s var(--ease);
}
.yt-play:hover img {
  opacity: 1;
  transform: scale(1.02);
}
.yt-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(56px, 8vw, 84px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--accent);
  transition: transform 0.3s var(--ease);
}
.yt-icon::after {
  content: '';
  position: absolute;
  left: 54%;
  top: 50%;
  translate: -50% -50%;
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #fff;
}
.yt-play:hover .yt-icon,
.yt-play:focus-visible .yt-icon {
  transform: scale(1.08);
}
.yt-play:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

.audio {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
}
.audio iframe {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 12px;
}

.project-body:has(.verse) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.verse {
  max-width: var(--measure);
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem 1.75rem;
  position: relative;
  background: var(--paper-2);
  border-radius: 0 var(--radius) var(--radius) 0;
  font: italic 400 clamp(1.1rem, 1.8vw, 1.3rem)/1.5 var(--serif);
  font-variation-settings: 'SOFT' 100;
}

/* Thin orange zigzag in place of a solid rule, beside quotes and verses.
   The zigzag is a repeating SVG mask, so it takes the accent color in both themes. */
.evidence::before,
.verse::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 6px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpath d='M1 0 L5 5 L1 10' fill='none' stroke='%23000' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 6px 10px repeat-y;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpath d='M1 0 L5 5 L1 10' fill='none' stroke='%23000' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 6px 10px repeat-y;
}
.verse::before {
  left: 0.35rem;
}

/* Selected tweets: short cards in a loose grid, year in mono beneath. */
.tweets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
.tweet {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.25rem 1.35rem 1rem;
  background: var(--paper-2);
  border-radius: var(--radius);
}
.tweet p {
  margin: 0;
  overflow-wrap: anywhere;
  font: 400 1.05rem/1.45 var(--serif);
  font-variation-settings: 'SOFT' 100;
}
.tweet-year,
.post time {
  font: 500 0.75rem/1 var(--mono);
  letter-spacing: 0.06em;
  color: var(--ink-2);
}

/* Blog posts: a reading column with a title row; long ones fold. */
.post {
  max-width: var(--measure);
  width: 100%;
  margin: 0 auto;
  padding-top: 1.25rem;
  border-top: 1px solid transparent;
  border-image: var(--dash) 1;
}
.post header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.post h3 {
  margin: 0;
  font: 500 clamp(1.25rem, 2.2vw, 1.5rem)/1.2 var(--serif);
}
.post-body p {
  margin: 0 0 1em;
}
.post details summary {
  cursor: pointer;
  width: max-content;
  margin-bottom: 1em;
  font: 500 0.8125rem/1 var(--mono);
  color: var(--accent-ink);
}
.post details[open] summary {
  display: none;
}

/* ---------- Credits + next ---------- */

.credits {
  max-width: var(--max);
  margin: clamp(4rem, 10vw, 8rem) auto 0;
  padding: 2rem var(--gutter) 0;
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}
.credits::before {
  content: '';
  grid-column: 1 / -1;
  border-top: 1px solid var(--ink);
  margin-bottom: -0.5rem;
}
@media (min-width: 800px) {
  .credit {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
  }
}
.credit .eyebrow {
  margin-bottom: 0.5rem;
}
.credit p {
  margin: 0 0 0.5rem;
  max-width: var(--measure);
}
.aside {
  color: var(--ink-2);
  font-style: italic;
}
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
}
.badge-item {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
}
.badge-label {
  font: 500 0.8125rem/1.3 var(--mono);
  letter-spacing: 0.04em;
  color: var(--ink-2);
}
/* Award marks are dark artwork; give them a pale plate. */
.badge {
  height: 56px;
  width: auto;
  background: #eef0eb;
  padding: 6px;
  border-radius: var(--radius);
}

.next-project {
  max-width: var(--max);
  margin: clamp(4rem, 10vw, 8rem) auto 0;
  padding: 0 var(--gutter);
}
.next-project a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 1rem 2rem;
  text-decoration: none;
  padding: 2rem 0;
  border-top: 1px solid var(--rule);
  border-image: var(--dash) 1;
  border-bottom: 1px solid var(--rule);
}
.next-project .eyebrow {
  grid-column: 1 / -1;
}
.next-title {
  font: 380 clamp(2rem, 6vw, 5rem)/1 var(--serif);
  letter-spacing: -0.03em;
  font-variation-settings: 'opsz' 144;
  transition: color 0.3s;
}
.next-thumb {
  width: clamp(80px, 16vw, 220px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
}
.next-thumb img,
.next-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.next-project a:hover .next-title {
  color: var(--accent);
}
.next-project a:hover .next-thumb img {
  transform: scale(1.05);
}
.arrow {
  display: inline-block;
  transition: transform 0.4s var(--ease);
}
a:hover .arrow {
  transform: translateX(0.2em);
}

/* ---------- Footer ---------- */

.site-footer {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(4rem, 10vw, 8rem) var(--gutter) 2rem;
}
.footer-cta {
  display: block;
  text-decoration: none;
  margin-bottom: clamp(3rem, 8vw, 6rem);
}
.footer-cta .eyebrow {
  display: block;
  margin-bottom: 1rem;
}
.footer-cta-label {
  display: block;
  font: 380 clamp(3rem, 12vw, 11rem)/0.9 var(--serif);
  letter-spacing: -0.04em;
  font-variation-settings: 'opsz' 144, 'SOFT' 50, 'WONK' 1;
  transition: color 0.3s;
}
.footer-cta:hover .footer-cta-label {
  color: var(--accent);
}
.footer-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  border-image: var(--dash) 1;
  font: 400 0.75rem/1.4 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-2);
}
.footer-meta a {
  text-decoration: none;
}
.footer-meta a:hover {
  color: var(--accent-ink);
}

/* ---------- Lightbox ---------- */

.lightbox {
  border: 0;
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  background: rgb(10 16 13 / 0.96);
  color: #e7ece4;
}
.lightbox::backdrop {
  background: transparent;
}
.lightbox[open] {
  display: grid;
  grid-template-rows: 1fr auto;
  animation: lb-in 0.25s var(--ease);
}
@keyframes lb-in {
  from {
    opacity: 0;
  }
}
.lb-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.5rem 1rem 1rem;
  min-height: 0;
  overflow: hidden;
}
/* Flex (not grid) so the percentage max-height resolves: the whole image
   always fits the viewport above the caption. */
.lb-stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.lb-caption {
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 1.25rem 1.5rem;
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: center;
  color: #cfc8bb;
}
.lb-caption p {
  margin: 0;
}
.lb-caption strong {
  display: block;
  color: #fff;
  font: 500 1.15rem/1.3 var(--serif);
}
.lb-btn {
  all: unset;
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  font: 300 1.4rem/1 var(--sans);
  color: #fff;
  background: rgb(255 255 255 / 0.08);
  transition: background 0.2s;
}
.lb-btn:hover,
.lb-btn:focus-visible {
  background: var(--accent);
}
.lb-close {
  top: 12px;
  right: 12px;
}
.lb-prev,
.lb-next {
  top: 50%;
  translate: 0 -50%;
}
.lb-prev {
  left: 12px;
}
.lb-next {
  right: 12px;
}
.lightbox.single .lb-prev,
.lightbox.single .lb-next {
  display: none;
}

/* ---------- Chalk dust (site.js) ----------
   One fixed canvas just above the page background and beneath all content.
   Tuning lives in DUST at the top of that block in site.js. */
.dust {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
@media print {
  .dust {
    display: none;
  }
}

/* ---------- Reveal on scroll ----------
   site.js adds .reveal to below-the-fold blocks and .in once each enters the
   viewport (once only). House cap: 20px travel, 650ms. Interstitials use the
   quieter variant. Content already on screen at load is never hidden, and
   without JS nothing is hidden at all. */

.js .reveal {
  opacity: 0;
  translate: 0 var(--reveal-y, 16px);
  transition:
    opacity 600ms cubic-bezier(0.25, 0.6, 0.3, 1) var(--reveal-delay, 0ms),
    translate 600ms cubic-bezier(0.25, 0.6, 0.3, 1) var(--reveal-delay, 0ms);
}
.js .reveal--quiet {
  --reveal-y: 10px;
}
.js .reveal.in {
  opacity: 1;
  translate: 0 0;
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    translate: none;
    transition: none;
  }
}
@media print {
  .js .reveal {
    opacity: 1;
    translate: none;
  }
}

/* ---------- Copywriting blocks (concepts, taglines, scripts) ---------- */

.project-kicker {
  margin: 0;
  font: italic 500 clamp(1.1rem, 2vw, 1.5rem) / 1 var(--serif);
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
  color: var(--accent);
}
.project-body em {
  font-style: normal;
  color: var(--accent-ink);
}

.concepts {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.concept {
  display: grid;
  gap: 1.25rem 3rem;
  padding: clamp(1.75rem, 4vw, 3rem) 0;
  border-top: 1px solid var(--rule);
  border-image: var(--dash) 1;
}
.concept:last-child {
  border-bottom: 1px solid var(--rule);
  border-image: var(--dash) 1;
}
.concept > * {
  min-width: 0;
}
@media (min-width: 860px) {
  .concept {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: start;
  }
}
.concept-kicker {
  margin: 0 0 0.75rem;
  font: 500 0.75rem / 1.5 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.concept-headline {
  margin: 0;
  font: 380 clamp(2.2rem, 5.5vw, 4.4rem) / 1 var(--serif);
  letter-spacing: -0.03em;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  text-wrap: balance;
}
.concept-headline .eyebrow {
  display: block;
  margin-bottom: 0.75rem;
  letter-spacing: 0.06em;
}
.concept-headline em {
  font-style: italic;
  color: var(--accent);
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
}
.concept-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.concept-lines li {
  font: italic 400 clamp(1.15rem, 1.8vw, 1.4rem) / 1.3 var(--serif);
  font-variation-settings: 'opsz' 72, 'SOFT' 100;
}
.concept-lines li::before {
  content: '— ';
  color: var(--accent);
  font-style: normal;
}
.concept-lines small {
  font: inherit;
  margin-left: 0.25em;
}
.concept-note {
  margin: 1.25rem 0 0;
  max-width: 32rem;
  color: var(--ink-2);
}
.concept-aside {
  margin: 0.75rem 0 0;
  font: 450 1rem / 1.4 var(--serif);
}
.concept-tag {
  font: 500 0.8rem / 1 var(--mono);
  color: var(--accent-ink);
}

.bunch {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.bunch ul {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.bunch li {
  padding: 0.55rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font: 450 1rem / 1.2 var(--serif);
}

.taglines {
  list-style: none;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--ink);
}
@media (min-width: 760px) {
  .taglines {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.taglines li {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: 1.25rem 1.5rem 1.25rem 0;
  border-bottom: 1px solid var(--rule);
  border-image: var(--dash) 1;
}
.tagline {
  font: 400 clamp(1.4rem, 2.4vw, 1.9rem) / 1.1 var(--serif);
  letter-spacing: -0.015em;
}
.tagline-alt {
  font: 500 0.75rem / 1.4 var(--mono);
  letter-spacing: 0.04em;
  color: var(--ink-2);
}

.columns {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem 2.5rem;
}
@media (min-width: 640px) {
  .columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1040px) {
  .columns {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.column {
  padding-top: 1rem;
  border-top: 2px solid var(--accent);
}
.column h3 {
  margin: 0 0 0.75rem;
  font: 450 1.3rem / 1.15 var(--serif);
}
.column p {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  color: var(--ink-2);
}

/* VO copy and radio scripts */
.copy {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  border-image: var(--dash) 1;
}
@media (min-width: 900px) {
  .copy {
    grid-template-columns: 14rem minmax(0, 1fr);
    column-gap: 3rem;
  }
}
.copy-body {
  max-width: 40rem;
  line-height: 1.6;
}
.copy-body > p {
  margin: 0 0 1em;
}
.copy-who,
.line dt {
  font: 500 0.75rem / 1.4 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.copy-signoff,
.line-vo dd {
  font: 450 1.3rem / 1.25 var(--serif);
  color: var(--accent-ink);
}
.copy .alt {
  font-style: italic;
  color: var(--ink-2);
}
.copy-alts {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.copy-alts li {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font: italic 400 0.98rem / 1.2 var(--serif);
}
.copy-alts li span {
  font: 500 0.68rem / 1 var(--mono);
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.copy-sfx {
  font-style: italic;
  color: var(--ink-2);
}
.copy-sfx span {
  font: 500 0.7rem / 1 var(--mono);
  font-style: normal;
  letter-spacing: 0.06em;
  margin-right: 0.25rem;
}
.lines {
  margin: 0;
  display: grid;
  gap: 0.9rem;
}
.line {
  display: grid;
  gap: 0.15rem;
}
@media (min-width: 640px) {
  .line {
    grid-template-columns: 10.5rem minmax(0, 1fr);
    gap: 1.25rem;
  }
}
.line dt i {
  display: block;
  font: italic 400 0.8rem / 1.3 var(--sans);
  letter-spacing: 0;
  text-transform: none;
}
.line dd {
  margin: 0;
}
.line dd i {
  color: var(--ink-2);
}

.banner p {
  overflow-wrap: anywhere;
}
.banner footer {
  margin-top: 1rem;
}

/* ---------- Stats + definition lists (universal project blocks) ---------- */

.stats {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  border-top: 1px solid var(--ink);
  /* Solid top rule, dashed bottom: the dash is a background so it can differ from the top. */
  background: var(--dash) left bottom / 100% 1px no-repeat;
  padding: 1.5rem 0 calc(1.5rem + 1px);
}
.stats dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 2rem;
}
@media (min-width: 760px) {
  .stats dl {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.stats div {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.35rem;
}
.stats dd {
  margin: 0;
  font: 380 clamp(2.4rem, 5vw, 4rem) / 1 var(--serif);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  font-variation-settings: 'opsz' 144;
  color: var(--accent);
}
.stats dt {
  font: 500 0.75rem / 1.4 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.stats-note {
  margin: 1.25rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-2);
}

.deflist {
  width: 100%;
  max-width: 62rem;
  margin: 0 auto;
  display: grid;
}
.deflist > div {
  display: grid;
  gap: 0.3rem 2rem;
  padding: 1rem 0;
  border-top: 1px solid var(--rule);
  border-image: var(--dash) 1;
}
.deflist > div:last-child {
  border-bottom: 1px solid var(--rule);
  border-image: var(--dash) 1;
}
@media (min-width: 760px) {
  .deflist > div {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  }
}
.deflist dt {
  font: 450 1.15rem / 1.25 var(--serif);
  font-variation-settings: 'opsz' 72;
}
.deflist dt s {
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
}
.deflist dd {
  margin: 0;
  color: var(--ink-2);
}

/* ---------- Narrative + recruiter components (IA pass) ---------- */

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font: 500 0.78rem / 1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.button:hover,
.button:focus-visible {
  background: var(--ink);
  color: var(--paper);
}

/* Hero */
.hero-name {
  margin: 0 0 1.5rem;
  font: 500 0.8rem / 1.4 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.hero-descriptor {
  margin: clamp(3.5rem, 7vw, 5.5rem) 0 0;
  max-width: 35.5rem;
  font: 300 clamp(1rem, 1.3vw, 1.125rem) / 1.6 var(--sans);
  color: var(--accent);
  text-wrap: pretty;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 2rem 0 0;
}
.hero-aside {
  margin: 2rem 0 0;
  max-width: 40rem;
  font: italic 400 1rem / 1.5 var(--serif);
  color: var(--ink-2);
}

/* Scale facts + client strip */
.about-clients {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.scale {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(3rem, 8vw, 6rem);
}
.scale dl {
  margin: 0;
  padding: 1.5rem 0;
  border-top: 1px solid var(--ink);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 2rem;
}
@media (min-width: 860px) {
  .scale dl {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.scale dl > div {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.4rem;
}
.scale dd {
  margin: 0;
  font: 380 clamp(2rem, 4vw, 3.2rem) / 1 var(--serif);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  font-variation-settings: 'opsz' 144;
  color: var(--accent);
}
.scale dt {
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--ink-2);
  max-width: 16rem;
}
.scale .clients {
  margin-top: 0;
}

/* The argument: claim + third-party evidence */
.argument {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(4rem, 10vw, 8rem);
}
.claim {
  display: grid;
  gap: 1.5rem 4rem;
  padding: clamp(1.75rem, 4vw, 3rem) 0;
  /* Dashed separator: 6px dashes, 5px gaps (more even than a border-style dash). */
  background: repeating-linear-gradient(to right, var(--rule) 0 6px, transparent 6px 11px) left bottom / 100% 1px no-repeat;
}
@media (min-width: 900px) {
  .claim {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}
.claim-text {
  min-width: 0;
}
.claim-title {
  margin: 0;
  font: 380 clamp(1.8rem, 3.6vw, 2.9rem) / 1.05 var(--serif);
  letter-spacing: -0.025em;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  text-wrap: balance;
}
.claim-text p {
  margin: 1.4rem 0 0;
  max-width: 34rem;
  color: var(--ink-2);
}
.claim-proof .eyebrow {
  margin-right: 0.4rem;
}
.argument-more {
  margin: 1.5rem 0 0;
}
/* Desktop: sit under the recommendations column, aligned with the quote text
   (half the grid + half the 4rem gap + the evidence rule and padding). */
@media (min-width: 900px) {
  .argument-more {
    margin-left: calc(50% + 2rem + 1.25rem + 2px);
  }
}

.evidence {
  position: relative;
  margin: 0;
  padding-left: 1.5rem;
}
.evidence blockquote {
  margin: 0;
}
.evidence blockquote p {
  margin: 0;
  font: italic 400 clamp(1.2rem, 2vw, 1.55rem) / 1.35 var(--serif);
  font-variation-settings: 'opsz' 72, 'SOFT' 100;
  text-wrap: pretty;
}
.evidence blockquote p::before {
  content: '“';
}
.evidence blockquote p::after {
  content: '”';
}
/* Quote attributions, hero and evidence alike: "— Name, Company" */
.hero-quote figcaption,
.evidence figcaption {
  margin-top: 1.25rem;
  font: 500 0.8rem / 1.4 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.hero-quote cite,
.evidence cite {
  font-style: normal;
}
.case-evidence,
.about-evidence {
  max-width: 50rem;
  margin: clamp(1rem, 3vw, 2rem) auto 0;
  padding: 0 var(--gutter);
}
.case-evidence {
  margin-top: 100px;
}

/* Featured work: two lead cases, then four supporting */
.features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem);
}
.features-lead {
  margin-bottom: clamp(3rem, 7vw, 6rem);
}
@media (min-width: 760px) {
  .features-lead {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .features-support {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .features-support {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.feature {
  min-width: 0;
}
.feature-link {
  display: block;
  text-decoration: none;
}
.feature-thumb {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper-2);
  border-radius: var(--radius);
}
.features-support .feature-thumb {
  aspect-ratio: 1;
}
/* Phones: supporting cases become thumbnail + title rows so copy stays primary */
@media (max-width: 759px) {
  .features-support .feature-link {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
  }
  .features-support .feature-text {
    margin-top: 0;
  }
}
.feature-thumb > img,
.feature-thumb > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.feature-link:hover .feature-thumb > img,
.feature-link:focus-visible .feature-thumb > img {
  transform: scale(1.035);
}
.feature-text {
  display: grid;
  margin-top: 1rem;
}
.feature-title {
  margin: 0;
  justify-self: start;
  font: 420 clamp(1.4rem, 2.4vw, 2rem) / 1.1 var(--serif);
  letter-spacing: -0.015em;
  font-variation-settings: 'opsz' 72;
  transition: color 0.3s;
}
.features-lead .feature-title {
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
}
.feature-link:hover .feature-title,
.feature-link:focus-visible .feature-title {
  color: var(--accent);
}
.feature-facts {
  margin: 1rem 0 0;
  display: grid;
  gap: 0.6rem;
}
.feature-facts > div {
  display: grid;
  gap: 0.15rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--rule);
  border-image: var(--dash) 1;
}
.feature-facts dt {
  font: 500 0.68rem / 1.3 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.feature-facts dd {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
}
.features-lead .feature-facts dd {
  font-size: 1.02rem;
}

/* Selected archive: compact list */
.archive {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(4rem, 10vw, 7rem);
}
.archive-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.archive-list a {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  grid-template-areas: 'thumb title arrow' 'thumb role arrow';
  column-gap: 1.25rem;
  align-items: center;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rule);
  border-image: var(--dash) 1;
  text-decoration: none;
  min-height: 44px;
}
@media (min-width: 760px) {
  .archive-list a {
    grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-areas: 'thumb title role arrow';
  }
}
.archive-thumb {
  grid-area: thumb;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--paper-2);
}
.archive-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Black and white at rest; colour fades in on hover or keyboard focus. */
  filter: grayscale(1);
  transition: filter 0.6s var(--ease);
}
.archive-list a:hover .archive-thumb img,
.archive-list a:focus-visible .archive-thumb img {
  filter: none;
}
@media (prefers-reduced-motion: reduce) {
  .archive-thumb img { transition: none; }
}
.archive-title {
  grid-area: title;
  font: 420 clamp(1.15rem, 2vw, 1.5rem) / 1.15 var(--serif);
  font-variation-settings: 'opsz' 72;
}
.archive-role {
  grid-area: role;
  font-size: 0.9rem;
  color: var(--ink-2);
}
.archive-list .arrow {
  grid-area: arrow;
  color: var(--accent);
}
.archive-list a:hover .archive-title {
  color: var(--accent-ink);
}

/* Personal projects: a separate, quieter door */
.personal {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.personal-link {
  display: grid;
  gap: 1.5rem 3rem;
  align-items: center;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--paper-2);
  border-radius: var(--radius);
  text-decoration: none;
}
@media (min-width: 760px) {
  .personal-link {
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  }
}
.personal-thumb {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
}
.personal-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.personal-text {
  display: grid;
  gap: 0.75rem;
}
.personal-title {
  font: 380 clamp(2rem, 4.5vw, 3.6rem) / 1 var(--serif);
  letter-spacing: -0.03em;
  font-variation-settings: 'opsz' 144;
}
.personal-intro {
  font: italic 400 1.15rem / 1.4 var(--serif);
  color: var(--ink-2);
}
.personal-link:hover .personal-title {
  color: var(--accent);
}

/* Case summary on project pages */
.case-summary {
  max-width: var(--max);
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  padding: 0 var(--gutter);
  display: grid;
  gap: 0;
}
.case-row {
  display: grid;
  gap: 0.5rem 2rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--rule);
  border-image: var(--dash) 1;
}
.case-row:first-child {
  border-top-color: var(--ink);
  border-image: none;
}
@media (min-width: 860px) {
  .case-row {
    grid-template-columns: 14rem minmax(0, 46rem);
  }
}
.case-row .eyebrow {
  padding-top: 0.3rem;
}
.case-problem {
  margin: 0;
  font: 400 clamp(1.25rem, 2.2vw, 1.7rem) / 1.3 var(--serif);
  font-variation-settings: 'opsz' 72;
  text-wrap: balance;
}
.case-row ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}
.case-row li {
  padding-left: 1.1rem;
  position: relative;
}
.case-row li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--accent);
}
.project-meta {
  flex-wrap: wrap;
}

/* About: portrait + at a glance */
.about-glance {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(3rem, 8vw, 5rem);
  display: grid;
  gap: 2rem clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (min-width: 860px) {
  .about-glance {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }
}
.about-portrait {
  margin: 0;
  max-width: 28rem;
}
.about-portrait img {
  width: 100%;
  border-radius: var(--radius);
}
.glance-list {
  margin: 1rem 0 0;
}
.glance-list > div {
  display: grid;
  gap: 0.3rem 1.5rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--rule);
  border-image: var(--dash) 1;
}
@media (min-width: 560px) {
  .glance-list > div {
    grid-template-columns: 7rem minmax(0, 1fr);
  }
}
.glance-list dt {
  font: 500 0.72rem / 1.6 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.glance-list dd {
  margin: 0;
  line-height: 1.55;
}
.glance-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 1.25rem 0 0;
}
.text-link {
  display: inline-block;
  padding: 0.6rem 0;
}

/* Résumé */
.resume {
  max-width: 62rem;
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6rem) var(--gutter) 0;
}
.resume-head .eyebrow {
  margin-bottom: 1.5rem;
}
.resume-tagline {
  margin: 1rem 0 0;
  font: italic 500 clamp(1.2rem, 2.4vw, 1.7rem) / 1.25 var(--serif);
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
  color: var(--accent);
}
.resume-contact {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.75rem;
}
.resume-section {
  display: grid;
  gap: 0.75rem 2rem;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: calc(1.25rem + 1px);
  /* Dotted top rule, same dots as .section-head. */
  background: radial-gradient(circle, var(--ink) 0.9px, transparent 1.3px) left top / 6px 2px repeat-x;
}
@media (min-width: 860px) {
  .resume-section {
    grid-template-columns: 11rem minmax(0, 1fr);
  }
}
.resume-section > :not(h2) {
  min-width: 0;
}
.resume-section p {
  margin: 0 0 0.9rem;
}
.resume-summary {
  font: 300 clamp(1.15rem, 1.8vw, 1.35rem) / 1.5 var(--sans);
}
.resume-bullets {
  margin: 0;
  padding-left: 1.1rem;
}
.resume-bullets li {
  margin-bottom: 0.4rem;
}
.resume-jobs {
  list-style: none;
  margin: 0;
  padding: 0;
}
.job {
  padding-bottom: 1.75rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--rule);
  border-image: var(--dash) 1;
  scroll-margin-top: 6rem;
}
.job:last-child {
  border-bottom: 0;
}
.job-title {
  margin: 0;
  font: 450 clamp(1.25rem, 2vw, 1.55rem) / 1.2 var(--serif);
  font-variation-settings: 'opsz' 72;
}
.job-org {
  color: var(--ink-2);
}
.job-dates {
  margin: 0.35rem 0 0.75rem;
  font: 500 0.75rem / 1.5 var(--mono);
  letter-spacing: 0.04em;
  color: var(--ink-2);
}

/* Recommendations archive */
.recs {
  list-style: none;
  max-width: 50rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.rec {
  padding: 1.75rem 0;
  border-top: 1px solid var(--rule);
  border-image: var(--dash) 1;
}
.rec-name {
  margin: 0;
  font: 450 1.4rem / 1.2 var(--serif);
}
.rec-meta {
  margin: 0.4rem 0 1rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.rec-text p {
  margin: 0 0 0.8rem;
  max-width: var(--measure);
}

/* Contact + footer links */
.contact-links {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.75rem;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}
.footer-links a {
  text-transform: none;
  letter-spacing: 0.02em;
  padding: 0.5rem 0;
}

/* Print: clean résumé and case studies (also "Save as PDF" from the browser) */
@media print {
  :root {
    --paper: #fff;
    --paper-2: #fff;
    --ink: #000;
    --ink-2: #333;
    --rule: #bbb;
  }
  .site-header,
  .site-footer,
  .skip,
  .next-project,
  .interstitial,
  .hero-actions,
  .lightbox {
    display: none !important;
  }
  body {
    font-size: 10.5pt;
  }
  .job,
  .resume-section,
  .rec,
  .claim {
    break-inside: avoid;
  }
  /* Dotted and dashed rules are backgrounds; keep them on paper. */
  .resume-section,
  .resume-scale dl {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  a {
    text-decoration: none;
  }
}

/* Kept for screen readers and search: the visible name is the header wordmark. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Scale facts on the résumé (moved from the home page) */
.resume-scale {
  padding: 0;
  margin-top: clamp(2rem, 5vw, 3rem);
}
.resume-scale dl {
  /* Dotted top rule (same dots as .section-head) in place of the solid one, dashed bottom. */
  border-top: 0;
  padding: calc(1.5rem + 2px) 0 calc(1.5rem + 1px);
  background:
    radial-gradient(circle, var(--ink) 0.9px, transparent 1.3px) left top / 6px 2px repeat-x,
    var(--dash) left bottom / 100% 1px no-repeat;
}
@media (min-width: 860px) {
  .resume-scale dl {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.page-home .scale .clients {
  border-top-color: var(--ink);
  border-image: none;
}

.statement-aside {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
}

/* Client logos (fall back to names until artwork is added) */
.client-logo {
  height: clamp(22px, 3vw, 32px);
  width: auto;
  max-width: 9rem;
  object-fit: contain;
  opacity: 0.8;
}
/* Logo artwork is supplied dark; invert it for the dark page. */
.client-logo {
  filter: invert(1);
}

/* Pipe separator for inline link lists */
.sep {
  display: inline-block;
  margin: 0 0.9em;
  color: var(--rule);
}

.claim-arrow {
  margin-right: 0.6em;
}
/* Dot pair (in place of small orange arrows). */
.dot-pair {
  display: inline-block;
  width: 0.85em;
  height: 0.6em;
  vertical-align: 0.05em;
  overflow: visible;
}
.dp-dot { fill: var(--accent); }
.dp-ring { fill: none; stroke: var(--accent); stroke-width: 1.1; vector-effect: non-scaling-stroke; }

/* Hero testimonial */
.hero-quote {
  margin: 0;
}
.hero-quote blockquote {
  margin: 0;
}
.hero-quote .hero-title {
  font-size: clamp(2rem, 4.4vw, 4rem);
  line-height: 1.08;
  max-width: 26ch;
  text-indent: -0.4em;
}

/* Rotating hero quotes: all four share one grid cell, so the box always
   takes the height of the tallest quote at the current width (no layout
   shift). Inactive quotes stay in the HTML but are invisible and removed
   from the accessibility tree via visibility: hidden. */
.hero-rotator {
  display: grid;
  outline-offset: 0.75rem;
}
.hero-rotator > .hero-quote {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.4rem);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), visibility 0s linear 0.9s;
}
.hero-rotator > .hero-quote.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.9s var(--ease) 0.15s, transform 0.9s var(--ease) 0.15s, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .hero-rotator > .hero-quote {
    transform: none;
    transition: none;
  }
}

/* Hero art: the illustration behind the rotating quotes. */
.hero-anchors {
  position: absolute;
  inset: 0;
  /* On screens wider than the content box, run to the viewport's right edge
     so the art bleeds off the page instead of stopping short. */
  right: min(0px, calc((100% - 100vw) / 2));
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
/* Anchored bottom-right at the hero's height, with soft fades on the left,
   top and bottom so its near-black melts into the page. */
.anchor-photo {
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  width: auto;
  max-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent, rgb(0 0 0 / 0.5) 22%, #000 42%), linear-gradient(to bottom, transparent, #000 22%, #000 72%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, rgb(0 0 0 / 0.5) 22%, #000 42%), linear-gradient(to bottom, transparent, #000 22%, #000 72%, transparent);
  mask-composite: intersect;
}
/* Phones: the art leaves the background and takes its own band between the
   quote and the descriptor, full bleed, so nothing sits on top of it. The band
   crops away most of the empty sky; soft edges melt it into the page. */
@media (max-width: 759px) {
  .hero {
    display: flex;
    flex-direction: column;
  }
  .hero-rotator {
    order: 1;
  }
  .hero-anchors {
    order: 2;
    position: relative;
    inset: auto;
    z-index: auto;
    margin: 1.5rem calc(-1 * var(--gutter)) 0;
    aspect-ratio: 1672 / 700;
  }
  .hero-descriptor {
    order: 3;
    margin-top: 1rem;
  }
  .anchor-photo {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 72%;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 25%), linear-gradient(to bottom, transparent, #000 18%, #000 84%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 25%), linear-gradient(to bottom, transparent, #000 18%, #000 84%, transparent);
  }
}

/* Interstitials: quiet authored pauses between sections. Each band sits partly inside the previous section's bottom
   padding, so it adds only a little space: ~4rem on desktop, ~2rem on phones. */
.interstitial {
  position: relative;
  height: clamp(5rem, 11vw, 10rem);
  margin-top: calc(-1 * clamp(3rem, 7.5vw, 6rem));
  margin-bottom: clamp(1rem, 2vw, 2rem);
  overflow: hidden;
  pointer-events: none;
}
.ix-art {
  position: absolute;
  top: 50%;
  display: block;
  height: auto;
  overflow: visible;
  transform: translateY(-50%);
}
.ix-line,
.ix-dots {
  fill: none;
  stroke: var(--ink-2);
  vector-effect: non-scaling-stroke;
}
.ix-line { stroke-width: 1; stroke-linejoin: round; opacity: 0.35; }
.ix-dots { stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 0 6; opacity: 0.4; }

/* Interstitials, family B (objects, artifacts, ephemera). Same band mechanics as
   family A; one small artifact each, in the hero's decorative tones. */
.interstitial--tail {
  height: clamp(5rem, 10vw, 8rem);
  margin-top: clamp(1rem, 3vw, 2rem);
  margin-bottom: calc(-1 * clamp(3rem, 7.5vw, 6rem));
}
/* B1: swatch enters from the left edge. */
.ix-pattern {
  left: 0;
  width: clamp(11rem, 17vw, 15.5rem);
}
/* B2: tag sits low, right of centre, slightly askew. */
.ix-tag {
  top: 58%;
  left: 68%;
  width: clamp(5.5rem, 8vw, 7.5rem);
  transform: translateY(-50%) rotate(-6deg);
}
/* B3: proof marks off to the right. */
.ix-mark {
  left: 64%;
  width: clamp(5.5rem, 8vw, 7.5rem);
}
.ix-cloth { fill: var(--ridge-near); }
.ix-dia-a { fill: var(--ridge-far); }
.ix-dia-b { fill: var(--dusk); }
.ix-dia-rust,
.ix-stub { fill: var(--rust); }
.ix-reg,
.ix-crop,
.ix-rule {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0.4;
}
.ix-reg * { vector-effect: non-scaling-stroke; }
@media (max-width: 759px) {
  .ix-pattern .ix-reg,
  .ix-mark .ix-crop {
    display: none;
  }
  .ix-pattern { width: 8.5rem; left: -1.5rem; }
  .ix-tag { left: auto; right: -1.25rem; width: 5.5rem; }
  .ix-mark { left: 58%; width: 4rem; }
}

/* Interstitials, family C (play, chance, choice, narrative). Inline bands live
   between blocks inside a section and borrow part of the space above. */
.interstitial--inline {
  height: clamp(3.5rem, 7vw, 6rem);
  margin: calc(-1 * clamp(1.5rem, 3.5vw, 3rem)) 0 0;
}
/* C1: right of centre, between the two lead cases and the four that follow. */
.ix-choice {
  left: 57%;
  width: clamp(11rem, 17vw, 16rem);
}
/* C2: small, near the left of the text column. */
.interstitial-facet {
  margin-top: 0;
}
.ix-facet {
  top: 80%;
  left: 6%;
  width: clamp(3.75rem, 5vw, 4.75rem);
}
/* C3: off to the right of the résumé column. */
.ix-move {
  left: 54%;
  width: clamp(11.5rem, 18vw, 16.5rem);
}
.ix-node { fill: var(--ink-2); opacity: 0.45; }
.ix-pick { fill: var(--accent); opacity: 0.85; }
.ix-open { fill: none; stroke: var(--ink-2); stroke-width: 1; opacity: 0.45; vector-effect: non-scaling-stroke; }
.ix-stub { opacity: 0.25; }
.ix-gem { fill: var(--dusk); }
.ix-cut { fill: none; stroke: var(--paper); stroke-width: 1; stroke-linejoin: round; opacity: 0.6; vector-effect: non-scaling-stroke; }
.ix-space { fill: none; stroke: var(--ink-2); stroke-width: 1; opacity: 0.4; vector-effect: non-scaling-stroke; }
.ix-far { opacity: 0.22; }
.ix-detour { fill: var(--rust); }
@media (max-width: 759px) {
  .ix-stub,
  .ix-far {
    display: none;
  }
  .ix-choice { left: auto; right: 0; width: 10.5rem; }
  .ix-facet { left: auto; right: 4%; width: 3.5rem; }
  .ix-move { left: auto; right: -1rem; width: 10rem; }
}

/* Homepage art bands: full-width illustrations, cropped to the band and faded
   top and bottom so their near-black melts into the page. */
.interstitial--art {
  height: clamp(11rem, 24vw, 22rem);
}
.interstitial--tall {
  height: clamp(12rem, 30vw, 27rem);
}
.ix-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent);
}
/* Phones: show each artwork whole at its own proportions (no side crop). */
@media (max-width: 759px) {
  .interstitial--art,
  .interstitial--tall {
    height: auto;
    aspect-ratio: var(--ix-ar);
  }
  .ix-photo {
    object-position: 50% 50% !important;
  }
}

/* Loop arrow (Off the clock, Let's talk): an SVG arrow whose line flies one loop-de-loop on hover (the
   shaft bends along the loop and the head steers), then lands straight; it
   glides back on mouse-out. site.js drives it. Without JS or with reduced motion
   it is a plain arrow with the usual small nudge. */
.loop-arrow {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 0.6em;
}
.loop-arrow svg {
  position: absolute;
  left: 0;
  /* puts the shaft at mid x-height, where the text arrow used to sit */
  bottom: 0.1em;
  width: calc(1em * 116 / 52);
  height: auto;
  overflow: visible;
}
.la-body,
.la-head {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
a:hover .loop-arrow {
  transform: none;
}
/* At display size the shared stroke would read heavy; match the light serif. */
.footer-cta .la-body,
.footer-cta .la-head,
.next-title .la-body,
.next-title .la-head {
  stroke-width: 1.35;
}
@media (prefers-reduced-motion: reduce) {
  a:hover .loop-arrow {
    transform: translateX(0.2em);
  }
}

/* Footer art: full bleed between Let's talk and the footer links. It tucks into
   the space under the link, so the footer grows only by part of its height. */
.interstitial--footer {
  margin: calc(-1 * clamp(2.5rem, 6vw, 4.5rem)) calc(50% - 50vw) clamp(1rem, 3vw, 2.5rem);
}