/* klasseklima.css */

@import url("/assets/css/normalize.css");
@import url("/assets/css/fonts.css");
/*
@import url("//use.typekit.net/wuh6szm.css");
*/

:root {
  --color-fg:rgb(255,255,239);
  --color-bg:rgb(0,0,0);
  --color-hi:rgb(70,180,90);
  --color-lo:rgb(24,24,20);
  --margin:1rem;
}

*, *::before, *::after {
  box-sizing:border-box;
  margin:0;
  padding:0;
}

*::selection {
  background-color:var(--color-lo);
}

html {
  font-family:"Cosmos",-apple-system,system-ui,sans-serif;
  font-size:0.9em;
  font-style:normal;
  font-weight:500;
  height:100%;
  letter-spacing:normal;
  line-height:1.2;
  margin:0 auto;
  overflow-y:scroll;
  -webkit-overflow-scrolling:touch;
  -webkit-tap-highlight-color:transparent;
  cursor:crosshair;
}

body {
  background:var(--color-bg);
  color:var(--color-fg);
  height:100vh;
  display:flex;
  flex-direction:column;
  opacity:0;
  animation:init 0.03s ease-in 0.5s 1 forwards;
  overflow:hidden;
}

body:not(.home) {
  margin-right:0;
  padding-right:calc(4rem + calc(var(--margin) * 1.4) + calc(var(--margin) * 1.4));
}

body.home {
  overflow:auto;
  height:auto;
  min-height:100vh;
}

a, button {
  cursor:pointer;
}

main {
  flex:1 0 auto;
  display:flex;
  flex-direction:column;
}

body > *:not(nav):not(footer):not(#page-title) {
  margin:calc(var(--margin) * 0.6) calc(var(--margin) * 1.4) calc(var(--margin) * 0.6) var(--margin);
}

body > section,
body > aside {
  flex:1 1 auto;
  overflow-y:auto;
  overflow-x:hidden;
}

a {
  color:var(--color-fg);
  outline:none;
  text-decoration:none;
}

a:link {
  outline:none;
  text-decoration:none;
}

a:visited {
  outline:none;
  text-decoration:line-through;
}

a:hover {
  outline:none;
  text-decoration:underline;
  text-decoration-color:var(--color-fg);
}

a:focus {
  outline:none;
  text-decoration:underline;
  text-decoration-color:var(--color-fg);
}

a:active {
  outline:none;
  text-decoration:underline;
  text-decoration-color:var(--color-fg);
}

a.active {
  outline:none;
  text-decoration:underline;
  text-decoration-color:var(--color-fg);
}

em, i {
  font-style:italic;
}

figure,
figure > img {
  width:100%;
}

footer {
  background:var(--color-bg);
  /* border-top:2px solid var(--color-lo); */
  padding:5px var(--margin);
  padding-bottom: 14px;
  margin:0;
  flex-shrink:0;
}

footer > ul {
  display:flex;
  justify-content:space-between;
  align-items:center;
  list-style:none;
}

