/* Livewire Sporting Venture — Sunset Harbor
   Brand palette: navy depths + sunset orange accent
   Type: Cinzel (display) + Inter (UI/body)
*/

:root {
  /* ----- Sunset Harbor brand colors ----- */
  --navy-darkest: #0B1F3B;   /* page background — deepest harbor navy */
  --navy-mid:     #1C3D6E;   /* card / section bg — mid harbor navy */
  --slate-blue:   #585E8A;   /* muted accent / borders — dusk slate */
  --sunset:       #E39A5C;   /* primary accent — sunset orange */
  --paper:        #F7F5F0;   /* text / paper — warm off-white */

  /* ----- Semantic aliases (back-compat with existing markup) ----- */
  --blue-900: var(--navy-darkest);
  --blue-800: var(--navy-mid);
  --blue-700: var(--navy-mid);
  --blue-600: var(--slate-blue);
  --blue-500: var(--slate-blue);
  --blue-400: var(--slate-blue);
  --blue-100: var(--paper);
  --ink:      var(--navy-darkest);
  --accent:   var(--sunset);
  --accent-2: var(--sunset);

  --font-display: 'Cinzel', 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: var(--font-body);
  background: var(--blue-900);
  color: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.cinzel { font-family: var(--font-display); }
.eyebrow {
  font-family: var(--font-body);
  font-size: 11px; letter-spacing: 3px; font-weight: 600;
  text-transform: uppercase; color: var(--accent);
}
.eyebrow.dark { color: var(--blue-700); }

/* ---------- NAV ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 40px;
  background: rgba(11, 31, 59, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(247,245,240,0.08);
}
.nav-logo {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px; letter-spacing: 3px;
}
.nav-logo .badge {
  width: 36px; height: 36px;
  border: 2px solid var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800;
  background: var(--blue-800);
}
.nav-links {
  display: flex; gap: 36px;
  font-family: var(--font-body); font-size: 12px;
  letter-spacing: 2.5px; font-weight: 600; text-transform: uppercase;
}
.nav-links a {
  position: relative; padding: 8px 0;
  opacity: 0.7; transition: opacity 0.2s;
}
.nav-links a:hover, .nav-links a.active { opacity: 1; }
.nav-links a.active::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px; background: var(--accent);
}

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px;
  font-family: var(--font-body);
  font-size: 12px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  border: 2px solid var(--paper);
  background: transparent; color: var(--paper);
  cursor: pointer; transition: all 0.2s;
}
.btn:hover { background: var(--paper); color: var(--blue-900); }
.btn.primary { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.btn.primary:hover { background: var(--paper); border-color: var(--paper); }
.btn .arrow { transition: transform 0.2s; }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- TICKER ---------- */
.ticker {
  background: var(--paper); color: var(--ink);
  padding: 14px 0; overflow: hidden;
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
}
.ticker-track {
  display: flex; gap: 64px; white-space: nowrap;
  animation: scroll 40s linear infinite;
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; letter-spacing: 2px; text-transform: uppercase;
}
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ticker-track span { display: inline-flex; align-items: center; gap: 24px; }
.ticker-track .dot {
  display: inline-block; width: 10px; height: 10px;
  background: var(--accent-2); border-radius: 50%;
}

/* ---------- KINETIC HEADLINE ---------- */
.kinetic-headline {
  font-family: var(--font-display); font-weight: 800;
  line-height: 0.92; letter-spacing: -0.5px;
  text-transform: uppercase;
}
.kinetic-headline .row { display: block; }
.kinetic-headline .row.indent { padding-left: 0.6em; }
.kinetic-headline .row.indent-2 { padding-left: 1.2em; }
.kinetic-headline .pop { color: var(--accent); }
.kinetic-headline .stroke {
  -webkit-text-stroke: 2px var(--paper);
  color: transparent;
}

/* ---------- SECTIONS ---------- */
section { position: relative; }
.container { padding: 0 40px; }

/* ---------- DIAGONAL BAND ---------- */
.diagonal-band {
  background: var(--accent);
  color: var(--ink);
  padding: 32px 0;
  transform: rotate(-1.2deg);
  margin: 80px -20px;
  display: flex; gap: 64px; justify-content: space-around; align-items: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: 26px; letter-spacing: 2px; text-transform: uppercase;
  white-space: nowrap; overflow: hidden;
}

/* ---------- CARDS ---------- */
.team-card {
  position: relative;
  background: var(--blue-800);
  color: var(--paper);
  border: 1.5px solid rgba(255,255,255,0.15);
  padding: 28px;
  height: 380px;
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
  transition: transform 0.3s, border-color 0.3s, background 0.3s, color 0.3s;
  cursor: pointer;
}
.team-card:focus-visible {
  transform: translateY(-4px);
  background: var(--accent);
  color: var(--ink);
  border-color: var(--ink);
}
.team-card:focus-visible .card-meta { color: var(--ink); }
@media (hover:hover) and (pointer:fine) {
  .team-card:hover { transform:translateY(-4px); background:var(--accent); color:var(--ink); border-color:var(--ink); }
  .team-card:hover .card-meta { color:var(--ink); }
}
.team-card .card-num {
  font-family: var(--font-display); font-weight: 800; font-size: 56px; line-height: 1;
  opacity: 0.9;
}
.team-card .card-orb {
  width: 60px; height: 60px; border-radius: 50%;
  border: 2px solid currentColor;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
}
.team-card .card-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 26px; letter-spacing: 1px; text-transform: uppercase;
  line-height: 1.05;
}
.team-card .card-meta {
  font-size: 11px; letter-spacing: 2px; font-weight: 600;
  text-transform: uppercase; color: var(--accent); opacity: 0.9;
  margin-bottom: 10px;
  transition: color 0.3s;
}

