@import url("https://fonts.googleapis.com/css2?family=Mona+Sans:wght@200..900&display=swap");

[hidden] { display: none !important; }

:root {
  /* tokens_make: seed #17795a (court green), light, restrained, type ratio 1.25, soft radius, airy density */
  --color-bg: #f7fbf9;
  --color-surface: #fdfefd;
  --color-surface-2: #f0f3f2;
  --color-fill: #e7ebe9;
  --color-fill-hover: #dee2e0;
  --color-fill-active: #d6dbd9;
  --color-border: #ced3d0;
  --color-border-strong: #afb5b2;
  --color-text: #17221d;
  --color-text-muted: #575f5b;
  --color-text-faint: #7c8782;
  --color-accent: #17795a;
  --color-accent-hover: #006b4d;
  --color-on-accent: #fff;
  --color-accent-soft: #dbf2e7;
  --color-accent-soft-hover: #c8ecdc;
  --color-accent-border: #82c7aa;
  --color-accent-text: #087254;
  --color-focus: #55b28f;
  --color-danger: #e5484d;
  --color-danger-soft: #f8e5e4;
  --color-danger-text: #c42432;
  --color-success: #30a46c;
  --color-success-soft: #dff0e5;
  --color-success-text: #007a45;
  --color-warning: #ffc11e;
  --color-on-warning: #2b2009;
  --color-warning-soft: #ffecbc;
  --color-warning-text: #946800;
  --color-accent-1: #f4f8f6;
  --color-accent-2: #edf5f1;
  --color-accent-3: #dbf2e7;
  --color-accent-4: #c8ecdc;
  --color-accent-5: #b4e3ce;
  --color-accent-6: #9fd7be;
  --color-accent-7: #82c7aa;
  --color-accent-8: #55b28f;
  --color-accent-9: #17795a;
  --color-accent-10: #006b4d;
  --color-accent-11: #087254;
  --color-accent-12: #1e4133;
  --color-gray-1: #f5f8f6;
  --color-gray-2: #f0f3f2;
  --color-gray-3: #e7ebe9;
  --color-gray-4: #dee2e0;
  --color-gray-5: #d6dbd9;
  --color-gray-6: #ced3d0;
  --color-gray-7: #c3c8c5;
  --color-gray-8: #afb5b2;
  --color-gray-9: #7c8782;
  --color-gray-10: #737d78;
  --color-gray-11: #575f5b;
  --color-gray-12: #17221d;
  --color-bar: rgb(253 254 253 / 0.94);
  --font-body: "Mona Sans", ui-sans-serif, system-ui, sans-serif;
  --font-display: var(--font-body);
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --font-size-xs: 0.68rem;
  --font-size-sm: 0.85rem;
  --font-size-base: 1.063rem;
  --font-size-md: 1.328rem;
  --font-size-lg: 1.66rem;
  --font-size-xl: 2.075rem;
  --font-size-2xl: 2.594rem;
  --font-size-3xl: 3.242rem;
  --font-size-4xl: 4.053rem;
  --font-size-5xl: 5.066rem;
  --font-size-6xl: 7.916rem;
  --font-leading-tight: 1.15;
  --font-leading-snug: 1.3;
  --font-leading-body: 1.55;
  --font-leading-relaxed: 1.45;
  --font-leading-display: 0.92;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-heavy: 800;
  --font-tracking-display: -0.02em;
  --space-0: 2px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6rem;
  --space-12: 8rem;
  --space-page: 70rem;
  --space-bar: 4rem;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgb(23 34 29 / 0.05), 0 1px 1px rgb(23 34 29 / 0.04);
  --shadow-md: 0 2px 4px rgb(23 34 29 / 0.06), 0 6px 16px -4px rgb(23 34 29 / 0.10);
  --shadow-lg: 0 4px 8px rgb(23 34 29 / 0.07), 0 16px 40px -8px rgb(23 34 29 / 0.16);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --duration-fast: 150ms;
  --duration: 200ms;
  --duration-slow: 250ms;
}

