/* ============================================================
   HOME PAGE — comic-flavoured: ink lines, halftones, pixel marquee
   The hero and pixel marquee live in home-hero.css (inlined) and the
   shared section heads in components/section-head.css; this file is the rest of the
   page, loaded deferred.
============================================================ */

/* ============================================================
   VALUES STRIP — full-bleed ink band over origin photography

   Layer order, back to front:
     0  .values__photo     the photograph, desaturated
     1  .values__scrim     vertical ink ramp (see note below)
     2  .values__halftone  the existing dot texture
     3  .values__inner     the copy

   The scrim is a vertical ramp rather than a flat wash for a contrast reason.
   Measured against the brightest region of the photo, a flat scrim strong
   enough to keep the pink 01/02/03 numerals at AA (4.5:1) leaves almost no
   photo visible — even at 90% ink they only reach 4.07:1. Ramping instead
   gives the large display headline at the top a light scrim it passes easily,
   and hands the numeral grid at the bottom effectively solid ink, so those
   numerals keep exactly the contrast they had before the photo existed.
   Blur was tried as an alternative and moved contrast by under 0.3.
============================================================ */
.values {
    background: var(--ink);
    color: var(--cream);
    padding: 60px var(--pad-x);
    position: relative;
    overflow: hidden;
}
.values__photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.values__photo picture {
    display: block;
    width: 100%;
    height: 100%;
}
.values__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The cherries sit centre-right in the frame; bias toward them so they
       survive the aggressive crop a narrow viewport applies. */
    object-position: 68% 50%;
    /* brightness() is doing contrast work, not styling. The frame contains a
       sunlit beige jacket whose luminance a scrim alone cannot tame: holding
       the pink numerals at AA over it would need ~99% ink, which erases the
       photo entirely. Pulling the source down first lets a moderate scrim do
       the rest, so the photo stays legible as texture AND the copy keeps its
       contrast. Measured in-browser, not estimated — see the note above. */
    filter: saturate(0.32) brightness(0.38);
}
.values__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* The ramp is steep on purpose. The headline zone (top ~40%) carries only
       large display type, which stays legible over a light scrim, so that is
       where the photograph is allowed to read. By the time the 01/02/03 grid
       starts the scrim is effectively solid ink, because small pink numerals
       over a photograph cannot reach AA any other way — the frame's sunlit
       areas are bright enough that even 0.86 leaves them at 2.9:1. */
    background: linear-gradient(
        to bottom,
        oklch(16.5% 0.007 50 / 0.68) 0%,
        oklch(16.5% 0.007 50 / 0.74) 34%,
        oklch(16.5% 0.007 50 / 0.95) 52%,
        oklch(16.5% 0.007 50 / 0.96) 100%
    );
}
.values__halftone {
    position: absolute;
    top: -40%;
    right: -10%;
    width: 60%;
    aspect-ratio: 1;
    background-image: radial-gradient(var(--cream) 1px, transparent 1.5px);
    background-size: 9px 9px;
    -webkit-mask-image: radial-gradient(circle, black 20%, transparent 65%);
    mask-image: radial-gradient(circle, black 20%, transparent 65%);
    opacity: 0.22;
    pointer-events: none;
    z-index: 2;
}
.values__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    position: relative;
    z-index: 3;
}
.values__head { margin-bottom: 36px; }
.values__head .section__eyebrow { color: var(--pink); }
.values__head .section__eyebrow::before { background: var(--pink); }
.values__head .section__title { color: var(--cream); }
.values__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}
.values__item {
    border-top: 2px solid oklch(96.9% 0.015 88 / 0.18);
    padding-top: 20px;
}
.values__num {
    font-family: var(--font-pixel);
    font-size: 18px;
    color: var(--pink);
    letter-spacing: 0.02em;
    margin-bottom: 14px;
    line-height: 1;
}
.values__item h3 {
    font-family: var(--font-display);
    font-size: 28px;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
}
.values__item p {
    font-size: 14.5px;
    color: oklch(96.9% 0.015 88 / 0.72);
    margin: 0;
    max-width: 34ch;
    line-height: 1.55;
}

/* ============================================================
   SHOP FILTERS
============================================================ */
.filters {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 calc(var(--pad-x) * -1);
    padding: 4px var(--pad-x);
    scrollbar-width: none;
}
.filters::-webkit-scrollbar { display: none; }
.filter {
    padding: 9px 16px;
    border-radius: 999px;
    border: 1.5px solid var(--line);
    background: transparent;
    font-weight: 600;
    font-size: 12.5px;
    color: var(--ink-soft);
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
}
.filter:hover {
    border-color: var(--ink);
    color: var(--ink);
}
/* Listed with :hover so the hover rule above (higher specificity) cannot
   turn the active chip's label ink-on-ink while the pointer rests on it. */
.filter--active,
.filter--active:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--cream);
}
.filter:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}
.card[hidden] { display: none; }
.shop__empty {
    grid-column: 1 / -1;
    padding: 40px var(--pad-x);
    text-align: center;
    color: var(--ink-soft);
    font-size: 14px;
}

/* ============================================================
   DESKTOP — 960px+
============================================================ */
@media (min-width: 960px) {

    /* values */
    .values { padding: 100px var(--pad-x); }
    /* A wide band crops the photo far less, so the subject no longer needs
       biasing to stay in frame. */
    .values__img { object-position: 50% 50%; }
    .values__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 48px;
    }
    .values__num { font-size: 22px; }
    .values__item h3 { font-size: 32px; }
    .values__item p { font-size: 15px; }


    /* filters — wrap instead of scroll on desktop */
    .filters {
        flex-wrap: wrap;
        overflow: visible;
        margin: 0;
        padding: 0;
        gap: 8px;
    }
    .filter { padding: 10px 18px; font-size: 13px; }
}