/* ==========================================================
   RESET / BASE
   ========================================================== */
* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 3em 1em 4em;
  background-image: url('assets/about/about-bg.jpg');
  color: #3a3226;
  font-family: 'Love Light', cursive;
}

/* ==========================================================
   HEADER
   Title with an orb on either side. Flex keeps all three
   centered as a group and vertically aligned to each other.
   ========================================================== */
.page-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5em;
  margin-bottom: 1.5em;
}

.orb {
  width: 110px;
  height: auto;
  flex-shrink: 0;
}

.page-title {
  font-family: "Rubik Iso", system-ui;
  font-weight: 400; /* Rubik Iso ships a single weight */
  font-size: 3.2rem;
  text-align: center;
  text-decoration: underline;
  margin: 0;
  white-space: nowrap;
}

/* ==========================================================
   CONTENT BOX
   White strip across the top, grey gradient body underneath.
   ========================================================== */
.content-box {
  max-width: 620px;
  margin: 0 auto;
}

.box-strip {
  background: #ffffff;
  text-align: center;
  padding: 0.4em;
  font-size: 1.2rem;
  letter-spacing: 0.3em;
  color: #3a3226;
}

.box-body {
  background: linear-gradient(#ededed, #b9b9b9);
  padding: 1.5em;

  display: grid;
  grid-template-columns: 0.85fr 1.3fr;
  gap: 1.5em;
  align-items: start; /* columns stay top-aligned, no stretching */
}

/* ==========================================================
   LEFT COLUMN
   ========================================================== */
.col-left {
  display: flex;
  flex-direction: column;
  gap: 1.2em;
  align-items: flex-start; /* everything shares one left edge */
}

/* Braille art — needs a font that actually includes braille
   blocks, and line-height: 1 so the rows don't gap apart. */
.ascii {
  font-family: 'Segoe UI Symbol', 'Apple Symbols', 'DejaVu Sans', monospace;
  font-size: 0.8rem;
  line-height: 1;
  letter-spacing: 0;
  margin: 0;
  color: #6b6b6b;
  white-space: pre;
}

.blinkie-stack {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  align-items: flex-start;
}

.blinkie-stack img {
  display: block;
  height: auto;
}

.creature {
  width: 100%;
  max-width: 190px;
  height: auto;
}

/* ==========================================================
   RIGHT COLUMN
   A vertical stack — the text box, divider, and blinkie grid
   are all siblings here, so they automatically share the same
   left and right edges. No guessed percentages needed.
   ========================================================== */
.col-right {
  display: flex;
  flex-direction: column;
  gap: 1.2em;
}

/* ==========================================================
   TEXT BOX
   Scrolls internally once the content is taller than
   max-height. overflow-y: scroll (not auto) keeps the scrollbar
   visible at all times, rather than only appearing mid-scroll.
   ========================================================== */
.text-box {
  max-height: 240px;
  overflow-y: scroll;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid #8a8a8a;
  padding: 0.9em 1em;

  /* Firefox scrollbar */
  scrollbar-width: auto;
  scrollbar-color: #7a7a7a #e0e0e0;
}

/* Chrome / Safari / Edge scrollbar — chunky and clearly visible
   rather than the thin overlay style macOS hides by default */
.text-box::-webkit-scrollbar {
  width: 14px;
}

.text-box::-webkit-scrollbar-track {
  background: #e0e0e0;
  border-left: 1px solid #a8a8a8;
}

.text-box::-webkit-scrollbar-thumb {
  background: #9a9a9a;
  border: 1px solid #6e6e6e;
}

.text-box::-webkit-scrollbar-thumb:hover {
  background: #808080;
}

.text-box p {
  font-family: 'Courier New', monospace;
  font-size: 0.82rem;
  line-height: 1.55;
  color: #2f2f2f;
  margin: 0 0 1em;
}

.text-box p:last-child {
  margin-bottom: 0;
}

/* ==========================================================
   KITTIES DIVIDER
   Now a normal element in the column's flow, so its width
   matches the text box and blinkie grid exactly.
   ========================================================== */
.kitties-divider {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================
   BLINKIE GRID
   Two across, matching the column's full width.
   ========================================================== */
.blinkie-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5em;
  justify-items: start; /* keeps pixel art crisp — no stretching */
}

.blinkie-grid img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ==========================================================
   BACK LINK
   ========================================================== */
.back-link {
  display: block;
  width: fit-content;
  margin: 2.5em auto 0;
  color: #3a3226;
  text-decoration: none;
  border-bottom: 1px solid #3a3226;
  font-size: 1.2rem;
}

/* ==========================================================
   SMALL SCREENS
   Columns collapse to a single stack; orbs shrink. The divider
   can stay visible now that it flows normally instead of being
   absolutely positioned.
   ========================================================== */
@media (max-width: 600px) {
  .page-title { font-size: 2rem; }
  .orb { width: 60px; }
  .page-header { gap: 0.6em; }

  .box-body {
    grid-template-columns: 1fr;
  }

  .blinkie-grid {
    grid-template-columns: 1fr;
  }
}