@media (prefers-reduced-motion: reduce) {
  .team-card, .team-card .card-meta { transition: none; }
  .team-card:hover, .team-card:focus-visible { transform: none; }
}

/* ---------- STATS ---------- */
.stat {
  display: flex; flex-direction: column; gap: 8px;
  padding: 24px 0; border-top: 1.5px solid rgba(255,255,255,0.18);
}
.stat .num {
  font-family: var(--font-display); font-weight: 800;
  font-size: 64px; line-height: 1; color: var(--paper);
}
.stat .num .unit { color: var(--accent); }
.stat .label {
  font-size: 11px; letter-spacing: 2.5px; font-weight: 600;
  text-transform: uppercase; opacity: 0.7;
}

/* ---------- FOUNDERS ---------- */
.founder-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1.5px solid rgba(255,255,255,0.2);
}
.founder-card {
  min-width: 0;
  padding: 32px;
  border-right: 1.5px solid rgba(255,255,255,0.2);
  display: flex; flex-direction: column; gap: 18px;
}
.founder-card:last-child { border-right: none; }
.founder-portrait {
  aspect-ratio: 4 / 5;
  background: var(--navy-darkest);
  position: relative; overflow: hidden;
  padding: 0;
}
.founder-portrait img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--portrait-position, 50% 50%);
}
.founder-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 32px; letter-spacing: 1px; text-transform: uppercase;
  line-height: 1;
}

/* ---------- GALLERY ---------- */
.gallery-cell {
  background: linear-gradient(135deg, var(--navy-mid), var(--navy-darkest));
  position: relative; overflow: hidden;
  border: 1px solid rgba(247,245,240,0.12);
  transition: transform 0.3s;
}
.gallery-cell:hover { transform: scale(1.02); }
.gallery-cell::after {
  content: attr(data-label);
  position: absolute; left: 12px; bottom: 12px;
  font-size: 10px; letter-spacing: 2px; font-weight: 600;
  text-transform: uppercase; color: var(--sunset);
  background: rgba(11,31,59,0.78); padding: 4px 8px;
}

