/* Pixelsoff site-lab: the shared base every part builds on. Taken from ../../site/index.html (the style Ali loves).
   Parts may add their own CSS, scoped to [data-part="<folder>"]; they don't edit this file. */
:root {
  --sand: #EADCC3;
  --dune: #CFB48A;
  --date: #2A1E17;
  --night: #11161F;
  --wadi: #13A497;
  --film: #131924;
  --f-en: 'Bricolage Grotesque', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
  --f-ar: 'Readex Pro', 'Segoe UI', Tahoma, sans-serif;
  --f-num: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --m: clamp(16px, 3.4vw, 48px);
  --hd: 64px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ground: var(--night);
  --ink: var(--sand);
  --ink-2: rgba(234, 220, 195, .74);
  --wire: rgba(207, 180, 138, .17);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--night); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; position: relative; background: var(--night); color: var(--sand); font: 400 18px/1.75 var(--f-ar); -webkit-font-smoothing: antialiased; overflow-x: clip; }
html[lang="en"] body { font-family: var(--f-en); line-height: 1.55; }
/* Bilingual markup: <span class="ar">…</span><span class="en">…</span>; the page shows one. */
html[lang="ar"] .en, html[lang="en"] .ar { display: none !important; }
/* Read by screen readers, not shown. */
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
img, video, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
::selection { background: var(--dune); color: var(--date); }
p, h1, h2, h3, ol, ul, figure { margin: 0; }
.wrap { width: 100%; max-width: 1520px; margin-inline: auto; padding-left: max(var(--m), env(safe-area-inset-left)); padding-right: max(var(--m), env(safe-area-inset-right)); }
.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); }
.num { font-family: var(--f-num); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* Sections and their grounds */
.sec { background: var(--ground); color: var(--ink); padding-block: clamp(96px, 12vw, 184px); scroll-margin-top: var(--hd); position: relative; }
.t-night { --ground: var(--night); --ink: var(--sand); --ink-2: rgba(234, 220, 195, .74); --wire: rgba(207, 180, 138, .17); }
.t-date { --ground: var(--date); --ink: var(--sand); --ink-2: rgba(234, 220, 195, .76); --wire: rgba(207, 180, 138, .2); }
.t-sand { --ground: var(--sand); --ink: var(--date); --ink-2: rgba(42, 30, 23, .78); --wire: rgba(42, 30, 23, .085); color-scheme: light; }
.t-dune { --ground: var(--dune); --ink: var(--date); --ink-2: rgba(42, 30, 23, .8); --wire: rgba(42, 30, 23, .1); color-scheme: light; }

/* Type: Arabic leads and is never letter-spaced; English tightens. */
h1, h2, h3 { font-weight: 700; text-wrap: balance; }
.h1 { font: 700 clamp(46px, 8vw, 128px)/1.22 var(--f-ar); }
.h2 { font: 700 clamp(36px, 5.2vw, 84px)/1.3 var(--f-ar); }
.h3 { font: 700 clamp(24px, 2.4vw, 34px)/1.35 var(--f-ar); }
.xl { font: 700 clamp(46px, 8vw, 128px)/1.2 var(--f-ar); }
html[lang="en"] .h1 { font: 800 clamp(44px, 7.2vw, 116px)/1.02 var(--f-en); letter-spacing: -.04em; }
html[lang="en"] .h2 { font: 700 clamp(34px, 4.8vw, 78px)/1.04 var(--f-en); letter-spacing: -.03em; }
html[lang="en"] .h3 { font: 700 clamp(22px, 2.2vw, 32px)/1.15 var(--f-en); letter-spacing: -.02em; }
html[lang="en"] .xl { font: 800 clamp(50px, 7.4vw, 116px)/1 var(--f-en); letter-spacing: -.045em; }
.lede { font-size: clamp(19px, 1.55vw, 22px); line-height: 1.7; max-width: 32em; }
html[lang="en"] .lede { line-height: 1.5; }
.small { font-size: 15px; line-height: 1.5; }

/* Logo: lockup = <a class="lockup"><svg class="sym">…</svg><span class="wm"><b>pixels</b><span class="off">off</span></span></a>.
   PX.sym() in shell.js draws the symbol with the exact geometry from brand/README.md. */
.lockup { display: inline-flex; align-items: center; gap: .32em; font-size: 23px; line-height: 1; text-decoration: none; direction: ltr; color: inherit; }
.lockup .sym { width: 1.05em; height: 1.05em; flex: none; overflow: visible; }
.wm { font-family: var(--f-en); letter-spacing: -.045em; white-space: nowrap; font-optical-sizing: auto; }
.wm b { font-weight: 800; }
.wm .off { font-weight: 300; display: inline-block; }

/* Buttons and links */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 999px; background: var(--ink); color: var(--ground); font-weight: 600; font-size: 18px; line-height: 1.2; text-decoration: none; border: 0; cursor: pointer; transition: transform .18s var(--ease), background-color .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn.soft { background: rgba(234, 220, 195, .1); color: var(--ink); }
.btn.soft:hover { background: rgba(234, 220, 195, .16); }
.tlink { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; transition: text-decoration-color .2s; }
.tlink:hover { text-decoration-color: transparent; }

/* A part that hasn't been built yet (build.mjs fills the gap) */
.px-placeholder { padding-block: 72px; border-top: 1px dashed var(--wire); }
.px-placeholder .num { color: var(--ink-2); font-size: 14px; }