/* ADMIN CODES */ 

#wwr-admin {
	width: 100%; 
	max-width: 700px;
	min-width: 350px; 
	min-height: 350px;
	border: 1px solid var(--wwr-border);
	margin: 0 auto; 
	display: flex; 
	flex-wrap: wrap; 
	justify-content: center;
}

.admin-header {
		width: 100%; 
		height: 100px;
		background-image: var(--wwe-subback);
  		background-size: cover;
  		background-position: center;
	    background-repeat: no-repeat;
	    background-color: var(--wwr-acc);
	    background-blend-mode: darken;
	    border-right: 1px solid var(--wwr-border);
	    filter: contrast(0.94);
		display: flex; 
	justify-content: center; 
	align-items: center; 
}

.admin-title {
	font-family: var(--wwr-title);
	font-size: 50px; 
	text-transform: uppercase; 
	letter-spacing: 1px; 
}

.admin-content { 
	width: 88%; 
	min-height: 150px; 
	border-left: 1px solid var(--wwr-acc); 
	text-align: justify; 
	line-height: 180%; 
	margin: 40px 0px; 
	padding-left: 20px; 
}

.admin-content ul {border: 1px solid var(--wwr-border); background: color-mix( in srgb, var(--wwr-post) 3%, transparent ); width: 83%; margin: auto; padding-right: 20px;}
.admin-content li {padding: 5px; list-style-type: circle; font-size: 12px;}
.admin-content li::marker {color: var(--wwr-acc); font-size: 16px;} 
.admin-content h4 {font-weight: 500; text-transform: uppercase; font-size: 11px; letter-spacing: 1px; color: var(--wwr-mid);}

/* GESUCHE /* 


/* =========================================
   WWR - EINZELGESUCH
   HORIZONTAL / FILM STILL
========================================= */

.wwr-wanted-film {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
    border: 1px solid var(--wwr-border);
    background: var(--wwr-main);
    container: wwr-film / inline-size;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.wwr-wanted-film *,
.wwr-wanted-film *::before,
.wwr-wanted-film *::after {
    box-sizing: border-box;
}

.wwr-wanted-film > br,
.wwr-wanted-film .wwf-footer > br,
.wwr-wanted-film .wwf-name-row > br {
    display: none;
}


/* =========================================
   TOPLINE
========================================= */

.wwr-wanted-film .wwf-topline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: 43px;
    padding: 10px 22px;
    font-size: 9px;
    letter-spacing: 2px;
    line-height: 1.3;
    color: var(--wwr-mid);
    text-transform: uppercase;
}


/* =========================================
   HERO IMAGE
========================================= */

.wwr-wanted-film .wwf-hero {
    position: relative;
    height: 225px;
    overflow: hidden;
    border-top: 1px solid var(--wwr-border);
    border-bottom: 1px solid var(--wwr-border);
    background: color-mix(in srgb, var(--wwr-border) 38%, transparent);
}

.wwr-wanted-film .wwf-hero img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* =========================================
   CHARACTER NAME & ROLE
========================================= */

.wwr-wanted-film .wwf-name-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 15px;
    min-height: 131px;
    padding: 17px 24px 19px;
}

.wwr-wanted-film .wwf-name {
    min-width: 0;
    font-family: var(--wwr-title);
    font-size: 46px;
    font-weight: normal;
    line-height: 0.94;
    letter-spacing: -1px;
    text-transform: uppercase;
}

.wwr-wanted-film .wwf-name em {
    font-style: normal;
    color: var(--wwr-acc);
}

.wwr-wanted-film .wwf-role {
    flex: 0 1 148px;
    text-align: right;
    color: var(--wwr-mid);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.7px;
    line-height: 1.65;
}


/* =========================================
   SHORTFACTS
========================================= */

