/* Content-first portfolio: mobile first, shared by all six pages.
   Keep this file and tools/build.py's image sizes rules in sync.
   No hidden overflow, fixed-height text boxes, animation, or runtime library. */
:root {
  color-scheme: light;
  --paper: #fff;
  --ink: #202124;
  --body: #414349;
  --muted: #656970;
  --line: #e3e5e7;
  --link: #175ab2;
  --width: 1000px;
  --gutter: 20px;
  --left-gutter: max(var(--gutter), env(safe-area-inset-left, 0px));
  --right-gutter: max(var(--gutter), env(safe-area-inset-right, 0px));
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 24px; font-size: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 1rem/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
}
[hidden] { display: none !important; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { text-decoration: underline; }
a:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; }
p, h1, h2, h3, dl, figure { margin: 0; }
h1, h2, h3 { color: var(--ink); font-weight: 600; line-height: 1.25; }
h1 { font-size: 2.25rem; letter-spacing: -.04em; }
h2 { font-size: 1.4375rem; letter-spacing: -.025em; }
h3 { font-size: 1.3125rem; letter-spacing: -.02em; }
p { color: var(--body); }
img, video, svg { max-width: 100%; height: auto; }
.wrap { width: min(var(--width), calc(100% - var(--left-gutter) - var(--right-gutter))); margin-inline: auto; }
/* The skip link is off-screen only until keyboard focus. */
.skip-link { position: absolute; transform: translateY(-150%); top: 8px; left: 16px; padding: 10px 16px; background: white; z-index: 10; }
.skip-link:focus { transform: none; }
.site-header { border-bottom: 1px solid var(--line); }
.header-inner { padding-block: 8px 4px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-size: 1rem; font-weight: 600; text-decoration: none; }
.site-nav { display: flex; gap: 0 16px; flex-wrap: wrap; align-items: center; }
.home-nav { display: flex; gap: inherit; flex-wrap: wrap; align-items: center; }
.site-nav a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; padding-block: 6px; color: var(--body); font-size: .875rem; text-decoration: none; }
.site-nav a:hover { text-decoration: underline; }
.intro { padding-block: 40px 36px; }
.intro .subtitle { margin-top: 12px; font-size: 1.25rem; line-height: 1.5; color: var(--body); letter-spacing: -.015em; max-width: 42rem; }
.intro-copy { margin-top: 20px; max-width: 710px; }
.intro-links { display: flex; gap: 8px 24px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.intro-links a { min-height: 44px; display: inline-flex; align-items: center; padding-block: 8px; font-size: 1rem; text-decoration: none; }
.intro-links a:hover { text-decoration: underline; }
.section { border-top: 1px solid var(--line); padding-block: 30px 36px; }
.section-title { margin-bottom: 14px; }
.work-list { margin-top: 4px; }
.work-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding-block: 24px; }
.work-row > *, .project-row > *, .background-grid > * { min-width: 0; }
.work-row + .work-row { border-top: 1px solid var(--line); }
.work-row:last-child { padding-bottom: 0; }
.work-date { font-size: .875rem; color: var(--muted); }
.work-role { margin-top: 6px; font-size: .875rem; color: var(--muted); }
.work-description { margin-top: 13px; max-width: 700px; }
/* Inline-block lets long link labels wrap naturally, including the final arrow. */
.read-link { display: inline-block; min-height: 44px; max-width: 100%; padding-block: 10px; margin-top: 8px; font-size: 1rem; line-height: 1.5; text-decoration: none; }
.read-link:hover { text-decoration: underline; }
.project-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding-block: 24px; }
.project-row + .project-row { border-top: 1px solid var(--line); }
.project-row:last-child { padding-bottom: 0; }
.project-row h3 { font-size: 1.25rem; }
.project-row h3 a { display: inline-block; min-height: 44px; padding-block: 9px; text-decoration: none; color: var(--ink); }
.project-row h3 a:hover { color: var(--link); text-decoration: underline; }
.project-summary { max-width: 740px; margin-top: 3px; font-size: 1rem; }
.project-status { grid-row: 1; font-size: .8125rem; color: var(--muted); }
.project-row .read-link { margin-top: 4px; }
.background-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 12px; }
.education h3 { font-size: 1.125rem; margin-bottom: 8px; }
.education p { font-size: 1rem; }
.education .education-note { margin-top: 14px; max-width: 340px; }
.skills > div + div { margin-top: 18px; }
.skills dt { font-size: .9375rem; font-weight: 600; line-height: 1.4; }
.skills dd { margin: 5px 0 0; font-size: 1rem; color: var(--body); }
.contact p { margin-top: 12px; max-width: 660px; font-size: 1rem; }
.draft-note { color: var(--muted); font-size: .8125rem !important; }
.site-footer { border-top: 1px solid var(--line); padding-block: 18px max(24px, env(safe-area-inset-bottom, 0px)); }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 24px; }
.site-footer p { font-size: .8125rem; color: var(--muted); }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; color: var(--muted); }
/* Detail pages retain the same content on mobile, tablet, and desktop. */
.detail-page { padding-top: 18px; padding-bottom: 40px; }
.detail-header { padding-block: 20px 26px; }
.detail-header h1 { font-size: 2rem; max-width: 820px; }
.detail-subtitle { font-size: 1.1875rem; color: var(--body); margin-top: 12px; letter-spacing: -.015em; }
.detail-meta { margin-top: 16px; font-size: .875rem; color: var(--muted); }
.detail-meta span { display: block; margin-top: 3px; }
.detail-intro { max-width: 720px; margin-top: 20px; font-size: 1rem; }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; border-top: 1px solid var(--line); padding-top: 20px; }
.detail-body { min-width: 0; width: 100%; max-width: 720px; margin-inline: auto; }
.detail-section + .detail-section { margin-top: 32px; }
.detail-section h2 { font-size: 1.3125rem; margin-bottom: 13px; }
.detail-section p + p { margin-top: 16px; }
.detail-nav { align-self: start; width: 100%; max-width: 720px; margin-inline: auto; font-size: .875rem; }
.detail-nav p { color: var(--muted); font-size: .8125rem; margin: 0 0 8px; }
.detail-nav ol { list-style: none; padding: 0; margin: 0; }
.detail-nav a { display: flex; align-items: center; min-height: 44px; padding-block: 10px; line-height: 1.5; color: var(--body); text-decoration: none; }
.detail-nav a:hover { color: var(--link); text-decoration: underline; }
.desktop-toc { display: none; }
/* Native disclosure, no mobile menu script. Only the index is collapsible. */
.mobile-toc { border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.mobile-toc summary { min-height: 44px; padding-block: 10px; cursor: pointer; color: var(--body); }
.mobile-toc summary::marker { color: var(--muted); }
.mobile-toc[open] summary { margin-bottom: 4px; }
.mobile-toc .toc-list { padding-left: 18px; }
/* Real photos stay uncropped, project-specific, and fully within the text column. */
.photo-gallery { margin-top: 32px; }
.photo-gallery h2 { margin-bottom: 20px; }
.project-photo-row { margin-top: 24px; }
.project-photo { min-width: 0; width: 100%; max-width: var(--photo-cap, 720px); margin: 0 auto; }
.project-photo + .project-photo { margin-top: 24px; }
.project-photo a, .project-photo picture { display: block; }
.project-photo img { display: block; width: 100%; height: auto; max-width: 100%; background: #f6f6f6; }
.project-photo figcaption { font-size: .875rem; line-height: 1.6; color: var(--muted); margin-top: 10px; }
.photo-size-note { display: block; margin-top: 4px; font-size: .8125rem; }
.no-script { padding: 12px 0; font-size: .875rem; }
/* Medium windows: comfortable margins and modest use of columns. */
@media (min-width: 40em) {
  :root { --gutter: 28px; }
  .photo-pair { display: flex; gap: 24px; align-items: flex-start; }
  .photo-pair > .project-photo { flex: var(--photo-ratio, 1) 1 0%; width: auto; max-width: none; margin: 0; }
  body { font-size: 1.0625rem; }
  .header-inner { min-height: 78px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 28px; padding-block: 10px; }
  .site-nav { gap: 0 24px; }
  .intro { padding-block: 64px 52px; }
  .intro .subtitle { font-size: 1.375rem; }
  .intro-copy, .detail-intro { font-size: 1.125rem; }
  .section { padding-block: 38px 46px; }
  h1 { font-size: 2.75rem; }
  h2 { font-size: 1.5625rem; }
  h3 { font-size: 1.375rem; }
  .work-row { grid-template-columns: 120px minmax(0, 1fr); gap: 28px; padding-block: 30px; }
  .work-date { padding-top: 4px; font-size: .9375rem; }
  .work-role { font-size: .9375rem; margin-top: 5px; }
  .work-description { margin-top: 15px; }
  .project-row { grid-template-columns: minmax(0, 1fr) 140px; gap: 28px; padding-block: 25px; }
  .project-status { grid-row: auto; text-align: right; padding-top: 13px; }
  .background-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 40px; padding-top: 16px; }
  .detail-page { padding-top: 28px; padding-bottom: 64px; }
  .detail-header { padding-block: 24px 30px; }
  .detail-header h1 { font-size: 2.5rem; }
  .detail-subtitle { font-size: 1.3125rem; }
  .detail-meta { display: flex; gap: 8px 24px; flex-wrap: wrap; }
  .detail-meta span { margin: 0; }
  .detail-layout { padding-top: 28px; }
  .detail-section h2 { font-size: 1.375rem; }
  .detail-section + .detail-section { margin-top: 36px; }
}
/* Full-width reading layout. No second column until there is room for it. */
@media (min-width: 56em) {
  :root { --gutter: 32px; }
  h1 { font-size: 3.125rem; }
  .detail-header h1 { font-size: 2.75rem; }
  .intro { padding-block: 72px 60px; }
  .work-row { grid-template-columns: 160px minmax(0, 1fr); gap: 38px; }
  .background-grid { gap: 72px; }
  .detail-layout { grid-template-columns: minmax(0, 1fr) 220px; gap: 60px; padding-top: 36px; }
  .detail-body { grid-column: 1; grid-row: 1; margin: 0; }
  .detail-nav { grid-column: 2; grid-row: 1; margin: 0; }
  .desktop-toc { display: block; }
  .mobile-toc { display: none; }
  .detail-nav a { color: var(--muted); }
}
@media (min-width: 56em) and (min-height: 48em) {
  .detail-nav { position: sticky; top: 24px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print {
  @page { margin: 18mm; }
  body { font-size: 10.5pt; line-height: 1.5; color: black; }
  .wrap { width: 100%; }
  .site-header, .site-footer, .intro-links, .read-link, .detail-nav, .contact, .no-script { display: none; }
  .intro { padding-top: 0; padding-bottom: 20px; }
  h1 { font-size: 28pt; }
  h2 { font-size: 16pt; }
  h3 { font-size: 13pt; }
  .section { padding-block: 20px; }
  .work-row { grid-template-columns: 95px 1fr; gap: 22px; }
  .work-row, .project-row, .project-photo { break-inside: avoid; }
  .intro-copy, .detail-intro { font-size: 11pt; }
  .detail-layout { display: block; }
  .detail-page { padding: 0; }
  h1, h2, h3 { break-after: avoid; }
  p { orphans: 3; widows: 3; }
  .detail-section + .detail-section { margin-top: 23px; }
}


/* Company identity uses its own layout column, not a watermark or overlay.
   Widths are bounded so the logo shrinks with the card and never covers copy. */
.company-card, .company-header {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.company-card { padding: 18px 16px; }
.company-header { padding: 22px 18px; margin-bottom: 28px; }
.company-heading {
  --logo-width: min(42%, 320px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--logo-width));
  align-items: start;
  gap: 16px;
}
.company-heading--pike-robotics { --logo-width: min(28%, 152px); }
.company-heading-copy { min-width: 0; }
.company-logo {
  display: block;
  width: 100%;
  height: auto;
  justify-self: end;
  align-self: start;
  opacity: 1;
  object-fit: contain;
}
/* On a phone only the title shares the top row with the logo. Supporting
   details reclaim the full width below it instead of becoming a narrow column. */
.company-header .company-heading-copy { display: contents; }
.company-header .company-heading-copy > h1 { grid-column: 1; grid-row: 1; }
.company-header .company-logo { grid-column: 2; grid-row: 1; }
.company-header .detail-subtitle, .company-header .detail-meta {
  grid-column: 1 / -1;
  margin-top: 0;
}
.company-header .detail-meta { font-size: .875rem; }
@media (min-width: 40em) {
  .company-card { padding: 22px 24px; }
  .company-header { padding: 28px; margin-bottom: 32px; }
  .company-heading { gap: 24px; }
  .company-header .company-heading-copy { display: block; }
  .company-header .detail-subtitle { margin-top: 12px; }
  .company-header .detail-meta { margin-top: 16px; }
  .company-header .company-heading { --logo-width: min(40%, 340px); }
  .company-header .company-heading--pike-robotics { --logo-width: min(24%, 180px); }
}
@media print {
  .company-card, .company-header { border: 0; border-radius: 0; padding: 0; }
  .company-heading { --logo-width: 25%; }
  .company-heading--pike-robotics { --logo-width: 16%; }
}