/*! funkyF styles — generated by build.mjs. Do not edit dist/ by hand. */
/* ===== css/00-tokens.css ===== */
/* ===========================================================================
   funkyF — design tokens
   Web 1.0 palette: saturated accents against grey "system" chrome.
   =========================================================================== */
:root {
  /* System chrome — the grey of old OS dialogs / table borders */
  --chrome-face:      #c0c0c0;
  --chrome-light:     #ffffff;
  --chrome-shadow:    #808080;
  --chrome-dark:      #404040;

  /* Page surfaces */
  --bg-deep:          #000080; /* classic "navy desktop" */
  --bg-tile:          #1a1a40;
  --paper:            #f4f4ec; /* slightly warm off-white "page" */
  --paper-ink:        #1a1a1a;

  /* Saturated 90's accents */
  --hot-pink:         #ff00aa;
  --acid-green:       #39ff14;
  --cyber-cyan:       #00ffff;
  --sunset-orange:    #ff7a00;
  --royal-purple:     #7a00ff;
  --link-blue:        #0000ee;
  --link-visited:     #551a8b;

  /* Typography */
  --font-pixel:       "Press Start 2P", "Courier New", monospace;
  --font-body:        Verdana, Geneva, Tahoma, sans-serif;
  --font-mono:        "Courier New", Courier, monospace;
  --font-display:     "Times New Roman", Times, Georgia, serif;

  /* Bevel widths */
  --bevel:            2px;

  /* Layout */
  --content-max:      900px;
}

/* ===== css/10-base.css ===== */
/* ===========================================================================
   Base / reset — light touch on top of Bootstrap's reboot
   =========================================================================== */
