/* s’gpor holding page. Colours, type and logo rules are Mike's brand sheet (brand/brand.json, brand/BRAND_SHEET_from_Mike_2026-10-23.webp).
   Brand rules kept here: the wordmark is only ever cream on near-black, never stretched, recoloured, glowing, animated or on a busy
   background, and the lockup keeps clear space equal to the height of the apostrophe (about 0.28 of the wordmark's size) around it.
   Fonts are hosted on our own server (fonts/), never fetched from Google. */
@font-face { font-family: "Archivo"; src: url("fonts/archivo-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("fonts/literata-latin-wght-normal.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("fonts/literata-latin-wght-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
:root {
  --ink: #0B0B0C; --char: #1C1C1E; --cream: #F2E9D6; --rust: #7A2B20; --rust-hi: #9B3A2B; --mute: #8A8478;
  --line: rgba(242, 233, 214, 0.16);
  --mark: clamp(72px, 17vw, 168px);
  --gutter: clamp(24px, 7vw, 96px);
  --display: "Archivo", "Trade Gothic Next", "Franklin Gothic Medium", "Helvetica Neue", Arial, sans-serif;
  --body: "Literata", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
}
* { box-sizing: border-box; }
html { color-scheme: dark; background: var(--ink); }
body { margin: 0; background: var(--ink); color: var(--cream); font-family: var(--body); font-size: 18px; line-height: 1.6; }
.page { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: 1fr auto; }
main { align-self: center; width: 100%; max-width: calc(760px + 2 * var(--gutter)); margin: 0 auto; padding: calc(var(--gutter) * 0.7) var(--gutter); }

.lockup { margin: 0 0 calc(var(--mark) * 0.28); }
.mark {
  margin: 0; padding: 0.12em 0.1em 0 0; font-family: var(--display); font-weight: 800; font-size: var(--mark);
  line-height: 0.9; letter-spacing: -0.04em;
}
.tag { /* the lockup line: label style, very wide tracking, as on the brand sheet */
  margin: 14px 0 0; font-family: var(--display); font-weight: 500; font-size: clamp(11px, 1.45vw, 14px);
  letter-spacing: 0.3em; text-transform: uppercase; line-height: 1.9;
}
.status { /* label style from the sheet: display face medium, +140 tracking, on the brand's rust */
  display: inline-block; margin: 0 0 26px; padding: 9px 18px; background: var(--rust); color: var(--cream);
  font-family: var(--display); font-weight: 500; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
}
.lead {
  margin: 0 0 14px; padding-left: 22px; border-left: 3px solid var(--rust-hi); font-style: italic; font-weight: 400;
  font-size: clamp(25px, 3.6vw, 38px); line-height: 1.22; max-width: 24ch; text-wrap: balance;
}
.small { margin: 0; padding-left: 25px; color: var(--mute); font-size: 16px; }

footer { background: var(--char); border-top: 1px solid var(--line); padding: 24px var(--gutter); }
.contact { margin: 0 auto; max-width: 760px; color: var(--cream); font-size: 15px; line-height: 1.7; }
a { color: var(--cream); text-decoration-color: var(--rust-hi); text-decoration-thickness: 2px; text-underline-offset: 4px; }
a:hover { text-decoration-color: var(--cream); }
:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* A gentle rise-in for everything EXCEPT the wordmark and its lockup, which never move. */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.tag, .status, .lead, .small, footer { animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.tag { animation-delay: 0.05s; } .status { animation-delay: 0.15s; } .lead { animation-delay: 0.25s; } .small { animation-delay: 0.35s; } footer { animation-delay: 0.45s; }

@media (max-width: 520px) { body { font-size: 17px; } .tag { letter-spacing: 0.22em; } .lead { padding-left: 18px; } .small { padding-left: 21px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }