/* EA project rail: native horizontal scrolling, light/dark, reduced motion. */
#landing-projects { padding-block: clamp(64px, 6vw, 96px); background: var(--bg); scroll-margin-top: 90px; }
#landing-projects .lp-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 32px; }
#landing-projects h2 { font-family: var(--fig); font-size: clamp(36px, 4vw, 58px); font-weight: 800; line-height: 1.06; letter-spacing: -.04em; margin: 0; }
#landing-projects .eyebrow { margin-bottom: 18px; }
#landing-projects .lp-lead { color: var(--ink-2); font-size: 18px; line-height: 1.5; margin: 18px 0 0; max-width: 54ch; }
#landing-projects .lp-controls { display: flex; align-items: center; gap: 10px; flex: none; }
#landing-projects .lp-controls button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 1px solid var(--line-l); border-radius: 999px; color: var(--ink); background: var(--bg); cursor: pointer; font: 600 14px/1.2 var(--fig); padding: 10px 16px; }
#landing-projects .lp-controls .lp-arrow { width: 44px; padding: 0; }
#landing-projects svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
#landing-projects [data-paused="true"] .lp-pause-icon, #landing-projects [data-paused="false"] .lp-play-icon { display: none; }
#landing-projects .lp-rail { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 8px max(24px, calc((100vw - 1410px) / 2)) 16px; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
#landing-projects .lp-rail::-webkit-scrollbar { display: none; }
#landing-projects .lp-track, #landing-projects .lp-group { display: flex; gap: 24px; width: max-content; align-items: stretch; }
#landing-projects .lp-card { width: clamp(280px, 31vw, 430px); flex: none; display: block; color: var(--ink); text-decoration: none; }
#landing-projects .lp-image { display: block; aspect-ratio: 4/3; overflow: hidden; border-radius: 26px; background: var(--bg-2); border: 1px solid var(--line-l); }
#landing-projects .lp-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
#landing-projects .lp-title { display: flex; justify-content: space-between; align-items: start; gap: 14px; margin: 20px 4px 8px; font-family: var(--fig); font-weight: 750; font-size: clamp(22px, 1.85vw, 28px); letter-spacing: -.025em; line-height: 1.2; }
#landing-projects .lp-title svg { flex: none; margin-top: 5px; opacity: .65; }
#landing-projects .lp-meta { margin: 0 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
#landing-projects .lp-kind { border: 1px solid var(--line-l); border-radius: 999px; padding: 3px 10px; font-size: 13px; }
#landing-projects .lp-bottom { display: flex; justify-content: space-between; gap: 24px; align-items: center; margin-top: 24px; font-size: 15px; color: var(--ink-2); }
#landing-projects .lp-bottom p { margin: 0; }
#landing-projects .lp-all { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line-l); border-radius: 999px; padding: 13px 20px; color: var(--ink); text-decoration: none; font-weight: 650; white-space: nowrap; }
#landing-projects button:hover, #landing-projects .lp-all:hover { background: var(--bg-2); }
#landing-projects .lp-card:hover .lp-title svg { opacity: 1; }
#landing-projects :is(a, button, .lp-rail):focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 16px; }
@media(max-width: 900px) {
 #landing-projects .lp-head { align-items: start; flex-direction: column; gap: 24px; }
 #landing-projects .lp-card { width: 340px; }
}
@media(max-width: 600px) {
 #landing-projects .lp-card { width: min(82vw, 340px); }
 #landing-projects .lp-track, #landing-projects .lp-group { gap: 18px; }
 #landing-projects .lp-rail { padding-inline: 20px; }
 #landing-projects .lp-image { border-radius: 22px; }
 #landing-projects .lp-bottom { align-items: start; flex-direction: column; gap: 18px; }
}

#landing-projects .lp-controls[hidden] { display: none; }
