/* ====== FONT ====== */
@font-face{
  font-family:"IBM Plex Mono";
  src:url("/fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("/fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}

/* ====== VARS ====== */
:root{
  --bg: #333333;
  --ink: #A0A0A0;
  --link: #EFC0C1;
  --link-hover: #FFCA99;
  --cursor: #B02929;

/* Shell proportions */
  --page-max: 1120px;               /* was 1280px – tighter console */
  --pane-left: clamp(18rem, 22vw, 24rem); /* slightly narrower on ultrawide */
  --gap-x: 0rem;

  --pad-pane: 6px;
  --pad-main: 6px;
  --header-pad: 6px;
  --row-gap: 2px;

  --measure: 88ch;                  /* NFO-ish measure */
  --hero-max: min(1100px, 92vw);    /* shared hero cap for hex/dot */
}

/* ====== GLOBAL BACKGROUND ====== */
html, body{
  background-color: var(--bg);
  background-image: url("../img/bg/dust007.jpg"); /* ensure exact path/name */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  min-height: 100vh;
  color: var(--ink);
  margin: 0;
font: 11px/1.32 "IBM Plex Mono", monospace; letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

/* Grid overlay */
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none;
  background-image: radial-gradient(circle at 1px 1px, #70707022 1.2px, transparent 1.3px);
  background-size: 22px 22px;
  mix-blend-mode: overlay;
  opacity: .25;
}

/* CRT / vignette overlay */
 body::after{
  content:"";
  position:fixed; inset:0; pointer-events:none;
  background:
    /* soft vignette */
    radial-gradient(ellipse at center, transparent 10%, rgba(0,0,0,.18) 85%, rgba(0,0,0,.30) 100%),
    /* faint vertical scanlines */
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, rgba(0,0,0,.03) 1px 2px);
  mix-blend-mode: multiply;  /* sits under text nicely */
  opacity:.9;
}
/* ====== LINKS ====== */
a{ color:var(--link); text-decoration:none; }
a:hover{ color:var(--link-hover); }

/* ====== LAYOUT ====== */
.site-wrap { max-width: 1120px; margin: 0 auto; }
/* NEW: keep panes visually “close” even on huge screens */
@media (min-width: 1400px){
  .site-wrap{ max-width: 1180px; } /* small stretch but no drifting */
}

.shell{
  display:grid;
  grid-template-columns: var(--pane-left) minmax(0,1fr);
  column-gap: 12px;
  min-height: calc(100vh - 64px);
}

.sidebar{
  padding: var(--pad-pane);
  color:#EFC0C1;
/*  background: rgba(51,51,51,.92);  /* slight translucency so dust shows */
  overflow:auto;
}
.main{
  padding: var(--pad-pane) var(--pad-main) 80px;
  color: var(--ink);
/*  background: rgba(51,51,51,.92); */
}
.container{ max-width: var(--measure); margin:0 auto; }

/* ====== TOP BAR (non-home) ====== */
.top-hex .hexmap { display: block; width: min(520px, 88%); }
.top-hex .hexmap text { font-size: 9px; }
.topbar-inner{
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--header-pad);
  display:flex; flex-direction:column; align-items:flex-start; gap: var(--row-gap);
}


/* ====== LANDING ====== */
body.landing .topbar{ display:none; }
.landing-wrap{ min-height:90vh; display:grid; place-items:center; }
.landing-inner{ max-width: var(--hero-max); text-align:center; padding:6vh 2rem; }
.landing-inner .goat.svg-container{ width:min(1000px, 80vw); margin:0 auto 2rem; }
.landing-inner .goat.svg-container svg{ font-size:11px; }
/* NEW: generic SVG containers for hero hex/dot maps */
.landing-inner .svg-hero{ width: var(--hero-max); margin:0 auto 1.5rem; }
.landing-inner .svg-hero svg{ width:100%; height:auto; }
/* LANDING hero wrappers: this controls the size of both the hexmap and the dotmap on _index.md */
.svg-hero { width: min(900px, 92vw); margin: 0 auto 18px; }
.svg-hero svg { width: 100%; height: auto; display: block; }

