/* HAVERSHAM BOOK FAMILY STYLES */

:root {
    /* =====================================================
       GLOBAL COLORS
       ===================================================== */

    --haversham-dark-blue: #182127;
    --haversham-orange: #bf5415;
    --haversham-cream: #f3f0e7;
    --haversham-charcoal: #302e2c;
    --haversham-black: #222222;
    --haversham-light-gray: #e5e5e5;
    --haversham-white: #ffffff;

    /* Existing names retained for current CSS */
    --haversham-ink: var(--haversham-black);
    --haversham-accent: var(--haversham-orange);


    /* =====================================================
       GLOBAL FONTS
       ===================================================== */

		--font-body:
			"Baskervville",
			Baskerville,
			"Baskerville Old Face",
			"Times New Roman",
			serif;

		--font-heading:
			"Baskervville",
			Baskerville,
			"Baskerville Old Face",
			"Times New Roman",
			serif;

    --font-small-heading:
        Sora,
        Arial,
        sans-serif;


    /* =====================================================
       GLOBAL HEADING CONTROLS
       ===================================================== */

    --heading-color: var(--haversham-black);
    --heading-font-weight: 400;
    --heading-line-height: 1.15;
    --heading-margin-top: 0;
    --heading-margin-bottom: 0;

    --heading-link-color: inherit;
    --heading-link-hover-color: var(--haversham-orange);

    --heading-1-size: clamp(42px, 6vw, 82px);
    --heading-2-size: clamp(32px, 4.5vw, 58px);
    --heading-3-size: clamp(24px, 3vw, 38px);
    --heading-4-size: clamp(20px, 2.3vw, 30px);
    --heading-5-size: 21px;
    --heading-6-size: 18px;
}


/* =========================================================
   GLOBAL PAGE DEFAULTS
   ========================================================= */

html {
    scroll-behavior: smooth;
}

body {
    color: var(--haversham-ink);
    background: url("../images/haversham/background/bg-tiled.jpg") repeat top left / 512px 512px;

    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
}


/* =========================================================
   HAVERSHAM HEADING DEFAULTS
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
.heading-1,
.heading-2,
.heading-3,
.heading-4,
.heading-5,
.heading-6 {
    margin-top: var(--heading-margin-top);
    margin-bottom: var(--heading-margin-bottom);

    color: var(--heading-color);

    font-weight: var(--heading-font-weight);
    line-height: var(--heading-line-height);
}


/* Large headings use Baskerville */
h1,
h2,
h3,
h4,
.heading-1,
.heading-2,
.heading-3,
.heading-4 {
    font-family: var(--font-heading);
}


/* Small headings use Sora */
h5,
h6,
.heading-5,
.heading-6 {
    font-family: var(--font-small-heading);
}


/* =========================================================
   HEADING SIZES
   ========================================================= */

h1,
.heading-1 {
    font-size: var(--heading-1-size);
}

h2,
.heading-2 {
    font-size: var(--heading-2-size);
}

h3,
.heading-3 {
    font-size: var(--heading-3-size);
}

h4,
.heading-4 {
    font-size: var(--heading-4-size);
}

h5,
.heading-5 {
    font-size: var(--heading-5-size);
}

h6,
.heading-6 {
    font-size: var(--heading-6-size);
}


/* =========================================================
   HEADING LINKS
   ========================================================= */

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a,
.heading-1 a,
.heading-2 a,
.heading-3 a,
.heading-4 a,
.heading-5 a,
.heading-6 a {
    color: var(--heading-link-color);
    text-decoration: none;
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover,
.heading-1 a:hover,
.heading-2 a:hover,
.heading-3 a:hover,
.heading-4 a:hover,
.heading-5 a:hover,
.heading-6 a:hover {
    color: var(--heading-link-hover-color);
}



/* =========================================================
   HERO
   ========================================================= */

.book10-hero {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 88vh;
    overflow: hidden;

}

.book10-hero::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.58),
            rgba(0, 0, 0, 0.12)
        );
}