.wwr-wanted-film .wwf-facts {
    padding: 14px 24px;
    border-top: 1px solid var(--wwr-border);
    border-bottom: 1px solid var(--wwr-border);
    font-size: 10px;
    line-height: 1.7;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.wwr-wanted-film .wwf-facts b {
    font-weight: 400;
}

.wwr-wanted-film .wwf-facts i {
    padding: 0 18px;
    font-style: normal;
    color: var(--wwr-mid);
}


/* =========================================
   MAIN CHARACTER DESCRIPTION
========================================= */

.wwr-wanted-film .wwf-main {
    margin: 29px 30px 31px;
    padding-left: 20px;
    border-left: 1px solid var(--wwr-acc);
    line-height: 1.8;
    text-align: justify;
}

.wwr-wanted-film .wwf-main > b,
.wwr-wanted-film .wwf-extras > b {
    display: block;
    margin-bottom: 12px;
    color: var(--wwr-acc);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

/* =========================================
   FOOTER - REQUESTER & EXTRAS
========================================= */

.wwr-wanted-film .wwf-footer {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    height: 200px;
    border-top: 1px solid var(--wwr-border);
}


/* REQUESTING CHARACTER */

.wwr-wanted-film .wwf-requester {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 19px;
    border-right: 1px solid var(--wwr-border);
}

.wwr-wanted-film .wwf-requester img {
    display: block;
    width: 62px;
    height: 83px !important;
    flex: none;
    object-fit: cover;
    border: 1px solid var(--wwr-border);
}

.wwr-wanted-film .wwf-requester span {
    min-width: 0;
    font-size: 9px;
    line-height: 1.7;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--wwr-mid);
}

.wwr-wanted-film .wwf-requester strong {
    display: block;
    margin: 5px 0;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.15;
    letter-spacing: 1px;
    color: inherit;
    text-transform: uppercase;
}


/* EXPECTATIONS & ADDITIONAL NOTES */

.wwr-wanted-film .wwf-extras {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: 20px 21px;
}

.wwr-wanted-film .wwf-extras > b {
    flex: none;
    margin-bottom: 11px;
}

.wwr-wanted-film .wwf-notes {
    flex: 1;
    min-height: 0;
    padding-right: 9px;
    overflow-y: auto;
    overflow-x: hidden;
    font-size: 11px;
    line-height: 1.75;
    scrollbar-width: thin;
    scrollbar-color: var(--wwr-acc) transparent;
    overscroll-behavior: contain;
}

.wwr-wanted-film .wwf-notes::-webkit-scrollbar {
    width: 5px;
}

.wwr-wanted-film .wwf-notes::-webkit-scrollbar-thumb {
    background: var(--wwr-acc);
}


/* =========================================
   RESPONSIVE
========================================= */

@container wwr-film (max-width: 460px) {

    .wwr-wanted-film .wwf-hero {
        height: 178px;
    }

    .wwr-wanted-film .wwf-topline {
        padding-inline: 16px;
    }

    .wwr-wanted-film .wwf-name-row {
        min-height: 110px;
        padding: 16px;
    }

    .wwr-wanted-film .wwf-name {
        font-size: clamp(29px, 9cqw, 43px);
    }

    .wwr-wanted-film .wwf-role {
        flex-basis: 105px;
        font-size: 9px;
        letter-spacing: 1px;
    }

    .wwr-wanted-film .wwf-facts {
        padding: 12px 16px;
    }

    .wwr-wanted-film .wwf-facts i {
        padding: 0 6px;
    }

    .wwr-wanted-film .wwf-main {
        margin: 23px 19px 25px;
        padding-left: 15px;
    }

    .wwr-wanted-film .wwf-footer {
        grid-template-columns: 1fr;
        height: auto;
    }

    .wwr-wanted-film .wwf-requester {
        height: 119px;
        border-right: 0;
        border-bottom: 1px solid var(--wwr-border);
    }

    .wwr-wanted-film .wwf-requester img {
        width: 57px;
        height: 76px;
    }

    .wwr-wanted-film .wwf-extras {
        height: 195px;
    }

}


/* =========================================
   WWR - GRUPPENGESUCH
========================================= */

.wwr-group-wanted {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
    border: 1px solid var(--wwr-border);
    background: var(--wwr-main);
    container: wwr-group / inline-size;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.wwr-group-wanted *,
.wwr-group-wanted *::before,
.wwr-group-wanted *::after {
    box-sizing: border-box;
}

.wwr-group-wanted > br,
.wwr-group-wanted .wwg-character > br,
.wwr-group-wanted .wwg-feature > br,
.wwr-group-wanted .wwg-footer > br {
    display: none;
}


/* =========================================
   TOPLINE
========================================= */

.wwr-group-wanted .wwg-topline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 13px 26px;
    border-bottom: 1px solid var(--wwr-border);
    color: var(--wwr-mid);
    font-size: 9px;
    line-height: 1.5;
    letter-spacing: 2px;
    text-transform: uppercase;
}


/* =========================================
   GROUP INTRODUCTION
========================================= */

.wwr-group-wanted .wwg-intro {
    padding: 30px 28px 35px;
}

.wwr-group-wanted .wwg-title {
    font-family: var(--wwr-title);
    font-size: clamp(36px, 9cqw, 54px);
    font-weight: normal;
    line-height: 1.05;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.wwr-group-wanted .wwg-title em {
    color: var(--wwr-acc);
    font-style: normal;
}

.wwr-group-wanted .wwg-intro-text {
    margin-top: 20px;
    padding-left: 17px;
    border-left: 1px solid var(--wwr-acc);
    font-size: 12px;
    line-height: 180%;
    text-align: justify;
}


/* =========================================
   INDIVIDUAL CHARACTER FEATURE
========================================= */

.wwr-group-wanted .wwg-character {
    padding: 28px;
    border-top: 1px solid var(--wwr-border);
}


/* CHARACTER NAME */

.wwr-group-wanted .wwg-name-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 15px;
}

.wwr-group-wanted .wwg-name {
    min-width: 0;
    font-family: var(--wwr-title);
    font-size: clamp(33px, 8.5cqw, 52px);
    font-weight: normal;
    line-height: 1.05;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.wwr-group-wanted .wwg-name em {
    color: var(--wwr-acc);
    font-style: normal;
}

.wwr-group-wanted .wwg-index {
    flex: none;
    font-family: var(--wwr-pretitle);
    font-size: 35px;
    line-height: 1;
    color: var(--wwr-acc);
}


/* ROLE & AVAILABILITY */

.wwr-group-wanted .wwg-subline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding: 12px 0;
    border-top: 1px solid var(--wwr-border);
    border-bottom: 1px solid var(--wwr-border);
    font-size: 10px;
    line-height: 1.6;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.wwr-group-wanted .wwg-status {
    flex: none;
    color: var(--wwr-acc);
    font-size: 9px;
    letter-spacing: 1.5px;
}


/* =========================================
   CHARACTER TEXT & PORTRAIT
========================================= */

.wwr-group-wanted .wwg-feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 195px;
    align-items: start;
    gap: 22px;
    margin-top: 22px;
}


/* TEXT COLUMN */

.wwr-group-wanted .wwg-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 280px;
}

