/*
 * Cathy Florist — VALENTINE'S sections. The one dark page (madder-night); primary tags invert.
 * Values are --s-* tokens. SAY IT WITH needs no script: the radio scale drives it with :has().
 */

/* ---- #top: the one dark page. A poster: '14' [the rose in its cone] February ------------
   Desktop: the cone stands from the nav down the centre-left, drawn with a kraft edge; the
   numeral's '4' overlaps its lip; February and the words hold the right-hand columns.
   Phone: the cone first, the numeral overlapping its lower edge, then the words. */
.cf-valhero {
    display: grid; grid-template-columns: repeat(var(--s-grid-cols), minmax(0, 1fr)); column-gap: var(--s-grid-gap);
    grid-template-rows: auto auto minmax(0, 1fr);
    height: var(--s-hero-h); min-height: var(--s-hero-min); max-height: var(--s-hero-max);
    padding: var(--s-space-m) var(--s-gutter-wide) 0; background: var(--s-page); color: var(--s-text); overflow: hidden;
}
.cf-valhero__cone {
    grid-column: var(--s-night-cols); grid-row: 1 / -1; position: relative; z-index: 0;
    /* the cone's outline: four hard drop-shadows of the clipped shape = a kraft edge on the night */
    filter: drop-shadow(var(--s-cone-edge-w) 0 0 var(--s-cone-edge)) drop-shadow(calc(var(--s-cone-edge-w) * -1) 0 0 var(--s-cone-edge))
            drop-shadow(0 var(--s-cone-edge-w) 0 var(--s-cone-edge)) drop-shadow(0 calc(var(--s-cone-edge-w) * -1) 0 var(--s-cone-edge));
}
.cf-valhero__wrap { position: absolute; inset: var(--s-cone-edge-w); }
.cf-valhero__wrap picture { position: absolute; inset: 0; }
.cf-valhero__wrap .cf-photo { object-position: var(--s-night-pos); }
.cf-valhero__date { display: contents; }
.cf-valhero__numeral {
    grid-column: 1 / span 6; grid-row: 1 / 3; align-self: start; justify-self: start; position: relative; z-index: 1;
    margin-top: var(--s-numeral-drop); translate: var(--s-numeral-overlap) 0;
    font-weight: var(--s-w-numeral); font-size: var(--s-size-numeral); line-height: var(--s-leading-numeral);
    letter-spacing: var(--s-track-numeral); font-variant-numeric: tabular-nums;
    font-variation-settings: "opsz" var(--s-opsz-display), "wdth" var(--s-wdth-numeral);
    color: var(--s-tissue);
}
.cf-valhero__month {
    grid-column: var(--s-night-words-cols); grid-row: 1; align-self: start; position: relative; z-index: 1;
    padding-top: var(--s-space-2xl);
    font-family: var(--s-font-voice); font-style: italic; font-weight: var(--s-w-voice);
    font-size: var(--s-size-month); line-height: var(--s-leading-voice); font-variation-settings: normal;
    color: var(--s-petal);
}
.cf-valhero__words {
    grid-column: var(--s-night-words-cols); grid-row: 2; align-self: start; position: relative; z-index: 1;
    display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-space-s); justify-items: start;
    padding-top: var(--s-space-l);
}
.cf-valhero__lede { color: var(--s-petal); }
/* rev 6: a plain caption, not a tag chip (it is not a control) */
.cf-valhero__count {
    margin-top: var(--s-space-xs); padding-top: var(--s-space-xs); box-shadow: inset 0 var(--s-rule-w) 0 var(--s-cone-edge);
    font-weight: var(--s-w-tag); font-size: var(--s-size-tag); line-height: var(--s-leading-tag);
    letter-spacing: var(--s-track-tag); text-transform: uppercase; font-variant-numeric: tabular-nums;
    font-variation-settings: "opsz" var(--s-opsz-body), "wdth" var(--s-wdth-tag);
    color: var(--s-kraft);
}
@media (max-width: 63.99rem) {
    .cf-valhero {
        display: flex; flex-direction: column; height: auto; min-height: 0; max-height: none;
        padding: var(--s-space-2xs) var(--s-gutter) var(--s-space-l);
    }
    .cf-valhero__cone { flex: none; width: var(--s-night-w-phone); height: var(--s-night-h-phone); align-self: center; }
    .cf-valhero__date {
        display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-space-s);
        margin-top: calc(var(--s-night-overlap-phone) * -1); position: relative; z-index: 1;
    }
    .cf-valhero__numeral { margin-top: 0; translate: none; }
    .cf-valhero__month { padding-top: 0; align-self: auto; }
    .cf-valhero__words { gap: var(--s-space-xs); padding-top: var(--s-space-xs); }
}

