/* Nohad public site. Values come from the approved artboards (see DESIGN-NOTES.md).
   Mobile first; one breakpoint at 768px switches to the desktop layout.
   Logical properties throughout, so Arabic only needs dir="rtl". */

@font-face{font-family:'Poiret One';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/poiret-one-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Urbanist;font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/urbanist-latin-300-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Urbanist;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/urbanist-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Tajawal;font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/tajawal-arabic-300-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:Tajawal;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/tajawal-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:Tajawal;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/tajawal-arabic-500-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

:root{
  --porcelain:#F8F4F3;
  --chalk:#FDFBFA;
  --ink:#1C1A18;
  --pencil:#5F595B;
  --rose:#EC9AB3;
  --berry:#A82E57;
  --blush:#F8DDE4;
  --stone:#E2D9DA;
  --display:'Poiret One',Urbanist,Futura,sans-serif;
  --body:Urbanist,'Helvetica Neue',Arial,sans-serif;
  --arabic:Tajawal,'Noto Kufi Arabic',Tahoma,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{color-scheme:only light;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--porcelain);color:var(--ink);font-family:var(--body);font-weight:300}
html[lang=ar] body{font-family:var(--arabic);font-weight:400}
img{max-width:100%}
a{color:var(--berry)}
a:hover{color:var(--ink)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--berry);outline-offset:3px}
.page{display:flex;flex-direction:column;min-height:100vh;background:var(--porcelain)}

/* ---- top bar ---------------------------------------------------------- */
.topbar{position:sticky;top:0;z-index:40;height:64px;background:var(--chalk);border-bottom:1px solid var(--stone);display:flex;align-items:center;justify-content:space-between;padding:0 16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand svg{flex:none}
.wordmark{font-family:var(--display);font-size:20px;letter-spacing:.06em;line-height:1}
.lang{display:flex;gap:14px;font-family:var(--body);font-size:12px;font-weight:400;letter-spacing:.12em}
.lang a{position:relative;color:var(--pencil);text-decoration:none}
/* grow the tap area to 44px tall without moving anything */
.lang a::after{content:"";position:absolute;inset:-14px -7px}
.lang--header a[aria-current]{color:var(--berry);border-bottom:1px solid var(--berry);padding-bottom:2px}
.lang--footer a[aria-current]{color:var(--berry)}

/* ---- hero ------------------------------------------------------------- */
.hero{position:relative;height:380px;overflow:hidden;background:var(--chalk)}
.view-list .hero{height:460px}
.hero__art{height:100%}
.hero__img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 20%}
.hero__tag{position:absolute;inset-inline-start:16px;bottom:16px;background:rgba(248,244,243,.92);padding:12px 16px;display:flex;flex-direction:column;gap:4px}
.hero__tagname{font-family:var(--display);font-size:22px;letter-spacing:.06em;line-height:1}
.hero__tagline{font-size:11px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--pencil)}
html[lang=ar] .hero__tagline{font-size:12px;font-weight:500;letter-spacing:0;text-transform:none}
[dir=rtl] .hero__tagname{text-align:right}
.hero__lockup{display:none}
.rule{display:flex;align-items:center}
.rule span{flex:1;height:1px;background:var(--ink)}
.rule svg{flex:none}

/* ---- collection heading and intro ------------------------------------ */
.collection{scroll-margin-top:64px;padding:28px 16px 4px;display:flex;flex-direction:column;gap:6px}
.view-list .collection{padding:32px 16px 8px;gap:8px}
.collection__head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.collection h1{margin:0;font-family:var(--display);font-weight:400;font-size:32px;line-height:1.1}
.view-list .collection h1{font-size:34px}
html[lang=ar] .collection h1{font-family:var(--arabic);font-weight:300;font-size:34px;line-height:1.2}
.viewtoggle{display:none;border:1px solid var(--ink);border-radius:999px;overflow:hidden;height:40px;flex-shrink:0}
.js .viewtoggle{display:flex}
.viewtoggle__btn{width:44px;border:0;padding:0;background:var(--chalk);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer}
.viewtoggle__btn:focus-visible{outline-offset:-4px}
html:not(.view-list) .viewtoggle__btn--grid,
.view-list .viewtoggle__btn--list{background:var(--ink);color:var(--porcelain)}
.intro{margin:0;font-size:15px;line-height:1.45;color:var(--pencil)}
.view-list .intro{font-size:16px;line-height:1.55}
html[lang=ar] .intro{font-size:16px;line-height:1.6}
.hint--hover{display:none}
@media (hover:hover){.hint--touch{display:none}.hint--hover{display:inline}}
.textlink{color:var(--berry);text-decoration:none;border-bottom:1px solid var(--berry)}
.textlink:hover{color:var(--ink)}