.wwr-group-wanted .wwg-facts {
    flex: none;
    padding-bottom: 14px;
    color: var(--wwr-mid);
    font-size: 10px;
    line-height: 1.7;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}


/* SCROLLABLE CHARACTER DESCRIPTION */

.wwr-group-wanted .wwg-text {
    flex: 1;
    min-width: 0;
    min-height: 0;
    padding-right: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    font-size: 12px;
    line-height: 180%;
    text-align: justify;
    scrollbar-width: thin;
    scrollbar-color: var(--wwr-acc) transparent;
    overscroll-behavior: contain;
}

.wwr-group-wanted .wwg-text > b {
    display: block;
    margin-bottom: 13px;
    color: var(--wwr-acc);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}


/* CHARACTER PORTRAIT */

.wwr-group-wanted .wwg-feature > img {
    display: block;
    width: 100%;
    height: 280px !important;
    object-fit: cover;
    border: 1px solid var(--wwr-border);
}


/* =========================================
   FOOTER - REQUESTER & EXPECTATIONS
========================================= */

.wwr-group-wanted .wwg-footer {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    height: 200px;
    border-top: 1px solid var(--wwr-border);
}


/* REQUESTING CHARACTER */

.wwr-group-wanted .wwg-requester {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 19px;
    border-right: 1px solid var(--wwr-border);
}

