/* ===================================================================== PS · CRAFT LAYER — ps-spice.css Additive enhancement layer for the Power Shifter "Two Voices" system. Every rule is gated behind a body class so it is purely additive and can be toggled off to compare against the shipped design. Master gate ........ body.spice-on Module gates ....... body.sp-magnetic magnetic primary CTAs (JS) body.sp-reveal magenta-wipe image reveals body.sp-index editorial section numerals body.sp-kinetic kinetic Two-Voices headlines body.sp-skew scroll-velocity parallax body.sp-rules drawn hairlines + magenta seam edges Nothing here overrides brand tokens — it reuses --ink / --paper / --magenta / --display / --text and the house easing cubic-bezier(.76,0,.24,1). ===================================================================== */ main#main:focus{outline:none} .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* --- Horizontal overflow guards (QA 2026-07) ------------------------ `clip` (not `hidden`): clips paint without creating a scroll container, so position:sticky descendants keep working and no horizontal swipe / scrollbar can exist anywhere. Guards below fix the two real offenders: grid items default to min-width:auto, so unshrinkable content (odometer digits, logo marks) forced columns wider than their track. */ html{overflow-x:clip;overflow-y:auto} /* explicit y: a lone overflow-x:clip computes y to clip too, freezing ALL scroll */ .proof-row .stat,.proof-row .stat b,.logos .cell{min-width:0} /* The odometer is a flex child with overflow:hidden — per spec its auto min-size collapses to 0, so once the min-width:0 above lets a cell tighten, it shrinks below the digits and clips them horizontally. Pin it to content width; the vertical digit-roll still clips via the fixed box height. */ .odo{flex:none} :root{ --sp-ease:cubic-bezier(.76,0,.24,1); } /* ===================================================================== 1 · MAGNETIC CTAs (sp-magnetic) JS nudges .btn toward the pointer; CSS just smooths the return and lets the existing cascade letters ride along. ===================================================================== */ body.sp-magnetic .btn{will-change:transform;transition:transform .35s var(--sp-ease), background .2s ease-out,color .2s ease-out,border-color .2s ease-out} /* ===================================================================== 3 · MAGENTA-WIPE IMAGE REVEALS (sp-reveal) Extends the secondary-link "highlight swipe" DNA to imagery: a magenta panel sits over each frame and wipes off on scroll-in while the image settles from a slight over-scale. Frames already clip. ===================================================================== */ body.sp-reveal .frame, body.sp-reveal .wframe{position:relative;overflow:hidden} body.sp-reveal .frame > img, body.sp-reveal .wframe > img{transform:scale(1.075);transition:transform 1.15s var(--sp-ease)} body.sp-reveal .frame.sp-in > img, body.sp-reveal .wframe.sp-in > img{transform:scale(1)} body.sp-reveal .frame::after, body.sp-reveal .wframe::after{content:"";position:absolute;inset:0;z-index:4; background:var(--magenta);transform:scaleX(1);transform-origin:left center; transition:transform .85s var(--sp-ease)} body.sp-reveal .frame.sp-in::after, body.sp-reveal .wframe.sp-in::after{transform:scaleX(0);transform-origin:right center} /* keep overlay text/badges above the wipe */ body.sp-reveal .wcard-overlay, body.sp-reveal .slot-tag, body.sp-reveal .film-play, body.sp-reveal .wtint{z-index:6} /* Mobile: drop the magenta-wipe reveal. On a phone every card wipes as it scrolls in, which reads as distracting flashing rather than craft. Show the images static (no wipe, no over-scale settle); desktop keeps the effect. */ @media(max-width:640px){ body.sp-reveal .frame::after, body.sp-reveal .wframe::after{display:none} body.sp-reveal .frame > img, body.sp-reveal .wframe > img, body.sp-reveal .frame.sp-in > img, body.sp-reveal .wframe.sp-in > img{transform:none;transition:none} } /* Thumbnail hairline normalization — the .cards grid only draws its 1px line-light seam BETWEEN cells, so the first/top-left card has no seam on its outer edge. Give every work-card thumbnail a matching hairline below it so all cards (Iron Mountain included) read consistently. */ body.spice-on .work .card .frame{box-shadow:0 1px 0 0 var(--line-light)} /* ===================================================================== 4 · EDITORIAL SECTION NUMERALS (sp-index) A large outlined numeral floats in the top gutter of each major section, giving the scroll an editorial spine. Outline only, so it reads as structure, not content. JS injects .sp-idx + numbers them. ===================================================================== */ body.spice-on .sp-host{position:relative} .sp-idx{position:absolute;top:clamp(16px,2.4vw,30px);right:var(--gutter); font-family:var(--display);font-weight:500;font-size:clamp(34px,5vw,76px); line-height:1;letter-spacing:-.03em;color:transparent; -webkit-text-stroke:1px var(--line);pointer-events:none;z-index:1; opacity:0;transform:translateY(-8px);transition:opacity .6s var(--sp-ease),transform .6s var(--sp-ease)} body.sp-index .sp-host.sp-in > .sp-idx{opacity:.85;transform:none} .sp-host.on-ink > .sp-idx{-webkit-text-stroke-color:var(--line-light)} /* ===================================================================== 5 · KINETIC TWO-VOICES (sp-kinetic) The serif "voice" line is the brand's emotional pivot — give it more stage: a touch larger, and a magenta underline that draws on as it enters. Amplifies the grotesque→serif contrast the whole system is built around. ===================================================================== */ body.sp-kinetic .sub-voice{font-size:clamp(22px,2.8vw,42px);line-height:1.1} body.sp-kinetic em.voice, body.sp-kinetic .voice.mag{position:relative;display:inline-block} body.sp-kinetic em.voice::after, body.sp-kinetic .voice.mag::after{content:"";position:absolute;left:0;right:0; bottom:-.04em;height:2px;background:var(--magenta); transform:scaleX(0);transform-origin:left center; transition:transform .75s var(--sp-ease) .15s} body.sp-kinetic em.voice.sp-in::after, body.sp-kinetic .voice.mag.sp-in::after{transform:scaleX(1)} /* engine bands already carry their own .rule under the H2 — suppress the kinetic underline there so the two magenta marks don't stack. */ body.sp-kinetic .engine em.voice::after, body.sp-kinetic .engine .voice.mag::after{content:none} /* Hero cleanup (2026-07): the sub-hero sub-voice underline stacked with the byline divider as a "double line" — drop the kinetic underline in sub-heroes. Also hide the redundant hero eyebrow on case studies + listing pages (kept on .article blog heroes, where the eyebrow is the post's category). Homepage .hero underline is left as-is. */ body.sp-kinetic .sub-hero em.voice::after, body.sp-kinetic .sub-hero .voice.mag::after{content:none} .sub-hero:not(.article) .eyebrow{display:none} /* give the word-mask rise a hair more travel + lead with magenta */ body.sp-kinetic .rise .wi{transition:transform .8s var(--sp-ease),opacity .8s var(--sp-ease)} /* ===================================================================== 6 · SCROLL-VELOCITY PARALLAX (sp-skew) Section media drifts a few px against scroll velocity — the page gains weight and inertia without distortion. JS sets --sp-shift. ===================================================================== */ body.sp-skew .frame, body.sp-skew .wframe, body.sp-skew .video-frame, body.sp-skew .sp-stream{transform:translateY(var(--sp-shift,0px));transition:transform .25s linear} /* ===================================================================== 7 · DRAWN HAIRLINES + MAGENTA SEAM (sp-rules) Every house hairline (.rule) draws on; each paper→ink flip gets a magenta edge that scales in from centre, punctuating the section change the way the system already uses ink/paper flips. ===================================================================== */ body.sp-rules .rule{transform:scaleX(0);transform-origin:left center; transition:transform .8s var(--sp-ease)} body.sp-rules .rule.sp-in{transform:scaleX(1)} .sp-edge{position:absolute;top:0;left:0;right:0;height:2px;background:var(--magenta); transform:scaleX(0);transform-origin:center;z-index:7;pointer-events:none; transition:transform .9s var(--sp-ease)} body.sp-rules .sp-host.sp-in > .sp-edge{transform:scaleX(1)} /* Divider between the two engine "expression" modules (one-two punch). The line is present whenever the layer is on; sp-rules adds the draw. */ .sp-band-rule{padding:clamp(18px,5vh,56px) 0} .sp-band-rule .sp-br-line{display:block;height:1px; background:var(--line);transform:scaleX(1);transform-origin:left center; transition:transform .9s var(--sp-ease)} body.sp-rules .sp-band-rule:not(.sp-in) .sp-br-line{transform:scaleX(0)} /* ===================================================================== STREAM PLACEHOLDER (preview only) The live pages embed Cloudflare Stream players. In this review sandbox those external embeds are swapped for a styled poster so the page is fast and never hangs. Dev keeps the real