/* montystewart.com: rain-city homepage, CV pop-up and 404 page. Fonts are self-hosted (fonts/). */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/manrope-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/manrope-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/manrope-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/manrope-latin-700-normal.woff2) format('woff2'); }
:root {
  --bg: #0B1026;
  --panel: #121940;
  --panel-2: #1B2350;
  --line: #222B52;
  --text: #EEF0FA;
  --text-2: #C8CEEA;
  --muted: #9BA3C7;
  --accent: #8CCBFF;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  background-image: radial-gradient(circle at 50% 30%, #18215A 0%, rgba(11,16,38,0) 55%);
  background-repeat: no-repeat;
  color: var(--text);
  font-family: 'Manrope', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }
a:hover { color: #C7E6FF; }
.ic { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Header (montystewart.com · reportsgateway.com · CV / LinkedIn / email) */
.topbar { max-width: 1320px; margin: 0 auto; padding: 18px 24px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.topbar__brand { font-size: 15px; font-weight: 700; letter-spacing: .01em; color: var(--text); text-decoration: none; }
.topbar__brand:hover { color: var(--accent); }
.topbar__actions { display: flex; align-items: center; gap: 10px; }
.topbar__cv { height: 40px; padding: 0 16px 0 13px; display: flex; align-items: center; gap: 7px; border-radius: 999px; border: 1px solid #3A4580; color: var(--text); font-size: 14px; font-weight: 700; text-decoration: none; transition: border-color .2s, color .2s; }
.topbar__cv:hover { border-color: var(--accent); color: var(--accent); }
.topbar__cv svg { width: 16px; height: 16px; }
.topbar__mail { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid #3A4580; color: var(--text); transition: border-color .2s, color .2s; }
.topbar__mail:hover { border-color: var(--accent); color: var(--accent); }
.topbar__mail svg { width: 18px; height: 18px; }

/* PowerShell console windows */
.pswin { width: 400px; max-width: 100%; border-radius: 8px; overflow: hidden; background: #012456; border: 1px solid #000; box-shadow: 0 16px 40px rgba(0,0,0,.45); text-align: left; white-space: normal; color: #EEEDF0; }
.pswin__bar { display: flex; align-items: center; gap: 8px; height: 32px; padding-left: 10px; background: #1B2350; font: 600 12px/1 'Manrope', system-ui, sans-serif; color: #C8CEEA; }
.pswin__icon { width: 16px; height: 16px; border-radius: 3px; background: #2671BE; display: flex; align-items: center; justify-content: center; }
.pswin__icon svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pswin__title { flex: 1; }
.pswin__ctl { display: flex; height: 100%; }
.pswin__ctl span { width: 40px; display: flex; align-items: center; justify-content: center; }
.pswin__ctl svg { width: 10px; height: 10px; fill: none; stroke: #C8CEEA; stroke-width: 1; }
.pswin__ctl span:last-child { background: rgba(232,17,35,.0); }
.pswin__body { padding: 10px 16px 12px; font: 500 13px/1.5 'Cascadia Mono', Consolas, 'JetBrains Mono', monospace; }
.pswin__body > div { white-space: pre; }
.ps-cmd { color: #F9F1A5; display: inline-block; vertical-align: bottom; overflow: hidden; width: 0; animation: ps-type .9s steps(12) 2.4s forwards; }
.ps-v { color: #FFFFFF; font-weight: 700; }
.ps-k { color: #9CDCFE; }
.ps-line { opacity: 0; animation: ps-show .01s linear forwards; }
.ps-l1 { animation-delay: 3.6s; } .ps-l2 { animation-delay: 3.75s; } .ps-l3 { animation-delay: 3.9s; } .ps-l4 { animation-delay: 4.1s; }
.ps-cur { display: inline-block; width: .6em; height: 1.05em; vertical-align: -2px; background: #EEEDF0; animation: ps-blink 1s steps(1) infinite; }
@keyframes ps-type { to { width: 12ch; } }
@keyframes ps-show { to { opacity: 1; } }
@keyframes ps-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ps-cmd { width: auto; } .ps-line { opacity: 1; } }

/* CV pop-up */
.cvm { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(5,8,22,.72); backdrop-filter: blur(3px); }
.cvm[hidden] { display: none; }
.cvm__panel { width: min(920px, 100%); height: min(1100px, 100%); display: flex; flex-direction: column; background: var(--panel); border: 1px solid #2E3A78; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.55); }
.cvm__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--line); }
.cvm__title { font-weight: 700; font-size: 16px; }
.cvm__title span { margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.cvm__acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cvm__btn { height: 38px; padding: 0 14px 0 12px; display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; border: 1px solid #3A4580; background: none; color: var(--text); font: 700 13.5px/1 'Manrope', system-ui, sans-serif; text-decoration: none; cursor: pointer; }
.cvm__btn:hover { border-color: var(--accent); color: var(--accent); }
.cvm__btn--solid { background: var(--text); color: var(--bg); border-color: var(--text); }
.cvm__btn--solid:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.cvm__btn svg, .cvm__close svg { width: 16px; height: 16px; }
.cvm__close { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid #3A4580; background: none; color: var(--text); cursor: pointer; margin-left: 4px; }
.cvm__close:hover { border-color: var(--accent); color: var(--accent); }
.cvm__frame { flex: 1; width: 100%; border: 0; background: #E9ECF3; }
.cvm__note { display: none; margin: 0; padding: 24px 20px 28px; color: var(--text-2); font-size: 15px; line-height: 1.5; }
body.cvm-open { overflow: hidden; }
/* phones and tablets rarely show PDFs inside a page: offer the buttons instead */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .cvm { padding: 16px; }
  .cvm__panel { height: auto; }
  .cvm__frame { display: none; }
  .cvm__note { display: block; }
  .cvm__panel { position: relative; }
  .cvm__bar { border-bottom: 0; padding: 16px; }
  .cvm__title { padding-right: 48px; }
  .cvm__close { position: absolute; top: 12px; right: 12px; margin: 0; }
}

/* 404 page */
.nf { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 24px; }
.nf__win { width: min(560px, 100%); }
.nf__err { color: #FF7B7B; }
.nf__win a { color: #F9F1A5; }
.nf__text { color: var(--text-2); font-size: 15px; margin: 0; }

/* ---------- Homepage: animated city (js/cityscape.js) with two consoles (js/terminal.js) ---------- */
html, body { height: 100%; overflow: hidden; }
body { background: #060708; }
#city { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 0; }

/* main-site header floating over the animation */
.topbar-shade { position: fixed; top: 0; left: 0; right: 0; height: 120px; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(4,5,7,.78), rgba(4,5,7,0)); }
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 2; padding-bottom: 0; }
.topbar__brand { text-shadow: 0 1px 10px rgba(0,0,0,.7); }
.topbar__mid { position: absolute; left: 50%; top: 18px; height: 40px; display: flex; align-items: center;
  transform: translateX(-50%); font-size: 15px; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
  color: var(--text); text-decoration: none; text-shadow: 0 1px 10px rgba(0,0,0,.7); transition: color .2s; }
.topbar__mid a { color: inherit; text-decoration: none; transition: color .2s; }
.topbar__mid a:hover { color: var(--accent); }
@media (max-width: 1119px) { .topbar__mid { top: 14px; } }
@media (max-width: 800px) { .topbar__mid { display: none; } }   /* no room between name and buttons */
.topbar__cv, .topbar__mail { background: rgba(10,6,24,.55); border-color: rgba(140,203,255,.35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* two console windows on the wet street: below the skyline line (80% of the height, see js/cityscape.js) */
.terms { position: fixed; left: 0; right: 0; top: 80%; bottom: 0; z-index: 2;
  display: grid; grid-template-columns: 2fr 3fr; grid-template-rows: minmax(0, 1fr);
  gap: 12px; padding: 6px 14px 6px; }
.terms .pswin { width: auto; max-width: none; height: 100%; min-height: 0; display: flex; flex-direction: column;
  background: rgba(12,12,12,.94); border: 1px solid #2b2b2b; box-shadow: 0 10px 30px rgba(0,0,0,.6); color: #CCCCCC; }
.terms .pswin__bar { flex: none; height: 25px; background: #1F1F1F; color: #D0D0D0; }
.terms .pswin__ctl svg { stroke: #D0D0D0; }
.terms .pswin__body { flex: 1; min-height: 0; overflow: hidden; padding: 3px 14px 3px;
  font-size: clamp(10px, 1.3vh, 13px); line-height: 1.32; }
.terms .ps-cur { background: #CCCCCC; }
/* the left console starts typing shortly after the page opens */
.terms .ps-cmd { animation-delay: .7s; }
.terms .ps-l1 { animation-delay: 1.9s; } .terms .ps-l2 { animation-delay: 2.05s; }
.terms .ps-l3 { animation-delay: 2.2s; } .terms .ps-l3b { animation-delay: 2.35s; } .terms .ps-l3c { animation-delay: 2.5s; } .terms .ps-l3d { animation-delay: 2.65s; } .terms .ps-l4 { animation-delay: 2.85s; }
/* looping console: Windows Terminal "Campbell" colours, PSReadLine token roles */
#ps-loop > div { white-space: pre-wrap; word-break: break-word; }
.tk-c { color: #13A10E; } .tk-s { color: #3A96DD; } .tk-v { color: #16C60C; } .tk-k { color: #F9F1A5; }
.tk-p, .tk-o, .tk-t { color: #A0A0A0; } .tk-g { color: #16C60C; } .tk-host { color: #61D6D6; } .tk-warn { color: #F9F1A5; } .tk-n, .tk-m, .tk-w { color: #E8E8E8; } .tk-out { color: #CCCCCC; }
@media (max-width: 760px) {           /* phones: one full-width window */
  .terms { grid-template-columns: 1fr; }
  .terms .pswin--loop { display: none; }
  .terms { padding-left: 8px; padding-right: 8px; }
  .terms .pswin__body { font-size: 10.5px; padding: 3px 7px 3px; }
}
  

@media (max-width: 1119px) {
  .topbar { padding: 14px 16px 0; }
}
@media (max-width: 420px) {
  .pswin__ctl span { width: 32px; }
}

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

/* Back to the global topology (home page) */
.topbar__cv.topbar__back { border: 2px solid #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,0.15); }
.topbar__cv.topbar__back:hover { border-color: #86efac; color: #fff; background: rgba(74,222,128,0.12); }
/* on phones and narrow screens the home page sends visitors here, so Back would only bounce them back */
@media (max-width: 1023px) { .topbar__cv.topbar__back { display: none; } }