html {
  /* tiled starfield-ish backdrop drawn in CSS so there's no external image dep */
  background-color: var(--bg-deep);
  background-image:
    radial-gradient(1px 1px at 20px 30px, #ffffff 50%, transparent 50%),
    radial-gradient(1px 1px at 80px 120px, #cfcfff 50%, transparent 50%),
    radial-gradient(2px 2px at 160px 60px, #ffffff 50%, transparent 50%),
    radial-gradient(1px 1px at 120px 180px, #aaaaff 50%, transparent 50%);
  background-size: 200px 200px;
  background-repeat: repeat;
}

body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--paper-ink);
  /* keep Bootstrap from forcing a white body bg over our starfield */
  background: transparent;
}

a {
  color: var(--link-blue);
  text-decoration: underline;
}
a:visited { color: var(--link-visited); }
a:hover {
  color: var(--hot-pink);
  background: var(--acid-green);
}

img { max-width: 100%; height: auto; image-rendering: auto; }

hr {
  border: none;
  height: 4px;
  background:
    repeating-linear-gradient(90deg,
      var(--hot-pink) 0 8px,
      var(--cyber-cyan) 8px 16px);
  opacity: 1;
  margin: 1.5rem 0;
}

::selection { background: var(--acid-green); color: #000; }

/* ===== css/20-chrome.css ===== */
/* ===========================================================================
   Beveled "system" chrome — reusable Win95-era bevels
   .bevel-out  -> raised button/panel
   .bevel-in   -> sunken inset (text fields, content wells)
   =========================================================================== */
.bevel-out {
  background: var(--chrome-face);
  border: var(--bevel) solid;
  border-color: var(--chrome-light) var(--chrome-dark) var(--chrome-dark) var(--chrome-light);
  box-shadow: inset 1px 1px 0 0 var(--chrome-face),
              inset -1px -1px 0 0 var(--chrome-shadow);
}

.bevel-in {
  background: var(--paper);
  border: var(--bevel) solid;
  border-color: var(--chrome-dark) var(--chrome-light) var(--chrome-light) var(--chrome-dark);
  box-shadow: inset 1px 1px 0 0 var(--chrome-shadow);
}

/* A title bar like an old window */
.titlebar {
  background: linear-gradient(90deg, var(--royal-purple), var(--hot-pink));
  color: #fff;
  font-family: var(--font-pixel);
  font-size: 11px;
  letter-spacing: 1px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-shadow: 1px 1px 0 #000;
}

.titlebar .titlebar-buttons span {
  display: inline-block;
  width: 16px;
  height: 14px;
  margin-left: 2px;
  text-align: center;
  line-height: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: #000;
}
.titlebar .titlebar-buttons span.bevel-out { padding: 0; }

/* Retro "button" */
.btn-retro {
  display: inline-block;
  padding: 4px 12px;
  font-family: var(--font-body);
  font-size: 13px;
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
.btn-retro:visited { color: #000; }
.btn-retro:hover { background: var(--chrome-face); color: #000; }
.btn-retro:active {
  border-color: var(--chrome-dark) var(--chrome-light) var(--chrome-light) var(--chrome-dark);
}

/* ===== css/30-layout.css ===== */
/* ===========================================================================
   Layout — Bootstrap grid is used in the HTML; here we re-skin the wrappers
   so the structure reads as a 90's table-layout page.
   =========================================================================== */
.page-shell {
  max-width: var(--content-max);
  margin: 12px auto;
  padding: 0;
}

/* The big outer "window" the whole blog lives in */
.window {
  margin-bottom: 16px;
}
.window > .window-body { padding: 12px; }

/* Masthead */
.masthead {
  position: relative;
  text-align: center;
  padding: 18px 12px;
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.4) 0 10px,
      rgba(255,255,255,0.15) 10px 20px),
    linear-gradient(135deg, var(--cyber-cyan), var(--royal-purple));
}

/* Themed Follow button — pinned top-right inside the masthead window.
   {FollowButton} only renders for logged-in visitors who don't already
   follow; the wrapper collapses to nothing when empty so it leaves no gap. */
.masthead .follow-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 0;
  line-height: 0;        /* kill iframe/anchor descender gap */
}
.masthead .follow-btn:empty { display: none; }
/* Tumblr renders {FollowButton} as either an <a> or a tiny <iframe>.
   Re-skin both so they read as a retro beveled button. */
.masthead .follow-btn a,
.masthead .follow-btn iframe {
  display: block;
  border: 0;
}
.masthead .follow-btn a {
  font-family: var(--font-pixel);
  font-size: 10px;
  letter-spacing: 1px;
  color: #000;
  text-decoration: none;
  padding: 6px 12px;
  background: var(--acid-green);
}
.masthead .follow-btn a:hover {
  background: var(--hot-pink);
  color: #fff;
}
.masthead .blog-title {
  font-family: var(--font-pixel);
  font-size: 28px;
  line-height: 1.3;
  color: #fff;
  text-shadow: 3px 3px 0 var(--hot-pink), 5px 5px 0 #000;
  margin: 0;
}
.masthead .blog-title a { color: inherit; text-decoration: none; }
.masthead .blog-title a:hover { background: none; }
.masthead .blog-desc {
  font-family: var(--font-body);
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  margin-top: 8px;
}

/* Widget strip — the counter/clock/readme/links windows in a row below the
   header. It's a Bootstrap .row, so its default negative side gutters would
   push the outer cards past the full-width windows above/below. We zero the
   row's own margin/bottom-gutter and let the 16px gutter live purely between
   cards, so the strip's outer edges line up flush with every other window. */
.widget-strip {
  --bs-gutter-x: 16px;
  --bs-gutter-y: 16px;
  margin-bottom: 16px;
  /* keep Bootstrap's negative side gutters (so outer cards stay flush with
     the full-width windows) but don't let the top negative gutter add slack. */
  margin-top: 0;
}
.widget-strip > [class^="col-"],
.widget-strip > [class*=" col-"] {
  display: flex; /* let .h-100 cards stretch to equal height per row */
}
.widget-strip .widget { margin-bottom: 0; width: 100%; }

/* Main content column — now a plain block child of the container, so its
   posts share the exact left/right edges of the header, nav, and footer. */
.main-content { width: 100%; }

/* Footer */
.site-footer {
  text-align: center;
  padding: 12px;
  font-size: 12px;
  color: #000;
}
.site-footer .webring a { margin: 0 4px; }

/* ===== css/40-nav.css ===== */
/* ===========================================================================
   Navigation + sidebar widgets
   =========================================================================== */
.navbar-retro {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  justify-content: center;
}
.navbar-retro a { text-decoration: none; }

/* Sidebar widget = a small window */
.widget { margin-bottom: 16px; }
.widget .widget-body { padding: 10px; font-size: 13px; }
.widget ul { list-style: none; padding-left: 0; margin: 0; }
.widget li { padding: 2px 0; border-bottom: 1px dotted var(--chrome-shadow); }
.widget li:last-child { border-bottom: none; }

/* "Now playing" / under-construction badges row */
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 8px;
}
.badge-88x31 {
  width: 88px;
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 9px;
  text-align: center;
  color: #000;
  line-height: 1.1;
  padding: 2px;
  text-decoration: none;
}
.badge-88x31:nth-child(3n+1) { background: var(--acid-green); }
.badge-88x31:nth-child(3n+2) { background: var(--cyber-cyan); }
.badge-88x31:nth-child(3n)   { background: var(--sunset-orange); }

/* Visitor counter — odometer look */
.counter {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
}
.counter .digit {
  font-family: var(--font-mono);
  font-weight: bold;
  font-size: 18px;
  background: #000;
  color: var(--acid-green);
  padding: 2px 5px;
  min-width: 16px;
  text-align: center;
  border: 1px solid var(--chrome-shadow);
}

/* ===== css/50-posts.css ===== */
/* ===========================================================================
   Post blocks — each post is its own little window
   =========================================================================== */
.post {
  margin-bottom: 18px;
}
.post .post-body { padding: 12px; }

.post .post-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--chrome-dark);
  padding: 6px 12px;
  border-top: 1px dotted var(--chrome-shadow);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
}
.post .post-meta a { color: var(--royal-purple); }

