@font-face{font-family:'Noto Sans';font-style:normal;font-display:swap;font-weight:800;src:url(/assets/fonts/noto-sans-arabic-arabic-800-normal.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF}
@font-face{font-family:'Noto Sans';font-style:normal;font-display:swap;font-weight:700;src:url(/assets/fonts/noto-sans-arabic-arabic-700-normal.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF}
@font-face{font-family:'Noto Sans';font-style:normal;font-display:swap;font-weight:600;src:url(/assets/fonts/noto-sans-arabic-arabic-600-normal.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF}
@font-face{font-family:'Noto Sans';font-style:normal;font-display:swap;font-weight:500;src:url(/assets/fonts/noto-sans-arabic-arabic-500-normal.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF}
@font-face{font-family:'Noto Sans';font-style:normal;font-display:swap;font-weight:400;src:url(/assets/fonts/noto-sans-arabic-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF}
/* CAFÉ+ — extra styles for the translated pages (thecafeplus.eu/de/, /cs/, … /ar/). */

/* Notice under the EU bar: AI translation, English is the reference */
.ai-note { background: var(--accent-soft); border-bottom: 1px solid var(--accent-mid); color: var(--ink); font-size: 14px; line-height: 1.45; }
.ai-note .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; min-height: 40px; padding-top: 7px; padding-bottom: 7px; }
.ai-note a { color: var(--accent-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.ai-note a:hover { color: var(--ink); }
.ai-note a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Long words (German, Finnish, Greek) may break instead of running out of their box */
html:not([lang="en"]) h1, html:not([lang="en"]) h2, html:not([lang="en"]) h3, html:not([lang="en"]) h4 { overflow-wrap: break-word; hyphens: auto; }
html:not([lang="en"]) .btn, html:not([lang="en"]) .chip, html:not([lang="en"]) .pill { overflow-wrap: anywhere; }

/* Arabic: right to left; letter spacing would break the joined letters */
[dir="rtl"] body, [dir="rtl"] * { letter-spacing: 0 !important; }
[dir="rtl"] .tl-track { direction: ltr; }
[dir="rtl"] .stages .st:not(:last-child)::after,
[dir="rtl"] .chain li:not(:last-child)::after,
[dir="rtl"] .objs .ob:not(.ob-policy):not(:nth-child(4))::after { right: auto; left: -17px; transform: rotate(-135deg); }
[dir="rtl"] .bars .tr { transform: scaleX(-1); }
[dir="rtl"] .twin-tile::before { right: auto; left: -40px; }
[dir="rtl"] .twin-tile .twin-ico { left: auto; right: 22px; }
[dir="rtl"] .hero .twin-tile { padding: 20px 98px 20px 24px; }
[dir="rtl"] .cover-num { left: auto; right: 20px; }
[dir="rtl"] .eu-lockup { padding-right: 0; border-right: 0; padding-left: 36px; border-left: 1px solid var(--line); }
[dir="rtl"] .lang-flags a { padding: 0 5px 0 9px; }
[dir="rtl"] .to-top { right: auto; left: 24px; }
[dir="rtl"] .site .skip { left: auto; right: 12px; }
[dir="rtl"] .prose ul { padding-left: 0; padding-right: 24px; }
[dir="rtl"] .srcs ul, [dir="rtl"] .res ul.dots { padding-left: 0; padding-right: 20px; }
[dir="rtl"] .site .topics, [dir="rtl"] .refs, [dir="rtl"] .legal ul { padding-left: 0; padding-right: 22px; }
[dir="rtl"] .prose blockquote { padding: 8px 28px 8px 0; border-left: 0; border-right: 4px solid var(--accent); }
[dir="rtl"] .chart .legend2 i { margin-right: 0; margin-left: 6px; }
[dir="rtl"] .toc b { margin-right: 0; margin-left: 6px; }
[dir="rtl"] .gc .a1, [dir="rtl"] .gc .a3 { padding-right: 0; padding-left: 88px; }
[dir="rtl"] .gc .a2, [dir="rtl"] .gc .a4 { padding-left: 0; padding-right: 88px; }
[dir="rtl"] .ltbl th, [dir="rtl"] .ltbl td { text-align: right; }
@media (max-width: 1100px) { [dir="rtl"] .lang-flags a { padding: 0 4px; } }
@media (max-width: 640px) {
  [dir="rtl"] .hero .twin-tile { padding: 16px 86px 16px 18px; }
  [dir="rtl"] .hero .twin-tile .twin-ico { left: auto; right: 18px; }
  [dir="rtl"] .eu-lockup { border-left: 0; padding-left: 0; }
  [dir="rtl"] .to-top { right: auto; left: 16px; }
  [dir="rtl"] .lang-flags a { padding: 0 2px; }
}

/* Longer headings and credit lines in some languages: slightly smaller on computer screens, so the
   About heading stays on two lines and the quote credit on one line */
@media (min-width: 1101px) {
  html[lang="de"] .site .about-h { font-size: min(41px, calc((100vw - 80px) * .0353)); }
  html[lang="el"] .site .about-h { font-size: min(40px, calc((100vw - 80px) * .0345)); }
  html[lang="ro"] .site .about-h { font-size: min(42px, calc((100vw - 80px) * .0362)); }
  html[lang="el"] .site .quote .q-who { font-size: 16px; }
}

/* Arabic: the "Turn sound on" button sits at the start (right) corner of the video */
[dir="rtl"] .pvid-sound { right: auto; left: 18px; }
@media (max-width: 640px) { [dir="rtl"] .pvid-sound { right: auto; left: 10px; } }