/* Refined navigation and the small playful hero interaction */
.site-header{min-height:66px;padding:10px clamp(18px,4vw,64px)}.site-header.is-home .brand{opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-12px)}.brand{transition:opacity .25s ease,transform .25s ease}
.brand{gap:10px;font-size:clamp(20px,1.7vw,28px)}.brand img{width:38px;height:28px}
.site-header nav{gap:0;position:relative;padding:0;border:0}
.nav-indicator{position:absolute;inset:0 auto 0 0;width:0;background:var(--gold);transition:transform .32s cubic-bezier(.22,1,.36,1),width .32s cubic-bezier(.22,1,.36,1);pointer-events:none;z-index:0}
nav a{position:relative;font-size:17px;letter-spacing:.02em;padding:7px 14px;z-index:1;transition:color .25s}nav a:hover,nav a.active{color:#161616!important;background:transparent;border-bottom-color:transparent}
.site-header nav.is-preview a.active{color:var(--paper)!important}.site-header nav.is-preview a.preview{color:#161616!important}
.hero{padding-top:38px}.hero-mark{display:inline-block;width:min(600px,88vw)}.hero-logo{width:100%;margin-bottom:4px}.prize a{color:var(--gold)}
@media(max-width:960px){
  .site-header{min-height:62px;align-items:center;flex-wrap:wrap;padding:12px 20px}
  .brand{font-size:24px}.brand img{width:38px;height:28px}
  .menu-toggle{display:block;border:1px solid var(--gold);background:transparent;color:var(--gold);font:500 16px Oswald;padding:7px 13px;cursor:pointer}
  .menu-toggle:hover{background:var(--gold);color:#161616}
  .site-header nav{display:none;position:static;order:3;flex:0 0 100%;width:100%;margin-top:10px;padding:8px 0 2px;background:#050505;border-top:1px solid #333;flex-direction:column;align-items:stretch;gap:0}
  .site-header nav.open{display:flex}.nav-indicator{display:none}
  nav a,nav a:hover,nav a.active{color:var(--paper)!important;background:transparent!important;border-bottom:0!important;font-size:24px;padding:13px 14px;text-align:left}
  nav a.active{border-left:3px solid var(--gold)!important;color:var(--gold)!important;padding-left:17px}
  .site-header nav.is-preview a.active{color:var(--gold)!important}.site-header nav.is-preview a.preview{color:var(--paper)!important;background:#171717!important}
  .hero-mark{width:min(600px,100%)}
}
@media(max-width:460px){.site-header{padding:12px 16px}.brand{font-size:21px}.brand img{width:34px;height:25px}.menu-toggle{font-size:15px;padding:6px 11px}nav a,nav a:hover,nav a.active{font-size:22px}}

/* ---- Fixes layer: anchor offset, form feedback, touch behaviour ---- */

/* The width/height attributes on <img> reserve space so the page does not jump
   while the logo loads. Without height:auto the browser would honour the
   attribute height literally and distort the logo as the width scales down. */
img{max-width:100%}
/* club-logo.png carries real transparency, so the screen blend that used to
   hide its black backing is no longer needed — and could not work anyway now
   that `main` creates a stacking context above the pattern layer. */
.hero-logo{height:auto;mix-blend-mode:normal}

/* Anchor targets used to land flush against the sticky header. */
html{scroll-padding-top:86px}

.skip-link{position:absolute;left:-9999px;top:0;z-index:20;background:var(--gold);color:#161616;padding:10px 16px;font:500 16px Oswald,sans-serif}
.skip-link:focus{left:8px;top:8px}

/* Honeypot: a real field that only an automated client will fill in. Moved off
   screen rather than display:none, which some bots check for, and kept out of
   the tab order and the accessibility tree so nobody real ever meets it. */
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Each form now reports into its own status line instead of one shared node
   that sat in a different section of the page. */
.form-message{min-height:0;margin:0;font-size:15px;line-height:1.5}
.form-message:empty{display:none}
.form-message.is-pending{color:var(--muted)}
.form-message.is-success{color:var(--gold)}
.form-message.is-error{color:#ff9a8b}
.club-form button[disabled]{opacity:.6;cursor:progress}
.club-form :user-invalid{border-color:#ff9a8b}

/* Comfortable thumb targets and no blue flash on tap. */
a,button,summary{-webkit-tap-highlight-color:rgba(214,204,115,.25)}
@media(max-width:960px){
  .menu-toggle{min-height:44px;min-width:64px}
  .club-form .button,.timer-controls .button{min-height:48px}
  summary{padding-top:20px;padding-bottom:20px}
  footer{flex-wrap:wrap;row-gap:14px}
}

/* The hover preview is pointer-only; touch taps must not leave it stuck on. */
@media(hover:none){
  .site-header nav.is-preview a.preview{background:transparent!important}
}

/* ---------------- FAQ answers: highlights and centred lists ---------------- */

.hl{color:var(--gold)}
em.hl{font-style:italic}
a.hl{text-decoration:none;border-bottom:1px solid transparent;transition:border-color .25s ease}
a.hl:hover,a.hl:focus-visible{border-bottom-color:var(--gold)}

/* Numbers hold a fixed left column while the text centres, matching the
   layout the club used on its previous site. */
.faq-list{max-width:900px;margin:18px auto 0;padding-left:34px;color:var(--muted);text-align:center;line-height:1.6}
.faq-list li{padding:0 0 16px}
.faq-list li::marker{color:var(--gold);font-weight:700}
.faq-list strong{color:var(--paper);font-weight:700}
.faq-closing{max-width:820px;margin:6px auto 23px!important;text-align:center}
details p{transition:none}

@media(max-width:640px){
  /* Centred text over many short lines is hard to read on a narrow screen. */
  .faq-list,.faq-closing{text-align:left}
  .faq-list{padding-left:26px}
}

/* ------------------------------ motion ------------------------------ */

/* Buttons lift toward the cursor. */
.button{transition:background-color .2s ease,color .2s ease,transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s ease}
.button:hover{transform:translateY(-2px);box-shadow:0 8px 22px -10px rgba(214,204,115,.55)}
.button:active{transform:translateY(0);box-shadow:none}

/* The accordion marker turns instead of swapping character. */
summary{transition:color .22s ease,padding-left .22s cubic-bezier(.22,1,.36,1)}
summary:hover{color:var(--gold);padding-left:8px}
summary::after{content:"+"!important;transition:transform .3s cubic-bezier(.22,1,.36,1),color .22s ease}
details[open] summary::after{transform:rotate(135deg)}
summary:hover::after{color:#eee28a}
details[open]>*:not(summary){animation:faq-open .34s cubic-bezier(.22,1,.36,1) both}
@keyframes faq-open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Sample questions pick up a gold rule as you read down them. */
.questions li{transition:transform .25s cubic-bezier(.22,1,.36,1),color .25s ease;border-left:2px solid transparent;margin-left:-14px;padding-left:26px}
.questions li:hover{transform:translateX(6px);border-left-color:var(--gold);color:#fff}

/* Rule cards lift slightly. */
.rule-grid article{transition:transform .28s cubic-bezier(.22,1,.36,1)}
.rule-grid article:hover{transform:translateY(-4px)}
.rule-grid article:hover h3{color:#eee28a}
.rule-grid h3{transition:color .25s ease}

/* Inputs settle rather than snap. */
input,textarea{transition:border-color .2s ease,background-color .2s ease}
input:hover,textarea:hover{border-color:#7d7d7d}

/* Footer and brand marks respond to the cursor. */
.brand img,footer img{transition:transform .35s cubic-bezier(.22,1,.36,1)}
.brand:hover img{transform:rotate(-6deg) scale(1.08)}
footer a{transition:color .2s ease}
footer a:hover{color:#eee28a}
.hero-logo{transition:transform .6s cubic-bezier(.22,1,.36,1)}
.hero-mark:hover .hero-logo{transform:scale(1.02)}

/* Sections ease in the first time they are scrolled to. Applied by app.js, so
   the page stays fully visible if JavaScript never runs. */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.reveal.is-in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  .button:hover,.questions li:hover,.rule-grid article:hover,.brand:hover img,.hero-mark:hover .hero-logo{transform:none}
  summary:hover{padding-left:0}
}

/* Motion that depends on a cursor is pointless on a touch screen. */
@media(hover:none){
  .button:hover,.questions li:hover,.rule-grid article:hover,.hero-mark:hover .hero-logo{transform:none;box-shadow:none}
  summary:hover{padding-left:0}
}

/* ========================= background pattern ========================= */
/* A fixed layer rather than a body background: it stays put while the page
   scrolls, and position:fixed behaves on iOS where background-attachment does
   not. Turn the whole thing down or up with one number. */
/* Pure black page, as before the pattern was introduced. The tile is sized
   explicitly rather than by `auto` so the motif can be narrowed a little
   against its natural 160x200 proportion. */
/* assets/pattern.png is the tile from the original site (121x258 native), with
   its ink recoloured to #cdc56d and its alpha lifted from a peak of 69 to 179.
   Baking both into the file matters: at this tile size the strokes are barely
   over 1px, and dimming a 1px anti-aliased line twice (file alpha, then CSS
   opacity) drops it below the point where anything is visible at all.
   Only the width is set; the height stays `auto` so the repeat cannot skew. */
:root{--black:#000;--pattern-opacity:.20;--pattern-w:82px}

body{background-color:#000}

body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url(assets/pattern.png);
  background-repeat:repeat;
  background-size:var(--pattern-w) auto;
  opacity:var(--pattern-opacity);
}
/* Content sits above the pattern. The header is deliberately left out: it must
   keep position:sticky from styles.css, and relative would silently kill it. */
main,footer{position:relative;z-index:1}
.site-header{z-index:12}

@media(max-width:640px){:root{--pattern-w:66px;--pattern-opacity:.19}}

/* ===================== header: state change on scroll ===================== */
/* The blur lives on a pseudo-element, never on the header itself. An element
   carrying backdrop-filter becomes the containing block for any fixed-position
   descendant, which would trap the full-screen mobile menu inside the header
   bar instead of letting it cover the viewport. */
.site-header{
  background:transparent;
  border-bottom:1px solid #242424;
  transition:border-color .38s ease,box-shadow .38s ease;
}
.site-header::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:#000;
  transition:background-color .38s ease,backdrop-filter .38s ease;
}
/* Away from the hero the bar lifts off the page: translucent, blurred, with a
   hairline of gold instead of grey. */
.site-header:not(.is-home)::before{
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
}
.site-header:not(.is-home){
  border-bottom-color:rgba(214,204,115,.34);
  box-shadow:0 10px 30px -22px rgba(0,0,0,.9);
}
@supports not (backdrop-filter:blur(2px)){
  .site-header:not(.is-home)::before{background:rgba(0,0,0,.94)}
}

/* The wordmark reads as a label beside the mark, not a second headline.
   The question marks carry the accent — the punctuation is the identity. */
.brand .wordmark{
  font-family:Oswald,sans-serif;font-weight:500;
  font-size:14px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);line-height:1;
}
.brand .wordmark .q{color:var(--gold)}
.brand:hover .wordmark{color:var(--paper)}
.brand .wordmark{transition:color .25s ease}
@media(max-width:460px){.brand .wordmark{font-size:12px;letter-spacing:.13em}}

/* The compact mark cross-fades upward instead of sliding in from the side. */
.site-header.is-home .brand{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(6px)}
.brand{transition:opacity .42s ease,transform .42s cubic-bezier(.22,1,.36,1),visibility .42s}

/* The owl is a square image; the old landscape box cropped a quarter of it. */
.brand img{width:30px;height:30px;object-fit:contain;object-position:center}
footer img{width:54px;height:54px;object-fit:contain;object-position:center}

/* ---------------------------- footer ---------------------------- */
/* The pattern is a fixed layer behind everything, so the footer needs its own
   opaque background or it reads straight through. The bar itself is full width
   and an inner wrapper carries the old max-width — putting the background on
   the footer alone would leave the pattern showing either side of it on wide
   screens, since the element is capped at 1280px. */
footer{
  max-width:none;width:100%;padding:0;display:block;
  background:#000;
}
.footer-inner{
  max-width:1280px;margin:auto;
  padding:40px clamp(24px,7vw,96px);
  display:flex;align-items:center;gap:20px;
  color:var(--muted);
}
/* The email pushes right. This selector has to move with the wrapper: the
   original `footer > a` no longer matches now that the link is a level deeper. */
.footer-inner > a{margin-left:auto}

@media(max-width:820px){
  .footer-inner{align-items:flex-start;flex-wrap:wrap;row-gap:14px}
  .footer-inner > a{margin-left:0;width:100%}
  .footer-inner .social{margin-left:auto}
}

/* ============ nav indicator: square, to match every other button ============ */
.nav-indicator{
  border-radius:0;
  box-shadow:0 0 0 1px rgba(214,204,115,.35),0 6px 20px -6px rgba(214,204,115,.55);
}
nav a{border-radius:0}

/* ================= mobile menu: full-screen overlay ================= */
@media(max-width:960px){
  .site-header nav{
    position:fixed;inset:0;z-index:11;
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;
    margin:0;padding:88px 24px 48px;width:100%;
    background:rgba(4,4,4,.94);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border:0;overflow-y:auto;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .32s ease,visibility .32s;
  }
  .site-header nav.open{display:flex;opacity:1;visibility:visible;pointer-events:auto}

  nav a,nav a:hover,nav a.active{
    color:var(--paper)!important;background:transparent!important;border:0!important;
    font-size:clamp(30px,8vw,40px);padding:14px 18px;text-align:center;width:auto;
    border-radius:0;
  }
  nav a.active{color:var(--gold)!important;padding-left:18px}
  nav a:active{background:rgba(214,204,115,.12)!important}

  /* Links arrive one after another once the overlay is up. */
  .site-header nav.open a{animation:menu-item-in .42s cubic-bezier(.22,1,.36,1) both}
  .site-header nav.open a:nth-child(2){animation-delay:.06s}
  .site-header nav.open a:nth-child(3){animation-delay:.12s}
  .site-header nav.open a:nth-child(4){animation-delay:.18s}
  .site-header nav.open a:nth-child(5){animation-delay:.24s}
  .site-header nav.open a:nth-child(6){animation-delay:.30s}

  /* The toggle doubles as the close control, so it stays above the overlay.
     The club name rides above it too, giving the overlay a proper header. */
  .menu-toggle{position:relative;z-index:13}
  .site-header.menu-open{border-bottom-color:transparent;box-shadow:none}
  .site-header.menu-open .brand{position:relative;z-index:13;opacity:1;visibility:visible;transform:none;pointer-events:auto}
  body.nav-open{overflow:hidden}
}

@keyframes menu-item-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .site-header nav.open a{animation:none}
}