/* ====== TREE ====== */
.tree{ list-style-type:square; margin:0; padding:0; }
.tree li{ margin:4px 0; }
summary{ cursor:pointer; list-style:none; }
summary::-webkit-details-marker{ display:none; }
.sidebar a{ color:#EFC0C1; text-decoration:none; }
.sidebar a:hover{ text-decoration:none; }
.sidebar .top-hex { margin: 6px 0 6px; }
.sidebar .prompt-line { margin: 0 0 8px; }

/* ====== MEDIA / IMAGES ====== */
.landing-inner img,
.main .container img,
.main .container figure{ max-width:100%; height:auto; }
.main .container figure{ border:1px solid #6a6a6a; padding:6px; background:#545454; }

/* ====== GOAT (kept for other pages) ====== */
.goat.svg-container{ width:min(1200px, 95vw); margin:0 auto 1.2rem; }
.goat.svg-container svg{ width:80%; height:auto; font-size:11px; }
.goat.svg-container text{ font-family:"IBM Plex Mono", monospace !important; font-size:12px; }
/* size variants */
.goat-tiny  svg{ font-size:8px; }
.goat-small svg{ font-size:10px; }
.goat       svg{ font-size:12px; }
.goat-large svg{ font-size:16px; }
.goat-huge  svg{ font-size:20px; }
/* width variants */
.goat-narrow{ width:min(900px, 92vw); }
.goat-wide{ width:min(1400px, 98vw); }
.goat-ultrawide{ width:min(1700px, 98vw); }

/* ====== HEXMAP ====== */
.hexmap .hex{ fill:none; stroke:#B8B8B8; stroke-width:.9; transition:fill .12s, stroke .12s, opacity .12s; }
.hexmap text{ fill:#EFC0C1; font-family:"IBM Plex Mono", monospace; font-size:8px; dominant-baseline:middle; text-anchor:middle; user-select:none; }
/* NEW: allow larger labels for hero usage */
.hexmap.hero text{ font-size:12px; }
.hexmap a:hover .hex{ stroke:#FFCA99; }
.hexmap a:hover text{ fill:#FFCA99; }
.hexmap a:active .hex{ fill:#9C3B3B; }

/* ====== DOTMAP ====== */
.dotmap{ display:block; max-width:100%; margin:10px 0; }
.dotmap svg{ width:100%; height:auto; display:block; }

/* ====== SCROLLBARS ====== */
*{ scrollbar-width:thin; scrollbar-color:#777 var(--bg); }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:#777; border-radius:6px; }
*::-webkit-scrollbar-track{ background:var(--bg); }

  /* === PROMPT BAR (restore style + blink) === */
.prompt,
.prompt-line{
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;        /* keep on one line */
  margin: 6px 0 10px;
  font: 11px/1.32 "IBM Plex Mono", monospace;
}
.cursor{
  display:inline-block;
  width: 6px; height: 11px;
  background: #B02929;        /* red block cursor */
  animation: blink 1s steps(1,end) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* === HEADER HEX (small, labels fit) === */
.top-hex .hexmap{ width: min(480px, 88%); height:auto; display:block; }
.top-hex .hexmap text{ font-size: 8px; }

/* === LANDING HERO SIZING (controls _index.md) === */
.landing-wrap{ min-height: 90vh; display:grid; place-items:center; }
.landing-inner{ max-width: min(1100px, 92vw); text-align:center; padding: 6vh 2rem; }
.svg-hero{ width: min(860px, 92vw); margin: 0 auto 18px; }
.svg-hero svg{ width: 100%; height: auto; display:block; }

/* === MAIN AREA SPACING under header === */
.main .container{ padding-top: 10px; }

/* === Background should never “cut off” === */
html, body{ min-height: 100vh; }
/* ====== MOBILE ====== */
@media (max-width:900px){
  .shell{ grid-template-columns:1fr; }
  .sidebar{ order:1; max-height:40vh; border-bottom:1px solid #6a6a6a; }
  .main{ order:2; padding:14px; }
  .topbar-inner{ gap:4px; }
  .hexmap.text-tight text{ font-size:9px; } /* helper class for cramped labels */
  .landing-inner{ max-width: 96vw; }        /* give landing a bit more room */


}