/* ══════════════════════════════════════════════════════════════════════════
   Mediam — landing page
   Built from the Modernist design system. The :root block below is the
   system's token sheet, copied verbatim so future pages match; everything
   after it is this page's styles, ported from the authored design source
   (design-handoff/Mediam Landing v3 (index).dc.html).

   House rules from the design system: zero corner radius anywhere, no
   shadows, no gradients, no centred text, everything flush left, 2px rules
   doing the organising. No media queries — the page is fluid via clamp().
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #ec3013;
  --color-accent-2: #e15b47;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff2ef;
  --color-accent-200: #ffe0d9;
  --color-accent-300: #ffc4b8;
  --color-accent-400: #ff9783;
  --color-accent-500: #ff563c;
  --color-accent-600: #dd2b0f;
  --color-accent-700: #ae1800;
  --color-accent-800: #7c1405;
  --color-accent-900: #4d170e;

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: "Archivo", system-ui, sans-serif;

  --space-1: 4.0px;
  --space-2: 8.0px;
  --space-3: 12.0px;
  --space-4: 16.0px;
  --space-6: 24.0px;
  --space-8: 32.0px;

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  /* The shared horizontal inset used by every section on the page. */
  --page-inset: clamp(20px, 5vw, 72px);
}

/* ── Base ──────────────────────────────────────────────────────────────── */

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  text-wrap: pretty;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-accent); }
a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Footer stays welded to the bottom on short viewports, so the red field
   always reaches the end of the page. */
.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
}

/* Small uppercase label, used in the nav and above the product index. */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-700);
}

/* ── Nav ───────────────────────────────────────────────────────────────── */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px var(--page-inset);
  border-bottom: 2px solid var(--color-divider);
}

.wordmark {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

/* ── Hero ──────────────────────────────────────────────────────────────── */

.hero {
  padding: clamp(56px, 9vw, 112px) var(--page-inset) clamp(44px, 6vw, 80px);
}

.hero__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(38px, 6.4vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--color-text);
  max-width: 22ch;
}

/* Reserved, empty. See the note in index.html. */
.hero__strapline-slot,
.hero__strapline {
  height: 26px;
  margin: 20px 0 0;
  font-size: 17px;
  line-height: 26px;
}

.hero__body {
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.65;
  margin: 10px 0 0;
  max-width: 56ch;
  color: var(--color-text);
}

/* ── Product index ─────────────────────────────────────────────────────── */

.products {
  padding: 0 var(--page-inset) clamp(56px, 8vw, 96px);
}

.products__label {
  margin: 0 0 16px;
}

.products__list { display: grid; }

/* The whole row is the click target.

   Row structure is load-bearing and was iterated on to survive narrow
   widths: the name and URL share the first line with the URL pushed right
   by margin-left:auto, and the blurb is forced onto its own line by
   flex:1 1 100%. On narrow screens the URL wraps below the name and stays
   right-aligned. A single wrapping line or a rigid two-column grid both
   break on the longest row ("Cheap Auto Rentals"). Do not simplify this. */
.product {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 6px 28px;
  align-items: baseline;
  padding: clamp(20px, 2.6vw, 30px) 0;
  border-top: 2px solid var(--color-divider);
  color: var(--color-text);
}

.product:last-child { border-bottom: 2px solid var(--color-divider); }

.product:hover { background: var(--color-accent-100); }

.product__index {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 15px;
  color: var(--color-accent-700);
}

.product__detail {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 28px;
}

.product__name {
  order: 1;
  flex: 1 1 200px;
  min-width: 0;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 27px);
  letter-spacing: -0.015em;
}

.product__url {
  order: 2;
  flex: 0 0 auto;
  margin-left: auto;
  white-space: nowrap;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-700);
}

.product__blurb {
  order: 3;
  flex: 1 1 100%;
  min-width: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-neutral-700);
}

/* ── Footer — the red field ────────────────────────────────────────────── */

.footer {
  margin-top: auto;
  background: var(--color-accent);
  padding: clamp(40px, 5.5vw, 64px) var(--page-inset) clamp(36px, 5vw, 56px);
  display: flex;
  flex-wrap: wrap;
  gap: 28px 48px;
  align-items: flex-end;
  justify-content: space-between;
}

.footer__statement {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(26px, 3.6vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-bg);
}

/* Contrast — do not shrink this. Pure white on #ec3013 measures roughly
   3.8:1, which passes WCAG AA only as large text (>=18.66px bold). Hence
   19px minimum at weight 700. If a future edit reduces the size or weight
   it fails accessibility: move the address off the red onto the light
   ground in --color-neutral-700 instead. The same rule kills any small
   text on this footer — #ec3013 cannot reach 4.5:1 against any foreground,
   so fine print never goes on the red.

   Keep the authored <br> lines short too: each must stay under the
   max-width so no further wrap is possible. The longest, "New Malden,
   Surrey, KT3 4NE", is ~27ch against a 30ch cap. Break copy at commas
   rather than raising the cap. */
.footer__address {
  margin: 0;
  font-style: normal;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(19px, 1.9vw, 22px);
  line-height: 1.45;
  color: #ffffff;
  max-width: 30ch;
  text-wrap: balance;
}

/* ── Retirement page (gone.html) ───────────────────────────────────────── */

/* Underline is a 2px rule, in keeping with the system — no radius, no
   text-decoration flourishes. */
.gone__back {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-accent-700);
  border-bottom: 2px solid var(--color-accent-700);
}

.gone__back:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}