/* Shared touch layout, including landscape phones and display safe areas. */
@media (max-width: 767px), (max-height: 500px) and (pointer: coarse) {
    html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
    body { overflow-x: hidden; }
    .device-notification { display: none !important; }
    .l-viewport { height: 100vh; height: 100dvh; }
    .l-wrapper { width: auto; max-width: none; margin: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
    .header { top: env(safe-area-inset-top); height: 72px; gap: 8px; z-index: 10; background: #0c0c0c; }
    .header--logo { min-height: 44px; flex-shrink: 0; }
    .header--logo p { font-size: 13px; margin-left: 8px; }
    .header--nav-toggle { width: 44px; height: 44px; }
    .header--cta { display: none !important; }
    .header .language-switch { margin-right: 0; }
    .language-switch__trigger { box-sizing: border-box; min-height: 44px; border-radius: 10px; padding: 10px; }
    .language-switch__menu { box-sizing: border-box; width: 180px; border-radius: 12px; padding: 6px; }
    .language-switch__menu a { box-sizing: border-box; min-height: 48px; border-radius: 8px; }
    .l-section { box-sizing: border-box; padding-top: calc(84px + env(safe-area-inset-top)); padding-bottom: max(24px, env(safe-area-inset-bottom)); overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; touch-action: pan-y; }
    #viewport { touch-action: pan-y !important; }
    .intro, .about, .work { box-sizing: border-box; width: 100%; max-width: 100%; height: auto; min-height: 100%; justify-content: flex-start; padding: 12px 0 24px; }
    .intro--banner { height: auto; min-height: 310px; padding-bottom: 32px; }
    .intro--banner h1 { font-size: clamp(32px, 8.5vw, 52px); line-height: 1.12; margin: 12px 0 28px; max-width: 100%; overflow-wrap: break-word; }
    .intro--banner button { min-height: 48px; padding: 12px 16px; border-radius: 10px; background: #0f33ff; }
    .intro--banner::before, .intro--banner::after { display: none; }
    .intro--options { display: grid; gap: 12px; }
    .intro--options > a { box-sizing: border-box; max-width: none; margin: 0; padding: 16px; border: 1px solid #292c3b; border-radius: 14px; background: #12141e; }
    .intro--options h3 { margin: 0 0 6px; font-size: 14px; }
    .intro--options p { font-size: 14px; line-height: 1.6; margin: 0; }
    .cosmic-hero { right: 0; bottom: 0; width: 180px; height: 220px; opacity: .45; pointer-events: none; }
    .home-about__body { max-height: none; overflow: visible; padding-right: 0; font-size: 16px; }
    .about h2, .work h2 { font-size: clamp(26px, 7vw, 36px); line-height: 1.2; margin-top: 8px; }
    .outer-nav { left: 43%; right: 12px; max-height: 80dvh; overflow-y: auto; }
    .outer-nav > li { font-size: clamp(22px, 6.5vw, 31px); min-height: 48px; line-height: 1.5; }
    .outer-nav > li::before { height: 2px; pointer-events: none; }
    [data-portfolio-carousel] { --portfolio-size: clamp(170px, 57vw, 260px); }
    [data-portfolio-carousel] .slider { overflow: hidden; }
    [data-portfolio-carousel] .slider--prev, [data-portfolio-carousel] .slider--next { width: 44px; height: 44px; }
    [data-portfolio-carousel] .slider--prev { left: 0; }
    [data-portfolio-carousel] .slider--next { right: 0; }
    #contact { padding-top: calc(84px + env(safe-area-inset-top)); align-items: flex-start; }
    .contact-panel { width: 100%; max-height: none; overflow: visible; padding: 0 0 24px; }
    .contact-fields { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .contact-field input, .contact-field textarea, .contact-phone select { font-size: 16px; min-height: 48px; border-radius: 12px; }
    .contact-field textarea { min-height: 120px; }
    .contact-phone { gap: 8px; }
    .contact-phone select { width: 125px; padding: 12px 8px; }
    .contact-field label, .contact-services legend { font-size: 14px; }
    .contact-services { gap: 10px; }
    .contact-services span { box-sizing: border-box; min-height: 44px; display: flex; align-items: center; font-size: 13px; }
    .contact-submit { flex-direction: column; align-items: stretch; gap: 12px; }
    .contact-submit button { min-height: 52px; font-size: 16px; border-radius: 12px; white-space: normal; }
    .contact-submit small { max-width: none; font-size: 12px; line-height: 1.6; }
    .contact-intro { font-size: 15px; line-height: 1.6; }
    .content-header { padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); gap: 12px; }
    .content-nav { order: 3; width: 100%; gap: 8px; justify-content: space-between; }
    .content-nav a { min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; }
    .content-main { padding: 28px max(16px, env(safe-area-inset-right)) max(40px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
    .content-main h1 { font-size: clamp(28px, 8vw, 42px); line-height: 1.15; overflow-wrap: anywhere; }
    .content-lead, .article-body { font-size: 16px; line-height: 1.75; }
    .content-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .content-card { min-width: 0; padding: 20px; border-radius: 16px; }
    .content-card img, .article-cover { max-width: 100%; border-radius: 12px; }
    .article-body iframe, .article-body video { max-width: 100%; }
    .article-body table { display: block; max-width: 100%; overflow-x: auto; }
    .topic-nav { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; }
    .topic-nav a { flex-shrink: 0; min-height: 44px; box-sizing: border-box; border-radius: 24px; }
    .content-pagination { flex-wrap: wrap; gap: 16px; }
    .content-pagination a { min-height: 44px; display: inline-flex; align-items: center; }
    a, button, summary { touch-action: manipulation; }
}
@media (prefers-reduced-motion: reduce) {
    .section, .outer-nav, .outer-nav > li { transition: none !important; }
}