:root {
  --blue: #0000FF;
  --white: #FFFFFF;
  --pink: #FF00FF;
  --cyan: #00FFFF;
  --yellow: #FF0000;
  --green: #00FF00;
  --red: #FF0000;
  --dark-red: #800000;
  --dark-blue: #000080;
  --grey: #808080;
  --dark-grey: #363636;

  /* Windows 98 UI Colors */
  --win98-bg: #c0c0c0;
  --win98-light: #ffffff;
  --win98-inner-light: #dfdfdf;
  --win98-shadow: #808080;
  --win98-dark: #000000;
}

@font-face {
  font-family: "Apple Garamond Light";
  src: url("/fonts/AppleGaramond-Light.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  height: 100dvh;
  width: 100%;
  overflow: hidden; /* Prevents global page scroll */
}

/* ─── MASTER GRID FRAME LAYOUT ─── */
body.frame-layout {
  background-color: var(--white);
  background-repeat: repeat;
  color: var(--white);
  font-family: "Apple Garamond Light", Times, serif;
  font-size: 16px;
  line-height: 1.5;
  width: 100vw;
  margin: 0;

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "rtop"
    "rbottom";
}

a {
  text-decoration: none;
}

/* ─── FRAME 1: TOP HEADER ("rtop") ───
   Grid with two equal 1fr side tracks (left one empty) truly centers the
   title on the page regardless of the nav's width, while the nav sits in
   its own column on the right, vertically centered via align-items. Both
   the title and the nav pill are sized in em relative to THIS element's
   font-size (the clamp() below), so they scale together as one unit. On
   narrow screens the title just wraps onto a second line — no special
   handling needed, since it's in its own grid column and the nav stays
   put in column 3 either way. */
.frame-rtop {
  grid-area: rtop;
  display: grid;
  grid-template-columns: 1fr minmax(0, auto) 1fr;
  align-items: center;
  gap: 8px 20px;
  padding: 14px 20px;
  z-index: 10;
  position: relative;
  min-width: 0;

  font-family: "Apple Garamond Light", Times, serif;
  /* The 2.5rem floor is the title's minimum size on the smallest
     phones — kept well above the nav pill's own floor (see .feed_nav a)
     so the title stays visibly taller than the pill even at the
     narrowest widths. */
  font-size: clamp(2.5rem, calc(2px + 4vw), 3.125rem);

  border-bottom: 6px solid transparent;
}

.frame-rtop::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 6px;
  background: linear-gradient(
    to bottom,
    var(--win98-light) 0%, var(--win98-light) 16.6%,
    var(--win98-bg) 16.6%, var(--win98-bg) 66.6%,
    var(--win98-shadow) 66.6%, var(--win98-shadow) 83.3%,
    var(--win98-dark) 83.3%, var(--win98-dark) 100%
  );
}

/* ─── FRAME 2: MAIN CONTENT AREA ("rbottom") ─── */
.frame-rbottom {
  grid-area: rbottom;
  overflow-y: auto;
  min-width: 0;
  min-height: 0;
}

/* ─── FRAME DIVIDER: RIGHT NAV ("vdiv") ─── */
.frame-vdiv {
  display: none;
}

/* ─── NAVIGATION: its own grid column on the right, vertically centered
   with the title via .frame-rtop's align-items. Its own font-size/padding
   are in em so they track the header's clamp() along with the title. ─── */
.frame-nav.feed_nav {
  grid-column: 3;
  justify-self: end;
  flex-shrink: 0;
}

.feed_nav-inner {
  display: flex;
  gap: 0;
  padding: 0;
  text-align: left;
  font-family: "Apple Garamond Light", Times, serif;
}

.feed_nav a {
  display: inline-block;
  font-family: "Apple Garamond Light", Times, serif;
  /* Tracks the header's scale like before, but floored so it never gets
     smaller than 1rem (~16px) — below that the pill gets hard to
     read even though it'd otherwise keep shrinking in step with the
     title. */
  font-size: clamp(1rem, 0.26em, 1.1rem);
  text-transform: uppercase;
  background: #ffffff;
  color: #001e10;
  border: 1px solid #001e10;
  padding: 0.31em 0.77em; /* relative to THIS element's own (already-scaled) font-size, matching the original 4px/13px and 10px/13px ratios */
  text-decoration: none;
  cursor: pointer;
}

.feed_nav a + a {
  margin-left: -1px;
}

.feed_nav a:hover {
  background: #00F48A;
  color: #001e10;
}

.feed_nav a.select {
  background: #001e10;
  color: #00F48A;
}

/* ─── PAGES ─── */
.page {
  display: none;
  min-height: auto;
}

.page.active {
  display: block;
}

html.no-js .page:target {
  display: block !important;
}

/* ─── CONTENT CONTAINER ─── */
#content_container {
  padding: 30px 20px 0 20px;
  position: relative;
  z-index: 10;
}

.entry {
  clear: both;
}

