/* Start in CSS before the first paint, so the hero cannot flash into view.
   The video and copy emerge from black without a curtain or a blocking layer. */
.hero{background:#09070b}
.hero video{animation:hero-image-emerge 2.6s ease-out .1s both}
.hero .hero-identity{animation:hero-copy-emerge 1.8s ease-out .4s both}
.hero .hero-message h1{animation:hero-copy-emerge 2.8s cubic-bezier(.22,.5,.35,1) 1s both}
.hero .hero-message h1::after{animation:hero-thorn-emerge 2s ease-out 2.6s both}
.hero .hero-message .hero-sub{animation:hero-copy-emerge 1.9s ease-out 2.4s both}
@keyframes hero-image-emerge{from{opacity:0}to{opacity:1}}
@keyframes hero-copy-emerge{from{opacity:0}to{opacity:1}}
@keyframes hero-thorn-emerge{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
/* Preserve native photo detail instead of stretching small files to dialog width. */
#photo-dialog #large-photo{width:auto;max-width:100%;margin-inline:auto}
.portrait-dialog .profile-grid>img{width:auto;max-width:100%;justify-self:center}
@media(prefers-reduced-motion:reduce){.hero video,.hero .hero-identity,.hero .hero-message h1,.hero .hero-message h1::after,.hero .hero-message .hero-sub{animation:none;opacity:1}.hero .hero-message h1::after{clip-path:none}}

/* Six supplied gallery portraits. */
@media(min-width:701px){.gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gallery img{aspect-ratio:2/3;object-position:center}

.profile-details dl{margin:25px 0 30px}.profile-details dl>div{display:block;text-align:center;padding:18px 0}.profile-details dt{letter-spacing:.18em;color:#df879d;font-weight:bold;margin-bottom:12px}.profile-details dd{line-height:2;overflow-wrap:anywhere}

.story-photo img{aspect-ratio:1536/1123;height:auto;object-fit:contain}

/* Show two portraits before swiping through the gallery. */
.gallery-section .gallery{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:6%;-webkit-overflow-scrolling:touch}
.gallery-section .gallery button{flex:0 0 calc((100% - 18px)/2);min-width:0;scroll-snap-align:start}
@media(max-width:700px){
 .gallery-section .gallery{gap:10px;padding-inline:7%;scroll-padding-inline:7%}
 .gallery-section .gallery button{flex-basis:calc((100% - 10px)/2);border-radius:36px 36px 5px 5px;padding:3px 3px 0}
 .gallery-section .gallery img{border-radius:32px 32px 2px 2px}
 .gallery-section .album-caption{font-size:7px;letter-spacing:.06em;padding:10px 0}
}

.recruit-section .recruit-group-photo{display:block;width:100%;max-width:1040px;height:auto;margin:30px auto 36px;border:1px solid #9c3c5266;border-radius:18px;box-shadow:0 12px 32px #0005}
@media(max-width:700px){.recruit-section .recruit-group-photo{margin:24px auto 28px;border-radius:12px}}

/* Matching three-column SNS cards in cast profiles. */
.portrait-dialog .sns-icons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;margin-top:24px}
.portrait-dialog .sns-icons a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:100%;min-width:0;height:auto;min-height:118px;padding:20px 5px 16px;border-radius:24px;text-align:center;letter-spacing:.02em}
.portrait-dialog .sns-icons a:before{width:27px;height:29px}
.portrait-dialog .cast-social-label{display:block;width:100%;font-size:13px;line-height:1.5}
.portrait-dialog .cast-social-label small{display:block;margin-top:5px;font-size:9px;color:#c99da9;letter-spacing:0;overflow-wrap:anywhere}
.portrait-dialog .cast-social-arrow{position:absolute;top:9px;right:10px;font-size:13px;color:#e6bac3}
@media(max-width:380px){.portrait-dialog .sns-icons{gap:7px}.portrait-dialog .sns-icons a{border-radius:19px;padding-inline:3px}.portrait-dialog .cast-social-label{font-size:11px}.portrait-dialog .cast-social-label small{font-size:8px}}

/* Recruitment application link restored from the original official page. */
.page-recruit .recruit-apply{text-align:center;padding:64px 20px 80px}.page-recruit .recruit-apply p{margin:0 0 28px;color:#e8cbd1;font-family:var(--ibara-type,serif);line-height:1.8}.page-recruit .recruit-apply .btn{max-width:100%;box-sizing:border-box;white-space:normal}@media(max-width:700px){.page-recruit .recruit-apply{padding:48px 20px 60px}}

/* Match the lower application button directly beneath the recruitment title. */
.page-recruit .recruit-apply.recruit-apply-top{padding:12px 0 32px}