/* home.css — about/home page (third redesign, 2026-10-30).
   al-folio "about" layout with Hugo Academic touches: large name with a heavier first name, one-line description,
   rounded profile photo on the right (~30%), short bio, Interests | Education columns, a small "Currently" box,
   an al-folio news table, selected publications (rows from _selected.qmd, styled by pubs.css), six framework cards
   on a light band, and a centred row of social icons. Everything is scoped to main.home, because this file is
   loaded on every page. Colours come only from the tokens in base.css, so the night theme follows automatically. */

/* ---------- layout ---------- */
main.home { display: block; padding-bottom: .5rem; }
main.home > #title-block-header { display: none; }   /* guard: Quarto inserts an empty title block if it finds no header.quarto-title-block */
.home .home-wrap { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.home .home-sec { padding-block: .4rem 1rem; }
.home h2 { scroll-margin-top: calc(var(--nav-h) + 1rem); border-bottom: 0; padding-bottom: 0; }   /* no Quarto h2 underline */

/* section titles (base .section-title: flex row, title left, link right) */
.home .section-title { margin: 3.2rem 0 1.3rem; padding-bottom: .7rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; row-gap: .2rem; }
.home .section-title h2 { margin: 0; font-size: inherit; font-weight: inherit; line-height: 1.25; }
.home .section-title a { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.home .section-title a .bi { font-size: .8em; transition: transform .15s var(--ease); }
.home .section-title a:hover .bi { transform: translateX(2px); }
.home .sec-lede { margin: -.3rem 0 1.3rem; max-width: 72ch; font-size: .96rem; color: var(--muted); }

/* ---------- 1. about: text left, photo right ---------- */
.home .about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 30%); gap: clamp(2rem, 5vw, 4rem);
  align-items: start; padding-top: clamp(1.6rem, 3.6vw, 2.9rem); }
.home .about-head h1 { margin: 0 0 .65rem; font-size: clamp(2.5rem, 4.8vw, 3.5rem); font-weight: 300; line-height: 1.06; letter-spacing: -.03em; }
.home .about-head h1 .first { font-weight: 700; }
/* Chinese name after the English one (2026-11-05): a CJK-capable font, smaller and lighter, kept on one line */
.home .about-head h1 .name-zh { display: inline-block; font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Source Han Sans SC",
  "Microsoft YaHei", var(--font); font-size: .6em; font-weight: 400; letter-spacing: .02em; color: var(--muted); white-space: nowrap; vertical-align: .1em; }
.home .about-desc { margin: 0 0 1.9rem; font-size: 1rem; line-height: 1.55; color: var(--muted); }
/* "·" before every segment; the row is shifted left by one separator width and clipped, so a separator that
   would start a line is hidden and wrapped lines never begin or end with a dangling dot */
.home .about-desc { overflow: hidden; }
.home .about-desc .segs { display: block; margin-left: -1.4em; }
.home .about-desc .seg { white-space: nowrap; }
.home .about-desc .seg::before { content: "·"; content: "·" / ""; display: inline-block; box-sizing: border-box; width: 1.4em; padding-left: .4em; color: var(--faint); }   /* dot centred between words, allowing for the space before it */
.home .about-desc a { color: var(--ink-2); font-weight: 500; }
.home .about-desc a:hover { color: var(--accent); }
.home .about-bio p { margin: 0 0 1rem; max-width: 70ch; font-size: 1.04rem; line-height: 1.78; color: var(--ink-2); }
.home .about-bio em { color: var(--ink); }

/* photo and caption */
.home .about-photo { margin: .35rem 0 0; }
.home .about-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;  /* portrait 800x1000 (2026-11-02) */
  border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.home .about-photo figcaption { display: flex; flex-direction: column; align-items: center; gap: .15rem; margin-top: .95rem;
  font-size: .9rem; line-height: 1.5; color: var(--muted); text-align: center; }
.home .about-photo figcaption .bi { margin-right: .4rem; font-size: .85em; }
.home .about-photo figcaption a { color: var(--accent); }

