/* I wanted the way I wrote the code to reflect the way I work with design: as a set of layers with a relationship to each other within a set scene. In Figma, I can create a group and adjust the layers inside of it while also ordering groups in layers of their own. I tried to bring that same thinking into CSS. The main layered index-groups can be seen in _variables.scss.

I used functions such as clamp() where an element could grow or shrink smoothly with the browser window. This let me define its behaviour in one place, instead of adding several media queries to change its size in steps. When a smooth adjustment was not enough and the layout needed to change, I put the media query next to the styles it affected. Clear headings make it easier to find and understand each part of the code.

I also chose media query breakpoints by looking at where the design actually stopped working well. That meant the layout could respond to the space available, rather than changing only at conventional desktop, tablet, or mobile widths. */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  scrollbar-gutter: stable;
}

body {
  background-color: #02110B;
  color: #ffffff;
  font-family: "Inria Serif", serif;
  line-height: 1.5;
}

img {
  display: block;
  max-width: 100%;
}

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

button {
  font: inherit;
}

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: clamp(1rem, 8vw, 2rem);
  padding-right: clamp(1rem, 6vw, 3.5rem);
  padding-left: clamp(1rem, 8vw, 3.5rem);
  background: transparent;
}

.logo_link {
  display: flex;
  flex-direction: column;
}

