@font-face{font-family:'Newsreader Display';src:url('fonts/NewsreaderDisplay-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
:root{--paper:#eaeae5;--ink:#292b27;--rule:rgba(41,43,39,.18);--muted:rgba(41,43,39,.72)}
body{font-family:'Space Grotesk',Arial,Helvetica,sans-serif}
h1,h2:not(.micro),h3,.opening-statement,.studio-intro,.hero-intro{font-family:'Newsreader Display',Georgia,serif}
.masthead .wordmark{font-family:'Space Grotesk',Arial,Helvetica,sans-serif;letter-spacing:-.035em}
.masthead .wordmark{font-size:clamp(16px,4.1vw,30px)}
.masthead .masthead-description{font-family:'Space Grotesk',Arial,Helvetica,sans-serif;font-size:clamp(10px,2.6vw,19px);letter-spacing:-.04em;text-align:left;line-height:1.05}
.opening-composition h1,.opening-statement,.hero-followup .discipline-lead,.hero-followup .discipline-resolution{font-family:'Newsreader Display',Georgia,serif;letter-spacing:-.035em;font-weight:400}
.build-assurance h2,.architecture-statement,.hero-journey #hero-title,.hero-journey.is-static .hero-home>.hero-static-title{font-family:'Newsreader Display',Georgia,serif}
.opening-composition h1{font-size:clamp(40px,10vw,90px);line-height:.94}
.opening-statement{font-size:clamp(24px,6.6vw,58px);line-height:1;max-width:80%;margin-left:auto;text-align:left;padding-top:clamp(17px,3.8vw,34px)}
.opening-composition{margin-bottom:0}
.hero-followup .discipline-lead{font-size:clamp(42px,9.4vw,85px);line-height:.99}
.hero-followup .discipline-resolution{font-size:clamp(25px,5.9vw,53px);line-height:1.05;margin-top:clamp(14px,3.5vw,32px)}
.hero-followup-reordered .discipline-handoff{margin-top:clamp(64px,14vw,128px);margin-bottom:clamp(42px,10vw,90px)}
.workshop-example{container-type:inline-size;width:83%;max-width:780px;margin-left:auto;background:#f0ebde;color:#1b211d;padding:2.6%;font-family:'Recia',Georgia,serif}
.workshop-example-header{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #b8baad;padding-bottom:12px}
.workshop-example-header img{width:65%;height:auto}
.workshop-example-header a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:12px 14px;background:#1b211d;color:#f0ebde;font:400 clamp(10px,3cqw,18px)/1 'Workshop Mono',monospace}
.workshop-example h2{font-size:clamp(28px,10.7cqw,72px);font-weight:400;line-height:1.05;letter-spacing:-.04em;padding:6cqw 0 8cqw;border-bottom:1px solid #b8baad}
.workshop-example h2,.workshop-example h3{font-family:'Recia',Georgia,serif}
.workshop-example em{font-weight:400}
.workshop-example-film{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;margin-top:6cqw;background:#f0ebde}
.workshop-example-story{display:grid;grid-template-columns:40% 1fr;gap:5cqw;margin-top:12cqw;padding-bottom:4cqw;border-bottom:1px solid #b8baad}
.workshop-example-story>img{width:100%;height:100%;min-height:0;object-fit:cover}
.workshop-example-kicker{font:400 clamp(9px,2.6cqw,16px)/1.3 'Workshop Mono',monospace;text-transform:uppercase}
.workshop-example h3{font-size:clamp(20px,6.4cqw,43px);line-height:1.03;font-weight:400;letter-spacing:-.035em;margin:3cqw 0}
.workshop-example-story div>p:last-child{font-size:clamp(12px,3.8cqw,25px);line-height:1.22}
.workshop-recognition{margin-top:40px;padding-bottom:clamp(64px,12vw,120px)}
@media(min-width:1000px){.opening-film{aspect-ratio:16/9}.hero-followup .discipline-lead{max-width:850px}}
@media(max-width:600px){
  .masthead{height:64px}
  .opening-composition{display:flex;flex-direction:column;height:calc(100vh - 64px);height:calc(100svh - 64px);margin-top:0}
  .opening-composition h1{flex:none;padding-top:clamp(24px,7svh,52px)}
  .opening-film{flex:1 1 auto;min-height:0;aspect-ratio:auto;margin-top:clamp(16px,3svh,24px)}
  .opening-statement{flex:none;width:100%;max-width:none;margin-left:0;padding:clamp(13px,2.5svh,20px) 4.7cqw clamp(14px,2.5svh,20px);font-size:clamp(27px,8vw,34px);line-height:1.02;text-align:right}
  .hero-followup{padding-top:96px}
  .hero-followup-reordered .discipline-handoff{margin-top:0}
}

/* The permanent site frame stays readable while the work moves beneath it. */
.masthead.page-width{
  position:sticky;
  z-index:20;
  top:0;
  width:100vw!important;
  max-width:none;
  min-height:0;
  margin:0;
  padding:12px max(28px,calc((100vw - 1480px)/2 + 56px));
  border:0;
  align-items:flex-start;
  background:rgba(234,234,229,.78);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
main{padding-top:0}
@media(max-width:600px){
  .masthead.page-width{height:auto;padding:12px 20px}
  main{padding-top:0}
}