/* Yasser Maslout-Siegfried, v3. Brutalist: black and white, Atkinson Hyperlegible Soft, thick rules, no decoration.
   Every size, margin and padding comes from the Utopia scales below. */

/* Atkinson Hyperlegible Soft, self-hosted. SIL Open Font License 1.1, see fonts/OFL-AtkinsonHyperlegibleSoft.txt. */
@font-face { font-family: "Atkinson Hyperlegible Soft"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/AtkinsonHyperlegibleSoft-Regular.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Soft"; font-weight: 400; font-style: italic; font-display: swap; src: url("fonts/AtkinsonHyperlegibleSoft-RegularItalic.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Soft"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/AtkinsonHyperlegibleSoft-Bold.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Soft"; font-weight: 700; font-style: italic; font-display: swap; src: url("fonts/AtkinsonHyperlegibleSoft-BoldItalic.woff2") format("woff2"); }

/* Amiri (SIL OFL 1.1) and Cairo (SIL OFL 1.1), self-hosted. Same per-script subsets Google Fonts serves,
   so a page only fetches the Arabic or Latin piece it actually uses. Cairo is a variable font covering weights 200 to 1000. */
@font-face { font-family: "Amiri"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/Amiri-Regular-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: "Amiri"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/Amiri-Regular-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Amiri"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/Amiri-Regular-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Amiri"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/Amiri-Bold-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: "Amiri"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/Amiri-Bold-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Amiri"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/Amiri-Bold-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cairo"; font-weight: 200 1000; font-style: normal; font-display: swap; src: url("fonts/Cairo-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: "Cairo"; font-weight: 200 1000; font-style: normal; font-display: swap; src: url("fonts/Cairo-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cairo"; font-weight: 200 1000; font-style: normal; font-display: swap; src: url("fonts/Cairo-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Noto Naskh Arabic (SIL OFL 1.1), self-hosted, Arabic subset only: the body font for Arabic text. Variable weight 400 to 700. */
@font-face { font-family: "Noto Naskh Arabic"; font-weight: 400 700; font-style: normal; font-display: swap; src: url("fonts/NotoNaskhArabic-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }

:root {
  /* @link https://utopia.fyi/type/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  --step--2: clamp(0.7813rem, 0.7736rem + 0.0341vw, 0.8rem);
  --step--1: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);
  --step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  --step-1: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem);
  --step-2: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);
  --step-3: clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem);
  --step-4: clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);
  --step-5: clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem);

  /* @link https://utopia.fyi/space/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
  --space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
  --space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  --space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
  --space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
  --space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);
  --space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);
  --space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);
  /* One-up pairs */
  --space-3xs-2xs: clamp(0.3125rem, 0.1847rem + 0.5682vw, 0.625rem);
  --space-2xs-xs: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
  --space-xs-s: clamp(0.875rem, 0.7216rem + 0.6818vw, 1.25rem);
  --space-s-m: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
  --space-m-l: clamp(1.6875rem, 1.3551rem + 1.4773vw, 2.5rem);
  --space-l-xl: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
  --space-xl-2xl: clamp(3.375rem, 2.7102rem + 2.9545vw, 5rem);
  --space-2xl-3xl: clamp(4.5rem, 3.2727rem + 5.4545vw, 7.5rem);
  /* Custom pairs */
  --space-s-l: clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem);

  --bg: #fff;
  --fg: #000;
  --line: 2px;
  --font: "Atkinson Hyperlegible Soft", "Noto Naskh Arabic", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --measure: 70ch;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #000; --fg: #fff; color-scheme: dark; }
}
:root[data-theme="dark"] { --bg: #000; --fg: #fff; color-scheme: dark; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding: var(--space-s-l);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.5;
}
header, main, footer { max-width: var(--measure); }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
h1, h2, h3 { line-height: 1.1; font-weight: 700; text-wrap: balance; }
h1 { font-size: var(--step-5); margin-block-end: var(--space-s); }
h2 { font-size: var(--step-3); margin-block-end: var(--space-m); }
h3 { font-size: var(--step-1); margin-block: var(--space-m) var(--space-2xs); }
p, ul, ol, dl { margin-block-end: var(--space-s); }
ul, ol { padding-inline-start: var(--space-m); }
li { margin-block-end: var(--space-3xs); }
em { font-style: italic; }
.lahga { font-family: "Amiri", "Noto Naskh Arabic", serif; font-size: 1.5em; line-height: 1; } /* the word لهجة is always set in Amiri, two scale steps up, since Naskh runs small */
[lang="ar-EG"] { font-family: "Cairo", system-ui, sans-serif; } /* Egyptian Arabic, as opposed to Standard Arabic, is set in Cairo */
[hidden] { display: none !important; }
::selection { background: var(--fg); color: var(--bg); }

a { color: inherit; text-decoration: underline; text-decoration-thickness: var(--line); text-underline-offset: 0.15em; }
a:hover { background: var(--fg); color: var(--bg); text-decoration: none; }
/* External links open in a new tab and say so, with a link emoji after the text. */
a[target="_blank"]::after { content: "🔗"; font-size: 0.75em; margin-inline-start: 0.2em; text-decoration: none; display: inline-block; }
:focus-visible { outline: var(--line) solid var(--fg); outline-offset: var(--space-3xs); }
main:focus { outline: none; }

button {
  font: inherit;
  font-size: var(--step--1);
  background: var(--bg);
  color: var(--fg);
  border: var(--line) solid var(--fg);
  padding: var(--space-3xs) var(--space-xs);
  cursor: pointer;
}
button:hover { background: var(--fg); color: var(--bg); }
button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }

.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; inset-inline-start: var(--space-s); inset-block-start: -100vh;
  background: var(--fg); color: var(--bg); padding: var(--space-2xs) var(--space-s); text-decoration: none;
}
.skip:focus { inset-block-start: var(--space-s); }

.meta, .num { font-family: var(--mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.05em; }
.num { display: block; margin-block-end: var(--space-2xs); }
/* Arabic letters must join: no tracking, and no monospace fallback. Digits inside keep the mono look. */
:lang(ar) .meta { font-family: var(--font); letter-spacing: 0; }
.icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.1em; margin-inline-end: var(--space-2xs); border: var(--line) solid var(--fg); }
.icon.photo { object-fit: cover; image-rendering: pixelated; }
.lede { font-size: var(--step-1); line-height: 1.3; max-width: 40ch; text-wrap: balance; }

/* ---------- Header ---------- */
header {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--space-xs) var(--space-m);
  padding-block-end: var(--space-s);
  border-block-end: var(--line) solid var(--fg);
}
header .name { font-weight: 700; margin: 0; }
header nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-s); }
header .langs { margin-inline-start: auto; }
header a[aria-current="page"] { text-decoration: none; font-weight: 700; }

