html{scroll-behavior:auto}
.mobile-pen-story{display:contents}
.mobile-pen-trace{display:none}

/* The final mobile edition is composed for the usable browser viewport.
   Shared desktop layouts and archived studies keep their original proportions. */
@media(max-width:700px){
 .hero-folio{
  --hero-height:clamp(560px,100svh,1000px);
  --hero-type:min(25vw,calc(var(--hero-height)*.135));
  --hero-type-top:clamp(80px,calc(var(--hero-height)*.135),124px);
  height:auto;min-height:var(--hero-height);max-height:none;
  padding-top:calc(var(--hero-type-top) + var(--hero-type)*2.05 + 22px);
  padding-bottom:calc(var(--hero-height)*.39);
 }
 .folio-space{perspective:calc(var(--hero-height)*1.6)}
 .folio-words{font-size:var(--hero-type)}
 .folio-private{top:var(--hero-type-top)}
 .folio-capital{top:calc(var(--hero-type-top) + var(--hero-type)*1.06)}
 .folio-copy{position:relative;top:auto;bottom:auto;left:auto;margin-left:8%;width:84%;max-width:none;font-size:14px;line-height:1.55}
 .folio-ma{font-size:min(29vw,calc(var(--hero-height)*.17));bottom:40px;right:8%}
 .folio-next-sheet{height:32px}
 /* Keep oversized display lettering inside its artboard during Android text
    autosizing. Body copy and controls still enlarge; browser zoom stays enabled. */
 .folio-words,.folio-ma,.relationships h2,.count-value,.network-name,.count-note,
 .expertise-type,.ownership-lettering,.ownership-prefix,.negotiation-stage,
 .negotiation-brief h2,.annotation-title,.world-title,.contact h2{
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
 }

 html[data-hero='frame'] .relationships{padding-top:42px}
 .relationships{padding-bottom:58px}
 .relationships h2{font-size:42px}
 .relationship-field{height:408px;margin-top:32px}
 .relationship-field .relationship-count{top:17%;left:0;width:145px}
 .count-value{font-size:130px}
 .relationship-count>p{font-size:12px;line-height:1.45;margin-top:14px;margin-left:7px;max-width:132px}
 .relationship-field .count-note{font-size:21px;width:max-content;max-width:none;white-space:nowrap;margin-top:19px}
 .relationship-field .network-pe{left:32%;top:0;font-size:29px}
 .network-name>span{font-size:11px;line-height:1.45;max-width:145px}
 .relationship-field .network-fo{right:0;top:45%;font-size:28px}
 .relationship-field .network-ma{left:29%;top:72%;font-size:28px}
 .relationship-field .network-strategic{left:0;top:88%;font-size:29px}
 .relationship-bottom>p:last-child{font-size:15px;line-height:1.6}

 .expertise{padding-top:12px;padding-bottom:64px}
 .expertise-copy{margin-top:28px;font-size:21px;line-height:1.45}
 .mix-intro{position:relative;z-index:2;padding-top:0;margin-bottom:-38px;pointer-events:none}
 .cue{width:max-content;max-width:calc(100% - 32px)}

 .ownership{padding-top:64px;padding-bottom:48px}
 .ownership-response{margin-top:28px}
 .ownership-choices,.negotiation-topics{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px}
 .ownership-choices button,.negotiation-topics button{min-height:48px;max-width:100%;white-space:normal;text-align:left}
 .ownership-choices button{font-size:20px}
 .ownership-details{font-size:23px;line-height:1.45;margin-top:20px}

 .negotiation-brief{padding-top:38px;padding-bottom:48px}
 .negotiation-brief h2{font-size:32px}
 .negotiation-stage{height:166px;margin-top:20px}
 .negotiation-question{top:calc(var(--term-size)*1.08 + 42px)}
 .negotiation-topics button{font-size:18px}
 .negotiation-details{font-size:22px;line-height:1.45;margin-top:20px}

 .partnership-annotation{padding-top:58px;padding-bottom:60px}
 .annotation-title{font-size:15vw}
 .annotation-title>.annotation-addition{font-size:9.4vw;margin:14px 0 18px 12%}
 .annotation-last{font-size:11.4vw}
 .annotation-copy{font-size:16px;line-height:1.6;margin:34px 0 0 8%}

 .world-scene{padding-bottom:48px}
 .world-regions{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 26px;width:100%;margin-top:18px}
 .world-regions button{font-size:23px;width:fit-content;max-width:100%;justify-self:start;text-align:left}
 .world-copy{font-size:21px;line-height:1.45;margin:26px 0 0 4%}

 .contact{padding-top:50px;padding-bottom:56px}
 .contact h2{font-size:clamp(70px,22.5vw,140px)}
 .contact-line>p{font-size:15px;line-height:1.55}
 .contact-line>a{font-size:20px;min-height:44px;max-width:100%;display:inline-flex;align-items:center;margin-top:24px;padding-bottom:0;white-space:normal;overflow-wrap:anywhere;background:linear-gradient(transparent 68%,var(--lime) 68% 86%,transparent 86%)}
}
@media(max-width:360px){
 .folio-copy{font-size:13px}
 .relationships h2{font-size:38px}
 .relationship-field .network-pe{left:32%;font-size:26px}
 .relationship-field .network-fo{font-size:25px}
 .relationship-field .network-ma{left:27%;font-size:25px}
 .relationship-field .network-strategic{font-size:27px}
 .relationship-field .count-note{font-size:20px}
 .count-value{font-size:120px}
 .ownership-choices button{font-size:18px}
 .ownership-details{font-size:22px}
 .negotiation-topics button{font-size:17px}
 .negotiation-details{font-size:21px}
 .world-regions{gap:6px 18px}.world-regions button{font-size:21px}
 .contact-line>a{font-size:19px}
}
@media(max-width:335px){
 .negotiation-topics{column-gap:14px}
 .negotiation-topics button{font-size:16px}
}

