/* ============================================================================
   Skye Hebert — Recruit Spotlight · standalone stylesheet
   Ported 1:1 from the Claude Design "Recruit Spotlight" design system
   (tokens: colors / typography / spacing / effects / base). Dark-first
   athletic palette from her Lady Dukes uniform. Blue is an accent, never a
   flood. All values preserved from the source design system.
   ============================================================================ */

@import url("https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap");

:root {
  /* ---- Base palette ---- */
  --sky-ink: #0b0e13;
  --sky-jet: #161a22;
  --sky-jet-raised: #1e2532;
  --sky-jet-inset: #0e121a;

  --sky-royal: #1d4ed8;
  --sky-electric: #3b82f6;
  --sky-navy: #0a1e4d;

  --sky-white: #ffffff;
  --sky-fog: #e5e9f0;
  --sky-steel: #94a3b8;
  --sky-steel-dim: #64748b;

  --sky-line: rgba(229, 233, 240, 0.10);
  --sky-line-strong: rgba(229, 233, 240, 0.18);

  /* ---- Semantic surfaces ---- */
  --surface-page: var(--sky-ink);
  --surface-card: var(--sky-jet);
  --surface-raised: var(--sky-jet-raised);
  --surface-inset: var(--sky-jet-inset);

  /* ---- Semantic text ---- */
  --text-primary: var(--sky-white);
  --text-muted: var(--sky-fog);
  --text-subtle: var(--sky-steel);
  --text-faint: var(--sky-steel-dim);
  --text-on-accent: var(--sky-white);

  /* ---- Semantic accents ---- */
  --accent: var(--sky-royal);
  --accent-bright: var(--sky-electric);
  --accent-deep: var(--sky-navy);

  /* ---- Lines & rings ---- */
  --line: var(--sky-line);
  --line-strong: var(--sky-line-strong);
  --focus-ring: rgba(29, 78, 216, 0.45);

  /* ---- Gradients ---- */
  --gradient-brand: linear-gradient(135deg, #0a1e4d 0%, #1d4ed8 55%, #3b82f6 100%);
  --gradient-line: linear-gradient(90deg, var(--sky-royal), var(--sky-electric));
  --overlay-photo: linear-gradient(to top, rgba(10, 14, 19, 0.92) 0%, rgba(10, 14, 19, 0.35) 45%, rgba(10, 14, 19, 0) 75%);

  /* ---- Fonts ---- */
  --font-display: "Saira Condensed", "Oswald", "Arial Narrow", sans-serif;
  --font-condensed: "Saira Condensed", "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  --display-leading: 0.9;
  --display-tracking: -0.01em;
  --eyebrow-size: 13px;
  --eyebrow-tracking: 0.24em;

  /* ---- Type scale ---- */
  --text-hero: clamp(64px, 11vw, 122px);
  --text-display-1: clamp(40px, 6vw, 68px);
  --text-display-2: clamp(32px, 4.5vw, 52px);
  --text-stat: clamp(44px, 6vw, 64px);
  --text-h3: 24px;
  --text-lg: 18px;
  --text-base: 16px;
  --text-sm: 14px;
  --text-xs: 12px;
  --text-2xs: 9px;
  --leading-body: 1.6;
  --leading-tight: 1.15;

  /* ---- Spacing & radii ---- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --space-12: 96px;
  --space-16: 128px;
  --space-0-5: 4px;
  --space-1-5: 12px;
  --space-2-5: 20px;

  --section-y: clamp(72px, 12vw, 128px);
  --container-max: 1400px;
  --container-pad: clamp(20px, 5vw, 40px);

  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-card: 12px;
  --radius-hero: 16px;
  --radius-chip: 999px;

  /* ---- Effects ---- */
  --shadow-card: 0 12px 34px -16px rgba(0, 0, 0, 0.6);
  --shadow-raised: 0 20px 50px -20px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 0 1px rgba(29, 78, 216, 0.5), 0 16px 44px -16px rgba(29, 78, 216, 0.45);
  --shadow-hero: 0 24px 60px -20px rgba(0, 0, 0, 0.8);

  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 200ms;
  --dur-base: 260ms;
  --dur-slow: 320ms;
}

/* ---- Base reset ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--accent); color: var(--sky-white); }
img { max-width: 100%; }

/* ---- Typographic helpers ---- */
.rs-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--display-leading);
  letter-spacing: var(--display-tracking);
  text-transform: uppercase;
  margin: 0;
}
.rs-condensed { font-family: var(--font-condensed); }
.rs-body { font-family: var(--font-body); }
.rs-eyebrow {
  font-family: var(--font-condensed);
  font-weight: var(--fw-semibold);
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--text-subtle);
}
.rs-tabular { font-variant-numeric: tabular-nums; }