/* ---- cards ------------------------------------------------------------ */
.grid{padding:16px 16px 24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.view-list .grid{display:flex;flex-direction:column;gap:24px}

.card{
  --chip-off:8px;--chip-fs:10px;--chip-pad:4px 7px;
  --tag-off:8px;--tag-fs:10px;--tag-gap:5px;--tag-pad:6px 8px;--tag-icon:11px;
  display:flex;flex-direction:column;gap:10px;min-width:0;
  background:var(--chalk);border:1px solid var(--stone);padding:8px 8px 14px;
}
.view-list .card{
  --chip-off:10px;--chip-fs:11px;--chip-pad:5px 9px;
  --tag-off:10px;--tag-fs:11px;--tag-gap:6px;--tag-pad:7px 10px;--tag-icon:12px;
  gap:14px;padding:12px 12px 18px;
}
html[lang=ar] .card{--chip-fs:12px;--chip-pad:6px 8px 3px;--tag-fs:12px;--tag-pad:7px 8px 4px}
html[lang=ar] .view-list .card{--chip-fs:12px;--chip-pad:6px 8px 3px;--tag-fs:12px;--tag-pad:7px 8px 4px}

.photo{position:relative;display:block;width:100%;padding:0;border:0;margin:0;background:var(--porcelain);cursor:pointer;aspect-ratio:3/4;overflow:hidden;text-align:start}
.photo__btn{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;margin:0;background:none;cursor:pointer;display:block}
.chip,.tag{z-index:1;pointer-events:none}
.photo__img{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);object-fit:cover;display:block}
.photo__img--back{visibility:hidden}
.card[data-view=back] .photo__img--back{visibility:visible}
.card[data-view=back] .photo__img--front{visibility:hidden}

.chip{position:absolute;top:var(--chip-off);inset-inline-start:var(--chip-off);font-family:var(--body);font-weight:400;font-size:var(--chip-fs);letter-spacing:.12em;text-transform:uppercase;padding:var(--chip-pad)}
.chip--rose{background:var(--rose);color:var(--ink)}
.chip--ink{background:var(--ink);color:var(--porcelain)}
.tag{position:absolute;bottom:var(--tag-off);inset-inline-end:var(--tag-off);display:flex;align-items:center;gap:var(--tag-gap);background:rgba(253,251,250,.92);color:var(--ink);font-family:var(--body);font-weight:400;font-size:var(--tag-fs);letter-spacing:.12em;text-transform:uppercase;padding:var(--tag-pad)}
.tag__icon{width:var(--tag-icon);height:var(--tag-icon);flex:none}
html[lang=ar] .chip,html[lang=ar] .tag{font-family:var(--arabic);font-weight:500;line-height:1;letter-spacing:0;text-transform:none}
html[lang=ar] .chip{display:inline-flex;align-items:center}
[data-view=front] .tag__front,[data-view=back] .tag__back{display:none}