/* --- Text posts --- */
.post-text .post-title {
  font-family: var(--font-display);
  font-size: 24px;
  margin: 0 0 8px;
  color: var(--royal-purple);
}
.post-text .post-content p { margin-bottom: 0.8em; }

/* --- Photo posts --- */
.post-photo .photo-frame {
  display: block;
  padding: 6px;
  background: var(--chrome-face);
  line-height: 0;
}
.post-photo .photo-frame img { display: block; width: 100%; }
.post-photo .caption {
  line-height: 1.5;
  padding-top: 10px;
  font-size: 13px;
}

/* --- Quote posts --- */
.post-quote blockquote {
  font-family: var(--font-display);
  font-size: 22px;
  font-style: italic;
  color: var(--paper-ink);
  margin: 0;
  padding-left: 36px;
  position: relative;
}
.post-quote blockquote::before {
  content: "\201C";
  font-size: 60px;
  line-height: 1;
  position: absolute;
  left: 0;
  top: -6px;
  color: var(--hot-pink);
}
.post-quote .quote-source {
  text-align: right;
  font-family: var(--font-body);
  font-size: 13px;
  margin-top: 8px;
  color: var(--chrome-dark);
}
.post-quote .quote-source::before { content: "— "; }

/* --- Link posts --- */
.post-link .link-anchor {
  display: block;
  font-family: var(--font-pixel);
  font-size: 14px;
  line-height: 1.5;
  padding: 12px;
  text-decoration: none;
  color: #000;
  background: linear-gradient(90deg, var(--acid-green), var(--cyber-cyan));
}
.post-link .link-anchor::after { content: " \00BB"; }
.post-link .link-anchor:hover { filter: invert(1); }
.post-link .link-desc { padding-top: 10px; font-size: 13px; }

/* --- Tags --- */
.post-tags { margin-top: 6px; }
.post-tags a {
  font-family: var(--font-mono);
  font-size: 11px;
  text-decoration: none;
  color: var(--link-blue);
  margin-right: 8px;
}
.post-tags a::before { content: "#"; color: var(--hot-pink); }

/* --- Notes (likes/reblogs) --- */
.post-notes {
  margin-top: 12px;
  font-size: 12px;
}
.post-notes ol { list-style: none; padding: 0; margin: 0; }
.post-notes li { padding: 2px 0; }

/* ===== css/60-effects.css ===== */
/* ===========================================================================
   Era effects — marquee, blink (used sparingly), under-construction
   Honour prefers-reduced-motion: animations stop, content stays readable.
   =========================================================================== */

/* Hide Tumblr's force-injected controls iframe. This is the dashboard bar
   Tumblr drops top-right for logged-in viewers; it carries both the default
   "Follow" button and the "Join Tumblr" / sign-up button. We provide our own
   themed follow button (see .follow-btn) instead, so suppress Tumblr's.
   !important is required to beat Tumblr's inline styles on the iframe. */
iframe#tumblr_controls,
.tmblr-iframe,
.tmblr-iframe--desktop-logged-in-controls {
  display: none !important;
  visibility: hidden !important;
}

/* Marquee: we drive position with JS (see 30-marquee.js) but provide a
   CSS fallback animation in case JS is disabled. */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  width: 100%;
}
.marquee .marquee-inner {
  display: inline-block;
  padding-left: 100%;
  will-change: transform;
  animation: marquee-scroll 18s linear infinite;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
/* When JS takes over it adds .js-marquee and we disable the CSS animation. */
.marquee.js-marquee .marquee-inner { animation: none; padding-left: 0; }

/* Blink — applied only to elements explicitly marked .blink */
.blink { animation: blink-step 1.2s steps(1) infinite; }
@keyframes blink-step {
  50% { visibility: hidden; }
}

/* Under construction strip */
.under-construction {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-pixel);
  font-size: 11px;
  color: #000;
  padding: 8px;
  background:
    repeating-linear-gradient(45deg,
      #ffd400 0 14px,
      #000 14px 28px);
}
.under-construction span {
  background: var(--paper);
  padding: 4px 8px;
}

@media (prefers-reduced-motion: reduce) {
  .marquee .marquee-inner { animation: none; padding-left: 0; }
  .blink { animation: none; }
}