/* 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"); }

: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", 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; }
: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); }

/* ---------- 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); } }
@media (max-width: 24rem) { .board { grid-template-columns: repeat(2, 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-family: var(--mono); font-size: var(--step--2); margin-block-start: var(--space-3xs); hyphens: manual; }
.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; } }