/* ============================================================
   HOLTERMANN'S — gate.css  ("Stake your claim" age gate)
   ============================================================ */

.gate .crt{max-width:560px;padding:38px clamp(22px,5vw,48px) 24px}

.gate .mark{width:min(80%,360px);margin:0 auto 4px}

.kick{
  text-align:center;color:var(--amber-dim);font-size:clamp(14px,2.5vw,17px);
  letter-spacing:.14em;text-transform:uppercase;margin:10px 0 4px;
  display:flex;gap:10px;align-items:center;justify-content:center;
}
.kick .dia{color:var(--gold)}

.gate .body{position:relative;z-index:2;padding-top:14px}
.gate h1{
  color:var(--amber-bright);font-size:clamp(24px,5.4vw,34px);text-align:center;
  letter-spacing:.02em;margin-bottom:6px;font-weight:normal;
}
.lede{
  text-align:center;color:var(--amber);font-size:clamp(17px,3vw,21px);
  max-width:34ch;margin:0 auto 20px;line-height:1.3;
}

.entry{display:flex;justify-content:center;margin:6px 0}
.entry input{
  background:transparent;border:none;border-bottom:2px solid var(--amber);
  color:var(--amber-bright);font-family:inherit;
  font-size:clamp(38px,9vw,56px);text-align:center;width:4.4em;padding:2px 0;outline:none;
  letter-spacing:.1em;text-shadow:0 0 8px rgba(255,190,110,.5);
}
.entry input:focus{border-bottom-color:var(--gold);box-shadow:0 3px 0 -1px var(--gold)}
.entry input::placeholder{color:#5c4020;text-shadow:none}

.signrow{text-align:center;margin-top:22px}
.sign{
  background:var(--amber);color:#0b0806;border:none;font-family:inherit;
  letter-spacing:.06em;font-size:clamp(20px,3.6vw,24px);padding:6px 30px;
  cursor:pointer;text-shadow:none;
}
.sign:hover{background:var(--amber-bright)}
.sign:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* flat, quiet confirmation — the payoff */
.msg{text-align:center;min-height:1.4em;margin-top:18px;font-size:clamp(18px,3vw,22px)}
.msg.err{color:var(--deny)}
.msg.ok{color:var(--gold);text-shadow:0 0 10px rgba(255,201,74,.4)}

/* trotting horse trail */
.trail{position:relative;height:44px;margin-top:18px;border-top:2px dotted var(--amber-dim);overflow:hidden}
#trotter{position:absolute;bottom:4px;left:-60px;animation:trot 9s linear infinite;
  color:var(--amber);filter:drop-shadow(0 0 3px rgba(240,178,106,.5))}
#trotter img{height:30px;width:auto;display:block}
#trotter .bob{animation:bob .5s steps(2) infinite}
@keyframes trot{0%{transform:translateX(-40px)}100%{transform:translateX(calc(100vw + 80px))}}
@keyframes bob{50%{transform:translateY(-2px)}}

.fineprint{
  text-align:center;color:var(--amber-dim);font-size:clamp(13px,2.1vw,15px);
  letter-spacing:.05em;margin-top:8px;line-height:1.6;
}
.fineprint .rd{color:var(--amber)}

@media (prefers-reduced-motion:reduce){
  #trotter,#trotter .bob{animation:none}
}

/* no-JS fallback message */
.noscript-msg{color:var(--amber)}
.noscript-msg a{color:var(--gold)}