/* ============================================================
   Section skins — migrated from parts/block-concepts.css
   + maintained overrides below (if any).
   Module ownership: js/modules/<section>/
   ============================================================ */

/* --- from block-concepts (about) --- */

/* about from concept-1 */

body .about.block-skin-concept-1 /* Concept 1 about card */
 .about {
padding: .05rem .34rem .65rem;
}

body .about.block-skin-concept-1 .about-title {
margin-bottom: .7rem;
    font-family: "Lora", Georgia, serif;
    font-weight: 700;
    letter-spacing: .12rem;
}

body .about.block-skin-concept-1.section-subtitle:not([hidden]) {
margin-top: -.46rem;
    margin-bottom: .55rem;
}

body .about.block-skin-concept-1 .about-portrait {
display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0 auto .42rem;
    overflow: hidden;
    border-radius: .48rem .48rem .18rem .18rem;
    box-shadow: 0 22px 48px rgba(42, 48, 45, .14);
    background: rgba(var(--primary-rgb), .08);
}

body .about.block-skin-concept-1 .about-portrait::before {
content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(to bottom, rgba(0,0,0,.03), transparent 42%, rgba(0,0,0,.32)),
        radial-gradient(circle at 18% 22%, rgba(255,255,255,.32), transparent 28%);
}

body .about.block-skin-concept-1 .about-portrait::after {
content: "";
    position: absolute;
    inset: .18rem;
    z-index: 2;
    border: 1px solid rgba(255,255,255,.68);
    border-radius: .36rem .36rem .12rem .12rem;
    pointer-events: none;
}

body .about.block-skin-concept-1 .about-portrait img {
width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.03) brightness(1.02);
}

body .about.block-skin-concept-1 .about-portrait__text {
position: absolute;
    left: 50%;
    bottom: .42rem;
    z-index: 3;
    width: 100%;
    transform: translateX(-50%);
    display: grid;
    justify-items: center;
    color: #fff;
    text-shadow: 0 8px 22px rgba(0,0,0,.22);
    pointer-events: none;
}

body .about.block-skin-concept-1 .about-portrait__text span {
margin-bottom: -.18rem;
    font-family: "Great Vibes", cursive;
    font-size: 1.18rem;
    font-weight: 400;
    line-height: .88;
    letter-spacing: .02rem;
}

body .about.block-skin-concept-1 .about-portrait__text strong {
font-family: "Lora", Georgia, serif;
    font-size: .86rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .18rem;
    text-transform: uppercase;
}

body .about.block-skin-concept-1 .person {
display: grid;
    justify-items: center;
    text-align: center;
    width: 50%;
    min-height: 2.45rem;
    margin: 0 0 .18rem;
    padding: .1rem .18rem .2rem;
    color: #6f684f;
}

body .about.block-skin-concept-1 .person--groom {
float: left;
}

body .about.block-skin-concept-1 .person--bride {
float: right;
}

body .about.block-skin-concept-1 .person img {
display: none;
}

body .about.block-skin-concept-1 .person-name {
margin: 0 0 .2rem;
    color: var(--primary-color);
    font-family: "Lora", Georgia, serif;
    font-size: .4rem;
    font-weight: 600;
    line-height: 1.35;
}

body .about.block-skin-concept-1 .person-name::before {
content: attr(data-side);
    display: block;
    margin-bottom: .18rem;
    color: #948b69;
    font-family: var(--font-body, "Quicksand", sans-serif);
    font-size: .3rem;
    font-weight: 800;
    letter-spacing: .08rem;
    text-transform: uppercase;
}

body .about.block-skin-concept-1 .parent {
margin-top: .08rem;
    color: #6f684f;
    font-family: "Lora", Georgia, serif;
    font-size: .3rem;
    line-height: 1.55;
}

body .about.block-skin-concept-1::after {
content: "";
    display: block;
    clear: both;
}

body .about.block-skin-concept-1 .about-portrait__text span {
font-size: .98rem;
}

body .about.block-skin-concept-1 .about-portrait__text strong {
font-size: .66rem;
        letter-spacing: .14rem;
}

body .about.block-skin-concept-1 .person-name {
font-size: .4rem;
}

body .about.block-skin-concept-1 .parent {
font-size: .3rem;
}

/* about from concept-2 */

body .about.block-skin-concept-2 {
position: relative;
    color: var(--botanical-ink);
    background: var(--botanical-paper);
}

