/*
 * Shared stylesheet for the long-form pages (data sovereignty, how this site is
 * built, club data inventory, supplier questions).
 *
 * Every asset path here is root-relative. These pages are served from their own
 * directories, so a relative path would resolve against that directory and miss
 * the fonts entirely.
 */
@font-face { font-family: 'Orbitron'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('/assets/fonts/orbitron-variable-latin.woff2?v=c25a9f9d') format('woff2'); }
@font-face { font-family: 'Quantico'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/quantico-400-latin.woff2?v=93e051a8') format('woff2'); }
@font-face { font-family: 'Quantico'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/quantico-700-latin.woff2?v=87c8dc99') format('woff2'); }

:root {
  --s2-bg-stealth: #0F1012;
  --s2-bg-chassis: #1C1E21;
  --s2-glow-gold: #FFD700;
  --s2-glow-orange: #E28714;
  --s2-text-pure: #FFFFFF;
  --s2-text-secondary: rgba(255, 255, 255, 0.64);
  --s2-divider: rgba(255, 215, 0, 0.15);
  --s2-tracking-wide: 0.18em;
  --s2-tracking-mega: 0.32em;
  --s2-font-body: "Quantico", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --s2-font-display: "Orbitron", "Quantico", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--s2-bg-stealth);
  background-image:
    radial-gradient(ellipse 900px 520px at 50% 0%, rgba(255, 215, 0, 0.07), transparent 70%),
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 100% 100%, 64px 64px, 64px 64px;
  color: var(--s2-text-pure);
  font-family: var(--s2-font-body);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 24px; }
a { color: var(--s2-glow-gold); }
:focus-visible { outline: 2px solid var(--s2-glow-gold); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; top: 0; background: var(--s2-glow-gold); color: var(--s2-bg-stealth); padding: 10px 16px; font-family: var(--s2-font-display); font-size: 12px; text-transform: uppercase; letter-spacing: var(--s2-tracking-wide); z-index: 10; }
.skip:focus { left: 12px; top: 12px; }

header { padding: 64px 0 40px; text-align: center; }
.logo-lockup { display: inline-flex; align-items: center; gap: 18px; text-decoration: none; }
.mark { display: block; width: 72px; height: auto; filter: drop-shadow(0 0 26px rgba(255, 215, 0, 0.22)); }
.divider { width: 2px; height: 44px; background: linear-gradient(to bottom, rgba(255,215,0,0), var(--s2-glow-gold), rgba(255,215,0,0)); opacity: 0.7; }
/* The wordmark is white, per the WEB HEADER LOCKUP panel of the production board.
   It sits inside the <a> that wraps the lockup, and links are gold, so without a
   colour of its own it inherited gold and the header shipped off-brand on every
   page. The tagline below has always set its own colour; this never did. */
.wordmark { text-align: left; color: var(--s2-text-pure); font-family: var(--s2-font-display); font-weight: 700; font-size: clamp(15px, 3.4vw, 22px); line-height: 1.1; text-transform: uppercase; letter-spacing: var(--s2-tracking-wide); }


h1 { margin: 26px 0 0; font-family: var(--s2-font-display); font-weight: 700; font-size: clamp(24px, 5.2vw, 40px); line-height: 1.15; text-transform: uppercase; letter-spacing: var(--s2-tracking-wide); }
.standfirst { margin: 22px auto 0; max-width: 640px; font-size: clamp(17px, 2.2vw, 20px); color: rgba(255,255,255,0.86); }
.rule { width: 168px; height: 2px; margin: 34px auto 0; border: 0; background: linear-gradient(90deg, rgba(255,215,0,0), var(--s2-glow-gold), rgba(255,215,0,0)); opacity: 0.75; }

main { padding: 48px 0 64px; }
main h2 { margin: 46px 0 14px; font-family: var(--s2-font-display); font-weight: 700; font-size: clamp(15px, 2.6vw, 19px); line-height: 1.3; text-transform: uppercase; letter-spacing: 0.1em; }
main h3 { margin: 30px 0 10px; font-family: var(--s2-font-display); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: var(--s2-tracking-mega); color: var(--s2-glow-orange); }
main p { margin: 0 0 20px; color: rgba(255,255,255,0.86); }
main ul { margin: 0 0 22px; padding-left: 22px; color: rgba(255,255,255,0.86); }
main li { margin-bottom: 10px; }
main li strong { color: var(--s2-text-pure); }

.callout { background-color: var(--s2-bg-chassis); border: 1px solid rgba(255,255,255,0.06); border-left: 2px solid var(--s2-glow-gold); padding: 24px 26px; margin: 30px 0; }
.callout p { margin: 0; color: var(--s2-text-secondary); font-size: 16px; }

.checklist { background-color: var(--s2-bg-chassis); border: 1px solid rgba(255,255,255,0.06); padding: 28px 26px; margin: 26px 0; }
.checklist ol { margin: 0; padding-left: 20px; }
.checklist li { margin-bottom: 14px; color: rgba(255,255,255,0.86); }
.checklist li:last-child { margin-bottom: 0; }

.cta-row { margin: 44px 0 0; text-align: center; }
.cta { display: inline-block; padding: 14px 28px; background: transparent; color: var(--s2-glow-gold); border: 1px solid var(--s2-glow-gold); font-family: var(--s2-font-display); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--s2-tracking-wide); text-decoration: none; clip-path: polygon(0 0, 90% 0, 100% 30%, 100% 100%, 10% 100%, 0 70%); transition: all 0.25s cubic-bezier(0.16,1,0.3,1); }
.cta:hover, .cta:focus-visible { background-color: var(--s2-glow-gold); color: var(--s2-bg-stealth); box-shadow: 0 0 15px var(--s2-glow-gold); }

