@font-face {
    font-family: "DallaCorte";
    src:
            local("DallaCorte"),
            url("DallaCorte-CondensedSemiBold-4.otf") format("opentype");
}
@font-face {
    font-family: "Dinot";
    src:
            local("Dinot"),
            url("DINOT.otf") format("opentype");
}

*,*::before,*::after{
    box-sizing: border-box;

    /* controversial, but useful */
    min-height: 0;
    min-width: 0;
}

html{
    hanging-puntuation: first last;
}

body{
    font-family: system-ui, sans-serif;
    margin: 0;
    padding: 0;
}

body{

    --content-max-width-big: 1920;
    --content-max-width-small: 375;
    --font-size-big: 14;
    --font-size-small: 14;

    --px-in-rem: 16;

    background: rgb(141,141,141);
    background-image: linear-gradient(0deg, rgba(141,141,141,0.86) 0%, rgba(241,239,239,0.86) 100%), url("bg.jpg");
    background-position: left top, center center;
    background-repeat: repeat-x, no-repeat;
    background-size: auto 100%, cover;

    /* fluid font with clamp calculator */
    --font-size-fluid-factor: calc( (var(--font-size-big) - var(--font-size-small)) / (var(--content-max-width-big) - var(--content-max-width-small)) );
    --font-size-min: calc( (var(--font-size-small) / var(--px-in-rem)) * 1rem );
    --font-size-preferred: calc( (var(--font-size-fluid-factor) * 100cqw) + ((var(--font-size-small) - (var(--font-size-fluid-factor) * var(--content-max-width-small))) / var(--px-in-rem) * 1rem) );
    --font-size-max: calc( (var(--font-size-big) / var(--px-in-rem) ) * 1rem );
    font-size: clamp( var(--font-size-min), var(--font-size-preferred), var(--font-size-max) );

}

@media (max-aspect-ratio: 1/1) {
    .page-wrapper {
        margin-bottom: 3em;
    }
}
@media (min-aspect-ratio: 1/1) and (min-width: 700px) {
    html,body{
        height: 100svh;
        overflow: hidden;
    }
    .page-wrapper {
        height: 100svh;
    }
}


/* eventually reset harder */
/*
html{
    color-scheme: dark light;
}
*/

*{
    margin: 0;
    padding: 0;
    border: none;
    font: inherit;
}


img,picture,svg,video,iframe,embed,canvas{
    font-style: italic;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-size: cover;
    shape-margin: .75rem;
}


video{
    aspect-ratio: 16 / 9 auto;
}

h1,h2,h3,h4,h5,h6{
    max-width: 75ch;
    text-wrap: balance;
}

p{
    max-width: 75ch;
    text-wrap: pretty;
}

@media (prefers-reduced-motion: no-preferece){
    :has(:target){
        scroll-behaviour: smooth;
        scroll-padding-top: 2rem;
    }
}


.wrapper{
    --content-max-width-big: 1024;
    --content-max-width-small: 375;
    --font-size-big: 16;
    --font-size-small: 16;

    --px-in-rem: 16;

    --padding-inline: 5rem;

    width: min( calc( var(--content-max-width-big) * 1px ), 100% - (var(--padding-inline) / 2));
    margin-inline:  auto;
}

/* sidebar */
.with-sidebar {
    --main-min-width: 50ch;
    --sidebar-size: 10ch;
    --gap: 2rem;

    display: flex;
    gap: var(--gap);
    flex-wrap: wrap;
}

.with-sidebar > * {
    flex-grow: 1;
}

.with-sidebar > :first-child {
    flex-grow: 999;
    flex-basis: calc(
            ((var(--main-min-width) - (100% - var(--sidebar-size) - var(--gap))) * 9999)
    );
}

.with-sidebar > :last-child {
    flex-basis: var(--sidebar-size);
}

/* columns */
.columns {

    --min-column-size: 10rem;
    --column-count: 3;
    --gap: 2rem;

    --breakpoint: calc(var(--min-column-size) * var(--column-count) + (var(--gap) * (var(--column-count) - 1)) );
    --column-size: calc((100% / var(--column-count)) - var(--gap));

    display: grid;
    gap: var(--gap);

    grid-template-columns: repeat(
      auto-fit,
      minmax(
              min(max(var(--column-size), (100% - var(--breakpoint)) * -999 ), 100%),
              1fr)
      );
}

