/* Mobile reading and navigation, with the existing paper / dots / red signal. */
.mobile-menu{display:none}
.profile-viewer{overflow:auto;overscroll-behavior:contain;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px)}
.profile-viewer-head{position:sticky;top:0;z-index:1;background:var(--paper);padding-bottom:12px;border-bottom:1px solid var(--line)}
.gateway-body .logo-stage{touch-action:pan-y pinch-zoom}

@media(max-width:760px){
  .wrap{width:calc(100% - 32px)}
  .site-header{position:sticky;top:0}
  .header-inner{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding-block:10px;min-height:64px}
  .brand-lockup{gap:8px 16px}
  .logo img{width:88px}
  .edition-link{padding-left:16px;font-size:.875rem;color:var(--ink)}
  .edition-nav{display:none}
  .mobile-menu{display:block;border:0;margin:0;min-width:0}
  .mobile-menu summary{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;padding:8px 0;list-style:none;font-size:.875rem}
  .mobile-menu summary::-webkit-details-marker{display:none}
  .mobile-menu summary svg{flex:none;transition:transform .2s}
  .mobile-menu[open] summary svg{transform:rotate(180deg)}
  .mobile-menu[open] summary{color:var(--signal)}
  .mobile-menu .mobile-nav{position:absolute;inset:100% 0 auto;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:8px 16px;background:var(--paper);border:1px solid var(--ink);box-shadow:0 16px 24px rgba(23,23,23,.08);max-height:calc(100vh - 140px);max-height:calc(100dvh - 140px);overflow:auto;overscroll-behavior:contain}
  .mobile-menu:not([open]) .mobile-nav{display:none}
  .mobile-nav a{min-height:52px;width:100%;padding:12px 0;border-bottom:1px solid var(--line)}
  .mobile-nav a:last-child{border-bottom:0}
  .mobile-nav a[aria-current]{text-decoration:none}
  .brand-nav{justify-self:end}
  .brand-nav a{padding-block:8px}
  .gateway-body .site-header{position:relative}
  .gateway-body .header-inner{display:flex;min-height:64px;padding-block:10px}
  .gateway-body .visual-gateway{padding:0 0 28px}
  .gateway-body .logo-stage{height:clamp(152px,43vw,240px)}
  .gateway-body .gateway-description{font-size:.875rem;line-height:1.8;margin:8px 0 24px;word-break:keep-all;overflow-wrap:anywhere}
  .gateway-body .year-entry{flex-direction:column;align-items:stretch;gap:20px;padding:24px 0;min-height:0}
  .gateway-body .year-entry .year-number{font-size:clamp(2.25rem,10vw,4.5rem);line-height:1.2;margin-bottom:12px;letter-spacing:-.035em}
  .gateway-body .year-entry .year-enter{align-self:flex-start;display:flex;align-items:center;gap:16px;min-height:44px;font-size:.875rem}
  .gateway-body .year-enter>span{margin:0;font-size:1.75rem}
  .hero{padding:28px 0 24px}
  .hero .hero-title{font-size:clamp(1.5rem,10.4vw,4.75rem);line-height:1.2;white-space:normal;overflow-wrap:anywhere}
  .hero-heading{margin-bottom:16px}
  .hero-context{gap:12px;margin-bottom:24px}
  .hero-date{padding:16px 0;gap:4px}
  .day-schedule a,.day-schedule a+a,.hero .day-schedule a,.hero .day-schedule a+a{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:6px 12px;padding:16px 0;border-left:0}
  .day-schedule a>.mono{flex:1 1 10rem}
  .day-schedule strong{flex:none;font-size:1rem}
  .day-schedule a>span:last-child{flex-basis:100%}
  .hero .day-schedule{grid-template-columns:1fr}
  .hero .day-schedule a+a{border-top:1px solid var(--line)}
  .entry-row{grid-template-columns:20px minmax(0,1fr);gap:6px 12px;min-height:92px;padding:16px 0}
  .entry-row .path-title{font-size:clamp(1.5rem,6.2vw,2.5rem);line-height:1.3}
  .path-enter{min-height:24px}
  .subpage-header{padding:24px 0}
  .subpage-header h1{font-size:clamp(1.75rem,7.5vw,2.75rem);line-height:1.25}
  .subpage-header>.mono{font-size:.8125rem;line-height:1.6}
  .performance-intro,.forum-intro{padding:24px 0;gap:24px}
  .performance-intro .event-meta,.forum-intro .event-meta{order:-1}
  .event-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr));gap:16px 24px;border:0}
  .event-meta>div,.event-meta>div+div{padding:0 0 16px;border:0;border-bottom:1px solid var(--line)}
  .event-meta small{font-size:.875rem;margin-bottom:8px}
  .event-meta strong{line-height:1.75}
  .time-range{font-size:.875rem;line-height:1.75}
  .program-grid{grid-template-columns:1fr;gap:0}
  .card{display:flex;flex-direction:row;flex-wrap:wrap;align-items:start;gap:16px;padding:24px 0;border-bottom:1px solid var(--line)}
  .card:first-child{padding-top:0}
  .card:last-child{border-bottom:0;padding-bottom:0}
  .card .portrait{aspect-ratio:1/1;flex:0 1 7rem;width:7rem;max-width:100%;align-self:start}
  .card-text{flex:1 1 10rem;min-width:0;padding:0;border:0}
  .card .team{font-size:.875rem;line-height:1.55;margin-bottom:8px;text-transform:none}
  .card h3{font-size:1.125rem;line-height:1.5;margin-bottom:8px}
  .card .summary{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:1rem;line-height:1.7}
  .card .read{margin-top:8px;min-height:44px}
  .detail-header{padding:16px 0 24px}
  .detail-header h1{font-size:clamp(1.5rem,6.6vw,2rem);line-height:1.4;margin:12px 0;letter-spacing:-.02em}
  .detail-header>.mono{font-size:.8125rem}
  .detail-layout{padding:24px 0 40px;gap:32px}
  .detail-aside{grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr));gap:16px}
  .detail-aside .portrait{width:100%;max-width:none}
  .profile-caption{margin:8px 0 0}
  .data-list>div{padding:12px 0}
  .data-list dt{margin-bottom:4px}
  .detail-main h2{font-size:1.25rem;line-height:1.5;margin-bottom:16px}
  .detail-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,8rem),1fr));gap:12px;padding:24px 0}
  .detail-nav a{align-items:center;padding:12px;min-height:48px;text-decoration:none;border:1px solid var(--line);line-height:1.65}
  .detail-all{grid-column:1/-1;grid-row:1;justify-content:center;border-color:var(--ink)!important}
  .detail-prev,.detail-next{grid-column:auto;grid-row:auto}
  .profile-viewer{width:calc(100% - 24px);max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);padding:12px}
  .profile-viewer-head{gap:8px 12px;margin-bottom:12px;align-items:flex-start}
  .profile-close{margin-left:auto;flex:none}
  .profile-image{max-height:calc(100vh - 144px);max-height:calc(100dvh - 144px)}
  .contact-section{padding:28px 0}
  .contact-mail,.contact-phone{min-height:48px;font-size:1rem}
  .visit-heading{margin-bottom:20px}
  .visit-details{gap:20px}
  .location-section{margin-top:16px;padding:32px 0}
  .location-information h3{font-size:1.125rem}
  .map-button{width:100%;min-height:48px}
  .location-grid{gap:24px}
  .footer{gap:24px;padding:28px 0}
  .footer-links{gap:12px}
}
@media(max-width:359px){
  .card{gap:12px}
  .card .portrait{flex-basis:6rem;width:6rem}
}
@media(max-width:760px) and (max-height:480px){.site-header{position:relative}}
@media(hover:none),(pointer:coarse){
  .signal-surface:active::before{opacity:1}
  .card:active .portrait,.portrait-link:active{border-color:var(--signal)}
  .card:active h3,.mobile-menu summary:active,.mobile-nav a:active{color:var(--signal)}
  .gateway-body .logo-stage-link:active{background:radial-gradient(ellipse at center,rgba(23,23,23,.035),transparent 70%)}
}
@media(prefers-reduced-motion:reduce){.mobile-menu summary svg{transition:none}}
@media(forced-colors:active){.mobile-nav,.detail-nav a{border-color:ButtonText}}

