/* Monkey Artisan Article Widgets */
.monkey-artisan-hero,
.monkey-artisan-story,
.monkey-artisan-hero *,
.monkey-artisan-story *{
    box-sizing:border-box;
}

.monkey-artisan-hero{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    background:transparent;
}

.monkey-artisan-hero-bg{
    position:absolute;
    inset:0;
    z-index:0;
}

.monkey-artisan-hero-bg img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.monkey-artisan-hero-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:linear-gradient(90deg, rgba(0,0,0,.14), rgba(0,0,0,.02) 48%, rgba(0,0,0,.08));
}

.monkey-artisan-back{
    position:absolute;
    z-index:3;
    top:24px;
    left:clamp(18px, 5vw, 70px);
    display:inline-flex;
    align-items:center;
    gap:8px;
    text-decoration:none;
    line-height:1;
}

.monkey-artisan-hero-note{
    position:absolute;
    z-index:2;
    margin:0;
    min-width:220px;
    padding:54px 46px 42px;
    color:#253A24;
    box-shadow:0 20px 45px rgba(0,0,0,.16);
    overflow:visible;
}

.monkey-artisan-hero-note.has-paper-bg::before,
.monkey-artisan-story-content.has-paper-bg::before,
.monkey-artisan-small-note.has-paper-bg::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background-image:
        radial-gradient(circle at 18% 24%, rgba(138,86,34,.18) 0 1px, transparent 2px),
        radial-gradient(circle at 72% 37%, rgba(138,86,34,.12) 0 1px, transparent 2px),
        radial-gradient(circle at 42% 78%, rgba(138,86,34,.11) 0 1px, transparent 2px),
        linear-gradient(110deg, rgba(255,255,255,.22), rgba(255,255,255,0) 50%, rgba(102,68,34,.06));
    background-size:34px 34px, 46px 46px, 58px 58px, 100% 100%;
    mix-blend-mode:multiply;
}

.monkey-artisan-hero-note.has-paper-bg::after,
.monkey-artisan-story-content.has-paper-bg::after,
.monkey-artisan-small-note.has-paper-bg::after{
    content:"";
    position:absolute;
    inset:-1px;
    pointer-events:none;
    background:
        linear-gradient(90deg, transparent 0 12px, rgba(94,55,22,.18) 12px 13px, transparent 13px calc(100% - 12px), rgba(94,55,22,.12) calc(100% - 12px) calc(100% - 11px), transparent calc(100% - 11px)),
        linear-gradient(0deg, transparent 0 10px, rgba(94,55,22,.14) 10px 11px, transparent 11px calc(100% - 10px), rgba(94,55,22,.1) calc(100% - 10px) calc(100% - 9px), transparent calc(100% - 9px));
    opacity:.45;
}

.monkey-artisan-tape,
.monkey-artisan-story-tape{
    position:absolute;
    z-index:5;
    display:block;
    opacity:.78;
    box-shadow:0 2px 8px rgba(0,0,0,.15);
    background-image:
        linear-gradient(0deg, rgba(255,255,255,.22), rgba(255,255,255,0) 45%, rgba(75,39,10,.08)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 10px, rgba(0,0,0,.035) 10px 12px);
}

.monkey-artisan-tape{
    left:50%;
    top:-20px;
    transform:translateX(-50%) rotate(-1deg);
}

.monkey-artisan-label,
.monkey-artisan-title,
.monkey-artisan-text,
.monkey-artisan-story-title,
.monkey-artisan-story-text,
.monkey-artisan-small-note-title,
.monkey-artisan-small-note-text{
    position:relative;
    z-index:2;
}

.monkey-artisan-label{
    display:inline-block;
    margin:0 0 14px;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-size:13px;
    font-weight:700;
}

.monkey-artisan-title,
.monkey-artisan-story-title,
.monkey-artisan-small-note-title{
    margin:0;
    line-height:1.08;
    font-family:"Patrick Hand", cursive;
    font-weight:400;
}

.monkey-artisan-title{
    font-size:clamp(42px, 5vw, 74px);
}

.monkey-artisan-title::after,
.monkey-artisan-story-title::after,
.monkey-artisan-small-note-title::after{
    content:"";
    display:block;
    width:86px;
    height:4px;
    margin:18px 0 0;
    border-radius:999px;
    transform:rotate(-2deg);
}

.monkey-artisan-text,
.monkey-artisan-story-text,
.monkey-artisan-small-note-text{
    margin-top:22px;
    font-size:16px;
    line-height:1.75;
    font-family:Montserrat, Arial, sans-serif;
}