body .about.block-skin-concept-2 .about-title {
color: var(--botanical-ink);
    font-family: "Lora", Georgia, serif;
    font-weight: 500;
    letter-spacing: .04rem;
    text-transform: none;
}

body .about.block-skin-concept-2 .about-title::after {
content: "";
    display: block;
    width: .95rem;
    height: .08rem;
    margin: .18rem auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--botanical-rose), var(--botanical-leaf));
}

body .about.block-skin-concept-2 {
padding: .05rem .34rem .2rem;
}

body .about.block-skin-concept-2 .person {
display: grid;
    grid-template-columns: 3rem 1fr;
    grid-template-rows: 1fr auto auto auto 1fr;
    column-gap: .32rem;
    align-items: center;
    justify-items: center;
    text-align: center;
    margin-bottom: .48rem;
    padding: .22rem;
    border-radius: .34rem;
    background: linear-gradient(135deg, #fff, rgba(var(--botanical-mint-rgb), .52));
    box-shadow: var(--botanical-shadow);
}

body .about.block-skin-concept-2 .person:nth-of-type(even) {
grid-template-columns: 1fr 3rem;
    text-align: center;
    background: linear-gradient(135deg, rgba(var(--botanical-cream-rgb), .74), #fff);
}

body .about.block-skin-concept-2 .person:nth-of-type(even) img {
grid-column: 2;
    grid-row: 1 / -1;
}

body .about.block-skin-concept-2 .person:nth-of-type(even) .person-name,
body .about.block-skin-concept-2 .person:nth-of-type(even) .parent {
grid-column: 1;
    justify-self: center;
}

body .about.block-skin-concept-2 .person img {
grid-row: 1 / -1;
    align-self: center;
    width: 3rem;
    height: 3rem;
    border-radius: .28rem;
    object-fit: cover;
    margin: 0;
    box-shadow: 0 14px 26px rgba(var(--botanical-ink-rgb), .15);
}

body .about.block-skin-concept-2 .person-name {
grid-row: 2;
    align-self: end;
    justify-self: center;
margin-top: 0;
    color: var(--botanical-leaf);
    font-family: "Lora", Georgia, serif;
    font-size: .4rem;
    font-weight: 600;
    line-height: 1.25;
}

body .about.block-skin-concept-2 .parent {
justify-self: center;
color: var(--botanical-muted);
    font-size: .3rem;
}

body .about.block-skin-concept-2 .person .parent:nth-of-type(2) {
grid-row: 3;
}

body .about.block-skin-concept-2 .person .parent:nth-of-type(3) {
grid-row: 4;
}

body .about.block-skin-concept-2 .person,
body .about.block-skin-concept-2 .person:nth-of-type(even) {
grid-template-columns: 1fr;
        text-align: center;
}

body .about.block-skin-concept-2 .person img,
body .about.block-skin-concept-2 .person:nth-of-type(even) img {
grid-column: 1;
        grid-row: auto;
}

body .about.block-skin-concept-2 .person img {
margin: 0 auto .26rem;
}

/* about from concept-3 */

body .about.block-skin-concept-3 {
color: var(--sunset-ink);
    background: var(--sunset-paper);
}

body .about.block-skin-concept-3 .about-title {
color: var(--sunset-ink);
    font-family: "DM Serif Display", Georgia, serif;
    letter-spacing: .04rem;
    text-transform: uppercase;
}

body .about.block-skin-concept-3 .about-title::after {
content: "";
    display: block;
    width: 1.25rem;
    height: .12rem;
    margin: .18rem auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sunset-coral), var(--sunset-lavender), var(--sunset-sky));
}

body .about.block-skin-concept-3 {
padding: .05rem .32rem .2rem;
}

body .about.block-skin-concept-3 .person {
position: relative;
    margin-bottom: .5rem;
    padding: .24rem .24rem .36rem;
    border-radius: .48rem;
    background: #fff;
    box-shadow: var(--sunset-shadow);
    overflow: hidden;
}

body .about.block-skin-concept-3 .person::before {
content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: .16rem;
    background: linear-gradient(to bottom, var(--sunset-coral), var(--sunset-lavender));
}

body .about.block-skin-concept-3 .person:nth-of-type(even)::before {
left: auto;
    right: 0;
    background: linear-gradient(to bottom, var(--sunset-sky), var(--sunset-lemon));
}

body .about.block-skin-concept-3 .person img {
width: 3.25rem;
    height: 3.25rem;
    border-radius: 38% 62% 45% 55% / 55% 42% 58% 45%;
    object-fit: cover;
    margin: 0 auto;
    box-shadow: 0 14px 28px rgba(var(--sunset-ink-rgb), .14);
}

