@font-face {
  font-family: "Vazirmatn";
  src: url("fonts/Vazirmatn-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "B Titr";
  src: url("fonts/BTitrBold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "B Mitra";
  src: url("fonts/BMitra.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ========================================================
     TYPOGRAPHY CONTROL PANEL
     Change these values to control text throughout the site.
     ======================================================== */
  --font-body: Arial, Helvetica, sans-serif; /* Paragraphs and ordinary text */
  --font-heading: Arial, Helvetica, sans-serif; /* h1, h2 and h3 */
  --font-display: Impact, "Arial Narrow", Arial, sans-serif; /* Poster-style display text only */
  --font-farsi: "B Titr", "Vazirmatn", Tahoma, Arial, sans-serif; /* All Farsi text */
  --font-farsi-display: "B Titr", "Vazirmatn", Tahoma, Arial, sans-serif; /* Farsi headings */
  --font-farsi-body: "B Mitra", "Vazirmatn", Tahoma, Arial, sans-serif; /* Farsi paragraphs */

  --h1-size: clamp(3.75rem, 6.5vw, 6.8rem); /* Memory / Solidarity / Resistance */
  --h1-farsi-size: clamp(5rem, 8vw, 8rem);
  --h1-weight: 400;
  --h1-spacing: 0;
  --h1-line-height: 0.9;

  --h2-size: clamp(2.75rem, 5.4vw, 5.75rem); /* Main title in every information card */
  --h2-weight: 800;
  --h2-spacing: -0.015em;
  --h2-line-height: 1;

  --h3-size: 1.17rem; /* Card subtitles, timeline titles and group names */
  --h3-weight: 700;
  --h3-spacing: 0;
  --h3-line-height: 1.2;

  --p-size: 1rem; /* Ordinary paragraphs */
  --p-weight: 600;
  --p-spacing: 0;
  --p-line-height: 1.55;

  --a-size: 1em; /* Navigation and ordinary text links */
  --a-weight: 700;
  --a-spacing: 0;

  --button-size: 1em; /* Calendar and language buttons */
  --button-weight: 700;
  --button-spacing: 0;

  --span-size: 1em; /* Short labels and inline text */
  --span-weight: 600;
  --span-spacing: 0;

  --li-size: 1em; /* Source-list items */
  --li-weight: 600;
  --li-spacing: 0;

  --dt-size: 1em; /* Definition labels, if added later */
  --dt-weight: 600;
  --dt-spacing: 0;

  --dd-size: 1em; /* Definition values, if added later */
  --dd-weight: 600;
  --dd-spacing: 0;

  /* More specific text roles. */
  --brand-size: 1.05rem; /* WLF · Vienna 2026 */
  --brand-weight: 800;
  --brand-spacing: 0;
  --nav-size: 0.95rem; /* About us / Groups / Program / Location */
  --nav-weight: 700;
  --language-size: 0.82rem; /* EN / DE / FA */
  --language-weight: 700;
  --kicker-size: clamp(1.3rem, 2.2vw, 1.8rem); /* Numbered section labels */
  --kicker-weight: 700;
  --kicker-spacing: 0.12em;
  --kicker-rtl-spacing: 0.04em;
  --lead-size: clamp(1.08rem, 1.8vw, 1.45rem); /* Large introductory paragraphs */
  --lead-line-height: 1.5;
  --body-copy-size: clamp(1rem, 1.4vw, 1.18rem); /* Secondary section paragraphs */
  --card-title-size: clamp(1.25rem, 2vw, 1.65rem); /* Three-column card titles */
  --timeline-title-size: clamp(1.35rem, 2.3vw, 2.2rem);
  --timeline-date-size: 0.85rem;
  --timeline-date-weight: 900;
  --timeline-title-line-height: 1.05;
  --life-number-size: clamp(7rem, 18vw, 14rem); /* The large number 22 */
  --life-number-weight: 900;
  --life-number-spacing: -0.04em;
  --life-number-line-height: 0.8;
  --chant-size: clamp(3rem, 8vw, 7rem); /* Jin. Jiyan. Azadî. */
  --name-label-size: 0.72rem; /* JINA label */
  --name-label-weight: 900;
  --name-label-spacing: 0.3em;
  --name-title-size: clamp(1.8rem, 3vw, 3rem);
  --word-title-size: clamp(2rem, 4.5vw, 4.25rem); /* Woman / Life / Freedom cards */
  --word-title-spacing: -0.015em;
  --word-title-line-height: 1;
  --movement-explainer-size: clamp(1.05rem, 1.8vw, 1.4rem);
  --movement-explainer-weight: 600;
  --movement-explainer-line-height: 1.5;
  --step-number-size: 0.75rem;
  --step-number-weight: 900;
  --label-size: 0.7rem; /* Date / Time / Place / Admission labels */
  --label-weight: 900;
  --label-spacing: 0.12em;
  --value-size: clamp(1rem, 1.7vw, 1.35rem); /* Event and contact values */
  --value-line-height: 1.2;
  --group-title-size: 1.1rem;
  --group-address-size: 0.86rem;
  --group-hint-size: 0.75rem;
  --group-detail-size: 0.82rem;
  --source-weight: 800;
  --footer-size: 0.86rem;

  /* Opening-page typography. */
  --hero-purpose-size: clamp(1rem, 1.5vw, 1.2rem);
  --hero-purpose-weight: 800;
  --hero-purpose-line-height: 1.35;
  --hero-event-size: clamp(1.05rem, 1.7vw, 1.35rem);
  --hero-event-weight: 900;
  --hero-event-spacing: 0.04em;
  --hero-event-line-height: 1.3;
  --hero-farsi-weight: 700;
  --hero-farsi-line-height: 1.12;
  --calendar-option-weight: 700;
  --scroll-label-size: 0.72rem;
  --scroll-label-weight: 800;
  --scroll-label-spacing: 0.14em;
  --scroll-arrow-size: 1.8rem;

  /* ========================================================
     OPENING-PAGE POSITION CONTROL PANEL
     Positive X = right, negative X = left.
     Positive Y = down, negative Y = up.
     ======================================================== */
  --hero-content-x: 0px; /* Moves all opening-page text horizontally */
  --hero-content-y: 0px; /* Moves all opening-page text vertically */
  --hero-content-max-width: 1180px; /* Maximum width of the opening-page text area */
  --hero-title-x: 0px; /* Moves Memory / Solidarity / Resistance horizontally */
  --hero-title-y: 0px; /* Moves Memory / Solidarity / Resistance vertically */
  --hero-purpose-x: 0px; /* Moves the anniversary description horizontally */
  --hero-purpose-y: 0px; /* Moves the anniversary description vertically */
  --hero-event-x: 0px; /* Moves Vienna / date / time horizontally */
  --hero-event-y: 0px; /* Moves Vienna / date / time vertically */
  --hero-calendar-x: 0px; /* Moves the calendar button horizontally */
  --hero-calendar-y: 0px; /* Moves the calendar button vertically */
  --hero-copy-padding-top: 56px;
  --hero-copy-padding-bottom: 72px;

  --paper: #ead4b8;
  --paper-light: #f3e4cf;
  --red: #bc2c1c;
  --red-dark: #72180f;
  --ink: #100c0a;
  --muted: #594b42;
  --line: rgba(16, 12, 10, 0.22);
  --gutter: clamp(20px, 4vw, 64px);
  --content: 1180px;
}

/* Tablet-only opening-page position controls. */
@media (max-width: 900px) {
  :root {
    --hero-content-x: 0px;
    --hero-content-y: 0px;
  }

}

/* Mobile-only opening-page controls. */
@media (max-width: 600px) {
  :root {
    --h1-size: clamp(2.75rem, 11.5vw, 3.4rem);
    --h1-farsi-size: clamp(3.5rem, 16vw, 5rem);
    --life-number-size: clamp(6rem, 30vw, 9rem);
    --hero-purpose-size: clamp(0.92rem, 3.7vw, 1.02rem);
    --hero-event-size: clamp(0.98rem, 4.5vw, 1.15rem);
    --hero-purpose-line-height: 1.4;
    --hero-farsi-line-height: 1.08;
    --hero-content-x: 0px;
    --hero-content-y: 0px;
    --hero-copy-padding-top: 42px;
    --hero-copy-padding-bottom: 70px;
    --brand-size: 0.92rem;
    --nav-size: 0.82rem;
    --language-size: 0.74rem;
    --mobile-language-y: 0px; /* Keep the language selector centred in the band */
  }

}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  position: relative;
  isolation: isolate;
  margin: 0;
  background-color: var(--red);
  color: var(--ink);
  line-height: 1.55;
  overflow-x: hidden;
}

.page-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: var(--red);
  background-image:
    linear-gradient(rgba(188, 44, 28, 0.1), rgba(16, 12, 10, 0.2)),
    url("images/poster.webp");
  background-position: 68% center;
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
}

header,
main,
.footer {
  position: relative;
  z-index: 1;
}
/* Legacy per-language declarations are retained for reference but disabled.
   Use the control panel at the top of this file instead. */
@media not all {
/* ==========================================================
   PER-ELEMENT TYPOGRAPHY
   ----------------------------------------------------------
   Everything about one element lives in one place: its base
   (fallback) style, its English style (html[lang="en"]), its
   Farsi style (html[lang="fa"]), and — where one exists — its
   RTL style (html[dir="rtl"]) sit right next to each other.
   Scroll to the element you want and edit its numbers directly;
   nothing for that element is defined anywhere else in the file.

   To add another language, copy an html[lang="en"] rule below
   each element and change "en" to your language code, e.g.
   html[lang="de"], html[lang="fr"], html[lang="ar"], etc.
   ========================================================== */

/* ---------- body text ---------- */
body {
  font-family: Impact, "Arial Narrow", Arial, sans-serif; /* fallback for unlisted languages */
}

html[lang="en"] body {
  font-family: Impact, "Arial Narrow", Arial, sans-serif;
}

html[lang="fa"] body {
  font-family: "B Titr", "Vazirmatn", Tahoma, Arial, sans-serif;
}

/* ---------- h1 ---------- */
h1 {
  margin-top: 0;
  margin-bottom: 26px;
  font-family: Impact, "Arial Narrow", Arial, sans-serif; /* fallback */
  font-size: clamp(3.1rem, 8vw, 8rem);
  font-weight: 900;
  letter-spacing: -0.065em;
  line-height: 0.92;
}

/* Memory
Solidarity
Resistance */
html[lang="en"] h1 {
  font-family: Impact, "Arial Narrow", Arial, sans-serif;
  font-size: clamp(3.1rem, 14vw, 15rem);
  font-weight: 900;
  letter-spacing: 0em;
  line-height: 1.5;
}

html[lang="fa"] h1 {
  font-family: "B Titr", "Vazirmatn", Tahoma, Arial, sans-serif;
  font-size: clamp(3.1rem, 8vw, 8rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
}

html[dir="rtl"] h1 {
  letter-spacing: 0;
  line-height: 1.5;
}

/* ---------- h2 ---------- */
h2 {
  margin-top: 0;
  margin-bottom: 26px;
  font-family: Impact, "Arial Narrow", Arial, sans-serif; /* fallback */
  font-size: clamp(2.6rem, 6vw, 6rem);
  font-weight: 900;
  letter-spacing: -0.065em;
  line-height: 0.92;
}

/* her name was jina */
html[lang="en"] h2 {
  font-family: Impact, "Arial Narrow", Arial, sans-serif;
  font-size: clamp(2rem, 8vw, 10rem);
  font-weight: 50;
  letter-spacing: 0em;
  line-height: 1;
}

html[lang="fa"] h2 {
  font-family: "B Titr", "Vazirmatn", Tahoma, Arial, sans-serif;
  font-size: clamp(2.6rem, 6vw, 6rem);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.08;
}

html[dir="rtl"] h2 {
  letter-spacing: 0;
  line-height: 1.08;
}

/* ---------- h3 ---------- */
h3 {
  margin-top: 0;
  font-family: Impact, "Arial Narrow", Arial, sans-serif; /* fallback */
  font-size: 1.17rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
}

/* cards in section what will happen in Vienna */
html[lang="en"] h3 {
  font-family: Impact, "Arial Narrow", Arial, sans-serif;
  font-size: clamp(2rem, 2vw, 2rem);
  font-weight: 1;
  letter-spacing: 5em;
  line-height: 1;
}

html[lang="fa"] h3 {
  font-family: "B Titr", "Vazirmatn", Tahoma, Arial, sans-serif;
  font-size: 1.17rem;
  font-weight: 700;
  letter-spacing: 0em;
  line-height: 1;
}

/* ---------- p ---------- */
p {
  margin-top: 0;
  font-family: Impact, "Arial Narrow", Arial, sans-serif; /* fallback */
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
}

html[lang="en"] p {
  font-family: Impact, "Arial Narrow", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 100;
  letter-spacing: 0em;
}

html[lang="fa"] p {
  font-family: "B Titr", "Vazirmatn", Tahoma, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0em;
}

/* ---------- a ---------- */
a {
  color: inherit;
  font-family: Impact, "Arial Narrow", Arial, sans-serif; /* fallback */
  font-size: 1em;
  font-weight: 400;
  letter-spacing: 0;
}

html[lang="en"] a {
  font-family: Impact, "Arial Narrow", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 50;
  letter-spacing: 0em;
}

html[lang="fa"] a {
  font-family: "B Titr", "Vazirmatn", Tahoma, Arial, sans-serif;
  font-size: 1em;
  font-weight: 400;
  letter-spacing: 0em;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

/* ---------- button ---------- */
button {
  font: inherit;
  font-family: Impact, "Arial Narrow", Arial, sans-serif; /* fallback */
  font-size: 1em;
  font-weight: 400;
  letter-spacing: 0;
}

html[lang="en"] button {
  font-family: Impact, "Arial Narrow", Arial, sans-serif;
  font-size: 1em;
  font-weight: 50;
  letter-spacing: 0em;
}

html[lang="fa"] button {
  font-family: "B Titr", "Vazirmatn", Tahoma, Arial, sans-serif;
  font-size: 1em;
  font-weight: 300;
  letter-spacing: 0em;
}

/* ---------- span ---------- */
span {
  font-family: Impact, "Arial Narrow", Arial, sans-serif; /* fallback */
  font-size: 1em;
  font-weight: 400;
  letter-spacing: 0;
}

html[lang="en"] span {
  font-family: Impact, "Arial Narrow", Arial, sans-serif;
  font-size: 1em;
  font-weight: 50;
  letter-spacing: 0em;
}

html[lang="fa"] span {
  font-family: "B Titr", "Vazirmatn", Tahoma, Arial, sans-serif;
  font-size: 1em;
  font-weight: 300;
  letter-spacing: 0em;
}

/* ---------- li ---------- */
li {
  font-family: Impact, "Arial Narrow", Arial, sans-serif; /* fallback */
  font-size: 1em;
  font-weight: 400;
  letter-spacing: 0;
}

html[lang="en"] li {
  font-family: Impact, "Arial Narrow", Arial, sans-serif;
  font-size: 1em;
  font-weight: 1;
  letter-spacing: 0em;
}

html[lang="fa"] li {
  font-family: "B Titr", "Vazirmatn", Tahoma, Arial, sans-serif;
  font-size: 1em;
  font-weight: 200;
  letter-spacing: 0em;
}

/* ---------- dt ---------- */
dt {
  font-family: Impact, "Arial Narrow", Arial, sans-serif; /* fallback */
  font-size: 1em;
  font-weight: 400;
  letter-spacing: 0;
}

html[lang="en"] dt {
  font-family: Impact, "Arial Narrow", Arial, sans-serif;
  font-size: 1em;
  font-weight: 1;
  letter-spacing: 0em;
}

html[lang="fa"] dt {
  font-family: "B Titr", "Vazirmatn", Tahoma, Arial, sans-serif;
  font-size: 1em;
  font-weight: 200;
  letter-spacing: 0em;
}

/* ---------- dd ---------- */
dd {
  font-family: Impact, "Arial Narrow", Arial, sans-serif; /* fallback */
  font-size: 1em;
  font-weight: 400;
  letter-spacing: 0;
}

html[lang="en"] dd {
  font-family: Impact, "Arial Narrow", Arial, sans-serif;
  font-size: 1em;
  font-weight: 1;
  letter-spacing: 0em;
}

html[lang="fa"] dd {
  font-family: "B Titr", "Vazirmatn", Tahoma, Arial, sans-serif;
  font-size: 1em;
  font-weight: 200;
  letter-spacing: 0em;
}

}

/* ==========================================================
   VARIABLE-DRIVEN TYPOGRAPHY
   These rules intentionally come after the older declarations
   above. The control panel at the top of this file is therefore
   the single place to adjust size, weight, spacing and line-height.
   ========================================================== */
body {
  font-family: var(--font-body);
  line-height: var(--p-line-height);
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
}

h1 {
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  letter-spacing: var(--h1-spacing);
  line-height: var(--h1-line-height);
}

h2 {
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  letter-spacing: var(--h2-spacing);
  line-height: var(--h2-line-height);
}

h3 {
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  letter-spacing: var(--h3-spacing);
  line-height: var(--h3-line-height);
}

p {
  font-size: var(--p-size);
  font-weight: var(--p-weight);
  letter-spacing: var(--p-spacing);
  line-height: var(--p-line-height);
}

a {
  color: inherit;
  font-size: var(--a-size);
  font-weight: var(--a-weight);
  letter-spacing: var(--a-spacing);
}

button {
  font-family: var(--font-body);
  font-size: var(--button-size);
  font-weight: var(--button-weight);
  letter-spacing: var(--button-spacing);
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

span {
  font-size: var(--span-size);
  font-weight: var(--span-weight);
  letter-spacing: var(--span-spacing);
}

li {
  font-size: var(--li-size);
  font-weight: var(--li-weight);
  letter-spacing: var(--li-spacing);
}

dt {
  font-size: var(--dt-size);
  font-weight: var(--dt-weight);
  letter-spacing: var(--dt-spacing);
}

dd {
  font-size: var(--dd-size);
  font-weight: var(--dd-weight);
  letter-spacing: var(--dd-spacing);
}

html[lang="fa"] :is(body, h1, h2, h3, p, a, button, span, li, dt, dd) {
  font-family: var(--font-farsi);
  letter-spacing: 0;
}

img {
  display: block;
  max-width: 100%;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000;
  padding: 10px 14px;
  background: var(--ink);
  color: white;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: none;
}

.site-nav {
  position: relative;
  z-index: 100;
  display: flex;
  width: min(calc(100% - (2 * var(--gutter))), var(--content));
  min-height: 78px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 auto;
  border-bottom: 1px solid var(--line);
}

.brand {
  color: inherit;
  font-size: var(--brand-size);
  font-weight: var(--brand-weight);
  letter-spacing: var(--brand-spacing);
  text-decoration: none;
}

.nav-cluster,
.nav-links,
.language-switcher {
  display: flex;
  align-items: center;
}

.nav-cluster {
  gap: 24px;
}

.nav-links {
  gap: 22px;
}

.nav-links a {
  font-size: var(--nav-size);
  font-weight: var(--nav-weight);
  text-decoration: none;
}

.language-switcher {
  gap: 2px;
  padding: 3px;
  border: 1px solid currentColor;
  border-radius: 999px;
  direction: ltr;
}

.language-switcher button {
  min-width: 32px;
  min-height: 32px;
  padding: 0 7px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: var(--language-size);
  font-weight: var(--language-weight);
}

.language-switcher button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper-light);
}

.story-section {
  position: relative;
  display: grid;
  min-height: 82svh;
  align-items: center;
  background-color: transparent;
  padding: clamp(80px, 12vh, 150px) var(--gutter);
}

.story-inner {
  width: min(100%, var(--content));
  margin-inline: auto;
}

.kicker {
  margin: 0 0 22px;
  color: var(--red-dark);
  font-size: var(--kicker-size);
  font-weight: var(--kicker-weight);
  letter-spacing: var(--kicker-spacing);
  text-transform: uppercase;
}

html[dir="rtl"] .kicker {
  letter-spacing: var(--kicker-rtl-spacing);
}

/* ---------- .lead ---------- */
.lead {
  max-width: 780px;
}

html[lang="en"] .lead {
  font-size: var(--lead-size);
  line-height: var(--lead-line-height);
}

html[lang="fa"] .lead {
  font-size: var(--lead-size);
  line-height: var(--lead-line-height);
}

.body-copy {
  max-width: 720px;
  color: var(--muted);
  font-size: var(--body-copy-size);
}

.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper-light);
  cursor: pointer;
  text-decoration: none;
}

