/* Summer Tennis — shared tokens */
:root {
  --navy: oklch(0.22 0.07 260);
  --navy-2: oklch(0.30 0.08 260);
  --navy-deep: oklch(0.15 0.06 260);
  --orange: oklch(0.74 0.18 50);
  --orange-2: oklch(0.82 0.16 65);
  --cream: oklch(0.97 0.02 80);
  --cream-2: oklch(0.94 0.03 80);
  --sand: oklch(0.90 0.04 75);
  --ink: oklch(0.18 0.04 260);
  --ink-soft: oklch(0.35 0.03 260);
  --line: oklch(0.85 0.02 260 / 0.5);
  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Bricolage Grotesque", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --display: "Boldonse", "Bricolage Grotesque", sans-serif;
}

* { box-sizing: border-box; }

.st-root { font-family: var(--sans); color: var(--ink); }
.st-root *::selection { background: var(--orange); color: var(--navy); }

/* Placeholder image — striped, monospace caption */
.ph {
  position: relative;
  overflow: hidden;
  background:
    repeating-linear-gradient(
      45deg,
      oklch(0.88 0.03 75) 0 12px,
      oklch(0.92 0.025 75) 12px 24px
    );
  display: grid;
  place-items: center;
  color: oklch(0.40 0.04 260);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ph.dark {
  background:
    repeating-linear-gradient(
      45deg,
      oklch(0.22 0.06 260) 0 12px,
      oklch(0.26 0.06 260) 12px 24px
    );
  color: oklch(0.80 0.04 75);
}
.ph.orange {
  background:
    repeating-linear-gradient(
      45deg,
      oklch(0.74 0.16 50) 0 12px,
      oklch(0.78 0.15 55) 12px 24px
    );
  color: oklch(0.20 0.07 260);
}
.ph .ph-tag {
  background: rgba(255,255,255,0.85);
  padding: 6px 10px;
  border-radius: 3px;
  border: 1px solid var(--line);
}
.ph.dark .ph-tag, .ph.orange .ph-tag { background: rgba(0,0,0,0.35); border-color: rgba(255,255,255,0.15); color: var(--cream); }

/* Marquee — static (animation disabled, content scroll horizontally inside fixed container) */
.marquee {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}
.marquee-track {
  display: inline-flex;
  gap: 48px;
  padding-right: 48px;
  animation: marquee-x 40s linear infinite;
}
@keyframes marquee-x {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Pulse for live dot */
@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 oklch(0.74 0.18 50 / 0.7); }
  70%  { box-shadow: 0 0 0 12px oklch(0.74 0.18 50 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(0.74 0.18 50 / 0); }
}
.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange);
  animation: pulse-dot 1.8s infinite;
}

/* Float */
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* Spin */
@keyframes spin-slow { to { transform: rotate(360deg); } }

/* Tick reveal */
@keyframes tick-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Underline draw */
@keyframes draw-line {
  from { stroke-dashoffset: 600; }
  to   { stroke-dashoffset: 0; }
}

/* Soft fade */
@keyframes soft-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Page layout */
html, body { margin: 0; padding: 0; background: oklch(0.16 0.04 260); font-family: "Bricolage Grotesque", system-ui, sans-serif; overflow-x: hidden; width: 100%; }
body { color: oklch(0.95 0.02 75); }
.device-desktop, .device-mobile { display: none; width: 100%; overflow-x: hidden; }
.device-mobile .st-root { margin: 0 auto; }
@media (min-width: 769px) { .device-desktop { display: block; } }
@media (max-width: 768px) { .device-mobile { display: block; } }
.js-tr-body[hidden] { display: none !important; }