/* juliengoodman.com: a toned-down Windows 2000 look (P8). One window on a plain desktop, bevelled edges, a blue title bar,
   Tahoma. Light = classic grey; dark = the same shapes in charcoal. Colours are tokens so both themes stay in step. */
:root {
  --desktop: #3a6ea5;
  --face: #d4d0c8;          /* window and button grey */
  --text: #000000;
  --muted: #404040;
  --hi: #ffffff;            /* bevel highlight (top-left) */
  --lo: #808080;            /* bevel shadow (bottom-right) */
  --dark: #404040;          /* outer shadow */
  --title-a: #0a246a;       /* title bar gradient */
  --title-b: #a6caf0;
  --title-text: #ffffff;
  --link: #0000a0;
  --focus: #0a246a;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --desktop: #13263d;
    --face: #2b2b2b;
    --text: #e8e8e8;
    --muted: #b4b4b4;
    --hi: #4a4a4a;
    --lo: #161616;
    --dark: #000000;
    --title-a: #0a246a;
    --title-b: #3d6aa8;
    --title-text: #ffffff;
    --link: #9cc3ff;
    --focus: #9cc3ff;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--desktop);
  color: var(--text);
  font: 15px/1.5 Tahoma, Verdana, "Segoe UI", system-ui, sans-serif;
  padding: 3rem 1rem;
}

a { color: var(--link); }
a:focus-visible, .card:focus-visible { outline: 1px dotted var(--focus); outline-offset: 2px; }

/* Raised bevel, as on Windows 2000 windows and buttons */
.window, .card {
  background: var(--face);
  border: 1px solid;
  border-color: var(--hi) var(--dark) var(--dark) var(--hi);
  box-shadow: inset 1px 1px 0 var(--face), inset -1px -1px 0 var(--lo);
}

.window { max-width: 40rem; margin: 0 auto; padding: 3px; }

.titlebar {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px;
  background: linear-gradient(90deg, var(--title-a), var(--title-b));
  color: var(--title-text);
}
.titlebar-icon { width: 16px; height: 16px; }
.titlebar h1 { margin: 0; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.01em; }

.window-body { padding: 1.25rem 1.25rem 1.5rem; }
h2 { font-size: 0.95rem; font-weight: 700; margin: 0 0 0.75rem; }

.projects { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.card { display: block; padding: 0.8rem 1rem; color: inherit; text-decoration: none; }
a.card:hover .title { text-decoration: underline; }
a.card:active { /* pressed button */
  border-color: var(--dark) var(--hi) var(--hi) var(--dark);
  box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--face);
  padding: calc(0.8rem + 1px) calc(1rem - 1px) calc(0.8rem - 1px) calc(1rem + 1px);
}
.card .title { display: block; font-weight: 700; color: var(--link); }
div.card .title { color: var(--text); }
.card .blurb { display: block; color: var(--muted); margin-top: 0.15rem; }

/* Status bar: sunken panels along the bottom of the window */
.statusbar { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; font-size: 0.85rem; }
.statusbar .panel {
  flex: 1 1 auto; padding: 2px 8px;
  border: 1px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo);
  color: var(--muted);
}

/* "Opens in a new tab" icon: a box with an arrow, drawn on a 10x10 pixel grid to match the look; takes the link colour */
.ext::after {
  content: ""; display: inline-block; width: 0.7em; height: 0.7em; margin-left: 0.35em; vertical-align: baseline;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath d='M0 2h4v1H1v6h6V6h1v4H0zM6 0h4v4H9V1H6zM8 1h1v1H8zM7 2h1v1H7zM6 3h1v1H6zM5 4h1v1H5zM4 5h1v1H4z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath d='M0 2h4v1H1v6h6V6h1v4H0zM6 0h4v4H9V1H6zM8 1h1v1H8zM7 2h1v1H7zM6 3h1v1H6zM5 4h1v1H5zM4 5h1v1H4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 480px) {
  body { padding: 1rem 0.5rem; }
  .window-body { padding: 1rem 0.75rem 1.25rem; }
}