/* =============================================================================
   styles.css - all styling for the site.

   Look: high-contrast and minimal. Near-white page, near-black text, and ONE
   accent colour used sparingly (links, rules, the active nav item) - about the
   60-30-10 split that professional portfolios use. A two-column layout puts a
   sticky sidebar (name + nav + contact) on the left and the content on the
   right, so the page uses its horizontal space instead of running in a thin
   strip.

   To re-skin the whole site, change the variables in :root. You should not
   need to touch anything past the THEME block for a palette change. Read
   STANDARDS.md before adding new rules.
   ========================================================================== */

/* --- THEME: edit these to re-colour the site. -------------------------- */
:root {
  color-scheme: light dark;
  --bg:      #fbfbfa;   /* 60% - page background          */
  --ink:     #17191c;   /* 30% - body text                */
  --muted:   #52565c;   /* secondary text (optimized contrast) */
  --faint:   #d9d9d4;   /* hairlines                      */
  --accent:  #196a3c;   /* 10% - links, rules, active nav (green - optimized contrast) */
  --accent-tint: rgba(25, 106, 60, 0.06); /* soft green capsule highlight */

  --sidebar: 15rem;     /* width of the left column       */
  --page:    66rem;     /* total content width            */

  /* Typography scale. Reuse these semantic roles instead of introducing
     one-off sizes inside individual sections. */
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --text-name: 2rem;
  --text-lead: 1.15rem;
  --text-title: 1.15rem;
  --text-title-compact: 1.1rem;
  --text-body: 1rem;
  --text-body-compact: 0.95rem;
  --text-section: 1.25rem;
  --text-subsection: 0.95rem;
  --text-supporting: 0.9rem;
  --text-link-small: 0.85rem;
  --text-meta: 0.82rem;
  --text-caption: 0.8rem;
  --text-label: 0.78rem;
  --text-icon: 1.15rem;
  --text-icon-close: 1.5rem;
  --text-print: 11pt;
  --leading-name: 1.15;
  --leading-body: 1.6;
  --leading-title: 1.35;
  --leading-meta: 1.55;
  --leading-caption: 1.4;

  /* Shape, motion, and layout rhythm. See DESIGN.md before adding values. */
  --radius-control: 4px;   /* buttons, controls, nav capsules */
  --radius-media: 6px;     /* evidence images */
  --radius-dialog: 8px;    /* image preview dialog */
  --radius-round: 50%;     /* headshot circle */
  --headshot: 6rem;        /* sidebar headshot diameter */
  --line: 1px;             /* every border and rule */
  --motion: 0.15s;         /* hover and focus transitions */
  --motion-theme: 0.3s;    /* light/dark colour fade */
  --space-rail: 3.5rem;    /* top padding of sidebar and content */
  --space-section: 3rem;   /* between sections (above and below the rule) */
  --space-entry: 2.5rem;   /* between entries in a section */
  --space-group: 1.75rem;  /* after section headings; between capability groups */
  --space-block: 1.5rem;   /* between sidebar blocks */
  --shadow-dialog: 0 1rem 3rem rgba(0, 0, 0, 0.35);
  --backdrop: rgba(0, 0, 0, 0.72);
}

/* Dark palette. Applied when the OS is in dark mode (unless the visitor has
   explicitly picked light), and whenever the visitor explicitly picks dark via
   the toggle. Keep the two value lists below identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #121316; --ink: #e8e9ea; --muted: #9aa0a6; --faint: #2c2f34; --accent: #52b788; --accent-tint: rgba(82, 183, 136, 0.08);
  }
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121316; --ink: #e8e9ea; --muted: #9aa0a6; --faint: #2c2f34; --accent: #52b788; --accent-tint: rgba(82, 183, 136, 0.08);
}

/* --- RESET ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color var(--motion-theme) ease, color var(--motion-theme) ease;
}

a { color: var(--accent); text-decoration: none; }

.inline-icon {
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.3125rem;
  vertical-align: -0.125rem;
}

/* Accessibility focus ring */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1000;
  padding: 0.55rem 0.8rem;
  border: var(--line) solid var(--accent);
  border-radius: var(--radius-control);
  color: var(--ink);
  background: var(--bg);
  transform: translateY(calc(-100% - 1rem));
}
.skip-link:focus { transform: translateY(0); }

