.page-projects .inner-main { padding-top: clamp(64px,8vw,105px); }
.projects-hero { min-height: 590px; padding: clamp(60px,7vw,92px); border-radius: 38px 12px; background: linear-gradient(125deg,#11141c 0%,#191c26 62%,#251418 100%); color: #fff; text-align: left; box-shadow: 0 35px 90px rgba(18,24,36,.2); }
.projects-hero .kicker { color: #ff8987; }
.projects-hero h1 { max-width: 980px; margin: 30px 0 75px; font-size: clamp(60px,7.4vw,108px); line-height: .9; letter-spacing: -.07em; }
.projects-hero h1 em { color: #ef4948; }
.projects-hero__foot { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding-top: 25px; border-top: 1px solid rgba(255,255,255,.14); }
.projects-hero__foot p { max-width: 650px; margin: 0; color: #aeb6c5; }
.projects-hero__foot > span { color: #ff8987; font: 500 11px "DM Mono", monospace; letter-spacing: .12em; }
.page-projects .work-list { padding: clamp(95px,10vw,145px) 0; content-visibility: auto; contain-intrinsic-size: auto 1800px; }
.page-projects .work-list article { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(45px,7vw,100px); align-items: center; margin: 0 0 clamp(90px,10vw,150px); }
.page-projects .work-list article:last-child { margin-bottom: 0; }
.page-projects .work-list article:nth-child(even) { grid-template-columns: .75fr 1.25fr; }
.page-projects .work-list article:nth-child(even) .work-visual { order: 2; }
.page-projects .work-visual { position: relative; aspect-ratio: 1.45; padding: 0; overflow: hidden; border: 1px solid #dfe3e9; border-radius: 28px 8px; background: #e9edf3; box-shadow: 0 28px 65px rgba(24,32,48,.13); }
.page-projects .work-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s cubic-bezier(.22,1,.36,1); }
.page-projects .work-visual > span { position: absolute; top: 20px; left: 20px; display: grid; width: 48px; height: 48px; place-items: center; border-radius: 50%; background: rgba(17,20,28,.9); color: #fff; font: 500 10px "DM Mono", monospace; backdrop-filter: blur(12px); }
.page-projects .work-copy h2 { margin: 20px 0 15px; font-size: clamp(42px,5vw,68px); letter-spacing: -.055em; line-height: .95; }
.page-projects .work-copy p { max-width: 520px; font-size: 16px; }
.page-projects .work-copy__open { display: inline-flex; align-items: center; gap: 16px; margin-top: 22px; padding: 0 0 7px; border: 0; border-bottom: 1px solid #cfd4dd; background: transparent; color: #111827; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: color .2s ease, border-color .2s ease, gap .3s cubic-bezier(.22,1,.36,1); }
.page-projects .work-copy__open:hover, .page-projects .work-copy__open:focus-visible { gap: 22px; border-color: #d42020; color: #d42020; }
.page-projects .work-copy__open:focus-visible { outline: 3px solid rgba(212,32,32,.16); outline-offset: 5px; }
.work-copy__status { display: inline-block; margin-top: 22px; color: #8a94a6; font: 500 10px "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
@media (hover:hover) { .page-projects .work-list article:hover .work-visual img { transform: scale(1.035); } }
@media (max-width:800px) { .projects-hero { min-height: auto; padding: 52px 28px; } .projects-hero h1 { margin-bottom: 48px; } .page-projects .work-list article, .page-projects .work-list article:nth-child(even) { grid-template-columns: 1fr; gap: 34px; } .page-projects .work-list article:nth-child(even) .work-visual { order: 0; } }
@media (max-width:520px) { .projects-hero { width: calc(100% - 24px); border-radius: 26px 8px; } .projects-hero h1 { font-size: clamp(48px,15vw,68px); } .projects-hero__foot { align-items: start; } .page-projects .work-list { width: calc(100% - 24px); padding-block: 75px; } .page-projects .work-visual { border-radius: 22px 7px; } }