.wwr-group-wanted .wwg-requester img {
    display: block;
    width: 62px;
    height: 83px !important;
    flex: none;
    object-fit: cover;
    border: 1px solid var(--wwr-border);
}

.wwr-group-wanted .wwg-requester span {
    min-width: 0;
    color: var(--wwr-mid);
    font-size: 9px;
    line-height: 1.7;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.wwr-group-wanted .wwg-requester b {
    display: block;
    margin: 5px 0;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.5px;
    color: inherit;
}


/* EXPECTATIONS */

.wwr-group-wanted .wwg-extras {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: 20px 21px;
}

.wwr-group-wanted .wwg-extras > b {
    display: block;
    flex: none;
    margin-bottom: 12px;
    color: var(--wwr-acc);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}


/* SCROLLABLE EXPECTATIONS */

.wwr-group-wanted .wwg-notes {
    flex: 1;
    min-height: 0;
    padding-right: 9px;
    overflow-y: auto;
    overflow-x: hidden;
    font-size: 11px;
    line-height: 180%;
    text-align: justify;
    scrollbar-width: thin;
    scrollbar-color: var(--wwr-acc) transparent;
    overscroll-behavior: contain;
}


/* =========================================
   SCROLLBAR STYLING
========================================= */

.wwr-group-wanted .wwg-text::-webkit-scrollbar,
.wwr-group-wanted .wwg-notes::-webkit-scrollbar {
    width: 5px;
}

.wwr-group-wanted .wwg-text::-webkit-scrollbar-thumb,
.wwr-group-wanted .wwg-notes::-webkit-scrollbar-thumb {
    background: var(--wwr-acc);
}


/* =========================================
   RESPONSIVE
========================================= */

@container wwr-group (max-width: 460px) {

    .wwr-group-wanted .wwg-topline {
        padding: 12px 16px;
        letter-spacing: 1px;
    }

    .wwr-group-wanted .wwg-intro {
        padding: 24px 18px;
    }

    .wwr-group-wanted .wwg-character {
        padding: 22px 18px;
    }

    .wwr-group-wanted .wwg-name {
        font-size: clamp(30px, 8cqw, 40px);
    }

    .wwr-group-wanted .wwg-index {
        font-size: 27px;
    }

    .wwr-group-wanted .wwg-feature {
        grid-template-columns: minmax(0, 1fr) 36%;
        gap: 14px;
    }

    .wwr-group-wanted .wwg-copy,
    .wwr-group-wanted .wwg-feature > img {
        height: 245px;
    }

    .wwr-group-wanted .wwg-footer {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
    }

    .wwr-group-wanted .wwg-requester {
        height: 119px;
        border-right: 0;
        border-bottom: 1px solid var(--wwr-border);
    }

    .wwr-group-wanted .wwg-extras {
        height: 200px;
    }

}

/* =========================================
   SMALL MOBILE CONTAINERS
========================================= */

@container wwr-group (max-width: 400px) {

    .wwr-group-wanted .wwg-name-row {
        align-items: flex-start;
    }

    .wwr-group-wanted .wwg-feature {
        grid-template-columns: minmax(0, 1fr);
    }

    .wwr-group-wanted .wwg-feature > img {
        order: -1;
        width: 100%;
        height: 175px;
    }

    .wwr-group-wanted .wwg-copy {
        height: 230px;
    }

    .wwr-group-wanted .wwg-text {
        padding-right: 8px;
    }

}

/* POST VORLAGEN /* 

/* =========================================
   WWR / INPLAY POST TEMPLATES
   Shared foundation + six layout variants
   All dimensions adapt to their postbit.
========================================= */

/* SHARED FOUNDATION */

.wwr-template {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    border: 1px solid var(--wwr-border);
    background: var(--wwr-main);
    color: var(--wwr-post);
    font-family: var(--wwr-txt);
    font-size: 13px;
    line-height: 1.8;
    overflow-wrap: anywhere;
    container: wwr-template / inline-size;
}

.wwr-template,
.wwr-template *,
.wwr-template *::before,
.wwr-template *::after {
    box-sizing: border-box;
}

/* MyBB may add line breaks between structural HTML elements. */
.wwr-template > br,
.wwr-template .wwr-templateheader > br,
.wwr-template .wwr-templatefeature > br,
.wwr-template .wwr-templatefooter > br,
.wwr-template .wwr-templatefacts > br {
    display: none;
}

.wwr-template .wwr-templatetitle,
.wwr-template .wwr-templateaesthetic {
    font-family: var(--wwr-title);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.08;
}

.wwr-template .wwr-templatetitle {
    font-size: 38px;
}

.wwr-template .wwr-templatemeta {
    color: var(--wwr-mid);
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.wwr-template .wwr-templatemeta strong,
.wwr-template .wwr-templateaccent {
    color: var(--wwr-acc);
    font-weight: 600;
}

.wwr-template .wwr-templatetext {
    min-width: 0;
    font-family: var(--wwr-txt);
    font-size: 13px;
    line-height: 1.9;
    text-align: justify;
}

.wwr-template .wwr-templatetext p {
    margin: 0 0 15px;
}

.wwr-template .wwr-templatetext p:last-child {
    margin-bottom: 0;
}

.wwr-template .wwr-templatelinks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px 19px;
}

.wwr-template .wwr-templatelinks a {
    padding-bottom: 3px;
    border-bottom: 1px solid var(--wwr-border);
    color: var(--wwr-mid);
    font-size: 10px;
    letter-spacing: 1.2px;
    text-decoration: none;
    text-transform: uppercase;
}

.wwr-template .wwr-templatelinks a:hover,
.wwr-template .wwr-templatelinks a:focus-visible {
    color: var(--wwr-post);
    border-color: var(--wwr-acc);
}

.wwr-template .wwr-templateimage {
    display: block;
    max-width: 100%;
    object-fit: cover;
    border: 1px solid var(--wwr-border);
}

.wwr-template .wwr-templatedivider {
    height: 1px;
    background: linear-gradient(90deg, var(--wwr-acc), var(--wwr-border));
}

.wwr-template .wwr-templatenumber {
    color: var(--wwr-acc);
    font-family: var(--wwr-pretitle);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 1px;
}

.wwr-template .wwr-templatefooter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    border-top: 1px solid var(--wwr-border);
    padding: 16px 28px;
}