/* "Currently" box */
.home .about-now { margin-top: 1.5rem; padding: 1rem 1.1rem 1.05rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2); }
.home .about-now h2.label { display: flex; align-items: center; gap: .5rem; margin: 0 0 .7rem; font-size: .74rem; font-weight: 600; line-height: 1.2; color: var(--muted); letter-spacing: .08em; }
.home .about-now h2.label::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--carbon);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--carbon) 22%, transparent); }
.home .about-now ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.home .about-now li { display: flex; gap: .65rem; align-items: baseline; font-size: .9rem; line-height: 1.5; color: var(--ink-2); }
.home .about-now li .bi { flex: none; color: var(--accent); font-size: .9rem; }

/* ---------- 3. interests | education (Hugo Academic) ---------- */
.home .about-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem clamp(1.5rem, 4vw, 2.8rem);
  margin-top: 1.9rem; padding-top: 1.7rem; border-top: 1px solid var(--line); }
.home .about-col h2 { margin: 0 0 1rem; font-size: 1.12rem; font-weight: 700; }
.home .icon-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.home .icon-list li { display: flex; align-items: center; gap: .75rem; font-size: .95rem; line-height: 1.4; color: var(--ink-2); }
.home .icon-list .ico { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 8px;
  font-size: .95rem; color: var(--t, var(--accent)); background: var(--accent-soft);
  background: color-mix(in srgb, var(--t, var(--accent)) 12%, transparent); }
.home .icon-list a { color: var(--ink-2); }
.home .icon-list a:hover { color: var(--accent); }
.home .icon-list.edu { gap: .85rem; }
.home .icon-list.edu li { align-items: flex-start; }
.home .edu-degree { display: block; font-weight: 600; color: var(--ink); }
.home .edu-school { display: block; font-size: .9rem; color: var(--muted); }

/* ---------- 4. news (al-folio news table) ---------- */
.home .news-table { width: 100%; margin: 0; border-collapse: collapse; font-size: .96rem; }
.home .news-table th, .home .news-table td { padding: .62rem 0; vertical-align: top; border: 0; background: none; }
.home .news-table tr + tr > * { border-top: 1px solid var(--line); }
.home .news-table th { width: 7.5rem; padding-right: 1.25rem; font-weight: 600; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.home .news-table td { line-height: 1.6; color: var(--ink-2); }

/* ---------- 5. selected publications: only spacing around the shared rows ---------- */
.home .home-pubs { margin-top: .2rem; }

/* ---------- 6. model frameworks: light band with six cards ---------- */
.home .home-band { margin-top: 3.6rem; padding-bottom: 2.4rem; background: var(--bg-2); border-block: 1px solid var(--line); }
.home .home-band .section-title { margin-top: 2.6rem; border-bottom-color: var(--line-strong); }
.home .fw-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.home .fw-grid > li { display: flex; }
.home .fw { display: flex; flex-direction: column; gap: .45rem; width: 100%; padding: 1.1rem 1.2rem 1rem; color: var(--ink-2); text-decoration: none !important; }
.home .fw-theme { display: flex; align-items: center; gap: .5rem; font-size: .7rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.home .fw-theme::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--t, var(--accent)); }
.home .fw-name { font-family: var(--font-mono); font-size: .9rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; transition: color .15s var(--ease); }
.home .fw-desc { font-size: .9rem; line-height: 1.55; color: var(--ink-2); }
.home .fw-link { display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; padding-top: .35rem; font-size: .84rem; font-weight: 600; color: var(--accent); }
.home a.fw:hover .fw-name { color: var(--accent); }

/* ---------- 2b. start here: three doors by reader (Learn launch, 2026-11-02) ---------- */
.home .home-doors { padding-block: 2.2rem 0; scroll-margin-top: calc(var(--nav-h) + 1rem); }
.home .door-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.home .door { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; column-gap: .85rem; row-gap: .2rem; height: 100%; padding: 1rem 1.15rem;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none !important;
  transition: border-color .15s var(--ease), background .15s var(--ease); }
.home .door:hover, .home .door:focus-visible { border-color: var(--accent-line); background: var(--accent-soft); }
.home .door-icon { grid-row: span 2; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 9px;
  font-size: 1rem; color: var(--accent); background: var(--surface); border: 1px solid var(--accent-line); }