.project_content {
  color: black;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.project_content img,
.project_content video {
  float: none !important;
  display: block;
  position: relative;
  margin: 0 auto 15px auto;
  max-width: 100%;
  height: auto;
}

.project_content .entry-title {
  text-transform: uppercase;
  font-size: 1.4em;
  margin: 0 0 15px 0;
  text-align: center;
}

.project_content .caption {
  margin: 15px 0 10px 0;
  padding-top: 15px;
  text-align: center;
  white-space: pre-line;
}

.project_content .meta {
  font-size: 12px;
  color: var(--dark-grey);
}

.project_content .tags {
  font-size: 12px;
  color: var(--grey);
  margin-top: 4px;
}

.project_content .reblog-note {
  font-size: 12px;
  font-style: italic;
  color: var(--pink);
}

.project_bottom {
  clear: both;
  margin: 10px 0 60px 0;
}

/* ─── FOOTER ─── */
#site_footer {
  clear: both;
  color: #000000;
  padding: 15px 0 30px 0;
  font-size: 14px;
  text-align: center;
}

/* ─── BLINK ANIMATIONS ─── */
.blink-link {
  animation: blink 0.2s infinite;
  display: inline-block;
  will-change: opacity;
}

.blink-arrows {
  animation: blink 0.6s infinite;
  display: inline-block;
  font-family: "Lucida Console", Monaco, monospace;
  font-size: 14px;
  will-change: opacity;
}

@keyframes blink {
  0%, 15%  { opacity: 0; }
  16%, 100% { opacity: 1; }
}

/* ─── LIGHTBOX (full-size image viewer) ─── */
.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(3, 194, 113, 0.227);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
  cursor: zoom-out;
}

.lightbox-overlay.active {
  display: flex;
}

.lightbox-overlay img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: default;
}

/* ─── INDEX PAGE ─── */
#index {
  padding: 30px 20px 0 20px;
}

.index {
  margin: 20px 0 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.index .module {
  position: relative;
  text-align: center;
}

/* ─── FEED IMAGE FRAMES ─── */


.feedimg-frame img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 !important;
  cursor: zoom-in;
}

.feedimg-frame + .feedimg-frame {
  margin-top: 8px;
}

.cardimgcrop {
  margin: 0 0 12px 0;
  position: relative;
  width: 200px;
  height: 150px;
  overflow: hidden;
  transform: translate(0, 0);
}

.cardimgcrop:hover {
  transform: translate(3px, 3px);
}

.cardimgcrop .crop-inner,
.cardimgcrop .crop-inner a {
  display: block;
  width: 100%;
  height: 100%;
}

.crop-inner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-text-preview {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: #ffffff;
  color: #000000;
  border: 1px solid #000000;
  font-family: "Apple Garamond Light", Times, serif;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  overflow: hidden;
  box-sizing: border-box;
}

.thumb_title {
  overflow: hidden;
  padding-top: 2px;
  white-space: nowrap;
  text-align: center;
  width: 200px;
  font-size: 14px;
  line-height: 15px;
}

.thumb_title a {
  background: #001e10;
  color: #00F48A;
  font-size: 14px;
  line-height: 15px;
  padding: 0 10px;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: none;
  text-transform: uppercase;
}

.thumb_title a:hover {
  background: #00F48A;
  color: #001e10;
}

.marquee-container {
  grid-column: 2;
  overflow: hidden;
  min-width: 0;
  color: #000000;
  text-align: center;
  padding: 6px 0;
  /* No font-size here anymore — it inherits directly from .frame-rtop's
     clamp(), which is the single source of truth both the title and the
     nav pill (in em, see .feed_nav a) scale from together. */
  line-height: 1.2;
}

.marquee-content {
  display: block;
}

.site-title-link {
  color: inherit;
  cursor: pointer;
}

/* Two versions of the title live in the HTML; this just toggles which
   one is visible. Swap the max-width here (and the wording in
   index.html) to whatever fits — 600px is a guess at where the full
   title starts feeling too long for a phone. */
.site-title-link .site-title-short {
  display: none;
}

@media (max-width: 600px) {
  .site-title-link .site-title-full {
    display: none;
  }
  .site-title-link .site-title-short {
    display: inline;
  }
}

/* Same pattern as the title above: full intro on desktop, a shorter
   version on mobile. Kept at the same 600px breakpoint so both switch
   together. */
.intro-short {
  display: none;
}

@media (max-width: 600px) {
  .intro-full {
    display: none;
  }
  .intro-short {
    display: inline;
  }
}

/* ─── RESPONSIVE MOBILE VIEW ─── */
@media (max-width: 768px) {
  .frame-rtop {
    padding: 12px 16px;
  }

  .feed_nav a {
    /* font-size/padding intentionally not overridden here anymore —
       they're in em relative to .frame-rtop's clamp(), so they already
       scale down in step with the title at this width. */
  }

  #content_container,
  #index {
    padding: 18px 14px 0 14px;
  }

  .project_content {
    padding: 0 4px;
  }

  /* Index grid: fixed 200px cards only fit one per row on a phone.
     Switch each card to a fraction of the row width instead, with
     aspect-ratio standing in for the old fixed 150px height. */
  .index {
    gap: 12px;
  }

  .index .module {
    width: calc(50% - 6px);
  }

  .cardimgcrop {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .thumb_title {
    width: 100%;
  }

  .card-text-preview {
    font-size: 12px;
    padding: 8px;
  }
}

/* Very small phones: two columns gets cramped, so drop to one. */
@media (max-width: 420px) {
  .index .module {
    width: 100%;
  }

  .cardimgcrop {
    aspect-ratio: 16 / 10;
  }
}