/* ============================================================================ INTELTHERAPY — RESPONSIVE ONE SCROLL MODEL, AND THE SAME OWNERSHIP RULE. Below 861px every frame becomes a flow column: .frame and .stage stop being fixed heights and stop sticking, because pinning and sticking fight momentum scrolling on iOS and read as broken rather than deliberate. The lead and the trail SURVIVE, at phone scale. That matters — they are what carries each section's ground into the join, so a phone gets the same architecture as the desktop rather than a different one. Because the leads live inside their sections there is no way for a desktop value to leak through as a several-hundred-vh void. ============================================================================ */ /* Neither helper belongs to the approved desktop composition. */ .mobile-menu,.tool-status{display:none} @media(max-width:640px){ .nav ul{gap:14px;font-size:12px} .nav .bd{font-size:13px} .row{grid-template-columns:40px 1fr;gap:12px} footer .ir{margin-left:0;text-align:left} } @media(max-width:860px){ :root{ --mobile-title-size:clamp(70px,22vw,128px); --mobile-title-short:clamp(88px,28vw,150px) } .lead {height:var(--lead-h-m,30vh)} .trail{height:var(--trail-h-m,16vh)} .frame{height:auto;min-height:100svh} /* `relative`, not `static`, and this matters. A .aw ground layer is position:absolute;inset:0 and needs its host to be a containing block. If the stage goes static the ground resolves against the section instead and covers the whole thing — several hundred vh of tile painted over the composition. `relative` lays out identically to `static` in flow and keeps every ground inside the box that owns it. Same reason applies to #why-this-exists .art below. */ .frame > .stage{position:relative;height:auto;min-height:100svh} #glossary .frame{min-height:0} /* Phone joins only need enough runway to establish the incoming colour or form. The earlier 14–30vh values stacked into long blank passages between otherwise compact flow compositions. */ #fool { --lead-h-m:18vh } #tool { --lead-h-m:14vh } #campaign { --lead-h-m:12vh; --trail-h-m:12vh } #vent { --lead-h-m:8vh; --trail-h-m:10vh } #glossary { --lead-h-m:10vh } #why-this-exists { --lead-h-m:18vh } #later { --lead-h-m:18vh } /* .fit .ln carries white-space:nowrap so display lines never break on desktop. On mobile that stops the rotated pillar title wrapping and it runs straight off the right edge. Let it wrap, and size it off width instead. */ #tool .rot .ln{white-space:nowrap} /* ---- 01 cover ---- Keep the approved data-fit=.92 proportion on phone as well. The previous !important override defeated fit.js and pushed the headline too close to both screen edges. */ /* ---- 02 be the fool ---- .panes in the STAGE covers the frame; in the LEAD it covers the lead. Both stay correct without a second rule because each is inset:0 to its parent. */ #fool > .lead,#fool > .trail{display:none} /* Portrait translation of the approved desktop split: the black and steel become horizontal fields so each headline can retain its own ground without squeezing the supporting copy into a narrow side column. */ #fool .frame > .stage{min-height:100svh} #fool .stage{padding-bottom:0} #fool .panes{flex-direction:column;z-index:0} #fool .pane-a{width:100%;height:46%} #fool .pane-b{width:100%;height:54%} #fool .stage .pane-a{height:46%} #fool .stage .pane-b{display:block;height:54%} #fool .type{position:absolute;inset:var(--nav) 0 0;z-index:1;padding:0} #fool .t1,#fool .t2{ position:absolute;left:6%;font-size:var(--mobile-title-size)!important;line-height:.88 } /* Anchor the two title lines to the actual 46/54 pane boundary. Percentages inside .type were measured after the nav inset and only aligned at one viewport height; svh here shares the stage's coordinate system. */ #fool .t1{top:auto;bottom:54svh} #fool .t2{top:calc(46svh - var(--nav));margin:0} #fool .sub{ position:absolute;left:6%;top:53%;font-size:clamp(16px,4.6vw,24px); color:var(--ink);margin:0 } #fool .links{position:absolute;left:6%;top:63%;width:88%;margin:0} #fool .lk{color:var(--ink)} #fool .lk .lb{font-size:13px} #fool .foot{ position:absolute;left:6%;right:6%;bottom:6%;font-size:11px;color:var(--ink) } /* ---- 03 the tool ---- min-height:0 releases the desktop dock length. Below 860 the tool is a flow column with .bandinner static, so 240svh would only be dead air under it. */ #tool > .lead{background:var(--ink)} /* A tab can be loaded at desktop width and then switched into device mode. Desktop GSAP may still own inline transforms from that first layout. Clip the section and make the mobile flow positions authoritative so the prompt panel can never be pulled upward into the cover or Fool frame. */ #tool{overflow:clip} #tool .band,#tool .pane,#tool .rot .ln,#tool .askthe{ transform:none!important;opacity:1!important } #tool .sticky{grid-template-columns:1fr;min-height:0;padding-top:0;background:var(--ink)} #tool .band{padding:0;min-height:48vh} #tool .bandinner{ position:static;height:auto;overflow:visible; padding:3vh 6% 5vh; display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2.4vh,26px); } #tool .rot{ position:static;transform:none;width:100%;text-align:center; white-space:nowrap;font-size:clamp(46px,13.3vw,76px)!important;line-height:.93; } #tool .rot .ln{display:block;width:100%} #tool .askthe{ position:static;transform:none;text-align:center; font-size:clamp(64px,21.5vw,100px) } #tool .askthe .sp{font-size:clamp(13px,4vw,20px);margin:8px 0 6px} /* Desktop spaces the four cards across a multi-viewport travelling pane. On phone that produced more than five screens inside Tool alone. Keep the complete content, but return it to compact editorial flow. */ #tool .pane{padding:clamp(30px,6vh,52px) 6% clamp(44px,8vh,72px);background:var(--paper)} #tool .field textarea{height:clamp(150px,26vh,240px)} #tool .opts{margin-top:clamp(30px,7vh,56px)} .opt{grid-template-columns:36px 1fr;gap:14px} #tool .opt{padding:clamp(22px,4vh,34px) 0} .opt .ds{grid-column:2} #tool .result{margin-top:clamp(30px,7vh,56px)} #tool .result .out{min-height:clamp(170px,30vh,270px)} /* ---- 04 campaign ---- Clip the section so the rotated type cannot leak up into the tool. */ #campaign{overflow:clip} #campaign .stage{min-height:100svh} /* Both desktop verticals are required campaign copy. On phone they become horizontal bookends so neither is lost or clipped. */ #campaign .s1{ left:6%;top:48%;width:88%;transform:none!important;opacity:1!important; translate:var(--campaign-exit-x,0) var(--campaign-lag-y,0px);white-space:normal; font-size:clamp(17px,4.9vw,31px);line-height:1; } #campaign .s3{ display:block;left:6%;top:80%;width:88%;transform:none!important;opacity:1!important; translate:var(--campaign-exit-x,0) var(--campaign-lag-y,0px);white-space:normal; font-size:clamp(19px,5.4vw,34px);line-height:1; } #campaign .s2{ width:88%;left:6%;top:61%;transform:none!important;opacity:1!important; translate:0 var(--campaign-lag-y,0px);white-space:normal; font-size:clamp(23px,6.9vw,44px);line-height:1.02; } #campaign .s4 .a{font-size:var(--mobile-title-size)!important;line-height:.88} #campaign .s4 .a .ln{display:block;white-space:normal} #campaign .s4 .a .ln::after{content:'.'} #campaign .s4 .b{font-size:clamp(24px,7.3vw,44px)} #campaign .s4{ top:var(--nav);bottom:auto;right:6%;width:88%; transform:none!important;opacity:1!important; translate:var(--campaign-exit-x,0) 0; } /* ---- 05 come to vent ---- */ #vent .stage{padding:calc(var(--nav) + 8vh) 6% 8vh} #vent .l1,#vent .l2{position:static;font-size:var(--mobile-title-size)!important; line-height:.9;max-width:100vw} #vent .l1 .ln,#vent .l2 .ln{display:block;white-space:normal} #vent .l2{margin-bottom:5vh} #vent .links{position:static;width:100%;margin-bottom:5vh} #vent .para{position:static;width:auto} /* ---- 06 the glossary — the one section still holding itself ---- */ #glossary .sticky{position:static;height:auto;min-height:0;overflow:visible; padding-bottom:clamp(40px,8vh,90px)} #glossary .top h2{width:100%;font-size:var(--mobile-title-size)!important; line-height:.94} #glossary .top h2 .ln{display:block;white-space:normal} #glossary .top .st{width:100%;white-space:normal;line-height:1.4} #glossary .list{display:block} #glossary .row.on .df{display:block} /* ---- 07 why this exists ---- Phone uses three clean editorial bands: patterned title, plain copy, patterned end lock-up. The section ground stays continuous behind them; the copy band deliberately covers it edge-to-edge for legibility. */ #why-this-exists{position:relative;background:var(--orange);overflow:clip} #why-this-exists .stage{padding:calc(var(--nav) + 6vh) 6% 0} #why-this-exists .orangecol{position:absolute;inset:0;width:100%;height:auto; margin:0;background:var(--orange)} #why-this-exists .orangecol .awfix{position:sticky;inset:auto;top:0; height:100svh;margin:0;width:100%} #why-this-exists .art{display:none} #why-this-exists h2{position:static;transform:none;width:100%; font-size:var(--mobile-title-size)!important;line-height:.88; margin-bottom:8vh} #why-this-exists h2 .ln{display:block;white-space:normal} #why-this-exists h2 .ln.b{margin-top:.035em} #why-this-exists .copy{position:relative;top:auto;right:auto;bottom:auto; left:50%;transform:translateX(-50%); width:100vw;box-sizing:border-box;padding:8vh 6vw; margin:0;color:var(--ink);background:var(--paper); font-weight:400} #why-this-exists .copy p{margin-bottom:20px; font-size:clamp(13px,1.16vw,20px);line-height:1.5} #why-this-exists .copy .sp{letter-spacing:.24em} #why-this-exists .end{position:relative;left:50%;width:100vw; transform:translateX(-50%);box-sizing:border-box; padding:9vh 6vw 32vh} #why-this-exists .end .a{font-size:var(--mobile-title-size)!important;line-height:.88; font-weight:700} #why-this-exists .end .a .ln{display:block;white-space:normal} #why-this-exists .end .a .the{-webkit-text-stroke:.75px currentColor; paint-order:stroke fill} #why-this-exists .end .a .knew{display:block;margin-top:.08em} #why-this-exists .end .a em{color:var(--paper)} #why-this-exists .end .b{font-size:clamp(19px,5.6vw,36px)!important} /* ---- 08 go on then ---- */ #later .lead{display:none} #later .stage{padding:calc(var(--nav) + 10vh) 6% 10vh} #later h2{position:static;font-size:var(--mobile-title-short)!important;line-height:.88; margin-bottom:8vh;max-width:100vw} #later h2 .ln.b{margin-top:.06em} #later .hair.l{display:none} #later .sub{position:static;font-size:clamp(17px,4.8vw,26px)} #later .sub::after{content:'';display:block;width:42vw;height:1px; margin:clamp(16px,3vh,28px) -6vw 0 auto; background:var(--ink);opacity:.55} } /* Four full navigation labels are too tight below 375px. A native details control keeps the header compact, keyboard accessible and script-light. */ @media(max-width:374px){ .nav > ul{display:none} .nav .mobile-menu{display:block;margin-left:auto} .mobile-menu summary{ list-style:none;cursor:pointer;font-size:12px;font-weight:600; text-transform:lowercase } .mobile-menu summary::-webkit-details-marker{display:none} .nav .mobile-menu ul{ position:fixed;top:var(--nav);left:0;right:0;display:grid;gap:0; margin:0;padding:10px 6vw 14px;background:var(--paper); box-shadow:0 12px 24px rgba(0,0,0,.12) } .nav .mobile-menu li{list-style:none} .nav .mobile-menu a{display:block;padding:10px 0;text-align:right;font-size:14px} }