/* --- LAYOUT: sidebar + content ----------------------------------------- */
.layout {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  gap: 4rem;
  align-items: start;
  position: relative;
}

/* --- SIDEBAR (sticky) -------------------------------------------------- */
.sidebar {
  position: sticky;
  top: 0;
  padding: var(--space-rail) 1.25rem;
  margin: 0 -1.25rem;
  max-height: 100vh;
  max-height: 100dvh;
  overflow-y: auto;
}
/* Headshot: a small circular photo above the name. Supports the name; never
   larger than --headshot. */
.headshot {
  display: block;
  width: var(--headshot);
  height: var(--headshot);
  margin-bottom: 1rem;
  border: var(--line) solid var(--faint);
  border-radius: var(--radius-round);
  object-fit: cover;
}
.sidebar h1 { font-size: var(--text-name); font-weight: 700; letter-spacing: -0.02em; line-height: var(--leading-name); }
.sidebar .tagline { color: var(--muted); font-size: var(--text-supporting); margin-top: 0.5rem; }
.sidebar .location { margin-top: 0.75rem; }

/* In-page nav */
.nav { margin-top: var(--space-block); display: flex; flex-direction: column; gap: 0.1rem; }
.nav a {
  color: var(--muted); font-size: var(--text-supporting); font-weight: 500;
  padding: 0.3rem 0.75rem; border-left: 2px solid transparent;
  margin-left: -0.75rem; transition: color var(--motion), border-color var(--motion), background-color var(--motion);
  border-radius: var(--radius-control);
}
.nav a:hover { color: var(--accent); background-color: transparent; }
.nav a.active { color: var(--accent); border-left-color: var(--accent); background-color: var(--accent-tint); font-weight: 600; }

/* Contact */
.contact { margin-top: var(--space-block); display: flex; flex-direction: column; gap: 0.35rem;
  font-size: var(--text-supporting); }
/* Text link: accent text with an underline that grows from the centre on
   hover. Shared by contact links, entry and project-header links, and the back link. */
.contact a,
.entry .more a:not(.button),
.project-header .more a,
.project-back a { position: relative; width: fit-content; padding-bottom: 2px;
  display: inline-flex; align-items: center;
  transition: color var(--motion); }
.contact a::after,
.entry .more a:not(.button)::after,
.project-header .more a::after,
.project-back a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 1.5px;
  background-color: var(--accent);
  transition: width var(--motion) ease, left var(--motion) ease;
}
.contact a:hover::after,
.entry .more a:not(.button):hover::after,
.project-header .more a:hover::after,
.project-back a:hover::after {
  width: 100%;
  left: 0;
}

/* Theme toggle stays near identity/contact in source order, but is visually
   fixed at the familiar top-right position. */
.theme-toggle {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 100;
  margin: 0;
  background: var(--bg);
  border: var(--line) solid var(--faint);
  border-radius: var(--radius-control);
  width: 2.75rem;
  height: 2.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-icon);
  color: var(--muted);
  transition: color var(--motion), border-color var(--motion);
}
.theme-toggle:hover,
.image-preview-close:hover,
.button:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.theme-toggle[hidden] { display: none; }

/* --- CONTENT ----------------------------------------------------------- */
.content { padding: var(--space-rail) 0; max-width: 42rem; min-width: 0; }
.content .intro { font-size: var(--text-lead); line-height: var(--leading-body); color: var(--ink); margin-bottom: 2.75rem; }

