/* Shared with Arm Studio: ivory, sand, warm charcoal, olive. */
:root {
  color-scheme: light;
  --paper: #f4f1e9;
  --panel: #e9e4d8;
  --surface: #faf8f2;
  --ink: #302e29;
  --muted: #696458;
  --line: #ccc5b6;
  --olive: #737d5d;
  --bs-body-bg: var(--paper);
  --bs-body-color: var(--ink);
  --bs-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --bs-link-color: #55603f;
  --bs-link-hover-color: var(--ink);
  --tf-page-bg-color: var(--paper);
  --tf-footer-bg-color: var(--panel);
  --tf-projects-bg-color: var(--paper);
  --tf-pill-bg: var(--panel);
  --tf-icon-fill: var(--ink);
  --tf-icon-hover: var(--olive);
}
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { background: var(--paper); color: var(--ink); font-family: var(--bs-font-sans-serif); -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4,h5,h6 { color: var(--ink); font-family: inherit; font-weight: 600; letter-spacing: -.035em; }
p,li,.lead { color: var(--muted); line-height: 1.7; }
a { color: var(--bs-link-color); text-decoration: none; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--olive); outline-offset: 4px; }
::selection { background: #dbe0cd; color: var(--ink); }
.container { max-width: 1080px; }
.display-4 { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 500; }
.lead { font-size: 1rem; font-weight: 400; }
hr { border-color: var(--line); opacity: 1; }
.text-muted,.date { color: var(--muted) !important; }
.navbar-dark-ml { background: var(--panel); border-bottom: 1px solid var(--line); }
.navbar-dark-ml .container-fluid { max-width: 1128px; gap: 12px; }
.navbar-brand { color: var(--ink); font-size: .95rem; font-weight: 600; letter-spacing: -.025em; }
.navbar-brand:hover { color: var(--olive); }
.navbar-dark-ml .nav-link { color: var(--muted); font-size: .8rem; padding: .5rem .8rem; border-radius: 5px; }
.navbar-dark-ml .nav-link:hover { color: var(--ink); background: #ded8c9; }
.profile { padding: 72px 0 60px; }
.profile-grid { display: grid; grid-template-columns: 1fr 230px; align-items: center; gap: 64px; }
.profile h1 { font-size: clamp(2.5rem, 5vw, 3.8rem); font-weight: 500; margin-bottom: 16px; }
.profile .intro { max-width: 49ch; margin-bottom: 24px; }
.profile .portrait { width: 230px; height: 230px; object-fit: cover; border: 1px solid var(--line); border-radius: 50%; }
.profile .interests { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.profile .interests span { font-size: .75rem; color: var(--muted); padding: 4px 9px; background: var(--panel); border-radius: 4px; }
.profile details { margin-top: 28px; max-width: 610px; border-top: 1px solid var(--line); padding-top: 16px; font-size: .85rem; }
.profile summary { cursor: pointer; color: var(--muted); width: fit-content; }
.profile details h2 { font-size: .85rem; margin-top: 20px; letter-spacing: 0; }
.profile details ul { padding-left: 18px; }
.btn-social,.btn-ml { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line); color: var(--ink); background: var(--surface); font: 500 .8rem var(--bs-font-sans-serif); padding: .55rem .85rem; border-radius: 5px; text-decoration: none; }
.btn-social:hover,.btn-ml:hover { color: var(--ink); background: var(--panel); border-color: var(--olive); }
.btn-social:first-child { background: var(--olive); color: var(--surface); border-color: var(--olive); }
.projects-dark-ml,#research,#school-projects,#publications { background: var(--paper); }
.projects-dark-ml > .container,#research > .container,#school-projects > .container { border-top: 1px solid var(--line); padding-top: 32px; }
.projects-dark-ml.py-5,#research.py-5,#school-projects.py-5 { padding-top: 0 !important; padding-bottom: 48px !important; }
.section-heading::after { content: none; }
.card-dark-ml { background: var(--surface); border: 1px solid var(--line); border-radius: 7px; overflow: hidden; box-shadow: none; }
.card-dark-ml .card-body { padding: 24px; }
.card-dark-ml .card-title { font-size: 1.1rem; line-height: 1.5; }
.card-dark-ml .card-title small { font-size: .7rem; letter-spacing: 0; font-weight: 400; margin-top: 5px; }
.card-dark-ml .card-text { font-size: .875rem; max-width: 65ch; }
.card-dark-ml img { height: 100%; object-fit: cover; }
.card-dark-ml .rounded-start { border-radius: 0 !important; }
.badge-ml { background: var(--panel); color: var(--muted); font-size: .65rem; font-weight: 500; padding: 5px 8px; border-radius: 4px !important; }
.accordion-item { background: var(--surface); border: 1px solid var(--line); border-radius: 6px !important; overflow: hidden; }
.accordion-button { background: var(--surface); color: var(--ink); font: 500 .9rem var(--bs-font-sans-serif); padding: 20px; }
.accordion-button:not(.collapsed) { background: var(--panel); color: var(--ink); box-shadow: none; }
.accordion-button:focus { box-shadow: inset 0 0 0 2px var(--olive); }
.accordion-button::after { filter: grayscale(1); }
.accordion-body { background: var(--surface); color: var(--muted); }
.footer-dark-ml { background: var(--paper); border-top: 1px solid var(--line); }
.footer-dark-ml .container-fluid { max-width: 1128px; }
.footer-dark-ml a { color: var(--muted); font-size: .7rem; }
.resume-dark-ml { background: var(--paper); }
.resume-dark-ml .display-6 { font-size: 1.4rem; }
.tf-social { fill: currentColor; width: 1.5em; height: 1.5em; }
pre { padding: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 5px; }
code { color: #596047; }
pre code { color: var(--ink); }
.container > p,.container > ul { max-width: 78ch; }
.container img { max-width: 100%; }
@media (max-width: 767px) {
  .container { padding-left: 24px; padding-right: 24px; }
  .navbar-dark-ml .container-fluid { flex-wrap: wrap; padding: 8px 20px; }
  .navbar-dark-ml .nav-link { padding: .5rem .45rem; font-size: .72rem; }
  .profile { padding: 40px 0; }
  .profile-grid { grid-template-columns: 1fr; gap: 24px; }
  .profile .portrait { grid-row: 1; width: 110px; height: 110px; }
  .profile h1 { font-size: 2.5rem; }
  .card-dark-ml .card-body { padding: 20px; }
  .card-dark-ml .card-title small { float: none !important; display: block; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { transition: none !important; animation: none !important; }
}

/* Profile facts remain visible, with quiet labels and no disclosure controls. */
.profile-facts { display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px 56px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); }
.profile-facts h2,.experience > h2 { font-size: 1rem; letter-spacing: -.02em; margin-bottom: 20px; }
.profile-facts p,.profile-facts dd,.profile-facts li { font-size: .82rem; }
.skills-list { margin: 0; }
.skills-list > div { margin-bottom: 14px; }
.skills-list dt { font-size: .75rem; font-weight: 500; color: var(--ink); margin-bottom: 4px; }
.skills-list dd { color: var(--muted); line-height: 1.65; margin: 0; }
.fact-name { color: var(--ink); font-weight: 500; }
.education-item span,.certificates li > span { display: block; }
.education-item span,.certificates li > span:last-child { color: var(--muted); font-size: .75rem; margin-top: 3px; }
.certificates { grid-column: 1 / -1; }
.certificates ul { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; padding: 0; margin: 0; list-style: none; }
.experience { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--line); }
.experience ul { list-style: none; padding: 0; margin: 0; }
.experience li { display: flex; justify-content: space-between; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.experience li:last-child { border-bottom: 0; padding-bottom: 0; }
.experience h3 { font-size: .9rem; letter-spacing: 0; margin-bottom: 5px; }
.experience p { font-size: .8rem; margin: 0; max-width: 70ch; }
.experience .experience-org { margin-bottom: 5px; color: var(--ink); }
.experience-date { font-size: .72rem; white-space: nowrap; padding-top: 2px; }
@media (max-width: 767px) {
  .profile-facts { grid-template-columns: 1fr; gap: 28px; margin-top: 32px; }
  .certificates ul { grid-template-columns: 1fr; gap: 16px; }
  .experience li { flex-direction: column; gap: 6px; }
}

.ongoing-project { margin-top: 24px; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.project-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; }
.project-heading h3 { font-size: 1rem; letter-spacing: -.02em; margin: 0; }
.project-status { font-size: .7rem; font-weight: 500; color: #55603f; background: #e6e9dc; border-radius: 4px; padding: 4px 8px; }
.ongoing-project p { font-size: .875rem; max-width: 68ch; margin: 0; }

.project-link { display: block; color: var(--ink); transition: border-color .15s ease, background-color .15s ease; }
.project-link:hover { background: var(--panel); border-color: var(--olive); }
.project-link:focus-visible { outline: 2px solid var(--olive); outline-offset: 4px; }

/* PR board. Rendered live by the Cloudflare Worker at /pr, so it is styled
   from the same tokens as the Jekyll pages rather than its own palette. */
.pr-page { background: var(--paper); }
.pr-intro { max-width: 62ch; margin-bottom: 32px; }
.pr-counts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; padding: 0; }
.pr-counts > div { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 12px 18px; min-width: 94px; }
.pr-counts dt { font-size: .7rem; color: var(--muted); font-weight: 500; }
.pr-counts dd { margin: 2px 0 0; font-size: 1.5rem; font-weight: 500; color: var(--ink); letter-spacing: -.03em; line-height: 1.2; }
.pr-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pr-filter { font: 500 .72rem var(--bs-font-sans-serif); color: var(--muted); background: var(--panel); border: 1px solid transparent; border-radius: 4px; padding: 5px 10px; }
.pr-filter:hover { color: var(--ink); }
.pr-filter.is-active { background: var(--olive); color: var(--surface); }
.pr-section { font-size: .75rem; font-weight: 600; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; margin: 28px 0 10px; }
.pr-section span { color: var(--ink); font-weight: 500; margin-left: 4px; }
.pr-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); overflow: hidden; }
.pr-row { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.pr-row[hidden], .pr-list[hidden], .pr-section[hidden] { display: none !important; }
.pr-row:last-child { border-bottom: 0; }
.pr-main { flex: 1 1 auto; min-width: 0; }
.pr-main:hover .pr-title { color: var(--olive); }
.pr-title { display: block; color: var(--ink); font-size: .9rem; font-weight: 500; line-height: 1.45; }
.pr-meta { display: block; color: var(--muted); font-size: .72rem; margin-top: 3px; }
.pr-num { margin-left: 1px; }
.pr-agent { margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--line); }
.pr-tag { display: inline-block; background: var(--panel); color: var(--muted); font-size: .62rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding: 3px 6px; border-radius: 3px; margin-right: 8px; vertical-align: 1px; }
.pr-tag-qa-test { background: #dbe0cd; color: #46512f; }
.pr-ci { flex: 0 0 auto; font-size: .7rem; font-weight: 500; padding: 4px 9px; border-radius: 4px; background: var(--panel); color: var(--muted); white-space: nowrap; }
.pr-ci-pass { background: #dde5d3; color: #3f5733; }
.pr-ci-fail { background: #eedcd5; color: #83432f; }
.pr-ci-pending { background: #e9e2ca; color: #665a2f; }
.pr-empty { color: var(--muted); font-size: .85rem; }
.pr-foot { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: .75rem; }
@media (max-width: 575px) {
  .pr-row { flex-wrap: wrap; gap: 8px 12px; }
  .pr-counts > div { flex: 1 1 calc(50% - 8px); min-width: 0; }
}

/* Back link shared by project detail pages. */
.page-back { display: inline-block; font-size: .78rem; color: var(--muted); margin-bottom: 14px; }
.page-back:hover { color: var(--olive); }

/* ECE 605 Grok bot workflow page. */
.grok-lead { font-size: .9rem; max-width: 68ch; margin-bottom: 24px; }
.grok-h { font-size: .75rem; font-weight: 600; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; margin: 28px 0 12px; }

.grok-figure { margin: 0 0 8px; }
.grok-figure img { width: 100%; border: 1px solid var(--line); border-radius: 6px; display: block; }
.grok-figure figcaption { font-size: .72rem; color: var(--muted); margin-top: 8px; }

/* The diagram is drawn from the page's own tokens, so it never looks pasted in. */
.grok-diagram { width: 100%; height: auto; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 8px; }
.grok-diagram .g-box { fill: var(--surface); stroke: var(--line); stroke-width: 1; }
.grok-diagram .g-lead-box { fill: #e6e9dc; stroke: var(--olive); }
.grok-diagram .g-out-box { fill: var(--panel); }
.grok-diagram .g-pill { fill: var(--panel); stroke: none; }
.grok-diagram .g-line { stroke: var(--muted); stroke-width: 1.25; fill: none; }
.grok-diagram .g-dash { stroke: var(--line); stroke-dasharray: 3 4; }
.grok-diagram text { font-family: var(--bs-font-sans-serif); }
.grok-diagram .g-md { font-size: 13px; font-weight: 500; fill: var(--ink); }
.grok-diagram .g-sm { font-size: 11.5px; font-weight: 500; fill: var(--muted); }
.grok-diagram .g-xs { font-size: 11px; fill: var(--muted); }

.grok-roster { margin: 0 0 8px; }
.grok-roster > div { display: grid; grid-template-columns: 230px 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.grok-roster > div:last-child { border-bottom: 0; }
.grok-roster dt { font-size: .8rem; font-weight: 500; color: var(--ink); }
.grok-roster dd { font-size: .8rem; color: var(--muted); margin: 0; }

.grok-credit { font-size: .78rem; color: var(--muted); margin: 24px 0 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.grok-credit strong { color: var(--ink); font-weight: 500; }
.grok-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }

@media (max-width: 575px) {
  .grok-roster > div { grid-template-columns: 1fr; gap: 2px; }
}