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

:root {
  --paper: #eee9df;
  --paper2: #e1dbcf;
  --ink: #191918;
  --muted: #77736b;
  --dark: #1b1b19;
  --gold: #b29154;
  --wine: #6b3035;
  --line: rgba(25, 25, 24, .15);
}

html {
  scroll-behavior: smooth;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: Manrope, Arial, sans-serif;
  line-height: 1.5;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}


/* =========================================
   GRAIN
========================================= */

.grain {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  width: 100%;
  max-width: 100%;

  z-index: 30;
  pointer-events: none;
  opacity: .045;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* =========================================
   HEADER
========================================= */

.header {
  position: fixed;
  z-index: 50;

  top: 0;
  left: 0;
  right: 0;

  width: 100%;
  max-width: 100%;

  height: 76px;
  padding: 0 5vw;

  display: flex;
  align-items: center;
  justify-content: space-between;

  color: #fff;
  mix-blend-mode: difference;
}

.brand {
  display: flex;
  align-items: center;

  text-decoration: none;

  font: 500 25px/1 'Cormorant Garamond', serif;

  color: inherit;

  min-width: 0;
  max-width: 100%;
}

.brand img {
  width: 80px;
  height: 80px;

  object-fit: contain;
  display: block;

  max-width: 100%;
}

.header nav {
  display: flex;
  gap: 35px;

  min-width: 0;
}

.header nav a {
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;

  color: inherit;
  text-decoration: none;
}

.menu {
  display: none;

  background: none;
  border: 0;

  color: inherit;

  flex-shrink: 0;
}


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

.hero {
  min-height: 100vh;

  background: #20201e;
  color: #f4f0e8;

  display: grid;
  grid-template-columns: minmax(0, 1fr);

  align-content: center;

  padding: 120px 9vw 70px;

  position: relative;

  overflow: hidden;

  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.hero:before {
  content: "";

  position: absolute;

  width: 62vw;
  height: 62vw;

  border: 1px solid #b2915433;
  border-radius: 50%;

  right: -27vw;
  top: -18vw;
}

.hero:after {
  content: "";

  position: absolute;

  width: 34vw;
  height: 34vw;

  border: 1px solid #b291541b;
  border-radius: 50%;

  left: -23vw;
  bottom: -20vw;
}

.hero-copy {
  position: relative;
  z-index: 2;

  max-width: 850px;
  min-width: 0;
}

.eyebrow,
.label {
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;

  color: var(--gold);
}

.hero h1 {
  font: 500 clamp(90px, 12vw, 180px)/.69 'Cormorant Garamond', serif;

  letter-spacing: -.055em;

  margin: 30px 0 45px;

  max-width: 100%;
}

.hero h1 em {
  display: block;

  margin-left: 9vw;

  color: #d5c29a;
  font-style: italic;

  max-width: 100%;
}

.hero-sub {
  max-width: 400px;

  color: #aaa79f;

  font-size: 13px;
  line-height: 1.8;
}

.hero-link {
  display: inline-flex;

  gap: 25px;

  margin-top: 37px;

  padding-bottom: 8px;

  border-bottom: 1px solid #77736b;

  color: #eee9df;

  text-decoration: none;

  font-size: 9px;

  letter-spacing: .14em;

  text-transform: uppercase;

  max-width: 100%;
}

.hero-link span {
  color: var(--gold);
}


/* =========================================
   HERO — 3 ESER
========================================= */

.hero-gallery {
  width: 100%;
  max-width: 760px;

  height: 315px;

  margin: 55px auto 0;

  position: relative;
  z-index: 2;

  display: flex;

  align-items: flex-start;
  justify-content: center;

  gap: 24px;

  min-width: 0;
}

.hero-frame {
  width: 250px;
  max-width: 250px;

  padding: 8px;

  background: #151514;

  border: 1px solid #b2915499;

  box-shadow: 20px 25px 60px #0006;

  position: relative;

  flex: 0 1 250px;

  min-width: 0;

  transition:
    transform .7s cubic-bezier(.2,.7,.2,1),
    box-shadow .7s ease;
}

.hero-frame img,
.hero-frame video {
  width: 100%;
  max-width: 100%;

  aspect-ratio: 3 / 4;

  object-fit: cover;

  display: block;
}

.hero-frame video {
  background: #111;
}

.hero-frame-1 {
  margin-top: 28px;

  transform: rotate(-3deg);

  z-index: 3;
}

.hero-frame-2 {
  margin-top: 0;

  transform: rotate(1.5deg);

  z-index: 4;
}

.hero-frame-3 {
  margin-top: 35px;

  transform: rotate(-2deg);

  z-index: 2;
}

.hero-frame-1:hover {
  transform:
    translateY(-10px)
    rotate(-3deg)
    scale(1.025);

  box-shadow: 25px 35px 70px #0008;
}

.hero-frame-2:hover {
  transform:
    translateY(-10px)
    rotate(1.5deg)
    scale(1.025);

  box-shadow: 25px 35px 70px #0008;
}

.hero-frame-3:hover {
  transform:
    translateY(-10px)
    rotate(-2deg)
    scale(1.025);

  box-shadow: 25px 35px 70px #0008;
}

.vertical {
  position: absolute;

  right: 4vw;
  bottom: 50px;

  writing-mode: vertical-rl;

  color: #77736b;

  font-size: 8px;

  letter-spacing: .2em;
}


/* =========================================
   FELSEFE
========================================= */

.statement {
  padding: 170px 12vw;

  background: var(--paper2);

  display: grid;

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

  gap: 8vw;

  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.statement-copy {
  font: 500 clamp(50px, 6.4vw, 95px)/.9 'Cormorant Garamond', serif;

  letter-spacing: -.035em;

  min-width: 0;
  max-width: 100%;
}

.statement-copy em {
  color: var(--wine);
  font-style: italic;
}


/* =========================================
   GENEL SECTION
========================================= */

.section {
  padding: 135px 8vw;

  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.section-head {
  display: flex;

  justify-content: space-between;
  align-items: end;

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

  padding-bottom: 25px;
  margin-bottom: 40px;

  min-width: 0;
  max-width: 100%;
}

.section-head h2 {
  font: 500 clamp(60px, 8vw, 120px)/.76 'Cormorant Garamond', serif;

  letter-spacing: -.04em;

  margin-top: 18px;

  min-width: 0;
  max-width: 100%;
}

.section-head h2 em,
.about h2 em,
.group h2 em,
.contact-title em {
  font-style: italic;
  color: var(--wine);
}

.intro {
  max-width: 350px;
  min-width: 0;

  color: var(--muted);

  font-size: 12px;
  line-height: 1.9;
}


/* =========================================
   FİLTRELER
========================================= */

.filters {
  display: flex;

  gap: 25px;

  flex-wrap: wrap;

  margin-bottom: 50px;

  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.filters button {
  border: 0;

  background: none;

  border-bottom: 1px solid transparent;

  padding-bottom: 7px;

  color: #88847c;

  font-size: 9px;

  letter-spacing: .13em;

  text-transform: uppercase;

  cursor: pointer;
}

.filters button.active,
.filters button:hover {
  color: var(--ink);

  border-color: var(--gold);
}


/* =========================================
   PORTFOLYO
========================================= */

.portfolio {
  display: grid;

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

  gap: 60px 35px;

  justify-content: center;
  align-items: start;

  width: 100%;
  max-width: 100%;
  min-width: 0;
}


/* =========================================
   PROJE
========================================= */

.project {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.project-image {
  width: 100%;
  max-width: 100%;

  height: auto;

  aspect-ratio: 4 / 5;

  border: 0;
  padding: 0;
  margin: 0;

  background: none;

  display: block;

  position: relative;

  overflow: hidden;

  cursor: pointer;

  font: inherit;

  appearance: none;

  min-width: 0;
}

.project-image img,
.project-image video {
  width: 100%;
  max-width: 100%;

  height: 100%;

  aspect-ratio: auto;

  object-fit: cover;

  display: block;

  transition:
    transform 1s cubic-bezier(.2,.7,.2,1);
}

.project-image video {
  background: #181817;
}

.project-image span {
  position: absolute;

  inset: 0;

  background: #111c;

  color: #fff;

  display: grid;
  place-items: center;

  opacity: 0;

  transition: opacity .35s ease;

  font-size: 9px;

  letter-spacing: .15em;

  text-transform: uppercase;
}

.project-image span b {
  color: #d1b77e;

  margin-left: 12px;

  font-size: 18px;

  font-weight: 400;
}

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

.project:hover .project-image span {
  opacity: 1;
}


/* =========================================
   PROJEKT BİLGİSİ
========================================= */

.project-meta {
  display: flex;

  justify-content: space-between;

  padding: 16px 0;

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

  margin-top: 13px;

  gap: 20px;

  min-width: 0;
  max-width: 100%;
}

.project-meta h3 {
  font: 500 29px/1 'Cormorant Garamond', serif;

  min-width: 0;
  max-width: 100%;

  overflow-wrap: anywhere;
}

.project-meta p {
  margin-top: 7px;

  font-size: 9px;

  letter-spacing: .13em;

  text-transform: uppercase;

  color: var(--muted);

  overflow-wrap: anywhere;
  word-break: break-word;
}

.project-meta i {
  font: normal 9px Manrope;

  color: var(--gold);

  flex-shrink: 0;
}


/* =========================================
   DAHA FAZLASINI GÖR
========================================= */

.load-more-wrap {
  display: flex;

  justify-content: center;

  margin-top: 75px;

  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.load-more {
  appearance: none;

  border: 0;

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

  background: transparent;

  color: var(--ink);

  padding: 12px 2px 10px;

  display: inline-flex;

  align-items: center;

  gap: 18px;

  font-family: Manrope, Arial, sans-serif;

  font-size: 9px;

  letter-spacing: .18em;

  text-transform: uppercase;

  cursor: pointer;

  transition:
    opacity .3s ease,
    gap .3s ease;
}

.load-more b {
  color: var(--gold);

  font-size: 18px;

  font-weight: 400;

  line-height: 1;

  transition: transform .3s ease;
}

.load-more:hover {
  opacity: .65;

  gap: 25px;
}

.load-more:hover b {
  transform: translateY(4px);
}

.project.load-hidden {
  display: none !important;
}

.project.load-visible {
  display: block;

  animation: portfolioReveal .7s cubic-bezier(.2,.7,.2,1) both;
}

@keyframes portfolioReveal {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =========================================
   PLACEHOLDER
========================================= */

.placeholder-art {
  aspect-ratio: 4 / 5;

  background: var(--dark);

  color: #eee9df;

  display: grid;
  place-items: center;

  text-align: center;

  position: relative;

  font: italic 50px/.8 'Cormorant Garamond', serif;

  width: 100%;
  max-width: 100%;
}

.placeholder-art:before {
  content: "";

  position: absolute;

  width: 75%;
  height: 75%;

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

  border-radius: 50%;

  transform: rotate(18deg);
}

.placeholder-art small {
  position: absolute;

  right: 16px;
  top: 16px;

  font: 9px Manrope;

  color: var(--gold);
}

.placeholder-art.warm {
  background: #57423b;
}


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

.dark {
  background: var(--dark);

  color: #eee9df;

  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.about {
  padding: 150px 10vw;

  display: grid;

  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);

  gap: 10vw;

  align-items: start;

  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.portrait {
  position: relative;

  min-width: 0;
  max-width: 100%;
}

.portrait-placeholder {
  width: 400px;
  max-width: 100%;

  height: 450px;

  overflow: hidden;

  background: #d5d0c5;

  border: 1px solid var(--gold);
}

.portrait-placeholder img {
  width: 100%;
  max-width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;
}

.about h2 {
  font-family: 'Cormorant Garamond', serif;

  font-size: clamp(55px, 7vw, 110px);

  font-weight: 500;

  line-height: .8;

  letter-spacing: -.04em;

  margin: 27px 0 45px;

  min-width: 0;
  max-width: 100%;
}

.about h2 span,
.about h2 em {
  white-space: nowrap;
}

.about h2 em {
  display: inline-block;

  font-style: italic;

  color: #d1b983;
}

.bio {
  max-width: 730px;
  min-width: 0;

  color: #aaa79f;

  font: 17px/1.75 'Cormorant Garamond', serif;
}

.bio p {
  margin-bottom: 20px;
}


/* =========================================
   EĞİTİM & DENEYİM
========================================= */

.timeline {
  max-width: 1000px;
  min-width: 0;

  margin: 70px auto;
}

.time {
  display: grid;

  grid-template-columns: minmax(0, 180px) minmax(0, 1fr);

  gap: 40px;

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

  padding: 30px 0;

  min-width: 0;
  max-width: 100%;
}

.time > span {
  font-size: 9px;

  letter-spacing: .16em;

  text-transform: uppercase;

  color: var(--gold);

  padding-top: 5px;

  min-width: 0;
}

.time h3 {
  font: 500 34px/1.1 'Cormorant Garamond', serif;

  min-width: 0;
  max-width: 100%;

  overflow-wrap: anywhere;
}

.time p {
  margin-top: 9px;

  color: var(--muted);

  font-size: 11px;

  line-height: 1.7;

  overflow-wrap: anywhere;
}

.time small {
  display: block;

  margin-top: 12px;

  color: #99948b;

  font-size: 9px;

  line-height: 1.7;

  letter-spacing: .03em;

  overflow-wrap: anywhere;
}


/* =========================================
   GÜLCE SANAT GRUBU
========================================= */

.group {
  padding: 150px 8vw;

  display: grid;

  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

  gap: 10vw;

  align-items: center;

  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.group h2 {
  font-family: 'Cormorant Garamond', serif;

  font-size: clamp(65px, 8vw, 120px);

  font-weight: 500;

  line-height: .75;

  letter-spacing: -.04em;

  margin: 27px 0 40px;

  min-width: 0;
  max-width: 100%;
}

.group h2 em {
  display: inline-block;

  font-style: italic;

  color: #d1b983;

  white-space: nowrap;
}

.group-description {
  max-width: 460px;
  min-width: 0;

  color: #aaa79f;

  font: 17px/1.65 'Cormorant Garamond', serif;
}

.note {
  border-top: 1px solid #fff2;

  margin-top: 50px;

  padding-top: 18px;

  color: #77736b;

  font-size: 9px;

  letter-spacing: .16em;

  text-transform: uppercase;

  overflow-wrap: anywhere;
}

.group-gallery {
  display: grid;

  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

  gap: 8px;

  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.group-image {
  height: 280px;

  overflow: hidden;

  background: #2a2925;

  min-width: 0;
  max-width: 100%;
}

.group-image img {
  width: 100%;
  max-width: 100%;

  height: 100%;

  display: block;

  object-fit: cover;

  transition:
    transform 1s cubic-bezier(.2,.7,.2,1);
}

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

.group-image:nth-child(2) {
  margin-top: 90px;
}

.group-image:nth-child(3) {
  grid-column: 1 / -1;

  height: 220px;
}


/* =========================================
   SERGİLER
========================================= */

.exhibitions {
  position: relative;

  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.empty-row {
  display: grid;

  grid-template-columns: minmax(0, 100px) minmax(0, 1fr) minmax(0, 40px);

  gap: 30px;

  align-items: center;

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

  padding: 30px 0;

  min-width: 0;
  max-width: 100%;

  transition:
    padding .35s ease,
    background .35s ease;
}

.empty-row:last-child {
  border-bottom: 1px solid var(--line);
}

.empty-row > span {
  color: var(--gold);

  font-size: 9px;

  letter-spacing: .16em;

  text-transform: uppercase;

  min-width: 0;
}

.empty-row > div {
  min-width: 0;
  max-width: 100%;
}

.empty-row p {
  font: 500 32px/1.05 'Cormorant Garamond', serif;

  color: var(--ink);

  transition: color .3s ease;

  min-width: 0;
  max-width: 100%;

  overflow-wrap: anywhere;
}

.empty-row small {
  display: block;

  margin-top: 9px;

  color: var(--muted);

  font-size: 9px;

  line-height: 1.6;

  letter-spacing: .04em;

  overflow-wrap: anywhere;
}

.empty-row > b {
  color: var(--gold);

  font-size: 18px;

  font-weight: 400;

  text-align: right;

  transition: transform .3s ease;

  min-width: 0;
}

.empty-row:hover {
  padding-left: 12px;
  padding-right: 12px;
}

.empty-row:hover p {
  color: var(--wine);
}

.empty-row:hover > b {
  transform: translate(4px, -4px);
}


/* =========================================
   İLETİŞİM
========================================= */

.contact {
  padding: 150px 10vw;

  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.contact-title {
  font: 500 clamp(110px, 16vw, 230px)/.68 'Cormorant Garamond', serif;

  letter-spacing: -.06em;

  margin: 35px 0 45px;

  max-width: 100%;
}

.contact-title em {
  color: #d1b983;
}

.contact-lead {
  font: 16px/1.7 'Cormorant Garamond', serif;

  color: #aaa79f;

  max-width: 100%;
}

.contact-list {
  max-width: 800px;
  min-width: 0;

  margin-top: 55px;

  border-top: 1px solid #fff2;
}

.contact-list a,
.contact-list div {
  display: grid;

  grid-template-columns: minmax(0, 150px) minmax(0, 1fr);

  padding: 19px 0;

  border-bottom: 1px solid #ffffff12;

  color: #eee9df;

  text-decoration: none;

  font-size: 12px;

  min-width: 0;
  max-width: 100%;

  overflow-wrap: anywhere;
  word-break: break-word;
}

.contact-list span {
  font-size: 9px;

  letter-spacing: .15em;

  text-transform: uppercase;

  color: #77736b;

  min-width: 0;
}

.contact-list a:hover {
  color: #d1b983;
}


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

footer {
  background: #11110f;

  color: #77736b;

  padding: 27px 5vw;

  display: flex;

  justify-content: space-between;

  gap: 25px;

  font-size: 9px;

  letter-spacing: .08em;

  text-transform: uppercase;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  overflow-wrap: anywhere;
}

footer strong {
  color: #aaa79f;

  font-weight: 500;
}


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

.mobile-menu {
  display: none;
}


/* =========================================
   ANIMATIONS
========================================= */

.reveal {
  opacity: 0;

  transform: translateY(25px);

  transition:
    opacity .8s ease,
    transform .8s cubic-bezier(.2,.7,.2,1);
}

.reveal.visible {
  opacity: 1;

  transform: none;
}


/* =========================================
   MODAL
========================================= */

.modal {
  display: none;

  position: fixed;

  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  z-index: 100;

  padding: 5vw;

  place-items: center;

  width: 100%;
  max-width: 100%;

  overflow: hidden;
}

.modal.open {
  display: grid;
}

.backdrop {
  position: absolute;

  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  background: #0d0d0df2;
}

.modal-box {
  position: relative;

  z-index: 2;

  width: min(1200px, 100%);
  max-width: 100%;

  max-height: 90vh;

  overflow: auto;

  background: #25241f;

  display: grid;

  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);

  min-width: 0;
}

.modal-image {
  background: #181817;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 25px;

  min-width: 0;
  max-width: 100%;
}

.modal-image img,
.modal-image video {
  width: 100%;
  max-width: 100%;

  max-height: 82vh;

  object-fit: contain;

  display: block;
}

.modal-image video {
  background: #111;
}

.modal-copy {
  padding: 55px;

  color: #eee9df;

  min-width: 0;
  max-width: 100%;
}

.modal-copy h2 {
  font: 500 clamp(55px, 6vw, 90px)/.8 'Cormorant Garamond', serif;

  letter-spacing: -.04em;

  margin: 25px 0 35px;

  overflow-wrap: anywhere;
}

.modal-copy > p:not(.label) {
  font: 17px/1.7 'Cormorant Garamond', serif;

  color: #aaa79f;

  overflow-wrap: anywhere;
}

.modal-copy dl {
  margin-top: 40px;

  border-top: 1px solid #fff2;
}

.modal-copy dl div {
  display: flex;

  justify-content: space-between;

  gap: 20px;

  padding: 13px 0;

  border-bottom: 1px solid #ffffff12;

  font-size: 10px;

  min-width: 0;
}

.modal-copy dt {
  color: #77736b;

  text-transform: uppercase;

  letter-spacing: .12em;

  min-width: 0;
}

.modal-copy dd {
  text-align: right;

  overflow-wrap: anywhere;

  min-width: 0;
}

#close {
  position: absolute;

  z-index: 4;

  right: 18px;
  top: 8px;

  border: 0;

  background: none;

  color: #fff;

  font-size: 30px;

  cursor: pointer;
}


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

@media (max-width: 850px) {

  html,
  body {
    width: 100%;
    max-width: 100%;

    overflow-x: hidden;
  }


  /* HEADER */

  .header {
    top: 0;
    left: 0;
    right: 0;

    width: 100%;
    max-width: 100%;

    padding: 0 7vw;
  }

  .header nav {
    display: none;
  }

  .menu {
    display: block;

    width: 35px;
    height: 30px;

    flex-shrink: 0;
  }

  .menu i {
    display: block;

    width: 25px;
    height: 1px;

    background: currentColor;

    margin: 7px 0;
  }


  /* MOBILE MENU */

  .mobile-menu {
    display: flex;

    position: fixed;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    width: 100%;
    max-width: 100%;

    z-index: 45;

    background: var(--dark);

    color: #eee9df;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 22px;

    font: 500 50px 'Cormorant Garamond', serif;

    transform: translateY(-100%);

    transition: .5s;

    overflow: hidden;
  }

  .mobile-menu.open {
    transform: none;
  }

  .mobile-menu a {
    color: #eee9df;

    text-decoration: none;

    font-family: 'Cormorant Garamond', serif;

    font-weight: 500;

    font-size: 50px;

    line-height: 1;

    max-width: 90%;

    text-align: center;
  }

  .mobile-menu a:visited {
    color: #eee9df;
  }

  .mobile-menu a:hover,
  .mobile-menu a:active {
    color: #d1b983;
  }


  /* HERO */

  .hero {
    min-height: 100svh;

    width: 100%;
    max-width: 100%;

    padding: 115px 7vw 55px;

    align-content: center;

    overflow: hidden;
  }

  .hero h1 {
    font-size: 22vw;

    margin-top: 25px;
    margin-bottom: 35px;

    max-width: 100%;
  }

  .hero h1 em {
    margin-left: 9vw;

    max-width: 100%;
  }

  .hero-sub {
    max-width: 340px;
  }


  /* HERO GALLERY */

  .hero-gallery {
    width: 100%;
    max-width: 100%;

    height: 220px;

    margin-top: 42px;

    gap: 8px;

    min-width: 0;
  }

  .hero-frame {
    width: calc((100% - 16px) / 3);
    max-width: 130px;

    padding: 5px;

    flex: 0 1 calc((100% - 16px) / 3);

    min-width: 0;
  }

  .hero-frame-1 {
    margin-top: 18px;

    transform: rotate(-3deg);
  }

  .hero-frame-2 {
    margin-top: 0;

    transform: rotate(1.5deg);
  }

  .hero-frame-3 {
    margin-top: 22px;

    transform: rotate(-2deg);
  }

  .hero-frame-1:hover {
    transform:
      translateY(-6px)
      rotate(-3deg)
      scale(1.015);
  }

  .hero-frame-2:hover {
    transform:
      translateY(-6px)
      rotate(1.5deg)
      scale(1.015);
  }

  .hero-frame-3:hover {
    transform:
      translateY(-6px)
      rotate(-2deg)
      scale(1.015);
  }

  .vertical {
    display: none;
  }


  /* STATEMENT */

  .statement {
    display: block;

    padding: 120px 8vw;

    width: 100%;
    max-width: 100%;

    overflow: hidden;
  }

  .statement .label {
    margin-bottom: 55px;
  }

  .statement-copy {
    font-size: clamp(48px, 12vw, 75px);

    max-width: 100%;
  }


  /* SECTION */

  .section {
    padding: 100px 7vw;

    width: 100%;
    max-width: 100%;

    overflow: hidden;
  }

  .section-head {
    display: block;

    width: 100%;
    max-width: 100%;
  }

  .section-head .intro {
    margin-top: 30px;
  }


  /* PORTFOLIO */

  .portfolio {
    display: block;

    width: 100%;
    max-width: 100%;

    min-width: 0;
  }

  .project {
    width: 100%;
    max-width: 100%;

    min-width: 0;
  }

  .project-image {
    width: 100%;
    max-width: 100%;

    aspect-ratio: 4 / 5;

    height: auto;

    min-width: 0;
  }

  .project-image img,
  .project-image video {
    width: 100%;
    max-width: 100%;

    height: 100%;

    object-fit: cover;
  }

  .project-secondary,
  .project-four {
    margin-top: 75px;
  }

  .load-more-wrap {
    margin-top: 55px;

    max-width: 100%;
  }


  /* ABOUT */

  .about {
    display: block;

    padding: 100px 7vw;

    width: 100%;
    max-width: 100%;

    overflow: hidden;
  }

  .portrait {
    width: 78%;
    max-width: 100%;

    margin-bottom: 80px;
  }

  .portrait-placeholder {
    width: 100%;
    max-width: 100%;

    height: auto;

    aspect-ratio: 4 / 5;
  }

  .about h2 {
    font-size: 18vw;

    line-height: .76;

    max-width: 100%;
  }

  .about h2 span,
  .about h2 em {
    white-space: normal;

    overflow-wrap: normal;
  }

  .about h2 em {
    display: inline;
  }


  /* TIMELINE */

  .timeline {
    margin-top: 60px;

    max-width: 100%;
  }

  .time {
    grid-template-columns: minmax(0, 75px) minmax(0, 1fr);

    gap: 18px;

    padding: 25px 0;

    min-width: 0;
  }

  .time h3 {
    font-size: 27px;

    min-width: 0;

    overflow-wrap: anywhere;
  }

  .time p {
    font-size: 10px;
  }

  .time small {
    font-size: 8px;
  }


  /* GROUP */

  .group {
    display: block;

    padding: 100px 7vw;

    width: 100%;
    max-width: 100%;

    overflow: hidden;
  }

  .group h2 {
    font-size: 18vw;

    line-height: .76;

    max-width: 100%;
  }

  .group h2 em {
    white-space: normal;

    overflow-wrap: normal;

    display: inline;
  }

  .group-gallery {
    margin-top: 65px;

    width: 100%;
    max-width: 100%;

    min-width: 0;
  }

  .group-image {
    height: 220px;

    min-width: 0;

    max-width: 100%;
  }

  .group-image:nth-child(2) {
    margin-top: 55px;
  }

  .group-image:nth-child(3) {
    height: 200px;
  }


  /* EXHIBITIONS */

  .empty-row {
    grid-template-columns:
      minmax(0, 65px)
      minmax(0, 1fr)
      minmax(0, 25px);

    gap: 15px;

    padding: 25px 0;

    min-width: 0;
    max-width: 100%;
  }

  .empty-row p {
    font-size: 26px;

    line-height: 1.05;

    overflow-wrap: anywhere;
  }

  .empty-row small {
    font-size: 8px;

    line-height: 1.5;

    overflow-wrap: anywhere;
  }

  .empty-row:hover {
    padding-left: 0;
    padding-right: 0;
  }


  /* CONTACT */

  .contact {
    padding: 110px 7vw;

    width: 100%;
    max-width: 100%;

    overflow: hidden;
  }

  .contact-title {
    font-size: 25vw;

    max-width: 100%;
  }

  .contact-list {
    width: 100%;
    max-width: 100%;

    min-width: 0;
  }

  .contact-list a,
  .contact-list div {
    grid-template-columns:
      minmax(0, 100px)
      minmax(0, 1fr);

    min-width: 0;
    max-width: 100%;

    overflow-wrap: anywhere;
    word-break: break-word;
  }


  /* FOOTER */

  footer {
    display: block;

    line-height: 2.4;

    width: 100%;
    max-width: 100%;

    overflow-wrap: anywhere;
    word-break: break-word;
  }


  /* MODAL */

  .modal {
    padding: 0;

    width: 100%;
    max-width: 100%;

    overflow: hidden;
  }

  .modal-box {
    height: 100vh;

    max-height: 100vh;

    width: 100%;
    max-width: 100%;

    min-width: 0;

    display: block;

    overflow-x: hidden;
  }

  .modal-image {
    height: 52vh;

    padding: 45px 20px 10px;

    width: 100%;
    max-width: 100%;
  }

  .modal-image img,
  .modal-image video {
    max-height: 100%;

    width: 100%;
    max-width: 100%;
  }

  .modal-copy {
    padding: 25px;

    width: 100%;
    max-width: 100%;

    min-width: 0;
  }

  .modal-copy h2 {
    font-size: 55px;

    margin: 18px 0 25px;

    overflow-wrap: anywhere;
  }
}


/* =========================================
   REDUCED MOTION
========================================= */

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

  html {
    scroll-behavior: auto;
  }

  .reveal,
  .project-image img,
  .project-image video,
  .project-image span,
  .group-image img,
  .hero-frame,
  .project.load-visible {
    transition: none;

    animation: none;
  }
}


/* =========================================
   FINAL MOBILE SAFETY
========================================= */

@media (max-width: 850px) {

  html,
  body {
    width: 100%;
    max-width: 100%;

    overflow-x: hidden;
  }

  main,
  section,
  header,
  footer,
  .hero,
  .statement,
  .section,
  .about,
  .group,
  .contact {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  img,
  video,
  iframe {
    max-width: 100%;
  }
}