/* =========================================
   01 / THE PORTRAIT
========================================= */

.wwr-template1 .wwr-templateheader {
    display: flex;
    align-items: center;
    gap: 25px;
    position: relative;
    padding: 27px 30px;
}

.wwr-template1 .wwr-templateimage {
    width: 108px;
    height: 108px;
    flex: 0 0 108px;
    border-radius: 50%;
}

.wwr-template1 .wwr-templateheading {
    min-width: 0;
}

.wwr-template1 .wwr-templatetitle {
    margin: 8px 0 10px;
}

.wwr-template1 .wwr-templatedivider {
    margin: 0 30px;
}

.wwr-template1 .wwr-templatetext {
    padding: 30px 40px;
}

.wwr-template1 .wwr-templatefooter {
    margin: 0 30px;
    padding: 16px 0;
}

/* =========================================
   02 / THE DUET
========================================= */

.wwr-template2 .wwr-templateheader {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 28px;
    border-bottom: 1px solid var(--wwr-border);
}

.wwr-template2 .wwr-templatefeature {
    display: grid;
    grid-template-columns: 105px 105px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 24px 28px 19px;
}

.wwr-template2 .wwr-templateimage {
    width: 105px;
    height: 112px;
}

.wwr-template2 .wwr-templateheading {
    min-width: 0;
    padding-left: 8px;
}

