/* A sequence of photographic spreads, with type and imagery sharing the page. */
.home-page {
    /* Opening layout controls. Save this file and refresh the local preview. */
    --opening-space-above: 48px; /* Increase to move the whole opening down. */
    --opening-text-x: -50px;     /* Negative = left; positive = right, for the quote and credit. */
    --opening-text-y: 24px;      /* Increase to move the quote and credit down. */
    --opening-intro-y: 28px;     /* Introduction offset below the smaller portrait's top edge. */
    --page-gutter: clamp(20px, 3vw, 64px);
    /* Shared rhythm and type sizes for the complete homepage. */
    --spread-space: clamp(66px, 6vw, 114px);
    --heading-space: clamp(28px, 3vw, 56px);
    --credit-space: clamp(4px, .35vw, 6px);
    --section-heading-size: clamp(64px, 8.8vw, 168px);
    --review-size: clamp(28px, 2.7vw, 48px);
    --credit-size: clamp(18px, 1.25vw, 22px);
    --rule-color: #e5e5e2;
}
.home-page .header-container { width: 100%; max-width: none; padding-inline: var(--page-gutter); }
.home-page > header { border-bottom: 1px solid var(--rule-color); }
.home { width: 100%; max-width: none; padding: var(--opening-space-above) var(--page-gutter) 0; color: #292927; }
.home a, .shoot-intro a { color: inherit; }
.home a:hover, .shoot-intro a:hover { color: #777; }
.home h2, .home h3, .home h4 { font-weight: var(--heading-weight); }
.home img { width: 100%; height: auto; }
.home figure { margin: 0; min-width: 0; }
.home .eyebrow, .project-label { color: #555550; font-family: inherit; font-size: var(--credit-size); font-weight: 400; line-height: 1.35; }
.home .eyebrow { margin: 0 0 24px; letter-spacing: .12em; text-transform: uppercase; }
.home .project-label { margin: 0 0 14px; font-weight: 400; }
.display-heading { margin: 0; font-size: var(--section-heading-size); line-height: 1; letter-spacing: -.04em; }
.press-excerpt blockquote { margin: 0 0 var(--credit-space); font-weight: var(--quote-weight); line-height: 1.15; }
.press-excerpt blockquote p { margin: 0; }
.press-excerpt figcaption { color: #555550; font-family: inherit; font-size: var(--credit-size); font-weight: 400; line-height: 1.35; text-align: left; text-wrap: pretty; }

.home-intro { grid-column: 6 / 9; grid-row: 2; align-self: start; justify-self: center; width: 100%; max-width: clamp(320px, 18.7vw, 360px); position: relative; top: var(--opening-intro-y); }
.home-intro h2 { font-weight: 400; max-width: 32ch; margin: 0; font-size: clamp(24px, 1.9vw, 34px); line-height: 1.15; letter-spacing: -.015em; text-wrap: pretty; }
.home-intro p { max-width: 32ch; margin: 18px 0 0; font-size: clamp(18px, 1.2vw, 21px); line-height: 1.4; text-wrap: pretty; }
.home-lead {
    --lead-gap: 24px;
    /* Keep a clear gap beside the portrait when narrowing the window. */
    --opening-text-shift: max(0px, calc((100vw - var(--page-gutter) - var(--page-gutter) + var(--lead-gap)) / 24 + var(--opening-text-x)));
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 26px var(--lead-gap);
    padding-bottom: 0;
}
.lead-portrait { grid-column: 1 / 5; grid-row: 1 / 3; align-self: center; }
.lead-quote { grid-column: 5 / -1; grid-row: 1; position: relative; left: var(--opening-text-shift); width: calc(100% - var(--opening-text-shift)); padding-top: calc(var(--opening-text-y) + clamp(44px, 4.7vw, 90px)); }
.lead-quote blockquote { font-size: clamp(40px, 6.3vw, 120px); line-height: .98; letter-spacing: -.045em; }
.lead-quote blockquote span { display: block; }
.lead-detail { grid-column: 9 / -1; grid-row: 2; align-self: end; }

.home-projects { margin-top: var(--spread-space); }
.featured-heading { margin: 0 0 var(--heading-space); font-size: var(--section-heading-size); line-height: 1; letter-spacing: -.04em; }
.vogue-feature { --center-inset: clamp(8px, 1vw, 20px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; margin-top: var(--spread-space); }
.vogue-masthead { grid-column: 5 / -1; grid-row: 1; padding-right: 3vw; text-align: right; }
.vogue-quote blockquote, .chanel-quote blockquote { font-size: var(--review-size); line-height: 1.15; }
.vogue-quote blockquote { text-wrap: balance; }
.vogue-pair, .vogue-fashion { display: contents; }
.fashion-images { grid-column: 1 / 5; grid-row: 1 / 4; }
.vogue-accessories { grid-column: 9 / -1; grid-row: 2 / 4; }
.vogue-fashion .project-secondary { grid-column: 5 / 8; grid-row: 3; align-self: end; position: relative; left: var(--center-inset); }
.vogue-quote { grid-column: 5 / 9; grid-row: 2; position: relative; left: var(--center-inset); padding: calc(var(--credit-size) * 1.35 + 22px) 24px 24px 8px; }
.chanel-feature { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr); gap: clamp(16px, 1.3vw, 24px) 24px; align-items: start; }
.chanel-primary { grid-column: 1 / 5; grid-row: 1 / 3; align-self: end; }
.chanel-title { grid-column: 5 / 9; grid-row: 1 / 3; align-self: start; padding-top: 11vw; }
.chanel-title .display-heading { margin-bottom: clamp(28px, 2vw, 40px); padding-left: clamp(24px, 3vw, 56px); }
.campaign-details { width: fit-content; max-width: 100%; margin-left: auto; margin-right: clamp(12px, 1vw, 20px); text-align: center; }
.campaign-name { margin: 0 0 12px; font-size: clamp(24px, 2.35vw, 40px); font-weight: 400; line-height: 1.1; letter-spacing: .01em; }
.campaign-description { margin: 0 auto; color: #555550; font-family: inherit; font-size: var(--credit-size); font-weight: 400; line-height: 1.35; text-wrap: balance; }
.chanel-secondary { grid-column: 9 / -1; grid-row: 2; width: 84%; justify-self: end; align-self: end; }
.chanel-quote { grid-column: 9 / -1; grid-row: 1; width: 84%; justify-self: end; text-align: center; padding-top: 6px; }
.chanel-quote figcaption { padding-left: 1em; }

/* A single magazine spread: title and review beside the paired covers. */
.publishing-edit { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr); gap: 36px 24px; margin-top: var(--spread-space); }
.publication-masthead { grid-column: 1 / 7; grid-row: 1; }
.publication-masthead .display-heading { width: fit-content; max-width: 100%; }
.publication-masthead .publication-kind { display: block; width: max-content; margin-top: 8px; margin-left: auto; font-size: clamp(28px, 4.4vw, 84px); font-weight: 400; line-height: 1.05; letter-spacing: -.015em; }
.publication-covers { grid-column: 7 / -1; grid-row: 1 / 3; display: grid; grid-template-columns: 1.12fr 1fr; gap: clamp(20px, 2.5vw, 48px); align-items: end; }
.publication-copy { grid-column: 1 / 6; grid-row: 2; align-self: start; margin-top: clamp(16px, 1.5vw, 28px); padding-left: clamp(8px, 1.2vw, 24px); }
.publishing-quote blockquote { max-width: 27ch; font-size: clamp(28px, 2.3vw, 40px); line-height: 1.15; text-wrap: pretty; }
.publishing-quote figcaption { font-size: clamp(18px, 1.05vw, 20px); }


@media (max-width: 1100px) {
    .home-lead { --lead-gap: 18px; }
    .vogue-feature, .chanel-feature, .publishing-edit { column-gap: 18px; }
    .lead-quote { padding-top: calc(var(--opening-text-y) + clamp(24px, 4.7vw, 52px)); }
    .home-intro { grid-column: 5 / 10; max-width: 320px; align-self: center; justify-self: start; top: 0; }
    .lead-portrait { align-self: end; }
    .lead-detail { grid-column: 10 / -1; }
}
@media (max-width: 760px) {
    /* Phone spacing is adjusted separately; text keeps the page's left margin. */
    .home-page { --opening-space-above: 40px; --opening-text-y: 0px; --opening-intro-y: 0px; --section-heading-size: clamp(40px, 12vw, 88px); }
    /* Let copy occupy the space above the smaller portrait. */
    .home-intro { display: contents; }
    .home-intro h2 { grid-column: 1 / -1; grid-row: 1; max-width: 28ch; font-size: 28px; margin-bottom: 8px; }
    .home-intro p { grid-column: 7 / -1; grid-row: 2; align-self: end; margin: 0; font-size: clamp(18px, 4.8vw, 21px); line-height: 1.3; }
    .home-lead { --opening-text-shift: 0px; grid-template-rows: auto auto auto auto; gap: 20px 16px; padding-bottom: 0; }
    .lead-portrait { grid-column: 1 / 7; grid-row: 2 / 4; align-self: end; }
    .lead-detail { grid-column: 7 / -1; grid-row: 3; }
    .lead-quote { grid-column: 1 / -1; grid-row: 4; top: 0; padding: 8px 0 0; }
    .lead-quote blockquote { font-size: clamp(36px, 9.4vw, 64px); line-height: 1.03; }
    .lead-quote blockquote span { display: inline; }
    .vogue-feature { --center-inset: 0px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px 16px; }
    .vogue-masthead, .vogue-pair { display: contents; }
    /* Keep the heading just above Fashion, with a 4px gap instead of a full row gap. */
    #vogue-heading { grid-column: 1 / -1; grid-row: 1; margin-bottom: -16px; text-align: right; }
    .vogue-fashion, .fashion-images, .vogue-accessories { display: contents; }
    .vogue-fashion .project-label { grid-column: 1 / 7; grid-row: 2; margin: 0; }
    .fashion-images .project-primary { grid-column: 1 / 7; grid-row: 3; }
    .vogue-fashion .project-secondary { grid-column: 1 / 7; grid-row: 4 / 6; align-self: start; }
    .vogue-accessories .project-label { grid-column: 7 / -1; grid-row: 4; margin: 0; }
    .accessories-shoe { grid-column: 7 / -1; grid-row: 5; }
    .vogue-quote { grid-column: 7 / -1; grid-row: 3; align-self: center; padding: 0; }
    .vogue-quote blockquote { font-size: clamp(24px, 6.2vw, 36px); text-wrap: pretty; }
    /* Stagger the campaign images around the title and review. */
    .chanel-feature { grid-template-rows: auto auto auto; gap: 20px 16px; }
    .chanel-title { grid-column: 7 / -1; grid-row: 1; text-align: left; padding: 0; }
    .chanel-title .display-heading { margin-bottom: 14px; padding-left: 0; }
    .campaign-details { margin: 0; text-align: left; }
    .campaign-description { margin-inline: 0; text-wrap: pretty; }
    .chanel-primary { grid-column: 1 / 7; grid-row: 1 / 3; align-self: start; }
    .chanel-secondary { grid-column: 7 / -1; grid-row: 2 / 4; width: 100%; align-self: start; }
    .chanel-quote { grid-column: 1 / 7; grid-row: 3; width: 100%; padding: 0; text-align: left; align-self: center; }
    .chanel-quote blockquote { font-size: clamp(24px, 6.2vw, 36px); }
    .chanel-quote figcaption { padding-left: 0; }
    /* The subtitle fills the space above the smaller cover. */
    .publishing-edit { grid-template-columns: 1.12fr 1fr; grid-template-rows: auto auto auto auto; gap: 20px 22px; }
    .publication-masthead, .publication-masthead .display-heading, .publication-covers { display: contents; }
    .publication-name { grid-column: 1 / -1; grid-row: 1; }
    .publication-masthead .publication-kind { grid-column: 2; grid-row: 2; margin: 0; font-size: clamp(28px, 7.4vw, 48px); }
    .publication-cover:first-child { grid-column: 1; grid-row: 2 / 4; align-self: start; }
    .publication-cover:last-child { grid-column: 2; grid-row: 3; align-self: end; }
    .publication-copy { grid-column: 1 / -1; grid-row: 4; margin-top: 8px; padding-left: 0; }
    .publishing-quote blockquote { font-size: 30px; }
}

/* Full project selections keep the compact, uncropped gallery layout. */
.shoot-page { width: 100%; max-width: 1120px; padding: 40px 24px 0; }
.shoot-intro { margin: 0 0 32px; display: flex; justify-content: space-between; align-items: end; gap: 25px; }
.shoot-intro h2 { font-size: 30px; margin: 0 0 8px; }
.shoot-intro p { font-size: 18px; margin: 0; }
.shoot-intro a { font-size: 16px; text-underline-offset: 4px; }
.shoot-page .portfolio-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; align-items: start; gap: 28px 24px; padding: 0; }
.shoot-page .portfolio-item { grid-column: auto; grid-row: auto; background: none; }
.shoot-page .portfolio-item img { width: 100%; height: auto; object-fit: contain; }
.shoot-notes { margin: 32px 0; font-size: 16px; color: #666; }
.shoot-notes a { color: inherit; text-underline-offset: 4px; }

@media (max-width: 640px) {
    .shoot-page { padding: 28px 20px 0; }
    .shoot-intro { margin-bottom: 28px; align-items: baseline; }
    .shoot-intro h2 { font-size: 26px; }
    .shoot-intro p { font-size: 16px; }
    .shoot-intro a { flex-shrink: 0; font-size: 15px; }
    .shoot-page .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
}