.logo_title {
  font-family: "Inria Serif", serif;
  color: #F9A742;
  font-size: clamp(1rem, 2vw, 1.55rem);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.logo_philosophy {
  margin-top: 0.15rem;
  width: clamp(8rem, 24vw, 20rem);
  font-family: "Inter", sans-serif;
  font-size: clamp(0.4rem, 1.2vw, 0.7rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.menu_toggle {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 2rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.menu_toggle span {
  display: block;
  width: 100%;
  height: 1px;
  background-color: #F9A742;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.menu_toggle[aria-expanded=true] {
  position: fixed;
  top: clamp(1rem, 8vw, 2rem);
  right: clamp(1rem, 6vw, 3.5rem);
  width: 2.5rem;
  height: 2.5rem;
}

.menu_toggle[aria-expanded=true] span {
  position: absolute;
  top: 50%;
  left: 0;
}

.menu_toggle[aria-expanded=true] span:first-child {
  transform: rotate(45deg);
}

.menu_toggle[aria-expanded=true] span:nth-child(2) {
  opacity: 0;
}

.menu_toggle[aria-expanded=true] span:last-child {
  transform: rotate(-45deg);
}

.menu[hidden],
.project_links[hidden] {
  display: none;
}

.menu {
  position: absolute;
  top: 5.5rem;
  right: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  width: min(21rem, 100vw - 2rem);
  max-height: calc(100dvh - 6.5rem);
  padding: 2rem 2rem 3rem;
  overflow-y: auto;
  border-radius: 1.5rem;
  background-color: rgba(7, 23, 17, 0.94);
  animation: menu-slide-in 500ms ease-out both;
}

@keyframes menu-slide-in {
  from {
    opacity: 0;
    transform: translateY(-0.75rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .menu,
  .project_links {
    animation: none;
  }
}
.menu > a,
.projects-toggle {
  color: #F9A742;
  font-family: "Inter", sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
}

.projects-toggle {
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.menu a:hover,
.projects-toggle:hover {
  opacity: 0.6;
}

.projects-toggle::before,
.menu > a:not(:first-child)::before {
  content: "";
  display: block;
  width: 13rem;
  max-width: 100%;
  height: 1px;
  margin-bottom: clamp(1.5rem, 3vh, 2.5rem);
  background-color: #ffffff;
}

.project_links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.25rem, 3vh, 2.5rem);
  padding: 0 0 clamp(1rem, 3vh, 2rem) clamp(1.5rem, 8vw, 5rem);
  animation: menu-slide-in 500ms ease-out both;
}

.project_links a,
.project_links span {
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-size: 1.1rem;
  line-height: 1.2;
}

@media (max-width: 890px) {
  .menu {
    padding-top: 2rem;
    width: min(17rem, 100vw - 2rem);
  }
}
.scene {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.scene_circles {
  position: absolute;
  width: clamp(15rem, 58vw, 58rem);
  top: -5rem;
  right: -2rem;
  z-index: 1;
  pointer-events: none;
}

.scene_circles img {
  width: 100%;
  height: auto;
}

.hero {
  position: relative;
  height: auto;
  min-height: 42rem;
  padding-top: 10rem;
  padding-bottom: 4rem;
  padding-left: clamp(1rem, 8vw, 5rem);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

@media (min-width: 891px) and (max-height: 700px) {
  .hero {
    height: 48rem;
  }
}
.hero_content {
  width: min(90%, 42rem);
  text-align: left;
}

.hero h1 {
  font-family: "Inria Serif", serif;
  color: #F9A742;
  width: clamp(2rem, 26vw, 42rem);
  font-size: clamp(2rem, 5vw, 7rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0;
}

.hero_philosophy {
  margin: 0;
  width: clamp(13rem, 26vw, 17rem);
  font-family: "Inria Serif", serif;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 400;
  line-height: 1.3;
}

.hero_target {
  max-width: 17rem;
  margin: 0;
  font-family: "Inria Serif", serif;
  font-size: 1rem;
  line-height: 1.6;
}

.hero_rule {
  width: 7rem;
  height: 1px;
  margin: 2rem 0;
  background-color: #F9A742;
}

/* The initial design was sketched step by step in Figma. The first thought was to animate it in After Effects, export it as an svg file using Lottie, and then use JavaScript to trigger the animation. For the sake of curiosity, I sparred with the chatbot, and the answer was that with an effect this small, a light CSS animation would be easier. I uploaded my Figma sketch, index.html, and the _pages.scss to allow ChatGPT to show me what it would do. After a few adjustment prompts to change the center of the animated circle, timing, and smoothness of the animation, this is the result. */
.connect-link {
  --connect-duration: 1600ms;
  --connect-gap: 0.65em;
  --connect-icon-size: 1.25em;
  --connect-travel: calc(
      var(--connect-gap) + var(--connect-icon-size) / 2
      - 0.175em - 0.15em
  );
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--connect-gap);
  color: #F9A742;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}
.connect-link__text {
  position: relative;
}
.connect-link__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--connect-icon-size);
  height: var(--connect-icon-size);
  flex-shrink: 0;
  overflow: visible;
}
.connect-link__arrow {
  display: block;
  line-height: 1;
  transform-origin: center;
}
.connect-link__sphere {
  position: absolute;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  width: 0.35em;
  height: 0.35em;
  border: 1px solid currentColor;
  border-radius: 50%;
  background-color: currentColor;
  opacity: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.connect-link:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 0.4rem;
}

@media (hover: hover) and (pointer: fine) {
  .connect-link:hover .connect-link__arrow {
    animation: connect-arrow var(--connect-duration) ease-in-out both;
  }
  .connect-link:hover .connect-link__sphere {
    animation: connect-ring var(--connect-duration) linear both;
  }
}
.connect-link:focus-visible .connect-link__arrow {
  animation: connect-arrow var(--connect-duration) ease-in-out both;
}
.connect-link:focus-visible .connect-link__sphere {
  animation: connect-ring var(--connect-duration) linear both;
}

@keyframes connect-arrow {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  16% {
    opacity: 0;
    transform: scale(0.2);
  }
  84% {
    opacity: 0;
    transform: scale(0.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes connect-ring {
  0% {
    opacity: 0;
    width: 0.35em;
    height: 0.35em;
    background-color: currentColor;
    transform: translate(-50%, -50%);
  }
  16% {
    opacity: 1;
    width: 0.35em;
    height: 0.35em;
    background-color: currentColor;
    transform: translate(-50%, -50%);
    animation-timing-function: ease-in-out;
  }
  27% {
    opacity: 1;
    width: 0.35em;
    height: 0.35em;
    background-color: currentColor;
    transform: translate(calc(-50% - var(--connect-travel)), -50%);
  }
  32% {
    opacity: 1;
    width: 0.35em;
    height: 0.35em;
    background-color: transparent;
  }
  60% {
    opacity: 0.85;
  }
  88% {
    opacity: 0;
    width: 3.9em;
    height: 3.9em;
  }
  100% {
    opacity: 0;
    width: 3.9em;
    height: 3.9em;
    background-color: transparent;
    transform: translate(calc(-50% - var(--connect-travel)), -50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .connect-link__arrow,
  .connect-link__sphere {
    animation: none !important;
  }
}
.flower {
  position: absolute;
  width: clamp(10rem, 68vw, 58rem);
  top: clamp(-1rem, -6vw, -1rem);
  right: clamp(-2rem, -2.5vw, -0.5rem);
  z-index: 4;
}

.flower img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

.flower::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  backdrop-filter: blur(4px);
  -webkit-mask: url("../../img/Main/Flower-frost-mask.png") center/100% 100% no-repeat;
  mask: url("../../img/Main/Flower-frost-mask.png") center/100% 100% no-repeat;
}

.book {
  position: relative;
  width: min(62rem, 80vw);
  margin: 3rem auto 5rem;
  z-index: 3;
}

.book_image {
  width: 100%;
  height: auto;
}

.book_page {
  position: absolute;
  top: 22%;
  width: 35%;
  font-family: "Cormorant Garamond", serif;
  color: #ffffff;
  text-align: center;
}

.book_page-left {
  left: 9%;
}

.book_page-right {
  right: 9%;
  margin-top: clamp(1rem, 2vh, 3rem);
}

.book_page h2 {
  font-family: "Cormorant Garamond", serif;
  color: #02110B;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.18em;
}

.page_rule {
  width: clamp(2.5rem, 7vw, 5rem);
  height: 1px;
  margin: 1.75rem auto;
  background-color: #936227;
}

.project-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.5rem, 1.5vw, 1.25rem);
  margin-top: clamp(0.75rem, 1.5vw, 1.25rem);
  list-style: none;
}

.project-list__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}

.project-list__item a {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(0.25rem, 0.7vw, 0.5rem);
  font-family: "Cormorant Garamond", serif;
  color: #02110B;
  font-size: clamp(1.3rem, 1.8vw, 1.5rem);
  font-weight: 600;
  transition: opacity 0.3s ease, gap 0.3s ease;
}

.project-list__item a:hover {
  opacity: 0.6;
  gap: 0.8rem;
}

.project-list__item p {
  font-family: "Inria Serif", serif;
  color: #485F2F;
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  font-weight: 300;
  line-height: 1.3;
}

.upcoming-label {
  margin-top: 1rem;
  margin-bottom: 0.15rem;
  font-family: "Inter", sans-serif;
  color: #936227;
  font-size: 0.5rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

.project-list__item--upcoming .project-title {
  font-family: "Cormorant Garamond", serif;
  color: #02110B;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  font-weight: 600;
}

.my_traits {
  margin-top: 1.5rem;
  font-family: "Cormorant Garamond", serif;
  color: #485F2F;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.4;
}

.about_link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-top: 1.5rem;
  font-family: "Cormorant Garamond", serif;
  color: #02110B;
  font-size: clamp(1.2rem, 4vw, 1.3rem);
  font-weight: 600;
  transition: opacity 0.3s ease, gap 0.3s ease;
}

.about_link:hover {
  opacity: 0.6;
  gap: 0.7rem;
}

.water-drop {
  position: absolute;
  z-index: 4;
}

.water-drop--one {
  width: clamp(1rem, 2.5vw, 2rem);
  left: clamp(5%, 12vw, 8%);
  top: 88%;
}

.water-drop--two {
  width: clamp(1.75rem, 4vw, 2.5rem);
  right: clamp(15%, 52vw, 2%);
  top: 18%;
}

@media (max-width: 890px) {
  .hero {
    padding-bottom: 2rem;
  }
  .book {
    width: min(100% - 2rem, 36rem);
    margin: 3rem auto 4rem;
    padding-block: 5rem;
    background-image: url("../../img/Projects/paper.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .book_image {
    display: none;
  }
  .book_page {
    position: static;
    width: 100%;
  }
  .book_page-left {
    padding-inline: clamp(1.5rem, 6vw, 3rem);
  }
  .book_page-right {
    width: calc(100% - 4rem);
    margin: 5rem auto 0;
    padding-top: 3rem;
    border-top: 1px solid #936227;
  }
}
.scene_bottom_circles {
  position: absolute;
  width: clamp(18rem, 38vw, 38rem);
  left: -3rem;
  top: 75rem;
  z-index: 1;
  pointer-events: none;
}

.scene_bottom_circles img {
  width: 100%;
  height: auto;
}

.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 6rem;
  font-family: "Inter", sans-serif;
  font-size: 0.65rem;
  line-height: 1.4;
}

.site-footer nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.site-footer a {
  transition: opacity 0.3s ease;
  color: #F9A742;
  font-size: 0.8rem;
}

.site-footer a:hover {
  opacity: 0.6;
}

@media (max-width: 890px) {
  .site-footer {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  .site-footer nav {
    order: -1;
  }
}
.magnifier {
  position: absolute;
  width: clamp(5.5rem, 24vw, 18rem);
  aspect-ratio: 1;
  max-width: calc(100% - 2rem);
  left: 48%;
  top: 24rem;
  bottom: auto;
  transform: translate(-50%, -50%);
  z-index: 200;
  cursor: grab;
  -moz-user-select: none;
       user-select: none;
  touch-action: none;
  -webkit-user-select: none;
  --glass-shine: 0.65;
  border-radius: 50%;
  isolation: isolate;
  box-shadow: 0 0.8rem 1.8rem rgba(0, 0, 0, 0.24), 0 0.15rem 0.4rem rgba(0, 0, 0, 0.16);
}

@media (max-width: 750px) {
  .magnifier {
    width: clamp(5.5rem, 28vw, 9rem);
    left: 70%;
    top: 16rem;
  }
}
@media (max-width: 450px) {
  .magnifier {
    width: clamp(5.5rem, 28vw, 9rem);
    left: 70%;
    top: 17rem;
  }
}
@media (max-width: 298px) {
  .magnifier {
    left: 68%;
    top: 11rem;
  }
}
.magnifier_lens {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: #02110B;
  box-shadow: none;
  isolation: isolate;
  pointer-events: none;
}

.magnifier_optics {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}

.magnified-scene {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  margin: 0;
  padding: 0;
  overflow: visible !important;
  transform-origin: 0 0;
  pointer-events: none;
  background-color: #02110B;
  z-index: 0;
}

.magnifier_lens::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle closest-side at 50% 50%, transparent 62%, rgba(3, 17, 12, 0.025) 77%, rgba(3, 17, 12, 0.12) 93%, rgba(3, 17, 12, 0.22) 100%);
  box-shadow: inset 0.12rem 0.14rem 0.2rem rgba(255, 255, 255, 0.35), inset -0.15rem -0.2rem 0.35rem rgba(0, 0, 0, 0.28);
}

.magnifier_lens::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--glass-shine);
  background: radial-gradient(ellipse 60% 42% at 28% 16%, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.12) 32%, transparent 68%), radial-gradient(ellipse 35% 18% at 76% 86%, rgba(221, 238, 228, 0.16), transparent 75%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24), inset 0 0 0.7rem rgba(237, 247, 240, 0.05);
}

.magnifier_visual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

body > .page-surface {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.hidden-discovery {
  position: absolute;
  z-index: 5;
  width: 7rem;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "Cormorant Garamond", serif;
  font-size: 0.7rem;
  font-style: italic;
  line-height: 1.4;
  color: #0AFDF2;
  opacity: 0;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background-color: #02110B;
  padding: 1rem;
  border-radius: 50rem;
  border: 0.3px solid #F9A742;
  white-space: normal;
  overflow-wrap: break-word;
}
.hidden-discovery--one {
  top: 47rem;
  left: 30%;
}
.hidden-discovery--two {
  top: 12rem;
  left: 50%;
}
.hidden-discovery--three {
  bottom: 1rem;
  left: 46%;
}

.magnified-scene .hidden-discovery {
  opacity: 1;
}

@media (max-width: 1240px) {
  .hidden-discovery--one {
    top: 41rem;
    left: 42%;
  }
  .hidden-discovery--two {
    top: 12rem;
    right: 8%;
  }
  .hidden-discovery--three {
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
  }
}
@media (max-width: 890px) {
  .hidden-discovery {
    width: 6rem;
    padding: 0.35rem 0.45rem;
  }
  .hidden-discovery--one {
    top: 40rem;
    left: 47%;
  }
  .hidden-discovery--two {
    top: 9rem;
    right: 6%;
  }
  .hidden-discovery--three {
    bottom: 1.5rem;
  }
}
@media (max-width: 630px) {
  .hidden-discovery {
    width: 5.5rem;
  }
  .hidden-discovery--one {
    top: 45rem;
    left: 50%;
  }
  .hidden-discovery--two {
    top: 8rem;
    right: 5%;
  }
  .hidden-discovery--three {
    bottom: 1rem;
  }
}
.magnifier::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: 6;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: conic-gradient(transparent 0deg 310deg, rgba(255, 255, 255, 0.1) 325deg, rgba(255, 255, 255, 0.9) 342deg, transparent 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 2px));
}

.magnifier::after {
  content: "Drag to explore and find 3 hidden messages";
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 50%;
  z-index: 6;
  width: -moz-max-content;
  width: max-content;
  max-width: 80vw;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
  color: #F9A742;
  font-family: "Inter", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: 2rem;
  background: rgba(2, 17, 11, 0.95);
}

.about-page .magnifier::after {
  content: "Drag to explore";
}

.magnifier--hint::before {
  animation: rim-glint 1.4s ease-in-out forwards;
}

.magnifier--hint::after {
  animation: drag-label 4.8s ease-in-out forwards;
}

@keyframes rim-glint {
  0%, 100% {
    opacity: 0;
    transform: rotate(-120deg);
  }
  20%, 75% {
    opacity: 1;
  }
  100% {
    transform: rotate(240deg);
  }
}
@keyframes drag-label {
  0%, 100% {
    opacity: 0;
  }
  18%, 72% {
    opacity: 0.8;
  }
}
.about-page .page-surface {
  min-height: 100vh;
}
.about-page .about-main {
  width: min(100%, 90rem);
  margin-inline: auto;
  padding: clamp(9rem, 14vw, 12rem) clamp(1.5rem, 8vw, 7rem) 4rem;
}
.about-page .about-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(2rem, 5vw, 6rem);
}
.about-page .about-pine {
  min-width: 0;
  margin-left: calc(-1 * clamp(1.5rem, 8vw, 7rem));
  padding-top: 1.5rem;
  width: min(clamp(20rem, 52vw, 40rem), 100% + clamp(1.5rem, 8vw, 7rem));
}
.about-page .about-pine img {
  width: 100%;
  max-width: none;
  height: auto;
}
.about-page .about-intro__text h1 {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin-bottom: clamp(3rem, 7vw, 5rem);
  padding-bottom: 0.65rem;
  border-bottom: 1px solid #ffffff;
  color: #F9A742;
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 400;
  line-height: 1.15;
}
.about-page .about-intro__text > p:not(.about-intro__thought) {
  max-width: 35rem;
  margin-bottom: 2.25rem;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.85;
  text-align: justify;
  hyphens: auto;
}
.about-page .about-intro__thought {
  margin: clamp(2rem, 5vw, 4rem) auto 0;
  font-size: clamp(1.4rem, 2.25vw, 2rem);
  line-height: 1.45;
  text-align: center;
}
.about-page .about-foundations {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 4rem);
  margin-top: clamp(4rem, 8vw, 7rem);
}
.about-page .about-foundation h2 {
  min-height: 2.6rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid #ffffff;
  color: #F9A742;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  font-weight: 400;
  line-height: 1.25;
}
.about-page .about-foundation p {
  padding-top: 0.8rem;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.85;
}
.about-page .about-approach {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.8fr);
  -moz-column-gap: clamp(2rem, 8vw, 9rem);
       column-gap: clamp(2rem, 8vw, 9rem);
  margin-top: clamp(2rem, 6vw, 4rem);
}
.about-page .about-approach__copy {
  min-width: 0;
}
.about-page .about-approach__lead,
.about-page .about-approach__closing {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.85;
}
.about-page .about-approach__lead {
  margin-bottom: clamp(4rem, 7vw, 6rem);
}
.about-page .about-approach h2 {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #ffffff;
  color: #F9A742;
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  font-weight: 400;
  line-height: 1.25;
}
.about-page .about-statue {
  position: relative;
  align-self: center;
  display: grid;
  place-items: center;
  width: min(clamp(18rem, 36vw, 29rem), 100%);
  justify-self: end;
}
.about-page .about-statue img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}
.about-page .about-approach__closing {
  margin-top: clamp(2rem, 4vw, 4rem);
}
.about-page .site-footer {
  position: relative;
}

