/* ==========================================================================
   James Cox portfolio
   Layout: single 760px column, academic homepage structure.
   ========================================================================== */

:root {
  --bg: #fbfaf8;
  --ink: #1b1b1a;
  --ink-soft: #2e2c29;
  --muted: #5f5d58;
  --rule: #e3e0d9;
  --accent: #9a3412;
  --accent-soft: #fdf2ec;
  --panel: #ffffff;

  --shell: 1120px;
  --measure: 68ch;
  --rail: 320px;
}

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

html {
  scroll-behavior: smooth;
  /* keep anchored headings clear of the sticky bar */
  scroll-padding-top: 76px;
}

body {
  background-color: var(--bg);
  color: var(--ink);
  font: 400 17px/1.65 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* The one wrapper that constrains line length across the whole page */
.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 24px;
}

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

a:hover {
  border-bottom-color: var(--accent);
}

/* Visible keyboard focus on every interactive element */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: 24px;
  top: 10px;
  z-index: 100;
  background: var(--panel);
  padding: 9px 14px;
  border-radius: 4px;
}

/* --------------------------------------------------------------- top bar */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: var(--bg);
  border-bottom: 1px solid var(--rule);
}

/* The bar spans the full window rather than the 760px text column, so the
   name sits hard left and the nav hard right. Capped so it does not stretch
   absurdly on ultrawide displays. */
.topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  height: 58px;
  max-width: 1440px;
  padding: 0 32px;
}

.wordmark {
  font: 600 16px 'Inter', sans-serif;
  letter-spacing: -0.01em;
  color: var(--ink);
  border: 0;
  white-space: nowrap;
  flex-shrink: 0;
}

/* nowrap guards keep the bar on one line; if it ever outgrows the window it
   will overflow visibly rather than silently reflowing into two rows. */
.topnav {
  display: flex;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: 22px;
}

.topnav a {
  font-size: 14.5px;
  color: var(--muted);
  border: 0;
  white-space: nowrap;
}

.topnav a:hover {
  color: var(--accent);
}

/* Mobile menu trigger: hidden until the nav collapses */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--ink);
  font-size: 22px;
  cursor: pointer;
  padding: 4px 6px;
}

.mobile-menu {
  display: none;
  flex-direction: column;
  border-top: 1px solid var(--rule);
}

.mobile-menu.show {
  display: flex;
}

.mobile-menu a {
  padding: 13px 24px;
  color: var(--ink);
  border: 0;
  border-bottom: 1px solid var(--rule);
  font-size: 15.5px;
}

.mobile-menu a:last-child {
  border-bottom: 0;
}

.mobile-menu a:hover {
  color: var(--accent);
  background-color: var(--accent-soft);
}

/* ------------------------------------------------------------------ hero */

.hero {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 30px;
  align-items: start;
  padding: 54px 0 40px;
}

.hero-portrait {
  width: 160px;
  height: 160px;
  border-radius: 4px;
  object-fit: cover;
  filter: grayscale(0.15);
}

.hero-name {
  font: 600 34px/1.15 'Newsreader', Georgia, serif;
  letter-spacing: -0.015em;
}

.hero-role {
  color: var(--muted);
  font-size: 16px;
  margin-top: 6px;
}

.hero-bio {
  margin-top: 16px;
  max-width: var(--measure);
  color: var(--ink-soft);
}

.hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
  font-size: 14.5px;
}

/* --------------------------------------------------------- two columns */

/* Publications, Experience and Projects form the spine; the shorter
   supporting sections sit in a narrower rail beside them. */
.cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail);
  gap: 0 56px;
  align-items: start;
}

.col-main > section:first-child,
.col-side > section:first-child {
  padding-top: 30px;
}

/* The rail is secondary: no year gutter, slightly quieter type. Scoped to
   the two-column width so nothing needs undoing once it stacks. */
@media (min-width: 901px) {
  .col-side .entry,
  .col-side .pub {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .col-side .entry-year {
    padding-top: 0;
    font-size: 13px;
  }

  .col-side .entry p,
  .col-side .entry li {
    font-size: 14.5px;
  }

  .col-side .prose,
  .col-side .notes a {
    font-size: 15px;
  }
}

/* -------------------------------------------------------------- sections */

main section {
  padding: 34px 0;
  border-top: 1px solid var(--rule);
}

/* Section label: small, quiet, uppercase, never competes with the name */
main section > h2 {
  font: 600 13px 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--muted);
  margin-bottom: 20px;
}

