/* =========================================================
   YEWON INTERIOR
   KR: Paperlogy
   EN: Neue Haas / Helvetica family
========================================================= */

:root{
  --bg:#f6f4ef;
  --paper:#faf9f6;
  --soft:#ebe7df;
  --ink:#181816;
  --muted:#5a5348;
  --line:rgba(24,24,22,.16);
  --side:clamp(20px,4vw,64px);

  --font-ko:"Paperlogy",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-en:"Neue Haas Grotesk Text Pro","Neue Haas Grotesk Display Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth;background:var(--bg)}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-ko);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;
}

body.menu-open{overflow:hidden}

a{color:inherit;text-decoration:none}
img,video{display:block;width:100%}
button{font:inherit;color:inherit}
.shell{width:min(100%,1440px);margin:0 auto;padding:0 var(--side)}
.section{padding:140px 0}
.section-soft{background:var(--soft)}

/* HEADER */
.site-header{
  position:absolute;
  z-index:50;
  top:0;
  left:0;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:17px var(--side);
  color:#fff;
}

.brand{width:105px}
.brand img{
  max-height:34px;
  object-fit:contain;
  object-position:left center;
  filter:brightness(0) invert(1);
}

.desktop-nav{
  display:flex;
  align-items:center;
  gap:21px;
  font-family:var(--font-ko);
  font-size:8px;
  font-weight:500;
  letter-spacing:.045em;
}

.desktop-nav a{opacity:.95}
.desktop-nav a:hover{opacity:.6}

.menu-toggle,.menu-close{display:none}

/* HERO */
.hero{
  position:relative;
  height:100svh;
  min-height:640px;
  overflow:hidden;
  background:#111;
  color:#fff;
}

.hero-media,.hero-slider,.hero-video{
  position:absolute;
  inset:0;
}

.hero-slider-mobile{display:none}

.hero-video{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .9s ease;
}

.hero-video.is-active{
  opacity:1;
  z-index:2;
}

.hero-overlay{
  position:absolute;
  z-index:5;
  inset:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.02) 36%,rgba(0,0,0,.34)),
    linear-gradient(90deg,rgba(0,0,0,.18),transparent 60%);
}

.hero-content{
  position:absolute;
  z-index:10;
  left:var(--side);
  bottom:clamp(68px,9vh,98px);
}

.hero-content h1{
  margin:0 0 24px;
  font-family:"Playfair Display", serif;
  font-size:clamp(48px,5.2vw,78px);
  font-weight:400;
  line-height:.93;
  letter-spacing:-.035em;
}

.text-link{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding-bottom:5px;
  border-bottom:1px solid rgba(255,255,255,.58);
  font-size:11px;
  font-weight:400;
}

.hero-counter{
  position:absolute;
  z-index:10;
  right:var(--side);
  bottom:38px;
  display:flex;
  align-items:center;
  gap:9px;
  font-family:var(--font-en);
  font-size:10px;
}

.hero-counter i{
  width:34px;
  height:1px;
  background:rgba(255,255,255,.5);
}

/* TYPOGRAPHY */
.section-label{
  margin:0;
  font-size:10px;
  font-weight:500;
  letter-spacing:.05em;
}

.intro .section-label{
  font-family:var(--font-en);
  letter-spacing:.07em;
}

.intro-title h2,
.section-head h2,
.details-copy h2,
.experience-copy h2,
.contact-title h2{
  margin:0;
  font-family:var(--font-ko);
  font-weight:300;
  letter-spacing:-.045em;
}

/* INTRO */
.intro{background:var(--paper)}

.intro-grid{
  display:grid;
  grid-template-columns:.72fr 1.48fr 1fr;
  gap:6vw;
  align-items:start;
}

.intro-title h2{
  font-size:clamp(36px,3.2vw,54px);
  line-height:1.45;
}

.intro-copy p{
  margin:0 0 18px;
  font-size:13px;
  line-height:1.95;
  color:#5f5b55;
}

/* HEAD */
.section-head{
  display:grid;
  grid-template-columns:.72fr 2.48fr;
  gap:6vw;
  margin-bottom:62px;
}

.section-head h2{
  font-size:clamp(38px,4vw,56px);
  line-height:1.38;
}

/* PROJECTS */
.projects{background:var(--bg)}

.projects-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:68px 22px;
}

.project-media{
  aspect-ratio:4/3;
  overflow:hidden;
  background:#ddd8d0;
}

.project-media img{
  height:100%;
  object-fit:cover;
  transition:transform .7s ease;
}

.project:hover img{transform:scale(1.015)}

.project-meta{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding-top:12px;
}

.project-meta>div{
  display:flex;
  gap:8px;
  align-items:baseline;
}

.project-meta span{
  font-family:var(--font-en);
  font-size:9px;
  color:var(--muted);
}

.project-meta h3{
  margin:0;
  font-size:12px;
  font-weight:400;
}

.project-meta p{
  margin:0;
  font-size:9px;
  color:var(--muted);
}

/* DETAILS */
.details{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  min-height:720px;
}

.details-photo{min-height:720px}
.details-photo img{height:100%;object-fit:cover}

.details-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:84px clamp(42px,6vw,90px);
}

.details-copy h2{
  margin-top:28px;
  font-size:clamp(42px,4.6vw,68px);
  line-height:1.34;
}

.detail-list{
  margin-top:58px;
  border-top:1px solid var(--line);
}

.detail-list>div{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:18px;
  padding:20px 0;
  border-bottom:1px solid var(--line);
}

.detail-list>div>span{
  padding-top:2px;
  font-family:var(--font-en);
  font-size:9px;
  color:var(--muted);
}

.detail-list h3{
  margin:0 0 7px;
  font-size:12px;
  font-weight:500;
}

.detail-list p{
  margin:0;
  font-size:11px;
  line-height:1.7;
  color:#69645d;
}

/* FILM */
.film{background:var(--paper)}

.film-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
}

.film-thumb{
  position:relative;
  display:block;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#111;
}

.film-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s ease,filter .4s ease;
}

