@import url('https://fonts.googleapis.com/css2?family=Anton&family=Work+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root{
  --ink:        #15120f;   
  --hardwood:   #b9803f;   
  --hardwood-2: #8a5c28;   
  --chalk:      #f6f1e6;   
  --red:        #c8102e;   
  --gold:       #e8b94c;   

  --bg:      var(--chalk);
  --surface: #ffffff;
  --text:    var(--ink);
  --text-2:  #5c5349;
  --line:    rgba(21,18,15,0.12);
  --accent:  var(--red);
  --accent-2:var(--gold);

  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-body: 'Work Sans', system-ui, sans-serif;

  --radius: 10px;
  --shadow: 0 10px 30px rgba(21,18,15,0.12);
}

body[data-theme="dark"]{
  --bg:      #100d0b;
  --surface: #1c1712;
  --text:    var(--chalk);
  --text-2:  #c9bfae;
  --line:    rgba(246,241,230,0.14);
  --accent:  var(--gold);
  --accent-2:var(--red);
  --shadow: 0 10px 30px rgba(0,0,0,0.45);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  transition: background .3s ease, color .3s ease;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3{ font-family: var(--font-display); font-weight:400; letter-spacing:.01em; margin:0; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  font-weight:600; font-size:.95rem;
  border: 2px solid transparent;
  cursor:pointer;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn--primary{ background: var(--accent); color: var(--chalk); }
.btn--primary:hover{ background: var(--ink); }
body[data-theme="dark"] .btn--primary:hover{ background: var(--chalk); color: var(--ink); }
.btn--ghost{ border-color: var(--text); color: var(--text); }
.btn--ghost:hover{ background: var(--text); color: var(--bg); }
.btn--full{ width:100%; }


.navbar{
  position: sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.1rem 5%;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.navbar__logo{
  font-family: var(--font-display);
  font-size: 1.4rem; letter-spacing: .04em;
  display:flex; align-items:baseline; gap:.15rem;
}
.navbar__logo-num{ color: var(--accent); }
.navbar__menu{ display:flex; gap:2.2rem; }
.navbar__link{
  font-weight:600; font-size:.9rem; text-transform: uppercase; letter-spacing:.06em;
  position:relative; padding-bottom:4px;
}
.navbar__link::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px;
  background: var(--accent); transition: width .2s ease;
}
.navbar__link:hover::after{ width:100%; }

.navbar__toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:34px; height:34px; background:none; border:none; cursor:pointer;
}
.navbar__toggle span{ height:2px; background:var(--text); border-radius:2px; }


.theme-switch{ background:none; border:none; cursor:pointer; padding:0; }
.theme-switch__track{
  position:relative; display:flex; align-items:center;
  width:56px; height:28px; border-radius:999px;
  background: var(--hardwood);
  border: 2px solid var(--ink);
  overflow:hidden;
}
body[data-theme="dark"] .theme-switch__track{ background: #2a2118; border-color: var(--gold); }
.theme-switch__track::before{ 
  content:''; position:absolute; left:50%; top:0; bottom:0; width:2px;
  background: rgba(0,0,0,.35); transform: translateX(-1px);
}
.theme-switch__icon{
  position:relative; z-index:1; width:50%; text-align:center;
  font-size:.7rem; line-height:1;
}
.theme-switch__ball{
  position:absolute; top:2px; left:2px;
  width:20px; height:20px; border-radius:50%;
  background: var(--chalk);
  box-shadow: inset -3px -3px 0 rgba(0,0,0,.15);
  transition: transform .25s ease;
}
body[data-theme="dark"] .theme-switch__ball{ transform: translateX(28px); background: var(--gold); }


.hero{
  position:relative;
  padding: 4rem 5% 6rem;
  overflow:hidden;
  background:
    radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%),
    repeating-linear-gradient(90deg, var(--hardwood) 0 46px, var(--hardwood-2) 46px 48px);
}
body[data-theme="dark"] .hero{
  background:
    radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 55%),
    repeating-linear-gradient(90deg, #241a10 0 46px, #1a130c 46px 48px);
}
.hero__watermark{
  position:absolute; right:-.3em; top:-.35em;
  font-family: var(--font-display);
  font-size: 26rem; line-height:1;
  color: transparent;
  -webkit-text-stroke: 2px color-mix(in srgb, var(--ink) 18%, transparent);
  pointer-events:none; user-select:none;
}
body[data-theme="dark"] .hero__watermark{ -webkit-text-stroke: 2px color-mix(in srgb, var(--chalk) 14%, transparent); }
.hero__content{ position:relative; max-width: 640px; margin-top: 2rem; }
.hero__title{
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: .98;
  color: var(--ink);
}
body[data-theme="dark"] .hero__title{ color: var(--chalk); }
.hero__subtitle{
  margin-top: 1.4rem; font-size: 1.1rem; color: var(--text-2);
  max-width: 46ch;
}
.hero__cta-row{ margin-top: 2.2rem; display:flex; gap:1rem; flex-wrap:wrap; }


.section-heading{ padding: 0 5%; margin: 5rem 0 2.5rem; text-align:left; }
.section-heading__tag{
  display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color: var(--accent); margin-bottom:.6rem;
}
.section-heading h2{ font-size: clamp(2rem, 4vw, 2.8rem); }
.section-heading__hint{ margin-top:.5rem; color: var(--text-2); font-size:.95rem; }


.about__grid{
  display:grid; grid-template-columns: 300px 1fr; gap: 3rem;
  padding: 0 5% 2rem; align-items:start;
}
.player-card{
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow:hidden;
}
.player-card__top{
  display:flex; justify-content:space-between; align-items:center;
  padding: .9rem 1.1rem; background: var(--ink); color: var(--chalk);
}
.player-card__number{ font-family: var(--font-display); font-size:1.6rem; color: var(--accent-2); }
.player-card__team{ font-size:.68rem; letter-spacing:.08em; font-weight:600; text-align:right; }
.player-card__silhouette{ aspect-ratio: 3/4; background: var(--hardwood); overflow:hidden; }
.player-card__photo{ width:100%; height:100%; object-fit:cover; }
.player-card__caption{
  text-align:center; font-style:italic; padding: .9rem 1rem 1.1rem; color: var(--text-2); font-size:.9rem;
}
.about__text p{ color: var(--text-2); margin: 0 0 1.1rem; font-size:1.03rem; }
.about__text p:last-child{ margin-bottom:0; }


.hobbies{ background: var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding-bottom: 4rem; }
.lineup{
  padding: 0 5%;
  display:grid; grid-template-columns: repeat(5, 1fr); gap: 1.2rem;
}
.lineup-card{ perspective: 1200px; height: 260px; cursor:pointer; outline-offset:4px; }
.lineup-card__inner{
  position:relative; width:100%; height:100%;
  transform-style: preserve-3d; transition: transform .5s cubic-bezier(.4,.2,.2,1);
}
.lineup-card:hover .lineup-card__inner,
.lineup-card:focus .lineup-card__inner{ transform: rotateY(180deg); }
.lineup-card__front, .lineup-card__back{
  position:absolute; inset:0; backface-visibility:hidden;
  border-radius: var(--radius); border: 1px solid var(--line);
  padding: 1.4rem 1.2rem; display:flex; flex-direction:column;
}
.lineup-card__front{
  background: var(--ink); color: var(--chalk); align-items:flex-start; justify-content:flex-end; gap:.3rem;
}
.lineup-card__pos{
  align-self:flex-start; font-family:var(--font-display); font-size:.8rem;
  color: var(--ink); background: var(--accent-2); padding:.15rem .5rem; border-radius:4px; margin-bottom:auto;
}
.lineup-card__icon{ font-size:2rem; }
.lineup-card__front h3{ font-size:1.15rem; }
.lineup-card__back{
  background: var(--accent); color: var(--chalk); transform: rotateY(180deg);
  justify-content:center; gap:.6rem;
}
.lineup-card__back h3{ font-size:1.1rem; }
.lineup-card__back p{ font-size:.85rem; line-height:1.5; margin:0; }


.contact__wrap{
  padding: 0 5% 5rem;
  display:grid; grid-template-columns: 1.3fr .8fr; gap: 3rem;
}
.contact-form{ display:flex; flex-direction:column; gap: 1.2rem; }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field label{ font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color: var(--text-2); }
.field input, .field textarea{
  font: inherit; padding:.75rem .9rem; border-radius:8px;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--text);
  resize: vertical;
}
.field input:focus, .field textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color: var(--accent); }
.field__error{ font-size:.78rem; color: var(--red); min-height: 1em; }
.form-status{ font-size:.9rem; color: var(--text-2); min-height:1.2em; }

