@media(max-width:1100px){
  :root{--gutter:28px}
  .gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero-meta{display:none}
  .rate-notes{grid-template-columns:1fr}
  .schedule-trigger{grid-template-columns:110px 1fr 1fr auto}
  .schedule-content{padding-left:134px}
}

@media(max-width:780px){
  :root{--gutter:20px;--header-h:68px}
  .desktop-nav{display:none}
  .menu-button{display:block}
  .site-header{position:fixed;background:rgba(10,10,10,.64);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .site-header.menu-active{background:rgba(10,10,10,.76);border-color:rgba(255,255,255,.1)}
  .site-header.menu-active .mobile-menu{display:block}
  .site-header.menu-active .menu-button span:first-child{transform:translateY(3.5px) rotate(45deg)}
  .site-header.menu-active .menu-button span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

  .hero-inner{align-items:flex-end;padding-top:120px;padding-bottom:92px}
  .hero-copy{width:100%}
  .hero-media::after{background:linear-gradient(180deg,rgba(0,0,0,.32) 0%,rgba(0,0,0,.18) 35%,rgba(0,0,0,.88) 100%)}
  .hero h1{font-size:clamp(48px,15vw,72px)}
  .hero-description{margin-top:24px}
  .hero-actions{gap:20px;flex-wrap:wrap;margin-top:34px}
  .scroll-cue{display:none}

  .section{padding:88px 0}
  .section-heading{align-items:flex-start}
  .section-index{display:none}
  .section-heading h2{font-size:42px}

  .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .gallery-caption{display:none}

  .rate-layout{grid-template-columns:1fr}
  .rate-summary{padding:30px 0;border-right:0;border-bottom:1px solid var(--line)}
  .rate-notes{padding:30px 0;gap:30px}

  .schedule-toolbar{display:block}
  .schedule-note{display:none}
  .schedule-trigger{grid-template-columns:84px 1fr auto;gap:14px;padding:22px 0}
  .schedule-location{grid-column:2/3;margin-top:-10px;font-size:11px}
  .schedule-status{grid-column:3/4;grid-row:1/3;align-self:center}
  .schedule-status span{display:none}
  .schedule-date{font-size:27px}
  .schedule-content{padding:0 0 24px 98px;grid-template-columns:1fr}

  .contact-section{min-height:auto}
  .contact-grid{grid-template-columns:1fr;gap:56px}
  .contact-row{grid-template-columns:86px 1fr auto}

  .lightbox-nav{width:42px;height:42px;top:auto;bottom:22px}
  .lightbox-prev{left:calc(50% - 52px)}.lightbox-next{right:calc(50% - 52px)}
  .lightbox-figure{max-width:94vw}
  .lightbox-figure img{max-height:72vh}
}

@media(max-width:430px){
  :root{--gutter:16px}
  .mobile-menu{right:12px;width:210px}
  .mobile-menu a{font-size:12px;min-height:40px;padding:9px 10px}
  .brand-text{display:none}
  .hero h1{font-size:46px}
  .eyebrow{font-size:9px;letter-spacing:.16em}
  .service-tags{gap:6px}
  .service-tag{font-size:10px;padding:6px 9px}
  .text-link{font-size:12px}
  .section-heading h2{font-size:36px}
  .tabs{overflow-x:auto;padding-bottom:3px;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}
  .tab{white-space:nowrap}
  .rate-price{font-size:58px}
  .schedule-trigger{grid-template-columns:72px 1fr auto}
  .schedule-content{padding-left:86px}
  .contact-row{grid-template-columns:72px 1fr auto;gap:10px}
  .contact-row button{font-size:9px}
  .footer-inner{flex-direction:column}
}

@media(max-width:780px){
  .site-header{position:fixed;background:rgba(10,10,10,.64)}
  .site-header.menu-active{background:rgba(10,10,10,.76)}
  .mobile-menu{top:calc(var(--header-h) + 8px);right:var(--gutter);width:min(232px,calc(100vw - (var(--gutter) * 2)));padding:7px;border-radius:14px}
  .mobile-menu a{min-height:42px;padding:9px 11px;font-size:12px}
  .booking-ticker{grid-template-columns:1fr;gap:7px;margin-top:22px;padding:9px 0 10px}
  .booking-ticker-label{width:max-content;border-right:0;padding-right:0;font-size:9px}
  .booking-ticker-window{height:54px}
  .booking-flip-face,.booking-flip-static{grid-template-columns:64px minmax(0,1fr) auto;gap:10px;padding:3px 0}
  .booking-ticker-date{font-size:19px}
  .booking-ticker-copy strong{font-size:12px}
  .booking-ticker-copy small{font-size:9px}
  .booking-ticker-count{font-size:10px}
  .booking-ticker-count b{font-size:14px}
  .floating-top{right:16px;bottom:16px;width:48px;height:48px}
}

@media(max-width:430px){
  .brand-mark.feather-mark{width:34px;height:34px}
  .feather-mark svg{width:23px;height:23px}
  .booking-ticker{margin-top:20px}
  .booking-flip-face,.booking-flip-static{grid-template-columns:58px minmax(0,1fr) auto;gap:8px}
  .booking-ticker-copy small{display:none}
  .booking-ticker-count{font-size:9px}
}
@media(max-width:780px){.booking-ticker + .hero-actions{margin-top:24px}}

/* v1.3 mobile treatment for persistent background and welcome sequence */
@media(max-width:780px){
  .site-background{inset:-18px}
  .site-background img{object-position:center center}
  .hero::before{
    background:
      linear-gradient(180deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,.18) 34%,rgba(0,0,0,.84) 100%),
      linear-gradient(90deg,rgba(0,0,0,.24),rgba(0,0,0,.08));
  }
  .section{background:rgba(8,8,8,.70)}
  .works-section{background:rgba(8,8,8,.64)}
  .rates-section{background:rgba(10,10,10,.76)}
  .schedule-section{background:rgba(8,8,8,.70)}
  .contact-section{background:rgba(8,8,8,.74)}
  .site-footer{background:rgba(8,8,8,.80)}

  .welcome-logo{width:78px;height:78px}
  .welcome-logo svg{width:61px;height:61px}
  .welcome-screen.is-running .welcome-logo{animation-name:welcomeLogoFlightMobile}
  .welcome-copy{width:calc(100vw - 38px);transform:translate(-50%,18px)}
  .welcome-title{font-size:clamp(25px,7.2vw,32px);line-height:1.28;letter-spacing:.035em}
  .welcome-subtitle{margin-top:11px;font-size:clamp(13px,3.8vw,15px);letter-spacing:.12em}
  @keyframes welcomeLogoFlightMobile{
    0%{opacity:0;transform:translate(calc(-50% - 70vw),-50%) rotate(-10deg) scale(.9)}
    12%{opacity:1}
    57%{opacity:1;transform:translate(-50%,-50%) rotate(0deg) scale(1)}
    100%{opacity:1;transform:translate(-50%,calc(-50% - 64px)) rotate(-2deg) scale(.96)}
  }
}

