/* ---------- HERO: the parent of [data-hero-text] is the hero grid ---------- */
html[data-l-hero] [data-sec=hero] [data-hero-media] img{max-height:none}
html[data-l-hero=split] [data-sec=hero] :has(> [data-hero-text]),
html[data-l-hero=split-left] [data-sec=hero] :has(> [data-hero-text]){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
html[data-l-hero=split] [data-sec=hero] [data-hero-media],
html[data-l-hero=split-left] [data-sec=hero] [data-hero-media]{width:100%;justify-self:stretch}
html[data-l-hero=split] [data-sec=hero] [data-hero-media] img,
html[data-l-hero=split-left] [data-sec=hero] [data-hero-media] img{width:100%;aspect-ratio:4/5;border-radius:var(--r-card);object-fit:cover}
html[data-l-hero=split-left] [data-sec=hero] [data-hero-media]{order:-1}

html[data-l-hero=full] [data-sec=hero]{position:relative;isolation:isolate;padding-block:clamp(4rem,11vw,10rem);background:var(--ink)}
html[data-l-hero=full] [data-sec=hero] :has(> [data-hero-text]){display:block}
html[data-l-hero=full] [data-sec=hero] [data-hero-media]{position:absolute;inset:0;z-index:-1;width:auto;max-width:none;margin:0}
html[data-l-hero=full] [data-sec=hero] [data-hero-media] img{width:100%;height:100%;aspect-ratio:auto;border-radius:0;box-shadow:none;object-fit:cover}
html[data-l-hero=full] [data-sec=hero] [data-hero-media] > :not(img){display:none}
html[data-l-hero=full] [data-sec=hero] [data-hero-text]{max-width:min(560px,100%);padding:clamp(20px,3vw,40px);border-radius:var(--r-card);background:color-mix(in srgb,var(--bg) 92%,transparent);box-shadow:0 20px 50px -20px rgb(0 0 0/.35)}

html[data-l-hero=centered] [data-sec=hero] :has(> [data-hero-text]){display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:clamp(24px,4vw,48px)}
html[data-l-hero=centered] [data-sec=hero] [data-hero-text]{max-width:780px;justify-items:center}
html[data-l-hero=centered] [data-sec=hero] [data-hero-text] > *{margin-inline:auto}
html[data-l-hero=centered] [data-sec=hero] [data-hero-text] :is(.heroacts,[class*=act]){justify-content:center}
html[data-l-hero=centered] [data-sec=hero] [data-hero-media]{width:100%;max-width:1120px}
html[data-l-hero=centered] [data-sec=hero] [data-hero-media] img{width:100%;aspect-ratio:21/9;border-radius:var(--r-card);object-fit:cover}

html[data-l-hero=compact] [data-sec=hero]{padding-block:clamp(2rem,4vw,3.5rem)}
html[data-l-hero=compact] [data-sec=hero] :has(> [data-hero-text]){display:grid;grid-template-columns:minmax(0,1fr) clamp(160px,22vw,260px);gap:clamp(20px,4vw,56px);align-items:center}
html[data-l-hero=compact] [data-sec=hero] [data-hero-media]{width:100%}
html[data-l-hero=compact] [data-sec=hero] [data-hero-media] img{width:100%;aspect-ratio:1;border-radius:50%;object-fit:cover}
html[data-l-hero=compact] [data-sec=hero] [data-hero-media] > :not(img){display:none}

@media (max-width:760px){
  html[data-l-hero] [data-sec=hero] :has(> [data-hero-text]){grid-template-columns:minmax(0,1fr)}
  html[data-l-hero=split-left] [data-sec=hero] [data-hero-media]{order:0}
  html[data-l-hero=compact] [data-sec=hero] [data-hero-media]{width:40%;justify-self:start}
  html[data-l-hero=centered] [data-sec=hero] [data-hero-media] img{aspect-ratio:4/3}
}

/* ---------- LIST: the page's main collection ---------- */
html[data-l-list=cards3] [data-list]{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(20px,3vw,40px)}
html[data-l-list=big2] [data-list]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
html[data-l-list=big2] [data-item-media]{aspect-ratio:4/3}
html[data-l-list=rows] [data-list]{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
html[data-l-list=rows] [data-item]{display:grid;grid-template-columns:clamp(110px,18vw,200px) minmax(0,1fr);column-gap:clamp(16px,3vw,32px);row-gap:6px;align-content:start;padding-block:clamp(16px,2vw,24px);border-bottom:1px solid var(--line)}
html[data-l-list=rows] [data-item] > [data-item-media]{grid-row:1 / span 8;aspect-ratio:1;align-self:start}
html[data-l-list=rows] [data-item] > :not([data-item-media]){grid-column:2}
html[data-l-list=bento] [data-list]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
html[data-l-list=bento] [data-item]:first-child{grid-column:span 2;grid-row:span 2}
html[data-l-list=bento] [data-item]:first-child [data-item-media]{aspect-ratio:1}
html[data-l-list=masonry] [data-list]{display:block;columns:3 260px;column-gap:clamp(16px,2.5vw,32px)}
html[data-l-list=masonry] [data-item]{break-inside:avoid;margin-bottom:clamp(20px,3vw,36px)}
html[data-l-list=masonry] [data-item]:nth-child(3n+1) [data-item-media]{aspect-ratio:3/4}
html[data-l-list=masonry] [data-item]:nth-child(3n+2) [data-item-media]{aspect-ratio:1}
html[data-l-list=masonry] [data-item]:nth-child(3n) [data-item-media]{aspect-ratio:4/5}
@media (max-width:900px){html[data-l-list=bento] [data-list]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){
  html[data-l-list=cards3] [data-list],html[data-l-list=big2] [data-list],html[data-l-list=bento] [data-list]{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5) var(--s-3)}
  html[data-l-list=bento] [data-item]:first-child{grid-row:auto}
  html[data-l-list=masonry] [data-list]{columns:2}
}

/* ---------- NAV ---------- */
html[data-l-nav] [data-sec=nav]{height:auto}
html[data-l-nav=centered] [data-sec=nav] > *{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;row-gap:10px;column-gap:16px;padding-block:14px;min-height:0}
html[data-l-nav=centered] [data-sec=nav] > * > :first-child{grid-column:2;grid-row:1;font-size:1.15em;justify-self:center}
html[data-l-nav=centered] [data-sec=nav] > * > :last-child:not(:first-child){grid-column:3;grid-row:1;justify-self:end}
html[data-l-nav=centered] [data-sec=nav] > * > :not(:first-child):not(:last-child){grid-column:1 / -1;grid-row:2;justify-self:center}
html[data-l-nav=pill] [data-sec=nav]{position:sticky;top:10px;z-index:30;background:transparent;border:0;box-shadow:none;padding-inline:12px}
html[data-l-nav=pill] [data-sec=nav] > *{max-width:min(1120px,100%);margin-inline:auto;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 10px 8px 22px;box-shadow:0 12px 30px -18px rgb(0 0 0/.35)}
@media (max-width:760px){html[data-l-nav=pill] [data-sec=nav] > *{border-radius:22px}}

/* ---------- RHYTHM: how sections follow each other ---------- */
html[data-l-rhythm=banded] [data-main] > section:not([data-sec=hero]):nth-of-type(even){background:var(--sunk-0,var(--sunk))}
html[data-l-rhythm=banded] [data-main] > section:not([data-sec=hero]):nth-of-type(odd){background:var(--bg)}
html[data-l-rhythm=divided] [data-main] > section:not([data-sec=hero]){background:var(--bg);border-block:0}
html[data-l-rhythm=divided] [data-main] > section + section{border-top:1px solid var(--line)}
html[data-l-rhythm=airy] [data-main] > section:not([data-sec=hero]){padding-block:clamp(4.5rem,9vw,8.5rem)}
html[data-l-rhythm=cards] [data-main] > section:not([data-sec=hero]){margin:clamp(10px,2vw,24px) clamp(10px,2vw,24px) 0;border:1px solid var(--line);border-radius:clamp(18px,2.5vw,32px);background:var(--surface)}

/* ---------- ORDER: CSS order on main's sections (never a DOM move) ---------- */
html[data-l-order] [data-main]{display:flex;flex-direction:column}
html[data-l-order] [data-main] > [data-sec=hero]{order:0}
html[data-l-order=o2] [data-main] > [data-sec=list]{order:1}  html[data-l-order=o2] [data-main] > [data-sec=story]{order:2}  html[data-l-order=o2] [data-main] > [data-sec=feature]{order:3}  html[data-l-order=o2] [data-main] > [data-sec=stats]{order:4}  html[data-l-order=o2] [data-main] > [data-sec=proof]{order:5}  html[data-l-order=o2] [data-main] > [data-sec=cta]{order:6}
html[data-l-order=o3] [data-main] > [data-sec=feature]{order:1} html[data-l-order=o3] [data-main] > [data-sec=list]{order:2}  html[data-l-order=o3] [data-main] > [data-sec=stats]{order:3}  html[data-l-order=o3] [data-main] > [data-sec=story]{order:4}  html[data-l-order=o3] [data-main] > [data-sec=proof]{order:5}  html[data-l-order=o3] [data-main] > [data-sec=cta]{order:6}
html[data-l-order=o4] [data-main] > [data-sec=stats]{order:1}   html[data-l-order=o4] [data-main] > [data-sec=list]{order:2}  html[data-l-order=o4] [data-main] > [data-sec=feature]{order:3} html[data-l-order=o4] [data-main] > [data-sec=story]{order:4}  html[data-l-order=o4] [data-main] > [data-sec=proof]{order:5}  html[data-l-order=o4] [data-main] > [data-sec=cta]{order:6}
html[data-l-order] [data-main] > [data-sec=other]{order:7}

/* buttons: pill (kit default) | rounded | square */
html[data-l-btn=rounded] .btn{border-radius:10px}
html[data-l-btn=square] .btn{border-radius:2px;text-transform:uppercase;letter-spacing:.09em;font-size:.78rem;font-weight:600}
/* heading accent (the <em> in h1/h2): italic (default) | underline | colour | plain */
html[data-l-head=underline] :is(h1,h2) em{font-style:normal;text-decoration:underline;text-decoration-thickness:.07em;text-underline-offset:.14em;text-decoration-color:var(--accent);color:inherit}
html[data-l-head=colour] :is(h1,h2) em{font-style:normal;color:var(--accent)}
html[data-l-head=plain] :is(h1,h2) em{font-style:normal;color:inherit}
html[data-l-head=caps] :is(h1,h2){text-transform:uppercase;letter-spacing:.015em;line-height:1.02}
html[data-l-head=caps] h1{font-size:clamp(2rem,1.2rem + 3vw,3.6rem)}
html[data-l-head=caps] :is(h1,h2) em{font-style:normal;color:var(--accent)}
/* the announce bar [data-announce]: top (default) | none | accent */
html[data-l-bar=none] [data-announce]{display:none}
html[data-l-bar=accent] [data-announce]{background:var(--accent);color:var(--on-accent)}
/* section heads [data-sec-head]: centered (default) | left | number */
html[data-l-sechead=left] [data-sec-head]{justify-items:start;text-align:left;padding-bottom:var(--s-4);border-bottom:1px solid var(--line)}
html[data-l-sechead=number] [data-main]{counter-reset:tsec}
html[data-l-sechead=number] [data-sec-head]{justify-items:start;text-align:left}
html[data-l-sechead=number] [data-sec-head]::before{counter-increment:tsec;content:counter(tsec,decimal-leading-zero);font:600 .85rem/1 var(--sans);letter-spacing:.12em;color:var(--accent);padding-bottom:6px;border-bottom:2px solid var(--accent);margin-bottom:4px}
/* list item cards [data-item]: kit default | hairline | shadow | flat */
html[data-l-card=hairline] [data-item]{border:1px solid var(--line);border-radius:var(--r-card);padding:12px}
html[data-l-card=shadow] [data-item]{background:var(--surface);border-radius:var(--r-card);padding:12px;box-shadow:0 14px 34px -22px rgb(0 0 0/.4)}
html[data-l-card=flat] [data-item]{background:var(--sunk-0,var(--sunk));border-radius:6px;padding:12px}
/* nav: + split (links left, brand centre, actions right) | minimal (brand + actions only) */
html[data-l-nav=split] [data-sec=nav] > *{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px;min-height:0;padding-block:12px}
html[data-l-nav=split] [data-sec=nav] > * > :first-child{grid-column:2;grid-row:1;justify-self:center}
html[data-l-nav=split] [data-sec=nav] > * > :not(:first-child):not(:last-child){grid-column:1;grid-row:1;justify-self:start}
html[data-l-nav=split] [data-sec=nav] > * > :last-child:not(:first-child){grid-column:3;grid-row:1;justify-self:end}
html[data-l-nav=minimal] [data-sec=nav] > * > :not(:first-child):not(:last-child){display:none}
html[data-l-nav=minimal] [data-sec=nav]{border-bottom-color:transparent}

html[data-l-fs] [data-main]{display:flex;flex-direction:column}
html[data-l-fs] [data-main] > section{order:5}
html[data-l-fs] [data-main] > [data-sec=hero]{order:0}

/* 2 overlay: one full-bleed photo, the text in a panel on it */
html[data-l-fs=overlay] [data-sec=hero]{position:relative;isolation:isolate;min-height:min(86vh,820px);display:grid;align-items:end;padding-block:clamp(3rem,8vw,6rem);background:var(--ink)}
html[data-l-fs=overlay] [data-sec=hero] :has(> [data-hero-text]){display:block}
html[data-l-fs=overlay] [data-sec=hero] [data-hero-media]{position:absolute;inset:0;z-index:-1;width:auto;max-width:none;margin:0}
html[data-l-fs=overlay] [data-sec=hero] [data-hero-media] img{width:100%;height:100%;aspect-ratio:auto;border-radius:0;box-shadow:none;object-fit:cover;max-height:none}
html[data-l-fs=overlay] [data-sec=hero] [data-hero-media] > :not(img){display:none}
html[data-l-fs=overlay] [data-sec=hero] [data-hero-text]{max-width:min(600px,100%);padding:clamp(20px,3vw,40px);border-radius:var(--r-card);background:color-mix(in srgb,var(--bg) 93%,transparent)}

/* 3 catalogue: no hero picture; a one-line title band, then the shop with a filter rail on the left */
html[data-l-fs=catalogue] [data-sec=hero]{padding-block:clamp(1.5rem,3vw,2.5rem);background:var(--sunk-0,var(--sunk));border-bottom:1px solid var(--line)}
html[data-l-fs=catalogue] [data-sec=hero] [data-hero-media]{display:none}
html[data-l-fs=catalogue] [data-sec=hero] :has(> [data-hero-text]){display:block}
html[data-l-fs=catalogue] [data-sec=hero] [data-hero-text]{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px 32px}
html[data-l-fs=catalogue] [data-sec=hero] [data-hero-text] h1{font-size:clamp(1.8rem,1.2rem + 1.8vw,2.6rem);margin:0}
html[data-l-fs=catalogue] [data-sec=hero] [data-hero-text] > :not(h1):not(:has(.btn)){grid-column:1}
html[data-l-fs=catalogue] [data-sec=hero] [data-hero-text] > :has(.btn){grid-column:2;grid-row:1 / span 3;align-self:center}
html[data-l-fs=catalogue] [data-main] > [data-sec=list]{order:1;padding-top:clamp(1.5rem,3vw,2.5rem)}
html[data-l-fs=catalogue] [data-sec=list] [data-sec-head]{justify-items:start;text-align:left;margin-bottom:var(--s-5)}
@media (min-width:960px){
  html[data-l-fs=catalogue] [data-sec=list] :has(> [data-filters]){display:grid;grid-template-columns:230px minmax(0,1fr);column-gap:clamp(24px,3vw,48px);align-items:start}
  html[data-l-fs=catalogue] [data-sec=list] :has(> [data-filters]) > *{grid-column:2}
  html[data-l-fs=catalogue] [data-sec=list] :has(> [data-filters]) > [data-sec-head]{grid-column:1 / -1}
  html[data-l-fs=catalogue] [data-sec=list] :has(> [data-filters]) > [data-filters]{grid-column:1;grid-row:2 / span 6;position:sticky;top:16px;display:grid;gap:14px;padding:18px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface)}
  html[data-l-fs=catalogue] [data-filters] > *{display:grid;justify-content:start;flex-wrap:wrap;gap:8px}
  html[data-l-fs=catalogue] [data-list]{grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))}
}

