/*
 * Cathy Florist — NURSERY sections. The field is leaf green. Values are --s-* tokens.
 */

/* ---- #top: panoramic rows; the H1 on a leaf tag; the year along the hero's lower edge ---- */
.cf-nhero {
    position: relative; display: grid; grid-template-columns: repeat(var(--s-grid-cols), minmax(0, 1fr)); column-gap: var(--s-grid-gap);
    grid-template-rows: minmax(0, 1fr) auto;
    height: var(--s-hero-h); min-height: var(--s-hero-min); max-height: var(--s-hero-max);
    padding-inline: var(--s-gutter-wide); background: var(--s-field); overflow: hidden;
}
.cf-nhero__photo { position: absolute; inset: 0 0 var(--s-nursery-strip-h) 0; }
.cf-nhero__photo picture { position: absolute; inset: 0; }
.cf-nhero__photo .cf-photo { object-position: var(--s-tunnel-pos); }
.cf-nhero__panel {
    grid-column: 1 / span 5; grid-row: 1 / span 2; align-self: end; position: relative; z-index: 2;
    margin-bottom: var(--s-space-l);
    display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-space-s); justify-items: start;
}
.cf-nhero__panel .cf-h1 { justify-self: stretch; }
.cf-nhero__now {
    grid-column: 7 / -1; grid-row: 1; align-self: end; justify-self: end; position: relative; z-index: 1;
    display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--s-space-2xs);
    margin-bottom: var(--s-space-s);
}
.cf-nhero__nowlabel { cursor: default; }
.cf-nhero__nowlist { display: flex; flex-wrap: wrap; gap: var(--s-space-2xs); }
.cf-nhero__nowlist li[hidden] { display: none; }

/* The strip: twelve months on the leaf field, the current one on a tissue tag with a pollen dot. */
.cf-nhero__strip {
    grid-column: 6 / -1; grid-row: 2; position: relative; z-index: 1;
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-space-m);
    min-height: var(--s-nursery-strip-h); color: var(--s-on-field);
}
.cf-nhero__month { display: grid; }
.cf-nhero__month span, .cf-nhero__months {
    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-variation-settings: "opsz" var(--s-opsz-body), "wdth" var(--s-wdth-tag);
}
.cf-nhero__month strong {
    font-weight: var(--s-w-display); font-size: var(--s-size-h3); line-height: var(--s-leading-heading);
    font-variation-settings: "opsz" var(--s-opsz-display), "wdth" var(--s-wdth-display);
}
.cf-nhero__months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.cf-nhero__months li {
    position: relative; isolation: isolate; display: grid; place-items: center; height: var(--s-strip-cell-h);
    box-shadow: inset calc(var(--s-rule-w) * -1) 0 0 var(--s-rule-on-field); color: var(--s-on-field-muted);
}
.cf-nhero__months li:last-child { box-shadow: none; }
.cf-nhero__n { display: none; }
.cf-nhero__months li.is-now { color: var(--s-leaf); box-shadow: none; }
.cf-nhero__months li.is-now::before {
    content: ""; position: absolute; inset: 0; z-index: -1; background: var(--s-tissue);
    clip-path: polygon(var(--s-label-cut) 0, 100% 0, 100% 100%, var(--s-label-cut) 100%, 0 calc(100% - var(--s-label-cut)), 0 var(--s-label-cut));
}
.cf-nhero__months li.is-now::after {
    content: ""; position: absolute; left: 50%; top: calc(var(--s-dot) * -1.5);
    width: var(--s-dot); height: var(--s-dot); margin-left: calc(var(--s-dot) / -2); border-radius: 50%; background: var(--s-pollen);
}

@media (max-width: 63.99rem) {
    /* Photo first on phones: the panorama, the leaf tag over its edge, then the strip. */
    .cf-nhero { display: flex; flex-direction: column; height: auto; min-height: 0; max-height: none; padding: 0 0 var(--s-space-s); }
    .cf-nhero__photo { position: relative; inset: auto; height: var(--s-subhero-photo-phone); flex: none; }
    .cf-nhero__panel { margin: calc(var(--s-hero-overlap-phone) * -1) var(--s-gutter) 0; gap: var(--s-space-xs); }
    .cf-nhero__strip { order: 3; grid-template-columns: minmax(0, 1fr); gap: var(--s-space-2xs); padding: var(--s-space-m) var(--s-gutter) 0; min-height: 0; }
    .cf-nhero__now { order: 4; justify-content: flex-start; justify-self: auto; margin: var(--s-space-s) var(--s-gutter) 0; }
    .cf-nhero__m { display: none; }
    .cf-nhero__n { display: inline; }
}

