/* Generated from templates/responsive.css.j2 and data/design.json. */
@media (min-width: 1800px) {
  .hero h1 {
    font-size: 92px;
  }
}
@media (max-width: 1150px) {
  .hero-grid {
    gap: 40px;
  }
  .hero h1 {
    font-size: clamp(51px, 6.1vw, 70px);
  }
  .project-row-grid {
    gap: 30px;
    grid-template-columns: 0.65fr 1.3fr 0.8fr;
  }
  .project-metric {
    font-size: clamp(63px, 7.2vw, 90px);
  }
  .thinking-grid,
  .about-intro,
  .contact-grid {
    gap: 60px;
  }
  .figure-heading {
    font-size: 9px;
  }
  .project-description h3 {
    font-size: 25px;
  }
  .search-controls input {
    width: 180px;
  }
}
@media (max-width: 900px) {
  .desktop-nav {
    display: none;
  }
  .header-inner {
    min-height: 76px;
  }
  .menu-toggle {
    display: inline-flex;
  }
  .mobile-menu {
    display: block;
  }
  .mobile-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: grid;
    gap: 0;
    width: 100%;
    margin-inline: auto;
    padding: 8px var(--gutter) 20px;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
  }
  .mobile-nav a {
    padding: 15px 0;
    border-top: 1px solid var(--rule);
    display: flex;
    justify-content: space-between;
    font-size: 17px;
  }
  .mobile-nav a[aria-current] {
    color: var(--accent);
  }
  .hero-grid {
    grid-template-columns: 1fr;
    padding: 52px 0 38px;
    gap: 55px;
  }
  .hero h1 {
    font-size: clamp(53px, 8vw, 76px);
  }
  .hero-introduction {
    max-width: 540px;
  }
  .request-figure {
    width: 100%;
    max-width: 620px;
  }
  .figure-heading {
    font-size: 10px;
  }
  .request-map {
    height: 295px;
  }
  .hero-person {
    margin-top: 28px;
  }
  .hero-proof {
    justify-content: flex-start;
    gap: 15px 35px;
  }
  .project-row-grid {
    grid-template-columns: 0.6fr 1.4fr;
    gap: 45px;
  }
  .project-art-link {
    display: none;
  }
  .project-metric {
    font-size: 80px;
  }
  .thinking-grid {
    grid-template-columns: 1fr;
    gap: 46px;
  }
  .thinking-intro > p:not(.eyebrow) {
    max-width: 500px;
  }
  .margin-note {
    margin-top: 28px;
  }
  .notes-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 30px;
  }
  .writing-section .note-card:last-child {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 30px;
  }
  .writing-section .note-card:last-child .note-cover-link {
    grid-row: 1/6;
  }
  .writing-section .note-card:last-child .note-meta {
    margin-top: 0;
  }
  .writing-section .note-card:last-child > .text-link {
    width: fit-content;
  }
  .about-intro {
    grid-template-columns: 1.2fr 0.85fr;
    gap: 45px;
  }
  .about-copy h1 {
    font-size: 46px;
  }
  .about-copy .large-copy {
    font-size: 17px;
  }
  .toolkit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-intro-grid {
    gap: 40px;
  }
  .page-intro-grid h1 {
    font-size: 64px;
  }
  .page-intro-grid > p {
    max-width: 290px;
    font-size: 14px;
  }
  .archive-controls {
    flex-direction: column;
  }
  .search-controls input {
    flex: 1;
    width: auto;
  }
  .search-controls select {
    flex: 0.7;
    max-width: none;
  }
  .case-content {
    grid-template-columns: 1fr;
    gap: 45px;
  }
  .case-aside {
    position: static;
  }
  .case-aside nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
  }
  .case-visual-grid {
    gap: 40px;
  }
  .case-facts {
    gap: 25px;
  }
}
@media (max-width: 640px) {
  :root {
    --gutter: var(--gutter-min);
    --section-space: var(--mobile-section-space);
  }
  html {
    scroll-padding-top: 90px;
  }
  section[id],
  footer[id] {
    scroll-margin-top: 0;
  }
  .header-inner {
    gap: 14px;
    min-height: 72px;
  }
  .wordmark {
    font-size: 18px;
  }
  .header-actions {
    gap: 13px;
  }
  .theme-toggle {
    width: 44px;
    height: 44px;
  }
  .hero {
    padding-top: 31px;
    padding-bottom: 30px;
  }
  .hero-topline {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
  }
  .hero-topline .edition {
    font-size: 9px;
  }
  .eyebrow {
    font-size: 10px;
  }
  .hero-grid {
    padding-top: 39px;
    gap: 40px;
  }
  .hero h1 {
    font-size: clamp(38px, 9.9vw, 59px);
    letter-spacing: -0.06em;
  }
  .hero-introduction {
    font-size: 14px;
    margin-top: 24px;
  }
  .hero-actions {
    gap: 18px;
    margin-top: 25px;
  }
  .hero-actions .primary-button,
  .hero-actions .text-link {
    font-size: 12px;
  }
  .hero-person {
    margin-top: 25px;
  }
  .request-map {
    height: 255px;
  }
  .figure-heading {
    font-size: 9px;
  }
  .figure-index {
    max-width: 95px;
  }
  .map-controls .outline-button {
    min-height: 44px;
  }
  .map-status {
    font-size: 10px;
  }
  .hero-proof {
    display: grid;
    gap: 12px;
    font-size: 11px;
  }
  .section-heading {
    display: block;
    margin-bottom: 34px;
  }
  .section-heading h2 {
    font-size: 40px;
    margin-top: 17px;
  }
  .section-heading > p,
  .section-heading > div:last-child:not(:first-child) {
    margin-top: 24px;
    max-width: 100%;
    font-size: 14px;
  }
  .project-row {
    padding: 25px 0 32px;
  }
  .project-row-meta {
    font-size: 9px;
    flex-direction: column;
    gap: 8px;
  }
  .project-row-grid {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-top: 25px;
  }
  .project-metric {
    font-size: 86px;
    display: flex;
    align-items: center;
    gap: 20px;
  }
  .project-metric > span {
    max-width: 118px;
    margin-top: 8px;
    font-size: 10px;
  }
  .project-description h3 {
    font-size: 27px;
  }
  .project-row--ink {
    padding: 25px 22px 32px;
    margin-inline: -22px;
  }
  .thinking-grid {
    gap: 34px;
  }
  .thinking-intro h2 {
    font-size: 40px;
  }
  .thinking-intro > p:not(.eyebrow) {
    font-size: 14px;
  }
  .margin-note {
    font-size: 22px;
  }
  .principle summary {
    grid-template-columns: 20px 1fr 19px;
    gap: 12px;
  }
  .principle-title {
    font-size: 19px;
  }
  .principle-body {
    margin-left: 32px;
    margin-right: 0;
  }
  .notes-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .writing-section .note-card:last-child {
    display: block;
    grid-column: auto;
  }
  .writing-section .note-card:last-child .note-meta {
    margin-top: 22px;
  }
  .note-art {
    aspect-ratio: 2.8;
    padding: 22px;
  }
  .note-card h3 {
    font-size: var(--type-mobile-note-title);
  }
  .newsletter-strip {
    flex-wrap: wrap;
    gap: 19px;
    padding-block: 27px;
    margin-top: 48px;
  }
  .newsletter-monogram {
    font-size: 44px;
  }
  .newsletter-strip > div {
    flex-basis: calc(100% - 100px);
  }
  .newsletter-strip > .primary-button {
    margin-left: 0;
  }
  .newsletter-strip p {
    font-size: 12px;
  }
  .page-intro {
    padding-top: 40px;
    padding-bottom: 36px;
  }
  .page-intro-grid {
    display: block;
    margin-top: 20px;
  }
  .page-intro-grid h1 {
    font-size: 54px;
  }
  .page-intro-grid > p {
    margin-top: 24px;
    max-width: 100%;
  }
  .type-filters {
    justify-content: space-between;
    gap: 14px;
  }
  .type-filters button {
    font-size: 12px;
  }
  .search-controls {
    flex-direction: column;
    gap: 12px;
  }
  .search-controls input,
  .search-controls select {
    width: 100%;
    font-size: 16px;
  }
  .archive-meta {
    font-size: 10px;
  }
  .about-intro {
    grid-template-columns: 1fr;
    gap: 46px;
    padding-top: 40px;
  }
  .about-copy h1 {
    font-size: clamp(43px, 10vw, 58px);
  }
  .about-copy .large-copy {
    font-size: 18px;
    margin-top: 24px;
  }
  .portrait {
    max-width: 390px;
    margin: 0 8px;
  }
  .career-entry summary {
    grid-template-columns: 1fr 18px;
    gap: 13px;
  }
  .career-company {
    font-size: 18px;
    gap: 16px;
  }
  .career-company img {
    width: 32px;
    height: 32px;
  }
  .career-company small {
    font-size: 11px;
  }
  .career-period {
    grid-row: 2;
    grid-column: 1;
    margin-left: 48px;
    font-size: 10px;
  }
  .career-entry .principle-plus {
    grid-column: 2;
    grid-row: 1;
  }
  .career-body {
    margin: 20px 0 8px 48px;
  }
  .career-body ul {
    font-size: 13px;
  }
  .toolkit-grid,
  .education-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .education-item h3 {
    font-size: 23px;
  }
  .case-intro {
    padding-top: 23px;
    padding-bottom: 36px;
  }
  .case-heading-meta {
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
  }
  .case-intro h1 {
    font-size: 46px;
    margin-top: 23px;
  }
  .case-lede {
    font-size: 16px;
    margin-top: 24px;
  }
  .case-facts {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-top: 30px;
  }
  .case-facts p {
    margin-top: 7px;
  }
  .case-visual-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .case-big-metric {
    font-size: 112px;
  }
  .case-visual .project-art {
    max-width: 280px;
  }
  .case-section {
    padding-bottom: 48px;
  }
  .case-section + .case-section {
    padding-top: 36px;
  }
  .case-body-copy {
    font-size: 15px;
  }
  .contributions li {
    gap: 14px;
    grid-template-columns: 22px 1fr;
  }
  .contributions p {
    font-size: 14px;
  }
  .system-stages {
    grid-template-columns: 1fr;
    gap: 0;
    border-left: 1px solid var(--accent);
    padding-left: 20px;
  }
  .system-stage {
    border-top: 0;
    padding-top: 0;
    padding-bottom: 24px;
  }
  .system-stage:not(:last-child)::after {
    content: "↓";
    left: -28px;
    top: 20px;
    right: auto;
    padding: 5px;
  }
  .stage-index {
    display: inline-block;
    margin-right: 12px;
  }
  .system-stage strong {
    font-size: 13px;
  }
  .case-outcome {
    font-size: 27px;
  }
  .next-project > a {
    gap: 15px;
  }
  .next-project > a > .arrow {
    font-size: 32px;
  }
  .site-footer {
    padding-top: 45px;
  }
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-bottom: 42px;
  }
  .contact-grid h2 {
    font-size: 54px;
    margin-top: 19px;
  }
  .contact-content {
    padding-top: 0;
  }
  .contact-content > p {
    font-size: 14px;
  }
  .email-link {
    font-size: 20px;
  }
  .social-links {
    gap: 18px;
  }
  .footer-bottom {
    align-items: flex-start;
    gap: 16px;
  }
  .footer-bottom > span {
    order: 3;
    flex-basis: 100%;
  }
  .back-top {
    margin-left: auto;
  }
}
@media (max-width: 360px) {
  :root {
    --gutter: calc(var(--gutter-min) - 4px);
  }
  .header-inner {
    gap: 8px;
  }
  .header-actions {
    gap: 8px;
  }
  .wordmark {
    font-size: 16px;
  }
  .menu-toggle {
    gap: 8px;
  }
  .project-metric {
    font-size: 72px;
    gap: 15px;
  }
  .project-row--ink {
    margin-inline: -18px;
    padding-inline: 18px;
  }
  .hero h1 {
    font-size: 35px;
  }
  .figure-heading {
    gap: 10px;
  }
  .email-link {
    font-size: 17px;
  }
}
@media print {
  :root,
  [data-theme="dark"] {
    --paper: #fff;
    --ink: #222;
    --muted: #444;
    --accent: #922b18;
    --rule: #ccc;
  }
  .site-header,
  .site-footer,
  .hero-actions,
  .skip-link {
    display: none !important;
  }
  .container {
    width: 100%;
  }
  .about-intro {
    padding: 0 0 25px;
    grid-template-columns: 1fr 180px;
    gap: 30px;
  }
  .about-copy h1 {
    font-size: 38px;
  }
  .about-copy p,
  .career-body ul {
    font-size: 11px !important;
  }
  .about-copy .large-copy {
    margin-top: 15px;
  }
  .portrait-frame > img {
    aspect-ratio: 1;
  }
  .portrait {
    transform: none;
  }
  h2 {
    font-size: 28px !important;
  }
  .section-heading {
    margin-bottom: 20px;
  }
  .career-section,
  .toolkit-section,
  .education-section {
    padding-bottom: 30px;
  }
  .career-entry {
    padding: 12px 0;
    break-inside: avoid;
  }
  .career-entry summary {
    grid-template-columns: 1fr auto;
  }
  .career-entry .principle-plus {
    display: none;
  }
  .career-body {
    margin-top: 12px;
  }
  .toolkit-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .toolkit-category .tags li {
    font-size: 10px;
  }
  .education-grid {
    grid-template-columns: 1fr 1fr;
  }
  .will-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 1000px) {
  .playground-grid {
    gap: 40px;
  }
  .profile-preview {
    gap: 50px;
  }
}
@media (max-width: 900px) {
  .hero-evidence {
    max-width: 620px;
    border-left: 0;
    border-top: 1px solid var(--rule);
    padding: 28px 0 0;
  }
  .playground-grid {
    grid-template-columns: 1fr;
  }
  .profile-preview {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}
@media (max-width: 640px) {
  .hero-identity > p {
    font-size: var(--identity-mobile-name);
  }
  .hero-identity > span {
    font-size: 14px;
  }
  .hero-topline .edition {
    font-size: 12px;
  }
  .hero-grid {
    padding-top: 28px;
    gap: 27px;
  }
  .hero-person {
    margin-top: 20px;
  }
  .hero-evidence-metric {
    font-size: 80px;
    margin-top: 18px;
  }
  .hero-evidence h2 {
    font-size: 25px;
    margin-top: 18px;
  }
  .eyebrow,
  .figure-heading,
  .project-row-meta,
  .project-metric > span,
  .hero-proof,
  .note-meta,
  .note-art-label,
  .note-art-mark,
  .map-status,
  .node-sub,
  .career-period,
  .career-location,
  .portrait figcaption,
  .edition {
    font-size: 12px;
  }
  .note-art-label,
  .note-art-mark {
    font-size: 11px;
  }
  .map-controls .outline-button {
    font-size: 12px;
  }
  .project-metric.project-metric--qualitative {
    font-size: 30px;
  }
  .profile-preview h2 {
    font-size: 40px;
  }
  .core-skills {
    gap: 9px;
  }
  .core-skills span {
    padding: 10px 12px;
    font-size: 13px;
  }
  .case-big-metric.case-big-metric--qualitative {
    font-size: 45px;
  }
  .site-footer {
    padding-top: 44px;
  }
}
@media print {
  .toolkit-disclosure {
    display: none;
  }
}

@media (max-width: 640px) {
  .hero-identity-group {
    gap: 14px;
  }
  .identity-portrait img {
    width: var(--identity-mobile-portrait);
    height: var(--identity-mobile-portrait);
  }
  .hero-identity {
    gap: var(--identity-mobile-row-gap);
  }
  .hero-identity > span {
    font-size: var(--identity-mobile-role);
  }
  .hero-identity > strong {
    font-size: var(--identity-mobile-employer);
  }
  .hero-identity .company-logo {
    width: 18px;
    height: 18px;
  }
  .current-position > div {
    gap: 8px 18px;
  }
  .identity-wordmark {
    gap: 8px;
  }
  .identity-wordmark .company-logo {
    width: 20px;
    height: 20px;
  }
}
@media (max-width: 360px) {
  .identity-wordmark .company-logo {
    width: 18px;
    height: 18px;
  }
  .hero-identity > p {
    font-size: var(--identity-compact-name);
  }
}

/* Keep role and credential labels legible as columns become narrow. */
@media (max-width: 900px) {
  .about-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
  .about-intro .portrait {
    width: min(100%, 440px);
    justify-self: center;
  }
}
@media (max-width: 640px) {
  .credential {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    align-items: start;
  }
  .credentials {
    gap: 24px;
  }
  .credential > a {
    grid-column: 1;
  }
  .about-copy .current-role-line {
    font-size: 16px;
    gap: 8px 10px;
  }
}
@media print {
  .about-intro {
    grid-template-columns: 1fr 180px;
  }
  .about-intro .portrait {
    width: 180px;
  }
}

@media (max-width: 640px) {
 body { font-size:var(--type-mobile-body); }
 .learning-paths > div { grid-template-columns:1fr; gap:10px; }
 .learning-paths a { padding:14px 16px; }
 .note-cover-copy { inset:auto 18px 18px; }
 .case-section { padding-bottom:32px; }
 .case-section + .case-section { padding-top:28px; }
 .case-body-copy { margin-top:18px; }
 .archive-pagination { flex-wrap:wrap; }
}