.film-thumb::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.13);
}

.film-thumb:hover img{transform:scale(1.015)}

.play-button{
  position:absolute;
  z-index:2;
  left:18px;
  bottom:17px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:54px;
  height:54px;
  border:1px solid rgba(255,255,255,.7);
  border-radius:50%;
  color:#fff;
  font-family:var(--font-en);
  font-size:8px;
  letter-spacing:.08em;
}

.film-card p{
  margin:11px 0 0;
  font-size:11px;
}

.film-card p span{
  margin-right:8px;
  font-family:var(--font-en);
  font-size:9px;
  color:var(--muted);
}

/* EXPERIENCE */
.experience{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:720px;
}

.experience-photo img{
  height:100%;
  object-fit:cover;
}

.experience-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:82px clamp(42px,6vw,90px);
}

.years{
  margin:34px 0 8px;
  font-family:var(--font-en);
  font-size:clamp(110px,11vw,178px);
  font-weight:300;
  line-height:.76;
  letter-spacing:-.07em;
}

.experience-copy h2{
  margin-top:28px;
  max-width:570px;
  font-size:clamp(34px,3.5vw,54px);
  line-height:1.42;
}

.experience-copy>p:last-child{
  max-width:520px;
  margin:30px 0 0;
  font-size:13px;
  line-height:1.95;
  color:#625e58;
}

/* PROCESS */
.process{background:var(--bg)}

.process-list{border-top:1px solid var(--line)}

.process-list>div{
  display:grid;
  grid-template-columns:8% 28% 1fr;
  align-items:center;
  min-height:78px;
  border-bottom:1px solid var(--line);
}

.process-list span{
  font-family:var(--font-en);
  font-size:9px;
  color:var(--muted);
}

.process-list h3{
  margin:0;
  font-size:12px;
  font-weight:500;
}

.process-list p{
  margin:0;
  font-size:11px;
  color:#67625c;
}

/* CONTACT */
.contact{
  padding:130px 0 28px;
  background:#b6976f !important;
  color:#fff !important;
}

.contact-grid{
  display:grid;
  grid-template-columns:1.4fr .6fr;
  gap:8vw;
  align-items:end;
}

.contact-title h2{
  margin-top:24px;
  font-size:clamp(30px,4vw,35px);
  line-height:1.24;
}

.contact-info>div{
  padding:17px 0;
  border-top:1px solid rgba(255,255,255,.17);
}

.contact-info span{
  display:block;
  margin-bottom:8px;
  font-size:9px;
  color:rgba(255,255,255,.44);
}

.contact-info p{
  margin:0;
  font-size:11px;
  line-height:1.8;
  color:rgba(255,255,255,.76);
}

.contact-button{
  display:flex;
  justify-content:space-between;
  padding:16px 0;
  margin-top:22px;
  border-top:1px solid rgba(255,255,255,.62);
  border-bottom:1px solid rgba(255,255,255,.62);
  font-size:11px;
}

footer{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:20px;
  margin-top:105px!important;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.14);
  font-family:var(--font-en);
  font-size:8px;
  color:rgba(255,255,255,.42);
}

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

/* MENU */
.mobile-menu{
  position:fixed;
  z-index:100;
  inset:0;
  display:none;
  flex-direction:column;
  justify-content:center;
  padding:24px;
  background:#b59b7c;
  color:#fff;
}

.mobile-menu.is-open{display:flex}

.mobile-menu>a{
  padding:10px 0;
  font-size:27px;
  font-weight:400;
}

/* REVEAL */
.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .65s ease,transform .65s ease;
}

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

