/* Self-hosted display face. */
@font-face {
    font-family: 'Keskiyon Lumisade';
    src: url('../fonts/KeskiyonLumisade.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   home.css
   Scoped to the homepage only. Every rule sits behind
   .HomePage (or body:has(.HomePage)) so nothing else moves.
   Loaded from Pages/Index.cshtml, not from _Layout.
   ============================================================ */

.HomePage {
    --paper-ink: #17161A;
    /* how far the hero art reaches up over the header */
    --hero-rise: 150px;
    /* all drawn from the site palette in style.css */
    --paper-violet: var(--justicePurple);
    --paper-brick: var(--tomatoRed);
    --paper-ochre: var(--justiceOrange);
    --paper-coral: var(--tomatoRed);
    --paper-rule: rgba(23,22,26,.20);
    --paper-lilac: #B7A2E0;
    --display: 'Keskiyon Lumisade', 'Haettenschweiler', 'Arial Narrow', sans-serif;
    --label: 'IBM Plex Sans', 'Segoe UI', sans-serif;
}

/* The paper ground now lives in style.css and applies site-wide. */

/* The shared wrapper adds 40px padding and sand rules. The
   .NoFilterZone class on the page already kills the blur and
   borders; this drops the padding so the strip can run full width. */
.InnerContent:has(.HomePage) {
    padding: 0 !important;
    gap: 0 !important;
}

/* ---------- section 1: hero ---------- */
.HomePage .hero {
    padding-inline: clamp(16px, 4vw, 48px);
    /* Space under the logo before the headline starts. This used to be a
       -22px pull that tucked the type up under the nav, which left only
       8px between the two. */
    padding-block: clamp(20px, 2.4vw, 34px) var(--sectionGap);
    margin-top: 0;
    gap: clamp(24px, 4vw, 56px);
}

/* Keskiyon Lumisade — h1 and the "Care is collective." h2.
   Drop text-transform if its caps are too decorative, and tune
   the 5rem max to taste. */
.HomePage .hero-text h1 {
    font-family: var(--display);
    /* !important because style.css sets h1 to 700 !important, which
       would otherwise faux-bold a font that only ships Regular. */
    font-weight: 400 !important;
    font-size: clamp(3.4rem, 9.2vw, 7.2rem) !important;
    line-height: 1;
    letter-spacing: .01em;
    text-transform: uppercase;
    text-align: left;
    margin: 0 0 clamp(18px, 2.5vw, 28px) !important;
    color: var(--paper-ink) !important;
    text-wrap: balance;
}

.HomePage .hero-text h1 .line-a { display: block; color: var(--paper-violet); }
.HomePage .hero-text h1 .line-b { display: block; color: var(--paper-brick); }
.HomePage .hero-text h1 .line-c { display: block; color: var(--paper-ink); }


/* The art is absolutely positioned across most of the hero rather
   than sitting in its own column, so the type overlaps it. */
.HomePage .hero {
    position: relative;
    min-height: clamp(340px, 42vw, 580px);
}

/* Full-bleed art layer: breaks out of the hero's 1200px container
   so the frame spans the whole section rather than being tied to
   the width of the text beside it. */
.HomePage .hero-image {
    position: absolute;
    /* rises past the top of the hero so the art overlaps the header
       instead of being cut off by it */
    top: calc(-1 * var(--hero-rise));
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    z-index: 0;
    background-image: url('../images/General/FloralFrameBottomRight.png');
    /* portrait art in a landscape box: height drives the scale, and
       the box is now taller by --hero-rise, so this is the 20%+ */
    background-size: auto 100%;
    background-position: right bottom;
    background-repeat: no-repeat;
}

.HomePage .hero-text {
    position: relative;
    z-index: 1;
    max-width: 100%;
    width: 100%;
}

/* the headline gets the full section width; only the running copy
   is held back so it does not collide with the art */
.HomePage .hero-text h1 {
    max-width: 100%;
}

.HomePage .hero-text p {
    max-width: 70%;
    line-height: var(--leading-body);
}

.HomePage .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

/* Same .button element, squared off to match the printed look */
.HomePage .hero-actions .button {
    border-radius: 0;
    padding: 13px 26px;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    background-color: var(--paper-violet);
    border: 2px solid var(--paper-violet);
}

.HomePage .hero-actions .button:hover {
    background-color: var(--paper-brick);
    border-color: var(--paper-brick);
}

.HomePage .hero-actions .button.outline {
    background-color: transparent;
    color: var(--paper-ink) !important;
    border-color: var(--paper-ink);
}

.HomePage .hero-actions .button.outline:hover {
    background-color: var(--paper-ink);
    color: #fff !important;
    border-color: var(--paper-ink);
}

/* ---------- section 2: values strip ---------- */
/* No tinted panel behind the values any more — the page paper runs
   straight through, with only the two hairlines marking the section. */
.HomePage .values-strip {
    border-top: 1.5px solid var(--paper-rule);
    border-bottom: 1.5px solid var(--paper-rule);
    background: transparent;
}

.HomePage .values-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding-inline: clamp(16px, 4vw, 48px);
    padding-block: clamp(26px, 3.5vw, 40px);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.HomePage .value {
    padding-inline: clamp(12px, 2vw, 28px);
    border-right: 1.5px dashed var(--paper-rule);
}

.HomePage .value:first-child { padding-left: 0; }
.HomePage .value:last-child { border-right: 0; padding-right: 0; }

/* Icons are black PNGs — masked so they take a brand color
   instead of being recolored by filter guesswork. */
.HomePage .value-icon {
    width: 68px;
    height: 68px;
    margin-bottom: var(--space-md);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left center;
    mask-position: left center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.HomePage .value-icon.i-heart {
    background-color: var(--paper-coral);
    -webkit-mask-image: url('../images/Icons/heart.png');
    mask-image: url('../images/Icons/heart.png');
}

.HomePage .value-icon.i-rainbow {
    background-color: var(--happyYellow);
    -webkit-mask-image: url('../images/Icons/rainbow.png');
    mask-image: url('../images/Icons/rainbow.png');
}

.HomePage .value-icon.i-star {
    background-color: var(--paper-violet);
    -webkit-mask-image: url('../images/Icons/star.png');
    mask-image: url('../images/Icons/star.png');
}

.HomePage .value-icon.i-eye {
    background-color: var(--paper-brick);
    -webkit-mask-image: url('../images/Icons/look.png');
    mask-image: url('../images/Icons/look.png');
}

.HomePage .value p {
    margin: 0;
    font-family: var(--label);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .07em;
    text-transform: uppercase;
    line-height: 1.55;
    color: var(--paper-ink);
}

/* ---------- section 3: care is collective ---------- */
/* Same 1200px track and side padding as the hero and the values
   grid, so all three sections line up on the same edges. */
.HomePage .collective {
    max-width: 1200px;
    margin: 0 auto;
    padding-inline: clamp(16px, 4vw, 48px);
    padding-block: clamp(18px, 2.5vw, 32px);
    display: grid;
    /* The lilac column now carries the acknowledgment, so it is sized as a
       share of the row. max-content would stretch it to the longest line of
       a paragraph and swallow the photo. */
    grid-template-columns: minmax(0, 26%) 1fr;
    align-items: stretch;
    min-height: 144px;
}

/* Same paper, same .7 veil weight as the page ground — just a
   purple hue instead of peach, so it reads as a second sheet
   laid on top rather than a flat block of color. */
.HomePage .col-lilac {
    background-image:
        linear-gradient(rgba(165, 142, 216, .7), rgba(158, 136, 211, .7)),
        url('../images/General/Backgrounds/Paperbackground.jpg');
    background-color: var(--paper-lilac);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    /* The copy starts near the top rather than floating in the middle of
       the sheet, so the block does not read as mostly empty purple. */
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    padding: clamp(14px, 1.6vw, 20px) clamp(18px, 2.2vw, 28px) clamp(20px, 2.4vw, 30px);
}

/* ---------- the acknowledgment, now on the lilac sheet ---------- */
.HomePage .col-ack p {
    margin: 0;
    font-family: var(--label);
    font-size: clamp(14px, 1.3vw, 14.5px);
    font-weight: 500;
    line-height: 1.6;
    color: var(--paper-ink);
}

.HomePage .col-ack .ack-text + .ack-text {
    margin-top: .7em;
}

/* The two nations are the marked part of the block, so they keep the
   brick rule the affirmations used to carry. */
.HomePage .col-ack .ack-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: 14px;
}

.HomePage .col-ack .ack-links a {
    color: var(--paper-ink);
    text-decoration: none;
    border-bottom: 2.5px solid var(--paper-brick);
    padding-bottom: 2px;
    transition: border-color .15s ease;
}

.HomePage .col-ack .ack-links a:hover,
.HomePage .col-ack .ack-links a:focus-visible {
    border-bottom-color: var(--paper-ink);
}

/* The photo fills the whole 80% track; the torn strip is absolutely
   positioned over it, so the two genuinely overlap instead of
   sitting in separate columns. */
.HomePage .col-photo {
    position: relative;
    overflow: hidden;
    min-height: 372px;
    background: var(--paper-ink);
}

.HomePage .col-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.HomePage .col-affirm {
    position: absolute;
    right: 0;
    /* top and bottom pinned so the strip is the full height of the
       row, matching the lilac panel instead of floating short. The extra
       pixel at the foot covers a hairline of photo that showed under the
       scrap's bottom edge. */
    /* Held off the top of the row so the heart clears the part of the
       sheet the crop eats into. */
    top: 15%;
    bottom: -1px;
    width: min(38%, 296px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* the torn top edge comes from the PNG, so the box needs
       headroom for it before the heading */
    padding: clamp(34px, 5%, 56px) clamp(17px, 2.2vw, 27px) clamp(20px, 2.8vw, 32px) clamp(30px, 4.2vw, 58px);
    background-image: url('../images/General/RippedPaper3.webp');
    /* cover crops the scrap to fill the box; 100% 100% stretched it
       and distorted the torn edge. Anchored top so the torn edge is
       always the part that survives the crop. */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,.28));
}

/* ---------- "Care is collective.", now on the torn scrap ---------- */
.HomePage .col-affirm h2 {
    font-family: var(--display);
    font-weight: 400 !important;
    font-size: clamp(1.2rem, 2.3vw, 1.92rem);
    line-height: 1;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-align: left;
    margin: 0;
    color: var(--paper-ink) !important;
}

.HomePage .col-affirm .underline {
    display: block;
    width: 88px;
    height: 3px;
    margin-top: var(--space-sm);
    background: var(--paper-ink);
    border-radius: 2px;
}

.HomePage .col-affirm .heart-mark {
    align-self: flex-start;
    margin-bottom: 12px;
    width: 30px;
    height: 30px;
    background-color: var(--paper-ink);
    -webkit-mask: url('../images/Icons/heart.png') no-repeat center / contain;
    mask: url('../images/Icons/heart.png') no-repeat center / contain;
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
    .HomePage .hero {
        min-height: 0;
        flex-direction: column;
        align-items: flex-start;
        padding-block: clamp(20px, 5vw, 30px) 24px;
    }

    /* style.css gives every .hero-image order:-1 under 768px, which threw the
       art above the headline and made it read as its own block. It stays the
       section's background here, exactly as on desktop: a full-bleed layer
       behind the type rather than a sibling stacked above it. */
    .HomePage .hero-image {
        order: 0;
        position: absolute;
        top: calc(-1 * var(--hero-rise));
        bottom: 0;
        left: auto;
        right: 0;
        /* Half the screen, held to the right edge, so the art reads as the
           section's own background on the right rather than a block. */
        width: 48vw;
        transform: none;
        margin-inline: 0;
        min-height: 0;
        z-index: 0;
        /* contain, not a zoom: 200% blew the plant up so far that none of it
           was legible. The whole plant now fits the right-hand half. */
        background-size: contain;
        background-position: right bottom;
    }

    /* Full width now: the art sits behind the type rather than beside it,
       so there is no column to stay clear of. */
    .HomePage .hero-text,
    .HomePage .hero-text p {
        max-width: 90%;
    }

    .HomePage .hero-text {
        position: relative;
        z-index: 1;
    }
}

@media (max-width: 860px) {
    .HomePage .collective { grid-template-columns: 1fr; }

    .HomePage .col-lilac {
        min-height: 130px;
        padding: clamp(22px, 6vw, 30px) clamp(24px, 7vw, 34px) clamp(26px, 7vw, 36px);
    }

    .HomePage .col-ack p {
        font-size: 16px;
    }

    /* The photo is tall enough now to carry the scrap over it, so the scrap
       sits on the picture pinned to its foot rather than stacking below. */
    .HomePage .col-photo {
        min-height: 0;
        height: clamp(500px, 157vw, 660px);
    }

    .HomePage .col-affirm {
        top: auto;
        bottom: -1px;
        left: 0;
        right: 0;
        width: 100%;
        height: clamp(230px, 56vw, 300px);
        /* centred both ways in the scrap rather than sitting at its foot */
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: clamp(50px, 14vw, 80px) 10px clamp(22px, 5vw, 30px);
    }

    /* As large as "collective." can go without running off the scrap. 3.5x
       the old 24px would be 84px, which measures 597px wide against a 343px
       sheet — the word is a single unbreakable run, so this is the ceiling. */
    .HomePage .col-affirm h2 {
        font-size: clamp(30px, 11.6vw, 52px);
        text-align: center;
    }

    .HomePage .col-affirm .heart-mark {
        align-self: center;
    }

    .HomePage .col-affirm .underline {
        margin-inline: auto;
    }
}

@media (max-width: 760px) {
    .HomePage .values-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px 0;
    }

    .HomePage .value:nth-child(2n) { border-right: 0; padding-right: 0; }
    .HomePage .value:nth-child(3) { padding-left: 0; }

    .HomePage .values-grid {
        padding-bottom: clamp(38px, 11vw, 52px);
    }

    /* Each cell gets its own foot so the copy is not sitting on the next
       row (or the closing rule) when they stack two-up. */
    .HomePage .value {
        padding-bottom: 20px;
    }
}

/* The 100vw art layer would otherwise widen the page. Clipping at
   the body keeps it contained; the hero itself must stay unclipped
   so the art can rise over the header. */
body:has(.HomePage) {
    overflow-x: hidden;
}