/*
 * minimal.css — alexandermunson.com, minimal revision
 * Layout after bleuje.com: a sidebar (name, tagline, page links) beside one
 * content column; each section is its own page. Stacks on narrow screens. No cards, no hero overlay, no grain.
 * Colour kept from Rev 2026-09: warm near-black, cream type, one signal red.
 */

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  color-scheme: dark;
  --bg:       #110B09;
  --cream:    #ECE4D2;
  --cream-2:  #B7AD9A;
  --cream-3:  #8A7F70;
  --red:      #C4291F;
  --red-text: #E5584A;
  --line:     rgba(236, 228, 210, 0.10);

  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --col: 720px;
}

*, *::before, *::after { box-sizing: border-box; }
/* reserve the scrollbar's width on every page so short (non-scrolling) and long pages line up */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1.5rem; scrollbar-gutter: stable; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--cream);
  font: 300 1rem/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
address { font-style: normal; }
strong { font-weight: 500; }
::selection { background: var(--red); color: var(--cream); }

a { color: var(--cream); text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--red-text); }
:focus-visible { outline: 2px solid var(--red-text); outline-offset: 3px; }

.skip-link { position: absolute; left: 1rem; top: -100px; background: var(--red); color: var(--cream); padding: .5rem 1rem; }
.skip-link:focus { top: 1rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- layout: sidebar + one content column ---------- */
.layout {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4.5rem) 16px 3rem;
}
@media (min-width: 600px) { .layout { padding-inline: 24px; } }
@media (min-width: 880px) {
  .layout {
    display: grid;
    grid-template-columns: 200px minmax(0, var(--col));
    gap: 4.5rem;
    align-items: start;
  }
}

/* ---------- sidebar ---------- */
.sidebar { padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); margin-bottom: 2.5rem; }
@media (min-width: 880px) {
  .sidebar {
    position: sticky; top: clamp(2rem, 6vw, 4.5rem);
    border-bottom: 0; margin-bottom: 0; padding-bottom: 0;
  }
}
.brand {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.brand a { text-decoration: none; color: inherit; }
.brand .dot { color: var(--red); }
.tagline { margin-top: .4rem; color: var(--cream-3); font-size: .9rem; line-height: 1.5; }

.nav { margin-top: 1.25rem; }
.nav ul { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; }
@media (min-width: 880px) { .nav { margin-top: 2rem; } .nav ul { flex-direction: column; gap: .35rem; } }
.nav a { text-decoration: none; color: var(--cream-2); }
.nav a:hover { color: var(--cream); }
.nav a[aria-current="page"] { color: var(--red-text); }
@media (min-width: 880px) {
  .nav a { position: relative; }
  .nav a[aria-current="page"]::before {
    content: ""; position: absolute; left: -1rem; top: 50%;
    width: 6px; height: 6px; margin-top: -3px; background: var(--red);
  }
}

.side-links { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: 1rem; font: .75rem/1.7 var(--mono); }
@media (min-width: 880px) { .side-links { flex-direction: column; gap: 0; margin-top: 2.5rem; } }
.side-links a { color: var(--cream-3); }
.side-links a:hover { color: var(--red-text); }

/* ---------- page heading ---------- */
.page-title {
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red-text);
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2rem;
}
@media (min-width: 880px) { .page-title { padding-top: .45rem; } }

/* ---------- home image (the bleuje "one gif" slot) ---------- */
.cover { margin-top: 0; }
@media (min-width: 880px) { .cover { margin-top: .5rem; } }
.home-text { margin-top: 2rem; }

/* ---------- home: headshot beside the intro line ---------- */
.hello { display: grid; gap: 1.5rem; align-items: end; }
@media (min-width: 640px) { .hello { grid-template-columns: 200px 1fr; gap: 2.25rem; } }
@media (min-width: 880px) { .hello { margin-top: .5rem; } }
.headshot {
  width: 140px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 2px;
  border-bottom: 3px solid var(--red);
}
@media (min-width: 640px) { .headshot { width: 200px; } }
.hello .intro { font-size: clamp(1.125rem, 1rem + .5vw, 1.3rem); line-height: 1.55; }
.cover img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.cover figcaption, .fig figcaption {
  margin-top: .4rem; font: .75rem/1.5 var(--mono); color: var(--cream-3);
}

