/* jakevigneri.com: shared styles for all four pages. Mobile-first.
   Palette: #111 sidebar, teal #1A9599 accent, warm off-white #F8F7F5 content.
   Teal is used as-is on dark and for rules/bars; small teal text on the light
   background uses a deeper teal so it passes contrast. Spec greys that fail
   contrast are darkened. */

:root {
  --black: #111111;
  --teal: #1A9599;        /* 5.2:1 on black; 3.4:1 on paper, so not for small text there */
  --ink: #1a1a1a;
  --white: #ffffff;
  --paper: #F8F7F5;

  --bg: var(--paper);
  --text: var(--ink);
  --text-2: #555555;      /* 7.1:1 on paper */
  --muted: #6b6b6b;       /* 5.1:1 on paper; spec #999 is 2.7:1 */
  --faint: #b5b2ac;       /* decorative only (arrows) */
  --accent: #137478;      /* deeper teal, 5.2:1 on paper */
  --border: #e6e3de;
  --card: #ffffff;
  --placeholder: #f0ece8;

  /* sidebar, on black */
  --side-text: var(--white);
  --side-tag: #9a9a9a;      /* spec #444 is 2:1 on #111; this is 6.7:1 */
  --side-rule: #222222;

  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Inter', Helvetica, Arial, sans-serif;
  --gutter: 24px;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ══ Home ═══════════════════════════════════════════════════════════════
   Phone: black top bar (photo + name), nav stacked under it, bio below.
   600px+: fixed 220px black sidebar on the left, bio in the main column. */

.home { min-height: 100vh; }

.sidebar {
  background: var(--black);
  color: var(--side-text);
  padding: 20px var(--gutter);
  border-bottom: 3px solid var(--teal);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}

.id { display: flex; align-items: center; gap: 14px; }

.thumb {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 2px solid var(--teal);
  flex-shrink: 0;
}

.name {
  font: 900 22px/1 var(--serif);
  color: var(--side-text);
}

.side-nav { margin-top: 20px; }

.side-link {
  display: block;
  padding: 10px 0;
  border-top: 0.5px solid var(--side-rule);
}

.side-tag {
  font: 500 8px/1.2 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--side-tag);
  margin-bottom: 3px;
  transition: color 0.15s ease;
}

.side-title {
  font: 700 14px/1.3 var(--serif);
  color: var(--side-text);
  transition: color 0.15s ease;
}

a.side-link:hover .side-tag,
a.side-link:hover .side-title,
.connect-links a:hover { color: var(--teal); }

/* Connect holds two links (LinkedIn + email), so it is a row, not one link. */
.connect-links { display: flex; flex-wrap: wrap; column-gap: 16px; row-gap: 2px; }
.connect-links a { transition: color 0.15s ease; }

.side-foot {
  font: italic 400 9px/1 var(--serif);
  color: #555555;   /* decorative mark; spec #333 is nearly invisible on #111 */
}

.home-main { padding: 28px var(--gutter) 40px; }

.bio {
  font: 400 15px/1.75 var(--sans);
  color: #3d3d3d;          /* darker than the 13px spec grey now that the type is larger */
  max-width: 640px;
}
.bio p + p { margin-top: 16px; }

.bus-card {
  width: 100%;
  max-width: 420px;
  margin-top: 32px;
  border: 0.5px solid var(--border);
  overflow: hidden;
  background: var(--card);
}
.bus-card img {
  width: 100%;
  height: auto;
  filter: sepia(15%);
}
.bus-card figcaption {
  font: 400 10px/1.2 var(--sans);      /* spec 8px #bbb; bumped for legibility */
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 5px 8px;
  background: var(--paper);
  border-top: 0.5px solid var(--border);
}