/* 4 type: no picture on the first screen; one very large headline, left, on a plain band */
html[data-l-fs=type] [data-sec=hero]{padding-block:clamp(4rem,10vw,8rem) clamp(2.5rem,6vw,4.5rem);background:var(--bg)}
html[data-l-fs=type] [data-sec=hero] [data-hero-media]{display:none}
html[data-l-fs=type] [data-sec=hero] :has(> [data-hero-text]){display:block}
html[data-l-fs=type] [data-sec=hero] [data-hero-text]{max-width:none}
html[data-l-fs=type] [data-sec=hero] h1{font-size:clamp(3rem,1.6rem + 6.2vw,7.2rem);line-height:.95;letter-spacing:-.025em;max-width:14ch}
html[data-l-fs=type] [data-sec=hero] [data-hero-text] > p{max-width:52ch;font-size:clamp(1.05rem,.95rem + .4vw,1.3rem)}
html[data-l-fs=type] [data-sec=hero]::after{content:"";display:block;width:min(1120px,calc(100% - 2*var(--gutter,24px)));margin:clamp(2rem,4vw,3rem) auto 0;border-top:1px solid var(--ink)}

/* 5 mosaic: four photos in a collage beside the text (variety.js fills [data-hero-media] with three more) */
html[data-l-fs=mosaic] [data-sec=hero] :has(> [data-hero-text]){display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:center}
html[data-l-fs=mosaic] [data-sec=hero] [data-hero-media]{width:100%;display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:1fr 1fr;gap:10px;height:clamp(360px,44vw,580px)}
html[data-l-fs=mosaic] [data-sec=hero] [data-hero-media] img{width:100%;height:100%;aspect-ratio:auto;border-radius:var(--r-card);object-fit:cover;box-shadow:none;max-height:none}
html[data-l-fs=mosaic] [data-sec=hero] [data-hero-media] > img:first-of-type{grid-row:1 / span 2}
html[data-l-fs=mosaic] [data-sec=hero] [data-hero-media] > :not(img){display:none}

