/* English typography only. Local Fraunces and Newsreader are SIL OFL 1.1;
   see the license files in assets/fonts. */
@font-face{font-family:'VT Fraunces';src:url('./fonts/fraunces-latin-400.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'VT Newsreader';src:url('./fonts/newsreader-latin-400.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'VT Instrument Serif';src:url('./fonts/instrument-serif.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'VT Cormorant Garamond';src:url('./fonts/cormorant-garamond.otf') format('opentype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'VT IBM Plex Sans';src:url('./fonts/ibm-plex-sans.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}

/* Brand display: named sections and destination titles, rather than every heading. */
html[data-lang="en"] #placeMethod :is(#pm-heading,.place-method-case-heading h3),
html[data-lang="en"] #destinationScroll :is(.ds-copy--large,.ds-statement,.ds-bridge-title,.ds-capacity-headline,.ds-capacity-place),
html[data-lang="en"] #vinetreeEnding :is(.ve-head h2,.ve-tab-name,.ve-panel-content h3,.ve-invitation h2),
html[data-lang="en"] #editorialDepth .ed-name h3{font-family:'VT Fraunces',Georgia,serif;font-weight:400}
html[data-lang="en"] #landing .type-line{white-space:normal;text-wrap:balance;max-width:min(92vw,38ch)}
html[data-lang="en"] #hero .reveal-name{font-family:'VT Fraunces',Georgia,serif;font-weight:400;letter-spacing:.01em;text-wrap:balance;overflow-wrap:break-word}
html[data-lang="en"] #hero .reveal-slogan{font-family:'VT Newsreader',Georgia,serif;letter-spacing:.01em;overflow-wrap:break-word}
html[data-lang="en"] #followHer .fh-zh{display:none}
#tentStage .cs-en-break{display:none}
html[data-lang="en"] #tentStage .cs-en-break{display:initial}

/* Long narrative copy in destinations, the method, and brand stories. */
html[data-lang="en"] #destinationScroll :is(.ds-copy--support,.ds-copy--proof,.ds-fact,.ds-un-copy),
html[data-lang="en"] #placeMethod :is(.place-method-core,.place-method-case p),
html[data-lang="en"] #vinetreeEnding :is(.ve-definition,.ve-reveal p,.ve-projects li p),
html[data-lang="en"] #mapUnInterlude .strategy-description{font-family:'VT Newsreader',Georgia,serif;font-weight:400}

/* Functional copy and short interface labels. */
html[data-lang="en"] #landing .landing-enter-cue,
html[data-lang="en"] #vtLanguageSwitch,
html[data-lang="en"] #vtLanguageSwitch button,
html[data-lang="en"] #vtFindPanel,
html[data-lang="en"] #vtFindPanel :is(button,input,small,strong,p,h2,h3,label),
html[data-lang="en"] #placeMethod :is(.place-method-index-item,.place-method-case-heading small),
html[data-lang="en"] #vinetreeEnding :is(.ve-tab-index,.ve-tab-arrow,.ve-projects,.ve-contact),
html[data-lang="en"] #why-vinetree :is(.vwd-index,.vwd-signature,.vwd-side-label),
html[data-lang="en"] #destinationScroll :is(.ds-location,.ds-sequence-label,.ds-capacity-scale,.ds-capacity-guest,.ds-capacity-staff),
html[data-lang="en"] #vinetreeEnding :is(.ve-detail,.ve-overline,.ve-contact-note,.ve-count,.ve-contacts,.ve-qr-item){font-family:'VT IBM Plex Sans',Arial,sans-serif;}
html[data-lang="en"] #vtFindPanel :is(.vt-find-label,.vt-find-count,.vt-find-item small,.vt-find-source){letter-spacing:.08em;}
html[data-lang="en"] #whatBringsYou .identity-keywords{
  max-width:100%;
  margin-top:5px;
  font-size:clamp(13px,1vw,16px);
  line-height:1.4;
  letter-spacing:.025em;
  color:#c7cec3;
  opacity:.78;
  white-space:normal;
  text-wrap:balance;
}
html[data-lang="en"] #whatBringsYou .identity-zone.is-active .identity-keywords{color:#f0f2e9;opacity:1}
@media(max-width:700px){
  html[data-lang="en"] #whatBringsYou .identity-keywords{
    margin-top:2px;
    font-size:clamp(12px,3.25vw,14px);
    line-height:1.38;
    letter-spacing:.015em;
  }
}

/* Read each English statement as a sentence instead of three fixed-width Chinese parts. */
html[data-lang="en"] #distanceStory .ds-heard-sub{
  display:block;
  max-width:min(90vw,50ch);
  font-size:clamp(18px,1.8vw,28px);
  line-height:1.5;
  letter-spacing:.025em;
  text-wrap:pretty;
}
html[data-lang="en"] #distanceStory .ds-heard-sub :is(.ds-heard-key,.ds-heard-relation){
  display:inline;
  width:auto;
  margin:0;
  text-align:inherit;
  white-space:normal;
}