/* ---- #say: SAY IT WITH ---------------------------------------------------------------------- *
 * rev 6: the picker sits ON the photo it changes. Desktop: the chosen piece's photo at 6/12, the
 * words beside it, and the picker panel overlapping the photo's lower edge. Phone: the title, the
 * photo at 50svh, then the rail over its lower edge — every tap changes a photo in view. */
.cf-say { padding: var(--s-space-section) var(--s-gutter-wide); background: var(--s-page-alt); }
.cf-say__inner {
    display: grid; grid-template-columns: repeat(var(--s-grid-cols), minmax(0, 1fr)); gap: var(--s-space-l) var(--s-grid-gap);
    max-width: var(--s-max); margin-inline: auto; align-items: stretch;
}
.cf-say__inner > * { min-width: 0; }
.cf-say__photos { grid-column: 1 / span 6; grid-row: 1; display: grid; width: min(100%, var(--s-say-photo-max)); justify-self: start; }
.cf-say__photo { grid-area: 1 / 1; position: relative; aspect-ratio: var(--s-ratio-say); overflow: hidden; opacity: 0; transition: opacity var(--s-dur-swap) var(--s-ease-out); }
.cf-say__photo picture { position: absolute; inset: 0; }
.cf-say__words { grid-column: 7 / -1; grid-row: 1; display: flex; flex-direction: column; gap: var(--s-space-m); position: relative; z-index: 1; }
.cf-say__scale {
    margin: auto 0 0 calc((var(--s-grid-gap) + var(--s-say-overlap)) * -1); border: 0; min-width: 0;
    padding: var(--s-space-m) var(--s-space-m) var(--s-space-l); background: var(--s-page);
}
.cf-say__string { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cf-say__string::before {   /* the twine the scale runs along */
    content: ""; position: absolute; left: 0; right: 0; top: calc(var(--s-tap) / 2);
    height: var(--s-twine-w); background: var(--s-twine);
}
.cf-say__stop { position: relative; display: grid; justify-items: start; gap: var(--s-space-2xs); cursor: pointer; min-height: var(--s-tap); }
.cf-say__stop input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cf-say__dot {
    width: var(--s-tap); height: var(--s-tap); display: grid; place-items: center;
}
.cf-say__dot::before {
    content: ""; width: var(--s-say-dot); height: var(--s-say-dot); border-radius: 50%;
    background: var(--s-madder-deep); box-shadow: 0 0 0 var(--s-line-w) var(--s-petal);
    transition: transform var(--s-dur-fast) var(--s-ease-swing), background-color var(--s-dur-fast) var(--s-ease-out);
}
.cf-say__name {
    font-weight: var(--s-w-tag); font-size: var(--s-size-tag); line-height: var(--s-leading-tag);
    letter-spacing: var(--s-track-tag); text-transform: uppercase; color: var(--s-petal);
    font-variation-settings: "opsz" var(--s-opsz-body), "wdth" var(--s-wdth-tag);
}
.cf-say__stop:has(input:checked) .cf-say__dot::before { background: var(--s-pollen); transform: scale(var(--s-say-dot-on)); }
.cf-say__stop:has(input:checked) .cf-say__name { color: var(--s-tissue); }
.cf-say__stop:has(input:focus-visible) .cf-say__dot { outline: var(--s-focus-w) solid var(--s-focus); outline-offset: calc(var(--s-focus-offset) * -1); }

/* The tag hangs from the chosen stop and slides along the twine to the next. */
.cf-say__track { position: relative; margin-top: var(--s-space-xs); }
.cf-say__slider {
    position: relative; left: 0; display: grid; width: var(--s-say-tag-w); min-height: var(--s-say-tag-h);
    transition: left var(--s-dur-swap) var(--s-ease-swing);
}
.cf-say__slider::after { height: var(--s-tag-hole-inset); }
.cf-say__card { grid-area: 1 / 1; display: grid; gap: var(--s-space-2xs); align-content: start; justify-items: start; visibility: hidden; opacity: 0; transition: opacity var(--s-dur-swap) var(--s-ease-out), visibility 0s linear var(--s-dur-swap); }
.cf-say__line { font-size: var(--s-size-lede); }

/* One rule set per stop (four stops, content.php). */
.cf-say:has(.cf-say__stop:nth-child(1) input:checked) .cf-say__photo:nth-child(1),
.cf-say:has(.cf-say__stop:nth-child(2) input:checked) .cf-say__photo:nth-child(2),
.cf-say:has(.cf-say__stop:nth-child(3) input:checked) .cf-say__photo:nth-child(3),
.cf-say:has(.cf-say__stop:nth-child(4) input:checked) .cf-say__photo:nth-child(4) { opacity: 1; }
.cf-say:has(.cf-say__stop:nth-child(1) input:checked) .cf-say__card:nth-child(1),
.cf-say:has(.cf-say__stop:nth-child(2) input:checked) .cf-say__card:nth-child(2),
.cf-say:has(.cf-say__stop:nth-child(3) input:checked) .cf-say__card:nth-child(3),
.cf-say:has(.cf-say__stop:nth-child(4) input:checked) .cf-say__card:nth-child(4) { visibility: visible; opacity: 1; transition: opacity var(--s-dur-swap) var(--s-ease-out); }
@media (min-width: 48rem) {
    .cf-say:has(.cf-say__stop:nth-child(2) input:checked) .cf-say__slider { left: calc((100% - var(--s-say-tag-w)) / 3 * 1); }
    .cf-say:has(.cf-say__stop:nth-child(3) input:checked) .cf-say__slider { left: calc((100% - var(--s-say-tag-w)) / 3 * 2); }
    .cf-say:has(.cf-say__stop:nth-child(4) input:checked) .cf-say__slider { left: calc((100% - var(--s-say-tag-w)) / 3 * 3); }
}
@media (max-width: 63.99rem) {
    .cf-say__photos { grid-column: 1 / span 6; }
    .cf-say__words { grid-column: 7 / -1; }
    .cf-say__scale { margin-left: calc(var(--s-grid-gap) * -2); padding-inline: var(--s-space-s); }
}
@media (max-width: 47.99rem) {
    .cf-say { padding-inline: var(--s-gutter); }
    .cf-say__inner { row-gap: 0; }
    .cf-say__words { display: contents; }
    .cf-say__words > .cf-h2 { grid-column: 1 / -1; grid-row: 1; }
    .cf-say__words > .cf-lede { grid-column: 1 / -1; grid-row: 2; margin: var(--s-space-xs) 0 var(--s-space-m); }
    .cf-say__photos { grid-column: 1 / -1; grid-row: 3; width: 100%; }
    .cf-say__photo { aspect-ratio: auto; height: var(--s-say-photo-h-phone); }
    .cf-say__scale {
        grid-column: 1 / -1; grid-row: 4; position: relative; z-index: 1;
        margin: calc(var(--s-say-overlap) * -1) var(--s-space-s) 0; padding: var(--s-space-s) var(--s-space-s) var(--s-space-m);
    }
    .cf-say__slider { width: 100%; left: 0; }
}

/* ---- #early: order early, beside the campaign's big product (rev 6: a bunch of red roses, 6/12) --- */
.cf-early { padding: var(--s-space-section) var(--s-gutter-wide); background: var(--s-page); }
.cf-early__inner {
    display: grid; grid-template-columns: repeat(var(--s-grid-cols), minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr);
    gap: var(--s-space-l) var(--s-grid-gap); max-width: var(--s-max); margin-inline: auto;
}
.cf-early__inner > * { min-width: 0; }
.cf-early__title {
    grid-column: 1 / span 6; grid-row: 1; align-self: end; font-weight: var(--s-w-display); font-size: var(--s-size-early);
    line-height: var(--s-leading-display); letter-spacing: var(--s-track-display);
    font-variation-settings: "opsz" var(--s-opsz-display), "wdth" var(--s-wdth-tag);
    text-transform: uppercase;
}
.cf-early__photo { grid-column: 7 / -1; grid-row: 1 / -1; position: relative; aspect-ratio: var(--s-ratio-early); overflow: hidden; }
.cf-early__photo picture { position: absolute; inset: 0; }
.cf-early__text { grid-column: 1 / span 5; grid-row: 2; align-self: start; }
.cf-early__also { margin-top: var(--s-space-s); color: var(--s-petal); }
@media (max-width: 63.99rem) {
    .cf-early__title, .cf-early__text, .cf-early__photo { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 47.99rem) {
    .cf-early { padding-inline: var(--s-gutter); }
}