/* alarifi.group: a one-button handheld on a desk.
   Fonts: Michroma and Readex Pro, self-hosted under the SIL Open Font License (assets/OFL.txt). */

@font-face {
  font-family: "Michroma"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(michroma-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: "Readex"; font-style: normal; font-weight: 160 700; font-display: swap;
  src: url(readex-latin.woff2) format("woff2-variations"), url(readex-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: "Readex"; font-style: normal; font-weight: 160 700; font-display: swap;
  src: url(readex-arabic.woff2) format("woff2-variations"), url(readex-arabic.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;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  --desk-hi: #eceae5; --desk: #dedcd6; --desk-lo: #c8c5be;
  --ink: #1a1714; --ink-2: #48433d; --ink-3: #534d46;
  --rule-desk: rgba(26, 23, 20, .16);
  --link: #a3270f;
  --paper: #fbfaf7; --paper-ink: #1a1714; --paper-ink-2: #57514a; --paper-rule: #e6e1d8; --paper-link: #a3270f;
  --ring: #1a1714;
  --shadow: rgba(52, 24, 12, .42);

  /* the object's own materials; these do not change with the theme */
  --red-hi: #ea4f2e; --red: #d63a1d; --red-lo: #b8301a; --red-wall: #8a2312; --red-flat: #cf371b;
  --cream-hi: #fffaf1; --cream: #f3ede3; --cream-lo: #d8cebd; --cream-wall: #b1a48d;
  --bezel: #191614; --pill: #2a2420; --pill-hi: #3b332e; --pill-wall: #0d0b0a;
  --plastic-hi: #403a36; --plastic: #2b2725; --plastic-lo: #1d1a18;
  --label: #f6f1e8;
  --object-ink: #1a1714; --object-ink-2: #5b5248; --object-ring: #1a1714;

  --display: "Michroma", "Readex", system-ui, sans-serif;
  --text: "Readex", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --desk-hi: #2c2a27; --desk: #211f1d; --desk-lo: #151413;
    --ink: #f1ede6; --ink-2: #c3bcb1; --ink-3: #a59e94;
    --rule-desk: rgba(241, 237, 230, .16);
    --link: #ff9478;
    --paper: #282522; --paper-ink: #f1ede6; --paper-ink-2: #bdb6ab; --paper-rule: #3c3834; --paper-link: #ff9478;
    --ring: #f1ede6;
    --shadow: rgba(0, 0, 0, .62);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --desk-hi: #2c2a27; --desk: #211f1d; --desk-lo: #151413;
  --ink: #f1ede6; --ink-2: #c3bcb1; --ink-3: #a59e94;
  --rule-desk: rgba(241, 237, 230, .16);
  --link: #ff9478;
  --paper: #282522; --paper-ink: #f1ede6; --paper-ink-2: #bdb6ab; --paper-rule: #3c3834; --paper-link: #ff9478;
  --ring: #f1ede6;
  --shadow: rgba(0, 0, 0, .62);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--desk);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scrollbar-color: var(--ink-3) var(--desk);
}
body {
  margin: 0; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  font: 400 17px/1.6 var(--text); color: var(--ink);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 90% at 62% 36%, var(--desk-hi), var(--desk) 55%, var(--desk-lo));
}
html[lang="ar"] body { line-height: 1.8; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: .08em; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
.sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
html[lang="en"] [data-when="ar"], html[lang="ar"] [data-when="en"] { display: none !important; }

/* Arabic inside display-face elements switches to Readex Pro (Michroma has no Arabic) */
:where(h1, .key-text, .cart-name, .cart-sub, .spec dt, .lcd-note, .h1-sub) [lang="ar"] {
  font-family: var(--text); letter-spacing: 0; text-transform: none;
}

.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 64px); }

