/* ============================================================
   room.css: the shell every page shares (quiet pages, 2026-11-10).
   The glass top bar (sticky), its tabs, the language and theme
   controls, the phone menu sheet, the footer on its baseboard, and
   the curtain that crosses the screen on a language or light change.
   The old room (candy bands, hanging sign, wall pieces, wardrobe,
   the mascot figure, twirly rail) is gone with the playful design.
   Colours come from site.css tokens only.
   ============================================================ */

.site.site-home,.site.site-room{display:flow-root;max-width:none;padding:0;background:var(--wall);color:var(--ink);overflow-x:clip}   /* flow-root: the bar's top margin stays inside the wall (no strip of another colour above it) */
/* no overflow on html or body: that would make body a scroll box and unpin the sticky bar; .site clips instead */
/* ---------- glass nav bar on a clean top: no band above it, nothing runs into it ---------- */
.gnav{position:sticky;top:10px;z-index:40;margin:16px auto 0;width:min(1320px,calc(100% - 2*var(--gut)));
  height:56px;border-radius:28px;display:flex;align-items:center;gap:clamp(12px,2vw,30px);padding-inline:20px;
  background:var(--glass-bar);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--glass-line);box-shadow:0 3px 8px var(--glass-edge)}
/* the page gutter; on a phone turned on its side it grows to clear the notch (viewport-fit=cover) */
:root{--gut:max(60px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px))}
.gnav .mark{flex:none}
.gnav .mark .ar{font-size:1.75rem}
.gnav .mark .en{font-size:0.75rem}
.gtabs{position:relative;display:flex;align-items:center;gap:clamp(6px,1.4vw,22px);margin-inline-end:auto;list-style:none;padding:0;margin-block:0}
.gtabs a{position:relative;z-index:1;display:block;font-family:var(--r-ar);font-size:1.0625rem;line-height:1;color:var(--wine);
  text-decoration:none;padding:10px 12px;white-space:nowrap;border-radius:12px;transition:color .2s}
/* just above the menu-sheet tier (1081 to 1320 wide) the English tabs sit a little closer */
@media (min-width:1081px) and (max-width:1320px){
  :lang(en) .gtabs{gap:2px}
  :lang(en) .gtabs a{padding-inline:8px}
  :lang(en).gnav,:lang(en) .gnav{gap:14px}
}
.gtabs a[aria-current="page"],.gtabs a.on{color:var(--magenta-text)}
.gtabs a:focus-visible{outline:2px solid var(--magenta-text);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.gtabs a:hover{color:var(--magenta-text)}}
.gtabs a:active{color:var(--magenta-text)}
/* while the square sits on another tab (a section of this page), the page's own tab reads as plain */
.gtabs.spied a[aria-current="page"]:not(.on){color:var(--wine)}
@media (hover:hover) and (pointer:fine){.gtabs.spied a[aria-current="page"]:not(.on):hover{color:var(--magenta-text)}}
/* the square behind the tab you are on; it swooshes to the next one */
.tabsq{position:absolute;top:50%;height:38px;margin-top:-19px;inset-inline-start:0;width:0;z-index:0;border-radius:12px;
  background:var(--tab-square);box-shadow:inset 0 0 0 1px var(--tab-square-edge);pointer-events:none;opacity:0}
.tabsq.ready{opacity:1}

.lang{flex:none;display:flex;align-items:center;gap:2px;height:36px;padding:3px;border-radius:18px;background:var(--blush);
  box-shadow:inset 0 0 0 1px var(--tab-square-edge)}
.lang button{font-family:var(--sm);font-weight:400;font-size:0.75rem;line-height:1;min-width:30px;height:30px;border:0;border-radius:15px;
  background:transparent;color:var(--wine);cursor:pointer;padding:0 8px;touch-action:manipulation}
.lang button[aria-pressed="true"]{background:var(--wine);color:var(--page)}
.lang button:active{transform:scale(.94)}
.lang button:not([aria-pressed="true"]):active{background:var(--tab-square)}
.lang button:focus-visible{outline:2px solid var(--magenta-text);outline-offset:2px}
.lang button[lang="ar"]{font-family:var(--r-ar);font-size:0.9375rem}

