/* Ali Rose van Overbeke — greyscale, colour photography, orange-red on hover */
*{box-sizing:border-box}
:root{
  --w:#FFFFFF; --ink:#0F0F0F; --ink2:#3A3A38; --grey:#8C8C8A;
  --line:#E4E4E1; --smoke:#F5F5F3;
  --acc:#6E6E6C;   /* resting */
  --hot:#DD4B1E;   /* hover only */
  --serif:'Instrument Serif', Georgia, serif;
  --sans:'Archivo', system-ui, -apple-system, sans-serif;
}
html{color-scheme:light}
body{margin:0;background:var(--w);color:var(--ink);font-family:var(--sans);
     -webkit-font-smoothing:antialiased;font-size:15px;line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:none;margin:0}
.gut{padding-left:48px;padding-right:48px}

/* nav */
nav.top{position:sticky;top:0;z-index:50;background:var(--w);
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:22px 48px;font-size:13px;border-bottom:1px solid var(--line)}
nav.top .mk{font-family:var(--serif);font-size:20px;letter-spacing:.01em;text-decoration:none;white-space:nowrap}
nav.top ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;color:var(--ink2)}
nav.top a{text-decoration:none;position:relative;transition:color .3s}
nav.top ul a:hover{color:var(--hot)}
nav.top ul a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--hot);
  transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
nav.top ul a:hover::after,nav.top ul a[aria-current="page"]::after{transform:scaleX(1)}
nav.top ul a[aria-current="page"]::after{background:var(--acc)}

/* type */
h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.9vw,66px);line-height:1.06;
   letter-spacing:-.012em;margin:0;max-width:22ch}
h1 em{font-style:italic}
h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3vw,38px);line-height:1.12;letter-spacing:-.01em;margin:0}
h3{font-family:var(--serif);font-weight:400;font-size:25px;line-height:1.2;margin:0 0 12px;letter-spacing:-.005em}
h4{font-family:var(--sans);font-weight:600;font-size:14.5px;margin:0 0 6px}
p{margin:0 0 14px}
.lede{font-size:17.5px;line-height:1.55;color:var(--ink2);max-width:56ch}
.q{font-family:var(--serif);font-size:22px;line-height:1.3;color:var(--ink);margin:0 0 16px;letter-spacing:-.005em}
.dim{color:var(--grey)}
.crumb{font-size:11.5px;color:var(--grey);margin:0 0 16px}
.crumb a{text-decoration:none;transition:color .3s}
.crumb a:hover{color:var(--hot)}
.eyebrow{font-family:var(--serif);font-style:italic;font-size:23px;line-height:1.25;color:var(--acc);margin:0}
.eyebrow b{display:block;font-family:var(--sans);font-style:normal;font-size:12.5px;color:var(--grey);font-weight:400;margin-top:4px}
.slab{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--grey);font-weight:400;margin:0 0 22px}
.cred{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin:8px 0 0}

/* layout */
section.band{padding:60px 48px;border-bottom:1px solid var(--line)}
section.band.tight{padding:40px 48px}
.two{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:64px;align-items:start}
.half{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;align-items:start}
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
.body-cols{column-count:2;column-gap:40px}
.body-cols p{break-inside:avoid}

.hero{padding:86px 48px 44px}
.sub{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:64px;
     margin-top:40px;padding-top:24px;border-top:1px solid var(--ink)}
.sub p{font-size:16.5px;line-height:1.6;max-width:52ch;margin:0;color:var(--ink2)}
.sub .who{font-size:12.5px;color:var(--grey);line-height:1.9;margin:0}
.bleed img{width:100%;height:70vh;min-height:380px;object-fit:cover;object-position:center 42%;
  transition:transform 1.3s cubic-bezier(.2,.8,.2,1)}
.bleed:hover img{transform:scale(1.02)}
.bleed.short img{height:52vh;min-height:300px}