body .about.block-skin-concept-3 .person-name {
margin-top: .28rem;
    color: var(--sunset-coral);
    font-family: "Quicksand", Arial, sans-serif;
    font-size: .4rem;
    font-weight: 800;
    line-height: 1.25;
    text-transform: none;
}

body .about.block-skin-concept-3 .parent {
color: var(--sunset-muted);
    font-size: .3rem;
    line-height: 1.55;
}

/* about from concept-4 */

body .about.block-skin-concept-4 {
position: relative;
    padding: 0.5rem .46rem 1.15rem .46rem;
    background: var(--na01-paper);
    color: var(--na01-gold);
}

body .about.block-skin-concept-4 .about-title {
color: var(--na01-gold);
    font-family: "Great Vibes", cursive;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    text-transform: none;
}

body .about.block-skin-concept-4 .about-title::after {
content: "";
    display: block;
    width: 1.25rem;
    height: 1px;
    margin: .26rem auto 0;
    background: rgba(146,131,98,.42);
}

body .about.block-skin-concept-4 /* About: first married + families */
 .about {
padding: 1.25rem .34rem 0 .34rem;
}

body .about.block-skin-concept-4 .about-title {
display: none;
}

body .about.block-skin-concept-4.section-subtitle {
display: none;
}

body .about.block-skin-concept-4 .about-portrait {
display: block;
    position: relative;
    width: calc(100% + .68rem);
    height: 7.25rem;
    margin: -1.15rem -.34rem .72rem;
    overflow: hidden;
    background: #ddd;
}

body .about.block-skin-concept-4 .about-portrait img {
width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.96) saturate(.95);
}

body .about.block-skin-concept-4 .about-portrait::after {
content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 28%, rgba(0,0,0,.36));
}

body .about.block-skin-concept-4 .about-portrait__text {
position: absolute;
    left: 0;
    right: 0;
    bottom: .58rem;
    z-index: 2;
    display: grid;
    justify-items: center;
    color: #fff;
}

body .about.block-skin-concept-4 .about-portrait__text span {
margin-bottom: -.18rem;
    font-family: "Great Vibes", cursive;
    font-size: 1.1rem;
    line-height: .9;
}

body .about.block-skin-concept-4 .about-portrait__text strong {
color: #fff;
    font-family: "Lora", Georgia, serif;
    font-size: .84rem;
    font-weight: 500;
    letter-spacing: .12rem;
    text-transform: uppercase;
}

body .about.block-skin-concept-4 .person {
display: grid;
    justify-items: center;
    width: 50%;
    min-height: 2.25rem;
    padding: 0 .12rem;
    float: left;
    text-align: center;
}

body .about.block-skin-concept-4 .person--bride {
float: right;
}

body .about.block-skin-concept-4 .person img {
display: none;
}

body .about.block-skin-concept-4 .person-name {
margin: 0 0 .18rem;
    color: var(--primary-color);
    font-family: "Philosopher", "Lora", serif;
    font-size: .4rem;
    font-weight: 400;
    line-height: 1.34;
}

body .about.block-skin-concept-4 .person-name::before {
content: attr(data-side);
    display: block;
    margin-bottom: .22rem;
    font-family: var(--font-body, "Quicksand", sans-serif);
    font-size: .3rem;
    text-transform: uppercase;
}

body .about.block-skin-concept-4 .parent {
color: var(--na01-gold);
    font-family: "Philosopher", "Lora", serif;
    font-size: .3rem;
    line-height: 1.5;
}

body .about.block-skin-concept-4::after {
content: "";
    display: block;
    clear: both;
}

body .about.block-skin-concept-4 .about-portrait__text strong {
font-size: .68rem;
}

body .about.block-skin-concept-4 .about-title {
font-family: "Lora", Georgia, serif !important;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: .03rem;
    text-transform: uppercase;
}

body .about.block-skin-concept-4 .about-title::after {
background: rgba(var(--primary-rgb), .42);
}

body .about.block-skin-concept-4 .about-portrait {
width: calc(100% - .32rem);
    height: 6.9rem;
    margin: -1.02rem auto .72rem;
    border-radius: 2.7rem 2.7rem .24rem .24rem;
    box-shadow: 0 18px 42px rgba(72,54,39,.12);
}

body .about.block-skin-concept-4 .about-portrait::before {
content: "";
    position: absolute;
    inset: .18rem;
    z-index: 2;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 2.45rem 2.45rem .14rem .14rem;
    pointer-events: none;
}