.home .door-who { font-size: .98rem; font-weight: 700; color: var(--ink); }
.home .door-who::after { content: " \2192"; color: var(--accent); }
.home .door-what { font-size: .87rem; line-height: 1.5; color: var(--muted); }
/* four doors (Journeys added 2026-11-05): four across on wide screens, two by two below 992 px, one column on phones */
@media (max-width: 991.98px) { .home .door-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .home .door-grid { grid-template-columns: 1fr; gap: .6rem; } .home .home-doors { padding-top: 1.6rem; } }
@media (prefers-reduced-motion: reduce) { .home .door { transition: none; } }

/* ---------- 3a. what I bring: ability cards (website v2, 2026-11-02) ---------- */
.home .ability-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.home .ability { display: flex; flex-direction: column; gap: .5rem; padding: 1.15rem 1.25rem 1.1rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-sm); }
.home .ab-icon { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 8px; font-size: 1.05rem; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); }
.home .ability h3 { margin: .2rem 0 0; font-size: 1.02rem; font-weight: 700; color: var(--ink); }
.home .ability p { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--ink-2); }
.home .ability .ab-links { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-top: auto; padding-top: .5rem; border-top: 1px solid var(--line); font-size: .84rem; font-weight: 600; }
.home .ability .ab-links a::after { content: " \2192"; }
@media (max-width: 991.98px) { .home .ability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .home .ability-grid { grid-template-columns: 1fr; } }

/* ---------- 8. social icons (al-folio contact row) ---------- */
.home .home-social { padding-block: 3.2rem 2.6rem; text-align: center; }
.home .social-icons { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.1rem; }
.home .social-icons a { display: grid; place-items: center; width: 3.1rem; height: 3.1rem; border-radius: 50%; font-size: 1.7rem; line-height: 1;
  color: var(--ink-2); transition: color .15s var(--ease), background .15s var(--ease); }
.home .social-icons a .ai { font-size: 1.85rem; }
.home .social-icons a:hover { color: var(--accent); background: var(--accent-soft); text-decoration: none; }
.home .contact-note { margin: 1.1rem auto 0; max-width: 72ch; font-size: .93rem; color: var(--muted); }

/* ---------- responsive ---------- */
@media (max-width: 991.98px) {
  .home .fw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  /* tablet: name and bio beside the photo column; interests | education below at full width */
  .home .about { grid-template-columns: minmax(0, 1fr) 32%; grid-template-rows: auto 1fr auto; row-gap: 0;
    grid-template-areas: "head side" "bio side" "cols cols"; }
  .home .about-text { display: contents; }
  .home .about-head { grid-area: head; }
  .home .about-bio { grid-area: bio; }
  .home .about-side { grid-area: side; }
  .home .about-cols { grid-area: cols; }
}
@media (max-width: 767.98px) {
  /* stack: name and description, photo, bio, currently, interests and education */
  .home .about { display: flex; flex-direction: column; gap: 0; padding-top: 2rem; }
  .home .about-text, .home .about-side { display: contents; }
  .home .about-head { order: 1; }
  .home .about-photo { order: 2; width: min(100%, 280px); margin: 0 0 1.8rem; }
  .home .about-bio { order: 3; }
  .home .about-now { order: 4; margin-top: .4rem; }
  .home .about-cols { order: 5; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .home .about-cols { grid-template-columns: 1fr; }
  .home .about-bio p { font-size: 1rem; line-height: 1.72; }
  .home .section-title { font-size: 1.3rem; margin-top: 2.6rem; }
  .home .fw-grid { grid-template-columns: 1fr; }
  .home .news-table th { width: 5.6rem; padding-right: .9rem; }
  .home .news-table { font-size: .93rem; }
  .home .social-icons { gap: .3rem .35rem; }
  .home .social-icons a { width: 2.7rem; height: 2.7rem; font-size: 1.5rem; }
  .home .social-icons a .ai { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .home .section-title a .bi, .home .fw-name, .home .social-icons a { transition: none; }
}

/* ---------- 4b. latest from Field Notes (website v3) ---------- */
.home .home-fn .quarto-listing-default .quarto-post { border-bottom: 0; padding: .4rem 0; }
.home .home-fn .listing-title { font-size: 1.05rem; }
.home .home-fn .listing-title a { display: inline-block; padding-block: 2px; }   /* a 24 px touch target (2026-11-05) */