:root{
  --ui:#efe7d3;
  --amber:#d28a1d;

  --red1:#d83c47;
  --red2:#95212a;
  --red3:#2c070b;

  --crt-bg:#1a0b02;
  --crt-bg2:#2a1303;

  /* 90s X11-ish web-safe-ish stacks */
  --ui-font: Helvetica, Arial, "Nimbus Sans L", sans-serif;
  --mono-font: "Courier New", Courier, "Nimbus Mono L", monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body{
  background: linear-gradient(180deg, #000 0%, #010101 40%, #03060d 72%, #091327 100%);
  font-family: var(--ui-font);
  overflow: hidden;
  position: relative;
  display: grid;
  place-items: start start;
}

/* Stars behind UI */
body::before,
body::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}

body::before{
  opacity:.85;
  background:
    radial-gradient(circle at 12px 8px, rgba(255,255,255,.34) 0 1px, transparent 1.2px) 0 0 / 88px 58px repeat,
    radial-gradient(circle at 31px 19px, rgba(255,243,215,.26) 0 1px, transparent 1.2px) 0 0 / 122px 77px repeat,
    radial-gradient(circle at 58px 32px, rgba(190,210,255,.22) 0 1px, transparent 1.2px) 0 0 / 168px 106px repeat;
}

body::after{
  opacity:.95;
  background:
    radial-gradient(circle at 22px 14px, rgba(255,255,255,.86) 0 1.7px, transparent 1.9px) 0 0 / 230px 140px repeat,
    radial-gradient(circle at 76px 41px, rgba(255,242,205,.74) 0 1.6px, transparent 1.8px) 0 0 / 320px 190px repeat,
    radial-gradient(circle at 144px 68px, rgba(205,225,255,.58) 0 1.5px, transparent 1.7px) 0 0 / 420px 250px repeat,
    radial-gradient(1000px 220px at 50% 100%, rgba(40,70,180,.10), transparent 70%);
}

.scene{
  position: relative;
  z-index: 1;
  width: min(96vw, 1600px, calc((100dvh - 16px) * 16 / 9));
  aspect-ratio: 16 / 9;
  isolation: isolate;
  contain: layout;
}

.term-wrap{
  position:absolute;
  left:40px;
  right:40px;
  top:20px;
  bottom:20px;
  height:auto;
}

/* Top title bar */
.titlebar{
  position:absolute;
  left:20px;
  right:0;
  top:0;
  height:24px;
  border-radius:999px;
  border:1px solid rgba(235,180,90,.65);
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.20) 0 18%,
      rgba(255,255,255,.03) 19% 42%,
      rgba(0,0,0,.06) 43% 70%,
      rgba(0,0,0,.34) 100%),
    linear-gradient(180deg, #6f461b 0%, #30190b 58%, #150b05 100%);
  display:flex;
  align-items:center;
  padding-left:44px;
  color:var(--ui);
  font:700 11px/1 var(--ui-font);
  letter-spacing:.2px;
  text-shadow:0 0 1px rgba(255,240,200,.15);
  contain: paint;
}

.titlebar::before{
  content:"";
  position:absolute;
  left:6px;
  top:50%;
  transform:translateY(-50%);
  width:14px;
  height:14px;
  border-radius:50%;
  border:1px solid rgba(255,220,220,.15);
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.95) 0 16%, rgba(255,255,255,.10) 17% 34%, transparent 35%),
    radial-gradient(circle at 56% 60%, #cc313c 0 46%, #4a0e14 72%, #140407 100%);
}

.titlebar::after{
  content:"";
  position:absolute;
  left:24px;
  right:10px;
  top:2px;
  height:6px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
  opacity:.6;
  pointer-events:none;
}

.titlebar a{
  color:inherit;
  text-decoration:none;
  position:relative;
  z-index:1;
}

.window-shell{
  position:absolute;
  left:0;
  right:0;
  top:34px;
  bottom:0;
  border-radius:7px;
  border:1px solid rgba(240,180,80,.82);
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.13)),
    linear-gradient(135deg, #714b1f, #301b0d 28%, #170c06 62%, #5b3f1b);
  overflow: visible; /* left nav/rail hang outside */
}