/* MOBILE */
@media(max-width:820px){
  :root{--side:18px}

  .section{padding:88px 0}

  .site-header{
    padding:max(13px,env(safe-area-inset-top)) 14px 13px;
  }

  .brand{width:78px}
  .brand img{max-height:28px}

  .desktop-nav{display:none}

  .menu-toggle,.menu-close{
    display:block;
    position:relative;
    width:26px;
    height:26px;
    padding:0;
    border:0;
    background:transparent;
  }

  .menu-toggle span,.menu-close span{
    position:absolute;
    left:4px;
    width:18px;
    height:1.3px;
    background:currentColor;
  }

  .menu-toggle span:first-child{top:9px}
  .menu-toggle span:last-child{top:15px}

  .menu-close{
    position:absolute;
    top:max(14px,env(safe-area-inset-top));
    right:14px;
  }

  .menu-close span:first-child{top:13px;transform:rotate(45deg)}
  .menu-close span:last-child{top:13px;transform:rotate(-45deg)}

  /* HERO mobile */
  .hero{
    min-height:620px;
    height:100svh;
  }

  .hero-slider-desktop{display:none}
  .hero-slider-mobile{display:block}

  .hero-content{
    left:8px;
    bottom:74px;
  }

  .hero-content h1{
    margin-bottom:18px;
    font-size:40px;
    line-height:.96;
    letter-spacing:-.055em;
    margin-left:10px;
  }

  .text-link{
    font-size:9px;
    gap:8px;
    margin-left:13px;
  }

  .hero-counter{
    right:10px;
    bottom:20px;
    font-size:8px;
  }

  .hero-counter i{width:28px}

  /* ABOUT mobile */
  .intro-grid,.section-head{
    display:block;
  }

  .section-label{
    margin-bottom:32px;
    font-size:10px;
    letter-spacing:.065em;
  }

  .intro-title h2{
    font-size:29px;
    line-height:1.5;
  }

  .intro-copy{
    width:82%;
    margin-left:auto;
    padding-top:38px;
  }

  .intro-copy p{
    margin-bottom:14px;
    font-size:11px;
    line-height:1.9;
  }

  /* Section head */
  .section-head{margin-bottom:42px}

  .section-head h2{
    max-width:320px;
    font-size:27px;
    line-height:1.5;
  }

  /* Projects almost full width */
  .projects .shell{
    padding-left:7px;
    padding-right:7px;
  }

  .projects .section-head{
    padding-left:11px;
    padding-right:11px;
  }

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

  .project-media{
    aspect-ratio:4/3;
  }

  .project-meta{
    display:flex;
    padding:9px 5px 0;
  }

  .project-meta h3{font-size:10px}
  .project-meta span{font-size:8px}
  .project-meta p{font-size:8px}

  /* Details */
  .details{
    display:block;
    min-height:0;
  }

  .details-photo{
    min-height:0;
  }

  .details-photo img{
    height:72svh;
    min-height:500px;
    object-fit:cover;
  }

  .details-copy{
    padding:62px 18px 72px;
  }

  .details-copy h2{
    margin-top:0;
    font-size:29px;
    line-height:1.45;
  }

  .detail-list{
    margin-top:42px;
  }

  .detail-list>div{
    grid-template-columns:28px 1fr;
    gap:10px;
    padding:16px 0;
  }

  .detail-list h3{
    margin-bottom:5px;
    font-size:10px;
  }

  .detail-list p{
    max-width:250px;
    font-size:9px;
    line-height:1.65;
  }

  /* Film */
  .film-grid{
    grid-template-columns:1fr;
    gap:42px;
  }

  .film-thumb{
    aspect-ratio:16/10;
  }

  .play-button{
    left:14px;
    bottom:14px;
    width:46px;
    height:46px;
    font-size:7px;
  }

  .film-card p{
    margin-top:9px;
    font-size:9px;
  }

  /* Experience */
  .experience{
    display:block;
    min-height:0;
  }

  .experience-photo img{
    height:72svh;
    min-height:500px;
  }

  .experience-copy{
    padding:62px 18px 74px;
  }

  .years{
    margin-top:28px;
    font-size:104px;
  }

  .experience-copy h2{
    max-width:320px;
    font-size:28px;
    line-height:1.48;
  }

  .experience-copy>p:last-child{
    width:84%;
    margin-left:auto;
    font-size:10px;
    line-height:1.85;
  }

  /* Process */
  .process-list>div{
    grid-template-columns:28px 1fr;
    row-gap:7px;
    padding:16px 0;
  }

  .process-list h3{
    font-size:10px;
  }

  .process-list p{
    grid-column:2;
    font-size:9px;
    line-height:1.65;
  }

  /* Contact */
  .contact{
    padding-top:84px;
  }

  .contact-grid{
    display:block;
  }

  .contact-title h2{
    font-size:20px;
    line-height:1.34;
  }

  .contact-info{
    margin-top:62px;
  }

  footer{
    margin-top:72px!important;
    align-items:center;
  }

  .footer-logo{width:78px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{
    opacity:1;
    transform:none;
    transition:none;
  }
  .hero-video{transition:none}
}



/* ========================================
   SIGNATURE DETAIL
======================================== */

.signature-detail {
  padding: 150px 6vw 160px;
}

.signature-head {
  max-width: 760px;
  margin-bottom: 80px;
}

.signature-head .section-label {
  margin-bottom: 22px;
}

.signature-head h2 {
  margin: 0;
  font-size: clamp(38px, 4.4vw, 70px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.045em;
}

.signature-intro {
  max-width: 580px;
  margin-top: 32px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.9;
  color: rgba(20, 20, 20, 0.62);
}


/* GALLERY */

.signature-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.75fr);
  gap: 28px;
  align-items: start;
}


/* MAIN */

.signature-main {
  margin: 0;
}

.signature-main img {
  display: block;
  width: 100%;
  height: 720px;
  object-fit: cover;
}


/* SIDE */

.signature-side {
  display: flex;
  flex-direction: column;
  gap: 54px;
}

.signature-item {
  margin: 0;
}

.signature-item img {
  display: block;
  width: 100%;
  height: 310px;
  object-fit: cover;
}


/* CAPTION */

.signature-gallery figcaption {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  margin-top: 18px;
}

.signature-gallery figcaption > span {
  padding-top: 3px;
  font-family: "Manrope", sans-serif;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(20, 20, 20, 0.4);
}

.signature-gallery figcaption strong {
  display: block;
  margin-bottom: 7px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.signature-gallery figcaption p {
  max-width: 390px;
  margin: 0;
  font-size: 13px;
  line-height: 1.75;
  color: rgba(20, 20, 20, 0.58);
}


/* MOBILE */

@media (max-width: 768px) {

  .signature-detail {
    padding: 95px 20px 110px;
  }

  .signature-head {
    margin-bottom: 48px;
  }

  .signature-head h2 {
    font-size: 38px;
    line-height: 1.2;
  }

  .signature-intro {
    margin-top: 24px;
    font-size: 14px;
    line-height: 1.8;
  }

  .signature-gallery {
    display: block;
  }

  .signature-main img {
    height: 520px;
  }

  .signature-side {
    margin-top: 52px;
    gap: 48px;
  }

  .signature-item img {
    height: 430px;
  }

  .signature-gallery figcaption {
    margin-top: 15px;
  }
}

/* ===== PROJECT 3-IMAGE SLIDER ===== */
.project-slider{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.project-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.015);
  pointer-events:none;
  transition:opacity .85s ease, transform 6.5s cubic-bezier(.18,.72,.2,1);
}

.project-slide.is-active{
  opacity:1;
  transform:scale(1.08);
  pointer-events:auto;
}

/* 모든 주요 사진에 부드러운 줌 */
.signature-main,
.signature-item,
.film-thumb,
.experience-photo{
  overflow:hidden;
}

.signature-main img,
.signature-item img,
.film-thumb img,
.experience-photo img{
  transition:transform 1.15s cubic-bezier(.2,.65,.25,1);
  will-change:transform;
}

@media(hover:hover) and (pointer:fine){
  .project-slider:hover .project-slide.is-active{
    transform:scale(1.105);
  }

  .signature-main:hover img,
  .signature-item:hover img,
  .film-thumb:hover img,
  .experience-photo:hover img{
    transform:scale(1.05);
  }
}

