/* One scroll system: a natural-height sticky opening followed by a covering sheet. */
:root{--hero-paper:#000}
.pretop{position:relative}.site-header{z-index:80}
.opening-parallax{position:relative;z-index:1;background:var(--hero-paper)}
.hero-parallax-shell{position:relative;padding-bottom:22svh}
.hero.hero-meaning{display:block;position:sticky;top:var(--header-h);height:auto;min-height:calc(100svh - var(--header-h));max-height:none;background:var(--hero-paper);overflow:visible}
.hero-meaning-panel{padding:clamp(28px,4vw,60px) clamp(24px,5vw,80px) 36px;display:flex;flex-direction:column;gap:26px;min-height:calc(100svh - var(--header-h));justify-content:space-between}
.hero-meaning .hero-top{margin:0}
.hero-meaning-copy{display:grid;grid-template-columns:1.1fr .9fr;align-items:end;gap:45px}
.hero-meaning h1{font-size:clamp(64px,8vw,123px);font-weight:900;line-height:.84;letter-spacing:-.085em;margin:0;text-transform:uppercase}
.hero-meaning h1 .serif{font-family:Georgia,serif;font-weight:400;font-style:italic;text-transform:none}
.hero-meaning-copy p{font-size:clamp(15px,1.5vw,21px);line-height:1.6;max-width:510px;margin:0}
.hero-bottom-group{width:100%;min-width:0}
.hero-letters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
.hero-letters>div{position:relative;display:grid;place-items:center;min-width:0;isolation:isolate}
.hero-letters b{font:900 clamp(90px,13vw,190px)/.9 Arial,sans-serif;letter-spacing:-.07em}
.hero-letters span{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);background:var(--hero-paper);text-align:center;font-weight:700;font-size:clamp(10px,1.4vw,19px);line-height:1.6;transition:opacity .24s;white-space:nowrap}
.hero-letters span.word-changing{opacity:0}
.meaning-ticker{overflow:hidden;border-block:1px solid #b8a499;margin-top:12px;white-space:nowrap}
.meaning-track{display:flex;width:max-content;animation:meaningScroll 65s linear infinite;padding:12px 0}
.meaning-track span{font-size:clamp(16px,1.5vw,20px);line-height:1.5;font-weight:800;letter-spacing:.14em;padding-inline:20px;flex-shrink:0;-webkit-text-size-adjust:100%;text-size-adjust:100%}
.meaning-track span:after{content:' ✦';padding-left:35px}
@keyframes meaningScroll{to{transform:translateX(-50%)}}
.intro-collage{position:relative;z-index:5;background:var(--offwhite);border-radius:36px 36px 0 0;box-shadow:0 -12px 32px #19181714}
.marquee{position:relative;z-index:4}
.stack-area{height:auto;min-height:0}.story-sticky{position:relative;top:auto;height:auto;min-height:620px;overflow:hidden}
.shop-wrap{margin-top:0;border-radius:0;box-shadow:none}.last-layer{margin-top:0}
.merch-quick-link{font-size:10px;font-weight:900;letter-spacing:.12em;padding:12px}
.product-media .view-product{z-index:3}.product-media .quick{z-index:4}.product-media .tap-to-color{pointer-events:none}
.grid-swatches{gap:8px}.grid-swatches .color-swatch{width:27px;height:27px;min-width:27px;min-height:27px}
.product-color-name{white-space:normal}.bag-continue{border:0;background:transparent;padding:0 0 20px;text-decoration:underline;font-size:12px;cursor:pointer}
.modal{max-height:calc(100dvh - 24px)}.modal-content{overscroll-behavior:contain}.drawer{height:100dvh}.search-panel{top:var(--header-h)}
@media(max-width:800px){
.hero-meaning-panel{padding:28px 22px 28px;gap:23px;min-height:calc(100svh - 65px)}
.hero-meaning-copy{grid-template-columns:1fr;gap:20px}
.hero-meaning h1{font-size:clamp(55px,11.5vw,84px)}
.hero-meaning-copy p{font-size:14px;line-height:1.5;max-width:510px}
.hero-letters b{font-size:clamp(62px,17vw,125px)}
.hero-letters span{font-size:clamp(8px,2.35vw,15px);line-height:1.6;letter-spacing:-.04em}
.hero-parallax-shell{padding-bottom:14svh}
.hero-meaning-panel{justify-content:flex-start}.hero-bottom-group{margin-top:auto}
.intro-collage{border-radius:26px 26px 0 0}
.story-sticky{grid-template-columns:1fr;grid-template-rows:auto 420px;min-height:0}.story-left{padding:55px 24px;gap:25px}.story-left h2{font-size:72px}.story-right img{height:100%;width:100%}
.shop-heading h2{font-size:clamp(46px,11vw,75px)}
.modal{display:flex;flex-direction:column;overflow:auto;max-height:calc(100dvh - 20px)}
.modal-media{flex:none;height:30dvh;min-height:180px}.modal-media img{height:100%;max-height:30dvh}.modal-content{flex:none;overflow:visible;padding:24px}
.modal-close{position:fixed;top:10px;right:10px;z-index:5;border-radius:50%;background:#fcfaf5;box-shadow:0 2px 12px #0002}
.modal-content h2{font-size:30px;margin-right:20px}.modal-desc{font-size:12px;margin-bottom:12px}
.grid-swatches{gap:7px}.grid-swatches .color-swatch{width:24px;height:24px;min-width:24px;min-height:24px}
.product-title{flex-wrap:wrap}.product-title .money{font-size:12px}.product-color-name{font-size:9px}
.nav:not(.open){visibility:hidden;pointer-events:none}.nav.open{visibility:visible;pointer-events:auto;z-index:90}
}
@media(max-height:700px) and (min-width:801px){.hero-meaning h1{font-size:70px}.hero-letters b{font-size:110px}.hero-meaning-panel{gap:20px}}
@media(prefers-reduced-motion:reduce){.meaning-track{animation:none}.hero-letters span{transition:none}}
/* Pin the whole opening in the main document; following opaque sections cover it. */
.opening-parallax{position:sticky;top:min(var(--header-h),calc(100svh - var(--opening-height,100svh)));z-index:1}
.hero-parallax-shell{padding-bottom:0}
.hero.hero-meaning{position:relative;top:auto;min-height:calc(100svh - var(--header-h) - 32px)}
.hero-meaning-panel{min-height:calc(100svh - var(--header-h) - 32px)}
.stack-area{position:relative;z-index:6}.newsletter{position:relative;z-index:10}
@media(max-width:800px){.hero.hero-meaning,.hero-meaning-panel{min-height:calc(100svh - 92px)}}
@media(max-width:800px){.hero-meaning-panel{justify-content:space-between}.hero-bottom-group{margin-top:0}.hero-meaning h1{font-size:clamp(56px,19vw,84px)}.hero-meaning-panel{gap:22px}}
/* Dialog state changes are immediate so fast taps never hit a fading overlay. */
.modal,.backdrop,.drawer{transition:none}
@media(hover:none){.filter:not(.active):hover{background:transparent;color:var(--ink);border-color:#c5beb6}}

/* Editorial feature: one full sweater, with no inset garment. */
.intro-sweater-only{min-height:0;width:100%;aspect-ratio:4/5}
.intro-sweater-only .intro-img-main{position:relative;width:100%;height:100%;padding:44px 18px 18px}
.intro-sweater-only .intro-img-main img{width:100%;height:100%;max-width:100%;object-fit:contain;transform:none}

/* Jacket feature keeps the collar, sleeves and hem entirely in view. */
.story-right.story-jacket{padding:40px 24px 80px}
.story-right.story-jacket img{width:100%;height:100%;max-height:650px;object-fit:contain}
@media(max-width:800px){.story-right.story-jacket{padding:24px 16px 54px}}

/* Pin the complete editorial panel only after its bottom reaches the viewport.
   The following blue section covers it in normal document flow. */
.intro-collage{position:sticky;top:min(var(--header-h),calc(100svh - var(--editorial-height,100svh)));align-self:start}
@media(prefers-reduced-motion:reduce){.intro-collage{position:relative;top:auto}}

/* Pin the collection at its lower edge while Behind the Word covers it. */
.shop-wrap{position:sticky;top:min(var(--header-h),calc(100svh - var(--collection-height,100svh)));z-index:7;align-self:start}
.editorial-wrap{z-index:8}
.sets{z-index:9}
@media(prefers-reduced-motion:reduce){.shop-wrap{position:relative;top:auto}}

/* Black-and-white opening colorway. */
.hero.hero-meaning{color:#fff}
.hero-meaning-copy p{color:#fff}
.hero-meaning .meaning-ticker{border-color:#ffffff55}

/* Keep the ticker within desktop windows, including wide, short displays. */
@media(min-width:801px){
.hero-meaning-panel{padding-top:clamp(20px,3svh,40px);padding-bottom:20px;gap:clamp(12px,2svh,26px)}
.hero-meaning h1{font-size:clamp(48px,min(8vw,11svh),123px)}
.hero-letters b{font-size:clamp(72px,min(13vw,18svh),190px)}
}