/* ============================================================================
   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. Nothing is sized or positioned from the viewport height: a phone's
   visible height moves with its toolbars, so branching on it reshapes the page
   on real hardware while looking correct in desktop emulation.
   ========================================================================== */

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

@font-face {
  font-family: "Diatype";
  src: url("fonts/diatype-regular.40f1636a20.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;

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

body {
  margin: 0;
  /* viewport-fit=cover is set in the <meta>, so the safe-area insets are live.
     Without the bottom inset the card runs under Safari's toolbar. */
  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));
  background: var(--paper);
  color: var(--paper);
  font-family: "Diatype", sans-serif;
  overflow-x: hidden;
}

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;
  width: 100%;
}

.card {
  position: relative;
  min-height: calc(
    100svh
    - (2 * var(--inset))
    - env(safe-area-inset-top, 0px)
    - env(safe-area-inset-bottom, 0px)
  );
  display: flex;
  flex-direction: column;
  background: var(--ink);
  border-radius: var(--radius);
}

/* The positioning context. On desktop it fills the card; on mobile it holds the
   artboard's aspect ratio (see below). */
.stage {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
}

/* ------------------------------------------------------------- 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) {
  .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) ----
   card 400 x 820. Here the card keeps the artboard's aspect ratio outright, so
   every offset — vertical included — is the artboard value scaled by the card
   width. No flex distribution, no margin-top: auto.

   If that makes the stage taller than the viewport, the card grows and the page
   scrolls. The logo, stickers and type are never compressed to fit. */

@media (max-width: 700px) {
  :root {
    --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;
  }

  .stage {
    flex: 0 0 auto;
    aspect-ratio: 400 / 820;
    /* Centres the stage when the viewport is taller than the artboard's
       proportions; collapses to 0 when it is shorter, and the card grows. */
    margin-block: auto;
  }
}

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

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