body .about.block-skin-concept-4 .about-portrait::after {
background: linear-gradient(180deg, transparent 32%, rgba(0,0,0,.42));
}

body .about.block-skin-concept-4 .about-portrait__text {
z-index: 3;
}




/* --- maintained overrides (were blocks/*/skins.css) --- */

/* About block skins. Edit about layout here, not in concept files. */
.about.block-skin-concept-2,
.about.block-skin-concept-3 {
    clear: both !important;
    overflow: hidden !important;
    padding: .72rem .34rem .42rem !important;
    color: var(--botanical-ink) !important;
    background: var(--botanical-paper) !important;
}

.about.block-skin-concept-3 {
    color: var(--sunset-ink) !important;
    background: var(--sunset-paper) !important;
}

.about.block-skin-concept-2 .about-portrait,
.about.block-skin-concept-3 .about-portrait {
    display: none !important;
}

.about.block-skin-concept-2 .person,
.about.block-skin-concept-3 .person {
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
}

.about.block-skin-concept-2 .person img,
.about.block-skin-concept-3 .person img {
    display: block !important;
}

.about.block-skin-concept-2 .person-name::before,
.about.block-skin-concept-3 .person-name::before {
    display: none !important;
    content: none !important;
}

.about.block-skin-concept-2 .person {
    display: grid !important;
    grid-template-columns: 3rem 1fr !important;
    grid-template-rows: auto auto auto !important;
    column-gap: .32rem !important;
    align-items: center !important;
    justify-items: center !important;
    margin-bottom: .46rem !important;
    padding: .22rem !important;
    border-radius: .34rem !important;
    background: linear-gradient(135deg, #fff, rgba(var(--botanical-mint-rgb), .52)) !important;
    box-shadow: var(--botanical-shadow) !important;
    text-align: center !important;
}

.about.block-skin-concept-2 .person:nth-of-type(even) {
    grid-template-columns: 1fr 3rem !important;
    background: linear-gradient(135deg, rgba(var(--botanical-cream-rgb), .74), #fff) !important;
}

.about.block-skin-concept-2 .person img {
    grid-row: 1 / -1 !important;
    width: 3rem !important;
    height: 3rem !important;
    margin: 0 !important;
    border-radius: .28rem !important;
    object-fit: cover !important;
    box-shadow: 0 14px 26px rgba(var(--botanical-ink-rgb), .15) !important;
}

.about.block-skin-concept-2 .person:nth-of-type(even) img {
    grid-column: 2 !important;
}

.about.block-skin-concept-2 .person-name {
    margin: 0 0 .08rem !important;
    color: var(--botanical-leaf) !important;
    font: 600 .4rem/1.25 "Lora", Georgia, serif !important;
}

.about.block-skin-concept-2 .parent {
    color: var(--botanical-muted) !important;
    font-size: .3rem !important;
}

.about.block-skin-concept-3 .person {
    position: relative !important;
    margin-bottom: .48rem !important;
    padding: .24rem .24rem .36rem !important;
    border-radius: .48rem !important;
    overflow: hidden !important;
    text-align: center !important;
    background: #fff !important;
    box-shadow: var(--sunset-shadow) !important;
}

.about.block-skin-concept-3 .person::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    width: .16rem !important;
    background: linear-gradient(to bottom, var(--sunset-coral), var(--sunset-lavender)) !important;
}

.about.block-skin-concept-3 .person:nth-of-type(even)::before {
    left: auto !important;
    right: 0 !important;
    background: linear-gradient(to bottom, var(--sunset-sky), var(--sunset-lemon)) !important;
}

.about.block-skin-concept-3 .person img {
    width: 3.25rem !important;
    height: 3.25rem !important;
    margin: 0 auto !important;
    border-radius: 38% 62% 45% 55% / 55% 42% 58% 45% !important;
    object-fit: cover !important;
    box-shadow: 0 14px 28px rgba(var(--sunset-ink-rgb), .14) !important;
}

.about.block-skin-concept-3 .person-name {
    margin-top: .28rem !important;
    color: var(--sunset-coral) !important;
    font: 800 .4rem/1.25 "Quicksand", Arial, sans-serif !important;
    text-transform: none !important;
}

.about.block-skin-concept-3 .parent {
    color: var(--sunset-muted) !important;
    font-size: .3rem !important;
    line-height: 1.55 !important;
}

/* Final fix for concept 2 about cards in mixed-block mode. */
.about.block-skin-concept-2 .person,
body .about.block-skin-concept-2 .person {
    display: grid !important;
    grid-template-columns: 3rem minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    align-items: center !important;
    justify-items: stretch !important;
    column-gap: .36rem !important;
    min-height: 3.38rem !important;
    padding: .24rem !important;
    text-align: center !important;
}

.about.block-skin-concept-2 .person:nth-of-type(even),
body .about.block-skin-concept-2 .person:nth-of-type(even) {
    grid-template-columns: minmax(0, 1fr) 3rem !important;
}

.about.block-skin-concept-2 .person img,
body .about.block-skin-concept-2 .person img {
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    align-self: center !important;
    justify-self: center !important;
    width: 3rem !important;
    height: 3rem !important;
    margin: 0 !important;
}

.about.block-skin-concept-2 .person:nth-of-type(even) img,
body .about.block-skin-concept-2 .person:nth-of-type(even) img {
    grid-column: 2 !important;
}

.about.block-skin-concept-2 .person-name,
.about.block-skin-concept-2 .parent,
body .about.block-skin-concept-2 .person-name,
body .about.block-skin-concept-2 .parent {
    grid-column: 2 !important;
    justify-self: center !important;
    align-self: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

.about.block-skin-concept-2 .person-name,
body .about.block-skin-concept-2 .person-name {
    grid-row: 1 !important;
    align-self: end !important;
    margin-bottom: .08rem !important;
    font-size: .4rem !important;
    line-height: 1.2 !important;
}

.about.block-skin-concept-2 .parent,
body .about.block-skin-concept-2 .parent {
    font-size: .3rem !important;
    line-height: 1.5 !important;
}

.about.block-skin-concept-2 .person .parent:nth-of-type(2),
body .about.block-skin-concept-2 .person .parent:nth-of-type(2) {
    grid-row: 2 !important;
    align-self: center !important;
}

.about.block-skin-concept-2 .person .parent:nth-of-type(3),
body .about.block-skin-concept-2 .person .parent:nth-of-type(3) {
    grid-row: 3 !important;
    align-self: start !important;
}

.about.block-skin-concept-2 .person:nth-of-type(even) .person-name,
.about.block-skin-concept-2 .person:nth-of-type(even) .parent,
body .about.block-skin-concept-2 .person:nth-of-type(even) .person-name,
body .about.block-skin-concept-2 .person:nth-of-type(even) .parent {
    grid-column: 1 !important;
}

/* Keep concept 4 First Married text centered and readable on the portrait. */
.about.block-skin-concept-4 .about-portrait__text,
body .about.block-skin-concept-4 .about-portrait__text {
    left: 2rem !important;
    right: .28rem !important;
    bottom: .48rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    text-shadow: 0 .08rem .26rem rgba(0, 0, 0, .38) !important;
}

.about.block-skin-concept-4 .about-portrait__text span,
body .about.block-skin-concept-4 .about-portrait__text span {
    margin-bottom: -.06rem !important;
    font-size: .92rem !important;
    line-height: .9 !important;
    color: #fff !important;
}

.about.block-skin-concept-4 .about-portrait__text strong,
body .about.block-skin-concept-4 .about-portrait__text strong {
    max-width: 100% !important;
    color: #fff !important;
    font-size: .58rem !important;
    line-height: 1.05 !important;
    letter-spacing: .08rem !important;
    text-align: center !important;
    word-break: keep-all !important;
}

/* Soft depth for concept 3 about cards on the shared white background. */
.about.block-skin-concept-3 .person,
body .about.block-skin-concept-3 .person {
    border: 1px solid rgba(var(--primary-rgb), .08) !important;
    box-shadow: 0 .22rem .62rem rgba(54, 43, 32, .1) !important;
}

.about.block-skin-concept-3 .person img,
body .about.block-skin-concept-3 .person img {
    box-shadow: 0 .16rem .42rem rgba(54, 43, 32, .12) !important;
}

/* Concept 4: keep the portrait below optional about subtitle text. */
.about.block-skin-concept-4 .section-subtitle:not([hidden]),
body .about.block-skin-concept-4 .section-subtitle:not([hidden]) {
    position: relative !important;
    z-index: 4 !important;
    margin-bottom: .58rem !important;
}

.about.block-skin-concept-4 .section-subtitle:not([hidden]) + .about-portrait,
body .about.block-skin-concept-4 .section-subtitle:not([hidden]) + .about-portrait {
    margin-top: 0 !important;
}