/* Kartik — personal site. Game Boy Color (grape) theme. */
:root {
  --body: #5b3d9e;
  --body-dark: #3b2470;
  --bezel: #333338;
  --bezel-edge: #2a2a2e;
  --label: #b9b7c2;
  --lcd: #8d9476;
  --ink: #262c1e;
  --ink-soft: #3d4530;
  --led: #e0314a;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--body);
  color: var(--ink);
  font-family: 'VT323', ui-monospace, monospace;
  font-size: 26px;
  line-height: 1.2;
  -webkit-font-smoothing: none;
}

a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
a:focus-visible { outline: 3px dashed var(--ink); outline-offset: 4px; }

.pixel { font-family: 'Press Start 2P', ui-monospace, monospace; font-weight: 400; }

/* ---------- console shell ---------- */
.console {
  position: relative;
  min-height: 100vh;
  padding: 36px 36px 76px;
  display: flex;
  box-shadow: inset 0 0 120px rgba(30, 12, 70, .35);
}

.bezel {
  flex: 1;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  background: var(--bezel);
  border-radius: 18px 18px 120px 18px;
  box-shadow: 0 2px 0 rgba(255, 255, 255, .08), inset 0 0 0 2px var(--bezel-edge);
  padding: 26px 64px 26px 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.label {
  padding-left: 64px;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--label);
}

.bay { flex: 1; display: flex; gap: 24px; }

