/* =============================================================================
   I LOVE YOU PASS IT ON  —  /ilypio/  (standalone pitch page)
   -----------------------------------------------------------------------------
   Strictly black / white / pink. The page is white. The header block — the hero
   on the left and the sticky signup form on the right — is dark and bleeds full
   width to both screen edges; the form rail stays dark the whole way down so the
   form always sits on dark as it sticks. The left column carries the pitch and
   scrolls; on a narrow screen it all collapses to one stack (hero, form, rest).
   Corners on the site's card radius; every accent is the 8px pink rail.
   ============================================================================= */

body.sj-ilypio-page { background: #ffffff; }
body.sj-ilypio-page .sj-sheet { background-color: #ffffff; margin-bottom: 0 !important; }

.sj-il {
    --white: #ffffff;
    --ink: #111010;
    --pink: #FF00CC;
    --pink-2: #ff53db;
    --text: #17150f;
    --muted: #6d665f;
    --mutedd: rgba(255, 255, 255, .74);
    background: var(--white);
    color: var(--text);
    font-family: var(--font-body);
    line-height: 1.6;
    position: relative;
    overflow-x: clip;
}
/* Headings take their container's colour — stops Astra's global dark heading
   colour from winning over inheritance and going invisible on the dark hero. */
.sj-il h1, .sj-il h2, .sj-il h3 { font-family: var(--font-heading); font-weight: 900; letter-spacing: -.02em; margin: 0; color: inherit; }
.sj-il-kick {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--pink);
    margin: 0 0 13px;
}
.sj-il-center { text-align: center; }

/* breadcrumb (full-width dark bar) */
.sj-il-crumb {
    display: flex; align-items: center; justify-content: center;
    min-height: 50px; padding: 0 26px; margin: 0;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--mutedd); background: var(--ink);
}
.sj-il-crumb a { color: #fff; text-decoration: none; }
.sj-il-crumb a:hover, .sj-il-crumb a:focus { color: var(--pink); }
.sj-il-crumb span { opacity: .45; margin: 0 7px; }

/* -----------------------------------------------------------------------------
   TWO-COLUMN SHELL. No column gap so the two dark cells meet as one band across
   the top; separation comes from each cell's own padding. Backgrounds bleed to
   the screen edges with a wide box-shadow (hero to the left, rail to the right),
   clipped by the wrapper's overflow-x so nothing widens the page.
   ----------------------------------------------------------------------------- */
.sj-il-2col {
    max-width: 1260px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 420px;
    grid-template-areas:
        "hero rail"
        "main rail";
    column-gap: 0;
    align-items: start;
}
.sj-il-hero { grid-area: hero; }
.sj-il-rail { grid-area: rail; align-self: stretch; }
.sj-il-main { grid-area: main; display: flex; flex-direction: column; gap: 22px; min-width: 0; padding: 40px 0 64px; }

/* card image base */
.sj-il-card { display: block; width: 100%; height: auto; border-radius: var(--radius-card); }
.sj-il-cardwrap { position: relative; margin-inline: auto; }
.sj-il-cardwrap .sj-il-card { position: relative; z-index: 1; }

/* -----------------------------------------------------------------------------
   HERO (left, dark, full-bleed left) — single card + pink halo + blurb.
   ----------------------------------------------------------------------------- */
.sj-il-hero {
    position: relative;
    z-index: 0;
    background: var(--ink); color: #fff;
    padding: 48px clamp(30px, 4vw, 52px) 56px;
    text-align: center;
}
/* Dark layer stretched from the hero's right edge out past the left screen edge
   (clipped by the wrapper's overflow-x), so the header fills the left gutter. */
.sj-il-hero::before {
    content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -100vw; right: 0;
    background: var(--ink);
}
.sj-il-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--pink); margin: 0 0 26px; }
.sj-il-cardwrap-hero { width: min(280px, 66%); margin-bottom: 30px; }
.sj-il-cardwrap-hero::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: 150%; height: 150%;
    transform: translate(-50%, -50%) rotate(-6deg);
    background: radial-gradient(ellipse at center, rgba(255, 0, 204, .72), rgba(255, 0, 204, 0) 72%);
    filter: blur(28px); z-index: -1; pointer-events: none;  /* behind the card AND the headline */
}
.sj-il-card-hero { box-shadow: none; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.sj-il-cardwrap-hero:hover .sj-il-card-hero,
.sj-il-cardwrap-hero:active .sj-il-card-hero { transform: scale(1.12); }
.sj-il-cardwrap-hero:hover::before,
.sj-il-cardwrap-hero:active::before { animation: sjIlGlow 1.8s ease-in-out infinite; }
@keyframes sjIlGlow {
    0%, 100% { transform: translate(-50%, -50%) rotate(-6deg) scale(1);    opacity: .8; }
    50%      { transform: translate(-50%, -50%) rotate(-6deg) scale(1.14); opacity: 1; }
}
.sj-il-hero h1 { font-size: clamp(42px, 6vw, 74px); line-height: 1.02; margin: 8px 0 0; color: #fff; }
.sj-il-hero .sj-il-sub { font-family: var(--font-body); font-style: italic; font-size: clamp(20px, 3vw, 28px); color: var(--pink-2); margin: 16px 0 0; }
.sj-il-hero .sj-il-lede { font-size: 18px; color: var(--mutedd); margin: 22px auto 0; max-width: 46ch; text-wrap: balance; }

/* -----------------------------------------------------------------------------
   RIGHT RAIL (dark, full-bleed right, full height) with the sticky form panel.
   ----------------------------------------------------------------------------- */
.sj-il-rail {
    position: relative;
    z-index: 0;
    background: var(--ink);
    padding: 40px clamp(24px, 2.6vw, 40px) 40px;
}
/* Dark layer stretched from the rail's left edge out past the right screen edge,
   full height, so the form's dark background fills the right gutter all the way down. */
.sj-il-rail::before {
    content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: -100vw;
    background: var(--ink);
}
/* White form card lifted off the dark rail — dark text, pink rail. */
.sj-il-join-card {
    position: sticky; top: 24px;
    background: #fff;
    border: 0;
    border-top: 8px solid var(--pink);
    border-radius: var(--radius-card);
    padding: 28px 26px 30px;
    color: var(--text);
    box-shadow: 0 20px 52px rgba(0, 0, 0, .34);
}
.admin-bar .sj-il-join-card { top: 56px; }  /* clear the WordPress admin bar */
.sj-il-join-card h2 { font-size: 26px; margin: 0 0 9px; color: var(--text); }
.sj-il-say { color: var(--muted); font-size: 15.5px; margin: 0 0 22px; }
.sj-il-field { margin: 0 0 14px; }
.sj-il-field label { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--pink); margin: 0 0 7px; }
.sj-il-field label .opt { color: var(--muted); text-transform: none; letter-spacing: 0; }
.sj-il-field input {
    width: 100%; background: #fff; border: 1px solid #d9d3ca;
    border-radius: var(--radius-control); color: var(--text); font-family: var(--font-body); font-size: 16px; padding: 13px 14px;
}
.sj-il-field input::placeholder { color: #a9a29a; }
.sj-il-field input:focus { outline: none; border-color: var(--pink); }
.sj-il-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sj-il-submit { width: 100%; margin-top: 16px; background: var(--pink); color: #fff; border: 0; border-radius: var(--radius-control); font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; padding: 15px; cursor: pointer; transition: transform .15s ease, background .15s ease; }
.sj-il-submit:hover, .sj-il-submit:focus-visible { transform: translateY(-2px); background: #ff2ad6; color: #fff; }
.sj-il-reassure { font-size: 13px; color: var(--muted); text-align: center; margin: 13px 0 0; }
.sj-il-err { color: #c0392b; font-size: 14px; margin: 0 0 16px; }
.sj-il-thanks { text-align: center; padding: 6px 0; }
.sj-il-thanks h2 { font-size: clamp(24px, 4vw, 32px); color: var(--pink); margin: 0 0 12px; }
.sj-il-thanks p { font-size: 16px; color: var(--text); margin: 0; }

/* -----------------------------------------------------------------------------
   LEFT-COLUMN CONTENT — white page, no borders. Full column width; text blocks
   inset their own padding, colour blocks carry the accent.
   ----------------------------------------------------------------------------- */
.sj-il-band { padding: clamp(22px, 3vw, 40px) clamp(24px, 3vw, 46px); }
.sj-il-band h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.03; margin: 0 0 16px; text-wrap: balance; }
.sj-il-band > p { font-size: 17.5px; margin: 0 0 15px; }
.sj-il-band > p:last-child { margin: 0; }
.sj-il-band em { color: var(--pink); font-style: italic; }

/* stat strip */
.sj-il-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; text-align: center; padding: 26px clamp(24px, 3vw, 46px); }
.sj-il-stat b { display: block; font-family: var(--font-heading); font-weight: 900; font-size: clamp(28px, 3.4vw, 42px); line-height: 1; color: var(--pink); }
.sj-il-stat span { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }

/* idea — solid card + soft glow beside the text */
.sj-il-idea { display: grid; grid-template-columns: 290px 1fr; gap: 34px; align-items: center; }
.sj-il-cardwrap-idea { width: 100%; }
/* no glow, no hover — just floating off the page with the form's shadow */
.sj-il-card-feat { box-shadow: 0 20px 52px rgba(0, 0, 0, .34); }
.sj-il-idea-text h2 { margin-bottom: 16px; }
.sj-il-idea-text p { font-size: 17px; margin: 0 0 14px; }
.sj-il-idea-text p:last-child { margin: 0; }

/* pink quote */
.sj-il-quote { background: var(--pink); color: #fff; border-radius: var(--radius-card); text-align: center; padding: clamp(40px, 5vw, 64px) 30px; }
/* All white — kill Astra's default blockquote colour and its left bar (the
   "slash" on the side) so nothing but clean white sits on the pink. */
.sj-il-quote blockquote { font-family: var(--font-heading); font-weight: 900; font-size: clamp(30px, 4vw, 54px); line-height: 1.04; margin: 0 auto; max-width: 16ch; letter-spacing: -.02em; color: #fff; border: 0; padding: 0; }
.sj-il-attr { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin: 22px 0 0; }

/* three ways */
.sj-il-ways { text-align: center; }
.sj-il-ways-head { margin: 0; }
.sj-il-ways-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; }
.sj-il-way { background: #fff; border-top: 8px solid var(--pink); border-radius: 0 0 var(--radius-card) var(--radius-card); padding: 16px 14px 8px; text-align: left; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
/* each box lifts independently on touch/hover, mobile and desktop */
.sj-il-way:hover, .sj-il-way:active { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(0, 0, 0, .12); }
.sj-il-n { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--pink); }
.sj-il-way h3 { font-size: 20px; margin: 6px 0 7px; }
.sj-il-way p { font-family: var(--font-body); font-size: 15px; color: var(--muted); margin: 0; }

/* map — full width of the column, no side padding. Title stays inset. The
   Google My Maps title bar + share/resize buttons are cropped by sizing the
   frame to a fixed window and pulling the iframe up under it. --crop = how much
   of the top to hide; nudge if a sliver peeks or it eats too much map. */
.sj-il-maptitle { text-align: center; margin: 0 0 22px; padding: 0 clamp(24px, 3vw, 46px); }
.sj-il-maptitle h2 { font-size: clamp(26px, 3.4vw, 42px); margin: 0 0 10px; }
.sj-il-maptitle p { color: var(--muted); max-width: 52ch; margin: 0 auto; font-size: 16px; }
.sj-il-maptitle .sj-il-mapnote { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; max-width: none; margin: 14px auto 0; }
.sj-il-mapnote .star { color: var(--pink); }
.sj-il-mapframe {
    --crop-top: 62px;      /* hides Google's title bar at the top */
    --crop-bottom: 14px;   /* half of the earlier 28 — put the rest of the map back */
    height: 454px;         /* the clean window shown between the two crops */
    border-radius: var(--radius-card);
    overflow: hidden;
    background: #000;
    box-shadow: 0 20px 52px rgba(0, 0, 0, .34);   /* floats off the page like the photos */
}
/* Make the iframe taller than the window by both crop amounts and pull it up by
   the top crop, so the window sits in the middle — title bar clipped above, messy
   strip clipped below. */
.sj-il-mapframe iframe { display: block; width: 100%; height: calc(454px + var(--crop-top) + var(--crop-bottom)); border: 0; margin-top: calc(var(--crop-top) * -1); }

/* good deeds callout — pink left rail */
.sj-il-fund { border-left: 8px solid var(--pink); }
.sj-il-fund h2 { font-size: clamp(26px, 3.4vw, 40px); }

/* full-width photo band (the subway shirt shot) */
.sj-il-shot img { display: block; width: 100%; height: auto; border-radius: var(--radius-card); }

/* gallery (dark, masonry) */
.sj-il-gal { background: var(--ink); border-radius: var(--radius-card); padding: clamp(26px, 3vw, 40px); }
.sj-il-gal .sj-il-kick { text-align: center; }
.sj-il-tiles { columns: 3; column-gap: 12px; }
.sj-il-ph {
    width: 100%; margin: 0 0 12px; break-inside: avoid;
    border: 2px dashed rgba(255, 255, 255, .2); border-radius: var(--radius-card);
    display: flex; align-items: center; justify-content: center; text-align: center;
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255, 255, 255, .4); background: rgba(255, 0, 204, .05); padding: 10px;
    position: relative; cursor: pointer;
}
.sj-il-ph-sq   { aspect-ratio: 1 / 1; }
.sj-il-ph-tall { aspect-ratio: 3 / 4; }
.sj-il-ph-wide { aspect-ratio: 4 / 3; }
/* real photos: no dashed placeholder chrome, just the image at its own ratio */
.sj-il-ph-real { display: block; border: 0; background: none; padding: 0; }
.sj-il-ph-real img { display: block; width: 100%; height: auto; border-radius: var(--radius-card); }
.sj-il-ph:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.sj-il-ph-slot { pointer-events: none; }

/* Caption bubble — pops up on hover (desktop) or tap (mobile, the tile is
   focusable). The tile's label is the message for now; real photos get real ones. */
.sj-il-bubble {
    position: absolute; left: 50%; bottom: 12px; transform: translate(-50%, 8px);
    min-width: 90px; max-width: 86%;
    background: #fff; color: var(--ink);
    font-family: var(--font-body); font-size: 13px; line-height: 1.35; letter-spacing: 0; text-transform: none;
    padding: 9px 13px; border-radius: var(--radius-control);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
    opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 2;
}
.sj-il-bubble::after {
    content: ""; position: absolute; left: 50%; bottom: -5px; width: 11px; height: 11px;
    background: #fff; transform: translateX(-50%) rotate(45deg);
}
.sj-il-ph:hover .sj-il-bubble,
.sj-il-ph:focus .sj-il-bubble,
.sj-il-ph:focus-visible .sj-il-bubble { opacity: 1; transform: translate(-50%, 0); }

/* bottom promo banner — the tall graphic kept whole and centred, with a blurred
   copy of itself filling the space beside it so desktop isn't a skinny strip */
.sj-il-promo {
    position: relative; overflow: hidden;
    border-radius: var(--radius-card);
    background: #2a0a18;
    display: flex; justify-content: center; align-items: center;
    margin: -22px 0;   /* cancel the column's gap so it sits tight, both breakpoints */
}
.sj-il-promo::before {
    content: ""; position: absolute; inset: 0;
    background: var(--promo-img) center / cover no-repeat;
    filter: blur(38px) brightness(.55);
    transform: scale(1.15);
}
.sj-il-promo img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
@media (min-width: 861px) {
    .sj-il-promo img { width: auto; max-width: 100%; max-height: 640px; }
    /* square the seams so the promo slots flush between the two rounded blocks:
       gallery keeps its rounded top, signoff keeps its rounded bottom. */
    .sj-il-gal { border-radius: var(--radius-card) var(--radius-card) 0 0; }
    .sj-il-promo { border-radius: 0; }
    .sj-il-signoff { border-radius: 0 0 var(--radius-card) var(--radius-card); }
}

/* signoff (pink) */
.sj-il-signoff { background: var(--pink); color: #fff; border-radius: var(--radius-card); text-align: center; padding: clamp(40px, 5vw, 60px) 30px; }
.sj-il-big { font-family: var(--font-heading); font-weight: 900; font-size: clamp(30px, 4vw, 54px); margin: 0; letter-spacing: -.02em; }
.sj-il-big .sj-il-h { color: #fff; }
.sj-il-from { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .85); margin: 14px 0 0; }
.sj-il-home { display: inline-block; margin-top: 24px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #fff; text-decoration: none; border: 1px solid rgba(255, 255, 255, .5); border-radius: 20px; padding: 11px 20px; }
.sj-il-home:hover, .sj-il-home:focus-visible { background: #fff; color: var(--pink); }

/* -----------------------------------------------------------------------------
   DESKTOP — the header becomes a full-height first screen: one dark screen with
   the hero (centred, bigger card) on the left and the form on the right, plus a
   bouncing cue to scroll. The white two-column content begins below the fold, so
   the dark/white split is a clean horizontal line rather than a dark rail running
   down beside white.
   ----------------------------------------------------------------------------- */
@media (min-width: 861px) {
    /* one dark layer filling exactly the first screen, full width */
    .sj-il::before {
        content: ""; position: absolute; top: 0; left: 0; right: 0;
        height: 100vh; background: var(--ink); z-index: 0;
    }
    .sj-il-crumb, .sj-il-2col { position: relative; z-index: 1; }

    /* the grid cells stop painting their own dark — the layer above does it */
    .sj-il-hero, .sj-il-rail { background: transparent; }
    .sj-il-hero::before, .sj-il-rail::before { display: none; }

    /* hero fills the first screen and centres its content; bigger card */
    /* top-aligned so the eyebrow lines up with the form's pink rail */
    .sj-il-hero {
        min-height: calc(100vh - 50px);
        display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
        padding-top: 40px; padding-bottom: 30px;
    }
    .sj-il-cardwrap-hero { width: min(336px, 74%); }
    /* ~15% wider, and NOT balanced — balance was forcing three equal-length
       lines; natural wrapping gives three lines of different lengths instead. */
    .sj-il-hero .sj-il-lede { max-width: 68%; text-wrap: wrap; }

    /* subway shirt shot: two-thirds width, centred, floating off the page, with
       balanced breathing room above and below */
    .sj-il-shot { display: flex; justify-content: center; margin-bottom: 30px; }
    .sj-il-shot img { width: 66%; box-shadow: 0 20px 52px rgba(0, 0, 0, .34); }
}

/* -----------------------------------------------------------------------------
   MOBILE — one stack: hero, then form, then the rest. Rail stays dark.
   ----------------------------------------------------------------------------- */
@media (max-width: 860px) {
    .sj-il-2col {
        grid-template-columns: 1fr;
        grid-template-areas: "hero" "rail" "main";
    }
    /* Stacked now — the full-bleed layers already fill both edges. Tighten the
       space above the eyebrow, the gap down to the form, and grow the card. */
    .sj-il-hero { padding-top: 28px; padding-bottom: 30px; }
    .sj-il-cardwrap-hero { width: min(336px, 80%); }
    /* Overlap the two dark bands by 1px so no white hairline can show through
       the seam when the card's scale transform forces a repaint. */
    .sj-il-rail { padding-top: 20px; margin-top: -1px; }
    .sj-il-join-card { position: static; box-shadow: 0 16px 40px rgba(0, 0, 0, .3); }

    /* Touch anywhere in the hero (not just the card) to grow + pulse it. */
    .sj-il-hero:hover .sj-il-card-hero,
    .sj-il-hero:active .sj-il-card-hero { transform: scale(1.12); }
    .sj-il-hero:hover .sj-il-cardwrap-hero::before,
    .sj-il-hero:active .sj-il-cardwrap-hero::before { animation: sjIlGlow 1.8s ease-in-out infinite; }
    .admin-bar .sj-il-join-card { top: 24px; }
    .sj-il-main { padding: 34px 0 54px; }
    .sj-il-idea { grid-template-columns: 1fr; gap: 22px; }
    /* full content width on mobile */
    .sj-il-cardwrap-idea { width: 100%; }
    .sj-il-stats, .sj-il-ways-grid { grid-template-columns: 1fr; }
    .sj-il-tiles { columns: 2; }

    /* Full-bleed colour blocks read cleaner edge to edge on mobile, no corner peek. */
    .sj-il-quote, .sj-il-mapframe, .sj-il-gal, .sj-il-signoff, .sj-il-shot img, .sj-il-promo { border-radius: 0; }

    /* balance the space above and below the shirt photo (the band above it has
       bottom padding, the map below starts flush) */
    .sj-il-shot { margin-bottom: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .sj-il-cardwrap-hero:hover::before,
    .sj-il-cardwrap-hero:active::before { animation: none !important; }
    .sj-il-card-hero, .sj-il-card-feat { transition: none !important; }
}