section { padding: 0; padding-top: var(--space-section); border-top: var(--line) solid var(--faint); margin-top: var(--space-section); transition: border-color var(--motion-theme) ease; }
section:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }

h2 {
  overflow-wrap: anywhere;
  font-size: var(--text-section);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-group);
}

/* --- ENTRIES (projects, experience) ------------------------------------ */
.entry,
.edu-block {
  margin-bottom: var(--space-entry);
}
.entry:last-child,
.entry:last-of-type,
.edu-block:last-child {
  margin-bottom: 0;
}
.edu-details {
  margin-bottom: 0;
}
h3 {
  font-weight: 600;
  font-size: var(--text-title);
  line-height: var(--leading-title);
}
h3 .subtitle,
.compact-entry h4 .subtitle { color: var(--muted); font-weight: 400; }
h3 .subtitle::before,
.compact-entry h4 .subtitle::before { content: "  -  "; color: var(--faint); }
.entry .meta,
.edu-block .meta,
.honor-item .meta,
.compact-entry .meta,
.compact-entry .compact-meta {
  font-size: var(--text-meta);
  color: var(--muted);
}
.entry .meta,
.edu-block .meta,
.honor-item .meta { margin-top: 0.25rem; }

.entry-details {
  margin-top: 0.45rem;
  margin-bottom: 0.6rem;
  font-size: var(--text-meta);
  line-height: var(--leading-meta);
  color: var(--muted);
}
.entry-details .detail-row {
  margin-top: 0.2rem;
}
.entry-details .detail-row:first-child {
  margin-top: 0;
}
.entry-details .detail-label {
  font-weight: 600;
  color: var(--ink);
}

.entry p { margin-top: 0.65rem; font-size: var(--text-body); line-height: var(--leading-body); color: var(--ink); }
.entry .more,
.project-header .more { font-size: var(--text-link-small); margin-top: 0.55rem; }

/* --- EDUCATION --------------------------------------------------------- */
.edu .edu-block { margin-bottom: 2.75rem; }
.edu .edu-block:last-child { margin-bottom: 0; }
.edu .edu-detail { margin-top: 0.5rem; color: var(--ink); font-size: var(--text-body); line-height: var(--leading-body); }
.coursework-block { margin-top: 1.15rem; display: flex; flex-direction: column; gap: 0.6rem; }
.coursework-line { margin-top: 0; font-size: var(--text-supporting); line-height: var(--leading-body); color: var(--ink); }
.coursework-label { font-weight: 600; color: var(--muted); margin-right: 0.35rem; }

/* --- RECOGNITION ------------------------------------------------------- */
.recognition-heading {
  margin-top: 2.75rem;
  margin-bottom: 1.35rem;
  font-size: var(--text-subsection);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: var(--leading-title);
  color: var(--muted);
}
.honors-list {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}
.honor-item .meta { margin-top: 0.2rem; }
.honor-title {
  font-weight: 600;
  font-size: var(--text-title);
  line-height: var(--leading-title);
}
.honor-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1.5px;
  transition: color var(--motion), text-decoration-color var(--motion);
}
.honor-link:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

.capability-group { margin-bottom: var(--space-group); }
.capability-group:last-of-type { margin-bottom: 0; }
.capability-heading {
  font-size: var(--text-subsection);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: var(--leading-title);
  color: var(--muted);
}
.capabilities-inline {
  margin-top: 0.45rem;
  font-size: var(--text-supporting);
  line-height: var(--leading-body);
  color: var(--ink);
}
.capabilities-inline a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}


/* --- PROJECT EVIDENCE IMAGE ------------------------------------------- */
.project-images-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 1rem;
}

