/** Shopify CDN: Minification failed
Line 573:0 Unexpected "}"
**/
@font-face{font-family:'Audiowide';src:url(//hammy.at/cdn/shop/t/120/assets/audiowide.ttf?v=3798441836619357971792180881) format('truetype');font-weight:400;font-display:block}
@font-face{font-family:'Folty';src:url(//hammy.at/cdn/shop/t/120/assets/folty-book.woff2?v=52369550346250304641792180881) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Folty';src:url(//hammy.at/cdn/shop/t/120/assets/folty-medium.woff2?v=158623451050207714641792180881) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Folty';src:url(//hammy.at/cdn/shop/t/120/assets/folty-semibold.woff2?v=170817141892263497131792180881) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Folty';src:url(//hammy.at/cdn/shop/t/120/assets/folty-bold.woff2?v=67015326395386252171792180881) format('woff2');font-weight:700;font-display:swap}
/* ================================================================
HAMMY SPORTWEAR — flagship storefront concept
Palette taken straight off HAMMY-BRAND-IDENTITY-2 (2026), sampled
from the PDF itself:
navy #061555 — 97% of the "Primary concept" page: the field
white #FFFFFF — its equal counterpart (page 5 is a 50/50 split)
yellow #FDB813 — 0.8% of that page: a mark accent, never a field
So navy carries the site, white is the ink, yellow stays rare.
================================================================ */
/* ---- token map -------------------------------------------------
--paper / --paper-2 / --paper-3 : surfaces (navy → deeper navy)
--ink / --ink-2 : primary / secondary text
--navy : brand navy — also text on yellow
--yellow / --gold : brand yellow (fills / text)
------------------------------------------------------------------ */:root{--paper:#061555; --paper-2:#040F3B; --paper-3:#030A2B;
--ink:#F5F6FA; --ink-2:#A9B2D6; --gold:#FDB813;
--btn-fill:#FDB813; --btn-ink:#061555;
--tint:245,246,250; --ph-alpha:.72;
--surface:rgba(var(--tint),.05); --surface-2:rgba(var(--tint),.09);
--hair:rgba(var(--tint),.15); --hair-2:rgba(var(--tint),.28);
--panel:rgba(4,15,59,.86); --panel-2:rgba(3,10,43,.94); --paper-a:rgba(6,21,85,.55);
--navy:#061555;
--yellow:#FDB813;
--yellow-soft:#FFCB4A;
--ok:#4ADE80;
--card:var(--surface);
--display:'Audiowide',sans-serif;
--body:'Folty','Helvetica Neue',sans-serif;
--ease:cubic-bezier(.22,1,.36,1);
--pad:clamp(20px,5vw,72px);
}
/* on-media scope: any section sitting on a photo or video keeps light text.
The photo/video section roots are listed here rather than left to opt in with
a class, because `h1,h2,h3,h4{color:var(--ink)}` beats the inherited color on
the wrapper: on the white scheme that painted the photo-band headline navy,
straight onto a dark photograph. Anything that scrims its media belongs here. */
.on-media,
.photo-band,
.scrub,
.slhero,
.vg{
--ink:#FFFFFF;
--ink-2:rgba(255,255,255,.78);
--paper:transparent;
--paper-2:transparent;
--gold:var(--yellow);
--tint:255,255,255;
--hair:rgba(255,255,255,.22);
--hair-2:rgba(255,255,255,.34);
--surface:rgba(255,255,255,.06);
--surface-2:rgba(255,255,255,.12);
--panel:rgba(11,19,48,.55);
--panel-2:rgba(3,10,43,.82);
--ph-alpha:.78;
--card:rgba(255,255,255,.06);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{
background:var(--paper);
color:var(--ink);
font-family:var(--body);
font-weight:400;
font-size:18px; /* كان غير محدَّد فتُرك لافتراضي المتصفح ثم داسته السكشنات */
line-height:1.72;
overflow-x:clip;
-webkit-font-smoothing:antialiased;
}
::selection{background:var(--btn-fill);color:var(--btn-ink)}
/* حقل أبيض نقي — بلا غسلات ملوّنة تجعل أجزاء الصفحة تبدو بألوان مختلفة */
img,svg{display:block;max-width:100%}
img{height:auto} /* the width/height attrs are hints, never layout */
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.04;text-wrap:balance;letter-spacing:.01em}
.eyebrow{
font-family:var(--body);font-weight:600;font-size:12px;letter-spacing:.32em;
text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:14px;
}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--gold);flex:none}
.section{position:relative;padding:clamp(56px,8vh,96px) var(--pad)}
.shell{max-width:1280px;margin:0 auto;position:relative}
.sec-head{display:flex;flex-direction:column;gap:22px;margin-bottom:clamp(28px,4vw,48px);max-width:760px}
.sec-head h2{font-size:clamp(30px,4.6vw,56px)}
.sec-head p:not(.eyebrow){color:var(--ink-2);font-size:clamp(16px,1.4vw,19px);max-width:60ch}
/* ---------- scroll progress bar ---------- */
#scrollbar{position:fixed;top:0;left:0;height:3px;width:0;z-index:110;
background:linear-gradient(90deg,var(--yellow),var(--yellow-soft));box-shadow:0 0 12px rgba(253,184,19,.6)}
/* ---------- per-word title reveal ---------- */
.sec-head h2 .w{display:inline-block;overflow:hidden;vertical-align:top}
.sec-head h2 .w i{display:inline-block;font-style:normal;transform:translateY(115%);transition:transform .8s var(--ease);transition-delay:var(--wd,0s)}
.sec-head.in h2 .w i{transform:none}
/* ---------- fly-to-cart ---------- */
.fly{position:fixed;z-index:130;pointer-events:none;will-change:transform,opacity;
transition:transform .85s cubic-bezier(.5,-.1,.7,.5),opacity .85s ease}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg) scale(1.08)}55%{transform:rotate(7deg) scale(1.06)}80%{transform:rotate(-3deg)}}
.cart-btn.wiggle{animation:wiggle .55s var(--ease)}
/* ---------- kit flip on colorway change ---------- */
@keyframes kitflip{0%{transform:rotateY(0)}100%{transform:rotateY(360deg)}}
#kitSvg.flip{animation:kitflip .7s var(--ease)}
/* ---------- product shine sweep ---------- */
.prod .ph::after{content:"";position:absolute;inset:0;
background:linear-gradient(105deg,transparent 35%,rgba(var(--tint),.07) 50%,transparent 65%);
transform:translateX(-130%);pointer-events:none}
.prod:hover .ph::after{transition:transform .75s var(--ease);transform:translateX(130%)}
/* ---------- hero exit parallax ---------- */
.hero-grid{will-change:transform,opacity}
/* ---------- reveal on scroll (rack-focus entrance) ---------- */
[data-reveal]{opacity:0;transform:translateY(44px);filter:blur(7px);
transition:opacity .95s var(--ease),transform .95s var(--ease),filter .8s ease;transition-delay:var(--d,0s)}
[data-reveal].in{opacity:1;transform:none;filter:none}
/* ---------- scene-to-scene camera transitions ---------- */
/* .scene / html.glide removed with the per-frame scene-depth + wheel-hijack loops (perf) */
/* ---------- brand logo recolor filters (applied to the markimg svg symbol) ---------- */
.f-white{filter:brightness(0) invert(1)} /* mark on a coloured kit / photo */
.f-yellow{filter:brightness(0) saturate(100%) invert(76%) sepia(60%) saturate(1400%) hue-rotate(358deg) brightness(104%) contrast(97%)}
.f-navy-deep{filter:brightness(.45)}
.lgo{display:block;aspect-ratio:609/640}
/* ================= BRAND STORY / MANIFESTO ================= */
.story{background:var(--paper);overflow:hidden}
.story-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(40px,6vw,90px);align-items:center}
.anatomy{position:relative;display:grid;place-items:center;min-height:420px}
.anatomy .aura{position:absolute;width:min(46vw,430px);aspect-ratio:1;border-radius:50%;
background:radial-gradient(circle,rgba(var(--tint),.07),transparent 65%);animation:breathe 6s ease-in-out infinite}
.anatomy .mark-wrap{position:relative;width:min(34vw,300px)}
.anatomy .mark-wrap svg{width:100%;
/* logo-mark.png is navy already: on a light field drop the recolour and let
the native navy carry it — a yellow mark on white measures 1.74:1. */
filter:brightness(0) saturate(100%) invert(76%) sepia(60%) saturate(1400%) hue-rotate(358deg) brightness(104%) contrast(97%) drop-shadow(0 14px 30px rgba(2,7,26,.70))}
.anatomy .mark-wrap .pulse-ring{position:absolute;inset:-12%;border:1px solid rgba(253,184,19,.0);border-radius:22px;animation:ringpulse 3.4s ease-out infinite}
@keyframes ringpulse{0%{border-color:rgba(253,184,19,.4);transform:scale(.92);opacity:1}100%{border-color:rgba(253,184,19,0);transform:scale(1.12);opacity:0}}
.callout{
position:absolute;max-width:220px;padding:13px 16px;
background:var(--panel);border:1px solid var(--hair);backdrop-filter:blur(10px);
font-size:12.5px;line-height:1.5;color:var(--ink-2);
opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease),transform .6s var(--ease),border-color .4s;
}
.callout b{display:block;font-family:var(--display);font-size:12px;letter-spacing:.12em;color:var(--gold);margin-bottom:5px;text-transform:uppercase}
.callout.on{opacity:1;transform:none;border-color:var(--gold)}
.callout::before{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px rgba(253,184,19,.7)}
.ca1{top:2%;left:0}.ca1::before{right:-34px;top:50%}
.ca2{bottom:6%;right:0}.ca2::before{left:-34px;top:50%}
.ca3{top:38%;right:-2%}.ca3::before{left:-30px;top:50%}
.anatomy-dots{position:absolute;bottom:0;left:50%;transform:translateX(-50%);display:flex;gap:10px}
.anatomy-dots button{width:26px;height:4px;padding:11px 0;box-sizing:content-box;background:rgba(var(--tint),.14);
background-clip:content-box;transition:background .3s} /* 26px hit area, 4px bar */
.anatomy-dots button.on{background:var(--gold)}
.story-copy{display:flex;flex-direction:column;gap:26px}
.story-copy .lead{font-size:clamp(15.5px,1.5vw,18.5px);color:var(--ink-2);max-width:58ch}
.story-copy .lead b{color:var(--ink);font-weight:600}
.vm-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.vm{border:1px solid var(--hair);background:var(--card);padding:22px;position:relative;overflow:hidden;transition:border-color .3s}
.vm:hover{border-color:var(--gold)}
.vm::after{content:"";position:absolute;top:0;left:0;width:34px;height:3px;background:var(--gold)}
.vm h4{font-family:var(--display);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.vm p{font-size:17px;color:var(--ink-2);line-height:1.6}
.vm p b{color:var(--ink)}
.values-row{display:flex;gap:10px;flex-wrap:wrap}
.value-chip{
display:flex;align-items:center;gap:10px;border:1px solid var(--hair);padding:11px 18px;
font-weight:600;font-size:13px;letter-spacing:.06em;transition:all .3s;
}
.value-chip:hover{border-color:var(--gold);transform:translateY(-3px)}
.value-chip i{width:8px;height:8px;background:var(--gold);font-style:normal;
clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
/* ziggurat divider */
.ziggurat{position:relative;height:120px;background:var(--paper);overflow:hidden}
.ziggurat::before{content:"";position:absolute;inset:0;
background:linear-gradient(90deg,rgba(253,184,19,.14),rgba(var(--tint),.07),rgba(253,184,19,.14));
background-size:200% 100%;animation:zigslide 12s linear infinite;
clip-path:polygon(0 100%,0 78%,6% 78%,6% 58%,13% 58%,13% 38%,21% 38%,21% 58%,28% 58%,28% 78%,36% 78%,36% 48%,43% 48%,43% 24%,50% 24%,50% 8%,57% 8%,57% 24%,64% 24%,64% 48%,71% 48%,71% 78%,78% 78%,78% 58%,85% 58%,85% 38%,92% 38%,92% 58%,100% 58%,100% 78%,100% 100%)}
@keyframes zigslide{to{background-position:200% 0}}
@media(max-width:960px){
.story-grid{grid-template-columns:1fr}
.vm-row{grid-template-columns:1fr}
.anatomy{min-height:420px}
.ca1{left:0}.ca2{right:0}.ca3{right:0}
}
/* ================= 3D SHOWCASE ================= */
.threed{background:var(--paper);overflow:hidden}
/* the model sits BESIDE the copy — stacking it underneath left a tall dead band */
.threed-grid{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
gap:clamp(30px,4.5vw,68px);align-items:center}
.threed-copy{display:flex;flex-direction:column;gap:clamp(22px,3vw,34px)}
.threed-copy .sec-head{margin-bottom:0}
.threed-copy .model-tabs{margin-top:0}
@media (max-width:900px){
/* minmax(0,…) not 1fr: 1fr is minmax(auto,1fr), and `auto` floors the
track at the widest item's min-content. The full-bleed tab scroller below
has a -18px margin each side, so the track measured 545px inside a 350px
shell and .threed{overflow:hidden} clipped the whole section. */
.threed-grid{grid-template-columns:minmax(0,1fr);gap:26px}
}
.viewer-wrap{
position:relative;border:1px solid var(--hair);
background:var(--surface); /* the panning grid is gone */
}
model-viewer{width:100%;height:min(58vh,520px);--poster-color:transparent;background:transparent;display:block}
.viewer-wrap .corner{position:absolute;width:26px;height:26px;border:2px solid var(--gold);pointer-events:none}
.viewer-wrap .c1{top:-2px;left:-2px;border-right:0;border-bottom:0}
.viewer-wrap .c2{top:-2px;right:-2px;border-left:0;border-bottom:0}
.viewer-wrap .c3{bottom:-2px;left:-2px;border-right:0;border-top:0}
.viewer-wrap .c4{bottom:-2px;right:-2px;border-left:0;border-top:0}
.viewer-hint{
position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-2);
display:flex;align-items:center;gap:10px;pointer-events:none;
}
.viewer-hint::before,.viewer-hint::after{content:"";width:30px;height:1px;background:var(--hair)}
.viewer-loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink-2);
font-size:12px;letter-spacing:.3em;text-transform:uppercase;pointer-events:none;transition:opacity .5s}
.viewer-loading.off{opacity:0}
.viewer-loading .lgo{width:52px;margin:0 auto 14px;animation:pulse 1.4s ease infinite}
.model-tabs{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.model-tab{border:1px solid var(--hair);padding:12px 20px;font-weight:600;font-size:13px;color:var(--ink-2);
display:flex;align-items:center;gap:10px;transition:all .25s;letter-spacing:.04em}
.model-tab i{width:10px;height:10px;border-radius:50%;font-style:normal}
.model-tab.on{border-color:var(--btn-fill);color:var(--btn-ink);background:var(--btn-fill);font-weight:700}
.threed .spec-chips{position:absolute;top:18px;right:18px;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.threed .spec-chips .chip{background:var(--panel);border:1px solid var(--hair);backdrop-filter:blur(8px)}
/* ================= SHOP / PRODUCTS ================= */
.shop{background:var(--paper)}
.shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.prod{
position:relative;border:1px solid var(--hair);background:var(--card);
display:flex;flex-direction:column;overflow:hidden;transition:border-color .3s,transform .45s var(--ease),box-shadow .45s;
}
.prod:hover{border-color:var(--gold);transform:translateY(-6px);box-shadow:0 26px 50px rgba(2,7,26,.47)}
.prod .ph{
position:relative;aspect-ratio:1;overflow:hidden;display:grid;place-items:center;
background:radial-gradient(120% 90% at 50% 20%,rgba(var(--tint),.07),transparent 60%),linear-gradient(160deg,rgba(var(--tint),.035),transparent);
border-bottom:1px solid var(--hair);
}
.prod .ph svg{width:70%;filter:drop-shadow(0 20px 26px rgba(2,7,26,.55));transition:transform .5s var(--ease)}
.prod:hover .ph svg{transform:scale(1.07) rotate(-1.5deg)}
.badge{
position:absolute;top:14px;left:14px;z-index:2;
font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
background:var(--btn-fill);color:var(--btn-ink);padding:6px 11px;
clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}
.badge.alt{background:rgba(var(--tint),.05);color:var(--ink);backdrop-filter:blur(6px)}
.prod .info{padding:18px 18px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.prod .cat{font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}
.prod h3{font-family:var(--body);font-weight:700;font-size:16.5px;letter-spacing:.02em}
.prod .price{font-family:var(--display);font-size:18px;color:var(--ink);margin-top:2px;font-variant-numeric:tabular-nums}
.prod .price s{font-family:var(--body);font-weight:500;font-size:13px;color:var(--ink-2);margin-left:8px}
.add-btn{
margin-top:auto;display:flex;align-items:center;justify-content:center;gap:10px;
border:1px solid rgba(var(--tint),.16);padding:13px;font-weight:700;font-size:12.5px;
letter-spacing:.14em;text-transform:uppercase;color:var(--ink);transition:all .25s;
}
.add-btn:hover{background:var(--btn-fill);border-color:var(--btn-fill);color:var(--btn-ink)}
.add-btn.added{background:var(--btn-fill);border-color:var(--btn-fill);color:var(--btn-ink)}
@media(max-width:1080px){.shop-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.shop-grid{grid-template-columns:1fr}}
/* ---------- cart ---------- */
.cart-btn{position:relative;display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(var(--tint),.20);
padding:11px 20px 11px 16px;font-weight:700;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;transition:all .25s}
.cart-btn:hover{border-color:var(--gold);color:var(--gold)}
/* عدّاد السلة: رقاقة داخل الزر — كانت مطلقة خارج حدوده فكان clip-path يقصّها نصفين */
.cart-count{
display:none;min-width:20px;height:20px;padding:0 6px;
align-items:center;justify-content:center;
background:var(--btn-fill);color:var(--btn-ink);
font-size:11.5px;font-weight:700;line-height:1;
font-variant-numeric:tabular-nums;
clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px);
}
.cart-count.show{display:inline-flex}
.cart-count.show{transform:scale(1)}
.cart-back{position:fixed;inset:0;z-index:90;background:rgba(11,19,48,.4);backdrop-filter:blur(4px);
opacity:0;pointer-events:none;transition:opacity .35s}
.cart-back.open{opacity:1;pointer-events:auto}
.cart{
position:fixed;top:0;right:0;bottom:0;z-index:95;width:min(430px,94vw);
background:var(--paper-2);border-left:1px solid var(--hair);
display:flex;flex-direction:column;transform:translateX(102%);transition:transform .5s var(--ease);
}
.cart.open{transform:none}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1px solid var(--hair)}
.cart-watermark{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:0}
.cart-watermark svg{width:min(60%,250px);height:auto;opacity:.08}
.cart > *:not(.cart-watermark){position:relative;z-index:1}
.cart-head h3{font-size:17px;letter-spacing:.06em}
.cart-x{font-size:22px;color:var(--ink-2);padding:4px 10px;transition:color .2s}
.cart-x:hover{color:var(--gold)}
.ship-bar{padding:16px 24px;border-bottom:1px solid var(--hair);font-size:12.5px;color:var(--ink-2)}
.ship-bar b{color:var(--gold)}
.ship-track{height:5px;background:rgba(255,255,255,.10);margin-top:10px;overflow:hidden}
.ship-fill{height:100%;width:0;background:linear-gradient(90deg,var(--yellow),var(--yellow-soft));transition:width .6s var(--ease)}
.cart-items{flex:1;overflow-y:auto;padding:10px 24px}
.cart-empty{text-align:center;color:var(--ink-2);padding:60px 20px;font-size:16px}
.ci{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding:16px 0;border-bottom:1px dashed var(--hair)}
.ci .thumb{position:relative;width:64px;height:64px;flex:none;overflow:hidden;border:1px solid var(--hair);display:grid;place-items:center;background:var(--surface)}
.ci .thumb svg{width:76%}
.ci h4{font-family:var(--body);font-weight:600;font-size:13.5px;margin-bottom:4px}
.ci .pr{font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.ci .qty{display:flex;align-items:center;gap:2px;border:1px solid var(--hair)}
.ci .qty button{padding:5px 10px;color:var(--ink-2);font-weight:700;transition:color .2s}
.ci .qty button:hover{color:var(--gold)}
.ci .qty span{min-width:22px;text-align:center;font-weight:700;font-size:13px;font-variant-numeric:tabular-nums}
.cart-foot{padding:20px 24px;border-top:1px solid var(--hair);display:flex;flex-direction:column;gap:14px}
.cart-total{display:flex;justify-content:space-between;font-weight:700;font-size:15px}
.cart-total .amt{font-family:var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.cart-note{font-size:13px;color:var(--ink-2);text-align:center}
.toast{
position:fixed;bottom:26px;left:50%;transform:translate(-50%,80px);z-index:120;
background:var(--btn-fill);color:var(--btn-ink);font-weight:700;font-size:13.5px;letter-spacing:.04em;
padding:14px 24px;transition:transform .45s var(--ease);
clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.toast.show{transform:translate(-50%,0)}
/* ================= STADIUM WORLD (WebGL) ================= */
#world{position:fixed;inset:0;z-index:-1;display:block}
/* ================= PRELOADER ================= */
#loader{
position:fixed;inset:0;z-index:200;background:var(--paper-2);
display:flex;align-items:center;justify-content:center;flex-direction:column;gap:26px;
transition:transform .8s var(--ease),visibility 0s .8s;
}
#loader.done{transform:translateY(-100%);visibility:hidden}
#loader .lgo{width:96px;animation:logoin 1.2s var(--ease) both}
/* No filter in here. A filter list REPLACES the cascade's, so these frames
forced the mark white for the first 1.2s — on the white and yellow schemes
that is a white mark on a light field. Colour belongs to .f-yellow, which
the scheme overrides; the animation owns opacity and transform only. */
@keyframes logoin{
0%{opacity:0;transform:scale(.6) rotateY(90deg)}
100%{opacity:1;transform:none}
}
#loader .bar{width:150px;height:2px;background:var(--hair);overflow:hidden}
#loader .bar i{display:block;height:100%;width:40%;background:var(--gold);animation:load 1.1s ease-in-out infinite}
@keyframes load{0%{transform:translateX(-100%)}100%{transform:translateX(400%)}}
#loader .word{font-family:var(--display);letter-spacing:.5em;font-size:13px;color:var(--ink-2);
text-transform:uppercase;animation:pulse 1.6s ease infinite}
@keyframes pulse{50%{opacity:.35}}
/* ================= NAV ================= */
.announce{
position:relative;z-index:60;background:var(--btn-fill);color:var(--btn-ink);
font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
text-align:center;padding:9px 40px;
}
.announce.hidden{display:none}
.announce-x{
position:absolute;top:50%;right:12px;transform:translateY(-50%);
width:22px;height:22px;display:grid;place-items:center;
font-size:16px;line-height:1;color:var(--navy);opacity:.65;transition:opacity .2s;
}
.announce-x:hover{opacity:1}
header{
position:sticky;top:0;z-index:50;
display:flex;align-items:center;justify-content:space-between;gap:28px;
padding:0 var(--pad);height:76px;
background:var(--panel);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
border-bottom:1px solid var(--hair);
transition:transform .45s var(--ease);
}
header.hide{transform:translateY(calc(-100% - 40px))}
.brand{display:flex;align-items:center;gap:13px}
.brand svg{width:34px}
.brand .wm{font-family:var(--display);font-size:20px;letter-spacing:.06em}
nav{display:flex;gap:34px;font-weight:500;font-size:14.5px}
nav a{position:relative;padding:6px 0;color:var(--ink-2);transition:color .3s}
nav a:hover{color:var(--ink)}
nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--gold);transition:width .35s var(--ease)}
nav a:hover::after{width:100%}
.btn{
display:inline-flex;align-items:center;gap:12px;
font-family:var(--body);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;
padding:16px 30px;border-radius:2px;position:relative;overflow:hidden;
transition:transform .3s var(--ease),box-shadow .3s;white-space:nowrap;
}
.btn .arr{transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}
.btn-solid{background:var(--btn-fill);color:var(--btn-ink);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.btn-solid:hover{box-shadow:0 14px 40px rgba(253,184,19,.35);transform:translateY(-2px)}
.btn-ghost{border:1px solid rgba(var(--tint),.20);color:var(--ink)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
header .btn{padding:12px 22px;font-size:12.5px}
@media(max-width:900px){nav{display:none}}
/* ================= HERO ================= */
.hero{
position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
padding:110px var(--pad) 140px;overflow:hidden;
background:
var(--paper);
}
#stars{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* brand backdrop: pure navy depth + the Hammy mark as a watermark (no photo — lighter + on-brand) */
/* Cinematic hero backdrop. A real photograph, veiled to white across
the copy side so the dark headline keeps its contrast — this is how
the one light reference carries photography without going dark. */
.hero-photo{position:absolute;inset:0;pointer-events:none;
background-size:cover;background-position:center right;background-repeat:no-repeat}
.hero-photo.has-photo::before{content:"";position:absolute;inset:0;
background:
linear-gradient(90deg,var(--paper) 0%,rgba(6,21,85,.88) 34%,
rgba(6,21,85,.44) 62%,rgba(6,21,85,.10) 100%),
linear-gradient(180deg,var(--paper) 0%,transparent 18%,
transparent 74%,var(--paper) 100%)}
.hero-photo.has-photo::after{display:none} /* الصورة تحلّ محلّ العلامة المائية */
.hero-photo::after{content:"";position:absolute;inset:0;
background:url(//hammy.at/cdn/shop/t/120/assets/logo-mark.png?v=5109479646430566861792180881) center 42%/min(52vw,520px) no-repeat;
opacity:.06;filter:brightness(0) invert(1)}
/* hero player viewer */
#mvHero{width:100%;height:min(66vh,580px);--poster-color:transparent;position:relative;z-index:2}
/* football pitch line-work */
.pitch-lines{position:absolute;inset:auto 0 0 0;height:70%;pointer-events:none;opacity:.1;color:var(--ink-2)}
/* full-bleed sports photo bands */
.photo-band{position:relative;min-height:44vh;display:flex;align-items:flex-end;overflow:hidden;
padding:clamp(50px,8vh,90px) var(--pad)}
.photo-band .pb-bg{position:absolute;inset:0;background-size:cover;background-position:center;
transform:scale(1.12);will-change:transform}
.photo-band::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(11,19,48,.85) 0%,rgba(11,19,48,.25) 45%,rgba(11,19,48,.9) 100%)}
.pb-player .pb-bg{background-image:url(//hammy.at/cdn/shop/t/120/assets/ph-player.webp?v=18877376554056314901792180881)}
.pb-training .pb-bg{background-image:url(//hammy.at/cdn/shop/t/120/assets/ph-training.webp?v=32797755937380321961792180881)}
.photo-band .pb-inner{color:#fff;position:relative;z-index:2;max-width:1280px;margin:0 auto;width:100%;
display:flex;flex-direction:column;gap:18px}
.photo-band h2{font-size:clamp(30px,4.6vw,58px);max-width:22ch}
.photo-band .pb-note{color:rgba(255,255,255,.82);max-width:52ch;font-size:18px}
.photo-band .eyebrow{color:var(--gold)}
/* stadium light beams */
.beams{position:absolute;inset:-20%;pointer-events:none;opacity:.5;
background:conic-gradient(from 0deg at 72% 30%,
transparent 0deg,rgba(253,184,19,.05) 12deg,transparent 26deg,
transparent 120deg,rgba(var(--tint),.05) 136deg,transparent 152deg,
transparent 240deg,rgba(253,184,19,.04) 258deg,transparent 274deg);
animation:beamspin 38s linear infinite;transform-origin:72% 30%}
@keyframes beamspin{to{transform:rotate(360deg)}}
/* accent word shimmer */
.hero h1 .line span.accent{
background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
animation:rise 1s var(--ease) .14s forwards,shimmer 4.5s ease-in-out 1.4s infinite}
@keyframes shimmer{0%,100%{background-position:120% 0}45%,55%{background-position:-20% 0}}
/* orbiting satellite on hero ring */
.orbit{position:absolute;width:min(52vw,480px);aspect-ratio:1;border-radius:50%;
animation:ringspin 16s linear infinite;pointer-events:none}
.orbit::before{content:"";position:absolute;top:-5px;left:50%;width:10px;height:10px;border-radius:50%;
background:var(--gold);box-shadow:0 0 16px 4px rgba(253,184,19,.55)}
.orbit.o2{width:min(64vw,600px);animation-duration:30s;animation-direction:reverse}
.orbit.o2::before{width:6px;height:6px;background:var(--ink-2);box-shadow:0 0 10px 2px rgba(2,7,26,.78)}
.hero-watermark{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
font-family:var(--display);font-size:clamp(180px,30vw,460px);white-space:nowrap;
color:transparent;-webkit-text-stroke:1px rgba(var(--tint),.06);
pointer-events:none;user-select:none;letter-spacing:.02em;
}
.hero-grid{
position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
gap:clamp(30px,5vw,70px);align-items:center;max-width:1360px;margin:0 auto;width:100%;
}
.hero-copy{display:flex;flex-direction:column;gap:30px}
.hero h1{font-size:clamp(42px,6.4vw,92px)}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line span{display:block;transform:translateY(110%);animation:rise 1s var(--ease) forwards}
.hero h1 .line:nth-child(2) span{animation-delay:.14s}
.hero h1 .accent{color:var(--gold)}
@keyframes rise{to{transform:none}}
.hero-sub{color:var(--ink-2);font-size:clamp(16px,1.5vw,20px);max-width:54ch}
.hero-ctas{display:flex;gap:18px;flex-wrap:wrap}
.hero-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.chip{
font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
color:var(--ink-2);border:1px solid var(--hair);padding:8px 14px;
display:inline-flex;gap:8px;align-items:center;
}
.chip b{color:var(--gold);font-weight:700}
/* --- 3D mark --- */
.stage{position:relative;display:grid;place-items:center;perspective:1200px;min-height:420px}
.mark3d-tilt{transform-style:preserve-3d;will-change:transform}
.mark3d{position:relative;width:clamp(210px,22vw,300px);aspect-ratio:609/640;
transform-style:preserve-3d;animation:swing 7s ease-in-out infinite alternate}
@keyframes swing{
from{transform:rotateY(-38deg) rotateX(6deg) translateY(-8px)}
to{transform:rotateY(38deg) rotateX(-6deg) translateY(8px)}
}
.mark3d .layer{position:absolute;inset:0;backface-visibility:visible}
.mark3d .layer svg{width:100%;height:100%}
.stage .halo{
position:absolute;width:min(60vw,560px);aspect-ratio:1;border-radius:50%;
background:radial-gradient(circle,rgba(253,184,19,.08),rgba(253,184,19,.02) 45%,transparent 68%);
filter:blur(2px);animation:breathe 5s ease-in-out infinite;
}
@keyframes breathe{50%{transform:scale(1.08);opacity:.8}}
.stage .ring{
position:absolute;width:min(52vw,480px);aspect-ratio:1;border-radius:50%;
border:1px dashed rgba(var(--tint),.14);animation:ringspin 40s linear infinite;
}
.stage .ring.r2{width:min(64vw,600px);border-color:rgba(var(--tint),.08);animation-duration:70s;animation-direction:reverse}
@keyframes ringspin{to{transform:rotate(360deg)}}
.float-chip{
position:absolute;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
background:var(--panel);border:1px solid var(--hair);padding:9px 15px;
backdrop-filter:blur(8px);animation:hover 6s ease-in-out infinite;
}
.float-chip b{color:var(--gold)}
.fc1{top:12%;left:4%;animation-delay:0s}
.fc2{bottom:16%;right:0;animation-delay:1.6s}
.fc3{top:4%;right:12%;animation-delay:3.1s}
@keyframes hover{50%{transform:translateY(-14px)}}
.scroll-cue{
position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:3;
display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--ink-2);
font-size:11px;letter-spacing:.3em;text-transform:uppercase;
}
.scroll-cue .wheel{width:1px;height:44px;background:var(--hair);position:relative;overflow:hidden}
.scroll-cue .wheel::after{content:"";position:absolute;top:-40%;left:0;width:100%;height:40%;
background:var(--gold);animation:drop 1.8s var(--ease) infinite}
@keyframes drop{to{top:110%}}
@media(max-width:960px){
.hero-grid{grid-template-columns:minmax(0,1fr)}
.stage{min-height:340px;order:-1}
}
@media(max-width:700px){
.stage{display:block}
.hero{padding-top:90px;min-height:auto}
.hero-watermark{font-size:150px;top:30%}
}
/* ---------- ambient motion pack ---------- */
/* products & club jerseys gently float */
.prod .ph svg{animation:bob 5s ease-in-out infinite}
.prod:nth-child(2n) .ph svg{animation-delay:1.2s}
.prod:nth-child(3n) .ph svg{animation-delay:2.4s}
.club-kit{animation:bob 6s ease-in-out infinite}
.club-card:nth-child(2n) .club-kit{animation-delay:1.5s}
@keyframes bob{50%{transform:translateY(-9px) rotate(-1deg)}}
.prod:hover .ph svg{animation-play-state:paused}
/* fabric weaves drift continuously */
.fab-weave{animation:weave 14s linear infinite}
@keyframes weave{to{background-position:220px 140px}}
/* CTA pattern band slides */
.cta .pattern-band{animation:bandslide 22s linear infinite}
@keyframes bandslide{to{transform:rotate(-2deg) translateX(-124px)}}
/* kit lab blueprint grid pans */
}
/* stat numbers glow pulse */
.stat .big{animation:statglow 3.6s ease-in-out infinite}
.stat:nth-child(2) .big{animation-delay:.9s}
.stat:nth-child(3) .big{animation-delay:1.8s}
.stat:nth-child(4) .big{animation-delay:2.7s}
@keyframes statglow{50%{text-shadow:0 0 26px rgba(253,184,19,.55)}}
/* outline text marquee (pre-footer) */
.ghost-marquee{overflow:hidden;background:var(--paper-2);padding:28px 0}
.ghost-marquee .track{display:flex;width:max-content;animation:slide 32s linear infinite;gap:0}
.ghost-marquee span{
font-family:var(--display);font-size:clamp(40px,7vw,92px);text-transform:uppercase;white-space:nowrap;
padding:0 30px;color:transparent;-webkit-text-stroke:1.5px rgba(var(--tint),.14);
transition:color .4s;
}
.ghost-marquee span b{font-weight:400;color:var(--gold);-webkit-text-stroke:0}
.ghost-marquee:hover .track{animation-play-state:paused}
/* ================= COLLECTIONS ================= */
.collections{background:var(--paper)}
.col-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.col-card{
position:relative;border:1px solid var(--hair);background:var(--card);
padding:26px 24px 30px;display:flex;flex-direction:column;gap:18px;min-height:380px;
transition:border-color .35s,background .35s;overflow:hidden; /* preserve-3d removed: overflow+clip-path flatten it anyway */
}
.col-card::before{ /* sheen */
content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(var(--tint),.06) 48%,transparent 62%);
transform:translateX(-120%);transition:transform .8s var(--ease);pointer-events:none;
}
.col-card:hover::before{transform:translateX(120%)}
.col-card:hover{border-color:var(--gold);background:var(--surface)}
.col-card .idx{font-family:var(--display);font-size:12px;color:var(--ink-2);letter-spacing:.2em}
.col-card .art{flex:1 1 auto;position:relative;min-height:170px;overflow:hidden;display:grid;place-items:center;transform:translateZ(34px)}
.col-card .art svg{width:78%;filter:drop-shadow(0 18px 26px rgba(2,7,26,.51))}
.col-card .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 26px rgba(2,7,26,.51))}
.col-card h3{font-size:19px;letter-spacing:.03em}
.col-card p{color:var(--ink-2);font-size:17px;line-height:1.55}
.col-card .go{
display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:12px;
letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-top:2px;
}
.col-card .go .arr{transition:transform .3s var(--ease)}
.col-card:hover .go .arr{transform:translateX(6px)}
@media(max-width:1080px){.col-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.col-grid{grid-template-columns:1fr}.col-card{min-height:380px}}
/* ================= KIT LAB ================= */
.swatch{overflow:hidden;
width:52px;height:52px;border-radius:50%;border:2px solid transparent;position:relative;
transition:transform .25s var(--ease),border-color .25s;
}
.swatch:hover{transform:translateY(-4px)}
.swatch.on{border-color:var(--gold)}
.swatch.on::after{content:"";position:absolute;inset:-8px;border:1px dashed rgba(253,184,19,.5);border-radius:50%;animation:ringspin 14s linear infinite}
.field-row{display:grid;grid-template-columns:1.4fr .6fr;gap:12px;align-items:start}
.field-row>*{min-width:0} /* grid items must be allowed to shrink */
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field input{
background:var(--surface);border:1px solid var(--hair);color:var(--ink);
font-family:var(--body);font-weight:600;font-size:16px;padding:13px 16px;letter-spacing:.06em;
transition:border-color .25s;border-radius:2px;width:100%;min-width:0;box-sizing:border-box;
}
.field input:focus{outline:none;border-color:var(--gold)}
/* ================= CLUBS — CINEMA CAROUSEL ================= */
.clubs{background:var(--paper);overflow:hidden;
transition:background 1.2s ease}
/* every .cslide stacks into ONE grid cell instead of position:absolute, so the
cinema finally knows how tall its tallest slide is and the padding reserved
for the control bar actually holds. Absolute slides contributed no height,
which is why the CTA and the kit tabs kept sliding under the bar. */
.cinema{position:relative;display:grid;grid-template-columns:1fr;
min-height:min(66vh,560px);border:1px solid var(--hair);overflow:hidden;
background:var(--paper);
transition:background 1.2s ease}
.cslide{grid-area:1/1;position:relative;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
align-items:center;gap:clamp(16px,3.5vw,56px);padding:clamp(26px,4.5vw,60px) clamp(26px,4.5vw,60px) 126px;
visibility:hidden;pointer-events:none}
.cslide.on{visibility:visible;pointer-events:auto}
/* ---- kit stage with multiple views ---- */
.cstage{position:relative;z-index:2;justify-self:center;width:100%;
display:flex;flex-direction:column;align-items:center;gap:16px;
transform:translateX(120px) rotate(8deg) scale(.76);opacity:0;filter:blur(10px);
transition:transform 1s var(--ease) .15s,opacity .7s .15s,filter .8s .15s}
.cslide.on .cstage{transform:none;opacity:1;filter:none}
.ckits{position:relative;width:min(74%,320px);aspect-ratio:200/220}
.cslide.on .ckits{animation:bob 6s ease-in-out 1.2s infinite}
.ckit{position:absolute;inset:0;opacity:0;transform:scale(.94);
transition:opacity .45s var(--ease),transform .45s var(--ease)}
.ckit.on{opacity:1;transform:none}
.ckit svg,.ckit img{width:100%;filter:drop-shadow(0 34px 50px rgba(2,7,26,.66))}
.ckit img{height:100%;object-fit:contain}
.ckit-thumbs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.ckit-thumb{border:1px solid var(--hair);padding:7px 14px;font-size:10.5px;font-weight:700;
letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);transition:all .25s}
.ckit-thumb:hover{color:var(--ink);border-color:rgba(var(--tint),.20)}
.ckit-thumb.on{border-color:var(--gold);background:var(--btn-fill);color:var(--btn-ink)}
/* giant club name sweeping behind */
.cname-bg{position:absolute;top:8%;left:0;width:100%;overflow:hidden;pointer-events:none}
.cname-bg span{
display:inline-block;font-family:var(--display);font-size:clamp(90px,15vw,220px);
white-space:nowrap;color:transparent;-webkit-text-stroke:1.5px var(--club-stroke,rgba(var(--tint),.10));
transform:translateX(30%);opacity:0;transition:transform 1.6s var(--ease),opacity .9s;
}
.cslide.on .cname-bg span{transform:translateX(-6%);opacity:1}
/* jersey entrance */
.cjersey{position:relative;z-index:2;justify-self:center;width:min(58%,330px);
transform:translateX(140px) rotate(10deg) scale(.72);opacity:0;filter:blur(10px);
transition:transform 1s var(--ease) .15s,opacity .7s .15s,filter .8s .15s}
.cslide.on .cjersey{transform:none;opacity:1;filter:none;animation:bob 6s ease-in-out 1.2s infinite}
.cjersey svg{width:100%;filter:drop-shadow(0 34px 50px rgba(2,7,26,.66))}
/* meta column */
.cmeta{position:relative;z-index:2;display:flex;flex-direction:column;gap:18px;max-width:52ch}
.cmeta > *{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.cslide.on .cmeta > *{opacity:1;transform:none}
.cslide.on .cmeta > *:nth-child(1){transition-delay:.25s}
.cslide.on .cmeta > *:nth-child(2){transition-delay:.35s}
.cslide.on .cmeta > *:nth-child(3){transition-delay:.45s}
.cslide.on .cmeta > *:nth-child(4){transition-delay:.55s}
.cslide.on .cmeta > *:nth-child(5){transition-delay:.65s}
.cmeta .club-tag{font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.cmeta h3{font-size:clamp(30px,4vw,52px);line-height:1.02}
.cmeta h3 small{display:block;font-size:.34em;color:var(--ink-2);letter-spacing:.3em;margin-top:8px}
.cmeta p{color:var(--ink-2);font-size:17px}
/* ---- case-study details ---- */
.chead{display:flex;align-items:center;gap:16px}
.ccrest{width:60px;height:60px;flex:none;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(2,7,26,.51))}
.ccrest-fb{width:60px;height:60px;flex:none;border:1px solid var(--hair);display:grid;place-items:center;
font-family:var(--display);font-size:19px;color:var(--ink);background:var(--surface)}
.cindex{font-family:var(--display);font-size:11.5px;letter-spacing:.28em;color:var(--ink-2)}
.cindex b{color:var(--gold);font-weight:400;font-size:15px}
.cline{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);
display:flex;flex-wrap:wrap;gap:8px 16px}
.cline em{font-style:normal;display:inline-flex;align-items:center;gap:8px}
.cline em::before{content:"";width:4px;height:4px;background:var(--gold);border-radius:50%;flex:none}
.cquote{border-left:2px solid var(--gold);padding:3px 0 3px 18px;font-size:15px;line-height:1.55;
color:var(--ink);font-style:italic}
.cquote cite{display:block;margin-top:9px;font-style:normal;font-size:10.5px;
letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.cstats{display:flex;gap:clamp(18px,3vw,34px);flex-wrap:wrap;border-top:1px solid var(--hair);padding-top:16px}
.cstat b{display:block;font-family:var(--display);font-size:23px;color:var(--ink);
font-variant-numeric:tabular-nums;line-height:1.1}
.cstat span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.club-pal{display:flex;gap:8px}
.club-pal i{width:34px;height:10px;display:block;transform-origin:left;transform:scaleX(0);transition:transform .6s var(--ease)}
.cslide.on .club-pal i{transform:none}
.cslide.on .club-pal i:nth-child(2){transition-delay:.1s}
.cslide.on .club-pal i:nth-child(3){transition-delay:.2s}
.cslide.on .club-pal i:nth-child(4){transition-delay:.3s}
/* controls */
.cine-ui{position:absolute;inset:auto 0 0 0;z-index:5;display:flex;align-items:center;gap:18px;
padding:18px clamp(20px,4vw,40px);border-top:1px solid var(--hair);
background:rgba(11,19,48,.55);backdrop-filter:blur(10px)}
/* the strip scrolls; without min-width:0 it refuses to shrink, and without the
edge mask a clipped tab butts straight into the counter and reads as overlap */
.cine-tabs{display:flex;gap:6px;flex:1 1 auto;min-width:0;overflow-x:auto;
scrollbar-width:none;scroll-snap-type:x proximity;
-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);
mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
.cine-tabs::-webkit-scrollbar{display:none}
.cine-tab{position:relative;flex:none;scroll-snap-align:start;
padding:10px 16px;font-weight:700;font-size:11.5px;letter-spacing:.16em;
text-transform:uppercase;color:var(--ink-2);border:1px solid transparent;white-space:nowrap;transition:color .3s}
.cine-tab:hover{color:var(--ink)}
.cine-tab.on{color:var(--btn-ink);background:var(--btn-fill)}
.cine-tab.on .prog{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--navy);
animation:cprog var(--cine-dur,6s) linear forwards}
@keyframes cprog{to{width:100%}}
.cine-arrows{display:flex;gap:8px;flex:none} /* never shrink into each other */
.cine-arrow{width:44px;height:44px;border:1px solid var(--hair);display:grid;place-items:center;
color:var(--ink);font-size:18px;transition:all .25s}
.cine-arrow:hover{background:var(--btn-fill);color:var(--btn-ink);border-color:var(--gold)}
.cine-count{flex:none;font-family:var(--display);font-size:13px;color:var(--ink-2);letter-spacing:.2em}
.cine-count b{color:var(--gold);font-weight:400}
.cinema{cursor:grab}
.cinema.dragging{cursor:grabbing}
@media(max-width:900px){
.cslide{grid-template-columns:1fr;align-content:start;padding-top:36px;gap:20px}
.ckits{width:min(46%,190px)}
.cinema{min-height:680px}
.cstats{gap:20px}
}
@media(max-width:560px){
.cinema{min-height:740px}
.cslide{padding:22px 18px 150px;gap:16px}
.ckits{width:min(42%,155px)}
.cmeta h3{font-size:25px}
.cmeta p{font-size:17px}
.cquote{font-size:13.5px;padding-left:14px}
.cname-bg span{font-size:88px}
.ccrest,.ccrest-fb{width:48px;height:48px}
.cstat b{font-size:19px}
.cine-ui{gap:10px;padding:12px 14px;flex-wrap:wrap}
.cine-count{display:none}
.cine-arrow{width:38px;height:38px}
}
/* ================= COLLECTION 2026 — SCROLL LOOKBOOK ================= */
.lookbook{position:relative;background:var(--paper)}
.lb-sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.lb-head{padding:0 var(--pad);max-width:1280px;margin:0 auto 34px;width:100%}
.lb-track{display:flex;gap:clamp(18px,2.5vw,34px);padding:0 var(--pad);will-change:transform}
.lb-card{
flex:0 0 clamp(240px,24vw,330px);position:relative;border:1px solid var(--hair);
background:var(--surface);
padding:24px 22px 26px;display:flex;flex-direction:column;gap:14px;overflow:hidden;
transition:border-color .3s;
}
.lb-card:hover{border-color:var(--gold)}
.lb-card .num{font-family:var(--display);font-size:13px;color:var(--ink-2);letter-spacing:.2em}
.lb-card .num b{color:var(--gold);font-weight:400}
.lb-card .kit{width:82%;aspect-ratio:200/220;align-self:center;filter:drop-shadow(0 18px 26px rgba(2,7,26,.51))}
.lb-card svg.kit{height:auto}
.lb-card img.kit{height:100%;object-fit:contain}
.lb-card h3{font-size:17px;letter-spacing:.04em}
.lb-card .lb-sub{color:var(--ink-2);font-size:14px;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.lb-card::after{content:"";position:absolute;top:0;left:0;width:100%;height:3px;
background:var(--lb-accent,var(--yellow));transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.lb-card:hover::after{transform:none}
.lb-progress{position:absolute;bottom:26px;left:var(--pad);right:var(--pad);height:2px;background:rgba(var(--tint),.10)}
.lb-progress i{display:block;height:100%;width:0;background:var(--gold)}
.lb-hint{position:absolute;bottom:40px;right:var(--pad);color:var(--ink-2);font-size:11px;
letter-spacing:.26em;text-transform:uppercase}
@media(max-width:760px){
/* the scroll-driven pan stays on phones (JS drives it); only sizing changes */
.lb-card{flex-basis:74vw}
}
/* ================= PROCESS ================= */
.process .steps{position:relative;display:flex;flex-direction:column;gap:0;max-width:860px}
.process .rail-line{position:absolute;left:31px;top:0;bottom:0;width:2px;background:var(--hair)}
.process .rail-fill{position:absolute;left:31px;top:0;width:2px;height:0;background:var(--gold);transition:height .2s linear}
.step{display:grid;grid-template-columns:64px 1fr;gap:26px;padding:24px 0;position:relative}
.step+.step{border-top:1px dashed var(--hair)}
.step .num{
width:64px;height:64px;border:1px solid var(--hair);display:grid;place-items:center;
font-family:var(--display);font-size:19px;background:var(--paper);z-index:1;
transition:all .4s var(--ease);border-radius:2px;
}
.step.active .num{background:var(--btn-fill);color:var(--btn-ink);border-color:var(--gold);box-shadow:0 0 34px rgba(253,184,19,.35)}
.step h3{font-size:21px;margin-bottom:9px;letter-spacing:.02em}
.step p{color:var(--ink-2);max-width:56ch;font-size:17px}
/* ================= FABRICS ================= */
.fabrics{background:var(--paper)}
.fab-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.fab-card{border:1px solid var(--hair);overflow:hidden;position:relative;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;transition:border-color .3s}
.fab-card:hover{border-color:var(--gold)}
.fab-weave{position:absolute;inset:0;opacity:.5;transition:opacity .4s,transform .8s var(--ease)}
.fab-card:hover .fab-weave{opacity:.85;transform:scale(1.06)}
.fab-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9;transition:opacity .4s,transform .8s var(--ease)}
.fab-card:hover .fab-img{opacity:1;transform:scale(1.06)}
.w1{background:repeating-linear-gradient(45deg,rgba(253,184,19,.14) 0 2px,transparent 2px 9px),repeating-linear-gradient(-45deg,rgba(var(--tint),.08) 0 2px,transparent 2px 9px)}
.w2{background:repeating-linear-gradient(90deg,rgba(90,130,255,.16) 0 3px,transparent 3px 8px),repeating-linear-gradient(0deg,rgba(var(--tint),.06) 0 2px,transparent 2px 7px)}
.w3{background:radial-gradient(rgba(var(--tint),.12) 1.3px,transparent 1.6px);background-size:11px 11px}
.w4{background:repeating-linear-gradient(0deg,rgba(253,184,19,.1) 0 4px,transparent 4px 12px),repeating-linear-gradient(90deg,rgba(90,130,255,.1) 0 4px,transparent 4px 12px)}
.fab-body{position:relative;padding:22px;background:linear-gradient(transparent,var(--panel-2) 34%)}
.fab-gsm{font-family:var(--display);font-size:12px;color:var(--gold);letter-spacing:.14em;margin-bottom:8px}
.fab-body h3{font-size:18px;margin-bottom:8px}
.fab-body p{color:var(--ink-2);font-size:17px;line-height:1.65}
@media(max-width:1080px){.fab-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.fab-grid{grid-template-columns:1fr}}
/* ================= STATS ================= */
.stats{background:var(--paper-2)}
.stats .shell{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.stat{padding:14px 0;text-align:center}
.stat .big{font-family:var(--display);font-size:clamp(30px,3.8vw,52px);color:var(--ink);font-variant-numeric:tabular-nums}
.stat .big small{font-size:.45em;color:var(--ink)}
.stat .lbl{color:var(--ink-2);font-size:12.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;margin-top:8px}
@media(max-width:800px){.stats .shell{grid-template-columns:repeat(2,1fr)}}
/* ================= CTA / FOOTER ================= */
.cta{
position:relative;text-align:center;overflow:hidden;
background:
var(--paper-2);
}
.cta h2{font-size:clamp(34px,5.4vw,72px);max-width:20ch;margin:0 auto 22px}
.cta h2 .accent{color:var(--gold)}
.cta p:not(.eyebrow){color:var(--ink-2);max-width:56ch;margin:0 auto 40px}
.cta .pattern-band{
position:absolute;inset:auto 0 -40px;height:150px;opacity:.1;pointer-events:none;
display:flex;gap:34px;justify-content:center;transform:rotate(-2deg)
}
.cta .pattern-band svg{width:90px;flex:none}
footer{background:var(--paper-2);padding:60px var(--pad) 40px}
.foot-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px}
.foot-brand{display:flex;flex-direction:column;gap:16px}
.foot-brand svg{width:40px}
.foot-brand p{color:var(--ink-2);font-size:16.5px;max-width:34ch}
.foot-col h4{font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-2);margin-bottom:16px}
.foot-col a{display:block;padding:5px 0;color:var(--ink);font-size:14.5px;transition:color .25s}
.foot-col a:hover{color:var(--gold)}
.foot-base{max-width:1280px;margin:44px auto 0;padding-top:22px;border-top:1px solid var(--hair);
display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;color:var(--ink-2);font-size:12.5px;letter-spacing:.06em}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
html{scroll-behavior:auto}
[data-reveal]{opacity:1;transform:none}
}
.prod .ph img{position:absolute;inset:11%;width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 20px 26px rgba(2,7,26,.55));transition:transform .5s var(--ease)}
.prod:hover .ph img{transform:scale(1.07) rotate(-1.5deg)}
.ci .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pdp{max-width:1100px;margin:0 auto;padding:80px var(--pad);display:grid;grid-template-columns:1fr 1fr;gap:50px}
.pdp img{width:100%;height:auto;object-fit:contain;border:1px solid var(--hair);background:var(--surface)}
.pdp h1{font-size:clamp(28px,4vw,44px)}
.pdp .price{font-family:var(--display);font-size:24px;color:var(--ink);margin:18px 0}
.pdp select{background:var(--paper);color:var(--ink);border:1px solid var(--hair);padding:12px;font-family:var(--body);margin-bottom:18px;width:100%}
@media(max-width:800px){.pdp{grid-template-columns:1fr}}
/* ============================================================
PRODUCT PAGE (main-product.liquid)
============================================================ */
.pdp2{position:relative}
.pdp2-wrap{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,68px);align-items:start}
/* ---- gallery ---- */
.pg{position:sticky;top:96px;display:flex;flex-direction:column;gap:14px}
.pg-left{flex-direction:row-reverse;align-items:flex-start}
.pg-stage{position:relative;flex:1;border:1px solid var(--hair);overflow:hidden;
background:radial-gradient(120% 90% at 50% 16%,rgba(var(--tint),.08),transparent 62%),linear-gradient(160deg,rgba(var(--tint),.035),transparent);
border-radius:3px}
/* grid-template, not bare place-items: the implicit row is auto-sized, so a
child's height:100% resolved against the ROW, the row had grown to the
image's own height, and 100% of 722 is 722 — the photo overflowed a 578px
stage by 144px and was cropped from the bottom instead of the centre.
minmax(0,1fr) pins the area to the slide, so 100% means the frame. */
.pg-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .45s var(--ease);
display:grid;place-items:center;grid-template:minmax(0,1fr)/minmax(0,1fr)}
.pg-slide.on{opacity:1;visibility:visible}
.pg-slide img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 30px 46px rgba(2,7,26,.51))}
.pg-slide model-viewer,.pg-slide video{width:100%;height:100%}
.pg-art{padding:14%}.pg-art svg{width:70%;height:auto;filter:drop-shadow(0 30px 46px rgba(2,7,26,.51))}
.pg-badges{position:absolute;top:16px;left:16px;z-index:3;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.pg-badge{font-family:var(--body);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border-radius:2px}
.pg-badge.sale{background:var(--btn-fill);color:var(--btn-ink)}
.pg-badge.out{background:var(--navy);color:#fff;border:1px solid var(--navy)}
.pg-badge.tag{background:var(--surface-2);color:var(--ink);border:1px solid var(--hair);backdrop-filter:blur(6px)}
.pg-thumbs{display:flex;gap:10px;flex-wrap:wrap}
.pg-left .pg-thumbs{flex-direction:column;flex:none;width:76px}
.pg-thumb{position:relative;width:72px;height:72px;flex:none;border:1px solid var(--hair);overflow:hidden;
background:var(--surface);transition:border-color .25s,transform .25s;border-radius:2px}
.pg-thumb:hover{transform:translateY(-2px)}
.pg-thumb img{width:100%;height:100%;object-fit:cover}
.pg-thumb .thumb-badge{position:absolute;bottom:3px;right:4px;font-size:9px;font-weight:700;color:var(--gold);
background:var(--panel);padding:1px 5px;border-radius:2px}
/* ---- info column ---- */
.pi{min-width:0;padding-top:4px}
.pi-crumb{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-2);letter-spacing:.05em;margin-bottom:20px;flex-wrap:wrap}
.pi-crumb a:hover{color:var(--gold)}.pi-crumb b{color:var(--ink);font-weight:600}
.pi-eyebrow{margin-bottom:12px}
.pi-title{font-size:clamp(30px,4.2vw,52px);margin-bottom:14px}
.pi-rating{display:flex;align-items:center;gap:9px;margin-bottom:18px;font-size:13.5px;color:var(--ink-2)}
.pi-rating .stars{--r:100%;width:96px;height:16px;
-webkit-mask:url("data:image/svg+xml;utf8,") no-repeat;
mask:url("data:image/svg+xml;utf8,") no-repeat;
background:linear-gradient(90deg,var(--yellow) var(--r),rgba(var(--tint),.16) var(--r))}
.pi-rating .rr{color:var(--ink);font-weight:700}
.pi-price{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.pi-price .now{font-family:var(--display);font-size:clamp(26px,3vw,36px);color:var(--ink)}
.pi-price .was{color:var(--ink-2);font-size:18px;text-decoration:line-through;opacity:.75}
.pi-price .save-pill{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--btn-ink);
background:var(--btn-fill);padding:4px 10px;border-radius:2px}
.pi-tax{font-size:12.5px;color:var(--ink-2);margin-bottom:22px}
.pi-lead{color:var(--ink-2);font-size:15px;line-height:1.7;margin:20px 0 28px;max-width:52ch}
.opt-group{margin-bottom:22px}
.opt-head{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.opt-name{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.opt-sel{color:var(--ink);font-weight:600;font-size:14px}
.opt-guide{margin-left:auto;font-size:11.5px;color:var(--gold);letter-spacing:.05em;border-bottom:1px solid transparent}
.opt-guide:hover{border-color:var(--gold)}
.opt-values{display:flex;flex-wrap:wrap;gap:10px}
.opt-btn.pill{min-width:52px;padding:12px 16px;border:1px solid var(--hair);background:var(--surface);
color:var(--ink);font-family:var(--body);font-weight:600;font-size:14px;letter-spacing:.03em;
transition:border-color .2s,background .2s,color .2s;border-radius:2px}
.opt-btn.pill:hover{border-color:rgba(var(--tint),.20)}
.opt-btn.pill.on{background:var(--btn-fill);border-color:var(--btn-fill);color:var(--btn-ink)}
/* clip-path clips overflow, which a border-radius pill did not. These option
buttons are flex items and were shrinking below their label, so the text used
to spill out unnoticed — with the cut it gets sliced instead. */
.opt-btn{flex:none;white-space:nowrap}
/* The PDP colour button is class="opt-btn swatch", so it also matches the KIT
BUILDER's .swatch — a 52x52 circle with overflow:hidden. It never reset the
geometry, so "Navy" and "White" were being clipped long before the chamfer;
a round pill just hid the evidence. */
.opt-btn.swatch{width:auto;height:auto;overflow:visible;
position:relative;display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 8px;
border:1px solid var(--hair);background:var(--surface);transition:border-color .2s;cursor:pointer}
.opt-btn.swatch .sw-dot{width:24px;height:24px;border-radius:50%;flex:none;background:var(--sw,#334);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.opt-btn.swatch .sw-label{font-size:13px;font-weight:600;color:var(--ink)}
.opt-btn.swatch:hover{border-color:rgba(var(--tint),.20)}
.opt-btn.swatch.on{border-color:var(--gold)}
/* the kit builder's .swatch.on draws a rotating dashed CIRCLE at inset:-8px;
on this rectangular button it became a spinning dashed box */
.opt-btn.swatch.on::after{display:none}
.opt-btn.swatch.on .sw-dot{box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 0 0 2px var(--paper),0 0 0 3.5px var(--yellow)}
.opt-btn.soldout{opacity:.45}
.opt-btn.soldout::after{content:"";position:absolute;inset:0;background:linear-gradient(to top left,transparent calc(50% - .6px),var(--ink-2) 50%,transparent calc(50% + .6px))}
.opt-btn.pill.soldout{position:relative}
.pi-buy{display:flex;gap:14px;align-items:stretch;margin:26px 0 14px;flex-wrap:wrap}
.qty-step{display:flex;align-items:center;border:1px solid var(--hair);border-radius:2px;background:var(--surface)}
.qty-step .qs{width:46px;height:100%;min-height:52px;font-size:20px;color:var(--ink);transition:color .2s}
.qty-step .qs:hover{color:var(--gold)}
.qty-step input{width:46px;height:52px;text-align:center;background:none;border:0;color:var(--ink);
font-family:var(--body);font-weight:700;font-size:16px;-moz-appearance:textfield} /* 16px: avoids iOS zoom-on-focus */
.qty-step input::-webkit-outer-spin-button,.qty-step input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pi-add{flex:1;min-width:220px;justify-content:center;min-height:52px;font-size:14px}
.pi-add[disabled]{opacity:.5;cursor:not-allowed;filter:grayscale(.4)}
.pi-add[disabled]:hover{transform:none;box-shadow:none}
.pi-dynamic{margin-bottom:8px}
.pi-dynamic .shopify-payment-button__button{border-radius:2px!important;font-family:var(--body)!important}
.pi-feats{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;margin:30px 0;
padding:22px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.pi-feats li{display:flex;gap:12px;align-items:flex-start}
.pi-feats .fi{flex:none;width:34px;height:34px;color:var(--gold);display:grid;place-items:center;
border:1px solid var(--hair);border-radius:50%;background:rgba(253,184,19,.06)}
.pi-feats .fi svg{width:18px;height:18px}
.pi-feats .ft{display:flex;flex-direction:column;line-height:1.3}
.pi-feats .ft b{font-size:13.5px;font-weight:600;color:var(--ink)}
.pi-feats .ft em{font-style:normal;font-size:12px;color:var(--ink-2)}
.pi-acc{margin:8px 0 26px}
.acc-row{border-bottom:1px solid var(--hair)}
.acc-row summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
padding:18px 0;font-family:var(--display);font-size:15px;letter-spacing:.02em;color:var(--ink)}
.acc-row summary::-webkit-details-marker{display:none}
.acc-ic{position:relative;width:14px;height:14px;flex:none}
.acc-ic::before,.acc-ic::after{content:"";position:absolute;background:var(--gold);transition:transform .3s var(--ease)}
.acc-ic::before{top:6px;left:0;width:14px;height:2px}
.acc-ic::after{left:6px;top:0;width:2px;height:14px}
.acc-row[open] .acc-ic::after{transform:scaleY(0)}
.acc-body{color:var(--ink-2);font-size:17px;line-height:1.7;padding:0 0 20px;max-width:56ch}
.acc-body a{color:var(--gold)}
.pi-meta{display:flex;gap:18px;flex-wrap:wrap;font-size:15px;color:var(--ink-2);letter-spacing:.04em}
.pi-meta .in-stock{color:var(--ok)}
/* ---- sticky buy bar ---- */
.pdp2-sticky{position:fixed;left:0;right:0;bottom:0;z-index:70;transform:translateY(105%);transition:transform .35s var(--ease);
display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:12px clamp(16px,4vw,40px);background:var(--panel-2);backdrop-filter:blur(14px);border-top:1px solid var(--hair)}
.pdp2-sticky.show{transform:none}
.ps-info{display:flex;align-items:center;gap:12px;min-width:0}
.ps-info img{width:48px;height:48px;object-fit:contain;border:1px solid var(--hair);border-radius:2px;background:var(--surface);flex:none}
.ps-info div{display:flex;flex-direction:column;min-width:0}
.ps-info b{font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-info span{font-family:var(--display);font-size:14px;color:var(--gold)}
.ps-add{min-height:46px;padding:0 26px;font-size:13px}
.related{}
@media(max-width:900px){
.pdp2-wrap{grid-template-columns:1fr;gap:28px}
.pg{position:static;top:auto}
.pg-left{flex-direction:column}
.pg-left .pg-thumbs{flex-direction:row;width:auto}
}
@media(max-width:560px){
.pi-feats{grid-template-columns:1fr}
.pi-buy .pi-add{min-width:0}
.ps-info img{display:none}
}
@media(max-width:560px){
.cinema{min-height:700px}
.cslide{padding:24px 18px 150px;gap:14px}
.cjersey{width:min(46%,190px)}
.cmeta h3{font-size:26px}
.cmeta p{font-size:17px}
.cname-bg span{font-size:88px}
.cine-ui{gap:10px;padding:12px 14px;flex-wrap:wrap}
.cine-count{display:none}
.cine-arrow{width:38px;height:38px}
}
/* ================= MOBILE (≤768px) — same features & motion as desktop, phone-scaled ================= */
.nav-burger{display:none;background:none;border:0}
.mnav,.mnav-back{display:none}
.mbar{display:none}
@media (max-width:768px){
/* --- rhythm & type --- */
.section{padding:40px var(--pad)}
.sec-head{margin-bottom:22px;gap:10px}
.sec-head h2{font-size:clamp(25px,7.4vw,33px)}
.sec-head p:not(.eyebrow){font-size:15px}
.eyebrow{font-size:10px;letter-spacing:.22em}
.announce{font-size:10px;letter-spacing:.08em;padding:8px 34px}
/* --- header: burger nav --- */
header{height:60px;padding:0 16px}
header .btn{display:none}
header .cart-btn{display:none}
.nav-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:11px} /* ≥44px hit area */
.nav-burger span{width:22px;height:2px;background:var(--ink);transition:transform .3s,opacity .3s}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav-back{display:block;position:fixed;inset:0;z-index:86;background:rgba(11,19,48,.4);
backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s}
.mnav-back.open{opacity:1;pointer-events:auto}
.mnav{display:flex;flex-direction:column;position:fixed;top:0;right:0;bottom:0;z-index:87;
width:min(320px,86vw);background:var(--paper-2);border-left:1px solid var(--hair);
padding:80px 26px 28px;transform:translateX(103%);transition:transform .4s var(--ease)}
.mnav.open{transform:none}
.mnav a{font-family:var(--display);font-size:18px;letter-spacing:.04em;padding:13px 0;
border-bottom:1px solid var(--hair);color:var(--ink)}
.mnav a:active{color:var(--gold)}
.mnav .mnav-cta{margin-top:auto;border-bottom:0;color:var(--gold)}
/* --- sticky bottom action bar --- */
.mbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:80;
padding:10px 14px calc(10px + env(safe-area-inset-bottom));
background:var(--panel-2);backdrop-filter:blur(14px);border-top:1px solid var(--hair)}
.mbar-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 8px;
font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-family:var(--body)}
.mbar-shop{background:var(--btn-fill);color:var(--btn-ink);
clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.mbar-cart{border:1px solid rgba(var(--tint),.20);color:var(--ink)}
.mbar-count.show{display:grid}
.mbar-count{background:var(--btn-fill);color:var(--btn-ink);display:none;min-width:20px;height:20px;
display:grid;place-items:center;font-size:11px;padding:0 5px;font-variant-numeric:tabular-nums}
footer{padding-bottom:calc(110px + env(safe-area-inset-bottom))}
/* --- hero: keeps the 3D player + parallax, just compact --- */
.hero{min-height:auto;padding:34px 18px 66px}
.hero-grid{grid-template-columns:minmax(0,1fr);gap:8px}
.hero-watermark{font-size:120px;top:34%;opacity:.05}
.stage{display:block;order:2;min-height:300px;margin-top:6px}
#mvHero{height:290px}
.float-chip{transform:scale(.8)}
.hero h1{font-size:clamp(36px,10.5vw,44px)}
.hero-sub{font-size:15.5px}
.hero-ctas{flex-direction:column;width:100%;gap:10px}
.hero-ctas .btn{width:100%;justify-content:center}
/* full-bleed scroller: min-width:0 so it reports no minimum to the grid */
.hero-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;min-width:0;margin:0 -18px;padding:2px 18px}
.hero-chips::-webkit-scrollbar{display:none}
.chip{flex:none}
/* --- shop: 2-up commerce grid --- */
.shop-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.prod .info{padding:12px 12px 14px;gap:4px}
.prod h3{font-size:13px}
.prod .price{font-size:15px}
.prod .cat{font-size:8.5px;letter-spacing:.16em}
.add-btn{min-height:44px;padding:11px 6px;font-size:11px;letter-spacing:.05em} /* keep tap target ≥44px on mobile (a11y) */
.badge{top:8px;left:8px;font-size:8.5px;padding:4px 8px}
/* collections + fabrics: horizontal swipe rails on phones (was a tall vertical stack) */
.col-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;
margin:0 -18px;padding:4px 18px 10px;scrollbar-width:none}
.col-grid::-webkit-scrollbar{display:none}
.col-card{flex:0 0 78vw;scroll-snap-align:start}
.fab-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;
margin:0 -18px;padding:4px 18px 10px;scrollbar-width:none}
.fab-grid::-webkit-scrollbar{display:none}
.fab-card{flex:0 0 70vw;scroll-snap-align:start}
/* --- clubs cinema: full slide transitions kept, phone-sized --- */
.cinema{min-height:0} /* stacked grid slides give real height now */
.cslide{padding:20px 16px 152px;gap:14px}
.cine-ui{bottom:18px}
.cstats{gap:14px;padding-top:12px}
.cstat b{font-size:18px}
.cquote{font-size:12.5px;padding-left:12px}
.chead .ccrest,.chead .ccrest-fb{width:44px;height:44px;font-size:13px}
.cmeta h3{font-size:23px}
.ckits{width:min(48%,160px)}
.cname-bg span{font-size:72px}
/* --- hero parallax: identical 3D scroll animation, scaled --- */
.hpx-head{padding:14px 18px 26px}
.hpx-head h2{font-size:clamp(28px,8.5vw,38px)}
.hpx-head p{font-size:15px;margin-top:12px}
.hpx-row{gap:12px;margin-bottom:12px}
.hpx-card{width:clamp(150px,44vw,210px)}
.hpx-card::after{opacity:.55}
.hpx-t{opacity:1;font-size:10.5px;left:12px;bottom:10px}
/* --- lookbook: horizontal pan kept (see JS) --- */
.lb-card{flex-basis:74vw}
.lb-hint{font-size:10px}
/* --- kit lab --- */
.swatch{width:44px;height:44px}
/* --- process --- */
.process .rail-line,.process .rail-fill{left:23px}
.step{grid-template-columns:48px 1fr;gap:14px;padding:16px 0}
.step .num{width:48px;height:48px;font-size:14px}
.step h3{font-size:16px;margin-bottom:5px}
.step p{font-size:17px}
/* --- misc bands --- */
.photo-band{min-height:34vh;padding:36px 18px}
.photo-band h2{font-size:clamp(22px,6.6vw,30px)}
.photo-band .pb-note{font-size:16.5px}
.stat .big{font-size:24px}
.stat .lbl{font-size:9.5px;letter-spacing:.14em}
.ghost-marquee span{font-size:34px;-webkit-text-stroke-width:1px}
.cta h2{font-size:clamp(26px,8vw,36px)}
.cta .btn{width:100%;justify-content:center}
.foot-grid{grid-template-columns:1fr 1fr;gap:22px}
.foot-brand{grid-column:1/-1}
.viewer-wrap model-viewer{height:min(46vh,380px)}
.model-tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;min-width:0;margin:12px -18px 0;padding:0 18px}
/* the hint plus its two 30px flanking rules measured 351px inside a 350px
viewer and broke onto three lines. Tighter tracking, shorter rules. */
.viewer-hint{letter-spacing:.2em;gap:8px;white-space:nowrap}
.viewer-hint::before,.viewer-hint::after{width:18px}
.model-tabs::-webkit-scrollbar{display:none}
.model-tab{flex:none}
.orbit-wrap{height:min(58vh,440px)}
}
/* ---------- tap targets: visual unchanged, hit area lifted to ~40px (mobile) ---------- */
@media (max-width:768px){
.announce-x{width:34px;height:34px;top:50%;transform:translateY(-50%)}
.oc-rel{padding:9px 12px}
.ckit-thumb{padding:10px 14px}
footer a,.foot-links a{display:inline-block;padding:5px 0}
}
/* ================================================================
BRAND EDGE LANGUAGE
Measured off logo-mark.png: the monogram's inner edges are cut
at 47° with dead-straight outer sides and no radius anywhere.
Every panel repeats that cut on the top-left / bottom-right
diagonal, so the silhouette of the brand shows up in the UI.
================================================================ */
:root{
--cut:10px; /* بطاقات وأزرار */
--cut-sm:6px; /* عناصر صغيرة */
--cut-lg:20px; /* ألواح كبيرة */
}
/* القطع القياسي — أعلى اليسار + أسفل اليمين */
.btn,.btn-solid,.btn-ghost,.add-btn,.cart-btn,
.prod,.col-card,.vm,.fab-card,.lb-card,.cinema,.callout,
.pg-stage,.pg-thumb,.opt-btn.pill,.qty-step,.field input,
.model-tab,.pat-btn,.cine-tab,.ckit-thumb,.step .num,
.chip,.float-chip,.spx-tab,.ps-info img,.pdp img,.ci .thumb,
/* added 2026-09-20 — every remaining control carries the cut too */
.cine-arrow,.mbar-cart,.nav-burger,.value-chip,.opt-btn.swatch,
.field textarea,.field select,.shop-sort select,.qty-in,
.search-row input,.nf-search-row input,.pw-row input{
border-radius:0;
clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),
calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
}
/* العناصر الصغيرة تأخذ قطعاً أصغر حتى يبقى الشكل مقروءاً */
.badge,.pg-badge,.pi-price .save-pill,.pg-thumb .thumb-badge,
.opt-btn.pill,.chip,.float-chip,.spx-tab,.step .num,.ci .thumb,
.opt-btn.swatch,.mbar-count,.value-chip{
--cut:var(--cut-sm);
}
/* the count badge on the mobile cart button was a 99px pill */
.mbar-count{
border-radius:0;
clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),
calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
}
/* الألواح الكبيرة تأخذ قطعاً أوسع */
.cinema,.pg-stage,.cs-card,.lb-card{ --cut:var(--cut-lg) }
/* البطاقات المقطوعة تُعرَّف بالتعبئة لا بالحد —
حدٌّ بعرض 1px ينقطع عند القطر ويبدو مكسوراً. */
.prod,.col-card,.vm,.fab-card,.lb-card,.pg-stage,.pg-thumb,.cinema,.ci .thumb{
border:0;
background:var(--surface-2);
}
.prod:hover,.col-card:hover{ background:var(--surface-2); box-shadow:none }
/* الأزرار الشبحية والحقول: القطع + تعبئة خفيفة بدل الحد المقطوع */
.btn-ghost,.field input,.qty-step,.opt-btn.pill,.model-tab,.pat-btn,.ckit-thumb{
border:0;
background:var(--surface-2);
}
.btn-ghost:hover,.opt-btn.pill:hover,.model-tab:hover{ background:rgba(var(--tint),.13) }
.opt-btn.pill.on,.model-tab.on,.pat-btn.on,.ckit-thumb.on,.cine-tab.on{
background:var(--btn-fill);color:var(--btn-ink)
}
/* الدوائر تبقى دوائر: نقاط، حلقات، عيّنات ألوان */
.swatch,.sw-dot,.orbit,.orbit::before,.stage .ring,.stage .halo,
.anatomy .aura,.model-tab i,.pi-feats .fi,.callout::before{ clip-path:none }
/* أي عنصر مقطوع لا يحمل حداً — الحد ينقطع عند القطر */
.chip,.float-chip,.callout,.pdp img,.ps-info img,.spx-tab,.cine-tab{
border:0;background:var(--surface-2)
}
.chip b,.float-chip b{color:var(--gold)}
/* ================================================================
CINEMATIC LAYER
Taken from the reference sites, minus what does not fit Hammy:
we keep the photography, the editorial serif accent and the
glass-over-image — we do NOT go dark, and we keep the logo cut.
================================================================ */
/* --- 1. Headings: one rule, one font, one colour ---------------
Identity fonts only (Audiowide + Folty — no third face). Every
heading is ink-white; the yellow lives in the eyebrow above it,
which every section already has. Before this, four sections had a
yellow accent word and twelve did not, which read as random. */
h1,h2,h3,h4{ color:var(--ink) }
.accent,
.hero h1 .accent,.hero h1 .line span.accent,
.cta h2 .accent,.cs-head h2 .accent,.hpx-head h2 .accent,
.srv-title h2 .accent,.tm-head h2 .accent,.spx-head h2 .accent{
font-family:inherit;font-style:normal;font-weight:inherit;
letter-spacing:inherit;color:inherit;
background:none;-webkit-text-fill-color:currentColor;
}
.hero h1 .line span.accent{ animation:rise 1s var(--ease) .14s forwards }
/* الـeyebrow هو موضع الأصفر الموحّد فوق كل عنوان */
.eyebrow{ color:var(--gold) }
/* --- 2. Glass, but only where an image sits behind it ----------
Glass reads as glass because it refracts something. On a flat
panel there is nothing to refract, which is why the earlier
all-over glass attempt fell flat. */
.on-media .glass,
.photo-band .pb-stat,.cine-ui,.float-chip.on-media,
.vg-stat,.sl-corner{
background:rgba(255,255,255,.10);
-webkit-backdrop-filter:blur(16px) saturate(1.3);
backdrop-filter:blur(16px) saturate(1.3);
border:0;color:#fff;
box-shadow:inset 0 1px 0 rgba(255,255,255,.30);
}
/* --- 3. Photography carries the section ------------------------ */
.photo-band{ min-height:min(78vh,760px) }
.photo-band::after{
background:linear-gradient(180deg,
rgba(11,19,48,.42) 0%,rgba(11,19,48,.10) 34%,
rgba(11,19,48,.62) 78%,rgba(11,19,48,.86) 100%)}
.photo-band .pb-inner{ padding-bottom:clamp(38px,7vh,84px) }
.photo-band h2{ font-size:clamp(34px,5.6vw,72px);line-height:1.02 }
.photo-band .pb-note{ font-size:18px;max-width:46ch }
/* --- 4. Floating nav, cut like the mark ------------------------ */
header{
top:14px;
width:min(1240px,calc(100% - 32px));
margin:14px auto 0;
background:var(--panel);
-webkit-backdrop-filter:blur(18px) saturate(1.4);
backdrop-filter:blur(18px) saturate(1.4);
border:0;
box-shadow:0 8px 30px rgba(2,7,26,.39);
clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),
calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
}
@media (max-width:768px){ header{ top:8px;width:calc(100% - 16px) } }
/* عند وجود صورة، العلامة المائية تزاحمها — الصورة تكفي */
.hero-photo.has-photo ~ .hero-watermark{ opacity:.06 }
.hero-photo.has-photo ~ .beams{ opacity:.35 }
/* ================================================================
FOCUS ON CHAMFERED CONTROLS
clip-path clips an element's outline away entirely, so every
control carrying the brand cut had no visible keyboard focus.
An INSET ring lives inside the clip and survives it. Two tones so
it reads on a yellow fill and on a navy surface alike.
================================================================ */
.btn:focus-visible,.btn-solid:focus-visible,.btn-ghost:focus-visible,
.add-btn:focus-visible,.cart-btn:focus-visible,.prod:focus-visible,
.col-card:focus-visible,.opt-btn.pill:focus-visible,.qty-step button:focus-visible,
.field input:focus-visible,.model-tab:focus-visible,.pat-btn:focus-visible,
.cine-tab:focus-visible,.ckit-thumb:focus-visible,.spx-tab:focus-visible,
.chip:focus-visible,.float-chip:focus-visible,.mq-card:focus-visible,
.badge:focus-visible,.pg-thumb:focus-visible,.cine-arrow:focus-visible{
outline:none;
box-shadow:inset 0 0 0 2px var(--paper), inset 0 0 0 5px var(--yellow);
}
/* ================================================================
TOUCH TARGETS (WCAG 2.5.5 — 44px)
Measured at 390px: size pills 41, kit tabs 32, club tabs 33,
qty stepper 31. Raised on touch only; desktop stays compact.
================================================================ */
@media (max-width:768px){
.opt-btn.pill,.opt-btn.swatch,.model-tab,.pat-btn,
.ckit-thumb,.cine-tab,.spx-tab{
min-height:44px;display:inline-flex;align-items:center;justify-content:center
}
.cine-arrow{width:44px;height:44px}
.qty-step{min-height:44px}
.qty-step button{min-width:44px;min-height:44px}
.anatomy-dots button{min-height:24px;padding:10px 0} /* 4px bar, 24px hit area */
}
/* ================================================================
PAGE TEMPLATES — collection, page, cart, search, blog, account,
404, password, gift card.
These pages get no new design language. The mark's 45° chamfer,
the hairline rule and the Audiowide numeral are already the
signature; everything here is the quiet, disciplined half.
================================================================ */
/* ---- accessibility primitives ---------------------------------- */
.vh{
position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip{
position:absolute;left:16px;top:-64px;z-index:200;
padding:14px 22px;background:var(--btn-fill);color:var(--btn-ink);
font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
transition:top .2s var(--ease);
}
.skip:focus{top:16px}
main:focus{outline:none} /* the skip link targets it; it is not a control */
/* ---- long-form prose ------------------------------------------- */
.rte{color:var(--ink-2);font-size:17px;line-height:1.78}
.rte > * + *{margin-top:1.1em}
.rte h2,.rte h3,.rte h4{color:var(--ink);margin-top:1.8em}
.rte h2{font-size:clamp(24px,3vw,34px)}
.rte h3{font-size:clamp(20px,2.4vw,26px)}
.rte h4{font-family:var(--body);font-weight:700;font-size:17px;letter-spacing:.02em}
.rte a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.rte a:hover{color:var(--yellow-soft)}
.rte ul,.rte ol{padding-left:1.3em}
.rte li + li{margin-top:.5em}
.rte img{margin:1.6em 0}
.rte blockquote{
border-left:2px solid var(--gold);padding:4px 0 4px 20px;
color:var(--ink);font-size:19px;
}
.rte table{width:100%;border-collapse:collapse;font-size:15px}
.rte th,.rte td{padding:12px 10px;border-bottom:1px solid var(--hair);text-align:left}
.rte th{color:var(--ink);font-weight:700}
.rte code{background:var(--surface);padding:2px 6px;font-size:.92em}
.rte hr{border:0;border-top:1px solid var(--hair);margin:2em 0}
/* ---- collection / search toolbar ------------------------------- */
.shop-bar{
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
gap:16px;margin:0 0 26px;padding-bottom:18px;border-bottom:1px solid var(--hair);
}
.shop-count{
color:var(--ink-2);font-size:12px;font-weight:700;
letter-spacing:.16em;text-transform:uppercase;
}
.shop-sort{display:flex;align-items:center;gap:12px}
.shop-sort label{
color:var(--ink-2);font-size:12px;font-weight:700;
letter-spacing:.16em;text-transform:uppercase;
}
.shop-sort select,.field select{
min-height:44px;padding:10px 14px;
background:var(--paper-2);color:var(--ink);
border:1px solid var(--hair);font-family:var(--body);font-size:14.5px;
}
.shop-sort select:hover,.field select:hover{border-color:var(--hair-2)}
/* ---- empty states ---------------------------------------------- */
/* An empty screen is an invitation to act, so it names the next move. */
.empty{
display:flex;flex-direction:column;align-items:center;gap:18px;
text-align:center;padding:clamp(40px,7vh,84px) 0;
}
.empty .lgo{width:46px;opacity:.75}
.empty h2{font-size:clamp(24px,3.4vw,38px)}
.empty p{color:var(--ink-2);max-width:46ch}
.empty .btn{margin-top:6px}
/* ---- pagination ------------------------------------------------- */
.pagi{
display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
margin-top:clamp(36px,6vh,64px);
}
.pagi-a{
display:grid;place-items:center;min-width:44px;min-height:44px;padding:0 12px;
color:var(--ink-2);
font-family:var(--display);font-size:14px;font-variant-numeric:tabular-nums;
transition:border-color .25s var(--ease),color .25s var(--ease);
clip-path:polygon(var(--cut-sm) 0,100% 0,100% calc(100% - var(--cut-sm)),
calc(100% - var(--cut-sm)) 100%,0 100%,0 var(--cut-sm));
}
a.pagi-a:hover{border-color:var(--hair-2);color:var(--ink)}
.pagi-a.is-on{background:var(--btn-fill);border-color:var(--btn-fill);color:var(--btn-ink)}
.pagi-a.is-off{opacity:.35}
/* ---- forms ------------------------------------------------------ */
.field-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field-two > *{min-width:0}
@media(max-width:560px){.field-two{grid-template-columns:1fr}}
.field + .field,.field-two + .field,.field + .field-two{margin-top:16px}
/* ...but only when they STACK. Side by side in a row the sibling margin
pushed the second field 16px down — the Kit Lab's name and number inputs
sat on different lines because of it. */
.field-row > .field + .field,.field-two > .field + .field{margin-top:0}
.field label{
color:var(--ink-2);font-size:12px;font-weight:700;
letter-spacing:.16em;text-transform:uppercase;
}
.field input,.field textarea{
min-height:44px;padding:12px 14px;
background:var(--paper-2);color:var(--ink);
border:1px solid var(--hair);font-family:var(--body);font-size:16px;
}
.field textarea{min-height:96px;resize:vertical;line-height:1.6}
/* measured: .6 gave 3.86:1 on --paper-2. Placeholders are text and WCAG
1.4.3 does not exempt them; .72 clears 4.5:1 and still reads as a hint. */
/* the fade is scheme-aware: on a light field ink-2 already sits near the 4.5
floor, so fading it at all drops the placeholder below legibility. There it
runs at full strength and is still clearly lighter than the body ink. */
.field input::placeholder,.field textarea::placeholder{color:var(--ink-2);opacity:var(--ph-alpha,.72)}
.search-row input::placeholder,.nf-search-row input::placeholder,
.pw-row input::placeholder,.qty-in::placeholder{color:var(--ink-2);opacity:var(--ph-alpha,.72)}
.field-help{color:var(--ink-2);font-size:13px;margin-top:-2px}
.check{display:flex;align-items:center;gap:10px;margin-top:16px;
min-height:44px;color:var(--ink-2);font-size:14.5px;cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--gold);flex:none}
.form-err,.form-ok{
padding:14px 16px;margin-bottom:18px;font-size:14.5px;line-height:1.6;
border-left:3px solid;
}
/* colour alone never carries the meaning — the wording states the outcome */
.form-err{background:rgba(255,107,107,.10);border-color:#FF6B6B;color:var(--ink)}
.form-ok{background:rgba(74,222,128,.10);border-color:var(--ok);color:var(--ink)}
.form-err ul{margin:0;padding-left:1.2em}
/* ---- cart page --------------------------------------------------- */
/* Items left, summary in a card on the right. One wide column stranded the
quantity field ~400px from the product it belonged to. */
.cart-grid{display:grid;grid-template-columns:1fr 330px;gap:clamp(24px,3vw,48px);align-items:start}
@media(max-width:860px){.cart-grid{grid-template-columns:1fr}}
.cart-list{list-style:none}
.cart-main .ci{grid-template-columns:72px 1fr auto;align-items:start;padding:20px 0}
.cart-main .ci .thumb{width:72px;height:72px}
.ci-copy h3{font-family:var(--body);font-weight:600;font-size:15.5px;line-height:1.4}
.ci-var{color:var(--ink-2);font-size:13px;margin:4px 0 6px}
.ci-qty{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.qty-in{
width:76px;min-height:44px;padding:8px 10px;text-align:center;
background:var(--paper-2);color:var(--ink);border:1px solid var(--hair);
font-family:var(--display);font-size:15px;font-variant-numeric:tabular-nums;
}
.ci-rm{
display:inline-flex;align-items:center;min-height:32px;
color:var(--ink-2);font-size:11px;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;
}
.ci-rm:hover{color:var(--gold)}
.cart-notefield{margin-top:26px}
.cart-notefield label{text-align:left}
.cart-summary{
position:sticky;top:110px;padding:24px;
clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),
calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
}
@media(max-width:860px){.cart-summary{position:static;margin-top:28px}}
.cart-fine{color:var(--ink-2);font-size:13px;margin-top:8px}
.cart-actions{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.cart-actions .btn{justify-content:center;text-align:center}
@media(max-width:560px){
.cart-main .ci{grid-template-columns:64px 1fr;row-gap:12px}
.cart-main .ci .thumb{width:64px;height:64px}
.ci-qty{grid-column:2;flex-direction:row;align-items:center;
justify-content:space-between;width:100%}
.cart-actions .btn{flex:1 1 100%;justify-content:center}
}
/* ---- search ------------------------------------------------------ */
.search-form{margin-bottom:26px}
.search-row,.nf-search-row,.pw-row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
/* the grow/basis belongs to the row's own children. On the password page the
input sits inside a .field, which is a COLUMN flex box — there flex-basis is
a height, and 260px turned the password box into a 260px-tall square. */
.search-row > input,.nf-search-row > input,
.search-row > .field,.nf-search-row > .field,.pw-row > .field{flex:1 1 260px;min-width:0}
.search-row input,.nf-search-row input,.pw-row input{
width:100%;min-height:48px;padding:12px 16px;
background:var(--paper-2);color:var(--ink);
border:1px solid var(--hair);font-family:var(--body);font-size:16px;
}
.search-row .btn,.nf-search-row .btn,.pw-row .btn{flex:none}
.prod-doc{display:flex;align-items:center;min-height:180px}
.prod-doc .info{width:100%}
.doc-x{color:var(--ink-2);font-size:14px;line-height:1.6;margin-top:6px}
/* ---- collections list -------------------------------------------- */
.coll-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:1080px){.coll-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.coll-grid{grid-template-columns:1fr}}
.coll-tile{
display:block;position:relative;transition:border-color .3s var(--ease),transform .4s var(--ease);
clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),
calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
}
.coll-tile:hover{border-color:var(--gold);transform:translateY(-5px)}
.coll-ph{display:grid;place-items:center;aspect-ratio:4/3;overflow:hidden;background:var(--paper-3)}
.coll-ph img{width:100%;height:100%;object-fit:cover}
.coll-ph .ph-fallback,.post-ph .ph-fallback{width:100%;height:100%;object-fit:cover;opacity:1}
.coll-meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:18px}
.coll-title{font-family:var(--display);font-size:17px;letter-spacing:.01em}
.coll-count{
color:var(--ink-2);font-size:11px;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;flex:none;
}
/* ---- blog -------------------------------------------------------- */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:1080px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.post-grid{grid-template-columns:1fr}}
.post{
display:flex;flex-direction:column;transition:border-color .3s var(--ease),transform .4s var(--ease);
clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),
calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
}
.post:hover{border-color:var(--gold);transform:translateY(-5px)}
.post-ph{display:grid;place-items:center;aspect-ratio:16/10;overflow:hidden;background:var(--paper-3)}
.post-ph img{width:100%;height:100%;object-fit:cover}
.post-copy{display:flex;flex-direction:column;gap:10px;padding:22px}
.post-date{
color:var(--ink-2);font-size:11px;font-weight:700;
letter-spacing:.16em;text-transform:uppercase;font-variant-numeric:tabular-nums;
}
.post-copy h2{font-size:21px;line-height:1.24}
.post-copy p{color:var(--ink-2);font-size:14.5px;line-height:1.66}
.post-more{
margin-top:auto;padding-top:8px;color:var(--gold);
font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.post:hover .post-more .arr{transform:translateX(5px);display:inline-block;transition:transform .3s var(--ease)}
/* ---- article ------------------------------------------------------ */
.art-meta{
color:var(--ink-2);font-size:12px;font-weight:700;
letter-spacing:.16em;text-transform:uppercase;
}
.art-hero{margin:0 0 clamp(26px,4vh,44px)}
.art-hero img{width:100%;height:auto}
.art-share{
display:flex;flex-wrap:wrap;align-items:center;gap:12px;
margin-top:clamp(30px,5vh,52px);padding-top:24px;border-top:1px solid var(--hair);
}
.art-share span:first-child{
color:var(--ink-2);font-size:12px;font-weight:700;
letter-spacing:.16em;text-transform:uppercase;
}
.art-back{margin-top:26px}
/* ---- account ------------------------------------------------------ */
.acct-shell{max-width:720px;margin:0 auto}
.acct-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:20px}
.acct-head .sec-head{margin-bottom:0}
.acct-cols{display:grid;grid-template-columns:1fr 300px;gap:clamp(28px,4vw,56px);
align-items:start;margin-top:clamp(28px,4vh,48px)}
/* grid items default to min-width:auto, so the order table pushed its column
wider than the phone instead of scrolling inside .table-wrap */
.acct-cols > *,.acct-cols-2 > *{min-width:0}
.acct-cols-2{grid-template-columns:1fr 1fr;margin-top:clamp(30px,5vh,52px)}
@media(max-width:860px){.acct-cols,.acct-cols-2{grid-template-columns:1fr}}
.acct h2{font-size:clamp(19px,2.2vw,24px);margin-bottom:16px}
.acct-muted{color:var(--ink-2);font-size:14.5px}
.acct-addr{color:var(--ink-2);font-style:normal;font-size:14.5px;line-height:1.75;margin-bottom:16px}
.acct-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:22px}
.acct-link{
display:inline-flex;align-items:center;min-height:44px;
color:var(--ink-2);font-size:12.5px;font-weight:700;
letter-spacing:.12em;text-transform:uppercase;
}
.acct-link:hover{color:var(--gold)}
.acct-link.is-danger:hover{color:#FF6B6B}
.acct-alt{margin-top:24px;color:var(--ink-2);font-size:14.5px}
.acct-alt a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.acct-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px}
.acct-table th,.acct-table td{padding:14px 12px;text-align:left;border-bottom:1px solid var(--hair)}
.acct-table thead th{
color:var(--ink-2);font-size:11px;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;
}
.acct-table td a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.acct-table .num{font-family:var(--display);font-variant-numeric:tabular-nums;white-space:nowrap}
.acct-table tfoot th{color:var(--ink-2);font-weight:600}
.acct-table tfoot .is-total th,.acct-table tfoot .is-total td{color:var(--ink);font-weight:700}
.acct-table .acct-muted{display:block;margin-top:4px;font-size:12.5px}
/* ---- addresses ------------------------------------------------------ */
.addr-new{margin-bottom:clamp(26px,4vh,44px)}
.addr-new > summary,.addr-card > details > summary{list-style:none;cursor:pointer}
.addr-new > summary::-webkit-details-marker,
.addr-card > details > summary::-webkit-details-marker{display:none}
.addr-list{list-style:none;display:grid;gap:18px}
.addr-card{position:relative;padding:22px;border:1px solid var(--hair);background:var(--surface)}
.addr-card .badge{position:static;display:inline-block;margin-bottom:10px}
/* ---- 404 -------------------------------------------------------------- */
.nf-in{max-width:620px;margin:0 auto;text-align:center;
display:flex;flex-direction:column;align-items:center;gap:18px}
.nf-code{
font-family:var(--display);font-size:clamp(56px,14vw,140px);line-height:1;
color:var(--gold);letter-spacing:.02em;
}
.nf-in h1{font-size:clamp(26px,4.4vw,48px)}
.nf-text{color:var(--ink-2);max-width:44ch}
.nf-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:4px}
.nf-search{width:100%;margin-top:clamp(24px,4vh,42px);
padding-top:24px;border-top:1px solid var(--hair);text-align:left}
.nf-search > label{
display:block;margin-bottom:10px;color:var(--ink-2);
font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
/* ---- password page ----------------------------------------------------- */
.pw{min-height:100svh;display:grid;place-items:center}
.pw-in{max-width:540px;margin:0 auto;text-align:center;
display:flex;flex-direction:column;align-items:center;gap:16px}
.pw-mark{width:56px}
.pw-in h1{font-size:clamp(28px,5vw,52px)}
.pw-text{color:var(--ink-2);max-width:42ch}
.pw-row{width:100%;margin-top:10px;text-align:left}
.pw-contact{color:var(--ink-2);font-size:14px;margin-top:8px}
.pw-contact a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
/* ---- gift card ---------------------------------------------------------- */
.gc{min-height:100svh;display:grid;place-items:center;background:var(--paper)}
.gc-in{max-width:480px;margin:0 auto;text-align:center;
display:flex;flex-direction:column;align-items:center;gap:14px}
.gc-mark{width:52px}
.gc-in h1{font-size:clamp(22px,3.4vw,32px)}
.gc-value{font-family:var(--display);font-size:clamp(44px,10vw,76px);
color:var(--gold);font-variant-numeric:tabular-nums;line-height:1}
.gc-exp{color:var(--ink-2);font-size:13.5px}
.gc-code{width:100%;margin-top:10px;padding:22px;border:1px dashed var(--hair-2)}
.gc-num{font-family:var(--display);font-size:clamp(18px,4vw,26px);
letter-spacing:.14em;word-break:break-all}
.gc-hint{color:var(--ink-2);font-size:12.5px;margin-top:10px}
.gc-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:8px}
@media print{
.gc-actions{display:none}
.gc,.gc-in{background:#fff;color:#000}
}
/* ---- footer additions ---------------------------------------------------- */
/* Text labels, not drawn logos: an approximated Instagram or Facebook glyph is
a brand-guideline breach, and these read fine at this size. */
.foot-social{list-style:none;display:flex;flex-wrap:wrap;gap:16px;margin-top:18px}
.foot-social a{
display:inline-flex;align-items:center;min-height:44px;
color:var(--ink-2);font-size:11.5px;font-weight:700;
letter-spacing:.16em;text-transform:uppercase;
}
.foot-social a:hover{color:var(--gold)}
.foot-legal{
display:flex;flex-wrap:wrap;gap:10px 22px;
margin-top:28px;padding-top:22px;border-top:1px solid var(--hair);
}
.foot-legal a{
display:inline-flex;align-items:center;min-height:36px;
color:var(--ink-2);font-size:12.5px;
}
.foot-legal a:hover{color:var(--gold)}
/* ---- sold-out card button -------------------------------------------------
"Sold out" is product information a customer has to be able to read, not
decoration on an inert control, so the label stays at 4.5:1 and the disabled
state is carried by the cursor and the flattened border instead. */
.add-btn.is-off{opacity:.62;cursor:not-allowed;border-color:var(--hair)}
.add-btn.is-off:hover{background:none;transform:none}
/* ---- section rhythm on the simple templates -------------------------------- */
.page-main,.blog-main,.article-main,.cart-main,.search-main,.acct{
padding-top:clamp(44px,7vh,92px);
}
/* ---- focus on the new chamfered controls --------------------------------
Same reason as the block above: these three carry the brand cut, and
clip-path deletes an outline. Inset rings survive it. */
.pagi-a:focus-visible,.coll-tile:focus-visible,.post:focus-visible,
.post-ph:focus-visible,.coll-tile a:focus-visible{
outline:none;
box-shadow:inset 0 0 0 2px var(--paper), inset 0 0 0 5px var(--yellow);
}
/* not clipped, so a plain outline is fine — but it must not be removed */
.field textarea:focus-visible,.field select:focus-visible,.shop-sort select:focus-visible,
.qty-in:focus-visible,.search-row input:focus-visible,.nf-search-row input:focus-visible,
.pw-row input:focus-visible,.check input:focus-visible{
outline:2px solid var(--gold);outline-offset:2px;
}
/* :focus (no -visible) previously stripped the ring for pointer users too */
.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold)}
/* ---- reduced motion on the new pages ------------------------------------ */
@media (prefers-reduced-motion:reduce){
.coll-tile,.post{transition:none}
.coll-tile:hover,.post:hover{transform:none}
}
/* ================================================================
CHAMFER WITH A HAIRLINE (.chm)
Measured: clip-path deletes a border along the two 45° cuts, so
"border + clip-path" leaves both diagonals bare. Here the element
itself IS the line and ::before paints the fill one pixel inside,
so the hairline runs the whole way round.
isolation:isolate contains the z-index:-1, which keeps ::before
above the host's own background but below its text — so plain
text children need no wrapper.
Tune per element with --cut, --chm-line and --chm-fill.
================================================================ */
.chm{
isolation:isolate;
background:var(--chm-line,var(--hair));
clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),
calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
}
/* callers that are already absolutely or sticky positioned override this */
.chm{ position:relative }
/* The inner fill MUST be opaque. A translucent one lets the line colour
underneath show through the whole shape, which turns a navy card pale.
Two background layers do the compositing in plain CSS: the translucent
surface tint stacked over the opaque field. */
.chm::before{
content:""; position:absolute; inset:1px; z-index:-1;
background:
linear-gradient(var(--chm-tint,rgba(var(--tint),.045)),var(--chm-tint,rgba(var(--tint),.045))),
var(--chm-base,var(--paper));
clip-path:polygon(calc(var(--cut) - 1px) 0,100% 0,100% calc(100% - var(--cut) + 1px),
calc(100% - var(--cut) + 1px) 100%,0 100%,0 calc(var(--cut) - 1px));
}
/* ---- retrofit: the four chamfered elements that shipped with a plain
border, and therefore with bare diagonals ---------------------------- */
.pagi-a{
--cut:var(--cut-sm); --chm-line:var(--hair); --chm-fill:transparent;
position:relative; isolation:isolate; border:0;
background:var(--chm-line);
}
.pagi-a::before{
content:""; position:absolute; inset:1px; z-index:-1; background:var(--paper);
clip-path:polygon(calc(var(--cut) - 1px) 0,100% 0,100% calc(100% - var(--cut) + 1px),
calc(100% - var(--cut) + 1px) 100%,0 100%,0 calc(var(--cut) - 1px));
}
a.pagi-a:hover{ --chm-line:var(--hair-2); color:var(--ink) }
.pagi-a.is-on{ --chm-line:var(--yellow); color:var(--navy) }
.pagi-a.is-on::before{ background:var(--btn-fill) }
.coll-tile,.post{
--chm-line:var(--hair); border:0;
position:relative; isolation:isolate; background:var(--chm-line);
}
.coll-tile::before,.post::before{
content:""; position:absolute; inset:1px; z-index:-1;
background:linear-gradient(rgba(var(--tint),.045),rgba(var(--tint),.045)),var(--paper);
clip-path:polygon(calc(var(--cut) - 1px) 0,100% 0,100% calc(100% - var(--cut) + 1px),
calc(100% - var(--cut) + 1px) 100%,0 100%,0 calc(var(--cut) - 1px));
}
.coll-tile:hover,.post:hover{ --chm-line:var(--gold) }
/* .cart-summary, not .cart-foot: the cart DRAWER already owns .cart-foot, and
reusing it put this sticky chamfered card inside the drawer as well. */
.cart-summary{
--chm-line:var(--hair); border:0;
position:sticky; isolation:isolate; background:var(--chm-line);
}
.cart-summary::before{
content:""; position:absolute; inset:1px; z-index:-1; background:var(--paper-2);
clip-path:polygon(calc(var(--cut) - 1px) 0,100% 0,100% calc(100% - var(--cut) + 1px),
calc(100% - var(--cut) + 1px) 100%,0 100%,0 calc(var(--cut) - 1px));
}
@media(max-width:860px){ .cart-summary{ position:static } }
/* ---- Kit Lab: request actions + enquiry form ------------------------------ */
/* ================================================================
SCRUB HERO — scroll-scrubbed kit turntable
Port of a GSAP ScrollTrigger component without GSAP: the whole
choreography is one named view-timeline, so card scale and title
travel run on the compositor. The tall section IS the runway; the
inner div is sticky. `contain 0% -> contain 100%` equals
ScrollTrigger's start:"top top" / end:"bottom bottom".
================================================================ */
.scrub{position:relative;width:100%;overflow:clip;background:var(--paper)}
.scrub__sticky{
position:sticky;top:0;height:100svh;width:100%;overflow:hidden;
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:clamp(6px,1vw,16px);
}
.scrub__vig{
position:absolute;inset:0;z-index:0;pointer-events:none;
background:
radial-gradient(ellipse at 50% 34%,rgba(var(--tint),.06) 0%,transparent 56%),
radial-gradient(ellipse at center,transparent 54%,rgba(3,10,43,.72) 100%);
}
.scrub__in{
position:relative;z-index:1;display:flex;flex-direction:column;
align-items:center;justify-content:center;width:100%;height:100%;gap:inherit;
}
.scrub__t{
font-family:var(--display);font-weight:400;
font-size:clamp(2rem,8.4vw,6.4rem);line-height:.94;letter-spacing:.01em;
white-space:nowrap;will-change:transform,opacity;
}
.scrub__t--b{color:var(--gold)}
.scrub__card{
position:relative;overflow:hidden;background:var(--paper-3);
will-change:transform;box-shadow:0 20px 80px rgba(2,7,26,.55);
width:min(92vw,calc(66svh * var(--ar,1.5)));
height:min(66svh,calc(92vw / var(--ar,1.5)));
/* the brand cut, scaled up for a surface this large */
--cut:var(--cut-lg);
clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),
calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
}
.scrub__card canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* a picked image or video sits in the same box the canvas used, so the card's
scale choreography is untouched — it animates the card, not its contents */
.scrub__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1}
.scrub__vid video{width:100%;height:100%;object-fit:cover;display:block}
.scrub__card::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
box-shadow:inset 0 0 120px rgba(2,7,26,.45)}
/* poster covers the card until the first frame decodes, and when JS is off */
.scrub__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
transition:opacity .5s var(--ease)}
.scrub.is-ready .scrub__poster{opacity:0}
@supports (animation-timeline: view()) {
.scrub{view-timeline-name:--scrub;view-timeline-axis:block}
.scrub__card{animation:scrub-card linear both;
animation-timeline:--scrub;animation-range:contain 0% contain 100%}
@keyframes scrub-card{
0%{transform:scale(var(--s0,.62))} 15%{transform:scale(1)}
78%{transform:scale(var(--s-im,2.4))} 100%{transform:scale(var(--s0,.62))}
}
.scrub__t--a{animation:scrub-top linear both;
animation-timeline:--scrub;animation-range:contain 0% contain 100%}
@keyframes scrub-top{
0%{transform:translateX(0);opacity:1}
15%{transform:translateX(calc(var(--tx,60) * -1vw));opacity:1}
37%,78%{transform:translateX(calc(var(--tx,60) * -1vw));opacity:0}
100%{transform:translateX(0);opacity:1}
}
.scrub__t--b{animation:scrub-bottom linear both;
animation-timeline:--scrub;animation-range:contain 0% contain 100%}
@keyframes scrub-bottom{
0%{transform:translateX(0);opacity:1}
15%{transform:translateX(calc(var(--tx,60) * 1vw));opacity:1}
37%,78%{transform:translateX(calc(var(--tx,60) * 1vw));opacity:0}
100%{transform:translateX(0);opacity:1}
}
}
/* no scroll-timeline support: drop the runway and show a still hero */
@supports not (animation-timeline: view()) {
.scrub{height:auto !important}
.scrub__sticky{position:relative;height:auto;padding:clamp(56px,8vh,96px) 0}
}
@media (max-width:768px){
.scrub__t{font-size:clamp(1.7rem,9.5vw,3rem)}
.scrub__card{width:min(94vw,calc(52svh * var(--ar,1.5)));
height:min(52svh,calc(94vw / var(--ar,1.5)))}
}
@media (prefers-reduced-motion:reduce){
.scrub{height:auto !important}
.scrub__sticky{position:relative;height:auto;padding:clamp(56px,8vh,96px) 0}
.scrub__card,.scrub__t--a,.scrub__t--b{animation:none;transform:none}
}
/* ================================================================
SCROLL EXPAND MEDIA
One registered custom property --p carries scroll progress; every
moving part is calc() off it. That is the fix for the overlap the
first build had: the original accumulated progress from hijacked
wheel events, so the halves drifted out of step with the word
behind them and landed back on top of it. Reading one number, they
cannot desync.
The media "expands" via clip-path inset rather than width/height,
so nothing triggers layout per frame.
================================================================ */
@property --p{ syntax:''; inherits:true; initial-value:0 }
.sxp{position:relative;width:100%;overflow:clip;background:var(--paper);--p:0}
.sxp-sticky{
position:sticky;top:0;height:100svh;overflow:hidden;
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:clamp(14px,2.4vh,30px);
}
.sxp-bg{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
opacity:calc(.30 - var(--p) * .22);transform:scale(calc(1 + var(--p) * .08));
}
.sxp-scrim{
position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,var(--paper) 0%,var(--paper-a) 38%,var(--paper) 100%);
}
/* the word the halves travel away from — it leaves before they arrive */
.sxp-word{
position:absolute;z-index:0;pointer-events:none;
font-family:var(--display);font-size:clamp(88px,26vw,320px);line-height:1;
color:var(--ink);opacity:calc(.07 - var(--p) * .07);
letter-spacing:.04em;white-space:nowrap;
}
/* The halves are positioned over the stage, not flex siblings of the media.
As flex items they were pushed outside the viewport by the 1100px panel
before any travel began — measured at p=0: left edge -229px on a 1280px
screen. Anchored to the centre line they start as one readable line and
separate from there, which is what the original intends. */
.sxp-stage{
position:relative;z-index:2;display:grid;place-items:center;
width:100%;
}
.sxp-half{
position:absolute;top:50%;z-index:3;
font-family:var(--display);font-size:clamp(22px,4.6vw,64px);line-height:1;
white-space:nowrap;will-change:transform;
text-shadow:0 2px 26px rgba(2,7,26,.75);
}
.sxp-half--r{color:var(--gold)}
.sxp-half--l{right:50%;padding-right:.22em;
transform:translate(calc(var(--p) * var(--travel,35) * -1vw),-50%)}
.sxp-half--r{left:50%;padding-left:.22em;
transform:translate(calc(var(--p) * var(--travel,35) * 1vw),-50%)}
.sxp-media{
position:relative;grid-area:1/1;overflow:hidden;background:var(--paper-3);
width:min(86vw,1180px);aspect-ratio:16/9;
box-shadow:0 26px 90px rgba(2,7,26,.6);
/* expands from a centred window instead of animating width/height */
--inset:calc((1 - var(--p)) * 50%);
--cut:var(--cut-lg);
clip-path:polygon(
calc(var(--inset) + var(--cut)) var(--inset),
calc(100% - var(--inset)) var(--inset),
calc(100% - var(--inset)) calc(100% - var(--inset) - var(--cut)),
calc(100% - var(--inset) - var(--cut)) calc(100% - var(--inset)),
var(--inset) calc(100% - var(--inset)),
var(--inset) calc(var(--inset) + var(--cut)));
}
.sxp-media img{width:100%;height:100%;object-fit:cover;display:block}
.sxp-sub{
position:relative;z-index:2;color:var(--ink-2);text-align:center;
font-size:clamp(14px,1.4vw,18px);max-width:46ch;
opacity:var(--p);transition:none;
}
@supports (animation-timeline: view()) {
.sxp{view-timeline-name:--sxp;view-timeline-axis:block}
.sxp-sticky{animation:sxp-progress linear both;
animation-timeline:--sxp;animation-range:contain 0% contain 100%}
@keyframes sxp-progress{ from{--p:0} to{--p:1} }
}
/* no scroll-timeline, reduced motion, or no @property: show the end state */
@supports not (animation-timeline: view()) {
.sxp{height:auto !important;--p:1}
.sxp-sticky{position:relative;height:auto;padding:clamp(56px,8vh,96px) var(--pad)}
}
@media (prefers-reduced-motion:reduce){
.sxp{height:auto !important;--p:1}
.sxp-sticky{position:relative;height:auto;padding:clamp(56px,8vh,96px) var(--pad)}
.sxp-sticky{animation:none}
}
@media (max-width:768px){
.sxp-stage{flex-direction:column;gap:14px}
.sxp-half{font-size:clamp(20px,7vw,34px)}
.sxp-media{width:92vw}
}