.wwr-template2 .wwr-templatetitle {
    margin: 7px 0;
    font-size: 40px;
}

.wwr-template2 .wwr-templatenames {
    margin: 0 28px;
    padding: 11px 0;
    border-top: 1px solid var(--wwr-border);
    color: var(--wwr-mid);
    font-size: 10px;
    letter-spacing: 1.3px;
    text-align: center;
    text-transform: uppercase;
}

.wwr-template2 .wwr-templatetext {
    padding: 27px 38px;
}

/* =========================================
   03 / THE INTERLUDE
========================================= */

.wwr-template3 .wwr-templateheader {
    padding: 36px 40px 27px;
    text-align: center;
}

.wwr-template3 .wwr-templateaesthetic {
    max-width: 550px;
    margin: 17px auto 12px;
    font-size: 42px;
}

.wwr-template3 .wwr-templateaesthetic em {
    color: var(--wwr-acc);
    font-style: normal;
}

.wwr-template3 .wwr-templatecaption {
    color: var(--wwr-mid);
    font-size: 11px;
    font-style: italic;
    letter-spacing: 0.5px;
}

.wwr-template3 .wwr-templatedivider {
    margin: 0 39px;
    background: linear-gradient(90deg, var(--wwr-border), var(--wwr-acc), var(--wwr-border));
}

.wwr-template3 .wwr-templatetext {
    margin: 0 39px;
    padding: 32px 31px;
    border-left: 1px solid var(--wwr-acc);
    border-right: 1px solid var(--wwr-border);
}

.wwr-template3 .wwr-templateending {
    padding: 25px 35px 27px;
    text-align: center;
}

.wwr-template3 .wwr-templateending .wwr-templateaesthetic {
    margin: 0 auto 11px;
    font-size: 27px;
}

.wwr-template3 .wwr-templatefooter,
.wwr-template5 .wwr-templatefooter {
    justify-content: center;
}

/* =========================================
   04 / THE MARGIN
========================================= */

.wwr-template4 {
    display: grid;
    grid-template-columns: minmax(58px, 14%) minmax(0, 1fr);
}

.wwr-template4 .wwr-templaterail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 27px 12px;
    border-right: 1px solid var(--wwr-border);
}

.wwr-template4 .wwr-templatenumber {
    font-size: 54px;
}

.wwr-template4 .wwr-templaterail .wwr-templatedivider {
    width: 1px;
    min-height: 50px;
    flex: 1;
    background: linear-gradient(var(--wwr-acc), var(--wwr-border));
}

.wwr-template4 .wwr-templatevertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: var(--wwr-mid);
    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.wwr-template4 .wwr-templatebody {
    min-width: 0;
    padding: 30px;
}

.wwr-template4 .wwr-templatetitle {
    margin: 10px 0 20px;
    font-size: 34px;
}

.wwr-template4 .wwr-templatetext {
    padding-top: 20px;
    border-top: 1px solid var(--wwr-border);
}

.wwr-template4 .wwr-templatefooter {
    margin-top: 25px;
    padding: 15px 0 0;
}

/* =========================================
   05 / THE CHAPTER
========================================= */

.wwr-template5 .wwr-templateheader {
    padding: 34px 30px 25px;
    text-align: center;
}

