/* ============================================================
   site.css: the ground every page stands on. Loaded first.
   Faces, colour tokens (light, and the night remap), the document
   itself, the word-mark, and the browser's own surfaces (selection,
   caret, form accent, tap highlight, focus ring).
   The room's furniture is in room.css; each page has its own file.
   Never hardcode a colour anywhere else: add a token here.
   ============================================================ */

/* self-hosted webfonts: no external dependency, so the site renders the
   real faces even if a CDN is blocked or slow */
@font-face{font-family:"Rakkas";src:url("fonts/rakkas-arabic-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0020,U+00A0,U+0600-06FF,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"Rakkas";src:url("fonts/rakkas-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0021-007E,U+00A1-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0304,U+0308-0309,U+0323,U+2002,U+2009,U+200B,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2032-2033,U+2039-203A,U+2044,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF}
@font-face{font-family:"Amiri";src:url("fonts/amiri-arabic-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0890-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"Amiri";src:url("fonts/amiri-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0020,U+00A0,U+0021-007E,U+00A1-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0304,U+0308-0309,U+0323,U+2002,U+2009,U+200B,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2032-2033,U+2039-203A,U+2044,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF}
@font-face{font-family:"Amiri";src:url("fonts/amiri-arabic-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0890-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"Amiri";src:url("fonts/amiri-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0020,U+00A0,U+0021-007E,U+00A1-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0304,U+0308-0309,U+0323,U+2002,U+2009,U+200B,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2032-2033,U+2039-203A,U+2044,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF}
@font-face{font-family:"Crimson Pro";src:url("fonts/crimson-pro-latin-500-italic.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Alexandria";src:url("fonts/alexandria-arabic-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+2010,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"Alexandria";src:url("fonts/alexandria-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0020,U+00A0,U+0021-007E,U+00A1-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0304,U+0308-0309,U+0323,U+2002,U+2009,U+200B,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2032-2033,U+2039-203A,U+2044,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF}
@font-face{font-family:"Alexandria";src:url("fonts/alexandria-arabic-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+2010,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"Alexandria";src:url("fonts/alexandria-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0020,U+00A0,U+0021-007E,U+00A1-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0304,U+0308-0309,U+0323,U+2002,U+2009,U+200B,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2032-2033,U+2039-203A,U+2044,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF}
@font-face{font-family:"Crimson Pro";src:url("fonts/crimson-pro-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
/* Anton (OFL 1.1, the official release via @fontsource/anton 5.3.0; licence in fonts/Anton-OFL.txt): English headlines only */
@font-face{font-family:"Anton";src:url("fonts/anton-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"RoyalsQueen";src:url("fonts/RoyalsQueen.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  color-scheme:light;
  --wine:#5e1a38; --ink-deep:#3b0f22;
  --magenta:#c8016e; --magenta-light:#ff72b5; --magenta-text:#b10362;
  --tilt:-1.4deg;
  --s3:24px;
  /* type (owner font rules, 2026-11-10): Rakkas for Arabic headlines and the Arabic word-mark; Anton for
     English headlines (caps); The Royals Queen for the Latin word-mark only; Alexandria for everything small
     (nav, buttons, fields, labels, body, footer); Amiri and Crimson Pro only on the long reading pages */
  --d-ar:"Rakkas",serif; --d-en:"Anton",sans-serif; --wm-en:"RoyalsQueen",serif;
  --sm:"Alexandria",system-ui,sans-serif; --r-ar:var(--sm); --r-en:var(--sm);
  --read-ar:"Amiri",serif; --read-en:"Crimson Pro",Georgia,serif;
  /* the room (D7.3): warm white page, blush wall, candy bands, line-art tints.
     Every tint is the magenta/pink family lifted toward the page white. */
  --page:#fffafb; --white:#ffffff; --blush:#fbe3ee; --candy:#f4b3d0;
  --tint-rose:#f8dcea; --tint-blush:#fbe6f0; --tint-pale:#fceef4; --tint-deep:#f6cfe0; --mirror-deep:#f4c4da;
  --wall-stripe:color-mix(in srgb, var(--blush) 55%, var(--page));
  --glass-bar:color-mix(in srgb, var(--white) 82%, transparent);
  --glass-edge:color-mix(in srgb, var(--magenta) 7%, transparent);
  --tab-square:color-mix(in srgb, var(--magenta) 12%, var(--page));
  --tab-square-edge:color-mix(in srgb, var(--magenta) 45%, var(--page));
  --glass-line:var(--white);
  --glass-top:var(--white); --glass-mid:var(--blush); --glass-low:var(--mirror-deep); --mirror-top:var(--white);
  /* solid surfaces: the phone menu sheet (nothing behind it may show through),
     its hairline, and the nav bar when glass is switched off (reduced
     transparency, more contrast) */
  --sheet:var(--white);
  --sheet-line:color-mix(in srgb, var(--magenta) 30%, var(--page));
  --bar-solid:var(--white);
  /* the browser's own surfaces */
  --surround:var(--page);                                           /* the canvas behind the page: what a pull past the edge shows */
  --select:color-mix(in srgb, var(--magenta) 22%, var(--page));     /* selected text */
  --press:color-mix(in srgb, var(--magenta) 10%, transparent);      /* a row or a quiet control while it is held down */
  /* night: the same room with the lights down. Wine grounds, pink line, and a
     lit wardrobe bay so the darker garments still read. */
  --night:#2b0e1b; --night-2:#3a1326; --night-3:#4a1830; --night-4:#5c1f3c;
  --night-ink:#f7e1e8; --night-rose:#ff9ccb; --night-candy:#8a2a5c; --night-lit:#f6d9e5; --night-glass:#7a3a5e;
  /* the fitting rooms (home page, 2026-11-10): two more curtain shades and the booths' lit inside */
  --wine-2:#6c2245; --candy-2:#f8c9de; --booth-lit:#fdf1f6;
  /* the row of fitting rooms, light: wine curtains, a pink pelmet, white posts.
     These are fixed values (computed here, on :root); the night block below
     sets its own, so they never follow the remapped names by accident. */
  --room-line:var(--magenta); --room-in:var(--booth-lit); --room-skirt:var(--page);
  --room-pelmet:var(--candy); --room-post:var(--page); --room-rail:var(--magenta); --room-ring:var(--page);
  --curtain-a:var(--wine); --curtain-b:var(--wine-2); --curtain-fold:var(--candy); --curtain-fold-o:.5;
  --mirror-frame:var(--magenta); --mirror-glass:var(--page); --mirror-shine:var(--candy);
  --mirror-word:var(--wine);
  /* the wine bags (every page that has a floor) */
  --bag-front:var(--wine); --bag-side:var(--candy-2); --bag-inner:var(--blush); --bag-edge:var(--magenta);
  --bag-rope:var(--ink-deep); --bag-word:var(--candy);
}
/* the quiet pages (2026-11-10): a plain blush wall, a soft floor, wine carrying the weight.
   Set on .site so they follow the night remap below (same element, remapped names). */
.site{
  --wall:var(--blush); --ink:var(--wine); --copy:var(--wine);
  --floor:var(--tint-rose); --floor-line:color-mix(in srgb, var(--magenta) 16%, transparent); --floor-edge:var(--magenta);
  --btn:var(--wine); --btn-ink:var(--page); --btn-hover:var(--magenta-text);
  --panel:var(--page); --panel-line:color-mix(in srgb, var(--magenta) 40%, var(--page));
  --band:var(--wine); --band-ink:var(--page); --band-accent:var(--candy); --band-btn:var(--candy); --band-btn-ink:var(--wine); --band-btn-hover:var(--page);
  --base:var(--wine);              /* the footer's baseboard */
  --bar-glass:color-mix(in srgb, var(--white) 72%, transparent);
  --veil-light:color-mix(in srgb, var(--white) 7%, transparent);    /* the stripes on the language curtain */
  --veil-dark:color-mix(in srgb, var(--ink-deep) 10%, transparent);
}
/* the theme is her own switch (nav.js, remembered on the device), not the system setting */
:root[data-theme="dark"]{--surround:var(--night);color-scheme:dark}
:root[data-theme="dark"] .site-home, :root[data-theme="dark"] .site-room{
  --page:var(--night); --blush:var(--night-2); --candy:var(--night-candy);
  --tint-rose:var(--night-3); --tint-blush:var(--night-2); --tint-deep:var(--night-4); --tint-pale:var(--night-lit);
  --mirror-deep:var(--night-4); --mirror-top:var(--night-glass);
  --glass-top:var(--night-glass); --glass-mid:var(--night-4); --glass-low:var(--night-3);
  --magenta:var(--magenta-light); --magenta-text:var(--night-rose); --wine:var(--night-ink);
  --wall-stripe:color-mix(in srgb, var(--night-2) 80%, var(--night));
  --glass-bar:color-mix(in srgb, var(--night-2) 88%, transparent);
  --glass-edge:color-mix(in srgb, var(--ink-deep) 60%, transparent);
  --glass-line:color-mix(in srgb, var(--magenta-light) 28%, transparent);
  --tab-square:color-mix(in srgb, var(--magenta-light) 16%, var(--night));
  --tab-square-edge:color-mix(in srgb, var(--magenta-light) 50%, var(--night));
  --sheet:var(--night-2);
  --sheet-line:color-mix(in srgb, var(--magenta-light) 42%, var(--night));
  --bar-solid:var(--night-2);
  --select:color-mix(in srgb, var(--magenta-light) 38%, var(--night));
  --press:color-mix(in srgb, var(--magenta-light) 14%, transparent);
  color-scheme:dark;
  /* the quiet pages at night */
  --copy:var(--night-lit);
  --floor-line:color-mix(in srgb, var(--magenta-light) 55%, transparent);
  --btn:var(--magenta-light); --btn-ink:var(--night); --btn-hover:var(--night-rose);
  --panel-line:color-mix(in srgb, var(--magenta-light) 45%, var(--night));
  --band:var(--night-3); --band-ink:var(--night-ink); --band-accent:var(--night-rose); --band-btn:var(--magenta-light); --band-btn-ink:var(--night); --band-btn-hover:var(--night-rose);
  --base:var(--night-3);
  --bar-glass:color-mix(in srgb, var(--night-2) 78%, transparent);
}
/* the fitting rooms and the bags at night: pink curtains, a dark pelmet and posts, the lit booth stays light */
:root[data-theme="dark"]{
  --room-line:var(--magenta-light); --room-in:var(--booth-lit); --room-skirt:var(--night-ink);
  --room-pelmet:var(--night); --room-post:var(--night-3); --room-rail:var(--magenta-light); --room-ring:var(--night-ink);
  --curtain-a:var(--candy); --curtain-b:var(--candy-2); --curtain-fold:var(--magenta); --curtain-fold-o:.45;
  --bag-front:var(--night); --bag-edge:var(--magenta-light); --bag-rope:var(--candy);
}

*{box-sizing:border-box}
/* a phone turned on its side keeps the type sizes we set; a tap leaves no grey flash (every control has its own pressed state) */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent;font-synthesis:none}   /* no faux bold or italic: every weight used has its own file */
body{margin:0;background:var(--surround);color:var(--wine);font-family:var(--r-ar);-webkit-font-smoothing:antialiased}
img{max-width:100%}
/* controls take the page's face (Alexandria), never the browser's default */
button,input,select,textarea{font-family:inherit}

/* ---------- the browser's own surfaces, in the room's colours ---------- */
.site{accent-color:var(--magenta);caret-color:var(--magenta-text)}
.site ::selection{background:var(--select);color:var(--wine)}
:where(a,button,summary,label,input,select,textarea){touch-action:manipulation}
/* a finger held on a control does not select its label (controls only; every line of reading text stays selectable) */
:where(button,summary,.pill,.gtabs a,.gsheet a,.skip){-webkit-user-select:none;user-select:none}
:where(button,summary){-webkit-touch-callout:none}
/* one focus ring everywhere; a control that needs a different offset or a
   wine ring (the filled pill) says so in its own rule */
:where(.site) :focus-visible{outline:2px solid var(--magenta-text);outline-offset:2px}
/* a control reached going backwards (Shift+Tab) is scrolled clear of the sticky bar; fields keep their own larger margins */
:where(.site) :where(a,button,summary,[tabindex]){scroll-margin-top:88px}

/* ---------- skip to the page: the first stop of the keyboard, a small label
   that drops from the top of the wall only while it has the focus ---------- */
.skip{position:absolute;top:12px;inset-inline-start:max(16px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));z-index:50;
  padding:11px 18px;border-radius:12px;background:var(--page);border:2px solid var(--magenta);
  font-family:var(--sm);font-size:0.9375rem;line-height:1.4;color:var(--magenta-text);text-decoration:none;
  transform:translateY(-80px)}   /* it appears at once: no slide, so a keyboard user and a screen reader find it where it is */
.skip:focus{transform:none}
.skip:active{background:var(--blush)}
/* the page itself takes the focus after the skip; it shows no ring of its own */
main:focus{outline:none}

/* ---------- English asked for before the page is drawn ----------
   A one-line script in the head (beside the theme one) puts .i18n-wait on
   <html> when the address says ?lang=en or the stored choice is English.
   The page then waits, undrawn, for i18n.js to swap the words, so the Arabic
   layout never shows first. If i18n.js never arrives, the page shows itself. */
html.i18n-wait .site{visibility:hidden;animation:i18n-show 0s linear 2s forwards}   /* the head script also falls back to Arabic after 1.5 s (audit L7) */
@keyframes i18n-show{to{visibility:visible}}

/* ---------- the launch-day switch and the contact lines (nav.js) ----------
   nav.js shows and hides these with the `hidden` attribute. A component's own
   display rule (a .pill is inline-block) would beat the browser's [hidden],
   so here `hidden` always wins for them. */
[data-launch][hidden],[data-app-link][hidden],[data-contact][hidden]{display:none !important}

/* the word-mark (nav and footer) */
.mark{line-height:1;text-decoration:none;display:block;flex:none}
.mark .ar{font-family:var(--d-ar);font-size:clamp(1.375rem,2.4vw,1.875rem);color:var(--wine);display:block}
.mark .en{font-family:var(--wm-en);font-style:italic;font-feature-settings:normal;font-size:clamp(0.6875rem,1.1vw,0.875rem);letter-spacing:.06em;color:var(--magenta-text);display:block;margin-top:1px}

/* the honeypot field of the sign-up forms (forms.css finishes the job) */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms !important;transition-duration:.001ms !important}}