/* Simple responsive website gallery; static at every scroll position. */
.works { background: var(--paper); color: var(--ink); padding: 76px var(--page-x) 40px; scroll-margin-top: 64px; }
.works > .section-index { margin-bottom: 36px; }
.work-entry { padding: 38px clamp(0px, 4vw, 64px) 32px; border-bottom: 1px solid #ddd; }
.work-info { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 24px; }
.work-info h3 { font: 500 16px/1.6 var(--font-ja); }
.work-site-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 400 13px/1.6 var(--font-ja); text-decoration: none; color: #555; }
.work-site-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.work-preview { display: grid; grid-template-columns: 390fr 787.5fr 1400.7fr; align-items: start; gap: clamp(20px, 3.2vw, 48px); text-decoration: none; }
.work-preview img { display: block; width: 100%; height: auto; }
.work-meta-line { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; color: #686868; font: 400 12px/1.8 var(--font-ja); }
.work-preview:focus-visible, .work-site-link:focus-visible { outline: 2px solid var(--cyan-deep); outline-offset: 6px; }
@media (max-width: 600px) {
  .works { padding: 64px 24px 24px; }
  .works > .section-index { margin-bottom: 20px; }
  .work-entry { padding: 24px 0 32px; }
  .work-info { gap: 12px; margin-bottom: 18px; }
  .work-info h3 { font-size: 14px; }
  .work-site-link { font-size: 12px; }
  .work-preview { grid-template-columns: 390fr 787.5fr; gap: 30px; }
  .work-screen--desktop { grid-column: 1 / -1; grid-row: 1; }
  .work-screen--phone, .work-screen--tablet { grid-row: 2; }
}