/* English mobile copy needs word boundaries and reading space within the existing scenes. */
@media(max-width:700px){
  html[data-lang="en"] #tentStage .cs-text-tent{padding:17svh 11vw 19svh;align-items:center}
  html[data-lang="en"] #tentStage .cs-tent{width:100%;max-width:76vw;min-width:0;font-size:clamp(17px,4.4vw,19px);line-height:1.48;letter-spacing:.025em;white-space:normal;overflow-wrap:break-word;word-break:normal;text-wrap:pretty}
  html[data-lang="en"] #tentStage .cs-tent br{display:none}
  html[data-lang="en"] #tentStage .cs-tent-mobile-break{display:block;height:clamp(8px,1.4svh,14px)}

  html[data-lang="en"] #distanceNatureStatement .hs-line{display:flex;flex-direction:column;align-items:center;gap:.12em;width:88vw;left:6vw;padding:0;text-align:center;white-space:normal;line-height:1.12}
  html[data-lang="en"] #distanceNatureStatement .hs-line .hs-big{max-width:100%;font-size:clamp(37px,10vw,46px);line-height:1.08;overflow-wrap:normal;white-space:normal}
  html[data-lang="en"] #distanceNatureStatement .hs-line .hs-sm{max-width:100%;font-size:clamp(16px,4.4vw,20px);white-space:normal;line-height:1.3}

  html[data-lang="en"] #distanceStory .ds-opening{gap:7svh}
  html[data-lang="en"] #distanceStory .ds-claim{display:block;max-width:88vw}
  html[data-lang="en"] #distanceStory .ds-giant{display:block;font-size:clamp(49px,13vw,62px);line-height:1.03;letter-spacing:-.025em;overflow-wrap:normal}
  html[data-lang="en"] #distanceStory .ds-claim.right .ds-giant{font-size:clamp(35px,9vw,44px);line-height:1.1;letter-spacing:-.015em}
  html[data-lang="en"] #distanceStory .ds-claim-text{display:block;margin-top:1em;font-size:clamp(16px,4vw,19px);line-height:1.45;letter-spacing:.015em;white-space:normal}
  html[data-lang="en"] #distanceStory .ds-rule-v{margin:0}
  html[data-lang="en"] #distanceStory .ds-heard{display:block;padding-top:12svh}
  html[data-lang="en"] #distanceStory .ds-heard-main{font-size:clamp(29px,8vw,36px);line-height:1.25;letter-spacing:.015em}
  html[data-lang="en"] #distanceStory .ds-echoes{height:70svh;min-height:0;font-size:clamp(15px,4vw,18px);letter-spacing:.015em}
  html[data-lang="en"] #distanceStory .ds-echo{max-width:90%;white-space:normal;line-height:1.35}
  html[data-lang="en"] #distanceStory .ds-echo.e1{left:3%;top:9%}
  html[data-lang="en"] #distanceStory .ds-echo.e2{right:4%;top:25%}
  html[data-lang="en"] #distanceStory .ds-echo.e3{left:12%;top:39%}
  html[data-lang="en"] #distanceStory .ds-echo.e4{right:2%;top:52%}
  html[data-lang="en"] #distanceStory .ds-echoes .ds-heard-subs{left:0;right:0;top:65%;gap:1.4svh}
  html[data-lang="en"] #distanceStory .ds-heard-sub{display:block;font-size:clamp(15px,3.8vw,18px);line-height:1.35;letter-spacing:0}
  html[data-lang="en"] #distanceStory .ds-heard-relation{width:auto;flex:none;margin:0 .3em}
  html[data-lang="en"] #distanceStory .ds-answer-word{font-size:clamp(65px,18vw,82px);line-height:1}
  html[data-lang="en"] #distanceStory .ds-answer-grid{gap:3svh}
  html[data-lang="en"] #distanceStory .ds-answer-lead,
  html[data-lang="en"] #distanceStory .ds-answer-vertical,
  html[data-lang="en"] #distanceStory .ds-answer-tail{font-size:clamp(18px,5vw,24px);line-height:1.4;letter-spacing:.02em}
  html[data-lang="en"] #distanceStory .ds-capacity-clarification,
  html[data-lang="en"] #distanceStory .ds-capacity-clarification span{white-space:normal;overflow-wrap:normal}
  html[data-lang="en"] #chapterCreate.ds-field-panel{min-height:max(1010px,140svh)}
  html[data-lang="en"] #chapterCreate .ds-field-copy{max-width:90vw;letter-spacing:.015em}
  html[data-lang="en"] #chapterCreate .ds-field-copy-small br{display:none}
  html[data-lang="en"] #chapterCreate .ds-field-emphasis{letter-spacing:.005em;line-height:1.2;overflow-wrap:normal}
  html[data-lang="en"] #chapterCreate .ds-place{width:clamp(96px,27vw,116px);white-space:normal;line-height:1.25}
  html[data-lang="en"] #chapterCreate .ds-place-name{overflow-wrap:normal}
  html[data-lang="en"] #chapterCreate .ds-place-capabilities{width:120px;max-width:35vw;line-height:1.3}
  html[data-lang="en"] #chapterCreate .ds-place.p1{left:18%}
  html[data-lang="en"] #chapterCreate .ds-place.p2{left:34%}
  html[data-lang="en"] #chapterCreate .ds-place.p3{left:50%}
  html[data-lang="en"] #chapterCreate .ds-place.p4{left:66%}
  html[data-lang="en"] #chapterCreate .ds-place.p5{left:82%}
  html[data-lang="en"] #distanceStory .ds-exclusive-lead{margin-bottom:6svh;font-size:clamp(18px,5vw,24px);letter-spacing:.02em;line-height:1.35}
  html[data-lang="en"] #distanceStory .ds-exclusive-now{font-size:clamp(27px,7vw,34px);letter-spacing:.01em;line-height:1.2}
  html[data-lang="en"] #distanceStory .ds-exclusive-yours{font-size:clamp(54px,14vw,72px);letter-spacing:.03em}

  html[data-lang="en"] #vinetree-world .vc-final-3col{left:6%;right:6%;top:12%;width:auto;display:grid;grid-template-columns:1fr;gap:.3em;font-size:clamp(13px,3.5vw,16px);line-height:1.3;letter-spacing:.01em}
  html[data-lang="en"] #vinetree-world .vc-final-3col>span{writing-mode:horizontal-tb;text-orientation:mixed;max-width:100%}
  html[data-lang="en"] #vinetree-world .vc-final-experience-title{top:39%;left:6%;right:6%;font-size:clamp(13px,3.5vw,16px);line-height:1.35}
  html[data-lang="en"] #vinetree-world .vc-final-experience-keywords{top:49%;left:6%;right:6%;font-size:clamp(12px,3.2vw,15px);line-height:1.5}
  html[data-lang="en"] #vinetree-world .vc-final-experience-keywords span{white-space:normal}
  html[data-lang="en"] #vinetree-world .vc-final-suhong-credit{left:6%;right:6%;bottom:7%;max-width:none;font-size:clamp(12px,3.2vw,15px);line-height:1.35;letter-spacing:.01em}
  html[data-lang="en"] #vinetree-world .vc-outer-final-copy{left:6vw;right:6vw;bottom:12px;z-index:3}
  html[data-lang="en"] #vinetree-world .vc-outer-final-copy span{max-width:none;margin:0 auto;font-size:12px;line-height:1.35;letter-spacing:.01em;text-wrap:balance}
  html[data-lang="en"] #vinetree-world .vc-renshouju .vc-blank-route{left:5%;top:5%;width:43%;align-items:flex-start;font-size:clamp(9px,2.5vw,11px);letter-spacing:0;line-height:1.25}
  html[data-lang="en"] #vinetree-world .vc-renshouju .vc-blank-route span{white-space:normal;text-align:left;overflow-wrap:break-word}
  html[data-lang="en"] #vinetree-world .vc-renshouju .vc-blank-route span:first-child{font-size:clamp(16px,4vw,20px);line-height:1.15;letter-spacing:0}
  html[data-lang="en"] #vinetree-world .vc-renshouju .vc-blank-route span:not(:last-child)::after{margin-left:8vw;margin-right:0}
  html[data-lang="en"] #vinetree-world .vc-renshouju-proof{right:5%;width:39%}
  html[data-lang="en"] #vinetree-world .vc-renshouju-proof--trees{top:12%}
  html[data-lang="en"] #vinetree-world .vc-renshouju-proof--rooms{top:36%}
  html[data-lang="en"] #vinetree-world .vc-renshouju-proof strong{font-size:clamp(38px,11vw,52px)}
  html[data-lang="en"] #vinetree-world .vc-renshouju-proof span{font-size:clamp(10px,2.8vw,12px);line-height:1.3;letter-spacing:0}

  html[data-lang="en"] .vineflower-gallery .vf-final{padding:28px 7vw 36px}
  html[data-lang="en"] .vineflower-gallery .vf-activity-row{display:grid;grid-template-columns:1fr;gap:12px;text-align:left;font-size:clamp(14px,3.8vw,17px)}
  html[data-lang="en"] .vineflower-gallery .vf-activity-row:first-child{margin-bottom:12px}
  html[data-lang="en"] .vineflower-gallery .vf-activity-name{justify-self:start;white-space:normal;max-width:100%;line-height:1.4}
  html[data-lang="en"] .vineflower-gallery .vf-bits-text{flex-wrap:wrap!important;white-space:normal!important}
  html[data-lang="en"] #why-vinetree .vwd-title-line [data-vwd-title-part]+[data-vwd-title-part]{margin-left:.24em}

  html[data-lang="en"] .vma-section:not(.vma-desktop) .vma-plane{width:92vw;left:50%}
  html[data-lang="en"] .vma-section:not(.vma-desktop) .vma-point[data-key="gaoligong"]{--vma-label-x:-57px!important}
  html[data-lang="en"] .vma-section:not(.vma-desktop) .vma-point[data-key="pingbian"]{--vma-label-y:20px!important}
  html[data-lang="en"] .vma-section:not(.vma-desktop) .vma-point[data-key="wantang"]{--vma-label-x:8px!important}
}

