@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');


:root {

  --black: #171717;
  --dark: #242323;
  --grey: #77726e;
  --light-grey: #e8e5e1;
  --cream: #f5f2ed;
  --white: #fbfaf8;
  --accent: #b79b7c;
  --line: rgba(23, 23, 23, .14);

}


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


html {
  scroll-behavior: smooth;
}


body {

  background: var(--white);

  color: var(--black);

  font-family:
    "DM Sans",
    sans-serif;

  line-height: 1.7;

  overflow-x: hidden;

}


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


button {
  font-family: inherit;
}


.container {

  width:
    min(1120px, calc(100% - 48px));

  margin: auto;

}


h1,
h2,
h3 {

  font-family:
    "Playfair Display",
    serif;

  font-weight: 500;

  line-height: 1.08;

}


h1 {

  font-size:
    clamp(4rem, 8vw, 7.5rem);

  letter-spacing: -.065em;

}


h2 {

  font-size:
    clamp(3rem, 5vw, 5.2rem);

  letter-spacing: -.055em;

}


h1 em,
h2 em {

  font-style: italic;

  font-weight: 500;

}


p {
  color: var(--grey);
}


.eyebrow {

  font-size: .65rem;

  font-weight: 600;

  letter-spacing: .19em;

  text-transform: uppercase;

  color: var(--accent);

  margin-bottom: 18px;

}


/* =========================
   FICTIONAL BAR
========================= */


.fictional-bar {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  z-index: 200;

  height: 30px;

  background: var(--black);

  color: rgba(255,255,255,.65);

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 15px;

  font-size: .6rem;

  letter-spacing: .08em;

  text-transform: uppercase;

}


.fictional-bar a {

  color: #fff;

}


.fictional-bar a:hover {
  text-decoration: underline;
}


/* =========================
   NAV
========================= */


.site-header {

  position: fixed;

  top: 30px;

  left: 0;

  right: 0;

  z-index: 100;

  padding: 22px 0;

  color: #fff;

  transition: .3s;

}


.site-header.scrolled {

  background:
    rgba(251,250,248,.94);

  color: var(--black);

  backdrop-filter:
    blur(15px);

  box-shadow:
    0 5px 25px
    rgba(0,0,0,.06);

}


.navbar {

  width:
    min(1120px, calc(100% - 48px));

  margin: auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

}


.logo {

  font:
    italic 1.6rem
    "Playfair Display",
    serif;

}


.logo span {
  color: var(--accent);
}


.nav-links {

  display: flex;

  align-items: center;

  gap: 28px;

  font-size: .75rem;

  font-weight: 600;

}


.nav-links a {
  transition: .2s;
}


.nav-links a:hover {
  opacity: .6;
}


.nav-nizzy {

  border:
    1px solid
    rgba(255,255,255,.45);

  border-radius: 999px;

  padding: 8px 15px;

}


.site-header.scrolled .nav-nizzy {

  border-color:
    var(--line);

}


.menu-toggle {

  display: none;

  border: 0;

  background: transparent;

  cursor: pointer;

}


.menu-toggle span {

  display: block;

  width: 22px;

  height: 2px;

  background: currentColor;

  margin: 5px;

}


/* =========================
   HERO
========================= */


.hero {

  height: 100vh;

  min-height: 700px;

  position: relative;

  overflow: hidden;

  display: flex;

  align-items: center;

  color: #fff;

}


.hero-image {

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      #667078 0%,
      #b7a796 55%,
      #544b47 100%
    );

}


.hero-sun {

  position: absolute;

  width: 180px;

  height: 180px;

  border-radius: 50%;

  background: #e8cba4;

  top: 18%;

  right: 19%;

  box-shadow:
    0 0 100px
    rgba(232,203,164,.45);

}


.hero-hill {

  position: absolute;

  bottom: -5%;

  border-radius:
    50% 50% 0 0;

}


.hill-one {

  width: 80%;

  height: 48%;

  left: -10%;

  background: #56524d;

  transform:
    rotate(3deg);

}


.hill-two {

  width: 80%;

  height: 42%;

  right: -15%;

  background: #3d3b38;

  transform:
    rotate(-3deg);

}


.hero-person {

  position: absolute;

  bottom: 17%;

  left: 50%;

  transform:
    translateX(-50%);

  width: 65px;

  height: 160px;

  background: #202020;

  border-radius:
    35px 35px 8px 8px;

}


