/* Front page — stacked editorial sections. Sections are separated by whitespace and never by a line, and no container is ever filled with ink, so a short data set cannot leave an empty cell. */
.hp-home{padding-bottom:calc(clamp(44px,5vw,84px) * var(--sec-scale,1))}
.hp-sec{padding-block:calc(clamp(44px,5.4vw,84px) * var(--sec-scale,1))}
.hp-sec--first{padding-top:calc(clamp(32px,4vw,64px) * var(--sec-scale,1))}
.hp-tools{display:flex;align-items:center;justify-content:flex-end;gap:20px;flex-wrap:wrap}

/* shared image plate — the figure only renders when a real image exists */
.hp-image{position:relative;background:var(--stone);overflow:hidden;min-height:420px}
.hp-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.hp-image__tag{position:absolute;left:0;bottom:0;z-index:2;background:var(--cobalt);color:var(--paper);padding:6px 12px;font:600 12px/16px var(--mono);letter-spacing:.16em;text-transform:uppercase}

/* hero */
.hp-hero{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:20px;align-items:end;width:100%;max-width:var(--max);margin-inline:auto;padding:clamp(40px,6vw,96px) var(--mar) clamp(24px,3vw,48px)}
.hp-hero__text{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.hp-hero__text .display{margin-top:6px}
.hp-hero .display{font-size:clamp(2.6rem,4.4vw,4.75rem)}
.hp-hero .hp-image{min-height:min(70vh,640px)}
.hp-stats{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:auto;padding-top:20px;font:500 12px/16px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--quiet)}
.hp-stats span+span::before{content:"·";margin-right:24px;color:var(--cobalt)}

/* departments: three large plates, the whole garment stays in frame */
.hp-depts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--gut)}
.hp-dept{display:flex;flex-direction:column;background:var(--low);color:var(--ink);transition:background .25s,color .25s}
.hp-dept__image{position:relative;display:block;aspect-ratio:4/5;background:var(--plate);overflow:hidden}
.hp-dept__image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;mix-blend-mode:multiply;transition:transform .6s var(--ease)}
.hp-dept:hover .hp-dept__image img,.hp-dept:focus-visible .hp-dept__image img{transform:scale(1.03)}
.hp-dept__name{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px var(--gut) 18px;font:800 clamp(1.1rem,1.4vw,1.5rem)/1 var(--display);font-stretch:120%;text-transform:uppercase}
.hp-dept__name .label{margin-top:8px;color:var(--quiet);font-stretch:100%}
.hp-dept:hover,.hp-dept:focus-visible{background:var(--ink);color:var(--paper)}
.hp-dept:hover .label,.hp-dept:focus-visible .label{color:var(--stone)}

/* new arrivals */
/* every rail shows whole cards only: exactly 4 per view (3 on tablets, 2 on phones), none of the next one peeking in */
.hp-new{}

/* designers: every plate is the same 1:1 square. The logo sits in the middle in ink; a designer without a logo file gets its name set in the display face */
/* how many plates per view is set in the Customizer (Layout · home page); inline --n-d / --n-t / --n-m */

.hp-name{display:block;background:var(--low);color:var(--ink);transition:background .25s,color .25s}
.hp-name__plate{display:grid;place-items:center;aspect-ratio:1/1;padding:10%}
.hp-name__plate img{display:block;width:100%;max-height:100%;object-fit:contain;transition:filter .25s}
.hp-name__word{font:800 clamp(.72rem,.95vw,1rem)/1.1 var(--display);font-stretch:110%;letter-spacing:.02em;text-transform:uppercase;text-align:center;text-wrap:balance;overflow-wrap:normal;hyphens:none}
.hp-name:hover,.hp-name:focus-visible{background:var(--ink);color:var(--paper)}
.hp-name:hover .hp-name__plate img,.hp-name:focus-visible .hp-name__plate img{filter:invert(1)}

