/* ============================================================================
   WINDOWS 95 DESKTOP THEME
   ============================================================================
   The classic Win95 "3D" look comes from CSS's own `border-style: outset`
   (looks raised/popped-out) and `border-style: inset` (looks pressed-in).
   That's the whole trick — no box-shadow stacking needed. Two helper
   classes below (.raised / .sunken) wrap that up; everything else in this
   file just uses them.

   Reference: this recreates the look of AlexBSoft/win95.css (MIT license) —
   see assets/textures for the only reused third-party bits (none here are
   copied Windows assets; icons in assets/icons are hand-drawn originals).
   ============================================================================ */

:root {
  --desktop-bg: #008080;      /* the classic teal desktop */
  --face: #c0c0c0;            /* standard UI grey ("buttonface") */
  --face-light: #dfdfdf;
  --text: #000000;
  --text-invert: #ffffff;
  --titlebar-from: #08246b;   /* active title bar gradient (navy -> blue) */
  --titlebar-to: #3a6ea5;
  --link: #0000ee;

  --font-ui: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;

  --max-w: 1180px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  /* Fixed so it behaves like a real desktop wallpaper while windows scroll. */
  background: var(--desktop-bg) url("assets/textures/background.jpg") no-repeat center bottom / cover fixed;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  padding-bottom: 44px; /* leaves room for the fixed taskbar */
}

a { color: var(--link); }
ul { list-style: none; margin: 0; padding: 0; }
img { display: block; image-rendering: pixelated; }

/* ----------------------------------------------------------------------
   Bevel helpers — the entire "Windows 95" visual trick lives here.
---------------------------------------------------------------------- */
.raised {
  background: var(--face);
  border-style: outset;
  border-width: 2px;
  border-color: var(--face-light) #404040 #404040 var(--face-light);
}
.sunken {
  background: var(--face);
  border-style: inset;
  border-width: 2px;
  border-color: #404040 var(--face-light) var(--face-light) #404040;
}

/* ============================================================================
   DESKTOP LAYOUT
   ============================================================================ */
.desktop {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 24px 16px 40px;
  padding-left: 116px; /* room for the fixed desktop-icons column */
}

/* Desktop icons — fixed so they stay put like a real desktop while the
   windows below scroll. Each is a plain link; clicking jumps to that
   window's id via the browser's normal anchor-scroll (no JS needed). */
.desktop-icons {
  position: fixed;
  top: 24px;
  left: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 76px;
  z-index: 10;
}

.desktop-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  padding: 4px;
  border: 1px solid transparent;
}

.desktop-icon span {
  color: var(--text-invert);
  text-shadow: 1px 1px 0 #000;
  font-size: 11px;
  text-align: center;
  line-height: 1.2;
}

.desktop-icon:hover,
.desktop-icon:focus-visible {
  border: 1px dotted #fff;
  outline: none;
}
.desktop-icon:hover span,
.desktop-icon:focus-visible span {
  background: #000080;
  text-shadow: none;
}

/* ============================================================================
   WINDOWS
   ============================================================================ */
.windows {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.window {
  background: var(--face);
  border-style: outset;
  border-width: 2px;
  border-color: var(--face-light) #404040 #404040 var(--face-light);
}

.window--nested {
  margin-top: 20px;
}

.title-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px;
  background: linear-gradient(90deg, var(--titlebar-from), var(--titlebar-to));
  color: var(--text-invert);
}

.title-bar__icon { image-rendering: pixelated; }

.title-bar__text {
  font-weight: bold;
  font-size: 12.5px;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.title-bar__controls {
  display: flex;
  gap: 2px;
}
.title-bar__controls span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 14px;
  background: var(--face);
  color: #000;
  font-size: 10px;
  line-height: 1;
  border-style: outset;
  border-width: 1px;
  border-color: var(--face-light) #404040 #404040 var(--face-light);
}

.window-body {
  padding: 20px;
}

/* ============================================================================
   HERO WINDOW
   ============================================================================ */
.window-body--hero {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}

.hero__text { flex: 1 1 320px; }

.hero__headline {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.4;
  margin: 0 0 12px;
}

.hero__sub {
  margin: 0 0 20px;
  color: #222;
}

.btn95 {
  display: inline-block;
  background: var(--face);
  border-style: outset;
  border-width: 2px;
  border-color: var(--face-light) #404040 #404040 var(--face-light);
  padding: 8px 18px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}
.btn95:active {
  border-style: inset;
  border-color: #404040 var(--face-light) var(--face-light) #404040;
}
.btn95--primary { font-weight: bold; }

/* Chip preview: sits inside its own little nested window, always visible
   (the geometry is small enough — ~170px wide — to fit any screen). Dark
   backdrop makes the chip read like a product/datasheet photo rather than
   the neon "gaming PC" look the old GPU card had. */
.window-body--chip {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 190px;
  background: #232323;
}

/* ============================================================================
   IC CHIP — plain CSS 3D transforms, one flat cuboid (a real chip package
   is thin and wide, not cube-shaped). No JS, no external model — see
   assets/textures/chip-top.svg and chip-side.svg for the two hand-drawn
   textures used on its faces (ceramic body, gold gull-wing pins).
   ============================================================================ */
.chip-wrap { perspective: 900px; }

.chip-rotor {
  position: relative;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  animation: spin 14s linear infinite;
}

.box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-style: preserve-3d;
}

.box__face {
  position: absolute;
  image-rendering: pixelated;
  border: 1px solid rgba(0, 0, 0, 0.4);
}

