/* ---------- Reset ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ---------- Base ---------- */
body {
  background-color: black;
  color: #b3b8c3;
  font-family: "Lucida Grande", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  overflow: hidden;

  /* Background image */
  background-image: url("images/home-background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


/* ---------- Window (container) ---------- */
.window {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 100vh;
}

.window img {
  max-width: 80%;
  max-height: 80%;
  border: none;
}


/* ---------- Window panel (overlay) ---------- */
.window-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* OS X white @ 85% */
  background: rgba(255, 255, 255, 0.85);

  border-radius: 10px;
  overflow: hidden; /* ensures titlebar corners clip correctly */

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 10px 26px rgba(0,0,0,0.45);

  text-align: center; /* keeps nav centered */
}

.window-panel--floating-left {
  width: 300px;

  top: calc(50% - 260px);
  left: 50%;
  margin-left: -340px;  /* shift left of center */

  z-index: 3;
}

.window-panel--floating-right {
  width: 300px;

  top: calc(50% - 260px);
  left: 50%;
  margin-left: 40px;    /* shift right of center */

  z-index: 3;
}


.window-content {
  padding: 18px 20px 20px 20px;
}

/* ---------- Titlebar (Aqua-era grey gradient) ---------- */
.titlebar {
  height: 28px;
  padding: 6px 10px;

  background:
    linear-gradient(
      to bottom,
      rgba(245,245,245,0.95) 0%,
      rgba(208,208,208,0.95) 45%,
      rgba(150,150,150,0.95) 100%
    );

  border-bottom: 1px solid rgba(0,0,0,0.20);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -1px 0 rgba(0,0,0,0.10);
}

/* ---------- Traffic lights group ---------- */
.traffic-lights {
  display: flex;
  gap: 7px;
  align-items: center;
}

/* ---------- Individual lights (no icons) ---------- */
.tl {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  position: relative;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -1px 0 rgba(0,0,0,0.25),
    0 1px 1px rgba(0,0,0,0.25);

  border: 1px solid rgba(0,0,0,0.25);
}

/* Gloss on lights */
.tl::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  height: 45%;
  border-radius: 50%;

  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.95),
    rgba(255,255,255,0.15)
  );
  pointer-events: none;
}

/* Close (red) */
.tl-close {
  background: linear-gradient(to bottom, #ff7b73 0%, #ff3b30 55%, #c81912 100%);
}

/* Minimize (yellow) */
.tl-min {
  background: linear-gradient(to bottom, #ffe58a 0%, #ffcc00 55%, #c99500 100%);
}

/* Zoom (green) */
.tl-zoom {
  background: linear-gradient(to bottom, #7ef08a 0%, #34c759 55%, #1a8f33 100%);
}



/* ---------- iTunes-style info bar ---------- */
.prompt {
  position: relative;
  display: block;          /* was inline-block */
  text-align: left;        /* left-align text */
  align-self: flex-start;  /* anchor within flex contexts */

  margin: 0 0 14px 0;
  padding: 6px 12px;

  font-size: 12px;
  white-space: nowrap;

  color: #3a2f12;

  border-radius: 6px;
  border: 1px solid #b89b42;

  background:
    linear-gradient(
      to bottom,
      #fff3b0 0%,
      #ffe27a 45%,
      #f0c94d 100%
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    0 1px 2px rgba(0,0,0,0.35);
}


/* ---------- Gloss highlight ---------- */
.prompt::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  height: 45%;

  border-radius: 5px 5px 8px 8px;

  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.9),
    rgba(255,255,255,0.2)
  );

  pointer-events: none;
}

/* ---------- Prompt text accents ---------- */
.prompt .user {
  color: #006b9a;
}

.prompt .host {
  color: #3a8f2a;
}


/* ---------- Navigation ---------- */
.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* ---------- Aqua button ---------- */
.aqua-button {
  position: relative;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid #4a6fa5;

  background:
    linear-gradient(
      to bottom,
      #b9dbff 0%,
      #7fb5f1 45%,
      #3b78c8 100%
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -1px 0 rgba(0,0,0,0.25),
    0 1px 2px rgba(0,0,0,0.45);

  color: #0b1f33;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
  cursor: pointer;
  user-select: none;
  font-weight: bold;
}

/* ---------- Gloss overlay ---------- */
.aqua-button::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  height: 45%;
  border-radius: 5px 5px 8px 8px;

  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.85),
    rgba(255,255,255,0.15)
  );

  pointer-events: none;
}

