/* Base reset, design tokens and components are bundled here:
   only index.html, styles.css and script.js need replacing. */
:root {
  color-scheme: dark;
  --color-bg: #0c141b;
  --color-surface: #111e27;
  --color-raised: #182a34;
  --color-text: #edf2f1;
  --color-muted: #a5b7bd;
  --color-accent: #91e5bc;
  --color-accent-ink: #0c2119;
  --color-line: rgb(211 231 233 / 14%);
  --color-overlay: rgb(4 10 14 / 88%);
  --font-body: 'Work Sans', system-ui, sans-serif;
  --font-display: 'Work Sans', system-ui, sans-serif;
  --text-xs: clamp(.75rem, .72rem + .14vw, .875rem);
  --text-sm: clamp(.875rem, .84rem + .14vw, .95rem);
  --text-base: clamp(1rem, .98rem + .1vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1rem + .45vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  --text-2xl: clamp(1.75rem, 1.1rem + 2vw, 2.75rem);
  --text-hero: clamp(2.75rem, 1.15rem + 4.4vw, 5.5rem);
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem;
  --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;
  --radius-sm: .25rem; --radius-md: .5rem; --radius-lg: 1rem;
  --radius-full: 999px;
  --content-wide: 1200px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font: 400 var(--text-base)/1.65 var(--font-body); -webkit-font-smoothing: antialiased; isolation: isolate; }
body.modal-open { overflow: hidden; }
main, .footer { position: relative; z-index: 1; }
.ambient-background { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
h1, h2, h3, p, ul, figure, dl, dd { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.18; }
h2 { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -.045em; }
h3 { font-size: var(--text-lg); font-weight: 600; letter-spacing: -.02em; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button, summary, a { -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: wait; }
img { display: block; max-width: 100%; }
ul { padding-left: var(--space-5); }
[hidden] { display: none !important; }
::selection { background: var(--color-accent); color: var(--color-accent-ink); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 5px; border-radius: var(--radius-sm); }
section { scroll-margin-top: var(--space-4); }
.container { width: min(calc(100% - 4rem), var(--content-wide)); margin-inline: auto; }
.section { padding-block: clamp(var(--space-16), 7vw, var(--space-24)); }
.eyebrow, .mini-label { font-size: var(--text-xs); font-weight: 500; line-height: 1.5; letter-spacing: .09em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: var(--space-2); color: var(--color-accent); margin-bottom: var(--space-5); }
.mini-label { color: var(--color-muted); }
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--color-accent); flex: 0 0 auto; }
.skip-link { position: fixed; top: var(--space-3); left: var(--space-3); transform: translateY(-180%); padding: var(--space-3) var(--space-4); background: var(--color-accent); color: var(--color-accent-ink); z-index: 100; }
.skip-link:focus { transform: translateY(0); }

/* Navigation */
.site-header { position: sticky; top: 0; background: rgb(12 20 27 / 94%); backdrop-filter: blur(16px); border-bottom: 1px solid var(--color-line); z-index: 20; }
.reading-progress { position: absolute; inset: auto 0 -1px; height: 2px; overflow: hidden; pointer-events: none; }
.reading-progress span { display: block; height: 100%; background: var(--color-accent); transform: scaleX(0); transform-origin: left; opacity: .75; }
.navbar { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); position: relative; }
.logo { font-size: var(--text-lg); letter-spacing: -.05em; font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; transition: transform .3s var(--ease); }
.logo span { color: var(--color-accent); transition: transform .3s var(--ease); }
.logo:hover span:first-child { transform: translateX(-3px); }
.logo:hover span:last-child { transform: translateX(3px); }
.nav-menu { display: flex; gap: var(--space-8); align-items: center; list-style: none; padding: 0; }
.nav-link { position: relative; min-height: 44px; display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-muted); font-size: var(--text-sm); transition: color .2s var(--ease); }
.nav-link::after { content: ''; position: absolute; left: 0; bottom: 8px; width: 100%; height: 1px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav-link:hover::after, .nav-link[aria-current="location"]::after { transform: scaleX(1); }
.nav-link > span { transition: transform .3s var(--ease); }
.nav-link:hover > span { transform: translate(2px, -2px); }
.nav-link:hover, .nav-link[aria-current="location"] { color: var(--color-accent); }
.nav-contact { color: var(--color-text); }
.menu-toggle { position: relative; overflow: hidden; align-items: center; gap: var(--space-4); min-height: 44px; padding: var(--space-2) var(--space-3); background: transparent; border: 1px solid var(--color-line); border-radius: var(--radius-sm); font-size: var(--text-sm); display: none; transition: border-color .25s var(--ease), background .25s var(--ease); }
.menu-toggle:hover { border-color: var(--color-muted); background: var(--color-raised); }
.menu-symbol { color: var(--color-accent); font-size: var(--text-lg); display: inline-block; transition: transform .35s var(--ease); }
.menu-toggle[aria-expanded="true"] .menu-symbol { transform: rotate(180deg); }
.mobile-contact { display: none; position: relative; overflow: hidden; align-items: center; gap: var(--space-2); min-height: 44px; padding: var(--space-2) var(--space-4); margin-left: auto; margin-right: var(--space-2); border: 1px solid var(--color-accent); border-radius: var(--radius-sm); color: var(--color-accent); font-size: var(--text-sm); font-weight: 600; transition: background .25s var(--ease), color .25s var(--ease); }
.mobile-contact:hover, .mobile-contact:active { background: var(--color-accent); color: var(--color-accent-ink); }

/* Introduction */
.hero { padding-top: clamp(var(--space-12), 6vw, var(--space-20)); padding-bottom: var(--space-10); }
.hero-layout { display: grid; grid-template-columns: 1.3fr .8fr; align-items: center; gap: clamp(var(--space-8), 6vw, var(--space-20)); }
.hero h1 { font-size: var(--text-hero); font-weight: 600; letter-spacing: -.065em; line-height: 1.02; }
.name-period { color: var(--color-accent); }
.hero-role { font-size: var(--text-lg); line-height: 1.4; margin-top: var(--space-6); color: var(--color-text); font-weight: 500; }
.typing-line { display: block; position: relative; width: max-content; max-width: 100%; }
.type-measure { visibility: hidden; }
.type-output { position: absolute; inset: 0 auto auto 0; white-space: pre; }
.typing-line[data-typing="true"] .type-output::after { content: ''; display: inline-block; height: .9em; width: 1px; margin-left: var(--space-1); background: var(--color-accent); vertical-align: -.02em; }
.hero-description { max-width: 47ch; color: var(--color-muted); margin-top: var(--space-4); }
.hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; margin-top: var(--space-8); }
.btn { position: relative; overflow: hidden; min-height: 48px; padding: var(--space-3) var(--space-5); display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-6); border: 1px solid transparent; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 600; transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .3s var(--ease); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn > span, .text-link > span, .project-link > span, .contact-links a > span, .email-address > span { transition: transform .3s var(--ease); }
.btn:hover > span, .text-link:hover > span, .project-link:hover > span, .contact-links a:hover > span, .email-address:hover > span { transform: translate(2px, -2px); }
.btn-primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn-primary:hover { background: var(--color-text); }
.btn-secondary { border-color: var(--color-line); }
.btn-secondary:hover { background: var(--color-raised); border-color: var(--color-muted); }
.text-link { min-height: 44px; display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); font-weight: 500; transition: color .2s var(--ease); }
.text-link:hover { color: var(--color-accent); }
.hero-contact { margin-left: var(--space-2); }
.location { font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-6); }
.portrait { align-self: center; }
.portrait-frame { border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); aspect-ratio: 1 / 1.06; }
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; transition: transform .8s var(--ease); }
.portrait figcaption { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-line); color: var(--color-muted); font-size: var(--text-xs); }
.highlights { margin-top: var(--space-12); border-top: 1px solid var(--color-line); display: grid; grid-template-columns: repeat(3, 1fr); }
.highlights > div { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-6) var(--space-6) var(--space-2) 0; }
.highlights dt { font-size: var(--text-2xl); letter-spacing: -.05em; font-weight: 500; font-variant-numeric: tabular-nums; min-width: 2.6ch; }
.highlights dd { font-size: var(--text-sm); line-height: 1.6; }
.highlights dd span { display: block; color: var(--color-muted); font-size: var(--text-xs); }