@media (min-width: 600px) {
  .home { display: flex; align-items: stretch; }
  .sidebar {
    position: sticky;
    top: 0;
    width: 220px;
    flex-shrink: 0;
    height: 100vh;
    padding: 28px 24px;
    border-bottom: none;
    border-right: 3px solid var(--teal);
  }
  .id { flex-direction: column; align-items: flex-start; gap: 14px; }
  .thumb { width: 64px; height: 64px; }
  .side-nav { margin-top: 28px; }
  .connect-links { flex-direction: column; }
  .home-main { flex: 1; padding: 36px 32px; min-width: 0; }
}

@media (min-width: 600px) {
  .bio { font-size: 17px; }
  .bus-card { max-width: 340px; }
}

/* Desktop: larger bio type and a wider sidebar that holds its own against it. */
@media (min-width: 1000px) {
  .home-main { padding: 64px; }
  .bio { font-size: 19px; line-height: 1.7; }
  .bio p + p { margin-top: 20px; }
  .bus-card { max-width: 400px; margin-top: 40px; }
  .bus-card figcaption { font-size: 11px; padding: 8px 12px; }

  .sidebar { width: 320px; padding: 48px 40px; }
  .id { gap: 20px; }
  .thumb { width: 104px; height: 104px; border-width: 3px; }
  .name { font-size: 32px; }
  .side-nav { margin-top: 40px; }
  .side-link { padding: 16px 0; }
  .side-tag { font-size: 10px; margin-bottom: 5px; }
  .side-title { font-size: 20px; }
  .connect-links { row-gap: 4px; }
  .side-foot { font-size: 12px; }
}

/* Wide screens: bio and bus photo side by side, centered in the viewport, so the
   main area isn't a narrow column floating in empty space. Below 1400px the
   320px sidebar leaves too little room, so the photo stays under the bio. */
@media (min-width: 1400px) {
  .home-main {
    display: grid;
    grid-template-columns: minmax(0, 620px) minmax(260px, 400px);
    column-gap: 64px;
    align-items: center;
    align-content: center;
    min-height: 100vh;
    padding: 64px 72px;
  }
  .bus-card { max-width: none; margin-top: 0; }
}

/* ══ Inner pages ════════════════════════════════════════════════════════ */

/* A black stripe across the top ties inner pages back to the home sidebar. */
body.inner { border-top: 6px solid var(--black); }

.page {
  max-width: 640px;
  margin: 0 auto;
  padding-bottom: 48px;
}

.back {
  display: block;
  padding: 20px var(--gutter);
  font: 500 13px/1 var(--sans);
  color: var(--muted);
}

.page-title {
  font: 900 32px/1.15 var(--serif);
  color: var(--text);
  padding: 8px var(--gutter) 28px;
}
.page-title::after {
  content: '';
  display: block;
  width: 40px;
  height: 4px;
  margin-top: 14px;
  background: var(--teal);
}

.section-label {
  display: block;
  font: 500 9px/1 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 16px;
  padding: 0 var(--gutter);
}

.project-section,
.thinking-section { margin-bottom: 40px; }

/* ── Career ── */

.entries { padding: 0 var(--gutter); }

.entry {
  border-bottom: 0.5px solid var(--border);
  padding-bottom: 28px;
  margin-bottom: 28px;
}
.entry:last-child { border-bottom: none; margin-bottom: 0; }

.entry-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.entry-employer { font: 700 17px/1.3 var(--serif); color: var(--text); }
.entry-years {
  font: 400 11px/1 var(--sans);
  color: var(--muted);
  white-space: nowrap;
}
.entry-tag {
  font: 500 9px/1.3 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin: 4px 0 10px;
}
.entry-label {
  font: 500 9px/1.3 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 4px;
}
.entry-built {
  font: 400 13px/1.65 var(--sans);
  color: var(--text-2);
  margin-bottom: 12px;
}
.entry-result {
  font: 500 13px/1.55 var(--sans);
  color: var(--text);
}
.entry-result::before {
  content: '→';
  color: var(--teal);
  margin-right: 6px;
}

/* ── Practice: consulting ── */

