/*
====================================================

Familie-Leinberger.net
Datei........: style.css 
Version......: 2.7
Teil.........: 1 von 2
Autor........: Michael Leinberger & ChatGPT

====================================================
*/


/* =================================================
   01 - RESET
================================================= */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* =================================================
   02 - VARIABLEN
================================================= */

:root {

    --color-primary: #2E4536;
    --color-secondary: #556B4E;
    --color-hero-background: #777B51;
    --color-background-light: #F3F1EB;
    --color-text: #2A2A2A;
    --color-text-light: #FFFFFF;

    --color-white: var(--color-text-light);
    --color-black: #000000;

    --font-heading: "Quicksand", "Nunito Sans", "Segoe UI", Arial, Helvetica, sans-serif;
    --font-body: "Nunito Sans", "Segoe UI", Arial, Helvetica, sans-serif;

    --overlay: rgba(0,0,0,.12);

    --text-shadow:
        0 3px 15px rgba(0,0,0,.65);

    --transition: .35s ease;

}


/* =================================================
   03 - GRUNDLAYOUT
================================================= */

html {

    font-size:16px;

}

body {

    font-family:var(--font-body);

    background:var(--color-black);

    color:var(--color-white);

}


.home-page{

    overflow:hidden;

}


/* =================================================
   04 - HERO
================================================= */

.hero {

    position: relative;

    width: 100vw;
    height: 100vh;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(17rem, clamp(19rem, 25vw, 28rem));
    column-gap:0;
    align-items: center;

    overflow: hidden;

    background:var(--color-hero-background);

}

/* =================================================
   05 - HERO BILD
================================================= */

.hero-visual{

    position:relative;

    z-index:2;

    grid-column:1 / 3;
    grid-row:1;

    width:min(81vw, calc(98vh * 1.502));
    max-width:calc(100vw - 13rem);

    justify-self:center;

    transform:translateX(clamp(-5rem, -4.4vw, -2.8rem));

}


.hero-image {

    position: relative;

    z-index: 1;

    display: block;

    width:100%;
    height:auto;

    max-height:min(94vh, 100%);

    object-fit: contain;

}

/* =================================================
   07 - TITELBEREICH
================================================= */

.hero-title-container{

    position:relative;

    grid-column:2;
    grid-row:1;

    z-index:55;

    display:flex;
    flex-direction:column;
    justify-content:center;

    align-self:stretch;

    width:min(17rem, calc(100% - 4rem));

    justify-self:center;

    margin-right:0;
    margin-left:0;
    padding:clamp(1rem, 2vw, 2rem) 0;

    text-align:left;

    background:transparent;

    color:var(--color-text-light);

    visibility:hidden;
    opacity:1;

    transform:translateX(20px);

    transition:
        transform .95s ease,
        visibility 0s linear .82s;

    pointer-events:none;

}


.hero-title-container.hero-text-visible{

    visibility:visible;
    opacity:1;

    transform:translateX(0);

    transition:
        transform .95s ease,
        visibility 0s linear 0s;

}


.hero-title-container h1{

    font-family:var(--font-heading);

    font-size:clamp(2rem, 2.45vw, 2.55rem);

    font-weight:600;

    letter-spacing:0;

    line-height:1.13;

    opacity:1;
    visibility:visible;

    transform:none;

}


.title-line{

    display:block;

    opacity:0;
    visibility:hidden;

    transform:translateX(24px);

    transition:
        opacity 1s ease,
        transform 1s ease,
        visibility 0s linear 1s;

}


.hero-text-visible .title-line{

    opacity:1;
    visibility:visible;

    transform:translateX(0);

    transition:
        opacity 1s ease,
        transform 1s ease,
        visibility 0s linear 0s;

}


.hero-text-visible .title-line:nth-child(1){

    transition-delay:0s;

}


.hero-text-visible .title-line:nth-child(2){

    transition-delay:.52s;

}