html { color-scheme: light; scroll-behavior: smooth; scroll-padding-top: calc(var(--space-bar) + var(--space-5)); }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: var(--font-size-base); line-height: var(--font-leading-body); caret-color: var(--color-accent); -webkit-font-smoothing: antialiased; }
::selection { background: var(--color-accent-soft-hover); color: var(--color-text); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); }
a { color: var(--color-accent-text); text-underline-offset: 0.2em; }
html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-full); border: 2px solid var(--color-bg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

.icon { width: 1.125em; height: 1.125em; flex: none; }

/* ---------- Page ---------- */
.pf { min-height: 100vh; display: flex; flex-direction: column; }
.pf-wrap { width: 100%; max-width: var(--space-page); margin: 0 auto; padding: 0 var(--space-6); box-sizing: border-box; }

/* ---------- Top menu ---------- */
.pf-bar { position: sticky; top: 0; z-index: 10; background: var(--color-bar); border-bottom: 1px solid var(--color-border); }
.pf-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); height: var(--space-bar); }
.pf-mark { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--color-text); text-decoration: none; font-weight: var(--font-weight-bold); font-size: var(--font-size-base); }
.pf-mark__initials { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md); background: var(--color-text); color: var(--color-surface); font-weight: var(--font-weight-heavy); font-size: var(--font-size-sm); }
.pf-nav { display: flex; align-items: stretch; height: 100%; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.pf-nav__link { position: relative; display: flex; align-items: center; height: 100%; padding: 0 var(--space-3); color: var(--color-text-muted); text-decoration: none; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.pf-nav__link:hover { color: var(--color-text); }
.pf-nav__link::after { content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: -1px; height: var(--space-0); background: var(--color-accent); transform: scaleX(0); transform-origin: left center; }
.pf-nav__link.is-active { color: var(--color-text); }
.pf-nav__link.is-active::after { transform: scaleX(1); }
.pf-bar__cta { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.5rem; padding: 0 var(--space-4); border-radius: var(--radius-md); background: var(--color-accent); color: var(--color-on-accent); text-decoration: none; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.pf-bar__cta:hover { background: var(--color-accent-hover); }
.pf-menu-btn { display: none; align-items: center; gap: var(--space-2); min-height: 2.75rem; min-width: 2.75rem; padding: 0 var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); white-space: nowrap; flex: none; cursor: pointer; }
.pf-menu-btn:hover { background: var(--color-surface-2); }
.pf-menu-btn .icon-close { display: none; }
.pf-menu-btn[aria-expanded="true"] .icon-open { display: none; }
.pf-menu-btn[aria-expanded="true"] .icon-close { display: inline; }
.pf-sheet { border-top: 1px solid var(--color-border); background: var(--color-surface); }
.pf-sheet__list { margin: 0; padding: var(--space-2) 0 var(--space-4); list-style: none; }
.pf-sheet__link { display: flex; align-items: center; justify-content: space-between; min-height: 3rem; padding: 0 var(--space-1); border-bottom: 1px solid var(--color-surface-2); color: var(--color-text); text-decoration: none; font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); }
.pf-sheet__link.is-active { color: var(--color-accent-text); }
.pf-sheet__link.is-active::after { content: ""; width: var(--space-5); height: var(--space-0); background: var(--color-accent); }

@media (prefers-reduced-motion: no-preference) {
  .pf-nav__link::after { transition: transform var(--duration) var(--ease-out); }
  .pf-nav__link, .pf-bar__cta, .pf-btn { transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out); }
}

/* ---------- Intro ---------- */
.pf-intro { padding: var(--space-11) 0 var(--space-10); }
.pf-intro__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-8); align-items: end; }
.pf-name { margin: 0 0 var(--space-6); font-size: var(--font-size-6xl); font-weight: var(--font-weight-heavy); line-height: var(--font-leading-display); letter-spacing: var(--font-tracking-display); }
.pf-name span { display: block; }
.pf-lede { max-width: 34rem; margin: 0 0 var(--space-5); font-size: var(--font-size-md); line-height: var(--font-leading-relaxed); color: var(--color-text); }
.pf-place { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-7); color: var(--color-text-muted); }
.pf-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.pf-btn { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 3rem; padding: 0 var(--space-5); border-radius: var(--radius-md); border: 1px solid transparent; font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); text-decoration: none; }
.pf-btn--primary { background: var(--color-accent); color: var(--color-on-accent); }
.pf-btn--primary:hover { background: var(--color-accent-hover); }
.pf-btn--quiet { border-color: var(--color-border-strong); color: var(--color-text); background: var(--color-surface); }
.pf-btn--quiet:hover { background: var(--color-surface-2); }
.pf-now { border-top: 1px solid var(--color-text); padding-top: var(--space-4); }
.pf-now__title { margin: 0 0 var(--space-3); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); }
.pf-now__list { margin: 0; padding: 0; list-style: none; }
.pf-now__item { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.pf-now__role { display: block; font-weight: var(--font-weight-semibold); }
.pf-now__org { display: block; color: var(--color-text-muted); font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; }

/* ---------- Sections ---------- */
.pf-section { padding: var(--space-9) 0 var(--space-10); }
.pf-section__head { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--color-border); position: relative; }
.pf-section__head::before { content: ""; position: absolute; top: -1px; left: 0; width: var(--space-9); height: var(--space-0); background: var(--color-accent); }
.pf-section__title { margin: 0; font-size: var(--font-size-2xl); font-weight: var(--font-weight-heavy); line-height: var(--font-leading-tight); letter-spacing: var(--font-tracking-display); }
.pf-section__body { min-width: 0; }
.pf-section__intro { margin: var(--space-2) 0 var(--space-6); max-width: 40rem; color: var(--color-text-muted); }
.pf-slot { display: grid; place-items: center; min-height: 10rem; padding: var(--space-6); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); color: var(--color-text-muted); font-size: var(--font-size-sm); text-align: center; }
.pf-slot p { max-width: 62ch; margin: 0; }

