@font-face {
  font-family: "Instrument Sans";
  src: url("../assets/fonts/instrument-sans/InstrumentSans-Variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-text: "Instrument Sans", Arial, Helvetica, sans-serif;
  --weight-text: 400;
  --weight-label: 500;
  --weight-heading: 700;
  --type-display: 6rem;
  --leading-display: 6.25rem;
  --type-page: 4rem;
  --leading-page: 4.25rem;
  --type-section: 3rem;
  --leading-section: 3.25rem;
  --type-block: 1.75rem;
  --leading-block: 2.125rem;
  --type-intro: 1.5rem;
  --leading-intro: 2rem;
  --type-body: 1.125rem;
  --leading-body: 1.75rem;
  --type-article: 1.125rem;
  --leading-article: 1.75rem;
  --type-ui: 1rem;
  --leading-ui: 1.25rem;
  --type-meta: .875rem;
  --leading-meta: 1.25rem;
  --type-case-title: clamp(46px, 4.8vw, 82px);
  --leading-case-title: .9;
  --type-editorial-title: clamp(54px, 5.8vw, 96px);
  --leading-editorial-title: .91;
  --type-editorial-section: clamp(44px, 4.8vw, 78px);
  --leading-editorial-section: .94;
  --type-case-copy: 17px;
  --leading-case-copy: 1.38;
  --type-case-kicker: 12px;
  --leading-case-kicker: 1.2;
  --type-case-meta: clamp(14px, .95vw, 17px);
  --leading-case-meta: 1.25;
  --type-wordmark: 11.5rem;
  --type-menu: 6rem;
  --leading-menu: 6.25rem;
  --measure-reading: 65ch;
  --measure-copy: 42ch;
  --measure-intro: 40ch;
  --space-label-title: .5rem;
  --space-title-copy: 1.5rem;
  --space-paragraph: 1.5rem;
  --space-copy-action: 2rem;
}

body {
  font-family: var(--font-text);
  font-size: var(--type-body);
  font-weight: var(--weight-text);
  line-height: var(--leading-body);
  font-synthesis: none;
  font-optical-sizing: auto;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

button, input, select, textarea { font: inherit; }
strong, b { font-weight: var(--weight-heading); }

/* Roles are assigned to components, independently of their heading level. */
.section-heading h2, .blog-index-page .blog-title, .manifesto-text {
  font-size: var(--type-display);
  line-height: var(--leading-display);
  font-weight: var(--weight-heading);
}
.manifesto-text { font-weight: var(--weight-text); }
.work-detail-intro h1, .blog-article-title {
  font-size: var(--type-page);
  line-height: var(--leading-page);
  font-weight: var(--weight-heading);
}
.work-copy h3, .audiences h2, .home-blog__intro h2, .work-more h2,
.blog-featured__copy h2, .blog-section-head h2, .blog-cta__item h2,
.blog-article-copy h2 {
  font-size: var(--type-section);
  line-height: var(--leading-section);
  font-weight: var(--weight-label);
}
.audience-columns h3, .home-blog__article h3, .blog-card__body h3,
.blog-related a, .work-page-header p {
  font-size: var(--type-block);
  line-height: var(--leading-block);
  font-weight: var(--weight-label);
}
.blog-article-intro {
  font-size: var(--type-intro);
  line-height: var(--leading-intro);
  font-weight: var(--weight-text);
  max-width: var(--measure-intro);
}
.work-copy p:not(.work-year), .audience-columns p, .home-blog__intro p,
.work-card__copy p, .work-detail-intro p, .about-copy, .about-list li,
.contact-sheet-copy p, .blog-featured__copy > p:not(.blog-meta),
.blog-card__body > p:not(.blog-meta), .blog-cta__item p {
  font-size: var(--type-body);
  line-height: var(--leading-body);
  font-weight: var(--weight-text);
  max-width: var(--measure-copy);
}
.blog-article-copy p {
  font-size: var(--type-article);
  line-height: var(--leading-article);
  font-weight: var(--weight-text);
}
.small-cta, .section-heading-link, .home-blog__all, .work-back-link,
.about-social, .about-cta, .about-direct, .about-list h2,
.contact-sheet-direct a, .blog-categories a, .blog-read-link,
.blog-card__link, .blog-cta__item > span, .footer-name,
.footer-links, .footer-links a, .footer-services {
  font-size: var(--type-ui);
  line-height: var(--leading-ui);
  font-weight: var(--weight-label);
}
.footer-services { font-weight: var(--weight-text); }
.section-kicker, .work-copy .work-year, .audiences-contact__label,
.home-blog__category, .contact-heading p, .blog-kicker,
.blog-heading .blog-kicker, .blog-meta, .blog-card__body .blog-meta,
.blog-article-label, .blog-credit-label, .blog-credit-item p,
.footer-based p, .blog-section-head p, figcaption {
  font-size: var(--type-meta);
  line-height: var(--leading-meta);
  font-weight: var(--weight-label);
}
.blog-credit-item p:not(.blog-credit-label), .footer-based p, figcaption {
  font-weight: var(--weight-text);
}
.work-card__copy h2 { font-size: var(--type-block); line-height: var(--leading-block); font-weight: 700; }
.blog-card__index { font-size: 2rem; line-height: 2.25rem; font-weight: var(--weight-label); }
.blog-card__side-note { font-size: .75rem; line-height: 1rem; font-weight: var(--weight-label); }
.blog-ticker__track > span { font-size: 1.75rem; line-height: 2rem; }
.home-blog__all span { font-size: 1.5rem; line-height: 1.5rem; }
.home-blog__article-arrow { font-size: 2rem; line-height: 2rem; }

/* These three compositions deliberately retain their own scale. */
.phys-letter { font-size: var(--type-wordmark); font-weight: 700; line-height: .84; }
.pixel-menu-nav { grid-template-columns: minmax(0, 1fr); align-content: safe center; gap: .75rem; height: 100%; min-height: 0; overflow-y: auto; }
.pixel-menu-nav a { font-size: var(--type-menu); line-height: var(--leading-menu); font-weight: 700; }
.audiences-contact__title, .audiences-contact__arrow { font-size: 4rem; line-height: 4.25rem; font-weight: 500; }
.contact-heading h1 { font-size: 2rem; line-height: 2.25rem; font-weight: 500; }
.hero-roles { font-size: .875rem; line-height: 1.125rem; }
.help { font-size: 1.25rem; line-height: 1.5rem; }
.ragdoll-cursor-hint text { font-family: var(--font-text); font-size: 9px; line-height: 1; font-weight: 700; }

.work-copy h3, .home-blog__intro h2,
.blog-featured__copy h2, .blog-article-copy h2 { margin-bottom: var(--space-title-copy); }
.about-copy p, .blog-article-copy p { margin-bottom: var(--space-paragraph); }
.about-copy p:last-child, .blog-article-copy p:last-child { margin-bottom: 0; }
.work-detail-intro { gap: var(--space-title-copy); }
.work-detail-intro p { margin: 0; }
.work-copy .work-year { max-width: 260px; margin: 0 0 var(--space-label-title); }
.work-copy p:not(.work-year) { max-width: 30ch; margin: 0; }
.audience-columns { row-gap: var(--space-title-copy); }
.audience-columns .small-cta { margin-top: .5rem; }
.small-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .75rem 1.125rem; }
.home-blog__all, .blog-read-link { margin-top: var(--space-copy-action); }
.home-blog__article { grid-template-columns: minmax(0, 1fr) 2rem; gap: var(--space-label-title) 1.25rem; }
.blog-card__body h3 { margin-bottom: var(--space-label-title); }
.blog-card__body .blog-meta { margin-bottom: var(--space-label-title); }
.blog-meta { flex-wrap: wrap; }
.blog-card__link { margin-top: var(--space-copy-action); }
.blog-cta__item p { margin-top: var(--space-title-copy); }
.blog-cta__item > span { margin-top: var(--space-copy-action); }
.blog-featured__copy h2 { max-width: 18ch; margin-top: 2.5rem; }
.blog-article-intro { margin-top: var(--space-title-copy); }
.blog-index-page .blog-title span { white-space: normal; overflow-wrap: anywhere; }
.blog-card__body { min-height: 25rem; padding-bottom: 5rem; }
.blog-card__body h3 { max-width: 76%; }
.blog-card__body > p:not(.blog-meta) { max-width: 76%; }

/* Keep the article's outer flow separate from its internal 12-column grid. */
.blog-article-content { display: block; }
.blog-article-content > * + * { margin-top: 6rem; }
.blog-article-copy { grid-column: 4 / -1; width: min(100%, var(--measure-reading)); }
.blog-article-copy h2 { max-width: 24ch; }
.blog-credits { grid-column: 4 / -1; width: min(100%, var(--measure-reading)); }
.blog-article-section, .blog-article-copy, .blog-credit-item { min-width: 0; }
.blog-article-media--offset { width: 75%; margin-left: auto; }
.blog-article-section .blog-article-label { margin: 0; }
.blog-article-section .blog-article-copy p { margin-top: 0; }

.about-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 3rem; }
.about-intro { grid-template-columns: minmax(120px, .5fr) minmax(280px, 1fr); column-gap: 1.5rem; padding-right: 0; }
.about-copy { max-width: var(--measure-copy); }
.about-cta { width: min(100%, 16rem); }
.about-directory-grid { column-gap: 2rem; }
.contact-sheet-copy { column-gap: 1.5rem; }
.contact-sheet-copy p { min-width: 0; }
.contact-sheet-copy p + p { margin: 0; }
.footer-based { grid-column: 1 / 5; }
.footer-links { grid-template-columns: max-content minmax(0, 1.9fr) repeat(3, minmax(max-content, 1fr)) minmax(0, 1.8fr); }
.footer-links > * { min-width: 0; }
.footer-links a { overflow-wrap: anywhere; }
.footer-in-flow .site-footer { position: relative; height: auto; min-height: 100svh; }
.footer-in-flow .home-content, .footer-in-flow .work-archive,
.footer-in-flow .work-more, .footer-in-flow .about-main,
.footer-in-flow .contact-main, .footer-in-flow .blog-main,
.footer-in-flow .blog-article-main { margin-bottom: 0; }

