/* styles for index.html */

/* Reset Basics */

/* Reset Setings */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

/* Default Features */
* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* VARIABLES */

:root{

/* general */
--dark-color: 20, 20, 20;
--white-color: 247, 247, 247;

/* defualts */
--font-size-text: 0.875rem; /* 14px */
--font-size-captions: 0.75rem; /* 12px */
--line-height-text: 1.428 ; /* 1.25rem */
--font-size-h1: 1.5rem; /* 24px */

/* spacing */
--space-0: 0rem;
--space-025: 0.125rem; /* 2px */
--space-050: 0.25rem; /* 4px */
--space-100: 0.5rem; /* 8px */
--space-150: 0.75rem; /* 12px */
--space-200: 1rem; /* 16px */
--space-300: 1.5rem; /* 24px */
--space-400: 2rem; /* 32px */
--space-500: 2.5rem; /* 40px */
--space-600: 3rem; /* 48px */
--space-800: 4rem; /* 64px */
--space-1000: 5rem; /* 80px */
--space-1500: 7.5rem; /* 120px */
--space-2000: 10rem; /* 160px */

--space-negative-025: -0.125rem; /* -2px */
--space-negative-050: -0.25rem; /* -4px */
--space-negative-100: -0.5rem; /* -8px */
--space-negative-400: -2rem; /* -32px */
--space-negative-600: -3rem; /* -48px */

/* latin */
--latin-font-family: "neue-haas-grotesk-display", sans-serif;

--latin-font-size-body: 0.875rem; /* 14px */
--latin-line-hight-body: 1.25rem; /* 20px */
--latin-font-weight-body: 400;
--latin-font-style-body: normal;

--latin-font-size-h1: 1.5rem; /* 24px */
--latin-line-hight-h1: 1.5rem; /* 24px */
--latin-font-weight-h1: 600;
--latin-font-style-h1: normal;

--latin-font-size-h2: 0.875rem; /* 14px */
--latin-line-hight-h2: 1.25rem; /* 20px */
--latin-font-weight-h2: 600;
--latin-font-style-h2: normal;

/* cjk */
--cjk-font-family: "source-han-sans-sc-variable", sans-serif;

--cjk-font-size-body: 0.813rem; /* 13px */
--cjk-line-hight-body: 1.25rem; /* 20px */
--cjk-font-weight-body:  "wght" 350;
--cjk-font-style-body: normal;

--cjk-font-size-h1: 1.375rem; /* 24px */
--cjk-line-hight-h1: 1.5rem; /* 24px */
--cjk-font-weight-h1: "wght" 500;
--cjk-font-style-h1: normal;

--cjk-font-size-h2: 0.813rem; /* 13px */
--cjk-line-hight-h2: 1.25rem; /* 20px */
--cjk-font-weight-h2: "wght" 500; 
--cjk-font-style-h2: normal;

/* arabic */
--arabic-font-family: "aktiv-grotesk-arabic", sans-serif;
--arabic-font-size-body: 0.875rem; /* 14px */
--arabic-line-hight-body: 1.25rem; /* 20px */
--arabic-font-weight-body: 400;
--arabic-font-style-body: normal;

--arabic-font-size-h1: 1.5rem; /* 24px */
--arabic-line-hight-h1: 1.5rem; /* 24px */
--arabic-font-weight-h1: 600;
--arabic-font-style-h1: normal;

--arabic-font-size-h2: 0.875rem; /* 14px */
--arabic-line-hight-h2: 1.25rem; /* 20px */
--arabic-font-weight-h2: 600;
--arabic-font-style-h2: normal; 

/* languages */
--ckj-font: "source-han-sans-sc-variable", sans-serif;
}

body {
    font-family: var(--latin-font-family);
    font-size: var(--font-size-text);
    line-height: var(--line-height-text);
    background: rgb(var(--dark-color));
    color: rgb(var(--white-color));
}

body.cjk {
    font-family: var(--cjk-font-family);
    font-size: var(--cjk-font-size-body);
    font-variation-settings: var(--cjk-font-weight-body);
    line-height: var(--cjk-line-hight-body);
    font-style: var(--cjk-font-style-body);
}

body.arabic {
    font-family: var(--arabic-font-family);
    font-size: var(--arabic-font-size-body);
    font-weight: var(--arabic-font-weight-body);
    line-height: var(--arabic-line-hight-body);
    font-style: var(--arabic-font-style-body);
}
h1 {
    font-size: var(--font-size-h1);
    font-weight: var(--latin-font-weight-h1);
}