.wwr-template5 .wwr-templatenumber {
    font-size: 37px;
}

.wwr-template5 .wwr-templatetitle {
    margin: 14px auto;
    font-size: 45px;
}

.wwr-template5 .wwr-templatedivider {
    margin: 0 34px;
    background: linear-gradient(90deg, var(--wwr-border), var(--wwr-acc), var(--wwr-border));
}

.wwr-template5 .wwr-templatetext {
    padding: 31px 48px;
}

.wwr-template5 .wwr-templateending {
    padding: 1px 20px 24px;
    color: var(--wwr-mid);
    font-size: 11px;
    font-style: italic;
    text-align: center;
}

/* =========================================
   06 / THE SCENE FILE
========================================= */

.wwr-template6 .wwr-templateheader {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    padding: 25px 30px 20px;
    border-bottom: 1px solid var(--wwr-border);
}

.wwr-template6 .wwr-templatetitle {
    margin-top: 10px;
    font-size: 37px;
}

.wwr-template6 .wwr-templatenumber {
    font-size: 57px;
}

.wwr-template6 .wwr-templatefacts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid var(--wwr-border);
}

.wwr-template6 .wwr-templatefact {
    min-width: 0;
    padding: 17px 23px;
    font-size: 12px;
}

.wwr-template6 .wwr-templatefact + .wwr-templatefact {
    border-left: 1px solid var(--wwr-border);
}

