:root {
    --blue:#123a67;
    --yellow:#ffdc00;
    --red:#e11922;
    --ink:#080808;
    --bg:#f3f5f7
}

.loopit-app-page {
    margin:0;
    background:var(--bg);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    color:#172033
}

.loopit-top {
    height:68px;
    background:#fff;
    border-bottom:1px solid #dde3e8;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 4vw;
    box-sizing:border-box
}

.loopit-brand {
    font-weight:950;
    font-size:28px;
    letter-spacing:-1px;
    color:var(--blue);
    text-decoration:none
}

.loopit-brand span {
    color:#f0a000
}

.loopit-top nav {
    display:flex;
    gap:24px
}

.loopit-top nav a {
    color:#34475d;
    text-decoration:none;
    font-weight:700
}

.loopit-workspace {
    max-width:1440px;
    margin:0 auto;
    padding:34px 4vw 60px;
    display:grid;
    grid-template-columns:minmax(360px,.82fr) minmax(520px,1.18fr);
    gap:42px;
    align-items:start
}

.loopit-editor,.loopit-preview-column {
    min-width:0
}

.loopit-eyebrow {
    font-size:12px;
    font-weight:850;
    letter-spacing:.12em;
    color:#5e7287
}

.loopit-editor h1 {
    font-size:38px;
    margin:6px 0 4px
}

.loopit-lead {
    margin:0 0 25px;
    color:#647487
}

.loopit-label {
    display:block;
    font-weight:800;
    margin:18px 0 7px
}

.loopit-label small {
    font-weight:500;
    color:#7c8996
}

.loopit-editor input,.loopit-editor textarea {
    width:100%;
    box-sizing:border-box;
    border:1px solid #cbd4dd;
    border-radius:9px;
    padding:12px 13px;
    font:inherit;
    background:#fff
}

.loopit-editor textarea {
    resize:vertical
}

.loopit-counter {
    text-align:right;
    color:#8b97a4;
    font-size:12px;
    margin-top:3px
}

.loopit-types {
    display:flex;
    flex-wrap:wrap;
    gap:8px
}

.loopit-type {
    border:1px solid #cbd4dd;
    background:#fff;
    border-radius:8px;
    padding:9px 13px;
    font-weight:750;
    cursor:pointer
}

.loopit-type.is-active {
    background:var(--blue);
    color:#fff;
    border-color:var(--blue)
}

.loopit-image-pickers {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px
}

.loopit-image-picker {
    height:112px;
    border:2px dashed #b9c5d0;
    border-radius:10px;
    background:#fff;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
    color:#667789;
    font-weight:700;
    cursor:pointer
}

.loopit-image-picker input {
    position:absolute;
    opacity:0;
    inset:0;
    cursor:pointer
}

.loopit-image-picker .plus {
    font-size:28px;
    line-height:1
}

.loopit-image-picker img {
    display:none;
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover
}

.loopit-image-picker.has-image img {
    display:block
}

.loopit-actions {
    margin-top:24px
}

.loopit-publish {
    width:100%;
    border:0;
    border-radius:9px;
    padding:14px;
    background:var(--blue);
    color:#fff;
    font-size:16px;
    font-weight:850;
    cursor:pointer
}

#loopit-status {
    min-height:24px;
    margin-top:9px;
    font-size:14px
}

.loopit-preview-column {
    position:sticky;
    top:22px
}

.loopit-preview-head {
    display:flex;
    justify-content:space-between;
    margin-bottom:10px;
    color:#536579
}

.loopit-preview-head span {
    font-size:13px
}

.loopit-hint {
    text-align:center;
    color:#788796;
    font-size:13px
}

/* Dynaaminen Klassinen: juliste on kerroksellinen näyttämö, ei ruudukko. */
.loopit-poster {
    background:var(--yellow);
    border:5px solid var(--ink);
    box-shadow:0 14px 34px rgba(0,0,0,.16);
    aspect-ratio:4/5;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    color:#050505;
    isolation:isolate
}

.poster-brand {
    height:7%;
    box-sizing:border-box;
    background:#101010;
    color:#fff;
    font-size:clamp(14px,1.7vw,25px);
    font-weight:950;
    letter-spacing:.08em;
    padding:8px 16px;
    display:flex;
    align-items:center;
    border-bottom:4px solid #fff
}

.poster-kicker {
    height:8%;
    box-sizing:border-box;
    background:var(--red);
    color:#fff;
    text-align:center;
    font-weight:950;
    font-style:italic;
    font-size:clamp(22px,3vw,43px);
    padding:6px 12px;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    border-bottom:4px solid #fff;
    text-transform:uppercase
}

.poster-stage {
    position:relative;
    flex:1;
    min-height:0;
    background:linear-gradient(103deg,#ffe900 0%,#ffd800 100%);
    overflow:hidden
}

.poster-sticker {
    position:absolute;
    z-index:8;
    left:3.2%;
    top:4%;
    background:var(--red);
    color:#fff;
    padding:.09em .25em .13em;
    font-family:Impact,"Arial Black",sans-serif;
    font-size:clamp(24px,3.8vw,56px);
    font-style:italic;
    line-height:1;
    text-transform:uppercase;
    transform:rotate(-4deg);
    box-shadow:5px 5px 0 rgba(0,0,0,.12);
    max-width:65%;
    white-space:nowrap
}

.poster-sticker.is-placeholder {
    opacity:.82
}

.poster-headline {
    position:absolute;
    z-index:7;
    left:3.2%;
    top:15%;
    width:62%;
    margin:0;
    font-family:Impact,"Arial Black",sans-serif;
    font-size:clamp(50px,7.6vw,112px);
    line-height:.82;
    letter-spacing:-.035em;
    text-transform:uppercase;
    overflow-wrap:normal;
    word-break:normal;
    text-shadow:2px 2px 0 rgba(255,255,255,.32);
    transform:rotate(-1.4deg);
    transform-origin:left top
}

.headline-short .poster-headline {
    font-size:clamp(68px,10.3vw,150px);
    width:74%;
    line-height:.8
}

.headline-long .poster-headline {
    font-size:clamp(43px,6.2vw,91px);
    line-height:.86
}

.headline-xlong .poster-headline {
    font-size:clamp(37px,5.2vw,77px);
    line-height:.89
}

.poster-ingress {
    position:absolute;
    z-index:9;
    left:3.5%;
    top:58%;
    width:52%;
    margin:0;
    font-family:Impact,"Arial Black",sans-serif;
    font-size:clamp(18px,2.45vw,36px);
    font-weight:900;
    line-height:1.02;
    transform:rotate(-1deg)
}

.poster-images {
    position:absolute;
    inset:0;
    z-index:3;
    pointer-events:none
}

.poster-photo {
    position:absolute;
    display:block;
    object-fit:cover;
    background:#fff;
    border:5px solid #fff;
    box-sizing:border-box;
    box-shadow:0 4px 8px rgba(0,0,0,.34)
}

/* Ei kuvia: typografia ottaa koko pinnan. */
.images-0 .poster-headline {
    width:91%;
    top:20%;
    font-size:clamp(70px,11vw,160px);
    transform:rotate(-2deg)
}

.images-0.headline-long .poster-headline {
    font-size:clamp(55px,8.2vw,120px)
}

.images-0.headline-xlong .poster-headline {
    font-size:clamp(46px,7vw,102px)
}

.images-0 .poster-ingress {
    top:67%;
    width:84%;
    font-size:clamp(22px,3vw,44px)
}

/* Yksi kuva: suuri kuva oikealla, teksti saa mennä sen päälle. */
.images-1 .poster-photo-1 {
    right:2.5%;
    top:5%;
    width:49%;
    height:76%;
    transform:rotate(1.2deg)
}

.images-1 .poster-headline {
    width:64%
}

.images-1 .poster-ingress {
    top:62%;
    width:49%
}

/* Kaksi kuvaa: pääkuva oikealla, toinen irrallisena alhaalla. */
.images-2 .poster-photo-1 {
    right:2.5%;
    top:4%;
    width:47%;
    height:62%;
    transform:rotate(1deg)
}

.images-2 .poster-photo-2 {
    right:8%;
    bottom:3%;
    width:38%;
    height:29%;
    transform:rotate(-4deg)
}

.images-2 .poster-headline {
    width:64%
}

.images-2 .poster-ingress {
    top:61%;
    width:48%
}

/* Kolme kuvaa: iso pääkuva + kaksi vinosti ladottua pikkukuvaa. */
.images-3 .poster-photo-1 {
    right:2.5%;
    top:4%;
    width:45%;
    height:58%;
    transform:rotate(.8deg)
}

.images-3 .poster-photo-2 {
    left:4%;
    bottom:3%;
    width:35%;
    height:24%;
    transform:rotate(-3deg)
}

.images-3 .poster-photo-3 {
    left:37%;
    bottom:2.5%;
    width:31%;
    height:25%;
    transform:rotate(3deg)
}

.images-3 .poster-headline {
    width:63%
}

.images-3 .poster-ingress {
    top:58%;
    width:49%;
    max-height:18%;
    overflow:hidden
}

.poster-footer {
    height:5%;
    box-sizing:border-box;
    border-top:4px solid #111;
    padding:5px 12px;
    font-size:clamp(9px,1vw,13px);
    font-weight:950;
    letter-spacing:.08em;
    display:flex;
    align-items:center
}

.loopit-single {
    max-width:760px;
    margin:35px auto;
    padding:0 20px 60px
}

.loopit-open {
    text-align:center
}

.loopit-open a {
    display:inline-block;
    background:var(--blue);
    color:#fff;
    padding:12px 18px;
    border-radius:8px;
    text-decoration:none;
    font-weight:800
}

@media(max-width:900px) {
    .loopit-workspace {
        grid-template-columns:1fr;
        max-width:700px
    }
    .loopit-preview-column {
        position:static
    }
    .loopit-top nav a:not(:last-child) {
        display:none
    }

}

@media(max-width:560px) {
    .loopit-workspace {
        padding:22px 14px 40px
    }
    .loopit-editor h1 {
        font-size:31px
    }
    .loopit-image-picker {
        height:88px
    }
    .poster-sticker {
        font-size:7vw
    }
    .poster-headline {
        font-size:13vw
    }
    .headline-short .poster-headline {
        font-size:17vw
    }
    .headline-long .poster-headline {
        font-size:11vw
    }
    .headline-xlong .poster-headline {
        font-size:9.5vw
    }
    .poster-ingress {
        font-size:4.2vw
    }
    .poster-kicker {
        font-size:6vw
    }

}

/* 0.2.1: painettu lööppi — kulumaa, repaleita ja tiiviimpi typografia. */
.loopit-poster {
    position:relative
}

.loopit-poster::after {
    content:"";
    position:absolute;
    inset:0;
    z-index:60;
    pointer-events:none;
    background:url("paper-grain.png") repeat;
    background-size:360px 360px;
    opacity:.30;
    mix-blend-mode:multiply
}

.poster-stage::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:21;
    pointer-events:none;
    background:url("edge-grunge.png") 0 0/100% 100% no-repeat;
    opacity:.62;
    mix-blend-mode:multiply
}

