@font-face{
  font-family:Anton;
  src:url('/assets/anton-v1.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap
}
:root{
  --red:#ed2119;
  --ink:#171715;
  --paper:#f3f1e9;
  --mono:ui-monospace,'SFMono-Regular',Consolas,'Liberation Mono',monospace;
  --sans:Arial,Helvetica,sans-serif;
  --display:Anton,Impact,'Arial Narrow',sans-serif;
  color-scheme:light
}
*,*::before,*::after{
  box-sizing:border-box
}
html{
  -webkit-text-size-adjust:100%;
  scroll-padding-top:20px
}
body{
  margin:0;
  background:var(--ink);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased
}
button,a{
  -webkit-tap-highlight-color:transparent
}
a{
  color:inherit;
  text-decoration:none
}
button{
  font:inherit;
  color:inherit;
  cursor:pointer
}
button,a,summary{
  touch-action:manipulation
}
button{
  border:0
}
button:focus-visible,a:focus-visible,summary:focus-visible{
  outline:2px solid currentColor;
  outline-offset:6px
}
button:disabled{
  cursor:default
}
img{
  max-width:100%;
  display:block
}
p,h1,h2,h3{
  margin:0
}
::selection{
  color:var(--paper);
  background:var(--ink)
}
.skip{
  position:fixed;
  left:24px;
  top:-100px;
  z-index:100;
  background:var(--paper);
  padding:16px
}
.skip:focus{
  top:24px
}
.micro{
  font:11px/1.5 var(--mono);
  text-transform:uppercase;
  letter-spacing:.035em
}
.site-shell{
  margin:8px;
  border-radius:28px;
  overflow:clip
}
.hero{
  position:relative;
  height:calc(100svh - 8px);
  min-height:720px;
  background:#121514;
  isolation:isolate;
  color:var(--paper)
}
.hero-media{
  position:absolute;
  inset:0 0 auto;
  height:80%;
  z-index:-1;
  overflow:hidden
}
.hero-media>img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:52% 50%
}
.chroma-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s
}
.hero-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,#121514 0%,rgba(18,21,20,.15) 35%,transparent 85%),linear-gradient(90deg,rgba(7,10,10,.58),rgba(7,10,10,.08) 62%,rgba(7,10,10,.28))
}
.hero-grain{
  position:absolute;
  inset:0;
  opacity:.15;
  background-image:radial-gradient(#c3c1b4 .65px,transparent .65px);
  background-size:4px 4px;
  mix-blend-mode:soft-light;
  pointer-events:none
}
.topbar{
  position:relative;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:28px 40px
}
.location{
  line-height:1.8
}
.location i{
  display:inline-block;
  width:5px;
  height:5px;
  background:var(--red);
  margin-right:7px
}
.location>span{
  margin-left:17px;
  opacity:.6
}
.brand{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  font-family:Georgia,'Times New Roman',serif;
  font-weight:700;
  font-size:40px;
  letter-spacing:-2.5px;
  line-height:1
}
.brand>span,.footer-brand>span{
  font-family:var(--sans);
  font-size:10px;
  letter-spacing:0;
  vertical-align:top;
  display:inline-block;
  margin:3px 0 0 4px
}
.topbar nav{
  display:flex;
  gap:32px;
  font:11px var(--mono);
  text-transform:uppercase
}
.topbar nav a{
  padding:12px 0
}
.topbar nav span{
  font-size:8px;
  vertical-align:super;
  opacity:.6
}
.hero-title{
  position:absolute;
  left:4.8%;
  bottom:105px;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(76px,7.7vw,140px);
  line-height:1.025;
  letter-spacing:-.028em;
  color:var(--red);
  width:78%;
  user-select:none
}
.title-line{
  display:block;
  white-space:pre;
  min-height:1.025em
}
.title-line.indent{
  margin-left:9%
}
.title-line.indent-small{
  margin-left:3%
}
.hero-note{
  position:absolute;
  left:62%;
  top:37%;
  width:29%;
  max-width:370px;
  display:flex;
  gap:16px;
  font-size:12px;
  line-height:1.65;
  text-shadow:0 1px 12px #000
}
.hero-note>span:last-child{
  align-self:flex-end
}
.hero-bottom{
  position:absolute;
  inset:auto 40px 35px;
  display:flex;
  align-items:center;
  gap:28px
}
.hero-bottom>.micro:first-child{
  opacity:.6
}
.motion-toggle{
  margin-left:auto;
  background:none;
  padding:14px 0;
  font-size:9px;
  color:#e2e1d9
}
.motion-toggle span::before{
  content:' / ';
  opacity:.5
}
.scroll-cue{
  width:62px;
  height:62px;
  border:1px solid #ffffff50;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:32px;
  font-weight:200;
  transition:background .2s,transform .2s
}
.scroll-cue:hover{
  background:var(--red);
  transform:translateY(3px)
}
.pixel-edge{
  position:absolute;
  bottom:-1px;
  left:0;
  width:100%;
  height:90px;
  z-index:8;
  pointer-events:none
}
.hero .pixel-edge{
  z-index:2
}
.hero-bottom{
  z-index:3
}
.project-section{
  position:relative;
  background:var(--red);
  height:auto
}
.project-stage{
  position:relative;
  padding:35px 32px 125px
}
.stage-top,.stage-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center
}
.stage-top h2{
  font:inherit
}
.stage-top{
  position:relative;
  z-index:10
}
.stage-bottom{
  position:absolute;
  bottom:30px;
  left:32px;
  right:32px
}
.project-index{
  display:flex;
  justify-content:center;
  gap:18px;
  padding:40px 0;
  font:12px var(--mono)
}
.project-index a{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:32px;
  opacity:.55;
  transition:opacity .2s
}
.project-index a:hover,.project-index a[aria-current=true]{
  opacity:1
}
.index-line{
  height:1px;
  background:currentColor;
  width:15px;
  transition:width .25s
}
.project-index a[aria-current=true] .index-line{
  width:30px
}
.project-index a>span:nth-child(2){
  font-size:10px
}
.card-deck{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px;
  max-width:1100px;
  margin:auto
}
.project-card{
  border-radius:22px;
  overflow:hidden;
  background:#f7f7f2;
  box-shadow:0 12px 45px #5f100c25;
  transform-origin:50% 65%;
  color:#152228;
  position:relative;
  min-width:0
}
.project-cover{
  display:flex;
  flex-direction:column;
  min-height:600px
}
.card-masthead{
  display:flex;
  justify-content:space-between;
  padding:19px 23px;
  font-size:15px;
  letter-spacing:-.04em;
  font-weight:700
}
.card-masthead>span:last-child{
  font:9px var(--mono);
  display:flex;
  gap:20px;
  align-items:center;
  letter-spacing:0
}
.card-arrow{
  font-size:17px
}
.card-intro{
  padding:30px 30px 28px;
  text-align:center
}
.card-intro .micro{
  font-size:8px;
  letter-spacing:.1em;
  margin-bottom:20px
}
.card-intro h3{
  font-size:clamp(32px,3.1vw,53px);
  letter-spacing:-.055em;
  font-weight:500;
  line-height:.99
}
.card-intro>p:last-child{
  font-size:11px;
  line-height:1.5;
  margin-top:14px;
  opacity:.7
}
.card-visual{
  flex:1;
  min-height:0;
  overflow:hidden;
  position:relative;
  margin:0 20px;
  border-radius:9px
}
.card-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 0;
  transition:transform .65s cubic-bezier(.2,.75,.2,1)
}
.project-cover:hover .card-visual img{
  transform:scale(1.025)
}
.card-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  font:8px var(--mono);
  text-transform:uppercase;
  padding:22px
}
.card-bottom span:last-child{
  font-weight:bold
}
.project-detail-button{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  background:transparent;
  padding:16px 23px;
  border-top:1px solid #202b301f;
  font:10px var(--mono)
}
.project-detail-button:hover{
  background:#00000008
}
.project-detail-button span{
  font-size:17px
}
.project-card.seatemp{
  background:#e6f1ed
}
.seatemp .card-visual{
  background:#5bafe0
}
.seatemp .card-visual img{
  object-position:50% 50%
}
.project-card.calc{
  background:#efede5;
  color:#181816
}
.calc .card-intro{
  padding-bottom:20px
}
.calc .card-visual{
  background:#d7d7cd;
  display:flex;
  justify-content:center;
  padding:20px 20px 0
}
.calc .card-visual img{
  width:auto;
  height:100%;
  object-fit:contain;
  border-radius:14px 14px 0 0;
  filter:drop-shadow(0 5px 12px #0003)
}
.project-card.bellhours{
  background:#111712;
  color:#e4edbe
}
.bellhours .card-intro h3{
  font-family:Georgia,serif
}
.bellhours .card-visual{
  border:1px solid #ffffff10
}
.bellhours .project-detail-button{
  border-color:#ffffff20
}
.bellhours .project-detail-button:hover{
  background:#ffffff0a
}
.project-card.phonedrops{
  background:#eceafa;
  color:#25223c
}
.phonedrops .card-visual{
  background:#090b14
}
.project-caption{
  display:none
}
.project-counter{
  font-size:13px
}
/* A native sticky scene: the document scrolls normally;
only the cards transform. */
@media(min-width:901px) and (min-height:601px){
  .motion-ready .project-section{
    height:560svh
  }
  .motion-ready .project-stage{
    position:sticky;
    top:0;
    height:100svh;
    overflow:hidden;
    padding:30px 32px
  }
  .motion-ready .project-index{
    position:absolute;
    left:32px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    gap:0;
    padding:0;
    z-index:12
  }
  .motion-ready .project-index a{
    min-height:34px;
    font-size:11px
  }
  .motion-ready .card-deck{
    position:absolute;
    inset:0;
    display:block;
    perspective:1400px;
    pointer-events:none
  }
  .motion-ready .project-card{
    position:absolute;
    top:8svh;
    left:50%;
    width:min(43vw,610px);
    height:84svh;
    max-height:950px;
    transform:translateX(-50%);
    will-change:transform;
    pointer-events:auto
  }
  .motion-ready .project-cover{
    height:calc(100% - 48px);
    min-height:0
  }
  .motion-ready .project-detail-button{
    height:48px
  }
  .motion-ready .project-card .card-visual{
    flex:1;
    min-height:0
  }
  .motion-ready .project-caption{
    display:flex;
    flex-direction:column;
    gap:19px;
    position:absolute;
    right:3%;
    top:43%;
    width:16%;
    max-width:205px
  }
  .project-caption>.micro{
    font-size:9px;
    opacity:.7
  }
  .project-caption>p:not(.micro){
    font-size:17px;
    line-height:1.4;
    letter-spacing:-.02em
  }
  .project-caption a{
    font:11px var(--mono);
    border-bottom:1px solid #17171560;
    align-self:flex-start;
    padding:8px 0
  }
  .project-caption a:hover{
    border-color:var(--ink)
  }
  .motion-ready .stage-top{
    pointer-events:none
  }
  .motion-ready .stage-bottom{
    pointer-events:none
  }
}
.light-section{
  background:var(--paper)
}
.about-section{
  padding:50px 4.8% 100px
}
.section-label{
  display:flex;
  justify-content:space-between;
  padding:15px 0 50px;
  border-top:1px solid #17171535;
  font-size:10px
}
.about-heading{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:8%;
  align-items:start
}
.about-heading h2,.stack-layout>h2{
  font:400 clamp(60px,7.6vw,124px)/1.04 var(--display);
  letter-spacing:-.03em
}
.about-heading h2>span{
  color:var(--red)
}
.about-copy{
  padding-top:8px;
  max-width:450px
}
.portrait{
  width:64px;
  height:64px;
  border-radius:50%;
  margin-bottom:25px
}
.about-copy>p{
  font-size:clamp(20px,2.4vw,36px);
  line-height:1.2;
  letter-spacing:-.04em
}
.about-copy>.small-copy{
  font-size:15px;
  line-height:1.65;
  letter-spacing:-.015em;
  margin-top:25px;
  max-width:345px;
  color:#5d5c55
}
.about-more{
  margin-top:25px;
  border-top:1px solid #17171530
}
.about-more summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  font:11px var(--mono);
  padding:18px 0
}
.about-more summary::-webkit-details-marker{
  display:none
}
.about-more[open] summary>span{
  transform:rotate(45deg)
}
.prose{
  font-size:14px;
  line-height:1.65
}
.prose p+p{
  margin-top:14px
}
.facts{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  border-top:1px solid #17171535;
  margin-top:80px;
  padding-top:25px
}
.facts>div{
  display:flex;
  flex-direction:column;
  gap:10px
}
.facts b{
  font-weight:400;
  font-size:clamp(38px,4vw,65px);
  letter-spacing:-.06em
}
.facts span{
  font:10px var(--mono);
  text-transform:uppercase
}
.stack-section{
  padding:0 4.8% 100px
}
.stack-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10%
}
.stack-layout>h2{
  font-size:clamp(54px,5.8vw,92px)
}
.stack-item{
  padding:19px 0;
  border-bottom:1px solid #17171530
}
.stack-item:first-child{
  padding-top:4px
}
.stack-item h3{
  font-size:18px;
  font-weight:400;
  margin-bottom:10px;
  letter-spacing:-.04em
}
.stack-item p{
  font-size:13px;
  line-height:1.6;
  color:#66645d;
  max-width:440px
}
.contact-section{
  position:relative;
  padding:0 4.8% 110px
}
.contact-section h2{
  font:400 clamp(110px,20.5vw,340px)/1 var(--display);
  letter-spacing:-.038em;
  white-space:nowrap
}
.contact-panel{
  position:relative;
  margin:-17px 0 0 auto;
  z-index:1;
  width:64%;
  background:var(--red);
  padding:36px 40px 25px
}
.contact-panel>p:not(.contact-copy){
  font-size:clamp(25px,3.2vw,48px);
  letter-spacing:-.04em;
  line-height:1.05;
  margin-top:35px
}
.contact-copy{
  font-size:12px;
  line-height:1.6;
  margin:25px 0;
  max-width:335px
}
.contact-list{
  list-style:none;
  margin:28px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:24px
}
.contact-list>li{
  border-top:1px solid #17171550
}
.contact-list a{
  display:flex;
  gap:12px;
  padding:18px 0;
  align-items:flex-start
}
.contact-list a>svg{
  width:20px;
  height:20px
}
.contact-list a>span{
  font:11px var(--mono)
}
.contact-list small{
  display:block;
  margin-top:10px;
  font-size:10px
}
.contact-list .reveal{
  display:flex;
  align-items:center;
  gap:10px
}
.reveal .mask{
  display:none
}
.reveal svg{
  width:15px;
  height:15px
}
.reveal b{
  font-weight:400
}
.contact-list a:hover small{
  text-decoration:underline
}
footer{
  padding:0 4.8% 20px
}
.footer-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid #17171530;
  padding:40px 0 70px;
  gap:20px
}
.footer-brand{
  font:700 clamp(50px,7vw,105px)/1 Georgia,serif;
  letter-spacing:-.065em
}
.footer-main p{
  max-width:270px;
  font-size:10px
}
.back-top{
  align-self:flex-start;
  padding-top:15px;
  font-size:10px
}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:15px;
  border-top:1px solid #17171530;
  padding-top:20px;
  font-size:8px
}
.footer-bottom>div{
  display:flex;
  gap:20px
}
.project-dialog{
  border:0;
  border-radius:20px;
  padding:0;
  background:var(--paper);
  color:var(--ink);
  max-width:660px;
  width:calc(100% - 32px);
  max-height:85svh;
  box-shadow:0 30px 100px #0005
}
.project-dialog::backdrop{
  background:#101411b8;
  backdrop-filter:blur(6px)
}
.dialog-inner{
  padding:42px;
  position:relative
}
.dialog-close{
  position:absolute;
  right:20px;
  top:14px;
  font-size:30px;
  background:transparent;
  width:40px;
  height:40px
}
.dialog-inner h2{
  font-size:48px;
  letter-spacing:-.05em;
  margin:20px 0
}
.dialog-desc{
  font-size:17px;
  line-height:1.5
}
.bullets{
  padding-left:18px;
  font-size:13px;
  line-height:1.7;
  margin:24px 0
}
.bullets li+li{
  margin-top:8px
}
.tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  list-style:none;
  margin:24px 0;
  padding:0
}
.tags li{
  border:1px solid #17171530;
  padding:6px 9px;
  font:9px var(--mono)
}
.links{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center
}
.links a.site{
  width:100%;
  font:13px var(--mono);
  padding:10px 0
}
.links .store img{
  height:34px;
  width:auto
}
@media(min-width:1600px){
  .hero-title{
    font-size:8vw
  }
  .hero-note{
    top:39%
  }
}
@media(max-width:1100px){
  .topbar{
    padding:24px
  }
  .hero-note{
    left:60%;
    width:33%;
    font-size:11px
  }
  .motion-ready .project-caption{
    right:2%;
    width:17%
  }
  .motion-ready .project-caption>p:not(.micro){
    font-size:14px
  }
  .motion-ready .project-index{
    left:22px
  }
  .motion-ready .project-index a{
    font-size:10px;
    gap:6px
  }
  .motion-ready .project-card{
    width:44vw
  }
  .card-intro{
    padding:24px 20px
  }
  .card-intro h3{
    font-size:40px
  }
  .card-bottom{
    padding:18px 15px;
    font-size:7px
  }
  .contact-panel{
    width:72%
  }
}
@media(max-width:900px),(max-height:600px){
  .project-stage{
    padding:30px 24px 110px
  }
  .card-deck{
    gap:24px
  }
  .project-card{
    height:660px
  }
  .project-cover{
    height:calc(100% - 48px);
    min-height:0
  }
  .project-index{
    flex-wrap:wrap;
    gap:8px 20px
  }
  .card-intro h3{
    font-size:38px
  }
  .card-visual{
    margin:0 14px
  }
  .project-index a{
    opacity:.8
  }
  .stage-top,.stage-bottom{
    font-size:9px
  }
  .card-bottom{
    font-size:7px
  }
  .hero{
    min-height:720px
  }
  .hero-title{
    font-size:clamp(69px,9.6vw,110px);
    bottom:120px;
    width:88%
  }
  .hero-note{
    top:24%;
    left:auto;
    right:6%;
    width:42%;
    font-size:10px
  }
  .hero-bottom>.micro:first-child{
    max-width:180px;
    font-size:9px
  }
  .hero-bottom{
    left:6%;
    right:6%
  }
  .topbar .location{
    font-size:8px
  }
  .topbar nav{
    font-size:9px;
    gap:15px
  }
  .brand{
    font-size:35px
  }
  .about-heading{
    gap:6%
  }
  .about-heading h2{
    font-size:8.5vw
  }
  .stack-layout{
    gap:6%
  }
  .contact-panel{
    width:78%
  }
}
@media(max-width:600px){
  .site-shell{
    margin:5px;
    border-radius:19px
  }
  .hero{
    height:calc(100svh - 5px);
    min-height:680px
  }
  .topbar{
    padding:24px 20px;
    align-items:start
  }
  .brand{
    position:static;
    transform:none;
    font-size:37px;
    order:-1
  }
  .topbar .location{
    display:none
  }
  .topbar nav{
    gap:20px;
    padding-top:3px
  }
  .hero-media{
    height:56%
  }
  .hero-media>img{
    object-position:52% 50%
  }
  .hero-shade{
    background:linear-gradient(0deg,#121514 0%,rgba(18,21,20,.3) 35%,rgba(7,11,10,.15) 85%)
  }
  .hero-note{
    left:8%;
    top:24%;
    right:auto;
    width:76%;
    max-width:280px;
    font-size:10px;
    gap:12px
  }
  .hero-title{
    left:7%;
    bottom:126px;
    font-size:clamp(50px,11.8vw,72px);
    width:87%;
    letter-spacing:-.028em;
    line-height:1.05
  }
  .title-line{
    min-height:1.05em
  }
  .title-line.indent{
    margin-left:6%
  }
  .title-line.indent-small{
    margin-left:0
  }
  .hero-bottom{
    bottom:34px;
    gap:20px
  }
  .hero-bottom>.micro:first-child{
    display:none
  }
  .motion-toggle{
    margin-left:0
  }
  .scroll-cue{
    margin-left:auto;
    width:50px;
    height:50px
  }
  .project-stage{
    padding:27px 20px 105px
  }
  .stage-top>span{
    font-size:7px;
    max-width:140px;
    text-align:right
  }
  .project-index{
    justify-content:flex-start;
    padding:27px 0;
    gap:5px 20px
  }
  .project-index a{
    font-size:10px;
    min-height:36px;
    width:calc(50% - 10px)
  }
  .card-deck{
    display:flex;
    flex-direction:column;
    gap:28px;
    max-width:430px
  }
  .project-card{
    height:640px;
    border-radius:18px;
    box-shadow:0 8px 25px #5f100c30;
    scroll-margin-top:24px
  }
  .card-masthead{
    padding:18px 21px
  }
  .card-intro{
    padding:26px 18px
  }
  .card-intro h3{
    font-size:45px
  }
  .card-intro .micro{
    margin-bottom:16px
  }
  .card-bottom{
    padding:19px 17px;
    font-size:7px
  }
  .card-visual{
    margin:0 15px
  }
  .stage-bottom{
    left:20px;
    right:20px;
    bottom:40px;
    font-size:7px
  }
  .stage-bottom>span:first-child{
    max-width:85px
  }
  .project-counter{
    font-size:11px
  }
  .pixel-edge{
    height:60px
  }
  .about-section{
    padding:25px 6% 60px
  }
  .section-label{
    padding-bottom:35px;
    font-size:8px
  }
  .about-heading{
    grid-template-columns:1fr;
    gap:35px
  }
  .about-heading h2{
    font-size:clamp(61px,16vw,94px)
  }
  .about-copy{
    max-width:none
  }
  .portrait{
    width:52px;
    height:52px;
    float:right;
    margin:0 0 15px 15px
  }
  .about-copy>p{
    font-size:25px
  }
  .about-copy>.small-copy{
    font-size:14px
  }
  .facts{
    grid-template-columns:1fr 1fr;
    margin-top:40px;
    gap:28px 15px
  }
  .facts b{
    font-size:44px
  }
  .facts span{
    font-size:8px
  }
  .stack-section{
    padding:0 6% 65px
  }
  .stack-layout{
    grid-template-columns:1fr;
    gap:25px
  }
  .stack-layout>h2{
    font-size:14vw
  }
  .stack-item{
    padding:20px 0
  }
  .stack-item p{
    font-size:13px
  }
  .contact-section{
    padding:0 6% 65px
  }
  .contact-section h2{
    font-size:20.5vw
  }
  .contact-panel{
    width:100%;
    margin:0;
    padding:27px 24px 15px
  }
  .contact-panel>p:not(.contact-copy){
    font-size:35px;
    margin-top:25px
  }
  .contact-panel>.micro{
    font-size:9px
  }
  .contact-copy{
    font-size:12px
  }
  .contact-list{
    grid-template-columns:1fr;
    gap:0
  }
  .contact-list a{
    padding:17px 0
  }
  .contact-list a>span{
    display:flex;
    flex:1;
    align-items:center;
    justify-content:space-between
  }
  .contact-list small{
    margin-top:0
  }
  .contact-list .reveal{
    margin:0
  }
  footer{
    padding:0 6% 20px
  }
  .footer-main{
    flex-wrap:wrap;
    padding:30px 0 40px;
    gap:25px
  }
  .footer-brand{
    font-size:65px
  }
  .footer-main p{
    font-size:8px
  }
  .back-top{
    width:100%;
    font-size:9px
  }
  .footer-bottom{
    font-size:7px;
    flex-wrap:wrap;
    gap:15px 20px
  }
  .footer-bottom>span:last-child{
    width:100%;
    opacity:.6
  }
  .dialog-inner{
    padding:30px 23px
  }
  .dialog-inner h2{
    font-size:40px
  }
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important
  }
  .chroma-canvas{
    display:none
  }
  .hero-grain{
    display:none
  }
}
@media print{
  .hero{
    height:700px
  }
  .pixel-edge,.motion-toggle,.scroll-cue,.project-index,.project-caption,.stage-bottom{
    display:none
  }
  .motion-ready .project-section{
    height:auto
  }
  .motion-ready .project-stage{
    position:static;
    height:auto;
    overflow:visible
  }
  .motion-ready .card-deck{
    position:static;
    display:grid
  }
  .motion-ready .project-card{
    position:relative;
    transform:none!important;
    left:auto;
    top:auto;
    width:100%;
    height:650px;
    break-inside:avoid
  }
  .site-shell{
    overflow:visible
  }
  .project-dialog{
    display:none
  }
}