.card__text{display:flex;flex-direction:column;gap:8px;padding:0 2px}
.view-list .card__text{gap:6px;padding:0 4px}
.name{margin:0;font-family:var(--display);font-weight:400;font-size:18px;line-height:1.15}
.name{font-size:clamp(13px,calc((50vw - 52px) / 8.4),18px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.view-list .name{font-size:24px;white-space:normal;overflow:visible}
.name a{display:block;padding:12px 0;margin:-12px 0;color:var(--ink);text-decoration:none}
[dir=rtl] .name{direction:ltr;text-align:right}
.desc{margin:0;font-size:13px;line-height:1.45;color:var(--pencil);min-height:38px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
html[lang=ar] .desc{font-size:15px;line-height:1.6;min-height:48px}
.view-list .desc{font-size:15px;line-height:1.55;min-height:0;display:block;-webkit-line-clamp:unset;line-clamp:unset;overflow:visible}
html[lang=ar] .view-list .desc{line-height:1.6}

/* ---- footer ----------------------------------------------------------- */
.footer{border-top:1px solid var(--stone);padding:32px 16px 40px;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.lockup{display:flex;flex-direction:column;align-items:center;gap:12px}
.lockup__name{font-family:var(--display);font-size:28px;letter-spacing:.04em;text-indent:.04em;line-height:1}
.rule--footer{width:140px;gap:12px}
.lang--footer{gap:16px}
.social{display:flex;justify-content:center;gap:4px}
.social__link{width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--pencil)}
.social__link:hover{color:var(--berry)}
.photo--static{cursor:default}
.small{margin:0;font-size:12px;line-height:1.45;color:var(--pencil)}
html[lang=ar] .small{font-size:13px;line-height:1.6}
.small--latin,html[lang=ar] .small--latin{font-family:var(--body);font-weight:300;font-size:12px}

/* ---- floating WhatsApp button ---------------------------------------- */
.float{position:fixed;inset-inline-end:16px;bottom:16px;z-index:30;height:44px;padding-inline:8px 18px;border:1px solid var(--ink);background:var(--chalk);color:var(--ink);font-family:var(--body);font-size:15px;font-weight:400;display:flex;align-items:center;gap:10px;border-radius:999px;box-shadow:0 8px 24px rgba(28,26,24,.12);text-decoration:none}
.float:hover{background:var(--blush);color:var(--ink)}
.float__dot{width:30px;height:30px;border-radius:999px;background:var(--rose);display:flex;align-items:center;justify-content:center;flex:none}
.float__dot img{display:block;width:18px;height:18px}
html[lang=ar] .float{padding-top:6px;font-family:var(--arabic);font-size:16px;font-weight:500}

/* ---- item view (phone: a full screen) -------------------------------- */
.item{
  --chip-off:12px;--chip-fs:11px;--chip-pad:5px 9px;
  --tag-off:12px;--tag-fs:11px;--tag-gap:6px;--tag-pad:7px 10px;--tag-icon:12px;
  display:flex;flex-direction:column;max-width:520px;min-height:100vh;margin-inline:auto;background:var(--porcelain);
}
html[lang=ar] .item{--chip-fs:12px;--chip-pad:6px 8px 3px;--tag-fs:12px;--tag-pad:7px 8px 4px}
.item__bar{position:sticky;top:0;z-index:5;height:56px;display:flex;align-items:center;justify-content:space-between;padding-inline:4px 8px;background:var(--chalk);border-bottom:1px solid var(--stone)}
.item__back{display:flex;align-items:center;gap:6px;height:44px;padding:0 12px;color:var(--ink);text-decoration:none;font-size:14px;font-weight:400}
.item__brand{font-family:var(--display);font-size:18px;letter-spacing:.06em}
.item__close{width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--ink);text-decoration:none}
[dir=rtl] .icon-chevron{transform:scaleX(-1)}
html[lang=ar] .item__back{padding-top:6px;font-weight:500}

.item__media{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--chalk)}
.item__photo{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;display:block}
.item__img{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);object-fit:cover;display:block}
.item__img--back{visibility:hidden}
.item[data-view=back] .item__img--back{visibility:visible}
.item[data-view=back] .item__img--front{visibility:hidden}
.item__dots{position:absolute;inset-inline:0;bottom:12px;display:flex;justify-content:center;gap:8px}
.item__dots i{width:8px;height:8px;border-radius:999px;background:var(--chalk);box-shadow:0 0 0 1px var(--ink)}
.item[data-view=front] .item__dots i:first-child,
.item[data-view=back] .item__dots i:last-child{background:var(--ink)}

