/* ==========================================================================
   lvboardwalk.com - Boardwalk Hotel & Casino memorial
   Design derived from the property's own signage: the white coaster lattice,
   dark-red channel letters, the smokestack price pylon, chasing-bulb raceways,
   gilt-framed price posters, the striped cupola, Jocko's mint-and-brick paint,
   and the 1996 website's tilted-postcard chrome. Palette sampled from the
   Highsmith night photographs, the billy kerr closure set, and the 2002 UNLV
   Neon Survey. No frameworks, no CDNs, no trackers. Everything self-hosted.
   ========================================================================== */

/* ---- fonts (self-hosted, subset; ¢ included) ---------------------------- */
@font-face { font-family: "Alfa Slab One"; src: url("../fonts/alfa-slab-one-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Sancreek"; src: url("../fonts/sancreek-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Grand Hotel"; src: url("../fonts/grand-hotel-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Oswald"; src: url("../fonts/oswald-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("../fonts/public-sans-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("../fonts/public-sans-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("../fonts/public-sans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("../fonts/public-sans-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
/* fascia-sign faces (index wall, adopted July 2026): the sign shop's kit per
   the owner's close-ups - ONE ultra-bold geometric sans for every price/claim
   line, plus one themed face per venue wordmark. Free OFL stand-ins; the
   property-wide mapping is banked in facts/sign-typography.md. */
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("../fonts/cinzel-900.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Cinzel Decorative"; src: url("../fonts/cinzel-decorative-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../fonts/eb-garamond-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../fonts/eb-garamond-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Chicle"; src: url("../fonts/chicle.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* ---- tokens -------------------------------------------------------------- */
:root {
  /* night field & day paint */
  --night: #14121a;        /* black sky behind the neon */
  --night-2: #1d1622;      /* warm night (carnival era) */
  --paper: #f5eedd;        /* cream stucco / postcard stock */
  --paper-2: #efe5d1;      /* aged paper */
  --ink: #27211d;          /* body text on paper */
  --ink-soft: #5c5348;

  /* signage */
  --brick: #8e2323;        /* day channel letters */
  --neon: #ff4b21;         /* night red-orange neon */
  --bulb: #f6bd4a;         /* amber incandescent */
  --bulb-dim: #c89344;
  --mint: #a9d8c6;         /* Jocko's collar, fascia panels */
  --pink: #e9b7c9;         /* storefront pink */
  --plum: #5c4450;         /* pylon field */
  --teal: #2c7873;         /* clock ring, trim */
  --sea: #1d5f8c;          /* Surf Buffet wave */
  --script-green: #3fa66a; /* Holiday Inn script */
  --cream-dim: #d8d2c4;    /* text on night */

  --display: "Alfa Slab One", "Rockwell", serif;
  --carnival: "Sancreek", "Alfa Slab One", serif;
  --script: "Grand Hotel", cursive;
  --marquee: "Oswald", "Arial Narrow", sans-serif;
  --body: "Public Sans", "Segoe UI", sans-serif;

  --measure: 64ch;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  /* incandescent bulbs, drawn as layered radial gradients.
     raceway set: three luminance phases, one per background layer,
     composed on a 66px tile (3 × 22px pitch); -on carries a white-hot
     core, amber body, and a faint baked halo ring. */
  --bulb-on: radial-gradient(circle, #fff7e2 0 1.7px, var(--bulb) 2.9px 3.7px, rgba(246, 189, 74, 0.45) 4.8px, rgba(246, 189, 74, 0.1) 6.6px, rgba(246, 189, 74, 0.2) 7.6px, rgba(246, 189, 74, 0) 9px);
  --bulb-fade: radial-gradient(circle, #eec272 0 1px, var(--bulb-dim) 2.1px 3.3px, rgba(200, 147, 68, 0.3) 4.4px, rgba(200, 147, 68, 0) 5.8px);
  --bulb-off: radial-gradient(circle at 50% 42%, #4a3826 0 1.2px, #332619 2.5px 3.1px, rgba(20, 14, 9, 0.8) 3.6px, rgba(20, 14, 9, 0) 4.2px);
  /* cabinet-ring set: smaller bulbs that fit the 11px mask band */
  --bulb-on-sm: radial-gradient(circle, #fff7e2 0 1.3px, var(--bulb) 2.3px 3.2px, rgba(246, 189, 74, 0.38) 4.2px, rgba(246, 189, 74, 0) 5.5px);
  --bulb-off-sm: radial-gradient(circle, #45341f 0 2.4px, rgba(24, 17, 11, 0.85) 3px, rgba(24, 17, 11, 0) 3.7px);
  --shadow: 0 10px 24px rgba(24, 16, 12, 0.18);
}

/* ---- reset-ish ------------------------------------------------------------
   NOTE: no global scroll-behavior:smooth - it fights long-page anchor jumps. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
}
img { max-width: 100%; display: block; }
h1, h2, h3 { line-height: 1.12; margin: 0 0 0.6em; font-family: var(--display); font-weight: 400; letter-spacing: 0.01em; }
p, ul { margin: 0 0 1em; }
a { color: var(--brick); text-decoration-color: rgba(142, 35, 35, 0.45); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--bulb); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--bulb); color: var(--night); }

/* ---- memorial ribbon (mandatory, every page) ----------------------------- */
.ribbon {
  margin: 0;
  padding: 0.5rem var(--gutter);
  background: #4a1717;
  color: #f3e6d0;
  font-size: 0.86rem;
  text-align: center;
  letter-spacing: 0.02em;
}
.ribbon b { color: #ffd9a0; }

/* ---- masthead: the pylon top --------------------------------------------- */
.masthead {
  background: var(--night);
  color: var(--cream-dim);
  text-align: center;
  padding: 2.1rem var(--gutter) 0;
  position: relative;
}
.mast-kicker {
  font-family: var(--carnival);
  color: var(--bulb);
  font-size: clamp(0.95rem, 2.4vw, 1.25rem);
  letter-spacing: 0.08em;
  margin: 0 0 0.3rem;
}
/* The wordmark is the casino's own logo lettering - Hobo with the official
   red→yellow gradient (sampled from the 2002 web logo), inlined as SVG
   outlines in the masthead partial. No font file is served for it. */
.wordmark {
  display: block;
  width: min(88vw, 30rem);
  margin: 0 auto;
  line-height: 0;
}
.wordmark-logo { display: block; width: 100%; height: auto; }
.wordmark:hover .wordmark-logo { filter: brightness(1.08) saturate(1.05); }
.subline {
  font-family: var(--marquee);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.8rem;
  color: #a99f8c;
  margin: 0.55rem 0 1.1rem;
}
.nav {
  list-style: none;
  margin: 0;
  padding: 0.8rem 0 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1.6rem;
  border-top: 1px solid rgba(246, 189, 74, 0.25);
}
.nav a {
  font-family: var(--marquee);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.92rem;
  color: var(--cream-dim);
  text-decoration: none;
  padding: 0.15rem 0.1rem;
  border-bottom: 3px solid transparent;
}
.nav a:hover { color: var(--bulb); }
.nav a[aria-current="page"] {
  color: var(--bulb);
  border-bottom-color: var(--bulb);
  border-bottom-style: dotted;
}
/* chasing-bulb raceway under the masthead: three luminance phases on a
   66px tile (22px pitch). steps(3) walks the whole stack one pitch per
   step, so each socket runs bright -> dim -> dark and the lit bulb
   appears to travel right at three sockets a second. */
.masthead::after {
  content: "";
  display: block;
  height: 18px;
  margin-top: 0.2rem;
  background-image: var(--bulb-on), var(--bulb-fade), var(--bulb-off);
  background-size: 66px 100%;
  background-position: 22px 50%, 0 50%, 44px 50%;
  background-repeat: repeat-x;
}
@media (prefers-reduced-motion: no-preference) {
  .masthead::after { animation: raceway 1s steps(3) infinite; }
  /* shared with .bulb-divider - identical layer stack and start positions */
  @keyframes raceway { to { background-position: 88px 50%, 66px 50%, 110px 50%; } }
}