/* Four public chapters. Native document scroll owns all chapter transitions. */
:root { --paper:#f8f7f3; --ink:#242521; --muted:#6d6c65; --line:#cbc7be; --gutter:clamp(24px,5vw,96px); --public-header-height:90px; --scrollbar-thumb:#8b877e; --scrollbar-thumb-hover:#625f58; --scrollbar-track:transparent; }
* { box-sizing:border-box; }
html { background:var(--paper); scroll-behavior:auto; scroll-padding-top:90px; }
body.fashion { margin:0; color:var(--ink); background:var(--paper); font:400 clamp(1rem,1.15vw,1.15rem)/1.8 'Tajawal',sans-serif; }
body.fashion :is(h1,h2,h3) { margin:0; font-weight:300; line-height:1.25; text-wrap:balance; }
:where(body.fashion) :is(p,figure) { margin:0; }
body.fashion a { color:inherit; text-decoration:none; }
body.fashion a:hover { text-decoration:underline; text-underline-offset:.3em; }
body.fashion :is(button,input,textarea) { font:inherit; }
body.fashion :where(a,button,summary,input,select,textarea,[tabindex]) { -webkit-tap-highlight-color:transparent; }
body.fashion :focus:not(:focus-visible) { outline:none; }
body.fashion :focus-visible { outline:2px solid transparent; outline-offset:5px; box-shadow:0 2px 0 currentColor; }
:where(body.fashion) img { display:block; width:100%; height:100%; object-fit:contain; }
#main-content { outline:0; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.fashion-skip { position:fixed; z-index:150; top:16px; inset-inline-start:var(--gutter); background:var(--paper); padding:12px; transform:translateY(-200%); }
.fashion-skip:focus { transform:none; }
.fashion-header { position:fixed; z-index:120; inset:0 0 auto; height:var(--public-header-height); padding-inline:var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:24px; color:var(--ink); }
.fashion-header::before { content:''; position:absolute; z-index:-1; inset:0 0 auto; height:clamp(160px,20vh,235px); background:linear-gradient(180deg,rgb(248 247 243 / 98%) 0%,rgb(248 247 243 / 94%) 28%,rgb(248 247 243 / 66%) 55%,rgb(248 247 243 / 22%) 78%,transparent 100%); pointer-events:none; }
.fashion-brand { flex-shrink:0; display:block; width:52px; height:52px; }
.fashion-brand-mark { position:relative; display:block; height:100%; }
.fashion-brand-mark img { position:absolute; inset:0; }
.fashion-header .brand-light { display:none; }
.fashion-nav { display:flex; gap:clamp(20px,2.4vw,40px); font-size:.88rem; }
.fashion-header-actions,.fashion-language { display:flex; align-items:center; gap:10px; font:400 .75rem 'Tajawal',sans-serif; }
.fashion-header-actions { gap:24px; }
.language-link[aria-current=page] { border-bottom:1px solid; }
.fashion-menu-toggle { display:none; width:44px; height:44px; border:0; background:none; color:inherit; padding:12px 8px; }
.fashion-menu-toggle span { display:block; height:1px; margin-block:6px; background:currentColor; }
.chapter { position:relative; }
.chapter-stage { position:relative; min-height:100svh; background:var(--paper); isolation:isolate; }
.has-motion .chapter-stage:not(.collection-stage),.collection--radial .collection-stage { position:sticky; top:0; height:100svh; min-height:0; overflow:clip; }
.has-motion .arrival { height:145svh; }
.has-motion .designer { height:125svh; }
.has-motion .work { height:140svh; }
.arrival-stage { height:100svh; display:flex; align-items:center; justify-content:flex-end; padding:100px var(--gutter) 0; direction:ltr; overflow:clip; }
.hero-image { position:absolute; inset:0; }
.hero-image > picture { display:contents; }
.hero-image img { height:calc(100% + 24px); object-fit:cover; object-position:55% 0%; transform-origin:center; }
.arrival-stage::after { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(270deg,rgb(248 247 243 / 91%),rgb(248 247 243 / 60%) 24%,transparent 50%); }
.opening-logo { position:absolute; z-index:3; right:var(--gutter); top:120px; width:120px; height:120px; }
.arrival-copy { position:relative; z-index:2; width:30%; max-width:440px; }
html[dir=rtl] .arrival-copy { direction:rtl; }
.arrival-copy h1,.hero-thought { font-size:clamp(2.3rem,3.4vw,4.8rem); font-weight:300; line-height:1.25; }
.copy-state > p:not(.hero-thought) { margin-top:24px; color:#45463f; line-height:1.8; }
.has-motion .arrival-copy { height:250px; }
.has-motion .arrival-copy .copy-state { position:absolute; inset:0; }
.has-motion .arrival-copy .copy-state:not(:first-child) { visibility:hidden; }
html:not(.has-motion) .copy-state + .copy-state { margin-top:24px; }
.arrival-bottom { position:absolute; z-index:3; bottom:22px; inset-inline:var(--gutter); display:flex; justify-content:space-between; gap:16px; align-items:center; font-size:.75rem; }
.arrival-bottom > span { font:400 .58rem 'Tajawal',sans-serif; letter-spacing:.13em; }
.editorial-stage { padding:100px var(--gutter) 5svh; display:flex; align-items:center; overflow:clip; }
.ambient-image { position:absolute; inset:0; object-fit:cover; filter:blur(7px); opacity:.20; transform:scale(1.06); }
.editorial-stage::after { content:''; position:absolute; inset:0; z-index:0; background:linear-gradient(90deg,rgb(248 247 243 / 40%),rgb(248 247 243 / 86%) 66%); pointer-events:none; }
.editorial-composition { position:relative; z-index:1; width:100%; display:grid; grid-template-columns:52% 34%; justify-content:space-between; align-items:center; gap:5%; direction:ltr; }
.complete-image { height:70svh; max-height:1040px; min-width:0; }
.complete-image img { object-fit:contain; }
.editorial-copy { min-width:0; }
html[dir=rtl] .editorial-copy { direction:rtl; }
.chapter-marker { font-size:.73rem; margin-bottom:22px; color:var(--muted); }
html[lang=en] .chapter-marker { letter-spacing:.12em; }
.editorial-copy h2 { font-size:clamp(2rem,2.9vw,4.4rem); }
.editorial-body { font-size:clamp(1rem,1.15vw,1.2rem); line-height:1.9; margin-top:28px; }
.editorial-support { font-size:.9rem; color:var(--muted); margin-top:24px; }
.work .complete-image { height:72svh; }
.collection-stage { background:#ebe7e0; padding-top:120px; overflow:clip; }
.collection-heading { position:relative; z-index:110; max-width:660px; text-align:center; margin:0 auto; padding-inline:var(--gutter); }
.collection-heading h2 { font-size:clamp(2.1rem,3.4vw,4rem); }
.collection-heading p { margin-top:18px; font-size:.93rem; line-height:1.75; }
.radial-gallery { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; padding:48px var(--gutter); }
.radial-card { min-width:0; }
.radial-card img { object-fit:contain; height:55svh; }
.collection--radial .radial-gallery { position:absolute; inset:0; padding:0; display:block; overflow:clip; }
.collection--radial .radial-card { position:absolute; top:0; left:0; transform-origin:center; }
.collection--radial .radial-card img { width:100%; height:100%; }
.collection-swipe,.collection-controls { display:none; }
.collection-next { position:relative; display:block; width:max-content; max-width:100%; margin:0 auto 30px; z-index:110; }
.collection--radial .collection-next { position:absolute; bottom:18px; inset-inline:0; margin:auto; }
.editorial-link { border-bottom:1px solid; padding-block:6px; font-size:.85rem; }
.visit-closing { position:relative; background:var(--paper); display:grid; grid-template-columns:38% 52%; justify-content:space-between; gap:6%; padding:80px var(--gutter); }
.visit-intro h2 { font-size:clamp(2rem,3vw,3.6rem); }
.visit-intro > p:last-of-type { margin-top:24px; color:var(--muted); font-size:1rem; }
.location-heading { margin-top:44px; padding-top:28px; border-top:1px solid var(--line); scroll-margin-top:110px; }
.location-heading h3 { font-size:1.6rem; }
.location-details { margin-top:18px; font-size:.85rem; }
.location-city { display:none; }
.location-details address { font-style:normal; }
.location-links { display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:12px; overflow-wrap:anywhere; }
.visit-form-section { min-width:0; scroll-margin-top:110px; }
.visit-form-intro h3 { font-size:1.7rem; margin-bottom:12px; }
.visit-form-intro p { font-size:.93rem; }
.visit-form-intro small { display:block; font-size:.78rem; color:var(--muted); margin-block:12px 28px; }
.fashion-form-row { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.fashion-field { min-width:0; margin-bottom:28px; }
.fashion-field label { display:block; font-size:.85rem; margin-bottom:8px; }
.fashion-field :is(input,textarea) { display:block; width:100%; min-width:0; height:46px; background:transparent; border:0; border-bottom:1px solid #a49a8d; border-radius:0; padding:8px 0; color:var(--ink); }
.fashion-field :is(input,textarea):focus { border-color:var(--ink); }
.fashion-field textarea { height:auto; min-height:80px; resize:vertical; }
.fashion-field small { display:block; font-size:.74rem; color:var(--muted); margin-top:8px; }
.fashion-submit { display:flex; justify-content:space-between; align-items:center; width:100%; min-height:52px; gap:24px; border:0; border-bottom:1px solid var(--ink); background:none; color:var(--ink); cursor:pointer; padding:12px 0; }
.fashion-submit:hover { color:var(--muted); }
.fashion-form-fineprint { margin-top:18px; font-size:.75rem; color:var(--muted); }
.fashion-feedback { margin-bottom:24px; border-inline-start:2px solid; padding-inline-start:16px; }
.fashion-feedback--error { color:#8d3128; }
.fashion-feedback--success { color:#3e6049; }

.fashion-footer { position:relative; background:var(--ink); color:var(--paper); }
.closing-stage { padding:36px var(--gutter) 24px; display:grid; grid-template-columns:25% 1fr; gap:24px 8%; }
.closing-brand { display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.fashion-footer-brand { display:block; width:84px; aspect-ratio:1; }
.closing-brand > p { font-size:1.1rem; font-weight:300; }
.footer-columns { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:28px; }
.footer-column { display:flex; flex-direction:column; align-items:flex-start; gap:8px; font-size:.8rem; }
.footer-column h2 { font-size:.75rem; font-weight:400; color:#c4beb3; margin-bottom:8px; }
.footer-column p { color:#c4beb3; }
.fashion-footer-bottom { grid-column:1/-1; border-top:1px solid #504f48; padding-top:22px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:22px; font-size:.68rem; }
.fashion-team-link { color:#c4beb3; }
@media (min-width:768px) and (max-width:1100px) {
 .fashion-header::before { height:clamp(145px,15vh,195px); }
 .arrival-copy { width:40%; }
 .editorial-composition { grid-template-columns:51% 40%; gap:6%; }
 .complete-image,.work .complete-image { height:68svh; }
 .editorial-copy h2 { font-size:2.6rem; }
 .editorial-body { font-size:1.05rem; }
 .collection-heading { max-width:660px; }
}
@media (max-width:1100px), (hover:none) and (pointer:coarse) {
 .fashion-menu-toggle { display:block; }
 .fashion-nav { display:none; position:absolute; top:100%; inset-inline:0; padding:24px var(--gutter); flex-direction:column; gap:16px; background:var(--paper); font-size:1.15rem; max-height:calc(100svh - var(--public-header-height)); overflow:auto; }
 .fashion-nav.is-open { display:flex; }
 .fashion-header.menu-open { background:var(--paper); }
 .menu-open .fashion-menu-toggle span:first-child { transform:translateY(3.5px) rotate(45deg); }
 .menu-open .fashion-menu-toggle span:last-child { transform:translateY(-3.5px) rotate(-45deg); }
 .collection-stage { padding-block:calc(var(--public-header-height) + 24px) 24px; }
 .collection-swipe { display:block; color:var(--muted); }
 .radial-gallery { display:flex; gap:clamp(16px,3vw,32px); padding:24px var(--gutter) 16px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; scroll-padding-inline:var(--gutter); overscroll-behavior-inline:contain; }
 .radial-card { flex:0 0 min(82vw,540px); scroll-snap-align:center; }
 .radial-card img { height:min(60svh,760px); }
 .collection-controls { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:8px var(--gutter) 24px; }
 .collection-controls button { color:inherit; border:0; border-bottom:1px solid; background:none; padding:8px 0; min-height:44px; cursor:pointer; }
}
@media (max-width:767px) {
 :root { --gutter:22px; --public-header-height:72px; }
 html { scroll-padding-top:72px; }
 .fashion-header { gap:12px; }
 .fashion-header::before { height:clamp(115px,17vh,155px); }
 .fashion-brand { width:46px; height:46px; }
 .fashion-header-actions { gap:16px; }
 .has-motion .arrival { height:140svh; }
 .has-motion .designer { height:120svh; }
 .has-motion .work { height:130svh; }
 .arrival-stage { align-items:flex-end; padding:0 var(--gutter) 9svh; }
 .hero-image img { object-position:55% 0%; }
 .arrival-stage::after { background:linear-gradient(0deg,rgb(248 247 243 / 98%) 8%,rgb(248 247 243 / 90%) 30%,transparent 64%); }
 .opening-logo { width:94px; height:94px; top:90px; }
 .arrival-copy { width:100%; max-width:32ch; }
 .arrival-copy h1,.hero-thought { font-size:1.85rem; }
 .copy-state > p:not(.hero-thought) { font-size:.9rem; margin-top:16px; line-height:1.65; }
 .has-motion .arrival-copy { height:155px; }
 .arrival-bottom { bottom:16px; font-size:.64rem; }
 .arrival-bottom > span { font-size:.5rem; }
 .editorial-stage { padding:82px var(--gutter) 26px; align-items:center; }
 .editorial-composition { grid-template-columns:1fr; gap:22px; }
 .complete-image,.work .complete-image { height:42svh; }
 .editorial-stage::after { background:rgb(248 247 243 / 76%); }
 .editorial-copy { max-width:40ch; margin-inline:auto; }
 .chapter-marker { font-size:.68rem; margin-bottom:10px; }
 .editorial-copy h2 { font-size:1.7rem; }
 .editorial-body { font-size:.9rem; line-height:1.65; margin-top:14px; }
 .editorial-support { font-size:.77rem; line-height:1.6; margin-top:12px; }
 .collection-heading h2 { font-size:1.95rem; }
 .collection-heading p { font-size:.84rem; margin-top:12px; }
 .visit-closing { grid-template-columns:1fr; gap:36px; padding-block:48px; }
 .visit-intro h2 { font-size:2.15rem; }
 .visit-intro > p:last-of-type { font-size:.95rem; margin-top:16px; }
 .location-heading { margin-top:28px; padding-top:22px; }
 .location-heading h3 { font-size:1.4rem; }
 .fashion-form-row { gap:20px; }
 .fashion-field :is(input,textarea) { font-size:16px; }
 .fashion-field label { font-size:.8rem; }
 .fashion-field small { font-size:.7rem; }
 .closing-stage { grid-template-columns:1fr; gap:28px; }
 .closing-brand { flex-direction:row; align-items:center; gap:24px; }
 .fashion-footer-brand { width:68px; flex-shrink:0; }
 .footer-columns { gap:22px; }
 .fashion-footer-bottom { justify-content:center; gap:18px; font-size:.62rem; }
 .fashion-footer-bottom > span { flex-basis:100%; text-align:center; }
}
@media (max-width:767px) and (max-height:820px) {
 .complete-image,.work .complete-image { height:38svh; }
 .editorial-composition { gap:16px; }
 .editorial-copy h2 { font-size:1.55rem; }
 .editorial-body { font-size:.86rem; }
}
@media (forced-colors:active) {
 .ambient-image { display:none; }
 .fashion-header::before { background:Canvas; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