.monkey-artisan-text p,
.monkey-artisan-story-text p,
.monkey-artisan-small-note-text p{
    margin:0 0 1em;
}

.monkey-artisan-text p:last-child,
.monkey-artisan-story-text p:last-child,
.monkey-artisan-small-note-text p:last-child{
    margin-bottom:0;
}

.monkey-artisan-leaf{
    position:absolute;
    z-index:2;
    right:34px;
    bottom:30px;
    width:72px;
    height:105px;
    opacity:.72;
    border-left:2px solid currentColor;
    transform:rotate(22deg);
    color:#5F6F52;
}

.monkey-artisan-leaf::before,
.monkey-artisan-leaf::after{
    content:"";
    position:absolute;
    width:32px;
    height:18px;
    border:2px solid currentColor;
    border-left:none;
    border-bottom:none;
    border-radius:100% 0 100% 0;
}

.monkey-artisan-leaf::before{
    left:5px;
    top:22px;
    transform:rotate(-30deg);
    box-shadow:0 26px 0 -1px currentColor, 0 52px 0 -1px currentColor;
}

.monkey-artisan-leaf::after{
    right:5px;
    top:10px;
    transform:scaleX(-1) rotate(-30deg);
    box-shadow:0 26px 0 -1px currentColor, 0 52px 0 -1px currentColor;
}

.monkey-artisan-story{
    display:flex;
    align-items:center;
    position:relative;
    background:transparent;
    padding:70px clamp(22px, 5vw, 78px);
    overflow:visible;
}

.monkey-artisan-story.is-image-left{
    flex-direction:row-reverse;
}

