/* Portfolio interface — Pip-Boy palette, editorial layout */
:root {
  color-scheme: dark;
  --navy: #1A212B;
  --slate: #293241;
  --ice: #98C1D9;
  --steel: #3D5A80;
  --coral: #EE6C4D;
  --offwhite: #F0F4F8;
  --muted: #B9CEDC;
  --quiet: #91A7B8;
  --line: rgba(152, 193, 217, 0.22);
  --ice-wash: rgba(152, 193, 217, 0.08);
  --nav-background: rgba(26, 33, 43, 0.98);
  --button-text: #1A212B;
  --coral-hover: #F58266;
  --form-border: rgba(152, 193, 217, 0.36);
  --error-text: #FFD1C5;
  --link-underline: rgba(152, 193, 217, 0.55);
  --education-wash: rgba(152, 193, 217, 0.04);
  --modal-border: rgba(152, 193, 217, 0.5);
  --media-text: #F0F4F8;
  --media-control-border: rgba(238, 246, 250, 0.5);
  --media-control-background: rgba(10, 15, 22, 0.78);
  --media-counter-background: rgba(10, 15, 22, 0.82);
  --nav-divider: rgba(152, 193, 217, 0.12);
  --font: "Source Sans 3", "Segoe UI", sans-serif;
  --content: 1728px;
  --gutter: clamp(1rem, 5vw, 6rem);
  --section-space: clamp(2rem, 4vw, 3.35rem);
}
:root[data-theme="light"] {
  color-scheme: light;
  --navy: #F3F6F8;
  --slate: #FFFFFF;
  --ice: #355D7A;
  --steel: #DCE6ED;
  --coral: #B64732;
  --offwhite: #202B36;
  --muted: #40576B;
  --quiet: #5D7183;
  --line: rgba(61, 90, 128, 0.22);
  --ice-wash: rgba(61, 90, 128, 0.07);
  --nav-background: rgba(243, 246, 248, 0.98);
  --button-text: #FFFFFF;
  --coral-hover: #963A28;
  --form-border: rgba(61, 90, 128, 0.38);
  --error-text: #A83227;
  --link-underline: rgba(53, 93, 122, 0.5);
  --education-wash: rgba(61, 90, 128, 0.035);
  --modal-border: rgba(61, 90, 128, 0.42);
  --nav-divider: rgba(61, 90, 128, 0.12);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background: var(--navy);
  color: var(--offwhite);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
}
body.modal-open { overflow: hidden; }
[hidden] { display: none !important; }
img { display: block; max-width: 100%; }
button, input, textarea { color: inherit; font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--ice); text-underline-offset: 0.2em; }
a:hover { color: var(--offwhite); }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: 0.65; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
.container { width: min(var(--content), 100% - (2 * var(--gutter))); margin-inline: auto; }
.skip-link {
  position: fixed; z-index: 300; top: 0.6rem; left: 0.6rem; padding: 0.65rem 0.9rem;
  background: var(--offwhite); color: var(--navy); transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { color: var(--offwhite); font-weight: 700; line-height: 1.15; }
p { color: var(--muted); }
section[id] { scroll-margin-top: 5.25rem; }
.section-title { margin-bottom: 1.05rem; font-size: clamp(1.55rem, 2.7vw, 2rem); letter-spacing: -0.025em; }
.text-link { color: var(--ice); font-weight: 600; }
.text-link:hover { color: var(--offwhite); }

/* Header */
.navbar {
  position: sticky; z-index: 100; top: 0;
  background: var(--nav-background);
  border-bottom: 1px solid var(--line);
}
.nav-container { min-height: 4.1rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.nav-brand { color: var(--offwhite); font-size: 1.2rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: clamp(1rem, 2.6vw, 2.2rem); margin: 0; padding: 0; list-style: none; }
.nav-links a {
  display: inline-flex; min-height: 2.75rem; align-items: center; position: relative;
  color: var(--muted); font-size: 0.95rem; text-decoration: none;
  transition: color 160ms ease;
}
.nav-links a:hover, .nav-links a.active { color: var(--coral); }
.nav-links a.active::after {
  position: absolute; right: 0; bottom: 0; left: 0; height: 2px;
  background: var(--coral); content: "";
}
.nav-toggle { display: none; }
.theme-toggle-btn {
  display: inline-grid; width: 2.5rem; height: 2.5rem; flex: 0 0 auto; place-items: center;
  border: 1px solid var(--line); border-radius: 0.2rem; background: transparent; color: var(--ice);
  transition: border-color 160ms ease, color 160ms ease;
}
.theme-toggle-btn:hover { border-color: var(--ice); color: var(--offwhite); }
.theme-toggle-icon { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[data-theme="dark"] .theme-icon-moon, [data-theme="light"] .theme-icon-sun { display: none; }

/* Hero */
.hero { padding-block: clamp(2rem, 4.2vw, 3.4rem); }
.hero-layout {
  display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(18rem, 0.8fr);
  align-items: center; gap: clamp(2rem, 5.5vw, 5rem);
}
.hero-copy { min-width: 0; }
.hero-title {
  max-width: 27ch; font-size: clamp(2.65rem, 4.15vw, 4.2rem);
  letter-spacing: -0.045em; line-height: 1.03;
}
.hero-title-tail { white-space: nowrap; }
.hero-subtitle { margin-top: 1rem; color: var(--ice); font-size: clamp(1rem, 1.6vw, 1.25rem); }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem 1.25rem; margin-top: 1.4rem; }
.btn {
  display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center;
  padding: 0.58rem 1rem; border: 1px solid transparent; border-radius: 0.25rem;
  font-weight: 650; line-height: 1.2; text-align: center; text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.btn-primary { background: var(--coral); color: var(--button-text); }
.btn-primary:hover { background: var(--coral-hover); color: var(--button-text); }
.btn-secondary { border-color: var(--line); color: var(--offwhite); }
.btn-secondary:hover { border-color: var(--ice); color: var(--ice); }
.hero-actions .text-link { margin-inline: 0.25rem; }
.hero-profile {
  display: grid; grid-template-columns: minmax(8.5rem, 0.9fr) minmax(9.5rem, 1fr);
  align-items: center; gap: 1.1rem; min-width: 0;
}
.hero-avatar-frame { overflow: hidden; aspect-ratio: 4 / 5; background: var(--slate); }
.hero-avatar-img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transform: scale(1.68); transform-origin: center 30%; }
.profile-details { min-width: 0; }
.profile-details p { font-size: 0.94rem; }
.profile-details .availability { display: flex; align-items: baseline; gap: 0.5rem; color: var(--offwhite); font-weight: 650; }
.availability-dot { display: inline-block; width: 0.55rem; height: 0.55rem; flex: 0 0 auto; border-radius: 50%; background: var(--coral); }
.profile-availability { margin-top: 0.3rem; }
.profile-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.8rem; margin-top: 0.85rem; }
.profile-links a { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.92rem; white-space: nowrap; }
.profile-icon { width: 1rem; height: 1rem; flex: 0 0 auto; fill: currentColor; }
.profile-icon-stroke { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Selected work */
.projects { padding-block: 0.4rem clamp(1.4rem, 2.2vw, 2rem); }
.section-heading-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.section-heading-row .section-title { margin-bottom: 0.8rem; }
.selected-projects { display: grid; gap: 1.15rem; }
.featured-project {
  display: grid; grid-template-columns: minmax(18rem, 0.85fr) minmax(0, 1.3fr);
  align-items: stretch; background: var(--slate); overflow: hidden;
}
.featured-project-copy { align-self: center; padding: clamp(1.2rem, 3vw, 2.15rem); }
.featured-project h3, .secondary-project h3 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); letter-spacing: -0.025em; }
.featured-project-copy > p:not(.project-technologies), .secondary-project-copy > p:not(.project-technologies) {
  max-width: 34ch; margin-top: 0.45rem; font-size: 1.02rem;
}
.project-technologies { margin-top: 0.85rem; color: var(--ice); font-size: 0.91rem; }
.featured-project > img { width: 100%; height: 100%; min-height: 18rem; object-fit: cover; }
.project-actions { display: flex; flex-wrap: wrap; gap: 0.45rem 1rem; margin-top: 0.95rem; }
.project-actions a, .project-detail-link, .modal-links a {
  padding: 0; border: 0; background: none; color: var(--ice); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--link-underline); text-underline-offset: 0.2em;
  transition: color 160ms ease;
}
.project-actions a:hover, .project-detail-link:hover, .modal-links a:hover { color: var(--offwhite); }
.project-detail-link { font: inherit; cursor: pointer; }
.secondary-projects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.2rem, 3vw, 2.2rem); }
.secondary-project { display: grid; grid-template-columns: minmax(9rem, 0.9fr) minmax(0, 1fr); align-items: center; gap: 1rem; min-width: 0; }
.secondary-project > img { width: 100%; height: 12rem; object-fit: cover; background: var(--slate); }
.secondary-project-copy { min-width: 0; padding-block: 0.6rem; }
.secondary-project-copy > p:not(.project-technologies) { margin-top: 0.35rem; }
.secondary-project-copy .project-detail-link { margin-top: 0.85rem; }
.all-projects-disclosure { margin-top: 1.4rem; border-top: 1px solid var(--line); }
.all-projects-disclosure summary {
  width: fit-content; padding: 0.8rem 0; color: var(--ice); cursor: pointer; font-weight: 650;
}
.all-projects-disclosure summary:hover { color: var(--offwhite); }
.filter-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin: 0.4rem 0 1rem; }
.tab-btn {
  padding: 0.3rem 0; border: 0; border-bottom: 2px solid transparent;
  background: none; color: var(--muted); font-size: 0.94rem;
}
.tab-btn:hover, .tab-btn.active { color: var(--offwhite); }
.tab-btn.active { border-color: var(--coral); }
.projects-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.project-card { min-width: 0; background: var(--slate); }
.project-preview { aspect-ratio: 16 / 9; overflow: hidden; background: var(--steel); }
.project-preview img { width: 100%; height: 100%; object-fit: cover; }
.project-body { padding: 1rem; }
.project-title { font-size: 1.18rem; }
.project-tagline { margin-top: 0.3rem; color: var(--muted); }
.project-tech-list { margin-top: 0.55rem; color: var(--ice); font-size: 0.9rem; }
.project-card-footer { display: flex; flex-wrap: wrap; gap: 0.7rem 1rem; align-items: center; margin-top: 0.8rem; }
.btn-card-action { color: var(--ice); font-weight: 650; }
.btn-card-action:hover { color: var(--offwhite); }
.show-more-projects-wrap { margin-top: 1rem; }
.btn-show-more { border: 0; background: none; color: var(--ice); font-weight: 650; text-decoration: underline; text-underline-offset: 0.2em; }
.btn-show-more:hover { color: var(--offwhite); }

