/* Reserve space for the shared navigation without changing the approved galleries. */
body[data-page="experience"]{--accent:#d9e7b5}
.mast{padding-top:96px}
.experience-detail::before{
  content:"";
  position:fixed;
  z-index:18;
  inset:0 0 auto;
  height:126px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(8,14,16,.96) 0%,rgba(8,14,16,.78) 45%,rgba(8,14,16,0) 100%);
  -webkit-backdrop-filter:blur(7px);
  backdrop-filter:blur(7px);
  -webkit-mask-image:linear-gradient(#000 0 52%,transparent 100%);
  mask-image:linear-gradient(#000 0 52%,transparent 100%);
}
.experience-detail .site-header{top:20px}
.experience-detail .back{
  z-index:21;
  top:20px;
  min-height:44px;
  padding:10px 16px;
  background:rgba(10,16,17,.74);
  border-color:rgba(255,255,255,.10);
  box-shadow:0 6px 20px rgba(0,0,0,.16);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.experience-detail .page{padding-top:128px}
.experience-detail .page-head{margin-bottom:48px}
.experience-detail .page-head h1{
  max-width:1120px;
  font-size:clamp(42px,4.4vw,68px);
  line-height:1.14;
  text-wrap:balance;
}
.global-nav__item.is-current{background:rgba(255,255,255,.08)}
.site-footer h2{line-height:1.5}
#main:focus{outline:none}
@media(max-width:760px){
  .mast{padding-top:90px}
  .experience-detail::before{height:132px}
  .experience-detail .site-header{top:10px}
  .experience-detail .back{top:62px;left:16px;min-height:40px;padding:8px 14px}
  .experience-detail .page{padding-top:126px}
  .experience-detail .page-head{margin-bottom:34px}
  .experience-detail .page-head h1{font-size:clamp(34px,9.4vw,46px);line-height:1.18}
}

/* Overview: one composed viewport across common desktop browser heights. */
body[data-page="experience"]:not(.experience-detail) .mast{
  position:absolute;
  z-index:2;
  top:0;
  left:0;
  right:0;
  padding:clamp(94px,12svh,118px) 4.5vw 0;
  pointer-events:none;
}
body[data-page="experience"]:not(.experience-detail) .landing{
  width:100%;
  max-width:1800px;
  height:100svh;
  min-height:650px;
  margin:0 auto;
  padding:clamp(116px,15svh,150px) 4.5vw clamp(66px,8.8svh,78px);
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
}
body[data-page="experience"]:not(.experience-detail) .hero-title.editorial-title{
  padding:0 0 clamp(22px,3.8svh,38px);
}
body[data-page="experience"]:not(.experience-detail) .hero-title.editorial-title h1{
  font-size:clamp(42px,4.8vw,68px);
  line-height:1.16;
}
body[data-page="experience"]:not(.experience-detail) .hero-title-en{
  margin-top:clamp(8px,1.6svh,15px);
  font-size:clamp(18px,1.75vw,27px);
}
body[data-page="experience"]:not(.experience-detail) .accordion{
  height:auto;
  min-height:0;
  max-height:none;
}
body[data-page="experience"]:not(.experience-detail) .panel-copy{
  bottom:clamp(20px,3.2svh,30px);
}

/* Short laptop windows: retain the full composition without clipping cards. */
@media(min-width:761px) and (max-height:760px){
  body[data-page="experience"]:not(.experience-detail) .mast{padding-top:84px}
  body[data-page="experience"]:not(.experience-detail) .landing{
    min-height:600px;
    padding-top:102px;
    padding-bottom:52px;
  }
  body[data-page="experience"]:not(.experience-detail) .hero-title.editorial-title{padding-bottom:18px}
  body[data-page="experience"]:not(.experience-detail) .hero-title.editorial-title h1{font-size:clamp(38px,4.35vw,58px)}
  body[data-page="experience"]:not(.experience-detail) .hero-title-en{font-size:19px;margin-top:7px}
  body[data-page="experience"]:not(.experience-detail) .panel-copy{bottom:20px}
}

/* Mobile overview: all three destinations remain visible in the first viewport. */
@media(max-width:760px){
  body[data-page="experience"]:not(.experience-detail) .mast{
    padding:72px 20px 0;
  }
  body[data-page="experience"]:not(.experience-detail) .landing{
    height:100svh;
    min-height:620px;
    padding:104px 20px 16px;
    grid-template-rows:auto minmax(0,1fr);
  }
  body[data-page="experience"]:not(.experience-detail) .hero-title.editorial-title{padding:0 0 16px}
  body[data-page="experience"]:not(.experience-detail) .hero-title.editorial-title h1{
    font-size:clamp(29px,8.2vw,38px);
    line-height:1.12;
    letter-spacing:.02em;
  }
  body[data-page="experience"]:not(.experience-detail) .hero-title-en{
    margin-top:7px;
    font-size:clamp(15px,4.6vw,19px);
  }
  body[data-page="experience"]:not(.experience-detail) .accordion{
    display:grid;
    grid-template-rows:repeat(3,minmax(0,1fr));
    gap:10px;
    height:auto;
    min-height:0;
  }
  body[data-page="experience"]:not(.experience-detail) .panel,
  body[data-page="experience"]:not(.experience-detail) .panel.active{
    height:auto;
    min-height:0;
    border-radius:12px;
  }
  body[data-page="experience"]:not(.experience-detail) .panel-number{top:14px;left:16px;font-size:10px}
  body[data-page="experience"]:not(.experience-detail) .panel-copy{left:17px;right:15px;bottom:14px}
  body[data-page="experience"]:not(.experience-detail) .panel h2{font-size:20px}
  body[data-page="experience"]:not(.experience-detail) .panel p{
    margin-top:5px;
    font-size:10px;
    line-height:1.45;
    white-space:normal;
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
}

@media(max-width:380px){
  body[data-page="experience"]:not(.experience-detail) .landing{padding-left:14px;padding-right:14px}
  body[data-page="experience"]:not(.experience-detail) .mast{padding-left:14px;padding-right:14px}
  body[data-page="experience"]:not(.experience-detail) .panel h2{font-size:18px}
}

/* Keep the final navigation balanced between its divider and the site footer. */
.experience-detail .article{padding-bottom:0}
.experience-detail .article>.portal{padding-block:34px}
@media(max-width:760px){
  .experience-detail .article>.portal{padding-block:24px}
}