.poster-sticker {
    clip-path:polygon(0 8%,3% 4%,8% 7%,13% 1%,20% 5%,27% 2%,35% 6%,42% 1%,50% 4%,57% 0,65% 5%,73% 2%,81% 6%,89% 2%,97% 5%,100% 1%,99% 93%,95% 97%,89% 94%,82% 100%,74% 95%,66% 98%,57% 94%,49% 100%,41% 95%,33% 98%,25% 94%,17% 99%,9% 95%,2% 99%);
    padding:.15em .34em .19em;
    filter:drop-shadow(4px 5px 0 rgba(0,0,0,.14));
    box-shadow:none
}

.poster-sticker::after {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:repeating-linear-gradient(173deg,transparent 0 7px,rgba(255,255,255,.16) 8px 9px,transparent 10px 16px);
    mix-blend-mode:screen;
    opacity:.55
}

.poster-headline {
    font-family:Impact,Haettenschweiler,"Arial Narrow Bold","Arial Narrow",sans-serif;
    font-stretch:condensed;
    -webkit-text-stroke:0;
    text-shadow:none;
    letter-spacing:-.045em;
    transform:rotate(-1.8deg) scaleX(.91);
    transform-origin:left top
}

.headline-short .poster-headline {
    transform:rotate(-2.1deg) scaleX(.88)
}

.poster-ingress {
    font-family:Impact,Haettenschweiler,"Arial Narrow Bold","Arial Narrow",sans-serif;
    letter-spacing:-.02em;
    line-height:.96
}

/* Kolmen kuvan taitossa rikotaan palstarajaa tarkoituksella. */
.images-3 .poster-photo-1 {
    right:1.8%;
    top:4%;
    width:47%;
    height:59%;
    transform:rotate(1.1deg);
    z-index:2
}

.images-3 .poster-photo-2 {
    left:3%;
    bottom:2.7%;
    width:37%;
    height:25%;
    transform:rotate(-3.5deg);
    z-index:4
}

.images-3 .poster-photo-3 {
    left:36%;
    bottom:2%;
    width:33%;
    height:26%;
    transform:rotate(3.2deg);
    z-index:5
}

.images-3 .poster-headline {
    width:66%;
    z-index:7
}

.images-3 .poster-ingress {
    top:57%;
    width:52%;
    z-index:9
}

/* Kuvien valkoinen paperireuna saa näyttää hieman käsin ladotulta. */
.poster-photo {
    outline:1px solid rgba(0,0,0,.08);
    box-shadow:3px 5px 8px rgba(0,0,0,.30)
}

.poster-brand,.poster-kicker,.poster-footer {
    position:relative;
    z-index:25
}

/* 0.2.2-alpha — avoin condensed-typografia. Fontti ladataan Google Fontsista,
   joten lisäosan mukana ei jaeta fonttitiedostoja. */
.poster-headline {
    font-family:"Oswald","Arial Narrow",sans-serif;
    font-weight:700;
    font-stretch:condensed;
    letter-spacing:-.055em;
    line-height:.84;
    -webkit-text-stroke:0;
    text-shadow:none;
    transform:rotate(-1.8deg) scaleX(.84);
    transform-origin:left top;

}

.headline-short .poster-headline {
    transform:rotate(-2.1deg) scaleX(.81)
}

.headline-long .poster-headline,.headline-xlong .poster-headline {
    transform:rotate(-1.2deg) scaleX(.87)
}

.poster-ingress {
    font-family:"Oswald","Arial Narrow",sans-serif;
    font-weight:700;
    letter-spacing:-.035em;
    line-height:.94;

}

/* 0.3.0-alpha — Klassinen 3A. Tavoite: teksti hallitsee, kuvat tukevat. */
.loopit-poster {
    padding:2.2%;
    box-sizing:border-box;
    border:0;
    background:#f4cd00;

}

.poster-paper-inner {
    position:relative;
    z-index:1;
    height:100%;
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;

}

.poster-brand {
    flex:0 0 7.4%;
    height:auto;
    margin:0 0 1.2% 0;
    border:0;
    padding:6px 14px;
    background:#090909;
    color:#fff;

}

/* Ylähuuto on nyt painettu nauha, ei koko leveydelle venyvä UI-palkki. */
.poster-kicker {
    position:relative;
    z-index:30;
    align-self:stretch;
    flex:0 0 auto;
    height:auto;
    min-height:6.2%;
    margin:0 1.5% -1.2% .8%;
    padding:.14em .55em .18em;
    border:0;
    background:var(--red);
    clip-path:polygon(0 10%,3% 5%,8% 8%,14% 3%,21% 7%,28% 2%,36% 6%,44% 2%,53% 5%,62% 1%,71% 6%,80% 2%,89% 7%,96% 3%,100% 8%,99% 91%,94% 96%,86% 92%,78% 98%,69% 94%,60% 99%,51% 94%,42% 98%,33% 93%,24% 98%,15% 94%,7% 99%,1% 94%);
    filter:drop-shadow(2px 3px 0 rgba(0,0,0,.12));
    font-family:"Oswald","Arial Narrow",sans-serif;
    font-weight:700;
    font-style:italic;
    letter-spacing:-.025em;

}

.poster-stage {
    flex:1;
    min-height:0;
    margin-top:0;
    background:linear-gradient(103deg,#ffe900 0%,#ffd800 100%)
}

.poster-footer {
    flex:0 0 4.5%;
    height:auto;
    border-top:3px solid #111;
    background:#f4cd00
}

/* Pääotsikko pidetään suurena myös kuvien kanssa. Keltainen stroke sallii sen kulkea kuvan päällä. */
.poster-headline {
    left:2.7%;
    top:18%;
    width:72%;
    z-index:12;
    color:#050505;
    line-height:.82;
    letter-spacing:-.06em;
    -webkit-text-stroke:4px #ffdf00;
    paint-order:stroke fill;
    text-shadow:none;
    transform:rotate(-1.5deg) scaleX(.84);

}

.headline-short .poster-headline {
    width:78%;
    transform:rotate(-1.8deg) scaleX(.81)
}

.headline-long .poster-headline,.headline-xlong .poster-headline {
    width:72%;
    transform:rotate(-1.1deg) scaleX(.86)
}

.poster-ingress {
    left:3.2%;
    width:58%;
    z-index:13;
    font-size:clamp(19px,2.65vw,39px);
    line-height:.94;
    transform:rotate(-.7deg);

}

/* 3A: pääkuva tarkoituksella kapea. Otsikko saa tunkeutua sen päälle. */
.images-3 .poster-photo-1 {
    right:1.5%;
    top:4.5%;
    width:38%;
    height:55%;
    transform:rotate(.8deg);
    z-index:4
}

.images-3 .poster-photo-2 {
    left:4%;
    bottom:3.5%;
    width:34%;
    height:24%;
    transform:rotate(-4deg);
    z-index:7
}

.images-3 .poster-photo-3 {
    left:37%;
    bottom:2.6%;
    width:30%;
    height:25%;
    transform:rotate(3.4deg);
    z-index:8
}

.images-3 .poster-headline {
    width:72%;
    z-index:12
}

.images-3 .poster-ingress {
    width:57%;
    z-index:13
}

/* Samalla periaatteella 1–2 kuvaa: kuva ei saa syödä otsikkoa. */
.images-1 .poster-photo-1 {
    right:1.5%;
    top:5%;
    width:39%;
    height:69%;
    z-index:4
}

.images-1 .poster-headline {
    width:73%;
    z-index:12
}

.images-1 .poster-ingress {
    width:58%;
    z-index:13
}

.images-2 .poster-photo-1 {
    right:1.5%;
    top:4.5%;
    width:39%;
    height:57%;
    z-index:4
}

.images-2 .poster-photo-2 {
    right:7%;
    bottom:3%;
    width:34%;
    height:27%;
    transform:rotate(-4deg);
    z-index:7
}

.images-2 .poster-headline {
    width:72%;
    z-index:12
}

.images-2 .poster-ingress {
    width:57%;
    z-index:13
}

/* Tarra kuuluu samaan revittyyn painoväriperheeseen, mutta on rajumpi kuin ylähuuto. */
.poster-sticker {
    z-index:16;
    top:4.5%;
    transform:rotate(-5deg);
    font-family:"Oswald","Arial Narrow",sans-serif;
    font-weight:700;
    letter-spacing:-.04em
}

/* Paperin kuluma saa näkyä myös sisämarginaalissa. */
.loopit-poster::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:58;
    pointer-events:none;
    background:url("edge-grunge.png") 0 0/100% 100% no-repeat;
    opacity:.42;
    mix-blend-mode:multiply
}