/* Cultural history accents in the railway and Renzi Bridge material. */
html[data-lang="en"] #destinationScroll .ds-rail-title,
html[data-lang="en"] #destinationScroll :is(.ds-bridge-title,.scene[data-id="6"] h2),
html[data-lang="en"] #placeMethod #pm-panel-4 .place-method-case-heading h3{font-family:'VT Cormorant Garamond',Georgia,serif;font-weight:400;letter-spacing:-.025em;line-height:1.08;max-width:min(72vw,720px);}

/* Interactive editorial questions form one consistent expressive family. */
html[data-lang="en"] #why-vinetree .vwd-question h2,
html[data-lang="en"] #why-vinetree .vwd-q02-question h2,
html[data-lang="en"] #why-vinetree .vwd-index-title{font-family:'VT Instrument Serif',Georgia,serif;font-weight:400;letter-spacing:-.012em;line-height:1.16;text-wrap:balance;max-width:min(30ch,100%);}
html[data-lang="en"] #why-vinetree .vwd-question h2 span,
html[data-lang="en"] #why-vinetree .vwd-q02-question h2 span{white-space:normal;}

/* English copy needs narrower measures and a different rhythm from Chinese. */
html[data-lang="en"] #placeMethod :is(.place-method-core,.place-method-case p){letter-spacing:0;line-height:1.5;max-width:52ch;overflow-wrap:break-word;}
html[data-lang="en"] #placeMethod :is(#pm-heading,.place-method-case-heading h3){letter-spacing:-.02em;line-height:1.15;text-wrap:balance;overflow-wrap:break-word;}
html[data-lang="en"] #destinationScroll .ds-copy{letter-spacing:0;overflow-wrap:break-word;}
html[data-lang="en"] #destinationScroll :is(.ds-glimpse-copy,.ds-fact,.ds-statement){letter-spacing:0;overflow-wrap:break-word;}
html[data-lang="en"] #vinetreeEnding :is(.ve-tab-name,.ve-panel-content h3,.ve-invitation h2){overflow-wrap:normal;word-break:normal;text-wrap:balance;}
html[data-lang="en"] #destinationScroll :is(.ds-copy--large,.ds-bridge-title,.ds-capacity-headline,.ds-capacity-place){text-wrap:balance;overflow-wrap:break-word}
html[data-lang="en"] #vinetreeEnding :is(.ve-tab-name,.ve-panel-content h3,.ve-invitation h2){overflow-wrap:break-word}
html[data-lang="en"] #vinetree-world .vc-final-suhong-title{display:none}