/* Experience */
.portfolio-section { padding-block: var(--section-space); }
.experience-list { display: grid; }
.experience-entry {
  display: grid;
  grid-template-columns: minmax(0, 0.36fr) minmax(0, 0.64fr);
  grid-template-areas: "role statement" "role outcomes" "role technologies" "visit visit" "meta meta";
  gap: 0.35rem clamp(1.2rem, 2.2vw, 2.25rem);
  padding-block: 1.25rem;
}
.experience-entry + .experience-entry { border-top: 1px solid var(--line); }
.experience-meta { grid-area: meta; display: flex; align-items: center; gap: 1rem; }
.experience-section { padding-top: clamp(1.4rem, 2.2vw, 2rem); }
.experience-heading { grid-area: role; }
.experience-heading h3 { max-width: 24ch; font-size: 1.2rem; }
.experience-organization { margin-top: 0.12rem; color: var(--offwhite); }
.experience-period, .experience-location { color: var(--ice); font-size: 0.93rem; }
.experience-location { margin-top: 0; }
.experience-responsibilities { grid-area: outcomes; display: grid; gap: 0.28rem; margin: 0; padding-left: 1.05rem; color: var(--muted); }
.experience-responsibilities, .experience-statement, .experience-technologies { max-width: 70ch; }
.experience-responsibilities li { padding-left: 0.2rem; }
.experience-responsibilities li::marker { color: var(--ice); }
.experience-statement { grid-area: statement; color: var(--offwhite); font-weight: 650; }
.experience-technologies { grid-area: technologies; color: var(--quiet); font-size: 0.9rem; }
.experience-visit { grid-area: visit; display: inline-flex; min-height: 2.5rem; width: fit-content; align-items: center; color: var(--coral); font-weight: 600; text-underline-offset: 0.2em; }
.experience-visit:hover { color: var(--offwhite); }