@media(max-width:560px) {
    .loopit-poster {
        padding:2.2%
    }
    .poster-headline {
        -webkit-text-stroke:2px #ffdf00
    }

}

/* 0.3.1-alpha — Klassinen 3A, toinen sommittelukierros.
   Täytetään julisteen keskialuetta ja annetaan otsikon törmätä pääkuvaan rohkeammin. */
.images-3 .poster-photo-1 {
    right:1.8%;
    top:5%;
    width:36%;
    height:52%;
    transform:rotate(.8deg);
    z-index:4
}

.images-3 .poster-photo-2 {
    left:3.2%;
    bottom:7.2%;
    width:38%;
    height:27%;
    transform:rotate(-4deg);
    z-index:7
}

.images-3 .poster-photo-3 {
    left:37.5%;
    bottom:6.3%;
    width:34%;
    height:28%;
    transform:rotate(3.2deg);
    z-index:8
}

.images-3 .poster-headline {
    width:76%;
    z-index:12
}

.images-3 .poster-ingress {
    width:58%;
    z-index:13
}

/* Myös yhden ja kahden kuvan taitossa pääkuva pysyy sivuroolissa. */
.images-1 .poster-photo-1 {
    right:1.8%;
    top:5%;
    width:36%;
    height:65%;
    z-index:4
}

.images-1 .poster-headline {
    width:76%;
    z-index:12
}

.images-2 .poster-photo-1 {
    right:1.8%;
    top:5%;
    width:36%;
    height:54%;
    z-index:4
}

.images-2 .poster-photo-2 {
    right:7%;
    bottom:6%;
    width:36%;
    height:29%;
    transform:rotate(-4deg);
    z-index:7
}

.images-2 .poster-headline {
    width:75%;
    z-index:12
}

/* 0.3.2-alpha — Klassinen 3A, haalistunut paperi ja litteämpi painotuntuma. */
:root {
    --yellow:#f1d348
}

.loopit-poster {
    background:#f1d348;
    box-shadow:0 12px 28px rgba(0,0,0,.11)
}

.poster-stage {
    background:radial-gradient(ellipse at 48% 43%,#f6df62 0%,#f3d94e 48%,#edcb36 100%)
}

.poster-footer {
    background:#f1d348
}

/* Valokuvat ovat osa taittoa, eivät irrallisia kiiltäviä printtejä. */
.poster-photo {
    box-shadow:none;
    outline:none;
    border:4px solid rgba(255,255,255,.94)
}

/* Otsikon paperinkeltainen stroke jatkaa taustaa pääkuvan päälle. */
.poster-headline {
    -webkit-text-stroke:4px #f3d94e
}

/* 3A: alikuvat lähemmäs tekstimassaa ja ingressi hieman vahvemmaksi. */
.images-3 .poster-photo-2 {
    left:3.2%;
    bottom:10.2%;
    width:38%;
    height:27%;
    transform:rotate(-4deg);
    z-index:7
}

.images-3 .poster-photo-3 {
    left:37.5%;
    bottom:9.2%;
    width:34%;
    height:28%;
    transform:rotate(3.2deg);
    z-index:8
}

.images-3 .poster-headline {
    width:79%;
    z-index:12
}

.images-3 .poster-ingress {
    width:61%;
    font-size:clamp(20px,2.85vw,42px);
    z-index:13
}

/* 1–2 kuvan taitot seuraavat samaa litteää painotyyliä. */
.images-2 .poster-photo-2 {
    bottom:8.5%
}

@media(max-width:560px) {
    .poster-headline {
        -webkit-text-stroke:2px #f3d94e
    }

}

/* 0.3.3-alpha — vaalea FFF279-paperi ja yhtenäinen kuluma koko julisteelle. */
:root {
    --yellow:#fff279
}

.loopit-poster {
    background:#fff279;

}

.poster-stage, .poster-footer {
    background:#fff279;

}

/* Poistetaan stageen rajautuva suorakulmainen grunge. */
.poster-stage::before {
    display:none;

}

/* Kuluma levitetään koko paperille ilman sisälaatikon näkyvää rajaa. */
.loopit-poster::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:58;
    pointer-events:none;
    background:url("edge-grunge.png") 0 0/100% 100% no-repeat;
    opacity:.30;
    mix-blend-mode:multiply;

}

.loopit-poster::after {
    content:"";
    position:absolute;
    inset:0;
    z-index:60;
    pointer-events:none;
    background:url("paper-grain.png") repeat;
    background-size:360px 360px;
    opacity:.18;
    mix-blend-mode:multiply;

}

.poster-headline {
    -webkit-text-stroke:4px #fff279
}

@media(max-width:560px) {
    .poster-headline {
        -webkit-text-stroke:2px #fff279
    }

}

/* 0.3.4-alpha — stage ei piirrä omaa kehystä; ylähuuto suorassa. */
.poster-stage::after {
    display:none
}

.poster-kicker {
    transform:none
}

/* 0.3.5-alpha — rivikohtainen pääotsikko ja sama rakenne esikatselussa/julkaisussa. */
.poster-headline {
    width:80%;
    transform:none;
    overflow:visible;
    font-style:italic;
    -webkit-text-stroke:0;

}

.headline-short .poster-headline, .headline-long .poster-headline, .headline-xlong .poster-headline, .images-1 .poster-headline, .images-2 .poster-headline, .images-3 .poster-headline {
    width:80%;
    transform:none;
    z-index:18;

}

.images-0 .poster-headline {
    width:91%;
    transform:none
}

.headline-line {
    display:block;
    width:max-content;
    max-width:100%;
    position:relative;
    z-index:18;
    white-space:nowrap;
    line-height:.82;
    font:inherit;
    font-style:italic;
    letter-spacing:inherit;
    -webkit-text-stroke:4px #fff279;
    paint-order:stroke fill;
    transform-origin:left center;

}

.headline-line-1 {
    transform:rotate(-1.35deg) scaleX(.86)
}

.headline-line-2 {
    font-size:.84em;
    transform:rotate(-.35deg) scaleX(.89);
    margin-top:-.04em
}

.headline-line-3 {
    font-size:.76em;
    transform:rotate(.45deg) scaleX(.91);
    margin-top:-.03em
}

@media(max-width:560px) {
    .headline-line {
        -webkit-text-stroke:2px #fff279
    }

}

/* Sama painovärin epätasaisuus myös ylähuudon punaiseen nauhaan. */
.poster-kicker::after {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:repeating-linear-gradient(173deg,transparent 0 7px,rgba(255,255,255,.16) 8px 9px,transparent 10px 16px);
    mix-blend-mode:screen;
    opacity:.55;

}

/* 0.3.7-alpha — Klassinen: otsikon painoreuna ja riviväli. */
/* Pääotsikko seuraa PALJASTUS!-bannerin vinoutta. Rivien keskinäinen eläväisyys säilyy. */
.headline-short .poster-headline, .headline-long .poster-headline, .headline-xlong .poster-headline, .images-0 .poster-headline, .images-1 .poster-headline, .images-2 .poster-headline, .images-3 .poster-headline {
    transform:rotate(-4deg);
    transform-origin:left top;

}

.headline-line {
    -webkit-text-stroke:0;
    paint-order:normal;
    text-shadow:2px 0 #fff279,-4px 0 #fff279,0 4px #fff279,0 -4px #fff279;

}

.headline-line-1 {
    transform:rotate(0deg) scaleX(.86)
}

.headline-line-2 {
    font-size:.84em;
    transform:rotate(.65deg) scaleX(.89);
    margin-top:.06em
}

.headline-line-3 {
    font-size:.76em;
    transform:rotate(1.15deg) scaleX(.91);
    margin-top:.05em
}