.item__body{padding:24px 20px 32px;display:flex;flex-direction:column;gap:18px}
.item__nav,.item__thumbs{display:none}
.item__text{display:flex;flex-direction:column;gap:8px}
.item__name{margin:0;font-family:var(--display);font-weight:400;font-size:30px;line-height:1.1}
[dir=rtl] .item__name{direction:ltr;text-align:right}
.item__desc{margin:0;font-size:16px;line-height:1.55;color:var(--pencil)}
html[lang=ar] .item__desc{line-height:1.7}
.item__cta{display:contents}
.msg{display:flex;align-items:center;justify-content:center;gap:10px;height:52px;background:var(--ink);color:var(--porcelain);border-radius:999px;font-size:16px;font-weight:400;text-decoration:none}
.msg img{display:block;flex:none}
.msg:hover{background:var(--blush);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
html[lang=ar] .msg{padding-top:6px;font-weight:500}
.item__note{margin:0;font-size:13px;line-height:1.5;color:var(--pencil);text-align:center}
html[lang=ar] .item__note{line-height:1.7}

.backdrop,.scrim{display:none}
.item-page .float{display:none}

/* ---- 404 ---------------------------------------------------------------- */
.notfound{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:44px;min-height:calc(100vh - 64px);padding:48px 16px;text-align:center}
.notfound__block{display:flex;flex-direction:column;align-items:center;gap:14px}
.notfound__title{margin:0;font-family:var(--display);font-weight:400;font-size:34px;line-height:1.15}
html[lang=ar] .notfound__title,.notfound__block[lang=ar] .notfound__title{font-family:var(--arabic);font-weight:300}
.notfound__text{margin:0;max-width:420px;font-size:16px;line-height:1.55;color:var(--pencil)}
.notfound__block[lang=ar]{font-family:var(--arabic);font-weight:400}
.notfound .msg{display:inline-flex;padding:0 28px;height:48px;font-size:15px}
.notfound .rule--footer{width:140px;gap:12px}

/* ---- desktop ---------------------------------------------------------- */
@media (min-width:768px){
  .topbar{height:72px;padding-inline:64px}
  .brand{gap:12px}
  .wordmark{font-size:22px}
  .lang{gap:16px}
  .lang a::after{inset:-14px -8px}

  /* The hero is exactly one screen tall (the screen minus the header), whatever the screen size. */
  .hero,.view-list .hero{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:24px 80px;min-height:max(420px,calc(100vh - 73px));min-height:max(420px,calc(100dvh - 73px));height:auto;padding:32px 64px;background:var(--chalk);border-bottom:1px solid var(--stone)}
  .hero__art{height:auto;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
  .hero__img{width:auto;height:clamp(300px,calc(100dvh - 72px - 64px),1100px);max-width:100%;object-fit:contain;box-shadow:0 16px 48px rgba(28,26,24,.14)}
  .hero__tag{display:none}
  .hero__lockup{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:22px;padding:24px 0;text-align:center;flex:0 1 380px;min-width:0}
  .hero__name{font-family:var(--display);font-size:clamp(52px,9dvh,96px);letter-spacing:.04em;text-indent:.04em;line-height:1}
  .rule--hero{width:240px;gap:14px}
  .hero__line{margin:0;font-family:var(--display);font-size:24px;line-height:1.35;max-width:420px}
  html[lang=ar] .hero__line{font-family:var(--arabic);font-weight:300;font-size:26px;line-height:1.5}

  .collection,.view-list .collection{scroll-margin-top:72px;padding:56px 64px 8px;gap:10px}
  .collection__head{gap:24px;flex-wrap:wrap}
  .collection h1,.view-list .collection h1{font-size:44px}
  html[lang=ar] .collection h1{font-size:46px}
  .intro,.view-list .intro{font-size:16px;line-height:1.5;max-width:720px}
  html[lang=ar] .intro{font-size:17px;line-height:1.6}
  .br-phone{display:none}

  .grid{padding:24px 64px 40px;gap:24px;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
  .view-list .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .card,.view-list .card{
    --chip-off:12px;--chip-fs:11px;--chip-pad:5px 9px;
    --tag-off:12px;--tag-fs:11px;--tag-gap:6px;--tag-pad:7px 10px;--tag-icon:12px;
    gap:12px;padding:10px 10px 18px;
  }
  html[lang=ar] .card,html[lang=ar] .view-list .card{--chip-fs:13px;--chip-pad:6px 9px 3px;--tag-fs:13px;--tag-pad:8px 10px 5px}
  .card__text,.view-list .card__text{gap:6px;padding:0 4px}
  .name,.view-list .name{font-size:22px;white-space:normal;overflow:visible}
  .desc,.view-list .desc{display:block;font-size:15px;line-height:1.5;min-height:0;-webkit-line-clamp:unset;line-clamp:unset;overflow:visible}
  html[lang=ar] .desc,html[lang=ar] .view-list .desc{font-size:16px;line-height:1.6}

  .footer{position:relative;padding:64px 64px 72px;gap:22px}
  .lockup{gap:16px}
  .lockup__name{font-size:40px}
  .rule--footer{width:200px;gap:14px}
  .rule--footer svg{width:20px;height:20px}
  /* On desktop the header already has the language switcher; the footer one is phone-only. */
  .lang--footer{display:none}

  .notfound{min-height:calc(100vh - 72px)}
  .notfound__title{font-size:44px}
  .float{inset-inline-end:32px;bottom:32px}
  .item-page .float{display:flex}

  /* Item view: a centred dialog over the dimmed gallery */
  .item-page{min-height:100vh;overflow:hidden}
  .backdrop{display:block;position:fixed;inset:0;opacity:.35;overflow:hidden}
  .backdrop__bar{height:72px;background:var(--chalk);border-bottom:1px solid var(--stone);display:flex;align-items:center;padding:0 64px;gap:12px}
  .backdrop__tiles{padding:40px 64px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
  .backdrop__tile{aspect-ratio:3/4;background:var(--chalk);border:1px solid var(--stone);overflow:hidden}
  .backdrop__tile img{display:block;width:100%;height:100%;object-fit:cover}
  .scrim{display:block;position:fixed;inset:0;z-index:20;background:rgba(28,26,24,.45)}
  .item-wrap{position:fixed;inset:0;z-index:25;display:grid;place-items:center;padding:24px;pointer-events:none}
  .item{
    --chip-off:16px;
    pointer-events:auto;width:min(1040px,100%);height:min(680px,100%);max-width:none;min-height:0;margin:0;
    display:grid;grid-template-columns:49% 1fr;background:var(--chalk);border:1px solid var(--stone);box-shadow:0 24px 64px rgba(28,26,24,.25);
  }
  .item__bar,.item__dots,.item .tag{display:none}
  .item__media{aspect-ratio:auto;height:100%;background:var(--porcelain)}
  .item__body{padding:40px 48px 40px 44px;gap:24px;min-width:0;overflow-y:auto}
  [dir=rtl] .item__body{padding:40px 44px 40px 48px}
  .item__nav{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
  .item__backlong{display:flex;align-items:center;gap:6px;height:44px;color:var(--pencil);text-decoration:none;font-size:14px;font-weight:400}
  .item__backlong svg{width:16px;height:16px}
  .item__closebtn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--ink);text-decoration:none;margin-block-start:-8px;margin-inline-end:-12px}
  .item__text{flex:1;gap:12px}
  .item__name{font-size:40px}
  .item__desc{font-size:18px;max-width:420px}
  .item__thumbs{display:flex;gap:10px}
  .thumb{width:64px;height:84px;padding:0;border:1px solid var(--stone);background:var(--porcelain);overflow:hidden;cursor:pointer}
  .thumb[aria-pressed=true]{border-color:var(--ink)}
  .thumb img{display:block;width:100%;height:100%;object-fit:cover}
  .item__cta{display:flex;flex-direction:column;gap:12px}
  .msg{display:inline-flex;padding:0 32px;align-self:flex-start}
  .item__note{text-align:start}
  html[lang=ar] .item__backlong{padding-top:6px;font-weight:500}

  /* Overlay opened from the gallery (see app.js) */
  body.has-overlay{overflow:hidden}
  body.has-overlay .page{opacity:.35}
}

@media (min-width:768px) and (max-width:1100px){
  .hero__img{height:clamp(240px,46dvh,640px)}
  .hero__lockup{padding:0}
}