.book10-hero-content {
    position: relative;
    z-index: 1;

    width: min(92%, 1200px);

    color: var(--haversham-white);
    text-shadow: 0 3px 16px rgba(0, 0, 0, 0.55);
}

.book10-hero h1 {
    max-width: 850px;

    color: var(--haversham-white);

    font-family: var(--font-heading);
    font-size: clamp(48px, 7vw, 108px);
    font-weight: 400;
    line-height: 0.95;
}

.book10-hero p {
    max-width: 760px;

    font-family: var(--font-body);
    font-size: clamp(20px, 2.4vw, 34px);
}


/* =========================================================
   PAGE SECTIONS
   ========================================================= */

.book-section {
 	padding: 60px 24px;
}

.book-section-inner {
    width: min(100%, 1400px);
    margin: auto;
}

.book-intro {
    text-align: center;
}


/* =========================================================
   SECTION HEADINGS
   ========================================================= */

.book-intro h2,
.toolkit-heading {
    color: var(--heading-color);

    font-family: var(--font-heading);
    font-size: clamp(20px, 5vw, 48px);
    font-weight: 600;
    line-height: var(--heading-line-height);
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-heading);
    font-weight: 400;
}

h5,
h6 {
    font-family: var(--font-small-heading);
}


.book10-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 88vh;
    overflow: hidden;

}

.book10-hero::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.58),
            rgba(0, 0, 0, 0.12)
        );
}

.book10-hero-content {
    position: relative;
    z-index: 1;

    width: min(92%, 1200px);

    color: var(--haversham-cream);
    text-shadow: 0 3px 16px rgba(0, 0, 0, 0.55);
}

.book10-hero h1 {
    max-width: 850px;

    font-family: var(--font-heading);
    font-size: clamp(48px, 7vw, 108px);
    font-weight: 400;
    line-height: 0.95;
}

.book10-hero p {
    max-width: 760px;

    font-family: var(--font-body);
    font-size: clamp(20px, 2.4vw, 34px);
}

.book-section {
    padding: 50px 24px;
}

.book-section-inner {
    width: min(100%, 1400px);
    margin: auto;
}

.book-intro {
    text-align: center;
}


.page-footer {
    background: var(--haversham-dark-blue) !important;
    color: var(--haversham-white);
}

.page-footer img {
    width: 220px;
    max-width: 70%;
}

a {
    color: var(--haversham-orange);
}

a:hover {
    color: var(--haversham-charcoal);
}

@media (max-width: 767px) {
    .book10-hero {
        min-height: 68vh;
        background-position: 62% center;
    }

    .book10-hero-content {
        text-align: center;
    }

    .book10-hero h1 {
        font-size: 46px;
    }

    .book10-hero p {
        font-size: 21px;
    }

    .book-section {
        padding: 54px 14px;
    }

    .book-intro p,
    .toolkit-intro {
        font-size: 18px;
    }

}


/* =========================================================
   HAVERSHAM GALLERY CONTROLS
   ========================================================= */