/* ---- #season: THE SEASON GUIDE ---------------------------------------------------------- */
.cf-season__months, .cf-season__usual, .cf-season__state {
    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-variation-settings: "opsz" var(--s-opsz-body), "wdth" var(--s-wdth-tag);
}
.cf-season { padding: var(--s-space-section) var(--s-gutter-wide); background: var(--s-tissue); }
.cf-season__head {
    display: grid; grid-template-columns: repeat(var(--s-grid-cols), minmax(0, 1fr)); gap: var(--s-space-m) var(--s-grid-gap);
    max-width: var(--s-max); margin: 0 auto var(--s-space-xl); align-items: end;
}
.cf-season__head .cf-season__title { grid-column: 1 / span 6; max-width: none; }
.cf-season__intro { grid-column: 7 / -1; display: grid; gap: var(--s-space-s); }
.cf-season__note {
    position: relative; padding-left: var(--s-space-m); max-width: var(--s-measure-lede);
    font-size: var(--s-size-small); color: var(--s-text-muted);
}
.cf-season__note::before {
    content: ""; position: absolute; left: 0; top: calc(var(--s-size-small) * 0.55);
    width: var(--s-dot); height: var(--s-dot); border-radius: 50%; background: var(--s-pollen);
}
.cf-season__guide { max-width: var(--s-max); margin-inline: auto; }
.cf-season__months, .cf-season__row {
    display: grid; align-items: center; column-gap: var(--s-space-3xs);
    grid-template-columns: var(--s-season-label) repeat(12, minmax(0, 1fr)) var(--s-season-link);
}
.cf-season__months { padding-bottom: var(--s-space-xs); color: var(--s-ink-muted); }
.cf-season__months li { text-align: center; position: relative; padding-block: var(--s-space-2xs); }
.cf-season__months li:first-child { grid-column: 2; }
/* This month: madder text and a pollen marker that eases in once. */
.cf-season__months li.is-now { color: var(--s-madder); }
.cf-season__months li.is-now::after {
    content: ""; position: absolute; left: 50%; bottom: calc(var(--s-space-2xs) * -1);
    width: var(--s-dot); height: var(--s-dot); margin-left: calc(var(--s-dot) / -2);
    border-radius: 50%; background: var(--s-pollen);
    transition: transform var(--s-dur-marker) var(--s-ease-swing);
}
.cf-anim .cf-season:not(.is-marked) .cf-season__months li.is-now::after { transform: scale(0); }
.cf-season__rows { display: grid; }
.cf-season__row { padding-block: var(--s-space-xs); box-shadow: inset 0 calc(var(--s-rule-w) * -1) 0 var(--s-rule); }
.cf-season__row:first-child { box-shadow: inset 0 var(--s-rule-w) 0 var(--s-rule), inset 0 calc(var(--s-rule-w) * -1) 0 var(--s-rule); }
.cf-season__flower {
    display: grid; grid-template-columns: var(--s-thumb) minmax(0, 1fr); column-gap: var(--s-space-s); align-items: center;
}
.cf-season__thumb { grid-row: 1 / span 3; width: var(--s-thumb); aspect-ratio: 1; overflow: hidden; }
.cf-season__name {
    font-weight: var(--s-w-heading); font-size: var(--s-size-h3); line-height: var(--s-leading-heading);
    font-variation-settings: "opsz" var(--s-opsz-display), "wdth" var(--s-wdth-display);
}
.cf-season__usual { color: var(--s-ink-muted); }
.cf-season__state { color: var(--s-ink-muted); }
.cf-season__row.is-in .cf-season__state { color: var(--s-leaf); }
.cf-season__row.is-in .cf-season__state::before {
    content: ""; display: inline-block; width: var(--s-dot); height: var(--s-dot); margin-right: var(--s-space-3xs);
    border-radius: 50%; background: var(--s-leaf);
}
.cf-season__bar { display: contents; }
.cf-season__bar li { height: var(--s-season-cell-h); background: var(--s-tissue-deep); position: relative; }
.cf-season__bar li span { display: none; }
/* A run of in-season months reads as one leaf tag: its first month carries the cut end. */
.cf-season__bar li.is-in { background: var(--s-leaf); }
.cf-season__bar li.is-start {
    clip-path: polygon(var(--s-label-cut) 0, 100% 0, 100% 100%, var(--s-label-cut) 100%, 0 calc(100% - var(--s-label-cut)), 0 var(--s-label-cut));
}
.cf-season__bar li.is-now { box-shadow: inset 0 0 0 var(--s-line-w) var(--s-madder); }
.cf-season__bar li.is-now.is-in { box-shadow: inset 0 0 0 var(--s-line-w) var(--s-pollen); }
.cf-season__link { justify-self: end; font-size: var(--s-size-small); }

