@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{--ink:#0b0b0b;--paper:#f4f2ec;--white:#fff;--line:rgba(11,11,11,.16);--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-snap-type:y mandatory;background:var(--ink)}
body{margin:0;color:var(--ink);font-family:"DM Sans",sans-serif;background:var(--paper);overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}

.site-header{position:fixed;z-index:50;top:0;left:0;right:0;height:92px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,3.5vw,64px);color:var(--ink);mix-blend-mode:multiply;pointer-events:none}
.site-header a{pointer-events:auto}
.brand{display:flex;align-items:center;gap:10px;font-family:"Manrope",sans-serif;font-weight:800;letter-spacing:-.04em}
.brand-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--ink);color:white;font-size:21px}
.brand-name{font-size:22px}
.brand-label{margin-left:8px;padding-left:18px;border-left:1px solid currentColor;font:500 10px/1.2 "DM Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase}
.brand-label b{display:block;font-size:8px;font-weight:600;opacity:.55}
.header-actions{display:flex;align-items:center;gap:clamp(22px,4vw,64px)}
.page-counter{display:flex;align-items:center;gap:10px;font:600 11px "Manrope",sans-serif;letter-spacing:.08em}
.page-counter b{font-size:14px}.page-counter i{display:block;width:44px;height:1px;background:currentColor;opacity:.4}.page-counter span{opacity:.5}
.contact-link{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid;padding:8px 0}
.contact-link span,.cta span{display:inline-block;margin-left:8px;transition:transform .25s var(--ease)}
.contact-link:hover span,.cta:hover span{transform:translate(3px,-3px)}

.side-nav{position:fixed;z-index:45;right:clamp(24px,3.5vw,64px);top:50%;transform:translateY(-50%)}
.side-nav ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:flex-end;gap:16px}
.side-nav a{display:flex;align-items:center;justify-content:flex-end;gap:10px;font:600 10px "Manrope",sans-serif;letter-spacing:.08em;text-transform:uppercase}
.side-nav a::after{content:"";width:18px;height:2px;background:currentColor;opacity:.3;transition:width .45s var(--ease),opacity .3s}
.side-nav span{opacity:.45}.side-nav b{font-weight:600;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;transition:max-width .45s var(--ease),opacity .3s}
.side-nav a:hover::after,.side-nav a.active::after{width:46px;opacity:1}
.side-nav a:hover b,.side-nav a.active b{max-width:90px;opacity:1}

.product-page{--accent:#e9362d;position:relative;min-height:100svh;scroll-snap-align:start;scroll-snap-stop:always;display:grid;grid-template-columns:minmax(310px,.8fr) minmax(520px,1.45fr);gap:clamp(30px,5vw,90px);align-items:center;padding:clamp(110px,12vh,150px) clamp(88px,8vw,150px) clamp(50px,7vh,80px) clamp(24px,7vw,124px);overflow:hidden;background:var(--paper)}
.product-page::before{content:"";position:absolute;width:min(50vw,700px);aspect-ratio:1;border-radius:50%;left:-24vw;bottom:-58%;background:var(--accent);filter:blur(2px);opacity:.1}
.product-red{--accent:#ed392f}.product-yellow{--accent:#f2b900;background:#f6f1e5}.product-blue{--accent:#2b62d9;background:#eef2f3}.product-green{--accent:#208a65;background:#eef1e9}.product-violet{--accent:#7054bb;background:#f0edf2}.product-coral{--accent:#eb725b;background:#f6eee8}
.product-copy{position:relative;z-index:2;align-self:center;max-width:520px}
.eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 clamp(24px,4vh,48px);font:700 10px "Manrope",sans-serif;letter-spacing:.14em;text-transform:uppercase}
.eyebrow span{display:grid;place-items:center;width:28px;height:28px;border:1px solid;border-radius:50%;color:var(--accent)}
h1,h2{margin:0;font:800 clamp(58px,6.2vw,112px)/.83 "Manrope",sans-serif;letter-spacing:-.075em;text-transform:uppercase}
h1 em,h2 em{display:block;color:var(--accent);font:500 .43em/1.1 "DM Sans",sans-serif;letter-spacing:-.04em;text-transform:none;margin-top:.28em}
.lead{max-width:460px;margin:clamp(26px,4vh,48px) 0 24px;font-size:clamp(15px,1.25vw,20px);line-height:1.55;letter-spacing:-.018em}
.tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.tags li{padding:8px 12px;border:1px solid var(--line);border-radius:100px;font:600 9px "Manrope",sans-serif;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.25)}
.cta{display:inline-flex;align-items:center;margin-top:30px;padding:14px 18px;background:var(--ink);color:white;font:700 10px "Manrope",sans-serif;text-transform:uppercase;letter-spacing:.08em}