@media(max-width:380px){
  .welcome-title{font-size:24px}
  .welcome-subtitle{font-size:12px;letter-spacing:.1em}
}

@media(prefers-reduced-motion:reduce) and (max-width:780px){
  .welcome-screen.is-running .welcome-logo{animation:none;opacity:1;transform:translate(-50%,calc(-50% - 64px))}
}

/* v1.4 mobile refinements */
@media(max-width:780px){
  .welcome-logo{width:82px;height:82px;clip-path:inset(0 100% 0 0);transform:translate(-50%,-50%) scale(.985)}
  .welcome-logo svg{width:63px;height:63px}
  .welcome-screen.is-running .welcome-logo{animation:welcomeLogoRevealFloatMobile 1.55s cubic-bezier(.19,.75,.2,1) forwards}
  .welcome-copy{width:calc(100vw - 34px);transform:translate(-50%,24px)}
  .welcome-message{font-size:clamp(18px,5.2vw,23px);line-height:1.5;letter-spacing:.11em}
  @keyframes welcomeLogoRevealFloatMobile{
    0%{clip-path:inset(0 100% 0 0);transform:translate(-50%,-50%) scale(.985)}
    58%{clip-path:inset(0 0 0 0);transform:translate(-50%,-50%) scale(1)}
    100%{clip-path:inset(0 0 0 0);transform:translate(-50%,calc(-50% - 66px)) scale(.97)}
  }

  .booking-ticker{padding:10px 11px;border-radius:14px}
  .rate-layout{border-radius:17px}
  .rate-summary{padding:30px 22px}
  .rate-notes{padding:26px 20px}
  .note-block{padding:18px;border-radius:13px}

  .schedule-list{gap:8px}
  .schedule-item{border-radius:15px}
  .schedule-trigger{padding:11px 12px;grid-template-columns:76px 1fr auto}
  .schedule-date{min-height:52px;padding:0 9px;border-radius:11px;font-size:24px}
  .schedule-content{padding:4px 14px 22px 92px}

  .contact-row{padding:14px 12px}
}