.pf-foot { margin-top: auto; border-top: 1px solid var(--color-border); }
.pf-foot__inner { display: flex; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-6); padding-bottom: var(--space-6); color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* ---------- Tablet & phone ---------- */
@media (max-width: 900px) {
  .pf-nav { display: none; }
  .pf-menu-btn { display: inline-flex; }
  .pf-intro__grid { grid-template-columns: minmax(0, 1fr); }
  .pf-name { font-size: var(--font-size-5xl); }
  .pf-section__head { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
}
@media (min-width: 901px) {
  .pf-sheet { display: none; }
}
/* Phone: nothing may push the page sideways. */
body { overflow-wrap: break-word; }
img, svg, video { max-width: 100%; }
@media (max-width: 560px) {
  .pf-wrap { padding: 0 var(--space-5); }
  .pf-intro { padding: var(--space-8) 0 var(--space-9); }
  .pf-name { font-size: var(--font-size-3xl); }
  .pf-lede { font-size: var(--font-size-base); }
  .pf-section__title { font-size: var(--font-size-xl); }
  .pf-btn { flex: 1 1 auto; justify-content: center; }
  .pf-foot__inner { flex-direction: column; }
}

/* ---------- Experience ---------- */
.pf-roles { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-text); }
.pf-role { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--space-5); padding: var(--space-6) 0; border-bottom: 1px solid var(--color-border); }
.pf-role__when { margin: 0; padding-top: 0.3rem; color: var(--color-text-muted); font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-role__now { color: var(--color-accent-text); font-weight: var(--font-weight-semibold); }
.pf-role__org { margin: 0; font-size: var(--font-size-md); font-weight: var(--font-weight-bold); line-height: var(--font-leading-snug); letter-spacing: -0.01em; }
.pf-role__title { margin: var(--space-1) 0 var(--space-4); font-weight: var(--font-weight-medium); }
.pf-role__place { color: var(--color-text-muted); font-weight: var(--font-weight-regular); }
.pf-role__place::before { content: "·"; margin: 0 var(--space-2); color: var(--color-text-faint); }
.pf-role__points { margin: 0; padding: 0; list-style: none; max-width: 44rem; }
.pf-role__points li { position: relative; padding-left: var(--space-5); margin-top: var(--space-2); color: var(--color-text); line-height: var(--font-leading-relaxed); }
.pf-role__points li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: var(--space-3); height: 1px; background: var(--color-accent); }
@media (max-width: 560px) {
  .pf-role { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding: var(--space-5) 0; }
  .pf-role__place { display: block; }
  .pf-role__place::before { content: none; }
}
@media (min-width: 901px) {
  .pf-section__title { position: sticky; top: calc(var(--space-bar) + var(--space-5)); align-self: start; }
}