/* 6 tiles: the collections / occasions grid IS the first screen, under a short centred line */
html[data-l-fs=tiles] [data-sec=hero]{padding-block:clamp(2rem,4vw,3rem) .5rem;text-align:center}
html[data-l-fs=tiles] [data-sec=hero] [data-hero-media]{display:none}
html[data-l-fs=tiles] [data-sec=hero] :has(> [data-hero-text]){display:block}
html[data-l-fs=tiles] [data-sec=hero] [data-hero-text]{max-width:760px;margin-inline:auto;justify-items:center}
html[data-l-fs=tiles] [data-sec=hero] [data-hero-text] > *{margin-inline:auto}
html[data-l-fs=tiles] [data-sec=hero] :is(.heroacts,[class*=act]){justify-content:center}
html[data-l-fs=tiles] [data-main] > [data-sec=feature]{order:1;padding-top:clamp(1rem,2vw,2rem)}
html[data-l-fs=tiles] [data-sec=feature] [data-sec-head]{display:none}

/* 7 block: a solid colour panel for the text, edge-to-edge photo, 50/50, full height */
html[data-l-fs=block] [data-sec=hero]{padding:0;background:var(--bg)}
html[data-l-fs=block] [data-sec=hero] :has(> [data-hero-text]){display:grid;grid-template-columns:1fr 1fr;gap:0;max-width:none;padding:0;min-height:min(84vh,780px)}
html[data-l-fs=block] [data-sec=hero] [data-hero-text]{background:var(--accent);color:var(--on-accent);padding:clamp(28px,6vw,88px);align-content:center}
html[data-l-fs=block] [data-sec=hero] [data-hero-text] :is(h1,h1 em,p){color:var(--on-accent)}
html[data-l-fs=block] [data-sec=hero] [data-hero-text] .btn-primary{background:var(--on-accent);color:var(--accent)}
html[data-l-fs=block] [data-sec=hero] [data-hero-text] .btn-secondary{border-color:var(--on-accent);color:var(--on-accent)}
html[data-l-fs=block] [data-sec=hero] [data-hero-media]{width:100%;height:100%;margin:0}
html[data-l-fs=block] [data-sec=hero] [data-hero-media] img{width:100%;height:100%;aspect-ratio:auto;border-radius:0;box-shadow:none;object-fit:cover;max-height:none}
html[data-l-fs=block] [data-sec=hero] [data-hero-media] > :not(img){display:none}

