*{box-sizing:border-box}body{margin:0;background:#fafaf8;color:#242722;font-family:Arial,'Noto Sans',sans-serif}button,input,select{font:inherit}button,a{cursor:pointer}header{height:100px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddd} .logo{font-size:30px;font-weight:700;letter-spacing:-1.5px}.pill{font-size:11px;border:1px solid #d8dcd3;padding:8px 12px;border-radius:30px;letter-spacing:1px}main{padding:62px 5%}.eyebrow{font-size:11px;letter-spacing:3px;color:#7b8176}h1{font-family:'Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic',Meiryo,sans-serif;font-size:clamp(34px,4.6vw,60px);font-weight:400;letter-spacing:.025em;line-height:1.55;margin:24px 0}p{font-size:14px;color:#747a70;line-height:1.9}.intro{display:flex;justify-content:space-between;align-items:end;margin-bottom:48px}.action{border:0;background:#262c23;color:white;padding:14px 22px;border-radius:4px}.toolbar{border-top:1px solid #ddd;border-bottom:1px solid #ddd;display:flex;gap:14px;padding:20px 0;align-items:center}input,select{background:transparent;border:1px solid #d7d9d1;padding:12px;border-radius:3px}input{width:300px}.count{margin-left:auto;font-size:12px;color:#767c70}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px 24px;margin-top:32px}.card{border:0;background:transparent;text-align:left;padding:0}.card img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:4px;transition:transform .3s}.card:hover img{transform:translateY(-4px)}.card h3{font-size:15px;font-weight:500;margin:16px 0 7px}.card small{color:#858b7e;font-size:11px}.empty{padding:80px 15px;text-align:center;border:1px dashed #d9dcd4;grid-column:1/-1}.empty b{font-size:22px;font-weight:500}.mark{font-size:48px;color:#8e9986;margin-bottom:24px}.status{margin-top:70px;border-top:1px solid #ddd;padding-top:22px;display:flex;justify-content:space-between;gap:20px;font-size:12px;color:#828879}.status a{color:inherit}dialog{border:1px solid #ddd;border-radius:8px;padding:32px;width:500px;max-width:92vw}dialog::backdrop{background:#18201566}label{display:block;font-size:12px;margin:20px 0 8px}dialog input{width:100%}.row{display:flex;justify-content:space-between;gap:10px;align-items:center}.plain{border:1px solid #d6d9cf;background:transparent;padding:10px 16px;border-radius:4px}#viewer{position:fixed;inset:0;z-index:5;background:#eeeee9;overflow:auto}#viewer nav{position:sticky;top:0;background:#fafaf8eb;backdrop-filter:blur(12px);display:flex;justify-content:space-between;align-items:center;padding:18px 5%;border-bottom:1px solid #ddd;z-index:6}#long{display:block;width:750px;max-width:100%;margin:auto}#viewer[hidden]{display:none}.hint{font-size:12px}footer{padding:24px 5%;border-top:1px solid #ddd;font-size:11px;color:#8a9085;display:flex;justify-content:space-between}@media(max-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:600px){header{height:80px}.logo{font-size:25px}main{padding-top:36px}.intro{display:block}h1{letter-spacing:.015em}.intro .action{margin-top:18px}.grid{grid-template-columns:repeat(2,1fr);gap:26px 14px}.toolbar{flex-wrap:wrap}input{width:100%}.status{flex-direction:column}.count{margin-left:0}}

.backtotop{text-align:center;padding:30px}

/* Quiet, open controls for the collection toolbar. */
.toolbar {
  flex-wrap: wrap;
  gap: 24px;
  padding: 22px 0 12px;
  border-top-color: #dedfd8;
  border-bottom: 0;
}
.toolbar input,
.toolbar select {
  height: 46px;
  margin: 0;
  padding: 0 2px;
  border: 0;
  border-bottom: 1px solid #cfd3c9;
  border-radius: 0;
  background-color: transparent;
  color: #46503f;
  font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', Meiryo, sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .035em;
  transition: border-color .18s ease, color .18s ease;
}
.toolbar input {
  flex: 1 1 260px;
  width: 300px;
  max-width: 420px;
  min-width: 180px;
  appearance: none;
  -webkit-appearance: none;
}
.toolbar input::placeholder { color: #91968c; opacity: 1; }
.toolbar select {
  flex: 0 0 auto;
  width: 132px;
  padding-right: 28px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #858d7c 50%), linear-gradient(135deg, #858d7c 50%, transparent 50%);
  background-position: calc(100% - 12px) 22px, calc(100% - 8px) 22px;
  background-size: 4px 4px;
  background-repeat: no-repeat;
}
.toolbar #sort { width: 168px; }
.toolbar input:hover,
.toolbar select:hover { border-bottom-color: #8c9982; color: #2c3626; }
.toolbar input:focus-visible,
.toolbar select:focus-visible {
  outline: 2px solid #718466;
  outline-offset: 5px;
  border-bottom-color: #718466;
}
.toolbar .count { white-space: nowrap; letter-spacing: .08em; }
@media (max-width: 760px) {
  .toolbar { gap: 12px 24px; padding: 16px 0 4px; }
  .toolbar input { flex: 1 1 100%; width: 100%; max-width: none; min-width: 0; }
  .toolbar select,
  .toolbar #sort { flex: 1 1 0; width: auto; min-width: 0; }
  .toolbar .count { flex-basis: 100%; margin: 8px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .toolbar input, .toolbar select { transition: none; }
}

/* Project roles: small labels with the same quiet tone as the collection. */
.toolbar #roleFilter { width: 174px; }
.role-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.role-tags[hidden] { display: none; }
.role-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 7px;
  border-radius: 2px;
  background: #edf0e8;
  color: #65725b;
  font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', Meiryo, sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .04em;
}
.card:focus-visible { outline: 2px solid #718466; outline-offset: 6px; }
.viewer-heading { flex: 1; min-width: 0; text-align: right; }
.viewer-heading #title { display: block; overflow-wrap: anywhere; font-size: 14px; font-weight: 400; }
.viewer-heading .role-tags { justify-content: flex-end; margin-top: 6px; }
#viewer nav { gap: 20px; }
#viewer nav .plain { flex-shrink: 0; }
@media (max-width: 760px) {
  .toolbar select, .toolbar #sort, .toolbar #roleFilter {
    flex: 1 1 calc((100% - 24px) / 2);
    width: auto;
  }
  .toolbar .count { flex: 1 1 calc((100% - 24px) / 2); margin: 0; text-align: right; }
}
@media (max-width: 400px) {
  .toolbar select { font-size: 12px; letter-spacing: 0; }
  #viewer nav { gap: 12px; padding: 14px 5%; }
  #viewer nav .plain { font-size: 12px; padding: 10px; }
  .viewer-heading #title { font-size: 12px; }
}