#architecture{container:architecture / inline-size;--font-head:var(--font-display);--text:var(--muted);--white:var(--paper);font:400 14px/1.7 var(--font-body);color:var(--ink)}
#architecture .block{font-family: var(--font-body); background: var(--paper); color: var(--ink);}
#architecture .block h2{font: 400 clamp(29px,4.1vw,62px)/1.13 var(--font-head); letter-spacing: -0.045em;}
#architecture .block h3{font: 400 29px/1.18 var(--font-head); letter-spacing: -0.025em;}
#architecture .block p{line-height: 1.85; font-size: 12px; color: var(--text);}
#architecture .block .kicker{font-weight: 600; letter-spacing: 0.19em; text-transform: uppercase; font-size: 10px; color: var(--text);}
#architecture .block .small{font-size: 10px; color: var(--text); line-height: 1.65;}
#architecture .block .line{height: 1px; background: var(--line);}
#architecture .block .photo{overflow: hidden; position: relative; background: linear-gradient(138deg, rgb(173, 159, 140), rgb(232, 225, 214) 48%, rgb(181, 170, 154)); isolation: isolate;}
#architecture .block .photo img{object-fit: cover; transition: transform 0.7s, opacity 0.3s;}
#architecture .block .photo:hover img{transform: scale(1.025);}
#architecture .block .photo::after{content: attr(data-fallback); position: absolute; left: 18px; bottom: 13px; font-size: 9px; letter-spacing: 0.11em; color: rgb(255, 255, 255); opacity: 0; pointer-events: none;}
#architecture .block .photo.failed::after{opacity: 0.75;}
#architecture .block .photo.failed img{opacity: 0;}
#architecture .block .photo .photo-caption{position: absolute; bottom: 0px; left: 0px; right: 0px; z-index: 1; background: linear-gradient(0deg, rgba(0, 0, 0, 0.62), transparent); color: rgb(255, 255, 255); padding: 42px 22px 17px; display: flex; justify-content: space-between; align-items: end; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;}
#architecture .block .tagline{font: 400 20px/1.45 var(--font-head);}
#architecture .block .arrow{font: 400 21px / 1 Georgia, serif;}
#architecture .block .mock-link{display: inline-flex; align-items: center; gap: 22px; border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor; padding: 9px 0px 11px; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; background: none; color: inherit; white-space: nowrap;}
#architecture .block .number{font: 400 35px/1 var(--font-head);}
#architecture .b1{padding: 66px 6.3% 55px;}
#architecture .b1-title{display: flex; justify-content: space-between; gap: 48px; align-items: start; margin-bottom: 37px;}
#architecture .b1-title h2{margin: 14px 0px 15px; max-width: 650px;}
#architecture .b1-title > p{max-width: 290px; padding-top: 36px;}
#architecture .b1-grid{display: grid; grid-template-columns: 1fr 1.48fr; gap: 44px; min-height: 470px;}
#architecture .b1-copy{display: flex; flex-direction: column; justify-content: space-between;}
#architecture .b1-copy .quote{font: 400 27px/1.4 var(--font-head); letter-spacing: -0.025em; max-width: 350px;}
#architecture .b1-facts{border-top: 1px solid var(--line);}
#architecture .b1-fact{display: grid; grid-template-columns: 112px 1fr; gap: 8px; padding: 14px 0px; border-bottom: 1px solid var(--line);}
#architecture .b1-fact b{font-weight: 500; font-size: 11px;}
#architecture .b1-fact span{font-size: 11px; color: var(--text);}
#architecture .b1-photos{display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 10px; min-height: 470px;}
#architecture .b1-photos .photo:nth-child(1){height: 86%; align-self: end;}
#architecture .b1-photos .photo:nth-child(2){height: 100%;}
#architecture .b1-foot{display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); margin-top: 22px; padding-top: 17px; gap: 12px;}
#architecture .b1-foot span{font-size: 10px; color: var(--text);}
#architecture .b2{background: var(--white); padding: 33px 3.3% 49px;}
#architecture .b2-overline{display: flex; justify-content: space-between; font-size: 10px; color: var(--text); letter-spacing: 0.16em; text-transform: uppercase; margin: 0px 1% 24px;}
#architecture .b2-hero{min-height: 570px; position: relative; background: rgb(105, 98, 89); overflow: hidden;}
#architecture .b2-hero .photo{position: absolute; inset: 0px; background: rgb(79, 80, 76);}
#architecture .b2-hero .photo img{filter: brightness(0.77);}
#architecture .b2-hero .veil{position: absolute; inset: 0px; background: linear-gradient(90deg, rgba(18, 22, 24, 0.7), rgba(18, 22, 24, 0.05) 72%), linear-gradient(0deg, rgba(18, 22, 24, 0.5), transparent 45%);}
#architecture .b2-hero-content{position: absolute; left: 6%; right: 5%; bottom: 54px; display: flex; justify-content: space-between; align-items: end; gap: 24px; color: rgb(255, 255, 255);}
#architecture .b2-hero h2{max-width: 640px; color: rgb(255, 255, 255); font-size: clamp(40px, 5vw, 76px);}
#architecture .b2-hero .kicker{color: rgb(222, 219, 212); margin-bottom: 18px;}
#architecture .b2-hero-content p{color: rgb(233, 230, 223); font-size: 12px; max-width: 215px; padding-bottom: 8px;}
#architecture .b2-stats{display: grid; grid-template-columns: repeat(3, 1fr); gap: 0px; margin-top: 0px; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-top: 0px;}
#architecture .b2-stat{padding: 24px 28px 22px; border-right: 1px solid var(--line); min-height: 147px;}
#architecture .b2-stat:last-child{border-right: 0px;}
#architecture .b2-stat .kicker{margin-bottom: 15px;}
#architecture .b2-stat h3{font-size: 21px; margin-bottom: 8px;}
#architecture .b2-stat p{font-size: 11px;}
#architecture .b3{padding: 68px 6%; background: var(--paper);}
#architecture .b3-topline{display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 12px; margin-bottom: 44px;}
#architecture .b3-main{display: grid; grid-template-columns: 0.85fr 1.18fr 0.85fr; align-items: start; gap: 22px;}
#architecture .b3-copy{padding-top: 12px;}
#architecture .b3-copy h2{font-size: clamp(37px, 4.5vw, 66px); margin: 23px 0px 22px;}
#architecture .b3-copy > p{max-width: 250px;}
#architecture .b3-portrait{height: 560px;}
#architecture .b3-side{padding-top: 90px;}
#architecture .b3-side > .photo{height: 240px; margin-bottom: 20px;}
#architecture .b3-side .sidenum{color: rgb(170, 157, 143); margin-bottom: 6px; font-size: 10px; letter-spacing: 0.16em;}
#architecture .b3-side h3{font-size: 27px; margin-bottom: 12px;}
#architecture .b3-side p{max-width: 245px;}
#architecture .b3-bottom{margin-top: 35px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px;}
#architecture .b3-bottom .b3-mini span{font: 400 10px var(--font-body); letter-spacing: 0.14em; color: rgb(140, 129, 118);}
#architecture .b3-bottom .b3-mini strong{display: block; margin-top: 10px; font-weight: 500; line-height: 1.5; font-size: 11px;}
#architecture .b3-bottom .b3-mini:not(:last-child){border-right: 1px solid var(--line); padding-right: 10px;}
#architecture .b4{background: var(--surface); padding: 55px 5.4%;}
#architecture .b4-top{display: grid; grid-template-columns: 0.93fr 1fr; gap: 40px; align-items: end;}
#architecture .b4-top h2{margin: 14px 0px 28px; font-size: clamp(41px, 4.4vw, 66px); max-width: 550px;}
#architecture .b4-top p{max-width: 410px;}
#architecture .b4-heading-side{padding-bottom: 8px;}
#architecture .b4-subline{display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 17px; margin-top: 43px;}
#architecture .b4-subline span{font-size: 10px; letter-spacing: 0.1em;}
#architecture .b4-gallery{display: grid; grid-template-columns: 1.55fr 0.67fr; gap: 13px; height: 400px; margin-top: 36px;}
#architecture .b4-gallery .photo:last-child{height: 82%; align-self: end;}
#architecture .b4-materials{display: grid; grid-template-columns: 1.05fr repeat(3, 1fr); border-top: 1px solid var(--line); margin-top: 27px; padding-top: 24px; gap: 16px;}
#architecture .b4-materials .intro{padding-right: 10px;}
#architecture .b4-materials .intro h3{font-size: 24px; margin-top: 10px;}
#architecture .b4-materials .mat .tile{height: 83px; width: 100%; margin-bottom: 10px;}
#architecture .tile-stone{background: linear-gradient(123deg, transparent 22%, rgba(191, 176, 158, 0.5) 23%, transparent 25%, transparent 45%, rgba(200, 183, 164, 0.5) 46%, transparent 49%), repeating-linear-gradient(7deg, rgb(210, 200, 184) 0px, rgb(238, 230, 216) 3px, rgb(189, 177, 162) 5px, rgb(227, 219, 208) 11px);}
#architecture .tile-wood{background: repeating-linear-gradient(89deg, rgb(101, 81, 67) 0px, rgb(158, 123, 93) 3px, rgb(143, 112, 85) 6px, rgb(90, 69, 57) 16px, rgb(170, 136, 104) 25px);}
#architecture .tile-metal{background: linear-gradient(110deg, rgb(124, 118, 112), rgb(210, 196, 174) 24%, rgb(171, 161, 149) 48%, rgb(208, 196, 181) 65%, rgb(138, 129, 119));}
#architecture .b4-materials .mat strong{display: block; font-size: 11px; font-weight: 600;}
#architecture .b4-materials .mat span{font-size: 10px; color: var(--text);}
#architecture .b5{padding: 58px 5.3% 65px; background: var(--paper);}
#architecture .b5-head{display: flex; justify-content: space-between; align-items: end; gap: 25px; margin-bottom: 35px;}
#architecture .b5-head h2{max-width: 590px; margin-top: 14px;}
#architecture .b5-head p{max-width: 275px;}
#architecture .b5-tabs{display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 24px;}
#architecture .b5-tabs button{background: none; border-width: 0px 1px 0px 0px; border-style: none solid none none; border-color: currentcolor rgb(222, 216, 208) currentcolor currentcolor; border-image: none; text-align: left; padding: 18px 14px 16px; color: var(--text); font-size: 11px; line-height: 1.3; position: relative;}
#architecture .b5-tabs button:last-child{border-right: 0px;}
#architecture .b5-tabs button::before{content: attr(data-index); display: block; font-size: 9px; letter-spacing: 0.1em; color: rgb(156, 144, 132); margin-bottom: 8px;}
#architecture .b5-tabs button.active{color: var(--ink); background: var(--surface);}
#architecture .b5-tabs button.active::after{content: ""; position: absolute; bottom: -1px; left: 0px; right: 0px; height: 2px; background: var(--ink);}
#architecture .b5-content{display: grid; grid-template-columns: 1.58fr 0.85fr; gap: 0px; min-height: 480px;}
#architecture .b5-image{height: 480px;}
#architecture .b5-detail{display: flex; flex-direction: column; justify-content: space-between; padding: 37px 8% 30px; background: var(--surface);}
#architecture .b5-detail h3{font-size: clamp(28px, 2.9vw, 40px); margin: 18px 0px 15px;}
#architecture .b5-detail p{font-size: 12px; max-width: 290px;}
#architecture .b5-detail .numtop{font: 400 58px/1 var(--font-head); color: rgb(188, 176, 164);}
#architecture .b5-detail .bottom-note{border-top: 1px solid var(--line); padding-top: 14px; display: flex; justify-content: space-between; gap: 12px; align-items: center;}
#architecture .b5-detail .bottom-note span{font-size: 10px; color: var(--text);}
#architecture .b5-detail .mock-link{padding-bottom: 7px;}
#architecture .b5-content .photo{height: 100%;}
@container architecture (max-width: 750px){#architecture .block h2{font-size: clamp(31px, 6.8cqw, 51px);}
#architecture .b1{padding: 36px 24px;}
#architecture .b1-title{display: block; margin-bottom: 26px;}
#architecture .b1-title > p{padding-top: 8px;}
#architecture .b1-grid{grid-template-columns: 1fr; gap: 22px;}
#architecture .b1-copy{display: contents;}
#architecture .b1-copy .quote{order: 1; font-size: 24px;}
#architecture .b1-facts{order: 3;}
#architecture .b1-photos{order: 2; min-height: 340px; height: 360px;}
#architecture .b1-foot{flex-wrap: wrap;}
#architecture .b2{padding: 20px 14px 28px;}
#architecture .b2-overline{gap: 15px;}
#architecture .b2-hero{min-height: 520px;}
#architecture .b2-hero-content{display: block; bottom: 32px; left: 8%; right: 8%;}
#architecture .b2-hero h2{font-size: clamp(36px, 7cqw, 55px);}
#architecture .b2-hero-content p{margin-top: 18px;}
#architecture .b2-stats{grid-template-columns: 1fr;}
#architecture .b2-stat{min-height: 0px; border-right: 0px; border-bottom: 1px solid var(--line); padding: 20px;}
#architecture .b2-stat:last-child{border-bottom: 0px;}
#architecture .b2-stat h3{font-size: 20px;}
#architecture .b3{padding: 34px 24px;}
#architecture .b3-topline{margin-bottom: 22px;}
#architecture .b3-main{grid-template-columns: 1fr; gap: 19px;}
#architecture .b3-copy h2{margin: 13px 0px 18px;}
#architecture .b3-copy > p{max-width: 420px; margin-bottom: 6px;}
#architecture .b3-portrait{height: 430px;}
#architecture .b3-side{display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding-top: 0px;}
#architecture .b3-side > .photo{height: 220px;}
#architecture .b3-side h3{font-size: 23px;}
#architecture .b3-bottom{grid-template-columns: repeat(2, 1fr); row-gap: 22px;}
#architecture .b3-bottom .b3-mini:nth-child(2n){border-right: 0px;}
#architecture .b4{padding: 33px 24px;}
#architecture .b4-top{grid-template-columns: 1fr; gap: 10px;}
#architecture .b4-top h2{margin: 14px 0px 16px;}
#architecture .b4-subline{margin-top: 22px;}
#architecture .b4-gallery{height: 330px; gap: 7px; margin-top: 24px;}
#architecture .b4-materials{grid-template-columns: repeat(3, 1fr);}
#architecture .b4-materials .intro{grid-column: 1 / -1;}
#architecture .b4-materials .mat .tile{height: 70px;}
#architecture .b5{padding: 36px 20px 40px;}
#architecture .b5-head{display: block;}
#architecture .b5-head p{margin-top: 15px;}
#architecture .b5-tabs{display: flex; overflow: auto;}
#architecture .b5-tabs button{min-width: 150px; flex: 0 0 auto;}
#architecture .b5-content{grid-template-columns: 1fr;}
#architecture .b5-image{height: 390px;}
#architecture .b5-detail{min-height: 320px; padding: 25px;}
#architecture .b5-detail h3{font-size: 32px;}
}
@container architecture (max-width: 440px){#architecture .block h2{font-size: 36px;}
#architecture .b1{padding: 30px 19px;}
#architecture .b1-title h2{font-size: 35px;}
#architecture .b1-title > p{font-size: 11px;}
#architecture .b1-photos{height: 300px; min-height: 300px;}
#architecture .b1-photos .photo-caption{font-size: 9px; padding: 32px 8px 10px;}
#architecture .b1-fact{grid-template-columns: 90px 1fr;}
#architecture .b2-hero{min-height: 450px;}
#architecture .b2-hero h2{font-size: 40px;}
#architecture .b2-overline{font-size: 9px;}
#architecture .b3{padding: 28px 18px;}
#architecture .b3-portrait{height: 360px;}
#architecture .b3-side{grid-template-columns: 1fr; gap: 4px;}
#architecture .b3-side > .photo{height: 180px; margin-bottom: 0px;}
#architecture .b3-side .sidenum{margin-top: 15px;}
#architecture .b3-bottom .b3-mini strong{font-size: 10px;}
#architecture .b4{padding: 30px 18px;}
#architecture .b4-top h2{font-size: 40px;}
#architecture .b4-subline{align-items: start; gap: 20px;}
#architecture .b4-gallery{grid-template-columns: 1.4fr 0.78fr; height: 280px;}
#architecture .b4-materials{gap: 9px;}
#architecture .b4-materials .mat .tile{height: 60px;}
#architecture .b4-materials .mat strong{font-size: 10px;}
#architecture .b4-materials .mat span{font-size: 9px;}
#architecture .b5{padding: 30px 16px 38px;}
#architecture .b5-head h2{font-size: 35px;}
#architecture .b5-image{height: 310px;}
#architecture .b5-detail{min-height: 320px;}
}

#architecture .photo-rail{display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 10px 0px 0px;}
#architecture .rail-item{height: 170px; position: relative; overflow: hidden;}
#architecture .rail-item img,#architecture .chapter-thumb img{width: 100%; height: 100%; object-fit: cover;}
#architecture .rail-item span,#architecture .chapter-thumb span{position: absolute; bottom: 0px; left: 0px; right: 0px; color: rgb(255, 255, 255); font: 600 10px Manrope, Arial, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; padding: 26px 14px 11px; background: linear-gradient(transparent, rgba(26, 26, 26, 0.61));}
#architecture .chapters-preview{display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px;}
#architecture .chapter-thumb{position: relative; height: 105px; overflow: hidden;}
@container architecture (max-width: 600px){#architecture .photo-rail{gap: 5px;}
#architecture .rail-item{height: 95px;}
#architecture .chapters-preview{grid-template-columns: repeat(2, 1fr);}
#architecture .chapter-thumb{height: 90px;}
#architecture .rail-item span,#architecture .chapter-thumb span{font-size: 8px; padding: 17px 7px 7px;}
}
/* Harmonization with the approved Nightfall kit. */
#architecture img{display:block;width:100%;height:100%;object-fit:cover}
#architecture p,#architecture h2,#architecture h3{margin:0}
#architecture .block h2,#architecture .block h3{font-weight:400}
#architecture button{font-family:var(--font-body);cursor:pointer;border-radius:0;touch-action:manipulation}
#architecture button:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
#architecture .block .mock-link{min-height:44px;font-size:11px;white-space:normal;text-align:left}
#architecture .block p{font-size:13px}
#architecture .b1-fact b,#architecture .b1-fact span,#architecture .b3-mini strong{font-size:12px}
#architecture .b3-side .sidenum,#architecture .b3-bottom .b3-mini span{color:var(--muted)}
#architecture .b4-materials .mat strong,#architecture .b4-materials .mat span{font-size:12px}
#architecture .b5-tabs button{min-height:64px;font-size:12px}
#architecture .b5-tabs button:before{color:var(--muted)}
#architecture .b5-detail .numtop{color:var(--accent)}
#architecture .b5-content{align-items:start}
#architecture .b5-image{height:auto;min-width:0}
#architecture .b5-image>.photo{height:480px}
#architecture .b5-detail{min-height:480px}
#architecture .b5-tabs{overflow:visible}
#architecture .chapters-preview .chapter-thumb span,#architecture .rail-item span{font-size:10px}
#architecture .nf-architecture-dialog{width:min(760px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);overflow:auto;padding:24px;border:1px solid var(--line);border-radius:0;background:var(--paper);color:var(--ink);margin:auto}
#architecture .nf-architecture-dialog::backdrop{background:#181716d9}
#architecture .nf-architecture-dialog .detail-close{display:block;margin-left:auto;margin-bottom:12px;width:46px;height:46px;border:1px solid var(--ink);background:none;color:var(--ink);font-size:24px}
#architecture .nf-architecture-dialog img{height:45dvh;object-fit:cover}
#architecture .nf-architecture-dialog h2{font:400 30px/1.2 var(--font-display);margin:20px 0 12px}
#architecture .nf-architecture-dialog p{font-size:14px;line-height:1.8;color:var(--muted)}
html.nf-architecture-modal-open{overflow:hidden}
@container architecture (max-width:750px){
 #architecture .b5-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}
 #architecture .b5-tabs button{min-width:0;padding:13px 10px;overflow-wrap:anywhere;border-bottom:1px solid var(--line)}
 #architecture .b5-image>.photo{height:390px}
 #architecture .b5-detail{min-height:320px}
 #architecture .b5-detail p{max-width:none}
 #architecture .b1-title>p{font-size:13px}
 #architecture .b4-materials .mat strong,#architecture .b4-materials .mat span{font-size:11px}
}
@container architecture (max-width:440px){
 #architecture .b5-image>.photo{height:310px}
 #architecture .b5-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
 #architecture .b5-tabs button:last-child{grid-column:span 2}
 #architecture .b3-topline{gap:12px;flex-wrap:wrap}
 #architecture .b3-bottom .b3-mini strong{font-size:12px}
}
@media(prefers-reduced-motion:reduce){#architecture *{transition:none!important;scroll-behavior:auto!important}}