@charset "UTF-8";
/* CSS Document */
/* ============================================================
   PROJECT.CSS
   Styles for individual project pages (typography, colors,
   hero image, image pairs, intro block).
   Depends on: style.css (base styles, variables, gallery-item)
   ============================================================ */

/* Google Fonts loaded in HTML:xa
   Indie Flower (400)
   Caveat (400, 700)
*/

/* Font utility classes */
.indie-flower-regular {
    font-family: 'Indie Flower', cursive;
    font-weight: 400;
}

.caveat-regular {
    font-family: 'Caveat', cursive;
    font-weight: 400;
}

.caveat-bold {
    font-family: 'Caveat', cursive;
    font-weight: 700;
}

/* ----------------------------------------------------------
   HERO IMAGE with overlaid text
   ---------------------------------------------------------- */

.project-hero {
    max-width: 1200px;
    margin: 0 auto clamp(30px, 4vw, 50px);
    padding: 0;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.project-hero img {
    width: 100%;
    height: clamp(320px, 45vw, 620px);
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

.project-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(24px, 4vw, 60px);
    background: linear-gradient(to right, rgba(26, 28, 31, 0.65) 0%, rgba(26, 28, 31, 0.42) 40%, rgba(26, 28, 31, 0.15) 70%, rgba(26, 28, 31, 0) 100%);
}

.project-hero--canyon .project-hero__title {
    color: #6B7A99 !important;
    text-shadow:
        0 0 8px rgba(0, 0, 0, 0.38),
        0 0 20px rgba(0, 0, 0, 0.25),
        0 2px 12px rgba(0, 0, 0, 0.30);
}

.project-hero--canyon .project-hero__sub {
    color: #8D99BB !important;
    text-shadow:
        0 0 8px rgba(0, 0, 0, 0.38),
        0 0 16px rgba(0, 0, 0, 0.25),
        0 1px 6px rgba(0, 0, 0, 0.30);
}

.project-hero--canyon .project-hero__meta {
    color: #b0b0b0 !important;
    text-shadow:
        0 0 8px rgba(0, 0, 0, 0.38),
        0 0 16px rgba(0, 0, 0, 0.25),
        0 1px 6px rgba(0, 0, 0, 0.30);
}

.project-hero--canyon .project-hero__meta strong {
    color: #8D99BB !important;
}


.project-hero__title {
    font-family: "vektra", sans-serif;
    font-weight: 400;
    font-size: clamp(28px, 4.5vw, 58px);
    color: #C6CFE9;
    margin-bottom: 2px;
    line-height: 1.1;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
    font-smooth: never;
    text-shadow:
        0 0 8px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(0, 0, 0, 0.4),
        0 2px 12px rgba(0, 0, 0, 0.5);
}

.project-hero__sub {
    font-size: clamp(12px, 1.1vw, 15px);
    color: #8D99BB;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 16px;
    line-height: 1.6;
    text-shadow:
        0 0 8px rgba(0, 0, 0, 0.6),
        0 0 16px rgba(0, 0, 0, 0.4),
        0 1px 6px rgba(0, 0, 0, 0.5);
}

.project-hero__meta {
    font-size: clamp(12px, 1vw, 14px);
    color: #b0b0b0;
    margin: 0;
    line-height: 1.8;
    text-shadow:
        0 0 8px rgba(0, 0, 0, 0.6),
        0 0 16px rgba(0, 0, 0, 0.4),
        0 1px 6px rgba(0, 0, 0, 0.5);
}

.project-hero__meta strong {
    color: #8D99BB;
}

/* Always stacked — hide inline, show stacked at all sizes */
.hero-sub-full,
.hero-meta-full {
    display: none;
}

.hero-sub-stack,
.hero-meta-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.project-info .project-description {
    max-width: 100%;
    margin: 0;
}

.project-info {
    max-width: 1200px;
    margin: 0 auto clamp(30px, 4vw, 50px);
    padding: 0;
}

.project-info.project-info--wide {
    max-width: 1200px;
    padding: 0;
}

/* ----------------------------------------------------------
   IMAGE PAIRS
   ---------------------------------------------------------- */

.project-image-pair {
    max-width: 1200px;
    margin: 0 auto clamp(30px, 4vw, 50px);
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(12px, 2vw, 30px);
}

.project-image-pair--three {
    grid-template-columns: 1fr 1fr 1fr;
}

.project-image-pair .gallery-item {
    aspect-ratio: 4 / 3;
    cursor: default;
    border-radius: 8px;
    overflow: hidden;
}

.project-image-pair .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: none;
}

