/* ============================================================
   HOLTERMANN'S — base.css
   Shared frontier-terminal aesthetic: amber CRT, VT323, scanlines.
   Design tokens ported verbatim from the mockups — do not restyle.
   ============================================================ */

:root{
  --bg:#0b0806;
  --amber:#f0b26a;
  --amber-bright:#ffd68e;
  --amber-dim:#9a6a37;
  --gold:#ffc94a;
  --deny:#e06a3a;
  --cream:#f4ecd8;
  --rule:#c98a4a;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}

body{
  background:radial-gradient(ellipse at 50% 40%,#17100a 0%,#0b0806 62%,#060403 100%);
  color:var(--amber);
  font-family:'VT323',ui-monospace,'Courier New',monospace;
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 16px;
  letter-spacing:.02em;
  overflow-x:hidden;
}

/* ---- Visually-hidden but screen-reader accessible ---- */
.sr-only{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---- Skip link (a11y) ---- */
.skip-link{
  position:absolute;left:-9999px;top:8px;z-index:20;
  background:var(--amber);color:#0b0806;padding:6px 14px;
  font-size:18px;letter-spacing:.05em;border-radius:4px;text-decoration:none;
}
.skip-link:focus{left:50%;transform:translateX(-50%)}

/* ---- The CRT frame ---- */
.crt{
  position:relative;width:100%;max-width:680px;
  background:linear-gradient(180deg,#0d0906,#0a0705);
  border:2px solid #201409;border-radius:14px;
  box-shadow:0 0 0 3px #17100a,0 0 60px rgba(240,178,106,.10),inset 0 0 120px rgba(0,0,0,.7);
  padding:34px clamp(22px,5vw,50px) 22px;
  text-shadow:0 0 6px rgba(255,190,110,.4);
  overflow:hidden;
}
/* scanlines */
.crt::before{
  content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;z-index:5;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,0,0,.28) 3px,rgba(0,0,0,0) 4px);
  mix-blend-mode:multiply;
}
/* vignette + flicker */
.crt::after{
  content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;z-index:6;
  background:radial-gradient(ellipse at 50% 45%,transparent 55%,rgba(0,0,0,.55) 100%);
  animation:flicker 5s infinite steps(60);
}
@keyframes flicker{0%,100%{opacity:.86}47%{opacity:.9}48%{opacity:.78}}

/* ---- Brand crest ---- */
.crest{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  column-gap:clamp(8px,3vw,30px);margin:26px 0 18px;
}
.brandblock{display:flex;flex-direction:column;align-items:center;gap:10px}
.mark{display:block;width:min(60%,290px);height:auto}
.horse{line-height:0;justify-self:start;color:var(--amber);
  filter:drop-shadow(0 0 3px rgba(240,178,106,.5))}
.horse img{height:clamp(22px,5.25vw,39px);width:auto;display:block}
.horse.flip{transform:scaleX(-1)}
.still{line-height:0;justify-self:end;color:var(--amber);
  filter:drop-shadow(0 0 3px rgba(240,178,106,.5))}
.still img{height:clamp(34px,8vw,58px);width:auto;display:block}
.still.flip{transform:scaleX(-1)}
.kicker{text-align:center;color:var(--amber-dim);font-size:clamp(13px,2.4vw,16px);
  letter-spacing:.2em;text-transform:uppercase;margin:0}

/* ---- Shared buttons ---- */
.btn{
  background:var(--amber);color:#0b0806;border:none;
  font-family:inherit;letter-spacing:.06em;cursor:pointer;text-shadow:none;
  font-size:clamp(18px,3vw,22px);padding:6px 26px;
}
.btn:hover{background:var(--amber-bright)}
.btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* ---- Shared inputs ---- */
.field{
  background:transparent;border:none;border-bottom:2px solid var(--amber);
  color:var(--amber-bright);font-family:inherit;padding:2px 4px;outline:none;
}
.field:focus{border-bottom-color:var(--gold)}
.field::placeholder{color:#5c4020;text-shadow:none}

/* Global keyboard focus ring */
a:focus-visible,button:focus-visible,input:focus-visible,
[tabindex]:focus-visible,.crunchy:focus-visible{
  outline:3px solid var(--gold);outline-offset:3px;border-radius:2px;
}

/* ---- Flourish rule ---- */
.flourish{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--rule);margin:4px 0}
.flourish .bar{height:0;border-top:2px solid var(--rule);flex:1;max-width:34%;box-shadow:0 3px 0 -1px var(--rule)}
.flourish .dia{font-size:15px;color:var(--gold);text-shadow:0 0 8px rgba(255,201,74,.6)}
.flourish .end{font-size:17px;transform:translateY(-2px)}

/* ---- Footer / fineprint ---- */
.footer{text-align:center;color:var(--amber-dim);font-size:clamp(12px,2.1vw,14px);
  letter-spacing:.05em;margin-top:8px;line-height:1.7}
.footer .rd{color:var(--amber)}

@media (prefers-reduced-motion:reduce){
  .crt::after{animation:none}
  *{scroll-behavior:auto !important}
}

/* ============================================================
   Reusable crunchy -> real image component
   Crunchy (low-fi) at rest; crossfade to the clean "real"
   image on hover / focus. Touch: default to real, tap toggles.
   prefers-reduced-motion: instant swap, no crossfade.
   ============================================================ */
.crunchy{
  position:relative;display:inline-block;line-height:0;
  overflow:hidden;cursor:pointer;background:#0a0705;
}
.crunchy__img{
  display:block;width:100%;height:auto;
  transition:opacity .45s ease;
}
.crunchy__img--real{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;
}
/* reveal the real image */
.crunchy:hover .crunchy__img--real,
.crunchy:focus-visible .crunchy__img--real,
.crunchy:focus-within .crunchy__img--real,
.crunchy.is-real .crunchy__img--real{opacity:1}

/* pixel-art product renders should stay crisp when scaled */
.crunchy--pixel .crunchy__img{image-rendering:pixelated}

/* Touch devices (no hover): default to the real image up front. */
@media (hover:none){
  .crunchy .crunchy__img--real{opacity:1}
  .crunchy.show-crunchy .crunchy__img--real{opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .crunchy__img{transition:none}
}

a.btn{display:inline-block;text-decoration:none;margin-top:6px}