footer > ul > li {
  margin:auto 0;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, pre {
  font-size:inherit;
  font-weight:inherit;
  line-height:inherit;
  margin:0;
}

strong, b {
  font-weight:bold;
}

ul {
  list-style:none;
  margin:0;
  padding:0;
}

a[href*="//"]:not([href*="klasseklima.org"]):not([href*="localhost"]):not([href*="web.klasseklima.rfws.dev"]):not([class="noext"])::after,
a[href^="mailto:"]::after,
a[href^="tel:"]::after {
  content:"\2197";
  /* remove a:link text-decoration */
  display:inline-block;
  font-size:0.55rem;
  margin-left:0.05rem;
  margin-right:-0.05rem;
  /* align smaller text with cap-height */
  vertical-align:super;
}

img[alt=""],
img:not([alt]) {
  border:3px dashed rgb(255,0,0);
}

img[src*=".svg"] {
  min-width:var(--margin);
  vertical-align:bottom;
}

h1 {
  font-weight:bold;
}

nav {
  position:sticky;
  top:0;
  background:var(--color-bg);
  z-index:1000;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:calc(var(--margin) * 0.6) calc(var(--margin) * 1.4) calc(var(--margin) * 0.6) var(--margin);
  margin:0;
  flex-shrink:0;
  /* border-bottom:2px solid var(--color-lo); */
}

nav > ul {
  display:none;
  position:fixed;
  top:calc(var(--margin) * 0.6 + 3rem);
  right:calc(var(--margin) * 1.4);
  background:var(--color-bg);
  border:1px solid var(--color-fg);
  list-style:none;
  padding:1rem;
  text-align:right;
  z-index:999;
  margin:0;
}

nav > ul.show {
  display:block;
}

nav > ul > li {
  margin:0.5rem 0;
}

.lang-switcher {
  border-bottom:1px solid var(--color-lo);
  padding-bottom:0.5rem;
  margin-bottom:0.5rem;
  display:flex;
  gap:0.5rem;
  justify-content:flex-end;
}

.lang-switcher a {
  opacity:0.5;
}

.lang-switcher a.active {
  opacity:1;
  font-weight:bold;
}

.burger {
  width:2rem;
  height:2rem;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:0.3rem;
  align-items:center;
  justify-content:center;
}

.burger span {
  width:1.5rem;
  height:2px;
  background:var(--color-fg);
  display:block;
  transition:all 0.3s ease;
}

@media (max-width:900px) {
  .filter-controls {
    flex-direction:column;
    align-items:stretch;
  }
  
  #search-input {
    width:100%;
  }
  
  body:not(.home) {
    padding-right:0;
    padding-top:0;
  }
  
  #page-title {
    position:fixed !important;
    top:calc(var(--margin) * 0.6) !important;
    right:calc(var(--margin) * 1.4) !important;
    left:auto !important;
    bottom:auto !important;
    width:auto !important;
    height:auto !important;
    border:none !important;
    flex-direction:row !important;
    padding:0 !important;
    justify-content:flex-end !important;
    align-items:center !important;
    gap:0 !important;
    z-index:1000 !important;
    background:transparent !important;
  }
  
  #page-title .burger {
    order:1;
  }
  
  #page-title h2 {
    display:none !important;
  }
}

#page-title {
  position:fixed;
  top:calc(var(--margin) * 0.6);
  right:calc(var(--margin) * 1.4);
  bottom:calc(var(--margin) * 0.6);
  width:4rem;
  border:1px solid var(--color-fg);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  z-index:900;
  background:var(--color-bg);
  padding:1rem 0;
  pointer-events:auto;
}

#page-title .burger {
  pointer-events:auto;
}

#page-title h2 {
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-size:1rem;
  font-weight:normal;
  white-space:nowrap;
  flex:1;
  display:flex;
  align-items:center;
}

section:not(#gallery):not(#project) > *:not(h2) + * {
  margin-top:var(--margin);
}

section > h2 {
  font-weight:bold;
}

#statement {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding:var(--margin);
}

#statement > h2 {
  font-size:3.2rem;
  text-align:center;
  max-width:80%;
}

#filter {
  padding-top:5px;
  margin-bottom:var(--margin);
}

.filter-controls {
  display:flex;
  gap:1rem;
  align-items:flex-start;
  flex-wrap:wrap;
}

#search-input {
  background:none;
  border:none;
  border-bottom:1px solid var(--color-fg);
  color:var(--color-fg);
  font-family:inherit;
  font-size:inherit;
  padding:0.25rem 0;
  width:12rem;
  max-width:100%;
}

#search-input::placeholder {
  color:var(--color-lo);
}

#search-input:focus {
  outline:none;
  border-bottom-color:var(--color-hi);
}

#tag-description {
  display:none;
  font-size:0.85rem;
  line-height:1.4;
  margin-top:0.5rem;
  max-width:60ch;
  opacity:0.8;
  width:100%;
}

.tag-buttons {
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
}