@media(max-width:430px){
  .welcome-message{font-size:18px;letter-spacing:.085em}
  .schedule-trigger{grid-template-columns:68px 1fr auto}
  .schedule-date{font-size:21px;min-height:48px}
  .schedule-content{padding-left:80px}
}

@media(prefers-reduced-motion:reduce) and (max-width:780px){
  .welcome-screen.is-running .welcome-logo{animation:none;clip-path:inset(0);opacity:1;transform:translate(-50%,calc(-50% - 66px))}
}

/* v1.5 mobile booking states */
@media(max-width:780px){
  .schedule-meta{align-items:flex-start;padding-bottom:24px}.schedule-meta .schedule-note{display:none}.schedule-legend{justify-content:flex-start;gap:10px}.legend-item{font-size:9px}
  .slot{min-height:36px;padding:8px 9px}.slot b{font-size:9px}.slot i{font-size:10px}
  .booking-confirm-card{padding:28px 20px 22px;border-radius:20px}.booking-confirm-card h2{font-size:29px}.booking-confirm-slot{grid-template-columns:1fr 1fr;padding:17px}.booking-confirm-slot strong,.booking-confirm-slot small{grid-column:1/-1}.booking-confirm-slot small{margin-top:-3px}.booking-confirm-actions{display:grid;grid-template-columns:1fr 1.25fr}.booking-primary,.booking-secondary{padding:0 12px}
}
@media(max-width:430px){.schedule-slots{gap:7px}.slot{font-size:11px}.booking-confirm-modal{padding:14px}.booking-confirm-slot{gap:9px}}

/* v1.7 */
@media (max-width:1100px){
  .gallery-grid{grid-template-columns:repeat(12,minmax(0,1fr))}
  .gallery-item.is-portrait{grid-column:span 6}
  .gallery-item.is-landscape{grid-column:span 6}
}
@media (max-width:700px){
  .hero-portals{grid-template-columns:1fr;gap:9px;width:100%;margin-top:28px}
  .hero-portal{min-height:72px;border-radius:17px;padding:11px 13px;grid-template-columns:28px 1fr 31px;gap:11px}
  .portal-copy strong{font-size:13px}.portal-copy small{font-size:7px}.portal-arrow{width:29px;height:29px}
  .gallery-grid{gap:7px}
  .gallery-item.is-portrait{grid-column:span 6}
  .gallery-item.is-landscape{grid-column:span 12}
}

