/* Layout: one quiet centred column — wordmark, motto, "coming soon" held between two gold lines; contacts at the foot. */
:root{
  --ivory:#FBF7F1;      /* main ground (as the store) */
  --blush:#F2DEDB;      /* faint glow only */
  --burgundy:#55101B;   /* text */
  --gold:#D4A017;       /* lines and icons only */
  --muted:rgba(85,16,27,.66);
  --f:"Markazi Text","Noto Naskh Arabic","Times New Roman",serif;
  /* one screen unit, limited by height so wide/short screens never overflow */
  --u:min(1vw,1.55vh);
  --gline:linear-gradient(90deg,rgba(212,160,23,0) 0%,var(--gold) 22%,var(--gold) 78%,rgba(212,160,23,0) 100%);
  color-scheme:light;
}
html,body{height:100%}
body{margin:0;background:var(--ivory);color:var(--burgundy);font-family:var(--f);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
.page{
  min-height:100%;display:flex;flex-direction:column;box-sizing:border-box;
  padding-inline:max(16px,calc(var(--u)*4));padding-block:clamp(14px,calc(var(--u)*2.2),40px);
  background:radial-gradient(ellipse 70% 45% at 50% 100%,rgba(242,222,219,.75) 0%,rgba(242,222,219,0) 70%),var(--ivory);
}

/* language switch */
.top{display:flex;justify-content:flex-end}
.lang{display:inline-flex;align-items:center;gap:2px;font-size:clamp(15px,calc(var(--u)*1.15),27px);font-weight:600}
.lang button{all:unset;cursor:pointer;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--muted);letter-spacing:.08em;position:relative;transition:color .25s}
.lang button[aria-pressed="true"]{color:var(--burgundy)}
.lang button[aria-pressed="true"]::after{content:"";position:absolute;inset-inline:12px;bottom:8px;height:1.5px;background:var(--gold)}
.lang button:focus-visible{outline:1.5px solid var(--gold);outline-offset:-4px}
.lang .sep{color:var(--gold);font-weight:400}

/* centre */
.stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  gap:clamp(18px,calc(var(--u)*3),64px);padding-block:clamp(28px,calc(var(--u)*5),110px);min-width:0}
.logo{margin:0;line-height:0}
.logo img{display:block;width:clamp(150px,calc(var(--u)*27),620px);height:auto}

.motto{margin:0;font-weight:500;line-height:1.5;color:var(--burgundy);max-width:100%;
  font-size:clamp(16px,calc(var(--u)*4.1),88px);white-space:nowrap}
html[lang="en"] .motto{font-size:clamp(17px,calc(var(--u)*3.2),70px);line-height:1.3}

.soon{display:flex;align-items:center;justify-content:center;gap:clamp(12px,calc(var(--u)*1.6),28px);
  width:min(100%,clamp(260px,calc(var(--u)*46),980px));
  font-size:clamp(17px,calc(var(--u)*2.1),48px);font-weight:600;color:var(--burgundy);white-space:nowrap}
.soon::before,.soon::after{content:"";flex:1 1 0;height:1.5px;background:var(--gline);min-width:24px}
html[lang="en"] .soon{text-transform:uppercase;letter-spacing:.3em;font-size:clamp(14px,calc(var(--u)*1.4),30px)}
html[lang="en"] .soon span{margin-inline-end:-.3em}

/* contacts */
.contact{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px clamp(22px,calc(var(--u)*3.4),64px);
  font-size:clamp(15px,calc(var(--u)*1.15),27px);color:var(--burgundy);padding-bottom:env(safe-area-inset-bottom,0px)}
.contact a{display:inline-flex;align-items:center;gap:.6em;color:inherit;text-decoration:none;min-height:44px;
  border-bottom:1px solid transparent;transition:border-color .25s}
.contact a:hover{border-bottom-color:var(--gold)}
.contact a:focus-visible{outline:1.5px solid var(--gold);outline-offset:4px}
.contact svg{width:1.3em;height:1.3em;flex:none;color:var(--gold)}
.contact .k{color:var(--muted)}
.contact bdi{font-weight:600;unicode-bidi:isolate}

/* small phones: contacts stack */
@media (max-width:560px){
  .stage{gap:22px}
  .logo img{width:clamp(170px,54vw,280px)}
  html[lang="ar"] .motto{font-size:min(5.6vw,30px)}
  html[lang="en"] .motto{white-space:normal;text-wrap:balance;font-size:clamp(18px,5.4vw,26px)}
  .soon{font-size:clamp(17px,4.8vw,22px)}
  .contact{flex-direction:row;gap:0 22px}
  .contact a[href^="mailto"]{flex-basis:100%;justify-content:center}
}
/* very small (folded phones) */
@media (max-width:360px){
  .contact{gap:0 14px;font-size:14px}
  .contact a{gap:.4em}
}
@media (max-width:300px){
  .contact{gap:0 10px;font-size:13px}
  .contact svg{width:1.15em;height:1.15em}
}
@media (max-width:330px){
  .page{padding-inline:14px}
  html[lang="en"] .soon{letter-spacing:.2em}
}
/* short landscape screens */
@media (orientation:landscape) and (max-height:500px){
  .stage{gap:12px;padding-block:14px}
  .contact{flex-direction:row;gap:4px 24px}
}

@media (prefers-reduced-motion:no-preference){
  .stage>*{animation:rise 1s cubic-bezier(.2,.7,.2,1) both}
  .stage>:nth-child(2){animation-delay:.12s}
  .stage>:nth-child(3){animation-delay:.24s}
  @keyframes rise{from{opacity:.001;transform:translateY(8px)}to{opacity:1;transform:none}}
}