.project-arrow{
  position:absolute;
  z-index:5;
  top:50%;
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translateY(-50%);
  padding:0;
  border:1px solid rgba(255,255,255,.55);
  border-radius:50%;
  background:rgba(0,0,0,.12);
  color:#fff;
  font-family:var(--font-en);
  font-size:12px;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  cursor:pointer;
  opacity:0;
  transition:opacity .25s ease,background .25s ease;
}

.project-prev{left:14px}
.project-next{right:14px}

.project-slider:hover .project-arrow{opacity:1}
.project-arrow:hover{background:rgba(0,0,0,.38)}

.project-dots{
  position:absolute;
  z-index:5;
  left:50%;
  bottom:12px;
  display:flex;
  gap:5px;
  transform:translateX(-50%);
}

.project-dots button{
  width:17px;
  height:2px;
  padding:0;
  border:0;
  background:rgba(255,255,255,.42);
  cursor:pointer;
  transition:width .3s ease,background .3s ease;
}

.project-dots button.is-active{
  width:30px;
  background:#fff;
}

@media(max-width:820px){
  .project-arrow{
    width:31px;
    height:31px;
    opacity:.8;
  }

  .project-prev{left:9px}
  .project-next{right:9px}

  .project-dots{bottom:9px}
  .project-dots button{width:14px}
  .project-dots button.is-active{width:25px}
}

@media(prefers-reduced-motion:reduce){
  .project-slide,
  .signature-main img,
  .signature-item img,
  .film-thumb img,
  .experience-photo img{
    transition:none!important;
    transform:none!important;
  }
}

/* =========================================================
   READABILITY PASS — PC + MOBILE
   기존 레이아웃/무드는 유지하고 실제 가독성만 보정
========================================================= */

/* ---------- PC / TABLET ---------- */

body{
  font-size:15px;
  line-height:1.65;
}

/* 헤더 */
.desktop-nav{
  font-size:10px;
  font-weight:500;
  letter-spacing:.035em;
}

/* 공통 작은 라벨 */
.section-label{
  font-size:13px;
  font-weight:500;
  line-height:1.3;
  letter-spacing:.055em;
}

/* ABOUT */
.intro-title h2{
  font-size:clamp(38px,3.3vw,56px);
  line-height:1.42;
}

.intro-copy p{
  font-size:15px;
  line-height:1.9;
  color:#4f4b46;
}

/* SECTION TITLE */
.section-head h2{
  font-size:clamp(40px,4vw,64px);
  line-height:1.35;
}

/* PROJECT META */
.project-meta{
  padding-top:14px;
}

.project-meta span{
  font-size:11px;
}

.project-meta h3{
  font-size:15px;
  font-weight:500;
  line-height:1.45;
}

.project-meta p{
  font-size:12px;
  line-height:1.5;
  color:#68645e;
}

/* SIGNATURE DETAIL */
.signature-head .section-label{
  font-size:11px;
}

.signature-head h2{
  font-size:clamp(42px,4.5vw,70px);
  line-height:1.2;
}

.signature-intro{
  max-width:640px;
  font-size:16px;
  line-height:1.85;
  color:rgba(20,20,20,.68);
}

.signature-gallery figcaption > span{
  font-size:11px;
}

.signature-gallery figcaption strong{
  font-size:15px;
  line-height:1.45;
}

.signature-gallery figcaption p{
  font-size:14px;
  line-height:1.75;
  color:rgba(20,20,20,.66);
}

/* DETAIL LIST — 혹시 기존 details 섹션 사용 시 */
.detail-list>div>span{
  font-size:11px;
}

.detail-list h3{
  font-size:14px;
}

.detail-list p{
  font-size:13px;
  line-height:1.75;
}

/* FILM */
.film-card p{
  font-size:13px;
  line-height:1.5;
}

.film-card p span{
  font-size:11px;
}

/* EXPERIENCE */
.experience-copy h2{
  font-size:clamp(36px,3.5vw,56px);
  line-height:1.4;
}

.experience-copy>p:last-child{
  font-size:15px;
  line-height:1.9;
  color:#514d48;
}

/* PROCESS */
.process-list span{
  font-size:11px;
}

.process-list h3{
  font-size:14px;
  font-weight:500;
}

.process-list p{
  font-size:13px;
  line-height:1.65;
  color:#57534e;
}

/* CONTACT */
.contact-kicker{
  font-size:10px;
}

.contact-lead{
  font-size:14px;
  line-height:1.75;
}

.contact-detail span{
  font-size:9px;
}

.contact-detail strong{
  font-size:16px;
}

.contact-detail small{
  font-size:11px;
}

.contact-footer{
  font-size:9px;
}


