/* ==========================================================
   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:#11111F;

        --color-surface:#11111F;
		

        --color-text:#F4F4F6;

        --color-muted:#B0B0B8;

        --color-light:#8C8C95;
		

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

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



    /* ------------------------------------------------------
       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:0.5rem;
	
	--reading-width:540px;



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

    --transition:.25s ease;

}


/* ==========================================================
   03. 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%;

}



/* ==========================================================
   04. 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);

}

/* ==========================================================
   05. 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;

}



/* ==========================================================
   06. 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);
		
	position: relative;

}



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

.brand {

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

}



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

.message {

    flex: 1;

    display: flex;
    flex-direction: column;

    align-items: center;

    text-align: center;

}

.claim-block {

    margin-bottom: 3rem;

}

.status {

    margin: auto 0;

    color: var(--color-light);

}

.status p {

    margin: 0.9rem 0;

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

    line-height: 1.6;

}

.status-title {

    font-size: calc(var(--font-sm) * 1.1);

    font-weight: 600;

}



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

.contact {

    margin-top: 3rem;

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

}

.social-links {

    display: flex;
    justify-content: center;
    gap: 1.4rem;
    margin-top: 1rem;

}

.social-links img {

    width: 24px;
    height: 24px;

    opacity: 0.75;

    transition: opacity .2s ease,
                transform .2s ease;

}

.social-links img:hover {

    opacity: 1;

    transform: translateY(-2px);

}

.contact a{

    font-size:.95rem;

    font-weight:500;

}

.legal-text .contact-item {
    display: grid;
    grid-template-columns: 80px 1fr;
    column-gap: 0.75rem;
    align-items: baseline;
    margin-bottom: 0.3rem;
}

.legal-text .contact-item:last-of-type {
    margin-bottom: 1.2rem;
}

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

.brand a{

    display:block;

}



.brand a:hover{

    color:inherit;

}


/* ==========================================================
   07. 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);

}



/* ==========================================================
   08. 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);

}

/* ==========================================================
   09. Responsive
========================================================== */

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

@media (min-height:900px){

    :root{

        --page-top-spacing:10rem;

    }

}



/* ==========================================================
   10. 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;

}

/* ==========================================================
   Hero Intro
========================================================== */

.hero-intro {
    margin-top: 1.5rem;
    max-width: 42rem;
    margin-inline: auto;

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

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

    text-align: center;
}

.hero-scroll {
    position: absolute;
    left: 50%;
    bottom: 2rem;
    transform: translateX(-50%);

    font-size: 1.2rem;
    color: var(--color-muted);
    opacity: 0.5;

    pointer-events: none;
    user-select: none;
}

/* ==========================================================
   Introduction
========================================================== */

.intro {

    max-width: 900px;
    margin: 8rem auto;

    padding: 0 var(--space-lg);

    text-align: center;

}

.intro-kicker {

    margin-bottom: var(--space-sm);

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

    font-size: 0.95rem;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}

.intro h2 {

    margin-bottom: 3rem;

}

.intro-image {

    width: 100%;
    max-width: 720px;

    margin: 0 auto 3rem;

    border-radius: 12px;
	
	overflow: hidden;

}

.intro-image img {

    width: 100%;
    height: auto;
    display: block;

}

.intro-text {

    max-width: 42rem;

    margin: 0 auto 1.5rem;

    line-height: 1.8;

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

}

/* ==========================================================
   Portfolio Section
========================================================== */

.portfolio-section {

    max-width: 1200px;

    margin: 8rem auto;

    padding: 0 var(--space-lg);

}

.section-kicker {

    text-transform: uppercase;

    letter-spacing: .08em;

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

    font-size: .9rem;

    text-align: center;

}

.portfolio-section h2 {

    text-align: center;

    margin-top: .5rem;

    margin-bottom: 4rem;

}

.portfolio-grid {

    display: grid;

    grid-template-columns: 1.2fr 1fr;

    gap: 4.5rem;

    align-items: center;

}

