:root {
  --type-meta: 12px;
  --type-small: 14px;
  --type-body: 16px;
  --type-title: clamp(22px, 2vw, 24px);
  --type-section: calc(clamp(28px, 3.6vw, 48px) * var(--display-scale, 1));
  --type-display: calc(clamp(36px, 6vw, 80px) * var(--display-scale, 1));
  --hero-size: var(--type-display);
  --notebook-size: var(--type-display);
}

body { font-size: var(--type-body); line-height: 1.65; }
em { font-family: inherit; letter-spacing: inherit; }
h1, .hero h1, .page-hero h1, .project-title-row h1, .notebook-header h1 {
  font-size: var(--type-display);
  line-height: 1.1;
  letter-spacing: -.045em;
}
.hero h1 .role-stack { font-size: inherit; }
.about-preview-copy h2, .about-text h2, .footer-title, .next-project h2 {
  font-size: var(--type-section);
  line-height: 1.2;
  letter-spacing: -.035em;
}
.section-heading h2, .project-label h3, .project-grid.is-list .project-label h3,
.study h2, .project-story aside > p, .legal-copy h2 {
  font-size: var(--type-title);
  line-height: 1.35;
  letter-spacing: -.025em;
}
.legal-copy h3 { font-size: var(--type-body); font-weight: 600; line-height: 1.5; letter-spacing: 0; }
.hero-bottom > p, .about-preview-copy p, .page-hero > p, .project-hero > p,
.prose, .about-text .prose, .project-story > .prose, .notebook-intro p, .video-link {
  font-size: var(--type-body);
  line-height: 1.75;
}
.prose { max-width: 65ch; }
.text-link, .email-link, .scroll-link, .filters, .view-switch, .contact-meta,
.copy-email, .copy-status, .project-label p, .project-grid.is-list .project-label p,
.project-grid.is-list .project-summary, .project-facts dd, .credits,
.project-story summary, .project-gallery figcaption, .study-source,
.study figcaption > p, .lightbox-close, .lightbox p, .gallery-status,
.footer-bottom, .role-pause, .video-link small {
  font-size: var(--type-small);
  line-height: 1.6;
}
.eyebrow, .project-story aside > .eyebrow, .notebook-header > .eyebrow,
.project-number, .study-meta, .project-facts dt, .section-heading sup, .filters sup {
  font-size: var(--type-meta);
  line-height: 1.5;
  letter-spacing: .06em;
}
.study-meta { flex-wrap: wrap; }

.notebook {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 56px 40px;
  max-width: 1120px;
}
.notebook .study:nth-child(n) { grid-column: auto; grid-row: auto; width: 100%; margin: 0; }
.study figcaption { padding: 16px 0 0; }
.study-image img { max-height: 360px; }
.contact-email { font-size: var(--type-section); line-height: 1.35; }