.hero-person:before {

  content: "";

  position: absolute;

  width: 55px;

  height: 55px;

  border-radius: 50%;

  background: #252525;

  top: -45px;

  left: 5px;

}


.hero-grain {

  position: absolute;

  inset: 0;

  opacity: .13;

  background-image:
    radial-gradient(
      rgba(255,255,255,.7) .5px,
      transparent .5px
    );

  background-size: 5px 5px;

}


.hero:after {

  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.48),
      transparent 65%
    );

}


.hero-content {

  width:
    min(1120px, calc(100% - 48px));

  margin: auto;

  position: relative;

  z-index: 2;

  padding-top: 70px;

}


.hero-content h1 {

  max-width: 850px;

}


.hero-intro {

  max-width: 440px;

  color:
    rgba(255,255,255,.72);

  margin:
    28px 0 32px;

}


.hero-button {

  display: inline-flex;

  align-items: center;

  gap: 15px;

  border:
    1px solid
    rgba(255,255,255,.55);

  padding:
    13px 21px;

  border-radius: 999px;

  font-size: .75rem;

  transition: .25s;

}


.hero-button:hover {

  background: #fff;

  color: var(--black);

}


.hero-caption {

  position: absolute;

  z-index: 3;

  left: 24px;

  right: 24px;

  bottom: 25px;

  display: flex;

  justify-content: space-between;

  font-size: .62rem;

  letter-spacing: .13em;

  text-transform: uppercase;

  color:
    rgba(255,255,255,.6);

}


/* =========================
   SECTIONS
========================= */


.section {
  padding: 125px 0;
}


.intro {

  background: var(--white);

}


.intro-grid {

  display: grid;

  grid-template-columns:
    .35fr 1.65fr;

  gap: 70px;

}


.intro-number {

  font:
    italic 5rem
    "Playfair Display";

  color: var(--light-grey);

}


.intro-copy {

  max-width: 700px;

}


.intro-copy h2 {

  margin-bottom: 28px;

}


.intro-copy p:not(.eyebrow) {

  max-width: 650px;

  margin-bottom: 17px;

}


.text-link {

  display: inline-block;

  margin-top: 15px;

  font-size: .75rem;

  font-weight: 600;

  border-bottom:
    1px solid
    var(--black);

  padding-bottom: 3px;

}


/* =========================
   WORK
========================= */


.work {

  background: var(--cream);

}


.section-heading {

  display: flex;

  justify-content: space-between;

  align-items: end;

  gap: 50px;

  margin-bottom: 65px;

}


.section-heading h2 {

  max-width: 700px;

}


.heading-note {

  max-width: 270px;

  font-size: .75rem;

}


.gallery {

  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 55px 25px;

}


.gallery-item.large {

  grid-column:
    span 2;

}


.gallery-item.wide {

  grid-column:
    span 2;

}


.photo {

  height: 500px;

  position: relative;

  overflow: hidden;

}


.gallery-item.large .photo {

  height: 620px;

}


.gallery-item.wide .photo {

  height: 430px;

}


/* PHOTO ONE */


.photo-one {

  background:
    linear-gradient(
      180deg,
      #9da8ac,
      #d4c3aa 50%,
      #4c514b 51%,
      #282d2a
    );

}


.photo-sky {

  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      circle at 70% 25%,
      #f1d9ad 0 7%,
      transparent 7.5%
    );

}


.photo-mountain {

  position: absolute;

  bottom: 20%;

  left: 5%;

  width: 65%;

  height: 45%;

  background: #535852;

  clip-path:
    polygon(
      0 100%,
      35% 25%,
      50% 50%,
      68% 5%,
      100% 100%
    );

}


.photo-foreground {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  height: 28%;

  background: #292d29;

}


/* PHOTO TWO */


.photo-two {

  background:
    linear-gradient(
      135deg,
      #c8b7a5,
      #eee1d0
    );

}


.window {

  position: absolute;

  width: 55%;

  height: 70%;

  top: 10%;

  left: 15%;

  border:
    12px solid
    #eee8df;

  background:
    linear-gradient(
      150deg,
      #8e9b9d,
      #d2b89a
    );

  box-shadow:
    30px 30px 0
    rgba(70,60,50,.1);

}