/* Work */
.work-section { padding-top: var(--space-16); }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-8); margin-bottom: var(--space-10); }
.section-heading .eyebrow { margin-bottom: var(--space-3); }
.section-heading > p { color: var(--color-muted); font-size: var(--text-sm); max-width: 32ch; }
.work-tools { max-width: 35ch; text-align: right; }
.work-tools > p { color: var(--color-muted); font-size: var(--text-sm); }
.details-toggle { padding: 0; background: transparent; border: 0; color: var(--color-accent); margin-top: var(--space-2); }
.thesis { display: grid; grid-template-columns: 1.15fr 1fr; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-8); transition: border-color .3s var(--ease), box-shadow .35s var(--ease); }
.thesis-copy { padding: clamp(var(--space-6), 3vw, var(--space-10)); min-width: 0; }
.thesis h3 { font-size: var(--text-xl); line-height: 1.2; letter-spacing: -.045em; }
.thesis-intro { color: var(--color-muted); margin-top: var(--space-4); max-width: 50ch; }
.ownership { margin-block: var(--space-6) var(--space-3); }
.ownership > p:last-child { color: var(--color-accent); font-weight: 500; line-height: 1.5; margin-top: var(--space-2); }
.team-note { color: var(--color-muted); font-size: var(--text-sm); }
.tag-list { display: flex; flex-wrap: wrap; list-style: none; gap: var(--space-1) var(--space-3); padding: 0; margin-top: var(--space-5); }
.tag-list li { color: var(--color-muted); font-size: var(--text-xs); line-height: 1.7; transition: color .2s var(--ease); }
.tag-list li:hover { color: var(--color-accent); }
.tag-list li:not(:last-child)::after { content: '/'; margin-left: var(--space-3); color: var(--color-muted); }
.architecture { margin: var(--space-3); margin-left: 0; border-radius: var(--radius-md); padding: clamp(var(--space-5), 3vw, var(--space-8)); background: var(--color-bg); display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.architecture-heading { display: flex; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); color: var(--color-muted); font-size: var(--text-xs); }
.architecture-node { padding: var(--space-5); border: 1px solid var(--color-line); border-radius: var(--radius-md); transition: border-color .3s var(--ease), background .3s var(--ease); }
.architecture-node:hover { border-color: var(--color-muted); }
.architecture-node > p:not(.mini-label) { font-weight: 500; margin-block: var(--space-2); }
.architecture-node > span, .state-pair span { color: var(--color-muted); font-size: var(--text-xs); }
.owned-node { background: var(--color-raised); border-color: var(--color-accent); }
.owned-node:hover { border-color: var(--color-accent); }
.owned-node .mini-label, .node-heading > span { color: var(--color-accent); }
.node-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); font-size: var(--text-xs); }
.connector { display: flex; align-items: center; justify-content: center; height: 32px; color: var(--color-accent); }
.state-pair { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-3); }
.state-pair > div { padding: var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-sm); transition: border-color .3s var(--ease); }
.state-pair > div:hover { border-color: var(--color-muted); }
.state-pair .mini-label { font-size: var(--text-xs); letter-spacing: 0; text-transform: none; color: var(--color-text); margin-bottom: var(--space-2); }
.architecture-output { display: flex; align-items: center; justify-content: center; gap: var(--space-2); font-size: var(--text-sm); }
.architecture-note { color: var(--color-muted); font-size: var(--text-xs); text-align: center; margin-top: var(--space-5); }
.projects-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); align-items: start; }
.project-card { border: 1px solid var(--color-line); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); transition: border-color .3s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); }
.project-image { aspect-ratio: 1.9; overflow: hidden; background: var(--color-raised); }
.project-image img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .7s var(--ease); }
.project-card:first-child .project-image img { object-position: center 54%; }
.fitness-image img { object-position: center 38%; }
.project-content { padding: var(--space-6); }
.project-content > .mini-label { margin-bottom: var(--space-3); }
.project-content > p:not(.mini-label) { color: var(--color-muted); margin-top: var(--space-3); }
.project-details { margin-top: var(--space-5); border-top: 1px solid var(--color-line); }
.project-details summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); min-height: 48px; padding-block: var(--space-3); cursor: pointer; font-size: var(--text-sm); font-weight: 500; list-style: none; transition: color .2s var(--ease); }
.project-details summary::-webkit-details-marker { display: none; }
.project-details summary span { color: var(--color-accent); font-size: var(--text-lg); line-height: 1; }
.project-details summary span { transition: transform .3s var(--ease); }
.project-details[open] summary span { transform: rotate(45deg); }
.project-details summary:hover { color: var(--color-accent); }
.details-body { padding-block: 0 var(--space-4); color: var(--color-muted); font-size: var(--text-sm); }
.details-body li + li { margin-top: var(--space-2); }
.details-body p { margin-top: var(--space-4); }
.details-body strong { color: var(--color-text); font-weight: 500; }
.project-link { position: relative; min-height: 44px; display: inline-flex; align-items: center; gap: var(--space-8); color: var(--color-accent); font-size: var(--text-sm); font-weight: 500; }
.project-link:hover { text-decoration: underline; text-underline-offset: 5px; }

