:root{--red:#ef4128;
  --paper:#f2f0eb;
  --ink:#252421;
  --muted:#6c6861;
  --line:#ef412840;
  --pad:5.3vw;
  --max:1600px;
  --mono:'Courier New',Courier,monospace}

*{box-sizing:border-box}
html{scroll-behavior:smooth;
  scroll-padding-top:28px}
body{margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
::selection{background:var(--red);
  color:var(--paper)}
a{color:inherit;
  text-decoration:none}
button{font:inherit;
  color:inherit;
  cursor:pointer}
img{display:block;
  width:100%;
  height:auto}
figure,p,h1,h2,h3,h4{margin:0}
h1,h2,h3,h4{font-weight:500}
button,a,summary{-webkit-tap-highlight-color:transparent;
  touch-action:manipulation}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--ink);
  outline-offset:6px}
[hidden]{display:none!important}
.page-width{width:min(100%,var(--max));
  margin:auto}
.inset{padding-inline:var(--pad)}
.meta{font:11px/1.6 var(--mono);
  letter-spacing:.02em;
  text-transform:uppercase}
.red{color:var(--red)}
.skip{position:fixed;
  top:12px;
  left:12px;
  z-index:100;
  background:var(--red);
  color:var(--paper);
  padding:12px 20px;
  transform:translateY(-150%)}
.skip:focus{transform:none}
.site-header{position:relative;
  z-index:10;
  min-height:96px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  color:var(--red)}
.wordmark{font-size:28px;
  font-weight:750;
  letter-spacing:-1.5px;
  white-space:nowrap}
.nav{display:flex;
  align-items:center;
  gap:34px;
  font-size:13px}
.nav a{padding:9px 0}
.nav a:hover{text-decoration:underline;
  text-underline-offset:5px}
.nav .arrow{padding-left:14px;
  font-size:20px}
.hero{position:relative;
  min-height:650px;
  height:clamp(650px,calc(100svh - 96px),920px);
  isolation:isolate;
  overflow:hidden}
.hero-portrait{position:absolute;
  z-index:0;
  right:-7%;
  bottom:0;
  height:100%;
  width:auto;
  max-width:none;
  mix-blend-mode:multiply;
  pointer-events:none}
.hero-top{position:absolute;
  z-index:4;
  top:27px;
  left:var(--pad);
  right:var(--pad);
  display:flex;
  justify-content:space-between;
  gap:30px}
.hero-top p:last-child{text-align:right}
.hero-title{position:absolute;
  z-index:3;
  left:4.45%;
  top:125px;
  font-size:clamp(145px,18.5vw,296px);
  line-height:.79;
  letter-spacing:-.085em;
  font-weight:760;
  color:var(--red);
  pointer-events:none}
.hero-title .play{display:block;
  margin-left:12.3vw;
  margin-top:.13em;
  white-space:nowrap}
.hero-title .mind{display:block}
.hero-copy{position:absolute;
  left:var(--pad);
  bottom:84px;
  z-index:4;
  max-width:310px}
.hero-copy p{font-size:17px;
  line-height:1.55;
  letter-spacing:-.3px;
  max-width:290px}
.arrow-link{display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  border-bottom:1px solid var(--red);
  padding:12px 0;
  color:var(--red);
  font-size:12px;
  min-width:205px}
.arrow-link span{font-size:23px;
  line-height:1}
.arrow-link:hover span{transform:translate(3px,2px)}
.hero-copy .arrow-link{margin-top:13px}
.hero-foot{position:absolute;
  left:var(--pad);
  right:var(--pad);
  bottom:24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  z-index:4;
  font:10px/1.5 var(--mono);
  text-transform:uppercase}
.hero-scroll{width:44px;
  height:44px;
  background:var(--red);
  color:var(--paper);
  display:grid;
  place-items:center;
  font-size:25px}
.intro{padding-top:115px;
  padding-bottom:105px}
.intro .meta{margin-bottom:30px}
.statement{color:var(--red);
  font-size:clamp(72px,11.2vw,180px);
  line-height:.86;
  letter-spacing:-.075em;
  max-width:1300px}
.statement span{display:block}
.intro-copy{font-size:clamp(22px,2.5vw,35px);
  line-height:1.35;
  letter-spacing:-.8px;
  max-width:850px;
  margin-top:45px;
  margin-left:12.7%}
.intro .under{font-size:13px;
  line-height:1.8;
  max-width:570px;
  margin:24px 0 0 12.7%}
.work-intro{border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:35px;
  padding-block:25px 34px}
.work-intro p:last-child{max-width:390px;
  font-size:12px;
  line-height:1.75}