.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:var(--w)}
.ticker .run{display:flex;gap:64px;white-space:nowrap;padding:18px 0;animation:slide 58s linear infinite;width:max-content}
.ticker a{font-family:var(--serif);font-size:22px;color:var(--ink2);text-decoration:none;transition:color .3s}
.ticker a:hover{color:var(--hot)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.ims{display:grid;gap:14px;margin-top:22px}
.ims.g2{grid-template-columns:repeat(2,1fr)}
.ims.g3{grid-template-columns:repeat(3,1fr)}
.ims.g4{grid-template-columns:repeat(4,1fr)}
.ims .im{overflow:hidden}
.ims img,.ims video{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.ims.wide img,.ims.wide video{aspect-ratio:3/2}
.ims.sq img,.ims.sq video{aspect-ratio:1/1}
.ims .im:hover img,.ims .im:hover video{transform:scale(1.04)}

.act{display:grid;grid-template-columns:170px minmax(0,1fr);gap:48px;
     padding:60px 48px;border-bottom:1px solid var(--line)}
.act .cols{font-size:15.5px;line-height:1.66;color:var(--ink2);max-width:80ch}
.act .cols p{margin:0 0 14px}
.act .cols p:first-child{font-family:var(--serif);font-size:26px;line-height:1.28;
  color:var(--ink);letter-spacing:-.005em;margin:0 0 20px;max-width:44ch}

.figs{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.figs div{padding:44px 26px;border-right:1px solid var(--line)}
.figs div:first-child{padding-left:48px}
.figs div:last-child{border-right:0;padding-right:48px}
.figs b{font-family:var(--serif);display:block;font-size:44px;font-weight:400;line-height:1;
        letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.figs span{display:block;font-size:12.5px;line-height:1.6;color:var(--grey);margin-top:12px}
.figs.g8 div:nth-child(4){border-right:0}
.figs.g8 div:nth-child(n+5){border-top:1px solid var(--line)}
.figs.g8 div:nth-child(5){padding-left:48px}
.figs.c3{grid-template-columns:repeat(3,1fr)}
.figs.c3 div:nth-child(3n){border-right:0;padding-right:48px}
.figs.c3 div:nth-child(n+4){border-top:1px solid var(--line)}
.figs.c3 div:nth-child(3n+1){padding-left:48px}

.cl .row{display:flex;flex-wrap:wrap;gap:14px 40px;align-items:center}
.cl .row span{font-family:var(--serif);font-size:23px;color:var(--ink2);transition:color .3s}
.cl .row span:hover{color:var(--hot)}
.tail{margin-top:20px;font-size:11.5px;color:var(--grey);line-height:1.9;max-width:82ch}

.idx .li{display:grid;grid-template-columns:96px minmax(0,1fr) minmax(0,1.15fr) auto;gap:22px;
  padding:15px 0;border-top:1px solid var(--line);align-items:baseline;
  text-decoration:none;color:inherit;transition:padding-left .3s}
.idx .li:hover{padding-left:8px}
.idx .li:last-child{border-bottom:1px solid var(--line)}
.idx .li .y{color:var(--grey);font-size:12.5px;font-variant-numeric:tabular-nums}
.idx .li .t{font-family:var(--serif);font-size:21px;transition:color .3s}
.idx .li .r{color:var(--ink2);font-size:13.5px}
.idx .li .go{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--acc);opacity:0;transition:opacity .3s}
.idx .li:hover .t{color:var(--hot)}
.idx .li:hover .go{opacity:1;color:var(--hot)}

.rows .r{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:22px;
  padding:20px 0;border-top:1px solid var(--line);align-items:start;
  text-decoration:none;color:inherit;transition:padding-left .3s}
.rows .r:hover{padding-left:8px}
.rows .r:last-child{border-bottom:1px solid var(--line)}
.rows .yr{color:var(--grey);font-size:12.5px;font-variant-numeric:tabular-nums;padding-top:3px}
.rows .ttl{font-family:var(--serif);font-size:21px;margin:0 0 4px;line-height:1.2;transition:color .3s}
.rows .r:hover .ttl{color:var(--hot)}
.rows .org{font-size:11.5px;color:var(--grey);margin:0 0 6px}
.rows .dsc{font-size:13.5px;color:var(--ink2);margin:0;max-width:74ch;line-height:1.6}
.rows .go{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--acc);opacity:0;transition:opacity .3s;padding-top:4px}
.rows .r:hover .go{opacity:1;color:var(--hot)}

.co{margin-bottom:44px}
.cohead{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:22px;
  padding:0 0 20px;border-bottom:1px solid var(--ink);align-items:start;text-decoration:none;color:inherit}
.cohead .nm{font-family:var(--serif);font-size:30px;line-height:1.1;margin:0 0 4px;transition:color .3s}
.cohead:hover .nm{color:var(--hot)}
.cohead .rl{font-size:12.5px;color:var(--grey);margin:0 0 10px}
.cohead .dsc{font-size:14px;color:var(--ink2);margin:0;max-width:74ch}
.cohead .go{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--acc);transition:color .3s;white-space:nowrap}
.cohead:hover .go{color:var(--hot)}
.colabel{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--grey);margin:22px 0 0}

.kv{display:grid;grid-template-columns:132px minmax(0,1fr);gap:10px 26px;margin:22px 0 0;font-size:13.5px}
.kv dt{color:var(--grey);font-size:11.5px;padding-top:3px}
.kv dd{margin:0;color:var(--ink2);line-height:1.6}
.kv a{transition:color .3s}
.kv a:hover{color:var(--hot)}

