:root {
      color-scheme: light;
      --ink: #28251f;
      --paper: #fff8dc;
      --cream: #fffdf0;
      --yellow: #f7d96b;
      --gold: #e7ae32;
      --orange: #d97932;
      --pink: #f5a9c2;
      --blue: #a8cbd0;
      --purple: #c5afe8;
      --card: #fffdf0;
      --gallery-mid: #ffedaa;
      --gallery-end: #eab84f;
      --treasure-mid: #f4d9a1;
      --line: rgba(40, 37, 31, .72);
      --pixel-shadow: 5px 5px 0 var(--ink);
    }

    body[data-theme="dark"] {
      color-scheme: dark;
      --ink: #f7edca;
      --paper: #171626;
      --cream: #242238;
      --yellow: #c99d43;
      --gold: #ce8e29;
      --orange: #db8050;
      --pink: #dc8eaa;
      --blue: #80b7c1;
      --purple: #a58acb;
      --card: #242238;
      --gallery-mid: #29233a;
      --gallery-end: #3b2e31;
      --treasure-mid: #2b2532;
      --line: rgba(247, 237, 202, .75);
      --pixel-shadow: 5px 5px 0 #090812;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 120px; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: "Space Grotesk", Arial, sans-serif;
      overflow-x: hidden;
      transition: color .2s ease, background-color .2s ease;
    }
    a { color: inherit; }
    button { font: inherit; }
    ::selection { color: #28251f; background: var(--pink); }

    .page-noise {
      position: fixed;
      inset: 0;
      z-index: 20;
      pointer-events: none;
      opacity: .10;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
    }

    .top-strip {
      min-height: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 4px 12px;
      color: var(--paper);
      background: var(--ink);
      font: 18px/1 "VT323", monospace;
      letter-spacing: .08em;
      text-align: center;
    }

    /* Sticky full-width navigation */
    .site-nav {
      position: sticky;
      top: 0;
      z-index: 100;
      width: 100%;
      min-height: 66px;
      display: flex;
      align-items: stretch;
      justify-content: space-between;
      background: var(--yellow);
      color: #28251f;
      border-bottom: 2px solid #28251f;
      box-shadow: 0 4px 0 rgba(40, 37, 31, .14);
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 22px;
      text-decoration: none;
      font: 25px/1 "VT323", monospace;
      letter-spacing: .035em;
      white-space: nowrap;
    }
    .brand-mark {
      width: 27px;
      height: 27px;
      display: inline-grid;
      place-items: center;
      background: var(--pink);
      border: 2px solid #28251f;
      box-shadow: 3px 3px 0 #28251f;
      font: 19px/1 "VT323", monospace;
    }
    .nav-links {
      display: flex;
      align-items: stretch;
      margin: 0 auto 0 0;
      padding: 0;
      list-style: none;
    }
    .nav-links a {
      min-width: 91px;
      height: 100%;
      display: grid;
      place-items: center;
      padding: 0 15px;
      border-left: 1px solid rgba(40,37,31,.48);
      text-decoration: none;
      text-transform: uppercase;
      font: 22px/1 "VT323", monospace;
      letter-spacing: .06em;
      transition: background .15s ease, transform .15s ease;
    }
    .nav-links a:hover, .nav-links a[aria-current="page"] {
      background: var(--paper);
      box-shadow: inset 0 -5px 0 var(--orange);
    }

    /* Keep the active/hovered navigation link readable in dark mode.
       The selected tab keeps its dark background, so use the light ink color. */
    body[data-theme="dark"] .nav-links a:hover,
    body[data-theme="dark"] .nav-links a[aria-current="page"] {
      color: var(--ink);
    }
    .nav-links a:active { transform: translateY(2px); }
    .nav-tools {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 8px 13px;
      border-left: 1px solid rgba(40,37,31,.48);
    }
    .nav-button {
      min-height: 34px;
      padding: 6px 9px 4px;
      color: #28251f;
      background: #fff8dc;
      border: 2px solid #28251f;
      box-shadow: 3px 3px 0 #28251f;
      cursor: pointer;
      font: 17px/1 "VT323", monospace;
      white-space: nowrap;
      transition: transform .12s ease, box-shadow .12s ease;
    }
    .nav-button:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 #28251f; }
    .nav-button:active { transform: translate(3px, 3px); box-shadow: none; }
    .nav-button:focus-visible, a:focus-visible { outline: 3px dashed var(--orange); outline-offset: 3px; }

    .hero {
      min-height: clamp(500px, 67vw, 720px);
      position: relative;
      display: flex;
      align-items: flex-end;
      isolation: isolate;
      overflow: hidden;
      background-color: #647f75;
      --hero-image: url("images/Bg-01-Diner.png");
      background-image:
        linear-gradient(180deg, rgba(18, 31, 29, .04) 20%, rgba(22, 26, 22, .18) 52%, rgba(22, 25, 19, .88) 100%),
        var(--hero-image);
      background-position: center 48%;
      background-size: cover;
      border-bottom: 2px solid var(--ink);
    }
    /* Retro arrows for switching the hero world screenshots. */
    .hero-arrow {
      position: absolute;
      z-index: 5;
      top: 50%;
      width: 52px;
      height: 66px;
      display: grid;
      place-items: center;
      padding: 0;
      color: #28251f;
      background: var(--yellow);
      border: 2px solid #28251f;
      box-shadow: 4px 4px 0 rgba(0,0,0,.55);
      cursor: pointer;
      transform: translateY(-50%);
      font: 28px/1 "VT323", monospace;
      transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
    }
    .hero-arrow-prev { left: 22px; }
    .hero-arrow-next { right: 22px; }
    .hero-arrow:hover { background: var(--pink); transform: translateY(-50%) scale(1.06); box-shadow: 5px 5px 0 rgba(0,0,0,.6); }
    .hero-arrow:active { transform: translateY(-50%) scale(.96); box-shadow: 2px 2px 0 rgba(0,0,0,.55); }
    .hero-arrow:focus-visible { outline: 3px dashed #fff9dc; outline-offset: 4px; }
    .hero-background-status {
      position: absolute;
      z-index: 4;
      top: 25px;
      left: 5vw;
      padding: 6px 10px 4px;
      color: #fff9dc;
      background: rgba(20, 24, 20, .68);
      border: 1px solid rgba(255,255,255,.75);
      font: 18px/1 "VT323", monospace;
      letter-spacing: .08em;
      text-shadow: 1px 1px 0 #000;
    }

    /* The hero image is set on .hero; no overlay fallback element needed. */
    .hero-copy {
      width: min(1120px, 100%);
      margin: 0 auto;
      padding: 0 6vw 66px;
      color: #fff9dc;
      text-shadow: 2px 3px 0 rgba(0,0,0,.38);
    }
    .eyebrow {
      display: inline-block;
      margin-bottom: 14px;
      padding: 6px 11px 4px;
      color: #28251f;
      background: var(--yellow);
      border: 2px solid #28251f;
      box-shadow: 4px 4px 0 rgba(0,0,0,.4);
      text-shadow: none;
      font: 20px/1 "VT323", monospace;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    h1 {
      max-width: 850px;
      margin: 0;
      font: clamp(64px, 12vw, 150px)/.78 "VT323", monospace;
      font-weight: 400;
      letter-spacing: -.025em;
      text-transform: uppercase;
    }
    .hero-subtitle {
      max-width: 570px;
      margin: 24px 0 0;
      font-size: clamp(15px, 2vw, 19px);
      font-weight: 600;
      line-height: 1.55;
    }
    .hero-stamp {
      position: absolute;
      top: 34px;
      right: 5vw;
      width: 105px;
      height: 105px;
      display: grid;
      place-items: center;
      padding: 12px;
      color: #28251f;
      background: var(--pink);
      border: 2px dashed #28251f;
      border-radius: 50%;
      box-shadow: 4px 5px 0 rgba(0,0,0,.35);
      text-align: center;
      transform: rotate(10deg);
      font: 21px/.9 "VT323", monospace;
      animation: stamp-wiggle 4s ease-in-out infinite;
    }
    @keyframes stamp-wiggle { 0%, 85%, 100% { transform: rotate(10deg); } 90% { transform: rotate(14deg) scale(1.04); } 95% { transform: rotate(7deg); } }

    .ticker {
      padding: 8px 0 6px;
      overflow: hidden;
      color: var(--paper);
      background: var(--ink);
      border-bottom: 2px solid var(--ink);
      font: 22px/1 "VT323", monospace;
      letter-spacing: .08em;
      white-space: nowrap;
    }
    .ticker-track {
      display: flex;
      width: max-content;
      animation: ticker 34s linear infinite;
      will-change: transform;
    }
    .ticker-group {
      display: block;
      flex: 0 0 auto;
      padding-right: 2rem;
      white-space: nowrap;
    }
    @keyframes ticker {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }

    .about-wrap {
      position: relative;
      padding: 85px 22px 75px;
      background: var(--paper);
    }
    .about {
      width: min(940px, 100%);
      margin: 0 auto;
      padding: clamp(24px, 5vw, 52px);
      background: var(--card);
      border: 2px solid var(--ink);
      box-shadow: 9px 9px 0 var(--yellow), 12px 12px 0 var(--ink);
      text-align: center;
    }
    .section-kicker {
      margin: 0 0 8px;
      color: var(--orange);
      font: 22px/1 "VT323", monospace;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    h2 {
      margin: 0 0 20px;
      font: clamp(42px, 7vw, 66px)/.95 "VT323", monospace;
      font-weight: 400;
      text-transform: uppercase;
    }
    .about p:not(.section-kicker) {
      max-width: 710px;
      margin: 0 auto;
      font-size: 16px;
      line-height: 1.8;
    }
    .about p + p { margin-top: 12px; }
    .pixel-divider {
      width: min(360px, 75%);
      height: 10px;
      margin: 28px auto 0;
      background: repeating-linear-gradient(90deg, var(--orange) 0 12px, transparent 12px 18px, var(--gold) 18px 30px, transparent 30px 36px);
    }

    /* yo bien y2k geocities core*/
    .web-fun {
      position: relative;
      padding: 48px 20px 50px;
      background: var(--gallery-end);
    }
    .web-fun-inner {
      width: min(1080px, 100%);
      margin: 0 auto;
      padding: 18px;
      background: var(--cream);
      border: 2px dotted var(--ink);
      box-shadow: 6px 6px 0 var(--ink);
    }
    .fun-heading {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 10px;
      margin: 0 0 16px;
      text-align: center;
      font: 26px/1 "VT323", monospace;
      text-transform: uppercase;
    }
    .fun-heading span { color: var(--orange); }
    .blinkie-row, .stamp-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 10px;
    }
    .blinkie-row img {
      width: 176px;
      height: 62px;
      image-rendering: pixelated;
      object-fit: fill;
      border: 1px solid rgba(40,37,31,.45);
    }
    .fun-separator {
      width: min(550px, 90%);
      height: 3px;
      margin: 22px auto;
      background: repeating-linear-gradient(90deg, var(--pink) 0 10px, transparent 10px 14px, var(--blue) 14px 24px, transparent 24px 28px);
    }
    .stamp-row img {
      width: 120px;
      height: 80px;
      object-fit: contain;
      image-rendering: pixelated;
      filter: drop-shadow(2px 2px 0 rgba(40,37,31,.18));
    }
    .visitor-box {
      width: fit-content;
      margin: 24px auto 2px;
      padding: 9px 15px 8px;
      color: var(--paper);
      background: var(--ink);
      border: 2px ridge var(--gold);
      text-align: center;
      font: 18px/1.15 "VT323", monospace;
      letter-spacing: .06em;
    }
    .visitor-digits {
      display: inline-block;
      min-width: 93px;
      margin-left: 7px;
      padding: 3px 7px 1px;
      color: #ff5757;
      background: #130d12;
      border: 1px inset #aaa;
      font: 22px/1 "VT323", monospace;
      letter-spacing: .12em;
      text-align: center;
      text-shadow: 0 0 5px #f55;
    }
    .visitor-note {
      display: block;
      margin-top: 5px;
      color: var(--pink);
      font: 13px/1.1 "Space Grotesk", sans-serif;
      letter-spacing: 0;
    }

    .gallery-section {
      position: relative;
      padding: 80px 24px 76px;
      background: linear-gradient(180deg, var(--paper) 0%, var(--gallery-mid) 32%, var(--yellow) 68%, var(--gallery-end) 100%);
      border-top: 2px solid var(--ink);
    }
    .gallery-inner { width: min(1120px, 100%); margin: 0 auto; }
    .gallery-heading {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 34px;
    }
    .gallery-heading h2 { margin-bottom: 0; }
    .gallery-note {
      max-width: 220px;
      margin: 0 0 4px;
      font: 20px/1.05 "VT323", monospace;
      text-align: right;
      transform: rotate(-3deg);
    }
    .gallery-grid {
      display: grid;
      grid-template-columns: 1.2fr .8fr 1fr;
      grid-template-rows: 220px 190px;
      gap: 18px;
    }
    .shot {
      position: relative;
      min-height: 160px;
      overflow: hidden;
      background-color: #9bb5a0;
      background-position: center;
      background-size: cover;
      border: 2px solid var(--ink);
      box-shadow: 5px 5px 0 rgba(40,37,31,.85);
      transition: transform .18s ease, box-shadow .18s ease;
    }
    .shot:hover { transform: translate(-2px, -3px) rotate(-.5deg); box-shadow: 8px 8px 0 rgba(40,37,31,.85); }
    .shot-1 { grid-column: span 2; background-image: url("images/g-01-CommunityDistrict.png"); background-color: #91a87b; }
    .shot-2 { background-image: url("images/g-02-GoofingAround.png"); background-color: #b7a2a0; }
    .shot-3 { background-image: url("images/g-03-Valors.png"); background-color: #89aeb0; }
    .shot-4 { background-image: url("images/g-04-ValorGraveyard.png"); background-color: #b6a16e; }
    .shot-5 { background-image: url("images/g-05-VampireHunt.png"); background-color: #829b78; }
    .shot::before {
      content: "✦";
      position: absolute;
      top: 10px;
      right: 13px;
      color: rgba(255,255,255,.9);
      font-size: 24px;
      text-shadow: 1px 2px 3px rgba(0,0,0,.45);
    }
    .shot-label {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      padding: 9px 12px 7px;
      color: #fff9dc;
      background: linear-gradient(transparent, rgba(0,0,0,.72));
      font: 21px/1 "VT323", monospace;
      letter-spacing: .04em;
      text-shadow: 1px 2px 2px #000;
    }
    .gallery-bottom { display: flex; justify-content: center; margin-top: 42px; }
    .retro-link {
      display: inline-block;
      padding: 11px 22px 8px;
      color: var(--paper);
      background: var(--ink);
      border: 2px solid var(--ink);
      box-shadow: 4px 4px 0 var(--orange);
      text-decoration: none;
      text-transform: uppercase;
      font: 23px/1 "VT323", monospace;
      letter-spacing: .06em;
      transition: transform .15s ease, box-shadow .15s ease;
    }
    .retro-link:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--orange); }

    footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 15px;
      min-height: 78px;
      padding: 18px clamp(20px, 6vw, 76px);
      color: var(--paper);
      background: var(--ink);
      font: 21px/1 "VT323", monospace;
      letter-spacing: .06em;
    }
    .footer-heart { color: var(--pink); }
    .back-top { color: var(--yellow); text-decoration: none; }
    .back-top:hover { text-decoration: underline; }
    .footer-gif { width: 150px; height: 30px; object-fit: fill; image-rendering: pixelated; }

    @media (max-width: 1050px) {
      .site-nav { flex-wrap: wrap; }
      .brand { flex: 1 1 auto; }
      .nav-links { margin-left: auto; }
      .nav-tools { flex: 1 1 100%; border-top: 1px solid rgba(40,37,31,.4); border-left: 0; }
    }
    @media (max-width: 760px) {
      .site-nav { flex-direction: column; flex-wrap: nowrap; }
      .brand { justify-content: center; padding: 11px 12px; }
      .nav-links { width: 100%; margin: 0; border-top: 1px solid rgba(40,37,31,.5); }
      .nav-links li { flex: 1; }
      .nav-links a { min-width: 0; padding: 13px 6px 11px; border-left: 0; font-size: 21px; }
      .nav-links li + li a { border-left: 1px solid rgba(40,37,31,.4); }
      .nav-tools { width: 100%; flex: 0 0 auto; padding: 7px 9px 9px; border-top: 1px solid rgba(40,37,31,.4); }
      .nav-button { flex: 1; }
      .hero { min-height: 590px; background-position: center; }
      .hero-arrow { width: 42px; height: 55px; font-size: 25px; }
      .hero-arrow-prev { left: 10px; }
      .hero-arrow-next { right: 10px; }
      .hero-background-status { top: 16px; left: 14px; font-size: 16px; }
      .hero-copy { padding: 0 25px 55px; }
      .hero-stamp { top: 22px; right: 22px; width: 82px; height: 82px; font-size: 18px; }
      .gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 190px 165px 165px; gap: 12px; }
      .shot-1 { grid-column: span 2; }
      .shot-5 { grid-column: span 2; }
      .gallery-heading { align-items: start; flex-direction: column; }
      .gallery-note { text-align: left; }
      footer { flex-direction: column; justify-content: center; text-align: center; }
    }
    @media (max-width: 420px) {
      .top-strip { font-size: 16px; }
      .nav-links a { font-size: 19px; }
      .hero { min-height: 540px; }
      .hero-subtitle { font-size: 14px; }
      .about-wrap { padding: 65px 18px 52px; }
      .web-fun { padding-inline: 14px; }
      .web-fun-inner { padding: 14px 8px; }
      .blinkie-row { gap: 7px; }
      .blinkie-row img { width: 145px; height: 51px; }
      .gallery-section { padding: 65px 18px 78px; }
      .gallery-grid { grid-template-rows: 165px 145px 145px; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .ticker-track, .hero-stamp { animation: none; }
      .hero-arrow { transition: none; }
      *, *::before, *::after { transition-duration: .01ms !important; }
    }