/* Chip package: 170 x 18 x 170 (w x h x d) — flat and wide, like a real IC */
.box--chip {
  width: 170px;
  height: 18px;
  margin-left: -85px;
  margin-top: -9px;
}
.box--chip .box__face--front,
.box--chip .box__face--back {
  width: 170px; height: 18px; left: 0; top: 0;
  background-image: url("assets/textures/chip-side.svg");
  background-size: 20px 18px;
}
.box--chip .box__face--front { transform: translateZ(85px); }
.box--chip .box__face--back  { transform: rotateY(180deg) translateZ(85px); }
.box--chip .box__face--right,
.box--chip .box__face--left {
  width: 170px; height: 18px; left: 0; top: 0;
  background-image: url("assets/textures/chip-side.svg");
  background-size: 20px 18px;
}
.box--chip .box__face--right { transform: rotateY(90deg) translateZ(85px); }
.box--chip .box__face--left  { transform: rotateY(-90deg) translateZ(85px); }
.box--chip .box__face--top,
.box--chip .box__face--bottom {
  width: 170px; height: 170px; left: 0; top: -76px;
  background-image: url("assets/textures/chip-top.svg");
  background-size: 170px 170px;
  background-repeat: no-repeat;
}
.box--chip .box__face--top    { transform: rotateX(90deg) translateZ(9px); }
.box--chip .box__face--bottom { transform: rotateX(-90deg) translateZ(9px); }

@keyframes spin {
  from { transform: rotateX(-18deg) rotateY(0deg); }
  to   { transform: rotateX(-18deg) rotateY(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .chip-rotor { animation: none; transform: rotateX(-18deg) rotateY(35deg); }
}

/* ============================================================================
   PROJECTS
   ============================================================================ */
.projects {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.project-card {
  background: var(--face-light);
  border-style: inset;
  border-width: 2px;
  border-color: #404040 var(--face-light) var(--face-light) #404040;
  padding: 16px;
}

.project-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.project-card__title {
  margin: 0;
  font-size: 1.05rem;
}

.project-card__desc {
  margin: 0 0 10px;
}

.project-card__stat {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: #08246b;
  margin: 0 0 12px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 3px 8px;
  background: var(--face);
  border-style: outset;
  border-width: 1px;
  border-color: var(--face-light) #404040 #404040 var(--face-light);
}

/* ============================================================================
   WRITING (blog post list)
   ============================================================================ */
.posts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.post-entry__link {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--face-light);
  border-style: inset;
  border-width: 2px;
  border-color: #404040 var(--face-light) var(--face-light) #404040;
  padding: 12px 14px;
  text-decoration: none;
  color: var(--text);
}
.post-entry__link:hover .post-entry__title {
  text-decoration: underline;
}

.post-entry__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.post-entry__title {
  font-weight: bold;
}

.post-entry__desc {
  font-size: 0.9rem;
  color: #222;
}

.post-entry__status {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: #08246b;
}

/* ============================================================================
   ABOUT
   ============================================================================ */
.about {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.about__body {
  flex: 1 1 320px;
  margin: 0;
}

.facts {
  flex: 0 0 220px;
  background: var(--face-light);
  border-style: inset;
  border-width: 2px;
  border-color: #404040 var(--face-light) var(--face-light) #404040;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.facts li { font-size: 0.9rem; }
.facts li span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  color: #08246b;
}

/* ============================================================================
   CONNECT
   ============================================================================ */
.contacts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-entry a {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--face-light);
  border-style: inset;
  border-width: 2px;
  border-color: #404040 var(--face-light) var(--face-light) #404040;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--text);
}
.contact-entry a:hover { text-decoration: underline; }

/* ============================================================================
   FOOTER
   ============================================================================ */
.desktop-footer {
  color: var(--text-invert);
  text-shadow: 1px 1px 0 #000;
  font-size: 12px;
  text-align: center;
  margin: 24px 0 0;
}

/* ============================================================================
   TASKBAR
   ============================================================================ */
.taskbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 6px;
  background: var(--face);
  border-top-style: outset;
  border-top-width: 2px;
  border-top-color: var(--face-light);
}

.taskbar__spacer { flex: 1; }

.taskbar__clock {
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 4px 10px;
  background: var(--face);
  border-style: inset;
  border-width: 2px;
  border-color: #404040 var(--face-light) var(--face-light) #404040;
}

/* Start menu — built with <details>/<summary>, styled to look like a
   Win95 popup menu. Opens/closes natively, no JavaScript involved. */
.start-menu {
  position: relative;
}

.start-button {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  background: var(--face);
  border-style: outset;
  border-width: 2px;
  border-color: var(--face-light) #404040 #404040 var(--face-light);
  font-weight: bold;
  font-size: 13px;
  cursor: pointer;
  list-style: none;
}
.start-button::-webkit-details-marker { display: none; }

.start-menu[open] .start-button {
  border-style: inset;
  border-color: #404040 var(--face-light) var(--face-light) #404040;
}

.start-menu__list {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 2px;
  min-width: 180px;
  background: var(--face);
  border-style: outset;
  border-width: 2px;
  border-color: var(--face-light) #404040 #404040 var(--face-light);
  padding: 3px;
}

.start-menu__list li a {
  display: block;
  padding: 6px 10px;
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
}
.start-menu__list li a:hover {
  background: #000080;
  color: #fff;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 760px) {
  /* The fixed icon column doesn't have room on narrow screens — hide it
     and rely on the Start menu for navigation instead. */
  .desktop-icons { display: none; }
  .desktop { padding-left: 16px; }

  .window-body--hero { flex-direction: column; align-items: stretch; }
  .about { flex-direction: column; }
  .facts { flex: 1 1 auto; }
}