/* ---------- Header ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 22px 10px; }
.mark { font: 400 19px/1 var(--display); letter-spacing: .01em; color: var(--ink); text-decoration: none; white-space: nowrap; padding: 10px 0; }
.mark .dot { color: var(--red); }

/* ---------- Keys: buttons with a real side wall ---------- */
.key {
  --wall: .4em; --wall-bg: var(--pill-wall);
  position: relative; display: inline-block; vertical-align: top;
  font-size: var(--key-size, 10px); margin-bottom: var(--wall);
  color: inherit; text-decoration: none; cursor: pointer;
  border: 0; padding: 0; background: none; font-family: inherit;
  border-radius: 999em; -webkit-tap-highlight-color: transparent;
}
.key::before {
  content: ""; position: absolute; left: 0; right: 0; top: var(--wall); bottom: calc(var(--wall) * -1);
  border-radius: inherit; background: var(--wall-bg);
  box-shadow: 0 1em 1.6em -.9em var(--shadow);
}
.key-face {
  position: relative; display: flex; align-items: center; justify-content: center; gap: .7em;
  border-radius: inherit; transition: transform .16s var(--ease-out), filter .2s;
}
.key:hover .key-face { filter: brightness(1.07); }
.key:active .key-face { transform: translateY(calc(var(--wall) * .7)); }
.key:focus-visible { outline: none; }
.key:focus-visible .key-face { outline: .3em solid var(--ring); outline-offset: .35em; }
.key-text { display: block; font: 400 1em/1 var(--display); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.key-text > [data-when="en"] { padding-inline-start: .14em; }
.key-text [lang="ar"] { font-weight: 600; font-size: 1.3em; }
.key svg { width: 1.8em; height: 1.8em; flex: none; }

.key-pill .key-face {
  height: 3em; min-width: 8.8em; padding: 0 1.5em;
  background: linear-gradient(180deg, var(--pill-hi), var(--pill) 70%); color: #f3ede3;
  box-shadow: inset 0 .12em 0 rgba(255, 255, 255, .14);
}
.top .key-pill .key-face { height: 3.6em; min-width: 0; padding: 0 1.7em; }
.top .key-text [lang="ar"] { font-size: 1.45em; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .key-desk { --wall-bg: linear-gradient(180deg, var(--cream-lo), var(--cream-wall)); }
  :root:not([data-theme="light"]) .key-desk .key-face { background: linear-gradient(180deg, var(--cream-hi), var(--cream) 70%); color: var(--object-ink); box-shadow: inset 0 .14em .1em rgba(255, 255, 255, .8); }
}
:root[data-theme="dark"] .key-desk { --wall-bg: linear-gradient(180deg, var(--cream-lo), var(--cream-wall)); }
:root[data-theme="dark"] .key-desk .key-face { background: linear-gradient(180deg, var(--cream-hi), var(--cream) 70%); color: var(--object-ink); box-shadow: inset 0 .14em .1em rgba(255, 255, 255, .8); }

.key-red { --wall: .55em; --wall-bg: var(--red-wall); }
.key-red .key-face {
  height: 4.8em; padding: 0 2.2em; color: #fff;
  background: linear-gradient(180deg, #df4529, #c63318 75%);
  box-shadow: inset 0 .14em 0 rgba(255, 255, 255, .3);
}
.key-red .key-text { font: 600 1.6em/1 var(--text); letter-spacing: 0; text-transform: none; }
.key-red .key-text [lang="ar"] { font-size: 1em; }
.key-red:focus-visible .key-face { outline-color: var(--ring); }

.key-cream { --wall: .6em; --wall-bg: linear-gradient(180deg, var(--cream-lo), var(--cream-wall)); }
.key-cream .key-face {
  height: 5.4em; padding: 0 2.6em; color: var(--object-ink);
  background: linear-gradient(180deg, var(--cream-hi), var(--cream) 60%, #e7dfd0);
  box-shadow: inset 0 .2em .15em rgba(255, 255, 255, .8), inset 0 -.3em .5em rgba(120, 96, 62, .18);
}
.key-cream .key-text { font: 600 1.7em/1 var(--text); letter-spacing: 0; text-transform: none; }
.key-cream .key-text [lang="ar"] { font-size: 1em; }

/* ---------- The handheld ---------- */
.stage { --u: clamp(.62px, calc((100vh - 130px) / 745), 1.04px); }
@supports (height: 100svh) { .stage { --u: clamp(.62px, calc((100svh - 130px) / 745), 1.04px); } }
.console { --key-size: 1em; position: relative; flex: none; width: 34em; padding-top: 7.6em; font-size: calc(var(--u) * 10); }
.console.empty { padding-top: 0; }

.dev {
  position: relative; z-index: 1; width: 34em; height: 66em;
  border-radius: 4.4em 4.4em 4.4em 9.6em;
  background: linear-gradient(160deg, var(--red-hi), var(--red) 42%, var(--red-lo));
  box-shadow: inset 0 .2em 0 rgba(255, 255, 255, .32), inset 0 -.6em 1.4em rgba(60, 10, 0, .28),
    0 4em 6em -2.4em var(--shadow), 0 .8em 1.8em -.8em rgba(0, 0, 0, .35);
}
.dev::before { /* the device's top lip shading the cartridge */
  content: ""; position: absolute; left: 6em; right: 6em; top: -1.4em; height: 1.4em; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .3));
}
.console.empty .dev::before { display: none; }
.bezel {
  position: absolute; top: 4.4em; left: 3.4em; right: 3.4em; height: 38em;
  padding: 2.6em 1.6em 1.6em; border-radius: 1.8em 1.8em 1.8em 3.2em; background: var(--bezel);
  box-shadow: inset 0 .3em .8em rgba(0, 0, 0, .6), 0 .12em 0 rgba(255, 255, 255, .2);
}
.led {
  position: absolute; top: 1em; left: 1.7em; width: .7em; height: .7em; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffb5a1, #ff3b1d 45%, #a3170a);
}
.console.empty .led { background: #3a1a13; }
.lcd { position: relative; width: 100%; height: 100%; border-radius: .8em; overflow: hidden; background: #0e0c0b; }
.lcd img { width: 100%; height: 100%; object-fit: cover; }
.lcd::after { /* glass */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(155deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, 0) 36%);
}
.lcd-note { display: grid; place-items: center; height: 100%; padding: 2em; text-align: center; color: #e9e2d6; }
.lcd-note > span { font: 400 2em/1.6 var(--display); letter-spacing: .22em; text-transform: uppercase; }
.lcd-note > [lang="ar"] { font-size: 2.6em; font-weight: 500; }
.brand { position: absolute; left: 0; right: 0; top: 43.5em; text-align: center; color: #fff; }
.brand span { font: 400 1.1em/1 var(--display); letter-spacing: .32em; padding-left: .32em; text-transform: uppercase; }

.key-play {
  --wall: .8em; --wall-bg: linear-gradient(180deg, var(--cream-lo), var(--cream-wall));
  position: absolute; left: 50%; top: 46.4em; width: 11em; height: 11em; margin: 0 0 0 -5.5em; border-radius: 50%;
}
.key-play .key-face {
  width: 100%; height: 100%; flex-direction: column; gap: .6em; color: var(--object-ink);
  background: radial-gradient(circle at 40% 30%, var(--cream-hi), var(--cream) 55%, var(--cream-lo));
  box-shadow: inset 0 .22em .2em rgba(255, 255, 255, .75), inset 0 -.4em .7em rgba(120, 96, 62, .2);
}
.key-play .key-text { font-size: 1.5em; letter-spacing: .16em; }
.key-play .key-text [lang="ar"] { font-size: 1.35em; }
.key-play .key-sub { font: 500 1.05em/1 var(--text); color: var(--object-ink-2); }
.key-play:focus-visible .key-face, .dev-keys .key:focus-visible .key-face { outline-color: var(--object-ring); }
.dev-keys { position: absolute; left: 0; right: 0; top: 59.6em; display: flex; justify-content: center; gap: 1.6em; }
.grille {
  position: absolute; right: 3.2em; top: 49.7em; width: 4.4em; height: 4.4em;
  background: radial-gradient(circle, rgba(70, 12, 2, .7) 0 .22em, transparent .27em) 0 0 / 1.1em 1.1em;
}

/* ---------- The cartridge ---------- */
.cart {
  position: absolute; z-index: 0; left: 50%; top: 0; width: 22em; height: 28.4em; margin-left: -11em;
  border-radius: 1.4em 1.4em .9em .9em; color: var(--object-ink); text-decoration: none;
  background: linear-gradient(180deg, var(--plastic-hi), var(--plastic) 16%, var(--plastic-lo));
  box-shadow: inset 0 .14em 0 rgba(255, 255, 255, .16), inset 0 -.3em .6em rgba(0, 0, 0, .35);
  transition: transform .35s var(--ease-out);
}
.cart-label {
  position: absolute; left: 1.4em; right: 1.4em; top: 1.5em; bottom: 1.5em; overflow: hidden;
  display: flex; flex-direction: column; border-radius: .7em; background: var(--label);
}
.cart-name { flex: none; height: 3.4em; display: grid; place-items: center; }
.cart-name > span { font: 400 1.45em/1 var(--display); letter-spacing: .18em; padding-inline-start: .18em; text-transform: uppercase; }
.cart-name > [lang="ar"] { font-size: 1.7em; font-weight: 600; padding: 0; }
.cart-art { flex: none; width: 100%; aspect-ratio: 1; object-fit: cover; }
.cart-art-type { display: grid; place-items: center; color: #1f2a31; }
.cart-art-type > [lang="ar"] { font: 700 6.2em/1 var(--text); }
.cart-art-type > [lang="en"] { font: 400 2.2em/1 var(--display); letter-spacing: .12em; text-transform: uppercase; padding-inline-start: .12em; }
.cart-sub { flex: 1; display: grid; place-items: center; color: var(--object-ink-2); }
.cart-sub > span { font: 400 .9em/1 var(--display); letter-spacing: .24em; padding-inline-start: .24em; text-transform: uppercase; }
.cart-sub > [lang="ar"] { font-size: 1.2em; font-weight: 500; padding: 0; }
.console .cart:hover, .console .cart:focus-visible { transform: translateY(-.8em); }
.cart:focus-visible { outline: .3em solid var(--ring); outline-offset: .3em; }

/* ---------- Home ---------- */
.home {
  flex: 1; display: grid; grid-template-columns: minmax(0, 25rem) minmax(0, 1fr);
  align-items: center; gap: clamp(32px, 5vw, 72px); padding-block: 8px 40px;
  min-height: calc(100vh - 82px); min-height: calc(100svh - 82px);
}
.intro h1 { font: 400 clamp(32px, 3.5vw, 46px)/1.12 var(--display); letter-spacing: -.01em; text-wrap: balance; }
.intro h1 [lang="ar"] { font-weight: 650; font-size: 1.12em; line-height: 1.45; }
.lede { margin-top: 22px; font-size: 18px; line-height: 1.6; color: var(--ink-2); max-width: 36ch; }
.hint { margin-top: 30px; font-size: 14px; font-weight: 500; color: var(--ink-3); }
.home .stage { justify-self: center; margin-inline-end: clamp(0px, 8vw, 120px); padding-block: 12px; }

/* opening moment: the cartridge drops into the slot, then the screen powers on */
@keyframes slot-in { from { transform: translateY(calc(var(--drop, 8.6em) * -1)); } to { transform: none; } }
@keyframes power-on {
  0% { clip-path: inset(50% 0 50% 0); filter: brightness(3) saturate(0); }
  18% { clip-path: inset(49.3% 0 49.3% 0); filter: brightness(3) saturate(0); }
  100% { clip-path: inset(0 0 0 0); filter: none; }
}
@keyframes led-on { from { background: #3a1a13; } }
.home .cart { animation: slot-in .85s var(--ease-out) .2s backwards; }
.home .lcd img { animation: power-on .7s var(--ease-out) .9s backwards; }
.home .led { animation: led-on .01s linear .9s backwards; }

/* more apps: every other app lies on the desk next to the handheld, as a cartridge */
.home .stage.has-rack { display: flex; align-items: flex-end; gap: calc(var(--u) * 36); margin-inline-end: clamp(0px, 3vw, 48px); }
.rack { list-style: none; margin: 0; padding: 0 0 calc(var(--u) * 26); display: flex; flex-direction: column; gap: 22px; }
.rack li { display: grid; justify-items: center; gap: 16px; }
.rack .cart {
  position: relative; left: auto; top: auto; margin: 0; display: block; font-size: calc(var(--u) * 8);
  transform: rotate(-5deg);
  box-shadow: inset 0 .14em 0 rgba(255, 255, 255, .16), inset 0 -.3em .6em rgba(0, 0, 0, .35),
    0 2.6em 3.2em -1.8em var(--shadow), 0 .5em 1em -.5em rgba(0, 0, 0, .3);
}
.rack .cart:hover, .rack .cart:focus-visible { transform: rotate(-2deg) translateY(-.7em); }
.rack-note { font: 600 13px/1 var(--text); color: var(--ink-3); }

/* ---------- App page ---------- */
.app-page {
  flex: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center; gap: clamp(32px, 6vw, 96px); padding-block: 16px 72px;
}
.app-object { display: grid; place-items: center; --u: clamp(.86px, 1.12vw, 1.3px); padding-block: 24px; }
.app-object .cart {
  position: relative; left: auto; top: auto; margin: 0; display: block; font-size: calc(var(--u) * 10);
  transform: rotate(-3deg);
  box-shadow: inset 0 .14em 0 rgba(255, 255, 255, .16), inset 0 -.3em .6em rgba(0, 0, 0, .35),
    0 3em 4em -2em var(--shadow), 0 .6em 1.2em -.6em rgba(0, 0, 0, .3);
}
.app-object .cart:hover { transform: rotate(-1.5deg) translateY(-.5em); }
.app-info h1 { font: 400 clamp(32px, 3.6vw, 48px)/1.08 var(--display); letter-spacing: -.01em; }
.app-info h1 [lang="ar"] { font-weight: 650; font-size: 1.1em; line-height: 1.4; }
.h1-sub { display: block; margin-top: .7em; font-size: .36em; line-height: 1.3; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-2); }
.h1-sub [lang="ar"] { font-size: 1.5em; font-weight: 500; }
.app-info .lede { margin-top: 26px; font-size: 19px; color: var(--ink); max-width: 38ch; }
.app-info .more { margin-top: 12px; color: var(--ink-2); max-width: 46ch; }
.app-actions { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 18px; }
.spec { margin-top: 34px; max-width: 32rem; display: grid; grid-template-columns: auto 1fr; border-top: 1px solid var(--rule-desk); }
.spec > div { display: contents; }
.spec dt, .spec dd { padding-block: 11px; border-bottom: 1px solid var(--rule-desk); }
.spec dt { padding-top: 15px; padding-inline-end: 28px; font: 400 10.5px/1.6 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
.spec dt [lang="ar"] { font-size: 14px; font-weight: 600; }
.spec dd { font-size: 16px; }
.app-links { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px 14px; }
.app-soon {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 26px; border-radius: 999px;
  border: 1.5px dashed var(--ink-3); color: var(--ink-2); font: 600 16px/1.2 var(--text);
}

/* ---------- Support and privacy: a sheet on the desk ---------- */
.doc-page { flex: 1; padding-block: 10px 64px; }
.sheet {
  max-width: 840px; margin-inline: auto; overflow: hidden; border-radius: 16px;
  background: var(--paper); color: var(--paper-ink);
  box-shadow: 0 30px 60px -34px var(--shadow), 0 3px 10px -5px rgba(0, 0, 0, .2);
}
.sheet-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 24px;
  padding: 20px clamp(20px, 4vw, 44px) 22px; background: var(--band, var(--red-flat)); color: #fff;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .22);
}
.sheet-app { display: flex; align-items: center; gap: 14px; color: #fff; text-decoration: none; }
.sheet-app img { width: 48px; height: 48px; border-radius: 12px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .28); }
.sheet-app b { display: block; font: 600 16px/1.3 var(--text); }
.sheet-app small { display: block; font-size: 13px; line-height: 1.4; }
.sheet-app:hover b { text-decoration: underline; }
.sheet-app:focus-visible { outline-color: #fff; }
.sheet-tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.sheet-tabs .key { --wall-bg: #7d1f10; }
.sheet-tabs .key-face { background: linear-gradient(180deg, #3a2a25, #241c19 70%); }
.sheet-tabs .key[aria-current="page"] { --wall-bg: var(--cream-wall); }
.sheet-tabs .key[aria-current="page"] .key-face {
  background: linear-gradient(180deg, var(--cream-hi), var(--cream)); color: var(--object-ink);
  transform: translateY(.28em);
}
.sheet-tabs .key:focus-visible .key-face { outline-color: #fff; }
.sheet-body { padding: clamp(30px, 5vw, 56px) clamp(20px, 6vw, 72px) clamp(36px, 5vw, 64px); }
.sheet-body > * { max-width: 65ch; }
.sheet-body h1 { font: 400 clamp(26px, 3vw, 34px)/1.2 var(--display); letter-spacing: -.005em; margin-bottom: 22px; }
.sheet-body h1 [lang="ar"] { font-weight: 650; font-size: 1.12em; line-height: 1.4; }
.sheet-body h2 { font: 600 19px/1.4 var(--text); margin: 34px 0 8px; }
.sheet-body p { margin: 0 0 14px; }
.sheet-body .meta { margin: -10px 0 22px; font-size: 14px; color: var(--paper-ink-2); }
.sheet-body a:not(.key) { color: var(--paper-link); }
.qa { list-style: none; padding: 0; margin: 26px 0 32px; border-top: 1px solid var(--paper-rule); }
.qa li { padding: 16px 0; border-bottom: 1px solid var(--paper-rule); }
.qa b { font-weight: 600; }
.sheet-body strong { font-weight: 600; }
.nobr { white-space: nowrap; }

/* bilingual documents: Arabic first, right to left, English underneath */
.sheet-body > .doc-part { max-width: none; }
.doc-part > * { max-width: 65ch; }
.doc-part[lang="ar"] { line-height: 1.85; }
.doc-part + .doc-part { margin-top: 46px; padding-top: 36px; border-top: 1px solid var(--paper-rule); }
.doc-brand { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 6px; }
.sheet-body .doc-brand h1 { margin: 0; font: 700 clamp(34px, 4.4vw, 46px)/1.3 var(--text); letter-spacing: 0; }
.doc-latin { font: 400 13px/1 var(--display); letter-spacing: .28em; color: var(--paper-ink-2); }
.sheet-body .lead { margin: 2px 0 26px; font-size: 19px; line-height: 1.7; }
.doc-brand + .meta { margin: 0 0 26px; }
.doc-part h2:first-child { margin-top: 0; }
.doc-part[lang="en"] > h2:first-child { font: 400 22px/1.3 var(--display); letter-spacing: -.005em; }
.doc-part h2 + .meta { margin: -2px 0 18px; }
.doc-list { margin: 0 0 18px; padding-inline-start: 1.3em; }
.doc-list li { margin: 0 0 10px; padding-inline-start: .2em; }
.doc-list li::marker { color: var(--paper-ink-2); }

/* ---------- 404 ---------- */
.lost { flex: 1; display: grid; grid-template-columns: auto minmax(0, 24rem); align-items: center; justify-content: center; gap: clamp(32px, 6vw, 88px); padding-block: 24px 56px; }
.lost .stage { --u: clamp(.5px, calc((100vh - 220px) / 900), .72px); }
.lost h1 { font: 400 clamp(28px, 3vw, 38px)/1.15 var(--display); letter-spacing: -.01em; }
.lost h1 [lang="ar"] { font-weight: 650; font-size: 1.12em; line-height: 1.4; }
.lost section p { margin: 16px 0 28px; color: var(--ink-2); }

/* ---------- Footer ---------- */
.foot { margin-top: auto; padding-block: 26px 34px; font-size: 14px; color: var(--ink-2); border-top: 1px solid var(--rule-desk); }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 20px; flex: 1; padding: 0; list-style: none; }
.foot-links a { color: var(--ink-2); text-decoration: none; }
.foot-links a:hover { color: var(--ink); text-decoration: underline; }
.switch {
  --i: 0; position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 3px; border-radius: 999px; background: var(--pill); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5), 0 0 0 1px var(--rule-desk);
}
:root[data-theme="light"] .switch { --i: 1; }
:root[data-theme="dark"] .switch { --i: 2; }
.switch button {
  position: relative; z-index: 1; border: 0; background: none; cursor: pointer; border-radius: 999px;
  padding: 6px 14px; font: 500 13px/1.2 var(--text); color: #d3cabe;
}
:root:not([data-theme]) .switch [data-set-theme="auto"],
:root[data-theme="light"] .switch [data-set-theme="light"],
:root[data-theme="dark"] .switch [data-set-theme="dark"] { color: var(--object-ink); }
.switch button:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.switch-knob {
  position: absolute; z-index: 0; top: 3px; bottom: 3px; width: calc((100% - 6px) / 3);
  inset-inline-start: calc(3px + var(--i) * (100% - 6px) / 3); border-radius: 999px;
  background: linear-gradient(180deg, var(--cream-hi), var(--cream-lo)); box-shadow: 0 2px 3px rgba(0, 0, 0, .4);
  transition: inset-inline-start .3s var(--ease-out);
}

/* ---------- Smaller screens ---------- */
@media (max-width: 879px) {
  .home { grid-template-columns: minmax(0, 1fr); gap: 4px; padding-block: 10px 32px; }
  .home { min-height: 0; }
  .home .stage { --u: clamp(.6px, calc((100vw - 40px) / 400), .84px); --drop: 5.4em; margin-inline-end: 0; padding-top: 44px; }
  .home .stage.has-rack { flex-direction: column; align-items: center; margin-inline-end: 0; gap: 34px; }
  .rack { flex-direction: row; padding: 0; }
  .lede { max-width: 40ch; }
  .hint { margin-top: 18px; }
  .app-page { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-top: 4px; }
  .app-object { --u: clamp(.72px, calc((100vw - 40px) / 330), .95px); padding-block: 18px 30px; }
  .lost { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 28px; }
  .lost .stage { --u: .52px; }
}
@media (min-width: 600px) and (max-width: 879px) {
  .home .stage { --u: clamp(.7px, calc((100vh - 330px) / 745), 1px); }
  @supports (height: 100svh) { .home .stage { --u: clamp(.7px, calc((100svh - 330px) / 745), 1px); } }
}
@media (max-width: 520px) {
  .top { padding-top: 16px; }
  .mark { font-size: 17px; }
  .sheet-head { padding-block: 18px 20px; }
  .sheet-tabs { width: 100%; }
  .sheet-tabs .key { flex: 1; }
  .sheet-tabs .key-face { min-width: 0; padding: 0 1em; }
  .foot-in { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .home .cart, .home .lcd img, .home .led { animation: none; }
  .cart, .key-face, .switch-knob { transition: none; }
}