@media(max-width:760px){
  html[data-lang="en"] #why-vinetree.vwd-focus-continuous :is(.vwd-question h2,.vwd-q02-question h2){font-size:clamp(23px,6vw,27px)!important;line-height:1.18!important;max-width:32ch;}
  html[data-lang="en"] #destinationScroll :is(.ds-rail-title,.scene[data-id="6"] h2){font-size:clamp(29px,8vw,38px);max-width:75vw;}
  html[data-lang="en"] #placeMethod :is(#pm-heading,.place-method-core,.place-method-case-heading h3){max-width:100%;}
  html[data-lang="en"] #vinetreeEnding .ve-tab-name{font-size:clamp(32px,8.2vw,48px);letter-spacing:-.045em;}
  html[data-lang="en"] #vinetreeEnding .ve-panel-content h3{font-size:clamp(39px,10vw,58px);line-height:1.03;letter-spacing:-.045em;}
}
@media(max-width:390px){
  html[data-lang="en"] #why-vinetree.vwd-focus-continuous :is(.vwd-question h2,.vwd-q02-question h2){font-size:clamp(22px,5.8vw,24px)!important;}
  html[data-lang="en"] #destinationScroll :is(.ds-rail-title,.scene[data-id="6"] h2){font-size:clamp(27px,7.5vw,32px);}
}