/* Skills */
.skills-section { background: var(--ice-wash); }
.skills-primary-band { display: grid; grid-template-columns: minmax(11rem, 0.28fr) minmax(0, 0.72fr); align-items: center; gap: 1rem 2.25rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.skills-primary-band h3 { color: var(--ice); font-size: 1.05rem; }
.core-skill-list { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 0.45rem 1rem; margin: 0; padding: 0; list-style: none; }
.core-skill-list li { color: var(--offwhite); font-size: 1.03rem; font-weight: 650; }
.skills-editorial-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); padding-top: 0.75rem; }
.skill-group { min-width: 0; padding: 0.8rem 1.25rem 0.95rem; }
.skill-group h3 { display: flex; align-items: center; gap: 0.5rem; color: var(--ice); font-size: 0.98rem; }
.skill-group-icon { width: 1.3rem; height: 1.3rem; flex: 0 0 auto; fill: none; color: var(--ice); stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.skill-group-icon-brand { fill: currentColor; stroke: none; }
.skill-group p { max-width: 42ch; margin-top: 0.2rem; color: var(--muted); font-size: 0.92rem; }
.skill-group:nth-child(3n + 1) { padding-left: 0; border-right: 1px solid var(--line); }
.skill-group:nth-child(3n + 2) { border-right: 1px solid var(--line); }
.skill-group:nth-child(3n) { padding-right: 0; }
.skill-group:nth-child(n + 4) { border-top: 1px solid var(--line); }
.skill-group-web h3, .skill-group-web p { color: var(--quiet); }

/* Education and credentials */
.education-section { background: var(--education-wash); }
.credentials-section { padding-block: var(--section-space); }
.education-subsection[id] { scroll-margin-top: 5.25rem; }
.credential-subsection-title { margin-bottom: 0.8rem; font-size: 1.2rem; }
.certificate-subsection { margin-top: 1.8rem; }
.education-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); }
.education-entry { display: flex; min-width: 0; min-height: 9.5rem; flex-direction: column; padding-top: 0.7rem; border-top: 1px solid var(--line); }
.row-date { color: var(--ice); font-size: 0.9rem; font-weight: 600; }
.education-entry h4 { margin-top: 0.3rem; font-size: 1.15rem; }
.education-entry > p:not(.row-date) { margin-top: 0.18rem; }
.education-entry .row-detail { margin-top: auto; padding-top: 0.65rem; color: var(--quiet); font-size: 0.93rem; }
.credential-ledger { width: 100%; border-collapse: collapse; table-layout: fixed; }
.credential-ledger th, .credential-ledger td { padding: 0.52rem 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.credential-ledger thead th { color: var(--quiet); font-size: 0.92rem; font-weight: 600; }
.credential-ledger thead th:first-child, .credential-ledger tbody th { width: 42%; }
.credential-ledger thead th:nth-child(2) { width: 39%; }
.credential-ledger thead th:last-child { width: 19%; }
.credential-ledger tbody th { color: var(--offwhite); font-weight: 700; }
.credential-ledger tbody h4 { font-size: 1rem; }
.credential-ledger tbody td { color: var(--muted); }
.credential-ledger tbody td:last-child { color: var(--ice); white-space: nowrap; }

/* CV strip */
.resume-section { padding-block: 1.5rem; background: var(--slate); }
.resume-section .section-title { margin-bottom: 0.85rem; font-size: 1.35rem; }
.cv-list { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
.cv-row { display: grid; align-content: start; justify-items: start; gap: 0.22rem; min-width: 0; padding: 0.2rem 1.4rem; border-left: 1px solid var(--line); }
.cv-row:first-child { padding-left: 0; border-left: 0; }
.cv-row h3 { display: flex; align-items: center; gap: 0.65rem; font-size: 1rem; }
.cv-icon { width: 1.9rem; height: 1.9rem; flex: 0 0 auto; color: var(--ice); }
.cv-description { color: var(--muted); font-size: 0.94rem; }
.cv-row a { display: inline-flex; min-height: 2.5rem; align-items: center; gap: 0.35rem; color: var(--coral); font-size: 0.91rem; text-underline-offset: 0.2em; }
.cv-row a:hover { color: var(--offwhite); }
.external-link-icon { width: 0.9rem; height: 0.9rem; flex: 0 0 auto; }

/* Contact */
.contact { padding-block: clamp(2.2rem, 4.5vw, 3.8rem); background: var(--ice-wash); }
.contact .section-title { margin-bottom: 0.35rem; font-size: clamp(2rem, 4vw, 2.7rem); }
.section-subtitle { max-width: 48ch; margin-bottom: 1.3rem; }
.contact-wrap { display: grid; grid-template-columns: minmax(14rem, 0.8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 5vw, 4.5rem); }
.contact-info-card, .contact-form { min-width: 0; }
.contact-form h3 { margin-bottom: 0.7rem; font-size: 1.2rem; }
.contact-info-card .section-title { max-width: 14ch; }
.contact-info-card .section-subtitle { max-width: 42ch; }
.contact-whatsapp { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.9rem; background: var(--coral); color: var(--button-text); font-weight: 700; text-decoration: none; }
.contact-whatsapp:hover { background: var(--coral-hover); color: var(--button-text); }
.contact-info-card .contact-whatsapp { min-height: 2.75rem; align-items: center; }
.contact-whatsapp .external-link-icon { width: 1rem; height: 1rem; }
.contact-channel-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0.5rem 1rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.contact-channel-list li { display: grid; gap: 0.05rem; min-width: 0; }
.contact-channel-label { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--quiet); font-size: 0.87rem; }
.contact-icon { width: 1.2rem; height: 1.2rem; flex: 0 0 auto; color: var(--ice); }
.contact-channel-list a { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.2rem; overflow-wrap: anywhere; }
.contact-channel-list a > span { overflow-wrap: anywhere; }
.contact-channel-list .external-link-icon { width: 0.8rem; height: 0.8rem; }
.contact-channel-list li:nth-child(n + 3) a { color: var(--coral); }
.contact-channel-list li:nth-child(n + 3) a:hover { color: var(--offwhite); }
.contact-form { display: grid; gap: 0.8rem; }
.contact-form-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0.85rem; }
.contact-form .form-group { display: grid; gap: 0.25rem; min-width: 0; }
.contact-form label { color: var(--offwhite); font-size: 0.93rem; font-weight: 600; }
.form-control {
  width: 100%; min-height: 2.7rem; padding: 0.55rem 0.7rem;
  border: 1px solid var(--form-border); border-radius: 0.2rem;
  background: var(--navy); color: var(--offwhite);
}
textarea.form-control { min-height: 7rem; resize: vertical; }
.form-control:focus-visible { border-color: var(--ice); outline-color: var(--coral); }
.form-control[aria-invalid="true"] { border-color: var(--coral); }
.form-field-error, .form-status-msg { color: var(--error-text); font-size: 0.91rem; }
.form-status-msg.success { color: var(--ice); }
.form-status-msg.pending { color: var(--offwhite); }
.contact-form .btn-primary { justify-self: start; min-width: 9rem; }

