/* ============================================================
   Mystery Mode — shared site stylesheet
   Loaded by every page. Holds the color palette, base reset,
   and the standardized site header/nav. Page-specific look
   (paper, terminal, board, etc.) stays in that page's own
   <style> block and is loaded after this file, so it can
   override colors here (e.g. logo/nav color on dark pages).

   *** IMPORTANT ***
   The navigation font is "locked" with !important (see the big
   comment block below labeled "DO NOT LET PAGES OVERRIDE THIS
   FONT"). That means even if a page has its own <style> block
   that tries to set a different nav font, THIS file wins. If
   you ever want a specific page's nav to look different on
   purpose, you'll need to remove !important here — but then
   you're back to the "fonts don't match" problem, so it's not
   recommended.

   *** FONT NOTE ***
   This stylesheet uses "Montserrat" for both the logo and the
   nav. For that to actually load (instead of silently falling
   back to a system sans-serif font), EVERY page's <head> needs
   this line:

   <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@800;900&amp;display=swap" rel="stylesheet" />

   If a page is missing that line, its logo/nav will look
   different even though this CSS file is correct.

   *** VALIDATOR WARNING NOTE ***
   If you run this through an older CSS validator (like the
   classic W3C one), you may see errors like:
     "Expected (<color>) but found 'var(--black)'"
   This is the validator being outdated, NOT a real bug. CSS
   variables (var(--name)) have been standard and supported in
   every browser since ~2017. Every browser will render this
   correctly. Safe to ignore.
   ============================================================ */

:root {
  /* ---- COLOR PALETTE ----
     Change a color here and it updates everywhere on the site
     that uses var(--name). This is the only place you should
     ever need to edit a color. */
  --yellow: #fff000;
  --black: #050505;
  --pink: #ff4f8b;
  --teal: #00c8b8;
  --cream: #fff7d6;
}

* {
  /* Makes padding/border included in element width everywhere,
     so layouts don't mysteriously get wider than expected. */
  box-sizing: border-box;
}

/* ============================================================
   STANDARDIZED SITE HEADER & NAV
   This is the row at the top of every page: the "Mystery Mode"
   logo on the left, and the nav links (Home / Case Files /
   Showcase / etc.) on the right.
   ============================================================ */

.site-header {
  /* Lays out the logo and nav side-by-side, wrapping on small
     screens. You probably don't need to touch this.
     NOTE: padding used to be one shorthand line using clamp()
     for each side. Some CSS validators can't parse clamp()
     inside shorthand padding, so it's split into 4 separate
     longhand lines below (top/right/bottom/left) — same result,
     just validator-friendly. */
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
  padding-top: clamp(1rem, 3vw, 2rem);
  padding-right: clamp(1rem, 4vw, 3rem);
  padding-bottom: 0;
  padding-left: clamp(1rem, 4vw, 3rem);
  text-transform: uppercase;
}

