/* THEMES */
:root, [data-theme="dark"] {
  --bg:#011627; --fg:#d6deeb; --dim:#637777;
  --accent:#7fdbca; --alt:#c792ea; --link:#82aaff;
  --err:#ef5350; --line:#0d2231;
}
[data-theme="light"] {
  --bg:#f7f7f7; --fg:#2e3440; --dim:#6b7280;
  --accent:#0f766e; --alt:#7c3aed; --link:#1d4ed8;
  --err:#b91c1c; --line:#e2e2e2;
}
[data-theme="matrix"] {
  --bg:#0a0e0a; --fg:#b8f2b8; --dim:#4a7a4a;
  --accent:#00ff41; --alt:#7fff9f; --link:#5eff8a;
  --err:#ff5f56; --line:#16301a;
}

/* BASE + PAGE GRID */
* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  grid-template-columns: 1fr;
  grid-template-areas: "header" "tiles" "foot";
  padding-right: min(42vw, 38rem);   /* reserve the space */
}

.wrap { width: auto; margin: 0; min-width: 0; }

a { color: var(--link); text-decoration: none; border-bottom: 1px dotted; }
a:hover { border-bottom-style: solid; }

.dim { color: var(--dim); }
.err { color: var(--err); }
.cmd { color: var(--accent); font-weight: 700; }
.tag { color: var(--alt); }

/* HEADER */

.banner-name {
  font-family: var(--font-display, inherit);
  font-size: clamp(2rem, 5.5vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .5rem;
}

.tagline { color: var(--dim); margin: 0 0 .5rem; }
.meta { font-size: .9em; margin: 0; }

/* TERMINAL */
.site-header,
.terminal,
.tiles, 
.foot {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--fg) 3%, var(--bg));
}

.site-header {
  grid-area: header;
  padding: 2rem 1.5rem 1.5rem;
  margin-top: 2.5rem;
}

.terminal {
  position: fixed;
  top: 2.5rem;
  right: 2rem;
  width: min(38vw, 36rem);
  height: auto;
  min-height: 12rem;
  max-height: calc(100vh - 6rem);
}


.output { flex: 1 1 auto; overflow: hidden; min-height: 0; }
.output > * + * { margin-top: 1.5rem; padding-left: 1rem; }

.entry-cmd { display: flex; flex-wrap: wrap; gap: 0 .6ch; margin-bottom: .25rem; }

.cmd-form {
  flex: 0 0 auto;
  display: flex;
  padding-left: 1rem;
  align-items: baseline;
  margin-top: 1rem;

}

.prompt { white-space: nowrap; user-select: none; }
.p-user { color: var(--accent); font-weight: 700; }
.p-host { color: var(--alt); font-weight: 700; }
.p-path { color: var(--link); }
.p-dim  { color: var(--dim); }
.p-dim:last-child { margin-right: .6ch; }

.cmd-input {
  flex: 1; min-width: 0;
  background: none; border: none; outline: none;
  color: var(--fg); font: inherit; padding: 0;
  caret-color: var(--accent);
}

.cmd-input:disabled { opacity: .4; }

.hint { color: var(--dim); border-left: 2px; padding-left: 1rem; }

/* ---- seg fault ---- */
.segfault {
  color: var(--err);
  font-weight: 700;
  letter-spacing: .05em;
  animation: flicker .12s steps(2) 6;
}
@keyframes flicker { 50% { opacity: .25; } }

/* TILE GRID */
.tiles {
  grid-area: tiles;
  align-self: start;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 2fr));
  gap: 1rem;
  padding: 1.5rem;
  margin-top: 1.5rem;
}

.tile {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  text-decoration: none;
  transition: border-color .2s, transform .2s;
}

/* FIX 3: z-index 0, not -1. Negative z escapes the stacking context
   and causes the hover flash / bleed. */
.tile::before {
  content: "";
  position: absolute;
  inset: 0;                     /* was -14px — no more bleed */
  z-index: 0;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  filter: blur(7px) saturate(.55);
  opacity: .40;
  transform: scale(1.15);       /* scale hides the soft edges instead */
  transform-origin: center;
  transition: opacity .25s;
}

.tile-label {
  position: relative;
  z-index: 1;
  font-size: clamp(1.1rem, 2.2vw, 1.7rem);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg);
  text-align: center;
  text-shadow: 0 2px 12px rgba(0,0,0,.7);
}

.tile:hover, .tile:focus-visible {
  border-color: var(--accent);
  transform: translateY(-3px);
  outline: none;
}
.tile:hover::before, .tile:focus-visible::before { opacity: .62; }

/* FIX 4: section pages drop the grid entirely — no terminal, no columns */
body:has(.page-body) {
  display: block;
  padding: 0 2rem 0 5vw;
}

.page-header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 3rem 1.5rem 2rem;
  border-radius: 6px;
  margin-top: 1.5rem;
  max-width: 60rem;
}
.page-header::before {
  content: "";
  position: absolute; inset: -14px; z-index: 0;
  background-image: var(--img);
  background-size: cover; background-position: center;
  filter: blur(9px) saturate(.5);
  opacity: .38;
  transform: scale(1.08);
}
.page-header > * { position: relative; z-index: 1; }

.back { font-size: .9em; }

.page-title {
  font-size: clamp(2rem, 6vw, 3.5rem);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--accent);
  margin: .5rem 0 0;
  text-shadow: 0 2px 14px rgba(0,0,0,.7);
}

.page-body { padding: 2rem 0; max-width: 60rem; }

/* CONTENT BLOCKS */
.section-title {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  margin-bottom: .5rem;
}

.item { margin-bottom: 1.5rem; }
.item-head {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: .25rem 1rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: .2rem; margin-bottom: .25rem;
}
.item-title { font-weight: 700; }
.item-org { color: var(--alt); }
.item-date { color: var(--dim); white-space: nowrap; }

.bullets { list-style: none; margin: 0; padding: 0; }
.bullets li { padding-left: 2ch; text-indent: -2ch; }
.bullets li::before { content: "› "; color: var(--dim); }

.kv { display: grid; grid-template-columns: minmax(9ch,auto) 1fr; gap: 0 1rem; }
.kv dt { color: var(--accent); }
.kv dd { margin: 0; }

.help-grid {
  display: grid;
  grid-template-columns: minmax(10ch,auto) 1fr;
  gap: 0 1rem;
}
.help-grid dt { color: var(--accent); }
.help-grid dd { margin: 0; color: var(--dim); }

/* FOOTER */
.foot {
  grid-area: foot;
  margin: 2rem 0 3rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--line);   /* override — keep the full border */
  font-size: .9em;
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
}

.theme-toggle {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--dim);
  font: inherit;
  font-size: .85em;
  padding: .15rem .6rem;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.theme-toggle:hover,
.theme-toggle:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  outline: none;
}

/* RESPONSIVE */
@media (max-width: 1100px) {
  body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "terminal"
      "tiles"
      "foot";
    grid-template-rows: auto auto auto 1fr;
    padding: 0 1.25rem;
  }
  .terminal {
    position: static;
    max-height: 60vh;
    margin-top: 1.5rem;
  }
}

@media (max-width: 600px) {
  body { font-size: 14px; }
  .item-head { flex-direction: column; }
  .kv { grid-template-columns: 1fr; }
  .kv dd { margin-bottom: .5rem; }
  .tiles { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}