/* Project details */
.modal-overlay {
  width: min(62rem, calc(100vw - 2rem)); max-width: none; max-height: min(92dvh, 54rem);
  margin: auto; padding: 0; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--modal-border); border-radius: 0.45rem;
  background: var(--slate); color: var(--offwhite);
}
.modal-overlay:not([open]) { display: none; }
.modal-overlay::backdrop { background: rgba(10,15,22,.76); }
.modal-card { min-width: 0; }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem 0.75rem; }
.modal-header h3 { font-size: 1.45rem; }
.modal-header p { max-width: 62ch; margin-top: 0.25rem; color: var(--ice); }
.modal-close-btn {
  display: inline-grid; width: 2.45rem; height: 2.45rem; flex: 0 0 auto; place-items: center;
  border: 1px solid var(--line); border-radius: 0.25rem; background: var(--navy); color: var(--offwhite);
  font-size: 1.15rem;
}
.modal-close-btn:hover { border-color: var(--coral); color: var(--coral); }
.modal-content { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(16rem, 0.75fr); gap: 1rem 1.35rem; padding: 0 1.1rem 1.1rem; min-width: 0; }
.modal-gallery { grid-row: 1 / span 3; min-width: 0; margin: 0; }
.modal-gallery-stage { position: relative; display: grid; min-height: 22rem; place-items: center; overflow: hidden; background: var(--navy); }
.modal-gallery-stage:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.modal-gallery-image { width: 100%; height: 100%; max-height: min(58vh, 32rem); object-fit: contain; }
.modal-gallery-control {
  position: absolute; top: 50%; display: grid; width: 2.7rem; height: 2.7rem; place-items: center;
  transform: translateY(-50%); border: 1px solid var(--media-control-border); border-radius: 50%;
  background: var(--media-control-background); color: var(--media-text); font-size: 1.75rem; line-height: 1;
}
.modal-gallery-control:hover { border-color: var(--coral); color: var(--coral); }
.modal-gallery-previous { left: 0.7rem; }
.modal-gallery-next { right: 0.7rem; }
.modal-gallery-counter { position: absolute; right: 0.7rem; bottom: 0.65rem; padding: 0.2rem 0.5rem; background: var(--media-counter-background); color: var(--media-text); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.modal-gallery-thumbnails { display: flex; gap: 0.45rem; margin-top: 0.55rem; padding-bottom: 0.15rem; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
.modal-gallery-thumbnail { width: 5.4rem; height: 3.2rem; flex: 0 0 auto; padding: 0; overflow: hidden; border: 2px solid transparent; background: var(--navy); opacity: 0.62; }
.modal-gallery-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.modal-gallery-thumbnail:hover, .modal-gallery-thumbnail.active { opacity: 1; }
.modal-gallery-thumbnail.active { border-color: var(--coral); }
.modal-highlights h4 { margin-bottom: 0.3rem; color: var(--offwhite); font-size: 1rem; }
.modal-highlights ul { display: grid; gap: 0.24rem; margin: 0; padding-left: 1.15rem; color: var(--muted); }
.modal-highlights li::marker { color: var(--ice); }
.modal-technologies { align-self: end; color: var(--quiet); overflow-wrap: anywhere; font-size: 0.93rem; }
.modal-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-self: end; padding-top: 0.75rem; border-top: 1px solid var(--line); }

/* Footer */
.footer { padding-block: 0.75rem; border-top: 1px solid var(--line); }
.footer p { color: var(--quiet); font-size: 0.9rem; }

/* Responsive */
@media (max-width: 900px) {
  .hero-layout { grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.7fr); gap: 1.5rem; }
  .hero-profile { grid-template-columns: minmax(7.5rem, .85fr) minmax(8.7rem, 1fr); gap: 0.8rem; }
  .hero-avatar-img { transform: scale(1.68); }
  .secondary-project { grid-template-columns: 1fr; gap: 0.5rem; }
  .secondary-project > img { height: 10rem; }
  .experience-entry {
    grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.62fr);
    grid-template-areas: "role statement" "role outcomes" "role technologies" "visit visit" "meta meta";
    gap: 0.4rem 1.5rem;
  }
  .skills-primary-band { grid-template-columns: 1fr; gap: 0.55rem; align-items: start; }
  .core-skill-list { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .skills-editorial-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .skill-group { padding: 0.8rem 1rem 0.9rem; }
  .skill-group:nth-child(3n + 1), .skill-group:nth-child(3n + 2), .skill-group:nth-child(3n) { padding-inline: 1rem; border-right: 0; }
  .skill-group:nth-child(odd) { padding-left: 0; border-right: 1px solid var(--line); }
  .skill-group:nth-child(even) { padding-right: 0; }
  .skill-group:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .projects-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 700px) {
  :root { --gutter: 1rem; --section-space: 2rem; }
  html { scroll-padding-top: 4.5rem; }
  section[id] { scroll-margin-top: 4.5rem; }
  .nav-container { min-height: 3.6rem; }
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.5rem; padding: 0.35rem 0.65rem;
    border: 1px solid var(--line); border-radius: 0.2rem; background: transparent; color: var(--offwhite);
  }
  .nav-toggle-icon { width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--coral); border-bottom: 2px solid var(--coral); transform: rotate(45deg) translateY(-2px); }
  .nav-links[hidden] { display: none !important; }
  #primaryNavigation { position: absolute; top: 100%; right: 0; left: 0; padding: 0 var(--gutter); background: var(--slate); border-bottom: 1px solid var(--line); }
  .nav-links { display: grid; grid-template-columns: 1fr; gap: 0; padding-block: 0.4rem; }
  .nav-links a { width: 100%; min-height: 2.75rem; border-bottom: 1px solid var(--nav-divider); }
  .nav-links li:last-child a { border-bottom: 0; }
  .nav-links a.active::after { right: auto; width: 2rem; }
  .hero { padding-block: 1.65rem 1.9rem; }
  .hero-layout { grid-template-columns: 1fr; gap: 1.25rem; }
  .hero-title { max-width: 22ch; font-size: clamp(2.3rem, 9.5vw, 3.2rem); line-height: 1.02; }
  .hero-subtitle { margin-top: 0.7rem; font-size: 1rem; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1.15fr; gap: 0.5rem; margin-top: 1rem; }
  .hero-actions > .text-link { grid-column: 1 / -1; justify-self: start; }
  .hero-profile { grid-template-columns: 8.2rem minmax(0,1fr); align-items: center; gap: 0.9rem; margin-top: 0.15rem; }
  .hero-avatar-frame { aspect-ratio: 4 / 5; }
  .hero-avatar-img { transform: scale(1.68); transform-origin: center 30%; }
  .profile-details p { font-size: 0.92rem; }
  .profile-details .availability { display: block; }
  .availability-dot { margin-right: 0.3rem; vertical-align: 0.05em; }
  .profile-availability { max-width: 22ch; }
  .profile-links { gap: 0.9rem; margin-top: 0.55rem; }
  .projects { padding-top: 0; }
  .featured-project { grid-template-columns: 1fr; }
  .featured-project-copy { grid-row: 2; padding: 1rem 1rem 0.25rem; }
  .featured-project > img { grid-row: 1; min-height: 0; aspect-ratio: 16 / 9; }
  .secondary-projects { grid-template-columns: 1fr; gap: 1.35rem; }
  .secondary-project { grid-template-columns: minmax(7rem, 0.9fr) minmax(0,1.1fr); gap: 0.8rem; }
  .secondary-project > img { height: auto; aspect-ratio: 1 / 1; }
  .secondary-project h3 { font-size: 1.28rem; }
  .secondary-project-copy > p:not(.project-technologies) { font-size: 0.94rem; }
  .project-technologies { margin-top: 0.5rem; font-size: 0.86rem; }
  .projects-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .project-card { background: transparent; }
  .project-body { padding: 0.75rem 0; }
  .project-preview { aspect-ratio: 16 / 9; }
  .project-card + .project-card { padding-top: 0.8rem; }
  .experience-entry {
    grid-template-columns: minmax(0,1fr);
    grid-template-areas: "role" "statement" "outcomes" "technologies" "visit" "meta";
    gap: 0.35rem;
  }
  .experience-entry + .experience-entry { margin-top: 0.3rem; }
  .experience-entry .experience-visit { min-height: 2.75rem; }
  .experience-heading h3 { max-width: none; }
  .experience-period, .experience-location { font-size: 0.9rem; }
  .experience-statement, .experience-responsibilities, .experience-technologies { max-width: 62ch; }
  .skills-primary-band { padding-bottom: 0.9rem; }
  .core-skill-list { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0.5rem 1rem; }
  .skills-editorial-grid { grid-template-columns: minmax(0,1fr); padding-top: 0.3rem; }
  .skill-group, .skill-group:nth-child(3n + 1), .skill-group:nth-child(3n + 2), .skill-group:nth-child(3n) { padding: 0.75rem 0; border-top: 1px solid var(--line); border-right: 0; }
  .skill-group:first-child { border-top: 0; }
  .education-grid { grid-template-columns: 1fr; gap: 1.1rem; }
  .education-entry { min-height: 0; }
  .credential-ledger { display: block; }
  .credential-ledger thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  .credential-ledger tbody, .credential-ledger tbody tr { display: block; }
  .credential-ledger tbody tr { padding: 0.65rem 0; border-bottom: 1px solid var(--line); }
  .credential-ledger tbody th, .credential-ledger tbody td { display: block; width: auto; padding: 0; border: 0; }
  .credential-ledger tbody td { margin-top: 0.12rem; }
  .credential-ledger tbody td:last-child { white-space: normal; }
  .cv-list { grid-template-columns: 1fr; }
  .cv-row, .cv-row:first-child { padding: 0.65rem 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .cv-row a { min-height: 2.75rem; }
  .cv-row:last-child { border-bottom: 0; }
  .contact-wrap { grid-template-columns: 1fr; gap: 1.4rem; }
  .contact-channel-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .contact-form-row { gap: 0.7rem; }
  .modal-overlay { width: calc(100vw - 1rem); max-height: 92dvh; margin: auto auto 0; border-radius: 0.45rem 0.45rem 0 0; }
  .modal-header { padding: 0.85rem 0.85rem 0.65rem; }
  .modal-content { grid-template-columns: 1fr; gap: 0.75rem; padding: 0 0.85rem 0.9rem; }
  .modal-gallery { grid-row: auto; }
  .modal-gallery-stage { min-height: 0; aspect-ratio: 16 / 9; }
  .modal-gallery-image { max-height: 34vh; }
  .modal-gallery-control { width: 2.5rem; height: 2.5rem; }
}
@media (max-width: 430px) {
  .hero-title { font-size: clamp(2.05rem, 8.9vw, 2.45rem); }
  .secondary-project { grid-template-columns: minmax(6.25rem, 0.85fr) minmax(0,1.15fr); }
  .secondary-project > img { aspect-ratio: 1 / 1.15; }
  .contact-channel-list { grid-template-columns: 1fr; }
  .contact-form-row { grid-template-columns: 1fr; }
  .contact-form .btn-primary { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}