/* ---------- Hover ---------- */
.aqua-button:hover {
  background:
    linear-gradient(
      to bottom,
      #cde6ff 0%,
      #93c4f5 45%,
      #4a8ad8 100%
    );
}

/* ---------- Active ---------- */
.aqua-button:active {
  background:
    linear-gradient(
      to bottom,
      #3b78c8 0%,
      #7fb5f1 100%
    );

  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.35),
    0 1px 1px rgba(0,0,0,0.3);

  transform: translateY(1px);
}

/* =========================================================
   Blog page background (reuses your site-wide background)
   ========================================================= */

.page-blog {
  /* Keep your existing body background image setup if already present.
     If you already set body background globally, you can omit this block. */
  background-image: url("images/page-background.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* =========================================================
   Blog window sizing/placement
   ========================================================= */

.window-panel--blog {
  width: min(880px, calc(100vw - 40px));
  height: min(74vh, 720px);

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  z-index: 2;
}

/* Scrollable Aqua content area */
.window-content--blog {
  height: calc(100% - 28px - 34px); /* titlebar + toolbar */
  overflow-y: auto;
  padding: 16px 18px 18px 18px;

  /* subtle “content well” feel */
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.65),
    rgba(255,255,255,0.45)
  );
}

/* Optional heading style to match Aqua spacing */
.window-heading {
  margin: 0 0 14px 0;
  font-size: 18px;
  font-weight: bold;
  color: #1a1a1a;
}

/* =========================================================
   Titlebar title text (centered like Aqua)
   ========================================================= */

.titlebar {
  position: relative;
}

.titlebar-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  font-size: 12px;
  font-weight: bold;
  color: rgba(0,0,0,0.65);
  text-shadow: 0 1px 0 rgba(255,255,255,0.75);
  pointer-events: none;
}

/* =========================================================
   Aqua toolbar (iTunes/Finder-esque)
   ========================================================= */

.toolbar {
  height: 34px;
  padding: 6px 10px;

  display: flex;
  align-items: center;
  gap: 10px;

  background: linear-gradient(
    to bottom,
    rgba(235,235,235,0.95) 0%,
    rgba(200,200,200,0.95) 55%,
    rgba(175,175,175,0.95) 100%
  );

  border-top: 1px solid rgba(255,255,255,0.6);
  border-bottom: 1px solid rgba(0,0,0,0.18);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    inset 0 -1px 0 rgba(0,0,0,0.08);
}

.toolbar-spacer {
  flex: 1;
}

/* little “pill” label like old toolbars */
.toolbar-pill {
  font-size: 12px;
  font-weight: bold;
  color: rgba(0,0,0,0.65);

  padding: 4px 10px;
  border-radius: 999px;

  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.9),
    rgba(235,235,235,0.75)
  );

  border: 1px solid rgba(0,0,0,0.15);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    0 1px 1px rgba(0,0,0,0.15);
}

/* Smaller Aqua button variant for toolbars */
.aqua-button--small {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
}

/* =========================================================
   Blog post styling (Aqua list-like feel)
   ========================================================= */

.blog-post {
  display: flex;
  align-items: flex-start;
  gap: 12px;

  padding: 12px 10px;
  margin: 0 0 10px 0;

  border-radius: 8px;

  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.12);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    0 1px 2px rgba(0,0,0,0.12);
}

.post-image a {
  display: inline-block;
  border-radius: 8px;
}

.post-image img {
  display: block;
  width: 180px;
  max-width: 28vw;
  height: auto;

  border-radius: 8px;

  border: 1px solid rgba(0,0,0,0.20);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 2px 10px rgba(0,0,0,0.18);
}

.post-details {
  flex: 1;
  min-width: 0;
}

.post-header {
  font-size: 12px;
  color: rgba(0,0,0,0.55);
  margin-bottom: 6px;

  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
}

.post-header .user {
  font-weight: bold;
  color: rgba(0,0,0,0.80);
}

.post-header .post-id {
  text-decoration: none;
  color: rgba(20,70,140,0.85);
}

.post-header .post-id:hover {
  text-decoration: underline;
}

.file-info {
  font-size: 12px;
  margin-bottom: 8px;
  color: rgba(0,0,0,0.55);
}

.file-info a {
  text-decoration: none;
  color: rgba(20,70,140,0.85);
}

.file-info a:hover {
  text-decoration: underline;
}

.post-content {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(0,0,0,0.85);
  text-align: left;
}

/* Back link inside content */
.home-link {
  display: inline-block;
  margin-top: 14px;
  text-decoration: none;

  color: rgba(20,70,140,0.85);
}

.home-link:hover {
  text-decoration: underline;
}

