/* ==========================================================================
   ByElenor — Mason page-builder bricks (Home, About, generic pages)
   One section class per brick: .b-<name>. Layout values follow the design files.
   ========================================================================== */

/* Generic page header (site/page when a display title is set) */
.page-head { padding: calc(var(--nav-h) + clamp(48px, 7vw, 120px)) var(--gutter) clamp(48px, 6vw, 96px); display: flex; flex-direction: column; gap: clamp(12px, 2vw, 28px); }
.page-head__title { font-family: var(--serif); font-size: clamp(84px, 14vw, 240px); line-height: .82; letter-spacing: -.04em; }
.page-head__intro { max-width: 480px; }
.page-head + .b-phero { padding-top: 0; }

/* Hatched placeholder tones by slot (only visible until a photo is uploaded) */
.media--d2 { background: var(--hatch-d2); }

/* ---------------------------------------------------------------- Campaign hero */
.b-hero { position: relative; height: 100vh; min-height: 600px; overflow: hidden; background: #1A1B1E; color: #F4F5F6; }
.b-hero__bg { position: absolute; inset: 0; will-change: transform; }
.b-hero__media { position: absolute; inset: 0; }
.b-hero__label { position: absolute; right: var(--gutter); top: 96px; max-width: 260px; text-align: right; font-family: var(--mono); font-size: 10px; line-height: 1.6; letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-faint); }
.b-hero__media img:not([src*="/ph-"]) + .b-hero__label { display: none; }
.b-hero__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 11, 12, .6), rgba(10, 11, 12, 0) 55%); pointer-events: none; }
/* Optional top gradient so the transparent navigation stays legible over light hero images. */
.b-hero__nav-shade { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--nav-h) + 120px); background: linear-gradient(to bottom, rgba(10, 11, 12, .45), rgba(10, 11, 12, .18) 55%, rgba(10, 11, 12, 0)); pointer-events: none; }
.b-hero__text { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(28px, 5vh, 56px); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 40px; }
.b-hero__aside { display: flex; flex-direction: column; gap: 20px; max-width: 300px; padding-bottom: 1vw; }
.b-hero__aside .eyebrow { color: #B5BAC1; }
.b-hero__aside p { font-size: 15px; line-height: 1.55; color: #E2E4E7; text-wrap: pretty; }
.b-hero__aside .btn-pill { align-self: flex-start; height: auto; padding: 15px 24px; }

/* ---------------------------------------------------------------- Collection feature */
.b-feature { position: relative; padding-top: clamp(96px, 12vw, 180px); padding-bottom: clamp(110px, 13vw, 210px); }
.b-feature__wrap { display: flex; flex-wrap: wrap; gap: clamp(32px, 4vw, 64px); align-items: flex-start; }
.b-feature__main { flex: 1 1 520px; max-width: 760px; position: relative; }
.b-feature__img { aspect-ratio: 4 / 5; }
.b-feature__copy { flex: 1 1 340px; position: relative; z-index: 2; display: flex; flex-direction: column; gap: 28px; padding-top: clamp(0px, 7vw, 120px); }
.b-feature__copy > .eyebrow { align-self: flex-start; }
.b-feature__title { margin: 0 0 0 max(-180px, min(0px, calc((900px - 100vw) * .3))); font-family: var(--serif); font-size: clamp(100px, 15.5vw, 260px); line-height: .8; letter-spacing: -.035em; }
.b-feature__copy .lede { max-width: 360px; }
.b-feature__copy .ul-on { align-self: flex-start; }
.b-feature__detail { width: min(64%, 300px); margin: clamp(16px, 3vw, 48px) 0 calc(-1 * clamp(40px, 10vw, 190px)) auto; }
.b-feature__detail-img { aspect-ratio: 1 / 1; }

/* ---------------------------------------------------------------- Category grid */
.b-cats { padding-bottom: clamp(110px, 12vw, 200px); }
.b-cats__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 72px; }
.b-cat { display: flex; flex-direction: column; gap: 16px; color: var(--ink); }
.b-cat:nth-child(5n+1) { grid-column: 1 / span 5; --ar: 4 / 5; }
.b-cat:nth-child(5n+2) { grid-column: 7 / span 3; --ar: 3 / 4; margin-top: 140px; }
.b-cat:nth-child(5n+3) { grid-column: 10 / span 3; --ar: 2 / 3; margin-top: 36px; }
.b-cat:nth-child(5n+4) { grid-column: 2 / span 4; --ar: 1 / 1; margin-top: -24px; }
.b-cat:nth-child(5n+5) { grid-column: 7 / span 6; --ar: 3 / 2; margin-top: 72px; }
.b-cat__media { position: relative; aspect-ratio: var(--ar, 4 / 5); overflow: hidden; }
.b-cat__img { position: absolute; inset: 0; transition: transform 1.2s var(--ease); }
.b-cat__alt { position: absolute; inset: 0; clip-path: inset(0 0 0 100%); transition: clip-path .9s var(--ease-io); }
.b-cat__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.b-cat__name { display: flex; align-items: baseline; gap: 14px; transition: transform .6s var(--ease); }
.b-cat__name .serif { font-size: clamp(32px, 3.2vw, 50px); line-height: 1; }
.b-cat__arrow { font-size: 18px; opacity: 0; transform: translateX(-10px); transition: opacity .4s, transform .6s var(--ease); }
.b-cat__meta .eyebrow { letter-spacing: .06em; white-space: nowrap; }
@media (hover: hover) and (min-width: 760px) {
  .b-cat:hover .b-cat__img, .b-cat:focus-visible .b-cat__img { transform: scale(1.05); }
  .b-cat:hover .b-cat__alt, .b-cat:focus-visible .b-cat__alt { clip-path: inset(0 0 0 0); }
  .b-cat:hover .b-cat__name, .b-cat:focus-visible .b-cat__name { transform: translateX(12px); }
  .b-cat:hover .b-cat__name .serif, .b-cat:focus-visible .b-cat__name .serif { font-style: italic; }
  .b-cat:hover .b-cat__arrow, .b-cat:focus-visible .b-cat__arrow { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- Product row */
.b-products { padding-bottom: clamp(110px, 12vw, 200px); }

/* ---------------------------------------------------------------- Editorial story (dark) */
.b-story { position: relative; background: var(--dark); color: var(--on-dark-2); padding: clamp(100px, 12vw, 200px) var(--gutter) clamp(110px, 13vw, 220px); overflow: hidden; }
.b-story__eyebrow { color: var(--on-dark-muted); }
.b-story__stage { position: relative; margin-top: clamp(28px, 4vw, 56px); }
.b-story__a { width: clamp(170px, 30vw, 470px); margin-left: auto; }
.b-story__a-img { aspect-ratio: 3 / 4; }
.b-story__title { position: relative; z-index: 2; margin: calc(-1 * clamp(130px, 24vw, 400px)) 0 0; font-family: var(--serif); font-size: clamp(60px, 10.4vw, 184px); line-height: .9; letter-spacing: -.025em; color: var(--on-dark); }
.b-story__row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 40px 32px; margin-top: clamp(40px, 5vw, 80px); }
.b-story__b { flex: 0 1 clamp(220px, 36vw, 560px); margin-top: calc(-1 * clamp(30px, 9vw, 160px)); }
.b-story__b-img { aspect-ratio: 4 / 3; }
.b-story__copy { flex: 0 1 360px; display: flex; flex-direction: column; gap: 24px; }
.b-story__copy p { font-size: 16px; line-height: 1.65; color: var(--on-dark-body); text-wrap: pretty; }
.b-story__copy .ul-on { align-self: flex-start; color: var(--on-dark); }
.b-story__c { flex: 0 0 clamp(110px, 15vw, 230px); margin-top: clamp(30px, 10vw, 180px); }
.b-story__c-img { aspect-ratio: 1 / 1; background: repeating-linear-gradient(135deg, #3A3D42 0 1px, #2D3034 1px 11px); }
.b-story__c-img .media__label { color: var(--on-dark-muted); }

/* ---------------------------------------------------------------- Shop the look */
.b-look { padding-top: clamp(100px, 12vw, 180px); padding-bottom: clamp(100px, 12vw, 180px); }
.b-look__wrap { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 96px); align-items: flex-end; }
.b-look__img { flex: 1.35 1 480px; aspect-ratio: 4 / 5; max-height: 94vh; overflow: hidden; }
.b-look__img .media__label { z-index: 0; }
.b-look__dot { position: absolute; z-index: 2; width: 36px; height: 36px; margin: -18px 0 0 -18px; padding: 0; border: 0; background: none; cursor: pointer; opacity: .35; transition: opacity .6s; }
.b-look__img:hover .b-look__dot, .b-look.is-active .b-look__dot, .b-look__dot:focus-visible { opacity: 1; }
.b-look__pin { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #F4F5F6; box-shadow: 0 0 0 5px rgba(244, 245, 246, .28); transition: transform .45s var(--ease-spring); }
.b-look__tag { position: absolute; left: 32px; top: 50%; display: flex; gap: 10px; white-space: nowrap; background: #F4F5F6; color: var(--ink); padding: 8px 12px; font-size: 12px; opacity: 0; transform: translateY(-50%) translateX(-8px); transition: opacity .35s, transform .45s var(--ease); pointer-events: none; }
.b-look__dot.is-on .b-look__pin { transform: scale(1.7); }
.b-look__dot.is-on .b-look__tag { opacity: 1; transform: translateY(-50%); }
.b-look__copy { flex: 1 1 300px; display: flex; flex-direction: column; gap: 32px; padding-bottom: 8px; }
.b-look__title { font-family: var(--serif); font-size: clamp(48px, 5.6vw, 92px); line-height: .92; letter-spacing: -.02em; }
.b-line { display: block; }
.b-look__list { display: flex; flex-direction: column; }
.b-look__row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; align-items: baseline; gap: 12px; padding: 18px 0; border-top: 1px solid var(--line); transition: opacity .4s; }
.b-look.is-active .b-look__row:not(.is-on) { opacity: .4; }
.b-look__num { font-size: 11px; color: var(--muted); }
.b-look__name { display: flex; flex-direction: column; gap: 3px; }
.b-look__name span:first-child { font-size: 15px; }
.b-look__name .muted { font-size: 12px; }
.b-look__row .tabular { font-size: 14px; }
.b-look__add { padding: 10px 0 10px 12px; font-size: 13px; }
.b-look__all { margin-top: 16px; height: 54px; border: 0; background: var(--ink); color: var(--bg); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; transition: transform .5s var(--ease-mag); }

/* ---------------------------------------------------------------- Horizontal scroller */
.b-scroll { position: relative; height: 340vh; background: var(--panel); }
.b-scroll__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; }
.b-scroll__track { display: flex; align-items: center; gap: 5vw; padding: 0 6vw; will-change: transform; }
.b-scroll__intro { flex: none; width: 32vw; display: flex; flex-direction: column; gap: 28px; }
.b-scroll__intro .ul-on { align-self: flex-start; }
.b-scroll__title { font-family: var(--serif); font-size: clamp(56px, 6.4vw, 112px); line-height: .9; letter-spacing: -.02em; }
.b-scroll__item { flex: none; display: flex; flex-direction: column; gap: 14px; color: var(--ink); }
.b-scroll__img { height: var(--h); aspect-ratio: var(--ar); transition: filter .4s; }
.b-scroll__item:hover .b-scroll__img { filter: contrast(1.04); }
.b-scroll__meta { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.b-scroll__item:nth-of-type(5n+1) { --h: 68vh; --ar: 4 / 5; --mw: 78vw; }
.b-scroll__item:nth-of-type(5n+2) { --h: 50vh; --ar: 3 / 4; --mw: 62vw; margin-top: -16vh; }
.b-scroll__item:nth-of-type(5n+3) { --h: 74vh; --ar: 3 / 2; --mw: 88vw; }
.b-scroll__item:nth-of-type(5n+4) { --h: 44vh; --ar: 1 / 1; --mw: 64vw; margin-top: 20vh; }
.b-scroll__item:nth-of-type(5n+5) { --h: 62vh; --ar: 3 / 4; --mw: 70vw; margin-top: -6vh; }
.b-scroll__item:nth-of-type(5n+2) .media { background: var(--hatch-d); }
.b-scroll__item:nth-of-type(5n+2) .media__label { color: var(--on-dark-faint); }
.b-scroll__item:nth-of-type(5n+3) .media, .b-scroll__item:nth-of-type(5n+5) .media { background: var(--hatch-m); }
.b-scroll__end { flex: none; width: 6vw; }
.b-scroll__bar { position: absolute; left: 6vw; right: 6vw; bottom: 40px; height: 1px; background: var(--line); }
.b-scroll__bar span { display: block; height: 1px; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------------------------------------------------------------- Brand statement */
.b-brand { padding-top: clamp(110px, 14vw, 220px); padding-bottom: clamp(110px, 14vw, 220px); }
.b-brand__wrap { display: flex; flex-wrap: wrap; gap: clamp(48px, 6vw, 100px); align-items: flex-start; }
.b-brand__copy { flex: 1.3 1 480px; display: flex; flex-direction: column; gap: clamp(36px, 5vw, 72px); }
.b-brand__copy .ul-on { align-self: flex-start; }
.b-brand__title { font-family: var(--serif); font-size: clamp(54px, 7.6vw, 132px); line-height: .92; letter-spacing: -.025em; }
.b-brand__paras { display: flex; flex-wrap: wrap; gap: 24px 40px; max-width: 680px; }
.b-brand__paras p { flex: 1 1 260px; }
.b-brand__fig { flex: 1 1 320px; max-width: 520px; margin: clamp(0px, 9vw, 180px) 0 0; display: flex; flex-direction: column; gap: 12px; }
.b-brand__img { aspect-ratio: 3 / 4; }

/* ---------------------------------------------------------------- Community collage */
.b-comm { padding-bottom: clamp(100px, 12vw, 180px); }
.b-comm .sec-head--lg { margin-bottom: clamp(40px, 5vw, 72px); }
.b-comm__stage { position: relative; height: 72vw; }
.b-comm__tile { position: absolute; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.b-comm__img { aspect-ratio: var(--ar, 1 / 1); }
.b-comm__cap { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--muted); }
.b-comm__tile:nth-child(1) { left: 0; top: 4%; width: 22%; z-index: 1; --ar: 3 / 4; }
.b-comm__tile:nth-child(2) { left: 25%; top: 0; width: 30%; z-index: 1; --ar: 4 / 5; }
.b-comm__tile:nth-child(3) { left: 50%; top: 40%; width: 16%; z-index: 3; --ar: 1 / 1; }
.b-comm__tile:nth-child(4) { left: 69%; top: 5%; width: 27%; z-index: 1; --ar: 3 / 2; }
.b-comm__tile:nth-child(5) { left: 7%; top: 52%; width: 20%; z-index: 2; --ar: 4 / 5; }
.b-comm__tile:nth-child(6) { left: 71%; top: 40%; width: 22%; z-index: 2; --ar: 3 / 4; }
.b-comm__tile:nth-child(7) { left: 33%; top: 66%; width: 17%; z-index: 2; --ar: 1 / 1; }
.b-comm__tile:nth-child(n+8) { display: none; }
.b-comm__tile:nth-child(2) .media, .b-comm__tile:nth-child(7) .media { background: var(--hatch-d); }
.b-comm__tile:nth-child(2) .media__label, .b-comm__tile:nth-child(7) .media__label { color: var(--on-dark-faint); }
.b-comm__tile:nth-child(3) .media, .b-comm__tile:nth-child(4) .media, .b-comm__tile:nth-child(5) .media { background: var(--hatch-m); }

/* ---------------------------------------------------------------- Newsletter */
.b-news { padding-top: clamp(80px, 10vw, 160px); padding-bottom: clamp(100px, 12vw, 180px); border-top: 1px solid var(--line); }
.b-news__title { font-family: var(--serif); font-size: clamp(72px, 14vw, 250px); line-height: .84; letter-spacing: -.035em; }
.b-news__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px 64px; margin-top: clamp(40px, 5vw, 72px); }
.b-news__body { max-width: 320px; }
.b-news__form { flex: 1 1 420px; max-width: 720px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px 32px; }
.b-news__form[hidden] { display: none; }
.b-news__field { flex: 1 1 260px; display: flex; flex-direction: column; gap: 8px; }
.b-news__btn { height: 54px; }
.b-news__done { flex: 1 1 420px; max-width: 720px; font-family: var(--serif); font-size: clamp(28px, 3vw, 44px); line-height: 1.1; }

/* ==========================================================================
   About / story bricks
   ========================================================================== */
.b-phero { padding-top: calc(var(--nav-h) + clamp(48px, 7vw, 120px)); }
.b-phero__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; }
.b-phero__title { margin: clamp(16px, 2vw, 28px) 0 0; font-family: var(--serif); font-size: clamp(84px, 18vw, 320px); line-height: .82; letter-spacing: -.04em; }
.b-phero__media { position: relative; margin-top: clamp(32px, 4vw, 64px); aspect-ratio: 21 / 9; min-height: 420px; overflow: hidden; }
.b-phero__label { left: var(--gutter); bottom: 16px; right: 20px; }

.b-storyblock { padding-top: clamp(96px, 12vw, 200px); padding-bottom: clamp(96px, 12vw, 200px); }
.b-storyblock__wrap { display: flex; flex-wrap: wrap; gap: clamp(40px, 6vw, 112px); align-items: flex-start; }
.b-storyblock__copy { flex: 1.5 1 480px; display: flex; flex-direction: column; gap: 32px; }
.b-storyblock__lead { font-family: var(--serif); font-size: clamp(34px, 3.8vw, 64px); line-height: 1.04; letter-spacing: -.015em; text-wrap: pretty; }
.b-storyblock__paras { display: flex; flex-wrap: wrap; gap: 24px 40px; max-width: 720px; }
.b-storyblock__paras p { flex: 1 1 260px; }
.b-storyblock__fig { flex: 1 1 300px; max-width: 460px; margin: clamp(0px, 8vw, 160px) 0 0; display: flex; flex-direction: column; gap: 12px; }
.b-storyblock__img { aspect-ratio: 3 / 4; }

.b-process { padding-bottom: clamp(96px, 12vw, 200px); }
.b-process__head { margin: 0 var(--gutter) clamp(40px, 5vw, 80px); }
.b-process__rail { display: flex; align-items: flex-start; gap: clamp(16px, 2vw, 32px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gutter) 8px; scroll-padding-left: var(--gutter); }
.b-step { flex: none; width: clamp(260px, 22vw, 380px); scroll-snap-align: start; display: flex; flex-direction: column; gap: 16px; }
.b-step__img { aspect-ratio: var(--ar, 4 / 5); }
.b-step:nth-child(4n+1) { --ar: 4 / 5; }
.b-step:nth-child(4n+2) { --ar: 1 / 1; margin-top: 64px; }
.b-step:nth-child(4n+2) .media, .b-step:nth-child(4n+4) .media { background: var(--hatch-m); }
.b-step:nth-child(4n+3) { --ar: 3 / 4; margin-top: 16px; }
.b-step:nth-child(4n+3) .media { background: var(--hatch-d); }
.b-step:nth-child(4n+3) .media__label { color: var(--on-dark-faint); }
.b-step:nth-child(4n+4) { --ar: 4 / 5; margin-top: 96px; }
.b-step__head { display: flex; align-items: baseline; gap: 14px; }
.b-step__n { font-size: 11px; color: var(--muted); }
.b-step__title { font-size: clamp(30px, 2.6vw, 40px); line-height: 1; }
.b-step__body { font-size: 14px; line-height: 1.6; color: var(--body); text-wrap: pretty; }

.b-principles { background: var(--dark); color: var(--on-dark); padding-top: clamp(96px, 12vw, 190px); padding-bottom: clamp(96px, 12vw, 190px); }
.b-principles__title { font-family: var(--serif); font-size: clamp(56px, 9vw, 160px); line-height: .9; letter-spacing: -.03em; }
.b-principles__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 40px clamp(24px, 4vw, 64px); margin-top: clamp(56px, 7vw, 120px); }
.b-principle { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid rgba(240, 241, 242, .18); padding-top: 18px; }
.b-principle__n { font-size: 11px; color: var(--on-dark-muted); }
.b-principle__title { font-size: clamp(30px, 2.6vw, 42px); line-height: 1; }
.b-principle p { font-size: 15px; line-height: 1.65; color: var(--on-dark-body); text-wrap: pretty; }

.b-studio { padding-top: clamp(96px, 12vw, 190px); padding-bottom: clamp(96px, 12vw, 190px); }
.b-studio__wrap { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 96px); align-items: center; }
.b-studio__stage { flex: 1.4 1 460px; position: relative; min-height: clamp(380px, 46vw, 720px); }
.b-studio__a { position: absolute; left: 0; top: 0; width: 62%; aspect-ratio: 4 / 5; }
.b-studio__b { position: absolute; right: 0; bottom: 0; width: 46%; aspect-ratio: 1 / 1; z-index: 2; }
.b-studio__copy { flex: 1 1 300px; display: flex; flex-direction: column; gap: 24px; }
.b-studio__title { font-family: var(--serif); font-size: clamp(44px, 5vw, 84px); line-height: .94; letter-spacing: -.02em; }
.b-studio__body { max-width: 380px; }
.b-studio__links { display: flex; flex-wrap: wrap; gap: 16px 28px; font-size: 14px; }
.b-studio__links .ul { padding-bottom: 4px; }

.b-links { padding-bottom: clamp(96px, 12vw, 180px); }
.b-links__eyebrow { display: block; margin-bottom: 16px; }
.b-links__row { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line); padding: clamp(16px, 2vw, 28px) 0; color: var(--ink); transition: padding-left .6s var(--ease); }
.b-links__row:hover, .b-links__row:focus-visible { padding-left: 24px; }
.b-links__text { font-family: var(--serif); font-size: clamp(44px, 7vw, 120px); line-height: .95; letter-spacing: -.025em; }
.b-links__arrow { font-size: clamp(20px, 2vw, 32px); }

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 759px) {
  /* Category grid becomes a snap rail */
  .b-cats__grid { display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 8px; scroll-padding-left: var(--gutter); scrollbar-width: none; }
  .b-cats__grid::-webkit-scrollbar { display: none; }
  .b-cat { flex: none; scroll-snap-align: start; margin-top: 0 !important; gap: 12px; }
  .b-cat:nth-child(5n+1) { width: 74vw; }
  .b-cat:nth-child(5n+2) { width: 62vw; }
  .b-cat:nth-child(5n+3) { width: 58vw; }
  .b-cat:nth-child(5n+4) { width: 70vw; }
  .b-cat:nth-child(5n+5) { width: 84vw; }
  .b-cat__alt, .b-cat__arrow { display: none; }
  .b-cat__name .serif { font-size: 34px; }
  .b-cat__meta .eyebrow { font-size: 10px; }

  /* Look: hotspots always visible */
  .b-look__dot { opacity: 1; }

  /* Scroller: no pin, horizontal rail */
  .b-scroll { height: auto; padding: 72px 0 64px; }
  .b-scroll__sticky { position: static; height: auto; display: block; overflow: visible; }
  .b-scroll__track { flex-wrap: nowrap; align-items: flex-end; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 20px; scroll-padding-left: 20px; scrollbar-width: none; transform: none !important; }
  .b-scroll__track::-webkit-scrollbar { display: none; }
  .b-scroll__intro { position: sticky; left: 0; width: auto; }
  .b-scroll__track > .b-scroll__intro { display: none; }
  .b-scroll__mobile-intro { display: flex; }
  .b-scroll__item { width: var(--mw); margin-top: 0 !important; scroll-snap-align: start; gap: 12px; }
  .b-scroll__img { height: auto; width: 100%; }
  .b-scroll__bar, .b-scroll__end { display: none; }
  .b-scroll__title { font-size: 52px; line-height: .92; }

  /* Collage: mobile composition */
  .b-comm__stage { height: 1230px; }
  .b-comm__tile:nth-child(1) { left: 0; top: 0; width: 58%; }
  .b-comm__tile:nth-child(2) { left: 46%; top: 190px; width: 54%; }
  .b-comm__tile:nth-child(3) { left: 6%; top: 470px; width: 38%; }
  .b-comm__tile:nth-child(4) { left: 50%; top: 500px; width: 50%; }
  .b-comm__tile:nth-child(5) { left: 0; top: 650px; width: 48%; }
  .b-comm__tile:nth-child(6) { left: 40%; top: 730px; width: 60%; }
  .b-comm__tile:nth-child(7) { left: 14%; top: 1030px; width: 44%; }

  .b-studio__stage { flex-basis: 100%; }
}
.b-scroll__mobile-intro { display: none; flex-direction: column; gap: 20px; padding: 0 20px; margin-bottom: 32px; }