.power {
  width: 40px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 120px;
  font-size: 14px;
  letter-spacing: 1px;
  color: #d8d6de;
  text-align: center;
  line-height: 1;
}
.led { width: 11px; height: 11px; border-radius: 50%; background: var(--led); box-shadow: 0 0 10px var(--led); }
.led.low { background: #5e2a33; box-shadow: none; }

.screen {
  flex: 1;
  min-width: 0;
  background-color: var(--lcd);
  background-image:
    linear-gradient(rgba(0, 0, 0, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, .05) 1px, transparent 1px);
  background-size: 3px 3px;
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, .25), inset 0 0 40px rgba(0, 0, 0, .12);
  padding: 32px 72px 40px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.wordmark {
  padding-left: 64px;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 14px;
  font-size: 15px;
  letter-spacing: 1px;
}
.wordmark .name { font-style: italic; color: #c9c7d1; }
.c1 { color: #e2484f; } .c2 { color: #eea43a; } .c3 { color: #e9d34a; }
.c4 { color: #58b85c; } .c5 { color: #4a8fd6; } .c6 { color: #a377dc; }

.speaker {
  position: absolute;
  right: 70px;
  bottom: 16px;
  display: grid;
  grid-template-columns: repeat(8, 6px);
  gap: 7px;
  transform: rotate(-12deg);
}
.speaker span { width: 6px; height: 6px; border-radius: 50%; background: var(--body-dark); }

/* ---------- shared bits ---------- */
.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .blink { animation: none; } }

.crumbs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 11px;
  letter-spacing: 1px;
  padding-bottom: 14px;
  border-bottom: 3px dotted var(--ink);
}
.crumbs .here { color: var(--ink-soft); }

.pager {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 11px;
}

.muted { color: var(--ink-soft); }
.todo { color: var(--ink-soft); }
p { margin: 0; }
h1, h2 { margin: 0; }

/* menu list with the ▶ cursor */
.menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.menu a { display: flex; gap: 12px; align-items: flex-start; }
.menu a:hover { text-decoration: none; }
.menu .cur { visibility: hidden; margin-top: 6px; flex-shrink: 0; shape-rendering: crispEdges; }
.menu a:hover .cur, .menu a:focus-visible .cur { visibility: visible; }
.menu a:hover .nm, .menu a:focus-visible .nm { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.menu .nm { font-size: 30px; }
.menu.posts .nm { font-size: 26px; }
.menu .sub { font-size: 22px; color: #343c28; }

/* ---------- home ---------- */
.home { flex: 1; display: flex; gap: 80px; padding-top: 24px; }
.home .intro { width: 520px; flex-shrink: 0; display: flex; flex-direction: column; gap: 28px; }
.home .title { display: flex; align-items: center; gap: 12px; }
.home h1 { font-size: 32px; letter-spacing: 3px; }
.home .cursor { width: 16px; height: 32px; background: var(--ink); }
.home .role { font-size: 26px; }
.home .lead { font-size: 28px; }
.home .foot { margin-top: auto; font-size: 20px; }
.home .lists { flex: 1; display: flex; flex-direction: column; gap: 40px; padding-top: 8px; }
.home h2 { font-size: 12px; letter-spacing: 2px; margin-bottom: 18px; }

/* ---------- project page ---------- */
.project { flex: 1; display: flex; gap: 64px; }
.project .copy { width: 540px; flex-shrink: 0; display: flex; flex-direction: column; gap: 22px; }
.project h1 { font-size: 30px; letter-spacing: 3px; }
.project .copy p { font-size: 27px; }
.project .out { font-size: 12px; margin-top: 6px; }
.info {
  flex: 1;
  align-self: flex-start;
  border: 4px solid var(--ink);
  box-shadow: inset 0 0 0 4px var(--lcd), inset 0 0 0 7px var(--ink);
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 25px;
}
.info .head { font-size: 10px; letter-spacing: 2px; margin-bottom: 6px; }
.info div { display: flex; justify-content: space-between; gap: 16px; }
.info dt, .info dd { margin: 0; }

/* ---------- writing ---------- */
.post { max-width: 700px; display: flex; flex-direction: column; gap: 18px; }
.post h1 { font-size: 20px; line-height: 1.6; margin-bottom: 6px; }
.post .date { font-size: 22px; color: var(--ink-soft); }
.writing h1 { font-size: 24px; letter-spacing: 2px; }

/* ---------- 404 ---------- */
.over { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; text-align: center; }
.over h1 { font-size: 40px; letter-spacing: 4px; }
.over .menu { margin-top: 20px; align-items: flex-start; }
.over .menu .nm { font-family: 'Press Start 2P', monospace; font-size: 14px; }
.over .q { font-size: 14px; letter-spacing: 2px; }
.screen.dim { background-color: #858c6f; }

/* ---------- phones & small tablets ---------- */
@media (max-width: 900px) {
  body { font-size: 23px; }
  .console { padding: 12px 12px 56px; }
  .bezel { padding: 16px 14px 18px; border-radius: 14px 14px 56px 14px; gap: 12px; }
  .label, .wordmark { padding-left: 0; }
  .label { font-size: 8px; text-align: center; }
  .wordmark { font-size: 11px; }
  .bay { flex-direction: column; gap: 10px; }
  .power { flex-direction: row; width: auto; padding: 0 4px; font-size: 12px; }
  .screen { padding: 22px 18px 28px; gap: 22px; }
  .speaker { right: 28px; bottom: 12px; grid-template-columns: repeat(6, 5px); gap: 6px; }
  .speaker span { width: 5px; height: 5px; }
  .speaker span:nth-child(n+19) { display: none; }

  .menu .cur { display: none; }
  .menu .nm { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
  .home { flex-direction: column; gap: 40px; padding-top: 4px; }
  .home .intro { width: auto; gap: 20px; }
  .home h1 { font-size: 22px; }
  .home .cursor { width: 11px; height: 22px; }
  .home .lead { font-size: 25px; }
  .home .foot { display: none; }
  .home .foot-mobile { display: block; font-size: 20px; }

  .project { flex-direction: column; gap: 32px; }
  .project .copy { width: auto; }
  .project h1 { font-size: 22px; }
  .project .copy p { font-size: 24px; }
  .info { align-self: stretch; font-size: 22px; }

  .post h1 { font-size: 15px; }
  .writing h1 { font-size: 18px; }
  .over h1 { font-size: 24px; }
  .crumbs, .pager { font-size: 9px; }
}
.home .foot-mobile { display: none; }
@media (max-width: 900px) { .home .foot-mobile { display: block; font-size: 20px; } }