/* light / dark: one round control, a half-filled disc that turns over */
.themebtn{flex:none;width:36px;height:36px;border-radius:18px;border:0;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;
  background:var(--blush);box-shadow:inset 0 0 0 1px var(--tab-square-edge);color:var(--wine);touch-action:manipulation}
.themebtn svg{width:18px;height:18px;transition:transform .24s cubic-bezier(.23,1,.32,1)}
.themebtn[aria-pressed="true"] svg{transform:rotate(180deg)}
.themebtn:focus-visible{outline:2px solid var(--magenta-text);outline-offset:2px}
.themebtn:active{transform:scale(.95)}
.pill{flex:none;font-family:var(--sm);font-weight:400;font-size:0.9375rem;line-height:1;color:var(--page);text-decoration:none;
  padding:12px 24px;border-radius:999px;border:0;cursor:pointer;touch-action:manipulation;
  background:linear-gradient(180deg,var(--magenta) 0%,var(--magenta-text) 100%);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--white) 35%,transparent);transition:transform .12s cubic-bezier(.23,1,.32,1)}
/* a pointer resting on it: an inner line, no travel and no outer shadow */
@media (hover:hover) and (pointer:fine){.pill:hover{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--white) 35%,transparent),inset 0 0 0 2px color-mix(in srgb,var(--white) 30%,transparent)}}
.pill:active{transform:scale(.97)}
.pill:focus-visible{outline:2px solid var(--wine);outline-offset:3px}

.menubtn{display:none;flex:none;width:36px;height:36px;border-radius:18px;border:0;cursor:pointer;background:var(--blush);
  box-shadow:inset 0 0 0 1px var(--tab-square-edge);align-items:center;justify-content:center;flex-direction:column;gap:4px;padding:0;touch-action:manipulation}
.menubtn i{display:block;width:16px;height:2px;border-radius:1px;background:var(--wine);transition:transform .2s cubic-bezier(.23,1,.32,1),opacity .2s}
.gnav.open .menubtn i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.gnav.open .menubtn i:nth-child(2){opacity:0}
.gnav.open .menubtn i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.menubtn:focus-visible{outline:2px solid var(--magenta-text);outline-offset:2px}
.menubtn:active{transform:scale(.95)}
.gnav .mark:focus-visible,.gfoot .mark:focus-visible{outline:2px solid var(--magenta-text);outline-offset:4px;border-radius:8px}
.gnav .mark:active,.gfoot .mark:active{opacity:.7}

/* ---------- 44px targets ----------
   The bar's controls are drawn smaller than a fingertip (26 to 39px). Each one
   carries a transparent pad that grows its hit area to 44 x 44 and leaves the
   drawing alone. The pad is sized from the control itself: (its size - 44) / 2
   on each side, and nothing when the control is already big enough.
   Neighbouring pads never overlap: the two language buttons split at the middle
   of the gap between them and grow outward only. */
.gnav .mark,.pill,.lang button,.themebtn,.menubtn,.gfoot .mark,.gfoot-links a,.gtabs a{position:relative}
.gnav .mark::after,.pill::after,.lang button::after,.themebtn::before,.menubtn::after,.gfoot .mark::after,.gfoot-links a::after,.gtabs a::after{
  content:"";position:absolute;inset-block:min(0px,calc((100% - 44px)/2));inset-inline:min(0px,calc((100% - 44px)/2))}
.lang button:first-child::after{inset-inline:min(-1px,calc(100% - 43px)) -1px}
.lang button:last-child::after{inset-inline:-1px min(-1px,calc(100% - 43px))}


/* ---------- footer: one quiet centred block under the bottom band ---------- */
.gfoot{display:flex;flex-direction:column;align-items:center;gap:10px;padding:34px var(--gut) calc(34px + env(safe-area-inset-bottom,0px));
  background:var(--page);text-align:center}
