/* Stick Tap Hockey site styles. Brand: violet #6C2BD9 on ink #18122b (logo option C "Motion", owner 2026-11-06).
   Kept in its own file so later pages (a /blog section, owner 2026-11-07) reuse the same look. */
:root {
  --violet: #6C2BD9;
  --ink: #18122b;
  --white: #ffffff;
  --lavender: #d9cff7; /* tagline (Claude's suggestion, blended from the two brand colours) */
  --lilac: #b9a3f0;    /* HOCKEY, small labels */
  --dim: #8a7fb0;      /* footer */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  background: var(--ink);
  color: var(--white);
  font-family: var(--font);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--white); text-decoration: none; border-bottom: 2px solid var(--violet); }
a:hover, a:focus-visible { color: var(--lilac); }
a:focus-visible { outline: 2px solid var(--lilac); outline-offset: 4px; border-radius: 2px; }

/* Logo: violet tile with the white mark, name beside it */
.brand { display: flex; align-items: center; gap: clamp(14px, 1.7vw, 24px); }
.brand-tile {
  width: clamp(64px, 7.2vw, 104px); height: clamp(64px, 7.2vw, 104px);
  border-radius: 23%; background: var(--violet);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.brand-tile svg { width: 75%; height: 75%; color: var(--white); }
.brand-name { text-align: left; line-height: 1.05; }
.brand-name .top { display: block; font-size: clamp(24px, 2.9vw, 42px); font-weight: 600; letter-spacing: .1em; }
.brand-name .bottom { display: block; font-size: clamp(15px, 1.8vw, 26px); font-weight: 600; letter-spacing: .42em; color: var(--lilac); }

/* Coming Soon page */
.soon {
  min-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 48px 16px 88px; position: relative;
}
.soon .brand { margin-bottom: clamp(32px, 3.9vw, 56px); }
.soon h1 { margin: 0 0 clamp(10px, 1.4vw, 20px); font-size: clamp(40px, 5.8vw, 84px); font-weight: 600; line-height: 1.1; }
.soon .tagline { margin: 0; max-width: 720px; font-size: clamp(17px, 1.95vw, 28px); color: var(--lavender); }
.soon .rule { width: clamp(40px, 5.5vw, 80px); height: clamp(4px, .42vw, 6px); border-radius: 3px; background: var(--violet); margin: clamp(22px, 3vw, 44px) 0; }
.soon .contact { margin: 0; font-size: clamp(14px, 1.5vw, 22px); color: var(--lilac); }
.soon footer { position: absolute; bottom: 24px; left: 0; right: 0; font-size: clamp(12px, 1.1vw, 16px); color: var(--dim); }

/* Phone: logo stacks above the name, contact email on its own line */
@media (max-width: 600px) {
  .soon .brand { flex-direction: column; gap: 10px; }
  .soon .brand-name { text-align: center; }
  .soon .contact a { display: inline-block; margin-top: 4px; }
  .soon .contact .q { display: block; }
}