/* Device adaptations shared by the existing portfolio pages. */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-padding-top:92px; }
main,section,article,aside,.proj-stage,.project-copy,.video-card,.lesson-card { min-width:0; }
img,video { max-width:100%; }
h1,h2,h3 { overflow-wrap:anywhere; text-wrap:balance; }
p { overflow-wrap:break-word; }
button,a,select,[role="button"] { touch-action:manipulation; }
.button,.cbtn,.social-link { min-height:44px; }
.board-hero { min-height:100svh; }
.board-hero h1 { font-size:clamp(2.8rem,10vw,6rem); }
.video-grid,.compact-video-grid,.lesson-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); }
.worklist { grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); }
.poster-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); }
.proj-nav { top:88px; max-height:calc(100dvh - 116px); overflow-y:auto; }
.proj-picker { display:none; }
.proj-stage { scroll-margin-top:176px; }
.site-footer { padding-bottom:100px; }
.site-footer a { display:inline-flex; align-items:center; min-height:44px; }
.video-lightbox { margin:0; border:0; width:100%; height:100%; height:100dvh; max-width:none; max-height:none; padding:72px 16px max(24px,env(safe-area-inset-bottom)); }
.video-lightbox:not([open]) { display:none; }
.video-lightbox[open] { display:grid; }
.video-lightbox::backdrop { background:#11141b; }
.video-lightbox-stage { max-width:100%; max-height:100%; min-width:0; }
.video-lightbox-stage :is(video,img) { max-width:calc(100vw - 32px); max-height:calc(100dvh - 108px - env(safe-area-inset-bottom)); object-fit:contain; }
.video-lightbox-close { top:max(12px,env(safe-area-inset-top)); right:max(16px,env(safe-area-inset-right)); }
[data-media-open]:focus-visible { outline:3px solid #2f6fd0; outline-offset:4px; }
.aw { bottom:max(16px,env(safe-area-inset-bottom)) !important; left:max(20px,env(safe-area-inset-left)) !important; gap:0 !important; }
.aw-bars { min-height:44px; padding:8px 4px; }
.aw-more { min-width:44px; min-height:44px; padding:10px !important; opacity:1 !important; }
.aw-list { max-height:calc(100dvh - 120px); overflow-y:auto; visibility:hidden; }
.aw.open .aw-list { visibility:visible; }
.aw-list button { min-height:44px; }
.aw-bars,.aw-more { border:0; background:transparent; }
.nav-shortcuts { position:fixed; left:50%; bottom:84px; transform:translateX(-50%); z-index:5; display:flex; gap:8px; width:max-content; max-width:calc(100% - 32px); }
.nav-shortcuts a { display:flex; align-items:center; justify-content:center; min-height:44px; padding:12px 18px; color:#20242f; text-decoration:none; font:600 14px/1.2 Inter,"Noto Sans SC",sans-serif; border-bottom:1px solid #9c9a95; }
.nav-shortcuts a:hover { background:rgba(255,255,255,.65); }
.about-flip { position:fixed; left:50%; transform:translateX(-50%); bottom:100px; z-index:6; min-height:44px; padding:10px 20px; border:1px solid #878b93; border-radius:24px; background:#f4f1ea; color:#20242f; font:600 14px/1.3 Inter,"Noto Sans SC",sans-serif; cursor:pointer; }
.card-back .about-flip { bottom:160px; }
.contact-bar { width:max-content; max-width:calc(100vw - 32px); bottom:88px; gap:8px; }
.contact-bar .cbtn { background:#343841; }
.about-summary { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.webgl-unavailable #scene { display:none; }
.webgl-unavailable .about-summary { position:relative; width:min(600px,100%); height:auto; clip-path:none; margin:100px auto 220px; padding:24px; color:#20242f; font:16px/1.7 Inter,"Noto Sans SC",sans-serif; }
.webgl-unavailable:has(.about-summary) { overflow:auto; }
.webgl-unavailable .about-flip { display:none; }
.webgl-unavailable .nav-shortcuts { bottom:40%; }
@media (max-width:960px) {
 .proj-layout { grid-template-columns:minmax(0,1fr); }
 .proj-nav { display:none; }
 .proj-picker { display:grid; gap:6px; position:sticky; top:68px; z-index:10; padding:12px 0; background:#f4f1ea; }
 .proj-picker label { font-size:13px; color:#3a3f50; }
 .proj-picker select { width:100%; min-width:0; min-height:48px; padding:10px 38px 10px 14px; border:1px solid #878b93; border-radius:8px; background:#fbfaf6; color:#20242f; font:600 16px/1.4 Inter,"Noto Sans SC",sans-serif; }
}
@media (max-width:600px) {
 .board-hero { min-height:72svh; padding:96px 20px 64px; }
 .board-hero .be-en { letter-spacing:.18em; }
 .page-hero,.page-intro,.topic-hero { padding-top:40px; }
 .page-hero h1,.page-intro h1,.topic-title { font-size:clamp(30px,8vw,42px); line-height:1.2; }
 .proj-head h2 { font-size:28px; line-height:1.25; }
 .proj-lead,.page-hero>p,.page-intro>p { font-size:16px; }
 .nav-shortcuts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:calc(100% - 48px); bottom:max(88px,calc(env(safe-area-inset-bottom) + 72px)); }
 .nav-shortcuts a { font-size:15px; padding:12px 8px; }
 .contact-bar { bottom:80px; }
 .contact-bar .cbtn { padding:10px 13px; font-size:13px; }
 .card-back .about-flip { bottom:192px; }
 .about-flip { bottom:92px; }
}
@media (max-height:500px) and (orientation:landscape) {
 .nav-shortcuts { bottom:76px; left:auto; right:20px; transform:none; display:grid; grid-template-columns:1fr; width:min(210px,30vw); gap:0; }
 .nav-shortcuts a { padding:8px; }
 .board-hero { min-height:100svh; padding:80px 24px 44px; }
 .board-hero .be-down { margin-top:20px; }
 .contact-bar { bottom:68px; }
 .about-flip,.card-back .about-flip { left:auto; right:16px; transform:none; bottom:126px; }
}
@media (prefers-reduced-motion:reduce) {
 *,*::before,*::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; }
}

/* Keep the page inside the viewport even during its entrance. */
.board-hero { animation:none; }
@media (max-width:600px) { .ink-canvas { opacity:.3; } }

/* A readable HTML back for the card on phones. */
@media (max-width:600px) {
 body.card-back { overflow-y:auto; height:auto; min-height:100svh; padding-bottom:100px; }
 .card-back #scene { visibility:hidden; }
 .card-back .about-summary { position:relative; width:100%; height:auto; overflow:visible; clip-path:none; margin:0; padding:144px 24px 16px; color:#20242f; font:16px/1.75 Inter,"Noto Sans SC",sans-serif; }
 .about-summary h1 { font-size:28px; line-height:1.25; margin:0 0 20px; }
 .about-summary p { margin:0 0 20px; }
 .card-back .about-flip { position:absolute; top:76px; left:auto; right:20px; bottom:auto; transform:none; }
 body.card-back .contact-bar { position:relative; left:auto; bottom:auto; width:calc(100% - 48px); max-width:none; transform:none; margin:0 24px; justify-content:flex-start; transition:none; }
}

@media (min-width:961px) and (min-height:501px) { .nav-shortcuts { bottom:20px; } }