/* =========================================================
   About page (Aqua application feel)
   ========================================================= */

.page-about {
  /* Match blog page background behavior */
  background-image: url("images/page-background.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.window-panel--about {
  width: min(880px, calc(100vw - 40px));
  height: min(74vh, 720px);

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  z-index: 2;
}

.window-content--about {
  height: calc(100% - 28px - 34px); /* titlebar + toolbar */
  overflow-y: auto;
  padding: 16px 18px 18px 18px;

  /* Left-align document content */
  text-align: left;

  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.65),
    rgba(255,255,255,0.45)
  );
}

/* Body text spacing like a document view */
.about-body p {
  margin: 0 0 12px 0;
  color: rgba(0,0,0,0.85);
  line-height: 1.55;
  font-size: 13px;
}

/* Section heading consistent with Aqua spacing */
.section-heading {
  margin: 16px 0 10px 0;
  font-size: 14px;
  font-weight: bold;
  color: rgba(0,0,0,0.80);
}

/* Image blocks that "wrap" content in an Aqua-friendly way */
.media-block {
  float: left;
  width: 250px;
  margin: 6px 14px 10px 0;
  padding: 10px;

  border-radius: 10px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.12);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    0 1px 2px rgba(0,0,0,0.12);
}

.media-block img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;

  border: 1px solid rgba(0,0,0,0.20);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 2px 10px rgba(0,0,0,0.18);
}

.media-block figcaption {
  margin-top: 8px;
  font-size: 12px;
  color: rgba(0,0,0,0.55);
  line-height: 1.35;
}

/* Ensure float doesn't break the rest of the layout */
.about-body::after {
  content: "";
  display: block;
  clear: both;
}

/* Specs as an Aqua-ish grouped list */
.specs {
  margin-top: 10px;
  padding: 10px 12px;

  border-radius: 10px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.12);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    0 1px 2px rgba(0,0,0,0.12);
}

.spec-group + .spec-group {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,0.10);
}

.spec-title {
  font-size: 12px;
  font-weight: bold;
  color: rgba(0,0,0,0.75);
  margin-bottom: 6px;
}

.spec-lines {
  font-size: 13px;
  color: rgba(0,0,0,0.85);
  line-height: 1.5;
}

/* =========================================================
   Links page (Aqua list-style view)
   ========================================================= */

.page-links {
  background-image: url("images/page-background.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.window-panel--links {
  width: min(720px, calc(100vw - 40px));
  height: min(70vh, 640px);

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  z-index: 2;
}

.window-content--links {
  height: calc(100% - 28px - 34px);
  overflow-y: auto;
  padding: 16px 18px 18px 18px;

  text-align: left;

  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.65),
    rgba(255,255,255,0.45)
  );
}

/* Intro paragraph */
.links-intro {
  margin: 0 0 14px 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(0,0,0,0.85);
}

/* Links list styled like an Aqua list */
.links-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.links-item {
  padding: 10px 12px;
  margin-bottom: 8px;

  border-radius: 8px;

  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.12);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    0 1px 2px rgba(0,0,0,0.12);
}

.links-item a {
  display: inline-block;
  font-size: 13px;
  font-weight: bold;
  text-decoration: none;

  color: rgba(20,70,140,0.9);
}

.links-item a:hover {
  text-decoration: underline;
}

.links-desc {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(0,0,0,0.6);
}

/* =========================================================
   Mirror notice
   ========================================================= */

.mirror-note {
  margin-top: 16px;
  font-size: 12px;
  color: rgba(0,0,0,0.65);
  text-align: center;
}

.mirror-note a {
  color: rgba(20,70,140,0.9);
  text-decoration: none;
}

.mirror-note a:hover {
  text-decoration: underline;
}

/* =========================================================
   Guestbook window: floated left of main nav window
   ========================================================= */

/* Ensure main window has a known width */
.window-panel--main {
  width: 420px; /* keep consistent with your current main window */
}

/* Comments window */
.window-panel--comments {
  width: 380px;
  height: min(62vh, 640px);

  top: 50%;
  left: 50%;

  /* Push it left of the centered main window:
     - half of main width (210)
     - gap (30)
     - full comments width (380)
     => 210 + 30 + 380 = 620 */
  margin-left: -620px;

  z-index: 2;
}

/* Scrollable comments content */
.window-content--comments {
  height: calc(100% - 28px - 34px); /* titlebar + toolbar */
  overflow-y: auto;
  padding: 14px 16px 16px 16px;

  text-align: left;

  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.65),
    rgba(255,255,255,0.45)
  );
}