.rs-ghost-numeral {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  color: rgba(59, 130, 246, 0.08);
  line-height: 0.8;
  user-select: none;
  pointer-events: none;
}

/* ---- Restrained background textures ---- */
.rs-bg-grid-dots {
  background-image: radial-gradient(rgba(229, 233, 240, 0.05) 1px, transparent 1.2px);
  background-size: 22px 22px;
}
.rs-bg-grid-lines {
  background-image:
    linear-gradient(to right, rgba(229, 233, 240, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(229, 233, 240, 0.04) 1px, transparent 1px);
  background-size: 80px 80px;
}
.rs-chevron-band {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(59, 130, 246, 0.06) 0px,
    rgba(59, 130, 246, 0.06) 10px,
    transparent 10px,
    transparent 28px
  );
}

/* ---- Button (ported from design-system forms/Button.jsx) ---- */
.rs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  border-radius: var(--radius-chip);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out-quint),
    border-color var(--dur-fast) var(--ease-out-quint),
    color var(--dur-fast) var(--ease-out-quint),
    transform var(--dur-fast) var(--ease-out-quint);
}
.rs-btn--sm { padding: 9px 18px; font-size: 13px; }
.rs-btn--md { padding: 14px 28px; font-size: 14px; }
.rs-btn--lg { padding: 17px 36px; font-size: 16px; }
.rs-btn--full { width: 100%; }
.rs-btn__icon { font-size: 1.1em; line-height: 0; }

.rs-btn--primary {
  background: var(--accent);
  color: var(--text-on-accent);
  box-shadow: 0 12px 34px -14px rgba(29, 78, 216, 0.7);
}
.rs-btn--primary:hover { transform: translateY(-1px); background: var(--accent-bright); }

.rs-btn--secondary {
  background: var(--surface-raised);
  color: var(--text-primary);
  border-color: var(--line-strong);
}
.rs-btn--secondary:hover { transform: translateY(-1px); border-color: var(--accent); color: var(--accent-bright); }

.rs-btn--ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--line-strong);
}
.rs-btn--ghost:hover { transform: translateY(-1px); border-color: var(--accent); color: var(--accent-bright); }

/* ---- Page-specific layout (ported from the .dc.html <style>) ---- */
section[id] { scroll-margin-top: 84px; }
@keyframes skyeBounce { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(8px);} }
.skye-bounce { animation: skyeBounce 1.9s ease-in-out infinite; }
.skye-desktop { display:flex; }
.skye-hamburger { display:none; }
@media (max-width: 880px){ .skye-desktop{ display:none; } .skye-hamburger{ display:inline-flex; } }
.skye-split { display:grid; gap: clamp(28px,4vw,60px); grid-template-columns: minmax(0,400px) minmax(0,1fr); align-items:center; }
@media (max-width: 860px){ .skye-split{ grid-template-columns: 1fr; } }
.skye-formsplit { display:grid; gap: clamp(28px,4vw,60px); grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); align-items:start; }
@media (max-width: 860px){ .skye-formsplit{ grid-template-columns: 1fr; } }
.skye-gallery { display:grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,230px), 1fr)); grid-auto-rows: 200px; gap: 14px; grid-auto-flow: dense; }
.skye-desktop > a { position:relative; }
.skye-desktop > a.skye-navlink::after{ content:''; position:absolute; left:0; right:100%; bottom:-7px; height:1.5px; background:var(--accent-bright); transition:right .32s var(--ease-out-quint); }
.skye-desktop > a.skye-navlink:hover::after{ right:0; }
.skye-line { display:block; will-change:transform; }
@media (prefers-reduced-motion: reduce){ .skye-bounce{ animation:none; } }