.work-nav{display:flex;
  gap:25px;
  flex-wrap:wrap;
  font-size:11px;
  margin-bottom:28px}
.work-nav a{border-bottom:1px solid var(--line);
  padding-bottom:7px}
.work-nav a:hover{border-color:var(--red)}

.chapter{padding-bottom:100px}
.chapter-poster{position:relative;
  isolation:isolate;
  overflow:hidden}
.chapter-image{mix-blend-mode:multiply}
.chapter-image img{width:100%;
  height:auto}
.chapter-meta{display:flex;
  justify-content:space-between;
  gap:30px;
  padding-block:22px;
  color:var(--red)}
.chapter-title{color:var(--red);
  font-size:clamp(75px,11vw,176px);
  line-height:.85;
  letter-spacing:-.075em}
.chapter-subtitle{font-size:clamp(27px,3.5vw,49px);
  line-height:1.1;
  letter-spacing:-1.5px}
.chapter-copy{max-width:750px;
  margin-top:30px}
.chapter-copy p{font-size:16px;
  line-height:1.75;
  max-width:660px}
.chapter-copy .arrow-link{margin-top:15px}
.image-note{font:9px/1.6 var(--mono);
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--muted);
  margin-top:12px}
.balloon-poster .chapter-title{position:absolute;
  right:var(--pad);
  top:5%;
  z-index:2;
  font-size:clamp(65px,9.7vw,155px);
  width:39%;
  pointer-events:none}
.balloon-poster .chapter-title span{display:block}
.balloon-poster .poster-caption{position:absolute;
  right:var(--pad);
  top:42%;
  font:10px/1.7 var(--mono);
  width:28%;
  z-index:2;
  color:var(--red);
  text-transform:uppercase}
.balloon-poster .chapter-image{margin-top:5px}
.balloon .chapter-copy{margin-left:18%;
  }
.collection-heading{padding-top:65px;
  padding-bottom:22px;
  border-top:1px solid var(--line)}
.collection-heading .meta{margin-bottom:25px}
.collection-heading>p:last-child{margin-top:20px;
  font-size:15px;
  line-height:1.8;
  max-width:650px}
.object-stage{position:relative;
  width:100%;
  max-width:100%;
  min-height:560px;
  aspect-ratio:2.25;
  overflow:hidden;
  isolation:isolate}
.object-stage .object-title{position:absolute;
  top:8%;
  left:var(--pad);
  color:var(--red);
  font-size:clamp(130px,22vw,350px);
  line-height:.85;
  letter-spacing:-.08em;
  z-index:0}
.object-stage .object-products{position:absolute;
  z-index:1;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  height:91%;
  width:76%;
  object-fit:contain;
  filter:saturate(.93)}
.object-stage.safari .object-title{right:var(--pad);
  left:auto;
  top:5%;
  font-size:clamp(130px,21vw,335px)}
.object-stage.safari .object-products{width:85%;
  height:92%;
  bottom:-3%}
.object-copy{max-width:750px;
  margin-inline:auto;
  padding-top:23px}
.object-copy .meta{margin-bottom:17px}
.object-copy p{font-size:16px;
  line-height:1.8;
  max-width:680px}
.object-copy .arrow-link{margin-top:14px}
.object-chapter{padding-bottom:70px}
.glossy .chapter-title{padding-top:26px}
.glossy .chapter-title span{display:block}
.glossy .chapter-image{margin-top:30px}
.glossy .chapter-copy{margin-left:18%}
.nuremberg .chapter-title{margin:18px 0 38px}
.nuremberg .chapter-title span{display:block}
.nuremberg .chapter-copy{margin-left:18%}
.approach{padding-block:55px 105px;
  border-top:1px solid var(--line)}
.approach .meta{margin-bottom:30px}
.approach .statement{font-size:clamp(65px,9.5vw,150px)}
.about-copy{max-width:750px;
  margin:40px auto 0}
.about-copy p{font-size:18px;
  line-height:1.8}
.about-copy p+p{margin-top:21px}
.practice-list{list-style:none;
  margin:35px 0 0;
  padding:0}
.practice-list li{border-top:1px solid var(--line);
  padding:18px 0;
  font-size:16px;
  line-height:1.6}
.practice-list span{display:block;
  font-size:12px;
  margin-top:6px;
  color:var(--muted)}
.contact{padding-block:70px 50px;
  background:var(--red);
  color:var(--paper)}
.contact .meta{margin-bottom:30px}
.contact h2{font-size:clamp(65px,10vw,160px);
  line-height:.87;
  letter-spacing:-.075em}