/* ===== v1.8 mobile typography / gallery / lightbox ===== */
@media(max-width:780px){
  .service-tag{font-size:13px;padding:7px 11px}
  .booking-ticker-label{font-size:11px}.booking-ticker-date{font-size:21px}.booking-ticker-copy strong{font-size:14px}.booking-ticker-copy small{font-size:11px}.booking-ticker-count{font-size:11px}.booking-ticker-count b{font-size:15px}
  .portal-index{font-size:10px}.portal-copy small{font-size:9px}.portal-copy strong{font-size:15px}.portal-arrow{font-size:14px}
  .rate-label{font-size:13px}.rate-fact{font-size:15px}
  .schedule-note{display:block!important;font-size:13px}.legend-item{font-size:11px}
  .schedule-event{font-size:15px}.schedule-location{font-size:13px}.schedule-status{font-size:12px}
  .slot{font-size:13px;min-height:40px}.slot b{font-size:11px}.schedule-extra{font-size:13px}
  .gallery-caption{display:block}
  .gallery-meta{min-height:45px}.gallery-meta strong{font-size:13px}.gallery-meta span{font-size:11px}
  .lightbox-figure{width:96vw}.lightbox-viewport{height:72vh}.lightbox-figure figcaption{font-size:12px;padding:0 10px}.lightbox-hint{font-size:10px}
  .lightbox-toolbar{gap:7px}.lightbox-zoom{height:34px;min-width:48px;padding:0 10px}
}

/* ===== v1.9 contact modal / contact rows ===== */
@media(max-width:780px){
  .contact-row{grid-template-columns:82px minmax(0,1fr) auto;gap:12px;padding:19px 15px}
  .contact-row span:first-child{font-size:12px}
  .contact-row .contact-value-button{font-size:17px}
  .contact-row .contact-copy{font-size:12px!important;padding:7px 10px!important}
}
@media(max-width:430px){
  .contact-row{grid-template-columns:70px minmax(0,1fr) auto;gap:9px;padding:18px 12px}
  .contact-row .contact-value-button{font-size:16px}
}