.haversham-gallery {
    /* ---------- Overall Gallery ---------- */

    --gallery-max-width: 1400px;
    --gallery-side-padding: 0px;

    /* ---------- Category Buttons ---------- */

    --filter-columns: 6;
    --filter-gap-x: 12px;
    --filter-gap-y: 12px;

    --filter-all-width: 180px;
    --filter-button-height: 54px;
    --filter-button-padding-x: 12px;
    --filter-button-padding-y: 10px;

    --filter-font-family: var(--font-heading);

    --filter-font-size: 15px;
    --filter-line-height: 1.2;
    --filter-font-weight: 600;

    --filter-border-width: 2px;
    --filter-border-color: #222222;
    --filter-border-radius: 28px;

    --filter-background: #ffffff;
    --filter-text-color: #222222;

    --filter-active-background: #e4dacc;
    --filter-active-border-color: #222222;
    --filter-active-text-color: #000000;

    --filter-hover-lift: -2px;
    --filter-hover-background: #bf5415;
    --filter-hover-border-color: #cb6f39;
    --filter-hover-text-color: #ffffff;

    --filter-bottom-spacing: 34px;

    /* ---------- Gallery Thumbnail Grid ---------- */

    --gallery-columns: 6;
    --gallery-column-gap: 24px;
    --gallery-row-gap: 24px;

    /* Change this to control thumbnail width.
       Use 100% to fill each grid column. */
    --thumbnail-width: 100%;

    /* Examples:
       1 / 1   = square
       4 / 5   = portrait
       5 / 4   = landscape
       auto    = original image proportions */
    --thumbnail-aspect-ratio: 1 / 1;

    --thumbnail-height: auto;
    --thumbnail-object-fit: cover;
    --thumbnail-object-position: center center;

    --thumbnail-border-width: 0px;
    --thumbnail-border-color: transparent;
    --thumbnail-border-radius: 30px;

    --thumbnail-shadow-x: 0px;
    --thumbnail-shadow-y: 7px;
    --thumbnail-shadow-blur: 18px;
    --thumbnail-shadow-spread: 0px;
    --thumbnail-shadow-color: rgba(0, 0, 0, 0.24);

    --thumbnail-hover-scale: 1.04;
    --thumbnail-selected-outline-width: 4px;
    --thumbnail-selected-outline-color: #bf5415;

    /* ---------- Thumbnail Titles ---------- */

    --thumbnail-title-display: block;
    --thumbnail-title-font-size: 17px;
    --thumbnail-title-line-height: 1.3;
    --thumbnail-title-padding-top: 12px;
    --thumbnail-title-padding-bottom: 6px;
    --thumbnail-title-color: inherit;

    /* ---------- Large Selected Image Container ---------- */

    --large-container-width: 100%;
    --large-container-max-width: 900px;

    --large-container-margin-top: 148px;
    --large-container-margin-left: auto;
    --large-container-margin-right: auto;

    /* Use these to shift the complete large-image container. */
    --large-container-offset-x: 0px;
    --large-container-offset-y: 00px;

    --large-container-padding: 50px;
    --large-container-background: transparent;

    --large-container-border-width: 0px;
    --large-container-border-color: transparent;
    --large-container-border-radius: 0px;

    /* ---------- Large Selected Image ---------- */

    --large-image-width: 85%;
    --large-image-max-width: none;
    --large-image-height: auto;

    /* Use contain to show the entire image.
       Use cover when assigning a fixed height. */
    --large-image-object-fit: contain;
    --large-image-object-position: center center;

    --large-image-border-width: 0px;
    --large-image-border-color: transparent;
    --large-image-border-radius: 50px;

    --large-image-shadow-x: 0px;
    --large-image-shadow-y: 22px;
    --large-image-shadow-blur: 30px;
    --large-image-shadow-spread: 0px;
    --large-image-shadow-color: rgba(0, 0, 0, 0.28);

    /* Use these to move only the Large Image. */
    --large-image-offset-x: 0px;
    --large-image-offset-y: -50px;

    /* ---------- Large Image Title ---------- */

    --large-title-display: block;
    --large-title-margin-top: 108px;
    --large-title-font-size: 28px;
    --large-title-line-height: 1.25;
    --large-title-font-weight: 600;
    --large-title-color: inherit;
	  --large-image-title-offset-x: 0px;
    --large-image-title-offset-y: -10px;


    /* ---------- Animation ---------- */

    --filter-transition-speed: 0.25s;
    --thumbnail-transition-speed: 0.35s;
    --large-image-transition-speed: 0.25s;

    width: min(100%, var(--gallery-max-width));
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--gallery-side-padding);
    padding-left: var(--gallery-side-padding);
}


