/* =========================================================
   5=3  —  design system
   Warm, editorial, "ceramic" palette. Light & dark aware.
   ========================================================= */

:root{
  --cream:      #fdf3ee;
  --cream-2:    #f8e4da;
  --ink:        #2b2120;
  --ink-soft:   #5c4d49;
  --glaze:      #b3216b;   /* raspberry — from the sticker-pack outline pink */
  --glaze-2:    #d1447f;
  --terracotta: #e8823f;   /* warm orange — from the sticker-pack circles */
  --terracotta-2:#cf6a2c;
  --gold:       #e0a83c;   /* mustard — from the sticker-pack dress */
  --line:       #f0d9cb;
  --card:       #fffdfb;
  --radius:     18px;
  --radius-sm:  10px;
  --shadow:     0 10px 30px -12px rgba(43,33,32,.18);
  --maxw:       1180px;
  --deep:       #3a1830;  /* constant dark surface — footer stays dark in both themes */
  --btn-ink:    #2b2120;  /* constant dark text for on-terracotta buttons/badges — keeps WCAG AA contrast in both themes */
  color-scheme: light;
}

/* Dark palette — system preference, unless the page explicitly opts into light */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --cream:      #1e1517;
    --cream-2:    #281c20;
    --ink:        #f6e9e2;
    --ink-soft:   #d3b9ae;
    --glaze:      #e8639f;
    --glaze-2:    #f088b7;
    --terracotta: #f3a05e;
    --terracotta-2:#f7b880;
    --gold:       #ecc06c;
    --line:       #3c2a2c;
    --card:       #271a1c;
    --shadow:     0 10px 30px -12px rgba(0,0,0,.55);
    color-scheme: dark;
  }
}
/* Explicit dark choice (e.g. inside a host that stamps data-theme) wins either way */
:root[data-theme="dark"]{
  --cream:      #1e1517;
  --cream-2:    #281c20;
  --ink:        #f6e9e2;
  --ink-soft:   #d3b9ae;
  --glaze:      #e8639f;
  --glaze-2:    #f088b7;
  --terracotta: #f3a05e;
  --terracotta-2:#f7b880;
  --gold:       #ecc06c;
  --line:       #3c2a2c;
  --card:       #271a1c;
  --shadow:     0 10px 30px -12px rgba(0,0,0,.55);
  color-scheme: dark;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:"Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
h1,h2,h3,h4{
  font-family:"Playfair Display","Georgia",serif;
  font-weight:600;
  color:var(--ink);
  line-height:1.15;
  margin:0 0 .5em;
}
h1{ font-size:clamp(2.2rem,5vw,3.6rem); font-weight:560; }
h2{ font-size:clamp(1.6rem,3.4vw,2.4rem); }
h3{ font-size:1.3rem; }
p{ margin:0 0 1em; }
a{ color:inherit; }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
section{ padding:72px 0; }
.section-tight{ padding:40px 0; }

/* ---------- eyebrow / tags ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:"Mulish",sans-serif;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--terracotta-2); font-weight:600; margin-bottom:14px;
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--terracotta); display:inline-block; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; border-radius:999px; border:1.5px solid var(--ink);
  background:var(--ink); color:var(--cream); font-weight:600; font-size:.95rem;
  text-decoration:none; cursor:pointer; transition:transform .15s ease, background .15s ease, color .15s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--terracotta); border-color:var(--terracotta); color:var(--btn-ink); font-weight:700; }
.btn-primary:hover{ background:var(--terracotta-2); border-color:var(--terracotta-2); }
.btn-outline{ background:transparent; color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--cream); }
.btn-light{ background:var(--cream); color:var(--ink); border-color:var(--cream); }

/* ---------- nav ---------- */
header.site-header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--cream) 88%, transparent); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-wrap{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width:var(--maxw); margin:0 auto; gap:16px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand-mark{
  width:38px; height:38px; border-radius:9px; background:var(--glaze);
  color:#f4ead2; display:flex; align-items:center; justify-content:center;
  font-family:"Playfair Display",serif; font-weight:600; font-size:1rem; letter-spacing:-.5px;
  transform:rotate(-4deg);
}
.brand-name{ font-family:"Playfair Display",serif; font-weight:600; font-size:1.18rem; color:var(--ink); }
nav.main-nav{ display:flex; align-items:center; gap:26px; }
nav.main-nav a{
  text-decoration:none; color:var(--ink-soft); font-size:.94rem; font-weight:600;
  padding:6px 2px; border-bottom:2px solid transparent;
}
nav.main-nav a:hover, nav.main-nav a.active{ color:var(--ink); border-color:var(--terracotta); }
.nav-actions{ display:flex; align-items:center; gap:12px; }
.nav-toggle{ display:none; background:none; border:none; font-size:1.6rem; cursor:pointer; color:var(--ink); }

/* language switcher */
.lang-switch{ position:relative; }
.lang-btn{
  display:flex; align-items:center; gap:6px; background:var(--card); border:1.5px solid var(--line);
  border-radius:999px; padding:8px 14px; font-weight:700; font-size:.82rem; cursor:pointer; color:var(--ink);
}
.lang-menu{
  position:absolute; right:0; top:calc(100% + 8px); background:var(--card); border:1px solid var(--line);
  border-radius:12px; box-shadow:var(--shadow); padding:6px; display:none; min-width:170px; z-index:60;
}
.lang-menu.open{ display:block; }
.lang-menu button{
  display:flex; width:100%; align-items:center; gap:10px; padding:9px 10px; border:none; background:none;
  border-radius:8px; font-size:.9rem; cursor:pointer; text-align:left; color:var(--ink);
}
.lang-menu button:hover{ background:var(--cream-2); }
.lang-menu button.active{ color:var(--terracotta-2); font-weight:700; }

/* ---------- hero ---------- */
.hero{
  padding:64px 0 40px; position:relative; overflow:hidden;
}
.hero-video-section{ padding-top:0; }
.hero-bg-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.hero-bg-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, var(--cream) 0%, var(--cream) 34%, color-mix(in srgb, var(--cream) 78%, transparent) 52%, color-mix(in srgb, var(--cream) 20%, transparent) 74%);
}
.hero-video-section .hero-grid{ position:relative; z-index:2; padding-top:64px; padding-bottom:8px; }
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
.hero-eq{
  font-family:"Playfair Display",serif; font-weight:600; font-size:clamp(2.6rem,7vw,4.6rem);
  color:var(--glaze); letter-spacing:-1px; margin-bottom:6px;
}
.hero-sub{ font-size:1.14rem; color:var(--ink-soft); max-width:46ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }
.hero-stats{ display:flex; gap:34px; margin-top:44px; flex-wrap:wrap; }
.stat b{ display:block; font-family:"Playfair Display",serif; font-size:1.9rem; color:var(--terracotta); }
.stat span{ font-size:.82rem; color:var(--ink-soft); }