/* 8 sidebar: the nav becomes a left column for the whole page */
@media (min-width:960px){
  html[data-l-fs=sidebar] body{display:grid;grid-template-columns:250px minmax(0,1fr)}
  html[data-l-fs=sidebar] body > *{grid-column:2}
  html[data-l-fs=sidebar] [data-sec=nav]{grid-column:1;grid-row:1 / span 50;position:sticky;top:0;height:100vh;border-bottom:0;border-right:1px solid var(--line);background:var(--surface)}
  html[data-l-fs=sidebar] [data-sec=nav] > *{display:grid;align-content:start;justify-items:start;gap:28px;padding:32px 28px;height:100%;max-width:none}
  html[data-l-fs=sidebar] [data-sec=nav] > * > :not(:first-child):not(:last-child){display:grid;gap:14px}
  html[data-l-fs=sidebar] [data-sec=hero] :has(> [data-hero-text]){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  html[data-l-fs=sidebar] [data-sec=hero] [data-hero-media] img{border-radius:var(--r-card);aspect-ratio:4/5}
}

/* 9 story: the brand story (two photos + text) is the first screen; the hero text sits above it as a slim line */
html[data-l-fs=story] [data-sec=hero]{padding-block:clamp(1.5rem,3vw,2.5rem) 0}
html[data-l-fs=story] [data-sec=hero] [data-hero-media]{display:none}
html[data-l-fs=story] [data-sec=hero] :has(> [data-hero-text]){display:block}
html[data-l-fs=story] [data-sec=hero] [data-hero-text] h1{font-size:clamp(1.6rem,1.1rem + 1.6vw,2.4rem)}
html[data-l-fs=story] [data-sec=hero] [data-hero-text] > p:not(:first-child){display:none}
html[data-l-fs=story] [data-main] > [data-sec=story]{order:1;padding-top:clamp(1.5rem,3vw,2.5rem)}

/* 10 minimal: a big centred wordmark, one wide photo, the headline small at its foot */
html[data-l-fs=minimal] [data-sec=nav] > *{display:grid;justify-items:center;gap:10px;padding-block:28px 14px;min-height:0}
html[data-l-fs=minimal] [data-sec=nav]{height:auto;border-bottom:0}
html[data-l-fs=minimal] [data-sec=nav] > * > :first-child{font-size:clamp(2rem,1.4rem + 2.4vw,3.4rem)}
html[data-l-fs=minimal] [data-sec=hero]{padding-block:0 clamp(2rem,4vw,3rem)}
html[data-l-fs=minimal] [data-sec=hero] :has(> [data-hero-text]){display:grid;grid-template-columns:1fr;gap:20px}
html[data-l-fs=minimal] [data-sec=hero] [data-hero-media]{order:-1;width:100%;margin:0}
html[data-l-fs=minimal] [data-sec=hero] [data-hero-media] img{width:100%;aspect-ratio:21/9;border-radius:0;box-shadow:none;object-fit:cover;max-height:none}
html[data-l-fs=minimal] [data-sec=hero] [data-hero-media] > :not(img){display:none}
html[data-l-fs=minimal] [data-sec=hero] [data-hero-text]{display:grid;justify-items:center;text-align:center;gap:12px;max-width:720px;margin-inline:auto}
html[data-l-fs=minimal] [data-sec=hero] [data-hero-text] :is(.heroacts,[class*=act]){justify-content:center}
html[data-l-fs=minimal] [data-sec=nav] > * > :last-child:not(:first-child){position:absolute;right:var(--gutter,24px);top:22px}
html[data-l-fs=minimal] [data-sec=nav] > *{position:relative}
html[data-l-fs=minimal] [data-sec=hero] [data-hero-text] h1{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.4rem)}