.header .brand { font-size: var(--type-body); line-height: 1.4; }
.header .navigation { font-size: var(--type-body); gap: 28px; }
.header .navigation a { min-height: 44px; line-height: 1.5; }
.header .navigation a[aria-current] { color: var(--ink); font-weight: 600; }
.header .navigation a[aria-current]::after {
  clip-path: inset(0);
  transform: none;
  opacity: .8;
}
@media (min-width: 701px) and (max-width: 900px) {
  .header { column-gap: 20px; }
  .header .navigation { gap: 20px; }
  .header .navigation a:last-child { margin-left: 0; }
}
@media (max-width: 700px) {
  :root { --type-display: calc(clamp(32px, 8.5vw, 52px) * var(--display-scale, 1)); }
  .header .navigation a { font-size: var(--type-section); line-height: 1.3; }
  .header .navigation a[aria-current]::before {
    content: '';
    width: 8px;
    height: 8px;
    margin-right: 12px;
    background: currentColor;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .header .navigation a[aria-current] { justify-content: flex-start; }
  .header .navigation a[aria-current] > span { margin-left: auto; }
  .section-heading { flex-wrap: wrap; gap: 12px; }
  .project-title-row > .eyebrow { white-space: normal; }
  .notebook-intro p { max-width: 38ch; }
  .notebook { grid-template-columns: 1fr; gap: 40px; }
  .contact-email { font-size: var(--type-title); overflow-wrap: anywhere; }
  .footer-bottom > div { gap: 16px; }
}


:root { --intro-space: clamp(40px, calc(var(--section-space, 96px) * .65), 80px); }
.page-intro, .hero.page-intro {
  padding-top: var(--intro-space);
  padding-bottom: var(--intro-space);
  text-align: left;
}
.intro-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 24px;
  margin-bottom: 24px;
}
.page-intro .back-link { display: inline-flex; margin: 0; min-height: 24px; gap: 8px; }
.page-intro h1, .hero.page-intro h1 {
  font-family: var(--heading-font, var(--sans));
  font-size: var(--type-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.045em;
  max-width: 20ch;
  text-wrap: balance;
  overflow-wrap: anywhere;
  hyphens: none;
}
.page-intro .intro-copy {
  margin: 24px 0 0;
  max-width: 48ch;
  color: var(--muted);
  font-size: var(--type-body);
  line-height: 1.75;
}
.hero.page-intro .role-stack { font-family: inherit; font-size: inherit; line-height: inherit; letter-spacing: inherit; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 28px; margin-top: 28px; }
.hero-roles .role-pause { margin-top: 8px; font-size: var(--type-small); }
.hero-actions .scroll-link { font-size: var(--type-small); }
.contact-details { padding-bottom: var(--section-space); }
.contact-details .contact-email { font-size: var(--type-title); line-height: 1.4; padding: 10px 0; margin: 0; }
.contact-details .contact-email::after { bottom: calc(10px + .15em); }
.contact-details .contact-email .icon { width: 24px; height: 24px; }
.contact-details .contact-meta { margin-top: 24px; font-size: var(--type-small); line-height: 1.6; }
.legal-copy, .error-actions { margin-bottom: var(--section-space); }
.about-text .prose { color: var(--ink); }
.about-layout { gap: clamp(32px, 6vw, 88px); }
.about-layout .portrait { width: 100%; }
.portrait > .eyebrow { margin-top: 16px; }
.section-heading { align-items: baseline; }
.work-toolbar { margin-bottom: 40px; }
.filters, .view-switch { flex-wrap: wrap; }
.filters button, .view-switch button { min-height: 44px; }
@media (max-width: 700px) {
  :root { --intro-space: 36px; }
  .intro-kicker { margin-bottom: 20px; gap: 16px; }
  .page-intro .intro-copy { margin-top: 20px; }
  .hero-actions { margin-top: 24px; gap: 24px; }
  .contact-details, .about-layout { padding-bottom: 64px; }
  .legal-copy, .error-actions { margin-bottom: 64px; }
  .work-toolbar { margin-bottom: 32px; }
}


@media (prefers-reduced-motion: no-preference) {
  html.js:not([data-motion="off"]) .hero.page-intro .intro-kicker,
  html.js:not([data-motion="off"]) .hero.page-intro .intro-copy,
  html.js:not([data-motion="off"]) .hero.page-intro .hero-actions,
  html.js:not([data-motion="off"]) .hero.page-intro .role-pause { animation: home-rise 600ms cubic-bezier(.22,1,.36,1) both; }
  html.js:not([data-motion="off"]) .hero.page-intro .intro-kicker { animation-delay: 120ms; }
  html.js:not([data-motion="off"]) .hero.page-intro .intro-copy { animation-delay: 1550ms; }
  html.js:not([data-motion="off"]) .hero.page-intro .hero-actions,
  html.js:not([data-motion="off"]) .hero.page-intro .role-pause { animation-delay: 1700ms; }
  html.js:not([data-motion="off"]) .hero-intro-line,
  html.js:not([data-motion="off"]) .hero.page-intro .role-stack { display:inline-block; animation: home-line 650ms cubic-bezier(.22,1,.36,1) both; }
  html.js:not([data-motion="off"]) .hero-intro-line { animation-delay: 180ms; }
  html.js:not([data-motion="off"]) .hero.page-intro .role-stack { display:grid; animation-delay: 1050ms; }
}
@keyframes home-rise { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:translateY(0) } }
@keyframes home-line { from { opacity:0; transform:translateY(10px); filter:blur(2px) } to { opacity:1; transform:translateY(0); filter:blur(0) } }


@media (prefers-reduced-motion: no-preference) {
  html.js:not([data-motion="off"]) .page-intro:not(.hero) .intro-kicker { animation:home-rise 500ms cubic-bezier(.22,1,.36,1) both; }
  html.js:not([data-motion="off"]) .page-intro:not(.hero) h1 { animation:home-line 650ms cubic-bezier(.22,1,.36,1) 180ms both; }
  html.js:not([data-motion="off"]) .page-intro:not(.hero) .intro-copy { animation:home-rise 600ms cubic-bezier(.22,1,.36,1) 650ms both; }
}

@media (prefers-reduced-motion: no-preference) {
  html.js:not([data-motion="off"]) .header { animation:home-rise 600ms cubic-bezier(.22,1,.36,1) both; }
  html.home-intro-pending .hero.page-intro :is(.intro-copy,.hero-actions,.role-pause),
  html.home-intro-pending .work-section :is(.section-heading,.project-card) { opacity:0; animation:none; }
  html.home-intro-ready .hero.page-intro .intro-copy { animation:home-rise 600ms cubic-bezier(.22,1,.36,1) both; }
  html.home-intro-ready .hero.page-intro :is(.hero-actions,.role-pause) { animation:home-rise 600ms cubic-bezier(.22,1,.36,1) 120ms both; }
}

html.js .hero.page-intro :is(.intro-kicker,.intro-copy,.hero-actions,.role-pause),html.js .hero.page-intro h1>span,html.js .hero.page-intro .role-stack,html.js .page-intro:not(.hero) :is(.intro-kicker,h1,.intro-copy){animation:none!important;opacity:1}
html.home-intro-pending .hero.page-intro :is(.intro-copy,.hero-actions,.role-pause),html.home-intro-pending .work-section :is(.section-heading,.project-card){opacity:1}