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

:root {
  --burgundy:#591C2B;
  --wine:#35131D;
  --rose:#C8A6A0;
  --white:#F7F3EE;
  --serif:"Playfair Display", Georgia, serif;
  --sans:"DM Sans", Arial, sans-serif;
}

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

html {
  scroll-behavior:smooth;
}

body {
  background:var(--white);
  color:var(--wine);
  font-family:var(--sans);
  overflow-x:hidden;
}

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

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

button {
  font:inherit;
}

::selection {
  background:var(--burgundy);
  color:var(--white);
}


/* NAVIGATION */

.nav {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 5vw;
  transition:.35s ease;
}

.nav.scrolled {
  background:rgba(247,243,238,.94);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(53,19,29,.08);
  padding-top:12px;
  padding-bottom:12px;
}

.brand-logo {
  display:block;
  width:165px;
}

.brand-logo img {
  width:100%;
  height:auto;
  object-fit:contain;
}

.nav-links {
  list-style:none;
  display:flex;
  gap:34px;
  align-items:center;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.15em;
}

.nav-links a {
  position:relative;
  padding-bottom:5px;
}

.nav-links a::after {
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:1px;
  background:var(--burgundy);
  transition:.25s ease;
}

.nav-links a:hover::after {
  width:100%;
}

.menu-button {
  display:none;
  border:0;
  background:transparent;
  color:var(--wine);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.15em;
  cursor:pointer;
}


/* HERO */

.hero {
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:150px 5vw 65px;
  position:relative;
  overflow:hidden;
}

.hero-orb {
  position:absolute;
  width:430px;
  height:430px;
  border-radius:50%;
  background:var(--rose);
  right:-90px;
  top:8%;
  opacity:.68;
  animation:float 9s ease-in-out infinite;
}

.hero-orb-small {
  position:absolute;
  width:150px;
  height:150px;
  border:1px solid var(--burgundy);
  border-radius:50%;
  right:24%;
  top:28%;
  opacity:.5;
  animation:floatTwo 12s ease-in-out infinite;
}

@keyframes float {
  0%,100% {
    transform:translateY(0) scale(1);
  }

  50% {
    transform:translateY(-30px) scale(1.04);
  }
}

@keyframes floatTwo {
  0%,100% {
    transform:translate(0,0);
  }

  50% {
    transform:translate(-25px,20px);
  }
}

.eyebrow {
  position:relative;
  z-index:2;
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  margin-bottom:28px;
}

.hero-title {
  position:relative;
  z-index:2;
  max-width:1250px;
  font-family:var(--serif);
  font-size:clamp(74px,11vw,175px);
  line-height:.82;
  letter-spacing:-.055em;
  font-weight:500;
}

.hero-title em {
  color:var(--burgundy);
  font-weight:500;
}

.hero-bottom {
  position:relative;
  z-index:2;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  margin-top:62px;
}

.hero-copy {
  max-width:455px;
  font-size:18px;
  line-height:1.65;
  font-weight:300;
}

.scroll-indicator {
  display:flex;
  gap:13px;
  align-items:center;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.18em;
}

.scroll-line {
  width:55px;
  height:1px;
  background:var(--wine);
}


/* MARQUEE */

.marquee {
  overflow:hidden;
  background:var(--wine);
  color:var(--white);
  padding:19px 0;
}

.marquee-track {
  display:flex;
  width:max-content;
  gap:46px;
  font-family:var(--serif);
  font-size:21px;
  font-style:italic;
  animation:marquee 25s linear infinite;
}

.marquee-dot {
  color:var(--rose);
}

@keyframes marquee {
  to {
    transform:translateX(-50%);
  }
}


/* INTRO */

.intro {
  min-height:72vh;
  display:grid;
  grid-template-columns:.8fr 2fr;
  gap:8vw;
  padding:130px 5vw;
  align-items:start;
}

.section-label {
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.19em;
  display:flex;
  align-items:center;
  gap:15px;
}

.section-label::before {
  content:"";
  width:27px;
  height:1px;
  background:currentColor;
}

.intro-text {
  max-width:900px;
  font-family:var(--serif);
  font-size:clamp(38px,5vw,72px);
  line-height:1.08;
  letter-spacing:-.035em;
}

