/* ===================================================================
   SPOOKY MODE — hero lockup treatment for the October guide
   Scoped entirely under .spooky. No markup or class-name changes.
   No palette hexes: everything resolves through --accent / --bg /
   --text / --warm-white so it survives whatever palette lands.

   Wire it up with one line in style.css:
       @import url("spooky.css");
   then put class="spooky" on <body>.

   SCOPE: the center hero lockup only. The top-left nav wordmark is
   deliberately left alone and stays Bungee Shade, so the brand mark
   you see in the corner on every page never changes. That is also
   why there is no nav sizing here: nothing in this file touches
   .topnav-brand.
   =================================================================== */
/* Creepster + Jolly Lodger load from the <link> in index.html, not from an
   @import here: @import is render-blocking and this file is imported
   unconditionally, so the fonts were downloading all year. */

/* -------------------------------------------------------------------
   1. HERO GRADIENT
   Default darkens the top 25% and bottom 30% with flat black. Spooky
   adds a third layer: a soft radial that quiets the middle so the live
   type reads without baking a hard scrim into the JPEG.
   The accent wash is deliberately weak. It tints, it does not color.
   ------------------------------------------------------------------- */
.spooky .letter-board::before {
  background:
    radial-gradient(ellipse 58% 42% at 50% 48%,
      rgba(0,0,0,0.38) 0%, rgba(0,0,0,0.22) 55%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg,
      rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.05) 32%,
      rgba(0,0,0,0.05) 62%, rgba(0,0,0,0.55) 100%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 10%, transparent) 0%,
      transparent 45%);
}

/* Deeper shadow so display faces hold against a busier photo. */
.spooky .board-line {
  text-shadow: 0 3px 18px rgba(0,0,0,0.95), 0 1px 3px rgba(0,0,0,1);
}

/* -------------------------------------------------------------------
   2. THE "NOW SHOWING" LINE
   CSS-only string swap. font-size:0 collapses the markup text, the
   ::before carries the replacement. The DOM still says "Now Showing"
   so screen readers read the original, which is a fair trade for not
   touching index.html.
   ------------------------------------------------------------------- */
.spooky .board-line.small { font-size: 0; }
.spooky .board-line.small::before {
  content: "Now Haunting";
  font-size: 10px;
  letter-spacing: 4px;
  /* alternates: "Open After Dark" · "Now Creeping" · "Screening Till Nov 1" */
}

/* -------------------------------------------------------------------
   3. THE WORDMARK — Creepster, scaled up
   Creepster ships a single weight, 400. There is no bold, so presence
   comes from size rather than weight. Faking weight with
   -webkit-text-stroke fills in the notches and ragged edges that give
   the face its character, so it is deliberately not used here.

   Sized to land ~360px wide, up from Bungee Shade's 219. Text block
   comes to 272px inside the 420px hero. At this size the wordmark sits
   in front of Orlok rather than clear of him, which is intended.
   Going bigger means re-cropping the still, not raising this number.

   HEIGHT LIMIT, measured: the phone block is 192px and .hero-photo is
   max-height 32vh, so the lockup clips below a 600px viewport height.
   Real portrait phones are 667px and up, giving a 213-220px hero, so
   they are clear. Short or landscape windows are not. If that matters,
   shrink the 500px-breakpoint sizes in section 5 rather than touching
   the base CSS.

   text-indent matches letter-spacing to cancel the trailing gap and
   keep the wordmark optically centered, same trick the base CSS uses.
   ------------------------------------------------------------------- */
.spooky .board-line.fab {
  font-family: 'Creepster', cursive;
  font-size: 198px;
  letter-spacing: 19.8px;
  text-indent: 19.8px;
  line-height: 1;
  margin-bottom: 2px;
}

/* -------------------------------------------------------------------
   4. "films around boulder" — Jolly Lodger, lowercase
   The base CSS uppercases every .board-line. Overriding that to
   lowercase is the whole point here: Jolly Lodger's lowercase has
   descenders and varied heights, so the line gets movement that the
   all-caps version does not have. All-caps Jolly Lodger reads as a
   solid block.

   Lowercase is narrower per character, so holding the same 327px
   measure takes 47px where uppercase needed 39px and Outfit 900
   needs 18px. The line ends up 57px tall against Outfit's 23px, which
   is intended: under a 360px Creepster wordmark a short line reads as
   a caption rather than part of the lockup.
   ------------------------------------------------------------------- */
.spooky .board-line.big {
  font-family: 'Jolly Lodger', cursive;
  font-weight: 400;
  text-transform: lowercase;
  font-size: 47px;
  letter-spacing: 2.8px;
}

/* -------------------------------------------------------------------
   5. SMALL SCREENS
   Follows style.css's hero breakpoint of 500, scaled on its own
   ratios (hero 46/64, second line 13/18) and then corrected against
   measured widths rather than derived.
   ------------------------------------------------------------------- */
@media (max-width: 500px) {
  .spooky .board-line.small::before { font-size: 9px; letter-spacing: 3px; }
  .spooky .board-line.fab {
    font-size: 134px; letter-spacing: 13.4px; text-indent: 13.4px;
  }
  .spooky .board-line.big { font-size: 34px; letter-spacing: 2px; }
}