.hero-title-container > p{

    margin-top:1rem;

    max-width:min(15rem, 100%);

    margin-left:0;

    font-size:clamp(.96rem, 1.04vw, 1.06rem);

    font-weight:400;

    letter-spacing:.4px;

    line-height:1.5;

    opacity:1;
    visibility:visible;


}


.hero-title-container h1.title-visible{

    animation:none;

}


@keyframes heroTextFadeIn{

    from{

        opacity:0;

        transform:translateY(12px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


.subtitle-line{

    display:block;

    opacity:0;

    visibility:hidden;

    transform:translateX(24px);

    transition:
        opacity 1s ease,
        transform 1s ease,
        visibility 0s linear 1s;

}


.subtitle-visible .subtitle-line{

    animation:none;
    opacity:1;
    visibility:visible;

    transform:translateX(0);

    transition:
        opacity 1s ease,
        transform 1s ease,
        visibility 0s linear 0s;

}


.subtitle-visible .subtitle-line:nth-child(1){

    transition-delay:1.04s;

}


.subtitle-visible .subtitle-line:nth-child(2){

    transition-delay:1.56s;

}


.subtitle-visible .subtitle-line:nth-child(3){

    transition-delay:2.08s;

}


@media (prefers-reduced-motion: reduce){

    .hero-title-container,
    .hero-title-container.hero-text-visible,
    .title-line,
    .hero-text-visible .title-line,
    .subtitle-line,
    .subtitle-visible .subtitle-line{

        transition:none;
        transform:none;

    }

    .hero-title-container,
    .hero-title-container.hero-text-visible,
    .title-line,
    .hero-text-visible .title-line,
    .subtitle-line,
    .subtitle-visible .subtitle-line{

        opacity:1;
        visibility:visible;

    }

}


@keyframes subtitleFadeIn{

    from{

        opacity:0;

        transform:translateY(12px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* =================================================
   08 - FOOTER
================================================= */

footer{

    font-family:var(--font-body);

}


.home-page footer{

    position:absolute;

    left:0;
    bottom:clamp(1.25rem, 3vh, 2rem);

    z-index:60;

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    gap:.35rem;

    margin-top:0;

    opacity:.88;

    pointer-events:auto;

    color:rgba(255,255,255,.72);

    font-size:.76rem;

    line-height:1.4;

}


.legal-navigation{

    display:flex;
    align-items:center;

    gap:.85rem;

}


.home-page .legal-navigation{

    gap:.55rem;

}


.legal-navigation a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}


.legal-navigation a:hover,
.legal-navigation a:focus-visible{

    color:var(--color-text-light);

}


.legal-page{

    min-height:100vh;

    overflow:auto;

    color:var(--color-text-light);

    background:var(--color-hero-background);

    scroll-behavior:smooth;

}


.legal-page-header{

    padding:clamp(2rem, 6vw, 4rem) clamp(1.25rem, 5vw, 4rem);

    color:var(--color-text-light);

    background:var(--color-hero-background);

}


.legal-page-nav{

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:1rem;

    width:min(980px, calc(100% - 1rem));

    margin:0 auto clamp(2.5rem, 6vw, 4.5rem);

}


.legal-page-actions,
.legal-page .legal-navigation{

    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:.7rem;

}


.legal-page-nav a,
.legal-page .legal-navigation a,
.legal-button,
.contact-copy-button,
.contact-submit,
.back-to-top{

    border-radius:999px;

    font-family:var(--font-body);

    text-decoration:none;

    transition:
        color .25s ease,
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease,
        opacity .25s ease;

}


.legal-button,
.contact-copy-button,
.contact-submit{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:.5rem;

    min-height:2.65rem;

    padding:.76rem 1.05rem;

    border:1px solid rgba(255,255,255,.24);

    color:var(--color-text-light);

    background:var(--color-primary);

    font-size:.95rem;
    font-weight:600;

    cursor:pointer;

}


.legal-page-nav a:not(.legal-button),
.legal-page footer .legal-navigation a{

    color:rgba(255,255,255,.78);

    font-size:.9rem;
    font-weight:500;

}


.legal-page-nav a:hover,
.legal-page-nav a:focus-visible,
.legal-page footer .legal-navigation a:hover,
.legal-page footer .legal-navigation a:focus-visible{

    color:var(--color-text-light);

}


.legal-button:hover,
.legal-button:focus-visible,
.contact-copy-button:hover,
.contact-copy-button:focus-visible,
.contact-submit:hover,
.contact-submit:focus-visible{

    border-color:rgba(255,255,255,.36);

    background:var(--color-secondary);

    box-shadow:0 12px 26px rgba(0,0,0,.16);

    transform:translateY(-1px);

}


.legal-page-title{

    width:min(980px, calc(100% - 1rem));

    margin:0 auto;

}


.legal-page-title h1{

    margin-bottom:1rem;

    font-family:var(--font-heading);

    font-size:clamp(2.45rem, 6vw, 4.6rem);

    font-weight:600;

    letter-spacing:0;

    line-height:1.08;

}


.legal-page-title p{

    max-width:46rem;

    color:rgba(255,255,255,.82);

    font-size:clamp(1rem, 2vw, 1.18rem);

    line-height:1.75;

}


.legal-content{

    width:min(900px, calc(100% - 2rem));

    margin:0 auto clamp(2.75rem, 6vw, 5rem);

}


.legal-card,
.contact-card{

    padding:clamp(1.45rem, 4vw, 2.55rem);

    border:1px solid rgba(255,255,255,.18);
    border-radius:18px;

    color:var(--color-text);

    background:rgba(243,241,235,.94);

    box-shadow:0 24px 58px rgba(0,0,0,.16);

}


.legal-card + .legal-card{

    margin-top:1.15rem;

}


.legal-card h2,
.contact-card h2{

    margin-bottom:1rem;

    color:var(--color-primary);

    font-size:clamp(1.28rem, 2.5vw, 1.72rem);

    font-weight:600;

    line-height:1.2;

}


.legal-card h3,
.contact-card h3{

    margin:1.5rem 0 .75rem;

    color:var(--color-primary);

    font-size:1.08rem;

    font-weight:600;

}


.legal-card p,
.legal-card li,
.contact-card p,
.contact-card li,
.contact-card label{

    color:var(--color-text);

    font-size:1rem;

    line-height:1.78;

}


.legal-card p + p,
.contact-card p + p{

    margin-top:.9rem;

}


.legal-card ul{

    margin:.75rem 0 0 1.2rem;

}


.legal-placeholder{

    color:var(--color-secondary);

    font-weight:600;

}


.legal-page footer{

    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;

    gap:1rem;

    padding:2rem 1rem 3rem;

    color:rgba(255,255,255,.72);

    font-size:.88rem;

}


.legal-page footer .legal-navigation{

    gap:.7rem;

}


.back-to-top{

    position:fixed;

    right:clamp(1rem, 3vw, 2rem);
    bottom:clamp(1rem, 3vw, 2rem);

    z-index:90;

    display:flex;
    align-items:center;
    justify-content:center;

    width:3rem;
    height:3rem;

    border:1px solid rgba(236,218,128,.72);

    color:#F0D873;

    background:rgba(0,0,0,.20);

    box-shadow:
        0 14px 32px rgba(0,0,0,.18),
        inset 0 0 0 1px rgba(255,255,255,.05);

    font-size:1.2rem;
    line-height:1;

    opacity:0;

    pointer-events:none;

    cursor:pointer;

    transform:translateY(.5rem);

}


.back-to-top.visible{

    opacity:1;

    pointer-events:auto;

    transform:translateY(0);

}


.back-to-top:hover,
.back-to-top:focus-visible{

    color:var(--color-text-light);

    border-color:rgba(255,255,255,.74);

    background:rgba(46,69,54,.68);

}


.contact-grid{

    display:grid;

    grid-template-columns:minmax(0, 1fr) minmax(16rem, 20rem);

    gap:1.25rem;

}


.contact-form{

    display:grid;

    gap:1rem;

}


.contact-field{

    display:grid;

    gap:.35rem;

}


.contact-field span{

    color:var(--color-primary);

    font-weight:600;

}


.contact-field input,
.contact-field textarea{

    width:100%;

    border:1px solid rgba(46,69,54,.18);
    border-radius:12px;

    padding:.85rem .95rem;

    color:var(--color-text);

    background:rgba(255,255,255,.72);

    font:inherit;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;

}


.contact-field textarea{

    min-height:10rem;

    resize:vertical;

}


.contact-field input:focus,
.contact-field textarea:focus{

    outline:none;

    border-color:var(--color-primary);

    background:rgba(255,255,255,.92);

    box-shadow:0 0 0 4px rgba(46,69,54,.12);

}


.required-marker{

    color:var(--color-secondary);

}


.form-trap{

    position:absolute;

    left:-100vw;

    width:1px;
    height:1px;

    overflow:hidden;

}


.contact-note{

    color:rgba(42,42,42,.72);

    font-size:.94rem;

}


.contact-message{

    margin-bottom:1rem;
    padding:1rem 1.1rem;

    border:1px solid rgba(46,69,54,.16);
    border-radius:14px;

    background:rgba(255,255,255,.58);

}


.contact-message-success{

    color:var(--color-primary);

}


.contact-message-error{

    color:#5b2f2f;

}


.contact-copy-group{

    display:grid;

    gap:.85rem;

    margin-top:1rem;

}


.contact-mail{

    color:var(--color-primary);

    font-weight:600;

    overflow-wrap:anywhere;

}


@media (max-width:760px){

    .legal-page-nav,
    .contact-grid{

        display:grid;

        grid-template-columns:1fr;

    }

    .legal-page-actions,
    .legal-page .legal-navigation{

        align-items:flex-start;

    }

    .back-to-top{

        width:3.25rem;
        height:3.25rem;

    }

}

/* =================================================
   08.2 - HINWEIS OHNE JAVASCRIPT
================================================= */

.noscript-page{

    min-height:100vh;

    overflow:auto;

    color:var(--color-text-light);

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(85,107,78,.42),
            rgba(46,69,54,0) 34%
        ),
        var(--color-primary);

}


.noscript-shell{

    display:flex;
    flex-direction:column;
    justify-content:center;

    width:min(860px, calc(100% - 2rem));

    min-height:100vh;

    margin:0 auto;
    padding:clamp(2rem, 6vw, 5rem) 0;

}


.noscript-card{

    padding:clamp(2rem, 6vw, 4rem);

    border:1px solid rgba(255,255,255,.16);
    border-radius:22px;

    background:rgba(243,241,235,.94);

    box-shadow:0 28px 70px rgba(0,0,0,.24);

    color:var(--color-text);

}


.noscript-icon{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:3rem;
    height:3rem;

    margin-bottom:1.5rem;

    border:1px solid rgba(46,69,54,.18);
    border-radius:50%;

    color:var(--color-primary);

    background:rgba(46,69,54,.08);

    font-size:1.25rem;
    font-weight:600;

}


.noscript-card h1{

    margin:0 0 1.25rem;

    color:var(--color-primary);

    font-size:clamp(2rem, 5vw, 3.5rem);

    font-weight:600;

    line-height:1.12;

}


.noscript-card p{

    max-width:42rem;

    color:rgba(42,42,42,.84);

    font-size:clamp(1rem, 2vw, 1.15rem);

    line-height:1.8;

}


.noscript-card p + p{

    margin-top:1rem;

}


.noscript-navigation{

    display:flex;
    flex-wrap:wrap;

    gap:.85rem;

    margin-top:2rem;

}


.noscript-navigation a{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:.8rem 1.15rem;

    border:1px solid rgba(46,69,54,.16);
    border-radius:999px;

    color:var(--color-primary);

    background:rgba(255,255,255,.56);

    font-size:.95rem;
    font-weight:500;

    text-decoration:none;

    transition:var(--transition);

}


.noscript-navigation a:hover,
.noscript-navigation a:focus-visible{

    color:var(--color-text-light);

    background:var(--color-primary);

}


.noscript-page footer{

    display:flex;
    justify-content:center;

    padding:2rem 0 0;

    color:rgba(255,255,255,.72);

    font-size:.9rem;

}

/* =================================================
   08.1 - HINWEIS HOCHFORMAT
================================================= */

.orientation-notice{

    display:none;

}


.orientation-notice-content{

    max-width:34rem;

    padding:2.5rem;

    text-align:center;

}


.orientation-notice-title{

    margin-bottom:1rem;

    font-size:clamp(1.8rem, 7vw, 3rem);

    font-weight:600;

    line-height:1.2;

}


.orientation-notice p{

    font-size:clamp(1rem, 3.8vw, 1.25rem);

    font-weight:400;

    line-height:1.7;

}

/* =================================================
   09 - FAMILY NAVIGATION
================================================= */

.family-navigation {

    position:absolute;

    inset:0;

    z-index:45;

    pointer-events:none;

    opacity:0;

    transition:opacity .3s ease;

}


.hero-visual:hover .family-navigation,
.hero-visual:focus-within .family-navigation{

    opacity:1;

}


.family-member{

    position:absolute;

    display:block;

    border-radius:999px;

    color:transparent;

    text-decoration:none;

    pointer-events:auto;

}


.family-member::after{

    content:"";

    position:absolute;

    left:50%;
    top:50%;

    width:6px;
    height:6px;

    border:1px solid rgba(255,255,255,.9);
    border-radius:50%;

    background:rgba(255,255,255,.82);

    box-shadow:
        0 0 0 4px rgba(255,255,255,.12),
        0 0 10px rgba(0,0,0,.35);

    opacity:.72;

    transform:translate(-50%,-50%) scale(.85);

    transition:
        opacity .3s ease,
        transform .3s ease,
        background-color .3s ease,
        box-shadow .3s ease;

}


.family-member::before{

    content:"";

    position:absolute;

    left:50%;
    top:50%;

    width:18px;
    height:18px;

    border:1.5px solid rgba(255,255,255,.85);
    border-radius:50%;

    background:rgba(255,255,255,.18);

    box-shadow:0 0 8px rgba(0,0,0,.35);

    opacity:.32;

    transform:translate(-50%,-50%) scale(.85);

    transition:
        opacity .3s ease,
        transform .3s ease,
        box-shadow .3s ease;

}

.hero-visual:hover .family-member::after,
.hero-visual:focus-within .family-member::after,
.family-navigation.family-navigation-highlight .family-member::after{

    opacity:1;

    transform:translate(-50%,-50%) scale(1);

}


.hero-visual:hover .family-member::before,
.hero-visual:focus-within .family-member::before,
.family-navigation.family-navigation-highlight .family-member::before{

    opacity:.86;

    animation:hotspotPulse 2.8s ease-in-out infinite;

}


.family-member:hover::after,
.family-member:focus-visible::after{

    opacity:1;

    transform:translate(-50%,-50%) scale(1.08);

}


.family-member:hover::before,
.family-member:focus-visible::before{

    opacity:.96;

}


.family-navigation.family-navigation-highlight .family-member::before{

    opacity:.86;

}


@keyframes hotspotPulse{

    0%,
    100%{

        transform:translate(-50%,-50%) scale(.98);

    }

    50%{

        transform:translate(-50%,-50%) scale(1.04);

    }

}


.family-member span{

    position:absolute;

    width:1px;
    height:1px;

    overflow:hidden;

}


.family-member.fabrice{

    top:53%;
    left:20.5%;

    width:6.5%;
    height:8%;

}


.family-member.alexandra{

    top:55%;
    left:41.5%;

    width:6%;
    height:8%;

}


.family-member.joana{

    top:73%;
    left:50.5%;

    width:6.5%;
    height:8%;

}


.family-member.michael{

    top:54%;
    left:72%;

    width:6.5%;
    height:8%;

}

/* =================================================
   10 - INFOBOX
================================================= */

.info-box{

    position:absolute;

    z-index:50;

    width:min(300px, calc(100vw - 40px));

    padding:22px 24px 24px;

    border:1px solid rgba(46,69,54,.12);
    border-radius:16px;

    color:var(--color-text);

    background:rgba(243,241,235,.96);

    box-shadow:
        0 22px 52px rgba(46,69,54,.20);

    opacity:0;
    visibility:hidden;

    transform:translateY(10px);

    transition:
        opacity .35s ease,
        transform .35s ease,
        visibility 0s linear .35s;

}

.info-box.visible{

    opacity:1;
    visibility:visible;

    transform:translateY(0);

    transition:
        opacity .35s ease,
        transform .35s ease,
        visibility 0s linear 0s;

}

.info-box-fabrice{

    left:20%;
    top:57%;

}

.info-box-alexandra{

    left:34%;
    top:60%;

}

.info-box-joana{

    left:55%;
    top:69%;

}

.info-box-michael{

    left:67%;
    top:57%;

}

.info-box h2{

    margin:0 0 14px;

    color:var(--color-primary);

    font-size:1.35rem;

    font-weight:600;

    line-height:1.25;

}


.info-box p{

    margin:8px 0;

    line-height:1.55;

}


#personAge{

    color:var(--color-secondary);

    font-size:.95rem;

    font-weight:600;

}


#personWork{

    color:rgba(42,42,42,.78);

    font-size:.95rem;

    font-weight:500;

}


.person-spotify-link{

    display:inline-flex;
    align-items:center;

    gap:8px;

    margin:10px 0 12px;

    color:var(--color-primary);

    font-size:.9rem;
    font-weight:600;

    line-height:1.4;

    text-decoration:none;

    transition:var(--transition);

}


.person-spotify-link::before{

    content:"♪";

    color:var(--color-secondary);

    font-size:.95rem;

    line-height:1;

}


.person-spotify-link:hover{

    color:var(--color-secondary);

    transform:translateX(3px);

}


.person-quote{

    color:rgba(42,42,42,.82);

    font-size:.93rem;

    line-height:1.65;

}


#personLink{

    display:inline-flex;
    align-items:center;

    gap:8px;

    margin-top:10px;
    padding:10px 14px;

    border-radius:999px;

    color:var(--color-text-light);

    background:var(--color-primary);

    font-size:.9rem;
    font-weight:600;

    text-decoration:none;

    transition:var(--transition);

}


#personLink:hover{

    background:var(--color-secondary);

    transform:translateX(3px);

}


