:root {
  --ink: #171714;
  --paper: #e8e6e0;
  --fog: #cfcdc6;
  --white: #f5f3ed;
  --line: rgba(23, 23, 20, .22);
  --mono: "DM Mono", monospace;
  --sans: "Manrope", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.skip-link { position: fixed; z-index: 100; left: 1rem; top: -5rem; padding: .8rem 1rem; background: var(--white); color: var(--ink); }
.skip-link:focus { top: 1rem; }
.kicker { margin: 0; font: 500 .67rem/1.4 var(--mono); letter-spacing: .13em; text-transform: uppercase; }

.site-header { position: fixed; z-index: 50; inset: 0 0 auto; color: var(--ink); background: #fff; border-bottom: 1px solid rgba(23,23,20,.08); }
.announcement { height: 42px; overflow: hidden; color: #fff; background: #2c2c2b; }
.announcement-track { width: max-content; height: 100%; display: flex; align-items: center; animation: announcement-scroll 34s linear infinite; }
.announcement-track span { min-width: 300px; padding: 0 2rem; font-size: .74rem; text-align: center; }
.header-main { width: min(1060px, calc(100% - 40px)); height: 88px; margin: 0 auto; display: grid; grid-template-columns: 1fr 48px; align-items: center; gap: 1.5rem; }
.brand-logo { width: 168px; height: 48px; overflow: hidden; display: flex; align-items: center; }
.brand-logo img { width: 168px; clip-path: inset(14% 0); filter: invert(1); mix-blend-mode: multiply; transform: scale(1.12); }
.site-header nav { justify-self: center; display: flex; gap: 2.3rem; font-size: .86rem; }
.site-header nav a { position: relative; }
.site-header nav a::after { content: ""; position: absolute; inset: auto 0 -8px; height: 1px; background: currentColor; transform: scaleX(0); transition: transform .25s; }
.site-header nav a:hover::after { transform: scaleX(1); }
.cart-trigger { position: relative; justify-self: end; width: 42px; height: 42px; padding: 5px; color: var(--ink); border: 0; background: transparent; cursor: pointer; }
.cart-trigger svg { width: 29px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
@keyframes announcement-scroll { to { transform: translateX(-50%); } }
.wordmark { width: min-content; font: 600 1.04rem/.78 var(--sans); letter-spacing: -.07em; }
.wordmark span { display: block; }

.hero { position: relative; min-height: 760px; height: 100svh; padding-top: 130px; display: flex; align-items: flex-end; overflow: hidden; color: var(--white); background: #68645d; }
.hero-carousel, .hero-slide, .hero-slide picture { position: absolute; inset: 0; }
.hero-carousel { animation: hero-in 1.4s cubic-bezier(.2,.75,.2,1) both; }
.hero-slide { opacity: 0; visibility: hidden; transition: opacity 1s ease, visibility 1s; }
.hero-slide.is-active { opacity: 1; visibility: visible; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,17,15,.72) 0, rgba(18,17,15,.34) 38%, transparent 67%), linear-gradient(0deg, rgba(14,14,12,.48), transparent 40%); }
.hero-copy { position: relative; z-index: 2; width: min(620px, 52vw); margin: 0 0 12vh 5vw; animation: copy-in 1s .25s both; }
.hero h1 { margin: 1.1rem 0 1.5rem; font-size: clamp(4rem, 8.2vw, 9rem); font-weight: 300; line-height: .81; letter-spacing: -.075em; }
.hero-intro { width: min(420px, 90%); margin: 0 0 2.1rem; font-size: clamp(.95rem, 1.1vw, 1.1rem); line-height: 1.55; }
.button { display: inline-flex; justify-content: space-between; align-items: center; gap: 2.8rem; min-width: 235px; padding: 1.05rem 1.2rem; border: 1px solid currentColor; font: 500 .7rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; transition: color .25s, background .25s; }
.button--light:hover { color: var(--ink); background: var(--white); }
.button--dark:hover { color: var(--paper); background: var(--ink); }
.hero-meta { position: absolute; z-index: 2; right: 2.2vw; bottom: 30px; display: flex; gap: 2rem; font: 400 .58rem/1 var(--mono); letter-spacing: .12em; }
.hero-controls { position: absolute; z-index: 3; left: 5vw; bottom: 30px; display: flex; gap: 7px; }
.hero-controls button { position: relative; width: 48px; padding: 0 0 9px; color: var(--white); border: 0; border-bottom: 1px solid rgba(255,255,255,.42); background: none; font: 400 .58rem/1 var(--mono); text-align: left; cursor: pointer; }
.hero-controls button::after { content: ""; position: absolute; inset: auto 0 -1px; height: 1px; background: var(--white); transform: scaleX(0); transform-origin: left; transition: transform .5s; }
.hero-controls button.is-active::after { transform: scaleX(1); }
.scroll-cue { position: absolute; z-index: 2; right: 2.2vw; top: 50%; display: flex; gap: 1.2rem; align-items: center; font: 400 .62rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; transform: rotate(90deg) translateX(50%); transform-origin: right center; }
@keyframes hero-in { from { transform: scale(1.04); filter: brightness(.7); } }
@keyframes copy-in { from { opacity: 0; transform: translateY(24px); } }

.intro { min-height: 78vh; padding: 11vw 5vw; display: grid; grid-template-columns: 1fr 3fr; gap: 3vw; align-items: start; border-bottom: 1px solid var(--line); }
.intro-copy { max-width: 1120px; }
.intro h2 { margin: 0; font-size: clamp(3rem, 6.2vw, 7rem); font-weight: 300; line-height: .98; letter-spacing: -.065em; }
.intro h2 em { color: #74736e; font-family: Georgia, serif; font-weight: 400; }
.intro-copy > p { width: min(460px, 100%); margin: 3rem 0 0 auto; font-size: .98rem; line-height: 1.7; }

.showcase { padding: 9vw 0 6vw; overflow: hidden; color: var(--white); background: #20201d; }
.showcase-head { padding: 0 5vw 5vw; display: grid; grid-template-columns: 2fr 1fr; gap: 6vw; align-items: end; }
.showcase h2 { margin: 1rem 0 0; font-size: clamp(3rem, 6vw, 6.7rem); font-weight: 300; line-height: .9; letter-spacing: -.065em; }
.showcase-actions > p { max-width: 350px; margin: 0 0 2rem; color: #bcbab4; font-size: .86rem; line-height: 1.65; }
.showcase-actions > div { display: flex; gap: 6px; }
.showcase-actions button { width: 48px; height: 48px; color: var(--white); border: 1px solid rgba(255,255,255,.35); background: transparent; cursor: pointer; transition: color .2s, background .2s; }
.showcase-actions button:hover { color: var(--ink); background: var(--white); }
.showcase-track { display: grid; grid-auto-flow: column; grid-auto-columns: min(29vw, 440px); gap: 16px; padding: 0 5vw 2rem; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scrollbar-width: thin; scrollbar-color: #8a8881 transparent; }
.showcase-card { scroll-snap-align: start; }
.showcase-image { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #d7d4cd; }
.showcase-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.78); transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .5s; }
.showcase-image:hover img { transform: scale(1.025); filter: saturate(1); }
.showcase-image > span { position: absolute; z-index: 2; top: 14px; padding: .6rem .7rem; color: var(--ink); background: var(--paper); font: 500 .58rem/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.showcase-image > span { left: 14px; }
.showcase-info { padding: 1.3rem 0 0; }
.showcase-info > p { margin: 0 0 .65rem; color: #97958f; font: 400 .59rem/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.showcase-info h3 { margin: 0; font-size: 1.35rem; font-weight: 400; letter-spacing: -.035em; }
.showcase-info > div { margin-top: 1.25rem; padding-top: 1rem; display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.25); }
.showcase-info strong { font-size: .95rem; font-weight: 500; }
.showcase-info > div span { color: #97958f; font: 400 .58rem/1.5 var(--mono); text-transform: uppercase; }
.showcase-footer { padding: 2rem 5vw 0; display: flex; justify-content: space-between; font: 400 .6rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.showcase-footer span { color: #8a8881; }

.collection { padding: 8vw 2.2vw 10vw; }
.section-head { padding: 0 2.8vw 3.5vw; display: grid; grid-template-columns: 2fr 1fr; gap: 5vw; align-items: end; }
.section-head h2 { max-width: 850px; margin: .9rem 0 0; font-size: clamp(2.8rem, 5.3vw, 6rem); font-weight: 300; line-height: .95; letter-spacing: -.06em; }
.section-head > p { max-width: 330px; margin: 0 0 .3rem; font-size: .9rem; line-height: 1.6; }
.collection-tools { margin: 0 2.8vw 2rem; padding-bottom: 1rem; display: flex; justify-content: space-between; align-items: end; gap: 1rem; border-bottom: 1px solid var(--line); }
.collection-filters { display: flex; flex-wrap: wrap; gap: .45rem; }
.collection-filters button { padding: .72rem .85rem; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; background: transparent; font: 500 .62rem/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; cursor: pointer; transition: color .2s, background .2s, border-color .2s; }
.collection-filters button span { margin-left: .45rem; opacity: .55; }
.collection-filters button:hover, .collection-filters button.is-active { color: var(--paper); border-color: var(--ink); background: var(--ink); }
.collection-filters button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.collection-result { margin: 0; white-space: nowrap; font: 400 .62rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.product-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.product { min-width: 0; display: flex; flex-direction: column; border-bottom: 1px solid var(--line); }
.product { border: 0; background: var(--paper); }
.product-image { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #c5c2ba; }
.product-image::after { content: ""; position: absolute; inset: 0; background: rgba(20,20,18,.12); opacity: 0; transition: opacity .45s; }
.product-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.75); transition: transform .75s cubic-bezier(.2,.7,.2,1), filter .5s; }
.product-image:hover img { transform: scale(1.025); filter: saturate(.95); }
.product-image:hover::after { opacity: 1; }
.product-index, .product-view { position: absolute; z-index: 2; top: 12px; padding: .55rem .62rem; background: var(--paper); font: 500 .57rem/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.product-index { left: 12px; }
.product-view { right: 12px; opacity: 0; transform: translateY(-5px); transition: opacity .3s, transform .3s; }
.product-info { min-height: 325px; padding: clamp(1.2rem, 1.8vw, 2rem); display: flex; flex: 1; flex-direction: column; background: #dad8d2; }
.product--velum .product-info { background: #cfd1d0; }
.product--nox .product-info { color: var(--white); background: #292825; }
.product-mood { margin: 0 0 .7rem; font: 500 .57rem/1.45 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.product h3 { margin: 0; font-size: clamp(2rem, 2.7vw, 3.2rem); font-weight: 300; line-height: .92; letter-spacing: -.065em; }
.product-format { margin: .75rem 0 0; font: 400 .58rem/1.4 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.product-notes { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.product-notes { margin-top: 1.25rem; }
.product-notes li { padding: .42rem .55rem; border: 1px solid currentColor; border-radius: 999px; font: 400 .52rem/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.product-buy { margin-top: auto; padding-top: 1.4rem; display: flex; justify-content: space-between; align-items: end; gap: .8rem; border-top: 1px solid currentColor; }
.product-buy p { margin: 0; display: grid; gap: .5rem; }
.product-buy p span { font: 400 .62rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.product-buy strong { font-size: 1.2rem; font-weight: 500; }
.product-cart-action { margin: 0; }
.product-buy button { min-width: 170px; padding: .9rem; display: flex; justify-content: space-between; gap: 1rem; color: var(--white); border: 0; background: var(--ink); font: 500 .58rem/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; cursor: pointer; transition: transform .25s, opacity .25s; }
.product--nox .product-buy button { color: var(--ink); background: var(--white); }
.product-buy button:hover { transform: translateY(-3px); }
.product-buy button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.product-buy button:disabled { cursor: wait; opacity: .7; transform: none; }

.atelier { display: grid; grid-template-columns: 1.4fr 1fr; min-height: 850px; color: var(--white); background: var(--ink); }
.atelier-media { min-height: 620px; overflow: hidden; }
.atelier-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.15) saturate(.7) contrast(1.05); }
.atelier-copy { padding: 7vw 5vw; display: flex; flex-direction: column; }
.atelier h2 { margin: 1.5rem 0 2.5rem; font-size: clamp(3rem, 5.2vw, 6rem); font-weight: 300; line-height: .95; letter-spacing: -.06em; }
.atelier-copy > p:not(.kicker) { max-width: 440px; font-size: .95rem; line-height: 1.7; color: #c7c5bf; }
.atelier ul { margin: auto 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.27); }
.atelier li { padding: 1.15rem 0; display: flex; gap: 1.5rem; border-bottom: 1px solid rgba(255,255,255,.27); font-size: .83rem; }
.atelier li span { font: 400 .63rem/1.5 var(--mono); color: #999790; }

.closing { min-height: 80vh; padding: 10vw 5vw 5vw; display: flex; justify-content: space-between; align-items: flex-end; background: var(--fog); }
.closing h2 { margin: 1.2rem 0 2.5rem; font-size: clamp(4rem, 9vw, 10rem); font-weight: 300; line-height: .82; letter-spacing: -.075em; }
.closing-note { margin: 0 0 .5rem; font: 400 .68rem/1.6 var(--mono); letter-spacing: .08em; text-align: right; text-transform: uppercase; }
.cart-backdrop { position: fixed; z-index: 70; inset: 0; background: rgba(16,16,14,.42); backdrop-filter: blur(2px); }
.cart-drawer { position: fixed; z-index: 80; inset: 0 0 0 auto; width: min(470px, 100%); padding: 32px; display: flex; flex-direction: column; color: var(--ink); background: #f4f2ed; box-shadow: -20px 0 60px rgba(0,0,0,.14); transform: translateX(102%); visibility: hidden; transition: transform .45s cubic-bezier(.2,.7,.2,1), visibility .45s; }
.cart-drawer.is-open { transform: none; visibility: visible; }
.cart-drawer-head { padding-bottom: 24px; display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); }
.cart-drawer-head p, .cart-item-info > p { margin: 0 0 8px; font: 500 .58rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.cart-drawer-head h2 { margin: 0; font-size: 1.55rem; font-weight: 400; }
.cart-drawer-head button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: transparent; font-size: 1.4rem; cursor: pointer; }
.cart-items { overflow: auto; }
.cart-item { padding: 20px 0; display: grid; grid-template-columns: 90px 1fr auto; gap: 16px; border-bottom: 1px solid var(--line); }
.cart-item > img { width: 90px; height: 110px; object-fit: cover; background: #d8d5ce; }
.cart-item h3 { margin: 0 0 7px; font-size: 1rem; font-weight: 500; }
.cart-item strong { font-size: .85rem; font-weight: 500; }
.cart-quantity { width: max-content; margin-top: 14px; display: flex; align-items: center; border: 1px solid var(--line); }
.cart-quantity button { width: 30px; height: 29px; border: 0; background: transparent; cursor: pointer; }
.cart-quantity span { min-width: 26px; text-align: center; font-size: .75rem; }
.cart-remove { align-self: start; padding: 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; font: 400 .56rem/1.4 var(--mono); text-transform: uppercase; cursor: pointer; }
.cart-empty { margin: auto; text-align: center; }
.cart-empty p { font-size: 1.1rem; }
.cart-empty button { padding: .8rem 1rem; border: 1px solid var(--ink); background: transparent; cursor: pointer; }
.cart-summary { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line); }
.cart-summary > div { display: flex; justify-content: space-between; }
.cart-summary small { display: block; margin-top: 5px; font-weight: 400; }
.cart-summary > p { margin: 12px 0 20px; color: #66645f; font-size: .7rem; }
.cart-summary button { width: 100%; padding: 1rem; display: flex; justify-content: space-between; color: #fff; border: 0; background: var(--ink); font: 500 .67rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.cart-summary button:disabled { cursor: wait; opacity: .65; }
.cart-status { min-height: 1em; margin: 10px 0 0; color: #66645f; font-size: .67rem; }
body.cart-open { overflow: hidden; }
.store-footer { min-height: 360px; padding: 64px max(5vw, 24px) 24px; color: #1d1d1b; background: #f3f1ed; border-top: 1px solid var(--line); }
.footer-main { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 6vw; }
.footer-logo { width: min(250px, 100%); height: 64px; overflow: hidden; display: flex; align-items: center; }
.footer-logo img { width: 100%; clip-path: inset(14% 0); filter: invert(1); mix-blend-mode: multiply; transform: scale(1.1); }
.footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 2rem; align-content: start; font-size: .78rem; }
.store-footer address { display: grid; gap: .9rem; align-content: start; font-size: .78rem; font-style: normal; }
.footer-bottom { margin-top: 60px; padding-top: 20px; display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--line); font-size: .62rem; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .announcement { height: 34px; }
  .announcement-track span { min-width: 275px; font-size: .66rem; }
  .header-main { width: calc(100% - 32px); height: 72px; grid-template-columns: 1fr auto; }
  .site-header nav { display: none; }
  .brand-logo img { width: 126px; }
  .hero { min-height: 680px; }
  .hero-slide img { object-position: center; }
  .hero-shade { background: linear-gradient(0deg, rgba(17,16,14,.88), rgba(17,16,14,.08) 74%); }
  .hero-copy { width: auto; margin: 0 20px 82px; }
  .hero h1 { font-size: clamp(3.7rem, 17vw, 6rem); }
  .hero-meta, .scroll-cue { display: none; }
  .hero-controls { left: 20px; bottom: 24px; }
  .intro { min-height: auto; padding: 110px 20px; grid-template-columns: 1fr; gap: 2.5rem; }
  .intro h2 { font-size: clamp(2.8rem, 12vw, 5rem); }
  .intro-copy > p { margin: 2rem 0 0; }
  .showcase { padding: 90px 0 55px; }
  .showcase-head { padding: 0 20px 50px; grid-template-columns: 1fr; gap: 2rem; }
  .showcase h2 { font-size: clamp(3.2rem, 15vw, 5.5rem); }
  .showcase-track { grid-auto-columns: min(82vw, 390px); padding-left: 20px; padding-right: 20px; }
  .showcase-image > i { opacity: 1; transform: none; }
  .showcase-footer { padding-inline: 20px; }
  .showcase-footer span { display: none; }
  .collection { padding: 90px 12px; }
  .section-head { padding: 0 8px 50px; grid-template-columns: 1fr; }
  .collection-tools { margin: 0 8px 20px; align-items: flex-start; flex-direction: column; }
  .collection-filters { flex-wrap: nowrap; width: 100%; padding-bottom: .4rem; overflow-x: auto; }
  .collection-filters button { flex: 0 0 auto; }
  .product-list { grid-template-columns: 1fr; }
  .product-image { aspect-ratio: 4 / 3; }
  .product-info { min-height: 330px; padding: 26px 18px 20px; }
  .product h3 { font-size: clamp(2.5rem, 12vw, 4rem); }
  .product-view { opacity: 1; transform: none; }
  .product-buy { align-items: stretch; flex-direction: column; gap: 1.5rem; }
  .product-buy form, .product-buy button { width: 100%; }
  .atelier { grid-template-columns: 1fr; min-height: 0; }
  .atelier-media { min-height: 55vh; }
  .atelier-copy { min-height: 680px; padding: 75px 22px 35px; }
  .closing { min-height: 720px; padding: 90px 20px 35px; flex-direction: column; align-items: flex-start; }
  .closing h2 { font-size: clamp(4rem, 19vw, 7rem); }
  .closing-note { text-align: left; }
  .product-buy .product-cart-action, .product-buy button { width: 100%; }
  .cart-drawer { padding: 24px 18px; }
  .store-footer { padding-top: 45px; }
  .footer-main { grid-template-columns: 1fr; gap: 38px; }
  .footer-logo img { width: 190px; }
  .footer-links { grid-template-columns: 1fr 1fr; }
  .footer-bottom { margin-top: 42px; flex-direction: column; line-height: 1.5; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}