/* ---------- FOOTER ---------- */
.footer {
  padding: 60px 40px 40px;
  background: var(--ink);
  border-top: 1px solid rgba(255,255,255,0.1);
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px;
}
.footer h4 {
  font-family: var(--font-body); font-size: 11px;
  letter-spacing: 2.5px; font-weight: 600; text-transform: uppercase;
  color: var(--accent); margin: 0 0 16px;
}
.footer-bottom {
  padding: 24px 40px; background: var(--ink);
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(244,241,234,0.5);
}

/* ---------- ENTRANCE ANIMATION ---------- */
@keyframes slide-in {
  from { transform: translateX(-30px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes fade-up {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.kinetic-headline .row {
  animation: slide-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.kinetic-headline .row:nth-child(2) { animation-delay: 0.12s; }
.kinetic-headline .row:nth-child(3) { animation-delay: 0.24s; }
.kinetic-headline .row:nth-child(4) { animation-delay: 0.36s; }

.fade-up { animation: fade-up 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

/* Page hero spacing for fixed nav */
.page-top { padding-top: 100px; }

/* Content helpers preserve the original Sunset Harbor page layouts. */
html { scroll-padding-top: 100px; }
[hidden] { display: none !important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
a:focus-visible, button:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
.nav-caption { font-size:11px; letter-spacing:2px; font-weight:600; }
.hero-glow { position:absolute; top:-200px; right:-200px; width:600px; height:600px; background:radial-gradient(circle, var(--blue-600), transparent 70%); opacity:0.4; pointer-events:none; }
.actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }
.about-grid { display:grid; grid-template-columns:1fr 2fr; gap:80px; align-items:start; }
.about-copy { display:grid; grid-template-columns:1fr 1fr; gap:40px; font-size:16px; line-height:1.7; }
.about-copy p { margin:0 0 22px; }
.about-copy p:last-child { margin-bottom:0; }
.pillars-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1.5px solid rgba(255,255,255,0.2); }
.pillar { padding:40px 32px; border-right:1.5px solid rgba(255,255,255,0.2); display:flex; flex-direction:column; gap:18px; }
.pillar:first-child { padding-left:0; }
.pillar:last-child { padding-right:0; border-right:0; }
.pillar-number { font-size:64px; font-weight:800; color:var(--accent); line-height:1; }
.pillar h3 { font-size:28px; font-weight:700; margin:0; text-transform:uppercase; letter-spacing:1px; }
.pillar p { margin:0; line-height:1.7; font-size:15px; }
.pillar a { color:var(--accent); }
.stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
.stat .num.stat-region { font-size:clamp(20px,2.3vw,36px); min-height:76px; display:flex; align-items:center; overflow-wrap:anywhere; }
.stat .label { opacity:1; }
.founder-facts { display:flex; flex-wrap:wrap; gap:24px; padding-top:16px; border-top:1px solid rgba(255,255,255,0.15); font-size:11px; letter-spacing:2px; font-weight:600; opacity:0.7; text-transform:uppercase; }
.teams-heading { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:40px; gap:24px; flex-wrap:wrap; }
.team-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.team-grid.is-filtered .card-num { display:none; }
.team-grid.is-filtered .card-top { justify-content:flex-end; }
.team-card.team-mention { cursor:default; }
.card-top { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
.team-tagline { font-size:14px; line-height:1.6; margin:14px 0; }
.team-social { font-size:13px; line-height:1.6; text-decoration:underline; text-underline-offset:4px; }
.team-card .card-meta { line-height:1.7; opacity:1; }
.team-tabs { padding:0 40px; display:flex; flex-wrap:wrap; border-bottom:1.5px solid rgba(255,255,255,0.18); }
.tab { background:transparent; border:0; cursor:pointer; padding:18px 32px; font-family:var(--font-body); font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--paper); border-right:1px solid rgba(255,255,255,0.15); }
.tab:hover { color:var(--accent); }
.tab.active { background:var(--accent); color:var(--ink); }
.team-feature-layout { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; align-items:stretch; max-width:1600px; margin-inline:auto; }
.team-profile { display:flex; flex-direction:column; }
.team-profile > .eyebrow { min-height:2.8em; line-height:1.4; }
.team-profile .featured-team-cover { flex-shrink:0; }
.team-profile .actions { margin-top:auto; padding-top:28px; }
.team-feature-layout.is-filtered { grid-template-columns:1fr; max-width:1080px; }
.team-feature-layout > *, .about-grid > *, .team-grid > * { min-width:0; }
.featured-team-cover { aspect-ratio:16/9; background:var(--navy-darkest); border:1.5px solid rgba(255,255,255,0.18); position:relative; overflow:hidden; display:flex; align-items:flex-end; padding:28px; }
.featured-team-cover::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,31,59,0.45),rgba(11,31,59,0.05) 35%,rgba(11,31,59,0.95)); pointer-events:none; }
.featured-team-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 45%; }
.featured-team-caption { position:relative; z-index:1; }
.featured-team-note { position:absolute; top:24px; right:24px; z-index:1; font-size:11px; letter-spacing:2px; font-weight:700; text-transform:uppercase; color:var(--accent); }
.featured-team-name { font-size:clamp(26px,2.8vw,42px); font-weight:800; line-height:1.1; letter-spacing:1px; text-transform:uppercase; }
.featured-team-league { margin-top:12px; font-size:13px; line-height:1.6; letter-spacing:2px; font-weight:600; text-transform:uppercase; }
.team-copy { margin:24px 0 0; line-height:1.8; font-size:15px; max-width:70ch; }
.team-copy p { margin:0 0 20px; }
.other-teams { display:flex; flex-direction:column; gap:14px; }
.side-team { display:grid; grid-template-columns:80px minmax(0,1fr) auto; gap:18px; align-items:center; padding:18px; border:1.5px solid rgba(255,255,255,0.18); background:var(--blue-800); transition:transform 0.2s, border-color 0.2s; }
.side-team:hover { border-color:var(--accent); transform:translateX(4px); }
.side-team-initials { aspect-ratio:1; background:linear-gradient(135deg,var(--blue-700),var(--blue-900)); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:24px; color:var(--accent); }
.side-team .eyebrow { font-size:10px; letter-spacing:1px; line-height:1.6; }
.side-team-name { font-size:18px; font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-top:4px; }
.team-lead-photo { display:block; width:100%; aspect-ratio:16/9; padding:0; border:1px solid rgba(247,245,240,0.2); background:var(--navy-darkest); overflow:hidden; }
.team-lead-photo img { width:100%; height:100%; object-fit:cover; object-position:50% 45%; }
.team-photo-strip { display:flex; gap:10px; overflow-x:auto; overscroll-behavior-x:contain; padding:12px 0; scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:var(--accent) var(--navy-darkest); }
.team-photo-thumb { flex:0 0 160px; aspect-ratio:3/2; padding:0; border:2px solid rgba(247,245,240,0.2); background:var(--navy-darkest); cursor:pointer; overflow:hidden; scroll-snap-align:start; }
.team-photo-thumb img { width:100%; height:100%; object-fit:cover; object-position:50% 25%; }
.team-photo-thumb:hover, .team-photo-thumb[aria-pressed="true"] { border-color:var(--accent); }
.photo-caption { margin:4px 0 0; font-size:13px; line-height:1.6; color:var(--paper); }
.team-feature-layout:not(.is-filtered) .team-photo-strip,
.team-feature-layout:not(.is-filtered) .photo-caption { display:none; }
.team-feature-layout.is-filtered .featured-team-cover,
.team-feature-layout.is-filtered .team-lead-photo { aspect-ratio:3/2; }
.team-feature-layout.is-filtered .gallery-main-photo { object-fit:contain; object-position:center; }
.footer-links { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; font-size:13px; line-height:1.6; }
.footer-links a:hover { color:var(--accent); }
.footer-bottom { gap:20px; line-height:1.7; color:var(--paper); }
.gallery-filter { padding:32px 40px; display:flex; gap:12px; align-items:center; border-top:1.5px solid rgba(255,255,255,0.15); border-bottom:1.5px solid rgba(255,255,255,0.15); flex-wrap:wrap; }

@media(max-width:1000px) {
  .nav-caption { display:none; }
  .about-grid { grid-template-columns:1fr 3fr; gap:32px; }
  .about-copy { gap:24px; }
  .side-team { grid-template-columns:48px minmax(0,1fr) auto; gap:12px; padding:14px; }
  .footer { gap:24px; }
}
@media(max-width:900px) {
  .team-feature-layout { grid-template-columns:1fr; }
}
@media(max-width:700px) {
  html { scroll-padding-top:130px; }
  .nav { padding:12px 20px; flex-wrap:wrap; gap:4px; background:rgba(11,31,59,0.98); backdrop-filter:none; -webkit-backdrop-filter:none; }
  .nav-links { width:100%; gap:12px; font-size:11px; letter-spacing:1px; }
  .nav-logo { font-size:16px; }
  main > section { padding:64px 20px !important; }
  main > .page-top { padding-top:145px !important; }
  .kinetic-headline { font-size:clamp(36px,9vw,64px) !important; line-height:1.05; }
  .kinetic-headline .row.indent { padding-left:0.3em; }
  .kinetic-headline .row.indent-2 { padding-left:0.6em; }
  .about-grid, .about-copy, .pillars-grid, .founder-grid, .team-grid, .team-feature-layout { grid-template-columns:1fr; }
  .about-grid > div:first-child > .cinzel { display:none; }
  .pillar, .pillar:first-child, .pillar:last-child { padding:32px 0; border-right:0; border-bottom:1px solid rgba(255,255,255,0.2); }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .stat .num.stat-region { min-height:76px; font-size:clamp(19px,4.5vw,28px); }
  .founder-card { padding:24px; border-right:0; border-bottom:1px solid rgba(255,255,255,0.2); }
  .founder-name { font-size:clamp(24px,6vw,32px); line-height:1.15; overflow-wrap:anywhere; }
  .team-card { height:340px; padding:24px; }
  .team-tabs { padding:0 20px; }
  .tab { padding:16px 14px; font-size:10px; letter-spacing:1px; }
  .featured-team-cover { padding:20px; }
  .featured-team-note { left:20px; right:20px; top:16px; text-align:right; font-size:10px; letter-spacing:1px; line-height:1.6; }
  .featured-team-name { font-size:clamp(22px,6vw,32px); }
  .featured-team-league { margin-top:8px; font-size:10px; letter-spacing:1px; }
  .team-photo-thumb { flex-basis:144px; }
  .side-team { grid-template-columns:60px minmax(0,1fr) auto; }
  .footer { padding:48px 20px; grid-template-columns:1fr 1fr; }
  .footer > div:first-child { grid-column:1/-1; }
  .footer-bottom { padding:24px 20px; flex-direction:column; }
  .gallery-filter { padding:24px 20px; }
  .btn { padding:14px 18px; font-size:11px; letter-spacing:1px; }
  .diagonal-band { gap:20px; font-size:18px; flex-wrap:wrap; white-space:normal; }
}
@media(max-width:700px), (pointer:coarse) {
  .nav-logo { min-height:44px; }
  .nav-links a { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:8px 6px; }
  .team-social, .chapter-heading > a, .cover-cta a { display:inline-flex; align-items:center; min-height:44px; max-width:100%; }
  .card-name a { display:inline-block; min-height:44px; }
  .footer-links a { display:block; min-height:44px; padding:10px 0; }
  .footer-links { gap:4px; }
}
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .ticker-track { flex-wrap:wrap; justify-content:center; gap:20px; font-size:16px; }
  .ticker-track > [aria-hidden] { display:none; }
}