/* Six Three Five — one canvas, one clock, one corner. */

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(newsreader.woff2) format("woff2-variations");
  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: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(newsreader-ext.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+A720-A7FF;
}
@font-face {
  font-family: "Amiri";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(amiri-400.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-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;
}
@font-face {
  font-family: "Amiri";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(amiri-700.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-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;
}

:root {
  --canvas: #0a0a09;
  --ink: #ece7de;
  --ink-2: rgba(236, 231, 222, 0.58);
  --ink-3: rgba(236, 231, 222, 0.36);
  --rule: rgba(236, 231, 222, 0.16);

  --latin: "Newsreader", "Iowan Old Style", "Times New Roman", serif;
  --arabic: "Amiri", "Newsreader", "Geeza Pro", "Noto Naskh Arabic", serif;

  --edge: clamp(20px, 3.2vw, 44px);
  --size: clamp(15.5px, 0.55vw + 12.5px, 18px);
  --small: clamp(11px, 0.15vw + 10.4px, 12.5px);
  --tiny: clamp(10px, 0.1vw + 9.6px, 11px);
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { background: var(--canvas); -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--edge);
  padding-bottom: max(var(--edge), env(safe-area-inset-bottom));
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--latin);
  font-size: var(--size);
  font-weight: 380;
  line-height: 1.45;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--ink); color: var(--canvas); }

a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--ink-2);
}
:focus-visible { outline: 1px solid var(--ink-2); outline-offset: 4px; }

.skip {
  position: absolute; left: -9999px; top: 0;
}
.skip:focus { left: var(--edge); top: var(--edge); }

/* ── The clock ───────────────────────────────────────────── */

.clock {
  justify-self: center;
  text-align: center;
  font-size: var(--small);
  letter-spacing: 0.06em;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  white-space: nowrap;
}
.clock .sep { color: var(--ink-3); padding: 0 0.55em; }
.clock time { color: var(--ink); }
.clock [data-pending] { opacity: 0; transition: opacity 400ms ease; }
.clock.ready [data-pending] { opacity: 1; }

/* ── The corner ──────────────────────────────────────────── */

main { align-self: end; max-width: 30em; }

.nav {
  display: flex; flex-wrap: wrap; gap: 0.4em 1.6em;
  list-style: none;
  margin-bottom: 1.5em;
}
.caps {
  font-size: var(--small);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.statement { max-width: 22em; }

.sectors { display: grid; gap: 0.12em; }
.sectors .sector { color: var(--ink-2); }
.sectors .dash { color: var(--ink-3); padding: 0 0.4em; }
.sectors .mid { color: var(--ink-3); padding: 0 0.35em; }
.quiet { color: var(--ink-2); }

.person .name { font-weight: 500; }
.person .name-alt { color: var(--ink); }
.person .role { color: var(--ink-2); margin-top: 0.1em; }
.person .bio { margin-top: 1.35em; display: grid; gap: 0.75em; max-width: 25em; }
.person .out { margin-top: 1.35em; display: inline-block; }
.arrow { display: inline-block; margin-inline-start: 0.35em; transition: transform 200ms ease; }
a:hover .arrow { transform: translateX(3px); }
[dir="rtl"] a:hover .arrow { transform: translateX(-3px); }

.contact .email { letter-spacing: 0.02em; text-transform: none; }

/* ── Baseline: home/lang on one side, registration on the other ── */

.baseline {
  margin-top: 2.2em;
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1em 2em; flex-wrap: wrap;
}
.baseline .left { display: flex; gap: 1.6em; align-items: baseline; }
.lang { font-size: var(--small); letter-spacing: 0.08em; color: var(--ink-3); }
.lang .on { color: var(--ink-2); }
.lang a { color: var(--ink-2); }
.lang a:hover { color: var(--ink); }
.lang .slash { padding: 0 0.35em; }
.legal {
  font-size: var(--tiny);
  letter-spacing: 0.05em;
  color: var(--ink-3);
  text-align: end;
  font-variant-numeric: tabular-nums;
}
.legal .pending { font-style: italic; }

/* main + baseline share the bottom; baseline spans the full width */
.foot { align-self: end; }

/* ── Arabic ──────────────────────────────────────────────── */

[lang="ar"] body {
  font-family: var(--arabic);
  font-weight: 400;
  --size: clamp(18px, 0.6vw + 14.5px, 21px);
  --small: clamp(14px, 0.2vw + 13px, 15.5px);
  --tiny: clamp(12px, 0.1vw + 11.5px, 13px);
  line-height: 1.85;
}
[lang="ar"] .caps { letter-spacing: 0; text-transform: none; }
[lang="ar"] .clock { letter-spacing: 0.02em; }
[lang="ar"] .legal { letter-spacing: 0; }
[lang="ar"] .person .name { font-weight: 700; }
[lang="ar"] main { max-width: 26em; }
:lang(en), .latin { font-family: var(--latin); }
[lang="ar"] .latin { font-size: 0.86em; letter-spacing: 0.01em; }
[lang="ar"] .person .name-alt.latin { font-size: 0.82em; }
[lang="ar"] .lang .latin { font-size: 0.9em; }

/* ── Phone ───────────────────────────────────────────────── */

@media (max-width: 560px) {
  .clock { white-space: normal; max-width: 22em; line-height: 1.6; }
  .clock .dates { display: block; }
  .clock .dates .sep:first-child { display: none; }
  .baseline { flex-direction: column; align-items: flex-start; gap: 0.9em; }
  .legal { text-align: start; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

@media print {
  html, body { background: #fff; color: #000; }
}

.sectors { list-style: none; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

h1 { font-size: 1em; font-weight: 500; }
.person .name { font-size: 1.12em; letter-spacing: 0.005em; }

/* ── The moon: live phase and tilt as seen from Riyadh ───── */
.sky { display: grid; place-items: center; align-content: center; gap: 0.9rem; min-height: 0; padding-block: 2rem; }
.moon {
  width: clamp(128px, 12vw, 200px);
  aspect-ratio: 1;
  max-width: 100%;
  opacity: 0;
  transition: opacity 1600ms ease;
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  border-radius: 50%;
}
.moon.lit { opacity: 1; }
.moon.held { cursor: grabbing; }
.moon:focus-visible { outline-offset: 10px; }
.moon-note {
  min-height: 1.5em;
  font-size: var(--small);
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: var(--ink-3);
  opacity: 0;
  transition: opacity 500ms ease;
  font-variant-numeric: tabular-nums;
}
[lang="ar"] .moon-note { letter-spacing: 0; }
.moon-note.on { opacity: 1; }
.clock time, .clock [data-greg], .clock [data-hijri] { transition: color 400ms ease; }
.clock.shifted [data-greg], .clock.shifted [data-hijri] { color: var(--ink); }
.clock.shifted time { color: var(--ink-2); }