/* Local Latin font files, distributed under the SIL Open Font License. */
@font-face {
  font-family: Barlow;
  src: url('../fonts/landing/barlow-condensed-900-latin.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Space;
  src: url('../fonts/landing/space-grotesk-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Space;
  src: url('../fonts/landing/space-grotesk-latin.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Plex;
  src: url('../fonts/landing/ibm-plex-mono-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Approved white portfolio layout. */
:root{
--ink:#111210;
--paper:#fff;
--red:#d72638;
--muted:#62665e;
--line:#d4d5cf;
--display:Barlow,Impact,sans-serif;
--sans:Space,Arial,sans-serif;
--mono:Plex,monospace;
--hex:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}

    *{
box-sizing:border-box}
html{
scroll-behavior:smooth;
scroll-padding-top:86px}
body{
margin:0;
background:var(--paper);
color:var(--ink);
font:400 16px/1.7 var(--sans);
-webkit-font-smoothing:antialiased}
a{
color:inherit;
text-decoration:none}
a:hover{
color:var(--red)}
button{
font:inherit}
img{
display:block;
max-width:100%;
height:auto}
svg{
display:block}
::selection{
background:var(--red);
color:white}
:focus-visible{
outline:3px solid var(--red);
outline-offset:5px}
section{
scroll-margin-top:20px}
.sheet{
overflow:clip}
.wrap{
width:calc(100% - 88px);
max-width:1440px;
margin-inline:auto}
.skip{
position:fixed;
z-index:100;
left:16px;
top:-80px;
padding:12px 20px;
background:var(--ink);
color:white}
.skip:focus{
top:16px}
.arrow{
width:21px;
height:21px;
fill:none;
stroke:currentColor;
stroke-width:1.5}
.hex{
width:24px;
height:28px;
fill:none;
stroke:currentColor;
stroke-width:1}
.eyebrow{
display:flex;
align-items:center;
gap:12px;
margin:0;
font:12px/1.6 var(--mono);
letter-spacing:.025em}
.eyebrow::before{
content:'';
width:8px;
height:10px;
clip-path:var(--hex);
background:var(--red);
flex:none}
.text-link{
display:inline-flex;
gap:15px;
align-items:center;
border-bottom:1px solid currentColor;
padding:9px 0;
font:12px/1.7 var(--mono);
min-height:44px}
.text-link .arrow{
width:18px;
height:18px}
.button{
display:inline-flex;
align-items:center;
justify-content:center;
gap:18px;
min-height:46px;
padding:11px 19px;
background:var(--ink);
color:white;
font:12px/1.7 var(--mono);
border:1px solid var(--ink)}
.button:hover{
background:var(--red);
border-color:var(--red);
color:white}
.outline{
color:transparent;
-webkit-text-stroke:1.2px var(--ink)}

    .about{
padding:48px 0 70px;
border-top:1px solid var(--ink)}
.about-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
margin-top:34px}
.about h2{
font:900 clamp(52px,6.5vw,94px)/.95 var(--display);
letter-spacing:-.02em;
text-transform:uppercase;
margin:0 0 28px}
.about-intro{
max-width:530px;
font-size:16px;
line-height:1.9;
margin:0 0 21px}
.about-intro a{
text-decoration:underline;
text-underline-offset:4px}
.about-note{
font:12px/1.8 var(--mono);
color:var(--muted);
margin:24px 0 0}
.capabilities{
list-style:none;
margin:0;
padding:0}
.capabilities li{
border-top:1px solid var(--line);
padding:17px 0 19px}
.capabilities li:first-child{
border-top-color:var(--ink)}
.capabilities strong{
font:700 17px/1.5 var(--sans)}
.capabilities p{
font-size:14px;
line-height:1.8;
max-width:450px;
margin:8px 0 0;
color:var(--muted)}
.community-details{
margin-top:36px;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line)}
.community-details summary{
display:flex;
align-items:center;
justify-content:space-between;
gap:25px;
cursor:pointer;
list-style:none;
padding:18px 0;
font:700 14px/1.6 var(--sans);
min-height:60px}
.community-details summary::-webkit-details-marker{
display:none}
.community-details summary::after{
content:'+';
font:18px var(--mono);
color:var(--red)}
.community-details[open] summary::after{
content:'−'}
.community-details summary span{
font:12px var(--mono);
color:var(--muted);
margin-left:auto}
.community-body{
padding:5px 0 23px;
max-width:750px}
.community-body p{
font-size:14px;
line-height:1.9;
margin:0 0 18px}
.community-links{
display:flex;
gap:27px;
flex-wrap:wrap}
.community-body .snapshot{
font:11px/1.8 var(--mono);
color:var(--muted);
margin:17px 0 0}

    .work{
padding:42px 0 66px;
border-top:4px solid var(--ink)}
.section-heading{
display:flex;
align-items:end;
justify-content:space-between;
gap:40px;
margin:25px 0 38px}
.section-heading h2{
font:900 clamp(65px,9vw,130px)/.9 var(--display);
letter-spacing:-.025em;
text-transform:uppercase;
margin:0;
flex:1;
min-width:0}
.section-heading>p{
max-width:280px;
margin:0;
font:12px/1.9 var(--mono);
color:var(--muted)}
.project{
display:grid;
grid-template-columns:40px minmax(0,1fr) 360px;
gap:32px;
align-items:start;
border-top:1px solid var(--ink);
padding:31px 0 34px}
.project-num{
font:12px var(--mono);
color:var(--red);
padding-top:6px}
.project h3{
font:900 clamp(45px,6vw,86px)/.96 var(--display);
letter-spacing:-.02em;
text-transform:uppercase;
margin:0}
.project:nth-of-type(2) h3{
padding-left:9%;
color:transparent;
-webkit-text-stroke:1px var(--ink)}
.project:nth-of-type(2) h3 a:hover{
-webkit-text-stroke-color:var(--red)}
.project-role{
display:block;
font:12px/1.6 var(--mono);
color:var(--muted);
margin-bottom:12px}
.project-copy p{
font-size:14px;
line-height:1.9;
max-width:355px;
margin:0 0 13px}
.work-bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap:26px;
border-top:1px solid var(--ink);
padding-top:17px;
font:12px/1.9 var(--mono);
color:var(--muted)}

    .guides{
position:relative;
padding:43px 0 64px;
border-top:1px solid var(--ink)}
.guide-heading{
margin-bottom:30px}
.guide-heading h2{
font-size:clamp(58px,7.8vw,112px);
max-width:810px;
line-height:.94}
.guide-intro{
font-size:16px;
line-height:1.9;
margin:0 0 24px;
max-width:620px}
.guide-list{
margin:0;
padding:0;
list-style:none;
border-top:1px solid var(--ink)}
.guide-list a{
display:grid;
grid-template-columns:95px minmax(0,1fr) 300px 24px;
gap:25px;
align-items:center;
padding:23px 0;
border-bottom:1px solid var(--line);
min-height:94px}
.guide-category{
font:12px var(--mono);
color:var(--muted)}
.guide-list strong{
font:700 21px/1.5 var(--sans)}
.guide-list p{
font-size:13px;
line-height:1.8;
color:var(--muted);
margin:0;
max-width:300px}
.guide-list a:hover strong{
color:var(--red)}
.guide-list a:hover .arrow{
transform:translate(2px,-2px)}
.guide-list .arrow{
transition:transform .2s}
.guide-bottom{
display:flex;
justify-content:space-between;
gap:30px;
align-items:center;
margin-top:26px}
.writing-links{
display:flex;
gap:24px;
flex-wrap:wrap;
font:12px var(--mono)}
.writing-links a{
min-height:44px;
display:flex;
align-items:center}
.guide-mark{
position:absolute;
left:-34px;
top:61px;
width:93px;
height:107px;
fill:none;
stroke:var(--line);
z-index:-1;
transform:rotate(-13deg)}

    .contact{
position:relative;
padding:39px 0 68px;
border-top:4px solid var(--ink)}
.contact h2{
font:900 clamp(70px,15vw,215px)/.85 var(--display);
letter-spacing:-.025em;
text-transform:uppercase;
margin:35px 0 0}
.contact h2 span{
display:block}
.contact h2 .outline{
padding-left:7%}
.contact-bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap:40px;
margin-top:35px}
.email{
font:400 clamp(16px,2vw,28px)/1.6 var(--mono);
display:inline-flex;
align-items:center;
gap:25px;
border-bottom:1px solid var(--ink);
padding:11px 0;
min-height:44px}
.contact-bottom p{
font-size:14px;
line-height:1.8;
max-width:350px;
margin:0}
.footer{
padding:23px 0 26px;
border-top:1px solid var(--ink)}
.footer-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
font:11px/1.9 var(--mono)}
.footer-top nav{
display:flex;
gap:25px;
flex-wrap:wrap}
.footer-top nav a{
min-height:44px;
display:flex;
align-items:center}
.footer-bottom{
display:flex;
justify-content:space-between;
gap:24px;
border-top:1px solid var(--line);
padding-top:14px;
margin-top:15px;
font:11px/1.8 var(--mono);
color:var(--muted)}
.footer-bottom nav{
display:flex;
gap:25px}
.footer-bottom nav a{
min-height:35px;
display:flex;
align-items:center}

    
    body{
background:#fafbf8}
.masthead{
position:sticky;
top:14px;
z-index:50;
height:68px;
display:grid;
grid-template-columns:1fr auto 1fr;
gap:32px;
align-items:center}
.masthead::before{
content:'';
position:absolute;
inset:-14px -44px -8px;
background:linear-gradient(#fafbf8 70%,rgba(250,251,248,0));
z-index:-1;
pointer-events:none}
.wordmark{
display:inline-flex;
align-items:center;
gap:11px;
width:max-content;
font:700 12px var(--sans)}
.wordmark .hex{
color:var(--red)}
.primary-nav{
display:flex;
align-items:center;
gap:2px;
padding:4px;
border:1px solid #e1e5dd;
border-radius:999px;
background:rgba(235,239,232,.82);
backdrop-filter:blur(14px);
font:12px/1.5 var(--sans);
box-shadow:0 3px 14px #222b1710}
.primary-nav a{
display:flex;
align-items:center;
justify-content:center;
min-height:44px;
padding:10px 19px;
border-radius:999px;
transition:background .2s,color .2s}
.primary-nav a:hover{
background:#ffffffa6}
.primary-nav a[aria-current=location]{
background:white;
color:var(--ink);
box-shadow:0 2px 7px #25302012}
.primary-nav a[aria-current=location]::before{
content:'';
width:5px;
height:6px;
clip-path:var(--hex);
background:var(--red);
margin-right:7px}
.contact-nav{
justify-self:end;
display:inline-flex;
align-items:center;
gap:15px;
min-height:44px;
background:var(--ink);
color:white;
padding:10px 19px;
border-radius:999px;
font:12px/1.5 var(--sans)}
.contact-nav:hover{
color:white;
background:var(--red)}
.contact-nav .arrow{
width:17px;
height:17px}

    .hero.wrap{
width:calc(100% - 48px);
max-width:1480px;
margin-top:22px;
margin-bottom:52px}
.hero-stage{
position:relative;
isolation:isolate;
border:1px solid #dfe4da;
border-radius:32px;
padding:32px 32px 22px;
background:radial-gradient(ellipse at 90% 10%,#dce5d7a6,transparent 39%),radial-gradient(ellipse at 6% 93%,#e9d7d733,transparent 37%),linear-gradient(115deg,#fff 18%,#fcfdfa 57%,#f4f7f1);
box-shadow:0 20px 80px #23351b08,0 2px 3px #ffffff inset}
.hero-stage::before{
content:'';
position:absolute;
inset:12% 17% 17%;
background:radial-gradient(ellipse,#ffffffee,#ffffff75 58%,transparent 77%);
border-radius:50%;
filter:blur(26px);
z-index:0;
pointer-events:none}
.stage-wires{
position:absolute;
inset:0;
width:100%;
height:100%;
pointer-events:none;
opacity:.62;
z-index:0}
.hero-main{
position:relative;
z-index:2;
max-width:1100px;
margin:auto;
text-align:center}
.hero-overline{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
margin:0;
font:11px/1.65 var(--mono);
color:var(--muted)}
.hero-overline::before{
content:'';
width:7px;
height:9px;
clip-path:var(--hex);
background:var(--red);
flex:none}
.name{
margin:20px 0 0;
font:900 clamp(132px,20.5vw,330px)/.755 var(--display);
letter-spacing:-.032em;
text-transform:uppercase}
.name span{
display:block}
.name .surname{
color:transparent;
-webkit-text-stroke:1.35px var(--ink)}
.hero-purpose{
margin:19px auto 0;
max-width:580px;
font:400 21px/1.4 var(--sans);
letter-spacing:-.035em}
.hero-purpose strong{
font-weight:700}
.hero-media{
display:contents}
.hero-photo{
position:absolute;
z-index:3;
left:22px;
top:176px;
width:164px;
padding:7px;
margin:0;
background:#ffffffbd;
border:1px solid white;
border-radius:19px;
transform:rotate(-5deg);
box-shadow:0 12px 26px #21301b13;
backdrop-filter:blur(10px)}
.photo-window{
width:100%;
aspect-ratio:.96;
overflow:hidden;
border-radius:12px}
.hero-photo img{
width:100%;
height:100%;
object-fit:cover;
object-position:59% 32%;
filter:grayscale(1) contrast(1.05);
transform:scale(1.25);
transform-origin:59% 30%}
.hero-photo figcaption{
padding:10px 3px 4px;
font:9px/1.7 var(--mono);
color:var(--muted)}
.paper-proof{
position:absolute;
z-index:3;
right:-7px;
top:220px;
width:218px;
aspect-ratio:1/1.07;
transform:rotate(7deg);
transition:transform .3s ease}
.paper-proof:hover,.paper-proof:focus-within{
transform:rotate(4deg) translateY(-4px)}
.paper-proof>svg{
position:absolute;
inset:0;
width:100%;
height:100%;
overflow:visible}
.proof-front{
position:absolute;
left:12%;
right:15%;
top:25%;
text-align:center;
transform:rotate(-7deg)}
.proof-front strong{
display:block;
font:900 76px/.85 var(--display);
letter-spacing:-.035em;
color:var(--red)}
.proof-front span{
display:block;
font:700 11px/1.45 var(--sans);
margin-top:8px}
.proof-front .proof-go{
position:absolute;
right:2%;
top:0;
font:11px var(--mono);
margin:0;
color:var(--red)}
.proof-date{
position:absolute;
right:1px;
top:470px;
width:205px;
margin:0;
font:9px/1.7 var(--mono);
color:var(--muted);
text-align:center}
.hero-actions{
position:relative;
z-index:4;
display:flex;
justify-content:center;
align-items:center;
gap:12px;
margin-top:21px}
.hero-actions a{
display:inline-flex;
align-items:center;
justify-content:center;
gap:16px;
min-height:46px;
border:1px solid var(--ink);
border-radius:999px;
padding:11px 22px;
font:12px/1.7 var(--sans)}
.hero-actions .button{
background:var(--ink);
color:white}
.hero-actions .button:hover{
background:var(--red);
border-color:var(--red)}
.hero-actions .secondary{
background:#ffffffad;
border-color:#d7ded1}
.hero-actions .secondary:hover{
border-color:var(--red);
color:var(--red);
background:white}
.hero-actions .arrow{
width:18px;
height:18px}
.stage-footer{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
margin-top:16px;
font:10px/1.8 var(--mono);
color:var(--muted)}
.stage-footer a{
display:inline-flex;
align-items:center;
gap:10px;
min-height:44px}
.stage-footer .arrow{
width:15px;
height:15px;
transform:rotate(90deg)}

    @media(min-width:1600px){
.hero-stage{
padding-top:43px;
padding-bottom:25px}
.hero-photo{
left:30px;
top:208px;
width:180px}
.paper-proof{
right:4px;
top:261px;
width:245px}
.proof-front strong{
font-size:86px}
.proof-front span{
font-size:12px}
.proof-date{
top:536px;
width:236px;
right:7px;
font-size:10px}
.hero-purpose{
font-size:23px}
}

    @media(max-width:1100px){
.masthead::before{
inset-inline:-32px}
.masthead{
gap:24px}
.primary-nav a{
padding-inline:16px}
.hero-stage{
padding:31px 24px 20px}
.name{
font-size:21vw}
.hero-photo{
left:18px;
top:151px;
width:126px;
padding:6px;
border-radius:16px}
.hero-photo figcaption{
font-size:8px}
.photo-window{
border-radius:10px}
.paper-proof{
right:-12px;
top:198px;
width:198px}
.proof-front strong{
font-size:67px}
.proof-front span{
font-size:10px;
margin-top:7px}
.proof-date{
top:410px;
width:183px;
font-size:8px}
.hero-purpose{
font-size:20px;
max-width:510px}
.stage-footer{
font-size:9px}
}

    @media(max-width:900px){
.masthead::before{
inset-inline:-22px}
.masthead{
gap:18px}
.wordmark{
font-size:11px;
gap:8px}
.wordmark .hex{
width:22px;
height:26px}
.primary-nav a{
font-size:11px;
padding-inline:14px}
.contact-nav{
font-size:11px;
padding-inline:15px}
.hero.wrap{
width:calc(100% - 32px)}
.hero-stage{
padding:28px 20px 18px;
border-radius:27px}
.hero-overline{
font-size:10px}
.name{
font-size:20.5vw}
.hero-purpose{
font-size:19px;
max-width:470px}
.hero-photo{
left:20px;
top:144px;
width:105px;
padding:5px;
border-radius:14px}
.hero-photo figcaption{
font-size:7px;
padding:8px 2px 2px}
.paper-proof{
right:-12px;
top:164px;
width:166px}
.proof-front strong{
font-size:57px}
.proof-front span{
font-size:9px;
line-height:1.5;
margin-top:6px}
.proof-front .proof-go{
font-size:9px}
.proof-date{
top:344px;
width:155px;
font-size:7px}
.stage-footer span{
max-width:240px;
text-align:right}
}

    @media(max-width:700px){
html{
scroll-padding-top:126px}
.masthead{
top:9px;
height:auto;
min-height:99px;
grid-template-columns:1fr auto;
gap:9px 18px;
padding:0 0 7px}
.masthead::before{
inset:-9px -16px -8px}
.wordmark{
font-size:11px;
gap:8px}
.contact-nav{
font-size:11px;
min-height:44px;
padding:9px 15px;
gap:10px}
.primary-nav{
grid-column:1/-1;
grid-row:2;
width:100%;
padding:3px;
justify-content:space-between}
.primary-nav a{
min-height:44px;
padding:9px 13px;
font-size:12px;
flex:1}
.primary-nav a[aria-current=location]::before{
margin-right:5px;
width:4px;
height:5px}
.hero.wrap{
width:calc(100% - 24px);
margin-top:24px;
margin-bottom:40px}
.hero-stage{
padding:28px 14px 27px;
border-radius:22px;
background:radial-gradient(ellipse at 95% 10%,#dee8d8a6,transparent 42%),radial-gradient(ellipse at 0% 80%,#eedddd40,transparent 45%),#fff}
.hero-stage::before{
inset:14% 6% 22%;
filter:blur(16px)}
.stage-wires{
display:none}
.hero-overline{
font-size:10px;
gap:8px;
line-height:1.8}
.name{
font-size:29vw;
line-height:.79;
letter-spacing:-.032em;
margin-top:23px}
.name .surname{
-webkit-text-stroke:1px var(--ink)}
.hero-purpose{
font-size:19px;
line-height:1.4;
max-width:490px;
margin-top:20px;
letter-spacing:-.035em}
.hero-media{
display:grid;
grid-template-columns:.9fr 1.1fr;
gap:0 16px;
align-items:center;
position:relative;
max-width:440px;
margin:26px auto 0}
.hero-photo{
position:static;
grid-column:1;
grid-row:1/3;
width:100%;
max-width:152px;
justify-self:center;
padding:6px;
transform:rotate(-5deg);
box-shadow:0 9px 22px #243a1b12}
.photo-window{
aspect-ratio:.94;
border-radius:10px}
.hero-photo figcaption{
font-size:8px;
line-height:1.6;
padding:9px 2px 3px}
.paper-proof{
position:relative;
grid-column:2;
grid-row:1;
top:auto;
right:auto;
width:100%;
max-width:210px;
justify-self:center;
transform:rotate(7deg)}
.proof-front strong{
font-size:clamp(53px,17vw,74px)}
.proof-front span{
font-size:clamp(9px,2.65vw,11px);
line-height:1.4;
margin-top:7px}
.proof-front .proof-go{
font-size:10px}
.proof-date{
position:static;
grid-column:2;
grid-row:2;
width:auto;
font-size:8px;
line-height:1.65;
margin-top:3px}
.hero-actions{
margin-top:26px;
gap:10px;
flex-wrap:wrap}
.hero-actions a{
font-size:12px;
padding:11px 16px;
gap:10px}
.hero-actions .arrow{
width:17px;
height:17px}
.stage-footer{
display:none}
}

    @media(max-width:370px){
.hero-overline{
font-size:9px}
.hero-stage{
padding-inline:13px}
.primary-nav a{
font-size:11px;
padding-inline:8px}
.hero-purpose{
font-size:18px}
.hero-media{
gap:0 12px;
margin-top:23px}
.hero-photo figcaption{
font-size:7px}
.proof-front strong{
font-size:48px}
.proof-front span{
font-size:8.5px;
margin-top:6px}
.proof-date{
font-size:7px}
.hero-actions{
flex-direction:column;
align-items:stretch;
gap:10px;
margin-top:24px}
.hero-actions a{
font-size:12px;
width:100%}
}

@media(max-width:1100px){
.wrap{
width:calc(100% - 64px)}
.about-grid{
gap:50px}
.project{
grid-template-columns:30px minmax(0,1fr) 300px;
gap:24px}
.guide-list a{
grid-template-columns:80px minmax(0,1fr) 250px 20px;
gap:20px}
.guide-list strong{
font-size:19px}
.guide-list p{
font-size:12px}
.contact-bottom p{
max-width:300px}
}

    @media(max-width:900px){
.wrap{
width:calc(100% - 44px)}
.about-grid{
gap:34px}
.about h2{
font-size:57px}
.about-intro{
font-size:15px}
.capabilities p{
font-size:13px}
.section-heading>p{
max-width:220px}
.project{
grid-template-columns:25px minmax(0,1fr) 250px;
gap:20px}
.project h3{
font-size:7.3vw}
.project-copy p{
font-size:13px}
.guide-list a{
grid-template-columns:70px minmax(0,1fr) 185px 20px;
gap:16px}
.guide-list strong{
font-size:17px}
.guide-list p{
font-size:12px}
.guide-bottom{
align-items:start}
.writing-links{
gap:15px;
justify-content:end}
.contact-bottom p{
max-width:260px;
font-size:13px}
}

    @media(max-width:700px){
.wrap{
width:calc(100% - 32px)}
.eyebrow{
font-size:11px;
gap:10px}
.about{
padding:33px 0 47px}
.about-grid{
display:block;
margin-top:27px}
.about h2{
font-size:17vw;
line-height:.96;
margin-bottom:24px}
.about-intro{
font-size:15px;
line-height:1.9;
max-width:450px}
.about-note{
font-size:11px;
line-height:1.8;
margin-top:22px}
.capabilities{
margin-top:30px}
.capabilities li{
padding:17px 0}
.capabilities strong{
font-size:16px}
.capabilities p{
font-size:13px;
max-width:390px}
.community-details{
margin-top:24px}
.community-details summary{
font-size:13px;
padding:16px 0;
gap:12px;
min-height:58px}
.community-details summary span{
display:none}
.community-body p{
font-size:13px;
line-height:1.9}
.community-links{
gap:17px}
.community-links .text-link{
font-size:11px}
.community-body .snapshot{
font-size:10px}
.work{
padding:32px 0 43px;
border-top-width:3px}
.section-heading{
display:block;
margin:24px 0 28px}
.section-heading h2{
font-size:22vw;
line-height:.91}
.section-heading>p{
max-width:300px;
margin:22px 0 0;
font-size:11px;
line-height:1.9}
.project{
grid-template-columns:24px minmax(0,1fr);
gap:16px 13px;
padding:26px 0 28px}
.project-num{
font-size:11px;
padding-top:4px}
.project h3{
font-size:15vw;
line-height:.96}
.project:nth-of-type(2) h3{
padding-left:0}
.project-copy{
grid-column:2}
.project-role{
font-size:11px;
margin-bottom:9px}
.project-copy p{
font-size:13px;
line-height:1.9;
margin-bottom:12px;
max-width:380px}
.project-copy .text-link{
font-size:11px}
.work-bottom{
display:block;
font-size:11px;
padding-top:17px}
.work-bottom .text-link{
font-size:11px;
display:flex;
width:max-content;
max-width:100%;
margin-top:6px}
.guides{
padding:32px 0 43px}
.guide-heading h2{
font-size:14.5vw;
line-height:.94}
.guide-intro{
font-size:14px;
line-height:1.9;
margin-bottom:24px}
.guide-list a{
grid-template-columns:minmax(0,1fr) 21px;
gap:7px 17px;
padding:20px 0;
min-height:111px}
.guide-category{
grid-column:1;
font-size:10px}
.guide-list strong{
grid-column:1;
font-size:17px;
line-height:1.5}
.guide-list p{
grid-column:1;
font-size:12px;
line-height:1.8;
max-width:335px}
.guide-list .arrow{
grid-column:2;
grid-row:1/4;
width:19px;
height:19px}
.guide-bottom{
display:block;
margin-top:25px}
.guide-bottom .button{
font-size:11px}
.writing-links{
justify-content:start;
margin-top:18px;
gap:25px;
font-size:11px}
.guide-mark{
width:72px;
height:83px;
left:-22px;
top:52px}
.contact{
padding:32px 0 44px;
border-top-width:3px}
.contact h2{
font-size:22vw;
line-height:.88;
margin-top:30px}
.contact h2 .outline{
padding-left:0;
-webkit-text-stroke:1px var(--ink)}
.contact-bottom{
display:block;
margin-top:26px}
.email{
font-size:16px;
gap:20px}
.email .arrow{
width:19px;
height:19px}
.contact-bottom p{
max-width:350px;
font-size:13px;
margin:24px 0 0}
.footer{
padding-top:20px}
.footer-top{
display:block;
font-size:10px}
.footer-top nav{
gap:23px;
margin-top:10px;
font-size:11px}
.footer-bottom{
display:block;
font-size:10px;
margin-top:12px}
.footer-bottom nav{
gap:25px;
margin-top:8px}
}

    @media(max-width:370px){
.section-heading h2{
font-size:21vw}
.guide-heading h2{
font-size:14.5vw}
}
@media(prefers-reduced-motion:reduce){
html{
scroll-behavior:auto}
*,*::before,*::after{
transition:none!important;
animation:none!important}
.paper-proof:hover,.paper-proof:focus-within{
transform:rotate(7deg)}
}
@media print{
.masthead{
position:static}
.primary-nav,.contact-nav,.hero-actions{
display:none}
.hero-stage{
box-shadow:none;
border-radius:0}
.name{
font-size:220px}
.hero-photo{
width:110px;
left:0}
.paper-proof{
width:166px;
right:0}
.stage-wires{
display:none}
.sheet{
overflow:visible}
}


/* Existing routes remain available while the rest of the site is redesigned. */
.site-index {
  display: flex;
  align-items: baseline;
  gap: 20px 30px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
  font: 11px/1.8 var(--mono);
}
.site-index > span { color: var(--muted); }
.site-index nav { display: flex; gap: 6px 25px; flex-wrap: wrap; }
.site-index a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 700px) {
  .site-index { display: block; font-size: 10px; padding-bottom: 14px; }
  .site-index nav { margin-top: 6px; gap: 2px 20px; font-size: 11px; }
}
@media print {
  .site-index { break-inside: avoid; }
}

/* Keep the active hex marker from changing the capsule width while scrolling. */
.primary-nav a { position: relative; }
.primary-nav a[aria-current=location]::before {
  position: absolute;
  left: 8px;
  top: 50%;
  margin-right: 0;
  transform: translateY(-50%);
}
@media (max-width: 700px) {
  .primary-nav a[aria-current=location]::before { left: 6px; }
}