/* ---- Video (lite YouTube embed) ---- */
@media (max-width: 860px){ .skye-videosplit{ grid-template-columns:1fr !important; } }
.rs-video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.rs-video-play {
  position:absolute; inset:0; width:100%; padding:0; border:0; cursor:pointer; background:transparent;
}
.rs-video-play img { position:absolute; inset:0; height:100%; width:100%; object-fit:cover; transition:transform .5s var(--ease-out-quint); }
.rs-video-play:hover img { transform:scale(1.03); }
.rs-video-play .rs-video-scrim { position:absolute; inset:0; background:linear-gradient(to top, rgba(11,14,19,.9), rgba(11,14,19,.15) 55%, transparent); }
.rs-video-play .rs-video-btn {
  position:absolute; inset:0; margin:auto; height:72px; width:72px; display:grid; place-items:center;
  border-radius:999px; border:1px solid rgba(255,255,255,.3); background:rgba(11,14,19,.4); backdrop-filter:blur(6px);
  color:var(--sky-white); transition:transform var(--dur-base) var(--ease-out-quint), background var(--dur-base) var(--ease-out-quint), border-color var(--dur-base) var(--ease-out-quint);
}
.rs-video-play:hover .rs-video-btn { transform:scale(1.1); border-color:var(--accent); background:rgba(29,78,216,.35); }
.rs-video-rail-item { display:flex; align-items:stretch; gap:14px; border:1px solid var(--line-strong); border-radius:var(--radius-card); overflow:hidden; text-decoration:none; transition:border-color var(--dur-base) var(--ease-out-quint); }
.rs-video-rail-item:hover { border-color:var(--accent); }
.rs-video-rail-thumb { position:relative; width:140px; flex:none; aspect-ratio:16/9; background:var(--sky-ink); overflow:hidden; }
.rs-video-rail-thumb img { position:absolute; inset:0; height:100%; width:100%; object-fit:cover; transition:transform .5s var(--ease-out-quint); }
.rs-video-rail-item:hover .rs-video-rail-thumb img { transform:scale(1.1); }

/* ---- Tabbed film browser ---- */
.rs-tab {
  font-family:var(--font-condensed); font-weight:var(--fw-semibold); text-transform:uppercase;
  letter-spacing:.14em; font-size:13px; color:var(--text-subtle);
  background:var(--surface-card); border:1px solid var(--line-strong); border-radius:999px;
  padding:10px 22px; cursor:pointer;
  transition:color var(--dur-base) var(--ease-out-quint), border-color var(--dur-base) var(--ease-out-quint), background var(--dur-base) var(--ease-out-quint);
}
.rs-tab:hover { color:var(--text-primary); border-color:var(--accent); }
.rs-tab.is-active { color:var(--sky-white); background:var(--accent); border-color:var(--accent); }

.rs-film-card {
  display:flex; flex-direction:column; text-align:left; padding:0; cursor:pointer;
  background:var(--surface-card); border:1px solid var(--line); border-radius:var(--radius-card);
  overflow:hidden; transition:border-color var(--dur-base) var(--ease-out-quint), transform var(--dur-base) var(--ease-out-quint), box-shadow var(--dur-base) var(--ease-out-quint);
}
.rs-film-card:hover { border-color:var(--accent); transform:translateY(-3px); box-shadow:var(--shadow-glow); }
.rs-film-card-thumb { position:relative; aspect-ratio:16/9; background:var(--sky-ink); overflow:hidden; }
.rs-film-card-thumb img { position:absolute; inset:0; height:100%; width:100%; object-fit:cover; transition:transform .5s var(--ease-out-quint); }
.rs-film-card:hover .rs-film-card-thumb img { transform:scale(1.06); }
.rs-film-card-play {
  position:absolute; inset:0; margin:auto; height:48px; width:48px; display:grid; place-items:center;
  border-radius:999px; border:1px solid rgba(255,255,255,.3); background:rgba(11,14,19,.45); backdrop-filter:blur(4px);
  color:var(--sky-white); transition:transform var(--dur-base) var(--ease-out-quint), background var(--dur-base) var(--ease-out-quint), border-color var(--dur-base) var(--ease-out-quint);
}
.rs-film-card:hover .rs-film-card-play { transform:scale(1.12); border-color:var(--accent); background:rgba(29,78,216,.4); }
.rs-film-card-label { font-size:16px; color:var(--sky-white); line-height:1.15; padding:14px 16px; }