/* =====================================================
   Jessica Smallwood VB Camp · Top Tier × Elizabethtown VBA
   Custom CSS — only what Tailwind doesn't give for free
   ===================================================== */

:root {
  --ink:   #0E1C36;
  --royal: #003594;
  --gold:  #FFB81C;
  --paper: #F6F1E6;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-feature-settings: "ss01", "cv01", "kern";
  text-rendering: optimizeLegibility;
}

/* Sticky-nav: always solid ink so it reads on every section */
#site-nav {
  background-color: #0E1C36;
  border-bottom: 1px solid rgba(246,241,230,0.08);
}
#site-nav[data-scrolled="true"] {
  box-shadow: 0 8px 24px -16px rgba(0,0,0,0.6);
  border-bottom-color: rgba(246,241,230,0.14);
}

/* Tabular figures for all display-class numerals */
.font-display, .tabular-nums {
  font-variant-numeric: tabular-nums lining-nums;
}

/* Headlines get tighter optical kerning */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* ---------- Marquee ---------- */
.marquee { mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); }
.marquee__track {
  animation: marquee 36s linear infinite;
}
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-100%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ---------- Reveal-on-scroll ---------- */
.reveal {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Details accordion: hide default marker ---------- */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary:focus-visible {
  outline: 2px solid var(--royal);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ---------- Focus states ---------- */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--royal);
  outline-offset: 3px;
  border-radius: 9999px;
}

/* ---------- Image rendering ---------- */
img { image-rendering: -webkit-optimize-contrast; }

/* ---------- Selection ---------- */
::selection { background: var(--gold); color: var(--ink); }

/* ---------- Tiny print niceties ---------- */
@media (max-width: 480px) {
  /* Tighten the giant hero headline on small phones */
  h1 .block:first-child,
  h1 .block:nth-child(2) {
    line-height: 0.86;
  }
}