/* Experience */
.experience-section { padding-top: var(--space-12); }
.experience-list { border-top: 1px solid var(--color-line); }
.experience-row { display: grid; grid-template-columns: .8fr 1.5fr; gap: var(--space-16); padding-block: var(--space-10); border-bottom: 1px solid var(--color-line); }
.experience-company h3 { margin-top: var(--space-3); }
.experience-company > p:last-child { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-2); }
.experience-body h3 { margin-bottom: var(--space-4); }
.experience-body ul { color: var(--color-muted); }
.experience-body li + li { margin-top: var(--space-3); }
.experience-body li::marker { color: var(--color-accent); }
.experience-body strong { color: var(--color-text); font-weight: 500; }

/* About */
.about-section { background: rgb(17 30 39 / 82%); }
.about-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--space-8), 6vw, var(--space-20)); }
.about-copy > p:not(.eyebrow) { margin-top: var(--space-5); color: var(--color-muted); max-width: 55ch; }
.education { border-top: 1px solid var(--color-line); margin-top: var(--space-8); padding-top: var(--space-6); }
.education h3 { font-size: var(--text-base); margin-top: var(--space-2); line-height: 1.5; }
.education > p:not(.mini-label) { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-1); }
.education .graduation { color: var(--color-accent) !important; }
.toolkit-group { padding-block: var(--space-6); border-bottom: 1px solid var(--color-line); transition: border-color .3s var(--ease); }
.toolkit-group:hover { border-color: var(--color-accent); }
.toolkit-group:first-child { padding-top: 0; }
.toolkit-group:last-child { border-bottom: 0; padding-bottom: 0; }
.toolkit-group h3 { font-size: var(--text-base); color: var(--color-text); margin-bottom: var(--space-3); }
.toolkit-group p { color: var(--color-muted); line-height: 1.9; }

