/* Personal portfolio: readable writing, useful imagery, restrained color. */
.folio {
  --ink:#242a32; --muted:#59616b; --subtle:#59616b; --paper:#faf9f6;
  --surface:#f0eee8; --line:#d9dcd9; --accent:#3157b7; --accent-hover:#21418d;
  --accent-soft:#e9eefb; --on-accent:#fff; --teal:#216655; --warm:#92511f;
  --focus-ring:#3157b7; --green-paper:#e8f0e9; --blue-paper:#e7eef7; --warm-paper:#f4e9d9;
  --font-ui:"Segoe UI Variable Text","Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink); background:var(--paper); font:17px/1.8 var(--font-ui);
}
:root[data-reader-theme="dark"] .folio {
  --ink:#e9e9e4; --muted:#b9bec7; --subtle:#b9bec7; --paper:#171a1e;
  --surface:#20252b; --line:#444b53; --accent:#a4baff; --accent-hover:#cbd7ff;
  --accent-soft:#2b3650; --on-accent:#171a1e; --teal:#93d5bd; --warm:#ecc294;
  --focus-ring:#a4baff; --green-paper:#22382f; --blue-paper:#263449; --warm-paper:#3b3025;
}
:root[data-reader-theme="dark"]:has(.folio) { color-scheme:dark; }
.folio :is(h1,h2,h3,h4) { font-family:var(--font-ui); letter-spacing:-.025em; text-wrap:balance; }
.folio a { text-underline-offset:5px; }
.folio .wrap { width:min(1160px,calc(100% - 80px)); }
.folio :is(button,a,input,summary):focus-visible { outline:3px solid var(--focus-ring); outline-offset:4px; }
.folio .site-header { background:var(--paper); box-shadow:none; border:0; backdrop-filter:none; }
.folio .header-inner { min-height:72px; gap:32px; }
.folio .brand { min-height:44px; padding:0; }
.folio .brand-wordmark { font-size:23px; font-weight:650; letter-spacing:-.04em; }
.folio .nav-links { gap:30px; margin-left:auto; }
.folio .nav-links a { font-size:15px; min-height:44px; padding:12px 0; line-height:20px; }
.folio .nav-links a::after { height:2px; bottom:5px; }
.folio .header-controls { gap:12px; }
.folio .language-controls { border:0; border-radius:0; background:transparent; }
.folio .language-controls button { height:44px; min-width:36px; padding:4px; border:0; background:transparent; font-size:14px; }
.folio .language-controls button[aria-pressed="true"] { background:transparent; }
.folio .reader-settings { position:relative; }
.folio .reader-toggle { display:flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; padding:10px; border:0; background:transparent; color:var(--muted); }
.folio .reader-label { display:none; }
.folio .reader-toggle svg { width:20px; height:20px; }
.folio .reader-toggle circle { fill:var(--paper); }
.folio .reader-panel { position:absolute; right:0; top:calc(100% + 10px); width:280px; padding:22px; border:1px solid var(--line); border-radius:12px; background:var(--paper); color:var(--ink); box-shadow:0 12px 36px #0002; z-index:60; }
.folio .reader-panel fieldset { margin:0; padding:0; border:0; }
.folio .reader-panel legend { margin-bottom:12px; padding:0; font-size:16px; font-weight:600; }
.folio .reader-theme-options { display:flex; gap:10px; }
.folio .reader-theme-options button { display:flex; flex:1; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:8px; font-size:15px; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:var(--paper); }
.folio .reader-theme-options button[aria-pressed="true"] { border-color:var(--accent); background:var(--accent-soft); }
.folio .theme-swatch { display:none; }
.folio .reader-motion { display:flex; gap:10px; align-items:center; min-height:44px; margin-top:16px; font-size:15px; }
.folio .reader-motion input { width:18px; height:18px; accent-color:var(--accent); }
.folio .reader-motion-hint,.folio #motion-system-note { font-size:14px; color:var(--muted); }
.folio .menu-toggle { width:44px; height:44px; border-radius:6px; }
.folio .browse-progress { border-block:1px solid var(--line); background:var(--paper); }
.folio .browse-progress-inner { min-height:30px; grid-template-columns:190px minmax(48px,1fr) 45px; gap:24px; }
.folio .browse-context-label,.folio [data-browse-section],.folio .browse-percentage { font-size:13px; }
.folio .browse-percentage > span { font-size:12px; }
.folio .browse-meter { height:2px; }
.folio .folio-intro { display:grid; grid-template-columns:minmax(0,1fr) 255px; gap:90px; align-items:end; padding-block:64px 68px; }
.folio .intro-role { font-size:15px; letter-spacing:.015em; color:var(--teal); margin-bottom:12px; }
.folio .intro-copy h1 { display:flex; gap:20px; align-items:baseline; margin:0 0 24px; font-size:64px; font-weight:650; line-height:1.15; }
.folio .intro-copy .other-name { font-size:24px; font-weight:400; letter-spacing:0; color:var(--muted); }
.folio .intro-bio { font-size:19px; line-height:1.85; max-width:650px; }
.folio .intro-note { font-size:17px; color:var(--muted); margin-top:12px; }
.folio .intro-copy > .button-primary { margin-top:26px; }
.folio .button-primary { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:46px; padding:9px 19px; background:var(--accent); border:1px solid var(--accent); color:var(--on-accent); border-radius:7px; font-size:16px; line-height:1.6; font-weight:500; text-decoration:none; }
.folio .button-primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); color:var(--on-accent); }
.folio .intro-links { border-top:1px solid var(--line); padding-top:18px; margin-bottom:4px; }
.folio .intro-links p { font-size:14px; color:var(--muted); margin-bottom:12px; }
.folio .intro-links a { display:flex; justify-content:space-between; gap:10px; padding-block:10px; min-height:44px; font-size:15px; color:var(--ink); }
.folio .intro-links a:hover { color:var(--accent); }
.folio .intro-links a > span:last-child { color:var(--accent); }
.folio .folio-heading { display:flex; justify-content:space-between; align-items:end; gap:28px; margin-bottom:32px; }
.folio .folio-heading h2 { margin:0; font-size:34px; line-height:1.35; font-weight:650; }
.folio .folio-heading p { margin-top:10px; font-size:17px; color:var(--muted); line-height:1.8; }
.folio .folio-heading > a { flex-shrink:0; display:inline-flex; align-items:center; min-height:44px; font-size:15px; }
.folio .folio-work { border-top:1px solid var(--line); padding-top:44px; padding-bottom:64px; }
.folio .work-feature { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:44px; align-items:center; padding-block:32px 42px; border-bottom:1px solid var(--line); }
.folio .work-feature:first-child { padding-top:0; }
.folio .work-feature:last-child { border-bottom:0; padding-bottom:20px; }
.folio .work-visual { margin:0; min-width:0; }
.folio .work-visual button { position:relative; display:block; width:100%; padding:25px; border:0; border-radius:12px; background:var(--green-paper); overflow:hidden; }
.folio [data-project-key="counselor"] .work-visual button { background:var(--blue-paper); }
.folio [data-project-key="forms"] .work-visual button { background:var(--warm-paper); }
.folio .work-visual img { width:100%; height:320px; object-fit:contain; border:1px solid #172c3b20; border-radius:6px; background:#fff; box-shadow:0 10px 20px #1e2b3010; transition:transform .22s ease; }
.folio .work-visual button:hover img { transform:translateY(-3px); }
.folio .enlarge-label { display:flex; justify-content:flex-end; padding-top:15px; font-size:14px; color:var(--ink); }
.folio .work-visual figcaption { font-size:14px; color:var(--muted); padding:10px 1px 0; }
.folio .work-copy { min-width:0; }
.folio .work-category { color:var(--teal); font-size:14px; margin-bottom:8px; }
.folio [data-project-key="counselor"] .work-category { color:var(--accent); }
.folio [data-project-key="forms"] .work-category { color:var(--warm); }
.folio .work-copy h3 { font-size:29px; font-weight:650; line-height:1.4; margin:0 0 16px; }
.folio .work-summary { font-size:18px; line-height:1.8; }
.folio .work-focus { font-size:16px; line-height:1.85; color:var(--muted); margin-top:12px; }
.folio .work-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px 22px; margin-top:24px; }
.folio .work-actions > a:not(.button-primary) { display:inline-flex; align-items:center; min-height:44px; font-size:15px; }
.folio .work-scope { margin-top:14px; }
.folio .work-scope summary { width:fit-content; cursor:pointer; padding-block:8px; font-size:14px; color:var(--muted); min-height:40px; }
.folio .work-scope p,.folio .work-scope .source-note { border:0; padding:0; margin:10px 0; font-size:15px; line-height:1.85; color:var(--muted); }
.folio .work-scope .tags { margin-block:12px; gap:6px 12px; }
.folio .work-scope .tags span { background:transparent; padding:0; border:0; font-size:14px; color:var(--muted); }
.folio .work-scope dt { font-size:14px; font-weight:600; }
.folio .work-scope dd { margin:0 0 10px; font-size:15px; }
.folio .work-boundary { font-size:14px; line-height:1.7; color:var(--muted); margin-top:4px; }
.folio .work-directory { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 25px; padding-block:24px; border-block:1px solid var(--line); margin-top:24px; }
.folio .work-directory p { color:var(--muted); font-size:16px; }
.folio .work-directory a { font-size:16px; }
.folio .folio-research { padding-block:58px; background:var(--blue-paper); }
.folio .research-pair { display:grid; grid-template-columns:1fr 1fr; gap:60px; }
.folio .research-brief h3 { font-size:25px; line-height:1.5; margin-bottom:14px; }
.folio .research-brief .status { font-size:14px; background:transparent; color:var(--muted); padding:0; border:0; white-space:normal; line-height:1.8; }
.folio .research-brief > p { font-size:17px; line-height:1.85; margin:16px 0 12px; }
.folio .research-brief > a { display:inline-flex; align-items:center; min-height:44px; font-size:16px; }
.folio .research-guide { display:inline-flex; align-items:center; min-height:44px; margin-top:24px; font-size:15px; }
.folio .folio-notes { padding-block:64px; }
.folio .home-notes { border-top:1px solid var(--line); }
.folio .home-note { display:grid; grid-template-columns:150px minmax(0,1fr); column-gap:35px; padding-block:26px; border-bottom:1px solid var(--line); }
.folio .home-note .learning-entry-meta { grid-row:1/4; display:flex; flex-direction:column; gap:5px; font-size:14px; line-height:1.8; color:var(--muted); }
.folio .home-note .learning-entry-meta span { color:var(--warm); }
.folio .home-note h3 { font-size:22px; line-height:1.6; margin-bottom:8px; }
.folio .home-note h3 a { display:flex; justify-content:space-between; gap:20px; color:var(--ink); }
.folio .home-note h3 a:hover { color:var(--accent); }
.folio .learning-arrow { color:var(--accent); }
.folio .home-note > p { font-size:17px; color:var(--muted); line-height:1.85; }
.folio .home-note .learning-entry-foot { display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:12px; font-size:14px; color:var(--muted); }
.folio .home-note-scope { margin-top:24px; font-size:14px; line-height:1.85; color:var(--muted); }
.folio .journal-history { margin-top:28px; border-block:1px solid var(--line); }
.folio .journal-history > summary,.folio .notebook-archive > summary,.folio .background-details > summary { cursor:pointer; min-height:52px; padding-block:14px; font-size:16px; font-weight:500; }
.folio .learning-journey { margin:0; padding:24px 0; border:0; border-radius:0; background:transparent; --journey-tint:var(--blue-paper); --journey-soft:var(--surface); }
.folio .journey-heading { padding-bottom:20px; }
.folio .journey-heading h3 { font-size:25px; }
.folio .journey-heading > p { font-size:15px; }
.folio .journey-layout { gap:50px; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); }
.folio .timeline-filters { padding:0; background:transparent; }
.folio .timeline-filters button { font-size:14px; border-radius:6px; }
.folio .timeline-filters button[aria-pressed="true"] { background:var(--accent-soft); color:var(--accent); border-color:transparent; box-shadow:none; }
.folio [data-timeline-count],.folio .timeline-kind,.folio .timeline-date > span { font-size:14px; }
.folio .timeline-note h4 { font-size:18px; }
.folio .timeline-note > p:last-child { font-size:16px; line-height:1.85; }
.folio .learning-trail-entry::after { box-shadow:0 0 0 4px var(--paper); }
.folio .learning-next { padding:26px; border:0; border-radius:10px; background:var(--warm-paper); }
.folio .learning-next h3 { font-size:25px; }
.folio .next-kicker { font-size:14px; color:var(--warm); }
.folio .learning-next > p:not(.next-kicker):not(.next-status),.folio .next-steps p { font-size:16px; }
.folio .next-steps strong { font-size:17px; }
.folio .next-steps li > span,.folio .learning-next .next-status { font-size:14px; }
.folio .next-reading,.folio .timeline-more { font-size:15px; }
.folio .notebook-archive { margin-top:15px; }
.folio .notebook-archive p,.folio .notebook-archive li { font-size:16px; }
.folio .notebook-archive h3 { font-size:21px; }
.folio .notebook-archive .note-entry { border-bottom:1px solid var(--line); padding-block:16px; }
.folio .folio-background { padding-block:30px 64px; border-top:1px solid var(--line); }
.folio .background-columns { display:grid; grid-template-columns:1.4fr 1fr; gap:72px; }
.folio .background-columns > div > h3 { margin:0 0 20px; color:var(--muted); font-size:16px; font-weight:500; }
.folio .experience-grid,.folio .education-grid { display:grid; grid-template-columns:1fr; gap:26px; }
.folio .timeline-entry { grid-template-columns:155px minmax(0,1fr); gap:20px; border:0; padding:0; }
.folio .timeline-entry time { font-size:14px; color:var(--muted); padding-top:3px; }
.folio .timeline-entry h4 { font-size:18px; line-height:1.6; }
.folio .timeline-entry p { font-size:16px; color:var(--muted); }
.folio .timeline-entry .source-note { font-size:14px; margin-top:8px; border:0; padding:0; }
.folio .applied-experience { margin-top:30px; }
.folio .applied-experience summary { font-size:15px; padding-block:12px; }
.folio .applied-experience p { font-size:16px; }
.folio .background-details { border-top:1px solid var(--line); margin-top:20px; }
.folio .background-details #skills { padding-block:24px; }
.folio .background-details #skills .wrap { width:100%; }
.folio .background-details .profile-aside { background:var(--surface); border:0; padding:24px; }
.folio .background-details .profile-aside p { font-size:16px; }
.folio .folio-contact { border-top:1px solid var(--line); padding-block:36px 52px; }
.folio .folio-contact h2 { font-size:30px; }
.folio .folio-contact > p { font-size:17px; color:var(--muted); margin-block:12px; }
.folio .contact-links { display:flex; gap:30px; }
.folio .contact-links a { font-size:16px; display:inline-flex; align-items:center; min-height:44px; }
.folio .site-footer { border-top:1px solid var(--line); background:var(--surface); padding-block:24px; }
.folio .folio-footer { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px 28px; }
.folio .folio-footer p,.folio .folio-footer a { font-size:14px; }
.folio .folio-footer nav { display:flex; gap:25px; flex-wrap:wrap; }
.folio .folio-footer a { display:inline-flex; align-items:center; min-height:44px; }
.folio .back-top { width:44px; height:44px; border-radius:8px; box-shadow:none; background:var(--paper); color:var(--ink); }
.folio .lightbox { width:min(1400px,calc(100% - 48px)); border-radius:10px; background:var(--paper); }
.folio .lightbox-close { width:44px; height:44px; top:0; right:8px; }
.folio .lightbox p,.folio .preview-actions { font-size:15px; }
.folio .lightbox-image { margin-inline:auto; }
:root[data-reader-theme="dark"] .folio .icon-button img { filter:brightness(0) invert(1); }
.folio-directory #work,.folio-directory #research { padding-top:50px; }
.folio-directory .section-heading h2,.folio-directory .section-heading h1 { font-size:38px; }
.folio-directory .section-heading p { font-size:17px; }
.folio-directory .project-body > p { font-size:17px; }
.folio-directory .project-body .source-note { font-size:15px; }
.folio-directory .project-details > p { font-size:16px; }
.folio-directory .project-details > summary { font-size:15px; }
.folio-directory .project-links a { font-size:16px; }
.folio-directory .project-search input { font-size:16px; }
.folio-directory .project-list { gap:28px; }
.folio-directory #demos.demo-showcase { background:var(--blue-paper); }
.folio-directory .research-updates { display:none; }
.folio-directory #research .pub-body h3 { font-size:24px; }
.folio-directory #research .pub-body p { font-size:17px; line-height:1.85; }
.folio-directory #research .pub-meta,.folio-directory #research .status,.folio-directory #research .pub-links a { font-size:14px; }
.folio-directory .project-item { border-radius:12px; }
.folio-directory .folio-footer { display:flex; }
.folio-ready .work-feature.is-entering { animation:portfolio-enter .35s ease-out both; }
@keyframes portfolio-enter { from { opacity:.45; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media (max-width:1100px) {
 .folio .nav-links { gap:20px; }
 .folio .header-inner { gap:20px; }
 .folio .folio-intro { gap:55px; }
 .folio .work-feature { gap:30px; grid-template-columns:1.15fr 1fr; }
 .folio .work-visual button { padding:18px; }
 .folio .work-visual img { height:290px; }
 .folio .background-columns { gap:36px; }
 .folio .timeline-entry { grid-template-columns:1fr; gap:5px; }
}
@media (max-width:900px) {
 .folio .folio-intro { grid-template-columns:1fr; gap:28px; }
 .folio .intro-links { display:flex; flex-wrap:wrap; align-items:center; gap:10px 28px; border-top:0; padding:0; }
 .folio .intro-links p { display:none; }
 .folio .intro-links a { gap:14px; }
 .folio .work-feature { grid-template-columns:1fr; gap:20px; padding-block:28px 36px; }
 .folio .work-visual img { height:auto; max-height:380px; }
 .folio .work-visual button { padding:25px; }
 .folio .work-copy h3 { margin-bottom:12px; }
 .folio .work-copy { max-width:700px; }
 .folio .research-pair { gap:35px; }
 .folio .home-note { grid-template-columns:120px 1fr; gap:10px 24px; }
 .folio .journey-layout { grid-template-columns:1fr; gap:28px; }
}
@media (max-width:720px) {
 .folio .wrap { width:calc(100% - 40px); }
 .folio .header-inner { min-height:60px; gap:10px; }
 .folio .brand-wordmark { font-size:21px; }
 .folio .header-controls { gap:4px; }
 .folio .nav-links { margin-left:0; padding:16px 20px; gap:8px; background:var(--paper); }
 .folio .nav-links a { font-size:16px; }
 .folio .reader-panel { width:260px; right:-40px; }
 .folio .browse-progress-inner { min-height:30px; grid-template-columns:96px minmax(40px,1fr) 42px; gap:14px; }
 .folio .browse-context-label { display:none; }
 .folio .folio-intro { padding-block:36px 38px; }
 .folio .intro-role { font-size:14px; }
 .folio .intro-copy h1 { font-size:46px; gap:15px; margin-bottom:20px; }
 .folio .intro-copy .other-name { font-size:20px; }
 .folio .intro-bio { font-size:18px; line-height:1.85; }
 .folio .intro-note { font-size:16px; }
 .folio .intro-links { gap:2px 24px; }
 .folio .intro-links a { font-size:14px; }
 .folio .folio-heading { align-items:start; flex-direction:column; gap:8px; margin-bottom:24px; }
 .folio .folio-heading h2 { font-size:30px; }
 .folio .folio-heading p { font-size:16px; }
 .folio .folio-work { padding-block:30px 40px; }
 .folio .work-visual button { padding:16px; border-radius:9px; }
 .folio .work-visual img { min-height:175px; object-fit:contain; }
 .folio .work-copy h3 { font-size:26px; }
 .folio .work-summary { font-size:18px; }
 .folio .work-actions { gap:8px 18px; margin-top:20px; }
 .folio .work-actions .button-primary { flex-basis:100%; width:100%; }
 .folio .work-directory { margin-top:18px; padding-block:20px; }
 .folio .folio-research { padding-block:36px; }
 .folio .research-pair { grid-template-columns:1fr; gap:26px; }
 .folio .research-brief + .research-brief { border-top:1px solid var(--line); padding-top:24px; }
 .folio .research-brief h3 { font-size:23px; }
 .folio .folio-notes { padding-block:40px; }
 .folio .home-note { display:block; padding-block:24px; }
 .folio .home-note .learning-entry-meta { flex-direction:row; flex-wrap:wrap; gap:15px; margin-bottom:10px; }
 .folio .home-note h3 { font-size:21px; }
 .folio .home-note > p { font-size:17px; }
 .folio .home-note .learning-entry-foot { gap:8px 18px; }
 .folio .journey-heading h3 { font-size:23px; }
 .folio .timeline-note h4 { font-size:17px; }
 .folio .learning-next { padding:22px; }
 .folio .background-columns { grid-template-columns:1fr; gap:32px; }
 .folio .folio-background { padding-block:30px 40px; }
 .folio .timeline-entry { grid-template-columns:1fr; }
 .folio .folio-contact { padding-block:28px 36px; }
 .folio .folio-contact h2 { font-size:28px; }
 .folio .folio-footer { display:block; }
 .folio .folio-footer nav { gap:18px; margin-block:8px; }
 .folio .lightbox { width:calc(100% - 20px); padding:44px 10px 18px; }
 .folio .lightbox p { font-size:14px; }
 .folio-directory .section-heading h2,.folio-directory .section-heading h1 { font-size:30px; }
}
@media (prefers-reduced-motion:reduce) {
 .folio * { scroll-behavior:auto!important; animation:none!important; transition:none!important; }
 .folio .work-visual button:hover img { transform:none; }
}
:root[data-reader-motion="reduce"] .folio * { scroll-behavior:auto!important; animation:none!important; transition:none!important; }
:root[data-reader-motion="reduce"] .folio .work-visual button:hover img { transform:none; }
@media print {
 .folio { --paper:#fff; --ink:#111; --muted:#444; --line:#bbb; --blue-paper:#fff; --warm-paper:#fff; --green-paper:#fff; font-size:12pt; }
 .folio .wrap { width:100%; }
 .folio .folio-intro { padding-block:15px; grid-template-columns:1fr; }
 .folio .work-feature { break-inside:avoid; grid-template-columns:1fr 1fr; padding-block:20px; }
 .folio .work-visual img { height:auto; }
 .folio .folio-research,.folio .folio-notes,.folio .folio-background { padding-block:20px; }
 .folio .work-actions,.folio .enlarge-label { display:none; }
 .folio .journal-history,.folio .background-details { display:block; }
}