@media (max-width:760px){
  html[data-l-fs] [data-sec=hero] :has(> [data-hero-text]){grid-template-columns:minmax(0,1fr)}
  html[data-l-fs=mosaic] [data-sec=hero] [data-hero-media]{height:clamp(260px,80vw,420px)}
  html[data-l-fs=block] [data-sec=hero] [data-hero-media]{min-height:300px}
  html[data-l-fs=catalogue] [data-sec=hero] [data-hero-text]{grid-template-columns:minmax(0,1fr)}
  html[data-l-fs=catalogue] [data-sec=hero] [data-hero-text] > :has(.btn){grid-column:1;grid-row:auto}
}

html[data-l-type=sans] :is(h1,h2,h3){font-family:var(--sans);font-weight:700;letter-spacing:-.035em}
html[data-l-type=sans] :is(h1,h2) em{font-style:normal}
html[data-l-type=mono] :is(h1,h2,h3){font-family:var(--mono);font-weight:600;letter-spacing:-.02em}
html[data-l-type=mono] h1{font-size:clamp(2rem,1.3rem + 2.6vw,3.6rem)}
html[data-l-type=mono] :is(.eyebrow,[data-sec-head] > p:first-child){font-family:var(--mono);letter-spacing:.06em}
html[data-l-type=mono] :is(h1,h2) em{font-style:normal;text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.12em}
html[data-l-fs=minimal] [data-sec=nav] > * > :first-child,html[data-l-fs=minimal] [data-sec=nav] > * > :not(:first-child):not(:last-child){justify-self:center;justify-content:center;text-align:center}
html[data-theme=dark][data-l-fs] [data-sec=hero]{background:var(--bg)}