ol.steps{margin:0;padding:0;list-style:none;counter-reset:s;columns:2;column-gap:40px}
ol.steps li{counter-increment:s;position:relative;padding-left:30px;margin:0 0 14px;
  font-size:14px;line-height:1.6;color:var(--ink2);break-inside:avoid}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:1px;
  font-family:var(--serif);font-size:15px;color:var(--grey)}

.card{border:1px solid var(--line);padding:26px;transition:background .35s}
.card:hover{background:var(--smoke)}
.card p{font-size:14px;color:var(--ink2);line-height:1.6}
.card .go{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--acc);
  text-decoration:none;transition:color .3s}
.card:hover .go{color:var(--hot)}

.doors{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.doors div{padding:48px 36px;border-right:1px solid var(--line);transition:background .35s}
.doors div:first-child{padding-left:48px}
.doors div:last-child{border-right:0;padding-right:48px}
.doors div:hover{background:var(--smoke)}
.doors h4{font-family:var(--serif);font-weight:400;font-size:25px;margin:0 0 12px;letter-spacing:-.01em}
.doors p{font-size:14.5px;line-height:1.6;color:var(--ink2);margin:0 0 16px}
.doors .go{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--acc);
  text-decoration:none;transition:color .3s}
.doors div:hover .go{color:var(--hot)}

.quote{margin:0;border-left:1px solid var(--line);padding-left:24px}
.quote p{font-family:var(--serif);font-size:20px;line-height:1.35;color:var(--ink);margin:0 0 12px;letter-spacing:-.005em}
.quote cite{font-style:normal;font-size:11.5px;color:var(--grey)}

.pn{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:34px 48px;border-bottom:1px solid var(--line)}
.pn a{text-decoration:none;color:inherit}
.pn .lbl{font-size:11.5px;color:var(--grey);margin:0}
.pn .nm{font-family:var(--serif);font-size:20px;margin:4px 0 0;transition:color .3s}
.pn a:hover .nm{color:var(--hot)}
.pn .nx{text-align:right}

.field{border:0;border-bottom:1px solid var(--line);padding:12px 0;width:100%;
  font-family:var(--sans);font-size:14.5px;color:var(--ink);background:none}
.field:focus{outline:none;border-bottom-color:var(--hot)}
textarea.field{resize:vertical;min-height:110px}
.btn{font-family:var(--serif);font-style:italic;font-size:18px;background:none;border:0;
  border-bottom:1px solid var(--acc);padding:0 0 3px;cursor:pointer;color:var(--ink);transition:color .3s,border-color .3s}
.btn:hover{color:var(--hot);border-bottom-color:var(--hot)}
.pills{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0 0 26px;padding:0}
.pills li{font-size:12.5px;color:var(--ink2);border:1px solid var(--line);padding:7px 14px;cursor:pointer;transition:.25s}
.pills li:hover{border-color:var(--hot);color:var(--hot)}
.pills li[aria-pressed="true"]{border-color:var(--ink);color:var(--ink)}

.foot{padding:48px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  font-size:12.5px;color:var(--grey)}
.foot .mk{font-family:var(--serif);font-size:21px;color:var(--ink)}
.foot a{color:inherit;text-decoration:none;transition:color .3s}
.foot a:hover{color:var(--hot)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:900px){
  nav.top{padding:16px 20px;flex-wrap:wrap;gap:12px}
  .gut{padding-left:20px;padding-right:20px}
  nav.top ul{gap:18px;font-size:12.5px}
  .hero{padding:44px 20px 30px}
  section.band,section.band.tight{padding:36px 20px}
  .two,.half,.cols3,.sub{grid-template-columns:1fr;gap:24px}
  .body-cols,.act .cols,ol.steps{column-count:1;columns:1}
  .act{grid-template-columns:1fr;gap:18px;padding:36px 20px}
  .ims.g3,.ims.g4{grid-template-columns:repeat(2,1fr)}
  .figs,.figs.g8,.figs.c3{grid-template-columns:repeat(2,1fr)}
  .figs.c3 div:nth-child(3n){border-right:1px solid var(--line)}
  .figs.c3 div:nth-child(3n+1){padding-left:18px}
  .figs div{padding:26px 18px!important;border-top:1px solid var(--line)}
  .figs div:nth-child(2n){border-right:0}
  .doors{grid-template-columns:1fr}
  .doors div{border-right:0;border-bottom:1px solid var(--line);padding:28px 20px!important}
  .idx .li{grid-template-columns:78px minmax(0,1fr);gap:4px 16px}
  .idx .li .r,.idx .li .go{grid-column:2}
  .rows .r,.cohead{grid-template-columns:70px minmax(0,1fr);gap:6px 14px}
  .rows .go,.cohead .go{grid-column:2}
  .pn{grid-template-columns:1fr;padding:24px 20px}
  .pn .nx{text-align:left}
  .foot{padding:32px 20px}
  .bleed img{height:56vh}
}

.vid{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--smoke)}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}