/* Sidebar navigation, modelled on mitchellh.com. Loaded after style.css on every page;
   the header rules in style.css are left over from the archived top-nav layout. */

.layout {
  flex: 1;
  width: 100%;
  max-width: 960px;
  margin: var(--space-18) auto 0;
  padding: 0 var(--space-4);
  display: flex;
  gap: var(--space-12);
}

/* Left column: mark on top, the nav well below it, pinned while the page scrolls */
.side { width: 200px; flex-shrink: 0; }
.side-inner { position: sticky; top: var(--space-18); }
.mark { display: block; line-height: 0; margin-bottom: 80px; }
.mark img { width: 56px; height: auto; display: block; }
.name-mobile { display: none; }

.side nav ul { flex-direction: column; gap: var(--space-2); }
.side nav a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: -13px; /* the dot hangs in the margin, so the words line up with the mark */
  font-family: var(--sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--grey-text);
}
.side nav a:hover { color: var(--ink); }
.side nav a[aria-current="page"] { color: var(--ink); font-weight: 500; }

/* The current-page marker: a small ochre dot, hidden on every other link */
.dot {
  width: 5px;
  height: 5px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent-light);
  transform: scale(0);
  transition: transform 150ms ease;
}
.side nav a[aria-current="page"] .dot { transform: scale(1); }

/* Right column: the name as the page heading, then the content */
.layout main { flex: 1; min-width: 0; max-width: var(--measure); padding-bottom: var(--space-18); }
.masthead { display: block; line-height: 0; margin: 4px 0 80px; }
.masthead img { width: 220px; height: auto; display: block; }

/* The sidebar is always there, so the per-page "← Home" link is not needed */
.back { display: none; }

/* Phone: mark and name in one row, the nav as a horizontal strip under them */
@media (max-width: 768px) {
  .layout { flex-direction: column; gap: 0; margin-top: var(--space-8); }
  .side { width: auto; }
  .side-inner { position: static; }
  .side-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); }
  .mark { margin-bottom: 0; }
  .mark img { width: 44px; }
  .name-mobile { display: block; line-height: 0; }
  .name-mobile img { width: 180px; height: auto; display: block; }
  .masthead { display: none; }

  .side nav { border-bottom: 1px solid var(--grey-line); padding-bottom: var(--space-3); overflow-x: auto; }
  .side nav ul { flex-direction: row; gap: var(--space-6); }
  .side nav a { flex-direction: column-reverse; gap: var(--space-1); margin-left: 0; }

  .layout main { padding-top: var(--space-8); }
  h1.display { font-size: 32px; line-height: 36px; }
}

/* Footer spans the same width as the sidebar layout, so its wordmark lines up with the mark */
.site-footer .wrap { max-width: 960px; }

/* Work page: a round badge in front of each row, modelled on alasdairmonk.com.
   Initials for now; a real logo can replace any badge with an <img> inside the span. */
.rows.logos > li { position: relative; padding-left: 56px; }
.badge {
  position: absolute;
  left: 0;
  top: var(--space-4);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--ink);
  color: var(--paper);
}
.badge img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* One colour per section, so the four lists read as groups at a glance */
.rows.projects .badge { background: var(--accent-light); color: var(--ink); }
.rows.volunteering .badge { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.rows.education .badge { background: var(--grey-line); color: var(--ink); }