/* ============================================================
   DRY FABRICATIONS // ascii site
   Palette: Dracula (https://draculatheme.com), with a darkened
   background. Layout is ASCII-only — no decorative art.
   ============================================================ */

:root {
  /* Dracula palette (https://draculatheme.com) — only the colors used. */
  --bg:      #1a1b23; /* darkened background, below Dracula's #282a36 */
  --fg:      #f8f8f2; /* ascii lines, boxes, formatting */
  --comment: #6272a4; /* muted / footer text */
  --yellow:  #f1fa8c; /* links and box titles */
  --green:   #50fa7b; /* title gradient start */
  --cyan:    #8be9fd; /* title gradient end */

  --mono: "Cascadia Code", "Consolas", "SFMono-Regular", "Menlo",
          "DejaVu Sans Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.4;
}

/* faint scanline overlay, tinted with Selection so it stays on-palette */
.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(68, 71, 90, 0.22) 3px
  );
  z-index: 9999;
}

/* ---- faded logo mark, pegged to the top-right corner ---- */
/* logo.png is 454x176; 50% size = 227px wide */
.corner-logo {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  width: 227px;
  height: auto;
  opacity: 0.3;
  pointer-events: none;
  z-index: 5;
}

/* ---- header: large plain-text title top-left + nav ---- */
.site-head {
  padding: 1.5rem 1.25rem 1rem;
}

.title {
  margin: 0;
  text-align: left;
  font-size: clamp(2.25rem, 8vw, 4.5rem);
  font-weight: 700;
  line-height: 1.15;      /* room for descenders (the 'y' tail) */
  padding-bottom: 0.1em;  /* keep the clipped-text box off the baseline */
  letter-spacing: -0.02em;
  /* left-to-right gradient: Dracula green -> cyan, clipped to the text.
     Stops are weighted so the right side reads clearly blue/cyan. */
  background: linear-gradient(to right, var(--green) 0%, var(--cyan) 65%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--cyan); /* fallback for browsers without background-clip: text */
}

/* navigation — links in yellow */
.nav {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.nav a {
  color: var(--yellow);
  text-decoration: none;
}
.nav a:hover { color: var(--bg); background: var(--yellow); }
.nav a.active { color: var(--bg); background: var(--yellow); }
.nav a:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

/* ---- main content, centered ---- */
.terminal {
  max-width: 760px;
  margin: 2rem auto 4rem;
  padding: 0 1rem 3.5rem; /* bottom padding keeps content clear of fixed footer */
  display: flex;
  justify-content: center;
}

.panel { width: 100%; }
.panel[hidden] { display: none; }

/* ASCII boxes — content is drawn by ascii-box.js to fit the container,
   so the font size stays constant and nothing scrolls horizontally.
   Before JS runs (or if JS is off) the raw fallback text wraps normally. */
.ascii-box {
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
  color: var(--fg);
  text-align: left;
  font-family: inherit;
  /* fallback wrapping when JS hasn't drawn the box yet */
  white-space: pre-wrap;
  word-break: break-word;
}
/* once drawn, lines are pre-fitted; keep them literal and centered */
.ascii-box.drawn {
  width: max-content;
  white-space: pre;
}
/* box title label, e.g. [ ABOUT ] — yellow, matching the links */
.box-title { color: var(--yellow); }

/* footer — locked to the bottom of the viewport so it stays put when
   tab content changes height */
.foot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  padding: 0.75rem 1rem;
  background: var(--bg);
  z-index: 10;
}
.dim { color: var(--comment); margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .scanlines { display: none; }
}

@media (max-width: 560px) {
  body { font-size: 14px; }
  .corner-logo { opacity: 0.1; }
}