@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --chalk:#f5f4ef;
  --paper:#fbfaf7;
  --burg:#2d1820;
  --lilac:#b9acd1;
  --mustard:#d5aa46;
  --coral:#c85f50;
  --blue:#c7d5dd;
  --acid:#c9e653;
  --ink:#2b2226;
  --muted:#6f666b;
  --line:rgba(45,24,32,.17);
  --max:1500px;
  --pad:clamp(1.05rem,4vw,4.8rem);
  --sec:clamp(5rem,9vw,9.4rem);
  --grotesk:"Inter",Arial,sans-serif;
  --cond:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --mono:"IBM Plex Mono","Courier New",monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--grotesk);line-height:1.55;overflow-x:hidden
}
img{display:block;width:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:700}
ul{list-style:none;padding:0;margin:0}
address{font-style:normal}
a:focus-visible{outline:2px solid var(--acid);outline-offset:4px}
.shell{width:min(100%,var(--max));margin:auto;padding-inline:var(--pad)}
.skip{position:absolute;left:1rem;top:-10rem;z-index:999;background:var(--chalk);padding:.75rem 1rem;border:1px solid var(--burg)}
.skip:focus{top:1rem}
.code{font:500 .64rem var(--mono);text-transform:uppercase;letter-spacing:.12em}
.ref{display:flex;align-items:center;gap:.7rem;font:500 .66rem var(--mono);text-transform:uppercase;letter-spacing:.11em;color:var(--coral);margin-bottom:1.8rem}
.ref:before{content:"";width:24px;height:2px;background:currentColor}

/* masthead */
.top{background:var(--burg);color:var(--chalk)}
.top .shell{min-height:32px;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.header{background:var(--chalk);border-bottom:1px solid var(--burg)}
.header-grid{min-height:94px;display:grid;grid-template-columns:.78fr 1.22fr}
.brand{display:flex;flex-direction:column;justify-content:center;padding-right:2rem;font:800 1.9rem/.78 var(--grotesk);text-transform:uppercase;letter-spacing:-.04em}
.brand small{font:500 .58rem var(--mono);letter-spacing:.14em;margin-top:.58rem}
.nav{display:grid;grid-template-columns:repeat(5,1fr);border-left:1px solid var(--line)}
.nav a{position:relative;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--line);font:600 .78rem var(--cond);text-transform:uppercase;letter-spacing:.08em}
.nav a:after{content:"";position:absolute;left:18%;right:18%;bottom:13px;height:4px;background:var(--mustard);transform:scaleX(0);transform-origin:left;transition:.2s}
.nav a:hover:after{transform:scaleX(1)}

