:root { --red: #FF0000; --ink: #111111; --white: #FFFFFF; }
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--white); color: var(--ink); font-family: 'Libre Franklin', 'Noto Kufi Arabic', sans-serif; font-weight: 500; font-size: 17px; line-height: 1.45; overflow-x: hidden; }
[lang=ar] body, body:is([dir=rtl] *) { line-height: 1.75; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.flag { position: relative; display: grid; grid-template-columns: 1fr 2fr 1fr; height: min(74svh, 50vw + 240px); min-height: 340px; }
.flag .bar { background: var(--red); }
.flag .mid { display: grid; place-items: center; padding: 4%; }
.flag .mid img { width: min(86%, 46vh); }
.langs { position: absolute; top: 8px; inset-inline-end: 4px; display: flex; flex-direction: column; align-items: flex-end; z-index: 2; }
.langs a { color: var(--white); text-decoration: none; font-weight: 700; font-size: 15px; padding: 10px 9px; min-height: 44px; }
.langs a[aria-current] { text-decoration: underline; text-underline-offset: 4px; }
.langs a:focus-visible { outline-color: var(--white); }

.wordmark { font-weight: 900; color: var(--red); text-align: center; font-size: clamp(38px, 10.4vw, 168px); line-height: 1; letter-spacing: -.035em; white-space: nowrap; padding: .28em 0 .24em; }

.intro { background: var(--red); display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: clamp(20px, 6vw, 96px); align-items: center; padding: clamp(28px, 6vw, 88px) clamp(16px, 8vw, 150px); }
.intro .bag { width: 100%; max-width: 330px; justify-self: end; filter: drop-shadow(0 14px 22px rgba(90, 0, 0, .45)); }
.lead { color: var(--white); font-weight: 900; font-size: clamp(23px, 3.9vw, 58px); line-height: 1.08; letter-spacing: -.02em; max-width: 19em; }
[dir=rtl] .lead { letter-spacing: 0; line-height: 1.45; }
.jump { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 20px; color: var(--white); font-weight: 700; }
.jump a { padding: 8px 0; text-underline-offset: 4px; }
.cta { display: inline-block; margin-top: 18px; background: var(--ink); color: var(--white); font-weight: 900; padding: 15px 22px; text-decoration: none; }
.cta:hover { background: var(--white); color: var(--ink); }

main section { max-width: 1240px; margin-inline: auto; padding: clamp(40px, 7vw, 96px) 16px 0; }
h2 { color: var(--red); font-weight: 900; font-size: clamp(46px, 11vw, 150px); line-height: .95; letter-spacing: -.04em; margin-bottom: .22em; }
[dir=rtl] h2 { letter-spacing: 0; line-height: 1.3; }
.wall { display: grid; grid-template-columns: 1fr; }
.poster { padding: clamp(20px, 3vw, 34px); display: flex; flex-direction: column; }
.poster:nth-child(odd) { background: var(--red); color: var(--white); font-weight: 700; }
.poster:nth-child(even) { background: var(--white); box-shadow: inset 0 0 0 3px var(--red); }
.poster h3 { font-weight: 900; font-size: clamp(30px, 3.9vw, 50px); line-height: 1; letter-spacing: -.03em; }
.poster:nth-child(odd) h3 { color: var(--white); }
.poster:nth-child(even) h3 { color: var(--red); }
.lin { font-size: 15px; margin-top: 8px; font-weight: 700; }
.d { margin-top: 10px; max-width: 34em; }
dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: auto; padding-top: 18px; }
dt { font-size: 13.5px; font-weight: 700; line-height: 1.2; min-height: 2.4em; }
dd { margin: 3px 0 0; font-weight: 900; font-size: clamp(30px, 3.4vw, 44px); line-height: 1; letter-spacing: -.03em; white-space: nowrap; }
dd small { font-size: 15px; letter-spacing: 0; font-weight: 700; }
.poster:nth-child(odd) dd { color: var(--white); }
.poster:nth-child(even) dd { color: var(--red); }
.close { margin-top: clamp(48px, 8vw, 110px); background: var(--red); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 44px 16px 52px; }
.close img { width: min(44vw, 210px); }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 26px; padding: 22px 16px; font-weight: 700; font-size: 15px; }
@media (min-width: 720px) {
  .wall { grid-template-columns: 1fr 1fr; }
  .poster:nth-child(n) { background: var(--white); color: var(--ink); font-weight: 500; box-shadow: inset 0 0 0 3px var(--red); min-height: 290px; }
  .poster:nth-child(n) h3, .poster:nth-child(n) dd { color: var(--red); }
  .poster:nth-child(4n+1), .poster:nth-child(4n) { background: var(--red); color: var(--white); font-weight: 700; box-shadow: none; }
  .poster:nth-child(4n+1) h3, .poster:nth-child(4n) h3, .poster:nth-child(4n+1) dd, .poster:nth-child(4n) dd { color: var(--white); }
  .foot { padding-inline: clamp(16px, 8vw, 150px); }
}