/* ============================================================================ INTELTHERAPY — BASE Reset, document rules, the page model, nav and footer. ============================================================================ */ *{box-sizing:border-box;margin:0;padding:0} /* Hairlines on the cover travel 120vw out of frame. body alone does not stop that reaching documentElement.scrollWidth. `clip` rather than `hidden`: overflow:hidden on creates a scroll container and breaks every sticky section below it. */ html{overflow-x:clip} body{ background:var(--paper); color:var(--ink); font-family:var(--inter); overflow-x:clip; -webkit-font-smoothing:antialiased; } img,svg{display:block} a{color:inherit;text-decoration:none} /* Display lines size themselves to a proportion of the viewport. scripts/fit.js writes the font-size; the markup only declares the intent. */ .fit{display:block} .fit .ln{display:inline-block;white-space:nowrap;line-height:inherit} /* ============================================================================ THE PAGE MODEL — read this before moving anything. Every section is exactly three parts:
the space the section ARRIVES across
the composition, held by a sticky .stage
the space the section LEAVES across The lead and the trail sit INSIDE the section, so the section's own background paints them. There is therefore no anonymous space anywhere in the document: every pixel between two compositions belongs to the section arriving or the section leaving, and carries that section's ground. This is spec R2, R6 and R7 expressed as structure rather than as a rule an implementer has to remember. A `.gap` div, an `.ext` slab or a connector painter cannot be reintroduced without first breaking this model, which is the point. Consequences, each of which used to be a bug in the prototype: - an incoming background occupies the transition by construction, not by a slab being stretched over it; - outgoing and incoming frames genuinely overlap on screen, because the outgoing .stage is still stuck while the incoming .lead rises under it; - anything crossing a join crosses its own section's ground, so it is spatially attached rather than floating over unrelated paper; - sections stack in document order, so the incoming ground rises OVER the outgoing frame instead of meeting it at a seam. ============================================================================ */ /* Two sections carry their own sticky wrapper instead of .frame > .stage, because their composition is taller than one viewport and has to be laid out as a grid or a column: #tool > .sticky and #glossary .frame > .sticky. Those are the ONLY permitted variants. Any other direct child of a
is unowned space and is a bug — tests/audit.js asserts this. */ section{position:relative} .lead,.trail{position:relative;width:100%} .lead {height:var(--lead-h,0px)} .trail{height:var(--trail-h,0px)} .frame{position:relative;width:100%;height:var(--frame-h,280vh)} /* 100vh on iOS is the height with the URL bar HIDDEN. As you scroll, Safari collapses the bar, the viewport grows, every section re-lays-out and the document height changes mid-scroll. That is what makes a page jump under your finger. 100svh is the small-viewport height and does not change. */ .frame > .stage{ position:sticky; top:0; height:100svh; min-height:640px; width:100%; display:block; } /* The docked view is a window, not a box. Compositions bleed past it on purpose, so neither the frame nor the stage may clip. */ .frame,.frame > .stage{overflow:visible} /* Document order is paint order. The incoming section is always above the one it replaces, so its ground rises over that frame rather than butting it. */ #top{z-index:1} #fool{z-index:2} #tool{z-index:3} #campaign{z-index:4} #vent{z-index:5} #glossary{z-index:6} #why-this-exists{z-index:7} #later{z-index:8} footer{position:relative;z-index:9} /* ---------------------------------------------------------------------------- DWELL — the editorial rhythm. Read this before changing a frame height. Every major composition gets an intentional reading window: ARRIVE → SETTLE → HOLD / READ → EXIT → next HOLD is where the composition is docked and stable while the user keeps scrolling normally. It is bought with owned section height, not by intercepting input: the .stage is sticky, so the scroll advances through the frame's runway while the composition stays put. No snapping, no wheel blocking, no scrub lag. The user scrolls THROUGH each composition rather than past it. hold = frame-h − 1.0 viewport (the stage itself) − 0.18 (the settle) MEASURED 5 Aug, before this pass: 12.2 viewports of hold against 13.9 of pure transition — only 34% of the page was a readable composition. Too many frames read as ARRIVE → continue → EXIT. The worst was the tool at 0.65 viewports, the composition with the most content and the least dwell, because the earlier fix for its empty pane cut the reading window out along with the emptiness. Holds are weighted by how much there is to read, NOT normalised (R9, D015): top 2.0 the opening statement. One line, but it has to land. fool 2.6 headline, sub, two links, supporting line tool 1.6 its dwell IS its own pane travelling past the pillar; bounded by content, so the content was spaced out to suit campaign 2.8 patterned, two verticals descending through it vent 2.6 two full-bleed lines, two links, a paragraph glossary 3.2 nine terms — the most reading on the page why 3.2 a full justified copy column later 2.0 the closing card NONE of this distance was taken from, or given to, an empty span. The leads and trails are unchanged by this pass. Transition distance stays where it was; the extra distance belongs to the compositions. ---------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------- PACING — per join, never globally normalised (spec R9, D015). Each figure below is a judgement about how much visual activity the join carries, not a constant applied everywhere. The starting values are the measured end-state of the prototype's two pacing passes, recorded in MEASURED.md. They are a baseline to tune from in Phase 5, not a target to preserve. 1->2 #fool lead 155 grey panel travels in over paper 2->3 #tool lead 145 palest join; the prompt template is the carrier 3->4 #campaign lead 175 patterned steel + descending titles: earns more 4->5 #campaign trail 120 + #vent lead 60 5->6 #vent trail 90 + #glossary lead 130 6->7 #why lead 260 the orange arrival — protected, D010 7->8 #later lead 260 the pillar opening out — protected, D010 #tool has NO trail, deliberately. Its exit clears the screen over ~100vh, so any trail at all leaves a band of bare paper hanging between the departing black column and the arriving steel. With none, the tool's section ends exactly where the campaign's lead begins and the two edges are the same line. ---------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------- TIMING TABLE — must agree with the TIMING object in scripts/motion.js. Nothing else sets pace. ONE DWELL DURATION, 6 Aug. Frame 4 (#campaign) is the master reference. Its stable dwell was MEASURED, not estimated: FRAME_4_DWELL = 2342px = 2.60 viewports (measured at 1324x901) Every other major composition now holds for exactly that. The heights below are derived from it, not chosen by eye: frame-h = enter + 2.60 + exit-before-release + 1.00 (the stage itself) Earlier notes giving frame 3 the longest dwell are SUPERSEDED. Frame 3 is still the hero, but its weight comes from a complete dock and a clearly defined stop — not from a different duration. lead frame trail enter DWELL exit note top 0 300 0 - - - LOCKED, approved fool 175 470 120 1.10 2.60 - exit on its trail tool 260 (680svh) 0 lead 2.60 - dwell is a HELD leg campaign 175 460 240 1.00 2.60 2.4 MASTER REFERENCE vent 150 580 110 1.30 2.60 0.90 title exits before release glossary 260 570 120 1.20 2.60 0.90 title exits before release why 260 490 0 1.30 2.53 - LOCKED, approved later 260 410 0 1.10 - - LOCKED, approved The glossary's lead grew 170 -> 260vh so its grey ground establishes the incoming environment well before the title arrives. ---------------------------------------------------------------------------- */ #top { --frame-h:300vh } #fool { --lead-h:175vh; --frame-h:470vh; --trail-h:120vh } #tool { --lead-h:260vh } #campaign { --lead-h:175vh; --frame-h:460vh; --trail-h:240vh } #vent { --lead-h:150vh; --frame-h:580vh; --trail-h:110vh } #glossary { --lead-h:260vh; --frame-h:570vh; --trail-h:120vh } #why-this-exists { --lead-h:260vh; --frame-h:490vh } #later { --lead-h:260vh; --frame-h:410vh } /* ---------- header ---------- */ .nav{ position:fixed; top:0; left:0; right:0; height:var(--nav); z-index:100; display:flex; align-items:center; padding:0 var(--gutter); background:var(--white); color:var(--ink); font-size:14px; font-weight:700; letter-spacing:-.01em; } .nav ul{list-style:none;display:flex;gap:clamp(16px,3vw,44px);margin-left:auto;font-weight:600} /* ---------- shared components ---------- */ /* indexed link row: 01 ——— use the tool ———————— */ .lk{display:flex;align-items:center;gap:16px;padding:16px 0;cursor:pointer} .lk .ix{font-size:10px;letter-spacing:.18em;color:var(--orange);font-weight:700;width:22px;flex:none} .lk .lb{font-size:clamp(15px,1.4vw,19px);font-weight:600;letter-spacing:-.01em;white-space:nowrap; transition:transform .35s cubic-bezier(.22,1,.36,1)} .lk .rule{flex:1;height:1px;background:currentColor;opacity:.55;transform-origin:0 50%} .lk:hover .lb{transform:translateX(10px)} /* small caps label with a trailing rule */ .lbl{display:flex;align-items:center;gap:18px;font-size:10px;font-weight:700; letter-spacing:.26em;text-transform:uppercase} .lbl .rule{flex:1;height:1px;background:var(--ink);opacity:.35;transform-origin:0 50%} .visually-hidden{ position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap; } /* full-bleed hairline, anchored left or right */ .hair{position:absolute;height:1px;opacity:.55} .hair.l{left:0} .hair.r{right:0} /* ---------- footer ---------- */ footer{ background:var(--white); color:var(--ink); padding:clamp(60px,10vw,150px) var(--gutter) clamp(36px,5vw,52px); border-top:1px solid rgba(0,0,0,.16); } footer .row2{display:flex;align-items:flex-end;gap:40px;flex-wrap:wrap} footer .bd{font-size:17px;font-weight:700} footer .cp{font-size:12px} footer .ir{margin-left:auto;max-width:600px;text-align:right;font-size:12px;line-height:1.7;color:var(--steel)} @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }