:root {
  color-scheme: light;
  --paper: #f6f1eb;
  --ink: #415357;
  --footer: #415357;
  --watermark-image: url("assets/dk-watermark-original-transparent.png");
  --serif: 'Cormorant Garamond', 'EB Garamond', 'GFS Didot', Georgia, serif;
}
*,*::before,*::after {box-sizing: border-box;}
html {scroll-behavior: smooth;}
body {margin:0; overflow-x:clip; background:var(--paper); color:var(--ink); font-family:var(--serif); -webkit-font-smoothing:antialiased;}
img,svg {display:block;}
img {max-width:100%;}
figure,p,h1 {margin:0;}
.visually-hidden {position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* Intro: two-column art direction for the desktop Figma composition. */
.introduction {display:grid; grid-template-columns:1fr 1fr; height:55.55556vw; min-height:640px; isolation:isolate;}
.introduction__information {position:relative; z-index:0; text-align:center; min-width:0;}
/* Same unmodified transparent PNG at every breakpoint. The solid paper
   color belongs to the container, not to an overlay behind the artwork. */
.introduction__information {
  background-color:var(--paper);
  background-image:var(--watermark-image);
  background-repeat:no-repeat;
  background-position:left bottom;
  background-size:auto 50%;
}
.identity {display:flex; justify-content:center; align-items:flex-start; padding-top:5.28vw;}
.identity__logo {width:14.72vw; height:auto; max-width:212px;}
.biography {position:relative; z-index:1; margin:4.5vw auto 0; width:min(66.7%, 490px);}
.biography__description {font-size:clamp(17px,1.46vw,24px); line-height:1.66; font-weight:400; text-align:justify; text-align-last:left;}
/* Designer-supplied flourish, kept on the same line as “collections.” */
.biography__ending {white-space:nowrap;}
.flourish {display:inline-block; width:1.8em; margin-left:.28em; vertical-align:-.10em; line-height:0;}
.flourish img {display:block; width:100%; height:auto;}
.introduction__portrait {position:relative; overflow:hidden; min-width:0; height:100%;}
.introduction__portrait picture,.introduction__portrait img {width:100%; height:100%;}
.introduction__portrait img {object-fit:cover; object-position:center center;}

.social {display:flex; align-items:center; justify-content:center; gap:4.16vw;}
.social--intro {margin-top:3.45vw;}
.social__link {width:clamp(52px,4.16vw,72px); height:clamp(52px,4.16vw,72px); display:grid; place-items:center; padding:4px; color:var(--ink); transition:transform .3s ease,opacity .3s ease; border-radius:5px;}
.social__link img {display:block; width:100%; height:100%; object-fit:contain;}
.social__link:is(:hover,:focus-visible) {transform:translateY(-3px);opacity:.75;}
.social__link:focus-visible {outline:2px solid currentColor; outline-offset:6px;}

/* The photographs are positioned on the *same fractional grid* across screens:
   2/3 width for landscape photographs, 1/4 width for the small square,
   and a 1/4-width indent for the last large image. */
.gallery-composition {position:relative; height:138.88889vw; isolation:isolate; overflow:hidden;}
.gallery-composition__image {position:absolute; overflow:hidden; background:var(--paper); z-index:2;}
.gallery-composition__image img {display:block; width:100%; height:100%; object-fit:cover; transition:transform 1.25s cubic-bezier(.2,.65,.2,1);}
.gallery-composition__image:hover img {transform:scale(1.025);}
.gallery-composition__image--cappadocia {top:12%;left:0;width:66.66667%;aspect-ratio:3/2;}
.gallery-composition__image--mountains {top:19%;right:0;width:25%;aspect-ratio:1/1;}
.gallery-composition__image--new-york {top:56%;left:25%;width:66.66667%;aspect-ratio:3/2;}
.gallery-composition__signature {position:absolute; z-index:1; bottom:-12.5%;left:0;width:100%; pointer-events:none;}
.gallery-composition__signature img {width:100%;height:auto;}

.coming-soon {height:77.77778vw; position:relative; display:flex; align-items:flex-end; justify-content:center; overflow:hidden; isolation:isolate; background:#1b140f;}
.coming-soon__background {position:absolute; inset:0; z-index:-2;}
.coming-soon__background img {width:100%;height:100%;object-fit:cover; object-position:center;}
.coming-soon::before {content:"";position:absolute;inset:53% 0 0;background:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.18) 45%,rgba(0,0,0,.46) 100%);z-index:-1;}
.coming-soon__notice {color:#f3ece4; text-align:center; font-weight:400;font-style:italic;max-width:1100px; width:85%;font-size:clamp(30px,3.68vw,56px);line-height:1.13; margin-bottom:9.1%; text-wrap:balance;}
.footer {min-height:16.66667vw; background:var(--footer); display:flex; flex-direction:column; gap:clamp(10px,1.3vw,22px);align-items:center;justify-content:center; padding:clamp(12px,2vw,26px) 16px; border-top:1px solid rgba(246,241,235,.5);}
.social--footer {gap:4.16vw;}
.social--footer .social__link {color:#d4c8b6;}
.footer__copyright {font:400 clamp(11px,.87vw,14px)/1.5 Arial,Helvetica,sans-serif;letter-spacing:.045em;color:#d4c8b6;text-align:center;}

@media (min-width:1600px) {
  .identity__logo {max-width:none;}
  .biography {width:66.7%; max-width:560px;}
  .biography__description {font-size:1.46vw;}
  .social__link {width:3.33vw;height:3.33vw;}
}

/* Desktop hero: constrain the opening artwork to the *visible* viewport height.
   The image's original 9:10 ratio is preserved: no cropping at wide/short sizes.
   The information is optically centered, and JS only applies a final fit factor
   if a user's font metrics or zoom makes the natural content taller than the hero. */
@media (min-width:1025px) {
  .introduction {
    height: min(55.55556vw, 100svh);
    min-height: 0;
    grid-template-columns: minmax(0,1fr) min(50vw,90svh);
  }
  .introduction__information {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    overflow:hidden;
  }
  .introduction__content {
    width:100%;
    flex:0 0 auto;
    transform:scale(var(--intro-fit,1));
    transform-origin:center center;
  }
  .identity {padding-top:0;}
  .identity__logo {width:min(14.72vw,26.5svh);max-width:none;}
  .biography {margin:clamp(12px,2.5svh,36px) auto 0;width:min(72%,560px);max-width:none;}
  .biography__description {font-size:clamp(15px,min(1.46vw,2.6svh),28px);line-height:1.52;}
  .social--intro {margin-top:clamp(14px,2.5svh,30px);}
  .social--intro .social__link {width:clamp(36px,5.5svh,60px);height:clamp(36px,5.5svh,60px);}
  .introduction__portrait img {object-fit:contain;object-position:right center;}
}

/* Tablet: the same RGBA watermark is left-anchored behind the biography.
   Only the right side of K is clipped as available width decreases. */
@media (min-width:601px) and (max-width:1024px) {
  .introduction {display:flex;flex-direction:column; height:auto;min-height:0;}
  .introduction__portrait {order:-1;width:100%;height:auto;aspect-ratio:768/520;}
  .introduction__portrait img {object-fit:cover;object-position: center top;}
  .introduction__information {width:100%;}
  .introduction__information {background-image:none;}
  .identity {height:46.745vw; padding-top:10.4vw;}
  .identity__logo {width:27.604vw;max-width:none;}
  .biography {
    margin:0;
    width:100%;
    height:70.3125vw;
    padding-top:3.65vw;
    background-color:var(--paper);
    background-image:var(--watermark-image);
    background-repeat:no-repeat;
    background-position:left center;
    background-size:auto 100%;
  }
  .biography__description {font-size:clamp(18px,3.12vw,31px);line-height:1.5;width:62.5%; margin:auto;}
  .social--intro {margin-top:5.86vw;gap:6.5vw;}
  .social__link {width:8vw;height:8vw; padding:2px;}
  .gallery-composition {height:122.395833vw;}
  .gallery-composition__signature {bottom:-14.9%;}
  .gallery-composition__image--cappadocia {top:2.12%;}
  .gallery-composition__image--mountains {top:10.17%;}
  .gallery-composition__image--new-york {top:51%;}
  .coming-soon {height:72.91667vw;}
  .coming-soon__notice {font-size:clamp(28px,4.3vw,40px);line-height:1.06;width:87%;margin-bottom:9.6%;}
  .footer {height:31.25vw;}
  .social--footer {gap:6.5vw;}
}

/* Mobile: proportions and offsets follow the 390 px Figma layout, without locking viewport width. */
@media (max-width:600px) {
  .introduction {display:flex;flex-direction:column;height:auto;min-height:0;}
  .introduction__portrait {order:-1;width:100%;height:auto;aspect-ratio:390/281;}
  .introduction__portrait img {object-fit:cover;object-position: center top;}
  .introduction__information {width:100%;}
  .introduction__information {background-image:none;}
  .identity {height:84.1vw;padding-top:15.4vw;}
  .identity__logo {width:54.36vw;max-width:none;}
  .biography {
    margin:0;
    width:100%;
    height:95.13vw;
    min-height:0;
    padding-top:5.38vw;
    overflow:clip;
    background-color:var(--paper);
    background-image:var(--watermark-image);
    background-repeat:no-repeat;
    background-position:left 19vw;
    background-size:auto calc(100% - 19vw);
  }
  .biography__description {width:89.7%;font-size:4.5vw;line-height:1.58;margin:auto;}
  .social--intro {margin-top:6.2vw;gap:5vw;}
  .social__link {width:13.8vw;height:13.8vw;padding:2px;}
  .gallery-composition {height:123.077vw;}
  .gallery-composition__signature {bottom:-14%;}
  .gallery-composition__image--cappadocia {top:4.167%;}
  .gallery-composition__image--mountains {top:12.29%;}
  .gallery-composition__image--new-york {top:52.0833%;}
  .coming-soon {height:79.487vw;}
  .coming-soon::before {inset:42% 0 0;}
  .coming-soon__notice {font-size:5vw;line-height:1.19;width:91%;margin-bottom:14%;}
  .footer {height:30.769vw;}
  .social--footer {gap:5vw;}
}

@media (prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto;}
  *,*::before,*::after {animation-duration:.01ms!important;transition-duration:.01ms!important;}
}

/* Entrance animations change only an image inside its fixed grid cell. */
@keyframes gallery-arrival {
  from { opacity:.9; transform:scale(1.018); }
  to { opacity:1; transform:scale(1); }
}
@media (prefers-reduced-motion:no-preference) {
  .gallery-composition__image.has-entered img {animation:gallery-arrival .8s ease-out both;}
}


/* Contact section: appended after the original Figma composition, not overlaid onto the artwork. */
.contact-section {background:var(--paper);padding:clamp(72px,8vw,140px) clamp(24px,6vw,100px);border-top:1px solid rgba(65,83,87,.17);}
.contact-section__inner {max-width:1160px;margin:auto;display:grid;grid-template-columns:minmax(0, .84fr) minmax(0, 1.16fr);gap:clamp(45px,7vw,135px);align-items:start;}
.contact-section__eyebrow {text-transform:uppercase;letter-spacing:.17em;font:500 11px/1.5 Arial,Helvetica,sans-serif;margin-bottom:23px;}
.contact-section__intro h2 {font-size:clamp(50px,5vw,82px);font-weight:400;line-height:1.05;letter-spacing:-.028em;margin-bottom:24px;}
.contact-section__intro > p:last-child {font-size:clamp(21px,1.75vw,28px);line-height:1.35;max-width:430px;}
.contact-form {min-width:0;font:400 15px/1.4 Arial,Helvetica,sans-serif;}
.contact-form__row {display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.contact-form__field {display:flex;flex-direction:column;gap:9px;margin-bottom:28px;min-width:0;}
.contact-form__field label {font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;}
.contact-form__field input,.contact-form__field textarea {width:100%;min-width:0;color:var(--ink);background:transparent;border:0;border-bottom:1px solid rgba(65,83,87,.48);border-radius:0;padding:12px 0;font:400 17px/1.45 var(--serif);outline:none;transition:border-color .2s ease,box-shadow .2s ease;}
.contact-form__field textarea {resize:vertical;min-height:126px;}
.contact-form__field input:focus-visible,.contact-form__field textarea:focus-visible {border-bottom-color:var(--ink);box-shadow:0 1px var(--ink);}
.contact-form__field small {font-size:12px;line-height:1.5;color:#657477;}
.contact-form__honeypot {position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important;}
.contact-form__actions {display:flex;flex-direction:column;align-items:flex-start;gap:12px;}
.contact-form__submit {appearance:none;cursor:pointer;color:#f6f1eb;background:var(--ink);border:1px solid var(--ink);padding:14px 24px;font:500 13px/1.2 Arial,Helvetica,sans-serif;letter-spacing:.06em;transition:background .25s ease,color .25s ease;}
.contact-form__arrow {display:inline-block;vertical-align:middle;width:30px;height:30px;margin-left:20px;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease;}
.contact-form__submit:hover .contact-form__arrow {transform:translate(2px,-2px);}
.contact-form__submit:hover:not(:disabled) {background:transparent;color:var(--ink);}
.contact-form__submit:focus-visible {outline:2px solid var(--ink);outline-offset:4px;}
.contact-form__submit:disabled {cursor:progress;opacity:.65;}
.contact-form__status {min-height:18px;font-size:13px;line-height:1.5;}
.contact-form__status[data-state="error"] {color:#a3362b;}
.contact-form__status[data-state="success"] {color:#2c6656;}
.contact-form__privacy {margin-top:17px;color:#657477;font-size:12px;line-height:1.5;}
@media (max-width:800px) {
  .contact-section {padding:72px 8vw 80px;}
  .contact-section__inner {grid-template-columns:1fr;gap:40px;max-width:580px;}
  .contact-section__intro h2 {font-size:60px;margin-bottom:16px;}
  .contact-section__intro > p:last-child {max-width:480px;}
}
@media (max-width:500px) {
  .contact-section {padding:58px 7vw 64px;}
  .contact-section__inner {gap:30px;}
  .contact-section__intro h2 {font-size:50px;}
  .contact-section__intro > p:last-child {font-size:21px;}
  .contact-form__row {grid-template-columns:1fr;gap:0;}
  .contact-form__field {margin-bottom:24px;}
}

/* Small viewports: keep the social signature and copyright fully visible. */
@media (max-width:600px){.footer {min-height:30.769vw;height:auto;gap:7px;padding:12px 14px 14px}.footer__copyright {font-size:11px;} .social--footer .social__link {width:clamp(40px,12vw,54px);height:clamp(40px,12vw,54px);}}