.project-image-card {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.project-image-button {
  width: 100%;
  padding: 0;
  border: var(--line) solid var(--faint);
  border-radius: var(--radius-media);
  overflow: hidden;
  background: var(--faint);
  cursor: zoom-in;
  display: block;
  text-align: left;
  appearance: none;
  transition: border-color var(--motion) ease;
}
.project-image-button:hover { border-color: var(--accent); }
.project-image-button img {
  width: 100%;
  height: auto;
  display: block;
}

.image-preview-open { overflow: hidden; }
.image-preview-dialog:not([open]) { display: none; }
.image-preview-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(92vw, 72rem);
  max-width: 92vw;
  max-height: 92vh;
  max-height: 92dvh;
  padding: 0;
  border: var(--line) solid var(--faint);
  border-radius: var(--radius-dialog);
  background: var(--bg);
  color: var(--ink);
  box-shadow: var(--shadow-dialog);
}
.image-preview-dialog::backdrop { background: var(--backdrop); }
.image-preview-content {
  position: relative;
  padding: 3.5rem 1rem 1rem;
}
.image-preview-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2.75rem;
  height: 2.75rem;
  border: var(--line) solid var(--faint);
  border-radius: var(--radius-control);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  transition: color var(--motion), border-color var(--motion);
  font-size: var(--text-icon-close);
  line-height: 1;
}
.image-preview-image {
  display: block;
  max-width: 100%;
  max-height: calc(92vh - 7rem);
  max-height: calc(92dvh - 7rem);
  width: auto;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}
.image-preview-caption {
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: var(--text-supporting);
  line-height: var(--leading-body);
  text-align: center;
}

.project-image-caption {
  font-size: var(--text-caption);
  color: var(--muted);
  line-height: var(--leading-caption);
  margin-top: 0.4rem;
}

.capabilities-note {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: var(--line) solid var(--faint);
  color: var(--muted);
  font-size: var(--text-supporting);
  line-height: var(--leading-body);
}
.capabilities-note strong { color: var(--ink); }

/* --- FOOTER ------------------------------------------------------------ */
footer { grid-column: 1 / -1; border-top: var(--line) solid var(--faint);
  padding: 1.5rem 0 2.5rem; font-size: var(--text-meta); color: var(--muted); transition: border-color var(--motion-theme) ease; }
footer .colophon { margin: 0; line-height: var(--leading-meta); }

/* Keep the fixed theme control out of the opening copy when the desktop
   layout has little or no right-side gutter. */
@media (min-width: 50.0625rem) and (max-width: 66rem) {
  .content .intro { padding-right: 4rem; }
}

/* A sticky rail taller than the viewport can make its lower links unreachable. */
@media (min-width: 50.0625rem) and (max-height: 36rem) {
  .sidebar { position: static; max-height: none; overflow: visible; }
}

