/* v0.3.1 first-party photo system */
.kdl-hero-collage { display:grid; grid-template-columns:minmax(0,1fr) 104px; gap:10px; min-width:0; }
.kdl-hero-visual--main { min-width:0; }
.kdl-hero-visual--main img { aspect-ratio:16/11; }
.kdl-hero-mini-grid { display:grid; gap:10px; }
.kdl-hero-mini-grid figure { margin:0; min-height:0; }
.kdl-hero-mini-grid img { display:block; width:100%; height:100%; min-height:0; aspect-ratio:1/1; object-fit:cover; border-radius:16px; box-shadow:0 8px 24px rgba(38,39,34,.10); }

.kdl-photo-ribbon { display:grid; grid-template-columns:minmax(240px,.72fr) minmax(0,1.28fr); gap:30px; align-items:center; margin-top:38px; padding:30px; background:#25372e; border-radius:var(--kdl-radius-lg); color:#f7f7f1; overflow:hidden; }
.kdl-photo-ribbon h2,.kdl-photo-ribbon .kdl-kicker { color:#f7f7f1; }
.kdl-photo-ribbon h2 { margin:0 0 10px; font-size:clamp(1.45rem,3vw,2rem); }
.kdl-photo-ribbon-copy > p:last-child { color:#cbd4cb; font-size:.84rem; line-height:1.75; margin:0; }
.kdl-photo-ribbon-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.kdl-photo-ribbon-grid figure { margin:0; min-width:0; }
.kdl-photo-ribbon-grid img { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:14px; }

.kdl-card { overflow:hidden; }
.kdl-card-media { display:block; margin:-22px -22px 17px; overflow:hidden; background:var(--kdl-soft); }
.kdl-card-media img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; transition:transform .25s ease; }
.kdl-card:hover .kdl-card-media img { transform:scale(1.018); }
.kdl-hub-card { padding-bottom:22px; }
.kdl-hub-card .kdl-card-media img { aspect-ratio:4/3; }

.kdl-context-photo { margin:0 0 34px; }
.kdl-context-photo img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--kdl-radius-lg); box-shadow:var(--kdl-shadow); }
.kdl-context-photo--hub img { aspect-ratio:16/8.5; }
.kdl-context-photo figcaption { color:var(--kdl-muted); font-size:.7rem; line-height:1.55; margin-top:8px; }

.kdl-lane-gallery { border-top:1px solid var(--kdl-line); margin-top:54px; padding-top:28px; }
.kdl-photo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.kdl-photo-grid figure { margin:0; min-width:0; }
.kdl-photo-grid img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:16px; }
.kdl-photo-note { color:var(--kdl-muted); font-size:.68rem; line-height:1.6; margin:10px 0 0; }

.kdl-profile-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:-10px 0 38px; max-width:900px; }
.kdl-profile-gallery figure { margin:0; min-width:0; }
.kdl-profile-gallery img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:16px; }
.page-chibi .kdl-profile-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:620px; }

.kdl-related-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.kdl-related-card { padding-bottom:66px; position:relative; }
.kdl-related-card .kdl-card-action { position:absolute; left:22px; bottom:11px; }
.kdl-related .kdl-section-head { margin-bottom:18px; }
.kdl-related .kdl-section-head h2 { margin:0; }

/* One tiny 4x3 WebP atlas replaces repeated fallback files while retaining 12 real photos. */
.kdl-atlas-tile {
  display:block;
  width:100%;
  background-image:var(--kdl-atlas-url);
  background-repeat:no-repeat;
  background-size:400% 300%;
  background-position:var(--kdl-atlas-x) var(--kdl-atlas-y);
}
.kdl-hero-mini-grid .kdl-atlas-tile { height:100%; min-height:0; aspect-ratio:1/1; border-radius:16px; box-shadow:0 8px 24px rgba(38,39,34,.10); }
.kdl-photo-ribbon-grid .kdl-atlas-tile { aspect-ratio:4/5; border-radius:14px; }
.kdl-card-media .kdl-atlas-tile { aspect-ratio:16/9; transition:transform .25s ease; }
.kdl-card:hover .kdl-card-media .kdl-atlas-tile { transform:scale(1.018); }
.kdl-hub-card .kdl-card-media .kdl-atlas-tile { aspect-ratio:4/3; }
.kdl-context-photo .kdl-atlas-tile { aspect-ratio:16/9; border-radius:var(--kdl-radius-lg); box-shadow:var(--kdl-shadow); }
.kdl-context-photo--hub .kdl-atlas-tile { aspect-ratio:16/8.5; }
.kdl-photo-grid .kdl-atlas-tile,.kdl-profile-gallery .kdl-atlas-tile { aspect-ratio:4/3; border-radius:16px; }

@media (max-width:960px) {
  .kdl-photo-ribbon { grid-template-columns:1fr; }
  .kdl-photo-ribbon-grid { grid-template-columns:repeat(4,minmax(120px,1fr)); }
}
@media (max-width:720px) {
  .kdl-hero-collage { grid-template-columns:1fr; }
  .kdl-hero-mini-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kdl-hero-mini-grid img,.kdl-hero-mini-grid .kdl-atlas-tile { aspect-ratio:16/9; }
  .kdl-photo-ribbon { margin-left:-2px; margin-right:-2px; padding:22px 16px; }
  .kdl-photo-ribbon-grid,.kdl-photo-grid,.kdl-profile-gallery { display:flex; gap:9px; overflow-x:auto; padding:0 0 8px; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .kdl-photo-ribbon-grid::-webkit-scrollbar,.kdl-photo-grid::-webkit-scrollbar,.kdl-profile-gallery::-webkit-scrollbar { display:none; }
  .kdl-photo-ribbon-grid figure { flex:0 0 66vw; scroll-snap-align:start; }
  .kdl-photo-grid figure,.kdl-profile-gallery figure { flex:0 0 72vw; scroll-snap-align:start; }
  .kdl-photo-ribbon-grid img,.kdl-photo-ribbon-grid .kdl-atlas-tile { aspect-ratio:4/3; }
  .kdl-card-media { margin:-18px -18px 15px; }
  .kdl-context-photo { margin-bottom:27px; }
  .kdl-context-photo img,.kdl-context-photo .kdl-atlas-tile,.kdl-context-photo--hub img,.kdl-context-photo--hub .kdl-atlas-tile { aspect-ratio:16/10; border-radius:18px; }
  .kdl-profile-gallery { margin-top:-8px; }
  .kdl-related-grid { grid-template-columns:1fr; }
  .kdl-related-card .kdl-card-action { left:18px; }
}
@media (prefers-reduced-motion:reduce) {
  .kdl-card-media img,.kdl-card-media .kdl-atlas-tile { transition:none; }
}