/* ---------- MOBILE ---------- */
@media(max-width:820px){

  body{
    font-size:14px;
  }

  /* 히어로 */
  .hero-content h1{
    font-size:42px;
    line-height:.96;
  }

  .text-link{
    font-size:11px;
    line-height:1.4;
  }

  .hero-counter{
    font-size:9px;
  }

  /* 공통 라벨 */
  .section-label{
    margin-bottom:28px;
    font-size:11px;
    line-height:1.35;
    letter-spacing:.055em;
  }

  /* ABOUT */
  .intro-title h2{
    font-size:32px;
    line-height:1.48;
  }

  .intro-copy{
    width:88%;
    padding-top:32px;
  }

  .intro-copy p{
    margin-bottom:18px;
    font-size:14px;
    line-height:1.82;
    color:#4e4a45;
  }

  /* 섹션 타이틀 */
  .section-head{
    margin-bottom:46px;
  }

  .section-head h2{
    max-width:340px;
    font-size:31px;
    line-height:1.45;
  }

  /* 프로젝트 */
  .projects-grid{
    gap:62px;
  }

  .project-meta{
    align-items:flex-start;
    padding:12px 6px 0;
  }

  .project-meta>div{
    gap:7px;
  }

  .project-meta span{
    flex:0 0 auto;
    padding-top:2px;
    font-size:9px;
  }

  .project-meta h3{
    max-width:215px;
    font-size:12.5px;
    font-weight:500;
    line-height:1.45;
  }

  .project-meta p{
    max-width:105px;
    font-size:10.5px;
    line-height:1.45;
    text-align:right;
  }

  /* SIGNATURE DETAIL */
  .signature-detail{
    padding:96px 18px 108px;
  }

  .signature-head{
    margin-bottom:50px;
  }

  .signature-head .section-label{
    margin-bottom:20px;
    font-size:9px;
  }

  .signature-head h2{
    font-size:34px;
    line-height:1.28;
    letter-spacing:-.04em;
  }

  .signature-intro{
    max-width:none;
    margin-top:24px;
    font-size:13px;
    line-height:1.8;
    color:rgba(20,20,20,.68);
  }

  .signature-gallery figcaption{
    grid-template-columns:26px 1fr;
    gap:10px;
    margin-top:16px;
  }

  .signature-gallery figcaption > span{
    font-size:9px;
  }

  .signature-gallery figcaption strong{
    margin-bottom:6px;
    font-size:12px;
    line-height:1.45;
  }

  .signature-gallery figcaption p{
    font-size:11px;
    line-height:1.7;
    color:rgba(20,20,20,.68);
  }

  /* 기존 DETAILS 섹션도 대응 */
  .details-copy h2{
    font-size:32px;
    line-height:1.42;
  }

  .detail-list>div{
    padding:18px 0;
  }

  .detail-list>div>span{
    font-size:9px;
  }

  .detail-list h3{
    font-size:12px;
  }

  .detail-list p{
    max-width:290px;
    font-size:11px;
    line-height:1.7;
  }

  /* FILM */
  .film-card p{
    margin-top:11px;
    font-size:11.5px;
    line-height:1.5;
  }

  .film-card p span{
    font-size:9px;
  }

  .play-button{
    font-size:8px;
  }

  /* EXPERIENCE */
  .experience-copy{
    padding:68px 18px 82px;
  }

  .experience-copy .section-label{
    margin-bottom:26px;
  }

  .experience-copy h2{
    max-width:340px;
    font-size:31px;
    line-height:1.45;
  }

  .experience-copy>p:last-child{
    width:92%;
    margin:28px 0 0 auto;
    font-size:12.5px;
    line-height:1.8;
    color:#504c47;
  }

  /* PROCESS */
  .process-list>div{
    grid-template-columns:34px 1fr;
    row-gap:9px;
    padding:19px 0;
  }

  .process-list span{
    font-size:9px;
  }

  .process-list h3{
    font-size:12px;
    font-weight:500;
  }

  .process-list p{
    grid-column:2;
    font-size:11px;
    line-height:1.7;
  }

  /* CONTACT */
  .contact-kicker{
    font-size:8px;
  }

  .contact-lead{
    width:84%;
    font-size:11.5px;
    line-height:1.75;
  }

  .contact-detail span{
    font-size:8px;
  }

  .contact-detail strong{
    font-size:13px;
  }

  .contact-detail small{
    font-size:9.5px;
  }

  .contact-cta{
    font-size:15px;
  }

  .contact-footer{
    font-size:7px;
  }

  /* 모바일 메뉴 역시 너무 작지 않게 */
  .mobile-menu>a{
    font-size:21px;
    line-height:1.35;
  }

  .mobile-menu>a::after{
    font-size:8px;
  }
}


/* =========================================================
   FINAL OVERRIDES — DO NOT REMOVE
   premium mobile menu / project slider / contact / readability
========================================================= */

/* ---------- MOBILE MENU ---------- */
.mobile-menu{
  position:fixed !important;
  z-index:100 !important;
  inset:0 !important;
  display:none !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
  padding:max(24px,env(safe-area-inset-top)) 22px 46px !important;
  background:#b6976f !important;
  color:#f3efe8 !important;
}

.mobile-menu.is-open{
  display:flex !important;
}

.mobile-menu::before{
  content:"YEWON INTERIOR DESIGN";
  position:absolute;
  top:24px;
  left:22px;
  font-family:var(--font-en);
  font-size:8px;
  font-weight:400;
  letter-spacing:.14em;
  color:rgba(255,255,255,.5);
}

.mobile-menu>a{
  position:relative;
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  padding:18px 0 !important;
  border-bottom:1px solid rgba(255,255,255,.14);
  font-family:var(--font-ko);
  font-size:21px !important;
  font-weight:300 !important;
  line-height:1.35;
  letter-spacing:-.03em;
  color:#f3efe8;
}

.mobile-menu>a:first-of-type{
  border-top:1px solid rgba(255,255,255,.14);
}

.mobile-menu>a::after{
  font-family:var(--font-en);
  font-size:8px;
  font-weight:400;
  letter-spacing:.08em;
  color:rgba(255,255,255,.34);
}

.mobile-menu>a:nth-of-type(1)::after{content:"01";}
.mobile-menu>a:nth-of-type(2)::after{content:"02";}
.mobile-menu>a:nth-of-type(3)::after{content:"03";}
.mobile-menu>a:nth-of-type(4)::after{content:"04";}
.mobile-menu>a:nth-of-type(5)::after{content:"05";}

.mobile-menu.is-open>a{
  animation:menuItemIn .48s cubic-bezier(.22,.61,.36,1) both;
}
.mobile-menu.is-open>a:nth-of-type(1){animation-delay:.05s}
.mobile-menu.is-open>a:nth-of-type(2){animation-delay:.09s}
.mobile-menu.is-open>a:nth-of-type(3){animation-delay:.13s}
.mobile-menu.is-open>a:nth-of-type(4){animation-delay:.17s}
.mobile-menu.is-open>a:nth-of-type(5){animation-delay:.21s}

@keyframes menuItemIn{
  from{opacity:0;transform:translateY(9px)}
  to{opacity:1;transform:none}
}

@media(max-width:820px){
  .menu-close{
    position:absolute !important;
    top:max(17px,env(safe-area-inset-top)) !important;
    right:17px !important;
    width:28px !important;
    height:28px !important;
  }

  .menu-close span{
    left:5px !important;
    width:18px !important;
    height:1px !important;
    background:#f3efe8 !important;
  }

  .menu-close span:first-child{
    top:13px !important;
    transform:rotate(45deg) !important;
  }

  .menu-close span:last-child{
    top:13px !important;
    transform:rotate(-45deg) !important;
  }
}