/* hero slider: a full-width background photograph with a dark gradient on the side that carries the words. Slides cross-fade; nothing moves unless the visitor allows it (hero.js). */
.hp-slider{position:relative;display:grid;min-height:clamp(540px,84vh,800px);background:var(--ink);color:var(--paper);overflow:hidden;isolation:isolate}
/* every slide sits in the same grid cell, so the slider is as tall as its tallest slide and long text can never run into the controls */
.hp-slider__track{grid-area:1/1;display:grid;touch-action:pan-y;cursor:grab;user-select:none}
.hp-slider__track.is-dragging{cursor:grabbing}
.hp-slide{grid-area:1/1;position:relative;display:grid;align-items:center;opacity:0;visibility:hidden;transition:opacity .9s var(--ease),visibility .9s}
.hp-slide.is-active{opacity:1;visibility:visible;z-index:1}
.hp-slide__bg{position:absolute;inset:0}
/* --scrim is the veil strength of the slide (0-1, set in the Customizer); the same shapes serve light and dark tone */
.hp-slide{--veil:14,14,14}
.hp-slide--dark{--veil:255,255,255}
.hp-slide__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--veil),var(--scrim,.8)) 0%,rgba(var(--veil),calc(var(--scrim,.8) * .75)) 40%,rgba(var(--veil),0) 80%)}
.hp-slide--right .hp-slide__bg::after{background:linear-gradient(270deg,rgba(var(--veil),var(--scrim,.8)) 0%,rgba(var(--veil),calc(var(--scrim,.8) * .75)) 40%,rgba(var(--veil),0) 80%)}
.hp-slide--center .hp-slide__bg::after{background:rgba(var(--veil),calc(var(--scrim,.8) * .7))}
.hp-slide--v-top{align-items:start}.hp-slide--v-bottom{align-items:end}
.hp-slide--center .hp-slide__body{justify-content:center;text-align:center}
.hp-slide--center .hp-slide__copy{align-items:center}
.hp-slide--center .lead{margin-inline:auto}
/* dark tone: ink words on a light veil */
.hp-slide--dark .label,.hp-slide--dark .display{color:var(--ink)}
.hp-slide--dark .lead{color:var(--mute)}
.hp-slide--dark .btn{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.hp-slide--dark .btn:hover{background:var(--cobalt);border-color:var(--cobalt)}
.hp-slide--dark :focus-visible{outline-color:var(--cobalt)}
/* turning effects (Customizer: Hero · layout and style). --dir is 1 going forward and -1 going back (hero.js); the slide that leaves carries .is-leaving. Default is the cross-fade above. */
.hp-slider--fx-slide .hp-slide,.hp-slider--fx-rise .hp-slide{opacity:1;transition:transform .85s var(--ease),visibility .85s}
.hp-slider--fx-slide .hp-slide{transform:translateX(calc(var(--dir,1) * 100%))}
.hp-slider--fx-rise .hp-slide{transform:translateY(calc(var(--dir,1) * 100%))}
.hp-slider--fx-slide .hp-slide.is-active,.hp-slider--fx-rise .hp-slide.is-active{transform:none}
.hp-slider--fx-slide .hp-slide.is-leaving{transform:translateX(calc(var(--dir,1) * -100%));visibility:visible}
.hp-slider--fx-rise .hp-slide.is-leaving{transform:translateY(calc(var(--dir,1) * -100%));visibility:visible}
.hp-slider--fx-zoom .hp-slide{transform:scale(1.14);transition:opacity .9s var(--ease),transform 1.2s var(--ease),visibility .9s}
.hp-slider--fx-zoom .hp-slide.is-active{transform:none}
.hp-slider--fx-wipe .hp-slide{opacity:1;clip-path:inset(0 0 0 100%);transition:clip-path .95s var(--ease),visibility .95s}
.hp-slider--fx-wipe[data-dir="-1"] .hp-slide{clip-path:inset(0 100% 0 0)}
.hp-slider--fx-wipe .hp-slide.is-active,.hp-slider--fx-wipe .hp-slide.is-leaving{clip-path:inset(0 0 0 0)}
.hp-slider--fx-wipe .hp-slide.is-leaving{visibility:visible}
/* whole-slider style (Customizer: Hero · layout and style) */
.hp-slider--h-compact{min-height:clamp(420px,62vh,600px)}
.hp-slider--h-tall{min-height:clamp(560px,100svh,980px)}
.hp-slider--t-s .hp-slide .display{font-size:clamp(1.9rem,3.2vw,3.2rem)}
.hp-slider--t-l .hp-slide .display{font-size:clamp(2.8rem,5.6vw,6rem)}
.hp-slider--w-narrow .hp-slide__copy{max-width:min(480px,100%)}
.hp-slider--w-wide .hp-slide__copy{max-width:min(960px,100%)}
.hp-slider--btn-outline .hp-slide .btn{background:transparent;color:var(--paper);border-color:var(--paper)}
.hp-slider--btn-outline .hp-slide .btn:hover{background:var(--paper);color:var(--ink)}
.hp-slider--btn-outline .hp-slide--dark .btn{background:transparent;color:var(--ink);border-color:var(--ink)}
.hp-slider--btn-outline .hp-slide--dark .btn:hover{background:var(--ink);color:var(--paper)}
.hp-slide__img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) var(--fy,50%);transform:scale(var(--zoom,1));transform-origin:var(--fx,50%) var(--fy,50%);transition:transform 9s linear}
.hp-slide.is-active .hp-slide__img{transform:scale(calc(var(--zoom,1) * 1.06))}
.hp-slide__body{position:relative;z-index:1;display:flex;width:100%;padding-block:clamp(32px,4vw,64px) clamp(88px,8vw,112px)}
.hp-slide--right .hp-slide__body{justify-content:flex-end}
.hp-slide__copy{display:flex;flex-direction:column;align-items:flex-start;gap:20px;max-width:min(720px,100%)}
.hp-slide .label{color:var(--paper)}
.hp-slide .display{font-size:clamp(2.4rem,4.2vw,4.4rem);font-stretch:108%;color:var(--paper)}
.hp-slide .lead{color:rgba(255,255,255,.94);max-width:44ch}
.hp-slide .btn{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.hp-slide .btn:hover{background:var(--cobalt);border-color:var(--cobalt);color:var(--paper)}
.hp-slider :focus-visible{outline-color:var(--paper)}
.hp-slider__ui{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;gap:20px;padding-block:18px}
.hp-slider__steps{display:flex;gap:10px;flex:1 1 auto;max-width:420px}
.hp-slider__step{flex:1;height:44px;display:grid;align-items:center;cursor:pointer}
.hp-slider__step span{position:relative;display:block;height:2px;background:rgba(255,255,255,.4);overflow:hidden}
.hp-slider__step span::after{content:"";position:absolute;inset:0;background:var(--paper);transform:scaleX(0);transform-origin:left}
.hp-slider__step.is-active span::after{transform:scaleX(1)}
.hp-slider.is-playing .hp-slider__step.is-active span::after{transform:scaleX(0);animation:hp-fill var(--slide-ms,7000ms) linear forwards}
@keyframes hp-fill{to{transform:scaleX(1)}}
.hp-slider__count{margin-left:auto;color:var(--paper)}
.hp-slider__nav{display:flex;gap:10px;align-items:center}
.hp-slider__btn{display:grid;place-items:center;width:44px;height:44px;border:var(--hair) solid var(--paper);color:var(--paper);transition:background .2s,color .2s}
.hp-slider__btn:hover{background:var(--paper);color:var(--ink)}
.hp-slider__pause{min-height:44px;padding:0 14px;color:var(--paper);border:var(--hair) solid rgba(255,255,255,.6);transition:background .2s,color .2s}
.hp-slider__pause:hover{background:var(--paper);color:var(--ink)}

@media (max-width:1180px){
  .hp-hero{grid-template-columns:1fr;padding-top:clamp(32px,5vw,64px)}
  .hp-hero .hp-image{order:-1;min-height:clamp(360px,58vh,520px)}
  .hp-stats{margin-top:8px}
}
@media (max-width:760px){
  /* on a phone the headline and the first button come before the photograph, so they land in the first screen */
  .hp-hero{padding-top:28px;gap:20px}
  .hp-hero .hp-image{order:0;min-height:clamp(260px,64vw,380px)}
  .hp-hero .display{font-size:clamp(2.4rem,11vw,3.2rem)}
  .hp-hero .lead{font-size:16px;line-height:24px}
  /* slider on a phone: the words sit at the foot of the photograph, under a gradient that rises from the bottom */
  .hp-slider{min-height:clamp(560px,88svh,680px)}
  .hp-slide{align-items:end}
  .hp-slide__bg::after,.hp-slide--right .hp-slide__bg::after,.hp-slide--center .hp-slide__bg::after{background:linear-gradient(0deg,rgba(var(--veil),calc(var(--scrim,.8) * 1.12)) 0%,rgba(var(--veil),calc(var(--scrim,.8) * .82)) 55%,rgba(var(--veil),calc(var(--scrim,.8) * .15)) 100%)}
  .hp-slider--h-compact{min-height:clamp(440px,70svh,560px)}
  .hp-slide--right .hp-slide__body{justify-content:flex-start}
  .hp-slide__body{padding-block:48px 112px}
  .hp-slide .display{font-size:clamp(2.2rem,10vw,3rem)}
  .hp-slide .lead{font-size:16px;line-height:24px}
  .hp-slider__ui{gap:10px}
  .hp-slider__count{display:none}
  .hp-slider__steps{margin-right:auto}
  .hp-sec{padding-block:clamp(40px,10vw,64px)}
  .hp-sec--first{padding-top:clamp(28px,8vw,48px)}
  /* section heads: the link on the left, the arrows on the right, no counter */
  .hp-tools{width:100%;justify-content:space-between;gap:10px}
  .hp-tools .rail__count{display:none}
  /* the three departments scroll sideways like the other rails, so the section stays short on a phone */
  .hp-depts{display:flex;gap:var(--gut);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(var(--mar) * -1);padding-inline:var(--mar)}
  .hp-depts::-webkit-scrollbar{display:none}
  .hp-dept{flex:0 0 min(74vw,320px);scroll-snap-align:start}
  .hp-stats{gap:10px 15px}
  .hp-stats span+span::before{margin-right:16px}
}

/* departments: tiles per row on each screen (Customizer) */
.hp-depts.hp-depts--var{grid-template-columns:repeat(var(--n-d,3),minmax(0,1fr))}
@media (max-width:1180px){.hp-depts.hp-depts--var{grid-template-columns:repeat(var(--n-t,3),minmax(0,1fr))}}
@media (max-width:760px){.hp-depts.hp-depts--var{display:flex}.hp-depts--var>.hp-dept{flex:0 0 calc((100% - (var(--n-m,1) - 1) * var(--gut)) / var(--n-m,1))}}

/* phone hero controls: swiping replaces the arrows, so the row is the progress bars, the count and Pause */
@media (max-width:760px){
  .hp-slider__ui{gap:15px;padding-block:10px}
  .hp-slider__steps{flex:1 1 auto;max-width:none;margin-right:0}
  .hp-slider__count{display:block;margin:0;font-size:11px;white-space:nowrap}
  .hp-slider__btn{display:none}
  .hp-slider__pause{min-height:36px;padding:0 10px;font-size:10px;border-color:rgba(255,255,255,.4)}
}
/* Pause / Play as icons: both are in the button, aria-pressed (set by hero.js) decides which one shows */
.hp-slider__pause{display:grid;place-items:center;width:44px;min-height:44px;padding:0}
.hp-slider__pause .icon{grid-area:1/1}
.hp-slider__pause[aria-pressed=false] .icon:last-child,.hp-slider__pause[aria-pressed=true] .icon:first-child{display:none}
@media (max-width:760px){.hp-slider__pause{width:36px;min-height:36px;padding:0}}