/* KR / EN belongs to the header on every route, including the landing page. */
.language-switch{display:flex;flex:none;align-items:center;gap:2px;margin-left:0;white-space:nowrap;font-size:.875rem}
.language-link{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;text-decoration:none}
.language-switch>span{color:var(--muted);min-width:.75em;text-align:center}
.language-link:hover{color:var(--signal)}
.language-link[aria-current]{color:var(--signal);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.header-inner>.edition-nav,.header-inner>.brand-nav{margin-left:auto}
html[lang="en"] .prose,html[lang="en"] .summary{word-break:normal}
html[lang="en"] .major-name,html[lang="en"] .data-list dd,html[lang="en"] .card h3{word-break:normal;overflow-wrap:anywhere}
@media(min-width:761px) and (max-width:1000px){
  .header-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 24px}
  .header-inner .brand-lockup{grid-column:1;grid-row:1}
  .header-inner .language-switch{grid-column:2;grid-row:1}
  .header-inner>.edition-nav,.header-inner>.brand-nav{grid-column:1/-1;grid-row:2;margin-left:0}
}
@media(max-width:760px){
  .header-inner,.gateway-body .header-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 16px;padding-block:8px}
  .header-inner .brand-lockup{display:contents}
  .header-inner .logo{grid-column:1;grid-row:1;justify-self:start}
  .header-inner .header-sub{display:none}
  .header-inner .language-switch{grid-column:2;grid-row:1;justify-self:end}
  .header-inner .edition-link{grid-column:1;grid-row:2;justify-self:start;padding-left:0;border:0}
  .header-inner .mobile-menu{grid-column:2;grid-row:2;justify-self:end}
  .header-inner>.brand-nav{grid-column:1/-1;grid-row:2;justify-self:start;margin-left:0}
  .mobile-menu .mobile-nav{max-height:calc(100vh - var(--header-offset) - 16px);max-height:calc(100dvh - var(--header-offset) - 16px)}
  .language-switch{letter-spacing:0}
}
@media(forced-colors:active){.language-link[aria-current]{color:LinkText;text-decoration-thickness:2px}}