/* ===== v1.13 final mobile overrides ===== */
@media(max-width:780px){
  .contact-row .contact-value-button{font-size:28px!important;line-height:1!important;min-height:38px!important;border:0!important;background:none!important;padding:0!important}
  .contact-row span:first-child{font-size:15px!important}
  .footer-inner{display:flex!important;flex-direction:row!important;justify-content:center!important;align-items:center!important;text-align:center!important}
  .site-footer{padding-bottom:max(30px,env(safe-area-inset-bottom))}
  .footer-inner p{width:100%;text-align:center;margin:0}
  .back-to-top{display:none!important}
}
@media(max-width:780px){
  .lightbox-figure{position:absolute!important;inset:0!important;width:100vw!important;height:100svh!important;max-width:none!important;max-height:none!important}
  .lightbox-viewport{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
  .lightbox-figure img{max-width:none!important;max-height:none!important}
}

/* ===== v1.14: mobile music controls stay inside the card ===== */
@media(max-width:780px){
  .music-panel{width:min(360px,calc(100vw - 24px));padding:14px}
  .music-controls{
    display:grid;
    grid-template-columns:1fr 42px 50px 42px 1fr;
    grid-template-areas:
      ". prev play next ."
      "lyrics lyrics volume volume volume";
    column-gap:8px;
    row-gap:11px;
    align-items:center;
  }
  .music-prev{grid-area:prev}
  .music-play{grid-area:play}
  .music-next{grid-area:next}
  .music-lyrics-toggle{
    grid-area:lyrics;
    justify-self:start;
    min-width:0!important;
    width:max-content;
    max-width:100%;
    padding:0 10px!important;
  }
  .music-lyrics-state{display:none}
  .music-volume{
    grid-area:volume;
    justify-self:stretch;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:7px;
    min-width:0;
    width:100%;
  }
  .music-volume input{width:100%;min-width:0;max-width:none}
}
@media(max-width:430px){
  .music-panel{width:calc(100vw - 20px);left:-2px;padding:13px}
  .music-controls{grid-template-columns:1fr 40px 48px 40px 1fr;column-gap:6px}
  .music-volume span{font-size:9px}
}

/* ===== v1.15 mobile: one-line music controls + larger schedule UI ===== */
@media(max-width:780px){
  .music-panel{padding:13px 12px 14px}
  .music-controls{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:5px!important;
    margin-top:11px;
  }
  .music-controls button{flex:0 0 auto;min-width:32px;height:34px}
  .music-controls .music-play{width:42px;height:42px}
  .music-lyrics-toggle{
    flex:0 0 auto!important;
    min-width:52px!important;
    width:auto!important;
    height:34px!important;
    padding:0 8px!important;
    gap:5px!important;
    justify-self:auto!important;
  }
  .music-lyrics-label{font-size:10px}
  .music-lyrics-state{display:none!important}
  .music-volume{display:none!important}
  .music-volume-step{
    display:flex!important;
    flex:0 0 auto;
    align-items:center;
    gap:3px;
    margin-left:1px;
    padding:2px 3px;
    border:1px solid rgba(255,255,255,.075);
    border-radius:999px;
    background:rgba(255,255,255,.018);
  }
  .music-volume-step button{
    width:30px!important;min-width:30px!important;height:30px!important;
    padding:0!important;border-color:transparent!important;background:transparent!important;
    font-size:16px!important;color:rgba(255,255,255,.72)!important;
  }
  .music-volume-step button:disabled{opacity:.25}
  .music-volume-value{min-width:31px;text-align:center;font-size:9px;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.54)}

  .schedule-section .schedule-toolbar .tab{font-size:14px;padding:10px 16px}
  .schedule-note{font-size:14px!important;line-height:1.65}
  .legend-item{font-size:12px!important}.my-booking-link{font-size:12px}
  .schedule-event{font-size:17px!important}.schedule-location{font-size:14px!important}.schedule-status{font-size:13px!important}
  .slot{font-size:14px!important;min-height:42px;padding:9px 12px}.slot b{font-size:12px!important}.slot i{font-size:13px}
  .schedule-extra{font-size:14px!important;line-height:1.7}
}
@media(max-width:390px){
  .music-controls{gap:3px!important}
  .music-controls button{min-width:30px;height:32px}
  .music-controls .music-play{width:40px;height:40px}
  .music-lyrics-toggle{min-width:48px!important;padding:0 6px!important}
  .music-volume-step{gap:1px;padding:1px 2px}
  .music-volume-step button{width:27px!important;min-width:27px!important;height:28px!important}
  .music-volume-value{min-width:27px;font-size:8px}
}
@media(max-width:780px){.schedule-date{font-size:29px!important}}

/* ===== v1.15.3 mobile hero / collaboration / lightbox refinements ===== */
@media(max-width:780px){
  /* Move the dense hero composition upward without changing desktop rhythm. */
  .hero-inner{padding-top:92px!important;padding-bottom:132px!important}
  .hero-description{max-width:92%;line-height:1.72}

  /* Keep 互勉合作 and 长期开放 on the same line, aligned to opposite sides. */
  .collab-card-statusline{width:100%;justify-content:space-between!important;gap:12px!important}
  .collab-card-statusline>strong{flex:0 1 auto}
  .collab-card-statusline .collab-card-open{margin-left:auto!important;flex:0 0 auto}

  /* Reserve a dedicated caption lane above the previous/next controls. */
  .lightbox-figure figcaption{
    bottom:82px!important;
    max-width:calc(100vw - 30px)!important;
    padding:7px 12px!important;
    font-size:12px!important;
    line-height:1.35!important;
  }
  .lightbox-nav{bottom:18px!important}
  .lightbox-hint{display:none!important}

  /* Mobile schedule closing note should be noticeably quieter than slot text. */
  .schedule-extra{font-size:12px!important;line-height:1.6!important}
}
@media(max-width:430px){
  .hero-inner{padding-top:84px!important;padding-bottom:126px!important}
  .collab-card-statusline>strong{font-size:18px!important}
  .collab-card-statusline .collab-card-open{font-size:11px!important}
  .lightbox-figure figcaption{bottom:80px!important;font-size:11px!important}
  .schedule-extra{font-size:12px!important}
}