.gfoot .mark .ar{font-size:1.875rem}
.gfoot .mark .en{font-size:0.8125rem}
.gfoot-tag{margin:0;font-family:var(--r-ar);font-size:1.0625rem;line-height:1.6;color:var(--wine)}
:lang(en) .gfoot-tag{font-family:var(--r-en)}
.gfoot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;list-style:none;margin:6px 0 0;padding:0}
.gfoot-links a{display:block;font-family:var(--r-ar);font-size:1rem;line-height:1.5;color:var(--wine);text-decoration:none;padding:6px 2px;
  border-bottom:1px solid transparent}
:lang(en) .gfoot-links a{font-family:var(--r-en)}
.gfoot-links a:focus-visible{outline:2px solid var(--magenta-text);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.gfoot-links a:hover{color:var(--magenta-text);border-bottom-color:currentColor}}
.gfoot-links a:active{color:var(--magenta-text)}
/* under the links: only the business line (legal name, license, address),
   once nav.js has a value for it (hidden until then). The emails and the
   WhatsApp number live on contact.html (owner F1, 2026-10-09); the footer
   links there. .gfoot-ch is kept for a contact row a page may still carry:
   each address a 44px-tall target of its own (8 + 28 + 8). */
.gfoot-contact{display:flex;flex-direction:column;align-items:center;margin:4px 0 0;max-width:min(100%,560px);scroll-margin-top:96px}
.gfoot-ch,.gfoot-biz{margin:0;font-family:var(--r-ar);font-size:1rem;line-height:1.6;color:var(--wine);text-align:center;overflow-wrap:anywhere}
:lang(en) .gfoot-ch,:lang(en) .gfoot-biz{font-family:var(--r-en)}
.gfoot-ch a{display:inline-block;padding:8px 2px;font-family:var(--sm);font-size:1rem;line-height:28px;color:var(--magenta-text);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;border-radius:4px;touch-action:manipulation}
.gfoot-ch a:focus-visible{outline:2px solid var(--magenta-text);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.gfoot-ch a:hover{text-decoration-thickness:2px}}
.gfoot-ch a:active{opacity:.75}
.gfoot-biz{margin-top:6px;padding-block:4px}
/* a quiet "back" link under a finished object (about, the two sign-up pages) */
.site a.home:active{opacity:.7}
.gfoot .mark .ar{color:var(--wine)}
.gfoot .mark .en{color:var(--magenta-text)}
.gnav .mark .ar{color:var(--wine)}
.gnav .mark .en{color:var(--wine)}   /* wine, not magenta: it reads over the wine curtains when the glass bar passes them (audit L16) */

/* ---------- mobile menu sheet ---------- */
.gsheet{display:none}

/* the six tabs fold into the menu sheet before they can crowd the bar */
@media (max-width:1080px){
  .gnav .gtabs{display:none}
  .gnav .spacer{flex:1}
  .menubtn{display:flex}
  /* the sheet is a solid sheet of paper, not glass: a blur nested inside the
     blurred bar blurs nothing, and whatever page lies behind it must not show
     through the words. A tinted hairline and the bar's own 3px shadow set it
     off from the page; no scrim. */
  .gsheet{display:block;position:absolute;top:calc(100% + 8px);inset-inline:0;border-radius:20px;background:var(--sheet);
    border:1px solid var(--sheet-line);box-shadow:0 3px 8px var(--glass-edge);
    padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:50% 0;pointer-events:none;
    transition:opacity .18s cubic-bezier(.23,1,.32,1),transform .18s cubic-bezier(.23,1,.32,1),visibility 0s .18s}
  .gnav.open .gsheet{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
  .gsheet a{display:flex;align-items:center;min-height:44px;font-family:var(--r-ar);font-size:1.125rem;color:var(--wine);text-decoration:none;padding:12px 16px;border-radius:12px}
  .gsheet a:focus-visible{outline:2px solid var(--magenta-text);outline-offset:-2px}
  .gsheet a:active{background:var(--press)}
  .gsheet a[aria-current="page"]{background:var(--tab-square);box-shadow:inset 0 0 0 1px var(--tab-square-edge);color:var(--magenta-text)}
  .gsheet.spied a[aria-current="page"]:not(.on){background:none;box-shadow:none;color:var(--wine)}
  .gsheet a.on{background:var(--tab-square);box-shadow:inset 0 0 0 1px var(--tab-square-edge);color:var(--magenta-text)}
  :lang(en) .gsheet a{font-family:var(--r-en)}
}

/* ============ narrower desktops and tablets ============ */
@media (max-width:1180px){ :root{--gut:max(40px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px))} }

