/* Shared Works navigation: a paper surface over the current reading position. */
.works-dialog{--menu-paper:#f7f6f3;--menu-ink:#40393b;--menu-muted:#797274;box-sizing:border-box;position:fixed;inset:0;width:calc(100% - 96px);max-width:1040px;max-height:calc(100dvh - 80px);margin:auto;padding:0;border:0;border-radius:16px;background:var(--menu-paper);color:var(--menu-ink);overflow:auto;overscroll-behavior:contain;touch-action:pan-y pinch-zoom;font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;box-shadow:0 12px 64px #28212712}
.works-dialog:not([open]){display:none}
.works-dialog::backdrop{background:#302b3029;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.works-dialog[open]{animation:works-arrive .3s cubic-bezier(.22,.61,.36,1) both}
.works-dialog[open]::backdrop{animation:works-backdrop .3s ease both}
.works-dialog *{box-sizing:border-box}
.works-dialog a{color:inherit;text-decoration:none}
.works-dialog a:focus-visible,.works-dialog button:focus-visible{outline:2px solid var(--menu-ink);outline-offset:5px}
.works-menu{padding:0 40px 24px}
.works-menu-header{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 0 22px;background:var(--menu-paper)}
.works-menu-header h2{margin:0;font:400 48px/1 Georgia,serif;letter-spacing:-.045em}
.works-menu-close{display:inline-flex;align-items:center;justify-content:flex-end;gap:18px;min-width:90px;min-height:44px;padding:0;background:none;border:0;font:11px "Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;color:var(--menu-ink);cursor:pointer}
.works-dialog .works-menu-close:focus{outline:none}
.works-menu-close:focus-visible span:first-child{text-decoration:underline;text-underline-offset:4px}
.works-menu-close span:last-child{font:300 28px/1 Arial,sans-serif}
.works-menu-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;list-style:none;margin:0;padding:0}
.works-menu-item{min-width:0}
.works-menu-item:nth-child(n+3){border-top:1px solid #dcd8d4}
.works-menu-entry{display:grid;grid-template-columns:104px minmax(0,1fr);gap:18px;align-items:center;min-height:152px;padding:18px 0}
.works-menu-cover{aspect-ratio:8/5;background:#fff;border-radius:7px;overflow:hidden}
.works-menu-cover img{display:block;width:100%;height:100%;object-fit:contain}
.works-menu-copy p{margin:0;line-height:1.7}
.works-menu-copy h3{margin:6px 0 5px;font-size:16px;line-height:1.7;font-weight:400;letter-spacing:.025em;word-break:normal;overflow-wrap:anywhere}
.works-menu-domain{color:var(--menu-muted);font-size:10px;letter-spacing:.035em}
.works-menu-project{font:15px/1.5 Georgia,serif;letter-spacing:.01em}
.works-menu-copy .works-menu-company{margin-top:10px;color:var(--menu-muted);font-size:10px;letter-spacing:.02em}
.works-menu-arrow{display:none}
.works-menu-entry:hover .works-menu-arrow{transform:translateX(5px)}
.works-menu-entry:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.works-menu-footer{display:flex;justify-content:flex-end;margin-top:12px}
.works-menu-footer a{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:10px;line-height:1.4;color:var(--menu-muted)}
.works-menu-footer a::after{content:"";position:absolute;left:0;right:0;top:calc(50% + 11px);height:1px;background:currentColor;opacity:0;pointer-events:none;transition:opacity .2s ease}
.works-menu-footer a:hover{text-decoration:none}
.works-menu-footer a:active::after{opacity:1}
@media(hover:hover){.works-menu-footer a:hover::after{opacity:1}}
html.works-is-open{overflow:hidden}
.works-is-open .site-header{right:var(--works-scrollbar-gap,0px)}
@keyframes works-arrive{from{opacity:0;filter:blur(3px);transform:translateY(8px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}
@keyframes works-backdrop{from{opacity:0}to{opacity:1}}
@media(max-width:979px){
  .works-menu-list{grid-template-columns:1fr}
  .works-menu-item+.works-menu-item{border-top:1px solid #dcd8d4}
  .works-menu-entry{grid-template-columns:112px minmax(0,1fr);gap:24px;min-height:140px}
}
@media(max-width:760px){
  .works-dialog{width:100%;max-width:none;height:100vh;height:100dvh;max-height:none;margin:0;border-radius:0;box-shadow:none}
  .works-menu{padding:0 20px max(16px,env(safe-area-inset-bottom))}
  .works-menu-header{padding:calc(22px + env(safe-area-inset-top)) 0 18px}
  .works-menu-header h2{font-size:40px}
  .works-menu-close{gap:13px;font-size:10px;min-width:76px}
  .works-menu-entry{grid-template-columns:84px minmax(0,1fr);gap:18px;min-height:144px;padding:16px 0;position:relative}
  .works-menu-copy h3{font-size:15px;line-height:1.7;margin:6px 0 5px}
  .works-menu-domain{font-size:9px;letter-spacing:0}
  .works-menu-project{font-size:14px}
  .works-menu-copy .works-menu-company{font-size:9px;margin-top:10px}
  .works-menu-arrow{display:none}
  .works-menu-footer{margin-top:16px}
}
@media(max-width:370px){
  .works-menu{padding-inline:16px}
  .works-menu-entry{grid-template-columns:68px minmax(0,1fr);gap:14px}
  .works-menu-copy h3{font-size:14px}
}
@media(prefers-reduced-motion:reduce){.works-dialog[open],.works-dialog[open]::backdrop{animation:none}.works-menu-arrow{transition:none}}
@media print{.works-dialog{display:none!important}}