/* Kanghe Lyu site — homepage layout */

/* Scrolling is the document-level path shared with the subpages (see the
   overflow rules in base.css). Do not re-introduce html/body overflow-y here:
   combined with base.css overflow-x it turns the root element into a scroll
   container that locks the viewport. */
#bg { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; background: var(--bg-deep); pointer-events: none; }
.overlay-text { position: relative; z-index: 2; min-height: 100vh; padding: 30px 7vw 54px; }
/* Keep copy fully legible where bright wireframes cross the text. */
.overlay-text p, .overlay-text li, .overlay-text h1, .overlay-text h2, .overlay-text .subtitle, .overlay-text .eyebrow, .overlay-text .footer {
  text-shadow: 0 1px 3px rgba(3, 8, 14, 0.72), 0 0 8px rgba(3, 8, 14, 0.45);
}
.content-wrapper { width: min(100%, var(--content-width)); margin: 0 auto; }
.site-header { padding-top: 4px; }

.page-nav { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; margin-bottom: clamp(4rem, 12vh, 8rem); padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.page-nav a { color: var(--subtle); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; }
.page-nav a:hover { color: var(--cyan-bright); }

.hero { max-width: 760px; padding-bottom: clamp(4.5rem, 12vh, 8rem); }
.hero .eyebrow { margin-bottom: 20px; }
h1 { max-width: 780px; margin-bottom: 20px; color: var(--paper); font-size: clamp(3.6rem, 9vw, 8rem); font-weight: 400; letter-spacing: -0.025em; line-height: 0.98; text-shadow: 0 5px 24px rgba(0,0,0,0.38); animation: fadeInUp 850ms var(--ease-out) 60ms both; }
.subtitle { max-width: 600px; margin-bottom: 30px; color: var(--ink); font-size: clamp(1.12rem, 2.2vw, 1.45rem); line-height: 1.6; white-space: pre-line; animation: fadeInUp 850ms var(--ease-out) 140ms both; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; }
/* The homepage buttons are the 20260826 subpage card material at button size. */
.hero-actions .button { min-height: 48px; padding: 11px 22px; border-radius: 20px; }
.hero-actions .button:hover { transform: translateY(-3px); }

.content-section { max-width: var(--reading-width); padding: 54px 0 60px; border-top: 1px solid var(--line); }
.section-heading { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: baseline; margin-bottom: 26px; }
.section-index { color: var(--gold-dim); font-size: 0.76rem; letter-spacing: 0.1em; }
h2 { color: var(--paper); font-size: clamp(1.65rem, 3vw, 2.25rem); font-weight: 400; line-height: 1.2; }
.intro-copy { max-width: 670px; }
p { margin-bottom: 17px; color: var(--ink); font-size: clamp(1rem, 1.5vw, 1.1rem); line-height: 1.86; }
.intro-copy p:first-child { color: var(--paper); font-size: clamp(1.12rem, 1.9vw, 1.3rem); line-height: 1.68; }
.interest-list { max-width: 650px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line-soft); color: var(--cyan); font-size: 0.94rem; line-height: 1.8; }

.experience-list, .awards-list { list-style: none; }
.experience-list li, .awards-list li { position: relative; padding: 0 0 20px 28px; color: var(--ink); font-size: clamp(0.96rem, 1.4vw, 1.06rem); line-height: 1.76; }
.experience-list li::before, .awards-list li::before { position: absolute; left: 0; top: 0.72em; width: 6px; height: 6px; border: 1px solid var(--cyan); border-radius: 50%; background: var(--bg-deep); content: ""; }
.experience-list li::after { position: absolute; left: 3px; top: calc(0.72em + 7px); bottom: 0; width: 1px; background: var(--line); content: ""; }
.experience-list li:last-child, .awards-list li:last-child { padding-bottom: 0; }
.experience-list li:last-child::after { display: none; }
.awards-list li { padding-bottom: 14px; padding-left: 22px; }
.awards-list li::before { border-color: var(--gold); }

.contact-section { padding-bottom: 32px; }
.contact-section .contact { margin-top: 8px; font-size: clamp(1.25rem, 2.8vw, 1.8rem); }
.contact-section .contact a { color: var(--gold-bright); }
.site-footer { padding-top: 24px; border-top: 1px solid var(--line-soft); }
.footer { margin-bottom: 8px; color: var(--muted); font-size: 0.76rem; letter-spacing: 0.14em; }
.footer-meta { color: var(--muted); font-size: 0.75rem; }

@media (max-width: 760px) {
  .overlay-text { padding: 118px 7vw 44px; }
  .page-nav { margin-bottom: 4.5rem; gap: 16px; }
  .hero { padding-bottom: 5rem; }
  h1 { font-size: clamp(3.3rem, 16vw, 5.6rem); }
  .content-section { padding: 44px 0 50px; }
}

@media (max-width: 430px) {
  .overlay-text { padding-inline: 6vw; }
  .page-nav a { font-size: 0.7rem; }
  .button { flex: 1 1 auto; }
  .section-heading { grid-template-columns: 32px 1fr; }
}