/* HFN brand override — retunes the Broadsheet accent ramps from cyan/magenta
   to navy/red per the club's logo, on top of the shared design-system tokens. */
:root { color-scheme: light; }
html, body { background: var(--color-bg); color: var(--color-text); }

/* Subtle red-tinted lift on hover — cards feel alive without being loud */
.card {
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-accent-2-700) 10%, transparent);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--color-accent-2-600) 22%, transparent);
}
.btn {
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-accent-2-600) 20%, transparent);
}
.btn:active {
  transform: translateY(0);
}
/* .nav a { color: inherit } in the design system (element+class, 0,1,1)
   outranks .btn-primary/.btn-secondary/.btn-ghost (single class, 0,1,0),
   so any .btn dropped into the nav silently loses its own text color to
   whatever the nav's ancestor sets — dark-on-dark for .btn-primary here.
   Restate each variant's color at matching 0,1,1 specificity (.nav .btn-x)
   so buttons keep their intended color in the nav, on this page and any
   new one built from the same template. Add a line here for any future
   .btn-* variant that sets its own `color`. */
.nav .btn-primary { color: var(--color-bg); }
.nav .btn-secondary { color: var(--color-text); }
.nav .btn-ghost { color: var(--color-accent); }
a {
  transition: color 0.15s ease;
}

:root {
  --color-accent-100: oklch(97% 0.01 258);
  --color-accent-200: oklch(92% 0.025 258);
  --color-accent-300: oklch(84% 0.045 258);
  --color-accent-400: oklch(74% 0.065 258);
  --color-accent-500: oklch(62% 0.085 258);
  --color-accent-600: oklch(50% 0.09 258);
  --color-accent-700: oklch(40% 0.08 258);
  --color-accent-800: oklch(30% 0.065 258);
  --color-accent-900: oklch(20% 0.05 258);
  --color-accent: oklch(38% 0.075 258);

  --color-accent-2-100: oklch(97% 0.015 25);
  --color-accent-2-200: oklch(91% 0.04 25);
  --color-accent-2-300: oklch(83% 0.08 25);
  --color-accent-2-400: oklch(72% 0.13 25);
  --color-accent-2-500: oklch(60% 0.17 25);
  --color-accent-2-600: oklch(50% 0.18 25);
  --color-accent-2-700: oklch(41% 0.16 25);
  --color-accent-2-800: oklch(32% 0.13 25);
  --color-accent-2-900: oklch(22% 0.09 25);
  --color-accent-2: oklch(46% 0.18 25);
}

/* Responsive grid utilities — tablet/mobile support.
   Broadsheet's own pages are built with per-section inline styles
   (display:grid + grid-template-columns right on the element), and an
   inline style can never be beaten by a stylesheet rule, media query or
   not. These classes hold ONLY the column template, so a breakpoint can
   actually override it; gap/padding/align-items/etc. stay inline as
   normal. Use one of these instead of a raw inline grid-template-columns
   on any new page/section — that's what makes it collapse correctly on
   narrow screens.

     .grid-hero    1.1fr 0.9fr    big hero split (copy + image)
     .grid-lead    1.4fr 1fr      copy-led two-up (CTA sections)
     .grid-split   1fr 1fr        even two-up (event/next-up cards)
     .grid-3       repeat(3,1fr)
     .grid-4       repeat(4,1fr)
     .grid-footer  2fr 1fr 1fr    footer columns

   Breakpoints: 900px (tablet — 2/3/4-up grids drop a column, 2-up and
   footer grids stack), 600px (phone — everything left is a single
   column). The nav collapses to a hamburger menu at 900px too — see
   the nav section below. */
.grid-hero, .grid-lead, .grid-split { display: grid; }
.grid-hero   { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-8); align-items: center; }
.grid-lead   { grid-template-columns: 1.4fr 1fr; gap: var(--space-6); align-items: center; }
.grid-split  { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.grid-3      { display: grid; grid-template-columns: repeat(3, 1fr); }
.grid-4      { display: grid; grid-template-columns: repeat(4, 1fr); }
.grid-footer { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-6); margin-bottom: var(--space-6); }

@media (max-width: 900px) {
  .grid-hero, .grid-lead, .grid-split, .grid-footer { grid-template-columns: 1fr; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* Mobile nav — hamburger menu, pure CSS (checkbox-hack), no JS.
   Markup per page: .nav-brand, then #nav-toggle (checkbox) + its
   label, then .nav-links holding the actual links/Support Us button.
   DOM order matters — the checkbox must precede .nav-links for the
   `~` sibling selector below to reach it.

   Deliberately never set a `checked` attribute in any page's source:
   left fully uncontrolled, the checkbox's live DOM state survives this
   template system's periodic re-renders (e.g. the homepage's
   once-a-second countdown) untouched. Setting `checked` explicitly
   would hand control to the compiled React tree, which would then pin
   it back to unchecked on every re-render — the menu would slam shut
   under your thumb within a second of opening it on that page. Tested
   against exactly that case before trusting this approach. */
.nav-links {
  display: flex; /* default/desktop — the inline style on the div no longer
    sets display, on purpose: this class needs to own that property so the
    @media rule below can actually override it at narrow widths. */
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.nav-toggle-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.nav-toggle-label {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  flex: none;
  cursor: pointer;
}
.nav-toggle-label span {
  display: block;
  height: 2px;
  background: var(--color-text);
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle-input:focus-visible + .nav-toggle-label {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.nav-toggle-input:checked + .nav-toggle-label span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle-input:checked + .nav-toggle-label span:nth-child(2) { opacity: 0; }
.nav-toggle-input:checked + .nav-toggle-label span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav { flex-wrap: wrap; row-gap: var(--space-3); }
  .nav-toggle-label { display: flex; }
  .nav-links {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }
  .nav-toggle-input:checked ~ .nav-links { display: flex; }
  .nav-links a:not(.btn) { padding: var(--space-2) 0; }
}