/* =========================================================
   CATEGORY FILTERS
   ========================================================= */

.haversham-gallery-filters {
    width: 100%;
    margin-bottom: var(--filter-bottom-spacing);
    text-align: center;
}

.haversham-filter-all {
    min-width: var(--filter-all-width);
    margin: 0 auto var(--filter-gap-y);
}

.haversham-filter-grid {
    display: grid;
    grid-template-columns:
        repeat(var(--filter-columns), minmax(0, 1fr));

    column-gap: var(--filter-gap-x);
    row-gap: var(--filter-gap-y);
    width: 100%;
}

/* =========================================================
   GALLERY FILTER BUTTON STYLING
   ========================================================= */

.haversham-gallery-filters button {
    min-height: var(--filter-button-height);

    padding:
        var(--filter-button-padding-y)
        var(--filter-button-padding-x);

    border:
        var(--filter-border-width)
        solid
        var(--filter-border-color);

    border-radius: var(--filter-border-radius);

    background: var(--filter-background);
    color: var(--filter-text-color);

    font-family: var(--filter-font-family);
    font-size: var(--filter-font-size);
    font-weight: var(--filter-font-weight);
    line-height: var(--filter-line-height);

    cursor: pointer;

    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.haversham-gallery-filters button:hover {
    transform: translateY(var(--filter-hover-lift));

    border-color: var(--filter-hover-border-color);
    background: var(--filter-hover-background);
    color: var(--filter-hover-text-color);
}

.haversham-gallery-filters button.is-active,
.haversham-gallery-filters button.is-active:hover {
    transform: none;

    border-color: var(--filter-active-border-color);
    background: var(--filter-active-background);
    color: var(--filter-active-text-color);
}


/* =========================================================
   THUMBNAIL GALLERY
   ========================================================= */

.haversham-gallery-grid {
    display: grid;

    grid-template-columns:
        repeat(var(--gallery-columns), minmax(0, 320px));

    justify-content: center;

    column-gap: var(--gallery-column-gap);
    row-gap: var(--gallery-row-gap);

    width: 100%;
    margin: 0 auto;
}

/* Center the visible thumbnails after a category is selected */
.haversham-gallery-grid.is-filtered {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;

    gap:
        var(--gallery-row-gap)
        var(--gallery-column-gap) !important;
}

.haversham-gallery-grid.is-filtered .haversham-gallery-item {
    flex: 0 0 260px !important;

    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;

    margin: 0 !important;
}
.haversham-gallery-item {
    appearance: none;
    display: block;

    width: var(--thumbnail-width);
    margin-right: auto;
    margin-left: auto;
    padding: 0;

    overflow: visible;
    border: 0;
    background: transparent;
    color: inherit;

    text-align: center;
    cursor: pointer;
}

.haversham-gallery .haversham-gallery-item img {
    display: block;

    width: 82% !important;
    max-width: 82% !important;
    height: auto !important;
    aspect-ratio: auto;

    margin-right: auto !important;
    margin-left: auto !important;

    object-fit: contain !important;
    object-position: center center !important;
    background: transparent;

    border:
        var(--thumbnail-border-width)
        solid
        var(--thumbnail-border-color);

    border-radius: var(--thumbnail-border-radius);

    box-shadow:
        var(--thumbnail-shadow-x)
        var(--thumbnail-shadow-y)
        var(--thumbnail-shadow-blur)
        var(--thumbnail-shadow-spread)
        var(--thumbnail-shadow-color);

    transition:
        transform var(--thumbnail-transition-speed) ease,
        opacity var(--thumbnail-transition-speed) ease,
        box-shadow var(--thumbnail-transition-speed) ease;
}

.haversham-gallery-item span {
    display: var(--thumbnail-title-display);

    padding:
        var(--thumbnail-title-padding-top)
        6px
        var(--thumbnail-title-padding-bottom);

    color: var(--thumbnail-title-color);
    font-size: var(--thumbnail-title-font-size);
    line-height: var(--thumbnail-title-line-height);
}

.haversham-gallery-item:hover img {
    transform: scale(var(--thumbnail-hover-scale));
}

.haversham-gallery-item.is-selected img {
    outline:
        var(--thumbnail-selected-outline-width)
        solid
        var(--thumbnail-selected-outline-color);

    outline-offset:
        calc(var(--thumbnail-selected-outline-width) * -1);
}

.haversham-gallery-item.is-hidden {
    display: none;
}

/* Reserve gallery-thumbnail space before lazy-loaded images arrive */
.haversham-gallery-item {
	aspect-ratio: 1 / 1;
}

.haversham-gallery-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}



