/* ==========================================================================
   Motolink Kenya - foundation

   Built phone-first for a mid-range Android on mobile data, held in one hand.

   ── Type ─────────────────────────────────────────────────────────────────
   Three tiers in three families. This is what gives hierarchy; one family at
   one weight, scaled up and down, is a template.

     Anton          h1 and h2 only. Placard and poster lettering - heavy,
                    condensed, drawn for signage read across a street.
     IBM Plex Sans  Body, h3–h5, buttons. An engineering typeface from IBM's
                    documentation work, so its forms come from technical
                    drawing rather than from UI convention.
     IBM Plex Mono  Labels and identifiers. Monospace because references,
                    plate numbers and prices are compared character by
                    character, and because a spaced mono label reads as a field
                    name on a drawing rather than as a marketing kicker.

   ── Colour ───────────────────────────────────────────────────────────────
   Never decorative. Chrome is neutral ink; colour is reserved for state and
   for action. Tokens are named for their meaning, not their hue.

   ── Form ─────────────────────────────────────────────────────────────────
   Light only, by decision. Corners are square. Depth comes from hairline
   rules, not from shadow - a card that floats is a card that was generated.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     Typefaces
     ------------------------------------------------------------------------ */

  --font-display: "Anton", "Arial Narrow", "Helvetica Neue", sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Courier New", monospace;

  /* ------------------------------------------------------------------------
     Surface and ink
     ------------------------------------------------------------------------ */

  --paper: #faf8f5;
  --surface: #ffffff;
  --surface-sunken: #f1eee9;

  --ink-900: #14171a;
  --ink-700: #383e45;
  --ink-500: #646c75;
  --ink-400: #8a929b;
  --ink-300: #b6bbc1;
  --ink-200: #dcd9d3;
  --ink-100: #ece9e4;

  /* ------------------------------------------------------------------------
     Action - one colour, only on the thing you want pressed
     ------------------------------------------------------------------------ */

  --action: #b23c17;
  --action-hover: #94300f;
  --action-soft: #fdeee7;
  --action-ink: #ffffff;

  /* ------------------------------------------------------------------------
     State
     ------------------------------------------------------------------------ */

  --ok: #1f6b4d;
  --ok-soft: #e3f2ea;

  --warn: #8a5a06;
  --warn-soft: #fbf0d9;

  --danger: #a32c2c;
  --danger-soft: #fbe9e9;

  --info: #2f5c7a;
  --info-soft: #eaf1f6;

  --focus: #1d5f8a;

  /* ------------------------------------------------------------------------
     Geometry - square. Rounded corners on everything is the single most
     recognisable signature of a generated interface.
     ------------------------------------------------------------------------ */

  --r-xs: 0;
  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 4px;

  /* ------------------------------------------------------------------------
     Spacing
     ------------------------------------------------------------------------ */

  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.75rem;
  --s-7: 2.5rem;
  --s-8: 3.5rem;

  /* ------------------------------------------------------------------------
     Layout
     ------------------------------------------------------------------------ */

  --page-max: 1160px;
  --gutter: 1rem;
  --header-h: 56px;

  /* Minimum comfortable touch target. */
  --tap: 44px;

  /* Notches and home indicators. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* Hairline rules. Thinner than a border, which is what makes a layout read
     as printed rather than as a stack of boxes. */
  --rule: 1px solid var(--ink-200);
  --rule-strong: 2px solid var(--ink-900);
}

@media (min-width: 700px) {
  :root {
    --gutter: 1.5rem;
    --header-h: 62px;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4rem;
  }
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s-4));
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--font-body);
  /* 16px minimum. Below this iOS Safari zooms the page when a field is
     focused, which throws the layout around mid-form. */
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink-900);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overscroll-behavior-y: none;
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  -webkit-tap-highlight-color: transparent;
}

a {
  color: var(--ink-900);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--ink-300);
  -webkit-tap-highlight-color: transparent;
}

a:hover {
  text-decoration-color: var(--action);
  color: var(--action);
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

::selection {
  background: var(--action-soft);
  color: var(--ink-900);
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5 {
  color: var(--ink-900);
  text-wrap: balance;
}

/* Tier 1 - placard. Anton, single weight, tight. Display only. */
h1,
h2 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: 0.002em;
  /* Anton sits high on its body; a touch of optical trimming evens it out. */
  margin-top: -0.06em;
}

h1 {
  font-size: clamp(1.95rem, 7.4vw, 3.4rem);
}

h2 {
  font-size: clamp(1.4rem, 4.8vw, 2.05rem);
  line-height: 1.04;
}

/* Tier 2 - structure. Plex Sans, semibold. */
h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.35;
  letter-spacing: -0.005em;
}

h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.4;
}

h5 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.4;
}

/* Tier 3 - labels. Mono, spaced, uppercase. Reads as a field name on a
   technical drawing rather than as a marketing kicker. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.lede {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-700);
  max-width: 58ch;
}

@media (min-width: 700px) {
  .lede { font-size: 1.0625rem; }
}

/* Numbers in columns must not jitter. */
.num,
.card-price,
td.num,
.price,
.stat-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.02em;
}

/* Identifiers: read character by character. */
.mono,
code,
kbd {
  font-family: var(--font-mono);
  font-size: 0.875em;
  letter-spacing: -0.01em;
}

code {
  background: var(--surface-sunken);
  padding: 0.1em 0.35em;
  word-break: break-word;
}

/* A figure that is the point of its block. */
.stat-value {
  font-size: clamp(1.5rem, 6vw, 2rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--ink-900);
}

.muted { color: var(--ink-500); }
.small { font-size: 0.875rem; }
.tiny  { font-size: 0.75rem; }

/* A section label that sits on a rule, like a heading in a catalogue. */
.section-label {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.page {
  flex: 1;
  padding-block: var(--s-5);
}

@media (min-width: 700px) {
  .page { padding-block: var(--s-6); }
}

.section {
  padding-block: var(--s-5);
}

@media (min-width: 700px) {
  .section { padding-block: var(--s-6); }
}

/* A heading on a rule. Replaces the bordered box that used to wrap sections. */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-2);
  border-bottom: var(--rule-strong);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.stack-sm { gap: var(--s-2); }
.stack-lg { gap: var(--s-5); }

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}

.row-between {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

/* Single column on phones, always. Multi-column only once there is room. */
.grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.split {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    align-items: start;
  }
}

/* Asymmetric editorial pair: one wide column, one narrow. Used instead of a
   row of three equal boxes, which is the generated-layout default. */
.editorial {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}

@media (min-width: 820px) {
  .editorial {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: var(--s-7);
  }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
  .site-header, .site-footer, .no-print { display: none !important; }
  body { background: #fff; color: #000; }
}