.consult-list { padding: 0 var(--gutter); }
.consult {
  border-bottom: 0.5px solid var(--border);
  padding-bottom: 28px;
  margin-bottom: 28px;
}
.consult:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.project-tag {
  font: 500 9px/1.3 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
}
.project-title {
  font: 700 20px/1.25 var(--serif);
  color: var(--text);
  margin: 6px 0 8px;
}
.project-desc {
  font: 400 13px/1.65 var(--sans);
  color: var(--text-2);
  margin-bottom: 14px;
}
.project-link {
  font: 500 12px/1 var(--sans);
  color: var(--accent);
}
.project-status {
  font: 400 12px/1.4 var(--sans);
  color: var(--muted);
}

/* ── Practice: writing ── */

.link-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px var(--gutter);
  border-bottom: 0.5px solid var(--border);
  transition: background 0.15s ease;
}
.link-card:hover { background: var(--card); }
.link-card-tag {
  font: 500 9px/1.2 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 4px;
}
.link-card-title { font: 700 15px/1.35 var(--serif); color: var(--text); }
.link-card-excerpt {
  font: 400 12px/1.5 var(--sans);
  color: var(--text-2);
  margin-top: 4px;
}
.link-card-arrow { font-size: 16px; color: var(--faint); flex-shrink: 0; }

/* ── Practice: visual work ── */

/* Three pieces: one column on small phones, then a single row of three,
   so no tile sits alone in a row. */
.visual-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 0 var(--gutter);
}
@media (min-width: 480px) {
  .visual-grid { grid-template-columns: repeat(3, 1fr); }
}

.visual-card {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: block;
  background: var(--card);
  cursor: pointer;
  /* reset for <button> cards */
  width: 100%;
  padding: 0;
  border: none;
  font: inherit;
  text-align: left;
}
.visual-card img { width: 100%; height: 100%; object-fit: cover; }
.visual-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 10px;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.visual-card:hover .visual-overlay,
.visual-card:focus-visible .visual-overlay { opacity: 1; }
.visual-tag {
  font: 500 9px/1.3 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--teal);
  margin-bottom: 2px;
}
.visual-title { font: 500 12px/1.3 var(--sans); color: #fff; }
.visual-card.placeholder { background: var(--placeholder); cursor: default; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: 90vh; object-fit: contain; }
.lightbox-close {
  position: fixed;
  top: 12px;
  right: 20px;
  background: none;
  border: none;
  font: 400 28px/1 var(--sans);
  color: #fff;
  cursor: pointer;
}

/* ── Software projects ── */

.build-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 0 var(--gutter);
}
@media (min-width: 480px) {
  .build-grid { grid-template-columns: 1fr 1fr; }
}
.build-card {
  border: 0.5px solid var(--border);
  background: var(--card);
  min-width: 0;
}
.build-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: top;
}
.build-thumb.placeholder { background: var(--placeholder); }
.build-body { padding: 14px; }
.build-body .project-tag { margin-bottom: 6px; }
.build-title {
  font: 700 15px/1.3 var(--serif);
  color: var(--text);
  margin-bottom: 6px;
}
.build-use {
  font: 400 12px/1.55 var(--sans);
  color: var(--text-2);
  margin-bottom: 8px;
}
.build-stack {
  font: 400 11px/1.4 var(--sans);
  color: var(--muted);   /* spec #bbb fails contrast */
}

/* ── Inner pages on desktop: same single 640px column, a step larger. ── */

@media (min-width: 900px) {
  .back { padding-top: 36px; }
  .page-title { font-size: 44px; padding-top: 12px; padding-bottom: 40px; }
  .section-label { font-size: 10px; }
  .entry-employer { font-size: 20px; }
  .entry-built, .entry-result, .project-desc { font-size: 15px; }
  .project-title { font-size: 22px; }
  .link-card-title { font-size: 18px; }
  .link-card-excerpt, .build-use { font-size: 13px; }
}