.button-light {
  background: var(--paper-light);
  color: var(--ink);
}

.event-facts,
.contact-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 42px;
}

.event-fact,
.contact-card {
  padding: 22px;
  border: 1px solid var(--line);
  background: rgba(255, 247, 235, 0.46);
}

.event-fact span,
.contact-card span {
  display: block;
  margin-bottom: 18px;
  color: var(--red-dark);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
}

.event-fact strong,
.contact-card strong {
  font-size: var(--value-size);
  line-height: var(--value-line-height);
  overflow-wrap: anywhere;
}

.contact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.groups-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 42px;
}

.group-card {
  position: relative;
  width: 100%;
  min-height: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(246, 228, 205, 0.82);
  cursor: pointer;
}

/* Intrinsic square fallback for browsers without aspect-ratio support. */
.group-card::before {
  content: "";
  display: block;
  padding-top: 100%;
}

.group-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(234, 212, 184, 0.08),
    rgba(234, 212, 184, 0.26)
  );
  pointer-events: none;
}

.group-card-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: contain;
  object-position: center;
  opacity: 0.98;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.group-card:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 4px;
}

.group-summary,
.group-card-details {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
}

.group-summary {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.group-card.has-missing-logo .group-summary {
  opacity: 1;
  visibility: visible;
}

.group-card h3 {
  margin: 0;
  font-size: var(--group-title-size);
  line-height: 1.2;
}

.group-card .group-address {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: var(--group-address-size);
}

.group-hint {
  margin-top: 20px;
  color: var(--red-dark);
  font-size: var(--group-hint-size);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.group-card-details {
  align-items: flex-start;
  justify-content: flex-start;
  overflow-y: auto;
  background: rgba(243, 228, 207, 0.9);
  text-align: start;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s ease;
}

.group-card-details > p:not(.group-address) {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: var(--group-detail-size);
  line-height: 1.45;
}

.group-contact {
  display: inline-flex;
  margin-top: auto;
  padding-top: 22px;
  color: var(--red-dark);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.group-card:hover .group-summary,
.group-card:focus-within .group-summary,
.group-card.is-open .group-summary {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.98);
}

.group-card:hover .group-card-background,
.group-card:focus-within .group-card-background,
.group-card.is-open .group-card-background {
  opacity: 0.5;
}

.group-card:hover .group-card-details,
.group-card:focus-within .group-card-details,
.group-card.is-open .group-card-details {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.groups-status {
  color: var(--muted);
}

.sources-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 38px 0 0;
  padding: 0;
  list-style: none;
}

.sources-list a {
  display: block;
  min-height: 100%;
  padding: 20px;
  border: 1px solid var(--line);
  background: rgba(255, 247, 235, 0.32);
  font-weight: var(--source-weight);
  text-decoration: none;
}

.sources-list a::after {
  content: " ↗";
}

.footer {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 32px var(--gutter);
  background: var(--ink);
  color: rgba(255, 245, 230, 0.75);
  font-size: var(--footer-size);
}

.footer p {
  margin: 0;
}

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

dialog {
  width: min(680px, calc(100% - 32px));
  max-height: calc(100svh - 32px);
  padding: 0;
  border: 1px solid var(--ink);
  background: var(--paper-light);
  color: var(--ink);
}

dialog::backdrop {
  background: rgba(16, 12, 10, 0.76);
  backdrop-filter: blur(6px);
}

.dialog-inner {
  padding: clamp(26px, 5vw, 58px);
}

.dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  font-size: 1.2rem;
}

html[dir="rtl"] .dialog-close {
  right: auto;
  left: 14px;
}

:focus-visible {
  outline: 3px solid #2364e8;
  outline-offset: 4px;
}

@media (max-width: 900px) {
  .page-backdrop {
    background-image:
      linear-gradient(rgba(188, 44, 28, 0.1), rgba(16, 12, 10, 0.2)),
      url("images/hero-tablet.png");
    background-position: center;
  }

  .site-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 8px;
    padding-bottom: 12px;
  }

  .brand {
    grid-row: 1;
    grid-column: 1;
    max-width: 100%;
    justify-self: start;
    overflow-wrap: anywhere;
  }

  .nav-links {
    grid-row: 2;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-width: 0;
    gap: 12px;
    padding-top: 4px;
  }

  .nav-links a {
    text-align: center;
    white-space: nowrap;
  }

  .language-switcher {
    grid-row: 1;
    grid-column: 2;
  }

  .event-facts,
  .groups-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .page-backdrop {
    background-image:
      linear-gradient(rgba(188, 44, 28, 0.1), rgba(16, 12, 10, 0.2)),
      url("images/hero-mobile.png");
    background-position: 60% center;
  }

  .site-nav {
    min-height: 70px;
  }

  .language-switcher {
    transform: translateY(var(--mobile-language-y));
  }

  .brand {
    max-width: 150px;
    font-size: 0.86rem;
    line-height: 1.1;
  }

  .nav-cluster {
    gap: 8px;
  }

  .event-facts,
  .contact-grid,
  .groups-grid,
  .sources-list {
    grid-template-columns: 1fr;
  }

  .story-section {
    padding-block: 76px;
  }

  .footer {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}