/* Madilo Architects. Every selector is prefixed with md- to avoid plugin conflicts. */
@font-face{font-family:Jost;font-weight:300;font-style:normal;font-display:swap;src:url(../fonts/jost-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:Jost;font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/jost-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Jost;font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/jost-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:500;font-style:italic;font-display:swap;src:url(../fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2")}

*,*::before,*::after{box-sizing:border-box}
html{font-size:max(10px,.8vw);-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:#000;color:#111;font-family:Jost,"Helvetica Neue",Arial,sans-serif;font-weight:300;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body :where(h1,h2,h3,p,ul,figure){margin:0;padding:0}
body :where(ul){list-style:none}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.md-skip{position:fixed;left:1rem;top:-5rem;z-index:100;background:#fff;color:#000;padding:.8rem 1.2rem;transition:top .2s}
.md-skip:focus{top:1rem}
.md-serif,.md-h1,.md-big,.md-name,.md-title,.md-entry-t{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500}
.md-cap{font-size:.95rem;letter-spacing:.2em;text-transform:uppercase;font-weight:400}

/* Sections: each one is exactly one 16:9 slice of the continuous background. */
.md-sec{position:relative;width:100%;aspect-ratio:16/9;background:var(--bg) 0 0/100% 100% no-repeat;overflow:hidden}
.md-sec+.md-sec{margin-top:-1px}
.md-s1{--bg:url(../img/bg-1.avif)}.md-s2{--bg:url(../img/bg-2.avif)}.md-s3{--bg:url(../img/bg-3.avif)}
.md-s4{--bg:url(../img/bg-4.avif)}.md-s5{--bg:url(../img/bg-5.avif)}.md-s6{--bg:url(../img/bg-6.avif)}
.md-ab{position:absolute}
.md-px{transform:translate3d(0,var(--py,0),0);will-change:transform}

/* Positions (percent of the section). */
.md-hero-copy{left:11%;top:32%;width:40%}.md-scrollcue{left:5.5%;top:80%}
.md-s3-h{left:7%;top:5%}.md-s3-sc{left:7%;top:20%;width:86%;height:72%}.md-s3-sb{left:94.4%;top:24%;width:1.4%;height:62%}
.md-s4-h{left:6%;top:7%}.md-jr-cap{left:60%;top:5%;font-size:.8rem;white-space:nowrap}
.md-s4-sc{left:6%;top:22%;width:56%;height:72%}.md-s4-sb{left:63.4%;top:26%;width:1.4%;height:62%}
.md-latest{left:68%;top:11%;width:28%;height:80%}
.md-about-copy{left:13%;top:9%;width:37%}.md-photo{left:59%;top:24%;width:20%;height:57%}
.md-contact-copy{left:20%;top:42%;width:60%}

/* Reveal on scroll: only hidden when JavaScript is running. */
.md-rv{transition:opacity 1.2s cubic-bezier(.2,.7,.2,1) var(--d,0s),translate 1.2s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
html.md-js .md-rv{opacity:0;translate:0 2.5rem}
html.md-js .md-rv.in{opacity:1;translate:0 0}

/* Navigation */
.md-nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:1.6rem 3.4vw;color:#fff;mix-blend-mode:difference}
.md-logo{font-size:1.9rem;letter-spacing:.22em;line-height:1.05;font-weight:400}
.md-logo small{display:block;font-size:.95rem;letter-spacing:.3em}
.md-navwrap{margin-left:auto;margin-right:1.9rem}
.md-menu{display:flex;gap:1.9rem;align-items:center;font-size:.95rem;letter-spacing:.14em;text-transform:uppercase}
.md-menu a{position:relative}
.md-menu a::after{content:"";position:absolute;left:0;bottom:-.3rem;height:1px;width:100%;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .5s}
.md-menu a:hover::after,.md-menu a:focus-visible::after{transform:scaleX(1)}
.md-burger{width:1.7rem;display:grid;gap:.4rem;background:none;border:0;padding:.4rem 0;cursor:pointer;color:inherit}
.md-burger i{height:1px;background:#fff;display:block;transition:transform .4s}
.md-nav.open{mix-blend-mode:normal}
.md-nav.open .md-burger i:first-child{transform:translateY(.25rem) rotate(45deg)}
.md-nav.open .md-burger i:last-child{transform:translateY(-.25rem) rotate(-45deg)}
.md-nav.open .md-navwrap{position:fixed;inset:0;margin:0;background:rgba(0,0,0,.94);display:flex;align-items:center;justify-content:center;z-index:-1}
.md-nav.open .md-menu{flex-direction:column;gap:2rem;font-size:1.6rem;font-family:"Cormorant Garamond",Georgia,serif;letter-spacing:.2em}
#md-bar{position:fixed;left:0;top:0;height:2px;width:100%;background:#fff;mix-blend-mode:difference;transform-origin:left;transform:scaleX(0);z-index:60}

/* Hero */
.md-h1{font-size:3.7rem;line-height:1.02;letter-spacing:-.02em}
.md-ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.md-ln>span{display:block;transition:translate 1.4s cubic-bezier(.2,.7,.2,1) var(--d,.15s)}
html.md-js .md-ln>span{translate:0 115%}
html.md-js .md-hero-copy.in .md-ln>span{translate:0 0}
.md-rule{width:2.4rem;height:1px;background:#111;margin:1.6rem 0 1.3rem;transition:transform 1.2s .9s cubic-bezier(.2,.7,.2,1);transform-origin:left}
html.md-js .md-rule{transform:scaleX(0)}
html.md-js .md-hero-copy.in .md-rule{transform:scaleX(1)}
.md-hero-sub{font-size:.85rem;line-height:1.8}.md-hero-sub span{letter-spacing:.14em;text-transform:none}
.md-sl{width:1px;height:3.6rem;background:#111;transform-origin:top;animation:md-sl 2.2s ease-in-out infinite;margin-top:.6rem}
@keyframes md-sl{0%{transform:scaleY(0)}55%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* Services slide: two translucent containers over the ink, the line drawing, labels with leader lines.
   Units are cqw (1% of the slide width) so everything keeps its place at any desktop width. */
/* The Services section is taller than the other 16:9 slides (100 : 66) so the whole illustration fits and is not cut at the bottom. */
.md-s2{container-type:inline-size;aspect-ratio:100/66}
.md-svc-band{left:0;top:6.64cqw;width:100%;height:9.38cqw;background:rgba(255,255,255,.33)}
.md-svc-panel{left:0;top:16.02cqw;width:100%;bottom:0;background:rgba(255,255,255,.89)}
.md-svc-craft{right:0;top:16.02cqw;width:20.9%;height:auto;pointer-events:none}
.md-svc-art{left:0;top:34cqw;width:100%;bottom:0;overflow:hidden}
.md-svc-img{display:block;width:100%;max-width:none;height:auto}
.md-svc-cap{left:5.41cqw;top:3.5cqw;font-size:.86rem;letter-spacing:.08em;line-height:1.3;text-transform:uppercase;font-weight:400;white-space:nowrap}
.md-svc-caprule{left:5.41cqw;top:6.15cqw;width:2.24cqw;height:2px;background:#333}
.md-lead{left:5.27cqw;top:7.6cqw;width:38cqw;font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:2.23rem;line-height:1.12;color:#3b3b3b}
.md-lead em{font-style:italic}
.md-svc-col{top:18.7cqw}
.md-svc-c1{left:3.97cqw}.md-svc-c2{left:33.7cqw}
.md-svc-col h2{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:1.95rem;letter-spacing:.22em;line-height:1}
.md-svc-rule{display:block;width:1.5cqw;height:2px;background:#333;margin:.85rem 0 1.5rem}
.md-tags{font-size:.77rem;letter-spacing:.26em;text-transform:uppercase;font-weight:500;color:#222;line-height:1;margin-bottom:1.3rem;white-space:nowrap}
.md-tl{display:block;font-size:.68rem;letter-spacing:.12em;line-height:1.22rem;text-transform:uppercase;color:#777;white-space:nowrap}
.md-tl b{font-weight:500;color:#222}
.md-tl i{font-style:normal;margin:0 .5em}
.md-svc-vl{left:31.4cqw;top:18.9cqw;width:1px;height:9.1cqw;background:#555}
.md-labs{position:absolute;inset:0;pointer-events:none}
.md-lab{position:absolute;left:calc(var(--x)*1cqw);top:calc(var(--y)*1cqw);padding-left:.87cqw;white-space:nowrap;color:#333}
.md-lab strong{display:block;font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#111;line-height:1.26rem}
.md-lab span{display:block;font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:.98rem;line-height:1.13rem}
.md-lab::before{content:"";position:absolute;left:0;top:0;width:5px;height:calc(var(--h1)*1cqw);background:linear-gradient(#222,#222) 0 0/5px 1px no-repeat,linear-gradient(#222,#222) 0 0/1px 100% no-repeat}
.md-lab::after{content:"";position:absolute;left:calc(var(--x2)*1cqw - 3px);top:calc(var(--d)*1cqw);width:7px;height:calc(var(--h2)*1cqw);background:radial-gradient(circle,#111 2.4px,transparent 3px) 0 0/7px 7px no-repeat,linear-gradient(#222,#222) 3px 0/1px 100% no-repeat}
.md-lab-1{--x:3.61;--y:29.73;--h1:10.39;--x2:2.02;--d:3.86;--h2:8.62}
.md-lab-2{--x:16.23;--y:30.81;--h1:11.76;--x2:0.0;--d:3.72;--h2:0.51}
.md-lab-3{--x:30.16;--y:31.82;--h1:10.75;--x2:1.3;--d:3.79;--h2:6.96}
.md-lab-4{--x:45.24;--y:31.89;--h1:10.68;--x2:3.61;--d:3.72;--h2:9.13}
.md-lab-5{--x:58.59;--y:32.03;--h1:10.68;--x2:0.79;--d:4.87;--h2:6.39}
.md-lab-6{--x:75.32;--y:33.98;--h1:10.17;--x2:1.3;--d:3.72;--h2:5.59}
.md-lab-7{--x:89.75;--y:36.72;--h1:6.71;--x2:1.15;--d:3.79;--h2:3.5}

/* Shared headings, scrolling lists and the custom scrollbar */
.md-big{font-size:3.4rem;letter-spacing:-.01em}
.md-sc{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-webkit-mask-image:linear-gradient(transparent 0,#000 7%,#000 90%,transparent 100%);mask-image:linear-gradient(transparent 0,#000 7%,#000 90%,transparent 100%)}
.md-sc::-webkit-scrollbar{display:none}
.md-sb{z-index:5;cursor:pointer}
.md-sb .md-tr{position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(0,0,0,.16)}
.md-sb .md-tm{position:absolute;left:50%;top:0;width:3px;margin-left:-1.5px;background:#111;border-radius:3px;opacity:.5;transition:opacity .4s,width .3s,margin .3s;cursor:grab}
.md-sb .md-tm::before{content:"";position:absolute;top:-.65rem;left:50%;width:.5rem;height:.5rem;margin-left:-.25rem;border:1px solid #111;border-radius:50%;background:#f4f4f4}
.md-sb:hover .md-tm,.md-sb.on .md-tm{opacity:1;width:5px;margin-left:-2.5px}
.md-sb .md-ct{position:absolute;top:100%;left:50%;translate:-50% .9rem;font-size:.7rem;letter-spacing:.16em;white-space:nowrap;opacity:.65}

/* Projects */
.md-rows{display:grid;gap:.55rem;padding:1.1rem 1.4rem 3rem 0}
.md-row{display:grid;grid-template-columns:8rem 17rem 1fr 4rem 2rem;align-items:center;gap:1.4rem;padding:.4rem .6rem .4rem 0;border-top:1px solid #222;background:rgba(255,255,255,.62);transition:background .5s,padding .5s,opacity 1.2s cubic-bezier(.2,.7,.2,1) var(--d,0s),translate 1.2s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
a.md-row:hover{background:rgba(255,255,255,.95);padding-left:.8rem}
.md-th{display:block;height:4.4rem;position:relative;overflow:hidden;background:#3a2417}
.md-th img{width:100%;height:100%;object-fit:cover}
.md-th-ph{display:block;position:absolute;inset:0;background:linear-gradient(135deg,#9b6a45,#3a2417)}
.md-th-ph::after{content:"";position:absolute;left:30%;top:14%;width:34%;height:72%;background:linear-gradient(#e9c58e,#7d4c2a);border-radius:.6rem .6rem 0 0}
.md-row:nth-child(3n+2) .md-th-ph{filter:hue-rotate(-18deg) saturate(.8)}.md-row:nth-child(3n) .md-th-ph{filter:hue-rotate(14deg) brightness(.9)}
.md-rt{display:block}.md-rt-t{display:block;font-family:"Cormorant Garamond",serif;font-weight:500;font-size:1.7rem}.md-rt .md-cap{font-size:.7rem}
.md-rd{font-size:1.05rem;color:#444;background:rgba(0,0,0,.08);padding:.7rem .9rem}
.md-row small{font-size:.95rem;letter-spacing:.18em}
.md-ar{font-size:1.6rem;transition:translate .5s}a.md-row:hover .md-ar{translate:.5rem 0}

/* Journal */
.md-jg{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:9.5rem;grid-auto-flow:dense;gap:1.1rem;padding:1.1rem 1.4rem 3rem 0}
.md-jg .md-box:nth-child(4n+2){grid-row:span 2}.md-jg .md-box:nth-child(7n+4){grid-column:span 2}
.md-box{display:flex;flex-direction:column;justify-content:flex-end;border:1px solid #2b3a55;background:rgba(255,255,255,.55);padding:1.1rem;transition:background .5s,translate .6s,opacity 1.2s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
html.md-js .md-box.md-rv:not(.in){translate:0 2.5rem}
a.md-box:hover{background:rgba(255,255,255,.95);translate:0 -.5rem}
.md-box .md-cap{font-size:.8rem;color:#2b3a55;margin-bottom:.4rem}
.md-bt{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:1.6rem;line-height:1.1}
.md-latest .md-bt{font-size:3rem}
.md-im{display:block;flex:1;margin-bottom:1.2rem;overflow:hidden;background:linear-gradient(160deg,#cfcfcf,#8d8d8d)}
.md-im img{width:100%;height:100%;object-fit:cover}

/* About */
.md-name{font-size:1.9rem;letter-spacing:.2em;font-weight:400;margin-bottom:.9rem}
.md-role{font-size:.85rem;margin-bottom:1.3rem}
.md-about p{font-size:1.2rem;line-height:1.55;margin-bottom:.9rem}
.md-about strong{font-weight:500}
.md-about .md-cap{font-size:.8rem}.md-assoc{margin:1.2rem 0 .3rem!important}
.md-about details{border-bottom:1px solid #111;padding:.45rem 0;font-size:1.05rem;letter-spacing:.06em}
.md-about summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between}
.md-about summary::-webkit-details-marker{display:none}
.md-about summary::after{content:"\25BE"}.md-about details[open] summary::after{content:"\25B4"}
.md-about details p{font-size:1rem;margin:.6rem 0 0;color:#444}
.md-photo{overflow:hidden;box-shadow:0 2rem 4rem rgba(0,0,0,.25);background:#2a2a2a}
.md-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.md-photo-ph{display:block;width:100%;height:100%;background:linear-gradient(160deg,#9a9a9a,#2a2a2a)}

/* Footer block */
.md-s6{color:#fff;text-align:center}
.md-s6 .md-logo{font-size:3.2rem}.md-s6 .md-logo small{font-size:1.3rem;margin-top:.5rem}
.md-contact-copy{display:flex;flex-direction:column;align-items:center}
.md-ft-tag{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;line-height:1.9;margin-top:1.4rem}
.md-contact{display:flex;flex-wrap:wrap;justify-content:center;font-size:.95rem;letter-spacing:.18em;text-transform:uppercase;line-height:1.9;margin-top:1.4rem}
.md-contact li+li::before{content:"\00B7";margin:0 .9rem}
.md-contact a{border-bottom:1px solid transparent;transition:border-color .4s}.md-contact a:hover{border-color:#fff}
.md-s6.md-foot{aspect-ratio:auto;min-height:60vh;display:flex;align-items:center;justify-content:center;margin-top:0}
.md-foot .md-contact-copy{position:static;width:auto}

/* Inner pages */
.md-inner{min-height:100vh;padding:10rem 5vw 6rem;background:#f4f4f4 url(../img/bg-3.webp) center/cover no-repeat}
.md-article{max-width:48rem;margin:0 auto;background:rgba(255,255,255,.9);padding:3.4rem}
.md-title{font-size:3.4rem;line-height:1.05;margin:.6rem 0 1.6rem}
.md-hero-img{margin:0 0 2rem}.md-hero-img img{width:100%}
.md-prose{font-size:1.25rem;line-height:1.7}
.md-prose p,.md-prose ul,.md-prose ol{margin:0 0 1.2rem!important}.md-prose ul{list-style:disc;padding-left:1.4rem!important}.md-prose ol{padding-left:1.4rem!important}
.md-prose a{border-bottom:1px solid #111}
.md-entry{padding:1.6rem 0;border-top:1px solid #222}.md-entry-t{font-size:2.2rem}
.md-back{margin-top:2rem;font-size:1rem;letter-spacing:.14em;text-transform:uppercase}
.md-article .navigation.pagination{margin-top:2rem;letter-spacing:.14em}

/* Phones and tablets: stacked, full-height sections. */
@media (max-width:900px){
	html{font-size:15px}
	.md-nav{padding:1.2rem 5vw}
	.md-navwrap{display:none}
	.md-nav.open .md-navwrap{display:flex}
	.md-navwrap{margin-right:1rem}
	.md-sec{aspect-ratio:auto;min-height:100svh;background-size:cover;background-position:center;padding:24vw 7vw 12vw;display:flex;flex-direction:column;justify-content:center;gap:1.4rem}
	.md-ab{position:static;width:auto;height:auto}
	.md-th{display:none}
	.md-s2{container-type:normal}
	.md-svc-band,.md-svc-craft,.md-svc-caprule,.md-svc-vl{display:none}
	.md-svc-panel{position:absolute;left:0;right:0;top:22%;bottom:0;width:auto}
	.md-svc-cap,.md-tl,.md-tags{white-space:normal}
	.md-lead{width:auto;font-size:1.8rem}
	.md-svc-art{position:static;overflow:visible;order:99}
	.md-labs{position:static;order:98;display:grid;gap:1rem}
	.md-lab{position:static;padding-left:0}
	.md-lab::before,.md-lab::after{display:none}
	.md-h1{font-size:3rem}
	.md-row{grid-template-columns:1fr 2rem}.md-rd,.md-row small{display:none}
	.md-sc{height:60svh}.md-sb{display:none}
	.md-jg{grid-template-columns:1fr 1fr}
	.md-box{min-height:8rem}.md-latest{min-height:20rem}
	.md-photo{height:22rem}
	.md-cap{font-size:.8rem}
	.md-jr-cap{white-space:normal}
	.md-s6.md-foot{padding:4rem 7vw}
	.md-article{padding:2rem}
	.md-title{font-size:2.6rem}
}

/* Project page: one 16:9 slide laid out exactly like the approved mockup (everything is a percent of the slide). */
.md-pj{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#f1f1f1}
.md-pj-bg{position:absolute;inset:-4%;z-index:0;background:url(../img/bg-3.avif) center/cover no-repeat;animation:md-drift 46s ease-in-out infinite alternate;will-change:transform}
@keyframes md-drift{from{transform:translate3d(0,0,0) scale(1.03)}to{transform:translate3d(-1.4%,-1.1%,0) scale(1.07)}}
.md-pj-in{position:absolute;inset:0;z-index:1}
.md-pj-title{left:5.6%;top:12%;font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:4.2rem;line-height:1;letter-spacing:-.01em;white-space:nowrap}
.md-pj-rule{left:5.1%;top:19.5%;width:2.75%;height:3px;background:#9a9a9a}
.md-pj-scope{left:11.8%;top:19.9%;font-size:.95rem;letter-spacing:.15em;text-transform:uppercase;font-weight:400;white-space:nowrap}
.md-pj-scope i{font-style:normal;margin:0 .5rem;opacity:.7}
.md-pj-hline{left:5.1%;top:22.8%;width:89.5%;height:1px;background:rgba(0,0,0,.35)}
.md-pj-btns{left:85.5%;top:12.4%;width:9.5%;height:9.4%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;padding:.4rem 1.6rem;background:#166181;border:3px solid #00263a;color:#fff;text-align:center}
.md-btn{display:block;font-family:Jost,"Helvetica Neue",Arial,sans-serif;font-size:1.2rem;line-height:1.15;font-weight:400;color:#fff;border-bottom:1px solid transparent;transition:border-color .3s,translate .3s}
.md-btn:hover,.md-btn:focus-visible{border-bottom-color:#fff;translate:0 -1px}
.md-pj-panelwrap{left:11.1%;top:23.6%;width:28.4%;height:64.4%;background:rgba(188,188,188,.72);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.md-pj-scroll{height:100%;padding:1.25rem 3rem 1.2rem 1.25rem;-webkit-mask-image:linear-gradient(transparent 0,#000 2%,#000 96%,transparent 100%);mask-image:linear-gradient(transparent 0,#000 2%,#000 96%,transparent 100%)}
.md-pj-abouth,.md-pj-prose{font-family:Arial,Helvetica,"Liberation Sans",sans-serif;color:#000}
.md-pj-abouth{font-weight:700;font-size:1.2rem;line-height:1.2}
.md-pj-prose{font-weight:400;font-size:1.17rem;line-height:1.2}
.md-pj-prose p{margin:0 0 1.4rem!important}
.md-pj-sbv{position:absolute;right:.9rem;top:1.45rem;bottom:1.4rem;width:1rem}
.md-pj-sbv .md-ct{display:none}
.md-pj-vline{left:42.3%;top:25.8%;width:1px;height:48%;background:rgba(0,0,0,.35)}
.md-pj-big{left:46.6%;top:25.8%;width:48.3%;height:48.1%;margin:0;overflow:hidden;background:#d4d4d4}
.md-pj-main{width:100%;height:100%;object-fit:cover;transition:opacity .22s}
.md-pj-main.out{opacity:0}
.md-pj-ph{background:linear-gradient(135deg,#bdbdbd,#8f8f8f)}
.md-pj-thumbs{left:46.6%;top:79.9%;width:48.3%;display:flex;gap:1.2rem;overflow-x:auto;scrollbar-width:none;padding:3px 3px 3px 0}
.md-pj-thumbs::-webkit-scrollbar{display:none}
.md-pj-thumbs::before{content:"";margin-left:auto}
.md-pj-t{flex:0 0 5.6rem;height:3.9rem;padding:0;border:2px solid rgba(150,150,150,.75);background:#cfcfcf;cursor:pointer;opacity:.75;transition:opacity .3s,border-color .3s,box-shadow .3s}
.md-pj-t img{display:block;width:100%;height:100%;object-fit:cover}
.md-pj-t:hover,.md-pj-t:focus-visible{opacity:1}
.md-pj-t.on{opacity:1;border-color:#111}
.md-pj-tph{display:block;cursor:default}
.md-hsb{position:relative;height:1.3rem;cursor:pointer}
.md-hsb .md-tr{position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.2)}
.md-hsb .md-tm{position:absolute;left:0;top:50%;height:3px;margin-top:-1.5px;background:#111;border-radius:3px;opacity:.5;transition:opacity .4s,height .3s,margin .3s;cursor:grab}
.md-hsb .md-tm::before{content:"";position:absolute;left:-.55rem;top:50%;width:.5rem;height:.5rem;margin-top:-.25rem;border:1px solid #111;border-radius:50%;background:#f4f4f4}
.md-hsb:hover .md-tm,.md-hsb.on .md-tm{opacity:1;height:5px;margin-top:-2.5px}
.md-pj-hsb{position:absolute;left:46.6%;top:86.4%;width:48.3%;margin:0}
.md-pj-foot{left:4.9%;top:88.6%;width:89.7%;height:1px;background:rgba(0,0,0,.35)}
@media (max-width:900px){
	.md-pj{aspect-ratio:auto;min-height:100svh;padding:7rem 6vw 2.5rem}
	.md-pj-in{position:relative;inset:auto;display:flex;flex-direction:column;gap:1.4rem}
	.md-pj-in .md-ab,.md-pj-hsb{position:static;width:auto;height:auto}
	.md-pj-title{font-size:3rem;white-space:normal}
	.md-pj-rule,.md-pj-vline,.md-pj-sbv,.md-pj-hsb{display:none}
	.md-pj-scope{white-space:normal}
	.md-pj-hline,.md-pj-foot{height:1px}
	.md-pj-btns{flex-direction:row;justify-content:space-around;height:auto;padding:.9rem}
	.md-btn{font-size:1rem}
	.md-pj-panelwrap{height:50svh}
	.md-pj-big{aspect-ratio:16/9;height:auto}
	.md-pj-t{flex-basis:6rem;height:4rem}
}

@media (prefers-reduced-motion:reduce){
	*,*::before,*::after{animation:none!important;transition:none!important}
	html.md-js .md-rv,html.md-js .md-ln>span{opacity:1;translate:0 0}
	html.md-js .md-rule{transform:none}
}