/* ---------- PROJECT 3-IMAGE SLIDER ---------- */
.project-slider{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.project-slide{
  position:absolute !important;
  inset:0;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  opacity:0;
  transform:scale(1.015);
  pointer-events:none;
  transition:opacity .85s ease,transform 6.5s cubic-bezier(.18,.72,.2,1) !important;
}

.project-slide.is-active{
  opacity:1;
  transform:scale(1.08);
  pointer-events:auto;
}

.project-arrow{
  position:absolute;
  z-index:5;
  top:50%;
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translateY(-50%);
  padding:0;
  border:1px solid rgba(255,255,255,.55);
  border-radius:50%;
  background:rgba(0,0,0,.12);
  color:#fff;
  font-family:var(--font-en);
  font-size:12px;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  cursor:pointer;
  opacity:0;
  transition:opacity .25s ease,background .25s ease;
}

.project-prev{left:14px}
.project-next{right:14px}
.project-slider:hover .project-arrow{opacity:1}
.project-arrow:hover{background:rgba(0,0,0,.38)}

.project-dots{
  position:absolute;
  z-index:5;
  left:50%;
  bottom:12px;
  display:flex;
  gap:5px;
  transform:translateX(-50%);
}

.project-dots button{
  width:17px;
  height:2px;
  padding:0;
  border:0;
  background:rgba(255,255,255,.42);
  cursor:pointer;
  transition:width .3s ease,background .3s ease;
}

.project-dots button.is-active{
  width:30px;
  background:#fff;
}

@media(hover:hover) and (pointer:fine){
  .project-slider:hover .project-slide.is-active{
    transform:scale(1.105);
  }

  .signature-main:hover img,
  .signature-item:hover img,
  .film-thumb:hover img,
  .experience-photo:hover img{
    transform:scale(1.045);
  }
}

.signature-main,
.signature-item,
.film-thumb,
.experience-photo{
  overflow:hidden;
}

.signature-main img,
.signature-item img,
.film-thumb img,
.experience-photo img{
  transition:transform 1.1s cubic-bezier(.2,.65,.25,1);
}

@media(max-width:820px){
  .project-arrow{
    width:31px;
    height:31px;
    opacity:.78;
  }
  .project-prev{left:9px}
  .project-next{right:9px}
  .project-dots{bottom:9px}
  .project-dots button{width:14px}
  .project-dots button.is-active{width:25px}
}

/* ---------- PROJECT META READABILITY ---------- */
.project-meta span{font-size:11px}
.project-meta h3{
  font-size:15px;
  font-weight:500;
  line-height:1.45;
}
.project-meta p{
  font-size:12px;
  line-height:1.45;
}

@media(max-width:820px){
  .project-meta{
    align-items:flex-start;
    padding:12px 6px 0;
  }
  .project-meta span{font-size:9px}
  .project-meta h3{
    max-width:220px;
    font-size:12.5px;
    line-height:1.45;
  }
  .project-meta p{
    max-width:115px;
    font-size:10.5px;
    line-height:1.45;
    text-align:right;
  }
}

/* ---------- CONTACT: matches new HTML structure ---------- */
.contact{
  position:relative !important;
  padding:clamp(110px,12vw,180px) 0 26px !important;
  overflow:hidden;
  background:#161614 !important;
  color:#f3efe8 !important;
}

.contact-inner{
  display:flex;
  min-height:min(820px,88svh);
  flex-direction:column;
}

.contact-top{
  max-width:1000px;
}

.contact-kicker{
  margin:0 0 32px;
  font-family:var(--font-en);
  font-size:10px;
  font-weight:400;
  letter-spacing:.16em;
  color:rgba(243,239,232,.42);
}

.contact-top h2{
  margin:0;
  font-family:"Playfair Display",serif;
  font-size:clamp(64px,8.2vw,132px);
  font-weight:400;
  line-height:.82;
  letter-spacing:-.055em;
}

.contact-lead{
  margin:38px 0 0;
  font-size:14px;
  font-weight:300;
  line-height:1.8;
  color:rgba(243,239,232,.6);
}

.contact-details{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:30px;
  margin-top:auto;
  padding-top:80px;
}

.contact-detail{
  display:flex;
  min-height:122px;
  flex-direction:column;
  justify-content:flex-end;
  padding:0 0 16px;
  border-bottom:1px solid rgba(243,239,232,.18);
  transition:border-color .3s ease,transform .3s ease;
}

.contact-detail span{
  margin-bottom:18px;
  font-family:var(--font-en);
  font-size:9px;
  font-weight:400;
  letter-spacing:.12em;
  color:rgba(243,239,232,.34);
}

.contact-detail strong{
  font-family:var(--font-en);
  font-size:16px;
  font-weight:400;
  letter-spacing:-.02em;
}

.contact-detail small{
  margin-top:7px;
  font-size:11px;
  font-weight:300;
  color:rgba(243,239,232,.45);
}

.contact-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:58px;
  padding:22px 0 20px;
  border-top:1px solid rgba(243,239,232,.72);
  border-bottom:1px solid rgba(243,239,232,.72);
  font-size:18px;
  font-weight:300;
  letter-spacing:-.03em;
}

.contact-cta-arrow{
  font-family:var(--font-en);
  font-size:18px;
  transition:transform .3s ease;
}

.contact-footer{
  display:grid !important;
  grid-template-columns:1fr auto 1fr;
  align-items:center !important;
  gap:20px;
  margin-top:62px !important;
  padding-top:0 !important;
  border-top:0 !important;
  font-family:var(--font-en);
  font-size:9px !important;
  font-weight:400;
  letter-spacing:.06em;
  color:rgba(243,239,232,.3) !important;
}

.contact-footer span:nth-child(2){text-align:center}
.contact-footer a{justify-self:end}

