/* ============================================================
   polish.css — site-wide refinement layer (v8 polish rounds).
   Loaded AFTER main.css + parchment-overrides.css on parchment
   pages. Rounds: R1 readability · R2 coherence · R3 personality
   · R4 visitor flow · R5 QA. docs/strategy/site-polish-v8-2026-06-11/
   ============================================================ */

/* ============================================================
   R1 — READABILITY: the two-tier type system.
   Voice tier (handwriting: Reenie/Indie/Patrick) stays on headings,
   names, labels, chips, hero — the personality carrier.
   Reading tier (Spectral serif ≥16px, lh≈1.6) takes over wherever a
   visitor READS for more than a glance. Grounded in USWDS/Toptal/
   Harvard guidance (body ≥16px, lh 1.5, 45–90ch) — see 00-research.md.
   ============================================================ */
:root { --read-font: 'Patrick Hand', 'LXGW WenKai', cursive; }
/* Linlin's correction (2026-06-11): readability up, but the reading face must
   still LOOK handwritten to match the notebook theme. Patrick Hand is the
   neatest handwriting family already loaded (upright, consistent x-height) —
   it replaces bubbly Indie Flower for sustained prose; sizes/leading tuned. */

/* Homepage sustained prose -> reading tier (source order beats the
   parchment Indie-Flower body rule at equal specificity). */
.news-content, .news-content span,
.research-outline p, #research p,
.timeline-card p, .timeline-content p, .exp-desc,
.pub-authors, .pub-venue,
.project-card p,
.otw-note, #open-to-work p,
.footer-legal small, .footer-legal a {
    font-family: var(--read-font) !important;
    font-weight: 400 !important;
}
/* Serif renders larger than handwriting: rein in the inflated em sizes. */
.news-content, .research-outline p, #research p,
.timeline-card p, .timeline-content p, .project-card p, #open-to-work p {
    font-size: 1.05em !important;
    line-height: 1.66 !important;
    letter-spacing: 0.005em !important;
}
.pub-authors, .pub-venue { font-size: 1.0rem !important; line-height: 1.5 !important; }
/* (a 72ch measure cap was tried here and removed — on the homepage's wide
   timeline/news cards it pinned text to the left half and read as truncation;
   card widths are already designed. Linlin's report, 2026-06-11.) */

/* gallery card hover-descriptions read as prose too */
.g-card p, .gal .g-card p {
    font-family: var(--read-font) !important;
    font-size: 1.0rem !important;
    line-height: 1.52 !important;
    font-weight: 400 !important;
}

/* ============================================================
   R3 — PERSONALITY: tactile micro-details (the 2026 "anti-AI-polish"
   trend: hand-made, felt imperfection — see 00-research.md).
   ============================================================ */
/* text selection feels like a gilt highlighter on parchment */
::selection { background: oklch(0.80 0.12 82 / 0.55); color: #2e2a25; }
/* the page scrollbar is an inked dowel on parchment, not browser chrome */
html { scrollbar-width: thin; scrollbar-color: oklch(0.50 0.09 45) transparent; }
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, oklch(0.56 0.09 50), oklch(0.45 0.10 38));
    border-radius: 8px; border: 2.5px solid #ece1c8;
}
/* stat cards: a pinned-note wiggle on hover */
.stat-card { transition: transform .18s ease, box-shadow .18s ease; }
.stat-card:hover { transform: rotate(-1.2deg) translateY(-2px); }
/* skill tags: dip in ink on hover */
.skill-tag { transition: background .15s, color .15s, transform .15s !important; }
.skill-tag:hover {
    background: oklch(0.45 0.16 27) !important;
    color: #fdf3e3 !important;
    transform: translateY(-1px);
}


/* ============================================================
   R3b — PERSONALITY, VISIBLY (Linlin: "R3 我咋都没看到") — two
   always-visible hand-made signatures, on top of the micro ones.
   ============================================================ */
/* 2) 旺财 walked across the footer: a fading paw trail at the very end
   (.footer-legal::after — under .footer-bottom it hid behind the legal text) */
.footer-legal::after, .pf-foot .copy::after {
    content: '';
    display: block;
    width: 210px; height: 34px;
    margin: 0.7em auto 0;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 210 34'><g fill='%235a4c3a'><g opacity='0.55' transform='translate(8,6) rotate(-14) scale(0.42)'><ellipse cx='20' cy='16' rx='7' ry='9'/><ellipse cx='44' cy='16' rx='7' ry='9'/><ellipse cx='8' cy='31' rx='6' ry='8'/><ellipse cx='56' cy='31' rx='6' ry='8'/><path d='M32 26c10 0 18 9 18 17 0 7-7 12-18 12s-18-5-18-12c0-8 8-17 18-17z'/></g><g opacity='0.42' transform='translate(62,2) rotate(12) scale(0.42)'><ellipse cx='20' cy='16' rx='7' ry='9'/><ellipse cx='44' cy='16' rx='7' ry='9'/><ellipse cx='8' cy='31' rx='6' ry='8'/><ellipse cx='56' cy='31' rx='6' ry='8'/><path d='M32 26c10 0 18 9 18 17 0 7-7 12-18 12s-18-5-18-12c0-8 8-17 18-17z'/></g><g opacity='0.3' transform='translate(118,7) rotate(-10) scale(0.42)'><ellipse cx='20' cy='16' rx='7' ry='9'/><ellipse cx='44' cy='16' rx='7' ry='9'/><ellipse cx='8' cy='31' rx='6' ry='8'/><ellipse cx='56' cy='31' rx='6' ry='8'/><path d='M32 26c10 0 18 9 18 17 0 7-7 12-18 12s-18-5-18-12c0-8 8-17 18-17z'/></g><g opacity='0.18' transform='translate(172,3) rotate(10) scale(0.42)'><ellipse cx='20' cy='16' rx='7' ry='9'/><ellipse cx='44' cy='16' rx='7' ry='9'/><ellipse cx='8' cy='31' rx='6' ry='8'/><ellipse cx='56' cy='31' rx='6' ry='8'/><path d='M32 26c10 0 18 9 18 17 0 7-7 12-18 12s-18-5-18-12c0-8 8-17 18-17z'/></g></g></svg>") no-repeat center / contain;
}