/* ==========================================================================
Chris Cummings — Stone design system
Tokens, chrome (preloader/header/mobile menu/footer), motion base states,
buttons/links, and the handful of components reused across pages.
Page geometry (hero collage, four-image grid, press strip, proof pairs)
is measured to the decimal per the design handoff and kept as inline
percentages on the elements themselves — see DESIGN-HISTORY.md §6/§7.
========================================================================== */
/* NOTE: deliberately no `scroll-behavior:smooth` on html — it fights GSAP
ScrollTrigger's scroll-position tracking (native smooth-scroll and
ScrollTrigger both try to own the scroll position), causing reveal
triggers to fire at the wrong point and elements to drift out of place. */
:root{
--page:#FCFBF4;
--surface-warm:#EDE9DC;
--surface-light:#F4F1E7;
--deep:#2A241D;
--dark:#2F2A24;
--muted:#8E8778;
--accent:#A1813F;
--preloader:#564E41;
--body-on-light: color-mix(in oklab, var(--dark) 82%, var(--muted));
--hdr-h: 82px;
}
*{box-sizing:border-box}
body{
margin:0;
background:var(--page);
color:var(--dark);
font-family:"Hanken Grotesk",Helvetica,Arial,sans-serif;
font-weight:300;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:color .35s cubic-bezier(.22,1,.36,1)}
a:hover{color:var(--accent)}
::selection{background:var(--accent);color:var(--page)}
input::placeholder,textarea::placeholder{color:color-mix(in oklab, var(--muted) 78%, var(--surface-warm))}
footer input::placeholder{color:rgba(252,252,244,.4)}
input:focus,textarea:focus{outline:none}
button{font-family:inherit}
h1,h2,h3,p,blockquote,figure,ol,ul{margin:0}
/* text-transform:none is required here, not cosmetic — Cormorant italic emphasis
is never uppercase in this type system, but a few places (the footer's
"Work together?") wrap it inside an ancestor with text-transform:uppercase,
which inherits down unless explicitly cancelled. */
.em{font-family:'Cormorant',Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.022em;text-transform:none}
/* Thin hairline arrow icon — replaces Unicode arrow characters (↗ → ↓),
which fall back to whatever symbol/emoji font a browser/OS picks and can
render as a mismatched, chunky glyph instead of a clean line. SVG with
currentColor keeps it in sync with the surrounding link colour everywhere. */
.icon-arrow{display:inline-block;width:.78em;height:.78em;vertical-align:-.05em;flex-shrink:0}
.icon-arrow--ne{transform:rotate(-45deg)}
.icon-arrow--down{transform:rotate(90deg)}
/* ---- masked line reveal ---------------------------------------------- */
[data-mask]{display:block;overflow:hidden}
[data-mline]{display:block}
[data-mline] > .em, [data-mask] em{letter-spacing:-.024em}
.js [data-mline]{transform:translateY(116%)}
.reduced-motion [data-mline],
.no-js [data-mline]{transform:none}
/* ---- section / image reveal ------------------------------------------- */
.js [data-reveal]{opacity:0;transform:translateY(24px)}
.reduced-motion [data-reveal],
.no-js [data-reveal]{opacity:1;transform:none}
.js [data-img-reveal]{clip-path:inset(0 0 100% 0)}
.reduced-motion [data-img-reveal],
.no-js [data-img-reveal]{clip-path:none}
[data-word-scrub] [data-pword]{opacity:.16;transition:opacity .3s ease}
.reduced-motion [data-pword],
.no-js [data-pword]{opacity:1}
/* ==========================================================================
Preloader
========================================================================== */
.preloader{
position:fixed;inset:0;z-index:90;background:var(--preloader);
display:flex;align-items:center;justify-content:center;
transition:opacity .5s ease;
}
.preloader-inner{
position:absolute;inset:0;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:26px;perspective:900px;
}
.preloader-logo{width:58px;height:auto}
.preloader-rule{width:88px;height:1px;overflow:hidden;background:rgba(252,251,244,.18)}
.preloader-rule-fill{width:100%;height:100%;background:var(--page);transform:scaleX(0);transform-origin:left}
.pre-done .preloader{opacity:0;pointer-events:none}
.no-js .preloader{display:none}
/* ==========================================================================
Header / nav
========================================================================== */
.site-header{
position:fixed;top:0;left:0;right:0;z-index:60;
display:flex;align-items:center;justify-content:space-between;
padding:clamp(11px,3vw,18px) clamp(18px,4vw,56px);
background:rgba(51,53,48,.88);
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
transition:background .5s ease;
}
.site-header.header-transparent{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.site-header.header-transparent.scrolled{background:rgba(51,53,48,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.site-header .logo-link{display:flex;align-items:center;gap:13px}
.site-header .logo-link img{width:clamp(40px,10vw,52px);height:auto}
.site-nav{
display:flex;align-items:center;gap:clamp(18px,2.2vw,32px);
font-size:12px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;
color:rgba(252,252,244,.85);
}
@media (max-width:1040px){ .site-nav{display:none} }
.site-nav a{color:rgba(252,252,244,.85)}
.site-nav a.current{color:#FCFBF4;border-bottom:1px solid var(--accent);padding-bottom:3px}
.site-nav .nav-cta{
color:#FCFBF4;border:1px solid rgba(252,252,244,.4);border-radius:0;padding:9px 20px;
transition:border-color .35s ease,background .35s ease;
}
.site-nav .nav-cta:hover{border-color:var(--accent);background:var(--accent);color:#FCFBF4}
.site-nav .nav-cta.nav-cta-filled{border-color:var(--accent);background:var(--accent)}
.site-nav .nav-cta.nav-cta-filled:hover{border-color:#FCFBF4;background:transparent}
.menu-toggle{
display:none;background:none;border:none;cursor:pointer;color:#FCFBF4;
font-size:12px;letter-spacing:.18em;text-transform:uppercase;padding:10px 0;
}
@media (max-width:1040px){ .menu-toggle{display:block} }
.mobile-menu{
position:fixed;inset:0;z-index:55;background:var(--dark);
display:none;flex-direction:column;justify-content:center;
padding:0 clamp(24px,7vw,64px);gap:6px;
}
.menu-open .mobile-menu{display:flex}
.menu-open{overflow:hidden}
.mobile-menu a{
font-family:'Cormorant',Georgia,serif;font-size:clamp(32px,9vw,48px);
color:#FCFBF4;padding:8px 0;border-bottom:1px solid rgba(252,252,244,.12);
}
.mobile-menu a:last-child{font-style:italic;color:var(--accent);border-bottom:none}
.mobile-menu a .num{
font-family:'Hanken Grotesk',sans-serif;font-style:normal;font-size:12px;
color:var(--accent);vertical-align:middle;margin-right:14px;
}
.mobile-menu a:last-child .num{color:inherit}
[data-hdr-offset]{padding-top:var(--hdr-h)}
/* ==========================================================================
Buttons & links
========================================================================== */
.btn{
display:inline-flex;align-items:center;gap:14px;
font-size:11px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;
padding:20px 44px;border-radius:0;border:none;cursor:pointer;
transition:background .4s cubic-bezier(.22,1,.36,1);
}
.btn-primary{background:var(--dark);color:#FCFBF4}
.btn-primary:hover{background:var(--accent);color:#FCFBF4}
.link-underline{
display:inline-flex;align-items:center;gap:10px;
font-size:11px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
border-bottom:1px solid rgba(252,252,244,.4);padding-bottom:7px;color:#FCFBF4;
}
.link-underline:hover{color:var(--accent);border-color:var(--accent)}
.link-underline-dark{
display:inline-flex;align-items:center;gap:10px;
font-size:11px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
border-bottom:1px solid var(--dark);padding-bottom:7px;color:var(--dark);
}
.link-underline-dark:hover{color:var(--accent);border-color:var(--accent)}
.link-quiet{
display:inline-flex;align-items:center;gap:10px;
font-size:11px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
color:rgba(252,252,244,.7);
}
.link-quiet:hover{color:var(--accent)}
/* ==========================================================================
Layout helpers
========================================================================== */
.wide{max-width:1420px;margin:0 auto}
.text-led{max-width:1160px;margin:0 auto}
.centred{max-width:1040px;margin:0 auto}
.eyebrow{font-size:11px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.section-num{font-family:'Cormorant',Georgia,serif;font-style:italic;font-size:16px;color:var(--accent)}
.hairline{width:56px;height:1px;background:var(--accent)}
.pull-quote{font-family:'Cormorant',Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.022em;color:var(--dark)}
.mono-label{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:12px;color:var(--muted)}
/* ---- image slot replacement --------------------------------------------
Every image sits inside a div the source already sizes/positions inline
(position + overflow:hidden). .fill centres the ![]()
and scales it;
the seven slots with a saved crop (see README "Images") override
left/top/width/height inline per the s/x/y formula. */
.fill{position:absolute;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%);object-fit:cover}
.frame{position:relative;overflow:hidden}
/* ==========================================================================
Proof / Real vs Recreation pairs
========================================================================== */
.proof-pair-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:clamp(24px,3vw,56px)}
.proof-pair-row.rail-right{flex-wrap:wrap-reverse;justify-content:flex-end}
.proof-rail{flex:1 1 200px;max-width:300px;min-width:0}
.proof-images{flex:6 1 min(560px,100%);min-width:0;display:grid;grid-template-columns:1fr 1px 1fr;gap:clamp(10px,1.6vw,24px);align-items:stretch}
.proof-images .divider{background:color-mix(in oklab,var(--muted) 55%,var(--dark) 20%);opacity:.35}
.proof-img{position:relative;width:100%;min-width:0;cursor:none;overflow:hidden}
.proof-img .overlay{
position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
background:rgba(51,53,48,.58);opacity:0;transition:opacity .55s cubic-bezier(.22,1,.36,1);
pointer-events:none;
}
.proof-img .overlay span{font-family:'Cormorant',Georgia,serif;font-style:italic;font-size:clamp(24px,3.4vw,48px);color:#FCFBF4}
[data-pair].shown .overlay{opacity:1}
.proof-caption-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 22px;margin-bottom:22px}
.proof-caption-row .brand{font-size:12px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.proof-caption-row p{flex:1 1 320px;min-width:0;font-size:14px;line-height:1.7;color:color-mix(in oklab,var(--dark) 74%,var(--muted))}
/* custom "View" cursor over proof pairs */
.view-cursor{
position:fixed;top:0;left:0;z-index:200;width:92px;height:92px;border-radius:50%;
background:#FCFBF4;mix-blend-mode:difference;pointer-events:none;
display:flex;align-items:center;justify-content:center;
font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#2F2A24;
opacity:0;transform:translate(-50%,-50%) scale(.6);transition:opacity .25s ease,transform .25s ease;
}
.view-cursor.active{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* ==========================================================================
Four-image reference grid — Selected Frames / Paris Premium Ride
========================================================================== */
.grid4{position:relative;width:100%;aspect-ratio:1756/1098}
.grid4 .g-wide-tl{position:absolute;left:0%;top:7.0128%;width:61.5034%;height:42.0765%}
.grid4 .g-port-tr{position:absolute;left:62.6424%;top:0%;width:26.3098%;height:56.1020%}
.grid4 .g-port-bl{position:absolute;left:11.0478%;top:43.8980%;width:26.3098%;height:56.1020%}
.grid4 .g-wide-br{position:absolute;left:38.4966%;top:50.9107%;width:61.5034%;height:42.0765%}
.grid4-mobile{display:flex;flex-direction:column;gap:12px}
.grid4-mobile .pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.grid4-mobile .frame{width:100%;min-width:0}
/* ==========================================================================
Press strip
========================================================================== */
.press-strip{
margin-top:clamp(56px,6vw,88px);border-top:1px solid color-mix(in oklab,var(--muted) 40%,var(--page));
padding-top:36px;display:flex;flex-wrap:nowrap;gap:0;align-items:center;justify-content:space-between;
}
.press-strip img{
flex:0 0 auto;height:auto;filter:brightness(.28) sepia(.35) saturate(.6) opacity(.85);
transition:filter .4s ease;
}
.press-strip img:hover{filter:brightness(.2) sepia(.2) saturate(.5) opacity(1)}
/* ==========================================================================
Range cards (Home)
========================================================================== */
.range-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:clamp(28px,3.5vw,56px);align-items:start}
.range-card{display:block;color:var(--dark);transition:color .4s ease}
.range-card:hover{color:var(--accent)}
.range-card .frame{margin-bottom:24px;width:100%;min-width:0;overflow:hidden;display:flex;align-items:center;justify-content:center}
.range-card .num{font-family:'Cormorant',Georgia,serif;font-style:italic;font-size:16px;color:var(--accent);margin-bottom:10px}
.range-card h3{font-family:'Hanken Grotesk',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(17px,1.5vw,22px);margin-bottom:12px}
.range-card p{font-size:15px;line-height:1.65;color:color-mix(in oklab,var(--dark) 78%,var(--muted));margin-bottom:14px}
.range-card .view{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.2em;text-transform:uppercase}
/* ==========================================================================
Films — video frames
========================================================================== */
.video-frame{position:relative;width:100%;overflow:hidden;margin-bottom:clamp(20px,2.4vw,32px)}
.video-frame iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;transform:scale(1.016)}
.film-stills{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:clamp(16px,1.8vw,24px)}
/* ==========================================================================
Process / About graphic figures
========================================================================== */
.graphic-figure figcaption{
margin-top:16px;border-top:1px solid color-mix(in oklab,var(--muted) 40%,var(--page));
padding-top:14px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:12px;
line-height:1.85;color:var(--muted);
}
.graphic-figure.on-dark figcaption{border-top-color:rgba(252,251,244,.2);color:rgba(252,251,244,.5)}
/* ==========================================================================
Forms — Explore a Project
========================================================================== */
.field{display:flex;flex-direction:column;gap:10px}
.field .field-label{font-size:11px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.field input,.field textarea{
background:none;border:none;border-bottom:1px solid color-mix(in oklab,var(--muted) 55%,var(--surface-warm));
color:var(--dark);font-family:'Hanken Grotesk',sans-serif;font-weight:300;font-size:17px;
padding:10px 0;transition:border-color .35s ease;
}
.field textarea{line-height:1.7;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--accent)}
/* Explicit border rather than the browser's default