:root{
  --ink:#0b0d10; --navy:#121c33; --royal:#233a73; --slate:#5d6268; --silver:#b5bbc2;
  --bg:#f4f2ee; --bg2:#e8e5df; --cream:#f3ecdf; --gold:#c8a96e; --gold-d:#86693a; --line:rgba(11,13,16,.14);
  --ar:"Noto Kufi Arabic",system-ui,sans-serif; --dis:"El Messiri","Noto Kufi Arabic",serif; --lat:"Jost",sans-serif;
  --pad:clamp(16px,3.2vw,48px); --ease:cubic-bezier(.22,.61,.2,1); --hh:72px; --bar:36px;
  --zig:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M0 12 12 0l12 12' fill='none' stroke='%23fff' stroke-opacity='.05'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--ar);font-weight:400;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.8;-webkit-font-smoothing:antialiased}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer}
a,button{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--royal);outline-offset:2px}
.u{background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px;transition:background-size .5s var(--ease)}
.u:hover{background-size:0 1px;background-position:0 100%}
.mark{display:block;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.word{--m:url(/img/alette-wordmark.svg);aspect-ratio:360/80}
.fox{--m:url(/img/alette-fox.svg);aspect-ratio:202/246}
.over{font-family:var(--lat);font-size:11px;letter-spacing:.24em;color:var(--gold-d);direction:ltr}
.rule{display:block;position:relative;width:112px;height:9px;background:linear-gradient(var(--gold),var(--gold)) center/100% 1px no-repeat}
.rule::after{content:"";position:absolute;inset:2px auto auto 50%;width:5px;height:5px;margin-inline-start:-2.5px;background:var(--gold);transform:rotate(45deg);box-shadow:0 0 0 5px var(--rb,var(--bg))}

/* announcement + header */
.bar{height:var(--bar);background:var(--navy);color:var(--cream);display:flex;align-items:center;justify-content:center;gap:12px;font-size:12.5px}
.bar i{width:4px;height:4px;background:var(--gold);transform:rotate(45deg)}
.bar a:hover{color:#fff}
.legal .lg{display:flex;gap:20px}
.legal a:hover{color:#fff}
.hdr{position:sticky;top:0;z-index:40;background:rgba(244,242,238,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hdr-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:var(--hh);padding-inline:var(--pad);font-size:14px}
.hdr .dnav{display:flex;gap:28px}
.hdr .end{display:flex;gap:20px;justify-content:flex-end;align-items:center}
.hdr .logo{display:flex;flex-direction:column;align-items:center;gap:4px}
.hdr .logo .fox{width:22px}
.hdr .logo .word{width:104px}
.ic{display:inline-flex;align-items:center;gap:8px;height:44px;min-width:44px;justify-content:center;position:relative}
.ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.bag-n{position:absolute;top:4px;inset-inline-end:-2px;min-width:18px;height:18px;padding-inline:4px;border-radius:9px;background:var(--royal);color:#fff;font-size:11px;line-height:18px;text-align:center}
.bag-n[hidden]{display:none}
.menu{display:none}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;width:100%;height:52px;padding-inline:20px;background:var(--ink);color:#fff;font-size:15px;font-weight:500;transition:background .3s var(--ease),color .3s var(--ease)}
.btn:hover{background:var(--navy)}
.btn.light{background:var(--cream);color:var(--ink)}
.btn.light:hover{background:#fff}
.btn.ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px currentColor}
.btn.ghost:hover{background:rgba(255,255,255,.12)}

/* hero: text panel between the two collections */
.hero{display:grid;grid-template-columns:1fr minmax(360px,.82fr) 1fr;grid-template-areas:"men tx women";height:calc(100svh - var(--hh) - var(--bar));min-height:560px;max-height:940px;background:var(--navy);column-gap:2px}
.hero-tx{grid-area:tx;--rb:var(--navy);background:var(--navy) var(--zig);color:var(--cream);display:grid;align-content:center;justify-items:center;text-align:center;padding:40px 24px}
.hero-tx .over{color:var(--gold)}
.hero-tx h1{font-family:var(--dis);font-weight:700;font-size:clamp(40px,3.7vw,62px);line-height:1.25;margin-top:20px;white-space:nowrap}
.hero-tx .rule{margin:24px 0 20px}
.hero-tx p{max-width:300px;color:rgba(243,236,223,.84);text-wrap:balance}
.cta{display:grid;gap:12px}
.hero-tx .cta{width:min(100%,300px);margin-top:32px}
.panel{position:relative;overflow:hidden;display:block;background:var(--bg2)}
.panel img{position:absolute;inset:0;transition:transform 1.2s var(--ease)}
.p-men{grid-area:men}.p-women{grid-area:women}
.p-men img{object-position:40% 30%}
.p-women img{object-position:50% 30%}
.panel .lab{position:absolute;inset:auto 12px 12px;height:52px;background:var(--cream);color:var(--ink);display:flex;align-items:center;justify-content:space-between;padding-inline:18px;font-size:15px;transition:background .3s}
.panel .lab b{font-weight:500}
.panel .lab i{font-style:normal;transition:transform .4s var(--ease)}
.panel:hover .lab{background:#fff}
.panel:hover .lab i{transform:translateX(-6px)}

/* sections */
.sec{padding-top:clamp(64px,10vh,128px)}
.sec-hd{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-inline:var(--pad);margin-bottom:clamp(20px,3vh,32px);font-size:14px}
.sec-hd h2{font-family:var(--dis);font-weight:600;font-size:clamp(28px,2.8vw,40px);line-height:1.3}
.sec-hd h2 small{display:inline-block;unicode-bidi:isolate;font-family:var(--ar);color:var(--slate);font-size:13px;font-weight:400;margin-inline-start:12px}
.sec-hd .ctl{display:flex;gap:12px;align-items:center}
.sec-hd .ctl button{width:44px;height:44px;border:1px solid var(--line);display:grid;place-items:center;transition:background .3s,color .3s}
.sec-hd .ctl button:hover{background:var(--ink);color:#fff}
.sec-hd .ctl a{margin-inline-start:12px}

/* cuts */
.cuts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding-inline:var(--pad)}
.cut{display:grid;grid-template-rows:auto 1fr;background:#fff;transition:box-shadow .4s var(--ease)}
.cut:hover{box-shadow:0 12px 32px rgba(11,13,16,.1)}
.cut .ph{aspect-ratio:4/5;overflow:hidden;background:var(--bg2)}
.cut .tx{padding:20px 20px 24px;display:grid;gap:4px;align-content:start}
.cut .k{font-size:13px;color:var(--slate)}
.cut b{font-family:var(--dis);font-weight:700;font-size:clamp(34px,3.2vw,48px);line-height:1.2}
.cut .f{font-size:14px}
.cut .ft{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:16px;border-top:1px solid var(--line);font-size:14px}
.cut .ft span:first-child{display:flex;align-items:center;gap:8px;color:var(--slate);font-size:13px}
.cut .ft strong{font-weight:500}
.tone{display:flex;gap:4px}
.tone i{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(11,13,16,.18)}

/* product cards + rail */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(240px,23.5vw,400px);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:var(--pad);scroll-padding-inline:var(--pad);scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.item{scroll-snap-align:start;display:block}
.item .ph{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--bg2)}
.item .ph img{position:absolute;inset:0;transition:opacity .4s var(--ease)}
.item .ph .alt{opacity:0;object-position:50% 40%}
@media (hover:hover){.item:hover .ph .alt{opacity:1}}
.item .row{display:flex;justify-content:space-between;gap:12px;margin-top:12px;font-size:14px;line-height:1.6}
.item .row em{display:block;font-style:normal;color:var(--slate);font-size:13px}
.item .row span:last-child{font-weight:500;white-space:nowrap}
.item .tone{margin-top:8px}

/* material */
.material{--rb:var(--navy);margin-top:clamp(64px,10vh,128px);display:grid;grid-template-columns:1fr 1fr;background:var(--navy) var(--zig);color:var(--cream)}
.mat-img{aspect-ratio:1;overflow:hidden}
.mat-tx{align-self:center;padding:48px clamp(24px,6vw,96px)}
.mat-tx h2{font-family:var(--dis);font-weight:600;font-size:clamp(28px,2.9vw,44px);line-height:1.4;margin:24px 0 32px;text-wrap:balance}
.mat-tx dl{display:grid;grid-template-columns:150px 1fr;border-top:1px solid rgba(243,236,223,.2)}
.mat-tx dt,.mat-tx dd{padding:14px 0;border-bottom:1px solid rgba(243,236,223,.2);font-size:14px}
.mat-tx dt{color:var(--gold)}

/* shoppable lookbook */
.look{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:16px;padding-inline:var(--pad);align-items:start}
.shot{display:block;position:relative}
.shot .ph{overflow:hidden;background:var(--bg2);aspect-ratio:3/4}
.shot.a .ph{aspect-ratio:4/5.4}
.shot.b{margin-top:clamp(40px,8vh,96px)}
.shot .tag{position:absolute;inset:auto 12px 12px;background:rgba(244,242,238,.96);padding:10px 14px;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13.5px;line-height:1.6}
.shot .tag b{font-weight:500;display:block}
.shot .tag em{font-style:normal;color:var(--slate);font-size:13px}
.shot .tag strong{font-weight:500;white-space:nowrap}

/* together */
.together{position:relative;margin-top:clamp(64px,10vh,128px);height:min(88svh,860px);min-height:520px;overflow:hidden;color:#fff;background:var(--ink)}
.together img{object-position:50% 30%}
.together::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,13,16,.72),rgba(11,13,16,0) 55%)}
.together .cap{position:absolute;z-index:2;inset-inline:var(--pad);bottom:clamp(24px,6vh,56px);display:flex;justify-content:space-between;align-items:end;gap:24px}
.together h2{font-family:var(--dis);font-weight:700;font-size:clamp(34px,4vw,60px);line-height:1.25}
.together .cta{grid-auto-flow:column;grid-auto-columns:minmax(180px,1fr)}

/* footer */
footer{background:var(--ink);color:var(--silver);padding:clamp(56px,9vh,104px) var(--pad) 24px;font-size:14px}
.f-top{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px}
.f-top h3{font-weight:500;color:#fff;font-size:14px;margin-bottom:12px}
.f-top ul{list-style:none;display:grid}
.f-top li a{display:block;padding:6px 0}
.f-top a:hover{color:#fff}
.join .btn{max-width:300px;margin-top:8px}
.f-word{color:#fff;margin:clamp(32px,5vw,48px) 0 24px;display:grid;justify-items:center;gap:12px}
.f-word .fox{width:36px;color:var(--silver)}
.f-word .word{width:clamp(144px,18vw,208px);max-width:100%}
.legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:20px;border-top:1px solid rgba(181,187,194,.18);font-size:12px;color:#8b9097}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* mobile */
@media (max-width:860px){
  :root{--hh:60px}
  .hdr .dnav,.hdr .end .hide-sm,.hdr .bag-open .t,.bar .w{display:none}
  .menu{display:inline-flex;justify-self:start;margin-inline-start:-10px}
  .hdr .end{margin-inline-end:-8px}
  .hdr .logo .fox{width:18px}
  .hdr .logo .word{width:88px}
  .hero{grid-template-columns:1fr 1fr;grid-template-areas:"tx tx" "men women";grid-template-rows:auto 1fr;height:auto;min-height:calc(100svh - var(--hh) - var(--bar));max-height:none}
  .hero-tx{padding:28px 20px 24px}
  .hero-tx h1{font-size:clamp(34px,10.4vw,44px);margin-top:12px}
  .hero-tx .rule{margin:16px 0 12px}
  .hero-tx .cta{display:none}
  .panel{min-height:330px}
  .p-men img{object-position:36% 30%}
  .panel .lab{inset:auto 6px 6px;height:48px;padding-inline:12px;font-size:14px}
  .sec-hd .ctl button{display:none}
  .cuts{grid-template-columns:1fr;gap:12px}
  .cut{grid-template-rows:none;grid-template-columns:38% 1fr}
  .cut .ph{aspect-ratio:auto;min-height:190px;position:relative}
  .cut .ph img{position:absolute;inset:0}
  .cut .tx{padding:16px 16px 16px}
  .cut b{font-size:34px}
  .cut .ft{margin-top:12px;padding-top:12px}
  .rail{grid-auto-columns:62vw;gap:12px}
  .material{grid-template-columns:1fr}
  .mat-img{aspect-ratio:4/3}
  .mat-tx{padding:40px var(--pad) 48px}
  .mat-tx dl{grid-template-columns:128px 1fr}
  .look{grid-template-columns:1fr 1fr;gap:12px}
  .shot.a{grid-column:1/-1}
  .shot.a .ph{aspect-ratio:4/4.6}
  .shot.b{margin-top:0}
  .shot .tag{inset:auto 6px 6px;padding:8px 10px}
  .shot:not(.a) .tag strong{display:none}
  .together{height:auto;min-height:0;display:grid}
  .together img{aspect-ratio:5/4;height:auto;object-position:50% 20%}
  .together::after{display:none}
  .together .cap{position:static;display:grid;gap:20px;padding:28px var(--pad) 36px;background:var(--ink)}
  .together .cta{grid-auto-flow:row;grid-auto-columns:auto}
  .f-top{grid-template-columns:1fr 1fr;gap:32px 24px}
  .join{grid-column:1/-1}
  .join .btn{max-width:none}
}

/* Approved descriptive product names, Arabic with an English subtitle. */
.product-en{display:block;font-family:var(--lat);font-size:13px;font-weight:400;line-height:1.45;font-style:normal;color:var(--slate);text-align:right;white-space:normal;overflow-wrap:anywhere}
.item .row>span:first-child{min-width:0;flex:1}
.item .row em.product-en{margin-top:4px;font-size:13px}
.shot .tag em.product-en{font-size:12px}
.line .t>span:first-child{min-width:0;flex:1}
.line .product-en{margin-top:4px}
.info>.product-en{margin-top:8px;font-size:16px}