.intro-text em {
  color:var(--burgundy);
}


/* PROJECTS */

.work {
  padding:60px 5vw 140px;
}

.work-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  margin-bottom:70px;
}

.work-title {
  margin-top:20px;
  font-family:var(--serif);
  font-size:clamp(48px,7vw,92px);
  font-weight:500;
  letter-spacing:-.04em;
}

.work-count {
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.65;
}

.projects-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:80px 24px;
}

.project-card:nth-child(even) {
  margin-top:110px;
}

.project-card {
  cursor:pointer;
}

.project-image {
  position:relative;
  overflow:hidden;
  background:var(--rose);
}

.project-image img {
  aspect-ratio:4/5;
  object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}

.project-card:hover .project-image img {
  transform:scale(1.035);
}

.project-count {
  position:absolute;
  right:16px;
  bottom:16px;
  background:rgba(247,243,238,.92);
  color:var(--wine);
  padding:8px 11px;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.award-badge {
  position:absolute;
  top:18px;
  left:18px;
  z-index:3;
  background:var(--burgundy);
  color:var(--white);
  padding:10px 14px;
  font-size:10px;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.project-info {
  padding-top:18px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
}

.project-number {
  font-size:10px;
  letter-spacing:.15em;
  text-transform:uppercase;
  opacity:.55;
  margin-bottom:9px;
}

.project-name {
  font-family:var(--serif);
  font-size:31px;
  font-weight:500;
}

.project-type {
  padding-top:5px;
  text-align:right;
  font-size:10px;
  letter-spacing:.13em;
  text-transform:uppercase;
  opacity:.6;
}


/* PHILOSOPHY */

.statement {
  background:var(--burgundy);
  color:var(--white);
  min-height:80vh;
  padding:120px 5vw;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.statement-top {
  display:flex;
  justify-content:space-between;
}

.statement-number {
  font-family:var(--serif);
  opacity:.7;
}

.statement-text {
  margin-top:80px;
  max-width:1050px;
  font-family:var(--serif);
  font-size:clamp(48px,7vw,102px);
  line-height:.98;
  letter-spacing:-.045em;
}

.statement-text em {
  color:var(--rose);
}


/* ABOUT */

.about {
  padding:140px 5vw;
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:10vw;
}

.about-title {
  margin-top:24px;
  font-family:var(--serif);
  font-size:clamp(54px,7vw,100px);
  line-height:.9;
  letter-spacing:-.045em;
  font-weight:500;
}

.about-title em {
  display:block;
  color:var(--burgundy);
}

.about-copy {
  max-width:650px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  font-size:18px;
  line-height:1.8;
  font-weight:300;
}

.about-copy p + p {
  margin-top:24px;
}

.about-signature {
  margin-top:45px;
  font-family:var(--serif);
  font-style:italic;
  font-size:28px;
  color:var(--burgundy);
}


/* CONTACT */

.contact {
  position:relative;
  background:var(--wine);
  color:var(--white);
  padding:130px 5vw 55px;
  overflow:hidden;
}

.contact-circle {
  position:absolute;
  width:450px;
  height:450px;
  border:1px solid rgba(200,166,160,.3);
  border-radius:50%;
  right:-100px;
  top:-140px;
}

.contact-eyebrow {
  color:var(--rose);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.18em;
}

.contact-title {
  margin-top:28px;
  max-width:1100px;
  font-family:var(--serif);
  font-size:clamp(58px,9vw,132px);
  line-height:.91;
  letter-spacing:-.055em;
  font-weight:500;
}

.contact-title em {
  color:var(--rose);
}

.email-link {
  display:inline-block;
  margin-top:65px;
  padding-bottom:8px;
  border-bottom:1px solid var(--rose);
  font-size:clamp(19px,2vw,30px);
}

.email-link:hover {
  color:var(--rose);
}

.footer {
  margin-top:130px;
  padding-top:30px;
  border-top:1px solid rgba(247,243,238,.16);
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.footer-logo {
  width:135px;
  filter:brightness(0) invert(1);
}


/* PROJECT VIEWER */

.project-modal {
  position:fixed;
  inset:0;
  z-index:5000;
  background:var(--wine);
  color:var(--white);
  opacity:0;
  visibility:hidden;
  transition:.35s ease;
  overflow:auto;
}

.project-modal.active {
  opacity:1;
  visibility:visible;
}

.modal-header {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 4vw;
  background:rgba(53,19,29,.88);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.modal-project-title {
  font-family:var(--serif);
  font-size:23px;
}

.modal-close {
  color:var(--white);
  background:none;
  border:0;
  cursor:pointer;
  text-transform:uppercase;
  letter-spacing:.15em;
  font-size:11px;
}

.modal-content {
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:100px 95px 70px;
}

.modal-image {
  max-width:1100px;
  max-height:78vh;
  width:auto;
  height:auto;
  object-fit:contain;
}

.modal-arrow {
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  width:55px;
  height:55px;
  border-radius:50%;
  border:1px solid rgba(247,243,238,.3);
  color:var(--white);
  background:rgba(53,19,29,.25);
  font-size:23px;
  cursor:pointer;
  z-index:15;
}

.modal-prev {
  left:22px;
}

.modal-next {
  right:22px;
}

.modal-footer {
  position:fixed;
  bottom:25px;
  left:50%;
  transform:translateX(-50%);
  font-size:10px;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--rose);
}


/* REVEAL */

.reveal {
  opacity:0;
  transform:translateY(30px);
  transition:
    opacity .8s ease,
    transform .8s ease;
}

.reveal.visible {
  opacity:1;
  transform:none;
}


/* TABLET */

@media(max-width:900px) {

  .nav {
    padding:14px 22px;
  }

  .brand-logo {
    width:135px;
  }

  .menu-button {
    display:block;
  }

  .nav-links {
    position:fixed;
    inset:0;
    background:var(--wine);
    color:var(--white);
    flex-direction:column;
    justify-content:center;
    gap:38px;
    font-family:var(--serif);
    font-size:34px;
    text-transform:none;
    letter-spacing:-.02em;
    transform:translateY(-100%);
    transition:.5s cubic-bezier(.7,0,.2,1);
    z-index:-1;
  }

  .nav-links.open {
    transform:translateY(0);
  }

  .hero {
    min-height:92svh;
    padding:130px 22px 45px;
  }

  .hero-orb {
    width:290px;
    height:290px;
    right:-90px;
  }

  .hero-orb-small {
    display:none;
  }

  .hero-title {
    font-size:clamp(65px,20vw,115px);
  }

  .hero-bottom {
    flex-direction:column;
    align-items:flex-start;
    margin-top:45px;
  }

  .scroll-indicator {
    display:none;
  }

  .intro {
    grid-template-columns:1fr;
    padding:90px 22px;
    gap:42px;
    min-height:auto;
  }

  .intro-text {
    font-size:43px;
  }

  .work {
    padding:55px 18px 100px;
  }

  .work-heading {
    padding:0 4px;
  }

  .projects-grid {
    gap:60px 12px;
  }

  .project-card:nth-child(even) {
    margin-top:70px;
  }

  .project-name {
    font-size:25px;
  }

  .statement {
    padding:90px 22px;
  }

  .statement-text {
    font-size:49px;
    margin-top:90px;
  }

  .about {
    grid-template-columns:1fr;
    padding:100px 22px;
    gap:65px;
  }

  .about-title {
    font-size:65px;
  }

  .contact {
    padding:100px 22px 40px;
  }

  .contact-title {
    font-size:62px;
  }

  .footer {
    flex-direction:column;
    align-items:flex-start;
  }

  .modal-content {
    padding:90px 15px 65px;
  }

  .modal-image {
    max-width:100%;
    max-height:75vh;
  }

  .modal-arrow {
    width:42px;
    height:42px;
    background:rgba(53,19,29,.75);
  }

  .modal-prev {
    left:8px;
  }

  .modal-next {
    right:8px;
  }
}


/* PHONE */

@media(max-width:600px) {

  .projects-grid {
    grid-template-columns:1fr;
  }

  .project-card:nth-child(even) {
    margin-top:0;
  }

  .project-image img {
    aspect-ratio:auto;
  }

  .hero-title {
    font-size:72px;
  }

  .work-title {
    font-size:55px;
  }

  .project-info {
    flex-direction:column;
  }

  .project-type {
    text-align:left;
  }
}