@media(hover:hover) and (pointer:fine){
  .contact-detail:hover{
    border-color:rgba(243,239,232,.72);
    transform:translateY(-3px);
  }
  .contact-cta:hover .contact-cta-arrow{
    transform:translate(4px,-4px);
  }
}

@media(max-width:820px){
  .contact{
    padding:88px 0 20px !important;
  }

  .contact-inner{
    min-height:92svh;
  }

  .contact-kicker{
    margin-bottom:26px;
    font-size:8px;
  }

  .contact-top h2{
    max-width:340px;
    font-size:clamp(52px,15.5vw,72px);
    line-height:.86;
  }

  .contact-lead{
    width:84%;
    margin:28px 0 0 auto;
    font-size:11.5px;
    line-height:1.75;
  }

  .contact-details{
    grid-template-columns:1fr;
    gap:0;
    margin-top:auto;
    padding-top:72px;
  }

  .contact-detail{
    min-height:0;
    padding:16px 0;
  }

  .contact-detail span{
    margin-bottom:9px;
    font-size:8px;
  }

  .contact-detail strong{
    font-size:13px;
  }

  .contact-detail small{
    margin-top:5px;
    font-size:9.5px;
  }

  .contact-cta{
    margin-top:38px;
    padding:18px 0 17px;
    font-size:15px;
  }

  .contact-cta-arrow{
    font-size:15px;
  }

  .contact-footer{
    grid-template-columns:1fr auto auto;
    gap:14px;
    margin-top:42px !important;
    font-size:7px !important;
  }
}

/* ---------- readable common type ---------- */
.section-label{
  font-size:12px;
  line-height:1.3;
}
.intro-copy p{
  font-size:15px;
  line-height:1.9;
}
.signature-intro{
  font-size:16px;
  line-height:1.85;
}
.signature-gallery figcaption p{
  font-size:14px;
  line-height:1.75;
}
.experience-copy>p:last-child{
  font-size:15px;
  line-height:1.9;
}
.process-list p{
  font-size:13px;
  line-height:1.65;
}

@media(max-width:820px){
  .section-label{font-size:10px}
  .intro-copy p{font-size:14px;line-height:1.82}
  .signature-intro{font-size:13px;line-height:1.8}
  .signature-gallery figcaption p{font-size:11px;line-height:1.7}
  .experience-copy>p:last-child{font-size:12.5px;line-height:1.8}
  .process-list p{font-size:11px;line-height:1.7}
}

@media(prefers-reduced-motion:reduce){
  .mobile-menu.is-open>a{animation:none}
  .project-slide,
  .signature-main img,
  .signature-item img,
  .film-thumb img,
  .experience-photo img{
    transition:none !important;
    transform:none !important;
  }
}


.projects .section-head{
  display:block;
  width:100%;
}

.projects .section-label{
  width:100%;
  margin:0 0 20px;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size:35px !important;
  font-weight:500 !important;
  line-height:1;
  letter-spacing:-0.02em;
  text-align:right;
  color:#181816;
}

@media(max-width:820px){
  .projects .section-label{
    margin-bottom:36px;
    font-size:25px !important;
    font-weight:500 !important;
    text-align:right;
  }
}

/* =========================================
   MAIN SECTION TITLE UNIFY
========================================= */

.intro-title h2,
.signature-head h2,
.experience-copy h2,
.film .section-head h2{
  font-family: var(--font-ko) !important;
  font-size: clamp(38px, 3.8vw, 56px) !important;
  font-weight: 300 !important;
  line-height: 1.42 !important;
  letter-spacing: -0.045em !important;
  margin: 0 !important;
}

@media(max-width:820px){
  .intro-title h2,
  .signature-head h2,
  .experience-copy h2,
  .film .section-head h2{
    font-family: var(--font-ko) !important;
    font-size: 31px !important;
    font-weight: 300 !important;
    line-height: 1.45 !important;
    letter-spacing: -0.04em !important;
  }
}

.contact-top h2{
  margin:0;
  max-width:760px;
  font-family:var(--font-ko) !important;
  font-size:clamp(38px,3.3vw,56px) !important;
  font-weight:300 !important;
  line-height:1.42 !important;
  letter-spacing:-.045em !important;
}

.contact-lead{
  margin-top:28px;
  font-size:14px;
  line-height:1.8;
}

@media(max-width:820px){
  .contact-top h2{
    max-width:340px;
    font-size:31px !important;
    line-height:1.45 !important;
  }
}

.contact-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin-top:42px;
  padding:20px 22px;

  background:#f5f1ea;
  color:#2b241d;

  border:none;
  font-size:16px;
  font-weight:500;
  letter-spacing:-0.03em;

  transition:
    background .3s ease,
    transform .3s ease;
}

.contact-cta:hover{
  background:#fff;
  transform:translateY(-2px);
}

.contact-cta-arrow{
  color:#2b241d;
}

.contact-kicker,
.contact-detail span,
.contact-detail small,
.contact-footer{
  color:rgba(255,255,255,.65) !important;
}

.contact-detail strong,
.contact-lead{
  color:rgba(255,255,255,.95) !important;
}

.contact-detail{
  border-bottom:1px solid rgba(255,255,255,.35);
}

.contact{
  background:#876f4f !important;
  color:#fff !important;
}

.projects .section-head h2{
  text-align:right;
  margin-left:auto;
      font-size:40px;
}

@media(max-width:820px){
  .projects .section-head h2{
    max-width:320px;
    margin-left:auto;
    text-align:right;
    font-size:25px;
  }
}

/* =========================================================
   FINAL SECTION RHYTHM
   About L → Projects R → Detail L → Film R
   → Experience L → Process C → Contact R
========================================================= */

/* -------------------------
   01 ABOUT — LEFT
------------------------- */
.intro .section-label,
.intro-title,
.intro-title h2{
  text-align:left !important;
}

.intro-title{
  justify-self:start;
}

.intro-copy{
  text-align:left;
}


/* -------------------------
   02 PROJECTS — RIGHT
------------------------- */
.projects .section-head{
  display:flex !important;
  flex-direction:column;
  align-items:flex-end;
  width:100%;
  margin-bottom:62px;
  text-align:right;
}