/* ============ phone ============ */
@media (max-width:760px){
  :root{--gut:max(16px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px))}
  .gnav{top:8px;margin-top:14px;height:48px;border-radius:24px;padding-inline:8px 12px;gap:8px}
  .gnav .mark .ar{font-size:1.375rem}.gnav .mark .en{font-size:0.6875rem}
  .pill{padding:9px 18px;font-size:0.875rem}
  .lang{height:32px}.lang button{height:26px;min-width:28px}
  /* the theme control stands 12px from the language switch (the other gaps stay 8)
     so that both 44px pads fit between them; its own pad leans toward the pill */
  .themebtn{width:32px;height:32px;margin-inline-start:4px}
  .themebtn::before{inset-inline:-4px -8px}
}

/* ============ narrow phones: the bar never overflows ============
   Worst case is a long English pill.
   Up to 383px wide the bar has no room for the theme control beside a 44px pad
   for everything else, so it moves into the menu sheet as its first row, with
   its name written out (the button's own aria-label, so it follows the
   language). It is still the same button: same id, same place in the tab
   order, shown only while the menu is open. */
@media (max-width:383px){
  /* an empty first row, exactly as tall as a row of the sheet (same face, size and padding), with a hairline under it */
  .gsheet::before{content:"\a0";display:block;box-sizing:border-box;min-height:49px;padding:12px 16px 16px;margin-bottom:4px;border-bottom:1px solid var(--sheet-line);
    font-family:var(--r-ar);font-size:1.125rem}
  :lang(en) .gsheet::before{font-family:var(--r-en)}
  .themebtn{position:absolute;z-index:1;top:calc(100% + 17px);inset-inline:9px;width:auto;height:auto;min-height:44px;margin:0;border-radius:12px;
    justify-content:flex-start;gap:12px;padding:12px 16px;background:none;box-shadow:none;
    font-family:var(--r-ar);font-size:1.125rem;line-height:normal;color:var(--wine);
    visibility:hidden;opacity:0;transform:translateY(-6px);
    transition:opacity .18s cubic-bezier(.23,1,.32,1),transform .18s cubic-bezier(.23,1,.32,1),background-color .12s,visibility 0s .18s}
  :lang(en) .themebtn{font-family:var(--r-en)}
  .themebtn::before{content:none}
  .themebtn::after{content:attr(aria-label)}
  .gnav.open .themebtn{visibility:visible;opacity:1;transform:none;transition-delay:0s}
  .themebtn:focus-visible{outline-offset:-2px}
  .themebtn:active{transform:none;background:var(--press)}
}
/* the narrowest phones (320): the bar takes a little of its own margin back */
@media (max-width:345px){
  .gnav{width:calc(100% - 16px);padding-inline:6px 8px}
}