.tile-art{
  position:relative; aspect-ratio:1/1; border-radius:28px;
  background:linear-gradient(155deg,var(--glaze),var(--glaze-2));
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow);
  transform:rotate(3deg);
}
.tile-art::after{
  content:""; position:absolute; inset:14px; border:1.5px dashed rgba(244,234,210,.35); border-radius:20px;
}
.tile-eq{ font-family:"Playfair Display",serif; color:#f4ead2; font-size:clamp(3.2rem,9vw,5.5rem); font-weight:600; }
.tile-crack{ position:absolute; width:70%; height:2px; background:rgba(244,234,210,.4); top:38%; left:14%; transform:rotate(-8deg); }

/* real photo, framed like a tile */
.tile-photo{
  display:block; position:relative; aspect-ratio:4/5; border-radius:28px; overflow:hidden;
  box-shadow:var(--shadow);
}
.tile-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.tile-photo-badge{
  position:absolute; right:16px; bottom:16px; background:var(--terracotta); color:var(--btn-ink);
  font-family:"Playfair Display",serif; font-weight:600; font-size:1.3rem; padding:8px 16px;
  border-radius:12px; box-shadow:0 8px 18px -8px rgba(0,0,0,.5); transform:rotate(-4deg);
}
.tile-photo.tile-photo-flat{ transform:none; }

/* ---------- cards / grids ---------- */
.grid{ display:grid; gap:24px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px; box-shadow:var(--shadow);
}
.card-flat{ box-shadow:none; }
.pill{
  display:inline-block; padding:5px 12px; border-radius:999px; background:var(--cream-2);
  font-size:.76rem; font-weight:700; color:var(--glaze); letter-spacing:.02em;
}

.band{ background:var(--glaze); color:#f4ead2; }
.band h2, .band h3{ color:#fbe3ee; }
.band .ink-soft{ color:#f2c9dc; }
.band-terra{ background:var(--terracotta); color:var(--btn-ink); }
.band-terra h2{ color:var(--btn-ink); }

/* quote block */
blockquote.big-quote{
  font-family:"Playfair Display",serif; font-size:clamp(1.3rem,2.6vw,1.9rem); font-style:italic;
  color:var(--ink); border-left:4px solid var(--terracotta); padding-left:26px; margin:28px 0;
}

/* timeline */
.timeline{ position:relative; padding-left:28px; border-left:2px solid var(--line); }
.tl-item{ position:relative; padding-bottom:34px; }
.tl-item::before{
  content:""; position:absolute; left:-34px; top:4px; width:12px; height:12px; border-radius:50%;
  background:var(--terracotta); border:3px solid var(--cream);
}
.tl-date{ font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--terracotta-2); font-weight:700; }

/* map / city cards */
.city-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm);
  display:flex; flex-direction:column; gap:6px; overflow:hidden;
  position:relative; text-decoration:none; color:inherit;
}
a.city-card{ transition:transform .15s ease, box-shadow .15s ease; }
a.city-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.city-card .city-card-body{ padding:18px 20px; display:flex; flex-direction:column; gap:6px; }
.city-card .city-card-img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; display:block; }
.city-card .flag{ font-size:1.5rem; }
.city-card h4{ margin:2px 0 0; font-family:"Playfair Display",serif; font-size:1.05rem; }
.city-card p{ margin:0; font-size:.88rem; color:var(--ink-soft); }
.city-card-ig{
  position:absolute; top:10px; right:10px; z-index:2;
  background:rgba(43,33,32,.72); color:#fff; font-size:.7rem; font-weight:700;
  letter-spacing:.03em; padding:4px 9px; border-radius:999px;
}
/* Cards without a photo (no clear shot of the plaque yet): a plain flag +
   city + note, with an inline Instagram link where we have one, instead of
   a photo box that would otherwise sit empty or show the wrong thing. */