.logo {
  /* This is the big "Mystery Mode" wordmark, top-left.
     Styled to match the poster artwork: solid black fill with
     a clean pink outline. Outline is built from 16 offset
     text-shadows arranged in a circle (rather than just 8, and
     rather than -webkit-text-stroke) — more copies = a rounder,
     smoother-looking outline with less visible faceting at
     letter corners, and no bleed artifacts. */
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: clamp(1.6rem, 4vw, 3.2rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--black);
  transform: skewY(-6deg);
  text-shadow:
     0.08em      0          0 var(--pink),
     0.0739em    0.0306em   0 var(--pink),
     0.0566em    0.0566em   0 var(--pink),
     0.0306em    0.0739em   0 var(--pink),
     0           0.08em     0 var(--pink),
    -0.0306em    0.0739em   0 var(--pink),
    -0.0566em    0.0566em   0 var(--pink),
    -0.0739em    0.0306em   0 var(--pink),
    -0.08em      0          0 var(--pink),
    -0.0739em   -0.0306em   0 var(--pink),
    -0.0566em   -0.0566em   0 var(--pink),
    -0.0306em   -0.0739em   0 var(--pink),
     0          -0.08em     0 var(--pink),
     0.0306em   -0.0739em   0 var(--pink),
     0.0566em   -0.0566em   0 var(--pink),
     0.0739em   -0.0306em   0 var(--pink);
  text-decoration: none;
  display: inline-block;
  /* padding gives the hover background below some breathing room
     around the text instead of hugging the letters tightly */
  padding: 0.1em 0.2em;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* ---- LOGO HOVER EFFECT ----
   On hover, a solid teal block appears behind the logo text,
   AND the text color flips for contrast against that teal:
     - on light pages, the logo is normally black -> turns yellow
     - on dark/theme-dark pages, the logo is normally yellow -> turns black
   The two rules below handle each case; which one applies
   depends on whether the page's <body> has class="theme-dark". */
.logo:hover,
.logo:focus-visible {
  background-color: var(--teal);
  color: var(--yellow);
}

body.theme-dark .logo:hover,
body.theme-dark .logo:focus-visible {
  color: var(--black);
}

/* ---- DARK-THEME LOGO COLOR SWITCH ----
   Some pages (like socials.html) have a dark/black background,
   where a black logo would be invisible. Instead of every dark
   page repeating "color: var(--yellow)" in its own <style>
   block, just add class="theme-dark" to that page's <body> tag,
   e.g.:
       <body class="theme-dark">
   and this rule below will automatically flip the logo to
   yellow. Everything else about the logo (the outline stroke,
   the pink shadow, the skew) stays the same — only the fill
   color changes. */
body.theme-dark .logo {
  color: var(--yellow);
}

.site-nav {
  /* This is the row of nav LINKS (Home, Showcase, etc).
     ----------------------------------------------------
     TO CHANGE THE NAV FONT SITE-WIDE: edit font-family below.
     That's the ONLY line you need to touch to change what font
     the nav uses everywhere on the site. */
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: clamp(1rem, 2vw, 1.5rem);
}

/* ---- DO NOT LET PAGES OVERRIDE THIS FONT ----
   Every individual page (home.html, showcase.html, etc.) may
   have its own <style> block for its "vibe" (paper, terminal,
   IE window...). Those page styles load AFTER this file, so
   normally they'd be able to sneak in a different nav font.
   The !important below stops that: this font-family will ALWAYS
   win for any link inside an element with class "site-nav",
   no matter what any page's own <style> block says.
   If your nav still looks inconsistent after this, it means a
   page is using totally different HTML/classes for its nav
   instead of class="site-nav" — check that page's markup. */
.site-nav,
.site-nav a {
  font-family: "Montserrat", Haettenschweiler, "Arial Narrow Bold", sans-serif !important;
}

.site-nav a {
  /* Individual nav link styling: color + the teal underline. */
  color: var(--black);
  text-decoration: none;
  border-bottom: 0.18em solid var(--teal);
  padding: 0.1em 0.3em;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"] {
  /* Same "teal block" treatment as the logo hover: solid teal
     background, with the text flipped to black so it stays
     readable on top regardless of whether this is a light page
     (link is normally black) or a theme-dark page (link is
     normally cream) — black-on-teal works for both. Underline
     turns pink to stand out against the teal block. */
  background-color: var(--teal);
  color: var(--black);
  border-color: var(--pink);
}

@media (max-width: 700px) {
  /* Mobile layout: stack the logo and nav instead of side-by-side. */
  .site-header {
    display: block;
  }
  .site-nav {
    margin-top: 1rem;
  }
}

/* ============================================================
   WEBRING STRIP
   The row of small 88x31 buttons near the bottom of every page.
   ============================================================ */

.webring {
  /* NOTE: same clamp()-in-shorthand fix as .site-header above —
     padding split into longhand top/right/bottom/left. */
  position: relative;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  padding-top: 1.5rem;
  padding-right: clamp(1rem, 4vw, 3rem);
  padding-bottom: 2rem;
  padding-left: clamp(1rem, 4vw, 3rem);
}

.webring-button {
  /* A single 88x31 webring badge. */
  width: 88px;
  height: 31px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "VT323", "Courier New", monospace;
  font-size: 0.68rem;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--black);
  color: var(--black);
  background: var(--yellow);
  box-shadow: 2px 2px 0 var(--black);
  flex-shrink: 0;
}

a.webring-button:hover,
a.webring-button:focus-visible {
  background: var(--pink);
  color: var(--black);
}

/* ============================================================
   WEBRING STRIP
   The row of small 88x31 buttons near the bottom of every page.
   ============================================================ */

.webring {
  /* NOTE: same clamp()-in-shorthand fix as .site-header above —
     padding split into longhand top/right/bottom/left. */
  position: relative;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  padding-top: 1.5rem;
  padding-right: clamp(1rem, 4vw, 3rem);
  padding-bottom: 2rem;
  padding-left: clamp(1rem, 4vw, 3rem);
}

.webring-button {
  /* A single 88x31 webring badge. */
  width: 88px;
  height: 31px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "VT323", "Courier New", monospace;
  font-size: 0.68rem;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--black);
  color: var(--black);
  background: var(--yellow);
  box-shadow: 2px 2px 0 var(--black);
  flex-shrink: 0;
}

a.webring-button:hover,
a.webring-button:focus-visible {
  background: var(--pink);
  color: var(--black);
}