/* ==========================================================================
   Our Story (about.php) · Community (ourCommunity.php) · Our Heart (ourHeart.php)
   Builds on assets/css/ekdin.css tokens. Prefix: .st-
   ========================================================================== */

/* ---------- display titles (approved Amoresa + La Luxes pair) ---------- */
.st-title { margin: 0; line-height: 1; color: var(--ek-on-dark); text-align: center; font-weight: 400; }
.st-title .italic-text {
    display: block; position: relative; z-index: 1;
    font-family: var(--ek-font-script) !important; font-style: normal; font-weight: 400;
    font-size: clamp(36px, 3.8vw, 56px); line-height: 1; color: var(--ek-on-dark); text-transform: none;
}
.st-title .bold-text {
    display: block; font-family: var(--ek-font-serif); font-weight: 400; text-transform: uppercase;
    font-size: clamp(44px, 5.5vw, 80px); line-height: .92; margin-top: -.16em; letter-spacing: .01em; color: var(--ek-on-dark);
}

/* ---------- hero shell ---------- */
.st-hero {
    position: relative; overflow: hidden; overflow: clip;
    background: var(--ek-maroon); color: var(--ek-on-dark);
    padding: var(--ek-header-h) 0 0; /* room for the fixed header */
}
.st-hero__inner { position: relative; z-index: 2; }
/* ekdin.css draws a maroon ring on light sections; the heroes and the sign-up band are maroon */
.st-hero :focus-visible, .st-join :focus-visible { outline-color: var(--ek-nude); }

/* floating, touch-reactive collage items
   .st-float (pointer parallax, transform set by ekdin.js) > .st-float__poke (tap wiggle) > .st-float__item (gentle drift) */
.st-stage { position: relative; }
.st-float { position: absolute; left: var(--x, 0); top: var(--y, 0); width: var(--w, 20%); z-index: var(--z, 2); }
.st-float__poke, .st-float__item { display: block; }
.st-float__item {
    animation: st-bob var(--t, 8s) ease-in-out var(--delay, 0s) infinite alternate;
    transition: scale .55s var(--ek-ease), rotate .55s var(--ek-ease);
}
.st-float img { display: block; width: 100%; height: auto; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.st-float:hover .st-float__item { scale: 1.045; rotate: var(--hr, 2deg); }
.st-float__poke.is-poked { animation: st-poke .75s var(--ek-ease); }
@keyframes st-bob {
    from { transform: translate3d(0, 0, 0) rotate(var(--r, 0deg)); }
    to { transform: translate3d(var(--dx, 5px), var(--dy, -11px), 0) rotate(calc(var(--r, 0deg) + var(--dr, 1.6deg))); }
}
@keyframes st-poke {
    0% { transform: none; }
    25% { transform: scale(1.07) rotate(-4deg); }
    55% { transform: scale(.98) rotate(3deg); }
    80% { transform: scale(1.02) rotate(-1deg); }
    100% { transform: none; }
}
.st-ornament img, .st-float[aria-hidden="true"] img { filter: drop-shadow(0 10px 12px rgba(30, 6, 6, .32)); }

/* ---------- OUR STORY hero ---------- */
.st-hero--about .st-hero__inner {
    display: flex; flex-direction: column; align-items: center;
    padding-top: clamp(16px, 2.4vw, 30px); padding-bottom: clamp(24px, 3vw, 38px);
}
.st-stage--about { width: min(760px, 100%); aspect-ratio: 760 / 272; }
.st-photo { border-radius: 14px; box-shadow: 0 22px 44px rgba(30, 6, 6, .38), 0 3px 8px rgba(30, 6, 6, .25); }
.st-float--photo { --z: 2; --dy: -7px; --dx: 3px; --dr: 1deg; }
.st-float--marigold { --z: 3; }
.st-float--pink, .st-float--orange, .st-float--orchid { --z: 3; }
.st-hero--about .st-title { margin-top: clamp(6px, 1.2vw, 16px); }

/* ---------- intro + film ---------- */
.st-intro { background: var(--ek-cream); }
.st-intro__grid {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    gap: clamp(28px, 6vw, 96px); max-width: 1060px;
}
.st-intro__lead p {
    margin: 0 0 .7em; color: var(--ek-ink); font-size: clamp(20px, 2.05vw, 28px); line-height: 1.42; letter-spacing: -.008em;
}
.st-intro__lead p:last-child { margin-bottom: 0; }
.st-film--short { width: clamp(220px, 21vw, 280px); }
.st-film__facade, .st-film__frame {
    position: relative; display: block; overflow: hidden; border-radius: 18px;
    aspect-ratio: 9 / 16; background: var(--ek-brown); box-shadow: var(--ek-shadow);
}
.st-film__facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 1s var(--ek-ease); }
.st-film__facade::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(51, 34, 25, 0) 55%, rgba(51, 34, 25, .35) 100%);
}
.st-film__facade:hover img, .st-film__facade:focus-visible img { scale: 1.04; }
.st-film__play {
    position: absolute; left: 50%; top: 50%; z-index: 1; width: 66px; height: 66px; margin: -33px 0 0 -33px;
    display: grid; place-items: center; border-radius: 50%;
    background: rgba(246, 239, 227, .93); color: var(--ek-maroon);
    box-shadow: 0 10px 26px rgba(30, 6, 6, .3);
    transition: background-color .25s var(--ek-ease), color .25s var(--ek-ease), scale .35s var(--ek-ease);
}
.st-film__play svg { margin-left: 4px; }
.st-film__facade:hover .st-film__play, .st-film__facade:focus-visible .st-film__play { background: var(--ek-maroon); color: var(--ek-on-dark); scale: 1.06; }
.st-film__frame iframe, .st-film__frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.st-film--wide { max-width: 980px; margin: 0 auto; }
.st-film--wide .st-film__facade, .st-film--wide .st-film__frame { aspect-ratio: 16 / 9; }
.st-film__video { display: block; width: 100%; max-height: 80vh; border-radius: 18px; background: var(--ek-brown); }

