/* ==========================================================================
   Old School Terminal Theme
   ========================================================================== */

:root {
   --term-bg: #f4efe1;
   --term-bg-deep: #ece6d3;
   --term-green: #101010;
   --term-green-dim: #4a4538;
   --term-green-dark: #d8d1bd;
   --term-amber: #8a3b00;
   --term-shadow: rgba(0, 0, 0, 0.15);
}

* {
   box-sizing: border-box;
}

html, body {
   margin: 0;
   padding: 0;
   background: var(--term-bg-deep);
   color: var(--term-green);
   font-family: "VT323", "Courier New", Courier, "Lucida Console", Monaco, monospace;
   font-size: 20px;
   line-height: 1.4;
   min-height: 100%;
   overflow-x: hidden;
}

/* Paper/CRT scanline overlay -- lighter for light background */
body::before {
   content: "";
   position: fixed;
   inset: 0;
   pointer-events: none;
   z-index: 9999;
   background: repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0)      0px,
      rgba(0, 0, 0, 0)      2px,
      rgba(0, 0, 0, 0.06)   3px,
      rgba(0, 0, 0, 0.06)   3px
   );
}

body::after {
   content: "";
   position: fixed;
   inset: 0;
   pointer-events: none;
   z-index: 9998;
   background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.15) 100%);
   animation: flicker 2.4s infinite steps(2);
}

@keyframes flicker {
   0%   { opacity: 0.96; }
   50%  { opacity: 1; }
   100% { opacity: 0.98; }
}

a {
   color: var(--term-amber);
   text-decoration: none;
   border-bottom: 1px dashed var(--term-amber);
}
a:hover {
   background: var(--term-amber);
   color: var(--term-bg-deep);
   text-shadow: none;
}

h1, h2, h3, h4 {
   color: var(--term-green);
   font-family: inherit;
   font-weight: normal;
   margin: 0 0 0.6em;
   letter-spacing: 0.05em;
}

hr {
   border: 0;
   border-top: 1px dashed var(--term-green-dim);
   margin: 1.2em 0;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.term-window {
   max-width: 960px;
   margin: 40px auto;
   padding: 0 24px 60px;
}

header#home,
section#projects,
section#contact {
   border: 1px solid var(--term-green-dim);
   background: var(--term-bg);
   box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.05),
      0 4px 14px rgba(0, 0, 0, 0.12);
   margin-bottom: 30px;
}

.term-titlebar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 6px 12px;
   background: var(--term-green-dark);
   border-bottom: 1px solid var(--term-green-dim);
   color: var(--term-green);
   font-size: 16px;
   letter-spacing: 0.1em;
   text-transform: uppercase;
}

.term-titlebar .dots span {
   display: inline-block;
   width: 10px;
   height: 10px;
   margin-right: 6px;
   border: 1px solid var(--term-green);
   border-radius: 50%;
   background: transparent;
}

.term-body {
   padding: 24px 28px 28px;
}

/* ==========================================================================
   Header
   ========================================================================== */

header#home nav {
   margin-bottom: 18px;
   padding-bottom: 10px;
   border-bottom: 1px dashed var(--term-green-dim);
}

header#home nav ul {
   list-style: none;
   margin: 0;
   padding: 0;
}

header#home nav ul li {
   display: inline-block;
   margin-right: 18px;
}

header#home nav ul li a {
   color: var(--term-green);
   border-bottom: none;
   text-transform: uppercase;
   letter-spacing: 0.15em;
}
header#home nav ul li a::before {
   content: "[ ";
   color: var(--term-green-dim);
}
header#home nav ul li a::after {
   content: " ]";
   color: var(--term-green-dim);
}
header#home nav ul li a:hover {
   background: var(--term-green);
   color: var(--term-bg-deep);
   text-shadow: none;
}

.banner-text .prompt-line {
   margin: 0 0 0.2em;
   color: var(--term-green-dim);
}
.banner-text .prompt-line .prompt {
   color: var(--term-amber);
}

.banner-text h1 {
   font-size: 56px;
   margin: 0.1em 0 0.4em;
   letter-spacing: 0.08em;
}

.banner-text h3 {
   font-size: 22px;
   margin: 0 0 0.8em;
   color: var(--term-green-dim);
}

.banner-text ul.social {
   list-style: none;
   padding: 0;
   margin: 16px 0 0;
}

.banner-text ul.social li {
   display: inline-block;
   margin-right: 14px;
}