/* Kolmen kuvan taitossa alakuvat ovat selvästi lisäkuvia, eivät pääkuvan kilpailijoita. */
.images-3 .poster-photo-2 {
    left:4%;
    bottom:4.5%;
    width:29%;
    height:19%;
    transform:rotate(-3deg)
}

.images-3 .poster-photo-3 {
    left:31.5%;
    bottom:4%;
    width:26%;
    height:20%;
    transform:rotate(3deg)
}

.images-3 .poster-ingress {
    max-height:23%;
    overflow:hidden
}

/* 0.3.8-alpha — Klassinen / 2 kuvaa: oma sommittelu.
   Kuva 1 on pääkuva, kuva 2 selvästi pienempi lisäkuva. */
.images-2 .poster-photo-1 {
    right:2%;
    top:5%;
    width:39%;
    height:56%;
    transform:rotate(.8deg);
    z-index:4;

}

.images-2 .poster-photo-2 {
    left:40%;
    bottom:4.5%;
    width:28%;
    height:21%;
    transform:rotate(3deg);
    z-index:8;

}

.images-2 .poster-headline {
    width:80%;
    z-index:18
}

.images-2 .poster-ingress {
    width:58%;
    max-height:25%;
    overflow:hidden;
    z-index:13;

}

/* 0.3.9-alpha — ingressi sovitetaan JS:llä käytettävissä olevaan tilaan. */
.images-3 .poster-ingress,.images-2 .poster-ingress,.images-1 .poster-ingress,.images-0 .poster-ingress {
    overflow:hidden
}

/* 0.4.0-alpha — ingressin selainvakaa sovitus, kuvan poisto ja valinnainen lisänosto. */
.poster-ingress {
    transform: rotate(-2.5deg) scaleX(.94);
    transform-origin: left top;

}

.loopit-image-slot {
    position: relative;
    min-width: 0;

}

.loopit-image-slot .loopit-image-picker {
    width: 100%;
    box-sizing: border-box;

}

.loopit-image-remove {
    display: none;
    position: absolute;
    right: 6px;
    bottom: 6px;
    z-index: 4;
    border: 0;
    border-radius: 6px;
    padding: 5px 8px;
    background: rgba(10, 10, 10, .82);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;

}

.loopit-image-slot:has(.loopit-image-picker.has-image) .loopit-image-remove {
    display: block;

}

/* 0.4.1-alpha — lisänosto limittyy pääkuvan alareunaan.
   skewX tekee laatikosta suunnikkaan. Pieni rotate säilyttää lööppimäisen vinouden. */
.poster-callout {
    position: absolute;
    z-index: 15;
    right: 1.2%;
    top: 55%;
    max-width: 32%;
    box-sizing: border-box;
    padding: .18em .32em .22em;
    background: #e11922;
    color: #fff;
    border: 4px solid #fff;
    font-family: "Oswald", "Arial Narrow", sans-serif;
    font-size: clamp(20px, 2.9vw, 42px);
    font-weight: 700;
    font-style: italic;
    line-height: .9;
    letter-spacing: -.035em;
    text-transform: uppercase;
    transform: skewX(-10deg) rotate(-2deg);
    transform-origin: center;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, .08);

}

.poster-callout.is-empty {
    display: none;

}

/* Kolme kuvaa: pääkuvan alareuna on noin 57 % kohdalla. */
.images-3 .poster-callout {
    right: 1.2%;
    top: 55%;
    max-width: 32%;

}

/* Kaksi kuvaa: pääkuvan alareuna on noin 61 % kohdalla. */
.images-2 .poster-callout {
    right: 1.2%;
    top: 59%;
    max-width: 31%;

}

/* Yksi kuva: pääkuvan alareuna on noin 70 % kohdalla. */
.images-1 .poster-callout {
    right: 1.2%;
    top: 68%;
    max-width: 34%;

}

/* Ilman kuvaa lisänosto toimii itsenäisenä nostolaatikkona. */
.images-0 .poster-callout {
    right: 3%;
    top: 76%;
    max-width: 38%;

}

@media (max-width: 560px) {
    .poster-callout {
        border-width: 2px;

    }
    .loopit-image-remove {
        font-size: 11px;
        padding: 4px 6px;

    }

}

/* 0.4.2-alpha — Yhden kuvan Klassinen 1A viimeistely.
   Pääkuva on yhden kuvan taitossa selvästi suurempi.
   Ingressi alkaa samasta vasemmasta linjasta kuin pääotsikko.
   Lisänosto pysyy kiinni pääkuvan oikeassa alakulmassa. */
.headline-line-2 {
    margin-top: .10em;
}

.images-1 .poster-photo-1 {
    right: 3.2%;
    top: 5%;
    width: 45%;
    height: 76%;
    transform: rotate(.6deg);
    z-index: 4;
}

.images-1 .poster-ingress {
    left: 6.2%;
    width: 55%;
    z-index: 13;
}

.images-1 .poster-callout {
    right: 3.2%;
    top: 68%;
    max-width: 34%;
}


/* 0.4.4-alpha — Klassinen 1A/2A taittojen lukitut sijainnit.
   1A: ingressin vasen linja 6.2 %, lisänosto pääkuvan oikeaan alakulmaan.
   2A: toinen kuva vasempaan alakulmaan niin, ettei pitkä ingressi peitä sitä. */
.images-1 .poster-ingress {
    left: 6.2%;
    width: 55%;
    z-index: 13;
}

.images-2 .poster-photo-2 {
    left: 4%;
    bottom: 1.5%;
    width: 32%;
    height: 24%;
    transform: rotate(3deg);
    z-index: 8;
}

/* 0.4.5-alpha — Klassinen 0A: kuvaton lööppi on keskitetty typografinen taitto.
   PALJASTUS!, otsikko, ingressin tekstialue ja lisänosto ovat samalla pystyakselilla.
   Ingressin teksti säilyy vasemmalle tasattuna. */
.images-0 .poster-sticker {
    left: 50%;
    transform: translateX(-50%) rotate(-4deg);
    transform-origin: center;
}

.images-0 .poster-headline {
    left: 50%;
    width: 91%;
    transform: translateX(-50%) rotate(-4deg);
    transform-origin: center top;
    text-align: left;
}

.images-0 .headline-line {
    margin-left: auto;
    margin-right: auto;
    transform-origin: center;
}

.images-0 .poster-ingress {
    left: 50%;
    width: 70%;
    transform: translateX(-50%) rotate(-2.5deg) scaleX(.94);
    transform-origin: center top;
    text-align: left;
}

.images-0 .poster-callout {
    left: 50%;
    right: auto;
    top: 86%;
    max-width: 38%;
    transform: translateX(-50%) skewX(-10deg) rotate(-2deg);
    transform-origin: center;
}


/* 0.5.0-alpha — editorin tallennus- ja julkaisutoiminnot. */
.loopit-action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.loopit-save-draft {
    border: 1px solid #c8d0da;
    border-radius: 9px;
    padding: 14px;
    background: #fff;
    color: var(--blue);
    font-size: 16px;
    font-weight: 850;
    cursor: pointer;
}
.loopit-action-buttons .loopit-publish { width: auto; }
.loopit-save-draft:disabled,
.loopit-publish:disabled { opacity: .55; cursor: wait; }
.loopit-save-draft[hidden] { display: none; }
.loopit-save-draft[hidden] + .loopit-publish { grid-column: 1 / -1; }

/* 0.6.0-alpha — Havainto 1A (alkuperäinen pohja)
   Kuvapainotteinen taitto: yksi valokuva hallitsee pintaa ja teksti asettuu
   kuvan päälle. Klassisen lööpin CSS jätetään ennalleen. */
.poster-style-havainto.loopit-poster {
    padding: 0;
    background: #111;
    color: #fff;
}

.poster-style-havainto .poster-paper-inner {
    background: #111;
}

.poster-style-havainto .poster-brand {
    position: absolute;
    top: 3.2%;
    left: 4%;
    z-index: 30;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: .30em .58em .34em;
    background: rgba(0, 0, 0, .82);
    border: 0;
    font-family: "Oswald", "Arial Narrow", sans-serif;
    font-size: clamp(14px, 1.6vw, 24px);
    line-height: 1;
    letter-spacing: .055em;
}

/* Havainto-tunniste syntyy taitosta, joten editorin Ylähuuto-kenttää ei tarvita. */
.poster-style-havainto .poster-brand::after {
    content: "HAVAinto";
    display: inline-block;
    margin-left: .55em;
    padding-left: .55em;
    border-left: 2px solid rgba(255, 255, 255, .55);
    color: #fff;
    text-transform: uppercase;
}

.poster-style-havainto .poster-kicker,
.poster-style-havainto .poster-sticker {
    display: none;
}

.poster-style-havainto .poster-stage {
    position: relative;
    flex: 1 1 100%;
    margin: 0;
    background: #252525;
    overflow: hidden;
}

/* Kevyt tumma häivytys tekee valkoisesta tekstistä luettavan myös vaalealla kuvalla. */
.poster-style-havainto .poster-stage::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, .05) 0%,
        rgba(0, 0, 0, 0) 36%,
        rgba(0, 0, 0, .12) 52%,
        rgba(0, 0, 0, .76) 100%
    );
}