.project-image-pair .gallery-item:hover img {
    transform: none;
    filter: none;
}

/* ----------------------------------------------------------
   BORDERED BOX — matches .bordered-box from style.css
   Used for Typography and Color Palette sections
   ---------------------------------------------------------- */

.project-bordered-box {
    border: 3px solid #515870;
    border-radius: 20px;
    padding: clamp(20px, 3vw, 40px);
    background-color: #1a1c1f;
    position: relative;
    z-index: 1;
}

.project-bordered-box__title {
    font-family: "vektra", sans-serif;
    font-weight: 400;
    font-size: clamp(27px, 3.3vw, 41px);
    color: #6B7A99;
    margin-bottom: clamp(20px, 2.5vw, 32px);
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
    font-smooth: never;
}

/* ----------------------------------------------------------
   TYPOGRAPHY SPECIMENS
   ---------------------------------------------------------- */

.type-specimens {
    display: flex;
    gap: clamp(24px, 4vw, 60px);
    align-items: flex-start;
    flex-wrap: wrap;
}

.type-specimen {
    flex: 1 1 240px;
    min-width: 0;
}

.type-divider {
    width: 1px;
    align-self: stretch;
    background: #454758;
    flex-shrink: 0;
}

.type-label {
    display: inline-block;
    font-size: clamp(10px, 0.9vw, 12px);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8D99BB;
    background-color: rgba(81, 88, 112, 0.3);
    padding: 3px 10px;
    border-radius: 30px;
    margin-bottom: 14px;
    font-family: Arial, sans-serif;
}

.type-display {
    font-size: clamp(28px, 4vw, 48px);
    color: #C6CFE9;
    line-height: 1.1;
    margin-bottom: 18px;
}

.type-weights {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 18px;
    border-top: 1px solid #454758;
    padding-top: 12px;
}

.type-weight-row {
    display: flex;
    align-items: baseline;
    gap: 20px;
}

.weight-name {
    font-family: Arial, sans-serif;
    font-size: clamp(11px, 1vw, 13px);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6B7A99;
    flex-shrink: 0;
}

.weight-sample {
    font-size: clamp(17px, 1.8vw, 22px);
    color: #C6CFE9;
    white-space: nowrap;
}

.type-pangram {
    font-size: clamp(15px, 1.4vw, 18px);
    color: #b0b0b0;
    line-height: 1.6;
    border-top: 1px solid #454758;
    padding-top: 14px;
    margin: 0;
}

/* ----------------------------------------------------------
   COLOR SWATCHES
   ---------------------------------------------------------- */

.color-swatches {
    display: flex;
    gap: clamp(10px, 1.5vw, 20px);
    flex-wrap: nowrap;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.color-swatch {
    flex: 1 1 0%;
    min-width: 0;
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
}

.swatch-block {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.5);
}

.swatch-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.swatch-name {
    font-family: "vektra", sans-serif;
    font-size: clamp(15px, 1.3vw, 18px);
    color: #C6CFE9;
    font-weight: 400;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
    font-smooth: never;
}

.swatch-hex {
    font-family: Arial, sans-serif;
    font-size: clamp(13px, 1.1vw, 15px);
    color: #8D99BB;
    letter-spacing: 0.04em;
    font-weight: bold;
}

.swatch-cmyk,
.swatch-rgb {
    font-family: Arial, sans-serif;
    font-size: clamp(11px, 0.95vw, 13px);
    color: #6B7A99;
    line-height: 1.5;
    white-space: nowrap;
}

.project-bordered-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.project-bordered-box__text p {
    color: #b0b0b0;
    font-size: clamp(15px, 1.4vw, 17px);
    line-height: 1.8;
    margin-bottom: 16px;
}

.project-bordered-box__text p:last-child {
    margin-bottom: 0;
}

.project-bordered-box__images {
    display: flex;
    flex-direction: row;
    gap: clamp(10px, 1.5vw, 20px);
    width: 100%;
    margin-top: 0;
    align-items: center;
}

.project-bordered-box__images img {
    position: static !important;
    width: calc(16.666% - clamp(8px, 1.2vw, 16px)) !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain;
    flex-shrink: 0;
    flex-grow: 1;
}

.project-image-pair .project-bordered-box {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    padding: clamp(20px, 3vw, 40px);
    display: flex;
    flex-direction: column;
}