.banner-text ul.social a {
   border-bottom: none;
   color: var(--term-green);
}
.banner-text ul.social a:hover {
   color: var(--term-bg-deep);
   background: var(--term-green);
}

.social-note {
   margin-left: 8px;
   color: var(--term-green-dim);
   font-style: italic;
   font-size: 0.9em;
}

/* Blinking cursor */
.cursor {
   display: inline-block;
   width: 0.6em;
   height: 1em;
   margin-left: 4px;
   background: var(--term-green);
   vertical-align: -2px;
   animation: blink 1s steps(2, start) infinite;
}

@keyframes blink {
   to { visibility: hidden; }
}

/* ==========================================================================
   Projects
   ========================================================================== */

section#projects .term-body h1 {
   font-size: 28px;
   margin-bottom: 0.3em;
}

section#projects .lead {
   color: var(--term-green-dim);
   margin-bottom: 18px;
}

.project {
   border: 1px solid var(--term-green-dim);
   padding: 16px 18px;
   margin: 16px 0;
   background: #fdfaf0;
   box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.05),
      0 4px 14px rgba(0, 0, 0, 0.12);
}

.project h4 {
   font-size: 22px;
   text-transform: uppercase;
   color: var(--term-amber);
   letter-spacing: 0.1em;
   border-bottom: 1px dashed var(--term-green-dim);
   padding-bottom: 4px;
   margin: 0 0 10px;
}

.project-status {
   display: inline-block;
   margin-left: 10px;
   padding: 1px 8px;
   font-size: 0.75em;
   letter-spacing: 0.15em;
   color: var(--term-bg);
   background: var(--term-amber);
   animation: blink 1.6s steps(2, start) infinite;
}

.project.wip {
   border-left: 4px solid var(--term-amber);
}

.lists.bom {
   margin-bottom: 12px;
}
.lists.bom li b {
   color: var(--term-amber);
}

.project-meta {
   margin: 0 0 12px;
   color: var(--term-green-dim);
   font-size: 17px;
}

.project-meta span {
   display: block;
}

.project ul.lists {
   list-style: none;
   padding: 0;
   margin: 10px 0 0;
}

.project ul.lists li {
   position: relative;
   padding-left: 1.6em;
   margin: 0.2em 0;
}

.project ul.lists li::before {
   content: "$>";
   position: absolute;
   left: 0;
   color: var(--term-amber);
}

.project-creds {
   margin-top: 16px;
   padding: 12px 14px;
   border: 1px dashed var(--term-green-dim);
   background: rgba(0, 0, 0, 0.04);
}

.project-creds .prompt-line {
   margin: 0 0 8px;
}

.creds {
   display: grid;
   grid-template-columns: max-content 1fr;
   column-gap: 14px;
   row-gap: 2px;
   margin: 0;
}

.creds dt {
   color: var(--term-amber);
   text-transform: uppercase;
   letter-spacing: 0.08em;
}
.creds dt::after {
   content: ":";
}

.creds dd {
   margin: 0;
   color: var(--term-green);
   user-select: all;
}

/* ==========================================================================
   Contact
   ========================================================================== */

section#contact .term-body h1 {
   font-size: 28px;
   margin-bottom: 0.3em;
}

section#contact .lead {
   color: var(--term-green-dim);
   margin-bottom: 18px;
}

section#contact h4 {
   font-size: 20px;
   text-transform: uppercase;
   color: var(--term-amber);
   letter-spacing: 0.1em;
   border-bottom: 1px dashed var(--term-green-dim);
   padding-bottom: 4px;
   margin-bottom: 10px;
}

section#contact .address {
   margin: 0;
   white-space: pre-line;
}

section#contact .address span {
   display: block;
}

/* ==========================================================================
   Footer
   ========================================================================== */

footer {
   text-align: center;
   padding: 20px 0 10px;
   color: var(--term-green-dim);
   font-size: 16px;
}

footer .social-links {
   list-style: none;
   padding: 0;
   margin: 0 0 8px;
}

footer .social-links li {
   display: inline-block;
   margin: 0 10px;
}

footer .social-links a {
   color: var(--term-green);
   border-bottom: none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 640px) {
   html, body { font-size: 18px; }
   .banner-text h1 { font-size: 38px; }
   .term-window { margin: 12px auto; padding: 0 10px 40px; }
   .term-body { padding: 16px 16px 20px; }
   header#home nav ul li { display: block; margin: 6px 0; }
}