/* kham.uk holding page: a recreation of brand book page 1 (the cover).
   The photo files already carry the cover's Carbon Black Multiply layer at 84%. */
@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/space-grotesk-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --carbon: #262524;
  --blue: #1AA0E2;
  --linen: #EFEEE8;
  /* Lockup width. The cover sets it at 969 of 2667 pt wide (36.35%), which is 64.62% of the
     page height. Scaling with the photo keeps that relationship at any aspect ratio; phones
     crop the photo instead of shrinking the lockup, which never goes below the 202px minimum. */
  --w: clamp(202px, max(36.35vw, 64.62vh), 80vw);
  /* Vertical centre of the lockup on the cover: 723.4 of 1500 pt. */
  --y: 48.23%;
}

@supports (height: 1svh) {
  :root { --w: clamp(202px, max(36.35vw, 64.62svh), 80vw); }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--carbon);
  color: var(--linen);
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 400;
  -webkit-tap-highlight-color: transparent;
}

.cover {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  /* Room for the lockup and text on short landscape phones. */
  min-height: max(100svh, calc(var(--w) * 0.238 + 17rem));
  overflow: hidden;
}

.photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lockup {
  position: absolute;
  top: var(--y);
  left: 50%;
  width: var(--w);
  margin: 0;
  line-height: 0;
  transform: translate(-50%, -50%);
}

.lockup img {
  display: block;
  width: 100%;
  height: auto;
}

.details {
  position: absolute;
  /* Below the lockup: its half-height is 0.119 of its width (230.68 / 969.31 / 2). */
  top: calc(var(--y) + var(--w) * 0.119 + clamp(1.75rem, 4vh, 3rem));
  left: 0;
  right: 0;
  padding: 0 1rem;
  text-align: center;
  font-size: clamp(0.9375rem, 0.875rem + 0.25vw, 1.0625rem);
  line-height: 1.5;
}

.details p { margin: 0 0 0.45em; }

a {
  color: var(--linen);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

a:hover { color: var(--blue); }

a:focus { outline: none; }

a:focus-visible {
  outline: 2px solid var(--linen);
  outline-offset: 4px;
  border-radius: 2px;
}