.contact h2 span{display:block}
.contact p{font-size:15px;
  line-height:1.7;
  max-width:500px;
  margin-top:28px}
.email{display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:center;
  max-width:780px;
  font-size:22px;
  padding:20px 0;
  border-bottom:1px solid #f2f0eb90;
  margin-top:30px}
.email span:last-child{font-size:32px}
.contact .draft-note{font:10px/1.7 var(--mono);
  margin-top:14px}
.site-footer{background:var(--red);
  color:var(--paper);
  border-top:1px solid #f2f0eb55;
  display:flex;
  justify-content:space-between;
  gap:25px;
  align-items:center;
  padding-block:25px;
  font-size:10px}
.site-footer .wordmark{font-size:23px}

.case-page{padding-top:14px}
.back-link{display:inline-block;
  font-size:12px;
  color:var(--red);
  padding:12px 0}
.case-heading{padding-top:32px;
  padding-bottom:38px}
.case-heading .meta{margin-bottom:26px}
.case-heading h1{font-size:clamp(78px,12vw,192px);
  line-height:.85;
  letter-spacing:-.075em;
  color:var(--red);
  max-width:1320px}
.case-heading h1 span{display:block}
.case-deck{font-size:clamp(22px,2.7vw,36px);
  line-height:1.35;
  letter-spacing:-.75px;
  max-width:860px;
  margin-top:37px}
.case-tags{display:flex;
  gap:25px;
  flex-wrap:wrap;
  margin-top:28px;
  font:10px/1.7 var(--mono);
  text-transform:uppercase}
.case-visual{width:100%;
  margin:0 auto 55px}
.case-visual img{width:100%}
.case-visual.blend{mix-blend-mode:multiply}
.case-visual figcaption{padding-inline:var(--pad);
  font:9px/1.7 var(--mono);
  color:var(--muted);
  text-transform:uppercase;
  margin-top:13px;
  max-width:1100px}
.reading{width:min(100% - 2*var(--pad),740px);
  margin:0 auto;
  padding-bottom:60px}
.reading .meta{margin:0 0 22px;
  color:var(--red)}
.reading h2{font-size:clamp(34px,4.1vw,56px);
  line-height:1.05;
  letter-spacing:-2px;
  color:var(--red);
  margin-bottom:25px}
.reading h3{font-size:24px;
  line-height:1.2;
  letter-spacing:-.6px;
  margin-bottom:17px}
.reading p{font-size:17px;
  line-height:1.85;
  max-width:730px}
.reading p+p{margin-top:20px}
.reading .lead{font-size:24px;
  line-height:1.5;
  letter-spacing:-.5px}
.reading .quiet{font-size:12px;
  line-height:1.8;
  color:var(--muted)}
.reading .credits{font:11px/1.9 var(--mono);
  margin-top:24px}
.pull-statement{padding:12px var(--pad) 60px;
  color:var(--red);
  font-size:clamp(56px,9vw,144px);
  line-height:.9;
  letter-spacing:-.065em;
  max-width:1500px}
.pull-statement span{display:block}
.case-object-stage{position:relative;
  min-height:450px;
  aspect-ratio:2.1;
  margin-bottom:35px}
.case-object-stage img{position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  height:100%;
  width:85%;
  object-fit:contain}
.case-rule{width:min(100% - 2*var(--pad),740px);
  margin:10px auto 50px;
  border:0;
  border-top:1px solid var(--line)}