/* Lead paragraph. Used by the about, inventory and supplier-questions pages;
   previously defined only inside the about page, so the other two rendered
   their lead paragraph as ordinary body text. */
main p.lead { font-size: clamp(17px, 2.2vw, 20px); line-height: 1.7; }

/* Tagline under the wordmark in the header lockup (about page). */
.tagline {
  display: block;
  margin-top: 8px;
  color: var(--s2-glow-orange);
  font-weight: 500;
  font-size: clamp(8px, 1.4vw, 10px);
  text-transform: uppercase;
  letter-spacing: var(--s2-tracking-mega);
  text-shadow: 0 0 8px rgba(226, 135, 20, 0.3);
}

/* Boxed detail block, used for the registered company details. */
.detail {
  background-color: var(--s2-bg-chassis);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 26px 24px;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--s2-text-secondary);
}
.detail address { font-style: normal; }
.detail strong { color: var(--s2-text-pure); font-weight: 700; }


/* Contact form. Only used by /contact/, but it belongs with the long-form styles
   rather than in a sheet of its own for one page. */
.form-row { display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; }
.form-row label { font-family: var(--s2-font-display); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: var(--s2-tracking-mega); color: var(--s2-text-secondary); }
.form-row .optional { text-transform: none; letter-spacing: 0; opacity: 0.7; }
.form-row input, .form-row textarea {
  font-family: var(--s2-font-body); font-size: 16px; line-height: 1.6; color: var(--s2-text-pure);
  background: var(--s2-bg-chassis); border: 1px solid rgba(255,255,255,0.14);
  padding: 12px 14px; width: 100%; box-sizing: border-box;
}
.form-row textarea { min-height: 170px; resize: vertical; }
.form-row input:focus, .form-row textarea:focus { outline: 2px solid var(--s2-glow-gold); outline-offset: 1px; border-color: var(--s2-glow-gold); }
.form-row .field-error { color: #ff9d8a; font-size: 13px; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
button.cta { font-family: var(--s2-font-display); cursor: pointer; }
.form-status { margin: 22px 0 0; padding: 16px 18px; border-left: 2px solid var(--s2-glow-gold); background: var(--s2-bg-chassis); }
.form-status[hidden] { display: none; }
.form-status.bad { border-left-color: #ff9d8a; }
.notice { margin: 26px 0 0; font-size: 14px; color: var(--s2-text-secondary); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }