:root{
  --paper:#eee9de;
  --paper-hi:#f7f3ea;
  --linen:#ddd5c7;
  --graphite:#25231f;
  --black:#171714;
  --rust:#98412c;
  --rust-dark:#71301f;
  --cobalt:#184b9a;
  --marker:#e4ec35;
  --pencil:#786f63;
  --rule:rgba(60,52,43,.28);
  --rule-strong:rgba(37,35,31,.72);
  --display:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,serif;
  --sans:"Bahnschrift","Aptos","Trebuchet MS",sans-serif;
  --mono:"Cascadia Mono","IBM Plex Mono","Lucida Console",Consolas,monospace;
}

*{border-radius:0!important}
html{background:var(--paper);scroll-padding-top:68px}
body{
  position:relative;
  color:var(--graphite);
  background-color:var(--paper);
  background-image:
    linear-gradient(90deg,transparent calc(20% - 1px),rgba(152,65,44,.11) 20%,transparent calc(20% + 1px)),
    linear-gradient(90deg,transparent calc(40% - 1px),rgba(152,65,44,.08) 40%,transparent calc(40% + 1px)),
    linear-gradient(90deg,transparent calc(60% - 1px),rgba(152,65,44,.08) 60%,transparent calc(60% + 1px)),
    linear-gradient(90deg,transparent calc(80% - 1px),rgba(152,65,44,.11) 80%,transparent calc(80% + 1px));
  font-family:var(--sans);
  line-height:1.62;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:1000;
  pointer-events:none;
  opacity:.14;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}
a{color:var(--cobalt);text-underline-offset:4px}
a:hover{text-decoration-thickness:1px}
h1,h2,h3,h4{
  color:var(--graphite);
  font-family:var(--display);
  font-weight:500;
  letter-spacing:-.025em;
}
.wrap{max-width:1240px;padding:0 30px}
.eyebrow{
  width:max-content;
  margin-bottom:16px;
  padding:5px 10px 4px;
  background:var(--rust);
  color:var(--paper-hi)!important;
  font-family:var(--mono);
  font-size:.69rem;
  font-weight:700;
  letter-spacing:.14em;
  line-height:1.35;
}

nav{
  background:var(--black);
  border-bottom:1px solid #000;
  backdrop-filter:none;
}
nav .wrap{
  max-width:none;
  height:66px;
  padding:0 30px;
  border-left:1px solid rgba(255,255,255,.14);
  border-right:1px solid rgba(255,255,255,.14);
}
.brand{
  color:var(--paper-hi);
  font-family:var(--sans);
  font-size:1.24rem;
  font-weight:700;
  letter-spacing:.01em;
}
.brand b{color:var(--paper-hi)}
.navlinks{height:100%;display:flex;align-items:center}
.navlinks a{
  height:100%;
  display:flex;
  align-items:center;
  margin:0;
  padding:0 15px;
  border-left:1px solid rgba(255,255,255,.1);
  color:#d7d0c4;
  font-family:var(--mono);
  font-size:.69rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.navlinks a:last-child{border-right:1px solid rgba(255,255,255,.1)}
.navlinks a:hover{background:var(--rust);color:#fff}

.hero{
  position:relative;
  color:var(--graphite);
  overflow:visible;
  border-bottom:1px solid var(--rule-strong);
  background:transparent;
}
.hero::before{
  content:"A–E  /  01–05";
  position:absolute;
  top:18px;
  left:20px;
  color:var(--rust);
  font-family:var(--mono);
  font-size:.65rem;
  letter-spacing:.1em;
  writing-mode:vertical-rl;
}
.hero .wrap{
  grid-template-columns:.88fr 1.12fr;
  gap:0;
  min-height:620px;
  padding-top:42px;
  padding-bottom:42px;
  align-items:stretch;
}
.hero .wrap>div:first-child{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:36px 42px 36px 0;
  border-right:1px solid var(--rule-strong);
  background:rgba(247,243,234,.55);
}
.hero h1{
  max-width:10ch;
  margin:.02em 0 .36em;
  color:var(--graphite);
  font-size:clamp(3rem,5.2vw,5.7rem);
  line-height:.91;
  letter-spacing:-.055em;
}
.hero p.lead{
  max-width:44ch;
  margin:0 0 1.5em;
  color:#4a453e;
  font-family:var(--display);
  font-size:1.16rem;
  line-height:1.45;
}
.hero .pill{
  margin:0 14px 9px 0;
  padding:0 0 3px;
  border:0;
  border-bottom:1px solid var(--cobalt);
  background:transparent;
  color:var(--cobalt);
  font-family:var(--mono);
  font-size:.67rem;
  font-weight:700;
  letter-spacing:.035em;
}
.hero .authors{
  max-width:52ch;
  margin-top:13px;
  color:var(--pencil);
  font-family:var(--mono);
  font-size:.7rem;
  line-height:1.55;
}
.cta{
  width:max-content;
  margin-top:24px;
  padding:10px 16px 9px;
  border:0;
  border-bottom:3px solid var(--rust-dark);
  background:var(--rust);
  color:#fff;
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.cta:hover{background:var(--rust-dark);color:#fff}
.heroimg{
  position:relative;
  min-height:536px;
  overflow:visible;
  border:0;
  background:#cbc3b5;
  box-shadow:none;
}
.heroimg::before{
  content:"";
  position:absolute;
  z-index:3;
  top:-9px;
  right:10%;
  width:76px;
  height:22px;
  background:rgba(220,211,191,.82);
  box-shadow:0 1px 1px rgba(0,0,0,.09);
  transform:rotate(1.8deg);
}
.heroimg::after{
  content:"ITER. 05\A SITE + MODEL CONTEXT\A DESIGNER GATE: ACTIVE\A RHINO / MCP";
  white-space:pre;
  position:absolute;
  z-index:2;
  right:-14px;
  bottom:24px;
  width:210px;
  padding:18px 20px;
  border:1px solid rgba(24,75,154,.38);
  background:rgba(241,237,225,.84);
  color:var(--cobalt);
  font-family:var(--mono);
  font-size:.66rem;
  font-weight:700;
  line-height:1.7;
  box-shadow:3px 5px 0 rgba(37,35,31,.12);
  transform:rotate(-2.2deg);
}
.heroimg img{
  width:100%;
  height:100%;
  min-height:536px;
  object-fit:cover;
  filter:grayscale(.78) sepia(.13) contrast(.94);
}

section{
  position:relative;
  padding:78px 0;
  border-bottom:1px solid var(--rule-strong);
  background:rgba(238,233,222,.86);
}
section .wrap{
  position:relative;
  padding-top:8px;
  padding-bottom:8px;
  border-left:1px solid var(--rule);
  border-right:1px solid var(--rule);
}
section .wrap::before{
  content:"";
  position:absolute;
  top:-78px;
  bottom:-78px;
  left:20%;
  border-left:1px solid rgba(152,65,44,.1);
}
h2.title{
  max-width:900px;
  margin:0 0 .34em;
  color:var(--graphite);
  font-size:clamp(2.25rem,4.2vw,4.7rem);
  line-height:.99;
  letter-spacing:-.045em;
}
.lead2{
  position:relative;
  z-index:1;
  max-width:78ch;
  margin:22px 0 0 20%;
  padding:22px 0 4px 28px;
  border-left:4px solid var(--rust);
  color:#3d3933;
  font-family:var(--display);
  font-size:1.15rem;
  line-height:1.6;
}
.sub{
  max-width:76ch;
  margin:0 0 34px 20%;
  padding-left:28px;
  color:#625b51;
  font-family:var(--display);
  font-size:1.01rem;
}

#mechanism{
  color:#ddd5c8;
  background:var(--black);
}
#mechanism .wrap{border-color:rgba(238,233,222,.16)}
#mechanism .wrap::before{border-color:rgba(238,233,222,.1)}
#mechanism h2,#mechanism h3,#mechanism h4{color:var(--paper-hi)}
#mechanism .sub{color:#aaa195}
.flow{
  position:relative;
  grid-template-columns:1fr 44px 1.08fr 44px 1fr;
  gap:0;
  margin:12px 0 36px;
  border:1px solid rgba(238,233,222,.32);
  background:#211f1b;
}
.flow .col{
  min-height:248px;
  padding:22px;
  border:0;
  background:transparent;
  box-shadow:none;
}
.flow .col h4{
  margin:0 0 16px;
  padding-bottom:9px;
  border-bottom:1px solid rgba(238,233,222,.25);
  font-family:var(--mono);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.flow .chip{
  margin:0;
  padding:11px 0;
  border-bottom:1px dotted rgba(238,233,222,.2);
  background:transparent;
  color:#c9c1b5;
  font-family:var(--mono);
  font-size:.71rem;
  line-height:1.5;
}
.flow .engine{
  border-left:1px solid var(--rust);
  border-right:1px solid var(--rust);
  background:var(--rust);
}
.flow .engine .chip{background:transparent;color:#fff;border-color:rgba(255,255,255,.32)}
.arrow{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--marker);
  font-family:var(--mono);
}
.loop{gap:0;border-top:1px solid rgba(238,233,222,.28);border-bottom:1px solid rgba(238,233,222,.28)}
.loop .node{
  flex:1;
  min-width:150px;
  padding:13px 14px;
  border:0;
  border-right:1px solid rgba(238,233,222,.22);
  background:transparent;
  color:#d8d0c4;
  font-family:var(--mono);
  font-size:.7rem;
  font-weight:500;
  text-align:center;
}
.loop .a{padding:10px 2px;color:var(--marker);font-family:var(--mono)}

.grid{gap:0}
.card{
  position:relative;
  padding:22px;
  border:1px solid var(--rule);
  background:rgba(247,243,234,.56);
  box-shadow:none;
}
.card h3{color:var(--graphite);font-family:var(--sans);font-size:1rem;font-weight:700;letter-spacing:-.01em}
.card p{color:#655e54;font-family:var(--display);font-size:.93rem;line-height:1.5}
.card .num{
  width:auto;
  height:auto;
  margin:0 0 24px;
  padding:0;
  background:transparent;
  color:var(--rust);
  font-family:var(--mono);
  font-size:1rem;
}
.card .num::before{content:"0"}
.g5 .card{border-right:0}
.g5 .card:last-child{border-right:1px solid var(--rule)}
.g3 .card{border-right:0}
.g3 .card:last-child{border-right:1px solid var(--rule)}

.ladder{
  overflow:hidden;
  border:1px solid var(--rule-strong);
  background:rgba(247,243,234,.64);
  box-shadow:none;
}
.ladder .row{grid-template-columns:104px 1fr;border-color:var(--rule)}
.ladder .t{
  justify-content:center;
  padding:16px;
  border-right:1px solid var(--rule);
  background:transparent;
  color:var(--rust);
  font-family:var(--mono);
  font-size:.77rem;
}
.ladder .d{
  padding:16px 20px;
  color:#4e4942;
  font-family:var(--mono);
  font-size:.73rem;
}
.ladder .row.hl .t{background:var(--rust);color:#fff}
.ladder .row.hl .d{background:rgba(228,236,53,.38)}

#results{background:rgba(221,213,199,.91)}
.concept .card{min-height:190px}
.concept .card:nth-child(2),.concept .card:nth-child(4){background:var(--cobalt)}
.concept .card:nth-child(2) h3,.concept .card:nth-child(2) p,.concept .card:nth-child(2) .seats,
.concept .card:nth-child(4) h3,.concept .card:nth-child(4) p,.concept .card:nth-child(4) .seats{color:#fff}
.concept .tag{
  margin:0 0 22px;
  padding:0;
  border-bottom:2px solid currentColor;
  background:transparent;
  color:var(--rust);
  font-family:var(--mono);
  font-size:.9rem;
}
.concept .card:nth-child(2) .tag,.concept .card:nth-child(4) .tag{color:var(--marker)}
.concept .seats{color:var(--cobalt);font-family:var(--mono);font-size:.7rem}
.gallery{grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--rule-strong);border-left:1px solid var(--rule)}
.shot{border:0;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--paper-hi);box-shadow:none}
.shot img{
  height:240px;
  padding:12px;
  background:#d4cbbb;
  filter:grayscale(.35) contrast(.98);
}
.shot .cap{
  min-height:52px;
  padding:10px 12px;
  border-color:var(--rule);
  color:#635c52;
  font-family:var(--mono);
  font-size:.64rem;
  line-height:1.5;
}

.exp{
  overflow:visible;
  margin:0;
  border:0;
  border-top:1px solid var(--rule-strong);
  background:rgba(247,243,234,.5);
  box-shadow:none;
}
.exp:last-child{border-bottom:1px solid var(--rule-strong)}
.exp .head{
  display:grid;
  grid-template-columns:150px minmax(0,1fr) auto;
  gap:22px;
  min-height:146px;
  padding:18px 0;
  border:0;
}
.exp .head img{
  width:150px;
  height:108px;
  border:1px solid var(--rule);
  object-fit:cover;
  filter:grayscale(.8) sepia(.12);
}
.exp .head .wk{color:var(--rust);font-family:var(--mono);font-size:.69rem}
.exp .head h3{color:var(--graphite);font-family:var(--display);font-size:1.45rem;font-weight:500}
.exp .head p{color:#6c645a;font-family:var(--mono);font-size:.67rem}
.exp .btns{justify-content:flex-end}
.btn{
  padding:9px 14px;
  border:1px solid var(--cobalt);
  color:var(--cobalt);
  font-family:var(--mono);
  font-size:.67rem;
  letter-spacing:.045em;
  text-transform:uppercase;
}
.btn.primary{background:var(--cobalt);color:#fff}
.btn.ghost{background:transparent;color:var(--cobalt)}
.framewrap iframe{height:720px;border:1px solid var(--rule-strong);background:#fff}
.placeholder{border:1px solid var(--rule);background:var(--linen);color:#696156;font-family:var(--mono)}

#downloads{color:#ddd5c8;background:var(--black)}
#downloads .wrap{border-color:rgba(238,233,222,.16)}
#downloads .wrap::before{border-color:rgba(238,233,222,.1)}
#downloads h2{color:var(--paper-hi)}
.dl{gap:0;border:1px solid rgba(238,233,222,.3)}
.dlcard{
  min-height:116px;
  padding:20px;
  border:0;
  border-right:1px solid rgba(238,233,222,.3);
  background:transparent;
  box-shadow:none;
}
.dlcard:last-child{border-right:0}
.dlcard:hover{background:var(--rust);border-color:rgba(238,233,222,.3);text-decoration:none}
.dlcard .ic{
  border:1px solid rgba(238,233,222,.3);
  background:transparent;
  color:var(--marker);
}
.dlcard b{color:var(--paper-hi);font-family:var(--display);font-size:1.05rem;font-weight:500}
.dlcard small{color:#aaa195;font-family:var(--mono);font-size:.63rem}
.dlcard:hover small{color:#f1e8da}

footer{
  padding:38px 0;
  border:0;
  background:var(--rust);
  color:#f4eadc;
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.04em;
  line-height:1.7;
}
footer b{color:#fff;font-family:var(--sans);font-size:.86rem}

@media(max-width:900px){
  body{background-image:none}
  .wrap{padding-left:22px;padding-right:22px}
  .hero .wrap{grid-template-columns:1fr;min-height:auto;padding-top:24px;padding-bottom:24px}
  .hero .wrap>div:first-child{padding:32px 0;border-right:0;border-bottom:1px solid var(--rule-strong)}
  .hero h1{max-width:12ch}
  .heroimg{min-height:440px}
  .heroimg img{min-height:440px}
  section .wrap::before{display:none}
  .lead2,.sub{margin-left:0;padding-left:20px}
  .flow{grid-template-columns:1fr}
  .flow .col{min-height:0}
  .flow .engine{border:0;border-top:1px solid var(--rust);border-bottom:1px solid var(--rust)}
  .flow .arrow{padding:4px;transform:rotate(90deg)}
  .g5{grid-template-columns:repeat(2,1fr)}
  .g5 .card{border-right:1px solid var(--rule)}
  .g3{grid-template-columns:1fr}
  .g3 .card{border-right:1px solid var(--rule)}
  .gallery{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:740px){
  nav .wrap{height:58px;padding:0 18px}
  .navlinks{display:none}
  .hero::before{display:none}
  .hero h1{font-size:3.2rem}
  .heroimg,.heroimg img{min-height:360px}
  .heroimg::after{right:-4px;bottom:12px;width:175px;padding:12px;font-size:.57rem}
  section{padding:58px 0}
  section .wrap{border:0}
  h2.title{font-size:2.55rem}
  .lead2{font-size:1.05rem}
  .loop{display:block}
  .loop .node{display:block;border:0;border-bottom:1px solid rgba(238,233,222,.18)}
  .loop .a{display:none}
  .g5{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .shot img{height:auto;max-height:320px}
  .exp .head{grid-template-columns:88px 1fr;gap:14px}
  .exp .head img{width:88px;height:88px}
  .exp .btns{grid-column:1/-1;justify-content:flex-start;padding-left:102px}
  .dl{grid-template-columns:1fr}
  .dlcard{border-right:0;border-bottom:1px solid rgba(238,233,222,.3)}
  .dlcard:last-child{border-bottom:0}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}