/* The Cosmic Notebook: one visual language across the full personal website. */
.notebook-site [hidden] { display: none !important; }
.notebook-site .concept-header nav { gap: 25px; }
.notebook-site .concept-header nav a[aria-current="page"] { color: #334c43; text-decoration: underline; text-decoration-color: #bd9653; text-decoration-thickness: 2px; text-underline-offset: 7px; }
.notebook-site main { padding-bottom: 12px; }
.notebook-lead strong { color: #334c43; font-size: 22px; font-weight: 500; }
.trust-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 19px; }
.trust-topics a { background: #e8eedf; border: 1px solid #d7e0ca; padding: 5px 11px; font-size: 12px; border-radius: 3px; }
.trust-topics a:nth-child(2) { background: #efeaf4; border-color: #e0d8e8; }
.trust-topics a:nth-child(3) { background: #f5e8d8; border-color: #e7d6bf; }
.trust-topics a:hover { text-decoration: underline; text-underline-offset: 3px; }
.page-heading { padding: 65px 0 48px; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: #65755f; font: 12px/1.8 monospace; letter-spacing: 1px; }
.dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #91a37d; }
.page-heading h1 { font-size: clamp(40px, 4.5vw, 64px); font-weight: 500; line-height: 1.14; letter-spacing: -2.4px; margin-top: 17px; }
.page-heading h1 em { font-style: normal; color: #81915d; }
.page-heading > p { max-width: 790px; font-size: 16px; color: #5f715f; line-height: 1.9; margin-top: 24px; }
.page-jumps { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 21px; }
.page-jumps a { font-size: 13px; padding: 12px 0; color: #566e50; text-decoration: underline; text-decoration-color: #c2ccb1; text-underline-offset: 5px; }
.page-jumps a:hover { text-decoration-color: #566e50; }
.text-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 13px; font-weight: 500; text-decoration: underline; text-decoration-color: #bdc7ad; text-underline-offset: 5px; }
.text-link:hover { color: #93622f; text-decoration-color: currentColor; }
.text-link > span { display: inline-block; font-size: 18px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 15px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 23px; }
.tag { font-size: 12px; line-height: 1.7; padding: 4px 9px; background: #e9eddf; color: #5e7152; border-radius: 3px; }
.page-next { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 25px 0; border-block: 1px dashed #c9ceba; margin-top: 55px; }
.page-next > span { color: #6b795f; font-size: 12px; }
.page-next a { display: inline-flex; align-items: center; gap: 22px; font-size: 15px; min-height: 44px; }
.page-next a:hover { text-decoration: underline; text-underline-offset: 5px; }
.page-next a > span { font-size: 23px; color: #9b7843; }

/* Research: questions, contributions, and their supporting work. */
.research-intro { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 65px; padding: 8px 0 45px; }
.research-intro h2 { font-size: 28px; line-height: 1.45; letter-spacing: -.6px; font-weight: 500; margin-top: 14px; }
.research-intro p, .research-area p, .research-vision p { color: #5f705f; font-size: 14px; line-height: 1.9; margin-top: 16px; }
.research-intro img { width: 100%; border: 1px solid #d4ddc8; border-radius: 5px; box-shadow: 6px 7px 0 #ecebdc; transform: rotate(2deg); }
.research-area { display: grid; grid-template-columns: 43px 1fr 270px; gap: 28px; padding: 41px 0; border-top: 1px dashed #c9ceba; scroll-margin-top: 28px; }
.research-area > * { min-width: 0; }
.area-number { color: #8b9d71; font: 13px/1.8 monospace; padding-top: 3px; }
.research-lens { color: #717e58; font: 12px/1.8 monospace; letter-spacing: .6px; margin-bottom: 10px; }
.research-area h2 { font-size: 26px; font-weight: 500; letter-spacing: -.6px; line-height: 1.4; }
.related-work { align-self: start; background: #eef0e2; border: 1px solid #dce1cd; border-radius: 4px; padding: 19px 21px 9px; }
#mixed-reality .related-work { background: #efebf3; border-color: #e0d9e8; }
#multi-agent .related-work { background: #f5eadc; border-color: #e7d8c5; }
.related-work a { display: block; font-size: 13px; line-height: 1.75; padding: 16px 0; }
.related-work a + a { border-top: 1px dashed #cbd1ba; }
.related-work a:hover { text-decoration: underline; text-underline-offset: 3px; }
.related-work small { display: block; font-size: 12px; color: #6b765d; margin-top: 7px; }
.research-vision { display: grid; grid-template-columns: 1fr 1.65fr; gap: 80px; border-top: 1px dashed #c9ceba; margin-top: 12px; padding: 42px 0 0; }
.research-vision h2 { font-size: 29px; line-height: 1.4; letter-spacing: -.8px; font-weight: 500; margin-top: 14px; }
.research-vision .hand-note { margin-top: 20px; }
.research-vision > div > p:first-child { margin-top: 0; }
.research-vision .text-link { margin-top: 18px; }
.agenda-list { margin-top: 24px; }
.agenda-list article + article { margin-top: 23px; }
.agenda-list h3 { font-size: 16px; font-weight: 500; }
.agenda-list p { margin-top: 7px; }

/* Projects: retain the substantive case studies, with a paper-and-color style. */
.project-feature { border: 1px solid #d7deca; background: #f1f2e5; border-radius: 7px; padding: 34px; margin: 3px 0 55px; }
.project-feature-top { display: grid; grid-template-columns: 1.12fr 1fr; gap: 49px; align-items: center; }
.project-feature-copy h2 { font-size: 39px; letter-spacing: -1.2px; font-weight: 500; line-height: 1.25; margin-top: 19px; }
.project-feature p, .project-small p { color: #5c6f5c; font-size: 14px; line-height: 1.9; margin-top: 18px; }
.project-feature-copy .text-link { margin-top: 20px; }
.workflow-note { position: relative; background-color: #fcf8eb; background-image: linear-gradient(#dedfc84d 1px, transparent 1px), linear-gradient(90deg, #dedfc84d 1px, transparent 1px); background-size: 21px 21px; border: 1px solid #dfddc7; box-shadow: 5px 6px 0 #e3e5d3; padding: 24px 26px 17px; transform: rotate(2deg); text-align: center; border-radius: 3px; }
.workflow-note::before { content: ""; position: absolute; top: -10px; left: 40%; width: 68px; height: 21px; background: #e9d995bd; transform: rotate(-7deg); }
.workflow-note .notebook-kicker { text-align: left; margin-bottom: 24px; }
.workflow-step { padding: 13px 10px; background: #edf0e4; border: 1px solid #d3dbc3; border-radius: 4px; font-size: 14px; }
.workflow-agent { background: #ece7f2; border-color: #d9d1e4; }
.workflow-arrow { display: block; font-size: 24px; color: #9ca780; margin: 2px 0; }
.workflow-outcomes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.workflow-outcomes span { padding: 8px 12px; font-size: 12px; background: #f1e2ce; border: 1px solid #e2cfb2; border-radius: 3px; }
.workflow-note figcaption { color: #778364; font-size: 12px; margin-top: 18px; }
.project-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; padding: 26px 0; border-block: 1px dashed #c9d0b7; margin-top: 36px; }
.project-facts > div { display: flex; flex-direction: column; gap: 5px; }
.project-facts strong { font-size: 25px; font-weight: 500; letter-spacing: -.5px; }
.project-facts span { font-size: 12px; line-height: 1.8; color: #6b7a5e; }
.case-details { margin-top: 8px; }
.case-details summary { cursor: pointer; font-size: 13px; padding: 16px 0; min-height: 44px; }
.case-details summary:hover { text-decoration: underline; text-underline-offset: 4px; }
.case-detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding: 4px 0 3px; }
.case-detail-grid h3 { font-size: 15px; font-weight: 500; }
.case-detail-grid p { font-size: 13px; margin-top: 9px; }
.section-top { margin-bottom: 28px; }
.section-heading { font-size: 29px; font-weight: 500; letter-spacing: -.7px; margin-top: 12px; }
.project-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 45px; }
.project-small { border: 1px solid #e6d7c2; padding: 31px; border-radius: 5px; background: #f5ebdd; }
.project-small + .project-small { background: #eeebf3; border-color: #ded7e7; }
.project-small h2 { font-size: 29px; font-weight: 500; letter-spacing: -.7px; line-height: 1.35; margin-top: 17px; }
.project-small h3 { font-size: 14px; font-weight: 500; margin-top: 24px; }
.project-small h3 + p { margin-top: 8px; }
.project-small .tag-list { margin-block: 21px; }
.project-small .tag { background: #faf8efb3; }
.project-small .text-link { margin-top: 10px; }
.secondary-paper { display: flex; width: fit-content; margin-top: 0 !important; }
.project-small .award { color: #846336; font-size: 12px; }
.project-small .project-citation { font-size: 12px; margin-top: 18px; }

/* Publications: full metadata, search, and topic filters. */
.publication-tools { border-block: 1px dashed #c9ceba; padding: 22px 0 17px; margin-bottom: 8px; }
.filter-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter { border: 1px solid #d1d9c2; background: transparent; color: #5e7355; border-radius: 4px; padding: 10px 12px; min-height: 44px; font-size: 13px; }
.filter:hover { background: #eef1e3; }
.filter[aria-pressed="true"] { background: #e1e9d5; border-color: #91a777; color: #334c43; box-shadow: inset 0 -2px #91a777; }
.search-wrap { display: flex; align-items: center; gap: 9px; padding: 10px 13px; border: 1px solid #cdd6bd; background: #fffdf6; border-radius: 4px; }
.search-wrap svg { width: 16px; flex-shrink: 0; color: #7a8a67; }
.search-wrap input { width: 196px; min-width: 0; background: transparent; border: 0; color: #334c43; font-size: 13px; min-height: 24px; }
.search-wrap input::placeholder { color: #778469; }
.result-count { color: #65765e; font-size: 12px; margin-top: 15px; }
.publication-row { display: grid; grid-template-columns: 65px 1fr 55px; gap: 26px; padding: 27px 0; border-bottom: 1px solid #d8deca; scroll-margin-top: 28px; }
.publication-row > div { min-width: 0; }
.pub-year { font: 13px/1.7 monospace; color: #768b60; padding-top: 4px; }
.publication-row h3 { font-size: 17px; line-height: 1.6; letter-spacing: -.2px; font-weight: 500; }
.publication-row h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pub-authors { font-size: 12px; line-height: 1.9; color: #63765d; margin-top: 9px; }
.pub-authors strong { font-weight: 600; color: #334c43; }
.pub-venue { color: #728061; font-size: 12px; line-height: 1.9; margin-top: 5px; }
.pub-action { align-self: start; justify-self: end; min-height: 44px; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; text-decoration: underline; text-decoration-color: #bcc8a9; text-underline-offset: 5px; }
.status, .publication-row .award { display: inline-block; font-size: 12px; line-height: 1.7; padding: 4px 9px; margin-top: 11px; border-radius: 3px; background: #f1e7cc; color: #806237; }
.publication-row .award { background: #e6eddb; color: #577245; }
.publication-note { font-size: 12px; color: #697a60; line-height: 1.9; margin: 22px 0; max-width: 780px; }
.publication-note a { text-decoration: underline; text-underline-offset: 3px; }
.empty-state { text-align: center; background: #eef1e4; border: 1px dashed #c9d4b6; border-radius: 5px; margin-top: 24px; padding: 39px 20px; }
.empty-state h2 { font-size: 24px; font-weight: 500; }
.empty-state p { font-size: 14px; color: #66785b; margin-top: 11px; }
.empty-state .button { display: inline-flex; align-items: center; min-height: 44px; background: #faf9f0; border: 1px solid #acbe97; border-radius: 4px; color: #425e3c; padding: 10px 17px; font-size: 13px; margin-top: 20px; }

/* About: professional depth with space for the person. */
.about-intro { display: grid; grid-template-columns: 265px 1fr; gap: 66px; align-items: center; margin-bottom: 58px; }
.about-photo { padding: 12px; border: 1px solid #dedfd1; border-radius: 3px; background: #fffdf5; box-shadow: 5px 6px #eceadc; transform: rotate(-2deg); }
.about-photo img { width: 100%; aspect-ratio: 1 / 1.08; object-fit: cover; object-position: center 18%; }
.about-photo figcaption { font-size: 12px; padding: 14px 3px 3px; color: #627359; }
.about-copy p { color: #5b6e5b; font-size: 15px; line-height: 1.9; margin-top: 20px; }
.about-copy strong { font-weight: 500; color: #334c43; }
.about-copy a, .background-section p a { text-decoration: underline; text-decoration-color: #bcc8ab; text-underline-offset: 3px; }
.about-section { margin-top: 48px; }
.about-role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.about-note { padding: 27px 30px; border: 1px solid #d9dfcc; border-radius: 5px; }
.about-note.note-peach { border-color: #e8d8c1; }
.about-note h3 { font-size: 23px; font-weight: 500; line-height: 1.4; letter-spacing: -.5px; margin-top: 14px; }
.about-note p, .background-section p { color: #5c705b; font-size: 14px; line-height: 1.9; margin-top: 15px; }
.about-note .text-link { margin-top: 16px; }
.background-section { display: grid; grid-template-columns: 1fr 1.7fr; gap: 70px; padding: 39px 0; border-block: 1px dashed #c9ceba; }
.background-section h2 { font-size: 29px; font-weight: 500; letter-spacing: -.7px; line-height: 1.4; margin-top: 11px; }
.education-list article { display: grid; grid-template-columns: 60px 1fr; gap: 21px; padding: 23px 0; border-bottom: 1px solid #dae0cd; }
.education-list article:first-child { padding-top: 3px; }
.education-list article:last-child { border: 0; padding-bottom: 0; }
.education-year { color: #7b8c64; font: 12px/1.8 monospace; padding-top: 3px; }
.education-list h3 { font-size: 18px; font-weight: 500; line-height: 1.7; }
.education-list p { font-size: 12px; margin-top: 6px; }
.education-list .text-link { font-size: 13px; line-height: 1.8; margin-top: 6px; }

@media (max-width: 1000px) {
  .notebook-site .concept-header nav { gap: 18px; }
  .research-area { grid-template-columns: 35px 1fr 225px; gap: 22px; }
  .research-intro { gap: 40px; }
  .research-vision { gap: 45px; }
  .project-feature { padding: 28px; }
  .project-feature-top { gap: 34px; }
  .project-feature-copy h2 { font-size: 34px; }
  .project-small { padding: 25px; }
  .about-intro { grid-template-columns: 225px 1fr; gap: 42px; }
  .background-section { gap: 40px; }
}
@media (max-width: 800px) {
  .notebook-site .concept-header nav { gap: 15px; }
  .page-heading { padding: 47px 0 37px; }
  .page-heading h1 { font-size: 49px; letter-spacing: -1.9px; }
  .page-heading > p { font-size: 15px; }
  .research-intro { grid-template-columns: 1fr; gap: 28px; }
  .research-intro img { width: min(440px, 85%); justify-self: center; }
  .research-area { grid-template-columns: 30px 1fr; gap: 17px; }
  .related-work { grid-column: 2; margin-top: 5px; }
  .related-work a { font-size: 13px; }
  .research-vision { grid-template-columns: 1fr; gap: 25px; }
  .project-feature-top { grid-template-columns: 1fr; gap: 30px; }
  .workflow-note { max-width: 430px; width: 100%; justify-self: center; }
  .case-detail-grid { grid-template-columns: 1fr; gap: 23px; }
  .project-pair { gap: 20px; }
  .project-small h2 { font-size: 26px; }
  .about-intro { grid-template-columns: 180px 1fr; gap: 33px; align-items: start; }
  .about-copy p { font-size: 14px; }
  .about-copy .hand-note { font-size: 12px; }
  .about-note { padding: 23px; }
  .about-note h3 { font-size: 21px; }
  .background-section { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 600px) {
  .notebook-site .concept-header nav { gap: 9px; font-size: 13px; }
  .notebook-site .concept-header nav a { justify-content: center; min-height: 46px; }
  .notebook-lead strong { font-size: 21px; }
  .trust-topics { gap: 6px; }
  .trust-topics a { padding: 7px 10px; }
  .page-heading { padding: 39px 0 33px; }
  .page-heading h1 { font-size: 42px; line-height: 1.17; letter-spacing: -1.7px; }
  .page-heading > p { font-size: 15px; line-height: 1.85; margin-top: 21px; }
  .page-jumps { gap: 0 22px; margin-top: 17px; }
  .page-jumps a { font-size: 13px; }
  .page-next { flex-direction: column; align-items: start; gap: 6px; margin-top: 38px; padding: 22px 0; }
  .research-intro { gap: 31px; padding-bottom: 34px; }
  .research-intro h2 { font-size: 25px; }
  .research-intro img { width: calc(100% - 10px); }
  .research-area { grid-template-columns: 1fr; gap: 12px; padding: 28px 0; }
  .research-area h2 { font-size: 26px; }
  .related-work { grid-column: 1; padding: 18px 21px 8px; margin-top: 12px; }
  .area-number { font-size: 12px; }
  .research-vision { padding-top: 29px; gap: 25px; }
  .research-vision h2 { font-size: 27px; }
  .project-feature { padding: 23px 20px; margin-bottom: 36px; }
  .project-feature-copy h2 { font-size: 34px; }
  .workflow-note { width: calc(100% - 7px); padding: 22px 17px 17px; }
  .workflow-step { font-size: 12px; }
  .workflow-outcomes { gap: 6px; }
  .workflow-outcomes span { padding: 7px 10px; font-size: 12px; }
  .project-facts { grid-template-columns: 1fr; gap: 21px; padding: 24px 0; }
  .project-facts strong { font-size: 24px; }
  .case-detail-grid p { font-size: 14px; }
  .section-heading { font-size: 27px; }
  .project-pair { grid-template-columns: 1fr; gap: 22px; margin-bottom: 32px; }
  .project-small { padding: 25px 22px; }
  .project-small h2 { font-size: 28px; }
  .filter-row { gap: 18px; }
  .filters { gap: 7px; }
  .filter { font-size: 13px; padding: 10px; }
  .search-wrap { width: 100%; }
  .search-wrap input { flex: 1; width: 100%; font-size: 14px; }
  .publication-row { grid-template-columns: 1fr auto; gap: 10px 15px; padding: 23px 0; }
  .pub-year { align-self: center; padding: 0; }
  .publication-row > div:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .pub-action { grid-column: 2; grid-row: 1; }
  .publication-row h3 { font-size: 18px; }
  .pub-authors { font-size: 13px; }
  .pub-venue { font-size: 12px; }
  .about-intro { grid-template-columns: 1fr; gap: 33px; margin-bottom: 38px; }
  .about-photo { width: 215px; margin-left: 5px; }
  .about-copy p { font-size: 15px; }
  .about-section { margin-top: 37px; }
  .about-role-grid { grid-template-columns: 1fr; gap: 23px; }
  .about-note { padding: 26px 23px; }
  .background-section { padding: 28px 0; }
  .background-section h2 { font-size: 28px; }
  .education-list article { grid-template-columns: 44px 1fr; gap: 16px; }
  .education-list h3 { font-size: 17px; }
}
@media (max-width: 380px) {
  .notebook-site .concept-header nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 11px; font-size: 13px; }
  .notebook-site .concept-header nav a { justify-content: start; }
  .page-heading h1 { font-size: 37px; }
  .project-feature { padding-inline: 17px; }
  .workflow-note { padding-inline: 12px; }
}