.window-light {

  position: absolute;

  width: 30%;

  height: 65%;

  background:
    rgba(255,255,255,.22);

  transform:
    skewX(-18deg);

  top: 12%;

  left: 35%;

}


.chair {

  position: absolute;

  bottom: 0;

  right: 15%;

  width: 30%;

  height: 43%;

  background: #66584e;

  border-radius:
    50% 50% 4px 4px;

}


.plant {

  position: absolute;

  right: 8%;

  bottom: 5%;

  width: 60px;

  height: 160px;

  border-left:
    2px solid
    #53624d;

}


.plant:after {

  content: "✦";

  position: absolute;

  top: 0;

  left: -35px;

  color: #5f7259;

  font-size: 3rem;

}


/* PHOTO THREE */


.photo-three {

  background:
    linear-gradient(
      180deg,
      #9aa9af,
      #c2aaa0 45%,
      #585451 45%
    );

}


.city-sky {

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.15),
      transparent
    );

}


.building {

  position: absolute;

  bottom: 0;

  background: #393938;

}


.building-one {

  left: 5%;

  width: 25%;

  height: 60%;

}


.building-two {

  left: 32%;

  width: 29%;

  height: 82%;

  background: #474543;

}


.building-three {

  right: 5%;

  width: 35%;

  height: 68%;

  background: #30302f;

}


.city-person {

  position: absolute;

  bottom: 0;

  left: 52%;

  width: 22px;

  height: 120px;

  background: #202020;

}


/* PHOTO FOUR */


.photo-four {

  background:
    linear-gradient(
      180deg,
      #9fa7a5 0%,
      #d8c9b4 47%,
      #687b7c 48%,
      #405b5d 100%
    );

}


.sea-sun {

  position: absolute;

  width: 110px;

  height: 110px;

  border-radius: 50%;

  background: #ecd2a6;

  top: 18%;

  right: 25%;

}


.sea {

  position: absolute;

  inset: 48% 0 0;

  background:
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,.15) 0 2px,
      transparent 2px 20px
    );

}


.sea-person {

  position: absolute;

  bottom: 5%;

  left: 48%;

  width: 32px;

  height: 115px;

  background: #242625;

  border-radius:
    15px 15px 3px 3px;

}


.photo-info {

  display: flex;

  justify-content: space-between;

  align-items: start;

  padding-top: 17px;

}


.photo-info span {

  display: block;

  font-size: .6rem;

  color: var(--accent);

  letter-spacing: .1em;

}


.photo-info h3 {

  font-size: 1.5rem;

  margin-top: 3px;

}


.photo-info > p {

  font-size: .65rem;

  text-transform: uppercase;

  letter-spacing: .1em;

}


/* =========================
   ABOUT
========================= */


.about {

  background: var(--dark);

  color: #fff;

}


.about-grid {

  display: grid;

  grid-template-columns:
    .9fr 1.1fr;

  gap: 100px;

  align-items: center;

}


.about-visual {

  display: flex;

  justify-content: center;

}


.portrait-frame {

  width: 390px;

  height: 500px;

  position: relative;

  overflow: hidden;

  background:
    #b2a49a;

}


.portrait-background {

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      135deg,
      #c9b8a9,
      #7c756f
    );

}


.portrait-person {

  position: absolute;

  bottom: -5%;

  left: 28%;

  width: 45%;

  height: 72%;

  background: #292827;

  border-radius:
    48% 48% 5% 5%;

}


.portrait-person:before {

  content: "";

  position: absolute;

  width: 70%;

  aspect-ratio: 1;

  background: #353331;

  border-radius: 50%;

  left: 15%;

  top: -25%;

}


.portrait-label {

  position: absolute;

  bottom: 20px;

  right: 20px;

  width: 50px;

  height: 50px;

  border-radius: 50%;

  background: #fff;

  color: var(--black);

  display: grid;

  place-items: center;

  font:
    italic 1.5rem
    "Playfair Display";

}


.about-copy h2 {

  margin-bottom: 28px;

}


.about-copy p:not(.eyebrow) {

  max-width: 600px;

  color:
    rgba(255,255,255,.58);

  margin-bottom: 17px;

}