.monkey-artisan-story-content{
    position:relative;
    z-index:1;
    padding:54px 48px;
    min-width:0;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.monkey-artisan-story-title{
    font-size:clamp(34px, 3.2vw, 54px);
}

.monkey-artisan-story-media{
    position:relative;
    min-width:0;
}

.monkey-artisan-story-img{
    position:relative;
    overflow:hidden;
    background:transparent;
    box-shadow:0 16px 35px rgba(0,0,0,.13);
}

.monkey-artisan-story-img img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.monkey-artisan-story-tape{
    width:150px;
    height:38px;
    left:14%;
    top:-18px;
    transform:rotate(-4deg);
}

.monkey-artisan-small-note{
    position:absolute;
    z-index:4;
    min-width:170px;
    padding:42px 32px 34px;
    box-shadow:0 16px 34px rgba(0,0,0,.14);
}

.monkey-artisan-small-note .small-tape{
    width:82px;
    height:28px;
    top:-13px;
}

.monkey-artisan-small-note-title{
    font-size:clamp(28px, 2.3vw, 42px);
    text-align:center;
}

.monkey-artisan-small-note-title::after{
    margin-left:auto;
    margin-right:auto;
}

.monkey-artisan-small-note-text{
    text-align:center;
    font-size:15px;
    line-height:1.65;
}

.monkey-artisan-leaf.small{
    width:56px;
    height:80px;
    right:28px;
    bottom:22px;
    opacity:.55;
}

@media (max-width: 1024px){
    .monkey-artisan-hero-note{
        width:min(82%, 520px) !important;
    }
    .monkey-artisan-story,
    .monkey-artisan-story.is-image-left{
        flex-direction:column;
    }
    .monkey-artisan-story-content,
    .monkey-artisan-story-media{
        flex-basis:auto !important;
        width:100%;
    }
    .monkey-artisan-small-note{
        position:relative;
        left:auto !important;
        top:auto !important;
        width:100% !important;
        margin:28px auto 0;
        transform:rotate(0deg) !important;
    }
}

@media (max-width: 767px){
    .monkey-artisan-hero{
        min-height:620px;
    }
    .monkey-artisan-back{
        top:18px;
        left:18px;
    }
    .monkey-artisan-hero-note{
        left:50% !important;
        top:auto !important;
        bottom:34px;
        transform:translateX(-50%) rotate(0deg) !important;
        width:calc(100% - 36px) !important;
        padding:44px 28px 34px;
    }
    .monkey-artisan-title{
        font-size:42px;
    }
    .monkey-artisan-story{
        padding:46px 18px;
    }
    .monkey-artisan-story-content{
        padding:38px 28px;
    }
    .monkey-artisan-story-img{
        height:300px !important;
    }
    .monkey-artisan-leaf{
        display:none;
    }
}

/* v1.0.24 controls: no forced section background + reliable note X/Y positioning */
.monkey-artisan-story.has-bg-image{
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
}

.monkey-artisan-hero.is-note-left .monkey-artisan-hero-note{
    left:7%;
    top:23%;
    transform:rotate(-2deg);
}
.monkey-artisan-hero.is-note-center .monkey-artisan-hero-note{
    left:50%;
    top:50%;
    transform:translate(-50%, -50%) rotate(0deg);
}
.monkey-artisan-hero.is-note-right .monkey-artisan-hero-note{
    left:auto;
    right:7%;
    top:23%;
    transform:rotate(2deg);
}

.monkey-artisan-small-note{
    --monkey-note-x:62%;
    --monkey-note-y:20%;
    --monkey-note-rotation:5deg;
    left:var(--monkey-note-x);
    top:var(--monkey-note-y);
    right:auto;
    bottom:auto;
    transform:rotate(var(--monkey-note-rotation));
}
.monkey-artisan-note-2{
    --monkey-note-x:8%;
    --monkey-note-y:68%;
    --monkey-note-rotation:-4deg;
}
.monkey-artisan-note-3{
    --monkey-note-x:42%;
    --monkey-note-y:76%;
    --monkey-note-rotation:2deg;
}
.monkey-artisan-small-note.is-pos-top-left{
    --monkey-note-x:4%;
    --monkey-note-y:6%;
}
.monkey-artisan-small-note.is-pos-top-right{
    --monkey-note-x:68%;
    --monkey-note-y:6%;
}
.monkey-artisan-small-note.is-pos-bottom-left{
    --monkey-note-x:4%;
    --monkey-note-y:68%;
}
.monkey-artisan-small-note.is-pos-bottom-right{
    --monkey-note-x:68%;
    --monkey-note-y:68%;
}
.monkey-artisan-small-note.is-pos-center{
    --monkey-note-x:50%;
    --monkey-note-y:50%;
    transform:translate(-50%, -50%) rotate(var(--monkey-note-rotation));
}

@media (max-width: 1024px){
    .monkey-artisan-small-note[class*="is-pos-"]{
        left:auto;
        right:auto;
        top:auto;
        bottom:auto;
        transform:rotate(0deg);
    }
}


/* v1.0.25: no visual background when background controls are empty/transparent */
.monkey-artisan-hero:not(:has(.monkey-artisan-hero-bg)) .monkey-artisan-hero-overlay{
    display:none;
}
.monkey-artisan-hero-note:not(.has-paper-bg),
.monkey-artisan-story-content:not(.has-paper-bg),
.monkey-artisan-small-note:not(.has-paper-bg){
    background:transparent;
}
.monkey-artisan-hero-note:not(.has-paper-bg)::before,
.monkey-artisan-hero-note:not(.has-paper-bg)::after,
.monkey-artisan-story-content:not(.has-paper-bg)::before,
.monkey-artisan-story-content:not(.has-paper-bg)::after,
.monkey-artisan-small-note:not(.has-paper-bg)::before,
.monkey-artisan-small-note:not(.has-paper-bg)::after{
    display:none;
}

/* v1.0.26: Artisan hero note image mode additions */
.monkey-artisan-hero-note.is-content-image,
.monkey-artisan-hero-note.is-content-mixed{
    display:flex;
    flex-direction:column;
    gap:22px;
}

.monkey-artisan-note-image-wrap{
    position:relative;
    z-index:2;
    width:100%;
    overflow:hidden;
    background:transparent;
}

.monkey-artisan-note-image-wrap img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.monkey-artisan-hero-note.is-content-image{
    padding:34px;
}

.monkey-artisan-hero-note.is-content-image .monkey-artisan-note-image-wrap{
    margin:0;
}

.monkey-artisan-hero-note.is-text-hidden .monkey-artisan-label,
.monkey-artisan-hero-note.is-text-hidden .monkey-artisan-title,
.monkey-artisan-hero-note.is-text-hidden .monkey-artisan-text,
.monkey-artisan-hero-note.is-text-hidden .monkey-artisan-leaf{
    display:none !important;
}

@media (max-width: 767px){
    .monkey-artisan-hero-note.is-content-image,
    .monkey-artisan-hero-note.is-content-mixed{
        gap:18px;
    }
    .monkey-artisan-hero-note.is-content-image{
        padding:24px;
    }
}