/* hero */
.hero{padding:clamp(1.8rem,4vw,4rem) 0 clamp(5rem,9vw,9rem);background:var(--chalk)}
.hero-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto auto;gap:1rem}
.poster-title{grid-column:1/8;grid-row:1/3;min-height:590px;background:var(--chalk);border:1px solid var(--burg);padding:clamp(1.6rem,4vw,4.2rem);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}
.poster-title:before{content:"";position:absolute;left:12px;top:12px;width:12px;height:12px;border-radius:50%;background:var(--acid);box-shadow:26px 0 0 var(--mustard)}
.poster-title:after{content:"";position:absolute;width:320px;height:190px;background:var(--coral);right:-70px;bottom:-30px;transform:rotate(-4deg)}
.billie{font:800 clamp(6rem,14vw,14rem)/.7 var(--grotesk);letter-spacing:-.08em;text-transform:uppercase;position:relative;z-index:2}
.denver{font:700 clamp(4.8rem,10vw,10rem)/.75 var(--cond);text-transform:uppercase;letter-spacing:.02em;color:var(--burg);margin-left:clamp(1rem,8vw,8rem);position:relative;z-index:2}
.hero-copy{display:grid;grid-template-columns:5rem 1fr;gap:1rem;max-width:34rem;position:relative;z-index:2}
.hero-copy p{font-size:clamp(1rem,1.2vw,1.15rem)}
.hero-main{grid-column:8/13;grid-row:1/4;min-height:760px;position:relative;overflow:hidden;background:var(--blue)}
.hero-main img{height:100%;min-height:760px;filter:saturate(.72) contrast(.98)}
.hero-main:before{content:"";position:absolute;z-index:2;left:0;right:0;top:31%;height:10px;background:var(--mustard)}
.hero-main figcaption{position:absolute;z-index:3;left:1rem;top:calc(31% + 1rem);background:rgba(45,24,32,.88);color:var(--chalk);padding:.6rem .7rem}
.hero-small{grid-column:1/5;grid-row:3;min-height:210px;position:relative;overflow:hidden;background:var(--lilac)}
.hero-small img{height:100%;min-height:210px;filter:saturate(.68)}
.hero-small figcaption{position:absolute;right:0;bottom:0;background:var(--burg);color:var(--chalk);padding:.55rem .7rem}
.hero-cta{grid-column:5/8;grid-row:3;background:var(--lilac);min-height:210px;padding:1.4rem;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.hero-cta:after{content:"035";position:absolute;right:-.2rem;bottom:-1.1rem;font:700 7rem/.8 var(--cond);color:rgba(45,24,32,.12)}
.hero-cta a{font:700 1.55rem var(--cond);text-transform:uppercase;position:relative;z-index:2}
.hero-cta a:after{content:" →"}

/* intro */
.intro{padding:var(--sec) 0;background:var(--paper)}
.intro-grid{display:grid;grid-template-columns:.34fr 1fr .74fr;gap:clamp(1.5rem,5vw,5.5rem)}
.big{font:700 clamp(6rem,13vw,13rem)/.65 var(--cond);color:rgba(45,24,32,.09)}
.intro h2,.work h2,.process h2,.principles h2,.notes h2,.visit h2{font-family:var(--grotesk);letter-spacing:-.05em}
.intro h2{font-size:clamp(3.4rem,7vw,7.2rem);line-height:.86;max-width:8ch}
.intro-copy{max-width:29rem}
.intro-copy p:first-child{font-size:1.14rem}
.intro-copy p+p{margin-top:1.2rem;color:var(--muted)}

/* work poster lines */
.work{padding:var(--sec) 0;background:var(--blue)}
.work-head{display:grid;grid-template-columns:1fr .72fr;gap:3rem;align-items:end;margin-bottom:3.6rem}
.work h2{font-size:clamp(3.8rem,7.5vw,7.7rem);line-height:.82}
.work-head p{max-width:31rem;justify-self:end;color:#4e5960}
.work-list{border-top:2px solid var(--burg)}
.work-row{display:grid;grid-template-columns:6rem .9fr 1.1fr;gap:1.5rem;min-height:126px;align-items:center;border-bottom:1px solid rgba(45,24,32,.22);position:relative}
.work-row:nth-child(2),.work-row:nth-child(5){width:92%}
.work-row:nth-child(3){width:84%}
.work-row:nth-child(4){width:96%}
.work-row:after{content:"";position:absolute;right:0;top:0;bottom:0;width:14px;background:var(--mustard)}
.work-row:nth-child(2):after{background:var(--coral)}
.work-row:nth-child(3):after{background:var(--lilac)}
.work-row:nth-child(4):after{background:var(--acid)}
.work-row .code{color:var(--burg);padding-left:.3rem}
.work-row h3{font:700 clamp(1.6rem,3vw,2.9rem)/.95 var(--cond);text-transform:uppercase}
.work-row p{max-width:38rem;color:#4e5960;font-size:.91rem}

/* process */
.process{padding:var(--sec) 0;background:var(--burg);color:var(--chalk)}
.process-head{display:grid;grid-template-columns:.8fr 1.2fr;gap:3rem;align-items:end;margin-bottom:4rem}
.process h2{font-size:clamp(3.8rem,7.4vw,7.6rem);line-height:.82}
.process-head p{justify-self:end;max-width:31rem;color:rgba(245,244,239,.72)}
.process-line{display:grid;grid-template-columns:repeat(5,1fr);min-height:410px;position:relative;border-top:1px solid rgba(245,244,239,.25);border-bottom:1px solid rgba(245,244,239,.25)}
.process-line:before{content:"";position:absolute;left:6%;right:6%;top:50%;height:8px;background:var(--mustard)}
.proc{position:relative;padding:1.2rem;display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid rgba(245,244,239,.12)}
.proc:first-child{border-left:1px solid rgba(245,244,239,.12)}
.proc:after{content:"";position:absolute;width:15px;height:15px;border-radius:50%;background:var(--acid);left:50%;top:calc(50% - 3px);transform:translate(-50%,-50%);box-shadow:0 0 0 5px var(--burg)}
.proc:nth-child(even):after{background:var(--coral)}
.proc b{font:700 4.2rem/.8 var(--cond);color:rgba(245,244,239,.2)}
.proc-copy{padding-top:13rem}
.proc h3{font:700 1.6rem var(--cond);text-transform:uppercase;margin-bottom:.55rem}
.proc p{font-size:.84rem;color:rgba(245,244,239,.72);max-width:13rem}

/* principles */
.principles{display:grid;grid-template-columns:1fr 1fr 1fr}
.principle{min-height:610px;padding:var(--sec) var(--pad);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.principle.clear{background:var(--chalk)}
.principle.useful{background:var(--mustard)}
.principle.considered{background:var(--lilac)}
.principle:after{content:"";position:absolute;width:260px;height:180px;border:2px solid currentColor;right:-80px;bottom:-55px;transform:rotate(-8deg);opacity:.1}
.principle h2{font-size:clamp(4.8rem,9vw,8.6rem);line-height:.78;text-transform:uppercase}
.principle p{max-width:24rem;position:relative;z-index:2}

/* notes */
.notes{padding:var(--sec) 0;background:var(--paper)}
.notes-head{display:grid;grid-template-columns:1fr .65fr;gap:3rem;align-items:end;margin-bottom:3.4rem}
.notes h2{font-size:clamp(3.6rem,7vw,7.3rem);line-height:.84}
.notes-head p{max-width:30rem;justify-self:end;color:var(--muted)}
.note-grid{display:grid;grid-template-columns:1.2fr .8fr;border-top:2px solid var(--burg)}
.note-lead{padding:1.5rem 2rem 2rem 0;border-right:1px solid var(--line)}
.note-lead h3{font:700 clamp(2.2rem,4vw,4rem)/.95 var(--cond);text-transform:uppercase;max-width:12ch;margin:1rem 0}
.note-lead p,.note-small p{color:var(--muted)}
.note-stack{display:grid;grid-template-rows:1fr 1fr}
.note-small{padding:1.5rem 0 1.5rem 2rem;border-bottom:1px solid var(--line)}
.note-small h3{font:700 clamp(1.6rem,2.5vw,2.5rem)/1 var(--cond);text-transform:uppercase;max-width:12ch;margin:1rem 0}

/* visit */
.visit{background:var(--blue)}
.visit-grid{display:grid;grid-template-columns:.74fr 1.26fr;min-height:620px}
.visit-info{padding:var(--sec) var(--pad);display:flex;flex-direction:column;justify-content:space-between;background:var(--coral);color:var(--chalk)}
.visit-info h2{font-size:clamp(4rem,8vw,8rem);line-height:.8;text-transform:uppercase}
.visit-info address{font:700 clamp(2rem,4vw,4.2rem)/.95 var(--cond);text-transform:uppercase}
.visit-map{position:relative;padding:var(--sec) var(--pad);background:linear-gradient(rgba(45,24,32,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(45,24,32,.12) 1px,transparent 1px),var(--blue);background-size:62px 62px;overflow:hidden}
.visit-map:before{content:"";position:absolute;left:8%;right:8%;top:57%;height:3px;background:var(--burg)}
.visit-map:after{content:"";position:absolute;width:104px;height:104px;border-radius:50%;background:var(--mustard);left:63%;top:calc(57% - 52px);border:14px solid var(--blue);box-shadow:0 0 0 2px var(--burg)}
.visit-number{position:relative;z-index:2;font:800 clamp(7rem,15vw,15rem)/.68 var(--grotesk);letter-spacing:-.07em}
.visit-word{position:relative;z-index:2;font:700 clamp(4rem,8vw,8rem)/.75 var(--cond);text-transform:uppercase}
.visit-note{position:absolute;right:var(--pad);bottom:var(--pad);max-width:27rem;color:#4e5960;font-size:.9rem}

/* footer */
.footer{background:var(--burg);color:var(--chalk);padding:3.6rem 0 2rem;overflow:hidden}
.footer-title{font:800 clamp(5rem,10vw,10.5rem)/.68 var(--grotesk);text-transform:uppercase;letter-spacing:-.065em;padding-bottom:2rem;border-bottom:1px solid rgba(245,244,239,.18);position:relative}
.footer-title:after{content:"";position:absolute;left:0;bottom:-2px;width:18%;height:5px;background:var(--mustard)}
.footer-row{display:grid;grid-template-columns:1fr 1.5fr auto;gap:2rem;padding-top:1.6rem}
.footer-address{font-size:.78rem;line-height:1.7;color:rgba(245,244,239,.7)}
.footer-links{display:flex;flex-wrap:wrap;gap:.7rem 1.5rem;font-size:.78rem}
.footer-links a:hover{color:var(--acid)}
.footer-code{text-align:right;color:rgba(245,244,239,.56);position:relative}
.footer-code:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--acid);margin-right:.5rem}

/* legal */
.legal-hero{padding:clamp(4rem,8vw,8rem) 0 3rem;background:var(--chalk);border-bottom:1px solid var(--burg)}
.legal-back{display:inline-block;font:500 .66rem var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--coral);margin-bottom:3rem}
.legal-hero h1{font:800 clamp(4.3rem,9vw,9rem)/.75 var(--grotesk);text-transform:uppercase;letter-spacing:-.06em;max-width:8ch}
.legal-hero p{max-width:44rem;margin-top:1.8rem;color:var(--muted)}
.legal-layout{display:grid;grid-template-columns:.3fr .7fr;gap:clamp(2.5rem,7vw,8rem);padding:clamp(3rem,7vw,7rem) 0 var(--sec)}
.legal-index{position:sticky;top:2rem;align-self:start;border-top:1px solid var(--burg)}
.legal-index a{display:block;padding:1rem 0;border-bottom:1px solid var(--line);font-size:.82rem}
.legal-copy{max-width:800px}
.legal-copy>section{scroll-margin-top:2rem;padding-bottom:4rem}
.legal-copy>section+section{padding-top:4rem;border-top:2px solid var(--burg)}
.legal-copy h2{font:700 clamp(2.8rem,5vw,5.4rem)/.88 var(--cond);text-transform:uppercase;margin-bottom:2rem}
.legal-copy h3{font:700 1.7rem var(--cond);text-transform:uppercase;margin:2rem 0 .8rem}
.legal-copy p+p{margin-top:1rem}

@media(max-width:980px){
  .header-grid{grid-template-columns:.7fr 1.3fr}
  .nav{grid-template-columns:repeat(3,1fr)}
  .intro-grid{grid-template-columns:.3fr 1fr}
  .intro-copy{grid-column:2}
}
@media(max-width:760px){
  .top .shell span:last-child{display:none}
  .header-grid{grid-template-columns:1fr}
  .brand{min-height:76px;border-bottom:1px solid var(--line)}
  .nav{border-left:0;grid-template-columns:repeat(3,1fr)}
  .nav a{min-height:54px}
  .hero-grid{display:flex;flex-direction:column}
  .poster-title{order:1;min-height:520px}
  .billie{font-size:clamp(5.8rem,24vw,9rem)}
  .denver{font-size:clamp(4.6rem,19vw,7rem);margin-left:0}
  .hero-main{order:2;min-height:500px}
  .hero-main img{min-height:500px}
  .hero-small{order:3;min-height:230px}
  .hero-cta{order:4}
  .intro-grid{grid-template-columns:1fr}.intro-copy{grid-column:auto}.big{font-size:5.5rem}
  .work-head,.process-head,.notes-head{display:block}
  .work-head p,.process-head p,.notes-head p{margin-top:1.4rem}
  .work-row,.work-row:nth-child(2),.work-row:nth-child(3),.work-row:nth-child(4),.work-row:nth-child(5){width:100%;grid-template-columns:5rem 1fr;padding:1rem 0}.work-row p{grid-column:2}
  .process-line{display:block;min-height:0;border-left:1px solid rgba(245,244,239,.25);border-top:0}.process-line:before{display:none}.proc{min-height:180px;border-right:0;border-bottom:1px solid rgba(245,244,239,.12);padding:1rem 1rem 1.3rem 2.2rem}.proc:first-child{border-left:0}.proc:after{left:-1px;top:1.6rem;transform:translate(-50%,0)}.proc-copy{padding-top:3rem}.proc p{max-width:30rem}
  .principles{grid-template-columns:1fr}.principle{min-height:420px}
  .note-grid{grid-template-columns:1fr}.note-lead{border-right:0;border-bottom:1px solid var(--line);padding-right:0}.note-small{padding-left:0}
  .visit-grid{grid-template-columns:1fr}.visit-info{min-height:430px}.visit-map{min-height:450px}
  .footer-row{grid-template-columns:1fr auto}.footer-links{grid-column:1/-1;grid-row:2}
  .legal-layout{grid-template-columns:1fr}.legal-index{position:static}
}
@media(max-width:500px){
  .nav{grid-template-columns:1fr 1fr}
  .poster-title{min-height:470px}
  .principle h2{font-size:4.8rem}
  .footer-row{grid-template-columns:1fr}.footer-code{text-align:left}
}