/* ============================================================================
   Maktoob — parking page

   Every number below is extracted from maktoob-landing-260915.ai by
   scripts/extract-artboards.py and recorded in reference/spec.json. Nothing
   here was measured off a screenshot.

   Artboards:  mobile 440x860 (card 400x820)   desktop 1428x860 (card 1388x820)
   Card inset 20px, corner radius 48.156px, both artboards.

   Full bleed: the black is the page, not a card. The artboard's white margin
   and rounded corners are gone; what was the card is now an invisible layout
   box (still `.card`, still sized and placed exactly as before) and the inset
   survives only as breathing room between the content and the window edge.

   The unit is cqw — 1% of the card's width. `.frame` is the container, so the
   whole design is the artboard scaled to whatever width the card happens to
   have.

   The card keeps the artboard's exact aspect ratio and is sized by whichever
   viewport dimension binds (it is invisible now, but every element is still
   positioned against it):

     width = min(available width, available height x ratio)

   so the whole card is visible without scrolling on any screen. Available
   height uses dvh, which tracks Safari's toolbars as they collapse, and
   subtracts the safe-area insets. Nothing inside the card knows or cares: it
   gets a computed width and everything scales with it in cqw.
   ========================================================================== */

@font-face {
  font-family: "Maktoob Naskh";
  src: url("fonts/maktoob-naskh-black.fc0bbee75c.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Diatype";
  src: url("fonts/diatype-regular.4b334df049.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------- desktop artboard --------
   card 1388 x 820. The card's height follows the viewport rather than the
   artboard, so the masthead is anchored to the top and the text block to the
   bottom, both at the artboard's own offsets. Where the viewport's proportions
   match the artboard's, the two meet exactly where the artboard puts them. */

:root {
  --ink: #000;
  --paper: #fff;
  --accent: #ffc380;

  /* No longer a visible margin: just keeps the content off the window edges. */
  --inset: 20px;

  /* Card sizing. --ratio is the artboard's card, width / height. */
  --ratio: 1388 / 820;
  /* Below this the card stops shrinking and the page scrolls instead: at 280px
     the English line is 14px and the icons 22px. Only viewports narrower or
     shorter than any current mainstream phone reach it. */
  --card-floor: 280px;
  --vh: 100vh;
  --avail-h: calc(
    var(--vh)
    - (2 * var(--inset))
    - env(safe-area-inset-top, 0px)
    - env(safe-area-inset-bottom, 0px)
  );

  --logo-left: 29.5808cqw;
  --logo-top: 5.6063cqw;
  --logo-w: 40.8384cqw;

  --foundry-left: 15.3429cqw;
  --foundry-top: 10.6599cqw;
  --foundry-w: 12.0737cqw;

  --qareeban-left: 73.4510cqw;
  --qareeban-top: 16.2104cqw;
  --qareeban-w: 10.9510cqw;

  /* Text blocks: bottom-anchored on desktop, so --*-top is auto. */
  --h1-size: 4.3228cqw;
  --h1-lh: 6.4841cqw;
  --h1-top: auto;
  --h1-bottom: 15.0238cqw;
  /* Measured corrections. Two things need them:
     (a) the browser's first baseline sits a little below the analytic
         half-leading + ascent, and its centred line box a little left of the
         artboard's (which was set by hand, not centred to the pixel);
     (b) WebKit places the baseline ~1.5px lower than Chromium for these faces,
         so each dy is the midpoint of the two — both land within 0.75px.
     Re-derive with scripts/artboard-gate.py after any type change. */
  --h1-dx: 0.0360cqw;
  --h1-dy: -0.1260cqw;

  --p-size: 2.3055cqw;
  --p-lh: 2.7666cqw;
  --p-top: auto;
  --p-bottom: 11.3764cqw;
  --p-dx: 0.0720cqw;
  --p-dy: -0.1801cqw;

  --ig-w: 2.3055cqw;
  --mail-w: 2.8524cqw;
  --icon-gap: 1.8536cqw;
  --icons-top: auto;
  --icons-bottom: 5.8905cqw;
}

/* ----------------------------------------------------------------- base --- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* The root background paints the whole canvas: behind the notch and home
     indicator (viewport-fit=cover), and in Safari's rubber-band overscroll. */
  background: var(--ink);
  color-scheme: dark;
  overscroll-behavior: none;
  /* Locked: overscroll-behavior does not stop Safari's document-level
     rubber-band; only a document that cannot scroll does. Measured on an
     iPhone (375 wide, 610 visible): the card hit --card-floor, came out 574
     tall, and 574 + 2 x 20 inset scrolled the document by 4px. */
  height: 100%;
  overflow: hidden;
}

@supports (height: 100dvh) {
  :root { --vh: 100dvh; }
}

body {
  margin: 0;
  /* viewport-fit=cover is set in the <meta>, so the safe-area insets are live.
     Without them the card runs under Safari's toolbar or a landscape notch. */
  padding:
    calc(var(--inset) + env(safe-area-inset-top, 0px))
    calc(var(--inset) + env(safe-area-inset-right, 0px))
    calc(var(--inset) + env(safe-area-inset-bottom, 0px))
    calc(var(--inset) + env(safe-area-inset-left, 0px));
  /* A fixed box exactly the visible height (--vh: measured in px by
     viewport.js, 100dvh before it runs). The body scrolls itself only if its
     content overflows, i.e. below --card-floor on 320px-wide phones; iOS does
     not rubber-band a box that has nothing to scroll. */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--vh);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: none;
  display: flex;
  background: var(--ink);
  color: var(--paper);
  font-family: "Diatype", sans-serif;
}

img { display: block; max-width: 100%; }

/* ---------------------------------------------------------------- frame --- */
/* The container. An element cannot query itself, so the card needs this
   wrapper for its contents to resolve cqw against. */

.frame {
  container-type: inline-size;
  flex: 0 0 auto;
  /* Whichever dimension binds, but never below the floor (unless the viewport
     itself is narrower). 100% is the body's content width, i.e. already net of
     the insets and the left/right safe areas. */
  width: max(
    min(100%, var(--avail-h) * var(--ratio)),
    min(100%, var(--card-floor))
  );
  /* Auto margins centre it on both axes, and collapse to 0 rather than
     pushing the top out of reach when the floor makes it taller than the
     viewport (align-items: center would clip it). */
  margin: auto;
}

/* Layout only: no background, no radius. The black is the page's. */
.card {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ratio);
}