/* Certificates */
.certificates-section { padding-bottom: var(--space-12); }
.certificates-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.certificate-card { position: relative; overflow: hidden; display: flex; align-items: center; gap: var(--space-5); min-width: 0; text-align: left; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-4); transition: border-color .2s var(--ease), background .2s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); }
.certificate-card:hover { border-color: var(--color-muted); background: var(--color-raised); }
.certificate-card:active { transform: scale(.985); }
.certificate-card img { width: 92px; height: 64px; flex: 0 0 auto; object-fit: contain; background: #fff; border-radius: var(--radius-sm); transition: transform .4s var(--ease); }
.certificate-info { display: block; flex: 1; min-width: 0; }
.certificate-info strong { font-size: var(--text-sm); font-weight: 500; line-height: 1.5; display: block; }
.certificate-info > span { color: var(--color-muted); font-size: var(--text-xs); display: block; margin-top: var(--space-1); }
.certificate-open { color: var(--color-accent); transition: transform .3s var(--ease); }
.certificate-card:hover .certificate-open { transform: translate(3px, -3px); }
.noscript-note { margin-top: var(--space-5); color: var(--color-muted); font-size: var(--text-sm); }
.certificate-modal { width: min(1100px, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: var(--space-6); color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); overflow: auto; }
.certificate-modal::backdrop { background: var(--color-overlay); }
.modal-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-5); }
.modal-heading h2 { font-size: var(--text-lg); line-height: 1.4; letter-spacing: -.02em; }
.modal-heading form { margin: 0; }
.modal-close { position: relative; overflow: hidden; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); min-height: 44px; background: var(--color-raised); border: 1px solid var(--color-line); border-radius: var(--radius-sm); font-size: var(--text-sm); white-space: nowrap; transition: border-color .2s var(--ease); }
.modal-close:hover { border-color: var(--color-accent); }
.modal-image { width: 100%; max-height: 70dvh; object-fit: contain; height: auto; background: var(--color-bg); }
.modal-help { color: var(--color-muted); font-size: var(--text-xs); margin-top: var(--space-4); }
.certificate-modal[open] { animation: modal-arrive .3s var(--ease); }
.certificate-modal[open]::backdrop { animation: backdrop-arrive .3s var(--ease); }
@keyframes modal-arrive { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes backdrop-arrive { from { opacity: 0; } to { opacity: 1; } }

/* Contact and footer */
.contact-section { padding-block: var(--space-16) var(--space-20); }
.contact-layout { border-top: 1px solid var(--color-line); padding-top: var(--space-16); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); }
.contact-layout h2 { font-size: var(--text-xl); }
.contact-layout > div > p:not(.eyebrow) { margin-top: var(--space-5); color: var(--color-muted); max-width: 46ch; }
.contact-actions { align-self: center; min-width: 0; }
.email-address { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); min-height: 48px; font-size: var(--text-lg); font-weight: 500; overflow-wrap: anywhere; transition: color .2s var(--ease); }
.email-address > span { color: var(--color-accent); flex: 0 0 auto; }
.email-address:hover { color: var(--color-accent); }
.copy-email { border: 0; background: transparent; padding: 0; color: var(--color-muted); }
.copy-feedback { min-height: 24px; font-size: var(--text-xs); color: var(--color-accent); margin-bottom: var(--space-4); }
.contact-links { display: flex; flex-wrap: wrap; gap: var(--space-6); border-top: 1px solid var(--color-line); padding-top: var(--space-4); }
.contact-links a { min-height: 44px; display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); transition: color .2s var(--ease); }
.contact-links a:hover { color: var(--color-accent); }
.footer { padding-block: var(--space-6); border-top: 1px solid var(--color-line); color: var(--color-muted); font-size: var(--text-xs); }
.footer-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-4); }
.footer a { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 44px; transition: color .2s var(--ease); }
.footer a > span { transition: transform .3s var(--ease); }
.footer a:hover > span { transform: translateY(-3px); }
.footer a:hover { color: var(--color-accent); }
.footer-tools { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-6); }
.motion-toggle { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0; color: var(--color-muted); border: 0; background: transparent; font-size: var(--text-xs); }
.motion-toggle:hover { color: var(--color-text); }
.motion-indicator { display: inline-block; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--color-accent); }
.motion-toggle[aria-pressed="false"] .motion-indicator { background: var(--color-muted); }