.projects .section-label{
  width:auto !important;
  margin:0 0 18px !important;
  text-align:right !important;
}

.projects .section-head h2{
  width:auto !important;
  max-width:620px !important;
  margin:0 0 0 auto !important;
  text-align:right !important;
}


/* -------------------------
   03 SIGNATURE — LEFT
------------------------- */
.signature-head{
  margin-left:0 !important;
  margin-right:auto !important;
  text-align:left !important;
}

.signature-head .section-label,
.signature-head h2,
.signature-intro{
  text-align:left !important;
}


/* -------------------------
   04 FILM / YOUTUBE — RIGHT
------------------------- */
.film .section-head{
  display:flex !important;
  flex-direction:column;
  align-items:flex-end;
  width:100%;
  margin-bottom:54px;
  text-align:right;
}

.film .section-label{
  width:auto;
  margin:0 !important;
  text-align:right !important;
}


/* -------------------------
   05 EXPERIENCE — LEFT
   텍스트 영역은 화면 오른쪽에 있지만
   내용 자체는 왼쪽 정렬로 대비
------------------------- */
.experience-copy{
  align-items:flex-start;
  text-align:left;
}

.experience-copy .section-label,
.experience-copy h2,
.experience-copy>p:last-child{
  text-align:left !important;
  margin-left:0 !important;
  margin-right:auto !important;
}


/* -------------------------
   06 PROCESS — CENTER
------------------------- */
.process .section-head{
  display:flex !important;
  flex-direction:column;
  align-items:center;
  width:100%;
  margin-bottom:64px;
  text-align:center;
}

.process .section-label{
  margin:0 0 18px !important;
  text-align:center !important;
}

.process .section-head h2{
  max-width:700px !important;
  margin:0 auto !important;
  text-align:center !important;
}

/* 진행과정 리스트도 헤더와 살짝 호흡 맞추기 */
.process-list{
  max-width:1180px;
  margin-left:auto;
  margin-right:auto;
}


/* -------------------------
   07 CONTACT — RIGHT
   상단 카피만 우측 정렬,
   주소/전화/인스타 정보는 가독성 위해 좌측 유지
------------------------- */
.contact-top{
  max-width:1000px;
  margin-left:auto;
  margin-right:0;
  text-align:right;
}

.contact-kicker{
  text-align:right !important;
}

.contact-top h2{
  max-width:760px !important;
  margin-left:auto !important;
  margin-right:0 !important;
  text-align:right !important;
}

.contact-details{
  text-align:left;
}

.contact-detail,
.contact-detail span,
.contact-detail strong,
.contact-detail small{
  text-align:left;
}


/* =========================================================
   MOBILE RHYTHM
========================================================= */
@media(max-width:820px){

  /* About — left */
  .intro .section-label,
  .intro-title,
  .intro-title h2{
    text-align:left !important;
  }

  /* Projects — right */
  .projects .section-head{
    align-items:flex-end;
    padding-left:11px;
    padding-right:11px;
    margin-bottom:30px;
    text-align:right;
  }

  .projects .section-label{
    margin-bottom:14px !important;
    text-align:right !important;
  }

  .projects .section-head h2{
    max-width:330px !important;
    margin-left:auto !important;
    text-align:right !important;
  }

  /* Signature — left */
  .signature-head{
    text-align:left !important;
  }

  .signature-head h2,
  .signature-intro{
    text-align:left !important;
  }

  /* Film — right */
  .film .section-head{
    align-items:flex-end;
    margin-bottom:40px;
    text-align:right;
  }

  .film .section-label{
    text-align:right !important;
  }

  /* Experience — left */
  .experience-copy{
    align-items:flex-start;
    text-align:left;
  }

  .experience-copy .section-label,
  .experience-copy h2,
  .experience-copy>p:last-child{
    width:100% !important;
    margin-left:0 !important;
    text-align:left !important;
  }

  /* Process — center */
  .process .section-head{
    align-items:center;
    margin-bottom:46px;
    text-align:center;
  }

  .process .section-label{
    margin-bottom:14px !important;
    text-align:center !important;
  }

  .process .section-head h2{
    max-width:330px !important;
    margin:0 auto !important;
    text-align:center !important;
  }

  /* Contact — right title, left info */
  .contact-top{
    margin-left:auto;
    margin-right:0;
    text-align:right;
  }

  .contact-kicker{
    text-align:right !important;
  }

  .contact-top h2{
    max-width:340px !important;
    margin-left:auto !important;
    margin-right:0 !important;
    text-align:right !important;
  }

  .contact-details{
    text-align:left;
  }
}


/* PROJECTS 헤더 간격 조정 */
.projects .section-head{
  gap:0 !important;
  margin-bottom:38px !important;
}

.projects .section-label{
  margin:0 0 20px !important;
}

.projects .section-head h2{
  margin:10 !important;
}

@media(max-width:820px){
  .projects{
    padding-top:68px;
  }
}


.contact{
  position:relative !important;
  overflow:hidden;
  padding:clamp(110px,12vw,180px) 0 26px !important;

  background:
    linear-gradient(
          rgba(135,111,79,.78),
    rgba(135,111,79,.84)
    ),
    url("assets/project10.webp") center/cover no-repeat !important;

  color:#fff !important;
}

.mobile-menu{
  position:fixed !important;
  z-index:100 !important;
  inset:0 !important;
  display:none !important;

  flex-direction:column !important;
  justify-content:flex-end !important;

  padding:max(24px,env(safe-area-inset-top)) 22px 46px !important;

  background-color:#9f8057 !important;
  color:#f3efe8 !important;

  overflow:hidden;
}

.mobile-menu::after{
  content:"";
  position:absolute;
  inset:0;

  background-image:url("assets/logo.webp");
  background-repeat:repeat;
  background-size:110px auto;
  background-position:18px 30px;

  opacity:.045;

  filter:brightness(0) invert(1);

  pointer-events:none;
}

.mobile-menu > *{
  position:relative;
  z-index:2;
}