.project-image-pair .project-bordered-box__title {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.project-image-pair .project-bordered-box img {
    position: absolute;
    top: clamp(80px, 10vw, 110px);
    left: clamp(30px, 4vw, 50px);
    right: clamp(30px, 4vw, 50px);
    width: calc(100% - clamp(60px, 8vw, 100px));
    height: calc(100% - clamp(110px, 14vw, 150px));
    object-fit: contain;
}

/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 1024px) and (orientation: portrait) {

    .project-image-pair {
        grid-template-columns: 1fr 1fr;
    }

    .project-hero__title {
        font-size: clamp(18px, 3.5vw, 38px);
    }

    .project-hero__sub {
        font-size: clamp(10px, 1.2vw, 13px);
    }

    .project-hero__meta {
        font-size: clamp(10px, 1vw, 12px);
    }

    .project-hero__overlay {
        padding: clamp(24px, 4vw, 60px);
        justify-content: center;
    }

    .type-divider {
        width: 100%;
        height: 1px;
        background: #454758;
        align-self: auto;
    }

    .type-specimens {
        flex-direction: column;
        gap: 16px;
    }

    .type-specimen {
        flex: none;
        width: 100%;
    }

    .color-swatches {
        gap: 12px;
        flex-wrap: wrap;
    }

    .color-swatch {
        flex: 1 1 calc(33.333% - 12px);
        min-width: 0;
    }
}

@media (max-width: 480px) and (orientation: portrait) {

    .project-image-pair {
        grid-template-columns: 1fr;
    }

    .project-hero img {
        height: clamp(200px, 55vw, 320px);
    }

    .project-hero__title {
        font-size: clamp(16px, 5vw, 28px);
    }

    .project-hero__sub {
        font-size: clamp(9px, 2.2vw, 12px);
    }

    .project-hero__meta {
        font-size: clamp(9px, 2vw, 11px);
    }

    .project-hero__overlay {
        padding: clamp(20px, 5vw, 40px);
        justify-content: center;
    }

    .project-hero__sub {
        display: flex;
        flex-direction: column;
        gap: 4px;
        letter-spacing: 0.05em;
    }

    .type-divider {
        display: none;
    }

    .type-specimens {
        flex-direction: column;
        gap: 16px;
    }

    .type-specimen {
        flex: none;
        width: 100%;
    }

    .color-swatches {
        gap: 10px;
        flex-wrap: wrap;
    }

    .color-swatch {
        flex: 1 1 calc(33.333% - 10px);
        min-width: 0;
    }

    .swatch-cmyk {
        display: none;
    }
}

/* ----------------------------------------------------------
   FONT UTILITY CLASSES — Camera page
   ---------------------------------------------------------- */

.fascinate-inline-regular {
    font-family: 'Fascinate Inline', cursive;
    font-weight: 400;
}

.budmo-jiggler-regular {
    font-family: 'budmo-jiggler', cursive;
    font-weight: 400;
}

.josefin-sans-regular {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 400;
}

/* ----------------------------------------------------------
   FONT UTILITY CLASSES — Oracle page
   ---------------------------------------------------------- */

.freight-neo-light {
    font-family: 'freight-neo-compressed-pro', sans-serif;
    font-weight: 300;
}

.freight-neo-regular {
    font-family: 'freight-neo-compressed-pro', sans-serif;
    font-weight: 400;
}

.freight-neo-medium {
    font-family: 'freight-neo-compressed-pro', sans-serif;
    font-weight: 500;
}

.zenon-regular {
    font-family: 'zenon', sans-serif;
    font-weight: 400;
}

.zenon-bold {
    font-family: 'zenon', sans-serif;
    font-weight: 700;
}

.myriad-pro-regular {
    font-family: 'myriad-pro', sans-serif;
    font-weight: 400;
}

/* ----------------------------------------------------------
   COLOR PALETTE — can set sublabel
   ---------------------------------------------------------- */

.color-set-label {
    font-family: Arial, sans-serif;
    font-size: clamp(11px, 1vw, 13px);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8D99BB;
    margin: 0 0 16px;
}

.color-set-label + .color-swatches {
    margin-bottom: clamp(24px, 3vw, 40px);
}

.color-set-label + .color-swatches:last-child {
    margin-bottom: 0;
}

/* ----------------------------------------------------------
   FONT UTILITY CLASSES — Paw Pops page
   ---------------------------------------------------------- */

.minion-variable-concept-regular {
    font-family: 'minion-variable-concept', serif;
    font-weight: 400;
}

.minion-variable-concept-bold {
    font-family: 'minion-variable-concept', serif;
    font-weight: 700;
}

/* ----------------------------------------------------------
   FONT UTILITY CLASSES — Snowboard page
   ---------------------------------------------------------- */

.khmer-mn-bold {
    font-family: 'khmer-mn', sans-serif;
    font-weight: 700;
}

