@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap");

:root {
  --ink: #280905;
  --bg: #f3e9d2;
  --blue: #1e6fa8;
  --yellow: #f4c42f;
  --side: clamp(16px, 6vw, 100px);
  --max: 1000px;
  --card-w: clamp(350px, 50vw, 450px);
  --card-h: clamp(250px, 40vw, 350px);
  --gap: clamp(90px, 10vh, 140px);
  --y1: clamp(140px, 18vh, 190px);
  --step: calc(var(--card-h) + var(--gap));
  --y2: calc(var(--y1) + var(--step));
  --y3: calc(var(--y1) + (var(--step) * 2));
  --y4: calc(var(--y1) + (var(--step) * 3));
  --y5: calc(var(--y1) + (var(--step) * 4));
  --xL: 30%;
  --xR: 70%;
}

html,
body {
  margin: 0;
  overflow-x: hidden;
}

body {
  font-family: "Dancing Script", Georgia, serif;
  color: var(--ink);
  background: var(--bg);
  position: relative;
}

h1 {
  margin: 0;
  font-size: 200px;
  line-height: 1.2;
}

h2 {
  margin: clamp(30px, 6vw, 60px) var(--side) clamp(12px, 3vw, 20px) var(--side);
  font-size: clamp(28px, 5vw, 60px);
  color: var(--blue);
}

p {
  margin: 10px var(--side) clamp(12px, 3vw, 18px) var(--side);
  max-width: 800px;
  font-size: clamp(16px, 2.2vw, 20px);
  line-height: 1.6;
  font-family: Georgia, serif;
}

.blue-circle,
.yellow-circle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}

.blue-circle {
  top: -50vh;
  right: -10vw;
  width: clamp(420px, 60vw, 800px);
  height: clamp(420px, 60vw, 800px);
  background: var(--blue);
  opacity: 0.2;
}

.yellow-circle {
  top: 10vh;
  right: -15vw;
  width: clamp(250px, 40vw, 450px);
  height: clamp(250px, 40vw, 450px);
  background: var(--yellow);
  opacity: 0.2;
}

.title {
  margin: 80px 10px 10px 80px;
  width: 1000px;
  display: flex;
  flex-direction: column;
}

.left {
  align-self: flex-start;
}

.right {
  align-self: flex-end;
}

.artist {
  display: grid;
  grid-template-columns: minmax(0, 1fr) fit-content(clamp(220px, 30vw, 320px));
  column-gap: clamp(16px, 4vw, 40px);
  align-items: start;
  margin-left: 100px;
}

.artist h2 {
  grid-column: 1 / -1;
}

.artist p {
  grid-column: 1 / 2;
}

.myimage {
  grid-column: 2 / 3;
  width: clamp(220px, 30vw, 320px);
  height: clamp(300px, 35vw, 450px);
  object-fit: cover;
  margin-right: var(--side);
  margin-top: clamp(24px, 3vw, 44px);
  margin-left: 0;
}

.myjourney-title {
  grid-column: 2 / 3;
  justify-self: end;
  align-self: start;
  margin: clamp(15px, 2vw, 20px) var(--side) 0 0;
  text-align: right;
  font-weight: 500;
  line-height: 1.05;
}

.journey {
  padding-bottom: clamp(10px, 2.5vw, 24px);
}

.projects {
  position: relative;
  width: min(calc(100% - (var(--side) * 2)), var(--max));
  margin: 0 auto;
  min-height: calc(var(--y5) + (var(--card-h) / 2) + 70px);
}

.project {
  position: absolute;
  transform: translate(-50%, -50%);
  text-decoration: none;
  color: inherit;
}

.project img {
  width: var(--card-w);
  height: var(--card-h);
  display: block;
  object-fit: cover;
  border-radius: 10px;
}

.project:hover img {
  opacity: 0.8;
}

.label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(20px, 2.5vw, 30px);
  color: #d47a2a;
  letter-spacing: 0.15em;
  writing-mode: vertical-rl;
  text-orientation: upright;
  line-height: 1.2;
  font-weight: 100;
  white-space: nowrap;
}

.project-paris {
  left: var(--xL);
  top: var(--y1);
}

.project-uva {
  left: var(--xR);
  top: var(--y2);
}

.project-sfrance {
  left: var(--xL);
  top: var(--y3);
}

.project-xjiang {
  left: var(--xR);
  top: var(--y4);
}

.project-rlake {
  left: var(--xL);
  top: var(--y5);
}

.project-paris .label,
.project-sfrance .label,
.project-rlake .label {
  right: calc(100% + 14px);
}

.project-uva .label,
.project-xjiang .label {
  left: calc(100% + 14px);
}

.site-footer {
  background: #1e6fa8;
  opacity: 0.5;
}

.footer-inner {
  width: 70%;
  margin: 0 auto;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-note,
.footer-contact {
  font-family: Georgia, serif;
  color: #fff;
  font-size: 16px;
  letter-spacing: 0.1em;
  font-weight: 200;
  line-height: 1.5;
  text-transform: uppercase;
}


.footer-contact {
  display: flex;
  flex-direction: column;
  line-height: 0.8;
}

.contact-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.contact-icon {
  display: inline-block;
  width: 20px;
  font-size: 30px;
  color: #fff;
}

.footer-contact a {
  color: #fff;
  text-decoration: none;
}

.footer-contact a:hover {
  text-decoration: underline;
}