/* ══════════════════════════════════════════════════════════════════════════════ SITE KIT — motion presets, the CSS half. presets.css v1.0 Load AFTER kit.css (and motion.css if used). presets.js drives it; this file only sets STARTING STATES, and ONLY under html.mo, which adds when motion is allowed (K.motionHead()) and removes again after 4 s if the script never reports in. Without html.mo every rule here is inert: nothing is ever hidden by CSS alone. ══════════════════════════════════════════════════════════════════════════════ */ html.lenis,html.lenis body{height:auto} html.lenis{scroll-behavior:auto!important} .lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip} .lenis [data-lenis-prevent]{overscroll-behavior:contain} .lenis.lenis-smooth iframe{pointer-events:none} /* ── mask: the headline words rise out of their own line (a clip per word; descenders keep their room) ── */ [data-mo~="mask"] .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .05em .16em;margin:0 -.05em -.16em} [data-mo~="mask"] .w>span{display:inline-block;will-change:transform} /* the first screen only: pre-set so it does not flash. presets.js sets everything below the fold at run time. */ html.mo .ehero [data-mo~="mask"] .w>span,html.mo .ebanner [data-mo~="mask"] .w>span,html.mo .hero [data-mo~="mask"] .w>span,html.mo .pbanner [data-mo~="mask"] .w>span{transform:translateY(112%)} html.mo .ehero h1 .ln>span{animation:none} /* the kit's CSS rise gives way to the GSAP mask when both are present */ /* ── chapters: a grid everywhere, a pinned sideways story on a desktop with motion on ── */ .ch-head{text-align:center} .ch-head .shead,.ch-head .xhead{margin-inline:auto} .ch-head .btns{justify-content:center;margin-top:-8px;margin-bottom:clamp(34px,4.5vw,58px)} .ch-ui{display:none} .ch-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,34px)} .ch{position:relative;display:flex;flex-direction:column;text-decoration:none;color:inherit;min-width:0} .ch-ph{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--stone)} .ch-ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.3,1)} .ch:hover .ch-ph img{transform:scale(1.045)} .ch-n{display:none} .ch-tx{display:flex;flex-direction:column;flex:1} .ch-k{font-family:var(--cond);font-size:13.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-txt);margin:20px 0 6px} @media(max-width:640px){.ch-k{font-size:15px;letter-spacing:.14em}} .ch h3{font-family:var(--serif);font-size:clamp(1.7rem,2.4vw,2.05rem);font-weight:500;color:var(--ink);margin:0 0 6px;line-height:1.1} .ch-s{font-size:15.5px;font-weight:600;color:var(--ink);margin:0} .ch-s b{color:var(--accent-txt);font-weight:700} .ch-d{font-size:16.5px;color:var(--muted);margin:8px 0 14px;line-height:1.6} .ch .more{margin-top:auto;align-self:flex-start} @media(max-width:980px){.ch-track{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:560px){.ch-track{grid-template-columns:minmax(0,1fr)}.ch-ph{aspect-ratio:5/4}} .chapters.is-pinned{padding:0;overflow:hidden;overflow:clip} .chapters.is-pinned .ch-wrap{height:calc(100vh - var(--nav-h));width:auto;max-width:none;margin:0 0 0 max(22px,calc((100vw - var(--wrap)) / 2)); display:grid;grid-template-columns:minmax(300px,31%) minmax(0,1fr);gap:clamp(24px,3.5vw,56px);align-items:center} .chapters.is-pinned .ch-head{text-align:left} .chapters.is-pinned .ch-head .shead,.chapters.is-pinned .ch-head .xhead{margin:0;text-align:left;grid-template-columns:1fr} .chapters.is-pinned .ch-head .lede{margin-inline:0} .chapters.is-pinned .ch-head .btns{justify-content:flex-start;margin:0} .chapters.is-pinned .ch-ui{display:flex;align-items:center;gap:18px;margin:0 0 26px} .ch-count{font-family:var(--serif);font-size:1.5rem;color:var(--muted);white-space:nowrap} .ch-count b{font-weight:500;color:var(--ink);font-size:2.3rem} .ch-bar{position:relative;display:block;width:150px;height:2px;background:var(--ink-a16);overflow:hidden} .ch-bar i{position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left center} .chapters.is-pinned .ch-vp{height:100%;overflow:hidden;overflow:clip;display:flex;align-items:center; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 100%)} .chapters.is-pinned .ch-track{display:flex;align-items:flex-start;gap:clamp(40px,4.5vw,76px);padding:9vh 14vw 0 6vw;width:max-content;will-change:transform} .chapters.is-pinned .ch{flex:0 0 auto;width:calc(min(60vh,640px) * .8)} .chapters.is-pinned .ch:nth-child(even){margin-top:4vh} .chapters.is-pinned .ch-ph{height:min(60vh,640px);width:100%;aspect-ratio:auto} .chapters.is-pinned .ch-ph img{transform:scale(1.16)} .chapters.is-pinned .ch:hover .ch-ph img{transform:scale(1.2)} .chapters.is-pinned .ch-n{display:block;position:absolute;left:-.3em;top:-.56em;z-index:2;pointer-events:none; font-family:var(--serif);font-size:clamp(4rem,6.4vw,6.6rem);line-height:1;color:var(--accent);text-shadow:0 2px 24px rgba(255,255,255,.9)} /* in the pinned view the words sit on the photograph, like a caption in a book: every card is exactly one photo tall */ .chapters.is-pinned .ch-tx{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:clamp(70px,9vh,110px) 24px 18px; background:linear-gradient(180deg,rgba(20,14,12,0) 0%,rgba(20,14,12,.62) 42%,rgba(20,14,12,.9) 100%)} .chapters.is-pinned .ch-k{margin:0 0 6px;color:var(--accent-lt)} .chapters.is-pinned .ch h3{color:#fff;font-size:clamp(1.7rem,2.3vw,2.1rem)} .chapters.is-pinned .ch-s{color:rgba(255,255,255,.94)} .chapters.is-pinned .ch-s b{color:var(--accent-lt)} .chapters.is-pinned .ch-d{display:none} .chapters.is-pinned .ch .more{color:#fff;margin-top:8px} @media(max-height:760px){.chapters.is-pinned .ch:nth-child(even){margin-top:2.5vh}} /* ── still: the widescreen still, 2.39:1, the client's words as the subtitle ── */ .still{position:relative;background:var(--ink);padding:clamp(40px,6vw,96px) 0 clamp(34px,5vw,80px);overflow:hidden;isolation:isolate} .still figure,.still-f{position:relative;margin:0;width:100%;aspect-ratio:2.39/1;overflow:hidden;background:var(--ink-2)} .still figure img,.still-f img{width:100%;height:100%;object-fit:cover;display:block} .still-q{margin:clamp(24px,3.2vw,44px) auto 0;padding:0 22px;max-width:980px;text-align:center} .still-q p{font-family:var(--serif);font-style:italic;font-size:clamp(1.65rem,3.1vw,2.6rem);line-height:1.25;color:#fff;margin:0} .still-q cite{display:block;margin-top:16px;font-style:normal;font-family:var(--cond);font-size:13.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-lt)} @media(max-width:760px){.still figure,.still-f{aspect-ratio:16/10}.still-q cite{font-size:15px;letter-spacing:.14em}} /* ── marquee ── */ [data-mo~="marquee"]{overflow:hidden;overflow:clip;white-space:nowrap} [data-mo~="marquee"] .mq-track{display:inline-flex;gap:clamp(28px,4vw,64px);will-change:transform} /* ── micro-interactions: a button fills from the left in 450 ms, eased out. Never longer. ── */ html.mo .btn{position:relative;overflow:hidden;isolation:isolate} html.mo .btn::before{content:'';position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:right center;transition:transform .45s cubic-bezier(.2,.7,.3,1)} html.mo .btn:hover::before,html.mo .btn:focus-visible::before{transform:scaleX(1);transform-origin:left center} html.mo body.light .btn-accent:hover,html.mo body.light .btn-ink:hover{background:var(--ink-2);border-color:var(--ink-2)} html.mo body.light .btn-accent::before,html.mo body.light .btn-ink::before{background:var(--accent)} html.mo body.light .btn-out:hover{background:transparent;color:#fff} html.mo body.light .btn-out::before{background:var(--ink-2)} /* ── page to page: a soft cross-fade, the header never blinks (browsers without support just navigate) ── */ @view-transition{navigation:auto} ::view-transition-old(root){animation:kit-vt-out .3s cubic-bezier(.4,0,1,1) both} ::view-transition-new(root){animation:kit-vt-in .55s cubic-bezier(.2,.7,.3,1) both} @keyframes kit-vt-out{to{opacity:0}} @keyframes kit-vt-in{from{opacity:0}} .nav{view-transition-name:kitnav} ::view-transition-group(kitnav){animation:none} @media (prefers-reduced-motion:reduce){@view-transition{navigation:none}html.mo .btn::before{transition:none}}