*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background-color:#0D0D0D;color:whitesmoke;font-family:orpheuspro,serif;font-weight:400;letter-spacing:.3rem;overflow-x:hidden;}
ul{list-style:none;}
img,video{display:block;}
a{color:#485827;text-decoration:none;}

/* fonts */
.garamond{font-family:garamond-premier-pro-display,serif;font-weight:300;}
.garamondbold{font-family:garamond-premier-pro-display,serif;font-weight:400;}
.bernina{font-family:jaf-bernina-sans-comp,sans-serif;font-weight:400;}
.bernina-light{font-family:jaf-bernina-sans-comp,sans-serif;font-weight:200;font-size:108%;}
.orpheus{font-family:orpheuspro,serif;font-weight:500;}
.acumin{font-family:acumin-pro,sans-serif;font-weight:800;letter-spacing:.5vw;}
.niveau{font-family:niveau-grotesk,sans-serif;font-weight:200;}
.oblique{font-style:italic;}
.boldtext{font-weight:400;color:white;}
.boldtextgray{font-weight:600;color:lightgray;}
.center{display:flex;justify-content:center;align-items:center;}
.justifiedtext{text-align:justify;text-align-last:justify;}

/* headings */
h1{font-family:orpheuspro,serif;font-weight:500;font-size:3.5vw;letter-spacing:.23em;line-height:1.23;position:absolute;bottom:24px;margin-left:1%;}
h2{font-family:orpheuspro, serif; font-style: normal; font-weight:460; font-size:4.4vw;letter-spacing:.3.6em;text-align:left;line-height:1.1; }
h3{font-family:garamond-premier-pro-display,serif;font-weight:100;font-size:1vw;letter-spacing:1.3em;text-align:right;margin-right:3%;}
h4{font-family:jaf-bernina-sans-comp,sans-serif;font-weight:400;font-size:1em;letter-spacing:.35vw;line-height:155%;text-transform:uppercase;opacity:.8;text-align:left; margin-left: 0.2em;}
h5{font-family:orpheuspro,serif;font-weight:500;font-size:1.2em;letter-spacing:.34em;opacity:.8;line-height:180%;margin:0;}
p{font-family:garamond-premier-pro-display,serif;font-weight:300;font-size:.9em;letter-spacing:.2em;color:#AFAFAF;text-align-last:left;}
hr{border:none;border-top:.04em solid grey;width:55%;opacity:.5;margin:0 auto;}

/* glow */
@keyframes automaticglow{from{opacity:.15;color:darkgray;}to{opacity:1;color:whitesmoke;}}
.glowing{opacity:.15;animation:automaticglow 13s infinite alternate;}

/* nav */
#dropdown_icon{position:fixed;top:0;right:0;z-index:30;}
#dropdown_icon li{position:fixed;right:0;}
#fp_nav{margin-top:2em;}
#pw_nav{margin-top:4em;}
#ab_nav{margin-top:6em;}
.nav-item{margin:1%;z-index:30;}
.navlink{color:whitesmoke;font-family:jaf-bernina-sans-comp,sans-serif;font-weight:200;font-size:108%;display:block;text-align:right;padding-right:1em;transition:opacity .2s;}
.navlink:hover{opacity:.6;}
#hamburger{display:none;font-family:acumin-pro,sans-serif;font-weight:800;letter-spacing:.2em;font-size:1.1em;color:antiquewhite;cursor:pointer;position:fixed;right:5%;top:.6em;z-index:30;}

/* hero */
#hero{position:relative;height:90vh;overflow:hidden;}
#hero-slides{position:absolute;inset:0;z-index:0;}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease;cursor:pointer;}
.hero-slide.active{opacity:1;}
.hero-slide img{width:100%;height:100%;object-fit:cover;min-width:100vw;}

#logowrapper{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;pointer-events:none;}
#logo{width:190px;opacity:.9;cursor:pointer;pointer-events:auto;position:absolute;inset:0;margin:auto;transition:opacity .3s;}
#intro{display:none;opacity:0;background-color:rgba(0,0,0,.16);padding:1vw;width:14vw;margin-top:-4%;pointer-events:auto;}
.introtext{font-family:orpheuspro,serif;font-weight:300;color:white;line-height:110%;font-size:78%;letter-spacing:.3rem;text-align:justify;text-align-last:justify;}

#candiWrapper{position:absolute;bottom:5%;left:3.8%;z-index:10;width:50vw;height:auto;pointer-events:none;}
#candi{font-family:jaf-bernina-sans-comp,sans-serif;font-weight:400;font-size:.9vw;letter-spacing:.68em;margin-top:-.4%;margin-left:1%;text-transform:uppercase;opacity:.8;position:relative;}

/* typo-on-carousel: title overlay for BOTH film and scroll carousels */
.typo-on-carousel{margin-left:3.8%;z-index:8;position:absolute;bottom:3.5%;opacity:.98;pointer-events:none;}
.typo-on-carousel h2{line-height:1.2; margin-bottom: 0.1em;}
.typo-on-carousel h4{margin-top:.2em;line-height:140%;}

/* film carousels */
.film-carousel{position:relative;width:100%;overflow:hidden;cursor:pointer;margin-top:1.5%;}
.film-slide{display:none;width:100%;position:relative;}
.film-slide.active{display:block;}
.film-slide img{width:100%;display:block;object-fit:cover;}
.credits{position:absolute;font-family:orpheuspro,serif;font-weight:400;font-size:clamp(.5em,1.2vw,.7em);line-height:160%;letter-spacing:.3vw;text-align:left;text-align-last:left;z-index:6; opacity: 0.8; color: gray;}
.credits a{color: whitesmoke ;}

/* indicators – hauchduenn */
.carousel-indicators{position:absolute;bottom:1%;left:50%;transform:translateX(-50%);z-index:9;display:flex;gap:5px;list-style:none;padding:0;}
.carousel-indicators li{width:28px;height:2px;background:rgba(255,255,255,.22);cursor:pointer;transition:background .3s;}
.carousel-indicators li.active{background:rgba(255,255,255,.8);}

.film-fade{position:absolute;inset:0;background:#0D0D0D;opacity:0;pointer-events:none;transition:opacity .3s;z-index:5;}
.film-fade.fading{opacity:1;}

/* fairy ring 360 panorama */
#panoViewer{position:relative;width:100%;height:65vh;background:#0D0D0D;cursor:grab;z-index:1;overflow:hidden;}
#panoViewer:active{cursor:grabbing;}
#panoViewer canvas{display:block;}

/* horizontal scroll carousel */
.scrollCarousel{display:flex;overflow-x:auto;width:100vw;-webkit-overflow-scrolling:touch;position:relative;}
.scrollCarousel::-webkit-scrollbar{height:3px;}
.scrollCarousel::-webkit-scrollbar-thumb{background:#E7E7E7;}
.scrollCarousel::-webkit-scrollbar-track{background:#232323;}

/* scroll title – positioned absolute over the carousel-wrap so it stays put while scrolling */
.carousel-wrap{position:relative;}
.scroll-title{position:absolute;bottom:2%;left:3.8%;z-index:8;pointer-events:none;opacity:.98;}
.scroll-title h2{line-height:1.05;}
.scroll-title h4{margin-top:0;line-height:140%;}

/* scroll items share a fixed height; width follows natural aspect (narrow like the original) */
.charCol{margin-right:23px;flex-shrink:0;}
.carouselitem{height:700px;width:auto;object-fit:cover;opacity:.7;cursor:pointer;transition:opacity .3s;display:block;}
.carouselitem:hover{opacity:1;}
.carouselitem-vid{height:700px;object-fit:cover;opacity:.8;cursor:pointer;transition:opacity .3s;background-repeat:no-repeat;background-size:cover;background-position:center;display:block;}
.carouselitem-vid:hover{opacity:1;}
video.carouselitem-vid{width:auto;}
.sketch{height:700px;width:auto;object-fit:cover;opacity:.4;cursor:pointer;transition:opacity .3s;background-color:white;display:block;}
.sketch:hover{opacity:1;}

.item-poster,.item-video,.item-square,.item-char{width:auto !important;}
/* cap the few wider character motifs so they match the narrow strips */
.item-char{max-width:380px;}
/* landscape videos cropped to a portrait column matching the still slides */
.item-vid-narrow,.item-narrow{width:360px !important;}
.item-textcard{height:700px;width:480px;}
/* lighten / colour-match a video toward its neighbours */
.item-vid-lighten{filter:contrast(120%) brightness(110%);}
/* loading placeholder colours per Modernismus section */
#modernismus6 .carouselitem,#modernismus6 .carouselitem-vid{background-color:#435670;}
#modernismus7 .carouselitem,#modernismus7 .carouselitem-vid{background-color:#424660;}
#modernismus12 .carouselitem,#modernismus12 .carouselitem-vid{background-color:#935360;}
#modernismus12 .carouselitem-vid{background-image:none !important;}

/* info */
.infobutton{width:1.7vw;max-width:100px;height:auto;opacity:.35;margin-left:4%;margin-top:.2%;cursor:pointer;display:inline-block;vertical-align:middle;}
.infobutton:hover{opacity:.9;}
/* 20% larger info button inside the artwork / video modal */
#showModalText,#showVidText{width:2.04vw;max-width:120px;}
.infowrapper{display:none;padding-left:3.8%;position:relative;}
.closeinfobutton{font-family:acumin-pro,sans-serif;font-weight:200;font-size:1.6em;line-height:1;opacity:.8;display:inline-block;cursor:pointer;position:relative;z-index:5;padding:.05em .4em;margin-right:1em;}
.infotext{font-family:jaf-bernina-sans-narrow,sans-serif;font-weight:100;font-size:.96em;letter-spacing:.22em;padding-left:6%;margin-right:5%;margin-top:-2%;opacity:.8;color:#AFAFAF;}
.infotext a{color:#81A5E4;}
/* close X on its own line so it can't overlap / cut the info text */
.infowrapper .closeinfobutton{position:absolute;left:3.8%;top:0;margin:0;}
.infowrapper .infotext{margin-top:0;padding-left:2.8em;}

/* modal */
.modal-bg{display:none;position:fixed;inset:0;z-index:50;background-color:rgba(0,0,0,.82);align-items:center;justify-content:center;overflow:hidden;}
.modal-bg.open{display:flex;}
.modal-close{position:absolute;top:2%;right:3%;font-family:niveau-grotesk,sans-serif;font-weight:200;font-size:40px;color:#f1f1f1;cursor:pointer;transition:color .2s;line-height:1;}
.modal-close:hover{color:#bbb;}
.modal-img{max-width:92vw;max-height:92vh;object-fit:contain;animation:zoomIn .4s;cursor:default;display:block;}
@keyframes zoomIn{from{transform:scale(.1);}to{transform:scale(1);}}

/* about */
#portrait{position:relative;width:100vw;}
#portrait>img{width:100vw;height:auto;display:block;}
.portrait-caption{position:absolute;bottom:3%;left:3.8%;z-index:10;opacity:.8;}
.portrait-credit{position:absolute;bottom:3%;right:3%;z-index:10;opacity:.7;font-size:.82em;letter-spacing:.15em;}
#aboutme{font-size:clamp(.6em,1.4vw,.86em);}
p.about-text{font-family:garamond-premier-pro-display,serif;font-weight:300;font-size:1em;letter-spacing:.13em;line-height:200%;color:#8D8D8D;text-align:justify;text-align-last:left;padding-left:6%;padding-right:6%;}
p.qualificationtext{font-family:garamond-premier-pro-display,serif;font-weight:300;letter-spacing:.13em;font-size:.94em;text-align:justify;color:#AFAFAF;border-left:.1em solid #555;padding-left:8%;padding-right:8%;margin-top:3%;margin-right:2%;}
.questions{font-family:orpheuspro,serif;font-weight:500;font-size:1.8vw;letter-spacing:.3em;opacity:.8;padding-left:4.3%;padding-bottom:2.5%;line-height:180%;}

/* footer */
footer{border-top:.1em solid #555555;}
#footerID{text-align:center;margin-top:11%;}
#contact{letter-spacing:.4em;padding-left:1%;font-size:2.6vw;margin-top:11%;}
#dropmeamessage{font-family:garamond-premier-pro-display,serif;font-weight:300;font-size:1.4vw;letter-spacing:.3em;font-style:italic;text-align:center;margin-top:2%;margin-bottom:.1em;color:#AFAFAF;}
#mailtome{font-family:garamond-premier-pro-display,serif;font-style:italic;letter-spacing:.45vw;display:flex;justify-content:center;align-items:center;color:whitesmoke;}
#footerlogo{width:16%;margin:7% auto 0;opacity:.7;cursor:pointer;transition:opacity .2s;display:block;}
#footerlogo:hover{opacity:1;}
#wrapperlegallinks{margin:13% 4vw 40px 3vw;width:93vw;display:flex;justify-content:space-between;}
.footerlinks{font-family:garamond-premier-pro-display,serif;font-weight:300;font-size:.9em;letter-spacing:.2em;color:#AFAFAF;margin-bottom:20px;}
.footerlinks:hover{color:whitesmoke;}

/* copy protection */
img,video,canvas{-webkit-user-drag:none;user-select:none;}
.modal-img{-webkit-user-drag:none;pointer-events:auto;}

/* responsive desktop */
@media only screen and (min-width:680px){
  #hero{height:90vh;} #logowrapper{height:92vh;}
  #logo{width:190px;}
  #intro{margin-top:-4%;width:14vw;padding:1vw;}
  .nav-item{font-size:.8em;margin-right:2.2%;}
  #hamburger{font-size:1.1em;letter-spacing:.2em;top:1em;}
  h1{font-size:2.4vw;bottom:24px;} #candi{font-size:.9vw;margin-top:-.4%;letter-spacing:.68em;}
  h2{font-size:2.7vw;letter-spacing:.3em;} h3{font-size:1vw;}
  h4{font-size:1em;letter-spacing:.35vw;line-height:155%;}
  h5{font-size:1.2em;letter-spacing:.34em;}
  p{font-size:.9em;letter-spacing:.2em;}
  p.about-text{letter-spacing:.13em;font-size:1em;line-height:200%;}
  p.qualificationtext{letter-spacing:.13em;font-size:.94em;}
  .infobutton{width:1.7vw;max-width:100px;} .introtext{font-size:78%;}
  .closeinfobutton{margin-right:1em;} .infotext{font-size:.96em;letter-spacing:.22em;}
  .carouselitem{height:700px;} .carouselitem-vid{height:700px;} .sketch{height:700px;}
  .questions{font-size:1.8vw;letter-spacing:.3em;}
  #dropmeamessage{font-size:1.4vw;letter-spacing:.3em;} #mailtome{letter-spacing:.45vw;}
  #footerlogo{width:16%;margin-top:7%;}
  #abouttextsection{margin-left:12vw;margin-right:15vw;}
  #wrapperlegallinks{margin-right:4vw;margin-left:3vw;width:93vw;margin-bottom:40px;}
}
/* landscape phone */
@media only screen and (max-width:800px) and (min-width:441px) and (orientation:landscape){
  #hero{height:95vh;} #logowrapper{height:97vh;}
  #logo{width:20%;}
  #hamburger{display:block;font-size:1.2em;} #dropdown_icon{display:none;}
  .introtext{line-height:120%;font-size:.7em;}
  #intro{width:34%;max-height:80vh;padding:3%;position:absolute;left:32%;right:32%;overflow:scroll;}
  h1{font-size:2.4vw;bottom:15px;} h2{font-size:2.6vw;} h3{font-size:1.5vw;}
  h4{font-size:1em;letter-spacing:.35vw;line-height:155%;} h5{font-size:1.2em;}
  #candi{font-size:.7em;margin-top:-1%;}
  .carouselitem,.carouselitem-vid,.sketch{height:320px;}
  .item-vid-narrow,.item-narrow{width:165px!important;}
  .item-textcard{height:320px;width:220px;}
  .item-textcard .infotext{font-size:.58em;letter-spacing:.12em;}
  .infobutton{width:5vh;}
}
/* portrait phone ≤440px */
@media only screen and (max-width:440px) and (orientation:portrait){
  #hero{height:75vh;} #logowrapper{height:75vh;}
  #logo{width:30%; margin-top:43%;}
  #hamburger{display:block;font-size:1.2em;}
  #dropdown_icon{display:none;}
  #intro{width:60%;max-height:80vh;padding:3%;position:absolute;right:20%;left:20%;overflow:scroll;}
  .introtext{line-height:120%;font-size:.7em;}
  h1{font-size:1em;bottom:0;} h2{font-size:1.9vh;} h3{font-size:.4em;}
  h4{font-size:.93vh;letter-spacing:.35vw;line-height:165%;} h5{font-size:3vh;}
  #candi{font-size:.6em;bottom:-1.7em;}
  .carouselitem,.carouselitem-vid,.sketch{height:270px;}
  .item-vid-narrow,.item-narrow{width:140px!important;}
  .item-textcard{height:270px;width:185px;}
  .item-textcard .infotext{font-size:.5em;letter-spacing:.1em;}
  .infobutton{width:4vw;}
  .questions{font-size:.8em;letter-spacing:.2em;}
  p.qualificationtext{font-size:.5em;letter-spacing:.09em;line-height:150%;}
  p.about-text{font-size:.5em;letter-spacing:.09em;line-height:150%;}
  #contact{font-size:1.8em;letter-spacing:.12em;}
  #dropmeamessage{font-size:.9em;letter-spacing:.2em;}
  #footerlogo{width:26%;margin-top:10%;}
  #wrapperlegallinks{width:96vw;margin:9vw 2vw 7px;}
  .footerlinks{font-size:.4em!important;letter-spacing:.24em;}
}
/* portrait phone 441–700px */
@media only screen and (min-width:441px) and (max-width:700px) and (orientation:portrait){
  #hero{height:75vh;} #logowrapper{height:75vh;}
  #logo{width:30%;}
  h1{font-size:.95em;bottom:0;} #candi{font-size:.6em;bottom:-1.7em;}
  #hamburger{display:block;font-size:1.2em;} #dropdown_icon{display:none;}
  h2{font-size:1.9vh;} h3{font-size:.4em;}
  .carouselitem,.carouselitem-vid,.sketch{height:270px;}
  .item-vid-narrow,.item-narrow{width:140px!important;}
  .item-textcard{height:270px;width:185px;}
  .item-textcard .infotext{font-size:.5em;letter-spacing:.1em;}
}