/* The positioning context for every element: exactly the card. */
.stage {
  position: absolute;
  inset: 0;
}

/* ------------------------------------------------------------- elements --- */

.logo {
  position: absolute;
  left: var(--logo-left);
  top: var(--logo-top);
  width: var(--logo-w);
  height: auto;
  aspect-ratio: 566.84 / 112.12;
}

.sticker { position: absolute; height: auto; }

.sticker--foundry {
  left: var(--foundry-left);
  top: var(--foundry-top);
  width: var(--foundry-w);
  aspect-ratio: 1 / 1;
}

.sticker--qareeban {
  left: var(--qareeban-left);
  top: var(--qareeban-top);
  width: var(--qareeban-w);
  aspect-ratio: 152.39 / 118.25;
}

/* ----------------------------------------------------------------- type --- */
/* `top` is the first line box's top edge, derived in spec.json from the
   artboard baseline minus (half-leading + ascent). Both faces have a content
   area taller than their leading, so the half-leading is negative — that is
   the artboard's own setting, not an error. */

.headline,
.tagline {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
}

.headline {
  top: var(--h1-top);
  bottom: var(--h1-bottom);
  translate: var(--h1-dx) var(--h1-dy);
  font-family: "Maktoob Naskh", serif;
  font-weight: 900;
  font-size: var(--h1-size);
  line-height: var(--h1-lh);
  /* The foundry's lam-khah ligature in "الخطوط" is a discretionary ligature;
     without it the word sets ~5% wider than the artboard. */
  font-variant-ligatures: common-ligatures discretionary-ligatures contextual;
}

.tagline {
  top: var(--p-top);
  bottom: var(--p-bottom);
  translate: var(--p-dx) var(--p-dy);
  font-size: var(--p-size);
  line-height: var(--p-lh);
}

/* The artboard's line breaks, set explicitly rather than left to the wrapping
   algorithm — which differs between Chromium and WebKit at the margins.
   `.ln` always breaks; `.ln--m` breaks on mobile and joins on desktop. */
.ln,
.ln--m { display: block; }

@media (min-width: 701px), (orientation: landscape) {
  .ln--m { display: inline; }
}

/* --------------------------------------------------------------- social --- */

.social {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--icons-top);
  bottom: var(--icons-bottom);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--icon-gap);
}

.social__link {
  display: block;
  border-radius: 8px;
  outline: 2px solid transparent;
  outline-offset: 6px;
}

.social__link:focus-visible { outline-color: var(--accent); }

.icon { height: auto; }
.icon--ig { width: var(--ig-w); aspect-ratio: 1 / 1; }
.icon--mail { width: var(--mail-w); aspect-ratio: 39.59 / 32; }

/* ------------------------------- mobile artboard (<=700px, portrait) -------
   card 400 x 820. A landscape viewport uses the desktop artboard even when it
   is narrow: a phone on its side would otherwise get the tall portrait card at
   roughly 160px wide. The two conditions are exact complements of the desktop
   rule above, so every viewport gets exactly one artboard. */

@media (max-width: 700px) and (orientation: portrait) {
  :root {
    --ratio: 400 / 820;

    --logo-left: 14.5728cqw;
    --logo-top: 19.9227cqw;
    --logo-w: 70.8545cqw;

    --foundry-left: 7.2095cqw;
    --foundry-top: 37.2095cqw;
    --foundry-w: 31.4560cqw;

    --qareeban-left: 63.6250cqw;
    --qareeban-top: 56.2500cqw;
    --qareeban-w: 28.5000cqw;

    --h1-size: 10cqw;
    --h1-lh: 14.5cqw;
    --h1-top: 89.4597cqw;
    --h1-bottom: auto;
    --h1-dx: 0.5313cqw;
    --h1-dy: -0.3750cqw;

    --p-size: 5cqw;
    --p-lh: 6cqw;
    --p-top: 153.0340cqw;
    --p-bottom: auto;
    --p-dx: 0.7500cqw;
    --p-dy: -0.1875cqw;

    --ig-w: 8.0003cqw;
    --mail-w: 9.8980cqw;
    --icon-gap: 6.4319cqw;
    --icons-top: 176.5598cqw;
    --icons-bottom: auto;
  }

}

/* ---------------------------------------------------------- preferences --- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}