.gallery{position:relative;z-index:2;display:grid;grid-template-columns:1.55fr .85fr;grid-template-rows:1fr 1fr;gap:12px;height:min(72vh,780px);min-height:520px;padding-right:clamp(42px,4vw,74px)}
.photo{position:relative;margin:0;overflow:hidden;background:#ddd;box-shadow:0 20px 50px rgba(20,20,20,.09)}
.photo-main{grid-row:1 / 3}
.photo img{transition:transform 1.2s var(--ease);filter:saturate(.95) contrast(1.02)}
.photo:hover img{transform:scale(1.035)}
.photo figcaption{position:absolute;left:12px;bottom:12px;padding:7px 9px;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);font:700 8px "Manrope",sans-serif;letter-spacing:.1em;text-transform:uppercase}
.source{position:absolute;z-index:3;right:clamp(90px,9vw,160px);bottom:24px;margin:0;font-size:9px;text-transform:uppercase;letter-spacing:.09em;opacity:.55}
.source a{text-decoration:underline;text-underline-offset:3px}
.swipe-hint{display:none}

.scroll-prompt{position:fixed;z-index:40;left:clamp(24px,3.5vw,64px);bottom:25px;display:flex;align-items:center;gap:13px;font:600 9px "Manrope",sans-serif;letter-spacing:.14em;text-transform:uppercase;mix-blend-mode:multiply}
.scroll-prompt[hidden]{display:none}
.scroll-prompt i{position:relative;width:48px;height:1px;background:currentColor;overflow:visible}
.scroll-prompt i::after{content:"";position:absolute;width:5px;height:5px;border-right:1px solid;border-bottom:1px solid;right:1px;top:-2px;transform:rotate(45deg)}

@media(max-width:1050px){
  .product-page{grid-template-columns:.85fr 1.15fr;gap:32px;padding-right:80px}
  .gallery{grid-template-columns:1fr;height:68vh;min-height:500px;padding-right:0}
  .gallery .photo:not(.photo-main){position:absolute;width:32%;height:25%;right:12px;bottom:12px;border:4px solid rgba(255,255,255,.85)}
  .gallery .photo:nth-child(3){display:none}.photo-main{grid-row:auto}
  .side-nav{right:24px}
}

@media(max-width:720px){
  html{scroll-snap-type:y proximity}
  .site-header{height:70px;padding:0 18px;mix-blend-mode:normal;background:linear-gradient(to bottom,rgba(244,242,236,.97),rgba(244,242,236,.75),transparent)}
  .brand-mark{width:31px;height:31px;font-size:18px}.brand-name{font-size:19px}.brand-label{margin-left:2px;padding-left:11px;font-size:8px}
  .page-counter,.contact-link{display:none}.side-nav{display:none}
  .product-page{min-height:100svh;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:24px;padding:92px 18px 48px}
  .product-page::before{width:120vw;left:-80vw;bottom:-20%;opacity:.08}
  .product-copy{width:100%;max-width:none}
  .eyebrow{margin:0 0 14px}.eyebrow span{width:24px;height:24px}
  h1,h2{font-size:clamp(48px,15.5vw,72px);line-height:.84}
  h1 em,h2 em{font-size:.4em;margin-top:.2em}
  .lead{font-size:14px;line-height:1.48;margin:18px 0 14px;max-width:92%}
  .tags{gap:5px}.tags li{font-size:8px;padding:6px 9px}
  .gallery{order:-1;width:calc(100% + 36px);margin-left:-18px;height:36svh;min-height:270px;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:7px;padding:0 18px 0;scrollbar-width:none}
  .gallery::-webkit-scrollbar{display:none}
  .gallery .photo,.gallery .photo:not(.photo-main){position:relative;display:block;flex:0 0 78vw;width:auto;height:100%;right:auto;bottom:auto;border:0;scroll-snap-align:center;box-shadow:none}
  .gallery .photo:not(.photo-main){flex-basis:58vw}
  .photo-main{grid-row:auto}.photo figcaption{bottom:9px;left:9px}
  .swipe-hint{display:flex;position:absolute;z-index:4;right:18px;top:calc(36svh + 62px);margin:0;gap:8px;font:700 8px "Manrope",sans-serif;letter-spacing:.1em;text-transform:uppercase}
  .swipe-hint span{color:var(--accent);font-size:14px;line-height:8px}
  .scroll-prompt{display:none}.source{display:none}.cta{margin-top:18px}
}

@media(max-width:720px) and (max-height:700px){
  .product-page{justify-content:flex-start;padding-top:82px}
  .gallery{height:32svh;min-height:210px}
  .swipe-hint{top:calc(32svh + 54px)}
  .lead{margin:12px 0}.eyebrow{margin-bottom:10px}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.photo img,.side-nav a::after,.side-nav b{transition:none}}