/* =========================================================
   Responsive — 全站自适应
   WAP ≤767 | iPad 768–1024 | PC ≥1025 | 宽屏 ≥1280
   流体字号变量定义在 site.css :root
   ========================================================= */

html{
  font-size:100%;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{font-size:var(--fs-body)}
.wrap{padding-inline:var(--space-gutter);max-width:100%;box-sizing:border-box}
img,svg,video,canvas,iframe{max-width:100%;height:auto}
.story-card,.card,.care-col,.journal-side,.case-tile,.suite-panel,
.article,.article-detail,.article-single,.pagehead-content{min-width:0}

/* —— 流体字号接线（全站页面） —— */
.kicker,.eyebrow{font-size:var(--fs-xs)}
.title{font-size:var(--fs-h2)}
.intro,.hero p,.pagehead p,.pagehead-description,
.manifesto-copy > p,.home-intro-excerpt{font-size:var(--fs-lead)}
.hero h1{font-size:var(--fs-h1)}
.pagehead h1{font-size:clamp(28px,3.2vw + 10px,56px)}
.article-header h1,
.article-detail .article-header h1{font-size:clamp(24px,2.4vw + 10px,44px)}
.button{font-size:clamp(11px,.12vw + 10.5px,12px)}
.section,
.care,
.home-intro,
.continuum,
.cases-home,
.manifesto,
.atmosphere,
.journal,
.concierge,
.story-list-section,
.dept-landing{padding-block:var(--space-section)}

/* —— 图片框 —— */
.hero-media,
.suite-panel .bg,
.continuum-visual,
.pagehead:before{
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}
.media-cover,.atmosphere-rail a,.suite-panel{overflow:hidden}
.media-cover img,.atmosphere-rail img{
  width:100%;height:100%;object-fit:cover;object-position:center;display:block;
}
.media-frame,.card-image,.story-media{
  position:relative;display:block;overflow:hidden;width:100%;
  background:var(--frame-bg,#ebe6df);aspect-ratio:4 / 3;
}
.media-frame img,.card-image img,.story-media img{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:contain;object-position:center;display:block;
}
.home-intro-media,.manifesto-media{
  position:relative;display:block;overflow:hidden;width:100%;
  background:var(--void,#161311);aspect-ratio:4 / 3;
}
.home-intro-media img,.manifesto-media img{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:center;display:block;
}
.article-body img,.article-content img{
  display:block;width:100%;max-width:100%;height:auto;margin-inline:auto;
}
.article-body table{
  display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.brand img,.brand-logo,.footer-qr-image img{object-fit:contain}
.atmosphere-rail a{position:relative;min-height:0;aspect-ratio:4 / 5;height:auto}
.atmosphere-rail a:first-child{aspect-ratio:3 / 4}
.atmosphere-rail img{position:absolute;inset:0}

/* ========== iPad / 平板 768–1024 ========== */
@media (min-width:768px) and (max-width:1024px){
  :root{
    --header-h:72px;
    --space-section:clamp(64px,6.5vw,88px);
    --fs-h1:clamp(30px,3vw + 8px,46px);
    --fs-h2:clamp(24px,1.5vw + 12px,34px);
    --fs-phone:clamp(32px,3.8vw,46px);
    --wrap:min(960px,100%);
  }
  .header .wrap{min-height:72px;gap:14px}
  .brand-logo{width:160px;max-height:48px}

  .hero{height:min(100vh,760px);min-height:500px}
  .hero-copy{padding-bottom:96px;max-width:540px}
  .hero-cta .button{padding:13px 22px}

  .suite-grid{grid-template-columns:1fr 1fr;gap:14px}
  .suite-panel{min-height:0;aspect-ratio:5 / 4}
  .suite-inner{padding:24px 22px 26px}

  .care-grid{grid-template-columns:1fr 1fr}
  .continuum-grid{grid-template-columns:1fr 1fr;gap:14px}
  .cases-grid{gap:14px}
  .case-tile{flex-basis:calc((100% - 14px) / 2);width:calc((100% - 14px) / 2)}
  .home-intro-grid,.manifesto-grid{grid-template-columns:1fr 1fr;gap:28px}
  .atmosphere-rail{grid-template-columns:1.1fr 1fr 1fr;gap:12px}
  .journal-layout{grid-template-columns:1.05fr .95fr;gap:22px}

  .story-grid{grid-template-columns:1fr 1fr;gap:18px}
  .grid{grid-template-columns:1fr 1fr;gap:18px}
  .story-media,.card-image{aspect-ratio:16 / 11}

  .dept-landing{padding-block:var(--space-section)}
  .article,.article-detail,.article-single{
    width:calc(100% - 48px);margin:48px auto 80px;
  }
  .article-nav{grid-template-columns:1fr 1fr}
}

/* ========== 手机 / WAP ≤767 ========== */
@media (max-width:767px){
  :root{
    --header-h:64px;
    --space-section:clamp(52px,11vw,68px);
    --fs-h1:clamp(26px,6.8vw,34px);
    --fs-h2:clamp(22px,5.2vw,28px);
    --fs-phone:clamp(26px,7.5vw,38px);
    --fs-display:clamp(24px,5.5vw,34px);
    --wrap:100%;
  }
  body{line-height:1.75}
  .header .wrap{min-height:64px}
  .brand-logo{width:140px;max-height:42px}
  .button{padding:13px 18px;letter-spacing:.12em}

  .hero{height:100svh;min-height:460px;max-height:none}
  .hero-copy{padding-bottom:84px;max-width:100%}
  .hero-brand{font-size:clamp(16px,4.6vw,22px);letter-spacing:.08em}
  .hero h1{max-width:100%;letter-spacing:.02em}
  .hero-cta{gap:10px;width:100%}
  .hero-cta .button{flex:1 1 auto;min-width:0;padding:12px 16px}
  .hero-controls{bottom:18px;gap:10px}
  .hero-arrow{width:40px;height:40px}

  .promise{padding:16px 0}
  .promise-line{gap:8px 12px;letter-spacing:.04em}

  .suite-grid{grid-template-columns:1fr;gap:12px}
  .suite-panel{min-height:0;aspect-ratio:16 / 10}
  .suite-inner{padding:20px 16px 22px}

  .care-grid,
  .continuum-grid,
  .home-intro-grid,
  .manifesto-grid,
  .atmosphere-rail,
  .journal-layout,
  .story-grid,
  .grid{grid-template-columns:1fr !important}
  .care-col{padding:22px 18px 26px}
  .care-col + .care-col{border-left:0;border-top:1px solid var(--line)}
  .case-tile{flex-basis:100% !important;width:100% !important}
  .continuum-card{grid-template-rows:140px 1fr}
  .home-intro-media,.manifesto-media{aspect-ratio:4 / 3}

  .atmosphere-head{flex-direction:column;align-items:flex-start}
  .atmosphere-head .intro{text-align:left;max-width:100%}
  .atmosphere-rail a,
  .atmosphere-rail a:first-child{aspect-ratio:16 / 10;min-height:0}

  .journal-main a{grid-template-columns:56px 1fr;gap:12px;padding:18px 0}
  .journal-side{padding:22px 18px}
  .concierge{text-align:center}
  .concierge-actions{gap:8px}
  .concierge-actions .button{flex:1 1 calc(50% - 8px);min-width:0}

  .pagehead{min-height:200px}
  .pagehead-content{padding:84px var(--space-gutter) 32px}
  .pagehead h1,.pagehead p,.pagehead-description{max-width:100%;overflow-wrap:anywhere}

  .subnav{
    gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch;
    flex-wrap:nowrap;scrollbar-width:none;
  }
  .subnav::-webkit-scrollbar{display:none}
  .subnav a{
    flex:0 0 auto;white-space:nowrap;padding:12px 14px;
    font-size:var(--fs-sm);min-height:44px;
    display:inline-flex;align-items:center;
  }

  .story-media,.card-image{aspect-ratio:16 / 10}
  .story-body{padding:18px 16px 22px}
  .story-card h2{font-size:clamp(17px,4.5vw,20px)}

  .article,.article-detail,.article-single{
    width:calc(100% - 28px);margin:24px auto 36px;
  }
  .article-body{line-height:1.95;font-size:var(--fs-lead)}
  .article-body h2{margin:1.4em 0 .55em}
  .article-body h3{margin:1.2em 0 .45em}
  .article-header{margin-bottom:28px;padding-bottom:20px}
  .article-nav{grid-template-columns:1fr;margin-top:28px}
  .article-footer-action{margin-top:24px}
  .article-nav-next{
    text-align:left;border-left:0;border-top:1px solid var(--line);padding-left:8px;padding-top:20px;
  }
  .article-nav-next .article-nav-label{text-align:left}

  .dept-landing{padding:40px 0 56px}
  .dept-cta .button{flex:1 1 auto;min-width:0}

  .pager{gap:6px;margin-top:28px}
  .pager a,.pager .page-num{min-width:38px;height:38px;padding:0 8px;font-size:12px}
}

/* ========== 小屏手机 ≤380 ========== */
@media (max-width:380px){
  .hero-brand{font-size:15px}
  .button{padding:12px 14px;letter-spacing:.1em}
  .care-col{padding:18px 14px 22px}
  .journal-main a{grid-template-columns:48px 1fr}
  .concierge-actions .button{flex-basis:100%}
  .pager a:first-child,.pager a:last-child{display:none}
  .brand-logo{width:128px;max-height:38px}
}

/* ========== 宽屏 PC ≥1280 ========== */
@media (min-width:1280px){
  .story-media,.card-image{aspect-ratio:4 / 3}
  .atmosphere-rail a:first-child{aspect-ratio:3 / 4}
  .manifesto-media{aspect-ratio:5 / 4}
  .case-tile{flex-basis:calc((100% - 36px) / 3);width:calc((100% - 36px) / 3)}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ========== 预约条（平板/手机） ========== */
.call-bar{
  position:fixed;z-index:88;
  left:0;right:0;bottom:0;top:auto;
  display:none;
  flex-direction:row;flex-wrap:nowrap;
  align-items:center;justify-content:center;gap:14px;
  width:100%;max-width:none;margin:0;box-sizing:border-box;
  min-height:48px;
  padding:10px max(20px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left));
  background:var(--void,#161311);color:#fff;
  border:0;border-top:1px solid rgba(212,188,150,.45);border-radius:0;
  box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  text-decoration:none;
  transition:transform .3s var(--ease,cubic-bezier(.22,1,.36,1));
}
.call-bar-label{
  flex:none;white-space:nowrap;
  font-size:12px;letter-spacing:.18em;opacity:.75;font-weight:400;
  writing-mode:horizontal-tb;
}
.call-bar-phone{
  flex:none;white-space:nowrap;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:clamp(18px,4.8vw,21px);font-weight:600;letter-spacing:.12em;
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;line-height:1;
}
.call-bar.is-hidden{transform:translateY(110%);pointer-events:none}

@media (max-width:1024px){
  .call-bar{display:flex}
  body.has-call-bar .footer{
    padding-bottom:calc(56px + env(safe-area-inset-bottom,0px));
  }
  body.has-call-bar.call-dock-off .footer,
  body.has-call-bar:has(.call-bar.is-hidden) .footer{
    padding-bottom:8px;
  }
  body.has-call-bar .back-top{bottom:calc(64px + env(safe-area-inset-bottom,0px));z-index:89}
  body.has-call-bar.call-dock-off .back-top,
  body.has-call-bar:has(.call-bar.is-hidden) .back-top{
    bottom:max(20px,env(safe-area-inset-bottom,0px));
  }
}
@media (min-width:1025px){
  .call-bar{display:none!important}
}

/* ========== 减弱动效 ========== */
@media (prefers-reduced-motion:reduce){
  .card-image img,.story-media img,.home-intro-media img,
  .manifesto-media img,.atmosphere-rail img,.media-frame img,
  .call-bar{transition:none}
  .card:hover .card-image img,.story-card:hover .story-media img,
  .home-intro-media:hover img,.manifesto-media:hover img,
  .atmosphere-rail a:hover img,.media-frame:hover img{transform:none}
}