.arrow{

    font-size:1.05rem;

}

@media (max-width:760px){

    .family-member::after{

        width:6px;
        height:6px;

    }

    .info-box{

        position:fixed;

        left:20px !important;
        right:20px;
        bottom:20px;
        top:auto !important;

        width:auto;

        max-height:calc(100vh - 40px);

        overflow:auto;

    }

}

@media (max-width:1024px) and (max-height:520px) and (orientation:landscape){

    .hero{

        grid-template-columns:
            minmax(0, 1fr)
            minmax(10.5rem, 23vw);

    }

    .hero-visual{

        width:min(76vw, calc(92vh * 1.502));
        max-width:calc(100vw - 10.5rem);

        transform:translateX(clamp(-2.4rem, -3.4vw, -1.2rem));

    }

    .hero-title-container{

        width:min(11.5rem, calc(100% - 1.5rem));

        justify-content:center;

        padding:.65rem 0;

        transform:translateX(12px);

    }

    .hero-title-container h1{

        font-size:clamp(1.65rem, 4.8vh, 2rem);

        line-height:1.08;

    }

    .hero-title-container > p{

        margin-top:.55rem;

        max-width:10.5rem;

        font-size:clamp(.78rem, 2.45vh, .92rem);

        line-height:1.36;

        letter-spacing:.2px;

    }

    .home-page footer{

        position:static;

        width:100%;

        margin-top:clamp(1.15rem, 5.2vh, 1.7rem);

        gap:.2rem;

        font-size:clamp(.55rem, 1.8vh, .68rem);

        line-height:1.28;

        opacity:.78;

        flex-shrink:0;

    }

    .home-page .legal-navigation{

        flex-wrap:wrap;

        gap:.18rem .35rem;

    }

    .family-member::before{

        width:15px;
        height:15px;

    }

    .family-member::after{

        width:5px;
        height:5px;

    }

    .info-box{

        position:fixed;

        left:max(.8rem, env(safe-area-inset-left)) !important;
        right:auto;
        top:auto !important;
        bottom:max(.8rem, env(safe-area-inset-bottom));

        width:min(19rem, 43vw);
        max-height:calc(100vh - 1.6rem);

        padding:.85rem .95rem .95rem;

        border-color:rgba(255,255,255,.14);
        border-radius:12px;

        color:rgba(255,255,255,.9);

        background:rgba(19,23,17,.88);

        box-shadow:0 16px 42px rgba(0,0,0,.34);

        overflow:auto;

        backdrop-filter:blur(10px);

    }

    .info-box h2{

        margin-bottom:.45rem;

        color:var(--color-text-light);

        font-size:1.05rem;

        line-height:1.15;

    }

    .info-box p{

        margin:.32rem 0;

        line-height:1.38;

    }

    #personAge,
    #personWork,
    .person-quote{

        color:rgba(255,255,255,.72);

        font-size:.78rem;

    }

    .person-spotify-link{

        margin:.45rem 0 .35rem;

        color:rgba(228,241,223,.95);

        font-size:.8rem;

    }

    .person-spotify-link::before{

        color:rgba(228,241,223,.78);

    }

}

