/* ── the move · zine edition ───────────────────────────── */

:root {
    --cream: #f4f1e8;
    --cream-deep: #ece7d6;
    --ink: #14130f;
    --ink-soft: #2a2824;
    --muted: #6b6a62;
    --outline: #14130f;

    --lime:    #d4ff3a;
    --hot:     #ff8ab8;
    --cyan:    #9ee8e0;
    --lavender:#c8b8ff;
    --butter:  #ffe066;
    --sky:     #aac9ff;
    --coral:   #ff8b5e;
    --sage:    #c5d8a4;
}

html, body { background: var(--cream); }

body {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

.font-display {
    font-family: 'Archivo Black', 'Plus Jakarta Sans', system-ui, sans-serif;
    letter-spacing: -0.02em;
    font-weight: 900;
}
.font-mono {
    font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
}

.line-clamp-2 {
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box; -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; overflow: hidden;
}

/* ── Toast ── */
#toast { animation: toastIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes toastIn {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ── Card ── colored block, hard outline, puzzle notch ── */
.event-card {
    position: relative;
    background: var(--card-bg, #fff);
    color: var(--card-fg, var(--ink));
    border: 1.5px solid var(--ink);
    border-radius: 26px;
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}
.event-card:hover {
    transform: translate(-2px, -3px);
    box-shadow: 6px 8px 0 var(--ink);
}
.event-card .card-img-wrap { transition: transform 0.4s ease; }
.event-card:hover .card-img-wrap img { transform: scale(1.04); }

/* notch corner: a small "bite" out of top-right where the heart sits */
.event-card.has-notch::before {
    content: "";
    position: absolute;
    top: -1.5px;
    right: -1.5px;
    width: 64px; height: 64px;
    background: var(--cream);
    border: 1.5px solid var(--ink);
    border-top-right-radius: 26px;
    border-bottom-left-radius: 26px;
    z-index: 2;
}
.event-card.has-notch .heart-btn {
    z-index: 3;
    top: 10px;
    right: 10px;
}

/* ── Heart ── */
.heart-btn {
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.heart-btn:hover { transform: scale(1.12) rotate(-6deg); }
.heart-btn:active { transform: scale(0.9); }

/* ── Category color tokens (zine palette) ── */
[data-cat="Comedy"]          { --card-bg: var(--hot);      --card-fg: var(--ink); --tag-bg: var(--ink); --tag-fg: var(--cream); }
[data-cat="Music"]           { --card-bg: var(--lavender); --card-fg: var(--ink); --tag-bg: var(--ink); --tag-fg: var(--cream); }
[data-cat="Dance"]           { --card-bg: var(--hot);      --card-fg: var(--ink); --tag-bg: var(--ink); --tag-fg: var(--cream); }
[data-cat="Art"]             { --card-bg: var(--cyan);     --card-fg: var(--ink); --tag-bg: var(--ink); --tag-fg: var(--cream); }
[data-cat="Food & Drink"]    { --card-bg: var(--butter);   --card-fg: var(--ink); --tag-bg: var(--ink); --tag-fg: var(--cream); }
[data-cat="Tech"]            { --card-bg: var(--sky);      --card-fg: var(--ink); --tag-bg: var(--ink); --tag-fg: var(--cream); }
[data-cat="Outdoor"]         { --card-bg: var(--sage);     --card-fg: var(--ink); --tag-bg: var(--ink); --tag-fg: var(--cream); }
[data-cat="Film"]            { --card-bg: var(--ink);      --card-fg: var(--cream); --tag-bg: var(--lime); --tag-fg: var(--ink); }
[data-cat="Performing Arts"] { --card-bg: var(--coral);    --card-fg: var(--ink); --tag-bg: var(--ink); --tag-fg: var(--cream); }
[data-cat="Workshop"]        { --card-bg: var(--lime);     --card-fg: var(--ink); --tag-bg: var(--ink); --tag-fg: var(--cream); }
[data-cat="Market"]          { --card-bg: var(--coral);    --card-fg: var(--ink); --tag-bg: var(--ink); --tag-fg: var(--cream); }
[data-cat="Community"]       { --card-bg: var(--sage);     --card-fg: var(--ink); --tag-bg: var(--ink); --tag-fg: var(--cream); }
[data-cat="Other"]           { --card-bg: #fff;            --card-fg: var(--ink); --tag-bg: var(--ink); --tag-fg: var(--cream); }

.cat-pill {
    background: var(--tag-bg, var(--ink));
    color: var(--tag-fg, var(--cream));
    border: 1.5px solid var(--ink);
}
.cat-pill-filter {
    background: var(--card-bg, var(--ink));
    color: var(--card-fg, var(--cream));
    border: 1.5px solid var(--ink);
}

/* ── Featured/hero card variant ── */
.event-card.is-hero {
    border-radius: 32px;
}
.event-card.is-hero .card-title {
    font-size: clamp(2.25rem, 4vw, 3.5rem);
    line-height: 0.95;
}

/* ── Image area inside cards ── */
.card-img-wrap {
    position: relative;
    overflow: hidden;
    background: var(--card-bg, var(--cream-deep));
    border-bottom: 1.5px solid var(--ink);
}
.card-img-wrap img {
    width: 100%; height: 100%; object-fit: cover;
    filter: contrast(1.05) saturate(1.05);
    transition: transform 0.4s ease;
}
.placeholder-img {
    background:
      repeating-linear-gradient(45deg,
        rgba(0,0,0,0.05) 0px, rgba(0,0,0,0.05) 12px,
        transparent 12px, transparent 24px),
      var(--card-bg, var(--cream-deep));
    color: var(--card-fg, var(--ink));
}

/* ── Filter pills ── */
.filter-pill {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border: 1.5px solid var(--ink);
    background: transparent;
    color: var(--ink);
}
.filter-pill:hover {
    transform: translate(-1px, -1px);
    box-shadow: 2px 2px 0 var(--ink);
}
.filter-pill.is-active {
    background: var(--ink);
    color: var(--cream);
}
.filter-pill.is-active.cat-pill-filter {
    background: var(--card-bg, var(--ink));
    color: var(--card-fg, var(--cream));
}

/* ── Big nav pill ── */
.nav-pill {
    border: 1.5px solid var(--ink);
    background: transparent;
    color: var(--ink);
    transition: all 0.15s ease;
    position: relative;
}
.nav-pill.is-active {
    background: var(--ink);
    color: var(--cream);
}

/* ── Buttons ── */
.btn-primary {
    background: var(--ink);
    color: var(--cream);
    border: 1.5px solid var(--ink);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 var(--ink);
}
.btn-primary:active {
    transform: translate(0, 0);
    box-shadow: none;
}
.btn-ghost {
    background: transparent;
    color: var(--ink);
    border: 1.5px solid var(--ink);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-ghost:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 var(--ink);
    background: var(--cream);
}
.btn-pop {
    background: var(--lime);
    color: var(--ink);
    border: 1.5px solid var(--ink);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-pop:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 var(--ink);
}

/* ── Inputs ── */
.input-zine, .select-zine {
    border: 1.5px solid var(--ink);
    background: #fff;
    color: var(--ink);
}
.input-zine:focus, .select-zine:focus {
    outline: none;
    box-shadow: 3px 3px 0 var(--ink);
    transform: translate(-1px, -1px);
}

select.select-zine {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2314130f' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

/* ── Scrollbar hide ── */
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }

/* ── Reason badge (For You) ── */
.reason-badge {
    background: var(--lime);
    border: 1.5px solid var(--ink);
    color: var(--ink);
}

/* ── Sticker / accent ── */
.sticker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--ink);
    border-radius: 9999px;
    background: var(--cream);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    font-size: 11px;
    padding: 5px 10px;
}
.sticker.sticker-pop {
    background: var(--lime);
}
.sticker.sticker-hot {
    background: var(--hot);
}

/* ── Marquee strip ── */
.marquee {
    overflow: hidden;
    border-top: 1.5px solid var(--ink);
    border-bottom: 1.5px solid var(--ink);
    background: var(--ink);
    color: var(--cream);
}
.marquee-track {
    display: inline-flex;
    gap: 2.5rem;
    padding: 10px 0;
    white-space: nowrap;
    animation: marquee 38s linear infinite;
    will-change: transform;
}
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.marquee-track > span {
    font-family: 'Archivo Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 13px;
}
.marquee-track > span::after {
    content: "✱";
    margin-left: 2.5rem;
    color: var(--lime);
}

/* ── Day strip ── */
.day-strip {
    border: 1.5px solid var(--ink);
    background: var(--cream);
}

/* ── Big SF stamp ── */
.stamp {
    display: inline-block;
    border: 1.5px solid var(--ink);
    padding: 4px 10px 3px;
    border-radius: 6px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 10px;
    transform: rotate(-2deg);
    background: var(--cream);
}

/* ── Print-style rule ── */
.rule-thick { border-top: 2px solid var(--ink); }
.rule-fine  { border-top: 1px solid var(--ink); }

/* ── For You carousel ── */
.fy-carousel {
    position: relative;
    width: 100%;
    height: 580px;
    perspective: 2000px;
    user-select: none;
    touch-action: pan-y;
    overflow: hidden;
}
.fy-track {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.fy-track.is-dragging { transition: none; }

.fy-slide {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 460px;
    height: 500px;
    margin-left: -230px;
    margin-top: -250px;
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.5s ease,
                filter 0.5s ease;
    will-change: transform;
}
.fy-track.is-dragging .fy-slide { transition: none; }

.fy-slide .event-card {
    width: 100%;
    height: 100%;
    border-width: 2px;
    box-shadow: 5px 7px 0 var(--ink);
}
.fy-slide.is-active .event-card {
    box-shadow: 8px 10px 0 var(--ink);
}
.fy-slide:not(.is-active) {
    cursor: pointer;
}
.fy-slide:not(.is-active) .event-card {
    pointer-events: none;
}
.fy-slide:not(.is-active) .event-card * {
    pointer-events: none;
}
.fy-slide.is-far { opacity: 0; pointer-events: none; }

/* Carousel chrome */
.fy-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 9999px;
    border: 1.5px solid var(--ink);
    background: var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    cursor: pointer;
}
.fy-nav:hover {
    transform: translateY(-50%) translate(-2px, -2px);
    box-shadow: 4px 4px 0 var(--ink);
    background: var(--lime);
}
.fy-nav.left { left: 12px; }
.fy-nav.right { right: 12px; }
.fy-nav svg { width: 22px; height: 22px; stroke-width: 2.5; }

.fy-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}
.fy-dot {
    width: 32px;
    height: 6px;
    border-radius: 9999px;
    background: var(--ink);
    opacity: 0.18;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease, width 0.3s ease;
    padding: 0;
}
.fy-dot:hover { opacity: 0.4; }
.fy-dot.is-active {
    opacity: 1;
    width: 56px;
    background: var(--ink);
}

.fy-counter {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 11px;
    text-align: center;
    margin-top: 14px;
    color: var(--muted);
}
.fy-counter b { color: var(--ink); font-size: 13px; }

/* Carousel mobile */
@media (max-width: 640px) {
    .fy-carousel { height: 440px; }
    .fy-slide {
        width: calc(100vw - 80px);
        max-width: 340px;
        height: 400px;
        margin-left: calc((100vw - 80px) / -2);
        margin-top: -200px;
    }
    .fy-nav { width: 40px; height: 40px; }
    .fy-nav.left { left: 4px; }
    .fy-nav.right { right: 4px; }
    .fy-nav svg { width: 18px; height: 18px; }
}
@media (min-width: 641px) and (max-width: 900px) {
    .fy-slide {
        width: 380px;
        margin-left: -190px;
    }
}

/* Heart hover bg */
.heart-btn.zine {
    background: var(--cream);
    border: 1.5px solid var(--ink);
}
.heart-btn.zine.is-fav {
    background: var(--hot);
    color: var(--ink);
}