/* ============================================================================
   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.

   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:

     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;

  --inset: 20px;
  --radius: 3.4695cqw;

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

@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));
  min-height: var(--vh);
  display: flex;
  background: var(--paper);
  color: var(--paper);
  font-family: "Diatype", sans-serif;
  /* No overflow: hidden. Nothing overflows (the no-scroll gate checks it), and
     below --card-floor the page is meant to scroll. */
}

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

/* ---------------------------------------------------------------- frame --- */
/* The container. An element cannot query itself, so the card's own radius
   needs this wrapper 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;
}

.card {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ratio);
  background: var(--ink);
  border-radius: var(--radius);
}

/* 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;
    --radius: 12.0390cqw;

    --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;
  }
}