/* ---------- Sections ---------- */
section { padding-block: var(--space-l-xl); border-block-end: var(--line) solid var(--fg); }
section:last-of-type { border-block-end: 0; }
.hero { padding-block-start: var(--space-xl-2xl); }

dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2xs) var(--space-m); }
dl.facts dt { font-weight: 700; }
@media (max-width: 30rem) {
  dl.facts { grid-template-columns: 1fr; gap: var(--space-3xs); }
  dl.facts dd { margin-block-end: var(--space-xs); }
}
.links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-m); }
.hello { margin-block-start: var(--space-m); }
.hello a { white-space: nowrap; }

/* ---------- Memory game ----------
   The only colours on the site: the yellow-orange of the desert and the blue of the Red Sea at Dahab. Same in both modes. */
.game { --sun: #F5A524; --sea: #0B5F94; border: var(--line) solid var(--fg); padding: var(--space-s); max-width: 36rem; }
.game-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs); margin-block-end: var(--space-s); }
.game-bar p { margin: 0; display: inline-flex; gap: var(--space-3xs); margin-inline-end: var(--space-s); }
.game-bar output { font-weight: 700; }
.board { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2xs); }
@media (max-width: 34em) { .board { grid-template-columns: repeat(3, 1fr); } }
.board li { margin: 0; min-width: 0; display: grid; }
.tile {
  width: 100%; height: 100%; min-width: 0; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--space-2xs); font-size: var(--step--1); line-height: 1.2; text-align: center; overflow-wrap: anywhere; hyphens: auto;
}
/* Back of the card dark: sea with a white mark. Face light: sun with black text. Matched: sun, dashed. */
.tile[data-state="down"] { background: var(--sea); color: #fff; border-color: var(--fg); }
.tile[data-state="down"]:hover { background: #000; color: var(--sun); }
.tile[data-state="up"] { background: var(--sun); color: #000; border-color: var(--fg); }
.tile[data-state="done"] { background: var(--sun); color: #000; border-color: var(--fg); border-style: dashed; cursor: default; }
.tile[data-state="done"]:hover { background: var(--sun); color: #000; }
.tile .back { font-size: var(--step-3); font-weight: 700; }
.tile .w { font-size: var(--step-0); font-weight: 700; }
.tile .w[lang="ar-EG"] { font-size: var(--step-1); line-height: 1.5; }
/* Standard Arabic meaning cards on the Arabic page: two steps up, since the system Naskh runs small next to Cairo. */
.tile .w:lang(ar):not([lang="ar-EG"]) { font-size: var(--step-2); line-height: 1.4; }
.tile .tr { font-size: var(--step--2); font-style: italic; margin-block-start: var(--space-3xs); hyphens: manual; overflow-wrap: normal; }
/* Arabic must never break inside a word. */
.tile .w:lang(ar) { overflow-wrap: normal; hyphens: manual; }
/* Smallest screens: still 3 by 4, with tighter spacing and text one step down. */
@media (max-width: 24rem) {
  .game { padding: var(--space-2xs); }
  .board { gap: var(--space-3xs); }
  .tile { padding: var(--space-3xs); }
  .tile .w { font-size: var(--step--1); }
  .tile .w[lang="ar-EG"] { font-size: var(--step-0); }
  .tile .w:lang(ar):not([lang="ar-EG"]) { font-size: var(--step-1); }
}
.game-msg { margin-block: var(--space-s) 0; min-height: calc(1.5em * 2); font-size: var(--step--1); }

/* ---------- Footer ---------- */
footer { padding-block-start: var(--space-s); border-block-start: var(--line) solid var(--fg); font-size: var(--step--1); }
footer p { margin-block-end: var(--space-2xs); }

@media print { button, .skip { display: none; } }