body > * { position:relative; }

nav { padding:1em 0em; }
nav.bg-blur {
    --bg-blur:var(--small_EM);
    --bg-blur-color:var(--mode-bgc);
    --bg-blur-opacity:var(--small);
}
.bg-blur {
    --bg-blur:var(--tiny_EM);
    --bg-blur-color:var(--white);
    --bg-blur-opacity:var(--medium);
    backdrop-filter: blur(var(--bg-blur));
    background-color:rgb(var(--bg-blur-color) / var(--bg-blur-opacity));
}
.container-small {
    /* --bg-blur-opacity:var(--small); */
    padding:1.5em;
    filter:drop-shadow(0 0 3em rgb(var(--mode-color) / var(--small)));
}

.container-small p {
    font-size:1.5em;
    letter-spacing:0.1em;
    font-style:italic;
    position:relative;
    text-indent:1em;
    text-align:center;
}
a { text-decoration:none; color:inherit; }
ion-icon { font-size:2em; cursor:pointer; }
ion-icon[name="logo-facebook"] { color:#3366a8; }
ion-icon[name="logo-instagram"] { color:#ed3e75; }
ion-icon:not(:hover) { color:rgb(var(--mode-color) / var(--mini)); }
.hr {
    border-bottom:0.1em solid rgb(var(--current));
}

.container-small p::before {
    content:"\"";
    font-size:3em;
    font-family:serif;
    font-style:normal;
    font-weight:bold;
    position:relative;
    line-height:0.5em;
    top:0.35em;
    color:rgb(var(--current));
    /* opacity:calc(var(--mini)); */
}

.img:not(.active), .wallpaper > *:not(.active) {
    opacity:0;
}

.container-small:hover .img {
    transform:scale(1.25);
}

.square {
    position:relative;
    margin-top:-4.5em;
    /* margin-bottom:1.5em; */
    overflow:hidden;
}


.square:hover > .img {
    transform-origin:left;
}

.square > .img {
    position:absolute;
    top:0em;
    right:0em;
    bottom:0em;
    left:0em;
}
.square::before {
    content:"";
    display:block;
    width:100%;
    height:100%;
    position:absolute;
    background-image: url("../medias/identity/svg/sweets-and-dough_square.svg");
    z-index:2;
    opacity:calc(var(--medium));
}
.square::after {
    content:"";
    display:block;
    width:100%;
    position:relative;
    padding-top:calc(100%);
    background-color:rgb(var(--dark) / var(--small));
    z-index:1;
    opacity:calc(var(--small));
}

.square:not(:hover)::before, .square:not(:hover)::after {
    opacity:0;
}


#brand { max-height:2em; display:inline-block; }

.wallpaper > .col {
    --flex-basis:62.5%;
    /* --bgp:left center; */
}

.wallpaper {
    position:absolute;
    top:0em;
    right:0em;
    bottom:0em;
    left:0em;
    z-index:-1;
    opacity:calc(var(--small));
    overflow:hidden;
}
.wallpaper > .col p { padding-left:25%; display:inline; }
.wallpaper > .col p:nth-child(odd) { padding-left:10%; line-height:0.6em; }
.wallpaper > .col p:nth-child(even) { font-size:1.5em; }

.visual.clippingText {
    --shift:-0.15em;
    --clip-fs:100vmin;
    --clip-min:6.75em;
    --clip-max:8.75em;
    font-size:min(max(calc(var(--clip-fs) / 6.75), var(--clip-min)), var(--clip-max));
    font-weight:bold;
    text-transform:uppercase;
    line-height:0.7em;
    letter-spacing:var(--shift);
    overflow-wrap:anywhere;
    margin-left:var(--shift);
    align-self:flex-end;
    padding-top:calc(var(--shift) * -1);
}

.visual {
    --bgr:no-repeat;
    --bgs:cover;
    --bgp:center;
    background-image:var(--bgi);
    background-repeat:var(--bgr);
    background-size:var(--bgs);
    background-position:var(--bgp);
}

.visual.clippingText {
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.fullScreen {
    max-width:100vw;
    min-height:100vh;
}
.fullScreen.fixedScreen { height:100vh; }
.fullScreen.limitedScreen {
    min-height:inherit;
    max-height:100vh;
}



@media screen and (max-width:1000px) {
    .wallpaper > .col { --flex-basis:75%; }
    .visual.clippingText {
        --clip-min:6em;
    }
}
@media screen and (max-width:900px) {
    .wallpaper > .col { --flex-basis:85%; }
    .visual.clippingText {
        --clip-min:5.75em;
    }
}
@media screen and (max-width:800px) {
    .wallpaper > .col { --flex-basis:100%; }
    .container-small > .flex > [class*="col("] {
        --column:12;
    }
    .container-small p {
        font-size:1.5em;
    }
    .square {
        margin-top:0;
        margin-bottom:-25%;
    }
    .square::after {
        padding-top:65%;
    }
}
@media screen and (max-width:700px) {
    .visual.clippingText {
        --clip-min:5.5em;
    }
}
@media screen and (max-width:500px) {
    .visual.clippingText {
        --clip-min:5em;
    }
}

@media screen and (max-width:1200px) and (orientation:landscape) {
    /* .wallpaper > .col { --flex-basis:80%; } */
    .visual.clippingText {
        --clip-min:15.5vmin;
    }
}