.left-rail{
  position:absolute;
  left:-16px;
  top:8px;
  bottom:8px;
  width:16px;
  border-radius:8px;
  border:1px solid rgba(255,200,120,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02) 25%, rgba(0,0,0,.28)),
    linear-gradient(180deg, #5d3b18, #241409 58%, #130905);
}

.left-rail::before{
  content:"";
  position:absolute;
  left:2px; right:2px;
  top:174px; bottom:4px;
  border-radius:6px;
  background:linear-gradient(180deg, #452a10, #190d06);
  border:1px solid rgba(255,190,90,.05);
}

/* Left nav housing */
.side-nav{
  position:absolute;
  left:-40px;
  top:6px;
  width:44px;
  padding:6px 5px 16px;
  border-radius:11px 9px 9px 9px;
  border:1px solid rgba(255,205,120,.20);
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.02) 24%, rgba(0,0,0,.26)),
    linear-gradient(180deg, #6d4520, #2d190a 58%, #150a05);
  z-index:4;
  contain: paint;
}

.nav-stack{
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:center;
}

.nav-btn{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  text-decoration:none;
  border-radius:8px;
  border:1px solid rgba(255,220,170,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.01) 40%, rgba(0,0,0,.22)),
    linear-gradient(180deg, #5f3a17, #221208);
  position:relative;
  overflow:visible;
}

.nav-btn .glass{
  display:block;
  border:1px solid rgba(255,210,220,.07);
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.92) 0 18%, rgba(255,255,255,.14) 19% 34%, transparent 35%),
    radial-gradient(circle at 56% 60%, var(--red1) 0 42%, var(--red2) 68%, var(--red3) 100%);
}

.nav-btn.home .glass{
  position: relative;
  display: block;
  width: 19px;
  height: 22px;
  border-radius: 0;
  border: 1px solid rgba(255,210,220,.10);
  clip-path: polygon(
    50% 0%,
    86% 22%,
    86% 68%,
    50% 100%,
    14% 68%,
    14% 22%
  );
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.92) 0 10%, rgba(255,255,255,.18) 11% 22%, transparent 23%),
    linear-gradient(140deg, transparent 0 26%, rgba(255,255,255,.15) 27% 35%, transparent 36% 62%, rgba(255,255,255,.10) 63% 70%, transparent 71%),
    linear-gradient(90deg,
      #c9323e 0 22%,
      #e94452 22% 50%,
      #be2834 50% 78%,
      #74111a 78% 100%
    ),
    linear-gradient(180deg, #f05863 0%, #c12a36 58%, #610f17 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset -1px -1px 0 rgba(0,0,0,.30);
}
.nav-btn.about .glass{ width:20px; height:20px; border-radius:50%; }
.nav-btn.news  .glass{ width:18px; height:18px; border-radius:3px; }
.nav-btn.hire  .glass{ width:16px; height:16px; border-radius:2px; transform:rotate(45deg); }

.nav-btn:hover{
  border-color: rgba(255,210,120,.26);
  filter: brightness(1.05);
}

/* Labels under beads */
.nav-btn::after{
  display:block;
  content: attr(data-label);
  position:absolute;
  left:50%;
  top: calc(100% + 2px);
  transform: translateX(-50%) scale(.96);
  transform-origin: center top;
  font:700 10px/1 var(--ui-font);
  letter-spacing:.25px;
  color: rgba(240, 210, 150, .92);
  text-shadow: 0 0 1px rgba(255,180,80,.18);
  white-space: nowrap;
  pointer-events:none;
}

.crt-bezel{
  position:absolute;
  left:10px;
  top:8px;
  right:10px;
  bottom:8px;
  border-radius:8px;
  padding:3px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 20%, rgba(0,0,0,.15) 65%),
    linear-gradient(135deg, #a67943, #3a2411 24%, #120b06 52%, #5a3918 80%, #b28752);
  contain: paint;
}

