/* Design page: kind of design on the left, grid of work on the right.
   Viewer styles (.lb) come from photos.css. */

/* hero */
.dz-hero { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.dz-hero .sx-title { font-size: clamp(3rem, 6.6vw, 6rem); }
.dz-hero .sx-lead { margin-top: 2rem; font-size: 1.2rem; line-height: 1.7; max-width: 30rem; }
.dz-index { border-top: 1px solid rgba(10, 10, 10, .2); }
.dz-idx { display: grid; grid-template-columns: 3rem 1fr auto 1.4rem; align-items: baseline; gap: 1rem; padding: 1.05rem 0; border-bottom: 1px solid rgba(10, 10, 10, .2); transition: padding .4s cubic-bezier(.16, 1, .3, 1); }
.dz-idx:hover { padding-left: .8rem; }
.dz-idx__name { font-size: clamp(1.2rem, 1.6vw, 1.45rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; }
.dz-idx__n { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: rgba(10, 10, 10, .55); }
.dz-idx__arr { justify-self: end; color: rgba(10, 10, 10, .45); transition: transform .3s, color .3s; }
.dz-idx:hover .dz-idx__arr { transform: translateY(3px); color: #0A0A0A; }
.dz-idx:focus-visible { outline: 3px solid #0A0A0A; outline-offset: 3px; }

/* one section per kind of design */
.dz-sec { padding-top: 4rem; padding-bottom: 4rem; }
.dz-row { display: grid; gap: 2.2rem; }
.dz-title { margin-top: 1.1rem; font-size: clamp(2.3rem, 4vw, 3.8rem); line-height: 1; letter-spacing: -0.045em; font-weight: 500; }
.dz-title em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -0.02em; }
.dz-text { margin-top: 1.4rem; max-width: 24rem; }
@media (min-width: 1024px) {
    .dz-row { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 4rem; }
    .dz-side__in { position: sticky; top: calc(var(--nav-h, 76px) + 2rem); padding-top: .4rem; }
    .pager-on .dz-side__in { top: 2rem; }
    .pager-on .dz-sec { padding-top: 3rem; padding-bottom: 3rem; }
}

/* grid of work */
.dz-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 1024px) { .dz-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .dz-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* stories: tall 9:16 tiles, four in a row on desktop */
.dz-grid--story { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) { .dz-grid--story { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dz-tile { margin: 0; }
.dz-btn { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: rgba(10, 10, 10, .06); cursor: zoom-in; }
.dz-btn--story { aspect-ratio: 9 / 16; }
.dz-btn::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(10, 10, 10, .08); pointer-events: none; }
.dz-btn img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease, transform .9s cubic-bezier(.16, 1, .3, 1); }
.dz-btn img.on { opacity: 1; }
.dz-btn:hover img { transform: scale(1.04); }
.dz-btn:focus-visible { outline: 3px solid #0A0A0A; outline-offset: 3px; }
.dz-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; justify-content: space-between; gap: .8rem; padding: 2.4rem .9rem .8rem; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); color: #fff; font-size: .85rem; line-height: 1.3; text-align: left; opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .45s cubic-bezier(.16, 1, .3, 1); pointer-events: none; }
.dz-btn:hover .dz-cap, .dz-btn:focus-visible .dz-cap { opacity: 1; transform: none; }
@media (hover: none) { .dz-cap { display: none; } }
@media (max-width: 640px) { .dz-sec { padding-top: 3rem; padding-bottom: 3rem; } .dz-btn { border-radius: 10px; } }
@media (prefers-reduced-motion: reduce) { .dz-btn img, .dz-cap, .dz-idx, .dz-idx__arr { transition: none; } }

/* viewer: full-page website designs scroll inside the stage */
.lb__stage.is-scroll { display: block; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .35) transparent; }
.lb__stage.is-scroll .lb__img { margin: 0 auto; transform-origin: 0 0; }

/* subtle tints, one per section, so neighbours always differ (7 kinds, 7 tints; cycles if more are added) */
section.dz-sec.dz-tint-0 { background: #F7F2E7; }   /* sand */
section.dz-sec.dz-tint-1 { background: #EDF1F8; }   /* mist blue */
section.dz-sec.dz-tint-2 { background: #EEF4EC; }   /* sage */
section.dz-sec.dz-tint-3 { background: #F8EFEB; }   /* blush */
section.dz-sec.dz-tint-4 { background: #F1EFF8; }   /* lavender */
section.dz-sec.dz-tint-5 { background: #FAF5E2; }   /* butter */
section.dz-sec.dz-tint-6 { background: #EAF3F2; }   /* mint */