/* =========================================================
   GALLERY DIVIDER GRAPHIC
   ========================================================= */


.haversham-gallery-divider {
	 --haversham-gallery-divider-offset-x: 0px;
   --haversham-gallery-divider-offset-y: 280px;
	
	--large-image-devider-offset-x;
	--large-image-devider-offset-y;
}



/* =========================================================
   LARGE SELECTED IMAGE
   ========================================================= */

.haversham-gallery .haversham-gallery-display {
    display: block;

    width: var(--large-container-width) !important;
    max-width: var(--large-container-max-width) !important;

    margin-top: var(--large-container-margin-top) !important;
    margin-right: var(--large-container-margin-right) !important;
    margin-left: var(--large-container-margin-left) !important;

    padding: var(--large-container-padding) !important;

    transform:
        translate(
            var(--large-container-offset-x),
            var(--large-container-offset-y)
        ) !important;

    background: var(--large-container-background) !important;

    border-style: solid !important;
    border-width: var(--large-container-border-width) !important;
    border-color: var(--large-container-border-color) !important;
    border-radius: var(--large-container-border-radius) !important;

    box-sizing: border-box;
    text-align: center;
}

.haversham-gallery .haversham-gallery-display .haversham-selected-image {
    display: block;

    width: var(--large-image-width);
    max-width: var(--large-image-max-width);
    height: var(--large-image-height);

    margin-right: auto;
    margin-left: auto;

    transform:
        translate(
            var(--large-image-offset-x),
            var(--large-image-offset-y)
        );

    object-fit: var(--large-image-object-fit);
    object-position: var(--large-image-object-position);

    border-style: solid !important;
    border-width: var(--large-image-border-width) !important;
    border-color: var(--large-image-border-color) !important;
    border-radius: var(--large-image-border-radius) !important;

    box-shadow:
        var(--large-image-shadow-x)
        var(--large-image-shadow-y)
        var(--large-image-shadow-blur)
        var(--large-image-shadow-spread)
        var(--large-image-shadow-color) !important;

    opacity: 1;

    transition:
        opacity var(--large-image-transition-speed) ease;
}

.haversham-selected-image {
    cursor: zoom-in;
}

.haversham-selected-image:fullscreen {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    object-fit: contain;
    background: #ffffff;
    cursor: zoom-out;
    transform: scale(1.2);
}

.haversham-selected-image.is-changing {
    opacity: 0;
}

.haversham-selected-title {
    display: var(--large-title-display);

    margin:
        var(--large-title-margin-top)
        0
        0;
	
		transform:
			translate(
					var(--large-image-title-offset-x),
					var(--large-image-title-offset-y)
			);

    color: var(--large-title-color);
    font-size: var(--large-title-font-size);
    font-weight: var(--large-title-font-weight);
    line-height: var(--large-title-line-height);
    text-align: center;
}


/* =========================================================
   GALLERY ITEM — TWO-LINE CAPTIONS
   ========================================================= */

.haversham-gallery-item .gallery-caption {
    display: block;
    width: 100%;
    text-align: center;
    line-height: 1.15;
}