/* ============ less glass, more contrast: her system settings ============ */
@media (prefers-reduced-transparency:reduce){
  .gnav{background:var(--bar-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-contrast:more){
  .gnav{background:var(--bar-solid);-webkit-backdrop-filter:none;backdrop-filter:none;border-color:var(--wine);box-shadow:inset 0 0 0 1px var(--wine)}
  .gsheet{border-color:var(--wine);box-shadow:inset 0 0 0 1px var(--wine)}
  .lang,.themebtn,.menubtn,.tabsq{box-shadow:inset 0 0 0 2px var(--wine)}
  .pill{background:var(--magenta-text);box-shadow:inset 0 0 0 2px var(--wine)}
  .gsheet a[aria-current="page"],.gsheet a.on{box-shadow:inset 0 0 0 2px var(--wine)}
  .gsheet.spied a[aria-current="page"]:not(.on){box-shadow:none}
  .gfoot-links a{text-decoration:underline;text-underline-offset:4px}
  :where(.site) :focus-visible{outline-width:3px}
}
@media (prefers-contrast:more) and (max-width:383px){
  .themebtn{box-shadow:none}
}


/* ============ tabs on one line down to tablet width ============
   From 821 to 1080 wide the five tabs stay in the bar, on the same line as
   the word-mark and the controls (a little tighter). Narrower than that they
   fold into the menu button's drop-down sheet. */
@media (min-width:821px) and (max-width:1080px){
  .gnav{gap:10px;padding-inline:14px}
  .gnav .gtabs{display:flex;gap:0}
  .gnav .gtabs a{font-size:0.9375rem;padding:9px 8px}
  :lang(en) .gnav .gtabs a{font-size:0.875rem;padding-inline:10px}   /* three tabs since 2026-11-10: room to breathe (audit L9) */
  .gnav .gtabs{gap:6px}
  .gnav .spacer{flex:0}
  .menubtn,.gsheet{display:none !important}
  .gnav .pill{padding:11px 16px;font-size:0.875rem}
}


/* the room ends on a baseboard: a wine strip under a magenta edge, then the footer (in dark the strip is plum, never a light band) */
.gfoot{position:relative;border-top:4px solid var(--magenta);box-shadow:inset 0 10px 0 var(--base);padding-top:48px}

/* the top bar: thin glass that stays pinned while the page scrolls under it */
.gnav{height:46px;border-radius:23px;
  background:var(--bar-glass);
  -webkit-backdrop-filter:blur(6px) saturate(1.2);backdrop-filter:blur(6px) saturate(1.2);
  border-color:color-mix(in srgb,var(--white) 60%,transparent)}
.gnav .mark .ar{font-size:1.5rem}.gnav .mark .en{font-size:0.6875rem}
.gnav .pill{padding:9px 20px}
.lang{height:32px}.lang button{height:26px}
.themebtn,.menubtn{width:32px;height:32px}
.tabsq{height:32px;margin-top:-16px}
.gtabs a{padding-block:8px}
@media (max-width:760px){.gnav{height:42px}}

/* ---------- the word-mark sits clear of the bar's rounded end ---------- */
.gnav{padding-inline-start:30px}
@media (max-width:760px){.gnav{padding-inline-start:16px}}
/* English: the English name on top and large, the Arabic under it */
:lang(en) .mark{display:flex;flex-direction:column-reverse;align-items:flex-start}
:lang(en) .mark .en{font-size:clamp(1.25rem,2vw,1.625rem);color:var(--wine);margin:0;line-height:1.05}
:lang(en) .mark .ar{font-size:clamp(0.6875rem,1vw,0.875rem);color:var(--magenta-text);line-height:1.2}
:lang(en) .gnav .mark .en{font-size:1.5rem}:lang(en) .gnav .mark .ar{font-size:0.75rem}

/* ---------- switching language: one smooth swipe ----------
   The whole page glides in from the side the new language reads from
   (English from the left, Arabic from the right), easing to rest. */
.lang-flip .gnav,.lang-flip main,.lang-flip .gfoot{animation:langswipe .6s cubic-bezier(.22,1,.36,1) both}
.lang-flip .gnav{animation-name:langswipenav}
@keyframes langswipe{from{transform:translateX(var(--from,-48px));opacity:0}to{transform:none;opacity:1}}
@keyframes langswipenav{from{translate:var(--from,-48px) 0;opacity:0}to{translate:0 0;opacity:1}}
.lang-flip[dir="rtl"],[dir="rtl"] .lang-flip{--from:48px}
@media (prefers-reduced-motion:reduce){
  .tabsq,.gsheet,.themebtn,.themebtn svg,.menubtn i{transition:none !important}
}
@media (prefers-reduced-motion:reduce){.lang-flip .gnav,.lang-flip main,.lang-flip .gfoot{animation:none}}

@media (prefers-reduced-transparency:reduce){.gnav{background:var(--bar-solid)}}

/* the bar's pill: wine like every button on the quiet pages (pink at night) */
.pill{background:var(--btn);color:var(--btn-ink);box-shadow:none;transition:background-color .18s ease,transform .12s cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){.pill:hover{background:var(--btn-hover);box-shadow:none}}

/* ---------- the curtain that crosses the screen on a language or light change (nav.js) ----------
   It hangs on <body>, outside .site, so it takes the :root room tokens: wine by day, pink at night. */
.tfs-curtain{position:fixed;inset:0 -40px;z-index:9999;pointer-events:none;visibility:hidden;
  background:
    repeating-linear-gradient(90deg,color-mix(in srgb,var(--white) 7%,transparent) 0 14px,color-mix(in srgb,var(--ink-deep) 10%,transparent) 14px 30px,transparent 30px 44px),
    var(--curtain-a)}
.tfs-curtain::before,.tfs-curtain::after{content:"";position:absolute;top:0;bottom:0;width:10px;background:var(--room-line)}
.tfs-curtain::before{left:0}.tfs-curtain::after{right:0}
.tfs-curtain.in{visibility:visible;transform:translateX(calc(-105% * var(--d,1)))}
.tfs-curtain.in.go{transform:none;transition:transform .23s cubic-bezier(.55,0,.75,.2)}
.tfs-curtain.out{visibility:visible;transform:none}
.tfs-curtain.out.go{transform:translateX(calc(105% * var(--d,1)));transition:transform .32s cubic-bezier(.2,.7,.25,1)}

/* ---------- the phone menu, redone: a cream card with clear rows, and the language switch at its foot ---------- */
.gsheet-foot{display:none}
@media (max-width:1080px){
  .gsheet{padding:10px;border-radius:22px;border:2px solid var(--magenta);background:var(--white);
    box-shadow:0 6px 0 color-mix(in srgb,var(--magenta) 22%,transparent)}
  .gsheet>a{justify-content:space-between;font-family:var(--sm);font-size:1.125rem;color:var(--wine);padding:12px 16px;border-radius:14px}
  .gsheet>a+a{border-top:1.5px dashed color-mix(in srgb,var(--magenta) 30%,var(--white));border-radius:0}
  .gsheet>a::after{content:"‹";font-family:var(--sm);font-size:1.25rem;color:var(--magenta-text)}
  [dir="ltr"] .gsheet>a::after{content:"›"}
  .gsheet>a[aria-current="page"],.gsheet>a.on{background:var(--blush);border-radius:14px;box-shadow:none;color:var(--magenta-text)}
  :lang(en) .gsheet>a{font-family:var(--r-en)}
  .gsheet-foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding:12px 16px 6px;
    border-top:2px solid color-mix(in srgb,var(--magenta) 35%,var(--white));font-family:var(--sm);font-size:0.9375rem;color:var(--wine)}
  :root[data-theme="dark"] .gsheet{background:var(--night-2);border-color:var(--magenta-light)}
  :root[data-theme="dark"] .gsheet>a,:root[data-theme="dark"] .gsheet-foot{color:var(--night-ink)}
}
/* on phones the language switch lives in the menu, so the bar has room to breathe */
@media (max-width:760px){ .gnav>.lang{display:none} }

/* ---------- the word-mark lockup in the bar (owner 2026-11-10: the second line was too small and cramped) ----------
   Two lines on one start edge with a clean 3px gap: the page language's name large, the other name at least
   13px (Royals Queen) or 14px (Rakkas), never smaller. Sizes in px: it is the logo, and the bar's height is fixed. */
.site .gnav{height:46px}   /* +4px on phones, +4px on desktops: room for the two lines */
.site .gnav .mark{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px}
.site .gnav .mark .ar,.site .gnav .mark .en{display:block;margin:0;white-space:nowrap}
.site .gnav .mark .ar{font-size:22px;line-height:1.08}
.site .gnav .mark .en{font-size:13px;line-height:1.1;letter-spacing:.04em}
.site:lang(en) .gnav .mark{flex-direction:column-reverse}
.site:lang(en) .gnav .mark .en{font-size:20px;line-height:1;letter-spacing:.01em}
.site:lang(en) .gnav .mark .ar{font-size:15px;line-height:1.15}
@media (min-width:761px){
  .site .gnav{height:50px}
  .site .gnav .mark .ar{font-size:24px}
  .site .gnav .mark .en{font-size:14px}
  .site:lang(en) .gnav .mark .en{font-size:22px}
  .site:lang(en) .gnav .mark .ar{font-size:16px}
}