/* ---------- tabs (values template) with media ---------- */
.st-tabs { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; }
.st-tabs__media { aspect-ratio: 1 / 1; width: 100%; max-width: 500px; }
/* all panels share one grid cell so the block keeps the height of the longest text and the tab buttons
   never move under the finger. Bootstrap's reboot has [hidden] { display: none !important }, hence !important. */
.st-tabs__panels { display: grid; }
.st-tabs__panel { grid-area: 1 / 1; align-self: start; }
.st-tabs__panel[hidden], .st-values__panel[hidden] { display: block !important; visibility: hidden; pointer-events: none; }
.st-tabs__panel[hidden] .ek-lead, .st-values__panel[hidden] .ek-lead { animation: none; }
/* the panel that is open on load shows at once (no fade, so it paints immediately and is not a late LCP);
   story.js adds .is-switched on the first tab change, from then on the text fades in as before */
.st-tabs:not(.is-switched) .ek-tabs__panel .ek-lead, .st-values:not(.is-switched) .ek-tabs__panel .ek-lead { animation: none; }
.st-tabs__panel:focus-visible { outline-offset: 6px; border-radius: 6px; }
.st-tabs__title {
    margin: 0 0 12px; color: var(--ek-ink); font-family: var(--ek-font-ui); font-weight: 700;
    font-size: clamp(26px, 2.7vw, 38px); line-height: 1.12; letter-spacing: -.012em;
}
.st-tabs__panel .ek-lead p { margin: 0 0 .75em; }
.st-tabs__panel .ek-lead p:last-child { margin-bottom: 0; }
.st-tabs__panel .ek-btn--link { margin-top: 0; padding: 24px 0 4px; } /* 44px tap target, underline hugs the words */
.st-tabs__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.st-tabs__actions .ek-btn { min-height: 44px; }
.st-tabs .ek-tabs__tab { min-height: 52px; }
/* tab labels: same treatment as the home page values block (colours come from ekdin.css) */
.st-tabs .ek-tabs__tab::after, .st-values .ek-tabs__tab::after { width: 30px; height: 2px; }
.st-tabs .ek-tabs__tab[aria-selected="true"]::after, .st-values .ek-tabs__tab[aria-selected="true"]::after { background: var(--ek-maroon); }
.st-tabs .ek-tabs__tab:focus-visible, .st-values .ek-tabs__tab:focus-visible { outline-offset: 3px; border-radius: 6px; }

