/* KREO modes: the language and theme switches, dark paper, right to left, and the
 * fonts for Arabic, Urdu, Hindi and Japanese. Loaded after every other sheet. */

/* ---------- Switches in the top bar ---------- */
.prefs { position: relative; display: flex; gap: 6px; }
.top__nav .prefs button { padding: 0; height: 40px; min-width: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.top__nav .prefs__lang { padding: 0 13px 0 12px; }
.prefs__code { font-size: 10.5px; }
.prefs__theme svg { overflow: visible; }
.prefs__theme .sun { fill: currentColor; transition: r .5s var(--ease); }
.prefs__theme .rays path { stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; fill: none; }
.prefs__theme .rays { transform-origin: 10px 10px; transition: transform .6s var(--ease), opacity .4s; }
.prefs__theme .bite { fill: var(--paper); transform: translate(6px, -6px); transition: transform .55s var(--ease); }
[data-theme="dark"] .prefs__theme .sun { r: 6.4; }
[data-theme="dark"] .prefs__theme .rays { transform: rotate(90deg) scale(.4); opacity: 0; }
[data-theme="dark"] .prefs__theme .bite { transform: none; }
.prefs__theme:hover svg { transform: rotate(-18deg); transition: transform .5s var(--ease); }

.prefs__menu { position: absolute; top: calc(100% + 10px); inset-inline-start: 0; z-index: 40; margin: 0; padding: 6px; list-style: none; min-width: 190px;
  border-radius: 22px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 24px 60px -24px rgba(0,0,0,.35);
  transform-origin: top left; animation: prefsIn .35s var(--ease); }
[dir="rtl"] .prefs__menu { transform-origin: top right; }
@keyframes prefsIn { from { opacity: 0; transform: translateY(-6px) scale(.96); } }
.top__nav .prefs__menu button { width: 100%; height: auto; min-width: 0; justify-content: space-between; gap: 16px; padding: 11px 14px; border: 0; border-radius: 16px; font-size: 15px; text-align: start; }
.top__nav .prefs__menu button:hover { background: var(--paper); border-color: transparent; }
.prefs__menu i { font-style: normal; color: var(--soft); font-size: 10px; }
.prefs__menu [aria-checked="true"] { background: var(--ink); color: var(--paper); }
.top__nav .prefs__menu [aria-checked="true"]:hover { background: var(--ink); }
.prefs__menu [aria-checked="true"] i { color: var(--ember); }
.prefs__menu [lang="ar"], .prefs__menu [lang="ur"] { font-family: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif; }

@media (max-width: 760px) {
  .top { gap: 8px; }
  .top__nav { gap: 4px; }
  .top__nav .prefs button { height: 34px; min-width: 34px; }
  .top__nav .prefs__lang { padding: 0; }
  .prefs__code { display: none; }
  .prefs__menu { inset-inline-start: auto; inset-inline-end: -80px; }
}

/* the theme change spreads as a circle (see i18n.js) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* ---------- Tokens ---------- */
:root { --card: #fff; --body: #4a4946; --strip: #e2ded6; --chip: #e9e5de; --on-ink: #fff; }
[data-theme="dark"] {
  color-scheme: dark;
  --paper: #12110F; --ink: #EDE9E2; --soft: rgba(237,233,226,.52); --line: rgba(237,233,226,.13);
  --card: #1D1B18; --body: #B9B3A9; --strip: #26231F; --chip: #26231F; --on-ink: #12110F; --mute: #8f897f;
}

/* ---------- Dark: everything that had a fixed light colour ---------- */
[data-theme="dark"] body { background: var(--paper); color: var(--ink); }
[data-theme="dark"] .strip { background: var(--strip); }
[data-theme="dark"] .page { background: var(--paper); }
[data-theme="dark"] .page__close { color: var(--on-ink); }
[data-theme="dark"] .pill--dark { color: var(--on-ink); }
[data-theme="dark"] .pill--dark:hover, [data-theme="dark"] .top__nav .top__cta:hover, [data-theme="dark"] .credit__go:hover { color: #fff; }
[data-theme="dark"] .abx__now, [data-theme="dark"] .abx__phon button { background: var(--card); }
[data-theme="dark"] .abx__txt, [data-theme="dark"] .ab__txt { color: var(--body); }
[data-theme="dark"] .abx__ink::before { background-image: radial-gradient(rgba(237,233,226,.12) 1px, transparent 1.3px); }
[data-theme="dark"] .contact__disc { color: var(--on-ink); }
[data-theme="dark"] .contact__ring { border-color: var(--line); }
[data-theme="dark"] .chips button { background: var(--chip); }
[data-theme="dark"] .chips button:hover { background: #312d28; }
[data-theme="dark"] .chips button.on, [data-theme="dark"] .chips button.on:hover { background: var(--ink); color: var(--on-ink); }
[data-theme="dark"] .chat input { color: var(--ink); }
[data-theme="dark"] .chat input::placeholder { color: #6b665e; }
[data-theme="dark"] .chat__done { background: var(--card); }
[data-theme="dark"] .chat__enter { background: var(--chip); color: var(--ink); }
[data-theme="dark"] .page .reach { border-top-color: var(--line); }
[data-theme="dark"] .about__copy { color: var(--body); }
[data-theme="dark"] .cur__pen { filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
[data-theme="dark"] .ink-ghost { filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
[data-theme="dark"] ::selection { color: #12110F; }

/* ---------- Scripts ---------- */
html[lang="ar"] { --sans: 'Inter Tight', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif; --serif: 'Instrument Serif', 'Amiri', Georgia, serif; --mono: 'Martian Mono', 'IBM Plex Sans Arabic', monospace; }
html[lang="ur"] { --sans: 'Inter Tight', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif; --serif: 'Instrument Serif', 'Noto Nastaliq Urdu', serif; --mono: 'Martian Mono', 'Noto Sans Arabic', monospace; }
html[lang="hi"] { --sans: 'Inter Tight', 'Noto Sans Devanagari', sans-serif; --serif: 'Instrument Serif', 'Noto Serif Devanagari', serif; --mono: 'Martian Mono', 'Noto Sans Devanagari', monospace; }
html[lang="ja"] { --sans: 'Inter Tight', 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif; --serif: 'Instrument Serif', 'Noto Serif JP', serif; --mono: 'Martian Mono', 'Noto Sans JP', monospace; }
html:not([lang="en"]) body { font-family: var(--sans); }

/* Arabic letters join: never letter space them, never slant them. */
html[lang="ar"] *, html[lang="ur"] * { letter-spacing: 0 !important; }
html[lang="ar"] em, html[lang="ur"] em, html[lang="ar"] i, html[lang="ur"] i,
html[lang="hi"] em, html[lang="ja"] em { font-style: normal; }
html:not([lang="en"]) .mono { text-transform: none; }
html[lang="ar"] .mono, html[lang="ur"] .mono, html[lang="hi"] .mono { font-size: 12.5px; letter-spacing: 0; }
html[lang="ja"] .mono { font-size: 11px; letter-spacing: .04em; }
html[lang="ja"] .h1, html[lang="ja"] .abx__big, html[lang="ja"] .about__title { letter-spacing: -.01em; line-height: 1.25; }
html[lang="hi"] .h1, html[lang="hi"] .abx__big, html[lang="hi"] .about__title { letter-spacing: -.01em; line-height: 1.3; }
html[lang="ar"] .h1, html[lang="ar"] .abx__big, html[lang="ar"] .about__title { line-height: 1.35; font-weight: 600; }
html[lang="ur"] .h1, html[lang="ur"] .abx__big, html[lang="ur"] .about__title { line-height: 1.6; font-weight: 600; }
html[lang="ur"] .h1 em, html[lang="ur"] .abx__big em, html[lang="ur"] .contact__disc em { font-family: 'Noto Nastaliq Urdu', serif; font-weight: 400; line-height: 2.1; }
html[lang="ar"] .h1 em, html[lang="ar"] .abx__big em, html[lang="ar"] .contact__disc em { font-family: 'Amiri', serif; font-weight: 700; }
html:not([lang="en"]) .abx__big em { font-size: 1em; }
html[lang="ar"] .abx__line, html[lang="ur"] .abx__line { bottom: -.02em; }
html[lang="ar"] .contact__disc p, html[lang="ur"] .contact__disc p { line-height: 1.5; }
html[lang="ar"] .abx__tick, html[lang="ur"] .abx__tick, html[lang="hi"] .abx__tick { height: 1.9em; }
html[lang="ar"] .abx__tick p, html[lang="ur"] .abx__tick p, html[lang="hi"] .abx__tick p { line-height: 1.9; }

/* ---------- Right to left ---------- */
/* The row of work, the cursor and the ink word are pictures, not text: they keep their own direction. */
[dir="rtl"] .row, [dir="rtl"] .cur, [dir="rtl"] .zoomer, [dir="rtl"] .abx__ink, [dir="rtl"] .abx__badge, [dir="rtl"] .case__film, [dir="rtl"] .case__frame { direction: ltr; }
[dir="rtl"] .page__close { right: auto; left: 18px; }
[dir="rtl"] .credit__go svg, [dir="rtl"] .pill svg, [dir="rtl"] .case__back svg, [dir="rtl"] .btn svg { transform: scaleX(-1); }
[dir="rtl"] .chat input[type="email"], [dir="rtl"] .reach a[href^="mailto"], [dir="rtl"] .foot__mail { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .chat input[type="email"] { text-align: right; }
[dir="rtl"] .chat__done { border-left: 0; border-right: 3px solid var(--ember); }
[dir="rtl"] .chat__done.bad { border-right-color: #e5484d; }
[dir="rtl"] .case__scrub b { text-align: left; }
[dir="rtl"] .abx__line { left: auto; right: -3%; transform: scaleX(-1); }
[dir="rtl"] .eyebrow, [dir="rtl"] .credit__num { direction: rtl; }
[dir="rtl"] .credit__num, [dir="rtl"] .cNum { unicode-bidi: plaintext; }

/* Project names are Latin: keep them, and the pills that carry them, left to right. */
[dir="rtl"] .credit__name, [dir="rtl"] .index button, [dir="rtl"] .case__name, [dir="rtl"] .case__url { direction: ltr; }
[dir="rtl"] .credit__name { unicode-bidi: isolate; }
/* No fake slants on scripts that have no italic. */
html:not([lang="en"]) .case__line, html:not([lang="en"]) em, html:not([lang="en"]) i { font-style: normal; }

/* Small labels: the script's own font first, so word gaps are not monospace gaps. */
html[lang="ar"] { --mono: 'IBM Plex Sans Arabic', 'Martian Mono', monospace; }
html[lang="ur"] { --mono: 'Noto Sans Arabic', 'Martian Mono', monospace; }
html[lang="hi"] { --mono: 'Noto Sans Devanagari', 'Martian Mono', monospace; }
html[lang="ja"] { --mono: 'Noto Sans JP', 'Martian Mono', monospace; }
/* Emails, clocks and counters stay in the mono face. */
html:not([lang="en"]) .clock, html:not([lang="en"]) .credit__num, html:not([lang="en"]) .reach a, html:not([lang="en"]) .foot__mail,
html:not([lang="en"]) .case__url, html:not([lang="en"]) .case__scrub b, html:not([lang="en"]) .index button span, html:not([lang="en"]) .prefs__code { font-family: 'Martian Mono', monospace; }
html[lang="ja"] .h1 .ln + .ln::before { content: ''; }
html[lang="ur"] .h1 { line-height: 1.5; }
html[lang="ur"] .h1 em { line-height: 1.5; }
.page__in { overflow-x: hidden; }
.stage > .top { z-index: 30; }