.poster-style-havainto .poster-images {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.poster-style-havainto .poster-images:empty::before {
    content: "LISÄÄ KUVA";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .38);
    font-family: "Oswald", "Arial Narrow", sans-serif;
    font-size: clamp(28px, 5vw, 70px);
    font-weight: 700;
    letter-spacing: .08em;
}

.poster-style-havainto .poster-photo,
.poster-style-havainto.images-1 .poster-photo-1 {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border: 0;
    outline: 0;
    transform: none;
    object-fit: cover;
    box-shadow: none;
}

.poster-style-havainto .poster-headline,
.poster-style-havainto.images-0 .poster-headline,
.poster-style-havainto.images-1 .poster-headline {
    position: absolute;
    left: 5.2%;
    top: auto;
    bottom: 18.5%;
    z-index: 12;
    width: 89.6%;
    margin: 0;
    color: #fff;
    font-family: "Oswald", "Arial Narrow", sans-serif;
    font-style: normal;
    font-weight: 700;
    line-height: .92;
    letter-spacing: -.035em;
    text-align: left;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .42);
    transform: none;
}

.poster-style-havainto .headline-line,
.poster-style-havainto.images-0 .headline-line {
    display: block;
    width: auto;
    max-width: 100%;
    margin: 0;
    color: inherit;
    line-height: .92;
    white-space: normal;
    text-shadow: inherit;
    transform: none;
}

.poster-style-havainto .headline-line-2,
.poster-style-havainto .headline-line-3 {
    font-size: 1em;
    margin-top: .02em;
}

.poster-style-havainto .poster-ingress,
.poster-style-havainto.images-0 .poster-ingress,
.poster-style-havainto.images-1 .poster-ingress {
    position: absolute;
    left: 5.4%;
    top: auto !important;
    bottom: 6.3%;
    z-index: 12;
    width: 78%;
    max-height: 10.5%;
    margin: 0;
    overflow: hidden;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: clamp(15px, 2.05vw, 29px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.015em;
    text-align: left;
    text-shadow: 0 1px 5px rgba(0, 0, 0, .6);
    transform: none;
}

.poster-style-havainto .poster-callout,
.poster-style-havainto.images-0 .poster-callout,
.poster-style-havainto.images-1 .poster-callout {
    top: 5%;
    right: 4%;
    left: auto;
    bottom: auto;
    z-index: 20;
    max-width: 38%;
    border: 0;
    padding: .25em .48em .3em;
    background: #e11922;
    color: #fff;
    font-size: clamp(17px, 2.3vw, 33px);
    transform: rotate(1.5deg);
    box-shadow: 2px 3px 0 rgba(0, 0, 0, .18);
}

.poster-style-havainto .poster-footer {
    position: absolute;
    right: 4%;
    bottom: 2.2%;
    z-index: 20;
    width: auto;
    height: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .78);
    font-size: clamp(9px, 1vw, 14px);
    letter-spacing: .05em;
}

/* Editorissa Havainto ei muuta rakennetta. Käyttämättömät kohdat vain himmenevät. */
.loopit-label.is-disabled {
    color: #a4adb7;
}

.loopit-label.is-disabled small::after {
    content: " · ei käytössä tässä taitossa";
}

.loopit-editor input:disabled,
.loopit-editor textarea:disabled,
.loopit-image-slot.is-disabled {
    opacity: .48;
}

.loopit-editor input:disabled {
    background: #eef1f4;
    cursor: not-allowed;
}

.loopit-image-slot.is-disabled .loopit-image-picker {
    background: #eef1f4;
    cursor: not-allowed;
}

.loopit-image-slot.is-disabled .loopit-image-remove {
    cursor: not-allowed;
}

/* 0.6.1-alpha — Havainto 1A:n tarkennukset
   Referenssin suunta: punainen HAVAinto-tunniste, suora raskas otsikko,
   otsikon valinnainen keltainen korostus ja toinen vinossa oleva lisäkuva. */
.loopit-headline-tools {
    min-height: 34px;
    margin-top: 7px;
    display: flex;
    align-items: center;
    gap: 9px;
}

#loopit-highlight-selection {
    border: 1px solid #cbd4dd;
    border-radius: 7px;
    padding: 6px 9px;
    background: #fff;
    color: #34475d;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}

#loopit-highlight-selection:disabled,
#loopit-highlight-selection.is-disabled {
    opacity: .42;
    cursor: default;
}

#loopit-highlight-note {
    color: #7c8996;
    font-size: 12px;
}

#loopit-highlight-note.is-disabled {
    opacity: .48;
}