h1.cjk {
    font-size: var(--cjk-font-size-h1);
    font-variation-settings: var(--cjk-font-weight-h1);
    font-family: var(--cjk-font-family);
    line-height: var(--cjk-line-hight-h1);
    font-style: var(--cjk-font-style-h1);
}

h1.arabic {
    font-size: var(--arabic-font-size-h1);
    font-weight: var(--arabic-font-weight-h1);
    font-family: var(--arabic-font-family);
    line-height: var(--arabic-line-hight-h1);
    font-style: var(--arabic-line-hight-h1);
}

h2 {
    font-weight: var(--latin-font-weight-h1);
    font-size: var(--latin-font-size-h2);

}

h2.cjk {
    font-size: var(--cjk-font-size-h2);
    font-variation-settings: var(--cjk-font-weight-h2);
    font-family: var(--cjk-font-family);
    line-height: var(--cjk-line-hight-h2);
    font-style: var(--cjk-font-style-h2);
}

h2.arabic {
    font-family: var(--arabic-font-family);
    font-size: var(--arabic-font-size-h2);
    font-weight: var(--arabic-font-weight-h2);
    line-height: var(--arabic-line-hight-h2);
    font-style: var(--arabic-font-style-h2);
}
a {
    color: var(--main-white-color);
}

.button{
    display: inline-block;
    padding: var(--space-100) var(--space-200);
    background-color: rgb(var(--dark-color));
    color: rgb(var(--white-color));
    text-decoration: none;
    border-radius: 20px;
    transform: translateY(-0.4rem);
   
}

.button:hover {
    background-color: rgb(var(--white-color));
    color: rgb(var(--dark-color));
}



.cjk {
    font-family: var(--cjk-font-family);
    font-size: var(--cjk-font-size-body);
}

header {
    display: flex;
    padding-inline: var(--space-600);
    padding-block: var(--space-300);
    justify-content: space-between;
}

.logo{
    font-weight: 600;
    font-size: 4.5rem;
    line-height: 1;
}

header li {
    margin-block: var(--space-050);
}

main {
    padding-inline: var(--space-600);
}

#foundry-link {
    transform: translateX(-0.3125rem);
}

.cover{
    padding-top: var(--space-500);
    padding-bottom: var(--space-2000);
}

.cover-text {
    max-width: 20rem;
}

.title-container {
    display: flex;
    gap: var(--space-400);
}

.spacer-image {
 width: 40vw;
 max-width: 480px;
}

.title-text-container {
    display: flex;
    gap: var(--space-100);
}

.title-space {
    min-width: 80px;
}

.project-card-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-1000);
    padding-block: var(--space-800);
}

.project-card {
    display: flex;
    gap: var(--space-400);
   
}

.project-image {
   width: 40vw;
   max-width: 480px;
   overflow: hidden;
   aspect-ratio: 3/2;
}

.project-image img {
    display: block;
    min-width: 100px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-200);
    min-height: 200px;
}

.info-row {
    display: flex;
    gap: var(--space-100);
}

.info-category-title {
    min-width: 80px;
}

.info-category-data {
    min-width: 200px;
}


footer {
    display: flex;
    justify-content: space-between;
    padding-inline: var(--space-600);
    margin-block: var(--space-1000);
    font-size: var(--font-size-captions);
}

.footer-links ul{
    display: flex;
    gap: var(--space-200);
}

/* also in terms of languages and scripts*/









body.latin {
    font-family: neue-haas-grotesk-display, sans-serif;
    font-weight: 400;
    font-style: normal;;
    font-size: 14px;
    line-height: 20px;
}

h1.latin {
    font-family: neue-haas-grotesk-display, sans-serif;
    font-weight: 600;
    font-style: medium;
    font-size: 24px;
    line-height: 24px;
}

h2.latin{
    font-family: neue-haas-grotesk-display, sans-serif;
    font-weight: 600;
    font-style: medium;
    font-size: 18px;
    line-height: 24px;
}

h3.latin {
    font-family: neue-haas-grotesk-display, sans-serif;
    font-weight: 600;
    font-style: medium;
    font-size: 14px;
    line-height: 20px;
}

/* body.cjk {
    font-family: source-han-sans-simplified-c, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 14px;
    line-height: 20px;
} */






a:link{
    color: #f7f7f7
}



@media screen and (max-width: 800px) {
    .project-card {
        flex-direction: column;
    }

    .project-image {
        width: 100%;
        aspect-ratio: auto;
        height: auto;
    }

    .spacer-image, .title-space {
        display: none;
    }
}