.crt{
  position:relative;
  width:100%;
  height:100%;
  border-radius:16px / 10px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.65);
  background:
    radial-gradient(120% 100% at 50% 50%, rgba(255,120,0,.06), transparent 70%),
    linear-gradient(180deg, var(--crt-bg2), var(--crt-bg));
  contain: paint;
}

/* Chunkier / fewer scanlines */
.crt::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:5;
  opacity:.18;
  background: repeating-linear-gradient(
    180deg,
    rgba(255,170,50,.05) 0 2px,
    rgba(0,0,0,.14)      2px 4px,
    transparent           4px 8px
  );
}

.crt::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:6;
  background: radial-gradient(120% 110% at 50% 50%,
    transparent 58%,
    rgba(0,0,0,.12) 78%,
    rgba(0,0,0,.28) 100%);
}

.screen-viewport{
  position:absolute;
  inset:0;
  z-index:2;
  overflow-y:scroll;
  overflow-x:hidden;
  scrollbar-gutter: stable;
  scrollbar-color: #9f6b22 #1b0f08;
  scrollbar-width: auto;
  background: transparent;
}

.screen-viewport::-webkit-scrollbar{
  width: 32px;
}

.screen-viewport::-webkit-scrollbar-track{
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.20)),
    linear-gradient(180deg, #39220f, #170b05);
  border-left:1px solid rgba(255,190,90,.16);
}

.screen-viewport::-webkit-scrollbar-thumb{
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.02) 45%, rgba(0,0,0,.24)),
    linear-gradient(180deg, #a06b25, #341d0b);
  border-radius:12px;
  border:1px solid rgba(255,190,90,.34);
}

.screen-viewport::-webkit-scrollbar-button:single-button{
  height:18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22)),
    linear-gradient(180deg, #5a3818, #231208);
  border-left:1px solid rgba(255,190,90,.14);
}

.screen-panel{
  min-height:100%;
  display:block;
  color:var(--amber);
  padding:12px 14px;
  background: transparent;
  --term-font-size: 15px;

  /* Pelican/Markdown defaults */
  font-family: var(--mono-font);
  font-size:var(--term-font-size);
  line-height:1.1;
}

.screen-panel pre{
  margin:0;
  color:inherit;
  font-family: var(--mono-font);
  font-weight:700;
  font-size:calc(var(--term-font-size) * 0.8);
  line-height:0.95;
  letter-spacing:-0.1px;
  white-space:pre;
  text-shadow: 0 0 1px rgba(255,150,35,.28);
  overflow-x:auto;
}

.screen-panel.copy pre{
  white-space:pre-wrap;
  line-height:1.1;
}

/* ASCII art blocks inside markdown pages/posts */
.screen-panel.copy pre.ascii-art{
  white-space: pre;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  display: block;

  font-family: var(--mono-font);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;

  color: var(--amber);
  text-shadow: 0 0 1px rgba(255,150,35,.22);

  margin: 0 0 1rem 0;
  padding-bottom: 4px;
}

/* Pelican / Markdown content */
.screen-panel h1,
.screen-panel h2,
.screen-panel h3{
  margin:0 0 .6em;
  color:var(--amber);
  font-weight:700;
  line-height:1.2;
  text-shadow:0 0 1px rgba(255,150,35,.22);
}

.screen-panel p,
.screen-panel ul,
.screen-panel ol,
.screen-panel blockquote{
  margin:0 0 .8em;
  color:var(--amber);
  text-shadow:0 0 1px rgba(255,150,35,.18);
}

.screen-panel ul,
.screen-panel ol{
  padding-left:1.3em;
}

.screen-panel a{
  color:#f3bf66;
  text-decoration:underline;
}

.screen-panel img{
  display:block;
  max-width:100%;
  height:auto;
  margin:.5em 0 1em;
  border:1px solid rgba(255,190,90,.25);
  border-radius:4px;
}

.screen-panel code{
  color:#f6c874;
}