/* Floating back-to-top button */
.to-top { position: fixed; right: max(var(--space-5), env(safe-area-inset-right)); bottom: max(var(--space-5), env(safe-area-inset-bottom)); z-index: 30; width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--radius-full); background: var(--color-accent); color: var(--color-accent-ink); font-size: var(--text-lg); font-weight: 700; box-shadow: 0 8px 24px rgb(0 0 0 / 30%); opacity: 0; transform: translateY(16px) scale(.85); pointer-events: none; visibility: hidden; transition: opacity .3s var(--ease), transform .35s var(--ease), visibility 0s linear .35s, background .25s var(--ease); }
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.to-top:hover { background: var(--color-text); }
.to-top > span { transition: transform .3s var(--ease); }
.to-top:hover > span { transform: translateY(-3px); }

/* Ripple */
.ripple { position: absolute; border-radius: 50%; background: rgb(145 229 188 / 30%); transform: scale(0); opacity: 1; pointer-events: none; animation: ripple .65s var(--ease) forwards; }
.btn-primary .ripple, .mobile-contact .ripple { background: rgb(12 33 25 / 22%); }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* Motion extras: only when motion is on and a real pointer can hover */
[data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after { animation: none !important; transition: none !important; }
html[data-motion="off"] { scroll-behavior: auto; }
@media (hover: hover) and (pointer: fine) {
  [data-motion="on"] .project-card:hover { transform: translateY(-4px); border-color: rgb(145 229 188 / 40%); box-shadow: 0 14px 36px rgb(0 0 0 / 18%); }
  [data-motion="on"] .project-card:hover .project-image img { transform: scale(1.04); }
  [data-motion="on"] .btn:hover { transform: translateY(-2px); }
  [data-motion="on"] .btn-primary:hover { box-shadow: 0 8px 26px rgb(145 229 188 / 28%); }
  [data-motion="on"] .btn-secondary:hover { box-shadow: 0 8px 22px rgb(0 0 0 / 22%); }
  [data-motion="on"] .btn:active { transform: translateY(0) scale(.98); }
  [data-motion="on"] .certificate-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgb(0 0 0 / 18%); }
  [data-motion="on"] .certificate-card:hover img { transform: scale(1.06); }
  [data-motion="on"] .thesis:hover { border-color: rgb(145 229 188 / 35%); box-shadow: 0 14px 40px rgb(0 0 0 / 16%); }
  [data-motion="on"] .portrait:hover .portrait-frame img { transform: scale(1.04); }
  [data-motion="on"] .to-top:hover { transform: translateY(-3px); }
}