@media (max-width: 63.99rem) {
    .cf-season__head .cf-season__title, .cf-season__intro { grid-column: 1 / -1; }
    .cf-season__months { display: none; }
    .cf-season__row {
        grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: var(--s-space-xs);
        padding-block: var(--s-space-s);
    }
    .cf-season__flower { grid-column: 1 / -1; }
    .cf-season__bar li { grid-row: 2; }
    .cf-season__bar li span {
        display: grid; place-items: center; height: 100%;
        font-weight: var(--s-w-tag); font-size: var(--s-size-tag); line-height: var(--s-leading-tag);
        color: var(--s-ink-muted);
    }
    .cf-season__bar li.is-in span { color: var(--s-tissue); }
    .cf-season__link { grid-column: 1 / -1; grid-row: 3; justify-self: start; }
}
@media (max-width: 47.99rem) {
    .cf-season { padding-inline: var(--s-gutter); }
    .cf-season__row { column-gap: var(--s-aa); }
}

/* ---- #start: rose rows at 100vw, then seedlings beside the words ----------------------- */
.cf-start { background: var(--s-tissue-deep); padding-bottom: var(--s-space-section); }
.cf-start__wide { position: relative; }
.cf-start__wideframe { height: var(--s-start-wide-h); }
.cf-start__widecap {
    position: absolute; right: var(--s-gutter-wide); bottom: var(--s-space-s); margin: 0;
    padding: var(--s-space-3xs) var(--s-space-xs); background: var(--s-tissue); color: var(--s-ink);
}
.cf-start__row {
    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: calc(var(--s-overlap) * -2) auto 0; padding-inline: var(--s-gutter-wide); align-items: stretch;
}
/* rev 6: a diptych — the green panel and the seedling frame share one height (no dead column) */
.cf-start__row > * { min-width: 0; }
.cf-start__text { grid-column: 1 / span 5; position: relative; z-index: 1; display: grid; gap: var(--s-space-s); }
.cf-start__text { align-content: space-between; }
.cf-start__a { grid-column: 6 / -1; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--s-space-2xs); }
.cf-start__frame { min-height: var(--s-start-frame-h); }
@media (max-width: 47.99rem) { .cf-start__frame { min-height: 0; aspect-ratio: var(--s-ratio-wide); } }
@media (max-width: 63.99rem) {
    .cf-start__text { grid-column: 1 / span 8; }
    .cf-start__a { grid-column: 3 / -1; margin-top: 0; }
}
@media (max-width: 47.99rem) {
    .cf-start__row { padding-inline: var(--s-gutter); margin-top: calc(var(--s-overlap) * -1); }
    .cf-start__text, .cf-start__a { grid-column: 1 / -1; }
    .cf-start__widecap { right: var(--s-gutter); }
}

/* ---- #from-bed: from the bed to the bench (a field band; protea in the cone) ------------- */
.cf-frombed {
    display: grid; grid-template-columns: repeat(var(--s-grid-cols), minmax(0, 1fr)); gap: var(--s-space-l) var(--s-grid-gap);
    align-items: center; padding: var(--s-space-section) var(--s-gutter-wide) 0;
    background: var(--s-field); color: var(--s-on-field); overflow: hidden;
}
.cf-frombed__text { grid-column: 2 / span 5; display: grid; gap: var(--s-space-m); justify-items: start; padding-bottom: var(--s-space-section); }
.cf-frombed__photo { grid-column: 8 / span 4; align-self: end; height: var(--s-frombed-cone-h); }
.cf-frombed__photo .cf-photo { object-position: var(--s-protea-pos); }
@media (max-width: 47.99rem) {
    .cf-frombed { padding-inline: var(--s-gutter); }
    .cf-frombed__text { grid-column: 1 / -1; padding-bottom: 0; }
    .cf-frombed__photo { grid-column: 2 / -2; height: var(--s-frombed-cone-h-phone); }
}
@media (min-width: 48rem) and (max-width: 63.99rem) {
    .cf-frombed__text { grid-column: 1 / span 6; }
    .cf-frombed__photo { grid-column: 7 / -1; }
}