@font-face {font-family:Switzer;src:url('/assets/fonts/switzer-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face {font-family:Switzer;src:url('/assets/fonts/switzer-600.woff2') format('woff2');font-weight:600;font-display:swap}
:root{--ease:cubic-bezier(.16,1,.3,1);--ivory:#F7F5F0;--paper:#EFECE3;--ink:#26251F;--slab:#1B1B18;--graphite:#75746C;--muted:#69685F;--rule:#AEA795;--rule-dark:#FAF8F2;--red:#E41613}
* {box-sizing:border-box}
html {scroll-padding-top:24px}
body {margin:0;background:var(--ivory);color:var(--ink);font:400 16px Switzer,Arial,sans-serif;-webkit-font-smoothing:antialiased}
main {min-height:100svh}
p {margin:0;line-height:1.55}
a {color:inherit;text-underline-offset:.25em}
a:hover {text-decoration:none}
button,input,textarea {font:inherit}
button {border:0;cursor:pointer}
button:disabled {cursor:wait;opacity:.75}
a:focus-visible,:focus-visible {outline:2px solid var(--ink);outline-offset:5px}
main:focus {outline:none}
h1,h2,h3 {font-weight:600;margin:0;line-height:1.03;letter-spacing:-.033em}
.label {font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.fineprint {font-size:13px;line-height:1.65;color:var(--muted)}
.site-header {height:92px;padding:0 4.5vw;display:flex;align-items:center;justify-content:space-between;gap:32px;position:relative;z-index:5;border-bottom:1px solid var(--rule)}
.wordmark {display:inline-block;font-size:38px;font-weight:600;line-height:1;letter-spacing:-.05em;text-decoration:none;white-space:nowrap}
.wordmark-dot {color:transparent;background:var(--red);display:inline-block;width:.135em;height:.135em;border-radius:50%;margin-left:.035em;overflow:hidden}
.desktop-nav {display:flex;gap:32px;align-items:center}
.desktop-nav a {font-size:13px;text-decoration:none;padding:16px 0;position:relative}
.desktop-nav a::after {content:'';position:absolute;bottom:8px;left:0;right:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left}
.desktop-nav a[aria-current=page]::after,.desktop-nav a:hover::after {transform:scaleX(1)}
.desktop-nav a:last-child {margin-left:10px;border:1px solid var(--ink);padding:12px 23px}
.desktop-nav a:last-child::after {display:none}
.mobile-navigation {display:none}
.button {display:inline-flex;min-height:54px;align-items:center;justify-content:space-between;gap:38px;background:var(--ink);color:var(--ivory);padding:17px 23px;text-decoration:none;font-size:14px;line-height:1.4}
.button:hover {background:var(--slab)}
.button span,.text-link span,.secondary span {display:inline-block}
.link-arrow {display:inline-block;width:1.2em;height:1.2em;flex:none;vertical-align:-.15em}
.link-arrow svg,.service .arrow svg {display:block;width:100%;height:100%}
.secondary,.text-link,.all {display:inline-flex;align-items:center;gap:16px;min-height:44px;font-size:14px;text-decoration:none}
.secondary {border-bottom:1px solid var(--ink)}
.text-link,.all {margin-top:28px;border-bottom:1px solid var(--ink)}
.doors {display:flex;align-items:center;gap:28px}
/* The first view is a complete typographic statement. Red belongs to the period. */
.hero {padding:32px 4.5vw 22px;min-height:calc(100svh - 92px);display:flex;flex-direction:column;background:radial-gradient(ellipse at 88% 30%,#EFECE366,transparent 62%)}
.hero h1 {font-size:clamp(72px,min(8.5vw,12.2svh),142px);letter-spacing:-.035em;line-height:1;margin:30px 0 40px;max-width:23ch}
.hero h1>span {display:block}
.arrival-word {display:inline-block}
.hero-bottom {display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:start}
.hero .doors {align-self:start;flex-wrap:wrap}
.hero-sub {font-size:18px;line-height:1.5;max-width:65ch}
.operator {font-size:12px;color:var(--muted);line-height:1.6;margin-top:20px;max-width:70ch}
.hero-foot {font-size:10px;color:var(--muted);line-height:1.5;margin-top:auto;padding-top:28px}
/* Each chapter uses the same ingredients, with a distinct composition. */
.chapter {padding:100px 4.5vw 112px;border-top:1px solid var(--rule)}
.chapter-heading {display:grid;grid-template-columns:1fr 2fr;gap:30px;margin-bottom:70px}
.chapter h2 {font-size:clamp(48px,6.3vw,100px);max-width:17ch}
.chapter-copy {margin-left:33.333%;max-width:850px}
.large-body {font-size:clamp(20px,2.1vw,31px);line-height:1.5;letter-spacing:-.02em}
.service-list {display:grid;grid-template-columns:1fr 1fr;column-gap:5vw}
.service {position:relative;display:grid;grid-template-columns:1fr 35px;column-gap:24px;padding:36px 0 46px;border-top:1px solid var(--rule);text-decoration:none}
.service h3 {font-size:clamp(28px,2.65vw,41px);max-width:21ch;line-height:1.12;letter-spacing:-.035em}
.service p {grid-column:1;font-size:16px;line-height:1.65;color:var(--muted);max-width:53ch;margin-top:23px}
.service .arrow {grid-column:2;grid-row:1;width:34px;height:34px;font-size:25px;line-height:1.1;justify-self:end}
.service-list .all {justify-self:start;grid-column:1/-1;margin-top:5px}
.services-chapter {display:grid;grid-template-columns:1fr 1.3fr;gap:9vw;background:var(--ivory);position:relative;z-index:1}
.services-chapter .chapter-heading {display:block;align-self:start;margin:0}
.services-chapter .label {margin-bottom:35px}
.services-chapter h2 {font-size:clamp(48px,5.4vw,82px);max-width:11ch}
.services-chapter .service-list {grid-template-columns:1fr}
.services-chapter .service {padding:48px 0 55px}
.service-rule {position:absolute;inset:-1px 0 auto;height:1px;background:var(--ink);transform-origin:left}
.audience {padding-top:115px;padding-bottom:125px}
.audience .chapter-heading {display:block;margin-bottom:52px}
.audience .label {margin-bottom:34px}
.audience h2 {font-size:clamp(60px,9vw,140px);max-width:none}
.audience .chapter-copy {margin-left:42%;max-width:770px}
.person {background:var(--slab);color:var(--ivory);border:0;padding-bottom:100px}
.person .label,.person .fineprint {color:var(--rule-dark)}
.person .text-link {border-color:var(--rule-dark)}
.person a:focus-visible {outline-color:var(--ivory)}
.person-grid {display:grid;grid-template-columns:1fr 1.13fr;gap:8vw;align-items:center;margin-top:40px}
.portrait-frame {max-width:550px;background:var(--paper)}
.portrait-frame img {display:block;width:100%;height:auto;filter:grayscale(1)}
.person h2 {font-size:clamp(48px,6vw,92px);max-width:13ch;margin-bottom:36px}
.person .large-body {font-size:clamp(20px,1.8vw,27px);line-height:1.6}
.result-disclaimer {margin-top:24px}
/* Real material, not a live 3D scene. The instrument's signature is the only red here. */
.engagement {display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:center;padding-right:0;overflow:clip;background:var(--paper);border:0;min-height:100svh}
.engagement .chapter-heading {display:block;margin-bottom:30px}
.engagement .label {margin-bottom:34px}
.engagement h2 {font-size:clamp(48px,5.4vw,82px);max-width:13ch}
.engagement .chapter-copy {margin-left:0}
.engagement .large-body {font-size:20px;max-width:48ch}
.instrument {margin:0;min-width:0}
.instrument img {display:block;width:100%;height:auto}
.engine {padding-top:90px;padding-bottom:100px}
.engine .chapter-heading {margin-bottom:35px}
.engine .large-body {font-size:clamp(20px,1.8vw,26px)}
.closing {background:var(--paper);display:grid;grid-template-columns:1fr 1.2fr;gap:8vw}
.closing .chapter-heading {display:block}
.closing .label {margin-bottom:32px}
.closing h2 {font-size:clamp(48px,6vw,91px);max-width:11ch}
.closing .chapter-copy {margin:0;max-width:none}
.closing .large-body {font-size:22px}
/* Dense abstract typesetting contains no fabricated legal language. */
.redline {background:var(--paper)}
.redline-frame {position:relative;min-height:100svh;padding:8svh 7vw;display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:10vw;overflow:clip}
.contract {position:relative;background:var(--ivory);padding:clamp(30px,5.5svh,50px) 48px;transform:rotate(-5deg);box-shadow:0 2px 3px #26251F15,10px 30px 55px #26251F20;display:flex;flex-direction:column;gap:clamp(18px,2.9svh,26px);min-height:530px;border:1px solid var(--rule)}
.contract-glyph {height:30px;width:30px;background:var(--ink);margin-bottom:4px}
.typesetting {display:flex;flex-direction:column;gap:8px}
.typesetting>div {display:flex;gap:4px;height:3px;overflow:hidden}
.typesetting i {flex:var(--word);min-width:3px;background:var(--graphite);opacity:.65}
.typesetting>div:nth-child(4) {width:73%;margin-bottom:8px}
.typesetting>div:last-child {width:65%}
.clause {font-size:clamp(22px,2.3vw,34px);line-height:1.3;letter-spacing:-.025em;padding:14px 0}
.clause-part {display:inline-block;position:relative}
.clause-part::after {content:'';height:2px;background:var(--ink);position:absolute;left:0;right:0;top:54%;transform-origin:left}
.note {font-size:clamp(27px,3.15vw,47px);line-height:1.17;letter-spacing:-.03em;color:var(--red);font-weight:600;max-width:18ch;text-wrap:balance}
.reading-mark {position:absolute;left:25px;top:48%;height:28px;width:2px;background:var(--graphite)}
/* Contact is a single spread, with ruled fields and a clear left-to-right flow. */
.contact-layout {display:grid;grid-template-columns:1fr 1.05fr;gap:8vw;padding:66px 4.5vw 100px;align-items:start;min-height:calc(100svh - 92px)}
.contact-introduction h1 {font-size:clamp(72px,8vw,120px);max-width:8ch;margin:39px 0 34px;line-height:1;letter-spacing:-.035em}
.contact-introduction .page-intro {font-size:20px;line-height:1.6;max-width:44ch}
.contact-direct {margin-top:65px;font-size:14px;line-height:1.6}
.contact-direct a {display:inline-flex;align-items:center;justify-content:space-between;gap:22px;min-height:44px;border-bottom:1px solid var(--ink);text-decoration:none;overflow-wrap:anywhere;font-size:17px;max-width:100%}
.contact-direct p {margin-top:13px;color:var(--muted)}
.contact-paper {padding:36px 38px 38px;background:var(--paper);border-top:1px solid var(--rule)}
.contact-form {margin-top:36px}
.contact-paper .contact-form {margin:0}
.form-grid {display:grid;grid-template-columns:1fr 1fr;gap:30px 25px}
.field {display:flex;flex-direction:column;gap:13px;font-size:13px}
.field.full {grid-column:1/-1}
.field input,.field textarea {display:block;width:100%;min-width:0;border:0;border-bottom:1px solid var(--muted);border-radius:0;background:transparent;color:var(--ink);padding:10px 0;min-height:44px}
.field textarea {resize:vertical;min-height:120px;line-height:1.5}
.field input:focus,.field textarea:focus {outline:none;border-bottom:2px solid var(--ink);padding-bottom:9px;background:#F7F5F04D}
.honeypot {display:none}
.consent {display:flex;gap:14px;align-items:flex-start;font-size:13px;line-height:1.6;margin:30px 0 18px;cursor:pointer}
.consent input {width:22px;height:22px;flex:none;margin:0;accent-color:var(--ink)}
.contact-form>.fineprint {font-size:12px}
.form-submit {display:flex;align-items:center;flex-wrap:wrap;gap:17px 24px;margin-top:30px}
.form-submit a {font-size:13px;overflow-wrap:anywhere;min-height:44px;display:flex;align-items:center}
.form-status {font-size:16px;line-height:1.5;margin-top:20px;min-height:1px}
.form-status:empty {margin-top:0}
/* A quiet colophon, per Paul's rejection of the oversized wordmark. */
.site-footer {padding:55px 4.5vw 32px;border-top:1px solid var(--rule);background:var(--ivory)}
.footer-top {display:grid;grid-template-columns:1fr 1fr;gap:9vw;align-items:start}
.footer-signature {font-size:27px;font-weight:400;line-height:1.2;letter-spacing:-.03em;max-width:21ch;margin-top:22px}
.footer-email {display:inline-flex;gap:30px;align-items:center;font-size:17px;min-height:44px}
.footer-nav {display:grid;grid-template-columns:1fr 1fr;gap:0 24px;margin-top:25px}
.footer-nav a {font-size:13px;border:0;margin:0;min-height:42px;justify-content:space-between;max-width:190px}
.footer-wordmark {font-size:36px;line-height:1.07;letter-spacing:-.05em;margin:0;max-width:100%}
.footer-descriptor {font-size:12px;color:var(--muted);line-height:1.65;margin-top:36px}
.disclosures {border-top:1px solid var(--rule);margin-top:26px;padding-top:25px;display:grid;grid-template-columns:1fr 2fr;gap:12px 42px;font-size:11px;line-height:1.65;color:var(--muted)}
.disclosures p:nth-child(2) {grid-column:2;grid-row:1/4}
.disclosures p:last-child {grid-column:2;grid-row:4}
/* Interior pages inherit the same scale, spacing and editorial grammar. */
.page-hero {padding:54px 4.5vw 75px;border-bottom:1px solid var(--rule)}
.page-hero h1,.article-header h1 {font-size:clamp(58px,7.5vw,116px);line-height:1;max-width:18ch;margin:40px 0 35px;letter-spacing:-.048em}
.page-hero .page-intro {font-size:clamp(19px,1.65vw,25px);line-height:1.6;max-width:65ch}
.page-hero .button {margin-top:30px}
.page-hero.with-portrait {display:grid;grid-template-columns:1.45fr .7fr;gap:8vw;align-items:center}
.page-hero.with-portrait h1 {font-size:clamp(52px,6.2vw,96px)}
.page-hero.with-portrait img {width:100%;height:auto;filter:grayscale(1)}
.reading-page {padding:0 4.5vw}
.prose-section {display:grid;grid-template-columns:1fr 2fr;gap:6vw;padding:65px 0;border-bottom:1px solid var(--rule)}
.prose-section h2 {font-size:clamp(28px,3vw,43px);line-height:1.1;letter-spacing:-.035em;max-width:18ch}
.prose-section>div p {font-size:18px;line-height:1.75;max-width:72ch;margin:0 0 25px}
.prose-section>div p:last-child {margin-bottom:0}
.prose-section>div p.fineprint {font-size:13px}
.work-list,.experience-list {margin:0;padding:0;list-style:none}
.work-list li {font-size:18px;line-height:1.65;padding:0 0 20px 22px;position:relative}
.work-list li::before {content:'—';position:absolute;left:0}
.experience-list li {font-size:17px;line-height:1.7;margin-bottom:26px}
.experience-list strong {font-weight:600}
.geography {max-width:72ch;margin-left:33.333%;padding:50px 0;line-height:1.65;font-size:18px}
.page-closing {padding:75px 4.5vw 90px;display:flex;align-items:center;justify-content:space-between;gap:35px;background:var(--paper)}
.page-closing p {font-size:clamp(28px,3.5vw,52px);letter-spacing:-.035em;line-height:1.2;max-width:29ch}
.page-closing .button {flex:none}
.services-index {padding:25px 4.5vw 90px}
.services-index .service {grid-template-columns:1.2fr 1fr 34px;gap:4vw;padding:40px 0}
.services-index .service p {grid-column:2;margin:0;align-self:center}
.services-index .service .arrow {grid-column:3}
.services-index h2 {font-size:clamp(28px,3.3vw,48px);line-height:1.1;max-width:24ch}
.writing-index {padding:0 4.5vw}
.writing-index article {padding:40px 0;border-bottom:1px solid var(--rule);margin-left:33.333%}
.writing-index article:last-child {margin-bottom:80px}
.writing-index time,.article-byline {font-size:13px;color:var(--muted)}
.writing-index h2 {font-size:38px;letter-spacing:-.035em;margin:22px 0}
.writing-index article p {font-size:18px;max-width:64ch}
.article-header {padding:65px 4.5vw}
.article-header h1 {max-width:20ch}
.article-header .page-intro {font-size:24px;max-width:64ch;margin-top:24px}
.article-body {max-width:760px;margin:20px auto 60px;padding:0 24px;font-size:19px;line-height:1.7}
.article-body h2 {font-size:38px;line-height:1.15;letter-spacing:-.03em;margin:50px 0 25px}
.article-body h3 {font-size:26px;line-height:1.3;margin:32px 0 20px}
.article-body p {margin-bottom:25px}
.article-body img {max-width:100%;height:auto}
.response-page {min-height:75svh}
.response-page .doors {justify-content:flex-start;margin-top:25px;flex-wrap:wrap}
.response-page .doors .button {margin:0}
.response-page .doors a {overflow-wrap:anywhere}
/* Motion is limited to small affordances. The complete document is the default. */
@media(prefers-reduced-motion:no-preference) {
  .motion-enabled .desktop-nav a::after,.motion-enabled .button span,.motion-enabled .text-link span,.motion-enabled .secondary span,.motion-enabled .service .arrow {transition:transform .4s var(--ease)}
  .motion-enabled .button:hover span,.motion-enabled .text-link:hover span,.motion-enabled .secondary:hover span,.motion-enabled .service:hover .arrow {transform:translate(3px,-3px)}
}
@media(min-width:761px) and (max-height:800px) {
  .hero {padding-top:23px}
  .hero h1 {margin:22px 0 30px}
  .hero-sub {font-size:16px}
  .operator {font-size:11px;margin-top:13px}
  .hero-foot {padding-top:23px}
}
@media(max-width:1100px) {
  .desktop-nav {gap:19px}
  .desktop-nav a:last-child {margin-left:0;padding:12px 16px}
  .hero-bottom {gap:5vw}
  .hero .doors {gap:20px}
  .contact-layout {gap:5vw}
  .contact-paper {padding:28px}
  .contact-introduction .page-intro {font-size:18px}
  .person-grid {gap:6vw}
}
@media(max-width:760px) {
  .site-header {height:74px;padding:0 22px;gap:15px}
  .wordmark {font-size:31px}
  .desktop-nav {display:none}
  .mobile-navigation {display:flex;gap:17px;align-items:center}
  .mobile-door {display:inline-flex;align-items:center;gap:9px;font-size:12px;min-height:44px;text-decoration:none}
  .menu summary {list-style:none;display:flex;align-items:center;justify-content:center;width:38px;height:44px;cursor:pointer}
  .menu summary::-webkit-details-marker {display:none}
  .menu-icon {height:1px;width:20px;background:var(--ink);box-shadow:0 6px 0 var(--ink)}
  .menu nav {display:flex;position:absolute;left:0;right:0;top:100%;background:var(--ivory);flex-direction:column;align-items:stretch;gap:0;border-bottom:1px solid var(--rule);padding:15px 22px 22px;box-shadow:0 15px 25px #26251F15}
  .menu nav a {font-size:22px;padding:15px 0;min-height:48px;text-decoration:none;letter-spacing:-.02em}
  .hero {min-height:calc(100svh - 74px);padding:27px 22px 20px}
  .hero .label {font-size:10px;letter-spacing:.075em}
  .hero h1 {font-size:clamp(47px,8vw,68px);letter-spacing:-.033em;line-height:1.01;margin:33px 0 27px;max-width:20ch}
  .hero h1>span {display:inline}
  .hero-bottom {display:flex;flex-direction:column;gap:27px;margin-top:0}
  .hero .doors {gap:23px;flex-wrap:nowrap}
  .hero-sub {font-size:16px;line-height:1.55}
  .operator {font-size:12px;line-height:1.6;margin-top:18px}
  .hero-foot {font-size:10px;margin-top:26px;padding-top:0;max-width:44ch}
  .button {min-height:50px;padding:15px 18px;font-size:13px;gap:25px}
  .secondary,.text-link,.all {font-size:13px;gap:13px}
  .chapter {padding:65px 22px 72px}
  .chapter-heading {display:block;margin-bottom:36px}
  .chapter-heading .label {margin-bottom:26px}
  .chapter h2 {font-size:48px;max-width:15ch;letter-spacing:-.033em}
  .chapter-copy {margin-left:0;max-width:none}
  .large-body {font-size:21px;line-height:1.55}
  .service-list {grid-template-columns:1fr}
  .services-chapter {display:block}
  .services-chapter .chapter-heading {margin-bottom:36px}
  .services-chapter h2 {max-width:15ch;font-size:48px}
  .services-chapter .service {padding:29px 0 33px}
  .service {padding:29px 0 33px;gap:18px}
  .service h3 {font-size:29px;max-width:21ch}
  .service p {font-size:16px;margin-top:18px;line-height:1.65}
  .service .arrow {font-size:24px}
  .service-list .all {margin-top:7px}
  .audience {padding-top:70px;padding-bottom:80px}
  .audience .chapter-heading {margin-bottom:34px}
  .audience h2 {font-size:62px;max-width:8ch}
  .audience .chapter-copy {margin-left:0}
  .person-grid {grid-template-columns:1fr;gap:40px;margin-top:32px}
  .portrait-frame {width:87%;max-width:440px}
  .person h2 {font-size:52px;max-width:12ch;margin-bottom:27px}
  .person .large-body {font-size:20px}
  .engagement {display:flex;flex-direction:column;gap:30px;min-height:0;padding-bottom:0}
  .engagement h2 {max-width:12ch}
  .engagement .large-body {font-size:20px}
  .instrument {width:calc(100% + 44px);max-width:none;align-self:center}
  .engine .chapter-heading {margin-bottom:30px}
  .engine .large-body {font-size:20px}
  .closing {display:block}
  .closing .chapter-heading {margin-bottom:30px}
  .closing h2 {max-width:12ch}
  .closing .large-body {font-size:20px}
  .redline {min-height:100svh}
  .redline-frame {position:relative;min-height:100svh;padding:60px 27px 70px;grid-template-columns:1fr;gap:45px}
  .contract {min-height:370px;padding:30px 28px 35px;gap:17px;transform:rotate(-3deg)}
  .contract-glyph {height:22px;width:22px;margin-bottom:5px}
  .typesetting {gap:6px}
  .typesetting>div {height:2px;gap:3px}
  .typesetting>div:nth-child(4) {margin-bottom:4px}
  .clause {font-size:25px;line-height:1.25;padding:9px 0}
  .note {font-size:30px;line-height:1.19;max-width:20ch;letter-spacing:-.03em}
  .reading-mark {left:12px;height:22px}
  .contact-layout {display:block;padding:36px 22px 65px}
  .contact-introduction h1 {font-size:76px;max-width:8ch;margin:30px 0 26px}
  .contact-introduction .page-intro {font-size:18px;max-width:50ch;line-height:1.6}
  .contact-direct {margin-top:25px;font-size:13px}
  .contact-direct a {font-size:16px;gap:18px}
  .contact-direct p {margin-top:8px}
  .contact-paper {margin-top:40px;padding:30px 22px 32px}
  .contact-form {margin-top:32px}
  .form-grid {gap:28px 20px}
  .field {font-size:13px;gap:8px}
  .field input,.field textarea {font-size:16px}
  .field textarea {min-height:115px}
  .consent {font-size:12px;gap:12px;margin-top:25px}
  .form-submit {gap:12px;margin-top:24px}
  .fineprint {font-size:12px}
  .site-footer {padding:55px 22px 30px}
  .footer-top {display:block}
  .footer-signature {font-size:25px;max-width:20ch;margin:20px 0 32px}
  .footer-email {font-size:15px}
  .footer-nav {gap:0 24px;margin-top:22px}
  .footer-nav a {font-size:12px;min-height:44px}
  .footer-wordmark {font-size:31px;margin:0;letter-spacing:-.05em}
  .footer-descriptor {font-size:11px}
  .disclosures {display:flex;flex-direction:column;gap:14px;font-size:11px;padding-top:24px}
  .page-hero {padding:36px 22px 50px}
  .page-hero h1,.article-header h1 {font-size:52px;line-height:1.02;letter-spacing:-.045em;margin:30px 0 27px;max-width:17ch;overflow-wrap:break-word}
  .page-hero .page-intro {font-size:18px;line-height:1.6}
  .page-hero.with-portrait {grid-template-columns:1fr;gap:35px}
  .page-hero.with-portrait h1 {font-size:52px}
  .page-hero.with-portrait img {max-width:280px;justify-self:end}
  .reading-page {padding:0 22px}
  .prose-section {grid-template-columns:1fr;gap:26px;padding:43px 0}
  .prose-section h2 {font-size:32px;max-width:23ch}
  .prose-section>div p {font-size:17px;line-height:1.7}
  .experience-list li {font-size:16px}
  .work-list li {font-size:17px}
  .geography {margin-left:0;font-size:17px;padding:35px 0}
  .page-closing {padding:50px 22px;flex-direction:column;align-items:flex-start;gap:27px}
  .page-closing p {font-size:32px}
  .services-index {padding:20px 22px 45px}
  .services-index .service {grid-template-columns:1fr 28px;gap:18px;padding:30px 0}
  .services-index h2 {font-size:31px;max-width:20ch}
  .services-index .service p {font-size:16px;grid-column:1;grid-row:2}
  .services-index .service .arrow {grid-column:2}
  .writing-index {padding:0 22px}
  .writing-index article {margin-left:0}
  .writing-index h2 {font-size:32px}
  .article-header {padding:36px 22px}
  .article-header .page-intro {font-size:20px}
  .article-body {font-size:17px;padding:0 22px}
  .article-body h2 {font-size:32px}
  .response-page .doors {flex-direction:column;align-items:flex-start}
}
@media(max-width:420px) {
  .hero h1 {font-size:49px;max-width:12ch}
  .form-grid {grid-template-columns:1fr}
}
@media(max-width:360px) {
  .wordmark {font-size:28px}
  .mobile-navigation {gap:9px}
  .mobile-door {font-size:11px}
  .hero h1 {font-size:43px}
  .hero .label {font-size:9px}
  .hero .doors {gap:17px}
  .hero .button {padding:14px 16px;gap:15px}
  .hero .secondary {font-size:12px;gap:8px}
  .chapter h2 {font-size:43px}
  .contact-introduction h1 {font-size:65px}
  .contact-paper {padding-left:17px;padding-right:17px}
  .page-hero h1 {font-size:44px}
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Arrival → hold → handoff. Scrolling remains native and every word stays readable. */
@media (prefers-reduced-motion:no-preference) {
  .motion-enabled .opening-scene {isolation:isolate}
  .motion-enabled .hero.can-hold {position:sticky;top:0;z-index:0}
  /* Keyboard focus always brings the real link into an unobscured document flow. */
  .motion-enabled .opening-scene:focus-within .hero {position:relative}
  .motion-enabled .services-chapter {box-shadow:0 -24px 40px -40px #26251F66}
  .motion-enabled .redline.can-hold {min-height:175svh}
  .motion-enabled .redline.can-hold .redline-frame {position:sticky;top:0}
  .intro-running .arrival-word {animation:letterpress .9s var(--ease) both;animation-delay:calc(var(--arrival-order)*.9s)}
  @keyframes letterpress {from {transform:translateY(6px)}to {transform:translateY(0)}}
  @media (min-width:761px) {
    .motion-enabled .services-chapter .chapter-heading.can-hold {position:sticky;top:12svh}
    .motion-enabled .person-grid {align-items:start}
    .motion-enabled .person-grid>div:last-child {padding:12svh 0}
    .motion-enabled .person .portrait-frame {width:min(100%,54svh);align-self:start}
    .motion-enabled .person .portrait-frame.can-hold {position:sticky;top:12svh}
    .motion-enabled .engagement {align-items:start;overflow:visible}
    .motion-enabled .engagement .instrument.can-hold {position:sticky;top:12svh;align-self:start}
  }
  @media (max-width:760px) {
    .motion-enabled .redline.can-hold {min-height:150svh}
  }
}
@supports (animation-timeline:view()) {
  @media (prefers-reduced-motion:no-preference) {
    .motion-enabled .services-chapter .service {view-timeline-name:--door}
    .motion-enabled .service-rule {animation:rule-draw 1s var(--ease) both;animation-timeline:--door;animation-range:entry 15% entry 95%}
    .motion-enabled .redline {view-timeline-name:--reading}
    .motion-enabled .reading-mark {animation:reading-pass 1s var(--ease) both;animation-timeline:--reading;animation-range:contain 0% contain 100%}
    .motion-enabled .clause-part::after {animation:rule-draw 1s var(--ease) both;animation-timeline:--reading;animation-range:contain 10% contain 55%}
    .motion-enabled .clause-part:nth-child(2)::after {animation-range:contain 28% contain 73%}
    .motion-enabled .clause-part:nth-child(3)::after {animation-range:contain 46% contain 91%}
    @keyframes rule-draw {from {transform:scaleX(.015)}to {transform:scaleX(1)}}
    @keyframes reading-pass {from {transform:translateY(-70px)}to {transform:translateY(85px)}}
  }
}