/* ---------- category reminder (About) ---------- */
.st-cats { background: var(--ek-cream); }
.st-cats__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; margin-bottom: clamp(16px, 2vw, 24px); }
.st-cats__title { margin: 0; font-size: clamp(21px, 2.1vw, 29px); max-width: 26ch; }
.st-cats__head .ek-btn--link { padding: 12px 0 4px; }
.st-cats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.5vw, 20px); }
.st-cats__tile { aspect-ratio: 1 / 1; border-radius: var(--ek-radius); }
.st-cats__tile .ek-tile__label { left: 16px; bottom: 14px; font-size: 12px; }

/* ---------- COMMUNITY hero: title + moving photo strip ---------- */
.st-hero--community .st-hero__inner { padding-top: clamp(24px, 3.4vw, 46px); padding-bottom: clamp(18px, 2.4vw, 30px); }
.st-title--community .italic-text { font-size: clamp(40px, 4.4vw, 64px); }
.st-strip {
    /* grows with the viewport width so the 7 photos (each shown once) always out-span the screen and can loop:
       loop needs ~6 x height + 84px >= viewport width, which 17vw always satisfies up to the 440px cap (~2600px wide) */
    --strip-h: clamp(150px, min(17vw, 34vh), 440px);
    position: relative; z-index: 2; overflow: hidden;
    padding-bottom: clamp(22px, 3vw, 38px);
    touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none;
}
.st-strip.is-dragging { cursor: grabbing; }
.st-strip:focus-visible { outline: 2px solid var(--ek-nude); outline-offset: -4px; }
html:not(.ek-js) .st-strip { overflow-x: auto; }
.st-strip__track { display: flex; gap: 12px; width: max-content; padding: 8px 12px 6px; will-change: transform; }
.st-strip.is-static .st-strip__track { margin-inline: auto; } /* ultra-wide screens: row sits centred, not stuck left */
.st-strip__item {
    flex: none; height: var(--strip-h); aspect-ratio: var(--ar, 1); margin: 0;
    border-radius: 12px; overflow: hidden; background: rgba(51, 34, 25, .35);
    box-shadow: 0 12px 26px rgba(30, 6, 6, .28);
    transition: translate .5s var(--ek-ease), rotate .5s var(--ek-ease);
}
.st-strip__item img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: scale .9s var(--ek-ease); }
.st-strip__item:nth-child(odd):hover { translate: 0 -6px; rotate: -1.2deg; }
.st-strip__item:nth-child(even):hover { translate: 0 -6px; rotate: 1.2deg; }
.st-strip__item:hover img { scale: 1.05; }
.st-strip.is-dragging .st-strip__item { translate: none; rotate: none; }
.st-strip__pause {
    position: absolute; right: clamp(12px, 2.4vw, 32px); bottom: calc(clamp(22px, 3vw, 38px) + 14px); z-index: 3;
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 16px;
    border: 1px solid rgba(246, 239, 227, .55); border-radius: 999px;
    background: rgba(51, 34, 25, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    color: var(--ek-on-dark); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
    transition: background-color .25s var(--ek-ease);
}
.st-strip__pause:hover { background: var(--ek-brown); }
.st-strip__pause-icon { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.st-strip__pause.is-paused .st-strip__pause-icon {
    border: 0; width: 0; height: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.st-strip:not(.is-moving) .st-strip__pause:not(.is-paused) { display: none; }

/* community header video (C6): only rendered when a video link is set */
.st-hero--community.has-video { display: flex; flex-direction: column; justify-content: center; min-height: clamp(440px, 72vh, 700px); }
.st-hero__video { position: absolute; inset: 0; z-index: 0; }
.st-hero__video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-hero__video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(51, 34, 25, .35), rgba(51, 34, 25, .55)); }
.st-hero--community.has-video .st-strip { display: none; }

/* ---------- COMMUNITY values (Rhode values template) ---------- */
.st-values-sec { background: var(--ek-cream); }
.st-values {
    display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: end;
    padding: clamp(26px, 4.4vw, 60px); border-radius: var(--ek-radius);
    background: var(--ek-paper); border: 1px solid var(--ek-line); box-shadow: var(--ek-shadow-sm);
}
.st-values__panels { display: grid; align-content: start; }
.st-values__panels > .ek-eyebrow { grid-area: 1 / 1; margin-bottom: clamp(14px, 2vw, 26px); }
.st-values__panel { grid-area: 2 / 1; align-self: start; }
.st-values__title {
    margin: 0 0 14px; color: var(--ek-ink); font-family: var(--ek-font-ui); font-weight: 700;
    font-size: clamp(30px, 3.6vw, 50px); line-height: 1.05; letter-spacing: -.02em;
}
.st-values__panel .ek-lead { max-width: 52ch; }
.st-values__panel .ek-lead p { margin: 0 0 .7em; }
.st-values__list { margin-top: 0; }
.st-values__list .ek-tabs__tab { font-size: clamp(19px, 1.8vw, 25px); padding: 18px 0; min-height: 56px; }

/* ---------- COMMUNITY envelope + sign up (maroon) ---------- */
.st-join {
    background: var(--ek-maroon); color: var(--ek-on-dark);
    padding: clamp(18px, 2.4vw, 32px) 0 clamp(48px, 6vw, 80px);
    overflow: hidden; overflow: clip;
}
.st-join__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }

.st-env { --env-w: clamp(250px, 29vw, 370px); position: relative; width: var(--env-w); max-width: 100%; }
.st-env__stage {
    position: relative; display: block; width: 100%; margin: 0; padding: calc(var(--env-w) * .76 * .74) 0 0;
    border: 0; background: none; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.st-env__stage:focus-visible { outline: 2px solid var(--ek-nude); outline-offset: 10px; border-radius: 14px; }
.st-env__tilt { position: relative; display: block; }
.st-env__shadow {
    position: absolute; left: 6%; right: 6%; bottom: -9%; height: 20%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(30, 6, 6, .55), rgba(30, 6, 6, 0));
    filter: blur(4px); pointer-events: none;
}
.st-env__body {
    position: relative; display: block; width: 100%; aspect-ratio: 1000 / 760;
    rotate: -4deg; perspective: 1500px; perspective-origin: 50% 0%;
}
.st-env__back, .st-env__pocket { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.st-env__back { z-index: 1; }
.st-env__pocket { z-index: 3; filter: drop-shadow(0 -2px 3px rgba(51, 34, 25, .28)); pointer-events: none; }
.st-env__flap {
    position: absolute; left: 0; top: 0; z-index: 4; display: block; width: 100%; height: 65.79%;
    transform-origin: 50% 0; transform: rotateX(0deg); transform-style: preserve-3d;
    transition: rotate .45s var(--ek-ease);
}
.st-env__face {
    position: absolute; inset: 0; display: block; width: 100%; height: 100%;
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.st-env__face--out { filter: drop-shadow(0 3px 3px rgba(51, 34, 25, .25)); }
.st-env__face--in { top: -2px; transform: rotateX(180deg); } /* overlaps the hinge so no seam shows */
.st-env__letter {
    position: absolute; left: 5%; top: 7%; z-index: 2; display: block; width: 90%; height: 80%;
    transform: translateY(0) rotate(0deg) scale(1); transform-origin: 50% 50%;
}
.st-env__paper {
    position: absolute; inset: 0; display: block; overflow: hidden;
    border-radius: 5px; background: linear-gradient(168deg, #fcf8f1 0%, #f6efe3 55%, #efe5d4 100%);
    box-shadow: inset 0 0 0 1px rgba(79, 48, 23, .08), 0 14px 28px rgba(30, 6, 6, .28), 0 2px 6px rgba(30, 6, 6, .18);
    transition: translate .45s var(--ek-ease);
}
.st-env__logo { position: absolute; left: 22%; top: 15%; width: 50%; height: auto; }
.st-env__hand {
    position: absolute; font-family: "Reenie Beanie", var(--ek-font-ui); color: var(--ek-maroon); line-height: 1; white-space: nowrap;
}
.st-env__hand--day { left: 46%; top: 50%; font-size: min(calc(var(--env-w) * .088), 24px); rotate: -3deg; } /* handwriting stays caption-sized */
.st-env__hand--new { right: 9%; bottom: 9%; font-size: min(calc(var(--env-w) * .068), 20px); rotate: -4deg; }
.st-env__hint {
    margin: clamp(14px, 2vw, 22px) 0 0; font-family: "Reenie Beanie", var(--ek-font-ui);
    font-size: 24px; line-height: 1; color: var(--ek-nude); letter-spacing: .02em;
}

/* resting states (the JS animation ends exactly on these values) */
.st-env.is-closed .st-env__stage:hover .st-env__flap { rotate: x 16deg; }
.st-env.is-open .st-env__flap { transform: rotateX(180deg); z-index: 1; }
.st-env.is-open .st-env__letter { transform: translateY(-47%) rotate(2.5deg) scale(1.04); z-index: 5; }
.st-env.is-open .st-env__stage:hover .st-env__paper { translate: 0 -6px; }

.st-join__form { width: min(780px, 100%); margin-top: clamp(14px, 2vw, 26px); }
.st-join__lead { max-width: 34em; margin: 0 auto 18px; color: var(--ek-on-dark); font-size: clamp(15px, 1.2vw, 16.5px); line-height: 1.6; }
.st-join__fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; }
.st-join__input {
    width: 100%; min-height: 52px; padding: 0 22px; border: 1px solid rgba(246, 239, 227, .2); border-radius: 999px;
    background: var(--ek-on-dark); color: var(--ek-ink); font-size: 15px;
    transition: box-shadow .2s, border-color .2s;
}
.st-join__input::placeholder { color: rgba(79, 48, 23, .62); }
.st-join__input:focus { outline: none; border-color: var(--ek-nude); box-shadow: 0 0 0 3px rgba(209, 164, 120, .55); }
.st-join__btn { min-height: 52px; padding-left: 34px; padding-right: 34px; }
.st-join__msg { min-height: 1.5em; margin: 14px 0 0; color: var(--ek-on-dark); font-size: 14px; font-weight: 700; }
.st-join__msg.is-error { color: var(--ek-nude); }
.st-join__hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* honeypot: people never see it */
.st-join__fine { margin: 4px 0 0; color: rgba(246, 239, 227, .78); font-size: 12.5px; }
.st-join__fine a { color: var(--ek-on-dark); text-decoration: underline; text-underline-offset: 3px; }
.st-join__fine a:hover { color: var(--ek-sand); }
/* the envelope sign-up above is this page's newsletter form, so ourCommunity.php sets
   $ek_footer_hide_newsletter and the footer prints no form: close the gap it leaves */
.ek-page--community .ek-footer__sub { margin-bottom: 0; }

/* ---------- OUR HEART hero ---------- */
.st-heart-hero {
    display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center;
    gap: clamp(20px, 4vw, 56px); padding-top: clamp(26px, 3.4vw, 44px); padding-bottom: clamp(34px, 4vw, 54px);
}
.st-stage--heart { width: 100%; max-width: 640px; aspect-ratio: 620 / 400; }
.st-polaroid {
    display: block; padding: 7% 7% 22%; border-radius: 6px;
    background: linear-gradient(180deg, #f7f2e9, #efe8dc);
    box-shadow: 0 18px 30px rgba(30, 6, 6, .34), 0 2px 5px rgba(30, 6, 6, .2);
}
.st-polaroid img { display: block; width: 100%; height: auto; aspect-ratio: 163 / 240; object-fit: cover; border-radius: 3px; }
.st-float--polaroid { --dx: 4px; --dy: -9px; --dr: 1.4deg; }
.st-heart-hero__title { position: relative; display: flex; align-items: center; justify-content: center; min-height: clamp(200px, 22vw, 300px); padding-left: 30%; }
.st-heart-hero__title .st-float--hibiscus { left: 2%; top: 6%; width: 28%; --z: 1; }
.st-heart-hero__title .st-float--orchid2 { left: 0; top: 50%; width: 31%; --z: 1; }
.st-title--heart { position: relative; z-index: 2; }

/* moving collage beside the Our Heart tabs */
.st-collage { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1 / .92; }
.st-print { display: block; padding: 9px; border-radius: 12px; background: var(--ek-paper); box-shadow: 0 18px 34px rgba(51, 34, 25, .2), 0 2px 6px rgba(51, 34, 25, .12); }
.st-print img { display: block; width: 100%; height: auto; border-radius: 6px; }
.st-collage .st-float--print1 { left: 0; top: 4%; width: 64%; --z: 1; }
.st-collage .st-float--print2 { left: 34%; top: 38%; width: 64%; --z: 2; }
.st-collage .st-float--orchid3 { left: 74%; top: 0; width: 20%; --z: 3; }
.st-collage__note {
    position: absolute; left: 2%; bottom: 0; z-index: 3; width: 44%; margin: 0;
    font-family: "Reenie Beanie", var(--ek-font-ui); font-size: clamp(22px, 1.7vw, 24px); line-height: 1.02;
    color: var(--ek-maroon); rotate: -5deg;
}

/* charity spotlight (brown) with the notebook copy as real text */
.st-charity__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.st-charity__copy > .ek-eyebrow { margin-bottom: clamp(22px, 3vw, 34px); }
.st-notebook {
    position: relative; max-width: 560px; rotate: -1.2deg;
    padding: clamp(34px, 4vw, 48px) clamp(24px, 3.6vw, 44px) clamp(28px, 3.4vw, 40px) clamp(54px, 6vw, 74px);
    border-radius: 14px; background: var(--ek-paper); color: var(--ek-ink);
    box-shadow: 0 26px 52px rgba(10, 4, 2, .38), 0 3px 8px rgba(10, 4, 2, .25);
}
.st-notebook::before { /* punched holes */
    content: ""; position: absolute; left: 16px; top: 20px; bottom: 20px; width: 14px;
    background: radial-gradient(circle at 50% 50%, var(--ek-brown) 0 4px, transparent 4.6px) 0 0 / 14px 26px repeat-y;
}
.st-notebook::after { /* spiral coil */
    content: ""; position: absolute; left: -9px; top: 20px; bottom: 20px; width: 34px;
    background: radial-gradient(ellipse 15px 6px at 50% 50%, transparent 52%, #2a1b12 58% 74%, transparent 80%) 0 0 / 34px 26px repeat-y;
}
.st-notebook__label {
    position: absolute; top: -26px; right: clamp(18px, 4vw, 36px); display: block; padding: 8px 18px 6px; border-radius: 8px;
    background: #ece0cf; rotate: 4deg; box-shadow: 0 10px 20px rgba(10, 4, 2, .28);
}
.st-notebook__label img { display: block; width: 66px; height: auto; }
.st-notebook__text p { margin: 0 0 1em; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.65; }
.st-notebook__text p:first-child { font-size: clamp(18px, 1.55vw, 21px); font-weight: 700; line-height: 1.45; color: var(--ek-maroon); padding-right: clamp(84px, 11vw, 130px); }
.st-notebook__text p:last-child { margin-bottom: 0; }
.st-notebook__cta { margin-top: 22px; }
.st-stage--charity { width: 100%; max-width: 420px; aspect-ratio: 1 / .95; justify-self: center; }
.st-stage--charity .st-float--c1 { left: 4%; top: 4%; width: 44%; }
.st-stage--charity .st-float--c2 { left: 50%; top: 20%; width: 44%; }

/* ---------- tablets ---------- */
@media (max-width: 991.98px) {
    .st-tabs { grid-template-columns: 1fr; gap: 28px; }
    .st-tabs__media, .st-collage { justify-self: center; max-width: 460px; }
    .st-tabs__media { aspect-ratio: 4 / 3; max-width: 560px; }
    .st-values { grid-template-columns: 1fr; align-items: start; }
    .st-heart-hero { grid-template-columns: 1fr; }
    .st-heart-hero__title { order: -1; min-height: 0; padding: 4px 0 0; width: 100%; max-width: 480px; margin-inline: auto; } /* flowers stay beside the words */
    .st-heart-hero__title .st-float--hibiscus { left: 2%; top: -2%; width: clamp(58px, 15vw, 112px); }
    .st-heart-hero__title .st-float--orchid2 { left: auto; right: 2%; top: 26%; width: clamp(62px, 16vw, 120px); }
    .st-stage--heart { justify-self: center; }
    .st-charity__grid { grid-template-columns: 1fr; }
    .st-charity__copy { justify-self: center; width: 100%; max-width: 560px; }
    .st-stage--charity { max-width: 360px; aspect-ratio: 1 / .8; }
    .st-notebook { padding-top: 78px; }
    .st-notebook__text p:first-child { padding-right: 0; }
    .st-notebook__label { top: -22px; right: 22px; }
}

/* ---------- tablets only: Our Heart polaroids fan out in one row under the title ---------- */
@media (min-width: 768px) and (max-width: 991.98px) {
    .st-stage--heart { max-width: 720px; aspect-ratio: 620 / 268; }
    .st-stage--heart .st-float { left: var(--tx, var(--x)); top: var(--ty, var(--y)); width: var(--tw, var(--w)); }
}

/* ---------- phones ---------- */
@media (max-width: 767.98px) {
    .st-float { left: var(--mx, var(--x, 0)); top: var(--my, var(--y, 0)); width: var(--mw, var(--w, 20%)); }
    .st-stage--about { width: min(420px, 100%); aspect-ratio: 360 / 262; }
    .st-intro__grid { grid-template-columns: 1fr; justify-items: center; text-align: left; }
    .st-intro__copy { width: 100%; }
    .st-film--short { width: min(250px, 66vw); }
    .st-cats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-join__fields { grid-template-columns: 1fr; }
    .st-join__btn { width: 100%; }
    .st-stage--heart { aspect-ratio: 360 / 330; max-width: 460px; }
    .st-collage { aspect-ratio: 1 / 1; }
    .st-collage .st-float--print1 { top: 2%; }
    .st-collage .st-float--print2 { top: 32%; }
    .st-collage__note { width: 64%; font-size: 22px; }
    .st-strip__pause-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .st-strip__pause { padding: 0; justify-content: center; width: 44px; }
    .st-notebook { rotate: -.6deg; }
}
@media (max-width: 480px) {
    .st-title--community .bold-text { font-size: 11.2vw; }
}
@media (max-width: 360px) {
    .st-charity__copy > .ek-eyebrow { margin-bottom: 36px; } /* the Food For Life badge sits on the notebook's top edge: keep it clear of the eyebrow */
}
@media (max-width: 380px) {
    .st-title .bold-text { font-size: 42px; }
    .st-title--community .bold-text { font-size: 11.2vw; }
    .st-values { padding: 22px 18px; }
}

/* ---------- reduced motion: everything rests in place ---------- */
@media (prefers-reduced-motion: reduce) {
    .st-float__item { animation: none; transform: rotate(var(--r, 0deg)); }
    .st-float__poke.is-poked { animation: none; }
    .st-strip__pause { display: none !important; }
}

/* ---------- COMMUNITY: Our Story / Our Community / Our Passion (image switches with the tab) ---------- */
.st-cv {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center;
}
.st-cv__media { position: relative; aspect-ratio: 624 / 550; border-radius: var(--ek-radius); overflow: hidden; background: var(--ek-sand); box-shadow: 0 18px 44px rgba(51, 34, 25, .14); }
.st-cv__media img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transform: scale(1.04); transition: opacity .7s var(--ek-ease), transform 1.4s var(--ek-ease);
}
.st-cv__media img.is-active { opacity: 1; transform: none; }
.st-cv__panels { display: grid; }
.st-cv__panel { grid-area: 1 / 1; align-self: start; min-height: 8.5em; }
.st-cv__panel[hidden] { display: block !important; visibility: hidden; opacity: 0; pointer-events: none; }
.st-cv__panel:not([hidden]) { animation: ek-fade .5s var(--ek-ease); }
.st-cv__title { margin: 0 0 14px; color: var(--ek-ink); font-weight: 700; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; }
.st-cv__panel .ek-lead { max-width: 48ch; color: var(--ek-ink); }
.st-cv__panel .ek-lead p { margin: 0; }
.st-cv__list { margin-top: clamp(20px, 3vw, 36px); }
.st-cv__list .ek-tabs__tab { font-size: clamp(18px, 1.7vw, 23px); padding: 16px 0; min-height: 56px; }
.st-cv__list .ek-tabs__tab::after { width: 30px; height: 2px; }
.st-cv__list .ek-tabs__tab[aria-selected="true"]::after { background: var(--ek-maroon); }
@media (max-width: 860px) { .st-cv { grid-template-columns: 1fr; } .st-cv__media { aspect-ratio: 4 / 3; } }
@media (prefers-reduced-motion: reduce) { .st-cv__media img { transition: none; } }