.contact__side{ display:flex; align-items:center; }
.ticker{ width:100%; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
body[data-theme="dark"] .ticker{ border-color: var(--chalk); }
.ticker__row{
  display:flex; justify-content:space-between; align-items:center;
  padding: 1rem 0; margin:0; border-bottom: 1px dashed var(--line); gap: 1rem;
}
.ticker__row:last-child{ border-bottom:none; }
.ticker__row span{ font-family: var(--font-display); font-size:.75rem; letter-spacing:.08em; color: var(--text-2); }
.ticker__row a{ font-weight:600; word-break: break-word; text-align:right; }
.ticker__row a:hover{ color: var(--accent); }


.site-footer{
  text-align:center; padding: 2rem 5%; font-size:.85rem; color: var(--text-2);
  border-top: 1px solid var(--line);
}


@media (max-width: 900px){
  .about__grid{ grid-template-columns: 1fr; }
  .player-card{ max-width: 320px; }
  .lineup{ grid-template-columns: repeat(2, 1fr); }
  .contact__wrap{ grid-template-columns: 1fr; }
  .hero__watermark{ font-size: 14rem; }
}

@media (max-width: 640px){
  .navbar__menu{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background: var(--surface); border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition: max-height .25s ease;
  }
  .navbar__menu.is-open{ max-height: 300px; }
  .navbar__link{ display:block; padding: 1rem 5%; border-bottom:1px solid var(--line); }
  .navbar__toggle{ display:flex; }
  .lineup{ grid-template-columns: 1fr 1fr; }
}


@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .lineup-card__inner, .theme-switch__ball, .btn, .navbar__link::after{ transition:none; }
}


a:focus-visible, button:focus-visible, .lineup-card:focus-visible{
  outline: 2px solid var(--accent); outline-offset: 3px;
}