/* Home/article list styling */
.post-list{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.post-item{
  padding-bottom:.75rem;
  border-bottom:1px solid rgba(255,190,90,.16);
}

.post-item h2{
  margin:0 0 .2rem;
  font-size:1em;
}

.meta{
  margin:0 0 .5rem;
  opacity:.85;
  font-size:.9em;
}

.summary{
  opacity:.95;
}

.read-more{
  display:inline-block;
  margin-top:.35rem;
  color:#f3bf66;
  text-decoration:underline;
  font-weight:700;
}

.pagination{
  margin-top:1rem;
  padding-top:.5rem;
  border-top:1px solid rgba(255,190,90,.16);
  display:flex;
  gap:.75rem;
  align-items:center;
  justify-content:space-between;
  color:var(--amber);
}

.pagination a{
  color:#f3bf66;
  text-decoration:underline;
}

/* Desktop scaling refinements */
@media (max-width: 1440px){
  .term-wrap{ left:92px; right:145px; bottom:20px; height:auto; }
  .screen-panel{ --term-font-size: 13px; }
}

@media (max-width: 1180px){
  .term-wrap{ left:54px; right:62px; top:28px; bottom:10px; height:auto; }

  .titlebar{ height:22px; font-size:10px; padding-left:38px; }
  .titlebar::before{ width:12px; height:12px; }
  .titlebar::after{ left:22px; right:8px; height:5px; }

  .window-shell{ top:30px; }

  .left-rail{ width:14px; left:-14px; }
  .left-rail::before{ top:154px; }

  .side-nav{ left:-34px; width:38px; padding:5px 4px 14px; }
  .nav-stack{ gap:12px; }

  .nav-btn{ width:28px; height:28px; }
  .nav-btn.home .glass{ width:16px; height:19px; }
  .nav-btn.about .glass{ width:18px; height:18px; }
  .nav-btn.news .glass{ width:16px; height:16px; }
  .nav-btn.hire .glass{ width:14px; height:14px; }

  .nav-btn::after{
    font-size:6px;
    top: calc(100% + 1px);
    transform: translateX(-50%) scale(.94);
  }

  .crt-bezel{ right:8px; left:8px; top:6px; bottom:6px; padding:2px; }

  .screen-panel{ padding:10px 12px; --term-font-size:10.8px; }
  .screen-panel pre{ line-height:1; }
  .screen-viewport::-webkit-scrollbar{ width:24px; }
}

@media (min-width: 769px) and (max-width: 1180px),
       (min-width: 769px) and (max-height: 820px) {

  .scene{
    width: 100vw;
    height: 100dvh;
    aspect-ratio: auto;
    contain: none;
  }

  .term-wrap{
    left: 48px;
    right: 8px;
    top: 8px;
    bottom: 8px;
    height: auto;
  }

  .titlebar{
    left: 14px;
    right: 0;
    height: 22px;
    padding-left: 34px;
    font-size: 9px;
    letter-spacing: .15px;
  }

  .titlebar::before{
    width: 12px;
    height: 12px;
    left: 5px;
  }

  .titlebar::after{
    left: 20px;
    right: 8px;
    height: 5px;
  }

  .window-shell{
    top: 28px;
    border-radius: 6px;
  }

  .left-rail{
    width: 13px;
    left: -13px;
    top: 6px;
    bottom: 6px;
    border-radius: 6px;
  }

  .left-rail::before{
    top: 150px;
    bottom: 4px;
    border-radius: 5px;
  }

  .side-nav{
    left: -32px;
    top: 6px;
    width: 38px;
    padding: 5px 3px 14px;
    border-radius: 10px 8px 8px 8px;
  }

  .nav-stack{
    gap: 12px;
  }

  .nav-btn{
    width: 28px;
    height: 28px;
    border-radius: 7px;
  }

  .nav-btn.home  .glass{ width:14px; height:17px; }
  .nav-btn.about .glass{ width:16px; height:16px; }
  .nav-btn.news  .glass{ width:14px; height:14px; }
  .nav-btn.hire  .glass{ width:12px; height:12px; }

  .nav-btn::after{
    top: calc(100% + 1px);
    font-size: 6px;
    letter-spacing: .2px;
    transform: translateX(-50%) scale(.94);
  }

  .crt-bezel{
    left: 7px;
    right: 7px;
    top: 6px;
    bottom: 6px;
    padding: 2px;
    border-radius: 6px;
  }

  .crt{
    border-radius: 10px / 8px;
  }

  .crt::before{
    opacity: .12;
    background: repeating-linear-gradient(
      180deg,
      rgba(255,170,50,.04) 0 3px,
      rgba(0,0,0,.10)      3px 6px,
      transparent           6px 12px
    );
  }

  .screen-panel{
    padding: 8px 8px;
    --term-font-size: 10px;
  }

  .screen-panel pre{
    line-height: 1;
  }

  .screen-panel.copy pre{
    line-height: 1;
  }

  .screen-viewport::-webkit-scrollbar{
    width: 18px;
  }
}

/* Mobile: preserve Thebes geometry, fit viewport, labels stay */
@media (max-width: 768px) {
  html, body { height: 100dvh; }

  body {
    overflow: hidden;
    place-items: stretch;
  }

  body::before { opacity: .55; }

  .scene{
    width:100vw;
    height:100dvh;
    aspect-ratio:auto;
    contain:none;
  }

  .term-wrap{
    left: clamp(34px, 9vw, 58px);
    right: 8px;
    top: max(8px, calc(env(safe-area-inset-top) + 6px));
    bottom: max(8px, calc(env(safe-area-inset-bottom) + 8px));
    height: auto;
  }

  .titlebar{
    left:14px;
    right:0;
    height:22px;
    padding-left:34px;
    font-size:8px;
    letter-spacing:.15px;
  }

  .titlebar::before{
    width:12px;
    height:12px;
    left:5px;
  }

  .titlebar::after{
    left:20px;
    right:8px;
    height:5px;
  }

  .window-shell{
    top:28px;
    border-radius:6px;
    overflow: visible;
  }

  .left-rail{
    width:12px;
    left:-12px;
    top:6px;
    bottom:6px;
    border-radius:6px;
  }

  .left-rail::before{
    left:2px; right:2px;
    top:146px; bottom:4px;
    border-radius:5px;
  }

  .side-nav{
    left:-30px;
    top:6px;
    width:36px;
    padding:5px 3px 14px;
    border-radius:10px 8px 8px 8px;
  }

  .nav-stack{
    gap:12px;
  }

  .nav-btn{
    width:28px;
    height:28px;
    border-radius:7px;
    padding:0;
    display:grid;
    place-items:center;
  }

  .nav-btn.home  .glass{ width:14px; height:17px; }
  .nav-btn.about .glass{ width:16px; height:16px; }
  .nav-btn.news  .glass{ width:14px; height:14px; }
  .nav-btn.hire  .glass{ width:12px; height:12px; }

  .nav-btn::after{
    top: calc(100% + 1px);
    font-size: 6px;
    letter-spacing: .2px;
    transform: translateX(-50%) scale(.94);
  }

  .crt-bezel{
    left:7px;
    right:7px;
    top:6px;
    bottom:6px;
    padding:2px;
    border-radius:6px;
  }

  .crt{
    border-radius:10px / 8px;
  }

  .crt::before{
    opacity:.10;
    background: repeating-linear-gradient(
      180deg,
      rgba(255,170,50,.04) 0 3px,
      rgba(0,0,0,.10)      3px 6px,
      transparent           6px 12px
    );
  }

  .crt::after{
    background: radial-gradient(120% 110% at 50% 50%,
      transparent 62%,
      rgba(0,0,0,.08) 82%,
      rgba(0,0,0,.20) 100%);
  }

  .screen-panel{
    padding:8px 8px;
    --term-font-size: 6px;
  }

  .screen-panel pre{
    line-height:1;
    text-shadow: 0 0 1px rgba(255,150,35,.18);
  }

  .screen-panel.copy pre{
    line-height:1;
    white-space:pre-wrap;
  }

  .screen-panel.copy pre.ascii-art{
    font-size: calc(var(--term-font-size) * 0.9);
    line-height: 1.0;
  }

  .screen-viewport::-webkit-scrollbar{
    width:14px;
  }
}