html:has(.works-page), body:has(.works-page) { height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto; }
body:has(.works-page) { background: #81d1ef url('assets/profile/background.png') center top / auto max(125vh, 70.3125vw) fixed no-repeat; color: #68534a; font-family: 'Zen Maru Gothic', sans-serif; font-weight: 700; }
body.modal-open:has(.works-page) { overflow: hidden; }
.works-page { --unit: min(1px, .052083333vw); max-width: 1920px; margin: auto; padding-bottom: calc(74 * var(--unit)); }
.works-header { height: calc(254 * var(--unit)); position: relative; }
.works-header h1 { position: absolute; left: 40%; top: calc(24 * var(--unit)); width: 23%; height: calc(185 * var(--unit)); margin: 0; display: grid; place-items: center; background: url('assets/profile/cloud.png') center / contain no-repeat; font-size: calc(50 * var(--unit)); text-shadow: 4px 4px 4px #68534a40; }
.works-header nav { position: absolute; right: 3%; top: calc(45 * var(--unit)); width: 18.7%; height: calc(164 * var(--unit)); display: flex; align-items: center; justify-content: center; gap: calc(32 * var(--unit)); background: url('assets/profile/cloud.png') center / contain no-repeat; font-size: calc(32 * var(--unit)); }
.works-header a { color: inherit; text-decoration: none; }
.works-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: calc(330 * var(--unit)); row-gap: calc(52 * var(--unit)); padding: 0 calc(248 * var(--unit)) 0 calc(232 * var(--unit)); }
.works-card { position: relative; width: 100%; min-height: calc(149 * var(--unit)); border: 0; border-radius: calc(15 * var(--unit)); padding: calc(20 * var(--unit)) calc(8 * var(--unit)) calc(20 * var(--unit)) calc(88 * var(--unit)); background: url("assets/works-box.png") center / 106% 168% no-repeat; box-shadow: none; color: #68534a; font: 700 calc(32 * var(--unit))/1.5 'Zen Maru Gothic',sans-serif; text-align: left; cursor: pointer; }
.works-piece { position: absolute; left: calc(-27 * var(--unit)); top: 50%; width: calc(var(--piece-width) * var(--unit)); height: calc(var(--piece-height) * var(--unit)); transform: translate(-50%, -50%);  }
.works-piece img { position: absolute; height: auto; max-width: none; }
.works-card:focus-visible, .works-header a:focus-visible { outline: 3px solid #68534a; outline-offset: 5px; }
@media(max-width:700px) {
 .works-page { --unit: 1px; padding: 0 20px 40px; }
 .works-header { height: 210px; }
 .works-header h1 { left: 50%; top: 8px; transform: translateX(-50%); width: 240px; height: 105px; font-size: 38px; }
 .works-header nav { top: 115px; right: 0; width: 220px; height: 80px; font-size: 24px; gap: 26px; }
 .works-grid { grid-template-columns: 1fr; gap: 24px; padding: 0 0 0 46px; }
 .works-card { min-height: 125px; padding: 18px 12px 18px 65px; font-size: 18px; border-radius: 12px; }
 .works-piece { width: calc(var(--piece-width) * .55px); height: calc(var(--piece-height) * .55px); left: 5px; }
}
@media(max-width:700px) {
 .works-page { display: flex; flex-direction: column; }
 .works-header { display: contents; }
 .works-header h1 { position: relative; left: auto; top: auto; transform: none; align-self: center; margin: 8px 0 28px; order: 0; }
 .works-grid { order: 1; }
 .works-header nav { position: static; order: 2; width: 100%; height: auto; margin-top: 28px; gap: 8px; background: none; }
 .works-header nav a { display: grid; place-items: center; width: 140px; height: 62px; font-size: 22px; background: url('assets/profile/cloud.png') center / contain no-repeat; }
}