/* ---------- What I've Built ---------- */
.pf-builds { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-text); }
.pf-build { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--space-5); padding: var(--space-6) 0; border-bottom: 1px solid var(--color-border); }
.pf-build__meta { padding-top: 0.3rem; }
.pf-build__when { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-build__stack { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: var(--font-size-sm); line-height: var(--font-leading-snug); }
.pf-build__name { margin: 0; font-size: var(--font-size-md); font-weight: var(--font-weight-bold); line-height: var(--font-leading-snug); letter-spacing: -0.01em; }
.pf-build__org { display: inline-block; margin-left: var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); letter-spacing: 0; }
.pf-build__desc { margin: var(--space-2) 0 var(--space-3); max-width: 44rem; line-height: var(--font-leading-relaxed); }
.pf-build__part { margin: 0; max-width: 44rem; color: var(--color-text-muted); line-height: var(--font-leading-relaxed); }
.pf-build__label { display: block; color: var(--color-text); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.pf-build__link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; margin-top: var(--space-3); padding: 0 var(--space-4); border: 1px solid var(--color-accent-border); border-radius: var(--radius-md); color: var(--color-accent-text); text-decoration: none; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.pf-build__link:hover { background: var(--color-accent-soft); }

.pf-subhead { margin-top: var(--space-9); padding-top: var(--space-4); border-top: 1px solid var(--color-text); }
.pf-subhead__title { margin: 0 0 var(--space-5); font-size: var(--font-size-lg); font-weight: var(--font-weight-heavy); line-height: var(--font-leading-tight); letter-spacing: var(--font-tracking-display); }
.pf-degree { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--space-5); padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-border); }
.pf-degree .pf-build__when { padding-top: 0.25rem; }
.pf-degree__name { margin: 0; font-size: var(--font-size-md); font-weight: var(--font-weight-bold); line-height: var(--font-leading-snug); }
.pf-degree__line { margin: var(--space-1) 0 0; color: var(--color-text-muted); }
.pf-degree__gpa { margin-right: var(--space-3); color: var(--color-accent-text); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }
.pf-feats { margin: 0; padding: 0; list-style: none; }
.pf-feat { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--space-5); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); line-height: var(--font-leading-relaxed); }
.pf-feat__year { color: var(--color-text-muted); font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; padding-top: 0.2rem; }
@media (max-width: 560px) {
  .pf-build, .pf-degree, .pf-feat { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .pf-build { padding: var(--space-5) 0; }
  .pf-build__meta { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); padding-top: 0; }
  .pf-build__stack { margin: 0; }
  .pf-build__org { display: block; margin: var(--space-1) 0 0; }
  .pf-feat { gap: 0; }
}

/* ---------- What I'm Exploring ---------- */
.pf-lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-text); }
.pf-lane { position: relative; padding: var(--space-5) var(--space-5) var(--space-6); border-left: 1px solid var(--color-border); }
.pf-lane:first-child { padding-left: 0; border-left: 0; }
.pf-lane::before { content: ""; position: absolute; top: -1px; left: var(--space-5); width: var(--space-6); height: var(--space-0); background: var(--color-accent); }
.pf-lane:first-child::before { left: 0; }
.pf-lane__name { margin: 0; font-size: var(--font-size-md); font-weight: var(--font-weight-bold); line-height: var(--font-leading-snug); letter-spacing: -0.01em; }
.pf-lane__line { margin: var(--space-2) 0 0; color: var(--color-text-muted); line-height: var(--font-leading-relaxed); }

/* ---------- Contact ---------- */
.pf-mail { display: inline-block; max-width: 100%; margin-bottom: var(--space-6); color: var(--color-text); font-size: var(--font-size-2xl); font-weight: var(--font-weight-heavy); letter-spacing: var(--font-tracking-display); line-height: var(--font-leading-tight); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 3px; text-underline-offset: 0.2em; overflow-wrap: anywhere; }
.pf-mail:hover { color: var(--color-accent-text); }
.pf-links { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-text); }
.pf-link { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-5); min-height: 3.5rem; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); color: var(--color-text); text-decoration: none; }
.pf-link__name { font-weight: var(--font-weight-bold); }
.pf-link__addr { color: var(--color-text-muted); overflow-wrap: anywhere; }
.pf-link .icon { color: var(--color-accent-text); width: 1.125rem; height: 1.125rem; }
.pf-link:hover .pf-link__addr { color: var(--color-accent-text); }
.pf-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .pf-link .icon { transition: transform var(--duration-fast) var(--ease-out); }
  .pf-link:hover .icon { transform: translate(2px, -2px); }
}
@media (max-width: 760px) {
  .pf-lanes { grid-template-columns: minmax(0, 1fr); }
  .pf-lane, .pf-lane:first-child { padding: var(--space-4) 0 var(--space-5); border-left: 0; border-bottom: 1px solid var(--color-border); }
  .pf-lane::before, .pf-lane:first-child::before { left: 0; }
  .pf-lane + .pf-lane::before { content: none; }
}
@media (max-width: 560px) {
  .pf-mail { font-size: var(--font-size-lg); }
  .pf-link { grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--space-3); }
  .pf-link__name { grid-column: 1; }
  .pf-link__addr { grid-column: 1; grid-row: 2; font-size: var(--font-size-sm); }
  .pf-link .icon { grid-column: 2; grid-row: 1 / span 2; }
}