.facts {

  display: flex;

  gap: 50px;

  margin-top: 45px;

  padding-top: 30px;

  border-top:
    1px solid
    rgba(255,255,255,.14);

}


.facts div {

  display: flex;

  flex-direction: column;

}


.facts strong {

  font:
    2.2rem
    "Playfair Display";

}


.facts span {

  color:
    rgba(255,255,255,.4);

  font-size: .65rem;

  text-transform: uppercase;

  letter-spacing: .08em;

}


/* =========================
   JOURNAL
========================= */


.journal {

  background: var(--white);

}


.section-heading.centered {

  display: block;

  text-align: center;

  max-width: 700px;

  margin:
    0 auto 65px;

}


.section-heading.centered h2 {

  margin-bottom: 18px;

}


.journal-grid {

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 22px;

}


.journal-image {

  height: 280px;

  position: relative;

  overflow: hidden;

}


.journal-image span {

  position: absolute;

  top: 20px;

  left: 20px;

  color: #fff;

  font-size: .65rem;

  letter-spacing: .12em;

}


.journal-one {

  background:
    linear-gradient(
      145deg,
      #9eaaa7,
      #c5b29c
    );

}


.journal-one:after {

  content: "";

  position: absolute;

  width: 100px;

  height: 100px;

  border-radius: 50%;

  background: #e6cb9e;

  top: 25%;

  right: 20%;

}


.journal-two {

  background:
    linear-gradient(
      145deg,
      #d3b8a9,
      #8d8582
    );

}


.journal-two:after {

  content: "";

  position: absolute;

  width: 120px;

  height: 200px;

  background: #3d3a38;

  left: 42%;

  bottom: -20px;

  border-radius:
    60px 60px 0 0;

}


.journal-three {

  background:
    linear-gradient(
      145deg,
      #777d87,
      #d0baa6
    );

}


.journal-three:after {

  content: "";

  position: absolute;

  width: 70px;

  height: 70px;

  border-radius: 50%;

  background: #ead1a6;

  left: 25%;

  top: 25%;

}


.journal-content {

  padding:
    22px 3px;

}


.journal-content > p {

  font-size: .62rem;

  letter-spacing: .1em;

  color: var(--accent);

}


.journal-content h3 {

  font-size: 1.45rem;

  margin: 6px 0 15px;

}


.journal-content a {

  font-size: .7rem;

  font-weight: 600;

  border-bottom:
    1px solid
    var(--black);

}


/* =========================
   SOCIAL
========================= */


.social {

  background: var(--cream);

}


.social-inner {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 60px;

}


.social-inner h2 {

  max-width: 650px;

}


.social-inner p:not(.eyebrow) {

  max-width: 470px;

  margin-top: 20px;

}


.instagram-button {

  flex-shrink: 0;

  display: flex;

  flex-direction: column;

  gap: 3px;

  padding:
    20px 28px;

  border:
    1px solid
    var(--line);

  border-radius: 999px;

  font-size: .8rem;

  transition: .25s;

}


.instagram-button span {

  font-size: .65rem;

  color: var(--grey);

}


.instagram-button:hover {

  background: var(--black);

  color: #fff;

}


.instagram-button:hover span {

  color:
    rgba(255,255,255,.6);

}


/* =========================
   CONTACT
========================= */


.contact {

  background:
    var(--black);

  color: #fff;

  text-align: center;

}


.contact-content {

  max-width: 800px;

  margin: auto;

}


.contact-content h2 {

  margin-bottom: 25px;

}


.contact-content > p:not(.eyebrow) {

  max-width: 500px;

  margin:
    0 auto 32px;

  color:
    rgba(255,255,255,.55);

}


.contact-button {

  display: inline-flex;

  align-items: center;

  gap: 15px;

  padding:
    14px 25px;

  border-radius: 999px;

  background: #fff;

  color: var(--black);

  font-size: .75rem;

  font-weight: 600;

  transition: .25s;

}


.contact-button:hover {

  background: var(--accent);

  color: #fff;

}


/* =========================
   FOOTER
========================= */


.footer {

  background: var(--black);

  color: #fff;

  border-top:
    1px solid
    rgba(255,255,255,.1);

}


.footer-top {

  padding:
    55px 0;

  display: grid;

  grid-template-columns:
    1fr auto auto;

  gap: 70px;

  align-items: center;

}