/* Keep the five English method tabs compact so their full case copy fits below. */
@media(max-width:700px){
  html[data-lang="en"] #placeMethod .place-method-index{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    width:min(100%,330px);gap:2px 8px;margin:0 auto 8px;
  }
  html[data-lang="en"] #placeMethod .place-method-index-item{
    min-width:0;min-height:34px;padding:3px 0 5px;gap:4px;
  }
  html[data-lang="en"] #placeMethod .place-method-index-item:nth-child(5){grid-column:1/-1}
  html[data-lang="en"] #placeMethod .place-method-index-item::before{display:none}
  html[data-lang="en"] #placeMethod .place-method-number{font-size:10px;min-width:14px}
  html[data-lang="en"] #placeMethod .place-method-word{
    font-size:clamp(15px,4vw,17px);line-height:1.2;letter-spacing:.02em;
  }
  html[data-lang="en"] #placeMethod .place-method-map{
    --pm-map-height:min(260px,30svh);
    height:calc(var(--pm-map-height) + 160px);
  }
  html[data-lang="en"] #placeMethod .place-method-map-cases .place-method-case{
    top:calc(var(--pm-map-height) + 16px)!important;
  }
}

/* Separate the two-line capacity heading from the first row on phones. */
@media(max-width:800px){
  html[data-lang="en"] #destinationScroll .ds-capacity-grid{top:56%;row-gap:2svh}
}

