@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:ital@0;1&display=swap');

* {
	font-family: 'Fira Sans Condensed', sans-serif;
}

/* BODY */

body {
	margin: 0;
	padding: 3rem 0 5rem 0;
	cursor:cell;
	overflow-x: hidden;
}

a {
	color: red;
	text-decoration: none;
	cursor:alias;
}

a:hover {
	color: red;
	text-decoration: none;
}

p {
	color: black;
}

h2 {
	color: red;
	text-align: center;
	font-size: normal;
  font-weight: lighter;
}

h3 {
	color: grey;
	text-align: right;
font-size: smaller;
}

h4 {
	color: black;
	text-align: left;
	font-size: 0.8rem;
	padding: 0.3rem 1rem;
}

hr {
	border-top: 1px solid red;
}

/* CORNERS */

.name {
    position: fixed;
    left: 0px;
    top: 0px;
    padding: 1rem;
    z-index: 10;
}

.name a {
	color: black;
	text-decoration: none;
}

.name a:hover {
	color: red;
	text-decoration: none;
	  cursor:pointer;
}
  
.info {
  position: fixed;
    right: 0px;
    top: 0px;
    padding: 1rem;
    z-index: 10;
  cursor:pointer;
  font-size: inherit;
}

.info:hover {
  color: red;
}

.year {
    position: fixed;
    left: 0px;
    bottom: 0px;
    padding: 1rem;
    color: black;
    z-index: 10;
    text-decoration: none;
}

/* MARQUEE */

.marquee {
	width: 100vw;
	line-height: 7rem;
	overflow: hidden;
	padding:0;
	z-index: 20;
}

.marquee:hover {
background-color: white;
z-index: 20;
}

.marquee a:hover {
	color: red;
	z-index: 2;
}

.marquee span {
	position:relative;
	padding: 0 14rem 0 0;
	line-height:10vh;
	font-size:5vh;
	white-space:nowrap;
	z-index: 2;
}

@media screen and (max-width: 991px) {
	.marquee span {
		font-size:4vh;
		line-height:8vh;
	}
	}


  /* COLUMNS */
  
  .column {
	float: left;
	width: 30%;
	margin: 0rem;
	padding: 1rem;
	overflow: scroll;
  }

  @media screen and (max-width: 800px) {
	.column {
	  width: auto;
	  margin: 0rem;
	  overflow: scroll;
	}
  }

  .row {
	margin: 0;
	padding: 0;
  }

  .row:after {
	content: "";
	display: table;
	clear: both;
  }

/* BACKGROUND PICTURES */

img {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	pointer-events: none;
	z-index: 1;
	height: 100vh;
	width: 100vw;
	object-fit: cover;
}

@media screen and (max-width: 991px) {
img {
	height: 100vh;
	width: auto;
}
}

.marquee:hover img, #intro * li:focus img, #intro * li:active img {
	opacity: 1;
	z-index: 1;
  }

/* INFO */

.open {
  cursor: pointer;
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 99;
}

.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  background-color: white;
  overflow-y: hidden;
  transition: 0.7s;
  border-bottom: 1px solid red;
}

.overlay-content {
  height: 100vh;
  width: 100%;
  position: absolute;
  padding: 0;
  margin: 0;
  text-align: left;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: auto;
}

.overlay-content::-webkit-scrollbar {
  display: none;
}

.overlay a {
  text-decoration: none;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: black;
}

.overlay .closebtn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 200;
  font-size: inherit;
}

/* FOTO */

.foto{
  width: 100%;
  height: 100%;
  background-image: url("./pics/black_on_black.jpg");
  background-size: cover;
  background-position: center;
}

/* LOADING */

body {
	-webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
	   -moz-animation: fadein 3s; /* Firefox < 16 */
		-ms-animation: fadein 3s; /* Internet Explorer */
		 -o-animation: fadein 3s; /* Opera < 12.1 */
			animation: fadein 3s;
  }
  
  @keyframes fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
  }
  
  /* Firefox < 16 */
  @-moz-keyframes fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
  }
  
  /* Safari, Chrome and Opera > 12.1 */
  @-webkit-keyframes fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
  }
  
  /* Internet Explorer */
  @-ms-keyframes fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
  }
  
  /* Opera < 12.1 */
  @-o-keyframes fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
  }

/* SCROLL BAR */

::-webkit-scrollbar {
	width: 1px;
}
  
  ::-webkit-scrollbar-track {
	background: white; 
  }
   
  ::-webkit-scrollbar-thumb {
	background: red; 
  }
  
  ::-webkit-scrollbar-thumb:hover {
	background: black; 
  }

  /* SELECTION */

  ::-moz-selection { 
	color: white;
	background: black;
  }
  
  ::selection {
	color: white;
	background: black;
  }

/* === 3 LANGUAGES + INFO (CLEAN) === */

.language-switcher {
  position: fixed;
  right: 0;
  bottom: 0;
  padding: 1rem;
  z-index: 10;
  white-space: nowrap;
}
.language-switcher a { color: red; }

