/* PhotoHost — Plan 36 P8: "Couture" design.
   High-fashion magazine structure: oversized uppercase Bodoni (didone)
   display type set asymmetrically to the left with a hairline rule kicker,
   magazine pacing in the grid (tall row gaps, tight columns), razor-sharp
   corners, tiny tracked-caps captions under hairline rules, lookbook index
   numbers on the portfolio, and slow, unhurried zooms. Like a layout, a
   design owns structure only — colors stay with the user's theme/atmosphere
   (--bg/--text/--accent); hairlines are color-mixed from theme tokens. */

@font-face {
    font-family: 'Bodoni Moda';
    src: url('/static/fonts/bodoni-moda-700-latin.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.design-couture {
    --d-font-display: 'Bodoni Moda', 'Didot', 'Bodoni MT', 'Iowan Old Style', serif;
    --co-hairline: rgba(128, 128, 128, 0.45);
    --co-hairline: color-mix(in srgb, var(--text) 30%, transparent);
}

/* ── Cover: asymmetric editorial-fashion composition — everything sets
   left, the title goes enormous, the kicker carries a hairline rule. ────── */
.design-couture .gallery-cover-text {
    text-align: left;
    padding-left: clamp(1.5rem, 7vw, 6rem);
    padding-right: clamp(1.5rem, 7vw, 6rem);
}

.design-couture .gallery-cover-kicker::before {
    content: "";
    display: block;
    width: 3.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.7);
    margin-bottom: 1rem;
}

.design-couture .gallery-cover-title {
    font-weight: 700;
    font-size: clamp(2.75rem, 9vw, 6.5rem);
    line-height: 0.95;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    text-wrap: balance;
}

.design-couture .gallery-cover-sub {
    font-size: var(--d-text-sm);
    text-transform: uppercase;
    letter-spacing: var(--d-track-caps);
    margin-top: 1rem;
}

/* Side-lit scrim matches the left-set composition. */
.design-couture .gallery-cover-scrim {
    background: linear-gradient(to right,
        rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.08) 60%, rgba(0, 0, 0, 0.18));
}

.design-couture .gallery-cover-enter {
    border-radius: 0;
    letter-spacing: 0.22em;
    padding: 0.75rem 2.2rem;
}

.design-couture .gallery-header .gallery-photographer {
    font-family: var(--d-font-display);
    font-size: 1.1rem;
    letter-spacing: 0.06em;
}

/* ── Grid: magazine pacing — tall row gaps, tight columns, calm width.
   P6.5: the layout-qualified selectors are required — layouts.css and
   public-base.css set per-layout gaps at higher specificity, which silently
   beat a bare `.design-couture .gallery-grid`. Every cell of the
   design×layout matrix must land here, for both the client gallery
   (.gallery-*) and the public album body (.album-view .photo-*). ────────── */
.design-couture .gallery-main {
    padding: clamp(3rem, 8vw, 7rem) clamp(1rem, 4vw, 3.5rem);
    max-width: 1400px;
}

.design-couture .gallery-grid,
.design-couture .gallery-main[data-layout="editorial"] .gallery-grid,
.design-couture .album-view .photo-grid,
.design-couture .album-view.editorial .photo-grid {
    gap: clamp(2.5rem, 6vw, 4.5rem) clamp(0.6rem, 1.5vw, 1.25rem);
}

/* Reading-order masonry (see layouts.css): keep couture's airy gutters as a
   uniform grid gap; row spans are set by masonry.js. */
.design-couture .gallery-main[data-layout="masonry"] .gallery-grid:not(.has-highlights),
.design-couture .album-view.masonry .photo-grid:not(.has-highlights) {
    column-gap: clamp(1.5rem, 4vw, 3rem);
}

.design-couture .gallery-main[data-layout="masonry"] .gallery-tile,
.design-couture .album-view.masonry .photo-item {
    margin-bottom: 0;
}

/* Razor corners everywhere; the zoom slows to a glide. */
.design-couture .gallery-tile,
.design-couture .gallery-tile .gallery-img,
.design-couture .photo-item,
.design-couture .portfolio-cover,
.design-couture .portfolio-cover img,
.design-couture .related-album-cover img,
.design-couture .journal-card-cover img,
.design-couture .story-section img,
.design-couture .roll-photo img {
    border-radius: 0;
}

.design-couture .gallery-tile .gallery-img,
.design-couture .photo-item img {
    transition: transform 1.1s var(--d-ease);
}

.design-couture .photo-item:hover img {
    filter: none;
}

.design-couture .portfolio-cover img {
    transition: transform 1.4s var(--d-ease);
}

.design-couture .portfolio-item:hover .portfolio-cover img {
    transform: scale(1.04);
}

/* ── Captions: tiny tracked caps under a hairline rule — credit lines. ──── */
.design-couture .section-caption,
.design-couture .roll-caption {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    text-align: left;
    border-top: 1px solid var(--co-hairline);
    padding-top: 0.6rem;
}

/* P4 — public portfolio surfaces: lookbook index. Each album reads as a
   numbered look — "01 / WEDDING" — under a hairline rule. */
.design-couture .portfolio-grid {
    counter-reset: couture-look;
    gap: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 2.5vw, 2rem);
}

.design-couture .portfolio-item {
    counter-increment: couture-look;
}

.design-couture .portfolio-cover {
    margin-bottom: 1rem;
    box-shadow: none;
}

.design-couture .portfolio-info {
    text-align: left;
    border-top: 1px solid var(--co-hairline);
    padding-top: 0.75rem;
}

.design-couture .portfolio-info h2 {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.design-couture .portfolio-info h2::before {
    content: counter(couture-look, decimal-leading-zero);
    display: block;
    font-family: var(--d-font-text);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    opacity: 0.6;
    margin-bottom: 0.35rem;
}

.design-couture .journal-card-title,
.design-couture .journal-post-headline h1 {
    text-transform: uppercase;
    letter-spacing: 0.03em;
}