/* ============================================================
   RETICENCE — language switcher + non-Latin / RTL support
   ------------------------------------------------------------
   Monochrome only: --paper #FFFFFF · --ink #1B1917 · --grey #8A8A8A.
   No flags. A flag is a country, not a language — and a row of
   colour in the header would break the monochrome rule outright.
   The control matches .site-switch exactly: PP Neue Montreal,
   10px, uppercase, 0.22em tracking, grey resolving to ink.
   ============================================================ */

.lang-switch { position: relative; }

.lang-current {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--sans, 'PP Neue Montreal', system-ui, sans-serif);
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grey, #8A8A8A);
  transition: color .2s ease;
}
.lang-current:hover,
.lang-switch.is-open .lang-current { color: var(--ink, #1B1917); }

.lang-caret {
  transition: transform .25s var(--ease-out, cubic-bezier(.22,1,.36,1));
  margin-inline-start: -0.1rem;
}
.lang-switch.is-open .lang-caret { transform: rotate(180deg); }

.lang-list {
  position: absolute;
  top: calc(100% + 0.9rem);
  inset-inline-end: 0;
  min-width: 11rem;
  padding: 0.4rem 0;
  background: var(--paper, #FFFFFF);
  border: 1px solid var(--hair, #E7E5E4);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.35rem);
  transition: opacity .22s ease, transform .28s var(--ease-out, cubic-bezier(.22,1,.36,1)), visibility .22s;
  z-index: 120;
}
.lang-switch.is-open .lang-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-option {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  width: 100%;
  padding: 0.55rem 1.1rem;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: start;
  font-family: var(--sans, 'PP Neue Montreal', system-ui, sans-serif);
  color: var(--grey, #8A8A8A);
  transition: color .18s ease, background-color .18s ease;
}
.lang-option:hover { color: var(--ink, #1B1917); background: #FAFAF9; }
.lang-option.is-current { color: var(--ink, #1B1917); }

.lang-o-code {
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  min-width: 1.5rem;
  color: var(--grey, #8A8A8A);
}
.lang-option.is-current .lang-o-code,
.lang-option:hover .lang-o-code { color: var(--ink, #1B1917); }
.lang-o-name { font-size: 0.8125rem; letter-spacing: 0.01em; }

@media (max-width: 900px) {
  .lang-list { inset-inline-end: auto; inset-inline-start: 0; }
}

/* ------------------------------------------------------------
   NAV LENGTH
   Translations run longer than English — "Mind Map" becomes "Carte
   mentale", "About" becomes "À propos". The nav was laid out on
   English widths, so items wrapped to two lines and shunted the
   header out of alignment. Hold them on one line and buy the space
   back from the gap; do not let a translation break the masthead.
   ------------------------------------------------------------ */
.site-nav a,
.site-nav .nav-top,
.site-switch,
.lang-current { white-space: nowrap; }

html:not([lang="en"]) .site-nav { gap: 1.35rem; }
@media (max-width: 1180px) {
  html:not([lang="en"]) .site-nav { gap: 1rem; font-size: 0.95em; }
  html:not([lang="en"]) .header-end { gap: 1.15rem; }
}

/* ------------------------------------------------------------
   NON-LATIN TYPE
   PP Eiko and PP Neue Montreal contain ZERO Arabic glyphs and no
   usable CJK — verified against the .otf cmap tables, not assumed.
   So Arabic and Chinese MUST fall to a companion face or the page
   renders in whatever the browser picks, which is how a site stops
   looking like itself. These stacks lead with a licensed webfont
   (drop it in fonts/ at deploy) and fall back to the faces macOS,
   Windows and Android already ship — so it reads correctly today
   with nothing downloaded.
   ------------------------------------------------------------ */
html[lang="ar"] {
  --sans: "IBM Plex Sans Arabic", "SF Arabic", "Geeza Pro", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --serif: "IBM Plex Sans Arabic", "SF Arabic", "Geeza Pro", "Noto Naskh Arabic", Georgia, serif;
}
html[lang="zh"] {
  --sans: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Heiti SC", sans-serif;
  --serif: "Noto Serif SC", "Songti SC", "SimSun", Georgia, serif;
}

/* Arabic sits small against Latin at the same px — lift it slightly
   and open the leading, or the body copy reads cramped. */
html[lang="ar"] body { font-size: 1.06em; line-height: 1.75; }
/* Letter-spaced uppercase is a Latin device. Applied to Arabic it
   breaks the joins between letters and renders the word unreadable. */
html[lang="ar"] .eyebrow,
html[lang="ar"] .lang-o-code,
html[lang="ar"] .site-switch { letter-spacing: 0 !important; text-transform: none; }
/* Chinese has no word spaces, so tracking and uppercase do nothing
   useful and the display serif has no glyphs to set it in. */
html[lang="zh"] .eyebrow { letter-spacing: 0.08em; }

/* ------------------------------------------------------------
   RIGHT TO LEFT (Arabic)
   dir="rtl" on <html> mirrors the normal flow for free. These rules
   catch the places the layout was written with physical directions
   that do not flip on their own.
   ------------------------------------------------------------ */
/* ⚠️ DO NOT add flex-direction: row-reverse here.
   dir="rtl" ALREADY mirrors a flex row — the main axis follows the
   writing direction. Adding row-reverse flips it a second time and
   puts everything back left-to-right. The first version of this file
   did exactly that: the header came out unmirrored and it looked like
   the RTL rules were not loading at all, when they were loading and
   cancelling themselves. Let dir do the work; only patch what it
   genuinely cannot reach. */

[dir="rtl"] .hero-copy,
[dir="rtl"] .standfirst,
[dir="rtl"] .prose { text-align: right; }

/* The logo lockup is a designed object, not a layout. The header
   block moves to the right with everything else, but the mark must
   stay to the LEFT of the wordmark as drawn — mirroring a logo is
   how a brand mark ends up looking wrong to the one audience it was
   translated for. */
[dir="rtl"] .brand,
[dir="rtl"] .brand-words { direction: ltr; }

/* ⭐ ANYTHING POSITIONED WITH translateX() MUST BE HANDLED BY HAND.
   dir="rtl" mirrors LAYOUT, but it does not touch a transform written
   in JavaScript. The hero carousel sets
       track.style.transform = 'translateX(' + (-pos * 100) + '%)'
   which, against an RTL-ordered flex track, slides every image OFF the
   screen — the Arabic homepage rendered with a completely blank hero
   and only the dots showing. The slides carry no text, so the honest
   fix is to keep the carousel itself LTR and let the JS maths stand.
   ⛔ Do not "fix" this in app.js: the same code serves all 7 languages
   and the English/French behaviour is correct. */
[dir="rtl"] .hero-carousel,
[dir="rtl"] .hero-track { direction: ltr; }

/* Slide-in drawers hide themselves off the RIGHT edge (translateX(102%))
   and are anchored right. In RTL they belong on the left, or they fly in
   from the wrong side of the screen and cover the navigation. */
[dir="rtl"] .cart-drawer,
[dir="rtl"] .fav-drawer {
  right: auto;
  left: 0;
  border-left: 0;
  border-right: 1px solid var(--hair, #E7E5E4);
  transform: translateX(-102%);
}
[dir="rtl"] body.cart-open .cart-drawer,
[dir="rtl"] body.favs-open .fav-drawer { transform: translateX(0); }

/* Arrows point INTO the reading direction. A "→" beside Arabic text
   is pointing back the way the reader came. */
[dir="rtl"] .arrow,
[dir="rtl"] .ss-arrow { display: inline-block; transform: scaleX(-1); }

/* Anything genuinely bidirectional-unsafe stays LTR: prices, specs,
   dimensions, emails and the wordmark are read left-to-right in
   every locale. */
[dir="rtl"] .price,
[dir="rtl"] .spec-value,
[dir="rtl"] .dimensions,
[dir="rtl"] .brand-name,
[dir="rtl"] .brand-tag,
[dir="rtl"] .lang-o-code { direction: ltr; unicode-bidi: isolate; }

/* Work titles stay in Latin script in every language (they are the
   artist's own words). A Latin sentence sitting inside an RTL block
   has its trailing full stop moved to the far end of the line —
   ".Sculpture you can live with" — because the punctuation is
   direction-neutral and inherits the paragraph. Isolating each title
   keeps its own punctuation with it. */
[dir="rtl"] .piece-title,
[dir="rtl"] .card-title,
[dir="rtl"] .work-title,
[dir="rtl"] .p-title,
[dir="rtl"] [lang="en"] { unicode-bidi: isolate; }