@charset "UTF-8";
@font-face{font-family:Fraunces;src:url('/assets/fonts/fraunces-latin.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:'DM Sans';src:url('/assets/fonts/dm-sans-latin.woff2') format('woff2');font-style:normal;font-weight:400 700;font-display:swap}

@font-face{font-family:'Barlow Condensed';src:url('/assets/fonts/barlow-condensed-800.woff2') format('woff2');font-style:normal;font-weight:800;font-display:swap}

/* Paper, ink, and a little color. */
:root {
  --paper:#f5efdf;
  --ink:#292a23;
  --muted:#656659;
  --rule:#c5bfad;
  --red:#ac3d28;
  --blue:#344a78;
  --soft-blue:#dce4e9;
  --yellow:#ead99e;
  --dark:#29372f;
  --gutter:clamp(22px,4.6vw,84px);
  --serif:Fraunces,Georgia,serif;
  --sans:'DM Sans',Arial,sans-serif;
  --mono:'SFMono-Regular',Consolas,'Liberation Mono',monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:auto;scroll-padding-top:30px}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
::selection{background:var(--red);color:var(--paper)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border-radius:0}
a,button{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--red);outline-offset:6px}
p,h1,h2,h3,h4,figure{margin:0}
img{display:block;max-width:100%;height:auto}
button:disabled{cursor:default}
[hidden]{display:none!important}
.page-width{margin-inline:var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;z-index:100;top:10px;left:10px;padding:12px 18px;background:var(--ink);color:var(--paper);transform:translateY(-150%)}
.skip-link:focus{transform:translateY(0)}
.eyebrow,.section-index{font-family:var(--mono);font-size:12px;line-height:1.5;letter-spacing:.025em}
.eyebrow{text-transform:uppercase}
.section-index{display:flex;gap:25px;text-transform:uppercase}
.section-index>span:first-child{color:var(--red)}
.small-note{font-size:12px;color:var(--muted)}
.indented-line{display:inline-block;margin-left:12%}

/* The common masthead. */
.site-header{height:100px;display:grid;grid-template-columns:1fr 1fr auto;align-items:center;gap:24px}
.signature{font:550 30px/1 var(--serif);letter-spacing:-.075em;display:inline-flex;align-items:center;min-height:44px;width:fit-content}
.signature-dot{color:var(--red)}
.header-note{font-size:12px;color:var(--muted)}
.site-header nav{display:flex;gap:30px;align-items:center;font-size:14px}
.site-header nav a{min-height:44px;display:flex;align-items:center;position:relative;gap:6px}
.site-header nav a::after{content:'';position:absolute;left:0;right:0;bottom:7px;border-bottom:1px solid;transform:scaleX(0);transform-origin:left;transition:transform .2s}
.site-header nav a:hover::after,.site-header nav a[aria-current]::after{transform:scaleX(1)}
.hello-link{color:var(--red)}
.nav-number{font:10px var(--mono);align-self:center}

/* An invitation, with a photograph on the desk. */
.welcome{border-top:1px solid var(--rule)}
.welcome-topline{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:22px}
.welcome-message{color:var(--red);font:450 19px var(--serif);transform:rotate(-3deg)}
.welcome-composition{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));position:relative;padding-top:70px;column-gap:20px;padding-bottom:65px;isolation:isolate}
.welcome-heading{grid-column:1/9;grid-row:1;position:relative;align-self:start;z-index:2}
.margin-number{position:absolute;top:34px;left:0;writing-mode:vertical-rl;font:10px var(--mono);color:var(--muted);transform:rotate(180deg)}
.welcome h1{font:500 clamp(74px,9.6vw,158px)/.97 var(--serif);letter-spacing:-.065em;margin-left:45px;font-variation-settings:'SOFT' 50,'WONK' 1}
.hello-word{display:block;color:var(--red);font-size:1.22em;letter-spacing:-.075em;margin-left:-.015em;transform:rotate(-3deg);transform-origin:left bottom}
.name-line{display:block;white-space:nowrap;margin-top:10px}
.name-emphasis{position:relative;display:inline-block}
.name-emphasis svg{position:absolute;left:-1%;bottom:-9px;width:103%;height:19px;fill:none;stroke:var(--red);stroke-width:2.3;overflow:visible}
.title-period{color:var(--red)}
.role-note{margin:40px 0 0 49px;font-size:15px;line-height:1.5;color:var(--muted)}
.portrait-print{grid-column:10/13;grid-row:1/3;align-self:start;transform:rotate(4deg);background:#fffcf4;padding:11px 11px 0;box-shadow:0 4px 8px #34302312,0 20px 30px #3430230d;transition:transform .4s;z-index:3;margin-top:13px}
.portrait-print:hover{transform:rotate(1deg) translateY(-4px)}
.portrait-print img{width:100%;aspect-ratio:4/5;object-fit:cover}
.portrait-print figcaption{display:flex;justify-content:space-between;align-items:center;padding:12px 2px 14px;font-size:12px}
.portrait-print figcaption>span:last-child{font:600 28px/1 var(--serif);color:var(--red)}
.welcome-copy{grid-column:5/10;grid-row:2;margin-top:55px;padding-right:22px;z-index:2}
.welcome-copy>p:first-child{font-size:clamp(19px,1.8vw,27px);letter-spacing:-.035em;line-height:1.35;margin-bottom:17px}
.welcome-copy>p:last-child{font-size:15px;max-width:355px;color:var(--muted)}
.studio-object{grid-column:1/4;grid-row:2;align-self:center;width:100%;max-width:290px;transform:rotate(-9deg);transition:transform .4s;z-index:1;justify-self:center;margin-top:0}
.studio-object:hover{transform:rotate(-4deg) translateY(-5px)}
.personal-note-card{grid-column:10/13;grid-row:3;align-self:start;margin-top:25px;position:relative;z-index:5;background:var(--yellow);transform:rotate(-3deg);padding:16px 19px;box-shadow:0 5px 12px #4738200a;color:#4c4429}
.personal-note-card summary{cursor:pointer;list-style:none;display:flex;gap:15px;align-items:center;justify-content:space-between;font:450 19px/1.2 var(--serif);min-height:30px}
.personal-note-card summary::-webkit-details-marker{display:none}
.note-symbol{font-family:var(--sans);font-size:21px;transition:transform .2s}
.personal-note-card[open] .note-symbol{transform:rotate(45deg)}
.personal-note-card p{font-size:14px;line-height:1.6;margin-top:18px}
.personal-note-card a{display:inline-block;text-decoration:underline;text-underline-offset:4px;font-size:13px;padding-top:16px}
.welcome-footline{border-top:1px solid var(--rule);padding-block:18px 35px;display:flex;justify-content:space-between;gap:20px;font-size:12px;color:var(--muted)}
.welcome-footline a{color:var(--red);text-decoration:underline;text-underline-offset:4px}

/* The project is a door into a separate page. */
.work-entry{background:var(--soft-blue);padding:30px 35px 23px;margin-top:45px;transform:rotate(-.7deg);transition:transform .3s}
.work-entry:hover{transform:rotate(0)}
.work-entry .section-index>span:first-child{color:var(--blue)}
.work-entry-link{display:grid;grid-template-columns:15% 1fr auto;gap:20px;align-items:center;margin-block:30px}
.work-index{font:400 clamp(26px,4vw,65px) var(--serif);letter-spacing:-.06em;color:var(--blue)}
.work-entry-link h2{font:500 clamp(38px,4.7vw,73px)/1.1 var(--serif);letter-spacing:-.05em}
.work-entry-link h2>span{display:block;font:15px/1.5 var(--sans);letter-spacing:0;margin-top:5px}
.work-entry-link p{font-size:14px;color:#515d65;margin-top:18px}
.work-entry-action{font-size:14px;color:var(--blue);border-bottom:1px solid;padding-block:12px;display:flex;gap:35px;align-self:end;white-space:nowrap}
.work-entry-action>span{transition:transform .25s;font-family:var(--mono)}
.work-entry-link:hover .work-entry-action>span{transform:rotate(90deg)}
.work-footnote{border-top:1px solid #a7b7c0;padding-top:16px;display:flex;justify-content:space-between;gap:20px;font-size:12px;color:#515d65}
.contact{padding-top:28px;margin-top:105px;border-top:1px solid var(--rule)}
.contact-body{display:grid;grid-template-columns:65% 35%;align-items:end;gap:30px;padding-block:55px 80px}
.contact h2,.project-contact h2{font:450 clamp(49px,6.3vw,104px)/1.02 var(--serif);letter-spacing:-.055em;color:var(--red)}
.contact-aside>p{font-size:16px;line-height:1.55;margin-bottom:25px}
.contact-link{display:flex;flex-direction:column;align-items:start;gap:10px;width:fit-content;padding-bottom:5px}
.contact-handle{font:450 clamp(28px,3vw,45px)/1.3 var(--serif);letter-spacing:-.05em;border-bottom:1px solid var(--red);color:var(--red);transition:color .2s}
.contact-link:hover .contact-handle{color:var(--blue);border-color:var(--blue)}
.site-footer{border-top:1px solid var(--rule);padding-block:25px 30px;display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:12px;color:var(--muted)}
.footer-signature{font:500 23px var(--serif);color:var(--ink);letter-spacing:-.055em}
.site-footer>a:last-child:hover{text-decoration:underline;text-underline-offset:4px}

/* DYNAMO — the editorial opening. */
.project-intro{border-top:1px solid var(--rule);padding-top:26px}
.project-heading{position:relative;padding-bottom:60px}
.project-heading h1{font:500 clamp(70px,9vw,148px)/.95 var(--serif);letter-spacing:-.06em;margin-top:43px;color:var(--red)}
.project-heading h1>span{margin-left:14%;color:var(--ink)}
.intro-aside{position:absolute;right:1%;bottom:74px;max-width:270px;font-size:17px}
.underlined-link{display:inline-block;font-size:14px;border-bottom:1px solid;padding-bottom:6px;margin-top:25px;color:var(--red)}
.underlined-link:hover{color:var(--blue)}
.project-facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);padding-block:20px 38px;gap:24px;font-size:14px}
.project-facts span{display:block;margin-bottom:8px;font:11px var(--mono);text-transform:uppercase;color:var(--muted)}
.cover-detail{position:relative;aspect-ratio:1.82;background:#e7e6e1;overflow:hidden}
.cover-detail img{position:absolute;width:119%;max-width:none;left:-9.2%;top:-42%;height:auto}
.case-cover{border:10px solid #fffaf0;background:#fffaf0;box-shadow:0 8px 22px #39341e0b;transform:rotate(-.5deg)}
.case-cover figcaption{display:flex;justify-content:space-between;gap:20px;font-family:var(--mono);font-size:11px;padding:14px 7px 6px;color:var(--muted)}
.design-note{display:grid;grid-template-columns:28% 1fr;margin:65px 0 90px;gap:5%}
.design-note>p{font:400 clamp(24px,2.8vw,43px)/1.23 var(--serif);letter-spacing:-.035em;max-width:800px}

/* Four authentic interface views. */
.inquiry{background:var(--dark);color:var(--paper);padding-block:38px 55px}
.inquiry .section-index>span:first-child{color:#e5bd87}
.inquiry :focus-visible{outline-color:#e5bd87}
.inquiry-heading{display:flex;justify-content:space-between;align-items:end;padding-block:45px 55px;gap:30px}
.inquiry-heading h2{font:400 clamp(48px,5.4vw,86px)/1.07 var(--serif);letter-spacing:-.045em}
.inquiry-heading h2 .indented-line{margin-left:10%;white-space:nowrap}
.inquiry-heading>p{font-size:14px;line-height:1.6;flex-shrink:0;padding-bottom:4px;color:#d0d6c8}
.flow-explorer{display:grid;grid-template-columns:25% 1fr;column-gap:5%;position:relative}
.flow-tabs{align-self:start;border-top:1px solid #889589}
.flow-tab{display:grid;grid-template-columns:25px 1fr auto;gap:9px;padding:20px 0;border-bottom:1px solid #657066;align-items:start;font-size:16px;line-height:1.3;transition:padding .2s,background .2s,color .2s}
.step-number,.tab-indicator{font:12px/1.8 var(--mono)}
.step-subtitle{display:block;font-size:12px;color:#c0c9bc;margin-top:8px}
.flow-tab:hover{background:#35483b}
.flow-tab[aria-selected=true]{background:#ebd5a6;color:var(--ink);padding-inline:12px}
.flow-tab[aria-selected=true] .step-subtitle{color:#5b5c49}
.flow-views{min-width:0}
.flow-view{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;padding-bottom:30px}
.interface-figure{width:100%;max-width:520px;justify-self:center}
.inspect-image{display:block;cursor:zoom-in}
.interface-figure img{width:100%;height:auto}
.interface-figure figcaption{display:flex;justify-content:space-between;gap:15px;margin-top:15px;font-size:12px;color:#d0d6c8}
.interface-figure figcaption a{white-space:nowrap;text-decoration:underline;text-underline-offset:4px}
.interface-figure figcaption a:hover{color:white}
.flow-copy{max-width:520px;width:100%;justify-self:center}
.flow-copy>.eyebrow{color:#e5bd87;font-size:11px;margin-bottom:15px}
.flow-copy h3{font:450 clamp(29px,2.8vw,43px)/1.14 var(--serif);letter-spacing:-.035em;margin-bottom:20px}
.flow-copy>p:not(.eyebrow){font-size:16px;line-height:1.6;max-width:480px}
.flow-copy .flow-detail{color:#c0c9bc;margin-top:15px}
.flow-copy .chapter-jump{display:inline-block;color:#e5bd87;font-size:13px;border-bottom:1px solid;padding-block:7px;margin-top:20px}
.flow-pagination{grid-column:2;display:flex;justify-content:space-between;align-items:center;width:100%;max-width:520px;justify-self:center;border-top:1px solid #889589;padding-top:12px}
.flow-position{font:12px/1.5 var(--mono);color:#c0c9bc}
.flow-pagination>div{display:flex;gap:24px}
.flow-pagination button{color:inherit;font-size:14px;background:none;border:0;padding:10px 0;border-bottom:1px solid currentColor;min-height:44px}
.flow-pagination button:hover:not(:disabled){color:#e5bd87}
.flow-pagination button:disabled{color:#a4b09f;border-bottom-color:transparent}
.documentation-note{margin-top:30px;font-size:12px;line-height:1.6;color:#c0c9bc;max-width:650px}
.human-handoff{border-top:1px solid #889589;margin-top:45px;padding-top:28px;display:grid;grid-template-columns:25% 1fr;gap:5%}
.human-handoff>p{font:400 clamp(27px,3vw,44px)/1.2 var(--serif);letter-spacing:-.035em;max-width:780px}
.human-handoff>p>span{display:block;max-width:550px;font:16px/1.6 var(--sans);letter-spacing:0;color:#c0c9bc;margin-top:20px}
.system-details{margin-top:35px;border-top:1px solid #657066;border-bottom:1px solid #657066}
.system-details summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;padding-block:22px;font-size:14px}
.system-details summary::-webkit-details-marker{display:none}
.details-toggle::after{content:'[ + ]';font:13px var(--mono)}
.system-details[open] .details-toggle::after{content:'[ − ]'}
.system-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding-block:15px 30px}
.system-grid h3{font-size:16px;font-weight:500;margin-bottom:12px}
.system-grid p{font-size:14px;line-height:1.65;color:#c0c9bc}

/* Six chapters explain the decisions behind those screens. */
.breakdown{padding-block:75px 20px}
.breakdown-heading{display:grid;grid-template-columns:55% 1fr;gap:8%;align-items:end;margin-block:38px 50px}
.breakdown-heading h2{font:450 clamp(42px,5.4vw,80px)/1.04 var(--serif);letter-spacing:-.05em}
.breakdown-heading>p{font-size:17px;line-height:1.6;max-width:440px}
.chapter-nav{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-bottom:65px}
.chapter-nav a{font-size:14px;display:flex;gap:16px;padding:15px 12px;align-items:center;min-height:55px;transition:background .2s}
.chapter-nav a:hover{background:var(--yellow)}
.chapter-nav a>span{color:var(--red);font:12px var(--mono)}
.chapter{display:grid;grid-template-columns:25% 1fr;gap:5%;padding-block:50px 60px;border-top:1px solid var(--rule);scroll-margin-top:25px}
.chapter-heading{position:sticky;top:28px;align-self:start}
.chapter-no{font:400 62px/1 var(--serif);color:var(--red);letter-spacing:-.07em}
.chapter h3{font:450 clamp(26px,2.8vw,41px)/1.15 var(--serif);letter-spacing:-.04em;margin-top:18px}
.chapter-type{font:11px/1.5 var(--mono);color:var(--muted);margin-top:16px;text-transform:uppercase}
.chapter-content{min-width:0}
.chapter-lead{font-size:20px;line-height:1.5;letter-spacing:-.02em;max-width:730px;margin-bottom:30px}
.chapter-columns{display:grid;grid-template-columns:1fr 1fr;gap:35px;align-items:start}
.chapter-content h4{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--red);margin-bottom:12px;font-weight:600}
.chapter-content p:not(.chapter-lead):not(.diagram-caption){font-size:16px;line-height:1.75;margin-bottom:15px}
.chapter-content ul{padding-left:19px;margin:12px 0 20px;font-size:16px;line-height:1.7}
.chapter-content li+li{margin-top:6px}
.chapter-content strong{font-weight:600}
.chapter-content .boundary{border-left:3px solid var(--red);padding:6px 0 6px 18px;margin-top:25px;max-width:740px}
.diagram{margin:30px 0;background:#e9e3d3;padding:25px 24px;border:1px solid #d2c9b4}
.diagram-caption{font:11px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.025em;color:var(--muted);margin-bottom:18px}
.diagram-flow{display:flex;gap:15px;align-items:stretch;padding:0;margin:0;list-style:none}
.diagram-flow>li{flex:1;min-width:0;border-top:2px solid var(--red);padding:13px 0 0;font-size:14px;position:relative}
.diagram-flow>li+li{margin-top:0}
.diagram-flow small{display:block;font-size:12px;color:var(--muted);margin-top:6px;line-height:1.5}
.diagram-flow b{font-weight:600}
.diagram-flow .human-action{border-color:var(--blue);color:var(--blue)}
.diagram-legend{font:12px/1.5 var(--sans);color:var(--muted);margin-top:18px}
.field-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.field-groups>div{border-left:1px solid #b9af94;padding-left:14px}
.field-groups strong{display:block;font-size:14px;margin-bottom:8px}
.field-groups span{font-size:13px;line-height:1.8;color:var(--muted);display:block}
.file-limits{display:flex;gap:30px}
.file-limit{flex:1;border-right:1px solid #c0b698}
.file-limit:last-child{border:0}
.file-limit strong{display:block;font:500 43px/1.1 var(--serif);letter-spacing:-.05em;color:var(--blue)}
.file-limit span{font-size:12px;display:block;margin-top:7px}
.storage-diagram{display:grid;grid-template-columns:1fr 1fr 1fr;gap:17px;align-items:center;text-align:center}
.storage-diagram>div{border:1px solid #bdb197;padding:13px 10px;font-size:14px}
.storage-split{display:grid;gap:10px;border:0!important;padding:0!important}
.storage-split>span{border:1px solid #bdb197;padding:12px 6px;background:#f6f0df}
.storage-diagram small{display:block;font-size:11px;color:var(--muted);margin-top:5px}
.timeline{display:flex;align-items:baseline;justify-content:space-between;gap:20px;border-top:2px solid var(--blue);padding-top:16px}
.timeline>strong{font:450 39px/1.1 var(--serif);color:var(--blue);letter-spacing:-.04em}
.timeline>span{font-size:13px;text-align:right}
.identity-samples{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin:25px 0}
.type-sample{background:#1b1c19;color:#f2f1ec;padding:25px}
.type-sample strong{font:800 35px/.98 'Barlow Condensed',var(--sans);letter-spacing:-.02em;text-transform:uppercase;display:block}
.type-sample span{display:block;font:11px/1.5 var(--mono);margin-top:16px;color:#c8c5b9}
.color-samples{display:flex;gap:12px}
.color-samples>div{flex:1;display:flex;flex-direction:column;justify-content:end;min-height:130px;padding:12px;font:11px/1.5 var(--mono)}
.color-samples>div:first-child{background:#f2f1ec;border:1px solid #cbc7ba;color:#1b1c19}
.color-samples>div:last-child{background:#1b1c19;color:#f2f1ec}
.process-note{background:var(--yellow);padding:20px 23px;margin-top:25px;transform:rotate(-.6deg)}
.process-note p{margin:0!important}
.project-contact{padding-top:30px;margin-top:40px;border-top:1px solid var(--rule)}

/* Inspection is accessible, including the enlarged image's scroll region. */
.image-dialog{border:0;padding:0;background:var(--paper);color:var(--ink);width:calc(100% - 60px);height:calc(100dvh - 60px);max-width:1350px;max-height:none;overflow:hidden}
.image-dialog::backdrop{background:#162218d9}
.image-dialog[open]{display:flex;flex-direction:column}
.image-toolbar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--rule);padding:12px 24px;gap:20px;flex-shrink:0}
.image-toolbar h2{font:13px/1.4 var(--mono)}
.image-toolbar>div{display:flex;gap:25px}
.image-toolbar button{border:0;background:none;padding:8px 0;font-size:14px;white-space:nowrap;min-height:44px}
.image-toolbar button:hover{text-decoration:underline;text-underline-offset:4px}
.image-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:20px;display:grid;place-items:start center}
.image-scroll:focus-visible{outline:2px solid var(--red);outline-offset:-4px}
.dialog-image{height:100%;width:auto;max-height:calc(100dvh - 200px);max-width:100%;object-fit:contain}
.is-zoomed .image-scroll{display:block}
.is-zoomed .dialog-image{width:1086px;height:auto;max-height:none;max-width:none;margin-inline:auto}
.image-help{text-align:center;font-size:12px;padding:10px 20px;border-top:1px solid var(--rule);flex-shrink:0}
.dialog-open{overflow:hidden}

/* Motion adds a little presence, never a barrier to the content. */
@keyframes settle-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.welcome-heading,.welcome-copy{animation:settle-in .65s ease-out both}
.welcome-copy{animation-delay:.12s}
.flow-view:not([hidden]) .flow-copy{animation:settle-in .28s ease-out both}

/* The composition changes scale, rather than shrinking every part. */
@media(min-width:1100px){
  .flow-explorer{grid-template-columns:22% 1fr;column-gap:5%}
  .flow-view{grid-template-columns:53% 1fr;gap:35px}
  .flow-copy{align-self:center}
  .flow-copy h3{font-size:35px}
  .flow-copy>p:not(.eyebrow){font-size:15px}
  .flow-pagination{max-width:none}
  .flow-tabs{position:sticky;top:28px}
}
@media(min-width:1800px){
  .page-width{max-width:1660px;margin-inline:auto}
  .welcome h1{font-size:169px}
}
@media(max-width:1100px){
  .site-header{grid-template-columns:1fr auto}
  .header-note{display:none}
  .welcome-composition{padding-top:60px;column-gap:12px}
  .welcome h1{font-size:9.6vw;margin-left:30px}
  .margin-number{font-size:9px;top:15px}
  .portrait-print{grid-column:9/13;margin-top:0}
  .welcome-heading{grid-column:1/9}
  .role-note{margin-left:32px;font-size:14px;margin-top:25px}
  .welcome-copy{grid-column:5/9;margin-top:30px;padding-right:10px}
  .welcome-copy>p:first-child{font-size:20px}
  .welcome-copy>p:last-child{font-size:14px}
  .personal-note-card{grid-column:9/13;margin-top:5px}
  .personal-note-card summary{font-size:17px}
  .studio-object{grid-column:1/4;max-width:210px}
  .work-entry-link{grid-template-columns:12% 1fr;gap:20px}
  .work-entry-action{grid-column:2;width:fit-content}
  .contact-body{grid-template-columns:60% 40%;gap:0}
  .contact-aside{padding-left:18px}
  .contact-aside>p{font-size:15px}
  .intro-aside{font-size:15px;max-width:210px;bottom:65px}
  .inquiry-heading{display:block}
  .inquiry-heading>p{margin:25px 0 0 30%}
  .flow-tab{grid-template-columns:23px 1fr;font-size:14px;gap:6px}
  .tab-indicator{display:none}
  .breakdown-heading{grid-template-columns:1fr 1fr;gap:6%}
  .chapter{grid-template-columns:26% 1fr;gap:5%}
  .chapter-columns{grid-template-columns:1fr;gap:20px}
}
@media(max-width:700px){
  .site-header{height:82px;font-size:13px;gap:15px}
  .signature{font-size:27px}
  .site-header nav{gap:20px;font-size:13px}
  .nav-number{display:none}
  .welcome-message{font-size:16px}
  .welcome-topline .eyebrow{font-size:10px;max-width:145px}
  .welcome h1{font-size:9.8vw;margin-left:0}
  .margin-number{display:none}
  .role-note{margin-left:0;font-size:13px}
  .portrait-print{padding:8px 8px 0}
  .portrait-print figcaption{font-size:10px;padding:9px 0}
  .portrait-print figcaption>span:last-child{font-size:22px}
  .welcome-copy{grid-column:4/9;padding-right:10px}
  .welcome-copy>p:first-child{font-size:18px}
  .welcome-copy>p:last-child{font-size:14px}
  .personal-note-card{padding:13px 15px}
  .personal-note-card summary{font-size:15px}
  .welcome-footline{font-size:11px}
  .work-entry{padding:24px;margin-top:30px}
  .work-footnote{font-size:11px}
  .work-footnote>span:last-child{display:none}
  .contact{margin-top:70px}
  .project-heading h1{font-size:11.5vw}
  .intro-aside{position:static;margin:30px 0 0 32%;max-width:none}
  .project-heading{padding-bottom:35px}
  .project-facts{grid-template-columns:repeat(2,1fr);font-size:13px;row-gap:23px;padding-bottom:28px}
  .case-cover{border-width:7px}
  .case-cover figcaption{font-size:10px;line-height:1.5;padding:10px 3px 5px}
  .design-note{grid-template-columns:1fr;gap:24px;margin:38px 0 55px}
  .design-note .eyebrow br{display:none}
  .design-note>p{margin-left:12%;font-size:26px}
  .inquiry-heading{padding-block:35px}
  .inquiry-heading h2{font-size:8.8vw;line-height:1.15}
  .inquiry-heading h2 .indented-line{white-space:normal;margin-left:12%}
  .inquiry-heading>p{margin-left:12%;font-size:14px}
  .flow-explorer{display:block}
  .flow-tabs{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #889589;margin-bottom:28px}
  .flow-tab{padding:15px 10px;grid-template-columns:23px 1fr;font-size:14px;min-height:85px}
  .flow-tab:nth-child(odd){border-right:1px solid #657066}
  .flow-tab[aria-selected=true]{padding-inline:10px}
  .step-subtitle{font-size:11px}
  .interface-figure{max-width:450px}
  .interface-figure figcaption{font-size:11px}
  .interface-figure figcaption a{font-size:12px}
  .flow-copy{max-width:450px}
  .flow-copy h3{font-size:32px}
  .flow-pagination{max-width:450px;margin-inline:auto}
  .documentation-note{font-size:11px;max-width:400px}
  .human-handoff{grid-template-columns:1fr;gap:22px;margin-top:38px}
  .human-handoff>p{font-size:31px;margin-left:12%}
  .human-handoff>p>span{font-size:15px}
  .system-grid{grid-template-columns:1fr;gap:24px}
  .breakdown{padding-top:50px}
  .breakdown-heading{grid-template-columns:1fr;gap:25px;margin-block:30px 35px}
  .breakdown-heading h2{font-size:47px;max-width:440px}
  .breakdown-heading>p{font-size:16px;margin-left:12%}
  .chapter-nav{grid-template-columns:1fr 1fr;margin-bottom:35px}
  .chapter-nav a{font-size:12px;gap:10px;padding:12px 6px}
  .chapter{grid-template-columns:1fr;gap:25px;padding-block:35px 45px}
  .chapter-heading{position:static;display:grid;grid-template-columns:56px 1fr;gap:8px 18px;align-items:start}
  .chapter-no{font-size:43px;grid-row:1/3}
  .chapter h3{font-size:29px;margin:0}
  .chapter-type{font-size:10px;margin:0;grid-column:2}
  .chapter-lead{font-size:19px;margin-bottom:25px}
  .chapter-content h4{font-size:12px}
  .chapter-columns{gap:15px}
  .diagram{padding:20px 18px;margin-block:25px}
  .field-groups{grid-template-columns:1fr;gap:18px}
  .field-groups span{display:inline}
  .field-groups span+span::before{content:' · '}
  .file-limits{gap:15px}
  .file-limit strong{font-size:32px}
  .file-limit span{font-size:11px}
  .diagram-flow{flex-wrap:wrap;gap:20px}
  .diagram-flow>li{flex-basis:calc(50% - 20px);font-size:13px}
  .storage-diagram{gap:9px;font-size:12px}
  .storage-diagram>div{font-size:12px;padding:10px 6px}
  .storage-split>span{padding:10px 4px}
  .timeline>strong{font-size:31px}
  .timeline>span{font-size:12px}
  .identity-samples{gap:15px}
  .color-samples{gap:7px}
  .color-samples>div{font-size:10px;padding:8px}
  .image-dialog{width:100%;height:100dvh;max-height:100dvh;margin:0}
  .image-toolbar{padding:10px 16px;gap:12px}
  .image-toolbar h2{font-size:11px;max-width:130px}
  .image-toolbar>div{gap:17px}
  .image-toolbar button{font-size:13px}
  .image-scroll{padding:12px}
  .dialog-image{max-height:calc(100dvh - 160px)}
  .image-help{font-size:11px}
}
@media(max-width:500px){
  :root{--gutter:22px}
  .site-header nav{gap:16px;font-size:12px}
  .signature{font-size:24px}
  .welcome-topline{padding-top:16px}
  .welcome-topline .eyebrow{max-width:150px;font-size:10px}
  .welcome-message{font-size:15px;max-width:120px;text-align:right}
  .welcome-composition{padding-top:40px;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 10px;padding-bottom:30px}
  .welcome-heading{grid-column:1/7;grid-row:1}
  .welcome h1{font-size:14.8vw;line-height:1.05;letter-spacing:-.07em}
  .hello-word{font-size:1.48em}
  .name-line{margin-top:6px}
  .name-emphasis svg{bottom:-9px;height:14px}
  .role-note{margin-top:30px;margin-left:3px;font-size:13px}
  .portrait-print{grid-column:4/7;grid-row:2/4;margin-top:32px;margin-right:4px;transform:rotate(4deg);padding:7px 7px 0}
  .portrait-print figcaption{font-size:9px;gap:3px}
  .portrait-print figcaption>span:last-child{font-size:20px}
  .studio-object{grid-column:1/4;grid-row:2;width:93%;align-self:center;margin-top:37px;max-width:175px;justify-self:start}
  .welcome-copy{grid-column:1/7;grid-row:4;margin-top:35px;margin-left:13%;padding:0}
  .welcome-copy>p:first-child{font-size:22px;letter-spacing:-.04em}
  .welcome-copy>p:last-child{font-size:15px;max-width:315px}
  .personal-note-card{grid-column:2/7;grid-row:5;margin-top:26px;margin-right:8px;padding:16px 18px;transform:rotate(-2deg)}
  .personal-note-card summary{font-size:18px}
  .welcome-footline{display:block;font-size:11px;padding-block:20px}
  .welcome-footline>span{display:block;max-width:240px;margin-bottom:9px}
  .work-entry{margin-top:25px;padding:23px 18px;transform:rotate(-.7deg)}
  .section-index{font-size:11px;gap:18px}
  .work-entry-link{grid-template-columns:1fr;gap:13px;margin-block:25px 22px}
  .work-index{font-size:25px;position:absolute;right:20px;top:22px}
  .work-entry-link h2{font-size:41px}
  .work-entry-link h2>span{font-size:13px}
  .work-entry-link p{font-size:13px;max-width:240px;margin-top:15px}
  .work-entry-action{grid-column:1;font-size:13px;margin-top:9px;width:100%;justify-content:space-between}
  .work-footnote{font-size:10px;line-height:1.7}
  .contact{margin-top:65px;padding-top:20px}
  .contact-body{display:block;padding-block:37px 48px}
  .contact h2,.project-contact h2{font-size:12.5vw;line-height:1.1;letter-spacing:-.06em}
  .contact-aside{padding:0;margin:30px 0 0 13%}
  .contact-aside>p{font-size:15px;margin-bottom:20px}
  .contact-handle{font-size:32px}
  .site-footer{font-size:10px;gap:18px;flex-wrap:wrap;padding-block:22px}
  .site-footer>span{order:3;flex-basis:100%}
  .site-footer>a:last-child{margin-left:auto}
  .footer-signature{font-size:23px}
  .project-heading h1{font-size:12vw}
  .intro-aside{margin-left:23%;font-size:15px}
  .case-cover figcaption>span:last-child{display:none}
  .project-contact .contact-link{margin:30px 0 0 13%}
  .identity-samples{grid-template-columns:1fr}
  .color-samples>div{min-height:95px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}