/* Keep all headline states, including scrambled glyphs, left of Perseus. */
.hero-title {
  width: min(26vw, calc(45vw - 35.1svh));
  font-size: min(4.3vw, calc(7.4vw - 5.8svh));
  overflow: hidden;
}
.hero-title .title-line { margin-left: 0; }
/* On narrower/taller screens reserve a separate text area below the photo. */
@media (max-width: 1100px), (max-aspect-ratio: 4/3) {
  .hero-media { height: 50%; }
  .hero-title {
    left: 6%;
    top: 56%;
    bottom: auto;
    width: 88%;
    font-size: min(7vw, 6.8svh);
  }
  .hero-note {
    top: 15%;
    left: 6%;
    right: auto;
    width: 38%;
    max-width: 280px;
    font-size: 10px;
  }
}
@media (max-width: 600px) {
  .hero-title { font-size: min(11.8vw, 6.8svh); }
  .hero-note { top: 14%; width: 76%; }
}

/* Larger headline, wrapping inside the clear space beside the sculpture. */
@media (min-width:1101px) and (min-aspect-ratio:4/3) {
  .hero-title {
    left:2.5%;
    width:min(30vw, calc(49vw - 35.1svh));
    font-size:min(8.6vw, calc(14.8vw - 11.6svh), calc((100svh - 220px) / 6.3));
    line-height:.94;
    letter-spacing:-.055em;
  }
  .hero-title .title-line {
    white-space:normal;
    min-height:0;
    line-height:.94;
  }
}