/* grid flow with breakouts, also fullwidth */
.content-grid {
    --padding-inline: 1rem;
    --content-max-width: 600px;
    --breakout-max-width: 900px;

    --breakout-size: calc(
            (var(--breakout-max-width) - var(--content-max-width-big)) / 2
    );

    display: grid;
    grid-template-columns:
      [full-width-start] minmax(var(--padding-inline), 1fr)
      [breakout-start] minmax(0, var(--breakout-size))
      [content-start] min(
        100% - (var(--padding-inline) * 2),
        var(--content-max-width-big)
      )
      [content-end]
      minmax(0, var(--breakout-size)) [breakout-end]
      minmax(var(--padding-inline), 1fr) [full-width-end];
}

.content-grid > :not(.breakout, .full-width),
.full-width > :not(.breakout, .full-width) {
    grid-column: content;
}

.content-grid > .breakout {
    grid-column: breakout;
}

.content-grid > .full-width {
    grid-column: full-width;

    display: grid;
    grid-template-columns: inherit;
}

img.full-width {
    width: 100%;
    max-height: 45vh;
    object-fit: cover;
}


header{

}

.logo{
    display: block;
    text-decoration: none;
    width: min(87px, calc(87 / var(--font-size-big) * 1em ));
    margin-inline: auto;
    color: #39383a;
    margin-block: 10svh 7svh;
}
.logo img{
    display: block;
    width: 100%;
    height: auto;
}

header h1,header h2, header p{
    text-align: center;
    margin-inline: auto;
}
h1{
    font-family: DallaCorte;
    line-height: 1;
    width: max-content;
}
h1::after{
    content: '';
    display: block;
    margin-block: .5em;
    margin-inline: auto;
    height: auto;
    width: 100%;
}
@media screen and (max-width: 90rem) {
    h1{
        font-size: 1.43em;
    }
    h1::after{
        aspect-ratio: 238 / 6;
        background: transparent url("colors-small.png") center top no-repeat;
        background-size: 100% auto;
    }
}
@media screen and (min-width: 90rem) {
    h1{
        font-size: 1.572em;
    }
    h1::after{
        aspect-ratio: 262 / 6;
        background: transparent url("colors.png") center top no-repeat;
        background-size: 100% auto;
    }
}

p{
    color: #39383a;
    font-family: Dinot;
    line-height: 1.1;
}
@media screen and (max-width: 90rem) {
    p{
        font-size: 1em;
    }
}
@media screen and (min-width: 90rem) {
    p{
        font-size: 1.43em;
    }
}

header{

}
@media screen and (max-width: 90rem) {
    header{
        margin-block-end: 5.3svh;
    }
}
@media screen and (min-width: 90rem) {
    header{
        margin-block-end: 10.37svh;
    }
}

main{
    margin-inline: auto;
}
@media screen and (max-width: 90rem) {
    main{
        width: min(95svw, 884px);
    }
}
@media screen and (min-width: 90rem) {
    main{
        width: min(95svw, 1230px);
    }
}



.columns a{
    display: block;
    text-decoration: none;
}
.columns span{
    display: block;
}


.item{
    container-type: size;
    color: #f9c62d;
    font-family: Dinot;
    box-shadow: 2px 3px 2px 0 rgba(0, 0, 0, 0.34);
    background-color: #39383a;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100% auto;
}
.item .img{
    display: block;
    color: #ffffff;
    padding-block: 77.2cqh 0;
    padding-inline: 6.4cqw;
}
.item .txt{
    display: block;
    padding-block: 3cqh;
    padding-inline: 6.4cqw;
    font-size: 5.6cqw;
    font-family: Dinot;
}
.item .txt::after{
    content: '';
    display: inline-block;
    vertical-align: middle;
    background: transparent url("arr.svg") left center no-repeat;
    background-size: 100% auto;
    aspect-ratio: 18.5 / 12.9;
    width: 1em;
    margin-left: .8em;
}
.item img{
    display: block;
    color: #ffffff;
    width: auto;
    height: 6cqh;
}
@media screen and (max-width: 90rem) {
    .item{
        aspect-ratio: 280 / 268;
    }
}
@media screen and (min-width: 90rem) {
    .item{
        aspect-ratio: 370 / 354;
    }
}

footer{
    text-align: center;
    background: #39383a;
    color: #fff;
    padding-block: 1em;
    font-size: .8em;
    padding-inline: 1em;
}
footer a,footer a:link,footer a:active,footer a:visited,footer a:hover{
    color: #f9c62d;
    text-decoration: none;
}
@media (min-width: 570px) and (min-height: 570px) {
    footer{
        position: fixed;
        left: 0;
        bottom: 0;
        right: 0;
    }
}
.item-1{
    background-image: url('bg_zero.jpg');
}
.item-2{
    background-image: url('bg_icon.jpg')
}
.item-3{
    background-image: url('bg_studio.jpg')
}