.footer-logo {

  font:
    italic 1.5rem
    "Playfair Display";

}


.footer-logo span {
  color: var(--accent);
}


.footer-top p {

  font-size: .65rem;

  color:
    rgba(255,255,255,.35);

  margin-top: 5px;

}


.footer-links {

  display: flex;

  gap: 20px;

  font-size: .7rem;

}


.footer-links a:hover {

  color: var(--accent);

}


.footer-nizzy {

  font-size: .7rem;

  color:
    rgba(255,255,255,.6);

}


.footer-nizzy:hover {
  color: #fff;
}


.footer-bottom {

  padding:
    18px 0;

  border-top:
    1px solid
    rgba(255,255,255,.1);

  display: flex;

  justify-content: space-between;

  font-size: .6rem;

  color:
    rgba(255,255,255,.3);

}


/* =========================
   REVEAL
========================= */


.reveal {

  opacity: 0;

  transform:
    translateY(25px);

  transition:
    opacity .7s ease,
    transform .7s ease;

}


.reveal.visible {

  opacity: 1;

  transform:
    translateY(0);

}


.delay-1 {
  transition-delay: .1s;
}


.delay-2 {
  transition-delay: .2s;
}


/* =========================
   MOBILE
========================= */


@media (max-width: 800px) {

  .fictional-bar {

    gap: 8px;

    font-size: .52rem;

  }


  .menu-toggle {

    display: block;

  }


  .nav-links {

    position: absolute;

    top: 65px;

    left: 15px;

    right: 15px;

    background:
      rgba(251,250,248,.98);

    color: var(--black);

    padding: 15px;

    border-radius: 16px;

    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 3px;

    opacity: 0;

    visibility: hidden;

    transform:
      translateY(-8px);

    transition: .25s;

    box-shadow:
      0 20px 50px
      rgba(0,0,0,.12);

  }


  .nav-links.open {

    opacity: 1;

    visibility: visible;

    transform:
      translateY(0);

  }


  .nav-links a {

    padding: 10px 12px;

  }


  .nav-nizzy {

    border-color: var(--line);

  }


  .intro-grid {

    grid-template-columns: 1fr;

    gap: 30px;

  }


  .intro-number {

    font-size: 3rem;

  }


  .section-heading {

    display: block;

  }


  .heading-note {

    margin-top: 20px;

  }


  .gallery {

    grid-template-columns: 1fr;

  }


  .gallery-item.large,
  .gallery-item.wide {

    grid-column:
      span 1;

  }


  .gallery-item.large .photo {

    height: 500px;

  }


  .gallery-item.wide .photo {

    height: 400px;

  }


  .about-grid {

    grid-template-columns: 1fr;

    gap: 60px;

  }


  .portrait-frame {

    width: 330px;

    height: 430px;

  }


  .facts {

    gap: 25px;

  }


  .journal-grid {

    grid-template-columns: 1fr;

  }


  .social-inner {

    flex-direction: column;

    align-items: flex-start;

  }


  .footer-top {

    grid-template-columns: 1fr;

    gap: 30px;

  }


  .footer-links {

    flex-wrap: wrap;

  }

}


@media (max-width: 560px) {

  .container,
  .navbar,
  .hero-content {

    width:
      calc(100% - 30px);

  }


  .fictional-bar {

    justify-content: space-between;

    padding: 0 12px;

  }


  .fictional-bar span {

    display: none;

  }


  .site-header {

    top: 30px;

  }


  .hero {

    min-height: 650px;

  }


  .hero-content {

    padding-top: 50px;

  }


  h1 {

    font-size:
      clamp(3.3rem, 16vw, 5rem);

  }


  .section {

    padding: 85px 0;

  }


  .photo,
  .gallery-item.large .photo {

    height: 390px;

  }


  .photo-info {

    flex-direction: column;

    gap: 8px;

  }


  .portrait-frame {

    width: 100%;

    height: 430px;

  }


  .facts {

    flex-wrap: wrap;

  }


  .footer-bottom {

    flex-direction: column;

    gap: 7px;

  }


  .hero-caption {

    flex-direction: column;

    gap: 5px;

  }

}


@media (prefers-reduced-motion: reduce) {

  * {

    scroll-behavior: auto !important;

    animation: none !important;

    transition: none !important;

  }

}