@media (hover:none), (pointer:coarse){

    .family-navigation{

        opacity:1;

    }

    .family-member::after{

        opacity:1;

        transform:translate(-50%,-50%) scale(1);

    }

    .family-member::before{

        opacity:.86;

        animation:hotspotPulse 2.8s ease-in-out infinite;

    }

}

@media (max-width:1024px) and (orientation:portrait){

    .home-page{

        background:var(--color-primary);

        overflow:hidden;

    }

    .home-page .hero,
    .home-page footer{

        display:none;

    }

    .home-page .orientation-notice{

        position:fixed;

        inset:0;

        z-index:1000;

        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;

        gap:clamp(1.25rem, 4vw, 2rem);

        min-height:100vh;

        padding:clamp(1.5rem, 6vw, 4rem);

        color:var(--color-text-light);

        background:var(--color-primary);

        font-family:var(--font-body);

    }

    .home-page .orientation-footer{

        position:static;

        left:auto;
        bottom:auto;

        display:flex;
        flex-direction:column;
        align-items:center;

        gap:.4rem;

        width:auto;
        max-width:100%;

        margin:0;

        color:rgba(255,255,255,.72);

        font-size:.82rem;
        line-height:1.35;

        opacity:.82;

        pointer-events:auto;

    }

    .home-page .orientation-footer .legal-navigation{

        justify-content:center;
        flex-wrap:wrap;

        gap:.35rem .55rem;

    }

}