:root{
    --ink:#101010;
    --black:#0b0b0b;

    /* “Print inks” */
    --pink:#d4899e;
    --green:#2d8c2d;
    --gold:#d4a843;

    /* Warmer paper + warm greys */
    --paper:#e9e1d3;        /* warm cream paper */
    --paper2:#ddd2c1;       /* slightly darker paper */
    --paperInk:#191514;     /* text ink on paper */

    --nav-h:64px;

    --shadow-heavy: 0 26px 80px rgba(0,0,0,0.58);
    --shadow-med: 0 18px 44px rgba(0,0,0,0.42);
    --shadow-sticker: 0 12px 22px rgba(0,0,0,0.30);

    --radius:22px;
    --radius2:28px;

    /* Placeholder SVGs */
    --ph-beer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='360' viewBox='0 0 640 360'%3E%3Crect width='640' height='360' fill='%23e9e1d3'/%3E%3Cg opacity='0.9'%3E%3Crect x='252' y='92' width='136' height='190' rx='22' fill='%23191514'/%3E%3Crect x='268' y='112' width='104' height='150' rx='14' fill='%23d4a843'/%3E%3Crect x='388' y='132' width='58' height='110' rx='22' fill='none' stroke='%23191514' stroke-width='16'/%3E%3Crect x='268' y='104' width='104' height='22' rx='11' fill='%23f2eadc'/%3E%3C/g%3E%3Ctext x='26' y='332' font-family='Arial' font-size='20' fill='%23191514' opacity='0.55'%3EPlaceholder: beer icon (SVG)%3C/text%3E%3C/svg%3E");
    --ph-mic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='360' viewBox='0 0 640 360'%3E%3Crect width='640' height='360' fill='%23e9e1d3'/%3E%3Cg opacity='0.92'%3E%3Crect x='280' y='70' width='80' height='150' rx='36' fill='%23191514'/%3E%3Crect x='294' y='92' width='52' height='104' rx='20' fill='%23d4899e'/%3E%3Cpath d='M320 220v46' stroke='%23191514' stroke-width='16' stroke-linecap='round'/%3E%3Cpath d='M280 292h80' stroke='%23191514' stroke-width='16' stroke-linecap='round'/%3E%3Cpath d='M255 250c18 26 43 38 65 38s47-12 65-38' fill='none' stroke='%23191514' stroke-width='14' stroke-linecap='round'/%3E%3C/g%3E%3Ctext x='26' y='332' font-family='Arial' font-size='20' fill='%23191514' opacity='0.55'%3EPlaceholder: mic icon (SVG)%3C/text%3E%3C/svg%3E");
    --ph-bag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='360' viewBox='0 0 640 360'%3E%3Crect width='640' height='360' fill='%23e9e1d3'/%3E%3Cg opacity='0.92'%3E%3Crect x='238' y='118' width='164' height='172' rx='20' fill='%23191514'/%3E%3Crect x='252' y='132' width='136' height='144' rx='16' fill='%232d8c2d'/%3E%3Cpath d='M270 118c0-36 20-54 50-54s50 18 50 54' fill='none' stroke='%23191514' stroke-width='16' stroke-linecap='round'/%3E%3C/g%3E%3Ctext x='26' y='332' font-family='Arial' font-size='20' fill='%23191514' opacity='0.55'%3EPlaceholder: tote icon (SVG)%3C/text%3E%3C/svg%3E");
    --ph-map: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='360' viewBox='0 0 640 360'%3E%3Crect width='640' height='360' fill='%23e9e1d3'/%3E%3Cg opacity='0.92'%3E%3Cpath d='M150 96l110-40 120 46 110-38v240l-110 38-120-46-110 40z' fill='%23191514'/%3E%3Cpath d='M170 112l90-32 120 46 90-30v214l-90 30-120-46-90 32z' fill='%23d4899e' opacity='0.85'/%3E%3Ccircle cx='320' cy='174' r='22' fill='%23191514'/%3E%3Cpath d='M320 132c-28 0-50 22-50 50 0 40 50 96 50 96s50-56 50-96c0-28-22-50-50-50z' fill='%232d8c2d' opacity='0.85'/%3E%3C/g%3E%3Ctext x='26' y='332' font-family='Arial' font-size='20' fill='%23191514' opacity='0.55'%3EPlaceholder: map pin (SVG)%3C/text%3E%3C/svg%3E");
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
section[id]{scroll-margin-top: calc(var(--nav-h) + 18px);}

body{
    background: var(--black);
    color: var(--paper);
    font-family: 'Syne', sans-serif;
    padding-top: var(--nav-h);
    overflow-x:hidden;
    position: relative;
    min-height: 100vh;
}

/* ========= GLOBAL TEXTURE (subtle, warmer) ========= */
body::before{
    content:'';
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:5;
    opacity:0.10;
    background-image:
        radial-gradient(rgba(255,255,255,0.50) 1px, transparent 1px),
        radial-gradient(rgba(0,0,0,0.60) 1px, transparent 1px),
        radial-gradient(900px 520px at 15% 10%, rgba(212,137,158,0.11), transparent 62%),
        radial-gradient(1100px 640px at 85% 20%, rgba(45,140,45,0.10), transparent 64%),
        radial-gradient(1000px 520px at 50% 70%, rgba(212,168,67,0.08), transparent 62%);
    background-size: 13px 13px, 9px 9px, auto, auto, auto;
    background-position: 0 0, 6px 7px, 0 0, 0 0, 0 0;
    mix-blend-mode: overlay;
}

/* ========= TOP BAR ========= */
.topbar{
    position:fixed;
    top:0; left:0; right:0;
    height: var(--nav-h);
    z-index:1000;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 0 16px;
    background: linear-gradient(to bottom, rgba(11,11,11,0.98), rgba(11,11,11,0.88));
    border-bottom: 3px solid rgba(212,137,158,0.85);
    box-shadow: 0 18px 40px rgba(0,0,0,0.58);
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color: var(--paper);
}

.brand img{
    height:34px;
    width:auto;
    display:block;
    filter: drop-shadow(0 10px 18px rgba(0,0,0,0.55));
    transform: rotate(-0.6deg);
}

/* “MENU …” pill (kept, but nicer) */
.pill{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 2px solid rgba(233,225,211,0.16);
    background: rgba(255,255,255,0.03);
    color: var(--paper);
    cursor:pointer;
    box-shadow: var(--shadow-sticker);
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.pill:hover{
    transform: rotate(-1deg) scale(1.02);
    border-color: rgba(212,137,158,0.55);
    background: rgba(212,137,158,0.10);
}
.pill .label{
    font-family:'Bebas Neue', sans-serif;
    letter-spacing:0.22em;
    font-size: 1.02rem;
}
.pill .dots{display:inline-flex;gap:4px;opacity:0.85}
.pill .dots span{width:4px;height:4px;border-radius:50%;background: var(--paper)}

/* ========= HERO POSTER ========= */
.hero{
    padding: 34px 16px 22px;
    position:relative;
    z-index:20;
}
.poster{
    max-width: 980px;
    margin: 0 auto;
    border-radius: var(--radius2);
    overflow:hidden;
    box-shadow: var(--shadow-heavy);
    position:relative;
    border: 2px solid rgba(233,225,211,0.12);
    background:
        radial-gradient(900px 480px at 20% 10%, rgba(212,137,158,0.18), transparent 60%),
        radial-gradient(1200px 700px at 80% 30%, rgba(45,140,45,0.14), transparent 62%),
        linear-gradient(to bottom, rgba(22,20,19,0.92), rgba(11,11,11,0.96));
}
.poster::after{
    content:'';
    position:absolute;
    inset:0;
    opacity:0.22;
    background:
        radial-gradient(700px 520px at 10% 10%, rgba(0,0,0,0.55), transparent 62%),
        radial-gradient(700px 520px at 90% 30%, rgba(0,0,0,0.42), transparent 60%),
        linear-gradient(to bottom, rgba(255,255,255,0.02), rgba(0,0,0,0.10));
    mix-blend-mode:multiply;
    pointer-events:none;
}
.poster-inner{
    position:relative;
    z-index:2;
    padding: 26px 18px 20px;
    display:grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 16px;
    align-items:center;
}

.hero-logo{
    width:min(360px, 70vw);
    transform: rotate(-0.7deg);
    filter: drop-shadow(0 14px 34px rgba(0,0,0,0.6));
}
.hero-logo img{width:100%;height:auto;display:block}

.tagline{
    margin-top: 8px;
    font-family:'Bebas Neue', sans-serif;
    letter-spacing:0.28em;
    font-size: clamp(1.05rem, 2.7vw, 1.55rem);
    color: var(--gold);
    text-transform: uppercase;
}
.meta{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top: 10px;
}
.chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid rgba(233,225,211,0.16);
    background: rgba(255,255,255,0.03);
    color: rgba(233,225,211,0.90);
    font-size: 0.92rem;
    box-shadow: 0 10px 18px rgba(0,0,0,0.35);
}
.chip strong{
    font-family:'Bebas Neue', sans-serif;
    letter-spacing:0.18em;
    font-size: 0.98rem;
    font-weight:400;
    text-transform: uppercase;
}

.hero-cta{
    display:flex;
    flex-direction:column;
    gap: 10px;
    align-items:stretch;
}
.cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: 14px 14px;
    border-radius: 18px;
    text-decoration:none;
    box-shadow: var(--shadow-sticker);
    border: 2px solid rgba(233,225,211,0.12);
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.cta span{
    font-family:'Bebas Neue', sans-serif;
    letter-spacing:0.20em;
    font-size: 1.12rem;
}
.cta.primary{
    background: rgba(212,137,158,0.16);
    color: var(--paper);
    border-color: rgba(212,137,158,0.38);
}
.cta.secondary{
    background: rgba(45,140,45,0.14);
    color: var(--paper);
    border-color: rgba(45,140,45,0.38);
}
.cta:hover{ transform: rotate(-1deg) scale(1.02); }

/* ========= STACK ========= */
.wall{
    max-width: 980px;
    margin: 0 auto;
    padding: 14px 16px 92px;
    position:relative;
    z-index:20;
}
.stack{
    display:grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

/* ========= FLYER CARD ========= */
.flyer{
    border-radius: var(--radius2);
    box-shadow: var(--shadow-med);
    position:relative;
    overflow:hidden;
    border: 2px solid rgba(233,225,211,0.12);
    background: var(--paper);
    color: var(--paperInk);
}

/* printy ink grit */
.flyer::before{
    content:'';
    position:absolute;
    inset:0;
    opacity:0.18;
    background:
        radial-gradient(800px 520px at 10% 15%, rgba(0,0,0,0.22), transparent 62%),
        radial-gradient(800px 520px at 90% 35%, rgba(0,0,0,0.16), transparent 64%),
        linear-gradient(to bottom, rgba(255,255,255,0.06), rgba(0,0,0,0.06));
    mix-blend-mode:multiply;
    pointer-events:none;
}

/* Pink/Green “ink bar” at top */
.flyer-bar{height: 10px; width: 100%;}
.flyer-bar.pink{ background: rgba(212,137,158,0.90); }
.flyer-bar.green{ background: rgba(45,140,45,0.88); }
.flyer-bar.gold{ background: rgba(212,168,67,0.88); }

/* Corner tape */
.tape{
    position:absolute;
    width: 78px;
    height: 24px;
    background: rgba(242,234,220,0.70);
    border: 1px solid rgba(0,0,0,0.12);
    box-shadow: 0 10px 20px rgba(0,0,0,0.18);
    opacity: 0.92;
    z-index:5;
}
.tape.tl{ top:-10px; left:16px; transform: rotate(-7deg); }
.tape.tr{ top:-10px; right:16px; transform: rotate(9deg); }

.flyer-inner{
    position:relative;
    z-index:2;
    padding: 18px 16px 16px;
}

.flyer-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap: 14px;
    margin-bottom: 10px;
}
.flyer-title-img{
    width: clamp(150px, 28vw, 240px);
    filter: drop-shadow(3px 8px 0 rgba(0,0,0,0.18));
    transform: rotate(-0.6deg);
}
.flyer-title-img img{ width:100%; height:auto; display:block; }

.flyer-kicker{
    font-family:'Bebas Neue', sans-serif;
    letter-spacing:0.22em;
    text-transform: uppercase;
    font-size: 0.86rem;
    opacity:0.55;
    text-align:right;
    white-space:nowrap;
    margin-top: 6px;
}

.flyer-body{
    font-size: 1.03rem;
    line-height: 1.75;
    max-width: 720px;
}
.flyer-body p{ margin-bottom: 10px; }
.flyer-body p:last-child{ margin-bottom: 0; }

/* Placeholder image block (open source SVGs) */
.media{
    margin-top: 12px;
    border-radius: 18px;
    overflow:hidden;
    border: 1px solid rgba(0,0,0,0.10);
    box-shadow: 0 10px 18px rgba(0,0,0,0.14);
    background: var(--paper2);
    aspect-ratio: 16 / 9;
    background-position: center;
    background-size: cover;
}

/* Hook classes for placeholder backgrounds */
.media-beer { background-image: var(--ph-beer); }
.media-mic  { background-image: var(--ph-mic); }
.media-bag  { background-image: var(--ph-bag); }
.media-map  { background-image: var(--ph-map); }

/* Events as “mini flyers” */
.events{
    display:grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 10px;
}

.event-card{
    border-radius: 18px;
    border: 1px solid rgba(0,0,0,0.10);
    background: rgba(255,255,255,0.35);
    box-shadow: 0 10px 18px rgba(0,0,0,0.14);
    padding: 12px 12px;
    display:grid;
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
    align-items:baseline;
}

.event-name{ font-weight: 800; font-size: 1.02rem; }
.event-when{
    font-family:'Bebas Neue', sans-serif;
    letter-spacing:0.16em;
    text-transform: uppercase;
    opacity:0.62;
    text-align:right;
}
.event-desc{
    grid-column: 1 / -1;
    font-size: 0.95rem;
    opacity:0.82;
}

.badge{
    display:inline-block;
    margin-left: 8px;
    padding: 4px 9px;
    border-radius: 999px;
    border: 2px solid rgba(0,0,0,0.10);
    background: rgba(212,137,158,0.18);
    font-family:'Bebas Neue', sans-serif;
    letter-spacing:0.14em;
    text-transform: uppercase;
    font-size: 0.76rem;
    transform: rotate(-1deg);
}
.badge.green{ background: rgba(45,140,45,0.14); }

/* Flyer buttons */
.flyer-actions{
    display:flex;
    flex-wrap:wrap;
    gap: 10px;
    margin-top: 14px;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    padding: 12px 16px;
    border-radius: 999px;
    border: 2px solid rgba(0,0,0,0.12);
    box-shadow: 0 12px 20px rgba(0,0,0,0.18);
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
    background: rgba(255,255,255,0.30);
}
.btn span{
    font-family:'Bebas Neue', sans-serif;
    letter-spacing:0.18em;
    font-size: 1.08rem;
    color: rgba(18,18,18,0.92);
}
.btn.pink{ background: rgba(212,137,158,0.22); }
.btn.green{ background: rgba(45,140,45,0.18); }
.btn:hover{ transform: rotate(-1deg) scale(1.02); border-color: rgba(0,0,0,0.20); }

/* ========= BOTTOM DRAWER MENU (png buttons) ========= */
.drawer-scrim{
    position:fixed;
    inset:0;
    background: rgba(0,0,0,0.62);
    opacity:0;
    pointer-events:none;
    transition: opacity .25s ease;
    z-index:1200;
}
.drawer-scrim.open{ opacity:1; pointer-events:auto; }

.drawer{
    position:fixed;
    left:0; right:0; bottom:0;
    transform: translateY(110%);
    transition: transform .28s ease;
    z-index:1300;
    padding: 12px 12px 18px;
}
.drawer.open{ transform: translateY(0); }

.drawer-panel{
    max-width: 860px;
    margin: 0 auto;
    border-radius: 28px;
    overflow:hidden;
    box-shadow: var(--shadow-heavy);
    border: 2px solid rgba(233,225,211,0.12);
    background:
        radial-gradient(900px 420px at 20% 10%, rgba(212,137,158,0.18), transparent 60%),
        radial-gradient(900px 420px at 80% 30%, rgba(45,140,45,0.14), transparent 62%),
        rgba(12,12,12,0.97);
}

.drawer-grip{
    height: 34px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.drawer-grip::before{
    content:'';
    width: 58px;
    height: 6px;
    border-radius: 999px;
    background: rgba(233,225,211,0.22);
}

.drawer-top{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap: 12px;
    padding: 10px 14px 12px;
    border-top: 1px solid rgba(233,225,211,0.10);
    border-bottom: 1px solid rgba(233,225,211,0.10);
}

.drawer-title{
    font-family:'Bebas Neue', sans-serif;
    letter-spacing:0.22em;
    text-transform: uppercase;
    font-size: 1.25rem;
    color: var(--paper);
}

.drawer-close{
    border:none;
    cursor:pointer;
    background: rgba(212,137,158,0.14);
    border: 2px solid rgba(212,137,158,0.35);
    color: var(--paper);
    border-radius: 999px;
    padding: 8px 12px;
    font-family:'Bebas Neue', sans-serif;
    letter-spacing:0.18em;
    font-size: 1.0rem;
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.drawer-close:hover{
    transform: rotate(-1deg) scale(1.02);
    background: rgba(212,137,158,0.22);
    border-color: rgba(212,137,158,0.55);
}

.drawer-links{
    padding: 14px 14px 16px;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.drawer-links a{
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius: 18px;
    padding: 12px 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(233,225,211,0.10);
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.drawer-links a:hover{
    transform: translateY(-2px);
    background: rgba(255,255,255,0.06);
    border-color: rgba(233,225,211,0.18);
}
.drawer-links img{
    width: 100%;
    max-width: 220px;
    height:auto;
    display:block;
    filter: drop-shadow(3px 8px 0 rgba(0,0,0,0.35));
}

/* ========= RESPONSIVE ========= */
@media (max-width: 860px){
    .poster-inner{ grid-template-columns: 1fr; }
    .hero-cta{ flex-direction:row; flex-wrap:wrap; }
    .cta{ flex: 1 1 220px; }
}
@media (max-width: 640px){
    .drawer-links{ grid-template-columns: 1fr 1fr; }
    .event-card{ grid-template-columns: 1fr; }
    .event-when{ text-align:left; }
}
@media (max-width: 380px){
    .drawer-links{ grid-template-columns: 1fr; }
}

/* ====== NORMAL DROPDOWN MENU (house fonts) ====== */
.menu{ position: relative; }
.menu-btn{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 2px solid rgba(233,225,211,0.16);
    background: rgba(255,255,255,0.03);
    color: var(--paper);
    cursor:pointer;
    box-shadow: var(--shadow-sticker);
}
.menu-label{
    font-family:'Bebas Neue', sans-serif;
    letter-spacing:0.22em;
    font-size: 1.02rem;
}
.menu-icon{
    width: 22px;
    height: 16px;
    display:grid;
    gap:4px;
}
.menu-icon span{
    height: 2px;
    background: rgba(233,225,211,0.92);
    border-radius: 99px;
}

.menu-panel{
    position:absolute;
    right:0;
    top: calc(100% + 10px);
    min-width: 200px;
    padding: 10px;
    border-radius: 18px;
    background: rgba(12,12,12,0.98);
    border: 1px solid rgba(233,225,211,0.14);
    box-shadow: var(--shadow-heavy);
    display:none;
    z-index: 2000;
}
.menu-panel.open{ display:block; }
.menu-panel a{
    display:block;
    padding: 10px 12px;
    border-radius: 14px;
    text-decoration:none;
    color: rgba(233,225,211,0.92);
    font-family:'Bebas Neue', sans-serif;
    letter-spacing:0.14em;
    text-transform: uppercase;
}
.menu-panel a:hover{
    background: rgba(212,137,158,0.12);
    color: rgba(233,225,211,1);
}

/* ====== MAP BOX ====== */
.mapbox{
    margin-top: 12px;
    border-radius: 18px;
    overflow:hidden;
    border: 1px solid rgba(0,0,0,0.10);
    box-shadow: 0 10px 18px rgba(0,0,0,0.14);
    background: rgba(0,0,0,0.06);
    aspect-ratio: 16 / 9;
}
.mapbox iframe{
    width:100%;
    height:100%;
    border:0;
    display:block;
}

/* ====== SECTION TITLE IMAGE (used in Merch) ====== */
.section-title-image {
    margin-bottom: 16px;
    text-align: left;
}
.section-title-image img {
    max-width: 220px;
    height: auto;
    display: block;
}

/* ====== MERCH GRID OVERRIDES ====== */
.merch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
}
.merch-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.merch-img {
    width: 100%;
    max-width: 420px;
}
.merch-img img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    object-fit: cover;
}

/* ====== CAROUSEL ====== */
.carousel{
    position: relative;
    margin: 18px 0;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.10);
    box-shadow: 0 10px 18px rgba(0,0,0,0.14);
    background:
        radial-gradient(120% 120% at 50% 30%, rgba(255,255,255,0.20), rgba(0,0,0,0.06) 55%, rgba(0,0,0,0.10)),
        rgba(0,0,0,0.05);
    aspect-ratio: var(--ar-w) / var(--ar-h);
    display: flex;
    align-items: center;
    justify-content: center;
}
.carousel-slide{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    transition: opacity 600ms ease;
}
.carousel-slide.active{ opacity: 1; }
.carousel-ui{
    position:absolute;
    left:0; right:0; bottom:10px;
    display:flex;
    justify-content:center;
    pointer-events:none;
}
.carousel-ui .dots{
    display:flex;
    gap:7px;
    padding:6px 10px;
    border-radius:999px;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(6px);
}
.carousel-ui .dot{
    width:7px;height:7px;border-radius:50%;
    background: rgba(233,225,211,0.35);
    border: 1px solid rgba(233,225,211,0.30);
    opacity:.9;
}
.carousel-ui .dot.on{
    background: rgba(212,137,158,0.95);
    border-color: rgba(212,137,158,0.70);
}

/* =========================
   CITY MURAL OVERLAY (TOP LAYER)
   ========================= */

/*
  What this fixes:
  1) The mural sits ABOVE all content (drawer/menu/topbar included).
  2) Page gets extra bottom padding so content doesn't hide behind it.
  3) Doesn't block clicks (pointer-events: none).
*/

/* add space at the bottom so content isn't hidden behind mural */
main,
.wrap,
.site-wrapper,
.wall{
    padding-bottom: 170px;
}

/* CITY MURAL OVERLAY (TOP LAYER) */
body::after{
    content:'';
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    width: 100%;
    height: 150px;

    background-image: url('/muralwhite.png');
    background-repeat: repeat-x;
    background-position: bottom left;
    background-size: contain;

    pointer-events: none;
    z-index: 5000;

    /* subtle upward lift */
    filter: drop-shadow(0 -10px 18px rgba(0,0,0,0.38));
}
/* =========================
   BLOG: FORCE "ONE POST PER SWIPE"
   Put this at the VERY END of styles.css so it wins over duplicates.
   ========================= */

.blog-rail-wrap{
  position: relative;
}

.blog-rail{
  /* one card = one screen */
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 100% !important;

  overflow-x: auto !important;
  overflow-y: hidden !important;

  scroll-snap-type: x mandatory !important;
  scroll-snap-stop: always !important;
  -webkit-overflow-scrolling: touch;

  /* keep your existing vibe */
  padding: 10px 44px 12px 44px !important;
  border-radius: 20px;
  background: rgba(0,0,0,0.06);
}

.blog-rail > .blog-card{
  /* make sure cards don't shrink or stack */
  width: 100% !important;
  min-width: 100% !important;
  scroll-snap-align: start !important;
}

/* optional: hide horizontal scrollbar chrome */
.blog-rail::-webkit-scrollbar{ height: 10px; }
.blog-rail::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,0.18);
  border-radius: 999px;
}
.blog-rail::-webkit-scrollbar-track{ background: rgba(0,0,0,0.06); }