@media (max-width: 1180px) {
  :root { --type-display: 4.5rem; --leading-display: 4.75rem; --type-page: 3rem; --leading-page: 3.25rem; --type-section: 2.5rem; --leading-section: 2.75rem; --type-wordmark: 7.5rem; --type-menu: 4.5rem; --leading-menu: 4.75rem; }
  .about-main { grid-template-columns: 1fr; }
  .about-intro { grid-template-columns: minmax(180px, .75fr) minmax(0, 1.25fr); }
  .about-copy { max-width: var(--measure-copy); }
  .blog-featured__copy h2 { max-width: none; }
  .footer-links { grid-template-columns: auto minmax(0, 1fr); gap: 1rem; }
  .footer-social { grid-column: 1 / -1; display: flex; justify-content: space-between; }
  .footer-email { display: none; }
}

@media (max-width: 760px) {
  :root { --type-display: 3rem; --leading-display: 3.125rem; --type-page: 2.5rem; --leading-page: 2.75rem; --type-section: 2rem; --leading-section: 2.25rem; --type-block: 1.5rem; --leading-block: 1.875rem; --type-intro: 1.25rem; --leading-intro: 1.75rem; --type-body: 1.0625rem; --leading-body: 1.625rem; --type-case-title: 48px; --type-editorial-title: 48px; --type-editorial-section: 42px; --type-case-copy: 16px; --type-case-meta: 16px; --type-wordmark: 3.5rem; --type-menu: 3rem; --leading-menu: 3.25rem; --space-title-copy: 1rem; --space-paragraph: 1.25rem; --space-copy-action: 1.5rem; }
  .audiences-contact__title, .audiences-contact__arrow { font-size: 2.75rem; line-height: 3rem; }
  .contact-heading h1 { font-size: 1.75rem; line-height: 2rem; }
  .hero-roles { font-size: .75rem; line-height: 1rem; grid-template-columns: auto minmax(12px, 1fr) auto; width: calc(100% - 40px); gap: .75rem; }
  .help { font-size: .875rem; line-height: 1.125rem; }
  .hero-aside { max-width: 10rem; }
  .manifesto-line { gap: .25em; }
  .blog-index-page .blog-header { grid-template-columns: 64px minmax(0, 1fr); gap: 1rem; }
  .blog-index-page .blog-logo { width: 64px; }
  .blog-index-page .blog-title { font-size: 2rem; line-height: 2.25rem; }
  .blog-categories { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
  .blog-card__index { font-size: 1.5rem; line-height: 1.75rem; }
  .blog-card__body { min-height: 34rem; padding-bottom: 45%; }
  .blog-card__body h3 { max-width: 82%; }
  .blog-card__body > p:not(.blog-meta) { max-width: 100%; }
  .blog-featured__copy, .blog-section-head, .blog-article-head,
  .blog-article-section, .blog-related { padding-inline: 20px; }
  .blog-article-content > * + * { margin-top: 4rem; }
  .blog-article-copy, .blog-credits, .blog-article-media--offset { width: 100%; }
  .blog-article-section .blog-article-label { margin-bottom: 1.5rem; }
  .blog-article-media--offset { margin-left: 0; }
  .blog-credits { gap: 1.5rem; }
  .about-intro { grid-template-columns: minmax(0, 1fr); }
  .about-copy { max-width: none; }
  .footer-based { grid-column: 1; width: 100%; }
  .footer-figure { min-height: 280px; }
  .footer-links { gap: .5rem; }
  .footer-social { gap: .5rem; flex-wrap: wrap; }
}

@media (max-width: 479px) {
  :root { --type-wordmark: 3rem; }
  .audience-columns { grid-template-columns: minmax(0, 1fr); row-gap: 1.5rem; }
  .audience-columns article { grid-template-rows: auto auto auto; gap: 1rem; }
  .audience-columns .small-cta { justify-self: start; width: auto; min-width: 10rem; }
  .audiences { grid-template-columns: minmax(0, 1fr); }
  .audiences h2 { grid-column: 1; grid-row: 1; }
  .audiences-mark { grid-column: 1; grid-row: 2; justify-self: end; width: 104px; }
  .audience-columns { grid-column: 1; grid-row: 3; }
  .audiences-contact { grid-row: 4; }
}

@media (max-width: 359px) {
  :root { --type-wordmark: 2.5rem; }
  .blog-index-page .blog-header { grid-template-columns: 48px minmax(0, 1fr); gap: .75rem; }
  .blog-index-page .blog-logo { width: 48px; }
  .blog-index-page .blog-title { font-size: 1.75rem; line-height: 2rem; }
  .audiences-contact { grid-template-columns: minmax(0, 1fr) 1.5rem; }
  .audiences-contact__title { font-size: 2.5rem; line-height: 2.75rem; }
  .audiences-contact__arrow { font-size: 1.5rem; line-height: 2rem; }
}

@media (max-height: 760px) {
  :root { --type-menu: 4rem; --leading-menu: 4.25rem; }
  .pixel-menu-nav { gap: .5rem; padding-block: 4rem; }
}
@media (max-width: 760px) and (max-height: 760px), (max-height: 580px) {
  :root { --type-menu: 2.5rem; --leading-menu: 2.75rem; }
  .pixel-menu-nav { place-content: start center; padding-block: 5rem 2rem; }
}