.wwr-template6 .wwr-templatefact b {
    display: block;
    margin-bottom: 5px;
    color: var(--wwr-acc);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.wwr-template6 .wwr-templatetext {
    margin: 29px 31px;
    padding-left: 22px;
    border-left: 2px solid var(--wwr-acc);
}

/* =========================================
   NARROW POSTBITS / MOBILE
   Container queries use the actual post width.
========================================= */

@container wwr-template (max-width: 480px) {
    .wwr-template .wwr-templatetitle {
        font-size: 30px;
    }

    .wwr-template1 .wwr-templateheader {
        gap: 17px;
        padding: 22px 18px;
    }

    .wwr-template1 .wwr-templateimage {
        width: 84px;
        height: 84px;
        flex-basis: 84px;
    }

    .wwr-template1 .wwr-templatetext,
    .wwr-template2 .wwr-templatetext,
    .wwr-template5 .wwr-templatetext {
        padding: 25px 22px;
    }

    .wwr-template1 .wwr-templatedivider,
    .wwr-template1 .wwr-templatefooter {
        margin-left: 18px;
        margin-right: 18px;
    }

    .wwr-template2 .wwr-templatefeature {
        grid-template-columns: 75px 75px minmax(0, 1fr);
        gap: 9px;
        padding: 18px;
    }

    .wwr-template2 .wwr-templateimage {
        width: 75px;
        height: 91px;
    }

    .wwr-template2 .wwr-templateheading {
        padding-left: 0;
    }

    .wwr-template2 .wwr-templatetitle {
        font-size: 25px;
    }

    .wwr-template2 .wwr-templatenames {
        margin: 0 18px;
    }

    .wwr-template3 .wwr-templateheader {
        padding: 26px 19px 22px;
    }

    .wwr-template3 .wwr-templateaesthetic {
        font-size: 31px;
    }

    .wwr-template3 .wwr-templatetext {
        margin: 0 17px;
        padding: 24px 17px;
    }

    .wwr-template3 .wwr-templatedivider {
        margin: 0 17px;
    }

    .wwr-template3 .wwr-templateending .wwr-templateaesthetic {
        font-size: 24px;
    }

    .wwr-template4 .wwr-templaterail {
        padding: 23px 7px;
    }

    .wwr-template4 .wwr-templatebody {
        padding: 24px 18px;
    }

    .wwr-template4 .wwr-templatenumber {
        font-size: 38px;
    }

    .wwr-template5 .wwr-templateheader {
        padding: 27px 19px 21px;
    }

    .wwr-template6 .wwr-templateheader {
        padding: 19px;
    }

    .wwr-template6 .wwr-templatefact {
        padding: 13px;
    }

    .wwr-template6 .wwr-templatetext {
        margin: 24px 19px;
        padding-left: 15px;
    }
}

@container wwr-template (max-width: 350px) {
    .wwr-template2 .wwr-templatefeature {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wwr-template2 .wwr-templateimage {
        width: 100%;
        height: 110px;
    }

    .wwr-template2 .wwr-templateheading {
        grid-column: 1 / -1;
        text-align: center;
        padding-top: 8px;
    }

    .wwr-template6 .wwr-templatefacts {
        grid-template-columns: minmax(0, 1fr);
    }

    .wwr-template6 .wwr-templatefact + .wwr-templatefact {
        border-left: 0;
        border-top: 1px solid var(--wwr-border);
    }
}

/* =========================================
   07 / THE ECHO
   Compact paired GIFs & aesthetic text
   Add to the shared WWR template stylesheet.
========================================= */

.wwr-template7 .wwr-templateheader {
    padding: 29px 24px 0;
    text-align: center;
}

.wwr-template7 .wwr-templatetitle {
    margin-top: 9px;
    font-size: 39px;
}

.wwr-template7 .wwr-templatefeature {
    display: grid;
    grid-template-columns: 96px minmax(0, 164px) 96px;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 25px 18px 29px;
}

.wwr-template7 .wwr-templateimage {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 1px solid var(--wwr-border);
}

.wwr-template7 .wwr-templateverse {
    min-width: 0;
    color: var(--wwr-mid);
    font-size: 11px;
    font-style: italic;
    line-height: 1.8;
    text-align: center;
}

.wwr-template7 .wwr-templateverse em {
    display: block;
    margin-top: 6px;
    color: var(--wwr-acc);
    font-style: inherit;
}

.wwr-template7 .wwr-templatedivider {
    margin: 0 29px;
    background: linear-gradient(90deg, var(--wwr-border), var(--wwr-acc), var(--wwr-border));
}

.wwr-template7 .wwr-templatetext {
    padding: 29px 41px;
}

.wwr-template7 .wwr-templateending {
    margin: 0 29px;
    padding: 19px 12px;
    border-top: 1px solid var(--wwr-border);
    color: var(--wwr-mid);
    font-size: 11px;
    font-style: italic;
    letter-spacing: 0.5px;
    text-align: center;
}

.wwr-template7 .wwr-templatefooter {
    margin: 0 29px;
    padding: 15px 0;
    justify-content: center;
}

/* =========================================
   07 / NARROW POSTBITS
========================================= */

@container wwr-template (max-width: 480px) {

    .wwr-template7 .wwr-templateheader {
        padding: 23px 16px 0;
    }

    .wwr-template7 .wwr-templatetitle {
        font-size: 31px;
    }

    .wwr-template7 .wwr-templatefeature {
        grid-template-columns: 78px minmax(0, 1fr) 78px;
        gap: 12px;
        padding: 24px 17px;
    }

    .wwr-template7 .wwr-templateimage {
        width: 78px;
        height: 78px;
    }

    .wwr-template7 .wwr-templateverse {
        font-size: 10px;
        line-height: 1.6;
    }

    .wwr-template7 .wwr-templatetext {
        padding: 24px 22px;
    }

    .wwr-template7 .wwr-templatedivider,
    .wwr-template7 .wwr-templateending,
    .wwr-template7 .wwr-templatefooter {
        margin-left: 18px;
        margin-right: 18px;
    }
}

@container wwr-template (max-width: 320px) {

    .wwr-template7 .wwr-templatefeature {
        grid-template-columns: 82px 82px;
        justify-items: center;
        gap: 12px;
    }

    .wwr-template7 .wwr-templateverse {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}