.poster-style-havainto .poster-brand {
    top: 2.6%;
    left: 3.2%;
    padding: .30em .58em .36em;
    background: #e11922;
    color: #fff;
    font-family: "Oswald", "Arial Narrow", sans-serif;
    font-size: clamp(20px, 2.7vw, 39px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .015em;
    text-transform: uppercase;
    box-shadow: 3px 4px 0 rgba(0, 0, 0, .16);
    transform: rotate(-1deg);
}

.poster-style-havainto .poster-brand::after {
    content: none;
}

.poster-style-havainto .poster-headline,
.poster-style-havainto.images-0 .poster-headline,
.poster-style-havainto.images-1 .poster-headline,
.poster-style-havainto.images-2 .poster-headline {
    left: 4.2%;
    bottom: 19.5%;
    width: 91.5%;
    font-family: "Oswald", "Arial Narrow", sans-serif;
    font-style: normal;
    font-weight: 700;
    line-height: .90;
    letter-spacing: -.035em;
    transform: none;
}

.poster-style-havainto .headline-highlight {
    color: #ffd51f;
}

.poster-style-havainto .poster-ingress,
.poster-style-havainto.images-0 .poster-ingress,
.poster-style-havainto.images-1 .poster-ingress,
.poster-style-havainto.images-2 .poster-ingress {
    left: 4.5%;
    bottom: 5.6%;
    width: 61%;
    max-height: 11.5%;
    font-family: "Oswald", "Arial Narrow", sans-serif;
    font-weight: 600;
    line-height: 1.08;
}

/* Pääkuva on edelleen koko pinnan taustakuva. */
.poster-style-havainto.images-2 .poster-photo-1 {
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    transform: none;
    object-fit: cover;
    box-shadow: none;
}

/* Toinen kuva toimii irrallisena havaintoa täydentävänä lähikuvana. */
.poster-style-havainto.images-2 .poster-photo-2 {
    inset: auto;
    right: 3.5%;
    bottom: 4.2%;
    width: 29%;
    height: 29%;
    border: 5px solid #fff;
    object-fit: cover;
    transform: rotate(3deg);
    box-shadow: 0 5px 12px rgba(0, 0, 0, .42);
}


/* 0.6.2-alpha — Havainto: pääotsikon koon korjaus.
   Havainto käyttää omaa sovitusta eikä Klassikon pienennyslogiikkaa. */
.poster-style-havainto .poster-headline,
.poster-style-havainto.images-0 .poster-headline,
.poster-style-havainto.images-1 .poster-headline,
.poster-style-havainto.images-2 .poster-headline {
    font-style: normal;
}

.poster-style-havainto .headline-line,
.poster-style-havainto.images-0 .headline-line,
.poster-style-havainto.images-1 .headline-line,
.poster-style-havainto.images-2 .headline-line {
    width: max-content;
    max-width: 100%;
    white-space: nowrap;
    font-style: normal;
    line-height: .90;
}


/* 0.6.3-alpha — Havainto 1A:n mittasuhde ja typografinen viimeistely.
   Havainto on Klassikkoa hieman matalampi. Otsikkoryhmä ankkuroidaan
   yläreunasta, jotta se ei painu julisteen alalaitaan. */
.poster-style-havainto.loopit-poster {
    aspect-ratio: 9 / 10;
}

.poster-style-havainto .poster-headline,
.poster-style-havainto.images-0 .poster-headline,
.poster-style-havainto.images-1 .poster-headline,
.poster-style-havainto.images-2 .poster-headline {
    top: 55%;
    bottom: auto;
}

.poster-style-havainto .poster-ingress,
.poster-style-havainto.images-0 .poster-ingress,
.poster-style-havainto.images-1 .poster-ingress,
.poster-style-havainto.images-2 .poster-ingress {
    top: 79%;
    bottom: auto;
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
    font-weight: 700;
    line-height: 1.10;
}


/* 0.6.4-alpha — Havainto 1A: ingressin vakaa paikannus.
   Havainto ei käytä JavaScriptin laskemaa inline-top-arvoa. Tämä viimeinen
   sääntö neutraloi aiempien alpha-versioiden ristiriitaiset top/bottom-arvot. */
.poster-style-havainto .poster-ingress,
.poster-style-havainto.images-0 .poster-ingress,
.poster-style-havainto.images-1 .poster-ingress,
.poster-style-havainto.images-2 .poster-ingress {
    top: 79% !important;
    bottom: auto !important;
    left: 4.5%;
    width: 61%;
    max-height: 11.5%;
    margin: 0;
    overflow: hidden;
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
    font-weight: 700;
    line-height: 1.10;
}

/* 0.6.5-alpha — Havainto 1A:n matalampi testiversio.
   Vain Havainto-taiton kuvasuhde muuttuu. Klassikko säilyy ennallaan. */
.poster-style-havainto.loopit-poster {
    aspect-ratio: 1 / 1;
}

/* 0.7.1-alpha — Uutinen 1A
   Sinivalkoinen, valokuvapohjainen uutistaitto. Otsikon tausta muistuttaa
   puoliläpinäkyvää valkoista teippiä, mutta pysyy CSS:nä helposti säädettävänä. */
.poster-style-uutinen.loopit-poster {
    aspect-ratio: 4 / 5;
    background: #e7eef3;
}

.poster-style-uutinen .poster-paper-inner {
    background: #dcecf8;
}

.poster-style-uutinen .poster-brand {
    left: 3.2%;
    top: 2.8%;
    width: auto;
    height: auto;
    padding: .35em .72em .30em;
    background: rgba(18, 112, 196, .94);
    color: #fff;
    font-family: "Oswald", "Arial Narrow", sans-serif;
    font-size: clamp(18px, 3.4vw, 36px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .01em;
    transform: rotate(-1deg);
    z-index: 30;
}

.poster-style-uutinen .poster-brand::after,
.poster-style-uutinen .poster-kicker,
.poster-style-uutinen .poster-sticker,
.poster-style-uutinen .poster-callout {
    display: none;
}

.poster-style-uutinen .poster-stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.poster-style-uutinen .poster-images,
.poster-style-uutinen .poster-photo,
.poster-style-uutinen.images-1 .poster-photo-1 {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.poster-style-uutinen .poster-photo,
.poster-style-uutinen.images-1 .poster-photo-1 {
    object-fit: cover;
    border: 0;
    box-shadow: none;
    transform: none;
}

.poster-style-uutinen .poster-images:empty::before {
    content: "LISÄÄ UUTISKUVA";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #cfe6f5, #8fc1e3);
    color: rgba(10, 66, 110, .55);
    font-family: "Oswald", "Arial Narrow", sans-serif;
    font-size: clamp(24px, 5vw, 58px);
    font-weight: 700;
}

/* Valkoinen teippipinta otsikon takana. Läpinäkyvyys jättää kuvan elämään alta. */
.poster-style-uutinen .poster-headline,
.poster-style-uutinen.images-0 .poster-headline,
.poster-style-uutinen.images-1 .poster-headline {
    position: absolute;
    left: 3.2%;
    top: 10.5%;
    width: 91%;
    margin: 0;
    padding: .16em .20em .20em;
    background: rgba(255, 255, 255, .82);
    box-shadow:
        8px 3px 0 rgba(255, 255, 255, .18),
        -5px -2px 0 rgba(255, 255, 255, .12);
    clip-path: polygon(0 3%, 99% 0, 100% 94%, 2% 100%);
    color: #080808;
    font-family: "Oswald", "Arial Narrow", sans-serif;
    font-weight: 700;
    font-style: normal;
    line-height: .92;
    letter-spacing: -.025em;
    text-transform: none;
    text-shadow: none;
    -webkit-text-stroke: 0;
    paint-order: normal;
    transform: rotate(-.5deg);
    z-index: 20;
}

.poster-style-uutinen .headline-line {
    display: block;
    width: max-content;
    max-width: 100%;
    margin: 0;
    color: #080808;
    font-style: normal;
    line-height: .92;
    white-space: nowrap;
    -webkit-text-stroke: 0;
    paint-order: normal;
    text-shadow: none;
    transform: none;
}

.poster-style-uutinen .headline-highlight {
    color: #1374c5;
}

/* Lisäteksti on oma paperilappunsa kuvan päällä. */
.poster-style-uutinen .poster-ingress,
.poster-style-uutinen.images-0 .poster-ingress,
.poster-style-uutinen.images-1 .poster-ingress {
    position: absolute;
    left: 4.2%;
    top: auto !important;
    bottom: 5.2% !important;
    width: 58%;
    max-height: 24%;
    margin: 0;
    padding: .72em .82em .78em;
    overflow: hidden;
    background: rgba(255, 255, 255, .92);
    color: #111;
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
    font-size: clamp(15px, 2.15vw, 28px);
    font-weight: 650;
    line-height: 1.18;
    letter-spacing: -.015em;
    text-shadow: none;
    transform: rotate(-1deg);
    z-index: 22;
}

.poster-style-uutinen .poster-footer {
    position: absolute;
    left: auto;
    top: auto;
    right: 2.4%;
    bottom: 1.2%;
    width: auto;
    height: auto;
    flex: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .94);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .72);
    z-index: 25;
}

/* 0.8.1-alpha — Mielipide 1A
   Pääkuva toimii koko lööpin taustana. Punainen otsikkokenttä ja
   valkoinen ingressikaistale ladotaan kuvan päälle. */
.poster-style-mielipide.loopit-poster {
    aspect-ratio: 4 / 5;
    background: transparent;
}

.poster-style-mielipide .poster-paper-inner {
    background: transparent;
}

.poster-style-mielipide .poster-stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.poster-style-mielipide .poster-brand {
    position: absolute;
    left: 3.2%;
    top: 2.8%;
    width: auto;
    height: auto;
    padding: .30em .62em .28em;
    background: #e11922;
    color: #fff;
    font-family: "Oswald", "Arial Narrow", sans-serif;
    font-size: clamp(18px, 3.2vw, 34px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .01em;
    transform: rotate(-1deg);
    z-index: 31;
}

.poster-style-mielipide .poster-brand::after,
.poster-style-mielipide .poster-kicker,
.poster-style-mielipide .poster-sticker,
.poster-style-mielipide .poster-callout {
    display: none;
}

/* Yksi kuva täyttää koko lööpin ja toimii taiton taustana. */
.poster-style-mielipide .poster-images {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 2;
}

.poster-style-mielipide .poster-photo,
.poster-style-mielipide.images-1 .poster-photo-1 {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    box-shadow: none;
    transform: none;
}

.poster-style-mielipide .poster-images:empty::before {
    content: "LISÄÄ KUVA";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: #d7d4cd;
    color: rgba(0, 0, 0, .28);
    font-family: "Oswald", "Arial Narrow", sans-serif;
    font-size: clamp(24px, 5vw, 58px);
    font-weight: 700;
}

/* Massiivinen pääotsikko on Mielipiteen tunnusmerkki. */
.poster-style-mielipide .poster-headline,
.poster-style-mielipide.images-0 .poster-headline,
.poster-style-mielipide.images-1 .poster-headline {
    position: absolute;
    left: 2.4%;
    top: 8.5%;
    width: 95.2%;
    margin: 0;
    padding: .18em .22em .22em;
    background: #e11922;
    color: #fff;
    font-family: "Oswald", "Arial Narrow", sans-serif;
    font-weight: 700;
    font-style: normal;
    line-height: .88;
    letter-spacing: -.035em;
    text-transform: uppercase;
    text-shadow: none;
    -webkit-text-stroke: 0;
    paint-order: normal;
    transform: rotate(-1.4deg);
    transform-origin: center;
    z-index: 20;
}

.poster-style-mielipide .headline-line {
    display: block;
    width: max-content;
    max-width: 100%;
    margin: 0;
    color: #fff;
    font-style: normal;
    line-height: .88;
    white-space: nowrap;
    text-transform: uppercase;
    text-shadow: none;
    -webkit-text-stroke: 0;
    paint-order: normal;
    transform: none;
}

/* Ingressi leikkaa punaisen otsikon ja kuvan väliin kuin painettu paperikaistale. */
.poster-style-mielipide .poster-ingress,
.poster-style-mielipide.images-0 .poster-ingress,
.poster-style-mielipide.images-1 .poster-ingress {
    position: absolute;
    left: 3.4%;
    top: 34% !important;
    bottom: auto !important;
    width: 91%;
    max-height: 16%;
    margin: 0;
    padding: .55em .65em .62em;
    overflow: hidden;
    background: rgba(255, 255, 255, .94);
    color: #111;
    font-family: "Oswald", "Arial Narrow", sans-serif;
    font-size: clamp(17px, 2.55vw, 32px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.015em;
    text-shadow: none;
    transform: rotate(-1.4deg);
    z-index: 23;
}

.poster-style-mielipide .poster-footer {
    position: absolute;
    left: auto;
    top: auto;
    right: 2.4%;
    bottom: 1.2%;
    width: auto;
    height: auto;
    flex: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .95);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .75);
    z-index: 25;
}


/* 0.8.2-alpha — Mielipide 1A: rohkeampi vinous ja lyhyt otsikko yhdelle riville. */
.poster-style-mielipide .poster-brand {
    transform: rotate(-2.2deg);
    transform-origin: center;
}

.poster-style-mielipide .poster-headline,
.poster-style-mielipide.images-0 .poster-headline,
.poster-style-mielipide.images-1 .poster-headline {
    top: 10.5%;
    padding: .22em .24em .26em;
    transform: rotate(-3.2deg);
    transform-origin: center;
}

.poster-style-mielipide .poster-ingress,
.poster-style-mielipide.images-0 .poster-ingress,
.poster-style-mielipide.images-1 .poster-ingress {
    top: 29.5% !important;
    transform: rotate(-1.2deg);
    transform-origin: center;
}

/* 0.9.5-alpha — Kuvajuttu 1A
   Kuvajutussa valokuva on pääasia. Yksi kuva täyttää pinnan; toinen ja kolmas
   toimivat alareunan irrallisina kuvakortteina. */
.poster-style-kuvajuttu.loopit-poster {
    aspect-ratio: 14 / 13;
    background: #111;
}

.poster-style-kuvajuttu .poster-paper-inner {
    background: #111;
}

.poster-style-kuvajuttu .poster-stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.poster-style-kuvajuttu .poster-brand {
    position: absolute;
    left: 3.2%;
    top: 2.8%;
    width: auto;
    height: auto;
    padding: .28em .58em .30em;
    background: rgba(0, 0, 0, .78);
    color: #fff;
    font-family: "Oswald", "Arial Narrow", sans-serif;
    font-size: clamp(17px, 3vw, 32px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
    z-index: 31;
}

.poster-style-kuvajuttu .poster-brand::after,
.poster-style-kuvajuttu .poster-kicker,
.poster-style-kuvajuttu .poster-sticker,
.poster-style-kuvajuttu .poster-callout {
    display: none;
}

.poster-style-kuvajuttu .poster-images {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 2;
}

.poster-style-kuvajuttu .poster-images:empty::before {
    content: "LISÄÄ KUVA";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: #d6d3ca;
    color: rgba(0, 0, 0, .28);
    font-family: "Oswald", "Arial Narrow", sans-serif;
    font-size: clamp(24px, 5vw, 58px);
    font-weight: 700;
}

.poster-style-kuvajuttu .poster-photo-1 {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    box-shadow: none;
    transform: none;
}

/* Tumma häivytys antaa otsikolle rauhallisen pohjan peittämättä kuvaa laatikolla. */
.poster-style-kuvajuttu .poster-stage::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 52%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .78));
    pointer-events: none;
    z-index: 10;
}