.tag-btn {
  background:none;
  border:1px solid var(--color-fg);
  color:var(--color-fg);
  cursor:pointer;
  font-family:inherit;
  font-size:inherit;
  padding:0.25rem 0.5rem;
}

.tag-btn:hover {
  background:var(--color-fg);
  color:var(--color-bg);
}

.tag-btn.active {
  background:var(--color-fg);
  color:var(--color-bg);
}

#gallery {
  display:block;
}

/* STICKER */

.sticker {

	text-align:center;
	min-height: 100vh;

}

.sticker p {

	text-align: center;

}


.sticker figure {
	width: 30vw;
	margin: auto;
}

.sticker div ul li {
	display: inline-block;
   	border: .1rem solid white;
    	padding: 15px;
    	border-radius: 2rem;
    	margin-left: .5rem;
   	margin-right: .5rem;
    	margin-top: 1rem;
    	margin-bottom: 1rem;
}

.sticker h2 {

	text-align: center;
	width: 50vw;
	display:inline-block;
	font-size: 2rem;

}

.sticker div ul li:nth-child(n+2) {
	margin-left: 2rem;
}

.sticker div {
	text-align: center;

	margin-top: 5rem;
	margin-bottom: 5rem;
}

.sticker a::after {

	content:"" !important;
}

.sticker figure a img {
	width:100%;
}

.sticker figure a {
	width: 100%;
}



/* STICKER END */

#projects {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-gap:var(--margin);
}

@media (max-width:1200px) {
  #projects {
    grid-template-columns:repeat(3, 1fr);
  }
}

@media (max-width:900px) {
  #projects {
    grid-template-columns:repeat(2, 1fr);
  }
}

@media (max-width:600px) {
  #projects {
    grid-template-columns:1fr;
  }
}

.project {
  border-bottom-color:var(--color-bg);
  border-bottom-style:solid;
  border-bottom-width:2px;
  padding-bottom:5px;
}

.project:hover {
  border-bottom-color:var(--color-fg);
  border-bottom-style:solid;
  border-bottom-width:2px;
}

.project a:hover,
.project a:focus,
.project a:active {
  text-decoration:none;
}

.project blockquote {
  /*
  font-family:"Cosmos",-apple-system,neue-haas-grotesk-text,system-ui,sans-serif;
  */
  font-size:1.2rem;
  font-weight:800;
  text-align:center;
  padding:var(--margin);
}

.project figcaption {
  display:flex;
  justify-content:space-between;
}

#project {
  display:flex;
  flex-direction:column;
  gap:calc(var(--margin) * 2);
}

#project-header {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  border-bottom:1px solid var(--color-fg);
  padding-bottom:calc(var(--margin) * 0.5);
}

#project-header h1 {
  font-size:2.5rem;
  font-weight:bold;
  margin:0;
}

#meta {
  display:flex;
  gap:0.5rem;
  flex-wrap:nowrap;
  white-space:nowrap;
  font-size:0.85rem;
}

#project > #text {
  font-size:0.95rem;
  line-height:1.6;
  max-width:50ch;
}

#intro-image {
  width:100%;
  max-width:900px;
  margin:0 auto;
}

#intro-image figure {
  margin:0;
  width:100%;
}

#intro-image img {
  width:100%;
  height:auto;
  display:block;
}

#slideshow {
  position:relative;
  width:100%;
  max-width:900px;
  margin:0 auto;
}

.slides {
  position:relative;
  width:100%;
  aspect-ratio:16/10;
  display:flex;
  align-items:center;
  justify-content:center;
}

.slide {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  opacity:0;
  transition:opacity 0.5s ease;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
}

.slide.active {
  opacity:1;
  pointer-events:auto;
  z-index:1;
}