.intro { font-size: 1.125rem; color: var(--cream); }
.home-text p:not(.intro) { color: var(--cream-2); }

/* ---------- text ---------- */
.home-text p + p { margin-top: 1rem; }
.muted { color: var(--cream-2); }
.mono { font-family: var(--mono); font-size: .8rem; color: var(--cream-3); }

/* ---------- dated entries (experience, education) ---------- */
.entry { display: grid; gap: .25rem 2rem; }
.entry + .entry { margin-top: 2.25rem; }
@media (min-width: 640px) { .entry { grid-template-columns: 9.5rem 1fr; } }
.entry-when { font: .8rem/1.6 var(--mono); color: var(--cream-3); padding-top: .2rem; }
.entry h3 { font-size: 1.05rem; font-weight: 500; line-height: 1.4; }
.entry h3 span { color: var(--cream-2); font-weight: 300; }
.entry p { margin-top: .4rem; color: var(--cream-2); }
.entry ul { margin-top: .6rem; }
.entry li { position: relative; padding-left: 1.1rem; color: var(--cream-2); }
.entry li + li { margin-top: .35rem; }
.entry li::before { content: "–"; position: absolute; left: 0; color: var(--red); }

/* ---------- projects ---------- */
.project + .project { margin-top: 3rem; }
.project h3 { font-size: 1.15rem; font-weight: 500; line-height: 1.35; }
.project .mono { margin-top: .15rem; }
.project > p { margin-top: .75rem; color: var(--cream-2); }

.figs {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.figs-2 { grid-template-columns: repeat(2, 1fr); }
.fig a { display: block; text-decoration: none; }
.fig img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #1A110E;
  transition: opacity .2s;
}
.fig-drawing img { object-fit: contain; background: #F4EFE6; padding: 6px; }
.fig a:hover img { opacity: .8; }

.bench { margin-top: 3rem; color: var(--cream-2); }
.bench strong { color: var(--red-text); font-weight: 500; }

/* ---------- skills ---------- */
.skills div + div { margin-top: 1rem; }
.skills dt { font-weight: 500; }
.skills dd { color: var(--cream-2); }

/* ---------- education ---------- */
details { margin-top: 1.5rem; }
summary { cursor: pointer; color: var(--cream); width: fit-content; }
summary::marker { color: var(--red); }
details p { margin-top: .75rem; color: var(--cream-2); font-size: .95rem; }
details p b { font-weight: 500; color: var(--cream); }

/* ---------- contact ---------- */
.email { font-size: clamp(1.25rem, 1rem + 1.4vw, 1.75rem); font-weight: 400; }
.links { margin-top: 1.25rem; display: grid; gap: .3rem; }
.links li { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; color: var(--cream-2); }
.links li span:first-child { font: .8rem/1.9 var(--mono); color: var(--cream-3); }
.links a { overflow-wrap: anywhere; }

/* ---------- footer ---------- */
.foot {
  margin-top: 4.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font: .75rem/1.7 var(--mono);
  color: var(--cream-3);
}
.foot a { color: var(--cream-3); }

/* ---------- lightbox (behaviour in js/site.js) ---------- */
.lightbox { max-width: min(96vw, 1400px); max-height: 94vh; padding: 0; border: 0; background: transparent; color: var(--cream); }
.lightbox::backdrop { background: rgba(8, 5, 4, .92); }
.lightbox-fig img { max-height: 84vh; width: auto; margin: 0 auto; }
.lightbox-fig figcaption { margin-top: .6rem; font: .8rem/1.5 var(--mono); color: var(--cream-2); text-align: center; }
.lightbox-close {
  display: block; margin: 0 0 .6rem auto;
  background: none; border: 0; color: var(--cream-2); font: .8rem var(--mono); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px;
}
.lightbox-close:hover { color: var(--red-text); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}