dialog#projectDialog { width: min(1180px, 94vw); max-height: 91vh; overflow: auto; display: none; grid-template-columns: none; padding: 0; }
dialog#projectDialog[open] { display: block; }
dialog#projectDialog .project-top { min-height: 265px; padding: 64px 8% 48px; background: #1d1c19; color: #f3f0e9; display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; }
dialog#projectDialog #projectMeta { max-width: 600px; }
dialog#projectDialog #dialogNo { color: #c6a47e; font: 10px "DM Mono", monospace; letter-spacing: .12em; }
dialog#projectDialog #dialogTitle { font: 500 clamp(34px, 4vw, 60px)/1.2 "Noto Serif SC", serif; margin: 10px 0; }
dialog#projectDialog #dialogSub { font: 14px/1.8 "Noto Serif SC", serif; color: #c8c2b6; }
.project-note { color: #bdb6ab; font: 10px "DM Mono", monospace; letter-spacing: .12em; white-space: nowrap; }
.project-gallery { padding: 28px; background: #eeeae1; columns: 2 360px; column-gap: 18px; }
.project-gallery figure { margin: 0 0 18px; break-inside: avoid; background: #d8d2c7; }
.project-gallery img { display: block; width: 100%; height: auto; object-fit: contain; }
dialog#projectDialog > button { position: fixed; top: calc(4.5vh + 10px); right: calc(3vw + 14px); color: #fff; background: rgba(24,23,20,.72); width: 42px; height: 42px; border-radius: 50%; }
@media (max-width: 800px) { dialog#projectDialog { width: 100vw; height: 100vh; max-height: 100vh; } dialog#projectDialog .project-top { min-height: 210px; padding: 68px 7vw 32px; display: block; } .project-note { margin-top: 28px; } .project-gallery { columns: 1; padding: 12px; } dialog#projectDialog > button { top: 14px; right: 14px; position: fixed; } }