/* Tablet */
@media (max-width: 1023px) {
  .nav-menu { gap: var(--space-5); }
  .hero-layout { grid-template-columns: 1.2fr .8fr; gap: var(--space-8); }
  .hero-contact { margin-left: 0; }
  .highlights > div { gap: var(--space-3); }
  .thesis { grid-template-columns: 1fr 1fr; }
  .thesis-copy { padding: var(--space-6); }
  .architecture { padding: var(--space-5); }
  .state-pair { grid-template-columns: 1fr; }
  .experience-row { gap: var(--space-8); }
  .contact-layout { gap: var(--space-8); }
}

/* Mobile: readable navigation, no hover-only controls */
@media (max-width: 800px) {
  .container { width: calc(100% - 3rem); }
  .navbar { min-height: 72px; flex-wrap: wrap; gap: 0; }
  .nav-menu { width: 100%; flex-wrap: wrap; gap: var(--space-2) var(--space-5); padding-bottom: var(--space-4); }
  .js .menu-toggle { display: inline-flex; }
  .js .mobile-contact { display: inline-flex; }
  .js .nav-menu { display: none; }
  .js .nav-menu.is-open { display: flex; flex-direction: column; align-items: stretch; padding-block: var(--space-3) var(--space-5); gap: 0; }
  .js .nav-menu .nav-link { display: flex; justify-content: space-between; padding-block: var(--space-3); }
  .js .nav-menu .nav-link::after { bottom: 4px; }
  .nav-link { font-size: var(--text-sm); }
  .hero-layout { grid-template-columns: 1.25fr .75fr; align-items: start; }
  .hero h1 { font-size: clamp(2.5rem, 5.8vw, 4rem); }
  .hero-role { font-size: var(--text-base); }
  .hero-description { font-size: var(--text-base); }
  .hero-layout .portrait { align-self: start; margin-top: var(--space-12); }
  .portrait figcaption { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
  .highlights > div { display: block; padding-top: var(--space-5); }
  .highlights dd { margin-top: var(--space-1); }
  .highlights dt { font-size: var(--text-xl); }
  .section-heading { align-items: flex-start; flex-direction: column; gap: var(--space-4); }
  .section-heading > p { max-width: none; }
  .work-tools { max-width: none; text-align: left; }
  .desktop-break { display: none; }
  .thesis { grid-template-columns: 1fr; }
  .architecture { margin: 0 var(--space-3) var(--space-3); padding: var(--space-6); }
  .state-pair { grid-template-columns: 1.2fr 1fr; }
  .projects-grid { gap: var(--space-5); }
  .project-content { padding: var(--space-5); }
  .about-layout { grid-template-columns: 1fr; gap: var(--space-10); }
  .toolkit { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .toolkit-group { padding: 0; border: 0; }
  .certificates-grid { grid-template-columns: 1fr; }
  .contact-layout { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  .container { width: calc(100% - 2.5rem); }
  .section { padding-block: var(--space-12); }
  .hero { padding-top: var(--space-10); padding-bottom: var(--space-8); }
  .hero-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .hero h1 { font-size: var(--text-hero); }
  .hero-content > .eyebrow { margin-bottom: var(--space-5); letter-spacing: .06em; }
  .hero-role { font-size: var(--text-lg); margin-top: var(--space-5); }
  .hero-description { margin-top: var(--space-3); }
  .hero-actions { gap: var(--space-3); margin-top: var(--space-6); }
  .hero-contact { width: 100%; }
  .location { margin-top: var(--space-4); max-width: 38ch; }
  .hero-layout .portrait { display: grid; grid-template-columns: 100px 1fr; align-items: center; gap: var(--space-4); margin: 0; padding-top: var(--space-5); border-top: 1px solid var(--color-line); }
  .portrait-frame { width: 100px; aspect-ratio: 1; border-radius: var(--radius-md); }
  .portrait figcaption { border-bottom: 0; padding: 0; gap: var(--space-2); }
  .highlights { margin-top: var(--space-6); gap: var(--space-3); }
  .highlights > div { padding: var(--space-4) 0 0; }
  .highlights dt { font-size: var(--text-xl); min-width: 0; }
  .highlights dd { font-size: var(--text-xs); line-height: 1.55; }
  .highlights dd span { margin-top: var(--space-2); }
  .section-heading { margin-bottom: var(--space-6); }
  .thesis-copy { padding: var(--space-6) var(--space-5); }
  .thesis h3 { font-size: var(--text-xl); }
  .architecture { padding: var(--space-5); }
  .architecture-node { padding: var(--space-4); }
  .architecture-heading { margin-bottom: var(--space-4); }
  .state-pair { grid-template-columns: 1fr; gap: var(--space-2); }
  .state-pair > div { padding: var(--space-3); }
  .architecture-output { font-size: var(--text-xs); }
  .projects-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .project-image { aspect-ratio: 1.8; }
  .project-content { padding: var(--space-5); }
  .experience-row { grid-template-columns: 1fr; gap: var(--space-5); padding-block: var(--space-8); }
  .experience-company h3 { margin-top: var(--space-2); }
  .experience-company > p:last-child { margin-top: var(--space-1); }
  .experience-body h3 { margin-bottom: var(--space-3); }
  .toolkit { grid-template-columns: 1fr; gap: 0; }
  .toolkit-group { padding-block: var(--space-5); border-bottom: 1px solid var(--color-line); }
  .certificate-card { gap: var(--space-3); padding: var(--space-3); }
  .certificate-card img { width: 72px; height: 58px; }
  .certificate-info strong { font-size: var(--text-sm); }
  .certificate-modal { padding: var(--space-4); }
  .modal-heading { gap: var(--space-3); margin-bottom: var(--space-4); }
  .modal-heading h2 { font-size: var(--text-base); }
  .modal-close { padding-inline: var(--space-2); }
  .contact-layout { padding-top: var(--space-10); gap: var(--space-6); }
  .email-address { font-size: var(--text-base); }
  .footer-content { align-items: flex-start; flex-direction: column; gap: var(--space-1); }
  .footer-tools { width: 100%; justify-content: space-between; margin-top: var(--space-2); }
  .to-top { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}