/* Give the two English distance statements their own reading rhythm. */
html[data-lang="en"] #distanceNatureStatement .hs-line{
  left:50%;right:auto;width:min(84vw,760px);padding:0;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(9px,1.7vh,19px);text-align:center;white-space:normal;
  transform:translate(-50%,-50%);
}
html[data-lang="en"] #distanceNatureStatement .hs-line .hs-w{display:block;max-width:100%;letter-spacing:.01em;white-space:normal;}
html[data-lang="en"] #distanceNatureStatement .hs-line .hs-big{font-size:clamp(42px,5vw,76px);line-height:1.05;}
html[data-lang="en"] #distanceNatureStatement .hs-line .hs-sm{font-size:clamp(23px,2.45vw,37px);line-height:1.2;}
html[data-lang="en"] #distanceNatureStatement #hwA6{display:none;}
html[data-lang="en"] #distanceStory .ds-opening{grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);gap:clamp(26px,4vw,76px);}
html[data-lang="en"] #distanceStory .ds-claim{display:block;min-width:0;max-width:none;}
html[data-lang="en"] #distanceStory .ds-giant,
html[data-lang="en"] #distanceStory .ds-claim.right .ds-giant{display:block;font-size:clamp(34px,4vw,64px);line-height:1.12;letter-spacing:-.02em;}
html[data-lang="en"] #distanceStory .ds-claim-text{display:block;max-width:25ch;margin:clamp(16px,3vh,30px) 0 0;font-size:clamp(18px,1.55vw,25px);line-height:1.5;letter-spacing:.01em;white-space:normal;text-wrap:balance;}
@media(max-width:800px){
  html[data-lang="en"] #distanceStory .ds-opening{grid-template-columns:minmax(0,1fr);gap:clamp(27px,5svh,54px);}
  html[data-lang="en"] #distanceStory .ds-rule-v{width:100%;height:1px;}
}
@media(max-width:700px){
  html[data-lang="en"] #distanceNatureStatement .hs-line{left:50%;width:88vw;gap:clamp(13px,2.5svh,24px);}
  html[data-lang="en"] #distanceNatureStatement .hs-line .hs-big{font-size:clamp(34px,9vw,46px);}
  html[data-lang="en"] #distanceNatureStatement .hs-line .hs-sm{font-size:clamp(19px,5vw,24px);}
  html[data-lang="en"] #distanceStory .ds-opening-panel{min-height:100svh;padding-top:12svh;padding-bottom:12svh;}
  html[data-lang="en"] #distanceStory .ds-giant,
  html[data-lang="en"] #distanceStory .ds-claim.right .ds-giant{font-size:clamp(36px,9vw,48px);}
  html[data-lang="en"] #distanceStory .ds-claim-text{margin-top:clamp(12px,2svh,20px);font-size:clamp(17px,4.5vw,21px);line-height:1.45;}
}