/* Soft photographic scenes; native image proportions are preserved. */
.scenic{position:relative;isolation:isolate}
body :is(#app,#foot) .scenic::before,body #app section.scenic::after{display:none}
.scene-media{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;border-radius:inherit}
.scene-media img{display:block;position:absolute;width:100%;height:auto;max-width:2400px;left:50%;bottom:0;transform:translateX(-50%);object-fit:contain;opacity:.52}
.scene-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--bg) 0%,#f7f8f5e6 12%,#f7f8f580 45%,#f7f8f530 70%,var(--bg) 100%)}
.scenic>.wrap,.scenic-panel>:not(.scene-media),.scenic-column>:not(.scene-media),.scenic-band>:not(.scene-media):not(.cont){position:relative;z-index:1}
.scenic .card{background:#fff}
.scenic-header,.scenic-home{background:var(--bg)}
.scenic-header .scene-media img,.scenic-home .scene-media img{height:100%;width:100%;max-width:2400px;object-fit:contain;object-position:right center;opacity:1}
.scenic-header .scene-media::after,.scenic-home .scene-media::after{background:linear-gradient(0deg,var(--bg),transparent 24%),linear-gradient(90deg,var(--bg) 0%,#f7f8f5f5 32%,#f7f8f580 56%,#f7f8f510 80%,transparent)}
.scenic-header>.cont,.scenic-header .dots{display:none}
.scenic-header .pt{max-width:800px}
.scenic-panel{padding:44px 32px;border-radius:30px;border:1px solid #d8e5df;overflow:hidden;background:#f2f5ef}
.scenic-panel .scene-media img{opacity:.52;bottom:0}
.scenic-column{padding:28px;border-radius:26px;min-width:0;overflow:hidden;background:#f4f6f0}
.scenic-column .scene-media img{width:100%;height:100%;object-fit:cover;object-position:center;opacity:.42}
.scenic-column .scene-media::after{background:linear-gradient(180deg,#f7f8f5eb,#f7f8f590 45%,#f7f8f5c0)}
.scenic-band{min-height:260px;background:#eef3ec}
.scenic-band>.cont{display:none}
.scenic-band .scene-media img{width:100%;height:100%;max-width:none;object-fit:contain;object-position:right center;opacity:1}
.scenic-band .scene-media::after{background:linear-gradient(90deg,#eef3ec 0%,#eef3ecf5 38%,#eef3ec85 56%,transparent 80%)}
.scenic-band>div:not(.scene-media){max-width:64%}
.scenic-band .cta{align-self:flex-end}
.scenic-band h2,.scenic-band h3,.scenic-band p{text-shadow:0 1px 8px #f7f8f5}
body #foot .scenic-footer{background:#dfeae3}
.scenic-footer .scene-media img{height:100%;width:100%;max-width:2400px;object-fit:contain;object-position:bottom center;opacity:.8}
.scenic-footer .scene-media::after{background:linear-gradient(180deg,#eef4ef 0%,#eef4efdc 22%,#eef4efa6 58%,#eef4ef20)}
.scenic-footer>.cont{display:none}
body #app .scenic-photo{background:#132c29;padding:95px 0 120px;min-height:650px;color:white}
.scenic-photo .scene-media img{height:100%;width:100%;max-width:none;object-fit:contain;object-position:right center;opacity:1;filter:saturate(.92) contrast(1.04)}
.scenic-photo .scene-media::after{background:linear-gradient(90deg,#102c29 0%,#102c29e0 27%,#102c2980 48%,#102c2910 80%),linear-gradient(0deg,#132c2980,transparent 35%)}
.scenic-photo .pt{max-width:680px}
.scenic-photo h1,.scenic-photo h1 em,.scenic-photo .s{color:#fff}
.scenic-photo h1{font-size:clamp(2.3rem,4.3vw,4.2rem)}
.scenic-photo>.cont,.scenic-photo .hbadge{display:none}
.scenic-photo .s{max-width:590px}
.photo-themes{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.photo-themes span{display:inline-flex;align-items:center;gap:9px;padding:12px 16px;border:1px solid #ffffff50;border-radius:28px;background:#173c37b0;color:white}
body .thesis{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,310px);align-items:center;gap:32px}
.thesis-copy{min-width:0}
.thesis-map{margin:0;text-align:center}
.thesis-map button{display:block;width:100%;padding:12px;background:white;border:1px solid #dbe6df;border-radius:18px;cursor:zoom-in}
.thesis-map img{display:block;width:100%;height:330px;object-fit:contain}
.thesis-map figcaption{font-size:.72rem;color:var(--mute);margin-top:8px}
.thesis-map a{text-decoration:underline}
.visual-figure figcaption:empty{display:none}
.conference-photo{margin:-24px -24px 22px;height:300px;aspect-ratio:auto;background:linear-gradient(120deg,#e5efe9,#f4efdf)}
.conference-photo img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.aw>img,.mosaic .mi img,.imgs img,.shots img{object-fit:contain;background:#eef2ed}
.mh>img{object-fit:contain}
body .f .fplane{height:auto;aspect-ratio:auto;margin-bottom:24px}
body .f .fplane img{position:static;display:block;width:100%;height:auto;object-fit:contain;border-radius:16px}
#gal{column-gap:30px;padding:24px 16px}
#gal .gi{aspect-ratio:auto!important;margin-bottom:34px;transform:rotate(-1.3deg);border:7px solid white;box-shadow:0 12px 24px #18372f24;border-radius:8px}
#gal .gi img{width:100%;height:auto;object-fit:contain;display:block}
#gal .gi:nth-child(3n){transform:rotate(1.4deg);margin-top:18px}
#gal .gi:nth-child(3n+2){transform:rotate(.6deg)}
#gal .gi:hover,#gal .gi:focus-visible{transform:rotate(0);z-index:2}
#gal .gi:hover img{transform:none}
@media(min-width:2200px){.scene-media img{max-width:2172px}}
@media(max-width:1000px){body .thesis{grid-template-columns:1fr}.thesis-map{max-width:380px;width:100%;margin:auto}.scenic-band>div:not(.scene-media){max-width:100%}}
@media(max-width:760px){
 .scenic-header .scene-media img,.scenic-home .scene-media img{object-position:center bottom;opacity:.75}
 .scenic-header .scene-media::after,.scenic-home .scene-media::after{background:linear-gradient(180deg,#f7f8f5f2,#f7f8f5d0 45%,#f7f8f560 75%,var(--bg))}
 .scenic-panel{padding:28px 16px;width:calc(100% - 32px)}
 .scenic-column{padding:22px 14px}
 .scenic-band{padding-bottom:170px;min-height:360px}
 .scenic-band .scene-media img{height:180px;width:100%;bottom:0;object-position:center}
 .scenic-band .scene-media::after{background:linear-gradient(180deg,#eef3ec,#eef3ecee 45%,#eef3ec00 80%)}
 body #app .scenic-photo{padding:50px 0 350px;min-height:780px}
 .scenic-photo .pt{max-width:100%}
 .scenic-photo .scene-media img{height:auto;width:100%;bottom:0;object-fit:contain;filter:saturate(.92)}
 .scenic-photo .scene-media::after{background:linear-gradient(180deg,#132c29 0%,#132c29 48%,#132c2960 66%,transparent 82%)}
 .scenic-photo h1{font-size:2.45rem}
 .scenic-photo .s{font-size:1rem;line-height:1.75}
 .photo-themes{gap:8px}.photo-themes span{font-size:.8rem;padding:9px 12px}
 .conference-photo{height:280px}
 #gal{padding:18px 8px;column-gap:18px}
 #gal .gi{border-width:5px;margin-bottom:24px}
}

body :is(#app,#foot) .scenic>.scene-media{position:absolute;inset:0;z-index:0}
.scenic-section .scene-media img{mask-image:linear-gradient(transparent,#000 18%,#000 80%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 18%,#000 80%,transparent)}
.scenic-footer .scene-media img{mask-image:linear-gradient(transparent,#000 24%);-webkit-mask-image:linear-gradient(transparent,#000 24%)}

/* Final focal-point review: soften the actual image edges, including ultrawide letterboxing. */
.scenic-header .scene-media img,.scenic-home .scene-media img{
 width:auto;height:auto;max-width:min(100%,2172px);max-height:100%;
 top:50%;bottom:auto;left:50%;transform:translate(-50%,-50%);
 mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(180deg,transparent,#000 10%,#000 82%,transparent);
 mask-composite:intersect;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(180deg,transparent,#000 10%,#000 82%,transparent);
 -webkit-mask-composite:source-in;
}
.band.scenic-band{flex-direction:column;align-items:flex-start;justify-content:center;gap:20px;padding-right:38%;min-height:300px}
.band.scenic-band>div:not(.scene-media){max-width:100%}
.scenic-band .scene-media img{mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
.thumb img,.figure img,.visual-tile>img{object-fit:contain}
@media(max-width:760px){
 .band.scenic-band{padding-right:24px;padding-bottom:180px}
 .scenic-footer .scene-media img{height:100%;width:100%;max-width:none;object-fit:cover;opacity:.68}
 .scenic-footer .scene-media::after{background:linear-gradient(180deg,#eef4effa,#eef4efc8 45%,#eef4efb8 75%,#eef4ef60)}
 .scenic-header .scene-media img,.scenic-home .scene-media img{top:auto;bottom:0;transform:translateX(-50%)}
}
/* Fade the actual panorama bounds, including on ultrawide displays. */
@media(min-width:761px){
 .scenic-footer .scene-media img{height:auto;width:100%;max-width:2172px;top:auto;bottom:0;mask-image:linear-gradient(transparent,#000 26%),linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(transparent,#000 26%),linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-composite:source-in}
}

/* Place the illustration behind the original PhD layout. */
.scenic-phd .scene-media img {
  inset: 0 0 auto auto;
  transform: none;
  width: min(52%, 750px);
  height: clamp(180px, 25vw, 340px);
  object-fit: cover;
  object-position: right center;
  opacity: .9;
  mask-image: radial-gradient(ellipse 100% 110% at top right, #000 17%, transparent 87%);
}
.scenic-phd .scene-media::after { content: none; }

.scenic-gear .scene-media img {
  height: 100%;
  object-fit: cover;
  mask-image: linear-gradient(transparent, #000 20%, #000 78%, transparent);
}
.scenic-gear > .card { position: relative; z-index: 1; }

.conference-photo img, #orgs .aw > img.organisation-photo {
  object-fit: cover;
}
.conference-photo img.conference-portrait { object-position: center 20%; }
.conference-photo > .arttile { width: 100%; height: 100%; aspect-ratio: auto; }
#orgs .aw > img.organisation-photo { object-position: center 40%; }

body .f .fplane { aspect-ratio: 2.05; overflow: hidden; }
body .f .fplane img {
  height: 100%;
  object-fit: cover;
  object-position: center 68%;
}

.scenic-header .pg, .scenic-photo .pg { display: block; scale: .82; }
.scenic-header .pg .ring {
  border-color: #21625c9c;
}
.scenic-header .pg .ring.r2 { border-color: #ae7839ad; }
.scenic-photo .pg {
  align-self: start;
  justify-self: end;
  scale: .56;
  transform-origin: top right;
}
.scenic-photo .pg .ring { border-color: #e6f5ed9c; }
.scenic-photo .pg .ring.r2 { border-color: #f0d39db3; }
.scenic-photo .scene-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 69% center;
}
.scenic-photo .scene-media::after {
  background: linear-gradient(90deg,#102c29ec 0%,#102c29bd 36%,#102c2933 69%,transparent 92%),
    linear-gradient(0deg,#102c2955,transparent 38%);
}

@media (max-width: 760px) {
  .scenic-phd .scene-media img { width: 65%; opacity: .45; }
  .scenic-header .pg, .scenic-photo .pg {
    justify-self: end;
    margin: -50px -36px -48px 0;
    scale: .48;
    transform-origin: right center;
    pointer-events: none;
  }
  body #app .scenic-photo { min-height: 630px; padding: 50px 0 45px; }
  .scenic-photo .scene-media img { object-position: 65% center; }
  .scenic-photo .scene-media::after {
    background: linear-gradient(180deg,#102c29ef 0%,#102c29ad 47%,#102c2933 82%);
  }
}
body .f .fplane { display: block; }
@media (max-width: 360px) {
  .scenic-header .pg, .scenic-photo .pg { margin-right: -16px; }
}
@media (max-width: 760px) {
  .scenic-header .pg, .scenic-photo .pg { margin-right: 0; }
}

/* Keep the hero artwork clear of the decorative orbit. */
body #app .ph .pg { display: none; }

/* Keep the fade away from the upper-right focal point. */
.phd2 > .cont { display: none; }
.scenic-phd .scene-media img {
  opacity: 1;
  mask-image: radial-gradient(ellipse 100% 110% at top right, #000 28%, transparent 87%);
}
@media (max-width: 760px) {
  .scenic-phd .scene-media img { opacity: .58; }
}

/* Anchor the artwork to the outer edge while keeping a light text area. */
.scenic-header .scene-media img {
  inset: 0 0 auto auto;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  transform: none;
  object-fit: cover;
  object-position: right 22%;
  mask-image: none;
}
.scenic-header .scene-media::after {
  background: linear-gradient(90deg, var(--bg) 8%, #f7f8f5f0 31%, #f7f8f577 58%, transparent 83%),
    linear-gradient(0deg, var(--bg), transparent 22%);
}
.mosaic .mi img, .edu .aw > img.education-cover,
#training .aw > img.workshop-cover, .thumb > img.kuakata-cover {
  object-fit: cover;
}
.edu .education-cover { object-position: center 37%; }
#training .workshop-cover { object-position: center 36%; }
.mosaic .mi img[src$="/photo-03.jpg"] { object-position: center 43%; }
.mosaic .mi span {
  right: auto;
  max-width: calc(100% - 24px);
  background: #102c29e8;
  color: white;
}
@media (max-width: 760px) {
  .scenic-header .scene-media img { object-position: 75% 20%; opacity: .85; }
  .scenic-header .scene-media::after {
    background: linear-gradient(180deg, #f7f8f5f7 0%, #f7f8f5e8 32%, #f7f8f5a0 68%, var(--bg));
  }
  body[data-page="experience"] .scenic-header { padding-bottom: clamp(190px, 48vw, 310px); }
  body[data-page="experience"] .scenic-header .scene-media img {
    top: auto;
    bottom: 0;
    height: clamp(185px, 48vw, 300px);
    object-position: 79% 12%;
  }
  body[data-page="experience"] .scenic-header .scene-media::after {
    background: linear-gradient(180deg, var(--bg) 0%, transparent 35%, transparent 84%, var(--bg));
    inset: auto 0 0;
    height: clamp(185px, 48vw, 300px);
  }
}