body.info-open { overflow: hidden; }

.overlay .closebtn {
  color: black;
  cursor: pointer;
}
.overlay .closebtn:hover,
.overlay .closebtn:focus { color: red; }

.foto { height: 100vh; }

:root { --info-bar-height: 3.25rem; }

.info-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: white;
}

.info-header {
  position: sticky;
  top: 0;
  z-index: 20;
  width: 100%;
  height: var(--info-bar-height);
  box-sizing: border-box;
  background: white;
  border-bottom: 1px solid red;
}

.info-header h2 {
  height: 100%;
  margin: 0;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  color: red;
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1;
}

.info-title-rule { display: none; }

.info-inner {
  flex: 1 0 auto;
  width: calc(100% - 3rem);
  margin: 0 auto;
  padding: 3rem 0;
  box-sizing: border-box;
}

.info-columns-three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.info-columns-three .info-column { min-width: 0; }
.info-columns-three .info-summary { padding-right: 2rem; }

.info-columns-three .info-biography {
  padding: 0 2rem;
  border-left: 1px solid red;
}

.info-columns-three .selected-works {
  padding-left: 2rem;
  border-left: 1px solid red;
}

.info-section { margin: 0; }

.info-inner p {
  max-width: none;
  margin: 0 0 1.15rem;
  font-size: 0.95rem;
  line-height: 1.3;
}

.info-footer {
  flex: 0 0 var(--info-bar-height);
  width: 100%;
  height: var(--info-bar-height);
  margin: 0;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  border-top: 1px solid red;
  background: white;
}

.info-footer span {
  display: block;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1;
}

@media screen and (max-width: 700px) {
  .info-inner {
    width: calc(100% - 2rem);
    padding: 2rem 0;
  }

  .info-columns-three {
    grid-template-columns: 1fr;
  }

  .info-columns-three .info-summary {
    padding: 0 0 1.5rem;
  }

  .info-columns-three .info-biography,
  .info-columns-three .selected-works {
    padding: 1.5rem 0 0;
    border-left: 0;
    border-top: 1px solid red;
  }
}

/* CV download + copy email */
.cv-download-row {
  margin-top: 1.5rem !important;
}

.cv-download {
  white-space: nowrap;
}

.copy-email {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
  color: red;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
}

.copy-email:hover,
.copy-email:focus-visible {
  color: red;
  text-decoration: underline;
}

.copy-email:focus-visible {
  outline: 1px solid red;
  outline-offset: 2px;
}


/* Vimeo embed in second Info column */
.info-vimeo {
  position: relative;
  width: 100%;
  aspect-ratio: 8 / 3;
  margin-top: 1.5rem;
  overflow: hidden;
  background: #fff;
}

.info-vimeo iframe {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 150%;
  border: 0;
  transform: translateY(-50%);
  pointer-events: none;
}


/* V19 · mobile info header + inline email */
.email-copy-row {
  margin-top: -0.35rem !important;
}

@media screen and (max-width: 700px) {
  body.info-open .overlay {
    height: 100dvh !important;
  }

  .overlay-content {
    top: 0;
    left: 0;
    transform: none;
    height: 100dvh;
    min-height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .info-page {
    min-height: 100dvh;
  }

  .info-header {
    position: sticky;
    top: 0;
    z-index: 150;
  }

  .info-header h2 {
    justify-content: flex-start;
    text-align: left;
    padding-left: 1rem;
    padding-right: 4rem;
    color: black;
    font-size: inherit;
  }
}

/* V20 · precise mobile header alignment + no underlines */
a,
a:hover,
a:focus,
a:active,
.overlay a,
.overlay a:hover,
.overlay a:focus,
.copy-email,
.copy-email:hover,
.copy-email:focus,
.copy-email:focus-visible,
.copy-email:active {
  text-decoration: none !important;
}

@media screen and (max-width: 700px) {
  /* Keep the same black home name visible above the Info overlay. */
  body.info-open .name {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 250;
    padding: 1rem;
  }

  body.info-open .name a {
    color: black;
  }

  /* Preserve the sticky header bar, but remove its duplicate centered title. */
  .info-header {
    position: sticky;
    top: 0;
    z-index: 150;
  }

  .info-header h2 {
    visibility: hidden;
  }

  /* X and home name share exactly the same top padding. */
  .overlay .closebtn {
    top: 0;
    right: 0;
    padding: 1rem;
    line-height: normal;
  }
}


/* V22 · desktop/mobile Info header: use only the black home name + email spacing */
.email-copy-row {
  margin-top: 0.65rem !important;
}

/* The overlay keeps its white sticky bar and red rule, but never duplicates the name. */
.info-header h2 {
  visibility: hidden !important;
}

/* Keep the original home name visible above the Info overlay on every viewport. */
body.info-open .name {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 250;
  padding: 1rem;
}

body.info-open .name a,
body.info-open .name a:hover,
body.info-open .name a:focus,
body.info-open .name a:active {
  color: black !important;
  text-decoration: none !important;
}