.portfolio-image {

    width: 100%;

    overflow: hidden;

    border-radius: 12px;

}

.portfolio-image img {

    width: 100%;

    height: auto;

    display: block;

    border-radius: inherit;

}

.portfolio-text {

    line-height: 1.8;

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

}

.portfolio-grid.reverse {

    grid-template-columns: 1fr 1fr;

}

.portfolio-grid.reverse .portfolio-text {

    order: 1;

}

.portfolio-grid.reverse .portfolio-image {

    order: 2;

}

/* ==========================================================
   Contact
========================================================== */

.contact-section {

    max-width: 900px;

    margin: 10rem auto 8rem;

    padding: 0 var(--space-lg);

    text-align: center;

}

.contact-section h2 {

    margin-bottom: 1rem;

}

.contact-intro {

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

    margin-bottom: 3rem;

}

.contact-links {

    display: flex;

    justify-content: center;

    gap: 2rem;

    flex-wrap: wrap;

}

.contact-links a {

    text-decoration: none;

    color: var(--color-text);

    transition: opacity .2s;

}

.contact-links a:hover {

    opacity: .7;

}

/* ==========================================================
   Facebook Note
========================================================== */

.facebook-note {

    max-width: 900px;

    margin: 6rem auto;

    padding: 0 var(--space-lg);

    text-align: center;

}

.facebook-note p {

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

    line-height: 1.8;

}

.facebook-note a {

    color: var(--color-text);

    text-decoration: underline;

    text-underline-offset: 3px;

}

.facebook-note a:hover {

    opacity: .75;

}

/* ==========================================================
   Lightbox
========================================================== */

.lightbox{

    position:fixed;
    inset:0;

    display:none;

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

    background:rgba(17,17,31,.97);

    z-index:1000;

}

.lightbox-content{

    position:relative;

    display:inline-flex;

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

}

.lightbox-image{

    display:block;

    max-width:90vw;
    max-height:90vh;

    width:auto;
    height:auto;

    border-radius:12px;

    object-fit:contain;

}

.lightbox-close,
.lightbox-prev,
.lightbox-next{

    position:absolute;

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

    width:42px;
    height:42px;

    border:none;
    border-radius:50%;

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

    color:#fff;

    cursor:pointer;

    z-index:2;

    transition:background .2s;

}

.lightbox-close{

    top:1rem;
    right:1rem;

    font-size:1.5rem;

}

.lightbox-prev{

    left:1rem;
    top:50%;

    transform:translateY(-50%);

    font-size:2rem;

}

.lightbox-next{

    right:1rem;
    top:50%;

    transform:translateY(-50%);

    font-size:2rem;

}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover{

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

}

/* ----------------------------------------------------------
   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 ---------- */

    .landing-page{

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

        gap:var(--space-lg);

        padding:
            var(--page-top-spacing)
            1.5rem
            2rem;

    }

    .claim{

        font-size:1.1rem;

    }

    .hero-intro{

        font-size:1rem;

    }



    /* ---------- Intro ---------- */

    .intro{

        padding-inline:1.5rem;

    }



    /* ---------- Portfolio ---------- */

    .portfolio-section{

        margin:5rem auto;

        padding:0 1.5rem;

    }

    .portfolio-section h2{

        margin-bottom:2rem;

    }

    .portfolio-grid,
    .portfolio-grid.reverse{

        grid-template-columns:1fr;

        gap:2rem;

    }

    .portfolio-grid.reverse .portfolio-image{

        order:1;

    }

    .portfolio-grid.reverse .portfolio-text{

        order:2;

    }



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

    .contact-section{

        padding-inline:1.5rem;

    }



    /* ---------- Legal ---------- */

    .legal-layout{

        padding:
            var(--page-top-spacing)
            1.5rem
            var(--space-lg);

    }



    /* ---------- Footer ---------- */

    footer nav{

        gap:1.5rem;

    }
	
	.desktop-break{
		
		display:none;
		
	}

}