.drums-page {
  --lens: #91b7dc;
  --lens-bright: #c7dff4;
  background: radial-gradient(circle at 76% -8%, rgba(55,91,126,.18), transparent 31rem), #08090b;
}
.drums-page .side-nav a.is-current::before { background: var(--lens); box-shadow: 0 0 16px var(--lens); }
.drums-page .side-nav a.is-current .nav-icon,
.drums-page .bottom-nav a.is-current { color: var(--lens-bright); }
.lens-main { width: min(980px, calc(100% - 64px)); }

.lens-heading { border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: 18px; }
.lens-heading h1 { margin: 0; font-size: clamp(47px, 5vw, 65px); }
.lens-kicker { margin-bottom: 4px; color: var(--lens); font-size: 9px; font-weight: 700; letter-spacing: .2em; }

.lens-profile { display: grid; grid-template-columns: 155px 1fr; align-items: center; gap: 46px; max-width: 760px; margin: 34px auto 30px; }
.lens-avatar { width: 142px; height: 142px; border: 2px solid transparent; border-radius: 50%; background: linear-gradient(#0b0d10,#0b0d10) padding-box, linear-gradient(135deg,#c2d9ed,#4d759b) border-box; padding: 5px; }
.lens-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center 28%; filter: saturate(.72) contrast(1.08); }
.lens-profile__name { display: flex; align-items: center; gap: 14px; }
.lens-profile__name h2 { margin: 0; font-family: "Bebas Neue", sans-serif; font-size: 25px; font-weight: 400; letter-spacing: .13em; }
.lens-profile__name span { border: 1px solid rgba(145,183,220,.35); padding: 6px 10px; color: #a9c8e4; font-size: 10px; letter-spacing: .12em; }
.lens-stats { display: flex; gap: 38px; margin: 22px 0 19px; }
.lens-stats div { display: flex; gap: 7px; align-items: baseline; }
.lens-stats dt { color: #929ca5; font-size: 11px; letter-spacing: .1em; }
.lens-stats dd { order: -1; margin: 0; color: #eef2f5; font-size: 22px; }
.lens-profile__body > p { margin: 0; color: #adb5bd; font-size: 13px; line-height: 1.85; }

.member-stories { display: flex; justify-content: center; gap: clamp(22px, 5vw, 50px); margin: 0 auto 34px; border-bottom: 1px solid rgba(255,255,255,.09); padding-bottom: 29px; }
.member-stories button { display: grid; justify-items: center; gap: 7px; border: 0; background: none; padding: 0; color: #747d85; cursor: pointer; }
.member-stories button > span { display: grid; width: 66px; height: 66px; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; padding: 3px; }
.member-stories button.is-active > span { border-color: var(--lens); box-shadow: 0 0 0 2px rgba(145,183,220,.16); }
.member-stories img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; filter: saturate(.62); }
.member-stories button:nth-child(2) img { object-position: center 22%; }
.member-stories button:nth-child(3) img { object-position: center 25%; }
.member-stories button:nth-child(4) img { object-position: center 24%; }
.member-stories button:nth-child(5) img { object-position: center 28%; }
.member-stories .story-all { color: #9ebbd6; font-family: "Bebas Neue", sans-serif; font-size: 19px; letter-spacing: .08em; }
.member-stories b { font-size: 10px; font-weight: 500; letter-spacing: .08em; }
.member-stories button.is-active b { color: #c9d9e7; }

.lens-gallery { margin-top: 0; }
.gallery-head { display: flex; min-height: 52px; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.09); }
.gallery-tab { align-self: stretch; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid #e6edf3; padding: 0 17px; }
.gallery-tab span { color: #a9bfd2; font-size: 14px; }
.gallery-tab h2 { margin: 0; font-family: "Bebas Neue", sans-serif; font-size: 13px; font-weight: 400; letter-spacing: .16em; }
.gallery-tools { display: flex; align-items: center; gap: 8px; }
.gallery-tools label { color: #747e87; font-size: 7px; }
.gallery-tools select { height: 31px; margin-left: 6px; border: 1px solid rgba(145,183,220,.17); border-radius: 0; background: #101319; padding: 0 26px 0 9px; color: #c0ccd6; font: 8px "Noto Sans JP", sans-serif; }
.gallery-tools .sort-control button { padding: 6px 9px; font-size: 7px; }

.photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding-top: 4px; }
.photo-card { position: relative; aspect-ratio: 1; min-width: 0; overflow: hidden; background: #11151a; isolation: isolate; }
.photo-card[hidden] { display: none; }
.photo-card > img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) contrast(1.08); transition: transform .35s ease; }
.photo-card:nth-child(1) > img { object-position: center 30%; }
.photo-card:nth-child(2) > img { object-position: center center; }
.photo-card:nth-child(3) > img { object-position: center 21%; }
.photo-card:nth-child(4) > img { object-position: center 27%; }
.photo-card:nth-child(5) > img { object-position: center 25%; }
.photo-card:nth-child(6) > img { object-position: center center; }
.photo-card:nth-child(7) > img { object-position: center 24%; }
.photo-card:nth-child(8) > img { object-position: center 30%; }
.photo-card:nth-child(9) > img { object-position: 58% center; }
.photo-shade { position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg, rgba(5,8,11,.85), transparent 44%); opacity: 0; transition: opacity .22s ease; }
.photo-card:hover .photo-shade { opacity: 1; }
.photo-card:hover > img { transform: scale(1.025); }
.access { position: absolute; z-index: 2; left: 9px; bottom: 9px; border: 1px solid currentColor; background: rgba(6,9,12,.6); padding: 4px 6px; font-size: 6px; letter-spacing: .08em; opacity: 0; transition: opacity .2s ease; }
.photo-card:hover .access { opacity: 1; }
.access.free { color: #d1dfeb; }
.access.members { color: #a8c7e3; }
.single-mark { display: none; }
.album-count { position: absolute; z-index: 3; top: 11px; right: 11px; display: flex; align-items: center; gap: 6px; color: #f2f6fa; font-family: "Bebas Neue", sans-serif; font-size: 8px; letter-spacing: .11em; text-shadow: 0 1px 4px #000; }
.album-count i, .album-count i::before { display: block; width: 12px; height: 9px; border: 1px solid currentColor; }
.album-count i { position: relative; }
.album-count i::before { content: ""; position: absolute; top: -4px; left: -4px; }
.photo-copy { position: absolute; z-index: 2; inset: auto 0 0; padding: 17px; opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; }
.photo-card:hover .photo-copy { opacity: 1; transform: none; }
.photo-copy > div:first-child > p:first-child { margin-bottom: 4px; color: #a8c7e3; font-size: 6px; letter-spacing: .1em; }
.photo-copy h3, .caption { margin-bottom: 10px; color: #fff; font-family: "Noto Serif JP", "Yu Mincho", serif; font-size: 14px; font-weight: 500; line-height: 1.5; }
.photo-meta { display: flex; justify-content: space-between; color: #bdc6ce; font-size: 6px; }
.is-locked > img { filter: blur(10px) saturate(.45) brightness(.44); transform: scale(1.08); }
.is-locked:hover > img { transform: scale(1.1); }
.is-locked .photo-shade { opacity: 1; background: rgba(5,8,11,.22); }
.lock-mark { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; }
.lock-mark i { position: relative; width: 21px; height: 18px; border: 1px solid rgba(228,237,245,.88); background: rgba(5,8,11,.25); }
.lock-mark i::before { content: ""; position: absolute; left: 4px; top: -11px; width: 11px; height: 10px; border: 1px solid rgba(228,237,245,.88); border-bottom: 0; border-radius: 8px 8px 0 0; }
.gallery-empty { border: 1px solid rgba(145,183,220,.2); padding: 38px; color: #7d8892; text-align: center; font-size: 10px; }
.gallery-empty[hidden] { display: none; }
.gallery-note { margin: 14px 0 0; color: #5e666d; font-size: 8px; line-height: 1.7; }

@media (max-width: 620px) {
  .lens-main { width: calc(100% - 24px); }
  .lens-heading { padding-bottom: 13px; }
  .lens-heading h1 { font-size: 39px; }
  .lens-profile { grid-template-columns: 86px 1fr; gap: 18px; margin: 23px 8px 22px; }
  .lens-avatar { width: 82px; height: 82px; padding: 3px; }
  .lens-profile__name { gap: 7px; }
  .lens-profile__name h2 { font-size: 18px; }
  .lens-profile__name span { padding: 4px 6px; font-size: 8px; }
  .lens-stats { gap: 16px; margin: 12px 0 10px; }
  .lens-stats div { display: block; text-align: center; }
  .lens-stats dt { font-size: 8px; }
  .lens-stats dd { font-size: 17px; }
  .lens-profile__body > p { font-size: 11px; line-height: 1.75; }
  .member-stories { justify-content: flex-start; gap: 20px; overflow-x: auto; margin-bottom: 21px; padding: 0 5px 20px; scrollbar-width: none; }
  .member-stories::-webkit-scrollbar { display: none; }
  .member-stories button { flex: 0 0 auto; }
  .member-stories button > span { width: 54px; height: 54px; }
  .gallery-head { display: block; padding-bottom: 11px; }
  .gallery-tab { width: max-content; min-height: 40px; margin: 0 auto 10px; padding: 0 15px; }
  .gallery-tools { justify-content: flex-end; }
  .gallery-tools label { margin-right: auto; }
  .gallery-tools select { max-width: 118px; }
  .photo-grid { gap: 3px; padding-top: 3px; }
  .photo-copy { display: none; }
  .access { left: 5px; bottom: 5px; padding: 3px 4px; font-size: 5px; }
  .photo-card .access { opacity: 1; }
  .album-count { top: 7px; right: 7px; font-size: 6px; }
  .album-count i, .album-count i::before { width: 9px; height: 7px; }
  .lock-mark i { width: 17px; height: 14px; }
  .lock-mark i::before { left: 3px; top: -9px; width: 9px; height: 8px; }
}

/* Readability pass */
.gallery-count,.gallery-tools label,.gallery-tools select,.gallery-note{font-size:12px}.drums-heading>p,.gallery-intro{font-size:13px}.access,.album-count{font-size:11px}