.minion-pro-regular {
    font-family: 'minion-pro', serif;
    font-weight: 400;
}

/* ----------------------------------------------------------
   FONT UTILITY CLASSES — Pixel page
   ---------------------------------------------------------- */

.cofo-sans-pixel-regular {
    font-family: 'cofo-sans-pixel', sans-serif;
    font-weight: 400;
}

/* ----------------------------------------------------------
   FONT UTILITY CLASSES — Perfume page
   ---------------------------------------------------------- */

.altesse-std-regular {
    font-family: 'altesse-std', serif;
    font-weight: 400;
}

.amster-regular {
    font-family: 'amster', serif;
    font-weight: 400;
}


/* ----------------------------------------------------------
   HERO META LINKS — centered button row
   ---------------------------------------------------------- */

.project-description--book-links {
    display: flex;
    align-items: center;
    gap: 0;
    padding: clamp(20px, 3vw, 40px) 0;
    background-color: #1a1c1f;
    border: 3px solid #515870;
    border-radius: 20px;
    overflow: hidden;
}

.project-description--book-links .book-publish-note {
    flex: 0 1 55%;
    margin-bottom: 0;
    color: #b0b0b0;
    padding: 0 clamp(20px, 3vw, 40px);
}

.book-links-divider {
    width: 1px;
    height: 80%;
    background: #454758;
    flex-shrink: 0;
    align-self: center;
}

.project-hero__links {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex: 1;
    flex-shrink: 0;
    margin-top: 0;
    padding: 0 clamp(20px, 3vw, 40px);
}

.project-hero__links .btn {
    width: 100%;
    text-align: center;
    white-space: nowrap;
}

@media (max-width: 1024px) and (orientation: portrait) {
    .project-description--book-links {
        flex-direction: column;
        padding: clamp(20px, 3vw, 40px);
        align-items: flex-start;
    }

    .project-description--book-links .book-publish-note {
        padding: 0;
        flex: none;
        width: 100%;
    }

    .book-links-divider {
        display: none;
    }

    .project-hero__links {
        padding: 0;
        width: 100%;
        align-items: flex-start;
        margin-top: 16px;
    }

    .project-hero__links .btn {
        width: auto;
    }
}

@media (max-width: 480px) and (orientation: portrait) {
    .project-description--book-links {
        flex-direction: column;
        padding: clamp(16px, 4vw, 24px);
    }

    .project-hero__links .btn {
        width: 100%;
    }
}

.project-hero--canyon .project-hero__overlay {
    background: linear-gradient(to right, rgba(26, 28, 31, 0.50) 0%, rgba(26, 28, 31, 0.36) 40%, rgba(26, 28, 31, 0.20) 65%, rgba(26, 28, 31, 0) 88%);
}

.project-hero--lookatme .project-hero__title {
    text-shadow:
        0 0 8px rgba(0, 0, 0, 0.38),
        0 0 20px rgba(0, 0, 0, 0.25),
        0 2px 12px rgba(0, 0, 0, 0.30);
}

.project-hero--lookatme .project-hero__meta {
    text-shadow:
        0 0 8px rgba(0, 0, 0, 0.38),
        0 0 16px rgba(0, 0, 0, 0.25),
        0 1px 6px rgba(0, 0, 0, 0.30);
}

.project-hero--perfume .project-hero__title,
.project-hero--candy .project-hero__title {
    text-shadow:
        0 0 8px rgba(0, 0, 0, 0.38),
        0 0 20px rgba(0, 0, 0, 0.25),
        0 2px 12px rgba(0, 0, 0, 0.30);
}

.project-hero--perfume .project-hero__meta,
.project-hero--candy .project-hero__meta {
    text-shadow:
        0 0 8px rgba(0, 0, 0, 0.38),
        0 0 16px rgba(0, 0, 0, 0.25),
        0 1px 6px rgba(0, 0, 0, 0.30);
}

.project-hero--book .project-hero__title,
.project-hero--cats .project-hero__title,
.project-hero--recycle .project-hero__title {
    text-shadow:
        0 0 8px rgba(0, 0, 0, 0.75),
        0 0 20px rgba(0, 0, 0, 0.55),
        0 2px 12px rgba(0, 0, 0, 0.65);
}

.project-hero--book .project-hero__meta,
.project-hero--cats .project-hero__meta,
.project-hero--recycle .project-hero__meta {
    text-shadow:
        0 0 8px rgba(0, 0, 0, 0.75),
        0 0 16px rgba(0, 0, 0, 0.55),
        0 1px 6px rgba(0, 0, 0, 0.65);
}