/* ===== v1.15.4 mobile hero rhythm / two-up portals / date card fix ===== */
@media(max-width:780px){
  /* After compressing the CTA area, move the whole composition slightly back down while keeping the top tighter than older builds. */
  .hero-inner{padding-top:104px!important;padding-bottom:126px!important}
  .hero-description{
    margin-top:11px!important;
    max-width:94%;
    line-height:1.68;
  }
  .service-tags{margin-top:17px!important}

  /* Two compact actions on one line: no 01/02, no corner arrows on mobile. */
  .hero-portals{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
    margin-top:22px!important;
  }
  .hero-portal{
    min-height:70px!important;
    grid-template-columns:1fr!important;
    gap:0!important;
    padding:12px 12px 11px 14px!important;
    border-radius:16px!important;
  }
  .hero-portal::before{border-radius:16px 0 0 16px!important}
  .portal-index,.portal-arrow{display:none!important}
  .portal-copy{gap:4px!important}
  .portal-copy small{font-size:8px!important;letter-spacing:.13em!important;white-space:nowrap}
  .portal-copy strong{font-size:14px!important;line-height:1.22!important;white-space:nowrap}

  /* A clearer mobile availability card, using the same colored frame language as collaboration. */
  .booking-ticker{
    margin-top:20px!important;
    padding:11px 12px!important;
    border-radius:15px!important;
  }
  .booking-ticker::before{border-radius:15px 0 0 15px!important}
  .collab-card{border-color:rgba(255,190,111,.27)!important}

  /* Date typography grew over time; reserve enough physical width for the full MM.DD string. */
  .schedule-trigger{
    grid-template-columns:92px minmax(0,1fr) auto!important;
    column-gap:12px!important;
  }
  .schedule-date{
    width:88px!important;
    min-width:88px!important;
    padding:0 10px!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-align:center;
  }
  .schedule-location{grid-column:2/3!important}
  .schedule-content{padding-left:106px!important}
}

@media(max-width:430px){
  .hero-inner{padding-top:100px!important;padding-bottom:120px!important}
  .hero-description{margin-top:10px!important}
  .hero-portals{gap:7px!important}
  .hero-portal{min-height:66px!important;padding:10px 9px 10px 12px!important}
  .portal-copy small{font-size:7px!important;letter-spacing:.10em!important}
  .portal-copy strong{font-size:13px!important}
  .schedule-trigger{grid-template-columns:84px minmax(0,1fr) auto!important;column-gap:10px!important}
  .schedule-date{width:80px!important;min-width:80px!important;font-size:22px!important;padding:0 8px!important}
  .schedule-content{padding-left:98px!important}
}

@media(max-width:360px){
  .portal-copy small{display:none}
  .portal-copy strong{font-size:12px!important}
}

/* ===== v1.15.5 mobile section landing / schedule disclosure ===== */
@media(max-width:780px){
  .section-heading{scroll-margin-top:82px}
  /* Two typographic steps quieter than v1.15.4's 14px mobile instruction. */
  .schedule-note{font-size:12px!important;line-height:1.6!important}
  .schedule-status i.schedule-toggle-indicator{
    width:66px!important;
    height:34px!important;
    padding:0 9px!important;
    gap:7px!important;
  }
  .schedule-status i.schedule-toggle-indicator::before{font-size:11px!important}
  .schedule-status i.schedule-toggle-indicator::after{width:6px;height:6px}
}
@media(max-width:360px){
  .schedule-status i.schedule-toggle-indicator{width:60px!important;padding:0 7px!important;gap:6px!important}
  .schedule-status i.schedule-toggle-indicator::before{font-size:10px!important}
}

@media(max-width:780px){.gallery-meta strong{font-size:15px}.gallery-meta span{font-size:11.5px}}