.haversham-gallery-item .gallery-caption-bird {
	display: block;
	font-family: var(--font-heading);
	font-size: 18px;
	font-weight: 700;
}
.haversham-gallery-item .gallery-caption-title {
    display: block;
    margin-top: -12px; /* Controls distance between line 1 and line 2 */
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {
    .haversham-gallery {
        --filter-columns: 3;
        --gallery-columns: 4;

        --gallery-column-gap: 20px;
        --gallery-row-gap: 22px;

        --large-container-max-width: 900px;
    }
}

/* =========================================================
   LARGE PHONE
   ========================================================= */

@media (max-width: 767px) {
    .haversham-gallery {
        --filter-columns: 3;
        --gallery-columns: 3;

        --gallery-column-gap: 20px;
        --gallery-row-gap: 22px;

        --large-container-max-width: 900px;
    }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {
    .haversham-gallery {
        --filter-columns: 2;
        --filter-gap-x: 8px;
        --filter-gap-y: 8px;

        --filter-all-width: 140px;
        --filter-button-height: 48px;
        --filter-font-size: 13px;

        --gallery-columns: 2;
        --gallery-column-gap: 0px;
        --gallery-row-gap: 20px;

        --thumbnail-width: 100%;

        --large-container-margin-top: 36px;
        --large-title-font-size: 22px;

        --thumbnail-shadow-y: 5px;
        --thumbnail-shadow-blur: 14px;

        --large-image-shadow-y: 8px;
        --large-image-shadow-blur: 20px;
    }
}


/* =========================================================
   ARTIST'S TOOLKIT — "BOOK PAGE" POSITIONING
   ========================================================= */

.toolkit-position-book {
	/* Shared positioning for all book pages */
	.toolkit-position-book {
	scroll-margin-top: 90px;
}
}


/* =========================================================
   BOOK 10 DECORATIVE ARTWORK
   ========================================================= */

.greetings-portrait {
    display:block;
    width:min(100%,430px);
    margin:0 auto 30px;
}

.gallery-banner-wrap {
    width:min(100%,1050px);
    margin:0 auto 46px;
    text-align:center;
}

.gallery-banner {
    display:block;
    width:100%;
    height:auto;
}

.haversham-gallery-divider {
    width:min(100%,1200px);
    margin:80px auto 20px;
		gallery-divider-offset-x: 0px;
    gallery-divider-offset-y: -90px;
}

.haversham-gallery-divider img {
    display:block;
    width:100%;
    height:auto;
	margin-top: 50px;
}



/* =========================================================
   GREETINGS — TWO-COLUMN BOOK INTRODUCTION
   ========================================================= */

.greetings-section {
    font-family: var(--font-body);
}

.greetings-inner {
    width: min(100%, 1200px);
}

/* =========================================================
   GREETINGS HEADER
   ========================================================= */

.greetings-header h2 {
    margin: 0 0 14px;
    font-family: var(--font-heading);
    font-size: clamp(38px, 4vw, 60px);
    font-weight: 600;
		color: #222222;
    line-height: 1.05;
    letter-spacing: 0;
}

.greetings-divider {
    display: block;
    width: min(100%, 1200px);
    height: auto;
    margin: 0 auto;
}

.greetings-header {
    margin: 0 auto 62px;
    text-align: center;
		font-weight: 600
	
}


.greetings-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(54px, 8vw, 130px);
}

.greetings-cover-column,
.greetings-copy-column {
    min-width: 0;
}

.greetings-cover-column {
    display: flex;
    justify-content: center;
}

.greetings-cover {
    display: block;
    width: min(100%, 500px);
    height: auto;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
}

.greetings-copy-column {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.greetings-portrait {
    display: block;
    width: min(100%, 330px);
    height: auto;
    margin: 0 auto 22px;
}

.greetings-copy {
    width: min(100%, 520px);
    text-align: left;
}

.greetings-copy h3 {
    margin: 0 0 22px;
    font-family: var(--font-heading);
    font-size: clamp(30px, 3vw, 42px);
    font-weight: 400;
    line-height: 1.1;
    text-align: center;
}

.greetings-copy p {
    margin: 0 0 18px;
    font-family: var(--font-body);
    font-size: clamp(20px, 1.75vw, 27px);
    font-weight: 400;
    line-height: 1.15;
}

.greetings-copy p:last-child {
    margin-bottom: 0;
}

/* =========================================================
   COLOR REFERENCE HEADER — 
   ========================================================= */

.color-images-section {
    font-family: var(--font-body);
}

.color-images-inner {
    width: min(100%, 1200px);
}

.color-images-header {
    margin: 0 auto 62px;
    text-align: center;
}

.color-images-header h2 {
    margin: 0 0 14px;
    font-family: var(--font-heading);
    font-size: clamp(38px, 4vw, 60px);
    font-weight: 600;
		color: #222222;
    line-height: 1.05;
    letter-spacing: 0;
}

.color-images-divider {
    display: block;
    width: min(100%, 980px);
    height: auto;
    margin: 30px auto;
}



@media (max-width: 900px) {
    .greetings-header {
        margin-bottom: 44px;
    }

    .greetings-grid {
        column-gap: 42px;
    }

    .greetings-cover {
        width: min(100%, 420px);
    }

    .greetings-portrait {
        width: min(100%, 270px);
    }
}

@media (max-width: 700px) {
    .greetings-header {
        margin-bottom: 34px;
    }

    .greetings-header h2 {
        font-size: 36px;
    }

    .greetings-grid {
        grid-template-columns: 1fr;
        row-gap: 46px;
    }

    .greetings-cover {
        width: min(82vw, 440px);
    }

    .greetings-portrait {
        width: min(66vw, 300px);
        margin-bottom: 18px;
    }

    .greetings-copy {
        width: min(100%, 500px);
        padding: 0 8px;
    }

    .greetings-copy h3 {
        font-size: 32px;
    }

    .greetings-copy p {
        font-size: 20px;
        line-height: 1.22;
    }

}



/* =========================================================
   SCROLL TO TOP
   ADD ONCE AT THE END OF haversham-main.css
   ========================================================= */

#haversham-scroll-top {
    position: fixed !important;
    right: 28px !important;
    bottom: 28px !important;
    z-index: 2147483647 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 52px !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 50% !important;

    background: #bf5415 !important;
    color: #ffffff !important;

    font-family: Arial, sans-serif !important;
    font-size: 22px !important;
    line-height: 1 !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    cursor: pointer !important;
    transform: translateY(14px) !important;

    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.3) !important;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease,
        background-color 0.3s ease !important;
}

#haversham-scroll-top.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

#haversham-scroll-top:hover,
#haversham-scroll-top:focus-visible {
    background: #222222 !important;
}

/* =========================================================
   MAIN FOOTER
   ========================================================= */

.footer-main,
.footer-main-content {
    background-color: var(--haversham-cream);
    color: var(--haversham-text);
}

.footer-main-content {
    padding: 20px 20px 20px;
}

.footer-main .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.footer-brand-link {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    margin: 0 0 22px;
}

.footer-brand-logo {
    display: block;

    width: 160px;
    max-width: 80%;
    height: auto;
    margin: 0;

    transform-origin: center center;
    transition: transform 0.3s ease;
}

.footer-brand-link:hover .footer-brand-logo,
.footer-brand-link:focus-visible .footer-brand-logo {
    transform: scale(1.05);
}

.footer-brand-link:hover .footer-brand-logo,
.footer-brand-link:focus-visible .footer-brand-logo {
    transform: scale(1.05);
}

.footer-main-copyright {
    margin: 0;
    color: var(--haversham-text);
}

.footer-main,
.footer-main-content,
.page-footer {
    border-top: 0 !important;
    outline: none !important;
}

.footer-main {
    box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.16);
    position: relative;
    z-index: 2;
}