.slide figure {
  width:100%;
  height:auto;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.slide img {
  width:100%;
  height:auto;
  max-height:70vh;
  object-fit:contain;
}

.slide-nav {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:none;
  border:none;
  color:var(--color-fg);
  font-size:3rem;
  cursor:pointer;
  z-index:10;
  padding:1rem;
  line-height:1;
}

.slide-nav.prev {
  left:0;
}

.slide-nav.next {
  right:0;
}

.slide-nav:hover {
  opacity:0.7;
}

#details {
  border-bottom:1px solid var(--color-fg);
  padding-bottom:calc(var(--margin) * 0.5);
  margin-bottom:calc(var(--margin) * 1.5);
  display:flex;
  gap:calc(var(--margin) * 2);
  align-items:baseline;
}

#project-title h1 {
  font-size:1.8rem;
  font-weight:bold;
  margin:0;
}

#subprojects {
  margin-top:calc(var(--margin) * 3);
  clear:both;
}

#subprojects h2 {
  font-weight:bold;
  margin-bottom:var(--margin);
}

.subproject-carousel {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
  grid-gap:var(--margin);
}

.subproject-item {
  border-bottom:2px solid var(--color-bg);
  padding-bottom:0.5rem;
}

.subproject-item:hover {
  border-bottom-color:var(--color-fg);
}

.subproject-item h3 {
  margin-top:0.5rem;
  font-size:0.9rem;
}

@media (max-width:900px) {
  #project-header {
    flex-direction:column;
    gap:0.5rem;
  }
  
  #meta {
    flex-wrap:wrap;
  }
  
  #project-header h1 {
    font-size:1.8rem;
  }
}

@keyframes init {
  from {
    opacity:0;
  }
  to {
    opacity:1;
  }
}

/* 319px */
@media (max-width:19.938em) {
  html {
    font-size:1em;
  }
}

/* 320px */
@media (min-width:20em) {
  html {
    font-size:1.15em;
  }
}

/* 479px */
@media (max-width:29.938em) {
  nav > ul {
    grid-auto-flow:row;
    justify-items:end;
  }

	.sticker div ul li {
		display: block;
	}


	.sticker figure {
       		width: 90vw;
       		margin-left: 0vw;
	}

	.sticker h2 {
		font-size: 1.8rem;
		width: 80vw;
	}


}

/* 480px */
@media (min-width:30em) {
  html {
    font-size:1.3em;
  }
  nav > ul {
    grid-gap:var(--margin);
  }
}

/* 640px */
@media (min-width:40em) {
  html {
    font-size:1.45em;
  }
}

/* 800px */
@media (min-width:50em) {
  html {
    font-size:1.6em;
  }
}

/* 960px */
@media (min-width:60em) {
  html {
    font-size:1.9em;
  }
}
/* Main Layout Styles */

.mainLayout {
  max-width:1400px;
  margin:0 auto;
}

.mainLayout .grid {
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:calc(var(--margin) * 2);
  margin-bottom:calc(var(--margin) * 3);
}

.mainLayout .column {
  grid-column:span var(--span);
  min-width:0;
}

.mainLayout .blocks {
  display:flex;
  flex-direction:column;
  gap:var(--margin);
}

.mainLayout h1,
.mainLayout h2,
.mainLayout h3 {
  font-weight:bold;
  margin-bottom:var(--margin);
}

.mainLayout h1 {
  font-size:2rem;
}

.mainLayout h2 {
  font-size:1.5rem;
}

.mainLayout h3 {
  font-size:1.2rem;
}

.mainLayout p {
  margin-bottom:var(--margin);
  line-height:1.6;
}

.mainLayout ul,
.mainLayout ol {
  margin-left:1.5rem;
  margin-bottom:var(--margin);
  line-height:1.6;
}

.mainLayout li {
  margin-bottom:0.5rem;
}

.mainLayout img {
  width:100%;
  height:auto;
  display:block;
}

.mainLayout figure {
  margin:0;
  margin-bottom:var(--margin);
}

.mainLayout a {
  text-decoration:underline;
}

.mainLayout a:hover {
  opacity:0.7;
}

@media (max-width:900px) {
  .mainLayout .grid {
    grid-template-columns:1fr;
    gap:var(--margin);
  }
  
  .mainLayout .column {
    grid-column:span 12;
  }
}