.poster-style-kuvajuttu .poster-headline,
.poster-style-kuvajuttu.images-0 .poster-headline,
.poster-style-kuvajuttu.images-1 .poster-headline,
.poster-style-kuvajuttu.images-2 .poster-headline,
.poster-style-kuvajuttu.images-3 .poster-headline {
    position: absolute;
    left: 4.2%;
    top: auto;
    bottom: 29%;
    width: 91.6%;
    margin: 0;
    padding: 0;
    background: transparent;
    color: #fff;
    font-family: "Oswald", "Arial Narrow", sans-serif;
    font-weight: 700;
    font-style: normal;
    line-height: .94;
    letter-spacing: -.025em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .55);
    -webkit-text-stroke: 0;
    paint-order: normal;
    transform: none;
    text-transform: none;
    z-index: 20;
}

.poster-style-kuvajuttu .headline-line {
    display: block;
    width: max-content;
    max-width: 100%;
    margin: 0;
    color: #fff;
    font-style: normal;
    line-height: .94;
    white-space: nowrap;
    text-shadow: inherit;
    -webkit-text-stroke: 0;
    transform: none;
}

.poster-style-kuvajuttu .poster-ingress,
.poster-style-kuvajuttu.images-0 .poster-ingress,
.poster-style-kuvajuttu.images-1 .poster-ingress,
.poster-style-kuvajuttu.images-2 .poster-ingress,
.poster-style-kuvajuttu.images-3 .poster-ingress {
    position: absolute;
    left: 4.4%;
    top: auto !important;
    bottom: 22.5% !important;
    width: 68%;
    margin: 0;
    padding: 0;
    background: transparent;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: clamp(15px, 2.05vw, 27px);
    font-weight: 650;
    line-height: 1.18;
    letter-spacing: -.01em;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .72);
    z-index: 21;
}

/* Lisäkuvat tulevat pieninä valokuvakortteina alareunaan. */
.poster-style-kuvajuttu.images-2 .poster-photo-2,
.poster-style-kuvajuttu.images-3 .poster-photo-2 {
    position: absolute;
    right: 4.5%;
    bottom: 3.8%;
    width: 25%;
    height: 19%;
    object-fit: cover;
    border: .45em solid #fff;
    box-shadow: 0 .35em 1em rgba(0, 0, 0, .42);
    transform: rotate(2.2deg);
    z-index: 24;
}

.poster-style-kuvajuttu.images-3 .poster-photo-3 {
    position: absolute;
    right: 27%;
    bottom: 2.7%;
    width: 23%;
    height: 17.5%;
    object-fit: cover;
    border: .45em solid #fff;
    box-shadow: 0 .35em 1em rgba(0, 0, 0, .42);
    transform: rotate(-2.5deg);
    z-index: 23;
}

.poster-style-kuvajuttu .poster-footer {
    position: absolute;
    left: 2.5%;
    top: auto;
    bottom: 1.2%;
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .94);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
    z-index: 30;
}


/* ================================================================
   0.9.6-alpha – Lööppiseinä
   Kortit käyttävät alkuperäisiä julisteita skaalattuina.
   Generaattorin ja yksittäisen lööpin tyylejä ei muuteta.
   ================================================================ */