.sub {
  font: 600 13px 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--muted);
  margin: 30px 0 14px;
}

.prose {
  max-width: var(--measure);
  color: var(--ink-soft);
}

.section-note {
  color: var(--muted);
  font-size: 15px;
  margin-top: -8px;
  margin-bottom: 16px;
}

/* --------------------------------------------- entries (experience etc.) */

/* Year gutter on the left, content on the right. Wide enough for the
   longest label, "2025-present", without wrapping. */
.entry {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 18px;
  padding: 15px 0;
}

.entry-year {
  font: 500 14px 'Inter', sans-serif;
  color: var(--muted);
  padding-top: 3px;
  white-space: nowrap;
}

.entry h3 {
  font: 600 16.5px 'Inter', sans-serif;
}

.entry h4 {
  font: 600 16px 'Inter', sans-serif;
}

.entry-meta {
  font-size: 14.5px;
  color: var(--muted);
  margin-top: 3px;
}

.entry p {
  max-width: var(--measure);
  font-size: 15.5px;
  color: var(--ink-soft);
  margin-top: 6px;
}

.entry ul {
  margin-top: 9px;
  padding-left: 20px;
  max-width: var(--measure);
}

.entry li {
  font-size: 15.5px;
  color: var(--ink-soft);
  margin-bottom: 5px;
}

/* ---------------------------------------------------------- publications */

.pub {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule);
}

.pub-group .pub:last-child {
  border-bottom: 0;
}

.pub-year {
  font: 500 14px 'Inter', sans-serif;
  color: var(--muted);
  padding-top: 2px;
}

.pub h4 {
  font: 600 17px/1.4 'Newsreader', Georgia, serif;
}

.pub-authors {
  font-size: 14.5px;
  color: var(--muted);
  margin-top: 3px;
}

.pub-authors strong {
  color: var(--ink);
  font-weight: 600;
}

.venue {
  display: inline-block;
  margin-top: 7px;
  margin-right: 6px;
  font: 500 12px 'Inter', sans-serif;
  letter-spacing: 0.04em;
  background-color: var(--accent-soft);
  color: var(--accent);
  padding: 3px 9px;
  border-radius: 3px;
}

.venue-pending {
  background-color: #f1efea;
  color: var(--muted);
}

/* ----------------------------------------------------------- writing list */

.notes a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  font-size: 16px;
}

.notes a:last-child {
  border-bottom: 0;
}

.notes a:hover {
  color: var(--accent);
}

.notes span {
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- footer */

footer {
  border-top: 1px solid var(--rule);
  margin-top: 20px;
  padding: 26px 0 48px;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

footer p {
  color: var(--muted);
  font-size: 14px;
}

.footer-icons {
  display: flex;
  gap: 16px;
  font-size: 19px;
}

.footer-icons a {
  color: var(--muted);
  border: 0;
}

.footer-icons a:hover {
  color: var(--accent);
}

/* ---------------------------------------------------------- back to top */

.back-to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 44px;
  height: 44px;
  background-color: var(--accent);
  color: #ffffff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, background-color 0.3s ease;
  z-index: 30;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  background-color: #7c2a0e;
}

/* ------------------------------------------------------------ responsive */

/* Below this width the two columns become one stream. The wrappers go
   display:contents so the sections themselves become the flex items, which
   lets `order` interleave them back into nav order rather than running the
   whole main column before the whole rail. */
@media (max-width: 900px) {
  .cols {
    display: flex;
    flex-direction: column;
  }

  .col-main,
  .col-side {
    display: contents;
  }

  #publications { order: 1; }
  #education    { order: 2; }
  #awards       { order: 3; }
  #experience   { order: 4; }
  #side-work    { order: 5; }
  #projects     { order: 6; }
  #writing      { order: 7; }
  #contact      { order: 8; }

}

@media (max-width: 720px) {
  .topnav {
    display: none;
  }

  .menu-toggle {
    display: block;
  }

  /* Once the nav collapses, line the name up with the text column again */
  .topbar-inner {
    padding: 0 24px;
  }
}

@media (max-width: 620px) {
  body {
    font-size: 16.5px;
  }

  .hero {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 36px 0 30px;
  }

  .hero-portrait {
    width: 124px;
    height: 124px;
  }

  .hero-name {
    font-size: 29px;
  }

  .entry,
  .pub {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .entry-year,
  .pub-year {
    padding-top: 0;
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}

/* Respect users who ask for less motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition: none !important;
  }
}