/* ==========================================================
   BUILD:IN:LAYERS
   Design System
   Version 2.0

   Author:
   Tobias Edelmann

   ----------------------------------------------------------
   Foundation stylesheet for the BUILD:IN:LAYERS website.
   ========================================================== */



/* ==========================================================
   01. Font Faces
========================================================== */

@font-face {

    font-family: "Manrope";
    src: url("../assets/fonts/Manrope-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;

}

@font-face {

    font-family: "Manrope";
    src: url("../assets/fonts/Manrope-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;

}

@font-face {

    font-family: "Manrope";
    src: url("../assets/fonts/Manrope-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;

}

@font-face {

    font-family: "Manrope";
    src: url("../assets/fonts/Manrope-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;

}



/* ==========================================================
   02. Design Tokens
========================================================== */

:root{

    /* ------------------------------------------------------
       Colors
    ------------------------------------------------------ */

    --color-background:#FCFCFC;
    --color-surface:#FFFFFF;

    --color-text:#11111F;

    --color-muted:#7F7F88;

    --color-light:#9A9AA3;

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



    /* ------------------------------------------------------
       Typography
    ------------------------------------------------------ */

    --font-family:"Manrope",sans-serif;

    --font-xs:.80rem;
    --font-sm:.90rem;
    --font-base:1rem;
    --font-lg:1.35rem;
    --font-xl:2rem;



    /* ------------------------------------------------------
       Spacing
    ------------------------------------------------------ */

    --space-xs:.5rem;
    --space-sm:1rem;
    --space-md:2rem;
    --space-lg:3rem;
    --space-xl:5rem;
    --space-2xl:9rem;



    /* ------------------------------------------------------
       Layout
    ------------------------------------------------------ */

    --content-width:600px;

    --page-width:900px;
	
	--logo-width:480px;
	
	--legal-text-width:480px;
	
	/* Vertical Rhythm */
	
	--page-top-spacing:9rem;
	
	--legal-logo-spacing:5rem;
	
	--reading-width:540px;



    /* ------------------------------------------------------
       Motion
    ------------------------------------------------------ */

    --transition:.25s ease;

}



/* ==========================================================
   03. Dark Mode
========================================================== */

@media (prefers-color-scheme:dark){

    :root{

        --color-background:#11111F;

        --color-surface:#11111F;

        --color-text:#F4F4F6;

        --color-muted:#B0B0B8;

        --color-light:#8C8C95;

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

        --color-link-hover:#FFFFFF;
		
		--page-width:900px;
		
		--reading-width:540px;
		
		--content-width:640px;
		
		--logo-width:480px;
		
		--legal-text-width:480px;

    }

}



/* ==========================================================
   04. Reset
========================================================== */

*,
*::before,
*::after{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html{

    font-size:16px;

    scroll-behavior:smooth;
	
	scrollbar-gutter:stable;
	
	-webkit-text-size-adjust:100%;

}



html,
body{

    min-height:100%;

}



/* ==========================================================
   05. Base
========================================================== */

body{

    background:var(--color-background);

    color:var(--color-text);

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

    line-height:1.6;

    display:flex;

    flex-direction:column;

}



img{

    display:block;

    max-width:100%;

    height:auto;

}



a{

    color:var(--color-link);

    text-decoration:none;

    transition:color var(--transition);
	
	cursor:pointer;

}



a:hover{

    color:var(--color-link-hover);

}



::selection{

    background:var(--color-text);

    color:var(--color-background);

}

/* ==========================================================
   06. Shared Components
========================================================== */

/* ----------------------------------------------------------
   Logo
---------------------------------------------------------- */

.logo{

    width:var(--logo-width);

    max-width:90%;

    user-select:none;

    -webkit-user-drag:none;

}

.logo-link {
    display: inline-block;
    text-decoration: none;
}

.logo-link img,
.logo-link picture {
    display: block;
}

.logo-link {
    cursor: pointer;
}
/* ----------------------------------------------------------
   Content Width
---------------------------------------------------------- */

.content{

    width:100%;

    max-width:var(--content-width);

    margin-inline:auto;

}


/* ----------------------------------------------------------
   Text Alignment
---------------------------------------------------------- */

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}



/* ==========================================================
   07. Landing Page
========================================================== */

.page {

    width: 100%;

    max-width: var(--page-width);

    margin-inline: auto;

    padding-inline: var(--space-md);

}

.landing-page {

    min-height: calc(100vh - 86px);

    display: grid;

    grid-template-rows:
        auto
        1fr
        auto
        1fr
        auto;

    justify-items: center;
    align-items: center;

    padding:
        var(--page-top-spacing)
        0
        var(--space-md);

}



/* ----------------------------------------------------------
   Brand
---------------------------------------------------------- */

.brand {

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

}



/* ----------------------------------------------------------
   Message
---------------------------------------------------------- */

.message{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}



.claim{

    font-size:var(--font-lg);

    font-weight:400;

    line-height:1.7;

    letter-spacing:.01em;

}



.status{

    margin-top:1.25rem;

    font-size:var(--font-sm);

    font-weight:500;

    letter-spacing:.12em;

    color:var(--color-light);

    text-transform:uppercase;

}



/* ----------------------------------------------------------
   Contact
---------------------------------------------------------- */

.contact{

    margin-top:var(--space-xl);

}



.contact a{

    font-size:.95rem;

    font-weight:500;

}



/* ==========================================================
   Landing Page Interaction
========================================================== */

.brand a{

    display:block;

}



.brand a:hover{

    color:inherit;

}


/* ==========================================================
   08. Legal Pages
========================================================== */

/* ----------------------------------------------------------
   Page Layout
---------------------------------------------------------- */

.legal-page{

    background:var(--color-background);

}



.legal-layout{

    padding-top:var(--page-top-spacing);
	
	padding-bottom:var(--space-xl);

}



/* ----------------------------------------------------------
   Logo
---------------------------------------------------------- */

.logo-block{

    display:flex;

    justify-content:center;

    margin-bottom:var(--legal-logo-spacing);

}

.logo-block a {

    display: flex;

    justify-content: center;

    width: 100%;

}

/* ----------------------------------------------------------
   Content
---------------------------------------------------------- */

.legal-content {

    width: 100%;
	
    max-width: var(--content-width);
    
	margin-inline: auto;

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

}

.legal-text {
    width: var(--logo-width);
    max-width: 100%;
    margin-inline: auto;
}

.legal-text h2 {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 2.5rem 0 1rem;
}

.legal-text h3 {
    margin: 2rem 0 0.75rem;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.3;
}

.legal-text h4 {
    margin: 1.5rem 0 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.4;
}

.legal-text p {
    margin-left: 0;
}
/* ----------------------------------------------------------
   Typography
---------------------------------------------------------- */

.legal-content h1{

    font-size:var(--font-xl);

    font-weight:600;

    margin-bottom:3.5rem;
	
	text-align:center;

}



.legal-intro{

    font-size:var(--font-sm);

    font-weight:500;

    color:var(--color-muted);

    margin-bottom:1.5rem;

}



.legal-section{

    margin-top:2.5rem;

}



.legal-section:first-of-type{

    margin-top:0;

}



.legal-content > h2{

    font-size:1rem;

    font-weight:500;

    color:var(--color-light);

    margin-bottom:.9rem;

}



.legal-content p{

    font-size:var(--font-base);

    line-height:1.8;

    margin-bottom:1rem;

}



/* ----------------------------------------------------------
   Links
---------------------------------------------------------- */

.legal-content a{

    font-weight:500;

}



/* ----------------------------------------------------------
   Back Link
---------------------------------------------------------- */

.back-link{

    margin-top:var(--space-xl);

    text-align:center;

}



.back-link a{

    font-size:var(--font-xs);

    color:var(--color-light);

}



.back-link a:hover{

    color:var(--color-text);

}



/* ==========================================================
   09. Footer
========================================================== */

footer{

    padding:var(--space-md);

}



footer nav{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:2.5rem;

}



footer a{

    font-size:.85rem;

    font-weight:400;

    color:var(--color-light);

}



footer a:hover{

    color:var(--color-text);

}

/* ==========================================================
   10. Responsive
========================================================== */

/* ----------------------------------------------------------
   Large Displays
---------------------------------------------------------- */

@media (min-height:900px){

    :root{

        --page-top-spacing:10rem;

    }

}



/* ----------------------------------------------------------
   Tablet
---------------------------------------------------------- */

@media (max-width:1024px){

    :root{

        --logo-width:480px;

        --page-top-spacing:8rem;

    }

}



/* ----------------------------------------------------------
   Mobile
---------------------------------------------------------- */

@media (max-width:768px){

    :root{

        --logo-width:340px;

        --page-top-spacing:4rem;

        --content-width:100%;

    }



    .landing-page{

        display:flex;

        flex-direction:column;

        justify-content:center;

        gap:var(--space-lg);

        padding:

            var(--page-top-spacing)

            1.5rem

            2rem;

    }



    .legal-layout{

        padding:

            var(--page-top-spacing)

            1.5rem

            var(--space-lg);

    }



    .claim{

        font-size:1.1rem;

    }



    footer nav{

        gap:1.5rem;

    }

}



/* ==========================================================
   11. Utilities
========================================================== */

.hidden{

    display:none !important;

}



.visually-hidden{

    position:absolute;

    width:1px;

    height:1px;

    padding:0;

    margin:-1px;

    overflow:hidden;

    clip:rect(0,0,0,0);

    white-space:nowrap;

    border:0;

}



.center{

    display:flex;

    justify-content:center;

    align-items:center;

}