/* --- SMALL SCREENS: collapse to one column, nav goes horizontal -------- */
@media (max-width: 50rem) {
  .layout { grid-template-columns: 1fr; gap: 0; padding: 0 1.5rem; }
  .sidebar { position: static; padding: calc(var(--space-section) + var(--space-block)) 0 0; margin: 0; max-height: none; overflow: visible; }
  .nav { flex-direction: row; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin-top: 1.5rem; }
  .nav a { border-left: none; padding: 0.3rem 0.6rem; margin-left: 0; border-radius: var(--radius-control); }
  .nav a.active { border-left: none; background-color: var(--accent-tint); color: var(--accent); font-weight: 600; }
  .contact { flex-direction: row; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
  .content { padding-top: 2.5rem; max-width: none; }
}

/* --- OTHER WORK -------------------------------------------------------- */
.other-projects-heading {
  margin-top: 3.5rem;
  margin-bottom: 1.75rem;
  border-top: 1px dashed var(--faint);
  padding-top: 2rem;
  font-size: var(--text-subsection);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: var(--leading-title);
  color: var(--muted);
}

.compact-entry {
  margin-bottom: 0;
}
.compact-entry + .compact-entry {
  margin-top: var(--space-entry);
}
.compact-entry h4 {
  font-size: var(--text-title-compact);
  font-weight: 600;
  line-height: var(--leading-title);
}
.compact-entry .meta { margin-top: 0.15rem; }
.compact-entry .compact-meta { margin-top: 0.25rem; }
.compact-entry p {
  font-size: var(--text-body-compact);
  line-height: var(--leading-meta);
  color: var(--ink);
  margin-top: 0.45rem;
}
.compact-entry .more {
  font-size: var(--text-link-small);
  margin-top: 0.45rem;
}

/* Arrow micro-interaction */
a .arrow {
  display: inline-block;
  transition: transform var(--motion) ease;
}
a:hover .arrow {
  transform: translate(2px, -2px);
}
a:hover .arrow-forward {
  transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  a:hover .arrow { transform: none; }
}

/* --- PRINT STYLES ------------------------------------------------------ */
@media print {
  :root,
  :root[data-theme="light"],
  :root[data-theme="dark"] {
    color-scheme: light !important;
    --bg: #fff;
    --ink: #000;
    --muted: #444;
    --faint: #ccc;
    --accent: #000;
    --accent-tint: transparent;
  }
  body { background: #fff !important; color: #000 !important; font-size: var(--text-print); transition: none; }
  a { color: #000 !important; text-decoration: underline; }
  .layout { display: block; padding: 0; position: static; }
  .sidebar { position: static; padding: 0 0 2rem; margin: 0; max-height: none; overflow: visible; border-bottom: 1px solid var(--faint); }
  .nav, .theme-toggle, .skip-link, .image-preview-dialog, .image-preview-dialog::backdrop { display: none; }
  body.image-preview-open { overflow: visible; }
  .content { padding: 2rem 0 0; max-width: none; }
  section { page-break-inside: avoid; border-top: 1px solid var(--faint); padding: 1.5rem 0; margin-top: 1.5rem; }
  section:first-of-type { border-top: none; }
}

/* --- PROJECT DETAIL PAGES --------------------------------------------- */
.site-name {
  display: inline-block;
  color: var(--ink);
  font-size: var(--text-name);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--leading-name);
}
.site-name:hover { color: var(--accent); }

.project-back {
  margin-top: var(--space-block);
  font-size: var(--text-supporting);
}

.project-header { margin-bottom: var(--space-section); }
.project-eyebrow { font-weight: 600; }
.project-title {
  margin-top: 0.35rem;
  font-size: var(--text-name);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--leading-name);
}
.project-header .meta { margin-top: 0.4rem; font-size: var(--text-meta); color: var(--muted); }
.project-header .entry-details { margin-top: 1rem; margin-bottom: 0; }
.project-lede {
  margin-top: 1rem;
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  color: var(--ink);
}

.project-content section:first-of-type {
  border-top: var(--line) solid var(--faint);
  margin-top: 0;
  padding-top: var(--space-section);
}

@media (max-width: 50rem) {
  .project-back { margin-top: 1rem; }
  .project-header { margin-bottom: 2.5rem; }
}

/* --- SHARED COMPONENTS (see DESIGN.md) -------------------------------- */
/* Label: small uppercase muted text for locations, eyebrows, nav groups. */
.sidebar .location,
.project-eyebrow,
.nav-label {
  font-size: var(--text-label);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Button: the control look applied to a link. Use only for the one link per
   entry that opens a project-detail page. */
.button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.9rem;
  border: var(--line) solid var(--faint);
  border-radius: var(--radius-control);
  color: var(--accent);
  font-size: var(--text-supporting);
  font-weight: 600;
  transition: color var(--motion), border-color var(--motion);
}
.entry .more:has(.button) { margin-top: 0.85rem; }

/* Nav group label (for example "Project pages" above the detail-page list). */
.nav-label { margin-bottom: 0.2rem; }
@media (max-width: 50rem) {
  .nav-label { flex-basis: 100%; margin-bottom: 0; }
}