@media (min-width: 1100px) {
  .about-page .about-pine {
    width: min(clamp(36rem, 57vw, 68rem), 100% + var(--about-edge) + 2rem);
    margin-left: calc(-1 * var(--about-edge) - 2rem);
  }
}
@media (min-width: 801px) and (max-width: 1099px) {
  .about-page .about-pine {
    position: relative;
    align-self: stretch;
    width: 100%;
    margin-left: 0;
    padding-top: 0;
  }
  .about-page .about-pine img {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    height: 100%;
    max-width: none;
  }
}
@media (max-width: 800px) {
  .about-page .about-main {
    padding-top: 9rem;
  }
  .about-page .about-intro {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .about-page .about-intro__text {
    grid-row: 1;
  }
  .about-page .about-intro__text h1 {
    margin-bottom: 2rem;
  }
  .about-page .about-pine {
    grid-row: 2;
    width: min(100%, 32rem);
    margin-inline: auto;
    padding-top: 0;
  }
  .about-page .about-foundations {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .about-page .about-foundation h2 {
    min-height: 0;
  }
  .about-page .about-approach {
    grid-template-columns: 1fr;
  }
  .about-page .about-statue {
    justify-self: center;
    margin-top: 3rem;
  }
  .about-page .about-approach__closing {
    margin-top: 2rem;
  }
}
@media (max-width: 480px) {
  .about-page .about-main {
    padding-top: 8rem;
    padding-bottom: 2rem;
  }
  .about-page .about-intro__text h1 {
    font-size: 1.9rem;
  }
  .about-page .about-intro__thought {
    font-size: 1.4rem;
  }
}
@media (min-width: 801px) {
  .about-page .about-main {
    --about-edge: calc(
        max(0px, (100vw - 90rem) / 2) +
        clamp(1.5rem, 8vw, 7rem)
    );
  }
  .about-page .about-statue {
    width: min(clamp(26rem, 44vw, 44rem), 100% + var(--about-edge) + 8vw);
    margin-right: calc(-1 * (var(--about-edge) + 8vw));
  }
}
@media (min-width: 801px) {
  .about-page .magnifier {
    left: 38.2%;
    top: 38.2vh;
    right: auto;
    bottom: auto;
    width: clamp(7rem, 18vw, 15rem);
    transform: translate(-50%, -50%);
  }
}
@media (max-width: 800px) {
  .about-page .magnifier {
    left: auto;
    right: 20%;
    top: 20px;
    bottom: auto;
    width: clamp(6rem, 24vw, 9rem);
    transform: none;
  }
}/*# sourceMappingURL=style.css.map */