/* The mobile reading order follows one pen stroke from relationships to sectors.
   No absolute positioning is needed for the text; it also works without JS. */
@media(max-width:700px){
 .mobile-pen-story{display:block;position:relative}
 .mobile-pen-story .relationships{padding-bottom:0}
 .mobile-pen-story .relationship-field{height:auto;margin-top:34px}
 .mobile-pen-story .relationship-lines{display:none}
 .mobile-pen-story .relationship-field .relationship-count{
  position:relative;inset:auto;width:100%;display:grid;
  grid-template-columns:max-content 1fr;align-items:end;column-gap:24px;
  margin-bottom:36px;
 }
 .mobile-pen-story .count-value{font-size:148px;line-height:.9;letter-spacing:-.075em}
 .mobile-pen-story .count-value:before{display:none}
 .mobile-pen-story .relationship-count>p{margin:0 0 8px;max-width:140px;font-size:13px;line-height:1.5;background:none;padding:0}
 .mobile-pen-story .relationship-field .count-note{
  grid-column:1/-1;margin:40px 0 0 26px;padding:0 5px 0 0;
  font-size:25px;transform:rotate(-3deg);max-width:100%;
 }
 .mobile-pen-story .relationship-field .network-name{
  position:relative;inset:auto;display:flex;justify-content:center;
  width:fit-content;max-width:calc(100% - 28px);margin-left:28px;
  min-height:64px;padding:10px 0;font-size:clamp(28px,8.8vw,42px);
  line-height:1.12;letter-spacing:-.035em;white-space:normal;
 }
 .mobile-pen-story .network-pe>span,.mobile-pen-story .relationship-bottom{display:none}
 .mobile-pen-story .expertise{padding-top:100px}
 .mobile-pen-story .expertise-type button[data-sector='0'],
 .mobile-pen-story .expertise-type button[data-sector='1'],
 .mobile-pen-story .expertise-type button[data-sector='2']{margin-bottom:20px}
 .mobile-pen-story .expertise-type button[data-sector='2']{margin-left:5%}
 .mobile-pen-story .expertise-copy{margin-top:42px}
 .mobile-pen-trace{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible;pointer-events:none;z-index:4;fill:none;stroke:var(--ink);stroke-linecap:round;stroke-linejoin:round}
 .mobile-pen-story[data-pen-active] .expertise-ink-window{opacity:0}
 .mobile-pen-story[data-pen-active] .expertise-ring{opacity:0}
 .mobile-pen-story[data-pen-ink] .expertise-ink-window,
 .mobile-pen-story[data-pen-ink] .expertise-ring{opacity:1}
}
@media(max-width:360px){
 .mobile-pen-story .count-value{font-size:132px}
 .mobile-pen-story .relationship-field .relationship-count{column-gap:18px}
 .mobile-pen-story .relationship-count>p{font-size:12px}
 .mobile-pen-story .relationship-field .count-note{font-size:24px}
}
/* A rotated phone has width, but not a desktop's vertical space. */
@media(min-width:701px) and (max-width:1050px) and (max-height:550px) and (orientation:landscape){
 .hero-folio{height:100svh;min-height:460px;max-height:none}
 .folio-words{font-size:11vw}
 .folio-private{top:18%;left:6%}
 .folio-capital{top:38%;left:22%}
 .folio-copy{font-size:14px;max-width:48%;bottom:11%}
 .folio-ma{font-size:10vw;top:58%;right:4%}
 .folio-next-sheet{height:60px}
}