.city-card.city-card-no-img .city-card-body{ padding-top:20px; }
.city-card-ig-inline{
  display:inline-flex; align-items:center; gap:4px; margin-top:8px;
  font-size:.76rem; font-weight:700; letter-spacing:.02em; color:var(--terracotta-2);
}
a.city-card:hover .city-card-ig-inline{ text-decoration:underline; }
.map-embed{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); background:#e7ddcb; transition:transform .15s ease; }
a.map-embed:hover{ transform:translateY(-3px); }
.map-embed iframe{ width:100%; height:420px; border:0; display:block; }
.map-embed img{ width:100%; height:420px; object-fit:contain; }
.map-embed-large img{ height:560px; }

/* photo gallery strip */
.photo-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.photo-grid figure{ margin:0; border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:3/4; }
.photo-grid img{ width:100%; height:100%; object-fit:cover; display:block; }
.inline-photo{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); margin:28px 0; }
.inline-photo img{ width:100%; display:block; }
.inline-photo figcaption{ padding:10px 16px; font-size:.82rem; color:var(--ink-soft); background:var(--card); }

/* journal accordion */
.journal-item{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-bottom:16px;
}
.journal-head{
  display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 26px; cursor:pointer;
}
.journal-head .meta{ display:flex; gap:14px; align-items:baseline; flex-wrap:wrap; }
.journal-head .city{ font-family:"Playfair Display",serif; font-size:1.2rem; }
.journal-head .date{ font-size:.8rem; color:var(--ink-soft); letter-spacing:.03em; text-transform:uppercase; }
.journal-head .chev{ transition:transform .2s ease; color:var(--terracotta); font-size:1.3rem; flex:none; }
.journal-item.open .chev{ transform:rotate(45deg); }
.journal-body{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.journal-item.open .journal-body{ max-height:900px; }
.journal-body-inner{ padding:0 26px 26px; color:var(--ink-soft); }
.journal-body-inner .tags{ margin-top:14px; }
.tag{ display:inline-block; font-size:.75rem; color:var(--glaze); background:var(--cream-2); padding:3px 10px; border-radius:999px; margin:2px 4px 0 0; }

/* forms */
form.card-form{ display:grid; gap:16px; }
.field{ display:grid; gap:6px; }
.field label{ font-size:.85rem; font-weight:700; color:var(--ink-soft); }
.field input, .field textarea, .field select{
  padding:13px 15px; border:1.5px solid var(--line); border-radius:12px; font:inherit; background:var(--card); color:var(--ink);
}
.field input:focus, .field textarea:focus{ outline:2px solid var(--glaze); outline-offset:1px; }
.form-note{ font-size:.82rem; color:var(--ink-soft); }
.form-status{ font-size:.9rem; font-weight:600; margin-top:2px; }
.form-status-ok{ color:var(--glaze); }
.form-status-error{ color:var(--terracotta-2); }
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* footer */
footer.site-footer{ background:var(--deep); color:#e7ddcb; padding:56px 0 28px; margin-top:60px; }
footer.site-footer a{ color:#e7ddcb; text-decoration:none; }
footer.site-footer a:hover{ color:var(--gold); }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; }
.footer-bottom{ margin-top:40px; padding-top:24px; border-top:1px solid rgba(231,221,203,.15); font-size:.82rem; color:#a79f8f; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* stickers grid */
.sticker{
  background:var(--cream-2); border-radius:16px; padding:10px; text-align:center; font-family:"Playfair Display",serif;
  font-weight:600; border:1px dashed var(--gold); overflow:hidden;
}
.sticker img{ width:100%; height:100%; aspect-ratio:1/1; object-fit:contain; display:block; }

/* blog */
.breadcrumb{ font-size:.82rem; color:var(--ink-soft); margin-bottom:14px; }
.breadcrumb a{ color:var(--ink-soft); text-decoration:underline; }
.breadcrumb a:hover{ color:var(--glaze); }
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.blog-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow); text-decoration:none; color:var(--ink);
  transition:transform .15s ease;
}
.blog-card:hover{ transform:translateY(-3px); }
.blog-card img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.blog-card-body{ padding:20px 22px 24px; display:flex; flex-direction:column; gap:8px; flex:1; }
.blog-card .blog-date{ font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; color:var(--terracotta-2); font-weight:700; }
.blog-card h3{ font-size:1.1rem; margin:0; }
.blog-card p{ font-size:.9rem; color:var(--ink-soft); margin:0; }
.blog-card .tag{ align-self:flex-start; }
.article-hero-img{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); margin:24px 0 8px; }
.article-hero-img img{ width:100%; display:block; }
.article-meta{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; font-size:.85rem; color:var(--ink-soft); margin-bottom:6px; }
.article-body{ max-width:68ch; font-size:1.05rem; }
.article-body h2{ font-size:1.5rem; margin-top:1.6em; }
.article-body p{ margin-bottom:1.2em; }
.article-body blockquote{
  font-family:"Playfair Display",serif; font-style:italic; font-size:1.2rem; color:var(--ink);
  border-left:4px solid var(--terracotta); padding-left:22px; margin:1.6em 0;
}
.article-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:2em; }
.article-cta{
  background:var(--glaze); color:#fef2f8; border-radius:var(--radius); padding:32px; margin-top:2.4em;
  display:flex; flex-direction:column; gap:14px; align-items:flex-start;
}
.article-cta h3{ color:#fef2f8; margin:0; }
.article-cta p{ color:#f6d7e6; margin:0; }
/* --glaze flips from dark (light theme) to light (dark theme), so the light-on-glaze
   text above only keeps AA contrast in light theme — swap to dark text in dark theme */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .article-cta,
  :root:not([data-theme="light"]) .article-cta h3{ color:#2b2120; }
  :root:not([data-theme="light"]) .article-cta p{ color:#2b2120; opacity:.82; }
}
:root[data-theme="dark"] .article-cta,
:root[data-theme="dark"] .article-cta h3{ color:#2b2120; }
:root[data-theme="dark"] .article-cta p{ color:#2b2120; opacity:.82; }
.article-ig-link{
  display:inline-flex; align-items:center; gap:6px; font-size:.88rem; font-weight:700;
  color:var(--glaze); text-decoration:none; margin:2px 0 22px;
}
.article-ig-link:hover{ text-decoration:underline; }
.related-posts{ margin-top:2.6em; padding-top:2em; border-top:1px solid var(--line); }
.related-posts h3{ font-size:1.1rem; margin-bottom:1em; }
.related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.related-card{
  display:block; text-decoration:none; color:inherit; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px 18px; transition:transform .15s ease, box-shadow .15s ease;
}
.related-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.related-card .related-tag{ font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; color:var(--terracotta-2); font-weight:700; }
.related-card h4{ font-size:.95rem; margin:4px 0 0; line-height:1.35; }
@media (max-width:900px){ .blog-grid{ grid-template-columns:repeat(2,1fr); } .related-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .blog-grid{ grid-template-columns:1fr; } .related-grid{ grid-template-columns:1fr; } }

/* utils */
.center{ text-align:center; }
.mt-0{ margin-top:0; } .mt-1{ margin-top:12px;} .mt-2{ margin-top:24px;} .mt-3{ margin-top:40px;}
.muted{ color:var(--ink-soft); }
.max-prose{ max-width:64ch; }
.max-prose.center{ margin-left:auto; margin-right:auto; }
.divider{ height:1px; background:var(--line); margin:56px 0; border:none; }
[data-i18n], [data-i18n-html]{ }
[hidden]{ display:none !important; }

/* responsive */
@media (max-width: 900px){
  .hero-grid{ grid-template-columns:1fr; }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .photo-grid{ grid-template-columns:repeat(3,1fr); }
  .hero-bg-overlay{ background:color-mix(in srgb, var(--cream) 88%, transparent); }
  /* The full 7-link nav plus the language switcher and header CTA is wide
     enough that it only really fits the desktop breakpoint — measured
     page-width overflow on common tablet/landscape widths (700-830px) once
     the hamburger threshold was still 640px. Collapsing to the dropdown
     menu here, alongside the other layout changes this same breakpoint
     already makes, keeps the header from ever overflowing sideways. */
  nav.main-nav{
    position:fixed; inset:70px 16px auto 16px; background:var(--card); border:1px solid var(--line);
    border-radius:16px; padding:14px; flex-direction:column; align-items:flex-start; box-shadow:var(--shadow);
    display:none; gap:6px;
  }
  nav.main-nav.open{ display:flex; }
  .nav-toggle{ display:block; }
}
@media (max-width: 640px){
  section{ padding:52px 0; }
  .grid-3, .grid-2{ grid-template-columns:1fr; }
  .photo-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr; }
  .journal-head{ padding:18px; }
  /* The header's inline "Share your numbers" button, sitting next to the
     language switcher and the hamburger, doesn't fit small phone widths
     (measured overflow of the whole page on 360-414px screens). The hero
     already repeats this same CTA a few lines down, so hide the header
     copy here rather than shrink it into something unreadable. */
  .nav-actions > .btn-primary{ display:none; }
  .nav-actions{ gap:8px; }
  /* The 6 sticker thumbnails on involved.html sit in a nested .grid-3 — left
     at the general single-column mobile rule above, each one blows up to a
     full-width square and the page turns into a long scroll of oversized
     stickers. Two columns keeps them readable as a sheet, like the desktop
     and tablet layouts already do. */
  #stickers .grid-3{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- RTL support (Hebrew, Arabic) ----------
   Selectors key off html[dir="rtl"] (set for any RTL locale), not a
   specific language, so this covers Hebrew and Arabic alike. Full
   mirrored-layout localization is out of scope; this keeps text
   direction, alignment, and the handful of directional decorative
   borders correct so RTL pages read naturally rather than looking
   like an LTR page with RTL text awkwardly dropped in. */
html[dir="rtl"] body{ direction:rtl; text-align:right; }
html[dir="rtl"] blockquote.big-quote,
html[dir="rtl"] .article-body blockquote{
  border-left:none; border-right:4px solid var(--terracotta);
  padding-left:0; padding-right:26px;
}
html[dir="rtl"] .article-body blockquote{ padding-right:22px; }
html[dir="rtl"] .timeline{ padding-left:0; padding-right:28px; border-left:none; border-right:2px solid var(--line); }
html[dir="rtl"] .tl-item::before{ left:auto; right:-34px; }
html[dir="rtl"] .article-cta{ align-items:flex-end; }
html[dir="rtl"] .lang-menu button{ text-align:right; }