body.loopit-wall-page {
    background: #1C1D1D;
    color: #F5F5F5;
    margin: 0;
    min-height: 100vh;
}
.loopit-wall-header {
    max-width: 1500px;
    margin: auto;
    padding: 22px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.loopit-wall-logo {
    color: #FFFFFF;
    font-weight: 900;
    font-size: 28px;
    text-decoration: none;
}
.loopit-wall-logo span { color: #FFDF35; }
.loopit-wall-create {
    background: #FFDF35;
    color: #1C1D1D;
    border-radius: 7px;
    padding: 12px 18px;
    font-weight: 800;
    text-decoration: none;
}
.loopit-wall-main { max-width: 1500px; margin: auto; padding: 8px 28px 70px; }
.loopit-wall-intro h1 { color: #FFFFFF; font-size: 32px; margin: 10px 0 4px; }
.loopit-wall-intro p { color: #BBBBBB; margin: 0 0 22px; }
.loopit-wall-filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 26px; }
.loopit-wall-filters a {
    background: #343636;
    color: #E8E8E8;
    border-radius: 6px;
    padding: 9px 14px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}
.loopit-wall-filters a.is-active { background: #FFDF35; color: #1C1D1D; }
.loopit-wall-grid { column-count: 4; column-gap: 20px; }
.loopit-wall-card { display: inline-block; width: 100%; break-inside: avoid; margin: 0 0 22px; vertical-align: top; }
.loopit-wall-poster-link { display: block; text-decoration: none; }
.loopit-wall-poster-frame { width: 100%; aspect-ratio: 4 / 5; overflow: hidden; position: relative; }
.loopit-wall-poster-frame[data-ratio="14/13"] { aspect-ratio: 14 / 13; }
.loopit-wall-poster-canvas { width: 700px; height: 875px; transform-origin: top left; position: absolute; top: 0; left: 0; }
.loopit-wall-poster-canvas .loopit-poster { width: 700px; height: 875px; max-width: none; margin: 0; box-sizing: border-box; }
.loopit-wall-poster-frame[data-ratio="14/13"] .loopit-wall-poster-canvas,
.loopit-wall-poster-frame[data-ratio="14/13"] .loopit-wall-poster-canvas .loopit-poster { height: 650px; }
.loopit-wall-card-meta { display: flex; align-items: center; gap: 8px; padding: 10px 2px 2px; color: #E6E6E6; font-size: 13px; }
.loopit-wall-author { display: flex; align-items: center; gap: 7px; min-width: 0; font-weight: 700; }
.loopit-wall-author span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loopit-wall-avatar { width: 26px; height: 26px; border-radius: 50%; }
.loopit-wall-card-meta time { margin-left: auto; color: #AAAAAA; white-space: nowrap; font-size: 12px; }
.loopit-wall-empty { color: #DDDDDD; padding: 35px 0; }
.loopit-wall-pages { display: flex; gap: 9px; margin-top: 24px; }
.loopit-wall-pages a { color: #FFFFFF; padding: 8px 12px; background: #343636; border-radius: 4px; text-decoration: none; }
.loopit-wall-pages a[aria-current="page"] { background: #FFDF35; color: #1C1D1D; }
@media (max-width: 1100px) { .loopit-wall-grid { column-count: 3; } }
@media (max-width: 760px) { .loopit-wall-grid { column-count: 2; } }
@media (max-width: 520px) {
    .loopit-wall-grid { column-count: 1; }
    .loopit-wall-header { padding: 16px; }
    .loopit-wall-main { padding: 8px 16px 50px; }
    .loopit-wall-logo { font-size: 23px; }
    .loopit-wall-create { padding: 10px 12px; font-size: 13px; }
}

/* Omien julkaisujen muokkauslinkki, vain tekijälle */
.loopit-owner-actions { text-align:center; margin:24px auto 16px; }
.loopit-edit-link { display:inline-block; padding:12px 22px; border-radius:7px; background:#183c68; color:#fff !important; text-decoration:none; font-weight:700; }
.loopit-edit-link:hover, .loopit-edit-link:focus-visible { background:#285b96; color:#fff !important; }

/* Omat lööpit */
.loopit-my-meta{display:flex;justify-content:space-between;align-items:center;color:#ddd;font-size:13px;padding:12px 4px 8px;gap:8px}.loopit-my-status{font-weight:700}.loopit-my-actions{display:flex;gap:10px;align-items:center;padding:0 4px 18px;flex-wrap:wrap}.loopit-my-actions form{margin:0}.loopit-my-edit,.loopit-my-delete{font:inherit;font-weight:700;font-size:14px;cursor:pointer;border-radius:6px;padding:9px 16px;text-decoration:none}.loopit-my-edit{background:#f1c644;color:#181818}.loopit-my-delete{background:transparent;color:#eee;border:1px solid #777}.loopit-my-notice{color:#f1c644;margin:16px 0}.loopit-my-card{min-width:0}

/* 0.9.10-alpha — Uutinen: käyttäjän vesivärigrafiikka ja sivellinjälki.
   Kaikki muut julistetyylit jäävät muuttumattomiksi. */
.poster-style-uutinen.loopit-poster {
    aspect-ratio: 20 / 23;
    padding: 0;
}
.poster-style-uutinen .poster-paper-inner {
    position: relative;
    background: #e7eef5;
}
/* Grafiikka valokuvan päällä, mutta kaikkien tekstien alapuolella. */
.poster-style-uutinen .poster-paper-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 12;
    pointer-events: none;
    background: url("vesivari-800x920.png") center / 100% 100% no-repeat;
}
.poster-style-uutinen .poster-brand {
    position: absolute;
    left: 3.5%;
    top: 2.5%;
    width: auto;
    min-width: 24%;
    height: auto;
    padding: .38em .90em .40em;
    margin: 0;
    background: url("sivellin-400x120.png") center / 100% 100% no-repeat;
    color: #fff;
    transform: rotate(-1deg);
    z-index: 30;
}
.poster-style-uutinen .poster-headline,
.poster-style-uutinen.images-0 .poster-headline,
.poster-style-uutinen.images-1 .poster-headline {
    top: 12.5%;
    left: 5%;
    width: 90%;
    padding: 0;
    margin: 0;
    background: transparent;
    box-shadow: none;
    clip-path: none;
    transform: rotate(-3deg);
    color: #090909;
    z-index: 20;
}
.poster-style-uutinen .poster-ingress,
.poster-style-uutinen.images-0 .poster-ingress,
.poster-style-uutinen.images-1 .poster-ingress {
    top: 35% !important;
    bottom: auto !important;
    left: 5%;
    width: 88%;
    max-height: 21%;
    padding: 0;
    background: transparent;
    color: #111;
    font-weight: 700;
    transform: rotate(-3deg);
    z-index: 22;
}
/* Vesivärikerroksen oma kuluma korvaa yleisen paperiefektin. */
.poster-style-uutinen.loopit-poster::before,
.poster-style-uutinen.loopit-poster::after { display: none; }

/* 0.9.11-alpha — Uutinen: suurempi, tiiviimpi pääotsikko. */
.poster-style-uutinen .poster-headline,
.poster-style-uutinen.images-0 .poster-headline,
.poster-style-uutinen.images-1 .poster-headline {
    left: 3%;
    width: 95%;
    line-height: .88;
    letter-spacing: -.035em;
}
.poster-style-uutinen .headline-line { line-height: .88; letter-spacing: -.035em; }

/* 0.9.12-alpha: Uutinen-otsikon lopullinen sovitus ilman latausvälähdystä.
   Vaakasuuntainen tiivistys sallii suuremman kirjainkorkeuden. */
.poster-style-uutinen .poster-headline { visibility: hidden; }
.poster-style-uutinen.loopit-uutinen-fitted .poster-headline { visibility: visible; }
.poster-style-uutinen .headline-line {
    max-width: none;
    transform: scaleX(.87);
    transform-origin: left center;
}

/* 0.9.13-alpha: Uutinen-otsikko ja ingressi suorassa. */
.poster-style-uutinen .poster-headline,
.poster-style-uutinen.images-0 .poster-headline,
.poster-style-uutinen.images-1 .poster-headline,
.poster-style-uutinen .poster-ingress,
.poster-style-uutinen.images-0 .poster-ingress,
.poster-style-uutinen.images-1 .poster-ingress { transform: none; }

/* Likes: outside the poster, never part of the printed artwork. */
.loopit-like-row{display:flex;justify-content:flex-start;align-items:center;padding:7px 10px 0}
.loopit-single-like{justify-content:center;margin:8px auto 4px}
.loopit-like-button{display:inline-flex;align-items:center;gap:7px;cursor:pointer;border:1px solid rgba(180,180,180,.4);border-radius:22px;background:transparent;color:inherit;font:600 14px/1.2 system-ui,sans-serif;padding:6px 13px;min-height:34px}
.loopit-like-button:hover{border-color:#dd6875}
.loopit-like-button.is-liked{color:#e65368;border-color:#e65368}
.loopit-like-heart{font-size:23px;line-height:1}
.loopit-like-button:disabled{opacity:.65;cursor:wait}

/* 0.9.15: compact wall reactions beside author metadata. */
.loopit-wall-card-meta{padding:8px 2px 2px;gap:7px;min-width:0}
.loopit-wall-card-meta .loopit-wall-author{flex:1 1 auto;min-width:0}
.loopit-wall-card-meta time{margin-left:0;flex:0 0 auto}
.loopit-wall-card-meta .loopit-like-row{padding:0;margin-left:3px;flex:0 0 auto}
.loopit-like-button{min-height:28px;padding:4px 7px;gap:5px;font-size:12px}
.loopit-like-heart{font-size:16px}
@media(max-width:380px){.loopit-wall-card-meta{gap:5px}.loopit-wall-card-meta time{font-size:10px}}

/* 0.9.16: PNG-esikatselun vienti, ei muutoksia lööppipohjiin */
.loopit-export-tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px}
#loopit-download-png{background:#ffdd31;color:#191919;border:0;border-radius:7px;padding:10px 15px;font:inherit;font-weight:700;cursor:pointer}
#loopit-download-png:disabled{opacity:.55;cursor:wait}
#loopit-export-status{font-size:13px;color:#bdbdbd}

/* 0.9.17: Prevent headline resize flash on the single poster page. */
.loopit-single .loopit-poster:not(.loopit-initial-fit-done) .poster-headline { visibility: hidden; }
.loopit-single .loopit-poster.loopit-initial-fit-done .poster-headline { visibility: visible; }

/* Editorin paluulinkit */
.loopit-editor-navigation{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px;font-size:14px;font-weight:700}.loopit-editor-navigation a{color:#173d69;text-decoration:underline;text-underline-offset:3px}

/* 0.9.20: compact sharing controls */
.loopit-share{position:relative;flex:0 0 auto;font:600 12px/1.3 system-ui,sans-serif;color:#263547}
.loopit-share-toggle{border:1px solid #ccd2da;border-radius:18px;background:#fff;color:#243a57;padding:5px 9px;cursor:pointer;font:inherit;white-space:nowrap}
.loopit-share-toggle:hover,.loopit-share-toggle[aria-expanded=true]{border-color:#22466e;background:#f2f5f8}
.loopit-share-menu{position:absolute;z-index:100;right:0;bottom:calc(100% + 7px);width:205px;padding:6px;background:#fff;border:1px solid #d4d9e0;border-radius:9px;box-shadow:0 8px 28px #0003;color:#24354b}
.loopit-share-menu[hidden]{display:none!important}
.loopit-share-menu a,.loopit-share-menu button{display:block;box-sizing:border-box;width:100%;padding:9px 10px;text-align:left;border:0;background:transparent;color:#24354b;font:600 13px/1.3 system-ui,sans-serif;text-decoration:none;cursor:pointer;border-radius:5px}
.loopit-share-menu a:hover,.loopit-share-menu button:hover{background:#eef2f7}
.loopit-share-status{display:block;padding:0 8px;font-size:11px;color:#38674a}
.loopit-single-social{display:flex;align-items:center;justify-content:center;gap:12px;margin:8px auto 4px}
.loopit-single-social .loopit-single-like{margin:0;padding:0}
.loopit-wall-card-meta .loopit-share{margin-left:2px}
@media(max-width:500px){.loopit-wall-card-meta .loopit-share-toggle span{display:none}.loopit-share-toggle{padding:5px 8px}}

/* 0.9.21-alpha: keep the small footer caption fully inside the poster.
   A slightly taller line box and additional bottom clearance avoid glyph
   clipping in WebKit and in generated PNG images. */
.poster-style-havainto .poster-footer,
.poster-style-uutinen .poster-footer,
.poster-style-mielipide .poster-footer,
.poster-style-kuvajuttu .poster-footer {
    bottom: 3% !important;
    line-height: 1.35;
    overflow: visible;
}

/* 0.9.25-alpha: Havainto ingress descenders (g, j, p, y).
   Allow the last line its full glyph descent without changing its position. */
.poster-style-havainto .poster-ingress,
.poster-style-havainto.images-0 .poster-ingress,
.poster-style-havainto.images-1 .poster-ingress,
.poster-style-havainto.images-2 .poster-ingress {
    line-height: 1.22;
    max-height: none;
    overflow: visible;
    padding-bottom: .18em;
    box-sizing: content-box;
}