.source-materials{width:min(100% - 2*var(--pad),1100px);
  margin:0 auto 65px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.source-materials summary{padding:20px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
  cursor:pointer;
  font-size:12px;
  list-style:none}
.source-materials summary::-webkit-details-marker{display:none}
.source-materials summary::after{content:'';
  flex:0 0 18px;
  width:18px;
  height:18px;
  background:
    linear-gradient(currentColor, currentColor) center/16px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center/1.5px 16px no-repeat;
  transition:transform .4s ease, background-size .4s ease}
.source-materials[open] summary::after{transform:rotate(180deg);
  background-size:16px 1.5px, 1.5px 0px}
.source-materials figure{margin-bottom:30px}
.source-materials figcaption{font:10px/1.8 var(--mono);
  color:var(--muted);
  margin:12px 0 20px}
.source-materials p{font-size:12px;
  line-height:1.8;
  margin:0 0 25px}
.source-materials img{max-height:850px;
  object-fit:contain;
  object-position:left center}
.case-next{padding:45px var(--pad) 60px;
  border-top:1px solid var(--line);
  color:var(--red)}
.case-next .meta{margin-bottom:18px}
.case-next a{font-size:clamp(38px,6vw,90px);
  line-height:1.08;
  letter-spacing:-.05em}
.case-next a:hover{text-decoration:underline;
  text-underline-offset:8px}
.case-contact{margin-top:35px;
  font-size:12px}

.hero-portrait{mask-image:linear-gradient(to right,transparent 0%,#000 18%,#000 100%),linear-gradient(to bottom,transparent 0%,#000 9%,#000 100%);
  mask-composite:intersect;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 18%,#000 100%),linear-gradient(to bottom,transparent 0%,#000 9%,#000 100%);
  -webkit-mask-composite:source-in}

.hero-title .play{margin-left:1.5vw;
  margin-top:.25em}

@media(min-width:1700px){:root{--pad:85px}
.hero-title .play{margin-left:24px}
}

@media(max-width:1100px) and (min-width:721px){.hero-portrait{right:-21%;
  height:98%}
.hero-title{top:150px}
.hero-copy{bottom:85px;
  max-width:250px}
.hero-copy p{font-size:16px}
.object-stage{min-height:460px}
.balloon-poster .poster-caption{top:40%}
}

@media(max-width:720px){:root{--pad:6vw}
.site-header{min-height:79px;
  gap:20px}
.wordmark{font-size:23px;
  letter-spacing:-1.3px}
.nav{font-size:11px;
  gap:20px}
.nav .secondary{display:none}
.nav .arrow{padding-left:6px;
  font-size:17px}
.hero{height:780px;
  min-height:0}
.hero-top{top:16px;
  font-size:8px}
.hero-top p:last-child{max-width:105px}
.hero-title{left:5%;
  top:115px;
  font-size:26.5vw;
  line-height:.8;
  letter-spacing:-.08em}
.hero-title .play{margin-left:6vw;
  margin-top:.15em;
  font-size:24vw}
.hero-portrait{height:61%;
  right:-45%;
  bottom:41px}
.hero-copy{top:calc(115px + 47vw + 28px);
  bottom:auto;
  max-width:190px}
.hero-copy p{font-size:13px;
  line-height:1.7;
  max-width:170px}
.hero-copy .arrow-link{font-size:11px;
  min-width:145px;
  gap:18px;
  margin-top:11px;
  padding-block:9px 11px}
.hero-copy .arrow-link span{font-size:21px}
.hero-foot{bottom:18px;
  font-size:8px;
  max-width:none;
  gap:18px;
  align-items:end}
.hero-foot p{max-width:230px}
.hero-scroll{width:37px;
  height:37px;
  font-size:23px}
.intro{padding-top:65px;
  padding-bottom:65px}
.intro .meta{font-size:9px;
  margin-bottom:27px}
.statement{font-size:15.9vw;
  line-height:.9;
  letter-spacing:-.075em}
.intro-copy{font-size:23px;
  line-height:1.4;
  letter-spacing:-.5px;
  margin:29px 0 0}
.intro .under{font-size:12px;
  line-height:1.9;
  margin:20px 0 0;
  max-width:350px}
.work-intro{padding-block:21px 25px;
  display:block}
.work-intro .meta{font-size:9px}
.work-intro p:last-child{margin-top:16px;
  font-size:12px;
  max-width:330px}
.work-nav{gap:15px;
  font-size:10px;
  margin-bottom:20px}
.chapter{padding-bottom:60px}
.chapter-meta{padding-block:16px;
  font-size:8px;
  gap:20px}
.chapter-meta>span:last-child{text-align:right;
  max-width:160px}
.balloon-poster .chapter-image img{aspect-ratio:.93;
  object-fit:cover;
  object-position:45% center}
.balloon-poster .chapter-title{font-size:15vw;
  top:5%;
  right:5%;
  width:50%;
  line-height:.87;
  text-align:right}
.balloon-poster .poster-caption{display:none}
.balloon .chapter-copy,.glossy .chapter-copy,.nuremberg .chapter-copy{margin-left:0}
.chapter-copy{margin-top:23px}
.chapter-copy p{font-size:14px;
  line-height:1.85}
.chapter-subtitle{font-size:31px;
  letter-spacing:-1px}
.chapter-copy .arrow-link{font-size:11px;
  min-width:190px;
  margin-top:12px}
.image-note{font-size:8px;
  line-height:1.8;
  margin-top:10px}
.collection-heading{padding-top:35px;
  padding-bottom:15px}
.collection-heading .meta{font-size:9px;
  margin-bottom:25px}
.collection-heading .chapter-subtitle{font-size:34px}
.collection-heading>p:last-child{font-size:13px;
  margin-top:17px}
.object-stage{min-height:300px;
  aspect-ratio:1.2}
.object-stage .object-title{font-size:40vw;
  top:5%}
.object-stage .object-products{height:78%;
  width:98%;
  bottom:0}
.object-stage.safari .object-title{font-size:34vw;
  top:6%}
.object-stage.safari .object-products{width:100%;
  height:76%;
  bottom:0}
.object-copy{padding-top:20px}
.object-copy .meta{font-size:9px;
  margin-bottom:14px}
.object-copy p{font-size:14px;
  line-height:1.85}
.object-chapter{padding-bottom:40px}
.glossy .chapter-title{font-size:18vw;
  padding-top:20px}
.glossy .chapter-image{margin-top:20px}
.glossy .chapter-image img{aspect-ratio:1.1;
  object-fit:cover;
  object-position:50% center}
.nuremberg .chapter-title{font-size:17vw;
  margin:17px 0 26px}
.nuremberg .chapter-image img{aspect-ratio:1.15;
  object-fit:cover;
  object-position:54% center}
.approach{padding-block:33px 55px}
.approach .meta{font-size:9px;
  margin-bottom:26px}
.approach .statement{font-size:14.8vw}
.about-copy{margin-top:28px}
.about-copy p{font-size:15px;
  line-height:1.85}
.practice-list{margin-top:26px}
.practice-list li{font-size:17px;
  padding-block:17px}
.practice-list span{font-size:12px;
  line-height:1.8}
.contact{padding-block:42px 35px}
.contact .meta{font-size:9px;
  margin-bottom:30px}
.contact h2{font-size:18vw}
.contact p{font-size:13px;
  margin-top:25px}
.email{font-size:17px;
  margin-top:23px;
  padding-block:16px}
.contact .draft-note{font-size:8px;
  line-height:1.8}
.site-footer{padding-block:24px;
  font-size:9px;
  gap:20px}
.site-footer .wordmark{font-size:21px}
.site-footer .middle{display:none}
.case-page{padding-top:0}
.back-link{font-size:11px}
.case-heading{padding-top:26px;
  padding-bottom:30px}
.case-heading .meta{font-size:9px;
  margin-bottom:25px}
.case-heading h1{font-size:17vw;
  letter-spacing:-.065em}
.case-deck{font-size:23px;
  line-height:1.4;
  letter-spacing:-.5px;
  margin-top:27px}
.case-tags{gap:10px 20px;
  font-size:8px;
  margin-top:22px}
.case-visual{margin-bottom:36px}
.case-visual figcaption{font-size:8px;
  line-height:1.8;
  margin-top:10px}
.reading{padding-bottom:38px}
.reading .meta{font-size:9px;
  margin-bottom:20px}
.reading h2{font-size:36px;
  letter-spacing:-1.5px;
  margin-bottom:22px}
.reading h3{font-size:23px}
.reading p{font-size:14px;
  line-height:1.9}
.reading p+p{margin-top:18px}
.reading .lead{font-size:21px;
  line-height:1.55}
.reading .quiet{font-size:11px;
  line-height:1.9}
.reading .credits{font-size:9px;
  line-height:1.9}
.pull-statement{padding-bottom:38px;
  font-size:14vw;
  letter-spacing:-.065em}
.case-object-stage{min-height:280px;
  aspect-ratio:1.3;
  margin-bottom:28px}
.case-object-stage img{width:98%;
  height:95%}
.case-rule{margin:0 auto 35px}
.source-materials{margin-bottom:45px}
.source-materials summary{font-size:11px;
  padding-block:18px}
.source-materials figcaption{font-size:8px;
  line-height:1.9}
.case-next{padding-block:32px 45px}
.case-next .meta{font-size:9px}
.case-next a{font-size:42px}
.case-contact{margin-top:25px;
  font-size:11px}
}

@media(max-width:720px){.hero-title .play{margin-left:6vw;
  margin-top:.15em}
.balloon-poster .chapter-image img{aspect-ratio:auto;
  object-fit:contain}
.balloon-poster .chapter-title{font-size:11.5vw;
  top:5%;
  width:41%}
}

@media(max-width:360px){.nav{gap:15px}
.wordmark{font-size:21px}
.hero-copy{max-width:170px}
}

@media(max-width:720px){.hero{height:870px}
.hero-portrait{height:52%;
  right:calc(38vw - 365px);
  bottom:41px}
.hero-copy .arrow-link{min-width:120px;
  max-width:120px;
  gap:8px}
}

/* Reserve room below the large heading for the introduction and work link. */
@media(min-width:721px){.hero{min-height:clamp(800px,65vw,1040px)}
}
@media(min-width:1101px){.hero-portrait{right:-19%}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
}